/* =============================================================================
   cc-capture.css — 이 파일은 P3 수집·검토 화면 전용이다.
   (S-06 /app/capture 4탭 · S-07 /app/capture/{id} 2단 검토 · S-03 홈 빠른 수집 · /bookmarklet)
   소유: cookclip-frontend-dev

   규칙(CLAUDE.md R2 · Docs/14 · Docs/P2_계약.md §10)
     · 색·간격·반경·모션은 cc-tokens.css 의 --cc-* 토큰만 쓴다(HEX 하드코딩 금지).
       그래서 html[data-theme="dark"] 에서도 대비 4.5:1 이 토큰 정의값 그대로 유지된다.
     · 포커스 가능한 요소는 렌더 박스가 44×44 이상(투명 히트영역 확장 금지 — 박스를 키운다).
     · 포커스 링을 지우지 않는다. 상태는 색만으로 표시하지 않는다(문구·아이콘·선을 함께 쓴다).
     · 진행 표시는 스피너 단독 금지 — 막대 + 스켈레톤 + 단계 문구(aria-live).
     · 인라인 style 속성을 쓰지 않는다(CSP style-src 'self'). 진행 막대 폭도 data-step
       속성 선택자로 만든다 — JS 는 dataset 만 바꾼다.

   클래스 접두는 화면별로 좁게 잡는다(.cc-cap-* 수집, .cc-rv-* 검토, .cc-quick-* 홈).
   cc-organize.css 가 .cc-organize-tabs 로 스코프를 잡은 것과 같은 방식이고, 공용 이름
   (.cc-tabs 등)을 선점하지 않아 다른 화면의 시트와 충돌하지 않는다.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. 기존 마크업이 쓰지만 cc-base.css 에 정의가 없던 유틸 2종
      (.cc-page-desc · .cc-list 는 수집·북마클릿 템플릿에서만 쓰인다 — 실측 확인)
   --------------------------------------------------------------------------- */
.cc-page-desc {
  color: var(--cc-ink-muted);
  font-size: var(--cc-fs-body-sm);
  line-height: var(--cc-lh-body);
  max-width: 68ch;
  margin: 0 0 var(--cc-sp-4);
}
.cc-list { margin: 0 0 var(--cc-sp-4); padding-left: var(--cc-sp-5); color: var(--cc-ink); }
.cc-list li { margin-bottom: var(--cc-sp-2); line-height: var(--cc-lh-body); }

/* 인라인 오류·힌트 문구. 색만으로 알리지 않도록 좌측 4px 바 + 아이콘 문자를 함께 쓴다. */
.cc-cap-err {
  margin: var(--cc-sp-2) 0 0;
  padding: var(--cc-sp-2) var(--cc-sp-3);
  border-left: var(--cc-bw-bar) solid var(--cc-danger);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-danger-soft);
  color: var(--cc-danger);
  font-size: var(--cc-fs-body-sm);
}
.cc-cap-err::before { content: "! "; font-weight: var(--cc-fw-bold); }
.cc-cap-hint {
  margin: var(--cc-sp-2) 0 0;
  padding: var(--cc-sp-2) var(--cc-sp-3);
  border-left: var(--cc-bw-bar) solid var(--cc-success);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-success-soft);
  color: var(--cc-success);
  font-size: var(--cc-fs-body-sm);
}
/* 같은 자리에 쓰는 "고쳐야 한다" 문구(예: http 주소). 색만 바꾸지 않고 앞에 ⚠ 를 붙인다. */
.cc-cap-hint--warn {
  border-left-color: var(--cc-warning-solid);
  background: var(--cc-warning-soft);
  color: var(--cc-warning);
}
.cc-cap-hint--warn::before { content: "⚠ "; }

/* === P6 (R3-A) — .cc-badge--success/--warning 는 cc-components.css 로 이관해
     .cc-badge--ai/--soon 과 한 자리에 모았다(중복 정의 금지). === /P6 === */

/* ===========================================================================
   1. S-06 수집 화면 (/app/capture)
   =========================================================================== */
.cc-cap { max-width: 880px; }

