/* =============================================================
   urdy theme — Material + Apple(Cupertino) fusion
   ============================================================= */

/* ============ Custom Font ============ */
/* 말랑이체 @font-face 는 common.css 로 이동(전 페이지 공용). */

/* ============ Tokens ============ */
:root {
    --blue-50:  #eef5ff;
    --blue-100: #d9e8ff;
    --blue-200: #b7d1ff;
    --blue-300: #7eaeff;
    --blue-500: #2f7bff;
    --blue-600: #1f63e0;
    --blue-700: #154db1;
    --ink-900:  #0f1422;
    --ink-700:  #2d3344;
    --ink-500:  #6b7280;
    --ink-400:  #9aa1ad;
    --ink-300:  #d1d5db;
    --ink-200:  #e7ebf2;
    --ink-100:  #f3f5f9;
    --ink-50:   #f9fbfd;
    --bg:       #f4f7fb;
    --card:     #ffffff;
    --danger:   #ff4757;
    --warn:     #ff9f43;
    --ok:       #1aa564;

    --shadow-xs: 0 1px 1px rgba(20, 30, 60, .04);
    --shadow-sm: 0 2px 6px rgba(20, 30, 60, .06);
    --shadow-md: 0 8px 22px rgba(20, 30, 60, .09);
    --shadow-lg: 0 22px 50px rgba(20, 30, 60, .18);
    --shadow-blue: 0 6px 18px rgba(47, 123, 255, .35);
    /* 떠있는 액션 버튼용 — key light + ambient 멀티 레이어로 입체감 */
    --shadow-fab:        0 6px 16px rgba(20, 30, 60, .18), 0 2px 5px rgba(20, 30, 60, .12);
    --shadow-fab-hover:  0 10px 24px rgba(20, 30, 60, .22), 0 3px 8px rgba(20, 30, 60, .14);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --ease-out:  cubic-bezier(.2, .8, .25, 1);     /* iOS spring */
    --ease-soft: cubic-bezier(.4, 0, .2, 1);       /* Material standard */

    --blur: saturate(180%) blur(20px);

    --t-fast: 120ms;
    --t-med:  220ms;
    --t-slow: 360ms;

    /* 모바일 bottom-nav 높이 — 데스크탑에선 0 으로 동작. 모바일 미디어쿼리에서 값 부여. */
    --nav-h: 0px;

    font-family: -apple-system, BlinkMacSystemFont, 'Pretendard',
                 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ Reset (공통 리셋·박스사이징·탭하이라이트는 common.css) ============ */
html, body { height: 100%; background: var(--bg); }
button { border: 0; background: none; color: inherit; }   /* font-family/cursor 는 common.css */
/* 키보드 포커스만 outline 유지 (마우스 클릭/터치 시 outline 안 보이게) */
button:focus { outline: none; }

/* 터치 환경 hover(transform/filter) 무력화 블록은 파일 끝으로 이동 —
   transform/filter 를 거는 hover 규칙들 '뒤'에 두어 같은 specificity 에서 나중 규칙으로 이김(!important 불필요). */
button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; border-radius: var(--radius-sm); }
/* .hidden / .u-visually-hidden 는 common.css 로 이동 */

/* =============================================================
   COMMON UTILITY CLASSES — 어디서든 import 해서 사용
   ============================================================= */

/* ---------- u-btn ---------- */
.u-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    font-size: 14px; font-weight: 600;
    border-radius: var(--radius-md);
    background: var(--ink-100);
    color: var(--ink-700);
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.u-btn:hover  { background: var(--ink-200); transform: translateY(-1px); }
.u-btn:active { transform: scale(.97); }

.u-btn--primary {
    background: var(--blue-500); color: white;
    box-shadow: var(--shadow-blue);
}
.u-btn--primary:hover { background: var(--blue-600); }

.u-btn--ghost {
    background: transparent; color: var(--ink-700);
    box-shadow: inset 0 0 0 1px var(--ink-200);
}
.u-btn--ghost:hover { background: var(--ink-50); }

.u-btn--pill  { border-radius: var(--radius-pill); padding: 8px 16px; }
.u-btn--block { width: 100%; }
.u-btn--lg    { padding: 14px 20px; font-size: 15px; }
.u-btn--sm    { padding: 6px 12px; font-size: 12px; }
.u-btn:disabled { background: var(--ink-200); color: var(--ink-400); cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- u-card ---------- */
.u-card {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--ink-100);
    padding: 16px;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-soft);
}
.u-card--interactive { cursor: pointer; }
.u-card--interactive:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.u-card--interactive:active { transform: translateY(0);    box-shadow: var(--shadow-sm); }

/* ---------- u-gauge ---------- */
.u-gauge {
    background: var(--ink-100); height: 8px; border-radius: var(--radius-pill); overflow: hidden;
}
.u-gauge__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-300), var(--blue-500));
    border-radius: var(--radius-pill);
    transition: width var(--t-slow) var(--ease-out);
}
.u-gauge__fill--taste   { background: linear-gradient(90deg, #ff8e6b, #ff4757); }
.u-gauge__fill--service { background: linear-gradient(90deg, #76d3a4, #1aa564); }

/* ---------- u-badge ---------- */
.u-badge {
    font-size: 11px; padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--blue-50); color: var(--blue-700); font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.u-badge--alt { background: #fff4e6; color: #b65a00; }

/* ---------- u-segmented (iOS segmented control) ---------- */
.u-segmented {
    --seg-idx: 0;
    --seg-count: 3;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--seg-count), 1fr);
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    padding: 4px;
    box-shadow: inset 0 0 0 1px var(--ink-200);
}
.u-segmented__indicator {
    position: absolute;
    top: 4px; bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--seg-count));
    background: white;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transform: translateX(calc(var(--seg-idx) * 100%));
    transition: transform var(--t-slow) var(--ease-out);
    pointer-events: none;
}
.u-segmented__item {
    position: relative; z-index: 1;
    padding: 9px 0;
    font-size: 13px; font-weight: 600;
    color: var(--ink-500);
    transition: color var(--t-med) var(--ease-soft);
}
.u-segmented__item.is-active { color: var(--blue-600); }
.u-segmented__item:hover     { color: var(--ink-700); }
.u-segmented__item.is-active:hover { color: var(--blue-700); }

/* ---------- u-chip (가로 슬라이드 칩) ---------- */
.u-chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: white;
    color: var(--ink-700);
    font-size: 13px; font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--ink-200);
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                box-shadow var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-out);
}
.u-chip:hover  { background: var(--ink-50); transform: translateY(-1px); }
.u-chip:active { transform: scale(.96); }
.u-chip.is-active {
    background: var(--blue-500); color: white;
    box-shadow: var(--shadow-blue);
}
.u-chip.is-active:hover { background: var(--blue-600); }

/* ---------- u-scroll (공통 스크롤 스타일) ---------- */
.u-scroll-y { overflow-y: auto; overflow-x: hidden; }
.u-scroll-x { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.u-scroll-x::-webkit-scrollbar { display: none; }

.u-scroll-y::-webkit-scrollbar         { width: 8px; }
.u-scroll-y::-webkit-scrollbar-track   { background: transparent; }
.u-scroll-y::-webkit-scrollbar-thumb   { background: var(--ink-200); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }
.u-scroll-y::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; border: 2px solid transparent; }
.u-scroll-y { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }

/* fade-mask: 가로 스크롤 우측 끝에 그라데이션 마스크 */
.u-fade-x  { mask-image: linear-gradient(90deg, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, black 92%, transparent); }

/* ---------- u-skeleton ---------- */
.u-skeleton {
    background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-50) 50%, var(--ink-100) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- intro 오버레이 — "어디보자" 채움 버퍼링 ---------- */
#intro-bg {
    position: fixed; inset: 0; z-index: 498;
    background: radial-gradient(ellipse 70% 50% at 50% 40%, #0E1420 0%, #06090F 100%);
    transition: opacity .55s ease;
}
#intro-overlay {
    position: fixed; inset: 0; z-index: 499;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    transition: opacity .55s ease;
}
/* soft — "이 지역 식당 불러오기" 같은 가벼운 액션에서 사용.
   어두운 배경을 옅게 깔아 지도가 살짝 비치고, 글자는 또렷하게 유지. */
#intro-bg.is-soft     { opacity: .55; }
#intro-overlay.is-soft { opacity: .92; }

/* visible 일 때만 클릭/드래그 차단. gone 이면 통과시켜야 지도 인터랙션 복귀.
   ⚠ 순서 중요 — .is-soft 보다 뒤에 와야 둘 다 있을 때 opacity:0 가 이김. */
#intro-bg.gone, #intro-overlay.gone { opacity: 0; pointer-events: none; }

