/* CARE-Jeju 정적 사이트 — design/PALETTE.md의 토큰을 그대로 옮겨온다.
   (다크모드는 PALETTE.md엔 명시되지 않았지만, 앱 셸이므로 시스템 설정을 따르도록
   같은 규칙으로 다크 변형을 추가했다 — 채도·명도만 조정, 색의 역할은 그대로.)

   ※ 시스템(휴대폰) 다크모드를 켜 두면 CARE만 어두운 갈색 배경으로 자동 전환되어
   같은 허브에 있는 PRAS-DER(항상 흰 배경)와 화면이 서로 달라 보인다는 요청으로,
   prefers-color-scheme 기반 자동 전환은 꺼서 CARE도 PRAS처럼 항상 밝은(light)
   배경을 쓰도록 고정한다. 다크 팔레트 값 자체는 아래 :root[data-theme="dark"]에
   남겨 둔다 — 나중에 화면에 수동 다크모드 토글을 추가하면 그대로 재사용 가능. */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  --brand: #f0813a;
  --brand-dark: #cf5f1c;
  --brand-soft: #fef1e2;
  --brand-line: #f8d7ac;
  --gold: #e3ba46;
  --gold-soft: #fbf2d8;

  /* 결과 배너·체크박스 등에 쓰던 민트(초록) 계열을 따뜻한 노란색(amber) 계열로
   * 교체(요청 반영) — border/accent(--amber), 텍스트로 쓸 만큼 진한 톤(--amber-dark),
   * 옅은 배경(--amber-soft), 옅은 테두리(--amber-line) 네 역할은 기존 mint와 동일하게
   * 유지한다. dataviz 스킬의 validate_palette.js로 각 값을 검증했다.
   * "노란색이 누렇게(탁하게) 보인다"는 요청으로 --amber를 더 산뜻한 노란색으로
   * 교체했다(아래 --chart-series-2와 동일한 값 — validate_palette.js로 주황
   * (--chart-series-1) 대비 재검증: CVD ΔE 9.4, 정상시야 ΔE 16.4, 둘 다 기준 통과). */
  --amber: #dbab00;
  --amber-dark: #7a5a10;
  --amber-soft: #faf0d0;
  --amber-line: #ecd68a;

  --ink: #2f2618;
  --ink-soft: #83705c;
  --line: #ece2d0;
  --surface: #fffdf9;
  --canvas: #fdfbf8;
  --nav-dark: #3a2c19;

  --green: #4f9d6e;
  --green-soft: #e9f5ec;
  --red: #e0604a;
  --red-soft: #fbe9e4;
  --warn-bg: #f7ddc0;

  /* 차트 전용(dataviz 스킬 기본 팔레트에서 검증된 값 — categorical 2/4계열, sequential 1계열).
   * 2계열(2025·비교)을 초록에서 노란색으로 바꾸면서, 기존 4계열(amber 톤)과 색이
   * 겹치게 되어 4계열은 자두색 계열로 다시 배정했다(validate_palette.js로 재검증).
   * 이후 "노란색이 누렇게 보인다"는 요청으로 2계열 값을 더 산뜻한 노란색으로 다시
   * 조정했다 — 순수 채도 높은 노랑(#eab308 등)은 validate_palette.js의 밝기 상한
   * (OKLCH L<=0.77)을 넘겨 FAIL이라, 그 상한 바로 안쪽에서 채도를 최대한 끌어올린
   * 값을 새로 찾아 주황(#eb6834)과의 대비를 재검증했다(CVD ΔE 9.4 deutan, 정상시야
   * ΔE 16.4 — 목표 8·기준 15 모두 통과, --pairs all에서도 통과). */
  --chart-series-1: #eb6834; /* 2024·기준 계열 */
  --chart-series-2: #dbab00; /* 2025·비교 계열 */
  --chart-series-3: #2a78d6; /* 3~4계열째부터 추가 */
  --chart-series-4: #b0457a;
  --chart-seq-100: #cde2fb;
  --chart-seq-400: #3987e5;
  --chart-seq-700: #0d366b;
  --chart-grid: rgba(47, 38, 24, 0.1);
  --chart-text: var(--ink-soft);

  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(58, 44, 25, 0.06), 0 6px 20px rgba(58, 44, 25, 0.06);
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}