/* 남은 한도 안내 — 0 건이면 JS 가 --warning 으로 바꾸고 제출 버튼을 잠근다. */
.cc-cap__quota { display: flex; align-items: center; gap: var(--cc-sp-2); flex-wrap: wrap; }
.cc-cap__quota b { font-variant-numeric: tabular-nums; }

/* ---- 탭 (role="tablist") — Docs/14 §6.13 -------------------------------- */
.cc-cap-tabs {
  display: flex;
  gap: var(--cc-sp-1);
  margin: 0 0 calc(-1 * var(--cc-bw-hair));
  padding: 0 0 0 var(--cc-sp-1);
  border-bottom: var(--cc-bw-hair) solid var(--cc-line);
  overflow-x: auto;                 /* 320px 에서 탭이 넘칠 때 내부에서만 스크롤한다 */
  scrollbar-width: none;
  min-width: 0;
}
.cc-cap-tabs::-webkit-scrollbar { display: none; }
.cc-cap-tabs__tab {
  position: relative;
  flex: none;
  min-height: var(--cc-touch-min);
  min-width: var(--cc-touch-min);
  padding: 0 var(--cc-sp-4);
  border: var(--cc-bw-hair) solid transparent;
  border-bottom: 0;
  border-radius: var(--cc-radius-md) var(--cc-radius-md) 0 0;
  background: transparent;
  color: var(--cc-ink-muted);
  font-size: var(--cc-fs-body-sm);
  font-weight: var(--cc-fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.cc-cap-tabs__tab:hover { background: var(--cc-surface-sunk); color: var(--cc-ink); }
/* 320px 에서도 탭 4개가 한눈에 들어오게 좌우 여백만 줄인다(가로 스크롤은 남겨 두되,
   "네 번째 탭이 있는지 모르는" 상태를 만들지 않는다). 높이 44px 는 그대로 지킨다. */
@media (max-width: 359.98px) {
  .cc-cap-tabs__tab { padding: 0 var(--cc-sp-2); font-size: var(--cc-fs-caption); }
}
.cc-cap-tabs__tab[aria-selected="true"] {
  background: var(--cc-paper);
  border-color: var(--cc-line);
  color: var(--cc-brand-text);
  font-weight: var(--cc-fw-bold);
}
/* 선택 표시를 색만으로 하지 않는다 — 하단 2px 인디케이터를 함께 둔다(14 §6.13). */
.cc-cap-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--cc-sp-2);
  right: var(--cc-sp-2);
  bottom: calc(-1 * var(--cc-bw-bold));
  height: var(--cc-bw-bold);
  background: var(--cc-brand-text);
  border-radius: var(--cc-radius-pill);
}

.cc-cap-panel {
  background: var(--cc-paper);
  border: var(--cc-bw-hair) solid var(--cc-line);
  border-radius: 0 var(--cc-radius-lg) var(--cc-radius-lg) var(--cc-radius-lg);
  padding: var(--cc-sp-5);
  margin-bottom: var(--cc-sp-5);
}
.cc-cap-panel__title { font-size: var(--cc-fs-title-3); margin: 0 0 var(--cc-sp-2); }
.cc-cap-panel .cc-input { width: 100%; }
.cc-cap-panel textarea.cc-input { padding: var(--cc-sp-3); line-height: var(--cc-lh-body); resize: vertical; }
.cc-cap-panel__actions { display: flex; gap: var(--cc-sp-3); flex-wrap: wrap; margin-top: var(--cc-sp-4); }
.cc-cap-count { font-variant-numeric: tabular-nums; }
.cc-cap-count.is-over { color: var(--cc-danger); font-weight: var(--cc-fw-semibold); }
.cc-input.is-error { border-color: var(--cc-danger); box-shadow: inset var(--cc-bw-bold) 0 0 var(--cc-danger); }

/* 사진 탭 — v1.2 안내만 둔다(업로드 UI 없음) */
.cc-cap-soon { display: flex; gap: var(--cc-sp-3); align-items: flex-start; }
.cc-cap-soon .cc-badge { flex: 0 0 auto; margin-top: 2px; }

/* ===========================================================================
   2. S-07 검토 화면 (/app/capture/{publicId})
   =========================================================================== */
.cc-rv { max-width: 1240px; }
.cc-rv__head { display: flex; align-items: center; gap: var(--cc-sp-3); flex-wrap: wrap; }
.cc-rv__head .cc-page-title { margin: 0; }

/* ---- 진행 표시 (스피너 단독 금지: 막대 + 스켈레톤 + 문구) ---------------- */
.cc-rv-prog__step {
  margin: 0 0 var(--cc-sp-3);
  font-size: var(--cc-fs-title-3);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-ink);
}
.cc-prog {
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-surface-sunk);
  overflow: hidden;
}
.cc-prog__bar {
  height: 100%;
  width: 6%;
  background: var(--cc-brand-fill);
  border-radius: var(--cc-radius-pill);
  transition: width var(--cc-dur-slow) var(--cc-ease-standard);
}
/* CSP style-src 'self' 이라 style="width:..." 을 쓸 수 없다 — 10단 눈금을 속성으로 표현한다. */
.cc-prog__bar[data-step="0"]  { width: 6%; }
.cc-prog__bar[data-step="1"]  { width: 12%; }
.cc-prog__bar[data-step="2"]  { width: 22%; }
.cc-prog__bar[data-step="3"]  { width: 32%; }
.cc-prog__bar[data-step="4"]  { width: 42%; }
.cc-prog__bar[data-step="5"]  { width: 52%; }
.cc-prog__bar[data-step="6"]  { width: 62%; }
.cc-prog__bar[data-step="7"]  { width: 72%; }
.cc-prog__bar[data-step="8"]  { width: 82%; }
.cc-prog__bar[data-step="9"]  { width: 90%; }
.cc-prog__bar[data-step="10"] { width: 100%; }
/* 오래 걸리는 중 — 색만으로 알리지 않도록 문구도 함께 바뀐다(JS). */
.cc-prog.is-stalled .cc-prog__bar { background: var(--cc-warning-solid); }

.cc-rv-prog__skel { display: flex; flex-direction: column; gap: var(--cc-sp-2); margin-top: var(--cc-sp-5); }
.cc-rv-prog__skel .cc-skel { height: 16px; border-radius: var(--cc-radius-sm); }
.cc-rv-prog__skel .cc-skel:nth-child(2) { width: 82%; }
.cc-rv-prog__skel .cc-skel:nth-child(3) { width: 64%; }
.cc-rv-prog__skel .cc-skel:nth-child(4) { width: 74%; }
.cc-rv-prog__actions { gap: var(--cc-sp-3); flex-wrap: wrap; margin-top: var(--cc-sp-5); }

/* ---- 실패 · 신뢰도 경고 · 중복 배너 ------------------------------------- */
.cc-rv-alert { display: flex; flex-direction: column; gap: var(--cc-sp-2); }
.cc-rv-alert__title { margin: 0; font-weight: var(--cc-fw-bold); }
.cc-rv-alert__list { margin: 0; padding-left: var(--cc-sp-5); }
.cc-rv-alert__list li { margin-bottom: var(--cc-sp-1); }
.cc-rv-alert__actions { display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; margin-top: var(--cc-sp-2); }
/* 경고 바 안의 링크는 문장 안 링크가 아니라 목록 항목이라 대비를 위해 밑줄을 유지한다.
   중복 후보 링크는 "그 레시피를 열어 보라"는 주 동작이므로 타깃을 44×44 로 키운다
   (inline-flex 라 문장 흐름을 유지하면서 박스만 커진다 — 투명 히트영역 확장이 아니다). */
.cc-rv-alert a { color: inherit; text-decoration: underline; }
.cc-rv-alert__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cc-touch-min);
  min-width: var(--cc-touch-min);
  max-width: 100%;
  padding: 0 var(--cc-sp-1);
  overflow-wrap: anywhere;
}

/* ---- 모바일 원문/결과 전환 (<768). ≥768 은 JS 가 hidden 을 걸어 2단으로 둔다 --- */
.cc-rv__tabs {
  display: flex;
  gap: var(--cc-sp-1);
  margin-bottom: var(--cc-sp-4);
  padding: var(--cc-sp-1);
  background: var(--cc-surface-sunk);
  border-radius: var(--cc-radius-pill);
}
.cc-rv__tabs button {
  flex: 1 1 0;
  min-height: var(--cc-touch-min);
  border: var(--cc-bw-hair) solid transparent;
  border-radius: var(--cc-radius-pill);
  background: transparent;
  color: var(--cc-ink-muted);
  font-size: var(--cc-fs-body-sm);
  font-weight: var(--cc-fw-semibold);
  cursor: pointer;
}
.cc-rv__tabs button[aria-selected="true"] {
  background: var(--cc-paper);
  border-color: var(--cc-brand-soft-line);
  color: var(--cc-brand-text);
  font-weight: var(--cc-fw-bold);
}

