/* ─────────────────────────────────────────────
 * 한봇 오늘의 동네 (2026-10-28) — SPEC §8 디자인 토큰 (사용자 승인)
 * 소재: 국토지리정보원 지형도·측량 도구. 지도 색은 밝은·어두운 화면 모두 같고, 바깥 패널은 사이트 토큰을 그대로 쓴다.
 * 땅 #e3e8dc · 바다 #bcd5df · 경계 #7f8b80 · 등고선 갈색 #a8743f
 * 가까운 정도 5단계(먼 → 가까운): 쪽빛 #6f8fb8 · 청록 #8fb8a8 · 황토 #e2c25a · 주황 #e08a3c · 주사 #c8452f(정답)
 * 시그니처(하나): 맞히는 순간 정답 동네에 삼각점 표식 + 등고선 갈색 동심원이 한 번 퍼짐(.dn-tri.dn-anim .dn-ring).
 * ───────────────────────────────────────────── */
.dn-root, .hbs-overlay, .chat-fab, .chat-panel {
    --dn-land: #e3e8dc;
    --dn-sea: #bcd5df;
    --dn-line: #7f8b80;
    --dn-contour: #a8743f;
    --dn-b0: #6f8fb8;
    --dn-b1: #8fb8a8;
    --dn-b2: #e2c25a;
    --dn-b3: #e08a3c;
    --dn-b4: #c8452f;
    --dn-ink: #2b332d;              /* 지도 위 글자 (지도 색이 두 화면 모두 같으므로 고정) */
}
.dn-b0 { --b: var(--dn-b0); }
.dn-b1 { --b: var(--dn-b1); }
.dn-b2 { --b: var(--dn-b2); }
.dn-b3 { --b: var(--dn-b3); }
.dn-b4 { --b: var(--dn-b4); }

.dn-root {
    background: var(--bg-base);
    color: var(--text-sub);
    min-height: calc(100vh - var(--topbar-h, 0px));
}
.dn-root [hidden] { display: none !important; }
.dn-root :focus-visible, .hbs-overlay :focus-visible, .chat-panel :focus-visible { outline: 2px solid var(--dn-contour); outline-offset: 2px; }
.dn-root .wrap { max-width: min(96%, 2400px); margin: 0 auto; padding: 12px 16px 90px; }
.dn-root .top-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dn-root .page-title {
    font-family: "hb-games-display", var(--font-sans); font-weight: 400; color: var(--text-main); margin: 0;
    font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2.2rem);
    text-decoration: underline; text-decoration-color: var(--dn-contour); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.dn-root .page-sub { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dn-closed { display: none; font-size: 0.78rem; color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.45); border-radius: var(--radius); padding: 4px 12px; }
.dn-closed.show { display: inline-block; }
.dn-admin-link { margin-left: auto; }
.dn-root .back-btn { display: inline-flex; align-items: center; font-size: 0.82rem; color: var(--text-dim); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.dn-root .back-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.dn-root .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 버튼 — 주 행동은 등고선 갈색 테두리 (SPEC §8) */
.dn-root .big-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    background: color-mix(in srgb, var(--dn-contour) 20%, var(--bg-card)); border: 1.5px solid var(--dn-contour); border-radius: var(--radius);
    color: var(--text-main); font-family: inherit; font-size: 0.92rem; font-weight: 800; padding: 10px 20px; cursor: pointer;
}
.dn-root .big-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--dn-contour) 32%, var(--bg-card)); }
.dn-root .big-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dn-root .mini-btn { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-sub); font-family: inherit; font-size: 0.76rem; padding: 5px 10px; cursor: pointer; }
.dn-root .mini-btn:hover { color: var(--text-main); border-color: var(--dn-contour); }
.dn-root .chip-btn { font-family: inherit; font-size: 0.76rem; color: var(--text-sub); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.dn-root .chip-btn:hover { color: var(--text-main); }
.dn-root .chip-btn.on { color: var(--text-main); border-color: var(--dn-contour); background: color-mix(in srgb, var(--dn-contour) 20%, var(--bg-card)); font-weight: 700; }
.dn-root .filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dn-tag { display: inline-block; font-size: 0.68rem; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-dim); vertical-align: 1px; }
.dn-root .title-chip { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.08); color: var(--text-sub); }


