/* Friday(프라이데이) — friday.rimikimi.com
   스타일 기준: rimikimi apps 허브(_web/portfolio/styles.css) v2 "모던" 토큰 재사용 —
   무채색 UI + 색은 브랜드 accent(임시 systemBlue, assets/design/tokens.css)에서만.
   다크 우선. 브랜드 확정 전이라 로고 없이 워드마크 텍스트만 사용(§본문 참조). */

/* ── 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;
  --spot:255,255,255;

  /* 브랜드 accent — 「더스크(Dusk)」, 02b-brand.md 디렉터 승인(2026-09-08) 확정값.
     텍스트에는 큰 사이즈(≥24px)에서만 사용(AA 대비 실측: dark 4.61:1 · light 5.76:1(흰 글자 기준),
     아래 §접근성 주석) — 버튼 등 소형 텍스트는 허브와 동일하게 잉크/배경 반전(모노크롬)만 쓴다. */
  --accent:#6E5FF0;
  --accent-pressed:#584CC0;
  --warning-bg:#45341A; --warning-fg:#FF9F0A;
  --danger:#FF453A; --danger-bg:rgba(255,69,58,.16);
  --placeholder-bg:#3A2E0A; --placeholder-fg:#FFD166; --placeholder-border:rgba(255,209,102,.5);

  --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;

  --t-h1:clamp(32px,6vw,56px); --t-h2:clamp(24px,4vw,34px); --t-card:16px; --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);
  --r-card:14px; --r-full:999px; --r-hero:22px;

  --ease-decel:cubic-bezier(0.05,0.7,0.1,1.0);
  --ease-std:cubic-bezier(0.2,0,0,1.0);
  --ease-reveal:cubic-bezier(.2,.8,.2,1);
  --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;
    --accent:#5B4CE8;
    --accent-pressed:#5044C0;
    --warning-bg:#FFEFD9; --warning-fg:#8C4000;
    --placeholder-bg:#FFF3CC; --placeholder-fg:#7A5B00; --placeholder-border:#E6C558;
  }
}
: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;
  --accent:#6E5FF0; --accent-pressed:#584CC0; --warning-bg:#45341A; --warning-fg:#FF9F0A;
  --placeholder-bg:#3A2E0A; --placeholder-fg:#FFD166; --placeholder-border:rgba(255,209,102,.5);
}
: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;
  --accent:#5B4CE8; --accent-pressed:#5044C0; --warning-bg:#FFEFD9; --warning-fg:#8C4000;
  --placeholder-bg:#FFF3CC; --placeholder-fg:#7A5B00; --placeholder-border:#E6C558;
}

/* ── 2. 리셋 · 베이스 ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;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:1120px;margin:0 auto;padding:0 var(--inset);min-width:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;font-weight:600;word-break:keep-all}
p,li{text-wrap:pretty;word-break:keep-all}
.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)}
: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)}
hr.rule{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

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}
}
.js-reveal .reveal{opacity:0;transform:translateY(14px)}
.js-reveal .reveal.in{opacity:1;transform:translateY(0);transition:opacity var(--dur-onscreen) var(--ease-reveal),transform var(--dur-onscreen) var(--ease-reveal)}

/* ── 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:8px;flex:none;min-width:0}
.brand-mark{font-weight:700;font-size:17px;letter-spacing:-0.02em;display:flex;align-items:center}
.wordmark{height:20px;width:auto;display:block}
.wordmark-light{display:block}
.wordmark-dark{display:none}
:root[data-theme="dark"] .wordmark-light{display:none} :root[data-theme="dark"] .wordmark-dark{display:block}
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wordmark-light{display:none} :root:not([data-theme="light"]) .wordmark-dark{display:block} }
.foot-brand .wordmark{height:30px}
.nav-links{display:flex;align-items:center;gap:var(--s5)}
.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{color:var(--ink)}
@media(max-width:680px){ .nav-links{display:none} }
.head-right{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:none}

.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;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 10px;min-width:40px;min-height:36px;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)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;padding:12px 22px;border-radius:var(--r-full);
  min-height:44px;transition:transform 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)}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ── 4. 히어로 ───────────────────────────────────────────────────────── */
.hero{padding:var(--s8) 0 var(--s7)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
@media(max-width:860px){ .hero .wrap{grid-template-columns:1fr;gap: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.03em;line-height:1.12;margin-top:var(--s4)}
.hero .tagline{margin-top:var(--s3);font-size:16px;font-weight:600;color:var(--accent)}
.hero p.sub{margin-top:var(--s4);font-size:clamp(15px,2vw,17px);color:var(--muted);max-width:46ch;line-height:1.65}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.hero-figure{position:relative;justify-self:center;max-width:300px;width:100%}
.hero-figure img{border-radius:28px;border:1px solid var(--line);width:100%}
.hero-figure .float-chip{position:absolute;left:-16px;bottom:14%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:10px 14px;font-size:12.5px;font-weight:500;box-shadow:none;display:flex;align-items:center;gap:8px}
@media(max-width:520px){ .hero-figure .float-chip{display:none} }
.mock-dark{display:block}
.mock-light{display:none}
:root[data-theme="light"] .mock-dark{display:none} :root[data-theme="light"] .mock-light{display:block}
@media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .mock-dark{display:none} :root:not([data-theme="dark"]) .mock-light{display:block} }

/* ── 5. 데이터 스토리(왜 금요일) ─────────────────────────────────────── */
.data-story{padding:var(--s8) 0}
.data-story .kicker{color:var(--faint)}
.data-story h2{margin-top:var(--s3)}
.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
@media(max-width:760px){ .data-grid{grid-template-columns:1fr} }
.data-card{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);background:var(--surface)}
.data-card .n{font-family:var(--mono);font-size:clamp(26px,4vw,36px);font-weight:600;color:var(--accent);letter-spacing:-0.02em;display:block}
.data-card .l{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.6}
.data-note{margin-top:var(--s5);font-size:13px;color:var(--faint);line-height:1.7;max-width:70ch}
.data-note a{text-decoration:underline}

/* ── 6. 작동 방식(3 steps) ───────────────────────────────────────────── */
.steps{padding:var(--s8) 0}
.section-head{max-width:60ch}
.section-head h2{margin-top:var(--s3)}
.section-head p{margin-top:var(--s3);color:var(--muted);font-size:15px;line-height:1.65}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
@media(max-width:860px){ .step-grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto} }
.step-card{display:flex;flex-direction:column}
.step-num{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600}
.step-shot{margin-top:var(--s3);border-radius:20px;border:1px solid var(--line);overflow:hidden}
.step-card h3{margin-top:var(--s4);font-size:17px;font-weight:600;letter-spacing:-0.01em}
.step-card p{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.6}

/* ── 7. 음성 5종 ─────────────────────────────────────────────────────── */
.voices{padding:var(--s8) 0}
.voices-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s7);align-items:start;margin-top:var(--s7)}
@media(max-width:860px){ .voices-body{grid-template-columns:1fr} }
.voices-shot{max-width:280px;border-radius:24px;border:1px solid var(--line);overflow:hidden;justify-self:center}
@media(max-width:860px){ .voices-shot{justify-self:start} }
.voice-list{display:flex;flex-direction:column;gap:0}
.voice-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line)}
.voice-row:first-child{border-top:0}
.voice-id{flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent)}
.voice-meta{min-width:0}
.voice-meta .name-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.voice-meta .name{font-size:15.5px;font-weight:600}
.voice-meta .axis{font-size:11.5px;color:var(--faint)}
.voice-meta .mood{font-size:13.5px;color:var(--muted);margin-top:2px}
.voices-note{margin-top:var(--s5);font-size:13px;color:var(--faint);display:flex;align-items:center;gap:8px}

/* ── 8. AI 고지 ──────────────────────────────────────────────────────── */
.ai-notice{padding:var(--s8) 0}
.ai-body{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:center}
@media(max-width:860px){ .ai-body{grid-template-columns:1fr} .ai-body .voices-shot{order:-1} }
.notice-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:var(--s5)}
.notice-card h3{font-size:15px;font-weight:600}
.notice-card p{margin-top:var(--s3);font-size:13.5px;color:var(--muted);line-height:1.7}
.notice-card p+p{margin-top:var(--s3)}

