/* 집법전 — **책상에서 오래 들여다보는 운영 도구**의 꼴
   ============================================================
   ⚠⚠ **밝게 간다** (2026-10-15). 그 앞에는 게임과 같은 먹보라였다 — 세계관은 맞았지만
      이 화면은 표와 수를 몇 시간씩 읽는 자리라 어두운 바탕에서 눈이 먼저 지친다.
      기획자가 보여 준 레퍼런스(가비아 g클라우드 콘솔 · DDoS Guard · 메시지 대시보드)가
      셋 다 밝은 바탕에 파란 강조였고, **그 결이 운영 도구의 결이다.**
      ⚠ 되돌릴 일이 생기면 **고칠 것은 이 `:root` 한 덩이뿐**이다. 아래 꼴은 그대로 산다.

   ⚠⚠ **가로를 다 쓴다** (2026-10-15 기획자 — 「니가 잡아먹는 가로폭이 얼만줄알아?
      모든게 한눈에 보여야할거아니야」). 그 앞에는 `max-width:1100px` 한 줄 때문에
      1920 화면에서 **절반이 빈 채로** 카드가 세로로 한 줄씩 쌓였다 — 보려면 굴러야 했다.
      이제 `.grid` 는 넓은 화면에서 두 열을 고정하고 카드 폭이 함께 늘어난다.
      좁은 화면에서는 한 열로 접는다.
      ⚠ 집법전은 **책상에서 쓰는 것**이다. 좁은 화면을 먼저 생각하지 않는다 —
        다만 좁아져도 깨지지는 않는다(급할 때 폰으로 들어오는 자리는 있다).
   ============================================================ */
:root{
  --ink:#eef1f6; --panel:#ffffff; --line:#dfe4ec; --line-soft:#eef1f6;
  --fg:#1a2231; --fg-mid:#56637a; --fg-faint:#8b95a8;
  --og:#2f6fed; --og-hi:#1b4ac4; --og-lo:#e9f0ff;
  --ok:#17935a; --warn:#b4700c; --danger:#d84040;
  --ok-bg:#e6f7ee; --warn-bg:#fdf3e0; --danger-bg:#fdecec;
  /* 그래프 — 갈래 빛깔. ⚠ **차례가 뜻이다**(신규·기존·복귀…). 섞어 쓰지 마라 */
  --c1:#2f6fed; --c2:#17935a; --c3:#e0a020; --c4:#8257e6; --c5:#d84040; --c6:#1aa5b7;
  --sans:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"Cascadia Mono","Consolas",ui-monospace,monospace;
}
*{box-sizing:border-box}
/* ⚠⚠ **`hidden` 을 아무도 못 이기게 한다** (2026-10-15 에 밟았다).
   브라우저가 주는 `[hidden]{display:none}` 은 **갈래 선택자 하나에도 진다** —
   `.hall{display:grid}` 와 `.me{display:flex}` 가 그것을 덮어, 로그인도 안 했는데
   목록과 이메일이 그대로 서 있었다. 자물쇠는 서버가 쥐고 있어 **새는 것은 없었지만**,
   화면만 보면 뚫린 것처럼 보인다. 꼴을 더할 때마다 이 줄을 다시 쓰지 않도록 맨 위에 둔다 */
[hidden]{display:none !important}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);
  font-size:13.5px;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{padding:0 0 40px}

/* ── 머리띠 — 굴러도 붙어 있다 ────────────────────────── */
.top{position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;height:52px;background:var(--panel);border-bottom:1px solid var(--line)}
/* ⚠ 「집법전」 글자 대신 무명자 초상화가 선다 (2026-10-15 기획자가 정함).
   ⚠ 읽어 주는 이름은 `alt` 가 쥔다 — 글자를 지운 자리를 그것이 메운다 */