/* ── 배치: PC 왼쪽 지도(화면 높이 꽉) · 오른쪽 입력·표 ── */
.dn-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 820px); gap: clamp(12px, 1vw, 24px); align-items: start; margin-top: 12px; }

/* 지도 */
.dn-map {
    position: sticky; top: calc(var(--topbar-h, 0px) + 10px);
    height: calc(100vh - var(--dn-off, calc(var(--topbar-h, 0px) + 20px))); height: calc(100dvh - var(--dn-off, calc(var(--topbar-h, 0px) + 20px))); min-height: 420px;
    background: var(--dn-sea); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.dn-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.dn-svg:active { cursor: grabbing; }
.dn-r { fill: var(--dn-land); stroke: var(--dn-line); stroke-width: 0.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill 0.5s ease; }
.dn-r:hover { fill: color-mix(in srgb, var(--dn-land) 82%, var(--dn-line)); }
.dn-r.dn-g { fill: var(--b); }
.dn-r.dn-g:hover { fill: color-mix(in srgb, var(--b) 86%, #fff); }
.dn-r.dn-ans { stroke: var(--dn-contour); stroke-width: 2px; }
/* 어려운 길 — 추측한 곳은 색 없이 굵은 테두리만 */
.dn-r.dn-hg { stroke: var(--dn-ink); stroke-width: 1.6px; }
/* 내 지도(동네 도감) — 오늘 판 색을 덮고 정답으로 만난 곳(주사)·추측해 본 곳(옅은 주사)만 */
.dn-svg.atlas .dn-r.dn-g, .dn-svg.atlas .dn-r.dn-hg { fill: var(--dn-land); stroke: var(--dn-line); stroke-width: 0.6px; }
.dn-svg.atlas .dn-r.dn-at-g, .dn-legend .dn-at-g { fill: color-mix(in srgb, var(--dn-b4) 32%, var(--dn-land)); background: color-mix(in srgb, var(--dn-b4) 32%, var(--dn-land)); }
.dn-svg.atlas .dn-r.dn-at-a, .dn-legend .dn-at-a { fill: var(--dn-b4); background: var(--dn-b4); }
.dn-svg.atlas #dn-marks { display: none; }
.dn-sd { fill: none; stroke: var(--dn-line); stroke-width: 1.8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
#dn-marks { pointer-events: none; }
.dn-tri-mark { fill: #fff; stroke: var(--dn-contour); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dn-tri-dot { fill: var(--dn-contour); }
/* 시그니처 — 표식이 내려앉고 동심원이 한 번 퍼진다 */
.dn-ring { fill: none; stroke: var(--dn-contour); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dn-ring 1.7s ease-out both; }
@keyframes dn-ring { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(5); opacity: 0; } }
.dn-anim .dn-tri-mark { transform-box: fill-box; transform-origin: 50% 100%; animation: dn-drop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes dn-drop { from { transform: translateY(-70%) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }

.dn-map-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--dn-ink); font-size: 0.86rem; }
.dn-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.dn-zbtn { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--dn-line); background: rgba(255, 255, 255, 0.88); color: var(--dn-ink); font-family: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; line-height: 1; }
.dn-zbtn.dn-zall { font-size: 0.72rem; }
.dn-zbtn:hover { border-color: var(--dn-contour); }
.dn-zbtn:focus-visible { outline: 2px solid var(--dn-contour); outline-offset: 1px; }
.dn-legend { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.82); color: var(--dn-ink); font-size: 0.66rem; }
.dn-legend i { width: 14px; height: 10px; border-radius: 2px; background: var(--b); }
.dn-legend span { margin: 0 3px; }
.dn-legend-at, .dn-map.atlas .dn-legend { display: none; }
.dn-map.atlas .dn-legend-at { display: flex; }
.dn-credit { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 230px); padding: 2px 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 0.62rem; color: var(--dn-ink); line-height: 1.35; text-align: left; cursor: default; }
.dn-credit:empty { display: none; }

/* 오른쪽 */
.dn-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dn-rules { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; }
.dn-rules summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.dn-rule-list { margin: 8px 0 2px; padding-left: 1.3em; font-size: 0.82rem; line-height: 1.75; color: var(--text-sub); }
.dn-rule-list b { color: var(--text-main); }
.dn-today { font-size: 0.8rem; color: var(--text-dim); min-height: 1.2em; font-variant-numeric: tabular-nums; }
.dn-today b { color: var(--text-main); }

.login-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-align: center; }
.login-box h3 { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.25rem; color: var(--text-main); margin: 0 0 8px; }
.login-box p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.75; margin: 0 0 14px; }

