/* 강릉빌리지 v0.4 — 고정 맵 + 부지(plot) + 자유 팬/줌 (2026-10-12, LaunchCity형)
   .gv-map(뷰포트, overflow hidden) > .gv-world(transform: translate+scale) > 맵 바탕 이미지 + 매장 레이어 + 캐릭터 + 라벨
   매장 좌표는 월드 % (맵 바탕 이미지 기준). 맵 확장 = 바탕 이미지 교체 + plots 추가. */

.gv{position:relative;margin-top:28px}
.gv *{box-sizing:border-box}

/* 뷰포트 */
.gv-map{position:relative;width:100%;height:min(72vh,760px);min-height:420px;overflow:hidden;border-radius:22px;background:#f8f4ec;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.gv-map.dragging{cursor:grabbing}
.gv-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.gv-world > img.base{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}

/* 매장 레이어: 월드 % 좌표(--x,--y 부지 중심), 폭(--w, 월드 폭 %). 건물 바닥이 부지 중심에 오도록 세로 오프셋 */
.gv-shop{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin-left:calc(var(--w) * -0.5);margin-top:calc(var(--w) * -0.6);cursor:pointer;border:0;background:transparent;padding:0}
.gv-shop .pic{display:block;width:100%;aspect-ratio:1;transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s}
.gv-shop .pic img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.gv-shop:hover .pic,.gv-shop:focus-visible .pic,.gv-shop.active .pic{transform:translateY(-3%) scale(1.05);filter:drop-shadow(0 18px 22px rgba(9,41,65,.2))}
.gv-world.has-active .gv-shop:not(.active) .pic{filter:saturate(.7) opacity(.7)}
.gv-shop .tag{display:none;position:absolute;left:50%;bottom:4%;transform:translateX(-50%);font-family:var(--head);font-weight:900;font-size:52px;line-height:1;letter-spacing:-.01em;background:var(--navy);color:#fff;padding:.38em .85em;border-radius:999px;border:3px solid #fff;box-shadow:0 .25em .9em rgba(9,41,65,.45);white-space:nowrap;pointer-events:none;transition:background .2s}
.gv-shop:hover .tag,.gv-shop.active .tag{background:var(--orange)}
.gv-shop .steam{position:absolute;left:52%;top:10%;width:8px;height:8px;pointer-events:none}
.gv-shop .steam i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.9);filter:blur(3px);animation:gv-steam 3.2s ease-out infinite}
.gv-shop .steam i:nth-child(2){animation-delay:1.1s;left:-8px}.gv-shop .steam i:nth-child(3){animation-delay:2.1s;left:8px}
@keyframes gv-steam{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.9}100%{transform:translateY(-50px) scale(2.2);opacity:0}}

/* 빈 부지(입주 가능) 표시 */
.gv-plot{font-size:34px;position:absolute;left:var(--x);top:var(--y);width:var(--w);margin-left:calc(var(--w) * -0.5);margin-top:calc(var(--w) * -0.3);aspect-ratio:2/1;border:2px dashed rgba(9,41,65,.35);border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-family:var(--head);color:var(--navy);text-decoration:none;cursor:pointer;transition:background .2s}
.gv-plot:hover{background:rgba(233,94,32,.18);border-color:var(--orange)}

/* 캐릭터 스프라이트 (투명 PNG, 블렌드 없음, 최상단) */
.gv-sprite{position:absolute;width:var(--w);aspect-ratio:var(--ar,1);background-image:var(--sheet);background-size:300% 200%;background-repeat:no-repeat;pointer-events:none;opacity:1;animation:gv-frames var(--dur,1.8s) steps(1) infinite;transform:translate(-50%,-50%)}
@keyframes gv-frames{0%{background-position:0% 0%}16.6%{background-position:50% 0%}33.3%{background-position:100% 0%}50%{background-position:0% 100%}66.6%{background-position:50% 100%}83.3%{background-position:100% 100%}100%{background-position:0% 0%}}
.gv-kim{--w:4.2%;--dur:6s;background-size:400% 300%;animation-name:gv-frames12;filter:drop-shadow(0 .4em .4em rgba(0,0,0,.18))}
@keyframes gv-frames12{0%{background-position:0% 0%}8.33%{background-position:33.33% 0%}16.66%{background-position:66.66% 0%}25%{background-position:100% 0%}33.33%{background-position:0% 50%}41.66%{background-position:33.33% 50%}50%{background-position:66.66% 50%}58.33%{background-position:100% 50%}66.66%{background-position:0% 100%}75%{background-position:33.33% 100%}83.33%{background-position:66.66% 100%}91.66%{background-position:100% 100%}100%{background-position:0% 0%}}
.gv-npc{--w:2.8%;--dur:3.6s;filter:drop-shadow(0 .3em .3em rgba(0,0,0,.15))}
.gv-npc.b{--dur:4.2s;animation-delay:-1.3s}

