/* 웹기초 — 범용 스타일 (base.css)
   어느 앱에나 통하는 것만 둔다. 앱 고유 이름은 여기 들어오지 않는다 — 그런 것은 앱의 css 로.
   순서: 토큰 → 기본 → 공통 부품 → 앱 셸 → 판·표·빈상태·모달 → 반응형
   앱 전용 스타일은 이 파일 '다음에' 붙인다 (나중에 붙는 쪽이 이긴다).

   치수·글꼴은 2026-09-20 시세판에서 다듬은 것을 사용자 승인으로 공용으로 올렸다
   (글자 축소·글꼴 통일·사이드바 레일·가로폭 조절).
   고칠 때는 공용/웹기초/체크리스트.md 를 지나간다. */

/* ================= 토큰 ================= */
:root, :root[data-theme="dark"] {
  --bg: #0e1013; --surface: #15181c; --surface-raised: #1c2025; --surface-hover: #252a30;
  --line: #2b3137; --line-strong: #646d77; --ink: #ebe8e2; --ink-muted: #9ba1a9;
  --gold: #e0ab45; --gold-soft: #2e2412; --on-gold: #17120a;
  --up: #ff6b66; --up-soft: #3a1a1a; --down: #5ea5ff; --down-soft: #14253d;
  --overlay: rgba(5, 6, 8, .64);
  --shadow-drawer: 0 0 0 1px #2b3137, 0 16px 40px #000000b3;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --focus-ring: 0 0 0 2px #0e1013, 0 0 0 4px #e0ab45;
  --good: #4fcf85; --warn: #ffab40; --bad: #ff6b66;
  --edge-shade: rgba(0, 0, 0, .28);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f3ef; --surface: #ffffff; --surface-raised: #ffffff; --surface-hover: #eceae4;
  --line: #dcd8cf; --line-strong: #8d8a82; --ink: #1a1c20; --ink-muted: #5a6069;
  --gold: #8a5a00; --gold-soft: #f6e2b8; --on-gold: #ffffff;
  --up: #bd1e1e; --up-soft: #fde4e2; --down: #1d5fd0; --down-soft: #e1ecfd;
  --overlay: rgba(20, 22, 26, .40);
  --shadow-drawer: 0 0 0 1px #dcd8cf, 0 16px 40px #14161a2e;
  --shadow-pop: 0 12px 32px rgba(20, 22, 26, .16);
  --focus-ring: 0 0 0 2px #f4f3ef, 0 0 0 4px #8a5a00;
  --good: #1c7a3c; --warn: #a85c00; --bad: #bd1e1e;
  --edge-shade: rgba(20, 22, 26, .16);
  color-scheme: light;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --topbar-height: 50px; --sidebar-left-width: 224px; --sidebar-right-width: 300px;
  --sidebar-rail-width: 56px; --resizer-width: 5px;
  --touch-target: 44px; --control-height: 32px;
  --z-topbar: 20; --z-resizer: 30; --z-overlay: 40; --z-drawer: 50;
  /* 사용자가 쓰는 글꼴은 Noto Sans KR 하나. 숫자는 tabular-nums 로 자릿수를 맞춘다 */
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "Noto Sans KR", ui-monospace, Consolas, monospace;
  --z-modal: 60; --z-pop: 70;
}

/* ================= 기본 ================= */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--font-sans); font-size: 13px; line-height: 20px; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
.num, .sp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; white-space: nowrap; }
.sub, .sp-muted { color: var(--ink-muted); }
.sub { font-size: 12px; }
.up { color: var(--up); } .down { color: var(--down); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sp-sprite { display: none; }
:where(.sp-btn, .sp-iconbtn, .sp-nav-item, .linkbtn, .chip, input, select, .sp-brand-name):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ================= 공통 부품 ================= */
.sp-btn, .linkbtn {
  font-size: 12px; font-weight: 500; height: var(--control-height); padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--surface-raised); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; white-space: nowrap;
}
.sp-btn:hover, .linkbtn:hover { background: var(--surface-hover); border-color: var(--gold); }
.sp-btn-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.sp-btn-primary:hover { background: var(--gold); filter: brightness(1.08); }
.linkbtn { height: 28px; padding: 0 var(--space-3); font-size: 11px; }