.dn-ask { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; }
.dn-ask-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.dn-tries { font-weight: 400; font-size: 0.78rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.dn-ask-row { display: flex; gap: 8px; }
.dn-combo { position: relative; flex: 1; min-width: 0; }
.dn-input { width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-main); font-family: inherit; font-size: 1rem; padding: 10px 12px; }
.dn-input:focus { border-color: var(--dn-contour); outline: none; }
.dn-input:focus-visible { outline: 2px solid var(--dn-contour); outline-offset: 1px; }
.dn-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: min(320px, 50vh); overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.dn-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; color: var(--text-main); }
.dn-opt:hover, .dn-opt.on { background: color-mix(in srgb, var(--dn-contour) 22%, var(--bg-elev)); }
.dn-opt.used { color: var(--text-dim); }
.do-sido { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.dn-opt-none { padding: 8px 10px; font-size: 0.8rem; color: var(--text-dim); }
.dn-ask-hint { margin: 6px 0 0; font-size: 0.72rem; color: var(--text-dim); }
.dn-hard { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-dim); font-size: 0.76rem; line-height: 1.55; color: var(--text-dim); cursor: pointer; }
.dn-hard b { color: var(--text-main); }
.dn-hard input { margin: 3px 0 0; accent-color: var(--dn-contour); flex: none; }
.dn-carry { margin: 0; padding: 8px 12px; border: 1px solid var(--dn-contour); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-main); background: color-mix(in srgb, var(--dn-contour) 10%, var(--bg-card)); }