/* "어디보자" 글자에 파란 그라데이션이 좌→우로 스윕되는 fill 인디케이터.
   background-clip: text 로 글자 모양에 그라데이션이 적용되고,
   background-position 으로 2배 폭 그라데이션을 슬라이드. */
.brand-fill {
    font-family: 'GeekbleMalrangiche', system-ui, -apple-system, 'Pretendard', sans-serif;
    font-size: 40px; font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    background: linear-gradient(to right,
        var(--blue-300) 0%,
        var(--blue-500) 48%,
        rgba(255, 255, 255, .18) 52%,
        rgba(255, 255, 255, .18) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: brandFill 2.6s ease-out infinite;
}
@keyframes brandFill {
    0%   { background-position: 100% 0; }   /* 시작: 텍스트가 faded — 그라데이션 오른쪽 절반 노출 */
    100% { background-position: 0%   0; }   /* 종료: 텍스트가 blue — 그라데이션 왼쪽 절반 노출 */
}

#intro-text {
    font-size: 15px; font-weight: 600;
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
    min-height: 22px;
}
.intro-out { animation: intro-down-out .35s var(--ease-out) forwards; }
.intro-in  { animation: intro-down-in  .45s var(--ease-out) forwards; }
@keyframes intro-down-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(22px); }
}
@keyframes intro-down-in {
    0%   { opacity: 0; transform: translateY(-22px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- u-sheet (공통 bottom-sheet / 데스크탑 모달) ----------
   데스크탑: 화면 중앙 모달처럼.
   모바일(<=480px): 화면 하단에서 슬라이드 업, 둥근 상단 모서리.
   사용:
     <div class="u-sheet-backdrop" id="x">
       <div class="u-sheet">
         <div class="u-sheet__handle"></div>      <!-- 모바일 손잡이 -->
         <div class="u-sheet__head">…</div>
         <div class="u-sheet__body u-scroll-y">…</div>
         <div class="u-sheet__foot">…</div>
       </div>
     </div>
*/
.u-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 50, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 400;     /* bottom-nav(280) / 디테일(220) / 패널(200) 모두 위로 */
    animation: fade-in var(--t-fast) var(--ease-soft);
}
.u-sheet {
    width: min(420px, 92vw);
    max-height: 86vh;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: modal-rise var(--t-med) var(--ease-out);
}
.u-sheet__handle { display: none; }              /* 데스크탑에선 숨김 */
.u-sheet__head {
    padding: 20px 22px 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    min-height: 32px;
}
.u-sheet__head h2 {
    margin: 0;
    font-size: 17px; font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    flex: 1; min-width: 0;
}
.u-sheet__close {
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 22px; color: var(--ink-500);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
    margin: -4px -6px -4px 0;     /* 시각적 정렬 보정 — 텍스트 baseline 과 맞춤 */
}
.u-sheet__close:hover { background: var(--ink-100); color: var(--ink-900); }
.u-sheet__body {
    padding: 4px 22px 14px;
    overflow-y: auto; overflow-x: hidden;
    flex: 1;
    /* 공통 스크롤 (u-scroll-y) 그대로 적용 */
    scrollbar-width: thin;
    scrollbar-color: var(--ink-200) transparent;
}
.u-sheet__body::-webkit-scrollbar         { width: 8px; }
.u-sheet__body::-webkit-scrollbar-track   { background: transparent; }
.u-sheet__body::-webkit-scrollbar-thumb   { background: var(--ink-200); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }
.u-sheet__body::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; border: 2px solid transparent; }

/* ---------- u-check (공통 체크 비주얼) ----------
   부모에 .is-picked 또는 .picked 가 붙으면 활성 상태로 전환.
   사용: <span class="u-check"><svg>체크 SVG</svg></span>
*/
.u-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ink-300);
    background: white; color: white;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.u-check svg {
    width: 12px; height: 12px;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.is-picked > .u-check,
.is-picked .u-check,
.picked    > .u-check,
.picked    .u-check,
.u-check.is-on {
    background: var(--blue-500);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 2px white;     /* 컬러 배경 위에서도 명확히 떠 보임 */
}
.is-picked > .u-check svg,
.is-picked .u-check svg,
.picked    > .u-check svg,
.picked    .u-check svg,
.u-check.is-on svg { opacity: 1; }
.u-sheet__foot {
    padding: 12px 22px 18px;
    border-top: 1px solid var(--ink-100);
    background: rgba(255,255,255,.92);
    flex-shrink: 0;
    display: flex; gap: 10px;
}
.u-sheet__foot .btn-primary,
.u-sheet__foot .btn-ghost { flex: 1; margin: 0; }

/* 로그인 유도 시트 — 인라인 style 제거분 */
.login-redirect { text-align: center; padding: 32px 24px; }
.login-redirect__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.login-redirect__sub { margin: 0 0 24px; font-size: 14px; color: var(--ink-500); }
.login-redirect__actions { display: flex; flex-direction: column; gap: 10px; }
.login-redirect__actions .btn-primary,
.login-redirect__actions .btn-ghost { width: 100%; }

@keyframes sheet-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: none;             opacity: 1; }
}

/* ---------- u-modal ---------- */
.u-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 50, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: fade-in var(--t-fast) var(--ease-soft);
}
.u-modal {
    width: min(460px, 92vw);
    max-height: 88vh;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    position: relative;
    animation: modal-rise var(--t-med) var(--ease-out);
    display: flex; flex-direction: column;
}
/* (legacy) u-modal 잔여 — 점진적으로 u-sheet 로 마이그레이션 중 */
.u-modal__body { flex: 1 1 auto; overflow-y: auto; margin: 0 -24px; padding: 0 24px; }
.u-modal__head { flex-shrink: 0; }
.u-modal > .btn-primary { flex-shrink: 0; margin-top: 16px; }
@keyframes modal-rise {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: none;                          opacity: 1; }
}
.u-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.u-modal__head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.u-modal__close { font-size: 22px; color: var(--ink-400); padding: 4px 8px; border-radius: var(--radius-sm); }
.u-modal__close:hover { background: var(--ink-100); color: var(--ink-700); }

/* =============================================================
   LAYOUT
   ============================================================= */
.app {
    position: relative;            /* detail-panel 절대좌표 기준 */
    display: flex; height: 100vh; width: 100vw;
    overflow: hidden;
}
.panel {
    width: 420px; min-width: 380px; background: var(--card);
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--ink-100);
    z-index: 3;                     /* 디테일 패널보다 위 */
    position: relative;
}
.panel-handle { display: none; }   /* 데스크탑에선 핸들 숨김. 모바일 미디어쿼리에서 노출 */
.map-area { flex: 1; position: relative; background: var(--ink-100); }
#map { width: 100%; height: 100%; }

/* ============ "이 지역 총 N개" 카운트 배지 (지도 상단 중앙) ============ */
.area-count-badge {
    position: absolute;
    top: 22px; left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.6);
    font-size: 13px; font-weight: 600;
    color: var(--ink-700);
    z-index: 4;
    pointer-events: none;
    animation: fade-in .25s var(--ease-soft);
}
.area-count-badge b { color: var(--blue-600); font-weight: 700; font-size: 14px; margin: 0 2px; }

/* ============ Header chips (지도 상단) — 원형 아이콘 버튼, 하단 FAB 과 통일 ============ */
.map-header {
    position: absolute; top: 16px; right: 16px;
    display: flex; gap: 8px; z-index: 5;
}
.chip {
    width: 44px; height: 44px;
    padding: 0; border-radius: 50%;
    background: white; color: var(--blue-600);
    box-shadow: var(--shadow-fab), inset 0 0 0 1px rgba(255,255,255,.7);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-soft),
                background var(--t-fast),
                color var(--t-fast);
    position: relative;
    flex-shrink: 0;
}
.chip svg { width: 20px; height: 20px; }
/* 프로필 사진 chip — overflow:hidden 안 줌 (tooltip 잘림 방지). img 자체에 border-radius 로 동그랗게. */
.chip--avatar { padding: 0; }
.chip__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.chip:hover  { transform: translateY(-2px); box-shadow: var(--shadow-fab-hover), inset 0 0 0 1px rgba(255,255,255,.7); }
.chip:active { transform: scale(.92); }
.chip.primary { background: var(--blue-500); color: white; box-shadow: var(--shadow-blue); }
.chip.primary:hover { background: var(--blue-600); }

