/*
 * 공통 뼈대 — 모든 페이지가 이걸 읽는다.
 * 화면별 스타일은 각 페이지가 따로 가진다.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /*
     * 배경에 아주 옅은 열 그라디언트를 깐다.
     * 완전히 균일한 검정은 화면이 꺼진 것처럼 보인다. 위쪽에 온기를 조금
     * 남겨 두면 같은 어둠이라도 '식은 숯'으로 읽힌다.
     */
    background-image:
        radial-gradient(900px 420px at 82% -8%, rgba(212, 42, 22, 0.14), transparent 62%),
        radial-gradient(720px 380px at 8% -6%, rgba(255, 154, 46, 0.09), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 키보드 초점은 반드시 보이게 둔다. 지우면 키보드로 못 쓰는 사이트가 된다. */
:focus-visible {
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

img { max-width: 100%; display: block; }

/* 반투명 주황 위 흰 글자는 1.5:1 이었다. 고른 글자가 안 고른 글자보다
   안 읽히면 고른 보람이 없다. 불투명 빨강으로 못 박는다. */
::selection { background: var(--brand); color: #FFFFFF; }

/* 스크롤바도 화면의 일부다. 기본 밝은 회색을 두면 다크 화면에 흰 줄이 하나 생긴다. */
* { scrollbar-width: thin; scrollbar-color: rgba(26, 18, 16, 0.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(26, 18, 16, 0.16);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 18, 16, 0.28); }

/* ── 아이콘 ─────────────────────────────────────────────
   icons.js 가 심는 SVG 의 공통 규칙.
   stroke 가 currentColor 라 감싸는 요소의 color 만 바꾸면 된다.

   크기를 여기서 정하지 않는 이유:
     Icons.svg(name, {size}) 가 width/height 속성으로 크기를 넣는데,
     CSS 가 속성보다 우선하므로 여기에 width 를 적으면 자리마다 정해 둔
     크기가 전부 무시되고 아이콘이 한 크기로 뭉개진다.
     크기가 따로 필요한 자리는 그 자리에서만 지정한다. */
.i {
    display: block;
    flex: none;
    vertical-align: middle;
}
[data-i] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
}

/* ── 헤더 ───────────────────────────────────────────────
   지도가 주인공이므로 헤더는 최소한만 차지한다. */
/*
 * 지도 화면에서만 머리띠를 줄인다.
 *
 * 지도는 화면의 80% 여야 한다. 다른 화면에서는 읽을 것이 본문이라
 * 58px 이 맞지만, 지도 화면에서는 그 10px 이 곧 지도다.
 */
.map-page .site-head { height: 48px; }

.site-head {
    position: sticky;
    top: 0;
    z-index: var(--z-head);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-3) 0 var(--sp-4);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -0.015em;
    color: var(--ink);
    flex: none;
}
.brand:hover { text-decoration: none; }
.brand__name { line-height: 1; }

/* 로고 자리의 고추 배지. 이미지 없이 CSS 로만 만든다. */
/*
 * 브랜드 마크 = 로고 그림 그대로.
 *
 * 예전에는 빨간 네모에 불꽃 아이콘을 얹어 만들었다. 로고가 생긴 뒤로는
 * 그러면 얼굴이 둘이 된다 — 런처에서 본 것과 헤더에서 본 것이 다르면
 * 같은 서비스로 안 읽힌다.
 *
 * 그림자를 안 쓴다. 로고 자체가 핀 실루엣이라 이미 형태가 또렷하고,
 * 그림자를 얹으면 작은 크기에서 가장자리가 지저분해진다.
 */
.brand__mark {
    width: 28px;
    height: 28px;
    display: block;
    flex: none;
}

/* ── 데스크톱 메뉴 ───────────────────────────────────── */
.site-nav {
    display: flex;
    gap: 2px;
    align-items: center;
    min-width: 0;
}

/*
 * 800~1000px 구간.
 * 탭바는 아직 안 나오고(800px 이하) 메뉴 일곱 개는 다 안 들어간다.
 * 이 구간에서만 소개·FAQ 를 접는다 — 꼬리말에 그대로 있으므로 사라지지 않는다.
 */
@media (max-width: 1000px) {
    .site-nav a.is-minor { display: none; }
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--smoke);
    font-size: var(--t-caption);
    font-weight: 500;
    padding: 7px 11px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.site-nav a .i { width: 16px; height: 16px; }
.site-nav a:hover {
    color: var(--ink);
    background: rgba(26, 18, 16, 0.07);
    text-decoration: none;
}
.site-nav a[aria-current="page"] {
    color: var(--ink);
    background: rgba(26, 18, 16, 0.09);
    text-decoration: none;
}

/* ── 헤더 오른쪽 동작들 ──────────────────────────────── */
.head-act {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

/*
 * 아이콘 버튼.
 * 글자를 지우고 아이콘만 남기는 자리이므로 aria-label 이 반드시 있어야 한다.
 * 손가락으로 눌러야 하니 36px 아래로 내리지 않는다.
 */
.icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(26, 18, 16, 0.04);
    color: var(--ink-dim);
    font: inherit;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: rgba(26, 18, 16, 0.1); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .i { width: 18px; height: 18px; }

.icon-btn.is-on {
    color: var(--hazard-ink);
    border-color: rgba(245, 197, 24, 0.5);
    background: rgba(245, 197, 24, 0.14);
}

/* 버튼에 붙는 숫자. 일행 인원수처럼 '몇 명인지'가 정보인 곳에만 쓴다. */
.icon-btn__n {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--hazard);
    color: #1A1206;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--paper);
}
.icon-btn__n:empty { display: none; }

/* 내 내성 레벨 칩. 숫자가 곧 정보라 아이콘 대신 숫자를 그대로 둔다. */
.icon-btn--lv {
    width: auto;
    min-width: 44px;
    padding: 0 11px;
    gap: 3px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--t-caption);
    color: var(--lv-ink, var(--ink));
    border-color: color-mix(in srgb, var(--lv, var(--ink)) 45%, transparent);
    background: color-mix(in srgb, var(--lv, var(--ink)) 12%, transparent);
}
.icon-btn--lv .i { width: 14px; height: 14px; }

