/* HUMANITY: PENDING — 2002 NCBA 방화벽 검문소.
   시각 규약: Papers, Please의 물질 구조를 따른다.
     위 = 창구 너머(CRT 모니터 속 신청자)  ·  아래 = 책상(인쇄된 서류 + 도장)
   화면은 어둡고 앰버, 종이는 밝고 누렇다. 이 대비가 두 세계를 가른다.
   단일 비주얼 세계로 확정한다. 라이트 테마는 만들지 않는다. */

:root{
  /* 공간 */
  --room:#2F2E28;
  --desk:#6E6754;
  --desk-dark:#57513F;
  --desk-edge:#413C2E;
  --case:#4A4840;
  --case-hi:#5C594F;
  --case-lo:#31302A;

  /* 종이 */
  --paper:#C6BB9F;
  --paper-hi:#D3C9AE;
  --paper-lo:#B3A88C;
  --paper-band:#7C7460;
  --ink:#26221A;
  --ink-soft:#5A5343;
  --ink-faint:#8A8168;
  --rule-line:#A79C80;

  /* 화면 */
  --scr:#0E1418;
  --scr-2:#151E23;
  --scr-line:#26343B;
  --txt:#C8D2D4;
  --txt-soft:#8A989E;
  --txt-faint:#5B6970;
  --amber:#E8A33C;
  --amber-dim:#9A6D22;
  --amber-soft:rgba(232,163,60,.13);

  /* 판정 잉크 */
  --ok:#4B7830;
  --ok-ink:#3C6325;
  --bad:#9E3123;
  --bad-ink:#7E2519;
  --void:#26221E;

  --pixel:"Silkscreen",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
  --serif:"Gowun Batang","Apple SD Gothic Neo",serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  background:var(--room);
  color:var(--txt);
  font-family:var(--sans); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
button:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.hidden{display:none !important}
.screen{height:100dvh; width:100%}

/* 저해상도 질감: 미세 디더 + 비네트 */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse 120% 95% at 50% 42%,transparent 40%,rgba(10,9,7,.62) 100%);
}

/* ═══ 부팅 ═══════════════════════════════════════ */
.boot{display:flex; flex-direction:column; justify-content:center; padding:6vh 6vw; gap:26px; background:#080B0D}
.boot-log{
  font-family:var(--mono); font-size:clamp(11px,1.5vw,14px); line-height:1.85;
  color:var(--amber); margin:0; white-space:pre-wrap; max-width:74ch; min-height:52vh;
  text-shadow:0 0 8px rgba(232,163,60,.35);
}
.boot-actions{display:flex; gap:14px; flex-wrap:wrap}
.btn-primary{
  font-family:var(--pixel); font-size:13px; letter-spacing:.04em;
  padding:13px 28px; color:#101418; background:var(--amber);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.28), 3px 3px 0 rgba(0,0,0,.4);
}
.btn-primary:active{transform:translate(2px,2px); box-shadow:inset -2px -2px 0 rgba(0,0,0,.28), 1px 1px 0 rgba(0,0,0,.4)}
.btn-ghost{
  font-family:var(--pixel); font-size:12px; padding:13px 18px;
  color:var(--txt-faint); box-shadow:inset 0 0 0 2px var(--scr-line);
}
.btn-ghost:hover{color:var(--txt-soft)}

/* ═══ 근무 골격 ══════════════════════════════════ */
.shift{
  display:grid; height:100dvh; position:relative;
  grid-template-rows:auto auto minmax(0,74fr) minmax(0,126fr);
  background:var(--room);
}

/* ── 상단 게시판 ─────────────────────────────── */
.hud{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--case-hi),var(--case));
  box-shadow:inset 0 -2px 0 var(--case-lo);
  padding-left:12px;
}
.hud-cell{
  display:flex; align-items:center; gap:7px; padding:7px 13px 7px 0;
  font-family:var(--pixel); white-space:nowrap;
}
.hud-cell small{font-size:8px; letter-spacing:.06em; color:#8E8B7C}
.hud-cell b{font-size:13px; color:#E6E0CC}
.hud-cell.warn.alert b{color:#E8897C}
.hud-cell.urgent b{color:#E8897C; animation:blink 1s steps(1) infinite}
.gauge{display:inline-block; width:46px; height:8px; background:var(--case-lo); box-shadow:inset 0 0 0 1px #24231E}
.gauge u{display:block; height:100%; width:0; background:var(--bad); transition:width .3s}
.hud-btn{margin-left:auto; padding:6px 12px; color:#9E9A88; font-size:15px}
.hud-btn:hover{color:var(--amber)}

.settings{
  position:absolute; right:10px; top:34px; z-index:120;
  background:var(--case); padding:11px 15px; display:flex; flex-direction:column; gap:8px;
  box-shadow:inset 0 0 0 2px var(--case-lo), 4px 4px 0 rgba(0,0,0,.4);
}
.settings label{display:flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--pixel); font-size:10px; color:#D6D0BC}
.settings input{accent-color:var(--amber)}

.coach{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:7px 14px; background:#6A5A2A; color:#F2E6C4;
  box-shadow:inset 0 0 0 1px #8A7538;
}
.coach b{font-family:var(--pixel); font-size:9px; color:#FFDC8A; white-space:nowrap}
.coach span{font-size:13px}

/* ── 창구: 모니터 + 장비 랙 ──────────────────── */
.booth{
  display:grid; grid-template-columns:minmax(0,1fr) 186px; gap:14px;
  padding:14px 16px; min-height:0; position:relative;
  background:
    linear-gradient(180deg,#232420 0%,#1B1C19 100%);
  box-shadow:inset 0 -3px 0 #14150F;
}
/* 창구 유리의 반사 */
.booth-glass{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(112deg,transparent 42%,rgba(190,215,225,.045) 47%,transparent 52%);
}

.monitor{
  min-height:0; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--case-hi),var(--case));
  padding:9px 9px 0;
  box-shadow:inset -3px -3px 0 var(--case-lo), inset 3px 3px 0 rgba(255,255,255,.05), 5px 6px 0 rgba(0,0,0,.42);
}
.monitor-screen{
  flex:1; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--scr); box-shadow:inset 0 0 40px rgba(0,0,0,.75), inset 0 0 0 2px #090C0E;
  position:relative; overflow:hidden;
}
.monitor-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:repeating-linear-gradient(180deg,rgba(232,163,60,.05) 0 1px,transparent 1px 3px);
}
.monitor-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 4px; font-family:var(--pixel); font-size:8px; color:#8E8B7C;
}
.led{width:7px; height:7px; background:#6ED08A; box-shadow:0 0 7px #6ED08A; animation:live 2.4s ease-in-out infinite}

/* 세션 헤더 */
.session-head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:9px 12px; border-bottom:1px solid var(--scr-line); background:var(--scr-2);
}
.portrait{
  width:60px; height:72px; background:#1B252A;
  box-shadow:inset 0 0 0 1px var(--scr-line);
  display:grid; place-items:center;
}
.portrait canvas{image-rendering:pixelated; width:60px; height:72px; display:block}
.session-id{min-width:0}
.handle{
  font-family:var(--mono); font-size:14px; color:var(--amber); margin:0 0 5px;
  word-break:break-all; text-shadow:0 0 8px rgba(232,163,60,.4);
}
.meta{margin:0; display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px}
.meta div{display:flex; gap:6px}
.meta dt{color:var(--txt-faint)}
.meta dd{margin:0; color:var(--txt-soft); font-variant-numeric:tabular-nums}
.risk{text-align:center; font-family:var(--pixel); padding:5px 10px; background:#0A1013; box-shadow:inset 0 0 0 1px var(--scr-line)}
.risk small{display:block; font-size:8px; color:var(--txt-faint)}
.risk b{font-size:19px; color:var(--amber); text-shadow:0 0 9px rgba(232,163,60,.45); animation:jitter 5s steps(1) infinite}

/* 대화 */
.chat{overflow-y:auto; padding:11px 14px; display:flex; flex-direction:column; gap:8px; min-height:0}
.msg{max-width:60ch; font-size:13px; line-height:1.7}
.msg .who{font-family:var(--pixel); font-size:8px; color:var(--txt-faint); display:block; margin-bottom:2px}
.msg.sys{color:var(--amber); text-shadow:0 0 7px rgba(232,163,60,.28)}
.msg.applicant{color:var(--txt)}
.msg.note{color:var(--txt-faint); font-size:12px; box-shadow:inset 2px 0 0 var(--scr-line); padding-left:9px}
.msg .caret{display:inline-block; width:7px; height:1em; margin-left:2px; background:var(--amber); vertical-align:-2px; animation:blink .85s steps(1) infinite}
.msg .fix{color:var(--txt-faint); text-decoration:line-through}

/* 시스템 로그 */
.syslog{
  height:40px; overflow:hidden; padding:3px 12px; background:#080D10;
  border-top:1px solid var(--scr-line);
  font-family:var(--mono); font-size:10px; line-height:1.5; color:#46545B; user-select:none;
}
.logline{display:flex; gap:8px; white-space:nowrap; animation:logIn .18s ease-out}
.logline .ts{color:#34424A; font-variant-numeric:tabular-nums; flex:none}
.logline .lt{overflow:hidden; text-overflow:ellipsis}
.logline.ok .lt{color:#6BB68C}
.logline.alert .lt{color:#D9756A}

/* 장비 랙 */
.rack{
  display:flex; flex-direction:column; gap:9px; padding:11px 10px;
  background:linear-gradient(180deg,var(--case),var(--case-lo));
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3), inset 2px 2px 0 rgba(255,255,255,.04), 4px 5px 0 rgba(0,0,0,.4);
}
.rack-title{font-family:var(--pixel); font-size:9px; color:#9E9A88; margin:0}
.credits small{font-family:var(--pixel); font-size:8px; color:#8E8B7C}
.pips{display:flex; gap:4px; margin-top:4px}
.pips i{width:12px; height:12px; background:var(--amber); box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.pips i.spent{background:#33322C; box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.tool{
  text-align:left; padding:8px 9px; background:#3E3D36;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.05);
}
.tool b{display:block; font-size:12px; color:#DCD6C2; font-weight:500}
.tool span{font-family:var(--pixel); font-size:8px; color:#8E8B7C}
.tool:hover:not(:disabled) b{color:var(--amber)}
.tool:active:not(:disabled){transform:translate(1px,1px)}
.tool:disabled{opacity:.4; cursor:not-allowed}

/* ── 책상 ───────────────────────────────────── */
.desk{
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:0;
  min-height:0; padding:16px 16px 0;
  background:
    radial-gradient(circle at 12% 88%,rgba(40,32,18,.28),transparent 32%),
    radial-gradient(circle at 78% 22%,rgba(40,32,18,.2),transparent 26%),
    radial-gradient(ellipse 90% 70% at 50% 0%,rgba(255,240,200,.08),transparent 60%),
    repeating-linear-gradient(93deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(3deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,var(--desk) 0%,var(--desk-dark) 74%,var(--desk-edge) 100%);
  box-shadow:inset 0 4px 0 rgba(0,0,0,.34), inset 0 -3px 0 rgba(0,0,0,.3);
}
.desk-papers{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; min-height:0}

/* 종이 */
.paper{
  position:relative; min-height:0; display:flex; flex-direction:column;
  color:var(--ink); font-family:var(--serif);
  background:
    radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.16),transparent 55%),
    repeating-linear-gradient(0deg,rgba(120,105,70,.035) 0 1px,transparent 1px 3px),
    linear-gradient(158deg,var(--paper-hi) 0%,var(--paper) 55%,var(--paper-lo) 100%);
  box-shadow:
    3px 4px 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(90,78,50,.35);
}
.doc-packet{transform:rotate(-.35deg)}
.doc-rules{transform:rotate(.28deg)}

.paper-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 12px; background:var(--paper-band); color:#EDE4CC;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);
}
.paper-head b{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em}
.paper-head .stub{font-family:var(--pixel); font-size:8px; color:#D3C7A6}
.paper-note{
  margin:0; padding:4px 12px; font-family:var(--sans); font-size:10.5px; color:var(--ink-soft);
  border-bottom:1px solid var(--rule-line); background:rgba(255,255,255,.12);
}

/* 구멍 · 스테이플 — 물성 */
.punch{position:absolute; left:-1px; top:52px; display:flex; flex-direction:column; gap:38px}
.punch i{width:9px; height:9px; border-radius:50%; background:var(--desk-dark); box-shadow:inset 1px 1px 0 rgba(0,0,0,.4)}
.staple{
  position:absolute; right:14px; top:-2px; width:16px; height:7px;
  background:linear-gradient(180deg,#B9B4A4,#7E7A6C);
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}

/* ── 신청서 항목: 대조의 무대 ─────────────────── */
.packet{list-style:none; margin:0; padding:4px 10px 10px; display:flex; flex-direction:column; gap:0; overflow-y:auto}
.packet li{position:relative}
.field{
  width:100%; display:grid;
  grid-template-columns:118px minmax(16px,1fr) auto 66px;
  gap:9px; align-items:center; padding:4px 8px;
  font-family:var(--mono); font-size:11.5px; text-align:left; color:var(--ink);
  border-bottom:1px solid var(--rule-line);
}
.field:hover{background:rgba(255,252,235,.4)}
.field .addr{display:none}
.field .code{font-size:10.5px; letter-spacing:.02em; color:var(--ink-soft)}
.field .leader{border-bottom:1px dotted #9A8F72; height:1px; align-self:center}
.field .v{font-variant-numeric:tabular-nums; font-weight:500; text-align:right; white-space:nowrap}
.field .st{
  font-family:var(--pixel); font-size:8px; text-align:center; padding:3px 0;
  box-shadow:inset 0 0 0 1px currentColor;
}
.st.pending{color:#6B6350; background:rgba(255,255,255,.3)}
.st.norule{color:#8A8271; box-shadow:inset 0 0 0 1px rgba(138,130,113,.5)}
.st.nodata{color:#8A8271; box-shadow:inset 0 0 0 1px rgba(138,130,113,.35)}
.st.ok{color:var(--ok-ink); background:rgba(75,120,48,.16)}
.st.alert{color:var(--bad-ink); background:rgba(158,49,35,.18)}
.st.exempt{color:#7A5C15; background:rgba(200,160,50,.22)}
.st.flagged{color:#F0E6D0; background:var(--bad-ink); box-shadow:inset 0 0 0 1px var(--bad-ink)}

.field.locked .v{color:#9A9280; letter-spacing:.12em}
.field.violating{background:rgba(158,49,35,.13)}
.field.violating .v{color:var(--bad-ink); font-weight:600}
.field.cleared{background:rgba(120,95,20,.12)}
.field.flagged{background:rgba(158,49,35,.2); box-shadow:inset 3px 0 0 var(--bad-ink)}
.field.probed .code::after{content:" ▸"; color:#8A6A1E}

.field-actions{display:flex; gap:6px; padding:4px 8px 6px}
.mini{
  font-family:var(--sans); font-size:10.5px; font-weight:500; padding:5px 10px;
  color:#F0E6D0; background:var(--bad-ink);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.28);
}
.mini:active{transform:translate(1px,1px)}
.mini.probe{color:var(--ink); background:#AFA488; box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
.mini:disabled{opacity:.45; cursor:not-allowed}

/* ── 지침서 조항 ──────────────────────────────── */
.rules{list-style:none; margin:0; padding:6px 10px 12px; overflow-y:auto; display:flex; flex-direction:column}
.rules li{
  display:grid; grid-template-columns:48px 1fr; gap:10px; padding:7px 8px;
  font-size:12.5px; line-height:1.6; border-bottom:1px solid var(--rule-line);
}
.rules li .id{font-family:var(--pixel); font-size:9px; color:var(--ink-soft); padding-top:2px}
.rules li .t{color:var(--ink)}
.rules li.linked{background:rgba(232,190,90,.3); box-shadow:inset 3px 0 0 #8A6A1E}
.rules li.hit{background:rgba(158,49,35,.17); box-shadow:inset 3px 0 0 var(--bad-ink)}
.rules li.hit .id{color:var(--bad-ink)}
.rules li.exempt{background:rgba(75,120,48,.17); box-shadow:inset 3px 0 0 var(--ok-ink)}
.rules li.exempt .id{color:var(--ok-ink)}
.rules .why{display:block; margin-top:4px; font-size:11.5px; color:var(--ok-ink); font-family:var(--sans)}

/* ── 도장 트레이 ──────────────────────────────── */
.stamp-tray{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:12px 0 18px; min-height:96px; align-items:end;
}
.verdict{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:0;
  padding:0 0 8px; transition:transform .08s;
}
.handle-knob{
  width:38px; height:16px;
  background:linear-gradient(180deg,#8A6038,#5E3F22);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.14);
}
.verdict .face{
  display:block; width:100%; padding:10px 4px;
  font-family:var(--pixel); font-size:clamp(11px,1.5vw,15px); letter-spacing:.04em;
  color:#F2ECD8; text-align:center;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.32), inset 3px 3px 0 rgba(255,255,255,.12), 3px 4px 0 rgba(0,0,0,.4);
}
.verdict em{font-family:var(--sans); font-style:normal; font-size:10.5px; color:#D8D0B4; margin-top:5px}
.verdict.approve .face{background:var(--ok)}
.verdict.deny .face{background:var(--bad)}
.verdict.purge .face{background:var(--void)}
.verdict:hover:not(:disabled){transform:translateY(-3px)}
.verdict:active:not(:disabled){transform:translateY(3px)}
.verdict:active:not(:disabled) .face{box-shadow:inset -2px -2px 0 rgba(0,0,0,.32), inset 2px 2px 0 rgba(255,255,255,.1), 1px 1px 0 rgba(0,0,0,.4)}
.verdict:disabled{opacity:.38; cursor:not-allowed}

/* ── 판정 도장이 찍히는 순간 ──────────────────── */
.stamp{
  position:absolute; left:0; right:0; bottom:0; height:56%; z-index:200;
  display:grid; place-items:center; pointer-events:none;
  background:rgba(20,17,12,.2);
}
.stamp b{
  font-family:var(--pixel); font-size:clamp(30px,8vw,74px); letter-spacing:.08em;
  padding:16px 38px; box-shadow:inset 0 0 0 6px currentColor;
  transform:rotate(-11deg) scale(2.5); opacity:0;
  animation:slam .4s cubic-bezier(.2,1.5,.35,1) forwards;
}
.stamp.approve b{color:#5E9639}
.stamp.deny b{color:#C4402E}
.stamp.purge b{color:#E8E2D0; background:rgba(20,17,14,.85)}
@keyframes slam{
  0%{transform:rotate(-11deg) scale(2.5); opacity:0}
  55%{transform:rotate(-11deg) scale(.9); opacity:1}
  72%{transform:rotate(-11deg) scale(1.05)}
  100%{transform:rotate(-11deg) scale(1); opacity:1}
}

/* ═══ 결과 ═══════════════════════════════════════ */
.result{
  display:grid; place-items:center; padding:5vh 6vw;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%,rgba(255,240,200,.05),transparent 65%),
    repeating-linear-gradient(93deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,var(--desk) 0%,var(--desk-dark) 80%,var(--desk-edge) 100%);
}
.result-card{max-width:58ch; width:100%; transform:rotate(-.5deg); box-shadow:6px 8px 0 rgba(0,0,0,.34), inset 0 0 0 1px rgba(90,78,50,.35)}
.result-card h2{font-family:var(--pixel); font-size:clamp(16px,2.4vw,22px); margin:20px 22px 14px; letter-spacing:.03em}
.result-card h2.correct{color:var(--ok-ink)}
.result-card h2.wrong,.result-card h2.fatal{color:var(--bad-ink)}
.result-card h2.branch,.result-card h2.excess,.result-card h2.partial{color:#8A6A1E}
.news{margin:0 22px 18px; padding:2px 0 2px 14px; box-shadow:inset 2px 0 0 var(--paper-band); color:var(--ink-soft); font-size:13px; font-family:var(--sans)}
.news b{display:block; font-family:var(--pixel); font-size:8px; color:var(--ink-faint); margin-bottom:5px}
.result-card .paper-head{padding:8px 22px}
.result-card .paper-head b{font-size:14px}
.missed{margin:0 22px 18px; font-size:12.5px; color:var(--bad-ink); font-family:var(--sans)}
.missed:empty{display:none}
.missed ul{margin:5px 0 0; padding-left:17px}
.result-card .btn-primary{align-self:flex-start; margin:0 22px 24px}

/* ═══ 공통 애니메이션 ════════════════════════════ */
@keyframes blink{50%{opacity:0}}
@keyframes live{50%{opacity:.3}}
@keyframes logIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@keyframes jitter{0%,96%{transform:none}97%{transform:translateX(.6px)}98%{transform:translateX(-.4px)}99%{transform:none}}
.packet li.fresh{animation:drop .24s ease-out both}
@keyframes drop{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.field.violating{animation:alert .5s ease-out}
@keyframes alert{0%{background:rgba(158,49,35,.42)}100%{background:rgba(158,49,35,.13)}}
.rules li.linked{position:relative; overflow:hidden}
.rules li.linked::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,240,190,.45),transparent);
  transform:translateX(-100%); animation:sweep .55s ease-out;
}
@keyframes sweep{to{transform:translateX(100%)}}

/* ═══ 모바일 ═════════════════════════════════════ */
@media (max-width:880px){
  body{overflow:auto}
  .shift{height:auto; min-height:100dvh; grid-template-rows:repeat(5,auto)}
  .booth{grid-template-columns:1fr; padding:10px}
  .monitor-screen{min-height:280px}
  .rack{flex-direction:row; flex-wrap:wrap; align-items:center}
  .rack-title{flex:1 1 100%}
  .tool{flex:1}
  .desk{padding:12px 10px 0}
  .desk-papers{grid-template-columns:1fr; gap:14px}
  .doc-packet,.doc-rules{transform:none}
  .packet,.rules{overflow:visible}
  .field{grid-template-columns:1fr auto 62px; gap:8px; padding:9px 8px; min-height:44px}
  .field .leader{display:none}
  .stamp-tray{gap:8px; padding:12px 0 14px; position:sticky; bottom:0; z-index:40}
  .verdict .face{font-size:11px; padding:9px 2px}
  .verdict em{font-size:9.5px}
}

@media (prefers-reduced-motion:reduce){
  .stamp b{animation:none; opacity:1; transform:rotate(-11deg)}
  .packet li.fresh,.field.violating,.rules li.linked::after,.logline,
  .risk b,.led,.msg .caret,.hud-cell.urgent b{animation:none}
  .rules li.linked::after{display:none}
}


/* 판정 잉크가 신청서에 남는다 */
.doc-packet.inked::after{
  content:attr(data-ink); position:absolute; inset:0; z-index:9;
  display:grid; place-items:center; pointer-events:none;
  font-family:var(--pixel); font-size:clamp(20px,4vw,38px); letter-spacing:.08em;
  transform:rotate(-11deg);
  animation:inkIn .3s ease-out both;
}
.doc-packet.inked[data-ink="APPROVE"]::after{color:rgba(75,120,48,.7); box-shadow:inset 0 0 0 5px rgba(75,120,48,.55)}
.doc-packet.inked[data-ink="DENY"]::after{color:rgba(158,49,35,.72); box-shadow:inset 0 0 0 5px rgba(158,49,35,.6)}
.doc-packet.inked[data-ink="PURGE"]::after{color:rgba(30,26,22,.85); box-shadow:inset 0 0 0 5px rgba(30,26,22,.72)}
@keyframes inkIn{from{opacity:0; transform:rotate(-11deg) scale(1.5)} to{opacity:1; transform:rotate(-11deg) scale(1)}}
@media (prefers-reduced-motion:reduce){ .doc-packet.inked::after{animation:none} }


/* 접힌 모서리 */
.paper::after{
  content:""; position:absolute; right:0; bottom:0; width:16px; height:16px;
  background:linear-gradient(135deg,transparent 50%,var(--paper-lo) 50%,#9E9377 100%);
  box-shadow:-1px -1px 0 rgba(90,78,50,.3);
}


/* 지침서 하단 개정 안내 */
.rules-foot{
  margin:auto 0 0; padding:8px 12px 10px;
  font-family:var(--sans); font-size:10.5px; color:var(--ink-faint);
  border-top:1px dashed var(--rule-line); text-align:center;
}