:root {
  --cream: #F2E8D5;
  --red: #C42126;
  --violet: #6D5A99;
  --ink: #101820;
  --green: #2F6F5E;
  --gold: #C49A3A;
  --serif: 'Noto Serif KR', serif;
  --sans: 'IBM Plex Sans KR', 'Inter', sans-serif;
  --poster: 'Black Han Sans', sans-serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,232,213,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(196,154,58,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 46%, rgba(242,232,213,.06) 47% 49%, transparent 50% 100%);
  background-size: 17px 19px, 23px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.cursor-ghost {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(242,232,213,.5);
  border-radius: 46% 54% 60% 40%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  color: rgba(242,232,213,.7);
  background: rgba(109,90,153,.18);
  transform: translate(-80px, -80px);
  pointer-events: none;
  transition: border-radius .5s ease, background .4s ease;
}

.procession-rail {
  position: fixed;
  z-index: 35;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rail-title {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(242,232,213,.68);
  margin-bottom: 10px;
}

.scene-dot {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(242,232,213,.32);
  border-radius: 50%;
  background: rgba(16,24,32,.48);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.scene-dot.is-active {
  background: var(--red);
  border-color: var(--cream);
  transform: rotate(-11deg) scale(1.08);
}

main { scroll-snap-type: y mandatory; }

.act {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.act::before,
.act::after {
  content: "";
  position: absolute;
  inset: -12vh -8vw;
  z-index: -2;
  background:
    linear-gradient(64deg, transparent 0 25%, rgba(242,232,213,.08) 25.3% 39%, transparent 39.3% 100%),
    repeating-linear-gradient(90deg, rgba(242,232,213,.035) 0 1px, transparent 1px 74px);
}

.act::after {
  z-index: -1;
  transform: skewX(-18deg) translateX(-10vw);
  background: linear-gradient(90deg, transparent, rgba(196,154,58,.12), transparent);
  animation: shutter 9s ease-in-out infinite alternate;
}

.stage {
  position: relative;
  width: min(980px, calc(100vw - 130px));
  min-height: 66vh;
  border: 1px solid rgba(242,232,213,.24);
  padding: clamp(34px, 6vw, 76px);
  background:
    linear-gradient(145deg, rgba(242,232,213,.13), rgba(242,232,213,.035)),
    radial-gradient(circle at 85% 15%, rgba(196,154,58,.2), transparent 34%);
  box-shadow: 0 24px 100px rgba(0,0,0,.42);
  backdrop-filter: blur(2px);
}

.kicker {
  margin: 0 0 18px;
  font-family: var(--mono);
  color: var(--gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
}

h1, h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(48px, 9vw, 122px);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 900;
}

h2 { font-size: clamp(42px, 7.5vw, 104px); }

.fragment {
  max-width: 560px;
  margin: 28px 0 0;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.65;
  color: rgba(242,232,213,.82);
}

.vertical-title {
  position: absolute;
  left: clamp(18px, 4vw, 62px);
  top: 8vh;
  z-index: 5;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(42px, 8vw, 104px);
  letter-spacing: .15em;
  color: rgba(242,232,213,.13);
  text-shadow: 0 0 30px rgba(196,33,38,.2);
}

.advance {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) rotate(-2deg);
  border: 1px solid rgba(242,232,213,.38);
  background: rgba(16,24,32,.55);
  padding: 12px 22px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.empty-podium { background: radial-gradient(circle at 70% 35%, rgba(109,90,153,.42), transparent 35%), var(--ink); }
.whisper-corridor { background: linear-gradient(130deg, #101820 0%, #2F6F5E 52%, #101820 100%); }
.ballot-lantern-room { background: radial-gradient(circle at 50% 20%, rgba(196,154,58,.32), transparent 38%), #101820; }
.filibuster-moon { background: linear-gradient(180deg, #101820 0%, #6D5A99 62%, #101820 100%); }
.refusing-seal { background: radial-gradient(circle at 62% 50%, rgba(196,33,38,.36), transparent 32%), #101820; }

.hanji-panel {
  position: absolute;
  width: 42vw;
  height: 120vh;
  top: -10vh;
  background: rgba(242,232,213,.08);
  border-left: 1px solid rgba(242,232,213,.18);
  border-right: 1px solid rgba(242,232,213,.18);
  transform: rotate(12deg);
}
.panel-a { left: 8vw; }
.panel-b { right: -10vw; transform: rotate(-17deg); background: rgba(196,154,58,.08); }

.podium-guardian {
  position: absolute;
  right: 9%;
  bottom: 13%;
  width: 210px;
  height: 180px;
  border-bottom: 90px solid var(--green);
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.45));
}
.podium-guardian::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 70px;
  width: 96px;
  height: 34px;
  background: var(--cream);
  opacity: .18;
}
.mic {
  position: absolute;
  top: 18px;
  width: 8px;
  height: 92px;
  background: var(--gold);
  transform-origin: bottom;
}
.mic::before { content: ""; position: absolute; top: -16px; left: -9px; width: 26px; height: 22px; border-radius: 50%; background: var(--cream); }
.mic-left { left: 58px; transform: rotate(-24deg); }
.mic-right { right: 58px; transform: rotate(24deg); }
.seal {
  position: absolute;
  right: 60px;
  top: 72px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  font-family: var(--serif);
  animation: blinkSeal 2.2s infinite;
}

.folding-screen {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg, transparent 0 110px, rgba(242,232,213,.07) 111px 178px, transparent 179px 260px);
}
.whisper-wall {
  position: absolute;
  right: 5%;
  top: 12%;
  width: 36%;
  min-width: 280px;
  display: grid;
  gap: 18px;
  transform: rotate(6deg);
}
.whisper-wall span {
  display: block;
  padding: 14px 18px;
  background: rgba(242,232,213,.11);
  border: 1px solid rgba(242,232,213,.2);
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 38px);
  opacity: .58;
  transition: transform .45s ease, opacity .45s ease, background .45s ease;
}
.whisper-wall span.is-loud { transform: translateX(-32px) rotate(-4deg); opacity: 1; background: rgba(196,33,38,.36); }

.lantern-grid {
  position: absolute;
  right: 7%;
  top: 8%;
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 34px 48px;
}
.lantern {
  position: relative;
  width: 112px;
  height: 150px;
  border: 0;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 36%, #F2E8D5, #C49A3A 72%);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  box-shadow: 0 0 36px rgba(196,154,58,.42);
  animation: sway 4s ease-in-out infinite;
}
.lantern:nth-child(even) { animation-delay: -1.7s; }
.lantern::before { content: ""; position: absolute; left: 50%; top: -54px; width: 1px; height: 58px; background: rgba(242,232,213,.42); }
.lantern.is-chosen { background: radial-gradient(circle at 50% 36%, #F2E8D5, #C42126 78%); color: var(--cream); }
.lantern-note { margin-top: 46px; font-family: var(--serif); color: var(--gold); font-size: 24px; }

.moon {
  position: absolute;
  right: 11vw;
  top: 10vh;
  width: clamp(180px, 28vw, 390px);
  height: clamp(180px, 28vw, 390px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #F2E8D5, #C49A3A 58%, rgba(196,154,58,.1) 60%);
  box-shadow: 0 0 90px rgba(242,232,213,.28);
}
.chamber-arc {
  position: absolute;
  left: 50%;
  bottom: -22vh;
  width: 86vw;
  height: 42vw;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(242,232,213,.18);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 52px, rgba(242,232,213,.08) 53px 58px);
}
.poster-burst {
  display: inline-block;
  margin-top: 34px;
  padding: 12px 20px;
  background: var(--red);
  font-family: var(--poster);
  font-size: clamp(34px, 5vw, 72px);
  transform: rotate(-5deg);
}
.transcript-strip {
  position: absolute;
  right: -6%;
  bottom: 10%;
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  color: rgba(242,232,213,.66);
  animation: minutes 14s linear infinite;
}
.transcript-strip span { white-space: nowrap; border-top: 1px solid rgba(242,232,213,.26); padding-top: 10px; }

.ink-footprints {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 30% 20%, rgba(196,33,38,.44) 0 12px, transparent 13px), radial-gradient(ellipse at 56% 42%, rgba(196,33,38,.36) 0 10px, transparent 11px), radial-gradient(ellipse at 42% 74%, rgba(196,33,38,.34) 0 13px, transparent 14px);
  background-size: 220px 260px;
  transform: rotate(-18deg);
  opacity: .45;
}
.giant-seal {
  position: absolute;
  right: 8%;
  top: 18%;
  width: clamp(170px, 25vw, 330px);
  height: clamp(170px, 25vw, 330px);
  border: 8px solid #F2E8D5;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(80px, 14vw, 180px);
  box-shadow: 0 18px 70px rgba(196,33,38,.42);
  transition: transform .45s cubic-bezier(.2,1.7,.4,1), filter .45s ease;
}
.giant-seal.is-stamped { transform: rotate(-13deg) scale(1.16); filter: blur(.3px) saturate(1.35); }
.seal-caption { margin-top: 34px; font-family: var(--mono); color: var(--gold); }

@keyframes shutter { from { transform: skewX(-18deg) translateX(-18vw); } to { transform: skewX(-18deg) translateX(16vw); } }
@keyframes blinkSeal { 0%, 78%, 100% { opacity: 1; transform: scale(1); } 82% { opacity: .18; transform: scale(.92); } 88% { opacity: 1; transform: scale(1.05); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(4deg) translateY(12px); } }
@keyframes minutes { from { transform: translateX(0); } to { transform: translateX(-48%); } }

@media (max-width: 760px) {
  .procession-rail { right: 8px; gap: 7px; }
  .scene-dot { width: 34px; height: 34px; }
  .stage { width: calc(100vw - 68px); padding: 30px 26px; }
  .vertical-title { left: 8px; }
  .podium-guardian, .whisper-wall, .lantern-grid, .giant-seal { position: relative; right: auto; top: auto; margin-top: 30px; }
  .whisper-wall { width: 100%; min-width: 0; }
  .lantern-grid { grid-template-columns: repeat(2, 90px); gap: 18px; }
  .lantern { width: 86px; height: 112px; }
}