/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-location.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=5f04665083d176aa4280fb1d3f80d684 */
/* ── pages / location — 오시는 길 · 진료시간 ────────────────────
   아키타입 utility. 콘텐츠 JSON 의 template_note 그대로
   메인 Sec_9(지도 · 연락처 · 진료시간)의 구성을 서브페이지로 옮겼다.

   뼈대는 전부 공용 프리미티브다.
     히어로   .page-hero--plain          (subpage.css — 사진 없는 안내 페이지)
     머리말   .sec-head/.sec-title/.sec-lead        (layout.css)
     소제목   .sub-label  버튼 .btn/.actions        (layout.css)
     진료시간 .infotable   고지 .disclaimer         (subpage.css/layout.css)
     비급여   .prose       상담 .cta-band           (subpage.css)
   이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */


/* ── 히어로 ──────────────────────────────────────────────────
   .page-hero--plain 기본 360 은 eyebrow+H1+2줄 리드(≈196)에
   상하 패딩(헤더 100+4 / 100)을 더한 400 보다 낮아 eyebrow 가
   고정 헤더 밑으로 밀려 들어간다. 세 폭 모두 들어갈 높이로 올린다. */
/* 배너 사진은 1층 로비(gall01 에서 국문 캡션 띠를 잘라낸 loc-hero.jpg).
   밝은 대리석 실내라 .page-hero 기본 68% 베일로는 흰 제목이 뜬다 — 76% 로 올린다.
   높이는 다른 서브페이지와 같은 .page-hero 기본(980 / 640 / 603)을 따른다. */
.loc-hero{
  background-image:linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),var(--hero-img,none);
}

/* 주소 한 줄 + 위치 설명 한 문장이 한 덩어리로 붙어 있어
   문장 경계에서만 줄을 끊는다. 모바일에서는 어차피 접히므로 뗀다. */
@media (max-width:767px){
  .loc-hero__br{display:none}
}


/* ── Getting here — 지도 + 주소 · 상담채널 ──────────────────── */

/* 메인 Sec_9 과 같은 2단(지도 | 정보). 지도는 원본 1251×801 을
   자르지 않고 그대로 눕히고, 정보는 흰 카드로 세운다. */
.loc-where__inner{
  margin-top:var(--sp-stack);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-block);
  align-items:stretch;      /* 지도와 정보 박스 높이를 맞춘다 */
}

/* 지도는 오른쪽 정보 박스 높이에 맞춘다. 원본(1251×801)보다 칸이 길어지면
   비율이 남으므로 cover 로 채우고, 상호가 있는 가운데를 살려 크롭한다. */
.loc-where__map{
  margin:0;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--surface-muted);
  min-height:100%;
}
.loc-where__map img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (max-width:1023px){
  /* 1열로 접히면 맞출 상대가 없다 — 원본 비율로 되돌린다 */
  .loc-where__map{min-height:0}
  .loc-where__map img{height:auto;object-fit:fill}
}

.loc-where__info{
  padding:36px 32px;
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}

.loc-where__addr{
  margin-top:14px;
  font-weight:500;font-size:var(--fs-20);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
  word-break:keep-all;
}
.loc-where__near{
  margin-top:8px;
  font-size:var(--fs-16);line-height:1.6;
  color:var(--text-secondary);
  word-break:keep-all;
}

/* 두 번째 .sub-label 위 간격 */
.loc-where__label{margin-top:var(--sp-stack)}

/* 대표번호 — 메인 Sec_9 과 같은 Montaga 40 */
.loc-where__tel{
  margin-top:12px;
  font-family:var(--font-numeric);
  font-weight:400;font-size:var(--fs-40);line-height:1.15;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
}
.loc-where__tel a:hover{color:var(--brand)}

/* 지도 링크 한 쌍 — 원문에서 주소 카드 안 주소 바로 아래 붙어 있다.
   상담 채널의 분홍 primary 가 카드의 주 동선이므로 여기는 outline 으로 눕힌다. */
.loc-where__maps{margin-top:20px}

.loc-where__actions{margin-top:20px}

/* 태블릿 이하에서는 --fs-40 이 32/26 으로 줄어 링크 높이가 39/32 로
   탭 영역 44 에 못 미친다. 글자는 그대로 두고 클릭 박스만 44 로 세운다.
   (데스크톱은 40 x 1.15 = 46 이라 손대지 않는다) */
@media (max-width:1023px){
  .loc-where__tel a{display:inline-flex;align-items:center;min-height:44px}
}


/* ── 교통편 3블록 (지하철 · 자동차 · 버스) ─────────────────── */
.loc-ways{
  margin-top:var(--sp-block);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-gap);
}
.loc-ways__item{
  padding:32px 28px;
  background:var(--surface-muted);
  border-radius:var(--radius-card);
}
.loc-ways__title{
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
  word-break:keep-all;
}
.loc-ways__list{
  margin-top:16px;
  display:flex;flex-direction:column;gap:10px;
}
.loc-ways__list li{
  position:relative;padding-right:16px;
  font-size:var(--fs-16);line-height:1.7;
  color:var(--text-secondary);
  word-break:keep-all;
}
.loc-ways__list li::before{
  content:"";position:absolute;right:0;top:.7em;
  width:4px;height:4px;border-radius:50%;background:var(--brand);
}

/* 태블릿 이하 — 지도 위, 정보 아래. 교통편도 한 단으로 쌓는다.
   (3단을 유지하면 버스 노선 번호가 한 글자씩 끊긴다) */
@media (max-width:1023px){
  .loc-where__inner{grid-template-columns:minmax(0,1fr)}
  .loc-ways{grid-template-columns:minmax(0,1fr)}
}


/* ── 진료시간 ────────────────────────────────────────────── */

/* .infotable 기본 th 220 은 가장 긴 라벨
   'Sunday · public holidays' 가 좌우 패딩 16 을 빼면 두 줄로 접힌다.
   한 줄에 들어가는 240 으로 넓힌다. */
.loc-hours__table th{width:240px}

@media (max-width:767px){
  .loc-hours__table th{width:140px}
}


/* ── 비급여 안내 ─────────────────────────────────────────── */
/* .prose 기본 900 폭 가운데 정렬 그대로 쓴다. */

/* 원문에서 비급여 카드 하단에 붙어 있던 버튼 한 쌍.
   바로 아래 분홍 CTA 밴드가 이어지므로 outline 으로만 둔다. */
.loc-costs__actions{margin-top:var(--sp-stack)}


/* ── 상담 CTA ────────────────────────────────────────────── */
@media (max-width:767px){
  .loc-cta__br{display:none}
}