:root {
  /* Design typography check: IBM Plex Mono** only for timestamps and signal readouts. */
  --lamp-paper: #F5E0B8;
  --brass-gold: #C08A32;
  --night-walnut: #251811;
  --emergency-persimmon: #C84A2F;
  --oxidized-copper: #2F8A73;
  --ink-brown: #4B3126;
  --faded-photo-sepia: #9B6A45;
  --paper-shadow: 0 24px 55px rgba(37, 24, 17, .32);
  --brass-rule: 2px solid rgba(192, 138, 50, .78);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-brown);
  font-family: "Noto Sans KR", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 22% 8%, rgba(245, 224, 184, .42), transparent 28rem),
    radial-gradient(circle at 82% 72%, rgba(192, 138, 50, .18), transparent 26rem),
    linear-gradient(90deg, #1d110c 0 11rem, var(--night-walnut) 11rem 13rem, #382419 13rem 100%);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: .28;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 224, 184, .06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(37, 24, 17, .05) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.fixed-circuit {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
}

.live-path,
.scene-circuit path,
.floor-path {
  fill: none;
  stroke: url(#none);
  stroke: var(--oxidized-copper);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(47, 138, 115, .42));
}

.live-path {
  stroke-dasharray: 1750;
  stroke-dashoffset: 1750;
  animation: circuitDraw 4.8s ease forwards, circuitGlow 3s ease-in-out infinite alternate;
}

.path-two { animation-delay: .7s; }
.pulse-dot { fill: var(--brass-gold); animation: pulse 2.6s ease-in-out infinite; }
.pulse-dot.delay { animation-delay: .75s; }
.pulse-dot.delay-two { animation-delay: 1.35s; }

.corridor {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 3rem);
  width: min(1500px, 100%);
  margin: 0 auto;
}

.date-spine {
  position: sticky;
  top: 0;
  height: 100vh;
  grid-column: 1;
  color: var(--lamp-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem .85rem;
  isolation: isolate;
}

.spine-rail {
  position: absolute;
  inset: 1.4rem 1.1rem;
  border: var(--brass-rule);
  border-radius: 7rem 7rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(192, 138, 50, .24), rgba(75, 49, 38, .34));
  box-shadow: inset 0 0 0 7px rgba(245, 224, 184, .05), 0 20px 55px rgba(0,0,0,.28);
  z-index: -1;
}

.spine-kicker,
.signal-readout,
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .08em;
}

.spine-kicker {
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--brass-gold);
  margin-bottom: 1rem;
}

.spine-date {
  font-family: Limelight, Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: .93;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 3px 0 rgba(37, 24, 17, .74);
}

.spine-date span { opacity: .55; transition: opacity .35s ease, color .35s ease, transform .35s ease; }
.spine-date span.active { opacity: 1; color: var(--brass-gold); transform: scale(1.05); }
.spine-date b { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--emergency-persimmon); margin: .12em; }
.spine-hangul { font-family: Caveat, cursive; font-size: 1.7rem; color: var(--lamp-paper); margin-top: 1.1rem; transform: rotate(-3deg); }
.signal-readout { margin-top: 1.5rem; font-size: .66rem; color: rgba(245, 224, 184, .7); text-align: center; }

.scene {
  grid-column: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-content: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem) clamp(4rem, 7vw, 6rem) 0;
  position: relative;
  opacity: .25;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.scene.is-visible { opacity: 1; transform: translateY(0); }

.deco-marquee {
  grid-column: 1 / 9;
  min-height: 24rem;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border: 4px double var(--brass-gold);
  background:
    linear-gradient(135deg, rgba(245, 224, 184, .98), rgba(245, 224, 184, .83)),
    repeating-linear-gradient(45deg, rgba(192, 138, 50, .12) 0 2px, transparent 2px 14px);
  box-shadow: var(--paper-shadow);
  clip-path: polygon(3% 0, 97% 0, 100% 8%, 100% 92%, 97% 100%, 3% 100%, 0 92%, 0 8%);
}

.sunburst {
  position: absolute;
  inset: -35% -10% auto auto;
  width: 36rem;
  height: 36rem;
  opacity: .28;
  background: conic-gradient(from 0deg, transparent 0 8deg, var(--brass-gold) 8deg 12deg, transparent 12deg 20deg);
  border-radius: 50%;
  animation: slowOpen 12s linear infinite;
}

.plate,
.chapter-plate {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--emergency-persimmon);
}

h1 {
  position: relative;
  margin: 1.2rem 0 .2rem;
  font-family: Limelight, Georgia, serif;
  font-size: clamp(4rem, 11vw, 10.8rem);
  line-height: .86;
  color: var(--night-walnut);
  text-shadow: 3px 3px 0 rgba(192, 138, 50, .65);
}

h2, .hand-note, .margin-script, .final-script { font-family: Caveat, cursive; }
h2 { font-size: clamp(2rem, 5vw, 4.5rem); margin: 0; color: var(--oxidized-copper); transform: rotate(-1deg); }

