/**
 * 식량안보 L1 — 곡물 수입 공급망 지도 임베드
 */

.fnc-grain-supply-map {
  margin: 0;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 88% 8%, rgba(238, 189, 61, 0.12), transparent 24rem),
    #f4f1e8;
}

/* 지도 모듈만 본문 리듬(1280px)보다 넓게 간다 — 지도 SVG 가 2:1 로 고정돼 있어
   세로를 확보하는 유일한 방법이 가로 확보이기 때문이다. 발행 스크립트의
   contentSize 도 1440px 로 함께 맞춰야 한다(constrained 레이아웃이 먼저 자름). */
.fnc-grain-supply-map__inner {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.fnc-grain-supply-map__heading {
  max-width: 780px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.fnc-grain-supply-map__eyebrow {
  margin: 0 0 0.75rem;
  color: #3f8b63;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fnc-grain-supply-map__heading h2 {
  margin: 0;
  color: #18332a;
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.fnc-grain-supply-map__heading > p:last-child {
  margin: 1rem auto 0;
  color: #65766f;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.75;
  word-break: keep-all;
}

.fnc-grain-supply-map__frame {
  overflow: hidden;
  border: 1px solid rgba(24, 51, 42, 0.16);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  background: #fffdf7;
  box-shadow: 0 24px 70px rgba(43, 70, 57, 0.13);
}

/* 높이는 폭에서 역산한다 — 지도 SVG 는 viewBox 1000×500(2:1) + xMidYMid meet 이라
   「지도 영역 폭 ÷ 2」가 지도가 쓸 수 있는 최대 높이다. 그보다 높으면 위아래에
   빈 띠만 생기고(운영 실측: 480px→650px 로 올려도 지도 크기 불변), 낮으면 좌우에
   레터박스가 생긴다. 지도 영역 = 프레임 폭 − 좌측 패널 284px − 테두리 2px. */
.fnc-grain-supply-map__frame iframe {
  display: block;
  width: 100%;
  height: calc(
    (min(100vw - 2 * clamp(1rem, 3vw, 2rem), 1440px) - 286px) / 2
  );
  /* 좌측 패널의 자연 높이(399px)가 잘리지 않는 하한 — iframe 은 scrolling="no". */
  min-height: 410px;
  border: 0;
  background: #f4f1e8;
}

.fnc-grain-supply-map__fallback {
  margin: 1rem 0 0;
  text-align: right;
}

.fnc-grain-supply-map__fallback a {
  color: #245e46;
  font-size: 0.88rem;
  font-weight: 750;
  text-underline-offset: 0.25em;
}

/* 980px 이하에서 지도 앱은 패널을 지도 위로 쌓는다. 쌓인 높이를 정확히 주지
   않으면 iframe 이 scrolling="no" 라 아래쪽이 그냥 잘린다(종전 790px 은 모바일에서
   134px 잘림). 높이 = 패널 + 지도(map.css 의 모바일 지도 높이 610px). */
@media (max-width: 980px) {
  .fnc-grain-supply-map__frame iframe {
    /* 패널이 2열(156px) + 지도 610px */
    height: 766px;
  }
}

@media (max-width: 640px) {
  .fnc-grain-supply-map {
    padding-inline: 0.75rem;
  }

  .fnc-grain-supply-map__frame iframe {
    /* 패널이 1열로 바뀌어 314px + 지도 610px */
    height: 924px;
  }

  .fnc-grain-supply-map__fallback {
    padding-right: 0.25rem;
  }
}