/*
"제본된 리포트" 디자인 시스템입니다.
리포트(#/report)와 홈(#/) 이 같은 .verdict 컴포넌트를 공유합니다.
프로토타입(prototype-report.html)에서 확정한 규칙을 실제 화면에 옮긴 것입니다.

  ① 면 3단계, 다크 면은 화면당 하나 — 이 화면에서는 판정 헤드가 그 하나다
  ② 타이포는 TDS 스케일 안에서만 — Display 30 / Title 22 / Body 15 / Meta 12
     (TDS Typography1~7 은 11~30 정수 스케일이다. 반픽셀·30 초과는 쓰지 않는다)
  ③ 장식 대신 데이터가 배경 — 실제 발화 파형과 슬라이드 전환 시각
  ④ 여백 리듬 2종 — 구역 32px, 요소 24px
  ⑤ font-weight 는 TDS 4단만 — Regular 400 / Medium 500 / Semibold 600 / Bold 700

app.css 가 이미 1,500줄을 넘어 여기서 따로 관리합니다.
색은 app.css 의 :root 토큰을 그대로 씁니다.
*/

:root {
  /* ② 타이포 — TDS 스케일 안에서만 고른다.
     Typography1 30/40 · Typography3 22/31 · subTypography12 12/18.
     56px 은 TDS 최대(30)를 두 배 가까이 넘겨서 이 화면만 다른 앱처럼 보였다. */
  --t-display: 30px;
  --t-title: 22px;
  --t-meta: 12px;

  /* ④ 여백 리듬 — 토스는 구역을 96px 공백이 아니라 16px 회색 띠로 가른다.
     96px 은 아이패드 세로 예산(764px)을 혼자 12% 먹었다. */
  --gap-section: 32px;
  --gap-item: 24px;

  /* --r-print 는 여기서 재선언하지 않는다. app.css 의 :root 가 단일 원본이고,
     여기 두면 캐스케이드에서 덮어써서 카드가 도로 각져 버린다
     (docs/design_improvement/02_tokens.md §2) */
}

/* 메타 라벨. 토스는 대문자 변환도, 넓은 자간도 쓰지 않는다 —
   그건 잡지 편집 문법이지 앱 문법이 아니다. 크기와 색으로만 낮춘다. */
.eyebrow {
  font-size: 13px; font-weight: 600; color: var(--text-3);
}

/* ══ ① 다크 판정 헤드 — 이 화면의 유일한 다크 면 ══════════════
   main.wide 안에 있지만 전면폭으로 빠져나온다. */
.verdict {
  position: relative; overflow: hidden; color: #fff;
  margin-inline: calc(50% - calc(var(--vw) * 0.5) + var(--nav-w) / 2);
  padding: 32px max(24px, calc(calc(var(--vw) * 0.5) - 540px)) 0;
  /* 토스는 면을 그라디언트로 칠하지 않는다. 3단 그라디언트는 이 화면만
     다른 앱처럼 보이게 했다 — 브랜드 초록 단색 한 장으로 간다. */
  background: var(--navy);
}

/* 판정 헤드가 화면 첫 요소일 때만 main 의 상단 padding 을 상쇄한다.
   홈처럼 제목 뒤에 오는 경우까지 당기면 앞 요소를 덮는다. */
main > .verdict:first-child { margin-top: -24px; }


