/* ============================================================
   방구석 탈출 — 아이가 옆에서 보고 "저기 가고 싶다" 하는 화면
   ============================================================ */

:root {
  /* 종이 위의 크레용. 흰 배경 대신 살짝 따뜻한 바탕 */
  --paper:      #fffaf2;
  --paper-deep: #f7eee0;
  --surface:    #fff;
  --ink:        #241f1a;
  --ink-soft:   #6f6459;
  --line:       #ece2d3;

  /* 문 색 — 탈출의 색 */
  --door:       #d63f0c;
  --door-deep:  #b53308;
  --door-tint:  #fff0ea;

  --radius:     18px;
  --radius-sm:  12px;

  /* 종이 위에 놓인 것처럼 — 색이 섞인 그림자 */
  --lift-1: 0 1px 2px rgba(64, 44, 28, .06), 0 2px 8px rgba(64, 44, 28, .05);
  --lift-2: 0 2px 4px rgba(64, 44, 28, .07), 0 10px 28px rgba(64, 44, 28, .11);
  --lift-3: 0 4px 8px rgba(64, 44, 28, .09), 0 20px 48px rgba(64, 44, 28, .16);

  /* 실제 물체처럼 감속한다. 오버슈트는 아주 얕게만 — 반복되면 싸구려가 된다 */
  --ease: cubic-bezier(.16, 1, .3, 1);     /* ease-out-expo — 실제 물체의 감속 */
  --pop:  cubic-bezier(.34, 1, .28, 1);    /* 더 급하게 붙잡히는 감속 */
}

* { box-sizing: border-box; }

/* display를 지정한 요소도 hidden이면 사라져야 한다 */
[hidden] { display: none !important; }

/* 키보드 사용자에게만 보이는 포커스 링 */
:focus-visible {
  outline: 2.5px solid var(--door);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

html, body { height: 100%; }
html { overflow-x: hidden; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}

.icon { display: block; flex: none; }

/* ============================================================
   상단바
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: 100%;
  overflow: hidden;
  background: rgba(255, 250, 242, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar h1 .icon { color: var(--door); }

.controls { display: flex; gap: 8px; align-items: center; min-width: 0; }

.controls select {
  font: inherit;
  font-weight: 600;
  padding: 9px 32px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6459' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.controls select:hover { border-color: #d9cbb6; }

.locate {
  font: inherit;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.locate:hover { border-color: #d9cbb6; color: var(--ink); }
.locate[data-active='true'] {
  background: var(--door);
  border-color: var(--door);
  color: #fff;
  box-shadow: 0 2px 10px rgba(244, 81, 30, .3);
}
.locate[data-busy='true'] { opacity: .6; pointer-events: none; }
.locate[data-busy='true'] .icon { animation: spin 1.1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   레이아웃
   ============================================================ */

.layout { display: flex; flex: 1; min-height: 0; }

.panel {
  width: 436px;
  flex: 0 0 436px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

/* 필터바는 고정, 결과만 흐른다 */
.results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
  scrollbar-width: thin;
}

.mapwrap { flex: 1; position: relative; background: var(--paper-deep); }
#map { width: 100%; height: 100%; position: relative; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 14px;
  letter-spacing: .02em;
}

/* ============================================================
   탭
   ============================================================ */

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.tab {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px 11px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[data-on='true'] {
  color: var(--door-deep);
  border-bottom-color: var(--door);
}

/* ============================================================
   전체보기 목록 — 200개까지 나오므로 카드보다 간결하게
   ============================================================ */

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.row {
  --h: 28;
  border-radius: var(--radius-sm);
  transition: background .14s var(--ease);
}
.row[data-active='true'] { box-shadow: inset 0 0 0 1px hsl(var(--h) 45% 82%); }
.row[data-open='true'] { background: hsl(var(--h) 60% 97%); }

/* 행의 클릭 영역 — 버튼이라 키보드로도 열린다 */
.row-head {
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s var(--ease);
}
.row-head:hover { background: hsl(var(--h) 60% 96%); }

/* 목록 번호 — 지도 마커와 짝을 이룬다 */
.row-num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: hsl(var(--h) 62% 32%);
  color: #fff;
  font-size: 12px; font-weight: 800;
}

