/* ============================================================
   모르틱스 사내 전산망 — 모양

   바탕은 잿빛입니다. 문서 맨 위가 옅은 재, 바닥으로 갈수록 짙은 재.
   이승에서 저승으로 내려가는 쪽으로 깔아 두었습니다.

   글꼴은 둘을 섞습니다.
     · 프리텐다드 — 제목과 본문
     · IBM Plex Mono — 상단바 · 경로 · 수치 · 라벨
   ============================================================ */

:root{
  /* 재 */
  --ash-top:#4a4e56; --ash:#3a3e45; --ash-dn:#272a2e;
  --pane:#42464e;    --pane2:#4a4f58; --raise:#545a64;
  --line:#636974;    --line2:#4d525b;

  /* 글자 — 뼛빛 */
  --fg:#f1efea; --dim:#c2c0ba; --faint:#95948e;

  /* 오볼 황동 */
  --brass:#d3b96f; --brass-lt:#e6d49a; --brass-d:#9c8850;
  --verd:#87b3ad;

  /* 경보 — 이 화면에서 채도를 허락한 유일한 자리 */
  --red:#cf6459; --red-lt:#e58276; --amber:#d9ae4e; --green:#86b08e;

  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bar:46px; --path:32px; --dr:250px; --maxw:1020px;
  --p:30px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--ash-dn); }
body{
  margin:0; min-height:100vh; color:var(--fg);
  font-family:var(--sans); font-size:15px; line-height:1.85;
  letter-spacing:-.01em; word-break:keep-all; -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--ash-top) 0%,var(--ash) 38%,var(--ash-dn) 100%);
}
body.booting{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
[hidden]{ display:none !important; }
::selection{ background:var(--brass); color:#201c0e; }
:focus-visible{ outline:1px solid var(--brass); outline-offset:2px; }
.mono{ font-family:var(--mono); }

/* 떨어지는 재 */
#ash{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.42; }
#term,#boot,#sheet{ position:relative; z-index:1; }


/* ══════════ 오볼 ══════════ */
.coin{
  --cs:64px; width:var(--cs); height:var(--cs); border-radius:50%;
  flex:none; position:relative; display:grid; place-items:center;
  background:
    radial-gradient(circle at 70% 76%, rgba(111,155,149,.5), transparent 46%),
    radial-gradient(circle at 34% 28%, #d2c08a, #9b8650 52%, #5d5130 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -3px 9px rgba(0,0,0,.45),
    0 3px 16px rgba(0,0,0,.5);
}
.coin::before{
  content:''; position:absolute; inset:calc(var(--cs)*.085); border-radius:50%;
  border:1px solid rgba(46,38,16,.42);
}
.coin::after{
  content:'M'; font-family:var(--mono); font-weight:600;
  font-size:calc(var(--cs)*.4); color:#3b3219; line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}


/* ══════════ 접속 ══════════ */
#boot{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(180deg,#4a4e56,#272a2e);
  display:grid; place-items:center; padding:var(--p);
}
.boot-in{ text-align:center; }
.boot-coin{ --cs:76px; margin:0 auto 34px; }
#bootlog{
  margin:0 0 34px; font-family:var(--mono); font-size:13px; line-height:2.15;
  color:var(--dim); white-space:pre; text-align:left; min-height:15em;
}
#bootlog b{ color:var(--fg); font-weight:400; }
#bootlog .ok{ color:var(--green); }
#bootlog .am{ color:var(--brass); }
#bootlog .cur{ background:var(--brass); color:#201c0e; animation:blink 1.1s step-end infinite; }
@keyframes blink{ 50%{ background:transparent; color:transparent } }
#bootBtn{
  font-family:var(--mono); font-size:13px; letter-spacing:.34em;
  padding:12px 34px 12px 40px; border:1px solid var(--brass-d); color:var(--brass);
}
#bootBtn:hover{ background:var(--brass); color:#201c0e; border-color:var(--brass); }
body.leaving #boot{ opacity:0; transition:opacity .35s ease; }
body.entered #boot{ display:none; }


/* ══════════ 상단바 ══════════ */
#term{ opacity:0; }
body.entered #term{ opacity:1; transition:opacity .4s ease; }

#bar{
  position:fixed; top:0; left:0; right:0; z-index:70; height:var(--bar);
  display:flex; align-items:center; gap:16px; padding:0 18px;
  background:rgba(60,64,72,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); font-size:12px; white-space:nowrap;
}
#drawerBtn{
  display:flex; align-items:center; gap:9px; padding:7px 12px;
  border:1px solid var(--line); font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; color:var(--dim); flex:none;
}
#drawerBtn:hover{ color:var(--fg); border-color:var(--brass-d); }
#drawerBtn i{ display:none; }
.b-mark{ font-family:var(--mono); font-weight:600; letter-spacing:.14em; color:var(--fg); flex:none; }
.b-mark i{ color:var(--brass-d); font-style:normal; }
.b-seal{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--red-lt);
  border:1px solid rgba(181,84,74,.5); padding:3px 8px; flex:none;
}
.b-sp{ flex:1; }
.b-alert{ display:flex; align-items:center; gap:8px; color:var(--dim); font-family:var(--mono); font-size:11px; flex:none; }
.led{ width:7px; height:7px; border-radius:50%; flex:none; display:block; }
.led.ok{ background:var(--green); box-shadow:0 0 7px var(--green); }
.led.warn{ background:var(--amber); box-shadow:0 0 7px var(--amber); }
.led.bad{ background:var(--red); box-shadow:0 0 7px var(--red); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.35 } }
.b-clock{ font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; }

#path{
  position:fixed; top:var(--bar); left:0; right:0; z-index:69; height:var(--path);
  display:flex; align-items:center; gap:7px; padding:0 18px;
  background:rgba(48,52,59,.93); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line2);
  font-family:var(--mono); font-size:11.5px; white-space:nowrap; overflow:hidden;
}
.p-user{ color:var(--verd); } .p-c{ color:var(--faint); } .p-cmd{ color:var(--dim); }


/* ══════════ 자료 서랍 ══════════ */
#body{ display:flex; align-items:flex-start; padding-top:calc(var(--bar) + var(--path)); }

