@charset "utf-8";
/* =====================================================
   오시는길 — company/css/location.css
   본사 · 직영대리점 탭 / 카카오맵 · 주변 정류장 · 주변 버스
   ===================================================== */

/* ── 아이콘 스프라이트 정의부(비표시) ── */
.locIcoDef { position:absolute; width:0; height:0; overflow:hidden; }

/* ── 탭 버튼 (network.css .netTab 과 동일 디자인) ── */
.locTab.tabWrap {
	display:flex; gap:5px; margin-bottom:18px; padding:4px;
	border:1px solid var(--c_line); border-radius:10px; background:#fff;
}
.locTab .tabBtn {
	display:flex; align-items:center; justify-content:center;
	flex:1 1 0; width:auto; min-width:0; padding:13px 4px 11px;
	border-radius:7px; background:transparent;
	color:#7a889a; font-size:var(--fs14); font-weight:700; letter-spacing:-.03em;
	line-height:1.3; text-align:center; word-break:keep-all;
}
.locTab .tabBtn:hover { color:var(--c_base1); }
.locTab .tabBtn.on {
	background:var(--c_base2); color:#fff;
	box-shadow:0 5px 14px rgba(39,62,130,.26);
}

/* ── 탭 컨텐츠 전환 ── */
.locInner .tabItem.on { animation:locFade .3s ease; }
@keyframes locFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── 거점명 헤딩 ── */
.locTit {
	position:relative; margin-bottom:11px; padding-left:11px;
	color:var(--c_ink); font-size:var(--fs20); font-weight:800; letter-spacing:-.02em;
}
.locTit:before {
	content:""; position:absolute; left:0; top:50%;
	width:3px; height:15px; border-radius:2px; background:var(--c_base1);
	transform:translateY(-50%);
}

/* ── 지도 ── */
.mapArea { position:relative; margin-bottom:10px; border:1px solid var(--c_line); border-radius:10px; overflow:hidden; background:var(--c_soft); }
/* 카카오맵 지도퍼가기(roughmap) — 인라인 스타일로 폭·높이가 박히므로 !important 로 덮어씀 */
.mapArea .root_daum_roughmap { width:100% !important; }
.mapArea .root_daum_roughmap .wrap_map { width:100% !important; height:280px !important; }
.mapArea .root_daum_roughmap .wrap_controllers { box-sizing:border-box; }
.mapArea .mapFallback { display:none; padding:44px 20px; text-align:center; }
.mapArea .mapFallback strong { display:block; margin-bottom:7px; color:var(--c_ink); font-size:var(--fs16); font-weight:800; }
.mapArea .mapFallback p { color:var(--c_muted); font-size:var(--fs13); line-height:1.6; }
.mapArea.no-map .root_daum_roughmap { display:none; }
.mapArea.no-map .mapFallback { display:block; }

/* ── 길찾기 버튼 (가로 전체 · 2열 50%) ── */
.mapBtns { display:grid; grid-template-columns:1fr 1fr; width:100%; margin-bottom:18px; }
.mapBtns .btn { width:100%; gap:7px; padding:0 10px; font-size:var(--fs14); letter-spacing:-.03em; white-space:nowrap; }
.mapBtns .btn .ico { flex:0 0 auto; width:17px; height:17px; fill:currentColor; }
/* 네이버 N 은 여백 없이 뷰박스를 꽉 채우는 글리프라 별도 축소 */
.mapBtns .btn.naver .ico { width:13px; height:13px; }