/* 로그인 칩. 로그인 전에는 글자, 로그인 뒤에는 프로필 사진.
   사진이면 "지금 어느 계정인가"를 글자보다 빨리 알아본다. */
.auth-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(26, 18, 16, 0.04);
    color: var(--ink);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.auth-chip:hover { text-decoration: none; border-color: var(--line-3); }
.auth-chip:active { transform: scale(0.94); }
.auth-chip[aria-current="page"] { border-color: var(--brand); }
.auth-chip__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.auth-chip__ini {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
}

.btn-in {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(224, 27, 27, 0.35);
    background: rgba(224, 27, 27, 0.07);
    color: var(--brand-dark);
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.btn-in:hover { background: rgba(224, 27, 27, 0.13); text-decoration: none; }
.btn-in .i { width: 16px; height: 16px; }

/* ── 모바일 탭바 ────────────────────────────────────────
 *
 * 왜 필요한가:
 *   메뉴 아홉 개를 글자로 헤더에 늘어놓으면 360px 화면에서 넘친다.
 *   넘치는 것을 숨기면 그 메뉴는 없는 것과 같아서, 모바일 사용자만
 *   랭킹과 맵기 기준을 영영 못 보게 된다.
 *   자주 가는 다섯 곳을 아래로 내리면 엄지로 닿는 자리에 놓이기까지 한다.
 */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-tabbar);
    display: none;
    align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--line);
}
.tabbar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--smoke);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    position: relative;
    transition: color var(--dur-1) var(--ease);
}
.tabbar a .i { width: 21px; height: 21px; }
.tabbar a:hover { text-decoration: none; color: var(--ink-dim); }
.tabbar a[aria-current="page"] { color: var(--brand); }
/* 지금 어디인지 위쪽 짧은 막대로 표시한다. 색만으로는 색각 이상이 있으면 안 읽힌다. */
.tabbar a[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0;
    width: 26px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--heat-ramp-soft);
}

