@charset "utf-8";
/* =========================================================================
 * 병원소개 > 센터 둘러보기 (www/brand/tour.jsp 전용)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .tour 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ⚠ 오시는 길(/brand/location)의 "원내 둘러보기" 섹션과 사진 자산을 공유한다.
 *   그쪽은 6장 요약 + 라이트박스이고, 이 페이지는 같은 사진을 층별·동선 기준으로
 *   풀어 놓은 전용 페이지다. 사진을 교체할 때 두 곳을 함께 볼 것
 *   (/img/brand/location/interior1~6.jpg 를 양쪽이 그대로 참조한다).
 *
 * ── 타이포 ──────────────────────────────────────────────────────────
 * 히어로 타이틀 40px = 이 페이지 최대 크기(전 페이지 공통 상한).
 * 영문 아이브로우는 Cormorant Garamond 700 / 17px / 4.6px / UPPER 공통 규격.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.tour {
	--tr-green:      #24382C;
	--tr-green-2:    #3B5843;
	--tr-gold:       #C2A878;
	--tr-gold-ink:   #A5854B;
	--tr-ink:        #1C1E1A;
	--tr-body:       #55594F;
	--tr-line:       #E7E2D8;
	--tr-cream:      #FBF9F2;
	--tr-paper:      #FFFDF8;

	--tr-t-h1:   40px;   /* 히어로 타이틀 = 이 페이지 최대 크기 */
	--tr-t-h2:   34px;
	--tr-t-card: 22px;
	--tr-t-lead: 19px;
	--tr-t-body: 18px;
	--tr-t-txt:  16px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--tr-ink);
	background: #fff;
	overflow-x: clip;
}
.tour .tr_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.tour .tr_inner--wide { max-width: 1560px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
.tour .tr_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--tr-gold-ink);
}
.tour .tr_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--tr-t-h2);
	line-height: 1.3;
	letter-spacing: -1px;
	color: var(--tr-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 1. 히어로 — 사옥 전경 풀블리드 (의료진 페이지와 같은 컷을 공유)
 * ========================================================================= */
.tr_hero {
	position: relative;
	background: #3E4A44 url('/img/brand/doctors/hero.jpg') no-repeat center 42% / cover;
	padding: 118px 40px 124px;
	text-align: center;
	overflow: hidden;
}
.tr_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	/* 2026-08-04 — 카피의 text-shadow 를 걷어내고 대비를 이 스크림으로 옮겼다.
	 * 글자마다 그림자를 걸면 테두리가 지저분해지고 배경과 따로 논다. */
	background:
		radial-gradient(66% 58% at 50% 52%, rgba(10,16,13,.52) 0%, rgba(10,16,13,0) 76%),
		linear-gradient(180deg, rgba(14,20,17,.44) 0%, rgba(14,20,17,.22) 46%, rgba(14,20,17,.48) 100%);
}
.tr_hero__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.tr_hero__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #D8BD8B;
}
.tr_hero__title {
	margin: 20px 0 0;
	font-weight: 700;
	font-size: var(--tr-t-h1);
	line-height: 1.28;
	letter-spacing: -.6px;
	color: #F4F2EE;
	word-break: keep-all;
}
.tr_hero__desc {
	margin: 22px 0 0;
	font-size: var(--tr-t-body);
	font-weight: 400;
	line-height: 1.9;
	color: rgba(255,255,255,.9);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 인트로 — 공간 개요 + 지표
 * ========================================================================= */
/* 2026-08-20 — 아래 '층별 안내' 와 **한 흐름으로 이어지게** 고쳤다(사용자: "두 섹션 잘 융화되도록").
 * 배경을 단색 크림에서 **아래로 갈수록 흰색으로 수렴하는 그라디언트**로 바꿔 경계선을 없앤다.
 * ⚠ 2026-08-21 — 이 섹션 하단에서 서서히 등장하던 **아이소 격자(::after)는 사용자 지시로 제거**했다
 *   (아래 .tr_floor 의 격자와 한 쌍이었다). 되살리려면 두 곳을 함께 되살려야 이음매가 맞는다. */
.tr_intro {
	position: relative;
	padding: 96px 0 92px;
	background: linear-gradient(180deg,
		var(--tr-paper) 0%,
		var(--tr-paper) 46%,
		#FFFEFB 74%,
		#fff 100%);
}
.tr_intro > .tr_inner { position: relative; z-index: 1; }
.tr_intro__head { text-align: center; max-width: 860px; margin: 0 auto; }
.tr_intro__desc {
	margin: 22px 0 0;
	font-size: var(--tr-t-body);
	font-weight: 400;
	line-height: 1.9;
	color: rgba(28,30,26,.68);
	word-break: keep-all;
}
/* 2026-08-20 — 위아래 헤어라인 + 세로 구분선만 있던 '표' 형태에서 **카드 4장**으로 바꿨다(사용자 지시).
 * 배경이 크림→흰 그라디언트라 흰 카드가 옅게 떠오르며 숫자 덩어리가 또렷해진다.
 * ⚠ 카드끼리 세로 구분선을 다시 넣지 말 것 — 카드 테두리와 겹쳐 지저분해진다. */
.tr_stat {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 56px 0 0;
}
/* 2026-09-04 사용자 지시 — **정사각형 카드**로 바꾸고 가독성을 끌어올렸다.
 * 이전에는 납작한 가로 카드라 숫자와 라벨이 붙어 한 덩어리로 뭉쳐 보였다.
 *   · aspect-ratio 1/1 + 세로 가운데 정렬 → 숫자가 카드 한가운데에 놓인다
 *   · 숫자 38 → 46px, 라벨 15.5 → 16px·색을 더 진하게(.66 → .74)
 *   · 숫자와 라벨 사이에 골드 헤어라인을 넣어 두 정보를 눈으로 끊어 준다
 * ⚠ 정사각형이라 라벨이 길면 3줄까지 간다(영문·일본어판). 라벨 문구를 늘릴 때 확인할 것. */
.tr_stat__item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 20px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--tr-line);
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(28,30,26,.05);
}
/* 2026-09-04 사용자 지시 — 카드마다 **원내 사진을 아주 옅게** 깐다.
 * 숫자·라벨 가독성이 우선이라 opacity 는 .13 까지만 두고, 아래로 갈수록 사라지는 마스크를
 * 씌워 라벨이 놓이는 하단은 흰 바탕에 가깝게 남긴다(글자 위에 사진 결이 겹치지 않게).
 * 자산은 아래 갤러리와 같은 원본에서 뽑은 **정사각 620px·q72 경량본**이다(각 25~38KB) —
 * 갤러리용 큰 파일(inner_0N.jpg)을 배경으로 끌어다 쓰면 이 섹션에서만 500KB 가까이 더 받는다.
 * 카드 ↔ 사진 짝: 면적=라운지 / 층=시술실 복도 / 구역=파우더룸 / 협진=센터 데스크. */
