@charset "utf-8";
/* 오시는 길 — 해든네이처 본사 한 곳 안내. 색은 --fl-* 토큰만 사용(SVG 내부 색 제외). */

#container > #sub-location { background: var(--fl-cream); }
body:has(#sub-location) { background: var(--fl-cream) !important; }
body:has(#sub-location) #container_wr, body:has(#sub-location) .gw-footer-container { background: var(--fl-cream); }
#sub-location { color: var(--fl-ink); }
#sub-location em { font-style: normal; color: var(--fl-primary); }
#sub-location p, #sub-location h3, #sub-location h4 { word-break: keep-all; overflow-wrap: break-word; }

.hl-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-primary); }
.hl-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hl-title { margin-top: 14px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: var(--fl-ink); }
.hl-lead { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; color: var(--fl-ink-2); }
.hl-head { max-width: 760px; margin-bottom: 40px; }
.hl-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hl-actions.is-center { justify-content: center; margin-top: 40px; }

/* 머리 */
.hl-intro { padding: clamp(72px, 8vw, 120px) 0; }
.hl-intro-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hl-pin { max-width: 240px; width: 100%; margin: 0 auto; }
.hl-pin svg { display: block; width: 100%; height: auto; }

/* 밴드 */
.hl-band { padding: var(--fl-sec-pad) 0; }
.hl-band.is-sand { background: var(--fl-sand); }
.hl-band.is-cream { background: var(--fl-cream); }

/* 주소 미확정 안내 */
.hl-pending { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; background: var(--fl-white); }
.hl-pending-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--fl-primary-soft); color: var(--fl-primary-dark); }
.hl-pending-ico svg { width: 34px; height: 34px; }
.hl-pending-body { flex: 1; min-width: 0; }
.hl-pending-body h4 { font-size: 22px; font-weight: 800; }
.hl-pending-body p { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--fl-ink-2); }
.hl-pending .fl-btn { flex: none; }

/* 주소 확정 시: 지도 + 정보 카드 */
.hl-office { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.hl-office.is-nomap { grid-template-columns: minmax(0, 1fr); }
.hl-map { position: relative; min-height: 420px; overflow: hidden; border-radius: 28px; background: var(--fl-white); }
.hl-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--fl-white); }
.hl-dl { margin: 0; }
.hl-dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--fl-line); font-size: 15.5px; line-height: 1.6; }
.hl-dl > div:first-child { padding-top: 0; }
.hl-dl dt { font-weight: 700; color: var(--fl-primary); }
.hl-dl dd { margin: 0; color: var(--fl-ink); }
.hl-dl dd a { color: var(--fl-primary-dark); font-weight: 700; text-decoration: none; }

/* 이용 안내 */
.hl-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hl-guide-item { padding-top: 26px; border-top: 2px solid var(--fl-ink); }
.hl-guide-no { display: block; font-family: var(--fl-font-display); font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; line-height: 1; color: var(--fl-primary); }
.hl-guide-item h4 { margin: 16px 0 8px; font-size: 20px; font-weight: 800; }
.hl-guide-item p { font-size: 15px; line-height: 1.8; color: var(--fl-ink-2); }

@media screen and (max-width: 1024px) {
    .hl-intro-grid { grid-template-columns: 1fr; }
    .hl-pin { max-width: 180px; }
    .hl-office { grid-template-columns: 1fr; }
    .hl-map { min-height: 340px; }
    .hl-guide { grid-template-columns: 1fr; }
    .hl-band { padding: 80px 0; }
}
@media screen and (max-width: 576px) {
    .hl-band { padding: 64px 0; }
    .hl-head { margin-bottom: 28px; }
    .hl-pending { flex-direction: column; align-items: flex-start; }
    .hl-pending .fl-btn, .hl-actions .fl-btn { width: 100%; }
    .hl-dl > div { grid-template-columns: 1fr; gap: 2px; }
    .hl-map { min-height: 280px; }
}