/* ============================================================
   지도 위 미니카드
   ============================================================ */

.mapcard {
  position: relative;
  width: 232px;
  max-width: min(232px, calc(100vw - 40px));
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(50, 30, 15, .16), 0 14px 36px rgba(50, 30, 15, .24);
  overflow: hidden;
  animation: card-pop .2s var(--ease);
}
@keyframes card-pop {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
}

/* 말풍선 꼬리 — 어느 핀인지 가리킨다 */
.mapcard::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7px;
  width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--surface);
  box-shadow: 3px 3px 6px rgba(50, 30, 15, .1);
}

.mapcard-close {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 2;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.mapcard-close:hover { background: #fff; }

.mapcard-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--paper-deep);
}
.mapcard-img-none {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--paper-deep);
  color: #b9a894;
}

.mapcard-body { padding: 10px 12px 12px; }
.mapcard-name {
  margin: 0 0 4px;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.mapcard-addr {
  margin: 0 0 9px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mapcard-actions { display: flex; gap: 6px; }
.mapcard-actions .btn { font-size: 12px; padding: 7px 10px; flex: 1; justify-content: center; }
.mapcard-actions .btn-go { background: hsl(var(--h) 62% 32%); }

/* 선택된 마커 */
.marker-many[data-active='true'] {
  transform: scale(1.25);
  box-shadow: 0 5px 14px rgba(50, 30, 15, .45);
  z-index: 5;
}

.toomany {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
.toomany .icon { color: var(--door); flex: none; margin-top: 1px; }

/* ============================================================
   필터바 — 조건이 항상 보이는 자리
   ============================================================ */

.filterbar {
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 60px;
  z-index: 18;
}

/* 테마 13개를 세로로 펼치면 200px을 먹는다. 가로 한 줄이면 48px. */
/* 13개를 전부 보여준다. 가로 스크롤은 9개를 감추는 대가가 너무 컸다. */
.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 0 24px;
}

/* 칩 — 터치 타겟 44px, 가로 한 줄에서 절대 줄바꿈되지 않게 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.chip {
  --h: 28;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 13px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
  white-space: nowrap;
  flex: 0 0 auto;

  /* 시각 높이는 36px이지만 손가락이 닿는 영역은 44px */
  position: relative;
}
.chip::after {
  content: '';
  position: absolute;
  inset: -4px -2px;      /* 36 + 8 = 44px */
}
.chip .icon { width: 14px; height: 14px; flex: none; }
.chip:hover {
  border-color: hsl(var(--h) 45% 78%);
  color: hsl(var(--h) 60% 30%);
  transform: translateY(-1px);
}
.chip[data-on='true'] {
  background: hsl(var(--h) 70% 95%);
  border-color: hsl(var(--h) 55% 70%);
  color: hsl(var(--h) 62% 28%);
}
.chip[data-on='true']:hover { transform: translateY(-1px); }

.agerow .chip { font-size: 12.5px; }

.agerow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 0;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  min-width: 0;
}
.agerow-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  flex: none;
}
.agerow .chips { gap: 8px; }

.reset {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
  padding: 6px 10px;
  min-height: 38px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex: none;
}
.reset:hover { color: var(--door-deep); }

/* 좁은 화면에서만 쓰는 '더 보기' — 데스크톱은 13개가 다 보인다 */
.more {
  display: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 12px;
  min-height: 36px;
  border: 1px dashed hsl(28 40% 70%);
  border-radius: 999px;
  background: transparent;
  color: var(--door-deep);
  cursor: pointer;
  flex: 0 0 auto;
}
.more:hover { background: var(--door-tint); }

