/* 디자인 기준: 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;position:relative;display:grid;grid-template-columns:var(--rail0-w) var(--rail-w) minmax(0,1fr);grid-template-rows:56px 1fr;height:100vh}
/* 사이드바 폭 손잡이: 경계 위 8px 띠, 마우스를 올리거나 끄는 동안 선이 보인다 */
#rail0Resize{left:calc(var(--rail0-w) - 4px)}
#railResize{left:calc(var(--rail0-w) + var(--rail-w) - 4px)}
.rail-resize{position:absolute;top:56px;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/4;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);box-shadow:inset 0 -1px 0 var(--border)}
header b{font-size:14px;font-weight:600;letter-spacing:-.01em}
header .sp{flex:1}
header b{white-space:nowrap;flex:none}
header .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lang{flex:none}
.seg button{white-space:nowrap}
.muted{color:var(--muted-fg);font-size:12px}

/* 사이드바 */
/* 첫 칸: 큰 카테고리 — 둘째 칸보다 한 톤 진한 바탕, 고른 칸은 흰 카드처럼 */
.rail0{overflow:auto;background:#f4f4f5;padding:12px 8px;display:flex;flex-direction:column;gap:2px;box-shadow:inset -1px 0 0 var(--border)}
.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}
.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}
.rail-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 8px 8px;font-size:14px;font-weight:600}
.rail-title .v{color:var(--muted-fg);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
.rail-empty{padding:16px 8px;color:var(--muted-fg);font-size:13px}
.rail{overflow:auto;background:var(--sidebar);padding:12px 8px;box-shadow:inset -1px 0 0 var(--border)}
.rail input{margin:0 0 10px;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{color:var(--muted-fg);width:10px;display:inline-block;font-size:10px}
.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}
.rail .leaf .v{color:var(--muted-fg);font-size:12px;white-space:nowrap;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}
.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}

.only-sm{display:none}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  header{grid-column:1}
  .rail0,.rail,.hide-sm,.rail-resize{display:none}
  .only-sm{display:block;margin:12px 16px 0;width:calc(100% - 32px);height:36px}
  .crumb,.title,.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}}