/* =====================================================================
   location.css — 오시는길 (/location/)
   subpage.css + layout.css 위에 이 페이지 고유 블록만 얹는다.
   ===================================================================== */

/* ---------------- 주소 + 지도 바로가기 ---------------- */
.loc-map {
	background: var(--color-primary-deep);
	border-radius: 20px;
	padding: 44px 36px;
	text-align: center;
	color: #fff;
}
.loc-map__addr {
	font-size: 24px;
	line-height: 1.6;
	color: var(--color-text-on-dark-sub);
}
.loc-map__addr strong {
	color: #fff;
	font-weight: 700;
}
.loc-map__hint {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	color: var(--color-text-on-dark-mute);
}

.loc-map__btns {
	margin-top: 28px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.loc-map__btn {
	min-height: 56px;
	padding: 16px 34px;
	font-size: 18px;
}
.loc-map__btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	transition: background-color .2s ease;
}
.loc-map__btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.loc-map__note {
	margin-top: 20px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--color-text-on-dark-mute);
}

@media (max-width: 640px) {
	.loc-map { padding: 32px 20px; }
	.loc-map__addr { font-size: 20px; }
	.loc-map__btns { flex-direction: column; }
	.loc-map__btn { width: 100%; }
}

/* ---------------- 교통 안내 3칸 ---------------- */
.loc-grid {
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr; } }

.loc-card {
	background: #fff;
	border: 1px solid var(--color-line-2);
	border-radius: 18px;
	padding: 32px 28px;
	text-align: center;
}
.loc-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 999px;
	background: var(--color-bg-cream);
	color: var(--color-primary);
	border: 1px solid var(--color-line-2);
}
.loc-card__ico svg { width: 30px; height: 30px; }
.loc-card__title {
	margin-top: 16px;
	font-size: 22px;
	color: var(--color-primary-deep);
}
.loc-card__desc {
	margin-top: 12px;
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--color-text-sub);
	text-wrap: pretty;
}
.loc-card__desc strong { color: var(--color-primary); font-weight: 700; }

/* 버스 번호 — 칩 형태로 크게 (고령 사용자가 번호를 빨리 찾도록) */
.loc-bus {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.loc-bus li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	background: var(--color-primary);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
}