/* 앱 전용 — 베이스는 mi-base.css */
/* ── LNB(왼쪽 세로 내비) + 얇은 헤더 ─────────────────────────────────────
   시안(DB Web_UI) 대로 — 밝은 회색 판, 본문은 흰 면. 색은 쓰지 않는다(모노톤).
   현재 위치 = 흰 알약(테두리 + 아주 옅은 그림자). 2depth 는 왼쪽 얇은 선에 걸린 들여쓴 목록이고,
   그 내용은 워크플로우의 걸음(프로세스)이다 — 지금 보고 있는 걸음만 진해진다. */
:root{
  --lnb-w:208px;
  --lnb-bg:#F2F3F4;      /* 판 */
  --lnb-line:#E2E4E6;    /* 판 경계 · 2depth 레일 */
  --lnb-ink:#2B2F33;     /* 1depth 글자 */
  --lnb-ink-2:#5F656B;   /* 2depth 글자 */
  --lnb-pill:#fff;       /* 현재 위치 알약 */
}
.lnb{position:fixed;left:0;top:0;bottom:0;width:var(--lnb-w);background:var(--lnb-bg);
     border-right:1px solid var(--lnb-line);display:flex;flex-direction:column;
     padding:14px 10px 20px;z-index:6;overflow-y:auto}

.lnb-brand{display:block;padding:2px 10px 16px;color:var(--lnb-ink);font-weight:800;font-size:calc(var(--fs-title) * 1.4);letter-spacing:-.015em;text-decoration:none;white-space:nowrap}

.lnb nav{display:flex;flex-direction:column;gap:1px}
.lnb nav > a{display:block;padding:8px 11px;border-radius:9px;border:1px solid transparent;color:var(--lnb-ink);font-size:var(--fs-title);line-height:1.35;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnb nav > a:hover{color:#111318}
.lnb nav > a.on{font-weight:800;color:#111318}

/* 2depth — 워크플로우의 걸음(프로세스). 왼쪽 얇은 선에 걸린다 */
.lnb .sub{display:flex;flex-direction:column;margin:3px 0 5px 24px;padding:1px 0;border-left:1px solid var(--lnb-line)}
.lnb .sub a{position:relative;display:block;padding:5px 6px 5px 14px;border-radius:6px;color:var(--lnb-ink-2);font-size:var(--fs-body);line-height:1.4;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnb .sub a .dot{position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;border:1px solid #B7BCC2;background:var(--lnb-bg)}
.lnb .sub a .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnb .sub a:hover{color:var(--lnb-ink)}
.lnb .sub a:hover .dot{border-color:var(--lnb-ink-2)}
.lnb .sub a.on{color:var(--lnb-ink);font-weight:800}
.lnb .sub a.on .dot{background:var(--lnb-ink);border-color:var(--lnb-ink)}

.topbar{display:flex;align-items:center;gap:14px;padding:9px 26px 9px calc(var(--lnb-w) + 26px);
     border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5;min-height:41px}
/* last updated — 셋 중 최신을 세우고, 호버·포커스면 셋을 담당자와 함께 펼친다 */
.topbar .pgname{font-size:var(--fs-title);font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.topbar .lupd{position:relative;font-size:var(--fs-cap);color:var(--ink-2);white-space:nowrap;cursor:default}
.topbar .lupd .k{letter-spacing:.03em}
.topbar .lupd b{margin-left:5px;font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink);
     border-bottom:1px dotted var(--ink-4)}
.topbar .lupd-pop{position:absolute;right:0;top:calc(100% + 7px);display:none;z-index:9;
     min-width:216px;background:#fff;border:1px solid var(--line);border-radius:7px;
     box-shadow:0 6px 22px rgba(17,19,24,.11);padding:7px 0}
.topbar .lupd:hover .lupd-pop,.topbar .lupd:focus-within .lupd-pop{display:block}
.topbar .lupd-pop .r{display:grid;grid-template-columns:1fr auto auto;gap:0 12px;align-items:baseline;
     padding:5px 12px;font-size:var(--fs-cap)}
.topbar .lupd-pop .l{color:var(--ink-2);font-weight:700}
.topbar .lupd-pop .d{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink)}
.topbar .lupd-pop .w{color:var(--ink-3);min-width:62px;text-align:right}
.topbar .lupd-pop .w .n{display:block}

/* 본문은 왼쪽에 붙이고 화면 폭을 다 쓴다(mi-base 의 1536px 상한을 여기서 푼다).
   글 문단만 읽기 좋은 폭(80자)에서 끊는다 — 표·카드는 넓어지고, 글줄은 늘어지지 않게. */
.shell{padding-left:calc(var(--lnb-w) + 26px);padding-right:26px;max-width:none}
.shell .lead{max-width:80ch}
@media (max-width:820px){
  /* 좁아도 LNB 는 왼쪽에 붙어 있는다 — 폭만 줄인다 */
  :root{ --lnb-w:150px }
  .lnb{padding:12px 7px 18px}
  .lnb nav > a{padding:7px 9px}
  .lnb .sub{margin-left:18px;padding-left:0}
}
.spacer{flex:1}
.meta{font-size:var(--fs-cap);color:var(--ink-3)}
.pg-title{font-size:var(--fs-display);margin:0 0 6px}
.lead{color:var(--ink-2);margin:0 0 14px}
code{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-cap);background:#f4f5f7;padding:0 4px;border-radius:3px}
.bar{display:flex;gap:8px;align-items:center;margin:8px 0}
.bar input[type=search]{flex:1;min-width:240px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size: var(--fs-title)}
.bar select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size: var(--fs-body)}
.btn{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:var(--fs-body);color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 14px}
.chip{border:1px solid var(--line);border-radius:14px;padding:2px 9px;background:#fff;cursor:pointer;font-size: var(--fs-body)}
.chip small{color:var(--ink-3)} .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .chip.on small{color:#ddd}
.chip.ghost{border-style:dashed}
.cols{display:grid;grid-template-columns:minmax(300px,1fr) minmax(420px,1.6fr);gap:22px;align-items:start}
.col h2{font-size:var(--fs-title);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.empty{color:var(--ink-3);padding:18px 0}
/* 회사×특약 표 */
.mx .ins{border-bottom:1px solid var(--line-2);padding:8px 0}
.mx .ins-h{display:flex;align-items:center;gap:8px;cursor:pointer}
.mx .ins-h b{font-size:var(--fs-title)} .mx .n{font-weight:800;color:var(--opp)}
.mx .unit{display:flex;gap:8px;padding:3px 0 3px 14px;cursor:pointer;border-left:2px solid transparent}
.mx .unit:hover,.mx .unit.on{border-left-color:var(--pt);background:var(--hover)}
.mx .unit .t{flex:1} .mx .unit .k{font-size:var(--fs-cap);color:var(--ink-3)} .mx .unit .pg{font-size:var(--fs-cap);color:var(--ink-3);white-space:nowrap}
.mx .zero{color:var(--ink-4)}
/* 조문 hits */
.hit{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0 0 8px;cursor:pointer}
.hit:hover{background:var(--hover)} .hit.on{border-color:var(--pt)}
.hit .h{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;margin-bottom:3px}
.hit .h b{font-size:var(--fs-title)}
.hit .path{font-size:var(--fs-cap);color:var(--ink-3)}
.hit .body{white-space:pre-wrap;max-height:9.5em;overflow:hidden;color:var(--ink-2);font-size: var(--fs-body)}
.hit mark{background:#fff1a8;padding:0 1px}
.hit .src{font-size:var(--fs-cap);color:var(--ink-3);margin-top:4px}
.tables .hit{border-style:dashed}
/* 출처 패널 → 근거 뷰어로 대체 (evidence.css) */
/* 뉴스 */
.tbl{width:100%;border-collapse:collapse;font-size: var(--fs-body)}
.tbl th{text-align:left;font-size:var(--fs-cap);color:var(--ink-3);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:5px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr.row{cursor:pointer} .tbl tr.row:hover{background:var(--hover)}
.tbl td.d{white-space:nowrap;color:var(--ink-2)} .tbl td.o{white-space:nowrap} .tbl td.q{font-size:var(--fs-cap);color:var(--ink-3)}
.pager{display:flex;gap:10px;align-items:center;margin:10px 0}
/* 현황 카드 */
.card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.card .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.card .kv{font-size:var(--fs-body);margin-bottom:6px}
.card .mini{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:var(--fs-cap);color:var(--ink-2)}
.card .mini.code{max-height:180px;overflow:auto}
.card .mini span{white-space:nowrap}

/* 담보 라이브러리 */
.tbl.lib th.own, .tbl.lib td.own { background: rgba(0,122,255,.06); }
.tbl.lib td.cell { text-align: center; }
.tbl.lib td.cell.ok .lnk { color: #0a7; font-weight: 600; }
.tbl.lib td.cell.sim .lnk { color: #b80; }
.tbl.lib tr.gap td.nm { border-left: 3px solid #c33; }
.tbl.lib td.bt { white-space: nowrap; color: #666; }
.tbl.lib .lnk { background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; font: inherit; }
.tbl.lib .lnk.small { font-size: .85em; }
.unit { border-top: 1px solid #ddd; padding: .5em 0; }
a.code { text-decoration: none; margin-right: .2em; } a.code.nolink code { opacity: .55; }
.lb.ok { background: #dff5ea; } .lb.dim { opacity: .6; }
.tbl.lib td.cell.cl .lnk { color: #06c; }
.lb.cl { background: #e3eefc; }
.lb.crit { background: #fde2e2; color: #900; } .lb.warn { background: #fff3cd; }

/* 리서치 카드 — 워크플로 버튼: 특약명 옆, 한화 오렌지 */
:root{--hw-orange:#F37321}
.card .ch .ttl{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.btn.wf{font-size:var(--fs-body);line-height:1.2;padding:4px 11px;border:1px solid var(--hw-orange);border-radius:999px;background:var(--hw-orange);color:#fff;
        text-decoration:none;display:inline-flex;align-items:center;font-weight:700;white-space:nowrap;vertical-align:middle}
.btn.wf:hover{background:#fff;color:var(--hw-orange)}

/* 근거 인용 — 칩으로 올리기 전(스크립트 로드 전) 기본 표시. 칩 규격은 evidence.css */
a.cite:not(.ev){color:var(--hw-orange);text-decoration:underline dotted;cursor:pointer}
a.cite:not(.ev):hover{text-decoration:underline}

/* 현황 / 발굴 분기 탭 */
.viewtabs{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.viewtabs .vt{border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;background:#fff;font:inherit;
  font-size:var(--fs-body);font-weight:700;color:var(--ink-3);padding:6px 12px;cursor:pointer}
.viewtabs .vt.on{color:var(--ink);border-color:var(--line);border-bottom-color:var(--pt);background:var(--hover)}
.viewtabs .meta{margin-left:8px}

/* 상품안 카드 — 내보내기 버튼 */
.card-export{display:inline-flex;gap:6px;margin-left:4px}

/* 위계 규칙 — 배지는 판정 하나, 속성은 회색 한 줄. 크기가 아니라 굵기·색으로 나눈다 */
.hit .attrs{margin-left:7px;color:var(--ink-3);font-size:var(--fs-cap);font-weight:400}
.hit .attrs .crit-t{color:var(--crit,#C0392B);font-weight:700}
.untitled{color:var(--ink-3);font-weight:600}
.chip.folded{display:none}

/* ── 필터 드롭다운 ─────────────────────────────────────────
   분야가 212개다. 칩으로 펼치면 첫 화면이 목록에 덮인다 —
   접었다 펴는 대신 드롭다운 한 칸에 넣고 안에서 이름으로 좁혀 고르게 한다. */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 14px}
.dd{position:relative}
.dd-t{font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:7px;padding:6px 12px;min-height:30px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.dd-t:hover{border-color:var(--ink-3);color:var(--ink)}
.dd-t .dd-v{font-weight:700;color:var(--ink)}
.dd-t .dd-x{color:var(--ink-3);font-size:var(--fs-cap)}
.dd.sel .dd-t{border-color:var(--ink-3)}
.dd.on .dd-t{border-color:var(--ink);color:var(--ink)}
.dd-p{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:270px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(17,19,24,.12);padding:6px}
.dd-p.wide{min-width:340px}
.dd-q{width:100%;font:inherit;font-size:var(--fs-body);padding:6px 8px;margin-bottom:4px;
  border:1px solid var(--line);border-radius:6px}
.dd-list{max-height:288px;overflow:auto}
.dd-o{display:flex;align-items:baseline;gap:8px;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:var(--fs-body)}
.dd-o:hover{background:var(--hover)}
.dd-o input{margin:0;accent-color:var(--ink);flex:none}
.dd-o>span{flex:1}
.dd-o small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.dd-o small.h{display:block;color:var(--ink-3);font-size:var(--fs-cap);margin-top:1px}
.dd-o.hide{display:none}
.dd-none{color:var(--ink-3);font-size:var(--fs-cap);padding:10px 7px}
.dd-f{display:flex;justify-content:space-between;gap:8px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line-2)}
.dd-f .btn{padding:4px 10px;font-size:var(--fs-cap)}
.dd-hint{font-size:var(--fs-cap);color:var(--ink-3);padding:2px 7px 6px}
.dd-a{width:100%;font:inherit;font-size:var(--fs-body);color:var(--ink);background:#fff;border:0;text-align:left}
.dd-a:hover{background:var(--hover)}
.dd-a>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 대시보드 — 왼쪽 데이터셋 표 : 오른쪽 상세 패널 = 2 : 1 ─────────
   왼쪽은 '무엇이 몇 건인가' 여섯 줄짜리 색인, 오른쪽은 고른 하나의 메타와 하위 갈래.
   데이터셋 이름만 4단 스케일 밖의 크기를 쓴다(13px × 1.4 = 18.2px) — 표의 최상위 레벨을 눈에 먼저 걸리게.
   나머지 위계는 굵기·색으로만 준다. 막대는 장식이라 --ink-4 계열. */
.meta.sum{margin:0 0 8px}
/* 좁은 창에서는 두 칸을 못 버틴다 — 최소 폭을 요구하면 창 밖으로 밀려 오른쪽이 잘린다.
   min-width:0 으로 칸이 줄어들 수 있게 하고, 1080px 아래에서는 아예 한 칸으로 쌓는다. */
.cols.ds-split{grid-template-columns:minmax(0,676px) minmax(0,1fr);gap:22px}
.cols.ds-split > *{min-width:0}
@media (max-width:1024px){
  .cols.ds-split{grid-template-columns:minmax(0,1fr);gap:14px}
  .ds-panel{position:static;max-height:none;margin-left:0}   /* 아래로 쌓이면 따라다니지도, 밀려나지도 않는다 */
}
/* 숫자와 단위를 한 줄에 붙여 두니 「1,362,197 청크」가 칸을 넘어 옆 칸을 밟았다(글꼴마다 폭이 달라
   칸 너비를 아무리 잡아도 재발한다). 단위를 숫자 아래 제 줄로 내려 겹칠 자리를 아예 없앤다. */
.tbl.ds{table-layout:fixed;margin:2px 0 4px;width:704px;max-width:100%}
.tbl.ds th.n,.tbl.ds td.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl.ds td.n b{display:block;line-height:1.15}
.tbl.ds .c-nm{width:208px} .tbl.ds .c-n1{width:116px} .tbl.ds .c-n2{width:140px}
.tbl.ds .c-rt{width:112px} .tbl.ds .c-d{width:128px}
.tbl.ds th,.tbl.ds td{padding-left:10px;padding-right:10px}
/* 클래스 이름은 .bar 를 쓰지 말 것 — 뉴스 필터 줄의 .bar{display:flex} 가 표 칸을 먹어 행이 깨진다 */
.tbl.ds th.rt,.tbl.ds td.rt{padding-left:20px}   /* 수집·청크 묶음과 비중·최근 묶음을 한 칸 띄운다 */
.tbl.ds td.d{color:var(--ink-2);white-space:nowrap}
.tbl.ds tr.ds{cursor:pointer}
.tbl.ds tr.ds td{padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl.ds tr.ds td.nm{border-left:2px solid transparent}
.tbl.ds tr.ds:hover td{background:var(--hover)}
.tbl.ds tr.ds:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tbl.ds tr.ds.on td{background:var(--hover)}
.tbl.ds tr.ds.on td.nm{border-left-color:var(--ink)}
.tbl.ds tr.ds td.nm b{font-size:calc(var(--fs-title) * 1.4)}   /* 데이터셋 이름 = 이 표의 최상위 레벨 */
.tbl.ds tr.ds td.n b{font-size:var(--fs-display);font-weight:800;letter-spacing:-.01em}
.tbl.ds td.n small{display:block;font-size:var(--fs-cap);color:var(--ink-3);line-height:1.2}
.tbl.ds .facts{font-size:var(--fs-cap);color:var(--ink-3);margin-top:2px}
.tbl.ds td.rt .rail{display:block;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.tbl.ds td.rt .rail i{display:block;height:100%;min-width:3px;border-radius:4px;background:var(--ink-2)}
.sub-h{font-size:var(--fs-title);margin:22px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sub-h .meta{font-weight:400;margin-left:8px}
/* 오른쪽 상세 패널 — 표를 따라 스크롤하지 않게 붙여 둔다 */
.ds-panel{position:sticky;top:60px;border:1px solid var(--line);border-radius:10px;padding:12px 14px 14px;
  margin-left:20px;   /* 표에서 한 뼘 떼어 놓는다 — 칸 사이 22px 과 합쳐 42px */
  max-height:calc(100vh - 92px);overflow:auto}
.dsp[hidden]{display:none}
.dsp-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dsp-h b{font-size:calc(var(--fs-title) * 1.4)}
.dsp-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:6px 14px;margin:10px 0 8px}
.dsp-n b{font-size:var(--fs-display);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dsp-n small{font-size:var(--fs-cap);color:var(--ink-3);margin-left:4px}
.dsp-n .dt b{font-size:var(--fs-title);font-weight:700}   /* 날짜는 핵심 숫자가 아니다 */
.dsp-f{font-size:var(--fs-cap);color:var(--ink-2);margin:0 0 10px}
.dsp .btn{display:inline-block;margin-bottom:10px}
.tbl.dsp-t{table-layout:fixed}
.tbl.dsp-t .c-a{width:78px} .tbl.dsp-t .c-b{width:96px}
.tbl.dsp-t td{padding:5px 6px 7px;vertical-align:top}
.tbl.dsp-t td.nm .t{display:block}
.tbl.dsp-t td.nm .note{display:block;font-size:var(--fs-cap);color:var(--ink-3);margin-top:1px}
/* 막대는 메모 아래 제 줄에 둔다 — 겹쳐서 글자를 먹던 자리다(세로 간격 5px) */
.tbl.dsp-t td.nm .rail{display:block;height:3px;margin-top:5px;border-radius:2px;background:var(--line);overflow:hidden}
.tbl.dsp-t td.nm .rail i{display:block;height:100%;min-width:2px;border-radius:2px;background:var(--ink-4)}
.tbl.dsp-t td.n{color:var(--ink-2)}
.tbl.dsp-t tr.rest td,.tbl.dsp-t tr.rest .t{color:var(--ink-3)}

/* 찾기 탭 — 약관 · 진료지침 · 논문. 검색어로 원천마다 센 건수를 붙이고, 누르면 검색어를 들고 넘어간다 */
.findtabs{display:flex;gap:2px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.findtabs a{display:flex;align-items:baseline;gap:6px;padding:8px 13px 9px;margin-bottom:-1px;
  border-bottom:2px solid transparent;color:var(--ink-2);font-size:var(--fs-title);text-decoration:none}
.findtabs a:hover{color:var(--ink)}
.findtabs a.on{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
.findtabs .n{font-size:var(--fs-cap);color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}
.findtabs .n.zero{color:var(--ink-4)}