/* 디자인 기준: shadcn admin (shadcnblocks-admin) — Inter · 무채색 · 테두리 중심 · 얕은 그림자는 조작 요소에만 */
:root{
  --bg:#ffffff;            /* 본문 */
  --fg:#0a0a0a;            /* 글자 */
  --muted-fg:#737373;      /* 보조 글자 */
  --border:#e5e5e5;        /* 테두리 */
  --border-soft:rgba(229,229,229,.6);  /* 카드 테두리 (border/60) */
  --sidebar:#fafafa;       /* 사이드바 · 표 머리 */
  --accent:#f5f5f5;        /* 선택 · hover · 칩 꺼짐 */
  --primary:#171717;       /* 켜진 버튼 */
  --ring:rgba(163,163,163,.5);
  --warn:#c2410c;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-2xl:18px;
  --font:'Inter','Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.43;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01'}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

.app{--rail0-w:208px;--rail-w:255px;--head-h:94px;position:relative;display:grid;grid-template-columns:var(--rail0-w) var(--rail-w) minmax(0,1fr);grid-template-rows:var(--head-h) 1fr;height:100vh}
/* '키워드 지도' 탭: 사이드바 두 칸과 손잡이를 숨기고 지도가 전체 폭을 쓴다 */
.app.view-map{grid-template-columns:minmax(0,1fr)}
.app.view-map .rail0,.app.view-map .rail,.app.view-map .rail-resize{display:none}
.app.view-map .explore{grid-column:1/-1}
/* 칸 접기: app.js 가 --rail0-w / --rail-w 를 44px 로 덮어쓰고 손잡이를 숨긴다. 접힌 칸은 세로 띠에 '펼치기' 버튼만 남긴다 */
/* 사이드바 폭 손잡이: 경계 위 8px 띠, 마우스를 올리거나 끄는 동안 선이 보인다 */
#rail0Resize{left:calc(var(--rail0-w) - 4px)}
#railResize{left:calc(var(--rail0-w) + var(--rail-w) - 4px)}
.rail-resize{position:absolute;top:var(--head-h);bottom:0;width:8px;cursor:col-resize;z-index:5;touch-action:none}
.rail-resize::after{content:'';position:absolute;left:3px;top:0;bottom:0;width:2px;border-radius:2px;background:transparent;transition:background .15s}
.rail-resize:hover::after,.rail-resize.drag::after{background:#a3a3a3}
.rail-resize:focus-visible{box-shadow:none}
.rail-resize:focus-visible::after{background:#737373}
body.resizing{cursor:col-resize;user-select:none}

/* 머리띠 */
header{grid-column:1/-1;display:flex;flex-direction:column;justify-content:center;padding:0 16px;background:var(--bg);box-shadow:inset 0 -1px 0 var(--border);min-width:0}
header .head-row{display:flex;align-items:center;gap:12px;min-width:0;height:44px}
header .head-tabs{height:auto;padding-bottom:8px}
header b{font-size:14px;font-weight:600;letter-spacing:-.01em}
header .sp{flex:1}
/* 머리띠 검색: 모든 카테고리에서 찾기 (Worker /api/search). 결과는 입력 밑에 떠 있는 판 */
.gsearch{position:relative;flex:0 1 400px;min-width:140px}
.gsearch input{height:32px;width:100%;font:inherit;font-size:13px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-xs)}
.gsearch input::placeholder{color:var(--muted-fg)}
.gres{position:absolute;top:36px;left:0;width:min(600px,92vw);max-height:70vh;overflow:auto;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:30;padding:6px}
.gres-h{font-size:11px;font-weight:600;color:var(--muted-fg);padding:8px 8px 4px;letter-spacing:.02em}
.gres-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 8px;border-radius:var(--r-sm);color:inherit;text-decoration:none}
.gres-row:hover,.gres-row:focus-visible{background:var(--accent)}
.gres-row.partial{color:var(--muted-fg)}
.gres-row small{color:var(--muted-fg);margin-left:6px;font-size:12px}
.gres-row .num{font-variant-numeric:tabular-nums;color:var(--muted-fg);white-space:nowrap}
.gres-msg{padding:10px 8px;color:var(--muted-fg);font-size:13px}
.gres-units{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 2px}
.gres-unit{font-size:12px;padding:2px 9px;border:1px solid var(--border);border-radius:999px;background:var(--sidebar)}
.gres-unit i{font-style:normal;color:var(--muted-fg)}
header b{white-space:nowrap;flex:none}
header .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lang{flex:none}
/* 화면 탭 (키워드 지도 · 카테고리 상세) — 언어 전환과 같은 .seg, 조금 크게 */
.seg-tab{flex:none}
.seg.seg-tab button{height:32px;padding:0 14px;font-size:14px;display:inline-flex;align-items:center;gap:7px}
.seg.seg-tab button svg{flex:none;opacity:.7}
.seg.seg-tab button.on svg{opacity:1}
.seg button{white-space:nowrap}
.muted{color:var(--muted-fg);font-size:12px}

/* 사이드바 — 두 칸 모두 세로 플렉스: 머리(고정) · 본문(스크롤) · 펼치기 버튼(접혔을 때) */
/* 첫 칸: 큰 카테고리 — 둘째 칸보다 한 톤 진한 바탕, 고른 칸은 흰 카드처럼 */
.rail0{overflow:hidden;background:#f4f4f5;display:flex;flex-direction:column;box-shadow:inset -1px 0 0 var(--border)}
.rail{overflow:hidden;background:var(--sidebar);display:flex;flex-direction:column;box-shadow:inset -1px 0 0 var(--border)}
.rail0-body{overflow:auto;flex:1;padding:8px;display:flex;flex-direction:column;gap:2px}
.rail > #rail{overflow:auto;flex:1;padding:0 8px 12px}

/* 머리띠: 칸 이름 + 접기 버튼 */
.rail-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 8px 0 12px;
  box-shadow:inset 0 -1px 0 var(--border);position:sticky;top:0;z-index:1;background:inherit}
.rail-head-t{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-fg)}
.rail-collapse,.rail-expand{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:var(--r-md);
  background:transparent;color:var(--muted-fg);cursor:pointer;transition:background .15s,color .15s}
.rail-collapse:hover,.rail-expand:hover{background:var(--bg);color:var(--fg);border-color:var(--border);box-shadow:var(--shadow-xs)}
.rail-expand{flex:none;margin:0 auto;order:-1}   /* 접힌 칸에서 맨 위 */

/* 접힌 칸: 본문 · 검색 · 머리글자 숨기고, 세로 글씨 한 줄 + 펼치기 버튼만 */
.app.rail0-collapsed .rail0-body,.app.rail-collapsed #rail,.app.rail-collapsed .rail input{display:none}
.app.rail0-collapsed #rail0 .rail-head,.app.rail-collapsed .rail .rail-head{display:none}
.app.rail0-collapsed .rail0,.app.rail-collapsed .rail{align-items:center;padding-top:8px}
/* 접힌 칸에 세로로 쓴 칸 이름 (가운데) */
.rail-vlabel{display:none}
.app.rail0-collapsed #rail0 .rail-vlabel,.app.rail-collapsed .rail .rail-vlabel{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
  margin:14px auto 0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-fg);white-space:nowrap;user-select:none}

.rail0 .grp{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-md);
  background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--fg);text-align:left;cursor:pointer;transition:background .12s,box-shadow .12s}
