/**
 * sub0104 — 회사소개 › 오시는 길
 * Figma 「SUB 01 - 04 — 오시는 길」(117:947): Sub Hero → S1 Location(지도 · 거점 정보 · 거점 탭) → CTA
 * 지도는 구글 지도 퍼가기(iframe, API 키 없음) — 자리(698×588)를 꽉 채운다. 거점 전환은 assets/js/sub0104.js
 * 거점 탭은 assets/js/common.js initTabs 가 .active 를 토글한다 (components.css 가 비활성 패널을 숨긴다).
 */

/* ---------- S1 Location ---------- */
.location { padding-top: var(--space-140); padding-bottom: var(--space-160); }

/* 지도 698 · 정보 402 · 탭 276 (gap 32) — 1440 에서 Figma 와 같다 */
.loc-row {
    display: grid; align-items: start; gap: var(--space-32);
    grid-template-columns: minmax(0, 698fr) minmax(0, 402fr) 276px;
    grid-template-areas: "map info tabs";
}

/* 지도 자리 */
.loc-map {
    grid-area: map;
    display: flex; align-items: center; justify-content: center;
    height: 588px; overflow: hidden;
    background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
}
/* iframe 이 자리를 꽉 채운다. 지도를 못 불러오면 자리의 옅은 바탕만 남고 주소 · 연락처 글은 그대로 보인다 */
.loc-map-frame { display: block; width: 100%; height: 100%; border: 0; }

/* 거점 정보 */
.loc-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.loc-panel.active { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.loc-name { font: var(--title-20); letter-spacing: var(--title-20-ls); color: var(--text-secondary); }
.loc-address { display: flex; flex-direction: column; gap: 6px; font-style: normal; }
.loc-addr1 { max-width: 281px; font: var(--title-28); letter-spacing: var(--title-28-ls); color: var(--text-primary); }
.loc-addr2 { font: var(--body-16); color: var(--text-secondary); }
/* 길찾기 · 카카오맵 — 새 창 */
.loc-links { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }

/* 연락처 (전 거점 공통) — 주소 아래 12 + 48 */
.loc-contact { display: flex; flex-direction: column; gap: var(--space-16); margin-top: calc(var(--space-12) + var(--space-48)); }
.loc-contact-row { position: relative; padding-left: 36px; }
.loc-contact-row dt { font: var(--title-20); letter-spacing: var(--title-20-ls); color: var(--gray-900); }
.loc-contact-row dt img { position: absolute; left: 1px; top: 3.5px; }
.loc-contact-row dd { margin-top: 7px; font: var(--body-18); color: var(--gray-600); overflow-wrap: anywhere; }
.loc-contact-row dd a:hover { color: var(--text-brand); text-decoration: underline; }
.loc-contact-row .loc-contact-note { font: var(--body-15); color: var(--text-tertiary); }

/* 거점 탭 */
.loc-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: var(--space-12); }
.loc-tab {
    display: flex; align-items: center; gap: var(--space-16); width: 100%;
    padding: var(--space-24);
    font: var(--title-20); letter-spacing: var(--title-20-ls); text-align: left; color: var(--text-primary);
    background: var(--bg-subtle); border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.loc-tab-arrow { flex: none; color: var(--text-tertiary); transition: color var(--transition-fast); }
.loc-tab:hover { background: var(--bg-tint); color: var(--text-brand); }
.loc-tab:hover .loc-tab-arrow { color: var(--text-brand); }
.loc-tab.active { background: var(--action-primary); color: var(--text-inverse); }
.loc-tab.active .loc-tab-arrow { color: var(--text-inverse); }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) {
    .loc-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tabs tabs" "map info";
    }
    .loc-tabs { flex-direction: row; }
    .loc-tab { flex: 1 1 0; min-width: 0; }
    .loc-map { height: 480px; }
}
@media (max-width: 1023px) {
    .location { padding-top: var(--section-y); padding-bottom: var(--section-y); }
    .loc-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "map" "info"; }
    .loc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .loc-tab { padding: var(--space-16) var(--space-20); gap: var(--space-12); font-size: 18px; }
    .loc-map { height: 400px; }
    .loc-addr1 { max-width: none; }
    .loc-contact { margin-top: var(--space-40); }
}
@media (max-width: 767px) {
    .loc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
    .loc-tab { padding: 14px var(--space-16); font-size: 16px; }
    .loc-map { height: 280px; border-radius: var(--radius-lg); }
    .loc-addr1 { font-size: 22px; }
    .loc-contact-row dt { font-size: 18px; }
    .loc-contact-row dd { font-size: 16px; }
    .loc-contact-row .loc-contact-note { font-size: 14px; }
}