@charset "utf-8";
/* ==========================================================
   법무법인 해일 : 찾아오시는 길 (page_location)
   - 기존 레이아웃 CSS(general.css, sub.css, page.css, about.css)는 수정하지 않음
   - 아래는 찾아오시는 길 페이지에 추가되는 CSS만 정리
   ========================================================== */

/* ---------- 1. 전체 영역 ---------- */
.location{max-width:1440px;margin:0 auto}

.root_daum_roughmap .cont, .root_daum_roughmap .wrap_controllers{
	display: none;
}
.root_daum_roughmap{
	width: 100% !important;
}

/* ---------- 2. 지점 단위 ---------- */
.loc-item{margin-bottom:70px}
.loc-item.last{margin-bottom:0}

/* ---------- 3. 지도(왼쪽) + 영상(오른쪽) ---------- */
.loc-media{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.loc-media>*{border-radius:24px}

/* 지도 : 네이버 지도 삽입 전 공란 표시 (지도 삽입 시 .map-ph-in 삭제) */
.loc-map{position:relative;overflow:hidden;min-height:0;background:#eceeef;background-image:linear-gradient(#e2e4e6 1px,transparent 1px),linear-gradient(90deg,#e2e4e6 1px,transparent 1px);background-size:40px 40px}
.map-ph-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8a8f94;text-align:center}
.map-ph-in svg{width:34px;height:34px;fill:#d8151b;margin-bottom:4px}
.map-ph-in em{font-style:normal;font-size:15px;font-weight:600}
.map-ph-in small{font-size:13px}

/* 영상 : 재생 버튼 클릭 시 유튜브 iframe 삽입 */
.loc-video{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0f1a2b linear-gradient(135deg,#1d2c44 0%,#0c1422 100%)}
.loc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc-video-tit{position:absolute;top:24px;left:28px;z-index:2;font-style:normal;font-size:16px;font-weight:700;color:#fff}
.loc-video button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;border:0;background:none;cursor:pointer}
.loc-video button i{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#d8151b;transition:transform .3s}
.loc-video button:hover i{transform:scale(1.08)}
.loc-video button svg{width:30px;height:30px;fill:#fff;margin-left:4px}

/* ---------- 4. 지점 정보 + 액션 버튼 ---------- */
.loc-info{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:20px;padding:34px 40px;background:#f6f6f6;border-radius:24px}
.loc-text h3{font-size:24px;font-weight:800;color:#1c1d1d;margin-bottom:10px}
.loc-addr{font-size:17px;color:#333;margin-bottom:10px}

/* 대표전화 · 사업자등록번호 (가운데 구분점) */
.loc-sub{display:flex;flex-wrap:wrap;gap:4px 25px;font-size:17px;color:#777}
.loc-sub span{position:relative}
.loc-sub span+span::before{content:"";position:absolute;top:50%;left:-14px;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#aaa}

/* 액션 버튼 */
.loc-btns{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
.loc-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border:0;border-radius:50px;background:#fff;font:inherit;font-size:16px;font-weight:600;color:#1c1d1d;cursor:pointer;transition:.3s}
.loc-btn svg{width:16px;height:16px;fill:currentColor}
.loc-btn.dark{background:#1c1d1d;color:#fff}
.loc-btn.dark p{display:inline-flex;align-items:center;gap:8px;animation: blink 1.3s infinite;}
.loc-btn:hover{background:#d8151b;color:#fff}
.loc-btn:focus-visible{outline:2px solid #d8151b;outline-offset:3px}

/* 주소 복사 알림 */
.loc-toast{position:fixed;left:50%;bottom:130px;z-index:999;transform:translateX(-50%);padding:10px 18px;border-radius:30px;background:#d8151b;color:#fff;font-size:14px;opacity:0;transition:.3s;pointer-events:none}
.loc-toast.show{opacity:1}

/* ---------- 5. 모바일 (1199px 이하) ---------- */
@media (max-width:1199px){
	.loc-item{margin-bottom:40px}
	.loc-media{grid-template-columns:1fr;gap:10px}
	.loc-media>*{border-radius:12px}
	.loc-map{height:260px}
	.root_daum_roughmap .wrap_map{height:260px !important;}
	.loc-video-tit{top:14px;left:16px;font-size:14px}
	.loc-video button i{width:56px;height:56px}
	.loc-info{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 18px;margin-top:12px;border-radius:16px}
	.loc-text h3{font-size:19px}
	.loc-addr{font-size:15px}
	.loc-btns{width:100%}
	.loc-btn{flex:1 1 auto;justify-content:center;padding:12px 14px}
}