#drawer{
  width:var(--dr); flex:none; position:sticky;
  top:calc(var(--bar) + var(--path));
  height:calc(100vh - var(--bar) - var(--path));
  border-right:1px solid var(--line2);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
  display:flex; flex-direction:column; background:rgba(255,255,255,.028);
}
.dr-h{ flex:none; position:sticky; top:0; z-index:2; background:#3d4148;
  margin:0; padding:13px 18px 9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:var(--faint); border-bottom:1px solid var(--line2);
}
.dr-h i{ color:var(--brass-d); font-style:normal; }
#tree{
  padding:6px 0 4px; flex:1 0 auto;
}
.t-dir{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:5px 18px; font-family:var(--mono); font-size:12px; color:var(--dim);
}
.t-dir:hover{ color:var(--fg); background:rgba(255,255,255,.035); }
.t-dir .ar{ color:var(--faint); font-size:9px; width:8px; transition:transform .18s; }
.t-dir.open .ar{ transform:rotate(90deg); }
.t-kids{ display:none; }
.t-kids.open{ display:block; }
a.t-f{
  display:flex; align-items:center; gap:8px; padding:3.5px 18px;
  font-family:var(--mono); font-size:12px; color:var(--dim);
  border-left:2px solid transparent;
}
a.t-f.sub{ padding-left:34px; }
a.t-f:hover{ color:var(--fg); background:rgba(255,255,255,.035); }
a.t-f.on{ color:var(--brass-lt); border-left-color:var(--brass); background:rgba(179,155,94,.07); }
a.t-f .lk{
  margin-left:auto; font-size:9px; letter-spacing:.1em; color:var(--red-lt);
  border:1px solid rgba(181,84,74,.45); padding:1px 5px;
}
.dr-f{
  flex:none; margin-top:auto; padding:10px 18px 13px; border-top:1px solid var(--line2);
  font-family:var(--mono); font-size:10px; background:rgba(0,0,0,.16);
}
.dr-f p{ margin:0 0 3px; color:var(--faint); }
.dr-f b{ color:var(--dim); font-weight:400; }
.dr-f b.on{ color:var(--green); }
.dr-f .dim{ margin-top:12px; color:#7c7b76; }
#drawerBack{ display:none; }

/* 넓은 화면에서 「자료」 단추는 색인을 접고 편다 */
@media (min-width:701px){
  body.dr #drawer{ display:none; }
  body.dr #view{ margin-left:auto; margin-right:auto; }
}


/* ══════════ 바탕 ══════════ */
#view{
  flex:1; min-width:0; max-width:var(--maxw);
  margin:0 auto; padding:46px var(--p) 120px;
}
#view:focus{ outline:none; }
.pg{ animation:in .25s ease; }
@keyframes in{ from{ opacity:0; transform:translateY(6px) } }

.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  color:var(--faint); margin:0 0 14px; text-transform:uppercase;
}
.eyebrow b{ color:var(--brass); font-weight:400; }
.eyebrow.red{ color:var(--red-lt); }

.pgh{ padding-bottom:26px; margin-bottom:42px; border-bottom:1px solid var(--line); }
.pgh h1{ font-size:clamp(34px,5.2vw,48px); font-weight:800; margin:0; letter-spacing:-.045em; line-height:1.1; }
.pgh .sub{ margin:16px 0 0; font-size:14px; color:var(--dim); max-width:66ch; }
.pgh.locked{ border-bottom-color:rgba(181,84,74,.4); }

h2.h{
  display:flex; align-items:baseline; gap:12px; margin:60px 0 18px;
  font-size:20px; font-weight:800; letter-spacing:-.03em;
}
h2.h:first-child{ margin-top:0; }
h2.h i{ font-family:var(--mono); font-style:normal; font-size:11px; font-weight:400; color:var(--brass-d); }
h2.h b{ font-weight:800; }
h2.h span{ font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--faint); letter-spacing:.12em; }
h2.h::after{ content:''; flex:1; height:1px; background:var(--line2); }
.cap{ margin:0 0 20px; font-size:13.5px; color:var(--dim); max-width:70ch; }
.cap.after{ margin:20px 0 0; }
.after{ margin-top:24px; }

.prose p{ margin:0 0 15px; font-size:14.5px; line-height:1.95; color:var(--dim); max-width:64ch; }
.prose p:last-child{ margin-bottom:0; }
.prose p.lead{ color:var(--fg); font-weight:700; font-size:16.5px; letter-spacing:-.02em; }
.prose.wide p{ max-width:80ch; }
.prose b,.kv b,.ul b,.note b{ color:var(--fg); font-weight:700; }
ul.ul{ margin:0; padding:0; list-style:none; }
ul.ul li{ font-size:13.5px; line-height:1.85; color:var(--dim); padding:4px 0 4px 16px; position:relative; }
ul.ul li::before{ content:''; position:absolute; left:2px; top:14px; width:6px; height:1px; background:var(--brass-d); }

.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start; }

.kv > div{ display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:13.5px; align-items:baseline; }
.kv > div:last-child{ border-bottom:0; }
.kv .k{ flex:none; width:92px; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.06em; }
.kv .v{ color:var(--dim); min-width:0; }

.note{
  border-left:2px solid var(--brass); background:rgba(179,155,94,.06);
  padding:16px 22px; font-size:13.5px; color:var(--dim); margin-top:22px;
}
.note .x{ color:var(--red-lt); }


/* ══════════ 표 ══════════ */
.scrollx{ overflow-x:auto; }
table.tb{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tb th{
  text-align:left; font-family:var(--mono); font-weight:400; color:var(--faint);
  font-size:10.5px; letter-spacing:.1em; padding:0 14px 10px 0;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tb th:last-child,table.tb td:last-child{ padding-right:0; }
table.tb td{ padding:11px 14px 11px 0; border-bottom:1px solid var(--line2); color:var(--dim); vertical-align:middle; }
table.tb td.i{ font-family:var(--mono); font-size:12px; color:var(--faint); width:46px; }
table.tb td.nm{ color:var(--fg); font-weight:700; white-space:nowrap; }
table.tb td.num{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
table.tb tr.row{ cursor:pointer; }
table.tb tr.row:hover td{ background:rgba(255,255,255,.04); color:var(--fg); }
table.tb tr.row:hover td.nm{ color:var(--brass-lt); }

.rk{ font-family:var(--mono); font-size:11px; white-space:nowrap; }
.rk.r5{ color:var(--brass-lt); }
.rk.r4{ color:#8fa3b8; }
.rk.r3{ color:var(--dim); }
.rk.r2,.rk.r1{ color:var(--faint); }


/* ══════════ 개요 ══════════ */
.hero{ display:grid; grid-template-columns:230px 1fr; gap:38px; align-items:center; margin-bottom:46px; }
.hero-img{
  aspect-ratio:1; border:1px solid var(--line); background:rgba(0,0,0,.14);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-img .coin{ --cs:92px; }
.big{ font-size:clamp(40px,6.6vw,62px); font-weight:800; margin:0; letter-spacing:-.05em; line-height:1.06; }
.lat{ font-family:var(--mono); font-size:11.5px; letter-spacing:.42em; color:var(--brass-d); margin:16px 0 0; }
.hero-sub{ margin:22px 0 0; font-size:14.5px; line-height:1.95; color:var(--dim); max-width:60ch; }
.hero-sub b{ color:var(--fg); font-weight:700; }
.tagrow{ display:flex; flex-wrap:wrap; gap:0; margin-top:26px; }
.tagrow span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint);
  border:1px solid var(--line2); padding:5px 12px; margin:0 -1px -1px 0;
}

.sum{ display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sum div{ flex:1; padding:20px 12px; text-align:center; border-right:1px solid var(--line2); }
.sum div:last-child{ border-right:0; }
.sum .n{ display:block; font-family:var(--mono); font-size:26px; color:var(--brass); line-height:1.1; }
.sum .k{ display:block; font-size:11px; color:var(--faint); margin-top:6px; }

/* 부서 엠블럼 줄 */
.embrow{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.emb{ display:block; text-align:center; padding:16px 6px; border:1px solid var(--line2); }
.emb:hover{ background:rgba(255,255,255,.04); border-color:var(--line); }
.emb .ring{
  width:46px; height:46px; border-radius:50%; margin:0 auto 11px;
  display:grid; place-items:center; border:1px solid currentColor;
}
.ring svg{ width:56%; height:56%; display:block; }
.emb .nm{ font-size:12px; color:var(--dim); display:block; }
.emb:hover .nm{ color:var(--fg); }
.emb .ct{ font-family:var(--mono); font-size:10px; color:var(--faint); display:block; margin-top:3px; }

.menu a{
  display:flex; align-items:baseline; gap:16px; padding:13px 14px;
  border-bottom:1px solid var(--line2); font-size:13.5px; color:var(--dim);
}
.menu a:hover{ background:rgba(255,255,255,.04); color:var(--fg); }
.menu a .c{ flex:none; width:104px; font-family:var(--mono); font-size:12px; color:var(--fg); }
.menu a:hover .c{ color:var(--brass-lt); }
.menu a .g{ margin-left:auto; color:var(--faint); flex:none; font-family:var(--mono); }
.menu a:hover .g{ color:var(--brass); }


/* ══════════ 조직도 ══════════ */
.chart-top{ display:flex; justify-content:center; }
.chair{ border:1px dashed var(--brass-d); padding:13px 34px; text-align:center; background:rgba(179,155,94,.05); }
.chair .t{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--faint); display:block; }
.chair .v{ font-size:19px; font-weight:800; color:var(--brass-lt); display:block; margin:5px 0 3px; letter-spacing:.04em; }
.chair .s{ font-size:12px; color:var(--dim); display:block; }
.chart-stem{ width:1px; height:28px; background:var(--line); margin:0 auto; }
.seats{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.seat{ display:block; padding:15px 7px; text-align:center; border:1px solid var(--line2); border-top-width:2px; }
.seat:hover{ background:rgba(255,255,255,.04); }
.seat .dp{ font-size:10.5px; color:var(--faint); display:block; }
.seat .nm{ font-size:14px; font-weight:700; color:var(--fg); display:block; margin:7px 0 5px; letter-spacing:-.02em; }
.seat:hover .nm{ color:var(--brass-lt); }

.split{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.split > div{ padding:22px 24px; border-right:1px solid var(--line); }
.split > div:last-child{ border-right:0; }
.split .t{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--faint); display:block; margin-bottom:10px; }
.split .v{ font-size:19px; font-weight:800; display:block; letter-spacing:-.02em; }
.split .d{ font-size:13px; color:var(--dim); display:block; margin-top:10px; }
.split .ok .v{ color:var(--green); }
.split .bad{ background:rgba(181,84,74,.07); }
.split .bad .v{ color:var(--red-lt); }
.foot-note{ margin:16px 0 0; font-size:13px; color:var(--dim); }


/* ══════════ 명부 ══════════ */
.filt{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.frow{ display:flex; flex-wrap:wrap; align-items:center; }
.frow .lb{ font-family:var(--mono); font-size:10.5px; color:var(--faint); width:46px; flex:none; }
.fb{ font-size:12px; padding:6px 13px; color:var(--dim); border:1px solid var(--line2); margin:0 -1px -1px 0; }
.fb:hover{ background:rgba(255,255,255,.045); color:var(--fg); }
.fb.on{ background:var(--brass); color:#201c0e; border-color:var(--brass); position:relative; z-index:1; font-weight:600; }
.fb .c{ font-family:var(--mono); font-size:10px; opacity:.55; margin-left:5px; }
.fb i{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:1px; }
.fb.on i{ background:#201c0e !important; }
.fcount{ margin:0 0 12px; font-family:var(--mono); font-size:11px; color:var(--faint); }

.ordo .o{ display:flex; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:13.5px; }
.ordo .o .lv{ width:78px; flex:none; font-weight:700; color:var(--fg); }
.ordo .o .bar{ width:92px; flex:none; font-family:var(--mono); color:var(--brass-d); letter-spacing:-.06em; }
.ordo .o .who{ color:var(--dim); min-width:0; }
.ordo .o .who a:hover{ color:var(--brass-lt); }
.ordo .sp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--faint); margin:24px 0 8px; }
.ordo .sp:first-child{ margin-top:0; }

.lk{ border-bottom:1px solid var(--line2); padding:14px 0; }
.lk .r1{ display:flex; align-items:baseline; gap:12px; font-size:14px; flex-wrap:wrap; }
.lk .who{ font-weight:700; color:var(--fg); }
.lk .who:hover{ color:var(--brass-lt); }
.lk .ar{ font-family:var(--mono); font-size:12px; color:var(--brass-d); flex:none; }
.lk.hot .ar{ color:var(--red); }
.lk .lb{ color:var(--brass); font-size:13px; }
.lk.hot .lb{ color:var(--red-lt); }
.lk .nt{ margin:6px 0 0; font-size:13px; color:var(--faint); }


/* ══════════ 부서 ══════════ */
.dp{ border:1px solid var(--line2); margin-bottom:16px; overflow:hidden; }
.dp-bn{ height:120px; background:rgba(0,0,0,.13); position:relative; overflow:hidden; border-bottom:1px solid var(--line2); }
.dp-bn img{ width:100%; height:100%; object-fit:cover; display:block; }
.dp-bn .ph{ position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 8px,transparent 8px 16px); }
.dp-in{ display:grid; grid-template-columns:210px 1fr; gap:30px; padding:22px 24px; }
.dp .ring{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  border:1px solid currentColor; margin-bottom:14px;
}
.dp .code{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; color:var(--faint); }
.dp .nm{ font-size:21px; font-weight:800; margin:6px 0 10px; letter-spacing:-.03em; }
.dp .nam{ font-size:12px; color:var(--dim); margin:0; }
.dp .cnt{ font-family:var(--mono); font-size:10.5px; color:var(--faint); margin:7px 0 0; }
.dp .desc{ margin:0 0 8px; font-size:14.5px; color:var(--dim); }
.dp .st{ margin:0 0 18px; font-size:12.5px; }
.dp .mem{ display:flex; flex-wrap:wrap; }
.dp .mem a{
  display:flex; align-items:baseline; gap:9px; padding:6px 13px;
  border:1px solid var(--line2); margin:0 -1px -1px 0; font-size:12.5px; color:var(--dim);
}
.dp .mem a:hover{ background:rgba(255,255,255,.045); color:var(--brass-lt); position:relative; z-index:1; }


/* ══════════ 침식 ══════════ */
.bl{ display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line2); font-size:13.5px; }
.bl .bx{ font-family:var(--mono); color:var(--faint); flex:none; }
.bl.flag .bx{ color:var(--red); }
.bl .c{ color:var(--dim); }
.bl.flag .c{ color:var(--fg); font-weight:700; }
.bl .nt{ margin-left:auto; font-size:12.5px; color:var(--red-lt); }
.bl .nt a:hover{ text-decoration:underline; }

tr.lv-warn td.al{ color:var(--amber); }
tr.lv-bad td.al{ color:var(--red-lt); }
tr.lv-bad td.nm{ color:var(--red-lt); }

.formgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.fm{ border:1px solid var(--line2); overflow:hidden; }
.fm .im{ aspect-ratio:3/2; background:rgba(0,0,0,.13); position:relative; border-bottom:1px solid var(--line2); }
.fm .im img{ width:100%; height:100%; object-fit:cover; display:block; }
.fm .im .ph{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:#777b82;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 8px,transparent 8px 16px); }
.fm .tx{ padding:14px 15px 16px; }
.fm .nm{ font-size:15px; font-weight:800; margin:0 0 7px; letter-spacing:-.02em; }
.fm .ds{ font-size:12.5px; color:var(--dim); margin:0; line-height:1.75; }
.fm .nt{ font-family:var(--mono); font-size:10px; color:var(--brass-d); margin:9px 0 0; }


/* ══════════ 기억 보관소 ══════════ */
.vt{ border:1px solid rgba(181,84,74,.3); margin-bottom:14px; }
.vt-h{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:17px 22px; }
.vt-h .tg{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--red-lt);
  border:1px solid rgba(181,84,74,.45); padding:2px 7px; flex:none; }
.vt-h .ti{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.vt-h .wh{ font-size:12.5px; color:var(--faint); }
.vt-h .st{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:none; }
.vt.open .vt-h .st{ color:var(--brass); }
.vt-b{ display:none; padding:0 22px 20px; }
.vt.open .vt-b{ display:block; animation:in .22s ease; }
.vt-b p{ margin:0; font-size:14px; line-height:1.95; color:var(--dim); max-width:72ch; }
.vt-b .go{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--brass); }
.vt-b .go:hover{ text-decoration:underline; }


/* ══════════ 기록 카드 ══════════ */
#sheet{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:18px; }
.sh-bg{ position:absolute; inset:0; background:rgba(20,22,25,.74); backdrop-filter:blur(3px); }
.sh-box{
  position:relative; width:min(880px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--pane2),var(--pane)); border:1px solid var(--line);
  animation:up .22s ease; box-shadow:0 30px 70px rgba(0,0,0,.6);
}
@keyframes up{ from{ opacity:0; transform:translateY(12px) } }
.sh-top{ display:flex; align-items:center; gap:14px; height:38px; padding:0 18px;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; flex:none; }
.sh-form{ color:var(--brass-d); letter-spacing:.18em; }
.sh-sp{ flex:1; }
.sh-x{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.sh-x:hover{ color:var(--brass); }
.sh-body{ overflow-y:auto; padding:28px 32px 32px; }

.sh-hd{ display:grid; grid-template-columns:150px 1fr; gap:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.sh-ph{ aspect-ratio:4/5; border:1px solid var(--line2); background:rgba(0,0,0,.15); position:relative; overflow:hidden; }
.sh-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-ph .ph{ position:absolute; inset:0; display:grid; place-items:center; gap:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 8px,transparent 8px 16px); }
.sh-ph .ph span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:#7b7f86; }
.sh-no{ font-family:var(--mono); font-size:13px; color:var(--brass-d); letter-spacing:.14em; }
.sh-nm{ font-size:33px; font-weight:800; margin:8px 0 12px; letter-spacing:-.045em; line-height:1.08; }
.sh-nm .sx{ font-size:13px; font-weight:400; color:var(--faint); margin-left:10px; letter-spacing:0; }
.sh-pos{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.sh-pos .dot{ width:8px; height:8px; border-radius:50%; }
.sh-tags{ display:flex; flex-wrap:wrap; margin-top:16px; }
.sh-tags span{ font-size:11.5px; padding:4px 11px; border:1px solid var(--line2); margin:0 -1px -1px 0; color:var(--dim); }

.sh-stat{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.sh-stat div{ padding:16px 12px 16px 0; }
.sh-stat .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--faint); }
.sh-stat .v{ display:block; font-size:14.5px; color:var(--fg); margin-top:5px; font-weight:700; }

.sh-cols{ columns:2; column-gap:36px; padding-top:10px; }
.sh-s{ break-inside:avoid; padding:17px 0; }
.sh-s h3{ font-family:var(--mono); font-size:10px; font-weight:400; color:var(--faint); margin:0 0 8px; letter-spacing:.16em; }
.sh-s p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--dim); }
.sh-s ul{ margin:0; padding:0; list-style:none; }
.sh-s li{ font-size:13px; line-height:1.8; color:var(--dim); padding:4px 0 4px 15px; position:relative; }
.sh-s li::before{ content:''; position:absolute; left:2px; top:13px; width:6px; height:1px; background:var(--brass-d); }

.sh-sec{ border-left:2px solid var(--red); background:rgba(181,84,74,.08); padding:16px 20px; margin-top:14px; }
.sh-sec .k{ display:block; font-family:var(--mono); font-size:10px; color:var(--red-lt); letter-spacing:.16em; margin-bottom:7px; }
.sh-sec p{ margin:0; font-size:14px; color:var(--fg); line-height:1.85; }

.sh-rel{ padding-top:20px; border-top:1px solid var(--line); margin-top:16px; }
.sh-rel h3{ font-family:var(--mono); font-size:10px; font-weight:400; color:var(--faint); margin:0 0 9px; letter-spacing:.16em; }
.sh-rel a{ display:flex; gap:14px; padding:7px 0; font-size:13.5px; color:var(--dim); }
.sh-rel a:hover{ color:var(--brass-lt); }
.sh-rel a .w{ color:var(--fg); font-weight:700; width:116px; flex:none; }
.sh-nav{ display:flex; justify-content:space-between; gap:12px; padding-top:22px; margin-top:20px; border-top:1px solid var(--line); }
.sh-nav button{ font-family:var(--mono); font-size:11px; color:var(--faint); padding:7px 14px; border:1px solid var(--line2); }
.sh-nav button:hover{ color:var(--brass); border-color:var(--brass-d); }


/* ══════════ 좁은 화면 ══════════ */
@media (max-width:1000px){
  :root{ --dr:208px; --p:22px; }
  .embrow{ grid-template-columns:repeat(4,1fr); }
  .seats{ grid-template-columns:repeat(4,1fr); }
  .formgrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:700px){
  :root{ --p:20px; }
  #drawerBtn i{ display:block; width:15px; height:1.5px; background:currentColor; }
  #drawerBtn i + i{ margin-top:3px; }
  #drawerBtn span{ display:none; }
  #drawer{
    position:fixed; top:calc(var(--bar) + var(--path)); left:0; bottom:0; width:270px;
    z-index:80; background:#3a3e45; transform:translateX(-101%);
    transition:transform .24s cubic-bezier(.3,.8,.3,1); height:auto;
  }
  body.dr #drawer{ transform:none; box-shadow:0 0 40px rgba(0,0,0,.6); }
  #drawerBack{ position:fixed; inset:0; z-index:79; background:rgba(10,11,12,.22); }
  body.dr #drawerBack{ display:block; }
  #view{ padding-top:34px; }
  .hero{ grid-template-columns:1fr; gap:26px; }
  .hero-img{ max-width:170px; }
  .cols2{ grid-template-columns:1fr; gap:28px; }
  .split{ grid-template-columns:1fr; }
  .split > div{ border-right:0; border-bottom:1px solid var(--line); }
  .split > div:last-child{ border-bottom:0; }
  .dp-in{ grid-template-columns:1fr; gap:18px; }
  .sum{ flex-wrap:wrap; }
  .sum div{ flex:1 1 33%; border-bottom:1px solid var(--line2); }
  .sh-hd{ grid-template-columns:1fr; }
  .sh-ph{ max-width:150px; }
  .sh-cols{ columns:1; }
  .sh-stat{ grid-template-columns:1fr 1fr; }
  .sh-body{ padding:22px; }
  .b-clock,.b-seal{ display:none; }
  .scrollx table.tb{ min-width:600px; }
}
@media (max-width:560px){
  body{ font-size:14px; }
  .embrow{ grid-template-columns:repeat(2,1fr); }
  .seats{ grid-template-columns:repeat(2,1fr); }
  .formgrid{ grid-template-columns:1fr; }
  .sum div{ flex:1 1 50%; }
  .kv > div{ flex-direction:column; gap:3px; }
  .kv .k{ width:auto; }
  .ordo .o{ flex-wrap:wrap; }
  .ordo .o .who{ width:100%; }
  #path{ font-size:10.5px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  #ash{ display:none; }
}


/* ============================================================
   화면 효과 — 노이즈 · 주사선 · 지직거림
   ============================================================ */
#fx{ position:fixed; inset:0; z-index:40; pointer-events:none; }

/* 필름 그레인 */
.fx-noise{
  position:absolute; inset:-120px; opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      17%{transform:translate(-14px,7px)}
  34%{transform:translate(9px,-12px)} 51%{transform:translate(-7px,-9px)}
  68%{transform:translate(12px,5px)}  85%{transform:translate(-11px,11px)}
  100%{transform:translate(0,0)}
}

/* CRT 주사선 */
.fx-scan{
  position:absolute; inset:0; opacity:.3;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
.fx-scan::after{   /* 아래로 훑고 지나가는 밝은 띠 */
  content:''; position:absolute; left:0; right:0; height:150px;
  background:linear-gradient(180deg,transparent,rgba(222,220,215,.045),transparent);
  animation:sweep 7.5s linear infinite;
}
@keyframes sweep{ 0%{ top:-150px } 100%{ top:100% } }

/* 네 귀퉁이 어둡게 */
.fx-vig{
  position:absolute; inset:0;
  background:radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(0,0,0,.20) 100%);
}

/* 화면 전환 — RGB 가 어긋난다 */
#view.glitching{ animation:gl .34s steps(3); }
@keyframes gl{
  0%  { filter:none; clip-path:none }
  20% { filter:drop-shadow(-3px 0 rgba(181,84,74,.8)) drop-shadow(3px 0 rgba(111,155,149,.7));
        transform:translateX(2px) }
  40% { clip-path:inset(18% 0 42% 0); transform:translateX(-4px) }
  60% { filter:drop-shadow(4px 0 rgba(181,84,74,.7)) drop-shadow(-4px 0 rgba(111,155,149,.6));
        clip-path:inset(62% 0 8% 0); transform:translateX(3px) }
  80% { clip-path:none; transform:translateX(-1px) }
  100%{ filter:none; transform:none }
}
body.shake #bar,body.shake #path{ animation:sh .3s steps(2); }
@keyframes sh{ 25%{ transform:translateX(-1.5px) } 75%{ transform:translateX(1.5px) } }

/* 큰 제목은 늘 아주 살짝 흔들린다 */
.glitchable{ position:relative; }
.glitchable::before,.glitchable::after{
  content:attr(data-t); position:absolute; left:0; top:0; width:100%;
  opacity:0; pointer-events:none;
}


/* ============================================================
   새로 붙은 조각들
   ============================================================ */

/* 파일 정보 줄 */
.fmeta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--faint); margin:0 0 18px; padding-bottom:10px;
  border-bottom:1px dashed var(--line2);
}
.fmeta.red{ color:var(--red-lt); border-bottom-color:rgba(181,84,74,.3); }
.pgh .fmeta{ margin-top:16px; margin-bottom:0; border-bottom:0; padding-bottom:0; }

