/* rimikimi studios — app hub v2 "모던" (2026-09-07, redesign-v2-brief.md)
   무채색 UI + 색은 사진/로고/아이콘에서만. 다크 우선. 20개 페이지가 이 한 파일을 캐시 공유한다. */

/* ── 1. 토큰 (다크 기본) ─────────────────────────────────────────────── */
:root{
  --bg:#0A0A0B; --surface:#131315; --surface-2:#1B1B1E;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --ink:#F4F4F5; --muted:#A1A1AA; --faint:#8B8B92; /* faint 실측 조정(아래 §대비) */
  --live:#22C55E; --review:#F59E0B; --soon:#8E8E93;
  --spot: 255,255,255; /* 스포트라이트 RGB — 라이트에서 0,0,0 로 교체 */

  /* "Geist Fallback"은 반드시 시스템 폰트보다 먼저 와야 한다 — 뒤에 두면 -apple-system이 항상
     먼저 매칭돼 죽은 선언이 된다(메트릭 보정이 전혀 안 걸림, CLS 픽스 무효화). 한글은 라틴 전용인
     Geist/Geist Fallback에 글리프가 없어 자동으로 Pretendard Variable로 넘어간다(폰트 매칭은
     글자 단위 폴백이라 순서를 앞에 둬도 한글엔 영향 없음). */
  --sans:"Geist","Geist Fallback","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans-fallback:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;

  --t-h1:clamp(44px,8vw,104px); --t-h2:clamp(28px,4vw,44px); --t-card:17px; --t-body:15px; --t-label:12px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --inset:clamp(16px, 4vw, 40px); /* 디렉터 실측 버그(모바일 nav/hero left=0) 수정용 페이지 공통 인셋 */
  --r-card:12px; --r-full:999px; --r-hero:20px;

  --ease-decel:cubic-bezier(0.05,0.7,0.1,1.0);
  --ease-accel:cubic-bezier(0.3,0,0.8,0.15);
  --ease-std:cubic-bezier(0.2,0,0,1.0);
  --ease-reveal:cubic-bezier(.2,.8,.2,1);
  --dur-enter:400ms; --dur-exit:200ms; --dur-onscreen:500ms; --dur-micro:200ms;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#FFFFFF; --surface:#F7F7F8; --surface-2:#EFEFF1;
    --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.16);
    --ink:#0A0A0B; --muted:#52525B; --faint:#5F5F66;
    --spot:0,0,0;
    /* critic 2차: 다크 배경용 --live/--review(2.13~2.28:1)가 라이트에서 비텍스트 대비 3:1 미달 —
       어둡게 조정(실측 4.68~5.02:1). --soon은 이미 3.26:1 통과라 안 건드림. */
    --live:#15803D; --review:#B45309;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0B; --surface:#131315; --surface-2:#1B1B1E;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --ink:#F4F4F5; --muted:#A1A1AA; --faint:#8B8B92; --spot:255,255,255;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#F7F7F8; --surface-2:#EFEFF1;
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.16);
  --ink:#0A0A0B; --muted:#52525B; --faint:#5F5F66; --spot:0,0,0;
  --live:#15803D; --review:#B45309;
}
@view-transition{ navigation:auto; }

/* 폰트 스왑 시 리플로우 방지용 metric-compatible 폴백(대략 Geist/Pretendard 배수에 맞춘 size-adjust) */
@font-face{ font-family:"Geist Fallback"; src:local("Arial"); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }

/* ── 2. 리셋 · 베이스 ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
#apps-section{scroll-margin-top:96px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans),"Geist Fallback",var(--sans-fallback);
  line-height:1.55;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-width:0;font-variant-numeric:tabular-nums;transition:background .24s var(--ease-std),color .24s var(--ease-std)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--inset);min-width:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input{font:inherit;color:inherit}
h1,h2{text-wrap:balance;font-weight:600}
p{text-wrap:pretty}
.mono{font-family:var(--mono);letter-spacing:0}
.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.num,.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s4);top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-full);z-index:200;transition:top .2s var(--ease-std)}
.skip-link:focus{top:var(--s4)}

html[data-lang="en"] .i18n-ko{display:none!important}
html[data-lang="ko"] .i18n-en{display:none!important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

.js-reveal .reveal{opacity:0;transform:translateY(12px)}
.js-reveal .reveal.in{opacity:1;transform:translateY(0);transition:opacity var(--dur-onscreen) var(--ease-reveal),transform var(--dur-onscreen) var(--ease-reveal)}
.js-reveal .mask-line .mask-inner{transform:translateY(110%)}
.js-reveal .mask-line.in .mask-inner{transform:translateY(0);transition:transform 700ms var(--ease-reveal)}
.mask-line{display:block;overflow:hidden}
.mask-inner{display:block;will-change:transform}

/* ── 3. 네비 ─────────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:30;min-height:56px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease-std)}
header.site.scrolled{border-bottom-color:var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex-wrap:wrap;padding:10px var(--inset)}
.brand{display:flex;align-items:center;gap:var(--s5);flex:none;min-width:0}
.brand>a{display:flex;align-items:center;gap:7px;flex:none}
.logo{height:20px;width:auto;display:block}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none} :root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="light"] .logo-light{display:block} :root[data-theme="light"] .logo-dark{display:none}
@media (prefers-color-scheme:dark){ .logo-light{display:none} .logo-dark{display:block} }
.studios{font-weight:600;letter-spacing:-0.01em;font-size:14px;color:var(--muted)}
@media(max-width:479px){ .studios{display:none} .brand{gap:var(--s3)} }
.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);padding:6px 2px;transition:color .15s var(--ease-std)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.head-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;flex:none}
.head-meta{display:none}
@media(min-width:720px){ .head-meta{display:block;font-size:12px;color:var(--faint)} }

.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);
  border-radius:var(--r-full);background:transparent;cursor:pointer;color:var(--muted);flex:none;transition:border-color .15s var(--ease-std)}
.theme-toggle:hover{border-color:var(--line-strong);color:var(--ink)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}

.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-full);padding:2px;gap:2px;position:relative}
.lang-toggle button{position:relative;z-index:1;border:0;background:transparent;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.05em;color:var(--muted);padding:6px 11px;min-width:44px;min-height:44px;border-radius:var(--r-full);cursor:pointer}
.lang-toggle .seg-bg{position:absolute;top:2px;left:2px;height:calc(100% - 4px);border-radius:var(--r-full);
  background:var(--ink);transition:transform var(--dur-onscreen) var(--ease-std),width var(--dur-onscreen) var(--ease-std);z-index:0}
html[data-lang="en"] .lang-toggle [data-lang-btn="en"],
html[data-lang="ko"] .lang-toggle [data-lang-btn="ko"]{color:var(--bg)}

/* 디렉터 실측: ≤430px에서 nav가 2줄로 랩(워드마크+링크 / 테마+언어) — 히어로 상단 110px를 먹고
   템플릿처럼 보임(§v2브리프 "높이 56px, 모바일 동일" 위반). 테마·언어 컨트롤을 축소해 1줄 확보. */
@media(max-width:430px){
  .head-row{align-items:flex-start;padding:7px var(--inset)} /* 자식 top을 동일하게(assert 대상), 46px 컨텐츠+7px*2=60 */
  .brand,.head-right{align-items:center} /* 각 컬럼 내부는 계속 자체 중앙정렬 */
  .theme-toggle{width:40px;height:40px}
  .lang-toggle button{min-width:36px;width:36px;min-height:40px;padding:6px 0}
  .lang-toggle{padding:2px;gap:2px}
  /* Enquiry FAB 추가(오너 지시 2026-09-08) 후 회귀: nav에 Contact 3번째 링크가 더해지며 1줄
     예산을 다시 넘겼다(실측 head-row 104px, 2줄) — 이 폭에서는 이미 우하단 FAB(52px 원형)가
     같은 기능을 상시 제공하므로 nav 쪽 Contact만 숨겨 1줄을 복원한다(링크 자체는 넓은 화면에서
     그대로 유지, "네비 Contact 링크는 유지" 지시와 상충하지 않음 — 이 폭만의 responsive 처리). */
  .nav-contact{display:none}
}
@media(max-width:370px){
  /* 360px은 위 430px 축소만으론 안 들어간다(브랜드+링크가 헤드라이트보다 14px 더 필요) —
     지시대로 Apps/Gallery를 13px로, 로고·간격을 더 줄여 폭을 확보한다. 터치 타깃은 세로
     패딩(6px)으로 44px에 최대한 근접 유지, 링크 자체 hit-area는 히트박스 확장으로 보정. */
  .logo{height:18px}
  .brand{gap:var(--s2)}
  .nav-links{gap:var(--s3)}
  .nav-links a{font-size:13px;padding:12px 2px;margin:-6px 0} /* 세로 44px 히트박스, 시각 라인은 그대로 */
  .head-row{gap:6px}
}

/* ── 4. 히어로 ───────────────────────────────────────────────────────── */
/* 디렉터 실측 버그(1280x800/1536x900): marquee를 hero 바닥에 position:absolute로 고정했더니
   짧은 뷰포트에서 위로 올라와 h1 2행·서브카피·CTA 위에 사진이 얹혔다(전체페이지 캡처로만 검증해서
   놓침). 그리드 2행(auto 카피 / minmax(0,1fr) 월)으로 교체 — 월은 카피 "다음"에 정상 문서흐름으로
   시작하고, 짧은 뷰포트에서 3행이 다 안 들어가면 월 자신의 overflow:hidden이 "아래쪽"을 자른다.
   위로 침범하는 경로 자체가 구조적으로 없다.
   CLS: 카피 행(auto)의 실제 높이가 폰트 스왑으로 조금 흔들려도, 월의 내부 콘텐츠(.marquee-inner)는
   CSS로 고정한 치수(행 3×213px+gap 2개)라 자체 리플로우가 없다 — 월 트랙이 살짝 작아지면 그만큼
   더 잘릴 뿐 이미지가 리사이즈되며 시프트를 만들지 않는다. */
.hero{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100svh;padding-top:56px;overflow:hidden}
.hero-copy{position:relative;z-index:2;padding:var(--s7) var(--inset) var(--s6)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero h1{font-size:var(--t-h1);letter-spacing:-0.04em;line-height:1.02;margin-top:var(--s4);word-break:keep-all}
.hero p.sub{margin-top:var(--s4);word-break:keep-all;font-size:clamp(15px,2vw,18px);color:var(--muted);max-width:52ch;line-height:1.55}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding:12px 20px;border-radius:var(--r-full);
  min-height:44px;transition:transform var(--dur-micro) var(--ease-std),background var(--dur-micro) var(--ease-std),border-color var(--dur-micro) var(--ease-std)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--line-strong)}

/* 마키 — 카피 다음 그리드 행(1fr, 짧으면 하단이 잘림). 바깥(.marquee)은 overflow:hidden +
   위쪽 가장자리 마스크 페이드(회전한 타일이 카피 쪽으로 살짝 넘어와도 부드럽게 사라짐).
   회전/스케일은 안쪽 래퍼(.marquee-inner)에만 걸어 바깥 박스 치수는 항상 고정·예측 가능하게 한다.
   행 위치 이동은 hub.js가 rAF로 translateX만 보간(§끊김 금지, transform 외 속성 건드리지 않음). */
.marquee{position:relative;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%)}
.marquee-inner{position:absolute;left:0;right:0;top:0;height:calc(3 * 213px + 2 * var(--s3));
  display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s3);
  transform:rotate(-4deg) scale(1.08);transform-origin:center;pointer-events:none}
.marquee-row{display:flex;gap:var(--s3);width:max-content;will-change:transform;pointer-events:auto}
.marquee-row .mq-tile{flex:none;width:160px;height:213px;border-radius:var(--r-hero);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);cursor:zoom-in;transition:transform 200ms var(--ease-std)}
.marquee-row .mq-tile img{width:100%;height:100%;object-fit:cover;display:block}
.marquee-row.slow .mq-tile{transform:scale(1.04)}
@media(max-width:720px){
  .marquee-row .mq-tile{width:120px;height:160px}
  .marquee-inner{height:calc(3 * 160px + 2 * var(--s3))}
}
@media(prefers-reduced-motion:reduce){
  /* 정지 그리드는 회전·마스크·클리핑이 전부 불필요하다 — 그리드 행 높이도 auto로 풀어
     18장 전부가 자연스럽게 다 보이게 한다(위로 침범할 회전 요소 자체가 없음). */
  .hero{min-height:0;overflow:visible}
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-inner{position:static;height:auto;transform:none;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s3);margin-top:var(--s6)}
  .marquee-row{width:auto;display:contents}
}

/* ── 5. 통계 스트립 ──────────────────────────────────────────────────── */
.stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{flex:1;padding:var(--s5) var(--s3);border-left:1px solid var(--line);text-align:left}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--mono);font-size:clamp(24px,4vw,40px);font-weight:500;letter-spacing:-0.02em;display:block;min-width:2ch}
.stat .l{margin-top:4px;font-size:12px;color:var(--faint)}
.stat.linked a{display:block}
.stat.linked:hover .n{color:var(--muted)}

/* ── 6. 컨트롤(세그먼트+검색) ────────────────────────────────────────── */
.section-head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s7) 0 var(--s4);position:sticky;top:56px;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px)}
.section-head-row h2{font-size:20px}
.controls-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.filters{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-full);padding:2px;position:relative}
.filters [role="tab"]{position:relative;z-index:1;border:0;background:transparent;font-size:12.5px;font-weight:500;color:var(--muted);
  padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;transition:color var(--dur-micro) var(--ease-std)}
