/* ============================================================================
   cc-components.css — 컴포넌트 전부 (P6 R3-A 신설, Docs/14 §6 28종 + 09 §4 계약)
   cc-base.css(33KB) 에 섞여 있던 컴포넌트 정의와, cc-organize/plan/shopping/capture.css 에
   흩어져 있던 공용 컴포넌트(FolderTree·DuplicateMergeCard·MealSlot/WeekGrid·
   ShoppingSection/Row·Badge 변형·Table)를 이 파일로 모았다. 셀렉터 이름은 바꾸지 않았다
   (JS·테스트가 물고 있다 — P6 계약 §0-4 절대규칙 4).
   로드 순서: cc-tokens → cc-base → cc-components → 남은 페이지 CSS.
   토큰(var(--cc-*))만 쓴다. HEX 하드코딩 0건.
   ========================================================================== */

/* ---- 1. Button `.cc-btn` (Docs/14 §6.1, ADR-020) --------------------------
   ADR-020: --sm 최소 높이는 44px(var(--cc-touch-min))로 전역 확정한다.
   --sm 을 기본과 구별하는 축은 높이가 아니라 좌우 패딩(12)·글자 크기(13)다.
   .cc-screen--app 한정 오버라이드는 제거했다(전역이 이미 44이므로 불필요). ---- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-sp-2);
  min-height: var(--cc-touch-min);
  padding: 0 var(--cc-sp-5);
  border-radius: var(--cc-radius-md);
  border: var(--cc-bw-hair) solid transparent;
  font-size: var(--cc-fs-body-sm); font-weight: var(--cc-fw-semibold);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--cc-dur-base) var(--cc-ease-standard),
              border-color var(--cc-dur-base) var(--cc-ease-standard);
}
.cc-btn--lg { min-height: 48px; font-size: var(--cc-fs-body); padding: 0 var(--cc-sp-6); }
.cc-btn--sm { min-height: var(--cc-touch-min); padding: 0 var(--cc-sp-3); font-size: var(--cc-fs-caption); }
.cc-btn--block { width: 100%; }

.cc-btn--primary { background: var(--cc-brand-fill); color: var(--cc-on-brand); border-color: var(--cc-brand-line); }
.cc-btn--primary:hover { background: var(--cc-brand-fill-hover); }
.cc-btn--primary:active, .cc-btn--primary.is-active { background: var(--cc-brand-fill-active); }
.cc-btn--accent { background: var(--cc-accent); color: var(--cc-on-accent); border-color: var(--cc-accent-line); }
.cc-btn--accent:hover { background: var(--cc-accent-hover); }
.cc-btn--accent:active, .cc-btn--accent.is-active { background: var(--cc-accent-active); }
.cc-btn--ghost { background: transparent; color: var(--cc-brand-text); border-color: var(--cc-line-field); }
.cc-btn--ghost:hover { background: var(--cc-surface-sunk); }
.cc-btn--danger { background: var(--cc-danger); color: var(--cc-on-danger); border-color: var(--cc-danger-line); }
.cc-btn--danger:hover { filter: brightness(.92); }
.cc-btn[disabled], .cc-btn[aria-disabled="true"] {
  background: var(--cc-surface-sunk); border-color: var(--cc-line); color: var(--cc-ink-faint);
  cursor: not-allowed; filter: none;
}
.cc-btn.is-loading { position: relative; color: transparent; pointer-events: none; opacity: .85; }
.cc-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--cc-on-brand);
  animation: cc-spin 700ms linear infinite;
}
.cc-btn--accent.is-loading::after, .cc-btn--ghost.is-loading::after { color: var(--cc-ink); }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-btn .cc-i { width: 18px; height: 18px; flex: none; }

/* ---- 2. IconButton `.cc-iconbtn` (Docs/14 §6.2) — P6 신설(테마 토글 등에 쓴다) ---- */
.cc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cc-touch-min); height: var(--cc-touch-min); flex: none;
  border: var(--cc-bw-hair) solid transparent; border-radius: var(--cc-radius-md);
  background: transparent; color: var(--cc-ink-muted); cursor: pointer;
  transition: background-color var(--cc-dur-fast) var(--cc-ease-standard), color var(--cc-dur-fast) var(--cc-ease-standard);
}
.cc-iconbtn:hover { background: var(--cc-surface-sunk); color: var(--cc-ink); }
.cc-iconbtn.is-selected, .cc-iconbtn[aria-pressed="true"] { background: var(--cc-brand-soft); border-color: var(--cc-brand-soft-line); color: var(--cc-brand-soft-text); }
.cc-iconbtn[disabled] { color: var(--cc-ink-faint); cursor: not-allowed; }
.cc-iconbtn--bordered { border-color: var(--cc-line-field); background: var(--cc-paper); }

/* ---- 3. Form: Field / Input / Select / Textarea / Checkbox ---------------- */
.cc-form { display: flex; flex-direction: column; gap: var(--cc-sp-4); max-width: 420px; }
.cc-form--inline { max-width: none; }
.cc-field { display: flex; flex-direction: column; gap: var(--cc-sp-1); }
.cc-field label { font-size: var(--cc-fs-caption); font-weight: var(--cc-fw-medium); color: var(--cc-ink-muted); }
.cc-field__help { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin: 0; }
.cc-field--inline { flex-direction: column; gap: var(--cc-sp-1); font-size: var(--cc-fs-caption); }
.cc-field-row { display: flex; gap: var(--cc-sp-3); flex-wrap: wrap; }
.cc-field-row .cc-field { flex: 1 1 140px; min-width: 0; }
.cc-req { color: var(--cc-danger); }

.cc-input, .cc-select, .cc-textarea {
  min-height: var(--cc-touch-min);
  padding: 0 var(--cc-sp-3);
  border: var(--cc-bw-hair) solid var(--cc-line-field);
  border-radius: var(--cc-radius-md);
  background: var(--cc-paper);
  color: var(--cc-ink);
  font-size: var(--cc-fs-body);
}
.cc-textarea { padding: var(--cc-sp-2) var(--cc-sp-3); min-height: 96px; resize: vertical; }
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-ink-muted); }
.cc-input:hover, .cc-select:hover { border-color: var(--cc-ink-muted); }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus { outline: 2px solid var(--cc-focus); outline-offset: 1px; border-color: var(--cc-focus); }
.cc-input.is-error, .cc-select.is-error { border-color: var(--cc-danger); box-shadow: inset var(--cc-bw-bold) 0 0 0 var(--cc-danger); }
.cc-input:disabled, .cc-select[disabled] { background: var(--cc-surface-sunk); color: var(--cc-ink-muted); border-color: var(--cc-line); cursor: not-allowed; }
.cc-input--sunk { background: var(--cc-surface-sunk); }
.cc-input--sm { min-height: 36px; }
.cc-screen--app .cc-input--sm { min-height: var(--cc-touch-min); }
.cc-select {
  appearance: none; padding-right: var(--cc-sp-7);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.cc-checkbox-group { display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-checkbox { display: flex; align-items: flex-start; gap: var(--cc-sp-2); font-size: var(--cc-fs-body-sm); min-height: var(--cc-touch-min); }
.cc-checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cc-brand-fill); }
.cc-screen--app .cc-checkbox { min-height: var(--cc-touch-min); align-items: center; }

/* ---- 4. Alert `.cc-alert` (Docs/14 §6.18) --------------------------------- */
.cc-alert {
  display: flex; align-items: flex-start; gap: var(--cc-sp-3);
  padding: var(--cc-sp-3) var(--cc-sp-4);
  border-radius: var(--cc-radius-md);
  border-left: var(--cc-bw-bar) solid transparent;
  font-size: var(--cc-fs-body-sm); line-height: 1.55;
  margin-bottom: var(--cc-sp-4);
}
.cc-alert .cc-i { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cc-alert__body { flex: 1; min-width: 0; }
.cc-alert--info { background: var(--cc-info-soft); border-color: var(--cc-info); color: var(--cc-info); }
.cc-alert--warning { background: var(--cc-warning-soft); border-color: var(--cc-warning-solid); color: var(--cc-warning); }
.cc-alert--danger { background: var(--cc-danger-soft); border-color: var(--cc-danger); color: var(--cc-danger); }
.cc-alert--success { background: var(--cc-success-soft); border-color: var(--cc-success); color: var(--cc-success); }
.cc-field-warn { box-shadow: inset var(--cc-bw-bar) 0 0 0 var(--cc-warning-solid); border-color: var(--cc-warning-line); }

/* ---- 5. Chip / Tag / Badge / StatPill (Docs/14 §6.4) ---------------------- */
.cc-chip {
  display: inline-flex; align-items: center; gap: var(--cc-sp-1); min-height: 24px;
  padding: 0 var(--cc-sp-2); border-radius: var(--cc-radius-pill);
  border: var(--cc-bw-hair) solid var(--cc-line); background: var(--cc-paper);
  font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-semibold); color: var(--cc-ink-muted);
  text-decoration: none;
}
.cc-chip:hover { background: var(--cc-surface-sunk); border-color: var(--cc-line-strong); }
.cc-chip.is-selected { background: var(--cc-brand-soft); border-color: var(--cc-brand-text); color: var(--cc-brand-soft-text); font-weight: var(--cc-fw-semibold); }
.cc-chip[disabled], .cc-chip.is-disabled { color: var(--cc-ink-faint); background: var(--cc-surface-sunk); cursor: not-allowed; }
.cc-chip--suggest { border-style: dashed; border-color: var(--cc-brand-soft-line); background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); }
/* 누를 수 있는 칩(ADR-020, v1.1.0)만 44×44 타깃 — 카드 안의 표시 전용 span 칩은 24px 그대로. */
a.cc-chip { min-height: var(--cc-touch-min); min-width: var(--cc-touch-min); justify-content: center; }

.cc-pill { display: inline-flex; align-items: center; gap: var(--cc-sp-1); min-height: 24px; padding: 0 var(--cc-sp-2); border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunk); color: var(--cc-ink-muted); font-size: var(--cc-fs-micro); }
.cc-pill strong { color: var(--cc-ink); font-variant-numeric: tabular-nums; }

.cc-badge { font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-semibold); padding: 2px 8px; border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunk); color: var(--cc-ink-muted); border: var(--cc-bw-hair) solid transparent; display: inline-flex; align-items: center; gap: var(--cc-sp-1); }
.cc-badge--soon { background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); }
.cc-badge--ai { background: var(--cc-brand-100); border-color: var(--cc-brand-soft-line); color: var(--cc-brand-soft-text); }
.cc-badge--success { background: var(--cc-success-soft); border-color: var(--cc-success-line); color: var(--cc-success); }
.cc-badge--warning { background: var(--cc-warning-soft); border-color: var(--cc-warning-line); color: var(--cc-warning); }
.cc-badge--danger { background: var(--cc-danger-soft); border-color: var(--cc-danger-line); color: var(--cc-danger); }

.cc-tag--1 { background: var(--cc-tag-1-soft); color: var(--cc-tag-1); border-color: var(--cc-tag-1); }
.cc-tag--2 { background: var(--cc-tag-2-soft); color: var(--cc-tag-2); border-color: var(--cc-tag-2); }
.cc-tag--3 { background: var(--cc-tag-3-soft); color: var(--cc-tag-3); border-color: var(--cc-tag-3); }
.cc-tag--4 { background: var(--cc-tag-4-soft); color: var(--cc-tag-4); border-color: var(--cc-tag-4); }
.cc-tag--5 { background: var(--cc-tag-5-soft); color: var(--cc-tag-5); border-color: var(--cc-tag-5); }
.cc-tag--6 { background: var(--cc-tag-6-soft); color: var(--cc-tag-6); border-color: var(--cc-tag-6); }
.cc-tag--7 { background: var(--cc-tag-7-soft); color: var(--cc-tag-7); border-color: var(--cc-tag-7); }
.cc-tag--8 { background: var(--cc-tag-8-soft); color: var(--cc-tag-8); border-color: var(--cc-tag-8); }

/* ---- 6. 유틸: 행 · 헤더 · 목록 도움 클래스 --------------------------------- */
.cc-row { display: flex; align-items: center; }
.cc-page-title { font-size: var(--cc-fs-title-2); }
.cc-page-lead { color: var(--cc-ink-muted); }
.cc-page-head { display: flex; align-items: center; gap: var(--cc-sp-3); flex-wrap: wrap; margin-bottom: var(--cc-sp-4); }
.cc-page-head > :first-child { margin-right: auto; }
.cc-page-head__actions { display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; }
.cc-breadcrumb { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin-bottom: var(--cc-sp-2); }
.cc-breadcrumb a { color: var(--cc-brand-text); }

.cc-panel { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); margin-bottom: var(--cc-sp-5); }
.cc-panel__title { font-size: var(--cc-fs-title-3); margin-bottom: var(--cc-sp-4); }
.cc-panel--danger { border-color: var(--cc-danger-line); }
.cc-panel__head { display: flex; align-items: center; gap: var(--cc-sp-3); flex-wrap: wrap; margin-bottom: var(--cc-sp-3); }
.cc-panel__head > :first-child { margin-right: auto; margin-bottom: 0; }

