/* 사전 등록 페이지 시안의 겉모습 — 테스터 안내 웹(web/tester-guide/site/style.css)과 같은 결(앱 테마 sona-dark · design-language §6).
 * 아래 :root 의 색은 안내 웹이 앱 테마에서 옮겨 붙인 토큰을 그대로 베꼈다 — 값을 새로 짓지 않는다(check.py 가 안내 웹과 대조한다).
 * 기준판은 폰 세로(360 · 누름 48 · 가장자리 16) · PC 는 넓히는 쪽(두 칸). 한국어 판은 글꼴 파일을 싣지 않는다(기기의 글꼴) · 일본어 판만 같은 출처의 서브셋 하나(바깥 요청 0 — 맨 아래 절).
 * 원본은 src/ — site/ 는 build.py 가 굽는다(손대지 않는다). Worker 가 그리는 완료 · 지움 쪽(body.result)도 이 한 벌을 쓴다. */
:root {
  --bg: #0C0D12;
  --panel: #14161E;
  --panel-raised: #1B1E29;
  --row: #20242F;
  --line: #2A2E3B;
  --ink: #F3F4F8;
  --ink-rest: #D9DCE5;
  --ink-dim: #A9AEBE;
  --ink-faint: #6F7488;
  --ink-on-accent: #FFFFFF;
  --accent: #DE127F;
  --accent-hover: #D01177;
  --accent-strong: #EE4FA3;
  --ring: #EE4FA3;
  --warn: #FFB547;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 "Pretendard", "Pretendard Variable", system-ui, "Malgun Gothic", "Noto Sans KR", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: var(--accent-strong); }
.addr { overflow-wrap: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.icon { flex: none; width: 20px; height: 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 머리 */
header.top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.brand { color: var(--ink); font-size: 19px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: baseline; gap: 4px; min-height: 48px; align-self: center; padding-top: 12px; }
.brand small { color: var(--ink-faint); font-size: 13px; font-weight: 500; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 24px; border-radius: 24px; border: 0; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pill.on { background: var(--accent); color: var(--ink-on-accent); }
.pill.on:hover { background: var(--accent-hover); }
.pill.quiet { background: var(--panel-raised); color: var(--ink); }
.pill.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
header.top .pill.small { position: relative; }
header.top .pill.small::after { content: ""; position: absolute; inset: -4px 0; }   /* 누르는 자리 48 */
.top-right { display: flex; align-items: center; gap: 4px; }
.lang { display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px; color: var(--ink-dim); font-size: 14px; text-decoration: none; }
.lang:hover { color: var(--ink); }

/* 흐름 — 영상이 첫 화면을 채운다(확인표 95-9 나 · B). 폰은 영상 → 소개 → … → 사전 등록, PC 는 왼쪽 영상 · 오른쪽 소개와 할 수 있는 것 */
main.flow { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; padding-bottom: 32px;
  grid-template-areas: "watch" "intro" "for" "can" "soon" "keep" "share" "now" "join" "ask"; }
main.flow > section { margin-top: 32px; min-width: 0; }
#intro { grid-area: intro; } #watch { grid-area: watch; } #join { grid-area: join; } #can { grid-area: can; }
#soon { grid-area: soon; } #keep { grid-area: keep; } #share { grid-area: share; } #now { grid-area: now; } #ask { grid-area: ask; } #for { grid-area: for; }
#watch { margin-top: 8px; }
#intro { margin-top: 20px; }
.cta-row { display: flex; }

@media (min-width: 900px) {
  main.flow { grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "watch intro" "watch for" "watch can" "soon soon" "keep share" "now now" "join join" "ask ask"; }
  #intro { margin-top: 8px; align-self: end; }
  #can { align-self: start; }
  #join .card { max-width: 560px; }
}

/* 첫 화면 */
h1 { font-size: 28px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -0.01em; }
.lede { color: var(--ink-rest); font-size: 16px; margin: 0; }
.lede b { color: var(--ink); font-weight: 600; }
.cta-row { gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.price { margin-top: 16px; }
@media (min-width: 900px) { h1 { font-size: 36px; } .lede { font-size: 17px; } }

section > h2 { font-size: 18px; line-height: 1.4; font-weight: 700; margin: 0 0 12px; }
.sub { color: var(--ink-dim); font-size: 14px; margin: -4px 0 12px; }

/* 영상 */
figure.clip { margin: 0; }
.frame { position: relative; aspect-ratio: 608 / 944; background: var(--panel); border-radius: 12px; overflow: hidden; }
.frame { max-height: 72vh; margin: 0 auto; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
/* 영상이 아직 없을 때(src/media.json 의 video 가 null) — 빈 자리만 선다 · publish.py 는 이 판을 올리지 않는다 */
.frame.empty { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--ink-faint); font-size: 14px; border: 1px dashed var(--line); }
.lines { list-style: none; margin: 12px 0 0; padding: 0; }
.lines li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; color: var(--ink-rest); font-size: 14px; }
.lines li + li { border-top: 1px solid var(--line); }
.emo { flex: none; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--row); border-radius: 10px; padding: 0 8px; line-height: 22px; }
figcaption { margin-top: 10px; color: var(--ink-dim); font-size: 13px; }
figcaption p { margin: 0 0 4px; }
.credit { color: var(--ink-faint); }

/* 줄 목록(앱의 그룹 목록 — 판 12 · 줄 48 · 구분선 왼쪽 16 들여) */
.group { list-style: none; margin: 0; padding: 0; background: var(--panel); border-radius: 12px; overflow: hidden; }
.row { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 14px 16px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.row .icon { margin-top: 2px; color: var(--accent-strong); }
.row-text { display: block; min-width: 0; }
.row-title { display: block; font-weight: 600; }
.row-sub { display: block; color: var(--ink-dim); font-size: 14px; }
.plain { margin: 0; color: var(--ink-rest); }
.plain + .plain { margin-top: 8px; }

/* 사전 등록 */
.card { background: var(--panel); border-radius: 12px; padding: 16px; }
.field label.lab { display: block; font-weight: 600; margin-bottom: 6px; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; }
.inline input { flex: 1 1 200px; min-width: 0; }
input[type="email"] { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; min-height: 48px; padding: 0 14px; }
input[type="email"]::placeholder { color: var(--ink-faint); }
input[type="email"][aria-invalid="true"] { border-color: var(--warn); }
.err { color: var(--warn); font-size: 14px; margin: 6px 0 0; min-height: 0; }
.err:empty { display: none; }
.more { margin-top: 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; margin-bottom: 4px; }
.hint { color: var(--ink-dim); font-size: 13px; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--row); color: var(--ink-rest); font-size: 14px; }
.chips label::after { content: ""; position: absolute; inset: -4px 0; }
.chips input:checked + span { background: var(--accent); color: var(--ink-on-accent); font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.consents { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.consents > li { border-bottom: 1px solid var(--line); }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 0 4px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.check .must { color: var(--accent-strong); font-size: 13px; font-weight: 700; margin-left: 4px; }
.check .opt { color: var(--ink-dim); font-size: 13px; font-weight: 600; margin-left: 4px; }
.consents details { margin: 0 0 8px 34px; }
.consents summary { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; color: var(--ink-dim); font-size: 13px; cursor: pointer; list-style: none; }
.consents summary::-webkit-details-marker { display: none; }
.consents summary .icon { width: 16px; height: 16px; transition: transform 180ms ease-out; }
.consents details[open] summary .icon { transform: rotate(180deg); }
.legal-text { color: var(--ink-dim); font-size: 13px; margin: 0 0 8px; }
.legal-text p { margin: 0 0 6px; }
.send { margin-top: 16px; }
.send .pill { width: 100%; }
@media (min-width: 600px) { .send .pill { width: auto; } }
.fine { color: var(--ink-dim); font-size: 13px; margin: 12px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 완료 화면(14일 통지 네 칸) */
.done { outline: none; }
.done h3 { font-size: 18px; margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.done h3 .icon { color: var(--accent-strong); width: 22px; height: 22px; }
.done dl { margin: 0; }
.done dt { color: var(--ink-dim); font-size: 13px; }
.done dd { margin: 0 0 12px; color: var(--ink-rest); }
.done .keep-note { color: var(--ink-dim); font-size: 13px; margin: 12px 0 0; }

/* 물음 */
.faq { background: var(--panel); border-radius: 12px; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--ink-dim); transition: transform 180ms ease-out; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq p { margin: 0; padding: 0 16px 14px; color: var(--ink-dim); }

/* 바닥 */
footer.foot { margin-top: 24px; padding-bottom: 32px; }
.legal { display: flex; flex-wrap: wrap; column-gap: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
.legal a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-dim); text-decoration: none; font-size: 14px; }
.legal a.privacy { color: var(--accent-strong); font-weight: 700; }
.foot p { color: var(--ink-faint); font-size: 13px; margin: 4px 0 0; }

/* Worker 가 그리는 완료 · 지움 쪽 */
body.result main { padding-top: 16px; padding-bottom: 32px; }
body.result .card { max-width: 560px; }
button:disabled { opacity: 0.6; cursor: default; }

/* 일본어 판(/ja/ · lang=ja) — 글꼴은 같은 출처의 Noto Sans JP 서브셋 하나(사람 고름 2026-11-04 · tools/subset_font.py · 라이선스 site/fonts/OFL.txt).
 * 이 글꼴을 쓰는 것은 일본어 판뿐이라 한국어 판은 파일을 받지 않는다. 값은 조사 docs/research/japanese-fonts-2026-11.md §3.4(디지털청 지침 — 본문 16 · 14 아래 금지 · 줄 높이 1.5 넘게 · 자간 2 %).
 * keep-all 은 한국어 규칙이다 — 일본어에 걸면 줄을 못 바꾼다. 글자 사이에서 바꾸되 줄 머리 금칙은 strict · 되는 브라우저는 구 단위(auto-phrase — 줄 끝에 «す。» 만 남지 않게 · 모르면 앞 값 normal). */
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/NotoSansJP-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
html[lang="ja"] body { font: 16px/1.7 "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; letter-spacing: 0.02em; word-break: normal; word-break: auto-phrase; line-break: strict; }
html[lang="ja"] h1 { font-size: 26px; line-height: 1.4; letter-spacing: 0; }
html[lang="ja"] .lede { font-size: 16px; }
html[lang="ja"] .brand { padding-top: 0; align-items: center; }
html[lang="ja"] .brand small, html[lang="ja"] figcaption, html[lang="ja"] .foot p { font-size: 14px; }
html[lang="ja"] .foot p a { color: inherit; }
.nb { white-space: nowrap; }
html[lang="ja"] [lang="ko"] { font-family: "Pretendard", "Pretendard Variable", system-ui, "Malgun Gothic", "Noto Sans KR", sans-serif; letter-spacing: 0; }
@media (min-width: 900px) { html[lang="ja"] h1 { font-size: 32px; } html[lang="ja"] .lede { font-size: 17px; } }
.draft-band { background: var(--warn); color: var(--bg); font-size: 14px; font-weight: 600; line-height: 1.5; padding: 8px 16px; text-align: center; }
.draft-band p { margin: 0; }

/* 비공개 파트너 페이지(/partner/ · /partner/ja/ — partner.py 가 굽는다). 읽는 쪽이라 한 칸 · 글 폭 720 · 랜딩의 토큰 · 글꼴 그대로.
 * 더한 것은 다섯 — 물음 줄(h3) · 허락 글의 «변호사 확인 전 초안» 표지 · 허락 글 목록 · 빈칸 표시(【…】 — 남으면 올림 불가) · 머리 아래 약속 상자(.promise). 링크는 제 줄에 서서 누르는 자리 48. */
body.partner main.partner-main { max-width: 720px; padding-bottom: 32px; }
body.partner main > section { margin-top: 32px; }
body.partner #hello { margin-top: 20px; }
body.partner .plain a { display: flex; align-items: center; min-height: 48px; width: fit-content; max-width: 100%; }
.qa h3 { font-size: 16px; line-height: 1.5; margin: 24px 0 8px; }
.qa h3:first-child { margin-top: 0; }
.qa .plain + .plain { margin-top: 6px; }
.legal-band { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border: 1px solid var(--warn); border-radius: 10px; color: var(--warn); font-size: 14px; font-weight: 600; }
.permit-text { color: var(--ink-rest); font-size: 14px; }
.permit-text p { margin: 0 0 8px; }
.permit-text ol { margin: 0; padding-left: 24px; }
.permit-text li + li { margin-top: 6px; }
.permit-text .permit-link { margin: 4px 0 0; }
.permit-text .permit-link a { display: inline-flex; align-items: center; min-height: 48px; }
.blank { color: var(--warn); font-weight: 600; }
/* 머리 아래 약속 상자(사람 127 메모 ② «학습 0 은 잘 보여야») — 첫 문장 굵게 · 왼쪽 강조 선 · 폰 360 에서 줄바꿈만(넘침 0). */
.promise { margin-top: 16px; padding: 14px 16px; background: var(--panel-raised); border-left: 4px solid var(--accent-strong); border-radius: 12px; }
.promise p { margin: 0; color: var(--ink-rest); overflow-wrap: anywhere; }
.promise strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }