/* ==========================================================================
 * base.css — DrERP 구조/컴포넌트 (스킨 비의존)
 *   · 색·폰트·둥글기·그림자는 전부 var(--token) 으로만 참조. 하드코딩 금지.
 *   · 토큰 값은 "스킨"(skins/<name>.css)이 정의한다 → 스킨만 바꾸면 전체 리스킨.
 *   · 페이지는 <head> 에  [스킨 CSS] → [base.css] 순으로 링크(또는 drerp.css 번들).
 * 토큰 계약(스킨이 반드시 정의): docs/DESIGN_SYSTEM.md "스킨 계약" 참조.
 * ========================================================================== */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
a{color:var(--primary)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.neg{color:var(--neg)} .pos{color:var(--pos)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-2)}

/* 앱 셸 */
.dr-app{display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;min-height:100%}
.dr-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.dr-nav{border-right:1px solid var(--line);background:var(--surface);padding:10px 8px;
  display:flex;flex-direction:column;gap:1px;font-size:13px;overflow:auto}
.dr-nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:var(--ink-2);text-decoration:none;cursor:pointer}
.dr-nav a:hover{background:var(--surface-2);color:var(--ink)}
.dr-nav a.on{background:var(--primary-wash);color:var(--primary);font-weight:600}
.dr-main{padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--surface-2)}
@media (max-width:720px){
  .dr-app{grid-template-columns:1fr}
  .dr-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
}

/* 카드 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:16px}

/* 버튼 */
.btn{font:inherit;font-size:13px;font-weight:500;border-radius:8px;padding:8px 14px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-2)}
.btn.danger{color:var(--neg);border-color:var(--neg)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 입력 */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;color:var(--ink-2);font-weight:500}
.field input,.field select{font:inherit;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--surface);color:var(--ink)}
.field input.amt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}

/* 포커스(키보드 우선) */
.btn:focus-visible,.field input:focus-visible,.field select:focus-visible,
.dr-nav a:focus-visible,.seg button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* 데이터 그리드(fgrid) */
.fgbox{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
table.fg{border-collapse:collapse;width:100%;font-size:13px}
table.fg th,table.fg td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.fg thead th{position:sticky;top:0;background:var(--surface-3);color:var(--ink-2);
  font-weight:600;font-size:11.5px;border-bottom:1px solid var(--line-2)}
table.fg td.num,table.fg th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table.fg tbody tr:hover{background:var(--surface-2)}
table.fg td.cell-focus{outline:2px solid var(--primary);outline-offset:-2px;background:var(--primary-wash)}
table.fg tfoot td{font-weight:600;background:var(--surface-3);border-top:1px solid var(--line-2)}
.row-stripe{display:inline-block;width:3px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:7px}

/* 배지/필 */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;line-height:1.3}
.pill.sell{background:var(--primary-wash);color:var(--primary)}
.pill.buy{background:var(--buy-wash);color:var(--buy)}
.pill.in{background:var(--pos-wash);color:var(--pos)}
.pill.ret{background:var(--neg-wash);color:var(--neg)}
.pill.tax{background:var(--surface-3);color:var(--ink-2)}
.pill.vip{background:var(--warn-wash);color:var(--warn)}
.pill.lock{background:var(--lock-wash);color:var(--lock)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.kpi .k{font-size:11px;color:var(--ink-2)}
.kpi .v{font-size:19px;font-weight:600;margin-top:3px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow)}

/* 세그먼트(테마/스킨 선택 등) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12px;padding:7px 13px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}