/* 온누리상품권 피부과 지도 — 반응형(>=360px) 레이아웃 + 접근성 최소선 (Todo 6) */

@media (min-width: 360px) {
  body {
    margin: 0;
    font-family: sans-serif;
  }
}

/* 모바일 기본(360px~): 세로 스택 — grid-template-areas 순서가 그대로
   시각적 읽기 순서(고지 -> 배너 -> 지역 선택 -> 지도 -> 리스트)와 일치한다. */
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "notice"
    "banner"
    "region"
    "map"
    "list";
}

#freshness-notice {
  grid-area: notice;
}

#map-fallback-banner {
  grid-area: banner;
}

#region-select {
  grid-area: region;
}

#map {
  grid-area: map;
  width: 100%;
  height: 320px;
}

#clinic-list {
  grid-area: list;
  width: 100%;
}

/* 넓은 화면: 지도(좌)+리스트(우) 좌우 분할. 지도는 보조 시각 자료이므로
   레이아웃이 바뀌어도 리스트의 필수 정보(주소/전화/결제수단)는 항상
   텍스트로 그대로 존재한다(접근성 최소선의 핵심 설계). */
@media (min-width: 768px) {
  body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "notice notice"
      "banner banner"
      "region region"
      "map list";
  }
}