:root {
  color-scheme: dark;
  --ink: #07100d;
  --ink-soft: #0d1814;
  --panel: rgba(17, 29, 25, 0.9);
  --panel-strong: #13201c;
  --line: rgba(244, 234, 216, 0.14);
  --line-strong: rgba(202, 168, 106, 0.38);
  --paper: #f4ead8;
  --paper-muted: #bcb5aa;
  --gold: #d0a85f;
  --gold-pale: #ead09a;
  --indigo: #8792c6;
  --copper: #bc7455;
  --good: #85b79d;
  --danger: #e08b77;
  --projector: #f2dfb4;
  --mist: #b9c8bf;
  --wet-blue: #506f7b;
  --timeline-blue: #8e9dd8;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% -12%, rgba(242, 223, 180, .065), transparent 34%),
    var(--ink);
  color: var(--paper);
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 76px 0 0 282px;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 14%, rgba(242,223,180,.018) 46%, transparent 72%);
  transition: background .5s ease;
}

body[data-act="3"]::before { background: linear-gradient(104deg, transparent 8%, rgba(80,111,123,.085) 52%, transparent 82%); }
body[data-act="4"]::before { background: linear-gradient(104deg, transparent 8%, rgba(188,116,85,.07) 52%, transparent 82%); }
body[data-act="7"]::before { background: radial-gradient(circle at 58% 22%, rgba(242,223,180,.09), transparent 48%); }
body[data-act="1"]::before { background: radial-gradient(circle at 58% 18%, rgba(242,223,180,.085), transparent 46%); }
body[data-act="2"]::before { background: linear-gradient(104deg, transparent 10%, rgba(116,151,132,.08) 48%, transparent 82%); }
body[data-act="5"]::before { background: linear-gradient(104deg, transparent 8%, rgba(135,146,198,.07) 48%, rgba(188,116,85,.045) 74%, transparent 88%); }
body[data-act="6"]::before { background: linear-gradient(104deg, transparent 8%, rgba(77,118,111,.085) 52%, transparent 84%); }

button, input, textarea, select { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: -80px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  pointer-events: none;
}
.ambient-one { top: -20vw; right: -10vw; background: var(--gold); }
.ambient-two { bottom: -24vw; left: -15vw; background: var(--indigo); }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 250px minmax(240px, 1fr) auto;
  gap: 28px;
  align-items: center;
  height: 76px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(24px);
}

.wordmark {
  display: flex;
  flex-direction: column;
  color: var(--paper);
  text-decoration: none;
}
.wordmark span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.wordmark strong { margin-top: 3px; font-size: 15px; }

.progress-cluster { width: min(620px, 100%); justify-self: center; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--paper-muted); font-size: 12px; }
.progress-track { height: 2px; overflow: hidden; background: rgba(244,234,216,.12); }
.progress-track span { display: block; width: 4%; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-pale)); transition: width .4s ease; }

.quiet-button, .top-action, .back-button, .primary-button, .choice, .mini-button, .act-button, .tag-button, .reorder-button, .feature-primary, .feature-secondary, .text-action {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.quiet-button { padding: 9px 12px; color: var(--paper-muted); font-size: 12px; }
.top-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
.top-action { min-height: 38px; padding: 0 12px; color: var(--paper-muted); font-size: 11px; white-space: nowrap; }
.top-action.perspective-entry { border-color: rgba(133,183,157,.3); color: #b9d9c8; }
button:hover:not(:disabled) { border-color: var(--line-strong); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(202, 168, 106, .42);
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .42; }

.app-shell { display: grid; grid-template-columns: 282px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.act-rail {
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  padding: 58px 32px 112px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(10, 12, 17, .62);
}
.eyebrow, .scene-kicker { margin: 0 0 14px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.act-rail h1 { margin: 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }
.rail-summary { margin: 12px 0 36px; color: var(--paper-muted); font-size: 13px; }
.act-rail nav { display: grid; gap: 5px; }
.act-button { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; width: 100%; padding: 10px 8px; border-color: transparent; text-align: left; color: #817e79; font-size: 12px; line-height: 1.45; }
.act-button span:first-child { font-variant-numeric: tabular-nums; }
.act-button.active { background: rgba(202,168,106,.08); color: var(--paper); border-color: rgba(202,168,106,.22); }
.act-button.complete { color: var(--paper-muted); }
.act-button.complete span:first-child { color: var(--good); }
.rail-note { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.rail-note span { color: var(--indigo); font-size: 11px; font-weight: 700; }
.rail-note p { color: #817e79; font-size: 11px; line-height: 1.6; }

.lesson { width: 100%; min-width: 0; padding: 70px clamp(26px, 6vw, 100px) 160px; }
.lesson:focus { outline: none; }
.immutable-block { min-width: 0; margin: 0; padding: 0; border: 0; }
.immutable-block:disabled { opacity: 1; }
.scene-wrap { width: min(900px, 100%); margin: 0 auto; animation: scene-in .45s ease both; }
.scene-wrap:is([data-scene="M7-02"], [data-scene="M7-09"], [data-scene="M7-11"], [data-scene="M7-12"], [data-scene="M7-23"]) { width: min(1080px, 100%); }
.scene-wrap:is([data-scene-type="intertitle"], [data-scene-type="information-monitor"], [data-scene-type="lens-review"], [data-scene-type="contact-sheet"], [data-scene-type="claim-aperture"], [data-scene-type="gaze-frame"], [data-scene-type="gaze-comparison"], [data-scene-type="parallel-timeline"], [data-scene-type="axis-comparison"], [data-scene-type="projector-comparison"], [data-scene-type="counterevidence"], [data-scene-type="credit-roll"], [data-scene-type="screening-archive"], [data-scene-type="analysis-mixer"], [data-scene-type="shot-log"], [data-scene-type="evidence-tray"], [data-scene-type="assembly-bench"], [data-scene-type="cut-comparison"]) { width: min(1020px, 100%); }
@keyframes scene-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.scene-header { margin-bottom: 42px; }
.scene-header h2 { max-width: 820px; margin: 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(34px, 5vw, 62px); font-weight: 500; line-height: 1.12; letter-spacing: -.055em; }
.scene-lead { max-width: 700px; margin: 22px 0 0; color: var(--paper-muted); font-size: 17px; line-height: 1.8; }
.scene-index { color: #77736c; font-variant-numeric: tabular-nums; }

.contract-grid, .two-column, .three-column, .four-column, .choice-grid, .quality-grid, .info-grid { display: grid; gap: 14px; }
.contract-grid, .three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.four-column, .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card, .knowledge-card, .feedback, .prompt-card, .comparison-card, .input-panel, .quote-card, details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(26,29,38,.9), rgba(16,19,26,.82));
  box-shadow: var(--shadow);
}
.card, .knowledge-card, .prompt-card, .comparison-card, .input-panel, .quote-card { padding: 24px; }
.card-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 30px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); font-size: 11px; }
.card h3, .knowledge-card h3, .comparison-card h3 { margin: 0 0 9px; font-size: 16px; }
.card p, .knowledge-card p, .comparison-card p { margin: 0; color: var(--paper-muted); font-size: 14px; line-height: 1.7; }

.hero-statement { margin: 48px 0; padding: 42px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); text-align: center; }
.hero-statement p { margin: 0; color: var(--gold-pale); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(25px, 4vw, 41px); line-height: 1.45; }
.hero-statement small { display: block; margin-top: 16px; color: var(--paper-muted); }

.field { display: grid; gap: 9px; margin: 20px 0; }
fieldset.field { min-width: 0; padding: 0; border: 0; }
.field > label, .field-label { color: var(--paper); font-size: 13px; font-weight: 700; }
.field-help, .char-count, .hint { color: #89857e; font-size: 12px; line-height: 1.6; }
input[type="text"], input[type="number"], textarea, select, input[type="range"] {
  width: 100%;
}
input[type="text"], input[type="number"], textarea, select {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e1117;
  color: var(--paper);
}
input[type="text"], input[type="number"], select { min-height: 48px; padding: 0 14px; }
textarea { min-height: 120px; padding: 14px; resize: vertical; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: #5f5c57; }
input[type="range"] { accent-color: var(--gold); }
.range-value { display: inline-flex; min-width: 52px; justify-content: center; padding: 8px 12px; border-radius: 999px; background: rgba(202,168,106,.12); color: var(--gold-pale); font-weight: 800; }

.choice { min-height: 52px; padding: 14px 16px; text-align: left; color: var(--paper-muted); }
.choice.selected { border-color: var(--gold); background: rgba(202,168,106,.1); color: var(--paper); }
.choice strong { display: block; color: inherit; }
.choice small { display: block; margin-top: 5px; color: #827e77; line-height: 1.5; }
.choice.correct { border-color: var(--good); background: rgba(133,183,157,.08); }
.choice.incorrect { border-color: var(--danger); background: rgba(224,139,119,.08); }

.cinema-frame { position: relative; margin: 30px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.cinema-frame::before, .cinema-frame::after { content: ""; position: absolute; z-index: 4; left: 0; width: 100%; height: 5.4%; background: #020304; pointer-events: none; }
.cinema-frame::before { top: 0; }
.cinema-frame::after { bottom: 0; }
.cinema-frame img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cinema-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; text-align: left; }
.cinema-open::after { content: ""; position: absolute; z-index: 5; inset: 0; border: 0 solid rgba(228,201,146,.72); pointer-events: none; transition: border-width .18s ease, background .18s ease; }
.cinema-open:hover::after, .cinema-open:focus-visible::after { border-width: 2px; background: rgba(228,201,146,.035); }
.frame-label { position: absolute; z-index: 5; left: 16px; bottom: 9%; padding: 7px 10px; border-radius: 6px; background: rgba(0,0,0,.76); color: #ddd5c7; font-size: 10px; letter-spacing: .08em; }
.zoom-hint { position: absolute; z-index: 6; right: 16px; bottom: 9%; display: inline-flex; gap: 6px; align-items: center; padding: 7px 10px; border: 1px solid rgba(244,234,216,.22); border-radius: 999px; background: rgba(0,0,0,.72); color: #eee5d5; font-size: 10px; }
.image-caption { margin: -14px 0 30px; color: #77736c; font-size: 11px; line-height: 1.6; }

.simulation-image-shell { display: block; width: 100%; padding: 0; border: 0; background: #000; color: inherit; text-align: left; }
.simulation-frame .frame-label, .simulation-frame .zoom-hint { z-index: 8; }
.simulation-veil { position: absolute; z-index: 6; inset: 0; background: rgba(2,3,5,.7); pointer-events: none; }
.simulation-focus { position: absolute; z-index: 6; border: 1px solid rgba(228,201,146,.8); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(2,3,5,.68), 0 0 30px rgba(202,168,106,.2); pointer-events: none; transition: inset .42s ease, width .42s ease, height .42s ease; }
.simulation-step-1 .simulation-focus { top: 14%; left: 2%; width: 43%; height: 76%; }
.simulation-step-2 .simulation-focus { top: 52%; left: 31%; width: 35%; height: 38%; }
.simulation-step-3 .simulation-focus { top: 13%; left: 79%; width: 19%; height: 74%; }
.simulation-step-4 .simulation-focus { top: 14%; left: 39%; width: 27%; height: 70%; }
.simulation-panel { position: relative; margin: -6px 0 32px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(27,30,39,.96), rgba(14,17,23,.94)); }
.simulation-panel .eyebrow { margin-top: 24px; }
.simulation-panel h3 { max-width: 720px; min-height: 54px; margin: 0 0 22px; font-size: 18px; line-height: 1.65; }
.simulation-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.simulation-progress span { display: grid; place-items: center; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(244,234,216,.12); color: transparent; font-size: 0; }
.simulation-progress span.seen { background: var(--gold); }
.simulation-next { min-height: 44px; padding: 0 18px; border-color: var(--line-strong); color: var(--gold-pale); font-weight: 800; }

/* Observation frame · the image leads and the interface recedes. */
[data-scene="M7-02"] .scene-header { max-width: 760px; margin-bottom: 24px; }
[data-scene="M7-02"] .scene-header h2 { font-size: clamp(34px, 4.4vw, 54px); }
[data-scene="M7-02"] .scene-lead { margin-top: 14px; }
[data-scene="M7-02"] .simulation-figure { position: relative; margin: 0 0 42px; }
[data-scene="M7-02"] .simulation-frame {
  margin: 0;
  border-color: rgba(242,223,180,.26);
  box-shadow: 0 42px 120px rgba(0,0,0,.68), 0 0 42px rgba(242,223,180,.05);
}
[data-scene="M7-02"] .simulation-panel {
  z-index: 9;
  width: calc(100% - 44px);
  margin: -36px 22px 0;
  padding: 18px 20px;
  border-color: rgba(242,223,180,.22);
  border-radius: 8px;
  background: rgba(7,16,13,.9);
  box-shadow: 0 20px 60px rgba(0,0,0,.48);
  backdrop-filter: blur(22px);
}
[data-scene="M7-02"] .simulation-panel .eyebrow { margin: 18px 0 8px; }
[data-scene="M7-02"] .simulation-panel h3 { min-height: 0; margin-bottom: 14px; }
[data-scene="M7-02"] .simulation-progress { gap: 3px; }
[data-scene="M7-02"] .simulation-progress span { border-radius: 0; background: rgba(242,223,180,.12); }
[data-scene="M7-02"] .simulation-progress span.seen { background: var(--projector); box-shadow: 0 0 12px rgba(242,223,180,.35); }

body.overlay-open { overflow: hidden; }
.image-viewer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; }
.image-viewer[hidden] { display: none; }
.image-viewer-backdrop { position: absolute; inset: 0; background: rgba(1,2,4,.92); backdrop-filter: blur(16px); }
.image-viewer-dialog { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; width: min(1500px, 100%); height: min(940px, calc(100vh - 48px)); min-height: 0; overflow: hidden; border: 1px solid rgba(244,234,216,.2); border-radius: 16px; background: #080a0e; box-shadow: 0 40px 140px rgba(0,0,0,.75); }
.image-viewer-dialog:focus { outline: none; }
.image-viewer-header { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.image-viewer-header .eyebrow { display: block; margin-bottom: 4px; }
.image-viewer-header h2 { margin: 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 20px; font-weight: 600; }
.image-viewer-actions { display: flex; gap: 8px; }
.viewer-control, .viewer-close { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--paper-muted); cursor: pointer; }
.viewer-close { color: var(--paper); }
.viewer-close span { margin-left: 5px; font-size: 20px; line-height: 0; vertical-align: -2px; }
.image-viewer-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: auto; background: #020304; touch-action: pinch-zoom; }
.image-viewer-media { position: relative; width: min(100%, calc((100vh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; }
.image-viewer-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-viewer-stage.actual-size { display: block; }
.image-viewer-stage.actual-size .image-viewer-media { width: 1672px; height: 941px; max-width: none; margin: auto; }
.viewer-route-overlay { display: none; inset: 0; }
.image-viewer-stage.route-mode:not(.actual-size) .viewer-route-overlay { display: block; }
.image-viewer-stage.route-mode.actual-size .viewer-route-overlay { display: none; }
.image-viewer-description { margin: 0; padding: 14px 20px 0; color: var(--paper-muted); font-size: 12px; line-height: 1.65; }
.image-viewer-help { margin: 0; padding: 6px 20px 16px; color: #716e68; font-size: 10px; }

.feedback { margin: 26px 0; padding: 28px; border-color: rgba(133,183,157,.3); background: linear-gradient(145deg, rgba(33,49,43,.72), rgba(17,24,23,.8)); }
.feedback h3 { margin: 0 0 10px; color: #b9d9c8; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 25px; }
.feedback p, .feedback li { color: #c8c6bc; line-height: 1.75; }
.feedback.warning { border-color: rgba(224,139,119,.32); background: rgba(68,36,31,.25); }
.feedback.warning h3 { color: #edaa96; }
.answer-recall { padding: 16px 18px; border-left: 3px solid var(--gold); background: rgba(202,168,106,.06); color: var(--paper-muted); line-height: 1.7; white-space: pre-wrap; }

.sentence-builder, .draft-builder { margin: 24px 0 12px; padding: 22px 24px; border: 1px solid rgba(135,146,198,.28); border-radius: 16px; background: linear-gradient(145deg, rgba(39,43,64,.48), rgba(18,21,31,.76)); }
.sentence-builder > span { color: #b8c0ec; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sentence-builder p { margin: 12px 0 0; color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 18px; line-height: 1.75; }
.draft-builder blockquote { margin: 10px 0 14px; color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(19px, 2.6vw, 25px); line-height: 1.75; }
.draft-builder > p:last-child { margin: 0; color: var(--paper-muted); font-size: 12px; line-height: 1.65; }
.optional-write { border-style: dashed; background: rgba(255,255,255,.012); }
.optional-write summary { color: #8f8c86; font-size: 12px; font-weight: 600; }
.optional-write[open] summary { color: var(--gold-pale); }
.optional-write .field:last-child { margin-bottom: 0; }

.teacher-note { margin: 28px 0; padding: clamp(24px, 4vw, 38px); border: 1px solid rgba(202,168,106,.3); border-radius: 20px; background: linear-gradient(145deg, rgba(55,43,26,.46), rgba(20,21,24,.86)); }
.teacher-note h3 { margin: 0 0 14px; color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(24px, 3.2vw, 34px); }
.teacher-note > p:not(.eyebrow) { margin: 0; color: var(--paper-muted); font-size: 15px; line-height: 1.85; }
.teacher-note > p strong { color: var(--paper); }
.reading-equation { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; padding: 16px; border-radius: 12px; background: rgba(0,0,0,.24); }
.reading-equation span, .reading-equation strong { padding: 7px 10px; border: 1px solid rgba(244,234,216,.13); border-radius: 8px; background: rgba(255,255,255,.025); }
.reading-equation b { color: var(--gold); }
.reading-equation strong { color: #b9d9c8; }
.teaching-points .card { padding: 20px; }
.teaching-points .card > span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.teaching-points .card h3 { margin-top: 12px; font-size: 18px; }
.teaching-points .card p { font-size: 12px; line-height: 1.65; }
.term-explainer { margin: 26px 0 18px; padding: 16px 18px; border-left: 3px solid var(--indigo); background: rgba(135,146,198,.07); }
.term-explainer strong { color: #c8ceef; }
.term-explainer p { margin: 6px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.7; }
.question-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 10px; overflow: hidden; border: 1px solid rgba(135,146,198,.28); border-radius: 14px; background: rgba(135,146,198,.045); }
.question-guide > div { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 15px 16px; border-right: 1px solid rgba(135,146,198,.2); }
.question-guide > div:last-child { border-right: 0; }
.question-guide span { color: #8f98c6; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.question-guide strong { color: var(--paper); font-size: 12px; line-height: 1.55; }
.choice-note { margin: -7px 0 22px; color: var(--paper-muted); font-size: 12px; line-height: 1.7; }
.choice-note strong { color: var(--gold-pale); }

.matrix { width: 100%; margin: 26px 0; border-collapse: collapse; border: 1px solid var(--line); background: rgba(14,17,23,.8); }
.matrix th, .matrix td { padding: 14px 12px; border: 1px solid var(--line); text-align: left; font-size: 12px; vertical-align: top; }
.matrix th { color: var(--gold-pale); background: rgba(202,168,106,.06); }
.matrix tbody th { width: 38%; }
.matrix tbody th strong, .matrix tbody th small { display: block; }
.matrix tbody th small { margin-top: 6px; color: var(--paper-muted); font-weight: 400; line-height: 1.5; }
.matrix select { min-width: 110px; }
.matrix select:disabled { opacity: 1; color: var(--paper); -webkit-text-fill-color: var(--paper); }
.matrix-prompt { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); }
.matrix-prompt strong { color: var(--gold-pale); }
.matrix-prompt p { margin: 6px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.65; }
.matrix-answer { transition: background .2s ease; }
.matrix-answer.is-correct { background: rgba(133,183,157,.08); }
.matrix-answer.is-incorrect { background: rgba(224,139,119,.1); }
.grade-mark { display: block; margin-top: 8px; font-size: 10px; font-weight: 800; line-height: 1.45; }
.grade-mark.correct { color: #a8d1bc; }
.grade-mark.incorrect { color: #efae9d; }
.score-summary { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin: 2px 0 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(244,234,216,.12); }
.score-summary > strong { color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 46px; line-height: 1; white-space: nowrap; }
.score-summary > strong span { color: var(--paper-muted); font-size: 19px; }
.score-summary p { margin: 0; }
.matrix-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0; }
.matrix-reasons p { margin: 0; padding: 12px 14px; border: 1px solid rgba(244,234,216,.1); border-radius: 10px; background: rgba(0,0,0,.1); font-size: 12px; }
.matrix-reasons strong { color: var(--paper); }

details { margin: 12px 0; padding: 0; overflow: hidden; box-shadow: none; }
summary { padding: 18px 20px; cursor: pointer; color: var(--paper); font-weight: 700; }
details > div { padding: 0 20px 20px; color: var(--paper-muted); line-height: 1.75; }

.concept-brief {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 7px 22px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(202,168,106,.09), rgba(135,146,198,.04));
}
.concept-brief > span { grid-row: 1 / 3; align-self: center; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.concept-brief h3, .concept-brief p { margin: 0; }
.concept-brief h3 { color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(18px, 2vw, 24px); line-height: 1.45; }
.concept-brief p { color: var(--paper-muted); font-size: 12px; line-height: 1.65; }

.axis-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.axis-list li { min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); }
.axis-list strong, .axis-list span { display: block; }
.axis-list strong { color: var(--gold-pale); font-size: 12px; line-height: 1.45; }
.axis-list span { margin-top: 8px; color: var(--paper-muted); font-size: 11px; line-height: 1.55; }

.transfer-note, .next-step-note, .concept-line {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: 12px;
  background: rgba(135,146,198,.055);
}
.next-step-note { border-left-color: var(--gold); background: rgba(202,168,106,.045); }
.transfer-note strong, .next-step-note strong, .concept-line strong { color: var(--gold-pale); font-size: 12px; }
.transfer-note p, .next-step-note p { margin: 6px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.7; }
.concept-line { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }
.concept-line span { color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 17px; line-height: 1.55; }
#finalResult { scroll-margin-top: 96px; }

[data-scene="M7-05"] .scene-header { margin-bottom: 20px; }
[data-scene="M7-05"] .scene-header h2 { font-size: clamp(32px, 4vw, 50px); }
[data-scene="M7-05"] .scene-lead { margin-top: 12px; line-height: 1.6; }

.reorder-list { display: grid; gap: 10px; margin: 26px 0; }
.reorder-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); }
.event-letter { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(135,146,198,.13); color: #b8c0ec; font-weight: 800; }
.reorder-actions { display: flex; gap: 6px; }
.reorder-button { width: 34px; height: 34px; color: var(--paper-muted); }
.order-live { color: var(--indigo); font-size: 12px; }

/* Editing timeline · cards become clips inside an assembly bay. */
[data-scene="M7-09"] .scene-header { max-width: 800px; margin-bottom: 26px; }
[data-scene="M7-09"] .knowledge-card { border-left: 3px solid var(--timeline-blue); border-radius: 4px; box-shadow: none; }
.edit-bay {
  position: relative;
  margin: 30px 0;
  padding: 0 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(142,157,216,.28);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20,25,35,.98), rgba(8,13,16,.98));
  box-shadow: 0 34px 90px rgba(0,0,0,.48);
}
.edit-bay-header { display: flex; justify-content: space-between; gap: 16px; margin: 0 -18px; padding: 13px 18px; border-bottom: 1px solid rgba(142,157,216,.22); background: rgba(142,157,216,.07); }
.edit-bay-header span, .edit-ruler span, .order-live span { color: #8e99bc; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.edit-bay-header strong { color: #d9def2; font-size: 11px; }
.edit-ruler { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -18px; padding: 9px 18px 8px; border-bottom: 1px solid rgba(142,157,216,.15); background: repeating-linear-gradient(90deg, transparent 0, transparent calc(6.25% - 1px), rgba(142,157,216,.12) 6.25%); }
.edit-ruler span { position: relative; }
[data-scene="M7-09"] .reorder-list { position: relative; gap: 7px; margin: 16px 0 12px; padding-left: 18px; }
[data-scene="M7-09"] .reorder-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--timeline-blue); box-shadow: 0 0 10px rgba(142,157,216,.42); }
[data-scene="M7-09"] .reorder-card { min-height: 66px; border-color: rgba(142,157,216,.22); border-radius: 3px; background: linear-gradient(90deg, rgba(52,62,93,.56), rgba(22,29,40,.86)); box-shadow: inset 4px 0 0 #7889c9; }
[data-scene="M7-09"] .reorder-card.event-c { border-color: rgba(208,168,95,.52); background: linear-gradient(90deg, rgba(93,69,35,.74), rgba(38,30,24,.9)); box-shadow: inset 4px 0 0 var(--gold); }
[data-scene="M7-09"] .event-letter { border-radius: 3px; background: rgba(142,157,216,.16); color: #d9def2; }
[data-scene="M7-09"] .event-c .event-letter { background: rgba(208,168,95,.18); color: var(--gold-pale); }
[data-scene="M7-09"] .reorder-button { border-radius: 3px; }
[data-scene="M7-09"] .order-live { display: flex; justify-content: space-between; margin: 0; padding: 12px 14px; border: 1px solid rgba(142,157,216,.15); background: #080d11; color: #d9def2; font-variant-numeric: tabular-nums; }

.timeline-visual { position: relative; margin: 28px 0; padding: 32px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0b0d12; }
.timeline-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; margin: 14px 0; }
.timeline-label { color: var(--paper-muted); font-size: 12px; }
.timeline-track { display: flex; gap: 5px; align-items: center; min-height: 30px; }
.timeline-track span { flex: 1; min-width: 12px; height: 12px; border-radius: 2px; background: #a9a9a2; }
.timeline-track.reverse { flex-direction: row-reverse; }
.timeline-track.reverse span { background: linear-gradient(90deg, var(--copper), var(--gold)); }
.meeting-point { margin: 18px 0 0 106px; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--gold); font-size: 11px; text-align: center; }

.tag-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
.tag-button { padding: 10px 13px; color: var(--paper-muted); font-size: 12px; }
.tag-button.selected { border-color: var(--indigo); background: rgba(135,146,198,.12); color: #c8ceef; }

.route-frame { position: relative; }
.route-overlay { position: absolute; z-index: 6; inset: 5.4% 0; pointer-events: none; }
.route-overlay svg { width: 100%; height: 100%; }
.route-overlay polyline { fill: none; stroke: var(--copper); stroke-width: 1.1; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; }
.route-dot { fill: var(--gold-pale); stroke: #1a1310; stroke-width: .7; }
.route-label { position: absolute; padding: 6px 8px; border: 1px solid rgba(244,234,216,.24); border-radius: 6px; background: rgba(3,4,7,.78); color: var(--paper); font-size: clamp(8px, 1.3vw, 11px); }
.route-label.top { top: 12%; left: 60%; }
.route-label.middle { top: 48%; left: 42%; }
.route-label.bottom { right: 8%; bottom: 10%; }

/* Spatial route · the same image is read as a descent, not as another card. */
[data-scene="M7-11"] .scene-header, [data-scene="M7-12"] .scene-header { max-width: 820px; margin-bottom: 24px; }
.descent-stage { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 26px 0 34px; }
.descent-stage .cinema-frame { align-self: start; margin: 0; border-color: rgba(188,116,85,.36); box-shadow: 0 38px 110px rgba(0,0,0,.58); }
.descent-scale { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 430px; padding: 8px 0 34px 16px; color: #8f928b; writing-mode: vertical-rl; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.descent-scale::before { content: ""; position: absolute; top: 8px; bottom: 34px; left: 3px; width: 2px; background: linear-gradient(var(--projector), var(--copper) 52%, var(--wet-blue)); }
.descent-scale::after { content: "↓"; position: absolute; bottom: 12px; left: -1px; color: var(--copper); font-size: 14px; }
.descent-scale span { position: relative; }
.descent-scale span::before { content: ""; position: absolute; top: -7px; right: calc(100% + 10px); width: 9px; height: 1px; background: currentColor; }
[data-scene="M7-11"] .prompt-card { margin-left: 84px; border: 0; border-left: 3px solid var(--copper); border-radius: 0; box-shadow: none; background: rgba(188,116,85,.055); }
.route-stage .cinema-frame { border-color: rgba(208,168,95,.42); }
.route-stage .descent-scale::before { box-shadow: 0 0 18px rgba(188,116,85,.24); }

.mapping-row { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 10px; align-items: center; margin: 10px 0; }
.mapping-cell { min-height: 78px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.mapping-cell strong { display: block; margin-bottom: 6px; color: var(--gold-pale); }
.mapping-arrow { color: #706d67; text-align: center; }

.before-after { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 14px; align-items: stretch; margin: 26px 0; }
.before-after .quote-card { min-width: 0; box-shadow: none; }
.before-after .arrow { display: grid; place-items: center; color: var(--gold); font-size: 22px; }
.quote-card span { color: #817e79; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.quote-card blockquote { margin: 16px 0 0; color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 18px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Final cut · the result is an illuminated screening card, not ordinary feedback. */
[data-scene="M7-23"] .before-after { position: relative; padding-top: 28px; }
[data-scene="M7-23"] .before-after::before { content: "RUSH 01  ·  FINAL 24"; position: absolute; top: 0; left: 0; color: #807d74; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
[data-scene="M7-23"] .before-after .quote-card { border-radius: 3px; background: rgba(15,23,20,.72); }
.final-screening { position: relative; margin-top: 42px; padding: clamp(28px, 5vw, 54px); overflow: hidden; border: 1px solid rgba(242,223,180,.42); border-radius: 4px; background: radial-gradient(circle at 50% -15%, rgba(242,223,180,.16), transparent 45%), linear-gradient(150deg, rgba(23,43,35,.98), rgba(8,19,15,.98)); box-shadow: 0 45px 130px rgba(0,0,0,.62), inset 0 0 80px rgba(242,223,180,.025); }
.final-screening::before, .final-screening::after { content: ""; position: absolute; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242,223,180,.36), transparent); }
.final-screening::before { top: 18px; }
.final-screening::after { bottom: 18px; }
.final-screening-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.final-screening-header > span { color: #88877e; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.final-screening h3 { margin: 24px 0 18px; color: var(--projector); font-size: clamp(32px, 5vw, 54px); }
.final-thesis { padding: 24px 0; border-top: 1px solid rgba(242,223,180,.22); border-bottom: 1px solid rgba(242,223,180,.22); border-left: 0; background: transparent; color: #eee7d9; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(18px, 2.5vw, 25px); }
.final-screening-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
.final-screening-notes p { margin: 0; }
.final-screening-notes span, .final-screening-notes strong { display: block; }
.final-screening-notes span { margin-bottom: 9px; color: var(--gold); font-size: 9px; letter-spacing: .13em; }
.final-screening-notes strong { color: #c9cdc4; font-size: 13px; font-weight: 500; line-height: 1.75; }

/* Intertitles and take logs · the lesson opens like a screening, not a dashboard. */
[data-scene="M7-00"] .scene-header { max-width: 920px; margin-bottom: 34px; }
[data-scene="M7-00"] .scene-header h2 { font-size: clamp(46px, 7vw, 82px); }
.intertitle-contract { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.intertitle-contract .card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 22px; align-items: center; min-height: 112px; padding: 24px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.intertitle-contract .card-number { grid-row: 1 / 3; margin: 0; border: 0; color: var(--gold); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 25px; }
.intertitle-contract .card h3 { margin: 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(19px, 2.5vw, 28px); font-weight: 500; }
.intertitle-contract .card p { max-width: 720px; }
[data-scene="M7-00"] .hero-statement { margin: 58px 0; padding: 56px 0; text-align: left; }
[data-scene="M7-00"] .hero-statement p { max-width: 820px; font-size: clamp(35px, 5.5vw, 62px); }
[data-scene="M7-00"] .hero-statement small { letter-spacing: .16em; text-transform: uppercase; }
.take-sheet { position: relative; padding: 62px 34px 34px; border: 1px solid rgba(242,223,180,.22); background: repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(242,223,180,.035) 48px), rgba(14,25,21,.66); box-shadow: 0 32px 90px rgba(0,0,0,.3); }
.take-sheet::before { content: "TAKE 01  ·  FIRST THOUGHT  ·  DO NOT OVERWRITE"; position: absolute; top: 0; right: 0; left: 0; padding: 14px 18px; border-bottom: 1px solid rgba(242,223,180,.2); background: rgba(242,223,180,.055); color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
[data-scene="M7-01"] .take-sheet textarea { min-height: 150px; background: rgba(4,10,8,.76); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 18px; }

/* Information monitor and second-view lens. */
.information-monitor { margin-top: 24px; padding: 0 22px 24px; border: 1px solid rgba(116,151,132,.26); border-radius: 4px; background: linear-gradient(180deg, rgba(16,31,26,.95), rgba(7,14,12,.98)); box-shadow: 0 34px 100px rgba(0,0,0,.42); }
.monitor-header { display: flex; justify-content: space-between; gap: 20px; margin: 0 -22px 18px; padding: 13px 20px; border-bottom: 1px solid rgba(116,151,132,.2); background: rgba(116,151,132,.06); }
.monitor-header span { color: #82aa98; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.monitor-header strong { color: #c7d7cf; font-size: 11px; }
.information-monitor .answer-recall { border-left-color: #82aa98; background: rgba(116,151,132,.045); }
.information-monitor .matrix { margin-bottom: 0; border-color: rgba(116,151,132,.22); background: #09120f; }
.information-monitor .matrix th { background: rgba(116,151,132,.07); color: #c7d7cf; }
.information-monitor .matrix tbody tr { background: linear-gradient(90deg, rgba(116,151,132,.035), transparent 66%); }
.lens-stage { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(240px, .58fr); gap: 18px; align-items: stretch; margin-bottom: 28px; }
.lens-stage .cinema-frame { margin: 0; }
.lens-stage .answer-recall { display: grid; align-content: end; margin: 0; padding: 24px; border-left: 0; border-top: 3px solid var(--gold); background: linear-gradient(180deg, rgba(242,223,180,.025), rgba(208,168,95,.08)); }
[data-scene="M7-04"] .teacher-note { border-radius: 4px; background: linear-gradient(145deg, rgba(43,50,38,.76), rgba(13,22,19,.92)); }
[data-scene="M7-04"] .teaching-points .card { border-radius: 3px; box-shadow: none; }

/* Contact sheet and claim aperture. */
.contact-sheet { gap: 12px; padding: 12px; border: 1px solid rgba(242,223,180,.16); background: #080d0b; }
.contact-sheet li { position: relative; min-height: 150px; padding: 42px 15px 16px; border-radius: 2px; background: linear-gradient(160deg, rgba(242,223,180,.055), rgba(15,28,23,.9)); }
.contact-sheet li::before { content: ""; position: absolute; top: 9px; right: 9px; left: 9px; height: 7px; background: repeating-linear-gradient(90deg, rgba(242,223,180,.28) 0 8px, transparent 8px 16px); opacity: .55; }
.contact-sheet li:nth-child(even) { transform: translateY(10px); }
.claim-aperture { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 14px; align-items: center; margin: 10px 0 34px; padding: 24px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.claim-aperture span { color: var(--paper-muted); font-size: 11px; font-weight: 800; }
.claim-aperture span:last-child { color: var(--gold-pale); }
.claim-aperture i { height: 2px; background: linear-gradient(90deg, rgba(242,223,180,.18), var(--gold)); }
.boundary-panel { position: relative; border-radius: 3px; box-shadow: none; background: linear-gradient(90deg, rgba(242,223,180,.035), rgba(15,27,23,.9)); }
.boundary-panel[data-boundary="1"] { width: 88%; }
.boundary-panel[data-boundary="2"] { width: 94%; margin-left: auto; }
.boundary-panel[data-boundary="3"] { width: 100%; }
.boundary-panel::before { content: attr(data-boundary); position: absolute; top: 18px; right: 20px; color: rgba(242,223,180,.16); font-family: Iowan Old Style, serif; font-size: 46px; }

/* Hitchcock · divided windows and constrained gaze. */
.gaze-frames { position: relative; gap: 22px; margin: 28px 0; padding: 18px; border: 1px solid rgba(242,223,180,.16); background: #050a08; }
.gaze-frames::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 12px; transform: translateX(-50%); background: #050a08; pointer-events: none; }
.view-frame { position: relative; min-height: 260px; padding: 32px; overflow: hidden; border-radius: 1px; background: radial-gradient(circle at 50% 28%, rgba(242,223,180,.09), transparent 42%), linear-gradient(180deg, #18221d, #0b110f); box-shadow: inset 0 0 0 8px #0a0e0c, inset 0 0 0 9px rgba(242,223,180,.18); }
.view-frame::before, .view-frame::after { content: ""; position: absolute; z-index: 0; background: rgba(4,8,7,.76); pointer-events: none; }
.view-frame::before { top: 0; bottom: 0; left: 50%; width: 2px; }
.view-frame::after { top: 50%; right: 0; left: 0; height: 2px; }
.view-frame > * { position: relative; z-index: 1; }
.view-frame h3 { max-width: 360px; margin-top: 62px; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 23px; line-height: 1.42; }
[data-scene="M7-07"] .concept-line { border: 0; border-left: 3px solid var(--gold); border-radius: 0; background: rgba(208,168,95,.045); }
.contact-pair .view-frame:first-child { transform: translateY(8px); }
.contact-pair .view-frame:last-child { transform: translateY(-8px); }

/* Parallel time and crossed spatial axes. */
[data-scene="M7-10"] .timeline-visual { border-radius: 3px; border-color: rgba(142,157,216,.3); background: repeating-linear-gradient(90deg, rgba(142,157,216,.035) 0 1px, transparent 1px 9%), #080c12; }
[data-scene="M7-10"] .timeline-track span { height: 20px; border-radius: 1px; }
[data-scene="M7-10"] .meeting-point { padding: 14px; border: 1px solid rgba(208,168,95,.28); background: rgba(208,168,95,.05); }
.axis-cross { position: relative; gap: 28px; margin: 28px 0 38px; }
.axis-cross::before, .axis-cross::after { content: ""; position: absolute; z-index: 3; pointer-events: none; }
.axis-cross::before { top: 18px; bottom: 18px; left: 25%; width: 2px; background: linear-gradient(var(--projector), var(--copper), var(--wet-blue)); }
.axis-cross::after { top: 50%; right: 18px; left: 52%; height: 2px; background: linear-gradient(90deg, var(--copper), var(--gold)); }
.axis-cross .comparison-card { min-height: 280px; padding: 34px; border-radius: 3px; box-shadow: none; }
.axis-cross .comparison-card:first-child { padding-left: 32%; }
.axis-cross .comparison-card:last-child { padding-top: 28%; }
.axis-cross h3 { font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 30px; }

/* Comparison projector, counterevidence bench, and end credits. */
.projector-comparison { margin: 30px 0; padding: 0 22px 22px; border: 1px solid rgba(242,223,180,.2); border-radius: 4px; background: radial-gradient(circle at 50% -20%, rgba(242,223,180,.1), transparent 48%), #08100d; box-shadow: 0 34px 90px rgba(0,0,0,.42); }
.projector-comparison > header { display: flex; justify-content: space-between; gap: 18px; margin: 0 -22px 18px; padding: 13px 20px; border-bottom: 1px solid rgba(242,223,180,.16); }
.projector-comparison > header span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.projector-comparison > header strong { color: var(--paper-muted); font-size: 11px; }
.projector-comparison .mapping-row { grid-template-columns: 1fr 24px 1fr 24px 1fr; }
.projector-comparison .mapping-cell { border-radius: 2px; background: rgba(242,223,180,.025); }
.counterevidence-bench { position: relative; }
.theory-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 34px; }
.theory-labels span { position: relative; display: grid; place-items: center; min-height: 150px; overflow: hidden; border: 1px solid var(--line); color: rgba(242,234,216,.42); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(28px, 4.4vw, 48px); }
.theory-labels span::after { content: ""; position: absolute; width: 120%; height: 1px; transform: rotate(-12deg); background: rgba(224,139,119,.48); }
.theory-labels span.active { border-color: rgba(224,139,119,.56); color: var(--paper); background: rgba(224,139,119,.055); }
.counterevidence-bench > .sentence-builder { border-radius: 3px; }
.credit-workbench { position: relative; }
.credit-roll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0 34px; border-top: 1px solid rgba(242,223,180,.18); border-bottom: 1px solid rgba(242,223,180,.18); background: #050907; }
.credit-roll span { display: grid; align-content: end; min-height: 188px; padding: 20px 14px; border-right: 1px solid rgba(242,223,180,.1); opacity: .44; }
.credit-roll span:last-child { border-right: 0; }
.credit-roll span.active { opacity: 1; background: linear-gradient(180deg, transparent, rgba(208,168,95,.12)); box-shadow: inset 0 -3px 0 var(--gold); }
.credit-roll small, .credit-roll strong { display: block; }
.credit-roll small { margin-bottom: 10px; color: var(--gold); font-size: 10px; font-weight: 800; }
.credit-roll strong { color: var(--paper); font-size: 12px; line-height: 1.6; }

/* Personal archive → mixer → shot log → evidence tray → assembly bench. */
.screening-archive { position: relative; padding: 28px; border: 1px solid rgba(116,151,132,.25); background: repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(116,151,132,.025) 48px), rgba(10,20,17,.72); }
.archive-ticket { display: flex; justify-content: space-between; gap: 20px; margin: -28px -28px 28px; padding: 16px 20px; border-bottom: 1px dashed rgba(242,223,180,.28); background: rgba(242,223,180,.055); }
.archive-ticket span, .archive-ticket b { color: var(--gold); font-size: 9px; letter-spacing: .15em; }
.screening-archive > .answer-recall { border: 1px dashed rgba(208,168,95,.36); border-left: 3px solid var(--gold); background: rgba(208,168,95,.04); }
.analysis-mixer { padding: 0 22px 24px; border: 1px solid rgba(142,157,216,.24); border-radius: 4px; background: linear-gradient(180deg, rgba(20,25,35,.82), rgba(8,15,13,.9)); }
.mixer-board { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 14px; align-items: center; margin: 0 -22px 26px; padding: 18px 22px; border-bottom: 1px solid rgba(142,157,216,.2); background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(142,157,216,.08) 10%); }
.mixer-board span { color: #aeb7de; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.mixer-board i { height: 2px; background: linear-gradient(90deg, #7889c9, var(--gold)); }
.shot-log { position: relative; padding: 28px; border: 1px solid rgba(242,223,180,.22); background: repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(242,223,180,.035) 40px), rgba(10,20,17,.82); }
.shot-log::before { content: "SHOT LOG  ·  SCENE / FACT / EFFECT / STATUS"; display: block; margin: -28px -28px 28px; padding: 15px 18px; border-bottom: 1px solid rgba(242,223,180,.18); color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.shot-log .prompt-card { border: 0; border-left: 3px solid var(--gold); border-radius: 0; background: rgba(208,168,95,.045); box-shadow: none; }
.shot-log textarea { min-height: 210px; background: rgba(4,10,8,.78); }
.evidence-tray { padding: 0 22px 24px; border: 1px solid rgba(188,116,85,.27); background: linear-gradient(180deg, rgba(40,25,20,.52), rgba(9,17,14,.94)); }
.tray-header { display: flex; justify-content: space-between; gap: 20px; margin: 0 -22px 24px; padding: 14px 20px; border-bottom: 1px solid rgba(188,116,85,.23); }
.tray-header span { color: #d39073; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.tray-header strong { color: var(--paper); font-size: 11px; }
.evidence-tray .field { padding: 16px; border: 1px solid rgba(242,223,180,.11); background: rgba(0,0,0,.12); }
.evidence-tray .field .field { padding: 0; border: 0; background: transparent; }
.assembly-console { position: relative; }
.assembly-console > .input-panel { border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(142,157,216,.035) 0 1px, transparent 1px 25%), rgba(16,23,30,.88); }
.assembly-console > .input-panel .two-column { gap: 1px; background: rgba(142,157,216,.14); }
.assembly-console > .input-panel .two-column p { margin: 0; padding: 18px; background: #10171b; }
.assembly-console .draft-builder { position: relative; border-radius: 3px; border-color: rgba(142,157,216,.4); background: linear-gradient(145deg, rgba(41,48,74,.62), rgba(14,22,27,.92)); }
.assembly-console .draft-builder::before { content: "ROUGH CUT"; position: absolute; top: 18px; right: 20px; color: rgba(174,183,222,.48); font-size: 9px; font-weight: 800; letter-spacing: .14em; }

/* Rush → rough cut → final cut. */
.cut-bench { position: relative; padding-top: 26px; }
.cut-bench::before { content: "RUSH 01  ·  ROUGH CUT 22  ·  FINAL CUT 23"; position: absolute; top: 0; color: #84847c; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.cut-bench .before-after .quote-card { border-radius: 3px; background: #0a120f; }
.cut-bench > .field { margin-top: 32px; padding: 24px; border: 1px solid rgba(208,168,95,.28); background: rgba(208,168,95,.035); }
.cut-bench > .field textarea { min-height: 210px; background: rgba(4,10,8,.82); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 17px; }

.source-list { margin: 18px 0 0; padding-left: 18px; }
.source-list li { margin: 8px 0; color: var(--paper-muted); font-size: 12px; line-height: 1.6; }
.source-list a { color: var(--gold-pale); }

/* Optional tutor and perspective review layer. */
.contextual-tutor {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: -12px 0 30px;
  padding: 14px 16px;
  border: 1px solid rgba(135,146,198,.26);
  border-left: 3px solid var(--indigo);
  border-radius: 10px;
  background: rgba(135,146,198,.045);
  color: var(--paper-muted);
  text-align: left;
  cursor: pointer;
}
.contextual-tutor > span { display: grid; gap: 4px; font-size: 12px; line-height: 1.55; }
.contextual-tutor b { color: #9ca5d4; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.contextual-tutor strong { color: #c8ceef; font-size: 11px; white-space: nowrap; }

.feature-layer { position: fixed; z-index: 110; inset: 0; }
.feature-layer[hidden] { display: none; }
.feature-backdrop { position: absolute; inset: 0; background: rgba(1,4,4,.82); backdrop-filter: blur(12px); }
.feature-header { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.feature-header h2 { margin: 6px 0 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.feature-header p { margin: 8px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.55; }
.feature-status { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.feature-close { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--paper-muted); cursor: pointer; }
.feature-close span { margin-left: 4px; font-size: 18px; }
.feature-primary, .feature-secondary { min-height: 44px; padding: 0 16px; font-size: 12px; font-weight: 800; }
.feature-primary { border-color: var(--gold); background: var(--gold); color: #171109; }
.feature-primary:hover:not(:disabled) { background: var(--gold-pale); }
.feature-secondary { color: var(--paper); }
.text-action { min-height: 40px; padding: 0 10px; border-color: transparent; color: var(--paper-muted); font-size: 11px; }
.text-action.danger { color: #dfa08f; }

.tutor-layer { display: flex; justify-content: flex-end; }
.tutor-panel { position: relative; display: grid; grid-template-rows: auto auto auto minmax(160px, 1fr) auto; width: min(520px, 100%); height: 100%; overflow: hidden; border-left: 1px solid rgba(135,146,198,.25); background: linear-gradient(180deg, #10151c, #08100d); box-shadow: -30px 0 100px rgba(0,0,0,.55); }
.tutor-panel:focus, .perspective-hub:focus, .publish-dialog:focus { outline: none; }
.tutor-context { display: grid; gap: 5px; margin: 20px 24px 12px; padding: 16px 18px; border: 1px solid rgba(135,146,198,.22); border-left: 3px solid var(--indigo); background: rgba(135,146,198,.055); }
.tutor-context span { color: #929bc7; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.tutor-context strong { color: var(--paper); font-size: 14px; }
.tutor-context p { margin: 0; color: var(--paper-muted); font-size: 11px; line-height: 1.55; }
.tutor-followups { display: grid; gap: 5px; margin: 0 24px 10px; }
.tutor-followups[hidden] { display: none; }
.tutor-followups > span { color: #aeb6df; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.tutor-suggestions { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.tutor-suggestions button { flex: 0 0 auto; max-width: 260px; padding: 8px 11px; border: 1px solid rgba(135,146,198,.3); border-radius: 999px; background: rgba(135,146,198,.08); color: #d4d9f6; font-size: 10px; line-height: 1.4; cursor: pointer; }
.tutor-suggestions.is-single { overflow: visible; }
.tutor-suggestions.is-single button { display: grid; flex: 1 1 auto; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; max-width: none; min-height: 46px; padding: 8px 11px; border-radius: 10px; background: linear-gradient(100deg, rgba(135,146,198,.17), rgba(135,146,198,.075)); text-align: left; }
.tutor-suggestions.is-single button span { color: #aeb6df; font-size: 8px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.tutor-suggestions.is-single button strong { overflow: hidden; color: var(--paper); font-size: 10px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.tutor-suggestions.is-single button b { color: var(--gold-pale); font-size: 15px; }
.tutor-reflection-slot:empty { display: none; }
.tutor-conversation { display: grid; align-content: start; gap: 12px; overflow-y: auto; padding: 8px 24px 24px; }
.tutor-empty { padding: 20px; border: 1px dashed var(--line); color: var(--paper-muted); }
.tutor-empty strong { color: var(--paper); font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 18px; }
.tutor-empty p { margin: 8px 0 0; font-size: 12px; line-height: 1.65; }
.tutor-message { max-width: 90%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.tutor-message.learner { justify-self: end; border-color: rgba(208,168,95,.2); background: rgba(208,168,95,.055); }
.tutor-message.tutor { border-color: rgba(135,146,198,.22); background: rgba(135,146,198,.055); }
.tutor-message.error { border-color: rgba(215,119,100,.28); background: rgba(215,119,100,.07); }
.tutor-message span { color: #929bc7; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.tutor-message.learner span { color: var(--gold); }
.tutor-message p { margin: 7px 0 0; color: var(--paper); font-size: 13px; line-height: 1.7; white-space: pre-line; }
.tutor-reflection { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid rgba(208,168,95,.27); border-left: 3px solid var(--gold); border-radius: 10px; background: linear-gradient(110deg, rgba(73,53,25,.25), rgba(16,20,18,.92)); }
.tutor-reflection > div { display: grid; gap: 3px; min-width: 0; }
.tutor-reflection span { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.tutor-reflection strong { display: -webkit-box; overflow: hidden; color: var(--paper); font-size: 12px; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tutor-reflection > button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(208,168,95,.38); border-radius: 8px; background: rgba(208,168,95,.09); color: var(--gold-pale); font-size: 9px; font-weight: 800; cursor: pointer; }
.tutor-reflection.is-answering { border-color: rgba(208,168,95,.48); background: rgba(73,53,25,.35); }
.tutor-composer { padding: 18px 24px 20px; border-top: 1px solid var(--line); background: rgba(5,10,9,.94); }
.tutor-composer label { display: block; margin-bottom: 8px; color: var(--paper); font-size: 12px; font-weight: 800; }
.tutor-composer textarea { width: 100%; min-height: 82px; resize: vertical; }
.tutor-composer-actions { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-top: 10px; }
.tutor-composer-actions p { margin: 0; color: #827f79; font-size: 10px; line-height: 1.5; }

.perspective-module { margin: 36px 0 12px; overflow: hidden; border: 1px solid rgba(133,183,157,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(20,39,33,.56), rgba(10,18,17,.9)); }
.perspective-module-header { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid rgba(133,183,157,.14); }
.perspective-module-header > div > span { color: #93c4aa; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.perspective-module-header h3 { margin: 6px 0 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 24px; }
.perspective-module-header p { margin: 8px 0 0; color: var(--paper-muted); font-size: 11px; line-height: 1.6; }
.review-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(208,168,95,.25); border-radius: 999px; color: var(--gold); font-size: 9px; font-weight: 800; }
.perspective-module-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 24px; }
.publish-state { margin: 0 24px 18px; padding: 10px 12px; border-left: 2px solid var(--good); background: rgba(133,183,157,.06); color: var(--paper-muted); font-size: 11px; line-height: 1.55; }
.publish-state strong { color: #b9d9c8; }
.perspective-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 24px 24px; }
.preview-context { grid-column: 1 / -1; display: grid; gap: 5px; padding: 14px 16px; border-left: 3px solid var(--good); background: rgba(133,183,157,.05); }
.preview-context span { color: #93c4aa; font-size: 9px; font-weight: 800; }
.preview-context strong { color: var(--paper); font-size: 12px; line-height: 1.55; }
.perspective-card { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(244,234,216,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(24,30,31,.96), rgba(10,17,16,.94)); }
.perspective-card.own { border-color: rgba(208,168,95,.38); background: linear-gradient(145deg, rgba(49,39,24,.5), rgba(12,18,16,.96)); }
.perspective-card header, .publish-preview-card header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.perspective-card header div, .publish-preview-card header div { display: grid; gap: 3px; }
.perspective-card header strong, .publish-preview-card header strong { color: var(--paper); font-size: 12px; }
.perspective-card header span, .publish-preview-card header span { color: #7f8f87; font-size: 9px; }
.perspective-card header b, .publish-preview-card header b { color: #93c4aa; font-size: 9px; font-weight: 800; }
.perspective-card > p, .publish-preview-card > p { margin: 0; color: #d4d0c6; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 16px; line-height: 1.72; }
.perspective-card.compact { padding: 16px; }
.perspective-card.compact > p { font-size: 14px; }
.perspective-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.perspective-evidence span { padding: 5px 8px; border-radius: 999px; background: rgba(133,183,157,.08); color: #a9cdb9; font-size: 9px; }
.perspective-social-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(244,234,216,.08); }
.perspective-social-actions button { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: rgba(255,255,255,.025); color: #9b9892; cursor: pointer; }
.perspective-social-actions button span { font-size: 18px; line-height: 1; }
.perspective-social-actions button b { font-size: 10px; }
.perspective-social-actions button.selected { border-color: rgba(208,168,95,.3); background: rgba(208,168,95,.07); color: var(--gold-pale); }
.perspective-social-actions [data-like-post].selected { border-color: rgba(224,139,119,.35); background: rgba(224,139,119,.08); color: #efa997; }
.perspective-comments { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(244,234,216,.08); }
.comment-list { display: grid; gap: 8px; }
.session-comment { padding: 12px 13px; border-left: 2px solid rgba(135,146,198,.45); background: rgba(135,146,198,.045); }
.session-comment header { display: flex; align-items: flex-start; justify-content: space-between; }
.session-comment header div { display: grid; gap: 2px; }
.session-comment header strong { color: #c8ceef; font-size: 10px; }
.session-comment header span { color: #777b88; font-size: 8px; }
.session-comment header button { padding: 3px 0; border: 0; background: transparent; color: #8d8982; font-size: 9px; cursor: pointer; }
.session-comment p { margin: 8px 0 0; color: #cbc7bd; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.comment-empty { margin: 0; color: #88857f; font-size: 10px; line-height: 1.6; }
.comment-composer { display: grid; gap: 8px; }
.comment-composer textarea { width: 100%; min-height: 76px; padding: 11px 12px; resize: vertical; border: 1px solid rgba(244,234,216,.13); border-radius: 10px; background: rgba(0,0,0,.18); color: var(--paper); font-size: 11px; line-height: 1.6; }
.comment-composer > div { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.comment-composer > div span { color: #7f7c76; font-size: 9px; }
.comment-composer button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(208,168,95,.34); border-radius: 9px; background: rgba(208,168,95,.1); color: var(--gold-pale); font-size: 10px; font-weight: 800; cursor: pointer; }
.feed-more-link { grid-column: 1 / -1; justify-self: start; padding: 12px 0; border: 0; background: transparent; color: #b9d9c8; font-weight: 800; cursor: pointer; }

.perspective-layer { display: grid; place-items: center; padding: 24px; }
.perspective-hub { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1120px, 100%); height: min(900px, calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(133,183,157,.24); border-radius: 18px; background: #09110f; box-shadow: 0 38px 140px rgba(0,0,0,.7); }
.perspective-hub-body { overflow-y: auto; padding: 20px 24px 40px; }
.review-disclosure { display: flex; gap: 10px 18px; align-items: baseline; margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(208,168,95,.22); background: rgba(208,168,95,.045); }
.review-disclosure strong { color: var(--gold); font-size: 10px; }
.review-disclosure span { color: var(--paper-muted); font-size: 10px; line-height: 1.5; }
.feed-filters { position: sticky; z-index: 2; top: -20px; display: flex; gap: 7px; overflow-x: auto; margin: 0 -24px 20px; padding: 14px 24px; background: rgba(9,17,15,.94); backdrop-filter: blur(16px); }
.feed-filters button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper-muted); font-size: 10px; cursor: pointer; }
.feed-filters button.selected { border-color: rgba(133,183,157,.38); background: rgba(133,183,157,.08); color: #b9d9c8; }
.perspective-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feed-reading-note { grid-column: 1 / -1; display: grid; gap: 5px; margin-bottom: 4px; padding: 14px 16px; border-left: 3px solid var(--good); background: rgba(133,183,157,.045); }
.feed-reading-note strong { color: #a9cdb9; font-size: 10px; }
.feed-reading-note span { color: var(--paper-muted); font-size: 10px; line-height: 1.55; }
.feed-load-more { grid-column: 1 / -1; min-height: 48px; border: 1px solid rgba(133,183,157,.28); border-radius: 10px; background: rgba(133,183,157,.05); color: #b9d9c8; font-weight: 800; cursor: pointer; }
.feed-end { grid-column: 1 / -1; padding: 20px; color: #77736c; font-size: 11px; text-align: center; }
.feed-locked { grid-column: 1 / -1; display: grid; place-items: center; min-height: 360px; padding: 40px; text-align: center; }
.feed-locked > span { color: var(--gold); font-size: 34px; }
.feed-locked h3 { margin: 14px 0 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 27px; }
.feed-locked p { max-width: 480px; margin: 10px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.7; }

.publish-layer { display: grid; place-items: center; padding: 24px; }
.publish-dialog { position: relative; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; border: 1px solid rgba(208,168,95,.28); border-radius: 18px; background: #0b1210; box-shadow: 0 38px 140px rgba(0,0,0,.7); }
.publish-step { padding: 24px; }
.step-label { margin: 0 0 14px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.nickname-ticket { display: grid; gap: 10px; padding: 24px; border: 1px solid rgba(208,168,95,.3); background: radial-gradient(circle at 80% 0, rgba(208,168,95,.12), transparent 44%), rgba(208,168,95,.04); }
.nickname-ticket span { color: var(--paper-muted); font-size: 11px; }
.nickname-ticket strong { font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: clamp(28px, 5vw, 42px); font-weight: 500; }
.privacy-points { margin: 18px 0; padding-left: 20px; color: var(--paper-muted); font-size: 11px; line-height: 1.75; }
.publish-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.publish-login-note { display: grid; gap: 4px; margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--indigo); background: rgba(135,146,198,.055); }
.publish-login-note strong { color: #c8ceef; font-size: 11px; }
.publish-login-note span { color: var(--paper-muted); font-size: 10px; }
.publish-variant { display: flex; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.publish-variant legend { width: 100%; margin-bottom: 8px; color: var(--paper); font-size: 11px; font-weight: 800; }
.publish-variant label { display: flex; gap: 7px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper-muted); font-size: 10px; cursor: pointer; }
.publish-preview-card { display: grid; gap: 14px; padding: 20px; border: 1px solid rgba(133,183,157,.2); background: rgba(133,183,157,.035); }
.publish-preview-card > small { color: #93c4aa; font-size: 10px; line-height: 1.55; }
.publish-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 18px; padding: 14px; border: 1px solid var(--line); color: var(--paper); font-size: 12px; line-height: 1.55; cursor: pointer; }
.publish-consent input { margin-top: 2px; }
.publish-withdrawal { margin: 9px 0 0; color: #817e79; font-size: 10px; }
.publish-done { display: grid; place-items: center; min-height: 300px; text-align: center; }
.done-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(133,183,157,.4); border-radius: 50%; background: rgba(133,183,157,.08); color: #b9d9c8; font-size: 24px; }
.publish-done h3 { margin: 14px 0 0; font-family: Iowan Old Style, "Noto Serif KR", serif; font-size: 25px; }
.publish-done p { max-width: 460px; color: var(--paper-muted); font-size: 12px; line-height: 1.65; }

.bottom-bar {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 282px;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(190px, 270px);
  gap: 16px;
  align-items: center;
  min-height: 84px;
  padding: 14px clamp(24px, 5vw, 72px);
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 14, .9);
  backdrop-filter: blur(24px);
}
.back-button, .primary-button { min-height: 50px; padding: 0 20px; font-weight: 800; }
.back-button { color: var(--paper-muted); }
.primary-button { border-color: var(--gold); background: var(--gold); color: #16120b; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--gold-pale); }
.bottom-context { min-width: 0; }
.bottom-context span { display: block; color: var(--gold); font-size: 10px; font-weight: 800; }
.bottom-context strong { display: block; margin-top: 4px; overflow: hidden; color: var(--paper-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.tutor-remote { position: fixed; z-index: 55; right: 28px; bottom: 104px; display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 8px 17px 8px 9px; border: 1px solid rgba(135,146,198,.4); border-radius: 999px; background: linear-gradient(145deg, #20283a, #111924); color: #edf0ff; box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.07); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tutor-remote:hover { transform: translateY(-2px); border-color: rgba(174,183,222,.72); box-shadow: 0 22px 64px rgba(0,0,0,.56), 0 0 0 4px rgba(135,146,198,.07); }
.tutor-remote-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(174,183,222,.34); border-radius: 50%; background: rgba(135,146,198,.12); }
.tutor-remote-icon svg { width: 22px; height: 22px; fill: none; stroke: #c8ceef; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.tutor-remote-copy { display: grid; gap: 2px; text-align: left; }
.tutor-remote-copy small { color: #929bc7; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.tutor-remote-copy strong { font-size: 11px; white-space: nowrap; }
.tutor-remote-short { display: none; }

.toast { position: fixed; z-index: 80; right: 28px; bottom: 178px; max-width: 360px; padding: 13px 16px; transform: translateY(12px); border: 1px solid var(--line-strong); border-radius: 10px; background: #211b14; color: var(--paper); box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { transform: none; opacity: 1; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 22px; }
  .progress-cluster { grid-column: 1 / -1; grid-row: 2; width: 100%; padding-bottom: 9px; }
  .topbar { height: 94px; align-content: center; }
  .app-shell { display: block; }
  .act-rail { position: static; width: 100%; height: auto; padding: 30px 22px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .act-rail h1, .rail-summary, .rail-note { display: none; }
  .act-rail nav { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .act-button { flex: 0 0 auto; width: auto; grid-template-columns: auto 1fr; white-space: nowrap; }
  .lesson { padding: 54px 22px 150px; }
  .bottom-bar { left: 0; grid-template-columns: 82px 1fr; padding: 12px 22px; }
  .bottom-context { display: none; }
  .primary-button { min-width: 0; }
  .axis-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body::before { left: 0; }
  .top-actions { gap: 5px; }
  .top-action { padding: 0 9px; }
  .quiet-button { padding-right: 7px; padding-left: 7px; }
  .tutor-remote { right: 22px; }
}

@media (max-width: 680px) {
  .scene-header h2 { font-size: 38px; }
  .scene-lead { font-size: 15px; }
  .concept-brief { grid-template-columns: 1fr; }
  .concept-brief > span { grid-row: auto; }
  .axis-list { grid-template-columns: 1fr; }
  .axis-list li { min-height: 0; }
  .concept-line { grid-template-columns: 1fr; gap: 7px; }
  .contract-grid, .two-column, .three-column, .four-column, .choice-grid, .quality-grid, .info-grid { grid-template-columns: 1fr; }
  .question-guide { grid-template-columns: 1fr; }
  .question-guide > div { border-right: 0; border-bottom: 1px solid rgba(135,146,198,.2); }
  .question-guide > div:last-child { border-bottom: 0; }
  .card { padding: 20px; }
  .card-number { margin-bottom: 16px; }
  .hero-statement { margin: 30px 0; padding: 28px 14px; }
  .hero-statement p { font-size: 26px; }
  .matrix { display: block; overflow-x: auto; }
  .matrix-reasons { grid-template-columns: 1fr; }
  .score-summary { grid-template-columns: 1fr; gap: 10px; }
  .mapping-row { grid-template-columns: 1fr; }
  .mapping-arrow { transform: rotate(90deg); }
  .before-after { grid-template-columns: 1fr; }
  .before-after .arrow { transform: rotate(90deg); }
  .reorder-card { grid-template-columns: 36px minmax(0,1fr); }
  .reorder-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .timeline-row { grid-template-columns: 1fr; }
  .meeting-point { margin-left: 0; }
  [data-scene="M7-02"] .simulation-panel { width: 100%; margin: -20px 0 32px; padding: 18px 24px; }
  .edit-bay-header { display: grid; }
  .descent-stage { grid-template-columns: 1fr; gap: 8px; }
  .descent-scale { flex-direction: row; min-height: 36px; padding: 0 20px 10px; writing-mode: horizontal-tb; }
  .descent-scale::before { top: auto; right: 20px; bottom: 3px; left: 20px; width: auto; height: 2px; background: linear-gradient(90deg, var(--projector), var(--copper) 52%, var(--wet-blue)); }
  .descent-scale::after { right: 2px; bottom: -3px; left: auto; transform: rotate(-90deg); }
  .descent-scale span::before { display: none; }
  [data-scene="M7-11"] .prompt-card { margin-left: 0; }
  .final-screening-notes { grid-template-columns: 1fr; gap: 18px; }
  [data-scene="M7-00"] .scene-header h2 { font-size: 46px; }
  .intertitle-contract .card { grid-template-columns: 42px 1fr; min-height: 96px; }
  .intertitle-contract .card-number { font-size: 20px; }
  [data-scene="M7-00"] .hero-statement { margin: 38px 0; padding: 38px 0; }
  .take-sheet { padding: 58px 18px 22px; }
  .take-sheet::before { line-height: 1.5; }
  .monitor-header, .projector-comparison > header, .tray-header { display: grid; }
  .information-monitor { padding-right: 14px; padding-left: 14px; }
  .monitor-header { margin-right: -14px; margin-left: -14px; }
  .lens-stage { grid-template-columns: 1fr; }
  .lens-stage .answer-recall { min-height: 150px; }
  .contact-sheet li { min-height: 116px; transform: none !important; }
  .claim-aperture { gap: 7px; padding: 18px 4px; }
  .claim-aperture span { font-size: 9px; }
  .boundary-panel { width: 100% !important; }
  .gaze-frames { padding: 10px; }
  .gaze-frames::before { display: none; }
  .view-frame { min-height: 230px; padding: 26px; }
  .view-frame h3 { margin-top: 44px; font-size: 21px; }
  .contact-pair .view-frame { transform: none !important; }
  .axis-cross::before, .axis-cross::after { display: none; }
  .axis-cross .comparison-card { min-height: 210px; padding: 28px !important; }
  .projector-comparison { padding-right: 14px; padding-left: 14px; }
  .projector-comparison > header { margin-right: -14px; margin-left: -14px; }
  .projector-comparison .mapping-row { grid-template-columns: 1fr; }
  .theory-labels { gap: 6px; }
  .theory-labels span { min-height: 112px; font-size: 24px; }
  .credit-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-roll span { min-height: 116px; border-bottom: 1px solid rgba(242,223,180,.1); }
  .credit-roll span:last-child { grid-column: 1 / -1; }
  .screening-archive { padding: 18px; }
  .archive-ticket { margin: -18px -18px 22px; }
  .analysis-mixer { padding-right: 14px; padding-left: 14px; }
  .mixer-board { gap: 7px; margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  .mixer-board span { font-size: 8px; }
  .shot-log { padding: 18px; }
  .shot-log::before { margin: -18px -18px 22px; line-height: 1.5; }
  .evidence-tray { padding-right: 14px; padding-left: 14px; }
  .tray-header { margin-right: -14px; margin-left: -14px; }
  .evidence-tray .field { padding: 12px; }
  .assembly-console > .input-panel .two-column { gap: 1px; }
  .cut-bench > .field { padding: 16px; }
  .quiet-button { padding: 8px; }
  .wordmark strong { font-size: 14px; }
  .zoom-hint { right: 10px; bottom: 10%; padding: 6px 8px; }
  .image-viewer { padding: 0; }
  .image-viewer-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .image-viewer-header { align-items: flex-start; padding: 14px 16px; }
  .image-viewer-header h2 { max-width: 170px; font-size: 16px; }
  .image-viewer-actions { gap: 5px; }
  .viewer-control, .viewer-close { min-height: 38px; padding: 0 10px; font-size: 11px; }
  .image-viewer-description { padding: 12px 16px 0; }
  .image-viewer-help { padding: 6px 16px 14px; }
  .wordmark span { display: none; }
  .top-actions { max-width: 68vw; overflow-x: auto; }
  .top-action, .quiet-button { min-height: 34px; font-size: 10px; }
  .tutor-remote { right: 16px; bottom: 100px; min-height: 52px; padding: 6px 13px 6px 7px; }
  .tutor-remote-icon { width: 38px; height: 38px; }
  .tutor-remote-copy small, .tutor-remote-wide { display: none; }
  .tutor-remote-short { display: inline; }
  .toast { right: 16px; bottom: 164px; left: 16px; max-width: none; }
  .contextual-tutor { display: grid; gap: 10px; }
  .contextual-tutor strong { white-space: normal; }
  .tutor-panel { width: 100%; }
  .feature-header { padding: 16px; }
  .feature-header h2 { font-size: 23px; }
  .tutor-context { margin: 10px 16px 8px; padding: 10px 12px; }
  .tutor-context p { display: none; }
  .tutor-followups { margin-right: 16px; margin-bottom: 8px; margin-left: 16px; }
  .tutor-suggestions.is-single button { min-height: 42px; }
  .tutor-conversation { gap: 8px; padding: 4px 16px 12px; }
  .tutor-message { padding: 10px 12px; }
  .tutor-message p { font-size: 12px; line-height: 1.6; }
  .tutor-reflection { padding: 9px 10px; }
  .tutor-composer { padding: 10px 16px 12px; }
  .tutor-composer textarea { min-height: 64px; }
  .tutor-composer-actions { gap: 8px; }
  .tutor-composer-actions { grid-template-columns: 1fr; }
  .tutor-composer-actions .feature-primary { justify-self: stretch; }
  .perspective-module-header { padding: 18px; }
  .perspective-module-header h3 { font-size: 21px; }
  .review-badge { display: none; }
  .perspective-module-actions { display: grid; padding: 14px 18px; }
  .perspective-module-actions button { width: 100%; }
  .publish-state { margin-right: 18px; margin-left: 18px; }
  .perspective-preview { grid-template-columns: 1fr; padding: 4px 18px 18px; }
  .perspective-layer, .publish-layer { padding: 0; }
  .perspective-hub, .publish-dialog { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .perspective-hub-body { padding: 16px 16px 32px; }
  .review-disclosure { display: grid; }
  .feed-filters { top: -16px; margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
  .perspective-feed { grid-template-columns: 1fr; }
  .comment-composer > div { align-items: flex-end; }
  .publish-step { padding: 18px 16px; }
  .publish-actions { display: grid; }
  .publish-actions button { width: 100%; }
  .publish-variant { display: grid; }
}

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