/* 호버 시 라벨 — 아래쪽으로 펼침 (상단 영역이라) */
.chip[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--ink-900); color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 6px 10px; border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}
.chip[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Brand ============ */
.brand { padding: 22px 22px 14px; }
.brand img { height: 28px; }

/* ============ Tabs (segmented) ============ */
.tabs { padding: 0 20px 12px; }
/* .tabs > .u-segmented 사용 */

/* ============ Category strip ============ */
.cat-strip {
    display: flex; gap: 8px; padding: 4px 20px 14px;
    align-items: center;
}
.cat-strip .pin { flex: 0 0 auto; }
.cat-scroll { display: flex; gap: 8px; padding: 2px 4px 2px 0; }

/* ============ Sort row + 점수 범례 (한 라인) ============ */
.list-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 20px 14px;
}
.sort-row {
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    padding: 4px;
}
.sort-chip {
    padding: 7px 12px; font-size: 12px; font-weight: 600;
    color: var(--ink-500); border-radius: var(--radius-pill);
    transition: background var(--t-med) var(--ease-soft),
                color var(--t-med) var(--ease-soft);
}
.sort-chip:hover { color: var(--ink-700); }
.sort-chip.is-active { background: white; color: var(--blue-600); box-shadow: var(--shadow-xs); }

/* ============ Store list ============ */
.list-stack { flex: 1; position: relative; overflow: hidden; }
.list {
    position: absolute; inset: 0;
    padding: 6px 8px 22px;
    display: flex; flex-direction: column; gap: 0;
    transition: opacity var(--t-med) var(--ease-soft),
                transform var(--t-slow) var(--ease-out);
}
.list.flip-out-left  { opacity: 0; transform: translateX(-48px) rotateY(-4deg); }
.list.flip-out-right { opacity: 0; transform: translateX( 48px) rotateY( 4deg); }
.list.flip-in-left   { animation: flipInLeft  var(--t-slow) var(--ease-out) both; }
.list.flip-in-right  { animation: flipInRight var(--t-slow) var(--ease-out) both; }
@keyframes flipInLeft  { from { opacity: 0; transform: translateX( 48px) rotateY( 4deg); } to { opacity: 1; transform: none; } }
@keyframes flipInRight { from { opacity: 0; transform: translateX(-48px) rotateY(-4deg); } to { opacity: 1; transform: none; } }

.empty { text-align: center; color: var(--ink-400); padding: 48px 20px; font-size: 13px; }

/* ============ Store row (플랫 리스트) ============ */
.card {
    padding: 14px 14px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--t-fast) var(--ease-soft);
    position: relative;
}
.card:hover  { background: var(--ink-50); }
.card:active { background: var(--ink-100); }
.card + .card { box-shadow: inset 0 1px 0 var(--ink-100); }  /* hairline divider */
.card .top { display: flex; align-items: center; gap: 10px; }

/* 하트 — 8방향 미니 하트 퍼짐(on) / 모여듦(off) */
.heart {
    position: relative; z-index: 1;
    font-size: 18px; color: var(--ink-300);
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--t-fast);
    flex: 0 0 auto;
}
.heart:hover { color: var(--ink-500); }
.heart.on    { color: var(--danger); }
.heart .ico  { display: inline-block; transition: transform var(--t-fast); }
.heart.on .ico,
.heart.off-anim .ico { animation: ico-pop .4s var(--ease-out); }
@keyframes ico-pop {
    0%   { transform: scale(.85); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 8방향 미니 하트 파티클 */
.heart .p {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    font-size: 9px; line-height: 10px; text-align: center;
    pointer-events: none; opacity: 0;
}
.heart .p::before { content: '♥'; display: block; }

/* 활성화: 빨강 하트가 밖으로 퍼짐 */
.heart.on .p {
    color: var(--danger);
    animation: heart-spread .55s var(--ease-out);
}
@keyframes heart-spread {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(0)    scale(.5); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-18px) scale(.9); }
}

/* 해제: 어두운 하트가 안으로 모여듦 */
.heart.off-anim .p {
    color: var(--ink-500);
    animation: heart-converge .45s var(--ease-in);
}
@keyframes heart-converge {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(-18px) scale(.9); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(0)    scale(.4); }
}

.store-name { font-size: 15px; font-weight: 700; flex: 1; letter-spacing: -.01em; }
.match { font-size: 13px; font-weight: 700; color: var(--blue-600); }

/* ====== 점수 칩 (선호도 / 일치율) ======
   카드 우측 알약형. 아이콘 + 수치 + 호버/클릭 시 의미 툴팁. */