/* prefers-color-scheme 기반 자동 다크모드 전환은 의도적으로 비활성화했다(위 주석 참고).
   같은 색상 값은 :root[data-theme="dark"]에 남겨 두어, 화면에 수동 토글이 생기면
   그 토글이 <html data-theme="dark">를 붙이는 것만으로 바로 동작한다. */
:root[data-theme="dark"] {
  --brand: #f0913f;
  --brand-dark: #ffa059;
  --brand-soft: #3a2814;
  --brand-line: #5c3f1e;
  --gold: #e8c463;
  --gold-soft: #3a3013;
  /* 라이트 모드와 같은 이유로 더 산뜻한 노란색으로 교체 — 다크 화면(--surface
   * #241c12) 기준 dataviz 스킬 참조 팔레트의 노랑 슬롯 값을 그대로 썼다(밝기 대역
   * ·대비는 통과, CVD는 6-8 경고대역이라 범례·직접 라벨 등 보조 표시가 이미 있는
   * 이 앱에서는 허용 범위 — 현재 이 다크 배색은 화면에 토글이 없어 실제로 보이지
   * 않지만, 나중에 토글이 추가될 때를 대비해 함께 맞춰 둔다). */
  --amber: #c98500;
  --amber-dark: #f0d060;
  --amber-soft: #3a2f0c;
  --amber-line: #5c4a16;
  --ink: #f3ece0;
  --ink-soft: #baa88f;
  --line: #4a3c28;
  --surface: #241c12;
  --canvas: #1a140c;
  --nav-dark: #120d07;
  --green: #6fbf8d;
  --green-soft: #163425;
  --red: #ec8271;
  --red-soft: #3a1e17;
  --warn-bg: #4a3413;
  --chart-series-1: #d95926;
  --chart-series-2: #c98500;
  --chart-series-3: #6ea6ec;
  --chart-series-4: #c96a9c;
  --chart-seq-100: #16283f;
  --chart-seq-400: #3987e5;
  --chart-seq-700: #b7d3f6;
  --chart-grid: rgba(243, 236, 224, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
/* PRAS-DER(app/globals.css)와 동일 — 좁은 화면에서 사이드바 드로어(translateX)나
   스크롤되는 탭 목록처럼 뷰포트 밖으로 밀려나는 요소가 있어도 페이지 자체에는
   가로 스크롤이 생기지 않게 막는다. body가 아니라 html에 둬야
   (body만 hidden으로 두면 overflow-y가 auto로 강제 전환되는 스펙 규칙 때문에
   세로 스크롤바 폭만큼 오히려 폭 계산이 어긋난다) 뷰포트 자체가 깔끔하게 잘린다. */
html { overflow-x: hidden; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 0.5rem 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0 0 0.6rem 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--brand-dark); }

/* ── 상단 2단 구조(PRAS-DER와 통일) ──
   PRAS(app/globals.css)는 (1) 얇은 52px 다크 네비게이션 바 .site-nav + (2) 그 아래
   큰 그라디언트 히어로 배너 .hero(제목·부제)로 이루어진 2단 헤더를 쓴다. 두 영역 모두
   화면 끝까지(edge-to-edge) 배경을 채우고, 안쪽 내용만 좌우 30px(모바일 14px) 패딩을
   둔다 — 1480px로 가운데 정렬하지 않는다(PRAS 쪽 "상단 영역 정렬 통일" 주석 참고).
   CARE도 배치·크기·여백을 그대로 맞추고 색만 고유 팔레트(--brand 계열)를 쓴다. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 26px;
  height: 52px; padding: 0 30px;
  background: var(--nav-dark);
  color: #f6ece0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.site-brand {
  display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto;
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none;
}
.site-brand span {
  color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 6px; border: 1px solid rgba(240,129,58,0.4); border-radius: 5px;
}
.tablist {
  display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0;
  scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
.tab-btn {
  appearance: none; border: 1px solid transparent; background: transparent; color: #cbb69a;
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.tab-btn:hover { color: #f6ece0; background: rgba(255,255,255,0.06); }
.tab-btn.active { color: #fff; background: rgba(240,129,58,.2); box-shadow: inset 0 0 0 1px rgba(240,129,58,.42); }
.tab-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 좁은 화면(아래 640px 미디어쿼리에서 노출) 전용 탭 선택 드롭다운 — 버튼 8개를
   가로로 늘어놓으면 화면 폭에 다 들어오지 못해 좌우로 스크롤해야 어떤 탭이
   있는지 확인할 수 있었다. select는 누르는 즉시 8개 이름이 전부 목록으로
   펼쳐지므로, 넓은 화면의 .tablist 버튼 줄을 대체해 넣는다(기본은 숨김). */
.tab-select {
  display: none; flex: 1 1 auto; min-width: 0;
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,0.08); color: #f6ece0; font-size: 12.5px; font-weight: 700;
}
.tab-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tab-select option { color: #1a1208; background: #fff; font-weight: 500; }
.site-home-btn {
  margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 8px; color: #cbb69a; font-size: 12px; font-weight: 700;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.14);
}
.site-home-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.site-home-btn:hover { color: #f6ece0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.site-home-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu-btn {
  display: none; appearance: none; border: 0; background: rgba(255,255,255,0.1); color: #f6ece0;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1rem; flex: 0 0 auto;
}

/* ── 히어로 배너 ──
   PRAS .hero(app/globals.css)와 세로 패딩(24px)·제목 크기(clamp(23px,2.5vw,33px))·
   제목↔부제 간격(6px)·부제 line-height(1.45)를 그대로 맞춘다. 배경만 CARE 고유
   주황 계열 그라디언트를 쓴다(PRAS는 남색 계열). */
.hero {
  color: #fff;
  background:
    radial-gradient(circle at 78% 15%, rgba(240,129,58,.22), transparent 29%),
    linear-gradient(118deg, #241708 0%, #402a12 62%, #5c3512 100%);
  padding: 24px 0;
}
.hero-inner { padding: 0 30px; display: grid; gap: 6px; }
.hero-inner h1 {
  margin: 0; font-size: clamp(23px, 2.5vw, 33px); line-height: 1.28; letter-spacing: -0.04em; font-weight: 750;
}
.hero-inner p { margin: 0; color: #e6cfae; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; }

/* ── 전체 레이아웃 ──
   실제 PRAS-DER 구조를 다시 확인한 결과, 상단 네비게이션·히어로 배너만 화면 끝까지
   edge-to-edge로 배경을 채우고(위 .topbar/.hero), 실제 본문(.page-shell.workspace)은
   PRAS도 폭 상한이 있다 — width:min(1480px, calc(100% - 48px)), 그 안쪽에 좌우 20px
   패딩(app/globals.css .page-shell{...} + .page-shell.workspace{...}). 즉 넓은 화면에서
   본문이 화면 끝까지 무한정 넓어지는 게 아니라 PRAS도 1480px에서 멈춘다 — 지난 수정에서
   이 폭 상한을 아예 없앤 것이 오히려 PRAS보다 CARE 본문이 더 넓어 보이는 원인이었다.
   같은 공식으로 되돌리고, 그 안의 사이드바·본문 좌우 패딩(20px)은 유지한다. */
.app-shell { display: flex; min-height: calc(100% - 52px); width: min(1480px, 100%); margin: 0 auto; }
.sidebar {
  flex: 0 0 272px; padding: 1.1rem 1rem 2rem 20px; background: var(--surface);
  border-right: 1px solid var(--line); overflow-y: auto;
}
.sidebar h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
  margin: 1.3rem 0 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.sidebar h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.field { margin-bottom: 0.85rem; }
.field label {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem;
}
.field .hint { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.25rem; }
.field input[type="number"], .field select, .field input[type="text"] {
  width: 100%; padding: 0.42rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--canvas); color: var(--ink);
}
.field input[type="range"] { width: 100%; accent-color: var(--brand); }
.field .range-value { font-size: 0.8rem; color: var(--brand-dark); font-weight: 700; }
.callout {
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem; font-size: 0.78rem; color: var(--ink); margin-top: 0.8rem;
}
.callout.muted { background: var(--canvas); border-color: var(--line); color: var(--ink-soft); }

.main { flex: 1 1 auto; min-width: 0; padding: 1.3rem 20px 3rem 1.6rem; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 컴포넌트 ──
   타이포그래피 위계를 3단으로 명확히 나눈다: section-title(탭 최상단, 탭마다 1회) >
   subheading(탭 안의 분석 블록 구분) > section-card h4(카드 내부 소제목). 각 단계의
   크기·굵기·색 차이를 뚜렷하게 벌려서 "지금 어느 수준의 제목을 보고 있는지"가
   훑어보기만 해도 파악되도록 한다(기존에는 세 단계가 1.12rem/1rem/0.95rem으로
   거의 붙어 있어 위계가 잘 드러나지 않았다). */
.section-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  margin: 2.2rem 0 0.3rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--brand-line);
}
.section-title:first-child { margin-top: 0; }
.section-sub { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.5rem; margin-bottom: 1.1rem; line-height: 1.6; }
.section-title + .section-sub { margin-top: 0.6rem; }

.subheading {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  margin: 2rem 0 0.15rem;
}
.subheading:first-child { margin-top: 0; }
.subheading-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px; flex: 0 0 auto;
  background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 800;
}
.subheading + .section-sub { margin-top: 0.3rem; }

