/* ==========================================================================
   오시는 길 (12단계) — 전용 페이지 템플릿 `page-templates/template-location.php` 에서만 로드(inc/assets.php)

   구성(세로): 제목 → 지도(그림 · 구글 임베드 · 빈 칸 중 하나) → info(주소 묶음 | 교통 묶음).
   ★★ 선택자는 전부 `.c4-location` · `.c4-location-*` 로 한정한다 — 다른 화면에 닿지 않게(제1원칙).
   ★ 글자 · 색 · 폭은 기존 토큰 재사용. 새 토큰은 tokens.css '오시는 길' 묶음(여백 · 비율 · 간격 · 버튼)뿐.
   ★ JS 0. 지도는 그림이거나 iframe, 길찾기는 링크다.
   ========================================================================== */

.c4-location {
	padding-top: var(--c4-page-pt);          /* PC 80 — 전 화면 공통 */
	padding-bottom: var(--c4-location-pb);   /* PC 60 */
}

/* 폭 — PC 800 가운데(FAQ inner 와 같은 토큰). 800 이 안 들어가는 폭(태블릿)에서는 좌우 24 를 두고 줄어든다.
   ★ 블록 사이 간격은 이 묶음의 gap 하나다 — 블록이 빠지면(제목 · info 가 비면) 간격도 함께 사라진다. */
.c4-location__inner {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-gap);
	width: 100%;
	max-width: calc(var(--c4-faq-inner-w) + var(--c4-gutter-mobile) * 2);
	margin-inline: auto;
	padding-inline: var(--c4-gutter-mobile);
}

/* 제목 — 페이지 제목 계열(블로그 · 공지 · FAQ · 소개와 같은 토큰). 가운데. */
.c4-location__title {
	margin: 0;
	font-size: var(--c4-fs-page-title);
	line-height: var(--c4-lh-page-title);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	text-align: center;
	overflow-wrap: break-word;
}

/* ==========================================================================
   지도 — 그림 · 구글 임베드 · 빈 칸 셋 중 하나만 그린다(템플릿). 칸은 언제나 남는다(세로 리듬).
   ========================================================================== */

.c4-location-map {
	position: relative;
	aspect-ratio: var(--c4-location-map-ratio);   /* PC 800 × 316.4 */
	overflow: hidden;
	background: var(--c4-color-img-placeholder);   /* 그림도 주소도 없으면 이 빈 칸 */
	/* ★ radius 없음(시안에 둥근 모서리가 없다) */
}

/* 그림 · iframe 둘 다 칸을 꽉 채운다 — 절대 위치라 그림 자체 크기가 칸 높이를 바꾸지 않는다.
   ★ 아래로 1px 더 길게(칸이 자른다) — PC 칸 높이가 316.4 라 지도(iframe)가 정수 픽셀로 그려지면 맨 아래 한 줄에 칸 회색 바탕이 비쳐
     가는 검은 선으로 보였다(2026-10-14 사용자 지시 '맵 밑에 검은 선 안 보이게' · 실측 #BCBCBC 1px). 지도가 있으면 회색 바탕도 뺀다. */
.c4-location-map:has(> .c4-location-map__img, > .c4-location-map__frame) { background: none; }

.c4-location-map__img,
.c4-location-map__frame {
	position: absolute;
	inset: 0 0 -1px;
	display: block;
	width: 100%;
	height: calc(100% + 1px);
	border: 0;
}

.c4-location-map__img {
	object-fit: cover;          /* 찌그러뜨리지 않는다 */
	object-position: 50% 50%;   /* 가운데 */
}

/* ==========================================================================
   info — PC: 주소 | 교통 (내용 폭 + 사이 125, 위 정렬) / 좁으면 세로(사이 32)
   ========================================================================== */

/* ★★ 반반이 아니다 — 두 칸 다 내용 폭만 차지하고 왼쪽부터 놓인다. 두 칸이 한 줄에 안 들어가면(좁은 태블릿 · 긴 주소)
   교통이 아래로 떨어지고 사이가 32 가 된다(column-gap 125 를 억지로 지키지 않는다 — flex-wrap). */
.c4-location-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--c4-location-info-gap);
	row-gap: var(--c4-location-info-gap-m);
	color: var(--c4-color-text);   /* grey900 — 상호 · 주소 · 교통 라벨 · 아이콘(currentColor) */
}

.c4-location-address {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-addr-gap);   /* 상호 → 주소 PC 10 */
	min-width: min(var(--c4-location-addr-min-w), 100%);   /* 시안 주소 상자 폭 234 — 교통 칸 시작선을 시안에 맞춘다 */
	max-width: 100%;
	/* 구매자가 넣은 긴 주소 · URL 이 칸을 뚫지 않게(FAQ · 소개와 같은 처리) — 상속된다. */
	overflow-wrap: break-word;
}

.c4-location-address__name {
	margin: 0;
	font-size: var(--c4-fs-page-title2);     /* Heading/H2/Page Title2 28 */
	line-height: var(--c4-lh-page-title2);
	font-weight: var(--c4-fw-bold);
}