.filters [role="tab"][aria-selected="true"]{color:var(--bg);background:var(--ink)}
.filters .pill-bg{position:absolute;top:2px;left:2px;height:44px;border-radius:var(--r-full);background:var(--ink);
  transition:transform var(--dur-onscreen) var(--ease-std),width var(--dur-onscreen) var(--ease-std);z-index:0}
.search-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.search-wrap label{position:absolute;width:1px;height:1px;overflow:hidden}
.search-wrap input[type="search"]{width:min(200px,40vw);min-width:120px;border:1px solid var(--line);background:transparent;
  border-radius:var(--r-full);padding:9px 14px;font-size:13px;min-height:44px;color:var(--ink)}
.search-wrap input[type="search"]::placeholder{color:var(--faint)}
.results-count{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}

/* ── 7. 벤토 그리드 · 카드 · 상태 필 · 그룹 라벨 ────────────────────── */
.group-label{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:var(--s5) 0 var(--s2);border-top:1px solid var(--line);margin-top:var(--s3)}
.group-label:first-of-type{border-top:0;margin-top:0}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);padding-bottom:var(--s4)}
@media(max-width:900px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .bento{grid-template-columns:1fr} }

/* ── "Google 이미지 검색"식 카드 확장 패널 (오너 지시 2026-09-07) ─────────
   클릭한 카드가 속한 행 바로 아래 풀폭으로 끼어든다. 아래 카드 재배치는 hub.js가 FLIP으로. */
/* 캐럿(위 카드를 가리키는 삼각 꼭짓점)이 패널 상단 경계 "밖"으로 9px 튀어나가야 해서
   overflow:hidden인 요소의 자식이면 안 된다(클리핑당해 그냥 직선으로 잘려 보이던 버그).
   .expander(바깥, 클리핑 없음·height는 안쪽을 그대로 따라감) > .expander-clip(overflow:hidden
   + height 트랜지션) 구조로 분리 — 캐럿은 바깥에 둔다. */
.expander{position:relative;z-index:20;grid-column:1/-1} /* z-index:20 — 고정 FAB(z-index:15)보다 위(오너 지시) */
.expander-clip{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;height:0;opacity:0;
  transition:height 320ms var(--ease-reveal),opacity 320ms var(--ease-reveal)}
.expander-caret{position:absolute;top:-8px;width:16px;height:16px;background:var(--surface);
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg);
  pointer-events:none;z-index:1}
.expander-close{position:absolute;top:var(--s4);right:var(--s4);width:36px;height:36px;min-width:44px;min-height:44px;
  margin:-4px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:3;
  transition:border-color .15s var(--ease-std),color .15s var(--ease-std)}
.expander-close:hover{border-color:var(--line-strong);color:var(--ink)}
.expander-body{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--s6);padding:var(--s6) calc(var(--s6) + 44px) var(--s6) var(--s6);
  opacity:1;transition:opacity 160ms var(--ease-std)}
.expander-body.fade{opacity:0}
@media(max-width:720px){ .expander-body{grid-template-columns:1fr;padding:var(--s5)} }

.expander-shots{position:relative}
.expander-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-hero);scroll-behavior:smooth}
.expander-strip img{height:280px;width:auto;flex:0 0 auto;border-radius:var(--r-hero);border:1px solid var(--line);
  object-fit:cover;scroll-snap-align:start}
/* critic 3차 #3: 36px는 닫기 버튼(.expander-close)과 같은 44px 바닥을 안 갖고 있었다(실측 36×36,
   터치 타깃 미달) — min-width/height:44px 추가(렌더 크기는 min이 이겨 44px가 된다), top도 재계산. */
.expander-shots .strip-nav{width:36px;height:36px;min-width:44px;min-height:44px;top:calc(50% - 22px)}
.expander-shots .strip-prev{left:-6px} .expander-shots .strip-next{right:-6px}
.expander-shots .strip-counter{position:absolute;left:10px;bottom:10px;right:auto;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:var(--r-full)}
.expander-empty-shot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  height:280px;background:var(--surface-2);border-radius:var(--r-hero);border:1px dashed var(--line)}
.expander-empty-shot img{width:72px;height:72px;border-radius:16px;border:1px solid var(--line)}
@media(max-width:720px){ .expander-strip img,.expander-empty-shot{height:200px} }

.expander-info{min-width:0}
.expander-info h3{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.expander-info .expander-tagline{margin-top:4px;font-size:13.5px;color:var(--faint)}
.expander-info .status-pill{margin-top:var(--s3)}
.expander-info .latest-pill{margin-top:6px}
.expander-info .expander-desc{margin-top:var(--s4);font-size:14.5px;line-height:1.65;color:var(--muted);max-width:60ch}
.expander-info .stores{margin-top:var(--s5)}
.expander-fullpage{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);font-size:13px;font-weight:500;
  color:var(--muted);transition:color .15s var(--ease-std)}
