/* 쉐프의 레시피 — 디자인 시스템 v5 "재료를 표로 읽는 화면"
 * 계획서: ideabank/260831_쉐프의레시피_프로토타입_개발계획서.md §3
 *
 * ★260831 v5 — **형태를 바꾼 판.** v1 아이보리 / v2 부엌 팝 / v3 클린 / v4 커넥트 토큰은
 *   전부 "토큰만 바꾸고 형태는 그대로"였고, 그래서 어느 것도 이 앱의 문제를 풀지 못했다.
 *   이 앱의 문제는 색이 아니라 **"몇 g이었지"를 못 찾는 것**이다.
 *
 *   ★★260921 문구 교정 — 종전 이 자리에는 *"레시픽에서 좋았던 다섯 가지를 **그대로
 *   가져왔다**"* 고 적혀 있었다. 사실과 다르고(아래 다섯은 전부 우리 데이터 구조에서
 *   나온 결론이다) 표현도 위험하다 — 앱인토스 노출 정책(10/22 시행)에
 *   **"다른 앱의 구성을 복제하지 않았는가?"** 체크리스트가 신설됐다.
 *   레퍼런스를 보고 **원칙을 배우는 것**과 구성을 베끼는 것은 다르고, 우리가 한 것은 앞쪽이다.
 *   주석이 뒤쪽처럼 적혀 있으면 다음 사람도, 검토자도 그렇게 읽는다.
 *
 *   아래 다섯은 **우리 데이터가 요구한 형태**다:
 *
 *   1) 재료는 목록이 아니라 **표**다 — 한 줄에 이름(좌) · 분량(우 정렬 굵게).
 *      우리 카드의 본체가 `{name, qty, unit}` 의 나열이라 **2열 표가 그 구조 그대로**다.
 *      촘촘한 텍스트 나열은 "몇 g이었지"를 못 찾게 만든다.
 *   2) 상세 상단은 **3분할 스탯 바** — 카드가 가진 요약값이 정확히 셋이다(재료 수 · 대체 가능 · 단계 수).
 *   3) 제목 아래 **한 줄 부제**(쉐프명) — R7 채널 크레딧이 **의무**라 제목 바로 아래가 그 자리다.
 *   4) 칩 필터는 **알약**이고 선택된 것만 **잉크로 꽉 채운다**(옅은 회색 선택은 안 보인다).
 *   5) 카드는 보더 대신 **아주 옅은 그림자** + 큰 라운드(14) + 넉넉한 패딩.
 *
 *   🔴 v4 에서 실제로 화면을 망가뜨린 버그: `.tabbar svg` 에 `fill:none` 이 없어
 *      라인 아이콘이 **검정 덩어리**로 칠해졌다(운영자 캡처에서 보인 그 사각형들).
 *      그래서 이 파일은 SVG 기본값을 **전역 한 곳에서** 잡는다.
 *
 * ★★260921 아래 3줄도 **stale 이라 교정**했다(값은 이미 바뀌어 있었고 주석만 옛것이었다):
 *   · 액센트 — ~~살보커넥트 #4a6ac2~~ → **브랜드 테라코타 `--accent:#e2673c`**(260902 확정)
 *   · 폰트  — ~~Pretendard 스택~~ → **자유시간(Jayusigan) + 알림장(Allimjang)** 웹폰트(`src/fonts/`)
 *   · 이미지 — ~~0장~~ → **유튜브 공식 호스트 썸네일을 쓴다**(R8 · 리호스팅·프레임 캡처는 금지)
 * 유지 규칙: 이모지 아이콘 금지(라인 SVG) · 썸네일은 `i.ytimg.com` 만
 *
 * 🟢 이 파일은 **웹 표면(chefrecipe.salbopick.com)도 그대로 쓴다** — `tools/chef_site_build`
 *    가 빌드 때 복사하고 가드(G20)가 바이트 동일을 단정한다. 여기를 고치면 두 화면이 같이 바뀐다.
 */

/* ── 토큰 ───────────────────────────────────────────────────────────── */
:root{
  /* ★260901 v6.1 — 운영자 결정: **아이보리 바탕 + 흰 카드 + 따뜻한 잉크**.
     v6(순백+순검정)은 구조는 맞았지만 차가웠다. 그래서 색을 더 넣는 대신
     **무채색의 색온도만 노랑 쪽으로 옮겼다** — 같은 밝기인데 화면이 따뜻해진다.
     (v1 의 아이보리와 다르다: v1 은 아이보리를 주인공으로 써서 흐리멍텅했고,
      여기서는 흰 카드가 아이보리 바탕 위에 뜨게 해 위계를 오히려 세운다.)
     음식 사진이 0장인 앱이라 색이 곧 분위기다 — 강조는 여전히 잉크 하나뿐이다. */
  --bg:#faf7f1;                  /* 페이지 = 아이보리(따뜻한 바탕) */
  --surface:#ffffff;             /* 카드 = 흰색 — 바탕 위로 떠야 한다 */
  --fill:#f5f1e8;                /* 재료 행·검색창 — 아이보리보다 한 톤 진하게 */
  --fill-2:#ebe5d9;
  --ink:#1f1b16;                 /* 제목 = 따뜻한 잉크(순검정은 아이보리 위에서 날카롭다) */
  --ink-2:#5f584e;
  --ink-3:#9a9184;
  --line:#ece6da;                /* 보더도 따뜻한 쪽으로 */
  /* ★260902 v7.1 — 브랜드 컬러 **테라코타 #E2673C 확정**(운영자 결정).
     킷 실측값(#FF7622)을 화면에 입혀 A~C 비교 촬영한 뒤 B 를 골랐다.
     킷 색보다 한 톤 낮아 **썸네일과 채도로 경쟁하지 않는다** — 사진이 주인공이 되고,
     배달앱 오렌지(가장 흔한 색)에서도 벗어난다.
     v6 은 액센트를 잉크(무채색)로 뒀는데 그게 "차갑다"는 지적의 원인이었다 —
     음식 앱에서 따뜻한 액센트는 식욕과 붙는다.
     잉크는 우리 따뜻한 값을 유지한다: 킷의 차가운 잉크(#07070F)를 오렌지와 섞으면 색온도가 싸운다. */
  --accent:#e2673c;              /* CTA·활성·강조 — 브랜드 테라코타(260902 확정) */
  /* ★260902 로고 3색 — 정본은 `tools/chef_logo_v2.py`(ACCENT/INK/PAPER).
     로고는 UI 토큰(`--accent`·`--ink`)과 **분리**한다: UI 톤을 조정할 때 브랜드 마크가
     같이 물들면 안 되고, 다크모드에서도 마크는 그대로여야 한다. 값이 갈리면 SSOT 테스트가 잡는다. */
  --logo-accent:#e2673c; --logo-ink:#1f1b16; --logo-paper:#ffffff;
  --accent-hover:#c9522a;
  --accent-weak:#fdefe8;         /* 크림 — 배지·보조면(킷의 보조 크림) */
  --accent-line:#f6d5c6;
  /* ★★260918 기획전(시즌 큐레이션) 전용 — 홈 배너·기획전 화면만 쓴다.
     🔴 **`--accent` 를 쓰지 않는 것이 요점이다.** 배너 바로 위 칸(`.c-hcta__box--go`)이
        이미 테라코타 채움이라, 같은 색으로 칠하면 운영자 지시("색상 달리해서 눈에 띄게")의
        정반대가 된다 — 큰 주황 덩어리 두 개가 붙어 오히려 서로를 지운다.
     딥그린을 고른 이유 셋: ⓐ 테라코타의 보색 쪽이라 한 화면에서 충돌 없이 분리된다
     ⓑ 한식·명절 관용색(청록·쪽빛)이라 시즌 신호가 즉시 읽힌다
     ⓒ 배달앱 오렌지 회피(`--accent` 주석)와 같은 논리 — 우리 액센트와 채도로 경쟁시키지 않는다.
     🟢 다크 재정의는 **없다**. 이 앱은 라이트 전용이다(아래 §C4 블록) — 여기에
        `@media (prefers-color-scheme:dark)` 를 새로 들이지 마라. */
  --fest:#2f6b4f; --fest-2:#4a8f6b; --fest-ink:#ffffff; --fest-weak:#eaf3ee;
  --ok:#1a7f4b; --ok-weak:#eff8f1;
  --warn:#8a5a12; --warn-weak:#fbf4e6;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-pill:999px;
  --sh:0 1px 2px rgba(70,55,35,.06);        /* 그림자도 갈색 기미 — 회색 그림자는 다시 차갑다 */
  /* 🔴 ★260908 사진 위 원형 버튼(뒤로가기·공유)의 바닥. **토큰이어야 하는 이유**가 있다:
     종전 값은 규칙 안에 `rgba(255,255,255,.92)` 로 박혀 있어 다크에서도 흰 알약이 나왔고,
     그 위의 글리프는 `var(--ink)`(다크=#f6f3ee) 라 **흰 위의 흰색 1.03:1** — 안 보였다.
     바닥이 테마를 따라 뒤집혀야 글리프와 대비가 유지된다. */
  --over-btn:rgba(255,255,255,.92);
  --over-btn-sh:0 2px 8px rgba(23,20,16,.22);
  --sh-up:0 6px 20px rgba(70,55,35,.12);
  --gap-xs:6px; --gap-s:10px; --gap:16px; --gap-l:24px; --gap-xl:32px;
  --tap:44px;
  --pad:20px;
  /* 시스템 스택 — **작은 글자와 숫자**가 이걸 쓴다(아래 --font-sys 적용 지점 참조).
     손글씨체는 큰 글자에서 매력이고 작은 글자에서 손해다(260902 촬영 판정). */
  --font-sys:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
         system-ui,'Segoe UI','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  /* 본문 = 학교자유시간. 폰트가 늦거나 글자가 서브셋에 없으면 시스템 스택으로 떨어진다. */
  --font:'Jayusigan', var(--font-sys);
  /* 제목 = 학교알림장 */
  --font-title:'Allimjang', var(--font);
  --dur:170ms; --ease:cubic-bezier(.22,.8,.3,1);
  /* ★260909 C4 — 라이트 전용 선언. 스크롤바·폼 컨트롤 등 **브라우저가 그리는 것**까지
     라이트로 잡는다(우리 토큰이 닿지 않는 표면이다). 아래 다크 블록 제거와 한 짝. */
  color-scheme:light;
}
/* ══════════════════════════════════════════════════════════════════
 * 🔴★★260909 C4 — **다크 모드 블록을 걷었다. 이 앱은 라이트 전용이다.**
 *
 * 근거: 앱인토스 비게임 출시 가이드 §서비스 이용 동작 —
 *   *"미니앱 테마는 라이트 모드로 구현돼 있어요."*
 *
 * 여기에는 `@media (prefers-color-scheme:dark)` 가 있었고 **토큰 전량을 재정의**했다
 * (`--bg:#12100e` … `--accent:#ef8058`). 즉 다크 기기에서 앱이 통째로 검게 떴다.
 *
 * 🔴 더 나쁜 것은 **우리 게이트가 이걸 거꾸로 채점하고 있었다**는 점이다 —
 *    `chef_reject_check` 의 `T7 다크모드 대응 ✅ 토큰 전량 재정의`. 다크 지원을 미덕으로
 *    세고 있었으니 44/44 라는 숫자를 아무리 봐도 이 위반은 보이지 않았다.
 *    그래서 이번에 T7 의 판정을 **뒤집었다**(라이트 전용인가를 묻는다).
 *
 * 🔴 짝 조건 — `apps-in-toss.config.ts` 의 `navigationBar.theme:"light"`.
 *    한쪽만 고치면 다크 기기에서 **네이티브 바만 밝고 본문만 검은** 화면이 나온다.
 *    `theme` 은 정적 값이라 시스템 테마를 못 따라간다 → 앱을 라이트로 고정하는 것이 정합이다.
 *
 * 🟢 팔레트는 **버리지 않고 여기 남긴다**(주석). 정책이 바뀌면 되살릴 수 있고,
 *    지워버리면 260908 에 고친 두 건(원 번호 대비·오버레이 버튼 바닥)의 근거도 함께 사라진다.
 *
 *   @media (prefers-color-scheme:dark){
 *     :root{
 *       --bg:#12100e; --surface:#1b1815; --fill:#221e1a; --fill-2:#2a2521;
 *       --ink:#f6f3ee; --ink-2:#b6afa5; --ink-3:#847d73; --line:#292420;
 *       --accent:#ef8058; --accent-hover:#f59575; --accent-weak:#2b1c15; --accent-line:#3d2820;
 *       --ok:#4ade80; --ok-weak:#13231a; --warn:#e3b341; --warn-weak:#241f12;
 *       --sh:0 1px 2px rgba(0,0,0,.5); --sh-up:0 6px 20px rgba(0,0,0,.6);
 *       --over-btn:rgba(30,26,23,.86); --over-btn-sh:0 2px 8px rgba(0,0,0,.55);
 *     }
 *   }
 *
 * ⚠️ 미디어쿼리는 `color-scheme` 으로 꺼지지 않는다 — **선언 자체를 없애야** 확실하다.
 *    `color-scheme:light`(위 :root)는 브라우저 기본 UI(스크롤바·폼 컨트롤)까지 라이트로 잡는
 *    보조 장치이지 이 블록의 대체재가 아니다.
 * ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){ :root{ --dur:0ms; } }

/* ── 웹폰트: 학교안심 2종 (260902 · 운영자 지시) ─────────────────────
   제목 = **학교알림장 R** · 본문 = **학교자유시간 R**

   레퍼런스 킷의 폰트는 라틴 전용 Google Font 라 한글이 없어 따를 수 없었다 — 그 자리를 이 둘이 메운다.
   학교안심 계열은 이미 쇼츠 트랙이 쓰고 있어(서체 통일 260824) 살보 콘텐츠가 한 얼굴을 갖는다.

   서브셋: tools/chef_font_subset.py 가 **앱에 실제로 나오는 글자만** 남긴다
   (1,021자 · 알림장 41KB + 자유시간 45KB = 86KB. 원본은 각 2,276KB / 1,277KB).
   없는 글자는 시스템 폰트로 대체되니 깨지지 않고 모양만 바뀐다.

   ★ v3 에서 "특색 폰트를 본문에 쓰면 가독성 최악" 판정을 받은 적이 있다. 그때는 손글씨체였고,
     학교자유시간은 **교육용 본문 서체**라 성격이 다르다 — 촬영으로 확인한 뒤 판단한다. */