/* Table — 표(가구 구성원·초대 목록 등) 공용. 모바일 가로 스크롤 허용(320px 페이지 자체는 안 밀린다). */
.cc-table-wrap { overflow-x: auto; margin: var(--cc-sp-4) 0; }
.cc-table { width: 100%; border-collapse: collapse; background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; }
.cc-table th, .cc-table td { padding: var(--cc-sp-3); text-align: left; border-bottom: var(--cc-bw-hair) solid var(--cc-line); font-size: var(--cc-fs-body-sm); vertical-align: middle; }
.cc-table thead th { background: var(--cc-surface-sunk); font-weight: var(--cc-fw-semibold); color: var(--cc-ink-muted); white-space: nowrap; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table td .cc-input, .cc-table td .cc-btn { min-height: var(--cc-touch-min); min-width: var(--cc-touch-min); }
.cc-form-hint { color: var(--cc-ink-muted); font-size: var(--cc-fs-caption); margin: var(--cc-sp-2) 0 var(--cc-sp-5); }

/* ---- 7. FilterBar / 일괄 선택 툴바 ----------------------------------------- */
.cc-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--cc-sp-3); align-items: flex-end;
  background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line);
  border-radius: var(--cc-radius-lg); padding: var(--cc-sp-4); margin-bottom: var(--cc-sp-4);
}
.cc-filterbar__field { display: flex; flex-direction: column; gap: var(--cc-sp-1); min-width: 0; flex: 1 1 160px; }
.cc-filterbar__field label { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); }
.cc-filterbar__actions { display: flex; gap: var(--cc-sp-2); flex: 0 0 auto; }
.cc-filterbar__group { display: flex; gap: var(--cc-sp-1); flex: 0 0 auto; }
.cc-filterbar__group .cc-btn[aria-pressed="true"] { background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); border-color: var(--cc-brand-soft-line); }

.cc-select-toolbar {
  display: flex; align-items: flex-end; gap: var(--cc-sp-3); flex-wrap: wrap;
  background: var(--cc-brand-soft); border: var(--cc-bw-hair) solid var(--cc-brand-soft-line);
  border-radius: var(--cc-radius-md); padding: var(--cc-sp-3) var(--cc-sp-4); margin-bottom: var(--cc-sp-4);
  color: var(--cc-brand-soft-text);
  position: sticky; top: 0; z-index: var(--cc-z-rail);
}

/* ---- 8. RecipeCard / RecipeListRow (Docs/14 §6.5·§6.6) -------------------- */
.cc-recipe-grid { display: grid; gap: var(--cc-grid-gap); grid-template-columns: minmax(0, 1fr); }
.cc-recipe-list { display: flex; flex-direction: column; gap: var(--cc-sp-2); }
@media (min-width: 640px)  { .cc-recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cc-recipe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cc-card { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; box-shadow: var(--cc-shadow-1); }
.cc-recipe-card { position: relative; display: flex; flex-direction: column; min-width: 0; transition: border-color var(--cc-dur-base) var(--cc-ease-standard), box-shadow var(--cc-dur-base) var(--cc-ease-standard), transform var(--cc-dur-base) var(--cc-ease-standard); }
.cc-recipe-card:hover { border-color: var(--cc-line-strong); box-shadow: var(--cc-shadow-2); transform: translateY(-2px); }
.cc-recipe-card__select { position: absolute; top: var(--cc-sp-2); left: var(--cc-sp-2); z-index: 1; min-width: var(--cc-touch-min); min-height: var(--cc-touch-min); display: flex; align-items: center; justify-content: center; background: var(--cc-paper); border-radius: var(--cc-radius-sm); }
.cc-recipe-card__select input { width: 20px; height: 20px; accent-color: var(--cc-brand-fill); }
/* P6 R3-B — 썸네일은 tabindex="-1" 링크(카드 제목 링크와 같은 목적지)일 뿐 텍스트 링크가 아니다.
   글로벌 `a { color }` 규칙과 브라우저의 밑줄이 안쪽 재료 플레이스홀더 글자(.cc-ph__line, §6.7)에까지
   번져 "링크처럼" 보이는 것(실측 발견)을 막는다 — 플레이스홀더는 언제나 --cc-ph-ink 무채색이어야 한다. */
.cc-recipe-card__thumb, .cc-recipe-row__thumb, .cc-dup__thumb { text-decoration: none; color: inherit; }
.cc-recipe-card__thumb { display: block; aspect-ratio: 4 / 3; background: var(--cc-ph-bg); }
.cc-recipe-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-recipe-card__body { padding: var(--cc-sp-3); display: flex; flex-direction: column; gap: var(--cc-sp-2); min-width: 0; }
.cc-recipe-card__title { font-size: var(--cc-fs-title-3); font-weight: var(--cc-fw-semibold); margin: 0; }
.cc-recipe-card__title a { color: var(--cc-ink); text-decoration: none; display: flex; align-items: center; min-height: var(--cc-touch-min); }
.cc-recipe-card__title a:hover { text-decoration: underline; }
.cc-recipe-card__meta { margin: 0; font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; }
.cc-recipe-card__tags { margin: 0; display: flex; gap: var(--cc-sp-1); flex-wrap: wrap; }
.cc-recipe-card__source { margin: 0; padding: var(--cc-sp-2) var(--cc-sp-3); border-top: var(--cc-bw-hair) solid var(--cc-line-rule); font-size: var(--cc-fs-micro); color: var(--cc-ink-muted); display: flex; gap: var(--cc-sp-2); align-items: center; flex-wrap: wrap; }

.cc-recipe-row { display: flex; align-items: center; gap: var(--cc-sp-3); background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-md); padding: var(--cc-sp-2) var(--cc-sp-3); min-height: var(--cc-touch-min); }
.cc-recipe-row:hover { border-color: var(--cc-line-strong); }
.cc-recipe-row__select { display: flex; align-items: center; min-width: var(--cc-touch-min); min-height: var(--cc-touch-min); }
.cc-recipe-row__select input { width: 20px; height: 20px; accent-color: var(--cc-brand-fill); }
.cc-recipe-row__thumb { flex: 0 0 auto; width: 56px; height: 42px; overflow: hidden; border-radius: var(--cc-radius-sm); background: var(--cc-ph-bg); }
.cc-recipe-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-recipe-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-recipe-row__title { font-size: var(--cc-fs-body-sm); font-weight: var(--cc-fw-semibold); color: var(--cc-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-height: var(--cc-touch-min); line-height: var(--cc-touch-min); }
.cc-recipe-row__meta { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); display: flex; gap: var(--cc-sp-2); }
.cc-recipe-row__tags { display: flex; gap: var(--cc-sp-1); flex-wrap: wrap; }

.cc-skel-grid { display: grid; gap: var(--cc-sp-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cc-skel { height: 120px; border-radius: var(--cc-radius-lg); background: var(--cc-surface-sunk); position: relative; overflow: hidden; animation: cc-skel-pulse 1.4s ease-in-out infinite; }
@keyframes cc-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.cc-skel--card { height: 216px; }
.cc-more { display: flex; justify-content: center; padding: var(--cc-sp-6) 0 var(--cc-sp-2); }
#cc-sentinel { height: 1px; width: 100%; }

/* ---- 9. 이미지 플레이스홀더 (Docs/14 §6.7) --------------------------------- */
.cc-ph { display: flex; flex-direction: column; justify-content: center; gap: var(--cc-sp-1); width: 100%; height: 100%; padding: var(--cc-sp-3); background: var(--cc-ph-bg); color: var(--cc-ph-ink); font-size: var(--cc-fs-caption); }
.cc-ph__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ph--sm { padding: var(--cc-sp-1); }
.cc-ph--lg { aspect-ratio: 4 / 3; border-radius: var(--cc-radius-lg); }

/* ---- 10. 상세 그리드 / ServingStepper / IngredientRow / StepRow ----------- */
/* P6 R3-B — 실측 결함 수정: 원래 `display:grid` 2열(minmax(0,320px) minmax(0,1fr))이었으나,
   이 화면처럼 아래로 긴 필드셋(태그/폴더 피커, fieldset+legend)이 섞인 콘텐츠에서 Chromium 의
   grid `auto` 행 높이 계산이 왼쪽 열의 실제 필요 높이보다 얕게 잡히는 경우가 실측으로 확인됐다
   (레시피 상세 1440px: 태그·폴더 패널이 잘려 하단 앱 푸터와 겹쳐 그려짐 — `align-items`,
   `grid-auto-rows` 조정으로는 재현·해소되지 않아 grid 자체를 flex 로 교체했다). flex 는 어느
   쪽도 상대 열 높이에 맞춰 늘리지 않으므로(`align-items: flex-start`) 각 열이 자기 콘텐츠
   높이만큼 정확히 자란다. `min-width: 0` 은 grid 의 `minmax(0, …)` 와 같은 역할(14 §11.3 —
   긴 토큰이 트랙을 늘려 가로 스크롤을 만드는 것을 막는다)을 flex 축에서 대신한다. */
.cc-detail__grid { display: flex; flex-direction: column; gap: var(--cc-sp-5); }
@media (min-width: 1024px) {
  .cc-detail__grid { flex-direction: row; align-items: flex-start; }
  .cc-detail__aside { flex: 0 0 320px; min-width: 0; }
  .cc-detail__main { flex: 1 1 0%; min-width: 0; }
}
.cc-detail__cover { width: 100%; border-radius: var(--cc-radius-lg); display: block; }
.cc-detail__meta { display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; margin: var(--cc-sp-3) 0; }
.cc-detail__source { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); overflow-wrap: anywhere; }
.cc-detail__tags { display: flex; align-items: center; gap: var(--cc-sp-2); flex-wrap: wrap; }

.cc-stepper { display: flex; align-items: center; gap: var(--cc-sp-2); }
.cc-stepper .cc-btn { min-width: var(--cc-touch-min); min-height: var(--cc-touch-min); }
.cc-stepper__value { min-width: 64px; text-align: center; font-size: var(--cc-fs-title-3); font-weight: var(--cc-fw-semibold); }
.cc-stepper__unit { color: var(--cc-ink-muted); font-size: var(--cc-fs-body-sm); }

.cc-ingr-list, .cc-step-list, .cc-timeline, .cc-edit-rows { list-style: none; margin: 0; padding: 0; }
.cc-ingr { display: flex; align-items: center; gap: var(--cc-sp-2); min-height: var(--cc-touch-min); border-bottom: var(--cc-bw-hair) solid var(--cc-line-rule); padding: var(--cc-sp-1) 0; }
.cc-ingr__check { display: flex; align-items: center; gap: var(--cc-sp-2); flex: 1; min-width: 0; min-height: var(--cc-touch-min); cursor: pointer; }
.cc-ingr__check input { width: 20px; height: 20px; accent-color: var(--cc-brand-fill); flex: 0 0 auto; }
.cc-ingr__name { min-width: 0; overflow-wrap: anywhere; }
.cc-ingr.is-checked { opacity: .55; }
.cc-ingr.is-checked .cc-ingr__name { text-decoration: line-through; color: var(--cc-ink-faint); }
.cc-ingr.is-unmatched .cc-ingr__name { text-decoration: underline dotted var(--cc-warning-solid); text-underline-offset: 3px; }
.cc-ingr__dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--cc-radius-pill); background: var(--cc-warning-soft); border: var(--cc-bw-hair) solid var(--cc-warning-line); color: var(--cc-warning); font-size: var(--cc-fs-micro); flex: 0 0 auto; }
.cc-ingr__qty, .cc-ingr__qy { min-width: 72px; text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cc-ingr__group { padding: var(--cc-sp-3) var(--cc-sp-3) var(--cc-sp-1) 0; font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-bold); letter-spacing: var(--cc-ls-wide); color: var(--cc-ink-muted); }

.cc-step { display: flex; gap: var(--cc-sp-3); padding: var(--cc-sp-3) 0; border-bottom: var(--cc-bw-hair) solid var(--cc-line-rule); }
.cc-step__no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--cc-radius-pill); background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); display: flex; align-items: center; justify-content: center; font-weight: var(--cc-fw-semibold); font-variant-numeric: tabular-nums; }
.cc-step__body { flex: 1; min-width: 0; }
.cc-step__body p { margin: 0 0 var(--cc-sp-2); line-height: var(--cc-lh-body); }
.cc-step__img { max-width: 100%; border-radius: var(--cc-radius-md); display: block; }
.cc-step.is-done .cc-step__no { background: var(--cc-success-soft); color: var(--cc-success); border: var(--cc-bw-hair) solid var(--cc-success-line); }
.cc-step.is-current { background: var(--cc-accent-soft); border-radius: var(--cc-radius-md); padding-left: var(--cc-sp-3); padding-right: var(--cc-sp-3); box-shadow: inset var(--cc-bw-bar) 0 0 0 var(--cc-accent-line); }

.cc-timeline__item { display: flex; gap: var(--cc-sp-2); align-items: center; flex-wrap: wrap; padding: var(--cc-sp-2) 0; border-bottom: var(--cc-bw-hair) solid var(--cc-line-rule); font-size: var(--cc-fs-body-sm); }
.cc-timeline__who { color: var(--cc-ink-muted); font-size: var(--cc-fs-caption); margin-left: auto; }

