/* ============================================================
   HELIOS — 소녀전선 홈스크린 레이아웃
   전체화면 배경 위에 HUD가 떠 있는 구조.
   좌상단 프로필 · 상단 스테이터스 · 우측 계단식 메뉴
   좌하단 뉴스 · 하단 트레이(출첵/DM/임무)
   의존성 없는 순수 CSS
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root {
  --bg-void:    #070a0f;
  --bg-deep:    #0b0f16;
  --bg-panel:   #111722;
  --bg-raised:  #18202e;
  --bg-sunken:  #0a0e15;

  --line-faint: #1e2836;
  --line:       #2a3646;
  --line-bright:#3d4d63;

  --text-hi:    #e8eef7;
  --text:       #a8b6c8;
  --text-dim:   #7c8ba0;

  --solar:      #f5c33b;
  --solar-hi:   #ffd96b;
  --solar-deep: #c89412;
  --solar-dim:  #4a3510;
  --plasma:     #39d4e0;
  --plasma-dim: #10353a;
  --ion:        #7c5cff;
  --ion-dim:    #241a4d;
  --warn:       #ff8a3d;
  --danger:     #e8443f;
  --ok:         #3ddc84;

  --glass:      rgba(10, 14, 21, .84);
  --glass-soft: rgba(10, 14, 21, .62);
  --glass-line: rgba(255, 255, 255, .13);

  --skew: 0deg;      /* 사용자의 요청으로 스큐(기울기) 제거 */
  --cut:  14px;

  --font-ui: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
             "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-tac: "Rajdhani", "Saira Condensed", "Segoe UI", var(--font-ui);
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "D2Coding", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;

  /* ==========================================================
     소녀전선 로비 실측 기준계
     ----------------------------------------------------------
     기준 캔버스: 735 x 412 (16:9). 아래 --sf-* 값은 전부 그
     캔버스에서 잰 픽셀이며, calc(N * var(--u)) 로 실제 화면에
     비례 확대된다. 즉 이 블록이 곧 실측표다.

     --u 유도:
       가로 기준 1px = 100/735 vw = .1361vw
       세로 안전판   1px = 100/412 vh 이지만, 화면비 2.13 보다
                     납작해질 때만 물리도록 .29vh 로 둔다.
       min() 이므로 16:9~2.13 구간에서는 원작과 동일한 가로 비례,
       그보다 납작하면 세로에 맞춰 줄어들어 잘리지 않는다.
       상한 2.05px = 폭 1506px 이후로는 HUD 가 더 커지지 않는다.
     ========================================================== */
  --u: clamp(.72px, min(.1361vw, .29vh), 2.05px);

  --sf-w:        114.5; /* 버튼 너비        (15.58% W) */
  --sf-h:         57.5; /* 일반 버튼 높이   ( 7.82% W) */
  --sf-h-main:      77; /* 주 버튼 높이     (일반의 1.339배) */
  --sf-gap-col:   18.5; /* 열 간격          ( 2.52% W) */
  --sf-gap-row:     15; /* 행 간격          ( 2.04% W) */
  --sf-gap-main:  13.5; /* 주 버튼 위 간격  ( 1.84% W) */
  --sf-edge:      14.5; /* 화면 우측 여백   ( 1.97% W) */
  --sf-stagger:      9; /* 우측 열 올림량. 0 이면 반듯한 격자 */

  --sf-chamfer:      7; /* 좌하단 45도 모따기 */
  --sf-bw:           1; /* 테두리 두께 */
  --sf-bk:        2.25; /* 코너 브래킷 두께 (테두리의 2.25배) */
  --sf-ba:         9.5; /* 코너 브래킷 팔 길이 */

  --sf-icw:         44; /* 아이콘 영역 폭 (버튼의 38%) */
  --sf-ic:          35; /* 아이콘 변 길이 */
  --sf-pad:          4; /* 텍스트 우측 여백 */
  --sf-kr:          23; /* 한글 라벨 (버튼 높이의 40%) */
  --sf-en:          12; /* 영문 라벨 (버튼 높이의 21%) */

  --sf-fill:  rgba(43, 44, 49, .6);   /* 실측 #2B2C31 */
  --sf-line:  rgba(255, 255, 255, .58);
  --sf-brk:   #ffffff;
  --sf-ink:   #ffffff;
  color-scheme: dark;
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.55;
  color: var(--text); background: #05070b; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--plasma); text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--solar); outline-offset: 3px; }
::selection { background: var(--solar); color: #000; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

/* ============================================================
   3. 허브 (로비)
   ============================================================ */
.hub { position: fixed; inset: 0; overflow: hidden; }
.hub__bg { position: absolute; inset: 0; }
.hub__bg svg { width: 100%; height: 100%; }
.hub__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3,5,9,.9) 0%, transparent 17%,
                    transparent 70%, rgba(3,5,9,.92) 100%),
    radial-gradient(ellipse 105% 95% at 50% 45%, transparent 42%, rgba(3,5,9,.66) 100%);
}

.hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hud > * { pointer-events: auto; transition: opacity 260ms var(--ease), visibility 260ms; }
.hud.is-hidden > *:not(.utils) { opacity: 0; visibility: hidden; }

/* ---------- 3.1 상단 바 ----------
   실측: 바 높이 46 / LV 뱃지 지름 40 / 자원 블록 피치 112·폭 87 /
   수치 20 · 라벨 11 · 노란 밑줄 2. 원본에는 블록 사이 구분선이 없고
   대신 각 블록 아래에 노란 밑줄이 깔린다. */
.top {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(46 * var(--u));
  display: flex; align-items: flex-start;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u)) 0;
  background: linear-gradient(to bottom, rgba(4,6,10,.94), rgba(4,6,10,.5) 76%, transparent);
}

