/* 과학 마을 (/village/) — 초중등 입구 지도 (2026-10-11)
   마을 그림 한 장 위에 이름표를 얹는다. 낮(밝은 테마)에는 낮 그림, 밤(기본 테마)에는 밤 그림.
   이름표를 누르면 그 건물의 단원 목록이 그림 위에 뜬다(설명은 그림 위에 — 왕두목 기준 2026-10-01). */

.vg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.vg-top .pg-h{margin:0}
.vg-sub{margin:6px 0 0;font-size:15px;color:var(--chalk-dim);line-height:1.6}

/* 지도 틀 — 폰에서는 옆으로 끌어 보게 한다 */
.vg-map{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--ink-3);background:#a9bbb7}
:root:not([data-theme="light"]) .vg-map{background:#14213f}
.vg-scroll{position:relative;z-index:1;isolation:isolate;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.vg-stage{position:relative;width:100%;min-width:880px;aspect-ratio:2752/1536;transition:width .25s ease}
.vg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:opacity .5s ease}
.vg-day{opacity:0}
.vg-night{opacity:1}
[data-theme="light"] .vg-day{opacity:1}
[data-theme="light"] .vg-night{opacity:0}

/* 이름표 */
.vg-pin{position:absolute;transform:translate(-50%,-100%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;
  font:inherit;cursor:pointer;padding:7px 13px 8px;border-radius:12px;border:2px solid #2b2620;background:#fffaf0;color:#2b2620;
  box-shadow:0 4px 10px rgba(0,0,0,.18);white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}
.vg-pin::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:#fffaf0;border-right:2px solid #2b2620;border-bottom:2px solid #2b2620;
  transform:translateX(-50%) rotate(45deg)}
.vg-pin b{font-family:var(--disp);font-size:17px;font-weight:700;line-height:1.2}
.vg-pin small{font-size:12px;color:#6b6155;line-height:1.3}
.vg-pin:hover,.vg-pin:focus-visible{transform:translate(-50%,-100%) translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.24);outline:none}
.vg-pin.on{background:#6b5a3a;border-color:#6b5a3a;color:#fffaf0}
.vg-pin.on::after{background:#6b5a3a;border-color:#6b5a3a}
.vg-pin.on small{color:#efe3c9}
.vg-pin.math b{font-size:15px}
.vg-pin.soon{border-style:dashed}
/* 처음 들어오면 학교 이름표가 한 번 통통 — 어디부터 누를지 알려 준다 */
@keyframes vgHop{0%,100%{transform:translate(-50%,-100%)}40%{transform:translate(-50%,-100%) translateY(-8px)}}
.vg-pin.hop{animation:vgHop .7s ease 3}

/* 확대·축소 */
.vg-zoom{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;gap:6px}
.vg-zoom button{font:inherit;font-size:15px;min-width:44px;height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(43,38,32,.25);background:#fffaf0;color:#2b2620;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.vg-zoom button:hover{border-color:#6b5a3a}

/* 건물을 누르면 그림 위에 뜨는 판 */
.vg-panel{position:absolute;left:14px;top:14px;bottom:14px;z-index:6;width:min(380px,calc(100% - 28px));display:flex;flex-direction:column;
  background:#fffaf0;color:#2b2620;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.28);
  transform:translateX(-12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.vg-panel.open{opacity:1;transform:none;pointer-events:auto}
.vg-ph{display:flex;align-items:center;gap:12px;padding:14px 14px 10px 16px;border-bottom:1px solid rgba(43,38,32,.12)}
.vg-ph img{width:64px;height:50px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.vg-ph h2{margin:0;font-family:var(--disp);font-size:20px}
.vg-ph p{margin:2px 0 0;font-size:13px;color:#6b6155}
.vg-x{margin-left:auto;align-self:flex-start;font:inherit;font-size:20px;line-height:1;width:36px;height:36px;border-radius:50%;border:1px solid rgba(43,38,32,.2);background:transparent;color:#2b2620;cursor:pointer}
.vg-pb{overflow:auto;padding:12px 16px 16px;flex:1}
.vg-say{margin:0 0 12px;font-size:14.5px;line-height:1.65}
.vg-grp{margin:14px 0 6px;font-size:12px;letter-spacing:.06em;color:#8a6d2e;font-weight:600}
.vg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vg-list a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#2b2620;padding:9px 11px;border-radius:10px;background:#f3ead8;border:1px solid transparent}
.vg-list a:hover{border-color:#6b5a3a}
.vg-list .n{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:#6b5a3a;background:#fffaf0;border-radius:6px;padding:2px 6px}
.vg-list .t{font-size:14.5px}
.vg-toc a{background:#e9efe6}
.vg-toc .t small{display:block;font-size:12px;color:#6b6155}

/* 마을 안내도 카드 */
.vg-guide{margin:34px 0 10px}
.vg-guide h2{font-family:var(--disp);font-size:20px;margin:0 0 14px;letter-spacing:.06em;color:var(--brass)}
.vg-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vg-card{font:inherit;text-align:center;cursor:pointer;padding:10px 10px 14px;border-radius:16px;border:1px solid var(--ink-3);background:var(--ink-2);color:var(--chalk)}
.vg-card:hover{border-color:var(--brass)}
.vg-card img{width:100%;aspect-ratio:480/374;object-fit:cover;border-radius:10px;display:block}
.vg-card b{display:block;margin-top:10px;font-family:var(--disp);font-size:17px}
.vg-card small{display:block;margin-top:2px;font-size:12.5px;color:var(--chalk-dim)}
@media (max-width:900px){.vg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .vg-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .vg-card{flex:0 0 42%;scroll-snap-align:start}
  .vg-panel{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:78%;transform:translateY(12px)}
  .vg-pin b{font-size:15px}.vg-pin small{font-size:11px}.vg-pin{padding:5px 10px 6px}
}
@media (prefers-reduced-motion:reduce){.vg-pin.hop{animation:none}.vg-stage,.vg-stage img,.vg-panel{transition:none}}