/* 판매점 지도 (store-map.html) — 화면 전체가 지도(머리글 · 메뉴 · 바닥글 없음). js/store-map.js 가 그린다.
   이 페이지에만 싣는다(지문 ?v= 은 생성기가 붙인다). 색은 site.css 의 낮/밤 변수를 쓴다.
   휴대폰이 기본: 지도를 덜 가리게 단추를 작게(2026-10-26 사장님 — 예전 크기의 절반쯤).
   PC(900px 이상)는 왼쪽 고정 칸(340px, 당근 동네업체의 절반쯤)에 도구 · 탭(TOP 50 · 판매점 · 이색 판매점 · 시도별)을 모으고 지도는 오른쪽. 지도 단추는 오른쪽 아래 */
html, body.sm-full { height: 100%; }
body.sm-full { margin: 0; overflow: hidden; background: var(--bg, #fff); }
/* 낮/밤 단추는 지도 위에서 감춘다. 실시간 채팅(js/chat.js — 오른쪽 아래 말풍선)은 생성기처럼 그대로 둔다(2026-10-26 사장님) */
body.sm-full #theme-btn { display: none !important; }

.sm-wrap { position: fixed; inset: 0; }
.sm-map { position: absolute; inset: 0; background: var(--soft-2, #e9eef3); }
.sm-loading { margin: 0; padding: 140px 16px; color: var(--muted, #666); text-align: center; }

/* ───── 위쪽 떠 있는 도구 (휴대폰: 작은 단추 몇 줄) ───── */
.sm-top { position: absolute; top: calc(6px + env(safe-area-inset-top)); left: 6px; right: 6px; z-index: 3; display: grid; gap: 4px; pointer-events: none; }   /* 화면 폭 끝까지(2026-10-27 — 오른쪽이 비어 보였다) */
.sm-top > *, .sm-row > * { pointer-events: auto; }
.sm-row { display: flex; align-items: center; gap: 4px; pointer-events: none; }
.sm-back, .sm-3d, .sm-night, .sm-search, .sm-chip, .sm-info summary, .sm-fade {
    border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: var(--fg, #333); box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
}
.sm-back { flex: none; padding: 4px 8px; border-radius: 7px; color: var(--brand, #003087); font-size: 11px; font-weight: bold; text-decoration: none; }
.sm-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--fg, #222); font-size: 12px; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 0 3px var(--surface, #fff), 0 0 6px var(--surface, #fff); }
.sm-3d, .sm-night { flex: none; padding: 4px 7px; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: bold; cursor: pointer; }
.sm-3d { border-color: var(--brand, #003087); background: var(--brand-bg, #003087); color: #fff; }
.sm-3d[aria-pressed="true"] { background: var(--surface, #fff); color: var(--brand, #003087); }
/* 한/영 전환(사이트 머리글과 같은 단추, js/i18n.js 가 처리) — 지도 도구 줄에 맞게 작게 */
.sm-lang { flex: none; box-shadow: 0 1px 5px rgba(0, 0, 0, .12); }
.sm-lang button { padding: 4px 6px; font-size: 10.5px; }
/* 밤 지도 — 켜면 남색 */
.sm-night[aria-pressed="true"] { border-color: #2b3b5c; background: #1f2b44; color: #ffd76a; }
/* 탭 · 빈 카드 안내는 PC 에서만 */
.sm-side { display: contents; }
.sm-tabs, .sm-card-empty { display: none; }
.sm-searchbox { position: relative; display: block; }
.sm-search { box-sizing: border-box; width: 100%; padding: 5px 8px; border-radius: 7px; font: inherit; font-size: 13px; }
.sm-found { position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 6; margin: 0; padding: 3px; max-height: 45vh; overflow: auto; list-style: none;
    border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.sm-found[hidden] { display: none; }
.sm-found button { display: block; width: 100%; padding: 6px; border: 0; border-radius: 6px; background: none; color: var(--fg, #333); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sm-found button:hover, .sm-found button:focus { background: var(--soft, #f3f6fb); }
.sm-found span { color: var(--faint, #777); font-size: 11px; }
.sm-found .sm-none { padding: 6px; color: var(--faint, #777); font-size: 12px; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; }
.sm-chips > * { pointer-events: auto; }
.sm-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; color: var(--muted, #555); font: inherit; font-size: 10.5px; white-space: nowrap; cursor: pointer; }
.sm-chip[aria-pressed="true"] { border-color: var(--brand, #003087); color: var(--brand, #003087); font-weight: bold; }
.sm-chip[aria-pressed="false"] .sm-dot { opacity: .3; }
/* TOP 50 칩(1등 칩 왼쪽): 켜면 노랑 */
.sm-star-ico { color: #e0a800; font-size: 1.05em; line-height: 1; }
.sm-chip-top[aria-pressed="true"] { border-color: #e0a800; background: #fff4cc; color: #7a5200; }
:root[data-theme="dark"] .sm-chip-top[aria-pressed="true"] { border-color: #e0a800; background: #3a2f10; color: #ffd76a; }
.sm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.sm-dot-1 { background: #f07a1a; }
.sm-dot-2 { background: #3b6fd8; }
.sm-dot-c { background: #b8bfca; }
.sm-dot-a { background: #7d8799; }
/* 휴대폰에만: PC 에서는 50곳 목록이 있다는 안내(6pt) */
.sm-pcnote { margin: 0; padding: 0 2px; color: var(--muted, #555); font-size: 8px; text-shadow: 0 0 3px var(--surface, #fff), 0 0 6px var(--surface, #fff); }

/* ───── 왼쪽 아래: 1등 방식 체크 · 끌기 막대 ("시도별 · 안내" 위) ───── */
.sm-bl { position: absolute; left: 6px; bottom: calc(36px + env(safe-area-inset-bottom)); z-index: 3; display: grid; gap: 4px; justify-items: start; pointer-events: none; }
.sm-bl > * { pointer-events: auto; }
.sm-modes { align-items: center; }
.sm-modes-label { padding: 0 2px; color: var(--muted, #555); font-size: 10.5px; font-weight: bold; text-shadow: 0 0 3px var(--surface, #fff), 0 0 6px var(--surface, #fff); }
.sm-check { display: inline-block; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box; }
.sm-mode[aria-pressed="true"] .sm-check { border-color: #f07a1a; background: #f07a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 100% no-repeat; }
.sm-fade { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; font-size: 10.5px; }
.sm-fade input { width: 96px; margin: 0; accent-color: #f07a1a; }
.sm-fade output { min-width: 56px; color: var(--brand, #003087); font-weight: bold; }

/* 이색 판매점: 단추 · 목록(왼쪽 아래 위로 펼침) · 지도 위 별 */
.sm-fun-btn { padding: 3px 9px; border: 1px solid #e9c46a; border-radius: 999px; background: #fff8e6; color: #8a5a00; box-shadow: 0 1px 5px rgba(0, 0, 0, .12); font: inherit; font-size: 10.5px; font-weight: bold; cursor: pointer; }
.sm-fun { position: absolute; left: 0; bottom: calc(100% + 6px); box-sizing: border-box; width: min(340px, calc(100vw - 12px)); max-height: 55vh; overflow: auto; padding: 10px 10px 6px;
    border-radius: 12px; background: var(--surface, #fff); color: var(--fg, #333); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.sm-fun[hidden] { display: none; }
.sm-fun-btn[aria-pressed="false"] { border-color: var(--line, #ddd); background: var(--surface, #fff); color: var(--muted, #555); }
.sm-fun h2 { margin: 0 4px 6px; font-size: 14px; }
.sm-fun ol { margin: 0; padding: 0; list-style: none; }
.sm-fun-item { display: flex; gap: 8px; width: 100%; padding: 7px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sm-fun-item:hover { background: var(--soft, #f3f6fb); }
.sm-fun-item > span:last-child { display: grid; gap: 1px; min-width: 0; }
.sm-fun-item b { color: var(--brand, #003087); font-size: 12.5px; }
.sm-fun-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-fun-item small { color: var(--faint, #777); font-size: 11px; }
.sm-fun-ico { flex: none; font-size: 18px; line-height: 1.2; }
.sm-star { width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #fff3cf; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font-size: 14px; line-height: 1; cursor: pointer; }
.sm-star:hover { transform: scale(1.12); }

/* ───── 오른쪽: 1등 많은 50곳(PC) + 판매점 카드 ───── */
.sm-right { display: contents; }
.sm-top50 { display: none; }
.sm-card { position: absolute; left: 6px; bottom: calc(36px + env(safe-area-inset-bottom)); z-index: 4; box-sizing: border-box; width: min(340px, calc(100% - 12px)); max-height: min(60vh, 520px); overflow: auto;
    padding: 10px 12px; border-radius: 12px; background: var(--surface, #fff); color: var(--fg, #333); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); font-size: 13px; }
.sm-card[hidden] { display: none; }
.sm-card h3 { margin: 0 26px 2px 0; font-size: 15px; }
.sm-closed { padding: 1px 6px; border-radius: 4px; background: var(--soft-2, #eee); color: var(--faint, #777); font-size: 11px; font-weight: normal; vertical-align: 2px; }
.sm-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--faint, #888); font-size: 22px; line-height: 1; cursor: pointer; }
.sm-place { margin: 0 0 6px; color: var(--muted, #666); font-size: 12px; }
.sm-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; }
.sm-counts b { color: var(--brand, #003087); font-size: 17px; }
.sm-counts small { color: var(--faint, #777); }
.sm-why { margin: 6px 0; color: var(--muted, #666); font-size: 11.5px; line-height: 1.5; }
.sm-links { display: flex; gap: 8px; margin: 0; }
.sm-links a { padding: 5px 10px; border: 1px solid var(--line, #ddd); border-radius: 6px; font-size: 12px; text-decoration: none; }
/* 이 근처 판매점: 지도 위 가운데 단추 + 목록(휴대폰은 카드 자리, PC 는 "내 근처" 탭) */
.sm-near-btn { position: absolute; top: 120px; left: 50%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 120px);
    padding: 6px 13px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: var(--surface, #fff); color: var(--fg, #222); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    font: inherit; font-size: 12px; font-weight: bold; white-space: nowrap; cursor: pointer; }
.sm-near-btn span { overflow: hidden; text-overflow: ellipsis; }
.sm-near { position: absolute; left: 6px; bottom: calc(36px + env(safe-area-inset-bottom)); z-index: 4; box-sizing: border-box; width: min(250px, calc(100% - 64px)); max-height: 38vh; overflow: auto;
    padding: 7px 9px; border-radius: 10px; background: var(--surface, #fff); color: var(--fg, #333); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); font-size: 11px; }
.sm-near[hidden] { display: none; }
.sm-near h3 { margin: 0 20px 2px 0; font-size: 13px; }
.sm-near h3 small { color: var(--faint, #888); font-size: .8em; font-weight: normal; }
.sm-near .sm-close { top: 1px; right: 4px; font-size: 18px; }
.sm-near-sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin: 2px 0 4px; color: var(--muted, #666); font-size: 10.5px; }
.sm-near-me { padding: 2px 8px; border: 1px solid var(--brand, #003087); border-radius: 999px; background: var(--surface, #fff); color: var(--brand, #003087); font: inherit; font-size: 10.5px; font-weight: bold; cursor: pointer; }
.sm-near-list { margin: 0; padding: 0; list-style: none; }
.sm-near-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; padding: 5px 2px; border: 0; border-bottom: 1px solid var(--line-soft, #f0f1f4);
    background: none; color: var(--fg, #333); font: inherit; text-align: left; cursor: pointer; }
.sm-near-list button:hover { background: var(--soft, #f3f6fb); }
.sm-near-list .sm-tname { overflow: hidden; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.sm-near-list .sm-tname small { display: block; overflow: hidden; color: var(--faint, #777); font-weight: normal; font-size: .9em; text-overflow: ellipsis; }
.sm-near-list .sm-tcnt { text-align: right; white-space: nowrap; }
.sm-near-list .sm-tcnt b { color: var(--brand, #003087); }
.sm-near-list .sm-tcnt small { display: block; color: var(--faint, #777); font-size: .9em; }
.sm-near-list .sm-dist { color: #c76a00 !important; font-weight: bold; }
.sm-near-note { margin: 6px 0 0; font-size: 10px !important; }
.sm-near-share { margin: 4px 0 6px; }
.sm-share-area { width: 100%; padding: 6px 10px; border: 1px solid var(--brand, #003087); border-radius: 999px; background: var(--brand-bg, #003087); color: #fff; font: inherit; font-size: 11.5px; font-weight: bold; cursor: pointer; }   /* 우리 동네 판매점 지도 공유(2026-10-28) */
/* "0등" 동행복권 인터넷 판매 — 지도 위 붉은 점 · 별은 js(st-net 층). 여기는 카드 꼬리표 · TOP 50 목록 맨 위 */
.sm-zero-tag { padding: 1px 7px; border-radius: 999px; background: #e0283a; color: #fff; font-size: 11px; vertical-align: 2px; }
.sm-top50-list li.is-zero .sm-rank, .sm-top50-list li.is-zero .sm-tcnt b { color: #e0283a; }
/* 판매점 댓글("다녀왔어요" 아래) */
.sm-cmt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #e3e3e3); }
.sm-cmt h4 { margin: 0 0 4px; color: var(--muted, #555); font-size: 12px; }
.sm-cmt-n { color: var(--brand, #003087); }
.sm-cmt-list { margin: 0; padding: 0; list-style: none; }
.sm-cmt-list li { padding: 5px 0; border-bottom: 1px dashed var(--line, #e3e3e3); }
.sm-cmt-list b { font-size: 12px; }
.sm-cmt-list small { color: var(--faint, #888); font-size: 10.5px; }
.sm-cmt-list p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sm-cmt-been { display: inline-block; padding: 0 6px; border-radius: 999px; background: #e3f4ea; color: #1b7a43; font-size: 10px; font-weight: bold; vertical-align: 1px; }
:root[data-theme="dark"] .sm-cmt-been { background: #183a27; color: #7fe0a6; }
.sm-cmt-empty { color: var(--faint, #888); font-size: 11.5px; }
.sm-cmt-del { padding: 0; border: 0; background: none; color: var(--faint, #888); font: inherit; font-size: 10.5px; text-decoration: underline; cursor: pointer; }
.sm-cmt-foot { margin-top: 6px; }
.sm-cmt-gate { padding: 5px 10px; border: 1px solid var(--brand, #003087); border-radius: 999px; background: var(--surface, #fff); color: var(--brand, #003087); font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; }
.sm-cmt-form { display: flex; gap: 6px; align-items: flex-end; }
.sm-cmt-form textarea { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--surface, #fff); color: var(--fg, #333);
    font: inherit; font-size: 12.5px; resize: vertical; }
.sm-cmt-form button { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--brand-bg, #003087); color: #fff; font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; }
.sm-cmt-form button:disabled { opacity: .5; }
.sm-cmt-msg { margin: 4px 0 0; color: #b4560a; font-size: 11px; }
.sm-cmt-msg:empty { display: none; }
.sm-cmt-rule { margin: 4px 0 0; color: var(--faint, #888); font-size: 10px; }
/* 1등 · 2등 나온 회차 토글(하나씩만 보인다) */
.sm-rk { display: flex; gap: 4px; margin: 6px 0 2px; }
.sm-rk button { flex: 1 1 0; padding: 5px 6px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: var(--surface, #fff); color: var(--muted, #555);
    font: inherit; font-size: 12px; cursor: pointer; }
.sm-rk button b { color: inherit; }
.sm-rk button[aria-pressed="true"] { border-color: var(--brand, #003087); background: var(--brand-bg, #003087); color: #fff; font-weight: bold; }
.sm-rk button:disabled { opacity: .4; cursor: default; }
/* 카드 안 당첨 회차: 한 줄에 회차 · 날짜 · 방식 + 당첨번호, 5개씩 쪽 넘김 */
.sm-rounds { margin: 0; font-size: 12px; }
.sm-rounds ul { margin: 0; padding: 0; list-style: none; }
.sm-rounds li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; padding: 4px 0; border-bottom: 1px dashed var(--line, #e3e3e3); }
.sm-rounds li a { color: var(--fg, #333); text-decoration: none; white-space: nowrap; }
.sm-rounds li a b { color: var(--brand, #003087); }
.sm-rounds li a:hover b { text-decoration: underline; }
.sm-date { color: var(--faint, #777); font-size: 11px; }
.sm-rounds small { padding: 0 4px; border-radius: 4px; background: #fff1e4; color: #b4560a; font-size: 10.5px; }
.sm-balls { display: inline-flex; align-items: center; gap: 2px; }
.sm-balls .mball { width: 18px; height: 18px; color: #fff; font-size: 9.5px; font-weight: bold; }
.sm-plus { color: var(--faint, #888); font-size: 10px; }
.sm-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; color: var(--muted, #555); font-size: 11px; }
.sm-pg { width: 26px; height: 22px; border: 1px solid var(--line, #ddd); border-radius: 6px; background: var(--surface, #fff); color: var(--brand, #003087); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.sm-pg:disabled { opacity: .35; cursor: default; }

/* 다녀온 곳(로그인 회원): 단추 + 색 고르기 */
.sm-visit { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #e3e3e3); }
.sm-visit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sm-visit-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--brand, #003087); border-radius: 999px; background: var(--surface, #fff);
    color: var(--brand, #003087); font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; }
.sm-visit-btn.is-on { background: var(--soft, #f3f6fb); }
.sm-swatch { width: 10px; height: 10px; border-radius: 50%; }
.sm-colors { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sm-color { position: relative; width: 18px; height: 18px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line, #ccc); cursor: pointer; }
.sm-color.is-on { box-shadow: 0 0 0 2px var(--fg, #333); }
.sm-color-any { overflow: hidden; background: conic-gradient(#e63946, #e9c46a, #2a9d8f, #3a86ff, #8338ec, #e63946); }
.sm-color-any input { position: absolute; inset: -4px; width: 30px; height: 30px; opacity: 0; cursor: pointer; }
.sm-visit-note { margin: 4px 0 0; color: var(--faint, #777); font-size: 10.5px; }
.sm-visit-note.is-warn { color: #b4560a; font-weight: bold; }
.sm-color.is-locked { opacity: .5; }
.sm-color.is-locked::after { content: "🔒"; position: absolute; right: -6px; bottom: -6px; font-size: 9px; line-height: 1; }
.sm-unlock { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0; padding: 3px 8px; border: 1px solid #b4560a; border-radius: 999px; background: var(--surface, #fff);
    color: #b4560a; font: inherit; font-size: 11px; font-weight: bold; cursor: pointer; }
.sm-unlock:disabled { opacity: .5; }
/* 밤 모드: 이색 판매점 단추 · 회차 꼬리표 */
:root[data-theme="dark"] .sm-fun-btn[aria-pressed="true"] { border-color: #8a6a1c; background: #3a2f12; color: #ffd76a; }
:root[data-theme="dark"] .sm-rounds small { background: #3a2614; color: #ffb27a; }
:root[data-theme="dark"] .sm-star { border-color: #141a23; }

/* ───── 시도별 · 안내 (왼쪽 아래 접는 창) ───── */
.sm-info { position: absolute; left: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 5; max-width: min(460px, calc(100% - 12px)); }
.sm-info summary { display: inline-block; padding: 4px 9px; border-radius: 7px; font-size: 11px; font-weight: bold; list-style: none; cursor: pointer; }
.sm-info summary::-webkit-details-marker { display: none; }
.sm-info[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sm-info-body { max-height: 60vh; overflow: auto; padding: 4px 12px 12px; border: 1px solid var(--line, #ddd); border-radius: 0 10px 10px 10px; background: var(--surface, #fff); color: var(--fg, #333); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); font-size: 13px; }
.sm-info .sm-info-body p { margin: 8px 0; }
.sm-small { color: var(--muted, #666); font-size: 12px; }
.sm-info .data-table { width: 100%; font-size: 13px; }
.sm-goto { padding: 0; border: 0; background: none; color: var(--brand, #003087); font: inherit; text-decoration: underline; cursor: pointer; }

/* 북쪽 보기(내 위치 위, 같은 크기): 위는 빨강 · 아래는 회색 바늘 */
.sm-north-ico { display: block; width: 18px; height: 18px; margin: auto; transition: transform .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1.5 12.2 9H5.8z' fill='%23e3402f'/%3E%3Cpath d='M9 16.5 5.8 9h6.4z' fill='%23a3abb7'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 지도 단추(확대 · 내 위치)는 오른쪽 아래 채팅 말풍선 위로 */
.sm-map .maplibregl-ctrl-bottom-right { margin-bottom: calc(52px + env(safe-area-inset-bottom)); }

/* 휴대폰 카드: 예전의 절반쯤(2026-10-27 사장님 — 지도가 보이게). 폭 · 높이 · 글자 · 공을 줄인다 */
@media (max-width: 899px) {
    .sm-card { width: min(250px, calc(100% - 64px)); max-height: 38vh; padding: 7px 9px; border-radius: 10px; font-size: 11px; }
    .sm-card h3 { margin-right: 20px; font-size: 13px; }
    .sm-close { top: 1px; right: 4px; font-size: 18px; }
    .sm-place { margin-bottom: 3px; font-size: 10.5px; }
    .sm-counts { gap: 2px 10px; margin-bottom: 3px; }
    .sm-counts b { font-size: 14px; }
    .sm-rk button { padding: 3px 4px; font-size: 10.5px; }
    .sm-rounds { font-size: 10.5px; }
    .sm-rounds li { padding: 2px 0; }
    .sm-date { font-size: 9.5px; }
    .sm-rounds small { font-size: 9px; }
    .sm-balls .mball { width: 13px; height: 13px; font-size: 7.5px; }
    .sm-pg { width: 22px; height: 18px; font-size: 12px; }
    .sm-why { margin: 4px 0; font-size: 10px; }
    .sm-links a { padding: 3px 8px; font-size: 10.5px; }
    .sm-visit { margin-top: 5px; padding-top: 5px; }
    .sm-visit-btn { padding: 3px 8px; font-size: 10.5px; }
    .sm-color { width: 15px; height: 15px; }
    .sm-cmt { margin-top: 5px; padding-top: 5px; }
    .sm-cmt h4 { font-size: 10.5px; }
    .sm-cmt-list b { font-size: 10.5px; }
    .sm-cmt-list small, .sm-cmt-del { font-size: 9.5px; }
    .sm-cmt-list p { font-size: 10.5px; }
    .sm-cmt-gate, .sm-cmt-form button { padding: 3px 8px; font-size: 10.5px; }
    .sm-cmt-form textarea { padding: 4px 6px; font-size: 16px; }   /* 16px 밑이면 iOS 가 입력할 때 화면을 확대한다 */
}

/* ───── PC: 왼쪽 고정 칸(도구 · 탭 · 탭 내용) + 오른쪽 지도 ───── */
@media (min-width: 900px) {
    .sm-map { left: 340px; }
    .sm-side { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; box-sizing: border-box; display: flex; flex-direction: column; width: 340px;
        border-right: 1px solid var(--line, #e3e6eb); background: var(--surface, #fff); color: var(--fg, #333); }
    .sm-side > * { flex: none; }
    .sm-top, .sm-bl, .sm-right { display: contents; }
    .sm-top > *, .sm-bl > *, .sm-right > *, .sm-row > * { pointer-events: auto; }
    .sm-row { display: flex; align-items: center; gap: 6px; padding: 0 14px; }
    .sm-row:first-child { order: 1; padding-top: 14px; }
    .sm-title { flex: 1 1 auto; font-size: 17px; font-weight: 800; text-shadow: none; }
    .sm-back, .sm-3d, .sm-night, .sm-search, .sm-chip, .sm-fade { box-shadow: none; }
    .sm-back { padding: 6px 10px; border-radius: 9px; font-size: 12.5px; }
    .sm-3d, .sm-night { padding: 6px 10px; border-radius: 9px; font-size: 12.5px; }
    .sm-row.sm-searchbox { order: 2; display: block; margin-top: 10px; }
    .sm-search { padding: 9px 12px; border-radius: 10px; background: var(--soft, #f3f5f8); font-size: 14px; }
    .sm-chips:not(.sm-modes) { order: 3; padding: 10px 14px 0; gap: 5px; }
    .sm-chip { gap: 5px; padding: 5px 10px; font-size: 12px; }
    .sm-dot { width: 9px; height: 9px; }
    .sm-pcnote { display: none; }
    /* 이색 판매점 켜기 · 1등 방식 · 흐리게 — 한 줄씩 */
    .sm-fun-btn { order: 4; margin: 8px 14px 0; justify-self: start; align-self: flex-start; padding: 5px 11px; font-size: 12px; box-shadow: none; }
    .sm-modes { order: 5; padding: 8px 14px 0; }
    .sm-fade { order: 6; margin: 8px 14px 0; padding: 5px 10px; border-radius: 9px; font-size: 12px; }
    .sm-fade span { white-space: nowrap; }
    .sm-fade input { flex: 1 1 auto; width: auto; min-width: 0; }
    .sm-check { width: 11px; height: 11px; }
    /* 탭 */
    .sm-tabs { order: 7; display: flex; gap: 2px; margin: 12px 0 0; padding: 0 10px; border-bottom: 1px solid var(--line, #e3e6eb); }
    .sm-tab { flex: 1 1 auto; padding: 9px 4px 8px; border: 0; border-bottom: 2.5px solid transparent; background: none; color: var(--muted, #667); font: inherit; font-size: 13px; font-weight: bold; white-space: nowrap; cursor: pointer; }
    .sm-tab[aria-selected="true"] { border-bottom-color: var(--brand, #003087); color: var(--brand, #003087); }
    :root[data-theme="dark"] .sm-tab[aria-selected="true"] { border-bottom-color: #ffb066; color: #ffb066; }
    /* 탭 내용: 고른 것 하나만, 남은 높이를 채우고 안에서 넘긴다 */
    .sm-top50, .sm-card, .sm-card-empty, .sm-near, .sm-fun, .sm-info { order: 8; display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .sm-side[data-tab="top"] .sm-top50 { display: block; }
    .sm-side[data-tab="card"] .sm-card:not([hidden]) { display: block; }
    .sm-side[data-tab="card"] .sm-card[hidden] + .sm-card-empty { display: block; }
    .sm-side[data-tab="fun"] .sm-fun { display: block; }
    .sm-side[data-tab="near"] .sm-near:not([hidden]) { display: block; }
    .sm-near { position: relative; left: auto; bottom: auto; width: auto; max-height: none; padding: 14px 16px; border-radius: 0; box-shadow: none; font-size: 13px; }
    .sm-near h3 { font-size: 16px; }
    .sm-near-sort, .sm-near-me { font-size: 12px; }
    .sm-near-list button { padding: 8px 4px; }
    .sm-near-btn { top: 14px; left: calc(340px + (100% - 340px) / 2); padding: 8px 16px; font-size: 13px; }
    .sm-tab { padding-left: 2px; padding-right: 2px; font-size: 12.5px; }
    .sm-side[data-tab="info"] .sm-info { display: block; }
    .sm-top50 { padding: 8px 8px 12px; }
    .sm-top50 h2 { margin: 2px 8px 6px; color: var(--fg, #222); font-size: 15px; }
    .sm-top50 h2 small { margin-left: 4px; color: var(--faint, #888); font-size: 11.5px; font-weight: normal; }
    .sm-top50-list { margin: 0; padding: 0; list-style: none; }
    .sm-top50-list button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border: 0; border-bottom: 1px solid var(--line-soft, #f0f1f4);
        border-radius: 0; background: none; color: var(--fg, #333); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
    .sm-top50-list button:hover, .sm-top50-list button.is-on { background: var(--soft, #f3f6fb); }
    .sm-rank { color: #f07a1a; font-weight: bold; text-align: right; }
    .sm-tname { overflow: hidden; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
    .sm-tname small { display: block; overflow: hidden; color: var(--faint, #777); font-size: 11px; font-weight: normal; text-overflow: ellipsis; }
    .sm-tcnt { text-align: right; white-space: nowrap; }
    .sm-tcnt b { color: var(--brand, #003087); font-size: 14px; }
    .sm-tcnt small { display: block; color: var(--faint, #777); font-size: 10.5px; }
    .sm-card { position: relative; left: auto; bottom: auto; width: auto; max-height: none; padding: 14px 16px; border-radius: 0; box-shadow: none; font-size: 13px; }
    .sm-card h3 { font-size: 17px; }
    .sm-card-empty { margin: 0; padding: 40px 20px; color: var(--faint, #888); font-size: 13px; text-align: center; }
    .sm-fun { position: static; width: auto; max-height: none; padding: 10px 8px; border-radius: 0; box-shadow: none; }
    .sm-fun h2 { display: none; }
    .sm-info { position: static; max-width: none; }
    .sm-info summary { display: none; }
    .sm-info-body { max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
}

/* 내 기록(2026-10-27): 칩 · 목록 · 내 댓글 · 답글 */
.sm-chip-mine[hidden] { display: none; }
.sm-chip-mine.has-new { position: relative; }
.sm-chip-mine.has-new::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #e0283a; }
.sm-mine .sm-mine-tabs { margin: 4px 0 6px; }
.sm-mine .sm-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.sm-mine-new { margin: 0 0 6px; font-size: 11px; font-weight: bold; }
.sm-mine-new a { color: #c41f30; }
.sm-my-cmts { margin: 0; padding: 0; list-style: none; }
.sm-my-cmts button { display: block; width: 100%; padding: 5px 2px; border: 0; border-bottom: 1px solid var(--line-soft, #f0f1f4); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sm-my-cmts button:hover { background: var(--soft, #f3f6fb); }
.sm-my-cmts .sm-tname { display: flex; gap: 6px; align-items: baseline; font-weight: bold; }
.sm-my-cmts .sm-tname small { color: var(--faint, #888); font-weight: normal; font-size: .9em; }
.sm-my-text { display: -webkit-box; overflow: hidden; color: var(--muted, #555); -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; word-break: break-word; }
.sm-reply-tag { padding: 0 5px; border-radius: 999px; background: var(--soft, #eef2f8); }
.sm-cmt-re { padding: 0; border: 0; background: none; color: var(--brand, #003087); font: inherit; font-size: 10.5px; cursor: pointer; }
.sm-cmt-replies { margin: 4px 0 0 12px; padding: 0 0 0 8px; border-left: 2px solid var(--line, #e3e3e3); list-style: none; }
.sm-cmt-replies li { padding: 4px 0; border-bottom: 0; }
.sm-cmt-gone { color: var(--faint, #888); font-size: 11px; }
.sm-cmt-to { margin: 0 0 4px; color: var(--muted, #555); font-size: 11px; }
.sm-cmt-to button { padding: 0; border: 0; background: none; color: var(--faint, #888); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 899px) {
    .sm-cmt-form textarea::placeholder { font-size: 11px; }   /* 글자는 16px(iOS 확대 방지) · 안내 문구만 작게 */
    .sm-cmt-re, .sm-cmt-to { font-size: 9.5px; }
    .sm-mine-new { font-size: 10px; }
}
@media (min-width: 900px) {
    .sm-side[data-tab="mine"] .sm-mine:not([hidden]) { display: block; }
    .sm-tab[hidden] { display: none; }
}

/* 해당 판매점 공유하기(2026-10-28) */
.sm-share-shop { margin: 6px 0 0; }
.sm-share-btn { padding: 5px 12px; border: 1px solid var(--brand, #003087); border-radius: 999px; background: var(--surface, #fff); color: var(--brand, #003087); font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; }
.sm-share-panel { margin-top: 6px; }
.sm-share-panel img { display: block; width: 100%; border-radius: 8px; }
.sm-share-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sm-share-acts button, .sm-share-acts a { padding: 4px 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--surface, #fff); color: var(--fg, #333); font: inherit; font-size: 11.5px; font-weight: bold; text-decoration: none; cursor: pointer; }
.sm-share-acts button[data-a="share"] { border-color: var(--brand-bg, #003087); background: var(--brand-bg, #003087); color: #fff; }
.sm-share-msg { margin: 4px 0 0; color: var(--muted, #555); font-size: 11px; }
.sm-share-msg:empty { display: none; }
@media (max-width: 899px) { .sm-share-btn { padding: 3px 9px; font-size: 10.5px; } .sm-share-acts button, .sm-share-acts a { font-size: 10.5px; } }