/*
 * 지역·요리 화면. (tools/pages.js 가 만드는 418장)
 *
 * 새 색을 만들지 않는다. 맵기 색은 tokens.css 의 `.lv-N` 이 넣어 주는
 * `--lv-ink` 를 쓴다 — 그것이 **흰 종이 위에서 읽히도록** 만들어 둔 값이다.
 * `--lv` 를 바탕으로 깔고 흰 글자를 얹으면 Lv.1(노랑)에서 대비가 무너진다.
 */

/* ── 빵가루 ─────────────────────────────────────────── */

.crumbs {
    font-size: var(--t-caption);
    color: var(--smoke);
    margin: 0 0 var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-2);
    align-items: center;
}

.crumbs a { color: var(--smoke); }
.crumbs a:hover { color: var(--ink); }

/* 구분자를 글자로 두지 않는다 — 화면 글자에 특수기호를 안 쓴다는 규칙이
   있고, 글꼴마다 자리가 달라진다. 테두리로 그린다. */
.crumbs > * + *::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: var(--sp-2);
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.6;
}

.crumbs [aria-current] { color: var(--ink); }

/* ── 고지 줄 ────────────────────────────────────────── */

/*
 * "이 숫자는 추정값입니다".
 *
 * 눈에 띄되 본문을 밀어내지 않아야 한다. 게시된 곳 전부가 추정값이라
 * 이 줄은 모든 화면에 있고, 늘 있는 것이 시끄러우면 아무도 안 읽는다.
 */
.doc .note {
    font-size: var(--t-caption);
    color: var(--ink-dim);
    background: var(--surface-2);
    border-left: 3px solid var(--line);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-5);
    max-width: 72ch;
}

.doc .note strong { color: var(--ink); }

/* ── 맵기 딱지 ──────────────────────────────────────── */

/*
 * 목록 한 줄의 'Lv.4'.
 *
 * 바탕을 칠하지 않고 글자와 테두리에만 색을 준다. 표의 한 칸이라
 * 색 덩어리가 늘어서면 목록 전체가 읽기 어려워지고, 무엇보다
 * Lv.1 의 노랑 위에 흰 글자는 대비가 안 나온다.
 */
.lvtag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 700;
    white-space: nowrap;
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    color: var(--lv-ink, var(--ink-dim));
    border: 1px solid currentColor;
}

.lvtag.lv-0 {
    color: var(--smoke);
    font-weight: 500;
}

/* '고를 수 있어요'. 숫자 옆의 곁말이라 숫자보다 조용해야 한다. */
.lvtag__why {
    font-size: var(--t-caption);
    color: var(--smoke);
    white-space: nowrap;
}

/* ── 링크 묶음 ──────────────────────────────────────── */

/*
 * 시·군·구 스물다섯 개, 요리 열일곱 개가 여기 들어온다.
 * 글자 길이가 제각각이라(‘구’ 한 글자부터 ‘세종특별자치시’까지)
 * 칸 너비를 못 박지 않는다 — auto-fill 이 알아서 나눈다.
 */
.linkgrid {
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-2);
}

.linkgrid li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.linkgrid li:hover { border-color: var(--ink-dim); }

.linkgrid a {
    font-weight: 600;
    text-decoration: none;
    /* 칸 전체가 눌리게 한다. 손가락으로 글자만 맞히게 두지 않는다. */
    flex: 1;
}

.linkgrid a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.linkgrid li { position: relative; }

.linkgrid__n {
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    color: var(--smoke);
    /* 숫자만 드는 칸이라 오히려 못 박아야 자릿수가 세로로 맞는다. */
    min-width: 4.5ch;
    text-align: right;
}

/* ── 목록 표 ────────────────────────────────────────── */

/*
 * 시·군·구 하나에 최대 589줄이 들어온다. 좁은 화면에서 네 칸을 다
 * 밀어 넣으면 가게 이름이 한 글자씩 세로로 쌓인다. 그래서 좁을 때는
 * '요리' 칸을 접는다 — 이름·맵기·동네가 먼저다.
 */
.doc table a { font-weight: 600; }

@media (max-width: 560px) {
    .doc table th:nth-child(3),
    .doc table td:nth-child(3) { display: none; }
}