/* 추측 표 */
.dn-guess-wrap { margin: 0; }
.dn-guess { font-size: 0.86rem; }
.dn-guess th { font-size: 0.7rem; color: var(--text-dim); font-weight: 600; padding: 6px 6px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.dn-guess td { padding: 7px 6px; border-bottom: 1px solid var(--border-dim); vertical-align: middle; }
.dn-guess .num { text-align: right; }
.dn-guess .dg-f { text-align: center; width: 2.6em; }
.dg-no { width: 1.6em; color: var(--text-dim); font-size: 0.74rem; text-align: center; }
.dg-name { color: var(--text-main); font-weight: 700; word-break: keep-all; }
.dg-km { white-space: nowrap; color: var(--text-main); }
.dg-km small { font-size: 0.7em; color: var(--text-dim); margin-left: 1px; }
.dg-dir { width: 1.6em; font-size: 1.15rem; text-align: center; color: var(--text-main); line-height: 1; }
.dg-tri { color: var(--dn-b4); }
.dg-pct { white-space: nowrap; }
.dg-pct b { font-weight: 700; color: var(--text-main); font-size: 0.8rem; margin-left: 6px; }
.dg-bar { display: inline-block; vertical-align: middle; width: clamp(40px, 4vw, 90px); height: 8px; border-radius: 4px; background: rgba(var(--fg-rgb), 0.1); overflow: hidden; }
.dg-bar i { display: block; height: 100%; background: var(--b); border-radius: 4px; }
.dg-yes { color: var(--ok); font-weight: 800; }
.dg-x { color: var(--danger); font-weight: 800; }
.dg-up, .dg-down { color: var(--text-main); font-weight: 800; }
.dg-q { color: var(--text-dim); }
.dg-hit td { background: color-mix(in srgb, var(--dn-b4) 14%, transparent); }
.dg-empty td { height: 2.2em; }
.dg-blank { background-image: linear-gradient(to right, rgba(var(--fg-rgb), 0.06), rgba(var(--fg-rgb), 0.06)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 60%; }
.dn-key { margin: -4px 0 0; font-size: 0.7rem; color: var(--text-dim); }

/* 결과 */
.dn-result { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius-lg); padding: 14px 16px; }
.dn-result.win { border-left-color: var(--dn-b4); }
.dr-title { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.8rem); color: var(--text-main); margin: 0 0 4px; }
.dr-sub { margin: 0 0 10px; font-size: 0.86rem; color: var(--text-sub); }
.dr-sub b { color: var(--text-main); }
.dr-share { margin: 0 0 10px; padding: 10px 12px; background: var(--bg-deep); border-radius: var(--radius); font-family: inherit; font-size: 0.84rem; line-height: 1.5; white-space: pre-wrap; color: var(--text-main); font-variant-numeric: tabular-nums; }
.dr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dr-next { font-size: 0.82rem; color: var(--text-dim); }
.dr-freeze { margin: -4px 0 10px; font-size: 0.8rem; color: var(--ok); }
/* 정답 동네 소개 · 오늘 모두의 시도 분포 · 내 지도 진행 */
.dn-card, .dn-tdist { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-deep); }
.dc-h { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-main); }
.dc-h small { font-weight: 400; color: var(--text-dim); margin-left: 4px; }
.dc-list { margin: 0; padding-left: 1.2em; font-size: 0.8rem; line-height: 1.7; color: var(--text-sub); word-break: keep-all; }
.dc-list b { color: var(--text-main); }
.dn-tdist .dd-row.me .dd-k, .dn-tdist .dd-row.me b { color: var(--text-main); font-weight: 800; }
.dn-tdist .dd-row.me .dd-bar i { background: var(--dn-b4); }
.dr-atlas { margin: 0 0 10px; font-size: 0.8rem; color: var(--text-sub); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-atlas:empty { display: none; }
.dr-atlas b { color: var(--text-main); }
.dn-atlas-sum { margin: 4px 0 2px; font-size: 0.86rem; color: var(--text-sub); }
.dn-atlas-sum b { color: var(--text-main); }
.dn-sido { margin-top: 8px; }
.dn-sido .dd-row { grid-template-columns: 3em minmax(0, 1fr) 4em; }
.dn-sido .dd-bar i { background: var(--dn-b4); }
.dn-sido .dd-row.full .dd-k { color: var(--text-main); font-weight: 800; }
.dn-freeze-info { margin: 0; font-size: 0.8rem; line-height: 1.7; color: var(--text-sub); }
.dn-freeze-info b { color: var(--text-main); }
.dr-next b { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.2rem; color: var(--text-main); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* 내 기록 띠 */
.me-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.me-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.mc-label { font-size: 0.7rem; color: var(--text-dim); }
.mc-value { font-size: 1.05rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }

/* 탭 */
.dn-tabs { margin: 4px 0 0; }
.dn-root .tab-pane { display: none; }
.dn-root .tab-pane.on { display: block; }
.dn-rank td, .dn-rank th { font-size: 0.82rem; }
.dn-note { font-size: 0.76rem; color: var(--text-dim); margin: 6px 0 0; }
.dn-h { font-size: 0.86rem; color: var(--text-main); margin: 12px 0 6px; }
.dn-dist { display: grid; gap: 4px; }
.dd-row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2.6em; align-items: center; gap: 8px; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.dd-k { color: var(--text-dim); }
.dd-bar { height: 12px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.06); overflow: hidden; }
.dd-bar i { display: block; height: 100%; background: var(--dn-contour); }
.dd-row b { color: var(--text-main); text-align: right; }
.dn-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.dt-item { display: flex; flex-direction: column; gap: 3px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 0.8rem; color: var(--text-main); }
.dt-item small { color: var(--text-dim); }
.dt-item.locked { opacity: 0.55; }
.dt-item .mini-btn, .dt-item .dn-tag { align-self: flex-start; }
.dn-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.dn-ach li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-dim); }
.dn-ach li.done { border-style: solid; border-color: var(--dn-contour); color: var(--text-main); }
.dn-ach small { color: var(--text-dim); }

/* ── 창 (명예의 전당) ── */

/* ── 채팅 (족보와 같은 모양, 사이트 토큰) ── */

/* ── 4K — 큰 화면은 글자도 함께 키움 ── */
@media (min-width: 2400px) {
    .dn-root { font-size: 1.2rem; }
    .dn-root .chip-btn, .dn-root .tab-btn, .dn-root .mini-btn { font-size: 0.95rem; }
    .dn-guess { font-size: 1.05rem; }
    .dn-guess th { font-size: 0.86rem; }
    .dn-rule-list, .dn-today, .dn-ask-label { font-size: 1rem; }
    .dn-input { font-size: 1.2rem; }
    .dn-zbtn { min-width: 48px; height: 48px; }
    .dn-legend { font-size: 0.84rem; }
    .dn-legend i { width: 20px; height: 14px; }
    .dn-credit { font-size: 0.78rem; }
}

/* ── 태블릿·휴대폰 — 지도 위(45vh), 입력·표 아래 ── */
@media (max-width: 1024px) {
    .dn-root .wrap { max-width: 100%; }
    .dn-stage { grid-template-columns: minmax(0, 1fr); }
    .dn-map { position: relative; top: auto; height: 45vh; height: 45dvh; min-height: 280px; }
}
@media (max-width: 600px) {
    .dn-root .wrap { padding: 10px 10px 90px; }
    .dn-guess { font-size: 0.8rem; }
    .dn-guess th, .dn-guess td { padding-left: 3px; padding-right: 3px; }
    .dg-bar { display: none; }
    .dg-pct b { margin-left: 0; }
    .dn-guess .dg-f { width: 2em; }
    .me-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dn-ask-row .big-btn { padding: 10px 14px; }
    .dn-root .mini-btn, .dn-root .chip-btn, .chat-close, .chat-send, .sx-close { min-height: 38px; }
}

/* ── 휴대폰 — 출처는 지도 밖 아래 한 줄(누르면 펼침), 범례는 지도 왼쪽 위 — 지도를 가리지 않게 ── */
@media (max-width: 640px) {
    .dn-map { height: auto; min-height: 0; display: flex; flex-direction: column; }
    .dn-svg { height: 45vh; height: 45dvh; min-height: 280px; flex: none; }
    .dn-legend { top: 10px; left: 10px; right: auto; bottom: auto; }
    .dn-credit { position: static; max-width: none; width: 100%; padding: 6px 10px; border-radius: 0; background: var(--bg-card); color: var(--text-dim); border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .dn-credit[aria-expanded="true"] { white-space: normal; }
}

/* ── 모션 줄이기 — 동심원·내려앉기 없이 표식·색만 ── */
@media (prefers-reduced-motion: reduce) {
    .dn-ring { display: none; }
    .dn-anim .dn-tri-mark { animation: none; }
    .dn-r { transition: none; }
}
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: var(--dn-contour); --chat-accent-ink: var(--brand-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */