/* 포털 메인(/main) 전용 — PSD 시안(docs/psd/mian.png, 1920×2130) 기준. 접두 mh- 로 격리. */

.mh-home {
  /* 헤더가 absolute(140px, common.css) 라 흐름을 차지하지 않는다 — 그만큼 본문을 내린다. */
  padding-top: 140px;
  padding-bottom: 100px;
  background: #fff;
}

@media screen and (max-width: 1200px) {
  .mh-home {
    padding-top: 75px; /* common.css 1200px 이하 헤더 높이 */
  }
}

/* ── 위험 등급 공통 색 ─────────────────────────────────────────────── */
.mh-home {
  --mh-high: #ee3636;
  --mh-caution: #eea300;
  --mh-low: #0ea833;
  --mh-safe: #187dea;
  --mh-none: #9ca3af;
  --mh-navy: #414e84;
}

.mh-dot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mh-none);
  flex: 0 0 auto;
}
.is-high > .mh-dot,
.mh-dot.is-high { background: var(--mh-high); }
.is-caution > .mh-dot,
.mh-dot.is-caution { background: var(--mh-caution); }
.is-low > .mh-dot,
.mh-dot.is-low { background: var(--mh-low); }
.is-safe > .mh-dot,
.mh-dot.is-safe { background: var(--mh-safe); }


/* ── 히어로 ───────────────────────────────────────────────────────── */
.mh-hero {
  position: relative;
  width: min(1862px, calc(100% - 58px));
  margin: 12px auto 0;
}

/* 지도 블록 — 배경 합성 이미지. 라벨은 이 박스 기준 % 좌표. */
.mh-hero-map {
  position: relative;
  aspect-ratio: 1862 / 789;
  background: url("../images/front/main/home/hero-bg.png") center / 100% 100% no-repeat;
  border-radius: 24px;
}

/* 라벨 — 기본은 어두운 배경, 선택된 국가만 흰색(사용자 피드백 2026-07-21). */
.mh-hero-label {
  position: absolute;
  left: var(--pill-x);
  top: var(--pill-y);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: clamp(34px, 2.6vw, 50px);
  padding: 0 clamp(12px, 1vw, 18px);
  border: 0;
  border-radius: 999px;
  background: rgba(24, 32, 74, 0.82);
  box-shadow: 0 4px 14px rgba(13, 24, 66, 0.25);
  font-size: clamp(12px, 0.83vw, 16px);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  /* left/top 은 점(dot) "중심" 앵커 — 필 내부 점이 그 지점에 오도록 당긴다. */
  transform: translate(
      calc(-1 * (clamp(12px, 1vw, 18px) + clamp(14px, 1.15vw, 22px) / 2)),
      -50%
    );
}
.mh-hero-label .mh-dot {
  width: clamp(14px, 1.15vw, 22px);
  height: clamp(14px, 1.15vw, 22px);
}
.mh-hero-label.is-active {
  background: #fff;
  color: #212121;
}

.mh-hero-copy {
  position: absolute;
  left: 54.1%;
  top: 16.9%;
  width: 36%;
  z-index: 2;
}

.mh-hero-panel {
  position: absolute;
  left: 54.1%;
  top: 42%; /* 카드 상단 — 카피 아래 대시보드 제목(mh-hero-sub)이 들어갈 공간만큼 내림 */
  width: 36%;
  z-index: 2;
}

.mh-hero-title {
  font-size: clamp(30px, 2.8vw, 54px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.mh-hero-desc {
  margin-top: clamp(10px, 1.2vw, 22px);
  font-size: clamp(12px, 0.79vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* 대시보드 섹션 제목 — 아래 지도·국가 카드 영역의 헤딩 역할(title 보다 한 단계 아래). */
.mh-hero-sub {
  margin-top: clamp(14px, 1.5vw, 28px);
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
}

.mh-hero-card {
  display: block;
  padding: clamp(14px, 1.4vw, 26px) clamp(16px, 1.7vw, 32px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(13, 24, 66, 0.3);
  text-decoration: none;
}

.mh-hero-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: clamp(8px, 1vw, 18px);
  border-bottom: 1px solid #e8e8ee;
}
.mh-hero-card-head .mh-dot {
  width: clamp(14px, 1.15vw, 22px);
  height: clamp(14px, 1.15vw, 22px);
}

.mh-hero-card-name {
  font-size: clamp(15px, 1.1vw, 21px);
  font-weight: 700;
  color: #212121;
}

.mh-legend {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 17px);
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.mh-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(10px, 0.63vw, 12px);
  color: #555;
  white-space: nowrap;
}
.mh-legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mh-none);
}
.mh-legend-item.is-high::before { background: var(--mh-high); }
.mh-legend-item.is-caution::before { background: var(--mh-caution); }
.mh-legend-item.is-low::before { background: var(--mh-low); }
.mh-legend-item.is-safe::before { background: var(--mh-safe); }

.mh-hero-card-body {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 34px);
  padding-top: clamp(12px, 1.5vw, 28px);
}

