/* 문서형 페이지에서만 쓰는 것들 */

/* FAQ 아코디언 */
.faq-list { display: grid; gap: 10px; }
.faq {
    background: var(--surface);
    border: 1px solid rgba(26, 18, 16, 0.1);
    border-radius: var(--r-md);
    padding: 14px 18px;
}
.faq summary {
    cursor: pointer;
    font-weight: 600;
    line-height: 1.5;
    list-style: none;
}
/* 사파리는 기본 삼각형을 따로 감춰야 한다 */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    float: right;
    margin-left: 12px;
    color: var(--smoke);
    font-family: var(--font-mono);
}
.faq[open] summary::after { content: '\2212'; }
.faq p { margin: 10px 0 0; color: var(--ink); opacity: .92; }

/* 등록 신청 폼 */
.form { max-width: 640px; }
.field { margin-bottom: var(--sp-4); }
.field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.field label .req { color: var(--brand); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(26, 18, 16, 0.18);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.field textarea { min-height: 110px; resize: vertical; }
.field .help { margin: 6px 0 0; font-size: var(--t-caption); color: var(--smoke); }

/* 맵기 선택 — 라디오지만 칩처럼 보이게 */
.lv-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.lv-pick label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(26, 18, 16, 0.2);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 700;
    cursor: pointer;
}
.lv-pick input:checked + label {
    background: var(--lv);
    color: var(--lv-on);
    border-color: transparent;
}
.lv-pick input:focus-visible + label {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

.notice {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: rgba(245, 197, 24, 0.09);
    border: 1px solid rgba(245, 197, 24, 0.3);
    color: var(--ink);
    font-size: var(--t-caption);
    margin-bottom: var(--sp-4);
}
.notice strong { color: var(--hazard-ink); }

/* ── 목록 보기 ──────────────────────────────────────────
   지도와 같은 정보를 읽을 수 있는 형태로 담는다. */
.store-list { display: grid; gap: var(--sp-3); }

.store-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);
    box-shadow: var(--edge), var(--sh-1);
    overflow: hidden;
    transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}
/* 왼쪽 띠 하나로 목록을 훑을 수 있게 한다. 글을 읽어야 맵기를 아는 목록은 쓸모가 없다. */
.store-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--lv, var(--grey-pin));
}
.store-card.lv-5::before {
    background-image: repeating-linear-gradient(-45deg,
        var(--heat-5) 0 5px, var(--heat-5-line) 5px 7px);
}
.store-card:hover {
    border-color: var(--line-2);
    transform: translateY(-1px);
    box-shadow: var(--edge), var(--sh-2);
}

.store-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 6px;
}
.store-card__head h3 { margin: 0; font-size: var(--t-h2); letter-spacing: -0.015em; }
.store-card__head h3 a { color: var(--ink); }
.store-card__head h3 a:hover { color: var(--brand); text-decoration: none; }
.store-card__meta { margin: 0 0 10px; color: var(--smoke); font-size: var(--t-caption); }
.store-card__line { margin: 0 0 4px; font-size: var(--t-caption); }
.store-card__line .k {
    display: inline-block;
    min-width: 34px;
    color: var(--smoke);
}
.store-card__warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: var(--r-xs);
    background: rgba(245, 197, 24, 0.09);
    color: var(--hazard-ink);
    font-size: var(--t-caption);
}
.store-card__warn .i { margin-top: 2px; }
.store-card__rel { margin: 8px 0 0; font-size: var(--t-caption); font-weight: 600; }
.store-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.store-card__act { margin: 12px 0 0; }
.store-card__act .btn { padding: 8px 14px; font-size: var(--t-caption); }

.store-card__tags span {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: 12px;
    color: var(--ink);
}

/* ── 블로그 링크 ─────────────────────────────────────── */