/* 컨트롤 */
.gv-ctl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;z-index:5}
.gv-ctl button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-family:var(--head);font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 6px 16px rgba(9,41,65,.12)}
.gv-ctl button.fit{font-size:11px}
.gv-ctl button:hover{background:var(--cream)}
.gv-hint{position:absolute;left:14px;top:14px;z-index:5;font-family:var(--head);font-size:12px;color:var(--navy);background:rgba(255,255,255,.9);padding:7px 12px;border-radius:999px;pointer-events:none;box-shadow:0 6px 16px rgba(9,41,65,.12)}
.gv-legend{position:absolute;left:14px;bottom:14px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:60%}
.gv-legend button{font-family:var(--head);font-size:12px;font-weight:700;color:var(--navy);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.gv-legend button:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* 목록(카드) — 같은 데이터 */
.gv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gv-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}
.gv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gv-card .thumb{position:relative;aspect-ratio:4/3;background:#f5f1e8;display:grid;place-items:center}
.gv-card .thumb img{width:82%;height:82%;object-fit:contain}
.gv-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.gv-card .cat{font-family:var(--head);font-size:12px;font-weight:700;color:var(--orange)}
.gv-card h3{font-size:19px;font-weight:800}
.gv-card .desc{font-size:14px;color:var(--muted);flex:1}
.gv-card .more{font-family:var(--head);font-size:13px;font-weight:800;color:var(--navy);margin-top:8px}

/* 매장 상세 패널 */
.gv-panel{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:flex-end;background:rgba(9,41,65,.35);backdrop-filter:blur(4px)}
.gv-panel.open{display:flex}
.gv-cardp{position:relative;width:min(100%,440px);max-height:92vh;overflow:auto;background:var(--paper);border-radius:18px 18px 0 0;padding:22px 22px 28px;box-shadow:0 -20px 50px rgba(9,41,65,.25);animation:gv-up .35s cubic-bezier(.2,.7,.2,1)}
@keyframes gv-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.gv-cardp .obj{width:200px;margin:0 auto;background:#f5f1e8;border-radius:50%}
.gv-cardp .obj img{width:100%;display:block}
.gv-cardp .cat{font-family:var(--head);font-size:12px;font-weight:700;color:var(--orange)}
.gv-cardp h3{font-size:24px;margin-top:4px}
.gv-cardp p{color:var(--muted);font-size:15px;margin-top:10px}
.gv-cardp .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.gv-cardp .close{position:absolute;right:14px;top:10px;border:0;background:rgba(9,41,65,.08);width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--navy)}
@media (min-width:900px){.gv-panel{align-items:center;padding:24px}.gv-cardp{border-radius:18px;max-height:calc(100vh - 48px)}}

/* 배너 파트너 띠 */
.gv-sponsors{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);padding:22px 0;overflow:hidden}
.gv-sponsors .head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;font-family:var(--head)}
.gv-sponsors .head b{font-size:14px;color:var(--navy)}.gv-sponsors .head span{font-size:12px;color:var(--muted)}
.gv-track{display:flex;gap:14px;width:max-content;animation:gv-marquee 40s linear infinite}
.gv-sponsors:hover .gv-track{animation-play-state:paused}
@keyframes gv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gv-banner{display:flex;align-items:center;gap:12px;width:260px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:var(--head);text-decoration:none;color:var(--navy)}
.gv-banner img{width:64px;height:48px;object-fit:cover;border-radius:8px;background:var(--mist)}
.gv-banner b{display:block;font-size:13px}.gv-banner small{font-size:11px;color:var(--muted)}
.gv-banner.slot{border-style:dashed;color:var(--muted);justify-content:center;background:transparent}

.gv-stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:28px 0 0;color:var(--muted);font-family:var(--head);font-size:13px}
.gv-stats b{color:var(--navy);font-size:22px;display:block;font-weight:900}

@media (max-width:720px){
  .gv{margin-left:-16px;margin-right:-16px}
  .gv-map{border-radius:0;height:68svh;min-height:460px}
  .gv-list{grid-template-columns:1fr;gap:14px;padding:0 16px}
  .gv-card{flex-direction:row;align-items:stretch}
  .gv-card .thumb{width:38%;aspect-ratio:1;flex:none}
  .gv-card .body{padding:14px 14px 14px 4px}
  .gv-card h3{font-size:17px}.gv-card .desc{font-size:13px}
  .gv-legend{max-width:calc(100% - 70px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .gv-legend button{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .gv-sprite,.gv-shop .steam i,.gv-track{animation:none!important}
}