/* ─────────────────────────────────────────────────────────────
   노포지도 — 모바일 우선 근접 탐색
   지도가 화면 전체, 아래에서 시트가 올라오고, 목록은 지도 중심에서
   가까운 순. 필터·범례 없음. 한 손으로 쓰는 것을 전제로 한다.
   ───────────────────────────────────────────────────────────── */
:root{
  --ground:#E9E7E2; --panel:#FCFBF9; --surface-2:#F3F1ED; --surface-3:#E4E1D9;
  --ink:#1C1A17; --ink-2:#4A463F; --ink-3:#7A756C;
  --line:#DAD6CE; --line-2:#E8E5DE;
  --accent:#8A6516; --accent-tint:#EFE5CC;
  --me:#2E6FD9; --me-soft:rgba(46,111,217,.16);
  --pin:#8A6516; --pin-ring:#FCFBF9;
  --danger:#A33A2A;
  --sh-1:0 1px 2px rgba(28,26,23,.08), 0 6px 18px -12px rgba(28,26,23,.3);
  --sh-2:0 -2px 8px rgba(28,26,23,.06), 0 -14px 40px -18px rgba(28,26,23,.35);
  --sans:"Gothic A1",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Song Myung","Apple SD Gothic Neo",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --peek:132px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14130F; --panel:#1C1B17; --surface-2:#24231E; --surface-3:#2E2C25;
    --ink:#EDEAE2; --ink-2:#B3ADA0; --ink-3:#817B6E;
    --line:#33312A; --line-2:#26241F;
    --accent:#D5AC55; --accent-tint:#38301C;
    --me:#6FA0F5; --me-soft:rgba(111,160,245,.2);
    --pin:#D5AC55; --pin-ring:#14130F;
    --danger:#E08A78;
    --sh-1:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.8);
    --sh-2:0 -2px 8px rgba(0,0,0,.4), 0 -14px 40px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#14130F; --panel:#1C1B17; --surface-2:#24231E; --surface-3:#2E2C25;
  --ink:#EDEAE2; --ink-2:#B3ADA0; --ink-3:#817B6E;
  --line:#33312A; --line-2:#26241F;
  --accent:#D5AC55; --accent-tint:#38301C;
  --me:#6FA0F5; --me-soft:rgba(111,160,245,.2);
  --pin:#D5AC55; --pin-ring:#14130F;
  --danger:#E08A78;
  --sh-1:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.8);
  --sh-2:0 -2px 8px rgba(0,0,0,.4), 0 -14px 40px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
body{
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

#map{position:fixed; inset:0; background:var(--surface-3)}
.leaflet-container{font-family:var(--sans); background:var(--surface-3)}
.leaflet-control-attribution{font-size:9.5px; opacity:.8}
.leaflet-control-zoom{display:none}          /* 모바일에선 핀치로 충분 */

/* ── 상단 타이틀 ─────────────────────────── */
.topbar{
  position:fixed; z-index:600; left:12px; right:12px;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:11px 16px; box-shadow:var(--sh-1); pointer-events:none;
}
.topbar h1{
  margin:0; font-family:var(--serif); font-weight:400; font-size:19px;
  letter-spacing:.05em; line-height:1.2;
}
.topbar p{margin:2px 0 0; font-size:11.5px; color:var(--ink-3)}

/* ── 내 위치 버튼 ────────────────────────── */
.locate{
  position:fixed; z-index:620; right:14px;
  bottom:calc(var(--peek) + var(--safe-b) + 16px);
  width:54px; height:54px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--sh-1); display:grid; place-items:center;
  transition:bottom .26s cubic-bezier(.32,.72,0,1);
}
.locate svg{width:25px; height:25px; stroke:var(--ink-2); stroke-width:1.9;
  fill:var(--ink-2); stroke-linecap:round}