.blog-note {
    font-size: var(--t-caption);
    color: var(--smoke);
    margin: 0 0 var(--sp-3);
}
.blog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.blog a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid rgba(26, 18, 16, 0.1);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
}
.blog a:hover { border-color: rgba(245, 197, 24, 0.5); }
.blog__where {
    flex: none;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--smoke);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: rgba(26, 18, 16, 0.08);
}
.blog__title {
    flex: 1;
    min-width: 0;
    font-size: var(--t-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog__go { flex: none; color: var(--smoke); }

/* ── 후기 ────────────────────────────────────────────── */

.rv-none {
    font-size: var(--t-caption);
    color: var(--smoke);
    padding: 18px;
    background: var(--surface);
    border: 1px dashed rgba(26, 18, 16, 0.16);
    border-radius: var(--r-md);
    margin: 0;
}
.rv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rv {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    /* 왼쪽 띠 하나로 몇 단계였는지 훑어볼 수 있게 한다.
       글을 다 읽어야 맵기를 아는 것은 목록으로서 쓸모가 없다. */
    border-left: 3px solid var(--lv, rgba(26, 18, 16, 0.2));
}
.rv__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-caption);
    margin-bottom: 6px;
}
.rv__head b { font-weight: 700; }
.rv__lv {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--lv, var(--grey-pin));
    color: var(--lv-on, #fff);
}
.rv__when { margin-left: auto; color: var(--smoke); font-size: 11px; }
.rv__text {
    margin: 0;
    font-size: var(--t-caption);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.rv-form {
    margin-top: var(--sp-5);
    background: var(--surface);
    border: 1px solid rgba(26, 18, 16, 0.1);
    border-radius: var(--r-md);
    padding: 18px;
}
.rv-form__q { font-weight: 700; margin-bottom: 10px; }
.rv-vote { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-vote button {
    appearance: none;
    font: inherit;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 15px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(26, 18, 16, 0.03);
    color: var(--smoke);
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rv-vote button:hover { color: var(--ink); border-color: var(--line-3); }
.rv-vote button:active { transform: scale(0.95); }
.rv-vote button.is-on {
    background: var(--lv);
    color: var(--lv-on);
    border-color: transparent;
    box-shadow: var(--edge), 0 3px 12px rgba(0, 0, 0, 0.35);
}
/* Lv.5 는 검정이라 켜져도 꺼진 것처럼 보인다. 줄무늬로 켜졌음을 알린다. */
.rv-vote button.lv-5.is-on {
    background-image: repeating-linear-gradient(-45deg,
        var(--heat-5) 0 6px, #1A1210 6px 8px, var(--heat-5-line) 8px 10px, #1A1210 10px 12px);
}
.rv-form__hint {
    font-size: 11px;
    color: var(--smoke);
    margin: 10px 0 12px;
}
.rv-form__text {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    font: inherit;
    font-size: var(--t-caption);
    line-height: 1.6;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(26, 18, 16, 0.22);
    background: var(--paper);
    color: var(--ink);
}
.rv-form__text:focus { outline: none; border-color: var(--hazard-ink); }
.rv-form__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.rv-form__date { font-size: 11px; color: var(--smoke); }
.rv-form__date input {
    font: inherit;
    font-size: var(--t-caption);
    margin-left: 6px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(26, 18, 16, 0.22);
    background: var(--paper);
    color: var(--ink);
}
.rv-form__msg { font-size: var(--t-caption); color: var(--smoke); margin: 10px 0 0; }


/* ── 아이콘이 섞이는 자리들 ─────────────────────────────*/
.store-card__act { margin: 14px 0 0; }
.store-card__act .btn { padding: 8px 15px; font-size: var(--t-caption); }
.store-card__head .lv-badge { flex: none; }
.store-card__line .peppers .i { width: 12px; height: 12px; }

/* 링크로 감싼 카드 제목이 줄바꿈될 때 아래 줄과 붙지 않게 */
.store-card__head { gap: var(--sp-2) var(--sp-3); }

/* 목록이 비었을 때. "결과 없음"으로 끝내지 않는다. (기획서 D-6) */
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
}
.empty-state__i {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--brand-dark);
}
.empty-state__i .i { width: 26px; height: 26px; }
.empty-state p { margin: 0; color: var(--smoke); max-width: 34ch; }


/* 가게 화면 머리의 레벨 띠 */
.store-bar {
    height: 4px;
    width: 56px;
    margin: 0 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--lv, var(--grey-pin));
}
.store-bar.lv-5 {
    background-image: repeating-linear-gradient(-45deg,
        var(--heat-5) 0 5px, var(--heat-5-line) 5px 7px);
}

/* ── 레벨 고르기: 카드형 ────────────────────────────────
   알약 하나에 "🌶🌶🌶 Lv.3 매운맛"을 넣으면 다섯 개가 두 줄로 흘러
   무엇을 골랐는지 훑기 어렵다. 세로로 쌓고 기준 음식을 함께 적는다 —
   숫자만으로는 사람마다 다른 것을 고른다. */
.lv-pick--cards {
    display: grid;
    gap: 8px;
}
.lv-pick--cards label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-2);
    font-family: var(--font-body);
    font-weight: 500;
    transition: border-color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}
