/* ═══════════════════════════════════════════════════════════════
   웨이트맵 사용자 화면 (2026-08-27 개편)

   방향 — 대표 확정:
     · 밝은 바탕 + 대담한 혼잡도. 바탕을 조용히 비워야 혼잡도 색이 산다.
     · 브랜드색 = 짙은 남색 + 노랑. 로고·첫 화면과 이어지는 색이다.
     · 혼잡도 4색(초록·노랑·주황·빨강)은 **정보**다. 브랜드색이 그 자리를
       침범하면 손님이 "이 색이 무슨 뜻이지?" 하고 헷갈린다.
       그래서 브랜드 남색은 조작(탭·단추)에만, 노랑은 강조 한 곳에만 쓴다.
     · 이모지는 카테고리 탭에만 남긴다. 카드 안의 잔 이모지는 뺐다.

   첫 화면(랜딩)은 대표가 "맘에 든다"고 하여 배치·색 그대로 두었다.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 바탕 — 순백을 쓰지 않는다. 살짝 따뜻한 회백색이라야 카드 흰색이 떠 보인다 */
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --card-bg-pressed: #f7f8fa;

  /* 글자 — 순검정을 쓰지 않는다. 순검정은 화면에서 눈을 찌른다 */
  --text: #1a1f2b;
  --text-2: #4b5563;
  --muted: #7b8494;
  --border: #e6e8ec;
  --border-strong: #d3d7de;

  /* 브랜드 — 로고·첫 화면과 같은 색 */
  --navy: #16283f;
  --navy-soft: #24384f;
  --navy-tint: #eef1f5;
  --gold: #ffb703;
  --gold-deep: #b57d00;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* 그림자는 아주 옅게. 진한 그림자는 값싸 보인다 */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 4px 14px rgba(16, 24, 40, 0.07);
  --shadow-sheet: 0 -8px 32px rgba(16, 24, 40, 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Pretendard가 CDN에서 안 내려와도 아래 순서로 읽힌다 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif;

  /* 제목 글꼴 — 도현체. 간판에서 온 글꼴이라 획이 굵고 꽉 차 있다.
     제목·매장 이름처럼 "큰 글씨" 자리에만 쓴다. 안 내려오면 위 본문 글꼴로 떨어진다 */
  --font-title: "Do Hyeon", "Pretendard Variable", Pretendard, -apple-system,
                "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* ⚠️ -webkit-font-smoothing: antialiased 를 넣지 말 것 (2026-08-27 대표 지적 "글씨가 흐리다").
   이 값은 글자 획을 얇게 깎아 아이폰·맥에서 흐릿해 보이게 만든다.
   기본값(auto)이 화면 밀도에 맞춰 또렷하게 그린다. */

/* 숫자는 자리를 고정한다 — 카드마다 "25~35분"의 폭이 달라지면 줄이 흔들려 보인다 */
.tnum, .dest-wait, .dest-next, .info-box .value {
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────
   첫 화면 (랜딩) — 대표 확정: 배치·색 그대로 유지
   글꼴만 Pretendard로 함께 올라간다
   ─────────────────────────────────────────────── */

.landing-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.35), transparent 60%),
    linear-gradient(165deg, #0b1420 0%, #101c2c 45%, #16283f 100%);
  padding: 24px;
}

.landing-inner {
  text-align: center;
  max-width: 420px;
  color: #fff;
}

.landing-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  background: #ffffff;
  border-radius: 44px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  margin-bottom: 26px;
}

.landing-logo-img {
  width: 168px;
  height: 168px;
  object-fit: contain;
}

.landing-headline {
  font-family: var(--font-title);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 8px;
  line-height: 1.3;
  color: #fff;
}

.landing-sub {
  font-size: 16px;
  color: #cfe0f7;
  margin: 0 0 14px;
}

.landing-tagline {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 28px;
}

.landing-cta {
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(120deg, #ffd166, var(--gold));
  color: #1c1400;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 183, 3, 0.4);
  transition: transform 120ms var(--ease);
}

.landing-cta:active { transform: scale(0.98); }

.landing-beta {
  margin-top: 18px;
  font-size: 12px;
  color: #7c93b5;
}

/* ───────────────────────────────────────────────
   위쪽 조작판 — 화면의 1/4을 넘지 않게 유지한다
   ─────────────────────────────────────────────── */

/* 조작판은 짙은 남색 — 첫 화면(랜딩)과 같은 색으로 이어진다 (2026-08-27 대표 지시).
   위는 조작, 아래는 정보. 색으로 두 영역이 갈려서 혼잡도 색이 조작 단추와 안 섞인다. */
header.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 16px 11px;
}

/* 컴퓨터에서 볼 때 — 조작판이 화면 끝까지 늘어나면 탭이 허옇게 벌어진다.
   본문(main)과 같은 720px 안으로 묶어 가운데 정렬한다 (2026-08-27 대표 지적). */
header.app-header > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}

/* 노란 점 하나 — 랜딩의 금색과 이어지는 표식. 노랑은 여기 한 곳에만 크게 쓴다 */
.brand::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.22);
}

.topbar-actions { display: flex; gap: 4px; }

.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 140ms var(--ease), transform 120ms var(--ease);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* 켜진 단추는 흰색으로 채운다 — 지금 무엇이 켜져 있는지 한눈에 */
.icon-btn.on {
  background: #fff;
  color: var(--navy);
}

/* 지도/목록 아이콘은 한 단추 안에서 서로 갈아 끼운다 */
#viewToggle .ico-list { display: none; }
#viewToggle.on .ico-map { display: none; }
#viewToggle.on .ico-list { display: block; }

.search-row {
  position: relative;
  flex: 1;
  min-width: 0; /* 없으면 좁은 폰에서 검색창이 브랜드를 밀어낸다 */
}

.search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.search-input {
  display: block;
  width: 100%;
  padding: 9px 14px 9px 36px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

.search-input::placeholder { color: rgba(255, 255, 255, 0.55); }

.search-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.18);
}

/* 지역 칩 — 가로로 미는 줄. 회색 스크롤 막대는 감춘다(조잡해 보인다) */
.filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 2px;
}

.filter-row::-webkit-scrollbar { display: none; }

.filter-chip {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease), background 140ms var(--ease);
}

.filter-chip:active { transform: scale(0.96); }

/* 고른 동네만 노랑 — 지금 어디를 보고 있는지가 화면에서 가장 먼저 읽혀야 한다 */
.filter-chip.active {
  background: var(--gold);
  color: #1c1400;
  border-color: var(--gold);
  font-weight: 700;
}

/* 카테고리 탭 — 이모지는 여기에만 남긴다 (눈으로 빨리 찾게 해준다) */
.group-tabs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.group-tab {
  flex: 1;
  padding: 9px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease), background 140ms var(--ease);
}

.group-tab:active { transform: scale(0.97); }

/* 카테고리는 흰색으로 — 노랑은 동네 칩 한 곳에만 쓴다. 둘 다 노랑이면 어느 쪽이
   지금 고른 것인지 눈이 헷갈린다 */
.group-tab.active {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  font-weight: 700;
}

/* ───────────────────────────────────────────────
   본문
   ─────────────────────────────────────────────── */

main { padding: 10px 16px 88px; max-width: 720px; margin: 0 auto; }

.beta-note {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.view { display: none; }
.view.active { display: block; }

/* ───────────────────────────────────────────────
   지도 — 목록 위에 늘 떠 있다 (2026-08-27 대표 지시)

   "매장 이름이 쭉 일직선으로 나오는 게 아니라 안국의 지도가 나오고" —
   맞는 말이다. 어디가 붐비는지는 목록보다 지도가 훨씬 잘 말한다.
   기본은 낮게 두어 목록을 가리지 않고, 필요하면 눌러서 키운다.
   ─────────────────────────────────────────────── */

.map-wrap {
  position: relative;
  margin-top: 12px;
  /* ⚠️ z-index: 0 을 지우지 말 것 (2026-08-27).
     지도 라이브러리는 자기 안에서 400~800의 층수를 쓴다. 그대로 두면 지도가
     상세 창(100)을 뚫고 위로 올라온다 — 실제로 그랬다. 여기서 층을 하나 만들어
     지도의 모든 층수를 이 안에 가둔다. */
  z-index: 0;
}

/* 폰에서는 낮게 — 지도가 크면 정작 매장 카드가 한 장도 안 보인다
   (2026-08-27 대표 지적. 240px일 때 첫 화면에 카드가 1개뿐이었다).
   색점 분포를 읽는 데는 이 높이로 충분하고, 더 보고 싶으면 눌러서 키운다. */
#map {
  height: 176px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: height 200ms var(--ease);
}

.map-wrap.big #map { height: calc(100dvh - 260px); }

/* 바탕 지도의 색만 살짝 눌러 둔다.
   우리 화면의 주인공은 혼잡도 색점(빨강·주황·노랑·초록)이다. 바탕이 알록달록하면
   그 점들이 묻힌다. 색점은 다른 층에 그려지므로 이 처리에 영향받지 않는다.
   지명 글씨는 오히려 또렷해진다. */
.leaflet-tile-pane {
  filter: saturate(0.68) contrast(1.04);
}

/* ───────────────────────────────────────────────
   지도 위 정보창 · 매장 이름표 (2026-08-27 대표 지시)

   "지도에 나온 매장을 클릭했을 때 그 매장의 혼잡도가 지도에 나와야 하는 거 아냐"
   맞다. 예전에는 색점을 누르는 즉시 상세 창이 지도를 덮어서, 이 집이 지도에서
   어디쯤인지 볼 틈이 없었다.
   ─────────────────────────────────────────────── */

.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.leaflet-popup-tip { box-shadow: none; }

.leaflet-container a.leaflet-popup-close-button {
  width: 26px;
  height: 26px;
  padding: 4px 0 0 0;
  color: var(--muted);
  font-size: 17px;
}

.mp {
  font-family: var(--font);
  padding: 13px 15px 14px;
  min-width: 168px;
}

.mp-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.3;
  padding-right: 14px; /* 닫기 단추 자리 */
}

.mp-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.mp-now {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 9px;
}

.mp-level {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lv, var(--text));
}

.mp-level::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv, var(--muted));
}

.mp-wait {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.mp-next {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-2);
}

.mp-next b { font-weight: 700; color: var(--text); }

.mp-next b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nextlv, var(--muted));
  margin-right: 4px;
  vertical-align: 1px;
}

.mp-more {
  width: 100%;
  margin-top: 11px;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* 매장 이름표 — 충분히 확대했을 때만 켜진다 */
.leaflet-tooltip.map-label {
  background: rgba(255, 255, 255, 0.94);
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.22);
  padding: 2px 7px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
  transition: opacity 160ms var(--ease);
}

.leaflet-tooltip.map-label::before { display: none; } /* 말풍선 꼬리 없앰 */

/* 붐비는 곳 이름표는 진하게 — 확대하면 이것부터 눈에 들어와야 한다 */
.leaflet-tooltip.map-label.busy {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.3);
}

.map-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  /* 지도 라이브러리가 자기 조작 단추에 800을 쓴다. 그보다 위여야 이 단추가 보인다.
     위 .map-wrap이 층을 가둬 두었으므로 900이어도 상세 창을 뚫지 않는다. */
  z-index: 900;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform 120ms var(--ease);
}

.map-expand:active { transform: scale(0.96); }

/* ───────────────────────────────────────────────
   목록의 뼈대 (2026-08-27 개편)

   요약 한 줄 → 붐비는 곳 → 가기 좋은 곳.
   매장 95개를 똑같이 늘어놓던 화면을, 손님이 앱을 켠 이유대로 다시 세웠다.
   ─────────────────────────────────────────────── */

.card-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 12px;
}

.card-grid { display: flex; flex-direction: column; gap: 10px; }

/* 지금 상황 한 줄 — 헤더의 남색이 여기까지 이어져 "웨이트맵이 말을 거는" 자리가 된다.
   빈 슬로건이 아니라 실제 숫자를 말한다. 동네를 바꾸면 문장도 바뀐다. */
.now-summary {
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  padding: 16px 18px 15px;
  overflow: hidden;
}

/* 오른쪽 위로 은은하게 도는 빛 — 카드가 납작해 보이지 않게 하는 정도로만 */
.now-summary::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 3, 0.22), transparent 68%);
  pointer-events: none;
}

.ns-where {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.01em;
}

/* 이 한 줄이 화면에서 가장 큰 글씨다 — 손님이 알고 싶은 답이기 때문이다 */
.ns-mood {
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 1.2;
  margin-top: 2px;
  color: #fff;
}

.ns-detail {
  margin-top: 7px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.74);
  font-variant-numeric: tabular-nums;
}

.ns-detail b { color: var(--gold); font-weight: 700; }

/* 다음에 할 일 — 상황만 알려주고 끝내면 손님은 "그래서 어디 가지?"에서 멈춘다.
   거기까지 데려다주는 것이 이 단추다. 노랑은 화면에서 여기와 동네 칩에만 쓴다. */
.ns-cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, #ffd166, var(--gold));
  color: #1c1400;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 120ms var(--ease);
}

.ns-cta:active { transform: scale(0.98); }

/* 붐비는 시간이면 문장 색이 노랑으로 바뀐다 — 화면이 스스로 경고한다 */
.now-summary.tone-busy .ns-mood { color: var(--gold); }
.now-summary.tone-mid .ns-mood { color: #ffe08a; }

/* 묶음 제목 */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* 제목 왼쪽 금색 점 (2026-09-04 대표 지시).
   묶음이 어디서 시작하는지 눈이 먼저 잡는다. 브랜드색이라 덤으로 정체성도 남는다. */
.sh-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--text);
}

/* 점은 아래 .sec-busy / .sec-easy 규칙에서 칠한다 (한 군데서만 정한다) */

.sh-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--navy-tint);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

/* 제목 앞 점 — 묶음이 어디서 시작하는지 눈이 먼저 잡는다.
   ⚠️ .sh-title 이 inline-flex 라 vertical-align 이 안 먹는다. gap 으로 띄운다. */
.sec-busy .sh-title::before,
.sec-easy .sh-title::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* 붐비는 묶음은 빨강 — 피해야 할 곳이라는 신호 */
.sec-busy .sh-title::before { background: #c0292e; }

/* 가기 좋은 곳은 **브랜드 금색** (2026-09-04 대표 지시).
   초록이었는데 흰 바탕에서 눈에 안 걸렸다. 금색은 로고와 같은 색이라
   «웨이트맵이 권하는 곳»이라는 뜻도 함께 실린다. */
.sec-easy .sh-title::before { background: var(--gold); }

.sh-note {
  margin: 0 0 9px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ───────────────────────────────────────────────
   붐비는 곳 카드는 크게 (2026-08-27 대표 지시)

   이 묶음이 헛걸음을 막는 자리다. 여유로운 곳과 같은 크기로 두면
   "피해야 할 곳"이라는 신호가 약해진다. 색 띠도 두껍게 한다.
   ─────────────────────────────────────────────── */

.sec-busy .dest-card {
  padding: 16px 18px 15px 22px;
  border-radius: 18px;
  box-shadow: var(--shadow-2);
}

.sec-busy .dest-card::before { width: 8px; }

.sec-busy .dest-level { font-size: 17px; }

.sec-busy .dest-wait {
  font-size: 15px;
  font-weight: 800;
  color: var(--lv);
}

.sec-busy .dest-name { font-size: 21px; letter-spacing: -0.04em; }

.sec-busy .dest-meta { font-size: 13px; margin-top: 3px; }

.sec-busy .dest-foot { margin-top: 11px; padding-top: 10px; }

.sec-busy .dest-next { font-size: 13px; }

/* ───────────────────────────────────────────────
   매장 카드 — 혼잡도가 주인공이다

   예전엔 혼잡도가 오른쪽 구석의 작은 알약이었다. 우리 제품이 파는 것이
   바로 그 값인데 가장 작게 표시돼 있었다. 이제 카드 맨 위 한 줄과
   왼쪽 색 띠가 모두 혼잡도를 가리킨다.

   --lv 는 app.js가 CONGESTION_COLOR에서 그대로 넘겨준다.
   색 표를 CSS에 한 벌 더 두면 두 곳이 어긋나므로 옮겨 적지 않는다.
   ─────────────────────────────────────────────── */

.dest-card {
  position: relative;
  background: var(--card-bg);
  border: none;
  border-radius: var(--radius);
  padding: 12px 15px 11px 17px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}

/* 왼쪽 색 띠 — 목록을 훑기만 해도 혼잡한 집이 눈에 걸린다 */
.dest-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--lv, var(--border-strong));
}

.dest-card:active {
  transform: scale(0.985);
  background: var(--card-bg-pressed);
}

.dest-card:hover { box-shadow: var(--shadow-2); }

/* 이름은 왼쪽, 혼잡도는 오른쪽 끝 (2026-09-04 대표 지시).
   목록을 훑을 때 혼잡도가 **세로 한 줄로 정렬**돼 눈이 왔다갔다 하지 않는다. */
.dest-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dest-text { min-width: 0; }

.dest-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 혼잡도 알약 — 색 바탕에 색 글씨(같은 색 계열)라 흰 바탕에서도 또렷하다.
   ⚠️ 「보통」의 밝은 금색은 **좁게 쓸 때만** 쓴다. 넓게 칠하면 값싸 보인다
      (2026-09-04 대표 지적) — 상세 창의 큰 판정 칸은 진한 금색을 쓴다. */
.dest-level {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--lv, var(--text));
  background: color-mix(in srgb, var(--lv, #999) 12%, #fff);
}

.dest-level::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.dest-wait {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

/* 매장 이름 — 15px에서 17px로 키웠다. 손님이 찾는 것은 결국 이름이다 */
/* 매장 이름은 **또렷한 글꼴**로 쓴다 (2026-08-27 대표 지적).
   간판 글꼴(도현체)은 획이 굵고 자소가 촘촘해서 이 크기에서 뭉갠다.
   배민 규칙도 "간판 글꼴을 본문 크기에 쓰지 말 것"이라고 못 박는다.
   간판 글꼴은 큰 제목(첫 화면·요약 카드·묶음 제목·상세 창 제목)에만 남긴다. */
/* ⚠️ 한 줄로 강제하지 않는다 (2026-09-04 검증에서 잡힘).
   320px 에서 오른쪽 알약·대기시간이 자리를 먹어 「런던…」처럼 **세 글자만** 남았다.
   손님이 찾는 것은 결국 이름이다 — 두 줄까지 허용하고, 그래도 넘치면 그때 줄인다. */
.dest-name {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.dest-meta {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.dest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.dest-next {
  font-size: 12.5px;
  color: var(--text-2);
}

/* 30분 뒤 값은 **글자에 색을 입히지 않는다.**
   "보통"의 노랑을 흰 바탕에 글자로 쓰면 읽히지 않는다(2026-08-27 확인).
   색은 앞의 점이 나르고, 글자는 진하게 둔다 — 읽히면서 색 정보도 남는다. */
.dest-next b {
  font-weight: 700;
  color: var(--text);
}

.dest-next b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nextlv, var(--muted));
  margin-right: 4px;
  vertical-align: 1px;
}

/* 이 값이 언제·어디서 온 것인가 (2026-08-20 신설, 대표 지적)
   며칠 전에 걸어서 본 값이 다음 관측 때까지 화면에 남는다.
   그것을 "지금 값"인 것처럼 보여주지 않는 것이 이 표시의 목적이다.
   눈에 띄되 혼잡도보다는 조용해야 한다 — 주인공은 혼잡도다. */
.dest-freshness {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

/* 이틀 이상 지난 관측값 — 그 뒤로 달라졌을 수 있다는 뜻 */
.dest-freshness.stale { color: #8a6a2f; }

.empty-note {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 48px 0;
}

/* ───────────────────────────────────────────────
   상세 창
   ─────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.active { display: flex; }

.modal-sheet {
  background: #fff;
  width: 100%;
  max-width: 720px;
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-sheet);
  animation: sheet-up 260ms var(--ease);
}

@keyframes sheet-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  float: right;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--navy-tint);
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
}

.modal-title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 3px;
}

.modal-category { font-size: 13px; color: var(--muted); margin-bottom: 14px; }

/* 세 칸을 한 줄로 (2026-09-04). 예전엔 2+1로 떨어져 셋째 칸만 홀로 남았다. */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.info-box {
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 10px;
  text-align: center;
}

.info-box .label { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.info-box .value { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }

/* 혼잡도 칸에는 그 등급 색을 옅게 깐다 (2026-09-04 대표 지시).
   ⚠️ 「예상 대기」 칸만 남색이다 — 그 칸은 혼잡도가 아니라 **시간**이다.
      셋 다 노랗게 칠하면 「5~15분」도 «보통»인 줄로 읽힌다. */
.info-box.lv {
  background: color-mix(in srgb, var(--boxlv, var(--muted)) 11%, #fff);
}

.info-box.lv .label { color: color-mix(in srgb, var(--boxlv) 62%, #6b7280); }
.info-box.lv .value { color: color-mix(in srgb, var(--boxlv) 78%, #1a1f2b); }

.info-box.time { background: var(--navy-tint); }
.info-box.time .value { color: var(--navy); }

/* 혼잡도 알약 — 상세 창에서만 쓴다. 목록은 색 띠로 대신한다 */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

/* "보통"의 노랑 바탕 — 흰 글씨는 읽히지 않는다. 여기만 검은 글씨를 쓴다 */
.badge-ink { color: #3a2c00; }

.section-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 16px 0 8px;
  color: var(--muted);
}

.alt-list { display: flex; flex-direction: column; gap: 7px; }

.alt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13.5px;
}

.updated-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.report-btn {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms var(--ease);
}

.report-btn:active { transform: scale(0.98); }

.modal-freshness {
  margin-top: 18px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.modal-freshness.stale {
  background: #fdf7ec;
  border-color: #eedfc2;
}

.modal-freshness .mf-main b { color: var(--text); }
.modal-freshness.stale .mf-main b { color: var(--gold-deep); }

.modal-freshness .mf-note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ───────────────────────────────────────────────
   관리자 들어가는 문 — 손님 눈에는 조용해야 한다
   ─────────────────────────────────────────────── */

/* ───────────────────────────────────────────────
   컴퓨터에서 볼 때 (2026-08-27 대표 지적)

   폰에서 만든 화면을 그대로 늘리면 카드 한 장이 720px로 길어져
   이름과 시각 사이가 휑하게 벌어진다. 넓을 때는 두 줄로 세운다.
   ─────────────────────────────────────────────── */

@media (min-width: 700px) {
  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* 요약은 넓어져도 글씨가 커지게 — 넓은 화면에서 작으면 초라해 보인다 */
  .now-summary { padding: 26px 28px 24px; }
  .ns-mood { font-size: 32px; }

  .group-tab { padding: 10px 6px; font-size: 14px; }

  .beta-note { font-size: 12px; }

  /* 넓은 화면에서는 지도를 조금 더 크게. 다만 화면을 다 먹으면 안 된다 —
     지도 아래 목록이 함께 보여야 "어디가 붐비나"가 이어서 읽힌다 */
  #map { height: 320px; }
}

.admin-link {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  right: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  z-index: 50;
}

/* ═══════════════════════════════════════════════════════════════
   2026-09-04 개편 (대표 지시)
     · 「지금 가면 ~」 판정 칸 — 상세를 열면 가장 먼저 보인다
     · 「오늘 언제 가면 좋을까」 세로 카드 3장
     · 「N곳 더 보기」 — 다섯 줄씩 끊어 본다
     · 「지역」 이름표 — 「전체 지역」을 없앤 자리
   ═══════════════════════════════════════════════════════════════ */

/* ── 「지금 가면 ~」 판정 칸 ── */
.visit-verdict {
  background: var(--vc, var(--navy));
  color: #fff;
  border-radius: 14px;
  padding: 15px 17px;
  margin: 12px 0 4px;
}

.vv-main {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.vv-sub {
  font-size: 13px;
  margin-top: 5px;
  opacity: 0.94;
  line-height: 1.5;
}

/* ── 「오늘 언제 가면 좋을까」 세로 카드 ── */
.hours { padding: 2px 0; }

.hslots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hslot {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  background: var(--card-bg);
}

/* 가장 좋은 칸은 브랜드색으로 두른다 */
.hslot.best {
  border-color: var(--gold);
  border-width: 2px;
  background: #fffdf5;
  padding: 11px 5px;
}

.hslot.empty { opacity: 0.5; }

.hs-t { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.hs-h { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.hs-none { font-size: 11.5px; color: var(--muted); margin-top: 14px; }

.hs-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 10px 0 8px;
  overflow: hidden;
}

.hs-bar i { display: block; height: 100%; border-radius: 2px; }

.hs-lv { font-size: 12.5px; font-weight: 700; }
.hs-n { font-size: 10.5px; color: #2e7d32; margin-top: 4px; }
.hs-n.guess { color: var(--muted); }

.hs-tip {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  background: var(--navy-tint);
  border-radius: 12px;
  padding: 11px 13px;
}

.hs-tip.sure { color: #1b5e20; }
.hs-tip.once { color: #4d5a26; }
.hs-tip.once span { color: var(--muted); }
.hs-tip.busy { color: #8a5a00; }
.hs-tip b { color: var(--gold-deep); }

.hs-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── 「N곳 더 보기」 ──
   대표: «매장이 아래로 계속 스크롤되면 불편할 것 같은데»
   다섯 줄이면 폰 한 화면에 들어온다. 더 보고 싶으면 누르면 된다. */
.list-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 46px;
  border-radius: 12px;
  background: var(--navy-tint);
  border: 1px solid var(--border);
  color: var(--navy);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}

.list-more small {
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

.list-more:hover { background: #e5eaf1; }
.list-more:active { transform: scale(0.99); }
.list-more:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ── 「지역」 이름표 ──
   「전체 지역」을 없앤 자리다(2026-09-04). 고르는 칩이 아니라 이름표라
   누를 수 없다는 것이 보여야 한다. */
.filter-label {
  flex: 0 0 auto;
  align-self: center;
  padding: 6px 10px 6px 0;
  margin-right: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8fa0b3;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

/* ── 제보·결정 단추는 조용하게 (2026-09-04) ──
   손님이 이 앱을 여는 이유는 판단하려는 것이지 제보하려는 것이 아니다.
   예전엔 이 단추들이 화면에서 가장 센 색(빨강·초록 꽉 참)이라 시선을 다 가져갔다. */
.report-row {
  display: flex;
  gap: 8px;
}

.report-btn.ghost {
  flex: 1;
  min-height: 44px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 10px;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}

.report-btn.ghost:hover { background: var(--bg); }
.report-btn.ghost:active { transform: scale(0.99); }
.report-btn.ghost:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* 조용한 소제목 — 「실제와 다른가요?」처럼 물어보는 자리 */
.section-title.quiet {
  color: var(--muted);
  font-weight: 600;
}

.section-title small {
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════
   2026-09-04 배포 전 검증에서 잡힌 것들
   ══════════════════════════════════════════════════════════════ */

/* ① 「30분 뒤 ● 매우혼잡」이 한글 가운데서 두 줄로 깨지던 것 (320px)
      오른쪽 신선도 글에만 nowrap 이 걸려 있어, 안 줄어드는 쪽이 자리를 다 가져갔다.
      → 혼잡도 쪽을 먼저 지키고, 길어질 수 있는 신선도 쪽을 줄인다. */
.dest-next {
  white-space: nowrap;
  flex: 0 0 auto;
}

.dest-freshness {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ② 상세 「예상 대기」의 「30~50분」이 두 줄로 깨지던 것 (320px) */
.info-box .value {
  white-space: nowrap;
}

.info-box.time .value {
  font-size: 15px;
  letter-spacing: -0.04em;
}

/* ③ 「보통」 알약만 글자가 흐리던 것 — 대비 2.2:1 이었다.
      밝은 금색 글씨는 옅은 금색 바탕에서 뭉갠다. 글자만 진한 금색으로 내린다.
      (상세 판정 칸이 진한 금색을 쓰는 것과도 톤이 맞는다) */
.dest-level[style*="#d4a017"] { color: var(--gold-deep); }

/* ④ 지역 칩이 화면 밖으로 이어질 때 **옆으로 밀 수 있다는 표시**
      320px 에서 「성수」가 완전히 화면 밖인데 막대도 감춰져 있어
      그 줄이 더 있다는 것을 알 길이 없었다. */
.region-filter {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* ⑤ 닫기 단추 — 손가락에 맞는 크기로 (34px → 44px) */
.modal-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ⑥ 제보와 「갈 곳을 바꿨나」를 눈으로 가를 수 있게
      넷이 전부 똑같은 흰 단추라 읽지 않으면 구분이 안 됐다.
      색을 되돌리지는 않는다 — 조용해야 혼잡도 색이 산다.
      대신 **글자에만** 아주 옅게 방향을 준다. */
.report-btn.ghost#reportCongested { color: #a33; }
.report-btn.ghost#reportRelaxed { color: #2a7a45; }

/* ⑦ 지도 이름표가 겹칠 때 뒤엣것에 가려 안 읽히던 것 */
.map-label {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 지도 말풍선 — 어디를 눌러도 상세가 열린다 (2026-09-04) */
.mp { cursor: pointer; }
.mp:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* 접힌 지도(176px)에서는 말풍선이 지도보다 커서 아래쪽이 잘렸다.
   덜 중요한 두 줄을 접어 지도 안에 들어오게 한다. */
.map-wrap:not(.big) .mp-meta,
.map-wrap:not(.big) .mp-next { display: none; }