/* ---- 2단 레이아웃 -------------------------------------------------------- */
/* 원문 칸은 "읽는 칸" 이라 넓힐수록 좋지만, 결과 칸의 재료 행이 접히지 않는 것이 먼저다.
   그래서 폭이 늘어나는 만큼만 원문 칸을 키운다(768 → 260px, 1024 → 300px, 1280 → 380px). */
.cc-rv__grid { display: grid; gap: var(--cc-sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px)  { .cc-rv__grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }
@media (min-width: 1024px) { .cc-rv__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
@media (min-width: 1280px) { .cc-rv__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.cc-rv__source, .cc-rv__result { margin-bottom: 0; min-width: 0; }

/* ---- 원문(좌) ----------------------------------------------------------- */
.cc-rv__srcline { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); overflow-wrap: anywhere; margin: 0 0 var(--cc-sp-3); }
.cc-rv__srcline a { color: var(--cc-brand-text); }
.cc-rv-raw {
  max-height: 52vh;
  overflow: auto;
  padding: var(--cc-sp-2);
  border: var(--cc-bw-hair) solid var(--cc-line);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-sunk);
  font-size: var(--cc-fs-body-sm);
  line-height: var(--cc-lh-body);
}
.cc-rv-raw__line {
  margin: 0;
  padding: var(--cc-sp-1) var(--cc-sp-2);
  border-left: var(--cc-bw-bar) solid transparent;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cc-rv-raw__line:hover { background: var(--cc-paper); }
/* 현재 줄(키보드 ↑↓ 이동 대상)과 이어진 줄을 색 + 좌측 바 + 굵기로 이중 표시한다. */
.cc-rv-raw__line.is-active {
  background: var(--cc-brand-soft);
  border-left-color: var(--cc-brand-text);
  color: var(--cc-brand-soft-text);
  font-weight: var(--cc-fw-semibold);
}
.cc-rv-raw__line.is-linked { background: var(--cc-accent-soft); border-left-color: var(--cc-accent-line); }
.cc-rv-raw:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }

/* ---- 정리 결과(우) ------------------------------------------------------ */
.cc-rv__fields { display: flex; flex-direction: column; gap: var(--cc-sp-4); }
.cc-rv__subhead { display: flex; align-items: center; gap: var(--cc-sp-3); flex-wrap: wrap; margin: var(--cc-sp-5) 0 var(--cc-sp-2); }
.cc-rv__subhead > :first-child { margin-right: auto; }
.cc-rv__subtitle { font-size: var(--cc-fs-body); font-weight: var(--cc-fw-bold); margin: 0; }
.cc-rv__fields .cc-input, .cc-rv__fields textarea.cc-input { width: 100%; }
/* 정리가 끝나면 결과 제목으로 포커스를 옮겨 "새 내용이 왔다"를 알린다(긴 대기 뒤 표준 처리).
   그때의 포커스 링이 우연처럼 보이지 않도록 간격을 주어 의도된 표시로 만든다. */
.cc-rv__result .cc-panel__title:focus-visible { outline: var(--cc-focus-ring); outline-offset: 6px; }
.cc-rv__result .cc-panel__title:focus:not(:focus-visible) { outline: none; }
.cc-rv__fields textarea.cc-input { padding: var(--cc-sp-2) var(--cc-sp-3); line-height: var(--cc-lh-body); resize: vertical; }

/* 저신뢰 필드 표시(14 §6.18 .cc-field-warn) — 입력칸에 4px 좌측 바 + 배경 + 문구 */
.cc-field-warn > .cc-input,
.cc-field-warn > textarea.cc-input {
  background: var(--cc-warning-soft);
  box-shadow: inset var(--cc-bw-bar) 0 0 var(--cc-warning-solid);
}
.cc-field-warn > label::after { content: " ⚠ 확인 필요"; color: var(--cc-warning); font-weight: var(--cc-fw-semibold); }

/* ---- 재료·단계 행 ------------------------------------------------------
   cc-base.css 의 .cc-edit-row(flex + wrap)를 이 화면에서는 grid 로 바꾼다.
   검토 화면의 결과 칸은 원문과 나눠 쓰느라 좁아서, flex 줄바꿈에 맡기면 한 행이
   폭에 따라 2~3줄로 제멋대로 접힌다(실측). 영역을 이름으로 못박으면 어느 폭에서도
   "원문 한 줄 / 수량·단위 + 버튼 한 줄" 로 읽히고, 1280 이상에서는 한 줄이 된다. */
.cc-rv__rows { margin: 0; padding: 0; list-style: none; }
.cc-rv__rows .cc-edit-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas:
    "no  raw   raw"
    "no  meta  tools";
  column-gap: var(--cc-sp-2);
  row-gap: var(--cc-sp-1);
  align-items: center;
}
.cc-rv__rows .cc-edit-row--step {
  grid-template-areas:
    "no  cn  cn"
    "no  .   tools";
}
.cc-rv__rows .cc-edit-row__no { grid-area: no; align-self: start; padding-top: var(--cc-sp-3); }
.cc-rv__rows .cc-edit-row__raw { grid-area: raw; }
.cc-rv__rows .cc-edit-row__cn { grid-area: cn; }
.cc-rv__rows .cc-edit-row__meta { grid-area: meta; display: flex; align-items: center; gap: var(--cc-sp-2); min-width: 0; }
.cc-rv__rows .cc-edit-row__tools { grid-area: tools; justify-self: end; }
/* 수량 칸은 눌러서 고치는 입력이라 44px 아래로 줄어들면 안 된다(실측: 320px 에서 40.3px 까지
   줄어 KWCAG 터치 타깃을 깼다). 대신 단위 이름이 줄어들거나 줄바꿈한다. */
.cc-rv__rows .cc-edit-row__qy { flex: 0 1 88px; min-width: var(--cc-touch-min); }

/* 아주 좁은 화면(≈폰 세로)에서는 수량·단위와 버튼을 각각 제 줄에 둔다 — 한 줄에 밀어 넣으면
   수량 칸이 44px 아래로 찌그러진다. 줄이 늘어나는 대신 모든 타깃이 규격을 지킨다. */
@media (max-width: 419.98px) {
  .cc-rv__rows .cc-edit-row--ingr {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "no  raw"
      "no  meta"
      "no  tools";
  }
  .cc-rv__rows .cc-edit-row--step {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "no  cn"
      "no  tools";
  }
  .cc-rv__rows .cc-edit-row__tools { justify-self: start; }
}
/* 단위 <select> — 예전의 "단위 이름 텍스트(.cc-edit-row__unitnm)" 를 대신한다.
   고칠 수 있는 칸이 됐으니 44px 아래로 줄어들면 안 된다. 수량(88px)과 나란히 서고,
   320px 에서는 행 grid 가 meta 를 제 줄로 내려 주므로 둘 다 규격을 지킨 채 들어간다
   (실측 320px: 수량 88 + 단위 112 + gap 8 = 208 < 결과 패널 내부 폭). */
.cc-rv__rows .cc-edit-row__unit {
  flex: 1 1 112px;
  min-width: 112px;
  max-width: 100%;
  min-height: var(--cc-touch-min);
  padding: 0 var(--cc-sp-2);
  font-size: var(--cc-fs-body-sm);
  /* 단위 이름이 길어도(예: "종이컵") 행을 밀어내지 않게 자른다 — 선택하면 전체가 보인다. */
  text-overflow: ellipsis;
}

/* 단위 목록을 못 받았을 때만 보이는 안내 줄. */
.cc-rv__unitnote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cc-sp-2);
  margin: 0 0 var(--cc-sp-2);
  font-size: var(--cc-fs-caption);
  color: var(--cc-warning);
}
@media (min-width: 1280px) {
  .cc-rv__rows .cc-edit-row--ingr {
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    grid-template-areas: "no raw meta tools";
  }
  .cc-rv__rows .cc-edit-row--step {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "no cn tools";
  }
  .cc-rv__rows .cc-edit-row__no { align-self: center; padding-top: 0; }
}