@media (max-width: 800px) {
    .site-nav { display: none; }
    .tabbar { display: flex; }
    /* 탭바가 본문 끝을 가리지 않게 자리를 비운다.
       지도 화면은 자체 flex 레이아웃이라 따로 다룬다(map.css). */
    body:not(.map-page) { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
}

/* ── 문서형 페이지 ──────────────────────────────────────*/
.doc {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

.doc h1 {
    font-family: var(--font-display);
    font-size: var(--t-display);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--sp-3);
}

.doc .lead {
    color: var(--ink-dim);
    font-size: 1.02rem;
    margin: 0 0 var(--sp-6);
    max-width: 62ch;
}

.doc h2 {
    font-size: var(--t-h1);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: var(--sp-7) 0 var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.doc h3 { font-size: var(--t-h2); margin: var(--sp-5) 0 var(--sp-2); }
.doc p { margin: 0 0 var(--sp-3); max-width: 68ch; }
.doc ul, .doc ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; max-width: 68ch; }
.doc li { margin-bottom: var(--sp-2); }
/* 어두운 테마 때 흰색이었다. 흰 바탕으로 옮기면서 글자가 통째로 사라졌었다.
   강조는 눈에 띄라고 있는 자리라 브랜드 빨강을 쓴다. */
.doc strong { color: var(--brand); font-weight: 700; }

/* 섹션 머리에 붙는 작은 라벨. 제목만 늘어놓으면 어디까지가 한 묶음인지 안 보인다. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--sp-2);
}
.eyebrow .i { width: 14px; height: 14px; }

.doc .updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    color: var(--smoke);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 5px 13px;
    margin-bottom: var(--sp-5);
}

/* 표 */
.doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--sp-4);
    font-size: var(--t-caption);
}
.doc th, .doc td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.doc th { color: var(--smoke); font-weight: 600; }
.doc tbody tr:hover { background: rgba(26, 18, 16, 0.03); }

/* 표가 좁은 화면에서 화면을 밀어내지 않게 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
}

/* ── 카드 ───────────────────────────────────────────────*/
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: var(--edge), var(--sh-1);
}

.cards {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── 버튼 ───────────────────────────────────────────────*/
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
                background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .i { width: 18px; height: 18px; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

.btn--primary {
    background: var(--heat-ramp-soft);
    color: #fff;
    box-shadow: var(--edge), 0 4px 16px rgba(212, 42, 22, 0.3);
}
.btn--primary:hover { box-shadow: var(--edge), 0 6px 22px rgba(212, 42, 22, 0.42); }

.btn--ghost {
    background: rgba(26, 18, 16, 0.04);
    border-color: var(--line-2);
    color: var(--ink);
}
.btn--ghost:hover { background: rgba(26, 18, 16, 0.1); border-color: var(--line-3); }

.btn--sm { padding: 9px 15px; font-size: var(--t-caption); }
.btn--sm .i { width: 16px; height: 16px; }

/* ── 맵기 배지 ──────────────────────────────────────────
   숫자·아이콘·색을 함께 쓴다. 색만으로 구분하면
   색각 이상이 있는 사람에게는 아무 정보도 아니다. */
.lv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--lv, var(--grey-pin));
    color: var(--lv-on, #fff);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: var(--edge);
}
.lv-badge .i { width: 13px; height: 13px; }
.lv-badge--5 {
    border: 1px solid var(--heat-5-line);
    box-shadow: 0 0 0 1px rgba(224, 27, 27, 0.25) inset;
}

/* 고추 표시. 색 말고 두 번째 신호가 필요한 자리에 쓴다. */
/*
 * 고추 표시. 색을 스스로 정하지 않고 글자색을 따라간다.
 *
 * --lv 를 직접 쓰면 배지 안에서 사고가 난다 — 배지의 배경이 바로 그 --lv 라
 * 고추가 배경과 같은 색이 되어 통째로 사라진다. 색이 따로 필요한 자리는
 * 그 자리에서 지정한다(.level-row, .me-tol 등).
 */
.peppers {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: inherit;
}
.peppers .i { width: 13px; height: 13px; }

/* ── 꼬리말 ─────────────────────────────────────────────*/
/* ── 푸터 ────────────────────────────────────────────────
 *
 * 지도 화면에는 두지 않는다. 지도는 화면의 80% 여야 하는데
 * 바닥에 열 줄을 깔면 그 약속이 깨진다.
 */
.site-foot {
    border-top: 1px solid var(--line);
    padding: var(--sp-7) var(--sp-4) var(--sp-6);
    margin-top: var(--sp-7);
    color: var(--smoke);
    font-size: var(--t-caption);
    background: var(--surface-2);
}
.site-foot__inner { max-width: var(--maxw); margin: 0 auto; }

/* 넓으면 소개와 링크를 나란히, 좁으면 위아래로. */
.site-foot__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-7);
    align-items: flex-start;
}
.site-foot__me { flex: 1 1 240px; min-width: 0; }

.site-foot__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}
.site-foot__tag {
    margin: var(--sp-3) 0 0;
    max-width: 32ch;
    line-height: 1.7;
}

/* 링크를 세 갈래로 묶는다. 열 개를 한 줄로 늘어놓으면 목록이 아니라 벽이다. */
.site-foot__cols {
    flex: 2 1 380px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-5) var(--sp-4);
}
.site-foot__col { display: flex; flex-direction: column; gap: 9px; }
.site-foot__col h2 {
    margin: 0 0 2px;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}
.site-foot a { color: var(--ink-dim); }
.site-foot a:hover { color: var(--brand); }

/* 사업자 정보. 이름표와 값을 짝으로 둔다 - 줄글로 쓰면 뭐가 뭔지 안 읽힌다. */
.site-foot__biz {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.site-foot__biz dl {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--sp-4);
    margin: 0;
}
.site-foot__biz dl > div { display: flex; gap: 7px; }
.site-foot__biz dt {
    color: var(--smoke);
    opacity: 0.75;
    white-space: nowrap;
}
.site-foot__biz dd { margin: 0; color: var(--ink-dim); }

.site-foot__law {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-4);
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: var(--t-micro);
}
.site-foot__credit { opacity: 0.75; }

/* 화면에서는 감추지만 스크린리더에는 읽히게 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 본문으로 건너뛰기. 키보드로 왔을 때만 나타난다. */
.skip-link {
    position: absolute;
    left: var(--sp-3);
    top: -60px;
    z-index: 300;
    background: var(--hazard);
    color: #1A1206;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    font-weight: 700;
    transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-3); text-decoration: none; }

/* 즐겨찾기 버튼.
   별 하나만 두면 '저장한다'인지 '평점을 준다'인지 갈린다. 글자를 함께 붙인다. */
.fav-btn.is-on {
    border-color: rgba(245, 197, 24, 0.55);
    color: var(--hazard-ink);
    background: rgba(245, 197, 24, 0.12);
}
.fav-btn.is-on .i { fill: currentColor; }

/* 움직임을 줄여 달라고 한 사람에게는 줄여 준다 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 손가락이 닿는 크기 ─────────────────────────────────
 *
 * 아이콘 버튼은 36px 로 그린다. 더 키우면 헤더가 두꺼워져 지도가 줄어든다.
 * 대신 보이지 않는 여백을 둘러 실제로 눌리는 영역만 44px 로 넓힌다.
 * 눈에 보이는 크기와 눌리는 크기는 같을 필요가 없다.
 */
.icon-btn::after,
.auth-chip::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.auth-chip { position: relative; }

/* 넓힌 영역이 overflow:hidden 에 잘리면 아무 소용이 없다.
   사진은 자기 border-radius(inherit) 로 스스로 둥글어지므로 자를 필요가 없다. */
.auth-chip { overflow: visible; }

/* 탭바 항목은 이미 44px 보다 크다. 따로 넓히지 않는다. */

/* 작은 버튼도 손가락에는 40px 아래로 내려가지 않는다 */
.btn--sm { min-height: 40px; }

/*
 * hidden 속성이 항상 이기게 한다.
 *
 * 브라우저 기본값은 `[hidden]{display:none}` 인데, 어떤 선택자든
 * `display:flex` 같은 것을 주면 그쪽이 이긴다. 그러면 자바스크립트에서
 * `el.hidden = true` 라고 껐는데도 화면에는 그대로 남는다.
 *
 * 실제로 두 번 당했다. 관리자 화면의 로그인 상자가 로그인한 뒤에도 남았고,
 * 지도의 "예시 데이터입니다" 고지가 실데이터를 올린 뒤에도 안 꺼졌다.
 * 뒤쪽은 화면이 사용자에게 거짓말을 한 셈이라 더 나빴다.
 */
[hidden] { display: none !important; }

/* ── 음식 종류 고르는 줄 ─────────────────────────────── */

/*
 * 가로로 넘치게 두고 스크롤한다. 줄바꿈으로 두면 종류가 17개라
 * 화면 높이의 3분의 1을 먹는다 — 지도가 그만큼 사라진다.
 */
.dish-bar {
    display: flex;
    gap: 6px;
    padding: 8px var(--sp-4);
    overflow-x: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    flex: none;
}
.dish-bar::-webkit-scrollbar { display: none; }

.dish-chip {
    flex: none;
    appearance: none;
    font: inherit;
    font-size: var(--t-caption);
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-dim);
    cursor: pointer;
    white-space: nowrap;
    /* 지도 위에 뜰 때 알약과 지도가 붙어 보이지 않게 살짝 띄운다.
       바탕 띠를 없앤 자리를 이 그림자가 대신한다. */
    box-shadow: 0 1px 4px rgba(26, 18, 16, 0.16);
}
.dish-chip:hover { border-color: var(--brand); color: var(--brand); }
.dish-chip.is-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
/*
 * 맨 앞 칩('Lv.3만')은 옆의 칩들과 **다른 축**이다.
 * 옆은 음식 종류이고 이것은 맵기다. 똑같이 생기면 '떡볶이' 옆에 'Lv.3만' 이
 * 나란히 서서, 하나를 고르면 다른 하나가 꺼지는 한 벌로 읽힌다.
 * 숫자 글꼴과 한 칸 벌린 여백으로 가른다.
 */
.dish-chip--lead {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    margin-right: 6px;
}

/* 목록 화면에서는 위아래 여백을 둔다. 지도는 붙어 있어야 지도가 넓다. */
.doc .dish-bar {
    margin: 0 calc(var(--sp-4) * -1) var(--sp-4);
    border-top: 1px solid var(--line);
}


/* == 언어 고르기 (i18n.js / lang-btn.js) ================ */
.lang-btn { gap: 3px; padding: 0 9px; width: auto; }
.lang-btn__t {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.langs { list-style: none; margin: 14px 0 0; padding: 0; }
.langs li + li { margin-top: 6px; }
.langs__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.langs__row:hover { border-color: var(--brand); }
.langs__row.is-on { border-color: var(--brand); background: rgba(224, 27, 27, 0.06); }
.langs__name { flex: 1 1 auto; font-weight: 700; }
.langs__on { flex: none; display: grid; place-items: center; color: var(--brand); }
.langs__note {
    margin: 14px 0 0;
    font-size: var(--t-caption);
    color: var(--smoke);
    line-height: 1.55;
}

/* ── 입력칸 (.fld / .inp) ───────────────────────────────
 *
 * 여기 규칙이 **아예 없었다.** `<label class="fld">` 와 `<input class="inp">`
 * 를 마크업에만 적어 두고 스타일을 준 적이 없어서, 온보딩의 '태어난 해'와
 * 번개 만들기 폼이 브라우저 기본 입력칸 그대로 떠 있었다 — 숫자 칸에는
 * 화살표 두 개까지 붙어서, 공들여 만든 화면 한가운데에 남의 물건이 놓인
 * 꼴이었다.
 *
 * 앱 쪽 Field 컴포저블과 같은 모양이어야 한다 (라벨은 위, 칸은 채운 면,
 * 초점은 브랜드색 테두리). 두 화면이 다르게 생기면 같은 서비스로 안 읽힌다.
 */
.fld {
    display: block;
    margin: 0 0 var(--sp-4);
}
.fld > span {
    display: block;
    margin-bottom: 7px;
    font-size: var(--t-caption);
    font-weight: 600;
    color: var(--ink-dim);
}
/* 곁말은 라벨보다 한 걸음 물러난다. '(번개모임에만 씁니다)' 같은 것. */
.fld > span em {
    font-style: normal;
    font-weight: 500;
    color: var(--smoke);
}
.inp {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    /* 아이폰은 16px 아래 글꼴이면 칸을 누를 때 화면을 확대한다.
       확대된 화면은 사용자가 손으로 되돌려야 한다 — 그 자체가 고장으로 읽힌다. */
    font-size: 16px;
    line-height: 1.4;
}
.inp::placeholder { color: var(--smoke); opacity: 0.75; }
.inp:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(224, 27, 27, 0.12);
}
/*
 * 숫자 칸의 화살표를 없앤다.
 *
 * 태어난 해나 인원은 **한 자리씩 눌러 올리는 값이 아니다.** 화살표는 자리만
 * 먹고, 스크롤하다 값이 바뀌는 사고까지 낸다. 인원처럼 올리고 내리는 값은
 * 아래 .stepper 로 따로 만들어 두었다.
 */
.inp[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.inp[type="number"]::-webkit-outer-spin-button,
.inp[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 네 자리 숫자 한 칸. 계기판처럼 크게 놓는다 (태어난 해). */
.inp--year {
    max-width: 160px;
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}
/* 적어 준 값을 우리가 어떻게 읽었는지 그 자리에서 돌려준다. */
.fld__echo {
    margin: 7px 0 0;
    font-size: var(--t-caption);
    color: var(--smoke);
}
.fld__echo.is-warn { color: var(--danger-ink); font-weight: 600; }

/* ── 고르는 칩 줄 (날짜·시각) ───────────────────────────
 *
 * 날짜·시각 피커는 두 손가락과 대여섯 번의 탭을 요구한다. 번개는 성격상
 * '오늘이나 내일, 저녁' 이 거의 전부다 — 열네 밤 뒤의 모임은 번개가 아니다.
 * 앱이 이미 칩으로 받고 있어서 웹도 같은 모양으로 맞춘다.
 */
.pickrow {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.pickrow::-webkit-scrollbar { display: none; }
.pick {
    flex: none;
    appearance: none;
    padding: 9px 14px;
    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;
}
.pick--time { font-family: var(--font-mono); }
.pick:hover { border-color: var(--brand); }
.pick.is-on {
    border-color: var(--brand);
    border-width: 1.5px;
    background: rgba(224, 27, 27, 0.08);
    color: var(--brand-dark);
    font-weight: 700;
}

/* ── 올리고 내리는 값 (인원) ────────────────────────────
 * 글자 '-' 와 '+' 는 글꼴마다 크기와 자리가 달라 단추 밖으로 삐져나온다.
 * 아이콘 한 벌을 쓴다 (화면 규칙).
 */
.stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--surface-2);
}
.stepper__b {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--sh-1);
}
.stepper__b:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.stepper__v {
    min-width: 62px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}