/* 온말 홈페이지 — 첫 화면(index.html) 전용.

   2026-08-02 C1: index.html 의 인라인 <style> 을 그대로 옮겼습니다. 값은 하나도
   바꾸지 않았습니다 — 고치는 것은 C2 입니다. */

/* 🚫 배경의 라디얼 블롭을 걷어냈습니다 (2026-08-02, C2). 어느 SaaS 랜딩에나 있는
   장치라 온말이 온말로 안 보이게 만듭니다. 배경은 잉크빛 한 판이고, 깊이는
   신호 문법과 카드 층으로 냅니다. — 덤으로 무JS 라이트에서 어두운 얼룩이
   남던 문제도 함께 사라집니다(그 규칙은 data-theme 이 있을 때만 꺼졌습니다). */
body{line-height:1.65}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}

/* ── 신호 문법 — 파형과 자막 ──────────────────────────────────────────────
     바 격자   두께 2px · 간격 2px · 피치 4px   ← 기존 4px 그리드 위
     파형 높이 4 / 8 / 12 / 16 / 20            ← 같은 그리드
     자막 높이 2                                ← 평평 = 다 옮겨진 상태
     개수      5개. 좁으면 3개                   ← 아이콘의 48/32/16 축소 규칙과 같습니다
     색        파형 = --jade  (아직 내 말이 아닌 것)
               자막 = --paper (내 말이 된 것)

   🚫 장식으로 아무 데나 붙이지 마십시오. <b>변환이 일어나는 자리</b>와
      <b>살아 있는 자리</b>에만 씁니다. 한 화면에 다섯 군데를 넘으면 원칙 위반입니다.
      지금 쓰는 자리: 섹션 머리 · 히어로 상태 · 4단계 흐름 · 화면 탭 · 푸터 앞 구분선. */
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:20px;flex-shrink:0}
.sig b{width:2px;border-radius:1px;background:var(--jade);
  transition:height .22s var(--ease), background-color .22s var(--ease)}
.sig b:nth-child(1){height:8px}
.sig b:nth-child(2){height:16px}
.sig b:nth-child(3){height:20px}
.sig b:nth-child(4){height:12px}
.sig b:nth-child(5){height:4px}
/* 옮겨진 상태: 전부 평평하고, 색이 본문 글자색으로 바뀝니다 */
.sig.done b{height:2px;background:var(--paper)}
/* 작은 자리용 3개판 */
.sig.sm{height:12px}
.sig.sm b:nth-child(1){height:6px}
.sig.sm b:nth-child(2){height:12px}
.sig.sm b:nth-child(3){height:4px}

/* 구분선: 왼쪽은 파형, 오른쪽은 한 줄 — 폭 전체로 변환을 한 번 더 말합니다 */
.sig-rule{display:flex;align-items:flex-end;gap:10px}
.sig-rule::after{content:"";flex:1;height:2px;background:var(--line);margin-bottom:1px}

/* ── nav ── */
nav{display:flex;align-items:center;gap:12px;padding:26px 0;flex-wrap:wrap}
nav a.gh{font-family:var(--mono);font-size:12.5px;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);padding:7px 13px;border-radius:999px;transition:.12s ease-out}
nav a.gh:hover{color:var(--paper);border-color:var(--jade)}

/* ── hero ── */
.hero{padding:56px 0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);margin-bottom:22px;display:flex;align-items:flex-end;gap:9px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,5.4vw,62px);
  line-height:1.16;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--jade)}
.lede{margin-top:22px;color:var(--dim);font-size:17.5px;max-width:34ch}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;text-decoration:none;
  font-weight:600;font-size:15px;transition:.15s var(--ease)}
.btn.s{border:1px solid var(--line);color:var(--paper)}
.btn.s:hover{border-color:var(--jade)}
/* 아직 상점 페이지가 없습니다. 있는 척하는 버튼 대신 준비 중 표식을 둡니다. */
.soon{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:10px;
  border:1px dashed var(--line);color:var(--dim);font-weight:600;font-size:15px;cursor:default}
