/* =========================================================
   FAIL / SAFE — 한성운
   세 가지 상태의 팔레트가 곧 콘셉트:
   우주(심연 남색) / 페일세이프 겉면(눈부신 흰색+코발트) / 과부하(잿빛 검정+적색)
   ========================================================= */
:root {
  --abyss: #040817;
  --abyss-2: #0A1433;
  --cobalt: #2440E0;
  --cobalt-soft: #5D78FF;
  --frost: #EEF2FA;
  --frost-2: #DCE3F1;
  --steel: #8C97AE;
  --ink: #0B1536;
  --ember: #E3242B;
  --ember-hot: #FF5A3C;
  --ash: #0D0506;

  --f-sans: "IBM Plex Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
  --f-serif: "Noto Serif KR", "Noto Serif CJK KR", serif;
  --f-raw: "Black Han Sans", "Noto Sans CJK KR", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--abyss); }
body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  background: var(--abyss);
  color: var(--frost);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt-soft); outline-offset: 3px; }
[hidden] { display: none !important; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }
.flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--ember); opacity: 0; mix-blend-mode: screen; }
.flash.is-on { animation: flash .5s steps(4) forwards; }
@keyframes flash { 0%{opacity:.55} 25%{opacity:0} 50%{opacity:.35} 100%{opacity:0} }

main { position: relative; z-index: 2; }

/* ---------- 게이트 ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  padding: var(--gutter); text-align: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(36,64,224,.18), transparent 60%), var(--abyss);
  transition: opacity 1.2s var(--ease), visibility 1.2s;
}
.gate.is-gone { opacity: 0; visibility: hidden; }
.gate__mark { font-family: var(--f-mono); font-weight: 500; font-size: clamp(40px, 9vw, 120px); letter-spacing: .04em; line-height: 1; margin-bottom: 28px; display: flex; align-items: baseline; }
.gate__fail { color: transparent; -webkit-text-stroke: 1px rgba(238,242,250,.28); }
.gate__slash { color: var(--ember); margin: 0 .12em; font-weight: 400; animation: slash 3.2s infinite; }
.gate__safe { color: var(--frost); }
@keyframes slash { 0%,92%,100%{opacity:1} 94%{opacity:.1} 96%{opacity:1} 97%{opacity:.2} }
.gate__enter {
  border: 1px solid var(--frost); background: var(--frost); color: var(--abyss);
  padding: 14px 30px; border-radius: 999px; font-weight: 600; letter-spacing: .02em;
  transition: background .3s, color .3s;
}
.gate__enter:hover { background: transparent; color: var(--frost); }
.gate__mute { background: none; border: 0; color: var(--steel); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.gate__note { margin: 18px 0 0; font-size: 13px; color: var(--steel); }

.sound-toggle {
  position: fixed; right: var(--gutter); bottom: 22px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(238,242,250,.25); background: rgba(4,8,23,.5); backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.sound-toggle__bars { display: flex; gap: 3px; align-items: center; height: 16px; }
.sound-toggle__bars i { width: 2px; height: 100%; background: currentColor; animation: bars 1s ease-in-out infinite; }
.sound-toggle__bars i:nth-child(2){animation-delay:-.3s} .sound-toggle__bars i:nth-child(3){animation-delay:-.6s} .sound-toggle__bars i:nth-child(4){animation-delay:-.15s}
@keyframes bars { 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} }
.sound-toggle[aria-pressed="false"] .sound-toggle__bars i { animation: none; transform: scaleY(.15); }
body.is-bright .sound-toggle { color: var(--ink); background: rgba(238,242,250,.7); border-color: rgba(11,21,54,.2); }

/* ---------- 1. 프롤로그 ---------- */
.prologue { height: 320vh; }
.prologue__stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; text-align: center; padding: var(--gutter);
}
.prologue__line, .prologue__name { grid-area: 1 / 1; margin: 0; opacity: 0; will-change: opacity, transform, filter; }
.prologue__line {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(22px, 3.6vw, 44px); letter-spacing: .08em; color: var(--frost);
}
.prologue__name { display: grid; justify-items: center; gap: 14px; }
.prologue__name .hanja { font-family: var(--f-serif); font-weight: 900; font-size: clamp(64px, 15vw, 210px); line-height: 1; display: flex; gap: .06em; }
.prologue__name .hanja b { font-weight: 900; display: inline-block; color: var(--frost); text-shadow: 0 0 40px rgba(93,120,255,.45); }
.prologue__name .hanja b:nth-child(2) { color: #fff; text-shadow: 0 0 22px #fff, 0 0 70px rgba(150,180,255,.9); }
.prologue__name .hangul { font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .6em; padding-left: .6em; color: var(--steel); }
.prologue__cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12px; color: var(--steel); letter-spacing: .3em; padding-left: .3em;
  display: grid; justify-items: center; gap: 10px;
}
.prologue__cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--steel), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%{transform:scaleY(0)} 60%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} }