/* ── 접이식 절(collapsibleSection) ──
   subheading과 같은 자리에 쓰이지만, 클릭하기 전에는 본문이 화면에 나오지 않는다
   (예: 탭4 "그룹 이동 상세"처럼 길지만 항상 볼 필요는 없는 보조 표). summary가
   subheading 스타일을 그대로 이어받고, 오른쪽 화살표(▾)로 펼침/접힘 상태를 보여준다. */
.collapsible { margin: 2rem 0 0; }
.collapsible:first-child { margin-top: 0; }
.collapsible > summary {
  margin: 0 0 0.15rem; cursor: pointer; list-style: none; user-select: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary:hover .collapsible-caret { color: var(--ink); }
.collapsible-caret {
  margin-left: 0.15rem; color: var(--ink-soft); font-size: 0.85em; transition: transform 0.15s ease;
  transform: rotate(-90deg);
}
.collapsible[open] > summary .collapsible-caret { transform: rotate(0deg); }
.collapsible[open] > summary { margin-bottom: 0.15rem; }
.collapsible > summary + .section-sub { margin-top: 0.3rem; margin-bottom: 1.1rem; }
.collapsible > .table-wrap:first-of-type,
.collapsible > .chart-block:first-of-type { margin-top: 0.9rem; }

.controls-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin-bottom: 1rem; }
/* .control 하나만 단독으로(controls-row 없이) 화면에 바로 놓이는 경우도 있다
   (예: 탭3의 "진단 기간" 라디오) — 그 경우도 바로 아래 블록과 붙어 보이지 않도록
   기본 여백을 준다. controls-row 안에서는 로우 전체가 간격을 지므로 0으로 리셋. */
.control { display: flex; flex-direction: column; gap: 0.28rem; min-width: 140px; margin-bottom: 1.5rem; }
.controls-row > .control { margin-bottom: 0; }
.control label { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.control select, .control input[type="number"], .control input[type="text"] {
  padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); min-width: 140px;
}
/* 모바일처럼 .control이 좁아지면(아래 min-width:0 참고) "월별 목표관리·제어"처럼
   글자 수가 많은 라벨이 알약(pill) 폭에 눌려 띄어쓰기 지점에서 그대로 줄바꿈되고,
   그 결과 알약 하나가 2줄짜리 이상한 모양이 된다는 요청 — flex-wrap을 켜서 알약
   "하나씩"은 항상 온전한 한 줄로 유지한 채 다음 알약이 다음 줄로 넘어가게 하고
   (라벨 자체에는 white-space:nowrap), 모바일에서는 폰트·패딩을 살짝 줄여(아래
   640px 미디어쿼리) 애초에 넘치는 일 자체를 줄인다. */
.control .radio-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.control .radio-row label {
  display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; text-transform: none;
  font-size: 0.85rem; color: var(--ink); border: 1px solid var(--line); padding: 0.32rem 0.6rem;
  border-radius: 999px; cursor: pointer; background: var(--surface); white-space: nowrap;
}
.control .radio-row input { accent-color: var(--brand); }
.control .radio-row label.checked { border-color: var(--brand); background: var(--brand-soft); }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.checkbox-grid label {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; padding: 0.3rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--surface);
}
.checkbox-grid input { accent-color: var(--amber); }
.checkbox-grid label.checked { border-color: var(--amber); background: var(--amber-soft); }

