@charset "utf-8";
/* ==========================================================================
   골든디아망 오시는 길(location.html) — 안내판 조판
   main.css → sub.css → 이 파일 순으로 로드한다. 토큰·헤더·드로어·버튼·
   Contact·푸터·리빌은 전부 앞의 두 파일 것을 그대로 쓴다.

   왜 파일을 따로 뒀나
     /163 은 완성 55장 중 가장 얇다 — 본문 467자, 그림은 약도 한 장을 두 판으로
     구운 게 전부다. 그런데 시술 상세 조판으로 담으니 두 밴드가 **둘 다
     「좌 그림 / 우 글」** 이라 같은 화면이 두 번 지나갔다. sub.css 를 고치면
     시술 페이지 52장이 함께 흔들린다(about·doctors·tour 와 같은 이유).
     셀렉터는 **전부 .gd-loc 안으로** 스코프한다.

   ⚠ 색은 사이트 기조 그대로다 — 흰(히어로) → 크림(약도) → 흰(Contact).
     **바뀌는 것은 조판뿐이다**(doctors 개편에서 얻은 교훈).

   블록  01 SEC   02 HERO   03 MAP   04 INFO   05 RESPONSIVE
   ========================================================================== */

/* --- 01. SEC ------------------------------------------------------------- */
.gd-loc .lc-sec{position:relative;padding:var(--gd-pad) 0}
.gd-loc .lc-sec--cream{background:var(--gd-cream)}

/* --- 02. HERO HEADER — 그림 없는 제목 띠 ---------------------------------- */
/* 이 페이지의 그림은 약도 한 장뿐이다. 히어로 크롭과 §2 본문 약도가 같은 그림
   두 판이라 한 화면 안에서 두 번 지나갔다 → **히어로에서 약도를 뺐다**(사용자 지시).
   그림이 없으니 좌우로 가를 이유도 없어 가운데로 세운다. 아래 §2 가 크림이라
   배경색만으로 띠가 갈린다 — 구분선을 따로 긋지 않는다. */
.gd-loc .lc-hero{
  padding:calc(var(--gd-hdr) + clamp(36px,5.73vw,110px)) 0 clamp(44px,5.73vw,110px);
  text-align:center;
}
.gd-loc .lc-hero-body{max-width:min(100%,760px);margin-inline:auto}
.gd-loc .lc-kicker{
  font-size:clamp(12px,1.04vw,20px);font-weight:700;line-height:1.6;
  letter-spacing:.01em;color:var(--gd-muted);
}
.gd-loc .lc-hero-h{
  margin-top:clamp(10px,1.15vw,22px);
  font-size:clamp(30px,3.75vw,72px);font-weight:800;line-height:1.15;
  letter-spacing:-.04em;color:var(--gd-ink);
}
.gd-loc .lc-hero-lead{
  margin-top:clamp(16px,1.87vw,36px);
  font-size:clamp(13.5px,.94vw,18px);line-height:1.6;color:#4a4741;
}
.gd-loc .lc-hero .gd-actions{justify-content:center;margin-top:clamp(22px,2.6vw,50px)}

/* --- 03. MAP — 좌 약도(크게) / 우 정보(세로 중앙) ------------------------- */
/* 약도가 941x1347 세로형이라 옆 칸보다 훨씬 길어진다. 정보를 위에서부터 쌓으면
   아래가 통째로 비므로 **세로 중앙**에 둔다 — 지도 옆에 뜬 안내판처럼 읽힌다. */
.gd-loc .lc-map{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,48%) minmax(0,1fr);
  column-gap:clamp(24px,4.17vw,80px);row-gap:clamp(26px,3vw,44px);
}
.gd-loc .lc-map-fig{margin:0;border-radius:var(--gd-r);overflow:hidden;background:#efe9e0}
.gd-loc .lc-map-fig img{width:100%;height:auto}

/* --- 04. INFO — 주소 → 운영시간 → 교통 ----------------------------------- */
.gd-loc .lc-head{
  font-size:clamp(21px,2.29vw,44px);font-weight:700;line-height:1.4;
  letter-spacing:-.028em;color:var(--gd-ink);
}
.gd-loc .lc-addr{
  margin-top:clamp(14px,1.56vw,30px);
  font-size:clamp(13.5px,.94vw,18px);line-height:1.6;color:#4a4741;
}
/* 원문 PC 판이 전화·운영시간·주소·교통을 가로선(hr)으로 끊어 세워 뒀다.
   그 구분선을 헤어라인으로 받는다. */
.gd-loc .lc-block{
  margin-top:clamp(24px,2.8vw,54px);padding-top:clamp(20px,2.29vw,44px);
  border-top:1px solid var(--gd-ink);
}
.gd-loc .lc-block-t{
  font-size:clamp(11px,.83vw,15px);font-weight:700;letter-spacing:.12em;color:var(--gd-brown-dp);
}
/* dl>div 로 감싸야 dt/dd 가 한 줄로 선다(dl 직계는 dt/dd 만 허용) */
.gd-loc .lc-hours{margin-top:clamp(12px,1.25vw,24px)}
.gd-loc .lc-hours>div{
  display:grid;grid-template-columns:clamp(84px,7.3vw,140px) minmax(0,1fr);
  padding:clamp(7px,.73vw,14px) 0;border-bottom:1px solid var(--gd-hair);
}
.gd-loc .lc-hours dt{
  font-size:clamp(11.5px,.78vw,15px);font-weight:700;letter-spacing:.06em;color:var(--gd-ink);
}
.gd-loc .lc-hours dd{
  margin:0;font-size:clamp(12.5px,.89vw,17px);letter-spacing:-.01em;color:#4a4741;
  font-variant-numeric:tabular-nums;
}
.gd-loc .lc-note{
  margin-top:clamp(10px,1.04vw,20px);
  font-size:clamp(11px,.78vw,15px);color:var(--gd-muted);
}
.gd-loc .lc-route{
  margin-top:clamp(24px,2.8vw,54px);border-top:1px solid var(--gd-ink);
}
.gd-loc .lc-route li{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  column-gap:clamp(14px,1.56vw,30px);
  padding:clamp(11px,1.15vw,22px) 0;border-bottom:1px solid var(--gd-hair);
}
.gd-loc .lc-route b{
  font-family:var(--gd-serif);font-weight:400;font-style:italic;
  font-size:clamp(13px,1.04vw,20px);letter-spacing:.02em;color:var(--gd-brown);
}
.gd-loc .lc-route span{
  font-size:clamp(12.5px,.89vw,17px);line-height:1.55;letter-spacing:-.02em;color:#4a4741;
}

/* --- 05. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1024px){
  .gd-loc .lc-hero{padding-top:calc(var(--gd-hdr) + clamp(22px,3.4vw,44px))}
  /* 세로 약도를 한 컬럼에 그대로 흘리면 화면 두 개 높이를 먹는다 */
  .gd-loc .lc-map{grid-template-columns:minmax(0,1fr)}
  .gd-loc .lc-map-fig{width:min(100%,460px);margin-inline:auto}
}

@media (max-width:768px){
  /* 본문 <br> 은 1920 기준 줄바꿈이다(sub.css .gd-sbody br 과 같은 처리).
     둘 다 <br> 뒤에 공백이 있어 낱말이 붙지 않는다. */
  .gd-loc .lc-hero-lead br,
  .gd-loc .lc-addr br{display:none}
}

@media (max-width:480px){
  .gd-loc .lc-hero .gd-actions .gd-btn{flex:1 1 auto}
  .gd-loc .lc-hours>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
}