/* ---------- 2. 페일세이프 홍보 필름 ---------- */
/* 스크롤이 곧 재생 헤드. 무대(stage)는 화면에 고정되고 샷·자막·로고·사내 문서가 진행도에 따라 겹쳐진다. */
.corp { position: relative; height: 760vh; background: var(--abyss); --pen: "Nanum Pen Script", "Noto Sans CJK KR", cursive; }
.corp__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--frost); }
.corp__stage > * { position: absolute; }
[data-r] { opacity: 0; will-change: opacity, transform; }

.shot { inset: 0; margin: 0; }
.shot img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 40%;
  transform: scale(var(--s, 1.1)) translate(var(--x, 0%), var(--y, 0%)); filter: saturate(var(--sat, 1)) brightness(var(--bri, 1)); }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,23,.35) 0%, transparent 30%, transparent 55%, rgba(4,8,23,.75) 100%); }

/* 휴대폰 세로 화면: 가로 일러스트를 가로 틀 그대로 */
.corp__stage.is-framed .shot { background: #000; overflow: hidden; }
.corp__stage.is-framed .shot::before { content: ""; position: absolute; inset: -60px; background: var(--src) center / cover no-repeat; filter: blur(28px) brightness(.32) saturate(1.1); transform: scale(1.1); }
.corp__stage.is-framed .shot img { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1400 / 958; object-fit: cover; translate: 0 -55%; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.corp__stage.is-framed .shot::after { background: linear-gradient(180deg, rgba(4,8,23,.25) 0%, transparent 25%, transparent 60%, rgba(4,8,23,.55) 100%); }
.corp__wash { inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(10,20,51,.86), rgba(4,8,23,.97)); opacity: var(--wash, 0); pointer-events: none; }
.corp__wash::after { /* 사내 문서 단계에서 드러나는 서류 격자 */
  content: ""; position: absolute; inset: 0; opacity: var(--grid, 0);
  background-image: linear-gradient(rgba(140,151,174,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(140,151,174,.09) 1px, transparent 1px);
  background-size: 32px 32px;
}
.letterbox { inset: 0; pointer-events: none; z-index: 4; }
.letterbox i { position: absolute; left: 0; right: 0; height: var(--lb, 0px); background: #000; }
.letterbox i:first-child { top: 0; } .letterbox i:last-child { bottom: 0; }

.corp__bar { top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: calc(14px + var(--lb, 0px)) var(--gutter) 14px; transition: color .6s, padding .2s; }
.logo { font-family: var(--f-mono); font-weight: 500; font-size: 18px; letter-spacing: .06em; display: flex; }
.logo__dash, .logo__safe { color: var(--cobalt-soft); }
.logo.is-scarred .logo__fail { color: var(--ember); }
.corp__rec { margin: 0; font-family: var(--f-mono); font-size: 12px; opacity: .75; display: flex; align-items: center; gap: 8px; }
.corp__rec b { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.corp__stage.is-feature .corp__bar { background: rgba(4,8,23,.92); border-bottom: 1px solid rgba(140,151,174,.18); }
.corp__staff { color: inherit; text-decoration: none; font-size: 14px; border-bottom: 1px solid currentColor; }

.caption { left: var(--gutter); right: var(--gutter); bottom: calc(var(--lb, 0px) + 7vh); z-index: 5; margin: 0; text-align: center;
  font-weight: 300; font-size: clamp(20px, 2.6vw, 38px); line-height: 1.5; letter-spacing: .01em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.7); }

.brand { inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(14px, 2.4vh, 28px);
  padding: 80px var(--gutter) 40px; color: var(--frost); }
.brand__mark { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: clamp(56px, 12.5vw, 210px); line-height: .95; letter-spacing: .01em;
  display: flex; transform: scale(calc(1 + (1 - var(--in, 1)) * .14)); filter: blur(calc((1 - var(--in, 1)) * 10px)); }
.brand__dash, .brand__mark span:last-child { color: var(--cobalt-soft); }
.brand__mark { text-shadow: 0 0 60px rgba(93,120,255,.35); }
.brand__tag { position: relative; margin: 0; font-size: clamp(17px, 2vw, 28px); font-weight: 400; display: grid; justify-items: center; }
.brand__ark { position: relative; display: inline-block; }

.ink { pointer-events: none; }
.ink--strike { position: absolute; left: 50%; top: .78em; width: min(100%, 22em); height: 3px; background: var(--ember-hot);
  transform: translateX(-50%) rotate(-1.5deg) scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.6,0,.2,1); border-radius: 2px; }
.ink--strike.on { transform: translateX(-50%) rotate(-1.5deg) scaleX(1); }
.ink--note { font-family: var(--pen); font-style: normal; color: var(--ember-hot); display: block; line-height: 1.1;
  clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(14); transform: rotate(-2deg); }
.ink--note.on { clip-path: inset(0 0 0 0); }
.ink--note-tag { font-size: clamp(30px, 3.6vw, 52px); margin-top: 4px; }

.facts { list-style: none; margin: clamp(8px, 3vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); width: min(1040px, 100%); }
.facts li { display: grid; gap: 2px; justify-items: center; }
.facts strong { font-family: var(--f-mono); font-weight: 400; font-size: clamp(30px, 4vw, 58px); color: var(--cobalt-soft); line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts span { font-size: 14px; color: var(--steel); }
.facts .ink--note { font-size: clamp(20px, 2vw, 28px); margin-top: 6px; }

.stamp { position: absolute; z-index: 2; font-family: var(--f-raw); color: var(--ember-hot); border: 3px solid var(--ember-hot); border-radius: 4px; padding: .1em .45em;
  font-size: clamp(22px, 3vw, 44px); letter-spacing: .04em; line-height: 1.2; white-space: nowrap; text-shadow: 0 0 18px rgba(255,90,60,.35);
  opacity: 0; transform: rotate(var(--rot, -12deg)) scale(2.2); transition: transform .22s cubic-bezier(.5,0,.2,1.4), opacity .12s; }
.stamp.on { opacity: .88; transform: rotate(var(--rot, -12deg)) scale(1); }
.stamp--a { top: 16%; right: 9%; --rot: 11deg; }
.stamp--b { bottom: 9%; left: 7%; --rot: -7deg; }

.feature { inset: 0; z-index: 5; background: radial-gradient(ellipse 90% 80% at 80% 50%, var(--abyss-2), var(--abyss)); color: var(--frost); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.feature__img { margin: 0; position: relative; overflow: hidden; }
.feature__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; transition: filter 1.2s var(--ease), transform 6s linear; transform: scale(1.04); }
.feature.is-flipped .feature__img img { filter: grayscale(.85) contrast(1.08) brightness(.95); transform: scale(1.0); }
.feature__img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 70%, var(--abyss) 100%); }
.feature__img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(4,8,23,0) 0 3px, rgba(4,8,23,.25) 3px 4px); opacity: 0; transition: opacity 1s; }
.feature.is-flipped .feature__img::after { opacity: 1; }
.feature__side { display: grid; grid-template-rows: 1fr auto; align-items: center; gap: 24px; padding: calc(70px + var(--lb, 0px)) clamp(20px, 5vw, 80px) 48px; min-width: 0; }
.feature__hero, .sheet { grid-area: 1 / 1; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.feature.is-flipped .feature__hero { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.feature__kicker { margin: 0 0 6px; color: var(--cobalt-soft); font-weight: 600; font-size: 14px; }
.feature h3 { margin: 0; font-size: clamp(44px, 6vw, 92px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.feature__role { margin: 12px 0 24px; color: var(--steel); font-size: 15px; line-height: 1.6; }
.feature blockquote { margin: 0 0 16px; padding-left: 18px; border-left: 2px solid var(--cobalt-soft); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; color: #C8D0E2; max-width: 30em; }
.feature__foot { margin: 6px 0 0; display: inline-block; padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--frost); border: 1px dashed rgba(255,90,60,.6); background: rgba(227,36,43,.08); }
.feature__foot::before { content: "편집자 주"; display: block; font-size: 12px; font-weight: 400; color: var(--ember-hot); margin-bottom: 2px; }

.sheet { position: relative; opacity: 0; transform: translateY(24px); background: rgba(10,20,51,.85); border: 1px solid rgba(140,151,174,.3); padding: clamp(18px, 2.4vw, 30px); max-width: 560px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.feature.is-flipped .sheet { opacity: 1; transform: none; }
.sheet__head { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--frost); display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 18px; }
.sheet__head span:last-child { font-family: var(--f-mono); font-weight: 400; font-size: 14px; color: var(--steel); }
.sheet dl { margin: 0; display: grid; }
.sheet dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(140,151,174,.16); font-size: 14px; }
.sheet dt { color: var(--steel); }
.sheet dd { margin: 0; font-weight: 600; }
.stamp--c { right: -10px; bottom: -18px; --rot: -9deg; font-size: clamp(22px, 2.4vw, 34px); background: rgba(13,5,6,.75); }
.feature.is-flipped .stamp--c { opacity: .9; transform: rotate(-9deg) scale(1); transition-delay: .7s; }
/* 관리 콘솔로 넘어가는 문: 기업 버튼이 아니라 관리국 단말기의 접속 막대 */
.access { justify-self: start; display: grid; grid-template-columns: auto auto auto; align-items: stretch; text-decoration: none; color: var(--frost);
  font-family: var(--f-mono); border: 1px solid rgba(93,120,255,.55); background: rgba(4,8,23,.75); transition: border-color .4s, box-shadow .4s; max-width: 100%; }
.access__tag { display: grid; place-items: center; padding: 0 14px; font-size: 12px; color: var(--cobalt-soft); background: rgba(36,64,224,.14); border-right: 1px solid rgba(93,120,255,.35); transition: color .4s, background .4s, border-color .4s; white-space: nowrap; }
.access__label { padding: 14px 4px 14px 18px; font-family: var(--f-sans); font-weight: 600; font-size: 15px; min-width: 9.5em; white-space: nowrap; }
.access__cursor { width: 9px; margin: 14px 16px 14px 2px; background: var(--frost); animation: rec 1s steps(2) infinite; }
.access:hover, .access:focus-visible { border-color: var(--frost); box-shadow: 0 0 0 4px rgba(93,120,255,.15); }
.feature.is-flipped .access { border-color: rgba(255,90,60,.7); }
.feature.is-flipped .access__tag { color: var(--ember-hot); background: rgba(227,36,43,.14); border-color: rgba(255,90,60,.4); }
.access.is-checking .access__label { color: var(--steel); }
.access.is-granted { border-color: var(--frost); box-shadow: 0 0 0 4px rgba(238,242,250,.12); }
.access.is-granted .access__label { color: #fff; }
.access.is-granted .access__cursor { animation: none; opacity: 0; }

.corp__progress { left: 0; right: 0; bottom: var(--lb, 0px); height: 2px; background: rgba(238,242,250,.12); z-index: 7; }
.corp__progress i { display: block; height: 100%; width: 0; background: var(--ember); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid currentColor; background: none; transition: background .3s, color .3s, border-color .3s; }
.btn--corp { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.btn--corp:hover { background: var(--frost); border-color: var(--frost); color: var(--abyss); }
.btn--ghost { color: var(--frost); border-color: rgba(238,242,250,.35); }
.btn--ghost:hover { border-color: var(--frost); }

/* ---------- 3. 관리 콘솔 (속) ---------- */
.console {
  position: relative; padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(140px, 16vw, 240px); min-height: 100vh;
  background: linear-gradient(180deg, rgba(4,8,23,.92), rgba(4,8,23,.55) 30%, rgba(4,8,23,.75));
  transition: background 1s;
}
.console__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; border-bottom: 1px solid rgba(140,151,174,.25); padding-bottom: 18px; }
.console__sys { margin: 0; font-family: var(--f-mono); font-size: 13px; color: var(--steel); }
.console__title { margin: 0; font-weight: 300; font-size: clamp(18px, 2vw, 24px); color: var(--steel); }
.console__title span { color: var(--frost); font-weight: 600; margin-left: 10px; }

.console__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.console__left { position: sticky; top: 24px; }
.console__portrait { position: relative; aspect-ratio: 1400 / 958; background: #020510; border: 1px solid rgba(140,151,174,.2); }
.console__portrait canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.console__hint { margin: 10px 0 0; font-size: 13px; color: var(--steel); }
.fragments { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fragment {
  position: absolute; font-family: var(--f-sans); font-weight: 600; white-space: nowrap;
  color: rgba(238,242,250,.9); text-shadow: 0 0 12px rgba(227,36,43,.8);
  animation: frag 2.6s var(--ease) forwards;
}
@keyframes frag {
  0% { opacity: 0; transform: translate(0,0) scale(.9); filter: blur(6px); }
  15% { opacity: 1; filter: blur(0); }
  70% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15); filter: blur(4px); }
}

.spec { margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(140,151,174,.2); border: 1px solid rgba(140,151,174,.2); }
.spec div { background: rgba(4,8,23,.85); padding: 14px 16px; }
.spec dt { font-size: 12px; color: var(--steel); }
.spec dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.spec div:first-child dd { font-family: var(--f-mono); font-size: 28px; font-weight: 500; color: var(--cobalt-soft); line-height: 1.2; }

.meter { margin-bottom: 36px; }
.meter__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; color: var(--steel); }
.meter__top output { font-family: var(--f-mono); font-size: 32px; color: var(--frost); font-variant-numeric: tabular-nums; line-height: 1; transition: color .4s; }
.meter__track { height: 10px; background: rgba(140,151,174,.15); position: relative; overflow: hidden; }
.meter__track::after { /* 눈금 */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), rgba(4,8,23,.9) calc(5% - 2px) 5%);
}
.meter__fill { position: absolute; inset: 0 auto 0 0; width: 12%; background: linear-gradient(90deg, var(--cobalt), var(--cobalt-soft)); transition: width .9s var(--ease), background .6s; }
.ecg { width: 100%; height: 54px; display: block; margin-top: 10px; }
.meter__state { margin: 6px 0 0; font-size: 14px; color: var(--steel); min-height: 1.7em; }
.console.is-hot .meter__fill { background: linear-gradient(90deg, var(--cobalt), var(--ember)); }
.console.is-hot .meter__top output { color: var(--ember-hot); }
.console.is-critical .meter__fill { background: var(--ember); animation: pulse .5s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.logs__title { margin: 0 0 6px; font-weight: 600; font-size: 16px; }
.logs__warn { margin: 0 0 12px; padding: 8px 12px; font-size: 13px; color: #FFB8A8; background: rgba(227,36,43,.1); border-left: 2px solid var(--ember); }
.log.is-next .log__tag { color: var(--frost); }
.log.is-next .log__tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); margin-right: 6px; vertical-align: middle; animation: rec 1s steps(2) infinite; }
.logs__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.logs__list li + li { border-top: 1px solid rgba(140,151,174,.18); }
.log {
  width: 100%; display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
  background: none; border: 0; padding: 14px 4px; text-align: left; transition: background .25s, padding .25s;
}
.log:hover, .log:focus-visible { background: rgba(36,64,224,.12); padding-left: 12px; }
.log__date { font-family: var(--f-mono); font-size: 13px; color: var(--steel); }
.log__name { font-size: 15px; }
.log__tag { font-size: 12px; color: var(--steel); }
.log.is-read .log__name { color: var(--steel); }
.log.is-read .log__tag { color: var(--ember-hot); }
.log.is-sealed { cursor: not-allowed; }
.log.is-sealed .log__name { color: transparent; background: repeating-linear-gradient(90deg, rgba(140,151,174,.35) 0 10px, transparent 10px 12px); border-radius: 2px; user-select: none; }

.report { animation: fadein .35s var(--ease); }
.console__data.is-reading .logs { display: none; }
.report__inner { background: rgba(10,20,51,.9); border: 1px solid rgba(140,151,174,.3); padding: clamp(20px, 3vw, 32px); position: relative; }
.report__inner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ember); }
.report__meta { margin: 0 0 6px; font-family: var(--f-mono); font-size: 13px; color: var(--steel); }
.report__title { margin: 0 0 18px; font-size: 22px; font-weight: 600; }
.report__body { margin: 0 0 18px; color: #C8D0E2; min-height: 5.1em; white-space: pre-line; }
.echo__line { display: block; }
.echo__line + .echo__line { margin-top: 14px; }
.echo__line.is-static { animation: static .11s steps(2) infinite; }
@keyframes static {
  0% { transform: translate(0, 0); text-shadow: 2px 0 rgba(93,120,255,.75), -2px 0 rgba(227,36,43,.75); opacity: 1; }
  50% { transform: translate(-2px, 1px) skewX(-6deg); text-shadow: -3px 0 rgba(93,120,255,.75), 3px 0 rgba(227,36,43,.75); opacity: .72; }
  100% { transform: translate(1px, -1px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .echo__line.is-static { animation: none; } }
.echo__merge { position: relative; display: block; }
.echo__merge .layer { display: block; transition: transform 1.7s cubic-bezier(.6,0,.2,1), opacity 1.7s; }
.echo__merge .layer--other { transform: translate(-7px, 3px); }
.echo__merge .layer--self { position: absolute; inset: 0; color: var(--frost); text-shadow: none; opacity: .7; mix-blend-mode: screen; transform: translate(9px, -4px); }
.echo__merge.is-merged .layer { transform: none; }
.echo__merge.is-merged .layer--self { opacity: .38; }
.report__who { margin: 0 0 6px; font-family: var(--f-mono); font-size: 12px; color: var(--steel); min-height: 1.4em; }
.report__who.is-flip { color: var(--ember-hot); text-shadow: 2px 0 rgba(93,120,255,.7), -2px 0 rgba(227,36,43,.7); }
.report__echo { margin: 0 0 24px; font-family: var(--f-raw); font-size: clamp(22px, 3vw, 30px); color: var(--echo, var(--ember-hot)); text-shadow: 0 0 calc(var(--heat, 0) * 22px) rgba(227,36,43,calc(var(--heat, 0) * .7)); line-height: 1.35; min-height: 1.35em; letter-spacing: .01em; }

/* 과부하가 오르면 콘솔 전체가 미세하게 붉어짐 */
body[data-mode="console"] .console { background: linear-gradient(180deg, rgba(4,8,23,.92), rgba(4,8,23,.5) 30%, rgba(4,8,23,.75)); }
.console.is-hot { background: linear-gradient(180deg, rgba(4,8,23,.92), rgba(20,4,8,.55) 30%, rgba(13,5,6,.8)); }

/* ---------- 4. 아카이브 ---------- */
.archive { padding: clamp(80px, 10vw, 140px) var(--gutter); background: rgba(4,8,23,.82); }
.archive__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.archive__head h2 { margin: 0; font-family: var(--f-serif); font-weight: 900; font-size: clamp(32px, 4vw, 54px); line-height: 1.1; }
.tabs { display: flex; border: 1px solid rgba(140,151,174,.35); border-radius: 999px; padding: 4px; }
.tabs button { border: 0; background: none; padding: 10px 20px; border-radius: 999px; font-size: 14px; color: var(--steel); transition: background .3s, color .3s; }
.tabs button[aria-selected="true"] { background: var(--frost); color: var(--abyss); font-weight: 600; }
#tabOver[aria-selected="true"] { background: var(--ember); color: #fff; }
.tabs button.is-locked::after { content: " 잠김"; font-size: 12px; opacity: .7; }
.archive__lock { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.archive__lock p { margin: 0; color: var(--steel); font-size: 15px; max-width: 40em; }
.archive__grid.is-sealed button { cursor: not-allowed; }
.archive__grid.is-sealed img { filter: blur(14px) grayscale(.6) brightness(.55); transform: scale(1.08); }
.archive__grid.is-sealed button:hover img { filter: blur(10px) grayscale(.4) brightness(.65); transform: scale(1.08); }
.archive__grid.is-sealed button::after { content: "잠김"; position: absolute; left: 12px; bottom: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ember-hot); }
.archive__grid { columns: 3 280px; column-gap: 14px; }
.archive__grid button { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: none; break-inside: avoid; overflow: hidden; position: relative; }
.archive__grid img { width: 100%; transition: transform .8s var(--ease), filter .8s; filter: saturate(.85); }
.archive__grid button:hover img, .archive__grid button:focus-visible img { transform: scale(1.04); filter: saturate(1.05); }
.archive__grid.is-entering button { animation: tile .7s var(--ease) both; }
@keyframes tile { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

.end { position: relative; z-index: 2; padding: clamp(100px, 14vw, 200px) var(--gutter) 60px; text-align: center; display: grid; justify-items: center; gap: 28px; background: linear-gradient(rgba(4,8,23,.82), var(--abyss)); }
.end__line { margin: 0; font-family: var(--f-serif); font-weight: 300; font-size: clamp(20px, 2.6vw, 32px); letter-spacing: .02em; max-width: 22em; }
.btn--end { background: var(--frost); border-color: var(--frost); color: var(--abyss); padding: 16px 34px; }
.btn--end:hover { background: transparent; color: var(--frost); }
.end__credit { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; font-size: 13px; color: var(--steel); }
.end__credit p { margin: 0; }
.end__credit a { color: var(--frost); text-underline-offset: 3px; }
.end__ver { margin: 0; font-family: var(--f-mono); font-size: 11px; color: rgba(140,151,174,.5); }

/* ---------- 5. 장악(takeover) ---------- */
.takeover {
  position: fixed; inset: 0; z-index: 85; background: var(--ash); color: #F6E9E9;
  display: grid; overflow: hidden;
  transition: background 2.4s var(--ease);
}
.takeover { transition: background 5s var(--ease); }
.takeover.is-calm { background: #0A0607; }
.takeover.is-calm .takeover__portrait { opacity: 0; transition: opacity 1.4s var(--ease); }
.takeover.is-solo .takeover__stage { grid-template-columns: 1fr; justify-items: center; }
.takeover.is-solo .takeover__portrait { display: none; }
.takeover.is-solo .takeover__text { justify-items: center; text-align: center; width: min(960px, 100%); }
.takeover.is-solo .takeover__next { justify-self: center; }
.takeover__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); background: #000; }
.takeover__vid--deep { z-index: 0; transition-duration: 1.2s; }
.takeover__vid--breach { z-index: 4; }
.takeover.is-cutscene .takeover__vid--breach { opacity: 1; transition-duration: .25s; }
.takeover.is-guiding .takeover__vid--deep { opacity: 1; }
.takeover.is-guiding .takeover__line, .takeover.is-guiding .guide__help { text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.takeover__stage { position: relative; z-index: 1; }
.takeover__mark { position: absolute; top: 18px; left: var(--gutter); font-family: var(--f-mono); font-size: 18px; letter-spacing: .06em; display: flex; z-index: 3; }
.t-fail { color: var(--ember); }
.t-safe { color: var(--frost); margin-left: .3em; position: relative; }
.takeover .t-safe { animation: safeDie 1.4s steps(8) forwards .3s; }
@keyframes safeDie { 0%{opacity:1} 20%{opacity:.2; transform:translateX(3px)} 40%{opacity:1; transform:none} 60%{opacity:.1} 80%{opacity:.6; transform:translateX(-2px)} 100%{opacity:0} }
.takeover.is-calm .t-safe { animation: safeBack 1.6s var(--ease) forwards; }
@keyframes safeBack { from{opacity:0} to{opacity:1} }
.takeover.is-calm .t-fail { color: rgba(238,242,250,.35); transition: color 2s; }

.takeover__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 5vw, 80px); padding: 70px var(--gutter) 40px; height: 100%; }
.takeover__portrait { width: 100%; max-height: calc(100svh - 120px); aspect-ratio: 1700 / 2485; justify-self: center; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.takeover.is-showing .takeover__portrait { opacity: 1; }
.takeover__text { display: grid; align-content: center; gap: 28px; min-height: 50vh; }
.takeover__line {
  margin: 0; font-family: var(--f-raw); font-weight: 400; font-size: clamp(30px, 4.6vw, 68px); line-height: 1.28;
  letter-spacing: -.005em; min-height: 2.6em; text-wrap: balance;
}
.takeover__line .word { display: inline-block; white-space: nowrap; }
.takeover__line .glyph { display: inline-block; animation: glyph .4s steps(3) both; }
@keyframes glyph { 0%{opacity:0; transform:translateY(.15em); color: var(--ember)} 60%{opacity:1} 100%{opacity:1; transform:none} }
.takeover__line.is-small { font-size: clamp(22px, 2.8vw, 38px); }
.takeover__next { justify-self: start; border: 0; background: none; color: rgba(246,233,233,.6); font-size: 15px; padding: 8px 0; border-bottom: 1px solid currentColor; }
.takeover__next:hover { color: #fff; }
.takeover__skip { position: absolute; top: 14px; right: var(--gutter); border: 0; background: none; color: rgba(246,233,233,.45); font-size: 13px; padding: 8px; z-index: 3; }

.dossier { border: 1px solid rgba(227,36,43,.45); padding: 20px 22px; background: rgba(227,36,43,.05); max-width: 34em; animation: fadein .6s var(--ease); }
.dossier__meta { margin: 0 0 10px; font-family: var(--f-mono); font-size: 13px; color: var(--ember-hot); }
.dossier__body { margin: 0; font-size: 16px; line-height: 1.9; color: #E9D7D7; }
.d-line { display: block; }
.redact { background: #E9D7D7; color: transparent; padding: 0 4px; transition: background .9s var(--ease), color .9s; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.redact.is-open { background: transparent; color: var(--ember-hot); }

.guide { display: grid; justify-items: start; gap: 14px; }
.guide__btn { position: relative; width: 132px; height: 132px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.guide__btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.guide__track { fill: rgba(238,242,250,.04); stroke: rgba(238,242,250,.25); stroke-width: 1.5; }
.guide__ring { fill: none; stroke: var(--frost); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; }
.guide__btn span { font-weight: 600; font-size: 17px; letter-spacing: .1em; padding-left: .1em; }
.guide__btn::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(93,120,255,.35), transparent 70%); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .5; } }
.guide__btn.is-holding::before { animation-duration: .6s; }
.guide__help { margin: 0; font-size: 13px; color: rgba(246,233,233,.55); max-width: 22em; }

/* 장악 중 흔들림 */
.takeover.is-shaking .takeover__stage { animation: shake .4s linear; }
@keyframes shake { 20%{transform:translate(-6px,2px)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-3px,-2px)} 80%{transform:translate(3px,2px)} }

/* ---------- 라이트박스 ---------- */
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(2,4,12,.94); display: grid; place-items: center; padding: 50px var(--gutter); animation: fadein .3s; }
.lightbox img { max-height: calc(100svh - 100px); width: auto; max-width: 100%; object-fit: contain; }
.lightbox__close { position: absolute; top: 14px; right: var(--gutter); border: 0; background: none; color: var(--frost); font-size: 15px; padding: 8px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(238,242,250,.06); color: var(--frost); font-size: 32px; }
.lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }

/* ---------- 반응형 ---------- */
/* 휴대폰·태블릿(터치 기기)에서만: PC는 창이 좁아도 그대로 */
.mini-meter { display: none; }
@media (max-width: 900px) {
  /* 휴대폰: 초상 아래 붙는 작은 과부하 막대. 기록 카드를 보면서도 수치가 보인다 */
  .is-touch .mini-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--steel); }
  .is-touch .mini-meter i { height: 6px; background: rgba(140,151,174,.18); position: relative; overflow: hidden; }
  .is-touch .mini-meter b { position: absolute; inset: 0 auto 0 0; width: 12%; background: linear-gradient(90deg, var(--cobalt), var(--cobalt-soft)); transition: width .9s var(--ease); }
  .is-touch .console.is-hot .mini-meter b { background: linear-gradient(90deg, var(--cobalt), var(--ember)); }
  .is-touch .mini-meter output { font-family: var(--f-mono); font-size: 18px; color: var(--frost); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
  .is-touch .console.is-hot .mini-meter output { color: var(--ember-hot); }
}
@media (max-width: 900px) {
  /* 초상은 콘솔을 내려가는 동안 위에 붙어 있어서, 기록 대사와 초상 반응을 같이 볼 수 있다 */
  .is-touch .console__grid .console__left { position: sticky; top: 0; z-index: 3; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 10px; background: var(--abyss); }
  .is-touch .console__grid .console__left::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--abyss), transparent); pointer-events: none; }
  .is-touch .console__left .console__hint { display: none; }
  /* 큰 과부하 막대는 초상 아래 작은 막대와 겹치므로 숨기고 심전도와 상태 문구만 남긴다 */
  .is-touch .meter__top, .is-touch .meter__track { display: none; }
  .is-touch .archive__grid { columns: 2; column-gap: 8px; }
  .is-touch .archive__grid button { margin-bottom: 8px; }
}
@media (max-width: 900px) {
  .console__left { position: relative; top: 0; }
  .console__grid { grid-template-columns: 1fr; }
  .corp__rec { display: none; }
  .facts { grid-template-columns: 1fr; gap: 10px; }
  .facts li { grid-template-columns: auto auto; column-gap: 12px; align-items: baseline; justify-content: center; }
  .facts .ink--note { grid-column: 1 / -1; margin-top: 0; }
  .stamp--a { top: 12%; right: 4%; } .stamp--b { bottom: 6%; left: 4%; }
  .feature { grid-template-columns: 1fr; grid-template-rows: 38svh 1fr; }
  .feature__side { padding: 18px var(--gutter) 22px; gap: 14px; align-items: start; }
  .feature h3 { font-size: 40px; }
  .feature__role { margin: 6px 0 12px; }
  .feature blockquote { font-size: 14px; line-height: 1.7; }
  .sheet dl div { grid-template-columns: 7em 1fr; font-size: 13px; padding: 6px 0; }
  .sheet__head { font-size: 16px; }
  .access__tag { padding: 0 10px; font-size: 11px; }
  .access__label { min-width: 0; font-size: 14px; padding-left: 12px; }
  .takeover__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; align-items: start; padding-top: 56px; gap: 12px; overflow-y: auto; }
  .takeover__portrait { max-height: 38svh; width: auto; height: 38svh; }
  .takeover__text { min-height: 0; gap: 18px; align-content: start; padding-top: 12px; }
  .takeover__line { min-height: 2.6em; }
  .takeover__line.is-small { min-height: 3.9em; }
  .log { grid-template-columns: 74px 1fr; }
  .log__tag { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .gate__slash, .sound-toggle__bars i, .prologue__cue::after, .guide__btn::before { animation: none; }
  .flash.is-on { animation: none; }
  .takeover.is-shaking .takeover__stage { animation: none; }
  .fragment { animation-duration: 3.2s; }
}

/* 휴대폰: 가이딩 후 대사는 화면 한가운데 */
@media (max-width: 900px) {
  .takeover.is-solo .takeover__stage { grid-template-rows: 1fr; align-content: center; align-items: center; height: 100%; padding-top: 56px; padding-bottom: 56px; }
  .takeover.is-solo .takeover__text { padding-top: 0; align-content: center; }
}