.tr_stat__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/* 2026-09-04 2차 — "너무 은은하다"는 지적으로 .13 → .34 로 올렸다.
	   글자 가독성은 opacity 가 아니라 **마스크**가 지킨다 — 숫자·라벨이 놓이는 중앙 아래쪽으로
	   갈수록 사진이 사라지므로, 상단이 또렷해져도 글자 위에는 사진 결이 거의 남지 않는다. */
	opacity: .34;
	transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,.34) 62%, rgba(0,0,0,0) 94%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,.34) 62%, rgba(0,0,0,0) 94%);
	pointer-events: none;
}
.tr_stat__item:nth-child(1)::before { background-image: url('/img/brand/tour/bg_stat_1.jpg?v=20260904'); }
.tr_stat__item:nth-child(2)::before { background-image: url('/img/brand/tour/bg_stat_2.jpg?v=20260904'); }
.tr_stat__item:nth-child(3)::before { background-image: url('/img/brand/tour/bg_stat_3.jpg?v=20260904'); }
.tr_stat__item:nth-child(4)::before { background-image: url('/img/brand/tour/bg_stat_4.jpg?v=20260904'); }
.tr_stat__item:hover::before { opacity: .46; transform: scale(1.04); }
/* 숫자·라벨은 사진 위로 */
.tr_stat__num, .tr_stat__label { position: relative; z-index: 1; }
.tr_stat__num {
	display: block;
	font-weight: 700;
	font-size: 54px;
	line-height: 1.06;
	letter-spacing: -1.6px;
	/* 2026-09-04 사용자 지시 — 초록(--tr-green-2)에서 **검정**으로.
	   사진 위에 얹히는 숫자라 브랜드 그린보다 먹색이 더 또렷하다. 되돌리지 말 것. */
	color: var(--tr-ink);
}
.tr_stat__num em { font-style: normal; font-size: 20px; margin-left: 4px; letter-spacing: -.2px; }
.tr_stat__label {
	display: block;
	margin: 0;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(28,30,26,.76);
	word-break: keep-all;
}
/* 숫자 ↔ 라벨 구분 헤어라인 (골드) */
.tr_stat__label::before {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin: 20px auto 18px;
	background: var(--tr-gold);
	border-radius: 2px;
}

/* =========================================================================
 * 3. 층별 안내
 * ========================================================================= */
/* 2026-08-20 — 카드 2장 → 층별 도면 1장(사용자 지시).
 * 하단 패딩: 원래 **0**(도면 밑단을 섹션 끝에 붙였다) 이었으나,
 *   2026-08-21 사용자 지시 "도면 이미지 밑부분 간격을 좀 줘 / 도면이랑 섹션 끝이 너무 같아" 로 **72px** 부여.
 *   격자 배경을 걷고 하단이 크림(--tr-paper)으로 수렴하게 바뀐 뒤라, 여백을 줘도
 *   아래 .tr_ext(같은 --tr-paper)와 경계가 생기지 않는다. 0 으로 되돌리지 말 것.
 * ⚠ 위 인트로 섹션과 이어지는 구간이다(2026-08-20 "두 섹션 융화").
 *   인트로 배경이 아래로 흰색으로 수렴하므로 여기 상단 패딩을 크게 주면
 *   이어진 결이 끊겨 보인다 → 96 → 76px 로 줄여 두었다.
 *
 * 2026-08-21 — **아이소메트릭 격자 배경을 걷어냈다(사용자 지시: "격자무늬 없애고 적절한 색·디자인으로").**
 *   격자 선이 도면(투명 PNG) 사이로 그대로 비쳐 도면의 얇은 선들과 뒤엉켜 시끄러웠다.
 *   대신 **선 없는 색면**으로 간다:
 *     · 배경 그라디언트 — 위는 흰색(인트로 하단과 연결) → 아래는 크림(--tr-paper).
 *       아래 .tr_ext 배경이 --tr-paper 라 다음 섹션까지 경계 없이 이어진다.
 *     · ::before  — 세이지 그린 + 골드의 넓고 옅은 라디얼 2개(브랜드 색). 도면을 감싸는 공기감.
 *     · ::after   — 도면 뒤 골드 글로우(기존 유지, 살짝 넓힘).
 *   ⚠ 반복 패턴(격자·도트·스트라이프)을 다시 깔지 말 것. 도면 자체가 선 밀도가 높다. */
.tr_floor {
	position: relative;
	padding: 76px 0 72px;
	background: linear-gradient(180deg,
		#fff 0%,
		#FFFEFC 38%,
		var(--tr-paper) 72%,
		var(--tr-paper) 100%);
	overflow: hidden;
}
/* 배경 조형 ① 브랜드 색 소프트 라이트 — 선이 아니라 '빛'으로 면을 채운다.
   좌하단 세이지 그린 / 우상단 골드로 대각 균형을 잡고, 상단은 흰빛으로 눌러
   위 인트로 섹션에서 넘어오는 흰 면과 자연스럽게 물린다. */
.tr_floor::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 60% at 50% 0%,   rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 64%),
		radial-gradient(64% 52% at 14% 78%,   rgba(59,88,67,.085)   0%, rgba(59,88,67,0)   100%),
		radial-gradient(58% 46% at 88% 26%,   rgba(194,168,120,.11) 0%, rgba(194,168,120,0) 100%);
	/* ⚠ 바닥 페이드 필수 — 없으면 라이트가 섹션 하단에서 잘려 아래 .tr_ext 와의 경계에
	   옅은 가로선이 남는다(2026-08-21 하단 여백 72px 을 주면서 드러났다). */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,0) 100%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,0) 100%);
}
/* 배경 조형 ② 도면 뒤 골드 글로우 — 도면이 배경에서 살짝 떠오르게만 */
.tr_floor::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -2%;
	width: min(1280px, 96vw);
	height: 780px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(194,168,120,.15) 0%, rgba(194,168,120,0) 74%);
}
.tr_floor > .tr_inner { position: relative; z-index: 1; }
.tr_floor__head { text-align: center; margin: 0 0 44px; }
/* 헤더에서 도면으로 시선을 내리는 골드 세로선 */
.tr_floor__head::after {
	content: '';
	display: block;
	width: 1px;
	height: 46px;
	margin: 24px auto 0;
	background: linear-gradient(180deg, var(--tr-gold) 0%, rgba(194,168,120,0) 100%);
}

