/* ==========================================================================
   회사 위치(/location) — Figma 「GNB > 회사 위치 (지사 선택 시, 위치 안내)」(2122:7157) 2026-09-06
   ---------------------------------------------------------------------------
   · 데스크톱 1920 기준. 컨테이너 1280(.sp-inner). 좌표는 피그마 x−320, y−94(헤더) 로 옮김.
   · 배너(620) 위에 절대 배치, 위치 카드는 배너 하단에 98px 걸쳐 올라온다(피그마 y 616).
   · Contact Us 폼은 제외 — 카드 아래 여백(140)이 폼이 들어갈 자리(피그마 1265→1406).
   · 헤더·푸터는 공용. 페이지 제목(h2#container_title)은 배너가 대신하므로 숨김.
   ========================================================================== */
#wrapper:has(.sp-loc) { max-width: none; padding: 0; }
#wrapper:has(.sp-loc) #container_title { display: none; }
body:has(.sp-loc) .sp-footer { margin-top: 0; }

.sp-loc { --ink: #1b2b39; --navy: #273753; color: var(--ink); }
.sp-loc img { max-width: none; }
.sp-loc a { text-decoration: none; }
.sp-loc p, .sp-loc h1, .sp-loc h2, .sp-loc h3, .sp-loc ul { margin: 0; }
.sp-loc ul { padding: 0; list-style: none; }

/* ── 1. 배너 1920×620, #273753 ─────────────────────────────────────────── */
.sp-loc__banner {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: var(--navy);
}
.sp-loc__banner .sp-inner { position: relative; height: 100%; }
.sp-loc__crumb {
    position: absolute;
    left: 20px;
    top: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
}
.sp-loc__crumb a { color: #fff; font-weight: 400; }
.sp-loc__crumb a:hover { color: #fff; text-decoration: underline; }
.sp-loc__crumb li:last-child { font-weight: 500; }
.sp-loc__crumb img { display: block; width: 4px; height: 8px; }

/* 점 세계지도 917×534 — 피그마 (653,192): 오른쪽 끝 1570 → .sp-inner(1620) 기준 right 50. 방사형 페이드는 world-fade.svg 알파 마스크 */
.sp-loc__dots {
    position: absolute;
    right: 50px;
    top: 98px;
    width: 917px;
    height: 534px;
    pointer-events: none;
}
.sp-loc__dots img {
    display: block;
    width: 917px;
    height: 534px;
    -webkit-mask: url(../img/location/world-fade.svg) 0 0 / 100% 100% no-repeat;
            mask: url(../img/location/world-fade.svg) 0 0 / 100% 100% no-repeat;
}
/* 발광 점 3개 — 점 모양으로만 비치도록 점 지도를 마스크로 씀(피그마 2122:7170) */
.sp-loc__glow {
    position: absolute;
    inset: 0;
    -webkit-mask: url(../img/location/world-dots.svg) 0 0 / 100% 100% no-repeat;
            mask: url(../img/location/world-dots.svg) 0 0 / 100% 100% no-repeat;
}
.sp-loc__glow i { position: absolute; display: block; border-radius: 50%; }
.sp-loc__glow-1 { left: 597px; top: 199px; width: 166px; height: 103px; background: linear-gradient(180deg, rgba(90,178,255,0) 0%, #5ab2ff 27%, #5f72ff 100%); filter: blur(30px); }
.sp-loc__glow-2 { left: 747px; top: 249px; width: 14px; height: 18px; background: linear-gradient(180deg, #0088ff, #3f55ff); filter: blur(4px); }
.sp-loc__glow-3 { left: 693px; top: 299px; width: 16px; height: 33px; background: linear-gradient(180deg, #0088ff, #3f55ff); filter: blur(4px); border-radius: 8px; }

.sp-loc__title {
    position: absolute;
    left: 80px;          /* 피그마 x 380 = 300 + 80 */
    top: 162px;          /* 256 − 94 */
    z-index: 1;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
}
.sp-loc__sub {
    position: absolute;
    left: 80px;
    top: 234px;          /* 328 − 94 */
    z-index: 1;
    width: 790px;
    font-size: 23px;
    line-height: 1.4;
    color: rgba(254,255,255,.8);
    white-space: nowrap;
}

/* 지사 선택 — 피그마 (380,442) 320×94 ×2, gap 20 */
.sp-loc__search {
    position: absolute;
    left: 80px;
    top: 348px;          /* 442 − 94 */
    z-index: 1;
    display: flex;
    gap: 20px;
    margin: 0;
}
.sp-loc__field { display: flex; flex-direction: column; gap: 10px; width: 320px; }
.sp-loc__label { font-size: 16px; line-height: 19px; color: rgba(255,255,255,.7); }
.sp-loc__select { position: relative; display: block; height: 60px; }
.sp-loc__select select {
    -webkit-appearance: none;
            appearance: none;
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 40px 0 16px;
    border: 1px solid #bebebe;
    border-radius: 8px;
    background: #f3f3f3 url(../img/location/ico-chevron-down.svg) right 20px center / 16px 9px no-repeat;
    font-size: 22px;
    font-weight: 500;
    line-height: 58px;
    color: var(--ink);
    cursor: pointer;
}
.sp-loc__select select:focus-visible { outline: 2px solid #0055ff; outline-offset: 1px; }

/* ── 2. 위치 안내 카드 1280×650 — 피그마 y 616 → 배너 하단(620)에 98px 걸침 ── */
.sp-loc .sp-loc__card {
    position: relative;
    z-index: 3;
    display: flex;
    max-width: 1280px;
    height: 650px;
    margin: -98px auto 140px;   /* 140 = 카드 하단 1265 → 다음 블록 1406 (Contact Us 자리) */
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 20px;        /* 피그마는 radius 0 배경 + radius 20 테두리 겹침 → 20 으로 통일(기록) */
    background: #fff;
    overflow: hidden;
}
.sp-loc__info { flex: 1 1 auto; min-width: 0; padding: 50px 0 0 43px; }   /* 제목 (364,666): x 364−321(테두리) , y 666−616 */
.sp-loc__card-title { font-size: 32px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.sp-loc__card-title b { font-weight: 700; }
.sp-loc__office { margin-top: 40px; }           /* 본사 751 − (666+45) = 40 */
.sp-loc__office + .sp-loc__office { margin-top: 40px; }  /* 공사 956 − (751+165) = 40 */
.sp-loc__office h3 { font-size: 30px; font-weight: 600; line-height: 1.4; }
.sp-loc__office ul { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sp-loc__office li { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 1.4; white-space: nowrap; }
.sp-loc__office li img { display: block; width: 24px; height: 24px; }
.sp-loc__map { flex: 0 0 700px; width: 700px; height: 650px; }
.sp-loc__map iframe { display: block; width: 700px; height: 650px; border: 0; }

/* ── 반응형 (피그마 없음 — 우리 정의) ─────────────────────────────────── */
@media (max-width: 1319.98px) {
    .sp-loc__dots { right: 0; }
    .sp-loc__title, .sp-loc__sub, .sp-loc__search { left: 60px; }
    .sp-loc .sp-loc__card { margin-left: 20px; margin-right: 20px; }
    .sp-loc__map { flex-basis: 52%; width: auto; }
    .sp-loc__map iframe { width: 100%; }
    .sp-loc__office li { white-space: normal; }
}
@media (max-width: 1023.98px) {
    .sp-loc__banner { height: auto; }
    .sp-loc__banner .sp-inner { padding: 60px 20px 80px; }   /* 여백을 .sp-inner 에 두어 브레드크럼(absolute top 16)이 배너 상단에 남는다 */
    .sp-loc__crumb { left: 20px; }
    .sp-loc__dots { right: -120px; top: 40px; width: 640px; height: 373px; opacity: .55; }
    .sp-loc__dots img { width: 640px; height: 373px; }
    .sp-loc__glow { display: none; }
    .sp-loc__title, .sp-loc__sub, .sp-loc__search { position: static; left: auto; top: auto; }
    .sp-loc__title { font-size: 32px; }
    .sp-loc__sub { width: auto; margin-top: 12px; font-size: 16px; white-space: normal; }
    .sp-loc__search { flex-direction: column; gap: 14px; margin-top: 28px; }
    .sp-loc__field { width: 100%; max-width: 360px; }
    .sp-loc__select, .sp-loc__select select { height: 52px; }
    .sp-loc__select select { font-size: 18px; line-height: 50px; }
    .sp-loc .sp-loc__card { flex-direction: column; height: auto; margin: -50px 20px 64px; border-radius: 16px; }
    .sp-loc__info { padding: 28px 20px 32px; }
    .sp-loc__card-title { font-size: 24px; white-space: normal; }
    .sp-loc__office { margin-top: 28px; }
    .sp-loc__office + .sp-loc__office { margin-top: 28px; }
    .sp-loc__office h3 { font-size: 22px; }
    .sp-loc__office ul { margin-top: 10px; }
    .sp-loc__office li { font-size: 16px; white-space: normal; }
    .sp-loc__office li img { width: 20px; height: 20px; flex: 0 0 20px; }
    .sp-loc__map { flex: 0 0 auto; width: auto; height: 320px; }
    .sp-loc__map iframe { width: 100%; height: 320px; }
}