/* ── 9. 가격 ─────────────────────────────────────────────────────────── */
.pricing{padding:var(--s8) 0}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s7);max-width:720px}
@media(max-width:620px){ .price-grid{grid-template-columns:1fr} }
.price-card{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s6);background:var(--surface);position:relative}
.price-card.featured{border-color:var(--line-strong)}
.price-card .tag{position:absolute;top:-11px;right:20px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-full)}
.price-card .plan{font-size:13.5px;color:var(--muted)}
.price-card .amount{margin-top:var(--s2);font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-0.02em}
.price-card .amount small{font-size:14px;font-weight:400;color:var(--muted)}
.price-card .save{margin-top:4px;font-size:12.5px;color:var(--faint)}
.trial-block{margin-top:var(--s6);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);max-width:720px}
.trial-block h3{font-size:14px;font-weight:600}
.trial-block ul{margin-top:var(--s3);display:flex;flex-direction:column;gap:8px;padding-left:0;list-style:none}
.trial-block li{font-size:13.5px;color:var(--muted);line-height:1.6;padding-left:20px;position:relative}
.trial-block li::before{content:"—";position:absolute;left:0;color:var(--faint)}
.kr-badge{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);font-size:12px;color:var(--faint);
  border:1px solid var(--line);border-radius:var(--r-full);padding:6px 12px}
.store-badge-soon{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px dashed var(--line);
  border-radius:10px;font-size:13px;color:var(--faint);margin-top:var(--s6)}
.store-badge-soon b{color:var(--muted);font-weight:600}

/* ── 10. 푸터 ────────────────────────────────────────────────────────── */
footer.site{margin-top:var(--s8);padding:var(--s7) 0 var(--s6);border-top:1px solid var(--line)}
.foot-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
@media(max-width:680px){ .foot-row{grid-template-columns:1fr 1fr;gap:var(--s5)} }
.foot-brand .brand-mark{font-size:16px}
.foot-brand p{margin-top:var(--s3);font-size:12.5px;color:var(--faint);line-height:1.8;max-width:34ch}
.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{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}

/* ── 11. 법정 문서 페이지(개인정보/약관/위치기반) ───────────────────── */
.legal-page{padding:calc(var(--s7) + 8px) 0 var(--s9)}
.legal-page .wrap{max-width:800px}
.legal-banner{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--placeholder-border);background:var(--placeholder-bg);
  color:var(--placeholder-fg);border-radius:var(--r-card);padding:var(--s4) var(--s5);font-size:13px;line-height:1.7;margin-bottom:var(--s7)}
.legal-banner svg{flex:none;margin-top:2px;width:18px;height:18px}
.legal-lang-note{font-size:12.5px;color:var(--faint);margin-bottom:var(--s5)}
.legal-body{font-size:15px;line-height:1.85;color:var(--ink)}
.legal-body h1{font-size:clamp(24px,4vw,32px);letter-spacing:-0.02em;line-height:1.2}
.legal-body h2{font-size:19px;margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line);letter-spacing:-0.01em}
.legal-body h2:first-of-type{margin-top:var(--s7);padding-top:0;border-top:0}
.legal-body h3{font-size:16px;margin-top:var(--s5);font-weight:600}
.legal-body p{margin-top:var(--s4);color:var(--muted)}
.legal-body p strong,.legal-body li strong{color:var(--ink)}
.legal-body ul,.legal-body ol{margin-top:var(--s4);padding-left:22px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.legal-body hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.legal-body blockquote{margin-top:var(--s4);border-left:3px solid var(--line-strong);padding:var(--s3) var(--s5);color:var(--muted);
  background:var(--surface);border-radius:0 var(--r-card) var(--r-card) 0;font-size:14px;line-height:1.75}
.legal-body blockquote p{margin-top:0;color:inherit}
.legal-body blockquote p+p{margin-top:var(--s3)}
.legal-body pre{margin-top:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s5);overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink);white-space:pre-wrap}
.legal-body code{font-family:var(--mono);font-size:13px}
.table-scroll{margin-top:var(--s4);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card)}
.legal-body table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--muted)}
.legal-body th{color:var(--ink);background:var(--surface);font-weight:600;white-space:nowrap}
mark.ph{background:var(--placeholder-bg);color:var(--placeholder-fg);border:1px solid var(--placeholder-border);
  border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:.92em;font-weight:600}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s6);font-size:13px;font-weight:500;color:var(--muted)}
.back-link:hover{color:var(--ink)}

/* ── 12. 지원 페이지 ─────────────────────────────────────────────────── */
.support-page{padding:calc(var(--s7) + 8px) 0 var(--s9)}
.support-page .wrap{max-width:680px}
.support-page h1{font-size:var(--t-h2);letter-spacing:-0.02em}
.support-page .sub{margin-top:var(--s4);color:var(--muted);font-size:15.5px;line-height:1.7}
.support-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.faq{margin-top:var(--s8);display:flex;flex-direction:column;gap:0}
.faq-item{border-top:1px solid var(--line);padding:var(--s5) 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:15px;font-weight:600}
.faq-item p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.7}