/* 본문 덩어리 — 왼쪽에 가는 줄 */
.prose.doc{
  border-left:1px solid var(--line); padding-left:22px; margin-bottom:8px;
}
.prose p.warn{ color:var(--red-lt); }

h3.h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint);
  margin:34px 0 14px; font-weight:400;
}

/* 지표 — 영문 키 + 한글 값 */
.specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); margin:30px 0 0;
}
.specs div{ padding:16px 18px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.specs div:nth-child(3n){ border-right:0; }
.specs div:nth-last-child(-n+3){ border-bottom:0; }
.specs .k{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--brass-d);
}
.specs .v{ display:block; font-size:14px; color:var(--fg); margin-top:6px; font-weight:700; letter-spacing:-.02em; }

/* 출신 */
.origins{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.og{ border:1px solid var(--line2); border-top:2px solid var(--brass-d); padding:16px 18px; }
.og .l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--faint); }
.og .n{ font-size:16px; font-weight:800; margin:7px 0 8px; letter-spacing:-.02em; }
.og .d{ font-size:12.5px; color:var(--dim); margin:0; line-height:1.75; }

/* 상단바 단추 */
#sfxBtn,#bgmBtn{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--faint);
  border:1px solid var(--line2); padding:5px 10px; flex:none;
}
#sfxBtn:hover,#bgmBtn:hover{ color:var(--brass); border-color:var(--brass-d); }
#bgmBtn.on{ color:var(--brass); border-color:var(--brass-d); }