.score-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--ink-100); color: var(--ink-700);
    position: relative;
    transition: background var(--t-fast) var(--ease-soft);
    white-space: nowrap;
}
.score-pill[data-tip] { cursor: help; }
.score-pill--plain { cursor: default; }
.score-pill--plain:hover { background: inherit; }   /* hover 효과 제거 — 범례만 인터랙티브 */
.score-pill--plain.score-pill--personal:hover { background: #fff4e6; }
.score-pill--plain.score-pill--match:hover    { background: var(--blue-50); }

/* ====== 점수 범례 (정렬 우측, 한 번만 표시) ====== */
.score-legend { display: flex; gap: 6px; flex-shrink: 0; }
.score-legend .score-pill { font-size: 11px; padding: 4px 9px; }
.score-legend .score-pill svg { width: 12px; height: 12px; }
.score-pill:hover { background: var(--ink-200); }
.score-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.score-pill--personal { background: #fff4e6; color: #b65a00; }
.score-pill--personal:hover { background: #ffe9cf; }
.score-pill--match    { background: var(--blue-50); color: var(--blue-700); }
.score-pill--match:hover { background: var(--blue-100); }

/* 툴팁은 pill 아래로 — 상단에 있는 범례에서 잘리지 않게 */
.score-pill[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--ink-900); color: #fff;
    font-size: 11px; font-weight: 500; line-height: 1.55;
    padding: 7px 11px; border-radius: var(--radius-sm);
    white-space: pre-line; width: max-content; max-width: 220px;
    text-align: left; opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
    z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.score-pill[data-tip]::before {
    content: ''; position: absolute; top: calc(100% + 1px); left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent; border-bottom-color: var(--ink-900);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast); z-index: 50;
}
.score-pill[data-tip]:hover::after,
.score-pill[data-tip]:hover::before,
.score-pill.is-open::after,
.score-pill.is-open::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.score-pill.is-open::before { transform: translateX(-50%); }

/* 범례 툴팁(선호도/일치율)은 우측 정렬 — 오른쪽 끝 pill 에서 화면 밖으로 안 나가게 왼쪽으로 펼침.
   화살표(::before)는 pill 중앙 유지. (specificity 로 위 중앙정렬 규칙을 덮음) */
.score-legend .score-pill[data-tip]::after { left: auto; right: 0; transform: translateY(-4px); }
.score-legend .score-pill[data-tip]:hover::after,
.score-legend .score-pill.is-open::after { transform: translateY(0); }
.detail-match-row .score-pill { font-size: 14px; padding: 10px 14px; gap: 7px; }
.detail-match-row .score-pill svg { width: 16px; height: 16px; }
.detail-match-row .score-pill b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.detail-match-row .score-pill em { font-style: normal; font-size: 11px; opacity: .7; font-weight: 600; margin-left: 2px; }

.cats {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 12px; color: var(--ink-500); margin: 8px 0 12px;
}
.cats__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cats__rc { display: inline-flex; gap: 5px; flex-shrink: 0; }
.cats .sep { margin: 0 4px; color: var(--ink-300); }

/* 카드 우측 재방문 카운트 — 배경 없이 라벨(7일/30일) + 숫자.
   위쪽 점수칩(선호도/일치율)과 색이 겹쳐 혼동되던 문제 → 배경 제거하고 텍스트로만 표현. */
.retcount-chip {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 0; background: none; color: var(--ink-400);
    font-size: 11px; font-weight: 600;
    cursor: help; white-space: nowrap;
}
.retcount-chip + .retcount-chip { padding-left: 9px; border-left: 1px solid var(--ink-100); }
.retcount-chip__lbl { color: var(--ink-400); }
.retcount-chip b { font-size: 12px; font-weight: 700; color: var(--ink-700); letter-spacing: -.01em; }
.retcount-chip--alt { background: none; color: var(--ink-400); }

.gauges { display: grid; grid-template-columns: 50px 1fr; row-gap: 8px; column-gap: 10px; align-items: center; }
.glabel { font-size: 11px; color: var(--ink-500); font-weight: 500; }
/* 게이지는 u-gauge / u-gauge__fill 사용 */

/* ====== diverging gauge — 맛(좌) │ 서비스(우) 한 줄 표시 ====== */
.dgauge { width: 100%; }

.dgauge__bar {
    display: flex; align-items: center;
    height: 8px; flex: 1;
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}
.dgauge__half {
    flex: 1; height: 100%; position: relative;
    display: flex;
}
/* 양 끝(바깥)에 anchor, 중앙을 향해 자람. 점수 높을수록 중앙에서 만나고,
   낮으면 가운데 빈 공간이 생기는 대칭 구조.
   짙은 색은 바깥쪽 끝, 옅은 색은 중앙 쪽. */
.dgauge__half--left  { justify-content: flex-start; }
.dgauge__half--right { justify-content: flex-end; }
.dgauge__fill {
    height: 100%;
    transition: width var(--t-slow) var(--ease-out);
    border-radius: var(--radius-pill);
}
/* 바깥은 옅게, 중앙으로 갈수록 진하게.
   anchor 가 좌/우 끝이므로 fill 의 시작이 바깥, 끝이 중앙 방향. */
.dgauge__fill--taste   { background: linear-gradient(90deg, #ff8e6b, #ff4757); }
.dgauge__fill--service { background: linear-gradient(90deg, #1aa564, #76d3a4); }

/* 카드용 (compact) — 막대만, 마진 약간 */
.dgauge--compact { margin: 4px 0 12px; }
.dgauge--compact .dgauge__bar { height: 6px; }

/* 상세용 평균 평가 / 재방문 — 공통 '라벨 … 값' 행 스타일 (단일 강조색 = 블루) */
.stat-rows { display: flex; flex-direction: column; gap: 13px; }
.stat-rows__row { display: flex; align-items: center; gap: 12px; }
.stat-rows__name { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.stat-rows__row .stat-rows__name { width: 64px; flex: none; }   /* 평균 평가: 맛/서비스 라벨 폭 고정 */
.stat-rows__track {
    flex: 1; height: 8px; background: var(--ink-100);
    border-radius: var(--radius-pill); overflow: hidden;
}
.stat-rows__track i {
    display: block; height: 100%; background: var(--blue-500);
    border-radius: var(--radius-pill);
    transition: width var(--t-slow) var(--ease-out);
}
.stat-rows__val {
    width: 34px; flex: none; text-align: right;
    font-size: 16px; font-weight: 700; color: var(--ink-900);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* 재방문: 라벨(좌) ↔ 인원수(우) 양끝 정렬 */
.stat-rows--split .stat-rows__row { justify-content: space-between; }
.stat-rows--split .stat-rows__name { width: auto; }
.stat-rows__count {
    font-size: 17px; font-weight: 700; color: var(--blue-600);
    letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 2px;
}
.stat-rows__count em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-400); }
.stat-rows__caption {
    margin-top: 1px; font-size: 11px; color: var(--ink-400);
    font-weight: 500; text-align: right;
}

/* ====== 지도 상단 "이 지역 식당 불러오기" 플로팅 버튼 ====== */
.reload-area {
    /* 가로 중앙은 transform 이 아니라 margin auto 로 — transform 이 리셋돼도 중앙 유지 */
    position: absolute; top: 16px; left: 0; right: 0;
    margin-inline: auto; width: max-content;
    transform: translateY(-8px);
    background: white;
    border-radius: var(--radius-pill);
    padding: 9px 16px 9px 14px;
    font-size: 13px; font-weight: 700;
    color: var(--blue-600);
    box-shadow: var(--shadow-fab);
    display: inline-flex; align-items: center; gap: 6px;
    z-index: 50;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-soft);
    white-space: nowrap;
}
.reload-area.is-visible {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
}
.reload-area:hover { box-shadow: var(--shadow-fab-hover); }
.reload-area:active { transform: translateY(0) scale(.97); }
.reload-area svg { width: 16px; height: 16px; flex-shrink: 0; }

.badges { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* ====== 매장 상세 패널 — 목록 패널 뒤에서 슬라이드 아웃 ====== */
.detail-panel {
    position: absolute;
    top: 20px; bottom: auto;             /* 콘텐츠 높이에 맞춤 — 버튼 아래 빈 여백 방지 */
    max-height: calc(100% - 40px);       /* 길면 이 높이에서 본문 스크롤 */
    left: 40px;                          /* .panel(420w) 내부 — 닫혔을 때 가려짐 */
    width: 380px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.7);
    z-index: 2;                          /* .panel(z3) 보다 아래 */
    transform: translateX(0);            /* 닫힘: 그대로 .panel 뒤에 숨김 */
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--ease-out), opacity .28s var(--ease-soft);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.detail-panel.is-open {
    transform: translateX(390px);        /* 열림: .panel 폭만큼 우측으로 → 지도 영역에 노출 */
    opacity: 1;
    pointer-events: auto;
}

/* Head — 즐겨찾기 + 매장명 + 닫기 한 라인. 스크롤 시 고정 (body 외부). */
.detail-head {
    padding: 12px 14px 10px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ink-100);
}
.detail-head .heart { width: 32px; height: 32px; font-size: 19px; flex-shrink: 0; }
.detail-head .detail-title {
    flex: 1; min-width: 0; margin: 0;
    font-size: 18px; font-weight: 700; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 디테일 드래그 핸들 — 데스크탑(우측 사이드 패널)에선 드래그 없음 → 숨김. 모바일에서만 노출. */
.detail-handle { display: none; }
.detail-close {
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 22px; color: var(--ink-500);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.detail-close:hover { background: var(--ink-100); color: var(--ink-900); }

.detail-body { padding: 12px 18px 12px; overflow-y: auto; flex: 1; min-height: 0; }

/* Hero — 카테고리 + 매장 정보 + 점수 칩 (매장명은 head 로 분리됨) */
.detail-hero { padding: 0 0 14px; }
.detail-cats { color: var(--ink-500); font-size: 12px; margin: 0 0 8px; }
.detail-cats__sep { color: var(--ink-300); margin: 0 4px; }
.detail-hero .detail-meta { margin-bottom: 12px; }
.detail-match-row {
    display: flex; gap: 8px;
    margin-top: 0;
}
.detail-match-row .score-pill {
    flex: 1; min-width: 0;
    justify-content: center;
}
/* 선호도 없으면 일치율이 가로 전부 — flex:1 만으로도 자동이지만 명시 */
.detail-match-row--single .score-pill { flex: 1 1 100%; }

/* 섹션 — 동일 위계 (상단 구분선 + 동일 간격) */
.detail-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ink-100);
}
.detail-section h3 {
    margin: 0 0 8px; font-size: 11px;
    color: var(--ink-500); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}

.detail-meta {
    display: grid; grid-template-columns: 18px 1fr;
    gap: 6px 10px; align-items: start;
    font-size: 13px; color: var(--ink-700); line-height: 1.5;
}
.detail-meta svg { width: 16px; height: 16px; color: var(--ink-400); margin-top: 2px; flex-shrink: 0; }

/* 인라인 평가 — 본문 내부 별점. 배경 없이 섹션 위계 통일. */
/* ====== 이용인증 — 영수증(필수) 먼저, 그 외 사진(선택) 순차 노출 ====== */
.review-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.review-info {
    width: 17px; height: 17px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ink-200); color: var(--ink-600);
    font-size: 11px; font-weight: 700; cursor: help; user-select: none;
}
.review-photos { display: flex; gap: 10px; margin-bottom: 14px; }
.review-photo {
    position: relative; flex: 1 1 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md);
    border: 1.5px dashed var(--ink-300); background: var(--ink-50);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; transition: border-color var(--t-fast);
}
.review-photo.is-hidden { display: none; }
.review-photo:hover { border-color: var(--blue-300); }
.review-photo__ph { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-500); text-align: center; line-height: 1.4; }
.review-photo__ph small { font-size: 10px; font-weight: 700; color: var(--ink-400); }
.review-photo[data-photo="receipt"] .review-photo__ph small { color: var(--blue-600); }
.review-photo.has-img { border-style: solid; border-color: var(--blue-400, var(--blue-500)); }
.review-photo.has-img .review-photo__ph { display: none; }
.review-photo.has-img::after {
    content: '변경'; position: absolute; right: 6px; bottom: 6px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: var(--radius-pill);
}

/* 점수 — 영수증 올리기 전엔 잠금(흐리게 + 비활성) */
.detail-rate.is-locked { opacity: .4; pointer-events: none; filter: grayscale(.4); }

.detail-rate { padding: 0; }
.detail-rate .rate-row {
    display: grid; grid-template-columns: 48px 1fr;
    align-items: center; gap: 8px; margin-bottom: 8px;
}
.detail-rate .rate-row:last-child { margin-bottom: 0; }
.detail-rate .rate-row__name { font-size: 12px; color: var(--ink-700); font-weight: 700; }

/* ====== 별점 위젯 ====== */
.star-rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.star-rate__stars {
    position: relative; display: inline-flex; gap: 2px; flex-shrink: 0;
}
.star-rate__star {
    position: relative; width: 22px; height: 22px;
    display: inline-block; flex-shrink: 0;
}
.star-rate__base,
.star-rate__filled {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.star-rate__base   { fill: var(--ink-200); }
.star-rate__filled {
    fill: #ffb800;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .15s var(--ease-out);
}
.star-rate__star.is-full .star-rate__filled { clip-path: inset(0 0    0 0); }
.star-rate__star.is-half .star-rate__filled { clip-path: inset(0 50%  0 0); }

/* 호버 시 별 살짝 커짐 — 탄력감 */
.star-rate__stars:hover .star-rate__star { transform: scale(1.02); transition: transform .12s var(--ease-out); }

/* 클릭 hit zone — 별 위에 10개 절반 너비 영역 */
.star-rate__hit {
    position: absolute; top: 0; bottom: 0;
    width: 10%; background: transparent; cursor: pointer;
    border: 0; padding: 0;
}

/* 우측 점수+문구 — min-width 없애고 자연스럽게, 텍스트 길면 ellipsis */
.star-rate__msg {
    font-size: 12px; text-align: right;
    color: var(--ink-700); font-weight: 600; min-width: 0;
    display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px;
    overflow: hidden;
}
.star-rate__score { font-size: 14px; font-weight: 700; color: #b65a00; letter-spacing: -.01em; }
.star-rate__sep   { color: var(--ink-300); }
.star-rate__lbl   { color: var(--ink-500); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 평가 제출 — 평가하기 섹션 안의 인라인 버튼 (sticky foot 아님) */
.detail-submit { width: 100%; margin-top: 12px; }

/* ============ Skeleton card (in list) ============ */
.skel-card { padding: 16px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--ink-100); box-shadow: var(--shadow-xs); }
.skel-line { height: 12px; border-radius: var(--radius-xs); margin-bottom: 8px; }
.skel-line.lg { height: 16px; width: 55%; }
.skel-line.sm { height: 10px; width: 35%; }
.skel-line.bar { height: 8px; }

/* =============================================================
   Specific components
   ============================================================= */

/* ====== 취향 설문 (1차 > 2차 위계) ====== */
.survey-intro {
    color: var(--ink-500); font-size: 13px; line-height: 1.6;
    margin-bottom: 20px;
}
/* ===== 1차 — 플랫 토글 리스트 ===== */
.survey-tree {
    display: flex; flex-direction: column;
    margin: 6px 0 20px;
    border-top:    1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
}
.survey-cat1 {
    background: transparent;
    border-bottom: 1px solid var(--ink-100);
    overflow: hidden;
}
.survey-cat1:last-child { border-bottom: none; }
.cat1-row {
    width: 100%;
    padding: 18px 6px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: 15px; font-weight: 700; color: var(--ink-700);
    text-align: left; letter-spacing: -.01em;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.cat1-row:hover  { background: var(--ink-50); }
.cat1-row:active { background: var(--ink-100); }
.survey-cat1.picked .cat1-row { color: var(--blue-700); }

/* ===== 2차 — picked 시 위에서 밑으로 부드럽게 펼쳐짐 ===== */
.cat2-area {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 4px;
    max-height: 0; opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height .42s var(--ease-out),
                opacity     .3s  var(--ease-soft),
                padding     .3s  var(--ease-soft),
                transform   .35s var(--ease-out);
}
.survey-cat1.picked .cat2-area {
    max-height: 480px;
    opacity: 1;
    padding: 2px 4px 20px 4px;
    transform: translateY(0);
}
.cat2-chip {
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: white;
    color: var(--ink-700);
    font-size: 12.5px; font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--ink-200);
    transition: background var(--t-fast), color var(--t-fast),
                box-shadow var(--t-fast), transform var(--t-fast);
}
.cat2-chip:hover  { background: var(--ink-50); }
.cat2-chip:active { transform: scale(.95); }
.cat2-chip.picked {
    background: var(--blue-500); color: white;
    box-shadow: var(--shadow-blue);
}

/* ====== 로그인 모달 — 위계/간격/weight 통일 ======
   원칙: weight 는 500 또는 omit(=400). 600/700/900 안 씀.
         spacing 스케일: 4/8/12/16/20.
         font-size 스케일: 10(badge) / 11(소소) / 13(본문) / 14(액션). */

.login-brand {
    display: flex; justify-content: center;
    padding: 16px 0 0;
}
.login-brand img { height: 36px; }

.login-sub {
    text-align: center; color: var(--ink-500);
    margin: 8px 0 20px;
    font-size: 13px;
}

/* OAuth 버튼 — 원형 + 좌/우 배치. 아이콘 사이즈 통일 */
.oauth {
    display: flex; flex-direction: row;
    gap: 18px; justify-content: center;
    margin: 8px 0 14px;
}
.oauth-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: filter var(--t-fast),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-soft);
}
.oauth-btn:hover  { filter: brightness(.95); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.oauth-btn:active { transform: scale(.95); }
.oauth-btn--naver { background: #03A94D; }
.oauth-btn--kakao { background: #FEE500; }

/* 로고 사이즈
   - 네이버: PNG 가 56px 기준으로 디자인됐으니 버튼 꽉 채움
   - 카카오: SVG path 가 viewBox 를 거의 채우는 구조라 작은 박스로 시각 균형 */
.oauth-btn .oauth-logo {
    object-fit: contain;
    display: block;
}
.oauth-btn--naver .oauth-logo { width: 56px; height: 56px; }
.oauth-btn--kakao .oauth-logo { width: 28px; height: 28px; }

/* "최근 로그인" 빨강 말풍선 */
.oauth-recent {
    position: absolute; top: -22px; left: 50%;
    transform: translateX(-50%);
    background: var(--danger); color: white;
    padding: 3px 8px; border-radius: var(--radius-sm);
    font-size: 10px; font-weight: 500; letter-spacing: -.01em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(255, 71, 87, .3);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast);
}
.oauth-recent::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent; border-top-color: var(--danger);
}
.oauth > .is-recent .oauth-recent { opacity: 1; }

.guest-btn {
    display: block; width: 100%;
    padding: 10px;
    background: transparent; color: var(--ink-500);
    font-size: 13px;
    text-align: center;
    border-radius: var(--radius-md);
    text-decoration: underline; text-underline-offset: 3px;
    transition: background var(--t-fast), color var(--t-fast);
}
.guest-btn:hover { background: var(--ink-50); color: var(--ink-700); }

.login-terms {
    text-align: center;
    color: var(--ink-400); font-size: 11px;
    line-height: 1.65;
    margin: 16px 0 0;
}
.login-terms a {
    color: var(--ink-500); text-decoration: underline; text-underline-offset: 2px;
}
.login-terms a:hover { color: var(--blue-600); }

.dev-section {
    margin-top: 16px;
    border-top: 1px dashed var(--ink-200);
    padding-top: 12px;
}
.dev-section summary {
    color: var(--ink-400); font-size: 11px;
    cursor: pointer; user-select: none; list-style: none;
}
.dev-section summary::-webkit-details-marker { display: none; }
.dev-section summary::before { content: '▸ '; transition: transform var(--t-fast); }
.dev-section[open] summary::before { content: '▾ '; }

.devlogin { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.devlogin button {
    padding: 8px 6px;
    background: var(--blue-50); color: var(--blue-700);
    font-size: 12px; font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
}
.devlogin button:hover { background: var(--blue-100); }

/* ====== 학습 상태 모달 ====== */
#learningBody { padding-top: 8px; }
.learn-hero {
    background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
    color: white;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}
.learn-hero__label {
    font-size: 11px; opacity: .8; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.learn-hero__value {
    font-size: 22px; font-weight: 700; letter-spacing: -.02em;
    margin-top: 4px; line-height: 1.2;
}
.learn-hero__meta {
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
    display: flex; gap: 16px; font-size: 12px; opacity: .9;
}
.learn-hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.learn-hero__meta b { font-weight: 700; opacity: 1; font-size: 13px; }

.learn-section {
    background: var(--ink-50);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
}
.learn-section:last-of-type { margin-bottom: 0; }
.learn-section h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    font-size: 12px; color: var(--ink-700); font-weight: 700;
    letter-spacing: .02em;
}
.learn-section h3 svg { width: 14px; height: 14px; color: var(--blue-500); }

.learn-block { margin-bottom: 10px; }
.learn-block:last-child { margin-bottom: 0; }
.learn-block .lhead {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; margin-bottom: 6px;
}
.learn-block .lhead b   { color: var(--ink-900); font-weight: 700; }
.learn-block .lhead span{ color: var(--ink-500); font-weight: 600; font-size: 12px; }
.learn-section .row {
    display: grid; grid-template-columns: 1fr 90px;
    align-items: center; font-size: 12.5px; gap: 12px;
    padding: 7px 0; color: var(--ink-700);
}
.learn-section .row + .row { border-top: 1px solid var(--ink-100); }

.learn-empty {
    padding: 12px 14px; border-radius: var(--radius-sm);
    background: white; color: var(--ink-500);
    font-size: 12px; line-height: 1.55; text-align: center;
    box-shadow: inset 0 0 0 1px var(--ink-100);
}
.learn-banner {
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--blue-50); color: var(--blue-700);
    border-radius: var(--radius-md);
    font-size: 12.5px; line-height: 1.55; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.learn-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

.meal-pills { display: flex; gap: 8px; margin: 0; }
.meal-pills .p {
    padding: 8px 14px; background: white; color: var(--blue-700);
    border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--blue-100);
    display: inline-flex; align-items: center; gap: 6px;
}
.meal-pills .p svg { width: 12px; height: 12px; color: var(--blue-500); }


/* legacy alias (기존 마크업/JS와 호환) */
.btn-primary { /* alias of u-btn--primary --block --lg */
    display: block; width: 100%; padding: 13px;
    border-radius: var(--radius-md);
    background: var(--blue-500); color: white;
    font-weight: 700; font-size: 14px;
    box-shadow: var(--shadow-blue);
    transition: background var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover  { background: var(--blue-600); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: var(--ink-300); cursor: not-allowed; box-shadow: none; transform: none; }

/* ====== 좌하단 문의 버튼 (카카오 채널 연결, 디자인은 플랫폼 톤) ====== */
.kakao-chat {
    position: absolute;
    left: 20px; bottom: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: white; color: var(--blue-600);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-fab), inset 0 0 0 1px rgba(255,255,255,.7);
    z-index: 6;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-soft),
                opacity var(--t-fast);
}
.kakao-chat:hover  { transform: translateY(-2px); box-shadow: var(--shadow-fab-hover), inset 0 0 0 1px rgba(255,255,255,.7); }
.kakao-chat:active { transform: scale(.92); }
.kakao-chat svg    { width: 20px; height: 20px; }

/* 호버 시 우측으로 펼쳐지는 툴팁 */
.kakao-chat[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--ink-900); color: white;
    padding: 6px 10px; border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.kakao-chat[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ====== 우하단 FAB 스택 (투표 + 내 위치) — 상단 chip 과 동일 사이즈 ====== */
.fab-stack {
    position: absolute; right: 16px; bottom: 20px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 6;
}
.u-fab {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: white; color: var(--blue-600);
    box-shadow: var(--shadow-fab), inset 0 0 0 1px rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-soft),
                color var(--t-fast),
                background var(--t-fast);
    position: relative;
}
.u-fab:hover  { transform: translateY(-2px); box-shadow: var(--shadow-fab-hover), inset 0 0 0 1px rgba(255,255,255,.7); }
.u-fab:active { transform: scale(.92); }
.u-fab svg    { width: 20px; height: 20px; }

.u-fab--primary { background: var(--blue-500); color: white; box-shadow: var(--shadow-blue); }
.u-fab--primary:hover { background: var(--blue-600); color: white; }

.u-fab.loading svg { animation: spin .9s linear infinite; color: var(--ink-400); }

/* 버튼 tooltip (왼쪽으로 펼침) */
.u-fab[data-tip]::after {
    content: attr(data-tip);
    position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--ink-900); color: white;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.u-fab[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ====== 내 위치 점 (빨강) ====== */
.user-dot {
    width: 16px; height: 16px;
    background: var(--danger); border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(255, 71, 87, .26);
    animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 6px  rgba(255, 71, 87, .26); }
    50%      { box-shadow: 0 0 0 14px rgba(255, 71, 87, .06); }
}

/* ====== 매장 마커 — 작은 원형 점 ====== */
.map-marker {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--blue-500);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(20, 30, 60, .18);
    cursor: pointer;
    transition: transform .15s var(--ease-out),
                box-shadow var(--t-fast),
                background var(--t-fast);
}
.map-marker:hover {
    transform: scale(1.4);
    box-shadow: 0 3px 8px rgba(20, 30, 60, .28);
}
.map-marker.is-selected {
    width: 22px; height: 22px;
    background: var(--danger);
    border: 3px solid white;
    box-shadow: 0 0 0 4px rgba(255, 71, 87, .22),
                0 4px 10px rgba(255, 71, 87, .35);
    animation: marker-pulse 2s ease-in-out infinite;
}
@keyframes marker-pulse {
    0%, 100% { box-shadow: 0 0 0 4px  rgba(255,71,87,.22), 0 4px 10px rgba(255,71,87,.35); }
    50%      { box-shadow: 0 0 0 10px rgba(255,71,87,.06), 0 5px 14px rgba(255,71,87,.45); }
}

