/* 근거 칩 · 근거 뷰어 — DESIGN SYSTEM v0.2 규격 그대로
   원본: design/화면/근거뷰어/근거뷰어.html (Figma Frame 12 · node 2778-179) */

/* ── 근거 칩 ── */
.ev { display:inline-flex; align-items:center; gap:5px; vertical-align:1px;
      font-size:var(--fs-cap); font-weight:700; line-height:1.5;
      border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink-2);
      padding:1px 6px 1px 5px; cursor:pointer; font-family:inherit; white-space:nowrap; text-decoration:none; }
.ev:hover { border-color:var(--ink-3); color:var(--ink); background:var(--hover); text-decoration:none; }
.ev:focus-visible { outline:2px solid var(--opp); outline-offset:1px; }
.ev .dot { width:5px; height:5px; border-radius:50%; background:var(--ink-4); flex:none; }
.ev .n { font-variant-numeric:tabular-nums; color:var(--ink-3); font-weight:800; }
.ev.on { border-color:var(--ink); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.ev .cat { font-size:var(--fs-cap); font-weight:800; letter-spacing:.03em; color:var(--ink-3);
           border-right:1px solid var(--line); padding-right:5px; margin-right:1px; }
.ev.missing { border-style:dashed; color:var(--ink-3); cursor:not-allowed; }
.ev.missing .dot { background:transparent; border:1px dashed var(--ink-4); }
/* CAT 색 — 점에만. 배경은 칠하지 않는다(4색 파스텔은 신호 분류 전용) */
.d-약관{background:#111318} .d-별표{background:#4e535e} .d-상병{background:#2A78D6}
.d-수가{background:#1baf7a} .d-재료{background:#1baf7a} .d-약제{background:#a06a00}
.d-지표{background:#6f747d} .d-논문{background:#7b5cd6} .d-지침{background:#a06a00}
.d-뉴스{background:#eb6834} .d-소식지{background:#eb6834}

/* ── 버튼 (Viewer · Linked · Copy Link) ── */
.ebtn { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:var(--fs-cap); font-weight:700;
        min-height:24px; padding:3px 9px; border:1px solid var(--line); border-radius:6px;
        background:#fff; color:var(--ink-2); cursor:pointer; white-space:nowrap; text-decoration:none; }
.ebtn:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
.ebtn svg { width:12px; height:12px; flex:none; }
.ebtn[hidden] { display:none; }

/* ── 뷰어 ── */
.vw-scrim { position:fixed; inset:0; background:rgba(17,19,24,.22); z-index:40; display:none; }
.vw-scrim.open { display:block; }
.vw { position:fixed; top:0; right:0; bottom:0; width:min(620px,52vw); background:#fff;
      border-left:1px solid var(--line); z-index:41; display:none; flex-direction:column;
      box-shadow:-8px 0 30px rgba(17,19,24,.08); }
.vw.open { display:flex; }
.vw.full { top:24px; right:24px; bottom:24px; left:24px; width:auto;
           border:1px solid var(--line); border-radius:10px; }
.vw-h { padding:13px 16px 11px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vw-h .t { font-size:var(--fs-title); font-weight:800; letter-spacing:-.01em; min-width:0; }
.vw-h .sp { flex:1; }
.vw-x { width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:#fff;
        color:var(--ink-2); font:inherit; font-size:var(--fs-title); line-height:1; cursor:pointer; }
.vw-x:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* 식별줄 — 상품 / 특약 / 조문·코드 3칸 고정 */
/* 뷰어 빵부스러기 — 어느 화면·어느 걸음에서 눌러 들어왔는지 (Panel.pin) */
.vw-crumb { padding:8px 16px; border-bottom:1px solid var(--line-2);
            display:flex; align-items:baseline; gap:9px; font-size:var(--fs-cap); }
.vw-crumb .k { color:var(--ink-3); font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.vw-crumb .v { color:var(--ink); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; }

.vw-id { padding:9px 16px; border-bottom:1px solid var(--line-2); background:var(--hover);
         display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 16px; font-size:var(--fs-cap); }
.vw-id .f { min-width:0; }
.vw-id .f .k { color:var(--ink-3); font-weight:700; display:block; }
.vw-id .f .v { color:var(--ink); font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vw-id .f .v.none { color:var(--ink-4); }

/* 망 가용성 — 이 근거를 지금 볼 수 있나 / 내부망에서 볼 수 있나 */
.vw-net { padding:8px 16px 10px; border-bottom:1px solid var(--line-2); }
.vw-net[hidden] { display:none; }
.netbl { width:100%; border-collapse:collapse; font-size:var(--fs-cap); }
.netbl th { text-align:left; color:var(--ink-3); font-weight:800; padding:0 8px 4px 0; white-space:nowrap; }
.netbl th span { font-weight:700; color:var(--ink-4); }
.netbl td { padding:2px 8px 2px 0; vertical-align:top; }
.netbl td.w { color:var(--ink-2); font-weight:700; white-space:nowrap; }
.netbl td.ok b { color:#1baf7a; } .netbl td.no b { color:var(--crit); }
.netbl td span { color:var(--ink-3); }

.vw-tabs { display:flex; padding:0 16px; border-bottom:1px solid var(--line); }
.vw-tab { border:0; border-bottom:2px solid transparent; background:none; font:inherit;
          font-size:var(--fs-body); font-weight:700; color:var(--ink-3); padding:9px 12px; cursor:pointer; }
.vw-tab.on { color:var(--ink); border-bottom-color:var(--pt); }
.vw-tab:disabled { opacity:.35; cursor:default; }
.vw-tab .n { font-variant-numeric:tabular-nums; font-size:var(--fs-cap); color:var(--ink-3); margin-left:4px; }

.vw-b { flex:1; overflow:auto; padding:14px 16px 22px; }
.vw-b .vwcol { min-width:0; }
.vw.full .vw-b.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
.vw-b .kv { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0 0 14px; font-size:var(--fs-cap); }
.vw-b .kv dt { color:var(--ink-3); font-weight:700; white-space:nowrap; }
.vw-b .kv dd { margin:0; color:var(--ink-2); word-break:break-all; }
.vw-b .kv .warn, .vw-b .warn { color:var(--crit); font-weight:700; }

/* pane — 뷰어 안의 모든 덩어리는 이 틀 하나 */
.pane { border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.pane > summary, .pane > .ph { list-style:none; cursor:pointer; padding:9px 12px; background:var(--hover);
      border-bottom:1px solid var(--line-2); font-size:var(--fs-cap); font-weight:800;
      color:var(--ink-2); letter-spacing:.03em; display:flex; align-items:center; gap:8px; }
.pane > .ph { cursor:default; }
.pane > summary::-webkit-details-marker { display:none; }
.pane > summary::after { content:"▾"; margin-left:auto; color:var(--ink-3); }
.pane[open] > summary::after { content:"▴"; }
.pane pre { margin:0; padding:12px 13px; font:inherit; font-size:var(--fs-body); line-height:1.85; white-space:pre-wrap;
            color:var(--ink-2); max-height:none; overflow:auto; background:#fff; border:0; word-break:keep-all; }
.pane pre.mono { font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:var(--fs-body); line-height:1.75; }
.pane mark { background:#fff3cd; color:inherit; padding:0 1px; }
.pane table.sp { width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.pane table.sp th, .pane table.sp td { text-align:left; vertical-align:top; padding:6px 10px; border-top:1px solid var(--line-2); }
.pane table.sp th { font-size:var(--fs-cap); color:var(--ink-3); font-weight:800; letter-spacing:.05em;
                    text-transform:uppercase; border-top:0; white-space:nowrap; }
.pane table.sp td.d { color:var(--ink-2); }
.pane table.sp td.nowrap { white-space:nowrap; }
.pane table.sp tbody tr:hover { background:var(--hover); }
.pane .wrapx { overflow-x:auto; }

.pgnav { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line-2); }
.pgnav .lab { font-size:var(--fs-cap); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.pgnav .jump { width:64px; padding:3px 6px; border:1px solid var(--line); border-radius:5px; font:inherit; font-size:var(--fs-cap); }
.pg-img { min-height:180px; display:flex; align-items:center; justify-content:center;
          background:repeating-linear-gradient(45deg,#fbfbfc,#fbfbfc 8px,#f6f7f8 8px,#f6f7f8 16px);
          color:var(--ink-3); font-size:var(--fs-cap); text-align:center; padding:24px 16px; }
.pg-img img { max-width:100%; display:block; }

.ext { display:flex; gap:12px; align-items:flex-start; padding:12px; }
.ext .th { width:100px; height:68px; flex:none; border:1px solid var(--line); border-radius:6px;
           background:var(--hover); display:flex; align-items:center; justify-content:center;
           color:var(--ink-4); font-size:var(--fs-cap); text-align:center; }
.ext .m b { display:block; font-size:var(--fs-body); line-height:1.5; }
.ext .m .s { color:var(--ink-3); font-size:var(--fs-cap); margin-top:4px; }

.vw-b .asm { border-left:2px solid var(--ink-4); padding:2px 0 2px 10px; color:var(--ink-3);
             font-size:var(--fs-cap); margin:0 0 12px; }
.vw-b .asm b { color:var(--ink-2); }

.vw-f { border-top:1px solid var(--line); padding:10px 16px; display:flex; gap:8px; align-items:center;
        flex-wrap:wrap; font-size:var(--fs-cap); color:var(--ink-3); }
.vw-f .sp { flex:1; }

@media (max-width:900px){ .vw.full .vw-b.grid2 { display:block; } .vw { width:95vw; }
                          .vw-id { grid-template-columns:1fr; } }


/* ── 근거 라벨 — 상태는 DS 어휘로만 [근거: IDI 01 · DS v0.2] ──
   쓸 수 있나(판정)는 .lb 배지가 말하고, 칩은 Missing(점선) 상태만 쓴다.
   칩에 새 색을 더하면 CAT 점 11색과 경쟁해 라벨 체계가 무너진다. */

/* 뷰어 — 신빙성 판별 (이미 쓰고 계신 기준을 옮긴 것) */
.vw-rules { border:1px solid var(--line); border-radius:7px; margin:10px 0 0; overflow:hidden; }
.vw-rules .r { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
               padding:7px 11px; border-bottom:1px solid var(--line-2); font-size:var(--fs-cap); }
.vw-rules .r:last-child { border-bottom:none; }
.vw-rules .r .t { color:var(--ink-2); }
.vw-rules .r .t b { color:var(--ink); }
.vw-rules .r .s { font-size:var(--fs-cap); font-weight:800; white-space:nowrap; }
.vw-rules .s.pass { color:var(--ok, #0E8A5F); } .vw-rules .s.warn { color:var(--crit, #C0392B); }
.vw-rules .s.man  { color:var(--ink-3); }
.vw-drop { display:flex; gap:6px; align-items:center; margin:10px 0 0; flex-wrap:wrap; }
.vw-drop select { font:inherit; font-size:var(--fs-cap); padding:4px 7px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.vw-drop .done { font-size:var(--fs-cap); color:#C0392B; font-weight:700; }