.soon i{width:8px;height:8px;border-radius:99px;background:var(--moon);flex-shrink:0}
.note{margin-top:16px;font-size:13px;color:var(--dim)}
.ver{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.ver b{color:var(--jade);font-weight:500}

/* ── 자막 데모 — 게임 화면 묘사라 테마와 무관하게 어둡습니다 ── */
.frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0A0E15;
  box-shadow:var(--frame-shadow)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:1px solid #2A4552;background:rgba(27,48,60,.45)}
.dot{width:9px;height:9px;border-radius:99px;background:#2A4552}
.bar span{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:#8FA6B2}
.stage{position:relative;aspect-ratio:16/10;
  background:
    radial-gradient(520px 300px at 22% 18%, rgba(60,86,140,.42), transparent 66%),
    radial-gradient(420px 300px at 84% 82%, rgba(28,54,48,.5), transparent 68%),
    linear-gradient(168deg,#16203A 0%,#0D1220 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:0 20px 17%}
/* '듣는 중' 은 점이 아니라 <b>파형</b>입니다. 앱의 상태 표시와 같은 형태 —
   소리가 들어오고 있다는 사실을 모양 자체가 말합니다. */
.live{position:absolute;top:14px;right:16px;display:flex;align-items:flex-end;gap:8px;
  font-family:var(--mono);font-size:11px;color:#3FC6E0}
.live .sig{height:14px}
.live .sig b{background:#3FC6E0;transform-origin:bottom;
  animation:listen 1.25s var(--ease) infinite}
.live .sig b:nth-child(1){height:6px;animation-delay:0ms}
.live .sig b:nth-child(2){height:12px;animation-delay:110ms}
.live .sig b:nth-child(3){height:14px;animation-delay:220ms}
.live .sig b:nth-child(4){height:9px;animation-delay:330ms}
.live .sig b:nth-child(5){height:4px;animation-delay:440ms}
@keyframes listen{0%,100%{transform:scaleY(.28);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* 실제 오버레이가 그리는 것과 같은 3중 방어(백드롭 + 외곽선 + 그림자, 가이드 §4)입니다.
   ⚠️ 여기 색은 <b>일부러 리터럴</b>입니다 — 게임 화면 위 자막은 페이지 테마를 따르지
   않고 언제나 어둡습니다. 다만 값은 현재 아쿠아 팔레트의 다크 값과 같아야 합니다. */
.subs{width:100%;max-width:460px;display:flex;flex-direction:column;gap:7px}
.sub{background:rgba(11,18,22,.62);backdrop-filter:blur(9px);
  border:1px solid rgba(63,198,224,.16);border-radius:11px;padding:11px 14px;
  display:flex;gap:11px;align-items:baseline;color:#E9EEF2;
  text-shadow:0 2px 6px rgba(0,0,0,.7);transition:.35s var(--ease)}
.sub.old{opacity:.42}
.sub .lang{font-family:var(--mono);font-size:11px;color:#3FC6E0;
  flex-shrink:0;min-width:44px;letter-spacing:.03em}
.sub .tx{font-size:15.5px;line-height:1.45}
/* 원문(아직 안 옮겨진 말)은 흐리게 — 신호 문법의 "파형" 쪽에 해당합니다 */
.sub .tx.src{color:#8FA6B2;font-style:italic}

/* ── 실제 화면 — 한 장씩, 크게 ──────────────────────────────────
   2026-08-01: 3열로 나란히 두니 1180×820 짜리가 한 칸 330px 로 줄어 무엇이
   적혀 있는지 하나도 안 읽혔습니다. 버튼으로 하나씩 고르고 폭을 다 씁니다.

   ⚠️ 여섯 장(3화면 × 2테마)을 <b>겹쳐 쌓고 불투명도로만</b> 바꿉니다.
      display:none 으로 숨기면 상자가 없어져 loading="lazy" 가 영영 받아오지
      않고, 탭을 누르는 순간 빈 칸이 번쩍입니다. aspect-ratio 로 자리를 미리
      잡아 두므로 늦게 도착해도 페이지가 밀리지 않습니다. */
.shot-tabs{display:flex;gap:8px;margin-top:44px;flex-wrap:wrap}
.stab{font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--dim);
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:11px 20px 9px;cursor:pointer;transition:.15s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.stab:hover{color:var(--paper);border-color:var(--jade)}
/* 고른 화면 아래에 <b>자막 바</b> 하나 — 신호 문법에서 '다 옮겨진' 형태입니다 */
.stab i{display:block;width:24px;height:2px;border-radius:1px;background:transparent;
  transition:.15s var(--ease)}
.stab[aria-selected="true"]{color:var(--paper);border-color:var(--jade);background:var(--card-bg)}
.stab[aria-selected="true"] i{background:var(--jade)}

.shot-view{position:relative;margin-top:20px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--night);aspect-ratio:1180/820}
.shot-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .22s var(--ease)}
/* 지금 고른 화면 <b>과</b> 지금 테마, 둘 다 맞는 한 장만 드러납니다.
   🔴 테마 판정은 <b>셀렉터가 아니라 토큰</b>입니다(--shot-dark/--shot-light).
      셀렉터로 나누면 "속성이 없는" 무JS 상태를 한쪽이 가져가 버려, 라이트를 쓰는
      사람이 다크 스크린샷을 보게 됩니다 — 2026-08-02 이전이 그랬습니다. */
.shots[data-shot="home"]     img[data-k="home-dark"],
.shots[data-shot="settings"] img[data-k="settings-dark"],
.shots[data-shot="about"]    img[data-k="about-dark"]{opacity:var(--shot-dark)}
.shots[data-shot="home"]     img[data-k="home-light"],
.shots[data-shot="settings"] img[data-k="settings-light"],
.shots[data-shot="about"]    img[data-k="about-light"]{opacity:var(--shot-light)}

.shot-cap{margin-top:16px;font-size:14.5px;color:var(--dim);line-height:1.6;max-width:66ch}
.shot-cap span{display:none}
.shots[data-shot="home"]     .c-home,
.shots[data-shot="settings"] .c-settings,
.shots[data-shot="about"]    .c-about{display:block}

/* ── 섹션 ── */
section{padding:92px 0}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--jade);margin-bottom:16px;display:flex;align-items:flex-end;gap:9px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(27px,3.4vw,38px);
  line-height:1.28;letter-spacing:-.01em;max-width:24ch}
.sub-lede{margin-top:16px;color:var(--dim);max-width:56ch}

/* ⚠️ <c>minmax(0,1fr)</c> 이지 <c>1fr</c> 이 아닙니다 — 아래 격자 전부 같습니다.
   <c>1fr</c> 은 <c>minmax(auto,1fr)</c> 의 준말이라 칸이 <b>내용의 min-content 아래로
   못 줄어듭니다.</b> 안 끊기는 덩어리(긴 URL·영문 낱말)가 하나만 들어와도 칸이 그만큼
   벌어지고, 벌어진 칸이 .wrap 을 밀어 <b>페이지가 가로로 넘칩니다</b>(scene.css 의
   "가로 넘침 0"). 0 을 최소로 두면 남는 것은 줄바꿈이 처리합니다.
   실제로 2026-08-06 일본어에서 이 일이 났습니다 — 원인은 base.css 의 keep-all 이었고
   거기서 고쳤습니다. 여기 minmax 는 <b>다음 번을 위한 빗장</b>입니다. */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:48px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.step{background:var(--night);padding:26px 22px}
.step .code{font-family:var(--mono);font-size:11.5px;color:var(--jade);letter-spacing:.06em;
  display:flex;align-items:flex-end;gap:9px}
/* 네 단계가 곧 변환입니다. 파형이 단계마다 평평해져 04 에서 자막 바가 됩니다 —
   글을 안 읽어도 이 앱이 무엇을 하는지 형태만으로 보입니다. */
.step .sig{height:14px}
.sig.k1 b:nth-child(1){height:6px}.sig.k1 b:nth-child(2){height:12px}
.sig.k1 b:nth-child(3){height:14px}.sig.k1 b:nth-child(4){height:9px}
.sig.k1 b:nth-child(5){height:4px}
.sig.k2 b:nth-child(1){height:4px}.sig.k2 b:nth-child(2){height:9px}
.sig.k2 b:nth-child(3){height:11px}.sig.k2 b:nth-child(4){height:6px}
.sig.k2 b:nth-child(5){height:3px}
.sig.k3 b:nth-child(1){height:3px}.sig.k3 b:nth-child(2){height:5px}
.sig.k3 b:nth-child(3){height:6px}.sig.k3 b:nth-child(4){height:4px}
.sig.k3 b:nth-child(5){height:2px}
.sig.k4 b{height:2px;background:var(--paper)}
.step h3{font-size:16.5px;font-weight:600;margin:12px 0 8px}
.step p{font-size:14px;color:var(--dim);line-height:1.6}

/* 단계가 넷이 아닌 흐름 (2026-08-03 C5).
   ⚠️ 위의 .flow 는 <b>넷을 전제로</b> 열을 넷 박아 두었습니다. 그대로 두 개만 넣으면
      오른쪽 두 칸이 빈 채로 테두리 안에 남아 <b>깨진 것처럼 보입니다.</b>
      칸 수를 세어 주는 CSS 는 없으므로 쓰는 쪽에서 밝힙니다. */
.flow.f2{grid-template-columns:repeat(2,minmax(0,1fr))}   /* #glossary — 그냥 번역 / 용어집 */
.flow.f3{grid-template-columns:repeat(3,minmax(0,1fr))}   /* #audio — 어디서 / 되는지 / 귀로도 */

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--card-bg)}
.card h3{font-size:17px;font-weight:600;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--dim)}

/* 못 하는 것 — 설치하고 나서 알게 되는 것보다 지금 아는 편이 낫습니다 */
.limits{border-left:2px solid var(--moon);padding-left:26px;margin-top:44px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 44px}
.limit h3{font-size:15.5px;font-weight:600;margin-bottom:7px;color:var(--moon)}
.limit p{font-size:14.5px;color:var(--dim)}

/* 자주 묻는 질문 */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 44px;margin-top:44px}
.faq .qa h3{font-size:15.5px;font-weight:600;margin-bottom:7px;color:var(--jade)}
.faq .qa p{font-size:14.5px;color:var(--dim)}

/* 사양 */
table{width:100%;border-collapse:collapse;margin-top:40px;font-size:14.5px}
th,td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--jade);border-bottom-color:var(--jade)}
tbody th{font-weight:500;color:var(--dim);width:20%}
td{color:var(--paper)}
.spec-note{margin-top:18px;font-size:13.5px;color:var(--dim);border-left:2px solid var(--moon);
  padding-left:16px;max-width:72ch}

/* 언어 */
.langs{display:flex;flex-wrap:wrap;gap:7px;margin-top:36px}
.chip{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;transition:.12s ease-out}
.chip:hover{color:var(--jade);border-color:var(--jade)}

/* 앞으로 — [모노 라벨] · 본문 2열 격자. 읽는 감각이 자막과 같습니다. */
.road{margin-top:44px;border-top:1px solid var(--line)}
.road>div{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:20px;padding:17px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.road .when{font-family:var(--mono);font-size:12.5px;color:var(--jade)}
.road .what{font-size:15px}
.road .who{font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--jade);
  border-radius:999px;padding:3px 10px;justify-self:end}
.road .who.soft{background:transparent;color:var(--dim);border:1px solid var(--line)}

/* 법적 고지 카드 */
.legal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.legal-cards a{display:block;border:1px solid var(--line);border-radius:14px;padding:24px;
  text-decoration:none;background:var(--card-bg);transition:.15s var(--ease)}
.legal-cards a:hover{border-color:var(--jade);transform:translateY(-2px)}
.legal-cards h3{font-size:16.5px;font-weight:600;margin-bottom:9px}
.legal-cards p{font-size:14px;color:var(--dim)}
.legal-cards .go{display:inline-block;margin-top:14px;font-family:var(--mono);
  font-size:12px;color:var(--jade)}

/* 푸터 경계는 실선 대신 신호 구분선입니다 — 페이지의 마지막 한 번. */
footer{padding:0 0 90px;color:var(--dim);font-size:13.5px}
footer .sig-rule{margin-bottom:48px}
footer .row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:20px}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--paper);border-bottom-color:var(--jade)}
footer small{display:block;margin-top:14px;line-height:1.8;font-size:12.5px}

@media (max-width:880px){
  /* 여기도 minmax(0,·) 입니다 — 이유는 위 .flow 주석. 좁은 화면일수록 칸이 좁아
     min-content 에 먼저 걸리므로 <b>넓은 화면보다 더</b> 필요합니다. */
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:34px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* .flow.f3 는 명시도가 더 높아 위 규칙이 못 이깁니다 — 여기서 따로 접습니다.
     (.f2 는 좁은 화면에서도 2열이라 그대로 둡니다.) */
  .flow.f3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
  .legal-cards{grid-template-columns:minmax(0,1fr)}
  .limits{grid-template-columns:minmax(0,1fr)}
  .road>div{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .road .who{grid-column:2;justify-self:start}
  section{padding:66px 0}
}