/* ====== 공통 ghost 버튼 ====== */
.btn-ghost {
    padding: 13px; border-radius: var(--radius-md);
    background: white; color: var(--ink-700);
    font-weight: 700; font-size: 14px;
    box-shadow: inset 0 0 0 1.5px var(--ink-200);
    transition: background var(--t-fast);
}
.btn-ghost:hover { background: var(--ink-50); }

/* ====== 투표 만들기 — 통합 모달 ====== */
.vc-seg {
    margin: 0 22px 14px;       /* head 와 body 사이 */
}
.vc-summary { padding: 10px 0 4px; }
.vc-summary-headline {
    font-size: 18px; font-weight: 700;
    letter-spacing: -.015em; line-height: 1.4;
    margin-bottom: 12px;
}
.vc-summary-headline b { color: var(--blue-600); }
.vc-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.vc-cat-chip {
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--ink-100); color: var(--ink-700);
    font-size: 12px; font-weight: 600;
}
.vc-empty-hint {
    padding: 24px 16px; text-align: center;
    color: var(--ink-500); font-size: 13px; line-height: 1.6;
    background: var(--ink-50); border-radius: var(--radius-md);
}

/* 선택 탭 — 목록 */
.vc-list { display: flex; flex-direction: column; gap: 0; }     /* 부모 u-sheet__body 가 스크롤 처리 */
.vc-list-sort { display: flex; gap: 6px; margin: 6px 0 10px; }
.vc-row {
    padding: 14px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    transition: background var(--t-fast);
    border-radius: var(--radius-md);
    margin: 0 -8px;                                          /* 본문 패딩 안쪽까지 hover 영역 확대 */
}
.vc-row:hover  { background: var(--ink-50); }
.vc-row:active { background: var(--ink-100); }
.vc-row.is-picked { background: var(--blue-50); }
.vc-row + .vc-row { border-top: 0; }                         /* 카드형 hover 강조 — divider 제거 */
.vc-row__info { flex: 1; min-width: 0; }
.vc-row__name { font-size: 14px; font-weight: 700; }
.vc-row__sub  { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
/* 투표 선택 행 체크 — u-check 공통 클래스 사용 */
.vc-row__heart { color: var(--danger); font-size: 18px; flex-shrink: 0; }

/* ====== 공유 완료 모달 ====== */
.vc-share-body { padding: 6px 0 4px; }
.vc-share-sub  { font-size: 13px; color: var(--ink-500); margin: -4px 0 18px; }
.vc-share-actions { display: flex; gap: 10px; }
.vc-share-actions button {
    flex: 1; padding: 14px; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 700;
    transition: filter var(--t-fast), transform var(--t-fast);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.vc-share-actions button:active { transform: scale(.97); }
.btn-kakao { background: #fee500; color: #181600; }
.btn-kakao:hover { filter: brightness(.97); }
.btn-go-vote { background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1.5px var(--blue-100); }
.btn-go-vote:hover { background: var(--blue-100); }

/* 헤더 우측 아이콘 버튼 — 공유 모달의 링크복사 등 */
.u-sheet__head .head-icon {
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--ink-500);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.u-sheet__head .head-icon:hover { background: var(--ink-100); color: var(--ink-900); }
.u-sheet__head .head-icon svg { width: 16px; height: 16px; }

/* ====== 클러스터 — 깔끔한 원형, 4단계 크기 ====== */
.cluster {
    border-radius: 50%;
    color: white; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
    transition: transform .15s var(--ease-out), box-shadow var(--t-fast);
    background: var(--blue-500);
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(20, 30, 60, .18);
    line-height: 1;
}
.cluster:hover  { transform: scale(1.1); box-shadow: 0 4px 12px rgba(20, 30, 60, .25); }
.cluster:active { transform: scale(.96); }

/* 카운트가 클수록 단순히 크기/색조도만 점진적으로 ↑ */
.cluster.sm { width: 28px; height: 28px; font-size: 11px; }
.cluster.md { width: 36px; height: 36px; font-size: 12px; background: var(--blue-500); }
.cluster.lg { width: 46px; height: 46px; font-size: 13px; background: var(--blue-600); }
.cluster.xl {
    width: 56px; height: 56px; font-size: 14px;
    background: var(--blue-700);
    box-shadow: 0 3px 10px rgba(20, 30, 60, .25);
}

/* ====== 클러스터 클릭 팝업 — 포함 매장 목록 (네이버 InfoWindow 내용) ====== */
.cluster-pop {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-width: 190px; max-width: 250px;
}
.cluster-pop__head {
    padding: 12px 16px;
    font-size: 11px; color: var(--ink-500);
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ink-100);
}
.cluster-pop__list {
    list-style: none; margin: 0; padding: 6px;
    display: flex; flex-direction: column; gap: 4px;
    max-height: 260px;
}
.cluster-pop__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--t-fast);
}
.cluster-pop__item:hover { background: var(--ink-50); }
.cluster-pop__name {
    font-size: 13px; color: var(--ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cluster-pop__match { font-size: 12px; color: var(--blue-600); flex-shrink: 0; }

/* ====== 모바일 Bottom Nav (데스크탑 숨김. 모바일 미디어쿼리에서 노출) ====== */
.bottom-nav { display: none; }

/* ====== 마이 시트 콘텐츠 — 컴팩트 ====== */
.my-user {
    display: flex; align-items: center; gap: 10px;
    padding: 0 0 10px;
}
.my-user__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--blue-50); color: var(--blue-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.my-user__avatar--img { background: transparent; padding: 0; }
.my-user__avatar img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.my-user__name { font-size: 14px; font-weight: 700; color: var(--ink-900); }

.my-tiles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 10px;
}
.my-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 14px 10px;
    background: var(--ink-50);
    border-radius: var(--radius-md);
    color: var(--ink-700); font-size: 12px; font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ink-100);
    transition: background var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-out);
}
.my-tile:hover  { background: var(--ink-100); }
.my-tile:active { transform: scale(.97); }
.my-tile svg    { width: 22px; height: 22px; color: var(--blue-600); }

