/* ============================================================
   Atlas — 디자인 시스템(lab 공용 토큰 위)
   색: shared/theme/tokens.css 의 --buw-* 만 쓴다(:root = 라이트, html.dark = 다크 · 자동 전환).
       아래 로컬 이름(--ink·--line·--bg·--accent …)은 전부 --buw-* 를 가리키는 별칭이다.
   차트 범주색(자원 3종·권역 4종)·순차 램프는 core.js 의 AT.color 가 테마별 두 벌을 갖고,
       --c-* 변수도 core 가 그 값으로 채운다(정본이 한 곳이다).
   글자: Pretendard(index.html 이 불러온다) · font-size 는 rem(16px = 1rem) · 바닥 0.875rem(차트 눈금 0.75rem).
   ⚠️ 화면 파일들이 이 클래스 이름을 쓴다 — 이름은 바꾸지 말고 모양만 바꿀 것.
   ============================================================ */

:root {
  /* 글자·선·면 — lab 토큰 별칭 */
  --ink: var(--buw-text);
  --ink-2: var(--buw-text-sub);
  --ink-3: var(--buw-text-mute);
  --ink-4: var(--buw-text-mute);
  --line: var(--buw-line);
  --line-2: var(--buw-line-strong);
  --bg: var(--buw-surface);
  --bg-soft: var(--buw-surface-2);
  --bg-page: var(--buw-bg);
  --grid: rgb(var(--buw-line-rgb) / .7);

  /* 강조(제품색 = lab 블루) */
  --accent: var(--buw-accent);                 /* 글자·링크·선 */
  --accent-solid: var(--buw-accent-solid);     /* 채움 — 위 글자는 --on-solid */
  --accent-soft: var(--buw-accent-soft);       /* 옅은 틴트 */
  --accent-tint: rgb(var(--buw-accent-rgb) / .14);
  --on-solid: #fff;                            /* accent-solid(#2563eb, 양 테마 공통) 위 흰 글자 5.2:1 */
  --grad: linear-gradient(135deg, var(--buw-accent-solid), color-mix(in srgb, var(--buw-accent-solid) 78%, #0b1b4d));
  --grad-soft: linear-gradient(120deg, rgb(var(--buw-accent-rgb) / .07), rgb(var(--buw-info-rgb) / .05));
  --grad-bar: var(--buw-accent);
  --mark: linear-gradient(transparent 60%, rgb(var(--buw-accent-rgb) / .2) 60%, rgb(var(--buw-accent-rgb) / .2) 94%, transparent 94%);

  --r: 14px;
  --r-lg: 16px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px var(--buw-shadow-1), 0 4px 14px var(--buw-shadow-1);
  --shadow-2: 0 2px 4px var(--buw-shadow-1), 0 14px 32px var(--buw-shadow-2);
  --shadow-lift: 0 12px 30px var(--buw-shadow-2);
  --shadow: var(--shadow-1);

  --font: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-display: var(--font);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --content-max: 1200px;
  /* 공용 고지 띠(sticky)의 높이 — app.js 가 ResizeObserver 로 잰다. 붙는 막대는 이만큼 아래에 붙는다 */
  --chrome-h: 0px;
  /* 고지 띠 아래에 붙는 메뉴 막대의 높이(데스크톱 = 붙은 #tabs · 모바일 = #tabs-mini) — app.js 가 잰다.
     키보드 포커스가 그 막대 밑으로 숨지 않게 scroll-padding-top 에 더한다(WCAG 2.4.11) */
  --sticky-h: 0px;

  /* 옅은 틴트 위 글자색 — 틴트가 겹치는 자리(머리 빛·강조 행)에서도 4.5:1 이 남게 한 단계 짙게(다크는 밝게) */
  --chip-fg: var(--buw-accent-strong);                                         /* #1d4ed8 · 틴트 #dee8fc 위 5.4:1 */
  --warn-fg: color-mix(in srgb, var(--buw-warn) 80%, var(--buw-text));          /* #94470d 부근 · 경고 틴트 위 5.6:1 */
  --ai-fg: rgb(var(--buw-ai-rgb));
}
html.dark {
  --chip-fg: color-mix(in srgb, var(--buw-accent) 55%, var(--buw-text));        /* #9cc3f3 부근 · 겹친 틴트 #2e476a 위 5.1:1 */
  --warn-fg: var(--buw-warn);
  --ai-fg: color-mix(in srgb, rgb(var(--buw-ai-rgb)) 70%, var(--buw-text));    /* 틴트 #303451 위 5.7:1 */
}

/* 공용 크롬 — 고지 띠가 문서 전체에서 붙어 있게(#chrome 상자 안에서만 붙으면 데모바 높이만큼 가다 사라진다) */
#chrome { display: contents; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; scroll-padding-top: calc(var(--chrome-h) + var(--sticky-h) + 8px); } /* 붙는 메뉴의 높이 변화를 브라우저가 스크롤로 보정하면 붙음↔떨어짐이 되먹임된다 — 높이는 app.js 의 빈칸(.tabs-spacer)이 지킨다 */
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.62;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
body.mode-embed { background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.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; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* 핵심 수치 강조 — 옅은 강조색 밑칠(글자색은 본문 그대로라 양 테마 AA) */
.mk { background: var(--mark); padding: 0 .08em; color: inherit; font-weight: 700; }

/* ---------- 데모 안내 띠(체험 버튼) — ?shot 에서는 숨긴다 ---------- */
.demo-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--bg-soft); color: var(--ink-2); border-bottom: 1px solid var(--line);
  font-size: 0.875rem; text-align: center;
}
.demo-ribbon b { font-weight: 600; color: var(--ink); }
.demo-ribbon .rb-btn {
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 4px 14px; font-size: 0.875rem; min-height: 36px; transition: border-color .2s, color .2s;
}
.demo-ribbon .rb-btn:hover { border-color: var(--accent); color: var(--accent); }
.demo-ribbon .rb-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 「샘플 엑셀로 해 보기」 — 이 데모의 목적(엑셀 한 번 → 대시보드)으로 가는 첫 행동이라 띠에서 유일한 채움 버튼 */
.demo-ribbon .rb-cta {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border-color: transparent; background: var(--accent-solid); color: var(--on-solid); font-weight: 600;
}
.demo-ribbon .rb-cta:hover { border-color: transparent; color: var(--on-solid); background: var(--buw-accent-strong); }
html.dark .demo-ribbon .rb-cta:hover { background: #1d4ed8; } /* 다크의 accent-strong(#3b82f6)은 흰 글자 3.7:1 — .btn.primary 와 같은 이유 */
.demo-ribbon .rb-cta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.shot .demo-ribbon { display: none; }

/* ---------- 홈페이지 탑재 미리보기 틀(가상 기관 홈페이지의 서브페이지) ---------- */
.site-frame { display: none; }
body.mode-embed .site-frame { display: block; }
.sf-header { height: 84px; border-bottom: 1px solid var(--line); background: var(--bg); }
.sf-header-in { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 44px; padding: 0 24px; }
.sf-logo { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.sf-logo::before { content: ''; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-solid); box-shadow: inset -9px -9px 0 rgb(255 255 255 / .22); }
.sf-gnb { display: flex; gap: 30px; flex-wrap: nowrap; overflow: hidden; font-weight: 600; font-size: 1.0625rem; color: var(--ink-2); }
.sf-gnb span { position: relative; padding: 6px 0; }
.sf-gnb span.on { color: var(--accent); }
.sf-gnb span.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: var(--accent); }
body.mode-embed .shell { max-width: 1320px; margin: 0 auto; padding: 48px 24px 72px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.sf-snb h2 {
  height: 96px; display: flex; align-items: center; padding: 0 24px;
  background: var(--accent-solid); color: var(--on-solid); border-radius: var(--r-lg); font-size: 1.625rem; font-weight: 700;
}
.sf-snb ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.sf-snb li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 18px; font-size: 1rem; color: var(--ink-2); font-weight: 500; background: var(--bg); }
.sf-snb li.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sf-foot { background: var(--bg-soft); color: var(--ink-3); font-size: 0.875rem; border-top: 1px solid var(--line); }
.sf-foot-in { max-width: 1320px; margin: 0 auto; padding: 24px; }
body.mode-embed .app { max-width: 1035px; width: 100%; padding: 0; min-width: 0; }
body.mode-embed .sf-snb { position: sticky; top: calc(var(--chrome-h) + 16px); }
@media (max-width: 1100px) {
  body.mode-embed .shell { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .sf-snb { display: none; }
  .sf-gnb { display: none; }
  .sf-header { height: 60px; }
  .sf-logo { font-size: 1.0625rem; }
  .sf-logo::before { width: 26px; height: 26px; }
}

/* ---------- 앱 틀 ---------- */
.app { max-width: var(--content-max); margin: 0 auto; padding: 24px 24px 72px; }

/* 머리(히어로) — 면 카드 + 위쪽 강조 띠 + 옅은 강조색 빛 */
.page-head { position: relative; }
.hero {
  position: relative; overflow: hidden; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px 26px; isolation: isolate;
  box-shadow: var(--shadow-1);
}
.hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; right: -140px; top: -180px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--buw-accent-rgb) / .12), rgb(var(--buw-accent-rgb) / 0) 66%); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-3); }
.crumb svg { width: 16px; height: 16px; fill: currentColor; }
.crumb b { color: var(--ink-2); font-weight: 600; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.page-title { font-size: clamp(1.625rem, 3.2vw, 2.25rem); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.page-title .accent { color: var(--accent); }
.page-sub { color: var(--ink-2); font-size: 0.9375rem; margin-top: 6px; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.hero-stat {
  display: flex; flex-direction: column; min-width: 118px; padding: 10px 16px 9px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.hero-stat b { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.hero-stat b small { font-size: 0.875rem; font-weight: 500; margin-left: 2px; color: var(--ink-3); }
.hero-stat > span { font-size: 0.875rem; color: var(--ink-3); }
.meta-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px;
  border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1.3;
  background: var(--accent-soft); color: var(--chip-fg);
}
.chip.mint { background: rgb(var(--buw-info-rgb) / .12); color: var(--buw-info); }
.chip.warn { background: rgb(var(--buw-warn-rgb) / .12); color: var(--warn-fg); }
.chip.line { background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* 탭 — 떠 있는 막대 + 아이콘. 고지 띠(--chrome-h) 바로 아래에 붙는다 */
.tabs { position: sticky; top: var(--chrome-h); z-index: 30; margin: 18px -8px 0; padding: 10px 8px; background: linear-gradient(var(--bg-page) 70%, transparent); }
body.mode-embed .tabs { background: linear-gradient(var(--bg) 70%, transparent); margin: 18px 0 0; padding: 10px 0; }
.tab-groups {
  display: flex; gap: 6px; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; box-shadow: var(--shadow-1);
}
.tab-groups::-webkit-scrollbar { display: none; }
.tabs-sentinel { height: 1px; margin-top: -1px; }
.tab-group { display: flex; flex-direction: column; gap: 4px; flex: none; padding: 0 4px; }
.tab-group + .tab-group { border-left: 1px solid var(--line); padding-left: 10px; }
/* 데스크톱: 묶음마다 한 줄(왼쪽 묶음 이름 · 오른쪽 탭). 스크롤해 붙은 뒤에는 묶음 이름을 숨기고 한 흐름으로 감는다.
   모바일(≤899px)은 붙이지 않고 #tabs-mini 막대를 따로 띄운다(app.js · 아래 모바일 절) */
@media (min-width: 900px) {
  .tab-groups { flex-direction: column; gap: 6px; overflow: visible; }
  .tab-group { flex-direction: row; align-items: center; gap: 12px; }
  .tab-group + .tab-group { border-left: 0; padding-left: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
  .tab-groups .tab-group-label { flex: none; width: 7em; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 0.875rem; }
  .tab-row { flex-wrap: wrap; }
  /* 붙은 뒤: 전부 한 흐름으로 감는다(아이콘 없이) · 묶음 사이는 세로선 */
  .tabs.stuck .tab-groups { flex-direction: row; flex-wrap: wrap; gap: 4px 2px; padding: 6px; }
  .tabs.stuck .tab-group, .tabs.stuck .tab-row { display: contents; }
  .tabs.stuck .tab-group-label { display: none; }
  .tabs.stuck .tab { min-height: 38px; padding: 5px 11px; font-size: 0.875rem; }
  .tabs.stuck .tab svg { display: none; }
  .tabs.stuck .tab.g-first { margin-left: 13px; position: relative; overflow: visible; }
  .tabs.stuck .tab.g-first::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; border-left: 1px solid var(--line-2); }
}
.tab-group-label { font-size: 0.875rem; font-weight: 600; color: var(--ink-3); padding-left: 6px; display: flex; gap: 6px; align-items: center; }
.tab-row { display: flex; gap: 4px; }
.tab {
  min-height: 42px; padding: 7px 14px 7px 11px; border: 0; background: transparent; border-radius: 10px;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.tab svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.tab:hover { background: var(--accent-soft); color: var(--accent); }
.tab[aria-selected="true"], .tab[aria-current="page"] { background: var(--accent-solid); color: var(--on-solid); box-shadow: 0 4px 12px rgb(37 99 235 / .25); }
.tab[aria-selected="true"] svg, .tab[aria-current="page"] svg { opacity: 1; }

/* 모바일 메뉴 — 묶음을 세로로 쌓아 다 보이고, 지나가면 위(고지 띠 아래)에 「전체 메뉴」 막대 */
.tabs-mini { display: none; }
@media (max-width: 899px) {
  .tabs, body.mode-embed .tabs { position: static; background: none; }
  .tab-groups { flex-direction: column; overflow: visible; gap: 12px; padding: 12px; }
  .tab-group { padding: 0; }
  .tab-group + .tab-group { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .tab-group-label { font-size: 0.875rem; padding-left: 2px; }
  .tab-row { flex-wrap: wrap; gap: 6px; }
  .tab { min-height: 44px; padding: 6px 12px 6px 10px; font-size: 0.875rem; background: var(--bg-soft); }
  body.tabs-gone .tabs-mini { display: block; position: fixed; top: var(--chrome-h); left: 0; right: 0; z-index: 40; padding: 8px 12px 10px; background: linear-gradient(var(--bg-page) 78%, transparent); }
  .tm-btn {
    width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 14px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: var(--shadow-1); font: inherit; color: var(--ink); text-align: left;
  }
  .tm-cur { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .tm-cur small { font-size: 0.875rem; color: var(--ink-3); }
  .tm-cur b { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tm-all { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 4px 10px 4px 12px; border-radius: 10px; background: var(--accent-solid); color: var(--on-solid); font-size: 0.875rem; font-weight: 600; }
  .tm-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
  .tabs-mini.open .tm-all svg { transform: rotate(180deg); }
  .tm-panel { display: none; }
  .tabs-mini.open .tm-panel { display: block; margin-top: 8px; max-height: calc(100vh - 90px - var(--chrome-h)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg); }
  .tabs-mini .tab-groups { box-shadow: var(--shadow-2); }
}

.view { padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } /* 줄바꿈 금지 글자가 격자를 밀어 가로로 넘치지 않게 */
.view-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.view-title { font-size: 1.5rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.view-title::before { content: ''; width: 5px; height: 24px; border-radius: 3px; background: var(--grad-bar); }
.view-desc { color: var(--ink-3); font-size: 0.9375rem; margin-top: 4px; }
.badge-extra { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 1px 10px; border-radius: 999px; }
.badge-ai { font-size: 0.875rem; font-weight: 500; color: var(--ai-fg); background: var(--buw-ai-soft); border: 1px solid var(--buw-ai-line); padding: 1px 10px; border-radius: 999px; }
.badge-virtual { font-size: 0.875rem; font-weight: 500; color: var(--warn-fg); background: rgb(var(--buw-warn-rgb) / .12); padding: 2px 10px; border-radius: 999px; }

/* ---------- 핵심 메시지(데이터 스토리) ---------- */
.story {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end;
  padding: 26px 30px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden;
}
.story::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-bar); }
.story::after { content: ''; position: absolute; right: -80px; top: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--buw-accent-rgb) / .08), rgb(var(--buw-accent-rgb) / 0) 66%); z-index: 0; }
.story > * { position: relative; z-index: 1; }
.story-kicker { font-size: 0.875rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.story-kicker::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.story-headline { font-size: clamp(1.3125rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.42; color: var(--ink); margin-top: 8px; letter-spacing: -0.025em; }
.story-lede { font-size: 0.9375rem; color: var(--ink-3); margin-top: 8px; max-width: 46em; }
.story-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .story-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .story-stat { min-width: 0; } }
.story-stat { min-width: 110px; padding: 12px 16px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
.story-stat b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-stat b small { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.story-stat > span { font-size: 0.875rem; color: var(--ink-3); }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; padding: 22px 20px 22px 24px; } .story-stats { justify-content: flex-start; } }

/* ---------- 카드 ---------- */
.grid { display: grid; gap: 18px; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 960px) { .grid.g3, .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.g-2-1, .grid.g-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; min-width: 0; position: relative; box-shadow: var(--shadow-1);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
/* 대표 카드 — 위쪽 강조선 하나로만 구분한다 */
.card.sig { border-top: 3px solid var(--accent); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-title { font-size: 1.125rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: -0.02em; }
.card-sub { font-size: 0.875rem; color: var(--ink-3); margin-top: 3px; }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card-foot { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 0.875rem; color: var(--ink-3); }
.card-foot b { color: var(--ink); }

.btn {
  min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  transition: all .2s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 4px 12px var(--buw-shadow-1); }
.btn.primary { background: var(--accent-solid); border-color: transparent; color: var(--on-solid); box-shadow: 0 4px 12px rgb(37 99 235 / .22); }
.btn.primary:hover { color: var(--on-solid); background: var(--buw-accent-strong); transform: translateY(-1px); }
html.dark .btn.primary:hover { background: #1d4ed8; } /* 다크의 accent-strong(#3b82f6)은 흰 글자 대비가 3.7:1 이라 라이트 값을 쓴다 */
.btn.mint { background: rgb(var(--buw-info-rgb) / .12); border-color: rgb(var(--buw-info-rgb) / .35); color: var(--buw-info); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.sm { min-height: 36px; padding: 4px 13px; font-size: 0.875rem; border-radius: 9px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-soft); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; min-height: 34px; padding: 4px 12px; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); border-radius: 8px; transition: all .2s var(--ease); }
.seg button + button { border-left: 0; }
.seg button:hover { color: var(--accent); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--accent); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2), 0 1px 3px var(--buw-shadow-1); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fchip {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: all .2s var(--ease);
}
.fchip:hover { border-color: var(--accent); }
.fchip[aria-pressed="true"] { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--on-solid); box-shadow: 0 4px 10px rgb(37 99 235 / .2); }
.fchip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--on-solid); }
.fchip .dot { width: 10px; height: 10px; border-radius: 50%; }
.select, .input {
  min-height: 44px; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; background: var(--bg); color: var(--ink); font-size: 0.9375rem; min-width: 0;
}
.input:focus, .select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-tint); }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1180px) { body:not(.mode-embed) .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  border-radius: var(--r); padding: 16px 18px 14px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: grid; gap: 2px; min-width: 0; position: relative; overflow: hidden;
}
.kpi .k-label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.kpi .k-label .sw { width: 10px; height: 10px; border-radius: 3px; }
.kpi .k-value { font-size: clamp(1.625rem, 2.5vw, 2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .k-value small { font-size: 0.9375rem; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.kpi .k-note { font-size: 0.875rem; color: var(--ink-3); }
.kpi .k-bar { height: 5px; border-radius: 3px; background: var(--bg-soft); margin-top: 8px; overflow: hidden; }
.kpi .k-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: atGrowX .9s var(--ease) both; }
.kpi.primary { background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px rgb(37 99 235 / .22); }
.kpi.primary .k-label, .kpi.primary .k-note, .kpi.primary .k-value small, .kpi.primary .k-value { color: var(--on-solid); }
.kpi.primary .k-note b { color: var(--on-solid); }

/* ---------- 인사이트 ---------- */
.insight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--grad-soft); border: 1px solid rgb(var(--buw-accent-rgb) / .2); border-radius: var(--r); padding: 16px 20px;
}
.insight .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-solid); color: var(--on-solid); display: grid; place-items: center; font-size: 1.0625rem; }
.insight h4 { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.insight ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.insight li { font-size: 0.9375rem; color: var(--ink-2); }
.insight li::marker { color: var(--accent); }
.insight li b { color: var(--ink); background: var(--mark); }

/* ---------- 차트 공통 ---------- */
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); }
.chart text:not([fill]) { fill: var(--ink-2); } /* fill 속성을 준 글자는 덮지 않는다 */
.chart text.axis { font-size: 0.75rem; } /* 눈금 글자(core.js hStack 의 <text class="axis">) — rem 이라 루트 글꼴 확대를 따른다 · 색은 속성(AT.color.ink3)이 준다 */
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .base-line { stroke: var(--line-2); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover + *, .chart .mark:hover { filter: brightness(1.06); }
.chart .mark { transition: opacity .2s; }
.chart.dim .mark { opacity: .3; }
.chart.dim .mark.on { opacity: 1; }
/* 등장 애니메이션 — 막대가 자라고(가로/세로), 도넛은 돌며 나타난다 */
@keyframes atGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes atGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes atPop { from { opacity: 0; transform: scale(.86) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes atFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.grow-x { transform-box: fill-box; transform-origin: left center; animation: atGrowX .8s var(--ease) both; }
.grow-y { transform-box: fill-box; transform-origin: center bottom; animation: atGrowY .8s var(--ease) both; }
.pop { transform-box: fill-box; transform-origin: center; animation: atPop .8s var(--ease) both; }
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { animation: atFadeUp .6s var(--ease) both; }
/* 화면에 들어오기 전에는 차트 애니메이션을 멈춰 둔다 — 스크롤해 보는 순간 자란다 */
.reveal:not(.in) .grow-x, .reveal:not(.in) .grow-y, .reveal:not(.in) .pop, .reveal:not(.in) .k-bar i { animation-play-state: paused; }
/* 자동 검증 브라우저·?shot 에서는 애니메이션을 끈다 — 스크린샷이 중간 프레임을 찍어 결함으로 오판하는 것을 막는다 */
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation: none !important; transition: none !important; }
html.no-anim .reveal { opacity: 1; transform: none; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.legend .li.off { opacity: .4; }
.legend button.li { border: 0; background: transparent; padding: 4px 2px; min-height: 32px; color: inherit; }

.tip {
  position: fixed; z-index: 100; pointer-events: none; max-width: 300px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lift);
  padding: 10px 12px; font-size: 0.875rem; line-height: 1.5; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tip.on { opacity: 1; transform: none; }
.tip .t-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tip .t-r { display: flex; justify-content: space-between; gap: 14px; }
.tip .t-r span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.tip .t-r .sw { width: 9px; height: 9px; border-radius: 3px; }
.tip .t-r b { font-variant-numeric: tabular-nums; }

/* 표로 보기 */
.tv-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dtable th, .dtable td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.dtable thead th { background: var(--bg-soft); color: var(--ink); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.dtable td.n, .dtable th.n { text-align: right; font-variant-numeric: tabular-nums; }
.dtable tbody tr { transition: background .15s; }
.dtable tbody tr:hover { background: var(--accent-soft); }
.dtable tfoot td { font-weight: 600; background: var(--bg-soft); }
.dtable th button { border: 0; background: transparent; font-weight: 600; color: inherit; padding: 0; display: inline-flex; gap: 4px; align-items: center; min-height: 28px; }

/* 드로어(상세 패널) — 고지 띠 아래에서 연다 */
.drawer-back { position: fixed; inset: 0; background: rgb(15 23 42 / .45); backdrop-filter: blur(2px); z-index: 80; opacity: 0; transition: opacity .25s; }
.drawer-back.on { opacity: 1; }
.drawer {
  position: fixed; top: var(--chrome-h); right: 0; bottom: 0; width: min(760px, 100vw); z-index: 90; background: var(--bg);
  box-shadow: -18px 0 50px var(--buw-shadow-2); transform: translateX(100%); transition: transform .32s var(--ease);
  display: flex; flex-direction: column; border-radius: 18px 0 0 0; border-left: 1px solid var(--line);
}
.drawer.on { transform: none; }
.drawer-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; background: var(--bg-soft); border-radius: 18px 0 0 0; }
.drawer-body { padding: 22px 26px 44px; overflow-y: auto; display: grid; gap: 18px; align-content: start; }
.x-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); font-size: 1.25rem; flex: none; transition: all .2s; }
.x-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
@media (max-width: 640px) { .drawer { border-radius: 0; } .drawer-head { border-radius: 0; } }

.empty { padding: 36px 16px; text-align: center; color: var(--ink-3); font-size: 0.9375rem; }
.note { font-size: 0.875rem; color: var(--ink-3); }
.hr { height: 1px; background: var(--line); border: 0; margin: 4px 0; }

/* 앱 푸터 */
.app-foot { margin-top: 44px; padding: 18px 22px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.875rem; color: var(--ink-3); }
.app-foot b { color: var(--ink-2); font-weight: 600; }

/* 토스트 — 본문과 반대 명도(라이트=짙은 면 · 다크=밝은 면) */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg-page); padding: 12px 20px; border-radius: 12px; z-index: 120; font-size: 0.9375rem; opacity: 0; transition: opacity .2s, transform .2s var(--ease); box-shadow: var(--shadow-lift); max-width: calc(100vw - 32px); pointer-events: none; } /* 글자만 있는 알림 — 사라진 뒤 투명한 채 아래 버튼을 가로막지 않게 */
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .app { padding: 14px 16px 48px; }
  .hero { padding: 22px 20px 20px; }
  .hero-stat { min-width: calc(50% - 5px); }
  .tabs { margin: 14px -16px 0; padding: 8px 16px; }
  .tab-groups { border-radius: 14px; }
  .card { padding: 18px 16px; }
  .view-title { font-size: 1.3125rem; }
  .demo-ribbon { font-size: 0.875rem; }
}
/* 터치 화면 — 공용 컨트롤의 누르는 자리를 44px 이상으로(데스크톱 마우스에서는 작은 모양 그대로) */
@media (max-width: 899px), (pointer: coarse) {
  .seg button, .btn.sm, .fchip, .demo-ribbon .rb-btn, .dtable th button { min-height: 44px; }
  .seg { padding: 2px; }
  #view summary { min-height: 44px; } /* 화면 파일의 details 요약줄(특이도가 높아 #view 로 덮는다) */
}
@media print {
  .demo-ribbon, .tabs, .tabs-mini, .card-actions, .drawer, .drawer-back, .toast, .tip { display: none !important; }
  .card, .story { break-inside: avoid; box-shadow: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }