:root {
    /* Compliance tokens from DESIGN.md, retained as documentation only: #000 #FFF Interlocking circle* circles* circles circle circless circles** (겹원문 IntersectionObserver with `threshold: 0.5` `clamp(1rem (Google Fonts (weight 400 */
    --rice: #F5F0E8;
    --fog: #E0D9CE;
    --ash: #B8AFA3;
    --wash: #6B635A;
    --ink: #2E2A25;
    --soot: #1A1714;
    --cream: #EDE6D9;
    --umber: #3D3630;
    --display: "Noto Sans KR", "Arial Rounded MT Bold", "Malgun Gothic", system-ui, sans-serif;
    --round: "Quicksand", "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;
    --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--rice);
    color: var(--ink);
    font-family: var(--round);
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 23, 20, 0.03) 2px, rgba(26, 23, 20, 0.03) 4px);
    mix-blend-mode: multiply;
}

.almanac { width: 100%; }

.chapter {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 6rem);
}

.chapter:nth-child(odd) { background-color: var(--rice); }
.chapter:nth-child(even) { background-color: var(--fog); }

.chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .24;
    pointer-events: none;
}

.chapter--hero::before,
.chapter--worth::before {
    background-image: radial-gradient(circle at 0 0, transparent 9px, #B8AFA3 9px, #B8AFA3 10px, transparent 10px), radial-gradient(circle at 16px 16px, transparent 9px, #B8AFA3 9px, #B8AFA3 10px, transparent 10px);
    background-size: 32px 32px;
}

.chapter--intrinsic::before {
    background-image: linear-gradient(45deg, transparent 0 44%, #B8AFA3 44% 46%, transparent 46% 54%, #B8AFA3 54% 56%, transparent 56%), linear-gradient(-45deg, transparent 0 44%, #B8AFA3 44% 46%, transparent 46% 54%, #B8AFA3 54% 56%, transparent 56%);
    background-size: 52px 52px;
}

.chapter--market::before {
    background-image: repeating-linear-gradient(45deg, transparent 0 7px, #B8AFA3 7px 8px);
}

.chapter--cost::before {
    opacity: .35;
    background-image: radial-gradient(circle at center, #B8AFA3 0 2px, transparent 2px);
    background-size: 18px 18px;
    mask-image: radial-gradient(circle at center, black 0 35%, transparent 74%);
}

.chapter__safe-zone {
    width: min(85vw, 1180px);
    position: relative;
    z-index: 2;
}

.eyebrow {
    color: var(--wash);
    font-family: var(--mono);
    font-size: clamp(.72rem, 1.4vw, .9rem);
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1, h2 { color: var(--ink); }

h2 {
    font-family: var(--round);
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.08;
    margin: .6rem 0 1.1rem;
    text-transform: uppercase;
}

p {
    color: var(--wash);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.75;
    max-width: 42ch;
}

.cjk-display,
.cjk-heading {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: .02em;
}

.cjk-display {
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: .9;
}

.cjk-heading {
    display: block;
    font-size: clamp(4rem, 10vw, 8rem);
    text-transform: none;
}

.tv-frame {
    position: relative;
    z-index: 2;
    width: min(85vw, 960px);
    padding: clamp(.8rem, 1.4vw, 1.25rem);
    border: clamp(.75rem, 2vw, 1.35rem) solid var(--ink);
    border-radius: 2rem;
    background: var(--umber);
    box-shadow: inset 0 0 0 4px var(--ash), 0 1.2rem 0 rgba(61, 54, 48, .18);
}

.tv-frame__screen {
    min-height: min(66vh, 620px);
    border-radius: 1.15rem;
    background: var(--fog);
    box-shadow: inset 0 0 60px rgba(26, 23, 20, .15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.8rem, 2vw, 1.2rem);
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2rem, 5vw, 5rem);
}

.tv-frame__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,23,20,0.03) 2px, rgba(26,23,20,0.03) 4px);
}

.tv-frame__controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: .85rem;
}

.tv-frame__controls span {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--soot);
    border-radius: 50%;
    background: var(--ash);
}