.lv-pick--cards label:hover { border-color: var(--line-3); }
.lv-pick--cards .peppers {
    grid-row: 1 / 3;
    color: var(--lv-ink, var(--smoke));
}
.lv-pick--cards .lv-pick__t {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--t-caption);
    color: var(--ink);
}
.lv-pick--cards .lv-pick__a {
    font-size: var(--t-caption);
    color: var(--smoke);
}
.lv-pick--cards input:checked + label {
    background: color-mix(in srgb, var(--lv) 14%, var(--surface));
    border-color: var(--lv-ink, var(--lv));
    color: var(--ink);
}
.lv-pick--cards input:checked + label .lv-pick__t { color: var(--lv-ink, var(--ink)); }
/* 고른 것 왼쪽에 체크 대신 색 띠 하나. 색만으로 구분하지 않기 위한 두 번째 신호다. */
.lv-pick--cards input:checked + label::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--lv-ink, var(--lv));
}
.lv-pick--cards label { position: relative; }

/* ── 후기 폼 ─────────────────────────────────────────── */
.rv-form__q {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rv-form__q .i { color: var(--brand); }
.rv-form__pick {
    margin: 10px 0 0;
    font-size: var(--t-caption);
    color: var(--ink-dim);
    min-height: 1.4em;   /* 글자가 생겼다 사라질 때 아래가 들썩이지 않게 */
}
.rv-form__date { display: inline-flex; align-items: center; gap: 6px; }
.rv-form__date .i { color: var(--smoke); }

/* 고르라고 알려 줄 때 한 번 흔든다. 빨간 글씨만으로는 위쪽 버튼을 못 찾는다. */
.rv-vote.is-asking { animation: askShake 420ms var(--ease); }
@keyframes askShake {
    0%, 100% { transform: translateX(0) }
    20% { transform: translateX(-5px) }
    45% { transform: translateX(4px) }
    70% { transform: translateX(-2px) }
}
@media (prefers-reduced-motion: reduce) {
    .rv-vote.is-asking { animation: none; outline: 2px solid var(--heat-3); outline-offset: 4px; }
}

/* 필수 표시 */
.field label .req { cursor: help; }

/* ── 문서 차례 ───────────────────────────────────────────
   약관·방침은 길다. 어디에 무엇이 있는지 먼저 보여 주지 않으면
   사람들은 필요한 조항 하나를 찾으려고 전체를 스크롤한다. */
.doc-toc {
    margin: 0 0 var(--sp-6);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--edge);
}
.doc-toc__t {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: var(--t-caption);
    font-weight: 700;
    color: var(--smoke);
    letter-spacing: 0.04em;
}
.doc-toc__t .i { color: var(--brand); }
.doc-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: var(--sp-5);
}
.doc-toc li { margin: 0 0 6px; break-inside: avoid; }
.doc-toc a {
    display: block;
    padding: 3px 0;
    color: var(--ink-dim);
    font-size: var(--t-caption);
}
.doc-toc a:hover { color: var(--brand); text-decoration: none; }
@media (max-width: 620px) {
    .doc-toc ol { columns: 1; }
}

/* 방금 뛰어간 절을 잠깐 밝힌다. 어디에 도착했는지 보여야 링크가 일한 것이다. */
.doc h2:target {
    animation: tocLand 1.6s var(--ease);
}
@keyframes tocLand {
    0%, 55% { border-top-color: var(--heat-3); color: var(--brand) }
    100% { border-top-color: var(--line); color: inherit }
}

/* ── FAQ ─────────────────────────────────────────────────*/
.faq summary { display: flex; align-items: center; gap: 9px; padding-right: 34px; }
.faq summary .i { color: var(--brand); flex: none; }
.faq[open] { border-color: var(--line-2); }

.faq-more {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(135deg, rgba(255, 154, 46, 0.1), transparent),
                var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
}
.faq-more__i {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--brand-dark);
}
.faq-more h3 { margin: 0; font-size: var(--t-h2); }
.faq-more p { margin: 2px 0 0; color: var(--smoke); font-size: var(--t-caption); }
.faq-more .btn { margin-left: auto; }
@media (max-width: 560px) {
    .faq-more .btn { margin-left: 0; width: 100%; }
}

/* ── 누를 수 있는 카드 ───────────────────────────────────
   문의 페이지의 카드는 '읽는 것'이 아니라 '누르는 것'이다.
   눌러도 되는지 보이지 않으면 아무도 누르지 않는다. */
.card--act {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}
.card--act:hover {
    text-decoration: none;
    border-color: var(--line-3);
    transform: translateY(-2px);
    box-shadow: var(--edge), var(--sh-2);
}
.card--act:active { transform: translateY(0); }
.card__i {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: var(--sp-3);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--brand-dark);
}
.card--act h3 { margin: 0 0 4px; font-size: var(--t-h2); }
.card--act p { margin: 0; font-size: var(--t-caption); }
.card__sub { margin-top: 6px !important; color: var(--smoke); }

/* ── 가게 화면의 동작 줄 ─────────────────────────────────
 *
 * 공유받은 사람이 처음 도착하는 곳이다. 여기서 할 일(길찾기·저장·공유)이
 * 스크롤 아래에 숨어 있으면 그 사람은 아무것도 안 하고 나간다.
 */
.store-acts {
    display: flex;
    gap: 8px;
    margin-top: var(--sp-5);
}
.store-acts .btn { flex: 0 1 auto; }
.store-acts .btn--primary { flex: 1 1 auto; }

.blog__go { display: inline-flex; }

@media (max-width: 800px) {
    /* 아래에 붙인다. 탭바 위, 화면 밖으로 나가지 않는 자리. */
    .store-acts {
        position: fixed;
        left: 0; right: 0;
        bottom: calc(var(--tabbar-h) + var(--safe-b));
        z-index: 65;
        margin: 0;
        padding: 10px var(--sp-4);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px) saturate(1.3);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        border-top: 1px solid var(--line);
    }
    /* 고정된 줄이 본문 끝을 가리지 않게 자리를 비운다 */
    body.store-page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 66px); }
}

/* 아주 좁으면 보조 버튼은 아이콘만 남긴다.
   네 개를 글자까지 넣으면 두 줄이 되고, 두 줄이 되면 지도가 그만큼 가려진다. */
@media (max-width: 480px) {
    .store-acts .btn--ghost .btn__t { display: none; }
    .store-acts .btn--ghost { padding: 12px 14px; }
}

/* 특히 중요한 조항 표시. ★ 하나로는 무슨 뜻인지 알 수 없다. */
.doc-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: rgba(245, 197, 24, 0.14);
    color: var(--hazard-ink);
    font-family: var(--font-body);
    font-size: var(--t-micro);
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
}

/* ── 고통 지표 (기획서 부록 C-2) ─────────────────────────
 *
 * 별점 4.2 는 정보량이 거의 없다. "다음 날 후회 87%"는 결정을 바꾼다.
 * 그래서 이건 부가 정보가 아니라 이 화면의 주된 볼거리 중 하나다.
 */

/* 리뷰 폼의 체크 목록 */
.pain-pick {
    margin: var(--sp-4) 0 0;
    padding: 0;
    border: 0;
}
.pain-pick legend {
    padding: 0;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: var(--t-caption);
    color: var(--ink);
}
.pain-pick legend span {
    font-weight: 400;
    color: var(--smoke);
}
.pain-pick__row { display: flex; flex-wrap: wrap; gap: 7px; }

.pain-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pain-opt__box {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px 9px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(26, 18, 16, 0.03);
    color: var(--smoke);
    font-size: var(--t-caption);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}
.pain-opt__box:hover { color: var(--ink); border-color: var(--line-3); }
.pain-opt input:checked + .pain-opt__box {
    color: var(--hazard-ink);
    border-color: rgba(245, 197, 24, 0.55);
    background: rgba(245, 197, 24, 0.12);
}
/* '아무렇지 않았어요'는 겪은 것이 아니라 겪지 않은 것이다. 색을 나눈다. */
.pain-opt--none input:checked + .pain-opt__box {
    color: var(--safe);
    border-color: rgba(111, 163, 131, 0.55);
    background: rgba(111, 163, 131, 0.12);
}
.pain-opt input:focus-visible + .pain-opt__box {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

/* 가게 화면의 막대 */
.pain-stats {
    display: grid;
    gap: 7px;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--edge);
}
.pain-stats__n {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.pain-stats__n .i { color: var(--smoke); }

.pain-bar {
    display: grid;
    grid-template-columns: 20px 60px 1fr 42px;
    align-items: center;
    gap: 9px;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.pain-bar__i { display: grid; place-items: center; }
.pain-bar__track {
    height: 9px;
    border-radius: var(--r-pill);
    background: rgba(26, 18, 16, 0.08);
    overflow: hidden;
}
.pain-bar__fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--heat-2);
    transition: width var(--dur-3) var(--ease-out);
}
.pain-bar__v {
    font-family: var(--font-mono);
    text-align: right;
    color: var(--ink-dim);
}
/* 최고값 하나만 강조한다. 넷을 다 강조하면 아무것도 강조되지 않는다. */
.pain-bar.is-top { color: var(--ink); }
.pain-bar.is-top .pain-bar__i { color: var(--hazard-ink); }
.pain-bar.is-top .pain-bar__fill { background: var(--heat-ramp-soft); }
.pain-bar.is-top .pain-bar__v { color: var(--hazard-ink); font-weight: 700; }

@media (max-width: 420px) {
    .pain-bar { grid-template-columns: 18px 52px 1fr 38px; gap: 7px; }
}

/* 카드·시트의 요약 배지 하나 */
.pain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    border-radius: var(--r-pill);
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.3);
    color: var(--hazard-ink);
    font-size: var(--t-caption);
    font-weight: 600;
    white-space: nowrap;
}
.pain-badge .i { width: 14px; height: 14px; }
.store-card__pain { margin: 10px 0 0; }

/* ── 후기 번역 ───────────────────────────────────────
 *
 * 이 서비스는 처음부터 외국인 여행객을 염두에 뒀는데, 정작 판단에 가장
 * 필요한 글(다녀온 사람의 후기)이 전부 한국어다. 못 읽으면 없는 것과 같다.
 *
 * 번역문은 원문과 **다르게 보여야 한다.** 기계가 옮긴 말을 사람이 쓴 말과
 * 같은 모양으로 두면, 읽는 사람은 그게 원래 문장인 줄 안다.
 */

.rv-trbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-4);
    padding: 10px var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.rv-trbar__k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-caption);
    font-weight: 700;
    color: var(--ink-dim);
}
.rv-trbar__k .i { color: var(--brand); }
.rv-trbar__sel {
    padding: 6px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface-2, rgba(26, 18, 16, 0.04));
    color: var(--ink);
    font: inherit;
    font-size: var(--t-caption);
}
.rv-trbar__note {
    flex: 1 1 100%;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.rv-trbar__note:empty { display: none; }

.rv__tr { margin: 6px 0 0; }
.rv__trbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: none;
    color: var(--smoke);
    font: inherit;
    font-size: var(--t-caption);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rv__trbtn:hover:not(:disabled) { color: var(--ink); border-color: var(--line-3); }
.rv__trbtn:disabled { opacity: 0.5; cursor: default; }
.rv__trbtn .i { color: var(--brand); }

/* 번역문임을 눈으로도 알 수 있게 한다.
 * 왼쪽 선 하나로 "이건 우리가 옮긴 말"이라고 말하는 셈이다. */
.rv__text.is-tr {
    padding-left: 11px;
    border-left: 2px solid var(--heat-2);
    color: var(--ink-dim);
    font-style: italic;
}
.rv__text.is-tr::after {
    content: " · machine translation";
    font-style: normal;
    font-size: var(--t-caption);
    color: var(--smoke);
}

/* ── 가게 사진 ───────────────────────────────────────── */

/*
 * 우리가 찍은 사진이 아니다. 남의 서버 그림을 주소로 가리킨다.
 * 그래서 출처를 반드시 함께 적고, 비율을 고정해 둔다 —
 * 어떤 크기가 올지 모르는데 높이를 안 잡으면 그림이 뜨는 순간
 * 아래 내용이 통째로 밀린다.
 */
.store-photo {
    margin: 0 0 var(--sp-4);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}
/* 사진을 감싼 링크에만 line-height:0 을 준다. 이걸 .store-photo a 로
   두면 캡션 안의 출처 링크까지 줄 높이가 0이 되어 글자가 서로 겹친다. */
.store-photo > a { display: block; line-height: 0; }
.store-photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.store-photo figcaption {
    font-size: 11px;
    color: var(--smoke);
    padding: 8px 12px;
    line-height: 1.5;
}
.store-photo figcaption a { color: var(--smoke); text-decoration: underline; }

/* 목록 카드의 작은 사진 */
.card-photo {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface-2);
}

