/* ─────────────────────────────────────────────────────────────
   통합안 A — 선택이 주인. 오른쪽은 설정 개수 눈금.
   `build/plan-a.html` 확정본에서 옮긴 것이다. 배치·글자·색을 새로 짓지 않는다.

   확정본에서 덜어 낸 것 (전부 「손으로 그린 표」였다. 이제 진짜 OPEN GRID 가 그린다)
     :root 의 --og-* 스무 줄 · .thead · .tbody · table · col · thead th · tbody td
     tbody tr(.hover/.sel/.added/.edited) · td.focus · .sbar · .pv table/thead/tbody/col
     .pv.dark 의 --og-* 여섯 · .pickcard (ui/explain.js 가 그린다)
   이 페이지는 --og- 를 스스로 선언하지 않는다 (§7.1 접두어 분리).
   ───────────────────────────────────────────────────────────── */
:root{
  /* 창 자체(빌더)의 색 — 그리드 값과 섞이지 않게 따로 둔다 */
  --ui-bg:#eceff1;
  --ui-panel:#ffffff;
  --ui-line:#d1d6d9;
  --ui-line-soft:#e3e7e9;
  --ui-ink:#1c252b;
  --ui-ink-dim:#5b686f;
  --ui-accent:#37474f;
  /* A-7 — 흐린 글자. 옛 #8d979c 는 흰 바탕에서 2.98 : 1 이라 못 읽는다.
     이 값은 흰 바탕 5.31 : 1 · 판 바탕(#eceff1) 4.60 : 1 이다 */
  --ui-ink-faint:#626d73;
  --ui-pick:#16324f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;
  font-size:12px;color:var(--ui-ink);background:var(--ui-bg);
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
button[disabled]{cursor:default;opacity:.45}

/* 초점 테두리 — 표 밖은 도구 화면 색으로 그린다. --og- 를 안 쓴다 (§12.2) */
body :focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}

