/* ── pages / about-tour — Clinic Tour ──────────────────────────────
   아키타입 article: 히어로 → 도입 한 줄 → 공간 사진 12장(.gallery)
   → 형제 이동(.siblings) → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .gallery / .siblings / .cta-band 로
   해결된다. 이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* 배경 사진은 gall03(대기실). gall01(로비)은 벽면 KOWON 사인이 정중앙이라
   제목·eyebrow 와 겹친다. gall03 은 사인이 왼쪽으로 비켜 있어 가운데가 비었다.
   흰 대리석·조명이라 원본이 밝다 — .page-hero 기본 오버레이 68% 로는 회색
   바탕이 되어 핑크 eyebrow 와 흰 본문이 약해진다. about 허브와 같이 76%. */
/* 원본 JPG 아래쪽에 한국어 캡션 띠("로비3")가 박혀 있다. 1920 에서는 cover
   가 위아래를 잘라 내 안 보이지만, 폭이 좁아지면 세로가 통째로 들어와
   히어로 바닥에 그 띠가 드러난다. 그래서 사진을 ::before 로 옮기고 박스를
   아래로 11% 늘려 .page-hero 의 overflow:hidden 이 띠를 잘라 내게 한다.
   (띠는 이미지 높이의 9.6% 다) */
.about-tour-hero{background-image:none}
.about-tour-hero::before{
  content:"";
  position:absolute;inset:0 0 -11% 0;
  background-image:
    linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),
    var(--hero-img,none);
  background-size:100% 100%,cover;
  background-position:0 0,center;
  background-repeat:no-repeat,no-repeat;
}
/* 절대배치된 ::before 보다 글이 위에 오게 한다. */
.about-tour-hero .page-hero__inner{position:relative;z-index:1}

/* ── Inside KOWON(도입 한 줄) + Gallery by space(사진 12장) ─── */

/* 리드가 1280 을 가로지르면 읽기 줄이 너무 길다. .prose 와 같은 900 으로 묶는다. */
.about-tour-inside__lead{max-width:900px}

/* .sec-head 와 사진 사이 — J컬·about 과 같은 --sp-block(60) */
.about-tour-spaces__gallery{margin-top:var(--sp-block)}

/* 원본이 1200×565(2.12:1)로 아주 납작하다. .gallery 기본 4열이면 한 칸이
   290px 라 방 사진이 읽히지 않는다. 데스크톱·태블릿 2열, 모바일 1열로 간다.
   (subpage.css 의 .gallery 규칙과 특정도가 같고 이 파일이 뒤에 실리므로
    미디어쿼리 안에서도 이 선언이 이긴다) */
.about-tour-spaces__gallery{grid-template-columns:repeat(2,1fr)}
@media (max-width:767px){
  .about-tour-spaces__gallery{grid-template-columns:1fr}
}

/* 12장 중 6장(복도·상담실2·수술실·수술실2·파우더룸1,2)은 세로 사진을
   1200×565 캔버스에 흰 여백을 붙여 맞춘 것이다. 잘라 내면 방이 한 줄로
   뭉개지므로 여백은 그대로 두고, 대신 타일을 흰 카드로 만들어 그 여백이
   사진 프레임처럼 읽히게 한다. 회색(--surface-muted) 섹션 위라 구분된다. */
.about-tour-spaces__gallery .gallery__item{
  background:var(--surface);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.about-tour-spaces__gallery .gallery__cap{
  margin-top:0;
  padding:16px 20px 20px;
}

/* 원본 JPG 아래쪽 565→511px 구간에 한국어 캡션 띠("로비1" 등)가 박혀 있다
   (12장 모두 같은 위치, 픽셀로 확인). 영문 사이트라 그 띠를 보이지 않게
   아래를 잘라 낸다 — 방 이름은 바로 밑 figcaption 이 영어로 말한다.
   508/1200 은 띠 시작(511) 바로 위. width/height 속성은 JSON 원본 그대로 둔다. */
.about-tour-spaces__gallery img{
  display:block;
  border-radius:0;          /* 카드 쪽에서 라운드를 준다 */
  aspect-ratio:1200/508;
  object-fit:cover;
  object-position:center top;
}

/* ── 상담 CTA ──────────────────────────────────────────────── */

/* .cta-band 는 컨테이너가 없다. 안쪽 .container 가 가운데 정렬을 이어받는다. */
.about-tour-cta__inner{display:flex;flex-direction:column;align-items:center}

/* 리드 안의 안전시스템 링크 — 핑크 밴드 위라 색 대신 밑줄로만 구분한다. */
.about-tour-cta__lead{max-width:900px}
.about-tour-cta__lead a{color:var(--text-inverse);text-decoration:underline;text-underline-offset:3px}