.sp-iconbtn {
  position: relative;
  width: var(--control-height); height: var(--control-height); border-radius: var(--radius-md);
  border: 0; background: transparent; color: var(--ink-muted); cursor: pointer;
  display: inline-grid; place-items: center; flex: none; text-decoration: none;
}
.sp-iconbtn[hidden] { display: none; }
/* 아이콘 위 개수 뱃지 (공식 새 글) */
.sp-count {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full); background: var(--gold); color: var(--on-gold);
  font-family: var(--font-mono); font-size: 10px; line-height: 15px; font-weight: 600; text-align: center;
}
.sp-count[hidden] { display: none; }
.sp-iconbtn:hover { background: var(--surface-hover); color: var(--ink); }
.sp-iconbtn[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold); }
.sp-iconbtn-outline { border: 1px solid var(--line-strong); }
@media (pointer: coarse) { .sp-iconbtn { width: var(--touch-target); height: var(--touch-target); } }

.sp-badge, .badge, .pill {
  display: inline-flex; align-items: center; gap: 2px; font-size: 11px; line-height: 18px;
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  background: var(--surface-hover); color: var(--ink); white-space: nowrap; font-weight: 500;
}
.sp-badge-gold { background: var(--gold-soft); color: var(--gold); }
.sp-badge-up { background: var(--up-soft); color: var(--up); }
.sp-badge-down { background: var(--down-soft); color: var(--down); }
.pill { background: var(--up-soft); color: var(--up); border-radius: var(--radius-full); padding: 0 7px; min-width: 20px; justify-content: center; }
.pill:empty { display: none; }
button.badge { border: 0; cursor: pointer; }
button.badge:hover { filter: brightness(1.12); }