/* ---- 11. 편집 행 ----------------------------------------------------------- */
.cc-edit-row { display: flex; gap: var(--cc-sp-2); align-items: flex-start; flex-wrap: wrap; padding: var(--cc-sp-2) 0; border-bottom: var(--cc-bw-hair) solid var(--cc-line-rule); max-width: 100%; }
.cc-edit-row__no { flex: 0 0 auto; min-width: 24px; padding-top: var(--cc-sp-3); color: var(--cc-ink-muted); font-size: var(--cc-fs-caption); }
.cc-edit-row__raw, .cc-edit-row__cn { flex: 3 1 200px; min-width: 0; }
.cc-edit-row__qy { flex: 0 1 96px; min-width: 0; }
.cc-edit-row__unit { flex: 0 1 112px; min-width: 0; }
.cc-edit-row__tools { display: flex; gap: var(--cc-sp-1); flex: 0 0 auto; }
.cc-edit-row__tools .cc-btn { min-width: var(--cc-touch-min); min-height: var(--cc-touch-min); }
.cc-edit__cover { max-width: 320px; width: 100%; border-radius: var(--cc-radius-md); display: block; margin-bottom: var(--cc-sp-3); }
.cc-form__actions { display: flex; justify-content: flex-end; gap: var(--cc-sp-3); padding-bottom: var(--cc-sp-6); }
.cc-form--inline > .cc-panel { width: 100%; }

/* ---- 12. EmptyState / Skeleton (Docs/14 §6.11) ---------------------------- */
.cc-empty { display: flex; flex-direction: column; align-items: center; gap: var(--cc-sp-3); text-align: center; padding: var(--cc-sp-9) var(--cc-sp-4); background: var(--cc-paper); border: var(--cc-bw-hair) dashed var(--cc-line); border-radius: var(--cc-radius-lg); }
.cc-empty__icon { width: 56px; height: 56px; border-radius: var(--cc-radius-lg); display: flex; align-items: center; justify-content: center; background: var(--cc-surface-sunk); color: var(--cc-ink-muted); }
.cc-empty__title { font-size: var(--cc-fs-title-3); font-weight: var(--cc-fw-semibold); }
.cc-empty__msg, .cc-empty__desc { color: var(--cc-ink-muted); margin-bottom: var(--cc-sp-4); max-width: 34ch; }

/* ---- 13. Dialog / Toast (Docs/14 §6.12) ----------------------------------- */
.cc-dialog {
  border: none; border-radius: var(--cc-radius-lg); padding: var(--cc-sp-6);
  max-width: 420px; width: calc(100vw - 2 * var(--cc-sp-4));
  box-shadow: var(--cc-shadow-3); color: var(--cc-ink); background: var(--cc-paper);
}
.cc-dialog::backdrop { background: var(--cc-scrim); }
.cc-dialog__actions { display: flex; gap: var(--cc-sp-3); justify-content: flex-end; margin-top: var(--cc-sp-5); flex-wrap: wrap; }

.cc-toast-container {
  position: fixed; left: 50%; bottom: var(--cc-sp-6); transform: translateX(-50%);
  z-index: var(--cc-z-toast); display: flex; flex-direction: column; gap: var(--cc-sp-2);
  width: min(92vw, 420px);
}
.cc-toast {
  background: var(--cc-brand-900); color: var(--cc-on-dark);
  padding: var(--cc-sp-3) var(--cc-sp-4); border-radius: var(--cc-radius-md);
  font-size: var(--cc-fs-body-sm); box-shadow: var(--cc-shadow-3); min-height: 52px;
  display: flex; align-items: flex-start; gap: var(--cc-sp-3);
}
.cc-toast--danger { background: var(--cc-danger); }
.cc-toast--success { background: var(--cc-success); }

/* ---- 14. 랜딩(S-01) — 히어로 · 가치 · 요금표 · FAQ (Docs/14 §13.5) -------- */
.cc-hero { max-width: var(--cc-content-w); margin: 0 auto; padding: var(--cc-sp-9) var(--cc-sp-4); text-align: center; }
.cc-hero__title { font-family: var(--cc-font-serif); font-size: var(--cc-fs-display); line-height: var(--cc-lh-display); letter-spacing: var(--cc-ls-tight); }
.cc-hero__lead { color: var(--cc-ink-muted); max-width: 560px; margin: 0 auto var(--cc-sp-6); }
.cc-hero__demo { display: flex; flex-wrap: wrap; gap: var(--cc-sp-2); justify-content: center; max-width: 520px; margin: 0 auto var(--cc-sp-6); }
.cc-hero__demo .cc-input { flex: 1; min-width: 220px; }
.cc-hero__cta { display: flex; gap: var(--cc-sp-3); justify-content: center; flex-wrap: wrap; }
/* 데모 시작 폼은 <form> 이라 flex 아이템이 되지 못한다 — 레이아웃에서 제거해 버튼만 형제로 참여시킨다. */
.cc-hero__demo-start { display: contents; }

