/*
 * 지도 홈.
 * 지도는 화면의 70% 이상을 유지한다. 지도가 작아지는 순간 이 서비스는
 * 그냥 목록 앱이 된다. (기획서 D-5)
 */

.map-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * 모바일 탭바는 fixed 라 다이얼 위에 그대로 얹힌다.
 * 지도 화면은 높이가 100dvh 로 고정이므로, 아래 여백으로 자리를 비워
 * 다이얼이 탭바 위로 올라오게 한다. box-sizing 이 border-box 라
 * 이 여백만큼 안쪽 flex 영역이 줄어든다.
 */
@media (max-width: 800px) {
    .map-page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
}

.map-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--surface);
}

#map { position: absolute; inset: 0; }

/*
 * 지도 타일의 색온도. 다이얼을 올리면 지도 전체가 살짝 달아오른다.
 * 이 서비스가 기억될 단 하나의 순간이므로 여기에만 공을 들이고
 * 나머지 화면은 조용히 둔다. (기획서 D-4)
 *
 * 예전에는 invert(1) 로 밝은 지도를 어둡게 뒤집었다. 그러느라
 * 카카오 로고와 마커에 반전을 한 번 더 걸어 되돌려야 했고,
 * 그 예외를 하나라도 빠뜨리면 표기가 훼손된 채로 나갔다.
 *
 * 이제 바탕이 흰색이라 뒤집을 이유가 없다. 카카오 지도를 원래 색 그대로
 * 쓴다 — 사용자가 다른 앱에서 익숙한 바로 그 지도다.
 * 채도와 색온도만 다이얼을 따라 아주 조금 움직인다.
 */
#map {
    filter: saturate(var(--map-sat, 1))
            hue-rotate(var(--map-hue, 0deg))
            brightness(var(--map-bri, 1));
    transition: filter 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    #map { filter: none; transition: none; }
}

/* 카카오 로고·저작권 표기는 약관상 가리면 안 된다.
   다이얼이 그 위를 덮지 않도록 아래 여백을 확보한다. */
.map-attrib-space { height: 0; }

/* ── 시그니처: 맵기 다이얼 ──────────────────────────────*/
.dial {
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-top: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--edge), 0 -8px 24px rgba(0, 0, 0, 0.35);
}

/*
 * 다이얼 위쪽 1px 에 열 스케일을 그대로 깐다.
 * 이 서비스가 파는 것이 '척도'이므로, 척도를 조작하는 자리에
 * 척도 자체가 보이는 편이 어떤 설명보다 빠르다.
 */
.dial::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--heat-ramp);
    opacity: 0.9;
}

.dial__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 720px;
    margin: 0 auto;
}

.dial__label {
    flex: 0 0 auto;
    min-width: 116px;
    font-family: var(--font-mono);
    font-size: var(--t-level);
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Lv.5 는 검정이라 글자로 쓰면 안 보인다. --lv-ink 가 그 경우를 처리한다. */
    color: var(--lv-ink, var(--heat-3));
}
/* 레벨 라벨은 페이드가 아니라 딸깍 교체된다. 계기판의 인상. */
.dial__name {
    display: block;
    font-family: var(--font-body);
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--smoke);
}

/*
 * 다이얼 설명 단추.
 *
 * 설명을 아래에 두 줄로 깔아 두었더니 그 두 줄이 곧 지도였다.
 * 한 번 읽으면 다시 볼 일이 없는 글이라 아이콘 뒤에 둔다.
 */
.dial__info {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    margin-right: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--smoke);
    cursor: pointer;
}
.dial__info:hover { background: var(--surface-2); color: var(--brand-dark); }
.dial__info .i { width: 17px; height: 17px; }

.dial__track { flex: 1 1 auto; position: relative; }

/* 트랙 자체가 열 스케일 그라디언트다 */
.dial input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    background: transparent;
    margin: 0;
    cursor: pointer;
}
.dial input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg,
        var(--heat-1) 0%, var(--heat-2) 25%, var(--heat-3) 50%,
        var(--heat-4) 75%, #3A0E0C 100%);
}
.dial input[type="range"]::-moz-range-track {
    height: 10px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg,
        var(--heat-1) 0%, var(--heat-2) 25%, var(--heat-3) 50%,
        var(--heat-4) 75%, #3A0E0C 100%);
}
.dial input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--lv, var(--heat-3));
    border: 3px solid var(--ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(26, 18, 16, 0.06);
    transition: box-shadow var(--dur-1) var(--ease);
}
.dial input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 0 11px rgba(26, 18, 16, 0.1);
}
/* Lv.5 손잡이는 검정이라 트랙 끝과 붙어 사라진다. 줄무늬로 남긴다. */
.dial.lv-5 input[type="range"]::-webkit-slider-thumb {
    background-image: repeating-linear-gradient(-45deg,
        #0E0B0A 0 4px, var(--heat-5-line) 4px 6px);
}
.dial input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lv, var(--heat-3));
    border: 3px solid var(--ink);
}

