/* ═══════════════════════════════════════════════════════════
   financial — 와일리 재무팀 업무 도구
   디자인 기준
     · 사이드바는 와일리 사이트의 검정, 워드마크는 보라→마젠타 그라디언트
     · 작업 영역은 밝게 — 표와 숫자를 오래 봐야 하는 화면이다
     · 액센트는 한 가지. 그라디언트는 로고·주요 버튼·핵심 지표에만
   ═══════════════════════════════════════════════════════════ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  /* 와일리 브랜드 */
  --w-mag:#c0269c;
  --w-vio:#5b34e0;
  --w-grad:linear-gradient(120deg,var(--w-mag) 0%,var(--w-vio) 100%);
  --brand:#6d2fda;
  --brand-ink:#4a1fa8;
  --brand-soft:#f3efff;
  --brand-line:#dcd0fb;

  /* 먹 */
  --ink:#14161a;
  --ink-2:#3f454e;
  --mute:#6b7280;
  --faint:#9aa1ab;

  /* 면 */
  --bg:#f6f7f9;
  --panel:#ffffff;
  --line:#e6e8ec;
  --line-2:#f0f2f5;

  /* 사이드바 */
  --nav-bg:#0b0b0f;
  --nav-ink:#e9e9ee;
  --nav-mute:#8b8b98;
  --nav-hover:#17171e;

  /* 상태 */
  --ok:#0f7b52;      --ok-bg:#e7f6ef;
  --warn:#9a6a10;    --warn-bg:#fdf4e3;
  --danger:#b3261e;  --danger-bg:#fdeceb;
  --info:#1f5fa8;    --info-bg:#eaf2fc;

  --r:10px;
  --r-sm:7px;
  --shadow:0 1px 2px rgba(16,18,22,.05), 0 6px 20px rgba(16,18,22,.05);
  --font:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic","맑은 고딕",sans-serif;
  --mono:"SF Mono",Consolas,"Cascadia Mono",monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ── 뼈대 ────────────────────────────────────────── */
.shell{ display:flex; min-height:100vh; }