.cc-hero__shots { display: grid; gap: var(--cc-grid-gap); grid-template-columns: minmax(0, 1fr); margin: var(--cc-sp-8) auto 0; max-width: 1100px; }
@media (min-width: 768px) { .cc-hero__shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-hero__shot { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-2); overflow: hidden; aspect-ratio: 16 / 10; }
.cc-hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-section-title { font-size: var(--cc-fs-title-2); text-align: center; margin-bottom: var(--cc-sp-6); }
.cc-values, .cc-plans, .cc-faq { max-width: var(--cc-content-w); margin: 0 auto; padding: var(--cc-sp-9) var(--cc-sp-4); }
.cc-values { display: grid; gap: var(--cc-sp-5); grid-template-columns: minmax(0, 1fr); }
.cc-value-card { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); }
@media (min-width: 768px) { .cc-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cc-plan-grid { display: grid; gap: var(--cc-sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cc-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cc-plan-card { background: var(--cc-paper); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-5); text-align: center; display: flex; flex-direction: column; gap: var(--cc-sp-3); }
.cc-plan-card__price { font-size: var(--cc-fs-title-2); font-weight: var(--cc-fw-bold); margin: 0; }
.cc-plan-card__sub { display: block; font-size: var(--cc-fs-caption); font-weight: var(--cc-fw-regular); color: var(--cc-ink-muted); margin-top: var(--cc-sp-1); }
.cc-plan-card__features { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: var(--cc-sp-2); color: var(--cc-ink-muted); font-size: var(--cc-fs-body-sm); flex: 1; }
.cc-plan-card__features li { padding-left: var(--cc-sp-4); position: relative; }
.cc-plan-card__features li::before { content: "·"; position: absolute; left: var(--cc-sp-1); color: var(--cc-brand-text); font-weight: var(--cc-fw-bold); }
.cc-plan-card__note { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin: 0; }

.cc-faq__item { border-bottom: var(--cc-bw-hair) solid var(--cc-line); padding: var(--cc-sp-3) 0; }
.cc-faq__item summary { cursor: pointer; font-weight: var(--cc-fw-medium); min-height: var(--cc-touch-min); display: flex; align-items: center; }
.cc-faq__item p { color: var(--cc-ink-muted); margin: var(--cc-sp-2) 0 0; }

/* ---- 15. 인증 카드 (S-02류 5화면) ------------------------------------------ */
.cc-auth-card { max-width: 420px; margin: var(--cc-sp-9) auto; padding: 0 var(--cc-sp-4); }
.cc-auth-card__title { font-size: var(--cc-fs-title-2); margin-bottom: var(--cc-sp-5); }
.cc-auth-card__desc { color: var(--cc-ink-muted); }
.cc-auth-card__links { margin-top: var(--cc-sp-4); display: flex; flex-direction: column; gap: var(--cc-sp-2); font-size: var(--cc-fs-body-sm); }
.cc-auth-card__links a { display: flex; align-items: center; min-height: var(--cc-touch-min); }
.cc-auth-card__sns { margin-top: var(--cc-sp-5); display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-auth-card__sns-label { text-align: center; color: var(--cc-ink-faint); font-size: var(--cc-fs-caption); }

/* ---- 16. 법무 문서(4화면) — 본문 폭 65~75자 + 목차 앵커 ------------------- */
.cc-legal { max-width: 720px; margin: 0 auto; padding: var(--cc-sp-7) var(--cc-sp-4); }
.cc-legal h1 { font-size: var(--cc-fs-title-1); }
.cc-legal h2 { font-size: var(--cc-fs-title-3); margin-top: var(--cc-sp-6); scroll-margin-top: calc(var(--cc-topbar-h) + var(--cc-sp-3)); }
.cc-legal p { line-height: var(--cc-lh-body); max-width: 68ch; }
.cc-legal__updated { color: var(--cc-ink-faint); font-size: var(--cc-fs-caption); margin-top: var(--cc-sp-6); }
.cc-legal__toc { background: var(--cc-surface); border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: var(--cc-sp-4) var(--cc-sp-5); margin: var(--cc-sp-5) 0; }
.cc-legal__toc ol { list-style: decimal; margin: 0; padding-left: var(--cc-sp-5); display: flex; flex-direction: column; gap: var(--cc-sp-1); }
.cc-legal__toc a { color: var(--cc-brand-text); font-size: var(--cc-fs-body-sm); display: inline-flex; align-items: center; min-height: var(--cc-touch-min); }

/* ---- 17. 오류 화면(2화면) — Docs/14 §10 톤 --------------------------------- */
.cc-error-page { max-width: 480px; margin: var(--cc-sp-9) auto; padding: 0 var(--cc-sp-4); text-align: center; }
.cc-error-page h1 { font-size: var(--cc-fs-display); font-family: var(--cc-font-serif); }
.cc-error-page p { color: var(--cc-ink-muted); margin-bottom: var(--cc-sp-6); }

/* ============================================================================
   18. FolderTree `.cc-tree` (Docs/14 §6.14, 09 §4) — cc-organize.css 에서 이관
   ========================================================================== */
.cc-tree-wrap { overflow-x: auto; }
.cc-tree, .cc-tree__group { list-style: none; margin: 0; padding: 0; }
.cc-tree__item { position: relative; }
.cc-tree__item:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; border-radius: var(--cc-radius-md); }
.cc-tree__row { display: flex; align-items: center; gap: var(--cc-sp-2); min-height: var(--cc-touch-min); padding: var(--cc-sp-1) var(--cc-sp-2); border-radius: var(--cc-radius-md); flex-wrap: wrap; }
.cc-tree__row:hover { background: var(--cc-surface); }
.cc-tree__caret { width: 16px; text-align: center; color: var(--cc-ink-muted); flex: 0 0 auto; }
.cc-tree__name { display: flex; align-items: center; min-height: var(--cc-touch-min); flex: 1 1 120px; min-width: 0; color: var(--cc-brand-text); font-weight: var(--cc-fw-semibold); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tree__count { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); flex: 0 0 auto; }
.cc-tree__tools { display: flex; gap: var(--cc-sp-1); flex: 0 0 auto; flex-wrap: wrap; }
.cc-tree__group { margin-left: var(--cc-sp-4); padding-left: var(--cc-sp-3); border-left: var(--cc-bw-hair) solid var(--cc-line); }
.cc-tree__item.is-open > .cc-tree__caret { transform: rotate(90deg); }
.cc-tree__caret { transition: transform var(--cc-dur-fast) var(--cc-ease-standard); }
.cc-tree__item.is-drop { border: var(--cc-bw-bold) dashed var(--cc-accent-line); background: var(--cc-accent-soft); }

/* ============================================================================
   19. DuplicateMergeCard `.cc-dup` (Docs/14 §6.18) — cc-organize.css 에서 이관
   ========================================================================== */
.cc-dup-list { display: flex; flex-direction: column; gap: var(--cc-sp-4); }
.cc-dup { border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); background: var(--cc-paper); overflow: hidden; }
.cc-dup__head { display: flex; align-items: center; gap: var(--cc-sp-2); flex-wrap: wrap; padding: var(--cc-sp-3) var(--cc-sp-4); background: var(--cc-warning-soft); border-bottom: var(--cc-bw-hair) solid var(--cc-warning-line); color: var(--cc-warning); }
.cc-dup__title { margin: 0; font-size: var(--cc-fs-body); font-weight: var(--cc-fw-bold); margin-right: auto; }
.cc-dup__when { font-size: var(--cc-fs-caption); }
.cc-dup__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-sp-4); padding: var(--cc-sp-4); }
.cc-dup__side { min-width: 0; display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-dup__side + .cc-dup__side { border-top: var(--cc-bw-hair) solid var(--cc-line); padding-top: var(--cc-sp-4); }
@media (min-width: 640px) {
  .cc-dup__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-dup__side + .cc-dup__side { border-top: 0; padding-top: 0; border-left: var(--cc-bw-hair) solid var(--cc-line); padding-left: var(--cc-sp-4); }
}
.cc-dup__pos { margin: 0; font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-bold); color: var(--cc-ink-muted); letter-spacing: var(--cc-ls-wide); }
.cc-dup__thumb { display: block; width: 100%; max-width: 160px; aspect-ratio: 4 / 3; background: var(--cc-ph-bg); border-radius: var(--cc-radius-md); overflow: hidden; }
.cc-dup__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-dup__thumb .cc-ph { width: 100%; height: 100%; }
.cc-dup__name { margin: 0; font-size: var(--cc-fs-title-3); min-width: 0; }
.cc-dup__name a { display: flex; align-items: center; min-height: var(--cc-touch-min); color: var(--cc-brand-text); text-decoration: none; word-break: break-all; }
.cc-dup__facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cc-sp-1) var(--cc-sp-3); font-size: var(--cc-fs-body-sm); }
.cc-dup__facts dt { color: var(--cc-ink-muted); }
.cc-dup__facts dd { margin: 0; color: var(--cc-ink); min-width: 0; overflow-wrap: anywhere; }
.cc-dup__actions { display: flex; flex-wrap: wrap; gap: var(--cc-sp-2); padding: var(--cc-sp-3) var(--cc-sp-4); border-top: var(--cc-bw-hair) solid var(--cc-line); background: var(--cc-surface); }
.cc-dup__side.is-keep { background: var(--cc-success-soft); box-shadow: inset 0 0 0 var(--cc-bw-bold) var(--cc-success-line); border-radius: var(--cc-radius-md); padding: var(--cc-sp-3); }

/* ============================================================================
   20. MealSlot / WeekGrid `.cc-week` `.cc-slot` (Docs/14 §6.15) — cc-plan.css 에서 이관
   ========================================================================== */
.cc-week {
  background: var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden;
  margin-bottom: var(--cc-sp-5); display: grid; gap: var(--cc-bw-hair);
}
.cc-week__row { display: grid; grid-template-columns: 60px repeat(7, minmax(0, 1fr)); gap: var(--cc-bw-hair); }
.cc-week__corner, .cc-week__head, .cc-week__label {
  background: var(--cc-surface-sunk); padding: var(--cc-sp-2); font-size: var(--cc-fs-micro);
  font-weight: var(--cc-fw-semibold); color: var(--cc-ink-muted); display: flex; align-items: center;
  justify-content: center; gap: var(--cc-sp-1); text-align: center;
}
.cc-week__label { justify-content: flex-start; padding-left: var(--cc-sp-3); }
.cc-week__head { flex-direction: column; gap: 0; }
.cc-week__date { font-variant-numeric: tabular-nums; color: var(--cc-ink-faint); }
.cc-week__head.is-today { background: var(--cc-brand-soft); color: var(--cc-brand-soft-text); }
.cc-week__head.is-today .cc-week__date { color: var(--cc-brand-soft-text); }

.cc-slot { background: var(--cc-paper); min-height: 84px; padding: var(--cc-sp-2); display: flex; flex-direction: column; gap: var(--cc-sp-1); cursor: pointer; transition: background-color var(--cc-dur-fast) var(--cc-ease-standard), box-shadow var(--cc-dur-fast) var(--cc-ease-standard); }
.cc-slot:hover { background: var(--cc-surface); }
.cc-slot:focus-visible { outline: var(--cc-focus-ring); outline-offset: calc(-1 * var(--cc-focus-offset)); }
.cc-slot--empty { align-items: center; justify-content: center; }
.cc-slot__plus { color: var(--cc-ink-faint); font-size: var(--cc-fs-title-3); line-height: 1; }
.cc-slot.is-over { background: var(--cc-accent-soft); box-shadow: inset 0 0 0 2px var(--cc-accent-line); }

.cc-slot__card { position: relative; background: var(--cc-surface); border: var(--cc-bw-hair) solid var(--cc-line); border-left: 4px solid var(--cc-line-strong); border-radius: var(--cc-radius-sm); padding: var(--cc-sp-2); display: flex; flex-direction: column; gap: 2px; cursor: grab; }
.cc-slot__card:focus-visible { outline: var(--cc-focus-ring); outline-offset: var(--cc-focus-offset); }
.cc-slot__card.is-dragging { opacity: .5; border-style: dashed; cursor: grabbing; }
.cc-slot__card--t1 { border-left-color: var(--cc-tag-1); }
.cc-slot__card--t2 { border-left-color: var(--cc-tag-2); }
.cc-slot__card--t3 { border-left-color: var(--cc-tag-3); }
.cc-slot__card--t4 { border-left-color: var(--cc-tag-4); }
.cc-slot__card--t5 { border-left-color: var(--cc-tag-5); }
.cc-slot__card--t6 { border-left-color: var(--cc-tag-6); }
.cc-slot__card--t7 { border-left-color: var(--cc-tag-7); }
.cc-slot__card--t8 { border-left-color: var(--cc-tag-8); }
.cc-slot__name { font-size: var(--cc-fs-body-sm); line-height: var(--cc-lh-body-sm); font-weight: var(--cc-fw-medium); color: var(--cc-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.cc-slot__name:hover { text-decoration: underline; }
.cc-slot__meta { display: flex; flex-wrap: wrap; gap: var(--cc-sp-1); align-items: center; font-size: var(--cc-fs-micro); color: var(--cc-ink-muted); }
.cc-slot__servings { font-variant-numeric: tabular-nums; }
.cc-slot__private { padding: 0 var(--cc-sp-1); border-radius: var(--cc-radius-pill); background: var(--cc-brand-100); color: var(--cc-brand-soft-text); font-weight: var(--cc-fw-semibold); }
.cc-slot__memo { font-size: var(--cc-fs-micro); color: var(--cc-ink-faint); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 767px) {
  .cc-week { gap: var(--cc-sp-3); background: transparent; }
  .cc-week__row { grid-template-columns: 60px minmax(0, 1fr); }
  .cc-week__row--head { display: none; }
  .cc-week__row > .cc-slot { min-height: 56px; }
  .cc-slot { border-radius: var(--cc-radius-md); }
}

/* ============================================================================
   21. ShoppingSection / ShoppingRow / Progress (Docs/14 §6.16) — cc-shopping.css 에서 이관
   ========================================================================== */
.cc-progress { display: block; width: 100%; height: 8px; border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunk); border: var(--cc-bw-hair) solid var(--cc-line); overflow: hidden; }
.cc-progress--lg { height: 10px; }
.cc-progress__fill, .cc-progress__bar { display: block; height: 100%; width: 0; border-radius: var(--cc-radius-pill); background: var(--cc-success); transition: width var(--cc-dur-slow) var(--cc-ease-standard); }

.cc-shop-sections { display: flex; flex-direction: column; gap: var(--cc-sp-5); }
.cc-shop-section { border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; background: var(--cc-paper); }
.cc-shop-section__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--cc-sp-2); margin: 0; padding: var(--cc-sp-3) var(--cc-sp-4); background: var(--cc-surface-sunk); border-bottom: var(--cc-bw-hair) solid var(--cc-line); font-size: var(--cc-fs-body-sm); font-weight: var(--cc-fw-bold); color: var(--cc-ink); }
.cc-shop-section__co, .cc-shop-section__count { color: var(--cc-ink-muted); font-weight: var(--cc-fw-medium); font-variant-numeric: tabular-nums; }
.cc-shop-rows { list-style: none; margin: 0; padding: 0; }

.cc-shop-row { display: flex; align-items: center; gap: var(--cc-sp-3); min-height: 52px; padding: var(--cc-sp-2) var(--cc-sp-4) var(--cc-sp-2) var(--cc-sp-2); border-bottom: var(--cc-bw-hair) solid var(--cc-line); background: var(--cc-paper); transition: opacity var(--cc-dur-slow) var(--cc-ease-standard), background-color var(--cc-dur-fast) var(--cc-ease-standard); }
.cc-shop-row:last-child { border-bottom: 0; }
.cc-shop-row:hover { background: var(--cc-surface); }
.cc-shop-row.is-checked { opacity: .5; }
.cc-shop-row.is-checked .cc-shop-row__name { text-decoration: line-through; }
.cc-shop-row__check { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: var(--cc-touch-min); min-height: var(--cc-touch-min); cursor: pointer; }
.cc-shop-check { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-shop-row__box { width: 22px; height: 22px; border: var(--cc-bw-bold) solid var(--cc-line-strong); border-radius: var(--cc-radius-sm); background: var(--cc-paper); transition: background-color var(--cc-dur-base) var(--cc-ease-standard), border-color var(--cc-dur-base) var(--cc-ease-standard); }
.cc-shop-check:checked + .cc-shop-row__box { background: var(--cc-success); border-color: var(--cc-success); }
.cc-shop-check:checked + .cc-shop-row__box::after { content: ""; display: block; width: 6px; height: 11px; margin: 2px auto 0; border-right: var(--cc-bw-bold) solid var(--cc-paper); border-bottom: var(--cc-bw-bold) solid var(--cc-paper); transform: rotate(45deg); }
.cc-shop-check:focus-visible + .cc-shop-row__box { outline: var(--cc-focus) solid var(--cc-focus-ring); outline-offset: var(--cc-focus-offset); }
.cc-shop-check:disabled + .cc-shop-row__box { background: var(--cc-surface-sunk); border-color: var(--cc-line); cursor: not-allowed; }
.cc-shop-row__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cc-shop-row__name { font-size: var(--cc-fs-body); line-height: var(--cc-lh-body); font-weight: var(--cc-fw-medium); color: var(--cc-ink); overflow-wrap: anywhere; }
.cc-shop-row__srcs { display: flex; flex-wrap: wrap; gap: var(--cc-sp-1); }
.cc-chip--micro { min-height: 20px; padding: 0 6px; font-size: var(--cc-fs-micro); }
a.cc-chip--micro { min-width: 0; }
.cc-shop-row__who { align-self: flex-start; padding: 1px 6px; border-radius: var(--cc-radius-pill); background: var(--cc-success-soft); color: var(--cc-success); font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-semibold); }
.cc-shop-row__qty { flex: 0 0 76px; text-align: right; font-size: var(--cc-fs-body-sm); font-weight: var(--cc-fw-semibold); color: var(--cc-ink); }
.cc-shop-warn { flex: 0 0 auto; background: var(--cc-warning-soft); color: var(--cc-warning); font-weight: var(--cc-fw-semibold); white-space: nowrap; }
.cc-shop-row__edit { flex: 0 0 auto; min-height: var(--cc-touch-min); min-width: var(--cc-touch-min); }

/* ============================================================================
   22. 데모 배너 `.cc-demo-banner` (Docs/14 §13.3, ADR-022) — P6 R3-B 신설
   앱 셸 최상단(Skip link 바로 아래) sticky. accent 는 쓰지 않는다(배너 자체가 이미
   주의를 끄는 요소). 정정된 실재 토큰만 쓴다 — 배경 warning-soft · 글자 warning ·
   아이콘 warning-solid(그래픽 3:1 역할) · 하단선 warning-line.
   ========================================================================== */
.cc-demo-banner {
  display: flex; align-items: center; gap: var(--cc-sp-2); flex-wrap: wrap;
  position: sticky; top: 0; z-index: var(--cc-z-topbar);
  padding: var(--cc-sp-2) var(--cc-sp-4);
  background: var(--cc-warning-soft); color: var(--cc-warning);
  border-bottom: var(--cc-bw-hair) solid var(--cc-warning-line);
  font-size: var(--cc-fs-body-sm); line-height: var(--cc-lh-body-sm);
}
.cc-demo-banner .cc-i { color: var(--cc-warning-solid); flex: none; }
.cc-demo-banner__msg { flex: 1 1 240px; min-width: 0; }
.cc-demo-banner__cta {
  flex: none; color: var(--cc-brand-text); font-weight: var(--cc-fw-semibold);
  text-decoration: underline; min-height: var(--cc-touch-min);
  display: inline-flex; align-items: center;
}

/* ============================================================================
   23. 레시피 상세 인쇄(S-05) — Docs/14 §12 이슈 6 해소, P6 R3-B 신설
   레이아웃(layouts/app)을 그대로 쓰는 화면이라 cc-base.css 의 공통 @media print(셸 크롬
   숨김)가 먼저 적용된다. 여기서는 상세 화면 안의 "인쇄해도 의미 없는" 조작 요소(편집·삭제·
   쿡모드·태그 추가 폼·폴더 편집·조리기록 입력 폼·식재료 연결 팝오버·삭제 다이얼로그)를 더
   지우고, 2단 그리드를 1단으로 접어 종이에서 읽기 좋게 만든다.
   ========================================================================== */
@media print {
  .cc-page-head__actions,
  .cc-breadcrumb,
  [data-role="dupl-banner"],
  .cc-stepper,
  #cc-scale-warning,
  .cc-ingr__dotbtn,
  [data-role="tag-editor"] .cc-inline-form,
  [data-role="tag-editor"] [data-action="tag-remove"],
  [data-role="ai-tag-result"],
  [data-role="folder-editor"],
  #cc-cooklog-form,
  .cc-popover,
  #cc-delete-dialog {
    display: none !important;
  }
  .cc-detail__grid { display: block; }
  .cc-detail__aside, .cc-detail__main { width: 100%; }
  .cc-detail__cover, .cc-ph--lg { max-width: 320px; }
  .cc-ingr, .cc-step, .cc-timeline__item { break-inside: avoid; }
  .cc-page-title { font-size: var(--cc-fs-title-1); }
}