/* ============================================================
   카드 — 각자 자기 테마 색을 입는다
   ============================================================ */

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.cards > * { min-width: 0; }

.card {
  --h: 28;
  /* 키보드로도 지도를 움직일 수 있게 */                                   /* JS가 테마 hue로 덮어쓴다 */
  --tint:   hsl(var(--h) 72% 96%);
  --edge:   hsl(var(--h) 45% 86%);
  --strong: hsl(var(--h) 62% 32%);

  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
  animation: card-in .42s var(--pop) backwards;
}
.card:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3) { animation-delay: .12s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}

.card:hover,
.card[data-active='true'] {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
  border-color: var(--edge);
}
.card[data-active='true'] { box-shadow: var(--lift-2), 0 0 0 2px var(--edge); }

/* 사진 */
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--tint); overflow: hidden; }
.card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.card:hover .card-img { transform: scale(1.045); }

.card-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 92%), transparent 60%),
    var(--tint);
  color: var(--strong);
  opacity: .55;
}

/* 번호 배지 — 지도 마커와 짝을 이룬다 */
.card-num {
  position: absolute;
  top: 10px; left: 10px;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--strong);
  color: #fff;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px hsl(var(--h) 50% 30% / .38);
}

.card-body { padding: 13px 15px 15px; }