/* 자료 색인 — 깊이별 들여쓰기 */
a.t-f.d1{ padding-left:34px; }
a.t-f.d2{ padding-left:50px; font-size:11.5px; }
.t-kids .t-dir{ padding-left:34px; font-size:11.5px; }
.t-dir .lk{
  margin-left:auto; font-size:9px; letter-spacing:.1em; color:var(--red-lt);
  border:1px solid rgba(181,84,74,.45); padding:1px 5px;
}
#drawer{ scrollbar-width:thin; scrollbar-color:var(--faint) transparent; }
#drawer::-webkit-scrollbar{ width:9px }
#drawer::-webkit-scrollbar-thumb{ background:var(--faint); border:2px solid transparent; background-clip:content-box; }
#drawer::-webkit-scrollbar-track{ background:transparent }

@media (prefers-reduced-motion:reduce){
  .fx-noise,.fx-scan::after{ animation:none; }
  #fx{ opacity:.35; }
}
@media (max-width:700px){
  .specs{ grid-template-columns:1fr 1fr; }
  .specs div:nth-child(3n){ border-right:1px solid var(--line2); }
  .specs div:nth-child(2n){ border-right:0; }
  .origins{ grid-template-columns:1fr; }
  #sfxBtn,#bgmBtn{ display:none; }
}