/* 카카오맵 — 브랜드 옐로우 */
.mapBtns .btn.kakao { background:#FEE500; border:1px solid #FEE500; color:#191600; box-shadow:0 6px 16px rgba(254,229,0,.36); }
.mapBtns .btn.kakao:hover { background:#F2DA00; border-color:#F2DA00; color:#191600; }

/* 네이버지도 — 브랜드 그린 */
.mapBtns .btn.naver { background:#03C75A; border:1px solid #03C75A; color:#fff; box-shadow:0 6px 16px rgba(3,199,90,.30); }
.mapBtns .btn.naver:hover { background:#02B351; border-color:#02B351; color:#fff; }

/* ── 주소 / 전화 목록 ── */
/* reset.css의 `.d-page ul{margin:0;padding:0}`(0,1,1)보다 우선하도록 클래스 2개로 지정 */
.locBox .locInfo { display:grid; gap:9px; padding-bottom:18px; border-bottom:1px solid var(--c_line); }
.locInfo li { display:grid; grid-template-columns:5.6em 1fr; gap:8px; align-items:start; }
.locInfo .lb { display:inline-flex; align-items:center; padding-top:2px; color:var(--c_muted); font-size:var(--fs16); font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.locInfo .ico {
	flex:0 0 auto; width:22px; height:18px; margin-right:5px;
	fill:none; stroke:var(--c_base1); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
	transform:translateY(-2px);
}
.locInfo .vl { color:var(--c_ink); font-size:var(--fs16); font-weight:600; line-height:1.8; overflow-wrap:anywhere; }
.locInfo .vl a { color:var(--c_base1); font-weight:700; }
.locInfo .vl a:hover { color:var(--c_base2); text-decoration:underline; }
.locInfo .vl .sep { display:inline-block; margin:0 6px; color:var(--c_line); font-weight:400; }
.locInfo .vl .zip { color:var(--c_muted); font-size:var(--fs14); font-weight:600; }

/* ── 주변 정류장 / 주변 버스 ── */
/* 카카오맵으로 연결되는 링크임을 알리는 돋보기 (장식 요소이므로 마크업 대신 의사요소로 처리) */
.stopList a:after,
.busList a.no:after {
	content:""; flex:0 0 auto; width:11px; height:11px; margin-left:4px;
	background-color:currentColor; opacity:.5; transition:opacity .2s;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m20 20-4.7-4.7'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m20 20-4.7-4.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.stopList a:hover:after,
.busList a.no:hover:after { opacity:1; }

.locSub { margin-top:20px; }
.locSub + .locSub { margin-top:22px; padding-top:20px; border-top:1px solid var(--c_line); }
.locStit { margin-bottom:11px; color:var(--c_ink); font-size:var(--fs16); font-weight:800; letter-spacing:-.02em; }

.locBox .stopList { display:flex; flex-wrap:wrap; gap:8px; }
.stopList li { display:inline-flex; }
.stopList a {
	display:inline-flex; align-items:center; gap:6px;
	padding:7px 11px; border:1px solid var(--c_line); border-radius:8px; background:#fff;
	color:var(--c_ink); font-size:var(--fs14); font-weight:600; letter-spacing:-.02em;
	word-break:keep-all; transition:color .2s, border-color .2s, background .2s;
}
.stopList a:hover { border-color:var(--c_base1); background:var(--c_soft); color:var(--c_base1); }
.stopList a em { margin-left:3px; color:var(--c_muted); font-size:var(--fs12); font-weight:500; letter-spacing:-.03em; transition:color .2s; }
.stopList a:hover em { color:var(--c_base1); }
.stopList .num {
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:19px; height:19px; border:1px solid #b9c7db; border-radius:50%;
	color:var(--c_base1); font-size:11px; font-weight:700; line-height:1;
	transition:border-color .2s, background .2s;
}
.stopList a:hover .num { border-color:var(--c_base1); background:var(--c_soft); }

.locBox .busList { display:grid; gap:9px; }
.busList li { display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; }
.busList .tag {
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	min-width:38px; height:20px; padding:0 7px; border-radius:4px;
	color:#fff; font-size:var(--fs12); font-weight:700; letter-spacing:-.02em; line-height:1;
}
.busList .tag.t-normal { background:#33c481; }	/* 일반 */
.busList .tag.t-main   { background:#2c6ecb; }	/* 간선 */
.busList .tag.t-circle { background:#f0a12e; }	/* 순환 */
.busList .no { display:inline-flex; align-items:center; color:var(--c_ink); font-size:var(--fs14); font-weight:700; letter-spacing:-.01em; transition:color .2s; }
.busList a.no {
	padding:6px 10px; border:1px solid var(--c_line); border-radius:8px; background:#fff;
	transition:color .2s, border-color .2s, background .2s;
}
.busList a.no:hover { border-color:var(--c_base1); background:var(--c_soft); color:var(--c_base1); }
.busList a.no:hover em { color:var(--c_base1); }
.busList .no em { margin-left:3px; color:var(--c_muted); font-size:var(--fs12); font-weight:500; letter-spacing:-.03em; transition:color .2s; }

/* ── 태블릿 이상 (600px~) ── */
@media screen and (min-width: 600px) {
	.locTab.tabWrap { gap:6px; margin-bottom:24px; }
	.locTab .tabBtn { padding:13px 6px; font-size:var(--fs15); }

	.locTit { margin-bottom:14px; font-size:var(--fs22); }

	.mapArea { margin-bottom:12px; }
	.mapArea .root_daum_roughmap .wrap_map { height:400px !important; }
	.mapBtns { margin-bottom:22px; }
	.mapBtns .btn { font-size:var(--fs15); }
	.mapBtns .btn .ico { width:19px; height:19px; }
	.mapBtns .btn.naver .ico { width:14px; height:14px; }

	.locBox .locInfo { gap:10px; padding-bottom:22px; }

	.locSub { margin-top:24px; }
	.locSub + .locSub { margin-top:26px; padding-top:24px; }
	.locStit { font-size:var(--fs18); }

	.locBox .stopList { gap:10px; }
	.stopList a { padding:8px 13px; font-size:var(--fs15); }
	.busList a.no { padding:7px 12px; }
}


.mapArea .root_daum_roughmap .wrap_controllers {display:none;}
.root_daum_roughmap .cont {display:none;}
.root_daum_roughmap .border1, .root_daum_roughmap .border2, .root_daum_roughmap .border3, .root_daum_roughmap .border4 {display:none;}