/* ═══════════════════════════════════════════════════════════
   늘봄목포 디지털트윈 — 표지 · 상단바 · 하단 필름띠 · 공간 카드 · 긴급돌봄 안내 (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); }
.load{ background:rgba(11,14,18,.92); font-family:var(--display); }
.load .bar2 i{ background:var(--c); }
.load .s2{ color:var(--c); }
.load button{ background:#fff; color:var(--ink); border-radius:999px; padding:10px 20px; }
.load .ver{ display:none; }

/* ── 교육지원청 로고: 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 를 붙인다 */
.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:16px; font-size:12.5px; opacity:.9; flex-wrap:wrap; }
.cover .links a, .cover .links button{ display:flex; align-items:center; gap:5px; font-family:var(--display); font-size:12.5px; font-weight:600; color:#fff; text-decoration:none; }
.topnav{ display:none; position:absolute; right:40px; top:30px; gap:30px; z-index:3; }
.topnav a, .topnav button{ font-family:var(--display); font-size:15px; font-weight:600; color:#fff; opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.5); text-decoration:none; }
.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; }
.ib svg{ width:19px; height:19px; }
.nb-top .logo{ width:44px; height:44px; border-radius:12px; background:#fff; padding:3px; border:0; flex:none; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.28); cursor:pointer; }   /* 왼쪽 위 늘봄목포 로고 (누르면 표지로) */
.nb-top .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.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: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; gap:6px; color:#fff; padding:0 11px; font-size:13px; font-weight:700; white-space:nowrap; flex:none; text-decoration:none; }
.school svg{ width:19px; height:19px; }
.school span{ display:none; }
.school.back{ background:#fff; color:var(--ink); border-color:#fff; }

/* ═══ 공간 고르기: 하단 필름띠 ═══ */
.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.on{ background:#fff; color:var(--ink); border-color:#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 .15s,transform .15s; }
.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.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; }
.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 .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{ background:#fff; width:100%; border-radius:18px 18px 0 0; padding:14px 20px calc(20px + var(--safe-b)); max-height:86vh; overflow:auto; }
.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; }
  .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{ display:flex; }
  .cover .stack{ left:40px; right:auto; bottom:44px; width:420px; gap:16px; }
  .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:58px; height:58px; border-radius:15px; padding:4px; }
  .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; }
  .toast{ bottom:230px; }
}