/* ═══════════════════════════════════════════════════════════
   늘봄목포 디지털트윈 — 표지 · 상단바 · 하단 필름띠 · 공간 카드 · 긴급돌봄 안내 (twin.css 위에 덧씌움)
   화면 겹침 순서: 3D(0) < 디졸브 덮개(2) < 걷기 안내(3) < 조이스틱(4) < 불러오기(5) < 늘봄 UI(6) < 표지(7) < 긴급돌봄(50) < 알림(60)
   ═══════════════════════════════════════════════════════════ */
@font-face{ font-family:'NanumBrushSub'; src:url('fonts/NanumBrush-sub.woff2') format('woff2'); font-weight:400; font-display:swap; }   /* 표지 제목 글자만 담은 작은 붓글씨 글꼴 (9KB) */

:root{
  --ink:#0F141B; --ink-2:#4B5563; --ink-3:#8A94A3; --line:#E7E9ED; --white:#fff;
  --orange:#F4971A; --green:#6DBE4B; --blue:#1EA9DE; --pink:#E3719F;
  --c:#F4971A;                                          /* 지금 층 색 (화면이 바꿔 넣는다) */
  --brush:'NanumBrushSub','Nanum Brush Script',cursive;
  --display:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --glass:rgba(14,17,22,.74);
}
.viewer{ background:#0B0E12; letter-spacing:-.012em; }
svg.i{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; flex:none; }
svg.si{ width:14px; height:14px; fill:currentColor; display:block; flex:none; }
.nb-hide{ display:none !important; }

/* ── 엔진의 기본 화면 요소는 감춘다 (우리 화면으로 대신) ── */
.bar, .chips, .poicard, .cover .in, .cover::before, .avpick, .avstart{ display:none !important; }
.hint{ bottom:calc(126px + var(--safe-b)); font-size:11.5px; }                      /* 걷기 안내: 필름띠 위 */
#joy{ left:12px; bottom:calc(172px + var(--safe-b)); width:84px; height:84px; background:rgba(14,17,22,.45); }
#joy i{ width:36px; height:36px; margin:-18px 0 0 -18px; background:var(--c); }
#jumpBtn{ right:12px; bottom:calc(186px + var(--safe-b)); width:46px; height:46px; background:var(--c); color:#fff; font-family:var(--display); }
/* 불러오기 (표지 「둘러보기」·층 단추 → 3D): 화면 가운데 진행 막대 + 뒤(표지 영상 · 3D)를 덮는 어두운 막
   — 3D 가 받아지고(자료 받기) · 자리를 잡고(공간 구성) · 또렷해지는(선명하게) 과정을 또렷하게 보여 주고, 다 되면 막과 함께 사라진다 (2026-10-17 요청: 가운데 · 불투명한 배경) */
.load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:rgba(9,12,16,.82); text-align:left; z-index:8; opacity:0; pointer-events:none; transition:opacity .6s ease; font-family:var(--display); color:#fff; }
.load.nb-on, .load.nb-err{ opacity:1; pointer-events:auto; }   /* 불러오는 동안은 뒤 3D 를 누르지 않게 막는다 */
.load > .t, .load > .s, .load > .s2, .load > .bar2, .load > .ver{ display:none; }   /* 엔진의 글·막대는 숨기고 아래 .nbl 로 */
.load.nb-err > .t, .load.nb-err > .s{ display:block; text-align:center; max-width:min(440px, 86vw); }
.load .t.err{ font-size:16px; font-weight:600; color:#ffb3a7; margin-bottom:6px; }
.load.nb-err .s{ font-size:13px; line-height:1.6; opacity:.9; }
.load button{ pointer-events:auto; margin-top:12px; background:#fff; color:var(--ink); border-radius:999px; padding:9px 18px; font-size:14px; }
.nbl{ width:min(440px, 84vw); }
.nbl-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.nbl-t{ font-size:17px; font-weight:600; letter-spacing:-.015em; }
.nbl-p{ font-size:15px; font-weight:500; opacity:.92; font-variant-numeric:tabular-nums; }
.nbl-bar{ position:relative; height:4px; margin-top:12px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden; }
.nbl-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6); }
.nbl-bar i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.0) 35%, rgba(180,220,255,.95) 50%, rgba(255,255,255,0) 65%); background-size:220% 100%; animation:nblShine 1.6s linear infinite; }
@keyframes nblShine{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.nbl-st{ list-style:none; margin:14px 0 0; padding:0; display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:400; }
.nbl-st li{ opacity:.4; transition:opacity .4s ease; white-space:nowrap; }
.nbl-st li::before{ content:attr(data-n) " "; font-variant-numeric:tabular-nums; }
.nbl-st li.on{ opacity:1; font-weight:600; }
.nbl-st li.ok{ opacity:.78; }
.nbl-st li.ok::before{ content:"✓ "; }
.nbl-n{ margin-top:16px; font-size:12px; font-weight:400; opacity:.6; line-height:1.5; text-align:center; }
.nbl-n[hidden]{ display:none; }
@media (max-width: 899px){ .nbl-t{ font-size:16px; } .nbl-p{ font-size:14px; } .nbl-st{ font-size:12px; gap:8px; } .nbl-n{ font-size:11.5px; } }

/* ── 교육지원청 로고: 3D 화면 오른쪽 위 고정 ── */
.nb-mped{ position:absolute; top:calc(14px + var(--safe-t)); right:14px; z-index:6; display:block; opacity:.96; }
.nb-mped img{ display:block; height:18px; width:auto; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); }

/* ═══ 표지 (L2 하단 집중형 · 제목 나눔붓글씨 · 본문 프리텐다드) ═══ */
.cover{ display:block !important; background:#0B0E12 !important; color:#fff; font-family:var(--display); align-items:stretch; }
.cover.off{ display:none !important; }   /* 둘러보기를 누르면 엔진이 off 를 붙인다 */
/* 불러오는 동안(nb-loading): 표지 영상만 배경으로 남기고 글·단추는 걷는다 → 첫 3D 자료가 열리면 nb-fade 로 0.9초에 녹아 사라진다 */
.cover.off.nb-loading{ display:block !important; opacity:1; pointer-events:none; transition:opacity .9s ease; }
.cover.off.nb-loading.nb-fade{ opacity:0; }
.cover.nb-loading .brand, .cover.nb-loading .topnav, .cover.nb-loading .lift, .cover.nb-loading .stack, .cover.nb-loading .addr{ opacity:0; transition:opacity .35s ease; pointer-events:none; }
.cover.nb-loading .shade{ opacity:.55; transition:opacity .35s ease; }
.viewer.nb-busy .nb-mped{ z-index:9; }   /* 불러오는 동안: 교육지원청 로고는 어두운 막 위에 그대로 */
.cover video, .cover .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.cover .poster{ background:url(img/hero_poster.jpg) 40% 50%/cover no-repeat; }
.cover .shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,.18) 50%,rgba(11,14,18,.92) 80%,#0B0E12 100%); }
.brand{ position:absolute; left:18px; top:calc(16px + var(--safe-t)); z-index:2; }
.brand .mped-s{ display:block; height:12px; width:auto; opacity:.9; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.brand .row{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.brand .name{ font-family:var(--brush); font-size:46px; line-height:1; white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.55); }
.brand .side{ display:none; border-left:2px solid rgba(255,255,255,.7); padding-left:12px; font-family:var(--brush); font-size:22px; line-height:1.2; opacity:.92; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.lift{ position:absolute; left:18px; top:46%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.lift::before{ content:""; position:absolute; left:50%; top:-34px; bottom:-34px; width:0; border-left:2px dotted rgba(255,255,255,.45); z-index:-1; }
.lift button{ width:36px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); position:relative; font-family:var(--display); }
.lift button::before{ content:""; position:absolute; left:3px; top:3px; width:6px; height:6px; border-radius:2px; background:var(--fc); }
.cover .stack{ position:absolute; left:20px; right:20px; bottom:calc(16px + var(--safe-b)); display:flex; flex-direction:column; align-items:flex-start; gap:12px; z-index:2; }
.cover .logo{ width:120px; height:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.cover .copy{ text-align:left; background:rgba(10,12,16,.5); border-radius:10px; padding:8px 14px 9px; backdrop-filter:blur(6px); }
.cover .copy b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.cover .copy p{ margin:3px 0 0; font-size:13px; font-weight:500; line-height:1.4; color:rgba(255,255,255,.9); white-space:nowrap; }
.cta{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:54px; width:100%; max-width:340px; padding:0 6px 0 24px; border-radius:999px; font-size:17px; font-weight:700; color:var(--ink); background:#fff; font-family:var(--display); box-shadow:0 10px 30px rgba(0,0,0,.25); text-align:left; }
.cta i{ width:42px; height:42px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(244,151,26,.45); flex:none; }
.cta svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cta small{ display:block; font-size:11px; font-weight:500; color:var(--ink-3); margin-top:1px; }
/* 표지 왼쪽 아래 줄(긴급돌봄 · 오시는 길): 오른쪽 위 메뉴와 같은 모양 — 글자만 있다가 마우스를 올리면 알약 배경이 서서히 들어온다 */
.cover .links{ display:flex; gap:4px; flex-wrap:wrap; margin-left:-12px; }
.cover .links a, .cover .links button{ display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; font-family:var(--display); font-size:13px; font-weight:600; line-height:1; color:#fff; opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.5); text-decoration:none; background:rgba(255,255,255,0); border:1px solid rgba(255,255,255,0); cursor:pointer; transition:background .25s ease, border-color .25s ease, opacity .25s ease; }
.cover .links a:hover, .cover .links button:hover{ opacity:1; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.cover .links .si{ width:15px; height:15px; }
/* 표지 오른쪽 위 메뉴: 한 줄 높이(40px)로 가운데 맞춤 · 마우스를 올리면 0.25초에 걸쳐 밝아지는 알약 배경(디졸브) */
.topnav{ display:flex; position:absolute; right:14px; top:calc(88px + var(--safe-t)); gap:8px; z-index:3; align-items:center; }   /* 휴대폰: 제목 글씨 아래 오른쪽 */
.topnav a.pill{ height:36px; font-size:13.5px; }
.topnav > :not(.pill){ display:none; }   /* 휴대폰: 오른쪽 위에는 상동초 알약만 (긴급돌봄·오시는 길은 아래 줄에) */
.topnav a, .topnav button{ display:flex; align-items:center; height:40px; padding:0 14px; border-radius:999px; font-family:var(--display); font-size:15px; font-weight:600; line-height:1; color:#fff; opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.5); text-decoration:none; background:rgba(255,255,255,0); border:1px solid rgba(255,255,255,0); cursor:pointer; transition:background .25s ease, border-color .25s ease, opacity .25s ease; }
.topnav a:hover, .topnav button:hover{ opacity:1; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.topnav a.pill{ gap:7px; padding:0 18px 0 14px; background:#fff; border-color:#fff; color:var(--ink); opacity:1; text-shadow:none; box-shadow:0 2px 12px rgba(0,0,0,.28); margin-left:6px; transition:transform .2s ease, box-shadow .25s ease, background .25s ease; }
.topnav a.pill:hover{ transform:translateY(-1px); background:#fff; border-color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.34); }
.topnav a.pill .si{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cover .addr{ display:none; position:absolute; right:40px; bottom:44px; font-size:12px; color:rgba(255,255,255,.6); text-align:right; line-height:1.6; z-index:2; }

/* ═══ 3D 화면 상단바 ═══ */
.nb-top{ position:absolute; left:0; right:0; top:0; padding:calc(10px + var(--safe-t)) 178px 10px 12px; display:flex; align-items:center; gap:8px; background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0)); color:#fff; z-index:6; pointer-events:none; font-family:var(--display); }
.nb-top > *{ pointer-events:auto; }
.ib{ width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; flex:none; color:#fff; cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease; }
.ib:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.ib svg{ width:19px; height:19px; }
.nb-top .logo{ width:42px; height:42px; background:none; padding:0; border:0; flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }   /* 왼쪽 위 늘봄목포 로고 — 흰색 누끼(배경 없음) · 누르면 표지로 */
.nb-top .logo img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.nb-top .title{ flex:1; min-width:0; }
.nb-top .title b{ display:block; font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; line-height:1.15; }
.nb-top .title b em{ display:block; font-style:normal; font-size:11px; font-weight:600; opacity:.85; }
.nb-top .title span{ display:none; font-size:11px; opacity:.8; }
.nb-top .ib.phone{ display:none; }
.school{ height:38px; border-radius:999px; background:#fff; border:1px solid #fff; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--ink); padding:0 11px; font-size:13px; font-weight:700; white-space:nowrap; flex:none; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.school:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.34); }
.nb-top .logo{ transition:opacity .25s ease; } .nb-top .logo:hover{ opacity:.8; }
.school svg{ width:19px; height:19px; }
.school span{ display:none; }
.school.back{ background:var(--ink); color:#fff; border-color:var(--ink); }   /* 상동초에서 들어왔을 때: 「상동초로 나가기」 */

/* 순간이동 뒤 자료를 채우는 동안(0.8초 넘으면) 덮개 위에 글 */
.veil.wait .vmsg{ opacity:.92; font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:0; background:rgba(0,0,0,.45); width:max-content; left:50%; right:auto; padding:9px 16px; border-radius:999px; transform:translate(-50%,-50%); }

/* ═══ 공간 고르기: 하단 필름띠 ═══ */
.nb-ui{ display:none; }
.viewer.nb-ready .nb-ui{ display:flex; }
.floors{ position:absolute; left:12px; right:12px; bottom:calc(118px + var(--safe-b)); gap:6px; align-items:center; z-index:6; font-family:var(--display); }
.fpill{ height:32px; padding:0 11px 0 8px; border-radius:999px; background:rgba(14,17,22,.6); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; flex:none; }
.fpill i{ width:16px; height:16px; border-radius:4px; background:var(--fc); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-style:normal; font-weight:800; color:#fff; }
.fpill{ cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease; }
.fpill:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); }
.fpill.on{ background:#fff; color:var(--ink); border-color:#fff; }
.fpill.on:hover{ background:#fff; }
.fpill.em{ margin-left:auto; padding:0 9px; }
.fpill.em svg{ width:17px; height:17px; }
.strip{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px calc(12px + var(--safe-b)); gap:8px; overflow-x:auto; z-index:6; background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0)); scroll-snap-type:x proximity; scrollbar-width:none; font-family:var(--display); }
.strip::-webkit-scrollbar{ display:none; }
.fc{ flex:none; width:112px; scroll-snap-align:start; text-align:left; color:#fff; position:relative; }
.fc img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px; border:2px solid transparent; background:#222; transition:border-color .25s ease,transform .25s ease; }
.fc .lb{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.fc .lb i{ width:7px; height:7px; border-radius:50%; background:var(--c); flex:none; }
.fc:hover img{ border-color:rgba(255,255,255,.7); transform:translateY(-3px); }
.fc:hover img{ border-color:rgba(255,255,255,.7); transform:translateY(-3px); }
.fc.on img{ border-color:var(--c); transform:translateY(-3px); }
.fc.todo .lb::after{ content:"자리 미정"; margin-left:auto; font-size:9.5px; font-weight:600; color:#FFD58A; opacity:.9; }
.fc.door .lb::after{ content:"문 앞"; margin-left:auto; font-size:9.5px; font-weight:600; color:#CFE3FF; opacity:.9; }   /* 촬영 안 된 방: 복도 문 앞까지만 */
.nb-hint{ position:absolute; left:12px; bottom:calc(158px + var(--safe-b)); font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.45); padding:6px 10px; border-radius:999px; backdrop-filter:blur(6px); z-index:6; font-family:var(--display); }

/* 공간 카드 (반투명 · 3D 위에 겹침 · 휴대폰은 접힌 채로 시작) */
.info{ position:absolute; left:12px; right:12px; bottom:calc(166px + var(--safe-b)); max-height:46vh; overflow-y:auto; background:var(--glass); backdrop-filter:blur(12px); color:#fff; border-radius:16px; padding:14px 14px 12px; z-index:6; flex-direction:column; font-family:var(--display); --pl:rgba(255,255,255,.15); --pb:rgba(255,255,255,.12); }
.info .x{ position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.info .x svg{ width:16px; height:16px; }
.info .head{ display:flex; align-items:center; gap:10px; padding-right:34px; }
.info .head .ic{ width:40px; height:40px; border-radius:50%; background:var(--c); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.info .head .ic svg{ width:21px; height:21px; }
.info h2{ font-size:21px; margin:0; line-height:1.15; font-weight:800; letter-spacing:-.03em; }
.info .meta{ font-size:12px; opacity:.7; margin-top:3px; }
.info .meta b{ color:var(--c); font-weight:800; margin-right:6px; }
.info .where{ display:flex; align-items:center; gap:7px; margin-top:9px; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.08); font-size:12px; font-weight:600; color:#fff; }   /* 지금 위치 (아바타가 움직이면 바뀜) */
.info .where i{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); flex:none; animation:nb-pulse 1.6s ease-in-out infinite; }
@keyframes nb-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
.info.fold .where{ margin-top:7px; padding:4px 8px; font-size:11.5px; }
.info .desc{ font-size:13.5px; line-height:1.6; margin:10px 0 0; opacity:.9; }
.info .more{ display:none; margin-top:8px; align-self:flex-start; height:32px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12.5px; font-weight:700; color:#fff; }
.info.fold .desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.info.fold .prog, .info.fold .contact, .info.fold .nav{ display:none; }
.info.fold .more{ display:inline-flex; align-items:center; }
.prog{ margin-top:10px; border-top:1px solid var(--pl); padding-top:10px; }
.prog .ph{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:800; opacity:.85; margin-bottom:4px; }
.prog .ph a{ font-weight:600; opacity:.7; color:#fff; text-decoration:none; }
.prog ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0 10px; }
.prog ul.single{ grid-template-columns:1fr; }
.prog li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.35; padding:3px 0; }
.prog li b{ flex:none; min-width:24px; height:24px; padding:0 6px; border-radius:6px; background:var(--pb); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; }
.prog li span{ padding-top:3px; }
.prog .note{ font-size:11px; opacity:.6; margin-top:5px; }
.prog.none{ font-size:13px; opacity:.65; }
.contact{ margin-top:8px; font-size:13px; display:flex; align-items:center; gap:6px; }
.contact a{ font-weight:800; border-bottom:1.5px solid var(--c); color:#fff; text-decoration:none; }
.nav{ display:flex; gap:6px; margin-top:10px; border-top:1px solid var(--pl); padding-top:10px; }
.nav button{ flex:1; height:40px; border-radius:10px; border:1px solid var(--pl); color:#fff; font-family:var(--display); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; }
.nav button:hover{ background:rgba(255,255,255,.08); }
.nav button.share{ flex:0 0 40px; border-color:#fff; }
.nav button svg{ width:17px; height:17px; }

/* ═══ 긴급·수시 돌봄 ═══ */
.modal{ position:fixed; inset:0; background:rgba(10,14,20,.6); z-index:50; display:flex; align-items:flex-end; justify-content:center; font-family:var(--display); color:var(--ink); }
.modal .box{ position:relative; background:#fff; width:100%; border-radius:18px 18px 0 0; padding:14px 20px calc(20px + var(--safe-b)); max-height:86vh; overflow:auto; }
.modal .x{ position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%; border:0; background:#F1F3F5; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.modal .x:hover{ background:#E4E7EB; }
.modal .x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.modal .box .handle{ width:36px; height:4px; border-radius:2px; background:#D6DAE0; margin:0 auto 14px; }
.modal h3{ margin:0 0 2px; font-size:22px; font-weight:800; letter-spacing:-.03em; }
.modal .sub{ font-size:12.5px; color:var(--ink-3); margin-bottom:14px; }
.modal dl{ margin:0; display:grid; grid-template-columns:44px 1fr; gap:10px; font-size:14.5px; line-height:1.5; }
.modal dt{ font-weight:800; color:var(--orange); }
.modal dd{ margin:0; color:var(--ink-2); }
.modal .btns{ display:flex; gap:8px; margin-top:18px; }
.modal .btns a{ flex:1; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:14.5px; border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.modal .btns .call{ background:var(--ink); color:#fff; border-color:var(--ink); }
.modal .fine{ font-size:11.5px; color:var(--ink-3); margin-top:12px; line-height:1.5; }
.toast{ position:fixed; left:50%; bottom:calc(214px + var(--safe-b)); transform:translateX(-50%); background:rgba(15,20,27,.95); color:#fff; font-size:13px; font-weight:700; padding:10px 16px; border-radius:999px; z-index:60; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; font-family:var(--display); }
.toast.on{ opacity:1; }

/* ═══ 자리 정하기 (?edit=1) ═══ */
.edit{ position:absolute; right:12px; top:calc(64px + var(--safe-t)); width:300px; max-height:calc(100vh - 260px); overflow:auto; background:rgba(255,255,255,.96); color:var(--ink); border-radius:14px; padding:12px; z-index:40; font-family:var(--display); font-size:12.5px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.edit h4{ margin:0 0 6px; font-size:14px; font-weight:800; }
.edit p{ margin:0 0 8px; color:var(--ink-2); line-height:1.45; }
.edit .row{ display:flex; gap:6px; margin-bottom:8px; }
.edit select, .edit button{ height:34px; border-radius:8px; border:1px solid var(--line); background:#fff; font:inherit; padding:0 10px; }
.edit select{ flex:1; min-width:0; }
.edit button.go{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700; }
.edit button.sub{ font-weight:600; }
.edit .list{ border-top:1px solid var(--line); padding-top:6px; max-height:260px; overflow:auto; }
.edit .list div{ display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dashed var(--line); }
.edit .list div.ok span:last-child{ color:var(--green); font-weight:700; }
.edit .list div.no span:last-child{ color:var(--ink-3); }
.edit textarea{ width:100%; height:90px; font:11px/1.35 Consolas,monospace; border:1px solid var(--line); border-radius:8px; margin-top:6px; }
.edit .pos{ font:11px Consolas,monospace; color:var(--ink-3); margin-bottom:6px; }

/* ═══ PC ═══ */
@media (min-width:900px){
  .nb-mped{ top:24px; right:32px; } .nb-mped img{ height:32px; }
  .nbl{ width:460px; } .nbl-t{ font-size:19px; } .nbl-p{ font-size:16px; } .nbl-st{ font-size:13.5px; }
  .cover video, .cover .poster{ object-position:center; }
  .cover .shade{ background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%),linear-gradient(90deg,rgba(11,14,18,.85) 0%,rgba(0,0,0,0) 55%),linear-gradient(0deg,rgba(11,14,18,.7) 0%,rgba(0,0,0,0) 45%); }
  .brand{ left:40px; top:28px; } .brand .mped-s{ height:16px; } .brand .name{ font-size:80px; } .brand .side{ display:block; }
  .lift{ display:none; }
  .topnav{ right:40px; top:30px; } .topnav > :not(.pill){ display:flex; } .topnav a.pill{ height:40px; font-size:15px; }
  .cover .stack{ left:40px; right:auto; bottom:44px; width:420px; gap:16px; }
  .cover .links a, .cover .links button{ font-size:14px; height:38px; padding:0 14px; }
  .cover .logo{ width:200px; }
  .cta{ max-width:300px; }
  .cover .addr{ display:block; }
  .nb-top{ padding:16px 330px 14px 24px; gap:12px; }
  .nb-top .logo{ width:56px; height:56px; }
  .nb-top .title b{ font-size:19px; line-height:1.2; }
  .nb-top .title b em{ display:inline; font-size:inherit; font-weight:inherit; opacity:1; }
  .nb-top .title span{ display:block; }
  .nb-top .ib.phone{ display:flex; }
  .school{ padding:0 16px 0 12px; font-size:14px; } .school span{ display:inline; }
  .hint{ bottom:150px; font-size:12.5px; }
  .floors{ left:24px; right:auto; bottom:150px; gap:8px; }
  .fpill{ height:36px; font-size:14px; padding:0 14px 0 10px; }
  .fpill i{ width:18px; height:18px; font-size:11px; }
  .fpill.em{ display:none; }
  .strip{ padding:14px 24px 20px; gap:12px; }
  .fc{ width:150px; }
  .fc .lb{ font-size:13px; }
  .info{ left:24px; right:auto; width:420px; bottom:200px; max-height:calc(100vh - 300px); padding:18px 18px 14px; }
  .info h2{ font-size:24px; }
  .info .desc{ font-size:14px; }
  .info.fold .desc{ display:block; -webkit-line-clamp:unset; }
  .info.fold .prog, .info.fold .contact, .info.fold .nav{ display:flex; }
  .info.fold .prog{ display:block; }
  .info.fold .more{ display:none; }
  .nb-hint{ left:auto; right:32px; bottom:150px; }
  .modal{ align-items:center; }
  .modal .box{ width:520px; border-radius:18px; padding:22px 26px 26px; } .modal .x{ right:16px; top:16px; } .modal .box .handle{ display:none; }
  .toast{ bottom:230px; }
}

/* ═══ 활동 자막 (입간판 머리 위 · 다큐식: 작은 글 → 가는 선 → 제목 → 한 문장) ═══ */
.actcaps{ position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.actcap.r{text-align:right}
.actcap.compact small,.actcap.compact span{display:none}
.actcap.r i{margin-left:auto}
.actcap{ position:absolute; left:0; top:0; width:max-content; max-width:min(78vw, 420px); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35); font-family:var(--display); transition:opacity .25s; will-change:transform; }
.actcap small{ display:block; font-size:11.5px; font-weight:400; letter-spacing:.01em; opacity:.88; }
.actcap i{ display:block; width:34px; height:1px; background:rgba(255,255,255,.85); margin:6px 0 7px; }
.actcap b{ display:block; font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.01em; }
.actcap span{ display:block; font-size:12.5px; font-weight:400; line-height:1.45; opacity:.92; margin-top:4px; }
@media (min-width:900px){ .actcap small{ font-size:13px; } .actcap b{ font-size:23px; } .actcap span{ font-size:14px; } }

/* 내장 그래픽 · 그래픽 가속이 꺼진 PC(.litefx — index.html 이 붙인다): 3D 위 흐림 효과 끔 (2026-11-13) */
.litefx *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}