:root {
    /* DESIGN FONT CHECK: Space Grotesk** Grotesk* for precise plate labels */
    --ink-black: #11100E;
    --onion-skin: #F4EBDD;
    --blueprint-blue: #2E63A6;
    --cinnabar-seal: #C43B24;
    --graphite-violet: #51445F;
    --paper-shadow: #B9A88F;
    --oxidized-mint: #8AAEA3;
    --lamp-gold: #E7B84B;
    --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink-black);
    color: var(--ink-black);
    font-family: "Noto Serif KR", serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(231, 184, 75, .13), transparent 28%),
        radial-gradient(circle at 78% 20%, rgba(138, 174, 163, .14), transparent 30%),
        linear-gradient(118deg, #11100E 0%, #211d1c 46%, #51445F 140%);
    z-index: -4;
}

.font-register-token {
    position: fixed;
    left: -100vw;
    top: -100vh;
    color: transparent;
}

.paper-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .36;
    z-index: 20;
    mix-blend-mode: multiply;
    background-image:
        repeating-radial-gradient(circle at 23% 31%, rgba(17,16,14,.18) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(88deg, rgba(185,168,143,.08) 0 1px, transparent 1px 7px);
}

.atlas { position: relative; }

.plate {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 5vw, 72px);
    display: grid;
    align-items: center;
    isolation: isolate;
}

.plate::before {
    content: "";
    position: absolute;
    inset: 2.5vw 5vw;
    background: rgba(244, 235, 221, .86);
    border: 1px solid rgba(185, 168, 143, .62);
    box-shadow: 0 28px 90px rgba(0,0,0,.32);
    transform: rotate(calc((var(--progress) - .5) * 1.4deg));
    z-index: -2;
}

.plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(46,99,166,.15) 1px, transparent 1px),
        linear-gradient(0deg, rgba(46,99,166,.12) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .33;
    transform: translateY(calc(var(--progress) * -22px));
    z-index: -1;
}

.registration-strip {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: grid;
    gap: 12px;
    padding: 14px 9px;
    background: rgba(244, 235, 221, .68);
    border: 1px solid rgba(185,168,143,.65);
    backdrop-filter: blur(6px);
}

.registration-strip a {
    color: var(--graphite-violet);
    text-decoration: none;
    font: 500 10px/1 "Space Grotesk", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 7px;
}

.registration-strip span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--blueprint-blue);
    background: var(--onion-skin);
}

.registration-strip a.active span { background: var(--cinnabar-seal); border-color: var(--cinnabar-seal); }

.plate-label, .coordinate-note, .drawer-label, .margin-note, .final-coordinates {
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blueprint-blue);
}

.plate-label {
    position: absolute;
    top: 7vw;
    left: 9vw;
    font-size: clamp(10px, 1.1vw, 14px);
}

.name-plate .blue-grid {
    position: absolute;
    width: 68vw;
    height: 62vh;
    left: 11vw;
    top: 20vh;
    border: 1px solid rgba(46,99,166,.38);
    background-image: linear-gradient(90deg, rgba(46,99,166,.2) 1px, transparent 1px), linear-gradient(rgba(46,99,166,.2) 1px, transparent 1px);
    background-size: 32px 32px;
    transform: rotate(-3deg);
}

.hero-stamp {
    position: relative;
    margin-left: 12vw;
    margin-top: 5vh;
    width: min-content;
    animation: fadeProof 1.1s ease both;
}

.hero-stamp h1, .hero-stamp .blue-offset {
    font-family: "Chonburi", serif;
    font-size: clamp(58px, 12vw, 176px);
    line-height: .82;
    letter-spacing: -.06em;
    white-space: nowrap;
}

.hero-stamp h1 {
    margin: 0;
    color: var(--ink-black);
    text-shadow: 4px 5px 0 rgba(196,59,36,.18);
    filter: url(#none);
}

.blue-offset {
    position: absolute;
    left: -10px;
    top: -8px;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--blueprint-blue);
    opacity: .62;
}

