/* ==========================================================================
   두너두 — 디자인 시스템 + 컴포넌트 스타일
   배민 컨셉(민트 + 옐로우 + 배민 서체) 벤치마킹 톤. 토큰 → 컴포넌트 순.
   ========================================================================== */

/* 배민 서체 — 한나체 Pro(헤드라인) · 주아체(버튼/탭/배지) · 도현체(강조) */
@font-face {
  font-family: "BMHANNA Pro";
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/BMHANNAPro/BMHANNAPro.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BMJUA";
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/BMJUA/BMJUA.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BMDOHYEON";
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/BMDOHYEON/BMDOHYEON.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* 브랜드(배민 민트) 스케일 — 배민다움 시그니처 컬러 */
  --brand-50:  #e7faf9;
  --brand-100: #c4f1ef;
  --brand-200: #93e5e0;
  --brand-300: #5fd6d0;
  --brand-400: #37c7c1;
  --brand-500: #2ac1bc;  /* 배민 민트 메인 */
  --brand-600: #1aa9a3;
  --brand-700: #148581;
  --brand-800: #12645f;
  --brand-900: #0d4744;

  /* 배민 옐로우 — 강조·CTA·하이라이트 */
  --lemon-100: #fff6c0;
  --lemon-300: #ffe94d;
  --lemon-400: #ffe000;
  --lemon-500: #ffd21e;
  --lemon-ink: #7a5b00;  /* 옐로우 위 텍스트 */

  /* 보조(피스타치오 그린) — 성공/좋은 원가 신호 */
  --leaf-100: #e7f3e0;
  --leaf-500: #5a913b;
  --leaf-600: #497a2f;

  /* 중립(웜 그레이) 스케일 */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f5;
  --neutral-100: #f4f0ea;
  --neutral-200: #e8e1d7;
  --neutral-300: #d6ccbe;
  --neutral-400: #a99f90;
  --neutral-500: #7d7264;
  --neutral-600: #5c5346;
  --neutral-700: #423b31;
  --neutral-800: #2b2620;
  --neutral-900: #1c1913;

  /* 시맨틱 */
  --bg:            var(--neutral-50);
  --surface:       var(--neutral-0);
  --surface-sunk:  var(--neutral-100);
  --text:          var(--neutral-900);
  --text-soft:     var(--neutral-600);
  --muted:         var(--neutral-500);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  --brand:         var(--brand-500);
  --brand-hover:   var(--brand-600);
  --brand-active:  var(--brand-700);
  --brand-weak:    var(--brand-50);

  --success: var(--leaf-600);
  --warning: #b7791f;
  --danger:  #c8394a;
  --danger-weak: #fbeaec;

  /* 타이포 스케일 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "BMHANNA Pro", "BMDOHYEON", var(--font-sans);  /* 한나체 — 히어로·헤드라인 */
  --font-round: "BMJUA", var(--font-sans);  /* 주아체 — 버튼·탭·배지 */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  /* 간격 스케일(4px 베이스) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* 라운드 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* 그림자(따뜻한 톤의 소프트 섀도) */
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
  --shadow-md: 0 1px 2px rgba(60, 40, 20, 0.05), 0 6px 18px rgba(60, 40, 20, 0.08);
  --shadow-lg: 0 2px 4px rgba(60, 40, 20, 0.06), 0 16px 40px rgba(60, 40, 20, 0.12);
  --ring: 0 0 0 3px rgba(42, 193, 188, 0.30);

  /* 이징 — 자연스러운 '스프링/세틀' 감각(상급 앱의 촉감) */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--font-sans);
}

/* 접근성 — 모션 최소화를 요청한 사용자는 애니메이션을 끈다 */
@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;
  }
}

/* 배민 서체 적용 — 헤드라인은 한나체, 액션(버튼·탭·배지·수치)은 주아체 */
.brand, .panel-title, .menu-head h3, .hero h2, .home-card-head h3,
.board-title, .warn-board h3, .result h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
.btn, .tab, .concept-tag, .count-pill, .badge, .stat b, .rank,
.tour-votes, .entry-votes, .ticker-price, .soldout {
  font-family: var(--font-round);
}

/* --------------------------------------------------------------------------
   2. 리셋 · 베이스
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* author display 규칙이 UA의 [hidden]을 덮어써 숨김이 풀리는 것 방지 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 480px at 100% -8%, var(--brand-50) 0%, rgba(231, 250, 249, 0) 60%),
    radial-gradient(900px 420px at -10% 0%, var(--lemon-100) 0%, rgba(255, 246, 192, 0) 55%),
    var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 하단 고정 탭바(실측 ~62px) + 여유 간격 확보 — 마지막 줄이 탭바에 깔리지 않게 */
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

.wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 20;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. 헤더 / 히어로
   -------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--sp-4) 0;
  background: rgba(250, 248, 245, 0.82);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.app-header .wrap {
  display: flex;
  flex-direction: column;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xl);
  font-weight: normal;
  color: var(--brand-700);
  text-decoration: none; /* 로고 링크 밑줄 제거 */
}
.brand::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--brand-500) url("assets/icon/icon-192.png") center / cover no-repeat;
  box-shadow: var(--shadow-sm);
}
.tagline {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

/* 헤더 — 브랜드 블록 + 상단 네비(데스크톱용 · 모바일에선 하단 탭바가 대신한다) */
.header-inner {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand-block {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  min-width: 0;
}
.brand-story {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}
.brand-story b { color: var(--brand-600); }
.topnav {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.navlink {
  font-family: var(--font-round);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.navlink:hover { background: var(--surface-sunk); color: var(--text); }
.navlink.is-active { background: var(--neutral-900); color: #fff; }
@media (max-width: 560px) {
  .topnav { display: none; } /* 모바일은 하단 탭바로 */
}

/* --------------------------------------------------------------------------
   4. 레이아웃 · 패널(카드)
   -------------------------------------------------------------------------- */
#main { padding-top: var(--sp-6); }

/* 탭 뷰 — .wrap 폭 제약 + 세로 스택. 활성 뷰만 표시 */
.view {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  flex-direction: column;
  gap: var(--sp-5);
}
.view.is-active { display: flex; animation: rise 0.4s var(--ease-spring) both; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.panel-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.panel-lead {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. 생성 폼
   -------------------------------------------------------------------------- */
.gen-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 세그먼트 컨트롤(입력 방식 라디오) */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.seg-btn { position: relative; margin: 0; cursor: pointer; }
.seg-btn input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.seg-btn > span {
  display: block;
  text-align: center;
  padding: 10px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.seg-btn:hover > span { color: var(--text); }
.seg-btn input:checked + span {
  background: var(--surface);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}
.seg-btn input:focus-visible + span {
  box-shadow: var(--ring);
}

/* 라벨 · 입력 · 힌트 */
.field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  margin-top: var(--sp-1);
}
.text-input {
  width: 100%;
  padding: 13px var(--sp-4);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.text-input::placeholder { color: var(--neutral-400); }
.text-input:hover { border-color: var(--neutral-400); }
.text-input:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.text-input[aria-invalid="true"] {
  border-color: var(--danger);
}
.text-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(200, 57, 74, 0.24);
}
.field-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* 인라인 검증 메시지 */
.field-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--danger);
}
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: var(--danger);
  border-radius: var(--r-pill);
}

/* 매장 조건 fieldset — 커스텀 체크박스 */
.constraints {
  margin: var(--sp-1) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
}
.constraints legend {
  padding: 0 var(--sp-2);
  margin-left: calc(-1 * var(--sp-2));
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.check input[type="checkbox"]:hover { border-color: var(--brand-400); }
.check input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type="checkbox"]:focus-visible { box-shadow: var(--ring); }
.check:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   6. 버튼
   -------------------------------------------------------------------------- */
.btn {
  font: inherit;
  font-family: var(--font-round); /* font 축약형이 124줄의 주아체 지정을 리셋하므로 복원 */
  font-weight: 700;
  text-decoration: none; /* <a class="btn">가 기본 밑줄로 깨져 보이던 것 리셋(랜딩 CTA·상세보기) */
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  padding: 13px var(--sp-5);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.65; }

.btn-primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 3px 0 var(--brand-700);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-400);
}
.btn-primary:active:not(:disabled) {
  background: var(--brand-600);
  box-shadow: 0 1px 0 var(--brand-700);
  transform: translateY(2px);
}

.gen-form .btn-primary {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  padding: 15px var(--sp-5);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text-soft);
  border-color: var(--border-strong);
  padding: 10px var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--neutral-400);
  background: var(--surface-sunk);
}

/* --------------------------------------------------------------------------
   7. 상태 블록: 로딩 / 에러 / 빈 상태
   -------------------------------------------------------------------------- */
.state-block {
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-soft);
}

/* 로딩 */
#loading {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--brand-100);
  border-top-color: var(--brand-500);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* 에러 알림 */