.nav{
  flex:0 0 236px; background:var(--nav-bg); color:var(--nav-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.nav__brand{ padding:26px 22px 22px; }
.wordmark{
  font-size:25px; font-weight:800; letter-spacing:-.045em; line-height:1;
  background:var(--w-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; display:inline-block;
}
.nav__sub{ display:block; margin-top:7px; font-size:11px; color:var(--nav-mute); letter-spacing:.12em; font-weight:600; }

.nav__menu{ padding:6px 12px; display:flex; flex-direction:column; gap:2px; }
.nav__link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:8px;
  color:var(--nav-mute); font-size:14px; font-weight:600; letter-spacing:-.01em;
  transition:background .12s, color .12s;
}
.nav__link:hover{ background:var(--nav-hover); color:var(--nav-ink); }
.nav__link.is-on{ background:var(--nav-hover); color:#fff; }
.nav__link.is-on .nav__dot{ background:var(--w-grad); }
.nav__dot{ width:6px; height:6px; border-radius:50%; background:#33333f; flex:0 0 auto; }

.nav__foot{ margin-top:auto; padding:18px 22px 22px; border-top:1px solid #1c1c24; }
.nav__foot p{ margin:0; font-size:11.5px; color:var(--nav-mute); line-height:1.5; }
.nav__foot b{ color:#c9c9d4; font-weight:600; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:22px 32px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  position:sticky; top:0; z-index:20;
}
.topbar h1{ margin:0; font-size:21px; font-weight:700; letter-spacing:-.03em; }
.topbar p{ margin:4px 0 0; color:var(--mute); font-size:13.5px; }
.topbar__act{ display:flex; gap:8px; flex:0 0 auto; }

.page{ padding:26px 32px 56px; max-width:1180px; }
/* #body 로 감싼 화면이 있어 자식 선택자(>)로 두면 여백이 통째로 안 먹는다 */
.page section{ margin-bottom:30px; }

.sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 12px; }
.sec-h h2{ margin:0; font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.sec-h .hint{ font-size:12.5px; color:var(--mute); }

/* ── 버튼 ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink);
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s;
}
.btn:hover{ background:#fafbfc; border-color:#d5d9df; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn--brand{ background:var(--w-grad); border-color:transparent; color:#fff; }
.btn--brand:hover{ filter:brightness(1.07); background:var(--w-grad); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--mute); }
.btn--ghost:hover{ background:var(--line-2); color:var(--ink); }
.btn--sm{ padding:6px 11px; font-size:12.5px; border-radius:7px; }

/* ── 지표 카드 ───────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 18px; box-shadow:var(--shadow); min-width:0;
}
.kpi__label{ font-size:12.5px; color:var(--mute); font-weight:600; display:flex; align-items:center; gap:6px; }
.kpi__value{ font-size:30px; font-weight:800; letter-spacing:-.04em; margin-top:7px; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi__value small{ font-size:14px; font-weight:600; color:var(--mute); margin-left:3px; letter-spacing:0; }
.kpi__foot{ font-size:12px; color:var(--faint); margin-top:5px; }
.kpi--hero{ background:var(--w-grad); border-color:transparent; color:#fff; }
.kpi--hero .kpi__label{ color:rgba(255,255,255,.82); }
.kpi--hero .kpi__value small{ color:rgba(255,255,255,.8); }
.kpi--hero .kpi__foot{ color:rgba(255,255,255,.72); }
.kpi--alert .kpi__value{ color:var(--danger); }

/* ── 패널 ────────────────────────────────────────── */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.panel__head{
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.panel__head h2{ margin:0; font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
.panel__body{ padding:18px; }
.panel__body--flush{ padding:0; }

/* ── 필터 칩 ─────────────────────────────────────── */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:6px 13px; border-radius:99px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2);
  font-size:12.5px; font-weight:600; cursor:pointer; transition:.12s;
}
.chip:hover{ border-color:#cfd4da; background:#fafbfc; }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip__n{ margin-left:5px; opacity:.6; font-variant-numeric:tabular-nums; }

/* ── 표 ──────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th,.tbl td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl thead th{
  background:#fbfbfc; border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:700; color:var(--mute); letter-spacing:.04em; text-transform:uppercase;
  position:sticky; top:0; z-index:1;
}
.tbl tbody tr:hover{ background:#fcfcfd; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl .strong{ font-weight:700; }
.tbl__wrap{ overflow-x:auto; }
.tbl__empty{ padding:44px 20px; text-align:center; color:var(--mute); font-size:13.5px; }
.tbl__empty b{ display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:5px; }

/* ── 배지 ────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap;
}
.badge--ok{ background:var(--ok-bg); color:var(--ok); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); }
.badge--danger{ background:var(--danger-bg); color:var(--danger); }
.badge--info{ background:var(--info-bg); color:var(--info); }
.badge--mute{ background:var(--line-2); color:var(--mute); }

.dday{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.02em; }
.dday--now{ color:var(--danger); }
.dday--soon{ color:var(--warn); }
.dday--done{ color:var(--faint); text-decoration:line-through; }

/* 상태 순환 버튼 */
.state{
  border:1px solid var(--line); background:var(--panel); border-radius:99px;
  padding:4px 11px; font-size:11.5px; font-weight:700; cursor:pointer; transition:.12s;
}
.state:hover{ border-color:#cbd0d6; }
.state[data-v="todo"]{ color:var(--mute); }
.state[data-v="doing"]{ background:var(--info-bg); border-color:transparent; color:var(--info); }
.state[data-v="done"]{ background:var(--ok-bg); border-color:transparent; color:var(--ok); }

/* ── 입력 ────────────────────────────────────────── */
.field{ display:block; margin-bottom:14px; }
.field__label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; }
.field__hint{ font-size:12px; color:var(--mute); margin-top:6px; }
.input,.textarea,.select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--panel);
}
.textarea{ min-height:150px; resize:vertical; font-family:var(--mono); font-size:13px; line-height:1.7; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.search{ position:relative; }
.search .input{ padding-left:36px; }
.search__icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:14px; }

/* ── 안내 상자 ───────────────────────────────────── */
.note{
  border-radius:var(--r-sm); padding:12px 15px; font-size:13px; line-height:1.6;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-ink);
}
.note--plain{ background:#f8f9fa; border-color:var(--line); color:var(--ink-2); }
.note--warn{ background:var(--warn-bg); border-color:#f0dfba; color:var(--warn); }
.note b{ font-weight:700; }
.note p{ margin:0 0 6px; }
.note p:last-child{ margin:0; }

/* ── 아코디언 (업무 안내) ────────────────────────── */
.acc{ border-top:1px solid var(--line-2); }
.acc:first-of-type{ border-top:0; }
.acc__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:15px 44px 15px 2px; font-size:14.5px; font-weight:600; color:var(--ink);
  position:relative; line-height:1.5;
}
.acc__q:hover{ color:var(--brand); }
.acc__q::after{
  content:"+"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:19px; font-weight:400; color:var(--faint); line-height:1;
}
.acc.is-open .acc__q::after{ content:"−"; color:var(--brand); }
.acc__a{ display:none; padding:0 44px 17px 2px; font-size:13.8px; color:var(--ink-2); line-height:1.72; }
.acc.is-open .acc__a{ display:block; }
.acc__a p{ margin:0 0 8px; }
.acc__a p:last-child{ margin:0; }
.acc__a ul{ margin:0 0 8px; padding-left:19px; }
.acc__a li{ margin-bottom:4px; }

/* ── 링크 카드 ───────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cards > *{ min-width:0; }
.card{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 17px; color:var(--ink);
  transition:border-color .12s, transform .08s, box-shadow .12s; cursor:pointer; text-align:left; width:100%;
}
.card:hover{ border-color:var(--brand-line); box-shadow:var(--shadow); transform:translateY(-1px); }
.card__ico{
  width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; margin-bottom:11px;
}
.card__t{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
.card__d{ font-size:12.5px; color:var(--mute); margin-top:3px; line-height:1.5; }

/* ── 진행 막대 ───────────────────────────────────── */
.bar{ height:6px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.bar__fill{ height:100%; background:var(--w-grad); border-radius:99px; transition:width .3s; }

/* ── 토스트 ──────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:99px;
  font-size:13.5px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:200;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── 로딩 ────────────────────────────────────────── */
.spin{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite;
}
.btn:not(.btn--brand) .spin{ border-color:var(--line); border-top-color:var(--brand); }
@keyframes sp{ to{ transform:rotate(360deg); } }

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width:1080px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .shell{ flex-direction:column; }
  .nav{ flex:none; height:auto; position:static; flex-direction:row; align-items:center; gap:10px; padding-right:12px; }
  .nav__brand{ padding:14px 16px; }
  .nav__menu{ flex-direction:row; padding:0; overflow-x:auto; }
  .nav__link{ white-space:nowrap; }
  .nav__foot{ display:none; }
  .topbar{ padding:16px 18px; flex-direction:column; align-items:flex-start; }
  .page{ padding:18px 18px 44px; }
  .kpis,.cards{ grid-template-columns:1fr; }
}

/* ── 인쇄 ────────────────────────────────────────── */
@media print{
  .nav,.topbar__act,.btn,.chips{ display:none !important; }
  body{ background:#fff; }
  .panel{ box-shadow:none; }
}

/* ── 회사 설정 체크 ──────────────────────────────── */
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opt{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; transition:border-color .12s, background .12s;
}
.opt:hover{ border-color:var(--brand-line); background:#fcfbff; }
.opt:has(input:checked){ border-color:var(--brand-line); background:var(--brand-soft); }
.opt input{ margin:0; accent-color:var(--brand); width:15px; height:15px; flex:0 0 auto; }
.opt__t{ font-size:13.5px; font-weight:700; }
.opt__h{ font-size:11.5px; color:var(--mute); flex:1 1 100%; padding-left:24px; }
@media (max-width:1080px){ .opts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .opts{ grid-template-columns:1fr; } }

/* ── 시연용 데이터 조작 (사이드바 아래) ──────────── */
.demo{ margin-bottom:12px; }
.demo__t{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--nav-mute); font-weight:700; margin-bottom:7px; letter-spacing:.02em; }
.demo__dot{ width:6px; height:6px; border-radius:50%; background:#3a3a46; margin-left:2px; }
.demo__dot.is-on{ background:var(--w-grad); }
.demo__btns{ display:flex; flex-direction:column; gap:5px; }
.demo__b{
  width:100%; padding:7px 9px; border-radius:6px; cursor:pointer;
  border:1px solid #262630; background:#16161d; color:#c9c9d4;
  font-size:11.5px; font-weight:700; font-family:inherit; transition:.12s;
}
.demo__b:hover{ background:#1e1e27; color:#fff; border-color:#33333f; }
.demo__b--fill{ background:var(--w-grad); border-color:transparent; color:#fff; }
.demo__b--fill:hover{ filter:brightness(1.1); }
.demo__b[disabled]{ opacity:.4; cursor:not-allowed; filter:none; }

/* ── 빈 화면 ─────────────────────────────────────── */
.blank{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:64px 32px; text-align:center; box-shadow:var(--shadow);
}
.blank__mark{
  font-size:34px; font-weight:800; letter-spacing:-.045em; margin-bottom:18px;
  background:var(--w-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; opacity:.28;
}
.blank h2{ margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.02em; }
.blank p{ margin:0 0 20px; color:var(--mute); font-size:14px; line-height:1.7; }

/* ── 표 보조 ─────────────────────────────────────── */
.tbl .right{ text-align:right; }
.tbl tr.row--low{ background:#fdf6f5; }
.tbl tr.row--low:hover{ background:#fbeeed; }
.tbl tfoot tr.row--sum td{ border-top:1.5px solid var(--ink2); border-bottom:0; background:#fafbfc; padding-top:13px; padding-bottom:13px; }

/* ── 연체 구간 ───────────────────────────────────── */
.bands{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.bands > *{ min-width:0; }
.band{ border-radius:var(--r-sm); padding:11px 12px; border:1px solid var(--line); }
.band__l{ font-size:11.5px; font-weight:700; color:var(--mute); }
.band__v{ font-size:14px; font-weight:800; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.band__n{ font-size:11px; color:var(--faint); margin-top:2px; }
.band--ok{ background:var(--ok-bg); border-color:transparent; }
.band--ok .band__l,.band--ok .band__v{ color:var(--ok); }
.band--info{ background:var(--info-bg); border-color:transparent; }
.band--info .band__l,.band--info .band__v{ color:var(--info); }
.band--warn{ background:var(--warn-bg); border-color:transparent; }
.band--warn .band__l,.band--warn .band__v{ color:var(--warn); }
.band--danger{ background:var(--danger-bg); border-color:transparent; }
.band--danger .band__l,.band--danger .band__v{ color:var(--danger); }

/* ── 한도 막대 ───────────────────────────────────── */
.meter{ margin-bottom:15px; }
.meter:last-child{ margin-bottom:0; }
.meter__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.meter__n{ font-size:13.5px; font-weight:700; }
.meter__v{ font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.meter__v.is-warn{ color:var(--danger); }
.meter__sub{ font-size:11.5px; font-weight:600; color:var(--mute); margin-left:8px; }
.bar__fill--warn{ background:linear-gradient(120deg,#e0a52c,#c2410c); }
.bar__fill--neg{ background:linear-gradient(120deg,#d05a52,#b3261e); }

/* ── 마진율 칸 ───────────────────────────────────── */
.rate__v{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; display:block; margin-bottom:4px; }
.rate__v.is-neg{ color:var(--danger); }
.rate__v.is-thin{ color:var(--warn); }

/* ── 막대 차트 ───────────────────────────────────── */
.chart{ display:flex; gap:12px; align-items:flex-end; height:190px; }
.chart__col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.chart__v{ font-size:11.5px; font-weight:800; color:var(--ink2); margin-bottom:5px; font-variant-numeric:tabular-nums; }
.chart__track{ flex:1; width:100%; display:flex; align-items:flex-end; }
.chart__bar{ width:100%; background:#dfe3ea; border-radius:5px 5px 0 0; transition:height .4s; }
.chart__bar.is-now{ background:var(--w-grad); }
.chart__x{ font-size:12px; font-weight:700; margin-top:8px; }
.chart__sub{ font-size:11px; color:var(--mute); font-variant-numeric:tabular-nums; }

@media (max-width:1080px){ .bands{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){
  .bands{ grid-template-columns:1fr; }
  .two{ flex-direction:column; }
  .chart{ height:150px; gap:6px; }
}

/* ── 정렬 가능한 표 머리 ─────────────────────────── */
.th--sort{ cursor:pointer; user-select:none; position:relative; padding-right:20px !important; }
.th--sort:hover{ color:var(--ink); background:#f4f5f7; }
.th--sort::after{
  content:"⇅"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:10px; opacity:.32; font-weight:400;
}
.th--sort.is-asc::after{ content:"▲"; opacity:1; color:var(--brand); font-size:8px; }
.th--sort.is-desc::after{ content:"▼"; opacity:1; color:var(--brand); font-size:8px; }
.tbl th.right.th--sort{ padding-right:20px !important; }

/* ── 누를 수 있는 지표 카드 ──────────────────────── */
.kpi--btn{
  position:relative; text-align:left; font-family:inherit; cursor:pointer;
  transition:border-color .12s, transform .07s, box-shadow .12s;
}
.kpi--btn:hover{ border-color:var(--brand-line); transform:translateY(-1px); }
.kpi--btn.kpi--hero:hover{ filter:brightness(1.05); }
.kpi--btn:active{ transform:translateY(0); }
.kpi__more{
  position:absolute; right:14px; top:14px; font-size:11px; font-weight:700;
  color:var(--faint); letter-spacing:-.01em;
}
.kpi--hero .kpi__more{ color:rgba(255,255,255,.72); }
.kpi--btn.is-open{ border-color:var(--brand); }
.kpi--btn.is-open .kpi__more{ color:var(--brand); }
.kpi--hero.is-open .kpi__more{ color:#fff; }

/* ── 근거 상세 패널 ──────────────────────────────── */
.detail{
  margin-top:14px; background:var(--panel); border:1px solid var(--brand-line);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow);
}
.detail__t{ margin:0 0 14px; font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
.detail__n{ margin:12px 0 0; font-size:12.5px; color:var(--mute); line-height:1.6; }
.detail__n b{ color:var(--ink-2); }
.detail .tbl{ font-size:13px; }
.detail .tbl th, .detail .tbl td{ padding:9px 14px 9px 0; }

/* 계산 내역 */
.calc{ border-top:1px solid var(--line-2); }
.calc__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.calc__l{ color:var(--ink-2); }
.calc__v{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.calc__v em{ font-style:normal; color:var(--mute); font-weight:500; font-size:12px; margin-left:6px; }
.calc__row--minus .calc__l, .calc__row--minus .calc__v{ color:var(--danger); }
.calc__row--plus .calc__l, .calc__row--plus .calc__v{ color:var(--ok); }
.calc__row--small{ padding:5px 0; font-size:12.5px; }
.calc__row--small .calc__l, .calc__row--small .calc__v{ color:var(--mute); font-weight:500; }
.calc__row--sub{ background:#fafbfc; padding-left:8px; padding-right:8px; margin:0 -8px; }
.calc__row--total{
  border-bottom:0; border-top:1.5px solid var(--ink2); margin-top:2px;
  padding-top:12px; font-size:15px;
}
.calc__row--total .calc__v em{ color:var(--brand); font-weight:700; font-size:13px; }

/* ── 월 이동 ─────────────────────────────────────── */
.mnav{ display:flex; align-items:center; gap:4px; }
.mnav__b{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); cursor:pointer;
  font-size:16px; line-height:1; font-family:inherit; transition:.12s;
}
.mnav__b:hover:not([disabled]){ border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand); }
.mnav__b[disabled]{ opacity:.3; cursor:not-allowed; }
.mnav__t{ font-size:13.5px; font-weight:700; min-width:88px; text-align:center; font-variant-numeric:tabular-nums; }

/* ── 추이 막대를 눌러 그 달로 ────────────────────── */
.chart__col{
  border:0; background:none; padding:0 2px; font-family:inherit; cursor:pointer;
  border-radius:6px; transition:background .12s;
}
.chart__col:hover{ background:var(--line-2); }
.chart__col.is-sel{ background:var(--brand-soft); }
.chart__v.is-neg{ color:var(--danger); }

@media (max-width:820px){
  .kpi__more{ display:none; }
  .detail{ padding:16px; }
}