/* 도면 — 배경 조형 위에 그대로 놓는다.
 * 크기는 2026-08-20 "살짝만 줄여 달라"로 1120 → 1010px.
 * ⚠ 같은 날 3차 지시로 **액자(모서리 브래킷)·마우스 인터랙션(틸트·스포트라이트)을 제거**했다.
 *   배경과 자연스럽게 이어지는 게 우선이라 테두리·그림자·hover 효과를 두지 않는다. */
.tr_floor__stage {
	position: relative;
	max-width: 1010px;
	margin: 0 auto;
}
/* =========================================================================
 * 도면 + 층 설명 — 왼쪽 텍스트 열 / 오른쪽 도면 (2026-09-04 2차 사용자 지시)
 *
 *   새 도면 floor_map3.png(771x821) 에는 **글자가 하나도 없다**. 그래서 층 이름과
 *   설명을 전부 HTML 텍스트로 둔다(번역판에서 각 언어로 나온다).
 *
 *   ⚠ 예전처럼 도면 **위에 겹쳐** 놓지 않는다 — 알파를 훑어 보니 라벨 크기 창의
 *     최소 겹침이 3F 0.1% / B1 8.6% 로, B1 쪽은 어디에 놓아도 그림을 덮는다
 *     (앞 도면 floor_map.png 는 왼쪽이 통째로 비어 있어 겹침 0~1.2% 였다).
 *     그래서 절대배치를 걷고 2열 그리드로 나란히 놓는다.
 *   ⚠ 두 설명 블록의 세로 위치는 justify-content:space-around 가 잡는다.
 *     아이템 2개면 각각 높이의 25% / 75% 지점에 오는데, 도면의 3F 판 중심(y≈27%)
 *     B1 판 중심(y≈72%) 과 거의 맞물린다. 값을 손으로 박지 말 것 — 도면이 바뀌어도
 *     비율이 따라간다.
 * ========================================================================= */
.tr_floor__map {
	position: relative;
	display: grid;
	/* 왼쪽 열 폭 — 2026-09-04 글자를 키우면서 30% → 33%.
	   "줄기세포 & 프리미엄 패키지 시술"(가장 긴 줄)이 한 줄로 떨어지는 최소 폭이다. */
	grid-template-columns: minmax(250px, 33%) 1fr;
	column-gap: 40px;
	align-items: stretch;
	margin: 0;
}
.tr_floor__map img { display: block; width: 100%; height: auto; }
.tr_floor__legend {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 30px;
	padding: 8px 0;
}
/* 층 설명 — 카드(테두리·그림자)로 감싸지 않는다. 도면 옆에 그냥 조판된 텍스트로 둬야
   "배경과 자연스럽게" 라는 이 섹션의 방침(위 배경 조형 주석 참조)과 맞는다. */
.tr_floor__tag-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--tr-line);
}
.tr_floor__tag-no {
	font-family: 'Cormorant Garamond', serif;
	font-variant-numeric: lining-nums;
	font-weight: 700;
	/* 2026-09-04 사용자 지시로 한 단계 키웠다(32 → 38px).
	   ⚠ 히어로 타이틀 40px(--tr-t-h1) 이 이 페이지 상한이다 — 그 위로 올리지 말 것. */
	font-size: 38px;
	line-height: 1;
	letter-spacing: .5px;
	color: var(--tr-green-2);
}
.tr_floor__tag-name {
	font-weight: 700;
	font-size: 25px;      /* 2026-09-04 사용자 지시 (21 → 25px) */
	letter-spacing: -.5px;
	color: var(--tr-ink);
}
.tr_floor__tag-list {
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}
/* 2026-09-04 사용자 지시 — "더 크고 굵게". 15.5px/400·.68 → 17.5px/500·.82.
   도면 옆 설명이 캡션처럼 묻히던 걸 본문 굵기까지 끌어올린 것이다. */