.top h1{margin:0;display:flex;align-items:center}
.낙관{display:block;border-radius:50%;object-fit:cover}
.낙관.큰것{margin:0 auto 14px}
.me{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-mid)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px 16px;margin:0;min-width:0}
.card h2{margin:0 0 10px;font-size:13px;letter-spacing:.02em;color:var(--fg);font-weight:700;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card h2 .sub{font-size:11.5px;letter-spacing:0;color:var(--fg-faint);font-weight:400}

.gate{max-width:420px;margin:80px auto;text-align:center;padding:32px 24px}
.lead{margin:0 0 18px;color:var(--fg-mid)}

.btn{font:inherit;font-size:12.5px;cursor:pointer;padding:8px 16px;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--fg);
  transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--og);color:var(--og-hi)}
.btn.pri{border-color:var(--og);background:var(--og);color:#fff}
.btn.pri:hover{background:var(--og-hi);color:#fff}
.btn.ghost{padding:6px 11px;font-size:12px;color:var(--fg-mid)}
/* ⚠ 되돌리기 어려운 단추는 **눈에 다르게** 선다. 지급 단추와 같은 빛이면 손이 같은 결로 간다 */
.btn.danger{border-color:var(--danger);background:#fff;color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}
/* ⚠⚠ **별러 있는 단추** — 한 번 눌러 공적인 확인 문구로 바뀐 상태다.
   글자만 바뀌던 때는 한 번 눌러 놓고 됐겠거니 하고 떠나기 쉬웠다 — 개발자 노트가
   「올렸는데 목록에 없다」였던 자리가 바로 여기다(서버에는 닿은 적이 없었다).
   깜빡이게 두어 **아직 안 나갔다**는 것을 눈이 먼저 읽게 한다 */
.btn[data-별렀나="1"]{border-color:var(--warn);background:var(--warn-bg);color:var(--warn);
  font-weight:700;animation:별렀다 1.1s ease-in-out infinite}
@keyframes 별렀다{0%,100%{box-shadow:0 0 0 0 #b4700c00}50%{box-shadow:0 0 0 4px #b4700c26}}
@media (prefers-reduced-motion:reduce){ .btn[data-별렀나="1"]{animation:none} }

.row{display:flex;gap:8px}
.row input{flex:1;min-width:0;font:inherit;font-size:13px;padding:8px 11px;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--fg)}
.row input:focus{outline:none;border-color:var(--og);box-shadow:0 0 0 3px var(--og-lo)}
.row label.sub{display:flex;align-items:center;gap:6px;white-space:nowrap}
.row select{font:inherit;font-size:12.5px;padding:7px 9px;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--fg)}

.why{margin:10px 0 0;min-height:1.2em;font-size:12.5px;color:var(--warn)}
.warn{margin:0 0 10px;font-size:11.5px;color:var(--fg-faint)}
.sub{font-size:11.5px;color:var(--fg-faint)}

/* 이름과 값을 두 칸으로 */
.kv{display:grid;grid-template-columns:104px 1fr;gap:5px 12px;margin:0;font-size:12.5px}
.kv dt{color:var(--fg-faint)}
.kv dd{margin:0;word-break:break-all}
.kv dd.mono{font-family:var(--mono);font-size:11.5px}

/* ══ 격자 — **가로를 다 쓰는 자** ═══════════════════════════════════
   ⚠⚠ 카드를 세로로 쌓지 마라. `.grid` 안에 넣으면 폭이 나는 만큼 옆으로 선다.
     `.wide` 는 한 줄을 통째로 쓰는 카드(추이 그래프·긴 표)고, `.half` 는 절반이다.
   ⚠ 가장 좁은 칸을 320px 로 잡았다 — 그보다 좁으면 표의 머리줄이 깨진다 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;align-items:start}
.grid .wide{grid-column:1/-1}
@media (max-width:700px){ .grid{grid-template-columns:minmax(0,1fr)} }

.자리[data-자리="개발자 노트"]{display:flex;flex-direction:column;gap:12px}

/* 수 타일 — 들어오자마자 읽히는 여섯 자리 */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.tile .t-n{display:block;font-size:26px;line-height:1.2;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.tile .t-k{display:block;font-size:11.5px;color:var(--fg-faint);margin-bottom:2px}
.tile .t-d{display:block;font-size:11px;margin-top:3px;color:var(--fg-faint)}
.tile .t-d.up{color:var(--ok)} .tile .t-d.down{color:var(--danger)}
.tile.on{border-color:var(--og);box-shadow:0 0 0 3px var(--og-lo)}
/* 값이 없는 자리 — **0 이 아니라 빈칸이다**(결제 미도입). 흐리게 세워 그 말을 보탠다 */
.tile.none .t-n{color:var(--fg-faint);font-size:20px}

/* ══ 그래프 ══════════════════════════════════════════════════════
   ⚠⚠ **바깥 그림판을 안 들인다**(CSP 가 바깥 스크립트를 막는다 · `index.html` 머리말).
      그래서 `adm.js` 의 `그림` 한 벌이 SVG 를 손수 그린다. 꼴은 여기 한 곳이다 */
.chart{width:100%;display:block;overflow:visible}
.chart text{font-family:var(--sans);font-size:10.5px;fill:var(--fg-faint)}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .gr{stroke:var(--line-soft);stroke-width:1}
.chart .bar{rx:2}
.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{stroke:#fff;stroke-width:1.5}
.chart .hit{fill:transparent;cursor:pointer}
.chart .hit:hover+.hl,.chart .hl.on{opacity:1}
.chart .hl{opacity:0;fill:var(--og);fill-opacity:.07}
.chart .zero{fill:var(--fg-faint);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-size:11.5px;color:var(--fg-mid)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
/* 가로 막대 한 줄 — 유입·검색어처럼 **이름과 수와 비율**을 한 줄에 */
.hbar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.hbar li{display:grid;grid-template-columns:minmax(72px,34%) 1fr auto;align-items:center;
  gap:10px;padding:4px 0;font-size:12px}
.hbar .nm{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .tr{height:9px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.hbar .tr i{display:block;height:100%;border-radius:3px;background:var(--c1)}
.hbar .vl{color:var(--fg-mid);font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar .none{color:var(--fg-faint);padding:14px 0;text-align:center;display:block}

/* ══ 표 한 벌 ═══════════════════════════════════════════════════════
   아홉 표가 `adm.js` 의 `표그리기` 하나를 돌려 쓴다. 꼴도 여기 한 벌뿐이다 */
.tablewrap{overflow-x:auto}
.tablewrap.tall{max-height:420px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
/* 머리줄 — 굴러도 붙어 있다. 긴 표에서 칸 이름을 잊지 않게 */
thead th{position:sticky;top:0;z-index:1;
  padding:7px 8px;text-align:left;white-space:nowrap;
  font-weight:600;font-size:11.5px;letter-spacing:.02em;color:var(--fg-mid);
  background:#f7f9fc;border-bottom:1px solid var(--line)}
thead th.num{text-align:right}
td{padding:6px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.why{color:var(--fg-mid);word-break:break-all}
td.mono{font-family:var(--mono);font-size:11px;color:var(--fg-faint)}
td.none{text-align:center;color:var(--fg-faint);padding:18px}
/* 늘고 줄고 — 눈이 수보다 먼저 읽는다 */
td.up{color:var(--ok)} td.down{color:var(--danger)}
.검색쪽{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.검색쪽[hidden]{display:none}
.검색쪽 span{font-size:12px;color:var(--fg-mid);font-variant-numeric:tabular-nums}
.검색쪽 .btn:disabled{opacity:.45;cursor:default}

/* 상태 뱃지 — 「지금 어떤 상태인가」를 글자보다 먼저 읽게 한다 */
.뱃지{display:inline-block;padding:1px 7px;border-radius:999px;
  font-size:11px;line-height:1.7;white-space:nowrap;
  border:1px solid var(--line);background:#f4f6fa;color:var(--fg-mid)}
.뱃지.ok{border-color:#a9dec3;background:var(--ok-bg);color:var(--ok)}
.뱃지.off{border-color:var(--line);background:#f4f6fa;color:var(--fg-faint)}
.뱃지.warn{border-color:#efd3a0;background:var(--warn-bg);color:var(--warn)}
.뱃지.bad{border-color:#f2bcbc;background:var(--danger-bg);color:var(--danger)}

/* 펼 수 있는 줄 — 눌리는 자리라는 것이 손에 먼저 닿아야 한다 */
tr.펼{cursor:pointer}
tr.펼:hover td{background:#f7f9fc}
tr.펼:focus-visible{outline:1px solid var(--og);outline-offset:-1px}
tr.펼[aria-expanded="true"] td{background:var(--og-lo)}
/* ⚠ **아래로 편다.** 오른쪽에 붙이면 좁은 창에서 깨지고, 긴 글(제보 §3.13)에는 세로가 넉넉하다 */
tr.편 td{padding:12px;background:#f7f9fc;border-bottom:1px solid var(--line)}
tr.편 .kv{grid-template-columns:124px 1fr;font-size:12px}
/* 더 보기 — 쪽 번호를 두지 않는다. 몇 쪽이었는지를 기억하게 만들 까닭이 없다 */
tr.더 td{padding:9px 8px;text-align:center;border-bottom:none}

/* ── 왼쪽 목록 틀 (기획서 §3.0) ───────────────────────── */
.hall{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 20px 0}
.nav{position:sticky;top:68px;display:flex;flex-direction:column;gap:1px;
  padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.navlab{margin:10px 6px 4px;font-size:10.5px;letter-spacing:.08em;color:var(--fg-faint)}
.navlab:first-child{margin-top:2px}
/* ⚠⚠ 되돌릴 수 없는 것은 선 아래에 따로 선다 — 자주 쓰는 것 옆에 두면 잘못 누른다 */
.navlab-warn{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);color:var(--danger)}

.nv{font:inherit;font-size:12.5px;text-align:left;cursor:pointer;padding:7px 10px;border-radius:4px;
  border:1px solid transparent;background:none;color:var(--fg-mid);
  transition:color .12s,background .12s}
.nv:hover{color:var(--fg);background:#f4f6fa}
.nv.on{color:#fff;background:var(--og);font-weight:600}
.nv-danger{color:#b06a6a}
.nv-danger:hover{color:var(--danger);background:var(--danger-bg)}
.nv-danger.on{color:#fff;background:var(--danger)}

.pane{min-width:0}

@media (max-width:860px){
  .hall{grid-template-columns:1fr;padding:12px}
  .nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .navlab{width:100%;margin:4px 2px 0}
  .navlab-warn{margin-top:8px;padding-top:8px}
  .kv{grid-template-columns:92px 1fr}
}

/* ── 지급 (기획서 §3.7 · §3.8) ───────────────────────── */
.row.mt{margin-top:8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.row3 label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--fg-faint)}
.row3 input,.row3 select{font:inherit;font-size:13px;padding:8px 10px;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--fg)}
.row3 input:focus,.row3 select:focus{outline:none;border-color:var(--og);box-shadow:0 0 0 3px var(--og-lo)}
/* ⚠ 고른 갈래에 안 쓰는 칸은 **잠근다**(`disabled`). 잠긴 칸이 멀쩡해 보이면
   거기 적어 둔 수가 나가는 줄 안다 — 눈에도 꺼져 보여야 한다 */
.row3 input:disabled,.row3 select:disabled{opacity:.45;cursor:not-allowed;background:#f4f6fa}
.narrow{flex:0 0 72px;text-align:center}
@media (max-width:560px){ .row3{grid-template-columns:1fr} }

/* 찾은 연 — 열둘까지만 선다 */
.hits{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.hits:empty{margin:0}
.hit{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;cursor:pointer;
  padding:6px 10px;border-radius:4px;border:1px solid transparent;
  background:#f4f6fa;color:var(--fg-mid)}
.hit:hover{color:var(--og-hi);border-color:var(--og);background:var(--og-lo)}
.picked{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.picked:empty{margin:0}
.picked li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:4px;
  border:1px solid var(--line);background:#f7f9fc}
.picked .nm{flex:1;min-width:0;font-size:12.5px;word-break:break-all}
.picked .cnt{color:var(--og-hi);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 여러 줄 글칸 ─────────────────────────────────────── */
.ta{display:block;width:100%;font:inherit;font-size:13px;padding:9px 11px;border-radius:4px;
  resize:vertical;border:1px solid var(--line);background:#fff;color:var(--fg)}
.ta:focus{outline:none;border-color:var(--og);box-shadow:0 0 0 3px var(--og-lo)}
.ta.mt{margin-top:8px}
.row3.mt{margin-top:10px}
.mt2{margin-top:10px}

/* ── 개발자 노트 미리 보기 (기획서 §3.3.5) ──────────────
   ⚠ **인게임과 같은 꼴로 보여 준다** — 문단 안의 줄바꿈이 거기서 살아 있으므로 여기서도 산다 */
#노트미리보기{margin-top:10px}
#노트미리보기 p{white-space:pre-line}
#노트미리보기 .card{border-color:var(--og);background:var(--og-lo)}
/* 마디 제목 — 인게임에서 박스가 쳐지는 줄이다(`[대괄호]` 한 줄). 꼴만 흉내 낸다 */
#노트미리보기 .마디{margin:12px 0 6px;padding:4px 9px;border-left:3px solid var(--og);
  border-radius:0 3px 3px 0;background:#fff;font-weight:700;color:var(--fg)}

/* ── 제보 한 장 (기획서 §3.13) ─────────────────────────
   ⚠⚠ **제보를 보며 그 사람을 같이 본다.** 창을 두 번 열어 uid 를 옮겨 적게 하면
      그 자리에서 오타가 난다 — 그래서 왼쪽에 글과 답, 오른쪽에 그 사람이다 */
.한장{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.한장 h3{margin:0 0 8px;font-size:12px;letter-spacing:.04em;color:var(--og-hi)}
.한장-오른{padding-left:18px;border-left:1px solid var(--line)}
.한장-오른 h3{margin-top:14px}
.한장-오른 h3:first-child{margin-top:0}
/* 이용자가 적은 글 — 줄바꿈이 그대로 살아야 글의 결이 산다 */
.제보글{margin:0 0 10px;font-size:12.5px;line-height:1.8;color:var(--fg);white-space:pre-line;word-break:break-word}
.앞답{margin:10px 0 0;padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:#f7f9fc}
.앞답 .sub{display:block;margin:0 0 6px}
.전표줄{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:11.5px}
.전표줄 li{display:flex;gap:8px;align-items:baseline;color:var(--fg-mid);
  padding:3px 0;border-bottom:1px solid var(--line-soft)}
.전표줄 li:last-child{border-bottom:none}
.전표줄 .때{color:var(--fg-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.전표줄 .말{flex:1;color:var(--fg)}
.전표줄 .델{white-space:nowrap;font-variant-numeric:tabular-nums}
.전표줄 .델.up{color:var(--ok)} .전표줄 .델.down{color:var(--danger)}
@media (max-width:900px){
  .한장{grid-template-columns:1fr}
  .한장-오른{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:14px}
}

/* ── 날짜 빠른 입력 ─────────────────────────────────── */
.quick{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.quick .sub{margin-right:2px}
.quick button{font:inherit;font-size:11.5px;cursor:pointer;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);background:#f4f6fa;color:var(--fg-mid)}
.quick button:hover{border-color:var(--og);color:var(--og-hi);background:var(--og-lo)}

/* ── 출석 한 벌 (§3.10) ───────────────────────────────
   ⚠ 여러 벌이 동시에 돈다 — 벌마다 한 상자로 선다 */
.벌{border:1px solid var(--line);border-radius:6px;padding:12px;margin:0 0 10px;background:#f7f9fc}
.벌.도는중{border-color:var(--ok);background:var(--ok-bg)}
/* 손으로 멈춰 둔 벌 — 기간은 멀쩡한데 안 도는 것이라 **눈에 달리** 선다 */
.벌.쉬는중{border-color:var(--warn);background:var(--warn-bg)}
.벌.쉬는중 .벌칸{opacity:.55}
/* 대전 로그 — **고를 수 있어야 한다.** 운영자가 끌어 고르거나 「전체 복사」로 집어 간다.
   ⚠ 글자를 줄여 긴 판도 한 화면에 많이 들어오게 하고, 넘치면 그 칸 안에서만 구른다 */
pre.로그{margin:10px 0 0;padding:12px;max-height:460px;overflow:auto;
  border:1px solid var(--line);border-radius:6px;background:#0f1115;color:#dbe3ee;
  font-family:var(--mono);font-size:11.5px;line-height:1.55;white-space:pre;user-select:text}

/* ⚠ 위 표의 「수정」을 누르면 그 상자를 **잠깐 짚어 준다** (2026-10-16). 화면이 길어
   그냥 내려가면 어느 상자인지 모른다 — 두 번 깜빡이고 스스로 꺼진다 */
.벌.짚음{animation:짚기 .55s ease-in-out 2}
@keyframes 짚기{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px var(--og,#2b6cb0)}}
@media (prefers-reduced-motion:reduce){.벌.짚음{animation:none;box-shadow:0 0 0 3px var(--og,#2b6cb0)}}
.벌머리{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.벌머리 .nm{flex:1;min-width:120px}
.벌칸{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.벌칸 .일{background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px}
.벌칸 .일 .d{font-size:11px;color:var(--fg-faint);margin-bottom:4px}

/* ── 개발 집법전 전용 검정 판 ────────────────────────────
   운영 화면의 밝은 색은 그대로 두고, 개발 호스트에서만 적용한다.
   단순 배경 반전은 입력칸·표·펼침 줄이 흰색으로 남으므로 함께 가른다. */
body[data-stage="dev"]{
  color-scheme:dark;
  --ink:#090b10; --panel:#151922; --line:#343b49; --line-soft:#272e3a;
  --fg:#eff2f8; --fg-mid:#b5bfce; --fg-faint:#8996aa;
  --og:#8d9eff; --og-hi:#b9c4ff; --og-lo:#252b46;
  --ok:#6bd4a0; --warn:#e7b767; --danger:#fa8588;
  --ok-bg:#16372c; --warn-bg:#3b2c19; --danger-bg:#3b2329;
}
body[data-stage="dev"] .판표시{margin-left:10px;padding:2px 8px;border:1px solid var(--og);
  border-radius:999px;color:var(--og-hi);font-size:11px;font-weight:700;letter-spacing:.06em}
body[data-stage="dev"] .btn,
body[data-stage="dev"] .row input,
body[data-stage="dev"] .row select,
body[data-stage="dev"] .row3 input,
body[data-stage="dev"] .row3 select,
body[data-stage="dev"] .ta,
body[data-stage="dev"] .벌칸 .일,
body[data-stage="dev"] #노트미리보기 .마디{background:#10141c;color:var(--fg)}
body[data-stage="dev"] .btn.pri{background:#596acb;color:#fff}
body[data-stage="dev"] .btn.pri:hover{background:#7182e8}
body[data-stage="dev"] .btn.danger{color:var(--danger)}
body[data-stage="dev"] .btn.danger:hover{background:var(--danger);color:#11141b}
body[data-stage="dev"] .btn[data-별렀나="1"]{background:var(--warn-bg);color:var(--warn)}
body[data-stage="dev"] thead th,
body[data-stage="dev"] tr.편 td,
body[data-stage="dev"] .앞답,
body[data-stage="dev"] .벌,
body[data-stage="dev"] .picked li{background:#1c222d}
body[data-stage="dev"] tr.펼:hover td,
body[data-stage="dev"] .nv:hover,
body[data-stage="dev"] .뱃지,
body[data-stage="dev"] .뱃지.off,
body[data-stage="dev"] .hit,
body[data-stage="dev"] .quick button{background:#252c38}
body[data-stage="dev"] .벌.도는중{background:var(--ok-bg)}
body[data-stage="dev"] .벌.쉬는중{background:var(--warn-bg)}
body[data-stage="dev"] .row3 input:disabled,
body[data-stage="dev"] .row3 select:disabled{background:#20252f}
body[data-stage="dev"] .nv.on{background:#4658ad;color:#fff}
body[data-stage="dev"] .nv-danger.on{background:#a94350;color:#fff}
body[data-stage="dev"] .뱃지.ok{background:var(--ok-bg)}
body[data-stage="dev"] .뱃지.warn{background:var(--warn-bg)}
body[data-stage="dev"] .뱃지.bad{background:var(--danger-bg)}