.seal-button {
    border: 0;
    color: var(--onion-skin);
    background: var(--cinnabar-seal);
    font-family: "Noto Serif KR", serif;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 5px rgba(244,235,221,.18), 0 14px 30px rgba(196,59,36,.25);
    mix-blend-mode: multiply;
}

.primary-seal {
    position: absolute;
    right: 16vw;
    top: 38vh;
    width: 106px;
    height: 106px;
    font-size: 34px;
    transform: rotate(7deg);
    animation: sealLand .75s cubic-bezier(.2, 1.25, .36, 1) .55s both;
}

.whisper {
    font-family: "Grandiflora One", serif;
    font-size: clamp(26px, 4vw, 58px);
    color: var(--graphite-violet);
    width: min(720px, 70vw);
    position: absolute;
    right: 9vw;
    bottom: 11vh;
    margin: 0;
}

.binder-holes { position: absolute; left: 7vw; top: 28vh; display: grid; gap: 50px; }
.binder-holes i { width: 28px; height: 28px; border-radius: 50%; background: rgba(17,16,14,.18); box-shadow: inset 0 2px 7px rgba(0,0,0,.25); }
.note-top { position: absolute; right: 12vw; top: 18vh; font-size: 11px; }

.registration-cross { position: absolute; width: 54px; height: 54px; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--blueprint-blue); opacity: .55; }
.registration-cross::before { width: 54px; height: 1px; top: 27px; }
.registration-cross::after { width: 1px; height: 54px; left: 27px; }
.cross-a { right: 11vw; top: 15vh; } .cross-b { left: 14vw; bottom: 13vh; }

.observatory { color: var(--onion-skin); }
.observatory::before { background: rgba(17,16,14,.78); border-color: rgba(138,174,163,.34); }
.observatory::after { opacity: .12; }
.sheet-tilt, .sheet-margin, .gate-sheet, .night-sheet, .stamp-pad { position: absolute; inset: 9vw 8vw; border: 1px solid rgba(244,235,221,.18); transform: rotate(2deg); z-index: -1; }
.orbit-stage { position: absolute; inset: 16vh 7vw 10vh 18vw; }
.orbit-svg { width: 100%; height: 100%; overflow: visible; }
.draw-path { fill: none; stroke: var(--oxidized-mint); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; animation: pathDraw 3s ease forwards; opacity: .88; }
.draw-path.slow { stroke: var(--blueprint-blue); animation-delay: .45s; }
.letter-ring { position: absolute; inset: 0; }
.letter-ring span {
    position: absolute;
    font-family: "Chonburi", serif;
    font-size: clamp(42px, 7vw, 100px);
    color: var(--onion-skin);
    transition: transform .35s ease, color .35s ease;
}
.letter-ring span:nth-child(1){left:6%;top:50%}.letter-ring span:nth-child(2){left:19%;top:22%}.letter-ring span:nth-child(3){left:36%;top:35%}.letter-ring span:nth-child(4){left:49%;top:12%}.letter-ring span:nth-child(5){left:61%;top:43%;color:var(--cinnabar-seal)}.letter-ring span:nth-child(6){left:73%;top:28%}.letter-ring span:nth-child(7){left:84%;top:58%}.letter-ring span:nth-child(8){left:92%;top:34%}
.letter-ring span:hover { transform: rotate(-10deg) scale(1.13); color: var(--lamp-gold); }
.editorial-block { width: min(440px, 46vw); margin-left: auto; margin-right: 7vw; color: var(--onion-skin); }
.editorial-block h2, .net-emblem h2 { font-family: "Chonburi", serif; font-size: clamp(44px, 7vw, 108px); line-height: .88; margin: 0 0 24px; }
.editorial-block p, .seal-copy, .constellation-copy, .gate-copy { font-size: clamp(18px, 2vw, 28px); line-height: 1.45; }
.coordinate-note { position: absolute; bottom: 9vh; left: 13vw; color: var(--oxidized-mint); font-size: 12px; }