/* 눈금 */
.dial__ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--smoke);
}


/*
 * 좁은 화면에서는 힌트를 지운다.
 * 다이얼을 실제로 움직여 보면 1초 만에 알게 되는 내용이고,
 * 이 두 줄 때문에 지도가 화면의 70% 아래로 내려간다. (기획서 D-5)
 */
@media (max-width: 800px) {
    /*
     * 좁은 화면에서는 다이얼도 한 줄로 접는다.
     * 레벨과 이름을 두 줄로 쓰면 다이얼만 82px 을 먹어서 지도가 65% 로
     * 내려갔다. 한 줄로 두면 56px 이고, 읽는 데 모자라지 않는다.
     */
    /*
     * 높이를 못 박는다.
     *
     * 안쪽 것들을 하나씩 줄이는 방식으로는 계속 몇 px 씩 새어 나왔다
     * (range 의 기본 여백, .btn 의 min-height 42px …).
     * 지도가 화면의 80% 여야 한다는 것이 정해진 값이므로,
     * 여기서 자리를 정하고 안쪽이 거기 맞추게 한다.
     */
    .dial {
        height: 44px;
        padding: 0 var(--sp-3);
        display: flex;
        align-items: center;
    }
    .dial__row { width: 100%; }
    /*
     * 눈금 숫자(1 2 3 4 5)를 뺀다.
     *
     * 이 줄 하나가 다이얼 높이의 31px 을 먹고 있었다 — 다이얼 전체의 40% 다.
     * 지금 몇 단계인지는 왼쪽에 'Lv.3' 이라고 크게 적혀 있고 손잡이 색도
     * 같이 바뀐다. 같은 말을 세 번 하느라 지도를 뺏을 이유가 없다.
     */
    .dial__ticks { display: none; }
    /*
     * 줄 높이를 손잡이 크기에 맞춰 못 박는다.
     * 그냥 두면 range 입력의 기본 여백 때문에 줄이 43px 이 되는데,
     * 정작 눈에 보이는 것은 27px 짜리 트랙 하나다.
     */
    .dial__row { align-items: center; }
    .dial input[type="range"] { display: block; height: 26px; margin: 0; }
    .dial__label { line-height: 1.15; }
    /* min-height 를 같이 풀어야 한다. .btn 이 42px 을 걸어 두어서
       height 만 줄이면 줄 높이가 그대로다. */
    #locateBtn { width: 34px; height: 34px; min-height: 0;
                 padding: 0; flex: none; }
    .dial__label { min-width: 0; font-size: 1.05rem; white-space: nowrap; }
    .dial__name {
        display: inline;
        margin-left: 5px;
        font-size: 0.72rem;
    }
    /* '보는 중' 은 줄인 화면에서 뺀다 — 다이얼을 보면 이미 아는 사실이다. */
    .dial__name::after { content: ''; }
}

/* ── 마커 (CustomOverlay 안에 들어가는 DOM) ─────────────
   이미지 마커로는 레벨 숫자를 못 넣는다. (기획서 §9.1) */
.pin {
    position: relative;
    transform: translateY(-2px);
    cursor: pointer;
    /* 밝은 지도 위에서는 그림자가 그대로 다 보인다. 어두운 화면 기준의
       0.5 를 그대로 두면 핀이 지도를 짓누른다. */
    filter: drop-shadow(0 2px 4px rgba(26, 18, 16, 0.28));
    transition: transform 200ms ease-out;
}
.pin__body {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px 5px 7px;
    border-radius: var(--r-pill);
    background: var(--pin-color, var(--grey-pin));
    color: var(--pin-on, #fff);
    /* 흰 테두리. 빨강·검정 핀이 밝은 지도 위에서 서로 붙어 보이지 않게 띄운다. */
    border: 2px solid var(--paper);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--edge);
}
.pin__body .i { width: 12px; height: 12px; }
.pin__tail {
    width: 0; height: 0;
    margin: -2px auto 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--paper);
}
.pin:hover { transform: translateY(-2px) scale(1.1); }
.pin.is-selected { transform: translateY(-2px) scale(1.25); z-index: 1000; }
.pin.is-unverified { opacity: 0.75; }

/*
 * 맵기를 고르는 집.
 *
 * 미검증('?')과 눈에 띄게 달라야 한다 — 하나는 '우리가 모른다' 이고
 * 다른 하나는 '네가 정한다' 라서 사용자가 할 일이 아예 다르다.
 * 흐리게 두지 않고(고를 수 있다는 건 좋은 소식이다) 숫자 칸만 조금 좁힌다.
 */
.pin.is-choice { opacity: 1; }
.pin.is-choice .pin__body > span { font-size: 0.72em; letter-spacing: -0.02em; }
.pin.is-visited .pin__body { border-style: dashed; }
.pin--5 .pin__body {
    background-image: repeating-linear-gradient(-45deg,
        #0E0B0A 0 6px, #1A1210 6px 8px, var(--heat-5-line) 8px 10px, #1A1210 10px 12px);
}
.pin__warn { color: var(--hazard-ink); }

/*
 * 같은 자리에 여러 곳일 때. (map.js 의 stack)
 *
 * 뒤에 종이 한 장을 겹쳐 두어 '밑에 더 있다'를 모양으로 말하고,
 * 오른쪽 위 숫자로 몇 곳인지 말한다. 둘 중 하나만으로는
 * 이름을 안 띄우는 배율에서 그냥 평범한 핀으로 보인다.
 */
.pin--stack::before {
    content: '';
    position: absolute;
    inset: -3px -3px 6px 3px;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 2px solid var(--paper);
    box-shadow: var(--edge);
    z-index: -1;
}
.pin__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ink);
    color: #FFFFFF;
    border: 2px solid var(--paper);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
}

/* 같은 자리 고르기 목록 (바텀시트) */
.spot-list { list-style: none; margin: 12px 0 0; padding: 0; }
.spot-list li + li { margin-top: 8px; }
.spot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.spot-row:hover { border-color: var(--brand); }
.spot-row__lv {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}
.spot-row__lv.lv-1 { background: var(--heat-1); color: var(--ink); }
.spot-row__lv.lv-2 { background: var(--heat-2); }
.spot-row__lv.lv-3 { background: var(--heat-3); }
.spot-row__lv.lv-4 { background: var(--heat-4); }
.spot-row__lv.lv-5 { background: var(--heat-5); }
.spot-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-row__name { font-weight: 700; }
.spot-row__meta { font-size: 12px; color: var(--smoke); }

/* 집계 버블 (넓게 봤을 때) */
.bubble {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--pin-color, var(--heat-3));
    color: var(--pin-on, #FFFFFF);
    border: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* ── 바텀시트 ───────────────────────────────────────────
   카카오 기본 InfoWindow 는 모바일에서 지도를 가리고
   스타일을 못 잡는다. (기획서 §9.5) */
.sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sheet);
    background: linear-gradient(180deg, var(--surface-2) 0 96px, var(--surface) 96px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(102%);
    transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
    max-height: 90%;
    display: flex;
    flex-direction: column;
}
.sheet.is-peek { transform: translateY(0); }
.sheet.is-full { transform: translateY(0); height: 90%; }

.sheet__grip {
    flex: 0 0 auto;
    /* 손가락으로 잡는 곳이다. 막대만큼만 두면 아무도 못 잡는다. */
    padding: 12px 0 8px;
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
}
.sheet__grip:active { cursor: grabbing; }
.sheet__grip span {
    transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.sheet__grip:hover span,
.sheet.is-dragging .sheet__grip span {
    width: 56px;
    background: rgba(26, 18, 16, 0.45);
}
/* 끄는 동안에는 그림자를 조금 더 준다 — 손에 들려 있다는 느낌 */
.sheet.is-dragging { box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.55); }
.sheet__grip span {
    width: 40px; height: 4px;
    border-radius: var(--r-pill);
    background: rgba(26, 18, 16, 0.25);
}
.sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
.sheet__close {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 2;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}
.sheet__close:hover { background: rgba(26, 18, 16, 0.14); }

.store-title {
    font-size: var(--t-h1);
    letter-spacing: -0.02em;
    margin: 0 var(--sp-6) var(--sp-2) 0;
}
.store-meta { color: var(--smoke); font-size: var(--t-caption); margin-bottom: var(--sp-3); }

.level-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.level-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    /* 왼쪽 띠 하나로 몇 단계인지 훑어진다. 글을 읽어야 아는 것은 계기판이 아니다. */
    border-left: 3px solid var(--lv, var(--grey-pin));
}
.level-row__val { color: var(--lv-ink, var(--ink)); }
.level-row__peppers { color: var(--lv-ink, var(--smoke)); }
.level-row__peppers .peppers { color: inherit; }
.level-row__key {
    flex: 0 0 52px;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.level-row__val { font-family: var(--font-mono); font-weight: 700; }

/*
 * 맵기를 손님이 고르는 집.
 *
 * 미검증 회색과 달라야 한다 — 하나는 '우리가 모른다', 다른 하나는
 * '네가 정한다' 라서 사용자가 할 일이 아예 다르다. 띠에 브랜드 색을 준다.
 */
.level-row--choice { border-left-color: var(--brand); }
.level-row--choice .level-row__val {
    color: var(--brand);
    font-family: inherit;
}
.level-row--choice .level-row__peppers { color: var(--brand); }
.level-row__peppers { letter-spacing: -1px; }

.gap-note {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: rgba(245, 197, 24, 0.1);
    border: 1px solid rgba(245, 197, 24, 0.35);
    color: var(--hazard-ink);
    font-size: var(--t-caption);
    margin-bottom: var(--sp-4);
}
.gap-note .i { margin-top: 1px; }

/* 고통 지표 — 무번역 아이콘. 외국인도 읽을 필요가 없다. (부록 C-2) */
.pain { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pain__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px 6px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    font-size: var(--t-caption);
}
.pain__chip .i { width: 14px; height: 14px; color: var(--brand); }

/*
 * 알아 두면 좋은 것.
 *
 * 지도 시트와 가게 화면이 같은 마크업을 쓴다. 두 곳에서 모양이 다르면
 * 같은 정보가 다른 정보처럼 읽힌다.
 */
.facts { display: grid; margin-bottom: var(--sp-4); font-size: var(--t-caption); }
.fact {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.fact:last-child { border-bottom: 0; }
.fact .i { color: var(--brand); flex: none; }
.fact--no .i { color: var(--smoke); }
.fact__k { flex: 1 1 auto; color: var(--smoke); }
.fact__v {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--ink);
}
.fact__v .i { color: var(--safe); }
.fact--no .fact__v { color: var(--smoke); font-weight: 400; }
.fact--no .fact__v .i { color: var(--smoke); }

.sheet-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 데스크톱: 좌측 패널 + 우측 지도 */
@media (min-width: 900px) {
    .map-wrap { display: flex; }
    .sheet {
        position: relative;
        width: 400px;
        flex: 0 0 400px;
        max-height: none;
        height: auto;
        border-radius: 0;
        border-top: 0;
        border-right: 1px solid rgba(26, 18, 16, 0.12);
        transform: none;
        box-shadow: none;
    }
    .sheet:not(.is-peek):not(.is-full) { display: none; }
    #map { position: relative; flex: 1 1 auto; inset: auto; }
    .sheet__grip { display: none; }
}

/* 예시 데이터 고지.
   실제 데이터가 들어오면 이 블록과 index.html 의 .sample-note 를 함께 지운다. */
/*
 * 지도 위 알림 묶음.
 *
 * 예전에는 알림마다 absolute 로 같은 top 에 놓여서, 일행 모드를 켜면
 * 예시 데이터 안내와 정확히 겹쳐 둘 다 못 읽었다.
 * 자리는 이 묶음이 잡고, 안쪽은 그냥 위에서부터 쌓이게 둔다.
 */
.map-notices {
    position: absolute;
    top: var(--sp-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    max-width: 540px;
    /* 알림이 없는 자리로 지도를 만질 수 있어야 한다 */
    pointer-events: none;
}
.map-notices > * { pointer-events: auto; max-width: 100%; }

.sample-note {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--r-md);
    /* 어두운 테마 때는 갈색 바탕에 밝은 글자였다. 흰 테마로 옮기면서
       바탕만 갈색으로 남고 글자가 검정이 되어 전혀 안 읽혔다. */
    background: var(--paper);
    border: 1px solid rgba(224, 27, 27, 0.35);
    color: var(--ink);
    font-size: var(--t-caption);
    line-height: 1.5;
    box-shadow: var(--sh-2);
}
.sample-note strong { color: var(--hazard-ink); }

/* 지도를 못 띄웠을 때 그 자리에 놓는 안내.
   빈 회색 네모를 남겨 두면 사용자는 고장인지 로딩 중인지 알 수 없다. */
.map-down {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 24px;
    text-align: center;
    color: var(--smoke);
    background:
        repeating-linear-gradient(-45deg,
            var(--surface) 0 14px, var(--surface-2) 14px 28px);
}
.map-down__title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    color: var(--ink);
    margin: 0 0 4px;
}
.map-down p { margin: 0; max-width: 34ch; line-height: 1.6; }

/*
 * 닫힌 바텀시트가 다이얼 위로 삐져나오던 것 수정.
 *
 * 시트는 translateY 로 아래로 밀어 두는데, 감싸는 .map-wrap 이 넘치는 것을
 * 자르지 않아서 그 아래 있는 다이얼 위에 그대로 얹혔다. ✕ 버튼과 그립이
 * 다이얼을 가리고 레벨 숫자가 보이지 않았다.
 *
 * visibility 로 감추면 키보드 초점도 그 안으로 들어가지 않는다.
 * display:none 을 쓰지 않는 이유는 열고 닫을 때 애니메이션이 필요해서다.
 */
.map-wrap { overflow: hidden; }

.sheet:not(.is-peek):not(.is-full) {
    visibility: hidden;
    pointer-events: none;
}
.sheet { transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s linear 240ms; }
.sheet.is-peek, .sheet.is-full { transition-delay: 0s; }

/* 데스크톱에서는 시트가 왼쪽 패널이라 위 규칙이 필요 없다 */
@media (min-width: 900px) {
    .map-wrap { overflow: visible; }
}