.mh-hero-card-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 5.9vw, 114px);
  height: clamp(64px, 5.9vw, 114px);
  border-radius: 50%;
  background: #eef0f6;
  flex: 0 0 auto;
}
.mh-hero-card-flag img {
  width: 61%;
  height: 61%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
/* 상징(별·초승달)이 게양쪽(왼쪽)에 몰린 국기는 원형 크롭 시 중앙에 오도록 왼쪽 정렬. */
.mh-hero-card-flag img[data-flag="cn"],
.mh-hero-card-flag img[data-flag="tr"],
.mh-hero-card-flag img[data-flag="sg"],
.mh-hero-card-flag img[data-flag="my"] {
  object-position: left center;
}

.mh-hero-card-alerts {
  display: grid;
  /* 마스터 10종 → 5행 2열, 열 우선(좌열 1~5 / 우열 6~10). */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: clamp(6px, 0.6vw, 12px) clamp(8px, 0.8vw, 16px);
  flex: 1 1 auto;
  list-style: none;
  padding: 0;
  min-width: 0;
}

.mh-hero-card-empty,
.mh-grid-card-empty {
  font-size: 14px;
  color: #888;
  padding: 14px 0;
}

.mh-hero-note {
  margin-top: clamp(10px, 1.3vw, 24px);
  font-size: clamp(11px, 0.73vw, 14px);
  color: rgba(255, 255, 255, 0.75);
}

/* ── 분류 행(히어로 카드·그리드 카드 공용) ────────────────────────── */
.mh-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* grid/flex 자동 최소 크기(min-content) 해제.
     이게 없으면 히어로 카드의 2열 트랙이 행의 min-content(패딩+배지+이름 전체 폭)만큼 버텨
     카드보다 넓어진다 — 실측: 1201px 에서 카드 body 밖으로 11px, 320px 에서 문서 가로 넘침.
     0 으로 풀면 트랙이 1fr 몫으로 줄고 이름만 ellipsis 로 축약된다. */
  min-width: 0;
  min-height: clamp(30px, 2.2vw, 42px);
  padding: 0 6px 0 clamp(10px, 1vw, 18px);
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  background: #fff;
}
.mh-cat-name {
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(48px, 3.4vw, 66px);
  height: clamp(22px, 1.6vw, 30px);
  padding: 0 10px;
  border-radius: 999px;
  font-size: clamp(10px, 0.63vw, 12px);
  font-weight: 700;
  color: #fff;
  background: var(--mh-none);
  flex: 0 0 auto;
}
.mh-badge.is-high { background: var(--mh-high); }
.mh-badge.is-caution { background: var(--mh-caution); }
.mh-badge.is-low { background: var(--mh-low); }
.mh-badge.is-safe { background: var(--mh-safe); }

/* ── 2카드 배너 ───────────────────────────────────────────────────── */
.mh-quick {
  display: flex;
  gap: 40px;
  width: min(1502px, calc(100% - 58px));
  margin: 72px auto 0;
}

.mh-quick-card {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-height: 164px;
  padding: 24px 44px;
  border-radius: 999px;
  background: #f5f5f5;
  text-decoration: none;
}

.mh-quick-icon {
  width: 61px;
  height: auto;
  margin-right: 46px;
  flex: 0 0 auto;
}

.mh-quick-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.mh-quick-title {
  font-size: 22px;
  font-weight: 700;
  color: #212121;
}
.mh-quick-desc {
  font-size: 15px;
  color: #666;
}

.mh-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 22px 30px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  font-weight: 700;
  color: #212121;
  white-space: nowrap;
  flex: 0 0 auto;
}
.mh-quick-btn svg {
  width: 16px;
  height: 16px;
}

