/* ==========================================================================
   Standards IDE — 코드 에디터(VS Code) 스타일 UI
   ========================================================================== */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "Cascadia Code", Consolas, "D2Coding", "JetBrains Mono", "Fira Code", Menlo, monospace;
  --titlebar-h: 38px;
  --statusbar-h: 22px;
  --activitybar-w: 48px;
  --sidebar-w: 300px;
  --tabbar-h: 35px;
  --crumb-h: 22px;

  /* 다크 팔레트 (기본) */
  --bg: #1e1e1e;
  --bg-editor: #1e1e1e;
  --bg-sidebar: #252526;
  --bg-activity: #333333;
  --bg-titlebar: #3c3c3c;
  --bg-tabbar: #2d2d2d;
  --bg-tab: #2d2d2d;
  --bg-tab-active: #1e1e1e;
  --bg-hover: #2a2d2e;
  --bg-selected: #04395e;
  --bg-input: #3c3c3c;
  --bg-widget: #252526;
  --bg-status: #007acc;
  --bg-gutter: #1e1e1e;
  --border: #3c3c3c;
  --border-strong: #454545;
  --text: #d4d4d4;
  --text-strong: #ffffff;
  --text-muted: #858585;
  --text-dim: #6e7681;
  --accent: #4fc1ff;
  --accent-2: #007acc;
  --link: #4fc1ff;
  --keyword: #569cd6;
  --string: #ce9178;
  --number: #b5cea8;
  --comment: #6a9955;
  --warn: #dcdcaa;
  --mark: rgba(255, 213, 61, 0.35);
  --target: rgba(79, 193, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-editor: #ffffff;
  --bg-sidebar: #f3f3f3;
  --bg-activity: #2c2c2c;
  --bg-titlebar: #dddddd;
  --bg-tabbar: #f3f3f3;
  --bg-tab: #ececec;
  --bg-tab-active: #ffffff;
  --bg-hover: #e8e8e8;
  --bg-selected: #cfe4ff;
  --bg-input: #ffffff;
  --bg-widget: #f8f8f8;
  --bg-status: #007acc;
  --bg-gutter: #ffffff;
  --border: #e5e5e5;
  --border-strong: #cccccc;
  --text: #1f1f1f;
  --text-strong: #000000;
  --text-muted: #616161;
  --text-dim: #8a8a8a;
  --accent: #0066b8;
  --accent-2: #007acc;
  --link: #0066b8;
  --keyword: #0000ff;
  --string: #a31515;
  --number: #098658;
  --comment: #008000;
  --warn: #795e26;
  --mark: rgba(255, 213, 61, 0.55);
  --target: rgba(0, 102, 184, 0.08);
  --shadow: rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui); font-size: 13px; color: var(--text); background: var(--bg);
  overflow: hidden; -webkit-font-smoothing: antialiased; word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
input { font: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.material-icons { font-size: 18px; vertical-align: middle; line-height: 1; }
kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--text-muted); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(121, 121, 121, 0.4); }
::-webkit-scrollbar-thumb:hover { background: rgba(121, 121, 121, 0.7); }
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- 레이아웃 */
#app { display: flex; flex-direction: column; height: 100vh; }
#titlebar {
  height: var(--titlebar-h); background: var(--bg-titlebar); display: flex; align-items: center; padding: 0 10px; gap: 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.tb-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.brand:hover { background: var(--bg-hover); }
.brand-mark { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 13px; }
.brand-name { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.tb-menu { display: flex; gap: 2px; }
.tb-menu a, .tb-menu button { padding: 4px 8px; border-radius: 4px; color: var(--text); font-size: 12px; }
.tb-menu a:hover, .tb-menu button:hover, .tb-menu a.active { background: var(--bg-hover); }
.tb-search {
  flex: 1; max-width: 560px; margin: 0 auto; height: 24px; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-muted); font-size: 12px; padding: 0 8px;
}
.tb-search:hover { border-color: var(--accent-2); color: var(--text); }
.tb-search .material-icons { font-size: 16px; }
.tb-search span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-right { display: flex; gap: 2px; }
.tb-right button { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.tb-right button:hover { background: var(--bg-hover); }

#workbench { flex: 1; display: flex; min-height: 0; position: relative; }

#activitybar {
  width: var(--activitybar-w); background: var(--bg-activity); display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 4px;
}
#activitybar button, #activitybar a {
  width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #858585; position: relative; gap: 2px;
}
#activitybar .material-icons { font-size: 24px; }
#activitybar span { display: none; font-size: 9px; }
#activitybar button:hover, #activitybar a:hover { color: #ffffff; }
#activitybar button.active { color: #ffffff; }
#activitybar button.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: #ffffff; }
#activitybar .badge { position: absolute; top: 8px; right: 8px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent-2); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.ab-spacer { flex: 1; }

#sidebar {
  width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; min-width: 0;
}
#app.sidebar-hidden #sidebar { display: none; }
.sb-head { height: 35px; display: flex; align-items: center; padding: 0 12px 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); flex-shrink: 0; }
.sb-head button { margin-left: auto; color: var(--text-muted); display: none; }
#sb-body { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }

#editor { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-editor); }
#tabbar { height: var(--tabbar-h); background: var(--bg-tabbar); display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; scrollbar-width: none; }
#tabbar::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; min-width: 120px; max-width: 220px; background: var(--bg-tab); color: var(--text-muted);
  border-right: 1px solid var(--border); font-size: 12px; cursor: pointer; white-space: nowrap; position: relative; flex-shrink: 0; height: var(--tabbar-h);
}
.tab .material-icons { font-size: 14px; color: var(--text-dim); }
.tab .tab-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tab .tab-num { font-family: var(--font-mono); color: var(--number); font-size: 11px; }
.tab .tab-close { width: 18px; height: 18px; border-radius: 3px; display: flex; align-items: center; justify-content: center; opacity: 0; color: var(--text); }
.tab .tab-close .material-icons { font-size: 14px; color: inherit; }
.tab:hover .tab-close { opacity: 1; }
.tab:hover { background: var(--bg-hover); }
.tab.active { background: var(--bg-tab-active); color: var(--text-strong); }
.tab.active::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent-2); }
.tab.active .tab-close { opacity: 1; }
.tab.tab-home .material-icons { color: var(--accent); }
.tab-filler { flex: 1; }

#breadcrumb { height: var(--crumb-h); display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: hidden; white-space: nowrap; }
#breadcrumb a { color: var(--text-muted); padding: 0 2px; border-radius: 3px; }
#breadcrumb a:hover { color: var(--text-strong); background: var(--bg-hover); }
#breadcrumb .sep { margin: 0 4px; color: var(--text-dim); font-size: 14px; }
#breadcrumb .material-icons { font-size: 14px; }
#editor-body { flex: 1; overflow-y: auto; position: relative; }

#statusbar {
  height: var(--statusbar-h); background: var(--bg-status); color: #ffffff; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 11px; flex-shrink: 0;
}
.sb-left, .sb-right { display: flex; align-items: center; height: 100%; }
.st-item { display: flex; align-items: center; gap: 4px; padding: 0 6px; height: 100%; color: #fff; white-space: nowrap; }
.st-item:hover { background: rgba(255, 255, 255, 0.12); }
.st-item .material-icons { font-size: 14px; }
.st-brand { font-weight: 600; }

/* ------------------------------------------------------------- 사이드바 뷰 */
.sb-filter { padding: 6px 10px; }
.sb-filter input {
  width: 100%; height: 26px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 0 8px; border-radius: 2px; font-size: 12px; outline: none;
}
.sb-filter input:focus { border-color: var(--accent-2); }
.sb-section-title { display: flex; align-items: center; height: 22px; padding: 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); cursor: pointer; user-select: none; }
.sb-section-title .material-icons { font-size: 16px; transition: transform 0.1s; }
.sb-section.collapsed .sb-section-title .material-icons { transform: rotate(-90deg); }
.sb-section.collapsed .sb-section-body { display: none; }