/* ── LOD: 넓게 볼 때의 집계 버블 ────────────────────────
   핀 수백 개를 다 그리면 지도가 점 밭이 되고 DOM 이 무거워진다. */
.bubble--5 {
    background-image: repeating-linear-gradient(-45deg,
        #0E0B0A 0 6px, #1A1210 6px 8px, var(--heat-5-line) 8px 10px, #1A1210 10px 12px);
}

/* ── LOD: 좁게 볼 때의 미니 카드 ────────────────────────
   이름까지 보여 준다. 넓게 보면서 이름을 다 띄우면 글자끼리 겹쳐
   아무것도 못 읽으므로 이 단계에서만 쓴다. */
.pin--card .pin__body {
    border-radius: var(--r-sm);
    padding: 6px 10px;
}
.pin__name {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid currentColor;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── 내 위치 버튼 ───────────────────────────────────────*/
#locateBtn {
    width: 42px;
    height: 42px;
    padding: 0;
    flex: none;
    border-radius: 50%;
}
#locateBtn .i { width: 19px; height: 19px; }

/* ── 가게 시트: 대표 사진 자리 ──────────────────────────
   실제 가게 사진이 들어오기 전까지는 레벨 색 그라디언트를 깐다.
   회색 네모를 두면 '이미지 깨짐'으로 읽힌다. */
.store-hero {
    position: relative;
    height: 116px;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-4);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow: hidden;
    background: var(--lv, var(--grey-pin));
}
.store-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 18, 16, 0.06), var(--surface));
}

/* 예시 데이터 고지는 아이콘 + 글 두 칸으로 둔다.
   아이콘이 글 안에 섞여 들어가면 두 번째 줄이 아이콘 아래로 들어간다. */
.sample-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.sample-note .i { margin-top: 2px; flex: none; color: var(--hazard-ink); }


/* 지도를 못 띄웠을 때의 안내. 회색 네모 대신 이유와 다음 행동을 준다. */
.map-down__i {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin-bottom: var(--sp-3);
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    color: var(--heat-4-ink);
}
.map-down__act {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: var(--sp-4) !important;
}


/* ── 시트 안 사진 줄 (map.js 의 sheetPhotos) ────────────
 *
 * 옆으로 미는 줄로 둔다. 큰 사진 한 장을 넣으면 시트 안의
 * 맵기·주소·단추가 화면 밖으로 밀려난다.
 */
.sheet-photos {
    display: flex;
    gap: 6px;
    margin: 10px 0 6px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sheet-photos::-webkit-scrollbar { display: none; }

.sheet-photos__t {
    flex: none;
    width: 96px;
    height: 72px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    /* a 에 line-height 를 0 으로 두지 않으면 그림 아래 빈 줄이 남는다 */
    line-height: 0;
    border: 1px solid var(--line);
}
.sheet-photos__t img { width: 100%; height: 100%; object-fit: cover; }

.sheet-photos__src {
    margin: 0 0 4px;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.sheet-photos__src b { color: var(--ink); }


/* ── 지도 위 단추 묶음 (검색 / 로드뷰 / 내 위치) ─────────
 *
 * 지도 위에 띄운다. 아래 다이얼 줄에 넣으면 그 줄이 두꺼워져서
 * 지도가 화면의 80% 아래로 내려간다.
 *
 * 오른쪽에 세로로 쌓는 이유: 카카오 로고와 저작권 표기가 왼쪽 아래에 있다.
 * 그것을 가리면 안 된다 (기획서 §13).
 */
.map-tools {
    position: absolute;
    right: 10px;
    top: 62px;              /* 떠 있는 칩 줄 아래 */
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-tool {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--sh-2, 0 4px 12px rgba(26, 18, 16, 0.15));
    cursor: pointer;
}
.map-tool:hover { border-color: var(--brand); color: var(--brand); }
/* 켜져 있는 상태는 빨강으로 채운다. 테두리만 바꾸면 켠 줄 모른다. */
.map-tool.is-on {
    background: var(--brand);
    border-color: var(--brand-dark);
    color: #FFFFFF;
}
.map-tool .i { width: 20px; height: 20px; }

/* ── 장소 검색 ──────────────────────────────────────── */
.msearch {
    position: absolute;
    left: 10px;
    right: 62px;            /* 단추 묶음을 피한다 */
    top: 62px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100% - 80px);
}
.msearch__form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1px solid var(--line-2);
    box-shadow: var(--sh-3);
}
.msearch__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--t-caption);
}
.msearch__form input:focus { outline: none; }
.msearch__form .btn { height: 34px; min-height: 0; padding: 0 14px; }
.msearch__x {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--smoke);
    cursor: pointer;
}
.msearch__x:hover { background: var(--surface-2); color: var(--ink); }

.msearch__results {
    overflow-y: auto;
    border-radius: var(--r-md);
    background: var(--paper);
    border: 1px solid var(--line-2);
    box-shadow: var(--sh-3);
}
.msearch__list { list-style: none; margin: 0; padding: 4px; }
.msearch__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.msearch__row:hover { background: var(--surface-2); }
.msearch__name { font-weight: 700; font-size: var(--t-caption); }
.msearch__addr { font-size: 0.72rem; color: var(--smoke); }
.msearch__note { margin: 0; padding: 12px 14px; font-size: var(--t-caption); color: var(--smoke); }
/* 남의 데이터를 쓰면 어디 것인지 적는다. */
.msearch__by {
    margin: 0;
    padding: 6px 12px 8px;
    font-size: 0.68rem;
    color: var(--smoke);
    text-align: right;
}

/* ── 로드뷰 ───────────────────────────────────────────
 *
 * 이름을 .rvpane 으로 둔다. `.rv` 는 이미 doc.css 에서 **후기 한 건**이다.
 * 같은 이름을 쓰면 가게 화면의 후기가 전부 position:absolute; bottom:0 이 되어
 * 화면 아래에 겹겹이 쌓인다. check.py 가 이걸 잡아 줬다.
 */
.rvpane {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--ink);

    /*
     * 얼마나 차지할지. 가운데 선을 끌면 이 값이 바뀐다 (roadview.js).
     * 15%~85% 로 묶는다 - 한쪽이 사라지면 나눠 놓은 뜻이 없다.
     */
    --rv: 50%;

    /* 좁은 화면: 아래 절반. 폰 가로로 좌우를 나누면 둘 다 못 쓴다. */
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rv);
    border-top: 2px solid var(--brand);
    box-shadow: 0 -10px 30px rgba(26, 18, 16, 0.28);
}
.rvpane__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    background: var(--brand);
    color: #FFFFFF;
}
.rvpane__where {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-caption);
    font-weight: 700;
}
.rvpane__x {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    cursor: pointer;
}
.rvpane__x:hover { background: rgba(255, 255, 255, 0.32); }
.rvpane__box { flex: 1 1 auto; min-height: 0; }

/* 로드뷰가 열려 있으면 시트는 내려 둔다. 둘이 겹치면 아무것도 안 읽힌다. */
body.rv-open .sheet { display: none; }

/* ── 가운데 선 ──────────────────────────────────────────
 *
 * 잡는 자리는 눈에 보이는 선보다 넓어야 한다. 2px 짜리 선을 손가락으로
 * 정확히 집으라고 하면 아무도 못 집는다.
 */
.rvpane__grip {
    position: absolute;
    z-index: 2;
    background: transparent;
    touch-action: none;
}
.rvpane__grip::after {
    content: '';
    position: absolute;
    background: var(--brand);
    border-radius: 3px;
}
.rvpane__grip:hover::after, .rvpane__grip:focus-visible::after {
    background: #FFFFFF;
}

/* 좁은 화면 — 위쪽 가로 선 */
.rvpane__grip {
    left: 0;
    right: 0;
    top: -9px;
    height: 18px;
    cursor: ns-resize;
}
.rvpane__grip::after {
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
    width: 46px;
    height: 4px;
}

@media (min-width: 900px) {
    /*
     * 넓은 화면 — 오른쪽 절반.
     *
     * 로드뷰는 '지금 보고 있는 지도의 그 지점' 을 보는 것이다. 위아래로
     * 나누면 지도가 납작해져 어디를 보는지 알기 어렵고, 로드뷰도 사람
     * 눈높이의 가로 그림을 반만 보게 된다.
     */
    .rvpane {
        left: auto;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--rv);
        height: auto;
        border-top: 0;
        border-left: 2px solid var(--brand);
        box-shadow: -10px 0 30px rgba(26, 18, 16, 0.28);
    }
    .rvpane__grip {
        left: -9px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 18px;
        height: auto;
        cursor: ew-resize;
    }
    .rvpane__grip::after {
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 46px;
    }
}

.sheet-rv { margin-bottom: 10px; }


/* ── 지도 위에 띄운 음식 칩 줄 ──────────────────────────
 *
 * base.css 가 아니라 여기 둔다. 이 클래스는 지도 화면에서만 쓰이고,
 * 넓은 화면에서 목록 판만큼 밀어 주는 규칙도 여기 있다.
 * 한 선택자가 두 파일에 흩어지면 나중에 한쪽만 고치게 된다.
 */
/*
 * 지도 위에 띄운 칩 줄.
 *
 * 바탕을 두지 않는다. 칩 하나하나가 이미 흰 알약이라 지도 위에서 읽히고,
 * 흰 띠를 깔면 지도를 그만큼 가리는 것이라 띄운 의미가 없다.
 * 대신 위쪽에 옅은 흰 그라디언트를 깔아 지도 글씨와 칩이 엉키지 않게 한다.
 */
.dish-bar--float {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    /*
     * 바탕을 아예 두지 않는다.
     *
     * 처음에는 흰 그라디언트를 깔았다. 칩과 지도 글씨가 엉키지 말라고 둔
     * 것이었는데, 실제로는 지도 위쪽을 뿌옇게 덮어 눈만 피로하게 했다.
     * 칩 하나하나가 이미 테두리와 그림자를 가진 흰 알약이라
     * 그 띠 없이도 읽힌다 — 없는 편이 지도도 더 보인다.
     *
     * 지도를 밀 자리를 남기려고 좌우 여백만 둔다.
     */
    background: none;
    border-bottom: 0;
    padding-bottom: 10px;
    /* 칩이 없는 자리는 지도가 받아야 한다. 안 그러면 이 띠 전체가
       손가락을 먹어서 위쪽에서는 지도를 못 민다. */
    pointer-events: none;
}
.dish-bar--float .dish-chip { pointer-events: auto; }

/* ── 지도 옆 목록 (map-list.js) ─────────────────────────
 *
 * 목록 화면을 따로 두지 않는다. 지도 안에 두어야 '지금 보고 있는 곳'과
 * 목록이 같은 것을 가리킨다. 카카오맵과 같은 구조다.
 */
.mlist {
    position: absolute;
    z-index: 8;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    box-shadow: 0 -10px 30px rgba(26, 18, 16, 0.16);
}

.mlist__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
}
.mlist__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--t-caption);
    font-weight: 600;
    color: var(--smoke);
}
.mlist__title b { color: var(--ink); font-family: var(--font-mono); }
.mlist__x {
    flex: none;
    padding: 5px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--brand);
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 700;
    cursor: pointer;
}

/* ── 줄 세우기 ──────────────────────────────────────────
 *
 * 머리띠 바로 아래 한 줄. 목록과 함께 스크롤되면 500곳 아래로 내려갔을 때
 * 잣대를 바꾸려고 맨 위까지 되돌아와야 하므로 붙박이로 둔다.
 */
.mlist__sort {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.mlist__sbtn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--paper);
    /* 고르지 않은 잣대도 읽혀야 한다. --smoke 는 흰 바탕에서 4.6:1 이다. */
    color: var(--smoke);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.mlist__sbtn:hover { border-color: var(--line-3); color: var(--ink); }
/* 고른 것은 브랜드 빨강 + 흰 글자. 대비 5.9:1 로 멀리서도 읽힌다. */
.mlist__sbtn.is-on {
    border-color: var(--brand);
    background: var(--brand);
    color: #FFFFFF;
}
.mlist__dir { display: grid; place-items: center; margin-left: -1px; }

