/* 48-v2-sources.css — 자료 앱(#2423) 열람실 판.
   본창 = 목록(왼 칸, 촘촘한 두 줄 행) + 원문(오른 칸, 항상 열림). 사이드바(.v2-ss)는 셸의 .v2-side 칸에 선다.
   값은 전부 01-base.css 토큰 — 다크는 90-dark.css 의 토큰 갈아끼움으로 따라온다. */

/* ── 앱 소유 사이드바(#2423) — 조립은 side.ts(구역 틀: .v2-app-space·secHead·secFoot), 여기는 나무 행뿐 ── */
/*  .v2-ss 는 .v2-app-list(구역 목록과 같은 스크롤 그릇)에 얹히는 부가 클래스다 — 배경·패딩·스크롤은 그릇 소관. */
.v2-ss-sec { padding: 12px 0 3px 8px; font-size: 11px; font-weight: 700; color: var(--muted-head); }
.v2-ss .v2-ss-sec:first-child { padding-top: 4px; }
.v2-ss-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--ink); text-decoration: none; }
.v2-ss-row:hover { background: var(--bg); }
.v2-ss-row .ic { display: grid; place-items: center; width: 16px; color: var(--muted-head); flex: none; }
.v2-ss-row .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-ss-row .n { margin-left: auto; font-size: 11.5px; color: var(--muted-3); font-variant-numeric: tabular-nums; flex: none; }
.v2-ss-row.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-net); font-weight: 600; }
.v2-ss-row.on .ic { color: var(--blue); }
.v2-ss-row.child { min-height: 28px; margin-left: 24px; font-size: 12.5px; color: var(--ink-sub); }

/* ── 본창: 열람실 두 칸 ───────────────────────────────────────────────────── */
.v2-src { display: flex; height: 100%; min-height: 0; background: var(--bg); }

/* 목록(왼 칸) */
.v2-srl { width: 380px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-row); }
.v2-srl-hd { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line-row); flex: none; }
.v2-srl-hd .sp { flex: 1; }
.v2-srl-crumb { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; }
.v2-srl-crumb b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-srl-crumb .dim { color: var(--muted-3); flex: none; }
.v2-srl-crumb .sep { color: var(--muted-3-line); flex: none; }
.v2-src-chip { flex: none; padding: 4px 9px; border: 1px solid var(--line-net); border-radius: 999px; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.v2-src-chip:hover { color: var(--ink); border-color: var(--muted-3-line); }
.v2-src-chip.on { background: var(--bg-success); border-color: var(--ok-line-2, var(--mint)); color: var(--mint-deep); font-weight: 600; }
.v2-srl-list { flex: 1; min-height: 0; overflow: hidden auto; }
.v2-srl-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--line-row); text-decoration: none; color: var(--ink); }
.v2-srl-row:hover { background: var(--bg-tint); }
.v2-srl-row.sel { background: var(--bg-sel); }
.v2-srl-row.sel::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: var(--blue); }
.v2-srl-row .tx { flex: 1; min-width: 0; }
.v2-srl-row .t1 { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.v2-srl-row .t1 .ttl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-srl-row .t2 { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-srl-ext { flex: none; min-width: 30px; text-align: center; padding: 3px 5px; border-radius: 5px; font: 700 9.5px/1 var(--wkm, ui-monospace, monospace); letter-spacing: .04em; }
.v2-srl-ext.img { background: var(--bg-punch); color: var(--blue); }
.v2-srl-ext.md { background: var(--bg-success); color: var(--mint-deep); }
.v2-srl-ext.txt { background: var(--bg-tint-2); color: var(--muted); }
.v2-srl-ext.csv { background: var(--bg-note); color: var(--ink-note); }
.v2-srl-ext.pdf { background: #FDF1EF; color: var(--coral-text); }
.v2-srl-ic { flex: none; display: grid; place-items: center; width: 30px; color: var(--muted-head); }
.v2-srl-more { flex: none; padding: 8px 14px 10px 18px; }
.v2-src-count { font-size: 11.5px; color: var(--muted-3); }
.v2-src-empty { padding: 26px 18px; font-size: 13px; color: var(--muted); }
.v2-src-skel { height: 96px; margin: 14px; border-radius: 10px; background: var(--bg-tint); }

/* 민트 점 — 이 자료로 지식이 만들어졌다 */
.tick { flex: none; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.v2-srl-row .tick.on, .tick.on { background: var(--mint); box-shadow: 0 0 0 2px var(--surface); }

/* 원문(오른 칸) */
.v2-srd { flex: 1; min-width: 0; overflow: hidden auto; }
.v2-srd-none { padding: 40px 28px; font-size: 13px; color: var(--muted-2); }
.v2-srd-sheet { max-width: 860px; padding: 22px 28px 40px; }
.v2-src-h1 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; overflow-wrap: anywhere; }
.v2-src-dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted-3); }
.v2-src-dmeta .mono { font-family: var(--wkm, ui-monospace, monospace); font-size: 11.5px; }
.v2-src-dmeta .vis { color: var(--muted-2); }
.v2-src-badge { padding: 2.5px 7px; border-radius: 999px; background: var(--bg-tint-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.v2-src-dacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.v2-src-dacts .btn { display: inline-flex; align-items: center; gap: 6px; }
.v2-src-dacts .btn svg { width: 14px; height: 14px; }
.v2-src-primary { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-fill); }
.v2-src-primary:hover { background: var(--blue-fill-deep); border-color: var(--blue-fill-deep); color: var(--on-fill); }
.v2-srd-kchip { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--bg-success); color: var(--mint-deep); font-size: 11.5px; font-weight: 700; }
.v2-srd-body { margin-top: 18px; }
.v2-srd-body.md-rendered { font-size: 13.5px; line-height: 1.65; }
.v2-srd-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.v2-srd-pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; }
.v2-srd-html { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.v2-srd-code { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12px; }
.v2-srd-table { max-width: 100%; overflow: auto; }
.v2-srd-media { max-width: 100%; }
.v2-srd-msg { padding: 22px; border: 1px dashed var(--line-net); border-radius: 10px; color: var(--muted); font-size: 13px; }

/* 글자 없는 파일 — 기계 쪽지([BINARY])를 사람 말로 */
.v2-src-stub { padding: 22px; border: 1px dashed var(--line-net); border-radius: 10px; background: var(--bg-tint); }
.v2-src-stub .h { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-sub); }
.v2-src-stub .sub { margin: 0; font-size: 12px; color: var(--muted-3); font-family: var(--wkm, ui-monospace, monospace); }

/* 여기서 나온 지식 */
.v2-src-kn { margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.v2-src-kn .k { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--mint-deep); }
.v2-src-kn .k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.v2-src-kn .v { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.v2-src-kn .kl { font-size: 13px; color: var(--ink); text-decoration: none; }
.v2-src-kn .kl:hover { color: var(--blue); text-decoration: underline; }

/* 스레드(상위·이어진 자료) */
.v2-src-seck { margin: 22px 0 8px; font-size: 11px; font-weight: 700; color: var(--muted-head); }
.v2-src-nbs { display: flex; flex-direction: column; gap: 6px; }
.v2-src-nb { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-row); border-radius: 9px; text-decoration: none; color: var(--ink); }
.v2-src-nb:hover { background: var(--bg-tint); }
.v2-src-nb .ar { flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted-3); }
.v2-src-nb .tt { min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-src-nb .sb { flex: none; margin-left: auto; font-size: 11.5px; color: var(--muted-3); }
.v2-src-lock { color: var(--muted-3); flex: none; }

/* 좁은 폭 — 목록이 위, 원문이 아래(한 화면 한 칸) */
@media (max-width: 900px) {
  .v2-src { flex-direction: column; }
  .v2-srl { width: auto; max-height: 44%; border-right: 0; border-bottom: 1px solid var(--line-row); }
}

/* ── 사소한 것 접기(#2423 v3.1) — 봇 알림·독립 한 줄짜리는 기본으로 접힌다 ── */
.v2-srl-noiseln { display: block; width: 100%; padding: 10px 18px; border: 0; background: none; text-align: left; font: inherit; font-size: 12px; color: var(--muted-2); cursor: pointer; }
.v2-srl-noiseln:hover { color: var(--ink-sub); background: var(--bg-tint); }
.v2-srl-row.noise .t1, .v2-srl-row.noise .t2 { color: var(--muted-2); }
.v2-srl-row.noise .t1 { font-weight: 500; }