.my-logout {
    display: block; width: 100%;
    padding: 8px 0;
    background: transparent; color: var(--ink-500);
    font-size: 12px; font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.my-logout:hover  { color: var(--danger); background: var(--ink-50); }

.my-withdraw {
    display: block; width: 100%;
    padding: 8px 0; margin-top: 2px;
    background: transparent; color: var(--ink-400);
    font-size: 12px; font-weight: 600;
    text-align: center; text-decoration: underline; text-underline-offset: 2px;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.my-withdraw:hover { color: var(--danger); background: var(--ink-50); }
.chip--danger { color: var(--danger); }

/* ====== 커스텀 confirm 다이얼로그 ====== */
.u-confirm-bg {
    position: fixed; inset: 0;
    background: rgba(15, 25, 50, .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity var(--t-fast);
    padding: 24px;
}
.u-confirm-bg.is-open { opacity: 1; }
.u-confirm {
    width: min(360px, 100%);
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px 22px 16px;
    box-shadow: var(--shadow-lg);
    transform: scale(.92);
    opacity: 0;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.u-confirm-bg.is-open .u-confirm { transform: scale(1); opacity: 1; }
.u-confirm__msg {
    font-size: 15px; font-weight: 600;
    color: var(--ink-900); line-height: 1.55;
    text-align: center; margin-bottom: 18px;
    white-space: pre-line;
}
.u-confirm__actions {
    display: flex; gap: 8px;
}
.u-confirm__actions .u-btn { flex: 1; }

/* =============================================================
   반응형 — 모바일 (≤ 768px) / 좁은 모바일 (≤ 380px)
   ⚠ 이 블록은 파일 끝에 와야 base 룰들을 정상적으로 오버라이드함
   ============================================================= */

@media (max-width: 768px) {
    /* nav 높이 — 패널/디테일/FAB 모두 이 변수 참조.
       하단 시스템바(제스처/3버튼) 인셋을 포함해 nav 가 그 뒤까지 깔리고(흰 영역 제거),
       아이콘 콘텐츠 영역은 항상 58px 로 유지돼 상하 균형이 맞는다. */
    :root { --nav-h: calc(58px + env(safe-area-inset-bottom, 0px)); }

    /* ---- Bottom Nav (모바일에서만 노출) ---- */
    .bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        height: var(--nav-h);
        background: white;
        border-top: 1px solid var(--ink-100);
        box-shadow: 0 -2px 12px rgba(15, 25, 50, .05);
        z-index: 280;     /* 디테일(220)/패널(200) 보다 위 — 슬라이드 들고남이 nav 뒤에서 보이게 */
        padding-bottom: env(safe-area-inset-bottom);
    }
    .bottom-nav__item {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        background: transparent; color: var(--ink-500);
        font-size: 10px; font-weight: 700;
        transition: color var(--t-fast);
    }
    .bottom-nav__item svg { width: 22px; height: 22px; }
    .bottom-nav__item:hover  { color: var(--ink-700); }
    .bottom-nav__item:active { transform: scale(.95); }

    /* ---- 모바일 nav 로 이전된 버튼들 숨김 ---- */
    .map-header { display: none; }       /* 상단 우측 헤더 칩 (로그인/설문/학습/로그아웃) */
    .kakao-chat { display: none; }       /* 좌하단 카카오 → nav 의 "문의" */
    #btnVote    { display: none; }       /* 우하단 투표 FAB → nav 의 "투표" */
    /* 우하단 위치 FAB(#btnLocate) 는 지도 컨텍스트 액션이라 유지 */

    /* ---- 공통 모달 시트 — 화면 하단 부착 ---- */
    .u-sheet-backdrop { align-items: flex-end; }
    .u-sheet {
        width: 100%; max-width: none;
        max-height: 90vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: sheet-up .32s var(--ease-out);
    }
    .u-sheet__handle {
        display: block;
        width: 40px; height: 4px;
        background: var(--ink-200);
        border-radius: 999px;
        margin: 10px auto 4px;
        flex-shrink: 0;
    }

    /* ---- 메인 레이아웃 — 풀스크린 지도 + 하단 시트 ---- */
    .app { flex-direction: column; }
    .map-area {
        flex: 1; height: 100dvh;
        position: absolute; inset: 0;
    }

    /* 지도가 상태바(노치·시간·배터리) 영역까지 덮이므로,
       상단 떠있는 UI 는 safe-area 만큼 내려 가려지지 않게 한다. */
    .area-count-badge { top: calc(22px + env(safe-area-inset-top)); }
    .reload-area      { top: calc(16px + env(safe-area-inset-top)); }

    /* ---- 매장 목록 패널 — bottom-nav 위에 부착 ---- */
    .panel {
        position: fixed;
        left: 0; right: 0; bottom: var(--nav-h); top: auto;
        width: 100%; min-width: 0;
        max-height: 60vh;
        border-right: none; border-top: none;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -4px 24px rgba(15, 25, 50, .14);
        z-index: 200;
        animation: sheet-up var(--t-med) var(--ease-out);
    }
    /* 드래그 핸들 — 실제 DOM. 안 사라지게 height 살짝 키우고 padding 으로 터치영역 확보 */
    .panel-handle {
        display: flex; justify-content: center; align-items: center;
        height: 24px;
        cursor: grab; touch-action: none;   /* 드래그 중 스크롤 방지 */
        flex-shrink: 0;
        -webkit-user-select: none; user-select: none;
    }
    .panel-handle:active { cursor: grabbing; }
    .panel-handle__bar {
        width: 40px; height: 4px;
        background: var(--ink-300);
        border-radius: 999px;
        pointer-events: none;
        transition: background var(--t-fast);   /* width 모핑 제거 — 드래그 시 핸들이 잠깐 사라지는 듯 보이는 문제 */
    }
    .panel-handle:hover .panel-handle__bar { background: var(--ink-400); }
    .panel.is-dragging .panel-handle__bar { background: var(--blue-500); }

    /* 탭 영역도 드래그 가능 — 손가락 잡기 쉬워짐. touch-action none 으로 스크롤 충돌 방지 */
    .tabs[data-panel-handle] { touch-action: none; }

    /* 모바일에선 브랜드 로고 숨김 */
    .brand { display: none; }

    /* ---- 패널 내부 — 탭/카테고리/정렬칩 모두 소형화 ---- */
    .tabs { padding: 6px 12px 6px; }
    .u-segmented { padding: 3px; }
    .u-segmented__item { padding: 7px 0; font-size: 12px; }

    .cat-strip { padding: 2px 12px 8px; gap: 6px; }
    .cat-strip .u-chip { padding: 6px 11px; font-size: 12px; }

    .list-toolbar { margin: 0 12px 8px; gap: 8px; }
    .sort-row { gap: 2px; padding: 3px; }
    .sort-chip { padding: 6px 10px; font-size: 11px; }
    .score-legend { gap: 4px; }
    .score-legend .score-pill { font-size: 10px; padding: 3px 7px; gap: 3px; }
    .score-legend .score-pill svg { width: 11px; height: 11px; }

    .list { padding: 0 12px 14px; }

    /* ---- 디테일 패널 — bottom-nav 위에 부착 ----
       shadow: 음수 offset + 음수 spread 로 위로만 살짝, 아래로 흘러내림 차단. */
    .detail-panel {
        position: fixed;
        top: auto; left: 0; right: 0; bottom: var(--nav-h);
        width: 100%; height: auto; max-height: 88vh;   /* 콘텐츠 맞춤 — 버튼 아래 빈 여백 방지 (드래그로 확장) */
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
        z-index: 220;     /* bottom-nav(280) 보다 아래 → 슬라이드업/다운 시 nav 뒤에서 드나듦 */
        box-shadow: 0 -12px 20px -10px rgba(15, 25, 50, .22);
        transition: transform .35s var(--ease-out), height .3s var(--ease-out), opacity .25s var(--ease-soft);
    }
    .detail-panel.is-open { transform: translateY(0); }
    .detail-panel.is-dragging { transition: none; }      /* 드래그 중엔 즉시 추종 */

    /* 디테일 드래그 핸들 — 올리면 최대, 내리면 기본, 더 내리면 닫힘 */
    .detail-handle {
        display: flex; justify-content: center; align-items: center;
        height: 22px; flex-shrink: 0;
        cursor: grab; touch-action: none;
        -webkit-user-select: none; user-select: none;
    }
    .detail-handle:active { cursor: grabbing; }
    .detail-handle__bar {
        width: 40px; height: 4px; border-radius: 999px;
        background: var(--ink-300); pointer-events: none;
        transition: background var(--t-fast);
    }
    .detail-panel.is-dragging .detail-handle__bar { background: var(--blue-500); }

    /* ---- 지도 위 버튼들 — 살짝 안쪽으로 ---- */
    .map-header  { top: 12px; right: 12px; gap: 6px; }
    .area-count-badge { top: 14px; }

    /* ---- "이 지역 식당 불러오기" — 모바일에선 패널 바로 위. nav-h 까지 더한 위치 ---- */
    .reload-area {
        top: auto;
        bottom: calc(var(--nav-h) + var(--panel-h, 60vh) + 12px);
        padding: 7px 14px; font-size: 12px;
    }
    .reload-area.is-hidden-by-panel {
        opacity: 0; pointer-events: none;
        transform: translateX(-50%) translateY(8px) scale(.9);
    }

    /* ---- FAB — 시트 상단을 따라 올라옴. nav-h 까지 더해서 nav 위로 ---- */
    .fab-stack {
        right: 12px;
        bottom: calc(var(--nav-h) + var(--panel-h, 60vh) + 12px);
        gap: 6px;
        transition: opacity var(--t-fast),
                    transform var(--t-fast) var(--ease-out);
    }
    .fab-stack.is-hidden-by-panel {
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px) scale(.85);
    }

    /* ---- 카카오 문의 버튼 — 시트 따라가기 (좌측) + hide 처리 ---- */
    .kakao-chat {
        left: 12px;
        bottom: calc(var(--panel-h, 60vh) + 12px);
        transition: opacity var(--t-fast),
                    transform var(--t-fast) var(--ease-out),
                    box-shadow var(--t-fast) var(--ease-soft);
    }
    .kakao-chat.is-hidden-by-panel {
        opacity: 0; pointer-events: none;
        transform: translateY(8px) scale(.85);
    }
    /* 모바일에선 floating 버튼 툴팁들 숨김 — 탭 후 :hover 가 sticky 해져서 토글처럼 보이는 문제 회피 */
    .kakao-chat[data-tip]::after { display: none; }
    .u-fab[data-tip]::after { display: none; }
    .chip[data-tip]::after,
    .chip[data-tip]::before { display: none; }
}

/* ---- 좁은 모바일 (≤ 380px) — 한 단계 더 ---- */
@media (max-width: 380px) {
    .panel { max-height: 65vh; }
    .detail-panel { height: auto; max-height: 88vh; }
    .star-rate__star { width: 20px; height: 20px; }
    .u-segmented__item { font-size: 11px; }
    .sort-chip { padding: 5px 8px; }
    .cat-strip .u-chip { padding: 5px 10px; font-size: 11px; }
    .chip, .u-fab { width: 40px; height: 40px; }
    .chip svg, .u-fab svg { width: 18px; height: 18px; }
}

/* ====== 토스트 ====== */
.toast {
    position: fixed; left: 50%; bottom: calc(var(--nav-h, 0px) + 24px);
    transform: translateX(-50%) translateY(12px);
    background: rgba(20, 30, 50, .92); color: #fff;
    padding: 11px 18px; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 700;
    opacity: 0; pointer-events: none; z-index: 700;
    transition: opacity .2s, transform .2s var(--ease-out);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* .celebrate(폭죽) 는 common.css 로 이동 (맵/투표 공용) */

/* ====== 마이 — 적립금 ====== */
.my-points { margin: 12px 0 4px; padding: 14px; background: var(--ink-50); border-radius: var(--radius-md); }
.my-points__top { display: flex; align-items: baseline; justify-content: space-between; }
.my-points__label { font-size: 12px; color: var(--ink-500); font-weight: 700; }
.my-points__amount { font-size: 16px; color: var(--ink-900); font-weight: 700; }
.my-points__amount b { font-size: 24px; color: var(--blue-600); }
.my-points__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 160px; overflow-y: auto; }
.my-points__list li { display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; font-size: 13px; color: var(--ink-700); }
.my-points__list li + li { border-top: 1px solid var(--ink-100); }
.my-points__list li b { font-weight: 700; color: var(--blue-600); }
.my-points__list li.my-points__empty { justify-content: center; color: var(--ink-400); }

/* ====== 마이 — 내 이용인증 내역 ====== */
.my-reviews { margin: 8px 0 4px; }
.my-reviews__label { font-size: 12px; color: var(--ink-500); font-weight: 700; margin-bottom: 6px; }
.my-reviews__list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.my-reviews__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; }
.my-reviews__item + .my-reviews__item { border-top: 1px solid var(--ink-100); }
.my-reviews__store { font-size: 13px; font-weight: 700; color: var(--ink-900); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-reviews__reason { font-size: 11px; font-weight: 500; color: var(--danger); }
.my-reviews__status { font-size: 11px; font-weight: 700; flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.my-reviews__status.is-pending  { background: var(--ink-100); color: var(--ink-700); }
.my-reviews__status.is-approved { background: var(--blue-50); color: var(--blue-700); }
.my-reviews__status.is-rejected { background: #fdecec; color: #c0392b; }
.my-reviews__empty { padding: 10px 0; text-align: center; color: var(--ink-400); font-size: 13px; }

/* ====== 마이 — 쿠폰 신청 (적립금 블록 안) ====== */
.my-coupon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-100); }
.my-coupon__btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 0; border-radius: var(--radius-md); background: var(--blue-600); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.my-coupon__btn span { font-size: 12px; opacity: .85; }
.my-coupon__btn:disabled { background: var(--ink-100); color: var(--ink-400); cursor: not-allowed; }
.my-coupon__hint { font-size: 11px; color: var(--ink-500); text-align: center; margin: 7px 0 0; }
.my-coupon__list { list-style: none; margin: 10px 0 0; padding: 0; }
.my-coupon__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; }
.my-coupon__item + .my-coupon__item { border-top: 1px solid var(--ink-100); }
.my-coupon__title { font-size: 13px; font-weight: 700; color: var(--ink-900); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-coupon__title small { font-size: 11px; font-weight: 500; color: var(--ink-500); }
.my-coupon__code { font-size: 12px; font-weight: 700; color: var(--blue-700); letter-spacing: .04em; }
.my-coupon__reason { font-size: 11px; font-weight: 500; color: var(--danger); }
.my-coupon__status { font-size: 11px; font-weight: 700; flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.my-coupon__status.is-pending  { background: var(--ink-100); color: var(--ink-700); }
.my-coupon__status.is-approved { background: var(--blue-50); color: var(--blue-700); }
.my-coupon__status.is-rejected { background: #fdecec; color: #c0392b; }

/* ============ 터치 환경 — hover 의 떠오름/밝기(transform/filter) 무력화 ============
   터치는 :hover 가 탭 후에도 sticky 하게 남아 어색함. 배경/색은 손대지 않음.
   ★ 이 블록은 파일 맨 끝(transform/filter hover 규칙들 뒤) — 같은 specificity 라 나중 규칙으로
     이기므로 !important 가 필요 없다. */
@media (hover: none) {
    .u-btn:hover,
    .u-chip:hover,
    .u-segmented__item:hover,
    .chip:hover,
    .u-fab:hover,
    .oauth > *:hover,
    .oauth-btn:hover,
    .my-tile:hover,
    .my-logout:hover,
    .kakao-chat:hover,
    .score-pill:hover,
    .heart:hover,
    .devlogin button:hover,
    .guest-btn:hover,
    .bottom-nav__item:hover,
    .detail-close:hover,
    .sort-chip:hover,
    .cat2-chip:hover,
    .panel-handle:hover .panel-handle__bar,
    .score-pill--plain:hover {
        transform: none;
        filter: none;
    }
}