/* 소리튠 3분 영어 소리진단
   토큰은 블록챌린지 디자인 시스템(docs/design-system.md)을 그대로 따른다.
   추가된 건 '소리블록' 계열 accent 셋뿐이다 — 스펙 §14 가 소리블록에 한해 허용한 색이다. */

:root {
  --brand-500: #fe6400;
  --brand-600: #e55a00;
  --brand-700: #c84e00;
  --brand-100: #ffe7d5;
  --brand-050: #fff3ea;
  --ink: #17171c;
  --ink-soft: #55555f;
  --muted: #85858f;
  --line: #e4e5e8;
  --surface-soft: #f5f6f8;
  --surface: #ffffff;
  --success: #168a57;
  --success-bg: #e8f7ef;
  --danger: #d93d47;
  --danger-bg: #fdecee;
  --info: #2563b9;
  --info-bg: #eef4fd;
  --focus: #1d4ed8;

  /* 소리블록 전용 accent. 게임/키즈 앱처럼 보이지 않도록 채도를 낮춘 3색만 쓴다. */
  --block-a: linear-gradient(135deg, #4f8ef7, #2f6fe0);
  --block-b: linear-gradient(135deg, #8b5cf6, #6d3fd4);
  --block-c: linear-gradient(135deg, #f062a8, #d63f8f);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px;

  --radius-sm: 10px; --radius-md: 13px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  --shadow-float: 0 12px 30px rgb(23 23 28 / 12%);
  --shadow-soft: 0 8px 24px rgb(23 23 28 / 8%);

  --shell-max: 480px;
  --env-banner-h: 0px;

  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 340ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.85, 0.3, 1);
  /* 블록이 '착' 하고 붙는 느낌. 되튐이 있어야 자석처럼 읽힌다(스펙 §15 magnetic snap). */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1.6;
  color: var(--ink);
  background: var(--surface-soft);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img, video { max-width: 100%; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.tnum { font-variant-numeric: tabular-nums; }
.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;
}

/* ── 타이포 ───────────────────────────────────────────────── */

.t-display { font-size: 34px; font-weight: 800; line-height: 1.14; letter-spacing: -0.03em; }
.t-h1  { font-size: 27px; font-weight: 800; line-height: 1.26; letter-spacing: -0.025em; }
.t-h2  { font-size: 22px; font-weight: 750; line-height: 1.32; letter-spacing: -0.02em; }
.t-h3  { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.t-body-l { font-size: 17px; line-height: 1.6; }
.t-body { font-size: 15px; line-height: 1.6; }
.t-label { font-size: 14px; font-weight: 700; line-height: 1.4; }
.t-caption { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.t-soft { color: var(--ink-soft); }
.t-muted { color: var(--muted); }
.t-brand { color: var(--brand-600); }
.t-center { text-align: center; }

/* 영어 문장. 한글 본문과 다른 리듬으로 읽혀야 해서 자간·굵기를 따로 준다. */
.t-en {
  font-size: 21px; font-weight: 600; line-height: 1.45;
  letter-spacing: -0.01em; word-break: normal;
}

/* ── 셸 ───────────────────────────────────────────────────── */

.env-banner {
  --env-banner-h: 34px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 34px; background: #17171c; color: #fff; font-size: 12.5px; font-weight: 600;
}
.env-banner__tag {
  background: var(--brand-500); border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: 11px; letter-spacing: .04em;
}
body.has-env-banner { --env-banner-h: 34px; }

.shell {
  width: 100%; max-width: var(--shell-max); margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 359px) { .shell { padding: 0 14px; } }

.page {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
}
/**
 * 🔴 여기서 `padding` 단축을 쓰면 안 된다.
 *
 * 이 클래스는 늘 `.shell` 과 **같은 요소**에 붙는다(`class="page__body shell"`).
 * `.shell` 이 좌우 16px 을 주는데, 단축 padding 은 좌우까지 함께 쓰므로 0 으로 덮어 버린다.
 * 둘은 특이도가 같고 이 규칙이 뒤에 있어서 이쪽이 이긴다 →
 * **모든 화면의 본문이 화면 끝에 딱 붙는다.**
 *
 * 2026-09-16 에 실제로 그렇게 나갔다. 카드에는 안쪽 여백이 있어 스크린샷으로는 멀쩡해 보이고,
 * 가로 오버플로 검사(scrollWidth === clientWidth)도 통과한다 — 글자가 끝에 붙는 건
 * 넘치는 게 아니기 때문이다. 여백은 눈이 아니라 **숫자로** 확인할 것:
 *   getComputedStyle(document.querySelector('.page__body')).paddingLeft
 */
.page__body {
  flex: 1;
  padding-block: var(--space-6) var(--space-4);
  animation: page-in var(--motion-base) var(--ease-out) both;
}
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 하단 고정 행동. 엄지로 누르는 자리라 항상 화면 아래에 붙어 있다. */
.page__action {
  position: sticky; bottom: 0;
  /* 🔴 padding 단축을 쓰지 않는다 — .shell 과 같이 붙는 요소라 좌우가 0 으로 덮인다. */
  padding-block: var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface) 72%, rgb(255 255 255 / 0));
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
/* 🔑 그룹 사이 간격. 그룹 '안'(12~16px)의 2배 이상이어야 덩어리로 읽힌다 —
   24px 이었을 땐 내부 16~20px 와 1.2~1.5배 차이뿐이라 전부 한 줄로 뭉개져 보였다. */
.stack-10 { display: flex; flex-direction: column; gap: var(--space-10); }

/* ── 상단 진행 ────────────────────────────────────────────── */

.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); }
.topbar__bar { height: 3px; background: var(--line); }
.topbar__bar > span {
  display: block; height: 100%; background: var(--brand-500);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: width var(--motion-slow) var(--ease-out);
}
.topbar__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-2);
  max-width: var(--shell-max); margin: 0 auto;
  padding: var(--space-3) var(--space-4);
}
.topbar__step { font-size: 13px; font-weight: 700; color: var(--muted); }
.topbar__exit { justify-self: end; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── 로고 ─────────────────────────────────────────────────── */

/* 공식 워드마크 이미지. width/height 속성은 비율만 알려 주고, 실제 크기는 높이로 정한다. */
.logo { display: block; width: auto; }
.logo--xs { height: 17px; }
.logo--sm { height: 24px; }
.logo--lg { height: 38px; }

/* ── 버튼 ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 54px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; text-align: center;
  transition: transform var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { cursor: not-allowed; }

.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--brand-600); }
.btn--primary:disabled { background: #d7d8dc; color: #fff; }
.btn--ghost {
  background: var(--surface); color: var(--brand-600);
  box-shadow: inset 0 0 0 1.5px var(--brand-500);
}
.btn--ghost:hover { background: var(--brand-050); }
.btn--quiet { background: var(--surface-soft); color: var(--ink-soft); }
.btn--quiet:hover { background: #ececf0; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--text {
  min-height: 44px; background: none; color: var(--muted);
  font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.btn--sm { min-height: 44px; font-size: 14.5px; padding: 0 var(--space-4); }

/* ── 카드 ─────────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--space-5);
}
.card--soft { background: var(--surface-soft); border-color: transparent; }
.card--brand { background: var(--brand-050); border-color: #ffdcc2; }

.hint {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--info-bg); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: 14px; line-height: 1.55; color: #2a4a77;
}
.hint__icon { flex: none; font-size: 15px; line-height: 1.5; }

.notice {
  background: var(--brand-050); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: 14px; color: var(--brand-700); font-weight: 600;
}

/* ── 시작 화면 ────────────────────────────────────────────── */

.start { background: linear-gradient(180deg, var(--brand-050) 0%, var(--surface) 46%); }
.start__hero { margin-top: var(--space-4); }
.start__hero em {
  display: block; font-style: normal;
  font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em;
  color: var(--brand-500);
}
.start__hero strong {
  display: block; font-size: 34px; font-weight: 800; line-height: 1.16;
  letter-spacing: -0.035em; margin-top: 2px;
}

/* 2×2 격자(2026-09-17) — 세로 4줄이 화면의 1/3 을 먹어 진단 버튼이 아래로 밀렸다.
   🔑 칸이 좁아(≈171px) 아이콘을 줄이고 글자는 한 줄씩만 쓴다. 문구를 늘리면 줄바꿈이 생긴다. */
/* 1×4 세로 목록(2026-09-21 복귀). 2×2 는 세로를 아꼈지만 칸이 좁아(≈171px) 아이콘·글자를
   줄여야 했고, 그래서 네 항목이 카드처럼 보였다. 한 줄에 하나면 폭 제약이 사라져 원래 크기로 돌아간다.
   🔴 카드가 아니다 — 이건 '읽을 것'이라 테두리·배경·radius 를 주면 아래 track-btn(누를 것)과
   구분이 사라진다(DS §2.2 "페이지 구획을 위해 카드를 남발하지 않는다"). 아이콘칩만 남긴다. */
.features { display: flex; flex-direction: column; gap: var(--space-3); }
.features li {
  display: flex; align-items: center; gap: var(--space-4); min-width: 0;
}
.feature__icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand-600);
}
.feature__icon svg { width: 20px; height: 20px; }
.feature__title { display: block; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
.feature__sub { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* 지난 기록 카드 — 진행 중 / 완료 결과가 한 카드에 같이 들어갈 수 있다. */
.recent { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.recent__item { display: flex; flex-direction: column; gap: var(--space-2); }
.recent__item + .recent__item { padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* 제목 오른쪽에 시각을 붙인다 — 타입 줄과 섞이지 않게 줄을 나눈다. */
.recent__head { display: flex; align-items: baseline; gap: var(--space-2); }
.recent__type { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; }

/* 떠다니는 말풍선 + 버튼. 5days(.count-bubble)와 같은 색·움직임이다.
   ⚠️ 말풍선은 가운데 정렬 — 버튼 왼쪽 끝에 붙이면 좁은 화면에서 꼬리가 버튼 밖으로 나간다(5days 실측). */
.float-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.float-cta > .btn { width: 100%; }
.float-tip {
  position: relative;
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.45;
}
.float-tip::after {
  content: '';
  position: absolute; left: 50%; bottom: -5px;
  width: 12px; height: 8px; margin-left: -6px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 갈래 선택 — 이 화면이 "녹음하기 싫다"는 사람을 놓치지 않는 유일한 지점이다.
   카드였던 것을 CTA 크기로 줄였다(2026-09-17). 무엇을·몇 분인지만 남긴다. */
.tracks { display: flex; flex-direction: column; gap: var(--space-2); }
.track-btn {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 62px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border: 0; border-radius: var(--radius-md);
  background: var(--surface); color: var(--brand-600);
  box-shadow: inset 0 0 0 1.5px var(--brand-500);
  text-align: left; cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out);
}
.track-btn:hover { background: var(--brand-050); }
.track-btn:active { transform: scale(0.985); }
.track-btn--primary { background: var(--brand-500); color: #fff; box-shadow: none; }
.track-btn--primary:hover { background: var(--brand-600); }
.track-btn__main { flex: 1; min-width: 0; }
/* 🔴 아래 span 들은 block 이어야 한다. 기본 inline 이면 제목과 설명이 한 줄로 이어 붙는다. */
.track-btn__title { display: block; font-size: 17px; font-weight: 750; line-height: 1.3; letter-spacing: -0.02em; }
.track-btn__desc { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.track-btn--primary .track-btn__desc { color: rgb(255 255 255 / 86%); }
.track-btn__time {
  flex: none; border-radius: var(--radius-pill); padding: 4px 10px;
  font-size: 12.5px; font-weight: 700;
  background: var(--brand-050); color: var(--brand-700);
}
.track-btn--primary .track-btn__time { background: rgb(255 255 255 / 22%); color: #fff; }

/* ── 오디오 플레이어 ──────────────────────────────────────── */

.player {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface-soft); border-radius: var(--radius-xl);
  padding: var(--space-4);
}
.player--hero { background: var(--brand-050); padding: var(--space-5); }

.play-btn {
  flex: none; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--brand-500); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast);
}
.play-btn:hover { background: var(--brand-600); }
.play-btn:active { transform: scale(0.94); }
/* 보조 재생 컨트롤. 주 행동(btn--primary)과 오렌지로 경쟁하지 않게 한 단계 낮춘다(DS §2.1).
   ⚠️ 38px 이었다 — DS §10 터치 타깃 최소 44px 에 미달했다. */
.play-btn--sm {
  width: 44px; height: 44px;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.play-btn--sm:hover { background: var(--surface-soft); }
.play-btn[aria-pressed="true"] { background: var(--ink); }
/* 🔴 --sm 은 평상시 글자색이 ink 라, 재생 중 배경이 ink 가 되면 아이콘이 사라진다. 같이 뒤집는다. */
.play-btn--sm[aria-pressed="true"] { color: #fff; box-shadow: none; }

.player__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.player__time { font-size: 12px; font-weight: 600; color: var(--muted); }

/* 파형. 이 제품에서 가장 중요한 UI 자산이라 모든 주요 화면에 같은 형태로 나온다(스펙 §14). */
.wave { display: flex; align-items: center; gap: 2.5px; height: 30px; }
.wave i {
  display: block; flex: 1; min-width: 2px; max-width: 4px;
  height: var(--h, 40%); border-radius: var(--radius-pill);
  background: #c9cad0;
  transition: background-color 90ms linear, transform 90ms linear;
}
.wave--brand i { background: var(--brand-500); opacity: .35; }
/* 재생 위치까지의 막대만 진하게 — 진행 상태가 곧 파형이다 */
.wave i.is-played { background: var(--brand-500); opacity: 1; }
.wave--live i { background: var(--brand-500); transform-origin: center; }

.player.is-playing .wave i { animation: wave-idle 1.1s var(--ease-out) infinite; }
@keyframes wave-idle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.35); } }

/* ── 입력 ─────────────────────────────────────────────────── */

.field {
  width: 100%; min-height: 108px; resize: none;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-size: 17px; line-height: 1.55; background: var(--surface);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.field::placeholder { color: #b4b5bc; }
.field:focus { outline: none; border-color: var(--brand-500); }

/* ── 정답 공개 (STEP 2) ───────────────────────────────────── */

.reveal-row { display: flex; flex-direction: column; gap: var(--space-2); }
.reveal-row__label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.reveal-box {
  background: var(--surface-soft); border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.reveal-box--answer { background: var(--brand-050); }

/* 놓친 단어. 사용자가 "틀렸다"가 아니라 "이 소리를 놓쳤다"로 읽어야 한다. */
.w-miss {
  background: var(--brand-500); color: #fff;
  border-radius: 6px; padding: 1px 6px; margin: 0 1px;
  font-weight: 700;
}
.w-extra { color: var(--muted); text-decoration: line-through; text-decoration-color: #c9cad0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  border-radius: var(--radius-sm); padding: 5px 12px;
  font-size: 15px; font-weight: 700;
  background: var(--brand-100); color: var(--brand-700);
}

/* ── 녹음 (STEP 3) ────────────────────────────────────────── */

.recorder { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

.mic-btn {
  position: relative; width: 88px; height: 88px; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-float);
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-base);
}
.mic-btn:active { transform: scale(0.96); }
.mic-btn:disabled { background: #d7d8dc; box-shadow: none; cursor: not-allowed; }

/* 녹음 중 맥놀이. 하나의 링만 쓴다 — 여러 겹이면 시끄럽다(스펙 §15). */
.mic-btn::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--brand-500); opacity: 0;
}
/* DS §7.4 — Listening 상태가 Orange 채움이다. 빨강(danger)이 아니다.
   ⚠️ 링은 하나만 유지한다 — DS 는 2개라고 하지만 diagnosis 스펙 §15 가 "여러 겹이면 시끄럽다"로
      1개를 명시했다. 프로젝트 스펙이 더 구체적이라 그쪽을 따른다. */
.mic-btn.is-recording { background: var(--brand-500); color: #fff; box-shadow: var(--shadow-float); }
.mic-btn.is-recording::before { animation: mic-pulse 1.5s var(--ease-out) infinite; }
@keyframes mic-pulse {
  0%   { transform: scale(0.94); opacity: .55; }
  100% { transform: scale(1.25); opacity: 0; }
}

.rec-timer { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.rec-hint { font-size: 14px; color: var(--muted); }

/* ── 비교 (STEP 4) ────────────────────────────────────────── */

.compare { display: flex; flex-direction: column; gap: var(--space-3); }
.compare__card { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-4); }
.compare__card.is-active { border-color: var(--brand-500); background: var(--brand-050); }
.compare__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: var(--space-3);
}
.compare__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.compare__card--native .compare__dot { background: var(--brand-500); }
.compare__card--mine .compare__dot { background: var(--info); }

.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choice {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  font-size: 15px; font-weight: 600;
  transition: border-color var(--motion-fast), background-color var(--motion-fast);
}
.choice:hover { border-color: #ffcaa4; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  flex: none; width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid #c9cad0; display: grid; place-items: center;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.choice__box svg { opacity: 0; color: #fff; transition: opacity var(--motion-fast); }
.choice:has(input:checked) { border-color: var(--brand-500); background: var(--brand-050); }
.choice:has(input:checked) .choice__box { background: var(--brand-500); border-color: var(--brand-500); }
.choice:has(input:checked) .choice__box svg { opacity: 1; }

/* ── AI 차이 (STEP 5) ─────────────────────────────────────── */

.finding { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-4); }
.finding__tag {
  display: inline-block; border-radius: var(--radius-pill); padding: 3px 10px;
  font-size: 11.5px; font-weight: 700;
  background: var(--brand-100); color: var(--brand-700);
}
.finding__title { margin-top: var(--space-3); font-size: 16px; font-weight: 700; line-height: 1.45; }
.finding__rows { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.finding__row { display: flex; gap: var(--space-3); font-size: 14px; line-height: 1.5; }
.finding__who { flex: none; width: 56px; font-weight: 700; color: var(--muted); font-size: 13px; }
.finding__what { flex: 1; color: var(--ink-soft); }
.finding__row--native .finding__what { color: var(--brand-700); font-weight: 600; }

/* ── 소리블록 (STEP 6·7) ──────────────────────────────────── */

.blocks { display: flex; flex-direction: column; gap: var(--space-3); }

.block {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  border: 0; border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  color: #fff; cursor: pointer; text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-base) var(--ease-snap),
              box-shadow var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}
.block[data-accent="a"] { background: var(--block-a); }
.block[data-accent="b"] { background: var(--block-b); }
.block[data-accent="c"] { background: var(--block-c); }
.block:active { transform: scale(0.985); }

.block__wave { display: flex; align-items: center; gap: 2px; height: 20px; width: 26px; flex: none; }
.block__wave i { display: block; flex: 1; height: var(--h, 50%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 75%); }
.block.is-playing .block__wave i { animation: wave-idle .9s var(--ease-out) infinite; }
.block__text { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; word-break: normal; }
.block__state { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.block__state svg { position: absolute; opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.block__state { position: relative; }
.block__state [data-state-play] { opacity: .85; }
.block.is-done .block__state [data-state-play] { opacity: 0; }
.block.is-done .block__state [data-state-check] { opacity: 1; }
.block.is-done { opacity: .82; }

/* 영어를 아직 감추는 상태(STEP 7 초반) */
.block.is-masked .block__text {
  filter: blur(7px);
  user-select: none;
  transition: filter var(--motion-slow) var(--ease-out);
}

/* 블록 교체 — 위로 굴러 나가고 새 블록이 아래에서 올라온다(스펙 §15 block rolling) */
.block.is-rolling-out { animation: roll-out 320ms var(--ease-out) forwards; }
.block.is-rolling-in  { animation: roll-in 380ms var(--ease-snap) both; }
@keyframes roll-out {
  to { transform: translateY(-14px) rotateX(38deg); opacity: 0; }
}
@keyframes roll-in {
  from { transform: translateY(18px) rotateX(-32deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 착 -> 착 -> 탁. 세 블록이 차례로 붙고 마지막에 한 번 더 조여진다(스펙 §10·§15). */
.blocks.is-snapping { gap: 3px; transition: gap 280ms var(--ease-snap); }
.blocks.is-snapping .block { box-shadow: none; border-radius: var(--radius-md); }
.blocks.is-snapping .block:nth-child(1) { animation: snap 260ms var(--ease-snap) 0ms both; }
.blocks.is-snapping .block:nth-child(2) { animation: snap 260ms var(--ease-snap) 130ms both; }
.blocks.is-snapping .block:nth-child(3) { animation: snap 300ms var(--ease-snap) 280ms both; }
@keyframes snap {
  0%   { transform: translateY(0) scale(1); }
  55%  { transform: translateY(2px) scale(0.975); }
  100% { transform: none; }
}

.merged {
  background: var(--brand-050); border-radius: var(--radius-xl);
  padding: var(--space-5); text-align: center;
  animation: rise-in var(--motion-slow) var(--ease-out) both;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 성공 — confetti 없이. 성인 대상이라 과하면 싸구려로 읽힌다(스펙 §11). */
.success-mark {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--success-bg); color: var(--success);
  animation: success-pop 560ms var(--ease-snap) both;
}
@keyframes success-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.ko-prompt {
  background: var(--surface-soft); border-radius: var(--radius-xl);
  padding: var(--space-5); text-align: center;
  font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em;
}
.ko-prompt::before, .ko-prompt::after { color: var(--muted); font-weight: 500; }
.ko-prompt::before { content: "\201C"; }
.ko-prompt::after  { content: "\201D"; }

/* ── 결과 ─────────────────────────────────────────────────── */

.type-card {
  background: var(--brand-050); border-radius: var(--radius-2xl);
  padding: var(--space-5); border: 1px solid #ffdcc2;
}
.type-card__eyebrow { font-size: 12.5px; font-weight: 700; color: var(--brand-600); }
.type-card__label {
  margin-top: var(--space-2);
  font-size: 22px; font-weight: 800; line-height: 1.34; letter-spacing: -0.03em;
  color: var(--brand-700);
}
.type-card__desc { margin-top: var(--space-3); font-size: 15px; line-height: 1.62; color: var(--ink-soft); }

.axes { display: flex; flex-direction: column; gap: var(--space-4); }
.axis__top { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 7px; }
.axis__label { font-size: 14.5px; font-weight: 700; }
.axis__score { margin-left: auto; font-size: 16px; font-weight: 800; }
.axis__score small { font-size: 11px; font-weight: 700; color: var(--muted); }
.axis__na { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.axis__track { height: 8px; background: var(--surface-soft); border-radius: var(--radius-pill); overflow: hidden; }
.axis__fill {
  height: 100%; border-radius: var(--radius-pill); background: var(--brand-500);
  width: 0; transition: width 720ms var(--ease-out);
}
/* 본인 체감 축(리스닝 '블록으로 들은 뒤') — 점수가 아니므로 막대가 없다. 답에 따라 글자색만 바꾼다. */
.axis--text { padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); }
.axis__text { margin-left: auto; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.axis--much .axis__text { color: var(--brand-600); }
.axis--none .axis__text { color: var(--ink-soft); }
.axis--na .axis__track { background: repeating-linear-gradient(90deg, #eceef1 0 6px, transparent 6px 12px); }

.findings-list { display: flex; flex-direction: column; gap: var(--space-3); }
.discovery {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-bottom: 1px solid var(--line); padding-bottom: var(--space-3);
}
.discovery:last-child { border-bottom: 0; padding-bottom: 0; }
.discovery__check { flex: none; color: var(--success); margin-top: 2px; }
.discovery__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.discovery__value { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.45; margin-top: 2px; word-break: normal; }

/* ── 최종 CTA ─────────────────────────────────────────────── */

.cta-page { background: linear-gradient(180deg, var(--surface) 0%, var(--brand-050) 100%); }
.cta-hero {
  font-size: 28px; font-weight: 800; line-height: 1.32; letter-spacing: -0.035em; text-align: center;
}
/* "툭 치면 탁!" — 손글씨 느낌을 폰트 없이 기울기와 밑줄로만 낸다 */
.cta-stamp {
  display: inline-block; position: relative;
  font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--brand-600); transform: rotate(-3.5deg);
}
.cta-stamp::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 9px;
  background: var(--brand-100); border-radius: var(--radius-pill); z-index: -1;
}

.sub-actions { display: flex; gap: var(--space-2); }

/* 리스닝 STEP 6 — 붙은 문장 카드 안에서 전체 문장 다시 듣기 + 체감 묻기 (2026-09-23 2차)
   🔑 여백: 덩어리 사이 32 · 덩어리 안 12~16. 1차에서 질문이 재생기에 8px 로 붙어 한 덩어리로 뭉개졌다. */
.merged--replay { padding: var(--space-6) var(--space-5) var(--space-5); }
.merged__note { margin-top: var(--space-2); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.merged__listen {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px dashed #ffcfa9;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.merged__cue { font-size: 14px; font-weight: 700; color: var(--brand-700); }
.replay-player { background: var(--surface); padding: var(--space-4); text-align: left; box-shadow: var(--shadow-soft); }
.replay-player .play-btn { width: 56px; height: 56px; position: relative; }
/* 첫 재생 전까지만 숨 쉬는 링 — 글 없이 "여기를 누르세요". 한 겹만(스펙 §15). */
.replay-player.is-inviting .play-btn::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--brand-500); opacity: 0;
  animation: mic-pulse 1.6s var(--ease-out) infinite;
}

.replay-ask {
  margin-top: var(--space-2);   /* stack-6(24) + 8 = 32 */
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: rise-in var(--motion-slow) var(--ease-out) both;
}
.replay-ask__head { display: flex; flex-direction: column; gap: var(--space-1); }
.replay-ask__options { display: flex; flex-direction: column; gap: var(--space-2); }
.replay-opt {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 60px; padding: 0 var(--space-4);
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast) var(--ease-out);
}
.replay-opt:hover { border-color: #ffcaa4; }
.replay-opt:active { transform: scale(0.985); }
.replay-opt[aria-checked="true"] { border-color: var(--brand-500); background: var(--brand-050); color: var(--brand-700); }

/* 선명도 막대 — 칸 수가 곧 보기의 뜻(3 훨씬 · 2 조금 · 1 아직). 이모지 대신 소리 막대로. */
.clarity-bars { flex: none; display: flex; align-items: flex-end; gap: 3px; width: 22px; height: 20px; }
.clarity-bars i { flex: 1; border-radius: 2px; background: #e1e2e6; }
.clarity-bars i:nth-child(1) { height: 40%; }
.clarity-bars i:nth-child(2) { height: 70%; }
.clarity-bars i:nth-child(3) { height: 100%; }
.clarity-bars[data-level="1"] i:nth-child(1),
.clarity-bars[data-level="2"] i:nth-child(-n+2),
.clarity-bars[data-level="3"] i { background: var(--ink-soft); }
.replay-opt[aria-checked="true"] .clarity-bars[data-level="1"] i:nth-child(1),
.replay-opt[aria-checked="true"] .clarity-bars[data-level="2"] i:nth-child(-n+2),
.replay-opt[aria-checked="true"] .clarity-bars[data-level="3"] i { background: var(--brand-500); }

/* 답한 직후 한 줄 반응. */
.replay-ask__feedback {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--brand-050); color: var(--brand-700);
  font-size: 14.5px; font-weight: 700; line-height: 1.55;
  animation: rise-in var(--motion-base) var(--ease-out) both;
}
.replay-ask__feedback[data-tone="none"] { background: var(--surface-soft); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .replay-player.is-inviting .play-btn::after { animation: none; }
}
.sub-actions .btn { flex: 1; }

/* ── 오류 ─────────────────────────────────────────────────── */

.error-box {
  background: var(--danger-bg); border-radius: var(--radius-lg);
  padding: var(--space-4); font-size: 14.5px; line-height: 1.55; color: #8f2730;
}

/* ── 로딩 ─────────────────────────────────────────────────── */

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 35%); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spinner--ink { border-color: var(--line); border-top-color: var(--brand-500); }
@keyframes spin { to { transform: rotate(360deg); } }

.analyzing { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-10) 0; }

/* ── 모션 줄이기 ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 큰 화면 ──────────────────────────────────────────────── */

@media (min-width: 600px) {
  body { background: var(--surface-soft); }
  .page {
    max-width: 520px; margin: 0 auto; min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--line);
  }
  .t-en { font-size: 23px; }
}