/* ── 핵심 결과 배너 ──
   각 탭에서 지표 카드보다도 먼저 나오는, 그 화면의 결론 한 문장. 처음에는 결과의
   성격(개선/주의/경고)에 따라 색을 4가지(brand/mint/gold/red)로 다르게 썼는데,
   화면마다 배너 색이 들쭉날쭉해 보인다는 피드백을 받아 모든 배너를 하나의 색으로
   통일했다 — 이후 그 하나의 색을 초록(민트) 계열에서 따뜻한 노란색(amber) 계열로
   바꿨다가(초록이 어색하다는 피드백), 굵은 왼쪽 띠 + 진한 배경 틴트가 과하다는
   요청으로 한 차례 완전한 무채색으로 뺐다 — 그런데 이번에는 다른 요약 카드들과
   아예 구분이 안 되니 "약간의" 노란색 계열로 다시 구분해 달라는 요청을 받아,
   굵은 왼쪽 띠 없이 얇은 테두리 전체와 아주 옅은 배경 틴트만 amber 계열로 되돌린다
   (은은한 구분 — 예전의 4px 왼쪽 강조선은 다시 넣지 않는다). tone 값은 계속
   받되(추후 다시 구분할 수 있도록 컴포넌트 인터페이스는 남겨둔다) 실제 렌더링
   색은 전부 동일하게 맞춘다. */
.insight-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  border-radius: var(--radius-lg); border: 1px solid var(--amber-line);
  background: var(--amber-soft); box-shadow: var(--shadow-card);
  padding: 1.1rem 1.3rem; margin-bottom: 1.5rem;
}
.insight-banner.tone-brand,
.insight-banner.tone-mint,
.insight-banner.tone-gold,
.insight-banner.tone-red { border-color: var(--amber-line); background: var(--amber-soft); }
.insight-body { flex: 1 1 320px; min-width: 0; }
.insight-headline {
  font-size: 1.18rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.42; color: var(--ink);
  text-wrap: balance;
}
.insight-detail { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.35rem; line-height: 1.55; }
.insight-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; flex: 0 1 auto; }
.insight-stat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 84px; }
.insight-stat-value {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.insight-stat-label { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; }

/* metric-card: 숫자(value)가 가장 먼저 눈에 들어오도록 크기를 키우고 카드 간 여백을
   넓혔다. delta에는 위/아래 화살표를 붙여 색만으로 방향을 구분하지 않게 한다
   (dataviz 스킬의 "색만으로 의미를 전달하지 않는다" 원칙과 동일한 이유). */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; }
.metric-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0.95rem 1.05rem; box-shadow: var(--shadow-card);
}
.metric-card .label { font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 0.4rem; }
.metric-card .value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.metric-card .delta { font-size: 0.78rem; margin-top: 0.3rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.2rem; }
.metric-card .delta.up { color: var(--brand-dark); }
.metric-card .delta.down { color: var(--amber-dark); }
.metric-card .delta.up::before { content: "▲"; font-size: 0.65em; }
.metric-card .delta.down::before { content: "▼"; font-size: 0.65em; }