/* 색인에서 건너뛸 때 상단바에 가리지 않게 */
[id]{ scroll-margin-top:118px; }

.dg-sp{ flex:1; }

/* 부서 표지를 그림 파일로 갈아끼웠을 때 */
.ring img{ width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 1px currentColor); opacity:.92; }
.ring:has(> img:not(.try)){ border:0; }
.emb .ring:has(> img:not(.try)){ width:58px; height:58px; margin-bottom:9px; }
.dp .ring:has(> img:not(.try)){ width:74px; height:74px; }
.emb:hover .ring img{ opacity:1; }
.ring img.try{ display:none; }


/* ============================================================
   기억 보관소 — 접근 제한
   ============================================================ */
.cred{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); margin:26px 0 30px; }
.cred > div{ padding:14px 18px; border-right:1px solid var(--line2); }
.cred > div:last-child{ border-right:0; }
.cred .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--faint); }
.cred .v{ display:block; font-size:14px; color:var(--fg); margin-top:6px; font-weight:700; }
.cred .v.bad{ color:var(--red-lt); }

.deny{
  position:relative; border:1px solid rgba(207,100,89,.45);
  background:rgba(207,100,89,.07); padding:26px 28px 28px; overflow:hidden;
}
.deny.warn{ border-color:rgba(207,100,89,.7); background:rgba(207,100,89,.12); }
.deny.final{ border-color:var(--red); background:rgba(207,100,89,.18); animation:denyPulse 1.4s infinite; }
.deny.sealed{ border-color:#6a3630; background:rgba(0,0,0,.4); }
@keyframes denyPulse{ 50%{ background:rgba(207,100,89,.26) } }

.dn-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.dn-x{ color:var(--red); font-size:15px; }
.dn-h{
  font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.2em;
  color:var(--red-lt);
}
.deny.final .dn-h,.deny.sealed .dn-h{ color:#ff8d80; }
.dn-lv{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.14em; }
.dn-body{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--fg); letter-spacing:-.02em; }
.dn-note{ margin:0 0 20px; font-size:13.5px; color:var(--dim); max-width:62ch; }

.dn-list{ margin:0 0 22px; padding:0; list-style:none; border-top:1px solid var(--line2); }
.dn-list li{
  display:flex; align-items:center; gap:14px; padding:8px 0;
  border-bottom:1px solid var(--line2); font-family:var(--mono); font-size:12px;
}
.dn-list .f{ color:var(--faint); }
.dn-list .s{ margin-left:auto; font-size:10px; letter-spacing:.14em; color:var(--red-lt);
  border:1px solid rgba(207,100,89,.4); padding:1px 7px; }

.dn-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  border:1px solid var(--red); color:var(--red-lt); padding:10px 24px;
}
.dn-btn:hover{ background:var(--red); color:#1b1113; }

/* 사슬 */
.chains{ position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; }
.ch{
  position:absolute; left:-12%; width:124%; height:30px;
  background:repeating-linear-gradient(90deg,
    transparent 0 5px, rgba(0,0,0,.45) 5px 9px,
    #8d8f93 9px 20px, #5f6166 20px 26px, rgba(0,0,0,.45) 26px 30px, transparent 30px 35px);
  box-shadow:0 5px 16px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.18);
  opacity:.92;
}
.ch1{ top:30%; transform:rotate(-13deg); animation:chain1 .42s cubic-bezier(.2,1.6,.4,1) both; }
.ch2{ top:60%; transform:rotate(11deg);  animation:chain2 .42s .12s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes chain1{ from{ transform:translateX(-120%) rotate(-28deg); opacity:0 } }
@keyframes chain2{ from{ transform:translateX(120%) rotate(26deg); opacity:0 } }
.chains .lock{
  font-size:40px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));
  animation:lockIn .3s .42s both;
}
@keyframes lockIn{ from{ transform:scale(2.2); opacity:0 } }
.deny.slamming{ animation:slam .38s steps(3); }
@keyframes slam{ 25%{ transform:translate(-4px,2px) } 60%{ transform:translate(3px,-2px) } }
body.redout::after{
  content:''; position:fixed; inset:0; z-index:130; pointer-events:none;
  background:rgba(207,100,89,.3); animation:redout .9s ease-out forwards;
}
@keyframes redout{ to{ opacity:0 } }

/* 색인의 프롤로그 줄 */
a.t-f .pl{
  margin-left:auto; font-size:9px; letter-spacing:.1em; color:var(--brass);
  border:1px solid var(--brass-d); padding:1px 5px;
}


/* ============================================================
   프롤로그 — 대사창
   ============================================================ */
#scene{
  position:fixed; inset:0; z-index:160; background:#0d0f12;
  display:flex; flex-direction:column; cursor:pointer;
}
.sc-stage{ flex:1; position:relative; min-height:0; overflow:hidden; }
.sc-bg{
  position:absolute; inset:0; background:#16191e center/cover no-repeat;
}
.sc-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(140,150,170,.07), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(13,15,18,.9));
}
.sc-sprite{
  position:absolute; right:8%; bottom:0; top:8%; width:min(42%,420px);
  display:grid; place-items:end center;
}
.sc-sprite img{ max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.sc-sprite img.try{ display:none; }
.sc-sprite .sp-ph{
  width:70%; height:88%; border:1px dashed rgba(255,255,255,.07);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 10px,transparent 10px 20px);
}
.sc-ctl{ position:absolute; top:16px; right:18px; display:flex; gap:7px; z-index:2; }
.sc-ctl button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--dim);
  border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.4); padding:6px 12px;
}
.sc-ctl button:hover{ color:var(--brass); border-color:var(--brass-d); }
.sc-ctl button.on{ color:#1b1711; background:var(--brass); border-color:var(--brass); }

.sc-box{
  position:relative; flex:none; min-height:168px;
  margin:0 auto 10px; width:min(900px, calc(100% - 36px));
  background:linear-gradient(180deg, rgba(28,31,36,.96), rgba(20,22,26,.97));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
  padding:26px 30px 30px;
}
.sc-name{
  position:absolute; top:-15px; left:26px; padding:4px 16px;
  background:#1c1f24; border:1px solid rgba(255,255,255,.14);
  border-bottom:2px solid currentColor;
  font-size:14px; font-weight:800; letter-spacing:-.01em;
}
.sc-text{
  margin:0; font-size:17px; line-height:1.95; color:var(--fg);
  white-space:pre-line; letter-spacing:-.015em; min-height:3.9em;
}
#scene.narr .sc-text{ color:var(--dim); font-style:italic; text-align:center; padding-top:8px; }
.sc-next{
  position:absolute; right:22px; bottom:12px; color:var(--brass);
  font-size:13px; animation:bob 1s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(4px); opacity:.4 } }
