/* 국가별 상세(/main/country-status) — 지구본 모달(country-status/lib)을 인라인 상세 패널로 재사용.
   country-status-modal.css 의 .home-country-modal 스타일을 로드하되, 팝업(fixed/center) 포지셔닝만 인라인으로 덮는다. */

.country-status-detail .home-country-modal,
.country-status-detail .home-country-modal.is-open {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  pointer-events: auto;
}

.country-status-detail .home-country-modal-dialog {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

/* 인라인이라 닫기 버튼은 불필요 */
.country-status-detail .home-country-modal-close {
  display: none;
}

.country-status-detail {
  margin-top: 8px;
}

.country-status-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.country-status-toolbar-label {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.country-status-toolbar .home-stage-controls {
  display: flex;
  align-items: center;
}

.country-status-toolbar .home-globe-filter-panel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
}

.country-status-toolbar .home-map-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.country-status-toolbar .home-map-filter-box {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.country-status-toolbar .home-map-filter-select {
  min-width: 86px;
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid #cfd7e6;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
}

.country-status-toolbar .home-map-filter-unit {
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

@media screen and (max-width: 800px) {
  .country-status-toolbar {
    justify-content: flex-start;
  }

  .country-status-detail .home-country-modal-dialog {
    padding: 16px;
  }
}

/* ── 하단 업종별 피해 현황 (사이트맵 개편 2026-07-13) ─────────────────────
   /main/status 탭2(industry scope) 를 이 페이지 아래로 옮겼다. status 모듈의 뷰를 그대로 재사용하므로
   그쪽이 자체로 그리는 "국가 선택 탭"이 딸려 오는데, 국가 선택은 위 상세(prev/next)가 소유한다
   → 중복 UI 를 감춘다(선택은 focusKey 로 주입된다). */
.country-industry-section {
  margin-top: 60px;
}
.country-industry-tab .status-country-tabs {
  display: none;
}
.country-industry-caption {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #4d4d4d;
}

/* ── 추이 그래프 2종 배치 (반응형 1단계) ─────────────────────────────────
   모달(공유 CSS)은 두 그래프를 가로로 나열 + 스택 전체 횡스크롤/스냅이지만,
   인라인 상세 페이지는 세로로 넉넉하므로 위아래 블록으로 쌓는다.
   대신 그래프가 찌그러지지 않도록 폭 하한 680px 을 유지하고,
   화면이 좁으면 각 그래프 패널 "안에서" 횡스크롤로 넘겨 본다. */
.country-status-detail .home-country-modal-chart-stack {
  display: block; /* 가로 flex 나열 해제 → 세로 블록 스택 */
  overflow-x: visible; /* 스택 전체 횡스크롤은 패널 내부 스크롤로 이관 */
  scroll-snap-type: none;
  padding-bottom: 0;
}

/* 각 패널은 컨테이너 폭을 그대로 쓴다(모달의 flex 고정폭·스냅 해제).
   height:100% 도 해제 — 모달(가로 flex)용 100% 가 세로 블록 스택에선 "스택 전체 높이"로 해석돼
   패널 하나가 스택을 다 차지하고 두 번째(상품별)가 dialog 밖으로 밀려 아래 전체 피해현황을 덮는다(실측 142px). */
.country-status-detail .home-country-modal-country-trend-panel,
.country-status-detail .home-country-modal-trend-panel {
  flex: none;
  width: 100%;
  min-width: 0;
  height: auto;
  scroll-snap-align: none;
}

/* 세로 스택이라 패널 사이 간격은 margin 으로 준다(모달 gap 대체). */
.country-status-detail
  .home-country-modal-chart-stack
  > .home-country-modal-trend-panel {
  margin-top: 14px;
}

/* 그래프 폭 하한은 캔버스가 아니라 내부 래퍼가 갖는다 —
   Chart.js 는 부모 박스 크기로 캔버스를 잡으므로, 캔버스에 min-width 를 직접 주면
   그려진 뒤 늘어나 블러/왜곡이 난다. */
.country-status-detail .home-country-modal-chart-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  /* 모달의 flex:1 1 auto 를 해제해 고정 높이(170/220px)를 지킨다 —
     grow 상태에서 래퍼 height:100% 가 미확정 높이를 참조해 Chart.js 캔버스가 무한 성장한다(실측 461px). */
  flex: 0 0 auto;
}

/* 1fr 트랙은 min 이 auto 라 차트 폭 하한(680px)의 min-content 가 트랙을 702px 로 키운다
   — 순위·차트가 통째로 dialog 밖으로 밀리는 원인(실측 400px). minmax(0,1fr)로 컨테이너 폭에 고정,
   680px 는 chart-wrap 내부 횡스크롤이 수용한다. */
.country-status-detail .home-country-modal-body {
  grid-template-columns: minmax(0, 1fr);
}

.country-status-detail .home-country-modal-chart-scroll-body {
  position: relative; /* Chart.js 캔버스의 크기 기준 부모 */
  width: 100%;
  min-width: 680px;
  height: 100%;
}

/* ── 데스크톱 2컬럼 복원 (순위 좌 · 그래프 2줄 우) ───────────────────────
   기본(위 규칙)은 좁은 폭용 세로 스택 — 순위 위 → 그래프 아래. 넓은 폭에서만
   2컬럼으로 되돌린다(모달이 2bc1de09 이전에 쓰던 minmax(190px,0.5fr) minmax(0,1.5fr) 비율).

   브레이크포인트 1100px 실측 근거(dev :3200, dialog 폭 = 컨테이너 폭):
     - body 폭 = vw - 121 (LNB 없는 구간). 그래프 컬럼 = (body - gap) * 0.75.
     - 그래프가 하한 680px 을 자력으로 채우는 교차점 = vw ≈ 1042px.
     - 1100px 채택(교차점 +58 여유): 그래프 724px(하한 +44) · 순위 241px(max-content 170 +71).
     - 1024/1050px 등 그 아래는 기존 세로 스택 유지.
   ※ 1201~1319px 구간은 LNB 가 붙어 컨테이너가 도로 좁아져(body 832~910) 그래프 컬럼이
     610~669px → chart-wrap 내부 횡스크롤이 수용한다(기존 동작). 1320px+ 부터 다시 무스크롤.

   그래프 컬럼은 반드시 minmax(0, ...) — 1fr(min=auto)이면 chart-scroll-body 의 680px
   min-content 가 트랙을 키워 dialog 밖으로 밀린다(99665722 회귀). */
@media screen and (min-width: 1100px) {
  .country-status-detail .home-country-modal-body {
    grid-template-columns: minmax(190px, 0.5fr) minmax(0, 1.5fr);
    /* stretch 면 순위 패널이 그래프 스택 높이까지 늘어나며 metrics 의 auto 행까지 함께
       늘어난다(행 간격 들쭉날쭉). 각 컬럼은 자기 높이대로 위에서 시작. */
    align-items: start;
  }
}