/*
 * 맵기 기준 화면.
 *
 * 이 페이지가 이 서비스의 신뢰도 그 자체다. 표 한 장으로 끝내면
 * "그래서 Lv.4가 얼마나 매운데"라는 질문에 아무 답이 안 된다.
 * 단계마다 실제 음식 사진을 붙이는 이유는 장식이 아니라, 숫자를
 * 몸으로 아는 것과 연결해 주는 것이 앵커의 목적이기 때문이다.
 */

.lv-hero {
    position: relative;
    margin: 0 0 var(--sp-6);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--edge), var(--sh-2);
}
.lv-hero img {
    width: 100%;
    height: clamp(160px, 26vw, 260px);
    object-fit: cover;
    filter: saturate(0.9) brightness(0.72);
}
.lv-hero__cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.94));
}
.lv-hero__cap h2 {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--t-h1);
    letter-spacing: -0.02em;
}
.lv-hero__cap p { margin: 4px 0 0; color: var(--ink-dim); font-size: var(--t-caption); }

/* ── 단계 카드 ──────────────────────────────────────────*/

.lv-cards {
    display: grid;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
}

.lvc {
    display: grid;
    grid-template-columns: 128px 1fr;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--edge), var(--sh-1);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
}
.lvc:hover {
    transform: translateY(-2px);
    border-color: var(--line-2);
    box-shadow: var(--edge), var(--sh-3);
}

.lvc__pic { position: relative; background: var(--surface-2); }
.lvc__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 사진이 주인공이 되면 이 서비스는 맛집 앱이 된다.
       레벨 색을 덧씌워 사진을 '척도의 배경'으로 눌러 둔다. */
    filter: saturate(0.75) brightness(0.62);
}
.lvc__pic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--lv, var(--grey-pin)) 38%, transparent),
        transparent 72%);
}
.lvc.lv-5 .lvc__pic::after {
    background-image: repeating-linear-gradient(-45deg,
        rgba(14, 11, 10, 0.85) 0 10px,
        rgba(224, 27, 27, 0.45) 10px 13px,
        rgba(14, 11, 10, 0.85) 13px 16px);
}

.lvc__body { padding: var(--sp-4); min-width: 0; }

.lvc__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.lvc__shu {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    color: var(--smoke);
    white-space: nowrap;
}

.lvc__name {
    margin: 0 0 var(--sp-2);
    font-size: var(--t-h2);
    letter-spacing: -0.01em;
    color: var(--lv-ink, var(--ink));
}
.lvc__name small {
    margin-left: 7px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smoke);
}

.lvc__anchor {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 var(--sp-2);
    padding: 8px 11px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: var(--t-caption);
    font-weight: 600;
}
.lvc__anchor .i { margin-top: 2px; color: var(--lv-ink, var(--heat-2)); }

.lvc__note { margin: 0; font-size: var(--t-caption); color: var(--smoke); }

@media (max-width: 620px) {
    .lvc { grid-template-columns: 92px 1fr; }
    .lvc__body { padding: var(--sp-3); }
    .lvc__shu { margin-left: 0; width: 100%; }
}

/* ── 상대 표시 표 ───────────────────────────────────────*/
.rel-rows { display: grid; gap: 6px; margin: 0 0 var(--sp-4); }
.rel-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--t-caption);
}
.rel-row__d {
    flex: 0 0 92px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--smoke);
}
.rel-row__t { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }

/* ── 길어진 본문 ─────────────────────────────────────
 *
 * 이 페이지는 검색으로 들어온 사람이 착지하는 거의 유일한 곳이다.
 * 그래서 '맵기 기준' 하나만 적어 두지 않고, 매운 걸 먹을 때 실제로
 * 궁금해지는 것들을 함께 둔다. 대신 길어지므로 목차가 필요하다.
 */

.lv-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: var(--sp-5) 0;
    padding: 0;
    list-style: none;
}
.lv-toc a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(26, 18, 16, 0.03);
    color: var(--ink-dim);
    font-size: var(--t-caption);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lv-toc a:hover { color: var(--ink); border-color: var(--line-3); }

/* 마실 것 — 되는 것과 안 되는 것을 색으로 가른다.
 * 물이 '안 되는 쪽'에 있다는 게 이 표의 전부다. */
.drink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: var(--sp-4) 0;
}
.drink {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 3px;
}
.drink p { margin: 0; font-size: var(--t-caption); color: var(--smoke); }
.drink__k {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px !important;
    font-weight: 700;
    color: var(--ink) !important;
}
.drink--good { border-left-color: var(--safe); }
.drink--good .drink__k .i { color: var(--safe); }
.drink--bad { border-left-color: var(--heat-3); }
.drink--bad .drink__k .i { color: var(--heat-3); }

/* 고통 지표 설명 */
.pain-legend {
    display: grid;
    gap: 9px;
    margin: var(--sp-4) 0;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.pain-legend p {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.pain-legend .i { color: var(--hazard-ink); flex: none; }
.pain-legend b { color: var(--ink); }

/* 내 내성 고르기 — 열 스케일을 그대로 쓴다 */
.self-rows { display: grid; gap: 6px; margin: var(--sp-4) 0; }
.self-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid currentColor;
    font-size: var(--t-caption);
}
.self-row > span:last-child { color: var(--ink-dim); }
.self-row__lv {
    flex: none;
    width: 44px;
    font-family: var(--font-mono);
    font-weight: 700;
}
.self-row.lv-1 { color: var(--heat-1-ink); }
.self-row.lv-2 { color: var(--heat-2-ink); }
.self-row.lv-3 { color: var(--heat-3-ink); }
.self-row.lv-4 { color: var(--heat-4-ink); }
/* Lv.5 는 검정이라 글자로 쓰면 안 보인다. 표지에서는 위험색을 쓴다. */
.self-row.lv-5 { color: var(--hazard-ink); }

/* 가게에서 쓰는 말 */
.say-rows { display: grid; gap: 8px; margin: var(--sp-4) 0; }
.say-row {
    padding: 11px var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
}
.say-row b { display: block; color: var(--ink); font-size: var(--t-body); }
.say-row span {
    display: block;
    margin-top: 3px;
    font-size: var(--t-caption);
    color: var(--smoke);
}

.doc .fine {
    font-size: var(--t-caption);
    color: var(--smoke);
}

@media (max-width: 480px) {
    .self-row { gap: 9px; padding: 10px 12px; }
    .self-row__lv { width: 38px; }
}