.paper-card,
.note-slip,
.ledger-note {
  background: linear-gradient(145deg, rgba(245, 224, 184, .98), rgba(236, 198, 139, .92));
  border: 1px solid rgba(192, 138, 50, .72);
  box-shadow: var(--paper-shadow);
  padding: clamp(1.1rem, 2.5vw, 2rem);
  position: relative;
}

.paper-card::before,
.note-slip::before {
  content: "";
  position: absolute;
  inset: .7rem;
  border: 1px solid rgba(155, 106, 69, .32);
  pointer-events: none;
}

.title-paper { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: end; transform: rotate(1.6deg); }
.title-paper p:not(.hand-note), .paper-card p { font-size: 1.04rem; line-height: 1.75; }
.hand-note { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--ink-brown); }
.red-pencil { color: var(--emergency-persimmon); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.memo-pin { position: absolute; top: .8rem; right: 1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--brass-gold); box-shadow: 0 0 0 5px rgba(192, 138, 50, .18); }

.photo-fragment {
  margin: 0;
  padding: .75rem .75rem 1rem;
  background: #ead0a1;
  border: 1px solid rgba(75, 49, 38, .35);
  box-shadow: var(--paper-shadow);
  color: var(--ink-brown);
}

.photo-lamp { grid-column: 2 / 6; transform: rotate(-2deg); }
.photo-image { height: clamp(10rem, 20vw, 17rem); background-blend-mode: multiply; filter: sepia(.64) saturate(.82) contrast(.95); }
.city { background: radial-gradient(circle at 35% 40%, #F5E0B8 0 3%, transparent 4%), radial-gradient(circle at 70% 56%, #C08A2F 0 2%, transparent 3%), linear-gradient(135deg, #251811, #9B6A45 48%, #2F8A73); }
.equipment { background: repeating-linear-gradient(90deg, rgba(37,24,17,.24) 0 12px, transparent 12px 28px), radial-gradient(circle at 60% 25%, #F5E0B8, transparent 18%), linear-gradient(145deg, #4B3126, #9B6A45); }
.papers { background: linear-gradient(20deg, transparent 0 44%, rgba(37,24,17,.22) 45% 55%, transparent 56%), repeating-linear-gradient(-8deg, #F5E0B8 0 24px, #d6a86b 24px 28px, #9B6A45 28px 30px); }
figcaption { font-family: Caveat, cursive; font-size: 1.35rem; padding-top: .55rem; }

.headline-strip {
  grid-column: 4 / 12;
  padding: .85rem 1.2rem;
  color: var(--lamp-paper);
  background: var(--emergency-persimmon);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  box-shadow: var(--paper-shadow);
}
.rotate-left { transform: rotate(-1.4deg); }

.chapter-plate {
  grid-column: 1 / 4;
  justify-self: start;
  align-self: start;
  padding: .75rem 1rem;
  background: linear-gradient(90deg, var(--brass-gold), #dfb86d);
  color: var(--night-walnut);
  border-radius: .2rem;
  box-shadow: inset 0 -3px 0 rgba(37,24,17,.25), 0 12px 25px rgba(0,0,0,.25);
  transform: translateX(-18px);
  transition: transform .45s cubic-bezier(.2,.9,.25,1.2);
}
.scene.is-visible .chapter-plate { transform: translateX(0); }

.rupture-card { grid-column: 2 / 7; transform: rotate(-1deg); }
.rupture-card h3, .ledger-note h3 { font-family: Limelight, serif; font-size: clamp(2rem, 4vw, 4rem); margin: 0 0 .5rem; color: var(--night-walnut); }
.broadcast { grid-column: 8 / 12; transform: rotate(2deg); }
.redaction-stack { grid-column: 6 / 10; align-self: end; padding: 1.4rem; background: rgba(245,224,184,.86); border-left: 8px solid var(--emergency-persimmon); box-shadow: var(--paper-shadow); transform: rotate(.8deg); }
.redaction-stack span { display: block; height: 1.15rem; margin: .65rem 0; background: var(--night-walnut); opacity: .78; }
.redaction-stack span:nth-child(2) { width: 78%; }
.redaction-stack span:nth-child(3) { width: 55%; }
.redaction-stack em { font-family: Caveat, cursive; color: var(--emergency-persimmon); font-size: 1.7rem; }
.scene-circuit { grid-column: 4 / 12; width: 100%; opacity: .8; }
.scene-circuit circle, .floor-plan circle { fill: var(--brass-gold); filter: drop-shadow(0 0 7px rgba(192,138,50,.8)); }

.witness-board { grid-column: 1 / 12; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1rem; padding: clamp(1rem, 2vw, 2rem); border: 2px dashed rgba(192,138,50,.5); background: rgba(37,24,17,.3); }
.note-slip { min-height: 10rem; font-family: Caveat, cursive; transform: rotate(-2deg); }
.note-slip strong { display: block; font-family: Limelight, serif; font-size: 1.5rem; color: var(--emergency-persimmon); }
.note-slip p { font-size: 1.65rem; line-height: 1.05; }
.note-slip:nth-child(1) { grid-column: 1 / 4; }
.note-slip.wide { grid-column: 4 / 8; transform: rotate(1.5deg); }
.note-slip.green { grid-column: 2 / 6; background: linear-gradient(145deg, #F5E0B8, rgba(47,138,115,.35)); }
.hands { grid-column: 7 / 11; transform: rotate(-1deg); }
.margin-script { grid-column: 2 / 10; color: var(--lamp-paper); font-size: clamp(2rem, 4vw, 4rem); margin: 0; transform: rotate(-1deg); }

.floor-plan { grid-column: 1 / 9; min-height: 32rem; position: relative; background: linear-gradient(145deg, rgba(245,224,184,.97), rgba(192,138,50,.22)); border: 3px double var(--brass-gold); box-shadow: var(--paper-shadow); padding: 2rem; }
.floor-title { font-family: Limelight, serif; font-size: clamp(1.6rem, 3vw, 3rem); color: var(--night-walnut); }
.floor-plan svg { position: absolute; inset: 4.5rem 1rem 1rem; width: calc(100% - 2rem); height: calc(100% - 5.5rem); }
.floor-path { stroke-dasharray: 950; stroke-dashoffset: 950; transition: stroke-dashoffset 1.1s ease; }
.floor-path.alt { stroke: var(--brass-gold); transition-delay: .2s; }
.scene.is-visible .floor-path { stroke-dashoffset: 0; }
.room { position: absolute; padding: .7rem 1rem; border: 1px solid var(--ink-brown); background: rgba(245,224,184,.9); font-family: "IBM Plex Mono", monospace; box-shadow: 0 12px 20px rgba(37,24,17,.18); }
.room-rumor { left: 7%; top: 28%; }
.room-broadcast { right: 10%; top: 25%; }
.room-assembly { left: 24%; bottom: 17%; }
.room-record { right: 8%; bottom: 14%; }
.map-caption { grid-column: 9 / 13; align-self: center; transform: rotate(1.5deg); }

.ledger { grid-column: 1 / 12; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: stretch; }
.ledger-object { display: grid; place-items: center; min-height: 15rem; font-family: Limelight, serif; font-size: clamp(3rem, 8vw, 8rem); color: var(--night-walnut); background: var(--lamp-paper); border: 4px double var(--brass-gold); box-shadow: var(--paper-shadow); }
.ledger-object.year { grid-column: 1 / 5; transform: rotate(-1deg); }
.ledger-object.month { grid-column: 5 / 8; color: var(--emergency-persimmon); transform: rotate(1.6deg); }
.ledger-object.day { grid-column: 8 / 11; color: var(--oxidized-copper); transform: rotate(-.6deg); }
.ledger-note { grid-column: 3 / 12; margin-top: -1.2rem; transform: rotate(.7deg); }
.final-script { grid-column: 2 / 12; margin: 1rem 0 0; color: var(--brass-gold); font-size: clamp(2.1rem, 5vw, 5rem); text-align: center; }

.hover-lift { transition: transform .28s ease, box-shadow .28s ease, filter .28s ease; will-change: transform; }
.hover-lift:hover { transform: translateY(-8px) scale(1.06) rotate(0deg); box-shadow: 0 35px 70px rgba(37,24,17,.42), 0 0 0 3px rgba(192,138,50,.34); filter: saturate(1.08); z-index: 4; }

.scene:not(.is-visible) .hand-note,
.scene:not(.is-visible) .margin-script,
.scene:not(.is-visible) .final-script { opacity: .05; transform: translateY(16px) rotate(-3deg); }
.hand-note, .margin-script, .final-script { transition: opacity .6s ease .15s, transform .6s ease .15s; }

@keyframes circuitDraw { to { stroke-dashoffset: 0; } }
@keyframes circuitGlow { from { opacity: .35; } to { opacity: .9; } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.6); opacity: 1; } }
@keyframes slowOpen { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  body { background: linear-gradient(180deg, var(--night-walnut), #3b251a); }
  .corridor { display: block; }
  .date-spine { position: relative; height: auto; min-height: 18rem; }
  .spine-date { writing-mode: horizontal-tb; font-size: clamp(2.4rem, 13vw, 4rem); }
  .scene { display: block; min-height: auto; padding: 3rem 1rem; }
  .scene > * { margin: 1rem 0; }
  .deco-marquee { min-height: 20rem; }
  h1 { font-size: clamp(3rem, 18vw, 5rem); }
  .witness-board, .ledger { display: block; }
  .note-slip, .photo-fragment, .ledger-object, .ledger-note { margin: 1rem 0; }
  .floor-plan { min-height: 28rem; }
}