/* 사진 제목에 출처가 들어 있는 경우가 많다 ("… | 맛집검색 식신").
   호스트 이름만으로는 어디서 온 사진인지 모르는 사람이 대부분이라 같이 적는다. */
.store-photo__t {
    display: block;
    color: var(--ink);
    margin-bottom: 2px;
}

/* ── 가게 신고 ───────────────────────────────────────── */

.store-foot { margin-top: var(--sp-5); }

/* 눈에 띄되 앞에 나서지는 않게. 신고는 흔한 일이 아니다. */
.report-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--smoke);
    font: inherit;
    font-size: var(--t-caption);
    cursor: pointer;
    text-decoration: underline;
}
.report-link:hover { color: var(--brand); }

.report-reasons { display: grid; gap: 6px; margin: var(--sp-3) 0; }
.report-reason {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.report-reason:hover { border-color: var(--brand); }
/* 고른 항목은 테두리로 말한다. 색만 바꾸면 색맹인 사람이 못 읽는다. */
.report-reason:has(input:checked) {
    border-color: var(--brand);
    background: rgba(224, 27, 27, 0.05);
}
.report-reason input { margin-top: 2px; accent-color: var(--brand); flex: none; }
.report-reason b { display: block; font-size: var(--t-body); font-weight: 600; }
.report-reason em {
    display: block;
    font-style: normal;
    font-size: var(--t-caption);
    color: var(--smoke);
    margin-top: 2px;
}

/* ── 등록 신청서: 메뉴·좌표·사진 ─────────────────────── */

.menu-row {
    display: grid;
    grid-template-columns: 1fr 92px 132px 34px;
    gap: 6px;
    margin-bottom: 6px;
}
.menu-row input,
.menu-row select {
    width: 100%;
    font: inherit;
    font-size: var(--t-caption);
    padding: 9px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink);
    min-width: 0;
}
.menu-row input:focus, .menu-row select:focus {
    outline: none; border-color: var(--brand);
}
.menu-del {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--smoke);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.menu-del:hover { color: var(--brand); border-color: var(--brand); }

@media (max-width: 560px) {
    /* 좁은 화면에서 네 칸은 각 칸이 글자보다 좁아진다. 두 줄로 접는다. */
    .menu-row {
        grid-template-columns: 1fr 34px;
        grid-template-areas: "name del" "price lv";
        row-gap: 6px;
    }
    .menu-row .menu-name { grid-area: name; }
    .menu-row .menu-del { grid-area: del; }
    .menu-row .menu-price { grid-area: price; }
    .menu-row .menu-lv { grid-area: lv; }
}

.apply-map {
    width: 100%;
    height: 240px;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line-2);
    background: var(--surface-2);
}
.apply-map__down {
    padding: 20px;
    font-size: var(--t-caption);
    color: var(--smoke);
    text-align: center;
}
#applyCoord.is-ok { color: var(--safe); }

.apply-file {
    width: 100%;
    font: inherit;
    font-size: var(--t-caption);
    padding: 10px;
    border: 1px dashed var(--line-3);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
}
.apply-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.apply-photo { position: relative; margin: 0; }
.apply-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    display: block;
}
.apply-photo__x {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(26, 18, 16, 0.72);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.opt-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    font-size: var(--t-body);
    cursor: pointer;
}
.opt-check input { width: 17px; height: 17px; accent-color: var(--brand); }

/* ── 가게 사진 여러 장 ───────────────────────────────── */

.photos { margin: 0 0 var(--sp-4); }

.photos__main {
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
    position: relative;
}
.photos__main > a { display: block; line-height: 0; }
.photos__main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
/* 몇 장 중 몇 번째인지. 없으면 옆으로 더 있는 줄 모른다. */
.photos__n {
    position: absolute;
    top: 10px; right: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: rgba(26, 18, 16, 0.66);
    color: #fff;
}
.photos__main figcaption {
    font-size: 11px;
    color: var(--smoke);
    padding: 8px 12px;
    line-height: 1.5;
}
.photos__main figcaption a { color: var(--smoke); text-decoration: underline; }
.photos__t2 { display: block; color: var(--ink); margin-bottom: 2px; }

