:root {
    --yellow: #F8C630;
    --black: #171717;
    --cream: #F3E7C7;
    --cyan: #55D6C2;
    --red: #E3312D;
    --purple: #5B2A86;
    --blue: #246BFE;
    --space: "Space Grotesk", "Inter", sans-serif;
    --inter: "Inter", sans-serif;
    --poster: "Black Han Sans", sans-serif;
    --body: "Gowun Dodum", sans-serif;
    --latin: "Archivo Black", sans-serif;
    --serif: "Noto Serif KR", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: var(--black); color: var(--black); }

body {
    font-family: var(--body);
    cursor: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(85, 214, 194, .28), transparent 28vw),
        radial-gradient(circle at 80% 65%, rgba(248, 198, 48, .22), transparent 30vw),
        linear-gradient(115deg, #111 0%, #202020 48%, #0b0b0b 100%);
}

.wall-grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .38;
    background-image:
        repeating-linear-gradient(3deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(93deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px);
    mix-blend-mode: overlay;
}

.ticker { position: fixed; left: 0; top: 18px; z-index: 30; width: 100vw; overflow: hidden; transform: rotate(-1.4deg); pointer-events: none; }
.ticker-track { display: inline-block; min-width: 200vw; padding: 9px 0; font: 700 18px var(--space); color: var(--yellow); background: var(--red); text-transform: uppercase; white-space: nowrap; animation: ticker 22s linear infinite; box-shadow: 0 8px 0 rgba(0,0,0,.24); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.procession { height: 100vh; display: flex; width: max-content; will-change: transform; transform: translate3d(0,0,0); }
.panel { position: relative; width: 108vw; height: 100vh; flex: 0 0 108vw; overflow: hidden; padding: 8vh 7vw; isolation: isolate; }
.panel::before { content: attr(data-scene); position: absolute; right: 5vw; top: 8vh; font: 900 17vw/1 var(--inter); color: rgba(243,231,199,.08); z-index: -1; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.22)); clip-path: polygon(0 0, 98% 0, 91% 100%, 0 100%); z-index: -2; }