/* 탐색기 트리 */
.tree-folder { }
.tree-folder-title {
  display: flex; align-items: center; height: 22px; padding-left: 8px; cursor: pointer; color: var(--text); user-select: none; white-space: nowrap;
}
.tree-folder-title:hover { background: var(--bg-hover); }
.tree-folder-title .material-icons.chev { font-size: 16px; color: var(--text-muted); transition: transform 0.1s; }
.tree-folder.collapsed .tree-folder-title .material-icons.chev { transform: rotate(-90deg); }
.tree-folder.collapsed .tree-children { display: none; }
.tree-folder-title .material-icons.fold { font-size: 16px; color: var(--warn); margin: 0 4px 0 2px; }
.tree-folder-title .count { margin-left: auto; margin-right: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.tree-children { }
.tree-sub { display: flex; align-items: center; height: 22px; padding-left: 28px; font-size: 11px; color: var(--text-muted); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-file {
  display: flex; align-items: center; height: 22px; padding-left: 30px; padding-right: 8px; cursor: pointer; white-space: nowrap; color: var(--text); overflow: hidden;
}
.tree-file:hover { background: var(--bg-hover); }
.tree-file.selected { background: var(--bg-selected); color: var(--text-strong); }
.tree-file .material-icons { font-size: 15px; color: var(--accent); margin-right: 6px; flex-shrink: 0; }
.tree-file .fnum { font-family: var(--font-mono); font-size: 11px; color: var(--number); margin-right: 6px; min-width: 34px; flex-shrink: 0; }
.tree-file .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-file .fnew { width: 6px; height: 6px; border-radius: 50%; background: #f14c4c; margin-left: 4px; flex-shrink: 0; }
.tree-file.unavailable { opacity: 0.45; }
.tree-file .found-badge { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; background: var(--accent-2); color: #fff; padding: 0 5px; border-radius: 8px; }
.tree-empty { padding: 12px 16px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

/* 목차(outline) */
.outline-std { padding: 6px 12px 4px 20px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline-std b { color: var(--text); }
.index-group { }
.index-group-title {
  display: flex; align-items: center; height: 24px; padding-left: 8px; padding-right: 8px; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); user-select: none;
}
.index-group-title:hover { background: var(--bg-hover); }
.index-group-title .material-icons { font-size: 16px; color: var(--text-muted); transition: transform 0.1s; }
.index-group-title .gname { margin-left: 2px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-group-title .cnt { font-family: var(--font-mono); font-size: 10px; background: var(--accent-2); color: #fff; padding: 0 5px; border-radius: 8px; margin-left: 6px; }
.index-group-title.selected-index .gname { color: var(--accent); }
.index-group.collapsed .index-group-title .material-icons.chev { transform: rotate(-90deg); }
.index-group.collapsed .index-ol { display: none; }
.index-title {
  display: flex; align-items: flex-start; padding: 3px 8px 3px 0; cursor: pointer; line-height: 1.4; color: var(--text); font-size: 12.5px;
}
.index-title:hover { background: var(--bg-hover); }
.index-title .t { flex: 1; min-width: 0; }
.index-title .r { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; padding-top: 2px; }
.index-title .cnt { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; background: var(--accent-2); color: #fff; padding: 0 5px; border-radius: 8px; height: 15px; line-height: 15px; }
.index-title.selected-index { background: var(--bg-selected); }
.index-title.selected-index .t { color: var(--text-strong); font-weight: 600; }
.index-title.searched-index .t { color: var(--warn); }
.index-title.lv1 { padding-left: 20px; font-weight: 700; }
.index-title.lv2 { padding-left: 20px; font-weight: 600; }
.index-title.lv3 { padding-left: 34px; }
.index-title.lv4 { padding-left: 48px; color: var(--text-muted); }
.index-title.lv5 { padding-left: 62px; color: var(--text-muted); font-size: 12px; }
.index-title.lv6 { padding-left: 76px; color: var(--text-muted); font-size: 12px; }

/* 검색 뷰 */
.search-view form { padding: 8px 10px; display: flex; gap: 4px; }
.search-view input { flex: 1; height: 26px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 0 8px; border-radius: 2px; font-size: 12px; outline: none; }
.search-view input:focus { border-color: var(--accent-2); }
.search-view button { width: 28px; height: 26px; border: 1px solid var(--border-strong); border-radius: 2px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.search-view button:hover { color: var(--text); background: var(--bg-hover); }
.search-summary { padding: 4px 12px 6px; font-size: 11px; color: var(--text-muted); }
.search-summary b { color: var(--text); }
.search-result { display: block; padding: 4px 12px 6px 20px; border-left: 2px solid transparent; cursor: pointer; }
.search-result:hover { background: var(--bg-hover); border-left-color: var(--accent-2); }
.search-result .sr-head { font-family: var(--font-mono); font-size: 11px; color: var(--number); }
.search-result .sr-head span { color: var(--text-muted); font-family: var(--font-ui); margin-left: 6px; }
.search-result .sr-snippet { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.search-result .sr-snippet mark { background: var(--mark); color: var(--text-strong); }

/* 북마크 뷰 */
.bm-std { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.bm-item { display: flex; align-items: center; padding: 3px 8px 3px 20px; cursor: pointer; }
.bm-item:hover { background: var(--bg-hover); }
.bm-item .bm-num { font-family: var(--font-mono); font-size: 11px; color: var(--number); min-width: 40px; }
.bm-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); }
.bm-item button { color: var(--text-dim); display: flex; }
.bm-item button:hover { color: #f14c4c; }
.bm-item .material-icons { font-size: 14px; }
.bm-actions { padding: 6px 12px; display: flex; justify-content: flex-end; }
.bm-actions button { font-size: 11px; color: var(--text-muted); }
.bm-actions button:hover { color: #f14c4c; }

/* ------------------------------------------------------------ 시작 화면 */
.welcome { max-width: 1100px; margin: 0 auto; padding: 32px 40px 60px; }
.welcome h1 { font-size: 26px; font-weight: 300; color: var(--text-strong); letter-spacing: -0.5px; }
.welcome h1 b { font-weight: 600; color: var(--accent); }
.welcome .lead { color: var(--text-muted); padding-top: 6px; font-size: 13px; }
.welcome h2 { font-size: 15px; font-weight: 600; color: var(--text); padding: 28px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
/* 분야 타일 (첫 화면) */
.section-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding-top: 28px; max-width: 1000px; }
.section-tile {
  aspect-ratio: 1 / 1; border: 1px solid var(--border-strong); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-widget), var(--bg-editor)); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; color: var(--text);
}
.section-tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(79, 193, 255, 0.12); }
.section-tile .arrow { position: absolute; right: 22px; top: 22px; color: var(--accent); font-size: 18px; }
.section-tile .icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; background: rgba(79, 193, 255, 0.12); color: var(--accent); font-family: var(--font-mono); }
.section-tile h2 { font-size: 21px; font-weight: 700; padding: 20px 0 0; border: 0; margin: 0; letter-spacing: -0.3px; color: var(--text-strong); }
.section-tile p { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; padding-top: 8px; }
.section-tile .tile-cats { flex: 1; padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.section-tile .tile-cats li { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); border-bottom: 1px dashed var(--border); padding: 3px 0; }
.section-tile .tile-cats li span { font-family: var(--font-mono); color: var(--number); }
.section-tile .meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); padding-top: 12px; }
.section-tile .badge { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(63, 185, 80, 0.5); color: #3fb950; }
@media screen and (max-width: 900px) { .section-tile { aspect-ratio: auto; } }

.section-tile .tile-cats .tile-upd { color: var(--warn); border-bottom: 0; padding-top: 6px; }
.section-tile .tile-cats .tile-upd span { color: var(--warn); }

/* 업데이트 목록 */
.upd-list { display: flex; flex-direction: column; gap: 8px; }
.upd-item { border: 1px solid var(--border); border-left: 3px solid var(--accent-2); border-radius: 6px; padding: 10px 14px; background: var(--bg-widget); }
.upd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upd-head a { font-weight: 600; color: var(--text-strong); }
.upd-head a:hover { color: var(--link); }
.upd-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.upd-type { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.upd-type.new { color: #3fb950; border-color: rgba(63, 185, 80, 0.5); }
.upd-type.rev { color: var(--warn); border-color: rgba(220, 220, 170, 0.4); }
.upd-ver { font-family: var(--font-mono); font-size: 11px; color: var(--number); padding-top: 4px; }
.upd-reason { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding-top: 6px; }
.upd-empty { color: var(--text-muted); font-size: 12px; padding: 12px 0; }
.upd-badge { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 9px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #1e1e1e; vertical-align: middle; }
.law-ext::after { content: '↗'; font-size: 10px; margin-left: 1px; }
.std-finder.law-link { border-bottom-style: dashed; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 14px; border: 1px solid var(--border-strong); color: var(--text); font-size: 12px; cursor: pointer;
}
.cat-chip:hover { background: var(--bg-hover); }
.cat-chip.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.cat-chip .n { font-family: var(--font-mono); font-size: 10px; opacity: 0.8; }
.std-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.std-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-widget); cursor: pointer; min-width: 0;
}
.std-card:hover { border-color: var(--accent-2); background: var(--bg-hover); }
.std-card .material-icons { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.std-card .num { font-family: var(--font-mono); font-size: 12px; color: var(--number); min-width: 40px; flex-shrink: 0; }
.std-card .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.std-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.std-card.unavailable { opacity: 0.45; }
.std-card.found { border-color: var(--warn); }
.std-grid .grid-section { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); padding-top: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.welcome .recent { display: flex; flex-wrap: wrap; gap: 6px; }
.welcome .recent a { font-family: var(--font-mono); font-size: 12px; color: var(--link); padding: 4px 8px; border-radius: 4px; background: var(--bg-widget); border: 1px solid var(--border); }
.welcome .recent a:hover { border-color: var(--accent-2); }
.shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; font-size: 12px; color: var(--text-muted); }
.shortcuts div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.shortcuts kbd { color: var(--text); }
.welcome .note { font-size: 12px; color: var(--text-dim); padding-top: 10px; line-height: 1.7; }
.welcome .note code { font-family: var(--font-mono); color: var(--string); }

/* ------------------------------------------------------------- 문서 화면 */
.doc { padding: 0 0 120px; }
.doc-head { padding: 22px 32px 14px; border-bottom: 1px solid var(--border); background: var(--bg-editor); position: sticky; top: 0; z-index: 5; }
.doc-head .doc-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--comment); padding-bottom: 4px; }
.doc-head h1 { font-size: 20px; font-weight: 600; color: var(--text-strong); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.doc-head h1 .ref { font-family: var(--font-mono); font-size: 12px; color: var(--number); font-weight: 400; }
.doc-head .doc-meta { font-size: 11px; color: var(--text-muted); padding-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.doc-head .doc-actions { position: absolute; right: 24px; top: 20px; display: flex; gap: 4px; }
.doc-head .doc-actions button { width: 28px; height: 28px; border-radius: 4px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.doc-head .doc-actions button:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.doc-head .doc-actions .material-icons { font-size: 17px; }

.paragraph-list { padding: 8px 0 0; }
.p-title { padding: 18px 32px 6px 84px; color: var(--text-strong); font-weight: 600; position: relative; }
.p-title::before { content: '//'; position: absolute; left: 32px; font-family: var(--font-mono); color: var(--comment); font-weight: 400; }
.p-title.h2 { font-size: 16px; padding-top: 26px; }
.p-title.h3 { font-size: 14px; }
.p-title.h4 { font-size: 13.5px; font-style: italic; }
.p-title.h5, .p-title.h6 { font-size: 13px; color: var(--text); }
.p-title .ref { font-family: var(--font-mono); font-size: 11px; color: var(--number); font-weight: 400; margin-left: 8px; font-style: normal; }

.paragraph { display: flex; padding: 6px 32px 6px 0; line-height: 1.75; font-size: 14px; position: relative; border-left: 3px solid transparent; }
.paragraph:hover { background: var(--bg-hover); }
.paragraph.target { background: var(--target); border-left-color: var(--accent); }
.paragraph.matched { border-left-color: var(--warn); }
.paragraph.bookmarked { border-left-color: var(--accent-2); }
.para-num { width: 84px; flex-shrink: 0; text-align: right; padding-right: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); user-select: none; padding-top: 3px; }
.paragraph:hover .para-num, .paragraph.target .para-num { color: var(--accent); }
.para-body { flex: 1; min-width: 0; color: var(--text); }
.para-actions { position: absolute; right: 8px; top: 4px; display: none; gap: 2px; }
.paragraph:hover .para-actions, .paragraph.bookmarked .para-actions { display: flex; }
.para-actions button { width: 24px; height: 24px; border-radius: 3px; color: var(--text-muted); background: var(--bg-widget); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; }
.para-actions button:hover { color: var(--text-strong); border-color: var(--accent-2); }
.paragraph.bookmarked .bm-btn { color: var(--accent); }
.para-actions .material-icons { font-size: 14px; }

/* 문단 내부 (원본 데이터의 클래스) */
.para-body .para-inner-para + .para-inner-para { padding-top: 6px; }
.para-body .para-inner-number { padding-top: 4px; }
.para-body .para-inner-number-item, .para-body .para-inner-number-hanguel-item,
.para-body .idt-1, .para-body .idt-2, .para-body .idt-3, .para-body .sidt-1, .para-body .sidt-2, .para-body .sidt-3 { display: flex; padding: 2px 0; }
.para-body .para-inner-number-hanguel-item { margin-left: 30px; }
.para-body .idt-2 { margin-left: 30px; }
.para-body .idt-3 { margin-left: 60px; }
.para-body .sidt-2 { margin-left: 15px; }
.para-body .sidt-3 { margin-left: 30px; }
.para-body .para-number-para-num, .para-body .idt-1 > div:first-child, .para-body .idt-2 > div:first-child, .para-body .idt-3 > div:first-child { min-width: 34px; flex-shrink: 0; color: var(--keyword); font-family: var(--font-mono); font-size: 12.5px; padding-top: 2px; }
.para-body .sidt-1 > div:first-child, .para-body .sidt-2 > div:first-child, .para-body .sidt-3 > div:first-child { min-width: 22px; flex-shrink: 0; font-weight: bold; }
.para-body .para-num-item-para-con { flex: 1; min-width: 0; }
.para-body .comment { font-style: italic; font-size: 12px; color: var(--comment); padding-top: 4px; }
.para-body .cmt2 { color: var(--text-muted); }
.para-body b { font-weight: 600; color: var(--text-strong); }
.para-body i { font-style: italic; }
.para-body em, .para-body mark:not(.hl) { color: var(--string); background: transparent; font-weight: 600; }
.para-body sup { vertical-align: super; font-size: 10px; color: var(--accent); }
.para-body img { max-width: 100%; }
.para-body .underline1 { text-decoration: underline; }
.para-body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; line-height: 1.5; }
.para-body table td, .para-body table th { border: 1px solid var(--border-strong); padding: 4px 6px; vertical-align: top; }
.para-body table th { background: var(--bg-widget); }
.para-body .table { overflow-x: auto; padding: 8px 0; }
.std-finder, .mundan-finder { color: var(--link); cursor: pointer; border-bottom: 1px dotted var(--link); }
.std-finder:hover, .mundan-finder:hover { background: var(--bg-selected); }
.para-body a.outer-link, .html-content a.outer-link { color: var(--link); text-decoration: underline; }
mark.hl { background: var(--mark); color: var(--text-strong); padding: 0 1px; border-radius: 2px; }

/* 세법 */
.para-body .law-heading { color: var(--text-strong); }
.para-body .law-img { display: block; max-width: 100%; margin: 6px 0; background: #fff; padding: 4px; border-radius: 4px; }
.para-body .law-amend { color: var(--comment); font-size: 11px; font-family: var(--font-mono); }
.para-body .law-ref-note { color: var(--text-dim); font-size: 11px; padding-top: 4px; font-family: var(--font-mono); }
.para-body .law-ho { margin-left: 30px; }
.para-body .law-mok { margin-left: 60px; }
.para-body .law-hang > .para-number-para-num, .para-body .law-ho > .para-number-para-num, .para-body .law-mok > .para-number-para-num { min-width: 28px; }

/* HTML 문서 */
.html-content { padding: 24px 32px 24px 84px; line-height: 1.75; font-size: 13.5px; color: var(--text); }
.html-content h1, .html-content h2 { font-size: 16px; color: var(--text-strong); padding-top: 24px; font-weight: 600; }
.html-content h1:first-child, .html-content h2:first-child { padding-top: 0; }
.html-content h3 { padding-top: 14px; font-size: 14px; color: var(--accent); font-weight: 600; }
.html-content h4 { padding-top: 10px; font-size: 13px; color: var(--text); }
.html-content p { padding-top: 8px; color: var(--text); text-align: justify; }
.html-content table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.html-content td, .html-content th { border: 1px solid var(--border-strong); padding: 6px !important; font-size: 12.5px; text-indent: 0 !important; }
.html-content table tr:first-child td, .html-content th { background: var(--bg-widget); font-weight: 600; }
.html-content table p { text-indent: 0 !important; margin: 0 !important; padding: 0; }
.html-content .table { overflow-x: auto; }
.html-content * { letter-spacing: 0 !important; }
.html-content.revision p, .html-content.revision span, .html-content.revision div { font-family: inherit !important; font-size: 13.5px !important; line-height: 1.75 !important; color: var(--text) !important; }
.html-content .number-content { padding-top: 8px; display: flex; }
.html-content .number-content > div:first-child { min-width: 50px; }
.html-content sup { vertical-align: super; font-size: smaller; color: var(--accent); }
.html-content .law-info-table th { text-align: left; }
.html-content .law-indent-1 { padding-left: 16px; }
.html-content .law-indent-2 { padding-left: 32px; }
.html-content .law-indent-3 { padding-left: 48px; }
.html-content .law-indent-4 { padding-left: 64px; }
.html-content .law-table-text p { font-family: var(--font-mono); font-size: 11.5px; white-space: pre-wrap; padding-top: 2px; }

.empty-content { padding: 48px 32px; color: var(--text-muted); text-align: center; line-height: 1.8; }
.empty-content b { color: var(--text); }
.empty-content a { color: var(--link); }

.pager { display: flex; justify-content: space-between; gap: 12px; padding: 28px 32px 0 84px; }
.pager a { flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--text); background: var(--bg-widget); min-width: 0; }
.pager a.next { justify-content: flex-end; text-align: right; }
.pager a:hover { border-color: var(--accent-2); color: var(--text-strong); }
.pager a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager a small { color: var(--text-dim); font-family: var(--font-mono); flex-shrink: 0; }
.pager a.disabled { visibility: hidden; }
.pager .material-icons { font-size: 16px; color: var(--text-muted); }

/* --------------------------------------------------------- 명령 팔레트 */
#palette { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.35); }
.palette-box { width: 640px; max-width: calc(100% - 24px); margin: 60px auto 0; background: var(--bg-widget); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 32px var(--shadow); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.palette-input .material-icons { color: var(--text-muted); }
.palette-input input { flex: 1; height: 30px; background: var(--bg-input); border: 1px solid var(--accent-2); color: var(--text); padding: 0 8px; border-radius: 3px; outline: none; font-size: 13px; }
#palette-list { max-height: 50vh; overflow-y: auto; padding: 4px 0 6px; }
#palette-list li { display: flex; align-items: center; gap: 8px; padding: 5px 14px; cursor: pointer; font-size: 13px; color: var(--text); }
#palette-list li:hover, #palette-list li.active { background: var(--bg-selected); color: var(--text-strong); }
#palette-list .material-icons { font-size: 16px; color: var(--accent); }
#palette-list .pl-num { font-family: var(--font-mono); font-size: 11px; color: var(--number); min-width: 46px; }
#palette-list .pl-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#palette-list .pl-type { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
#palette-list .pl-empty { color: var(--text-muted); cursor: default; }
.palette-hint { display: flex; gap: 14px; padding: 6px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }

/* -------------------------------------------------------------- 토스트 */
#toast { position: fixed; right: 16px; bottom: 34px; background: var(--bg-widget); color: var(--text); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-2); padding: 8px 14px; border-radius: 4px; font-size: 12px; z-index: 5000; box-shadow: 0 4px 16px var(--shadow); }

/* -------------------------------------------------------------- 반응형 */
@media screen and (max-width: 900px) {
  :root { --activitybar-w: 0px; }
  .tb-menu, .brand-name, .tb-search kbd { display: none; }
  #workbench { flex-direction: column; }
  #activitybar { order: 3; width: 100%; height: 50px; flex-direction: row; justify-content: space-around; padding: 0; border-top: 1px solid var(--border); }
  #activitybar button, #activitybar a { width: auto; flex: 1; height: 50px; }
  #activitybar span { display: block; }
  #activitybar button.active::before { left: 25%; right: 25%; top: 0; bottom: auto; width: auto; height: 2px; }
  #sidebar { position: fixed; top: var(--titlebar-h); left: 0; bottom: calc(50px + var(--statusbar-h)); width: min(88vw, 340px); z-index: 1500; transform: translateX(-100%); transition: transform 0.15s; box-shadow: 4px 0 24px var(--shadow); }
  #app.sidebar-open #sidebar { transform: translateX(0); }
  #app.sidebar-hidden #sidebar { display: flex; }
  #sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1400; }
  .sb-head button { display: flex; }
  #sidebar-btn { display: none; }
  .doc-head { padding: 16px 16px 10px; }
  .doc-head .doc-actions { right: 10px; top: 12px; }
  .p-title { padding-left: 48px; padding-right: 16px; }
  .p-title::before { left: 16px; }
  .paragraph { padding-right: 12px; }
  .para-num { width: 48px; padding-right: 8px; font-size: 11px; }
  .html-content { padding: 16px; }
  .pager { padding: 20px 12px 0; }
  .welcome { padding: 20px 16px 60px; }
  .std-grid { grid-template-columns: 1fr; }
  .st-brand, #st-info { display: none; }
}

@media print {
  #titlebar, #activitybar, #sidebar, #statusbar, #tabbar, #breadcrumb, .doc-actions, .pager, .para-actions { display: none !important; }
  body { overflow: visible; }
  #editor-body { overflow: visible; }
}