.tr_floor__tag-list li {
	position: relative;
	padding-left: 15px;
	font-size: 17.5px;
	font-weight: 500;
	line-height: 1.72;
	color: rgba(28,30,26,.82);
	word-break: keep-all;
}
.tr_floor__tag-list li + li { margin-top: 6px; }
.tr_floor__tag-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .72em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--tr-gold);
}

/* ※ 아래 .tr_floor__list / __item / __no / __name / __txt 규칙은 옛 카드용이다(마크업 없음).
 *   층 구성을 다시 카드로 되돌릴 때를 위해 남겨 둔다. */
.tr_floor__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
/* 2026-08-14 — 층이 2개(3F VIP / B1 글로벌)로 줄었다. 3열 그대로면 오른쪽 한 칸이 빈다.
   ⚠ 층이 다시 3개가 되면 이 클래스를 마크업에서 떼면 된다(위 기본 규칙이 3열이다). */
.tr_floor__list--two { grid-template-columns: repeat(2, 1fr); }
.tr_floor__item {
	padding: 34px 30px 32px;
	background: #fff;
	border: 1px solid var(--tr-line);
	border-radius: 12px;
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
}
.tr_floor__item:hover {
	transform: translateY(-4px);
	border-color: rgba(59,88,67,.28);
	box-shadow: 0 22px 44px rgba(28,30,26,.09);
}
.tr_floor__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(59,88,67,.08);
	font-family: 'Cormorant Garamond', serif;
	font-variant-numeric: lining-nums;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.6px;
	color: var(--tr-green-2);
}
.tr_floor__name {
	display: block;
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--tr-t-card);
	letter-spacing: -.6px;
	color: var(--tr-ink);
}
.tr_floor__txt {
	margin: 10px 0 0;
	font-size: var(--tr-t-txt);
	line-height: 1.78;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}

/* =========================================================================
 * 4. 병원 외부 (2026-08-13 신설)
 *    카드·그리드·라이트박스는 아래 공간 갤러리와 같은 규칙을 그대로 쓴다(.tr_grid / .tr_card).
 *    ⚠ scroll-margin-top 은 메인에서 /brand/tour#exterior 로 들어올 때를 위한 것이다.
 *      고정 헤더(72px) 아래로 섹션 제목이 가려지지 않게 여유를 둔다. 헤더 높이를 바꾸면 함께 조정할 것.
 * ========================================================================= */
.tr_ext {
	padding: 96px 0 100px;
	background: var(--tr-paper);
	scroll-margin-top: 92px;
}

/* =========================================================================
 * 5. 공간 갤러리 — 매거진(벤토) 그리드 + 라이트박스
 *    ※ 오시는 길 페이지의 원내 둘러보기와 같은 사진·같은 조작 방식
 * ========================================================================= */
.tr_gallery { padding: 96px 0 104px; background: #fff; }
.tr_gallery__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 44px;
}
.tr_gallery__hint {
	margin: 0;
	font-size: 15px;
	color: rgba(28,30,26,.48);
}
/* ⚠ 3열 × 사진 6장 벤토 — 와이드(2칸) 카드를 정확히 3개 두어 9칸을 꽉 채운다.
 *   와이드가 1개면 총 7칸이 되어 마지막 줄에 사진 한 장만 남고 두 칸이 비어 보인다(2026-08-03 수정).
 *   사진 장수를 바꿀 때는 [칸 수 = 일반 + 와이드×2] 가 3의 배수가 되도록 와이드 개수를 맞출 것.
 *   행 높이는 grid-auto-rows 로 고정한다 — 카드마다 aspect-ratio 를 주면 같은 줄에서
 *   와이드(납작)와 일반(정사각)의 높이가 어긋나 이미지가 늘어난다. */
