:root {
        color-scheme: light dark;
        --bg: #FAF9F6;
        --surface: #ffffff;
        --surface-2: #F3F1EC;
        --ink: #1A1A1A;
        --ink-2: #55524C;
        --ink-3: #8F8B81;
        --line: #E7E3DA;
        --line-strong: #D6D1C5;
        --brand: #E4572E;
        --brand-hover: #C9481F;
        --brand-ink: #ffffff;
        --accent-soft: #FBEDE7;
        --warn-bg: #FBF3E4;
        --warn-ink: #7C5410;
        --warn-line: #EDDCBB;
        --stay: #E4572E;
        --food: #96762F;
        --park: #5F7161;
        --hospital: #C62F3B;
        --hospital-soft: #FAEAEA;
        --hospital-ink: #A92330;
        --emg: #C1272D;
        --chip-off-bg: #ffffff;
        --shadow: 0 10px 28px rgba(26, 26, 26, 0.14);
        --radius: 12px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #171512;
          --surface: #201D18;
          --surface-2: #26231D;
          --ink: #F2EFE9;
          --ink-2: #C7C2B8;
          --ink-3: #99948A;
          --line: #37332B;
          --line-strong: #4A463C;
          --brand: #EE6C3D;
          --brand-hover: #F2825A;
          --brand-ink: #ffffff;
          --accent-soft: #33231B;
          --warn-bg: #2C2413;
          --warn-ink: #EBCB8F;
          --warn-line: #57491F;
          --stay: #EE6C3D;
          --food: #C4A355;
          --park: #93A892;
          --hospital: #E85D66;
          --hospital-soft: #3A2023;
          --hospital-ink: #F2A6AC;
          --emg: #CE3B3B;
          --chip-off-bg: #201D18;
          --shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
        }
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
        background: var(--bg);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
      }

      /* ---------- hero header ---------- */
      header {
        background: var(--bg);
        color: var(--ink);
        padding: 22px 20px 20px;
        border-bottom: 1px solid var(--line);
      }
      .hero-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -0.02em;
        white-space: nowrap;
      }
      .brand .paw {
        width: 23px; height: 23px;
        display: grid; place-items: center;
        flex: none;
      }
      .brand .paw svg { width: 23px; height: 23px; fill: var(--brand); }
      .brand small {
        display: block;
        font-size: 11px;
        font-weight: 500;
        color: var(--ink-3);
        letter-spacing: 0;
      }
      .proto-badge {
        margin-left: auto;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink-3);
        white-space: nowrap;
      }
      .hero-title {
        margin: 22px 0 9px;
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.22;
      }
      .hero-sub {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--ink-2);
        max-width: 600px;
      }
      .hero-sub b { color: var(--ink); font-weight: 700; }
      .hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        margin-top: 16px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-2);
      }
      .hero-stats span { white-space: nowrap; }
      .hero-stats span + span::before {
        content: "·";
        margin-right: 8px;
        color: var(--ink-3);
      }

      /* ---------- toolbar ---------- */
      .toolbar {
        padding: 14px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        z-index: 5;
      }
      .search-box {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 0 12px;
        height: 46px;
      }
      .search-box:focus-within { border-color: var(--ink); }
      .search-box svg { width: 18px; height: 18px; fill: var(--ink-3); flex: none; }
      .search-box input {
        border: 0; outline: 0; background: transparent;
        font: inherit; font-size: 15px;
        color: var(--ink);
        width: 100%;
        min-width: 0;
      }
      .search-box input::placeholder { color: var(--ink-3); }
      .search-clear {
        border: 0; background: var(--surface-2); color: var(--ink-2);
        width: 24px; height: 24px; border-radius: 50%;
        font-size: 14px; line-height: 1; cursor: pointer; flex: none;
        display: none;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex: none;
      }
      .dot--stay { background: var(--stay); }
      .dot--food { background: var(--food); }
      .dot--park { background: var(--park); }
      .dot--hospital { background: var(--hospital); }
      .verify-badge {
        display: inline-flex; align-items: center;
        font-size: 11.5px; font-weight: 700;
        color: var(--hospital-ink);
        background: var(--hospital-soft);
        border-radius: 999px;
        padding: 2px 8px;
        white-space: nowrap;
      }
      .chip {
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 999px;
        padding: 8px 13px;
        cursor: pointer;
        border: 1px solid var(--line-strong);
        background: var(--chip-off-bg);
        color: var(--ink-2);
        display: inline-flex;
        align-items: center;
        gap: 7px;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      .chip .cnt {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-3);
      }
      .chip[aria-pressed="true"] {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--bg);
      }
      .chip[aria-pressed="true"] .cnt { color: inherit; opacity: 0.65; }

      /* ---------- main split ---------- */
      main {
        flex: none;
        height: 70dvh;
        display: flex;
        min-height: 0;
      }
      .map-wrap {
        position: relative;
        flex: 1;
        min-width: 0;
        background: var(--surface-2);
      }
      #map { position: absolute; inset: 0; z-index: 1; }
      .map-fallback {
        position: absolute; inset: 0;
        display: none;
        place-items: center;
        text-align: center;
        padding: 24px;
        color: var(--ink-2);
        font-size: 14px;
        line-height: 1.6;
      }
      body.no-map #map { display: none; }
      body.no-map .map-fallback { display: grid; }
      .leaflet-container { font: inherit; background: var(--surface-2); }
      .leaflet-tile-pane { filter: saturate(0.55) brightness(1.02); }
      .mpin-icon { background: transparent; border: 0; }
      .mpin {
        width: 16px; height: 16px; border-radius: 50%;
        border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.35); cursor: pointer;
      }
      .mpin--stay { background: var(--stay); }
      .mpin--food { background: var(--food); }
      .mpin--park { background: var(--park); }
      .mpin--hospital { background: var(--hospital); }
      .cluster-icon { background: transparent; border: 0; }
      .mcluster {
        border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.35);
        background: var(--ink); color: var(--bg);
        display: grid; place-items: center; font-weight: 800; letter-spacing: -0.01em; cursor: pointer;
      }
      .mcluster--s { width: 34px; height: 34px; font-size: 12.5px; }
      .mcluster--m { width: 42px; height: 42px; font-size: 13.5px; background: var(--brand); color: #fff; }
      .mcluster--l { width: 50px; height: 50px; font-size: 14.5px; background: var(--brand); color: #fff; }

      /* ---------- detail page (#/place/{id}) ---------- */
      .page-detail {
        display: none;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg);
      }
      body.view-detail header,
      body.view-detail .toolbar,
      body.view-detail main { display: none; }
      body.view-detail .page-detail { display: block; }
      .pd-inner {
        max-width: 720px;
        margin: 0 auto;
        padding: 16px 16px 32px;
      }
      .pd-back {
        font: inherit;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ink-2);
        background: var(--surface);
        border: 1.5px solid var(--line);
        border-radius: 999px;
        padding: 8px 14px;
        cursor: pointer;
      }
      .pd-back:hover { border-color: var(--line-strong); color: var(--ink); }
      .pd-photo {
        margin-top: 14px;
        height: 210px;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        background: var(--surface-2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .pd-photo-paw { width: 84px; height: 84px; fill: var(--line-strong); opacity: 0.55; }
      .pd-photo-cap { font-size: 12px; font-weight: 600; color: var(--ink-3); }
      .pd-title {
        margin: 18px 0 8px;
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.3;
      }
      .pd-card {
        margin-top: 14px;
        background: var(--surface);
        border: 1.5px solid var(--line);
        border-radius: var(--radius);
        padding: 8px 16px;
      }
      .pd-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 9px 0;
        font-size: 14.5px;
      }
      .pd-row + .pd-row { border-top: 1px solid var(--line); }
      .pd-row dt { color: var(--ink-3); font-weight: 700; flex: none; width: 72px; padding-top: 1px; }
      .pd-row dd { margin: 0; color: var(--ink); line-height: 1.5; flex: 1; min-width: 0; }
      .pd-row dd a { color: var(--brand); font-weight: 700; text-decoration: none; }
      .copy-btn {
        font: inherit;
        flex: none;
        font-size: 12px;
        font-weight: 700;
        color: var(--brand);
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 5px 10px;
        cursor: pointer;
      }
      .copy-btn:active { filter: brightness(0.95); }
      .pd-sec-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 9px; }
      .pd-warn {
        margin-top: 12px;
        background: var(--warn-bg);
        border: 1px solid var(--warn-line);
        color: var(--warn-ink);
        border-radius: 12px;
        padding: 11px 13px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.55;
      }
      .pd-map {
        height: 220px;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        overflow: hidden;
        z-index: 1;
        background: var(--surface-2);
      }
      .pd-dir {
        display: inline-block;
        margin-top: 10px;
        font: inherit;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--brand);
        text-decoration: none;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        text-align: left;
      }
      .pd-dir:hover { color: var(--brand-hover); }
      .pd-nearby { display: grid; gap: 8px; }
      .near-card {
        display: flex;
        gap: 11px;
        align-items: flex-start;
        background: var(--surface);
        border: 1.5px solid var(--line);
        border-radius: var(--radius);
        padding: 12px 13px;
        text-decoration: none;
        color: inherit;
      }
      .near-card:hover { border-color: var(--line-strong); }
      .near-dist {
        margin-left: auto;
        flex: none;
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-2);
        background: var(--surface-2);
        border-radius: 999px;
        padding: 3px 9px;
      }

      .badge {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 600;
        color: var(--ink-2);
        vertical-align: 2px;
      }
      .call-btn {
        display: block;
        margin-top: 12px;
        background: var(--brand);
        color: #fff;
        text-align: center;
        font-size: 14.5px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 12px;
        padding: 12px 14px;
      }
      .call-btn:active { filter: brightness(0.92); }
      .call-btn--emg { background: var(--emg); }
      .pd-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
      .pd-actions .site-btn { font: inherit; cursor: pointer; }
      .pd-actions .call-btn { margin-top: 0; flex: 1; }
      .site-btn {
        display: block;
        flex: 1;
        background: var(--surface);
        color: var(--ink);
        border: 1.5px solid var(--line-strong);
        text-align: center;
        font-size: 14.5px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 12px;
        padding: 12px 14px;
      }
      .site-btn:hover { border-color: var(--ink); }
      .site-btn:active { filter: brightness(0.97); }

      /* ---------- list panel ---------- */
      aside {
        width: 372px;
        flex: none;
        border-left: 1px solid var(--line);
        background: var(--bg);
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .list-head {
        padding: 14px 20px 4px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-2);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .list-head b { color: var(--ink); font-size: 14.5px; }
      .list {
        overflow-y: auto;
        padding: 0 20px 16px;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
      }
      .region-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: baseline;
        gap: 8px;
        background: var(--bg);
        padding: 18px 2px 8px;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .region-head:first-child { padding-top: 6px; }
      .region-head .rcount {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-3);
      }
      .place-row {
        text-align: left;
        font: inherit;
        text-decoration: none;
        color: inherit;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        padding: 13px 2px;
        cursor: pointer;
        display: flex;
        gap: 11px;
        width: 100%;
      }
      .place-row:hover { background: var(--surface); }
      .near-card .dot { margin-top: 7px; }
      .row-body { min-width: 0; flex: 1; }
      .row-top {
        display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
      }
      .row-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
      .row-addr {
        margin-top: 4px;
        font-size: 12.5px;
        color: var(--ink-2);
        line-height: 1.45;
      }
      .row-meta {
        margin-top: 5px;
        font-size: 12.5px;
        color: var(--ink-3);
        display: flex; gap: 10px; flex-wrap: wrap;
      }
      /* ---------- 페이지 번호 ---------- */
      .pager { margin-top: 18px; }
      .pager-info {
        text-align: center;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-3);
        margin-bottom: 10px;
      }
      .pager-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        align-items: center;
      }
      .pager-btn {
        font: inherit;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ink-2);
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        cursor: pointer;
      }
      .pager-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
      .pager-btn.is-current {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--bg);
        cursor: default;
      }
      .pager-btn:disabled { opacity: 0.4; cursor: default; }
      .pager-ellipsis {
        color: var(--ink-3);
        font-size: 13px;
        padding: 0 2px;
      }
      .list-msg {
        padding: 30px 18px;
        text-align: center;
        color: var(--ink-3);
        font-size: 14px;
        line-height: 1.7;
      }
      .empty {
        padding: 34px 18px;
        text-align: center;
        color: var(--ink-3);
        font-size: 14px;
        line-height: 1.7;
        display: none;
      }
      .empty.show { display: block; }

      footer {
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        font-size: 11.5px;
        color: var(--ink-3);
        background: var(--bg);
        border-top: 1px solid var(--line);
        text-align: center;
        line-height: 1.5;
      }

      /* ---------- mobile ---------- */
      @media (max-width: 840px) {
        /* 모바일은 고정 셸 대신 페이지 전체가 스크롤되는 흐름:
           지도 아래로 내리면 업체 목록이 그대로 이어진다 */
        body { height: auto; overflow: visible; }
        main { flex-direction: column; flex: none; height: auto; }
        .map-wrap { flex: none; height: 62vh; height: 62dvh; }
        aside {
          width: auto;
          flex: none;
          border-left: 0;
          border-top: 1px solid var(--line);
          min-height: 0;
        }
        .list { overflow-y: visible; }
        .brand { font-size: 19px; }
        .brand small { display: none; }
        header { padding: 18px 16px 16px; }
        .toolbar { padding: 12px 16px; }
        .list { padding: 0 16px 14px; }
        .list-head { padding: 12px 16px 4px; }
        .hero-title { font-size: 25px; margin-top: 16px; }
        .hero-sub { font-size: 13px; }
        .page-detail { overflow-y: visible; }
        .pd-photo { height: 168px; }
        .pd-title { font-size: 23px; }
      }
      /* 목록 행 안의 바로 전화 버튼 (상세페이지 없이 1~2탭에 통화) */
      .row-main {
        flex: 1;
        min-width: 0;
        display: flex;
        gap: 11px;
        text-decoration: none;
        color: inherit;
      }
      .row-call {
        flex: none;
        align-self: center;
        background: var(--emg);
        color: #fff;
        font-size: 13.5px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 999px;
        padding: 10px 15px;
        white-space: nowrap;
      }
      .row-call:active { filter: brightness(0.9); }
      .verify-badge--wide { white-space: normal; line-height: 1.45; text-align: left; }

      /* ---------- toast ---------- */
      .toast {
        position: fixed;
        left: 50%;
        bottom: calc(22px + env(safe-area-inset-bottom));
        transform: translateX(-50%) translateY(16px);
        z-index: 1200;
        max-width: min(92vw, 480px);
        background: var(--ink);
        color: var(--bg);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        border-radius: 12px;
        padding: 12px 18px;
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s, transform 0.25s;
      }
      .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

      /* ---------- directions sheet ---------- */
      .sheet-backdrop {
        position: fixed; inset: 0;
        z-index: 1100;
        background: rgba(20, 18, 14, 0.45);
        display: none;
        align-items: flex-end;
        justify-content: center;
      }
      .sheet-backdrop.open { display: flex; }
      .sheet {
        background: var(--surface);
        width: 100%;
        max-width: 520px;
        border-radius: 18px 18px 0 0;
        padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
        box-shadow: var(--shadow);
      }
      .sheet-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
      .sheet-sub { margin-top: 4px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
      .sheet-btn {
        display: block;
        margin-top: 10px;
        background: var(--surface-2);
        color: var(--ink);
        border: 1px solid var(--line);
        text-align: center;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        border-radius: 12px;
        padding: 13px 14px;
        cursor: pointer;
        font-family: inherit;
        width: 100%;
      }
      .sheet-btn:active { filter: brightness(0.96); }
      .sheet-cancel {
        display: block;
        width: 100%;
        margin-top: 10px;
        font: inherit;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink-2);
        background: transparent;
        border: 0;
        padding: 10px;
        cursor: pointer;
      }
      @media (min-width: 841px) {
        .sheet-backdrop { align-items: center; padding: 20px; }
        .sheet { border-radius: 18px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .chip { transition: none; }
        .toast { transition: none; }
      }