.expander-fullpage:hover{color:var(--ink)}


.card{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s4);display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  transition:border-color 200ms var(--ease-std),transform 200ms var(--ease-std)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 200ms var(--ease-std);
  background:radial-gradient(240px at var(--mx,50%) var(--my,50%),rgba(var(--spot),.06),transparent 70%)}
:root[data-theme="light"] .card::before,
@media(prefers-color-scheme:light){ .card::before{background:radial-gradient(240px at var(--mx,50%) var(--my,50%),rgba(var(--spot),.04),transparent 70%)} }
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card.hide{display:none}

.card .top{display:flex;align-items:center;gap:12px;min-width:0}
.card .icon{width:48px;height:48px;border-radius:11px;flex:none;object-fit:cover;border:1px solid var(--line)}
.card .id{min-width:0;flex:1}
.card .name{font-size:var(--t-card);font-weight:600;letter-spacing:-0.01em;line-height:1.2;word-break:keep-all}
/* critic 3차 정정: 카드 이름을 실제 <a>로(무JS 폴백) — ::after로 카드 전체를 클릭 영역으로
   늘린다(스트레치드 링크 패턴). .card-link 자신은 position:static이라 ::after의 위치 기준은
   가장 가까운 position:relative 조상인 .card가 된다(카드 전체를 덮음). */
a.card-link{color:inherit;text-decoration:none;display:inline-block}
a.card-link::after{content:"";position:absolute;inset:0;z-index:1}
a.card-link:focus-visible{outline:none} /* 텍스트만 감싸는 좁은 아웃라인 대신 아래 카드 전체 아웃라인으로 대체 */
.card:has(a.card-link:focus-visible){outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-card)}
/* 절대배치(우하단)는 .stores의 스토어 배지(최대 237px 폭)와 겹칠 수 있어 폐기 — 일반 흐름에서
   stores 아래 자기 행으로, 우측 정렬만(카드 폭과 무관하게 절대 안 겹침). */
.card-expand{position:relative;z-index:2;align-self:flex-end;margin-top:var(--s3);flex:none;
  width:36px;height:36px;min-width:44px;min-height:44px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform 200ms var(--ease-std),border-color 200ms var(--ease-std),color 200ms var(--ease-std)}
.card-expand:hover{border-color:var(--line-strong);color:var(--ink)}
.card-expand[aria-expanded="true"]{transform:rotate(180deg)}
/* index.html 바이트 예산(70KB) 절약 — 18장 반복되는 <svg><path>를 순수 CSS 셰브런으로
   교체(회전된 테두리 기법) — 버튼당 ~95B 절감, 아이콘은 장식용이라 aria-hidden 손실 없음
   (버튼 자체 aria-label이 접근성 이름을 이미 제공) */
.card-expand::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg);margin-top:-3px}
.card .sub{font-size:12px;color:var(--faint);font-weight:400;margin-top:2px}
.card .desc{margin-top:var(--s3);font-size:13.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.updated-pill{position:absolute;top:var(--s4);right:var(--s4);font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--faint);z-index:2}

.status-pill{display:flex;width:fit-content;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:var(--s3)}
.status-pill .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--soon)}
.status-pill[data-status="live"] .dot{background:var(--live)}
.status-pill[data-status="review"] .dot{background:var(--review)}
.status-pill[data-status="soon"] .dot{background:var(--soon)}

.stores{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:var(--s4)}
.store-link{display:inline-flex;align-items:center;line-height:0;border-radius:8px;padding:4px;margin:-4px;transition:opacity .2s var(--ease-std)}
.store-link:hover{opacity:.82}
.badge{height:36px;width:auto;display:block;border-radius:6px}
.badge-apple{height:36px;width:107px;background:#fff;border-radius:8px;padding:2px 4px}
.badge-google{height:36px;width:121px}
.badge-soon{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px dashed var(--line);border-radius:8px;
  font-size:11px;font-weight:500;color:var(--faint);white-space:nowrap}
.badge-soon b{font-weight:600;color:var(--muted)}
.globe-ico{flex:none}


/* ── 8. 갤러리 티저 ──────────────────────────────────────────────────── */
.gallery-teaser{margin-top:var(--s8);padding:var(--s7) 0}
.gt-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s2);border-radius:var(--r-card);overflow:hidden}
.gt-grid img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;cursor:zoom-in}
@media(max-width:720px){ .gt-grid{grid-template-columns:repeat(4,1fr)} .gt-grid img:nth-child(n+5){display:none} }
.gt-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);font-size:13.5px;font-weight:500;color:var(--ink)}
.gt-link:hover{text-decoration:underline}