/* 표 머리는 열이 실제로 한 줄로 늘어서는 1280 이상에서만 보여 준다. */
.cc-rv-head { display: none; }
@media (min-width: 1280px) {
  .cc-rv-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    column-gap: var(--cc-sp-2);
    padding: 0 0 var(--cc-sp-1);
    border-bottom: var(--cc-bw-hair) solid var(--cc-line-strong);
    font-size: var(--cc-fs-micro);
    letter-spacing: var(--cc-ls-wide);
    color: var(--cc-ink-faint);
  }
  .cc-rv-head__meta { min-width: 120px; }
  .cc-rv-head__tools { min-width: 150px; text-align: right; }
}
/* 원문 줄에서 이어온 강조 — 2단 하이라이트(색 + 좌측 바) */
.cc-edit-row.is-linked, .cc-field.is-linked {
  background: var(--cc-accent-soft);
  box-shadow: inset var(--cc-bw-bar) 0 0 var(--cc-accent-line);
  border-radius: var(--cc-radius-sm);
}
.cc-edit-row__flag { flex: 0 0 auto; margin-top: var(--cc-sp-3); }

/* 태그 제안 칩 — 누르면 선택된다(무단 저장 금지: 저장 버튼을 눌러야 반영) */
.cc-rv-tags { display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; }
.cc-rv-tags button.cc-chip {
  min-height: var(--cc-touch-min);
  min-width: var(--cc-touch-min);
  padding: 0 var(--cc-sp-3);
  border-style: dashed;
  border-color: var(--cc-brand-soft-line);
  background: var(--cc-brand-soft);
  color: var(--cc-brand-soft-text);
  cursor: pointer;
}
.cc-rv-tags button.cc-chip[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--cc-brand-text);
  font-weight: var(--cc-fw-bold);
}
.cc-rv-tags button.cc-chip[aria-pressed="true"]::before { content: "✓ "; }
.cc-rv-tags button.cc-chip[aria-pressed="false"]::before { content: "+ "; }

/* 패널 안의 빈 상태는 화면 전체 빈 상태(padding 56px)만큼 크지 않아도 된다. */
.cc-rv__source .cc-empty, .cc-rv__result .cc-empty { padding: var(--cc-sp-5) var(--cc-sp-4); }
.cc-rv__source .cc-empty__msg, .cc-rv__result .cc-empty__msg { margin-bottom: 0; }

.cc-rv__actions {
  display: flex;
  gap: var(--cc-sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--cc-sp-6);
  padding-bottom: var(--cc-sp-6);
}

/* ===========================================================================
   3. S-03 홈 빠른 수집
   =========================================================================== */
.cc-quick__row { display: flex; gap: var(--cc-sp-3); align-items: flex-end; flex-wrap: wrap; }
.cc-quick__field { flex: 1 1 240px; min-width: 0; }
.cc-quick__field .cc-input { width: 100%; padding: var(--cc-sp-2) var(--cc-sp-3); line-height: var(--cc-lh-body); resize: vertical; }
.cc-quick__links { display: flex; gap: var(--cc-sp-3); flex-wrap: wrap; margin: var(--cc-sp-3) 0 0; }

/* ===========================================================================
   4. /bookmarklet (공개 화면 — 템플릿이 이 시트를 직접 건다)
   =========================================================================== */
.cc-bm__code { width: 100%; font-family: var(--cc-font-num); font-size: var(--cc-fs-caption); padding: var(--cc-sp-2) var(--cc-sp-3); }
.cc-bm__actions { display: flex; gap: var(--cc-sp-2); flex-wrap: wrap; margin-top: var(--cc-sp-2); }

/* ===========================================================================
   5. 모션 감소 — cc-tokens.css §5 가 duration 을 1ms 로 낮추지만, 진행 막대의
      폭 전이는 "값이 움직이는" 애니메이션이라 아예 끈다(문구로 상태를 알린다).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cc-prog__bar { transition: none; }
  .cc-rv-prog__skel .cc-skel { animation: none; }
}