/* 등락 */
.sp-chg { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sp-chg-up { color: var(--up); } .sp-chg-down { color: var(--down); } .sp-chg-flat { color: var(--ink-muted); }
.sp-chg.sp-badge { font-size: 11px; }

/* 입력 */
select, input[type=text], input[type=number], input[type=search] {
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  height: var(--control-height); padding: 0 var(--space-3); min-width: 0; color: var(--ink);
}
input::placeholder { color: var(--ink-muted); }

/* 칩 (필터) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted);
  border-radius: var(--radius-full); padding: 0 var(--space-3); height: 30px; cursor: pointer; font-size: 12px; white-space: nowrap;
}
.chip:hover { background: var(--surface-hover); color: var(--ink); }
.chip.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }

/* ================= 앱 셸 ================= */
.sp-app { container-type: inline-size; container-name: sp-app; position: relative; height: 100dvh; overflow: hidden; background: var(--bg); }
.sp-shell {
  display: grid; height: 100%;
  grid-template-columns: var(--sidebar-left-width) var(--resizer-width) minmax(0, 1fr) var(--sidebar-right-width);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas: "left rez top top" "left rez main right";
}
.sp-shell > .sp-sidebar { grid-area: left; }
.sp-shell > .sp-resizer { grid-area: rez; }
.sp-shell > .sp-topbar { grid-area: top; }
.sp-shell > .sp-main { grid-area: main; }
.sp-shell > .sp-aside { grid-area: right; }

/* 사이드바 경계 — 끌어서 가로폭을 바꾼다. 두 번 누르면 기본 너비로 */
.sp-resizer {
  border: 0; padding: 0; margin: 0; z-index: var(--z-resizer);
  background: var(--line); cursor: col-resize; touch-action: none;
}
.sp-resizer:hover, .sp-resizer:focus-visible, .sp-app.is-resizing .sp-resizer { background: var(--gold); outline: none; box-shadow: none; }
.sp-app.is-resizing { cursor: col-resize; user-select: none; }
.sp-app.is-resizing .sp-main, .sp-app.is-resizing .sp-aside { pointer-events: none; }

/* 접은 사이드바(레일) — 아이콘만 남긴다. 좁은 화면(사이드바가 서랍이 되는 곳)에서는 쓰지 않는다 */
@container sp-app (min-width: 768px) {
  /* 폭은 .sp-shell 에 준다 — 컨테이너(.sp-app) 자신에게는 컨테이너 쿼리가 걸리지 않는다 */
  .sp-app.is-rail .sp-shell { --sidebar-left-width: var(--sidebar-rail-width); }
  .sp-app.is-rail .sp-nav-label, .sp-app.is-rail .sp-nav-title,
  .sp-app.is-rail .sp-brand-name > span:last-child,
  .sp-app.is-rail .sp-sidebar-foot { display: none; }
  /* 레일에서 감출 것이 더 있으면 앱 css 에서 .sp-app.is-rail … { display: none } 으로 더한다 */
  .sp-app.is-rail .sp-brand { padding: 0; justify-content: center; }
  .sp-app.is-rail .sp-nav-item { position: relative; justify-content: center; padding: 0; gap: 0; }
  .sp-app.is-rail .sp-nav-item .pill { position: absolute; top: -2px; right: 2px; margin: 0; }
}
.sp-main { overflow: auto; padding: var(--space-6); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sp-overlay { position: absolute; inset: 0; background: var(--overlay); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sp-overlay.is-on { opacity: 1; pointer-events: auto; }

/* 왼쪽 사이드바 */
.sp-sidebar { background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.sp-brand { height: var(--topbar-height); box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); flex: none; }
.sp-brand-name { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.sp-brand-name > span:last-child { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-logo { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.sp-nav { flex: 1; overflow: auto; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); }
.sp-nav-section { display: flex; flex-direction: column; gap: 2px; }
.sp-nav-title { font-size: 11px; line-height: 15px; color: var(--ink-muted); padding: 0 var(--space-3) var(--space-1); }
.sp-nav-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-height);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none;
  color: var(--ink-muted); text-decoration: none; font-size: 13px; text-align: left; cursor: pointer;
}
.sp-nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.sp-nav-item[aria-current="page"] { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.sp-nav-item > .sp-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-nav-item .pill, .sp-nav-item .sp-badge { margin-left: auto; }
.sp-sidebar-foot { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); font-size: 11px; line-height: 16px; color: var(--ink-muted); flex: none; }
.sp-close { display: none; }

/* 상단바 */
.sp-topbar { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) 0 var(--space-6); z-index: var(--z-topbar); min-width: 0; }
.sp-topbar-title { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.sp-topbar-spacer { flex: 1; }
.sp-topbar-actions { display: flex; align-items: center; gap: var(--space-1); }
.sp-menu-btn, .sp-panel-btn { display: none; }

/* 오른쪽 요약 패널 */
.sp-aside { background: var(--surface); border-left: 1px solid var(--line); overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.sp-aside-head { display: none; align-items: center; justify-content: space-between; }

/* 패널 / 카드 */
.sp-panel, .card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card { margin: 0; overflow: hidden; }
.sp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sp-panel-head h3 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.sp-panel-body { padding: var(--space-3) var(--space-4); }
.sp-panel-flush { padding: 0; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-list li:last-child { border-bottom: 0; }
.sp-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list-link { border: 0; background: none; padding: 0; color: var(--ink); text-align: left; cursor: pointer; font-size: 12px; }
.sp-list-link:hover { color: var(--gold); text-decoration: underline; }
.sp-list-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* 숫자 카드 */
.sp-stat { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sp-stat-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.sp-stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; line-height: 24px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-stat-value small { font-family: var(--font-sans); font-size: 11px; color: var(--ink-muted); font-weight: 400; margin-left: var(--space-1); }
.sp-stat-value.sp-stat-text { font-family: var(--font-sans); font-size: 17px; font-weight: 600; }
.sp-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }

/* ================= 판 · 표 · 빈 상태 · 모달 ================= */
.bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bar input[type=search] { flex: 1 1 220px; max-width: 420px; }

.card > h2, .card > h3 { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 18px; font-weight: 600; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card .count { color: var(--ink-muted); font-weight: 400; font-size: 11px; }
.pad { padding: var(--space-3) var(--space-4); }
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); font-size: 12px; }
/* 좌우로 잘렸다는 티 — 점 대신 그림자로 (NN/g: 잘린 것은 보이게) */
.tscroll { background:
  linear-gradient(to right, var(--surface-raised) 30%, transparent) left / 24px 100% no-repeat,
  linear-gradient(to left, var(--surface-raised) 30%, transparent) right / 24px 100% no-repeat,
  radial-gradient(farthest-side at 0 50%, var(--edge-shade), transparent) left / 10px 100% no-repeat,
  radial-gradient(farthest-side at 100% 50%, var(--edge-shade), transparent) right / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* 빈 상태 — 세 가지를 구분해 쓴다 (아직 없음 / 안 걸림 / 권한 없음) */
.empty-title { display: block; color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: var(--space-1); }
.empty-hint { display: block; margin-bottom: var(--space-3); }
.empty .linkbtn, .empty .sp-btn { margin: 0 auto; }

/* 표 */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-weight: 500; color: var(--ink-muted); font-size: 12px; padding: var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-raised); }
table.t td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-hover); }
/* 머리글은 칸 이름(한글)이라 숫자 글꼴을 물려받으면 안 된다 — 고정폭 글꼴에 한글이 없어 네모로 깨진다 */
table.t th.num { text-align: right; font-family: var(--font-sans); font-variant-numeric: normal; }
.tscroll { overflow-x: auto; }

/* 모달 */
.modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--space-4);
  backdrop-filter: blur(7px) saturate(.85); -webkit-backdrop-filter: blur(7px) saturate(.85); }
.modal[hidden] { display: none; }
.modal-box { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); max-width: min(1100px, 100%); max-height: 100%; overflow: auto; position: relative; padding: var(--space-4); }
.modal-x { position: absolute; right: var(--space-2); top: var(--space-2); border: 0; background: var(--surface-hover); color: var(--ink); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; z-index: 2; }
.modal h3 { margin: 0 40px var(--space-2) 0; font-size: 14px; }

/* ================= 반응형 (기준은 앱 폭) ================= */
@container sp-app (max-width: 1199px) {
  .sp-shell { grid-template-columns: var(--sidebar-left-width) var(--resizer-width) minmax(0, 1fr); grid-template-areas: "left rez top" "left rez main"; }
  .sp-panel-btn { display: inline-grid; }
  .sp-shell > .sp-aside {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--sidebar-right-width), 88%);
    box-sizing: border-box; z-index: var(--z-drawer); box-shadow: var(--shadow-drawer);
    transform: translateX(105%); transition: transform .22s ease;
  }
  .sp-shell > .sp-aside.is-open { transform: none; }
  .sp-aside-head { display: flex; }
}
@container sp-app (max-width: 767px) {
  .sp-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sp-menu-btn, .sp-close { display: inline-grid; }
  .sp-resizer, .sp-rail-btn { display: none; }
  .sp-shell > .sp-sidebar {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(var(--sidebar-left-width), 84%);
    z-index: var(--z-drawer); box-shadow: var(--shadow-drawer);
    transform: translateX(-105%); transition: transform .22s ease;
  }
  .sp-shell > .sp-sidebar.is-open { transform: none; }
  .sp-topbar { padding: 0 var(--space-2); gap: var(--space-2); }
  .sp-topbar-title { display: none; }
  .sp-main { padding: var(--space-4); }
  .sp-iconbtn { width: var(--touch-target); height: var(--touch-target); }
  .sp-nav-item { min-height: var(--touch-target); }
  .sp-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .sp-stat-value { font-size: 16px; line-height: 20px; }

  /* 표를 카드로 편다 — UI.table 이 붙여 주는 t-cards 에만 적용 (칸 이름은 td 의 data-h) */
  .t-cards table.t, .t-cards tbody, .t-cards tr, .t-cards td { display: block; width: auto; }
  .t-cards thead { display: none; }
  .t-cards { overflow-x: visible; background: none; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
  .t-cards tr { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
  .t-cards td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); border: 0; padding: var(--space-1) var(--space-2); }
  .t-cards td::before { content: attr(data-h); color: var(--ink-muted); font-size: 11px; flex: none; }
  .t-cards td:empty, .t-cards td[data-h=""]:empty { display: none; }
  .t-cards tbody tr:hover td { background: none; }
}
@media (prefers-reduced-motion: reduce) { .sp-shell > .sp-aside, .sp-shell > .sp-sidebar, .sp-overlay { transition: none; } }