/* ═══════════════════════════════════════════════════════════════════════════
   오시는 길 — 전 템플릿 공통 살갗. 마크업은 `_location.jspf`.
   정본은 LILT_008 의 짜임이다(2026-09-28 지시: "오시는 길도 08 과 동일하게 전체 통일").

   ★ 템플릿마다 다르게 보이려면 **변수만** 덮는다. 선택자를 다시 쓰지 말 것.
       --loc-body   한글 본문 서체(고객이 고른 꼴)   --loc-lat   라틴 라벨 서체
       --loc-ink    글자색                           --loc-dot   교통 아이콘 색
       --loc-line   헤어라인(교통 행 구분선)
       --loc-bleed  지도·약도가 좌우로 넘칠 폭 — **섹션 좌우 여백 한 개 분량**을 준다(08 규격 · 기본 0).
                    두 배로 주면 화면을 꽉 채우지만 08 과 어긋난다.
   ⚠ 비워 두면 08 무드로 떨어진다 — 템플릿마다 `.lilt-loc{ … }` 로 반드시 덮을 것.
   ⚠ 동작(주소·버튼 복사)은 각 템플릿의 `[data-copy]` 핸들러가 이미 맡는다. 새 스크립트를 두지 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */

.lilt-loc{
  --loc-body:inherit; --loc-lat:inherit;
  --loc-ink:currentColor; --loc-dot:currentColor;
  --loc-line:rgba(38,37,34,.14);
  --loc-bleed:0px;
  width:100%; display:flex; flex-direction:column; align-items:center;
  color:var(--loc-ink); font-family:var(--loc-body); text-align:center;
}

.lc__nm{ margin-top:38px; font-size:calc(17px * var(--fs,1)); font-weight:500; line-height:1.4; letter-spacing:.02em;
  word-break:keep-all; }
.lc__hall{ margin-top:8px; font-size:calc(12.5px * var(--fs,1)); line-height:1.7; word-break:keep-all; }
/* 주소 — 눌러서 복사되는 버튼이지만 **버튼처럼 보이지 않는다**(글자 그대로). */
.lc__ad{
  margin-top:2px; min-height:32px; padding:0; border:0; background:none;
  font-family:inherit; font-size:calc(12px * var(--fs,1)); line-height:1.7; color:inherit; cursor:pointer;
  display:flex; align-items:center; gap:8px; word-break:keep-all;
}

/* ⚠ 부모가 `align-items:center` 라 넘친 폭은 좌우로 **알아서 균등하게** 벌어진다.
   여기에 margin-left 음수를 더하면 그만큼 왼쪽으로 치우친다(2026-09-26 08 에서 고친 것). */
.lilt-loc .kmap, .lc__map{
  position:relative; margin-top:26px; width:calc(100% + var(--loc-bleed)); overflow:hidden;
}
/* 카카오 지도는 스스로 높이가 없어 비율로 세운다. 세로가 짧은 띠 — 정사각에 가깝게 두지 말 것.
   약도는 다르다 — 그림 한 장이 곧 정보라 비율을 박아 잘라 내면 범례와 길 이름이 잘린다.
   ⚠ 흑백·대비 필터도 두지 않는다(2026-09-26 고객 지시) — 약도는 색이 곧 구분이다. */
.lilt-loc .kmap{ aspect-ratio:1.7; }
.lilt-loc .kmap[hidden]{ display:none; }
.lc__map img{ display:block; width:100%; height:auto; }

.lc__links{ margin-top:16px; width:100%; display:flex; justify-content:center; align-items:center; }
/* ⚠ `a` 와 `button` 을 **같은 방식으로** 가운데 맞춘다. 높이만 주면 둘이 어긋난다 —
   button 은 내용을 스스로 가운데 두지만 a 는 블록이라 글자가 위에 붙어, 두 글자의
   밑줄이 서로 다른 높이에 선다(실제로 08 에서 그렇게 어긋나 있었다). */
.lc__links a, .lc__links button{
  display:flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 16px; border:0; background:none;
  font-family:inherit; font-size:calc(12px * var(--fs,1)); line-height:1; cursor:pointer;
  text-decoration:none; color:inherit; white-space:nowrap;
}
.lc__links .lc__bar{ flex:none; width:1px; height:10px; background:currentColor; opacity:.3; }
/* 지도 버튼 아이콘 — 핀·복사. 전 템플릿 같은 그림이고 색은 버튼 글자색을 따른다. */
.lc__mic{ width:13px; height:13px; display:block; flex:none; }

.lc-tr{ margin-top:28px; width:100%; text-align:left; border-bottom:1px solid var(--loc-line); }
.lc-tr__r{ display:grid; grid-template-columns:34px minmax(0,1fr); padding:16px 0;
  border-top:1px solid var(--loc-line); }
.lc-tr__r svg{ display:block; margin-top:1px; }
.lc-tr__b{ display:flex; flex-direction:column; gap:4px; min-width:0; }
/* ⚠ 수단 이름은 고객이 한글로 적는다 — 라틴 서체 뒤에 한글꼴을 세워 둔다.
   자간도 라벨용 .2em 이 아니라 한글이 읽히는 .1em 으로 둔다(한글은 넓히면 낱자가 흩어진다). */
.lc-tr__b em{ font-style:normal; font-family:var(--loc-lat), var(--loc-body); font-stretch:110%;
  font-weight:500; font-size:calc(10px * var(--fs,1)); letter-spacing:.1em; line-height:1.6; }
/* ⚠ `overflow-wrap:anywhere` — 띄어쓰기 없이 길게 적은 안내(주소·노선 나열)가 칸 밖으로 뻗지 않게 꺾는다. */
.lc-tr__b span{ font-size:calc(12px * var(--fs,1)); line-height:1.8; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }

/* ── 지도 앱 고르기 ── [지도 앱으로 열기] 가 띄우는 창. 앱 아이콘 버튼 셋이 나란히 설 뿐이다.
   body 끝에 서므로 `.lilt-loc` 변수를 못 받는다 — 종이·먹색은 어느 지면에서나 읽히는 값으로 못박고,
   서체만 스크립트가 지면 것을 입힌다. 바깥을 누르거나 Esc 로 닫는다. */
.lilt-mapsel{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:20px; color:#262522; -webkit-tap-highlight-color:transparent; }
.lilt-mapsel[hidden]{ display:none; }
.lilt-mapsel__bd{ position:absolute; inset:0; background:rgba(38,37,34,.42); animation:liltMsFade .3s ease; }
.lilt-mapsel__card{ position:relative; z-index:1; padding:20px 18px 16px;
  background:#fff; box-shadow:0 18px 40px -20px rgba(20,19,17,.4);
  animation:liltMsIn .45s cubic-bezier(.16,.84,.24,1); }
.lilt-mapsel__card:focus{ outline:none; }
@keyframes liltMsFade{ from{ opacity:0; } }
@keyframes liltMsIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.lilt-mapsel__row{ display:flex; align-items:flex-start; justify-content:center; gap:6px; }
.lilt-mapsel__b{ display:flex; flex-direction:column; align-items:center; gap:8px; width:68px; padding:4px 0;
  color:inherit; text-decoration:none; cursor:pointer; }
/* 아이콘은 **작게**(26px) 둔다 — 크게 두면 앱 로고가 지면의 조용한 결을 깬다(60px 은 "너무 크다"로 반려).
   세 그림의 모양이 제각각이라(둥근 네모 · 투명 바탕 핀 · 흰 네모) 같은 크기의 칸에 담아 맞춘다. */
.lilt-mapsel__ic{ display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:7px; overflow:hidden; transition:transform .2s ease; }
.lilt-mapsel__ic img{ display:block; width:100%; height:100%; object-fit:cover; }
.lilt-mapsel__ic--naver img{ object-fit:contain; }
.lilt-mapsel__b:active .lilt-mapsel__ic{ transform:scale(.92); }
.lilt-mapsel__nm{ font-size:calc(11px * var(--fs,1)); line-height:1.3; letter-spacing:-.01em; white-space:nowrap; opacity:.82; }
.lilt-mapsel__b:focus-visible{ outline:1px solid rgba(38,37,34,.28); outline-offset:2px; }
.lilt-mapsel__m{ margin:0; padding:12px 0 0; font-size:calc(11px * var(--fs,1)); line-height:1.5; text-align:center; color:rgba(38,37,34,.62); }
.lilt-mapsel__m[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .lilt-mapsel__bd, .lilt-mapsel__card{ animation:none; } }