/* public/assets/style.css */
:root { --navy: #22201C; --navy2: #3A5A80; --ink: #22201C; --paper: #FFFDF8; --bg: #F7F4EC; --shade: #F1EDE1; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  color: var(--ink); background: var(--bg); word-break: keep-all; overflow-wrap: break-word; line-height: 1.6; }
header.site { background: var(--navy); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
header.site > a { color: #FFFDF8; text-decoration: none; font-weight: 800; font-size: 18px; }
header.site nav { display: flex; }
header.site nav a { color: #FFFDF8; text-decoration: none; font-size: 13px; margin-left: 16px; opacity: 0.85; }
header.site nav a:hover { opacity: 1; text-decoration: underline; }
/* 헤더 정비 — 현재 페이지 네비 링크(active, aria-current="page")는 밑줄 + 완전 불투명으로 강조. */
header.site nav a.active { opacity: 1; text-decoration: underline; font-weight: 700; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 26px; } h1 small { font-size: 14px; color: var(--navy2); font-weight: 400; }
h2 { font-size: 19px; border-left: 5px solid var(--navy); padding-left: 10px; margin-top: 40px; }
h2 small { font-size: 12px; color: #6E6754; font-weight: 400; }
section, .card { background: var(--paper); border-top: 3px solid var(--navy); padding: 16px; margin-top: 16px; }
table { border-collapse: collapse; width: 100%; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
th { background: #EFEBDD; color: var(--navy); padding: 8px; font-size: 13px; }
td { padding: 8px; border-top: 1px solid #D8D2C4; font-size: 14px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta, .note, .sources { color: #57503F; font-size: 13px; }
.caveat { background: var(--shade); border-left: 5px solid var(--navy); padding: 10px 12px; font-size: 13px; margin: 12px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card a:not(.btn-primary):not(.btn-ghost) { color: var(--navy); text-decoration: none; font-weight: 700; }
.card .cat { font-size: 12px; color: #6E6754; }
#search { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid #B9B19E; margin: 16px 0; }
svg { max-width: 100%; height: auto; }

/* UX 1차 개편 항목1 — 섹션 점프 탭(#section-jump) + 전역 필터 바(#global-filters, 연도·수출입)를
   한 sticky 영역(#sticky-filters)으로 묶는다. 점프 탭은 hidden 속성이 없어 JS 없이도 항상 보이고,
   전역 필터는 기존대로 page.js가 hidden을 벗겨야 나타난다 — 두 요소가 같은 sticky 컨테이너 안에
   있으므로 필터 등장 전후로 점프 탭 위치가 어긋나지 않는다. */
#sticky-filters { position: sticky; top: 0; z-index: 10; background: var(--paper); }

/* 항목1 — 섹션 점프 탭. 모바일에서 7개 탭이 한 줄에 다 안 들어가면 가로 스크롤 칩으로 (항목11). */
#section-jump { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid #D8D2C4; }
#section-jump a { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--navy2); text-decoration: none;
  background: var(--shade); border: 1px solid #D8D2C4; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
#section-jump a:hover { border-color: var(--navy2); background: #F1EDE1; }

/* 전역 필터 바(연도·수출입) — 페이지 전체 그래프를 한 번에 갱신. */
#global-filters { display: flex; align-items: center; gap: 12px;
  background: var(--paper); border-bottom: 2px solid var(--navy); padding: 10px 12px; margin: 0 0 12px; }
/* UX 2b QA — 모바일 CLS 회귀(0.063→0.086) 수정. 기존 display:none은 JS 로드 전 박스 높이를
   0으로 만들어, page.js가 hidden을 벗기는 순간 아래 #summary가 밀려 내려가는 레이아웃 시프트를
   유발했다(Lighthouse 실측 유일 시프트 = div#summary). display는 그대로 유지해 박스 높이를
   미리 예약하고 visibility로만 감춘다 — hidden 제거 시(page.js) 같은 자리에서 보이기만 하면
   되므로 시프트가 없다. visibility:hidden은 display:none과 마찬가지로 접근성 트리에서 제외되고
   포커스·클릭도 받지 않아 "JS 로드 전 숨김" 의도를 그대로 유지한다. 모바일 2행 높이(@media
   680px, flex-wrap:wrap)도 동일 규칙(#global-filters 자체)이 그대로 적용돼 별도 지정이 필요
   없다. JS 미로드 환경에서는 빈 공간이 남는 트레이드오프를 허용한다(콘텐츠 자체는 온전). */
#global-filters[hidden] { display: flex; visibility: hidden; }
#global-filters select { padding: 6px 10px; border: 1px solid #B9B19E; border-radius: 4px; font-size: 13px;
  color: var(--ink); background: #FFFDF8; font-family: inherit; }
#global-filters .seg { display: inline-flex; border: 1px solid var(--navy); border-radius: 4px; overflow: hidden; }
#global-filters .seg button { border: none; background: #FFFDF8; color: var(--navy); padding: 6px 14px;
  font-size: 13px; font-family: inherit; cursor: pointer; }
#global-filters .seg button + button { border-left: 1px solid var(--navy); }
#global-filters .seg button.on { background: var(--navy); color: #FFFDF8; }
#global-filters .note { color: #A63A2B; font-size: 12px; }

/* 핵심 수치 — 편집디자인 격상(2026-07-20): 개별 카드(상단 굵은 테두리)를 폐지하고 상·하 먹 괘선으로
   묶은 '수치 띠(元帳 합계란)'로 조판. 항목 사이는 세로 실선, 라벨은 원장 컬럼 헤더식 마이크로 모노,
   수치는 큰 먹(tabular). 대시보드 카드 인상을 걷어내고 인쇄 재무표에 가깝게 만든다. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 0; margin: 22px 0 10px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.tile { background: transparent; border: 0; border-left: 1px solid var(--line); padding: 15px 20px 16px; }
.tile:first-child { border-left: 0; }
.tile-label { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 10.5px; letter-spacing: .03em; color: var(--ink2); line-height: 1.5; }
.tile-value { font-size: 32px; font-weight: 800; color: var(--ink); margin: 8px 0 3px; letter-spacing: -0.018em; line-height: 1.04; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
/* 좁은 화면 — 2열 배치 시 각 행 첫 칸의 세로선 제거 + 둘째 행부터 가로 괘선으로 구분 */
@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(odd) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* 동위원소 세부 분리(12→16) — 개요 품목의 "세부 품목 보기"는 값 띠가 아니라 이동 카드(<a class="tile">).
   띠 조판에서 분리해 카드로 되살린다(종이 시트 + 갈먹 좌측 강조바 + 호버). */
a.tile { display: block; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--ink); padding: 14px 16px; transition: background 0.15s ease; }
a.tile:first-child { border-left: 3px solid var(--ink); }
a.tile:hover { background: var(--shade); }
a.tile .tile-value { color: var(--navy2); font-size: 17px; }
#isotope-detail-links .tiles { border: 0; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 홈 통합 생키(품목 카테고리 그룹 → 국가) — 호버 강조는 home_sankey.js가 .hl/.dim 클래스를 부여 */
.sankey-ribbon { transition: opacity 0.15s ease; }
.sankey-node { cursor: pointer; }
.sankey-ribbon.hl, .sankey-node.hl { opacity: 0.85; }
.sankey-ribbon.dim { opacity: 0.08; }
.home-sankey-tip { position: fixed; z-index: 50; background: var(--navy); color: #FFFDF8; font-size: 12px;
  padding: 4px 8px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.home-sankey-tip[hidden] { display: none; }

/* UX 개편 2b — 항목4: 생키는 데스크톱 한정 유지, 모바일은 안내문 + 아래 품목 표로 대체(전환 규칙
   자체는 파일 하단의 공용 @media (max-width: 680px) 블록에 있다 — 미디어쿼리를 하나로 유지). */
.mobile-only-note { display: none; }

/* UX 개편 2b — 항목4: 홈 품목 일람 표 — 수출액 인라인 미니바 + 클릭 정렬 헤더(home_table.js). */
.mini-bar { display: inline-block; width: 70px; height: 8px; background: var(--shade); border-radius: 2px;
  vertical-align: middle; margin-right: 6px; overflow: hidden; }
.mini-bar-fill { display: block; height: 100%; background: var(--navy2); }
.mini-bar-value { font-variant-numeric: tabular-nums; }
#products-table th[data-sort] { cursor: pointer; user-select: none; }
#products-table th[data-sort]:hover { background: #F1EDE1; }
#products-table th.sort-active { color: var(--navy); }
#products-table th.sort-active::after { content: ' \25BE'; font-size: 10px; }

/* HSK 표 — 현재 전역 필터(수입/수출)와 같은 방향의 금액 컬럼 강조 */
td.hsk-hi { color: var(--navy); font-weight: 700; }

/* UX 개편 2a — HSK 세부 코드가 1~2건뿐인 품목은 표 대신 1줄 압축 카드로 보여준다. */
.hsk-compact { background: var(--shade); border-left: 5px solid var(--navy); padding: 10px 12px; font-size: 14px; }

/* UX 개편 2a — S5(세계 수요와 성장) 세계 지도. 접힘이 기본값(details 기본 상태)이라 팝인 CLS가
   없다. 지도 SVG 자체는 별도 자산(public/assets/maps/*.svg)에서 지연 로드된다(page.js). */
details#world-map { margin: 12px 0 16px; border-top: 1px solid #D8D2C4; padding-top: 12px; }
details#world-map summary { cursor: pointer; color: var(--navy2); font-weight: 700; font-size: 14px; }
details#world-map[open] summary { margin-bottom: 8px; }

/* 항목1 — 자동 인사이트 문장 블록. 히어로 스탯 바로 아래, 페이지 첫 산문 텍스트가 되도록 눈에 띄게
   (박스가 아니라 좌측 강조선 + 살짝 큰 본문 — caveat류 경고색과 구분). */
.insight { border-left: 5px solid var(--navy); padding: 4px 0 4px 14px; margin: 16px 0; }
.insight p { margin: 6px 0; font-size: 15px; line-height: 1.7; }
.insight p:first-child { font-weight: 700; }

/* 항목2 — 히어로 요약 스탯(hero-stats)·항목3 — 성장 시장 콜아웃(growth-callouts). 홈 총괄 타일과
   동일 .tiles/.tile 스타일 재사용 — 별도 색상 규칙 없이 카드 개수만 다르다. */
.tiles.growth-callouts { margin: 0 0 16px; }
/* 항목13 — 히어로 타일 블록 높이 예약(CLS 방지). 타일 1행(라벨+값+보조문구+상하 패딩) 기준 최소
   높이를 미리 확보해, 폰트 로딩 등으로 내용 높이가 바뀌어도 레이아웃이 밀리지 않게 한다. */
.tiles.hero-stats { min-height: 100px; }

/* 항목3 — 소규모 신흥시장(참고, 문턱 미만 급성장국) 접이식 보조 표. 기본은 접힌 상태(브라우저 기본)로
   본표를 가리지 않고, 열면 "기저효과 주의" 안내와 함께 표시된다. */
details.minor-markets { margin-top: 16px; border-top: 1px solid #D8D2C4; padding-top: 12px; }
details.minor-markets summary { cursor: pointer; color: var(--navy2); font-weight: 700; font-size: 14px; }
details.minor-markets .note { margin: 8px 0; }

/* UX 개편 2b — 항목2: 데이터 충족도 게이트 배너("집계 진행 중"). 기존 문장 캐베트(.insight 안 텍스트)와
   별개인 시각 요소 — 문제·미흡 상태색(#A63A2B)을 절제해 사용한다(사이트 전역 색 규칙과 동일). */
.data-gate-banner { background: #F5E9E4; border-left: 5px solid #A63A2B; padding: 10px 12px; font-size: 13px; margin: 12px 0; }
.data-gate-banner strong { color: #A63A2B; }

/* UX 개편 2b — 항목3: 모바일 차트 변형. desktop(720)·mobile(360) SVG를 둘 다 SSR해두고 이 전환
   규칙(파일 하단 공용 @media (max-width: 680px) 블록)으로 표시만 바꾼다(재계산 없음). 대상: S5 순위
   바차트·S6 추이 라인차트·시장 패널 multiLine. */
.chart-mobile { display: none; }

/* 경쟁력 도약 Wave 2 — 항목1: CSV 다운로드 링크 + 차트 PNG 저장 버튼 */
.csv-link { font-size: 11px; font-weight: 400; color: var(--navy2); margin-left: 8px; text-decoration: none;
  border: 1px solid var(--navy2); border-radius: 3px; padding: 1px 6px; vertical-align: middle; }
.csv-link:hover { background: var(--shade); }
.downloads-row { font-size: 13px; }
/* 항목15(a11y) — 홈 CSV 다운로드 링크가 24px 미만 탭 타깃이었다(텍스트 높이만큼만 클릭 영역).
   inline-block + 수직 패딩으로 최소 탭 타깃 크기를 확보한다. */
.downloads-row a { color: var(--navy2); display: inline-block; padding: 4px 2px; }
.chart-wrap { position: relative; }
/* 항목12 — 표 가로 스크롤 래퍼(좁은 화면에서 표만 스크롤, 페이지 전체가 옆으로 밀리지 않게). */
.table-wrap { overflow-x: auto; }
.chart-download { position: absolute; top: 4px; right: 4px; font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--navy2); background: #FFFDF8; color: var(--navy2); border-radius: 4px;
  cursor: pointer; font-family: inherit; }
.chart-download:hover { background: var(--shade); }

/* 항목3-5: 인사이트 문장 안의 국가명·품목명 강조(남색 볼드). 항목15(a11y) — 링크(품목명)는 색만으로
   구분되지 않도록 밑줄을 기본으로 둔다(국가명은 <strong>이라 링크가 아님 — 그대로 밑줄 없음). */
.hl-name { color: var(--navy); }
a.hl-name { text-decoration: underline; }

/* US Census Wave B — ⑦ 미국 수입 시장: 월별 고정 섹션 배지(전역 연도·수출입 필터 비적용 안내) */
.badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--navy2);
  border: 1px solid var(--navy2); border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }

/* ⑦ 다중 시리즈 라인차트(multiLineChartSVG) — 끝점 라벨·범례는 svg 내부에 이미 색상이 있어 별도 스타일 불필요 */

/* 다국가 시장 모듈 Wave D — ⑦ 주요 시장 경쟁: 6시장 요약 카드 그리드 + 드릴다운 패널 */
.market-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.market-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--paper); border: 1px solid #D8D2C4; border-top: 3px solid #B9B19E; border-radius: 4px;
  padding: 12px; text-align: left; cursor: pointer; font-family: inherit; width: 100%; }
.market-card:hover { border-color: var(--navy2); }
.market-card.active { border-top-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.market-card-flag { line-height: 1; display: inline-flex; }
/* 국기 인라인 SVG — Windows 이모지 폴백('US' 문자) 회피. 종이 위 얇은 괘선 테두리로 또렷하게. */
.flag { display: inline-block; width: 21px; height: 14px; border: 1px solid rgba(34,32,28,0.22); vertical-align: -2px; flex: none; }
.market-panel h3 .flag { width: 24px; height: 16px; vertical-align: -2px; margin-right: 3px; }
.market-card-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.market-card-share { font-size: 22px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; margin-top: 2px; }
.market-card-rank { font-size: 12px; color: #6E6754; }
.market-card-noresult { font-size: 13px; color: #6E6754; margin-top: 6px; }
.market-card-spark { display: block; width: 100%; margin-top: 4px; }
/* 항목15(a11y) — #6E6754는 10px 텍스트 기준 명도대비가 WCAG AA(4.5:1) 미달(약 3.55:1). navy2로 교체. */
.market-card-badge { font-size: 10px; color: var(--navy2); margin-top: 4px; }
#market-panels { margin-top: 16px; }
.market-panel { border-top: 1px solid #D8D2C4; padding-top: 12px; margin-top: 12px; }
.market-panel[hidden] { display: none; }
.market-panel h3 { font-size: 16px; margin: 0 0 8px; }
.market-panel h4 { font-size: 14px; margin: 20px 0 8px; }

@media print { section { border: none; } body { background: #FFFDF8; print-color-adjust: exact; }
  .chart-download, .csv-link, .downloads-row { display: none; } }

/* UX 1차 개편 항목11 — 모바일 응급(감사 실측: 390px 뷰포트에서 scrollWidth 447px, 즉 좁은 화면을
   페이지 전체가 가로로 넘겼다). 전역 필터·타일·표·섹션 제목을 좁은 화면에 맞게 재배치한다. */
@media (max-width: 680px) {
  main { padding: 16px 12px 48px; }
  /* 헤더 정비 — [홈] 링크 추가로 nav가 4칸(로고+3링크)이 됐다. 좁은 화면에서 넘치지 않도록
     줄바꿈을 허용하고 링크 간격을 좁힌다(기존 #global-filters 모바일 응급 처치와 동일한 방식). */
  header.site { flex-wrap: wrap; row-gap: 6px; }
  header.site nav a { margin-left: 12px; }
  #global-filters { flex-wrap: wrap; row-gap: 8px; }
  #global-filters select, #global-filters .seg button { font-size: 16px; }   /* iOS 포커스 확대 방지 */
  .tiles { grid-template-columns: repeat(2, 1fr); }
  h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
  h2 small, h2 .csv-link { flex: 1 0 100%; margin-left: 0; }
  #section-jump { -webkit-overflow-scrolling: touch; }
  /* UX 개편 2b 항목3 — 모바일 차트 변형(desktop↔mobile 전환). */
  .chart-desktop { display: none; }
  .chart-mobile { display: block; }
  /* UX 개편 2b 항목4 — 생키는 데스크톱 한정, 모바일은 안내문 + 아래 품목 표로 대체. */
  .sankey-desktop-only { display: none; }
  .mobile-only-note { display: block; }
}

/* 카테고리 그룹 머리행·HS코드 병기(2026-07-20) */
#products-table .cat-row th { background: #EFEBDD; color: #22201C; font-weight: 800; text-align: left; border-top: 2px solid #22201C; border-bottom: 1px solid #22201C; font-size: 13px; padding: 9px 11px; letter-spacing: .01em; }
#products-table .cat-row .cat-sub { font-weight: 400; color: #57503F; font-size: 11.5px; margin-left: 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
#products-table .hs-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; color: #6E6754; white-space: nowrap; }

/* 품목 세부 색인어(2026-07-20) — 관세청 HSK 공식 품목명 기반 */
#products-table .prod-desc { font-size: 11.5px; color: #57503F; line-height: 1.5; margin-top: 3px; max-width: 360px; }
.prod-about { border: 1px solid #D8D2C4; border-left: 3px solid #22201C; background: #FFFDF8; padding: 14px 16px; margin: 14px 0 18px; }
.prod-about-h { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; letter-spacing: .08em; color: #57503F; font-weight: 700; margin-bottom: 6px; }
.prod-about-desc { font-size: 14.5px; color: #22201C; line-height: 1.7; margin: 0 0 10px; font-weight: 600; }
.prod-about-terms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pat-label { font-size: 11px; color: #6E6754; margin-right: 4px; }
.pat-chip { font-size: 12px; color: #22201C; background: #F1EDE1; border: 1px solid #D8D2C4; padding: 3px 9px; white-space: nowrap; }
.prod-about-en { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; color: #6E6754; margin: 0; }

/* §1 각주 — 마침표·가운뎃점으로 뭉치지 않게 항목별 라벨+줄 분리(2026-07-20) */
.fn-notes { list-style: none; padding: 10px 14px; margin: 14px 0 8px; border: 1px solid #D8D2C4; border-left: 3px solid #22201C; background: #FFFDF8; }
.fn-notes li { font-size: 12px; color: #57503F; line-height: 1.7; padding: 2px 0; display: flex; gap: 10px; }
.fn-notes li + li { border-top: 1px solid #EFEBDD; }
.fn-notes li b { flex: 0 0 84px; color: #22201C; font-weight: 700; font-size: 11px; letter-spacing: .01em; }
.fn-tail { font-size: 11.5px; color: #6E6754; line-height: 1.7; margin: 0 0 4px; }
.fn-tail a { color: #3A5A80; }
@media (max-width: 560px) { .fn-notes li { flex-direction: column; gap: 1px; } .fn-notes li b { flex-basis: auto; } }

/* 사용 안내 목록 — 여러 조작 설명이 한 문장으로 붙지 않게 항목화(2026-07-20) */
.hint-list { list-style: none; padding: 0; margin: 4px 0 0; }
.hint-list li { position: relative; font-size: 12px; color: #57503F; line-height: 1.65; padding: 1px 0 1px 14px; }
.hint-list li::before { content: "·"; position: absolute; left: 3px; color: #A63A2B; font-weight: 700; }