.locate[data-on="true"] svg{stroke:var(--me); fill:var(--me)}
.locate[data-busy="true"]{opacity:.6}
.locate[data-busy="true"] svg{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 바텀시트 ────────────────────────────── */
.sheet{
  position:fixed; z-index:640; left:0; right:0; bottom:0;
  background:var(--panel); border-top:1px solid var(--line);
  border-radius:18px 18px 0 0; box-shadow:var(--sh-2);
  display:flex; flex-direction:column;
  height:88dvh; max-height:88dvh;
  transform:translateY(calc(88dvh - var(--peek) - var(--safe-b)));
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  padding-bottom:var(--safe-b);
}
.sheet[data-snap="half"]{transform:translateY(46dvh)}
.sheet[data-snap="full"]{transform:translateY(0)}
.sheet[data-snap="half"] ~ .locate,
.sheet[data-snap="full"] ~ .locate{bottom:calc(46dvh + 16px)}

.grip{
  padding:9px 18px 12px; border-bottom:1px solid var(--line-2);
  flex:none; user-select:none; touch-action:none;
}
.grip .bar{
  display:block; width:38px; height:4px; border-radius:2px;
  background:var(--surface-3); margin:0 auto 10px;
}
.grip-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.grip-row h2{
  margin:0; font-family:var(--serif); font-weight:400; font-size:17px;
  letter-spacing:.03em;
}
.grip-count{
  font-family:var(--mono); font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.sheet-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0}
.sheet[data-snap="peek"] .sheet-body{overflow:hidden}

.list{margin:0; padding:0 0 24px; list-style:none}
.row{
  display:grid; grid-template-columns:62px 1fr; gap:0 14px; align-items:baseline;
  width:100%; text-align:left; padding:14px 18px; min-height:60px;
  border-bottom:1px solid var(--line-2);
}
.row:active{background:var(--surface-2)}
.row[aria-current="true"]{background:var(--accent-tint)}
.row .dist{
  font-family:var(--mono); font-size:13.5px; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.row .nm{font-size:15.5px; font-weight:500; line-height:1.35}
.row .sub{
  grid-column:2; font-size:12px; color:var(--ink-3); margin-top:3px;
}
.row .sub .age{font-family:var(--mono); color:var(--ink-2)}

.notice{
  margin:14px 18px 4px; padding:13px 15px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; color:var(--ink-2); line-height:1.6;
}
.notice b{color:var(--ink); font-weight:700; display:block; margin-bottom:3px}
.notice a{color:var(--accent); font-weight:500}
.notice.warn{border-color:var(--danger)}
.notice .act{
  display:inline-block; margin-top:9px; padding:9px 15px; border-radius:9px;
  background:var(--accent); color:var(--panel); font-size:13px; font-weight:700;
  text-decoration:none;
}
.empty{padding:36px 18px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* ── 핀 ─────────────────────────────────── */
.pin{
  border-radius:50%; background:var(--pin);
  box-shadow:0 0 0 2px var(--pin-ring), 0 1px 4px rgba(0,0,0,.35);
}
.pin.s{width:9px; height:9px}
.pin.m{width:13px; height:13px}
.pin.l{width:18px; height:18px; box-shadow:0 0 0 2.5px var(--pin-ring), 0 2px 6px rgba(0,0,0,.4)}
.pin.sel{outline:3px solid var(--accent); outline-offset:3px}
.me-dot{
  width:18px; height:18px; border-radius:50%; background:var(--me);
  box-shadow:0 0 0 3px var(--pin-ring), 0 0 0 10px var(--me-soft);
}
.cluster{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel); color:var(--ink);
  border:1.5px solid var(--accent); box-shadow:var(--sh-1);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.cluster b{font-family:var(--mono); font-size:14px; font-weight:500}
.cluster i{font-family:var(--mono); font-size:9.5px; font-style:normal; color:var(--accent)}

/* 줌이 깊어지면 핀이 개업 연도를, 더 깊어지면 상호까지 말한다 */
.chip{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  height:22px; padding:0 8px; border-radius:11px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--sh-1); font-variant-numeric:tabular-nums;
}
.chip b{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--accent)}
.chip span{
  font-size:11.5px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis;
}
.chip.wide{height:26px; padding:0 10px; border-radius:13px}
.chip.m{border-color:var(--accent)}
.chip.l{border-color:var(--accent); background:var(--accent-tint)}
.chip.l b{font-weight:500}
.chip.sel{outline:2.5px solid var(--accent); outline-offset:2px}

/* ── 상세 ────────────────────────────────── */
.detail{
  position:absolute; inset:0; background:var(--panel);
  border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  padding-bottom:var(--safe-b);
}
.detail[hidden]{display:none}
.detail-head{padding:16px 18px 14px; border-bottom:1px solid var(--line-2); flex:none}
.back{
  display:inline-flex; align-items:center; gap:7px; padding:6px 0;
  font-size:13.5px; color:var(--ink-3); min-height:38px;
}
.detail h3{
  margin:4px 0 0; font-family:var(--serif); font-weight:400; font-size:26px;
  line-height:1.28; text-wrap:balance;
}
.detail .sub{margin:7px 0 0; font-size:12.5px; color:var(--ink-3)}
.detail-body{flex:1; overflow-y:auto; padding:16px 18px 28px}

.stat{
  display:flex; gap:0; margin-bottom:18px; border-radius:12px; overflow:hidden;
  background:var(--accent-tint);
}
.stat div{flex:1; padding:13px 15px}
.stat div + div{border-left:1px solid var(--pin-ring)}
.stat .n{
  display:block; font-family:var(--mono); font-size:23px; font-weight:500;
  color:var(--accent); line-height:1.15; font-variant-numeric:tabular-nums;
}
.stat .k{display:block; font-size:11.5px; color:var(--ink-2); margin-top:2px}

.pending{
  border:1px dashed var(--line); border-radius:12px; padding:13px 15px;
  margin-bottom:16px; background:var(--surface-2);
}
.pending b{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:4px}
.pending p{margin:0; font-size:12px; color:var(--ink-3); line-height:1.6}
.ai{border:1px solid var(--line); border-radius:12px; padding:14px 15px;
  margin-bottom:16px; background:var(--surface-2)}
.ai b{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px}
.ai p{margin:0; font-size:14px; line-height:1.65}

.facts{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:0 0 20px;
  font-size:13.5px}
.facts dt{font-size:11.5px; color:var(--ink-3); padding-top:2px; white-space:nowrap}
.facts dd{margin:0; color:var(--ink-2)}

.acts{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.acts a{
  display:flex; align-items:center; justify-content:center; min-height:50px;
  border-radius:11px; text-decoration:none; font-size:14px; font-weight:700;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
}
.acts a.primary{background:var(--accent); border-color:var(--accent); color:var(--panel)}
.acts a.wide{grid-column:1 / -1}

/* ── 상세: 소개 · 순위 · 사실들 ─────────── */
.lead{
  margin:0 0 16px; font-size:15.5px; line-height:1.6; color:var(--ink);
}
.lead .auto{
  display:block; margin-top:6px; font-size:11px; color:var(--ink-3);
}
.ranks{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:20px}
.ranks div{
  padding:11px 13px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--line);
}
.ranks b{
  display:block; font-family:var(--mono); font-size:17px; font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.ranks span{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}
h4.sec{
  margin:0 0 10px; font-size:11.5px; font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; padding-bottom:7px; border-bottom:1px solid var(--line-2);
}
.facts.tight{margin-bottom:16px}
.facts .muted{color:var(--ink-3)}
.detail-body .facts{margin-bottom:22px}
.meta{
  margin:18px 0 0; font-size:10.5px; color:var(--ink-3); line-height:1.5;
  font-family:var(--mono); word-break:break-all;
}

/* ── 넓은 화면: 시트를 좌측 고정 패널로 ──── */
@media (min-width:900px){
  :root{--peek:0px}
  .sheet{
    left:0; right:auto; top:0; bottom:0; width:392px;
    height:100dvh; max-height:none; border-radius:0;
    border-top:0; border-right:1px solid var(--line);
    transform:none!important; box-shadow:var(--sh-1);
  }
  .sheet .grip{padding-top:18px; touch-action:auto; cursor:default}
  .sheet .grip .bar{display:none}
  .sheet[data-snap="peek"] .sheet-body{overflow-y:auto}
  .topbar{left:auto; right:16px; width:270px; top:16px}
  .locate{bottom:26px!important; right:16px}
  .detail{border-radius:0}
  .leaflet-control-zoom{display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}