@charset "utf-8";
/* ==========================================================================
골든디아망 병원둘러보기(tour.html) — 갤러리 조판
main.css → sub.css → 이 파일 순으로 로드한다. 토큰·헤더·드로어·버튼·
Contact·푸터·리빌은 전부 앞의 두 파일 것을 그대로 쓴다.
왜 파일을 따로 뒀나
/162 는 위젯이 셋뿐인 페이지다 — 여백 / 텍스트 한 줄 / 갤러리 15장 / 여백.
**본문 문장이 한 줄도 없고** 글자는 제목 하나와 방 이름 아홉이 전부다.
즉 이 페이지는 사진을 보러 오는 페이지인데, sub.css 조판으로 담으면
「가운데 제목 + 사진」 밴드가 아홉 번 똑같이 반복된다. 그렇다고 sub.css 를
고치면 시술 페이지 52장이 함께 흔들린다(about.css·doctors.css 와 같은 이유).
셀렉터는 **전부 .gd-tour 안으로** 스코프한다.
⚠ 색은 사이트 기조 그대로다 — 흰-크림-흰-베이지 … 교대, 브라운 골드 액센트.
**바뀌는 것은 조판뿐이다**(doctors 개편에서 얻은 교훈: "좀 다르게"를 색으로
풀면 사이트에서 떨어져 나간다).
⚠ 사진 표시 폭은 **기존 에셋 치수를 넘기지 않는다.** 이 페이지는 사진 15장에
webp 484KB 라 이미 verify.py 캡처 예산(60s) 가까이 가 있다
(make_assets_162.py 머리주석). 그래서 에셋을 다시 굽지 않았고 페이지 무게는
개편 전과 같다. 1440 기준 실측:
콘텐츠 1360 · 12칸 · gap 24 → 한 칸 91.3
8칸 = 898 (1000 에셋) 6칸 = 668 (680 에셋) 4칸 = 437 (540 에셋)
블록
01 SEC 02 HERO 03 ROOM(공통) 04 ROOM 변주 05 RESPONSIVE
========================================================================== */
/* --- 01. SEC — 밴드 리듬은 사이트 그대로 --------------------------------- */
.gd-tour .tr-sec{position:relative;padding:var(--gd-pad) 0}
.gd-tour .tr-sec--cream{background:var(--gd-cream)}
.gd-tour .tr-sec--beige{background:var(--gd-beige)}
/* --- 02. HERO — 가운데 카피 + 그 아래 사진 ------------------------------- */
/* 시술 페이지는 좌 사진 / 우 카피(.gd-shero), doctors 는 좌 카피 / 우 사진이다.
이 페이지는 사진을 보러 오는 곳이라 첫 화면을 두 단으로 가르지 않고
**한 장을 크게** 보여준다. */
.gd-tour .tr-hero{
padding:calc(var(--gd-hdr) + clamp(24px,6.25vw,120px)) 0 clamp(48px,6.25vw,120px);
text-align:center;
}
.gd-tour .tr-hero-body{max-width:min(100%,760px);margin-inline:auto}
.gd-tour .tr-kicker{
font-size:clamp(12px,1.04vw,20px);font-weight:700;line-height:1.6;
letter-spacing:.01em;color:var(--gd-muted);
}
.gd-tour .tr-hero-h{
margin-top:clamp(12px,1.35vw,26px);
font-size:clamp(30px,3.75vw,72px);font-weight:800;line-height:1.15;
letter-spacing:-.04em;color:var(--gd-ink);
}
.gd-tour .tr-hero-lead{
margin-top:clamp(14px,1.56vw,30px);
font-size:clamp(13.5px,.94vw,18px);line-height:1.6;color:#4a4741;
}
.gd-tour .tr-hero .gd-actions{justify-content:center;margin-top:clamp(22px,2.6vw,50px)}
/* 사진은 에셋 폭(900)을 넘기지 않는다 */
.gd-tour .tr-hero-fig{
margin:clamp(34px,4.17vw,80px) auto 0;max-width:min(100%,900px);
border-radius:var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-tour .tr-hero-fig img{width:100%;height:auto}
/* --- 03. ROOM — 12칸 그리드 공통 ----------------------------------------- */
.gd-tour .tr-room{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:clamp(12px,1.67vw,24px);row-gap:clamp(16px,2.08vw,30px);
align-items:center;
}
.gd-tour .tr-name{
font-size:clamp(21px,2.29vw,44px);font-weight:700;line-height:1.35;
letter-spacing:-.03em;color:var(--gd-ink);
}
/* 이름 아래 짧은 브라운 선 — 방마다 이름이 서는 자리가 달라 표지가 필요하다 */
.gd-tour .tr-name::after{
content:"";display:block;width:clamp(28px,2.92vw,56px);height:1px;
margin-top:clamp(12px,1.25vw,24px);background:var(--gd-brown);
}
.gd-tour .tr-ph{margin:0;border-radius:var(--gd-r);overflow:hidden;background:#efe9e0}
.gd-tour .tr-ph img{width:100%;height:auto}
/* --- 04. ROOM 변주 -------------------------------------------------------- */
/* 사진이 한 장인 방이 다섯이라(§2·§4·§5·§6·§7) 좌우와 폭을 함께 바꾼다.
좌우만 뒤집으면 결국 두 화면이 번갈아 나올 뿐이다. */
@media (min-width:1025px){
/* a1 — 이름 좌 3칸 / 사진 우 8칸 */
.gd-tour .tr-room--a1 .tr-room__t{grid-column:1/4}
.gd-tour .tr-room--a1 .tr-ph{grid-column:5/13}
/* a2 — 이름 우 3칸 / 사진 좌 8칸 */
.gd-tour .tr-room--a2 .tr-room__t{grid-column:10/13;text-align:right}
.gd-tour .tr-room--a2 .tr-ph{grid-column:1/9}
.gd-tour .tr-room--a2 .tr-name::after{margin-left:auto}
/* a3 — 이름 좌 4칸 / 사진 우 7칸 (한 칸 좁다) */
.gd-tour .tr-room--a3 .tr-room__t{grid-column:1/5}
.gd-tour .tr-room--a3 .tr-ph{grid-column:6/13}
/* a4 — 이름 우 4칸 / 사진 좌 7칸 */
.gd-tour .tr-room--a4 .tr-room__t{grid-column:9/13;text-align:right}
.gd-tour .tr-room--a4 .tr-ph{grid-column:1/8}
.gd-tour .tr-room--a4 .tr-name::after{margin-left:auto}
/* pair — 이름이 위, 둘째 장이 아래로 어긋난다(6칸 + 6칸) */
.gd-tour .tr-room--pair{align-items:start}
.gd-tour .tr-room--pair .tr-room__t{grid-column:1/13;margin-bottom:clamp(6px,1.04vw,20px)}
.gd-tour .tr-room--pair .tr-ph:nth-of-type(1){grid-column:1/7}
.gd-tour .tr-room--pair .tr-ph:nth-of-type(2){grid-column:7/13;margin-top:clamp(30px,4.17vw,80px)}
/* --r 은 어긋나는 쪽을 뒤집는다 */
.gd-tour .tr-room--pair.tr-room--r .tr-room__t{text-align:right}
.gd-tour .tr-room--pair.tr-room--r .tr-name::after{margin-left:auto}
.gd-tour .tr-room--pair.tr-room--r .tr-ph:nth-of-type(1){margin-top:clamp(30px,4.17vw,80px)}
.gd-tour .tr-room--pair.tr-room--r .tr-ph:nth-of-type(2){margin-top:0}
/* trio — 가운데 장이 아래로 어긋난다(4칸씩) */
.gd-tour .tr-room--trio{align-items:start}
.gd-tour .tr-room--trio .tr-room__t{grid-column:1/13;margin-bottom:clamp(6px,1.04vw,20px)}
.gd-tour .tr-room--trio .tr-ph:nth-of-type(1){grid-column:1/5}
.gd-tour .tr-room--trio .tr-ph:nth-of-type(2){grid-column:5/9;margin-top:clamp(26px,3.65vw,70px)}
.gd-tour .tr-room--trio .tr-ph:nth-of-type(3){grid-column:9/13}
}
/* --- 05. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1024px){
/* 12칸 배치는 여기서 풀린다. 이름이 위, 사진이 아래로 흐르되 2장·3장은
나란히 남긴다 — 어긋남만 없앤다(좁은 폭에서는 어긋남이 실수처럼 보인다). */
.gd-tour .tr-room{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.gd-tour .tr-room__t{grid-column:1/-1;text-align:left}
.gd-tour .tr-name::after{margin-left:0}
.gd-tour .tr-ph{grid-column:auto;margin-top:0}
/* 한 장짜리 방은 한 칸을 다 쓴다 */
.gd-tour .tr-room--a1 .tr-ph,
.gd-tour .tr-room--a2 .tr-ph,
.gd-tour .tr-room--a3 .tr-ph,
.gd-tour .tr-room--a4 .tr-ph{grid-column:1/-1}
/* 세 장짜리는 2열에서 마지막이 혼자 남는다 → 마지막을 가로로 눕힌다 */
.gd-tour .tr-room--trio .tr-ph:nth-of-type(3){grid-column:1/-1}
}
@media (max-width:768px){
/* 히어로 킥커·본문의
은 1920 기준 줄바꿈이다(sub.css 와 같은 처리).
둘 다
뒤에 공백이 있거나 문장이 끊기는 자리라 낱말이 붙지 않는다. */
.gd-tour .tr-hero-lead br{display:none}
.gd-tour .tr-hero{padding-top:calc(var(--gd-hdr) + clamp(18px,3vw,34px))}
}
@media (max-width:600px){
.gd-tour .tr-room{grid-template-columns:minmax(0,1fr)}
.gd-tour .tr-room--trio .tr-ph:nth-of-type(3){grid-column:auto}
}
@media (max-width:480px){
.gd-tour .tr-hero .gd-actions .gd-btn{flex:1 1 auto}
}