/* ── 9. 푸터 ─────────────────────────────────────────────────────────── */
footer.site{position:relative;margin-top:var(--s8);padding:var(--s7) 0 var(--s6);border-top:1px solid var(--line);overflow:hidden}
.foot-water{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);font-size:min(22vw,320px);font-weight:600;
  letter-spacing:-0.05em;color:var(--line);white-space:nowrap;pointer-events:none;z-index:0;line-height:1;user-select:none}
.foot-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media(max-width:720px){ .foot-row{grid-template-columns:1fr 1fr} }
.foot-col h3{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s3);font-family:var(--mono)}
.foot-col a{display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:color .15s var(--ease-std)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{position:relative;z-index:1;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:12px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* 오너 지시: 고정 Enquiry FAB(우하단)가 스크롤 끝에서 푸터 텍스트(Social 열·하단 행)를 가리지
   않도록 푸터 우측에 여유 확보 — FAB 자체 폭+오프셋(~180px)보다 넉넉하게. 모바일(FAB이 52px
   원형으로 줄어드는 ≤430px)에서는 굳이 안 줄여도 되지만 방해 안 되게 최소한만 유지. */
@media(min-width:481px){ footer.site .wrap{padding-right:calc(var(--inset) + 100px)} }

/* ── Enquiry FAB(우하단 상시 플로팅, 오너 지시 2026-09-08) ──────────────────
   잉크 필(다크=흰바탕 검정글자·라이트=검정바탕 흰글자, .btn-primary와 동일한 --ink/--bg 반전
   패턴 재사용) — z-index:15로 콘텐츠·마키(auto/0)보다 위, 헤더(30)·갤러리 스티키 CTA(60)·
   라이트박스(100)보다 아래(겹치면 FAB가 가려지는 게 맞다). 로드 300ms 후 fade-in은 hub.js가
   .show 클래스로 트리거(reduced-motion은 즉시 표시). */
.fab-enquiry{position:fixed;right:max(20px, env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));z-index:15;
  display:flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-full);
  background:var(--ink);color:var(--bg);border:1px solid var(--line-strong);text-decoration:none;
  font-size:13.5px;font-weight:500;white-space:nowrap;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 300ms var(--ease-decel),transform 300ms var(--ease-decel)}
.fab-enquiry.show{opacity:1;transform:translateY(0);pointer-events:auto}
.fab-enquiry:hover{transform:translateY(-2px)}
.fab-enquiry.show:hover{transform:translateY(-2px)}
.fab-enquiry:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fab-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 갤러리 페이지: 스크롤 시 나타나는 스티키 스토어 CTA(하단바)와 겹치지 않도록 그 높이만큼
   위로 — gallery.js가 실측한 --gcs-h(기본값은 안전 추정치)로 이동, 하드코딩 매직넘버 회피. */
.fab-enquiry.cta-clear{bottom:calc(20px + env(safe-area-inset-bottom) + var(--gcs-h, 76px))}
@media(max-width:430px){
  .fab-enquiry{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
  .fab-enquiry .fab-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fab-enquiry{transition:none}
}

/* ══════════════════ 상세페이지 apps/<slug>.html ══════════════════════ */
.back{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s6);font-size:13px;font-weight:500;color:var(--muted);transition:color .15s}
.back:hover{color:var(--ink)}
.app-hero{display:flex;align-items:flex-start;gap:var(--s5);margin-top:var(--s6);flex-wrap:wrap}
.app-hero .icon-lg{width:96px;height:96px;border-radius:var(--r-hero);border:1px solid var(--line);flex:none}
.app-hero h1{font-size:clamp(28px,5vw,44px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;word-break:keep-all}
.app-hero .tagline{margin-top:6px;font-size:15px;color:var(--muted)}
.latest-pill{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-family:var(--mono);font-size:11px;color:var(--faint)}
.latest-pill b{color:var(--ink);font-weight:500}
.detail-stores{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:var(--s4);align-items:center}
.detail-stores .badge{height:40px;width:auto;display:block}
.detail-stores .badge-apple{width:119px} .detail-stores .badge-google{width:134px}
.detail-stores .badge-soon{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;color:var(--muted)}
.detail-stores .badge-soon b{font-weight:600;color:var(--ink);margin-left:5px}
.live-link-card{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:var(--r-full);
  background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:500}
.live-link-card:hover{transform:translateY(-1px)}

.detail-body{display:grid;grid-template-columns:2fr 1fr;gap:var(--s7);margin-top:var(--s7)}
@media(max-width:720px){ .detail-body{grid-template-columns:1fr;gap:var(--s5)} }
.detail-body .desc{font-size:15.5px;line-height:1.75;color:var(--ink);word-break:keep-all}
.meta-list{display:flex;flex-direction:column;gap:var(--s4);border-left:1px solid var(--line);padding-left:var(--s5)}
@media(max-width:720px){ .meta-list{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s4);flex-direction:row;flex-wrap:wrap;gap:var(--s5)} }
.meta-item h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.meta-item div{font-size:13.5px;color:var(--ink)}