.state-error {
  background: var(--danger-weak);
  border: 1px solid #f2c6cd;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.state-error #error-msg,
.state-error p {
  color: #9a2233;
  font-weight: 600;
  margin: 0;
}

/* 로딩 스켈레톤 — 비동기 뷰(홈·상한가·라운지·지표) 최초 로드/재시도 시.
   "불러오는 중…" 텍스트 대신 실제 콘텐츠 골격을 셰이딩으로 예고한다. */
.view-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.skeleton-box {
  border-radius: var(--r-lg);
  background-color: var(--surface-sunk);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.7) 55%,
    rgba(255, 255, 255, 0) 80%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  animation: shimmer 1.25s ease-in-out infinite;
}
.sk-hero { height: 208px; border-radius: var(--r-xl); }
.sk-card { height: 116px; }
@keyframes shimmer {
  from { background-position: 180% 0; }
  to { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-box { animation: none; }
}

/* 빈 상태 */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: var(--sp-8) var(--sp-4);
  background: var(--surface-sunk);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. 저장 목록 헤더
   -------------------------------------------------------------------------- */
.saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.saved-head .panel-title { margin-bottom: 0; }
.saved-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.count-pill {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
/* 발주 현황 — 피스타치오 그린(핵심 측정 자산 신호) */
.order-pill {
  color: var(--leaf-600);
  background: var(--leaf-100);
  border-color: #cfe6c0;
}

.saved-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   9. 메뉴 결과 카드
   -------------------------------------------------------------------------- */
.result { animation: rise 0.44s var(--ease-spring) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.menu-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.saved-list .menu-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.menu-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.concept-tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
/* AI 합성 컨셉 배지 — 화이트리스트 밖 재료라 원가가 추정값임을 정직하게 표시 */
.synth-tag {
  align-self: flex-start;
  margin-left: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #7a5230;
  background: #fbf1de;
  border: 1px solid #f0dcae;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.menu-head h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.menu-tag {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

/* 지표 영역 */
.metrics {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-sunk);
  border-radius: var(--r-md);
}
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.meter-top b { color: var(--text); font-weight: 700; }
.meter-bar {
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter-fill.tone-trend { background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.meter-fill.tone-weird { background: linear-gradient(90deg, #8b6cef, #6d4de0); }

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--border);
}
.metric-row b { color: var(--text); font-weight: 700; }
.rate-good { color: var(--success) !important; }
.rate-mid  { color: var(--warning) !important; }
.rate-bad  { color: var(--danger) !important; }

/* 난이도 도트 */
.dots { display: inline-flex; gap: 4px; }
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--neutral-200);
}
.dot.on { background: var(--brand-500); }

/* 재료 구성 */
.ing-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.ing-block h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ing-sum {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.ing-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.ing:nth-child(odd) { background: var(--surface-sunk); }
.ing.sig {
  background: var(--brand-weak);
  box-shadow: inset 2px 0 0 var(--brand-400);
}
.ing-name { font-weight: 500; }
.ing-meta { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
/* 실 식자재 시세 반영 마커 — 원가표를 '추정→실값'으로 승격시키는 해자 신호 */
.ing-live {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--leaf-100);
  color: var(--leaf-600);
  font-family: var(--font-round);
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: middle;
}
.price-trust {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 600;
}
/* MenuScore 실판매 보정 배지 — 실발주 데이터가 점수에 반영됐을 때만 */
.cal-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--brand-weak);
  color: var(--brand-700);
  font-family: var(--font-round);
  font-size: 0.64rem;
  font-weight: 700;
}
.badge {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  vertical-align: middle;
}

/* 경고 */
.warn {
  display: flex;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  background: #fdf6e7;
  border: 1px solid #f2e0b0;
  border-radius: var(--r-sm);
  color: #86671c;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* 발주 버튼 — 카드 안에서는 풀폭 */
.order-btn { width: 100%; }
.order-btn:disabled {
  background: var(--leaf-100);
  color: var(--success);
  box-shadow: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. 푸터
   -------------------------------------------------------------------------- */
.app-footer {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  padding: var(--sp-8) var(--sp-5) var(--sp-12);
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   11. 반응형 (~360px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .wrap { padding: 0 var(--sp-4); }
  .panel { padding: var(--sp-5) var(--sp-4); }
  main.wrap { padding-top: var(--sp-6); }
  .menu-head h3 { font-size: var(--fs-lg); }
  .ing { flex-wrap: wrap; gap: 2px var(--sp-2); }
}

/* ==========================================================================
   12. 배민 컨셉 뷰 — 하단 탭바 · 홈 · 디저트 상한가 · 사장님 라운지
   (앰버 톤 리스킨 후 새 뷰용 스타일. 민트+옐로우+배민 서체.)
   ========================================================================== */

/* ── 12.1 하단 고정 탭바 ──────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 2px solid var(--brand-100);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-inner {
  max-width: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 9px 0 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.06s ease;
}
.tab svg { width: 23px; height: 23px; }
.tab:hover { color: var(--text-soft); }
.tab:active { transform: translateY(1px); }
.tab.is-active { color: var(--brand-600); }
.tab.is-active svg { stroke-width: 2.4; }
.tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
/* 데스크톱(상단 내비 노출)에선 하단 탭바 숨김 — 중복 내비·콘텐츠 가림 방지 */
@media (min-width: 561px) {
  .tabbar { display: none; }
  body { padding-bottom: var(--sp-6); } /* 탭바 여백 예약 해제 */
}

/* ── 12.2 홈 — 히어로 ─────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--brand-400) 0%, var(--brand-600) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255, 224, 0, 0.22);
}
.hero h2 {
  position: relative;
  font-size: var(--fs-2xl);
  line-height: 1.25;
}
.hero p {
  position: relative;
  margin-top: var(--sp-2);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.stat-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.stat {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-2);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s ease, transform 0.06s ease;
}
.stat:hover { background: rgba(255, 255, 255, 0.28); }
.stat:active { transform: translateY(1px); }
.stat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
.stat b { font-size: var(--fs-xl); line-height: 1.1; }
.stat span { font-size: var(--fs-xs); opacity: 0.85; }
.stat-order b { color: var(--lemon-300); }
.hero-cta {
  position: relative;
  margin-top: var(--sp-5);
  width: 100%;
  background: var(--lemon-400);
  color: var(--lemon-ink);
  box-shadow: 0 3px 0 var(--lemon-500);
}
.hero-cta:hover:not(:disabled) { background: var(--lemon-300); }
.hero-cta:active:not(:disabled) {
  background: var(--lemon-500);
  box-shadow: 0 1px 0 var(--lemon-500);
  transform: translateY(2px);
}
.recent-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.recent-chip .chip-rate { font-weight: 700; color: var(--lemon-300); }

/* ── 12.3 홈 — 미리보기 카드(상한가·토너먼트) ─────────────────── */
.home-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.home-card-head h3 { font-size: var(--fs-lg); }
.home-card .go {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
}
.home-card[role="link"] {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
.home-card[role="link"]:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.home-card[role="link"]:active { transform: translateY(1px); }
.home-card[role="link"]:focus-visible { outline: none; box-shadow: var(--ring); }

.mini-list, .tour-mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.mini-row, .tour-mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  padding: var(--sp-1) 0;
}
.mini-row { cursor: pointer; }
.mini-name, .tour-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-right { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.mini-row.muted, .tour-mini.muted { color: var(--muted); justify-content: center; }

.mini-stage, .ticker-stage {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  white-space: nowrap;
}

.rank {
  flex: 0 0 auto;
  width: 23px; height: 23px;
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  color: #fff;
  background: var(--brand-500);
  border-radius: var(--r-pill);
}
.tour-mini:first-child .rank { background: var(--lemon-500); color: var(--lemon-ink); }
.tour-name em {
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
}
.tour-votes { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.tour-total {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: right;
}

/* 시그널 태그 — 상한가 은유(상승=빨강 / 하락=파랑) */
.sig { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.sig-up { color: #e0393f; }
.sig-down { color: #2b74d4; }
.sig-flat { color: var(--muted); }

/* ── 12.4 디저트 상한가(트렌드 보드) ─────────────────────────── */
/* 뷰 공통 히어로 — 홈 hero(민트)와 같은 계열의 딥민트로 탭 간 톤 통일 */
.board-head {
  background: linear-gradient(140deg, var(--brand-700), var(--brand-900));
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.board-head::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255, 224, 0, 0.16);
}
.board-head .board-week {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lemon-300);
  text-transform: uppercase;
}
.board-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  margin-top: var(--sp-1);
}
.board-head p {
  margin-top: var(--sp-2);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}
.board-head .board-updated {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

.ticker-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.ticker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ticker-main { display: flex; align-items: center; gap: var(--sp-2); }
.ticker-name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-base); }
.ticker-mid {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ticker-price { font-size: var(--fs-lg); color: var(--text); }
.ticker-mid .sig { margin-left: auto; font-size: var(--fs-sm); }
.ticker-verdict {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.55;
  border-top: 1px dashed var(--border-strong);
  padding-top: var(--sp-2);
}
.spark { width: 68px; height: 22px; flex-shrink: 0; }
.spark.up polyline { stroke: #e0393f; }
.spark.down polyline { stroke: #2b74d4; }

/* 연구소장 주간 코멘트 */
.comment-board { border-color: var(--brand-100); background: var(--brand-50); }
.comment-board h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.comment-board p { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.75; }

/* 실시간 급상승 — 실데이터 수요 신호(자체 해자). 시드 보드와 시각적으로 구분. */
.live-board { border-color: var(--brand-200, var(--brand-100)); background: var(--brand-weak); }
.live-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.live-head h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; }
.live-tag { font-size: var(--fs-xs); color: var(--brand-700); font-weight: 600; }
.live-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.live-chip:hover { border-color: var(--brand-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.live-chip:active { transform: translateY(0); }
.live-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.live-kw { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.live-count {
  font-family: var(--font-round); font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand-700); background: var(--brand-weak);
  padding: 1px 8px; border-radius: var(--r-pill);
}
.live-note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* 시세표 → 스튜디오 연결 CTA */
.ticker-go { align-self: flex-start; padding: 7px var(--sp-3); font-size: var(--fs-xs); }

.warn-board { border-color: #f2d7a6; background: #fffaf0; }
.warn-board h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.warn-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.warn-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid #f2e0b0;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.warn-item b { color: #86671c; font-weight: 700; }
.warn-item span { color: var(--text-soft); }

/* ── 12.5 사장님 라운지(토너먼트 + 인증) ─────────────────────── */
.lounge-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.lounge-head .panel-title { margin-bottom: 0; }

.entry-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.entry {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.entry-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.entry-name { display: block; font-weight: 700; font-size: var(--fs-base); }
.entry-by { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.entry-top .vote-btn { margin-left: auto; flex-shrink: 0; padding: 8px var(--sp-4); }
.entry-desc { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.entry-bar {
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.entry-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.entry-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
}
.entry-share { font-weight: 700; color: var(--brand-700); }
.entry-votes { color: var(--text-soft); }

.cert-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.cert {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.cert-head { display: flex; align-items: center; gap: var(--sp-2); }
.cert-by { font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft); }
.soldout {
  font-size: 0.66rem;
  color: #fff;
  background: #e0393f;
  padding: 2px 9px;
  border-radius: var(--r-pill);
}
.cert-menu { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.cert-note { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.like-btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  background: var(--surface-sunk);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.like-btn:hover:not(:disabled) { color: #e0393f; border-color: #f2b8bd; background: #fdeef0; }
.like-btn:disabled { cursor: default; }
.like-btn b { font-weight: 700; }

.cert-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ── 12.6 새 뷰 반응형 ───────────────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding: var(--sp-5); }
  .hero h2 { font-size: var(--fs-xl); }
  .board-head { padding: var(--sp-5); }
  .board-head h2 { font-size: var(--fs-xl); }
  .stat b { font-size: var(--fs-lg); }
}

/* ==========================================================================
   12.6a 후보 3안 그리드 · 연구 지표(내부용)
   ========================================================================== */
.cand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 560px) { .cand-grid { grid-template-columns: 1fr; } }
.cand-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
.cand-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.cand-media { line-height: 0; position: relative; }
.cand-media svg { width: 100%; height: auto; display: block; }
.cand-media .cand-photo { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cand-info {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.cand-info h3 { font-size: var(--fs-base); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.cand-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.cand-stats b { color: var(--text); }
.cand-grade {
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  color: #fff;
  background: var(--neutral-900);
  padding: 2px 9px;
  border-radius: var(--r-pill);
}
.grade-chip-S { background: var(--brand-600); }
.grade-chip-C { background: var(--danger); }
.cand-tag { margin: 0; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5; }
.cand-pick { margin-top: auto; padding: 10px var(--sp-3); font-size: var(--fs-sm); }
.reroll-btn { flex-shrink: 0; }

/* 연구 지표 — 퍼널 · 이벤트 그리드 · 욕망 키워드 */
.fsteps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--sp-2);
  align-items: center;
}
@media (max-width: 480px) { .fsteps { grid-template-columns: 1fr; } .farrow { transform: rotate(90deg); justify-self: center; } }
.fstep {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}
.fstep b { display: block; font-family: var(--font-round); font-size: var(--fs-2xl); line-height: 1.1; }
.fstep span { font-size: var(--fs-xs); color: var(--muted); }
.fstep-hot { background: var(--brand-weak); border-color: var(--brand-100); }
.fstep-hot b { color: var(--brand-700); }
.farrow { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }

.ev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 560px) { .ev-grid { grid-template-columns: repeat(3, 1fr); } }
.ev-cell {
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  text-align: center;
}
.ev-cell b { display: block; font-family: var(--font-round); font-size: var(--fs-lg); }
.ev-cell span { font-size: 0.68rem; color: var(--muted); }

/* 채널별 퍼널(UTM) — 어느 유입 소스가 발주까지 가나 */
.gate-line {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px var(--sp-3);
}
.gate-line b { color: var(--text); font-family: var(--font-round); }
.gate-line.gate-pass {
  color: var(--brand-700);
  background: var(--brand-weak);
  border-color: var(--brand-100);
}
.gate-line.gate-pass b { color: var(--brand-700); }
.lead-line {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.lead-line b { color: var(--text); font-family: var(--font-round); }

/* 재방문 연락처 캡처 — 확정 결과 아래, 명시적 opt-in */
.contact-capture {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  text-align: center;
}
.cc-title { margin: 0 0 4px; font-family: var(--font-round); font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.cc-sub { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }
.cc-form { display: flex; gap: var(--sp-2); max-width: 420px; margin: 0 auto; }
.cc-input {
  flex: 1; min-width: 0;
  padding: 11px var(--sp-3);
  font-size: var(--fs-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-input:focus-visible { outline: none; border-color: var(--brand-400); box-shadow: var(--ring); }
.cc-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-weak); }
.cc-submit { flex: 0 0 auto; white-space: nowrap; }
.cc-skip {
  margin-top: var(--sp-2);
  background: none; border: none;
  font-size: var(--fs-sm); color: var(--muted);
  cursor: pointer; text-decoration: underline;
}
.cc-skip:hover { color: var(--text-soft); }
.cc-priv { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.contact-capture.cc-ok { background: var(--surface-sunk); border-color: var(--border); }
@media (max-width: 420px) {
  .cc-form { flex-direction: column; }
  .cc-submit { width: 100%; }
}
.src-table-wrap { overflow-x: auto; }
.src-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.src-table th, .src-table td {
  padding: 9px var(--sp-2);
  text-align: right;
  border-bottom: 1px solid var(--surface-sunk);
  white-space: nowrap;
}
.src-table th {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.src-table th:first-child, .src-table td.src-name { text-align: left; }
.src-table tbody tr:last-child td { border-bottom: none; }
.src-table .src-name { font-weight: 700; }
.src-table .src-ord { font-family: var(--font-round); font-weight: 700; }
.src-table tr.src-hot .src-ord { color: var(--brand-700); }
.src-table tr.src-hot { background: var(--brand-weak); }

.kw-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.kw-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-sunk);
  font-size: var(--fs-sm);
}
.kw-row:last-child { border-bottom: none; }
.kw-word { flex: 1; font-weight: 600; }
.kw-count { color: var(--muted); font-size: var(--fs-xs); }

.footer-links { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--brand-600); text-decoration: underline; }

/* ==========================================================================
   12.6b 카드 미디어 · 접이식 드로어(레시피/마케팅 킷) · 배합비 페이월
   ========================================================================== */
.menu-media {
  position: relative;
  /* 정사각 목업(viewBox 200×200)이 풀폭 패널에서 거대해지지 않게 가로형 배너로 제약.
     정사각 SVG/사진을 세로 중앙 크롭 — 신규·기존 저장분·실사사진 모두 동일하게 동작. */
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 480px;
  align-self: center; /* flex 아이템 — margin:auto는 stretch를 깨 폭이 0으로 붕괴하므로 align-self로 중앙정렬 */
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
}
.menu-media svg {
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: auto;
  transform: translateY(-50%);
  display: block;
}
.menu-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.photo-btn {
  position: absolute;
  left: 10px; bottom: 10px;
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: #fff;
  background: rgba(28, 25, 19, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.photo-btn:hover:not(:disabled) { background: rgba(28, 25, 19, 0.82); transform: translateY(-1px); }
.photo-btn:disabled { opacity: 0.72; cursor: progress; }
.photo-btn:focus-visible { outline: 2px solid var(--accent, #d9a441); outline-offset: 2px; }

/* 자동 사진 생성 중(확정 카드·후보 그리드) — SVG 위에 은은한 shimmer + 진행 배지 */
.menu-media.photo-loading::after,
.cand-media.photo-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.15s linear infinite;
  pointer-events: none;
}
.photo-progress {
  position: absolute;
  left: 10px; bottom: 10px;
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: #fff;
  background: rgba(28, 25, 19, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
  z-index: 1;
}
.media-badge {
  position: absolute;
  right: 10px; bottom: 10px;
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  color: #fff;
  background: rgba(28, 25, 19, 0.55);
  padding: 3px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
  line-height: 1.5;
}

/* AI 컨셉 영상 — 사진(.menu-media)과는 별도 블록. 사진을 대체하지 않고 그 아래 독립된
   자리를 갖는다(9:16 세로 클립, 사진과 나란한 카드 리듬을 따른다). */
.video-block {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 270px;
  align-self: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.menu-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.ai-video-tag {
  position: absolute;
  left: 10px; top: 10px;
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: #fff;
  background: rgba(28, 25, 19, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
  z-index: 2;
  pointer-events: none;
}
/* 영상 생성 버튼 — 사진 아래 일반 흐름 버튼(오버레이 아님). 실속 정보를 작게 덧붙인다. */
.video-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.4;
}
.video-btn-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-soft);
}

/* 재료 구매처 검색 링크 — 재료 줄 끝의 은은한 돋보기. 발주 전에도 "어디서 사요" 즉답. */
.ing-shop {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}
.ing-shop:hover, .ing-shop:focus-visible { opacity: 1; }

/* 재료 최저가 후보 팝오버 — 결과카드·발주확인모달 공용(자바스크립트가 fixed 위치를 계산) */
.src-popover {
  position: fixed;
  z-index: 60;
  width: 252px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.src-pop-loading {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.src-pop-head {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-soft);
}
.src-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 7px 6px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
}
.src-pop-row:hover, .src-pop-row:focus-visible { background: var(--surface-sunk); }
/* 최저가 폴백(키 없음·조회 실패 시) — 네이버쇼핑 검색으로 잇는 강조 링크 */
.src-pop-search { border: 1px solid var(--brand-100); background: var(--brand-weak); padding: 9px 10px; }
.src-pop-search:hover, .src-pop-search:focus-visible { background: var(--brand-50); }
.src-pop-search .src-pop-mall { color: var(--brand-700); font-weight: 600; font-size: var(--fs-sm); }
.src-pop-search .src-pop-price { color: var(--brand-700); }
.src-pop-mall { font-size: var(--fs-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-pop-price { font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-pop-more {
  display: block;
  margin-top: 2px;
  padding: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: none;
}
.src-pop-more:hover { text-decoration: underline; }
.src-pop-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── 자영업자 그랑프리 — AI 실사 카드 + 순위 메달(게시판 → 리그 보드) ── */
.gp-prize {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.6;
  color: var(--lemon-ink); background: var(--lemon-100);
  border: 1px solid var(--lemon-500); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.gp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (max-width: 640px) { .gp-grid { grid-template-columns: 1fr; } }
.gp-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s ease, border-color 0.15s ease;
}
.gp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.gp-lead { border-color: var(--lemon-500); box-shadow: 0 0 0 2px var(--lemon-100), var(--shadow-md); }
.gp-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunk); }
.gp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-rank {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  font-family: var(--font-round); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text); background: rgba(255, 255, 255, 0.94);
  padding: 4px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.gp-rank-1 { background: var(--lemon-400); color: var(--lemon-ink); }
.gp-rank-tbd { color: var(--text-soft); }
.gp-weird {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  font-family: var(--font-round); font-size: var(--fs-xs);
  color: #fff; background: rgba(28, 25, 19, 0.62);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.gp-info { padding: var(--sp-4); }
.gp-name { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3; }
.gp-by { font-size: var(--fs-xs); color: var(--muted); margin: 2px 0 var(--sp-2); }
.gp-desc { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; min-height: 2.6em; }
.gp-bar { margin-top: var(--sp-3); }
.gp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-2);
}
.gp-foot .vote-btn { padding: 9px var(--sp-4); font-size: var(--fs-sm); flex-shrink: 0; }

/* 무료 실사 소진 안내칩 — 오너 확정가(500원) 실노출 + WTP 계측 접점 */
.pay-hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft);
  background: var(--lemon-100); border: 1px solid var(--lemon-500);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.pay-hint b { color: var(--lemon-ink); }

/* 완판 팔로업 → 정식 레시피 업셀 링크(성공 순간 과금 접점) */
.fu-paywall {
  display: block; margin-top: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-700);
  text-decoration: none;
}
.fu-paywall:hover { text-decoration: underline; }

/* ── 연구소 예측 — 공개 채점 아카이브(주간 재방문 이유 = 리텐션 엔진) ── */
.predict-board h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.pd-lead { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; margin-bottom: var(--sp-4); }
.pd-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.pd-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
}
.pd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pd-target { font-weight: 700; font-size: var(--fs-sm); }
.pd-badge {
  font-family: var(--font-round); font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.pd-pending { color: var(--brand-700); background: var(--brand-weak); border: 1px solid var(--brand-100); }
.pd-hit { color: var(--leaf-600); background: var(--leaf-100); }
.pd-miss { color: var(--danger); background: var(--danger-weak); }
.pd-thesis { font-size: var(--fs-base); font-weight: 600; line-height: 1.5; margin-top: var(--sp-2); }
.pd-basis { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.6; margin-top: var(--sp-1); }
.pd-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }
.pd-record { font-size: var(--fs-xs); color: var(--muted); margin: var(--sp-3) 0 var(--sp-4); }
.pd-form { margin-top: var(--sp-1); }
.pd-ok { font-size: var(--fs-sm); font-weight: 600; color: var(--leaf-600); margin-top: var(--sp-2); }
.pd-priv { font-size: 11px; color: var(--muted); margin-top: var(--sp-2); line-height: 1.5; }

/* ── 발주 D+14 팔로업 카드 — 완판/재발주/접음 회수(리텐션 루프의 첫 조각) ── */
.followup-card {
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.followup-q { font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--sp-3); }
.followup-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.followup-actions .btn { flex: 1 1 auto; padding: 10px var(--sp-3); font-size: var(--fs-sm); }
.fu-later {
  appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer;
  margin-top: var(--sp-2); padding: 4px 2px;
  font-size: var(--fs-xs); color: var(--muted); text-decoration: underline;
}
.fu-later:hover { color: var(--text-soft); }
.followup-done { font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--sp-2); }

.drawer {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.drawer summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-soft);
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary:hover { background: var(--surface-sunk); color: var(--text); }
.drawer .drawer-chev { margin-left: auto; transition: transform 0.2s ease; color: var(--muted); }
.drawer[open] .drawer-chev { transform: rotate(180deg); }
.drawer[open] summary { border-bottom: 1px solid var(--border); color: var(--text); }
.drawer-body { padding: var(--sp-4); }
.drawer-meta { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }

.recipe-steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.6;
}
.recipe-steps li::marker { font-weight: 700; color: var(--brand-600); }

.mkit-caps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.6;
}
.mkit-caps li {
  padding: 9px 12px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
}
.mkit-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.mtag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* 배합비·원가표 페이월(fake-door) — 잠금은 정직하게 "준비 중"으로 */
.paywall {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  text-align: center;
}
.paywall-head { font-size: var(--fs-sm); font-weight: 700; }
.paywall-d { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.paywall-btn { width: 100%; }
.paywall-btn:disabled { opacity: 0.85; cursor: default; }
/* 실제 가격표 — WTP 측정용 */
.paywall-price {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin: var(--sp-2) 0 2px;
}
.paywall-price b { font-family: var(--font-round); font-size: var(--fs-2xl); color: var(--text); line-height: 1; }
.paywall-price span { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; }
.paywall-offer { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.6; }
.paywall-lead { margin-top: var(--sp-3); }
.paywall-lead .cc-form { max-width: none; }
.pw-done {
  margin: 0; padding: 10px var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-700); background: var(--brand-weak);
  border: 1px solid var(--brand-100); border-radius: var(--r-md);
}

/* 데이터 활용 동의 시트 */
/* 하단 바텀시트 변형 — 중앙 팝업 대신 아래에서 부드럽게 슬라이드업(모바일 네이티브 감각) */
.share-modal.sheet-bottom { align-items: flex-end; padding: 0; }
.share-modal.sheet-bottom .share-sheet {
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(60, 40, 20, 0.22);
  animation: sheet-up 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* 그랩 핸들 — 바텀시트임을 알리는 손잡이 */
.sheet-grip {
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.consent-sheet { text-align: center; }
.consent-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}
.consent-body {
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.7;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.consent-ok { width: 100%; }

/* ==========================================================================
   12.7 MenuScore — 등급 배지 · 레이더 · 5축 바 · 위험 경고 · 변형 제안
   기획서 목업 v2의 결과카드 신뢰 축. 등급은 도현체, 축 바는 브랜드 그라디언트.
   ========================================================================== */
.score-block { display: flex; flex-direction: column; gap: var(--sp-4); }

.score-head { display: flex; gap: var(--sp-4); align-items: center; }
.grade {
  width: 76px; height: 76px;
  flex: none;
  border-radius: var(--r-lg);
  background: var(--neutral-900);
  color: var(--lemon-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: var(--shadow-sm);
}
.grade b {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}
.grade span { font-size: 0.6rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.grade-S { background: linear-gradient(140deg, var(--brand-600), var(--neutral-900) 70%); }
.grade-C { color: var(--neutral-300); }
.grade-C b { color: #f0a3ad; }

.score-lead { min-width: 0; }
.verdict {
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--brand-700);
  line-height: 1.4;
}
.vermeta { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }

.radar-wrap {
  display: grid;
  grid-template-columns: 218px 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.radar { width: 100%; max-width: 232px; margin: 0 auto; display: block; }

.axis-list { display: flex; flex-direction: column; }
.axis {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--surface-sunk);
  font-size: var(--fs-sm);
}
.axis:last-child { border-bottom: none; }
.axis-name { flex: 0 0 86px; color: var(--text-soft); }
.abar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-200);
  overflow: hidden;
}
.abar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.abar i.warn { background: var(--danger); }
.axis b { flex: 0 0 28px; text-align: right; font-weight: 700; }
.axis .axis-warn, .axis b.axis-warn { color: var(--danger); }

/* 레이더 데이터 폴리곤 — 중심에서 팝-인. playFills()가 .play를 붙이면 발화. */
.radar-plot {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 130px 122px;
  transform-box: view-box;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.radar-plot.play { opacity: 1; transform: scale(1); }

/* 접근성 — 모션 최소화 설정이면 채움 연출을 끄고 즉시 최종 상태로 */
@media (prefers-reduced-motion: reduce) {
  .meter-fill, .abar i { transition: none; }
  .radar-plot { transition: none; opacity: 1; transform: none; }
}

.risk {
  margin: 0;
  padding: 10px var(--sp-3);
  background: var(--danger-weak);
  border: 1px solid #f2c6cd;
  border-radius: var(--r-sm);
  color: #9a2233;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
}

/* 변형 제안 — 점선 카드 2분할, 재생성 버튼 하단 고정 */
.alt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.alt {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface);
}
.alt-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--leaf-600);
  background: var(--leaf-100);
  padding: 2px 9px;
  border-radius: var(--r-pill);
}
.alt b { font-size: var(--fs-sm); line-height: 1.35; }
.alt-d { margin: 0; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.55; }
.alt .variant-btn { margin-top: auto; }

@media (max-width: 480px) {
  .radar-wrap { grid-template-columns: 1fr; }
  .alt-grid { grid-template-columns: 1fr; }
  .grade { width: 66px; height: 66px; }
  .grade b { font-size: 1.8rem; }
}

/* ==========================================================================
   13. 공유 카드 — 버튼(발주 아래 성장 액션) + 미리보기 모달
   결과 카드를 인스타·카톡용 이미지로 내보내 데모→바이럴 루프를 닫는다.
   ========================================================================== */
.card-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.card-actions .order-btn { width: 100%; }
.detail-link { width: 100%; text-align: center; }

/* ── 메뉴 상세 딥링크 뷰 (#menu/:id) ─────────────────────────── */
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.detail-head .btn { padding: 8px 14px; font-size: var(--fs-sm); }
.menu-detail .empty-state { margin: var(--sp-4) 0; }
.detail-cta { text-align: center; }
.detail-cta-row { margin-top: var(--sp-5); text-align: center; }
.detail-cta-row .certify-jump { width: 100%; }
.detail-cta-row .replicate-btn { width: 100%; margin-top: var(--sp-2); }

/* 실전 검증 사회적 증거 — 완판 인증된 메뉴 */
.proof-badge {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
}
.proof-badge.proof-soldout {
  background: var(--leaf-100, var(--brand-weak));
  border-color: #cfe6c0;
}
.proof-ic { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.proof-txt { display: flex; flex-direction: column; gap: 2px; }
.proof-txt b { font-size: var(--fs-sm); color: var(--text); }
.proof-txt span { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5; }

/* 인증 피드 → 원본 메뉴 링크 */
a.cert-menu-link { display: block; color: var(--text); text-decoration: none; }
a.cert-menu-link:hover .cert-see { text-decoration: underline; }
.cert-see { font-size: var(--fs-xs); font-weight: 600; color: var(--brand-700); white-space: nowrap; }
.detail-cta-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: var(--sp-2) 0 0;
  line-height: 1.6;
}

/* ── 발주 내역 · 재료 장보기 리스트 ──────────────────────────── */
.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.order-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.06s ease;
}
.order-card:hover { box-shadow: var(--shadow-md); }
.order-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.order-menu { font-weight: 700; color: var(--text); text-decoration: none; }
a.order-menu:hover { color: var(--brand-700); text-decoration: underline; }
a.order-menu:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.order-date { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.shop-list {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.shop-item {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--brand-700); background: var(--brand-weak);
  border: 1px solid var(--brand-100);
  padding: 4px 11px; border-radius: var(--r-pill);
}
.order-cost { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; font-weight: 600; }

/* 발주서 — 재료별 배치 그램·원가 표 */
.order-batch {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand-700);
}
.order-sheet-wrap { overflow-x: auto; margin: 0 0 var(--sp-3); }
/* table-layout:fixed + 고정 비율 폭 — auto였을 때 열 너비가 내용 길이에 끌려다녀
   재료명과 숫자 사이 간격이 행마다 들쭉날쭉해 보이던 문제(가로 정렬 불일치)를 없앤다. */
.order-sheet { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
.order-sheet th, .order-sheet td {
  padding: 7px var(--sp-2);
  border-bottom: 1px solid var(--surface-sunk);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.order-sheet th:nth-child(1), .order-sheet td:nth-child(1) { width: 40%; text-align: left; }
.order-sheet th:nth-child(2), .order-sheet td:nth-child(2) { width: 28%; }
.order-sheet th:nth-child(3), .order-sheet td:nth-child(3) { width: 32%; }
.order-sheet th {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.order-sheet .oi-name { font-weight: 600; color: var(--text); }
.order-sheet .oi-c { color: var(--text-soft); }
.order-sheet tbody tr:last-child td { border-bottom: none; }
.order-copy {
  margin-top: var(--sp-2);
  padding: 7px var(--sp-3);
  font-size: var(--fs-xs);
}

/* 발주 직후 확인 모달 */
.oc-sheet { text-align: left; max-width: 480px; }
.oc-close { position: absolute; top: 10px; right: 12px; }
.oc-title { font-family: var(--font-round); font-size: var(--fs-lg); margin: 0 0 2px; }
.oc-sub { font-size: var(--fs-xs); color: var(--text-soft); margin: 0 0 var(--sp-3); }
.oc-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.oc-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 0; border-bottom: 1px solid var(--surface-sunk);
}
.oc-name { flex: 1; font-weight: 600; font-size: var(--fs-sm); }
.oc-meta { font-size: var(--fs-xs); color: var(--text-soft); white-space: nowrap; }
.oc-shop {
  font: inherit;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--brand-700); background: none; cursor: pointer;
  padding: 3px 9px; border: 1px solid var(--brand-100); border-radius: var(--r-pill);
}
.oc-shop:hover { background: var(--brand-weak); }
.oc-lead {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--brand-weak); border: 1px solid var(--brand-100); border-radius: var(--r-md);
}
.oc-lead-t { margin: 0 0 3px; font-family: var(--font-round); font-weight: 700; font-size: var(--fs-sm); }
.oc-lead-d { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.6; }
.oc-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); max-width: none; }
.oc-consent {
  flex: 1 1 100%;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5;
  cursor: pointer;
}
.oc-consent input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand-500); }
.oc-copy { width: 100%; }

/* admin — 3일 게이트 신호등 */
.gate-board { display: flex; flex-direction: column; gap: 6px; }
.gate-flag { display: flex; align-items: center; gap: var(--sp-2); }
.gate-flag h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); }
.gate-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.gate-why { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }
.gate-go { background: var(--leaf-100, var(--brand-weak)); border-color: #cfe6c0; }
.gate-go .gate-dot { background: var(--success, #4a9d3f); }
.gate-warn { background: #fdf5e3; border-color: #f0d79a; }
.gate-warn .gate-dot { background: var(--accent, #d9a441); }
.gate-fix { background: var(--danger-weak); border-color: #f2c6cd; }
.gate-fix .gate-dot { background: var(--danger); }
.lead-table .ld-val { font-family: var(--font-round); }

.btn-share {
  width: 100%;
  background: var(--lemon-100);
  color: var(--lemon-ink);
  border-color: #f2e08a;
  font-weight: 700;
}
.btn-share:hover:not(:disabled) { background: var(--lemon-300); border-color: var(--lemon-400); }
.btn-share:active:not(:disabled) { transform: translateY(1px); }

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(28, 25, 19, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade 0.18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.share-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
  animation: rise 0.24s ease both;
}
.share-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-soft);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.share-close:hover { color: var(--text); background: #fff; }
.share-close:focus-visible { outline: none; box-shadow: var(--ring); }

.share-preview {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.share-preview img { display: block; width: 100%; height: auto; }

.share-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.share-actions .btn { flex: 1; }
.share-hint {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}