/* Photo marker geometry matches public/kakao-centers-map.html used by the app:
   48px photo, 3px white frame, 6px tail. The tail tip is the map coordinate.
   Keep the label out of the anchored box so long names never move the pin. */
.mk {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 54px;
  height: 60px;
  border: 0;
  padding: 0 0 6px;
  background: transparent;
  font-family: inherit;
}
button.mk { cursor: pointer; touch-action: manipulation; }
.mk__tile {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  padding: 3px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.mk__tile::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
}
.mk__media {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: #e8ecf1;
}
.mk__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mk__fallback {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  color: #2a7fe5; background: linear-gradient(135deg, #eaf4ff, #d7e9ff);
}
.mk__fallback svg { width: 31px; height: 31px; }
.mk--cluster .mk__tile { border-radius: 18px; }
.mk--cluster .mk__media { border-radius: 15px; }
.mk__count {
  position: absolute; top: -5px; right: -7px; display: flex;
  align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 24px; height: 21px; padding: 0 5px;
  border: 1px solid #dbe4ec; border-radius: 7px;
  color: #334155; font-size: 11px; font-weight: 650; line-height: 1;
  background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
}
.mk__label {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 180px;
  color: #475569; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 2px #fff, 0 0 3px #fff;
}
button.mk:focus-visible { outline: none; }
button.mk:focus-visible .mk__tile { outline: 3px solid #00478e; outline-offset: 3px; }

/* Search-only information markers. Photo pins above keep their original size.
   A point's center, or a cluster's tail tip, stays at the anchored coordinate. */
.mk.mk--no-photo { width:44px; height:44px; padding:0; }
.mk--no-photo::before { content:''; position:absolute; width:44px; height:44px; left:0; bottom:-22px; }
.mk--no-photo .mk__tile {
  position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:14px; height:14px; padding:0; border:3px solid #fff;
  border-radius:50%; background:#2a7fe5; box-shadow:0 1px 5px #172c4933;
}
.mk--no-photo .mk__tile::after { display:none; }
.mk--no-photo .mk__label { display:none; top:auto; bottom:15px; }
button.mk.mk--no-photo[aria-pressed="true"] .mk__tile { width:18px; height:18px; bottom:-9px; background:#146fba; box-shadow:0 0 0 3px #146fba24,0 1px 5px #172c4933; }
button.mk--no-photo[aria-pressed="true"] .mk__label,
button.mk--no-photo:not(.mk--cluster):focus-visible .mk__label {
  display:block; padding:7px 11px; border-radius:9px;
  background:#146fba; color:#fff; text-shadow:none; font-weight:650;
  box-shadow:0 2px 8px #172c4924;
}
.mk.mk--no-photo.mk--cluster { width:100px; }
.mk--no-photo.mk--cluster::before { display:none; }
.mk--no-photo.mk--cluster .mk__tile {
  bottom:6px; width:max-content; min-width:76px; height:32px;
  padding:0 12px; border:1px solid #dbe4ec; border-radius:17px;
  background:#fff; color:#185fa6; box-shadow:0 2px 8px #172c4924;
  display:flex; align-items:center; justify-content:center;
}
.mk--no-photo.mk--cluster .mk__tile::after { display:block; }
.mk__summary { font-size:12px; font-weight:650; line-height:1; white-space:nowrap; }