:root {
  --ink: #24150d;
  --paper: #fffaf0;
  --cream: #fff1d6;
  --orange: #ff7a2f;
  --orange-deep: #e35d12;
  --sea: #9fdcf5;
  --muted: #7a6152;
  --kakao: #fee500;
  --naver: #03c75a;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --radius: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: 'Huninn', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

[lang='ko'] { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- 지도: 만화 느낌 ---------- */
#map {
  position: fixed;
  inset: 0;
  background: var(--sea);
}


/* 종이 질감 + 두꺼운 테두리 */
#map::before,
#map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 460;
}
#map::before {
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#map::after {
  box-shadow: inset 0 0 0 5px var(--ink);
}

.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; }

.leaflet-bar {
  border: 3px solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.leaflet-bar a {
  width: 38px !important;
  height: 38px !important;
  line-height: 36px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  font-size: 22px !important;
}
.leaflet-bottom.leaflet-right { margin-bottom: var(--safe-bottom); }
.leaflet-right .leaflet-control { margin-right: 14px; }
.leaflet-bottom .leaflet-control-zoom { margin-bottom: 26px; }

/* ---------- 상단 ---------- */
.topbar {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-bowl { width: 44px; height: 44px; flex: none; }
.brand-bowl .bowl { width: 100%; height: 100%; }
.brand h1 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: 0.02em; }
.brand p { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }

.btn-pill {
  flex: none;
  padding: 8px 14px;
  font-size: 14px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn-pill:active, .chip:active, .btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-pill:disabled { opacity: 0.6; cursor: progress; }
.topbar .btn-pill { background: var(--orange); color: var(--ink); }

.filters {
  position: fixed;
  top: calc(80px + var(--safe-top));
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 12px 8px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 5px 14px;
  font-size: 14px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.chip.is-active { background: var(--ink); color: var(--paper); }

.fabs {
  position: fixed;
  left: 12px;
  bottom: calc(26px + var(--safe-bottom));
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- 국밥 마커 ---------- */
.bowl-marker .mk {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform-origin: 50% 58px;
}
/* 필터를 바꾸면 그릇이 하나씩 퐁퐁 */
.bowl-marker.pop-in .mk { animation: pop-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) var(--pop-delay, 0ms) both; }
@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.bowl-marker .bowl {
  width: 58px;
  height: 58px;
  flex: none;
  transform-origin: 50% 90%;
  transition: transform 0.18s ease;
  filter: drop-shadow(3px 3px 0 rgba(36, 21, 13, 0.3));
}
.bowl-marker:hover .bowl { transform: scale(1.12) rotate(-5deg); }
.bowl-marker.is-selected { z-index: 2000 !important; }
.bowl-marker.is-selected .bowl { animation: hop-once 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }

.bowl-label {
  margin-top: -4px;
  padding: 2px 9px;
  font-size: 12px;
  white-space: nowrap;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.bowl-marker.is-selected .bowl-label { background: var(--orange); color: var(--ink); }

.bowl .steam { stroke: #fff; filter: drop-shadow(0 0 1px rgba(36, 21, 13, 0.7)); }
.bowl .steam path {
  transform-box: fill-box;
  animation: steam 2.4s ease-in-out infinite;
}
.bowl .steam path:nth-child(2) { animation-delay: 0.6s; }
.bowl .steam path:nth-child(3) { animation-delay: 1.2s; }

@keyframes steam {
  0% { opacity: 0; transform: translateY(5px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
/* 통! 하고 한 번 튀었다가 살짝 눌리며 착지 */
@keyframes hop-once {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-14px) scale(1.2); }
  60% { transform: translateY(0) scale(1.26, 1.1); }
  80% { transform: translateY(-3px) scale(1.16, 1.2); }
  100% { transform: translateY(0) scale(1.18); }
}

/* ---------- 랜드마크 ---------- */
.landmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.lm-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.lm-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lm-icon .f-orange { fill: var(--orange); }
.lm-icon .f-sea { fill: var(--sea); }
.lm-icon .f-green { fill: #9ed886; }
.lm-icon .f-cream { fill: var(--cream); }
.lm-label {
  margin-top: 2px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

.me-marker span {
  display: block;
  width: 22px;
  height: 22px;
  background: #2f8cff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--ink);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 0 rgba(47, 140, 255, 0.5); }
  100% { box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 16px rgba(47, 140, 255, 0); }
}

/* ---------- 하단 시트 ---------- */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  max-height: 64vh;
  padding: 18px 16px calc(18px + var(--safe-bottom));
  background: var(--paper);
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 0 rgba(36, 21, 13, 0.15);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  display: flex;
  flex-direction: column;
}
.sheet.is-open { transform: translateY(0); }
.sheet-body { overflow-y: auto; }

@media (min-width: 768px) {
  .sheet {
    left: 16px;
    right: auto;
    bottom: 16px;
    width: 380px;
    max-height: calc(100vh - 160px);
    border: 3px solid var(--ink);
    border-radius: 22px;
    box-shadow: var(--shadow);
    transform: translateX(-120%);
  }
  .sheet.is-open { transform: translateX(0); }
}

.sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  z-index: 1;
}

.place-head { display: flex; gap: 12px; align-items: center; padding-right: 36px; }
.place-thumb {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 16px;
}
.place-thumb .bowl { width: 58px; height: 58px; }
.place-head h2 { margin: 0; font-size: 21px; }
.place-head .ko { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.place-head .meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 2px 10px;
  font-size: 13px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.tip { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
.addr-line { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.unverified { margin: 8px 0 0; font-size: 12px; color: #b54708; }

.nav-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.nav-buttons .btn { padding-inline: 6px; font-size: 14px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-kakao { background: var(--kakao); color: #191600; }
.btn-naver { background: var(--naver); color: #fff; }
.btn-google { background: #fff; color: #1a73e8; }
/* WebGL을 못 쓸 때의 대체 이미지 타일: 만화 지도와 비슷한 선명한 톤 */
.tiles-fallback { filter: saturate(1.4) contrast(1.05); }
.btn-ghost { margin-top: 10px; background: var(--paper); }

.sheet-title { margin: 0 44px 10px 0; font-size: 20px; }
.sheet-title small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }

.place-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.place-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.place-list button:hover { background: var(--cream); }
.li-bowl { width: 44px; height: 44px; flex: none; }
.li-bowl .bowl { width: 100%; height: 100%; }
.li-text { display: flex; flex-direction: column; min-width: 0; }
.li-name { font-size: 16px; }
.li-ko { font-size: 13px; font-weight: 700; }
.li-meta { font-size: 12px; color: var(--muted); }

/* ---------- 모달 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(36, 21, 13, 0.5);
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px 18px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.modal-title { margin: 0 44px 4px 0; font-size: 22px; }
.modal-subtitle { margin: 20px 0 8px; font-size: 17px; }
.modal-desc { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

.phrase-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.phrase-list button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.ph-ko { font-size: 18px; font-weight: 700; }
.ph-zh { font-size: 13px; color: var(--muted); }

.tips { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.7; }

.show-hint { margin: 0 44px 12px 0; font-size: 15px; color: var(--muted); }
.show-card {
  padding: 26px 16px;
  text-align: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
}
.show-ko { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.3; word-break: keep-all; }
.show-sub { margin: 10px 0 0; font-size: 16px; color: var(--muted); }
.show-card .show-sub:first-child { margin: 0 0 8px; }
.show-addr { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.35; word-break: keep-all; }
.nowrap { white-space: nowrap; }
.show-addr-box {
  margin-top: 16px;
  padding: 14px 12px;
  background: var(--cream);
  border: 2.5px dashed var(--ink);
  border-radius: 14px;
}
.show-label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}
.show-phone { margin: 14px 0 0; font-size: 22px; font-weight: 700; }
.show-phone a { color: inherit; }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(110px + var(--safe-bottom));
  z-index: 3000;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  font-size: 14px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

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

/* ---------- 사진 마커: 위에서 내려다본 뚝배기 ---------- */
.bowl-marker.has-photo .mk > .bowl { display: none; }
.bowl-marker.has-photo.photo-failed .mk > .bowl { display: block; }
.bowl-marker.photo-failed .photo-bowl { display: none; }

.photo-bowl {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  flex: none;
  transform-origin: 50% 90%;
  transition: transform 0.18s ease;
}
.photo-bowl .steam-only {
  position: absolute;
  left: 50%;
  top: -17px;
  width: 50px;
  transform: translateX(-50%);
  overflow: visible;
}
.photo-rim {
  display: block;
  width: 62px;
  height: 62px;
  padding: 4px;
  overflow: hidden;
  background: #4a2e20;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 rgba(36, 21, 13, 0.35);
}
.leaflet-container .photo-rim img,
.photo-rim img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.bowl-marker:hover .photo-bowl { transform: scale(1.12) rotate(-5deg); }
.bowl-marker.is-selected .photo-bowl { animation: hop-once 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
.bowl-marker.has-photo .bowl-label { margin-top: 2px; }

.marker-ribbon {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 25px;
}
.marker-ribbon .ribbon { width: 100%; height: 100%; }
.label-score { color: var(--orange-deep); font-weight: 700; }
.bowl-marker.is-selected .label-score { color: var(--ink); }

/* ---------- 상세: 대표 사진 ---------- */
.hero { margin: 0 0 14px; }
.hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 16px;
}
.hero figcaption { margin-top: 4px; font-size: 11px; color: var(--muted); text-align: right; }

/* ---------- 평점·예약 ---------- */
.ratings { margin-top: 14px; display: grid; gap: 10px; }
.rate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.rate-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.rate-icon { display: grid; place-items: center; width: 30px; height: 34px; flex: none; }
.rate-icon .ribbon { width: 26px; height: 32px; }
.rate-naver {
  width: 30px;
  height: 30px;
  font: 900 18px/1 'Noto Sans KR', sans-serif;
  color: #fff;
  background: var(--naver);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.rate-text { display: flex; flex-direction: column; min-width: 0; }
.rate-text b { font-size: 15px; }
.rate-text small { font-size: 11px; color: var(--muted); }

.link-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.link-pill {
  padding: 5px 12px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.link-pill:active { transform: translate(2px, 2px); box-shadow: none; }
.link-catchtable { background: #ffe9d6; }

.official { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.official b {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  font-size: 12px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}

.li-bowl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}

/* ---------- 멀리 볼 때: 마커 작게, 이름표 숨김 ---------- */
.is-far .bowl-label { display: none; }
.is-far .bowl-marker:hover .bowl-label,
.is-far .bowl-marker.is-selected .bowl-label { display: block; }
.is-far .bowl-marker .bowl,
.is-far .bowl-marker .photo-bowl { transform: scale(0.72); }
.is-far .bowl-marker:hover .bowl,
.is-far .bowl-marker:hover .photo-bowl { transform: scale(0.9); }
.is-far .marker-ribbon { display: none; }
.is-far .landmark .lm-label { display: none; }


/* ---------- 만화풍 아이콘 ---------- */
.sprite { display: none; }
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-pill, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn { display: flex; }
.tip, .addr-line, .unverified { display: flex; gap: 6px; align-items: flex-start; }
.tip .ico, .addr-line .ico, .unverified .ico { margin-top: 2px; }
.unverified .ico { width: 15px; height: 15px; }
.hero figcaption { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.hero figcaption .ico { width: 13px; height: 13px; stroke-width: 2; }
.show-hint { display: flex; align-items: center; gap: 6px; }
.show-phone { display: flex; align-items: center; justify-content: center; gap: 8px; }
.show-phone .ico { width: 22px; height: 22px; }
.label-score .ico, .rate-text b .ico { width: 13px; height: 13px; vertical-align: -1px; stroke-width: 2.2; fill: currentColor; }

/* ---------- 겹친 마커: 원래 위치까지 줄 + 점 ---------- */
.bowl-marker.is-shifted::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 52px;
  z-index: -1;
  width: var(--tether-len);
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: rotate(var(--tether-angle));
}
.bowl-marker.is-shifted::after {
  content: '';
  position: absolute;
  left: calc(36px - var(--dx) - 5px);
  top: calc(52px - var(--dy) - 5px);
  z-index: -1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  border: 2.5px solid var(--ink);
  box-sizing: border-box;
}

/* ---------- 準備中 가게: 회색 + 이름표 꼬리표 ---------- */
.label-closed { display: none; }
.bowl-marker.is-closed .bowl,
.bowl-marker.is-closed .photo-rim img { filter: grayscale(0.85) brightness(1.05); }
.bowl-marker.is-closed .bowl-label { background: #e9e2d6; }
.bowl-marker.is-closed .label-closed {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  color: var(--paper);
  background: var(--muted);
  border-radius: 999px;
}

/* ---------- 영업시간 ---------- */
.hours {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #eaf8e4;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
}
.hours.is-closed { background: #f1ebe2; }
.hours .ico { margin-top: 1px; }
.hours-state { display: block; font-size: 15px; }
.hours-text { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.li-state { padding: 0 6px; color: #fff; background: #3c9a3f; border-radius: 999px; }
.li-state.is-closed { background: var(--muted); }

/* ---------- 시트: 손잡이 + 끌어내리기 ---------- */
.sheet-grip {
  display: none;
  width: 44px;
  height: 6px;
  margin: -8px auto 10px;
  flex: none;
  background: var(--ink);
  border-radius: 999px;
  opacity: 0.35;
}
@media (max-width: 767px) {
  .sheet-grip { display: block; }
  .sheet { touch-action: pan-y; }
}
.sheet.is-dragging { transition: none; }

/* ---------- 모달: 배경은 스르륵, 카드는 톡 ---------- */
.modal:not([hidden]) { animation: fade-in 0.2s ease-out; }
.modal-card.pop { animation: card-pop 0.38s cubic-bezier(0.2, 1.45, 0.4, 1); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-pop {
  from { transform: translateY(18px) scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- 첫 로딩 화면 ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: var(--cream);
  transition: opacity 0.4s ease, visibility 0.4s;
  /* 스크립트가 멈춰도 8초 뒤엔 스스로 걷힘 */
  animation: loader-out 0.4s ease 8s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader p { margin: 0; font-size: 18px; letter-spacing: 0.08em; }
.loader-bowl { width: 96px; height: 96px; animation: wobble 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.loader-bowl svg { width: 100%; height: 100%; overflow: visible; }
.loader .steam { stroke: #fff; filter: drop-shadow(0 0 1px rgba(36, 21, 13, 0.8)); }
.loader .steam path { transform-box: fill-box; animation: steam 1.6s ease-in-out infinite; }
.loader .steam path:nth-child(2) { animation-delay: 0.4s; }
.loader .steam path:nth-child(3) { animation-delay: 0.8s; }
@keyframes wobble {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}


/* ---------- 수상 스티커: 사진 위에 비스듬히 붙인 만화 스티커 ---------- */
.stickers {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 2px 0 10px;
  padding-left: 6px;
}
.stickers.on-photo { margin: -46px 0 8px; }
.sticker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  transform: rotate(var(--tilt));
  filter: drop-shadow(2px 3px 0 rgba(36, 21, 13, 0.35));
  animation: sticker-slap 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i) * 90ms + 150ms) both;
}
.sticker:active { transform: rotate(var(--tilt)) scale(0.94); }
@keyframes sticker-slap {
  from { transform: rotate(calc(var(--tilt) - 20deg)) scale(1.8); opacity: 0; }
  to { transform: rotate(var(--tilt)) scale(1); opacity: 1; }
}
.st-year { font-size: 17px; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.st-level { font-size: 11px; line-height: 1.1; font-weight: 700; }

/* 미쉐린: 빨간 원형 스티커 + 흰 테두리 */
.sticker-michelin {
  width: 70px;
  height: 70px;
  color: #fff;
  background: #c8102e;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff;
}
.sticker-michelin .st-top { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.95; }
.sticker-michelin .st-year { margin: 1px 0; }

/* 블루리본: 로제트 + 리본 꼬리 */
.sticker-ribbon { width: 66px; padding-bottom: 14px; }
.st-rosette {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #fff;
  background: #1f5fcf;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #1f5fcf, inset 0 0 0 7.5px #fff;
}
.st-tails {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 26px;
  transform: translateX(-50%);
  background:
    linear-gradient(115deg, transparent 46%, var(--ink) 46% 54%, transparent 54%) 0 0 / 50% 100% no-repeat,
    linear-gradient(65deg, transparent 46%, var(--ink) 46% 54%, transparent 54%) 100% 0 / 50% 100% no-repeat;
}
.st-tails::before,
.st-tails::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 24px;
  background: #2f6fde;
  border: 2.5px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.st-tails::before { left: 4px; transform: rotate(14deg); }
.st-tails::after { right: 4px; transform: rotate(-14deg); }
.st-count { position: absolute; bottom: -4px; z-index: 2; font-size: 7px; letter-spacing: 1px; color: var(--paper); }

/* 지도 마커의 작은 미쉐린 배지 */
.marker-badge {
  position: absolute;
  top: 0;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #c8102e;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.is-far .marker-badge { display: none; }

/* 사진 출처는 사진 오른쪽 위로 — 아래 가장자리는 수상 스티커 자리 */
.hero { position: relative; }
.hero figcaption {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.92);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

/* 레드리본(코카-콜라 × 블루리본) 스티커 */
.sticker-ribbon.is-red .st-rosette { background: #d7263d; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #d7263d, inset 0 0 0 7.5px #fff; }
.sticker-ribbon.is-red .st-tails::before,
.sticker-ribbon.is-red .st-tails::after { background: #e8495d; }
/* '藍緞帶入選' 처럼 긴 라벨은 살짝 작게 */
.st-rosette .st-level { max-width: 52px; font-size: 10px; text-align: center; line-height: 1.05; }
/* 스티커가 5장 이상이면 살짝 겹쳐 붙여 한 줄에 */
.stickers.is-many { gap: 4px 0; flex-wrap: nowrap; }
.stickers.is-many .sticker { margin-right: -8px; }
.st-rosette .st-level { font-size: 9px; letter-spacing: -0.02em; }
/* 리본 개수 배지 (×1 ~ ×3) */
.st-n {
  position: absolute;
  top: -4px;
  right: -6px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #1f5fcf;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}
.sticker:has(.st-n) { z-index: 2; }

/* 지도 마커 배지 묶음: 미쉐린 → 블루리본 (왼쪽부터) */
.marker-badges {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 1px;
}
.marker-badges .marker-badge,
.marker-badges .marker-ribbon { position: static; flex: none; }
.is-far .marker-badges { display: none; }

/* 배지 위치 재조정 — 마커 상자 모서리가 아니라 실제 그림의 오른쪽 위 가장자리에 붙인다
   사진 마커: 지름 62px 링 → 45° 지점(약 x58, y9)에 첫 배지 중심
   그림 마커: 국밥 그릇 입구 오른쪽(약 x60, y20) — 위쪽은 김이라 비어 있음 */
.marker-badges {
  left: 47px;
  right: auto;
  top: -3px;
  transition: transform 0.3s ease;
}
.bowl-marker:not(.has-photo) .marker-badges,
.bowl-marker.photo-failed .marker-badges { top: 10px; left: 48px; }
/* 선택되면 그림이 1.18배로 커지므로 배지도 바깥으로 같이 밀어 줌 */
.bowl-marker.is-selected .marker-badges { transform: translate(4px, -7px); }
.bowl-marker:hover .marker-badges { transform: translate(3px, -5px); }
/* 배지가 두 개면 살짝 겹쳐서 묶음을 링 가까이 */
.marker-badges > * + * { margin-left: -5px; }
.marker-badges:has(> :nth-child(2)) { left: 41px; top: -1px; }
.bowl-marker:not(.has-photo) .marker-badges:has(> :nth-child(2)),
.bowl-marker.photo-failed .marker-badges:has(> :nth-child(2)) { left: 42px; top: 11px; }
/* 그림 마커는 그릇 입구에 조금 더 붙게 */
.bowl-marker:not(.has-photo) .marker-badges,
.bowl-marker.photo-failed .marker-badges { top: 13px; left: 45px; }
.bowl-marker:not(.has-photo) .marker-badges:has(> :nth-child(2)),
.bowl-marker.photo-failed .marker-badges:has(> :nth-child(2)) { top: 14px; left: 39px; }

/* 그림 마커의 국밥 SVG가 z-index 200이라 배지가 뒤에 깔렸음 → 배지를 맨 앞으로 */
.bowl-marker .marker-badges { z-index: 300; }

/* 지도 출처: 평소엔 작은 「i」 동그라미, 누르면 펼쳐짐 (OSM·OpenMapTiles 라이선스상 표시는 유지) */
.leaflet-control-attribution.is-compact {
  position: relative;
  cursor: pointer;
  margin: 0 14px 6px 0 !important;
  padding: 2px 8px !important;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm);
}
.leaflet-control-attribution.is-compact:not(.is-open) {
  width: 24px;
  height: 24px;
  padding: 0 !important;
  overflow: hidden;
  font-size: 0;
  color: transparent;
}
.leaflet-control-attribution.is-compact:not(.is-open)::before {
  content: 'i';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 13px/1 Georgia, serif;
  color: var(--ink);
}
.leaflet-control-attribution.is-compact:not(.is-open) a { pointer-events: none; }

/* ---------- 목록: 한글 상호 오른쪽의 작은 수상 스티커 ---------- */
.li-ko-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.mini-stickers { display: inline-flex; align-items: center; gap: 2px; }
.mini-sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #fff, 1px 2px 0 rgba(36, 21, 13, 0.3);
  transform: rotate(var(--tilt));
  line-height: 1;
}
.mini-sticker b { font-size: 10px; }
.mini-sticker span { font-size: 7.5px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mini-m { background: #c8102e; }
.mini-b { background: #1f5fcf; }
.mini-r { background: #d7263d; }

/* 모달: 휴대폰의 100vh는 주소창·툴바까지 포함해 실제 화면보다 커서 위아래 테두리가 잘림
   → 실제 보이는 높이(dvh)와 노치·홈바 여백 기준으로 제한하고, 내용은 카드 안에서 스크롤 */
.modal {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.modal-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  overscroll-behavior: contain;
}

/* 지도 출처 「i」: 더 작게(18px), 펼쳐도 링크가 아닌 일반 글자로 (터치하면 다시 접힘) */
.leaflet-control-attribution.is-compact { margin: 0 12px 6px 0 !important; border-width: 1.5px; box-shadow: none; }
.leaflet-control-attribution.is-compact:not(.is-open) { width: 18px; height: 18px; }
.leaflet-control-attribution.is-compact:not(.is-open)::before { font-size: 11px; }
.leaflet-control-attribution.is-compact.is-open { font-size: 10px; padding: 1px 7px !important; }
.leaflet-control-attribution.is-compact a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: inherit;
}

/* 지도 출처: 글씨 더 작게 + 반투명 (지도를 가리지 않게) */
.leaflet-control-attribution.is-compact {
  background: rgba(255, 248, 236, 0.45) !important;
  border-color: rgba(36, 21, 13, 0.3);
  color: rgba(36, 21, 13, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.leaflet-control-attribution.is-compact:not(.is-open)::before { font-size: 9px; color: rgba(36, 21, 13, 0.55); }
.leaflet-control-attribution.is-compact.is-open { font-size: 8px; line-height: 1.5; padding: 0 6px !important; }

/* 상세: 한글 상호 오른쪽 인스타그램 해시태그 버튼 */
.place-head .ko { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.insta-link {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-4deg);
  transition: transform 0.15s ease;
}
.insta-link .ico { width: 17px; height: 17px; stroke-width: 2.2; }
.insta-link:active { transform: rotate(-4deg) scale(0.9); }
@media (hover: hover) { .insta-link:hover { transform: rotate(3deg) scale(1.08); } }

/* ---------- 첫 방문 사용 안내: 실제 화면을 비추는 투어 ---------- */
.guide {
  position: fixed;
  inset: 0;
  z-index: 3000;
  animation: fade-in 0.2s ease-out;
}
.guide[hidden] { display: none; }
.guide.is-dim { background: rgba(36, 21, 13, 0.7); }
.guide.is-leaving { opacity: 0; transition: opacity 0.2s ease-in; }

/* 비추는 구멍: 바깥은 큰 그림자로 어둡게, 안은 실제 화면이 그대로 보임 */
.tour-spot {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid var(--orange);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 200vmax rgba(36, 21, 13, 0.7);
  cursor: pointer;
  transition: opacity 0.22s ease, scale 0.32s cubic-bezier(0.2, 1.45, 0.4, 1);
}
.tour-spot::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 3px solid var(--orange);
  border-radius: inherit;
  opacity: 0;
  animation: tour-pulse 1.8s ease-out 0.4s infinite;
}
@keyframes tour-pulse {
  0% { transform: scale(0.94); opacity: 0.9; }
  100% { transform: scale(1.14); opacity: 0; }
}
.tour-spot.is-off { opacity: 0; pointer-events: none; }
.guide.is-moving .tour-spot { opacity: 0; scale: 0.9; }
.guide.is-moving .tour-bubble { opacity: 0; }

.tour-bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: min(330px, calc(100vw - 24px));
  transition: opacity 0.18s ease;
}
.tour-card {
  padding: 14px 16px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.tour-card.pop { animation: card-pop 0.38s cubic-bezier(0.2, 1.45, 0.4, 1); }
.tour-arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: var(--paper);
  border: 3px solid var(--ink);
  transform: rotate(45deg);
}
.tour-bubble[data-side='below'] .tour-arrow { top: -9px; border-right: 0; border-bottom: 0; }
.tour-bubble[data-side='above'] .tour-arrow { bottom: -9px; border-left: 0; border-top: 0; }
.tour-bubble[data-side='none'] .tour-arrow { display: none; }

.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-skip {
  padding: 4px 2px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tour-card h2 { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 18px; line-height: 1.3; }
.tour-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #4a3326; }
.guide-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  font-size: 14px;
  color: var(--ink);
  background: var(--orange);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.tour-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 10px !important;
  padding: 8px 10px;
  font-size: 13px !important;
  background: var(--cream);
  border: 2px dashed var(--ink);
  border-radius: 12px;
}
.tour-note[hidden] { display: none; }
.tour-note .ico { width: 16px; height: 16px; margin-top: 2px; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.guide-today { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.guide-today input {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  cursor: pointer;
}
.guide-today input:checked { background: var(--orange); }
.guide-today input:checked::after { content: ''; width: 6px; height: 11px; margin-top: -3px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.guide-today input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.tour-next { width: auto; min-width: 104px; min-height: 44px; padding-inline: 16px; background: var(--paper); }
.tour-next.is-go { background: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .tour-spot::after, .tour-card.pop { animation: none; }
  .tour-spot { transition: none; }
}

/* 상세: 인스타그램 옆 공유 버튼 (같은 크기·기울기의 짝) */
.share-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ink);
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  transform: rotate(3deg);
  transition: transform 0.15s ease;
}
.share-btn .ico { width: 17px; height: 17px; stroke-width: 2.3; }
.share-btn:active { transform: rotate(3deg) scale(0.9); }
.share-btn:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 2px; }
@media (hover: hover) { .share-btn:hover { transform: rotate(-3deg) scale(1.08); } }