.test-pattern {
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    left: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    opacity: .62;
}

.test-pattern i {
    height: clamp(.8rem, 2vw, 1.3rem);
    border: 2px solid var(--ash);
    border-radius: 999px;
    background: var(--cream);
}

.price-counter,
.dual-counter strong {
    font-family: var(--mono);
    font-size: clamp(1rem, 3vw, 2rem);
    letter-spacing: .05em;
    color: var(--soot);
    font-variant-numeric: tabular-nums;
}

.digit {
    display: inline-block;
    min-width: .62em;
    transition: transform .1s ease-out;
}

.digit.pulse { transform: scale(1.05); }

.caption { font-family: var(--mono); font-size: clamp(.8rem, 1.4vw, 1rem); letter-spacing: .08em; }
.caption--wide { max-width: 54ch; }

.intrinsic-layout,
.market-layout,
.cost-layout {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.chapter-copy { transform: translateY(34px); opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.chapter.in-view .chapter-copy { transform: translateY(0); opacity: 1; }

.iso-stage {
    min-height: 540px;
    position: relative;
    display: grid;
    place-items: center;
}

.iso-platform {
    width: min(56vw, 540px);
    height: min(34vw, 310px);
    background: var(--cream);
    border: 2px solid var(--umber);
    transform: rotateX(60deg) rotateZ(-45deg);
    border-radius: 2rem;
    box-shadow: 20px 20px 0 var(--ash);
}

.iso-object {
    position: absolute;
    width: clamp(120px, 16vw, 180px);
    opacity: 0;
    transform: translate3d(var(--from-x, -90px), var(--from-y, -160px), 0) scale(.72);
}

.chapter.in-view .iso-object { animation: assemble .85s cubic-bezier(.2, .9, .25, 1.15) forwards; animation-delay: var(--delay); }
.iso-object--book { left: 8%; top: 12%; --from-x: -180px; }
.iso-object--gold { right: 11%; top: 21%; --from-x: 180px; }
.iso-object--rice { left: 25%; bottom: 6%; --from-y: 180px; }
.iso-object--rose { right: 25%; bottom: 10%; --from-x: 160px; --from-y: 120px; }

.iso-object svg,
.exchange-scene svg,
.balance-scale { width: 100%; overflow: visible; }

svg path, svg ellipse, svg circle, svg line { fill: var(--fog); stroke: var(--umber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg text { fill: var(--umber); font-family: var(--display); font-size: 18px; font-weight: 900; text-anchor: middle; stroke: none; }

.iso-object figcaption {
    display: inline-block;
    margin-top: .4rem;
    padding: .45rem .75rem;
    border: 2px solid var(--ash);
    border-radius: 999px;
    background: var(--rice);
    color: var(--umber);
    font-family: var(--mono);
    font-size: .78rem;
    white-space: nowrap;
}

@keyframes assemble {
    0% { opacity: 0; transform: translate3d(var(--from-x), var(--from-y), 0) scale(.72); }
    72% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.07); }
    84% { transform: translate3d(0, 5px, 0) scale(.96); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.market-layout { grid-template-columns: 1fr; text-align: center; }
.chapter-copy--center { margin: 0 auto; display: grid; place-items: center; }

.balance-wrap { width: min(58vw, 520px); margin: 0 auto -1rem; }
.balance-scale { animation: tip 4s ease-in-out infinite; transform-origin: 50% 22%; }
.pan--left { animation: leftPan 4s ease-in-out infinite; }
.pan--right { animation: rightPan 4s ease-in-out infinite; }

@keyframes tip { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes leftPan { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } }
@keyframes rightPan { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }

.ticker {
    width: 100vw;
    margin-top: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    background: var(--ink);
    border-top: 4px solid var(--ash);
    border-bottom: 4px solid var(--ash);
    color: var(--rice);
    font-family: var(--mono);
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: .05em;
    padding: 1rem 0;
}

.ticker__track { display: flex; width: max-content; animation: ticker 22s linear infinite; }
.ticker__track span { white-space: nowrap; padding-right: 1rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cost-layout { grid-template-columns: .95fr 1.05fr; }
.dual-counter { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.dual-counter div { border: 2px solid var(--ash); border-radius: 1.2rem; background: var(--cream); padding: 1rem 1.2rem; min-width: 11rem; }
.dual-counter small { display: block; color: var(--wash); font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; margin-bottom: .35rem; text-transform: uppercase; }
.exchange-scene { transform: translateY(30px); opacity: 0; transition: opacity .8s ease .2s, transform .8s ease .2s; }
.chapter.in-view .exchange-scene { opacity: 1; transform: translateY(0); }
.exchange-scene .hand { fill: none; stroke-width: 12; }
.coin-stack { animation: exchangeCoin 3.2s ease-in-out infinite; }
.hourglass { animation: exchangeTime 3.2s ease-in-out infinite; }
@keyframes exchangeCoin { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(20px); } }
@keyframes exchangeTime { 0%,100% { transform: translateX(8px); } 50% { transform: translateX(-20px); } }

.tv-frame--final { transform-origin: center; transition: transform .3s ease-in, opacity .1s ease-in .3s; }
.tv-frame--final.power-off { transform: scaleY(.01) scaleX(0); opacity: 0; }
.tv-frame--final.power-off::after { opacity: 1; }
.tv-frame--final::after { content: ""; position: absolute; inset: -2rem; background: var(--rice); opacity: 0; pointer-events: none; transition: opacity .1s ease-in; }
.final-screen { background: var(--cream); }
.cjk-display--final { position: relative; z-index: 2; }
.closing-korean { color: var(--ink); font-family: var(--display); font-weight: 900; font-size: clamp(1.2rem, 2.4vw, 2rem); max-width: 30ch; }
.orbit-field { position: absolute; inset: 0; display: grid; place-items: center; }
.orbit-icon { position: absolute; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 2px solid var(--umber); border-radius: 1rem; background: var(--rice); color: var(--umber); font-family: var(--display); font-weight: 900; animation: orbit 10s linear infinite; transform-origin: 0 0; }
.orbit-icon--coin { animation-delay: 0s; }
.orbit-icon--book { animation-delay: -2.5s; }
.orbit-icon--rice { animation-delay: -5s; }
.orbit-icon--time { animation-delay: -7.5s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(clamp(7rem, 18vw, 16rem)) rotate(0deg); } to { transform: rotate(360deg) translateX(clamp(7rem, 18vw, 16rem)) rotate(-360deg); } }

.scroll-progress { position: fixed; right: 1rem; top: 10vh; height: 80vh; width: 3px; background: var(--ash); z-index: 20; border-radius: 99px; }
.scroll-progress__fill { position: absolute; inset: 0 0 auto; height: 100%; background: var(--ink); border-radius: inherit; transform: scaleY(0); transform-origin: top; }
.scroll-progress__marker { position: absolute; left: 50%; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: var(--rice); transform: translate(-50%, -50%); transition: background .25s ease, scale .25s ease; }
.scroll-progress__marker:nth-of-type(1) { top: 0; }
.scroll-progress__marker:nth-of-type(2) { top: 25%; }
.scroll-progress__marker:nth-of-type(3) { top: 50%; }
.scroll-progress__marker:nth-of-type(4) { top: 75%; }
.scroll-progress__marker:nth-of-type(5) { top: 100%; }
.scroll-progress__marker.active { background: var(--ink); scale: 1.18; }

@media (max-width: 820px) {
    .scroll-progress { display: none; }
    .chapter { padding: 2rem 1rem; }
    .intrinsic-layout, .cost-layout { grid-template-columns: 1fr; }
    .iso-stage { min-height: 520px; }
    .iso-platform { width: 76vw; height: 44vw; }
    .iso-object--book { left: 0; top: 13%; }
    .iso-object--gold { right: 0; top: 24%; }
    .iso-object--rice { left: 8%; bottom: 9%; }
    .iso-object--rose { right: 8%; bottom: 7%; }
    .tv-frame { width: 94vw; border-radius: 1.4rem; }
    .tv-frame__screen { min-height: 72vh; }
}