/* 클로틸다의 방 — 튜토리얼(2026-09-28). 현관과 같은 밤색·금색. Unity 는 받지 않는다. */
@font-face { font-family: 'MaruBuri'; src: url('/welcome/assets/MaruBuri-Regular.otf') format('opentype'); font-display: swap; }
:root { --ink: #f4ead3; --muted: #aeb4c4; --gold: #e3c07c; --bg: #05070f; --panel: #11182a; --line: #2a3350; --paper: #f3eee3; --paper-ink: #2b2b29; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100dvh; color: var(--ink); background: radial-gradient(120% 60% at 50% 0%, #141d3a 0%, var(--bg) 60%) fixed;
  font: 16px/1.6 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] body { word-break: normal; line-break: strict; }
a { color: inherit; }
[hidden] { display: none !important; }

.tutorial-header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid #1c2440; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'MaruBuri', serif; font-size: 17px; }
.brand img { border-radius: 9px; }
.brand small { display: block; font: 9px/1.2 system-ui, sans-serif; letter-spacing: .18em; color: var(--muted); }
.header-exit { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid #4a557a; border-radius: 12px;
  text-decoration: none; font-size: 14px; color: var(--ink); background: #0d1322; }

.stage { width: min(720px, 100%); margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-left)) 40px; }

/* 그녀의 방 */
.room { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
.portrait { margin: 0; }
.portrait img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 1px solid #c6b58c99; display: block; }
.dialogue { position: relative; min-height: 132px; padding: 14px 16px 34px; border: 1px solid #b6975c; border-radius: 16px; background: linear-gradient(180deg, #131c31, #0e1526);
  box-shadow: 0 10px 40px #0007; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.dialogue:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.speaker { margin: 0 0 6px; color: var(--gold); font: 400 14px/1.3 'MaruBuri', serif; letter-spacing: .02em; }
.line { margin: 0; font: 400 clamp(17px, 4.6vw, 20px)/1.7 'MaruBuri', serif; color: var(--ink); white-space: pre-wrap; min-height: 2.4em; }
.line .caret { display: inline-block; width: .5em; color: var(--gold); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 「눌러서 계속 ◆」 — 손님이 멈춘 줄 알던 자리. 크게, 빛나듯이. */
.hint { position: absolute; right: 16px; bottom: 9px; margin: 0; color: var(--gold); font: 700 14px/1.4 system-ui, sans-serif; letter-spacing: .04em;
  animation: glow 1.8s ease-in-out infinite; }
/* 기다리는 동안의 글도 같은 숨. */
.line.glow { color: #f7ecc8; animation: glow 2.2s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { opacity: .62; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 10px #e3c07c99, 0 0 24px #e3c07c55; }
}
@media (prefers-reduced-motion: reduce) { .hint, .line.glow { animation: none; opacity: 1; } .line .caret { animation: none; } }
@media (max-width: 420px) { .room { grid-template-columns: 56px 1fr; gap: 10px; } .portrait img { width: 56px; height: 56px; } }

/* 묻기 */
.ask { display: grid; gap: 18px; margin: 18px 0 0; padding: 18px 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.ask h3 { margin: 0; font: 400 15px/1.4 'MaruBuri', serif; color: var(--gold); }
.ask .group { display: grid; gap: 10px; }
.ask .note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
/* 가입하면 이 생일이 그대로 방명록에(2026-09-30) — 방명록은 못 바꾸니 다른 안내보다 밝게, 「바꿀 수 없어요」는 금빛으로. */
.ask .carry-note { color: var(--ink); font-size: 14px; }
.ask .carry-note strong { color: var(--gold); }
.birth-known { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #3a4560; border-radius: 12px; background: #0b1326; }
.birth-known strong { font: 400 18px/1.4 'MaruBuri', serif; color: #fff4d8; }
.birth-known button { min-height: 40px; padding: 0 12px; border: 1px solid #4a557a; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
/* birth-fields.js 가 만드는 칸(방명록과 같은 부품) */
.birth-label, .birth-calendar legend { color: #f7eed8; font-size: 15px; font-weight: 600; }
.birth-calendar { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.birth-calendar-choices { display: flex; gap: 10px; }
.birth-calendar-choice { position: relative; flex: 1 1 5em; margin: 0; cursor: pointer; }
.birth-calendar-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.birth-calendar-choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; border: 1px solid #8e98ae; border-radius: 10px; color: var(--ink); font-size: 16px; }
.birth-calendar-choice input:checked + span { border-color: var(--gold); background: var(--gold); color: #182030; font-weight: 700; }
.birth-calendar-choice input:focus-visible + span { outline: 3px solid #f1d58f; outline-offset: 2px; }
.birth-leap { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; color: #f7eed8; font-size: 15px; cursor: pointer; }
.birth-leap input { width: 24px; height: 24px; margin: 0; accent-color: var(--gold); }
.birth-date { display: grid; gap: 8px; }
.birth-date-input, .birth-time select, .more input { width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid #8e98ae; border-radius: 12px; background: #0b1326; color: var(--ink);
  font-size: 22px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.birth-date-input::placeholder { color: #8a93a7; font-size: 17px; letter-spacing: .02em; }
.birth-date-spell { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-left: 4px solid #5d6882; border-radius: 0 10px 10px 0; background: #0f192b; }
.birth-date-spell strong { color: #cdd3de; font-size: 17px; font-weight: 600; }
.birth-date-spell small { color: #c4c9d4; font-size: 13px; }
.birth-date-spell[data-state="ok"] { border-left-color: var(--gold); } .birth-date-spell[data-state="ok"] strong { color: #fff4d8; font-size: 20px; }
.birth-date-spell[data-state="invalid"] { border-left-color: #ff9d8c; } .birth-date-spell[data-state="invalid"] strong { color: #ffc4b8; }
.birth-time { display: grid; gap: 10px; }
.birth-time-choices { display: flex; gap: 10px; }
.birth-time-choice, .sex-choice { flex: 1 1 6em; min-height: 48px; padding: 8px 10px; border: 1px solid #8e98ae; border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.birth-time-choice[aria-pressed="true"], .sex-choice[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #182030; font-weight: 700; }
.birth-time-pick { display: grid; gap: 10px; }
.birth-time-pick[hidden] { display: none !important; }
.birth-time-field { display: grid; gap: 6px; color: #f7eed8; font-size: 14px; }
.birth-time select { font-size: 17px; letter-spacing: 0; }
.birth-time-say { display: grid; gap: 2px; }
.birth-time-line { margin: 0; color: #fff4d8; font-size: 16px; }
.birth-time-note { margin: 0; color: var(--muted); font-size: 13px; }
.birth-time-say[data-state="invalid"] .birth-time-line { color: #ffc4b8; }
.sex-choices { display: flex; gap: 10px; }
.consent { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #3a4560; border-radius: 12px; background: #0b1326; cursor: pointer; font-size: 14px; line-height: 1.6; }
.consent input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--gold); }
.ask .go, .more .go { min-height: 54px; border: 0; border-radius: 12px; background: var(--gold); color: #182030; font: 700 17px/1 system-ui, sans-serif; cursor: pointer; }
.ask .go:disabled, .more .go:disabled { opacity: .55; cursor: default; }
#turnstile { min-height: 0; }

/* 기다림 */
.wait { display: grid; gap: 14px; margin: 18px 0 0; }
.question-card { padding: 16px 18px; border: 1px solid #a58a52; border-radius: 14px; background: #1b2634; }
.question-card .qc-label { margin: 0 0 6px; color: #dabb78; font: 600 12px/1.5 system-ui, sans-serif; letter-spacing: .04em; }
.question-card h2 { margin: 0 0 8px; font: 400 clamp(19px, 5vw, 23px)/1.45 'MaruBuri', serif; color: #f0e6ce; }
.question-card p { margin: 6px 0 0; color: #d7dbe4; font-size: 14px; line-height: 1.7; }
.question-card .basis { color: var(--muted); font-size: 12px; }
/* height: auto 가 없으면 <video height=720> 속성이 720px 상자로 늘려 영상은 가운데 띠가 되고 아래 글은 화면 밖으로 밀린다(9/28 실측). */
.cutscene { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; display: block; }
/* 컷씬 아래 — 답이 올 때까지 숨 쉬는 글과 흐르는 금빛 바. 손님이 「멈췄나」 하지 않게. */
.wait-pulse { display: grid; gap: 8px; padding: 0 4px; }
.wait-text { margin: 0; font: 400 clamp(16px, 4.4vw, 18px)/1.6 'MaruBuri', serif; color: #f7ecc8; animation: glow 2.2s ease-in-out infinite; }
.wait-bar { position: relative; height: 3px; border-radius: 2px; background: #2a3446; overflow: hidden; }
.wait-bar i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { left: 100%; } }
.wait-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .wait-text { animation: none; } .wait-bar i { animation: none; left: 0; width: 100%; opacity: .6; } }

/* 답 — 책장의 문서와 같은 종이 */
.reading { margin: 18px 0 0; padding: 22px 20px 26px; border-radius: 16px; background: var(--paper); color: var(--paper-ink); font-family: 'MaruBuri', Georgia, serif; }
.reading .kicker { margin: 0 0 6px; color: #887452; font-size: 13px; }
.reading h2 { margin: 0 0 18px; font: 400 clamp(22px, 5.6vw, 28px)/1.4 'MaruBuri', serif; letter-spacing: -.02em; }
.reading .slot { margin: 0 0 6px; padding-top: 14px; border-top: 1px solid #cdc3b0; color: #9c8663; font: 600 12px/1.5 system-ui, sans-serif; letter-spacing: .06em; }
.reading p.body { margin: 0 0 14px; font-size: 17px; line-height: 1.85; }
.reading p.asked { margin: 0 0 6px; font: 600 17px/1.6 'MaruBuri', serif; word-break: keep-all; overflow-wrap: anywhere; }
.reading p.body b { font-weight: 600; }
.reading-next { display: block; margin: 4px 0 18px; padding: 11px 12px; border: 1px solid #baa477; border-radius: 9px;
  color: #574526; font: 600 15px/1.5 system-ui, sans-serif; text-decoration: none; }
.reading .evidence { margin: 6px 0 16px; padding: 8px 12px; border-left: 3px solid #baa477; border-radius: 0 8px 8px 0; background: #f6efdf; }
.reading .evidence summary { cursor: pointer; color: #5a4a28; font: 600 14px/1.5 system-ui, sans-serif; }
.reading .evidence p { margin: 6px 0 0; color: #4a4232; font: 14px/1.65 system-ui, sans-serif; }

/* 한 번 더 · 명식 · 현관 */
.more { display: grid; gap: 12px; margin: 18px 0 0; padding: 18px 16px 20px; border: 1px solid #a58a52; border-radius: 16px; background: #131c31; }
.more { scroll-margin-top: 16px; }
.more h2 { margin: 0; font: 400 clamp(20px, 5vw, 25px)/1.5 'MaruBuri', serif; }
.question-choices { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.question-choices button { min-height: 56px; padding: 10px 12px; border: 1px solid #55627e; border-radius: 10px; background: #1b2640;
  color: #f4ead3; font: 14px/1.55 system-ui, sans-serif; text-align: left; word-break: keep-all; overflow-wrap: anywhere; cursor: pointer; }
.question-label { color: #d7dbe4; font-size: 13px; }
.question-choices button:focus-visible, .reading-next:focus-visible { outline: 2px solid #bd913b; outline-offset: 3px; }
.more .wall { margin: 0; color: #d7dbe4; font-size: 14px; line-height: 1.7; }
.more .wall b { color: var(--gold); font-weight: 600; }
.more input { font-size: 17px; letter-spacing: 0; }
.more input::placeholder { color: #7f8798; }
/* 되물음에 답하기(2026-10-03) — 모델이 짐작한 대답은 점선(제안), 고르면 금빛(확정). 다른 고민은 접어서 아래로. */
.more .reply { display: grid; gap: 10px; padding: 14px 14px 16px; border: 1px solid #6d5a33; border-radius: 14px; background: #0f1628; }
.reply-label { margin: 0; color: var(--gold); font: 600 12px/1.5 system-ui, sans-serif; letter-spacing: .06em; }
.reply-question { margin: 0; color: var(--ink); font: 400 clamp(17px, 4.6vw, 19px)/1.65 'MaruBuri', serif; word-break: keep-all; overflow-wrap: anywhere; }
.reply-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.reply-choices button { min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px dashed #8e98ae; border-radius: 999px; background: transparent; color: #d7dbe4;
  font: 15px/1.4 system-ui, sans-serif; text-align: left; word-break: keep-all; overflow-wrap: anywhere; cursor: pointer; }
.reply-choices button[aria-pressed="true"] { border-style: solid; border-color: var(--gold); background: var(--gold); color: #182030; font-weight: 700; }
.reply-choices button:focus-visible, .other-question summary:focus-visible { outline: 2px solid #bd913b; outline-offset: 3px; }
/* 빈칸으로 「이어서 묻기」를 누르면(2026-10-04) — 짐작 대답을 금빛으로 두 번 짚고, 단추 위에 한 줄로 알린다. */
.reply-choices.nudge button { border-color: var(--gold); color: #f4ead3; animation: nudge .5s ease-in-out 2; }
@keyframes nudge { 50% { background: rgba(227, 192, 124, .24); } }
@media (prefers-reduced-motion: reduce) { .reply-choices.nudge button { animation: none; } }
.more .need { margin: 0; color: #ffc4b8; font-size: 14px; line-height: 1.6; }
.more .need:empty { display: none; }
.other-question summary { cursor: pointer; padding: 6px 0; color: var(--gold); font: 400 16px/1.5 'MaruBuri', serif; }
.other-question .other-body { display: grid; gap: 12px; margin-top: 10px; }
.more .links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 0; }
.more .links a { color: var(--gold); font: 400 16px/1.4 'MaruBuri', serif; text-decoration: none; }
.more .links a:after { content: ' →'; }

.status { margin: 14px 0 0; min-height: 0; color: #d7dbe4; font-size: 14px; }
.status:empty { display: none; }
.status.error { color: #ffc4b8; }
.status a { color: var(--gold); }
.tutorial-footer { padding: 18px 16px max(24px, env(safe-area-inset-bottom)); color: #7f8798; font-size: 12px; text-align: center; }
.tutorial-footer a { color: #aeb4c4; text-decoration: none; }
.no-script { padding: 16px; text-align: center; }
/* 태어난 곳(2026-10-07) — 한국어 화면은 접힌 한 줄(「한국 밖에서 태어났어요」), 일본어 화면은 고르기가 보인다. */
.birth-place { display: grid; gap: 8px; }
.birth-place-open { justify-self: start; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; color: #e0c387;
  font: 600 14px/1.4 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.birth-place-pick { display: grid; gap: 6px; }
.birth-place-open[hidden], .birth-place-pick[hidden] { display: none; }
.birth-place-select { width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid #8e98ae; border-radius: 12px; background: #0b1326; color: var(--ink); font-size: 17px; }
.birth-place-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.birth-place-open:focus-visible, .birth-place-select:focus-visible { outline: 3px solid #f1d58f; outline-offset: 2px; }