.section-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-card); margin-bottom: 1.5rem;
}
.section-card h4 {
  font-size: 0.92rem; font-weight: 800; margin-bottom: 0.85rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.card-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
/* card-row 안의 카드는 자기 자신의 margin-bottom을 쓰지 않는다 — 그러면 카드 높이가
   서로 달라 시각적으로 어긋나 보인다(줄이 안 맞는 카드가 생김). 아래 간격은 행
   전체(.card-row)가 지므로 카드 자체는 0으로 리셋한다. */
.card-row > .section-card { flex: 1 1 380px; min-width: 0; max-width: 100%; margin-bottom: 0; }

/* ── 블록 간 상하 리듬 ──
   차트(.chart-block)·표(.table-wrap)처럼 root에 바로 이어붙는 블록들에는 margin이
   전혀 없어서, 바로 뒤에 다른 블록(예: card-row)이 붙으면 간격이 0px이 되는 경우가
   있었다(예: 탭1의 월별 추이 차트 → 카드 로우). 아래에서 모든 "1단 블록"에 동일한
   최소 간격(1.5rem)을 보장한다. */
/* 라인차트가 이제 min-width(뷰박스 폭)를 지정해 글자 크기를 지켜서(charts.ts 참고),
   화면이 그보다 좁으면(모바일) 차트가 컨테이너 밖으로 넘친다 — 화면을 줄여 글자를
   깨뜨리는 대신 가로 스크롤을 허용해 숫자 크기를 그대로 지킨다. 히트맵도 같은
   이유로 이미 이렇게 하고 있었다(칸 크기 고정). */
.chart-block { margin-bottom: 1.5rem; overflow-x: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 1.5rem; }
/* section-card 안에서 표·차트가 마지막(유일한) 내용물일 때는 이 여백이 카드 패딩
   안쪽에 그대로 남아 카드 바닥에 불필요한 빈 공간을 만든다 — 그 경우에만 0으로. */
.section-card > .table-wrap:last-child,
.section-card > .chart-block:last-child { margin-bottom: 0; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
table.data-table th, table.data-table td {
  padding: 0.34rem 0.44rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
table.data-table td.num, table.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table thead th {
  position: sticky; top: 0; background: var(--surface); font-weight: 700; color: var(--ink-soft);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.01em; z-index: 1;
  /* 열이 많은 표(고객별 요금 모니터링 등)는 헤더 문구가 데이터 값보다 길어서 표 전체
     너비를 넓히는 주된 원인이었다 — 헤더만 두 줄로 접히게 허용해 폭을 줄인다.
     데이터 칸(td)은 그대로 한 줄(nowrap) 유지. */
  white-space: normal; line-height: 1.25; vertical-align: bottom; min-width: 2.6em;
  /* 8차 수정에서 잠시 "글자(음절) 단위" 줄바꿈(word-break:break-all)으로
     바꿨었는데, 다시 이전 방식인 word-break:keep-all(공백이 있는 지점에서만
     줄바꿈)로 되돌린다 — "고객당"·"사용량"처럼 공백으로 구분된 한글 낱말
     "안"에서는 줄이 바뀌지 않고, 낱말과 낱말 "사이"에서만 자연스럽게
     줄바꿈된다. headerBreakLabel()이 "(" 앞에 공백을 넣어 두었으므로 괄호
     단위("(kWh)" 등) 앞에서도 자연스러운 줄바꿈 지점이 생긴다. */
  word-break: keep-all;
}
/* 위 text-transform:uppercase가 헤더 전체(한글+괄호 단위)에 적용되면
   "사용량(kWh)"의 단위 부분까지 "KWH"처럼 대문자로 바뀌어 버린다 —
   headerLabelHtml()이 괄호 단위를 감싸 두는 <span>에는 표시용 원래
   대소문자(kWh 등)를 그대로 지키도록 여기서만 uppercase를 되돌린다. */
table.data-table thead th span[style*="white-space:nowrap"] { text-transform: none; }
/* 숫자 열(.num)만 5em 최소 폭을 유지한다 — "연간사용량 (kWh)"처럼 긴 복합
   단위 라벨이 두 줄로 접힐 때 필요한 폭이다. "월"·"그룹"·"연도"처럼 글자 수가
   짧은 텍스트 열까지 똑같이 5em 바닥을 깔면 실제 내용보다 열이 불필요하게
   넓어져(예: "월" 열의 양옆 여백) 표 전체 폭이 늘어나고 모바일에서 좌우
   스크롤이 더 잘 생긴다 — 텍스트 열은 위 기본값(2.6em)을 그대로 쓰고, 숫자
   열만 여기서 5em으로 다시 넓힌다. 실제 칸 내용이 그보다 넓은 열(예: "추천
   요금제")은 이 최소값과 무관하게 브라우저가 알아서 필요한 만큼 넓힌다. */
table.data-table thead th.num { min-width: 5em; }
table.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--line) 22%, transparent); }
table.data-table tbody tr:hover { background: var(--brand-soft); }
.table-scroll { max-height: 460px; overflow-y: auto; }