.verdict-inner { position: relative; z-index: 2; }
.verdict-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  color: #9FC9B6; font-size: var(--t-meta); font-weight: 600;
}
.verdict-meta i { width: 3px; height: 3px; border-radius: 50%; background: #52796C; flex-shrink: 0; }
.verdict-title { margin: 8px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* 비대칭 그리드 — 점수는 왼쪽 축, 판단은 오른쪽 본문 */
.verdict-grid {
  display: grid; grid-template-columns: clamp(150px, calc(var(--vw) * 0.18), 220px) 1fr;
  gap: clamp(24px, calc(var(--vw) * 0.04), 48px); align-items: start;
  margin-top: 20px; padding-bottom: 28px;
}
/* 라벨 → 숫자. 대문자 변환과 넓은 자간은 걷어냈다 (.eyebrow 와 같은 이유) */
.verdict-score .vs-label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: #7FB3A2;
}
.verdict-score .vs-body { padding-top: 6px; }
.verdict-score strong {
  /* TDS Typography1 = 30/40. line-height .96 은 글자가 서로 붙어 보였다 */
  display: block; font-size: var(--t-display); font-weight: 700;
  line-height: 1.33;
}
/* 등급(B+)은 100점 숫자보다 훨씬 커야 한다 — 헤드에서 가장 먼저, 가장 크게
   읽히는 게 결론이어야 한다. 글자 둘뿐이라 이 폭(clamp 150~220px)에도 넉넉하다. */
.verdict-score strong.grade { font-size: clamp(56px, 9vw, 90px); line-height: 1.1; }
.verdict-score .of { color: #7FB3A2; font-size: 15px; font-weight: 600; margin-left: 4px; letter-spacing: -.02em; }

/* 숫자 옆에 앉는 발표새. 숫자를 대체하지 않고 옆에 선다 — 박수는 숫자의 앞에
   오지, 숫자를 대체하지 않는다 (UI_REDESIGN §14) */
.vs-num { display: flex; align-items: flex-end; gap: 10px; }
.verdict-bird { flex: none; display: block; width: 52px; }
.verdict-bird .ch-chick { width: 52px; display: block; cursor: default; }
.verdict-score .delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: var(--t-meta); font-weight: 700; color: #0B2A22;
  background: var(--mint); border-radius: 999px; padding: 5px 11px;
}
.verdict-score .prev { display: block; margin-top: 10px; color: #7FB3A2; font-size: 12px; font-weight: 500; }

.verdict-judgement h2 {
  /* 등급(B+)이 헤드의 주인공이 된 뒤로, 이 한 줄은 결론이 아니라 단서다 —
     TDS Typography3(22px) 대신 한 단계 낮춘다 (2026-08-12 지적) */
  margin: 0; font-size: 18px; font-weight: 600;
  line-height: 1.4; max-width: 34ch;
}
/* 단서는 작게, 한 줄에 하나씩. 헤드에 이어 붙이면 큰 글씨 벽이 된다 */
.verdict-subnotes {
  margin: 10px 0 0; padding: 0; list-style: none;
  color: #9FC9B6; font-size: 13px; font-weight: 500; line-height: 1.6;
}
.verdict-subnotes li { position: relative; padding-left: 11px; }
.verdict-subnotes li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 3px; height: 3px; border-radius: 50%; background: #52796C;
}

/* ── 먼저 짚을 것 (09-30 WP-S2) — 채점표가 점수와 따로 알리는 사실 (app.js reportFaultsHtml).
   헤드 한 줄 바로 밑, 기둥 위다: 등급이 왜 그 자리에 멈췄는지를 등급 다음에 바로 읽게. 판정 색(--ct 등)은 밝은 면 위 색이라
   다크 헤드에서는 쓰지 않는다 — 머리 칩은 헤드의 「아직 못 채운 것」 계열(앰버, .vb-count 와 같은 값), 인용은 헤드의 보조 글자색.
   면은 주인공 카드(.vd-weak)와 같은 반투명 한 장이라 새 색을 들이지 않는다. */
.verdict-faults {
  margin-top: 16px; padding: 14px 16px 16px;
  border-radius: var(--r-inner, 8px);
  background: rgba(255, 255, 255, .08);
}
.verdict-faults .vf-head {
  display: inline-block; margin: 0 0 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(232, 201, 131, .16); color: #E8C983;
  font-size: 11px; font-weight: var(--w-bold); white-space: nowrap;
}
.verdict-faults .vf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.verdict-faults .vf-item + .vf-item { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.verdict-faults .vf-title {
  display: block; color: #fff; font-size: 14px; font-weight: var(--w-med); line-height: 1.5; word-break: keep-all;
}
.verdict-faults .vf-quote {
  margin: 8px 0 0;
  color: #CBEBDC; font-size: 13px; font-weight: var(--w-body); line-height: 1.55; overflow-wrap: anywhere;
}
/* 「발표」「자료 6장」 — 두 인용을 견주는 머리. 인용 위에 한 줄로 얹는다: 리포트 기둥(268px)에서 옆 칸으로 두면
   인용이 150px 폭에 여섯 줄로 쌓였다 (09-30 실측 사진) */
.verdict-faults .vf-quote span {
  display: block; margin-bottom: 2px;
  color: #7FB3A2; font-size: 12px; font-weight: var(--w-med);
}
.verdict-faults .vf-sub { margin: 6px 0 0; color: #9FC9B6; font-size: 12px; line-height: 1.5; word-break: keep-all; }
.verdict-faults .vf-cap { margin: 12px 0 0; color: #E8C983; font-size: 12px; font-weight: var(--w-med); }

/* 7개를 똑같이 늘어놓던 자리다. 「이름 + 큰 숫자 + 막대 + 설명 한 줄」이 일곱 벌
   서면서 기둥의 절반을 설명이 먹었고, 정작 결론(점수·한 줄 판정)이 스크롤 위로
   밀려났다 (2026-08-08 지적). 주인공 하나(제일 낮은 축)만 카드로 세우고 나머지
   여섯은 조용한 두 칸 목록으로 내린다 — 지우는 게 아니라 크기를 뺀다.
   세로 한 줄짜리 흐름이라 flex-wrap 이 아니라 column 이다 (app.js dimsHtml). */
.verdict-dims {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16);
}
/* keep-all 이 '목적·청중 적합성' 을 글자 중간에서 끊지 않게 막는다 */
.verdict-dims .lb { display: block; color: #9FC9B6; font-size: 12px; font-weight: 600; word-break: keep-all; }
.verdict-dims .bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); }

/* 지표가 뭘 보는 건지 한 줄. 이제 주인공 카드에만 붙는다 —
   나머지 여섯은 같은 문장을 title 로 갖고 있다 (app.js dimsHtml) */
.verdict-dims .hint {
  display: block; margin-top: 10px;
  color: #BEE3D2; font-size: 13px; line-height: 1.5; word-break: keep-all;
}

/* ── 주인공: 오늘 고칠 것 하나 ────────────────────────────────────────
   마크업에서 이미 첫 번째라 order 가 필요 없다 (예전엔 order:-1 로 끌어올렸다).
   tablet.css 가 뒤에 실리므로 거기서도 flex 값을 같이 걷어냈다. */
.verdict-dims .vd.vd-weak {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: var(--r-inner, 16px);
  background: rgba(255, 255, 255, .08);
}
.verdict-dims .vd-weak .lb { color: #CBEBDC; font-size: 13px; }
.verdict-dims .vd-weak .vl { display: block; margin: 4px 0 10px; font-size: 30px; font-weight: 700; }
.verdict-dims .vd-weak .bar { height: 5px; border-radius: 3px; }
/* 녹음이 이 자료의 발표가 아닐 때 주인공 칸은 점수가 아니라 할 일 한 줄이다 (app.js reuploadDimsHtml · 09-30 REC-10) */
.verdict-dims .vd-reupload .lb {
  display: block; color: #fff;
  font-size: 16px; font-weight: var(--w-bold); line-height: 1.45; word-break: keep-all;
}
.verdict-dims .vd-tag {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ── 나머지 여섯: 「이름 · 값 · 다음」 한 줄씩 ──────────────────────
   나머지 여섯은 「이름 · 값 · 다음」 한 줄씩이다 (토스의 줄 문법).
   두 칸 격자에 막대까지 달던 배치를 걷었다: 막대 여섯 개가 나란히 차 있으면
   어느 것도 눈에 안 들어오고, 옆의 숫자가 이미 같은 말을 더 정확하게 한다.
   줄 사이는 여백이 아니라 머리카락 선으로 나눈다 — 여백으로 띄우면 여섯 개가
   각각 떠 있는 카드처럼 보이고, 선으로 묶으면 한 벌의 목록으로 읽힌다. */
.vd-rest { display: flex; flex-direction: column; }
.vd-rest .vd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  width: 100%; margin: 0; padding: 14px 2px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .1);
  background: none; color: inherit; font: inherit; text-align: left;
  border-radius: 8px;
}
.vd-rest .vd:first-child { border-top: 0; }
.vd-rest button.vd { cursor: pointer; transition: background .12s ease; }
.vd-rest button.vd:hover { background: rgba(255, 255, 255, .07); }
.vd-rest button.vd:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* 다크 면 위 민트(#9FC9B6, ~4.6:1)는 톤이 배경과 가까워 체감 대비가 낮다 —
   흰색에 가깝게 올려 가독성을 확보한다 (2026-08-12 지적: "글자 잘 안 보여요") */
.vd-rest .vd .lb { font-size: 16px; color: #E9F7EF; }
.vd-rest .vd .vl {
  text-align: right; color: #fff;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
}
/* 「누르면 더 있다」는 신호. 값과 붙어 다녀야 한 줄로 읽힌다 */
.vd-rest .vd-go { color: #5E9683; font-size: 18px; line-height: 1; }
/* 점수 뒤 /100 — 값과 같은 줄이지만 주인공은 아니다. em 기준이라 기둥의
   큰 숫자(30px)와 나머지 목록(19px) 어디에 붙어도 알맞게 작아진다. */
.verdict-dims .vl .of { font-size: .55em; font-weight: 600; opacity: .6; margin-left: 3px; }

/* ── 채점 근거·못 잰 항목 ──────────────────────────────────────────────
   결론이 아니라 단서다. 예전엔 「채점표 v3 · 학교 프로젝트(교수 대상)」가 점수
   바로 아래에, 안내 두 줄이 한 줄 판정 바로 아래에 같은 무게로 있어서 점수를
   읽기 전에 먼저 읽혔다. 접어서 기둥 맨 아래로 내리되 **개수는 접힌 줄에 남긴다** —
   못 잰 걸 안 보이게 치우면 리포트가 거짓말이 된다 (CLAUDE.md §4). 오히려 목록
   안에 묻혀 있던 개수가 접힌 줄로 올라오면서 늘 보이게 됐다. */
/* 근거 줄이 뒤에 붙으면 격자 바닥 여백(28px)은 그 줄이 대신한다.
   안 걷으면 막대와 근거 사이가 44px 로 벌어져 남남처럼 보인다 */
.verdict-grid:has(+ .verdict-basis) { padding-bottom: 0; }
.verdict-basis {
  position: relative; z-index: 2;
  margin-top: 16px; padding-bottom: 24px;
  color: #7FB3A2; font-size: 12px; font-weight: 500;
}
.verdict-basis.is-flat { margin: 16px 0 0; padding-bottom: 24px; }
.verdict-basis summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
}
.verdict-basis summary::-webkit-details-marker { display: none; }
.verdict-basis summary::after {
  content: "＋"; margin-left: auto; color: #5E9683; font-size: 13px; font-weight: 400;
}
.verdict-basis[open] summary::after { content: "－"; }
.verdict-basis summary:hover { color: #9FC9B6; }
/* 개수는 접혀 있어도 읽힌다. 노랑은 샘플 경고(.verdict-note)와 같은 계열 —
   "여기 아직 못 채운 게 있다" 는 같은 종류의 말이라 같은 색을 쓴다 */
.verdict-basis .vb-count {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(232, 201, 131, .16); color: #E8C983;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.verdict-basis .verdict-subnotes { margin-top: 10px; }
/* 채운 끝에 점 하나. 막대가 7개라 별·잎을 달면 소음이 된다 — 점이 상한이다 */
.verdict-dims .bar i {
  position: relative; display: block; height: 100%;
  background: var(--cyan); border-radius: 2px;
  /* 0 에서 차오른다. 숫자는 이미 적혀 있고 이건 읽는 순서를 만드는 연출이라
     끝나기 전에 봐도 틀린 값을 보여주지 않는다 */
  transition: width .9s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .verdict-dims .bar i { transition: none; }
}
.verdict-dims .bar i::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: #fff;
}

/* 분석 결과가 없을 때 — 점수 없이 제목만, 높이를 줄인다 */
.verdict.is-plain { padding-bottom: 40px; }

/* 샘플 경고는 다크 면 안에서 */
.verdict-note {
  position: relative; z-index: 2;
  margin: 0; padding: 0 0 20px;
  color: #E8C983; font-size: 13px; font-weight: 500; line-height: 1.7;
}
.verdict-note b { color: #FFDF9E; font-weight: 700; }

/* ══ ② 밑줄 텍스트 탭 — pill 을 버려 장식을 줄이고 밀도를 올린다 ══
   #rtabs 로 좁혀서 다른 화면의 .tabs 에는 영향이 없다. */
/* app.css 의 .tabs 는 sticky 다. 배경만 지우면 아래 카드 글자가 그대로 비쳐
   겹치므로, 떠 있는 바로 만들고 연둣빛 반투명 면을 깐다. */
/* 토스 탭은 떠 있는 알약이 아니라 면에 붙은 밑줄 탭이다.
   glassmorphism(backdrop-filter)은 MVP_SPEC §3 이 금지하는데 여기만 남아 있었다. */
#rtabs.tabs {
  position: sticky; top: 64px; z-index: 12;   /* = .topbar 높이 */
  display: flex; gap: 28px; overflow-x: auto;
  padding: 0; border-radius: 0;
  margin: 0 0 24px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
#rtabs.tabs::-webkit-scrollbar { display: none; }
#rtabs.tabs button {
  position: relative; flex: 0 0 auto;
  padding: 16px 0; border-radius: 0; background: none; box-shadow: none;
  white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--text-2);
  transition: color .16s var(--ease);
}
#rtabs.tabs button:hover { color: var(--text); background: none; }
#rtabs.tabs button.on { color: var(--navy); font-weight: 700; background: none; box-shadow: none; }
#rtabs.tabs button.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--brand);
}

/* ══ 홈 판정 헤드 — 성장 추이가 화면의 앵커가 된다 ══════════════ */
.home-verdict {
  /* areaChartSvg 는 stroke·stop-color 를 인라인으로 var(--accent) 로 쓴다.
     커스텀 프로퍼티만 이 스코프에서 바꾸면 차트 전체가 어두운 면에 맞게 따라온다. */
  --accent: var(--cyan);
  margin-top: var(--gap-item);
  padding-top: 52px;
}
.home-verdict .verdict-grid { margin-top: 0; padding-bottom: 44px; align-items: center; }
.home-verdict .verdict-score .of { font-size: 17px; }
.home-verdict .verdict-score .prev { margin-top: 12px; font-size: 13px; }

.home-verdict .hg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.home-verdict .hg-head .eyebrow { color: #9FC9B6; }
.home-verdict .hg-head b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.home-verdict .growth-svg { width: 100%; height: auto; display: block; }
.home-verdict .growth-val { fill: #fff; font-size: 13px; font-weight: 700; }
.home-verdict .growth-dot-last { stroke: var(--navy-deep); }

.home-verdict .hg-foot { display: flex; gap: 36px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); }
.home-verdict .hg-foot strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.home-verdict .hg-foot small { display: block; margin-top: 2px; color: #9FC9B6; font-size: 12px; font-weight: 600; }

/* ══ 블록 제목 — 구역의 시작을 알리는 최소 단위 ══════════════ */
.block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--gap-item); }
.block-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.block-head p { margin: 0; color: var(--text-3); font-size: 13px; font-weight: 500; }
.block-head .btn { margin-left: auto; align-self: center; }

/* ══ 홈 발표 목록 — 카드 더미 대신 표 리듬 ══════════════════════
   app.css 의 .sess-row 는 남겨두고 .sess-list 안에서만 덮어쓴다. */
.home-list { margin-top: var(--gap-section); }
.sess-list { border-top: 2px solid var(--text); }
.sess-list .sess-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto 52px 16px;
  gap: 18px; align-items: center; text-align: left;
  padding: 20px 4px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: none; font: inherit; color: inherit; cursor: pointer;
  transition: background .16s var(--ease);
}
.sess-list .sess-row + .sess-row { border-top: 0; }
.sess-list .sess-row:hover { background: var(--paper); }
.sess-list .sess-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sess-list .sess-main { min-width: 0; }
.sess-list .sess-main b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.sess-list .sess-main small { display: block; margin-top: 5px; color: var(--text-3); font-size: 13px; font-weight: 500; }
.sess-list .sess-score { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sess-list .sess-score i { font-style: normal; margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.sess-list .sess-diff { text-align: right; font-size: 12px; font-weight: 700; color: var(--ok); }
.sess-list .chev { color: #C9D5CE; font-size: 18px; font-weight: 500; text-align: right; }

/* 홈의 보조 카드(플레이빌·게임)는 목록보다 위계를 낮춘다 */
main.home .card { border-radius: var(--r-print); box-shadow: var(--shadow); }
main.home .about-link { margin-top: var(--gap-section); }

/* 제본된 리포트 — 리포트 화면의 카드만 인쇄된 지면처럼 모서리를 줄인다.
   main.wide 는 renderReport()·renderProfileReport() 에서만 붙으므로
   다른 화면의 .card 는 기존 20px 를 유지한다. */
main.wide .card,
main.wide .trophy-strip { border-radius: var(--r-print); }

@media (max-width: 900px) {
  :root { --t-display: 46px; --t-title: 20px; --gap-section: 64px; }
  .verdict { padding-left: 20px; padding-right: 20px; }
  #rtabs.tabs { gap: 20px; padding: 0 14px; }
  .verdict-grid { grid-template-columns: 1fr; gap: 32px; }
  .verdict-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #rtabs.tabs button { transition: none; }
}

/* 좁은 화면 — 숫자는 줄이되 위계는 유지한다 */
@media (max-width: 640px) {
  :root { --t-display: 38px; --t-title: 18px; --gap-section: 48px; --gap-item: 16px; }
  .verdict { padding-top: 40px; }
  .verdict-dims { gap: 16px 20px; margin-top: 20px; padding-top: 16px; }
  .verdict-dims .vd { flex: 1 1 84px; }
  .verdict-dims .vl { font-size: 18px; }
  .verdict-title { font-size: 19px; }
  .home-verdict { padding-top: 32px; }
  .home-verdict .hg-foot { gap: 22px; }
  .sess-list .sess-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .sess-list .sess-diff, .sess-list .chev { display: none; }
  .block-head { flex-wrap: wrap; }
  .block-head .btn { margin-left: 0; }
}

/* ══ 넓은 콘텐츠는 자기 안에서 스크롤한다 ══════════════════════
   페이지 본문이 가로로 밀리면 모든 카드가 같은 지점에서 잘린다.
   폭이 큰 스트립·그리드만 개별 스크롤 컨테이너로 만든다. */
.deck-film,
.slide-film-text,
.slides-row,
.report-product-grid,
.pb-strip,
.tabs { overflow-x: auto; }

/* 그리드 자식이 min-content 로 트랙을 밀어내지 못하게 한다 */
.verdict-grid > *,
.verdict-judgement,
.verdict-score { min-width: 0; }
.verdict-judgement h2 { overflow-wrap: anywhere; }

/* 이미지·캔버스가 컨테이너를 넘지 않게 */
main img, main canvas, main svg { max-width: 100%; }

/* ══ 질문 코칭 내역 — 접었다 펴는 표 리듬 ══════════════════════ */
.qa-log { margin-bottom: var(--gap-section); }

/* 코칭의 결과 한 줄. 목록이 「무엇을 물었나」를 말한다면 이 줄은 「그래서 늘었나」를
   말한다 — 표 위에 결론을 먼저 놓는다. 면을 새로 깔지 않고 옅은 바탕에 눕힌다 */
.qa-log-gain {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px;
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-inner); background: var(--paper);
}
.qa-log-gain .qg-step { display: flex; align-items: baseline; gap: 7px; }
.qa-log-gain .qg-step i {
  font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-3);
}
.qa-log-gain .qg-step b {
  font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* 늘어난 쪽만 브랜드 색을 준다 — 어느 쪽이 결과인지 색 하나로 읽힌다 */
.qa-log-gain .qg-after b { color: var(--brand); }
.qa-log-gain .qg-arrow { font-style: normal; color: var(--text-3); }
.qa-log-gain .qg-note {
  flex: 1 1 100%; margin-top: 6px;
  font-size: 12px; line-height: 1.6; color: var(--text-3);
}
.qa-log-gain .qg-note b { font-weight: 700; color: var(--text-2); }

.qa-log-list { border-top: 2px solid var(--text); }
.qa-log-item { border-bottom: 1px solid var(--border); }
/* 판정 자리를 84px 로 넓힌다 — 맨 글씨이던 걸 chip 으로 되돌리면서 「설명 못함」이
   78px 에서 줄바꿈됐다. 마지막 칸은 꺾쇠 자리다 */
.qa-log-item > summary {
  display: grid; grid-template-columns: 84px 1fr auto auto 14px;
  gap: 14px; align-items: center; padding: 16px 4px;
  cursor: pointer; list-style: none;
  transition: background .16s var(--ease);
}
.qa-log-item > summary::-webkit-details-marker { display: none; }
.qa-log-item > summary:hover { background: var(--paper); }
.qa-log-item > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qa-log-item .ql-concept { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.qa-log-item .ql-slide { color: var(--text-3); font-size: 12px; font-weight: 600; }
.qa-log-item .ql-n { color: var(--text-3); font-size: 12px; font-weight: 700; }
.qa-log-item[open] > summary { background: var(--paper); }
/* 접혀 있다는 신호가 아예 없었다 — details 인데 화살표도 안내도 없어서 눌러 보기
   전에는 질문과 답이 그 밑에 있다는 걸 알 수 없었다. 꺾쇠 하나로 말한다 */
.qa-log-item > summary::after {
  content: ''; justify-self: end; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.qa-log-item[open] > summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
@media (prefers-reduced-motion: reduce) {
  .qa-log-item > summary::after { transition: none; }
}

.qa-log-body { padding: 4px 4px 20px; }
.ql-line { display: grid; grid-template-columns: 62px 1fr; gap: 12px; margin: 0 0 10px; font-size: 14px; line-height: 1.75; }
.ql-line b { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); padding-top: 4px; }
.ql-answer { color: var(--text-2); }
.ql-note {
  margin: 12px 0 0 74px; padding: 14px 16px;
  border-left: 2px solid var(--brand); background: var(--paper);
  font-size: 13px; line-height: 1.75; color: var(--text-2);
}
@media (max-width: 640px) {
  .qa-log-item > summary { grid-template-columns: 78px 1fr auto 14px; }
  .qa-log-item .ql-n { display: none; }
  .ql-line { grid-template-columns: 1fr; gap: 2px; }
  .ql-note { margin-left: 0; }
}

.ql-empty { font-style: normal; color: var(--text-3); }
.ql-meta { margin: 10px 0 0 74px; font-size: 12px; font-weight: 600; color: var(--text-3); }
@media (max-width: 640px) { .ql-meta { margin-left: 0; } }

/* ── F-20 발표 구성 제안 ────────────────────────────────────────────────
   1순위 하나만 카드로 펼치고, 나머지는 아래 목록 한 줄씩. 위계가 곧 메시지라
   대안 블록은 절대 카드가 되지 않는다. */

.strat-head {
  border-bottom: 2px solid var(--text);
  padding-bottom: 16px; margin-bottom: 18px;
}
.strat-badge {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.strat-type {
  margin: 12px 0 4px; font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.strat-climax { margin: 0; color: var(--text-3); font-size: 13px; font-weight: 500; }
.strat-why {
  margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--text-2);
}

/* 순서표 — 왼쪽 세로선 하나로 구간을 꿰어 '진행 순서'로 읽히게 한다 */
.strat-outline {
  list-style: none; margin: 10px 0 20px; padding: 0 0 0 22px;
  border-left: 2px solid var(--border);
}
.strat-block { position: relative; padding: 0 0 22px; }
.strat-block:last-child { padding-bottom: 2px; }
.strat-block::before {
  content: ''; position: absolute; left: -28px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--paper);
}
/* 신설 구간은 속 빈 점 — 자료에 아직 없는 자리라는 뜻 */
.strat-block.is-new::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand); }

.strat-block-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.strat-no { font-size: 11px; font-weight: 700; color: var(--text-3); }
.strat-role { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.strat-span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.strat-slides {
  margin-left: auto; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}
.strat-block.is-new .strat-slides { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.strat-what { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.strat-add {
  display: flex; gap: 8px; margin: 8px 0 0;
  font-size: 13px; line-height: 1.7; color: var(--text);
}
.strat-add span {
  flex: none; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; align-self: flex-start; margin-top: 3px;
}

.strat-tag {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-3);
}

/* 왜 바꿔야 하는가 — claim 은 진하게, evidence(실측 근거)는 그 아래 작은 줄.
   서버가 입력 값 대조로 걸러낸 근거만 오므로 여기 오는 문장은 전부 실측이다 */
.strat-gains { margin: 0 0 20px; }
.strat-gains ul { margin: 0; padding: 0; list-style: none; }
.strat-gains li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.strat-gains li:last-child { border-bottom: 0; }
.strat-gains b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.strat-gains small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--text-3); }

/* 구간별 「지금 → 제안」 실측 대비 — 제안이 내 발표에서 나왔음을 구간마다 증명 */
.strat-delta {
  display: inline-block; margin: 6px 0 0; padding: 2px 9px;
  border-radius: var(--r-pill); background: var(--fill);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.strat-keep {
  padding: 16px 18px; border-left: 2px solid var(--brand);
  background: var(--paper); border-radius: 0 var(--r-print) var(--r-print) 0;
}
.strat-keep { margin-bottom: 12px; }
/* 여기 태그는 "이 순서로 바꾸면"(중립 안내)과 달리 칭찬이다 — 회색 메타 글자에
   묻히면 안 된다. .strat-add span 의 배지 언어(초록 알약)를 그대로 가져온다 */
.strat-keep .strat-tag {
  display: inline-block; margin-bottom: 8px;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.strat-keep blockquote {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.75; color: var(--text);
}
.strat-keep small { display: block; margin-top: 8px; font-size: 12px; color: var(--text-3); }

/* 대안 — 카드가 아니라 목록. "이런 것도 있다" 이상으로 읽히면 안 된다. */
.strat-alts { margin: 20px 0 0; padding: 0 4px; }
.strat-alts-head {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-3);
}
.strat-alts ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.strat-alts li {
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1.7; color: var(--text-2);
}
.strat-alts li b { font-weight: 600; color: var(--text); }

.strat-disclaim { margin-top: 18px; font-size: 12px; line-height: 1.75; }
.strat-actions { margin-top: 14px; }
.strat-loading p { margin: 0; }

@media (max-width: 640px) {
  .strat-type { font-size: 21px; }
  .strat-outline { padding-left: 16px; }
  .strat-block::before { left: -22px; }
  .strat-slides { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   홈 — 토스 문법으로 다시 지은 것

   버린 것: 다크 그라디언트 히어로, 면적 차트 + 통계 타일 4개, 96px 공백으로
   가른 블록 7개. 그건 대시보드 문법이지 앱 문법이 아니다.

   가져온 것 (TDS):
     · ListRow 가 기본 단위다. 항목은 왼쪽 텍스트 + 오른쪽 값 + 꺾쇠.
     · 구역은 공백이 아니라 16px 회색 띠로 가른다 (Border variant="height16").
     · 카드는 radius 20 흰 면. 안쪽 여백 20px.
     · 큰 숫자는 하나만. 나머지는 전부 13~17px 본문이다.
     · 주 액션은 상단 바에 하나뿐 (화면 안에 CTA 를 또 두지 않는다).
   ══════════════════════════════════════════════════════════════════════════ */

.t-head { margin: 4px 0 16px; }
.t-head h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.024em; }

/* 구역 띠 — 전면폭으로 빠져나가 화면을 가른다 */
.t-band { height: 16px; margin: 20px calc(50% - calc(var(--vw) * 0.5) + var(--nav-w) / 2); background: var(--fill); }

.t-card {
  background: var(--surface); border-radius: var(--r-print);
  border: 1px solid var(--border); padding: 16px;
}
.t-label { font-size: 13px; font-weight: 600; color: var(--text-3); }
.t-caption { margin-top: 8px; font-size: 13px; color: var(--text-3); }

/* 이 화면에서 큰 숫자는 이것 하나다 */
.t-score { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.t-score strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.t-score .t-unit { font-size: 17px; font-weight: 600; color: var(--text-2); }
.t-score .t-delta {
  margin-left: auto; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-weak); color: var(--brand-strong);
  font-size: 13px; font-weight: 700;
}
.t-spark { margin-top: 14px; }
.t-spark svg { display: block; width: 100%; height: auto; }

/* ListRow — 목록의 기본은 「테두리 없는 리스트」다 (06_saas_shift §2).
   상자에 담고 싶으면 .t-card 를 같이 붙인다. 그때만 좌우 여백이 생긴다.
   지난 발표를 상자에 넣었더니 5줄짜리 목록이 707px 짜리 빈 상자가 됐다 —
   행을 나누는 건 상자가 아니라 행 사이의 선이다 */
.t-list { padding: 4px 0; }
.t-card.t-list { padding: 4px 16px; }
.t-row {
  display: flex; align-items: center; gap: 12px;
  /* 글자는 구역 제목과 같은 선에 두고, 손이 닿는 면만 좌우로 10px 넓힌다 */
  width: calc(100% + 20px); margin-inline: -10px;
  padding: 9px 10px; background: none; border: 0; border-radius: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background .12s ease;
}
.t-row + .t-row { border-top: 1px solid var(--border); }
.t-row:hover { background: var(--hover); }
.t-row:active { opacity: .6; }
.t-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
.t-row-main { flex: 1; min-width: 0; }
.t-row-main b { display: block; font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; }
.t-row-main small {
  display: block; margin-top: 2px; font-size: var(--t-meta); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-row-val { flex: none; font-size: var(--t-body); font-weight: 650; font-variant-numeric: tabular-nums; }
.t-row-val i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-3); margin-left: 1px; }
.t-chev { flex: none; color: var(--text-3); font-size: 15px; line-height: 1; }

/* 구역 제목 — 회색 띠 바로 아래 붙는다 */
/* 구역 제목은 「읽는 문장」이 아니라 「칸 이름」이다. 본문보다 작고 흐리게
   두면 목록이 앞으로 나온다 — 정보가 주인공이 되는 자리 */
.t-sec-head {
  margin: 0 0 10px; font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .02em; color: var(--text-3);
}

/* 이어하기 — 브랜드 색은 이 한 줄에만 쓴다 */
.t-resume {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-print);
  background: var(--brand-weak); border: 1px solid #BBF7DE;
}
.t-resume-main { flex: 1; min-width: 0; }
.t-resume-tag { display: block; font-size: 13px; font-weight: 700; color: var(--brand-strong); }
.t-resume-main b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; }
.t-resume .t-chev { color: var(--brand-strong); }

/* 연습 기록 — 통계 타일 대신 한 줄 */
.t-stats { display: flex; gap: 24px; }
.t-stat b { display: block; font-size: 20px; font-weight: 700; }
.t-stat small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.t-bar { margin-top: 14px; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.t-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }

/* ══ 앱 화면에 앉는 발표새 ══════════════════════════════════════════
   .ch-seat 은 객석 입장 연출용이라 opacity:0 · translateY(14px) 로 시작하고
   .seated 가 붙어야 나타난다. 앱 화면(점수 옆·빈 화면·로딩·포스터 벽)은 그
   연출을 타지 않으므로 그대로 쓰면 캐릭터가 아예 안 보인다.
   좌석 폭(clamp 124~178px)도 여기선 필요 없다. */
.verdict-bird, .empty-bird, .pipe-bird-row .ch-seat, .pb-bird {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
/* 좌석 폭(clamp 124~178px)은 앱 화면에서 필요 없다. 다만 폭을 auto 로 풀면
   margin:0 auto 가 안 먹어 가운데 정렬이 깨진다 — 각자 제 폭을 갖는다 */
.verdict-bird { width: 52px; }
.empty-bird { width: 72px; }
.pipe-bird-row .ch-seat { width: 44px; }

/* ══ 홈 첫 카드: 다음에 고칠 것 하나 ══════════════════════════════
   한 카드가 네 상태를 다 그린다 — 발표 0건(네 모델 소개) · 자료만 올림 ·
   분석 완료(진단) · 실패(사고 안내). 크기가 같아야 화면이 안 흔들린다.
   .is-empty 안에서는 .t-crew 격자가 그대로 살아야 하므로 아래 규칙 대부분을
   :not(.is-empty) 로 좁힌다 */
.t-next-card { position: relative; }
.t-next-card:not(.is-empty) { padding-right: 40px; }
.t-next-card:not(.is-empty)[data-go] { cursor: pointer; }
.t-next-card > .t-chev { position: absolute; top: 20px; right: 18px; }
.t-next-card[data-go]:hover { background: var(--hover); }
.t-next-card[data-go]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 라벨 줄에 얼굴 하나. 「누가 찾았어요」라고 말하지 않는다 — 얼굴은 리포트에서
   그 축 옆에 앉는 것과 같은 것으로만 맞춘다 (SCORE_CHICK) */
.t-next-card .t-label { display: flex; align-items: center; gap: 7px; }
.t-next-who.ch-seat {
  width: 28px; flex: none; opacity: 1; transform: none; filter: none; animation: none;
}
.t-next-head {
  display: block; margin-top: 10px;
  font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em;
  word-break: keep-all;
}
.t-next-act { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); word-break: keep-all; }
.t-next-hint { margin: 8px 0 0; font-size: 13px; color: var(--text-3); }
/* 실제로 한 말. 진단 옆에 근거가 있어야 판정이 주장이 아니라 관찰이 된다 */
.t-next-ev {
  margin: 10px 0 0; padding: 10px 12px;
  border-radius: var(--r-ctl); background: var(--fill);
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.t-next-card.is-failed { padding: 20px; }
.t-next-card.is-failed .accident { margin: 0; }
/* 빈 상태의 꼬리말 — 진단이 아니라 예고다 */
.t-next-card.is-empty .t-caption { margin-top: 14px; }

/* 샘플 프로필 리포트의 안내 줄. .verdict-note 는 다크 면 위 앰버색이라
   밝은 .history-head 위에서 안 읽힌다 — 밝은 면용으로 따로 둔다 */
.sample-note {
  margin: 10px 0 0; padding: 8px 12px; display: inline-block;
  border-radius: var(--r-ctl); background: var(--mid-bg);
  color: var(--mid); font-size: 13px; font-weight: 500;
}
.sample-note b { font-weight: 700; }

/* 구역 제목 옆 부제. .section-title .soft 는 리포트 전용이라 홈에선 안 먹는다 */
.t-sec-head .t-soft {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 500; color: var(--text-3);
}
/* 「샘플」 배지. 우측 칸 목록은 overflow-y:auto 라 스크롤하면 구역 제목이
   위로 사라진다 — 행 자체가 자기가 샘플이라고 말해야 한다 */
.t-tag {
  margin-left: 7px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--fill); color: var(--text-3);
  font-size: 11px; font-weight: 600; vertical-align: 2px;
}

/* ── 네 모델 좌석 (빈 상태 안) ───────────────────────────────────
   설명하는 카드지 연출이 아니다. 캐릭터는 읽는 걸 돕는 크기까지만 쓴다 */
.t-next-card .t-label { margin-bottom: 12px; }
.t-crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.t-crew-one { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.t-crew-one b { font-size: var(--t-meta); font-weight: 650; }
.t-crew-one small { font-size: 11px; line-height: 1.45; color: var(--text-3); overflow-wrap: break-word; }
.t-crew-role {
  padding: 1px 8px; border-radius: var(--r-pill); background: var(--fill);
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
/* 후원사는 텍스트로만 쓴다 — 로고 이미지를 넣지 않기로 했다 (04_screens.md 결정 1) */
.t-crew-by { margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: .01em; }
/* .ch-seat 은 객석 연출용이라 opacity:0 으로 시작해 .seated 를 기다린다.
   앱 화면에서 그대로 쓰면 새가 통째로 안 보인다 — 여기서 되돌린다
   (.verdict-bird · .empty-bird 와 같은 처리) */
.t-crew-bird.ch-seat {
  width: 34px; opacity: 1; transform: none; filter: none; animation: none;
}
@media (max-width: 720px) { .t-crew { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } }
/* 설명이 한 줄인 칸과 두 줄인 칸이 섞여 후원사 이름의 밑선이 어긋났다.
   칸을 같은 높이로 늘리고 후원사만 바닥에 붙인다 */
.t-crew-one { height: 100%; }
.t-crew-by { margin-top: auto; padding-top: 2px; }


/* ══ 홈 — 도구의 홈은 카드 모음이 아니라 「할 일 한 줄 + 표」다 ═════════
   카드를 늘어놓으면 어디부터 볼지 정해지지 않는다. 면을 최소로 쓰고
   구분은 얇은 선으로만 한다 (06_saas_shift §2) */

.h-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; }
.h-head h1 { margin: 0; font-size: var(--t-h1); font-weight: 700; letter-spacing: -.024em; }
.h-head .h-sub { font-size: var(--t-meta); color: var(--text-3); }
.h-lead {
  flex-basis: 100%; margin: 5px 0 0;
  color: var(--text-2); font-size: var(--t-body); line-height: 1.6;
}

/* 이어하기 — 브랜드 색을 쓰는 유일한 줄 */
.h-resume {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-print);
  background: var(--brand-weak); text-decoration: none; color: inherit;
}
.h-resume-tag { font-size: var(--t-meta); font-weight: 650; color: var(--brand-strong); }
.h-resume b { flex: 1; font-size: var(--t-body); font-weight: 600; }

/* 시작 띠 / 다음에 고칠 것 — 화면에 「지금 할 일」은 하나뿐이다 */
.h-start, .h-next {
  position: relative; display: block;
  padding: 18px 20px; margin-bottom: 28px;
  border: 1px solid var(--border); border-radius: var(--r-print);
  background: var(--surface); text-decoration: none; color: inherit;
}
.h-start b { display: block; font-size: var(--t-card); font-weight: 650; letter-spacing: -.01em; }
.h-start p { margin: 6px 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); }
.h-start-act { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.h-start-alt { font-size: var(--t-body); font-weight: 500; color: var(--text-2); text-decoration: none; }
.h-start-alt:hover { color: var(--text); }
.h-start.is-failed { padding: 16px; }
.h-start.is-failed .accident { margin: 0; }

.h-next { padding-right: 40px; cursor: pointer; }
.h-next:hover { background: var(--hover); }
.h-next:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.h-next > .t-chev { position: absolute; top: 18px; right: 16px; }
.h-next-label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-meta); font-weight: 600; color: var(--text-3);
}
.h-next-who.ch-seat { width: 24px; flex: none; opacity: 1; transform: none; filter: none; animation: none; }
.h-next-head {
  display: block; margin-top: 8px;
  font-size: var(--t-card); font-weight: 650; line-height: 1.5;
  letter-spacing: -.01em; word-break: keep-all;
}
.h-next-act { margin: 6px 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); word-break: keep-all; }
.h-next-hint { margin: 6px 0 0; font-size: var(--t-meta); color: var(--text-3); }
.h-next-ev {
  margin: 10px 0 0; padding: 9px 11px;
  border-radius: var(--r-inner); background: var(--fill);
  font-size: var(--t-meta); line-height: 1.6; color: var(--text-2);
}

