/* 920 워케이션허브 S5-C — 이미지 슬롯 배경·폴백 스타일.
   [data-has-img="1"]가 없는 한(=존재 원장에 slot-id가 없는 한) 아무 것도 바뀌지 않는다 —
   오늘처럼 매니페스트가 비어 있으면 히어로·지역 버튼은 기존 모습 그대로다(회귀 0).

   ★920 S5-C R2(F1 수리, codex 검수) — 이전 버전은 이 주석에 갤러리 스크림도 지역 버튼과
   같은 .72라고 적었지만 site_v2/js/program.js의 실제 갤러리 코드는 .55를 썼다(주석-구현
   불일치). 흰 이미지를 등록해 재현하니 갤러리 설명 글씨 대비가 3.34:1로 AA 미달이었다.
   program.js를 .72로 고쳐 지역 버튼과 통일했다 — 아래 수치는 격리 사본에 순백(255,255,255)
   webp 3종(hero·sido-서울특별시·gallery-지자체)을 등록하고 실제 렌더된 스크린샷 픽셀을
   직접 읽어 계산한 실측값이다(계산값이 아니다, round/REPORT_WORKATION_S5C_R2_CLAUDE35_20260921.md
   6값 표 참조):
   - 히어로 카피 스크림 rgba(12,70,62,.85)(--p-teal-dark) 위 흰 텍스트: 순백 배경 합성 시
     실측 배경 rgb(48,98,91), 대비 6.94:1(390px·1280px 동일, AA 4.5 이상).
   - 지역 버튼(서울) 스크림 rgba(24,53,47,.72)(--p-ink) 위 흰 텍스트: 실측 배경 약
     rgb(88,109,105), 대비 390px 5.52·1280px 5.44(AA 4.5 이상).
   - 갤러리 타일 스크림 rgba(24,53,47,.72)(--p-ink, program.js와 통일) 위 흰 텍스트: 실측
     배경 약 rgb(88,109,105), 대비 390px 5.52·1280px 5.52(AA 4.5 이상).
   - 갤러리 폴백(사진 없음, 순수 CSS)은 --p-teal-pale/--p-violet-pale/--p-ochre-pale 배경에
     --wh-ink 텍스트 — 정적 토큰 조합으로 대비 ≈11:1 이상(빈 매니페스트 회귀 시험 실측 11.21).
*/

.wh-hero-media { position: relative; background-size: cover; background-position: center; border-radius: inherit; }
.wh-hero-media[data-has-img="1"] .wh-hero-copy {
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(12, 70, 62, .85);
}
.wh-hero-media[data-has-img="1"] .wh-hero-copy .wh-eyebrow,
.wh-hero-media[data-has-img="1"] .wh-hero-copy h1,
.wh-hero-media[data-has-img="1"] .wh-hero-copy p,
.wh-hero-media[data-has-img="1"] .wh-hero-copy .wh-hero-summary {
  color: var(--p-white);
}

.wh-region-choice[data-has-img="1"] {
  background-size: cover;
  background-position: center;
  color: var(--p-white);
  border-color: transparent;
}
.wh-region-choice[data-has-img="1"][aria-pressed="true"] { outline: 3px solid var(--wh-focus); outline-offset: 1px; }

.wh-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.wh-gallery-tile {
  flex: 1 1 220px;
  min-height: 140px;
  border-radius: var(--wh-radius-card);
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  font-size: var(--wh-fs-caption);
  font-weight: 700;
  background-size: cover;
  background-position: center;
}
.wh-gallery-tile--placeholder.wh-gallery--local { background: var(--p-teal-pale); color: var(--wh-ink); }
.wh-gallery-tile--placeholder.wh-gallery--public { background: var(--p-violet-pale); color: var(--wh-ink); }
.wh-gallery-tile--placeholder.wh-gallery--private { background: var(--p-ochre-pale); color: var(--wh-ink); }
.wh-gallery-tile[data-has-img="1"] { color: var(--p-white); }

@media (max-width: 760px) {
  .wh-gallery-tile { flex-basis: 100%; min-height: 120px; }
}