/* ── 국가별 상품 위험도 그리드 ────────────────────────────────────── */
.mh-grid-section {
  width: min(1502px, calc(100% - 58px));
  margin: 96px auto 0;
}

.mh-grid-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.mh-grid-title {
  font-size: 29px;
  font-weight: 800;
  color: #212121;
}

.mh-grid-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #dcdfe5;
  border-radius: 50%;
  background: #fff;
  color: #2f6fe4;
  cursor: pointer;
}
.mh-grid-control svg {
  width: 20px;
  height: 20px;
}
.mh-grid-control:disabled {
  opacity: 0.35;
  cursor: default;
}

.mh-grid-more {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  color: #555;
  text-decoration: none;
}
.mh-grid-more svg {
  width: 15px;
  height: 15px;
}

.mh-grid-viewport {
  margin-top: 34px;
  padding: 32px;
  border: 1px solid #eceef2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 32, 63, 0.06);
  overflow: hidden;
}

.mh-grid-track {
  display: flex;
  /* gap 고정 px — 카드 실측(JS)과 flex-basis 계산 기준을 일치시켜 슬라이드 오차 제거.
     gap은 viewport padding(32px)보다 커야 한다 — overflow 클리핑이 padding 끝에서 일어나
     gap < padding 이면 옆 카드가 (padding−gap)px 만큼 좌우에 삐져나와 보인다. */
  gap: 36px;
  transition: transform 0.35s ease;
  will-change: transform;
}

.mh-grid-card {
  flex: 0 0 calc((100% - 3 * 36px) / 4);
  min-width: 0;
  text-decoration: none;
}
.mh-grid-card.is-nodata {
  opacity: 0.55;
}

.mh-grid-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.mh-grid-card-head img {
  width: 44px;
  height: 31px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.mh-grid-card-head strong {
  font-size: 19px;
  font-weight: 700;
  color: #212121;
}

.mh-grid-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
}

/* ── 축소 화면 대응(시안은 데스크톱 1920 기준 — 최소한의 우아한 축소만) ── */
@media (max-width: 1200px) {
  /* 히어로 세로 스택: 카피 → 지도 → 카드 (오버레이 해제, 겹침 없음) */
  .mh-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mh-hero-copy,
  .mh-hero-panel {
    position: static;
    width: 100%;
  }
  .mh-hero-title {
    color: #212121;
  }
  .mh-hero-desc {
    color: #555;
    font-size: 14px;
  }
  .mh-hero-sub {
    color: #212121;
    font-size: 17px;
  }
  .mh-hero-card {
    border: 1px solid #e8e8ee;
    box-shadow: 0 6px 18px rgba(23, 32, 63, 0.08);
  }
  .mh-hero-note {
    color: #777;
  }

  /* 국가 라벨 → 점 마커만(국가명·흰 배경 제거). 선택된 국가는 흰 링으로 표시. */
  .mh-hero-label {
    left: var(--marker-x); /* 지리 앵커(영토 위) — 필 앵커와 별도 */
    top: var(--marker-y);
    height: auto;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    transform: translate(-50%, -50%); /* 점 마커를 앵커 정중앙에 */
  }
  .mh-hero-label .mh-dot {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
  }
  .mh-hero-label.is-active {
    background: transparent;
  }
  .mh-hero-label.is-active .mh-dot {
    box-shadow: 0 0 0 3px #fff;
  }

  .mh-quick {
    flex-direction: column;
    gap: 20px;
  }
  .mh-quick-card {
    min-height: 120px;
    padding: 20px 28px;
  }
  .mh-quick-icon { margin-right: 24px; }
}