/* 구역 — 제목은 칸 이름이라 작고 흐리게, 개수는 오른쪽 끝에 */
.h-sec { margin-bottom: 28px; }
.h-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.h-sec-head h2 {
  margin: 0; font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .02em; color: var(--text-3);
}
.h-sec-head span { font-size: var(--t-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.h-sec-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--text-3); }
.h-wall { margin-top: 10px; }
.h-wall .pb-wall { border: 0; padding: 0; background: none; }

/* 표 — 목록을 카드에 담지 않는다. 열이 있어야 훑어진다 */
.h-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.h-table th {
  padding: 10px 8px 8px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
}
.h-table th.num, .h-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.h-table td {
  padding: 10px 8px; border-bottom: 1px solid var(--border);
  font-size: var(--t-body); color: var(--text-2); vertical-align: middle;
}
.h-table tbody tr { cursor: pointer; transition: background .12s ease; }
.h-table tbody tr:hover td { background: var(--hover); }
.h-table tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.h-t-title { font-weight: 600; color: var(--text); }
.h-t-occ, .h-t-dim { white-space: nowrap; }
.h-t-score { font-weight: 650; color: var(--text); }
.h-t-go { width: 18px; color: var(--text-3); text-align: right; }
@media (max-width: 620px) {
  .h-table .h-t-occ, .h-table thead th:nth-child(2),
  .h-table .h-t-dim, .h-table thead th:nth-child(3) { display: none; }
}

/* 네 모델 — 4열 격자 카드가 홈의 절반을 먹어서 마스코트가 주인공이었다.
   한 줄로 눕히고 「판단하는 방식」으로 가는 길만 남긴다 */
.h-crew {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-print);
  text-decoration: none; color: inherit; background: var(--surface);
}
.h-crew:hover { background: var(--hover); }
.h-crew-birds { display: flex; flex: none; }
.h-crew-bird.ch-seat {
  width: 26px; margin-right: -7px; opacity: 1; transform: none; filter: none; animation: none;
}
.h-crew-txt { flex: 1; font-size: var(--t-meta); color: var(--text-2); }
.h-crew-txt b { font-weight: 650; color: var(--text); }
.h-crew-go { flex: none; font-size: var(--t-meta); font-weight: 600; color: var(--text-3); }