/* app.css — 검증 웹의 전부.
 *
 * 토큰(--paper/--ink/--rule/--accent/--serif/--mono)과 표·배지·details 처리는
 * docs/검증지.html 에서 그대로 가져왔다. 이 저장소의 문서가 이미 그 모양이고,
 * 새 디자인 언어를 하나 더 만들 이유가 없다.
 *
 * 더한 것은 셋뿐이다.
 *   1) 판정 색 --bad (반려·면책). 검증지에는 '경고(--warn)'만 있어서
 *      "반려"와 "제외표(면책)"를 경고와 못 갈랐다. 이 화면에서는 갈라야 한다.
 *   2) 2단 고정 레이아웃(.split). 원문이 항상 옆에 있어야 하므로
 *      본문이 스크롤해도 오른쪽 쪽 이미지는 제자리에 있는다.
 *   3) 아래 고정 판정바(.verdictbar). 판정 버튼을 찾아 스크롤하지 않게.
 *
 * 규모 감각: 급부 1만 건. 스크롤 한 번, 클릭 한 번이 1만 번 반복된다.
 * 여백보다 밀도를 택한 곳이 여럿 있다.
 */

/* ── 토큰 ───────────────────────────────────────────────────────────── */
:root{
  --paper:#fbfbfc;--ink:#171a20;--rule:#dcdfe6;--dim:#5f6875;
  --accent:#27488c;--accent-soft:#e6ecf7;--warn:#9a5b16;--warn-soft:#f7eede;
  --ok:#2c6a51;--ok-soft:#e3f0ea;--bad:#a3372e;--bad-soft:#f8e8e6;
  --soft:#f1f3f8;--panel:#fff;
  --serif:ui-serif,"Iowan Old Style","Source Serif 4",Georgia,serif;
  --sans:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"D2Coding",monospace;
  --hdr:42px;      /* 머리줄 높이 */
  --bar:60px;      /* 판정바 높이 */
  --split:50%;     /* 2단 경계. 드래그하면 JS 가 여기를 바꾼다 */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101318;--ink:#e6e9ef;--rule:#2a2f39;--dim:#8d95a3;
  --accent:#82a3e2;--accent-soft:#1a2333;--warn:#d7a35d;--warn-soft:#2c2318;
  --ok:#74bd99;--ok-soft:#152620;--bad:#e08a7e;--bad-soft:#2e1a18;
  --soft:#171b22;--panel:#141820;}}
:root[data-theme="dark"]{
  --paper:#101318;--ink:#e6e9ef;--rule:#2a2f39;--dim:#8d95a3;
  --accent:#82a3e2;--accent-soft:#1a2333;--warn:#d7a35d;--warn-soft:#2c2318;
  --ok:#74bd99;--ok-soft:#152620;--bad:#e08a7e;--bad-soft:#2e1a18;
  --soft:#171b22;--panel:#141820;}

/* ── 바탕 ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* .pgview img 의 display:block 이 UA 의 [hidden]{display:none} 를 이겨서
   렌더 실패한 이미지의 깨진 아이콘이 안내문 위에 남았다. 여기서 못 박는다. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:24px;line-height:1.2}
h2{font-size:16px}
h3{font-size:14.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
input,textarea,select{font:inherit;color:inherit;background:var(--panel);
  border:1px solid var(--rule);border-radius:2px;padding:5px 8px}

/* ── 머리줄 ─────────────────────────────────────────────────────────── */
.hdr{height:var(--hdr);flex:none;display:flex;align-items:center;gap:14px;
     padding:0 14px;border-bottom:1px solid var(--rule);background:var(--panel);
     position:sticky;top:0;z-index:30}
.hdr .brand{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
     color:var(--dim);white-space:nowrap}
.hdr nav{display:flex;gap:12px;font-size:13px}
.hdr nav a[aria-current]{color:var(--ink);font-weight:600;
     box-shadow:inset 0 -2px 0 var(--accent)}
.hdr .grow{margin-left:auto}
.hdr .pos{font:600 12px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;
     white-space:nowrap}
.hdr button.icon{font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--dim);
     border:1px solid var(--rule);border-radius:2px;padding:5px 8px}
.hdr button.icon:hover{color:var(--ink);border-color:var(--dim)}

/* ── 낱장(대시보드·큐·상품) ─────────────────────────────────────────── */
.page{max-width:1180px;margin:0 auto;padding:26px 16px 80px;
      display:flex;flex-direction:column;gap:26px}
.page.wide{max-width:none}
.lede{color:var(--dim);margin:0;max-width:72ch;font-size:13.5px}

/* ── 배지 ───────────────────────────────────────────────────────────── */
.badge{display:inline-block;font:600 10.5px/1.35 var(--mono);letter-spacing:.06em;
       padding:2px 6px;border-radius:2px;white-space:nowrap;
       background:var(--soft);color:var(--dim);border:1px solid transparent}
.badge.ok  {background:var(--ok-soft);   color:var(--ok);    border-color:var(--ok)}
.badge.bad {background:var(--bad-soft);  color:var(--bad);   border-color:var(--bad)}
.badge.warn{background:var(--warn-soft); color:var(--warn);  border-color:var(--warn)}
.badge.info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.badge.flat{border-color:var(--rule)}
.badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}

/* 판정 점 — 큐에서 세로로 훑는 표시. 색만으로 구분하지 않게 글자도 넣는다 */
.dot{display:inline-block;width:1.35em;text-align:center;font:600 11px/1 var(--mono)}
.dot.ok{color:var(--ok)} .dot.ng{color:var(--bad)} .dot.hold{color:var(--warn)}
.dot.open{color:var(--rule)}

/* ── 표 ─────────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto;overscroll-behavior-x:contain}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:5px 9px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:600 10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
   border-bottom:1px solid var(--ink);white-space:nowrap;background:var(--panel);
   position:sticky;top:0;z-index:1}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.mono,.mono{font-family:var(--mono)}
td.dim,.dim{color:var(--dim)}
.nowrap{white-space:nowrap}
td.wrap{overflow-wrap:anywhere}
tbody tr:hover{background:var(--soft)}
code{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:2px}

/* ── 판·묶음 ────────────────────────────────────────────────────────── */
.card{border:1px solid var(--rule);border-radius:3px;background:var(--panel);overflow:hidden}
.card>h2,.card>.chd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
     padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--panel)}
.card>.cbody{padding:14px}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
        background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:0}
.ledger div{background:var(--panel);padding:11px 13px}
.ledger dt{margin:0;font:600 10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.ledger dd{margin:0;font-family:var(--serif);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.ledger dd small{font:400 11px/1 var(--sans);color:var(--dim);margin-left:4px}

/* 진행률 — 막대 하나. 그 이상 넣지 않는다 */
.meter{height:10px;background:var(--soft);border:1px solid var(--rule);border-radius:2px;
       overflow:hidden;display:flex}
.meter i{display:block;height:100%}
.meter i.ok{background:var(--ok)} .meter i.ng{background:var(--bad)} .meter i.hold{background:var(--warn)}

details{border-top:1px solid var(--rule)}
details>summary{cursor:pointer;font:600 12.5px/1.6 var(--sans);color:var(--accent);
       padding:8px 0;display:flex;align-items:center;gap:8px}
details>summary::marker{color:var(--dim)}
details[open]>summary{border-bottom:1px solid var(--rule);margin-bottom:8px}
summary .n{margin-left:auto;font:600 11px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}

pre.raw{margin:0;font:12px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
        background:var(--soft);padding:11px 13px;border-radius:2px;max-height:340px;overflow:auto}

/* 알림 — 조용히 빈 칸으로 두는 대신 이유를 적는 자리 */
.note{margin:0;font-size:12.5px;padding:9px 12px;border-radius:0 2px 2px 0;
      background:var(--soft);border-left:2px solid var(--dim);color:var(--dim)}
.note b{color:var(--ink)}
.note.warn{background:var(--warn-soft);border-left-color:var(--warn);color:var(--warn)}
.note.warn b{color:var(--warn)}
/* 숫자 한 자리만 경고색으로 세운다. 큐의 코드 칸에서 "보장 코드 0인데
   제외 코드는 있다" 를 배지 없이 표시하는 자리다 — 배지를 쓰면 한 줄에
   배지가 너무 많아져 플래그 칸과 구분이 안 된다. */
.warnfg{color:var(--warn)}
.note.bad{background:var(--bad-soft);border-left-color:var(--bad);color:var(--bad)}
.note.bad b{color:var(--bad)}
.note.info{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent)}
.note.info b{color:var(--accent)}

/* ── 큐 ─────────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .chip{font:600 11px/1 var(--mono);padding:6px 9px;border:1px solid var(--rule);
     border-radius:2px;color:var(--dim);white-space:nowrap}
.filters .chip[aria-current]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.filters .chip b{font-variant-numeric:tabular-nums;margin-left:5px;color:inherit}
.filters form{display:flex;gap:6px;margin-left:auto}
.filters input[type=search]{width:min(320px,42vw)}

table.queue{table-layout:fixed}
table.queue td{padding:7px 9px}
table.queue tr.row{cursor:pointer}
table.queue tr.row.cur{background:var(--accent-soft);
     box-shadow:inset 3px 0 0 var(--accent)}
table.queue tr.row.cur:hover{background:var(--accent-soft)}
.qname{display:block;font-weight:600;font-size:13.5px;line-height:1.35;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsub{display:block;color:var(--dim);font-size:11.5px;line-height:1.4;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qamt{font-family:var(--mono);font-size:11.5px;line-height:1.4;
     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager{display:flex;gap:10px;align-items:center;font:600 12px/1 var(--mono);
     color:var(--dim);font-variant-numeric:tabular-nums}
.pager a{padding:6px 10px;border:1px solid var(--rule);border-radius:2px}

/* ── 급부 상세: 2단 ─────────────────────────────────────────────────── */
/* 왼쪽만 스크롤한다. 오른쪽 원문 쪽은 제자리에 남아야 한다 —
   "원문이 항상 옆에 있다" 는 조건은 스크롤 뒤에도 지켜져야 하기 때문이다. */
body.detail{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.split{flex:1;min-height:0;display:grid;
       grid-template-columns:var(--split) 6px minmax(0,1fr)}
.pane{min-width:0;overflow:auto;overscroll-behavior:contain}
.pane.left{padding:16px 16px 26px;
           display:flex;flex-direction:column;gap:14px;border-right:0}
/* 세로 flex 안에서 기본 flex-shrink:1 이 표를 짓눌렀다(금액 2행이 0행처럼 보였다).
   왼쪽 칸은 스크롤하는 칸이므로 자식은 제 높이를 그대로 가져야 한다. */
.pane.left>*{flex:none}
.gutter{cursor:col-resize;background:var(--rule);opacity:.55}
.gutter:hover,.gutter.drag{opacity:1;background:var(--accent)}

.covhead{display:flex;flex-direction:column;gap:6px}
.covhead .meta{font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.covhead .meta b{color:var(--ink);font-weight:600}
.keys{font:11px/1.5 var(--mono);color:var(--dim);word-break:break-all}

.trigger{margin:0;font-size:13.5px;line-height:1.65;background:var(--soft);
     padding:11px 13px;border-left:2px solid var(--accent);border-radius:0 2px 2px 0;
     overflow-wrap:anywhere}

/* 금액 표 — 값 칸이 비어 있는 것이 정상인 경우가 있다(산식). 그걸 배지로 말한다 */
td.amt{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.amt .won{font-size:11px;color:var(--dim);display:block}
tr.amb{background:var(--warn-soft)}
tr.amb:hover{background:var(--warn-soft)}

/* 질병코드 — 제외표는 색과 라벨을 확실히 다르게 한다.
   같은 코드가 보장이냐 면책이냐가 여기서 갈리므로 헷갈리면 안 된다 */
.ctab{border:1px solid var(--rule);border-radius:3px;margin-bottom:8px;overflow:hidden}
.ctab>summary{padding:8px 11px;background:var(--ok-soft);color:var(--ok);border:0}
.ctab[open]>summary{border-bottom:1px solid var(--rule);margin:0}
.ctab.excl{border-color:var(--bad)}
.ctab.excl>summary{background:var(--bad-soft);color:var(--bad)}
.ctab .cwrap{max-height:360px;overflow:auto}
.ctab table{font-size:12px}
.ctab.excl tbody tr{background:linear-gradient(to right,var(--bad-soft) 0 3px,transparent 3px)}
td.disease{overflow-wrap:anywhere;cursor:pointer}
td.disease>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
td.disease.open>span{-webkit-line-clamp:unset;display:block}

/* ── 원문 쪽 ────────────────────────────────────────────────────────── */
.pane.right{display:flex;flex-direction:column;overflow:hidden;background:var(--soft)}
.pgbar{flex:none;display:flex;align-items:center;gap:7px;padding:7px 10px;
       border-bottom:1px solid var(--rule);background:var(--panel);flex-wrap:wrap}
.pgbar button,.pgbar a.btn{font:600 11px/1 var(--mono);border:1px solid var(--rule);
       border-radius:2px;padding:5px 8px;color:var(--dim)}
.pgbar button:hover,.pgbar a.btn:hover{color:var(--ink);border-color:var(--dim);text-decoration:none}
.pgbar .pno{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.pgbar .hl{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
       white-space:nowrap;flex:1;min-width:80px}
.pgbar .hl b{color:var(--accent)}
.pgview{flex:1;min-height:0;overflow:auto;padding:10px;text-align:center;background:var(--soft)}
.pgview img{width:calc(100% * var(--zoom,1));max-width:none;display:block;margin:0 auto;
       border:1px solid var(--rule);background:#fff;cursor:zoom-in}
.pgview img.zoomed{cursor:zoom-out}
.pgview .miss{max-width:46ch;margin:40px auto;text-align:left}

/* ── 판정바 ─────────────────────────────────────────────────────────── */
.verdictbar{flex:none;height:var(--bar);display:flex;align-items:center;gap:10px;
     padding:0 14px;border-top:1px solid var(--rule);background:var(--panel);
     position:sticky;bottom:0;z-index:20}
.verdictbar .spread{font-size:12.5px;color:var(--dim);white-space:nowrap}
.verdictbar .spread b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.verdictbar input[name=note]{flex:1;min-width:80px}
.vflash{font:600 12px/1.4 var(--sans);padding:6px 10px;border-radius:2px;white-space:nowrap;
     background:var(--accent-soft);color:var(--accent)}
.vflash.bad{background:var(--bad-soft);color:var(--bad)}
.vflash.warn{background:var(--warn-soft);color:var(--warn)}
.verdictbar .vb{font:600 12.5px/1 var(--sans);border:1px solid var(--rule);border-radius:2px;
     padding:9px 14px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.verdictbar .vb kbd{font:600 10px/1 var(--mono);opacity:.65}
.verdictbar .vb.ok {border-color:var(--ok); color:var(--ok)}
.verdictbar .vb.ng {border-color:var(--bad);color:var(--bad)}
.verdictbar .vb.hold{border-color:var(--warn);color:var(--warn)}
.verdictbar .vb.ok:hover {background:var(--ok-soft)}
.verdictbar .vb.ng:hover {background:var(--bad-soft)}
.verdictbar .vb.hold:hover{background:var(--warn-soft)}
.verdictbar .vb[aria-pressed=true]{box-shadow:inset 0 0 0 1px currentColor}
.verdictbar form{display:contents}
#tokenbox{display:flex;gap:6px;align-items:center}
#tokenbox input{width:150px}

/* ── 단축키 도움말 ──────────────────────────────────────────────────── */
#help{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;
      display:none;align-items:center;justify-content:center;padding:20px}
#help[open-panel]{display:flex}
#help .box{background:var(--panel);border:1px solid var(--rule);border-radius:3px;
      padding:20px 22px;max-width:520px;width:100%;max-height:80vh;overflow:auto}
#help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;
      font-size:13px;align-items:baseline}
#help dt{font:600 11.5px/1.5 var(--mono);color:var(--accent);white-space:nowrap}
#help dd{margin:0;color:var(--dim)}

/* ── 상품·판 ────────────────────────────────────────────────────────── */
.unit>summary{padding:9px 12px;background:var(--panel)}
.unit{border:1px solid var(--rule);border-radius:3px;margin-bottom:7px;overflow:hidden}
.unit[open]>summary{background:var(--soft)}
.unit .uname{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit .umeta{font:600 11px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.unit .meter{width:70px;flex:none}

/* ── 좁은 화면: 위아래로 쌓는다 ─────────────────────────────────────── */
/* 1100px 아래에서는 2단을 포기하고 쌓는다. 원문이 옆이 아니라 아래가 되지만
   가로로 밀리는 것보다는 낫다. 표는 각자 .scroll 안에서만 가로로 움직인다. */
@media (max-width:1099px){
  body.detail{height:auto;overflow:visible;display:block}
  .split{display:block}
  .pane{overflow:visible}
  .pane.left{padding-bottom:16px}
  .pane.right{height:min(78vh,780px);border-top:1px solid var(--rule)}
  /* 쪽 이미지가 없으면 높이를 잡아 둘 이유가 없다 — 쌓인 화면에서 빈 화면 한 장이 된다 */
  .pane.right.nopage{height:auto}
  .gutter{display:none}
  .verdictbar{position:fixed;left:0;right:0;bottom:0;flex-wrap:wrap;height:auto;
       padding:8px 12px;gap:8px}
  body.detail{padding-bottom:120px}
}
@media (max-width:700px){
  .verdictbar .spread{width:100%;order:-1}
  .filters form{margin-left:0;width:100%}
  .filters input[type=search]{flex:1;width:auto}
}
@media print{.hdr,.verdictbar,.gutter,#help{display:none}}

/* ── 약관 단위 (/u · /u/{ukey}) ─────────────────────────────────────── */
/* 조문 슬롯 7칸. 목록에서 세로로 훑히는 것이 목적이라 폭을 고정하고 등폭으로 둔다.
   빈 칸을 지우지 않고 흐리게 남기는 것이 이 표시의 전부다 — 채운 것만 보여주면
   "파서가 못 찾은 것"과 "원래 없는 것"이 화면에서 구별되지 않는다. */
.slots{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.slots i{display:inline-block;width:15px;height:16px;line-height:16px;text-align:center;
     font:600 10px/16px var(--mono);font-style:normal;border-radius:2px;
     border:1px solid var(--rule);color:var(--rule);background:transparent}
.slots i.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.slots b{margin-left:5px;font:600 10.5px/1 var(--mono);color:var(--dim);
     font-variant-numeric:tabular-nums}

/* 조문 원문 7칸. 접힌 채로 두고 펼치면 원문이 나온다.
   빈 칸은 흐리게 두되 **줄 자체는 남긴다**(위와 같은 이유다). */
.arts{display:flex;flex-direction:column;gap:0}
.art{border-top:1px solid var(--rule)}
.art:first-child{border-top:0}
/* summary 를 display:flex 로 두면 크롬이 ::marker 를 그리지 않는다(기존 화면도
   그렇다). 조문 칸은 '눌러서 펼치는 것'이라는 사실 자체가 이 화면의 사용법이라
   삼각형을 직접 그려 준다 — 비어 있는 칸도 눌러 볼 수 있어야 한다. */
.art>summary{color:var(--ink);gap:9px;padding-left:2px}
.art>summary::before{content:"▸";font:10px/1 var(--mono);color:var(--dim);
     flex:none;width:11px;transition:transform .12s}
.art[open]>summary::before{transform:rotate(90deg)}
.art>summary code{font-size:10.5px}
.art.empty>summary{color:var(--dim)}
.art.empty>summary .n{color:var(--dim)}
.art>summary .n{margin-left:auto}
.art pre.raw{max-height:min(60vh,560px);margin-bottom:10px}

/* 단위 상세의 원문 쪽 — 급부 상세와 달리 2단이 아니라 맨 아래 한 칸이다.
   .pgview 는 flex 자식으로 크기를 받게 돼 있으므로 여기서 높이를 못 박는다. */
.unitpage{display:flex;flex-direction:column}
.unitpage .pgview{height:min(72vh,860px);flex:none}

/* 목록의 상품 칸은 두 줄(상품명 + 판매기간)이다. 줄바꿈이 표를 흔들지 않게 묶는다 */
table.queue td .mono{font-variant-numeric:tabular-nums}

/* 좁은 화면: 원문 쪽을 낮춘다. 표는 각자 .scroll 안에서만 가로로 움직인다 */
@media (max-width:899px){
  .unitpage .pgview{height:min(60vh,560px)}
  .slots i{width:13px}
}

/* 단위 상세의 지표 타일 6개. `.ledger` 는 칸 사이 선을 **컨테이너 배경**(--rule)
   으로 그린다 — 타일이 딱 떨어지는 대시보드에서는 문제가 없지만, 여기서는 폭에
   따라 마지막 줄에 빈 칸이 남아 그 배경이 회색 덩어리로 보인다(900px 에서 확인).
   이 화면에서만 선을 타일 자신이 그리게 옮긴다. box-shadow 라 자리를 안 먹고,
   컨테이너의 overflow:hidden 이 바깥쪽 선을 잘라 준다. */
.uview .ledger{background:var(--panel);gap:0}
.uview .ledger div{box-shadow:1px 0 0 var(--rule),0 1px 0 var(--rule)}