.tr_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 300px;
	gap: 20px;
}
/* 와이드 카드 — 가로 2칸. 라운지·시술실·한방 진료실처럼 넓이가 드러나는 컷에 준다 */
.tr_card {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	border-radius: 8px;          /* 이미지 박스 radius 8px 규칙 */
	overflow: hidden;
}
.tr_card--wide { grid-column: span 2; }
.tr_card__media {
	display: block;
	position: relative;
	height: 100%;               /* 행 높이(grid-auto-rows)를 그대로 채운다 */
	overflow: hidden;
	background: #ECE7DE;
}
.tr_card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.tr_card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,14,10,0) 44%, rgba(10,14,10,.62) 100%);
	pointer-events: none;
	transition: opacity .38s ease;
}
.tr_card__cap {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	z-index: 1;
}
.tr_card__no {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: #E0C99B;
}
.tr_card__name {
	display: block;
	margin: 6px 0 0;
	font-weight: 700;
	font-size: var(--tr-t-card);
	letter-spacing: -.5px;
	color: #fff;
}
.tr_card__sub {
	display: block;
	margin: 5px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255,255,255,.78);
	word-break: keep-all;
}
.tr_card:hover .tr_card__media img { transform: scale(1.05); }
.tr_card:focus-visible { outline: 2px solid var(--tr-gold); outline-offset: 3px; }
/* 캡션 없는 그리드(공간 둘러보기, 2026-08-20) — 사진만 보여 준다.
 * 어두운 스크림(::after)은 캡션 가독성용이라 캡션이 없으면 사진만 어둡게 만든다 → 끈다. */
.tr_grid--plain .tr_card::after { display: none; }

