/* ──────────────────────────────────────────────────────────────
   나스 포레스트 안내도 · 산사(sansatemple.com) 컨셉
   - 종이색 바탕(#eeece3) · 먹색 잉크(#34382f) · 다크 글래스 UI(#222820)
   - 위에서 내려다본 3D 디오라마 지도 위에 핀/라벨을 얹는 구조
   - 기존 섹션과 같은 id="map", class="map" 을 유지해 그대로 교체 가능
   ────────────────────────────────────────────────────────────── */
/* 변수는 섹션(.sansa-map)과 전체 화면(.sm-scope) 양쪽에서 쓴다 */
.sansa-map, .sm-scope{
  --sm-paper:#eeece3; --sm-paper-2:#f3efe5; --sm-line:#d8d8c8;
  --sm-ink:#34382f; --sm-ink-2:#4d5144; --sm-muted:#838677; --sm-moss:#596253;
  --sm-bronze:#988762; --sm-glass:#222820dc; --sm-glass-edge:#e3d3b326; --sm-glass-ink:#f8faf9;
  --sm-lantern:#ffdfab; --sm-lantern-2:#f2dca8; --sm-coral:#c9553f; --sm-ease:cubic-bezier(.22,1,.36,1);
}
.sansa-map{
  position:relative; padding-block:56px 64px; background:var(--sm-paper); color:var(--sm-ink);
  font-family:var(--body, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif);
  -webkit-font-smoothing:antialiased;
}
.sansa-map::before{ /* 아주 옅은 한지 결 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(90,80,50,.06) .6px, transparent .7px); background-size:7px 7px;
}
.sansa-map .wrap{ position:relative; width:100%; max-width:1040px; margin:0 auto; padding-inline:20px; }

/* 머리말 */
.sm-head{ text-align:center; margin-bottom:26px; }
.sm-mark{ display:inline-flex; color:var(--sm-bronze); margin-bottom:8px; }
.sm-mark svg{ width:34px; height:34px; stroke-width:1.1; }
.sm-head h2{ margin:0; padding-left:6px; font-size:clamp(24px,3.2vw,30px); font-weight:500; letter-spacing:.28em; color:var(--sm-ink-2); line-height:1.3; }
.sm-head .sm-sub{ margin:4px 0 0; font-size:13px; letter-spacing:.42em; padding-left:.42em; color:var(--sm-muted); font-weight:500; }
.sm-head .sm-lead{ text-wrap:balance; margin:16px auto 0; max-width:520px; font-size:14.5px; line-height:1.8; color:var(--sm-moss); font-weight:450; }
.sm-head .sm-lead b{ font-weight:600; color:var(--sm-ink-2); }

/* 지도 프레임 */
.sm-world{ position:relative; max-width:900px; margin:0 auto; }
.sm-map{
  position:relative; isolation:isolate; width:100%; aspect-ratio:3/2; overflow:hidden; container-type:inline-size;
  border-radius:29px; background:#d9cfb2; border:1px solid #cfc8b4;
  box-shadow:0 1px 0 #fff8 inset, 0 18px 40px -22px rgba(36,37,31,.45), 0 2px 6px rgba(36,37,31,.08);
}
.sm-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.sm-map::after{ /* 가장자리를 살짝 눌러 종이에 올린 사진 느낌 */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -40px 60px -40px rgba(36,37,31,.35);
}

/* 3D 캔버스 · 보기 전환 · 힌트 */
.sm-canvas{ position:absolute; inset:0; width:100%; height:100%; display:none; cursor:grab; touch-action:none; }
.sm-canvas:active{ cursor:grabbing; }
.sm-map.is-3d .sm-canvas{ display:block; }
.sm-map.is-3d .sm-art{ opacity:0; }
.sm-map.is-3d .sm-pin{ pointer-events:auto; }
.sm-map.is-3d .sm-pin:hover{ background:transparent; box-shadow:none; }
.sm-map.is-3d .sm-pin[aria-pressed=true]{ background:transparent; box-shadow:none; }
.sm-map.is-3d .sm-pin--chest{ gap:2px; }
.sm-map.is-3d .sm-pin--chest .sm-dot{ display:none; } /* 3D에서는 상자 위의 금빛 표식이 대신한다 */
.sm-art{ transition:opacity .4s; }
.sm-view{
  position:absolute; top:12px; right:12px; z-index:6; display:flex; gap:3px; padding:4px; border-radius:11px;
  background:var(--sm-glass); border:1px solid var(--sm-glass-edge); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 4px 24px #10150e22;
}
.sm-view button{ height:30px; padding:0 11px; border:0; border-radius:8px; background:transparent; color:#d5dcd7; font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .2s, color .2s; }
.sm-view button:hover{ background:#ffffff14; color:var(--sm-glass-ink); }
.sm-view button[aria-pressed=true]{ background:#f3efe5; color:var(--sm-ink); }
.sm-view[hidden]{ display:none; }
.sm-hint{
  position:absolute; top:14px; left:14px; z-index:6; display:none; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:500; color:var(--sm-ink-2);
  background:#f3efe5d9; border:1px solid #ffffff99; box-shadow:0 2px 8px rgba(36,37,31,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .6s, transform .6s var(--sm-ease);
}
.sm-map.is-3d .sm-hint{ display:inline-flex; }
.sm-hint.is-hidden{ opacity:0; transform:translateY(-6px); pointer-events:none; }

/* 핀 (산사 .village-map-pin 과 같은 방식: 영역 전체가 버튼, 가운데 라벨) */
.sm-pin{
  position:absolute; left:var(--x); top:var(--y); width:var(--w,12%); height:var(--h,12%);
  min-width:44px; min-height:44px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:18px;
  background:transparent; color:inherit; cursor:pointer; font:inherit;
  transition:background .2s, box-shadow .2s, opacity .25s, transform .28s var(--sm-ease);
}
.sm-pin:hover{ background:#ffffff17; box-shadow:inset 0 0 0 1px #fff8; }
.sm-pin:active{ transform:translate(-50%,-50%) scale(.97); }
.sm-pin:focus-visible{ outline:2px solid #fff; outline-offset:1px; z-index:3; }
.sm-pin[aria-pressed=true]{ background:#ffffff1f; box-shadow:inset 0 0 0 1px #fffc, 0 0 0 1px rgba(36,37,31,.25); z-index:2; }

/* 라벨 칩: 다크 글래스 */
.sm-tag{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:5px 11px; border-radius:999px; font-size:clamp(10px,1.45cqi,13px); font-weight:500; letter-spacing:.01em; line-height:1.2;
  color:var(--sm-glass-ink); background:var(--sm-glass); border:1px solid var(--sm-glass-edge);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 4px 14px rgba(16,21,14,.22);
  transition:transform .28s var(--sm-ease), background .2s;
}
.sm-short{ display:none }
.sm-tag small{ font-size:.82em; font-weight:450; color:#d5dcd7; }
.sm-pin:hover .sm-tag, .sm-pin[aria-pressed=true] .sm-tag{ transform:translateY(-1px); background:#2b3229ec; }
.sm-tag--quiet{ background:#f3efe5e6; color:var(--sm-ink-2); border-color:#ffffff99; box-shadow:0 2px 8px rgba(36,37,31,.15); }
.sm-tag--quiet small{ color:var(--sm-muted); }

/* 보물상자 핀: 등불색 점 + 작은 라벨 */
.sm-pin--chest{ flex-direction:column; gap:4px; border-radius:999px; }
.sm-pin--chest .sm-tag{ padding:3px 8px; font-size:clamp(9px,1.2cqi,11.5px); background:#5a4a2cde; border-color:#ffdfab4d; }
.sm-dot{
  width:10px; height:10px; border-radius:50%; background:var(--sm-lantern);
  box-shadow:0 0 0 2px #3a2f1a, 0 0 0 4px #ffdfab55, 0 0 12px #ffdfabcc; animation:sm-glow 2.6s ease-in-out infinite;
}
@keyframes sm-glow{ 0%,100%{ box-shadow:0 0 0 2px #3a2f1a, 0 0 0 4px #ffdfab55, 0 0 10px #ffdfab99 } 50%{ box-shadow:0 0 0 2px #3a2f1a, 0 0 0 7px #ffdfab33, 0 0 18px #ffdfabee } }

/* 충전존 작은 표식 */
.sm-pin--charge{ width:5%; height:7%; min-width:28px; min-height:28px; border-radius:50%; }
.sm-bolt{ width:16px; height:16px; border-radius:50%; background:var(--sm-lantern-2); color:#5a3a26; display:grid; place-items:center; box-shadow:0 0 0 1.5px #5a3a26, 0 2px 6px rgba(0,0,0,.3); }
.sm-bolt svg{ width:10px; height:10px; }

/* 입구 표식 */
.sm-pin--gate .sm-tag{ background:#c9553fe6; border-color:#ffd5c9aa; }

/* 포커스 모드: 선택한 곳만 또렷하게 */
.sm-world[data-focus] .sm-pin:not([aria-pressed=true]){ opacity:.42; }
.sm-world[data-focus] .sm-pin:not([aria-pressed=true]):hover{ opacity:.9; }

/* 하단 시트 (산사 글래스 카드) */
.sm-sheet{
  position:absolute; left:50%; bottom:14px; z-index:5; transform:translate(-50%, 14px); width:min(440px, calc(100% - 28px));
  padding:13px 16px 13px 18px; border-radius:18px; color:var(--sm-glass-ink);
  background:var(--sm-glass); border:1px solid var(--sm-glass-edge); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 4px 24px #10150e44; opacity:0; visibility:hidden; transition:opacity .25s, transform .32s var(--sm-ease), visibility 0s .3s;
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:start;
}
.sm-sheet.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .25s, transform .32s var(--sm-ease); }
.sm-sheet .sm-kicker{ grid-column:1; font-size:11px; letter-spacing:.14em; color:#d5dcd7; font-weight:500; }
.sm-sheet h3{ grid-column:1; margin:0; font-size:16px; font-weight:600; letter-spacing:-.005em; line-height:1.35; }
.sm-sheet p{ grid-column:1; margin:4px 0 0; font-size:13px; line-height:1.65; color:#e7ebe8; }
.sm-sheet .sm-close{ grid-column:2; grid-row:1 / span 3; align-self:start; width:32px; height:32px; border-radius:50%; border:1px solid #ffffff26; background:#ffffff12; color:inherit; cursor:pointer; display:grid; place-items:center; transition:background .2s; }
.sm-sheet .sm-close:hover{ background:#ffffff24; }
.sm-sheet .sm-close svg{ width:14px; height:14px; }

/* 둘러보기 툴바: 산사 .game-modes 글래스 필 */
.sm-tools{
  display:flex; flex-wrap:wrap; justify-content:center; gap:3px; margin:16px auto 0; padding:5px; width:max-content; max-width:100%;
  border-radius:14px; background:var(--sm-glass); border:1px solid var(--sm-glass-edge); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 4px 24px #10150e22;
}
.sm-tools button{
  height:36px; padding:0 13px; border:0; border-radius:10px; background:transparent; color:#d5dcd7; font:inherit; font-size:13px; font-weight:500; letter-spacing:.01em; cursor:pointer;
  transition:background .2s, color .2s, transform .28s var(--sm-ease);
}
.sm-tools button:hover{ background:#ffffff14; color:var(--sm-glass-ink); }
.sm-tools button[aria-pressed=true]{ background:#f3efe5; color:var(--sm-ink); }
.sm-tools button:focus-visible{ outline:2px solid var(--sm-lantern-2); outline-offset:2px; }

/* 범례 · 맺음말 */
.sm-legend{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:22px auto 0; padding:0; font-size:12.5px; color:var(--sm-moss); font-weight:500; }
.sm-legend li{ display:inline-flex; align-items:center; gap:7px; }
.sm-legend .sm-dot{ animation:none; width:9px; height:9px; }
.sm-legend .sm-bolt{ width:14px; height:14px; } .sm-legend .sm-bolt svg{ width:9px; height:9px; }
.sm-legend .sm-round{ width:11px; height:11px; border-radius:50%; background:#fffdf4; border:1.5px solid #a09070; }
.sm-legend .sm-gatebadge{ width:12px; height:12px; border-radius:3px; background:var(--sm-coral); }
.sm-legend .sm-fine{ color:var(--sm-muted); font-weight:450; }
.sm-note{ margin:22px auto 0; max-width:560px; text-align:center; font-size:13.5px; line-height:1.8; color:var(--sm-muted); font-weight:450; }
.sm-note b{ color:var(--sm-ink-2); font-weight:600; }

@media (max-width:640px){
  .sansa-map{ padding-block:40px 48px; }
  .sm-map{ border-radius:20px; }
  .sm-map.is-3d{ aspect-ratio:1; }
  .sm-hint{ top:10px; left:10px; font-size:11px; padding:5px 9px; max-width:52%; white-space:normal; text-align:left; line-height:1.35; }
  .sm-view{ top:10px; right:10px; }
  .sm-pin:not(.sm-pin--chest):not(.sm-pin--charge){ min-width:36px; min-height:36px; }
  .sm-pin--charge{ display:none; }
  .sm-tag{ padding:4px 8px; font-size:10.5px; }
  .sm-full{ display:none } .sm-short{ display:inline }
  .sm-pin--chest .sm-tag{ display:none } /* 모바일: 보물상자는 등불 점만 */
  .sm-pin--chest{ min-width:36px; min-height:36px; }
  .sm-glassdoor{ display:none }
  .sm-sheet{ bottom:10px; padding:11px 12px 11px 14px; border-radius:16px; }
  .sm-tools{ border-radius:12px; } .sm-tools button{ height:34px; padding:0 10px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){ .sm-dot{ animation:none } .sm-pin,.sm-tag,.sm-sheet,.sm-tools button{ transition:none } }