/* ── ① 이름표 띠 ───────────────────────────────────────────── */
.namebar{
  height:26px;flex:0 0 26px;display:flex;align-items:center;gap:10px;
  padding:0 12px;background:#10242f;color:#eaf1f7;font-size:12px;letter-spacing:.2px;
}
/* 화면 이름은 h1 이다 — 화면 읽어 주는 프로그램이 제목만 훑어도 어느 판인지 안다 (F-5) */
.namebar h1{font-size:12px;font-weight:400;letter-spacing:.2px;margin:0;line-height:26px}
.namebar .right{margin-left:auto;color:#9fb0ba;font-size:11px;font-variant-numeric:tabular-nums}

/* ── ② 머리줄 ─────────────────────────────────────────────── */
.toolbar{
  height:40px;flex:0 0 40px;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--ui-panel);border-bottom:1px solid var(--ui-line);
}
.btn{
  height:26px;padding:0 10px;border:1px solid var(--ui-line);background:#fff;border-radius:3px;
  font-size:12px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.btn.on{background:var(--ui-pick);border-color:var(--ui-pick);color:#eaf1f7;font-weight:600}
.sep{width:1px;height:20px;background:var(--ui-line);flex:0 0 1px}
/* F-1 — 딱지 사이가 낱말 사이와 비슷해 「형태」와 「고정」이 옆 딱지로 넘어가 읽혔다.
   딱지 사이를 딱지 안 낱말 사이(4px)의 두 배 넘게 벌린다 */
.lockset{display:flex;align-items:center;gap:10px}
.lockset .lockhint{font-size:10px;color:var(--ui-ink-dim);white-space:nowrap}
.lockset .lbl{font-size:11px;color:var(--ui-ink-dim)}
.chip{
  height:24px;padding:0 9px;border:1px solid var(--ui-line);border-radius:12px;background:#fff;
  font-size:11px;display:inline-flex;align-items:center;gap:4px;
}
.chip.free{border-color:#b9c2c7}
/* A-7 — 잠긴 딱지 글자. #5b686f 는 이 바탕(#dbdfe2)에서 4.29 : 1 이라 모자란다. 이 값은 5.30 : 1 */
.chip.locked{background:#dbdfe2;border-color:#b9c2c7;color:#4e5a61}
.chip .dot{width:7px;height:7px;border-radius:50%;background:#37474f}
/* F-2 — 잠김을 회색 점으로만 말하던 자리. B 가 이미 쓰는 자물쇠를 그대로 가져왔다 */
.chip svg{display:none}
.chip.locked svg{display:block}
.chip.locked .dot{display:none}
.sel{
  height:26px;border:1px solid var(--ui-line);border-radius:3px;background:#fff;
  padding:0 8px;font-size:12px;display:inline-flex;align-items:center;gap:6px;
}
.sel b{font-weight:600}
.toolbar .grow{flex:1}
.budgetpill{
  height:26px;padding:0 10px;border:1px solid #b9c2c7;border-radius:13px;background:#f6f7f7;
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-variant-numeric:tabular-nums;
}
.budgetpill b{font-size:13px}

/* ── ③ 본문 ───────────────────────────────────────────────── */
.main{flex:1;display:flex;min-height:0;gap:0}

/* 왼쪽 — 예시 표(주인) */
.stage{flex:1;min-width:0;display:flex;flex-direction:column;padding:8px 8px 8px 10px;gap:6px}
.stagehead{height:22px;flex:0 0 22px;display:flex;align-items:center;gap:8px;font-size:11px;position:relative}
.stagehead .t{font-size:12px;font-weight:700;white-space:nowrap}
.stagehead .hint{color:var(--ui-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stagehead .hint kbd{
  border:1px solid var(--ui-line);border-radius:2px;padding:0 4px;background:#fff;font:inherit;
}
.stagehead .right{margin-left:auto;color:var(--ui-ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap}

.gridwrap{
  flex:1;min-height:0;position:relative;display:flex;flex-direction:column;
  background:var(--ui-panel);border-radius:3px;overflow:hidden;
}
/* 진짜 OPEN GRID 가 앉는 자리. 이 안에 생기는 div 자신이 .og-container 가 된다 */
.gridhost{flex:1;min-height:0;display:flex;flex-direction:column}
.gridhost > div{flex:0 0 auto;border-radius:3px}

/* 필터 줄 = .og-find-bar · 페이지 표시줄 = .og-footer-bar
   ★ 바탕을 여기서 다시 선언하지 않는다. 코어 CSS 가 var(--og-header-bg) 로 칠한다 —
     그래야 색인이 진짜로 찾고 「같이 바뀝니다」가 거짓말이 아니다 (0.3절) */
.og-find-bar.filterbar{
  height:28px;flex:0 0 28px;align-items:center;gap:6px;padding:0 8px;position:relative;
  color:var(--og-header-color);animation:none;
}
.filterbar .f{
  height:19px;padding:0 7px;border:1px solid rgba(234,241,247,.35);border-radius:2px;
  font-size:11px;display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
}
.filterbar .go{
  margin-left:auto;height:19px;padding:0 10px;border-radius:2px;border:0;
  background:#eaf1f7;color:#10242f;font-size:11px;font-weight:600;
}
.linktag{
  position:absolute;right:96px;top:-1px;height:14px;padding:0 5px;border-radius:0 0 3px 3px;
  background:#37474f;color:#eaf1f7;font-size:9px;line-height:14px;letter-spacing:.2px;
  white-space:nowrap;pointer-events:none;
}
.neighbor{outline:1px dashed #eaf1f7;outline-offset:-3px}

.picked-outline{outline:2px solid #6ea8dc;outline-offset:-2px}

/* 흉내 규칙 — :hover 와 :focus-visible 을 늘 한 행씩 세워 둔다 (§2.6 · 12.3).
   상태 행이 없으면 그 색을 누를 자리가 통째로 사라진다.
   원본 규칙과 **같은 값**을 쓴다. 어긋나면 5걸음 흔들기가 「안 움직임」으로 잡아낸다. */
.og-row.og-b-hover{
  background:var(--og-row-hover-bg) !important;
  box-shadow:inset var(--og-row-accent-width) 0 0 var(--og-row-accent-color);
}
.og-cell.og-b-focus{outline:2px solid var(--og-focus-border);outline-offset:-2px}

.ck{
  width:11px;height:11px;border:1px solid #8d979c;border-radius:2px;display:inline-block;
  vertical-align:-1px;background:#fff;flex:0 0 11px;
}
.ck.on{background:#37474f;border-color:#37474f;position:relative}
.ck.on::after{
  content:"";position:absolute;left:3px;top:0;width:3px;height:7px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.st{
  display:inline-block;min-width:40px;text-align:center;padding:0 5px;border-radius:2px;
  font-size:11px;line-height:15px;border:1px solid rgba(28,37,43,.14);font-weight:400;
}
.st.run{background:#cfdce6;color:#10242f}
.st.done{background:#d6f4db;color:#1c252b}
.st.wait{background:#dbdfe2;color:#1c252b}
.st.late{background:#e8bcb9;color:#1c252b}

/* 페이지 매김 띠 = .og-footer-bar. 바탕은 코어가 var(--og-header-bg) 로 칠한다 */
.og-footer-bar.pagebar{
  height:26px;flex:0 0 26px;align-items:center;gap:4px;padding:0 8px;
  position:relative;font-variant-numeric:tabular-nums;font-weight:400;font-size:12px;
  border-top:1px solid var(--og-border-color);color:var(--og-header-color);
}
.pagebar .pg{
  min-width:19px;height:19px;padding:0 5px;border:1px solid var(--og-border-color);background:#fff;
  border-radius:2px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;
  color:#1c252b;
}
.pagebar .pg.cur{background:#37474f;border-color:#37474f;color:#fff;font-weight:600}
.pagebar .cnt{margin-left:auto;font-size:11px;color:var(--og-header-color);opacity:.8}
.linktag.cut{
  background:#8d5a2b;left:auto;right:188px;top:5px;height:16px;line-height:16px;border-radius:2px;
}

/* 선택 이름표 — ui/explain.js 가 그린다. 색·굵기는 확정본 .pickcard 그대로 */
.gridwrap .x-nametag{
  background:#10242f !important;color:#eaf1f7 !important;
  border-radius:0 0 3px 3px !important;font-size:11px !important;
  box-shadow:0 4px 12px rgba(16,36,47,.28);
}
.gridwrap .x-nameline{background:#10242f !important}

/* 같이 보는 3벌 */
.previews{flex:0 0 118px;height:118px;display:flex;gap:6px}
.pv{
  flex:1;min-width:0;border:1px solid var(--ui-line);border-radius:3px;background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
}
.pv .h{
  height:19px;flex:0 0 19px;display:flex;align-items:center;gap:5px;padding:0 6px;
  background:#f6f7f7;border-bottom:1px solid var(--ui-line-soft);font-size:10px;color:#5b686f;
  white-space:nowrap;overflow:hidden;
}
.pv .h b{flex:0 0 auto;color:var(--ui-ink);font-size:10px}
.pv .h .ok{flex:0 0 auto;margin-left:auto;color:#37474f;font-variant-numeric:tabular-nums}
.pv .b{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
/* ★ flex 로 늘이지 않는다. ui/preview.js 의 줄맞춤이 「줄이 딱 떨어지는 높이」를 박아 넣는데
   flex:1 이면 그 높이가 먹히지 않아 마지막 줄이 반만 잘려 보인다 (실측) */
.pv .b > div{flex:0 0 auto;min-height:0}
.pv .b .og-container{border:0 !important;border-radius:0 !important;box-shadow:none !important}
.pv.dark .h{background:#1c252b;border-bottom-color:#37474f;color:#a9bcc6}
.pv.dark .h b{color:#eaf1f7}
.pv.dark .h .ok{color:#9fd0f0}
.bignum{
  display:flex;flex-direction:column;justify-content:center;gap:1px;height:100%;padding:3px 8px;
  font-variant-numeric:tabular-nums;font-size:17px;text-align:right;letter-spacing:-.2px;
}
.bignum span{line-height:1.15}

/* ── ④ 옆 판 376px ────────────────────────────────────────── */
.rail{
  flex:0 0 376px;width:376px;display:flex;flex-direction:column;gap:6px;
  padding:8px 10px 8px 8px;background:var(--ui-bg);border-left:1px solid var(--ui-line);
}
.box{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:3px}
.box .bh{
  height:24px;display:flex;align-items:center;gap:6px;padding:0 8px;
  border-bottom:1px solid var(--ui-line-soft);font-size:11px;font-weight:700;
}
.box .bh .r{margin-left:auto;font-weight:400;color:var(--ui-ink-dim);font-variant-numeric:tabular-nums}

/* 설정 개수 눈금 */
.budget{flex:0 0 auto}
.brow{display:flex;align-items:center;gap:7px;padding:5px 8px;border-top:1px solid #f0f2f3}
.brow:first-of-type{border-top:0}
.brow .k{width:26px;font-size:11px;color:var(--ui-ink-dim);flex:0 0 26px}
.slots{display:flex;gap:3px;flex:1}
.slot{
  width:19px;height:19px;border-radius:2px;border:1px solid #b9c2c7;background:#fff;
  font-size:9px;display:flex;align-items:center;justify-content:center;color:#5b686f;
  overflow:hidden;
}
.slot.empty{border-style:dashed;border-color:#c8cfd3;background:#f6f7f7}
.brow .n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--ui-ink);white-space:nowrap}
.brow .n b{font-size:12px}
.bfoot{
  padding:4px 8px;border-top:1px solid #f0f2f3;font-size:10px;color:var(--ui-ink-dim);line-height:1.45;
}
.bfoot:empty{display:none}
.bfoot b{color:var(--ui-ink)}

/* 값 카드 더미 */
.cards{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.card{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:3px;padding:6px 8px}
.card.act{border-color:#16324f;box-shadow:0 0 0 1px #16324f inset}
.card .ch{display:flex;align-items:center;gap:6px}
.card .sw{width:13px;height:13px;border-radius:2px;border:1px solid #8d979c;flex:0 0 13px}
.card .nm{font-size:12px;font-weight:700}
.card .x{margin-left:auto;border:0;background:transparent;color:var(--ui-ink-faint);font-size:13px;line-height:1}
.card .var{
  font-family:'Consolas','Segoe UI',monospace;font-size:11px;color:#37474f;margin:2px 0 4px 19px;
}
.swap{display:flex;align-items:center;gap:6px;margin-left:19px;font-size:11px;font-variant-numeric:tabular-nums}
.swap .old{color:var(--ui-ink-faint);text-decoration:line-through}
.swap .new{font-weight:700}
.swap .hex{border:1px solid var(--ui-line);border-radius:2px;height:18px;padding:0 4px;width:76px;
  font-family:'Consolas','Segoe UI',monospace;font-size:11px;color:#1c252b;background:#fff}
.swap i{font-style:normal;color:var(--ui-ink-faint)}
.range{margin:6px 0 4px 19px;position:relative;height:14px}
.range .trk{position:absolute;left:0;right:0;top:5px;height:4px;border-radius:2px;background:#dbdfe2}
.range .fill{position:absolute;left:0;top:5px;height:4px;border-radius:2px 0 0 2px;background:#37474f}
.range .bad{position:absolute;top:5px;height:4px;background:#e8bcb9;border-radius:0 2px 2px 0}
.range .knob{
  position:absolute;top:0;width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid #37474f;transform:translateX(-7px);
}
.range .mark{position:absolute;top:-3px;font-size:10px;line-height:10px;color:var(--ui-ink-faint);transform:translateX(-7px)}
.range.off{opacity:.45}
.verdict{display:flex;align-items:center;gap:5px;margin-left:19px;font-size:11px}
.badge{padding:1px 6px;border-radius:2px;font-size:10px;font-weight:700}
.badge.pass{background:#d6f4db;color:#1c252b}
.badge.tight{background:#e7d5ad;color:#1c252b}
.badge.fail{background:#e8bcb9;color:#1c252b}
.nbr{margin:6px 0 0 19px;border-top:1px solid #f0f2f3;padding-top:5px}
.nbr .t{font-size:11px;color:var(--ui-ink-dim);margin-bottom:3px}
.nbr .t b{color:var(--ui-ink)}
.nbr .row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:11px;line-height:18px;min-width:0}
.nbr .row .who{flex:0 1 auto;white-space:normal;overflow:visible;word-break:keep-all}
.nbr .row .cost{flex:0 0 auto;font-size:10px;color:#8d5a2b;font-variant-numeric:tabular-nums;white-space:nowrap}
.nbr .row.off{color:var(--ui-ink-faint)}
.nbr .row.nopress{color:var(--ui-ink-faint)}
/* 셀렉터는 길다 — 테마 27종이 한 규칙에 묶여 있으면 한 줄이 수백 글자가 된다(실측).
   카드 밖으로 넘치면 옆 판이 통째로 무너진다. 한 줄로 자르고 전체는 title 로 남긴다 */
.nbr .sel{
  flex:1 1 auto;min-width:0;height:auto;border:0;background:transparent;padding:0;border-radius:0;
  display:block;font-family:'Consolas','Segoe UI',monospace;font-size:10px;color:var(--ui-ink-faint);
  white-space:normal;word-break:break-all;overflow:visible;
}
.card.mini{display:flex;align-items:center;gap:6px;padding:6px 8px}
.card.mini .var{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.card.mini .sw2{width:12px;height:12px;border-radius:2px;border:1px solid #8d979c;flex:0 0 12px}
.card .pick{margin-left:19px;font-size:11px}
.card .pick button{
  display:block;width:100%;text-align:left;border:1px solid var(--ui-line);border-radius:2px;
  background:#fff;padding:2px 6px;margin-top:3px;font-size:11px;
}
.card .why{margin-left:19px;font-size:10px;color:var(--ui-ink-dim);line-height:1.45}

/* 기본설정 목록 */
/* 「펴기」로 서른 줄이 다 펴져도 옆 판 밖으로 안 나간다. 목록 안에서 스크롤한다 */
.rules{flex:0 1 auto;max-height:190px;display:flex;flex-direction:column;overflow:hidden}
.rlist{flex:1 1 auto;overflow-y:auto;min-height:0}
.rules .bh,.rules .rmore{flex:0 0 auto}
.rrow{
  display:flex;align-items:center;gap:6px;padding:3px 8px;border-top:1px solid #f4f6f7;font-size:11px;
}
.rrow .what{width:88px;flex:0 0 88px;color:var(--ui-ink)}
.rrow .how{flex:1;min-width:0;color:var(--ui-ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .val{
  font-family:'Consolas','Segoe UI',monospace;font-size:10px;font-variant-numeric:tabular-nums;color:#5b686f;
}
.rrow .sw3{width:11px;height:11px;border-radius:2px;border:1px solid #b9c2c7;flex:0 0 11px}
.up{
  height:18px;padding:0 6px;border:1px solid var(--ui-line);border-radius:9px;background:#fff;
  font-size:10px;white-space:nowrap;
}
.up.done{background:#16324f;border-color:#16324f;color:#eaf1f7}
.rmore{
  display:flex;align-items:center;gap:6px;padding:4px 8px;border-top:1px solid #f0f2f3;
  font-size:10px;color:var(--ui-ink-dim);
}
.rmore .btn{height:19px;padding:0 7px;font-size:10px}

/* ── ⑤ 아래 띠 ────────────────────────────────────────────── */
.footbar{
  height:66px;flex:0 0 66px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:#10242f;color:#eaf1f7;
}
.footbar .said{max-width:290px;line-height:1.45}
.footbar .said b{font-size:14px;color:#fff}
.footbar .said span{color:#a9bcc6;font-size:11px}
.files{display:flex;gap:8px}
.file{
  background:#1c252b;border:1px solid #37474f;border-radius:3px;padding:6px 9px;min-width:158px;
}
.file .fn{
  font-family:'Consolas','Segoe UI',monospace;font-size:12px;color:#eaf1f7;
  display:flex;align-items:center;gap:0;
}
.file .fn svg{margin-right:5px;flex:0 0 auto}
/* 밑줄이 빈 자리까지 그어지지 않게 글자 수만큼만 넓어진다 (size 로 잰다) */
.file .fn input{
  background:transparent;border:0;border-bottom:1px dashed #5b686f;color:#eaf1f7;
  font:inherit;width:8ch;min-width:2ch;padding:0;text-align:left;field-sizing:content;
}
.file .fd{font-size:10px;color:#9fb0ba;margin-top:2px;font-variant-numeric:tabular-nums}
/* 넣은 이름이 그대로 안 나갈 때 그 자리에서 말한다. 말없이 갈아 치우지 않는다 (E-3) */
.file .fnote{font-size:10px;color:#ffd9a8;margin-top:2px;line-height:1.35;max-width:270px;word-break:keep-all}
.file .fnote.bad{color:#ffb4a2}
.file .fnote:empty{display:none}
.footbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn.ghost{background:transparent;border-color:#5b686f;color:#cfdce6;height:30px}
.btn.dl{
  background:#eaf1f7;border-color:#eaf1f7;color:#10242f;height:34px;padding:0 16px;
  font-size:13px;font-weight:700;
}
/* B-14 — 오른쪽 정렬 두 줄은 눈이 매 줄 시작을 다시 찾는다. 왼쪽 정렬 · 낱말 안 자름 */
.footbar .note{font-size:10px;color:#a9bcc6;max-width:176px;line-height:1.4;text-align:left;word-break:keep-all}

/* 못 쓰게 됐을 때 — 조용히 못 쓰는 도구가 되지 않는다 (§3.4) */
.deadend{
  position:fixed;inset:0;z-index:99;background:rgba(16,36,47,.94);color:#eaf1f7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:40px;font-size:13px;line-height:1.7;text-align:center;
}
.deadend code{font-family:'Consolas',monospace;font-size:12px;color:#9fd0f0}
.spill{
  position:fixed;inset:40px;z-index:98;background:#10242f;color:#eaf1f7;padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.spill textarea{
  flex:1;background:#0b1a22;color:#cfdce6;border:1px solid #37474f;border-radius:3px;
  font-family:'Consolas',monospace;font-size:12px;padding:8px;resize:none;
}

/* 키보드 초점 — 표 안. 확정본 td.focus 규칙과 같은 값을 쓴다. 새 색을 안 쓴다 (§12.2) */
.og-cell.kfocus{outline:2px solid var(--og-focus-border);outline-offset:-2px}
.gridhost > div:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
.card .pick select{
  width:100%;border:1px solid var(--ui-line);border-radius:2px;background:#fff;
  padding:2px 4px;font-size:11px;margin-top:3px;
}

/* ── 살아 있는 :hover 를 쉬게 한다 ─────────────────────────────────────────
   실측(1280×800 크로뮴): 헤더 셀을 누르면 마우스가 그 위에 있으므로
   `.og-header-cell:hover{background:var(--og-header-hover-bg)}` 가 이겨,
   5걸음이 「헤더 바탕」 대신 마우스오버 값을 짚었다. 데이터 줄도 마찬가지라
   `--og-row-bg` 와 `--og-row-alt-bg` 는 **마우스로 영영 못 고르는 값**이 된다.
   누르려고 다가가는 그 손짓이 색을 바꾸면 무엇을 고르는지 알 수 없다.

   그래서 도구 안에서만 :hover 칠을 쉬게 한다. 마우스오버 색은 늘 세워 둔
   흉내 행(.og-b-hover)에서 누른다 (§12.3). 이 규칙은 도구 시트에 있고
   색인에 안 담기므로(ui/probe.js 거르개) 후보를 늘리지 않는다.
   ★ 값을 바꿔 칠하지 않는다 — 쉬게 한 자리에도 **그 자리의 원래 값**을 그대로 쓴다.
     그래야 흔들기가 진짜 값을 그대로 짚는다. */
.gridwrap .og-header-cell:hover,
.pv .og-header-cell:hover           { background: var(--og-header-bg); }
.gridwrap .og-row:hover,
.pv .og-row:hover                   { background: var(--cssb-rowbg, var(--og-row-bg)) !important; box-shadow: none; }
.gridwrap .og-row.og-b-hover:hover,
.pv .og-row.og-b-hover:hover        { background: var(--og-row-hover-bg) !important;
                                      box-shadow: inset var(--og-row-accent-width) 0 0 var(--og-row-accent-color); }
.gridwrap .og-row.og-selected:hover,
.pv .og-row.og-selected:hover       { background: var(--og-row-selected-bg) !important; }
.gridwrap .og-row.og-state-added:hover,
.pv .og-row.og-state-added:hover    { background: var(--og-row-added-bg) !important; }
.gridwrap .og-row.og-state-edited:hover,
.pv .og-row.og-state-edited:hover   { background: var(--og-row-edited-bg) !important; }
.gridwrap .og-row.og-state-removed:hover,
.pv .og-row.og-state-removed:hover  { background: var(--og-row-removed-bg) !important; }
.gridwrap .og-group-row:hover,
.pv .og-group-row:hover             { filter: none; }
.gridwrap .og-resize-handle:hover   { background: var(--og-primary); opacity: 0.7; }

/* 작은 벌은 줄이 딱 떨어지는 높이로 줄어든다(ui/preview.js 줄맞춤).
   남는 자리는 그 상자의 바탕이 보이게 둔다 — 확정본 .pv.dark .b 색 그대로 */
.pv .b{background:var(--ui-panel)}
.pv.dark .b{background:#10242f}

/* 작은 두 벌의 글자·여백 — 확정본이 그 자리를 10px 로 그렸다
   (.pv table{font-size:10px} · .pv thead th{height:15px;padding:0 5px}).
   진짜 그리드를 그 상자에 넣으니 같은 조건이 필요하다: 안 줄이면 머리가 34px 이라
   못박힌 40px 줄이 상자(97px)에 한 줄도 온전히 안 들어간다. **벌의 조건이지 사람이 정한 값이 아니다** — 파일에 안 나간다. */
.pv .og-header-cell{padding:0 5px !important;font-size:10px;height:15px !important;line-height:15px}
.pv .og-cell{padding:0 5px;font-size:10px}
.pv .og-sort-icon,.pv .og-resize-handle,.pv .og-filter-icon{display:none}
.pv .st{min-width:0;font-size:9px;line-height:13px}

/* ── 4단계 보완 (fix-a) ─────────────────────────────────────
   A-2 · A-3 · A-4 · A-5 · A-8 이 쓰는 것. 확정본 색을 새로 짓지 않는다 */

/* A-3 — 이름표 띠는 표 제목 줄에 앉는다. 표 안 필터 줄을 안 덮는다(D-23) */
.stagehead .x-nametag{
  background:#10242f !important;color:#eaf1f7 !important;
  border-radius:3px !important;font-size:11px !important;
  box-shadow:0 3px 10px rgba(16,36,47,.28);
}
.stagehead .x-nameline{background:#10242f !important}
/* 띠가 떠 있는 동안 안내 문장은 자리를 비운다. 자리는 그대로 둔다(겹치지 않게) */
.stagehead.tagged .hint{visibility:hidden}

/* A-5 — 표 안 굴러다니는 초점. 칸은 그리드 초점색, 띠 안 조각은 도구 색 */
.gridwrap .kfocus{outline:2px solid var(--ui-accent);outline-offset:-2px}
.og-cell.kfocus{outline:2px solid var(--og-focus-border);outline-offset:-2px}

/* A-5 — 이웃 체크는 진짜 체크칸이다. 모양은 확정본 .ck 그대로 */
input.ck{appearance:none;-webkit-appearance:none;margin:0;padding:0;cursor:pointer}
input.ck:checked{background:#37474f;border-color:#37474f;position:relative}
input.ck:checked::after{
  content:"";position:absolute;left:3px;top:0;width:3px;height:7px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
input.ck:disabled{cursor:default;opacity:.5}

/* A-8 — 행 높이 조절 카드. 다른 카드와 같은 상자다 */
.card.sizecard .nm{font-weight:700}
.card.sizecard .now{margin-left:19px;font-size:11px;font-variant-numeric:tabular-nums}
.card.sizecard .why{margin-top:2px}
/* 행 높이는 CSS 값만으로는 안 움직인다(D-18). 그 자리에서 필요한 한 줄을 바로 준다 */
.card.sizecard .oneline{display:flex;align-items:center;gap:6px;margin:4px 0 0 19px}
.card.sizecard .oneline code{
  flex:1;min-width:0;font-size:10.5px;background:#eef1f2;border:1px solid #dfe3e5;border-radius:3px;
  padding:3px 5px;overflow-x:auto;white-space:nowrap;color:#33424a;
}
.card.sizecard .oneline .tiny{
  height:20px;padding:0 7px;flex:0 0 auto;font-size:10.5px;
  border:1px solid var(--ui-line);background:#fff;border-radius:3px;
}

/* B-6 — 접힌 이웃을 펴는 줄. 확정본의 `+1` 자리다 */
.nbr .more{
  margin-top:3px;border:1px solid var(--ui-line);border-radius:2px;background:#fff;
  color:var(--ui-ink-dim);font-size:10px;height:17px;padding:0 7px;
}