/* 라이트박스 — 오시는 길 페이지와 동일 구조 */
.tr_lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(12,14,12,.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tr_lb.is-open { display: flex; }
.tr_lb__stage { margin: 0; max-width: 1100px; width: 100%; text-align: center; }
.tr_lb__img {
	max-width: 100%;
	max-height: 72vh;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}
.tr_lb__cap { margin: 18px 0 0; color: #fff; }
.tr_lb__cap b { display: block; font-size: 20px; font-weight: 700; }
.tr_lb__cap span { display: block; margin: 6px 0 0; font-size: 15px; color: rgba(255,255,255,.7); }
.tr_lb__close,
.tr_lb__nav {
	position: absolute;
	border: 0;
	background: rgba(255,255,255,.12);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	font-size: 20px;
	line-height: 1;
	transition: background .2s;
}
.tr_lb__close:hover,
.tr_lb__nav:hover { background: rgba(255,255,255,.24); }
.tr_lb__close { top: 26px; right: 26px; }
.tr_lb__nav--prev { left: 26px; top: 50%; transform: translateY(-50%); }
.tr_lb__nav--next { right: 26px; top: 50%; transform: translateY(-50%); }

/* =========================================================================
 * 5. 이용 안내 — 편의 사항
 * ========================================================================= */
.tr_guide { padding: 92px 0 96px; background: var(--tr-cream); }
.tr_guide__head { text-align: center; margin: 0 0 48px; }
.tr_guide__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.tr_guide__item {
	padding: 30px 26px 28px;
	background: #fff;
	border: 1px solid var(--tr-line);
	border-radius: 12px;
	text-align: center;
}
/* 2026-09-04 사용자 지시 — 이용 안내 4칸의 **글자를 키우고 굵게** 해 가독성을 올렸다.
 * 제목 19 → 21px, 설명 15 → 16.5px / 두께 400 → 500 / 색 .60 → .74 (본문이 너무 흐렸다).
 * 좁은 화면(768px 이하)에서는 2×2 라 칸이 좁아지므로 아래 미디어쿼리에서 따로 줄인다. */
.tr_guide__name {
	display: block;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.4px;
	color: var(--tr-ink);
}
.tr_guide__txt {
	margin: 11px 0 0;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.68;
	color: rgba(28,30,26,.74);
	word-break: keep-all;
}

/* =========================================================================
 * 6. 클로징
 * ========================================================================= */
.tr_closing {
	padding: 92px 0 96px;
	background: var(--tr-green);
	text-align: center;
}
.tr_closing__title {
	margin: 0;
	font-weight: 700;
	font-size: var(--tr-t-h2);
	line-height: 1.4;
	letter-spacing: -.6px;
	color: #F4F2EE;
	word-break: keep-all;
}
.tr_closing__desc {
	margin: 20px 0 0;
	font-size: var(--tr-t-body);
	line-height: 1.85;
	color: rgba(244,242,238,.74);
	word-break: keep-all;
}
.tr_closing__btns { margin: 34px 0 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ⚠ 셀렉터를 반드시 .tour 로 한 단계 감쌀 것 —
 *   basic.css 의 `a:link { color: inherit }` 특이도가 (0,1,1) 이라 클래스 하나(.tr_btn, 0,1,0)로는
 *   글자색을 이기지 못한다. 그러면 버튼 글자가 본문 잉크색(#1C1E1A)을 상속해
 *   딥그린 배경 위에서 보이지 않는다(2026-08-03 실제 발생). */
.tour .tr_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 176px;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tour .tr_btn--gold { background: var(--tr-gold); color: #23301F; border: 1px solid var(--tr-gold); }
.tour .tr_btn--gold:hover { background: #d3bb90; }
/* 아웃라인 버튼 — 배경이 없으므로 글자색과 테두리가 유일한 단서다. 둘 다 충분히 밝게 둘 것 */
.tour .tr_btn--line { background: rgba(255,255,255,.06); color: #F4F2EE; border: 1px solid rgba(244,242,238,.62); }
.tour .tr_btn--line:hover { background: rgba(255,255,255,.14); border-color: #F4F2EE; }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1240px) {
	.tour .tr_inner { padding: 0 28px; }
	.tr_gallery__head { margin-bottom: 36px; }
}

@media all and (max-width: 1024px) {
	.tour { --tr-t-h1: 32px; --tr-t-h2: 28px; --tr-t-card: 20px; --tr-t-lead: 18px; --tr-t-body: 17px; }
	.tr_hero { padding: 92px 28px 96px; }
	.tr_intro, .tr_floor, .tr_ext, .tr_gallery, .tr_guide, .tr_closing { padding: 72px 0 76px; }
	.tr_floor { padding-bottom: 56px; }     /* 도면 밑 여백(2026-08-21 사용자 지시) */
	/* 2열 — 카드 형태라 옛 '표' 시절의 구분선 보정(nth-child border)은 필요 없다 */
	/* 2열이 되면 정사각형 카드가 꽤 커진다 — 비율은 유지하되 숫자만 살짝 줄인다 */
	.tr_stat { grid-template-columns: 1fr 1fr; gap: 14px; }
	.tr_stat__num { font-size: 40px; }
	.tr_floor__list { grid-template-columns: 1fr 1fr; }
	/* 2열로 나란히 두면 도면이 570px 밑으로 내려가 층 구분이 뭉갠다 —
	   **도면을 위로 올리고 설명 두 블록을 그 아래 나란히** 놓는다. */
	/* ⚠ 마크업 순서는 legend → img 다(데스크톱에서 설명이 왼쪽 열이라 그렇다).
	   1열이 되면 그대로 두면 설명이 도면 위로 올라간다 — 행을 명시해 도면을 먼저 세운다. */
	.tr_floor__map { grid-template-columns: 1fr; row-gap: 26px; }
	.tr_floor__map img { grid-row: 1; }
	.tr_floor__legend {
		grid-row: 2;
		flex-direction: row;
		justify-content: flex-start;
		gap: 28px;
		padding: 0;
	}
	.tr_floor__legend > * { flex: 1 1 0; }
	.tr_guide__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 와이드를 해제한다 — 유지하면 와이드가 한 줄을 통째로 먹어 6장이 3+1+1+1 로 어긋난다.
	   균등 2열이면 6장이 정확히 3행으로 떨어진다. */
	.tr_grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
	.tr_card--wide { grid-column: span 1; }
}

@media all and (max-width: 768px) {
	.tour { --tr-t-h1: 27px; --tr-t-h2: 24px; --tr-t-body: 16px; --tr-t-txt: 15px; }
	.tour .tr_inner { padding: 0 20px; }
	.tour .tr_eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.tr_hero { padding: 68px 20px 72px; }
	.tr_hero__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.tr_hero__desc br { display: none; }
	.tr_intro, .tr_floor, .tr_ext, .tr_gallery, .tr_guide, .tr_closing { padding: 56px 0 60px; }
	.tr_floor { padding-bottom: 44px; }
	.tr_floor__head { margin-bottom: 28px; }
	.tr_floor__head::after { height: 32px; margin-top: 18px; }
	/* 좁은 화면에서는 카드 한 변이 160px 안팎이다 — 정사각형은 유지하고 안쪽만 줄인다 */
	.tr_stat { margin-top: 40px; }
	.tr_stat__item { padding: 16px 10px; border-radius: 14px; }
	.tr_stat__num { font-size: 30px; letter-spacing: -.8px; }
	.tr_stat__num em { font-size: 15px; margin-left: 3px; }
	.tr_stat__label { font-size: 13.5px; line-height: 1.45; }
	.tr_stat__label::before { width: 20px; margin: 11px auto 10px; }
	.tr_floor__list { grid-template-columns: 1fr; }
	/* 두 칸으로도 좁다 — 층 설명을 1열로 쌓는다 */
	.tr_floor__map { row-gap: 20px; }
	.tr_floor__legend { flex-direction: column; gap: 22px; }
	.tr_floor__tag-head { padding-bottom: 10px; }
	/* 2026-09-04 "더 크고 굵게" 지시를 좁은 화면에도 같은 폭으로 반영(31/21/16.5) */
	.tr_floor__tag-no { font-size: 31px; }
	.tr_floor__tag-name { font-size: 21px; }
	.tr_floor__tag-list { margin-top: 12px; }
	.tr_floor__tag-list li { font-size: 16.5px; line-height: 1.7; }
	/* 2026-09-02 사용자 지시 — 좁은 화면에서도 **2열(2×2)** 을 유지한다.
	   1열로 떨어뜨리면 카드 4장이 세로로만 900px 넘게 늘어져 훑기 어렵다.
	   ⚠ 1fr 1열로 되돌리지 말 것. 대신 칸이 좁아지므로 안여백·글자를 함께 줄인다. */
	.tr_guide__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tr_guide__item { padding: 22px 14px 20px; border-radius: 10px; }
	/* 2026-09-04 — 데스크톱을 키운 만큼 좁은 화면도 한 단계 올린다(칸이 2×2 라 여기까지가 한계) */
	.tr_guide__name { font-size: 17px; letter-spacing: -.3px; }
	.tr_guide__txt { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
	/* 갤러리: 2026-08-12 — 1열 4:3 세로 나열은 6장이 1,600px 을 넘었다(사용자: "너무 세로로 길다").
	 * → **가로 스와이프**. 사진 크기(4:3)는 그대로 두고 배치만 옆으로 돌린다.
	 * ⚠ /brand/location 의 "원내 둘러보기"(page_location.css .loc_tour__grid)와 같은 사진·같은 조작이다.
	 *   한쪽만 고치지 말 것. 음수 마진(-20px)은 .tr_inner 의 좌우 패딩과 짝이다. */
	.tr_grid {
		display: flex;
		grid-template-columns: none;
		grid-auto-rows: auto;
		gap: 12px;
		margin: 0 -20px;
		padding: 0 20px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		-webkit-overflow-scrolling: touch;
	}
	.tr_grid::-webkit-scrollbar { height: 3px; }
	.tr_grid::-webkit-scrollbar-track { background: rgba(29,42,32,.08); border-radius: 999px; }
	.tr_grid::-webkit-scrollbar-thumb { background: rgba(29,42,32,.32); border-radius: 999px; }
	.tr_card,
	.tr_card--wide { flex: 0 0 82%; grid-column: auto; scroll-snap-align: center; }
	.tr_card__media { height: auto; aspect-ratio: 4 / 3; }
	/* 밝은 실내 컷에서 흰 캡션이 묻히지 않도록 스크림을 더 넓고 진하게(데스크톱 44%/.62) */
	.tr_card::after { background: linear-gradient(180deg, rgba(10,14,10,0) 26%, rgba(10,14,10,.38) 58%, rgba(10,14,10,.84) 100%); }
	/* 스크림 위에 글자 그림자까지 — 라운지처럼 하단이 밝은 컷에서 설명 줄이 흐려진다 */
	.tr_card__cap { left: 18px; right: 18px; bottom: 16px; text-shadow: 0 1px 8px rgba(8,14,9,.72); }
	.tr_gallery__head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.tr_lb { padding: 20px; }
	.tr_lb__close { top: 12px; right: 12px; }
	.tr_lb__nav--prev { left: 8px; }
	.tr_lb__nav--next { right: 8px; }
	.tour .tr_btn { min-width: 0; flex: 1 1 100%; }   /* 기본 규칙(.tour .tr_btn)과 특이도를 맞춰야 덮인다 */
}

@media (prefers-reduced-motion: reduce) {
	.tr_card__media img,
	.tr_floor__item { transition: none; }
	.tr_card:hover .tr_card__media img { transform: none; }
	.tr_floor__item:hover { transform: none; }
}