@media (max-width: 1024px) {
  .mh-grid-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* 1국가씩 스냅 넘김 */
  }
  .mh-grid-track {
    width: max-content;
    gap: 20px;
    margin-left: 0 !important;
    transform: none !important; /* 모바일은 네이티브 스크롤 — JS translateX(데스크탑 슬라이더) 무효화 */
  }
  .mh-grid-card {
    /* 모바일·태블릿은 화면 폭과 무관하게 카드 폭을 고정한다.
       vw 기반 폭은 화면별로 카드와 배지 행의 비율을 바꿔 레이아웃이 흔들렸으므로,
       넘치는 카드는 viewport의 가로 스크롤과 scroll-snap으로 탐색한다. */
    flex: 0 0 200px;
    scroll-snap-align: start;
  }
  .mh-grid-control {
    display: none;
  }

  /* 카드가 뷰포트를 거의 채우는 구간이라 행이 카드 박스에 꽉 차 보인다 —
     행 높이·좌우 패딩·이름 폰트·배지를 줄여 행 사이 여백(gap 10px)이 살아나게 한다.
     .mh-cat-row/.mh-cat-name/.mh-badge 는 히어로 카드와 공용이므로 그리드 카드 스코프로만 한정. */
  .mh-grid-card .mh-cat-row {
    min-height: 26px;
    padding: 0 5px 0 12px;
  }
  .mh-grid-card .mh-cat-name {
    font-size: 11px;
  }
  .mh-grid-card .mh-badge {
    min-width: 44px;
    height: 19px;
    padding: 0 8px;
    font-size: 10px;
  }
}

/* 히어로 카드 2열 배지 밴드(1201~1360px) — 오버레이 레이아웃 복귀(≥1201) 직후 구간은
   카드 폭(hero 36%)이 아직 좁아 행의 이름 칸이 최장 라벨("건축·인테리어" 67px)을 못 담고 ellipsis 된다
   (실측 이름 가용폭: 1201px=51 / 1270px=58 / 1340px=66 → 1361px 부터 67 확보되어 자연 해소).
   그 밴드에서만 배지 min-width·좌우 패딩·행 패딩/gap 을 소폭 줄여 이름 칸을 +17px 확보한다.
   히어로 카드로 스코프 한정 — 그리드 카드(4-up)는 이 폭대에서 이미 여유가 있다. */
@media (min-width: 1201px) and (max-width: 1360px) {
  .mh-hero-card .mh-cat-row {
    gap: 6px;
    padding: 0 5px 0 8px;
  }
  .mh-hero-card .mh-badge {
    min-width: 38px;
    padding: 0 8px;
  }
}

/* 좁은 화면 깨짐 방지 — 히어로 카드 2열 배지를 1열로, 배지·플래그를 소형화. */
@media (max-width: 640px) {
  .mh-hero-card-body {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .mh-hero-card-flag {
    align-self: center;
  }
  .mh-hero-card-alerts {
    grid-template-columns: 1fr; /* 2열 → 1열 */
    /* 열 우선 배치(auto-flow: column + 5행 고정)를 함께 풀어야 실제로 1열이 된다.
       안 풀면 6번째부터 암시 열(implicit column)이 생겨 2열이 그대로 남는다(실측: 320px 에서 2열). */
    grid-template-rows: auto;
    grid-auto-flow: row; /* DOM 순서(심각도순) 그대로 세로 나열 */
  }
  .mh-legend {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .mh-badge {
    min-width: 52px;
  }
  /* 제목(중앙)과 더보기(absolute right)가 좁은 폭에서 겹치지 않게 축소. */
  .mh-grid-title {
    font-size: 20px;
  }
  .mh-grid-more {
    font-size: 13px;
  }
  .mh-quick-card {
    border-radius: 20px;
    padding: 18px 22px;
  }
  .mh-quick-btn {
    /* 모바일: 우측 알약 버튼 제거 — 카드 전체가 링크(버튼)다. 화살표만 남겨 탭 어포던스 유지. */
    margin-left: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0; /* '신청하기'/'바로가기' 라벨 숨김 */
  }
  .mh-quick-btn svg {
    width: 20px;
    height: 20px;
    color: #212121;
  }
}

/* 초협폭(≤480) — quick 카드는 아이콘+제목만 남긴다.
   이 아래로는 카드 폭이 아이콘+제목+설명+화살표를 못 담아 제목이 2~3줄로 접히고
   설명이 카드 밖으로 밀려난다(실측 360px: 제목 52px 2줄·설명 54px 3줄). */
@media (max-width: 480px) {
  .mh-quick-desc,
  .mh-quick-btn {
    display: none;
  }
  .mh-quick-card {
    min-height: 84px;
    padding: 16px 18px;
  }
  .mh-quick-icon {
    width: 44px;
    margin-right: 16px;
  }
  .mh-quick-title {
    font-size: 17px;
  }
}

/* 최소 폭 보장(320px)은 common.css 의 body min-width 로 포털 전역 단일화 — 여기서는 제거. */