.card-title {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.32;
  text-wrap: balance;
  /* 39자짜리 이름이 카드를 무너뜨리지 않게 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }

.tag {
  --h: 28;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: hsl(var(--h) 72% 95%);
  color: hsl(var(--h) 60% 30%);
}
.tag .icon { width: 13px; height: 13px; }

.card-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 5px;
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.card-meta .dist { color: var(--strong); font-weight: 700; }

.card-actions { display: flex; gap: 7px; }

.btn {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: all .16s var(--ease);
}
.btn:hover { border-color: #d9cbb6; color: var(--ink); transform: translateY(-1px); }
.btn-go {
  background: var(--strong);
  border-color: transparent;
  color: #fff;
}
.btn-go:hover { color: #fff; filter: brightness(1.08); }

/* ============================================================
   탈출 버튼 — 화면에서 제일 크게 말하는 것
   ============================================================ */

.again {
  width: 100%;
  margin: 18px 0 6px;
  padding: 16px;
  font: inherit; font-size: 16px; font-weight: 800;
  letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
  background: var(--door);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(244, 81, 30, .3);
  transition: transform .16s var(--pop), box-shadow .2s var(--ease), background .2s;
}
.again:hover { background: var(--door-deep); box-shadow: 0 5px 20px rgba(244, 81, 30, .4); transform: translateY(-2px); }
.again:active { transform: translateY(0) scale(.985); }
.again .icon { transition: transform .3s var(--pop); }
.again:hover .icon { transform: translateX(3px) rotate(-8deg); }


/* ============================================================
   알림 · 빈 상태
   ============================================================ */

.notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--door-tint);
  border: 1px solid #ffd9c8;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 13px;
  color: #9c3a12;
  margin: 0 0 14px;
  animation: card-in .3s var(--ease);
}
.notice .icon { color: var(--door); margin-top: 1px; }

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--ink-soft);
}
.empty .icon { margin: 0 auto 12px; color: #c9bba6; }
.empty p { margin: 0; font-size: 14px; }

.map-error {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}

.credit {
  font-size: 11.5px;
  color: #7d7062;
  margin-top: 26px;
  text-align: center;
}

/* ============================================================
   지도 마커
   ============================================================ */

.marker-label {
  --h: 28;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: hsl(var(--h) 62% 31%);
  color: #fff;
  font-size: 14px; font-weight: 800;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(50, 30, 15, .35);
  cursor: pointer;
  transition: transform .24s var(--pop), box-shadow .24s var(--ease);
}
.marker-label[data-hot='true'] {
  transform: scale(1.32) translateY(-2px);
  box-shadow: 0 6px 18px rgba(50, 30, 15, .45);
}
.marker-origin { background: #2563eb; font-size: 11px; }

/* ============================================================
   모바일
   ============================================================ */

@media (max-width: 767px) {
  /* 지도와 목록이 세로를 나눠 쓰면 필터를 펼쳤을 때 둘 다 죽는다.
     각자 전체 화면을 쓰고 버튼으로 전환한다. */
  .layout {
    flex-direction: column;
    height: calc(100dvh - var(--chrome-h, 190px));
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  .panel {
    width: 100%;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: none;
  }
  .results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 92px;
  }

  /* 지도는 패널 위에 겹쳐 놓고 보이기/숨기기만 한다 —
     재생성하면 카카오 SDK가 다시 그려야 해서 느리다 */
  .mapwrap {
    position: absolute;
    inset: 0;
    height: auto;
    flex: none;
    z-index: 14;
  }
  body[data-view='list'] .mapwrap { visibility: hidden; pointer-events: none; }
  body[data-view='map'] .panel { visibility: hidden; }

  /* 전환 버튼 */
  .view-toggle {
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex; align-items: center; gap: 7px;
    font: inherit; font-size: 14px; font-weight: 700;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(36, 31, 26, .4);
  }
  .view-toggle:active { transform: translateX(-50%) scale(.96); }

  /* '다시 탈출!'은 추천 탭에서만 — 전체보기에서는 전환 버튼이 그 자리다 */
  .again {
    position: fixed;
    bottom: 16px; left: 14px; right: 14px;
    width: auto; margin: 0;
    z-index: 30;
    box-shadow: 0 6px 24px rgba(214, 63, 12, .42);
  }

  .filterbar { position: static; padding: 10px 0 10px; }
  .chiprow {
    padding: 0 16px;
    /* 칩 36px + 여유. 두 번째 줄이 반쯤 보이면 잘린 것처럼 지저분하다 */
    max-height: 38px;
    overflow: hidden;
  }
  .filterbar[data-expanded='true'] .chiprow { max-height: none; }
  .agerow { padding: 10px 16px 0; }
  .more { display: inline-flex; align-items: center; gap: 4px; }

  .tabs { padding: 0 14px; }
  .tab { padding: 11px 12px 10px; font-size: 13px; }
  .topbar { padding: 11px 14px; gap: 10px; }
  .topbar h1 { font-size: 16px; }
  .topbar h1 .icon { width: 19px; height: 19px; }
  .topbar h1 { flex: 1 1 auto; min-width: 0; }
  .controls { flex: 0 0 auto; justify-content: flex-end; }
  .controls select {
    min-height: 40px;
    width: 116px;
    flex: none;
    text-overflow: ellipsis;
    padding: 0 28px 0 12px;
    font-size: 14px;
  }
  .locate {
    min-height: 40px;
    width: 40px;
    padding: 0;
    justify-content: center;
    flex: none;
  }
  .locate span { display: none; }

  /* 카드는 지도 하단 시트 */
  .mapcard-sheet {
    position: absolute;
    left: 10px; right: 10px; bottom: 76px;
    top: auto;
    width: auto;
    max-width: none;
    z-index: 20;
    display: flex;
    gap: 10px;
    padding: 10px;
    align-items: center;
    animation: sheet-up .22s var(--ease);
  }
  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(10px); }
  }
  .mapcard-sheet::after { display: none; }
  .mapcard-img, .mapcard-img-none {
    width: 76px; height: 76px;
    aspect-ratio: auto;
    border-radius: 10px;
    flex: none;
  }
  .mapcard-body { padding: 0; flex: 1; min-width: 0; }
  .mapcard-name {
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
  }
  .mapcard-addr { -webkit-line-clamp: 1; margin-bottom: 7px; font-size: 11px; }
  .mapcard-actions .btn { padding: 6px 8px; font-size: 11.5px; }
  .mapcard-close { top: 4px; right: 4px; width: 22px; height: 22px; }

  .credit { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}