/* ═══════════════════════════════════════════════════════════
   학교 소개 표지 (school.html)
   한 화면짜리 표지 + 팝업 3개. 학교 색은 sites.js 에서 읽어 --mark(대표색) · --accent2(둘째 색) · --deep(짙은 색) 에 넣습니다.
   디자인 a · b · c 는 design.js 에서 고릅니다 (body[data-design]).
   ═══════════════════════════════════════════════════════════ */
@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:'MaruBuri'; src:url('fonts/MaruBuri-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root{
  --ink:#16202e; --ink-2:#556174; --line:#dde2e8; --paper:#f7f6f2; --card:#ffffff;
  --mark:#2b4ea2; --accent2:#f2c230; --deep:#0f1d3d;
  --serif:'MaruBuri','Noto Serif KR','AppleMyungjo','Batang',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; }
body{ margin:0; min-height:100%; background:var(--deep); color:#fff; font-family:var(--sans); font-size:16px; line-height:1.7; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
:focus-visible{ outline:2px solid var(--accent2); outline-offset:3px; border-radius:4px; }
h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
.num{ font-variant-numeric:tabular-nums; }

/* ── 작은 그림 문자 (선으로 그린 아이콘) ── */
.ic{ display:inline-block; width:18px; height:18px; flex:none; background:currentColor; -webkit-mask:var(--svg) center/contain no-repeat; mask:var(--svg) center/contain no-repeat; }
.ic-cube{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 9-8-4.5M12 12l8-4.5M12 12v9'/%3E%3C/svg%3E"); }
.ic-info{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.ic-pin{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.ic-home{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M5.5 9.5V20h13V9.5M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.ic-fs{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E"); }
.ic-fs-x{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E"); }
.ic-ai{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.5 3.6 2.2 5.3 5.8 5.8-3.6.5-5.3 2.2-5.8 5.8-.5-3.6-2.2-5.3-5.8-5.8 3.6-.5 5.3-2.2 5.8-5.8ZM5.5 14.5c.3 2 1.2 2.9 3.2 3.2-2 .3-2.9 1.2-3.2 3.2-.3-2-1.2-2.9-3.2-3.2 2-.3 2.9-1.2 3.2-3.2Z'/%3E%3C/svg%3E"); }
.ic-map{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20V6.5ZM9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }

/* ── 공통 부품 ── */
.stage{ position:relative; min-height:100vh; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
.photo{ position:absolute; inset:0; background:var(--deep) center/cover no-repeat; }
.top, .panel, .visit{ position:relative; }
.top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:calc(18px + env(safe-area-inset-top,0px)) clamp(20px,4vw,48px) 0; }
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo img{ height:34px; width:auto; }
.hub{ font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; padding:6px 12px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hub:hover{ background:rgba(255,255,255,.14); }
.topr{ display:flex; align-items:center; gap:8px; }
.fs{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap; padding:6px 11px 6px 9px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .15s; }
.fs:hover{ background:rgba(255,255,255,.14); }
.fs .ic{ width:15px; height:15px; color:#fff; }
.fs.on .ic{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E"); }
.slogo{ height:clamp(56px, 8vw, 92px); width:auto; max-width:min(78vw, 420px); object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.aiq{ display:inline-flex; align-items:center; gap:8px; }
.ic-hunt{ --svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5A3.5 3.5 0 0 1 6.5 7h11a3.5 3.5 0 0 1 3.5 3.5V19H3Z'/%3E%3Cpath d='M3 11h18M12 11v3'/%3E%3Ccircle cx='12' cy='14.5' r='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.quick .huntq{ border-color:rgba(255,210,63,.55); }
.quick .huntq .ic{ color:#ffd23f; }
.quick .aiq{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent2) 85%, white), var(--accent2)); color:var(--deep); border-color:transparent; }
.quick .aiq:hover{ filter:brightness(1.05); }
.quick .aiq .ic{ color:var(--deep); }
.mark{ flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--mark); color:#fff; font-weight:700; font-size:15px; box-shadow:0 0 0 2px var(--accent2); }
.kick{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; letter-spacing:.1em; color:color-mix(in srgb, var(--accent2) 75%, white); }
.panel h1{ font-family:var(--serif); line-height:1.12; letter-spacing:-.015em; }
.lead{ white-space:pre-line; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{ display:inline-flex; flex-direction:column; justify-content:center; gap:1px; text-decoration:none; padding:13px 24px; border-radius:12px; font-size:16px; line-height:1.3; border:1.5px solid transparent; transition:transform .15s, filter .15s, background .15s; }
.btn b{ font-weight:700; }
.btn small{ font-size:12px; font-weight:500; opacity:.85; }
.btn:hover{ transform:translateY(-1px); }
.btn.primary{ background:var(--accent2); color:var(--deep); box-shadow:0 10px 24px color-mix(in srgb, var(--accent2) 35%, transparent); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.line{ border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn.line:hover{ background:rgba(255,255,255,.16); }
.quick{ display:flex; flex-wrap:wrap; gap:8px; }
.quick button{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 13px; border-radius:999px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .15s, transform .15s; }
.quick button:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
.quick button em{ display:none; font-style:normal; }   /* 휴대폰용 짧은 이름 */
.quick .ic{ color:var(--accent2); }
.visit{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
.visit .addr{ display:grid; gap:0; }
.visit .addr small{ font-size:12px; font-weight:600; letter-spacing:.08em; opacity:.7; }
.visit .addr b{ font-size:15px; }
.visit .tel{ font-size:13.5px; opacity:.8; }
.visit .tel a{ text-decoration:none; font-weight:700; font-variant-numeric:tabular-nums; }
.visit .links{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.visit .links a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:600; font-size:12.5px; padding:6px 12px 6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .15s; }
.visit .links a:hover{ background:var(--accent2); color:var(--deep); border-color:var(--accent2); }
.visit .links .ic{ width:14px; height:14px; }

/* ═══ 디자인 a — 사진 가득 ═══ */
body[data-design="a"] .photo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 28%, transparent 45%, color-mix(in srgb, var(--deep) 88%, transparent) 100%),
             linear-gradient(90deg, color-mix(in srgb, var(--deep) 55%, transparent) 0%, transparent 60%); }
body[data-design="a"] .panel{ align-self:end; padding:40px clamp(20px,4vw,48px) 26px; display:grid; gap:14px; max-width:820px; }
body[data-design="a"] .panel h1{ font-size:clamp(40px,6.4vw,84px); text-shadow:0 2px 24px rgba(0,0,0,.35); }
body[data-design="a"] .lead{ max-width:34em; font-size:17px; color:#eef1f5; text-shadow:0 1px 10px rgba(0,0,0,.4); }
body[data-design="a"] .actions{ margin-top:6px; }
body[data-design="a"] .visit{ padding:16px clamp(20px,4vw,48px) calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.18); background:color-mix(in srgb, var(--deep) 55%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* ═══ 디자인 b — 좌우 나눔 ═══ */
body[data-design="b"] .stage{ grid-template-columns:minmax(360px, 44%) 1fr; grid-template-rows:auto 1fr auto; }
body[data-design="b"] .photo{ left:44%; }
body[data-design="b"] .photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--deep) 70%, transparent) 0%, transparent 22%), linear-gradient(0deg, rgba(0,0,0,.25), transparent 40%); }
body[data-design="b"] .stage::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:44%; background:var(--deep);
  background-image:radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--mark) 55%, transparent), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
body[data-design="b"] .stage::after{ content:''; position:absolute; left:44%; top:0; bottom:0; width:4px; background:var(--accent2); }
body[data-design="b"] .top, body[data-design="b"] .panel, body[data-design="b"] .visit{ grid-column:1; }
body[data-design="b"] .top{ padding:calc(22px + env(safe-area-inset-top,0px)) clamp(22px,3.6vw,52px) 0; }
body[data-design="b"] .panel{ align-self:center; padding:30px clamp(22px,3.6vw,52px); display:grid; gap:16px; }
body[data-design="b"] .panel h1{ font-size:clamp(36px,4.6vw,62px); }
body[data-design="b"] .lead{ font-size:16.5px; color:#dfe5ee; max-width:30em; }
body[data-design="b"] .actions{ margin-top:4px; }
body[data-design="b"] .quick{ padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
body[data-design="b"] .visit{ flex-direction:column; align-items:stretch; gap:10px; padding:18px clamp(22px,3.6vw,52px) calc(22px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.14); }
body[data-design="b"] .visit .links{ margin-left:0; }
body[data-design="b"] .visit .links a{ background:rgba(255,255,255,.06); }

/* ═══ 디자인 c — 가운데 카드 ═══ */
body[data-design="c"]{ color:var(--ink); }
body[data-design="c"] .stage{ display:block; padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); }
body[data-design="c"] .photo{ position:fixed; inset:-30px; filter:blur(14px) saturate(1.1) brightness(.62); transform:scale(1.04); }
body[data-design="c"] .stage > .top, body[data-design="c"] .stage > .panel, body[data-design="c"] .stage > .visit{ width:min(860px, 100%); margin:0 auto; background:var(--card); padding-left:clamp(22px,4vw,48px); padding-right:clamp(22px,4vw,48px); }
body[data-design="c"] .top{ border-radius:22px 22px 0 0; padding-top:26px; padding-bottom:6px; color:var(--ink); }
body[data-design="c"] .hub, body[data-design="c"] .fs{ border-color:var(--line); background:var(--paper); color:var(--ink); }
body[data-design="c"] .fs .ic{ color:var(--mark); }
body[data-design="c"] .slogo{ filter:none; }
body[data-design="c"] .panel{ display:grid; gap:14px; padding-top:34px; padding-bottom:30px; }
body[data-design="c"] .kick{ color:var(--mark); }
body[data-design="c"] .panel h1{ font-size:clamp(34px,5vw,60px); color:var(--ink); }
body[data-design="c"] .lead{ font-size:16.5px; color:var(--ink-2); max-width:36em; }
body[data-design="c"] .btn.line{ border-color:var(--ink); color:var(--ink); background:transparent; backdrop-filter:none; }
body[data-design="c"] .btn.line:hover{ background:var(--paper); }
body[data-design="c"] .quick{ padding-top:16px; border-top:1px dashed var(--line); }
body[data-design="c"] .quick button{ color:var(--ink); background:var(--paper); border-color:var(--line); backdrop-filter:none; }
body[data-design="c"] .quick button:hover{ background:color-mix(in srgb, var(--mark) 10%, white); border-color:var(--mark); }
body[data-design="c"] .quick .ic{ color:var(--mark); }
body[data-design="c"] .visit{ border-radius:0 0 22px 22px; padding-top:18px; padding-bottom:26px; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.35); }
body[data-design="c"] .visit .links a{ border-color:var(--mark); color:var(--mark); background:transparent; backdrop-filter:none; }
body[data-design="c"] .visit .links a:hover{ background:var(--mark); color:#fff; border-color:var(--mark); }
body[data-design="c"] .visit .addr small{ color:var(--mark); opacity:1; }


/* ── d · e · f 에서만 쓰는 부품은 다른 디자인에서는 숨긴다 ── */
.live, .mapstage, .mosaic{ display:none; }

/* ═══ 디자인 d — 살아 있는 3D ═══ */
body[data-design="d"] .live{ display:block; position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; pointer-events:none; }
body[data-design="d"] .live iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; }
body[data-design="d"].liveon .live{ opacity:1; }
body[data-design="d"] .stage::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 26%, transparent 50%, color-mix(in srgb, var(--deep) 90%, transparent) 100%); }
body[data-design="d"] .top, body[data-design="d"] .panel, body[data-design="d"] .visit{ z-index:1; }
body[data-design="d"] .panel{ align-self:end; justify-self:center; text-align:center; display:grid; justify-items:center; gap:14px; padding:40px 20px 30px; max-width:900px; }
body[data-design="d"] .kick{ flex-wrap:wrap; justify-content:center; text-shadow:0 1px 8px rgba(0,0,0,.6); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,78,.7); } 70%{ box-shadow:0 0 0 9px rgba(255,90,78,0); } 100%{ box-shadow:0 0 0 0 rgba(255,90,78,0); } }
body[data-design="d"] .panel h1{ font-size:clamp(40px,6.4vw,84px); text-shadow:0 3px 30px rgba(0,0,0,.45); }
body[data-design="d"] .lead{ max-width:34em; font-size:16px; color:#eef1f5; text-shadow:0 1px 10px rgba(0,0,0,.5); }
/* d 의 단추 정리: 유리판 하나에 큰 단추 둘 + 가는 선 + 작은 항목 셋 */
body[data-design="d"] .dock{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; margin-top:8px; padding:5px; border-radius:999px;
  background:rgba(10,16,30,.42); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14); }
body[data-design="d"] .actions{ margin:0; gap:6px; }
body[data-design="d"] .btn{ flex-direction:row; align-items:center; gap:7px; height:38px; padding:0 18px; border-radius:999px; font-size:13.5px; box-shadow:none; }
body[data-design="d"] .btn small{ display:none; }
body[data-design="d"] .btn.primary::before{ content:''; width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:-2px; }
body[data-design="d"] .btn.line{ border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.06); backdrop-filter:none; -webkit-backdrop-filter:none; }
body[data-design="d"] .btn.line:hover{ background:rgba(255,255,255,.14); }
body[data-design="d"] .quick{ gap:0; align-items:center; }
body[data-design="d"] .quick::before{ content:''; width:1px; height:22px; background:rgba(255,255,255,.22); margin:0 6px 0 4px; }
body[data-design="d"] .quick button{ height:38px; padding:0 12px; border:0; border-radius:999px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:13px; font-weight:600; color:rgba(255,255,255,.92); gap:7px; }
body[data-design="d"] .quick button:hover{ background:rgba(255,255,255,.12); transform:none; }
body[data-design="d"] .quick .ic{ width:15px; height:15px; color:var(--accent2); }
body[data-design="d"] .quick .aiq{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent2) 85%, white), var(--accent2)); color:var(--deep); margin-left:4px; }
body[data-design="d"] .quick .aiq:hover{ background:var(--accent2); }
body[data-design="d"] .quick .aiq .ic{ color:var(--deep); }
body[data-design="d"] .slogo{ height:clamp(56px, 8vw, 96px); }
body[data-design="d"] .visit{ padding:16px clamp(20px,4vw,48px) calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.18); background:color-mix(in srgb, var(--deep) 55%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* ═══ 디자인 e — 지도가 표지 ═══ */
body[data-design="e"]{ color:var(--ink); background:#ece7dc; }
body[data-design="e"] .stage{ display:block; background:#ece7dc; background-image:radial-gradient(circle at 1px 1px, rgba(22,32,46,.08) 1px, transparent 1.5px); background-size:22px 22px; }
body[data-design="e"] .photo{ display:none; }
body[data-design="e"] .mapstage{ display:block; position:absolute; inset:0; padding:calc(70px + env(safe-area-inset-top,0px)) 24px 96px 420px; }
body[data-design="e"] .mapwrap{ position:relative; width:100%; height:100%; }
body[data-design="e"] .mapwrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
body[data-design="e"] .spots{ position:absolute; left:0; top:0; }
.spot{ position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; display:grid; place-items:center; text-decoration:none; }
.spot i{ width:28px; height:28px; border-radius:50%; background:var(--mark); color:#fff; font-style:normal; font-weight:700; font-size:13px; display:grid; place-items:center; box-shadow:0 0 0 3px #fff, 0 6px 14px rgba(0,0,0,.35); transition:transform .15s; }
.spot::before{ content:''; position:absolute; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb, var(--mark) 45%, transparent); animation:spot 2.2s infinite; }
@keyframes spot{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
.spot:hover i, .spot:focus-visible i{ transform:scale(1.18); }
.spot .pop{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(6px); width:190px; background:#fff; border-radius:12px; padding:6px 6px 8px; box-shadow:0 16px 36px rgba(0,0,0,.3); display:grid; gap:2px; opacity:0; pointer-events:none; transition:.18s; z-index:3; }
.spot .pop img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.spot .pop b{ font-size:14px; padding:4px 4px 0; }
.spot .pop small{ font-size:11.5px; color:var(--mark); font-weight:600; padding:0 4px; }
.spot:hover .pop, .spot:focus-visible .pop{ opacity:1; transform:translateX(-50%); }
body[data-design="e"] .top{ position:absolute; left:0; right:0; top:0; z-index:2; color:var(--ink); }
body[data-design="e"] .hub, body[data-design="e"] .fs{ border-color:rgba(22,32,46,.25); background:#fff; color:var(--ink); }
body[data-design="e"] .fs .ic{ color:var(--mark); }
body[data-design="e"] .slogo{ filter:none; }
body[data-design="e"] .panel{ position:absolute; left:clamp(20px,3vw,44px); top:calc(88px + env(safe-area-inset-top,0px)); width:360px; z-index:2; display:grid; gap:14px; padding:24px 24px 22px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.7); }
body[data-design="e"] .kick{ color:var(--mark); }
body[data-design="e"] .panel h1{ font-size:clamp(34px,3.6vw,46px); color:var(--ink); }
body[data-design="e"] .lead{ font-size:15px; color:var(--ink-2); }
body[data-design="e"] .btn{ width:100%; }
body[data-design="e"] .btn.line{ border-color:var(--ink); color:var(--ink); background:transparent; backdrop-filter:none; }
body[data-design="e"] .quick{ padding-top:12px; border-top:1px dashed var(--line); }
body[data-design="e"] .quick button{ color:var(--ink); background:var(--paper); border-color:var(--line); backdrop-filter:none; }
body[data-design="e"] .quick .ic{ color:var(--mark); }
body[data-design="e"] .visit{ position:absolute; right:clamp(16px,3vw,44px); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:2; display:grid; gap:10px; padding:16px 18px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.16); max-width:420px; }
body[data-design="e"] .visit .addr small{ color:var(--mark); opacity:1; }
body[data-design="e"] .visit .links{ margin-left:0; }
body[data-design="e"] .visit .links a{ border-color:var(--mark); color:var(--mark); background:transparent; backdrop-filter:none; }
body[data-design="e"] .visit .links a:hover{ background:var(--mark); color:#fff; }

/* ═══ 디자인 f — 학교 포스터 ═══ */
body[data-design="f"]{ color:var(--ink); background:#f5f0e6; }
body[data-design="f"] .stage{ grid-template-columns:minmax(380px, 42%) 1fr; grid-template-rows:auto 1fr auto; background:#f5f0e6;
  background-image:repeating-linear-gradient(0deg, transparent 0 31px, rgba(22,32,46,.06) 31px 32px); }
body[data-design="f"] .photo{ display:none; }
body[data-design="f"] .top{ grid-column:1 / -1; color:var(--ink); padding-bottom:10px; border-bottom:2px solid var(--ink); margin:0 clamp(20px,4vw,48px); padding-left:0; padding-right:0; }
body[data-design="f"] .hub, body[data-design="f"] .fs{ border-color:var(--ink); background:transparent; color:var(--ink); }
body[data-design="f"] .fs .ic{ color:var(--mark); }
body[data-design="f"] .slogo{ filter:none; grid-column:2; }
body[data-design="f"] .panel{ grid-column:1; position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,2.4vw,34px); align-content:start; padding:34px clamp(12px,2vw,28px) 26px clamp(20px,4vw,48px); }
body[data-design="f"] .panel h1{ grid-column:1; grid-row:1 / span 4; align-self:start; writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.04em; line-height:1; font-size:clamp(40px,4.4vw,62px); color:var(--ink); padding:4px 0 6px 14px; border-left:6px solid var(--mark); }
body[data-design="f"] .kick{ grid-column:2; color:var(--mark); }
body[data-design="f"] .lead{ grid-column:2; font-size:16px; color:var(--ink-2); max-width:24em; margin-top:8px; }
body[data-design="f"] .actions{ grid-column:2; margin-top:18px; flex-direction:column; align-items:stretch; max-width:300px; }
body[data-design="f"] .btn.line{ border-color:var(--ink); color:var(--ink); background:transparent; backdrop-filter:none; }
body[data-design="f"] .quick{ grid-column:2; margin-top:14px; flex-direction:column; align-items:flex-start; }
body[data-design="f"] .quick button{ color:var(--ink); background:#fff; border-color:rgba(22,32,46,.25); backdrop-filter:none; }
body[data-design="f"] .quick .ic{ color:var(--mark); }
body[data-design="f"] .mosaic{ display:grid; grid-column:2; grid-row:2; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:minmax(120px, 1fr); gap:10px; padding:30px clamp(20px,4vw,48px) 20px 10px; align-content:stretch; }
.tilep{ position:relative; overflow:hidden; border-radius:14px; background:#d9d6cf center/cover no-repeat; text-decoration:none; color:#fff; min-height:120px; box-shadow:0 10px 24px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s; }
.tilep:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.tilep:nth-child(4){ grid-row:span 2; }
.tilep:nth-child(6){ grid-column:span 2; }
.tilep::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6)); }
.tilep i{ position:absolute; left:10px; top:10px; z-index:1; width:26px; height:26px; border-radius:50%; background:var(--mark); font-style:normal; font-weight:700; font-size:13px; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.tilep b{ position:absolute; left:12px; right:10px; bottom:10px; z-index:1; font-family:var(--serif); font-size:17px; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.tilep:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.2); }
body[data-design="f"] .visit{ grid-column:1 / -1; margin:0 clamp(20px,4vw,48px); padding:14px 0 calc(22px + env(safe-area-inset-bottom,0px)); border-top:2px solid var(--ink); }
body[data-design="f"] .visit .addr small{ color:var(--mark); opacity:1; }
body[data-design="f"] .visit .links a{ border-color:var(--ink); color:var(--ink); background:transparent; backdrop-filter:none; }
body[data-design="f"] .visit .links a:hover{ background:var(--ink); color:#fff; }

/* ── 팝업 ── */
.dlg{ border:0; padding:0; margin:auto; width:min(760px, calc(100% - 32px)); max-height:min(86vh, 900px); border-radius:18px; background:var(--card); color:var(--ink); box-shadow:0 40px 90px rgba(0,0,0,.5); overflow:hidden; display:none; grid-template-rows:auto 1fr; }
.dlg[open]{ display:grid; animation:pop .22s ease-out; }
.dlg.wide{ width:min(1080px, calc(100% - 32px)); }
.dlg::backdrop{ background:color-mix(in srgb, var(--deep, #0f1d3d) 62%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.dh{ display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:start; padding:22px 26px 16px; border-bottom:1px solid var(--line); background:var(--card); }
.dh h2{ font-family:var(--serif); font-size:24px; line-height:1.25; }
.dh h2::before{ content:''; display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--mark); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent2) 80%, white); margin-right:10px; vertical-align:.1em; }
.dh h2{ grid-column:1; grid-row:1; }
.dh p{ grid-column:1; grid-row:2; color:var(--ink-2); font-size:14px; margin-top:2px; }
.dx{ grid-column:2; grid-row:1; justify-self:end; width:36px; height:36px; border-radius:50%; background:var(--paper); color:var(--ink-2); font-size:15px; display:grid; place-items:center; }
.dx:hover{ background:var(--line); color:var(--ink); }
.db{ padding:22px 26px 26px; overflow:auto; background:var(--paper); }

.menu3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.mcard{ position:relative; overflow:hidden; display:grid; gap:6px; align-content:start; text-align:left; text-decoration:none; background:var(--deep); color:#fff; border-radius:14px; padding:20px 20px 18px; min-height:160px; transition:transform .15s, filter .15s; }
.mcard::after{ content:''; position:absolute; right:-40px; bottom:-40px; width:130px; height:130px; border-radius:50%; background:color-mix(in srgb, var(--accent2) 30%, transparent); }
.mcard small{ font-size:11.5px; letter-spacing:.14em; color:color-mix(in srgb, var(--accent2) 75%, white); font-weight:600; }
.mcard b{ font-family:var(--serif); font-size:22px; }
.mcard span{ font-size:14px; line-height:1.6; color:#d9e0ea; position:relative; z-index:1; }
.mcard:hover{ filter:brightness(1.08); transform:translateY(-2px); }

/* 학교 한눈에 — 학교 짙은 색 판. 위는 학교 사진 띠 + 로고 + 이름, 아래는 숫자 넷과 정보 표 */
.dlg.glance{ background:var(--deep); color:#fff; width:min(720px, calc(100% - 32px)); }
.gh{ position:relative; padding:26px 28px 22px; background:var(--deep) center 40%/cover no-repeat; display:grid; gap:4px; min-height:190px; align-content:end; }
.gh::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--deep) 30%, transparent) 0%, color-mix(in srgb, var(--deep) 78%, transparent) 55%, var(--deep) 100%); }
.gh > *{ position:relative; }
.gh .dx{ position:absolute; right:16px; top:16px; background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); width:34px; height:34px; }
.gh .dx:hover{ background:rgba(255,255,255,.2); }
.glogo{ height:56px; width:auto; max-width:240px; object-fit:contain; object-position:left; margin-bottom:8px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.gh small{ font-size:10.5px; letter-spacing:.22em; font-weight:700; color:color-mix(in srgb, var(--accent2) 80%, white); }
.gh h2{ font-family:var(--serif); font-size:30px; line-height:1.2; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.gmotto{ font-size:13.5px; color:rgba(255,255,255,.78); }
.gb{ background:var(--deep); padding:0 28px 22px; }
.gstats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid color-mix(in srgb, var(--accent2) 45%, transparent); border-bottom:1px solid rgba(255,255,255,.12); }
.gs{ display:grid; gap:2px; padding:18px 6px 16px 0; border-left:1px solid rgba(255,255,255,.1); padding-left:16px; }
.gs:first-child{ border-left:0; padding-left:0; }
.gs b{ font-family:var(--serif); font-size:34px; line-height:1.1; color:#fff; letter-spacing:-.01em; }
.gs b small{ font-family:var(--sans); font-size:12px; font-weight:600; color:color-mix(in srgb, var(--accent2) 85%, white); margin-left:4px; }
.gs span{ font-size:11.5px; letter-spacing:.12em; font-weight:600; color:rgba(255,255,255,.62); }
.gfacts{ margin:0; display:grid; grid-template-columns:1fr 1fr; column-gap:28px; }
.gr{ display:grid; grid-template-columns:76px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; line-height:1.55; align-items:baseline; }
.gr.full{ grid-column:1 / -1; }
.gr dt{ font-size:11.5px; letter-spacing:.1em; font-weight:700; color:color-mix(in srgb, var(--accent2) 80%, white); }
.gr dd{ margin:0; color:#f2f4f7; }
.gr dd small{ font-size:11px; color:rgba(255,255,255,.5); margin-left:4px; }
.gr dd a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.gr dd a:hover{ border-color:var(--accent2); color:var(--accent2); }
.gnote{ margin-top:14px; font-size:11.5px; color:rgba(255,255,255,.45); }
body[data-design="c"] .dlg.glance, body[data-design="e"] .dlg.glance, body[data-design="f"] .dlg.glance{ color:#fff; }

.places{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; }
.mapbox{ margin:0; position:sticky; top:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; }
.mapbox img{ width:100%; height:auto; border-radius:8px; }
.kmap{ width:100%; aspect-ratio:1 / 1.05; border-radius:8px; overflow:hidden; background:#e8e6e0; }
.kspot{ position:relative; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mark); color:#fff; font-weight:700; font-size:12.5px; text-decoration:none; box-shadow:0 0 0 2.5px #fff, 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:700; color:#fff; background:var(--deep); 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:var(--deep); color:#fff; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.3); }
.mapbox figcaption{ font-size:12px; color:var(--ink-2); padding:6px 4px 0; }
.plist{ display:grid; gap:8px; list-style:none; margin:0; padding:0; }
.plist a{ display:grid; grid-template-columns:112px 1fr; gap:12px; align-items:center; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:7px; transition:border-color .2s, transform .2s; }
.plist a:hover{ border-color:var(--mark); transform:translateX(3px); }
.plist .th{ position:relative; aspect-ratio:16/10; border-radius:8px; background:#d9d6cf center/cover no-repeat; }
.plist .th i{ position:absolute; left:6px; top:6px; width:24px; height:24px; border-radius:50%; background:var(--mark); color:#fff; font-style:normal; font-weight:700; font-size:13px; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.plist .tx{ display:grid; gap:1px; padding-right:6px; }
.plist .tx small{ font-size:11.5px; font-weight:600; color:var(--mark); }
.plist .tx b{ font-size:16px; }
.plist .tx span{ font-size:13px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 작은 화면 ── */
@media (max-width:900px){
  /* 디자인 b: 사진을 위에, 학교 색 판을 아래에 */
  body[data-design="b"] .stage{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  body[data-design="b"] .stage::before{ width:100%; top:min(38vh, 300px); }
  body[data-design="b"] .stage::after{ left:0; top:min(38vh, 300px); bottom:auto; width:100%; height:4px; }
  body[data-design="b"] .photo{ left:0; height:min(38vh, 300px); }
  body[data-design="b"] .photo::after{ background:linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%); }
  body[data-design="b"] .panel{ margin-top:calc(min(38vh, 300px) - 66px); padding-top:28px; }
  .places{ grid-template-columns:1fr; }
  .mapbox{ position:static; }

  /* d: 휴대폰은 사진 표지 (3D 는 무거워서) · 단추판은 한 줄: 큰 단추 둘 + 아이콘 넷(짧은 이름) */
  body[data-design="d"] .panel{ padding:100px 12px 12px; gap:10px; }
  body[data-design="d"] .panel h1{ font-size:clamp(34px, 9.5vw, 44px); }
  body[data-design="d"] .lead{ font-size:14px !important; line-height:1.6; }
  body[data-design="d"] .dock{ border-radius:999px; padding:4px; width:100%; flex-wrap:nowrap; gap:2px; margin-top:4px; }
  body[data-design="d"] .actions{ flex:none; gap:3px; }
  body[data-design="d"] .actions .btn{ width:auto; height:34px; padding:0 10px; font-size:11.5px; gap:4px; }
  body[data-design="d"] .btn.primary::before{ border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:0; }
  body[data-design="d"] .quick{ flex:1; min-width:0; justify-content:space-around; flex-wrap:nowrap; gap:0; }
  body[data-design="d"] .quick::before{ display:none; }
  body[data-design="d"] .quick button{ flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; height:auto; padding:2px 1px; gap:2px; font-size:9px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; border-radius:12px; }
  body[data-design="d"] .quick button span{ display:none; }
  body[data-design="d"] .quick button em{ display:block; }
  body[data-design="d"] .quick .ic{ width:16px; height:16px; }
  body[data-design="d"] .quick .aiq{ background:none; color:#fff; margin:0; }
  body[data-design="d"] .quick .aiq .ic{ color:var(--accent2); }
  /* 찾아오는 길: 두 줄 (주소 · 전화 / 단추 셋) */
  body[data-design="d"] .visit{ padding:9px 12px calc(10px + env(safe-area-inset-bottom,0px)); gap:6px 10px; }
  body[data-design="d"] .visit .addr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; width:100%; }
  body[data-design="d"] .visit .addr small{ display:none; }
  body[data-design="d"] .visit .addr b{ font-size:13.5px; }
  body[data-design="d"] .visit .tel{ font-size:12px; }
  body[data-design="d"] .visit .links{ margin-left:0; width:100%; gap:5px; }
  body[data-design="d"] .visit .links a{ flex:1; justify-content:center; font-size:11.5px; padding:5px 6px; gap:4px; }
  /* e: 판을 위에, 지도를 아래에 */
  body[data-design="e"] .stage{ display:grid; grid-template-rows:auto auto 1fr auto; min-height:100dvh; }
  body[data-design="e"] .top{ position:static; }
  body[data-design="e"] .panel{ position:static; width:auto; margin:8px 16px 0; }
  body[data-design="e"] .mapstage{ position:relative; inset:auto; height:min(70vh, 560px); padding:14px 12px; }
  body[data-design="e"] .visit{ position:static; max-width:none; margin:0 16px 16px; }
  /* f: 이름을 가로로, 사진 모음을 두 줄로 */
  body[data-design="f"] .stage{ grid-template-columns:1fr; }
  body[data-design="f"] .panel{ grid-column:1; grid-template-columns:1fr; padding:22px 18px 10px; }
  body[data-design="f"] .panel h1{ grid-column:1; grid-row:auto; writing-mode:horizontal-tb; text-orientation:mixed; max-height:none; border-left:0; padding-left:0; border-bottom:0; font-size:clamp(34px,9vw,46px); margin-bottom:8px; }
  body[data-design="f"] .kick, body[data-design="f"] .lead, body[data-design="f"] .actions, body[data-design="f"] .quick{ grid-column:1; }
  body[data-design="f"] .actions{ max-width:none; }
  body[data-design="f"] .quick{ flex-direction:row; }
  body[data-design="f"] .mosaic{ grid-column:1; grid-row:auto; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:120px; padding:6px 18px 18px; }
  .tilep:nth-child(1){ grid-column:span 2; grid-row:span 1; } .tilep:nth-child(4){ grid-row:span 1; } .tilep:nth-child(6){ grid-column:span 1; }
}
@media (max-width:600px){
  .top{ padding-top:calc(14px + env(safe-area-inset-top,0px)); }
  .logo img{ height:28px; }
  .hub{ font-size:12.5px; padding:6px 11px; }
  .fs{ font-size:12.5px; padding:6px 10px 6px 9px; }
  .fs span{ display:none; }
  .fs{ padding:8px 9px; }
  .slogo{ height:52px; }
  body[data-design="a"] .panel{ padding:120px 18px 18px; gap:10px; }
  body[data-design="a"] .panel h1{ font-size:clamp(34px, 10.5vw, 46px); }
  .lead{ font-size:15px !important; line-height:1.65; }
  .btn{ width:100%; padding:12px 18px; }
  .quick{ gap:6px; }
  .quick button{ padding:8px 12px 8px 10px; font-size:13px; }
  .visit{ gap:8px 16px; }
  .visit .links{ margin-left:0; width:100%; }
  .visit .links a{ font-size:13px; padding:7px 12px 7px 10px; }
  body[data-design="c"] .stage{ padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(14px + env(safe-area-inset-bottom,0px)); }
  body[data-design="c"] .panel{ padding-top:22px; padding-bottom:22px; }
  .dh{ padding:18px 18px 14px; } .dh h2{ font-size:21px; } .db{ padding:16px 16px 20px; }
  .gh{ padding:20px 18px 16px; min-height:150px; } .gh h2{ font-size:24px; } .glogo{ height:44px; }
  .gb{ padding:0 18px 18px; }
  .gstats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gs{ padding:12px 4px 10px 12px; } .gs:nth-child(3){ border-left:0; padding-left:0; } .gs:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.1); } .gs b{ font-size:26px; }
  .gfacts{ grid-template-columns:1fr; column-gap:0; } .gr{ grid-template-columns:64px 1fr; font-size:13px; padding:9px 0; }
  .plist a{ grid-template-columns:96px 1fr; gap:10px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }