*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:#0A0A14;overflow-x:hidden}
body{background:linear-gradient(180deg,#0A0A14 0%,#1A0A1E 100%);background-attachment:fixed;color:#A8A0B4;font-family:'Noto Sans KR',sans-serif;font-weight:300;font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;position:relative}
body.warmed{background:linear-gradient(180deg,#0A0A14 0%,#2A1A28 100%);background-attachment:fixed}
.siren-pulse{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;box-shadow:inset 0 0 200px rgba(224,60,60,0.03);animation:sirenPulse 6s ease-in-out infinite}
@keyframes sirenPulse{0%,100%{box-shadow:inset 0 0 200px rgba(224,60,60,0.03)}50%{box-shadow:inset 0 0 200px rgba(224,60,60,0.08)}}
.scan-lines{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-2;background:repeating-linear-gradient(180deg,transparent,transparent 3px,#ffffff08 3px,#ffffff08 4px)}
.foreground-lines{position:fixed;top:-50%;left:0;width:200%;height:200%;pointer-events:none;z-index:2;opacity:0.08;background:repeating-linear-gradient(-15deg,transparent,transparent 80px,#E03C3C 80px,#E03C3C 81px);animation:fgDrift 40s linear infinite}
@keyframes fgDrift{0%{transform:translateY(0)}100%{transform:translateY(200px)}}
.nav-line{position:fixed;top:0;left:0;width:100%;height:1px;background:#E03C3C;z-index:200;cursor:pointer;animation:navPulse 4s ease-in-out infinite}
@keyframes navPulse{0%,100%{opacity:0.3}50%{opacity:0.7}}
.nav-overlay{position:fixed;top:0;left:0;width:100%;padding:40px 0 30px;background:rgba(10,10,20,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:199;display:flex;justify-content:center;gap:40px;transform:translateY(-100%);transition:transform 0.4s ease;pointer-events:none}
.nav-overlay.open{transform:translateY(0);pointer-events:auto}
.nav-overlay a{font-family:'Noto Sans KR',sans-serif;font-weight:400;font-size:13px;color:#A8A0B4;text-decoration:none;letter-spacing:0.1em;transition:color 0.3s}
.nav-overlay a:hover{color:#E03C3C}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;padding-bottom:8vh}
.hero-line{width:0;height:1px;background:#E03C3C;animation:lineExpand 1.2s ease-out 0.8s forwards}
@keyframes lineExpand{0%{width:0}100%{width:min(80vw,600px)}}
.hero-title{font-family:'Noto Serif KR',serif;font-weight:900;font-size:52px;color:#E8E0D4;letter-spacing:0.08em;opacity:0;animation:fadeUp 1.5s ease-out 2s forwards}
@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.hero-sub{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:14px;color:#E03C3C;letter-spacing:0.15em;opacity:0;animation:fadeUp 1s ease-out 2.4s forwards}
.candle-container{position:absolute;bottom:0;left:0;width:100%;height:50%;pointer-events:none;overflow:hidden}
.narrative-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;padding:80px 20px;border-bottom:1px solid #3A2A44}
.narrative-section:last-of-type{border-bottom:none}
.watermark{position:absolute;left:20px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:'Noto Serif KR',serif;font-weight:900;font-size:120px;color:#2A1A30;opacity:0;pointer-events:none;z-index:0;transition:opacity 2s ease}
.watermark.visible{opacity:0.15}
.fracture-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fracture{stroke:#E03C3C;stroke-width:1;stroke-opacity:0.25;stroke-dasharray:1200;stroke-dashoffset:1200;fill:none;transition:stroke-dashoffset 0.8s ease-out}
.fracture.drawn{stroke-dashoffset:0}
.f2{transition-delay:0.2s}
.f3{transition-delay:0.4s}
.section-content{max-width:580px;position:relative;z-index:1}
h2{font-family:'Noto Serif KR',serif;font-weight:900;font-size:32px;color:#E8E0D4;letter-spacing:0.08em;margin-bottom:24px}
p{margin-bottom:16px}
.datestamp{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:12px;letter-spacing:0.15em;color:#E03C3C;margin-top:24px}
.redact{position:relative;display:inline}
.redact::after{content:'';position:absolute;top:-1px;left:-2px;right:-2px;bottom:-1px;background:#0A0A14;transform:scaleX(1);transform-origin:left;transition:transform 0.6s ease-out;pointer-events:none}
.redact.revealed::after{transform:scaleX(0);transform-origin:right}
.candle-section{cursor:crosshair}
.candle-field{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.candle-particle{position:absolute;border-radius:50%;pointer-events:none;animation:candleRise linear forwards}
@keyframes candleRise{0%{opacity:0;transform:translateY(0) translateX(0)}10%{opacity:var(--candle-opacity,0.4)}90%{opacity:var(--candle-opacity,0.4)}100%{opacity:0;transform:translateY(-100vh) translateX(var(--sway,20px))}}
.candle-spawn{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#D4A030,transparent);animation:candleFloat 6s ease-in-out infinite}
@keyframes candleFloat{0%,100%{transform:translateY(0) scale(1);opacity:0.5}50%{transform:translateY(-30px) scale(1.2);opacity:0.7}}
.site-footer{position:relative;z-index:1;text-align:center;padding:40px 20px 80px;border-top:1px solid #3A2A44}
.footer-domain{font-family:'Noto Serif KR',serif;font-weight:900;font-size:20px;color:#E8E0D4;letter-spacing:0.08em;opacity:0.4}
@media(max-width:600px){.hero-title{font-size:36px}.foreground-lines{display:none}h2{font-size:24px}.watermark{font-size:60px;left:10px}.nav-overlay{gap:20px;flex-wrap:wrap;padding:30px 20px 20px}.nav-overlay a{font-size:12px}.section-content{padding:0 10px}}