.photos__strip {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.photos__t {
    flex: none;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
    line-height: 0;
}
.photos__t.is-on { border-color: var(--brand); }
.photos__t img { width: 100%; height: 100%; object-fit: cover; }

.photos__acts {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.photos__del {
    border: 0;
    background: none;
    color: var(--smoke);
    font: inherit;
    font-size: var(--t-caption);
    text-decoration: underline;
    cursor: pointer;
}
.photos__del:hover { color: var(--brand); }

.photos-none {
    padding: 20px;
    border: 1px dashed var(--line-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    text-align: center;
}
.photos-none p {
    margin: 0 0 12px;
    font-size: var(--t-caption);
    color: var(--smoke);
    line-height: 1.6;
}


/* ── 맛 평점 별 (taste.js) ──────────────────────────────
 *
 * 글자 ★ 를 안 쓴다. 기기마다 모양이 다르고 반 개를 못 그린다 —
 * 4.5 를 5 로 반올림해 보이면 그 0.5 만큼이 거짓말이다.
 * 그래서 빈 별 위에 채운 별을 가로로 잘라 얹는다.
 */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars__s {
    position: relative;
    width: var(--sz, 15px);
    height: var(--sz, 15px);
    background: var(--line-3);
    -webkit-mask: var(--star-mask) center / contain no-repeat;
    mask: var(--star-mask) center / contain no-repeat;
}
.stars__s::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--fill, 0%);
    background: var(--hazard);
    -webkit-mask: var(--star-mask) left center / var(--sz, 15px) var(--sz, 15px) no-repeat;
    mask: var(--star-mask) left center / var(--sz, 15px) var(--sz, 15px) no-repeat;
}

.taste-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: var(--t-caption);
}
.taste-row__key { font-weight: 700; color: var(--smoke); }
.taste-row__num { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); }
.taste-row__n { color: var(--smoke); }
.taste-row--none .taste-row__val { color: var(--smoke); }

/* 후기 쓰기 — 별 고르기 */
.taste-pick { display: flex; gap: 4px; margin: 6px 0 2px; }
.taste-pick__s {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: var(--line-3);
    -webkit-mask: var(--star-mask) center / contain no-repeat;
    mask: var(--star-mask) center / contain no-repeat;
    cursor: pointer;
}
.taste-pick__s.is-on { background: var(--hazard); }
.taste-pick__s:hover { background: var(--hazard-ink); }

/* 후기 한 건에 붙는 별 + 사진 */
.rv-item__taste { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.rv-item__photos { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.rv-item__photos a {
    flex: none;
    width: 84px; height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--line);
}
.rv-item__photos img { width: 100%; height: 100%; object-fit: cover; }

/* 후기 쓰기 — 사진 고르기 */
.rv-photos { margin: 10px 0 2px; }
.rv-photos__pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rv-photos__one {
    position: relative;
    width: 72px; height: 72px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.rv-photos__one img { width: 100%; height: 100%; object-fit: cover; }
.rv-photos__x {
    position: absolute;
    top: 2px; right: 2px;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(26, 18, 16, 0.72);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}


/* ── 가게 화면의 '지도로' ────────────────────────────────
 *
 * 브라우저 뒤로가기와 같은 일이지만, 화면 안에 있어야 한 손으로 닿는다.
 * 폰의 뒤로가기 제스처를 모르는 사람도 많다.
 */
.store-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--sp-3) 0 var(--sp-2);
    padding: 7px 14px 7px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-dim);
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 600;
    cursor: pointer;
}
.store-back:hover { border-color: var(--brand); color: var(--brand-dark); }
.store-back .i { width: 16px; height: 16px; }

/*
 * 번역본은 참고용이라는 고지.
 *
 * 약관·방침을 열두 언어로 옮겨 두면, 각 번역본이 저마다 효력을 주장할
 * 여지가 생긴다. 어느 판이 원본인지 문서 안에 적혀 있어야 한다.
 *
 * 눈에 띄되 본문을 가리지 않는 자리다 — 시행일 바로 밑, 조문 위.
 */
.doc-lang {
    margin: 10px 0 22px;
    padding: 10px 14px;
    border-left: 3px solid var(--line-2);
    background: var(--surface-2);
    color: var(--smoke);
    font-size: var(--t-caption);
    line-height: 1.6;
}