.shots{margin-top:var(--s8);padding-bottom:var(--s7)}
.shots h2{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.shots .note{margin-top:8px;font-size:13px;color:var(--faint)}
.strip-wrap{position:relative;margin-top:var(--s4)}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.strip img,.strip picture{height:563px;width:260px;border-radius:var(--r-hero);border:1px solid var(--line);
  scroll-snap-align:start;flex:0 0 auto;object-fit:cover;display:block}
.strip-fade{position:absolute;top:0;right:0;bottom:10px;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg) 88%)}
.strip-nav{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:2}
.strip-prev{left:-8px} .strip-next{right:56px}
.strip-counter{position:absolute;right:14px;bottom:-2px;font-family:var(--mono);font-size:11px;color:var(--faint)}
@media(max-width:600px){ .strip img,.strip picture{height:420px;width:194px} .app-hero .icon-lg{width:76px;height:76px} .strip-nav{display:none} }

.empty-state{margin-top:var(--s8);padding:var(--s7) var(--s5);border:1px dashed var(--line);border-radius:var(--r-card);
  text-align:center;color:var(--muted);font-size:14px}

.related{margin-top:var(--s8);padding-bottom:var(--s7)}
.related h2{font-size:15px;font-weight:600;margin-bottom:var(--s4)}
.related .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){ .related .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .related .bento{grid-template-columns:1fr} }

/* ══════════════════ gallery.html ══════════════════════════════════════ */
.gallery-hero{padding:calc(56px + var(--s6)) 0 var(--s5)}
.gallery-hero h1{font-size:clamp(24px,4vw,36px)}
/* 마소너리 = grid-auto-rows:1px + grid-row-end:span calc(...) — 자바스크립트 측정 없이
   컨테이너 쿼리 단위(cqw)로 컬럼 폭을 셀프 계산해 이미지 로드 전에 최종 높이가 확정된다(CLS 0). */
.gallery-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--row-gap);grid-auto-rows:1px;
  container-type:inline-size;--cols:2;--row-gap:12px}
@media(min-width:600px){ .gallery-grid{--cols:3} }
@media(min-width:900px){ .gallery-grid{--cols:5} }
.tile{position:relative;display:block;width:100%;padding:0;border:0;background:var(--surface-2);
  cursor:zoom-in;border-radius:10px;overflow:hidden;box-shadow:none;
  --item-w:calc((100cqw - (var(--cols) - 1) * var(--row-gap)) / var(--cols));
  --item-h:calc(var(--item-w) * var(--h) / var(--w));
  grid-row-end:span calc((var(--item-h) + var(--row-gap)) / (1px + var(--row-gap)))}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease-decel);position:relative;z-index:1}
.tile:hover img{transform:scale(1.03)}
.tile.loading::before{content:"";position:absolute;inset:0;background:var(--surface-2);z-index:0;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:.55}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){ .tile.loading::before{animation:none;opacity:.7} }
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.gallery-cta-inline{margin:var(--s6) 0;padding:var(--s5);border-radius:var(--r-card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;grid-column:1/-1}
.gallery-cta-inline .gct-copy{font-size:14px;font-weight:500;max-width:48ch}
.gallery-cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);
  padding:var(--s3) var(--s4);transform:translateY(100%);transition:transform 400ms var(--ease-decel)}
.gallery-cta-sticky.show{transform:translateY(0)}
.gcs-row{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.gcs-copy{font-size:13.5px;font-weight:500;min-width:0}
.gcs-stores{display:flex;gap:10px;align-items:center;flex:none}
.gcs-close{border:0;background:transparent;color:var(--faint);font-size:18px;cursor:pointer;padding:8px;min-width:44px;min-height:44px}

/* 라이트박스 v2 (index 마키/티저 + gallery.html 공용) */
.lb{position:fixed;inset:0;background:color-mix(in srgb, var(--bg) 15%, black 85%);display:none;
  align-items:center;justify-content:center;z-index:100;padding:24px;overscroll-behavior:contain}
.lb.on{display:flex}
/* 디렉터 실측 버그(1440x900 DPR2): #lbimg의 width/height="720"/"960" 속성이 max-width/max-height와
   무관하게 독립적으로 720x738 박스를 만들어 세로 사진 위아래가 잘렸다(비율 무시). 스테이지는
   img 콘텐츠 크기에 맞춰서만 수축(자체 max-width/height 제거) — img 쪽에서만 크기를 결정한다. */
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.96);transition:opacity 300ms var(--ease-decel),transform 300ms var(--ease-decel)}
.lb.on .lb-stage{opacity:1;transform:scale(1)}
.lb img{max-width:min(92vw,1280px);max-height:86vh;width:auto;height:auto;object-fit:contain;display:block;
  border-radius:10px;touch-action:pan-y;user-select:none}
.lb img{filter:blur(0);transition:filter 200ms var(--ease-std)}
.lb img.lb-loading{filter:blur(8px)}
.lb-x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(8px)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(8px)}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-counter{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font-family:var(--mono);font-size:12.5px;color:#fff;
  background:rgba(255,255,255,.14);border-radius:var(--r-full);padding:5px 13px;backdrop-filter:blur(8px)}
.lb-cta{position:absolute;left:50%;bottom:-84px;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;color:#fff;
  display:flex;align-items:center;gap:10px}
.lb-cta a{text-decoration:underline}
@media(max-width:520px){.lb-cta{bottom:-104px;white-space:normal;text-align:center;max-width:88vw}}

/* ══════════════════ enquiry.html (오너 지시 2026-09-08) ══════════════════ */
.enquiry-hero{padding:calc(var(--s9) + 20px) var(--inset) var(--s7);max-width:760px}
.enquiry-hero h1{font-size:var(--t-h2);letter-spacing:-0.03em;line-height:1.1;margin-top:var(--s4);word-break:keep-all}
.enquiry-hero .sub{margin-top:var(--s4);color:var(--muted);font-size:15.5px;line-height:1.6;max-width:56ch;word-break:keep-all}
.enquiry-social{display:flex;gap:12px;margin-top:var(--s6)}
.social-circle{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);transition:border-color 200ms var(--ease-std),transform 200ms var(--ease-std)}
.social-circle:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.social-circle svg{width:20px;height:20px;fill:currentColor}
.social-circle.mail-ico svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.enquiry-form-wrap{padding:0 var(--inset) var(--s9);max-width:560px}
.ef-form{display:flex;flex-direction:column;gap:var(--s5)}
.ef-row{display:flex;flex-direction:column;gap:8px}
.ef-row label{font-size:12.5px;font-weight:500;color:var(--muted)}
.ef-row input[type="text"],.ef-row input[type="email"],.ef-row select,.ef-row textarea{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 14px;
  font-size:14.5px;color:var(--ink);min-height:44px;width:100%;transition:border-color 150ms var(--ease-std)}
.ef-row input::placeholder,.ef-row textarea::placeholder{color:var(--faint)}
.ef-row input:focus,.ef-row select:focus,.ef-row textarea:focus{outline:none;border-color:var(--line-strong)}
.ef-row textarea{min-height:140px;resize:vertical;font-family:inherit;line-height:1.5}
.ef-row select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
  linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 15px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.ef-row.invalid input,.ef-row.invalid select,.ef-row.invalid textarea{border-color:#E0524A}
.ef-hint{font-size:11.5px;color:var(--faint)}

.ef-consent{flex-direction:row}
.ef-checkbox{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.55;cursor:pointer}
.ef-checkbox input[type="checkbox"]{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}

/* 허니팟 — 시각적으로만 숨김(오프스크린), 봇은 채우고 사람은 절대 못 본다 */
.ef-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.ef-submit{position:relative;justify-content:center;width:100%;height:48px;font-size:14.5px}
.ef-submit[disabled]{opacity:.7;cursor:not-allowed}
.ef-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb, var(--bg) 35%, transparent);
  border-top-color:var(--bg);margin-left:8px}
.ef-submit.loading .ef-submit-label{opacity:.75}
.ef-submit.loading .ef-spinner{display:inline-block;animation:ef-spin 700ms linear infinite}
@media(prefers-reduced-motion:reduce){ .ef-submit.loading .ef-spinner{animation:none;opacity:.6} }
@keyframes ef-spin{to{transform:rotate(360deg)}}

.ef-error{margin-top:-var(--s3);font-size:13px;color:#E0524A;line-height:1.6}
.ef-error a{color:inherit;text-decoration:underline}

.ef-sent{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:var(--s6);font-size:15px;color:var(--ink);text-align:center}