.paste-layer-one { background: var(--yellow); }
.megaphone-corner { background: linear-gradient(135deg, var(--cyan), #35a997 60%, var(--black)); }
.ballot-print-alley { background: var(--cream); }
.rumor-bus-stop { background: linear-gradient(115deg, var(--blue), #10265c); }
.dawn-after-counting { background: linear-gradient(125deg, var(--black), #2a1812 48%, var(--red)); color: var(--cream); }

.poster, .scrap, .ink-sheet, .speech, .final-wall, .notice, .receipt, .map-fragment, .visitor-note {
    position: absolute; box-shadow: 17px 22px 0 rgba(0,0,0,.28), 0 0 0 2px rgba(23,23,23,.35); transform-origin: center;
}
.poster::before, .scrap::before, .ink-sheet::before, .speech::before, .final-wall::before, .notice::before {
    content: ""; position: absolute; inset: -9px; background: inherit; z-index: -1;
    clip-path: polygon(1% 4%, 13% 0, 28% 5%, 42% 1%, 59% 4%, 73% 0, 88% 5%, 99% 2%, 96% 20%, 100% 39%, 96% 58%, 99% 79%, 95% 98%, 78% 96%, 62% 100%, 45% 96%, 29% 99%, 11% 95%, 0 99%, 4% 80%, 0 61%, 4% 44%, 0 23%);
}
.tilted-left { transform: rotate(-5deg); }
.tilted-right { transform: rotate(4deg); }
.red { background: var(--red); color: var(--cream); }
.cream { background: var(--cream); color: var(--black); }
.blue { background: var(--blue); color: var(--cream); }
.purple { background: var(--purple); color: var(--cream); }

.label-strip { display: inline-block; margin: 0 0 20px; padding: 8px 12px; background: var(--black); color: var(--yellow); font: 900 15px var(--latin); letter-spacing: .08em; transform: rotate(1deg); }
.label-strip.cyan { color: var(--black); background: var(--cyan); }
h1, h2 { margin: 0; font-family: var(--poster); font-weight: 400; letter-spacing: -.04em; }
h1 { font-size: clamp(68px, 9.5vw, 158px); line-height: .85; text-shadow: 7px 7px 0 var(--black); }
h2 { font-size: clamp(45px, 6.7vw, 112px); line-height: .9; }
.body-note, .notice p, .schedule p, .final-wall p { font-size: clamp(18px, 1.55vw, 28px); line-height: 1.55; }

.paste-layer-one .slab { left: 8vw; top: 14vh; width: 55vw; min-height: 66vh; padding: 42px; }
.body-note { max-width: 46ch; margin-top: 30px; background: rgba(23,23,23,.18); padding: 18px 20px; }
.notice { right: 8vw; bottom: 12vh; width: 34vw; padding: 34px; border: 5px solid var(--black); }
.notice h2 { font-size: clamp(35px, 4vw, 68px); }
.old-paper { background-image: linear-gradient(rgba(91,42,134,.08), rgba(91,42,134,.08)), repeating-linear-gradient(0deg, transparent 0 30px, rgba(23,23,23,.12) 30px 32px); }
.tape { position: absolute; width: 105px; height: 32px; background: rgba(248,198,48,.72); border: 2px dashed rgba(23,23,23,.35); transform: rotate(-8deg); }
.tape-a { top: -20px; left: 55px; } .tape-b { bottom: -17px; right: 80px; transform: rotate(9deg); }
.stamp-circle { position: absolute; right: 33vw; top: 18vh; width: 150px; height: 150px; border: 12px solid var(--blue); border-radius: 50%; display: grid; place-items: center; color: var(--blue); font: 400 52px var(--poster); transform: rotate(-18deg); mix-blend-mode: multiply; }
.paste-drip { position: absolute; top: 0; width: 24px; height: 45vh; background: rgba(243,231,199,.56); border-radius: 0 0 22px 22px; animation: drip 5s ease-in-out infinite alternate; }
.d1 { left: 68vw; } .d2 { left: 73vw; height: 31vh; animation-delay: -2s; }
@keyframes drip { to { transform: translateY(28px); opacity: .85; } }
.utility-wires span { position: absolute; left: -5vw; width: 120vw; height: 3px; background: rgba(23,23,23,.68); transform: rotate(var(--r)); top: var(--t); }
.utility-wires span:nth-child(1){--r:-7deg;--t:17vh}.utility-wires span:nth-child(2){--r:-4deg;--t:24vh}.utility-wires span:nth-child(3){--r:-9deg;--t:31vh}

.mega-shape { position: absolute; left: 6vw; top: 18vh; width: 35vw; height: 42vh; transform: rotate(-10deg); }
.cone { position: absolute; width: 30vw; height: 25vh; background: var(--yellow); clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 68%); box-shadow: 15px 15px 0 rgba(0,0,0,.25); }
.handle { position: absolute; left: 5vw; top: 22vh; width: 8vw; height: 15vh; background: var(--red); transform: skew(-13deg); }
.signal { position: absolute; border: 5px solid var(--yellow); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; animation: pulse 1.8s ease-out infinite; }
.s1 { left: 29vw; top: 4vh; width: 8vw; height: 8vw; } .s2 { left: 32vw; top: 0; width: 14vw; height: 14vw; animation-delay: .3s; } .s3 { left: 35vw; top: -4vh; width: 20vw; height: 20vw; animation-delay: .6s; }
@keyframes pulse { 50% { opacity: .25; transform: scale(1.06); } }
.scrap-one { left: 39vw; top: 11vh; width: 47vw; padding: 36px; transform: rotate(4deg); }
.scrap span { font: 900 18px var(--latin); color: var(--yellow); }
.scrap strong { display: block; margin-top: 20px; font: 400 clamp(46px, 6vw, 96px)/.92 var(--poster); }
.debate-lines { position: absolute; left: 17vw; bottom: 10vh; display: grid; gap: 12px; transform: rotate(-2deg); }
.debate-lines p { margin: 0; padding: 12px 18px; background: var(--cream); font-size: clamp(20px, 2vw, 34px); box-shadow: 8px 8px 0 rgba(0,0,0,.25); }
.receipt { right: 8vw; bottom: 9vh; width: 210px; padding: 18px; background: var(--cream); font: 700 17px var(--inter); transform: rotate(7deg); }
.receipt span { display: block; border-top: 2px dotted var(--black); padding: 7px 0; }

.roller { position: absolute; left: 9vw; top: 15vh; width: 15vw; height: 63vh; transform: rotate(14deg); }
.roller::before { content:""; position:absolute; inset:0 38% 30% 38%; background: var(--black); } .roller span { position:absolute; left:0; bottom:0; width:100%; height:18%; background: var(--red); border-radius: 50px; box-shadow: 0 14px 0 rgba(0,0,0,.24); }
.ink-sheet { left: 28vw; top: 13vh; width: 56vw; min-height: 68vh; padding: 46px; background: var(--black); color: var(--cream); transform: rotate(-2deg); }
.ink-sheet h2 { color: var(--yellow); text-shadow: 5px 5px 0 var(--red); }
.ballot-row { margin-top: 42px; display: flex; align-items: center; gap: 18px; font: 400 40px var(--poster); }
.ballot-row i { width: 58px; height: 58px; border: 6px solid var(--cream); display: inline-block; border-radius: 50%; }
.map-fragment { background: var(--cyan); padding: 16px 20px; font: 700 20px var(--space); transform: rotate(9deg); }
.m1 { left: 19vw; bottom: 12vh; } .m2 { right: 8vw; top: 9vh; transform: rotate(-7deg); background: var(--purple); color: var(--cream); }
.confetti-field span { position: absolute; width: 34px; height: 16px; background: var(--red); transform: rotate(var(--rot)); left: var(--x); top: var(--y); animation: flutter var(--dur) ease-in-out infinite alternate; }
.confetti-field span:nth-child(3n){background:var(--blue)} .confetti-field span:nth-child(4n){background:var(--yellow)} .confetti-field span:nth-child(5n){background:var(--cyan)}
@keyframes flutter { to { transform: translateY(22px) rotate(calc(var(--rot) + 25deg)); } }

.glass-reflection { position: absolute; inset: 8vh 10vw; border: 6px solid rgba(243,231,199,.7); background: linear-gradient(110deg, rgba(255,255,255,.2), transparent 18%, rgba(255,255,255,.11) 34%, transparent 62%); transform: skew(-8deg) rotate(1deg); }
.bus-roof { position: absolute; left: 10vw; top: 9vh; padding: 13px 28px; background: var(--yellow); font: 900 26px var(--latin); transform: rotate(-2deg); }
.speech { padding: 20px 26px; background: var(--cream); font: 400 clamp(26px, 3.3vw, 54px) var(--poster); color: var(--black); }
.speech.one { left: 14vw; top: 30vh; transform: rotate(-8deg); } .speech.two { right: 18vw; top: 25vh; transform: rotate(5deg); background: var(--cyan); } .speech.three { left: 31vw; bottom: 18vh; transform: rotate(2deg); background: var(--red); color: var(--cream); }
.schedule { right: 7vw; bottom: 8vh; width: 36vw; padding: 34px; transform: rotate(-5deg); }
.schedule small { display: block; margin-top: 18px; font: 700 18px var(--serif); color: var(--yellow); }

.sun-stain { position: absolute; right: 10vw; top: 10vh; width: 25vw; height: 25vw; background: radial-gradient(circle, var(--yellow), rgba(248,198,48,.2) 55%, transparent 68%); border-radius: 50%; mix-blend-mode: screen; }
.final-wall { left: 10vw; top: 16vh; width: 62vw; min-height: 62vh; padding: 48px; background: var(--cream); color: var(--black); transform: rotate(2deg); }
.final-wall h2 { color: var(--red); text-shadow: 5px 5px 0 var(--yellow); }
.archive { font-family: var(--serif); color: var(--purple); }
.paste-button { margin-top: 12px; padding: 16px 24px; border: 0; background: var(--blue); color: var(--cream); font: 900 19px var(--space); box-shadow: 8px 8px 0 var(--black); transform: rotate(-1deg); cursor: none; }
.visitor-note { right: 11vw; bottom: 16vh; max-width: 310px; padding: 22px; background: var(--yellow); color: var(--black); font: 400 27px var(--poster); transform: rotate(-9deg) scale(.92); transition: transform .35s ease, background .35s ease; }
.visitor-note.is-pasted { transform: rotate(5deg) scale(1.08); background: var(--cyan); }
.end-stamp { position: absolute; right: 7vw; bottom: 6vh; font: 900 44px var(--latin); color: var(--yellow); transform: rotate(-4deg); }

.progress-rail { position: fixed; left: 5vw; bottom: 28px; width: 58vw; height: 10px; z-index: 35; background: rgba(243,231,199,.24); box-shadow: 0 0 0 2px rgba(23,23,23,.45); }
.progress-rail span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--red), var(--yellow), var(--cyan)); }
.scene-jumps { position: fixed; right: 28px; bottom: 22px; z-index: 36; display: flex; gap: 8px; transform: rotate(2deg); }
.scene-jumps button { border: 0; padding: 10px 12px; background: var(--cream); color: var(--black); font: 900 14px var(--inter); box-shadow: 4px 4px 0 rgba(0,0,0,.45); cursor: none; }
.scene-jumps button.is-current { background: var(--red); color: var(--cream); }
.cursor-stamp { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: 66px; height: 66px; display: grid; place-items: center; border: 5px solid var(--red); border-radius: 50%; color: var(--red); font: 400 23px var(--poster); transform: translate(-50%, -50%) rotate(-12deg); mix-blend-mode: multiply; opacity: .9; }

.panel.is-visible .poster, .panel.is-visible .scrap, .panel.is-visible .ink-sheet, .panel.is-visible .speech, .panel.is-visible .final-wall { animation: settle .7s cubic-bezier(.2,.9,.2,1) both; }
@keyframes settle { from { filter: blur(2px); transform: translateY(28px) rotate(-8deg) scale(.96); } }

@media (max-width: 760px) {
    html, body { overflow: auto; }
    body { cursor: auto; }
    .procession { width: 100%; height: auto; display: block; transform: none !important; }
    .panel { width: 100%; min-height: 100vh; height: auto; padding: 90px 22px; }
    .poster, .scrap, .ink-sheet, .speech, .final-wall, .notice, .receipt, .map-fragment, .visitor-note { position: relative; inset: auto !important; width: auto !important; margin: 20px 0; }
    .mega-shape, .roller, .glass-reflection, .cursor-stamp, .scene-jumps { display: none; }
    .progress-rail { width: 80vw; }
}