/* Opening flow based on observed Cheongwoldang presentation patterns. */
@font-face {
  font-family: 'Gowun Batang';
  src: url('assets/fonts/GowunBatang-Saju-v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --scene-night: #20151e; }
.shot { background-image: url('assets/yuran-hanbok-sheet-v5.png'); }
.poster .shot-cover { background-image: url('assets/yuran-cover-pose-v15.png'); background-size: cover; background-position: center top; height: 100%; aspect-ratio: auto; }
.meeting-art .shot, .profile-backdrop .shot { background-image: url('assets/yuran-reference-portrait.png'); background-size: cover; background-position: center top; aspect-ratio: auto; height: 100%; }
.app-shell { background: var(--scene-night); }
.topbar { height: 64px; padding: 0 22px; background: linear-gradient(#050a1833, transparent); }
.topbar .wordmark { font-family: 'Gowun Batang', serif; font-weight: 400; font-size: 24px; }
#episode-label, .brand-star { display: none; }
.motion-button { background: transparent; border-color: transparent; opacity: .7; }
.scene-back { display: none; background: transparent; padding: 10px 12px 10px 0; font-size: 28px; line-height: 1; }
body:not([data-screen='home']) .scene-back { display: block; }
body:not([data-screen='home']) .topbar .wordmark { display: none; }
.poster { min-height: 650px; max-height: none; height: 100svh; background: var(--scene-night); }
.cover-art { animation: none; width: 100%; height: 100%; left: 0; top: 0; mask-image: none; }
.poster-shade { background: linear-gradient(transparent 44%, #20151e40 56%, #20151ee6 82%, #20151e 100%); }
body[data-screen='home'] .topbar, body[data-screen='greeting'] .topbar { color: #3b2933; background: linear-gradient(#fffcf699, transparent); }
body[data-screen='home'] .motion-button, body[data-screen='greeting'] .motion-button { color: #3b2933; opacity: 1; background: #fff8; }
.poster .motes, .cover-whisper, .cover-rule, .cover-description, .cover-footnote { display: none; }
.cover-copy { left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); }
.cover-eyebrow { font-family: 'Gowun Batang', serif; font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.cover-copy h1 { font-family: 'Gowun Batang', serif; font-size: clamp(49px, 13vw, 70px); line-height: 1.25; font-weight: 400; letter-spacing: -.075em; padding: 0; color: #f5f1ff; text-shadow: 0 0 18px #b5b8ed55; }
.cover-copy h1 > span { display: none; }
.cover-subtitle { font-size: 15px; font-weight: 450; letter-spacing: -.03em; color: #dfdbea; margin-top: 18px; margin-bottom: 39px; }
.primary-button { border-radius: 8px; min-height: 49px; font-size: 17px; background: linear-gradient(105deg,#e5d6da,#fffaf7); color: #452632; box-shadow: 0 0 8px #f3cad826; }
.primary-button:hover { transform: none; background: linear-gradient(105deg,#f0e0e4,#fff); }
.primary-button > span { display: none; }
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* A finished strip carries its own frame spacing and lettering. */
.prologue-screen { background: #090d1b; min-height: 100svh; }
.prologue-strip { display: block; width: 100%; height: auto; }
.prologue-screen figure { margin: 0; }
body[data-screen='prologue'] .topbar { position: fixed; left: 50%; transform: translateX(-50%); width: min(100%,520px); background: linear-gradient(#071321aa,transparent); }
.prologue-skip { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); bottom: 19px; max-width: calc(100% - 40px); padding: 12px 20px; border: 1px solid #ffffff3b; border-radius: 30px; background: #101827c9; backdrop-filter: blur(8px); font-size: 12px; color: #e7e7ef; white-space: nowrap; }
.prologue-end { padding: 15px 20px 84px; background: linear-gradient(#090d1b,#071321); }
.prologue-end .primary-button { background: #ffffff13; color: #fff; border: 1px solid #ffffff80; backdrop-filter: blur(8px); }

/* Full-height character greeting, two short lines, one action. */
.meeting { min-height: 650px; max-height: none; height: 100svh; background: var(--scene-night); }
.meeting-art { top: 0; left: 0; width: 100%; height: 82%; mask-image: none; }
.meeting-art .shot { min-height: 0; animation: none; }
.meeting::after { background: linear-gradient(transparent 42%, #20151e55 60%, #20151eee 82%, #20151e); }
.meeting-caption, .meeting .sound-effect, .conversation .speaker, #dialogue-count { display: none; }
.conversation { left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); padding: 0; }
#greeting-copy { font-family: 'Gowun Batang', serif; font-size: 20px; font-weight: 400; line-height: 1.75; letter-spacing: -.025em; text-align: center; min-height: 90px; margin: 0 0 22px; text-shadow: 0 0 12px #e1dded42; }
.conversation-bottom { display: block; margin: 0; }
#greeting-next { display: block; width: 100%; min-height: 49px; padding: 12px; border-radius: 8px; background: linear-gradient(105deg,#e5d6da,#fffaf7); color: #452632; font-size: 17px; font-weight: 600; }

/* Information stays on the scene, over a blurred character background. */
body[data-screen='input'] .topbar { color: white; background: transparent; }
body[data-screen='input'] .motion-button { color: #e0e3ec; border-color: transparent; }
.profile-screen { min-height: 100svh; padding-top: 0; display: flex; flex-direction: column; justify-content: flex-end; color: #f4f4f8; background: var(--scene-night); color-scheme: dark; isolation: isolate; }
.profile-backdrop { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.profile-backdrop .shot { width: 125%; margin-left: -12.5%; filter: blur(10px) brightness(.42); transform: scale(1.05); }
.profile-screen::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(#20151e08 10%,#20151e50 48%,#160d14e6 100%); pointer-events: none; }
.profile-screen .form-scene { display: none; }
.form-body { position: relative; padding: 0 20px 20px; margin-top: clamp(150px, 30svh, 325px); }
.form-body > .small-label, .form-body h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; margin: 0; }
.field { font-size: 14px; font-weight: 600; margin-bottom: 21px; }
.field input, input[type='time'] { min-height: 41px; padding: 9px 3px; margin-top: 6px; border: 0; border-bottom: 1px solid #ffffff36; border-radius: 0; background: transparent; color: #fff; font-size: 15px; box-shadow: none; }
.field input::placeholder { color: #ffffff65; font-size: 14px; }
.field input:focus, input[type='time']:focus { border-color: #c6cffa; box-shadow: none; }
.field input:disabled, input[type='time']:disabled { background: transparent; color: #fff5; }
.inline-field { margin-bottom: 0; gap: 10px; }
.inline-field legend { font-size: 14px; line-height: 26px; }
.choice-group { gap: 12px; }
.choice-group span { background: none; border: 0; border-radius: 0; padding: 3px 0; font-size: 12px; color: #fff8; }
.choice-group input:checked + span { background: none; border: 0; color: #fff; font-weight: 650; }
.calendar-field .choice-group span::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: -2px; margin-right: 4px; }
.calendar-field .choice-group input:checked + span::before { background: #fff; box-shadow: inset 0 0 0 3px #273448; }
.date-field { margin-bottom: 22px; }
.date-field input { margin-top: 0; }
.birth-date-parts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }
.birth-date-parts .field { min-width: 0; margin-bottom: 0; }
.date-part { position: relative; }
.birth-date-parts input { padding-right: 25px; }
.date-unit { position: absolute; right: 4px; bottom: 11px; color: #ffffff80; font-size: 13px; font-weight: 400; pointer-events: none; }
.time-heading { font-size: 14px; }
.check-label { color: #fff9; font-size: 12px; }
.check-label input { accent-color: #d9e2ff; }
.gender-field { display: block; margin-top: 22px; margin-bottom: 14px; }
.gender-field legend { float: none; margin-bottom: 8px; }
.gender-field .choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gender-field .choice-group span { text-align: center; border: 1px solid #fff7; border-radius: 8px; padding: 12px; min-height: 46px; color: #fff; font-size: 14px; }
.gender-field .choice-group input:checked + span { background: #c3cdec33; border: 1px solid #e3e9ff; }
.place-extra { color: #c9cdd9; margin-bottom: 12px; }
.place-extra summary { cursor: pointer; font-size: 11px; padding: 5px 0; }
.place-extra .field { margin: 7px 0 13px; }
.optional { color: #a0a8b9; }
.form-note { color: #9aa3b4; font-size: 10px; margin: 4px 0 14px; line-height: 1.7; }
.form-submit { background: linear-gradient(105deg,#e5d6da,#fffaf7); color: #452632; }
.form-submit:hover { background: #fff7fa; }
#form-back { display: none; }
#example-button { display: block; margin: 7px auto 0; padding: 10px 20px 0; font-size: 11px; color: #aeb7ca; background: none; }

@media (min-width:700px) {
  .cover-art, .meeting-art { top: 0; left: 0; width: 100%; }
  .cover-copy { bottom: 24px; left: 24px; right: 24px; }
  .cover-copy h1 { font-size: 76px; }
  .cover-eyebrow { font-size: 24px; }
  .cover-subtitle { font-size: 17px; }
  .conversation { left: 24px; right: 24px; bottom: 24px; padding: 0; }
  #greeting-copy { font-size: 23px; line-height: 1.75; margin-bottom: 30px; min-height: 100px; }
  .form-body { padding: 0 27px 23px; }
  .field { margin-bottom: 26px; }
  .field input, input[type='time'] { min-height: 45px; }
}
@media (max-width:359px) {
  .cover-art { width: 100%; left: 0; }
  .cover-copy { left: 18px; right: 18px; }
  .cover-copy h1 { font-size: 52px; }
  .cover-eyebrow { font-size: 19px; }
  #greeting-copy { font-size: 18px; }
  .form-body { padding-left: 18px; padding-right: 18px; }
}