/* ═══════════════════════════════════════════════════════════
   2026 나주영산강축제 — 3D 행사장 안내도  ·  화면 디자인 v3
   원칙
   · 8px 격자 : 여백·간격은 8 · 16 · 24 · 32 만 쓴다 (--s1 ~ --s4)
   · 모서리 : 8 · 10 · 12px (--r-s · --r · --r-l) — 알약 모양 없음
   · 유리(글래스모피즘) : 반투명 판 + 1px 흰 하이라이트 선 + 옅은 그림자 하나
   · 잉크 포인트(네오브루탈리즘) : 주요 단추와 고른 칩에만 2px 잉크 테두리 + 3px 단색 오프셋 그림자
   · 색 : 강물빛 청록 하나가 주색, 분류색은 채도를 낮춘 6색. 형광·원색 조합 없음
   · 위계 : 제목·수치는 크고 굵게, 보조 정보는 작고 연하게, 타일(벤토) 단위로 묶는다
   첫 화면(포스터)은 포스터의 결 그대로 (아래 ‘첫 화면’ 부분)
   ═══════════════════════════════════════════════════════════ */
@font-face{ font-family:'Pretendard'; src:url('fonts/PretendardVariable.woff2') format('woff2'); font-weight:45 920; font-style:normal; font-display:swap; }
@font-face{ font-family:'MaruBuri'; src:url('fonts/MaruBuri-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'YeonSung'; src:url('fonts/YeonSung-sub.woff2') format('woff2'); font-weight:400; font-display:block; }

:root{
  /* 간격 · 모서리 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --r-s:8px; --r:10px; --r-l:12px;
  /* 글자 */
  --ink:#14202b; --ink-2:#4a5967; --ink-3:#8593a0; --ink-inv:#ffffff;
  /* 주색 (강물빛 청록) · 보조색 (포스터 주황, 아주 드물게) */
  --acc:#0f8f9a; --acc-ink:#0b6d76; --acc-soft:rgba(15,143,154,.12); --acc-line:rgba(15,143,154,.35);
  --warm:#d95d39; --warm-soft:rgba(217,93,57,.12);
  /* 유리 */
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92); --glass-line:rgba(255,255,255,.70);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --glass-sh:0 8px 24px rgba(20,32,43,.10);
  --blur:blur(16px) saturate(140%);
  --surf:rgba(255,255,255,.96); --surf-2:rgba(20,32,43,.05); --surf-3:rgba(20,32,43,.09);
  --line:rgba(20,32,43,.12); --line-2:rgba(20,32,43,.07);
  --mk:rgba(255,255,255,.86); --mk-line:rgba(255,255,255,.95);
  --scrim:rgba(20,32,43,.34);
  /* 잉크 포인트 */
  --brut:2px solid var(--ink); --brut-sh:3px 3px 0 var(--ink);
  /* 첫 화면(포스터) */
  --paper:#f3f1eb; --jjok:#23284b; --jjok-2:#2f3a6b; --orange:#ea5d2c;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --serif:'MaruBuri','Noto Serif KR','Batang',serif;
  --brush:'YeonSung','Pretendard',serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --gut:max(16px, env(safe-area-inset-left));
  --top:calc(var(--safe-t) + 88px);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .31  0 0 0 0 .24  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.night{
  --ink:#eef4f8; --ink-2:#b3c0cc; --ink-3:#7f8e9c; --ink-inv:#0f1a24;
  --acc:#38b8c2; --acc-ink:#7fd9df; --acc-soft:rgba(56,184,194,.16); --acc-line:rgba(56,184,194,.4);
  --glass:rgba(16,24,34,.68); --glass-2:rgba(16,24,34,.92); --glass-line:rgba(255,255,255,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-sh:0 8px 28px rgba(0,0,0,.4);
  --surf:rgba(255,255,255,.06); --surf-2:rgba(255,255,255,.06); --surf-3:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
  --mk:rgba(16,24,34,.82); --mk-line:rgba(255,255,255,.18);
  --scrim:rgba(0,4,12,.6);
  --brut:2px solid #eef4f8; --brut-sh:3px 3px 0 #eef4f8;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; height:100%; overflow:hidden; overscroll-behavior:none; background:#e4eef0; color:var(--ink); }
body.night{ background:#0a1119; }
body{ font-family:var(--sans); word-break:keep-all; -webkit-font-smoothing:antialiased; letter-spacing:-.012em; font-size:14px; line-height:1.5; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; letter-spacing:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.ic{ width:18px; height:18px; flex:none; display:block; }

/* ── 유리 ── */
.glass{ background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); box-shadow:var(--glass-sh), var(--glass-hi); }
body.noblur .glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-2); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{ background:var(--glass-2); } }

/* ── 3D 화면 ── */
.viewer{ position:fixed; inset:0; overflow:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
  background:linear-gradient(180deg,#d3e6ea 0%,#e7f1f2 50%,#cfe1e5 100%); }
body.night .viewer{ background:linear-gradient(180deg,#0a1220 0%,#101a2c 55%,#080e18 100%); }
.viewer canvas{ display:block; width:100% !important; height:100% !important; touch-action:none; }
.viewer::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(130% 95% at 50% 46%, transparent 62%, rgba(20,40,52,.12) 100%); }
body.night .viewer::after{ background:radial-gradient(130% 95% at 50% 46%, transparent 55%, rgba(0,2,10,.5) 100%); }

/* ── 3D 핀 이름표 ── */
.marks, .rtags{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.rtags{ z-index:3; }
.mk{ position:absolute; left:0; top:0; pointer-events:auto; display:flex; align-items:center; gap:6px; height:30px; padding:3px 10px 3px 4px; border-radius:var(--r-s);
  background:var(--mk); border:1px solid var(--mk-line); color:var(--ink); white-space:nowrap; box-shadow:0 4px 12px rgba(20,32,43,.14);
  transform:translate(-9999px,-9999px); will-change:transform; touch-action:manipulation; transition:background .2s, box-shadow .2s, border-color .2s, padding .2s; }
.mk .ico{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; background:var(--c); color:#fff; flex:none; }
.mk .ico .ic{ width:12px; height:12px; stroke-width:2.2; }
.mk b{ font-weight:700; font-size:12.5px; letter-spacing:-.02em; }
.mk.minor{ height:26px; }
.mk.minor .ico{ width:18px; height:18px; }
.mk.minor .ico .ic{ width:11px; height:11px; }
.mk.minor b{ font-size:11.5px; font-weight:650; }
.mk.small{ padding:3px; }
.mk.small b{ display:none; }
.mk:hover{ z-index:5; border-color:var(--c); }
.mk.small:hover{ padding-right:10px; }
.mk.small:hover b{ display:block; }
.mk.sel{ z-index:6; padding-right:12px; height:34px; border:var(--brut); background:var(--glass-2); box-shadow:var(--brut-sh); }
.mk.sel b{ display:block; font-size:13.5px; font-weight:800; }
.mk.sel .ico{ width:24px; height:24px; }
.mk.dim{ opacity:.35; }
/* 동선 정류장 번호 */
.rt{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:6px; transform:translate(-9999px,-9999px); will-change:transform; pointer-events:auto; cursor:pointer; }
.rt i{ font-style:normal; width:26px; height:26px; border-radius:var(--r-s); display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; background:var(--c); box-shadow:0 0 0 2px #fff; }
.rt i .ic{ width:14px; height:14px; stroke-width:2.4; }
.rt span{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:var(--r-s); background:var(--mk); border:1px solid var(--mk-line); color:var(--ink); white-space:nowrap; }
.rt.pop i{ animation:pop .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop{ from{ transform:scale(.2); opacity:0; } to{ transform:none; opacity:1; } }

/* ── 머리 ── */
.top{ position:fixed; left:0; right:0; top:0; z-index:20; padding:calc(var(--s2) + var(--safe-t)) max(16px, env(safe-area-inset-right)) 0 var(--gut);
  display:flex; align-items:flex-start; gap:var(--s1); pointer-events:none; }
.top > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:12px; height:56px; padding:0 20px 0 12px; border-radius:var(--r-l); min-width:0; }
.brand .bi{ height:38px; width:auto; display:block; }
.brand .bi.n{ display:none; }
body.night .brand .bi.d{ display:none; }
body.night .brand .bi.n{ display:block; }
.brand .bt{ display:flex; flex-direction:column; line-height:1.2; padding-left:12px; border-left:1px solid var(--line); min-width:0; }
.brand .bt b{ font-weight:800; font-size:15px; white-space:nowrap; letter-spacing:-.03em; }
.brand .bt span{ font-size:11.5px; color:var(--ink-3); font-weight:600; white-space:nowrap; margin-top:2px; }
.tools{ margin-left:auto; display:flex; align-items:center; gap:var(--s1); }
.tb{ height:48px; padding:0 18px; border-radius:var(--r-l); display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap;
  transition:transform .15s, background .15s; }
.tb:hover{ background:var(--glass-2); }
.tb:active{ transform:scale(.97); }
.tb.sq{ width:48px; padding:0; justify-content:center; }
.tb.fest{ color:#fff; background:var(--warm); border:var(--brut); box-shadow:var(--brut-sh); }
.tb.fest:hover{ background:#c9502f; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.tb.fest:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.tb.fest .sm{ display:none; }
/* 낮 / 밤 스위치 */
.dn{ height:48px; padding:0 14px 0 8px; border-radius:var(--r-l); display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); }
.dn .tr{ position:relative; width:54px; height:30px; border-radius:var(--r-s); background:var(--surf-3); transition:background .4s; overflow:hidden; }
.dn .knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:6px; background:#fff; color:#d99a2a; display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(20,32,43,.25); transition:transform .4s cubic-bezier(.3,1.3,.5,1), background .4s, color .4s; }
.dn .knob .ic{ width:15px; height:15px; stroke-width:2.2; }
.dn .knob .m{ display:none; }
.dn[aria-checked="true"] .tr{ background:#2a3548; }
.dn[aria-checked="true"] .knob{ transform:translateX(24px); background:#0f1a24; color:#f3d78a; }
.dn[aria-checked="true"] .knob .s{ display:none; }
.dn[aria-checked="true"] .knob .m{ display:block; }

/* ── 분류 칩 (가로 스크롤) ── */
.chips{ position:fixed; z-index:19; left:var(--gut); top:var(--top); max-width:calc(100vw - 440px); display:flex; gap:var(--s1);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:4px 4px 12px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.chips::-webkit-scrollbar{ display:none; }
.chips button{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 12px; border-radius:var(--r); font-size:13px; font-weight:700;
  background:var(--glass); color:var(--ink); border:1px solid var(--glass-line); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s, transform .15s; }
body.noblur .chips button{ -webkit-backdrop-filter:none; backdrop-filter:none; }
body.noblur .chips button:not(.on){ background:var(--glass-2); }
.chips button:hover{ background:var(--glass-2); }
.chips button i{ width:8px; height:8px; border-radius:2px; background:var(--c); }
.chips button small{ font-size:11px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.chips button.on{ background:var(--ink); color:var(--ink-inv); border:var(--brut); box-shadow:var(--brut-sh); transform:translate(-1px,-1px); }
.chips button.on small{ color:var(--ink-inv); opacity:.65; }

/* ── 동선 표시줄 ── */
.routebar{ position:fixed; z-index:21; left:50%; top:calc(var(--safe-t) + var(--s2)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; height:52px; padding:0 8px 0 18px; border-radius:var(--r-l);
  max-width:min(560px, calc(100vw - 32px)); }
.routebar .dot{ width:10px; height:10px; border-radius:3px; background:var(--c); flex:none; }
.routebar b{ font-size:14.5px; font-weight:800; white-space:nowrap; }
.routebar span{ font-size:12.5px; color:var(--ink-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routebar .x{ width:36px; height:36px; border-radius:var(--r-s); display:grid; place-items:center; margin-left:4px; color:var(--ink-2); background:var(--surf-2); flex:none; }
.routebar .x:hover{ background:var(--surf-3); }

/* ── 장소 카드 : 벤토 타일 ── */
.card{ position:fixed; z-index:23; right:max(16px, env(safe-area-inset-right)); top:var(--top); width:380px; max-height:calc(100% - var(--top) - 104px - var(--safe-b));
  display:flex; flex-direction:column; border-radius:var(--r-l); overflow:hidden;
  transform:translateX(calc(100% + 40px)); opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.2,1.1,.3,1), opacity .3s; }
.card.on{ transform:none; opacity:1; pointer-events:auto; }
.card .ph{ position:relative; flex:none; margin:var(--s1) var(--s1) 0; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r); background:#1c2a36; }
.card .phart{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 55%, #14202b) 100%); }
.card .phart .ic{ position:relative; width:64px; height:64px; stroke-width:1.2; }
.card .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:phIn .5s ease both; }
@keyframes phIn{ from{ opacity:0; transform:scale(1.03); } to{ opacity:1; transform:none; } }
.card .ph::after{ content:''; position:absolute; inset:auto 0 0 0; height:50%; pointer-events:none; background:linear-gradient(0deg, rgba(10,18,26,.55), transparent); }
.card .kch{ position:absolute; left:12px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px 0 8px; border-radius:var(--r-s);
  background:rgba(255,255,255,.92); color:var(--ink, #14202b); color:#14202b; font-size:12px; font-weight:700; }
.card .kch i{ width:8px; height:8px; border-radius:2px; background:var(--c); }
.card .cap{ position:absolute; right:12px; bottom:14px; z-index:1; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.85); }
.card .ph .x{ position:absolute; right:8px; top:8px; z-index:2; width:34px; height:34px; border-radius:var(--r-s); display:grid; place-items:center; color:#14202b; background:rgba(255,255,255,.92); }
.card .ph .x:hover{ background:#fff; }
.card .cb{ padding:var(--s2) var(--s2) 0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.card h2{ margin:0; font-size:22px; font-weight:800; line-height:1.25; letter-spacing:-.04em; }
.card .sum{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.card .kv{ list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); }
.card .kv li{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:var(--r); background:var(--surf-2); font-size:13px; line-height:1.45; min-width:0; }
.card .kv li > .ic{ width:18px; height:18px; color:var(--acc); margin-bottom:2px; }
.card .kv li em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-3); letter-spacing:.01em; }
.card .kv li .v{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
.card .kv li b{ font-weight:800; font-size:15px; letter-spacing:-.02em; color:var(--ink); }
.card .kv li small{ color:var(--ink-3); font-weight:600; }
.card .kv li .lnk{ color:var(--acc-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.card .kv li:has(.near){ grid-column:1 / -1; }
.card .kv li:only-child{ grid-column:1 / -1; }
.card .kv li:first-child:nth-last-child(2):has(+ li .near){ grid-column:1 / -1; }
.card .kv .near{ display:grid; grid-template-columns:1fr; gap:4px; margin-top:2px; }
.card .kv .near button{ display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:4px 10px 4px 6px; border-radius:var(--r-s); font-size:12.5px; font-weight:650; background:var(--surf); border:1px solid var(--line-2); color:var(--ink-2); text-align:left; }
.card .kv .near button .n{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .kv .near button small{ flex:none; margin-left:auto; font-variant-numeric:tabular-nums; }
.card .kv .near button:hover{ border-color:var(--acc-line); color:var(--ink); }
.card .kv .near button i{ flex:none; width:18px; height:18px; border-radius:5px; display:grid; place-items:center; background:var(--c); color:#fff; }
.card .kv .near button i .ic{ width:11px; height:11px; stroke-width:2.2; }
.card .ca{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); padding:var(--s2); }
.card .ca > :only-child, .card .ca .wide, .card .ca > :first-child:nth-last-child(3){ grid-column:1 / -1; }
.abtn{ height:46px; padding:0 14px; border-radius:var(--r); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink);
  background:var(--surf); border:1px solid var(--line); text-decoration:none; white-space:nowrap; transition:transform .15s, background .15s, box-shadow .15s; }
.abtn:hover{ background:var(--surf-3); }
.abtn:active{ transform:scale(.98); }
.abtn .ic{ width:18px; height:18px; }
.abtn.pri{ background:var(--acc); color:#fff; border:var(--brut); box-shadow:var(--brut-sh); }
.abtn.pri:hover{ background:var(--acc-ink); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.abtn.pri:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.abtn.hot{ background:var(--warm); color:#fff; border:var(--brut); box-shadow:var(--brut-sh); }
.abtn.hot:hover{ background:#c9502f; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.abtn.on{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
body.night .abtn.pri, body.night .abtn.hot, body.night .abtn.nv, body.night .tb.fest{ border-color:#eef4f8; }

/* ── 아래 : 도크 ── */
.dock{ position:fixed; z-index:22; left:50%; bottom:calc(var(--s2) + var(--safe-b)); transform:translateX(-50%); display:flex; gap:4px; padding:6px; border-radius:var(--r-l); }
.dock button{ height:48px; min-width:108px; padding:0 18px; border-radius:var(--r-s); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink-2);
  transition:background .15s, color .15s; }
.dock button:hover{ color:var(--ink); background:var(--surf-2); }
.dock button .ic{ width:20px; height:20px; }
.dock button em{ font-style:normal; font-size:11px; font-weight:800; padding:2px 6px; border-radius:6px; background:var(--acc-soft); color:var(--acc-ink); font-variant-numeric:tabular-nums; }
.dock button.on{ background:var(--ink); color:var(--ink-inv); }
.dock button.on em{ background:rgba(255,255,255,.18); color:var(--ink-inv); }

/* ── 가로 타일 줄 (장소 · 추천 코스) ── */
.rail{ position:fixed; z-index:21; left:0; right:0; bottom:calc(88px + var(--safe-b)); display:flex; gap:var(--s1); overflow-x:auto; overscroll-behavior-x:contain;
  padding:8px max(16px, calc(50vw - 600px)) 8px; scroll-snap-type:x proximity; scrollbar-width:none;
  transform:translateY(24px); opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.2,1.1,.3,1), opacity .25s; }
.rail::-webkit-scrollbar{ display:none; }
.rail.on{ transform:none; opacity:1; pointer-events:auto; }
.rail .pc{ flex:none; width:212px; scroll-snap-align:start; display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-l); text-align:left; transition:background .15s, box-shadow .15s, transform .15s; }
.rail .pc:hover{ background:var(--glass-2); }
.rail .pc .ib{ width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center; flex:none; background:var(--c); color:#fff; }
.rail .pc .ib .ic{ width:20px; height:20px; stroke-width:2; }
.rail .pc .tx{ min-width:0; }
.rail .pc b{ display:block; font-size:14px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.03em; }
.rail .pc span{ display:block; font-size:12px; color:var(--ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.rail .pc.on{ border:var(--brut); box-shadow:var(--brut-sh); transform:translate(-1px,-1px); }
.rail .cc{ position:relative; flex:none; width:300px; scroll-snap-align:start; padding:var(--s2); border-radius:var(--r-l); text-align:left; overflow:hidden; transition:background .15s, box-shadow .15s, transform .15s; }
.rail .cc:hover{ background:var(--glass-2); }
.rail .cc .t{ display:flex; align-items:center; gap:10px; }
.rail .cc .t i{ width:32px; height:32px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--c); color:#fff; flex:none; }
.rail .cc .t i .ic{ width:17px; height:17px; stroke-width:2.1; }
.rail .cc .t b{ font-size:16px; font-weight:800; letter-spacing:-.03em; }
.rail .cc .t small{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-3); }
.rail .cc p{ margin:10px 0 12px; font-size:12.5px; line-height:1.5; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rail .cc .m{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.rail .cc .m span{ font-size:12px; font-weight:750; padding:8px 6px; border-radius:var(--r-s); background:var(--surf-2); color:var(--ink); text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail .cc.on{ border:var(--brut); box-shadow:var(--brut-sh); transform:translate(-1px,-1px); }
.rail .note{ flex:none; align-self:center; width:220px; font-size:11.5px; line-height:1.55; color:var(--ink-3); padding:0 8px; }

/* ── 지도 조작 ── */
.ctl{ position:fixed; z-index:21; right:max(16px, env(safe-area-inset-right)); bottom:calc(var(--s2) + var(--safe-b)); display:flex; gap:2px; padding:4px; border-radius:var(--r-l); transition:opacity .25s; }
.ctl button{ width:44px; height:44px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--ink); transition:background .15s; }
.ctl button:hover{ background:var(--surf-2); }
.ctl #bCompass .ic{ width:24px; height:24px; color:var(--warm); transition:transform .1s linear; }

/* ── 측정 : 자 · 면적 · GPS 좌표 ── */
.ctl .sep{ width:1px; height:24px; background:var(--line); align-self:center; margin:0 2px; }
.ctl button.on{ background:var(--ink); color:var(--ink-inv); }
.mlabels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3; }
.mlbl{ position:absolute; left:0; top:0; transform:translate(-9999px,-9999px); will-change:transform; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  background:rgba(255,255,255,.94); color:#14202b; border:1.5px solid #14202b; font-variant-numeric:tabular-nums; }
.mlbl.mid{ pointer-events:auto; width:24px; height:24px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:18px; line-height:1; font-weight:800;
  background:#fff; color:var(--acc); border:2px solid var(--acc); box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:grab; touch-action:none; transition:background .15s, color .15s; }
.mlbl.mid:hover{ background:var(--acc); color:#fff; }
.mlbl.tot{ font-size:13.5px; padding:6px 10px; background:#14202b; color:#fff; border-color:#14202b; box-shadow:2px 2px 0 rgba(20,32,43,.35); }
.meas{ position:fixed; z-index:24; left:var(--gut); bottom:calc(var(--s2) + var(--safe-b)); width:320px; border-radius:var(--r-l); padding:var(--s2); display:flex; flex-direction:column; gap:12px; }
.meas .mh{ display:flex; align-items:center; gap:10px; }
.meas .mi{ width:34px; height:34px; border-radius:var(--r-s); background:var(--ink); color:var(--ink-inv); display:grid; place-items:center; flex:none; }
.meas .mi .ic{ width:19px; height:19px; }
.meas .mh b{ font-size:16px; font-weight:800; letter-spacing:-.03em; white-space:nowrap; }
.meas .hint{ font-size:12px; color:var(--ink-3); font-weight:600; line-height:1.35; }
.meas .x{ margin-left:auto; width:34px; height:34px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--ink-2); background:var(--surf-2); flex:none; }
.meas .rows{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); }
.meas .rows:empty{ display:none; }
.meas .rows div{ padding:10px 12px; border-radius:var(--r); background:var(--surf-2); min-width:0; }
.meas .rows div.big, .meas .rows div.wide{ grid-column:1 / -1; }
.meas .rows div.big{ background:var(--ink); color:var(--ink-inv); }
.meas .rows small{ display:block; font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.01em; }
.meas .rows div.big small{ color:var(--ink-inv); opacity:.65; }
.meas .rows b{ display:block; margin-top:2px; font-size:15px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; word-break:break-all; line-height:1.3; }
.meas .rows div.big b{ font-size:21px; }
.meas .row{ display:flex; gap:var(--s1); }
.meas .ob{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 10px; border-radius:var(--r-s); font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surf-2); }
.meas .ob .ic{ width:16px; height:16px; }
.meas .ob.pri{ margin-left:auto; color:#fff; background:var(--acc); }
body.measuring .viewer{ cursor:crosshair; }
body.measuring .mk{ pointer-events:none; opacity:.55; }
body.measuring .card, body.measuring .rail, body.measuring .navp{ display:none !important; }

/* ── 장소 타이틀 (날아가는 동안) ── */
.tcard{ position:fixed; z-index:15; left:50%; top:40%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; opacity:0; white-space:nowrap; }
.tcard small{ display:block; font-size:12px; font-weight:800; letter-spacing:.24em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); margin-bottom:6px; }
.tcard b{ display:block; font-family:var(--brush); font-weight:400; font-size:clamp(40px,5.4vw,70px); line-height:1.1; color:#fff; letter-spacing:.02em; text-shadow:0 4px 24px rgba(0,10,20,.5); }
.tcard.play{ animation:tc 1.9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tc{ 0%{ opacity:0; transform:translate(-50%,-38%) scale(.97); filter:blur(8px); } 18%{ opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
  70%{ opacity:1; transform:translate(-50%,-52%); filter:blur(0); } 100%{ opacity:0; transform:translate(-50%,-58%) scale(1.02); filter:blur(5px); } }

/* ── 불러오기 ── */
.load{ position:fixed; z-index:16; left:50%; bottom:calc(96px + var(--safe-b)); transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  padding:10px 18px 10px 12px; border-radius:var(--r-l); font-size:13px; font-weight:700; transition:opacity .5s; }
.load .spin{ width:24px; height:24px; animation:spin 1.6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.load .bar2{ width:120px; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.load .bar2 i{ display:block; height:100%; width:0; background:var(--acc); border-radius:2px; transition:width .3s; }
.load #lP{ color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:34px; }
.load.done{ opacity:0; pointer-events:none; }
.load.err{ background:#fff3ee; color:#8a2f18; padding:10px 12px 10px 18px; }
.load.err .spin{ display:none; }

/* ── 안내 한 줄 ── */
.toast{ position:fixed; z-index:90; left:50%; top:calc(var(--top) + 52px); transform:translate(-50%,-8px); opacity:0; pointer-events:none;
  padding:12px 18px; border-radius:var(--r); background:rgba(20,32,43,.92); color:#fff; font-size:13.5px; font-weight:600; transition:opacity .3s, transform .3s;
  max-width:min(92vw,560px); text-align:center; box-shadow:0 8px 24px rgba(0,10,20,.25); }
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ── 걸어서 둘러보기 ── */
/* 걷는 중 장소 선택 판 — 이름표를 누르면 뜬다 */
.wpick{ position:fixed; z-index:24; left:50%; bottom:calc(112px + var(--safe-b)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px;
  border-radius:var(--r-l); width:max-content; max-width:calc(100vw - 24px); animation:mUp .3s cubic-bezier(.2,1,.3,1) both; }
.wpick .ib{ width:36px; height:36px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--c, var(--acc)); color:#fff; flex:none; }
.wpick .ib .ic{ width:18px; height:18px; }
.wpick .tx{ display:flex; flex-direction:column; min-width:0; margin-right:4px; }
.wpick .tx b{ font-size:15px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.wpick .tx small{ font-size:12px; color:var(--ink-3); font-weight:600; }
.wpick .abtn{ height:40px; padding:0 12px; font-size:13.5px; }
.wpick .x{ width:32px; height:32px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--ink-3); }
.wpick .x:hover{ background:var(--surf-2); color:var(--ink); }
body.walking .mk{ cursor:pointer; }
body.walking .mk::after{ content:'›'; margin-left:2px; font-weight:800; color:var(--acc); }
body.walking.navOn .wpick{ bottom:calc(120px + var(--safe-b)); }
.walkbar{ position:fixed; z-index:22; left:50%; top:calc(var(--safe-t) + var(--s2)); transform:translateX(-50%); display:flex; align-items:center; gap:16px;
  padding:6px 6px 6px 18px; border-radius:var(--r-l); color:var(--ink-2); font-size:13px; }
.walkbar b{ color:var(--ink); }
.walkbar .abtn{ height:40px; }
@media (min-width:761px) and (hover:hover){ .walkbar{ top:auto; bottom:calc(var(--safe-b) + var(--s3)); white-space:nowrap; } }
@media (min-width:761px) and (hover:none){ .walkbar{ top:calc(var(--safe-t) + 88px); } }
body.walking .chips, body.walking .rail, body.walking .dock, body.walking .card, body.walking .routebar, body.walking .ctl, body.walking .rtags{ display:none !important; }
.walkbar .abtn.pri{ height:40px; }
body.walking.navOn .walkbar, body.walking.navOn .meas{ display:none !important; }
body.walking .hudb{ bottom:calc(var(--s3) + var(--safe-b)); }
body.walking .hud .tx span{ font-size:14px; }
#joy{ position:fixed; left:calc(24px + env(safe-area-inset-left)); bottom:calc(24px + var(--safe-b)); width:120px; height:120px; border-radius:50%; z-index:23;
  background:rgba(255,255,255,.3); box-shadow:inset 0 0 0 2px rgba(255,255,255,.8); touch-action:none; display:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#joy i{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(20,32,43,.3); }
#jumpBtn{ position:fixed; right:calc(24px + env(safe-area-inset-right)); bottom:calc(40px + var(--safe-b)); z-index:23; width:64px; height:64px; border-radius:var(--r-l);
  background:#fff; color:#14202b; font-weight:800; border:var(--brut); box-shadow:var(--brut-sh); display:none; }
body.walking #joy, body.walking #jumpBtn{ display:block; }

/* ═══════ 창 (팝업) — LG.com · LG Virtual Showroom 식 기업형 판 ═══════
   · 흰 판, 모서리 거의 없음(2px), 얇은 회색 선(#e5e5e5), 그림자 하나
   · 제목은 판 위에 '탭 이름표'처럼, 활성 탭·선택 항목은 LG 빨강(#a50034) 밑줄/테두리
   · 주 단추 = 빨강 채움(각진 사각), 보조 단추 = 회색 채움
   · 날짜별 공연 = 쇼룸 판처럼 왼쪽 본문(제목·출연진·프로그램 목록) + 오른쪽 출연진 썸네일 목록(선택 = 빨강 테두리)
   · 뒤 배경은 3D 행사장이 천천히 돈다(body.immersive — app.js) */
:root{
  --lg-red:#a50034; --lg-red-2:#8a002b; --lg-red-soft:rgba(165,0,52,.08);
  --lg-cream:#f3efe9; --lg-cream-2:#f7f5f0; --lg-line:#e5e5e5; --lg-line-2:#d0d0d0;
  --lg-ink:#000; --lg-ink-2:#333; --lg-mute:#767676; --lg-gray:#e9e9e9; --lg-gray-2:#dcdcdc;
  --m-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
body.night{
  --lg-red:#ff5c8a; --lg-red-2:#ff7ea3; --lg-red-soft:rgba(255,92,138,.12);
  --lg-cream:#1a1d22; --lg-cream-2:#15181d; --lg-line:#2c3138; --lg-line-2:#3a4048;
  --lg-ink:#f2f4f6; --lg-ink-2:#d0d6dc; --lg-mute:#8d97a1; --lg-gray:#2a2f36; --lg-gray-2:#363c44;
}
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:var(--s3); background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .3s; }
body.night .modal{ background:rgba(0,0,0,.5); }
.modal.on{ opacity:1; pointer-events:auto; }
.modal .box{ position:relative; width:min(880px,100%); max-height:min(90vh, 100%); display:flex; flex-direction:column; color:var(--lg-ink);
  background:#fff; border:0; border-radius:2px; box-shadow:0 24px 60px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); overflow:hidden;
  transform:translateY(12px); transition:transform .4s cubic-bezier(.2,1,.3,1); }
body.night .modal .box{ background:#111418; }
body.noblur .modal .box{ background:#fff; }
.modal.on .box{ transform:none; }
.modal button{ transition:background .15s, color .15s, border-color .15s, transform .15s; }
.modal button:active{ transform:scale(.985); }
.splash.dim{ opacity:0; pointer-events:none; transform:scale(1.02); }
body.immersive:not(.entered) :is(.top, .chips, .dock, .rail, .ctl, .edit){ opacity:0 !important; pointer-events:none !important; }
body.immersive .marks, body.immersive .rtags{ opacity:0; transition:opacity .3s; }

/* 머리 : 크림색 띠 + 탭 이름표 제목 */
.modal .mh{ position:relative; flex:none; padding:0 64px 0 var(--s3); background:var(--lg-cream); border-bottom:1px solid var(--lg-line); display:flex; align-items:flex-end; gap:var(--s3); min-height:64px; }
.modal .mh .enso{ display:none; }
.modal .mh .ttl{ display:flex; flex-direction:column; justify-content:center; align-self:stretch; padding:12px 0 0; }
.modal .mh small{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--lg-mute); }
.modal .mh h2, .modal .mh h2.brushT{ margin:2px 0 12px; font-family:var(--sans); font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--lg-ink); line-height:1.2; }
.modal .mh .x{ position:absolute; right:var(--s2); top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:2px; display:grid; place-items:center; color:var(--lg-ink); }
.modal .mh .x:hover{ background:rgba(0,0,0,.06); }
body.night .modal .mh .x:hover{ background:rgba(255,255,255,.08); }
.modal .mh .x .ic{ width:20px; height:20px; }
/* 탭 : LG 상단 메뉴처럼 글자 + 빨강 밑줄 */
.modal .tabs{ display:flex; gap:4px; margin:0 0 0 auto; padding:0; background:none; border:0; border-radius:0; align-self:stretch; }
.modal .tabs button{ position:relative; height:100%; min-height:64px; padding:0 14px; border-radius:0; font-size:14px; font-weight:700; color:var(--lg-ink-2); background:none; box-shadow:none; }
.modal .tabs button::after{ content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:transparent; transition:background .15s; }
.modal .tabs button:hover{ color:var(--lg-ink); }
.modal .tabs button.on{ color:var(--lg-red); background:none; box-shadow:none; }
.modal .tabs button.on::after{ background:var(--lg-red); }
/* 몸통 · 바닥 */
.modal .mb{ overflow:auto; padding:var(--s3); overscroll-behavior:contain; flex:1; }
.modal .mf{ display:flex; align-items:center; gap:12px; padding:12px var(--s3) calc(12px + var(--safe-b)); border-top:1px solid var(--lg-line); flex:none; background:#fff; }
body.night .modal .mf{ background:#111418; }
.modal .mf label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--lg-mute); cursor:pointer; }
.modal .mf label input{ width:16px; height:16px; accent-color:var(--lg-red); }
.modal .mf .abtn, .modal .mf .abtn.pri{ margin-left:auto; height:36px; padding:0 18px; border:0; box-shadow:none; border-radius:2px; font-size:13px; font-weight:700; background:var(--lg-gray); color:var(--lg-ink-2); transform:none; }
.modal .mf .abtn:hover, .modal .mf .abtn.pri:hover{ background:var(--lg-gray-2); color:var(--lg-ink); transform:none; box-shadow:none; }
.modal .note{ font-size:12px; line-height:1.6; color:var(--lg-mute); margin-top:var(--s2); }
/* LG 단추 */
.lgb{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:2px; font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.lgb .ic{ width:16px; height:16px; }
.lgb.red{ background:var(--lg-red); color:#fff; }
.lgb.red:hover{ background:var(--lg-red-2); }
.lgb.gray{ background:var(--lg-gray); color:var(--lg-ink-2); }
.lgb.gray:hover{ background:var(--lg-gray-2); color:var(--lg-ink); }
.lgb.line{ background:#fff; color:var(--lg-ink); border:1px solid var(--lg-line-2); }
.lgb.line:hover{ border-color:var(--lg-ink); }
body.night .lgb.line{ background:transparent; }
.lgb.sm{ height:32px; padding:0 12px; font-size:12.5px; }

/* 날짜별 공연 — 쇼룸 판 : 본문 | 출연진 목록 */
.lgp{ display:grid; grid-template-columns:minmax(0,1fr) 236px; gap:0; border:1px solid var(--lg-line); }
.lgmain{ padding:var(--s3); min-width:0; }
.lgside{ border-left:1px solid var(--lg-line); background:var(--lg-cream-2); padding:var(--s2); display:flex; flex-direction:column; gap:6px; }
.lgside .lgsh{ font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--lg-mute); text-transform:uppercase; margin:2px 0 6px; }
.lgside .ci{ display:flex; align-items:center; gap:12px; padding:8px; border:2px solid transparent; background:#fff; text-align:left; border-radius:2px; }
body.night .lgside .ci{ background:#1a1e24; }
.lgside .ci img, .lgside .ci .av{ width:64px; height:64px; border-radius:2px; object-fit:cover; flex:none; background:var(--lg-gray); display:grid; place-items:center; font-style:normal; font-size:20px; font-weight:800; color:var(--lg-mute); }
.lgside .ci div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.lgside .ci small{ font-size:11px; font-weight:700; color:var(--lg-mute); letter-spacing:.02em; }
.lgside .ci b{ font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--lg-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lgside .ci:hover{ border-color:var(--lg-line-2); }
.lgside .ci.on{ border-color:var(--lg-red); }
/* 날짜 탭 (LG 메뉴식 : 글자 + 빨강 밑줄) */
.days{ display:flex; gap:0; border-bottom:1px solid var(--lg-line); margin:0 0 var(--s3); overflow-x:auto; scrollbar-width:none; padding:0; background:none; border-radius:0; }
.days::-webkit-scrollbar{ display:none; }
.days button{ position:relative; flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:64px; height:56px; padding:0 12px; border-radius:0; background:none; border:0; color:var(--lg-ink-2); line-height:1.15; }
.days button::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; transition:background .15s; }
.days button:hover{ color:var(--lg-ink); background:none; }
.days button b{ font-size:16px; font-weight:800; letter-spacing:-.02em; color:inherit; }
.days button small{ font-size:11.5px; font-weight:600; margin-top:3px; color:var(--lg-mute); }
.days button.we small{ color:var(--lg-red); }
.days button.on{ color:var(--lg-red); background:none; border:0; box-shadow:none; transform:none; }
.days button.on b, .days button.on small{ color:var(--lg-red); }
.days button.on::after{ background:var(--lg-red); }
.days button.today::after{ background:transparent; }
.days button.today b::after{ content:'오늘'; font-size:9px; font-weight:800; color:#fff; background:var(--lg-red); padding:1px 5px; border-radius:2px; margin-left:4px; vertical-align:2px; }
/* 본문 : 모델명·제목 (쇼룸의 PL2 / LG XBOOM Go PL2 처럼) */
.head1{ display:block; margin:0 0 var(--s2); padding:0; background:none; border:0; box-shadow:none; color:var(--lg-ink); border-radius:0; overflow:visible; }
.head1::before, .head1::after{ display:none; }
.head1 .k{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--lg-mute); text-transform:none; }
body.night .head1 .k{ color:var(--lg-mute); }
.head1 h3{ margin:4px 0 0; font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--lg-ink); }
.head1 h3 small{ display:block; font-size:13px; font-weight:500; margin-top:4px; color:var(--lg-mute); }
/* 선택된 출연자 (쇼룸의 제품 사진 자리) */
.lgfeat{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2); margin:var(--s2) 0 var(--s3); background:var(--lg-cream-2); border:1px solid var(--lg-line); border-radius:2px; }
.lgfeat img, .lgfeat .av{ width:112px; height:112px; border-radius:2px; object-fit:cover; flex:none; background:var(--lg-gray); display:grid; place-items:center; font-style:normal; font-size:34px; font-weight:800; color:var(--lg-mute); }
.lgfeat .tx{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.lgfeat .tx small{ font-size:11.5px; font-weight:700; color:var(--lg-mute); letter-spacing:.02em; }
.lgfeat .tx b{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--lg-ink); }
.lgfeat .tx span{ font-size:13px; color:var(--lg-ink-2); }
.lgfeat .tx .when{ margin-top:6px; font-size:12.5px; font-weight:700; color:var(--lg-red); }
/* 소제목 · 프로그램 목록 (쇼룸의 특징 목록처럼 점 목록, 시간은 굵게) */
.sub4{ margin:0 0 6px; font-size:14px; font-weight:800; color:var(--lg-ink); letter-spacing:-.01em; text-transform:none; }
.tt{ position:relative; list-style:none; margin:0 0 var(--s2); padding:0; display:flex; flex-direction:column; }
.tt::before{ display:none; }
.tt li{ position:relative; display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:baseline; padding:9px 0 9px 16px; border-bottom:1px solid var(--lg-line); font-size:13.5px; line-height:1.5; color:var(--lg-ink-2); background:none; border-radius:0; }
.tt li:last-child{ border-bottom:0; }
.tt li::before{ content:''; position:absolute; left:2px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--lg-ink); box-shadow:none; }
body.night .tt li::before{ background:var(--lg-ink); }
.tt li time{ font-family:var(--m-mono); font-weight:700; font-size:13px; color:var(--lg-ink); font-variant-numeric:tabular-nums; letter-spacing:0; }
.tt li span{ color:var(--lg-ink-2); font-weight:500; }
.tt li.hl span{ font-weight:700; color:var(--lg-ink); }
.tt li.hl time{ color:var(--lg-red); }
.tt li.hl::before{ background:var(--lg-red); }
.tt li.now time, .tt li.now span{ color:var(--lg-red); font-weight:700; }
.tt li.now::before{ background:var(--lg-red); box-shadow:0 0 0 3px var(--lg-red-soft); }
.tt li.now span::after{ content:'곧 시작'; margin-left:8px; font-size:10.5px; font-weight:700; color:#fff; background:var(--lg-red); padding:2px 6px; border-radius:2px; vertical-align:2px; }
/* 단추 줄 */
.lgbtns{ display:flex; gap:8px; margin-top:var(--s2); flex-wrap:wrap; }
.abtn.pri.stagego{ margin:0; height:40px; padding:0 18px; border:0; border-radius:2px; background:var(--lg-red); color:#fff; font-size:13.5px; font-weight:700; box-shadow:none; transform:none; }
.abtn.pri.stagego .ic{ width:16px; height:16px; color:#fff; }
.abtn.pri.stagego:hover{ background:var(--lg-red-2); transform:none; box-shadow:none; border:0; color:#fff; }
.abtn.pri.stagego:active{ transform:scale(.985); }

/* 활력 — 절제된 움직임 */
@keyframes mUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes mPulse{ 0%,100%{ box-shadow:0 0 0 3px var(--lg-red-soft); } 50%{ box-shadow:0 0 0 8px rgba(165,0,52,.03); } }
.modal .mb > *{ animation:mUp .45s cubic-bezier(.2,1,.3,1) both; }
.lgmain > *{ animation:mUp .45s cubic-bezier(.2,1,.3,1) both; }
.lgmain > :nth-child(2){ animation-delay:.05s; } .lgmain > :nth-child(3){ animation-delay:.1s; } .lgmain > :nth-child(4){ animation-delay:.15s; } .lgmain > :nth-child(5){ animation-delay:.2s; } .lgmain > :nth-child(n+6){ animation-delay:.25s; }
.lgside .ci{ animation:mUp .4s cubic-bezier(.2,1,.3,1) both; animation-delay:calc(.1s + var(--i, 0) * .06s); }
.tt li.now::before{ animation:mPulse 2.2s ease-in-out infinite; }
.sp .it{ animation:mUp .45s cubic-bezier(.2,1,.3,1) both; }
.sp .it:nth-child(2){ animation-delay:.05s; } .sp .it:nth-child(3){ animation-delay:.1s; } .sp .it:nth-child(4){ animation-delay:.15s; } .sp .it:nth-child(5){ animation-delay:.2s; } .sp .it:nth-child(6){ animation-delay:.25s; } .sp .it:nth-child(n+7){ animation-delay:.3s; }
.card .kv li{ animation:mUp .45s cubic-bezier(.2,1,.3,1) both; }
.card .kv li:nth-child(2){ animation-delay:.06s; } .card .kv li:nth-child(3){ animation-delay:.12s; } .card .kv li:nth-child(n+4){ animation-delay:.18s; }
@media (prefers-reduced-motion: reduce){ .modal .mb > *, .lgmain > *, .lgside .ci, .tt li.now::before, .sp .it, .card .kv li{ animation:none !important; } }

/* 특별 프로그램 — 흰 카드 격자 */
.sp{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.sp .it{ position:relative; display:flex; flex-direction:column; gap:10px; padding:var(--s2); border-radius:2px; background:#fff; border:1px solid var(--lg-line); text-align:left; transition:border-color .15s, box-shadow .15s; }
body.night .sp .it{ background:#1a1e24; }
.sp .it:hover{ border-color:var(--lg-ink); box-shadow:none; transform:none; }
.sp .it .ib{ width:44px; height:44px; border-radius:2px; display:grid; place-items:center; background:var(--lg-cream); color:var(--lg-ink); }
.sp .it .ib .ic{ width:22px; height:22px; stroke-width:2; }
.sp .it b{ font-size:15px; font-weight:800; color:var(--lg-ink); line-height:1.3; letter-spacing:-.02em; }
.sp .it .w{ align-self:flex-start; font-size:11.5px; font-weight:700; color:var(--lg-red); background:var(--lg-red-soft); padding:3px 8px; border-radius:2px; }
.sp .it .w.always{ color:var(--lg-ink-2); background:var(--lg-gray); }
.sp .it p{ margin:0; font-size:12.8px; line-height:1.55; color:var(--lg-ink-2); }
.sp .it .go{ align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#fff; padding:7px 12px 7px 10px; border-radius:2px; background:var(--lg-red); }
.sp .it .go .ic{ width:14px; height:14px; }
.sp .it .go:hover{ background:var(--lg-red-2); color:#fff; }
.orig{ display:block; width:100%; height:auto; border-radius:2px; box-shadow:0 0 0 1px var(--lg-line); background:#fff; }

/* 오시는 길 */
.acc h3{ margin:var(--s3) 0 var(--s1); font-size:14px; font-weight:800; color:var(--lg-ink); display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
.acc h3 .ic{ width:16px; height:16px; color:var(--lg-red); }
.acc h3:first-child{ margin-top:0; }
.acc .navi{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-radius:2px; background:var(--lg-cream-2); border:1px solid var(--lg-line); }
.acc .navi b{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--lg-ink); }
.acc .navi span{ display:block; font-size:13px; color:var(--lg-mute); margin-top:2px; }
.acc .navi .abtn{ margin-left:auto; }
.acc .abtn, .acc .abtn.pri, .acc .abtn.hot{ height:40px; padding:0 18px; border:0; border-radius:2px; background:var(--lg-red); color:#fff; font-size:13.5px; font-weight:700; box-shadow:none; transform:none; }
.acc .abtn:hover, .acc .abtn.pri:hover, .acc .abtn.hot:hover{ background:var(--lg-red-2); transform:none; box-shadow:none; }
.acc .lots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:8px; }
.acc .lots .lot{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:2px; background:#fff; border:1px solid var(--lg-line); text-align:left; }
body.night .acc .lots .lot{ background:#1a1e24; }
.acc .lots .lot .ib{ width:36px; height:36px; border-radius:2px; background:var(--lg-cream); color:var(--lg-ink); display:grid; place-items:center; flex:none; }
.acc .lots .lot b{ display:block; font-size:14px; font-weight:800; color:var(--lg-ink); }
.acc .lots .lot span{ font-size:12px; color:var(--lg-mute); }
.acc .lots .lot .ln{ margin-left:auto; display:flex; gap:4px; flex:none; }
.acc .lots .lot .ln a, .acc .lots .lot .ln button{ font-size:12px; font-weight:700; padding:7px 10px; border-radius:2px; background:var(--lg-gray); color:var(--lg-ink-2); text-decoration:none; }
.acc .lots .lot .ln a:hover, .acc .lots .lot .ln button:hover{ background:var(--lg-gray-2); color:var(--lg-ink); }
.acc .others{ columns:2; column-gap:var(--s3); font-size:13px; color:var(--lg-ink-2); margin:0; padding-left:18px; }
.acc .others li{ margin:4px 0; break-inside:avoid; }
.acc .others small{ color:var(--lg-mute); }
.acc .route{ margin-top:8px; padding:var(--s2); border-radius:2px; background:#fff; border:1px solid var(--lg-line); }
body.night .acc .route{ background:#1a1e24; }
.acc .route b{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--lg-ink); }
.acc .route b i{ font-style:normal; width:22px; height:22px; border-radius:2px; background:var(--lg-red); color:#fff; display:grid; place-items:center; font-size:12px; }
.acc .route ol{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.acc .route li{ font-size:12.5px; padding:5px 10px; border-radius:2px; background:var(--lg-gray); color:var(--lg-ink-2); font-weight:650; }
.acc .route li + li::before{ content:'›'; color:var(--lg-mute); margin:0 6px 0 -4px; font-weight:800; }
.acc .route li:last-child{ background:var(--lg-ink); color:#fff; }
body.night .acc .route li:last-child{ background:var(--lg-ink); color:#111418; }
.tag25{ display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:2px; background:var(--lg-gray); color:var(--lg-mute); vertical-align:middle; margin-left:6px; }

/* 2D 안내도 */
.mapbox{ width:min(1200px,100%); }
.mapbox .mb{ padding:0; background:#fff; }
.mapbox img{ display:block; width:100%; height:auto; }

/* ═══════ 길찾기 ═══════ */
:root{ --nav-blue:#2b5fc9; --nav-start:#1f9d5a; --nav-end:#d9483e; }
body.night{ --nav-blue:#5c8cf0; }
.navp{ position:fixed; z-index:24; left:var(--gut); top:var(--top); width:384px; max-height:calc(100% - var(--top) - 96px - var(--safe-b));
  display:flex; flex-direction:column; border-radius:var(--r-l); overflow:hidden; animation:npIn .3s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes npIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.navp .nh{ display:flex; align-items:center; gap:10px; padding:var(--s2) var(--s2) var(--s1); flex:none; }
.navp .nh .mode{ display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 10px 0 8px; border-radius:var(--r-s); background:var(--nav-blue); color:#fff; font-size:13px; font-weight:800; }
.navp .nh .mode .ic{ width:16px; height:16px; stroke-width:2.2; }
.navp .nh b{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.navp .x, .pick .x{ margin-left:auto; width:36px; height:36px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--ink-2); background:var(--surf-2); flex:none; }
.navp .x:hover, .pick .x:hover{ background:var(--surf-3); }
.navp .od{ position:relative; margin:0 var(--s2); border-radius:var(--r); background:var(--surf); border:1px solid var(--line); flex:none; }
.navp .f{ width:100%; display:flex; align-items:center; gap:10px; height:50px; padding:0 56px 0 14px; text-align:left; }
.navp .f + .f{ border-top:1px solid var(--line-2); }
.navp .f:first-child{ border-radius:var(--r) var(--r) 0 0; }
.navp .f:last-of-type{ border-radius:0 0 var(--r) var(--r); }
.navp .f:hover{ background:var(--surf-2); }
.navp .f i{ width:11px; height:11px; border-radius:50%; border:3px solid var(--nav-start); flex:none; }
.navp .f.e i{ border-color:var(--nav-end); }
.navp .f.me i{ border:0; background:var(--nav-blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--nav-blue) 25%, transparent); }
.navp .f .k{ font-size:12px; font-weight:700; color:var(--ink-3); width:26px; flex:none; }
.navp .f b{ font-size:15px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; }
.navp .f b.ph{ color:var(--ink-3); font-weight:600; }
.navp .sw{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:var(--r-s); display:grid; place-items:center;
  background:var(--surf); border:1px solid var(--line); color:var(--ink-2); }
.navp .sw .ic{ width:18px; height:18px; }
.navp .oa{ display:flex; gap:var(--s1); padding:var(--s1) var(--s2) 0; flex:none; }
.navp .ob{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px 0 10px; border-radius:var(--r-s); font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surf-2); }
.navp .ob .ic{ width:16px; height:16px; }
.navp .ob.mine{ color:var(--nav-blue); }
.navp .out{ margin:var(--s2) var(--s2) 0; padding:12px 14px; border-radius:var(--r); background:color-mix(in srgb, var(--nav-end) 9%, var(--surf)); border:1px solid color-mix(in srgb, var(--nav-end) 30%, transparent);
  font-size:13px; line-height:1.55; color:var(--ink-2); flex:none; }
.navp .out b{ color:var(--ink); }
.navp .out .row{ display:flex; gap:var(--s1); margin-top:10px; flex-wrap:wrap; }
.navp .out .abtn{ height:40px; font-size:13px; }
.navp .res{ overflow:auto; margin-top:var(--s2); padding:0 var(--s2); overscroll-behavior:contain; min-height:0; display:flex; flex-direction:column; gap:var(--s1); }
.navp .res:empty{ display:none; }
.navp .res .wait{ margin:0; padding:var(--s2); font-size:13.5px; color:var(--ink-3); }
.opt{ position:relative; width:100%; display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:4px; padding:14px 16px; text-align:left; border-radius:var(--r); background:var(--surf-2); border:1px solid transparent; transition:background .15s; }
.opt:hover{ background:var(--surf-3); }
.opt .tg{ font-size:12px; font-weight:800; color:var(--nav-blue); }
.opt .tg small{ color:var(--ink-3); font-weight:650; margin-left:6px; font-size:11.5px; }
.opt .tm{ grid-column:1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--ink-2); }
.opt .tm b{ font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1.1; font-variant-numeric:tabular-nums; }
.opt .tm b small{ font-size:14px; font-weight:700; margin-left:1px; letter-spacing:0; }
.opt .tm em{ font-style:normal; font-weight:800; color:var(--ink); font-size:15px; }
.opt .tm i{ width:1px; height:12px; background:var(--line); align-self:center; }
.opt .more{ grid-column:2; grid-row:1 / span 2; align-self:center; display:inline-flex; align-items:center; gap:2px; font-size:12.5px; font-weight:700; color:var(--ink-3); }
.opt .more .ic{ width:14px; height:14px; }
.opt.on{ background:var(--surf); border:var(--brut); box-shadow:var(--brut-sh); }
.steps{ list-style:none; margin:0; padding:4px 0 8px; }
.steps li{ position:relative; display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:8px 8px; border-radius:var(--r-s); cursor:pointer; }
.steps li:hover{ background:var(--surf-2); }
.steps li:not(:last-child)::after{ content:''; position:absolute; left:24px; top:44px; bottom:-8px; width:2px; background:color-mix(in srgb, var(--nav-blue) 30%, transparent); }
.steps li .ar{ position:relative; z-index:1; width:34px; height:34px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--surf); border:1px solid var(--line); color:var(--nav-blue); }
.steps li .ar .ic{ width:20px; height:20px; stroke-width:2.4; }
.steps li.s .ar{ background:var(--nav-start); border-color:transparent; color:#fff; }
.steps li.e .ar{ background:var(--nav-end); border-color:transparent; color:#fff; }
.steps li b{ font-size:14px; font-weight:700; line-height:1.35; letter-spacing:-.02em; }
.steps li small{ font-size:12px; font-weight:700; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.navp .go{ padding:var(--s2); display:flex; flex-direction:column; gap:var(--s1); flex:none; }
.navp .go:empty{ display:none; }
.navp .go .abtn{ width:100%; height:52px; font-size:15px; }
.abtn.nv{ background:var(--nav-blue); color:#fff; border:var(--brut); box-shadow:var(--brut-sh); }
.abtn.nv:hover{ background:#2452b0; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.navp .go p{ margin:0; font-size:12px; line-height:1.55; color:var(--ink-3); }

/* 장소 고르기 */
.pick{ position:fixed; z-index:26; left:var(--gut); top:var(--top); width:384px; max-height:calc(100% - var(--top) - 24px - var(--safe-b));
  display:flex; flex-direction:column; border-radius:var(--r-l); overflow:hidden; background:rgba(255,255,255,.97); animation:npIn .25s cubic-bezier(.2,1.1,.3,1) both; }
body.night .pick{ background:rgba(16,24,34,.97); }
.pick .ph{ display:flex; align-items:center; padding:var(--s2) var(--s2) var(--s1); flex:none; }
.pick .pt{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.pick .q{ display:flex; align-items:center; gap:8px; margin:0 var(--s2) var(--s1); height:46px; padding:0 14px; border-radius:var(--r); background:var(--surf-2); flex:none; color:var(--ink-3); border:1px solid transparent; }
.pick .q:focus-within{ border-color:var(--ink); background:var(--surf); }
.pick .q input{ flex:1; min-width:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--ink); outline:none; }
.pick .pl{ overflow:auto; padding:0 var(--s1) var(--s2); overscroll-behavior:contain; min-height:0; }
.pick .spc{ padding:2px 0 var(--s1); border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.pick h4{ margin:var(--s2) var(--s1) 4px; font-size:12px; font-weight:800; color:var(--ink-3); letter-spacing:.02em; }
.pick .it{ width:100%; display:flex; align-items:center; gap:12px; padding:8px; border-radius:var(--r); text-align:left; }
.pick .it:hover{ background:var(--surf-2); }
.pick .it .ib{ width:38px; height:38px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--c); color:#fff; flex:none; }
.pick .it .ib .ic{ width:20px; height:20px; stroke-width:2; }
.pick .it b{ display:block; font-size:14.5px; font-weight:750; letter-spacing:-.02em; }
.pick .it > span > span{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
.pick .none{ padding:var(--s2); font-size:13.5px; color:var(--ink-3); }

/* 출발 · 도착 핀 */
.npin{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; transform:translate(-9999px,-9999px); will-change:transform; pointer-events:none; }
.npin b{ display:grid; place-items:center; min-width:44px; height:30px; padding:0 10px; border-radius:var(--r-s); font-size:12.5px; font-weight:800; color:#fff; background:var(--nav-start); box-shadow:0 0 0 2px #fff; }
.npin::after{ content:''; width:0; height:0; margin-top:1px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--nav-start); }
.npin.e b{ background:var(--nav-end); }
.npin.here b{ background:var(--nav-start); display:inline-flex; align-items:center; gap:5px; padding:0 10px 0 8px; }
.npin.here b .ic{ width:14px; height:14px; stroke-width:2.4; }
.npin.here::after{ border-top-color:var(--nav-start); }
body.walking .npin.here{ display:none; }
.npin.e::after{ border-top-color:var(--nav-end); }

/* 내 위치 */
.memark{ position:absolute; left:0; top:0; width:0; height:0; z-index:4; pointer-events:none; will-change:transform; }
.memark .dot{ position:absolute; left:-10px; top:-10px; width:20px; height:20px; border-radius:50%; background:var(--nav-blue); box-shadow:0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.3); }
.memark .acc{ position:absolute; left:calc(var(--r-me, 30px) * -1); top:calc(var(--r-me, 30px) * -1); width:calc(var(--r-me, 30px) * 2); height:calc(var(--r-me, 30px) * 2); border-radius:50%;
  background:color-mix(in srgb, var(--nav-blue) 14%, transparent); border:1px solid color-mix(in srgb, var(--nav-blue) 40%, transparent); animation:accP 2.2s ease-out infinite alternate; }
.memark .cone{ position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%; display:none; transform:rotate(var(--hd, 0deg));
  background:conic-gradient(from -30deg, color-mix(in srgb, var(--nav-blue) 55%, transparent) 0deg, transparent 60deg);
  -webkit-mask:radial-gradient(circle, #000 18%, transparent 72%); mask:radial-gradient(circle, #000 18%, transparent 72%); }
.memark.hd .cone{ display:block; }
@keyframes accP{ from{ transform:scale(.9); opacity:.95; } to{ transform:scale(1.08); opacity:.5; } }

/* 안내 중 */
.hud{ position:fixed; z-index:30; left:50%; top:calc(var(--safe-t) + var(--s2)); transform:translateX(-50%); width:min(540px, calc(100vw - 32px)); display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2); border-radius:var(--r-l); color:#fff; background:var(--nav-blue); border:var(--brut); box-shadow:var(--brut-sh); }
.hud .ar{ width:60px; height:60px; border-radius:var(--r); background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; }
.hud .ar .ic{ width:38px; height:38px; stroke-width:2.6; }
.hud .tx{ min-width:0; }
.hud .tx b{ display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.hud .tx span{ display:block; font-size:15px; font-weight:600; margin-top:4px; line-height:1.3; opacity:.95; }
.hud.arr{ background:var(--nav-end); }
.hudb{ position:fixed; z-index:30; left:50%; bottom:calc(var(--s2) + var(--safe-b)); transform:translateX(-50%); width:min(540px, calc(100vw - 32px)); display:flex; align-items:center; gap:var(--s1); padding:10px 10px 10px 18px; border-radius:var(--r-l); }
.hudb .st{ flex:1; min-width:0; }
.hudb .st b{ display:block; font-size:24px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1; }
.hudb .st span{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.hudb .vb{ width:46px; height:46px; border-radius:var(--r-s); display:grid; place-items:center; background:var(--surf-2); color:var(--ink-2); flex:none; }
.hudb .vb .ic{ width:21px; height:21px; }
.hudb .vb.off{ color:var(--ink-3); opacity:.7; }
.hudb .vb.hot{ color:#fff; background:var(--nav-blue); }
.hudb .end{ height:46px; padding:0 16px; border-radius:var(--r-s); background:var(--nav-end); color:#fff; font-weight:800; font-size:14px; flex:none; }
body.navOn .top, body.navOn .chips, body.navOn .dock, body.navOn .rail, body.navOn .card, body.navOn .routebar, body.navOn .navp, body.navOn .pick, body.navOn .ctl, body.navOn .mk.minor{ display:none !important; }
body.navOpen .chips, body.navOpen .card, body.navOpen .routebar{ display:none !important; }
body.picking .navp{ visibility:hidden; }
/* ═══════ 첫 화면 (포스터) ═══════ */
.splash{ --ink:#16323f; --ink-2:#4d6570; --ink-3:#8a9da5; position:fixed; inset:0; z-index:60; overflow:hidden; background:var(--paper); background-image:var(--grain), radial-gradient(1200px 700px at 80% 10%, #fbfaf7, transparent 70%), radial-gradient(900px 600px at 10% 100%, #e7ecef, transparent 70%);
  color:var(--jjok); transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), visibility 0s .7s; }
.splash.out{ opacity:0; transform:scale(1.04); visibility:hidden; pointer-events:none; }
.splash .swirl{ position:absolute; left:-2vmin; top:0; height:100%; width:auto; max-width:none; pointer-events:none; filter:drop-shadow(0 20px 30px rgba(35,40,75,.18));
  animation:swIn 1.6s cubic-bezier(.2,.8,.2,1) both, swFloat 9s ease-in-out 1.6s infinite alternate; transform-origin:0 50%; }
@keyframes swIn{ from{ opacity:0; transform:translateX(-8%) rotate(-4deg) scale(1.05); } to{ opacity:1; transform:none; } }
@keyframes swFloat{ from{ transform:translateY(0) rotate(0); } to{ transform:translateY(-1.2%) rotate(.8deg); } }
@keyframes ink{ from{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(8px); filter:blur(3px); } 60%{ opacity:1; } to{ opacity:1; clip-path:inset(0 0 0 0); transform:none; filter:none; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.splash .badge{ position:absolute; left:max(20px,3vw); top:calc(18px + var(--safe-t)); display:flex; align-items:center; gap:10px; z-index:2; }
.splash .badge img{ height:clamp(30px,3.6vw,46px); width:auto; display:block; opacity:0; animation:fadeUp .8s .4s both; }
.splash .inner{ position:relative; height:100%; display:grid; align-content:center; column-gap:clamp(24px,4vw,64px);
  grid-template-columns:minmax(0,1fr) auto minmax(320px,auto); grid-template-rows:auto auto; grid-template-areas:". title slogan" ". title info";
  padding:calc(40px + var(--safe-t)) max(32px,5vw) calc(40px + var(--safe-b)) 0; }
.splash .slogan{ grid-area:slogan; align-self:end; font-size:clamp(14px,1.5vw,19px); font-weight:650; font-style:italic; color:var(--jjok-2); letter-spacing:-.01em; margin-bottom:18px; opacity:0; animation:fadeUp .8s .5s both; }
.splash .title{ grid-area:title; height:min(76vh, 700px); width:auto; max-width:40vw; object-fit:contain; opacity:0; animation:ink 1.4s .75s cubic-bezier(.3,.7,.2,1) both; }
.splash .info{ grid-area:info; display:flex; flex-direction:column; align-items:flex-start; }
.splash .date{ color:var(--orange); font-weight:800; line-height:1; letter-spacing:-.03em; opacity:0; animation:fadeUp .8s 1.3s both; }
.splash .date .y{ font-size:clamp(18px,1.9vw,26px); margin-right:6px; }
.splash .date .d{ font-size:clamp(36px,4.4vw,62px); }
.splash .date sup{ font-size:.34em; font-weight:800; vertical-align:top; position:relative; top:.25em; margin-left:2px; }
.splash .date .tilde{ font-size:clamp(26px,3vw,40px); margin:0 6px; }
.splash .date2{ margin-top:6px; padding-left:clamp(40px,4.4vw,70px); }
.splash .where{ font-size:clamp(18px,2vw,26px); font-weight:800; color:var(--orange); margin-top:12px; opacity:0; animation:fadeUp .8s 1.45s both; }
.splash .linked{ margin-top:18px; display:flex; flex-direction:column; gap:8px; opacity:0; animation:fadeUp .8s 1.6s both; }
.splash .linked div{ line-height:1.25; }
.splash .linked b{ display:block; font-size:clamp(15px,1.4vw,19px); color:var(--jjok); font-weight:800; }
.splash .linked span{ font-size:clamp(13px,1.15vw,15px); color:var(--jjok-2); font-weight:650; }

/* 붓 소용돌이 · 붓글씨 단추 — 포스터 물감 결로 그린 붓 획이 왼쪽부터 칠해지며 나타난다 */
.splash .go{ margin-top:clamp(22px,4.2vh,40px); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.bcta, .bsub{ position:relative; display:inline-flex; align-items:center; font-family:var(--sans); font-weight:800; letter-spacing:-.03em; color:#fff; isolation:isolate; -webkit-tap-highlight-color:transparent; }
.bcta .bk, .bsub .bk{ position:absolute; inset:0; z-index:-1; background:center/100% 100% no-repeat;
  transition:transform .35s cubic-bezier(.2,.8,.2,1); transform-origin:0 50%; }
.bcta{ width:min(470px,86vw); aspect-ratio:920/210; padding:0 0 0 9.5%; margin-left:-3%; }
.bcta .bk{ background-image:url('img/brush_cta.webp'); animation:paint 1s 1.85s cubic-bezier(.45,.05,.2,1) both; }
.bcta .tx{ font-size:clamp(19px,1.8vw,24px); line-height:1; text-shadow:0 1px 2px rgba(15,20,50,.45); margin-top:-.1em;
  opacity:0; animation:fadeIn .6s 2.35s both; }
.bcta .enso{ position:absolute; right:16%; top:50%; width:24%; aspect-ratio:1; transform:translateY(-54%) rotate(-10deg); background:url('img/enso_orange.webp') center/contain no-repeat;
  display:grid; place-items:center; opacity:0; animation:ensoIn .9s 2.45s cubic-bezier(.2,.8,.2,1) both; filter:drop-shadow(0 4px 8px rgba(120,40,10,.25)); }
.bcta .enso .ic{ width:34%; height:34%; color:#fff; stroke-width:2.6; filter:drop-shadow(0 1px 1px rgba(80,25,5,.5)); transform:rotate(10deg); }
.bsub{ height:clamp(58px,6.4vw,70px); padding:0 30px 0 26px; margin-left:-2%; min-width:clamp(200px, 19vw, 250px); justify-content:center; }
.bsub .bk{ animation:paint .8s both; }
.bsub.prog .bk{ background-image:url('img/brush_prog.webp'); animation-delay:2.2s; }
.bsub.way  .bk{ background-image:url('img/brush_way.webp'); animation-delay:2.4s; }
.bsub .tx{ font-size:clamp(15px,1.3vw,17px); line-height:1; text-shadow:0 1px 2px rgba(15,20,50,.5); opacity:0; animation:fadeIn .5s both; margin-top:-.05em; }
.bsub.prog .tx{ animation-delay:2.6s; }
.bsub.way .tx{ animation-delay:2.8s; }
.splash .sub{ display:flex; gap:0; flex-wrap:wrap; }
.bcta:hover .bk, .bsub:hover .bk{ transform:scaleX(1.03) translateY(-1px); }
.bcta:hover .enso{ animation:ensoSpin 1.8s linear infinite; opacity:1; }
.bcta:active .bk, .bsub:active .bk{ transform:scaleX(.98); }
@keyframes paint{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ensoIn{ from{ opacity:0; transform:translateY(-54%) rotate(-160deg) scale(.6); } to{ opacity:1; transform:translateY(-54%) rotate(-10deg) scale(1); } }
@keyframes ensoSpin{ from{ transform:translateY(-54%) rotate(-10deg); } to{ transform:translateY(-54%) rotate(350deg); } }
.splash .foot{ position:absolute; right:max(32px,5vw); bottom:calc(18px + var(--safe-b)); font-size:12.5px; color:var(--ink-2); display:flex; gap:14px; align-items:center; opacity:0; animation:fadeUp .8s 2s both; }
.splash .foot b{ color:var(--jjok); font-weight:800; }
.splash .note{ position:absolute; right:max(32px,5vw); top:calc(20px + var(--safe-t)); font-size:11.5px; color:var(--ink-3); max-width:36vw; text-align:right; opacity:0; animation:fadeUp .8s 2.1s both; }


/* ── 위치 고치기 (PC 에서만) ── */
.btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:var(--r-s); font-size:13.5px; font-weight:700; background:#fff; border:1px solid rgba(20,32,43,.14); color:#14202b; text-decoration:none; }
.btn.navy{ background:var(--acc); border:0; color:#fff; }
.edit{ position:fixed; z-index:50; left:16px; bottom:88px; width:340px; padding:16px; border-radius:var(--r-l); background:#fffaf0; color:#14202b; box-shadow:0 16px 40px rgba(20,32,43,.2); font-size:13px; }
.edit h3{ margin:0 0 6px; font-size:15px; color:var(--warm); }
.edit p{ margin:0 0 8px; color:#4a5967; line-height:1.5; }
.edit select{ width:100%; height:38px; font:inherit; margin-bottom:8px; border-radius:var(--r-s); border:1px solid rgba(20,32,43,.14); padding:0 8px; }
.edit .xy{ font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#4a5967; margin-bottom:8px; }
.edit .row{ display:flex; gap:6px; flex-wrap:wrap; }

/* ── 중간 폭 ── */
@media (max-width:1110px) and (min-width:761px){
  .routebar{ left:var(--gut); transform:none; top:calc(var(--top) + 56px); }
  .card.on ~ .ctl{ opacity:0; pointer-events:none; }
}
@media (min-width:761px){ body.cardOn .chips{ max-width:calc(100vw - 440px); } }

/* ═══════ 휴대폰 · 좁은 화면 ═══════ */
@media (max-width: 760px){
  :root{ --top:calc(var(--safe-t) + 72px); --gut:12px; }
  .top{ padding:calc(12px + var(--safe-t)) 12px 0; gap:6px; }
  .brand{ height:48px; padding:0 12px 0 8px; border-radius:var(--r); gap:8px; }
  .brand .bi{ height:30px; }
  .brand .bt{ padding-left:8px; }
  .brand .bt b{ font-size:13.5px; }
  .brand .bt span{ display:none; }
  .tools{ gap:6px; }
  .tb{ height:44px; border-radius:var(--r); }
  #bAccess{ width:44px; padding:0; justify-content:center; }
  #bAccess span, #bMap2d span{ display:none; }
  #bMap2d{ display:none; }
  .tb.fest{ padding:0 12px; }
  .tb.fest .lg{ display:none; }
  .tb.fest .sm{ display:inline; }
  .dn{ height:44px; padding:0 6px; border-radius:var(--r); }
  .dn .lb{ display:none; }
  .dn .tr{ width:48px; height:28px; }
  .dn .knob{ width:22px; height:22px; }
  .dn[aria-checked="true"] .knob{ transform:translateX(20px); }
  .chips{ left:0; right:0; max-width:none; padding:4px 12px 12px; -webkit-mask-image:none; mask-image:none; }
  .chips button{ height:36px; font-size:12.5px; padding:0 12px 0 10px; }
  .routebar{ left:12px; right:12px; transform:none; top:calc(var(--top) + 52px); max-width:none; height:48px; }
  .card{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:min(70vh, 640px); border-radius:var(--r-l) var(--r-l) 0 0; padding-bottom:var(--safe-b);
    transform:translateY(calc(100% + 24px)); }
  .card.on{ transform:none; }
  .card .ph{ aspect-ratio:auto; height:min(26vh, 180px); }
  .card .cb{ padding:var(--s2) var(--s2) 0; }
  .card h2{ font-size:20px; }
  .card .sum{ font-size:13.5px; }
  .card .ca{ padding:var(--s2); }
  .dock{ left:12px; right:12px; transform:none; bottom:calc(12px + var(--safe-b)); border-radius:var(--r-l); }
  .dock button{ flex:1; min-width:0; padding:0 6px; font-size:13px; }
  .rail{ bottom:calc(80px + var(--safe-b)); padding:8px 12px; }
  .rail .pc{ width:184px; }
  .rail .cc{ width:264px; }
  .rail .note{ display:none; }
  .ctl{ right:12px; bottom:auto; top:calc(var(--top) + 52px); flex-direction:column; border-radius:var(--r); }
  body.routeOn .ctl{ top:calc(var(--top) + 108px); }
  .ctl #bIn, .ctl #bOut{ display:none; }
  .card.on ~ .ctl{ opacity:0; pointer-events:none; }
  .load{ bottom:auto; top:calc(var(--top) + 56px); }
  .toast{ top:calc(var(--top) + 56px); }
  .tcard{ top:34%; }
  .tcard b{ font-size:clamp(34px, 11vw, 52px); }
  .modal{ padding:0; place-items:end center; }
  .modal .box{ width:100%; max-height:94vh; border-radius:0; }
  .modal .mh{ flex-wrap:wrap; padding:0 var(--s2); gap:0; min-height:0; }
  .modal .mh .ttl{ width:100%; padding:12px 44px 0 0; }
  .modal .mh h2, .modal .mh h2.brushT{ font-size:18px; margin-bottom:10px; }
  .modal .mh .x{ top:26px; transform:none; right:8px; }
  .modal .tabs{ width:100%; margin:0; }
  .modal .tabs button{ flex:1; min-height:44px; padding:0 6px; font-size:13px; }
  .modal .mb{ padding:var(--s2); }
  .modal .mf{ padding:12px var(--s2) calc(12px + var(--safe-b)); }
  .sp{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lgp{ grid-template-columns:1fr; }
  .lgmain{ padding:var(--s2); }
  .lgside{ border-left:0; border-top:1px solid var(--lg-line); flex-direction:row; overflow-x:auto; gap:8px; padding:12px; scrollbar-width:none; }
  .lgside .lgsh{ display:none; }
  .lgside .ci{ flex:none; width:172px; }
  .lgside .ci img, .lgside .ci .av{ width:48px; height:48px; }
  .lgfeat img, .lgfeat .av{ width:84px; height:84px; }
  .lgfeat .tx b{ font-size:17px; }
  .head1 h3{ font-size:20px; }
  .days button{ min-width:56px; height:50px; padding:0 8px; }
  .days button b{ font-size:15px; }
  .tt li{ grid-template-columns:50px 1fr; gap:12px; font-size:13px; }
  .lgbtns .lgb, .lgbtns .stagego{ flex:1; }
  .tt::before{ left:61px; }
  .abtn.pri.stagego{ width:100%; }
  .acc .others{ columns:1; }
  .walkbar{ font-size:12px; white-space:nowrap; top:calc(var(--safe-t) + 80px); }
  .wpick{ left:12px; right:12px; transform:none; width:auto; flex-wrap:wrap; bottom:calc(150px + var(--safe-b)); }
  .wpick .tx{ flex:1; }
  .wpick .abtn{ flex:1; }
  .walkbar .wh{ display:none; }
  .edit{ left:8px; right:8px; width:auto; }
  .meas{ left:12px; right:12px; width:auto; bottom:calc(84px + var(--safe-b)); }
  .ctl .sep{ width:24px; height:1px; margin:2px 0; }
}
/* 길찾기 — 휴대폰 */
@media (max-width: 760px){
  .dock button{ flex-direction:column; gap:2px; height:54px; font-size:11.5px; padding:0 2px; }
  .dock button .ic{ width:21px; height:21px; }
  .dock button em{ display:none; }
  .rail{ bottom:calc(86px + var(--safe-b)); }
  .navp{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:min(66vh, 620px); border-radius:var(--r-l) var(--r-l) 0 0; padding-bottom:var(--safe-b); animation-name:npUp; }
  .pick{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:min(80vh, 700px); border-radius:var(--r-l) var(--r-l) 0 0; padding-bottom:var(--safe-b); animation-name:npUp; }
  body.navOpen .dock, body.navOpen .ctl, body.navOpen .rail{ display:none !important; }
  body.cardOn .dock, body.cardOn .rail{ visibility:hidden; }
  .hud{ top:calc(var(--safe-t) + 12px); padding:12px; gap:12px; }
  .hud .ar{ width:52px; height:52px; }
  .hud .ar .ic{ width:32px; height:32px; }
  .hud .tx b{ font-size:26px; }
  .hud .tx span{ font-size:14px; }
  .hudb{ bottom:calc(12px + var(--safe-b)); }
  body.walking .hudb{ bottom:calc(164px + var(--safe-b)); width:calc(100vw - 24px); }
  body.walking .walkbar .wt{ display:none; }
  body.walking .walkbar{ padding:6px; gap:6px; }
}
@keyframes npUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
/* 첫 화면 — 세로 화면은 포스터처럼 (위에서부터 문구 · 제목 · 날짜, 오른쪽 정렬) */
@media (max-aspect-ratio: 1/1){
  .splash .swirl{ height:86%; top:auto; bottom:0; left:-20vw; }
  .splash .inner{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; text-align:right; padding:calc(60px + var(--safe-t)) 6vw calc(56px + var(--safe-b)); }
  .splash .slogan{ margin-bottom:6px; }
  .splash .title{ height:auto; width:min(60vw, 440px); max-width:none; margin:4px 0 8px; }
  .splash .info{ align-items:flex-end; position:relative; }
  .splash .info::before{ content:''; position:absolute; inset:-14px -6vw -10px -12px; background:radial-gradient(closest-side, rgba(243,241,235,.94), rgba(243,241,235,.75) 70%, rgba(243,241,235,0)); z-index:-1; }
  .splash .date2{ padding-left:0; }
  .splash .date .d{ font-size:clamp(34px,10vw,58px); }
  .splash .date .y{ font-size:clamp(17px,4.4vw,26px); }
  .splash .date .tilde{ font-size:clamp(24px,7vw,40px); }
  .splash .where{ font-size:clamp(17px,4.8vw,24px); margin-top:8px; }
  .splash .linked{ align-items:flex-end; margin-top:12px; gap:6px; }
  .splash .linked b{ font-size:clamp(14px,3.8vw,18px); }
  .splash .linked span{ font-size:clamp(12px,3.2vw,15px); }
  .splash .go{ align-items:flex-end; margin-top:clamp(12px,2.4vh,24px); }
  .bcta{ width:min(400px,84vw); margin-left:0; margin-right:-4vw; }
  .bcta .tx{ font-size:clamp(17px,4.8vw,22px); }
  .splash .sub{ justify-content:flex-end; margin-right:-3vw; }
  .bsub{ height:clamp(52px,14vw,64px); }
  .bsub .tx{ font-size:clamp(13px,3.8vw,16px); }
  .splash .foot{ left:auto; right:4vw; justify-content:flex-end; flex-wrap:wrap; font-size:11.5px; gap:2px 12px; background:rgba(243,241,235,.88); padding:6px 10px; border-radius:10px; }
  .splash .note{ display:none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px){
  .splash .title{ width:min(48vw, 380px); }
  .splash .linked{ margin-top:8px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 640px){
  .splash .linked{ display:none; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 620px){
  .splash .title{ height:70vh; }
  .splash .linked{ display:none; }
  .splash .go{ margin-top:14px; }
  .bcta{ width:380px; }
}
@media (prefers-reduced-motion: reduce){
  .splash .swirl, .splash .title, .splash *, .bcta *, .bsub *{ animation:none !important; opacity:1 !important; clip-path:none !important; }
  .load .spin, .rt.pop i{ animation:none !important; }
  .tcard.play{ animation-duration:.01s !important; }
}

/* 오시는 길 — LG 빨강 강조 · 셔틀 노선 지도 */
.acc .abtn span, .acc .abtn .ic, .acc .abtn.hot span, .acc .abtn.hot .ic{ color:#fff; }
.acc .lots .lot .ln a, .acc .lots .lot .ln button{ background:var(--lg-red); color:#fff; }
.acc .lots .lot .ln a:hover, .acc .lots .lot .ln button:hover{ background:var(--lg-red-2); color:#fff; }
.acc .route b{ align-items:center; }
.acc .route b .lgb{ margin-left:auto; height:30px; padding:0 10px; font-size:12px; }
.acc .route b .lgb .ic{ width:14px; height:14px; }
.acc .route li.st{ background:var(--lg-red); color:#fff; font-weight:750; padding-left:6px; }
.acc .route li.st em{ font-style:normal; font-size:10px; font-weight:800; background:#fff; color:var(--lg-red); padding:1px 5px; border-radius:2px; margin-right:6px; vertical-align:1px; }
.acc .route li.end{ background:var(--lg-ink); color:#fff; }
body.night .acc .route li.end{ color:#111418; }
.shmap{ border:1px solid var(--lg-line); border-radius:2px; background:#fff; overflow:hidden; }
body.night .shmap{ background:#1a1e24; }
.shtabs{ display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--lg-line); flex-wrap:wrap; }
.shtabs button{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:2px; font-size:12.5px; font-weight:700; color:var(--lg-ink-2); background:var(--lg-gray); }
.shtabs button i{ width:10px; height:10px; border-radius:50%; background:var(--c); }
.shtabs button.on{ background:var(--lg-red); color:#fff; }
.shtabs button.on i{ background:#fff; }
.shtabs button.ed{ margin-left:auto; background:#fff; border:1px solid var(--lg-line-2); }
.shtabs button.ed.on{ background:var(--lg-ink); color:#fff; }
.shcv{ height:380px; background:#e9e5df; }
.shcv .leaflet-control-attribution{ font-size:10px; }
.shm{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:2px; font-size:11.5px; font-weight:800; color:#fff; background:#555; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transform:translate(-50%,-50%); white-space:nowrap; letter-spacing:-.01em; }
.shm.start{ background:#a50034; }
.shm.fest{ background:#000; }
.shm.est{ border-style:dashed; }
.shpop{ font-family:var(--sans); font-size:12.5px; color:#111; display:flex; flex-direction:column; gap:3px; min-width:150px; }
.shpop b{ font-size:14px; }
.shpop em{ font-style:normal; color:#a50034; font-size:11.5px; }
.shpop a{ margin-top:4px; font-weight:700; color:#a50034; }
.shlist{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; border-top:1px solid var(--lg-line); }
.shrow{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--lg-line); border-radius:2px; min-width:0; }
.shrow .shm{ transform:none; flex:none; border-color:transparent; box-shadow:none; }
.shrow div{ min-width:0; flex:1; display:flex; flex-direction:column; }
.shrow b{ font-size:13.5px; color:var(--lg-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shrow span{ font-size:11.5px; color:var(--lg-mute); }
.shrow .lgb{ flex:none; }
.shoff{ padding:24px; text-align:center; color:var(--lg-mute); font-size:13px; }
@media (max-width: 760px){ .shcv{ height:300px; } .shlist{ grid-template-columns:1fr; } .acc .route b{ flex-wrap:wrap; } }

/* 아래 장소 띠 — 가로 스크롤 방식 : 한 화면씩 넘기는 화살표(PC) · 손가락으로 밀기(휴대폰) · 오른쪽 카드와 겹치지 않게 */
.rail{ scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-left:max(56px, calc(50vw - 600px)); padding-right:max(56px, calc(50vw - 600px));
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.railbtn{ position:fixed; z-index:22; bottom:calc(88px + var(--safe-b) + 22px); width:40px; height:40px; border-radius:2px; display:grid; place-items:center;
  background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .2s, background .15s; }
body.night .railbtn{ background:#1a1e24; }
.railbtn .ic{ width:18px; height:18px; }
.railbtn.l{ left:max(8px, calc(50vw - 600px - 12px)); }
.railbtn.r{ right:max(8px, calc(50vw - 600px - 12px)); }
.railbtn:hover{ background:var(--acc); color:#fff; border-color:var(--acc); }
body.railOn .railbtn.show{ opacity:1; pointer-events:auto; }
@media (min-width:761px){
  body.cardOn .rail{ right:420px; padding-right:56px; }
  body.cardOn .railbtn.r{ right:calc(420px + 12px); }
  body.cardOn .railbtn.l{ left:8px; }
  body.cardOn .rail{ padding-left:56px; }
  .card{ z-index:24; }
}
@media (max-width:760px){ .railbtn{ display:none; } .rail{ -webkit-mask-image:none; mask-image:none; padding-left:12px; padding-right:12px; } }

/* ═══════ LG 기업형 스타일 층 (LG.com · LG Virtual Showroom) — 위 규칙들 위에 덮어쓴다 ═══════
   · 모서리 2·4·6px, 잉크 오프셋 그림자 없음, 주색 = LG 빨강(#a50034), 판은 불투명 흰색, 상단은 크림색 띠 */
:root{
  --r-s:2px; --r:4px; --r-l:6px;
  --acc:#a50034; --acc-ink:#8a002b; --acc-soft:rgba(165,0,52,.08); --acc-line:rgba(165,0,52,.35);
  --warm:#a50034; --warm-soft:rgba(165,0,52,.08);
  --glass:rgba(255,255,255,.96); --glass-2:#ffffff; --glass-line:rgba(0,0,0,.08); --glass-hi:none; --glass-sh:0 2px 12px rgba(0,0,0,.08);
  --surf:#ffffff; --surf-2:#f2f2f2; --surf-3:#e6e6e6; --line:#e5e5e5; --line-2:#ededed;
  --mk:rgba(255,255,255,.96); --mk-line:rgba(0,0,0,.1);
  --brut:1px solid rgba(0,0,0,.1); --brut-sh:none;
  --top:calc(var(--safe-t) + 80px);
}
body.night{
  --acc:#ff5c8a; --acc-ink:#ff7ea3; --acc-soft:rgba(255,92,138,.14); --acc-line:rgba(255,92,138,.4);
  --warm:#ff5c8a; --warm-soft:rgba(255,92,138,.14);
  --glass:rgba(17,20,24,.94); --glass-2:#111418; --glass-line:rgba(255,255,255,.1); --glass-sh:0 2px 12px rgba(0,0,0,.4);
  --surf:#1a1e24; --surf-2:rgba(255,255,255,.07); --surf-3:rgba(255,255,255,.12); --line:#2c3138; --line-2:#262b31;
  --brut:1px solid rgba(255,255,255,.12);
}
/* 잉크 오프셋 그림자 단추 → 평평한 LG 단추 */
.abtn.pri, .abtn.hot, .abtn.nv{ border:0; box-shadow:none; }
.abtn.pri:hover, .abtn.hot:hover, .abtn.nv:hover{ transform:none; box-shadow:none; }
.abtn.pri:active, .abtn.hot:active, .abtn.nv:active{ transform:scale(.985); box-shadow:none; }
.abtn{ border:1px solid var(--line); background:var(--surf); }
.abtn:hover{ background:var(--surf-2); }
.chips button.on, .mk.sel{ border:1px solid var(--ink); box-shadow:none; transform:none; }
.chips button.on{ background:var(--ink); color:var(--ink-inv); }
/* 상단 : 크림색 띠 (LG 쇼룸 상단처럼) — 로고·제목 왼쪽, 메뉴 오른쪽, 활성 메뉴는 빨강 밑줄 */
.top{ padding:var(--safe-t) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); height:calc(var(--safe-t) + 64px); align-items:stretch; gap:0;
  background:#f3efe9; border-bottom:1px solid #e3ded6; pointer-events:auto; }
body.night .top{ background:#15181d; border-bottom-color:#2c3138; }
.brand{ height:auto; padding:0; border-radius:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.brand .bi{ height:34px; }
.brand .bt{ border-left:1px solid rgba(0,0,0,.14); }
body.night .brand .bt{ border-left-color:rgba(255,255,255,.14); }
.brand .bt b{ font-size:15px; letter-spacing:-.02em; }
.tools{ gap:2px; align-items:stretch; }
.tb, .tb.glass{ position:relative; height:auto; padding:0 14px; border-radius:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:14px; font-weight:700; color:var(--ink); }
.tb::after{ content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:transparent; transition:background .15s; }
.tb:hover{ background:none; }
.tb:hover::after{ background:var(--acc); }
.tb:active{ transform:none; }
.tb.fest{ color:var(--acc); background:none; border:0; box-shadow:none; }
.tb.fest::after{ background:var(--acc); }
.tb.fest:hover{ background:none; transform:none; box-shadow:none; color:var(--acc-ink); }
.tb.fest:active{ transform:none; box-shadow:none; }
.tb.sq{ width:auto; padding:0 12px; }
.dn, .dn.glass{ height:auto; align-self:center; border-radius:999px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; height:40px; margin-right:8px; }
body.night .dn, body.night .dn.glass{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
/* 낮/밤 스위치 : 안쪽 네모 칸(트랙)을 단추 배경과 같은 색으로 — 따로 보이는 칸 없이 손잡이만 움직인다 */
.dn .tr, .dn[aria-checked="true"] .tr{ background:transparent; border-radius:999px; }
.dn .knob{ border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.dn[aria-checked="true"] .knob{ background:#f2f4f6; color:#1b2a44; }
/* 상단 왼쪽 : 축제 로고 옆 나주시 로고 */
.brand .bl{ height:24px; width:auto; display:block; margin-left:2px; padding-left:12px; border-left:1px solid rgba(0,0,0,.14); }
/* 밤 : 흰 판 없이 — 심벌은 원래 색, 「나주시」 글자만 흰색으로 다시 그린 그림(img/naju_logo_n.png)으로 바꾼다 */
.brand .bl.n{ display:none; }
body.night .brand .bl.d{ display:none; }
body.night .brand .bl.n{ display:block; border-left-color:rgba(255,255,255,.16); }
/* 장소 카드 : 흰 판, 각진 모서리, 빨강 주 단추 */
.card{ border-radius:2px; box-shadow:0 12px 40px rgba(0,0,0,.22); }
.card .kv li{ border-radius:2px; background:var(--surf-2); }
.card .kv li > .ic{ color:var(--acc); }
.card .kv .near button{ border-radius:2px; }
.card .kv .near button i{ border-radius:2px; }
.card .cat i, .card .ph .cat{ border-radius:2px; }
/* 걷는 중 장소 판 · 안내 판 */
.wpick{ border-radius:2px; }
.wpick .ib{ border-radius:2px; }
@media (max-width: 760px){
  :root{ --top:calc(var(--safe-t) + 66px); }
  .top{ padding:var(--safe-t) 12px 0; height:calc(var(--safe-t) + 52px); gap:0; }
  .brand{ height:auto; padding:0; border-radius:0; }
  .brand .bi{ height:26px; }
  .brand .bl{ height:16px; padding-left:8px; }
  .tb{ height:auto; padding:0 10px; border-radius:0; font-size:13px; }
  .tb.fest{ padding:0 10px; }
  .dn{ height:34px; padding:0 6px; }
  .chips{ padding:4px 12px 10px; }
  .card{ border-radius:0; }
}

/* ═══════ 2026-09-28 · 머리줄 정리 · 전체화면 · AI 안내 ═══════ */
/* 휴대폰 머리줄 : 축제 로고 + 나주시 로고 + (낮/밤 · 프로그램 · 오시는 길). 좁으면 제목 글자는 빼서 겹치지 않게 */
@media (max-width: 480px){ .brand .bt{ display:none; } .brand{ gap:6px; } }

/* 전체화면 단추 — PC : 머리줄 오른쪽 끝(2D 안내도 옆) · 휴대폰 : 오른쪽 지도 단추 세로줄 맨 아래 */
.fsb[hidden]{ display:none !important; }
.ctl #bFull2, .ctl .sep.sepf{ display:none; }
.tb.fsb.on::after{ background:var(--acc); }
body.standalone .ctl .sep.sepf{ display:none !important; }
@media (max-width: 760px){
  #bFull{ display:none; }
  .ctl .sep.sz{ display:none; }
  .ctl #bFull2{ display:grid; } .ctl .sep.sepf{ display:block; }
}
.fstip{ position:fixed; z-index:95; left:50%; bottom:calc(100px + var(--safe-b)); transform:translate(-50%, 14px); width:min(360px, calc(100vw - 24px));
  background:var(--surf); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:0 18px 48px rgba(0,0,0,.26);
  padding:12px 12px 14px 16px; opacity:0; pointer-events:none; transition:opacity .22s, transform .28s cubic-bezier(.2,.9,.3,1); }
.fstip.on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.fstip .hd{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; }
.fstip .hd > .ic{ width:20px; height:20px; color:var(--acc); flex:none; }
.fstip .x{ margin-left:auto; width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r-s); color:var(--ink-2); }
.fstip .x .ic{ width:18px; height:18px; }
.fstip ol{ margin:8px 0 8px; padding-left:20px; font-size:13.5px; line-height:1.75; }
.fstip .k{ display:inline-flex; align-items:center; gap:3px; padding:0 6px; border-radius:2px; background:var(--surf-2); font-weight:700; white-space:nowrap; }
.fstip .k .ic{ width:14px; height:14px; }
.fstip p{ margin:0; font-size:12px; color:var(--ink-3); }

/* ── AI 안내 단추 (LG.com 챗봇 단추처럼 오른쪽 아래) ── */
.aifab{ position:fixed; z-index:22; right:max(16px, env(safe-area-inset-right)); bottom:var(--aiB, calc(84px + var(--safe-b)));
  display:none; align-items:center; gap:10px; height:56px; padding:0 20px 0 6px; border-radius:999px;
  background:var(--surf); color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.16);
  transition:bottom .35s cubic-bezier(.2,.9,.3,1), transform .18s, box-shadow .18s; animation:aiFabIn .5s cubic-bezier(.2,.9,.3,1) backwards; }
body.entered .aifab{ display:inline-flex; }
body.cardOn .aifab, body.navOpen .aifab, body.navOn .aifab, body.walking .aifab, body.picking .aifab, body.measOn .aifab,
body.aiOpen .aifab, body.editing .aifab, body.immersive .aifab{ display:none; }
.aifab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.2); }
.aifab:active{ transform:scale(.97); }
.aifab .av, .aih .av{ position:relative; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; flex:none; }
.aifab .av{ width:44px; height:44px; }
.aifab .av .ic{ width:24px; height:24px; }
.aifab .av img, .aih .av img{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 18%; }
.aifab .av.ph > i, .aih .av.ph > i{ visibility:hidden; }
.aifab .dot{ position:absolute; right:0; top:0; width:12px; height:12px; border-radius:50%; background:#1fb35f; border:2px solid var(--surf); }
.aifab .dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #1fb35f; opacity:0; animation:aiPing 2.6s ease-out infinite; }
.aifab .lb{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.aifab .lb b{ font-size:15px; font-weight:800; letter-spacing:-.03em; }
.aifab .lb small{ font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:3px; white-space:nowrap; }
@keyframes aiFabIn{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes aiPing{ 0%{ opacity:.7; transform:scale(.6); } 70%,100%{ opacity:0; transform:scale(1.5); } }

/* ── AI 안내 창 — PC : 장소 카드와 같은 오른쪽 자리 · 휴대폰 : 아래에서 올라오는 판 ── */
.aip{ position:fixed; z-index:25; right:max(16px, env(safe-area-inset-right)); top:var(--top); bottom:var(--aiPB, calc(84px + var(--safe-b)));
  width:380px; display:flex; flex-direction:column; background:var(--surf); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 18px 50px rgba(0,0,0,.24); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985); transform-origin:100% 100%; transition:opacity .22s, transform .3s cubic-bezier(.2,.9,.3,1), right .3s; }
.aip.on{ opacity:1; transform:none; }
.aip[hidden]{ display:none; }
@media (min-width: 761px){ body.cardOn .aip{ right:calc(max(16px, env(safe-area-inset-right)) + 392px); } }
.aih{ display:flex; align-items:center; gap:10px; height:60px; padding:0 8px 0 14px; border-bottom:1px solid var(--line); flex:none; }
.aih .av{ width:36px; height:36px; }
.aih .av .ic{ width:20px; height:20px; }
.aih .hd{ display:flex; flex-direction:column; line-height:1.2; min-width:0; margin-right:auto; }
.aih .hd b{ font-size:16px; font-weight:800; letter-spacing:-.03em; }
.aih .hd small{ font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aip .ib{ width:40px; height:40px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--ink-2); flex:none; }
.aip .ib .ic{ width:20px; height:20px; }
.aip .ib:hover{ background:var(--surf-2); color:var(--ink); }
.aip .ib.on{ color:var(--acc); }
.aip .ib[hidden]{ display:none; }
/* 탭 : LG 밑줄 */
.ait{ display:flex; border-bottom:1px solid var(--line); flex:none; padding:0 6px; }
.ait button{ flex:1; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:700; color:var(--ink-3); position:relative; }
.ait button .ic{ width:18px; height:18px; }
.ait button em{ font-style:normal; font-size:10.5px; font-weight:800; padding:2px 6px; border-radius:999px; background:var(--acc-soft); color:var(--acc); letter-spacing:0; }
.ait button:hover{ color:var(--ink); }
.ait button.on{ color:var(--ink); }
.ait button.on::after{ content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:var(--acc); }
.aib{ flex:1; min-height:0; position:relative; }
.aip .pane{ position:absolute; inset:0; display:none; flex-direction:column; }
.aip .pane.on{ display:flex; }
.aif{ flex:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; padding:8px 14px; border-top:1px solid var(--line); font-size:11px; line-height:1.45; color:var(--ink-3); background:var(--surf); }

/* ① 말로 묻기 — 9:16 세로 화면 */
.aip .stage{ position:relative; flex:1; min-height:0; background:#0e1116; display:flex; align-items:center; justify-content:center; padding:12px; }
.aip .frame{ position:relative; height:100%; max-height:100%; aspect-ratio:9/16; max-width:100%; border-radius:var(--r); overflow:hidden; background:#181c22; }
.aip .frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#0e1116; }
.aip .poster .pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.aip .poster{ display:flex; flex-direction:column; }
.aip .poster .sil{ display:none; }
.aip .poster.nopic{ background:radial-gradient(120% 70% at 50% 18%, rgba(165,0,52,.55), rgba(24,28,34,0) 60%), linear-gradient(180deg, #232830, #13161b); }
.aip .poster.nopic .sil{ display:grid; place-items:center; position:relative; z-index:1; margin:auto; flex:none; width:clamp(64px, 22%, 96px); aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; }
.aip .poster.nopic .sil .ic{ width:46px; height:46px; }
.aip .poster .glow{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,17,22,0) 28%, rgba(14,17,22,.72) 56%, rgba(14,17,22,.96) 82%); }
.aip .poster .cap{ position:relative; z-index:1; margin-top:auto; padding:18px 16px 16px; color:#fff; display:flex; flex-direction:column; gap:10px; }
.aip .poster.nopic .cap{ margin-top:0; }
.aip .poster .kick{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; letter-spacing:.02em; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; }
.aip .poster .kick .ic{ width:13px; height:13px; }
.aip .poster .kick.warn{ background:#e11d48; }
.aip .poster b{ font-size:19px; line-height:1.35; font-weight:800; letter-spacing:-.03em; }
.aip .poster p{ margin:0; font-size:13px; line-height:1.6; color:rgba(255,255,255,.82); }
.aip .poster p em{ font-style:normal; font-weight:800; color:#fff; }
.aip .poster .facts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.aip .poster .facts li{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:5px 8px; border-radius:2px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.92); }
.aip .poster .facts .ic{ width:13px; height:13px; }
.aip .poster .lgb{ width:100%; }
.aip .poster .lgb.gray{ background:rgba(255,255,255,.14); color:#fff; }
.aip .poster .lgb.gray:hover{ background:rgba(255,255,255,.22); }
.aip .lgb.big{ height:50px; font-size:16px; }
.aip .lgb.big .ic{ width:18px; height:18px; }
.aip .poster .hint{ font-size:11.5px; color:rgba(255,255,255,.62); text-align:center; }
.aip .spin{ width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:#fff; animation:aiSpin .8s linear infinite; }
.aip .conn{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; text-align:center; transition:opacity .6s; }
.aip .conn b{ font-size:15px; } .aip .conn small{ font-size:12px; color:rgba(255,255,255,.62); }
.aip .conn.fade{ opacity:0; }
.aip .frame.live iframe{ z-index:1; }
.aip .stall{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; background:rgba(20,24,30,.96); color:#e6ebf1; border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:10px 38px 10px 12px; font-size:12px; line-height:1.6; animation:aiIn .3s ease-out both; }
.aip .stall b{ color:#ffd28a; }
.aip .stall .ib{ position:absolute; right:2px; top:2px; width:32px; height:32px; color:#c9d4e0; }
.aip .bar{ flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--surf); }
.aip .bar[hidden]{ display:none; }
.aip .bar .st{ display:flex; align-items:baseline; gap:5px; margin-right:auto; font-variant-numeric:tabular-nums; }
.aip .bar .rec{ width:8px; height:8px; border-radius:50%; background:#e11d48; align-self:center; margin-right:3px; animation:aiRec 1.2s ease-in-out infinite; }
.aip .bar .st b{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
.aip .bar .st small{ font-size:12px; color:var(--ink-3); font-weight:700; }
.aip .bar.low .st b{ color:#e11d48; }
@keyframes aiSpin{ to{ transform:rotate(360deg); } }
@keyframes aiRec{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ② 글로 묻기 — 대화 */
.aip .log{ flex:1; min-height:0; overflow-y:auto; padding:16px 14px 10px; display:flex; flex-direction:column; gap:12px; background:var(--lg-cream-2); overscroll-behavior:contain; }
.aip .msg{ flex:none; display:flex; gap:8px; align-items:flex-start; max-width:100%; animation:aiIn .28s ease-out both; }
.aip .msg .av{ width:28px; height:28px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; flex:none; margin-top:2px; }
.aip .msg .av .ic{ width:16px; height:16px; }
.aip .msg .bub{ background:var(--surf); border:1px solid var(--line); border-radius:2px 12px 12px 12px; padding:10px 12px; font-size:14px; line-height:1.6; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.aip .msg.me{ justify-content:flex-end; }
.aip .msg.me .bub{ background:var(--ink); color:var(--ink-inv); border-color:var(--ink); border-radius:12px 2px 12px 12px; max-width:82%; font-weight:600; }
.aip .bub p{ margin:0 0 6px; } .aip .bub p:last-child{ margin-bottom:0; }
.aip .bub ul{ margin:6px 0 2px; padding-left:18px; } .aip .bub li{ margin:4px 0; }
.aip .bub small{ color:var(--ink-3); font-size:12.5px; }
.aip .bub .note{ font-size:12px; color:var(--ink-3); margin-top:8px; }
.aip .bub ul.aitt{ list-style:none; padding:0; margin:8px 0 2px; border-top:1px solid var(--line); }
.aip .bub ul.aitt li{ display:flex; gap:10px; padding:6px 0; margin:0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.aip .bub ul.aitt b{ font-variant-numeric:tabular-nums; min-width:42px; color:var(--acc); }
.aip .acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.aip .act{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px; border-radius:2px; font-size:12.5px; font-weight:700; border:1px solid var(--line); background:var(--surf); color:var(--ink); text-decoration:none; white-space:nowrap; }
.aip .act .ic{ width:15px; height:15px; }
.aip .act:hover{ border-color:var(--ink); }
.aip .act.pri{ background:var(--acc); border-color:var(--acc); color:#fff; }
.aip .act.pri:hover{ filter:brightness(1.08); }
.aip .act.warn{ border-color:#e11d48; color:#e11d48; }
.aip .qchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.aip .qchip{ height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--surf); font-size:12.5px; font-weight:700; color:var(--ink-2); }
.aip .qchip:hover{ border-color:var(--acc); color:var(--acc); }
.aip .typing{ display:inline-flex; gap:4px; padding:4px 2px; }
.aip .typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:aiDot 1s ease-in-out infinite; }
.aip .typing i:nth-child(2){ animation-delay:.15s; } .aip .typing i:nth-child(3){ animation-delay:.3s; }
.aip .ask{ flex:none; display:flex; align-items:center; gap:6px; padding:10px; border-top:1px solid var(--line); background:var(--surf); }
.aip .ask input{ flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid var(--line); border-radius:2px; background:var(--surf); color:var(--ink); font:600 15px/1 var(--sans); outline:none; }
.aip .ask input:focus{ border-color:var(--ink); }
.aip .ask input::placeholder{ color:var(--ink-3); font-weight:500; }
.aip .ask .mic, .aip .ask .send{ width:44px; height:44px; border-radius:2px; display:grid; place-items:center; flex:none; }
.aip .ask .ic{ width:20px; height:20px; }
.aip .ask .mic{ color:var(--ink-2); background:var(--surf-2); }
.aip .ask .mic:hover{ color:var(--ink); }
.aip .ask .mic.rec{ background:#e11d48; color:#fff; animation:aiRec 1.2s ease-in-out infinite; }
.aip .ask .send{ background:var(--acc); color:#fff; }
@keyframes aiIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes aiDot{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
body.night .aip .poster .glow{ background:linear-gradient(180deg, rgba(8,10,14,0) 28%, rgba(8,10,14,.76) 56%, rgba(8,10,14,.97) 82%); }
body.night .aifab{ box-shadow:0 8px 28px rgba(0,0,0,.5); }

/* 휴대폰 : AI 창은 아래에서 올라오는 판, 단추는 도크·장소 띠 바로 위 */
@media (max-width: 760px){
  .aifab{ right:12px; height:52px; padding:0 16px 0 5px; gap:8px; }
  .aifab .av{ width:42px; height:42px; }
  .aifab .lb b{ font-size:14.5px; }
  .aifab .lb small{ display:none; }
  .aip{ left:0; right:0; top:auto; bottom:0; width:auto; height:88vh; height:min(88dvh, 780px); border-radius:var(--r-l) var(--r-l) 0 0;
    border-left:0; border-right:0; border-bottom:0; transform:translateY(28px); transform-origin:50% 100%; padding-bottom:var(--safe-b); }
  .aip.on{ transform:none; }
  body.aiOpen .dock, body.aiOpen .rail, body.aiOpen .ctl, body.aiOpen .railbtn, body.aiOpen .chips{ visibility:hidden; }
  .aip .ask input{ font-size:16px; }                        /* 아이폰 : 16px 미만이면 누를 때 화면이 확대된다 */
  .aip .stage{ padding:10px; }
}
@media (prefers-reduced-motion: reduce){
  .aifab, .aifab .dot::after, .aip .msg, .aip .bar .rec, .aip .ask .mic.rec, .aip .typing i, .aip .stall{ animation:none !important; }
  .aip, .aifab{ transition:none; }
}
/* 가벼운 모드(메모리 작은 휴대폰 · ?q=lite)에서 머리줄에 흰 네모가 생기던 것 — 머리줄은 크림색 띠 그대로 */
body.noblur .brand.glass, body.noblur .tb.glass{ background:none; }
body.noblur .dn.glass{ background:rgba(0,0,0,.05); }
body.night.noblur .dn.glass{ background:rgba(255,255,255,.08); }
/* 태블릿 · 좁은 PC(761~1240px) : 도크 글자가 두 줄로 꺾이고, 오른쪽 아래 지도 단추 줄이 도크 밑에 깔리던 것
   → 도크는 늘 한 줄(글자 크기대로), 지도 단추는 휴대폰처럼 오른쪽 세로줄로 */
@media (min-width:761px){ .dock{ width:max-content; max-width:calc(100vw - 24px); } }
@media (max-width:1240px) and (min-width:761px){
  .ctl{ bottom:auto; top:calc(var(--top) + 60px); flex-direction:column; }
  .ctl .sep{ width:24px; height:1px; margin:2px auto; }
  body.aiOpen .ctl, body.cardOn .ctl{ opacity:0; pointer-events:none; }
}

/* ── AI 안내 : 첫 인사(요금 없음) — 아바타 얼굴 + 무료 음성 + 자막 · intro.mp4 가 있으면 그 영상 ── */
.aip .poster.speaking .pic{ animation:aiKB 32s ease-in-out forwards; transform-origin:50% 22%; }
@keyframes aiKB{ from{ transform:scale(1); } to{ transform:scale(1.09) translateY(1.5%); } }
.aip .poster .ivid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; z-index:0; background:#0e1116; }
.aip .poster.speaking .glow{ background:linear-gradient(180deg, rgba(14,17,22,.35) 0%, rgba(14,17,22,0) 18%, rgba(14,17,22,0) 44%, rgba(14,17,22,.8) 70%, rgba(14,17,22,.97) 92%); }
.aip .poster .itop{ position:absolute; z-index:2; left:12px; right:8px; top:10px; display:flex; align-items:center; gap:8px; color:#fff; }
.aip .poster .itop b{ font-size:12.5px; font-weight:800; letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.5); margin-right:auto; }
.aip .poster .itop .ib{ width:36px; height:36px; color:#fff; background:rgba(0,0,0,.28); border-radius:50%; }
.aip .poster .itop .ib:hover{ background:rgba(0,0,0,.45); color:#fff; }
.aip .onair{ display:inline-flex; align-items:flex-end; gap:3px; height:16px; padding:0 8px; border-radius:999px; background:var(--acc); height:24px; align-items:center; }
.aip .onair i{ width:3px; height:12px; border-radius:2px; background:#fff; transform-origin:50% 50%; animation:aiBar .9s ease-in-out infinite; }
.aip .onair i:nth-child(2){ animation-delay:.15s; } .aip .onair i:nth-child(3){ animation-delay:.3s; } .aip .onair i:nth-child(4){ animation-delay:.45s; }
@keyframes aiBar{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.aip .poster .subs{ min-height:5.6em; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; }
.aip .poster .subs .line{ margin:0; font-size:18px; line-height:1.5; font-weight:700; color:#fff; letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.55); word-break:keep-all; }
.aip .poster .subs .line.in{ animation:aiSub .45s ease-out both; }
@keyframes aiSub{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.aip .poster .subs .dots{ display:flex; gap:5px; }
.aip .poster .subs .dots i{ width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.28); transition:background .3s; }
.aip .poster .subs .dots i.done{ background:rgba(255,255,255,.7); }
.aip .poster .subs .dots i.on{ background:var(--acc); }
.aip .poster .skip{ align-self:flex-end; width:auto !important; background:rgba(255,255,255,.14); color:#fff; }
.aip .poster .skip .ic{ width:14px; height:14px; }
.aip .poster .sub2{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.aip .poster .replay{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.86); }
.aip .poster .replay:hover{ color:#fff; background:rgba(255,255,255,.1); }
.aip .poster .replay .ic{ width:15px; height:15px; }
.aip .poster .cap > .hint{ text-align:center; }
.aif span{ width:100%; text-align:center; }
@media (max-width: 760px){ .aip .poster .subs .line{ font-size:17px; } }
@media (prefers-reduced-motion: reduce){ .aip .poster.speaking .pic, .aip .onair i, .aip .poster .subs .line.in{ animation:none !important; } }

/* ══ AI 안내 창 · 작게 (2026-09-28) ══
   PC·태블릿 : 오른쪽 아래(도크·지도 단추 위)에 떠 있는 작은 창 344 × 최대 560 — 전에 쓰던 창(위아래 꽉 찬 창)의 약 1/3
   휴대폰   : 아래에서 화면 60% 쯤만 올라오는 판 — 위쪽 지도는 그대로 보인다. 실시간 대화 중에만 아바타가 보이게 조금 커진다
   첫 인사·대기 화면은 아바타 사진이 무대를 꽉 채우고, 실시간 대화는 아바타 화면 비율(9:16 세로) 그대로 가운데 */
.aip{ transition:opacity .22s, transform .3s cubic-bezier(.2,.9,.3,1), right .3s, height .32s cubic-bezier(.2,.9,.3,1); }
@media (min-width: 761px){
  .aip{ top:auto; width:344px; height:clamp(440px, 66vh, 560px); max-height:calc(100vh - var(--top) - var(--aiPB, 96px) - 8px); }
}
.aih{ height:48px; padding:0 4px 0 12px; gap:9px; }
.aih .av{ width:30px; height:30px; }
.aih .av .ic{ width:17px; height:17px; }
.aih .hd b{ font-size:15px; }
.aih .hd small{ font-size:11px; margin-top:1px; }
.aip .ib{ width:36px; height:36px; }
.aip .ib .ic{ width:19px; height:19px; }
.ait{ padding:0 4px; }
.ait button{ height:38px; font-size:13.5px; gap:5px; }
.ait button .ic{ width:16px; height:16px; }
.ait button em{ font-size:10px; padding:1px 5px; }
.ait button.on::after{ left:12px; right:12px; }
.aif{ padding:5px 10px; font-size:10.5px; line-height:1.4; }
/* 무대 */
.aip .stage{ padding:6px; }
.aip .frame{ width:100%; height:100%; max-width:none; aspect-ratio:auto; }
.aip .frame.live{ width:auto; height:100%; max-width:100%; aspect-ratio:9/16; }
.aip.live .ait{ display:none; }                            /* 대화하는 동안은 탭 줄을 접어 아바타 화면을 키운다 (끝나면 다시 보인다) */
.aip .frame.live .conn{ z-index:2; background:#181c22; pointer-events:none; }   /* 연결되기 전까지 「부르는 중」이 보이게 */
.aip .poster .pic, .aip .poster .ivid{ object-position:50% 20%; }
.aip .poster .cap{ padding:12px; gap:7px; }
.aip .poster .kick{ font-size:11px; padding:3px 8px; }
.aip .poster .kick .ic{ width:12px; height:12px; }
.aip .poster b{ font-size:16.5px; line-height:1.35; }
.aip .poster p{ font-size:12px; line-height:1.55; }
.aip .poster .meta{ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.72); letter-spacing:-.01em; }
.aip .lgb.big{ height:44px; font-size:15px; }
.aip .lgb.big .ic{ width:17px; height:17px; }
.aip .poster .brow{ display:flex; gap:6px; margin-top:2px; }
.aip .poster .brow .lgb{ width:auto; flex:1 1 auto; min-width:0; padding:0 12px; }
.aip .poster .brow .again{ flex:none; }
.aip .poster.nopic .sil{ width:clamp(56px, 20%, 80px); }
.aip .poster.nopic .sil .ic{ width:36px; height:36px; }
.aip .spin{ width:26px; height:26px; }
.aip .conn b{ font-size:14px; }
/* 첫 인사 자막 */
.aip .poster .subs{ min-height:112px; gap:8px; }
.aip .poster .subs .line{ font-size:15.5px; line-height:1.5; }
.aip .poster .srow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.aip .poster .skip{ align-self:auto; flex:none; }
.aip .poster .subs .dots i{ width:14px; }
.aip .poster .itop{ left:10px; right:6px; top:8px; }
.aip .poster .itop b{ font-size:12px; }
.aip .poster .itop .ib{ width:32px; height:32px; }
.aip .poster .itop .ib .ic{ width:17px; height:17px; }
.aip .onair{ height:22px; padding:0 7px; }
.aip .onair i{ height:10px; }
/* 실시간 대화 */
.aip .bar{ padding:6px 8px; gap:6px; }
.aip .bar .st b{ font-size:16px; }
.aip .bar .st small{ font-size:11.5px; }
.aip .bar .lgb.sm{ padding:0 10px; }
.aip .stall{ left:8px; right:8px; bottom:8px; padding:8px 34px 8px 10px; font-size:11.5px; line-height:1.55; }
.aip .stall .ib{ width:30px; height:30px; }
/* 글로 묻기 */
.aip .log{ padding:12px 10px 8px; gap:10px; }
.aip .msg{ gap:7px; }
.aip .msg .av{ width:26px; height:26px; }
.aip .msg .av .ic{ width:15px; height:15px; }
.aip .msg .bub{ padding:9px 11px; font-size:13.5px; line-height:1.58; }
.aip .bub ul.aitt li{ font-size:13px; }
.aip .acts, .aip .qchips{ margin-top:8px; }
.aip .act{ height:32px; padding:0 10px; font-size:12px; }
.aip .qchip{ height:30px; padding:0 11px; font-size:12px; }
.aip .ask{ padding:8px; }
.aip .ask input{ height:40px; padding:0 12px; }
.aip .ask .mic, .aip .ask .send{ width:40px; height:40px; }
.aip .ask .ic{ width:19px; height:19px; }
@media (max-width: 760px){
  .aip{ height:62vh; height:clamp(360px, 60dvh, 500px); }
  .aip.live{ height:78vh; height:clamp(440px, 78dvh, 660px); }
  .aip .poster .subs .line{ font-size:15.5px; }
}
@media (prefers-reduced-motion: reduce){ .aip{ transition:none; } }
@media (max-height: 640px){ .aip .poster .meta{ display:none; } }   /* 키 작은 화면 : 대기 화면 한 줄 줄이기 */