:root {
  --night: #06101c;
  --panel: rgba(8, 18, 31, .94);
  --panel-solid: #0a1726;
  --line: rgba(221, 235, 255, .18);
  --text: #f7f8f3;
  --muted: #a9b6c7;
  --paper: #f4efe4;
  --paper-ink: #18202b;
  --lime: #caff4d;
  --coral: #ff7567;
  --blue: #6edbff;
  --green: #73dba5;
  --radius: 18px;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); }
button { font: inherit; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 0 6px #2563eb; }
[hidden] { display: none !important; }
.app { width: 100%; height: 100svh; overflow: hidden; }
@supports (height: 100dvh) { .app { height: 100dvh; } }

.mono, .eyebrow, .chapter, .name-role, .source-line {
  font: 900 .7rem/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.primary-button {
  min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  color: #08121c; background: var(--lime); border: 1px solid white; border-radius: 12px; font-weight: 900; cursor: pointer;
  box-shadow: 0 12px 32px rgba(202,255,77,.14); transition: transform .16s ease, filter .16s ease;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-button:disabled { color: #e6edf5; background: #465467; border-color: #718096; box-shadow: none; cursor: not-allowed; transform: none; }
.secondary-button { min-height: 46px; padding: 0 17px; color: var(--text); background: #1a2a3e; border: 1px solid var(--line); border-radius: 11px; font-weight: 800; cursor: pointer; }

/* Title */
.title-screen { width: 100%; height: 100%; position: relative; isolation: isolate; background: url("assets/hr-incident-room.png") center/cover no-repeat; }
.title-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,10,18,.1) 0 48%, rgba(4,10,18,.94) 76%), linear-gradient(0deg, rgba(4,10,18,.7), transparent 50%); }
.title-top { height: 60px; padding: 0 clamp(17px, 3vw, 44px); display: flex; align-items: center; justify-content: space-between; background: rgba(4,10,18,.62); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 950; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #08121c; background: var(--lime); border-radius: 9px 4px 9px 4px; }
.title-top .chapter { color: var(--coral); }
.title-copy { width: min(560px, 41vw); position: absolute; right: clamp(28px, 7vw, 120px); top: 50%; transform: translateY(-47%); }
.title-copy .eyebrow { margin: 0 0 15px; color: var(--lime); }
.title-copy h1 { margin: 0; font-size: clamp(3rem, 5.6vw, 6.6rem); line-height: .9; letter-spacing: -.07em; }
.title-copy h1 em { display: block; margin-top: 11px; color: var(--coral); font-style: normal; }
.title-copy > p { margin: 24px 0 27px; color: #c7d1de; font-size: clamp(.94rem, 1.2vw, 1.08rem); line-height: 1.65; word-break: keep-all; }
.title-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.title-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.title-tags span { padding: 6px 9px; color: #cbd6e3; background: rgba(5,12,21,.7); border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; }

/* Visual novel shell */
.vn-shell { width: 100%; height: 100%; position: relative; display: grid; grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; background: var(--night); }
.vn-hud { padding: 0 clamp(14px, 2.5vw, 32px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; position: relative; z-index: 20; background: rgba(4,10,18,.94); border-bottom: 1px solid var(--line); }
.vn-hud .chapter { color: var(--lime); }
.progress-dots { display: flex; align-items: center; gap: 5px; }
.progress-dots i { width: 18px; height: 3px; display: block; background: #2b3b50; border-radius: 9px; }
.progress-dots i.done { background: var(--green); }
.progress-dots i.active { width: 29px; background: var(--lime); }
.hud-right { justify-self: end; display: flex; gap: 8px; }
.hud-button { min-width: 44px; height: 38px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }

.novel-stage { min-height: 0; position: relative; overflow: hidden; background: url("assets/hr-incident-room.png") center/cover no-repeat; transition: background-position .5s ease; }
.novel-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,12,21,.65), transparent 48%), linear-gradient(90deg, rgba(5,12,21,.16), transparent 40% 65%, rgba(5,12,21,.2)); }
.novel-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background .4s ease; }
.novel-stage.focus-rookie::after { background: linear-gradient(90deg, transparent 0 42%, rgba(3,8,14,.46) 78%); }
.novel-stage.focus-ceo::after { background: linear-gradient(90deg, rgba(3,8,14,.43) 0 34%, transparent 68%); }
.novel-stage.focus-room::after { background: rgba(3,8,14,.08); }
.novel-stage.focus-rookie { background-position: 35% center; }
.novel-stage.focus-ceo { background-position: 72% center; }
.novel-stage.focus-room { background-position: center; }
.scene-label { position: absolute; left: clamp(18px, 3vw, 46px); top: clamp(17px, 3vh, 32px); z-index: 3; }
.scene-label .eyebrow { margin: 0 0 7px; color: var(--lime); }
.scene-label h2 { margin: 0; max-width: 620px; font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: .95; letter-spacing: -.055em; text-shadow: 0 3px 22px rgba(0,0,0,.65); }
.scene-label h2 em { color: var(--coral); font-style: normal; }
.thought-caption { max-width: min(530px, 46%); padding: 14px 17px; position: absolute; right: 4%; top: 18%; z-index: 3; color: var(--paper-ink); background: rgba(244,239,228,.96); border: 2px solid #152133; border-radius: 20px; box-shadow: 8px 10px 0 rgba(0,0,0,.26); font-size: .9rem; font-weight: 800; line-height: 1.5; }

.lesson-visual { width: min(820px, 76%); max-height: 62%; padding: clamp(15px, 2vw, 27px); position: absolute; left: 50%; top: 40%; z-index: 5; transform: translate(-50%,-50%); color: var(--paper-ink); background: rgba(244,239,228,.97); border: 2px solid #182434; border-radius: var(--radius); box-shadow: 14px 18px 0 rgba(0,0,0,.3); overflow: hidden; }
.lesson-visual .eyebrow { margin: 0 0 7px; color: #a83d35; }
.lesson-visual h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2.35rem); letter-spacing: -.04em; }
.lesson-visual > p { margin: 8px 0 14px; color: #56616e; font-size: .82rem; line-height: 1.5; }
.evaluation-visual h2 { margin-bottom: 13px; }
.evaluation-sheet { border-top: 2px solid #1b2530; }
.sheet-goal, .sheet-row { min-height: 42px; padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid #c7c0b3; }
.sheet-goal { color: #7e211e; background: #f4d9d3; border-bottom: 2px solid #b84e47; }
.sheet-goal span, .sheet-row span { font-size: .76rem; }
.sheet-goal strong { padding: 5px 8px; border: 2px solid #bd4c45; transform: rotate(-1deg); font-size: .73rem; }
.sheet-row b { font: 900 .85rem ui-monospace, monospace; }
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chain span { min-height: 72px; padding: 12px 8px; display: grid; place-items: center; position: relative; color: #07111f; background: #dce5e7; border-radius: 10px; font-size: .78rem; font-weight: 900; text-align: center; }
.chain span:last-child { background: var(--lime); }
.chain span:not(:last-child)::after { content: "→"; position: absolute; right: -11px; z-index: 2; font-size: 1.1rem; }
.lens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lens { min-height: 88px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; color: white; background: #182b41; border-radius: 11px; }
.lens:nth-child(2) { background: #244756; }.lens:nth-child(3) { background: #543b45; }.lens:nth-child(4) { background: #36513c; }
.lens b { font-size: .9rem; }.lens small { color: rgba(255,255,255,.72); font-size: .68rem; line-height: 1.35; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare article { padding: 14px; border: 1px solid #c3bdaf; border-radius: 11px; }
.compare article:last-child { color: #07111f; background: #e7ffc0; border-color: #b3d679; }
.compare h3 { margin: 0 0 8px; font-size: 1rem; }
.compare p { margin: 0; color: #5a6470; font-size: .75rem; line-height: 1.45; }
.rule-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rule-summary article { padding: 13px; background: #e4ded1; border-left: 4px solid #c44f44; border-radius: 8px; }
.rule-summary b { display: block; font-size: .79rem; }.rule-summary p { margin: 5px 0 0; color: #59636e; font-size: .69rem; line-height: 1.4; }

/* Character speech bubbles */
.dialogue-panel { width: min(760px, calc(100% - 48px)); min-height: 152px; padding: 18px 20px; position: absolute; left: 4%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 6px 18px; color: var(--paper-ink); background: rgba(255, 252, 244, .98); border: 2px solid #192638; border-radius: 24px; box-shadow: 10px 14px 0 rgba(0,0,0,.34), 0 20px 55px rgba(0,0,0,.26); }
.speech-bubble::before { content: ""; width: 25px; height: 25px; position: absolute; left: 72px; top: -14px; bottom: auto; z-index: -1; background: #fffaf0; border-top: 2px solid #192638; border-left: 2px solid #192638; transform: rotate(45deg); }
.speech-bubble.ceo, .speech-bubble.coach { right: 4%; left: auto; }
.speech-bubble.ceo::before { right: 82px; left: auto; }
.speech-bubble.coach::before { right: 132px; left: auto; }
.speech-bubble.rookie { border-color: #314b68; }
.speech-bubble.rookie::before { border-color: #314b68; }
.speech-bubble.ceo { border-color: #8d3e39; }
.speech-bubble.ceo::before { border-color: #8d3e39; }
.speech-bubble.coach { border-color: #23728d; }
.speech-bubble.coach::before { border-color: #23728d; }
.speaker { grid-column: 1; display: flex; align-items: center; gap: 9px; }
.speaker-name { color: #17607a; font-size: 1rem; font-weight: 950; }
.name-role { color: #667180; font-size: .66rem; }
.dialogue-text { grid-column: 1; grid-row: 2; min-height: 0; margin: 0; align-self: center; font-size: clamp(.96rem, 1.45vw, 1.2rem); line-height: 1.62; word-break: keep-all; }
.next-button { min-width: 148px; grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
.narrator .speaker-name, .coach .speaker-name { color: #17607a; }
.ceo .speaker-name { color: #a23c35; }

/* Choice checkpoint */
.choice-panel { width: min(1040px, calc(100% - 48px)); left: 50%; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); grid-template-rows: 1fr; gap: 18px; transform: translateX(-50%); }
.choice-prompt { align-self: center; }
.choice-prompt .speaker { margin-bottom: 8px; }
.choice-instruction { display: inline-flex; margin-bottom: 7px; padding: 4px 8px; color: #243106; background: #dcf99d; border: 1px solid #a6c75c; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.choice-prompt p { margin: 0; font-size: clamp(.9rem, 1.2vw, 1.08rem); line-height: 1.55; }
.choice-list { min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice { min-height: 0; padding: 11px; color: var(--text); background: #17263a; border: 1px solid var(--line); border-radius: 11px; font-size: .78rem; font-weight: 800; line-height: 1.4; cursor: pointer; }
.choice:hover { border-color: var(--lime); }
.choice.correct { color: #07111f; background: var(--lime); border-color: white; }
.choice.wrong { background: #4c252b; border-color: var(--coral); }

/* Full-screen exam scene */
.vn-shell.exam-mode { grid-template-rows: 50px minmax(78px, 15%) minmax(0, 1fr); }
.exam-mode .novel-stage .scene-label { top: 12px; }
.exam-mode .novel-stage .scene-label h2 { font-size: clamp(1.4rem, 2.8vw, 2.5rem); }
.exam-panel { padding: 12px clamp(14px, 2.6vw, 34px) max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 7px; background: #0a1726; border-top: 1px solid var(--line); overflow: hidden; }
.source-line { display: flex; justify-content: space-between; color: var(--lime); }
.exam-question { margin: 0; font-size: clamp(.86rem, 1.6vh, 1.05rem); line-height: 1.42; word-break: keep-all; }
.exam-options { min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 5px; }
.exam-option { min-height: 0; padding: 7px 10px; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--text); background: #16263a; border: 1px solid var(--line); border-radius: 10px; text-align: left; cursor: pointer; }
.exam-option span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .66rem; }
.exam-option b { font-size: clamp(.65rem, 1.25vh, .78rem); line-height: 1.28; overflow-wrap: anywhere; word-break: keep-all; }
.exam-option:hover { border-color: var(--lime); }
.exam-option.correct { color: #092318; background: #c9f1d9; border-color: var(--green); }
.exam-option.wrong { background: #51242a; border-color: var(--coral); }
.exam-feedback { padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; }
.exam-feedback b, .exam-feedback p { margin: 0; }
.exam-feedback b { display: block; font-size: .8rem; }.exam-feedback p { margin-top: 3px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.exam-feedback .primary-button { min-height: 42px; }

.ending-card { width: min(760px, 78%); padding: 25px; position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%,-50%); color: var(--paper-ink); background: rgba(244,239,228,.97); border: 2px solid #172333; border-radius: 18px; box-shadow: 14px 18px 0 rgba(0,0,0,.32); }
.ending-card .eyebrow { color: #a83d35; }.ending-card h2 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 3.8rem); letter-spacing: -.055em; }.ending-card p { margin: 0; color: #53606d; line-height: 1.6; }

@media (max-width: 780px) {
  .title-screen { background-image: url("assets/hr-incident-room-mobile.png"); background-position: center top; }
  .title-screen::before { background: linear-gradient(0deg, rgba(4,10,18,.97) 0 45%, rgba(4,10,18,.1) 78%); }
  .title-copy { width: auto; left: 18px; right: 18px; top: auto; bottom: max(22px, env(safe-area-inset-bottom)); transform: none; }
  .title-copy h1 { font-size: clamp(2.45rem, 11.5vw, 4.4rem); }
  .title-copy > p { margin: 14px 0 18px; font-size: .86rem; }
  .title-actions { grid-template-columns: 1fr; }
  .title-actions .secondary-button { display: none; }
  .title-tags { margin-top: 11px; }

  .vn-shell { grid-template-rows: 50px minmax(0, 1fr); }
  .vn-hud { padding: 0 11px; grid-template-columns: auto 1fr auto; gap: 8px; }
  .progress-dots { justify-content: center; gap: 3px; }
  .progress-dots i { width: 9px; }.progress-dots i.active { width: 18px; }
  .hud-right .hud-button:first-child { display: none; }
  .novel-stage { background-image: url("assets/hr-incident-room-mobile.png"); background-position: center top; }
  .novel-stage.focus-rookie, .novel-stage.focus-ceo, .novel-stage.focus-room { background-position: center top; }
  .scene-label { left: 14px; top: 13px; }.scene-label h2 { font-size: clamp(1.55rem, 7vw, 2.6rem); }
  .thought-caption { max-width: 62%; right: 12px; top: 18%; padding: 9px 11px; font-size: .72rem; }
  .dialogue-panel { width: calc(100% - 24px); min-height: 205px; right: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 12px; padding: 14px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) 46px; gap: 5px; border-radius: 20px; }
  .speech-bubble.ceo, .speech-bubble.coach { right: 12px; left: auto; }
  .speech-bubble::before { left: 44px; }
  .speech-bubble.ceo::before { right: 48px; left: auto; }
  .speech-bubble.coach::before { right: 82px; left: auto; }
  .speaker { grid-column: 1; }.dialogue-text { grid-column: 1; grid-row: 2; font-size: 1rem; line-height: 1.55; }.next-button { width: 100%; min-width: 0; min-height: 46px; grid-column: 1; grid-row: 3; }
  .lesson-visual { width: calc(100% - 24px); max-height: 49%; top: 31%; padding: 12px; }
  .lesson-visual h2 { font-size: 1.2rem; }.lesson-visual > p { margin: 5px 0 9px; font-size: .68rem; }
  .evaluation-visual h2 { margin-bottom: 7px; }
  .sheet-goal, .sheet-row { min-height: 31px; padding: 5px 7px; }
  .sheet-goal span, .sheet-row span, .sheet-goal strong { font-size: .6rem; }
  .chain { gap: 4px; }.chain span { min-height: 58px; padding: 7px 3px; font-size: .62rem; }.chain span:not(:last-child)::after { right: -7px; font-size: .8rem; }
  .lens-grid { gap: 4px; }.lens { min-height: 67px; padding: 8px 6px; }.lens b { font-size: .7rem; }.lens small { font-size: .56rem; }
  .compare { gap: 5px; }.compare article { padding: 9px; }.compare h3 { font-size: .78rem; }.compare p { font-size: .6rem; }
  .rule-summary { gap: 4px; }.rule-summary article { padding: 8px 6px; }.rule-summary b { font-size: .64rem; }.rule-summary p { font-size: .56rem; }
  .choice-panel { width: calc(100% - 24px); min-height: 230px; right: auto; left: 50%; padding: 10px 12px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 7px; transform: translateX(-50%); }
  .choice-prompt p { font-size: .76rem; }.choice-list { gap: 5px; }.choice { padding: 7px; font-size: .65rem; }

  .vn-shell.exam-mode { grid-template-rows: 46px minmax(62px, 11%) minmax(0, 1fr); }
  .exam-mode .novel-stage .scene-label { top: 7px; }.exam-mode .novel-stage .scene-label .eyebrow { margin-bottom: 2px; font-size: .58rem; }.exam-mode .novel-stage .scene-label h2 { font-size: 1.2rem; }
  .exam-panel { padding: 7px 10px max(7px, env(safe-area-inset-bottom)); gap: 4px; }
  .source-line { font-size: .58rem; }
  .exam-question { font-size: clamp(.69rem, 2.8vw, .82rem); line-height: 1.3; }
  .exam-options { gap: 4px; }
  .exam-option { padding: 4px 7px; grid-template-columns: 23px 1fr; gap: 6px; }
  .exam-option span { width: 21px; height: 21px; font-size: .58rem; }
  .exam-option b { font-size: clamp(.59rem, 2.4vw, .69rem); line-height: 1.22; }
  .exam-feedback { padding: 6px 8px; }.exam-feedback b { font-size: .68rem; }.exam-feedback p { font-size: .59rem; }.exam-feedback .primary-button { min-height: 38px; padding-inline: 11px; font-size: .68rem; }
  .ending-card { width: calc(100% - 24px); padding: 17px; }.ending-card p { font-size: .78rem; }
}

@media (max-height: 650px) and (min-width: 781px) {
  .vn-shell { grid-template-rows: 48px minmax(0,1fr); }
  .dialogue-panel { min-height: 132px; bottom: 16px; padding-block: 12px; }
  .lesson-visual { max-height: 56%; top: 36%; padding: 13px 18px; }
  .vn-shell.exam-mode { grid-template-rows: 44px minmax(64px, 13%) minmax(0,1fr); }
  .exam-panel { padding-block: 7px; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}