/* SeaChart V4 — 시각 기준: Legacy SeaChart (RESULT_007).
   값의 출처: Legacy main.html · left-sidebar.html · analysis-import-spec.html · app-saas.min.css(Hyper Saas, SeaChart 파랑으로 조정된 판).
   Hyper 테마 전체를 들이지 않고 화면에 필요한 규칙만 다시 쓴다. 기능·상호작용은 V4(sample_dashboard_v4 참고) 그대로. */
/* 전역 글꼴 = SeaChart Sans(RESULT_240I · 240S) — Pretendard 1.3.9(OFL-1.1) 를 화면 표시 데이터 기준으로 줄인 수정본. OFL 예약 이름 때문에 이름을 바꿨다(출처·라이선스는 vendor/pretendard/1.3.9/OFL.txt · MANIFEST).
   vendor 로컬 파일(weight 400~700, CDN·시스템 설치 글꼴 의존 없음). 경로는 이 CSS 기준 상대경로 */
@font-face {
  font-family: "SeaChart Sans";
  src: url("../vendor/pretendard/1.3.9/SeaChartSansVariable-dataset-w400-700.woff2") format("woff2-variations"),
       url("../vendor/pretendard/1.3.9/SeaChartSansVariable-dataset-w400-700.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
:root {
  /* 2026-11-11 디자인 시안 적용(D-025) — 짙은 남색 사이드바 · 옅은 회청 바탕 · 흰 카드 · 파랑 강조 */
  --side: #13213f;
  --side-ink: #9aa6bf; --side-hover: #d6def0; --side-on: #ffffff;
  --primary: #2F6BE0; --primary-d: #2558c4; --primary-sub: #eaf1fd; --primary-ink: #1b2b4f;
  --info: #2F6BE0; --info-d: #2558c4; --info-sub: #eaf1fd;
  --cyan: #8CC8EF;
  --bg: #f3f4f8; --tert: #f6f7fb; --light: #eef0f5; --border: var(--line, #e4e7ef);
  --body: #4b5563; --heading: #1f2430; --mute: #8b93a1;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --radius: 16px; --tip-bg: #efedfb; --tip-ink: #5b4fc8;
  --warn-bg: #fff3cd; --warn-ink: #8a6d1b;
  --side-w: 260px; --top-h: 70px;
  --font: "SeaChart Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* display 를 지정한 요소에도 hidden 속성이 이기게 */
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 0.9rem/1.5 var(--font);
}
/* 폼 컨트롤은 브라우저 기본이 글꼴을 상속하지 않는다 — 글꼴 종류만 상속(크기·굵기는 각 규칙 그대로) */
button, input, select, textarea { font-family: inherit; }
/* 차트 SVG 도 같은 글꼴 — 크기는 라이브러리 값 유지. C3 는 CSS(font:10px sans-serif), ApexCharts 는 요소 inline style(font-family:Helvetica…)로
   글꼴을 넣으므로 차트 범위에 한해 !important 로 종류만 덮는다(JS 옵션 무변경) */
body .c3 svg, body .c3-title { font-family: var(--font); }
body .apexcharts-canvas text, body .apexcharts-tooltip, body .apexcharts-tooltip *, body .apexcharts-legend-text, body .apexcharts-title-text { font-family: var(--font) !important; }
a { color: inherit; }
h1, h2, h3 { color: var(--heading); font-weight: 700; line-height: 1.1; margin: 0 0 10px; }
.ri { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.2em; flex-shrink: 0; }

#app { display: flex; min-height: 100vh; }

/* ── sidebar (Legacy: 260px · #003366 · 로고 · 아이콘+텍스트 · 활성=흰 글씨) ── */
.sidebar { width: var(--side-w); background: var(--side); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  overflow: auto; box-shadow: var(--shadow); z-index: 1001; }
.sidebar .brand { display: flex; justify-content: center; align-items: center; height: var(--top-h); padding: 6px 0; }
.sidebar .brand img { height: 52px; width: auto; display: block; }
.snav { list-style: none; padding: 6px 0; margin: 0; }
.snav a { display: flex; align-items: center; padding: 15px 10px 15px 0; color: var(--side-ink); text-decoration: none;
  font-size: .9375rem; transition: color .15s; }
.snav a .ri { width: 50px; font-size: 1.2rem; height: 1.2rem; }
.snav a:hover, .snav a:focus-visible { color: var(--side-hover); outline: none; }
.snav a.on { color: var(--side-on); font-weight: 500; }
.navsep { border-top: 1px solid rgba(255, 255, 255, .08); margin: 6px 20px; }
.snav.planned a { padding-top: 11px; padding-bottom: 11px; font-size: .85rem; color: #6f7f94; }
.snav.planned a:hover { color: var(--side-hover); }
.snav.planned a.on { color: var(--side-on); }
.soon { font-size: 10px; padding: 1px 6px; border-radius: 9px; margin-left: 6px; background: rgba(255, 255, 255, .1);
  color: #9fb0c4; font-weight: 700; white-space: nowrap; }
.soon.big { font-size: 11px; background: var(--warn-bg); color: var(--warn-ink); vertical-align: 2px; }

/* ── topbar (Legacy navbar-custom: 70px · 흰 배경 · 그림자 · 우측 사용자 블록) ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--surface, #fff); min-height: var(--top-h); padding: 0 0 0 16px; display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow); }
.topbar .spacer { margin-left: auto; }
.tbtn { display: inline-flex; align-items: center; gap: 5px; background: var(--light); border: 1px solid var(--light);
  color: var(--heading); border-radius: .15rem; padding: .35rem .8rem; font-size: .85rem; cursor: pointer; }
.tbtn:hover { background: var(--surface-3, #dce0e4); }
.tbtn:disabled { opacity: .45; cursor: default; }
.tbtn[aria-pressed="false"] { opacity: .6; }
.datastat { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--body); padding: 0 6px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.off { background: #c0c7d2; }
.dot.on { background: #0acf97; }
.navuser { display: flex; align-items: center; gap: 8px; height: var(--top-h); padding: 0 20px; background: var(--surface-2, #fafafd);
  border-left: 1px solid var(--light); border-right: 1px solid var(--light); margin-left: 6px; color: var(--heading); }
.navuser .ri { width: 1.6em; height: 1.6em; color: var(--mute); }
.navuser b { display: block; font-size: .9rem; }
.navuser small { display: block; font-size: .75rem; color: var(--body); }

/* 개발환경 경고 — 반드시 보이되 화면을 지배하지 않게 얇은 띠로 */
.devbanner { background: #fde8ea; color: #a12a3a; border-bottom: 1px solid #f3c2c9; padding: 4px 16px; font-size: .78rem; }
.devbanner .ri { vertical-align: -0.15em; }

.content { padding: 0 .75rem 24px; flex: 1; }
.ptitle { font-size: 1.125rem; margin: 1.1rem 0 .9rem; }
.foot { padding: 10px 16px; font-size: .75rem; color: var(--mute); }
.muted { color: var(--mute); font-weight: 400; }
.spacer { margin-left: auto; }

/* ── card (Legacy: 흰 배경 · 테두리 없음 · 4px · 그림자 · 제목은 본문 안 h4) ── */
.card { background: var(--surface, #fff); border: 0; border-radius: .25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); padding: 1.25rem 1.5rem; }
.card .ch, .ctitle { font-size: 1.125rem; font-weight: 700; color: var(--heading); margin: 0 0 .9rem; padding: 0; background: none; border: 0; }
.card .cb { padding: 0; }
.tip { background: var(--info-sub); color: var(--primary-ink); border-radius: .25rem; padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
.ntips ul { margin: 5px 0 0; padding-left: 16px; } .ntips li { margin: 2px 0; }
body.notes-off [data-note] { display: none; }

/* ── 검색 블록 (Legacy: 검색 조건 col-9 + 검색 TIPs col-3, 아래 가로 분석 탭) ── */
.searchblock { background: var(--bg); padding-bottom: .75rem; margin-bottom: .75rem; }
@media (min-height: 820px) and (min-width: 1100px) {
  .searchblock { position: sticky; top: var(--top-h); z-index: 900; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
}
.srow { display: flex; gap: 1.5rem; align-items: stretch; }
.srow > .card { margin-bottom: 0; }
.scard { flex: 3; min-width: 0; padding: .75rem 1.5rem; overflow: visible; }
.scard .ctitle { margin-bottom: .5rem; }
.sfields { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: flex-start; margin-bottom: .5rem; }
.sfields:last-child { margin-bottom: 0; align-items: center; }
.sfield { display: flex; align-items: flex-start; gap: .5rem; }
.sfield > label { white-space: nowrap; min-width: 52px; font-weight: 700; color: var(--heading); line-height: 2.3rem; font-size: .85rem; }
.stip { flex: 1; min-width: 220px; position: relative; overflow: hidden; background: var(--info-sub); color: var(--primary-ink);
  padding: .75rem 1.25rem; box-shadow: none; }
.stip h3 { font-size: .936rem; color: var(--primary-ink); position: relative; margin-bottom: .4rem; }
.stip ul { list-style: none; margin: 0; padding: 0; position: relative; font-size: .8rem; line-height: 1.6; }
.stip li::before { content: "⦁ "; }
.stip .tipicon { position: absolute; top: -4px; right: 8px; width: 6rem; height: 6rem; fill: #fff; }
.explain { margin-bottom: 1.5rem; }
.explain > .card { flex: 1; color: var(--primary-ink); padding: 1rem 1.5rem; }
.explain h3 { font-size: .936rem; color: var(--primary-ink); margin-bottom: .5rem; }
.explain ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; line-height: 1.7; }
.explain li::before { content: "⦁ "; }

/* 가로 분석 탭 (Legacy nav-pills bg-nav-pills nav-justified · rounded-0) */
.atabs { display: flex; list-style: none; margin: .75rem 0 0; padding: 0; background: var(--tert); }
.atabs li { flex: 1 1 0; display: flex; }
.atabs button { flex: 1; border: 0; background: transparent; color: var(--primary); padding: .55rem 1rem; font: inherit;
  font-weight: 600; cursor: pointer; border-radius: 0; }
.atabs button.on { background: var(--primary); color: #fff; }
.atabs button:hover:not(.on):not(:disabled) { background: var(--primary-sub); }
.atabs button:disabled { color: #a3b1c2; cursor: not-allowed; font-weight: 400; }
.atabs .soon { background: var(--light); color: #8a94a6; font-weight: 400; }

/* 기존 화면(수입 종합·국가 정보)용 */
.search { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.search.mt { margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: .85rem; font-weight: 700; color: var(--heading); }

/* 입력·버튼 (Legacy: selectpicker btn-light · btn radius .15rem · 조회 = btn-info) */
.ddbtn, .nsel { background: var(--light); border: 1px solid var(--light); color: var(--heading); border-radius: .25rem;
  padding: .45rem .9rem; font-size: .85rem; min-height: 2.3rem; text-align: left; }
.ddbtn { min-width: 230px; }
.ddbtn:hover:not(:disabled), .nsel:hover:not(:disabled) { background: var(--surface-3, #dce0e4); }
.ddbtn:disabled, .nsel:disabled { color: var(--mute); cursor: not-allowed; }
.picker .ddbtn::after { content: "▾"; float: right; margin-left: 8px; color: var(--body); }
.chips { display: inline-flex; gap: 6px; }
.chip { border: 1px solid var(--border); background: var(--surface, #fff); border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: .8rem; }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn { display: inline-flex; align-items: center; gap: 5px; background: var(--info); color: #fff; border: 1px solid var(--info);
  border-radius: .15rem; padding: .45rem .9rem; font-size: .9rem; cursor: pointer; line-height: 1.3; }
.btn:hover:not(:disabled) { background: var(--info-d); }
.btn-info { box-shadow: 0 2px 6px rgba(57, 175, 209, .5); }
.btn-outline, .btn.o { background: var(--surface, #fff); color: var(--body); border-color: var(--body); box-shadow: none; }
.btn-outline:hover:not(:disabled), .btn.o:hover:not(:disabled) { background: var(--body); color: #fff; }
.btn.sm { padding: .2rem .6rem; font-size: .75rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.alert { background: #fde8ea; color: #a12a3a; border: 1px solid #f3c2c9; border-radius: .25rem; padding: .6rem 1rem; margin-bottom: 1rem; font-size: .85rem; }

/* picker 패널 */
.picker { position: relative; display: flex; flex-direction: column; gap: 4px; }
.picker .ddbtn { cursor: pointer; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddpanel { position: absolute; z-index: 1100; top: calc(2.3rem + 2px); left: 0; width: min(460px, 90vw); background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: .25rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .13); padding: 8px; }
.ddsearch { width: 100%; border: 1px solid var(--border); border-radius: .25rem; padding: .4rem .7rem; font-size: .85rem; }
.ddbar { display: flex; align-items: center; gap: 2px; margin: 4px 0 2px; }
.ddcount { font-size: .72rem; color: var(--body); margin-left: auto; margin-right: 6px; white-space: nowrap; }
/* 목록 높이 고정 — 후보 수·검색어와 무관하게 패널 크기가 같다(RESULT_014) */
.ddlistwrap { position: relative; }
.ddlist { height: 280px; overflow: auto; border-top: 1px solid var(--light); }
.ddempty { padding: 12px 6px; font-size: .8rem; color: var(--body); }
.ddflash { position: absolute; left: 6px; right: 6px; bottom: 6px; background: #3a4552; color: #fff; font-size: .75rem;
  padding: 6px 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.ddopt { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px; font-size: .85rem; cursor: pointer; border-radius: 3px; color: var(--heading); }
.ddopt:hover { background: var(--tint, #E4EEFF); }
.ddopt input { margin: 0; flex-shrink: 0; }
.ddlbl { flex: 1; min-width: 0; }
.ddsub { font-size: .72rem; color: var(--mute); white-space: nowrap; }
.chiprow { display: flex; flex-wrap: wrap; gap: 4px; max-width: 340px; max-height: 56px; overflow: auto; }
.chiprow:empty { display: none; }
.selchip { display: inline-flex; align-items: center; gap: 2px; background: var(--primary-sub); color: var(--primary-ink);
  border-radius: 10px; padding: 0 3px 0 8px; font-size: .75rem; max-width: 330px; }
.selchip button { border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 4px; }

/* 요약 행(Legacy 에 없던 KPI — 표 위 한 줄로 낮춤) */
.summary { display: flex; flex-wrap: wrap; margin: 0 0 .9rem; border: 1px solid var(--border); border-radius: .25rem; background: var(--surface-2, #fcfcfe); }
.summary > div { flex: 1 1 200px; padding: .5rem .9rem; border-right: 1px solid var(--border); }
.summary > div:last-child { border-right: 0; }
.summary dt { font-size: .75rem; color: var(--body); }
.summary dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.summary dd small { font-size: .72rem; font-weight: 400; color: var(--body); }
.kpi-v[data-empty="true"] { color: #c0c7d2; }
/* 기존 화면용 KPI 카드 */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.kpi { background: var(--surface, #fff); border-radius: .25rem; padding: .8rem 1rem; box-shadow: var(--shadow); }
.kpi-l { font-size: .8rem; color: var(--body); }
.kpi .kpi-v { font-size: 1.3rem; font-weight: 700; color: var(--heading); }
.kpi-h { font-size: .72rem; color: var(--mute); }

/* 지표 버튼(Legacy: btn-sm btn-info rounded-pill) */
.tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: .6rem; font-size: .8rem; }
.pills { display: inline-flex; gap: 6px; }
.pills button { border: 1px solid var(--info); background: var(--surface, #fff); color: var(--info); border-radius: 50rem; padding: .2rem .8rem;
  font-size: .8rem; cursor: pointer; }
.pills button.on { background: var(--info); color: #fff; box-shadow: 0 2px 6px rgba(57, 175, 209, .4); }
.pills button:disabled { border-color: var(--border); color: #b4bccb; cursor: not-allowed; }

/* chart · empty state */
.chartbox { min-height: 240px; display: flex; align-items: center; justify-content: center; background: var(--surface-2, #fcfcfe); border: 1px dashed var(--border); border-radius: .25rem; }
.chartbox.tall { min-height: 360px; }
.chartbox.chart-live { display: block; background: var(--surface, #fff); border: 0; min-height: 380px; margin-top: 1rem; width: calc(100% - 20px); }
.c3host { width: 100%; }
.c3 text { fill: var(--body); }
.c3-axis-y-label { font-weight: 700; }
.chart-note { font-size: .78rem; color: var(--body); margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.chart-note .warn { color: #b4690e; }
.empty { text-align: center; padding: 24px 12px; color: var(--body); }
.empty-ico { font-size: 26px; color: #c0c7d2; }
.empty-t { font-weight: 700; color: var(--heading); margin-top: 4px; }
.empty-d { font-size: .8rem; margin-top: 4px; }
.empty-n { font-size: .75rem; margin-top: 6px; color: var(--mute); }
.engine { font-size: .75rem; color: var(--mute); margin-top: 6px; min-height: 16px; }
.engine.bad { color: #b42318; }

/* table (Legacy table-bordered · 헤더 #0056A6/흰 글씨 · 셀 .5rem) */
table { width: 100%; border-collapse: collapse; font-size: .85rem; color: var(--heading); }
thead th { background: var(--primary); color: #fff; padding: .5rem; text-align: center; white-space: nowrap; font-weight: 700;
  border: 1px solid #1d68ae; position: sticky; top: 0; }
tbody td, tbody th { padding: .45rem .5rem; border: 1px solid var(--border); white-space: nowrap; }
tbody tr:hover td, tbody tr:hover th { background: var(--tint, #E4EEFF); }
tbody th { background: var(--primary-sub); color: var(--primary-ink); font-weight: 700; text-align: center; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.none { color: #b4bccb; }
td.tdempty { text-align: center; color: var(--body); padding: 18px 9px; white-space: normal; }
tr.baserow th, tr.baserow td { background: #fff5f7; font-weight: 700; }
.tblwrap { max-height: 60vh; overflow: auto; }
.mtbl { max-height: none; }
table.yeartbl td.up { color: #c02a3d; }
table.yeartbl td.down { color: #0b6b86; }
.badge.partial { background: #fff0d9; color: #b4690e; font-size: .65rem; padding: 1px 6px; border-radius: 9px; margin-left: 6px; font-weight: 700; }

/* layout helpers (기존 화면) */
.grid2 { display: flex; gap: 1.5rem; flex-wrap: wrap; } .grid2 > .card { flex: 1; min-width: 320px; }
.nrow { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: stretch; margin-bottom: 1.5rem; }
.nrow > .card, .nrow > .tip { margin-bottom: 0; }
.grow2 { flex: 2; min-width: 420px; } .grow1 { flex: 1; min-width: 260px; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 8px; }
.ntabs { display: flex; margin: 0 0 1rem; background: var(--tert); }
.ntab { flex: 1; text-align: center; padding: .55rem 1rem; border: 0; border-radius: 0; background: transparent; color: var(--primary);
  font: inherit; font-weight: 600; cursor: pointer; }
.ntab.on { background: var(--primary); color: #fff; }

/* 좁은 화면 — Legacy 처럼 사이드바는 아이콘 폭으로 줄이고, TIP 은 md 미만에서 숨긴다 */
@media (max-width: 1140px) {
  :root { --side-w: 70px; }
  .sidebar .brand img { height: 26px; }
  .snav a span, .snav .soon { display: none; }
  .snav a { justify-content: center; padding-right: 0; }
  .navsep { margin: 6px 10px; }
}
@media (max-width: 900px) {
  .stip { display: none; }
  .srow { flex-direction: column; gap: 1rem; }
  .atabs { flex-wrap: wrap; }
  .atabs li { flex: 1 1 33%; }
  .navuser div { display: none; }
}

/* 월별 가로 표 — 좁은 창에서는 표 안에서 가로 스크롤, 구분 열은 고정 */
.mtbl table { font-size: .8rem; }
.mtbl thead th, .mtbl tbody td, .mtbl tbody th { padding: .4rem .4rem; }
.mtbl thead th:first-child, .mtbl tbody th { position: sticky; left: 0; z-index: 1; }
.mtbl thead th:first-child { z-index: 2; }
/* 구분 열: 폭은 Legacy 밀도(92px) 그대로. 줄바꿈은 공백에서만 — "SeaChart / 기준데이터" 2줄은 허용,
   "기준데이터" 단어 내부 분할은 금지(keep-all). 넓으면 한 줄 (RESULT_016) */
.mtbl tbody th { min-width: 92px; white-space: normal; word-break: keep-all; overflow-wrap: normal; line-height: 1.25; }

/* ── 결과 탭 · 접기/펼치기 section (RESULT_008) — 기능은 샘플대시보드, 모양은 Legacy 토큰 그대로 ── */
.ninput { background: var(--surface, #fff); border: 1px solid var(--border); color: var(--heading); border-radius: .25rem;
  padding: .45rem .9rem; font-size: .85rem; min-height: 2.3rem; width: 230px; }
.ninput:focus, .nsel:focus { outline: 2px solid var(--primary-sub); border-color: #9cbde0; }
.sfield.period { align-items: center; gap: .35rem; }
.sfield.period > label { line-height: normal; min-width: 0; }   /* "연도"·"월" 은 select 바로 옆에(공통 52px 최소 폭 해제, RESULT_022) */
.tilde { color: var(--body); }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--heading); cursor: pointer; }
#adv-count { font-weight: 700; }
.adv { border: 1px solid var(--light); border-radius: .25rem; padding: .6rem .8rem .2rem; margin-top: .25rem; }
.ddall { display: block; width: 100%; margin-bottom: 6px; text-align: left; }

.rtabs { display: flex; align-items: stretch; flex-wrap: wrap; margin: .75rem 0 0; background: var(--tert); min-height: 38px; }
.rtlabel { display: flex; align-items: center; padding: 0 .9rem; font-size: .8rem; font-weight: 700; color: var(--body); }
.rtwrap { display: inline-flex; align-items: stretch; }
.rtwrap.on { background: var(--primary); }
.rtab { border: 0; background: transparent; color: var(--primary); padding: .55rem .9rem; font: inherit; font-weight: 600;
  cursor: pointer; border-radius: 0; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtwrap.on .rtab { color: #fff; }
.rtwrap:not(.on):hover { background: var(--primary-sub); }
.rtclose { border: 0; background: transparent; color: var(--mute); cursor: pointer; padding: 0 .6rem 0 .1rem; font-size: 1rem; line-height: 1; }
.rtwrap.on .rtclose { color: #cfe0f3; }
.rtclose:hover { color: #c02a3d; }
.rtwrap.on .rtclose:hover { color: #fff; }
.rtnew { border: 0; border-left: 1px dashed #c9d3df; background: transparent; color: var(--info); padding: .55rem .9rem; font: inherit;
  font-weight: 700; cursor: pointer; }
.rtnew:hover:not(:disabled) { background: var(--info-sub); }
.rtnew:disabled { color: #b4bccb; cursor: not-allowed; }
.draftnote { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #f3e1a3; border-radius: .25rem;
  padding: .5rem 1rem; margin-bottom: 1rem; font-size: .85rem; }

.acc .ctitle { margin: 0; }
.acchead { display: flex; align-items: baseline; gap: .4rem; width: 100%; border: 0; background: none; padding: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.acc .accbody { margin-top: .9rem; }
.acc.closed, .acc.planned { padding-top: .9rem; padding-bottom: .9rem; }
.caret { display: inline-block; width: 1rem; color: var(--primary); font-size: .9rem; }
.acc.planned .acchead { cursor: default; color: #8a94a6; font-size: 1rem; }
.acc.planned .caret { color: #c0c7d2; }
.plannote { font-size: .78rem; color: var(--body); margin: .3rem 0 0 1.4rem; }
.ptip { position: relative; overflow: hidden; background: var(--info-sub); color: var(--primary-ink); border-radius: 4px;
  padding: .6rem 1rem; margin-bottom: .9rem; font-size: .8rem; }
.ptip ul { list-style: none; margin: 0; padding: 0; position: relative; line-height: 1.6; }
.ptip li::before { content: "⦁ "; }
.ptip .ri { position: absolute; top: -18px; right: 6px; width: 5rem; height: 5rem; fill: #fff; }
td.out { color: #d0d5dd; text-align: center; background: var(--surface-2, #fcfcfe); }

/* ── picker 선택 동작 (RESULT_009, 샘플대시보드 selector 와 같은 구성) ── */
.ddact { border: 0; background: none; text-align: left; padding: 4px 6px; font: inherit; font-size: .8rem; color: var(--primary);
  font-weight: 700; cursor: pointer; border-radius: 3px; }
.ddact:hover:not(:disabled) { background: var(--tint, #E4EEFF); }
.ddact.match { color: #0a8a5a; }
.ddact:disabled { color: #b4bccb; cursor: not-allowed; }
.ddopt.on .ddlbl { font-weight: 700; color: var(--primary-ink); }
.ddopt .ddsub { margin-left: auto; padding-left: 12px; font-style: italic; }
.ddbtn.has { color: var(--primary-ink); font-weight: 700; }

/* ── 기준데이터 표현 (RESULT_011) — 그래프 series 색은 샘플대시보드 값, 화면 UI 는 Legacy 그대로 ── */
#chart-monthly .c3-line, #chart-yearly .c3-line { stroke-width: 2.5px; }   /* 샘플대시보드: 실적 단가선 3 */
#chart-monthly .c3-target-baseline .c3-line, #chart-yearly .c3-target-baseline .c3-line { stroke-width: 5px; }   /* 기준 5 */
.c3-target-baseline .c3-circle { r: 5; stroke-width: 2px; }
.c3-grid-lines .baseline-price line { stroke: #5f6672; stroke-width: 3px; stroke-dasharray: 9 6; }
.c3-grid-lines .baseline-price text { fill: #5f6672; font-weight: 700; }
tr.baserow th, tr.baserow td { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); }
#monthly-table thead tr.subhead th { background: var(--primary-sub); color: var(--primary-ink); font-weight: 700; font-size: .72rem; border-color: var(--border); }
#monthly-table thead th[rowspan] { vertical-align: middle; }
.mtbl thead tr.subhead th:first-child { position: static; }   /* 두 번째 머리 행의 첫 칸(1월 수입량)은 고정 열이 아님 */
.mtbl tbody td { min-width: 64px; }
.badge.sel { background: var(--primary-sub); color: var(--primary); font-size: .65rem; padding: 1px 6px; border-radius: 9px; margin-left: 6px; font-weight: 700; }

/* ── 지표 표시 버튼(RESULT_014) — Legacy 눈 아이콘 pill 처럼 각각 ON/OFF, 켜진 지표에 ✓ ── */
.pills.mtog button[data-show]::before { content: "✓"; display: inline-block; width: 0; overflow: hidden; transition: none; }
.pills.mtog button[data-show].on::before { width: auto; margin-right: 4px; }
.pills.mtog button[data-show]:not(.on) { color: var(--mute); border-color: var(--border); }
.metric-empty { text-align: center; color: var(--body); padding: 40px 12px; font-size: .85rem; }
.wk-compare { margin: 4px 0 8px; color: var(--body); font-size: .82rem; line-height: 1.5; word-break: keep-all; }   /* RESULT_392: 월 전체 기준 ↔ 현재 누적 비교 문구 */

/* ── 연도별 가로 비교표(RESULT_014): 지표 = 행, 연도 = 열 ── */
.ywrap { max-height: none; overflow-x: auto; }
table.yeartbl { width: auto; min-width: 100%; }
table.yeartbl th, table.yeartbl td { min-width: 92px; }
table.yeartbl .stick { position: sticky; left: 0; z-index: 2; min-width: 150px; text-align: left; }
table.yeartbl tbody th.stick { background: var(--surface-2, #f8f9fb); color: var(--heading); font-weight: 700; }
table.yeartbl thead th.stick { background: var(--primary); }
table.yeartbl thead th.basecol { background: #5f6672; }
/* 기준데이터 열만 넓힌다 — "SeaChart 기준데이터" 를 한 줄로(한글 단어 중간 줄바꿈 금지). 연도 열은 compact 유지 */
table.yeartbl th.basecol, table.yeartbl td.basecol { white-space: nowrap; word-break: keep-all; min-width: 140px; }
table.yeartbl td.basecol { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); font-weight: 700; }
table.yeartbl thead th.selcol { box-shadow: inset 0 -3px 0 #ffd36b; }
table.yeartbl td.selcol { font-weight: 700; background: var(--tint, #f3f8ff); }
table.yeartbl thead .badge { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── 연도별 수입 현황 (수출국·원산지별) — RESULT_017. 조합 열(선택·수출국·원산지)은 고정, 연도 열은 가로 스크롤 ── */
.pwrap { max-height: 60vh; overflow: auto; }
table.pairtbl { font-size: .8rem; width: auto; min-width: 100%; }
table.pairtbl th, table.pairtbl td { padding: .4rem .45rem; }
table.pairtbl td.num { min-width: 64px; }
table.pairtbl .pc0, table.pairtbl .pc1, table.pairtbl .pc2 { position: sticky; z-index: 2; background: var(--surface, #fff); }
table.pairtbl thead .pc0, table.pairtbl thead .pc1, table.pairtbl thead .pc2 { background: var(--primary); z-index: 3; }
table.pairtbl .pc0 { left: 0; width: 34px; min-width: 34px; max-width: 34px; text-align: center; }
table.pairtbl .pc1 { left: 34px; width: 112px; min-width: 112px; max-width: 112px; }
table.pairtbl .pc2 { left: 146px; width: 112px; min-width: 112px; max-width: 112px; box-shadow: inset -1px 0 0 var(--border); }
table.pairtbl td.pc1, table.pairtbl td.pc2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; color: var(--heading); }
table.pairtbl tbody tr { cursor: pointer; }
table.pairtbl tbody tr:hover td { background: var(--tint, #f3f8ff); }
table.pairtbl tbody tr.on td { background: var(--tint, #eef5ff); }
table.pairtbl tbody tr.on td.pc1, table.pairtbl tbody tr.on td.pc2 { font-weight: 700; color: var(--primary-ink); }
table.pairtbl td.zero { color: var(--mute); }
table.pairtbl td.selcol { font-weight: 700; }
table.pairtbl thead th.selcol { box-shadow: inset 0 -3px 0 #ffd36b; }
table.pairtbl thead .badge { background: rgba(255, 255, 255, .22); color: #fff; }
table.pairtbl tfoot th, table.pairtbl tfoot td { background: var(--primary-sub); font-weight: 700; border: 1px solid var(--border); }
table.pairtbl tfoot th.pcfoot { position: sticky; left: 0; z-index: 2; text-align: center; }
/* 합계 행 고정(RESULT_020 검토): 표 안을 세로 스크롤해도 선택 합계·전체 합계가 보이게. 머리와 같은 sticky 방식.
   월별 조합(RESULT_025)은 합계 행마다 기준데이터 행이 따라와 바닥 4줄 — 뒤에서부터 33px 씩 쌓는다 */
table.pairtbl tfoot tr:nth-last-child(4) th, table.pairtbl tfoot tr:nth-last-child(4) td { position: sticky; bottom: 99px; z-index: 1; }
table.pairtbl tfoot tr:nth-last-child(3) th, table.pairtbl tfoot tr:nth-last-child(3) td { position: sticky; bottom: 66px; z-index: 1; }
table.pairtbl tfoot tr:nth-last-child(2) th, table.pairtbl tfoot tr:nth-last-child(2) td { position: sticky; bottom: 33px; z-index: 1; }
table.pairtbl tfoot tr:last-child th, table.pairtbl tfoot tr:last-child td { position: sticky; bottom: 0; z-index: 1; }
/* 합계 행의 왼쪽 라벨은 바닥·왼쪽 모두 고정 — 본문 고정 열(z 2)보다 위에. 위 규칙들보다 구체적이어야 z-index 가 적용된다 */
table.pairtbl tfoot tr:nth-last-child(-n+4) th.pcfoot { z-index: 3; }
table.pairtbl th.basecol { background: #5f6672; color: #fff; }
table.pairtbl td.basecol { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); font-weight: 700; }
table.pairtbl tfoot td.basecol { background: var(--surface-3, #e9ebf0); }
/* 월별 조합의 기준데이터 행(RESULT_025): 실적 행 바로 아래 종속 행 — 기준 보라 계열의 옅은 배경, 선택 체크는 실적 행에만 */
table.pairtbl tbody tr.pairbase { cursor: default; }
table.pairtbl tbody tr.pairbase td { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); font-size: .74rem; border-top: 0; }
table.pairtbl tbody tr.pairbase:hover td { background: var(--surface-3, #f3f4f7); }
table.pairtbl tbody tr.pairbase td.pcbase { left: 34px; width: 224px; min-width: 224px; max-width: 224px; font-weight: 700; white-space: nowrap;
  box-shadow: inset -1px 0 0 var(--border); padding-left: .8rem; }
table.pairtbl tbody tr.pairbase td.num { font-weight: 600; }
table.pairtbl tfoot tr.basesum th, table.pairtbl tfoot tr.basesum td { background: var(--surface-3, #e9ebf0); color: var(--ink-strong, #2b313b); font-size: .74rem; }
#chart-mpairs .c3-target-baseline .c3-line { stroke-width: 5px; }
/* 주별 조합 그래프(RESULT_025): 한 달 최대 4개 주라 그림 영역을 넓게 쓰면 휑하다 — 막대 최대 폭(JS WEEKLY_BAR_MAX)에 더해 그림 폭을 제한하고 가운데 */
#chart-wpairs .c3host { width: 100%; max-width: 880px; margin: 0 auto; }
table.pairtbl tfoot tr.selsum th, table.pairtbl tfoot tr.selsum td { background: var(--tint, #eef5ff); }
#pairs-table thead tr.subhead th { background: var(--primary-sub); color: var(--primary-ink); font-weight: 700; font-size: .72rem; border-color: var(--border); position: static; }
.ctitle-sm { font-size: .85rem; color: var(--heading); }

/* ── 수입 종합 정보 (RESULT_023) — Legacy 표 스타일, 날짜 입력은 select 와 같은 모양 ── */
.ndate { width: 150px; padding: .3rem .5rem; }
.infowrap { max-height: 70vh; overflow: auto; }
.infoper input[type="date"] { width: auto; min-width: 9.5rem; }   /* RESULT_348 조회 기간 */
.infopager { margin: .5rem 0 0; }
table.infotbl { font-size: .8rem; }
table.infotbl th, table.infotbl td { padding: .4rem .5rem; }
table.infotbl td { text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.infotbl td.date { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.infotbl td.prod { white-space: normal; max-width: 340px; line-height: 1.3; }
table.infotbl td.prod .en { font-size: .72rem; }
table.infotbl td.ent { max-width: 220px; }
table.infotbl td.ctry { white-space: nowrap; }
table.infotbl td.hsk { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.infotbl td.hsk.none { color: var(--mute); }
table.infotbl tr.wk td.date { color: var(--body); }
.badge.src { background: #fff0d9; color: #b4690e; font-size: .62rem; padding: 0 5px; border-radius: 9px; margin-left: 5px; font-weight: 700; }
.badge.ent-ambiguous { background: #fff0d9; color: #b4690e; }
.badge.ent-unresolved, .badge.ent-unknown { background: var(--surface-3, #eceff3); color: var(--body); }
.badge.ent-ambiguous, .badge.ent-unresolved, .badge.ent-unknown { font-size: .68rem; padding: 1px 7px; border-radius: 9px; font-weight: 700; }
.pager { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; }
.pager .pginfo { color: var(--body); }

/* ── 수입 국가 정보 (RESULT_026) — 국가 표(선택 행) · 선택 국가 표 + 트리맵 ── */
.ctrywrap { max-height: 56vh; overflow: auto; }
table.ctrytbl, table.ctytbl { font-size: .8rem; }
table.ctrytbl th, table.ctrytbl td, table.ctytbl th, table.ctytbl td { padding: .4rem .5rem; }
table.ctrytbl td.rank, table.ctytbl td.rank { text-align: center; color: var(--body); }
table.ctrytbl td.ctry { white-space: nowrap; font-weight: 600; color: var(--heading); }
table.ctrytbl tbody tr { cursor: pointer; }
table.ctrytbl tbody tr:hover td { background: var(--tint, #f3f8ff); }
table.ctrytbl tbody tr.on td { background: var(--tint, #eef5ff); }
table.ctrytbl tbody tr.on td.ctry { color: var(--primary-ink); }
table.ctrytbl tbody tr:focus-visible { outline: 2px solid var(--primary-sub); outline-offset: -2px; }
table.ctrytbl thead th.basecol { background: #5f6672; color: #fff; }
table.ctrytbl td.basecol { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); font-weight: 700; }
table.ctrytbl tfoot th, table.ctrytbl tfoot td { background: var(--primary-sub); font-weight: 700; border: 1px solid var(--border); }
table.ctrytbl tfoot td.basecol { background: var(--surface-3, #e9ebf0); }
table.ctrytbl td.zero { color: var(--mute); }
.ctyrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.ctywrap { max-height: 420px; overflow: auto; }
.treebox { min-height: 360px; margin-top: 0; width: 100%; }
.treehost { width: 100%; }
@media (max-width: 1100px) { .ctyrow { grid-template-columns: 1fr; } }

/* ── 최근 3년 누적 section 전용 누적 기간 선택(RESULT_028) — 전역 검색 form 보다 작게, tbar 안에 ── */
.rangesel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--heading); }
.rangesel label { font-weight: 700; margin-right: 2px; }
.nsel.sm { padding: .15rem 1.4rem .15rem .5rem; font-size: .8rem; min-width: 70px; }

/* ── 수입처 분포 (원산지 기준) 지도 (RESULT_030) — 샘플대시보드 mapSection 의 밀도, V4 palette ── */
.omap { position: relative; }
.wmap-wrap { width: 100%; max-width: 1100px; margin: 0 auto; }   /* RESULT_031: 980 → 1100 (데스크톱 약 12% 소폭 확대, 좁은 폭은 100%) */
svg.wmap { width: 100%; height: auto; display: block; }
.wmap-sphere { fill: #f7f9fc; stroke: #d6dde8; stroke-width: .8; }
.wmap-c { stroke: #fff; stroke-width: .5; }
.wmap-c.has { cursor: pointer; }
.wmap-c.has:hover, .wmap-c.has:focus-visible { stroke: #0b2a4a; stroke-width: 1.2; outline: none; }
.wmap-c.sel { stroke-width: 2.2; }
.wmap-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .76rem; margin: 6px 0 2px; justify-content: center; }
.wmap-grad { display: inline-block; width: 160px; height: 10px; border-radius: 5px; border: 1px solid var(--border);
  background: linear-gradient(90deg, rgb(222,233,251), rgb(37,88,196)); }
.wmap-none { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--body); }
.wmap-none .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--border); }
.opills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--border); background: var(--surface, #fff);
  border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .78rem; cursor: pointer; color: var(--heading); min-width: 120px; text-align: left; }
.opill .nm { font-weight: 700; }
.opill .kg { color: var(--body); }
.opill .pc { color: var(--primary); font-weight: 700; }
.opill:hover { background: var(--tint, #f3f8ff); }
.opill.on { border-color: #ffb100; background: #fff7e6; }
.wmap-unmapped { margin-top: 8px; font-size: .76rem; }
.wmap-tip { position: absolute; pointer-events: none; background: #0b2a4a; color: #fff; padding: 6px 9px; border-radius: 6px; font-size: .76rem;
  line-height: 1.35; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 5; white-space: nowrap; }
.wmap-tip b { display: block; margin-bottom: 2px; }

/* RESULT_031: 막대 둥근 모서리는 시험 후 원복 — C3 0.7.20 에 radius 옵션이 없고, stroke 방식은 data.color 로 색을 주는 주별 그래프의
   기준데이터 막대(인라인 stroke 없음 → 검정 외곽선)에서 상단 이색선을 만들었다. 사각 막대(c3.min.css .c3-bar{stroke-width:0}) 유지 */

/* ── 수입 국가 정보 상위 10 표의 추이(상대 막대) · 요약 줄 (RESULT_031, 샘플대시보드 kgDist) ── */
table.ctytbl th.trend, table.ctytbl td.trend { width: 140px; min-width: 120px; }
.trendbar { height: 10px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.trendbar i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.dist-summary { font-size: .78rem; margin: -2px 0 8px; }
table.ctytbl a.lk { color: var(--heading); text-decoration: none; border-bottom: 1px dotted #9cbde0; }
table.ctytbl a.lk:hover { color: var(--primary); }

/* ── 데이터 반영 운영(RESULT_035) — 상태 배지는 색 + 텍스트 병기 ── */
.sbadge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.sbadge.ok { background: #e3f8f0; color: #0b7a56; }
.sbadge.retry { background: var(--warn-bg); color: var(--warn-ink); }
.sbadge.perm { background: #fde8ea; color: #a12a3a; }
.sbadge.hold { background: var(--primary-sub); color: var(--primary); }
.sbadge.muted { background: var(--surface-3, #eceff3); color: var(--body); }
.adm-bar { margin-bottom: 1rem; align-items: center; }
.adm-health { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .85rem; }
.kv dt { color: var(--mute); font-weight: 600; white-space: nowrap; }
.kv dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
.kv.ready dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.adm-counts { display: flex; gap: 8px; margin-bottom: .6rem; }
.adm-samples { margin-top: .6rem; font-size: .8rem; } .adm-samples li { overflow-wrap: anywhere; white-space: normal; }
.adm-prereq { font-size: .85rem; margin: .4rem 0 0 1.2rem; }
#adm-note[data-tone="ok"] { background: #e3f8f0; color: #0b7a56; border-color: #b8e9d6; }
#adm-note[data-tone="muted"] { background: var(--surface-3, #eceff3); color: var(--body); border-color: var(--border); }
table.runs td.msg { white-space: normal; max-width: 420px; overflow-wrap: anywhere; font-size: .8rem; }
table.runs tr.running td { background: var(--warn-bg); }
.nsel.sm { padding: .15rem .4rem; font-size: .8rem; }

/* ── HSK 코드 탐색기(RESULT_036 단계 1) ── */
.sfield.grow { flex: 1; min-width: 320px; } .sfield.grow .ninput { width: 100%; }
.hsk-cov { flex-wrap: wrap; }
table.hsktbl td.code { font-family: ui-monospace, Menlo, monospace; font-weight: 600; color: var(--primary); white-space: nowrap; }
table.hsktbl td.msg { white-space: normal; max-width: 420px; overflow-wrap: anywhere; }
table.hsktbl td { white-space: normal; overflow-wrap: anywhere; }
table.hsktbl tr.pick { cursor: pointer; }
.ctitle.sub { font-size: .95rem; margin-top: 1rem; }

/* ── 기준정보 관리(RESULT_037) ── */
.ma-panel[hidden] { display: none; }
.ma-detail { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.ma-sub { padding: .9rem 1.1rem; margin-bottom: 1rem; box-shadow: none; border: 1px solid var(--border); }
.ma-form { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .8rem; align-items: center; font-size: .85rem; }
.ma-form label { color: var(--mute); font-weight: 600; white-space: nowrap; }
.ma-form .ninput, .ma-form .nsel { width: 100%; box-sizing: border-box; }
.ma-form .ninput.sm { width: 120px; }
/* 로그인 폼(세로) — 라벨은 입력칸 위 · 라벨/입력칸/버튼이 같은 좌우선 · 폭 100% · 포커스는 outline(폭 불변) */
.authform { display: grid; gap: 1rem; }
.authform .sfield { display: grid; gap: .35rem; }
.authform .sfield > label { line-height: 1.4; min-width: 0; white-space: normal; }
.authform .ninput { width: 100%; max-width: none; box-sizing: border-box; min-height: 2.5rem; font-size: 1rem; }
.authform .btn { width: 100%; justify-content: center; min-height: 2.5rem; }
.ma-cands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6rem; font-size: .8rem; }
.ma-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .8rem; }
.ma-card { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; text-align: left; background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: .25rem; padding: .6rem .8rem; cursor: pointer; font: inherit; }
.ma-card:hover { border-color: var(--info); }
.ma-card-l { font-weight: 700; color: var(--heading); font-size: .82rem; }
.ma-card-v { font-size: 1rem; align-self: flex-start; }
.ma-card-h { font-size: .72rem; }
.ma-actions { white-space: nowrap; } .ma-actions .btn { margin-right: 4px; }
table.ltable tr.stale td { background: var(--warn-bg); }
td.none, dd.none { color: #b4bccb; }
#feedback-doc { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
/* 관리자 MFA 화면(RESULT_240CU) */
.mfaqr { display: flex; justify-content: center; margin: .5rem 0; } .mfaqr svg { width: 220px; height: 220px; }
.mfakey { letter-spacing: .08em; word-break: break-all; }
.mfacodes { columns: 2; font-size: 1rem; line-height: 1.9; } .mfarec { margin: .8rem 0; }

/* RESULT_342 — 주별 section 표시 달 전환(조회 월 · 다음 달) */
.wnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.wnav-btn { min-width: 36px; height: 32px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface, #fff); color: var(--primary); cursor: pointer; font-size: 13px; }
.wnav-btn:hover:not(:disabled) { background: var(--primary-sub); }
.wnav-btn:disabled { color: var(--mute); background: var(--tert); cursor: not-allowed; }
.wnav-btn:focus-visible, .wnav-retry:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wnav-label { color: var(--heading); font-size: 14px; }
.wnav-why { font-size: 13px; }
.wnav-retry { border: 1px solid var(--border); border-radius: 4px; background: var(--surface, #fff); color: var(--primary); padding: 4px 10px; cursor: pointer; font-size: 13px; }
.wnote { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; padding: 8px 12px; border-radius: 4px; border-left: 3px solid var(--border); background: var(--tert); color: var(--heading); font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.wnote.is-next { background: var(--primary-sub); border-left-color: var(--primary); }
.wnote.is-warn { background: var(--warn-bg); color: var(--warn-ink); border-left-color: var(--warn-ink); }
/* 342-Delta — 금액 미공개(0 아님) · 일부 미공개(확인된 금액만) */
.ltable td.undis { color: var(--mute); font-style: italic; }
.ltable td.partial { color: var(--heading); }
/* 342-Delta — 좁은 화면(≤600px)에서 상단 막대가 화면 밖으로 넘치지 않게 줄바꿈(데이터 상태 문구는 숨기지 않음) */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; padding: 4px 8px; }
  .topbar .tbtn { padding: .3rem .5rem; }
  .datastat { white-space: normal; min-width: 0; }
  .navuser { height: auto; min-height: 36px; padding: 2px 8px; margin-left: 0; }
}
/* 342-Delta2 — 좁은 화면(≤600px) 검색 조건: 고정 최소 폭(.ddbtn 230px · .sfield.grow 320px)을 풀어 페이지 가로 넘침 제거. 데스크톱 불변 */
@media (max-width: 600px) {
  .sfield, .sfield.grow { min-width: 0; max-width: 100%; }
  .sfield.grow { flex-basis: 100%; }
  .picker { min-width: 0; flex: 1 1 auto; }
  .ddbtn { min-width: 0; width: 100%; max-width: 100%; }
  .ninput { min-width: 0; max-width: 100%; }
}
/* 342-Delta3 — 제목 오른쪽 기간: 표시 달 강조 · 좁은 화면에서 자연스럽게 줄바꿈(잘림 없음) */
.acchead .wper { white-space: normal; overflow-wrap: anywhere; }
.acchead .wper b { color: var(--heading); font-weight: 700; }

/* 표 열 정렬 버튼(RESULT_388) — 머리 글자 모양 그대로, 키보드 초점 표시, 활성 열 ▲/▼ */
th.sortable { padding: 0; }
.sortbtn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; padding: 6px 6px; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.sortbtn:hover { text-decoration: underline; }
.sortbtn:focus-visible { outline: 2px solid #39afd1; outline-offset: -2px; }
.sortmark { display: inline-block; min-width: 0.8em; font-size: 0.8em; line-height: 1; }
th.sorted .sortmark { color: #ffd166; }

/* 월별 복합 그래프(전체 · 수출국·원산지별 공통 · RESULT_388 후속) — 선은 막대 위 층 + 흰 halo, 비교 대상은 색 + 선 모양(검색 연도 실선 · 전년 대시 · 2년 전 점선),
   기준은 얇은 보라 장대시(이전 5px → 2.6px), 격자는 연하게. 값·축은 바꾸지 않는다(JS monthlyChartConfig: 양 축 0 부터) */
#chart-monthly .c3-line, #chart-mpairs .c3-line { stroke-width: 2.2px; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
#chart-monthly .c3-target-baseline .c3-line, #chart-mpairs .c3-target-baseline .c3-line { stroke-width: 2.6px; stroke-dasharray: 9 4; }
#chart-monthly .c3-target-age1 .c3-line, #chart-mpairs .c3-target-age1 .c3-line { stroke-dasharray: 6 3; }
#chart-monthly .c3-target-age2 .c3-line, #chart-mpairs .c3-target-age2 .c3-line { stroke-dasharray: 2 3; }
#chart-monthly .c3-circle, #chart-mpairs .c3-circle { stroke: #fff; stroke-width: 1px; }
#chart-monthly .c3-target-baseline .c3-circle, #chart-mpairs .c3-target-baseline .c3-circle { r: 3.5; stroke-width: 1px; }
#chart-monthly .c3-grid line, #chart-mpairs .c3-grid line { stroke: #eef1f5; }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.sortnote { color: #b4690e; font-weight: 600; margin-right: 6px; }

/* ── 씨차트 AI 채팅 테스트판(D-023) — 사이드바 대화 목록 · 채팅 화면 ── */
.chatnav { padding: 0 12px 4px 18px; max-height: 38vh; overflow-y: auto; }
.chatgrp-h { color: #6f7f94; font-size: .72rem; margin: 6px 0 2px; }
.chatlist { list-style: none; margin: 0; padding: 0; }
.chatlist a { display: block; color: var(--side-ink); text-decoration: none; font-size: .8rem; padding: 4px 6px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatlist a:hover, .chatlist a:focus-visible { color: var(--side-hover); background: rgba(255, 255, 255, .05); outline: none; }
.chatlist a.on { color: var(--side-on); background: rgba(255, 255, 255, .08); }
.chatwrap { display: flex; flex-direction: column; min-height: calc(100vh - 220px); padding: 0; }
.chathead { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--heading); }
.chathead .spacer { flex: 1; }
.chatlog { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chatwelcome { max-width: 760px; margin: 24px auto; text-align: center; }
.chatwelcome .note { color: var(--body); }
.chatwelcome .small { font-size: .78rem; color: var(--mute); }
.chatex { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.chatmsg { max-width: min(860px, 92%); padding: 10px 14px; border-radius: 10px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.chatmsg p { margin: 0 0 6px; }
.chatmsg p:last-child { margin-bottom: 0; }
.chatmsg.user { align-self: flex-end; background: var(--primary); color: #fff; white-space: pre-wrap; }
.chatmsg.assistant { align-self: flex-start; background: var(--surface, #fff); border: 1px solid var(--border); color: var(--heading); }
.chatmsg.pending { align-self: flex-start; color: var(--mute); font-style: italic; }
.chatmsg.error { align-self: flex-start; background: var(--warn-bg); color: var(--warn-ink); }
.chatmsg ul, .chatmsg ol { margin: 4px 0 8px; padding-left: 20px; }
.chatmsg h3, .chatmsg h4, .chatmsg h5 { font-size: .95rem; margin: 8px 0 4px; }
.chatmsg .tscroll { overflow-x: auto; margin: 6px 0; }
.chattbl { border-collapse: collapse; font-size: .82rem; }
.chattbl th, .chattbl td { border: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; }
.chattbl th { background: var(--tert); color: var(--heading); }
.chattbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chatlink { color: var(--primary); font-weight: 600; }
.chatbar { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.chatbar textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 200px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; }
.chatfoot { margin: 0; padding: 0 16px 10px; font-size: .75rem; color: var(--mute); }
@media (max-width: 1140px) { .chatnav { display: none; } }
/* 채팅 선택지 버튼(ask_choice) */
.chatchoices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.chatchoices .chip { font-size: .82rem; padding: 5px 12px; }
.chatchoices .chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.chatchoices .chipall { border-style: dashed; }
.chatchoices button:disabled { opacity: .55; cursor: default; }
.chatchoices .chatdone { padding: .3rem .8rem; font-size: .8rem; }
.chatchoicehint { flex-basis: 100%; margin: 2px 0 0; font-size: .75rem; color: var(--mute); }
/* 업체 상세 카드(수입 종합 정보 업체 클릭) */
a.entlink { color: var(--primary); text-decoration: none; }
a.entlink:hover { text-decoration: underline; }
.entcard .cb { padding-top: 10px; padding-bottom: 10px; }
.entcard .tbar { margin-bottom: 2px; }
.entcard .entbasic { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 4px 0 6px; }
.entcard .kv { display: flex; gap: 6px; font-size: .85rem; }
.entcard .kv .k { color: var(--mute); }
.entcard .entsum { font-size: .8rem; }
.entcard .entrels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 6px 18px; }
.entcard .rel { margin-top: 2px; min-width: 0; }
.entcard .kv { min-width: 0; overflow-wrap: anywhere; }
.entcard .pill { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.entcard .rt { font-weight: 600; color: var(--heading); font-size: .82rem; margin-bottom: 4px; }
.entcard .rl { display: flex; flex-wrap: wrap; gap: 6px; }
.entcard .pill { border: 1px solid var(--border); background: var(--surface, #fff); border-radius: 14px; padding: 2px 10px; font-size: .78rem; cursor: pointer; }
.entcard .pill:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.entcard .pill:disabled { cursor: default; }
.entcard .tbar { flex-wrap: wrap; gap: 6px; }
.entcard .entsumline { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .82rem; margin-top: 4px; }
.entcard .enttop { min-width: 0; overflow-wrap: anywhere; }
.entcard .entlinkbtn { border: 0; background: none; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-align: left; }
.entcard .entlinkbtn:hover { text-decoration: underline; }
.entcard .entlist { max-height: 168px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; }
.entcard .enttbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.entcard .enttbl th { position: sticky; top: 0; background: var(--tert); color: var(--heading); font-weight: 600; text-align: left; padding: 3px 8px; }
.entcard .enttbl td { padding: 2px 8px; border-top: 1px solid var(--light); overflow-wrap: anywhere; }
.entcard .enttbl .num { text-align: right; white-space: nowrap; width: 1%; }

/* 회원 관리(2026-11-11) */
.ac-form { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 6px 0 8px; }
.ac-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted, #6b7280); }
.ac-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ac-secret-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.ac-secret-row code { font-size: 14px; word-break: break-all; user-select: all; }
.btn.danger { color: #b42318; border-color: #f1b5ae; }

/* 왼쪽 메뉴 접기(2026-11-11) · 분석 화면 AI 도우미 오른쪽 패널 */
body.nav-collapsed .sidebar { display: none; }
#navbtn[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
:root { --assist-w: 380px; }
body.assist-open .main { margin-right: var(--assist-w); }
.assist { position: fixed; top: 0; right: 0; bottom: 0; width: var(--assist-w); max-width: 100vw; background: var(--surface-2, #f7f9fc);
  border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 40; }
.assist[hidden] { display: none; }
.assist-head { display: flex; align-items: center; gap: 6px; height: var(--top-h); padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface, #fff); }
.assist-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.assist-log .chatmsg { max-width: 100%; font-size: .88rem; }
.assist-hello { font-size: .85rem; margin: 0; }
.assist-tools { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.assist-auto { font-size: .8rem; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.assist-form { display: flex; gap: 6px; padding: 8px 12px 12px; }
.assist-form textarea { flex: 1; resize: none; font-size: .88rem; }
.assist-fab { position: fixed; right: 18px; bottom: 18px; z-index: 39; border-radius: 22px; padding: 10px 16px; border: 0;
  background: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }
.assist-fab[hidden] { display: none; }
@media (max-width: 900px) { body.assist-open .main { margin-right: 0; } .assist { width: 100vw; } }
/* 원문 상호(확인 전 · 0016) */
td.ent.obs .obsname { color: var(--heading); }
td.ent.obs .badge { font-size: .7rem; margin-left: 2px; }


/* ═════════ 디자인 시안 적용 1단계(D-025 · 2026-11-11) — 값·계산 불변, 모양만 ═════════ */
.sidebar { background: linear-gradient(180deg, #172a52 0%, #0e1a33 100%); }
.card { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line, #eef0f4); }
/* 섹션 번호(01 02 03 …) — 화면의 접기/펼치기 섹션 순서대로 */
.content { counter-reset: sec; }
section.acc > h2.ctitle .acchead::before { counter-increment: sec; content: counter(sec, decimal-leading-zero);
  color: var(--primary); font-weight: 700; margin-right: .55rem; letter-spacing: .02em; }
/* 부드러운 파랑 버튼(이미지 · 데이터 다운로드) */
.btn.btn-soft { background: var(--primary-sub); color: var(--primary); border: 0; border-radius: 10px; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.btn.btn-soft:hover { background: #dce8fc; }
/* 지표 켜기/끄기 = 묶음 탭 모양 */
.pills.mtog { background: #f1f3f8; border-radius: 12px; padding: 4px; gap: 4px; }
.pills.mtog button { border: 0; border-radius: 9px; background: transparent; color: var(--mute); font-weight: 600; padding: 6px 14px; }
.pills.mtog button.on { background: var(--surface, #fff); color: var(--primary); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
/* 그래프 카드 머리 요약 */
.kpihead { margin: 14px 4px 4px; }
.kpihead:empty { display: none; }
.kpihead .kpilabel { color: var(--body); font-size: .9rem; margin-bottom: 2px; }
.kpihead .kpiline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpihead .kpibig { font-size: 2rem; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
.kpihead .kpiunit { color: var(--mute); font-size: 1rem; }
.kpihead .kpidelta { border-radius: 8px; padding: 3px 10px; font-weight: 700; font-size: .85rem; }
.kpihead .kpidelta.up { background: #fdecea; color: #d9480f; }
.kpihead .kpidelta.down { background: #e6effd; color: #2558c4; }
/* 그래프: 선 굵기 · 기준 = 회색 점선(점 없음) */
.chart-live .c3-line { stroke-width: 2.5px; }
.chart-live .c3-target-baseline .c3-line { stroke-dasharray: 6 5; stroke-width: 2px; }
.chart-live .c3-target-baseline .c3-circle { display: none; }
.chart-live .c3-grid line { stroke: #eef0f4; }
/* 알약 범례(누르면 켜고 끄기) */
.pillegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.pillegend .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line, #e3e6ee); background: var(--surface, #fff); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; color: var(--heading); cursor: pointer; font-size: .85rem; }
.pillegend .pill[aria-pressed="false"] { opacity: .4; }
.pillegend .pmark { display: inline-block; flex-shrink: 0; }
.pillegend .pmark.bar { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pillegend .pmark.line { width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.pillegend .pmark.dash { width: 16px; height: 0; border-top: 2px dashed var(--c); }
/* 표 진하기(같은 열끼리 · 값 불변) */
table.pairtbl tbody tr td[data-heat="1"] { background: var(--tint, #eef4fd); }
table.pairtbl tbody tr td[data-heat="2"] { background: var(--tint-2, #d6e2f8); }
table.pairtbl tbody tr td[data-heat="3"] { background: var(--tint-3, #a9c3f0); }
table.pairtbl tbody tr td[data-heat="4"] { background: #2F6BE0; color: #fff; font-weight: 600; }
table.pairtbl tr.on td[data-heat] { outline: 1px solid rgba(47, 107, 224, .35); outline-offset: -1px; }
.heatlegend { display: flex; align-items: center; gap: 4px; color: var(--mute); font-size: .8rem; margin: 8px 2px 2px; }
.heatlegend .heatsw { width: 20px; height: 10px; border-radius: 3px; background: var(--surface-2, #f6f7fb); display: inline-block; }
.heatlegend .heatsw[data-heat="1"] { background: var(--tint, #eef4fd); }
.heatlegend .heatsw[data-heat="2"] { background: var(--tint-2, #d6e2f8); }
.heatlegend .heatsw[data-heat="3"] { background: var(--tint-3, #a9c3f0); }
.heatlegend .heatsw[data-heat="4"] { background: #2F6BE0; }
.heatlegend .heatnote { margin-left: 10px; }
/* 안내 상자(표와 그래프 설명 및 사용법) = 연보라 */
.ptip { background: var(--tip-bg); border: 0; border-radius: 14px; color: var(--body); }
.ptip .ri { display: none; }                 /* 시안: 큰 장식 아이콘 없음(잘려 보였다) — 제목만 연보라 */
.ptip { padding: .9rem 1.2rem; font-size: .85rem; }
.ptip .ptiptitle::before { content: "ⓘ "; }
.ptip .ptiptitle { color: var(--tip-ink); font-weight: 700; margin-bottom: 4px; }
section[data-sec="monthly"] .ptip { margin-top: 14px; }

/* 수입처 지도 범례(D-025 · 연속 진하기 유지) — 알약 모양 척도 + 오른쪽 '회색 : 수입 실적 없음' */
.wmap-legend { justify-content: space-between; font-size: .85rem; margin-top: 12px; }
.wmap-scale { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-3, #f3f5fa); border-radius: 10px; padding: 7px 14px;
  color: var(--body); font-weight: 600; }
.wmap-legend .wmap-grad { width: 180px; border: 0; }
.wmap-none { color: var(--body); }
.wmap-sphere { fill: #fff; stroke: #eef0f4; }
.wmap-c { stroke: #fff; stroke-width: .6; }
.wmap-c.has:hover, .wmap-c.has:focus-visible { stroke: #1b2b4f; }
.opill { border-radius: 12px; border-color: var(--line, #e4e7ef); }
.opill:hover { background: var(--primary-sub); }

/* ═════════ 디자인 시안 2단계(D-025) — 채팅 답변 카드 · 선택 시트 (시안 #174) ═════════ */
.chatwrap { position: relative; }
.chatmsg.assistant { border-radius: 14px; border-color: var(--line, #eceff4); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.chatmsg.user { border-radius: 14px 14px 4px 14px; }
.ccards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ccard { background: var(--surface, #fff); border: 1px solid var(--line, #eceff4); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.ccardhead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ccardhead b { color: var(--heading); font-size: .92rem; }
.ccardhead .muted { font-size: .76rem; }
.ccardchart { margin: 4px 0 8px; }
.ccardchart .pillegend { margin-top: 4px; }
.ccardtbl { font-size: .8rem; }
.ccardtbl thead th { background: var(--surface-3, #f3f5fa); color: var(--heading); font-weight: 700; }
.ccardtbl th[scope="row"] { text-align: left; white-space: nowrap; }
.ccardtbl td[data-heat="1"] { background: var(--tint, #eef4fd); }
.ccardtbl td[data-heat="2"] { background: var(--tint-2, #d6e2f8); }
.ccardtbl td[data-heat="3"] { background: var(--tint-3, #a9c3f0); }
.ccardtbl td[data-heat="4"] { background: #2F6BE0; color: #fff; font-weight: 600; }
.ccardtbl tr.basesum th, .ccardtbl tr.basesum td { background: var(--surface-3, #f3f4f7); color: var(--ink-strong, #2b313b); }
.ccardlink { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--primary); }
/* 선택 시트: 입력창 바로 위 · 둥근 위 모서리 · 그림자 */
.chatsheet { margin: 0 16px; border: 1px solid var(--line, #e4e7ef); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface, #fff);
  box-shadow: 0 -6px 18px rgba(16, 24, 40, .08); padding: 12px 16px 10px; }
.chatsheethead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.chatsheethead b { color: var(--heading); }
.chatsheet .chatchoices { margin-top: 6px; }
.chatsheet .chip { border-radius: 10px; padding: 7px 14px; font-weight: 600; }
.chatsheet .chip:hover { background: var(--primary-sub); border-color: #c9d8f6; }

/* ═════════ 디자인 시안 3단계(D-025) — 다크 모드(시안 #174 토글) ═════════
   밝은 화면 = 위의 값 그대로(var(--x, 원래 색) 의 대체값). 다크 = html[data-theme="dark"] 에서만 토큰을 다시 정한다. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1522; --tert: #151d2c; --light: #1a2333; --border: #2a3446;
  --body: #c3cad6; --heading: #eef1f6; --mute: #8792a5;
  --primary: #5b8cf0; --primary-d: #4a7be6; --primary-sub: #1c2c4a; --primary-ink: #dbe6fb;
  --info: #5b8cf0; --info-d: #4a7be6; --info-sub: #1c2c4a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --tip-bg: #231f3d; --tip-ink: #b7aef5;
  --surface: #161e2d; --surface-2: #1a2332; --surface-3: #202a3b;
  --tint: #1b2a45; --tint-2: #233a63; --tint-3: #2c4a80;
  --ink-strong: #e2e6ee; --line: #2a3446;
  --warn-bg: #3a2a12; --warn-ink: #f3c27a;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--body); }
html[data-theme="dark"] .card { border-color: var(--line); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: var(--surface-2); color: var(--heading); border-color: var(--border); }
html[data-theme="dark"] .chip, html[data-theme="dark"] .tbtn { background: var(--surface-2); color: var(--body); border-color: var(--border); }
html[data-theme="dark"] .topbar { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .ltable th, html[data-theme="dark"] .ltable td { border-color: var(--border); }
html[data-theme="dark"] .ltable td { color: var(--body); }
html[data-theme="dark"] .pills.mtog { background: var(--surface-3); }
html[data-theme="dark"] .pills.mtog button.on { background: var(--surface); }
html[data-theme="dark"] .kpihead .kpidelta.up { background: #3b1f18; color: #ff9f80; }
html[data-theme="dark"] .kpihead .kpidelta.down { background: #1c2c4a; color: #8fb2f5; }
/* 표 진하기: 어두운 바탕에서도 단계가 보이게(4단계 흰 글자 대비 유지) */
html[data-theme="dark"] table tbody tr td[data-heat="1"], html[data-theme="dark"] .heatsw[data-heat="1"] { background: #1b2a45; }
html[data-theme="dark"] table tbody tr td[data-heat="2"], html[data-theme="dark"] .heatsw[data-heat="2"] { background: #233a63; }
html[data-theme="dark"] table tbody tr td[data-heat="3"], html[data-theme="dark"] .heatsw[data-heat="3"] { background: #2c4a80; color: #fff; }
html[data-theme="dark"] table tbody tr td[data-heat="4"], html[data-theme="dark"] .heatsw[data-heat="4"] { background: #2F6BE0; color: #fff; }
/* 그래프(C3): 글자·축·격자·말풍선 */
html[data-theme="dark"] .c3 text { fill: var(--body); }
html[data-theme="dark"] .c3 path.domain, html[data-theme="dark"] .c3 .tick line { stroke: #3a4559; }
html[data-theme="dark"] .chart-live .c3-grid line { stroke: #222c3d; }
html[data-theme="dark"] .c3-tooltip { background: var(--surface); color: var(--heading); }
html[data-theme="dark"] .c3-tooltip th { background: var(--surface-3); color: var(--heading); }
html[data-theme="dark"] .c3-tooltip td { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .chart-live .c3-target-baseline .c3-line { stroke: #9aa3b2 !important; }
/* 지도: 바다 = 카드색 · 나라 경계 = 바탕색 */
html[data-theme="dark"] .wmap-sphere { fill: var(--surface); stroke: var(--border); }
html[data-theme="dark"] .wmap-c { stroke: var(--bg); }
/* 채팅 */
html[data-theme="dark"] .chatmsg.assistant { background: var(--surface); border-color: var(--border); color: var(--heading); }
html[data-theme="dark"] .ccardtbl thead th { background: var(--surface-3); color: var(--heading); }
html[data-theme="dark"] .chatsheet { background: var(--surface); border-color: var(--border); }
/* 토글 버튼 표시 */
#themebtn[aria-pressed="true"] { color: var(--primary); }
/* 다크: 분석 그래프의 흰 halo·점 테두리·격자(id 선택자 규칙보다 우선) */
html[data-theme="dark"] #chart-monthly .c3-line, html[data-theme="dark"] #chart-mpairs .c3-line { filter: drop-shadow(0 0 1px #161e2d) drop-shadow(0 0 1px #161e2d); }
html[data-theme="dark"] #chart-monthly .c3-circle, html[data-theme="dark"] #chart-mpairs .c3-circle { stroke: #161e2d; }
html[data-theme="dark"] #chart-monthly .c3-grid line, html[data-theme="dark"] #chart-mpairs .c3-grid line,
html[data-theme="dark"] #chart-yearly .c3-grid line, html[data-theme="dark"] .c3-grid line { stroke: #222c3d; stroke-dasharray: none; }
html[data-theme="dark"] .c3-grid-lines .baseline-price line { stroke: #9aa3b2; }
html[data-theme="dark"] .c3-grid-lines .baseline-price text { fill: #9aa3b2; }
/* 화면 도우미 패널(좁은 폭)의 답변 카드 */
.assist .ccard { padding: 10px; }
.assist .ccardtbl { font-size: .74rem; }
.assist .ccardhead b { font-size: .85rem; }
/* 다크: 선택한 원산지 버튼(밝은 노랑 배경이 남아 글자가 안 보이던 것 · Codex P2 1.06:1) */
html[data-theme="dark"] .opill.on { background: #3a2f17; border-color: #ffb100; }
html[data-theme="dark"] .opill { background: var(--surface-2); }
/* 진하기는 선택한 줄(tr.on)의 옅은 배경보다 우선 — 흰 글자(4단계)가 옅은 배경 위에 남던 문제(실제 화면 확인 · 2026-11-11) */