/* =============================================================
   경기도 지역 지도 (OpenLayers) — 기존 이미지맵과 동일한 영역/비율
   ============================================================= */
.gg_map_ol { display: none; }

/* OL 지도 활성 시: 이미지맵 숨기고 동일 크기로 캔버스 표시 */
/* 이미지맵만 숨기고 .gg_img 는 유지 (전국보기 썸네일 a.link-thumb 가 이 안에 붙음) */
html.ol-map-on .map_con .gg_img > img,
html.ol-map-on .map_con .gg_img > map { display: none; }
html.ol-map-on .map_con .gg_map_ol {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 483;
  margin: 0 auto;
}

/* 카드 배경이 그대로 보이도록 투명 처리 (라이트/다크 공통) */
.gg_map_ol,
.gg_map_ol .ol-viewport,
.gg_map_ol .ol-layers { background: transparent; }
.gg_map_ol canvas { background: transparent; }

/* =============================================================
   전국보기 썸네일 — 라이트/다크 공통 벡터 (Figma 156:9635 구조)
   박스 85x124 = 지도영역 104 + 하단바 20
   실루엣은 /images/img_user/map/thumb/*.svg (지도와 동일 GeoJSON 기반)
   ============================================================= */
.map_con a.link-thumb .thumb-v {
  --tv-bg:       #f5f7fd;
  --tv-border:   #cdd8ec;
  --tv-label:    #3a3d53;
  --tv-bar-bg:   #cdd8ec;
  --tv-bar-fg:   #3a3d53;

  display: block;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 85 / 124;
}
html[data-theme="dark"] .map_con a.link-thumb .thumb-v {
  --tv-bg:     rgba(255, 255, 255, .1);
  --tv-border: #cdd8ec;
  --tv-label:  #ffffff;
  --tv-bar-bg: #cdd8ec;
  --tv-bar-fg: #333333;
}

/* 지도 영역 */
.map_con a.link-thumb .tv-map {
  position: relative;
  display: block;
  height: 83.87%;                 /* 104/124 */
  background: var(--tv-bg);
  border: 1px solid var(--tv-border);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}
.map_con a.link-thumb .tv-img {
  position: absolute;
  inset: 6% 8%;
  width: 100%; height: 100%;
  width: auto;  height: auto;
  max-width: 84%; max-height: 88%;
  margin: auto;
  object-fit: contain;
}
/* 테마별 실루엣 교체 */
.map_con a.link-thumb .tv-img.is-dark { display: none; }
html[data-theme="dark"] .map_con a.link-thumb .tv-img.is-light { display: none; }
html[data-theme="dark"] .map_con a.link-thumb .tv-img.is-dark { display: block; }

/* 라벨 */
.map_con a.link-thumb .tv-label {
  position: absolute;
  left: 0; right: 0; top: 44%;
  text-align: center;
  color: var(--tv-label);
  font-weight: 500;
  letter-spacing: -0.26px;
  font-size: 11px;
  font-size: 15.3cqw;             /* 13/85 */
  white-space: nowrap;
}

/* 하단 바 */
.map_con a.link-thumb .tv-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16.13%;                 /* 20/124 */
  background: var(--tv-bar-bg);
  border-radius: 0 0 4px 4px;
  color: var(--tv-bar-fg);
  font-weight: 500;
  letter-spacing: -0.2px;
  font-size: 9px;
  font-size: 11.8cqw;             /* 10/85 */
}

/* 전국 썸네일 안의 '경기도' 보조 라벨 (Figma 156:9658) */
.map_con a.link-thumb .tv-label-sub {
  position: absolute;
  left: 0; right: 0; top: 22.9%;
  text-align: center;
  color: var(--tv-label);
  font-weight: 500;
  letter-spacing: -0.1px;
  font-size: 5px;
  font-size: 5.9cqw;              /* 5/85 */
  white-space: nowrap;
  opacity: .95;
}