/* ══════════════════════════════════════════════════════════════════════
   finance-hub · 기초 — 리셋 · 타이포 · 셸 골격
   tokens.css 뒤에 싣는다. 리터럴 값은 여기에도 두지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.6;
  /* 한글은 어절 단위로 끊는다. 영문/숫자 긴 토큰은 그때만 강제 줄바꿈. */
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

/* 금액·수치는 자리폭을 고정한다. 표에서 자릿수가 흔들리면 눈이 줄을 놓친다. */
.num,.kpi__val,td.n,th.n,.stat__val{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* 음수는 색이 아니라 괄호로 쓴다 — 회계 관행. 색은 보조일 뿐이다. */
.neg{ color:var(--neg); }

/* 증감 — 한국 관행(△적 ▽청). 클래스 이름에 up/down 을 쓰되 색은 토큰이 정한다. */
.delta--up{ color:var(--delta-up); }
.delta--down{ color:var(--delta-down); }
.delta--flat{ color:var(--delta-flat); }

h1,h2,h3,h4{ margin:0; color:var(--ink); letter-spacing:-.02em; line-height:1.3; }
h1{ font-size:var(--fs-page); font-weight:800; letter-spacing:-.028em; }
h2{ font-size:var(--fs-h2); font-weight:700; }
h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 var(--sp-3); }
p:last-child{ margin-bottom:0; }

a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-ink); text-decoration:underline; }

/* ★ 포커스를 지우지 않는다. outline:none 은 검증기가 error 로 잡는다. */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-1);
}

img,svg{ vertical-align:middle; }
svg{ flex:none; }

hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-5) 0; }

::selection{ background:var(--brand-soft-2); }

/* 스크롤바 — 크롬을 조용하게. 색은 veil 로만 만든다. */
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--veil),.22) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:rgba(var(--veil),.18); border-radius:var(--r-pill);
  border:3px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(var(--veil),.30); background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ══════════════════════════════════════════════════════════════════════
   셸 — 사이드바 + 본문
   골격·폭·틴트 네비는 finance-simulator 를 승계한다. 본문 문법만 새로 짠다.
   ══════════════════════════════════════════════════════════════════════ */

.shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}

/* ── 사이드바 ─────────────────────────────────────────────────── */
.sidebar{
  display:flex; flex-direction:column;
  background:var(--surface-2);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
  overflow:hidden auto;
}