@font-face{
  font-family:'Allimjang';
  src:url('fonts/allimjang.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
/* ★260902 진짜 Bold — 없는 굵기를 요구하면 브라우저가 합성 볼드를 그려 획이 뭉친다.
   알림장은 B 파일이 있는데 싣지 않고 있었다(운영자 지적으로 발견). */
@font-face{
  font-family:'Allimjang';
  src:url('fonts/allimjang-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jayusigan';
  src:url('fonts/jayusigan.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ── 리셋 ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* ★260909 C8 — 핀치 확대·축소 차단(가이드 §서비스 이용 동작). viewport 메타와 **이중**으로 건다:
   iOS 는 `user-scalable=no` 를 무시할 수 있어서 메타 하나로는 보장되지 않는다.
   `pan-x pan-y` 라 **스크롤은 그대로 산다** — `none` 으로 두면 목록을 내릴 수 없다. */
body{
  touch-action:pan-x pan-y;
  background:var(--bg); color:var(--ink);
  font:400 15px/1.55 var(--font); letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  letter-spacing:inherit; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
ol,ul{ margin:0; padding:0; list-style:none; }

/* 🔴 SVG 기본값 — 한 곳에서 잡는다(v4 탭바 아이콘 검정 사고의 재발 방지) */
svg{ fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.ic{ width:18px; height:18px; flex:0 0 auto; }

.num{ font-variant-numeric:tabular-nums; }
.caption{ font-size:13px; color:var(--ink-3); }

/* ── 레이아웃 ───────────────────────────────────────────────────────── */
#app{
  max-width:520px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 56px) 0
          calc(env(safe-area-inset-bottom,0px) + 76px);
}
.screen{ padding:0 var(--pad); }
.section{ margin-bottom:var(--gap-xl); }
.section__head{ display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:14px; }
.section__head h2{ font-size:19px; font-weight:700; letter-spacing:-.03em; }
.section__more{ font-size:13.5px; font-weight:600; color:var(--ink-3); }
.section__acts{ display:flex; align-items:baseline; gap:14px; flex:0 0 auto; }
.enter{ animation:enter var(--dur) var(--ease) both; }
@keyframes enter{ from{ opacity:0; transform:translateY(6px); } }

/* ── 상단바 ─────────────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  height:calc(env(safe-area-inset-top,0px) + 56px);
  /* ★260909 C1 — 왼쪽 여백을 8 → 20px(`--pad`)로. 종전에는 44px 짜리 뒤로가기 버튼이
     제목의 들여쓰기를 대신 지고 있었는데 그 버튼이 네이티브로 갔다. 패딩으로 바꾸지 않으면
     화면 이름이 가장자리에 붙어 본문 좌측 정렬선과 어긋난다. */
  padding:env(safe-area-inset-top,0px) 8px 0 var(--pad);
  display:flex; align-items:center; gap:2px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
}
/* ★260909 C1 — `.topbar__back` 규칙을 걷었다(자체 뒤로가기 버튼 제거 · 가이드 §네비게이션 바).
   뒤로가기는 토스 네이티브 바가 그린다. */
.topbar__title{ font-size:17px; font-weight:700; letter-spacing:-.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__spacer{ width:12px; }

/* ★260908 §SHARE — 상단바 공유 버튼(오른쪽 끝).
   `margin-left:auto` 로 미는 이유: 상단바 항목들은 왼쪽 정렬이고 `.topbar__title` 이
   자라지 않는다 — 이 버튼만 스스로 오른쪽으로 간다(다른 항목의 배치를 건드리지 않는다).
   ⚠️ 카드 상세는 상단바가 **사진 위 오버레이**라 아이콘이 사진에 묻힌다 →
      뒤로가기와 같은 흰 알약을 씌운다(같은 화면의 두 아이콘이 같은 모양이어야 한다). */
.topbar__act{ margin-left:auto; margin-right:4px; flex:0 0 auto;
  width:var(--tap); height:var(--tap); display:grid; place-items:center;
  color:var(--ink); }
.topbar__act .ic{ width:21px; height:21px; stroke-width:1.9; }
.topbar--over .topbar__act{
  width:38px; height:38px; border-radius:var(--r-pill);
  background:var(--over-btn); color:var(--ink);
  box-shadow:var(--over-btn-sh);
}
.topbar--over .topbar__act .ic{ width:19px; height:19px; }

/* ── 탭바 ───────────────────────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-width:520px; margin:0 auto;
  /* ★260906 U1 — **4탭**(카테고리 탭 제거 · 운영자 지시). 390px 기기에서 칸당 97px 로
     넓어져 라벨을 원래 크기(11px)로 되돌린다 — 좁은 칸 때문에 줄였던 값이었다. */
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--line);
}
.tabbar button{
  height:58px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px;
  /* ★260906 U1 — 4탭으로 돌아와 칸이 78 → 97px 이 됐다(라벨 최장 `내 정보` 3자). */
  font-size:11px; font-weight:600; color:var(--ink-3);
  transition:color var(--dur) var(--ease);
}
.tabbar button svg{ width:22px; height:22px; }
.tabbar button[aria-current="page"]{ color:var(--accent); }
.tabbar button[aria-current="page"] svg{ stroke-width:2.1; }

/* ── 히어로(홈) ─────────────────────────────────────────────────────── */
.hero{ padding:8px 0 var(--gap-l); }
.hero h1{ font-size:26px; font-weight:800; line-height:1.28; letter-spacing:-.04em; }
.hero__sub{ margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }

/* ── 칩(필터) ───────────────────────────────────────────────────────── */
.c-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 var(--pad) 2px;
  margin:0 calc(var(--pad) * -1) var(--gap); scrollbar-width:none; }
.c-chips::-webkit-scrollbar{ display:none; }
.c-chips--wrap{ flex-wrap:wrap; overflow:visible; }
.c-chip{
  flex:0 0 auto; height:36px; padding:0 15px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  transition:all var(--dur) var(--ease);
}
.c-chip[aria-pressed="true"]{                 /* ★260902 v7 — 활성 칩을 액센트로(킷의 활성 상태) */
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.c-chip:active{ transform:scale(.97); }

/* ── 카드(목록·그리드) ──────────────────────────────────────────────── */
.c-list{ display:flex; flex-direction:column; gap:10px; }
.c-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.c-card{
  display:block; width:100%; text-align:left;
  background:var(--surface); border-radius:var(--r-l);
  border:1px solid var(--line); box-shadow:none;
  padding:16px; transition:transform var(--dur) var(--ease),
                          box-shadow var(--dur) var(--ease);
}
.c-card:active{ transform:scale(.985); box-shadow:var(--sh-up); }
.c-card__top{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; }
.c-card__cat{ font-size:11.5px; font-weight:700; color:var(--ink-2);
  background:var(--fill); border-radius:6px; padding:3px 7px; }
/* ★★260904 P4 — **같은 요리를 여러 쉐프가 갖고 있다**는 신호(운영자 승인 그룹핑).
   액센트를 쓰는 이유: 이건 분류 라벨(회색)이 아니라 **이 앱만의 가치**를 알리는 자리다
   ("무생채, 쉐프 16명의 방법" — 유튜브 검색이 못 하는 것). 다만 제목보다 작고
   행마다 반복되므로 배경은 옅은 틴트로만 둔다. */
/* ★260904 — `.c-card__dish`(쉐프 N명 배지) 규칙을 **삭제**했다(운영자 결정).
   행마다 한 줄을 차지하는데, 카드를 열면 하단 '다른 쉐프의 요리법'이 같은 정보를
   전량 기준으로 더 정확히 준다. 그룹핑 자체는 유지한다. */
.c-card__title{
  margin-top:8px; font-size:16px; font-weight:700; line-height:1.38;
  letter-spacing:-.03em; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.c-card__meta{ margin-top:7px; font-size:12.5px; color:var(--ink-3); font-weight:500; }
.c-card__badges{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.c-grid .c-card{ padding:14px; }
.c-grid .c-card__title{ font-size:15px; }

/* ── 썸네일(음식 사진) ──────────────────────────────────────────────────
 * ★260901 — 사진은 유튜브 공식 호스트에서 온다(우리 서버에 두지 않는다).
 * 두 가지만 지킨다: ① 자리를 미리 잡아 **레이아웃이 튀지 않게**(aspect-ratio)
 * ② 실패하면 회색 면으로 조용히 떨어지게(깨진 이미지 아이콘 금지 · data-fallback).
 */
.c-thumb{ display:block; position:relative; overflow:hidden;
  background:var(--fill); border-radius:var(--r-m); flex:0 0 auto; }
.c-thumb img{ display:block; width:100%; height:100%; object-fit:cover;
  /* ★260902 크롭 기준점을 아래로 — 쇼츠 자막은 위·중앙에 오고 음식은 그 아래에 있다.
     정중앙 크롭은 자막을 잘라 걸치게 만들었다(2회전 촬영에서 확인). */
  object-position:center 62%;
  border-radius:inherit; opacity:0; transition:opacity var(--dur) var(--ease); }
/* 로드가 끝난 사진만 보인다 — 회색 면 → 사진으로 부드럽게 바뀐다 */
.c-thumb img[src]{ opacity:1; }
.c-thumb[data-fallback="1"] img{ display:none; }
/* ★★260904 T-d — 폴백을 **요리명 조판**으로 바꿨다(운영자 지시).
   종전에는 회색 바탕에 사선 하나였다 — "이미지가 깨졌다"로 읽힌다.
   요리명을 얹으면 "사진이 없다 · 이 요리다"로 읽히고, 목록에서 카드가 죽지 않는다.
   글자는 `data-label`(요리명)에서 온다 — 데이터 추가 0(카드가 이미 갖고 있다). */
.c-thumb[data-fallback="1"]::after{
  content:attr(data-label); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:6px; box-sizing:border-box;
  font-size:12px; font-weight:800; line-height:1.25; letter-spacing:-.03em;
  color:var(--ink-3); background:var(--fill);
  overflow:hidden;
}
.c-tile .c-thumb[data-fallback="1"]::after,
.c-hero-img .c-thumb[data-fallback="1"]::after{ font-size:17px; padding:12px; }
/* ★260902 정사각으로 통일 — 세로(쇼츠)·가로(롱폼) 원본이 섞여 있어 고정 16:9/4:3 프레임은
   한쪽을 반드시 납작하게 만든다. 1:1 + cover 면 어느 쪽이든 꽉 찬다. */
.c-card--thumb .c-thumb{ width:96px; aspect-ratio:1/1; }
/* ★260902 추천 타일 축소(운영자 지적 "추천 이미지가 너무 크다")
   원인은 두 값의 곱이었다: 스와이프 타일 **폭 78%** × **1:1 비율**
   → 390px 화면에서 썸네일이 약 304px **정사각**(홈 전체의 1/4을 한 장이 먹었다).
   게다가 `frame0` 은 **원본 비율**이라 1:1 로 강제하면 위아래를 크게 잘라낸다
   — 접시가 프레임을 넘치고 음식이 무엇인지 오히려 덜 보였다.
   1차로 4:3(261×196)까지 내렸으나 운영자 재지적 *"아직도 너무 크다"* → **16:9 로 확정**한다.
   🔴 ★260904 정정 — 여기 있던 근거 문장이 **실측과 반대였다**(그 문장은 지웠다).
      전량 실측(3,193장): 세로 268×480 **57.8%** · 가로 480×268 42.2%.
      즉 다수가 세로이고, 16:9 고정 프레임은 그들의 면적 **68.6% 를 잘라내고 있었다**
      (운영자 지적 "가로세로 짤린다"의 정체 — 레터박스가 아니라 크롭이다).
      → 아래 `.c-thumb--v` 로 **원본 방향에 맞는 프레임**을 준다.
      같은 문장이 계획서 §11.6 으로도 옮겨 적혀 stale 이 전파됐다.
      🔴 비율 근거를 다시 쓸 때는 원장(`chef_thumb_quality.json`)의 `size` 로 **실측**할 것.
   폭도 78% → 70% 로 좁혀 다음 카드가 더 보이게 했다(옆에 더 있다는 신호가 강해진다).
   결과: 304×304 → **235×132**(높이 -57%). 목록 행 썸네일은 계속 1:1 — 거기선 글이 주인공이다. */
.c-tile .c-thumb{ width:100%; aspect-ratio:16/9; margin-bottom:8px; }
.c-hero-img .c-thumb{ width:100%; aspect-ratio:16/9; border-radius:var(--r-l);
  margin:0 0 16px; }

/* ★★260904 P3 — **세로 원본 전용 프레임**(감사 §15.4.4 N19).
   frame0 은 원본 비율로 오고 실측 57.8% 가 세로(268×480)다. 16:9 에 cover 하면
   면적의 68.6% 가 잘려 가운데 띠만 남는다 → 세로 카드는 4:5 로 준다(크롭 약 20%).
   9:16 을 그대로 쓰지 않는 이유: 목록에서 카드 한 장이 화면을 다 먹는다
   (운영자가 두 번 지적한 "추천 이미지가 너무 크다"로 되돌아간다).
   🔴 `th≥1`(강등) 카드에는 이 클래스를 붙이지 않는다 — 그건 mqdefault(320×180 고정)라
      세로 프레임을 주면 반대로 그 쪽이 잘린다. 판정은 `app.js thumbHtml` 이 한다. */
/* 🔴 ★260904 정정 — **추천 타일에는 세로 프레임을 주지 않는다.**
   P3 에서 `.c-tile` 까지 4/5 로 준 것이 **회귀였다**: 390px 기기에서 타일 폭 70%(273px) 기준
   16/9 = 154px 인데 4/5 는 **341px(2.2배)** 가 된다. 운영자가 **두 번** 지적한
   "추천 이미지가 너무 크다"로 정확히 되돌아갔다(세 번째 지적을 받았다).
   추천 타일은 **고르는 자리**라 크기가 우선이고, 크롭 손실은 상세에서 회복한다.
   세로 프레임은 **카드 상세 히어로에서만** — 거기가 실제로 음식을 보는 자리다. */
.c-hero-img .c-thumb--v{ aspect-ratio:4/5; }
/* 히어로는 화면 폭까지 커진다 — frame0 세로본은 폭이 268px 뿐이라 390px 기기에서
   1.18~1.93배 확대돼 흐려진다(감사 §15.4.4). 폭을 원본 이내로 묶어 업스케일을 없앤다. */
.c-hero-img .c-thumb--v{ max-width:268px; margin-left:auto; margin-right:auto; }

/* 썸네일이 붙은 목록 행 — 사진 왼쪽, 글 오른쪽(만개의레시피·해먹남녀 목록 형식) */
.c-card--thumb{ display:flex; gap:13px; align-items:flex-start; padding:13px; }
.c-card--thumb .c-card__body{ display:block; min-width:0; flex:1 1 auto; }
.c-card--thumb .c-card__title{ margin-top:0; font-size:15.5px; }
.c-card--thumb .c-card__badges{ margin-top:8px; }
.c-card__meta--ok{ color:var(--ok); }

/* 사진 타일(2열) — 고르는 화면 전용 */
.c-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 var(--pad); }
.c-tile{ display:block; width:100%; text-align:left; background:transparent;
  border:0; padding:0; transition:transform var(--dur) var(--ease); }
.c-tile:active{ transform:scale(.985); }
.c-tile__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:14.5px; font-weight:700; line-height:1.36;
  letter-spacing:-.03em; color:var(--ink); }
.c-tile__meta{ display:block; margin-top:5px; font-size:12px; color:var(--ink-3);
  font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 검색 진입(홈) — 입력처럼 보이는 버튼. 실제 입력은 목록 화면의 것 하나뿐이다.
   ★★260906 U2 — 운영자 지적 *"검색창이 눈에 안 띈다"*. 종전은 아이보리 바탕(--bg) 위에
   한 톤 진한 회색 필(--fill)이라 **대비가 사실상 없었다**(둘 다 무채색 크림).
   그래서 세 가지를 바꾼다: ① 면을 흰색으로 띄우고 ② 액센트 테두리·아이콘으로 색을 주고
   ③ 오른쪽에 `검색` 필을 붙여 **누르는 것**임을 알린다(입력창처럼 보이면 눌러야 하는지 모른다).
   높이도 46 → 52px 로 올린다 — 첫 화면 상단에서 CTA 두 칸 바로 아래에 서는 요소다. */
.c-searchgo{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px;
  margin:0 0 var(--gap); padding:0 12px 0 15px; border:1.5px solid var(--accent-line);
  border-radius:var(--r-m); background:var(--surface); box-shadow:var(--sh);
  font-size:14.5px; font-weight:700; color:var(--ink-2); }
.c-searchgo .ic{ width:20px; height:20px; stroke:var(--accent); stroke-width:2.1; }
.c-searchgo__txt{ flex:1 1 auto; text-align:left; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.c-searchgo__go{ flex:0 0 auto; padding:6px 12px; border-radius:var(--r-pill);
  background:var(--accent-weak); color:var(--accent);
  font-size:12.5px; font-weight:800; letter-spacing:-.02em; }
.c-searchgo:active{ background:var(--accent-weak); }

/* 분류 타일 — 이름 + 장수. 개수를 함께 적어 빈 분류를 눌러 빈 화면을 만나지 않게 한다. */
/* ★260902 분류 타일 규격은 파일 아래(레퍼런스 접목 절)로 옮겼다 — 사진 타일 형식으로 바뀌었다.
   여기 옛 2열 카드 규칙을 남겨두니 border·padding 이 새 규칙에 섞여 **사진에 테두리가 붙었다**
   (촬영으로 발견). 같은 클래스를 두 곳에 정의하면 다음 사람이 고칠 수 없다. */

/* 인분 환산 — 표시 환산만 한다(원문 분량은 건드리지 않는다) */
.c-serv{ display:flex; align-items:center; gap:8px; padding:0 var(--pad) 12px; }
.c-serv__label{ font-size:12.5px; font-weight:700; color:var(--ink-3); }
.c-serv__note{ margin:0 var(--pad) 12px; font-size:12px; line-height:1.5;
  color:var(--ink-3); }

/* 재료 체크 — 장 볼 때 짚는 동작. 체크된 줄은 색을 빼고 글자를 지운다. */
.c-row-ing{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* 대체재료 블록은 행 아래로 내려간다(체크 버튼 옆에 끼면 폭이 무너진다) */
.c-row-ing__sub{ order:3; flex:1 1 100%; }
/* 🔴★260904 체크를 **오른쪽 끝**으로(운영자 지시).
   종전에는 왼쪽 첫 칸이었고, 아래 `장보기` 절의 `.c-row-ing__main{width:100%}` 가
   상세 화면의 행까지 함께 물어 **체크가 한 줄을 통째로 차지했다** — 한 행이 두 줄이 됐다
   (운영자 캡처). 그 규칙은 장보기 행에만 걸리게 좁혔고(:only-child),
   체크는 `order` 로 오른쪽에 세운다. 읽는 순서(이모지→이름→분량)를 앞에서 가로막지 않고,
   엄지가 닿는 쪽에 놓인다. */
.c-row-ing__main{ order:1; }
.c-row-ing__chk{ order:2; flex:0 0 auto; width:26px; height:26px; margin-top:0;
  border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); display:grid; place-items:center; }
.c-row-ing__chk .ic{ width:15px; height:15px; stroke:var(--line); }
.c-row-ing[data-done="1"] .c-row-ing__chk{ background:var(--ink); border-color:var(--ink); }
.c-row-ing[data-done="1"] .c-row-ing__chk .ic{ stroke:var(--surface); }
.c-row-ing[data-done="1"] .c-row-ing__name,
.c-row-ing[data-done="1"] .c-row-ing__qty{ color:var(--ink-3);
  text-decoration:line-through; }
.c-row-ing[data-done="1"] .c-row-ing__em{ opacity:.45; }

/* ── 배지 ───────────────────────────────────────────────────────────── */
.c-badge{
  display:inline-flex; align-items:center; height:23px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:-.02em;
  background:var(--fill); color:var(--ink-2);
}
.c-badge--new{ background:var(--ok-weak); color:var(--ok); }
/* 분량 미표기 — 경고색으로 미리 알린다(열어 보고 빈칸을 발견하는 것보다 낫다) */
.c-badge--noqty{ background:var(--warn-weak); color:var(--warn); }

/* ── 버튼 ───────────────────────────────────────────────────────────── */
.c-btn{
  min-height:52px; padding:0 18px; border-radius:var(--r-m);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:15.5px; font-weight:700; letter-spacing:-.02em; width:100%;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.c-btn:active{ transform:scale(.985); }
.c-btn--primary{ background:var(--accent); color:#fff; }
.c-btn--primary:active{ background:var(--accent-hover); }
.c-btn--line{ background:var(--surface); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line); }
.c-btn--ghost{ background:var(--fill); color:var(--ink-2); }
.c-btn--sm{ min-height:38px; padding:0 13px; font-size:13.5px; border-radius:var(--r-s); }
.c-btn-row{ display:flex; gap:8px; }

/* ── 상세: 스탯 3분할(레시픽 방식) ──────────────────────────────────── */
.c-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--surface); border-radius:var(--r-l); border:1px solid var(--line);
  margin:var(--gap) 0 var(--gap-l); padding:16px 0;
}
.c-stats div{ text-align:center; }
.c-stats div + div{ box-shadow:inset 1px 0 0 var(--line); }
.c-stats b{ display:block; font-size:17px; font-weight:700; letter-spacing:-.03em; }
.c-stats span{ display:block; margin-top:3px; font-size:12px; color:var(--ink-3); }

/* ── 상세: 재료 = 표 ────────────────────────────────────────────────
   레시픽에서 가장 잘 된 부분. 이름 왼쪽 · 분량 오른쪽 정렬 · 한 줄 = 한 필.
   "몇 g이었지"를 눈으로 훑어 찾을 수 있어야 한다. */
.c-ings{ display:flex; flex-direction:column; gap:7px; }
/* 그룹 소제목 — 쉐프가 나눠 적은 묶음("유부조림"·"양념")을 그대로 살린다.
   행마다 붙이던 꼬리표를 없애고 이 한 줄이 대신한다(운영자 캡처: 같은 말 8번 반복). */
.c-ings__group{ margin:18px 0 8px; font-size:13px; font-weight:700; color:var(--ink-3);
  letter-spacing:-.02em; }
.c-ings__group:first-child{ margin-top:0; }
.c-row-ing{ background:var(--fill); border-radius:var(--r-m); padding:13px 15px; }
.c-row-ing__main{ display:flex; align-items:center; gap:10px;
  flex:1 1 auto; min-width:0; text-align:left; }
.c-row-ing__name{ font-size:15px; font-weight:600; letter-spacing:-.02em;
  flex:1 1 auto; min-width:0; }
.c-row-ing__group{
  flex:0 0 auto; font-size:11px; font-weight:700; color:var(--ink-3);
  background:var(--surface); border-radius:5px; padding:2px 6px;
}
.c-row-ing__qty{ flex:0 0 auto; font-size:15px; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; }
.c-row-ing__qty--none{ font-size:12.5px; font-weight:600; color:var(--warn); }
.c-row-ing__hint{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-weak); border-radius:var(--r-pill); padding:3px 8px; }
.c-row-ing[data-open="1"] .c-row-ing__hint{ background:var(--accent); color:#fff; }
/* 재료 이모지 — 그림이 앞에 서면 목록을 '읽지 않고 훑을' 수 있다(운영자 지시 260831) */
.c-row-ing__em{ flex:0 0 26px; font-size:19px; line-height:1;
  text-align:center; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.c-chip [aria-hidden="true"]{ font-size:15px; line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }

/* 🔴 대체안은 **기본 접힘**이다 — v5 초판에서 이 규칙이 빠져 전부 펼쳐졌다.
   재료 10개가 각자 대체안 2~3개를 펼치면 화면이 글자 벽이 된다. */
.c-row-ing__sub{ display:none; }
.c-row-ing[data-open="1"] .c-row-ing__sub{ display:block; }
.c-row-ing__sub{
  margin-top:10px; padding:11px 12px; border-radius:var(--r-s);
  background:var(--surface); font-size:13px; color:var(--ink-2); line-height:1.55;
}
.c-row-ing__sub b{ font-weight:700; color:var(--ink); }

/* ★★260909 대체재료 블록 개편(운영자 지시) — 마크업 근거는 app.js 의 같은 날짜 주석.
   요지: ① 화면에서 `—` 를 걷어내고(본문 폰트에서 `ㅡ` 로 보인다) ② 근거를 **배지로 세우고**
        ③ 대체안에 번호를 붙여 "몇 번째 선택지"가 보이게 한다. */

/* 번호 목록 — `<ol>` 의 기본 마커는 쓰지 않는다(들여쓰기·정렬이 우리 밴드와 안 맞는다).
   대신 카운터로 **동그란 번호 칩**을 직접 그린다. */
.sub-list{ list-style:none; counter-reset:sub; margin:0; padding:0; }
.sub-row{ counter-increment:sub; position:relative; padding-left:22px; }
.sub-row + .sub-row{ margin-top:8px; }
.sub-row:before{
  content:counter(sub); position:absolute; left:0; top:1px;
  width:16px; height:16px; border-radius:var(--r-pill);
  background:var(--accent-weak); color:var(--accent);
  font-family:var(--font-sys);        /* 숫자는 시스템 폰트 · 작은 글자에서 또렷하다 */
  font-size:10px; font-weight:700;
  /* 🔴 `text-align:center` 를 쓰지 않는다 — 게이트 D4 가 중앙정렬 지점을 통제하고
     (허용 7곳), 번호 칩은 거기 없다. 허용목록을 넓히는 대신 이 저장소가 이미 쓰는
     관용구를 따른다: `.c-row-ing__chk` 도 `display:grid; place-items:center` 다.
     원 안의 숫자를 가운데 두는 데는 이쪽이 line-height 트릭보다 정확하기도 하다. */
  display:grid; place-items:center;
}
/* 대체안이 하나뿐이면 번호가 정보가 아니다("1번" 다음이 없다) → 칩을 숨기고 여백만 되돌린다.
   🔴 `:only-child` 는 `li` 가 `ol` 의 유일한 자식일 때만 걸린다 — 그게 정확히 이 조건이다. */
.sub-row:only-child{ padding-left:0; }
.sub-row:only-child:before{ display:none; }

.sub-row__what{ display:block; font-weight:700; color:var(--ink); }
/* 주의사항은 **다른 줄**이다. 종전에는 `— 색이 든다` 처럼 같은 줄에 이어 붙였는데,
   "무엇으로 바꾸나"와 "바꾸면 무엇이 달라지나"는 성격이 다른 정보다. */
/* 🔴 경고 기호(⚠)를 쓰지 않는다 — 이 앱은 **이모지 금지**가 규칙이고(§3.1-1 · 게이트 D1)
   재료 이모지만 예외다. 대신 경고색(`--warn`)과 왼쪽 띠로 성격을 표시한다. */
.sub-row__note{ display:block; margin-top:3px; padding-left:8px;
  border-left:2px solid var(--warn-weak);
  font-size:12px; color:var(--warn); line-height:1.45; }

/* 근거 — 라벨을 **배지**로 세우고 설명이 그 옆에서 흐른다(운영자 지시 "옆에 설명을 써주거나").
   `display:inline` 배지라 설명이 길면 자연스럽게 다음 줄로 감긴다 — 좁은 폭에서 깨지지 않는다. */
.sub-basis{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-2); line-height:1.6; }
.sub-basis__tag{
  display:inline-block; margin-right:6px; padding:2px 8px; border-radius:var(--r-pill);
  background:var(--ok-weak); color:var(--ok);
  font-size:11px; font-weight:700; white-space:nowrap;
  /* 라벨은 짧고 굵게 읽는 자리 — 제목 폰트를 쓰지 않는다(11px 에서 손글씨는 뭉친다) */
  font-family:var(--font-sys);
}
.sub-basis__why{ color:var(--ink-2); }

/* ── 상세: 출처 한 줄 · 분량 미표기 안내 ────────────────────────────── */
.src-line{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.src-line__chef{ font-size:13px; font-weight:700; color:var(--accent);
  background:var(--accent-weak); border:1px solid var(--accent-line);
  border-radius:var(--r-pill); padding:5px 12px; }
.src-line__video{ font-size:12.5px; font-weight:600; color:var(--ink-3); }
.qty-note{ margin-top:10px; padding:13px 14px; border-radius:var(--r-m);
  background:var(--warn-weak); color:var(--warn); font-size:12.5px; line-height:1.55; }
.qty-note b{ font-weight:800; }

/* ★261029 F2 — 알림 권유 1줄(저장 직후 · 그 방문에서만). 바텀시트가 아니라 본문 안의 한 줄이다
   (반려 체크 T3 — 자동 노출 금지). 색은 브랜드 크림 — 경고(--warn)로 읽히면 안 된다. */
.c-nudge{ margin:10px 0 4px; padding:12px 14px; border-radius:var(--r-m);
  background:var(--accent-weak); border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-s); }
.c-nudge__msg{ margin:0; font-size:13px; line-height:1.5; color:var(--ink); }
.c-nudge__acts{ display:flex; gap:var(--gap-xs); flex-shrink:0; }

/* ★261029 홈 상단 알림 안내 카드 — 사주(saju-chart .nt-invite · 261025)와 같은 꼴(아이콘·제목 1줄·설명 1줄·
   오른쪽 알약·모서리 ×). 색만 쉐프 액센트로. 화면 안 카드라 닫을 수 있다(반려 체크 T3). */
.nt-invite{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  margin:12px 0 12px; padding:10px 12px; border-radius:var(--r-l);
  background:var(--accent-weak); border:1px solid var(--accent-line); }
.nt-invite__i{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:var(--r-pill); background:var(--accent); }
.nt-invite__i svg{ width:16px; height:16px; fill:none; stroke:var(--surface); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.nt-invite__txt{ min-width:0; }
.nt-invite__t, .nt-invite__p{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nt-invite__t{ font-family:var(--font-sys); font-size:14.5px; font-weight:800; line-height:1.35; color:var(--ink); }
.nt-invite__p{ font-family:var(--font-sys); font-size:12px; line-height:1.4; color:var(--ink-2); }
.nt-invite__b{ min-height:var(--tap); padding:0 14px; border:0; border-radius:var(--r-pill);
  background:var(--accent); color:var(--surface); font-family:var(--font-sys); font-size:13px; font-weight:700;
  white-space:nowrap; cursor:pointer; }
.nt-invite__b:active{ background:var(--accent-hover); }
.nt-invite__x{ position:absolute; top:-9px; right:-9px; width:24px; height:24px; padding:0;
  border-radius:var(--r-pill); border:1px solid var(--accent-line); background:var(--surface);
  font-family:var(--font-sys); font-size:15px; line-height:1; color:var(--ink); cursor:pointer;
  box-shadow:0 0 0 10px transparent; }
.qty-note__link{ font-weight:800; color:var(--warn); text-decoration:underline;
  text-underline-offset:2px; font-size:12.5px; }

/* ── 상세: 계량법 안내 (C3) ─────────────────────────────────────────
   ★260901 — 레시피 사이트 관습에서 가져온 **자리**(재료 섹션 우상단)에,
   **우리가 쓴 표**를 넣는다. 기본 접힘 — 재료를 읽으러 온 화면을 표가 밀어내면 안 된다.
   실측 근거: 우리 카드 재료의 12% 가 분량 빈칸이고, 그 숫자를 지어낼 수는 없다(R2). */
.c-measure{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease);
  margin:0; }
.c-measure[data-open="1"]{ margin-top:12px; }
.c-measure[data-open="1"]{ grid-template-rows:1fr; }
.c-measure__body{ overflow:hidden; }
.c-measure[data-open="1"] .c-measure__body{ padding:15px 16px; border-radius:var(--r-m);
  background:var(--fill); border:1px solid var(--line); }
.c-measure__group{ font-size:12px; font-weight:800; color:var(--ink-3);
  letter-spacing:-.02em; margin:14px 0 7px; }
.c-measure__group:first-child{ margin-top:0; }
.c-measure__list{ display:flex; flex-direction:column; gap:6px; }
.c-measure__row{ display:flex; align-items:baseline; gap:10px; }
.c-measure__row dt{ flex:0 0 92px; font-size:13.5px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); }
.c-measure__row dd{ flex:1 1 auto; min-width:0; font-size:13px; line-height:1.5;
  color:var(--ink-2); }
.c-measure__note{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.55; color:var(--ink-3); }

/* ── 상세: 조리 단계 ────────────────────────────────────────────────── */
.c-steps{ display:flex; flex-direction:column; gap:12px; }
.c-steps li{ display:flex; gap:12px; font-size:14.5px; line-height:1.6;
  color:var(--ink-2); }
.c-steps li::before{
  counter-increment:step; content:counter(step);
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--r-pill);
  /* 🔴 ★260908 운영자 지적 *"요리법 순서의 숫자가 안 보인다"*(다크).
     바닥은 `--ink`(테마 따라 뒤집힘 · 다크=#f6f3ee)인데 글자만 `#fff` 로 박혀 있어
     **다크에서 흰 원 위의 흰 숫자 1.11:1** 이 됐다(라이트는 17.12:1 이라 안 보였다).
     정답은 같은 파일이 이미 갖고 있었다 — `.c-row-ing__chk .ic{ stroke:var(--surface) }`.
     바닥이 토큰이면 글자도 토큰이어야 한다. 라이트 렌더는 완전히 동일하다(--surface=#fff). */
  background:var(--ink); color:var(--surface);
  font-size:12.5px; font-weight:800; display:grid; place-items:center;
  font-variant-numeric:tabular-nums;
}
.c-steps{ counter-reset:step; }
.c-steps__note{ margin-top:12px; font-size:12.5px; color:var(--ink-3); }

/* ── 상세: 쇼핑(기본 접힘) ──────────────────────────────────────────── */
.c-shop{ background:var(--surface); border-radius:var(--r-l); border:1px solid var(--line);
  overflow:hidden; }
.c-shop__toggle{ width:100%; min-height:56px; padding:0 16px;
  display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700;
  letter-spacing:-.02em; }
.c-shop__count{ font-size:12px; font-weight:700; color:var(--ink-3);
  background:var(--fill); border-radius:var(--r-pill); padding:3px 8px; }
.c-shop__caret{ margin-left:auto; width:18px; height:18px; color:var(--ink-3);
  transition:transform var(--dur) var(--ease); }
.c-shop[data-open="1"] .c-shop__caret{ transform:rotate(180deg); }
/* 🔴 기본 접힘 — 이 한 줄이 v3~v5 내내 **빠져 있었다**(운영자 캡처로 발견).
   앱인토스 반려 사례(커뮤니티 3875)의 사유가 "유저가 인지하지 않은 상태로 외부 이동"이다.
   접혀 있지 않으면 우리가 문서에 적어둔 5중 인지 장치의 ①②가 실제로는 없는 셈이었다. */
.c-shop__body{ display:none; padding:2px 16px 16px; border-top:1px solid var(--line); }
/* ★260904 형제 섹션 — 아코디언 안이라 목록의 좌우 여백을 걷는다(중복 패딩 방지). */
.c-more-chef .c-shop__body .c-list{ padding:0; }
.c-shop[data-open="1"] .c-shop__body{ display:block; }
.c-shop__item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px;
  width:100%; text-align:left; padding:12px 0; min-height:56px; align-items:center;
  transition:background var(--dur) var(--ease); }
.c-shop__item + .c-shop__item{ border-top:1px solid var(--line); }
.c-shop__item:active{ background:var(--fill); }
/* ★260904 위계 반전(운영자 지시) — **재료명이 주인공**이다.
   사용자가 이 목록을 훑는 이유는 "내가 뭘 사야 하지"이고, 판매자가 붙인 긴 상품명은
   그 다음에 "이거 맞나"를 확인하는 보조 정보다. 종전에는 정확히 반대였다. */
.c-shop__ing{ grid-column:1; font-size:15px; font-weight:700; color:var(--ink);
  letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 🔴 **한 줄 고정**(운영자 지시) — 두 줄 상품명은 행 높이를 들쭉날쭉하게 만들어
   목록의 세로 스캔을 깬다. 전문은 `title`(길게 누르기)로 남긴다. */
.c-shop__product{ grid-column:1; font-size:12.5px; font-weight:400; line-height:1.45;
  color:var(--ink-3); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-shop__go{ grid-column:2; grid-row:1 / span 2; align-self:center;
  font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap;
  background:var(--accent-weak); border:1px solid var(--accent-line);
  border-radius:var(--r-pill); padding:7px 11px; }
/* ★260904 대가성 고지 — 잔글씨에서 **박스 + 배지**로(운영자 지시).
   링크 앞에 두는 것(감사 §4.3)은 최소 요건이고, 실제 인지는 대비가 만든다.
   문구는 정본 전문 그대로다 — 여기서 손대면 parity 가드가 문다. */
.c-shop__notice{ margin:10px 0 4px; padding:10px 12px; font-size:12px; line-height:1.55;
  color:var(--ink-2); font-weight:700; background:var(--accent-weak);
  border:1px solid var(--accent-line); border-radius:var(--r-m); }
/* 연결 준비중(demo) 공급자 — 경고 톤. 클래스명에 `notice` 를 반복하지 않는다:
   `test_chef_hardening_guard.py` 가 고지가 두 번 그려지지 않는지를 **문자열 개수**로 센다. */
.c-shop__adtag{ display:inline-block; margin-right:6px; padding:2px 7px;
  border-radius:var(--r-pill); background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:0; vertical-align:1px; }

/* ── 쉐프 ───────────────────────────────────────────────────────────── */
/* ★260903 P3-2 — `.chef-row*` 규칙 12개를 삭제했다. 그 마크업을 만들던
   `chefRowHtml()` 이 260902 사진 타일 개편 이후 호출부 0곳이었다(죽은 코드).
   `.chef-av`(이니셜 원형)는 채널 페이지 히어로가 계속 쓰므로 남긴다. */
/* 조리단계 번호와 **같은 계통**이라 같이 고친다(260908) — 바닥 `--ink` + 글자 `#fff`. */
.chef-av{ flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--surface);
  display:grid; place-items:center; font-size:16px; font-weight:800; }
.chef-hero{ background:var(--fill); border-radius:var(--r-xl);
  padding:22px 20px; margin:0 0 var(--gap-l); }
.chef-hero__top{ display:flex; align-items:center; gap:14px; }
.chef-hero__name{ font-size:19px; font-weight:800; letter-spacing:-.035em; line-height:1.3; }
.chef-hero__meta{ margin-top:5px; font-size:13px; color:var(--ink-3); }
.chef-hero__actions{ margin-top:18px; }
.chef-hero .chef-av{ width:56px; height:56px; font-size:19px; }

/* ── 기타 ───────────────────────────────────────────────────────────── */
.c-empty{ padding:56px 20px; text-align:center; }
.c-empty__msg{ font-size:14px; color:var(--ink-3); line-height:1.6; }
.c-skeleton{ height:92px; border-radius:var(--r-l); background:var(--fill);
  animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }
.hr{ height:1px; background:var(--line); border:0; margin:var(--gap-l) 0; }

/* ★260902 인앱광고 전량 제외(운영자 결정) — `.ad-slot` 규칙 삭제.
   근거: **광고가 허용되는 자리와 수익이 나는 자리가 겹치지 않는다.**
   상세·플레이어는 ToS III.G.1.c/d 로 금지인데 거기가 쿠팡 전환 최고 지점이고,
   내 서랍은 ToS 근거가 최상이지만 **구매 직전**이라 전환을 깎는다(쿠팡 900원/전환
   vs 배너 3원/노출 — 전면 1회가 전환 0.4%만 깎아도 손해).
   되살리려면 **유튜브 데이터 0인 우리 저작 표면**을 먼저 만들 것
   (후보: 대체재료 사전 — 썸네일조차 없다). 상세 실측은 ideabank 계획서 §7. */

/* ══════════════════════════════════════════════════════════════════════
 * v5 추가 — 운영자 레퍼런스(레시픽 외 앱 3종) 반영
 *   · 검색 필드: 필 형태 + 좌측 아이콘 (피드형 앱 상단)
 *   · 번호 단계 헤더: 원형 번호 배지 + 제목 + 부제 ("① 없는 재료를 골라요")
 *   · 2열 카드 부제: 카드마다 한 줄 설명 ("짠맛과 감칠맛을 더해요")
 *   · 플로팅 탭바: 바닥에 붙은 바 대신 **띄운 알약** + 그림자
 *   · 옅은 필 전체보기 버튼
 * ══════════════════════════════════════════════════════════════════════ */

/* ── 검색 ───────────────────────────────────────────────────────────── */
.c-search{
  display:flex; align-items:center; gap:9px;
  margin:0 0 var(--gap); padding:0 15px; height:50px;
  background:var(--fill); border-radius:var(--r-m);
}
.c-search svg{ width:19px; height:19px; color:var(--ink-3); flex:0 0 auto; }
.c-search input{
  flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font:600 14.5px/1 var(--font); letter-spacing:-.02em; color:var(--ink);
}
.c-search input::placeholder{ color:var(--ink-3); font-weight:500; }
.c-search__clear{ flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--fill-2); color:var(--ink-3); display:grid; place-items:center; }
.c-search__clear svg{ width:12px; height:12px; stroke-width:2.4; }

/* ── 검색 화면(★★260907 B안) ────────────────────────────────────────
 * 검색창은 **결과를 따라 내려간다**(sticky). 종전에는 목록 화면의 정적 검색창이라
 * 결과를 스크롤하면 사라졌고, 질의를 고치려면 맨 위로 되돌아가야 했다.
 * `.screen` 이 좌우 20px(--pad) 를 먹고 있어 음수 마진으로 되돌려 바탕을 꽉 채운다 —
 * 안 그러면 결과가 좌우 틈으로 검색창 뒤를 지나간다(반투명 배경이라 보인다).
 * `top` 은 고정 상단바 높이와 **같은 식**을 쓴다(상단바가 바뀌면 같이 바꿀 것).
 */
.c-searchbar{
  position:sticky; z-index:20;
  top:calc(env(safe-area-inset-top,0px) + 56px);
  margin:0 calc(var(--pad) * -1) var(--gap);
  padding:8px var(--pad) 10px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
}
.c-searchbar .c-search{ margin:0; }

/* 최근 검색어 — 알약 하나에 **두 기능**(눌러 검색 / × 지우기)이라 버튼 두 개를 붙인다.
   중첩 버튼은 유효하지 않으므로 겉은 span 이고, 시각적 알약은 이 컨테이너가 만든다. */
.c-rq{ display:inline-flex; align-items:center; background:var(--fill);
  border-radius:var(--r-pill); overflow:hidden; }
.c-rq__go{ padding:8px 4px 8px 13px; font-size:13.5px; font-weight:600;
  color:var(--ink); letter-spacing:-.02em; }
.c-rq__del{ display:grid; place-items:center; width:26px; height:32px;
  color:var(--ink-3); }
.c-rq__del svg{ width:11px; height:11px; stroke:currentColor; stroke-width:2.6;
  fill:none; stroke-linecap:round; }
.c-rq:active{ background:var(--fill-2); }


/* ── 번호 단계 헤더 ─────────────────────────────────────────────────── */
.step-head{ display:flex; gap:12px; margin-bottom:14px; }
.step-head__no{
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:800; display:grid; place-items:center;
  font-variant-numeric:tabular-nums;
}
.step-head__body{ flex:1 1 auto; min-width:0; }
.step-head__title{ font-size:17px; font-weight:700; letter-spacing:-.03em;
  line-height:1.35; }
.step-head__sub{ margin-top:4px; font-size:13px; color:var(--ink-3); line-height:1.5; }

/* ── 카드 부제(2열 그리드에서 특히) ─────────────────────────────────── */
.c-card__sub{
  margin-top:6px; font-size:12.5px; color:var(--ink-3); line-height:1.45; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 전체보기(옅은 필) ──────────────────────────────────────────────── */
.c-more-fill{
  width:100%; min-height:50px; border-radius:var(--r-m);
  background:var(--accent-weak); color:var(--accent);
  font-size:14.5px; font-weight:700; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ── 플로팅 탭바(레퍼런스 3·5) ──────────────────────────────────────
   바닥에 붙은 회색 바는 화면을 잘라 보이게 한다. 띄우면 콘텐츠가 흐른다. */
.tabbar{
  left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  max-width:496px; padding-bottom:0;
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:0 6px 24px rgba(23,32,44,.13);
}
.tabbar button{ height:60px; }
.tabbar button:first-child{ border-radius:var(--r-xl) 0 0 var(--r-xl); }
.tabbar button:last-child{ border-radius:0 var(--r-xl) var(--r-xl) 0; }

/* .screen 이 좌우 패딩을 갖게 되면서, 화면 안 블록은 패딩을 스스로 주지 않는다.
   예외는 위 .c-chips 처럼 '끝까지 흘러야' 하는 것뿐이다. */
#result > .caption{ padding:0 0 10px !important; }

/* ── 브랜드 마크 (260902) ──────────────────────────────────────────
   운영자 지적: "우리 마스코트가 전혀 안 보인다" — 앱 안에 브랜드 시각 요소가 0개였다.
   상단바에는 작게(항상 보이는 표식), 홈 히어로에는 크게(첫 화면의 얼굴). */
/* 🔴 `[hidden]` 은 display 선언에 밀린다 — JS 로 숨겼는데도 목록 화면에서 계속 보였다(260902 3회전).
   요소를 display 로 배치하는 컴포넌트는 hidden 규칙을 **같이** 써야 한다. */
/* ★260909 C1 — `.topbar__brand`(상단바 브랜드 마크) 규칙을 걷었다.
   네이티브 네비바가 등록 브랜드 로고 + 앱 이름을 그리므로 상단바 마크는 **중복**이다.
   🟢 260902 에 확립한 "로고는 3색 정본을 그대로 쓴다(단색 틴트 금지)" 규율은 살아 있다 —
      홈 히어로 `.hero__mark` 와 내 정보 아바타 `.c-profile__av` 가 같은 `#i-logo` 를 쓴다. */
/* ★260902 3회전 — 56px 블록 마크가 상단바 마크와 중복돼 보이고 첫 화면 여백만 먹었다.
   제목과 **같은 줄**에 놓으면 브랜드는 그대로 보이면서 카드가 한 줄 더 올라온다. */
/* ★260904 §29 — 부제(`쉐프가 적어둔 재료 그대로…`)를 뺐다. 그 문구가 만들던
   제목↔버튼 간격은 유지해야 하므로 헤로 하단 여백을 여기서 직접 준다
   (운영자: "공백은 유지해 뭐먹지랑 아래 레시피 선택하는 게 너무 붙으면 UI 이상"). */
.hero{ padding-top:4px; padding-bottom:20px; }
.hero h1{ margin-bottom:18px; }
.hero__row{ display:flex; align-items:center; gap:11px; }
/* ★260902 — 액센트 타일 + 흰 글리프 조합을 **뺀다**. 그건 단색 실루엣이던 시절의 처방이고,
   3색 로고를 색 타일 위에 얹으면 로고의 테라코타와 배경 테라코타가 겹쳐 형태가 뭉갠다.
   로고를 그대로 놓는다(스토어 아이콘도 아이보리 바탕에 마크만 있는 구성이다). */
.hero__mark{ display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; }
.hero__mark svg{ width:38px; height:38px; }

/* ══════════════════════════════════════════════════════════════════
   레퍼런스 접목 (260902) — Food Delivery iOS UI Kit 을 Figma MCP 로 정독해
   **정보 위계와 배치 규칙만** 가져왔다(색·폰트·일러스트는 우리 것을 유지).
   ══════════════════════════════════════════════════════════════════ */

/* ── 분류 타일: 대표 사진(원형) + 이름 + 장수 ──────────────────────
   킷은 카테고리를 원형 음식 사진으로 보여준다. 텍스트만인 타일은 고를 근거가 없다. */
/* ★★260904 §29 — 가로 스크롤 → **격자**(운영자 지적 "기타 쪽 이미지가 잘린다").
   분류는 **6종으로 고정**돼 있어(코드가 정하는 닫힌 집합) 스크롤이 필요한 개수가 아니다.
   그런데 `flex + overflow-x` 라 폭이 모자라면 마지막 칸이 잘린 채로 보였고,
   잘린 원은 "더 있는데 못 보여준다"가 아니라 그냥 **깨진 것**으로 읽힌다.
   → 6열 격자로 두고, 좁아지면 **3열 2줄**로 접는다(운영자가 제시한 두 안 중 후자 포함).
   원 지름을 고정값에서 `1fr` 기반으로 바꿔 어느 폭에서도 6칸이 들어간다. */
.c-cats{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px 6px;
  padding:2px 0 4px; }
@media (max-width:390px){
  .c-cats{ grid-template-columns:repeat(3, 1fr); gap:14px 8px; }
}
.c-cat{ display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; min-width:0; }
.c-cat__thumb{ display:block; width:100%; max-width:64px; aspect-ratio:1/1; }
.c-cat__thumb .c-thumb{ width:100%; height:100%; border-radius:var(--r-pill);
  aspect-ratio:1/1; box-shadow:var(--sh); }
.c-cat__name{ font-size:11.5px; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; text-align:center; line-height:1.25;
  /* ★★260909 운영자 지시 — 분류명이 의미와 무관한 자리에서 끊기던 것(굽고튀기/고, 간식디/저트).
     `keep-all` 이 **아무 데서나 끊는 것**을 막고, 마크업의 `<wbr>` 이 허용 지점을 낸다
     (조각 규약은 core.js `catNameParts`). 둘 중 하나만 있으면 안 된다:
       · keep-all 만  → 끊을 곳이 없어 셀 밖으로 넘친다
       · <wbr> 만     → 브라우저가 여전히 아무 데서나 끊는다(CJK 기본 줄바꿈) */
  word-break:keep-all;
  /* 이름이 두 줄이 되는 칸과 한 줄인 칸이 섞이면 **아래 개수 숫자가 어긋난다**(격자가 어수선해진다).
     두 줄 자리를 미리 잡아 어느 칸이든 숫자가 같은 높이에 온다. */
  min-height:calc(2em * 1.25);
  display:flex; align-items:center; justify-content:center; }
.c-cat__n{ font-size:11px; font-weight:600; color:var(--ink-3); }
.c-cat:active{ transform:scale(.96); }

/* ── 사실 배지 한 줄: 재료 · 단계 · 대체 ──────────────────────────
   킷은 별점·무료·배송시간을 아이콘+수치 한 줄로 붙인다. 우리 사실은 이 세 가지다. */
.c-card__facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.c-fact{ display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; color:var(--ink-2);
  background:var(--fill); border-radius:var(--r-s); padding:4px 8px; }
.c-fact .ic{ width:13px; height:13px; stroke-width:2; color:var(--accent); }

/* ── 카드 라운드·그림자 한 단 상향 ────────────────────────────────
   아이보리 바탕에서 카드가 더 뜬다(킷의 큰 라운드 + 부드러운 그림자 규칙). */
.c-card, .c-tile{ border-radius:var(--r-xl); }
.c-card{ box-shadow:0 2px 10px rgba(70,55,35,.05); }
.c-card:active{ box-shadow:0 4px 16px rgba(70,55,35,.10); }
.c-tile .c-thumb, .c-card--thumb .c-thumb{ border-radius:var(--r-l); }

/* ── 제목 폰트 적용 지점 (260902) ────────────────────────────────────
   짧고 굵게 읽는 자리에만. 부제·메타·재료 목록·버튼은 시스템 폰트를 유지한다
   (v3 교훈: 특색 폰트를 본문에 쓰면 한글이 읽기 힘들다). */
.topbar__title,
.hero h1,
.section__head h2,
.c-card__title,
.c-tile__title,
.c-cat__name,
.c-stats b,
.chef-hero__name{
  font-family:var(--font-title);
  letter-spacing:-.005em;         /* 학교알림장은 자간을 조이면 뭉친다 — 거의 기본값으로 */
}
/* 손글씨 계열은 시스템 폰트보다 글자가 조금 작게 앉는다 — 줄간을 넓혀 균형을 맞춘다 */
.hero h1{ line-height:1.34; }
.c-card__title, .c-tile__title{ line-height:1.44; }
/* 본문 폰트(자유시간)도 같은 이유로 한 단 넓힌다 — 촘촘한 목록에서 특히 차이가 크다 */
body{ line-height:1.62; }
.c-card__sub, .c-row-ing__name{ letter-spacing:-.005em; }

/* ── 폰트 적용 범위: 크기로 가른다 (260902 · 운영자 지적 반영) ────────
   *"직관성이 떨어진다"* 의 원인은 폰트 선택이 아니라 **작은 글자에 손글씨를 쓴 것**이었다.
   14px 이상은 학교 폰트(매력), 13px 이하와 **모든 수치**는 시스템 폰트(정확도).

   🔴 숫자는 크기와 무관하게 시스템 폰트다 — `0.5큰술` 의 소수점이 흐리면
      그건 미감 문제가 아니라 **정보가 틀리게 읽히는 문제**다. */
.num,
.c-row-ing__qty,
.c-stats b, .c-stats__txt,
.c-card__meta,
.c-card__facts, .c-fact,
.c-badge,
.c-cat__n,
.caption,
.hero__sub,
.c-card__sub,
.c-row-ing__hint, .c-row-ing__group, .c-row-ing__sub, .sub-basis,
.c-shop__ing, .c-shop__product, .c-shop__go, .c-shop__notice, .c-shop__count, .c-shop__adtag,
.chef-hero__meta,
.src-line__chef, .src-line__video,
.qty-note,
.section__more,
.tabbar button,
.c-chip,
.c-empty__msg,
.c-steps__note{
  font-family:var(--font-sys);
  letter-spacing:-.015em;         /* 시스템 폰트로 돌아오면 자간을 다시 조인다 */
}

/* 스탯 수치는 시스템 폰트로 돌리되 크기·굵기는 유지한다(읽는 축이 숫자다) */
.c-stats b{ font-weight:800; }
/* ★260903 P2-4 — 스탯 칸에 들어가는 **텍스트** 값(`재료만`). 17px/800 은 두 글자 숫자를
   위한 크기라, 여러 글자 텍스트를 넣으면 칸을 다 먹고 이웃 숫자보다 훨씬 무겁게 읽힌다
   (운영자 지적 "폰트가 혼자 튄다"의 실제 원인 — 폰트 종류는 세 칸 모두 같았다). */
.c-stats b.c-stats__txt{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
/* 재료 분량 — 표처럼 읽히도록 tabular-nums 를 확실히 건다 */
.c-row-ing__qty{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ── 합성 볼드 제거: 굵어야 할 자리는 알림장 Bold (260902 · 운영자 결정) ──
   **학교자유시간은 Regular 한 웨이트뿐**이라 600~700 을 요구하면 합성 볼드가 그려진다.
   굵기를 내리면 위계가 죽으므로, 굵어야 할 자리에 **알림장 Bold** 를 쓴다 —
   진짜 볼드가 나오고 학교안심 계열도 유지된다.

   ★ 13px 이하는 여기 넣지 않는다 — 손글씨는 작은 크기에서 불리하다(앞선 촬영 판정).
     그 자리는 위쪽 `--font-sys` 규칙이 이미 시스템 폰트로 잡아 뒀다. */
.c-btn,
.c-searchgo,
.c-row-ing__name,
.c-ings__group,
.c-row-ing__sub b,
.qty-note b, .qty-note__link,
.c-measure__group, .c-measure__row dt,
.c-shop__toggle,
.step-head__title,
.c-more-fill,
.c-serv__label{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:-.01em;
}
/* 원형·배지 안의 숫자는 시스템 폰트가 더 또렷하다(획이 좁은 원 안에서 뭉치지 않는다) */
.chef-av, .step-head__no, .c-steps li::before{
  font-family:var(--font-sys); font-weight:700;
}
/* 아주 작은 라벨은 시스템으로 — 손글씨가 불리한 크기다 */
.c-card__cat, .c-row-ing__qty--none{
  font-family:var(--font-sys); font-weight:700;
}

/* ── 추천: 가로 스와이프 (260902 · 운영자 지적) ───────────────────────
   2열 그리드는 3·5·7장처럼 홀수일 때 마지막 칸이 비어 세로만 길어진다.
   가로 한 줄 + scroll-snap 이면 장수와 무관하게 깔끔하고, 카드 폭을 78% 로 두면
   다음 카드가 살짝 보여 "옆에 더 있다"를 알린다. 자동 넘김은 넣지 않는다. */
.c-swipe{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px var(--pad) 4px; margin:0 calc(var(--pad) * -1);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.c-swipe::-webkit-scrollbar{ display:none; }
.c-swipe > .c-tile{
  flex:0 0 70%; scroll-snap-align:center;   /* ★260902 78→70% (추천 축소 · 위 .c-thumb 주석 참조) */
}
.c-swipe > .c-tile:last-child{ margin-right:var(--pad); }   /* 끝에서도 가운데 정렬이 된다 */
.c-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.c-dots i{ width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--line); transition:all var(--dur) var(--ease); }
.c-dots i.on{ width:18px; background:var(--accent); }

/* ── 제목 볼드 해제 (260902 · 운영자 지시) ────────────────────────────
   *"제목 폰트들 볼드체 하지 말고 해봐, 오히려 직관성이 떨어진다"*
   학교알림장은 손글씨 계열이라 Bold 에서 획이 서로 붙어 **덩어리로** 읽힌다.
   제목은 이미 크기로 위계가 서 있으므로 굵기를 뺀다 → Regular(400).
   (Bold 파일은 계속 싣는다 — 쓸 자리가 생기면 쓴다. 지금은 쓰지 않는다.) */
.topbar__title, .hero h1, .section__head h2,
.c-card__title, .c-tile__title, .c-cat__name,
.chef-hero__name,
.c-btn, .c-searchgo, .c-row-ing__name, .c-ings__group,
.c-row-ing__sub b, .qty-note b, .qty-note__link,
.c-measure__group, .c-measure__row dt,
.c-shop__toggle,
.step-head__title, .c-more-fill, .c-serv__label{
  font-weight:400;
}
/* 굵기를 뺀 만큼 제목은 크기·자간으로 위계를 세운다 */
.hero h1{ font-size:27px; letter-spacing:-.03em; }
.section__head h2{ font-size:19.5px; }
.c-card__title{ font-size:16.5px; }

/* ══════════════════════════════════════════════════════════════════
   UI 개선 3건 (260902) — 레퍼런스 킷 구조에서 아직 안 가져왔던 것들
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 히어로 사진 블리드 + 컨텐츠 시트 겹침 ──────────────────────
   킷의 상세는 사진이 화면 폭을 꽉 채우고 그 위로 흰 시트가 라운드로 올라온다.
   우리는 사진 아래 텍스트가 평평하게 이어져 **웹페이지처럼** 보였다. */
.c-hero-img--bleed{
  margin:calc(env(safe-area-inset-top,0px) * -1 - 56px) calc(var(--pad) * -1) 0;
}
/* 블리드 **기본** = 사진이 화면 폭을 꽉 채운다.
   가로 원본(480×268)은 390px 기기에서 축소라 선명하고, 이 규격이 맞다.
   🔴 `max-width:none` 은 260908 에 추가했다 — 위쪽 `.c-hero-img .c-thumb--v{max-width:268px}` 가
      이 규칙에 덮이지 않고 **살아남아** 세로 카드에서 폭만 268px 로 묶는 사고를 냈다(아래 참조). */
.c-hero-img--bleed .c-thumb{
  width:100%; max-width:none; aspect-ratio:4/3; border-radius:0; margin:0;
}

/* ── 세로 원본 히어로 = 필러박스(블러 배경 + 선명 원본) ────────────────
   🔴 ★260908 운영자 지적 *"요리 사진이 왼쪽으로 치우쳐져 있다"* 의 정본 수정.

   **원인은 디자인이 아니라 규칙 충돌이었다.** 260904 는 세로 원본에
   `aspect-ratio:4/5` + `max-width:268px` + `margin-left/right:auto`(중앙)를 줬는데,
   파일 **뒤쪽**의 260902 블리드 규칙 `.c-hero-img--bleed .c-thumb{aspect-ratio:4/3; margin:0}`
   이 **같은 명시도(0,2,0)로 나중에 와서** 그 둘을 덮었다. 그런데 `max-width` 는
   블리드 규칙이 건드리지 않아 **혼자 살아남았다.**
   그 결과가 어느 쪽도 의도하지 않은 화면이다(390px 기기 실측):
       폭 268px · 좌여백 0 · **우여백 162px** · 비율 4:3(세로 프레임 소실)
   즉 운영자가 본 "왼쪽 쏠림"과, 260904 가 고쳤던 크롭(세로 원본 높이의 58% 손실)이
   **한 줄의 캐스케이드 충돌로 동시에** 되살아나 있었다.

   해법 셋을 실제로 렌더해 비교했다(390px·다크):
     ① 폭 100% 로 늘리기 → 여백은 0 이 되지만 268px 원본을 430px 로 **1.60배 업스케일**한다.
        260904 가 `max-width` 를 넣은 이유가 정확히 그 흐림이다. 되돌리는 셈이라 기각.
     ② 가운데 정렬       → 선명(1.00배)하고 대칭이지만 좌우 81px 이 배경색으로 비어
        블리드 설계(시트가 사진 위로 올라탄다)가 죽는다. 안전하지만 절반의 답.
     ③ **필러박스**(채택) → 같은 사진을 블러·감광해 뒤에 깔고, 그 위에 원본을 **1.00배**로 얹는다.
        여백 0 · 업스케일 0 · 4:5 복원 · 블리드 유지. 셋 중 유일하게 넷을 다 만족한다.

   배경 주소는 호출부가 인라인 변수 `--hero-bg` 로 싣는다(`app.js` 상세 히어로).
   🔴 두 번째 `<img>` 를 두지 않는 이유: 폴백 사다리(frame0→mqdefault→조판)가
      `.c-thumb` **안의 img 하나**만 보므로 사본을 두면 사다리가 갈린다.
      주소가 죽으면 배경은 그냥 안 그려지고 `--fill` 띠가 남는다(무해한 실패). */
.c-hero-img--pillar{ position:relative; overflow:hidden; background:var(--fill); }
.c-hero-img--pillar::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--hero-bg); background-size:cover; background-position:center;
  /* 확대는 블러가 만드는 가장자리 투명을 덮기 위한 것이다(블러 반경의 2배 이상). */
  transform:scale(1.25);
  filter:blur(24px) saturate(1.15) brightness(.62);
}
/* 원본은 배경 위에 · 원래 의도(4:5 · 원본 폭 이내 · 중앙)를 여기서 되돌려준다. */
.c-hero-img--pillar .c-thumb--v{
  position:relative; z-index:1;
  aspect-ratio:4/5; max-width:268px; margin-left:auto; margin-right:auto;
}
/* ── ★261005 상세 상단 영상(탭 재생) ────────────────────────────────
   ▶ 는 **우리 썸네일 위**에만 얹는다 — 재생이 시작되면 썸네일째 사라지고 그 자리에
   공식 플레이어가 선다. 플레이어 위에는 아무것도 얹지 않는다(YouTube ToS III.I.6).
   iframe 은 `#screen` 밖 `body` 직속 `.yt-host` 에 살고(재렌더에도 재생 유지 · app.js
   `playerSync` 주석), 시트 안의 `.c-player-slot` 은 그 크기만 차지하는 빈 자리다.
   z-index: 시트(1) < 플레이어(5) < 하단 CTA(25) < 상단바·탭바(30) — 스크롤하면 바가 위로 덮는다. */
.c-hero-img--bleed{ position:relative; }
.c-play{
  position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%, -50%);
  width:64px; height:64px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:rgba(0,0,0,.58); color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.28);
}
.c-play .ic{ width:28px; height:28px; fill:#fff; stroke:none; margin-left:3px; }
.c-play--out{
  width:auto; height:auto; padding:10px 16px; font-size:14px; font-weight:700;
  white-space:nowrap;
}
.c-play__note{ font-size:13px; color:var(--ink-3); padding:8px 0 0; margin-bottom:26px; }
.c-hero-img--playing{
  margin:0 calc(var(--pad) * -1) 0;
  padding-bottom:26px;                 /* 시트가 -26px 올라타는 몫 — 플레이어를 덮지 않게 */
  background:#000;
}
.c-player-slot{ width:100%; aspect-ratio:16/9; background:#000; }
/* 세로(쇼츠) 원본 — 화면 높이의 62% 로 묶는다. 폭은 꽉 채우고 좌우 여백은 플레이어가 검게 둔다. */
.c-player-slot--v{ aspect-ratio:auto; height:min(62vh, 177.8vw); }
.yt-host{ position:absolute; z-index:5; background:#000; }
.yt-host iframe{ display:block; width:100%; height:100%; border:0; }

.c-sheet{
  position:relative; z-index:1;
  margin:-26px calc(var(--pad) * -1) 0;      /* 사진 위로 올라탄다 */
  padding:22px var(--pad) 0;
  background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}

/* ── ② 하단 고정 CTA 바 ───────────────────────────────────────────
   탭바 위에 앉는다(z-index 는 탭바보다 낮게 두어 탭 이동을 막지 않는다). */
/* 🔴 하단 고정 CTA — 두 번 틀린 뒤 정석으로 왔다(260902 뷰포트 컷이 둘 다 잡았다).
     ① `fixed` 만: 문서 흐름을 차지하지 않아 **마지막 내용(쇼핑 목록)을 가렸다**
     ② `sticky`: 자기 위치에 닿기 전까지 하단에 붙어 **역시 그 위를 덮는다**
     → 정석은 **fixed + 하단 패딩 확보**다(모바일 앱 표준). 패딩은 CTA 가 있는 화면에만 준다. */
.c-cta{
  position:fixed; left:0; right:0; z-index:25;
  bottom:calc(env(safe-area-inset-bottom,0px) + 70px);
  max-width:520px; margin:0 auto; padding:10px var(--pad);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 0%, transparent),
    color-mix(in srgb, var(--bg) 94%, transparent) 38%);
}
/* CTA 가 뜬 화면(카드 상세)만 바닥 여백을 CTA 높이만큼 더 준다 */
body.has-cta #app{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 70px + 74px);
}

/* ── ③ 목록 카드 우하단 원형 저장 ─────────────────────────────────
   킷은 카드마다 우하단에 원형 액션(+)을 둔다 — 목록에서 바로 행동할 수 있다. */
.c-card--thumb{ position:relative; }
.c-card__save{
  position:absolute; right:12px; bottom:12px;
  width:34px; height:34px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--surface); box-shadow:0 1px 4px rgba(70,55,35,.14);
  color:var(--ink-3);
}
.c-card__save .ic{ width:16px; height:16px; }
.c-card__save:active{ transform:scale(.9); }
/* 저장된 카드는 채워진 별 + 액센트 */
.c-card__save[data-on="1"]{ color:var(--accent); }
.c-card__save[data-on="1"] .ic{ fill:currentColor; }
/* 저장 버튼이 배지 줄과 겹치지 않도록 오른쪽을 비운다 */
.c-card--thumb .c-card__facts{ padding-right:42px; }

/* ── 사진 위 오버레이 상단바 (260902 · ★260909 C1 근거 갱신) ──────
   히어로 사진을 상단까지 빼면 상단바가 사진 뒤로 사라진다.
   ★260909 — 종전 근거는 *"뒤로가기가 보이지 않는다"* 였고 그 버튼은 네이티브로 넘어갔다.
   그러나 **공유 버튼이 같은 자리에 남아 같은 문제를 겪으므로** 이 규칙은 그대로 필요하다
   (`.topbar--over .topbar__act` 가 아래에서 흰 알약을 씌운다).
   근거를 갱신하지 않으면 다음 사람이 "뒤로가기가 없는데 왜 있지"로 읽고 지운다. */
.topbar--over{
  background:transparent; backdrop-filter:none;
}
/* 제목은 사진 위에서 읽기 어렵다 → 상세에서는 숨기고 본문 h1 이 제목을 맡는다 */
.topbar--over .topbar__title, .topbar--over #topbar-sub{ display:none; }

/* ── 홈 '최근 추가' 축약 행 (260902 · 운영자 지적 "스크롤이 너무 길다") ──
   `.c-card--thumb` 의 슬림 변형. 이 규칙은 파일 **끝**에 있어야 한다 —
   `.c-card--thumb .c-thumb{width:96px}`(255줄)과 명시도가 같아서 순서로 이긴다.

   장당 실측 190px → 약 84px. 줄인 방법은 3개다:
     ① 썸네일 96 → 62px (행 높이를 썸네일이 지배한다)
     ② 사실 배지 줄 제거 (마크업에서 빼므로 여기선 잔여 규칙만 정리)
     ③ 재료 목록 2줄 → 1줄 clamp
   ★ 정보를 지운 게 아니라 **밀도를 올린 것**이다. 제목·재료·쉐프·저장은 다 남아 있고,
     빠진 배지는 한 번만 탭하면 나오는 목록·상세 화면에 그대로 있다. */
.c-card--slim{ padding:11px; gap:11px; }
.c-card--slim .c-thumb{ width:62px; }
.c-card--slim .c-card__title{ font-size:14.5px; }
.c-card--slim .c-card__sub{
  margin-top:4px; -webkit-line-clamp:1; font-size:12px;
}
.c-card--slim .c-card__meta{ margin-top:3px; }
/* 저장 별(34px·우하단 고정)이 글을 덮지 않도록 본문 오른쪽을 비운다 */
.c-card--slim .c-card__body{ padding-right:40px; }
.c-card--slim .c-card__save{ right:10px; bottom:50%; transform:translateY(50%); }
.c-card--slim .c-card__save:active{ transform:translateY(50%) scale(.9); }

/* ── 냉장고: 재료 그룹 (260902 · 운영자 지시) ─────────────────────────
   36개 칩을 한 덩어리로 뿌리면 찾는 재료를 눈으로 훑어야 한다.
   사람은 냉장고를 칸별로 기억하므로(채소칸·고기칸·양념칸) 화면도 칸을 만든다.
   그룹 머리글은 섹션 제목(19px)보다 작게 둔다 — 여기서 주인공은 칩이고 머리글은 이정표다. */
.pantry-grp{ margin-bottom:16px; }
.pantry-grp:last-child{ margin-bottom:4px; }
.pantry-grp__head{
  display:flex; align-items:center; gap:6px;
  padding:0 var(--pad) 8px; font-size:13px; font-weight:700; color:var(--ink-2);
  font-family:var(--font-sys); letter-spacing:-.01em;
}
.pantry-grp__n{ font-size:11.5px; font-weight:700; color:var(--ink-3);
  background:var(--fill); border-radius:var(--r-pill); padding:1px 7px; }
/* 그룹 헤더 오른쪽 버튼('모두 지우기')은 남은 폭을 밀어 끝으로 보낸다 */
.pantry-grp__head .section__more{ margin-left:auto; }

/* ★260903 P2-1 — 그룹별 '더 보기' 칩. 재료 칩과 **다르게 보여야** 한다(고르는 것이
   아니라 펼치는 것이다) → 점선 테두리 + 배경 없음. */
.c-chip--more{
  background:transparent; border-style:dashed; color:var(--ink-3); font-weight:700;
}
.c-chip--more:active{ background:var(--fill); }

/* 고른 재료 묶음 — 맨 위에 모아 둔다(그룹이 5개라 아래로 흩어지면
   "내가 뭘 골랐더라"를 확인하려고 화면을 되짚어야 했다). */
.pantry-grp--picked{
  background:var(--fill); border-radius:var(--r-l); padding:12px 0 10px; margin-bottom:18px;
}
.pantry-grp--picked .pantry-grp__head{ padding-bottom:8px; }

/* ── 쉐프 사진 타일 (260902 · 운영자 지시 "홈디자인처럼 개편") ─────────
   홈은 사진으로 고르게 만들어 놓았는데 쉐프 화면만 글자 목록(38줄·4화면)이라
   톤이 갈렸고 "누구를 볼까"의 근거가 이름뿐이었다. 홈의 두 형식을 그대로 쓴다:
   구독 중 = 가로 스와이프(홈 추천과 동일) · 전체 = 2열 사진 타일(홈 분류와 동일).
   대표컷은 그 쉐프의 최신 카드 썸네일이라 별도 데이터가 필요 없다. */
/* ★★260907 A안 — **2열 → 3열.** 타일 얼굴이 요리 사진에서 **로고**로 바뀌면서 필요해졌다.
   로고는 정사각(아바타 800×800)이라 2열이면 칸이 149px 이 되고, 45명이면 문서가
   **5,308px(6.8화면)** 이 된다 — 옛 사진 타일(16:9)이 3,809px 이었으니 스크롤이 39% 늘어난다.
   3열로 좁히면 칸이 약 96px, 문서가 **2,775px** 로 **옛것보다도 27% 짧다**(전부 실측).
   로고는 사진이 아니라 **마크**라 작아도 식별된다(유튜브 자체가 48px 아바타를 쓴다).
   되돌리려면 이 한 줄을 `1fr 1fr` 로 바꾸면 된다. */
.chef-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px 10px; padding:0 var(--pad); }
.chef-grid .chef-tile__name{ font-size:13px; }
.chef-grid .chef-tile__meta{ font-size:11px; }
.chef-tile{ position:relative; min-width:0; }
.chef-tile__main{ display:block; width:100%; text-align:left; background:transparent;
  border:0; padding:0; transition:transform var(--dur) var(--ease); }
.chef-tile__main:active{ transform:scale(.985); }
.chef-tile__thumb{ position:relative; display:block; margin-bottom:8px; }
.chef-tile__thumb .c-thumb{ width:100%; aspect-ratio:16/9; border-radius:var(--r-l); }
/* ★★260907 A안 — **채널 로고 칸.** 로고는 사진이 아니라 **마크**다:
     · 정사각(아바타 원본이 800×800) · `contain` 으로 **자르지 않는다**
       (로고를 cover 로 자르면 글자가 잘려 브랜드가 훼손된다 — 커머스 트랙에서 이미 배운 것)
     · 흰 바닥 + 얇은 테두리로 로고의 투명·흰 배경이 카드 배경에 녹지 않게 한다 */
.chef-tile__thumb .c-thumb--logo{ aspect-ratio:1/1; background:#fff;
  border:1px solid var(--line); }
.chef-tile__thumb .c-thumb--logo img{ object-fit:contain; padding:10%; }
/* ★260905 W5 — 구독 배지(`chef-tile__on`)·구독 버튼(`chef-tile__sub`)·구독 스와이프
   (`c-swipe--chef`) 규칙을 걷었다. 팔로우가 없어져 **선택자에 걸릴 요소가 0개**다.
   이름·메타의 `padding-right:52px` 도 같이 뺐다 — 그건 구독 버튼 자리를 비우던 값이라
   버튼이 없는데 남기면 글자만 좁아진다(죽은 여백은 눈에 안 보여서 더 오래 남는다). */
.chef-tile__name{ display:block; font-size:14.5px; font-weight:700; color:var(--ink);
  letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chef-tile__meta{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3);
  font-weight:500; font-family:var(--font-sys);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 서랍: 장보기 진행률 (260902 · 서랍 고도화) ───────────────────────
   장 보는 중에 필요한 정보는 목록이 아니라 **몇 개 남았나**다.
   그래서 막대를 목록 위에 둔다(다 담으면 문구가 바뀐다). */
.cart-bar{ height:6px; margin:0 var(--pad) 8px; border-radius:var(--r-pill);
  background:var(--fill-2); overflow:hidden; }
.cart-bar__fill{ height:100%; border-radius:var(--r-pill);
  background:var(--accent); transition:width var(--dur) var(--ease); }
/* 장보기 행을 버튼으로 바꿨다 — 체크가 되는 곳임을 손이 알아야 한다.
   ★260904 `:only-child` 로 좁혔다 — 장보기 행은 `__main` 하나뿐이고,
   상세 화면 행은 `__chk` 가 형제로 있다. 종전의 무조건 `width:100%` 가
   상세 행의 줄바꿈을 만들던 원인이다(위 `.c-row-ing__chk` 주석). */
.c-row-ing__main{ text-align:left; background:transparent; border:0;
  padding:0; font:inherit; color:inherit; letter-spacing:inherit; }
.c-row-ing > .c-row-ing__main:only-child{ width:100%; }
.c-row-ing[data-done="1"] .c-row-ing__name{ text-decoration:line-through; color:var(--ink-3); }
.c-row-ing[data-done="1"] .c-row-ing__em{ opacity:.45; }
/* ★★260911 U6③ — 장보기 행의 **사러가기**(쿠팡 파트너스). 알약 하나로 작게 둔다:
   이 행의 주된 동작은 여전히 **체크**(마트에서 짚는 그 동작)이고, 링크는 그 옆의 선택지다.
   `__main` 이 `flex:1 1 auto` 라 이 버튼이 붙어도 이름·분량 줄은 그대로 한 줄로 앉는다
   (종전 `:only-child` 폭 규칙은 형제가 생기면 안 걸리지만, 그 자리는 flex 가 이미 채운다).
   다 담은 재료(`data-done="1"`)에서는 흐리게 — 이미 산 것을 또 사러 보내지 않는다. */
.c-row-ing__buy{ order:2; flex:0 0 auto; padding:7px 12px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--accent-line); color:var(--accent);
  font-size:12px; font-weight:800; letter-spacing:-.02em; }