.sc-tip{
  flex:none; margin:0; padding:0 0 14px; text-align:center;
  font-family:var(--mono); font-size:10.5px; color:var(--faint);
}
.sc-tip b{ color:var(--dim); }

@media (max-width:700px){
  .cred{ grid-template-columns:1fr; }
  .cred > div{ border-right:0; border-bottom:1px solid var(--line2); }
  .cred > div:last-child{ border-bottom:0; }
  .sc-sprite{ width:62%; right:2%; }
  .sc-box{ min-height:150px; padding:22px 20px 26px; }
  .sc-text{ font-size:15px; min-height:4.2em; }
  .deny{ padding:20px; }
}


/* ============================================================
   장소
   ============================================================ */
.plg + .plg{ margin-top:14px; }
.plg h2.h span{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.plrow{ display:flex; flex-direction:column; gap:14px; }

.pl{ border:1px solid var(--line2); overflow:hidden; background:rgba(255,255,255,.015); }
.pl:hover{ border-color:var(--line); }
.pl.locked{ border-color:rgba(207,100,89,.3); }
.pl-bn{ position:relative; aspect-ratio:1216/256; background:rgba(0,0,0,.13); overflow:hidden; }
.pl-bn img{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-bn img.try{ opacity:0; }
.pl-bn .ph{ position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 10px,transparent 10px 20px); }
.pl-tx{ padding:16px 20px 18px; border-top:1px solid var(--line2); }
.pl-hd{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pl-hd h3{ font-size:18px; font-weight:800; margin:0; letter-spacing:-.03em; }
.pl-hd .en{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--faint); }
.pl-hd .dp{ margin-left:auto; font-size:11.5px; }
.pl-hd .dp:hover{ text-decoration:underline; }
.pl-hd .lk{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:var(--red-lt); border:1px solid rgba(207,100,89,.45); padding:2px 7px; }
.pl-hd .lk:hover{ background:rgba(207,100,89,.14); }
.pl-tx p{ margin:0; font-size:13.5px; color:var(--dim); line-height:1.8; max-width:72ch; }

@media (min-width:1001px){
  .plrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
}


/* ============================================================
   프롤로그 — 줄 종류별 연출
   ============================================================ */
.sc-sprite .sp-ph{ display:none; }          /* 입상 그림을 넣기 전에는 아무것도 안 보입니다 */
.sc-bg{ transition:background-image .6s ease; }
.sc-bg::after{
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(140,150,170,.06), transparent 70%),
    linear-gradient(180deg, rgba(13,15,18,.35) 0%, rgba(13,15,18,.55) 55%, rgba(13,15,18,.95) 100%);
}

/* 서술 — 이름표 없이, 조금 흐리게 */
#scene[data-k="narr"] .sc-text{ color:#c9c7c1; font-style:normal; text-align:left; padding-top:0; }

/* 큰 연출이 뜰 때는 대사창을 비워 둡니다 (▼ 만 남김) */
#scene[data-k="card"] .sc-box, #scene[data-k="note"] .sc-box, #scene[data-k="sys"] .sc-box,
#scene[data-k="ticket"] .sc-box, #scene[data-k="sfx"] .sc-box, #scene[data-k="alert"] .sc-box{ visibility:hidden; }
#scene .sc-next{ visibility:visible; }

/* 가운데 층 */
.sc-center{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; z-index:1; padding:20px; }
.sc-center.on{ opacity:1; }
.sc-center .cx{ text-align:center; }

/* 장면 카드 */
.sc-center.card{ background:rgba(13,15,18,.72); }
.sc-center.card .cx{
  font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:.08em; color:var(--fg);
  padding:18px 0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  min-width:min(420px,80vw); animation:cardIn 1s ease both;
}
@keyframes cardIn{ from{ opacity:0; letter-spacing:.4em } }

/* 쪽지 — 끈적한 촉수가 붙이고 간 종이 */
.sc-center.note .cx{
  text-align:left; max-width:min(420px,86vw); padding:24px 28px 26px;
  background:
    radial-gradient(60% 38% at 82% 10%, rgba(120,180,150,.32), transparent 70%),
    radial-gradient(30% 22% at 90% 4%, rgba(90,160,130,.45), transparent 75%),
    #e8e4d8;
  color:#2a2a26; font-size:15px; line-height:1.95; font-weight:500;
  box-shadow:0 18px 40px rgba(0,0,0,.6); transform:rotate(-2deg);
  animation:noteIn .35s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes noteIn{ from{ transform:rotate(-9deg) scale(1.25); opacity:0 } }

/* 전광판 */
.sc-center.sys .cx{
  font-family:var(--mono); font-size:clamp(20px,3vw,30px); letter-spacing:.24em; color:#ffb35c;
  text-shadow:0 0 12px rgba(255,160,70,.7); padding:16px 30px;
  background:#0b0c0e; border:1px solid #2c2e33; box-shadow:inset 0 0 26px rgba(0,0,0,.8);
  animation:sysIn .3s steps(3) both;
}
@keyframes sysIn{ from{ opacity:0 } 50%{ opacity:.4 } }

/* 번호표 */
.sc-center.ticket .cx{
  font-family:var(--mono); width:min(320px,82vw); padding:22px 22px 20px; text-align:center;
  background:#f1efe8; color:#2a2a26; font-size:12.5px; line-height:1.8;
  border-top:2px dashed #b9b5aa; border-bottom:2px dashed #b9b5aa;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  animation:ticketIn .5s ease-out both;
}
.sc-center.ticket .cx::first-line{ font-size:22px; font-weight:600; letter-spacing:.06em; }
@keyframes ticketIn{ from{ transform:translateY(-40px); clip-path:inset(0 0 100% 0) } to{ clip-path:inset(0 0 0 0) } }

/* 효과음 */
.sc-center.sfx .cx{
  font-size:clamp(46px,8vw,84px); font-weight:800; color:var(--fg); letter-spacing:-.02em;
  text-shadow:0 6px 30px rgba(0,0,0,.6); animation:sfxPop .35s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes sfxPop{ from{ transform:scale(1.6); opacity:0 } }

/* 경보 */
.sc-center.alert{ background:rgba(60,10,10,.45); }
.sc-center.alert .cx{
  font-size:clamp(24px,4vw,40px); font-weight:800; color:#ff8d80; letter-spacing:.06em;
  padding:22px 40px; border:2px solid var(--red); background:rgba(207,100,89,.16);
  text-shadow:0 0 18px rgba(255,90,80,.7);
  animation:alertBlink .5s steps(2) 4 both;
}
@keyframes alertBlink{ 50%{ opacity:.25 } }

/* 화면 흔들림 · 붉은 번쩍임 */
#scene.shake .sc-stage, #scene.shake .sc-box{ animation:sh .38s steps(3); }
#scene::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; background:rgba(207,60,50,.32); }
#scene.alarm::after{ animation:alarmF .43s ease-in-out 3; }
@keyframes alarmF{ 50%{ opacity:1 } }

/* 진행 · LOG */
.sc-prog{ font-family:var(--mono); font-size:10.5px; color:var(--faint); align-self:center; margin-right:6px; letter-spacing:.1em; }
.sc-logbox{
  position:absolute; inset:max(40px,6vh) max(16px,8vw); z-index:5; display:flex; flex-direction:column;
  background:rgba(20,22,26,.97); border:1px solid rgba(255,255,255,.14); cursor:default;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.sc-logtop{ display:flex; align-items:center; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.sc-logtop b{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--brass); }
.sc-logtop button{ font-family:var(--mono); font-size:10.5px; color:var(--dim); border:1px solid rgba(255,255,255,.14); padding:4px 10px; }
.sc-logtop button:hover{ color:var(--brass); }
.sc-loglist{ overflow-y:auto; padding:10px 22px 20px; overscroll-behavior:contain; }
.lg{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.lg b{ display:block; font-size:12.5px; margin-bottom:3px; }
.lg p{ margin:0; font-size:14px; line-height:1.8; color:var(--fg); }
.lg.narr p{ color:#b7b5af; }
.lg.card p{ font-weight:800; letter-spacing:.08em; color:var(--brass); text-align:center; }
.lg.sfx p,.lg.sys p,.lg.ticket p,.lg.note p{ font-family:var(--mono); font-size:12.5px; color:var(--dim); }
.lg.alert p{ color:#ff8d80; font-weight:700; }

/* 장소 배너를 배경으로 깔 때 — 배너 왼쪽에 박힌 이름이 안 보이게 오른쪽을 씁니다 */
.sc-bg.place{ background-position:70% 42%; filter:blur(1.2px) brightness(.82); transform:scale(1.03); }


/* ============================================================
   이번 수정분
   ============================================================ */

/* 명부 표 — 얼굴 */
table.tb td.av{ width:44px; padding-right:12px; }
table.tb td.av span{
  display:block; width:34px; height:42px; overflow:hidden; position:relative;
  background:rgba(0,0,0,.18); border:1px solid var(--line2);
}
table.tb td.av img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }
table.tb td.av img.try{ opacity:0; }
table.tb tr.row:hover td.av span{ border-color:var(--brass-d); }

/* 기록 카드 사진 */
.sh-ph img{ object-position:50% 12%; }

/* 색인 — 보관소 안의 파일은 못 연다 */
a.t-f.locked{ color:#9a6b66; }
a.t-f.locked:hover{ color:var(--red-lt); }
a.t-f.locked::before{ content:'■ '; font-size:8px; color:var(--red); }

/* 기억 보관소 — 회부 조항 */
.dn-law{
  position:relative; margin:4px 0 22px; padding:20px 24px 18px;
  background:#e9e5da; color:#2a2a26; max-width:68ch;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.dn-law p{ margin:0 0 8px; font-size:13px; line-height:1.85; }
.dn-law .lt{ font-weight:800; font-size:14px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.18); }
.dn-law .also{ margin-top:12px; font-size:12px; color:#5b5850; }
.dn-law .stamp{
  position:absolute; right:18px; top:14px; transform:rotate(-8deg);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em;
  color:#b23a30; border:2px solid #b23a30; padding:4px 10px; opacity:.85;
  animation:stampIn .4s cubic-bezier(.2,1.6,.4,1) both .15s;
}
@keyframes stampIn{ from{ transform:rotate(-8deg) scale(2.2); opacity:0 } }

/* 프롤로그 — 말하는 사원 얼굴 */
.sc-face{
  position:absolute; left:22px; bottom:22px; width:96px; height:120px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); background:#1c1f24;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.sc-face img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; }
.sc-box:has(.sc-face:not([hidden])) .sc-text{ padding-left:122px; }
.sc-box:has(.sc-face:not([hidden])) .sc-name{ left:144px; }
@media (max-width:700px){
  .sc-face{ width:64px; height:80px; left:14px; bottom:18px; }
  .sc-box:has(.sc-face:not([hidden])) .sc-text{ padding-left:80px; }
  .sc-box:has(.sc-face:not([hidden])) .sc-name{ left:94px; }
}


/* ============================================================
   프롤로그 — 스탠딩
   ============================================================ */
.sc-sprite{ position:absolute; inset:0; top:0; right:auto; left:0; width:100%; pointer-events:none; display:block; }
.sc-sprite img{
  position:absolute; bottom:0; left:56%; height:97%; width:auto; max-height:none;
  transform:translateX(-50%); object-fit:contain;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));
  animation:standIn .32s ease-out both;
  transition:filter .3s ease, opacity .26s ease;
}
.sc-sprite img.out{ opacity:0; }
.sc-sprite.dim img{ filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)) brightness(.5) saturate(.7); }
@keyframes standIn{ from{ opacity:0; transform:translateX(-50%) translateY(14px) } }
@media (max-width:700px){
  .sc-sprite img{ left:50%; height:88%; }
}

/* 프롤로그 끝 — 다시 보기 */
.sc-end{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(13,15,18,.86); cursor:default; animation:fadeIn .6s ease both;
}
.sc-end[hidden]{ display:none; }
.se-k{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--brass); }
.se-t{ margin:14px 0 28px; padding:14px 0; min-width:min(380px,80vw); text-align:center;
  font-size:clamp(18px,2.6vw,24px); font-weight:700; letter-spacing:.04em; color:var(--fg);
  border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.se-btn{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.se-btn button{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim);
  border:1px solid rgba(255,255,255,.2); padding:10px 22px; background:rgba(255,255,255,.03); }
.se-btn button:hover{ color:var(--brass); border-color:var(--brass); }
#scAgain{ color:var(--fg); }
@keyframes fadeIn{ from{ opacity:0 } }