/* ★★ 주소는 Bold(`Body/body1_bold`) — 레이어 이름은 '본문'이지만 Regular 가 아니다. PC · 모바일 같은 17. */
.c4-location-address__text {
	margin: 0;
	font-size: var(--c4-fs-body1);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-medium);   /* 한 단계 가늘게 700 → 500(2026-10-14 사용자 지시 '웨이트 하나 내려줘' — 글꼴에 600 이 없다) */
	word-break: keep-all;               /* 좁은 폰(320)에서 낱말 가운데('한솔빌 / 딩')서 접히지 않게(2026-10-15 모바일 점검) */
}

.c4-location-access {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 100%;
}

/* 전화예약 — 헤더 전화예약 버튼 부품(.c4-cta · header.css) 그대로 · 크기만 지도 버튼과 같게(130 × 42 · 둥글기 8) · 글자 나눔명조 + 둘레 선(base.css · header.css) — 2026-10-14 사용자 지시 */
.c4-location-buttons .c4-cta {
	min-width: var(--c4-location-btn-w);
	height: var(--c4-location-btn-h);
	padding-inline: var(--c4-location-cta-pad-x);
	border-radius: var(--c4-location-btn-radius);
}

/* 전화예약은 헤더 버튼의 반전 호버(흰 바탕 · 파란 글자)를 쓰지 않는다 — 아래 '떠오르기'만(2026-10-15 사용자 지시 '오시는 길 전화예약 버튼은 호버 효과 삭제') */
.c4-location-buttons .c4-cta:hover,
.c4-location-buttons .c4-cta:focus-visible {
	border-color: transparent;
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
}

/* 버튼 셋(전화예약 · 네이버 · 카카오) — 마우스를 올리면 살짝 위로 뜨며 아래로 옅은 그림자(y 10 · 2026-10-15 사용자 지시). 마우스가 없는 기기는 그대로. */
.c4-location-buttons > .c4-cta,
.c4-location-buttons__link {
	transition: translate var(--c4-location-btn-hover-dur) var(--c4-location-btn-hover-ease), box-shadow var(--c4-location-btn-hover-dur) var(--c4-location-btn-hover-ease);
}

@media (hover: hover) {
	.c4-location-buttons > .c4-cta:hover,
	.c4-location-buttons__link:hover {
		translate: 0 var(--c4-location-btn-lift);
		box-shadow: var(--c4-location-btn-shadow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c4-location-buttons > .c4-cta:hover,
	.c4-location-buttons__link:hover { translate: none; }   /* 움직임 없이 그림자만 */
}

/* 지도 버튼 — 그림 버튼(브랜드 로고). 글자를 CSS 로 그리지 않는다. */
.c4-location-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--c4-location-btn-gap);
}

.c4-location-buttons__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--c4-location-btn-icon-gap);
	width: var(--c4-location-btn-w);
	height: var(--c4-location-btn-h);
	border-radius: var(--c4-location-btn-radius);
	overflow: hidden;
	text-decoration: none;
	white-space: nowrap;
}

/* 아이콘 + 글자(2026-10-15 사용자 지시 '이미지들 선명하게' — 그 전 2배 PNG 그림 버튼). 바탕 · 글자색은 원래 그림에서 잰 값. */
.c4-location-buttons__icon {
	flex: none;
	width: var(--c4-location-btn-icon-w);
	height: var(--c4-location-btn-icon-h);
}

.c4-location-buttons__link--naver {
	background: var(--c4-color-white);
	color: var(--c4-location-btn-naver-text);
}

.c4-location-buttons__link--kakao {
	background: var(--c4-location-btn-kakao-bg);
	color: var(--c4-location-btn-kakao-text);
}

.c4-location-buttons__text {
	font-size: var(--c4-location-btn-fs);
	font-weight: var(--c4-fw-bold);
	line-height: 1;
	letter-spacing: -0.02em;
}

.c4-location-buttons__link--kakao .c4-location-buttons__text {
	font-weight: var(--c4-fw-regular);   /* kakao 보통 · map 굵게(원래 그림 글자 모양) */
	letter-spacing: -0.01em;
}

.c4-location-buttons__link--kakao .c4-location-buttons__text b { font-weight: 800; }

/* ==========================================================================
   교통 안내(2026-10-14 사용자 지시 · 기존 사이트 내용) — 구분마다 한 줄: [번호 · 구분 이름 | 안내 줄 · 버스 번호표]
   ★ 구분 사이는 가는 선(divider) — 맨 위 선이 info 와 나누는 선이다. 좁으면(모바일) 머리 → 본문 세로.
   ========================================================================== */

.c4-location-guide {
	color: var(--c4-color-text);
	overflow-wrap: break-word;
}

.c4-location-guide__group {
	display: grid;
	grid-template-columns: var(--c4-location-guide-head-w) minmax(0, 1fr);
	column-gap: var(--c4-location-guide-col-gap);
	padding-block: var(--c4-location-guide-pad);
	border-top: var(--c4-border-w) solid var(--c4-color-border);
}

.c4-location-guide__group:last-child { border-bottom: var(--c4-border-w) solid var(--c4-color-border); }

.c4-location-guide__head {
	display: flex;
	align-items: baseline;
	gap: var(--c4-location-guide-num-gap);
	margin: 0;
	font-size: var(--c4-location-guide-head-fs);
	line-height: var(--c4-lh-page-title2);
	font-weight: var(--c4-fw-bold);
}

.c4-location-guide__num { color: var(--c4-color-accent); }

.c4-location-guide__body {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-guide-item-gap);
	min-width: 0;
}

.c4-location-guide__list {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-guide-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4-location-guide__item {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-guide-name-gap);
	font-size: var(--c4-fs-body1);
	line-height: var(--c4-lh-body);
}

.c4-location-guide__name { font-weight: var(--c4-fw-bold); }

.c4-location-guide__text {
	color: var(--c4-color-text-sub);
	word-break: keep-all;
}

/* 버스 번호표 — 종류 이름(글자) + 번호(색 판). 서울 버스 색(간선 파랑 · 지선 초록 · 광역 빨강 · 그 밖 회색). 색만으로 알리지 않게 종류 이름이 글자로 앞에 선다. */
.c4-location-guide__buses {
	display: flex;
	flex-direction: column;
	gap: var(--c4-location-guide-bus-gap);
}

.c4-location-guide__bus-row {
	--_bus: var(--c4-location-bus-etc);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--c4-location-guide-bus-gap);
	margin: 0;
	font-size: var(--c4-fs-body2);
	line-height: var(--c4-lh-body);
}

.c4-location-guide__bus-row--trunk { --_bus: var(--c4-location-bus-trunk); }
.c4-location-guide__bus-row--branch { --_bus: var(--c4-location-bus-branch); }
.c4-location-guide__bus-row--express { --_bus: var(--c4-location-bus-express); }

.c4-location-guide__bus-type {
	min-width: var(--c4-location-guide-bus-type-w);
	font-weight: var(--c4-fw-bold);
	color: var(--_bus);
}

.c4-location-guide__bus {
	padding: var(--c4-location-guide-bus-pad);
	border-radius: var(--c4-radius-chip);
	background: var(--_bus);
	color: var(--c4-color-white);
	font-weight: var(--c4-fw-bold);
}

/* ==========================================================================
   모바일 (768 미만)
   ========================================================================== */

@media (max-width: 767.98px) {
	/* 버튼 셋이 한 줄에 안 들어간다(130 × 3 + 12 × 2 = 414 > 327) — 전화예약은 윗줄 가득, 지도 버튼 둘은 아랫줄에 그 폭을 반씩(2026-10-15 사용자 지시 '전화예약 가로폭과 동일하게 2열') */
	.c4-location-buttons .c4-cta { flex: 1 0 100%; }
	.c4-location-buttons__link { flex: 1 1 0; width: auto; min-width: 0; }
	.c4-location-access { align-self: stretch; align-items: stretch; }   /* 버튼 줄이 칸 폭 가득(381 ~ 767 에서 글자 폭에 멈춰 오른쪽이 비었다 · 2026-10-15 검증) */


	.c4-location {
		padding-top: var(--c4-location-pt-m);      /* 헤더 아래 20 */
		padding-bottom: var(--c4-location-pb-m);   /* 푸터 위 20 */
	}

	/* ★★ 지도만 화면 끝까지(좌우 0) — 그래서 묶음의 좌우 여백을 풀고, 제목 · info 에만 24 를 준다. */
	.c4-location__inner {
		gap: var(--c4-location-gap-m);
		max-width: none;
		padding-inline: 0;
	}

	.c4-location__title {
		padding-inline: var(--c4-gutter-mobile);
		font-size: var(--c4-fs-page-title-m);      /* Page Title_m 26 */
	}

	.c4-location-map { aspect-ratio: var(--c4-location-map-ratio-m); }   /* 375 × 220 */

	.c4-location-info {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--c4-location-info-gap-m);         /* 주소 ↔ 교통 32 */
		padding-inline: var(--c4-gutter-mobile);
	}

	.c4-location-address {
		gap: var(--c4-location-addr-gap-m);    /* 12 */
		min-width: 0;                          /* 세로로 쌓이므로 PC 최소 폭이 필요 없다 */
	}

	.c4-location-address__name { font-size: var(--c4-fs-page-title2-m); }  /* Page Title2_m 20 — 주소(17)는 그대로 */

	/* 교통 안내 — 머리 → 본문 세로 · 좌우 24(info 와 같다) */
	.c4-location-guide { padding-inline: var(--c4-gutter-mobile); }

	.c4-location-guide__group {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--c4-location-guide-head-gap-m);
		padding-block: var(--c4-location-guide-pad-m);
	}

	.c4-location-guide__head { font-size: var(--c4-location-guide-head-fs-m); }
}