.rail0 .grp:hover{background:#ebebec}
.rail0 .grp.on{background:var(--bg);border-color:var(--border);box-shadow:var(--shadow-xs)}
.rail0 .grp .nm{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 이름은 줄바꿈하지 않고, 좁으면 … */
.rail0 .grp .v{color:var(--muted-fg);font-size:12px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.app.rail0-collapsed .rail0 .grp .v,.app.rail0-collapsed .rail0 .grp .nm{display:none}

.rail-empty{padding:16px 8px;color:var(--muted-fg);font-size:13px}
.rail input{margin:10px 0;width:100%;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg);font:inherit;font-size:14px;color:var(--fg);box-shadow:var(--shadow-xs)}
.rail input::placeholder{color:var(--muted-fg)}
.rail .g{min-height:32px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;font-weight:500;user-select:none;display:flex;gap:6px;align-items:center}
.rail .g:hover{background:var(--accent)}
/* 삼각 캐럿: 접힘 ▸ → 펼침 ▾ 를 회전으로 (옆으로 → 아래로) */
.rail .g .caret{flex:none;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-fg);transition:transform .18s ease}
.rail .g .caret svg{width:9px;height:9px;display:block}
.rail .g.open .caret{transform:rotate(90deg)}
.rail .g .n{color:var(--muted-fg);font-weight:400;font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
.rail .leaf{min-height:30px;padding:5px 8px;border-radius:var(--r-md);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--fg)}
.rail .leaf:hover{background:var(--accent)}
.rail .leaf.on{background:#ebebeb;font-weight:500;box-shadow:inset 2px 0 0 var(--primary)}
.rail .leaf .v{color:var(--muted-fg);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rail-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 8px 8px;font-size:13px;font-weight:600}
.rail-title .v{color:var(--muted-fg);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}

/* 본문 머리 */
main{overflow:auto;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.crumb{padding:20px 24px 0;color:var(--muted-fg);font-size:13px}
.title{padding:4px 24px 0;font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.src{padding:2px 24px 0;font-size:12px;color:var(--muted-fg)}
.src.products{color:var(--fg)}
.rail .leaf .srctag{margin-left:6px;padding:0 5px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:10px;color:var(--muted-fg);vertical-align:1px}
.stats{display:flex;flex-wrap:wrap;gap:12px;padding:16px 24px}
.stats > div{display:flex;flex-direction:column;gap:2px;min-width:120px;padding:12px 16px;border:1px solid var(--border-soft);border-radius:var(--r-xl);background:var(--bg)}
.stats .k{font-size:12px;font-weight:500;color:var(--muted-fg)}
.stats .v{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats .v.small{font-size:13px;font-weight:400;letter-spacing:0}
.stats .warn{border-color:#fed7aa;background:#fff7ed}
.stats .warn .v{color:var(--warn)}

/* 조작 막대 */
.ctrl{display:flex;flex-direction:column;gap:8px;margin:0 24px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:var(--bg);position:sticky;top:0;z-index:2}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--accent);border-radius:var(--r-lg)}
.seg button{border:0;background:transparent;height:28px;padding:0 12px;border-radius:7px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted-fg)}
.seg button.on{background:var(--bg);color:var(--fg);box-shadow:var(--shadow-xs),0 0 0 1px rgba(0,0,0,.04)}
.lbl{font-size:12px;font-weight:500;color:var(--muted-fg);margin-right:6px}
.seg-sm button{height:26px;padding:0 10px;font-size:12px}
/* 조작 막대 줄: 1줄 보기 · 2줄 라벨 · 3줄 단어 수. 카테고리 칸(.cat) + 내용 칸(.row-body) — 좁아지면 내용 칸 안에서만 줄바꿈 */
.ctrl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ctrl-row + .ctrl-row{padding-top:8px;border-top:1px solid var(--accent)}
.ctrl-row .sp{flex:1}
.ctrl-row.has-cat{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:12px}
.cat{font-size:12px;font-weight:600;color:var(--fg);line-height:28px}
.cat[title]{cursor:help}
.row-body{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.divider{width:1px;height:20px;background:var(--border)}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.chip{height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;background:var(--bg);display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;user-select:none;box-shadow:var(--shadow-xs)}
.chip:hover{background:var(--accent)}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.chip.off{background:var(--accent);border-color:transparent;color:#a3a3a3;box-shadow:none}
.chip.off i{filter:grayscale(1);opacity:.45}
.hint{font-size:12px;color:var(--muted-fg)}
/* 라벨 체크박스 + 적용 */
.labck{height:28px;padding:0 10px 0 8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;cursor:pointer;user-select:none;box-shadow:var(--shadow-xs)}
.labck:hover{background:var(--accent)}
.labck input{width:14px;height:14px;margin:0;accent-color:var(--primary);cursor:pointer}
.labck i{width:8px;height:8px;border-radius:50%;display:inline-block}
.labck.off{color:#a3a3a3}
.labck.off i{filter:grayscale(1);opacity:.45}
.labck.all{font-weight:600}
.labck.all.off{color:var(--fg)}
.btn.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.btn-primary:hover{background:#262626}
.btn.btn-primary:disabled{background:var(--accent);border-color:var(--border);color:#a3a3a3;box-shadow:none;cursor:default}
.chips{align-items:center}
.chips.dirty .btn.btn-primary:not(:disabled){box-shadow:0 0 0 3px var(--ring)}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-size:13px;font-weight:500}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
select,.ctrl input[type=search]{height:32px;font:inherit;font-size:13px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-xs)}
.ctrl input[type=search]{width:180px}
.ctrl input[type=search]::placeholder{color:var(--muted-fg)}
.btn{height:32px;font:inherit;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:var(--r-md);padding:0 12px;cursor:pointer;box-shadow:var(--shadow-xs)}
.btn:hover{background:var(--accent)}

/* 그림 · 표가 놓이는 카드 */
.stage{flex:1 0 auto;position:relative;min-height:480px;margin:0 24px 24px;border:1px solid var(--border-soft);border-top:0;border-radius:0 0 var(--r-2xl) var(--r-2xl);background:var(--bg)}   /* 내용만큼 늘어난다 — 줄어들면 모두 펼친 트리 · 표 한가운데 카드 아래 테두리가 그려진다. overflow를 두면 표 머리줄 고정 기준이 바뀐다 */
.stage svg{display:block}
.node{cursor:pointer}
.node text{font-size:12px;fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.node .sv{fill:var(--muted-fg);font-size:11px;font-variant-numeric:tabular-nums}
.node.faded{opacity:.18}
.node.hit .nm{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.node.pseudo text{fill:var(--muted-fg);font-size:11px;font-weight:500}
.link{fill:none;stroke:#d4d4d4;stroke-width:1px}
.note{position:sticky;bottom:12px;width:max-content;max-width:calc(100% - 24px);margin:0 12px 12px auto;font-size:12px;color:var(--muted-fg);background:var(--bg);padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-xs)}
.empty{padding:64px 24px;color:var(--muted-fg);text-align:center}

/* 표 */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{position:sticky;top:var(--ctrl-h,0px);height:40px;background:var(--sidebar);text-align:left;font-weight:500;font-size:13px;color:var(--muted-fg);padding:0 12px;
  box-shadow:inset 0 -1px 0 var(--border);white-space:nowrap;cursor:pointer}
th:hover{color:var(--fg)}
th.on{color:var(--fg)}
th.on::after{content:' ↓';color:var(--muted-fg)}
td{height:40px;padding:0 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td.nm,td.labs{white-space:normal}   /* 모두 펼쳐 긴 이름 · 라벨이 생겨도 카드 폭 안에서 줄바꿈 */
td.nm{min-width:220px}
tbody tr:hover td{background:var(--sidebar)}
.r{text-align:right}
tr.d0 td:first-child{font-weight:500}
tr.dim td{opacity:.45}   /* 조건엔 안 맞지만 계층을 보여 주려고 남긴 조상 줄 */
.tog{display:inline-block;width:16px;color:var(--muted-fg);cursor:pointer}
.bar{display:inline-block;height:6px;background:var(--primary);opacity:.15;border-radius:999px;vertical-align:middle;margin-left:8px}
.lab{display:inline-flex;align-items:center;height:20px;font-size:12px;font-weight:500;border-radius:var(--r-sm);padding:0 6px;margin:2px 4px 2px 0;
  color:color-mix(in srgb,var(--c,#999) 70%,#000);background:color-mix(in srgb,var(--c,#999) 14%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#999) 22%,#fff)}
td.also{color:var(--muted-fg);font-size:13px;white-space:normal;min-width:160px}

/* 키워드 계층 지도 — 본문 자리를 통째로 차지하는 전체 화면 */
.explore{grid-column:3/4;grid-row:2/3;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.exp-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 24px 10px}
.exp-titles{min-width:0}
.exp-title{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.exp-sub{color:var(--muted-fg);font-size:13px;margin-top:3px}
.exp-ctrl{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 24px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:var(--r-2xl) var(--r-2xl) 0 0;background:var(--bg)}
.exp-ctrl .sp{flex:1}
.exp-field{display:inline-flex;align-items:center}
.exp-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--fg);cursor:pointer;user-select:none}
.exp-check input{width:15px;height:15px;margin:0;accent-color:var(--primary);cursor:pointer}
.seg-sm button{height:26px;padding:0 10px;font-size:12px}
/* 라벨 유형 범례 · 필터 (칩 토글) */
.exp-legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 24px;padding:8px 12px;border:1px solid var(--border-soft);border-top:0;background:var(--sidebar)}
.exp-chip{height:26px;padding:0 9px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;cursor:pointer;user-select:none;box-shadow:var(--shadow-xs);color:var(--fg)}
.exp-chip:hover{background:var(--accent)}
.exp-chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.exp-chip.off{background:var(--accent);border-color:transparent;color:#a3a3a3;box-shadow:none}
.exp-chip.off i{filter:grayscale(1);opacity:.4}
.exp-chip-all{font-weight:600}
.exp-chip-all.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* 표 열 선택 (체크박스 + 적용) — 라벨 필터와 같은 .labck / .btn-primary 모양 */
.exp-cols .lbl{font-weight:600}
.exp-cols.dirty .btn.btn-primary:not(:disabled){box-shadow:0 0 0 3px var(--ring)}
.exp-tsrc{color:var(--muted-fg)}
.exp-tsrc.prod{color:var(--fg)}
.exp-ctrl input[type=search]{height:32px;width:180px;font:inherit;font-size:13px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-xs)}
.exp-stage{flex:1;position:relative;margin:0 24px;border:1px solid var(--border-soft);border-top:0;background:
  radial-gradient(circle at 1px 1px, rgba(0,0,0,.045) 1px, transparent 0) 0 0/22px 22px,var(--bg);overflow:auto}
.exp-stage svg{display:block;margin:0 auto}
.exp-note{flex:none;margin:8px 24px 16px;font-size:12px;color:var(--muted-fg)}
.exp-empty{padding:64px 24px;color:var(--muted-fg);text-align:center}
.exp-stage.grabbing{cursor:grab}
.exp-stage.grabbing:active{cursor:grabbing}
.exp-stage:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.exp-node .exp-lbl{font-size:11px;font-weight:500;fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.exp-node .exp-lbl-meta{font-size:9.5px;font-weight:500;fill:var(--muted-fg);font-variant-numeric:tabular-nums}
/* 트리맵 (모던) */
.exp-tm-bar rect{stroke:var(--border)}
.exp-crumb{font-size:12px;font-weight:500;fill:var(--muted-fg)}
.exp-crumb.cur{font-weight:700;fill:var(--fg)}
.exp-crumb.sep{fill:#bbb;font-weight:400}
.exp-tm-barmeta{font-size:11px;font-weight:500;fill:var(--muted-fg);font-variant-numeric:tabular-nums}
.exp-tm-rect{transition:filter .12s}
.exp-tm-cell:hover .exp-tm-rect{filter:brightness(1.04) drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.exp-tm-head{font-size:12px;font-weight:700;fill:#2b2b2b;pointer-events:none;letter-spacing:-.01em}
.exp-tm-headmeta{font-size:10.5px;font-weight:500;fill:#5a5a5a;pointer-events:none;font-variant-numeric:tabular-nums}
.exp-tm-name{font-size:11.5px;font-weight:600;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.12);stroke-width:2px;stroke-linejoin:round}
.exp-tm-meta{font-size:10px;font-weight:500;fill:rgba(255,255,255,.92);pointer-events:none;font-variant-numeric:tabular-nums}
/* 덴드로그램 */
.exp-dn-name{font-size:11.5px;font-weight:600;fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.exp-dn-meta{font-size:9.5px;font-weight:500;fill:var(--muted-fg);font-variant-numeric:tabular-nums;pointer-events:none}
.exp-node.leaf:hover .exp-dn-name{text-decoration:underline;text-underline-offset:2px}
/* 파생 패싯(검색 패턴) 필터 줄 */
.exp-facets{background:var(--bg)}
.exp-facet{--fc:#888}
.exp-facet.on{background:color-mix(in srgb,var(--fc) 14%,#fff);border-color:color-mix(in srgb,var(--fc) 45%,#fff);color:color-mix(in srgb,var(--fc) 72%,#000);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 30%,#fff)}
.exp-facet.on i{box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 25%,#fff)}
.exp-facet-clear{height:26px;padding:0 10px;border:1px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--muted-fg);font-size:12px;font-weight:500;cursor:pointer}
.exp-facet-clear:hover{background:var(--accent);color:var(--fg)}
/* 데이터 표 */
.exp-stage.is-table{overflow:auto;background:var(--bg)}
.exp-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
.exp-table th{position:sticky;top:0;z-index:1;background:var(--sidebar);text-align:left;font-size:12px;font-weight:600;color:var(--muted-fg);
  padding:10px 12px;box-shadow:inset 0 -1px 0 var(--border);white-space:nowrap;cursor:pointer;user-select:none}
.exp-table th:hover{color:var(--fg)}
.exp-table th.r{text-align:right}
.exp-table th.on{color:var(--fg)}
.exp-table th.on.desc::after{content:' ↓';color:var(--muted-fg)}
.exp-table th.on.asc::after{content:' ↑';color:var(--muted-fg)}
.exp-table td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;white-space:nowrap;vertical-align:middle}
.exp-table td.r{text-align:right}
.exp-table tr.parent{cursor:pointer}
.exp-table tr.leaf{cursor:pointer}
.exp-table tr.dim td{opacity:.42}
.exp-table tbody tr:hover td{background:var(--sidebar)}
.exp-table tr.d0 .exp-tname{font-weight:700}   /* 상위 카테고리 줄 강조 */
.exp-table .nm{display:flex;align-items:center;gap:7px;min-width:240px;white-space:nowrap}
.exp-tcaret{flex:none;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-fg);transition:transform .15s}
.exp-tcaret svg{width:8px;height:8px;display:block}
.exp-tcaret.open{transform:rotate(90deg)}
.exp-tcaret.empty{visibility:hidden}
.exp-tdot{flex:none;width:9px;height:9px;border-radius:50%}
.exp-tname{font-weight:600;color:var(--fg)}
.exp-table tr:hover .exp-tcaret{color:var(--fg)}
.exp-tnum{font-variant-numeric:tabular-nums}
.exp-tbar{display:inline-block;height:6px;border-radius:3px;background:var(--primary);opacity:.16;margin-left:8px;vertical-align:middle}
.exp-tlab{display:inline-flex;align-items:center;height:20px;font-size:11.5px;font-weight:600;border-radius:var(--r-sm);padding:0 7px;
  color:color-mix(in srgb,var(--c,#999) 72%,#000);background:color-mix(in srgb,var(--c,#999) 15%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#999) 24%,#fff)}
.exp-mix{display:inline-flex;width:140px;height:10px;border-radius:999px;overflow:hidden;background:var(--accent);box-shadow:inset 0 0 0 1px var(--border)}
.exp-mixseg{height:100%}
.exp-fdots{display:inline-flex;gap:4px}
.exp-fdot{width:9px;height:9px;border-radius:2px}
@media (max-width:760px){.explore{grid-column:1;grid-row:2/3}.exp-head,.exp-ctrl,.exp-stage,.exp-note{margin-left:16px;margin-right:16px}.exp-head{padding-left:16px;padding-right:16px}}

.only-sm{display:none}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  header{grid-column:1}
  .gsearch{flex:1 1 100%;order:9}
  header .head-row{flex-wrap:wrap;height:auto;padding:6px 0}
  .rail0,.rail,.hide-sm,.rail-resize{display:none}
  .only-sm{display:block;margin:12px 16px 0;width:calc(100% - 32px);height:36px}
  .crumb,.title,.src,.stats{padding-left:16px;padding-right:16px}
  .ctrl,.stage{margin-left:16px;margin-right:16px}
  .ctrl{position:static}
  .stage{overflow-x:auto}
  .ctrl input[type=search]{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* 카테고리 상세 표: 열 고르기 (키워드 지도 .exp-cols 와 같은 모양) · 빈 칸 표시 */
#leafCols.dirty .btn.btn-primary:not(:disabled){box-shadow:0 0 0 3px var(--ring)}
td .none{color:var(--muted-fg)}
td.labs .lab{white-space:nowrap}   /* 열을 많이 켜 좁아져도 칩 글자가 세로로 쪼개지지 않고 칩 단위로 줄바꿈 */
.stage:has(> table){width:min-content;min-width:calc(100% - 48px)}   /* 열을 많이 켜 표가 본문보다 넓어지면 카드도 같이 넓어지고 본문 가로로 스크롤 (테두리가 표를 감싼다) */
@media (max-width:760px){.stage:has(> table){min-width:calc(100% - 32px)}}