.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pill.alert-정상 { background: var(--green-soft); color: var(--green); }
.pill.alert-관심 { background: var(--gold-soft); color: #8f6f1e; }
.pill.alert-주의 { background: var(--brand-soft); color: var(--brand-dark); }
.pill.alert-경고 { background: var(--warn-bg); color: #8a4408; }
.pill.alert-긴급 { background: var(--red-soft); color: var(--red); }
.pill.mint { background: var(--amber-soft); color: var(--amber-dark); }

.alert-box { border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-size: 0.86rem; margin: 0.7rem 0; }
.alert-box.success { background: var(--green-soft); color: #2f5a41; border: 1px solid #bfe0cc; }
.alert-box.info { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--ink); }
.alert-box.warning { background: var(--warn-bg); border: 1px solid #e2b678; color: #6b3c07; }

.legend-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.4rem 0 0.7rem; font-size: 0.78rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-soft); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.chart-tip {
  position: absolute; pointer-events: none; background: var(--nav-dark); color: #f6ece0;
  font-size: 0.74rem; padding: 0.4rem 0.55rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  /* 이전에는 -110%(위쪽으로 띄움)였는데, 앵커점이 차트 맨 위 여백(margin.top)
     바로 아래라 툴팁 박스가 차트 영역 위로 넘쳐 .chart-block의 overflow-x:auto가
     함께 강제하는 overflow-y에 잘렸다(스펙상 auto+visible 조합은 허용되지 않아
     visible도 auto로 취급된다). 위로 띄우는 대신 앵커점 "아래"로 그려 항상 차트
     상자 안쪽에 들어가게 한다. */
  transform: translate(-50%, 0); white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 10;
}
.chart-tip.show { opacity: 1; }
/* 차트는 원래 그려진 크기(viewBox) 이상으로는 커지지 않는다(각 차트가 자기 max-width를
   인라인으로 지정) — 화면이 넓다고 확대되면 오히려 읽기 어려워지기 때문이다.
   좁은 화면에서는 width:100%로 자연스럽게 줄어든다. */
svg.chart { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto; }
.chart-crosshair { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }

.download-btn, .btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.44rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 700; font-size: 0.82rem; cursor: pointer; text-decoration: none; margin-top: 0.5rem;
}
.download-btn:hover, .btn:hover { background: var(--brand-line); }

.prose h4 { font-size: 1rem; margin-top: 1.3rem; }
.prose ul { margin: 0 0 0.8rem 1.2rem; padding: 0; }
.prose li { margin-bottom: 0.3rem; font-size: 0.9rem; }

.empty-note { font-size: 0.85rem; color: var(--ink-soft); padding: 0.8rem; }

footer.app-footer {
  padding: 1.4rem 1.6rem; color: var(--ink-soft); font-size: 0.76rem; border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .sidebar { position: fixed; inset: 52px 0 0 auto; width: 82vw; max-width: 320px; z-index: 25;
    transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.15); }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .main { padding: 1rem; }
  /* 사이드바가 화면 위로 뜨는 드로어로 바뀌는 지점부터만 백드롭이 필요하다(그 전
     너비에서는 사이드바가 본문과 나란히 항상 열려 있어 백드롭이 필요 없다). 뒤에
     깔린 본문(캔버스 배경·카드·차트)이 어두운 반투명 막 없이 그대로 비치면 화면
     배경이 웹 버전과 다르게(또는 뒤섞여) 보인다는 인상을 준다 — 그 지점을 없앤다. */
  .sidebar-backdrop {
    position: fixed; inset: 52px 0 0 0; z-index: 24;
    background: rgba(20, 14, 6, 0.42);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 901px) {
  /* 900px 초과에서는 사이드바가 드로어가 아니라 항상 열린 고정 패널이므로,
     JS 쪽에서 open 클래스가 남아 있어도 백드롭이 데스크톱 화면을 가리지 않게 한다. */
  .sidebar-backdrop { display: none; }
}

/* ── 좁은 화면 대응 ──
   기존에는 .tablist에 min-width:0이 없어 탭이 많을 때 상단바 자체가 화면 밖으로
   넘치면서 페이지 전체가 가로 스크롤되는 문제가 있었다(위 .tablist{min-width:0}로
   근본 수정). 아래는 그 상태에서 화면이 더 좁아질 때 각 요소가 자연스럽게
   줄어들도록 하는 마무리 조정이다. */
@media (max-width: 640px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .site-brand { font-size: 14px; }
  .site-brand span { font-size: 10px; padding: 1px 5px; }
  .site-home-btn span { display: none; }
  .site-home-btn { padding: 7px; }
  .tab-btn { padding: 7px 10px; font-size: 12px; }
  .tablist { display: none; }
  .tab-select { display: block; }
  .hero { padding: 16px 0; }
  .hero-inner { padding: 0 14px; gap: 6px; }
  .hero-inner h1 { font-size: 20px; line-height: 1.38; overflow-wrap: anywhere; }
  .hero-inner p { font-size: 11px; line-height: 1.5; }
  .main { padding: 0.9rem 0.8rem; }
  .sidebar { padding-left: 1rem; }
  .section-card { padding: 0.85rem; }
  /* flex-direction:column 상태에서 SVG 차트가 CSS aspect-ratio로 크기를 잡을 때,
     플렉스 아이템(.section-card)의 높이가 실제 콘텐츠보다 작게 계산되어 막대
     그래프 하단 축이 카드 밖으로 살짝 나오는 문제가 있었다(半화면·데스크톱은
     flex-direction:row라 영향 없음). display:block으로 바꾸면 각 카드 높이가
     콘텐츠 높이를 그대로 따라가므로 이 버그를 근본적으로 피할 수 있다 — 세로
     간격은 flex의 gap 대신 margin-bottom으로 동일하게(1rem) 유지한다. */
  .card-row { display: block; }
  .card-row > .section-card { flex: none; margin-bottom: 1rem; }
  .card-row > .section-card:last-child { margin-bottom: 0; }
  .controls-row { gap: 0.5rem; }
  .control { min-width: 0; flex: 1 1 140px; }
  .control .radio-row label { font-size: 0.78rem; padding: 0.28rem 0.5rem; gap: 0.22rem; }
  /* 위 table.data-table thead th.num{min-width:5em}는 데스크톱·태블릿 기준으로
     정한 값이라, "월" 열을 2.6em까지 줄인 뒤에도 숫자 열 6개(각 5em)가 남아
     휴대폰 폭(390px 등)에서는 표 전체 너비가 여전히 화면보다 약간(20px 안팎)
     넓어 좌우 스크롤이 남았다. 휴대폰에서만 숫자 열 최소폭을 4.4em으로 한 번
     더 줄인다 — break-all로 글자 단위 줄바꿈이 되어 있어 폭이 좁아지면 헤더
     문구가 한 줄 더 늘어날 뿐이고(예: "2024년 고객당 평균 사용량 (kWh)"가
     3줄로), 잘리거나 겹치지 않는다. */
  table.data-table thead th.num { min-width: 4.1em; }
  .section-title { font-size: 1.22rem; margin-top: 1.6rem; }
  .subheading { font-size: 0.96rem; margin-top: 1.5rem; }
  .insight-banner { padding: 0.9rem 1rem; gap: 0.9rem; }
  .insight-headline { font-size: 1.02rem; }
  .insight-stats { gap: 1rem; width: 100%; }
  .insight-stat { min-width: 72px; }
  .insight-stat-value { font-size: 1.08rem; }
  .metric-card .value { font-size: 1.3rem; }
}