.c-row-ing__buy:active{ background:var(--accent-weak); }
.c-row-ing[data-done="1"] .c-row-ing__buy{ opacity:.4; }

/* ── 짧은 안내(토스트) · ★260903 P3-5 ───────────────────────────────────
   종전 이 자리는 두 갈래였다: 브라우저 `alert()`(미니앱 웹뷰에서 톤이 깨지고 차단될
   수도 있다) 와 **아무 표시도 안 함**('목록 복사'는 성공·실패 모두 무반응이었다).
   시트(`#sheet`)는 확인이 필요한 이동에만 쓰고, 알림만 필요한 자리는 이걸 쓴다.
   탭바 위에 앉히고 Safe Area 를 더한다(탭바에 가리면 안 보인다). */
.c-toast{
  position:fixed; left:50%; transform:translate(-50%, 12px);
  /* 탭바는 떠 있는 알약형이다(height 60 + bottom 12) → 그 위로 올린다 */
  bottom:calc(60px + 12px + 14px + env(safe-area-inset-bottom, 0px));
  z-index:60; max-width:min(86vw, 420px);
  padding:11px 16px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--surface);
  font-family:var(--font-sys); font-size:13.5px; font-weight:700; letter-spacing:-.015em;
  text-align:center; line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.c-toast[data-on="1"]{ opacity:1; transform:translate(-50%, 0); }

/* 클립보드가 막힌 웹뷰용 복사 폴백 — 길게 눌러 선택한다(그래서 user-select 를 켠다) */
.c-copybox{
  margin:12px var(--pad) 0; padding:12px 14px;
  background:var(--fill); border:1px solid var(--line); border-radius:var(--r-m);
  font-family:var(--font-sys); font-size:12.5px; line-height:1.6; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-all;
  -webkit-user-select:text; user-select:text;
}

@media (prefers-reduced-motion:reduce){
  .c-toast{ transition:opacity var(--dur) linear; transform:translate(-50%, 0); }
}

/* ── 형제(같은 요리 다른 쉐프) 컴팩트 행 ★260904 P4 ────────────────
   목록 카드(120px)를 재사용하지 않는 이유는 app.js `sibRowsHtml` 주석에 있다.
   여기서 답할 질문은 "이 쉐프 건 뭐가 다른가" 하나뿐이라 행이 얇아도 된다. */
.c-sibs{ padding:0; gap:6px; }
.c-sib{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:6px 8px; border:0; background:var(--surface); border-radius:12px;
  text-align:left; cursor:pointer; min-height:64px;
}
.c-sib:active{ background:var(--fill); }
/* ★260918 — 제공 종료된 저장 항목은 **표시행**이다(유튜브 외부 이동 제거).
   `cursor:pointer` 와 누름 피드백이 남아 있으면 «눌렀는데 아무 일도 안 난다» 가 된다. */
/* ── 배너 광고 슬롯 ★★★260922 ────────────────────────────────────
   내 정보 화면 맨 아래 한 자리뿐이다(근거는 app.js §ADS · 게이트 Y1).

   🔴 **비어 있을 때 자리를 차지하지 않는다.** 토스 밖(웹·브라우저)에서는 SDK 가 없어
      영원히 비는데, 고정 높이를 주면 그 화면마다 빈 칸이 남는다. `:empty` 로 가른다.
   🔴 **위아래 여백은 채워졌을 때만** 준다 — 그래야 광고가 본문에 붙어 보이지 않는다.
   🟢 배경·테두리를 주지 않는다. 광고 자신이 자기 면을 그리고, 우리가 한 겹 더 두르면
      «우리 콘텐츠»처럼 읽힌다(표시·광고 규율). */
.ad-banner{ width:100%; margin:var(--gap-l) 0 var(--gap); overflow:hidden; }
.ad-banner:empty{ margin:0; }

/* ★260922 — `.c-legal-link` 규칙을 걷었다. 약관 링크가 화면에서 사라졌으므로
   (운영자 지시 · app.js renderHome 하단 주석이 근거 정본) 이 규칙은 죽은 CSS 다.
   🔴 되살릴 일이 생기면 규칙부터가 아니라 **마크업 복원**이 먼저다. */

.c-sib[aria-disabled="true"]{ cursor:default; }
.c-sib[aria-disabled="true"]:active{ background:var(--surface); }
.c-sib .c-thumb{ width:56px; height:56px; flex:0 0 56px; border-radius:10px; }
.c-sib__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.c-sib__chef{
  font-size:14px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.c-sib__tags{ display:flex; flex-wrap:wrap; gap:4px; overflow:hidden; max-height:22px; }
.c-sib__tag{
  font-size:11px; font-weight:600; line-height:1.6; color:var(--accent);
  background:var(--accent-weak); border-radius:6px; padding:0 6px;
  white-space:nowrap;
}
.c-sib__tag--same{ color:var(--ink-3); background:var(--fill); }
.c-sib__n{ flex:0 0 auto; font-size:11px; color:var(--ink-3); }

/* ── 홈 CTA 박스 ★260904 §27.2 ────────────────────────────────────
   🔴 이름이 `.c-hcta` 인 이유: `.c-cta` 는 **카드 상세 하단 고정바**가 이미 쓰고 있다.
   같은 이름을 주면 홈 버튼이 화면 바닥에 붙어 버린다(실제로 한 번 그렇게 만들었다). */
/* ★260904 §29 — **한 줄에 두 칸**(운영자 지적). 그리고 색을 되살렸다:
   흰 박스 두 개는 어느 쪽이 주행동인지 못 알려줘 직관성이 떨어진다.
   왼쪽 = 액센트 채움(주행동 · 오늘 뭐 먹을지 정하는 자리)
   오른쪽 = 크림 톤(부행동 · 재료가 있을 때 쓰는 자리)
   ⚠️ 세로 스택으로 되돌리지 말 것 — 두 줄은 이미 한 번 반려됐다. */
/* ★★260922 — **아이콘을 위에서 왼쪽으로**(운영자 지시 "일렬 정렬 · 세로 축소").
   종전: 세로 스택(아이콘 → 제목 → 부제) = 13+19+3+23+19+13 ≈ 94px
   현재: 아이콘·텍스트 일렬, 텍스트만 2줄     = 12+23+17+12       ≈ 62px  (−34%)
   🔴 제목+부제를 **한 줄**에 나란히 두지 마라 — 390px 기기에서 칸 콘텐츠 폭은 143px 인데
      제목만 약 118px 이다. 붙이면 `nowrap` 인 제목부터 잘린다(app.js 쪽 주석에 실측).
   ⚠️ 세로 스택으로도, 두 줄 배치로도 되돌리지 말 것(후자는 260904 에 반려됐다). */
.c-hcta{ display:flex; gap:8px; margin-bottom:var(--gap-l); }
.c-hcta__box{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:row; align-items:center; gap:9px;
  padding:12px 13px; border:1px solid transparent; border-radius:var(--r-l);
  text-align:left; cursor:pointer; box-shadow:var(--sh);
}
/* 텍스트 묶음 — 아이콘 옆에서 2줄로 쌓인다. `min-width:0` 이 있어야 ellipsis 가 산다. */
.c-hcta__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
/* 🔴★260922 — `font-weight:800` 만 걸면 **합성 볼드**가 그려진다: 본문 폰트(자유시간)는
   Regular 한 웨이트뿐이라 브라우저가 획을 부풀린다. 그게 운영자가 지목한
   *"볼드가 강한 건지 카드색이 강한 건지 직관성이 떨어진다"* 의 실제 원인이었다
   (같은 진단이 §폰트 적용 범위 머리말에 이미 있었는데 이 칸만 어느 목록에도 없었다).
   → 굵어야 할 자리는 **알림장 Bold**(진짜 볼드)를 쓴다. */
.c-hcta__box b{ font-family:var(--font-title); font-size:14.5px; font-weight:700;
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 부제 11.5px — 손글씨가 불리한 크기다(§폰트 적용 범위: 13px 이하는 시스템). */
.c-hcta__box .c-hcta__txt span{ font-family:var(--font-sys); font-size:11.5px;
  font-weight:500; letter-spacing:-.015em; opacity:.8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-hcta__box .ic{ width:20px; height:20px; flex:0 0 20px; }
.c-hcta__box--go{ background:var(--accent); border-color:var(--accent); color:#fff; }
.c-hcta__box--go .ic{ stroke:#fff; }
.c-hcta__box--go:active{ background:var(--accent-hover); }
.c-hcta__box--sub{ background:var(--accent-weak); border-color:var(--accent-line);
  color:var(--ink); }
.c-hcta__box--sub .ic{ stroke:var(--accent); }
.c-hcta__box--sub:active{ background:var(--fill-2); }

/* ── 기획전 배너 ★★260918 ──────────────────────────────────────────
   운영자 지시: *"추석특선요리를 UI 좀 잘 보이게 색상 달리해서 · 기획전 느낌으로."*

   🔴 **풀폭 한 줄**이다. 위 `.c-hcta` 에 세 번째 칸으로 끼우지 않은 이유가 둘:
      ① `.c-hcta__box b` 가 `white-space:nowrap` 이라 3칸이면 「추석특선요리」가 잘린다
      ② 그 두 칸은 이 앱의 **주행동**이고 시즌 배너가 그 위계를 깨면 안 된다.
   풀폭이면 **두 줄**(제목 + 무엇이 들었는지)을 쓸 수 있는데, 기획전은 이름만으로 안 읽힌다.

   🔴 높이를 재지 마라 — 홈 스크롤은 이 트랙에서 네 번 지적된 축이다(260902 "너무 길다").
      배너는 1블록 약 84px 이고 **기간이 끝나면 통째로 사라진다**(`activeCollection`). */
/* ★260922 — 패딩·행간을 조여 **세로만** 줄였다(운영자 지시). 실측 74 → 56px.
   부제를 제목 옆으로 올리는 안은 폭이 모자라 되돌렸다(app.js 쪽 주석이 실측 근거 정본). */
.c-fest{
  display:block; width:100%; text-align:left;
  margin-top:10px; padding:10px 13px;
  border:1px solid var(--fest); border-radius:var(--r-l);
  background:linear-gradient(103deg, var(--fest) 0%, var(--fest-2) 100%);
  color:var(--fest-ink); box-shadow:var(--sh); cursor:pointer;
}
.c-fest:active{ filter:brightness(.94); }
.c-fest__row{ display:flex; align-items:center; gap:8px; }
.c-fest__ic{ width:19px; height:19px; flex:0 0 auto; stroke:var(--fest-ink); }
/* 🔴★260922 — `.c-hcta__box b` 와 같은 처방(합성 볼드 제거). 근거는 그쪽 주석. */
.c-fest__title{ font-family:var(--font-title); font-size:15px; font-weight:700;
  letter-spacing:-.02em; white-space:nowrap; line-height:1.25; flex:0 0 auto; }
/* ★★★260922(2) — **`.c-fest__dday` 규칙을 걷었다.** 운영자 결정으로 D-day 알약이
   홈 배너에서 빠졌다(근거·검산은 app.js 배너 블록 주석이 정본).
   🟢 D-day 값 자체는 살아 있다 — 기획전 화면 상단바가 텍스트로 그린다(클래스를 안 쓴다).
   🔴 되살리려면 규칙부터가 아니라 **마크업 복원이 먼저**이고, 그 전에 한 줄에 다섯이
      들어가는지 실촬영으로 확인해야 한다(들어가지 않는다는 것이 260922 실측이다). */
.c-fest__go{ margin-left:auto; font-size:17px; opacity:.85; flex:0 0 auto; }
/* 🔴★260922 — **시스템 폰트로 옮겼다.** 11.5px 인데 본문 손글씨로 그려지고 있었고
   (§폰트 적용 범위: 13px 이하는 손글씨가 불리하다 — 그 목록에 이 칸만 빠져 있었다),
   그게 운영자가 지목한 *"소제목의 폰트 직관성이 떨어진다"* 의 실제 원인이다.
   ★260922(2) — 이제 **제목 오른쪽 같은 줄**이다. `flex:1 1 auto; min-width:0` 이 요점 —
   먼저 잘리는 쪽을 부제로 고정한다(제목·화살표는 절대 안 잘린다).
   🔴 한 줄로 자른다. 두 줄이 되면 배너 높이가 날마다 달라져 첫 화면 구성이 흔들린다. */
.c-fest__sub{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-sys); font-size:11.5px; font-weight:500;
  letter-spacing:-.015em; opacity:.88;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 기획전 화면 히어로 — 홈과 같은 구조(`.hero`)에 색만 기획전 축으로 바꾼다.
   화면을 새로 그리지 않는 것이 규율이다(형식을 새로 만들면 반드시 갈린다). */
.c-fest-hero__mark svg{ stroke:var(--fest); fill:none; }
.c-fest-hero__sub{ margin-top:-8px; font-size:13px; color:var(--ink-2); }

/* ── 상세 하단 CTA 를 좌우 1줄로 ★260904 ⑨ ────────────────────────
   운영자 지적: "저장하기와 요리 완성이 2줄로 뜬다." `.c-cta` 에 배치 규칙이 없어
   버튼이 블록으로 쌓이고 있었다. 각각 박스로 반씩 나눈다. */
/* ★260905 — 두 버튼을 **같은 비율**로 나누고 카드 크기를 줄인다(운영자 지적).
   `min-height` 를 52 → 46 으로 낮춘 이유: 하단 고정바는 손이 닿는 자리라 52px 이
   필요했지만, 두 칸으로 나뉘면서 세로까지 크면 화면을 과하게 먹는다.
   글자도 15.5 → 14.5 로 줄여 `요리 완성`·`저장하기` 가 한 줄에 들어가게 한다. */
.c-cta{ display:flex; gap:8px; }
.c-cta > .c-btn{
  flex:1 1 0; min-width:0; width:auto;
  min-height:46px; padding:0 10px; font-size:14.5px;
}
.c-cta > .c-btn .ic{ width:17px; height:17px; }

/* ── 추천 3열 그리드 ★260904 §27.5 ────────────────────────────────
   가로 스와이프(타일 폭 70%)는 390px 기기에서 **1.4장**만 보여 준다 —
   운영자 요구는 "3칸이 그냥 뜨도록". 스와이프를 격자로 바꾸면 비율 조정으로
   되돌아가는 일(78%→70%→4:5 회귀)이 구조적으로 막힌다. */
/* 🔴★260906 U1 — `1fr` → **`minmax(0,1fr)`**. `1fr` 은 `minmax(auto,1fr)` 이라
   칸이 **내용의 최소폭 밑으로 못 줄어든다** — 타일 메타(`.c-tile__meta`)가 `nowrap` 이라
   쉐프 이름이 길면(`정호영의 오늘도 요리 · 재료 10`) 칸이 그만큼 부풀고 3열이
   화면 밖으로 밀려 **세 번째 타일이 잘렸다**(실렌더로 확인). 분류 화면이 이 격자를
   분류마다 쓰게 되면서 눈에 띄게 됐지만, 결함 자체는 홈 추천에 이미 있던 것이다. */
.c-grid3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.c-grid3 > .c-tile{ flex:none; width:auto; }
/* ★★260907 — **3열 타일만 정사각**(운영자 확정). 근거는 원본 방향 실측이다:
     썸네일 원본의 **42.9%(1,717장)가 세로 프레임**(268×480 · 쇼츠형)이고,
     16:9 로 cover 하면 그 세로본은 **31%만** 남아 국물 띠만 보인다. 1:1 은 56% 가 남는다
     (가로본 99%→56%, hq*(4:3) 75%→75%, mqdefault 100%→56%).
     평균 잔존만 보면 16:9(65%)가 1:1(60%)보다 크지만, 그 평균은 **가장 나쁜 43% 를 가린다** —
     타일의 본문은 음식이고 음식이 안 보이는 쪽이 실패다.
   🔴 **`.c-swipe > .c-tile` 에는 절대 주지 마라.** 위 260904 정정 주석이 경고하는 자리다:
      스와이프 타일은 폭 70%(273px)라 정사각이면 273px 높이가 되고, 운영자가 **세 번** 지적한
      "추천 이미지가 너무 크다"로 돌아간다. 3열 격자는 타일 폭이 약 110px 이므로 정사각도
      110px 다 — **같은 규칙이 격자에서는 안전하고 스와이프에서는 위험하다.**
      그래서 선택자를 `.c-grid3 >` 로 좁혔다(전역 `.c-tile .c-thumb` 은 16:9 로 남는다). */
.c-grid3 > .c-tile .c-thumb{ aspect-ratio:1/1; }
.c-grid3 .c-tile__title{ font-size:12.5px; line-height:1.3; }
.c-grid3 .c-tile__meta{ font-size:11px; }


/* ── 외부 이동 확인 모달 ★★260904 §29 ───────────────────────────────
   🔴 이 블록이 **없어서** 모달이 모든 화면 하단에 상시 노출됐다(운영자 지적 ⑤:
   "하단의 닫기·이동 버튼은 꼭 필요한건지? 이미 하단에 각 탭이 있는데").
   원인은 클래스 이름 충돌이다 — 마크업이 `c-sheet` 를 썼는데 그 이름은
   **카드 상세의 본문 시트**(사진 위로 올라타는 흰 판)가 쓰고 있었고,
   그 규칙에는 숨김이 없다. 그래서 모달은 스타일 없는 평범한 블록으로 그려졌다.
   같은 계통을 이 세션에서 두 번 겪었다(`.c-cta` 홈/상세 충돌) — 화면 전용 이름을 쓴다. */
.c-ask__dim{
  position:fixed; inset:0; z-index:40; background:rgba(31,27,22,.44);
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.c-ask{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-width:520px; margin:0 auto;
  padding:10px var(--pad) calc(env(safe-area-inset-bottom,0px) + 18px);
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-up);
  transform:translateY(102%); transition:transform .2s ease;
}
body[data-sheet="1"] .c-ask__dim{ opacity:1; pointer-events:auto; }
body[data-sheet="1"] .c-ask{ transform:translateY(0); }
.c-ask__handle{
  width:38px; height:4px; margin:0 auto 14px; border-radius:2px; background:var(--fill-2);
}
.c-ask__title{ font-size:16px; font-weight:800; letter-spacing:-.03em; }
/* ★260918 — `white-space:pre-line` 은 장식이 아니다. 시트 본문은 `textContent` 로
   들어가므로(app.js `#sheet-desc`) 이게 없으면 \n 이 **공백 한 칸으로 뭉개진다**.
   쇼핑 시트가 확인 창 안내를 두 줄로 나눠 쓴다. */
.c-ask__desc{ margin:6px 0 16px; font-size:13.5px; color:var(--ink-2); line-height:1.5;
  white-space:pre-line; }

/* ★★260906 U4 — `.c-appinfo*` 규칙을 걷었다. 앱 정보 섹션이 운영자 결정으로
   제거되어 **선택자에 걸릴 요소가 0개**다. 죽은 규칙을 남기면 다음 사람이 되살린다
   (260905 W5 가 팔로우 CSS 에서 같은 판단을 했고 test_f26 이 그걸 감시한다). */

/* ── 익명 프로필(내 정보) ★★260906 U4 ──────────────────────────────
   레퍼런스(`나만의 레시피`)의 마이 화면 구조를 따른다: 아바타 · 별명(+연필) · 시작일.
   아바타에는 사진이 없다(이미지 0장 원칙) → **브랜드 마크**를 크림 원에 넣는다. */
.c-profile{ display:flex; align-items:center; gap:14px; padding:4px 0 18px; }
.c-profile__av{ flex:0 0 auto; width:56px; height:56px; border-radius:var(--r-pill);
  background:var(--accent-weak); display:grid; place-items:center; }
.c-profile__av svg{ width:32px; height:32px; }
.c-profile__body{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:4px; }
.c-profile__nameline{ display:flex; align-items:center; gap:6px; min-width:0; }
.c-profile__name{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 연필은 시각적으로 26px 이지만 **터치 영역은 44px**(--tap)이다 —
   작은 아이콘 버튼을 그 크기 그대로 두면 손가락이 못 맞춘다(§접근성 T6). */
.c-profile__pen{ position:relative; flex:0 0 auto; width:26px; height:26px;
  border-radius:var(--r-pill); background:var(--fill); display:grid; place-items:center; }
.c-profile__pen::after{ content:''; position:absolute; left:50%; top:50%;
  width:var(--tap); height:var(--tap); transform:translate(-50%,-50%); }
.c-profile__pen .ic{ width:14px; height:14px; stroke:var(--ink-3); }
.c-profile__pen:active{ background:var(--fill-2); }
.c-profile__since{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
/* 🔴 편집 줄은 **두 줄로 감는다**(입력 → 버튼). 한 줄에 넣으면 390px 기기에서
   아바타(56) + 입력 + 버튼 2개가 안 들어가 버튼이 화면 밖으로 나간다(실렌더로 확인).
   ⚠️ `.c-btn` 은 `width:100%` 다 — 작은 버튼으로 쓰려면 폭을 되돌려야 한다.
      그걸 빼먹은 것이 위 오버플로의 직접 원인이었다. */
.c-profile__edit{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.c-profile__input{ flex:1 1 100%; min-width:0; height:40px; padding:0 12px;
  border:1.5px solid var(--accent-line); border-radius:var(--r-m);
  background:var(--surface); color:var(--ink);
  font:800 16px/1 var(--font); letter-spacing:-.03em; outline:none; }
.c-profile__btn{ flex:0 0 auto; width:auto; height:36px; min-height:36px; padding:0 16px;
  font-size:13.5px; border-radius:var(--r-m); }


/* ── 냉장고 3단 머리 ★★260906 U3 ────────────────────────────────────
   단마다 "몇 개인가"(굵은 숫자)와 "무슨 뜻인가"(잔글씨)를 함께 준다.
   `step-head`(1·2 번호 단계)와 섞지 않는다 — 저기는 절차, 여기는 결과의 분류다. */
.c-tier{ margin-bottom:var(--gap); }
.c-tier__head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px;
  padding-left:10px; border-left:3px solid var(--accent); }
.c-tier__title{ font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.c-tier__title b{ color:var(--accent); }
.c-tier__sub{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
/* 2단·3단은 단언이 아니라 목록이다 → 액센트 막대를 회색으로 낮춘다(위계를 색으로 말한다). */
.c-tier[data-tier="near"] .c-tier__head{ border-left-color:var(--accent-line); }
.c-tier[data-tier="more"] .c-tier__head{ border-left-color:var(--line); }
.c-tier[data-tier="more"] .c-tier__title b{ color:var(--ink-2); }

/* 섹션 제목 옆 아이콘(홈 하단 분류) — 제목과 같은 잉크, 크기만 한 톤 작게 */
.section__ic{ width:17px; height:17px; margin-right:5px; vertical-align:-2px;
  stroke:var(--accent); }

/* ★260906 U4-b — `.c-doc*`(법무 문서 화면) 규칙을 걷었다. 화면 자체가 사라져
   선택자에 걸릴 요소가 0개다 — 죽은 규칙을 남기면 다음 사람이 화면을 되살린다
   (260905 W5 팔로우 CSS · 260906 U4 앱 정보 CSS 와 같은 규율). */

/* ── ★260907 사실 칩(재료·단계·대체) 재조판 ─────────────────────────
   운영자 지적 화면: 채널 페이지 2열 그리드에서 칩이 **글자 단위로 세로로 쪼개져**
   `재/료/15` 처럼 읽혔다. 원인은 하나가 아니라 셋이 겹친 것이다:
     ① `.c-card--thumb` 은 **가로 행**(썸네일 96px + 글)인데, `.c-grid` 는 폭을 반으로
        준다 → 390px 기기에서 글 영역이 약 50px 남는다. 그 안에서 flex 아이템인 칩이
        `white-space` 기본값 그대로 줄바꿈해 한 글자씩 접혔다.
     ② 저장 별(34px 우하단 고정)이 칩 줄의 오른쪽 42px 을 더 먹었다.
     ③ 같은 카드에 `재료 15` 가 메타 텍스트로도 한 번 더 있었다(app.js 에서 제거).
   처방은 폭을 늘리고(세로 조판) 칩이 쪼개지지 않게 못 박는 것이다 — 폰트만 줄이면
   같은 문제가 조금 늦게 다시 온다. */

/* 칩은 어떤 폭에서도 쪼개지지 않는다(줄바꿈은 칩 **사이**에서만 일어난다) */
.c-fact{ white-space:nowrap; flex:none; }

/* 2열 그리드 카드는 세로 조판 — 썸네일 위, 글 아래(폭을 100% 되찾는다) */
.c-grid .c-card--thumb{ flex-direction:column; gap:10px; padding:10px; }
.c-grid .c-card--thumb .c-thumb{ width:100%; aspect-ratio:1/1; }
.c-grid .c-card--thumb .c-card__body{ width:100%; }
/* 저장 별은 사진 위 우상단으로 — 칩 줄이 카드 폭 전부를 쓴다 */
.c-grid .c-card--thumb .c-card__save{
  top:16px; right:16px; bottom:auto; width:30px; height:30px;
  background:rgba(255,255,255,.94);
}
.c-grid .c-card--thumb .c-card__save .ic{ width:15px; height:15px; }
.c-grid .c-card--thumb .c-card__facts{ padding-right:0; margin-top:8px; gap:5px; }
/* 좁은 칸에서는 아이콘을 뺀다 — 아이콘 3개가 곧 칩 3개를 두 줄로 밀어낸다.
   글자(`재료 15 · 7단계 · 대체`)만으로도 무슨 값인지 읽히는 자리다. */
.c-grid .c-fact{ padding:3px 7px; font-size:11px; letter-spacing:-.02em; }
.c-grid .c-fact .ic{ display:none; }

/* ── 내 정보: 저장 분류 서랍 · 하단 한 줄(★★260911 U6) ────────────────
 *
 * 운영자 지적 *"저장 개수가 늘수록 스크롤 압박"* 의 처방. 목록을 지우는 게 아니라
 * **접는다** — 분류 행은 한 칸 56px 이라 분류 6개가 한 화면에 다 들어오고,
 * 펴는 순간에만 그 분류의 카드가 5장 나온다.
 * 캐럿은 `.c-shop` 아코디언과 **같은 회전 규약**을 쓴다(화면 안에서 같은 모양은 같게 움직인다).
 */
.c-accs{ display:flex; flex-direction:column; gap:8px; }
.c-acc{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden; }
.c-acc__head{ display:flex; align-items:center; gap:10px; width:100%;
  padding:15px; text-align:left; }
.c-acc__name{ flex:1 1 auto; min-width:0; font-size:15px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-acc__n{ flex:0 0 auto; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--fill); color:var(--ink-2); font-size:12px; font-weight:800; }
.c-acc__caret{ flex:0 0 auto; width:16px; height:16px; stroke:var(--ink-3);
  transition:transform var(--dur) var(--ease); }
.c-acc[data-open="1"] .c-acc__caret{ transform:rotate(180deg); }
.c-acc__head:active{ background:var(--fill); }
.c-acc__body{ display:none; padding:0 12px 12px; }
.c-acc[data-open="1"] .c-acc__body{ display:block; }

/* 하단 저작권 한 줄 — 잔글씨 문단이 아니라 **가운데 알약 배지**(운영자 지시).
   🔴 글자 크기를 vw 로 재는 이유: 이 문장은 34자라 고정 11px 이면 360px 기기에서
      두 줄이 된다. 한 줄이 요구사항이므로 폭에 맞춰 줄인다(상한 10.5px). */
.c-foot-note{
  margin:20px auto 4px; width:fit-content; max-width:100%;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--fill); border:1px solid var(--line);
  color:var(--ink-3); white-space:nowrap;   /* ★260911 text-align:center 제거 — fit-content+nowrap 이라 no-op (reject_check D4) */
  font-size:clamp(9px, 2.5vw, 10.5px); font-weight:600; letter-spacing:-.03em;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── 장보기: 담은 레시피 · 보관 기간(★★260911 U7) ──────────────────────
 * 알약 하나에 **두 기능**(눌러서 레시피 열기 / × 빼기)이라 버튼 둘을 겉 span 이 감싼다
 * — 최근 검색어(`.c-rq`)와 같은 구조다(중첩 버튼은 유효하지 않다).
 * × 는 44px 를 다 주지 못하는 자리라 세로로 넉넉히 잡아 손가락 실수를 줄인다.
 */
.cart-srcs{ display:flex; flex-wrap:wrap; gap:7px; padding:0 var(--pad) 10px; }
.cart-src{ display:inline-flex; align-items:center; max-width:100%;
  background:var(--fill); border-radius:var(--r-pill); overflow:hidden; }
.cart-src__go{ padding:8px 4px 8px 13px; max-width:200px; font-size:13px; font-weight:700;
  color:var(--ink); letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-src__del{ display:grid; place-items:center; width:28px; height:34px; color:var(--ink-3); }
.cart-src__del svg{ width:11px; height:11px; stroke:currentColor; stroke-width:2.6;
  fill:none; stroke-linecap:round; }
.cart-src:active{ background:var(--fill-2); }
/* 보관 기간 안내 — 목록 위, 고지(광고)보다 앞. "사라진다"는 말은 먼저 읽혀야 한다. */
.c-cart-ttl{ padding:0 var(--pad) 10px; }

/* ★★260911 — 검색 결과의 **경계**(app.js §matchRank). 요리명 매칭과 재료 매칭 사이에
   소제목 한 줄을 세운다. 경계를 감추면 사용자에게는 "왜 오이가 안 보이지"가
   "왜 갑자기 상관없는 게 나오지"로 바뀔 뿐이다 — 말해 주면 그 아래는 기대가 다른 목록이 된다. */
.c-subhead{
  padding:18px var(--pad) 8px; margin:0;
  color:var(--ink-2); font-weight:700; letter-spacing:-.02em;
  border-top:1px solid var(--line);
}
/* 검색 결과 머리글의 부가 수치(요리명 N · 재료 M) — 본 수치보다 한 단 낮게 */
.c-dim{ color:var(--ink-3); font-weight:500; }

/* ── ★261006 A2 「최근 본 레시피」 — 가로 스크롤 한 줄 ─────────────────
   3열 격자(추천)와 다른 형식을 쓰는 이유: 장수가 1~10 으로 변한다. 격자면 1~2장일 때
   빈 칸이 남고(260902 지적 계통), 10장이면 세로가 길어진다. */
.c-recent__row{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity;
  margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 4px; scrollbar-width:none; }
.c-recent__row::-webkit-scrollbar{ display:none; }
.c-recent__tile{ flex:0 0 112px; width:112px; scroll-snap-align:start; }
.c-recent__tile .c-thumb{ aspect-ratio:1/1; }
.c-recent__tile .c-tile__title{ font-size:12.5px; line-height:1.3; }
.c-recent__tile .c-tile__meta{ font-size:11px; }