.margin::before { background: rgba(244,235,221,.92); clip-path: polygon(5% 2%, 96% 0, 90% 92%, 0 100%); }
.correction-panel { margin-left: 18vw; width: min(760px, 68vw); }
.romanization { font-family: "Chonburi", serif; font-size: clamp(62px, 13vw, 190px); margin: 0; letter-spacing: -.05em; color: var(--ink-black); }
.erased { color: rgba(17,16,14,.22); text-decoration: line-through; text-decoration-color: var(--blueprint-blue); }
.arrow { color: var(--blueprint-blue); font-family: "Space Grotesk", sans-serif; margin: 0 .1em; }
.romanization strong { color: var(--cinnabar-seal); font-weight: 400; }
.pencil-lines { display: grid; gap: 16px; margin: 22px 0 30px; }
.pencil-lines i { height: 2px; width: 0; background: var(--blueprint-blue); animation: lineGrow 1.4s ease forwards; opacity: .6; }
.pencil-lines i:nth-child(2){animation-delay:.15s;width:72%}.pencil-lines i:nth-child(3){animation-delay:.3s;width:54%}.pencil-lines i:nth-child(4){animation-delay:.45s;width:88%}.pencil-lines i:nth-child(5){animation-delay:.6s;width:41%}
.kr-note { font-size: clamp(22px, 3vw, 38px); color: var(--graphite-violet); }
.glyph-specimens { position: absolute; right: 10vw; top: 24vh; display: grid; grid-template-columns: repeat(2, 70px); gap: 12px; }
.glyph-specimens b { height: 70px; border: 1px solid rgba(46,99,166,.44); display: grid; place-items: center; color: var(--blueprint-blue); font: 400 32px "Noto Serif KR", serif; animation: glyphCheck 5s ease-in-out infinite; }
.drawer-label { position: absolute; bottom: 12vh; right: 14vw; font-size: 12px; }

.seal-room::before { background: #2b2422; }
.stamp-pad { width: 42vw; height: 48vh; left: 8vw; top: 28vh; inset: auto; background: radial-gradient(circle at 20% 20%, rgba(196,59,36,.8), transparent 28%), #51445F; border-radius: 12px; transform: rotate(-7deg); opacity: .82; }
.seal-composition { display: flex; align-items: center; gap: 8vw; margin-left: 16vw; color: var(--onion-skin); }
.room-seal { width: 170px; height: 170px; font-size: 52px; transform: rotate(-5deg); flex: none; }
.seal-target { position: relative; width: min(580px, 48vw); height: 430px; border: 1px dashed rgba(244,235,221,.45); background: rgba(244,235,221,.06); overflow: hidden; }
.seal-target span { position: absolute; left: 30px; bottom: 24px; color: var(--paper-shadow); font-family: "Space Grotesk", sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.impression { position: absolute; width: 92px; height: 92px; display: grid; place-items: center; background: rgba(196,59,36,.72); color: var(--onion-skin); font-family: "Noto Serif KR", serif; font-size: 28px; mix-blend-mode: multiply; animation: impression .45s ease both; }
.seal-copy { position: absolute; right: 9vw; bottom: 10vh; width: min(570px, 54vw); color: var(--onion-skin); }
.stamp-ghost { position: absolute; color: rgba(196,59,36,.16); font-family: "Chonburi", serif; font-size: 17vw; transform: rotate(10deg); }
.ghost-one { right: 5vw; top: 7vh; } .ghost-two { left: 8vw; bottom: 2vh; }

.constellation::before { background: rgba(17,16,14,.88); }
.constellation-map { position: absolute; inset: 18vh 6vw 14vh 12vw; width: 82vw; height: 62vh; overflow: visible; }
.constellation-line { fill: none; stroke: var(--lamp-gold); stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: pathDraw 3.2s ease forwards; }
.stars circle { fill: var(--onion-skin); stroke: var(--oxidized-mint); stroke-width: 3; filter: drop-shadow(0 0 12px rgba(231,184,75,.45)); }
.star-letters { position: absolute; inset: 18vh 6vw 14vh 12vw; color: var(--onion-skin); font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.star-letters span { position: absolute; transition: transform .3s ease, color .3s ease; cursor: crosshair; }
.star-letters span:nth-child(1){left:14%;top:51%}.star-letters span:nth-child(2){left:25%;top:28%}.star-letters span:nth-child(3){left:38%;top:41%}.star-letters span:nth-child(4){left:49%;top:20%}.star-letters span:nth-child(5){left:60%;top:45%}.star-letters span:nth-child(6){left:72%;top:32%}.star-letters span:nth-child(7){left:82%;top:60%}.star-letters span:nth-child(8){left:91%;top:38%}
.star-letters span:hover { transform: scale(1.8); color: var(--lamp-gold); }
.constellation-copy { position: absolute; left: 13vw; bottom: 10vh; width: min(620px, 58vw); color: var(--onion-skin); }

.net-gate::before { background: rgba(244,235,221,.9); clip-path: polygon(0 8%, 88% 0, 100% 94%, 8% 100%); }
.net-emblem { margin-left: 16vw; position: relative; }
.net-emblem h2 { color: var(--ink-black); letter-spacing: -.05em; }
.net-emblem em { color: var(--blueprint-blue); font-style: normal; margin-left: 10vw; }
.moon { position: absolute; left: 33%; top: -6%; width: 120px; height: 120px; border-radius: 50%; background: var(--lamp-gold); display: grid; place-items: center; font-family: "Chonburi", serif; font-size: 90px; color: var(--ink-black); box-shadow: inset -16px -10px 0 rgba(185,168,143,.45); }
.gate-copy { width: min(660px, 60vw); margin-left: auto; margin-right: 10vw; color: var(--graphite-violet); }
.final-coordinates { position: absolute; bottom: 9vh; left: 11vw; right: 11vw; display: flex; justify-content: space-between; font-size: 12px; color: var(--cinnabar-seal); }
.cursor-thread { position: fixed; inset: 0; pointer-events: none; z-index: 18; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(231,184,75,.24), transparent 90px); transition: opacity .25s ease; }
.cursor-thread.visible { opacity: 1; }

@keyframes fadeProof { from { opacity: 0; transform: translateY(18px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(-1deg); } }
@keyframes sealLand { from { opacity: 0; transform: translateY(-80px) rotate(24deg) scale(1.2); } to { opacity: 1; transform: translateY(0) rotate(7deg) scale(1); } }
@keyframes pathDraw { to { stroke-dashoffset: 0; } }
@keyframes lineGrow { from { width: 0; } to { width: 100%; } }
@keyframes glyphCheck { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
@keyframes impression { from { opacity: 0; transform: scale(1.4) rotate(var(--r)); filter: blur(3px); } to { opacity: .88; transform: scale(1) rotate(var(--r)); filter: blur(.3px); } }

@media (max-width: 760px) {
    .registration-strip { left: 8px; }
    .hero-stamp { margin-left: 16vw; }
    .hero-stamp h1, .hero-stamp .blue-offset { font-size: 18vw; white-space: normal; }
    .primary-seal { right: 10vw; top: 50vh; }
    .whisper, .editorial-block, .gate-copy, .constellation-copy, .seal-copy { width: 72vw; right: 8vw; }
    .seal-composition { flex-direction: column; align-items: flex-start; margin-left: 18vw; }
    .seal-target { width: 70vw; height: 330px; }
    .romanization { font-size: 18vw; }
    .glyph-specimens { opacity: .35; right: 4vw; }
}