/* 줄마다 붙는 잣대 값 — 지금 무엇으로 줄 세웠는지 눈에 보이게 한다. */
.mlist__badges { flex: none; display: flex; align-items: center; }
.mlist__by {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.mlist__by b { font-family: var(--font-mono); }
.mlist__by--none {
    background: transparent;
    color: var(--smoke);
    font-weight: 600;
}

.mlist__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mlist__ul { list-style: none; margin: 0; padding: 6px; }

.mlist__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.mlist__row:hover { background: var(--surface-2); }

.mlist__ph {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    line-height: 0;
}
.mlist__ph img { width: 100%; height: 100%; object-fit: cover; }
.mlist__ph--none {
    display: grid;
    place-items: center;
    color: var(--line-3);
}

.mlist__txt {
    /* 이름과 주소가 든 칸. 스크롤 칸(.mlist__body)과 이름이 겹치면
       나중에 한쪽을 고칠 때 다른 쪽이 같이 망가진다. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
}
.mlist__name {
    font-weight: 700;
    font-size: var(--t-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlist__meta {
    font-size: 0.72rem;
    color: var(--smoke);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mlist__lv {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}
.mlist__lv.lv-1 { background: var(--heat-1); color: var(--ink); }
.mlist__lv.lv-2 { background: var(--heat-2); }
.mlist__lv.lv-3 { background: var(--heat-3); }
.mlist__lv.lv-4 { background: var(--heat-4); }
.mlist__lv.lv-5 { background: var(--heat-5); }
.mlist__warn {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--hazard);
    color: var(--ink);
}

.mlist__none, .mlist__more {
    margin: 0;
    padding: 18px 16px;
    font-size: var(--t-caption);
    color: var(--smoke);
    text-align: center;
}

/* ── 좁은 화면: 아래에서 끌어 올린다 ───────────────────
 *
 * 접혀 있을 때는 머리띠만 보인다. 폰에서 목록이 늘 절반을 먹으면
 * 그건 지도 앱이 아니다.
 */
@media (max-width: 899px) {
    .mlist {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100%;
        border-radius: 18px 18px 0 0;
        transform: translateY(calc(100% - var(--mlist-peek, 48px)));
        transition: transform var(--dur-2, 220ms) var(--ease-out, ease);
    }
    .mlist.is-open {
        transform: translateY(0);
        /* 다 덮지 않는다. 위쪽으로 지도가 남아 있어야 '어디의 목록인지' 안다. */
        height: 62%;
    }
    .mlist__bar {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--line-3);
    }
    .mlist__head { padding-top: 15px; }
}

/* ── 넓은 화면: 왼쪽 붙박이 ──────────────────────────── */
@media (min-width: 900px) {
    .mlist {
        left: 0;
        top: 0;
        bottom: 0;
        width: 340px;
        border-right: 1px solid var(--line);
        box-shadow: 6px 0 24px rgba(26, 18, 16, 0.08);
        /*
         * 접으면 왼쪽으로 밀어 넣고 손잡이만 남긴다.
         *
         * 처음에는 늘 열어 두었는데, 지도를 넓게 보고 싶을 때 340px 를
         * 치울 방법이 없었다. 지도 앱에서 지도를 못 넓히는 것은 말이 안 된다.
         * 대신 처음에는 열어 둔다 — 목록이 있다는 것을 알려면 한 번은 보여야 한다.
         */
        transform: translateX(calc(-100% + 42px));
        transition: transform var(--dur-2, 220ms) var(--ease-out, ease);
    }
    .mlist.is-open { transform: translateX(0); }
    .mlist__bar { display: none; }

    /* 접혔을 때는 오른쪽 끝 손잡이만 보인다. */
    .mlist:not(.is-open) .mlist__title { visibility: hidden; }
    .mlist:not(.is-open) .mlist__body { visibility: hidden; }
    /* 줄 세우기 단추도 같이 숨긴다. 접힌 판 밖으로 삐져나오면
       지도 위에 정체 모를 알약 세 개가 떠 있게 된다. */
    .mlist:not(.is-open) .mlist__sort { visibility: hidden; }
    .mlist:not(.is-open) .mlist__x {
        position: absolute;
        right: 3px;
        top: 14px;
        writing-mode: vertical-rl;
        padding: 14px 5px;
    }

    /* 목록이 왼쪽을 차지하므로 지도 위 것들을 그만큼 밀어 준다.
       접으면 손잡이 폭만 피한다. */
    .msearch { left: 56px; transition: left var(--dur-2, 220ms) var(--ease-out, ease); }
    body.mlist-open .msearch { left: 350px; }
    .dish-bar--float { left: 52px; transition: left var(--dur-2, 220ms) var(--ease-out, ease); }
    body.mlist-open .dish-bar--float { left: 344px; }
}


/* ── 이 지역 재검색 ─────────────────────────────────────
 *
 * 지도를 옮겨도 곧바로 받지 않는다. 이 단추를 누를 때만 받는다 —
 * 미는 동안 조회가 계속 나가면 그 통신비는 사용자가 낸다.
 */
.research {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;

    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 9px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--brand-dark);
    background: var(--brand);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 700;
    box-shadow: var(--sh-3);
    cursor: pointer;
}
.research:hover { background: var(--brand-dark); }
.research .i { width: 16px; height: 16px; }

/* 목록 판이 열려 있으면 그만큼 오른쪽으로 민다. */
@media (min-width: 900px) {
    .research { left: calc(50% + 26px); }
    body.mlist-open .research { left: calc(50% + 170px); }
}

/* 끄는 동안에는 지도가 마우스를 가져가면 안 된다. 가져가면 선을 놓친다. */
body.rv-dragging #map, body.rv-dragging .rvpane__box { pointer-events: none; }
body.rv-dragging { user-select: none; cursor: ew-resize; }


/* ── 다이얼 옆 '이 레벨만' ──────────────────────────────
 *
 * 맵기를 다루는 스위치라 맵기를 만지는 자리에 둔다. 한때 음식 칩 줄에
 * 있었는데 거기서는 아무도 못 찾았다 — 한 줄에 다른 축을 섞으면 눈이
 * 그것을 한 벌로 읽는다.
 *
 * 줄을 새로 만들지 않고 다이얼 줄 오른쪽 끝에 붙인다. 줄이 하나 늘면
 * 그만큼 지도가 줄어든다 (지도는 화면의 80%).
 */
.dial__only {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: var(--sp-2);
    padding: 7px 11px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.dial__only .i { width: 14px; height: 14px; color: var(--smoke); }
.dial__only:hover { border-color: var(--brand); }
/* 켜졌다는 것을 색과 체크 표시 둘로 말한다 — 색만으로는 색각 이상이 있는
   사람에게 아무 정보도 아니다. */
.dial__only.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
    font-weight: 700;
}
.dial__only.is-on .i { color: #FFFFFF; }

/* 아주 좁은 화면에서는 글자를 접고 체크 표시만 남긴다. 다이얼 손잡이가
   먼저다 — 이 스위치 때문에 슬라이더가 눌리면 본말이 뒤집힌다. */
@media (max-width: 380px) {
    .dial__only span { display: none; }
    .dial__only { padding: 7px 9px; }
}