.sidebar__brand{
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
/* align-self 가 없으면 세로 flex 컨테이너가 stretch 시켜 width:auto 가
   사이드바 폭까지 늘어난다 — 로고가 가로로 찌그러진다(실측 203x18). */
.sidebar__logo{ height:18px; width:auto; align-self:flex-start; opacity:.95; }
.sidebar__title{
  font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}

.nav{ flex:1; padding:0 var(--sp-2) var(--sp-4); }

.nav__sec{
  padding:var(--sp-4) var(--sp-2) var(--sp-1);
  font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}

.nav__item{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:7px var(--sp-2);
  border-radius:var(--r-2);
  font-size:12.5px; font-weight:500;
  color:var(--body); cursor:pointer;
  text-decoration:none;
  position:relative;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav__item:hover{ background:rgba(var(--veil),.05); color:var(--ink); text-decoration:none; }

/* 활성 — 세로 컬러바를 쓰지 않는다.
   사이드바 바닥이 warm grey 이므로, 활성 항목만 **흰 면으로 떠오르게** 한다.
   색을 더하는 대신 «높이» 로 구분하는 것이다. 브랜드색은 아이콘 하나에만
   남아 지면에 주황 덩어리가 생기지 않는다. */
.nav__item.is-active{
  background:var(--surface);
  box-shadow:var(--shadow);
  color:var(--ink); font-weight:700;
}

/* 아이콘 틴트 — 카테고리 구분색. 상태를 뜻하지 않는다. */
.nav__ico{ display:inline-flex; width:17px; height:17px; color:var(--muted); }
.nav__item.is-active .nav__ico{ color:var(--brand); }
.nav__item[data-tint="iris"]   .nav__ico{ color:var(--c-iris); }
.nav__item[data-tint="azure"]  .nav__ico{ color:var(--c-azure); }
.nav__item[data-tint="cyan"]   .nav__ico{ color:var(--c-cyan); }
.nav__item[data-tint="violet"] .nav__ico{ color:var(--c-violet); }
.nav__item[data-tint="tang"]   .nav__ico{ color:var(--c-tang); }
.nav__item[data-tint="pink"]   .nav__ico{ color:var(--c-pink); }
.nav__item[data-tint="green"]  .nav__ico{ color:var(--c-green); }
.nav__item[data-tint="amber"]  .nav__ico{ color:var(--c-amber); }
.nav__item[data-tint="rose"]   .nav__ico{ color:var(--c-rose); }
.nav__item[data-tint="blue"]   .nav__ico{ color:var(--c-blue); }
.nav__item[data-tint="slate"]  .nav__ico{ color:var(--c-slate); }
.nav__item.is-active[data-tint] .nav__ico{ color:var(--brand); }

/* 외부 링크(연계 서비스) — 나가는 것임을 아이콘으로 말한다. */
.nav__ext{ margin-left:auto; color:var(--faint); }

/* 하위메뉴 — 기본은 접힘. 설정은 하루에 한 번 여는 곳이다.
   단 설정 계열 화면에 있는 동안에는 항상 편다 — 지금 있는 자리를
   감추는 것은 정리가 아니라 실종이다. */
.nav__caret{
  margin-left:auto; display:inline-flex; color:var(--faint);
  transition:transform var(--dur-1) var(--ease);
}
.nav__item[aria-expanded="true"] .nav__caret{ transform:rotate(90deg); }
.nav__subs{ padding:2px 0 var(--sp-2); }
.nav__sub{
  display:block; padding:5px var(--sp-2) 5px calc(var(--sp-4) + 13px);
  border-radius:var(--r-2);
  font-size:12px; color:var(--muted); text-decoration:none;
}
.nav__sub:hover{ background:rgba(var(--veil),.05); color:var(--ink); text-decoration:none; }
.nav__sub.is-active{ color:var(--ink); font-weight:700;
                     background:var(--surface); box-shadow:var(--shadow); }

.sidebar__user{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--line);
}
.sidebar__avatar{
  width:26px; height:26px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-2); color:var(--muted);
  font-size:11px; font-weight:800;
}
.sidebar__uinfo{ min-width:0; }
.sidebar__uname{ font-size:12px; font-weight:700; color:var(--ink);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__umail{ font-size:11px; color:var(--faint);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); padding:var(--sp-2) var(--sp-4) var(--sp-4);
}
.sidebar__logout{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:11.5px; color:var(--muted);
}
.sidebar__logout:hover{ color:var(--ink); text-decoration:none; }

/* ── 본문 ─────────────────────────────────────────────────────── */
.main{ display:flex; flex-direction:column; min-width:0; }

.topbar{
  display:flex; align-items:center; gap:var(--sp-2);
  height:var(--topbar-h); padding:0 var(--sp-5);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky; top:0; z-index:var(--z-dock);
}
.topbar__title{ font-size:13px; font-weight:700; color:var(--ink); }
.topbar__spacer{ flex:1; }
.topbar__burger{ display:none; }

.page{ flex:1; padding:var(--sp-5); min-width:0; }

.page__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-5);
}
.page__lead{
  margin-top:var(--sp-2); color:var(--muted);
  font-size:13px; max-width:var(--measure);
}
.page__act{ display:flex; align-items:center; gap:var(--sp-2); }

/* 화면별 설정형 조작 열. 비어 있으면 자리째 사라진다. */
.ctl{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
body.no-ctl .ctl{ display:none; }

/* 서랍 막 — 좁은 화면에서 사이드바가 서랍이 될 때만 쓴다. */
.navscrim{
  position:fixed; inset:0; z-index:var(--z-scrim);
  background:rgba(var(--veil),.35);
}

/* 스크린리더 전용 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}