@charset "utf-8";
/* =========================================================================
 * 브랜드스토리 > 진료시간 & 오시는 길 (www/brand/location.jsp 전용)
 * Figma node 593:5023 (1920w light)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 *
 * 구성 : 히어로 → 지도(+주소 카드) → 교통편 안내 → 진료시간 안내 → 원내 둘러보기(+라이트박스)
 *        ※ 간편예약/병원정보는 공통 /include/footer.jsp 담당(중복 작성 금지)
 * 선택자는 모두 .loc 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── Figma 대비 의도적으로 조정한 값 (사용자 요청: 색·폰트가 부자연스러움) ──
 * ① 진료시간 섹션 배경: #2E4A34 → #123F1E 그라디언트를 폐기.
 *    끝색 #123F1E 가 브랜드 팔레트에 없는 고채도 초록이라 위쪽 크림 섹션·아래 흰 섹션과 붙으면
 *    얼룩처럼 보였다. → 브랜드 그린(#3B5843, 히어로·푸터와 동일 계열) 한 색을 명도만 낮추는
 *    톤온톤(#3E5C46 → #2C4632)으로 교체하고, 상단에 아주 옅은 라디얼로 평면감만 덜어냈다.
 * ② 골드 포인트: #C1A27A(고채도 살구) → #C2A878 / #CDBF9C 로 통일(히어로 아이브로우와 같은 계열).
 *    "야간 진료" 배지는 면 채움 대신 투명 배경 + 골드 보더로 낮춰 혼자 튀지 않게 했다.
 * ③ 흰 텍스트 투명도가 .45/.55/.6/.75 로 흩어져 위계가 흐렸다 → 주요/보조/흐림 3단계로 정리.
 * ④ 폰트 크기: 히어로 타이틀(38px)이 사이트 상한이라는 규칙에 맞춰 섹션 타이틀을 34px 로 통일
 *    (Figma 원본은 교통편 34 / 진료시간 44 / 원내 42 로 제각각이었다).
 *    전화번호 40 → 32, 교통편 카드 제목 26 → 22, 원내 카드명 22 → 20.
 * ========================================================================= */

/* headHtml·main_hero.css 에 없는 서체만 이 페이지에서 로드 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.loc {
	--lc-green:      #3B5843;   /* 브랜드 그린 (히어로·푸터와 동일 계열) */
	--lc-green-mid:  #35513D;
	--lc-green-deep: #2C4632;
	--lc-ink:        #1D2A20;   /* 본문 진한 텍스트 */
	--lc-body:       #5B615A;
	--lc-gold:       #C2A878;   /* 포인트 골드 */
	--lc-gold-lite:  #CDBF9C;   /* 다크 배경 위 아이브로우 */
	--lc-cream:      #FBF9F2;
	--lc-line:       #E7E2D8;
	--lc-paper:      #FFFDF8;   /* 다크 배경 위 주요 텍스트 */

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

/* ── 섹션 공통 타이포 (세 섹션이 같은 규격을 공유한다) ───────────────────── */
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일).
   ⚠ Noto Serif KR 600/13px 였던 것을 2026-08-03 통일 — 되돌리지 말 것. */
.loc .loc_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.44;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #4A6A51;
}
.loc .loc_eyebrow--light { color: var(--lc-gold-lite); }

.loc .loc_title {
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 34px;          /* 히어로 38px 상한 아래로 전 섹션 통일 */
	line-height: 1.28;
	letter-spacing: -1.1px;
	color: var(--lc-ink);
}
.loc .loc_title--light { color: var(--lc-paper); }

.loc .loc_bar {
	display: block;
	width: 46px;
	height: 1px;
	margin: 22px 0 0;
	background: rgba(29,42,32,.28);
}
.loc .loc_bar--gold { background: var(--lc-gold); opacity: .75; }

/* =========================================================================
 * 1. 히어로 — 브랜드 그린 단색 위 중앙 카피 (Figma 593:5024)
 * ========================================================================= */
.loc_hero {
	position: relative;
	padding: 92px 40px 84px;
	text-align: center;
	background: linear-gradient(180deg, #3E5C46 0%, var(--lc-green) 100%);
	overflow: hidden;
}
/* 단색 면이 넓어 평평해 보이는 것만 아주 옅은 라디얼로 덜어낸다(색상은 동일 계열 유지) */
.loc_hero::before {
	content: '';
	position: absolute;
	inset: -40% 20% auto;
	height: 180%;
	background: radial-gradient(closest-side ellipse, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}
.loc_hero__inner { position: relative; z-index: 1; }
.loc_hero__label {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.21;
	letter-spacing: 4.5px;
	text-transform: uppercase;
	color: var(--lc-gold-lite);
}
.loc_hero__title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 38px;          /* = 사이트 폰트 상한 */
	line-height: 1.2;
	letter-spacing: -.4px;
	color: #fff;
}

/* =========================================================================
 * 2. 지도 + 주소 카드 (Figma 593:5031 / 593:5080)
 * ========================================================================= */
.loc_map {
	position: relative;
	background: linear-gradient(180deg, var(--lc-cream) 0%, var(--lc-cream) 100%);
}
.loc_map__canvas {
	position: relative;
	/* 2026-08-20 사용자 지시("지도가 잘 보이지 않음") — 28.8vw/554px(Figma 1920×554) 에서 키웠다.
	   폴백 이미지 map.jpg 는 2200×998(2.2:1) 이라 캔버스가 낮을수록 좌우가 많이 잘린다. */
	height: 38vw;
	min-height: 420px;
	max-height: 730px;
	overflow: hidden;
	background: #E9EAE4;
}
.loc_map__canvas img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 46%;
	display: block;
}
/* 실지도(네이버) 레이어 — 인증 성공 시에만 .is-live 가 붙어 이미지를 대체한다 */
.loc_map__view {
	position: absolute;
	inset: 0;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity .4s ease;
}
/* 카카오맵 '지도 퍼가기'(roughmap) — 영문판이 쓴다(2026-09-08).
   ⚠ roughmap 은 스크립트가 만든 마크업이라 인라인 style(고정 px)을 들고 나온다 →
     컨테이너를 채우려면 !important 로 눌러야 한다. 지우면 좌우에 회색 여백이 남는다.
   ⚠ .wrap_map 이 실제 지도 이미지 칸이고, 그 아래 정보 바(.map_border)는 높이를 갖는다.
     지도 이미지가 카드 뒤로 잘리지 않도록 정보 바만큼 뺀 높이를 주지 않고 전체를 채운 뒤
     하단 그라데이션(::after)이 경계를 덮는 방식으로 둔다. */
.loc_map__canvas.is-kakao .root_daum_roughmap { width: 100% !important; height: 100% !important; }
.loc_map__canvas.is-kakao .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; }
/* ⚠ 위 .loc_map__canvas img(폴백 지도 이미지용 cover 규칙)가 **지도 타일·마커까지** 잡는다 →
   is-kakao 에서는 반드시 되돌린다. 그러지 않으면 타일이 늘어나 지도가 뭉개진다. */
.loc_map__canvas.is-kakao img { width: auto; height: auto; object-fit: fill; }
.loc_map__canvas.is-live .loc_map__view { visibility: visible; opacity: 1; }
.loc_map__canvas.is-live .loc_map__fallback,
.loc_map__canvas.is-live::after { display: none; }
/* 주소 카드가 지도 위로 올라오므로 하단만 살짝 눌러 경계를 정리 */
.loc_map__canvas::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, rgba(251,249,242,0) 0%, rgba(251,249,242,.55) 100%);
	pointer-events: none;
}
/* 지도앱 바로가기 3종 — 지도 위 상단 **가운데**(2026-08-20 사용자 지시).
 * 이전의 우상단 "지도 크게 보기" 텍스트 링크를 대체한다(눈에 띄지 않는다는 지적).
 * ⚠ 하단에 두면 -74px 로 올라오는 .loc_addr 주소 카드와 겹친다 — 상단 배치를 유지할 것. */
/* 2026-08-20 2차(사용자 지시) — "더 크게 + 지도별 포인트 컬러를 배경색으로".
 * 흰 알약 트레이 안에 담던 방식을 버리고 **버튼 자체를 브랜드 색으로 채운다**.
 * 트레이(배경·blur)를 되살리면 컬러 버튼이 두 겹으로 보여 지저분해진다. */
.loc_map__links {
	position: absolute;
	left: 50%;
	top: 26px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
}
.loc .loc_map__link,
.loc .loc_map__link:link,
.loc .loc_map__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px 14px 18px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
	white-space: nowrap;
	color: #fff;
	box-shadow: 0 8px 22px rgba(29,42,32,.26);
	transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.loc .loc_map__link:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(29,42,32,.32);
}
/* 아이콘은 버튼 색 위에 얹은 흰 원 — 심볼 색이 곧 그 지도앱의 브랜드 컬러다 */
.loc_map__ico {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}
.loc_map__ico svg { display: block; }
.loc .loc_map__link--naver  { background: #03C75A; }
.loc .loc_map__link--kakao  { background: #FEE500; color: #3A1D1D; }
.loc .loc_map__link--google { background: #4285F4; }
.loc_map__link--naver  .loc_map__ico { color: #03C75A; }
.loc_map__link--kakao  .loc_map__ico { color: #3A1D1D; }
.loc_map__link--google .loc_map__ico { color: #4285F4; }

.loc_addr {
	position: relative;
	z-index: 3;
	max-width: 1240px;
	margin: -74px auto 0;
	padding: 34px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	border-radius: 12px;
	background: linear-gradient(90deg, #F5F4F0 0%, var(--lc-cream) 100%);
	box-shadow: 0 32px 60px rgba(29,42,32,.10);
	overflow: hidden;
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
}
/* hover: 카드가 살짝 떠오르고 좌측 골드 액센트가 위→아래로 차오른다 */
.loc_addr__accent {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, var(--lc-gold) 0%, var(--lc-green) 100%);
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.loc_addr:hover {
	transform: translateY(-5px);
	box-shadow: 0 38px 70px rgba(29,42,32,.16);
}
.loc_addr:hover .loc_addr__accent { transform: scaleY(1); }
.loc_addr:hover .loc_addr__label  { color: var(--lc-green); letter-spacing: 4.4px; }
.loc_addr:hover .loc_addr__btn--copy { border-color: rgba(29,42,32,.42); }
.loc_addr__label {
	transition: color .3s ease, letter-spacing .3s ease;
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.8px;
	text-transform: uppercase;
	color: rgba(46,74,52,.8);
}
.loc_addr__text {
	margin: 10px 0 0;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.45;
	letter-spacing: -.6px;
	color: var(--lc-ink);
	word-break: keep-all;
}
/* 택시 안내 (영문판 전용, 2026-09-08) — 기사에게 화면을 그대로 보여 주는 문장이라
   한국어 줄을 크고 진하게 둔다. 인셋 카드로 감싸 주소 본문과 역할을 구분한다. */
.loc_addr__taxi {
	margin-top: 16px;
	padding: 14px 18px;
	background: rgba(46,74,52,.055);
	border-left: 2px solid var(--lc-gold);
	border-radius: 8px;
}
.loc_addr__taxi-label {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: -.2px;
	color: rgba(29,42,32,.72);
}
.loc_addr__taxi-ko {
	margin: 6px 0 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -.4px;
	color: var(--lc-ink);
	word-break: keep-all;
}

.loc_addr__btns { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.loc_addr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 108px;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.loc_addr__btn--copy {
	border: 1px solid rgba(29,42,32,.24);
	background: transparent;
	color: var(--lc-ink);
	font-family: inherit;
}
.loc_addr__btn--copy:hover {
	border-color: var(--lc-green);
	background: rgba(59,88,67,.08);
	color: var(--lc-green);
}
/* ⚠ <a> 라 전역 CSS(board.css)의 a 색상이 이긴다 → 상태별로 명시해야 흰 글자가 나온다 */
.loc .loc_addr__btn--go,
.loc .loc_addr__btn--go:link,
.loc .loc_addr__btn--go:visited {
	border: 1px solid #2F4A37;
	background: #2F4A37;         /* 흰 글자 대비 확보용으로 카드 배경 대비 한 톤 더 진하게 */
	color: #FFFFFF;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .2px;
}
.loc .loc_addr__btn--go:hover,
.loc .loc_addr__btn--go:active {
	background: #243B2B;
	border-color: #243B2B;
	color: #FFFFFF;
	box-shadow: 0 8px 18px rgba(29,42,32,.28);
}

/* =========================================================================
 * 3. 교통편 안내 (Figma 593:5040)
 * ========================================================================= */
.loc_way {
	padding: 96px 0 104px;
	background: var(--lc-cream);
}
.loc_way__grid {
	display: grid;
	grid-template-columns: 292px 1fr;
	gap: 0 72px;
	align-items: start;
}
.loc_way__desc {
	margin: 26px 0 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.85;
	color: rgba(29,42,32,.62);
}
.loc_way__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.loc_way__item {
	padding: 6px 0 34px 40px;
	border-bottom: 1px solid rgba(29,42,32,.12);
	border-left: 1px solid rgba(29,42,32,.12);
}
.loc_way__item:nth-child(2n) { padding-left: 44px; }
.loc_way__item:nth-child(n+3) { padding-top: 34px; padding-bottom: 0; border-bottom: 0; }
.loc_way__num {
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: rgba(46,74,52,.7);
}
.loc_way__name {
	display: block;
	margin: 12px 0 0;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.32;
	letter-spacing: -.7px;
	color: var(--lc-ink);
	word-break: keep-all;
}
.loc_way__txt {
	margin: 12px 0 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(29,42,32,.62);
	word-break: keep-all;
}

/* =========================================================================
 * 4. 진료시간 안내 (Figma 593:5173)
 *    ★ 배경·포인트색·타이포를 Figma 대비 조정 — 파일 상단 주석 ①②③④ 참조
 * ========================================================================= */
.loc_hours {
	position: relative;
	padding: 96px 0 100px;
	background: linear-gradient(180deg, #3E5C46 0%, var(--lc-green-mid) 52%, var(--lc-green-deep) 100%);
	overflow: hidden;
}
.loc_hours::before {
	content: '';
	position: absolute;
	inset: -50% 12% auto;
	height: 150%;
	background: radial-gradient(closest-side ellipse, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}
.loc_hours__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(320px, 400px) 1fr;
	gap: 0 90px;
	align-items: center;
}
.loc_hours__desc {
	margin: 26px 0 0;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.85;
	color: rgba(255,253,248,.62);
	word-break: keep-all;
}
/* 예약 문의 — 배경에 묻히지 않게 좌측 골드 라인으로 블록을 분리하고 번호는 순백/굵게 */
.loc_hours__tel {
	position: relative;
	margin: 34px 0 0;
	padding: 2px 0 2px 18px;
}
.loc_hours__tel::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--lc-gold-lite) 0%, rgba(194,168,120,.35) 100%);
}
.loc_hours__tel-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2.4px;
	color: var(--lc-gold-lite);
}
/* ⚠ 전역 CSS(board.css 등)의 a 색상이 이기므로 링크 상태별로 명시한다 */
.loc .loc_hours__tel-num,
.loc .loc_hours__tel-num:link,
.loc .loc_hours__tel-num:visited {
	display: inline-block;
	margin: 8px 0 0;
	font-family: 'Noto Serif KR', serif;
	font-weight: 700;
	font-size: 34px;          /* Figma 40px → 상한(38) 아래로 */
	line-height: 1.3;
	letter-spacing: .5px;
	color: #FFFFFF;           /* 그린 배경 대비 확보 — 아이보리(#FFFDF8)보다 한 단계 밝게 */
	text-shadow: 0 1px 12px rgba(12,22,15,.35);
	transition: color .2s ease;
}
.loc .loc_hours__tel-num:hover,
.loc .loc_hours__tel-num:active { color: var(--lc-gold-lite); }

.loc_hours__table { margin: 0; }
.loc_hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 25px 0 24px;
	border-top: 1px solid rgba(255,253,248,.14);
}
.loc_hours__row:last-child { border-bottom: 1px solid rgba(255,253,248,.14); }
.loc_hours__row dt {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.loc_hours__day {
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -.35px;
	color: var(--lc-paper);
	white-space: nowrap;
}
.loc_hours__tag {
	font-weight: 300;
	font-size: 15px;
	line-height: 1.3;
	color: rgba(255,253,248,.42);
	white-space: nowrap;
}
/* 야간 진료 배지 — 면 채움(원본 #C1A27A) 대신 라인 배지로 낮춰 혼자 튀지 않게 */
.loc_hours__badge {
	padding: 6px 13px;
	border: 1px solid rgba(194,168,120,.55);
	border-radius: 999px;
	background: rgba(194,168,120,.13);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .4px;
	color: var(--lc-gold-lite);
	white-space: nowrap;
}
.loc_hours__time {
	margin: 0;
	font-family: 'Noto Serif KR', serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: .4px;
	color: var(--lc-paper);
	white-space: nowrap;
}
/* 점심시간·휴진은 보조 정보 → 한 단계 낮춘다 */
.loc_hours__row--sub .loc_hours__day,
.loc_hours__row--off .loc_hours__day { font-weight: 300; color: rgba(255,253,248,.6); }
.loc_hours__row--sub .loc_hours__time,
.loc_hours__row--off .loc_hours__time { font-weight: 400; color: rgba(255,253,248,.6); }
.loc_hours__row--off .loc_hours__time { letter-spacing: 1.6px; }

/* =========================================================================
 * 5. 원내 둘러보기 (Figma 593:5091)
 *    ★ Figma 는 균일 3×2 그리드 → 라운지를 와이드 카드로 둔 매거진 그리드 +
 *      hover 확대/설명 노출 + 클릭 시 라이트박스로 확장
 * ========================================================================= */
.loc_tour { padding: 96px 0 110px; background: #fff; }
.loc_tour__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 42px;
}
.loc_tour__desc {
	margin: 0;
	text-align: right;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(29,42,32,.55);
}
.loc_tour__hint {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	color: rgba(29,42,32,.38);
}

/* 매거진(벤토) 그리드 — 3열 3행, 라운지가 2×2 를 차지한다
 *   [ A A ][ B ]
 *   [ A A ][ C ]
 *   [ D ][ E ][ F ]
 * 6장이 9칸(4+1+1+3)을 정확히 채운다. 카드 높이는 행 높이가 결정 → card 는 height:100%. */
.loc_tour__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 228px 228px 272px;
	gap: 22px;
}
.loc_tour__card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 8px;          /* 이미지 박스 radius 규칙 */
	background: #EDEBE4;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: box-shadow .35s ease, transform .35s ease;
}
.loc_tour__card--wide { grid-column: span 2; grid-row: span 2; }
.loc_tour__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.loc_tour__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
/* 캡션 가독용 하단 스크림 */
.loc_tour__card::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 62%;
	background: linear-gradient(180deg, rgba(20,32,24,0) 0%, rgba(20,32,24,.74) 100%);
	transition: opacity .35s ease;
	pointer-events: none;
}
.loc_tour__cap {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	z-index: 2;
	display: block;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.loc_tour__no {
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: rgba(255,253,248,.75);
}
.loc_tour__name {
	display: block;
	margin: 6px 0 0;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	color: var(--lc-paper);
}
/* 설명 한 줄은 평소 숨기고 hover 시 펼친다(정보량은 늘리되 화면은 정돈되게) */
.loc_tour__sub {
	display: block;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255,253,248,.78);
	transition: max-height .4s ease, opacity .3s ease, margin .4s ease;
}
.loc_tour__zoom {
	position: absolute;
	right: 22px;
	top: 22px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,253,248,.9);
	opacity: 0;
	transform: scale(.86);
	transition: opacity .3s ease, transform .3s ease;
}
.loc_tour__zoom::before,
.loc_tour__zoom::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	background: var(--lc-ink);
	transform: translate(-50%, -50%);
}
.loc_tour__zoom::before { width: 13px; height: 1.5px; }
.loc_tour__zoom::after  { width: 1.5px; height: 13px; }

/* 캡션 없는 그리드(2026-08-20, 공간 이름 미확인) — 사진만 보여 준다.
 * 하단 스크림(::after)은 캡션 가독성용이라 캡션이 없으면 사진만 어둡게 만든다 → 끈다. */
.loc_tour__grid--plain .loc_tour__card::after { display: none; }

.loc_tour__card:hover,
.loc_tour__card:focus-visible { box-shadow: 0 18px 40px rgba(29,42,32,.18); }
.loc_tour__card:hover .loc_tour__media img,
.loc_tour__card:focus-visible .loc_tour__media img { transform: scale(1.055); }
.loc_tour__card:hover .loc_tour__sub,
.loc_tour__card:focus-visible .loc_tour__sub { max-height: 44px; margin-top: 8px; opacity: 1; }
.loc_tour__card:hover .loc_tour__zoom,
.loc_tour__card:focus-visible .loc_tour__zoom { opacity: 1; transform: scale(1); }

/* --- 라이트박스 --- */
.loc_lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 72px 90px;
	background: rgba(16,24,18,.93);
}
.loc_lb.is-open { display: flex; }
.loc_lb__stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.loc_lb__img {
	max-width: 100%;
	max-height: calc(100vh - 190px);
	border-radius: 8px;
	object-fit: contain;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.loc_lb__cap {
	margin: 20px 0 0;
	text-align: center;
	color: var(--lc-paper);
}
.loc_lb__no {
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-size: 11px;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: var(--lc-gold-lite);
}
.loc_lb__name {
	display: block;
	margin: 7px 0 0;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
}
.loc_lb__count {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
	letter-spacing: 1.4px;
	color: rgba(255,253,248,.5);
}
.loc_lb__close,
.loc_lb__nav {
	position: absolute;
	z-index: 2;
	border: 0;
	background: rgba(255,253,248,.1);
	cursor: pointer;
	transition: background .2s ease;
}
.loc_lb__close:hover,
.loc_lb__nav:hover { background: rgba(255,253,248,.22); }
.loc_lb__close {
	right: 28px;
	top: 28px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.loc_lb__close::before,
.loc_lb__close::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 17px;
	height: 1.5px;
	background: var(--lc-paper);
}
.loc_lb__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.loc_lb__close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.loc_lb__nav {
	top: 50%;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border-radius: 50%;
}
.loc_lb__nav--prev { left: 26px; }
.loc_lb__nav--next { right: 26px; }
.loc_lb__nav::before {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 11px;
	height: 11px;
	border-top: 1.5px solid var(--lc-paper);
	border-right: 1.5px solid var(--lc-paper);
}
.loc_lb__nav--prev::before { transform: translate(-40%,-50%) rotate(-135deg); }
.loc_lb__nav--next::before { transform: translate(-60%,-50%) rotate(45deg); }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.loc .loc_inner--wide { max-width: 1400px; }
	.loc_way__grid  { grid-template-columns: 260px 1fr; gap: 0 56px; }
	.loc_hours__grid { gap: 0 64px; }
	.loc_tour__grid { grid-template-rows: 204px 204px 244px; }
}

@media all and (max-width: 1200px) {
	.loc_hero { padding: 80px 32px 72px; }
	.loc_hero__title { font-size: 34px; }
	.loc .loc_title { font-size: 30px; }
	.loc_addr { margin-top: -60px; padding: 30px 32px; }
	.loc_addr__text { font-size: 20px; }
	.loc_way { padding: 84px 0 90px; }
	.loc_way__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.loc_way__item { padding-left: 28px; }
	.loc_way__item:nth-child(2n) { padding-left: 32px; }
	.loc_hours { padding: 84px 0 88px; }
	.loc_hours__grid { grid-template-columns: 1fr; gap: 44px 0; align-items: start; }
	.loc_hours__tel-num { font-size: 30px; }
	.loc_tour { padding: 84px 0 94px; }
	.loc_tour__grid { grid-template-rows: 184px 184px 222px; }
}

@media all and (max-width: 1024px) {
	.loc_map__canvas { height: 52vw; min-height: 360px; }
	.loc_tour__grid { grid-template-rows: 166px 166px 200px; gap: 18px; }
	.loc_lb { padding: 60px 20px; }
	.loc_lb__nav { width: 44px; height: 44px; margin-top: -22px; }
	.loc_lb__nav--prev { left: 12px; }
	.loc_lb__nav--next { right: 12px; }
}

@media all and (max-width: 768px) {
	.loc_hero { padding: 64px 24px 58px; }
	.loc_hero__label { font-size: 13px; letter-spacing: 3.6px; }
	.loc_hero__title { font-size: 27px; }
	.loc .loc_inner { padding: 0 24px; }
	.loc .loc_title { font-size: 25px; }
	.loc .loc_eyebrow { font-size: 14px; letter-spacing: 3.6px; }

	.loc_map__canvas { height: 68vw; min-height: 320px; }
	.loc_map__links { top: 16px; gap: 8px; }
	.loc .loc_map__link { padding: 10px 14px 10px 11px; gap: 6px; font-size: 13px; }
	.loc_map__ico { width: 20px; height: 20px; font-size: 11.5px; }
	.loc_map__ico svg { width: 14px; height: 14px; }
	.loc_addr {
		margin: -40px 24px 0;
		padding: 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.loc_addr__text { font-size: 18px; }
	.loc_addr__btns { width: 100%; }
	.loc_addr__btn { flex: 1 1 0; min-width: 0; height: 44px; }

	.loc_way { padding: 64px 0 68px; }
	.loc_way__desc { font-size: 15px; }
	/* 2026-09-02 사용자 지시 — 좁은 화면에서는 **카드 2×2**로 배치한다.
	   1열 + 구분선 목록은 네 항목이 세로로만 길게 늘어져 한눈에 훑기 어려웠다.
	   ⚠ 데스크톱의 구분선(border-left / border-bottom)은 2열 '표' 구조를 전제한 장치다 —
	     카드에서는 걷어내고 테두리 한 겹으로 대신한다. 1열 목록으로 되돌리지 말 것.
	   ⚠ 네 개의 선택자를 함께 덮어야 한다(기본 · 2n · n+3 · last-child) — 하나라도 빠뜨리면
	     데스크톱용 비대칭 패딩이 남아 카드 크기가 칸마다 달라진다. */
	.loc_way__list { grid-template-columns: 1fr 1fr; gap: 10px; }
	.loc_way__item,
	.loc_way__item:nth-child(2n),
	.loc_way__item:nth-child(n+3),
	.loc_way__item:last-child {
		padding: 20px 14px 18px;
		background: #fff;
		border: 1px solid rgba(29,42,32,.12);
		border-radius: 10px;
	}
	.loc_way__num { font-size: 11px; letter-spacing: 2.4px; }
	.loc_way__name { margin-top: 9px; font-size: 16px; line-height: 1.34; }
	.loc_way__txt { margin-top: 8px; font-size: 13px; line-height: 1.62; }

	.loc_hours { padding: 64px 0 68px; }
	.loc_hours__desc { font-size: 15px; }
	.loc_hours__tel-num { font-size: 27px; }
	.loc_hours__row { padding: 18px 0 17px; gap: 14px; }
	.loc_hours__row dt { gap: 10px; flex-wrap: wrap; }
	.loc_hours__day { font-size: 16px; }
	.loc_hours__tag { font-size: 13px; }
	.loc_hours__badge { padding: 5px 10px; font-size: 12px; }
	.loc_hours__time { font-size: 17px; }

	.loc_tour { padding: 64px 0 72px; }
	.loc_tour__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
	.loc_tour__desc { text-align: left; font-size: 15px; }
	/* 2026-08-12 — 벤토 그리드를 **가로 스와이프 갤러리**로 바꿨다(사용자 지시).
	 * 이전(2열 210px / 480 이하 1열 200px)의 문제 두 가지:
	 *   ① 6장이 세로로 쌓여 이 섹션만 1,260px — 아래 내용까지 한참 밀렸다.
	 *   ② 행 높이가 고정(200~210px)이라 세로가 긴 실내 컷이 위아래로 심하게 잘렸다.
	 * → 한 장씩 4:3 으로 온전히 보여 주고 옆으로 넘긴다. 사진 갤러리에는 이쪽이 관례다.
	 * ⚠ /brand/tour 의 "공간 둘러보기"(page_tour.css .tr_grid)와 **같은 사진·같은 조작**이다.
	 *   한쪽만 고치지 말 것 — 두 페이지의 모바일 동작이 갈린다.
	 * ⚠ 음수 마진(-24px)은 .loc_inner 의 좌우 패딩과 짝이다. 패딩을 바꾸면 여기도 같이 바꿀 것
	 *   (480 이하는 패딩이 18px 이라 아래 블록에서 다시 잡는다). */
	.loc_tour__grid {
		display: flex;
		grid-template-columns: none;
		grid-template-rows: none;
		grid-auto-rows: auto;
		gap: 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.loc_tour__grid::-webkit-scrollbar { height: 3px; }
	.loc_tour__grid::-webkit-scrollbar-track { background: rgba(29,42,32,.08); border-radius: 999px; }
	.loc_tour__grid::-webkit-scrollbar-thumb { background: rgba(29,42,32,.32); border-radius: 999px; }
	.loc_tour__card,
	.loc_tour__card--wide {
		flex: 0 0 82%;
		height: auto;
		aspect-ratio: 4 / 3;
		grid-column: auto;
		grid-row: auto;
		scroll-snap-align: center;
	}
	/* 라운지처럼 밝은 컷에서는 기존 스크림(62%/.74)으로 흰 캡션이 묻혔다 → 더 넓고 진하게 */
	.loc_tour__card::after {
		height: 76%;
		background: linear-gradient(180deg, rgba(20,32,24,0) 0%, rgba(20,32,24,.42) 46%, rgba(20,32,24,.86) 100%);
	}
	/* 스크림만으로는 라운지 컷(하단이 노란 조명)에서 설명 줄이 흐렸다 — 글자 자체에 그림자를 준다.
	   스크림을 더 어둡게 하는 대신 이 방법을 쓴 이유: 사진을 덜 죽이면서 글자만 또렷해진다. */
	.loc_tour__cap { left: 18px; right: 18px; bottom: 16px; text-shadow: 0 1px 8px rgba(10,18,12,.72); }
	.loc_tour__name { font-size: 17px; }
	/* 터치 기기에선 hover 가 없으므로 설명을 항상 보여준다 */
	.loc_tour__sub { max-height: 44px; margin-top: 6px; opacity: 1; font-size: 13px; }
	.loc_tour__zoom { display: none; }

	.loc_lb { padding: 56px 14px; }
	.loc_lb__img { max-height: calc(100vh - 170px); }
	.loc_lb__name { font-size: 17px; }
}

@media all and (max-width: 480px) {
	.loc_hero__title { font-size: 24px; }
	/* 3버튼이 한 줄에 들어가야 하는 구간 — 라벨을 줄이지 않고 여백만 조인다 */
	.loc_map__links { gap: 5px; }
	.loc .loc_map__link { padding: 9px 10px 9px 8px; gap: 5px; font-size: 12px; }
	.loc_map__ico { width: 18px; height: 18px; font-size: 10.5px; }
	.loc_map__ico svg { width: 12px; height: 12px; }
	.loc .loc_title { font-size: 23px; }
	.loc_addr { margin-left: 16px; margin-right: 16px; }
	.loc .loc_inner { padding: 0 18px; }
	.loc_hours__row { flex-direction: column; align-items: flex-start; gap: 8px; }
	/* 가로 스와이프는 위 768 블록이 담당한다. 여기서는 .loc_inner 패딩(18px)에 맞춰
	   음수 마진만 다시 맞춘다 — 어긋나면 첫 사진이 본문 축에서 밀린다. */
	.loc_tour__grid { margin: 0 -18px; padding: 0 18px 14px; scroll-padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.loc_tour__card,
	.loc_tour__media img,
	.loc_tour__cap,
	.loc_tour__sub,
	.loc_tour__zoom { transition: none; }
	.loc_tour__card:hover .loc_tour__media img { transform: none; }
}