/* 프로필 — 큰 레벨 숫자 | 이름 / 직책 뱃지 · UID */
.prof {
  display: flex; align-items: center; flex: none; gap: calc(9 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u)) 0 calc(4 * var(--u));
  background: none; border: 0; color: #fff; text-align: left; cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); transition: filter var(--dur);
}
.prof:hover { filter: brightness(1.15); }
.prof__lv {
  font-family: var(--font-tac); font-size: calc(38 * var(--u)); font-weight: 700;
  line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.prof__plate { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.prof__n { font-size: calc(17 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.prof__meta { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.prof__r {
  font-family: var(--font-tac); font-size: max(11px, calc(8.5 * var(--u))); font-weight: 600;
  line-height: 1; letter-spacing: .06em; color: #0a0a0a;
  padding: calc(1.5 * var(--u)) calc(4 * var(--u));
  background: #fff; text-shadow: none;
}
.prof__uid {
  font-family: var(--font-tac); font-size: max(11px, calc(9.5 * var(--u))); font-weight: 600;
  letter-spacing: .04em; color: rgba(255,255,255,.85);
}

.top__sp { flex: 1; }

/* 동아리 스테이터스 = 원작의 자원 블록 */
.stats { display: flex; align-items: flex-start; }
.stat {
  position: relative;
  display: flex; align-items: center;
  gap: calc(5 * var(--u));
  min-width: calc(87 * var(--u));
  padding: 0 calc(12 * var(--u)) calc(5 * var(--u));
  transition: background var(--dur);
}
/* 노란 밑줄 — 원본의 가장 눈에 띄는 상단 바 요소 */
.stat::after {
  content: ""; position: absolute;
  left: calc(6 * var(--u)); right: calc(6 * var(--u)); bottom: 0;
  height: calc(2 * var(--u));
  background: var(--solar); opacity: .9;
}
button.stat:hover { background: rgba(255,255,255,.07); }
button.stat:hover .stat__k { color: var(--solar); }
.stat__ic {
  width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; color: var(--text-dim);
}
.stat__ic svg { width: 100%; height: 100%; }
.stat__k {
  font-family: var(--font-tac); font-size: calc(11 * var(--u)); font-weight: 600;
  letter-spacing: .1em; color: var(--text-dim); white-space: nowrap; line-height: 1.2;
}
.stat__v {
  display: block;
  font-family: var(--font-tac); font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1;
  color: var(--text-hi); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.stat__v em { font-style: normal; font-size: calc(11 * var(--u)); color: var(--text-dim); }
.stat--hot  .stat__v { color: var(--solar); }
.stat--live .stat__v { color: var(--ok); }
.stat__live {
  width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 7px var(--ok);
  animation: blink 2s ease-in-out infinite; align-self: center;
}
@keyframes blink { 50% { opacity: .3 } }


/* ---------- 3.2 좌측 유틸 ---------- */
.utils {
  position: absolute; left: 0; top: calc(58 * var(--u));
  display: flex; flex-direction: column; gap: calc(5 * var(--u));
}
.util {
  width: calc(28 * var(--u)); height: calc(25 * var(--u));
  display: grid; place-items: center;
  background: var(--glass); color: var(--text-dim);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7 * var(--u)) 100%, 0 100%);
  transition: color var(--dur), background var(--dur), width var(--dur) var(--ease);
}
.util:hover { color: var(--solar); background: rgba(20,26,36,.94); width: calc(34 * var(--u)); }
.util svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.util.is-on { color: #14100a; background: var(--solar); }


.timers {
  position: absolute; left: 44px; top: 72px; width: 320px;
  background: var(--glass); backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 12px 32px rgba(0,0,0,.7);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  animation: popIn 180ms var(--ease) both;
  z-index: 10;
}
@keyframes popIn { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
.timers__h { display: flex; align-items: center; gap: 7px; padding: 10px 12px;
             border-bottom: 1px solid var(--glass-line); }
.timers__h b { font-family: var(--font-tac); font-size: 12px; font-weight: 600;
               letter-spacing: .14em; color: var(--solar); }
.timers__h svg { width: 15px; height: 15px; color: var(--solar); }

.timers__sec { padding: 8px 12px 10px; border-bottom: 1px solid rgba(255,255,255,.05); }
.timers__sec:last-child { border-bottom: none; }
.timers__sec-t { font-family: var(--font-tac); font-size: 11px; font-weight: 600;
                 color: var(--text-dim); margin-bottom: 6px; letter-spacing: .06em; }

.timer { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.timer--gpu { display: block; padding: 4px 0 6px; }
.timer__info { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; }
.timer__bar { height: 4px; background: rgba(255,255,255,.08); margin-top: 4px; overflow: hidden; }
.timer__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--solar), var(--plasma)); }

.timer__d { width: 6px; height: 6px; flex: none; transform: rotate(45deg); background: var(--plasma); }
.timer__d--run { background: var(--ok); box-shadow: 0 0 7px var(--ok); animation: blink 1.8s infinite; }
.timer__d--wait { background: var(--text-dim); }
.timer__d--idle { background: var(--plasma); }
.timer__d--alert { background: var(--warn); box-shadow: 0 0 7px var(--warn); animation: blink 1.5s infinite; }
.timer__t { flex: 1; font-size: 12px; color: var(--text-hi); min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer__t b { font-weight: 600; color: var(--plasma); }
.timer__v { font-family: var(--font-mono); font-size: 10.5px; color: var(--solar); white-space: nowrap; }
.timer--btn:hover .timer__t { color: var(--solar); }

/* ---------- 3.3 부관 ---------- */
.adj {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  /* -60% 면 일러스트 중심이 화면 중앙에서 54px 왼쪽에 그쳐 가운데로 읽힌다.
     우측 메뉴가 차지한 만큼 무대 중심이 왼쪽에 있으므로 그쪽으로 조금 당긴다. */
  transform: translateX(-72%); height: 86%; width: 540px;
  display: grid; place-items: end center; cursor: pointer;
}
.adj__fig { width: 100%; height: 100%; }

/* 말풍선은 좌측 영역을 쓴다. 우측은 메뉴 클러스터 전용. */
.bubble {
  position: absolute; z-index: 6; left: 52px; top: 76px;
  width: min(372px, 35vw); padding: 13px 16px;
  background: var(--glass); backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(124,92,255,.55), 0 12px 36px -12px rgba(0,0,0,.9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
  animation: popIn 220ms var(--ease) both;
}
.bubble::before { content: ""; position: absolute; right: -9px; top: 26px;
                  border: 9px solid transparent; border-left-color: rgba(124,92,255,.55); }
.bubble__x { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center;
             color: var(--text-dim); }
.bubble__x:hover { color: var(--solar); }
.bubble__x svg { width: 13px; height: 13px; }
.bubble__who { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.bubble__who b { font-family: var(--font-tac); font-size: 11.5px; letter-spacing: .16em;
                 color: #b9a6ff; font-weight: 600; }
.bubble__who svg { width: 13px; height: 13px; color: var(--ion); }
.bubble__tx { font-size: 13px; line-height: 1.75; color: var(--text-hi);
              max-height: 42vh; overflow: auto; }
.bubble__tx p + p { margin-top: 7px; }
.bubble__src { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px;
               padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.15); }
.bubble__src a { font-family: var(--font-mono); font-size: 10px; color: var(--plasma);
                 background: var(--plasma-dim); padding: 2px 6px; }
.bubble__ask { display: flex; gap: 6px; margin-top: 10px; }
.bubble__ask input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 12.5px;
                     background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
                     color: var(--text-hi); }
.bubble__ask input:focus { outline: none; border-color: var(--ion); }
.bubble__ask button { width: 32px; flex: none; display: grid; place-items: center;
                      background: var(--ion); color: #fff; }
.bubble__ask button svg { width: 14px; height: 14px; }
.bubble__quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bubble__quick button { padding: 4px 9px; font-size: 11px; color: var(--text);
                        background: rgba(255,255,255,.06);
                        border: 1px solid rgba(255,255,255,.12); transition: all var(--dur); }
.bubble__quick button:hover { color: #b9a6ff; border-color: var(--ion); background: var(--ion-dim); }
.typing { display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.typing i { width: 4px; height: 4px; background: var(--ion); animation: dot 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s }
.typing i:nth-child(3) { animation-delay: .36s }
@keyframes dot { 0%,60%,100% { opacity:.25; transform:translateY(0) }
                 30% { opacity:1; transform:translateY(-3px) } }

/* ============================================================
   3.4 우측 메뉴 그리드 — 소녀전선 로비 실측 재현
   ------------------------------------------------------------
   스크린샷 2종(16:9 / 18.5:9)을 화소 단위로 대조해 얻은 결론:

   1) 원작은 모든 요소를 "화면 폭"에 비례시킨다. 화면비가 달라도
      버튼 너비 15.51% / 15.70% W, 높이 7.82% / 7.81% W 로 일치한다.
      반면 %H 로 보면 전혀 맞지 않는다. 그래서 --u 는 vw 기반이다.
   2) 격자는 화면 세로 정중앙에 놓인다. 두 스크린샷 모두 격자 중심이
      화면 중심과 2px 이내로 일치한다. top/bottom 고정이 아니다.
   3) 버튼은 기울지 않은 직사각형이고, 좌하단만 45도로 잘려 있다.
   4) 브래킷은 흰색이고 좌상·우상·우하 3곳에만 있다. 좌하단은
      모따기가 그 자리를 대신한다.
   5) 아이콘은 여섯 개 전부 왼쪽이다. 바깥쪽 미러링은 존재하지 않는다.
   ============================================================ */

.sf-cluster {
  position: absolute;
  right: calc(var(--sf-edge) * var(--u));
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: calc(var(--sf-gap-row) * var(--u));
  align-items: flex-end;
  z-index: 10;
}

.sf-row {
  display: flex; align-items: flex-start;
  gap: calc(var(--sf-gap-col) * var(--u));
}
.sf-row--main {
  margin-top: calc((var(--sf-gap-main) - var(--sf-gap-row)) * var(--u));
}
/* 원작에서 관측된 열 어긋남: 우측 열이 9px(1.22% W) 위로 올라가 있다.
   --sf-stagger 를 0 으로 두면 반듯한 격자가 된다. */
.sf-row > .sf-btn:nth-child(2) {
  margin-top: calc(var(--sf-stagger) * -1 * var(--u));
}

/* ---------- 버튼 몸통 ----------
   바깥 요소 배경 = 면, ::before = 테두리 고리(evenodd 로 안을 뚫음).
   면이 반투명이어도 테두리색이 면 뒤로 비치지 않는다.
   45도 모서리에도 테두리선이 따라 붙는다. */
.sf-btn {
  --sf-shape: polygon(0 0, 100% 0, 100% 100%,
                      calc(var(--sf-chamfer) * var(--u)) 100%,
                      0 calc(100% - var(--sf-chamfer) * var(--u)));
  position: relative;
  display: flex; align-items: center;
  width: calc(var(--sf-w) * var(--u));
  height: calc(var(--sf-h) * var(--u));
  flex: none; padding: 0; border: 0; cursor: pointer;
  background: var(--sf-fill);
  clip-path: var(--sf-shape);
  transition: transform var(--dur) var(--ease), filter var(--dur), background var(--dur);
}
.sf-row--main .sf-btn { height: calc(var(--sf-h-main) * var(--u)); }

.sf-btn::before {
  --b: calc(var(--sf-bw) * var(--u));
  --c: calc(var(--sf-chamfer) * var(--u));
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: var(--sf-line);
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 0,
    var(--b) var(--b), var(--b) calc(100% - var(--b) - var(--c)),
    calc(var(--b) + var(--c)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--b)), calc(100% - var(--b)) var(--b),
    var(--b) var(--b));
  transition: background var(--dur);
}

/* 코너 브래킷 — 좌상 / 우상 / 우하 3곳. 각 브래킷은 가로팔+세로팔 2장. */
.sf-btn::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--sf-brk), var(--sf-brk)) 0    0,
    linear-gradient(var(--sf-brk), var(--sf-brk)) 0    0,
    linear-gradient(var(--sf-brk), var(--sf-brk)) 100% 0,
    linear-gradient(var(--sf-brk), var(--sf-brk)) 100% 0,
    linear-gradient(var(--sf-brk), var(--sf-brk)) 100% 100%,
    linear-gradient(var(--sf-brk), var(--sf-brk)) 100% 100%;
  background-repeat: no-repeat;
  background-size:
    calc(var(--sf-ba) * var(--u)) calc(var(--sf-bk) * var(--u)),
    calc(var(--sf-bk) * var(--u)) calc(var(--sf-ba) * var(--u)),
    calc(var(--sf-ba) * var(--u)) calc(var(--sf-bk) * var(--u)),
    calc(var(--sf-bk) * var(--u)) calc(var(--sf-ba) * var(--u)),
    calc(var(--sf-ba) * var(--u)) calc(var(--sf-bk) * var(--u)),
    calc(var(--sf-bk) * var(--u)) calc(var(--sf-ba) * var(--u));
}

.sf-btn:hover  { transform: translateX(calc(-4 * var(--u))); }
.sf-btn:active { transform: translateX(0); filter: brightness(1.28); }

/* ---------- 1·2행: 회색 반투명 ---------- */
.sf-btn--grey:hover {
  --sf-fill: rgba(56, 58, 64, .95);
  --sf-line: rgba(255, 255, 255, .85);
}

/* ---------- 3행: 노란 주 버튼 ----------
   원작의 테두리·브래킷은 검정이 아니라 흰색이다. */
.sf-btn--yellow {
  --sf-fill: linear-gradient(135deg, #ffe285 0%, #f5c33b 48%, #d49415 100%);
  --sf-line: rgba(255, 255, 255, .94);
  --sf-brk:  #ffffff;
  --sf-ink:  #241a06;
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .038) 0 1px, transparent 1px 5px),
    radial-gradient(120% 100% at 18% 0%, rgba(255, 255, 255, .42) 0%, transparent 55%),
    var(--sf-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
.sf-btn--yellow:hover {
  --sf-fill: linear-gradient(135deg, #ffea9f 0%, #ffd252 50%, #e3a31c 100%);
}

/* ---------- 내용물 ---------- */
.sf-ic {
  position: relative; z-index: 2;
  width: calc(var(--sf-icw) * var(--u)); height: 100%; flex: none;
  display: grid; place-items: center; color: var(--sf-ink);
}
.sf-ic svg {
  width: calc(var(--sf-ic) * var(--u));
  height: calc(var(--sf-ic) * var(--u));
  /* 아이콘 세트가 선 기반이라 fill 을 주면 형태가 뭉개진다.
     원작의 묵직한 픽토그램 무게는 선 굵기로 맞춘다. */
  fill: none; stroke: currentColor; stroke-width: 2;
}

.sf-tx {
  position: relative; z-index: 2;
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  padding-right: calc(var(--sf-pad) * var(--u));
  text-align: right;
}
/* 한글 라벨은 글자 수와 무관하게 같은 폭을 채운다.
   --krs 는 views.js 가 글자 수로 계산해 인라인으로 넣는다. */
.sf-kr {
  display: block;
  font-family: var(--font-ui);
  font-size: calc(var(--krs, var(--sf-kr)) * var(--u));
  font-weight: 700; line-height: 1; letter-spacing: -.01em;
  color: var(--sf-ink); white-space: nowrap;
}
.sf-en {
  display: block;
  font-family: var(--font-tac);
  font-size: calc(var(--sf-en) * var(--u));
  font-weight: 600; line-height: 1; letter-spacing: .04em;
  color: var(--sf-ink); opacity: .78;
  margin-top: calc(2 * var(--u)); white-space: nowrap;
}

/* 주 버튼 우측 (편성 계열): 아이콘이 더 크고 라벨은 약간 작다 */
.sf-btn--formation { --sf-icw: 57; --sf-ic: 50; }
.sf-row--main .sf-kr { font-size: calc(var(--krs, 20) * var(--u)); }
.sf-row--main .sf-en { font-size: calc(10 * var(--u)); }

/* 주 버튼 좌측 (전투 계열): 아이콘이 버튼을 가로지르고
   텍스트가 그 위에 얹힌다. 영문이 위, 한글이 아래·더 크게. */
.sf-btn--combat { justify-content: flex-end; }
.sf-combat-ic {
  position: absolute; z-index: 1;
  left: calc(7 * var(--u)); top: 50%; transform: translateY(-50%);
  width: calc(62 * var(--u)); height: calc(62 * var(--u));
  display: grid; place-items: center; color: var(--sf-ink); opacity: .92;
}
.sf-combat-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; }
.sf-combat-tx {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end;
  padding-right: calc(4.5 * var(--u)); text-align: right;
}
.sf-combat-en {
  display: block; font-family: var(--font-tac);
  font-size: calc(13 * var(--u)); font-weight: 700; line-height: 1;
  letter-spacing: .06em; color: var(--sf-ink); opacity: .8;
}
.sf-combat-kr {
  display: block; font-family: var(--font-ui);
  font-size: calc(28 * var(--u)); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--sf-ink);
  margin-top: calc(3 * var(--u));
}

/* ---------- 잠금 상태 ----------
   흐리게만 하면 고장으로 읽힌다. 원작처럼 덮개에 해금 조건을 적는다. */
.sf-btn--locked { cursor: not-allowed; }
.sf-btn--locked:hover { transform: none; }
.sf-btn--locked .sf-ic,
.sf-btn--locked .sf-tx,
.sf-btn--locked .sf-combat-ic,
.sf-btn--locked .sf-combat-tx { filter: grayscale(1); opacity: .32; }
.sf-lock {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(6, 9, 13, .74);
  font-family: var(--font-tac);
  font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .85); white-space: nowrap;
}

/* 배지는 clip-path 안쪽에 둔다. 버튼이 잘려 있어 바깥으로 못 나간다. */
.sf-badge {
  position: absolute; z-index: 6;
  top: calc(2 * var(--u)); right: calc(2 * var(--u));
  min-width: calc(16 * var(--u)); height: calc(16 * var(--u));
  padding: 0 calc(4.5 * var(--u)); border-radius: 999px;
  display: grid; place-items: center;
  background: var(--danger); color: #fff;
  font-family: var(--font-tac); font-size: calc(10 * var(--u)); font-weight: 700;
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.45);
}

/* clip-path 는 outline 도 잘라낸다. 키보드 포커스는 테두리·브래킷
   색을 바꾸고 안쪽 링을 그려서 표시한다. */
.sf-btn:focus-visible {
  outline: none;
  --sf-line: var(--solar);
  --sf-brk:  var(--solar);
}
.sf-btn:focus-visible {
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--solar);
}

/* 움직임 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .sf-btn, .sf-btn::before { transition: none; }
  .sf-btn:hover { transform: none; }
}
/* ---------- 3.5 좌하단 뉴스 ----------
   실측: 배너 172 x 47.5, 좌측 여백 22, 하단 여백 41 */
.news {
  position: absolute;
  left: calc(22 * var(--u)); bottom: calc(41 * var(--u));
  width: calc(172 * var(--u)); text-align: left;
}
.news__h {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)) calc(7 * var(--u));
  width: fit-content; background: var(--glass);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7 * var(--u)) 100%, 0 100%);
}
.news__h svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: var(--solar); }
.news__h b {
  font-family: var(--font-tac); font-size: calc(8.5 * var(--u)); font-weight: 600;
  letter-spacing: .16em; color: var(--solar);
}
.news__card {
  position: relative; display: flex; align-items: center;
  gap: calc(8 * var(--u));
  height: calc(47.5 * var(--u)); padding: 0 calc(9 * var(--u));
  width: 100%; overflow: hidden; text-align: left;
  background: linear-gradient(115deg, rgba(26,34,48,.95), rgba(11,15,22,.95));
  box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
  /* 좌우 스와이프는 JS, 세로 스크롤은 브라우저 */
  touch-action: pan-y;
  user-select: none;
}
/* 프레임(카드)은 그대로, 안쪽 슬라이드만 손끝을 따라 움직인다 */
.news__slide { display: flex; align-items: center; gap: calc(8 * var(--u)); width: 100%; min-width: 0; will-change: transform; }
.news__card:hover { transform: translateY(calc(-2 * var(--u))); box-shadow: inset 0 0 0 1px var(--solar); }
.news__card::after {
  content: ""; position: absolute; right: calc(-18 * var(--u)); top: calc(-18 * var(--u));
  width: calc(78 * var(--u)); height: calc(78 * var(--u));
  background: radial-gradient(circle, rgba(245,195,59,.2), transparent 68%);
}
.news__badge {
  width: calc(27 * var(--u)); height: calc(27 * var(--u)); flex: none;
  display: grid; place-items: center;
  background: rgba(245,195,59,.14); color: var(--solar);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
}
.news__badge svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.news__badge--urgent { background: rgba(232,68,63,.2); color: #ff8a86; }
.news__t {
  display: block; font-size: calc(11 * var(--u)); font-weight: 600;
  color: var(--text-hi); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news__s {
  display: block; font-family: var(--font-mono); font-size: calc(8.5 * var(--u));
  color: var(--text-dim); margin-top: calc(2 * var(--u));
}
.news__dots { display: flex; gap: calc(3 * var(--u)); margin-top: calc(5 * var(--u)); }
.news__dots button {
  width: calc(12 * var(--u)); height: calc(2.5 * var(--u));
  background: rgba(255,255,255,.22); transition: background var(--dur);
}
.news__dots button.is-on { background: var(--solar); }

/* ---------- 3.6 하단 트레이 ----------
   실측: 탭 높이 24, 화면 하단에서 11 띄움, 피치 78, 라벨 14.
   원작 탭은 좌우가 비스듬히 잘린 판이고 우하단에 노란 삼각이 붙는다.
   탭 판은 24 로 작지만 터치 표적은 바 높이(38) 전체를 쓴다. */
.tray {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(49 * var(--u));
  display: flex; align-items: flex-end; justify-content: center;
  gap: calc(9 * var(--u));
  padding-bottom: calc(11 * var(--u));
  background: linear-gradient(to top, rgba(4,6,10,.95), rgba(4,6,10,.6) 72%, transparent);
}
.tray__i {
  position: relative;
  display: flex; align-items: center; gap: calc(5 * var(--u));
  height: calc(24 * var(--u));
  padding: 0 calc(12 * var(--u));
  color: var(--text-hi);
  background: rgba(20, 23, 29, .92);
  clip-path: polygon(calc(5 * var(--u)) 0, 100% 0,
                     calc(100% - 5 * var(--u)) 100%, 0 100%);
  transition: color var(--dur), background var(--dur);
}
/* 탭 판은 작아도 손가락 표적은 바 전체 높이로 넓힌다 */
.tray__i::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(-13 * var(--u)); bottom: calc(-11 * var(--u));
}
/* 우하단 노란 삼각 */
.tray__i::after {
  content: ""; position: absolute; right: calc(4 * var(--u)); bottom: 0;
  border-left: calc(5 * var(--u)) solid transparent;
  border-bottom: calc(5 * var(--u)) solid var(--solar);
  opacity: .85;
}
.tray__i:hover { color: #14100a; background: var(--solar); }
.tray__i:hover::after { border-bottom-color: #14100a; }
.tray__i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; }
.tray__i span {
  font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; line-height: 1;
}
.tray__i b {
  min-width: calc(13 * var(--u)); height: calc(13 * var(--u));
  padding: 0 calc(4 * var(--u)); border-radius: 999px;
  display: grid; place-items: center; background: var(--danger); color: #fff;
  font-family: var(--font-tac); font-size: calc(9 * var(--u)); font-weight: 700;
}
.tray__i--done { color: var(--ok); }
.tray__i--done svg { color: var(--ok); }
.tray__i--done:hover, .tray__i--done:hover svg { color: #14100a; }

/* ============================================================
   4. 서브 스크린
   ============================================================ */
.screen {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: #070a0f; animation: screenIn 240ms var(--ease) both;
}
@keyframes screenIn { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
.screen__bg { position: absolute; inset: 0; opacity: .26; }
.screen__bg svg { width: 100%; height: 100%; }
.screen__bg::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(to bottom, rgba(7,10,15,.88), rgba(7,10,15,.97)); }
.screen__hd {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center;
  height: 52px; padding-right: 14px;
  background: linear-gradient(to bottom, rgba(4,6,10,.96), rgba(4,6,10,.7));
  border-bottom: 1px solid var(--glass-line);
}
.back { height: 100%; padding: 0 24px 0 16px; display: flex; align-items: center; gap: 8px;
        background: var(--glass); color: var(--text);
        clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
        transition: color var(--dur), background var(--dur); }
.back:hover { color: var(--solar); background: rgba(24,32,46,.96); }
.back svg { width: 17px; height: 17px; }
.back span { font-family: var(--font-tac); font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.screen__t { margin-left: 16px; font-family: var(--font-tac); font-size: 19px; font-weight: 700;
             letter-spacing: .16em; color: var(--text-hi); }
.screen__en { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em;
              color: var(--text-dim); margin-left: 10px; }
.screen__sp { flex: 1; }
.screen__b { position: relative; z-index: 2; flex: 1; min-height: 0; padding: 14px; overflow: hidden; }

/* ============================================================
   5. 프리미티브
   ============================================================ */
.pnl { background: var(--line); padding: 1px;
       clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                          100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
       min-height: 0; }
.pnl > .pnl__in { background: rgba(13,18,26,.95);
       clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                          100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
       height: 100%; display: flex; flex-direction: column; min-height: 0; }
.pnl--sm { --cut: 8px; }

.hdr { display: flex; align-items: center; gap: 9px; padding: 11px 14px 10px;
       border-bottom: 1px solid var(--line-faint); flex: none; }
.hdr::before { content: ""; width: 3px; height: 13px; background: var(--solar); flex: none;
               box-shadow: 0 0 8px var(--solar-deep); }
.hdr__t { font-family: var(--font-tac); font-size: 13px; font-weight: 600; letter-spacing: .14em;
          text-transform: uppercase; color: var(--text-hi); white-space: nowrap; }
.hdr__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.hdr__rule { flex: 1; height: 1px; background: var(--line-faint); min-width: 12px; }
.hdr svg { width: 15px; height: 15px; }
.pnl__body { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; }
.pnl__body--flush { padding: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
       padding: 9px 18px; font-family: var(--font-tac); font-size: 13px; font-weight: 600;
       letter-spacing: .1em; text-transform: uppercase; color: var(--text-hi);
       background: var(--bg-raised);
       clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
       transition: background var(--dur), transform var(--dur); white-space: nowrap; }
.btn:hover { background: var(--line); transform: translateY(-1px); }
.btn--solar { background: var(--solar); color: #14100a; }
.btn--solar:hover { background: var(--solar-hi); }
.btn--ion { background: var(--ion); color: #fff; }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.btn--ghost:hover { background: var(--bg-raised); color: var(--text-hi); }
.btn--sm { padding: 6px 12px; font-size: 11.5px; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--sm svg { width: 14px; height: 14px; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: 11px;
        font-family: var(--font-mono); color: var(--text); background: var(--bg-sunken);
        border: 1px solid var(--line-faint); }
.tag { display: inline-block; padding: 2px 7px; font-family: var(--font-tac); font-size: 11px;
       font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--plasma);
       background: var(--plasma-dim); border-left: 2px solid var(--plasma); }
.tag--solar { color: var(--solar); background: var(--solar-dim); border-color: var(--solar); }
.tag--ion { color: #b9a6ff; background: var(--ion-dim); border-color: var(--ion); }
.tag--ok { color: var(--ok); background: #0d2e1c; border-color: var(--ok); }
.tag--warn { color: var(--warn); background: #3a1f0c; border-color: var(--warn); }
.tag--danger { color: #ff8a86; background: #3a1119; border-color: var(--danger); }
.tag--mute { color: var(--text-dim); background: var(--bg-sunken); border-color: var(--line); }

.mono { font-family: var(--font-mono); font-size: 11.5px; }
.lbl { font-family: var(--font-tac); font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
       text-transform: uppercase; color: var(--text-dim); }
.num { font-family: var(--font-tac); font-weight: 700; color: var(--text-hi);
       font-variant-numeric: tabular-nums; }

.meter { height: 4px; background: var(--bg-sunken); overflow: hidden; }
.meter__fill { height: 100%; background: linear-gradient(90deg, var(--solar-deep), var(--solar));
               transition: width 700ms var(--ease); }
.meter--plasma .meter__fill { background: linear-gradient(90deg, #1d7f88, var(--plasma)); }
.meter--ok .meter__fill { background: linear-gradient(90deg, #1d7a4a, var(--ok)); }

.split { display: grid; grid-template-columns: 232px 1fr; gap: 14px; height: 100%; min-height: 0; }
.split--wide { grid-template-columns: 262px 1fr; }
.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px;
           border-bottom: 1px solid var(--line-faint); flex: none; }
.search { position: relative; flex: 1; min-width: 150px; max-width: 340px; }
.search input { width: 100%; padding: 8px 12px 8px 32px; font-size: 12.5px;
                background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text-hi); }
.search input:focus { border-color: var(--solar); outline: none; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
              width: 14px; height: 14px; color: var(--text-dim); }
.seg { display: flex; gap: 1px; background: var(--line-faint); }
.seg button { padding: 6px 12px; font-family: var(--font-tac); font-size: 11.5px; font-weight: 600;
              letter-spacing: .08em; color: var(--text-dim); background: var(--bg-sunken);
              transition: all var(--dur); }
.seg button:hover { color: var(--text-hi); }
.seg button.is-on { background: var(--solar); color: #14100a; }

.tree { padding: 6px; }
.tree__i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
           font-size: 12.5px; color: var(--text); transition: all var(--dur); }
.tree__i:hover { background: var(--bg-raised); color: var(--text-hi); }
.tree__i.is-on { background: var(--solar-dim); color: var(--solar); box-shadow: inset 2px 0 0 var(--solar); }
.tree__i svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.tree__c { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }

.cards { display: grid; gap: 12px; padding: 14px;
         grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.card { position: relative; text-align: left; width: 100%; background: var(--bg-panel);
        padding: 13px 14px; box-shadow: inset 0 0 0 1px var(--line);
        clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
        transition: all var(--dur) var(--ease); display: flex; flex-direction: column; gap: 9px; }
.card:hover { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-bright);
              transform: translateY(-2px); }
.card__hd { display: flex; align-items: flex-start; gap: 9px; }
.card__t { font-size: 14px; font-weight: 600; color: var(--text-hi); line-height: 1.42; flex: 1; }
.card__d { font-size: 12px; color: var(--text-dim); line-height: 1.55;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__ft { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: auto;
            padding-top: 9px; border-top: 1px solid var(--line-faint); }
.proj__code { font-family: var(--font-tac); font-size: 19px; font-weight: 700; letter-spacing: .11em;
              color: var(--solar); line-height: 1.1; }
.proj__title { font-size: 12.5px; color: var(--text); margin-top: 2px; }
.proj__prog { display: flex; align-items: center; gap: 9px; }
.proj__pct { font-family: var(--font-tac); font-size: 15px; font-weight: 700; color: var(--text-hi);
             min-width: 40px; text-align: right; }

.avs { display: flex; }
.av { width: 24px; height: 24px; display: grid; place-items: center; font-family: var(--font-tac);
      font-size: 10px; font-weight: 700; background: var(--bg-raised); color: var(--text);
      border: 1px solid var(--bg-panel); margin-left: -6px; }
.av:first-child { margin-left: 0; }
.av--more { background: var(--line); color: var(--text-dim); }

.mstone { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mstone + .mstone { border-top: 1px dashed var(--line-faint); }
.mstone__dot { width: 9px; height: 9px; flex: none; background: var(--line-bright); transform: rotate(45deg); }
.mstone.is-done .mstone__dot { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.mstone.is-now .mstone__dot { background: var(--solar); box-shadow: 0 0 9px var(--solar); }
.mstone__t { flex: 1; font-size: 12.5px; color: var(--text); }
.mstone.is-done .mstone__t { color: var(--text-dim); text-decoration: line-through; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl thead th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; text-align: left;
                font-family: var(--font-tac); font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
                text-transform: uppercase; color: var(--text-dim); background: var(--bg-deep);
                border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-faint); color: var(--text); }
.tbl tbody tr { transition: background var(--dur); cursor: pointer; }
.tbl tbody tr:hover { background: var(--bg-raised); }
.tbl tbody tr:hover td { color: var(--text-hi); }
.tbl .c-name { display: flex; align-items: center; gap: 9px; color: var(--text-hi); }
.tbl .c-name svg { width: 16px; height: 16px; flex: none; }
.tbl .c-r { text-align: right; font-family: var(--font-mono); font-size: 11.5px; }
.tbl .c-dim { color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }

.drop { margin: 14px; padding: 22px; text-align: center; border: 1px dashed var(--line-bright);
        background: var(--bg-sunken); transition: all var(--dur); }
.drop:hover { border-color: var(--solar); background: var(--solar-dim); }
.drop svg { width: 26px; height: 26px; margin: 0 auto; color: var(--text-dim); }
.empty { display: grid; place-items: center; gap: 10px; padding: 56px 20px; text-align: center;
         color: var(--text-dim); }
.empty svg { width: 28px; height: 28px; opacity: .5; }

.mgrid { display: grid; gap: 10px; padding: 14px;
         grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.mcard { display: flex; align-items: center; gap: 11px; padding: 11px; background: var(--bg-panel);
         box-shadow: inset 0 0 0 1px var(--line);
         clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
         transition: all var(--dur); text-align: left; }
.mcard:hover { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--solar); }
.mcard__av { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
             font-family: var(--font-tac); font-size: 14px; font-weight: 700; color: #14100a;
             clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); }
.mcard__n { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.mcard__r { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }

/* 출석체크 스탬프 */
.stamps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.stamp { position: relative; aspect-ratio: 1; display: grid; place-items: center; gap: 2px;
         background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line);
         clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.stamp__d { font-family: var(--font-tac); font-size: 11px; color: var(--text-dim); }
.stamp__ic { width: 20px; height: 20px; color: var(--line-bright); }
.stamp.is-done { background: var(--solar-dim); box-shadow: inset 0 0 0 1px var(--solar); }
.stamp.is-done .stamp__ic { color: var(--solar); }
.stamp.is-done .stamp__d { color: var(--solar); }
.stamp.is-today { box-shadow: inset 0 0 0 2px var(--solar), 0 0 16px -4px var(--solar); }

/* DM 목록 */
.dm { display: flex; gap: 11px; padding: 11px 13px; width: 100%; text-align: left;
      transition: background var(--dur); }
.dm + .dm { border-top: 1px solid var(--line-faint); }
.dm:hover { background: var(--bg-raised); }
.dm__b { flex: 1; min-width: 0; }
.dm__n { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.dm__p { font-size: 12px; color: var(--text-dim); overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.dm__m { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.dm__unread { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: grid;
              place-items: center; background: var(--danger); color: #fff;
              font-family: var(--font-tac); font-size: 10px; font-weight: 700; }

/* 온보딩 임무 */
.quest { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.quest + .quest { border-top: 1px solid var(--line-faint); }
.quest__c { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
            background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--line-bright); }
.quest__c svg { width: 14px; height: 14px; }
.quest.is-done .quest__c { background: var(--ok); color: #04140b; box-shadow: none; }
.quest__b { flex: 1; min-width: 0; }
.quest__t { font-size: 12.5px; color: var(--text-hi); }
.quest.is-done .quest__t { color: var(--text-dim); text-decoration: line-through; }
.quest__d { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* 드로어 */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4,7,11,.74);
         backdrop-filter: blur(2px); animation: fade 160ms var(--ease) both; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(520px, 100vw);
          background: var(--bg-panel); border-left: 1px solid var(--line-bright);
          display: flex; flex-direction: column; animation: slideIn 240ms var(--ease) both;
          box-shadow: -22px 0 50px -20px rgba(0,0,0,.85); }
@keyframes slideIn { from { transform: translateX(100%) } to { transform: none } }
.drawer__hd { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px;
              border-bottom: 1px solid var(--line); flex: none; }
.drawer__t { flex: 1; font-size: 16px; font-weight: 600; color: var(--text-hi); line-height: 1.4; }
.drawer__b { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
.drawer__f { display: flex; gap: 9px; padding: 13px 16px; flex: none;
             border-top: 1px solid var(--line); background: var(--bg-sunken); }
.iconbtn { position: relative; width: 34px; height: 34px; display: grid; place-items: center;
           color: var(--text-dim); transition: color var(--dur), background var(--dur); }
.iconbtn:hover { color: var(--solar); background: var(--bg-raised); }
.iconbtn svg { width: 18px; height: 18px; }

.kv { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; font-size: 12.5px; }
.kv dt { color: var(--text-dim); font-family: var(--font-tac); font-size: 11px; letter-spacing: .1em;
         text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: var(--text-hi); }
.sec { margin-top: 18px; }
.sec__h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-family: var(--font-tac);
          font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
          color: var(--text-dim); }
.sec__h::after { content: ""; flex: 1; height: 1px; background: var(--line-faint); }

/* 토스트 */
/* 우측 메뉴 클러스터를 가리지 않도록 하단 중앙 */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: 66px; z-index: 80;
          display: flex; flex-direction: column; gap: 8px; align-items: center;
          max-width: calc(100vw - 24px); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 15px; min-width: 240px;
         max-width: 380px; background: rgba(24,32,46,.97); color: var(--text-hi); font-size: 12.5px;
         box-shadow: inset 0 0 0 1px var(--line-bright), 0 10px 28px -10px rgba(0,0,0,.85);
         clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
         animation: toastIn 200ms var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(22px) } to { opacity: 1; transform: none } }
.toast__b { width: 3px; align-self: stretch; background: var(--solar); flex: none; }

/* 부팅 */
.boot { position: fixed; inset: 0; z-index: 100; background: #05070b; display: grid; place-items: center;
        transition: opacity 420ms var(--ease), visibility 420ms; }
.boot.is-gone { opacity: 0; visibility: hidden; }
.boot__in { width: min(440px, 88vw); }
.boot__mark { width: auto; height: 96px; margin: 0 auto 18px; display: block;
              filter: drop-shadow(0 0 18px rgba(245,195,59,.55)); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity:.5; transform:scale(.95) } 50% { opacity:1; transform:scale(1.04) } }
.boot__n { font-family: var(--font-tac); font-size: 28px; font-weight: 700; letter-spacing: .4em;
           text-align: center; color: var(--text-hi); }
.boot__s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-align: center;
           color: var(--text-dim); margin-top: 6px; }
.boot__log { margin-top: 26px; font-family: var(--font-mono); font-size: 11.5px; min-height: 120px; }
.boot__ln { display: flex; gap: 9px; opacity: 0; animation: fade 200ms var(--ease) forwards; padding: 3px 0; }
.boot__ln b { color: var(--ok); font-weight: 400; margin-left: auto; }
.boot__bar { height: 2px; background: #131a24; margin-top: 16px; overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0;
               background: linear-gradient(90deg, var(--solar-deep), var(--solar));
               animation: load 2100ms var(--ease) forwards; }
@keyframes load { to { width: 100% } }
.boot__skip { position: fixed; right: 20px; bottom: 18px; font-family: var(--font-mono);
              font-size: 11px; color: var(--text-dim); }

/* 유틸 */
.row { display: flex; align-items: center; gap: 9px; }
.row--between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 9px; }
.gap-sm { gap: 5px; }
.flex1 { flex: 1; min-width: 0; }
.txt-dim { color: var(--text-dim) } .txt-hi { color: var(--text-hi) }
.txt-solar { color: var(--solar) } .txt-plasma { color: var(--plasma) }
.txt-ok { color: var(--ok) } .txt-danger { color: #ff8a86 }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   6. 반응형 — 폰 가로가 기준, PC 는 같은 비례의 확대
   ------------------------------------------------------------
   --u 가 화면 폭에 비례하므로 버튼·바·라벨은 분기 없이 함께
   커지고 작아진다. 여기서는 --u 로 풀리지 않는 것만 다룬다:
   방향(가로/세로), 부관 일러스트 침범, 서브 화면 단 수.
   ============================================================ */

/* 세로 화면 — 주 용도는 아니지만 깨지면 안 된다.
   폭 기준을 그대로 쓰면 HUD 가 지나치게 작아지므로 비율을 키운다. */
@media (orientation: portrait) {
  :root { --u: clamp(.8px, .36vw, 2.05px); }

  /* 세로에서는 상단 바 한 줄에 프로필+스테이터스가 안 들어간다.
     스테이터스를 두 번째 줄로 내리고 아이콘을 뺀다. */
  .top {
    height: auto; flex-wrap: wrap;
    gap: calc(4 * var(--u)); padding-bottom: calc(5 * var(--u));
  }
  .stats { width: 100%; justify-content: space-between; }
  .stat { min-width: 0; padding: 0 calc(5 * var(--u)) calc(4 * var(--u)); }
  .stat__ic { display: none; }
  .utils { top: calc(98 * var(--u)); }

  /* 세로에서는 격자를 우측이 아니라 가운데에 둔다 */
  .sf-cluster { left: 0; right: 0; align-items: center; }

  .news { display: none; }
  .tray__i span { display: none; }
  .tray__i { padding: 0 calc(9 * var(--u)); }
  .tray { gap: calc(6 * var(--u)); }
  .adj {
    left: 50%; transform: translateX(-50%); bottom: auto;
    top: calc(64 * var(--u)); height: min(38vh, 360px); width: calc(150 * var(--u));
  }
  .bubble {
    left: calc(8 * var(--u)); right: calc(8 * var(--u)); width: auto;
    top: calc(112 * var(--u));
  }
  .bubble::before { display: none; }
  .toasts { top: calc(76 * var(--u)); }
}

/* 좁은 가로 화면 (구형 단말) — 뉴스보다 격자가 우선이다 */
@media (orientation: landscape) and (max-width: 600px) {
  .news { display: none; }
  .stat__ic { display: none; }
}

/* 부관 일러스트가 우측 격자를 침범하지 않게 좁힌다 */
@media (max-width: 1180px) and (orientation: landscape) {
  .adj { width: 440px; transform: translateX(-70%); }
}
@media (max-width: 1180px) {
  .bubble { left: 44px; width: min(330px, 40vw); }
}
/* 세로 폰은 위 portrait 규칙(가운데 · 작게)이 이긴다 — 가로일 때만 좁힌다 */
@media (max-width: 900px) and (orientation: landscape) {
  .adj { width: 340px; transform: translateX(-72%); height: 66%; }
}
@media (max-width: 900px) {
  .bubble { left: 12px; right: 12px; width: auto; top: calc(56 * var(--u)); }
  .bubble::before { display: none; }
  .bubble__tx { max-height: 30vh; }
  .split { grid-template-columns: 1fr; }
  /* 사이드바가 인라인 display:flex 를 달고 있어 !important 가 필요하다.
     좁은 화면에선 목록이 먼저다 — 학년 이동은 브레드크럼 루트로 한 번에 간다. */
  .split > .split__side { display: none !important; }
  .cards { grid-template-columns: 1fr; padding: 10px; }
}
@media (max-width: 640px) {
  .screen__b { padding: 8px; }
  .screen__en { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 7. 인라인 span을 블록으로 (템플릿이 span을 쓰므로 일괄 지정) ---------- */
.quest__t, .quest__d,
.dm__n, .dm__p,
.news__t, .news__s,
.mcard__n, .mcard__r,
.gbtn__t, .gbtn__en,
.stat__k, .stat__v,
.prof__n,
.timer__t,
.card__t, .card__d,
.proj__code, .proj__title { display: block; }

/* 테이블/리스트 안의 아바타 정렬 */
.tbl .av { vertical-align: middle; }

/* ============================================================
   8. 폼 — 보고서 작성 · 반려 사유 (flows.js 연동)
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 190px; }

.field__l {
  font-family: var(--font-tac); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.field__l i { color: var(--danger); font-style: normal; margin-left: 3px; }

.field__i {
  width: 100%; padding: 9px 12px; font-size: 13px; line-height: 1.6;
  color: var(--text-hi); background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: 0;
  transition: border-color var(--dur), background var(--dur);
  resize: vertical;
}
.field__i:focus { outline: none; border-color: var(--solar); background: var(--bg-void); }
.field__i::placeholder { color: var(--text-dim); opacity: .75; }
.field__i--mono { font-family: var(--font-mono); font-size: 12px; }
select.field__i { cursor: pointer; }

.field__h { font-size: 11px; color: var(--text-dim); }

/* 폼 하단 고정 액션 바 */
.formbar {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--bg-sunken);
}

/* 첨부 목록 */
.filelist { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.filelist__i {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--line-faint);
}

/* 마일스톤을 클릭 가능한 버튼으로 (Flow 4) */
.mstone--btn {
  width: 100%; text-align: left; background: none; border: 0;
  cursor: pointer; transition: background var(--dur);
}
.mstone--btn:hover { background: var(--bg-raised); }
.mstone--btn:hover .mstone__dot { box-shadow: 0 0 9px var(--solar); background: var(--solar); }
.mstone--btn.is-done:hover .mstone__dot { background: var(--line-bright); box-shadow: none; }

/* ============================================================
   9. 마크다운 본문 · 파일 미리보기
   ============================================================ */
.md { font-size: 13px; line-height: 1.85; color: var(--text); }
.md > *:first-child { margin-top: 0; }
.md p { margin: 0 0 10px; }
.md__h {
  font-family: var(--font-tac); font-weight: 700; letter-spacing: .04em;
  color: var(--text-hi); margin: 18px 0 8px; line-height: 1.3;
}
h3.md__h { font-size: 17px; }
h4.md__h { font-size: 15px; }
h5.md__h, h6.md__h { font-size: 13.5px; color: var(--text); }
.md__ul, .md__ol { margin: 0 0 10px; padding-left: 20px; }
.md__ul { list-style: disc; }
.md__ol { list-style: decimal; }
.md__ul li, .md__ol li { margin: 3px 0; }
.md__c {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--bg-sunken); padding: 1px 5px; color: var(--solar);
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.md__pre {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  background: var(--bg-sunken); padding: 11px 13px; margin: 0 0 10px;
  overflow-x: auto; color: var(--text-hi);
  box-shadow: inset 0 0 0 1px var(--line-faint);
  border-left: 2px solid var(--plasma);
}
.md__q {
  margin: 0 0 10px; padding: 8px 13px; background: var(--bg-sunken);
  border-left: 2px solid var(--solar); color: var(--text-dim);
}
.md__hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md a { text-decoration: underline; text-underline-offset: 2px; }

/* 파일 미리보기 자리 */
.fprev {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 34px 16px; text-align: center;
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line-faint);
  color: var(--text-dim);
}
.fprev svg { width: 40px; height: 40px; opacity: .55; }
.fprev--img { background: linear-gradient(135deg, var(--bg-sunken), var(--plasma-dim)); }
.fprev--video { background: linear-gradient(135deg, var(--bg-sunken), var(--ion-dim)); }

/* ============================================================
   10. 실측 재조사에서 바로잡은 것 (2026-09-15)
   ------------------------------------------------------------
   앞선 회차에 "아이콘 바깥쪽 미러링"(.sf-btn--mirror) 을 넣었으나
   스크린샷을 8배로 확대해 보니 원본은 여섯 버튼 전부 아이콘이
   왼쪽이었다. 미러링은 존재하지 않는 규칙이라 규칙째로 걷어냈다.
   잠금·호버·클릭 피드백은 §3.4 버튼 정의 안으로 옮겼다.
   이 블록에는 §3.4 이후에 와야만 하는 보정만 남긴다.
   ============================================================ */

/* 좌측 유틸 패널과 진행현황 패널의 세로 기준선을 맞춘다 */
.timers { left: calc(36 * var(--u)); top: calc(58 * var(--u)); width: calc(250 * var(--u)); }
@media (orientation: portrait) {
  .timers { left: calc(34 * var(--u)); top: calc(98 * var(--u));
             width: min(calc(250 * var(--u)), calc(100vw - 48px)); }
}

/* §7 의 일괄 display:block 이 뒤에 와서 줄 수 제한을 덮는다.
   뉴스 제목만 다시 -webkit-box 로 되돌려 2줄에서 자른다. */
.news .news__t { display: -webkit-box; }

/* ============================================================
   11. 모바일 / 웹 친화
   ============================================================ */

/* 부팅 화면 팁 */
.boot__tip {
  margin-top: 18px; text-align: center;
  font-size: 12px; line-height: 1.65; color: var(--text-dim);
  min-height: 2.6em;                     /* 팁 길이가 달라도 바가 안 흔들린다 */
}
.boot__tip b { color: var(--solar); font-weight: 600; }

/* 세로로 든 터치 기기에서만 뜬다 */
.boot__rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .boot__rotate {
    display: block; margin-top: 14px; text-align: center;
    font-family: var(--font-tac); font-size: 13px; font-weight: 600;
    letter-spacing: .04em; color: var(--solar);
  }
}

/* 주소창이 접혔다 펴져도 높이가 흔들리지 않게. 미지원 브라우저는 위의 100% 유지 */
html, body { height: 100dvh; }

body {
  overscroll-behavior: none;             /* 당겨서 새로고침 / 바운스 차단 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;            /* 더블탭 확대와 300ms 지연 제거 */
}

/* 가로로 든 폰은 노치가 좌우 끝에 온다 — 바로 프로필과 격자 자리다.
   배경은 계속 화면 전체를 덮고, HUD 만 안전영역 안으로 들어온다. */
.hud {
  inset: env(safe-area-inset-top) env(safe-area-inset-right)
         env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.boot__skip {
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

/* 터치에는 hover 가 없다. 탭하면 hover 상태가 그대로 남는다.
   색 변화는 놔두고 위치·크기가 변하는 것만 끈다. */
@media (hover: none) {
  .sf-btn:hover     { transform: none; }
  .news__card:hover { transform: none; }
  .util:hover       { width: calc(28 * var(--u)); }
}

/* 솔리드 픽토그램 (Phosphor Fill) — 선 아이콘용 stroke 규칙을 받지 않는다 */
.sf-ic svg.ic-s, .sf-combat-ic svg.ic-s, svg.ic-s { fill: currentColor; stroke: none; }

/* ============================================================
   12. 도서관 — 경로 탐색
   ============================================================ */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-faint);
  background: var(--bg-sunken);
}
.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: none; border: 0;
  transition: color var(--dur), background var(--dur);
}
.crumb svg { width: 14px; height: 14px; }
button.crumb:hover { color: var(--solar); background: rgba(255,255,255,.06); }
.crumb--on { color: var(--text-hi); cursor: default; }
.crumb__s { display: inline-flex; color: var(--line-bright); }
.crumb__s svg { width: 11px; height: 11px; }

/* 폴더 행은 파일보다 먼저 오고, 한눈에 구분돼야 한다 */
.tr--dir td:first-child { font-weight: 600; color: var(--text-hi); }
.tr--dir:hover td:first-child { color: var(--solar); }


/* ============================================================
   13. 도서관 — 배경 + 사서 + 반투명 파일시스템
   ------------------------------------------------------------
   구성은 로비와 같다: 전면 배경 위에 요소가 뜬다.
   사진 에셋을 넣을 때는 --lib-photo 하나만 지정하면 절차적 배경을 덮는다.
     .screen__bg--lib { --lib-photo: url("assets/img/stacks.jpg"); }
   ============================================================ */
.screen__bg--lib { opacity: 1; }
.screen__bg--lib::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--lib-photo, none);
  background-size: cover; background-position: center;
}
/* 배경 위 글자가 읽히도록 좌측을 더 눌러 준다 — 사서가 서는 쪽이다 */
.screen__bg--lib::after {
  z-index: 2;
  background:
    linear-gradient(to right, rgba(6,9,14,.94) 0%, rgba(6,9,14,.62) 42%, rgba(6,9,14,.78) 100%),
    linear-gradient(to bottom, rgba(6,9,14,.75), rgba(6,9,14,.55) 38%, rgba(6,9,14,.9));
}

.lib {
  display: grid; grid-template-columns: 1fr minmax(290px, 42%);
  gap: 16px; height: 100%; min-height: 0;
}

/* ---------- 좌: 사서 ---------- */
.lib__agent {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; min-height: 0; padding-bottom: 2px;
}
.lib__fig { flex: 1; min-height: 0; margin: 0; width: 100%; display: grid; place-items: center end; }
.lib__fig svg { height: 100%; max-height: 300px; width: auto; }

/* 말풍선은 사서에게 붙는다. 목록 위에 띄우면 대화가 아니라 시스템 공지가 된다. */
.bub {
  position: relative; max-width: 300px; margin-bottom: 10px;
  padding: 11px 15px;
  background: rgba(8, 28, 32, .88); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(57,212,224,.5), 0 10px 30px -12px rgba(0,0,0,.9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  animation: bubIn 220ms var(--ease) both;
}
@keyframes bubIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.bub p {
  font-size: 14px; line-height: 1.5; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bub p b { color: var(--plasma); font-weight: 700; }
.bub__tail {
  position: absolute; left: 26px; bottom: -9px;
  border: 9px solid transparent; border-top-color: rgba(57,212,224,.5);
}

.lib__id {
  font-family: var(--font-tac); font-size: 14px; font-weight: 700;
  color: var(--plasma); letter-spacing: .04em; margin-top: 6px; text-align: center;
}
.lib__id span {
  display: block; font-family: var(--font-mono); font-size: 8.5px; font-weight: 400;
  letter-spacing: .26em; color: var(--text-dim); margin-top: 2px;
}
.lib__ask { display: flex; gap: 6px; margin-top: 9px; width: min(300px, 100%); }
.lib__ask input {
  flex: 1; min-width: 0; padding: 8px 11px; font-size: 13px;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.16); color: var(--text-hi);
}
.lib__ask input:focus { outline: none; border-color: var(--plasma); }
.lib__ask button {
  width: 34px; flex: none; display: grid; place-items: center;
  background: var(--plasma); color: #062227;
}
.lib__ask button svg { width: 14px; height: 14px; }
.lib__quick {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
  width: min(300px, 100%); justify-content: center;
}
.chip {
  padding: 4px 9px; font-size: 11.5px; color: var(--text);
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.chip i {
  font-style: normal; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--solar); margin-left: 5px;
}
.chip:hover { color: var(--plasma); border-color: var(--plasma); background: var(--plasma-dim); }

/* ---------- 우: 반투명 파일시스템 ---------- */
.lib__fs {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(9, 13, 20, .58);
  backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 46px -20px rgba(0,0,0,.9);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.lib__fs .crumbs { background: rgba(0,0,0,.28); border-bottom-color: rgba(255,255,255,.1); }
.fs__list { flex: 1; min-height: 0; overflow: auto; }
.tbl--fs td { padding: 9px 12px; font-size: 12.5px; }
.tbl--fs tr { cursor: pointer; }
.tbl--fs tr:hover td { background: rgba(255,255,255,.06); }
.fs__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.fs__foot .txt-warn { color: var(--warn); }

/* 좁은 가로 화면: 사서 형상을 접고 말풍선·입력만 남긴다 */
@media (max-width: 900px) {
  .lib { grid-template-columns: 1fr minmax(240px, 52%); gap: 10px; }
  .lib__fig { display: none; }
  .lib__agent { justify-content: center; }
  .bub { max-width: none; margin-bottom: 12px; }
  .lib__quick { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bub { animation: none; } }

/* 오버레이가 배경을 완전히 죽여 반투명 패널이 읽히지 않았다.
   좌측(사서 뒤)만 눌러 글자를 살리고, 우측은 배경이 비치게 둔다 —
   패널이 "반투명"으로 보이려면 뒤에 보일 게 있어야 한다. */
.screen__bg--lib::after {
  background:
    linear-gradient(to right,
      rgba(6,9,14,.92) 0%, rgba(6,9,14,.70) 34%,
      rgba(6,9,14,.30) 62%, rgba(6,9,14,.42) 100%),
    linear-gradient(to bottom, rgba(6,9,14,.55), rgba(6,9,14,.12) 40%, rgba(6,9,14,.66));
}
.lib__fs {
  background: rgba(9, 13, 20, .52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 18px 46px -20px rgba(0,0,0,.95);
}
.lib__fs .crumbs { background: rgba(0,0,0,.42); }
.fs__foot { background: rgba(0,0,0,.42); }
.tbl--fs td { color: var(--text-hi); }
.tbl--fs .c-dim { color: var(--text); }

/* 말풍선이 사서에게 붙어야 누가 말하는지가 위치로 읽힌다.
   .lib__fig 가 flex:1 로 남는 높이를 다 먹어서 말풍선이 천장까지 밀려 있었다.
   전체를 아래로 모으고 형상은 제 크기만 차지하게 한다. */
.lib__agent { justify-content: flex-end; }
.lib__fig {
  flex: 0 1 auto; min-height: 120px; max-height: 46%;
  place-items: end center; width: auto;
}
.lib__fig svg { height: 100%; max-height: none; width: auto; }
.bub { margin-bottom: 4px; }

/* 형상 높이를 확정한다. height:100% 짜리 SVG 를 auto 높이 칸에 넣으면
   순환 참조라 브라우저가 최소 크기로 접어 버린다. */
.lib__fig { flex: none; height: 34vh; min-height: 150px; max-height: none; }

/* ============================================================
   14. 부원 — 파트 편성도
   목록이 아니라 조직도다. 파트가 열, 부원이 그 안에 선다.
   ============================================================ */
/* 편성도 틀에만 — 그냥 .form 이면 모든 양식이 서랍 높이에 묶여 칸이 넘치고 뒤 문단이 그 위에 겹친다 */
/* max-width: none — 양식용 .form 의 780px 상한이 편성도에도 걸려 넓은 화면에서도 칸이 좁았다 */
.form:has(> .form__grid) { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 12px; max-width: none; }
.form__bar { display: flex; align-items: center; gap: 12px; flex: none; }
/* grid 의 auto-columns + 1fr 은 overflow 컨테이너에서 max-content 로 부풀어
   마지막 열이 잘렸다. flex 는 남은 폭을 정확히 나눠 갖는다. */
.form__grid {
  flex: 1; min-height: 0; display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
}
.form__col { flex: 1 1 0; min-width: 132px; }
.form__col {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--glass-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* 가장 얇은 파트를 표시한다 — 신입을 어디로 보낼지가 이 화면의 쓸모다 */
.form__col--thin { box-shadow: inset 0 0 0 1px var(--warn); }
.form__col--thin .form__h { color: var(--warn); }
.form__h {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 12px; border-bottom: 1px solid var(--line-faint);
  font-family: var(--font-tac); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-hi);
}
.form__h b {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  font-weight: 400; color: var(--text-dim);
}
/* minmax(0,1fr) — 기본 auto 열은 카드의 nowrap 글자 폭만큼 부풀어 칸 오른쪽이 잘렸다 */
.form__body { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }

.mtile {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; text-align: left;
  background: var(--bg-raised); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur), transform var(--dur), opacity var(--dur);
}
.mtile:hover { box-shadow: inset 0 0 0 1px var(--solar); transform: translateX(2px); }
.mtile--lead { box-shadow: inset 3px 0 0 var(--solar); }
.mtile--lead:hover { box-shadow: inset 3px 0 0 var(--solar), inset 0 0 0 1px var(--solar); }
.mtile.is-dim { opacity: .2; }
.mtile--empty {
  justify-content: center; color: var(--text-dim); font-size: 12px;
  background: none; box-shadow: inset 0 0 0 1px var(--line-faint);
}
.mtile__av {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font-family: var(--font-tac); font-size: 13px; font-weight: 700; color: #14100a;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
}
.mtile__b { min-width: 0; }
.mtile__n {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 좁은 칸에서는 줄을 바꿔 다 보인다(말줄임으로 가입 연도·직책이 사라지지 않게) */
.mtile__r {
  display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  word-break: keep-all; overflow-wrap: anywhere;
}

/* ============================================================
   15. 일정 — 카운트다운 트랙
   두 목록 대신 시간축 하나. 간격은 균등이 아니라 날짜에 비례한다.
   ============================================================ */
.cd { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 14px; }
.cd__hero {
  flex: none; padding: 16px 20px; position: relative;
  background: linear-gradient(100deg, rgba(74,53,16,.5), rgba(11,15,22,.85));
  box-shadow: inset 0 0 0 1px rgba(245,195,59,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.cd__lbl {
  display: block; font-family: var(--font-tac); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; color: var(--solar);
}
.cd__d {
  display: block; font-family: var(--font-tac); font-size: 15px; font-weight: 600;
  color: var(--text-dim); line-height: 1; margin-top: 6px;
}
.cd__d b {
  font-size: 44px; font-weight: 700; color: var(--solar); letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(245,195,59,.45);
}
.cd__t { display: block; font-size: 16px; font-weight: 600; color: var(--text-hi); margin-top: 4px; }
.cd__m { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.trk { position: relative; flex: 1; min-height: 210px; }
.trk__ticks { position: absolute; inset: 0; }
.trk__tick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim);
  padding-top: 20px; white-space: nowrap;
}
.trk__tick::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 14px;
  background: var(--line); transform: translateX(-50%);
}
.trk__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(to right, var(--solar), var(--line-bright));
}
.trk__pins { position: absolute; inset: 0; }

.pin { position: absolute; top: 50%; width: 0; background: none; }
.pin__stem { position: absolute; left: 0; width: 2px; background: var(--line-bright); }
/* 핀 카드는 핀을 기준으로 가운데. 양 끝에서만 안쪽으로 뒤집는다. */
.pin__card {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 150px; padding: 7px 9px; text-align: left;
  background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: box-shadow var(--dur), transform var(--dur);
}
.pin:hover .pin__card { box-shadow: inset 0 0 0 1px var(--solar); }
.pin:focus-visible .pin__card { box-shadow: inset 0 0 0 2px var(--solar); }
.pin::after {                      /* 축 위의 점 */
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  background: var(--solar); transform: rotate(45deg);
}
/* 동아리 일정은 축 위, 내 할 일은 축 아래 */
.pin--ev .pin__stem { bottom: 0; height: calc(16px + var(--lv) * 62px); }
.pin--ev .pin__card { bottom: calc(16px + var(--lv) * 62px); }
.pin--me .pin__stem { top: 0; height: calc(16px + var(--lv) * 62px); }
.pin--me .pin__card { top: calc(16px + var(--lv) * 62px); }
.pin--me::after { background: var(--plasma); }
.pin--me .pin__card { box-shadow: inset 0 0 0 1px rgba(57,212,224,.35); }
.pin--me:hover .pin__card { box-shadow: inset 0 0 0 1px var(--plasma); }
.pin__d {
  display: block; font-family: var(--font-tac); font-size: 12px; font-weight: 700; color: var(--solar);
}
.pin--me .pin__d { color: var(--plasma); }
.pin__t {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-hi); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pin__m { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); margin-top: 3px; }

.cd__key { flex: none; display: flex; gap: 16px; }
.cd__k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.cd__k::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--k); }
.cd__k--ev { --k: var(--solar); }
.cd__k--me { --k: var(--plasma); }

/* 끝쪽 핀은 카드를 안쪽으로 뒤집는다 */
.pin--end .pin__card { left: auto; right: 0; transform: none; }
.pin--start .pin__card { left: 0; right: auto; transform: none; }

@media (max-width: 640px) {
  .cd__d b { font-size: 34px; }
  .pin__card { width: 122px; }
}

/* 좁은 화면에서 핀이 서로 겹쳐 눌리지 않게, 트랙에 최소 폭을 주고 가로로 민다.
   테크트리와 같은 처리 — 시간축은 줄이는 것보다 미는 게 맞다. */
.cd { overflow-x: auto; overflow-y: hidden; }
.cd__hero, .cd__key { position: sticky; left: 0; }
.trk { min-width: calc(var(--n, 6) * 132px); }
@media (max-width: 900px) {
  .trk { min-height: 190px; }
  .pin__card { width: 128px; }
}

/* ============================================================
   16. 개발 — 기체 도감
   단계 레일이 곧 진행 게이지다. 레일은 세로 —
   일정 화면의 가로 시간축과 방향을 달리해 두 화면이 구분되게 한다.
   ============================================================ */
.dex { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 12px; }

/* 상단 기체 선택 스트립 */

.dex__t {
  position: relative; flex: 0 0 auto; min-width: 128px; padding: 9px 13px 11px; text-align: left;
  background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--glass-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: box-shadow var(--dur), background var(--dur);
}
.dex__t:hover { background: var(--bg-raised); }
.dex__t.is-on { background: rgba(74,53,16,.42); box-shadow: inset 0 0 0 1px var(--solar); }
.dex__code {
  display: block; font-family: var(--font-tac); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-hi); white-space: nowrap;
}
.dex__t.is-on .dex__code { color: var(--solar); }
.dex__pct {
  display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px;
}
.dex__bar { display: block; height: 2px; margin-top: 6px; background: rgba(255,255,255,.1); }
.dex__bar i { display: block; height: 100%; background: var(--line-bright); }
.dex__t.is-on .dex__bar i { background: var(--solar); }

.dex__main {
  flex: 1; min-height: 0; display: grid;
  /* 1fr 의 하한은 min-content 라, 긴 코드명 한 줄이 트랙을 밀어낸다.
     minmax(0,1fr) 로 내려갈 수 있게 한다. */
  grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); gap: 12px;
}

/* ---------- 단계 레일 ---------- */
.dex__rail {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--glass-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.dex__railh {
  flex: none; padding: 10px 13px; border-bottom: 1px solid var(--line-faint);
  font-family: var(--font-tac); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; color: var(--text-dim);
}
.dex__railh b { color: var(--solar); font-family: var(--font-mono); letter-spacing: 0; }
.dex__stages { flex: 1; min-height: 0; overflow: auto; padding: 10px 0; }

.stg {
  --c: var(--line);
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 8px 13px; text-align: left;
  transition: background var(--dur);
}
.stg:hover { background: rgba(255,255,255,.05); }
/* 세로로 잇는 선 — 마지막 단계에서는 끊는다 */
.stg::before {
  content: ""; position: absolute; left: 25px; top: 28px; bottom: -8px;
  width: 2px; background: var(--c);
}
.stg:last-child::before { display: none; }
.stg__n {
  position: relative; z-index: 1; flex: none;
  width: 24px; height: 24px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--text-dim); background: var(--bg-deep);
  box-shadow: inset 0 0 0 2px var(--c); transform: rotate(45deg);
}
/* 텍스트 노드에는 transform 이 안 걸린다. 숫자를 요소로 감싸 역회전시킨다. */
.stg__n b { display: block; transform: rotate(-45deg); font-weight: 500; }
.stg__b { min-width: 0; padding-top: 2px; }
.stg__t { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.stg__d { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); margin-top: 2px; }
.stg__d b { color: var(--warn); font-weight: 500; }

.stg--done { --c: var(--solar); }
.stg--done .stg__n { color: #14100a; background: var(--solar); }
.stg--done .stg__t { color: var(--text-hi); }
.stg--now  { --c: var(--solar); background: rgba(74,53,16,.34); }
.stg--now .stg__n { color: var(--solar); box-shadow: inset 0 0 0 2px var(--solar); }
.stg--now .stg__t { color: var(--solar-hi); font-weight: 700; }
.stg--next { --c: var(--line); }
.stg--next .stg__t { color: var(--text-dim); }
.stg__mark {
  margin-left: auto; align-self: center; flex: none;
  padding: 2px 6px; font-family: var(--font-tac); font-size: 9.5px; font-weight: 700;
  color: #14100a; background: var(--solar);
}

/* ---------- 도감 카드 ---------- */
.dex__card {
  display: flex; flex-direction: column; min-height: 0; overflow: auto;
  padding: 18px 20px;
  background: linear-gradient(145deg, rgba(24,32,46,.92), rgba(11,15,22,.92));
  box-shadow: inset 0 0 0 1px var(--glass-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.dex__hd { display: flex; align-items: center; gap: 10px; flex: none; }
.dex__id {
  font-family: var(--font-tac); font-size: 22px; font-weight: 700;
  letter-spacing: .06em; color: var(--solar);
}
.dex__dday { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.dex__dday b { color: var(--text-hi); font-size: 13px; }
.dex__title { font-size: 15px; font-weight: 600; color: var(--text-hi); margin-top: 6px; line-height: 1.45; }

.dex__gauge { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex: none; }
.dex__num {
  font-family: var(--font-tac); font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--solar); letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(245,195,59,.4);
}
.dex__num em { font-style: normal; font-size: 16px; color: var(--text-dim); margin-left: 2px; }
.dex__meter { flex: 1; height: 8px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px var(--glass-line); }
.dex__meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--solar-deep), var(--solar)); }

.dex__kv { margin-top: 16px; flex: none; }
.dex__crew { display: inline-flex; gap: 4px; }
.dex__desc {
  font-size: 12.5px; line-height: 1.8; color: var(--text); margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.12);
}
.dex__ft { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; flex: none; }

@media (max-width: 900px) {
  .dex__main { grid-template-columns: minmax(170px, 38%) minmax(0, 1fr); }
  .dex__num { font-size: 30px; }
  .dex__desc { display: none; }
}

/* ============================================================
   17. 개발장 로비 — 발사대
   배경(H.scene.yard)이 기체를 그리고, 여기 있는 건 그 위에 얹는
   히트 영역과 명판뿐이다. SVG 안에서 인터랙션을 짜지 않는다.
   ============================================================ */
.screen__bg--yard { opacity: 1; }
.screen__bg--yard::after {
  background:
    linear-gradient(to bottom, rgba(6,9,14,.86) 0%, rgba(6,9,14,.20) 26%,
                    rgba(6,9,14,.18) 62%, rgba(6,9,14,.82) 100%);
}

.yard { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.yard__hd {
  flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.yard__hd b { color: var(--solar); font-size: 13px; }
.yard__next { color: var(--text); }

.yard__slots { position: relative; flex: 1; min-height: 0; }
/* 슬롯은 배경 SVG 의 기체 x 좌표에 맞춰 놓인다 (H.scene.YARD.x) */
.yslot {
  position: absolute; top: 0; bottom: 0; width: 15%;
  transform: translateX(-50%); background: none; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.yslot__hit { position: absolute; inset: 0; }
.yslot__plate {
  position: relative; z-index: 1; margin: 0 auto 4px; width: min(100%, 152px);
  padding: 7px 9px; text-align: center;
  background: rgba(9, 13, 20, .82); backdrop-filter: blur(5px);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: box-shadow var(--dur), transform var(--dur) var(--ease), background var(--dur);
}
.yslot__code {
  display: block; font-family: var(--font-tac); font-size: 13px; font-weight: 700;
  letter-spacing: .05em; color: var(--text-hi); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.yslot__meta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; }
.yslot__pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--solar); }

.yslot:hover .yslot__plate,
.yslot:focus-visible .yslot__plate {
  background: rgba(20, 28, 40, .92);
  box-shadow: inset 0 0 0 1px var(--solar), 0 10px 28px -12px rgba(0,0,0,.9);
  transform: translateY(-4px);
}
.yslot:focus-visible { outline: none; }
/* 호버 시 그 기체 자리에만 빛기둥 */
.yslot::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 64%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(245,195,59,.14));
  opacity: 0; transition: opacity var(--dur); pointer-events: none;
}
.yslot:hover::after, .yslot:focus-visible::after { opacity: 1; }

.yard__hint {
  flex: none; text-align: center; margin-top: 6px;
  font-family: var(--font-tac); font-size: 10.5px; letter-spacing: .18em; color: var(--text-dim);
}

@media (max-width: 900px) {
  .yard__hd { font-size: 10px; gap: 10px; }
  .yslot__plate { width: min(100%, 118px); padding: 5px 7px; }
  .yslot__code { font-size: 11px; }
  .yard__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yslot:hover .yslot__plate { transform: none; }
}

/* meet 로 바꾸면 위아래(또는 좌우)에 여백이 생긴다. 바탕색으로 메워
   레터박스가 "빈 곳"이 아니라 계속되는 바닥으로 읽히게 한다. */
.screen__bg--yard { background: #080b11; }
.screen__bg--yard svg { object-fit: contain; }

/* 슬롯은 배경 SVG 와 같은 상자(화면 전폭)를 써야 x 가 맞는다.
   .screen__b 의 좌우 패딩 14px 를 상쇄한다. */
.yard__slots { margin-left: -14px; margin-right: -14px; }