/* =============================================================================
   미래미디어 자료열람시스템 — 웹 빌드
   토큰과 8원칙은 docs/03-design-spec.md 를 그대로 따른다. 새 팔레트를 만들지 않는다.

   원칙 02(두 층은 절대 섞이지 않는다)를 CSS 구조로 못박는다.
     .sys   시스템 셸  — 어둡다 · 모노스페이스 · 차갑다
     .paper 자료 본체  — 밝은 종이 · 명조
     .win   예전 윈도우 — 진입 흐름 전용 셸(회색 베벨)
   한 요소가 두 층의 클래스를 같이 갖는 일은 없어야 한다.
   ========================================================================== */

:root{
  --bg:oklch(0.19 0.012 250); --pn:oklch(0.235 0.014 250); --pn2:oklch(0.28 0.016 250);
  --sunk:oklch(0.155 0.012 250);
  --ln:oklch(0.36 0.014 250);
  --tx:oklch(0.90 0.008 250); --t2:oklch(0.66 0.010 250); --t3:oklch(0.50 0.012 250);
  --cy:oklch(0.72 0.10 200); --am:oklch(0.72 0.10 85);
  --pp:oklch(0.93 0.012 92); --ik:oklch(0.30 0.012 92); --ik2:oklch(0.52 0.012 92);

  --ui:'IBM Plex Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --mo:'Nanum Gothic Coding','D2Coding',Consolas,monospace;
  --se:'Nanum Myeongjo','Batang',serif;

  /* 간격 스케일은 4/8/12/14/18 만(원칙: 간격·형태) */
  --s1:4px; --s2:8px; --s3:12px; --s4:14px; --s5:18px;

  /* 가로 최대는 화면을 따라간다. 다만 본문 가독을 위해 상한을 둔다 —
     한 줄이 길어지면 15px 본문은 읽기 어려워진다. */
  --maxw:100%;
  --pad:14px;

  color-scheme:dark;
}
@media (min-width:640px){  :root{ --maxw:600px; --pad:20px; } }
@media (min-width:1024px){ :root{ --maxw:760px; --pad:24px; } }
@media (min-width:1440px){ :root{ --maxw:880px; --pad:28px; } }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--ui); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
img,video{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input{font:inherit;}

/* 모서리 반경 0 · 그림자 없음 · 그라데이션 없음 (원칙 01) */
*{border-radius:0 !important;}

/* 주사선 (FX01) */
/* 알파를 .16 → .08 로 절반. 줄이 진하면 본문을 읽는 동안 눈이 아프다.
   질감은 남겨야 하므로 없애지 않고 옅게만 하고, 줄 간격·굵기(1px/3px)는 그대로 둔다. */
.crt{position:fixed;inset:0;pointer-events:none;z-index:90;
     background:repeating-linear-gradient(to bottom,oklch(0 0 0/.08) 0 1px,transparent 1px 3px);}
@media (prefers-reduced-motion:reduce){ .crt{display:none;} }
body.no-crt .crt{display:none;}

/* 화면 전환 — 느리게. 오래된 시스템은 느리다(원칙 07) */
@keyframes fadein{from{opacity:0}to{opacity:1}}
.fade{animation:fadein .9s ease both;}
@keyframes decode{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.decode > *{animation:decode .5s ease both;}
.decode > *:nth-child(2){animation-delay:.10s}
.decode > *:nth-child(3){animation-delay:.20s}
.decode > *:nth-child(4){animation-delay:.30s}
.decode > *:nth-child(5){animation-delay:.40s}
.decode > *:nth-child(n+6){animation-delay:.48s}
@media (prefers-reduced-motion:reduce){ .fade,.decode>*{animation:none} }

/* ── 레이아웃 ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.screen{min-height:100dvh;display:flex;flex-direction:column;}
.stack{display:flex;flex-direction:column;gap:var(--s4);}
.stack-lg{display:flex;flex-direction:column;gap:var(--s5);}
.grow{flex:1;min-height:0;}

/* ══ 시스템 셸 ═════════════════════════════════════════════════════════ */
.bar{height:30px;display:flex;align-items:center;justify-content:space-between;
     border-bottom:1px solid var(--ln);font-family:var(--mo);font-size:11px;
     letter-spacing:.08em;color:var(--t3);flex:none;}
.hd{padding:var(--s4) 0;border-bottom:1px solid var(--ln);
    display:flex;align-items:center;gap:12px;flex:none;}
.hd .htitle{font-size:15px;font-weight:600;}
.hd .back{font-family:var(--mo);font-size:12px;color:var(--cy);cursor:pointer;flex:none;}
.hd .back:hover{color:var(--am);}

.lbl{font-family:var(--mo);font-size:10px;letter-spacing:.16em;color:var(--t3);}
.mo{font-family:var(--mo);}
.dim{color:var(--t2);}

/* 정보 위계는 3단으로 고정(원칙 05) — 라벨 10 / 값 12–14 / 본문 15 */
.val{font-family:var(--mo);font-size:13px;color:var(--tx);}
.body{font-size:15px;line-height:1.95;}

.panel{border:1px solid var(--ln);background:var(--pn);padding:var(--s4);}
.sunk{border:1px solid var(--ln);background:var(--sunk);padding:var(--s4);}

/* 시스템 발화 */
.sys{font-family:var(--mo);font-size:12px;color:var(--cy);background:var(--sunk);
     border-left:2px solid var(--cy);padding:11px 12px;line-height:1.8;}
/* 오류는 붉은색을 쓰지 않는다 — 앰버 코드로만(원칙: 색 토큰) */
.err{font-family:var(--mo);font-size:12px;color:var(--am);}

/* 버튼 — 테두리 1px 과 글자만. 히트 영역 46px 고정 */
.btn{display:flex;align-items:center;justify-content:center;min-height:46px;
     border:1px solid var(--cy);color:var(--cy);
     background:color-mix(in oklch,var(--cy) 10%,transparent);
     font-family:var(--mo);font-size:13px;letter-spacing:.12em;width:100%;}
.btn:hover{background:color-mix(in oklch,var(--cy) 18%,transparent);}
.btn.sm{min-height:40px;font-size:12px;border-color:var(--ln);color:var(--t2);background:none;}
.btn.off{border-color:var(--ln);color:var(--t3);background:none;cursor:not-allowed;}
.btn.am{border-color:var(--am);color:var(--am);
        background:color-mix(in oklch,var(--am) 10%,transparent);}

.fld{width:100%;min-height:46px;background:var(--sunk);border:1px solid var(--ln);
     color:var(--tx);font-family:var(--mo);font-size:15px;padding:0 12px;outline:none;}
.fld:focus{border-color:var(--cy);}
.fld::placeholder{color:oklch(0.42 0.010 250);}

/* 열람 목록 항목 */
.item{display:flex;align-items:center;gap:12px;padding:var(--s4);
      border:1px solid var(--ln);background:var(--pn);cursor:pointer;}
.item:hover{border-color:var(--cy);}
.item .no{font-family:var(--mo);font-size:12px;color:var(--t3);flex:none;width:22px;}
.item .ti{font-size:15px;font-weight:600;}
.item .st{font-family:var(--mo);font-size:11px;flex:none;letter-spacing:.06em;}
.item.lock{cursor:default;}
.item.lock:hover{border-color:var(--ln);}
.item.lock .ti{color:var(--t2);}
.item.done .st{color:var(--cy);}
.item.locked .st{color:var(--am);}

/* 05 조사 결론은 목록에서 떨어져 앉는다 — 같은 층의 다섯 번째가 아니라
   '그 다음에 오는 것'으로 읽혀야 한다. 간격이 그 말을 대신한다. */
/* 방금 열린 항목 — 여기를 누르라고 짚어 준다.
   문서를 하나 읽고 목록으로 돌아왔을 때 무엇이 새로 열렸는지 한눈에 보여야
   한다. 앰버 테두리 하나로 끝낸다 — 깜빡임이나 그림자는 쓰지 않는다. */
.item.next{border-color:var(--am);
           background:color-mix(in oklch,var(--am) 5%,transparent);}
.item.next .no{color:var(--am);}

.item.final{margin-top:34px;border-color:var(--am);
            background:color-mix(in oklch,var(--am) 7%,transparent);}
.item.final .ti{color:var(--tx);}
.final-rule{margin-top:26px;border-top:1px solid var(--ln);}
.final-note{font-family:var(--mo);font-size:10.5px;letter-spacing:.14em;
            color:var(--t3);text-align:center;margin-top:-8px;}

/* ══ 자료 본체 — 종이 ═══════════════════════════════════════════════════ */
.paper{background:var(--pp);color:var(--ik);font-family:var(--se);
       padding:var(--s5) var(--s4) 22px;display:flex;flex-direction:column;gap:var(--s4);}
.paper .phd{display:flex;justify-content:space-between;align-items:flex-start;
            border-bottom:2px solid var(--ik);padding-bottom:var(--s2);gap:12px;}
.paper .docno{font-family:var(--mo);font-size:9.5px;letter-spacing:.14em;color:var(--ik2);}
.paper .ptitle{font-size:20px;font-weight:700;margin-top:3px;}
.paper h3{font-family:var(--se);font-size:13px;letter-spacing:.05em;margin:0 0 2px;}
.paper .meta{font-family:var(--mo);font-size:11px;color:var(--ik2);line-height:2;
             border-bottom:1px dotted var(--ik2);padding-bottom:var(--s2);}
.paper .p{font-size:15px;line-height:1.95;}
.stamp{font-family:var(--mo);font-size:9px;letter-spacing:.14em;border:1px solid var(--ik2);
       color:var(--ik2);padding:3px 6px;flex:none;white-space:nowrap;}
.mark{background:color-mix(in oklch,var(--am) 34%,transparent);}
.quote{display:block;margin-top:var(--s2);padding-left:10px;
       border-left:2px solid var(--ik2);color:var(--ik2);font-size:14px;}

/* 문서 안의 사진은 '붙인 인화지'다. 시스템 색을 쓰지 않는다. */
figure{margin:0;}
figure img{width:100%;border:1px solid var(--ik2);}
figcaption{font-family:var(--mo);font-size:10px;color:var(--ik2);
           letter-spacing:.04em;margin-top:5px;line-height:1.55;}
.figrow{display:flex;gap:var(--s2);}
.figrow figure{flex:1;min-width:0;}

/* ══ 예전 윈도우 — 진입 흐름 전용 ═══════════════════════════════════════ */
.win{--face:#c0c0c0;--lite:#fff;--hi:#dfdfdf;--sh:#808080;--dk:#000;
     --tb1:#000080;--tb2:#1084d0;
     background:#3a6ea5;color:#000;
     font-family:'Gulim','굴림','Dotum','MS Sans Serif',Tahoma,var(--ui);
     font-size:12px;line-height:1.5;
     display:flex;flex-direction:column;min-height:100dvh;}
.win a{color:#0000c0;text-decoration:underline;cursor:pointer;}
.out{background:var(--face);
     box-shadow:inset -1px -1px 0 var(--dk),inset 1px 1px 0 var(--lite),
                inset -2px -2px 0 var(--sh),inset 2px 2px 0 var(--hi);}
.inset{background:#fff;
       box-shadow:inset 1px 1px 0 var(--sh),inset -1px -1px 0 var(--lite),
                  inset 2px 2px 0 var(--dk),inset -2px -2px 0 var(--hi);}
.wbtn{background:var(--face);
      box-shadow:inset -1px -1px 0 var(--dk),inset 1px 1px 0 var(--lite),
                 inset -2px -2px 0 var(--sh),inset 2px 2px 0 var(--hi);
      display:flex;align-items:center;justify-content:center;cursor:pointer;
      min-height:30px;padding:0 12px;}
.wtb{width:16px;height:14px;background:var(--face);
     box-shadow:inset -1px -1px 0 var(--dk),inset 1px 1px 0 var(--lite),
                inset -2px -2px 0 var(--sh),inset 2px 2px 0 var(--hi);
     display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;}
.wtitle{height:20px;background:linear-gradient(90deg,var(--tb1),var(--tb2));
        display:flex;align-items:center;padding:0 2px 0 5px;gap:3px;flex:none;}
.wtitle span{flex:1;color:#fff;font-size:11px;font-weight:700;
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wmn{padding:2px 7px;font-size:11.5px;}
/* 작업표시줄 하단. 인앱 브라우저 하단 툴바와 겹칠 수 있어 실기기 확인 필요. */
.wtask{flex:none;height:34px;padding:2px 3px;display:flex;align-items:center;gap:5px;}
.wico{width:78px;display:flex;flex-direction:column;align-items:center;gap:3px;
      text-align:center;cursor:pointer;}
.wico span{color:#fff;font-size:11.5px;line-height:1.35;
           text-shadow:1px 1px 0 rgba(0,0,0,.6);padding:1px 3px;}
.wico.sel span{background:#000080;}
.wrow td{padding:5px 4px;border-bottom:1px solid #e2e2e2;font-size:12px;vertical-align:top;}
.wc{padding:7px 3px 7px 11px;border-bottom:1px solid #ededed;font-size:12px;line-height:1.7;}
.wc .who{color:#405878;font-weight:700;}
.wc .when{color:#a0a0a0;font-size:10.5px;float:right;}

/* ══ 엔딩 — 앰버 반전. 10분 중 딱 한 번 ════════════════════════════════ */
.amber{background:var(--am);color:oklch(0.20 0.02 85);min-height:100dvh;}
.amber .bar{border-color:oklch(0.20 0.02 85);color:oklch(0.20 0.02 85);}
.amber .btn{border-color:oklch(0.20 0.02 85);color:oklch(0.20 0.02 85);background:none;}
.amber .rule{border-top:2px solid oklch(0.20 0.02 85);
             border-bottom:2px solid oklch(0.20 0.02 85);padding:var(--s4) 0;}

/* ══ 최종 경고 — 여기서만 원칙이 깨진다 ═══════════════════════════════
   10분 내내 무채색 관료 화면을 지킨 이유가 이 한 장면 때문이다.
   여기서 처음으로 시스템이 문서가 아니라 **읽고 있는 사람**을 향해 말한다.
   그 순간 색이 튄다 — 원칙 05(경고색은 앰버 하나)를 의도적으로 어기는
   유일한 지점이다. 어디서든 쓸 수 있게 두면 그냥 색깔일 뿐이라,
   이 화면 밖에서는 .alert 를 쓰지 않는다.
   그라데이션·반경·그림자는 여기서도 쓰지 않는다. 규칙 하나만 깬다. */
.alert{background:oklch(0.26 0.115 27);color:oklch(0.93 0.13 92);min-height:100dvh;}
.alert .bar{border-color:oklch(0.93 0.13 92);color:oklch(0.93 0.13 92);}
.alert .lbl{color:oklch(0.84 0.11 88);}
.alert .btn{border-color:oklch(0.93 0.13 92);color:oklch(0.93 0.13 92);background:none;}
.alert .btn:active{background:oklch(0.93 0.13 92);color:oklch(0.26 0.115 27);}

/* 경고 상자 — 시스템이 띄운 창이다. 종이가 아니라 화면 위에 뜬 것 */
.wbox{border:2px solid oklch(0.93 0.13 92);padding:var(--s5) var(--s4);
      background:oklch(0.20 0.09 27);}
.wbox .wh{font-family:var(--mo);font-size:13px;letter-spacing:.10em;
          font-weight:700;margin-bottom:var(--s4);}
.wbox p{margin:0 0 var(--s3);font-size:14px;line-height:1.95;}
.wbox .note{border-top:1px solid oklch(0.93 0.13 92 / .5);
            padding-top:var(--s3);margin-top:var(--s4);
            font-size:12.5px;line-height:1.85;}

/* 등록된 접속 정보 — 실제로 읽어 온 값이 들어간다 */
.wreg{font-family:var(--mo);font-size:12.5px;line-height:2.05;}
.wreg div{display:flex;gap:var(--s3);}
.wreg span:first-child{flex:none;width:96px;color:oklch(0.84 0.11 88);}

/* 인쇄 — 타자기가 한 글자씩 찍는다. 커서는 마지막 줄에만 */
.print{font-family:var(--mo);font-size:12.5px;line-height:2.15;
       white-space:pre-wrap;min-height:7.5em;}
.print .cur{border-right:2px solid oklch(0.93 0.13 92);}

/* 명단 — 일부러 지루하게 */
.roster{font-family:var(--mo);font-size:12px;line-height:2.1;opacity:.62;}
.roster .me{opacity:1;font-weight:700;}

/* 영상 전면.
   세로 영상을 width:100%/height:100% 로 두면 안 된다 — 부모 높이가 auto 라
   백분율이 풀리지 않고, 데스크톱에서 폭을 다 먹은 뒤 제 비율대로 세로가
   따라 커진다. 실제로 2545x4546 까지 갔다.
   그래서 크기는 뷰포트로 묶고, 원본 화소(720) 이상으로 늘리지 않는다.
   잘라내지는 않는다 — 이 영상엔 자막이 박혀 있다. 남는 자리는 검게 둔다. */
.stagev{position:relative;background:#000;flex:1;min-height:0;
        display:flex;align-items:center;justify-content:center;overflow:hidden;}
.stagev video,.stagev img{width:auto;height:auto;
                          max-width:min(100%,720px);max-height:68dvh;
                          object-fit:contain;}

/* 재생 표지 — 썸네일 한가운데 얹는다.
   둥근 재생 버튼은 쓰지 않는다(원칙 01: 모서리 반경 0). 네모난 판에 삼각형
   하나 — 2003년 재생기가 실제로 그렇게 생겼으니 규칙과 시대가 같은 답을 낸다.
   삼각형은 글리프가 아니라 테두리로 그린다. 글꼴에 따라 ▶ 의 크기와 세로
   위치가 제각각이라 가운데가 안 맞는다. */
.vplay{position:absolute;inset:0;display:flex;flex-direction:column;
       align-items:center;justify-content:center;gap:9px;
       background:oklch(0 0 0 / .22);border:0;padding:0;margin:0;
       color:var(--am);font:inherit;cursor:pointer;}
.vplay[hidden]{display:none;}
.vplay .pbox{width:58px;height:44px;border:1px solid var(--am);
             background:oklch(0 0 0 / .48);
             display:flex;align-items:center;justify-content:center;}
.vplay .ptri{width:0;height:0;margin-left:4px;
             border-left:15px solid var(--am);
             border-top:10px solid transparent;border-bottom:10px solid transparent;}
.vplay .pcap{font-family:var(--mo);font-size:11px;letter-spacing:.18em;}
.vplay:hover .pbox,.vplay:focus-visible .pbox{background:oklch(0 0 0 / .70);}

/* 접근성 — 포커스가 보여야 한다 */
:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;}