/* ═══════════════════════════════════════════════════════════════════════════════
   목포 학교 디지털트윈 — 학교 소개 표지 v4 (2026-10-21)
   느티나무 진단 트윈의 화면 체계: 전체 화면 사진(또는 살아 있는 3D) 위에 가림막 · 얇은 부제 → 선 → 큰 제목(200) → 설명 → 유리판 단추
   오른쪽은 교내 핵심 공간 목록(번호가 세로선 위에) · 아래는 학교 지표 띠. 글꼴 Pretendard · 자간 −0.03em
   색: 어두운 바탕은 느티나무 트윈과 같고, 강조색(--accent)은 학교의 둘째 색 (school.html 이 넣는다)
   ═══════════════════════════════════════════════════════════════════════════════ */
@font-face{ font-family:'Pretendard'; src:url('fonts/PretendardVariable.woff2') format('woff2'); font-weight:45 920; font-style:normal; font-display:swap; }
:root{
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --ls:-0.03em; --w-strong:600; --w-medium:500; --w-regular:400; --w-detail:300; --w-display:200;
  --bg:#0b0f0e; --surface:#111816; --surface-2:#16201c; --fg:#ecf1ed; --fg-2:rgba(236,241,237,.76); --muted:#8e9b94; --line:#1e2824; --line-2:#2c3833;
  --glass:rgba(13,18,16,.62); --glass-line:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.08);
  --accent:#f2c230; --accent-ink:#1a1400; --accent-soft:rgba(242,194,48,.16); --mark:#2b4ea2;
  --shadow:0 10px 30px rgba(0,0,0,.35); --tshadow:0 1px 14px rgba(0,0,0,.55); color-scheme:dark;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; min-height:100%; background:var(--bg); color:var(--fg); }
body{ font-family:var(--sans); font-size:14px; line-height:1.5; font-weight:var(--w-regular); letter-spacing:var(--ls); word-break:keep-all; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
button,input,select{ font:inherit; letter-spacing:inherit; color:inherit; }
a{ color:inherit; }
button{ cursor:pointer; border:0; background:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- 유리판 버튼 (ui.css 와 같다) ---------- */
.glass{ background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 0 0 1px var(--glass-line),var(--shadow); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--fg);
  font-size:13.5px; font-weight:var(--w-regular); white-space:nowrap; cursor:pointer; text-decoration:none; transition:background .18s,color .18s,box-shadow .18s; }
.btn svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.btn:hover{ background:var(--glass-hi); }
.btn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); font-weight:var(--w-strong); }
.grp{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; }

/* ---------- 무대: 사진 · 살아 있는 3D · 가림막 ---------- */
.stage{ position:relative; min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"top top" "cap fig" "strip strip";
  column-gap:28px; padding:0 32px; overflow:hidden; isolation:isolate; }
.photo{ position:absolute; inset:0; z-index:-3; background:center/cover no-repeat var(--bg); }
.live{ position:absolute; inset:0; z-index:-2; opacity:0; transition:opacity 1.6s ease; pointer-events:none; }
.live iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; }
body.liveon .live{ opacity:1; }
/* 휴대폰 · 태블릿 표지: 3D 장면 사진 4장 — 한 장에 6초, 1.5초 동안 겹쳐 디졸브하며 천천히 다가간다 (24초에 한 바퀴) */
.live.slides img.sl{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:opacity, transform;
  animation:slfade 24s linear infinite, slkb 24s linear infinite; animation-delay:calc(var(--i) * 6s - 0.01s), calc(var(--i) * 6s - 0.01s); }
.live.slides img.sl:nth-child(2){ --tx:-2.2%; --ty:1.2%; }
.live.slides img.sl:nth-child(3){ --tx:2%; --ty:-1.5%; }
.live.slides img.sl:nth-child(4){ --tx:-1.5%; --ty:-1.8%; }
@keyframes slfade{ 0%{ opacity:0; } 6.25%{ opacity:1; } 25%{ opacity:1; } 31.25%{ opacity:0; } 100%{ opacity:0; } }
@keyframes slkb{ 0%{ transform:scale(1.02) translate(0, 0); } 31.25%{ transform:scale(1.12) translate(var(--tx, 1.8%), var(--ty, -1%)); } 100%{ transform:scale(1.12) translate(var(--tx, 1.8%), var(--ty, -1%)); } }
.scrim{ position:absolute; z-index:-1; pointer-events:none; }
.scrim.sr{ top:0; right:0; bottom:0; width:min(620px,50%); background:linear-gradient(to left,rgba(4,7,6,.88),rgba(4,7,6,.66) 42%,rgba(4,7,6,0)); }
.scrim.sb{ left:0; right:0; bottom:0; height:min(520px,60%); background:linear-gradient(to top,rgba(4,7,6,.9),rgba(4,7,6,.55) 55%,rgba(4,7,6,0)); }
.scrim.st{ left:0; right:0; top:0; height:170px; background:linear-gradient(to bottom,rgba(4,7,6,.62),rgba(4,7,6,0)); }
.scrim.sl{ left:0; top:0; width:min(560px,44%); height:100%; background:linear-gradient(to right,rgba(4,7,6,.7),rgba(4,7,6,0)); }

/* ---------- 머리글 ---------- */
.top{ grid-area:top; display:flex; align-items:center; gap:14px; padding:calc(18px + env(safe-area-inset-top,0px)) 0 0; min-height:72px; }
.top .sp{ flex:1 1 auto; }
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo img{ height:34px; width:auto; filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); }

/* ---------- 자막: 로고 · 얇은 부제 → 선 → 큰 제목 → 설명 → 단추 ---------- */
.cap{ grid-area:cap; align-self:end; justify-self:start; max-width:700px; padding:40px 0 26px; text-shadow:var(--tshadow); min-width:0; }
.cap>*{ animation:capIn .55s cubic-bezier(.2,.7,.2,1) both; }
.cap>*:nth-child(2){ animation-delay:.05s; } .cap>*:nth-child(3){ animation-delay:.09s; } .cap>*:nth-child(4){ animation-delay:.14s; } .cap>*:nth-child(5){ animation-delay:.18s; } .cap>*:nth-child(6){ animation-delay:.22s; } .cap>*:nth-child(7){ animation-delay:.26s; }
@keyframes capIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.slogo{ display:block; height:46px; width:auto; max-width:60vw; margin-bottom:14px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.cap .sub{ margin:0; display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:var(--w-detail); color:var(--fg-2); }
.mark{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--mark); color:#fff; font-size:12px; font-weight:var(--w-strong); letter-spacing:0; box-shadow:0 0 0 1.5px rgba(255,255,255,.5); text-shadow:none; }
.cap .rule{ display:block; width:56px; height:1px; margin:16px 0 15px; background:var(--accent); }
.cap h1{ margin:0; font-size:clamp(38px,4.4vw + 10px,72px); line-height:1.06; font-weight:var(--w-display); letter-spacing:var(--ls); text-wrap:balance; }
.cap .lead{ margin:18px 0 0; max-width:36em; font-size:15.5px; line-height:1.75; font-weight:var(--w-regular); color:var(--fg-2); white-space:pre-line; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.act{ display:inline-flex; align-items:center; gap:11px; height:54px; padding:0 22px 0 18px; border-radius:999px; text-decoration:none; color:var(--fg); text-shadow:none; transition:filter .18s, box-shadow .18s; }
.act svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.act span{ display:flex; flex-direction:column; line-height:1.2; }
.act b{ font-size:15px; font-weight:var(--w-strong); }
.act small{ font-size:11.5px; font-weight:var(--w-detail); opacity:.78; margin-top:2px; }
.act.primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.act.primary:hover{ filter:brightness(1.06); }
.act.glass:hover{ box-shadow:inset 0 0 0 1px var(--accent),var(--shadow); }
/* 「이 PC 에 받아 두기」 (offline.js card · 2026-11-15) — 표지 첫 줄 맨 앞. 받기 전: 학교 색으로 가장 먼저 눈에 띄게 · 받는 중: 단추 안이 차오름 · 받아 둠: ✓ 로 조용히
   VR 360° 로 여는 PC(.vrlead)는 3D 자료가 없어도 되므로 받기 전에도 유리판으로 */
.act.ocard{ position:relative; overflow:hidden; isolation:isolate; text-align:left; font:inherit; letter-spacing:inherit; cursor:pointer; }
.act.ocard b{ font-variant-numeric:tabular-nums; }
.act.ocard.ask{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.act.ocard.ask:hover{ filter:brightness(1.06); }
.act.ocard.run, .act.ocard.done, .vrlead .act.ocard.ask{ background:var(--glass); color:var(--fg); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 0 0 1px var(--glass-line),var(--shadow); filter:none; }
.vrlead .act.ocard.ask:hover{ box-shadow:inset 0 0 0 1px var(--accent),var(--shadow); }
.act.ocard.run{ cursor:progress; box-shadow:inset 0 0 0 1px var(--accent),var(--shadow); }
.act.ocard.run::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--w, 0%); background:var(--accent-soft); z-index:-1; transition:width .4s; }
.act.ocard.run::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:var(--w, 0%); background:var(--accent); transition:width .4s; }
.act.ocard.done{ cursor:default; }
.act.ocard.done svg{ color:var(--accent); }
.quick{ margin-top:12px; }
.quick .grp .btn{ height:34px; font-size:13px; }
.offlbox{ margin-top:12px; display:grid; justify-items:start; }
.offlbox:empty{ display:none; }
.offl{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px; width:min(420px, 100%); font-size:11.5px; font-weight:var(--w-detail); color:var(--fg-2); transition:opacity .8s; }
.offl.off{ opacity:0; }
.offl.ask{ grid-template-columns:auto auto; } .offl.ask i, .offl.ask em{ display:none; }
.offl span{ white-space:nowrap; }
.offl em{ font-style:normal; font-variant-numeric:tabular-nums; min-width:3em; text-align:right; order:3; }
.offl i{ display:block; order:2; height:3px; border-radius:2px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.offl i::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--w, 0%); background:var(--accent); border-radius:2px; transition:width .4s; }
.offl button{ order:4; flex:none; height:28px; padding:0 11px; border-radius:999px; background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-line); color:var(--fg); font-size:11.5px; font-weight:var(--w-medium); }
.offl button:hover{ box-shadow:inset 0 0 0 1px var(--accent); }

/* ---------- 오른쪽: 교내 핵심 공간 목록 (번호가 세로선 위에) ---------- */
.fig{ grid-area:fig; align-self:end; min-width:0; padding:0 0 26px; text-shadow:var(--tshadow); }
.blk{ display:flex; flex-direction:column; gap:10px; }
.blk h3{ margin:0; font-size:13px; font-weight:var(--w-strong); display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.blk h3 small{ font-size:11.5px; font-weight:var(--w-detail); color:var(--muted); text-align:right; }
.chap{ position:relative; list-style:none; margin:0; padding:0; max-height:min(52vh, 480px); overflow-y:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent); }
.chap::-webkit-scrollbar{ display:none; }
.chap::before{ content:''; position:absolute; left:13.5px; top:16px; bottom:16px; width:1px; background:rgba(255,255,255,.24); }
.chap a{ position:relative; display:flex; align-items:center; gap:13px; height:40px; padding:0 10px 0 0; color:var(--fg-2); text-decoration:none; font-size:14px; font-weight:var(--w-detail); border-radius:999px; }
.chap .n{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:var(--w-medium); font-variant-numeric:tabular-nums;
  background:rgba(10,14,13,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); color:var(--fg-2); text-shadow:none; transition:all .25s; }
.chap a:hover .n{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 5px var(--accent-soft),0 6px 16px rgba(0,0,0,.4); }
.chap a:hover .l{ color:#fff; font-weight:var(--w-strong); }
.chap a:hover::after{ content:''; width:36px; height:1px; background:var(--accent); }
/* 마우스를 올리면 그 장소 사진이 목록 왼쪽에 떠오른다 */
.chap a::before{ content:''; position:absolute; right:calc(100% + 16px); top:50%; transform:translateY(-50%) scale(.96); width:200px; aspect-ratio:16/10; border-radius:12px; background:var(--ph) center/cover, var(--surface-2); box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.chap a:hover::before{ opacity:1; transform:translateY(-50%); }

/* ---------- 아래 지표 띠 ---------- */
.strip{ grid-area:strip; position:relative; display:flex; align-items:stretch; gap:0; margin:0 -32px; padding:14px 32px calc(18px + env(safe-area-inset-bottom,0px)); overflow-x:auto; scrollbar-width:none;
  border-top:1px solid rgba(255,255,255,.12); background:linear-gradient(to top,rgba(4,7,6,.78),rgba(4,7,6,.5)); }
.strip::-webkit-scrollbar{ display:none; }
.mt{ position:relative; flex:none; display:flex; flex-direction:column; gap:5px; min-width:118px; padding:2px 24px; border:0; border-left:1px solid rgba(255,255,255,.14); background:none; color:var(--fg); text-align:left; cursor:pointer; border-radius:0; text-shadow:var(--tshadow); }
.mt:first-child{ border-left:0; padding-left:0; }
.mt .ml{ font-size:12px; font-weight:var(--w-detail); color:var(--fg-2); white-space:nowrap; }
.mt .mv{ font-size:24px; line-height:1.1; font-weight:var(--w-medium); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mt .mv small{ margin-left:3px; font-size:13px; font-weight:var(--w-detail); color:var(--fg-2); }
.mt:hover .ml{ color:var(--fg); }
.mt.rec{ margin-left:auto; border-left:0; padding-right:0; cursor:default; }
.mt.rec .mv{ font-size:14px; font-weight:var(--w-regular); line-height:1.4; color:var(--fg-2); white-space:normal; max-width:420px; }
.mt.rec .mv b{ font-weight:var(--w-medium); color:var(--fg); }

/* ---------- 팝업 ---------- */
.dlg{ border:0; padding:0; margin:auto; width:min(760px, calc(100% - 32px)); max-height:calc(100% - 40px); border-radius:18px; background:var(--surface); color:var(--fg); box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 0 0 1px var(--glass-line); overflow:hidden; }
.dlg::backdrop{ background:rgba(4,7,6,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.dlg .dh{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 12px; }
.dlg h2{ margin:0; font-size:20px; font-weight:var(--w-medium); }
.dlg .dh p{ margin:4px 0 0; font-size:13px; font-weight:var(--w-detail); color:var(--muted); }
.dx{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--surface-2); color:var(--fg-2); font-size:13px; display:grid; place-items:center; }
.dx:hover{ background:var(--accent); color:var(--accent-ink); }
.dx svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.dlg .db{ padding:6px 24px 24px; overflow:auto; max-height:calc(100vh - 160px); scrollbar-width:thin; }
.dlg.wide{ width:min(1040px, calc(100% - 32px)); }
/* 창이 화면보다 길면 머리판은 두고 내용만 넘겨 읽기 (아래쪽이 잘려 안 보이던 것 — 2026-10-24) */
.dlg[open]{ display:flex; flex-direction:column; }
.dlg > .gh, .dlg > .dh{ flex:none; }
.dlg > .db{ flex:1 1 auto; min-height:0; max-height:none; }
/* 학교 한눈에: 사진 머리판 + 큰 숫자 넷 + 기본 정보 */
.glance .gh{ position:relative; padding:28px 24px 20px; background:center/cover no-repeat var(--surface-2); min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; text-shadow:var(--tshadow); }
.glance .gh::before{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,7,6,.92),rgba(4,7,6,.35)); }
.glance .gh>*{ position:relative; }
.glance .gh .dx{ position:absolute; right:16px; top:16px; background:var(--glass); color:var(--fg); }
.glance .gh small{ font-size:12px; font-weight:var(--w-strong); color:var(--accent); }
.glance .gh h2{ font-size:30px; font-weight:var(--w-display); }
.glance .gmotto{ margin:0; font-size:13.5px; font-weight:var(--w-detail); color:var(--fg-2); }
.glance .glogo{ height:40px; width:auto; align-self:flex-start; margin-bottom:8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.gb{ display:flex; flex-direction:column; gap:18px; padding-top:18px; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px 14px; }
.kpi{ display:flex; flex-direction:column; gap:3px; padding:10px 0 8px; border-top:1px solid var(--line); }
.kpi .kv{ font-size:28px; line-height:1.05; font-weight:var(--w-medium); font-variant-numeric:tabular-nums; }
.kpi .kv small{ font-size:12px; font-weight:var(--w-detail); color:var(--muted); margin-left:3px; }
.kpi .kl{ font-size:12px; font-weight:var(--w-detail); color:var(--fg-2); }
.gfacts{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; font-size:13px; }
.gfacts dt{ font-weight:var(--w-detail); color:var(--muted); white-space:nowrap; }
.gfacts dd{ margin:0; line-height:1.55; }
.gfacts dd small{ color:var(--muted); font-weight:var(--w-detail); }
.gfacts a{ color:var(--accent); text-decoration:none; }
.plinks{ display:flex; flex-wrap:wrap; gap:8px; }
.plinks a{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:999px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px; text-decoration:none; color:var(--fg); }
.plinks a svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.plinks a:hover{ box-shadow:inset 0 0 0 1px var(--accent); }
.fnote{ margin:0; font-size:11.5px; line-height:1.6; font-weight:var(--w-detail); color:var(--muted); }
/* 교내 핵심 공간: 지도 + 목록 */
.places{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr); gap:20px; }
.mapbox{ margin:0; display:flex; flex-direction:column; gap:8px; }
.mapbox img{ display:block; width:100%; height:auto; border-radius:14px; background:var(--surface-2); }
.kmap{ width:100%; aspect-ratio:1400/1253; border-radius:14px; overflow:hidden; background:var(--surface-2); }
.mapbox figcaption{ font-size:11.5px; font-weight:var(--w-detail); color:var(--muted); }
.plist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; max-height:min(66vh, 620px); overflow:auto; scrollbar-width:thin; }
.plist li{ border-top:1px solid var(--line); }
.plist li:last-child{ border-bottom:1px solid var(--line); }
.plist a{ display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:center; padding:9px 2px; text-decoration:none; color:var(--fg); border-radius:10px; }
.plist a:hover{ background:var(--glass-hi); }
.plist .th{ position:relative; aspect-ratio:4/3; border-radius:9px; background:center/cover var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
.plist .th i{ position:absolute; left:6px; top:6px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:600; background:rgba(10,14,13,.78); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.plist .tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.plist .tx small{ font-size:11px; font-weight:var(--w-detail); color:var(--muted); }
.plist .tx b{ font-size:14px; font-weight:var(--w-medium); }
.plist .tx span{ font-size:12px; line-height:1.5; font-weight:var(--w-detail); color:var(--fg-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kspot{ position:relative; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:12.5px; text-decoration:none; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.4); transition:transform .15s; }
.kspot span{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:600; color:#fff; background:rgba(13,18,16,.9); padding:3px 9px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .15s; }
.kspot:hover{ transform:scale(1.15); z-index:9; } .kspot:hover span{ opacity:1; }
.kname{ padding:4px 11px; background:rgba(13,18,16,.9); color:#fff; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.3); }

/* ---------- 앱 안 브라우저 알림 띠 (inapp.js) · 앱 첫 화면 ---------- */
.inapp{ position:fixed; left:12px; right:12px; top:calc(12px + env(safe-area-inset-top,0px)); z-index:40; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:#fff8dc; color:#2a1d08; font-size:12.5px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.35); border:1px solid #ffd23f; letter-spacing:0; }
.inapp span{ flex:1; }
.inapp a{ flex:none; background:#2a1d08; color:#ffd23f; font-weight:800; padding:7px 12px; border-radius:999px; text-decoration:none; white-space:nowrap; }
.inapp b{ flex:none; font-size:12px; }
.inapp button{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.1); font-size:11px; color:#2a1d08; }
/* 앱 안 브라우저(카카오톡 등) 알림 띠: 새 화면의 어두운 유리판 · 학교 색 단추 (2026-10-22) */
.inapp{background:rgba(13,18,16,.9)!important;color:#ecf1ed!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 10px 30px rgba(0,0,0,.35)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px!important;font-weight:400!important;letter-spacing:-0.03em;font-family:var(--sans)}
.inapp a{background:var(--accent)!important;color:var(--accent-ink)!important;font-weight:600!important}
.inapp b{color:var(--accent)!important;font-weight:500!important}
.inapp button{background:rgba(255,255,255,.1)!important;color:#ecf1ed!important}
.splash{ position:fixed; inset:0; z-index:100; background:#fff; display:grid; place-items:center; padding:24px; transition:opacity .6s ease; }
.splash.off{ opacity:0; pointer-events:none; }
.splash-in{ display:grid; justify-items:center; gap:14px; text-align:center; }
.splash-logo{ width:min(340px, 82vw); height:auto; }
.splash-sub{ font-size:clamp(13px, 3.6vw, 15px); font-weight:700; color:#0d4e97; letter-spacing:.02em; }

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .stage{ grid-template-columns:minmax(0,1fr) minmax(230px,260px); column-gap:20px; padding:0 24px; }
  .strip{ margin:0 -24px; padding-left:24px; padding-right:24px; }
  .mt{ padding:2px 18px; min-width:104px; }
  .cap h1{ font-size:clamp(34px,4vw + 8px,56px); }
}
@media (max-width:980px){
  .stage{ grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "cap" "strip"; }
  .fig{ display:none; }
  .mt.rec{ display:none; }
  .places{ grid-template-columns:1fr; }
  .plist{ max-height:none; }
}
@media (max-width:720px){
  .stage{ padding:0 16px; }
  .top{ min-height:60px; padding-top:calc(12px + env(safe-area-inset-top,0px)); }
  .logo img{ height:28px; }
  #topTools .btn span{ display:none; } #topTools .btn{ padding:0 11px; }
  .cap{ padding:28vh 0 18px; max-width:none; }
  .slogo{ height:38px; }
  .cap h1{ font-size:clamp(32px,9vw,44px); }
  .cap .lead{ font-size:14px; line-height:1.65; margin-top:12px; }
  .actions{ flex-direction:column; align-items:stretch; margin-top:18px; }
  .act{ height:52px; }
  .quick .grp{ display:flex; width:100%; }
  .quick .grp .btn{ flex:1 1 0; padding:0 6px; }
  .quick .grp .btn span{ font-size:12.5px; }
  .strip{ margin:0 -16px; padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)); }
  /* 휴대폰: 지표 다섯 개가 옆으로 밀려 잘리지 않게 세 칸씩 두 줄로 (2026-10-22) */
  .strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:14px; overflow:visible; }
  .mt{ min-width:0; padding:2px 12px; } .mt:nth-child(3n+1){ border-left:0; padding-left:0; }
  .mt .ml{ white-space:normal; }
  .mt .mv{ font-size:20px; }
  .dlg{ width:calc(100% - 16px); max-height:calc(100% - 24px); border-radius:16px; }
  .dlg .dh, .dlg .db{ padding-left:16px; padding-right:16px; }
  .glance .gh{ padding:22px 16px 16px; min-height:140px; }
  .glance .gh h2{ font-size:26px; }
}
@media (orientation:landscape) and (max-height:520px){
  .cap{ padding:10px 0 12px; } .cap h1{ font-size:30px; } .cap .lead{ display:none; } .cap .rule{ margin:8px 0; }
  .actions{ margin-top:10px; } .act{ height:42px; } .act small{ display:none; }
  .fig{ display:none; } .strip{ display:none; } .quick{ margin-top:8px; }
}
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; } .live.slides img.sl:first-child{ opacity:1; } }

/* 노트북 판(.litefx — design.js 의 LAPTOP): 흐림 효과 끔 · 유리판은 조금 더 짙게 (2026-10-25) */
.litefx{ --glass:rgba(13,18,16,.78); }
.litefx *, .litefx .dlg::backdrop{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }