/* 맛집 지도 — 지붕 base.css 위에 이 앱 것만 (줄 대신 면 색 · 쉬는 것엔 그림자 없음 · 단추 완전 원형 · 글자 다섯 단 12 · 14 · 16 · 20 · 32) */
.mj-top-wrap { padding-top: 16px; }
.mj-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mj-title h1 { margin: 0; font-size: 32px; line-height: 1.2; }
.mj-tag { margin: 0; font-size: 14px; color: var(--mut); flex: 0 1 auto; }
.mj-info { flex: 0 0 44px; }

.mj-bar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: center; }
.mj-bar select, .mj-bar input { background: var(--card); font-size: 16px; }
.mj-q { position: relative; display: block; }
.mj-q svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--mut); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.mj-q input { padding-left: 42px; }
.mj-bar .mj-ic[hidden] { display: none; }

.mj-food { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mj-food::-webkit-scrollbar { display: none; }
.mj-tile { flex: 1 0 68px; min-width: 68px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 8px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.mj-tile:hover { background: var(--hover); }
.mj-tile.on { background: var(--fg); color: var(--bg); }
.mj-tile.none { opacity: .35; }
.mj-tile:focus-visible, .mj-chip:focus-visible, .mj-head button:focus-visible, .mj-out:focus-visible, .mj-bx:focus-visible, .mj-cr:focus-visible, .mj-home:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.mj-em { font-size: 24px; line-height: 1.2; }
.mj-tl { font-size: 12px; line-height: 1.25; text-align: center; word-break: keep-all; }
.mj-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mj-sub[hidden] { display: none; }
.mj-chip { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.mj-chip:hover { background: var(--hover); }
.mj-chip.on { background: var(--fg); color: var(--bg); }

.mj-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.mj-left { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mj-mapbox { position: relative; padding: 8px; }
.mj-map { display: block; width: 100%; height: auto; max-height: 64vh; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mj-map:active { cursor: grabbing; }
.mj-gu path { fill: var(--band); stroke: var(--card); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s ease; }
.mj-gu path:hover { fill: var(--hover); }
.mj-gu path.on { fill: color-mix(in srgb, var(--band) 50%, var(--card)); }
.mj-gu path.dim { fill: color-mix(in srgb, var(--band) 60%, var(--mut) 12%); }
.mj-dong path { fill: transparent; stroke: var(--mut); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.mj-dong path:hover { fill: color-mix(in srgb, var(--acc) 8%, transparent); }
.mj-dong path.on { fill: color-mix(in srgb, var(--acc) 12%, transparent); stroke: var(--acc); stroke-opacity: 1; stroke-width: 2; }
.mj-pin { cursor: pointer; }
.mj-pin .s { transform: scale(var(--r, 12)); }
.mj-pin.many .s { transform: scale(calc(var(--r, 12) * 1.3)); }
.mj-pin.sel .s { transform: scale(calc(var(--r, 12) * 1.7)); }
.mj-pin path { fill: var(--acc); fill-opacity: .8; stroke: var(--card); stroke-width: .7; vector-effect: non-scaling-stroke; }
.mj-pin.many path { fill-opacity: 1; }
.mj-pin.sel path { fill: var(--fg); fill-opacity: 1; }
.mj-pin text { display: none; fill: var(--acc-fg); font-size: .68px; font-weight: 700; pointer-events: none; }
.mj-map.near .mj-pin text { display: inline; }
.mj-labels text { font-size: calc(var(--f, 20) * 1px); font-weight: 600; fill: var(--fg); stroke: var(--card); stroke-width: calc(var(--f, 20) * .2px); paint-order: stroke; pointer-events: none; }
.mj-labels text.on { fill: var(--acc); }

.mj-crumb { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; max-width: calc(100% - 32px); padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; }
.mj-home { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.mj-home:hover { background: var(--hover); }
.mj-home svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mj-sep { color: var(--mut); }
.mj-cr { padding: 8px 4px; border: 0; background: none; color: var(--fg); font: inherit; }
button.mj-cr { cursor: pointer; color: var(--link); }
.mj-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.mj-zoom .mj-ic { background: var(--card); }
.mj-zoom .mj-ic::after { top: auto; bottom: 0; right: calc(100% + 6px); }

.mj-card { padding: 16px; }
.mj-card[hidden] { display: none; }
.mj-ctop { display: flex; align-items: flex-start; gap: 12px; }
.mj-cname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mj-em2 { font-size: 32px; }
.mj-card p { margin: 8px 0 0; }
.mj-addr, .mj-facts { font-size: 14px; }
.mj-facts { color: var(--mut); }
.mj-menu { display: flex; flex-wrap: wrap; gap: 4px; }
.mj-chip2 { display: inline-block; font-size: 12px; background: var(--band); border-radius: 999px; padding: 0 8px; line-height: 20px; }
.mj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-out { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--band); color: var(--fg) !important; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mj-out:hover { background: var(--hover); }
.mj-simbtn { background: var(--acc); color: var(--acc-fg) !important; }
.mj-simbtn:hover { background: var(--acc); filter: brightness(1.08); }

.mj-listbox { min-width: 0; max-height: calc(100vh - 24px); overflow-y: auto; position: relative; }
.mj-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 2px 2px 2px 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; min-width: 0; }
.mj-banner[hidden] { display: none; }
.mj-bt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mj-bx { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.mj-count { margin: 0 0 4px; font-size: 14px; font-weight: 600; min-height: 18px; }
.mj-head { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--eq-text, #111) 4%, var(--eq-bg, #fff)); }
.mj-head button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--mut); font: inherit; font-size: 14px; cursor: pointer; }
.mj-head button:hover { background: var(--hover); }
.mj-head button.on { color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mj-head button[data-dir=fwd]::after { content: ' ▾'; }
.mj-head button[data-dir=rev]::after { content: ' ▴'; }

.mj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mj-item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 8px 12px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.mj-item:hover { background: var(--hover); }
.mj-item.sel { outline: 3px solid var(--acc); outline-offset: -3px; }
.mj-item:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.mj-main1 { flex: 1; min-width: 0; }
.mj-name { font-size: 16px; }
.mj-subline { margin: 0; font-size: 12px; color: var(--mut); }
.mj-why { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mj-nums { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.mj-n1 { font-size: 14px; font-weight: 600; white-space: nowrap; }
.mj-n2 { font-size: 12px; color: var(--mut); white-space: nowrap; }
.mj-none { padding: 24px 0; text-align: center; color: var(--mut); }
.mj-more { margin: 12px auto 0; display: block; border: 0; border-radius: 999px; padding: 0 20px; line-height: 44px; font-size: 14px; background: var(--band); color: var(--fg); cursor: pointer; }
.mj-more[hidden] { display: none; }

.mj-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 999px; background: var(--band); color: var(--fg); cursor: pointer; font-size: 18px; }
.mj-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mj-ic:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.mj-ic::after, .mj-home::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--fg); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 3; }
.mj-home::after { right: auto; left: 0; }
.mj-ic:hover::after, .mj-ic:focus-visible::after, .mj-home:hover::after, .mj-home:focus-visible::after { opacity: 1; }

.mj-about { margin-top: 24px; font-size: 12px; color: var(--mut); }
.mj-about summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--band); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.mj-about summary::-webkit-details-marker { display: none; }
.mj-about summary:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.mj-about p { margin: 8px 0 0; }
.mj-about a { color: var(--link); }
.mj-fb { display: inline-flex; gap: 8px; margin-top: 12px; }

@media (max-width: 800px) {
  .mj-title h1 { font-size: 20px; }
  .mj-tag { font-size: 12px; flex-basis: 0; min-width: 120px; }
  .mj-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .mj-q { grid-column: 1 / -1; }
  .mj-tile { flex: 0 0 76px; }   /* 다섯 칸이 딱 맞으면 옆으로 더 있는 것이 안 보인다 — 잘린 칸이 보이게 */
  .mj-main { grid-template-columns: minmax(0, 1fr); }
  .mj-left { position: static; }
  .mj-map { max-height: 54vh; }
  .mj-listbox { max-height: none; overflow: visible; }
  .mj-head { position: static; }
}
@media (prefers-reduced-motion: reduce) { .mj-gu path, .mj-ic::after, .mj-home::after { transition: none; } }