/* ============================================
   자동화 솔루션 (구글시트 연동) — .c-sheet 스코프
   ============================================

   설계 제약:
   1. tokens.css 를 **직접** 소비한다. 주문페이지 스코프의 커스텀 프로퍼티(주문 화면 스타일의 ord 계열)는
      절대 참조하지 않는다. 참조하는 순간 그 파일이 이 화면의 API 가 되어, 그쪽 수정이 여기를 조용히 깨뜨린다.
      → 이 파일에서 해당 프리픽스가 grep 되면 위반이다. 주석에도 쓰지 않는다.
   2. 전역 의미가 없는 값(레이아웃 상수, 상태색)은 이 스코프에 로컬 정의한다. 승격하지 않는다.
   3. .c-order 계열 클래스를 재사용하지 않는다. 마크업이 비슷해도 별개 컴포넌트다.

   tokens.css 에 없어서 로컬 정의가 불가피한 것: 상태 의미색(성공/경고/위험/중립).
   tokens.css 는 mono·point-blue·accent 3색만 갖고 있고 semantic status color 가 없다.
   ============================================ */

.c-sheet {
  /* ---- 상태 의미색 (tokens.css 에 대응물 없음) ---- */
  --sheet-ok-bg:      #E7F6EC;
  --sheet-ok-tx:      #1B7F45;
  --sheet-warn-bg:    #FFF4DC;
  --sheet-warn-tx:    #92670A;
  --sheet-danger-bg:  #FDECEA;
  --sheet-danger-tx:  #C0392B;
  --sheet-neutral-bg: #F1F2F4;
  --sheet-neutral-tx: #5A6270;
  --sheet-info-bg:    #EEF2FE;
  --sheet-info-tx:    var(--point-blue-text);

  /* ---- 레이아웃 상수 (전역 의미 없음) ---- */
  --sheet-card-pad:   var(--space-6);
  --sheet-gap:        var(--space-5);
  --sheet-border:     #E5E7EB;
  --sheet-border-soft:#EFF1F4;
  --sheet-fill:       #FAFBFC;
  /* 드롭존 hover 처럼 "옅은 브랜드 면"이 필요한 자리. color_root.css 의 --point-blue-5 와 같은 값이지만
     자동화 화면은 tokens.css 만 싣고 그 파일을 로드하지 않는다 → 그 토큰을 쓰면 선언 자체가 무효가 되어
     아무 일도 일어나지 않는다(조용히 실패한다). 그래서 이 스코프에 로컬로 둔다. */
  --sheet-accent-soft:#E8EFF6;

  color: var(--color-mono-1);
  font-size: var(--text-body-m);
  line-height: 1.5;
}

/* ============================================
   페이지 셸
   ============================================ */
.c-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.c-sheet__title {
  margin: 0;
  font-size: var(--text-heading-3);
  font-weight: 700;
  color: var(--color-text-strong);
}
.c-sheet__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-m);
  color: var(--color-text-muted);
}

/* ============================================
   2컬럼 셸 — 좌: 폼 / 우: 발송물 미리보기 레일 (화면4 상품·메시지 설정)

   ⚠ 파일 상단 설계 제약 3(".c-order 계열 클래스를 재사용하지 않는다")의 **유일한 예외**가 이 레일이다.
   시안의 우측 미리보기를 "새로 그리지 말고 주문페이지 것을 그대로 쓴다"로 정했다.

   다음 단계 화면이 주문 화면 스타일을 link 하고, 레일 루트에 .c-order 를 함께 단다.

   .c-order 를 다는 목적은 오직 하나 — 토큰 상속이다
   (주문 화면 스타일 `.c-order, .c-order-preview { … }` 가 미리보기 색을 전부 들고 있다).
   설계 제약 1 은 그대로 지킨다: **이 파일은 그 프리픽스의 커스텀 프로퍼티를 정의하지도 참조하지도 않는다.**
   승격도 복제도 하지 않으므로 "두 벌이 갈라지는" 위험은 생기지 않는다.

   대가: .c-order 는 토큰 말고 주문페이지 레이아웃(display:grid / 1fr+320px / gap / padding-bottom)도
   들고 있다. 그것만 아래 한 규칙으로 되돌린다. 그 파일 자체는 고치지 않는다 —
   고치지 않는 것이 제약 1 이 막으려는 "저쪽 수정이 여기를 조용히 깨뜨린다"를 피하는 핵심이다.
   ============================================ */

/* 그리드 아이템이 되면 폼 안의 긴 문자열(상품명·안내문)이 컬럼을 밀어낼 수 있다 → min-width 를 미리 푼다 */
.c-sheet__form { min-width: 0; }

.c-sheet__rail {
  min-width: 0;
  margin-top: var(--sheet-gap);
  /* ≤1279 에서 1컬럼으로 쌓일 때만 의미가 있다. 폰 프리뷰을 본문 폭(1000+)까지 늘리면
     기기 화면이 아니라 띠처럼 보인다 → 주문페이지 레일 폭에서 멈춘다.
     ≥1280 에서는 그리드가 폭을 정한다(주문페이지와 같은 320px 고정). */
  max-width: 320px;
}

/* .c-order 의 레이아웃 선언 무력화. (0,2,0) 이라 주문 화면 스타일의 `.c-order` (0,1,0) —
   기본 규칙과 미디어쿼리 3개(≤1279 1컬럼 / 1280~1500 side clamp / ≤767 모바일 결제바 여백) — 전부를 이긴다.
   미디어쿼리는 특정도를 올리지 않으므로 우선순위 플래그가 필요하지 않다(이 파일의 플래그 개수는 1개로 유지). */
.c-sheet__rail.c-order {
  display: block;
  gap: 0;
  padding-bottom: 0;
}

/* ⚠ `.c-sheet__rail-title`(레일 상단 "미리보기"/"결제하기" 라벨)은 제거했다.
   위 주석은 "결제요약 레일이 없어서 라벨만 남긴다" 고 했는데 <b>지금은 사실이 아니다</b> —
   이 화면에도 [결제하기] 패널이 있고 스왑 바가 실제로 전환한다. 바가 현재 패널을 굵게 표시하므로
   라벨은 같은 말을 두 번 하는 것이었고, 그만큼 카드가 아래로 밀려 주문페이지와도 어긋났다. */

/* PC(≥1280) 2컬럼 — <b>주문페이지와 같은 비율</b>.
   주문페이지 실측(viewport 1600): `.c-order` = `minmax(0,1fr) 320px` / gap 26px
   → 좌 878 / 우 320. 우측 레일이 <b>고정 320px</b> 이고 좌측이 남는 폭을 먹는다.

   한때 여기 시안 비율(650fr : 430fr / gap 16)을 넣었는데 되돌렸다.
   이 화면은 주문페이지에서 파생된 화면이고 레이아웃 비율까지 주문페이지가 기준이다.
   비율이 다르면 같은 프래그먼트를 써도 카드 폭이 달라져 컨트롤이 찌그러진다
   (실측: 시안 비율일 때 카드 598 → 발신자명 컨트롤 62px 로 붕괴). */
@media (min-width: 1280px) {
  .c-sheet--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 26px;
    /* 레일이 폼 높이만큼 늘어나지 않게. sticky 의 기준은 늘어난 박스가 아니라 그리드 영역이라
       start 로 둬도 레일은 폼 전 구간을 따라온다. */
    align-items: start;
  }
  /* 타이틀은 두 컬럼 위를 지난다(시안도 inner 바깥·wrapper 폭이다) */
  .c-sheet--split > .c-sheet__head { grid-column: 1 / -1; }
  .c-sheet--split > .c-sheet__form { grid-column: 1; }
  .c-sheet--split > .c-sheet__rail {
    grid-column: 2;
    max-width: none;
    margin-top: 0;
    position: sticky;
    top: var(--space-6);
    /* 세로가 짧은 화면에서 미리보기 아래가 잘리지 않도록. 주문페이지 .c-order__side 와 같은 처방이지만
 그 클래스를 가져오면 폭(320)·스크롤바 처리까지 따라오므로 여기서 필요한 두 줄만 쓴다.

 🔴 "필요한 두 줄만" 이 정확히 이 화면의 버그를 만들었다.
 `.c-order__side` 에 매달린 규칙은 두 줄이 아니라 <b>다섯 줄(3종)</b>이었고,
 가져오지 않은 3종이 전부 "폰 프리뷰 안에서 스크롤" 을 담당했다
 (주문 화면 스타일 container-type / flex-shrink / max-height+overflow).
 그 결과 이 화면만 미리보기가 잘리지 않고 레일이 통째로 길어졌다.
 → 아래 블록에서 그 3종을 <b>이 화면 선택자로</b> 되살린다. 원본은 건드리지 않는다. */
    max-height: calc(100vh - var(--space-6) * 2);
    overflow-y: auto;
  }

  /* ── 폰 프리뷰 내부 스크롤 — 주문페이지 `.c-order__side …` 3종의 캠페인 대응 ───────────────
 원본이 조상 클래스(.c-order__side)에 스코프돼 있어 이 화면(.c-sheet__rail.c-order)에는
 선택자가 걸리지 않는다. 마크업은 공유하지만 <b>동작은 호출자 래퍼에
 묶여 있어 따라오지 않는다</b> — "마크업만 오고 핸들러가 안 왔다" 와 같은 유형,
 층만 CSS 다.

 ⚠ 값은 원본과 동일해야 한다. 캡 계산이 프레임 padding(40)+border(6) 에 묶여 있어
 한쪽만 바꾸면 두 화면의 폰 비율이 갈린다(원본 주석 참고).
 ⚠ 스크롤바 색은 `.c-order` 스코프의 주문 화면 토큰이고 이 레일이 `.c-sheet__rail.c-order` 라 해결된다. */

  /* ① 컨테이너 기준점. 이게 없으면 아래 230cqw 가 기준을 못 찾아 캡이 무의미해진다. */
  .c-sheet__rail .c-order-coupon__frame { container-type: inline-size; }

  /* ② 캡이 걸렸을 때 flex 자식이 비례 압축(세로 짜부)되지 않고 내용이 스크롤되도록 */
  .c-sheet__rail .c-order-coupon__screen > * { flex-shrink: 0; }

  /* ③ 폰 스크린만 스크롤(흰 20px 프레임 padding 은 고정) */
  .c-sheet__rail .c-order-coupon__screen {
    max-height: calc(230cqw + 60px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ord-seg-dot) transparent;
  }
  .c-sheet__rail .c-order-coupon__screen::-webkit-scrollbar { width: 6px; }
  .c-sheet__rail .c-order-coupon__screen::-webkit-scrollbar-track { background: transparent; }
  .c-sheet__rail .c-order-coupon__screen::-webkit-scrollbar-thumb {
    background: var(--ord-seg-dot);
    border-radius: 999px;
  }
}

/* ============================================
   카드
   ============================================ */
/* ⚠ 카드 기본값은 <b>주문페이지(.c-order-card)와 같아야 한다.</b>
   자동화 화면은 주문페이지와 같은 제품의 같은 흐름이고 시안도 같은 카드로 그려져 있는데,
   예전에는 자체 값(radius 12 / border 1px #E5E7EB / padding 24 / 제목 13.5px 회색)을 써서
   나란히 놓으면 <b>다른 화면처럼 보였다</b>(실측 대조로 확인).
   아래 값은 주문페이지 실측치다:
     card   radius 18px / border 1px #E8EAF0 / shadow 0 6px 11px rgba(20,26,41,.06)
     head   padding 0 30px, height 74px
     title  17px / 700 / #161C28
   ⚠ 주문페이지 값이 바뀌면 여기도 같이 바꾼다. */
.c-sheet-card {
  box-sizing: border-box;
  padding: 0;                                   /* 주문페이지처럼 head/body 가 각자 패딩을 갖는다 */
  border: 1px solid rgb(232, 234, 240);
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 6px 11px 0 rgba(20, 26, 41, .06);
}
.c-sheet-card + .c-sheet-card { margin-top: var(--sheet-gap); }
/* 주문페이지 .c-order-card__head 와 같은 배치 — 번호 뱃지 바로 옆에 타이틀이 붙는다.
   ⚠ 예전에는 여기에 `justify-content: space-between` 이 있어서 "번호 … 타이틀"처럼
     타이틀이 카드 오른쪽 끝까지 밀렸다(주문페이지와 눈에 띄게 달랐던 원인).
     그렇다고 그냥 지우면 안 된다 — head 에 액션이 함께 있는 카드가 있다
     (허브 '연동 목록 보기' 버튼 / 일 한도·조건설정 스위치 / 대시보드 헤더).
     그래서 배치는 기본 좌측 정렬로 두고, 액션만 아래 규칙으로 오른쪽 끝에 민다. */
.c-sheet-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 74px;
  margin-bottom: 0;
  padding: 0 30px;
}
/* 자식이 2개 이상인 head 에서 <b>마지막 자식만</b> 오른쪽 끝으로.
   `.c-sheet-card__title` 은 제외한다 — 제외하지 않으면 "번호 + 타이틀" 카드에서
   타이틀이 다시 오른쪽으로 밀려 원래 문제로 돌아간다. */
.c-sheet-card__head > *:last-child:not(:first-child):not(.c-sheet-card__title) {
  margin-left: auto;
}
.c-sheet-card__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  color: rgb(22, 28, 40);
}
/* head 를 뺀 나머지 내용은 본문 패딩을 갖는다(주문페이지 .c-order-card__body 와 동일 개념).
   기존 마크업이 card 직속으로 필드를 두고 있어, head 형제 요소 전체에 패딩을 준다. */
.c-sheet-card > *:not(.c-sheet-card__head) { padding-left: 30px; padding-right: 30px; }
/* "일 한도" 타이틀만 좌측으로 30px 밀려 있던 문제.
 위 규칙의 `:not(.c-sheet-card__head)` 예외는 head 가 <b>카드의 직계 자식일 때만</b> 성립한다.
 일 한도 블록은 래퍼(div[data-daily-block])가 카드 직계라 위 규칙으로 30px 을 받고,
 그 <b>안에 중첩된</b> head 가 자기 몫 30px( `padding: 0 30px`)을 또 받아 60px 이 된다
 → 타이틀 left 369, 형제 필드 라벨 left 339 (실측으로 확인한 30px 차이).
 래퍼가 이미 본문 패딩을 주므로 중첩된 head 는 좌우 패딩을 갖지 않는 것이 맞다.

 ⚠ 이 규칙은 일부러 `.c-sheet--std` 로 스코프하지 않는다. 그 스코프는 "화면1·2·3·5 용 변경이
 화면4(주문페이지 패리티)로 새지 않게" 하려는 것인데, 이 건은 <b>화면4 자체의 정렬 버그</b>라
 스코프를 걸면 적용되지 않는다. 반대 방향 누수도 없다 — [data-daily-block] 은 step2 에만 있다. */
.c-sheet-card [data-daily-block] > .c-sheet-card__head { padding-left: 0; padding-right: 0; }
/* 카드 아래 여백.
   ⚠ `:last-child` 라서 <b>카드의 마지막 자식이 보이지 않는 요소면</b> 그 요소가 여백을 가져가고
     실제 본문은 카드 바닥에 붙는다(실측: 메시지 카드 끝의 hidden input 2개가 여백을 먹어
     안내문과 카드 바닥 간격이 1px 이 됐다).
     CSS 로 우회하지 않고 <b>hidden input 을 카드 밖에 두는 것</b>으로 해결했다 —
     보이지 않는 요소를 레이아웃 흐름 안에 두지 않는 편이 규칙이 단순해진다.
     카드 안에 hidden 요소를 새로 넣을 때는 이 점을 기억할 것. */
.c-sheet-card > *:last-child { padding-bottom: 26px; }
/* 본문이 여러 조각(특히 끝에 hidden 안내문)인 카드는 이 클래스로 한 번 감싼다.
   그래야 :last-child 가 "보이는 본문 묶음"을 가리킨다. 주문페이지 .c-order-card__body 와 같은 역할이며,
   좌우 패딩·상단 구분선·하단 여백은 위 3개 공통 규칙이 그대로 적용하므로 별도 속성이 필요 없다. */
/* head 아래 구분선 — 주문페이지 .c-order-card__divider (1px #EEF0F4) */
.c-sheet-card__head + * { border-top: 1px solid rgb(238, 240, 244); padding-top: 22px; }

/* 단계 번호 배지 — 주문페이지 `.c-order-card__step` 실측치와 동일하게 맞춘다.
   예전에는 26px 파란 채움 + 흰 글자였는데, 주문페이지는 30px 연한 파란 배경 + 진한 파란 글자다.
   같은 화면 흐름에서 배지 모양이 다르면 다른 제품처럼 보인다. */
.c-sheet-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 9px;
  background: rgb(238, 242, 254);
  color: rgb(43, 87, 206);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================
   상태 배지
   ============================================ */
/* 상태 표시 — 시안은 <b>색점 + 컬러 텍스트</b>이고 배경 박스가 없다.
   예전에는 회색 배경의 배지 박스라 시안과 가장 눈에 띄게 달랐다(허브·목록 양쪽).
   색은 상태별 텍스트 색(--sheet-*-tx)을 점과 글자에 함께 쓴다. */
.c-sheet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: transparent;
  /* 미등록 상태 코드가 와도 최소한 눈에 보이게 한다 — 색이 없으면 깨진 상태가 숨는다 */
  color: var(--sheet-neutral-tx);
}
.c-sheet-badge::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.c-sheet-badge--active    { color: var(--sheet-info-tx); }
.c-sheet-badge--paused    { color: var(--sheet-warn-tx); }
.c-sheet-badge--draft     { color: var(--sheet-neutral-tx); }
.c-sheet-badge--ended     { color: var(--sheet-neutral-tx); }
.c-sheet-badge--completed { color: var(--sheet-ok-tx); }
.c-sheet-badge--fail      { color: var(--sheet-danger-tx); }

/* 보조 캡션 (대기중 N건 / 환불 완료 등) */
.c-sheet-caption {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ============================================
   빈 상태
   ============================================ */
.c-sheet-empty {
  padding: var(--space-9) var(--space-5);
  border: 1px dashed var(--sheet-border);
  border-radius: var(--radius-lg);
  background: var(--sheet-fill);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-body-m);
}

/* ============================================
   안내 / 경고 배너
   ============================================ */
.c-sheet-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
  font-size: var(--text-body-m);
}
.c-sheet-notice--danger { background: var(--sheet-danger-bg); color: var(--sheet-danger-tx); }
.c-sheet-notice--warn   { background: var(--sheet-warn-bg);   color: var(--sheet-warn-tx); }
.c-sheet-notice__body { flex: 1 1 auto; min-width: 0; }
/* 화면5 복구 배너용 — 사유 라벨을 먼저 읽히게 하고 보조 설명은 한 단계 내린다.
   색은 상속(--danger/--warn 이 부모에서 내려온다)이라 여기서 다시 지정하지 않는다. */
.c-sheet-notice__title { margin: 0; font-size: var(--text-body-l); font-weight: 700; }
.c-sheet-notice__desc  { margin: var(--space-1) 0 0; font-size: var(--text-body-m); opacity: .85; }

/* ============================================
   박스모델 — 스코프 자기완결
   ⚠ 지우지 말 것: 이 화면의 공용 head 는 전역 공통 스타일(전역 `* { box-sizing: border-box }`)을 싣지 않는다.
   레거시 reset 이 있는 셸에 얹히든 아니든 .c-sheet 안의 폭 계산이 같도록 스코프 안에서만 border-box 를 건다.
   ============================================ */
.c-sheet,
.c-sheet *,
.c-sheet *::before,
.c-sheet *::after { box-sizing: border-box; }

/* ============================================
   버튼
   공통 .c-btn 은 전역 공통 스타일 소속이라 공용 head 의 로딩 대상이 아니고, 주문페이지 버튼은 파일 상단 설계 제약 3 에 따라 재사용 금지다.
   그래서 이 스코프에 필요한 최소 사양만 둔다(공통 디자인 규약 모양/크기 규약을 따름).
   ============================================ */
.c-sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-btn-rect);
  background: transparent;
  color: var(--color-mono-3);
  font-family: inherit;
  font-size: var(--text-body-m);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.c-sheet-btn:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
.c-sheet-btn--primary { background: var(--point-blue-1); color: var(--color-white); }
/* hover 는 --point-blue-4 가 아니라 --point-blue-text 를 쓴다. 4번은 보라 쪽으로 밝아져 눌린 느낌이 안 난다. */
.c-sheet-btn--primary:hover { background: var(--point-blue-text); color: var(--color-white); }
.c-sheet-btn--ghost { background: var(--color-white); border-color: var(--sheet-border); }
.c-sheet-btn--ghost:hover { border-color: var(--point-blue-2); color: var(--point-blue-text); }
.c-sheet-btn--lg { min-height: 44px; padding: 0 var(--space-7); font-size: var(--text-body-l); }
.c-sheet-btn--sm { min-height: 34px; padding: 0 var(--space-4); font-size: var(--text-caption); }
/* 공통 디자인 규약 disabled 상태 규약.
   <a> 에는 disabled 속성이 없으므로 aria-disabled 도 같이 받는다(클릭 차단은 스크립트가 한다).
   disabled 일 때 hover 로 색이 변하면 눌릴 것 같은 신호를 주므로 hover 를 원상태로 고정한다. */
.c-sheet-btn[disabled],
.c-sheet-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.c-sheet-btn--primary[disabled]:hover,
.c-sheet-btn--primary[aria-disabled="true"]:hover { background: var(--point-blue-1); }
.c-sheet-btn--ghost[disabled]:hover,
.c-sheet-btn--ghost[aria-disabled="true"]:hover { border-color: var(--sheet-border); color: var(--color-mono-3); }

/* ============================================
   필터탭 — 공통 디자인 규약 FilterChip 사양(비활성 흰 배경/회색 테두리, 활성 mono-1)
   ============================================ */
.c-sheet-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  /* 탭 6개가 좁은 폭에서 줄바꿈되면 목록 상단이 출렁인다 → 가로 스크롤로 고정 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.c-sheet-tabs::-webkit-scrollbar { display: none; }
/* 페이지 배경 — 주문페이지와 같은 회색면
   ------------------------------------------------------------
   캠페인 화면들은 흰 배경(`com_sub_section_wrap`) 위에 흰 카드가 놓여 있어
   카드 경계가 사라져 보였다. 주문페이지는 `.s-main` 에 주문 화면 배경 토큰(#f1f2f6)을 깔고
   그 위에 흰 카드를 얹는다(주문 화면 스타일). 시안도 회색 배경이다.
   같은 색을 쓰되, 캠페인 화면의 래퍼(`.c-sheet` 를 감싸는 섹션)에만 건다 —
   `.s-main` 을 직접 건드리면 자동화와 무관한 다른 화면까지 바뀐다.
   ⚠ 색은 주문페이지 토큰과 같은 값을 쓴다. 갈라지면 두 화면의 배경이 달라진다.
   ⚠ 배경은 <b>화면을 가득 채우는 조상</b>에 깔아야 한다.
     `.c-sheet` 에만 주면 콘텐츠 높이까지만 칠해져서 그 아래가 흰색으로 남는다
     (실측: 허브 화면 하단이 흰색으로 잘려 보였다).
     그래서 래퍼(`.com_sub_section_wrap`)에 칠하고 최소 높이를 준다. */
.com_sub_section_wrap:has(.c-sheet) {
  background: #f1f2f6;
  min-height: 100vh;
}
/* :has() 미지원 대비 — .c-sheet 도 같이 칠하되 아래쪽 여백을 넉넉히 줘서
   짧은 화면에서 흰 띠가 보이지 않게 한다. */
.c-sheet {
  background: #f1f2f6;
  padding-bottom: var(--space-10);
}

/* 목록 카드 — 시안은 필터탭 + 표 + 페이징을 하나의 흰 카드에 담는다.
 .c-sheet-card 기본형은 head 를 전제로 패딩 규칙이 짜여 있는데
 목록 카드에는 head 가 없다. 그래서 패딩을 직접 준다.
 ⚠ head 기준 규칙(`> *:not(head)` 좌우 30 / `:last-child` 아래 26 / `head + *` 위 22)이
 이 카드 안에서도 자식마다 걸리면 탭·표·페이징이 각각 들여쓰기된다 → 전부 0 으로 되돌린다. */
.c-sheet-card--list { padding: var(--space-5) var(--space-6) var(--space-4); }
.c-sheet-card--list > * { padding-left: 0; padding-right: 0; }
.c-sheet-card--list > *:last-child { padding-bottom: 0; }
.c-sheet-card--list > .c-sheet-tabs { border-top: 0; padding-top: 0; }

/* 밑줄 탭 — 시안 실측. 예전에는 알약 칩(활성=검정 채움)이었는데 시안과 아예 다른 물건이었다.
   시안: 배경·테두리 없는 텍스트 + 활성만 아래 2px 파란 밑줄 + 진한 글자.
   목록 표가 흰 카드 안으로 들어가면서 탭도 그 카드 상단에 얹히는 구조라, 칩을 두면 카드 안에
   또 다른 박스가 겹쳐 보인다. */
.c-sheet-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  height: 38px;
  padding: 0 var(--space-1);
  margin-right: var(--space-5);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-body-m);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.c-sheet-tabs__item:hover { color: var(--color-text-strong); }
.c-sheet-tabs__item.is-active {
  border-bottom-color: var(--point-blue-1);
  color: var(--color-text-strong);
  font-weight: 700;
}
.c-sheet-tabs__count { font-size: var(--text-caption); font-weight: 700; color: var(--color-text-muted); }
.c-sheet-tabs__item.is-active .c-sheet-tabs__count { color: var(--point-blue-text); }

/* ============================================
 목록 — 카드형 행 ( .card_row 하우스 패턴을 이 스코프로 가져온 것)
 테이블을 쓰지 않는 이유: 모바일에서 열이 무너지는데 이 화면 링크는 알림톡으로 폰에서 열린다.
 ============================================ */
.c-sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 표 컬럼 정의 — 시안(01) 실측: 연동명 212 / 시트명 197 / 상품명 182 / 최근발송 167 / 상태 140 / 케밥 32.
   고정 px 대신 비율(fr)로 두어 컨테이너 폭이 달라져도 열 비율이 유지되게 한다.
   케밥만 고정 32px. */
.c-sheet-list,
.c-sheet-thead { --sheet-cols: 212fr 197fr 182fr 167fr 140fr 32px; }

/* 표 머리 — 값만 보이는 셀들이 무엇인지 알려준다. PC 에서만 쓴다(좁으면 카드형으로 되돌리므로). */
.c-sheet-thead {
  display: none;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.c-sheet-row {
  --sheet-row-accent: var(--sheet-border);   /* 상태 modifier 가 덮어쓴다 */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-left: calc(var(--space-5) + 3px);  /* 좌측 레일(3px) 만큼 본문을 민다 */
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* 셀 — 좁은 폭에서는 "라벨: 값" 카드형, PC 에서는 표의 한 칸이 된다. */
.c-sheet-row__cell { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.c-sheet-row__label { flex: 0 0 auto; font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-row__value { color: var(--color-mono-3); overflow-wrap: anywhere; }
.c-sheet-row__value--muted { color: var(--color-text-muted); }
.c-sheet-row__waiting { font-size: var(--text-caption); color: var(--point-blue-text); font-weight: 700; }
.c-sheet-row__cell--status { flex-wrap: wrap; }
.c-sheet-row__cell--kebab { justify-content: flex-end; }
/* 좌측 3px 상태 레일 — 목록을 훑을 때 배지를 읽기 전에 상태가 먼저 잡힌다 */
.c-sheet-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--sheet-row-accent);
}
.c-sheet-row:hover { border-color: var(--point-blue-2); box-shadow: var(--shadow-card-soft); }
.c-sheet-row--active    { --sheet-row-accent: var(--point-blue-1); }
.c-sheet-row--paused    { --sheet-row-accent: var(--sheet-warn-tx); }
.c-sheet-row--draft     { --sheet-row-accent: var(--color-mono-6); }
.c-sheet-row--ended     { --sheet-row-accent: var(--color-mono-6); }
.c-sheet-row--completed { --sheet-row-accent: var(--sheet-ok-tx); }
.c-sheet-row__body { flex: 1 1 auto; min-width: 0; }
.c-sheet-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.c-sheet-row__name {
  font-size: var(--text-body-l);
  font-weight: 700;
  color: var(--color-text-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.c-sheet-row__name:hover { color: var(--point-blue-text); text-decoration: underline; }
.c-sheet-row__reason { font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}
.c-sheet-row__meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-body-m);
}
.c-sheet-row__meta-label { flex: 0 0 auto; font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-row__meta-value { color: var(--color-mono-3); overflow-wrap: anywhere; }
.c-sheet-row__meta-value--muted { color: var(--color-text-muted); }
.c-sheet-row__meta-value--point { color: var(--point-blue-text); font-weight: 700; }
.c-sheet-row__aside { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* ============================================
   행 우측 kebab 드롭다운 — CSS 로 열고 닫고, JS 는 is-open 토글만 한다
   ============================================ */
.c-sheet-kebab { position: relative; }
.c-sheet-kebab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-body-l);
  line-height: 1;
  cursor: pointer;
}
.c-sheet-kebab__btn:hover { border-color: var(--sheet-border); background: var(--sheet-fill); color: var(--color-mono-1); }
.c-sheet-kebab__btn:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
.c-sheet-kebab__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 132px;
  padding: var(--space-1);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-overlay);
  z-index: var(--z-dropdown);
}
.c-sheet-kebab.is-open .c-sheet-kebab__menu { display: block; }
.c-sheet-kebab__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-mono-3);
  font-family: inherit;
  font-size: var(--text-body-m);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.c-sheet-kebab__item:hover { background: var(--sheet-fill); color: var(--point-blue-text); }
.c-sheet-kebab__item--danger:hover { background: var(--sheet-danger-bg); color: var(--sheet-danger-tx); }

/* ============================================
   온보딩 히어로 — 연동이 "아예" 없는 신규 사용자에게만 나온다.
   필터 결과 0건(.c-sheet-empty)과 다른 화면이므로 컴포넌트도 분리한다.
   ============================================ */
.c-sheet-hero {
  padding: var(--space-11) var(--space-9);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-xl);
  /* 우상단에서 옅게 번지는 브랜드 톤 — 단색 카드가 온보딩에서 너무 사무적이라 깊이만 준다 */
  background:
    radial-gradient(120% 140% at 100% 0%, var(--sheet-info-bg) 0%, transparent 58%),
    var(--color-white);
}
.c-sheet-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--sheet-info-bg);
  color: var(--sheet-info-tx);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: .02em;
}
.c-sheet-hero__title {
  margin: var(--space-4) 0 0;
  font-size: clamp(1.5rem, 1rem + 1.6vw, var(--text-heading-2));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}
.c-sheet-hero__desc {
  margin: var(--space-3) 0 0;
  max-width: 46rem;
  font-size: var(--text-body-l);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.c-sheet-hero__actions { margin-top: var(--space-7); }
.c-sheet-hero__note { margin: var(--space-3) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }

/* 3단계 설명 */
.c-sheet-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-9) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--sheet-border-soft);
  list-style: none;
}
.c-sheet-steps__item { min-width: 0; }
.c-sheet-steps__num {
  display: block;
  font-size: var(--text-heading-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--point-blue-2);
}
.c-sheet-steps__title { margin: var(--space-3) 0 0; font-size: var(--text-body-l); font-weight: 700; color: var(--color-text-strong); }
.c-sheet-steps__desc { margin: var(--space-2) 0 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-muted); }

/* 활용 예시 3항목 (.c-sheet-card 안에 들어간다) */
.c-sheet-usecase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-sheet-usecase__item { min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--sheet-fill); }
.c-sheet-usecase__title { margin: 0; font-size: var(--text-body-m); font-weight: 700; color: var(--color-text-strong); }
.c-sheet-usecase__desc { margin: var(--space-2) 0 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-muted); }

/* 페이지네이션 래퍼. 링크 자체 스타일은 아래 "시안 페이지네이션" 에서 이 스코프 안에서만 덮는다
   (레거시 .pagination 정의는 common.css 가 아니라 공용 목록 스타일에 있다).
   시안의 페이지네이션 행은 `padding-top:20px` 이므로 래퍼 여백을 그 값으로 맞춘다. */
.c-sheet-paging { margin-top: var(--space-5); }

/* ============================================
   기능 아이템 (화면1 자동화 허브) — .c-sheet-card 안에 들어가는 행.
   목록의 .c-sheet-row 를 재사용하지 않는 이유: 그쪽은 테두리 + 상태 레일을 가진 독립 카드라
   카드 안에 넣으면 카드 속 카드가 된다. 여기는 구분선만 있는 카드 내부 행이다.
   ============================================ */
.c-sheet-feature {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.c-sheet-feature + .c-sheet-feature {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sheet-border-soft);
}
/* a(링크 행) / div(준비 중 행) 양쪽으로 쓰이므로 링크 기본값을 여기서 지운다 */
.c-sheet-feature__body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.c-sheet-feature__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.c-sheet-feature__name {
  margin: 0;
  font-size: var(--text-body-l);
  font-weight: 700;
  color: var(--color-text-strong);
}
a.c-sheet-feature__body:hover .c-sheet-feature__name { color: var(--point-blue-text); text-decoration: underline; }
.c-sheet-feature__desc { margin: var(--space-2) 0 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-muted); }
.c-sheet-feature__aside { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* 준비 중 행 — 링크도 버튼도 없다. 눌리는 것처럼 보이면 안 되므로 제목 굵기·색을 한 단계 내린다.
   설명문까지 더 흐리게 하면 대비가 무너지므로 제목만 내린다(회색 배지가 이미 상태를 말한다). */
.c-sheet-feature--soon { cursor: default; }
.c-sheet-feature--soon .c-sheet-feature__name { color: var(--color-mono-4); font-weight: 600; }

/* 통계 쌍 — 허브 우측. 값이 라벨보다 커야 훑을 때 숫자가 먼저 들어온다. */
.c-sheet-stats { display: flex; align-items: flex-start; gap: var(--space-7); }
.c-sheet-stat { text-align: right; }
.c-sheet-stat__label { display: block; font-size: var(--text-caption); color: var(--color-text-muted); white-space: nowrap; }
.c-sheet-stat__value {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-heading-3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* ============================================
   폼 프리미티브 (화면3 마법사)
   이 스코프에 폼 요소가 하나도 없어서 여기서 처음 정의한다.
   레거시 .input_field / .com_select_wrap 을 재사용하지 않는 이유: 그쪽은 공용 목록 스타일·마이페이지 스타일 의
   전역 규칙에 묶여 있어 이 화면만 고치려 해도 다른 화면이 같이 움직인다.
   ============================================ */

/* 마법사 상단 eyebrow ("1 / 2 단계") — 페이지 셸 레벨이라 .c-sheet__ 네임스페이스에 둔다 */
.c-sheet__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sheet-info-tx);
}

/* 조건부 영역(직접 지정 날짜 / 지급조건 ON·OFF)은 native hidden 으로 접었다 편다.
   hidden 은 display:none 이지만 아래 flex/grid 규칙이 더 구체적이라 스코프 안에서 한 번 이겨준다.
   class 대신 hidden 속성을 쓰는 건 보조기술에서도 같이 사라지게 하기 위해서다. */
.c-sheet [hidden] { display: none !important; }

.c-sheet-field + .c-sheet-field { margin-top: var(--space-5); }
.c-sheet-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-label-m);
  font-weight: 700;
  color: var(--color-text-strong);
}
.c-sheet-field__req { color: var(--sheet-danger-tx); }
.c-sheet-field__desc { margin: var(--space-1) 0 0; font-size: var(--text-body-m); color: var(--color-text-muted); }
.c-sheet-field__control { margin-top: var(--space-2); }
.c-sheet-field__help { margin: var(--space-2) 0 0; font-size: var(--text-caption); line-height: 1.6; color: var(--color-text-muted); }
.c-sheet-link { color: var(--point-blue-text); text-decoration: underline; }

.c-sheet-card__desc { margin: var(--space-1) 0 0; font-size: var(--text-body-m); color: var(--color-text-muted); }

/* ⚠ 입력칸도 주문페이지(`.c-order-msg__input` 등) 실측치에 맞춘다.
   주문페이지: height 44 / radius 11 / padding 0 14 / border 1px #D9DDE6 / 14px 600 #161C28
   예전 값(min-height 40 / radius --radius-md / border --sheet-border)은 주문페이지와 달라
   같은 폼인데 입력칸 모양이 달랐다. */
.c-sheet-input,
.c-sheet-select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(217, 221, 230);
  border-radius: 11px;
  background: var(--color-white);
  color: rgb(22, 28, 40);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
/* 마법사(1단계) 전용 — 시안 기준 컨텐츠 폭 856 중앙정렬.
   다른 화면은 컨테이너 폭을 그대로 쓴다(시안 1096). 이 화면만 좁다.
   ⚠ 태블릿 이하에서는 컨테이너가 이미 856 보다 좁으므로 max-width 가 자연히 무력화된다 —
      별도 미디어쿼리를 추가하지 않는다. */
.c-sheet--narrow {
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
}

/* ⚠ 전역 리셋 이 `input[type="text"|"password"|"tel"|"email"]` 에 padding-left:3px 를
   (0,1,1) 로 준다. 위 `.c-sheet-input` 은 (0,1,0) 이라 <b>text 계열만</b> 좌패딩을 뺏긴다
   (실측: text 3px / number·date 12px — 같은 폼에서 입력칸이 어긋나 보였다).
   type 을 명시해 (0,2,1) 로 올려 되찾는다. */
.c-sheet-input[type="text"],
.c-sheet-input[type="password"],
.c-sheet-input[type="tel"],
.c-sheet-input[type="email"] { padding-left: var(--space-3); }

.c-sheet-input:focus,
.c-sheet-select:focus { border-color: var(--point-blue-1); outline: 2px solid var(--point-blue-1); outline-offset: -1px; }
.c-sheet-input:disabled,
.c-sheet-select:disabled { background: var(--sheet-fill); color: var(--color-text-muted); cursor: not-allowed; }
/* 숫자·날짜처럼 짧은 값은 전폭이 오히려 읽기 나쁘다 */
.c-sheet-input--sm { max-width: 200px; }
/* 컬럼 선택 select — 시안 실측 280px. 값이 'A/B/C 컬럼' 처럼 짧아 전폭(794px)으로 늘리면
   빈 공간만 길어지고 시안과도 어긋난다(실측: 시안 280 vs 우리 794). */
.c-sheet-select--col { max-width: 280px; }

.c-sheet-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.c-sheet-grid2 .c-sheet-field { margin-top: 0; }

/* 세그먼트 선택 (연동 기간) — 필터탭(.c-sheet-tabs)과 분리한다.
   저쪽은 '지금 보고 있는 목록'이라 검정 활성이고, 이쪽은 '고른 값'이라 파란 활성이다. */
.c-sheet-seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-sheet-seg__item {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-mono-4);
  font-family: inherit;
  font-size: var(--text-body-m);
  cursor: pointer;
}
.c-sheet-seg__item:hover { border-color: var(--point-blue-2); color: var(--point-blue-text); }
.c-sheet-seg__item:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
.c-sheet-seg__item.is-active {
  border-color: var(--point-blue-1);
  background: var(--sheet-info-bg);
  color: var(--sheet-info-tx);
  font-weight: 700;
}

/* 연결 상태 카드(구글 계정 / 선택된 시트) — 허브 기능 행과 구조가 같아 modifier 로 확장한다 */
.c-sheet-feature--boxed {
  padding: var(--space-4);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--sheet-fill);
}
/* boxed 행을 목록처럼 연달아 쌓을 때(문구함 목록) — 테두리가 이미 경계라 위 구분선은 겹친다.
   .c-sheet-feature + .c-sheet-feature 의 border-top/padding-top 을 이 조합에서만 걷어낸다. */
.c-sheet-feature--boxed + .c-sheet-feature--boxed {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 0;
}
.c-sheet-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--sheet-ok-bg);
  color: var(--sheet-ok-tx);
}

/* 필드 안에 들어가는 빈 상태 — .c-sheet-empty 기본 여백(48px)은 폼 한 칸에 쓰기엔 너무 크다 */
.c-sheet-empty--sm { padding: var(--space-5) var(--space-4); font-size: var(--text-body-m); }

/* 표 — 이 스코프에서 <table> 을 쓰는 자리는 두 곳뿐이다.
   ① 화면3 시트 미리보기(.c-sheet-preview) ② 화면5 대기중 목록·발송 이력(.c-sheet-tablewrap).
   둘 다 컬럼×행 자체가 데이터라 다른 마크업으로 바꾸면 의미가 사라진다(목록 화면과 다른 이유).
   생김새가 같아야 하므로 선택자만 나눠 달고 선언은 하나로 공유한다 — 복제하면 언젠가 갈라진다. */
.c-sheet-preview,
.c-sheet-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
}
.c-sheet-preview__table,
.c-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-m);
  white-space: nowrap;
}
.c-sheet-preview__table th,
.c-sheet-preview__table td,
.c-sheet-table th,
.c-sheet-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--sheet-border-soft);
  text-align: left;
}
.c-sheet-preview__table thead th,
.c-sheet-table thead th {
  background: var(--sheet-fill);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: 700;
}
.c-sheet-preview__table tbody tr:last-child td,
.c-sheet-table tbody tr:last-child td { border-bottom: 0; }

/* 토글 (지급조건 사용) — input 은 시각적으로만 감추고 접근성 트리에는 남긴다 */
.c-sheet-switch { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
/* ⚠ 셀렉터에 [type="checkbox"] 를 반드시 붙인다.
   전역 공통 스타일이 `input[type="checkbox"]` 로 <b>전역</b> 커스텀 외형을 준다
   (-webkit-appearance:none / position:relative / width:1.625em / ::before 아이콘).
   명시도가 (0,1,1) 이라 클래스 하나짜리 (0,1,0) 로는 이기지 못하고,
   그러면 토글 옆에 네이티브 체크박스가 하나 더 그려진다(실측된 증상).
   [type] 을 더해 (0,2,1) 로 올려야 숨김이 실제로 먹는다. */
.c-sheet-switch__input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
/* 전역 규칙이 붙이는 아이콘도 함께 지운다 — 1px 로 잘려도 남는 잔상 방지. */
.c-sheet-switch__input[type="checkbox"]::before { content: none; }
.c-sheet-switch__track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-mono-6);
  transition: background-color .15s ease;
}
.c-sheet-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.c-sheet-switch__input:checked + .c-sheet-switch__track { background: var(--point-blue-1); }
.c-sheet-switch__input:checked + .c-sheet-switch__track::after { transform: translateX(20px); }
.c-sheet-switch__input:focus-visible + .c-sheet-switch__track { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }

/* 라디오 — 네이티브 인디케이터를 그대로 쓴다. 커스텀 아트를 그리면 상태 3종(hover/focus/disabled)을
   전부 다시 만들어야 하는데 이 화면에 그만한 값이 없다. */
.c-sheet-radios { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.c-sheet-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-m);
  color: var(--color-mono-3);
  cursor: pointer;
}

/* 하단 액션 바 */
.c-sheet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--sheet-gap);
  padding-top: var(--space-5);
  border-top: 1px solid var(--sheet-border);
}
.c-sheet-actions__note { flex: 1 1 auto; min-width: 0; font-size: var(--text-caption); line-height: 1.6; color: var(--color-text-muted); }
.c-sheet-actions__btns { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* ============================================
   화면4(마법사 2단계) 추가 프리미티브
   ============================================ */

/* 필수 항목 요약 — 입력이 아니라 진행 상황 표시다. 그래서 폼 필드가 아니라 목록으로 만든다. */
.c-sheet-summary { margin: 0; padding: 0; list-style: none; }
.c-sheet-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.c-sheet-summary__row + .c-sheet-summary__row { border-top: 1px solid var(--sheet-border-soft); }
.c-sheet-summary__label { flex: 0 0 auto; font-size: var(--text-body-m); color: var(--color-text-muted); }
.c-sheet-summary__value { min-width: 0; font-size: var(--text-body-m); color: var(--color-text-muted); text-align: right; overflow-wrap: anywhere; }
.c-sheet-summary__value--done { color: var(--color-text-strong); font-weight: 700; }

/* 라디오 카드 (발송방식 / 전송시간 / 한도 초과 시) — 설명이 붙어야 하는 선택지라
   .c-sheet-seg(설명 없는 알약)나 .c-sheet-radio(한 줄 라벨)로는 안 된다. */
.c-sheet-optcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.c-sheet-optcard {
  position: relative;
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.c-sheet-optcard:hover { border-color: var(--point-blue-2); }
.c-sheet-optcard.is-selected { border-color: var(--point-blue-1); background: var(--sheet-info-bg); }
.c-sheet-optcard__input { position: absolute; top: var(--space-4); right: var(--space-4); margin: 0; }
.c-sheet-optcard__title { display: block; padding-right: var(--space-6); font-size: var(--text-body-m); font-weight: 700; color: var(--color-text-strong); }
.c-sheet-optcard__desc { display: block; margin-top: var(--space-1); font-size: var(--text-caption); line-height: 1.5; color: var(--color-text-muted); }

/* .c-sheet-empty 안에 CTA 를 하나 놓을 때 (상품 미선택 드롭존) */
.c-sheet-empty__action { margin-top: var(--space-4); }

.c-sheet-textarea {
  width: 100%;
  min-height: 140px;
  padding: var(--space-3);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-mono-1);
  font-family: inherit;
  font-size: var(--text-body-m);
  line-height: 1.6;
  resize: vertical;
}
.c-sheet-textarea:focus { border-color: var(--point-blue-1); outline: 2px solid var(--point-blue-1); outline-offset: -1px; }

/* 바이트 카운터 — 초과는 '경고만'이다(주문페이지와 동일). 색만 바뀌고 아무것도 막지 않는다. */
.c-sheet-counter { margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); text-align: right; }
.c-sheet-counter.is-over { color: var(--sheet-danger-tx); font-weight: 700; }

/* 인라인 오류 안내 (예산 등) */
.c-sheet-hint { margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--sheet-danger-tx); }

/* 값 + 단위 + 버튼을 한 줄에 */
.c-sheet-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.c-sheet-unit { font-size: var(--text-body-m); color: var(--color-text-muted); }

.c-sheet-divider { height: 1px; margin: var(--space-6) 0; border: 0; background: var(--sheet-border-soft); }

/* 약관 체크박스 — 네이티브 인디케이터 사용(라디오와 같은 이유) */
.c-sheet-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.c-sheet-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-m);
  line-height: 1.5;
  color: var(--color-mono-3);
  cursor: pointer;
}
/* '전체 동의'는 나머지를 지배하므로 한 단계 강조하고 아래와 선으로 끊는다 */
.c-sheet-check--all {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--sheet-border-soft);
  font-weight: 700;
  color: var(--color-text-strong);
}

/* ============================================
   화면5(연동 대시보드) 메타 4열
   .c-sheet-stat 을 쓰지 않는 이유: 저건 큰 숫자용(22px/800, 우측정렬)이라
   '시트명'·'상품명' 같은 텍스트가 들어가면 카드가 숫자 판처럼 보인다.
   ============================================ */
.c-sheet-metagrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--sheet-border-soft);
}
.c-sheet-metagrid__item { min-width: 0; }
.c-sheet-metagrid__label { display: block; font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-metagrid__value {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-body-m);
  font-weight: 700;
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
.c-sheet-metagrid__value--muted { font-weight: 400; color: var(--color-text-muted); }

/* ============================================
   상품 선택 모달 (공용 상품 선택 모달)
   ⚠ 이 fragment 를 include 하는 페이지는 automation.css 를 반드시 link 해야 한다.
     ai-campaign-modal 처럼 전용 css 파일을 두지 않고 여기 넣은 이유는 이 스코프 밖으로
     새 전역 파일을 늘리지 않기로 했기 때문이다.
   모달 루트가 .c-sheet 클래스를 같이 달고 있어야 --sheet-* 로컬 토큰이 내려온다.
   ============================================ */
.c-sheet-picker {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);       /* 시안 24px = --space-6 정확히 일치 */
}
/* display:flex 가 UA 의 [hidden]{display:none} 을 이기므로 루트는 따로 꺼준다
   (.c-sheet [hidden] 규칙은 자손용이라 루트 자신에는 안 걸린다) */
.c-sheet-picker[hidden] { display: none; }
/* 시안 백드롭은 순검정이 아니라 남색이 섞인 rgba(20,22,30,.55) 다 */
.c-sheet-picker__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, 0.55); }
.c-sheet-picker__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 시안 width:min(968px,96vw) — 96vw 쪽은 부모(.c-sheet-picker)의 padding 24 가 대신한다 */
  max-width: 968px;
  /* 시안은 max-height 가 아니라 <b>고정 높이</b> min(860px,92vh) 다.
     상품 수에 따라 모달 높이가 출렁이면 푸터의 '선택 완료' 버튼 위치가 매번 달라진다. */
  height: min(860px, 92vh);
  border-radius: 20px;                             /* 시안 20px. --radius-xl 은 16px 이라 대응 토큰이 없다 */
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);     /* 시안. --shadow-floating(0 12px 32px/.16)보다 깊다 */
  overflow: hidden;
}
/* 시안 헤더에는 아래 구분선이 없다 — 이 모달의 가로선은 정렬·가격 줄 아래 하나뿐이다 */
.c-sheet-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7) var(--space-5);   /* 시안 24 32 20 — 토큰 정확히 일치 */
}
/* 시안은 제목과 보조문구가 같은 줄이다(보조문구 margin-left:10px).
   좁은 폭에서는 wrap 으로 자연스럽게 두 줄이 된다. */
.c-sheet-picker__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);           /* 시안 10px ≈ --space-3(12px) */
  min-width: 0;
}
.c-sheet-picker__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--color-text-strong); }
/* 시안 보조문구 색 #999999 는 흰 배경에서 2.85:1 로 AA(4.5:1) 미달 → --color-text-muted(4.83:1) */
.c-sheet-picker__desc { margin: 0; font-size: var(--text-body-s); color: var(--color-text-muted); }
.c-sheet-picker__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-img);   /* 시안 10px = --radius-img 정확히 일치 */
  background: var(--sheet-fill);      /* 시안 #F9F9F9 ≈ --sheet-fill(#FAFBFC) */
  color: var(--color-mono-4);         /* 시안 #666666 = --color-mono-4 정확히 일치 */
  font-family: inherit;
  font-size: 1.125rem;                /* 시안 18px */
  line-height: 1;
  cursor: pointer;
}
/* 기본이 이미 회색면이라 hover 에서 같은 회색을 깔면 반응이 없어 보인다 → 한 단계 진하게 */
.c-sheet-picker__close:hover { background: var(--color-mono-7); color: var(--color-mono-1); }
.c-sheet-picker__close:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }

/* 필터 영역은 스크롤에서 제외 — 상품을 훑는 동안 조건이 화면 밖으로 사라지면 안 된다.
   시안은 요소마다 아래 여백이 다르다(검색 16 / 칩 18 / 정렬·가격 16 / RM 안내 12).
   gap 하나로는 표현할 수 없어 자식별 margin 으로 준다. */
.c-sheet-picker__filters {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-7);
}
/* 시안 검색창 = 회색으로 채운 한 덩어리(배경 #F9F9F9 / 테두리 #EEEEEE / radius 10 / padding 13 16)이고
   아이콘도 absolute 가 아니라 같은 flex 줄의 형제다.
   ⚠ 공용 .c-sheet-input 정의는 건드리지 않는다 — 마법사 1·3단계 입력칸이 같은 클래스를 쓴다.
      여기서는 .c-sheet-picker__search 안쪽으로만 덮는다. */
.c-sheet-picker__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);                    /* 시안 10px ≈ --space-3 */
  margin-bottom: var(--space-4);          /* 시안 16px */
  padding: 13px var(--space-4);           /* 시안 13px 16px */
  border: 1px solid var(--color-mono-7);  /* 시안 #EEEEEE = --color-mono-7 정확히 일치 */
  border-radius: var(--radius-img);       /* 시안 10px */
  background: var(--sheet-fill);
}
/* 테두리가 wrapper 로 옮겨갔으므로 포커스 표시도 wrapper 가 받는다 */
.c-sheet-picker__search:focus-within { border-color: var(--point-blue-1); outline: 2px solid var(--point-blue-1); outline-offset: -1px; }
.c-sheet-picker__search .c-sheet-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;              /* 시안 검색 입력은 굵기 지정이 없다(기본 400) */
  line-height: 1.4;
}
.c-sheet-picker__search .c-sheet-input:focus { border-color: transparent; outline: 0; }
.c-sheet-picker__search-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* 시안 칩: padding 9 15 / 13px / 600.
   알약 모양과 활성 색은 공용 .c-sheet-seg 를 그대로 쓴다 — 마법사 1단계('연동 기간')가 같은
   클래스라 공용 정의는 손대지 않고 이 모달 안쪽으로만 치수를 덮는다. */
.c-sheet-picker__filters .c-sheet-seg { margin-bottom: var(--space-5); }   /* 시안 18px ≈ --space-5(20px) */
.c-sheet-picker__filters .c-sheet-seg__item {
  min-height: 0;
  padding: 9px 15px;
  font-size: var(--text-body-s);
  font-weight: 600;
}
/* 공용 .c-sheet-seg__item.is-active 는 이 파일 <b>앞쪽</b>에 같은 명시도로 있어 순서로 밀린다 →
   활성 굵기는 한 단계 더 좁혀 못박는다(그러지 않으면 활성 칩이 600 으로 눌린다). */
.c-sheet-picker__filters .c-sheet-seg .c-sheet-seg__item.is-active { font-weight: 700; }
/* ---- 정렬 + 가격 한 줄 ----
   왜 한 줄인가: 정렬이 위 카테고리 칩(.c-sheet-seg)과 <b>같은 알약 모양으로 두 줄째</b> 쌓여 있어서
   사용자가 두 줄을 모두 카테고리로 읽고 "정렬 기능이 아예 없다"고 제보했다.
   모양이 같으면 종류도 같다고 읽힌다 → 정렬은 텍스트 링크 모양으로 바꾸고 가격을 같은 줄 오른쪽에 붙인다.
   ⚠ .c-sheet-seg 규칙 자체는 손대지 않는다 — 마법사 1단계(연동 기간)가 같은 클래스를 쓴다.

   구분선은 <b>여기 하나</b>만 있다.
   예전에는 .c-sheet-picker__filters 의 border-bottom 이 그 역할을 했는데, 시안에서 선은
   정렬·가격 줄 <b>바로 아래 / RM 안내 위</b>에 있다. RM 안내가 필터 블록 안으로 들어오면서
   filters 의 아래쪽 선은 위치가 어긋나므로(안내 아래로 내려간다) 선을 이 줄로 옮기고
   filters 쪽 border-bottom 은 제거했다. 두 곳에 다 넣으면 16px 간격으로 선이 두 줄 생긴다. */
.c-sheet-picker__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;               /* 좁아지면 가격 묶음이 다음 줄로 — 가로 스크롤을 만들지 않는다 */
  gap: var(--space-3);           /* 시안 12px = --space-3 */
  margin-bottom: var(--space-4); /* 시안 16px */
  padding-bottom: var(--space-4);/* 시안 14px ≈ --space-4(16px) */
  border-bottom: 1px solid var(--sheet-border-soft);   /* 시안 #F2F2F2 ≈ --sheet-border-soft(#EFF1F4) */
}

.c-sheet-picker__sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);           /* 시안 16px = --space-4 */
  min-width: 0;
}
/* 텍스트 링크처럼 보이지만 요소는 <button> 이다(키보드·aria-pressed 유지).
   그래서 버튼 기본 장식(테두리·배경·패딩)을 여기서 전부 지운다 — .c-sheet-btn 을 상속하지 않으므로
   지울 대상은 UA 기본값이다. */
.c-sheet-picker__sort-item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;              /* 클릭 영역 확보. 글자 높이(약 20px)만으로는 조준이 어렵다 */
  padding: 0;
  border: 0;
  background: none;
  /* 시안 비활성색 #999999 는 흰 배경에서 명암비 2.85:1 로 AA(4.5:1) 미달이라 그대로 쓰지 않는다.
     13px 본문 크기에서는 예외가 없다 → 같은 역할의 토큰 --color-text-muted(#6B7280, 4.87:1)로 매핑. */
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-body-s); /* 시안 13px ≈ --text-body-s(13.5px). 13px 토큰은 없다 */
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.c-sheet-picker__sort-item:hover { color: var(--color-mono-1); }
/* 패딩이 0 이라 outline 이 글자에 붙는다 → offset 으로 띄운다 */
.c-sheet-picker__sort-item:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 3px; }
/* ⚠ 활성 클래스는 반드시 `is-active` 다 — 스크립트의 markActive() 가
   classList.toggle('is-active', on) + aria-pressed 로 붙인다(fragment 인라인 JS).
   시안 활성색 #222222 = --color-mono-1 정확히 일치. */
.c-sheet-picker__sort-item.is-active { color: var(--color-mono-1); font-weight: 700; }

/* ---- 가격 묶음 ----
   시안에서 입력칸과 '적용' 버튼은 <b>같은 높이·같은 radius·같은 글자 크기</b>다.
   우리 쪽은 입력칸이 .c-sheet-input(min-height 44 / radius 11 / 14px)에서,
   버튼이 .c-sheet-btn--sm(min-height 34 / radius 10 / 12px)에서 각각 치수를 받아
   나란히 놓인 두 컨트롤이 10px 어긋나 있었다.
   근본 원인은 "옆에 붙는 두 컨트롤이 서로 다른 기반 클래스에서 치수를 받는 것"이므로,
   둘이 <b>같은 변수</b>를 읽게 만들어 구조적으로 어긋날 수 없게 한다. */
.c-sheet-picker__price {
  /* 시안 계산 높이(테두리1 + padding8 + 콘텐츠16 + padding8 + 테두리1) = 34px 이고,
     이는 .c-sheet-btn--sm 의 기본 높이와 정확히 같다 → 버튼은 그대로 두고 입력칸을 내린다. */
  --sheet-price-h: 34px;
  --sheet-price-radius: var(--radius-md);   /* 시안 8px = --radius-md 정확히 일치 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);           /* 시안 8px = --space-2 */
  flex-shrink: 0;                /* 시안 flex-shrink:0 — 정렬 글자가 늘어도 입력칸이 찌그러지지 않게 */
}
/* 시안 라벨색 #161C28 은 토큰에 없다. 이 파일이 강조 라벨에 쓰는 --color-text-strong(#0E1116)으로
   매핑한다(둘 다 거의 검정이라 차이가 보이지 않고, 라벨 색이 화면 안에서 갈라지지 않는다). */
.c-sheet-picker__price-label {
  font-size: var(--text-body-s);
  font-weight: 700;
  color: var(--color-text-strong);
  white-space: nowrap;
}
/* 높이·radius·글자 크기 3종은 두 컨트롤이 같은 선언에서 받는다.
   ⚠ min-height 도 반드시 같이 덮어야 한다 — .c-sheet-input 의 min-height:44px 가 height:34px 를 이긴다.
      (0,2,0) 이라 공용 .c-sheet-input(0,1,0) / .c-sheet-btn--sm(0,1,0) 보다 우선한다. */
.c-sheet-picker__price .c-sheet-input,
.c-sheet-picker__price .c-sheet-btn {
  height: var(--sheet-price-h);
  min-height: var(--sheet-price-h);
  border-radius: var(--sheet-price-radius);
  font-size: var(--text-body-s);      /* 시안 13px ≈ --text-body-s(13.5px). 13px 토큰은 없다 */
}
/* 시안 입력칸은 76px 지만 그 폭은 콘텐츠가 56px 뿐이라 7자리 금액(1000000)과 number 스피너가 잘린다.
   글자가 13.5px 으로 작아졌으니 88px 로 줄일 수 있을 줄 알았는데 <b>실측에서 잘렸다</b>
   (포커스로 스피너가 뜬 상태에서 scrollWidth 93 > clientWidth 86).
   필요한 콘텐츠 폭이 93px 이므로 테두리 2px 를 더해 96px 로 둔다(clientWidth 94 ≥ 93, 실측 확인). */
.c-sheet-picker__price .c-sheet-input {
  width: 96px;
  min-width: 0;
  padding: 0 10px;                    /* 시안 좌우 10px */
}
/* 시안은 '적용'을 파란 외곽선 버튼으로 준다(#4B75F2 = --point-blue-1 정확히 일치).
   글자색만 --point-blue-text(#2B57CE)로 바꾼다 — tokens.css 가 "텍스트·소형볼드·링크는 AA 변이를 쓰고
   배경·장식은 --point-blue-1 유지"로 못박아 뒀고, #4B75F2 글자는 흰 배경에서 4.12:1 로 AA 미달이다. */
.c-sheet-picker__price .c-sheet-btn--ghost { border-color: var(--point-blue-1); color: var(--point-blue-text); }
/* 기본이 이미 파란 테두리라, 공용 ghost hover(테두리를 --point-blue-2 로 <b>밝게</b>)를 그대로 두면
   올릴 때 오히려 흐려진다 → 테두리는 고정하고 배경만 채운다. */
.c-sheet-picker__price .c-sheet-btn--ghost:hover { border-color: var(--point-blue-1); background: var(--sheet-info-bg); }
/* 한 줄 안에서 글자 크기가 세 종류면 줄이 정돈되지 않는다 → 단위도 라벨·정렬과 같은 13.5px.
   시안 '~'·'원' 색 #666666 = --color-mono-4 와 <b>정확히 일치</b>하므로 그 토큰을 쓴다
   (5.74:1 로 AA 통과 → 굳이 다른 토큰으로 바꿀 이유가 없다). */
.c-sheet-picker__price-unit { font-size: var(--text-body-s); color: var(--color-mono-4); }
/* 가격 입력 오류 문구는 정렬·가격 줄 <b>안</b>에 둔다(구분선 위).
   밖에 두면 구분선 아래로 밀려 가격과 무관한 안내처럼 읽힌다.
   flex-basis 100% 라 항상 자기 줄을 갖는다. 숨김은 .c-sheet [hidden] 이 처리한다. */
.c-sheet-picker__hint {
  flex: 0 0 100%;
  margin: 0;
  font-size: var(--text-caption);
  color: var(--sheet-danger-tx);
}

/* RM 안내 — 시안 11px / line-height 1.6 / margin-bottom 12.
 11px 은 대응 rem 토큰이 없다: --text-caption(0.75rem)은 모바일 root 12px 에서 9px 로 떨어져
 반응형 규약의 "caption 은 10px 이상 보장"을 밑돈다 → px 고정으로 둔다.
 시안 색 #999999 는 2.85:1 로 AA 미달이라 --color-text-muted(4.83:1)로 매핑. */
.c-sheet-picker__note {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.c-sheet-picker__note-line { display: block; }

/* 시안 그리드 컨테이너는 padding-bottom 20 만 갖고 좌우는 부모(32)를 따른다.
   min-height:0 은 flex column 안에서 overflow-y 가 실제로 동작하게 하는 조건이다. */
.c-sheet-picker__body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--space-7) var(--space-5); }
/* 시안 그리드: repeat(auto-fill, minmax(140px,1fr)) + gap 16.
   고정 열 수(5/3/1)를 쓰지 않는 이유는 모달 폭이 968 고정이 아니라 96vw 까지 줄기 때문이다.
   auto-fill 이면 PC 5열 / 태블릿 4~5열 / 375px 2열이 자동으로 나온다
   (반응형 규약 Mode B "모바일에서도 2장 유지"와도 맞는다). */
.c-sheet-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }

.c-sheet-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-7);      /* 시안 16 32 — 토큰 정확히 일치 */
  border-top: 1px solid var(--color-mono-7);   /* 시안 #EEEEEE = --color-mono-7 정확히 일치 */
  background: var(--color-white);
}
/* 시안 푸터 글자 13px / #666666(= --color-mono-4 정확히 일치, 5.74:1 AA 통과) */
.c-sheet-picker__summary { flex: 1 1 auto; min-width: 0; font-size: var(--text-body-s); color: var(--color-mono-4); overflow-wrap: anywhere; }
.c-sheet-picker__summary--filled { color: var(--color-text-strong); font-weight: 700; }
/* 시안 '선택 완료' = padding 11 26 / radius 10 / 13px 700.
   높이 39px ≈ .c-sheet-btn 기본 40px, radius 도 --radius-btn-rect(10) 이라 그대로 두고
   좌우 여백과 글자 크기만 맞춘다(26px ≈ --space-6). */
.c-sheet-picker__footer .c-sheet-btn { padding: 0 var(--space-6); font-size: var(--text-body-s); }

/* ============================================
 재개 확인 모달 (대시보드 화면)
 위 상품 선택 모달(.c-sheet-picker)과 같은 오버레이 뼈대(position:fixed 배경 + 중앙 정렬 박스)를
 쓰되, 이 모달은 그리드 없는 단순 확인창이라 박스 크기를 훨씬 작게 고정한다 — picker 처럼
 968px/860px 를 쓰면 두 줄짜리 본문에 비해 텅 비어 보인다.
 ============================================ */
.c-sheet-resume {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.c-sheet-resume[hidden] { display: none; }
.c-sheet-resume__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, 0.55); }
.c-sheet-resume__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.c-sheet-resume__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7) 0;
}
.c-sheet-resume__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-text-strong); }
.c-sheet-resume__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-img);
  background: var(--sheet-fill);
  color: var(--color-mono-4);
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.c-sheet-resume__close:hover { background: var(--color-mono-7); color: var(--color-mono-1); }
.c-sheet-resume__close:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
.c-sheet-resume__body { padding: var(--space-5) var(--space-7); }
.c-sheet-resume__desc { margin: 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-strong); }
.c-sheet-resume__sub { margin: var(--space-3) 0 0; font-size: var(--text-body-s); color: var(--color-text-muted); }
.c-sheet-resume__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-7) var(--space-6);
}
.c-sheet-resume__footer .c-sheet-btn { flex: 1 1 0; }

/* ---- 화면5: 종료 복구 팝업 2종([연동 기간 연장]·[발송 날짜 다시 지정]) 여백·정렬 ----
   ⚠ 스코프: data-restore-modal 은 이 두 팝업에만 있다. 같은 .c-sheet-resume 을 쓰는 "밀린 발송 처리" 모달은 건드리지 않는다.
   ① 상단 회색 안내 — 화면5 배너용 좌우 30px 인셋(.c-sheet-notice--muted)을 여기서는 풀어 본문과 같은 폭·같은 왼쪽 선.
   ② 안내 아래 20px. 단 [발송 날짜 다시 지정]의 "이미 처리된 N건…" 안내가 바로 오면 그 사이는 12px, 그 안내 아래가 20px.
   ③ "이 연동에 쓸 예산" 위 20px — 사이에 숨은 오류 문구가 끼어 `.c-sheet-field + .c-sheet-field`(20px)가 걸리지 않는다. */
[data-restore-modal] .c-sheet-resume__body > .c-sheet-notice.c-sheet-notice--muted { margin: 0; }
[data-restore-modal] .c-sheet-resume__body > .c-sheet-notice + .c-sheet-field { margin-top: var(--space-5); }
[data-restore-modal] .c-sheet-resume__body > .c-sheet-notice + .c-sheet-field__help { margin-top: var(--space-3); }
[data-restore-modal] .c-sheet-resume__body > .c-sheet-field__help + .c-sheet-field { margin-top: var(--space-5); }
[data-restore-modal] [data-restore-budget] { margin-top: var(--space-5); }
/* ④ [연동 기간 연장] 연장 기간 라디오 — 그룹에 간격이 없어 "1개월 ○ 3개월"처럼 글자와 다음 동그라미가 붙었다.
      옵션 사이 20px, 동그라미와 글자 사이 6px(토큰에 6px 가 없어 숫자로 둔다), 라디오 → 날짜칸 8px. */
[data-restore-modal] .c-sheet-radiogroup { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-2); }
[data-restore-modal] .c-sheet-radiogroup .c-sheet-radio { gap: 6px; }
[data-restore-modal] .c-sheet-radiogroup .c-sheet-radio input { margin: 0; }

/* ---- 화면4 수정 모드: 예산 추가 ----
   1행 "지금 예산 잔액 {잔액}원  발송할 때마다 줄어요"(읽기 전용) → "추가할 예산" 작은 제목 → 입력칸.
   새 패밀리 — 입력이 아니라 읽기 전용 안내라 .c-seg 같은 입력 컨트롤 클래스를 빌리지 않는다. 색·간격은 토큰만. */
.c-sheet-budgetnow { margin: 0 0 var(--space-3); font-size: var(--text-body-m); color: var(--color-text-muted); }
.c-sheet-budgetnow__value { color: var(--color-text-strong); font-weight: 700; }
.c-sheet-budgetnow__sub { margin-left: var(--space-1); font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-budgetnow__label { margin: 0 0 var(--space-2); font-size: var(--text-label-m); font-weight: 700; color: var(--color-text-strong); }
.c-sheet-budgetnow__note { color: var(--point-blue-text); }

/* 화면5 종료 안내의 [캐시 내역 보기] — 문장 뒤 파란 텍스트 링크 */
.c-sheet-refundlink { margin-left: var(--space-2); white-space: nowrap; }

/* 페이지네이션 — 목록 화면의 레거시 .pagination 을 쓰지 않는다. 저건 전역 페이지 이동 함수와 URL 이동이 전제라
   모달·대시보드처럼 그 자리에서 페이지만 바꾸는 상황과 계약이 다르다.
   상품 모달(.c-sheet-picker__page)과 대시보드 표(.c-sheet-pager)가 같은 생김새여야 하므로
   선택자만 나눠 달고 선언은 하나로 공유한다 — 복제하면 언젠가 갈라진다(표 스타일과 같은 방식). */
.c-sheet-picker__page,
.c-sheet-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.c-sheet-picker__page-btn,
.c-sheet-pager__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-mono-3);
  font-family: inherit;
  cursor: pointer;
}
.c-sheet-picker__page-btn:hover:not([disabled]),
.c-sheet-pager__btn:hover:not([disabled]) { border-color: var(--point-blue-2); color: var(--point-blue-text); }
.c-sheet-picker__page-btn[disabled],
.c-sheet-pager__btn[disabled] { opacity: .4; cursor: not-allowed; }
.c-sheet-picker__page-label,
.c-sheet-pager__label { font-size: var(--text-body-m); color: var(--color-text-muted); }
/* 시안에서 <b>상품 모달</b>의 페이지 버튼만 28×28 이고 글자는 13px/#666666 이다.
   위 공유 선언을 바꾸면 대시보드 표(.c-sheet-pager)까지 같이 줄어든다
   → 공유 선언은 그대로 두고 모달 쪽만 뒤에서 덮는다(같은 명시도, 순서로 이긴다).
   또한 시안은 페이지네이션을 푸터 바 안에 두므로 위 여백이 필요 없다. */
.c-sheet-picker__page { margin-top: 0; }
.c-sheet-picker__page-btn { width: 28px; height: 28px; color: var(--color-mono-4); }
.c-sheet-picker__page-label { font-size: var(--text-body-s); color: var(--color-mono-4); }

/* ============================================================
   페이지네이션 — 시안 기준 사양.
   같은 컨트롤이 시안 두 화면에 문자 단위로 동일하게 들어 있다:
     · "연동 목록"   → 목록 페이저 → 이 저장소에서는 .c-sheet-paging 안의 레거시 .pagination
     · 대시보드 "발송 이력" → 이력 페이저 → .c-sheet-pager

   시안 원문값:
     행     display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px
     범위   font-size:12px;color:#999999;font-variant-numeric:tabular-nums
     묶음   display:flex;align-items:center;gap:4px
     ‹ ›    width:32px;height:32px;border:none;background:none;border-radius:8px  · hover background:#F4F5F7
            · 아이콘 svg 16×16 chevron (stroke-width 1.6, linecap/linejoin round)
            · 색 활성 #666666 / 비활성 #D9DDE6   (pager() 의 prevColor/nextColor)
     숫자   min-width:32px;height:32px;padding:0 8px;border:none;border-radius:8px;font-size:13px;font-weight:700
            font-variant-numeric:tabular-nums
            · 현재 background:#4B75F2 color:#FFFFFF / 그 외 background:transparent color:#666666

   두 가지를 시안 그대로 쓰지 않고 매핑했다(둘 다 이 파일에 이미 선례가 있다):
     · #999999 → --color-text-muted. 흰 배경 2.85:1 로 AA(4.5:1) 미달이라 12px 에 그대로 쓸 수 없다.
     · #D9DDE6 → --color-mono-6(#CCCCCC). 토큰에 대응물이 없고 "비활성/디바이더" 역할이 같아
       로컬 변수를 새로 만들 만한 차이가 아니다(둘 다 회색 비활성 표현).

   ⚠ 동작은 바꾸지 않는다 — 생김새만 시안에 맞춘다.


   ============================================================ */

/* ---- 대시보드 (.c-sheet-pager) ---- */
.c-sheet-pager {
  justify-content: flex-end;          /* 시안 space-between + 라벨 좌측 = 컨트롤 묶음은 우측 */
  gap: var(--space-1);                /* 시안 gap:4px */
  margin-top: var(--space-5);         /* 시안 padding-top:20px */
}
/* 시안은 [범위 라벨] ...... [‹][›] 다. 이 마크업은 ‹ / 라벨 / › 순서라 라벨만 시각적으로 앞으로 보낸다.
   라벨은 포커스를 받지 않으므로 Tab 순서(‹ → ›)와 시각 순서가 여전히 일치한다(공통 디자인 규약). */
.c-sheet-pager__label {
  order: -1;
  margin-right: auto;
  font-size: var(--text-caption);     /* 시안 12px */
  color: var(--color-text-muted);     /* 시안 #999999 → AA 매핑 (위 주석) */
  font-variant-numeric: tabular-nums; /* 시안 동일 — 페이지 수가 바뀌어도 라벨 폭이 흔들리지 않는다 */
}
.c-sheet-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;                          /* 시안 border:none — 공유 선언의 1px 테두리를 지운다 */
  border-radius: var(--radius-md);    /* 시안 8px */
  background: none;                   /* 시안 background:none */
  color: var(--color-mono-4);         /* 시안 #666666 */
}
.c-sheet-pager__btn:hover:not([disabled]) {
  border-color: transparent;          /* 공유 hover 의 --point-blue-2 테두리 무효화 */
  background: var(--color-mosaic-bg); /* 시안 hover background:#F4F5F7 */
  color: var(--color-mono-4);         /* 공유 hover 의 --point-blue-text 무효화 (시안은 색이 안 바뀐다) */
}
.c-sheet-pager__btn:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
/* 시안은 비활성을 opacity 가 아니라 색으로 표현한다 → 공유 선언의 opacity:.4 를 되돌리고 색으로 바꾼다 */
.c-sheet-pager__btn[disabled] { opacity: 1; background: none; color: var(--color-mono-6); }
.c-sheet-pager__icon { display: block; }

/* ---- 목록 (.c-sheet-paging > 레거시 .pagination) ----
   마크업은 공용 페이지네이션이 만든다(15개 화면이 함께 쓴다) → 마크업을 고치지 않고
   이 스코프 안에서만 생김새를 덮는다. 공용 목록 스타일의 선언을 하나씩 되돌려야 하므로
   리셋 프로퍼티(width/padding-top/text-align/font-size)가 함께 들어 있다.
   ⚠ 이 마크업에는 "비활성 ‹ ›" 상태가 없다 — 이전/다음 블록이 없으면 <a> 자체가 렌더되지 않는다.
      그래서 시안의 #D9DDE6 비활성색은 이 화면에 대응 지점이 없다(대시보드에만 적용). */
.c-sheet-paging .pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;          /* 시안: 컨트롤 묶음 우측. 좌측 범위 라벨은 이 화면에 없다 */
  flex-wrap: wrap;
  gap: var(--space-1);                /* 시안 gap:4px */
  width: 100%;
  padding-top: 0;                     /* 공용 목록 스타일 `padding-top:1.875em` 리셋 — 여백은 래퍼가 갖는다 */
  font-size: var(--text-body-s);      /* 공용 목록 스타일 `.pagination{font-size:1.2em}` em 연쇄 차단 */
  text-align: left;                   /* 공용 목록 스타일 `text-align:right` 리셋 (정렬은 flex 가 담당) */
}
.c-sheet-paging .pagination > ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-sheet-paging .pagination > ul > li > a,
.c-sheet-paging .pagination .move_btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: auto;                        /* 공용 목록 스타일 `width:1.375em` 리셋 */
  height: 32px;
  padding: 0 var(--space-2);          /* 시안 padding:0 8px */
  border-radius: var(--radius-md);    /* 시안 8px */
  background: none;                   /* 시안 background:transparent */
  color: var(--color-mono-4);         /* 시안 비활성 #666666 (공용 목록 스타일은 --mono-6 이었다) */
  font-size: var(--text-body-s);      /* 시안 13px — 13px 토큰은 없고 --text-body-s(13.5px)가 그 자리다 */
  font-weight: 700;                   /* 시안 700 (공용 목록 스타일은 600) */
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums; /* 시안 동일 */
}
/* ‹ › 는 시안에서 정사각 32×32 (숫자만 좌우 padding 을 갖는다) */
.c-sheet-paging .pagination .move_btn { width: 32px; padding: 0; }
.c-sheet-paging .pagination .move_btn i { font-size: 16px; color: inherit; }  /* 시안 svg 16×16 */
.c-sheet-paging .pagination > ul > li:hover > a,
.c-sheet-paging .pagination .move_btn:hover {
  background: var(--color-mosaic-bg); /* 시안 hover background:#F4F5F7 */
  color: var(--color-mono-4);         /* 공용 목록 스타일의 hover `--point-blue-3` 리셋 — 시안은 색이 안 바뀐다 */
}
.c-sheet-paging .pagination .move_btn:hover i { color: inherit; }  /* 공용 목록 스타일 `.move_btn:hover i` 리셋 */
/* 현재 페이지 — 시안 background:#4B75F2;color:#FFFFFF */
.c-sheet-paging .pagination > ul > li.now > a,
.c-sheet-paging .pagination > ul > li.now:hover > a {
  background: var(--point-blue-1);
  color: var(--color-white);
  cursor: default;
}
.c-sheet-paging .pagination a:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }

/* 로딩 — 결과 영역만 덮는다. 필터를 다시 만지려는 손을 막지 않기 위해서다. */
.c-sheet-picker__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}
.c-sheet-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-mono-7);
  border-top-color: var(--point-blue-1);
  border-radius: 50%;
  animation: c-sheet-spin .7s linear infinite;
}
@keyframes c-sheet-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .c-sheet-spinner { animation-duration: 2.4s; }
}

/* 화면 로딩 상태 3종(외부 계정 연결 대기 / 파일 선택 창 대기 /
   시트 파싱 중) 공용 오버레이. 위 .c-sheet-spinner 를 그대로 재사용하고,
   .c-sheet-picker__loading(모달 내부 전용, position:absolute)과 달리 화면 전체를 덮어야 해서 fixed 로 새로 둔다. */
.c-sheet-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.72);
}
.c-sheet-loading-overlay[data-active] { display: flex; }
.c-sheet-loading-overlay__msg { font-size: var(--text-body-m); color: var(--color-text-muted); }

/* ============================================================
   공유 프래그먼트는 주문페이지 배치를 <b>그대로</b> 쓴다
   ============================================================
   한때 이 자리에 시안 기준 배치 보정이 있었다(발신자명 2단 해제 / 컨트롤 280 / 안내 260,
   그리고 라벨을 위로 올리는 .c-sheet-field--stack).
   전부 <b>제거</b>했다. 이유:

     이 화면(상품과 메시지를 정해요)은 기존 주문페이지에서 파생된 화면이고,
     화면 구성·레이아웃 비율(좌 입력 / 우 미리보기)까지 주문페이지가 기준이다.
     시안은 이 화면에 한해 제대로 만들어지지 않은 것으로 확인됐다.
     따라서 프래그먼트가 들고 온 주문페이지 CSS 를 덮지 않는다 —
     덮는 순간 "같은 프래그먼트인데 두 화면이 다르게 보이는" 상태로 돌아간다.

   카드 폭이 좁아 컨트롤이 찌그러지던 문제는 배치를 바꿔서가 아니라
   <b>카드 폭을 주문페이지에 맞춰</b> 푼다(아래 .c-sheet--split 비율).

   ⚠ 새 보정 규칙을 여기 추가하기 전에 한 번 더 생각할 것:
     그 규칙이 정말 이 화면 고유의 것인가, 아니면 주문페이지와 갈라지게 만드는 것인가. */

/* 토큰만 필요한 곳은 `.c-order` 가 아니라 `.c-order-tokens` 를 쓴다
   ------------------------------------------------------------
   여기 있던 무력화 규칙 2개(.c-sheet-field.c-order / .c-order-msg__left.c-order)는 제거했다.
   `.c-order` 가 토큰과 함께 주문페이지 페이지 레이아웃(display:grid / 1fr+320px /
   align-items:start / padding-bottom 96px)을 들고 오는 게 근본 원인이었고,
   이 파일에서 되돌리는 방식은 <b>이 화면에서만</b> 통했다 —
   주문페이지는 automation.css 를 로드하지 않아서 같은 프래그먼트가 그쪽에서 찌그러졌다
   (실측: 주문페이지 textarea 536→185px, 카드 아래 96px 빈칸).

   그래서 주문 화면 스타일의 토큰 블록에 레이아웃 없는 `.c-order-tokens` 를 추가하고
   프래그먼트 루트와 이 화면의 필드가 그걸 쓴다. 화면별 되돌리기가 필요 없어진다. */

/* ---- 쿠폰 꾸미기(KKC) 모달 토큰 브리지 ----
   ⚠ 이것은 <b>새 스타일이 아니라 토큰 전달</b>이다. 값은 하나도 새로 정하지 않았다.

   왜 필요한가:
     KKC 모달의 시각은 전부 주문 화면 스타일에 이미 있고 이 화면은 그 파일을 link 한다.
     그런데 그 안의 KKC 전용 주문 화면 토큰 14종은 <b>`.c-order` 스코프에만</b> 정의돼 있다
     (탭 비활성색 / 배너 팔레트 8색 + empty-plus / 배지 6색).
     `.c-order-tokens` 블록에는 그 14종이 없다.
     이 화면의 KKC 프래그먼트 루트는 `.c-order-tokens` 다 — `.c-order` 를 달면 그 클래스가 들고 오는
     페이지 레이아웃(display:grid / 1fr+320px / padding-bottom)까지 따라와 빈칸이 생기기 때문이다
     (바로 위 주석의 실측 사례와 같은 이유).
     → 그 14종만 여기서 브리지한다. 값은 주문 화면 스타일의 것과 <b>문자까지 동일</b>하고,
       한쪽이 바뀌면 다른 쪽도 바꿔야 한다(원본이 단일 출처다).

   대안을 쓰지 않은 이유:
     · 주문 화면 스타일 수정 → 공유 원본이라 금지.
     · 프래그먼트에 인라인 style 로 14개 선언 → 같은 값이 마크업에 박혀 더 찾기 어려워진다.
     · 스와치 배경을 hex 리터럴로 바꾸기 → 원본 마크업과 갈라진다. */
[data-kkc-scope] {
  --ord-kkc-tab-inactive: #9aa1b1;   /* 비활성 탭 텍스트 */
  --ord-kkc-bn-1: #ffd33a;           /* 배너 팔레트 — 노랑 */
  --ord-kkc-bn-2: #ff8a3d;           /* 주황 */
  --ord-kkc-bn-3: #ff5a5a;           /* 빨강 */
  --ord-kkc-bn-4: #4b75f2;           /* 파랑 */
  --ord-kkc-bn-5: #28b36b;           /* 초록 */
  --ord-kkc-bn-6: #9b6bff;           /* 보라 */
  --ord-kkc-bn-7: #1b1f2a;           /* 검정 */
  --ord-kkc-bn-8: #ffffff;           /* 흰색 */
  --ord-kkc-empty-plus: #b8bec9;     /* ke-empty 원형 '+' 글리프 */
  --ord-kkc-badge-ok-bg:  #e7f6ee;  --ord-kkc-badge-ok-tx:  #1fa463;   /* 승인 완료 */
  --ord-kkc-badge-rev-bg: #fef4dc;  --ord-kkc-badge-rev-tx: #b0780a;   /* AI 검수중 */
  --ord-kkc-badge-no-bg:  #fce8e8;  --ord-kkc-badge-no-tx:  #d33a3a;   /* 검수 반려 */
}

/* ---- 상품 카드 ----
   시안 카드에는 <b>테두리도 배경도 패딩도 없다</b>(width:100%;cursor:pointer;position:relative).
   선택 표시는 카드 테두리가 아니라 이미지 박스의 2px 테두리 + 우상단 체크 원이 맡는다.
   예전처럼 카드에 1px 테두리를 두르면 이미지 테두리와 이중 액자가 되어 시안과 가장 크게 어긋난다. */
.c-sheet-goods {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
}
/* 선택 불가 카드 — 고를 수 없다. 눌리는 것처럼 보이면 안 되므로 커서와 채도를 같이 내린다.
 */
.c-sheet-goods.is-blocked { cursor: not-allowed; }
.c-sheet-goods.is-blocked .c-sheet-goods__thumb { opacity: .55; }
.c-sheet-goods__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;             /* 시안 aspect-ratio:1 */
  margin-bottom: 3px;              /* 시안 margin-bottom:3px */
  border: 2px solid transparent;   /* 시안 border:2px — 색만 상태에 따라 바뀐다(자리는 항상 차지) */
  border-radius: 14px;             /* 시안 14px. --radius-lg 12 / --radius-xl 16 사이라 토큰이 없다 */
  background: var(--sheet-fill);
  overflow: hidden;
  transition: border-color .15s ease;
}
.c-sheet-goods:hover .c-sheet-goods__thumb { border-color: var(--point-blue-2); }
.c-sheet-goods.is-selected .c-sheet-goods__thumb { border-color: var(--point-blue-1); }
.c-sheet-goods__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 시안 Day 배지: top/left 6 / padding 3 8 / radius 6 / 11px 700 / 배경 #4B75F2.
   ⚠ 공통 디자인 규약 Badge/Day 는 --color-stripe-violet(#5866FF)이지만 이 모달 시안은 브랜드 블루다.
      배경색이므로 --point-blue-1 을 그대로 쓴다(AA 변이는 텍스트용). */
.c-sheet-goods__limit {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);   /* 시안 6px = --radius-sm 정확히 일치 */
  background: var(--point-blue-1);
  color: var(--color-white);
  font-size: 11px;                   /* 시안 11px — 대응 rem 토큰 없음(--text-caption 은 12px) */
  font-weight: 700;
  line-height: 1.5;
}
/* 시안 체크 원(24×24 / radius 50% / border 1.5px)은 네이티브 라디오로 만들 수 없다
   (UA 기본 라디오는 13px 고정이고 내부 글리프를 넣을 수 없다).
   라디오는 투명하게 깔아 키보드 포커스·label 클릭·change 이벤트를 그대로 유지하고,
   보이는 원은 형제 span 이 그린다 — 접근성 트리는 라디오가 계속 담당한다. */
.c-sheet-goods__radio {
  position: absolute;
  top: var(--space-2);               /* 시안 top/right 8 */
  right: var(--space-2);
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.c-sheet-goods__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  /* 시안은 테두리·배경을 동적값(c.checkBorder / c.checkBg)으로 두는데, 흰 테두리 + 반투명 흰 배경으로
     두면 상품 이미지가 밝을 때(플레이스홀더 포함) 원이 사실상 보이지 않는다(실측).
     밝은 이미지·어두운 이미지 양쪽에서 읽히도록 회색 테두리 + 불투명에 가까운 흰 배경으로 둔다. */
  border: 1.5px solid var(--color-mono-6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: transparent;                /* 미선택 상태에서는 체크 글리프를 감춘다 */
  font-size: var(--text-caption);    /* 시안 12px = --text-caption */
  line-height: 1;
  pointer-events: none;
}
.c-sheet-goods.is-selected .c-sheet-goods__check {
  border-color: var(--point-blue-1);
  background: var(--point-blue-1);
  color: var(--color-white);
}
.c-sheet-goods__radio:focus-visible + .c-sheet-goods__check { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }
/* 시안에는 브랜드 줄 스타일이 없다(인벤토리에 c.brand 변수만 있고 style 행이 없음) → 기존 값 유지.
   이미지 아래 여백이 3px 로 줄었으므로 브랜드 위 여백만 --space-3 → --space-1 로 맞춘다. */
.c-sheet-goods__brand { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }
/* 시안 상품명: 13px / 500 / #333333(= --color-mono-3 정확히 일치) / line-height 1.45 / mb 8 / min-height 37 */
.c-sheet-goods__name {
  margin: var(--space-1) 0 var(--space-2);
  min-height: 37px;
  font-size: var(--text-body-s);
  font-weight: 500;
  color: var(--color-mono-3);
  line-height: 1.45;
  /* 상품명 길이가 제각각이라 2줄에서 끊어야 카드 높이가 흔들리지 않는다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 시안은 상품명 margin-bottom 8 이 곧 금액과의 간격이다 → 금액 쪽 위 여백은 0 */
.c-sheet-goods__price { margin-top: 0; }
/* 시안 정가색 #B4B4C4 는 흰 배경 2.29:1 로 AA 미달 → --color-text-muted 유지 */
.c-sheet-goods__orig { display: block; margin-bottom: 2px; font-size: var(--text-caption); color: var(--color-text-muted); text-decoration: line-through; }
.c-sheet-goods__final-row { display: flex; align-items: baseline; gap: var(--space-1); }   /* 시안 할인율 margin-right:4px */
.c-sheet-goods__discount { font-size: var(--text-body-m); font-weight: 700; color: var(--point-blue-text); }
.c-sheet-goods__final { font-size: var(--text-body-m); font-weight: 700; color: var(--color-mono-1); }
.c-sheet-goods__note { margin: var(--space-2) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--sheet-warn-tx); }
.c-sheet-goods__note--muted { color: var(--color-text-muted); }

/* ============================================
   반응형 — 프로젝트 공통 브레이크포인트를 따른다
   (반응형 규약: Mobile ≤ 767 / Tablet 768~1279 / PC ≥ 1280)
   이 파일만 860/861 을 쓰고 있었다. 그 결과 iPad 세로(정확히 768px)에서
   헤더·LNB·푸터는 이미 태블릿인데 본문만 모바일이라 화면이 둘로 갈라졌다.
   ============================================ */
@media (max-width: 767px) {
  .c-sheet { --sheet-card-pad: var(--space-4); --sheet-gap: var(--space-4); }
  .c-sheet__head { flex-direction: column; align-items: stretch; }
  /* 페이지 헤드·히어로의 단독 CTA 는 폭을 채운다 (반응형 규약 버튼 정렬 규칙) */
  .c-sheet__head .c-sheet-btn,
  .c-sheet-hero__actions .c-sheet-btn { width: 100%; }

  .c-sheet-hero { padding: var(--space-8) var(--space-5); }
  .c-sheet-steps { margin-top: var(--space-7); padding-top: var(--space-6); }
  .c-sheet-steps,
  .c-sheet-usecase { grid-template-columns: 1fr; gap: var(--space-4); }

  /* 행: 가로 배치가 깨지면 액션이 화면 밖으로 밀린다 → 본문 위 / 액션 아래로 쌓는다 */
  .c-sheet-row {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + 3px);
  }
  .c-sheet-row__meta { gap: var(--space-2) var(--space-4); }
  .c-sheet-row__aside { width: 100%; justify-content: space-between; }
  .c-sheet-row__aside .c-sheet-btn { flex: 1 1 auto; }
  /* 터치 영역 44 보장 (반응형 규약) */
  .c-sheet-kebab__btn { width: 44px; height: 44px; }

  /* 페이지네이션도 같은 이유로 44 (반응형 규약 "최소 터치 영역 44 × 44px").
     ⚠ 375px 에서 한 줄에 안 들어간다 — 콘텐츠 343px(= 375 − 좌우 16×2) 에서 카드 padding
     (모바일 --sheet-card-pad = --space-4 = 16) 을 빼면 311px 인데,
     ‹ + 숫자 5(공용 페이지네이션 기본값) + › = 7칸 × 44 + gap 4 × 6 = 332px 다.
     페이지 수를 줄이는 것은 <b>동작 변경</b>이라 할 수 없으므로(생김새까지만)
     flex-wrap 으로 줄을 넘긴다 → 어느 폭에서도 가로 넘침 0. 320px 에서도 같은 방식으로 안전하다. */
  .c-sheet-paging .pagination > ul > li > a,
  .c-sheet-paging .pagination .move_btn { min-width: 44px; height: 44px; }
  .c-sheet-paging .pagination .move_btn { width: 44px; }
  .c-sheet-paging .pagination > ul { flex-wrap: wrap; gap: var(--space-1); }
  .c-sheet-pager { flex-wrap: wrap; row-gap: var(--space-2); }
  .c-sheet-pager__btn { width: 44px; height: 44px; }

  /* 허브 기능 행도 같은 이유로 세로 스택 — 우측 통계/버튼이 화면 밖으로 밀리지 않게 */
  .c-sheet-feature { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .c-sheet-feature__aside { width: 100%; }
  .c-sheet-feature__aside .c-sheet-btn { flex: 1 1 auto; }
  /* 스택되면 우측 정렬이 어색해진다 → 좌측 정렬로 되돌린다 */
  .c-sheet-stats { gap: var(--space-8); }
  .c-sheet-stat { text-align: left; }

  /* 마법사 폼 — 2열은 좁은 폭에서 라벨이 먼저 깨진다 */
  .c-sheet-grid2 { grid-template-columns: 1fr; gap: var(--space-4); }
  .c-sheet-grid2 .c-sheet-field + .c-sheet-field { margin-top: 0; }
  .c-sheet-input--sm { max-width: none; }
  .c-sheet-actions { flex-direction: column; align-items: stretch; }
  .c-sheet-actions__btns { width: 100%; }
  .c-sheet-actions__btns .c-sheet-btn { flex: 1 1 auto; }

  /* 카드 head 안의 액션 묶음(대시보드 '연동 상태' 카드)은 .c-sheet-actions 가 아니라
     .c-sheet-card__head 의 자식이라 위 flex-direction:column 이 걸리지 않는다.
     그 상태로 width:100% 만 적용되면 제목이 차지한 폭을 빼고 남은 공간보다 넓어져 화면 밖으로 나간다
     (실측 375px: 제목 151px + 액션 281px = 432px, 뷰포트 57px 초과).
     head 에 줄바꿈을 허용해 액션이 다음 줄로 내려가게 한다. */
  .c-sheet-card__head { flex-wrap: wrap; row-gap: var(--space-2); }

  /* 라디오 카드 2열 → 1열. 제목+설명이 들어가서 좁은 폭에서 2열이면 설명이 세로로 찢어진다. */
  .c-sheet-optcards { grid-template-columns: 1fr; }
  /* 메타 4열 → 2열. 1열까지 내리면 카드가 너무 길어져 상태 배너가 화면 밖으로 밀린다. */
  .c-sheet-metagrid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  /* 요약 행: 라벨/값을 양끝 정렬하면 값이 좁아져 줄바꿈된다 → 위아래로 쌓는다 */
  .c-sheet-summary__row { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .c-sheet-summary__value { text-align: left; }

  /* 상품 선택 모달 — 좁은 폭에서는 전체화면 시트로. 카드 5열은 읽을 수 없다. */
  .c-sheet-picker { padding: 0; }
  .c-sheet-picker__box { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .c-sheet-picker__header,
  .c-sheet-picker__filters,
  .c-sheet-picker__body,
  .c-sheet-picker__footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  /* 그리드는 auto-fill 이라 열 수를 따로 지정하지 않는다 — 375px 에서 자동으로 2열이 된다
     (콘텐츠 343 = 163.5 × 2 + gap 16, 가로 넘침 없음). */
  /* 정렬 4개 + 가격 묶음(라벨·입력 2개·단위·버튼)은 375px 한 줄에 절대 안 들어간다.
     flex-wrap 에 맡기면 가격 묶음이 정렬 마지막 항목 옆에 어정쩡하게 걸릴 수 있어 방향을 못박는다.
     align-items:stretch(기본)로 두면 가격 묶음이 자동으로 전폭이 된다. */
  .c-sheet-picker__toolbar { flex-direction: column; align-items: stretch; }
  /* 터치 영역 (반응형 규약) — 패딩 없는 텍스트 버튼은 손가락으로 못 누른다 */
  .c-sheet-picker__sort-item { min-height: 44px; }
  /* 가격 입력칸·'적용' 버튼도 같은 이유로 44px. 둘이 같은 변수를 읽으므로 여기서 한 번만 올리면
     PC 와 마찬가지로 높이가 계속 같다. */
  .c-sheet-picker__price { --sheet-price-h: 44px; }
  /* 입력칸 2개가 남는 폭을 나눠 갖게 한다. 고정 폭을 유지하면 가격 묶음이 뷰포트를 넘는다. */
  .c-sheet-picker__price .c-sheet-input { width: auto; flex: 1 1 88px; }
  .c-sheet-picker__footer { flex-direction: column; align-items: stretch; }
  .c-sheet-picker__footer .c-sheet-btn { width: 100%; }
  /* 푸터가 세로로 쌓이면 페이지네이션이 좌측에 붙어 어색하다 → 가운데로 */
  .c-sheet-picker__footer .c-sheet-picker__page { justify-content: center; }
}

/* ============================================
   목록을 표로 — 시안(01) 은 PC 에서 6컬럼 표다.
   ⚠ 이 블록은 반드시 `.c-sheet-row` 기본 정의(위쪽 flex)보다 <b>뒤에</b> 있어야 한다.
      미디어쿼리는 명시도를 올리지 않으므로, 앞에 두면 뒤의 `display:flex` 에 그대로 밀린다
      (실측으로 확인한 실수다).
   ≤1279 에서는 열이 너무 좁아 읽히지 않으므로 카드형("라벨 값")을 유지한다.
   ============================================ */
@media (min-width: 1280px) {
  .c-sheet-thead { display: grid; grid-template-columns: var(--sheet-cols); }
  .c-sheet-list { gap: 0; }
  .c-sheet-row {
    display: grid;
    grid-template-columns: var(--sheet-cols);
    align-items: center;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;                 /* 행끼리 경계선이 겹쳐 2px 로 보이지 않게 */
    padding: var(--space-4) var(--space-5);
  }
  /* 좌측 상태 레일은 <b>카드형(≤1279)</b> 을 위한 장치다.
     표에서는 상태 컬럼이 따로 있어 레일이 중복이고, 시안 표에도 없다.
     실제로 표 왼쪽에 검은 세로바가 그어져 시안과 가장 눈에 띄게 달랐다. */
  .c-sheet-row::before { display: none; }
  .c-sheet-list > .c-sheet-row:first-child { border-top: 1px solid var(--sheet-border); }
  /* 표에서는 셀마다 라벨을 반복하면 시끄럽다 — 머리행이 그 역할을 한다 */
  .c-sheet-row__label { display: none; }
  .c-sheet-row__cell--status { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  /* 표는 행 전체가 넓어 hover 그림자가 과하다 — 배경만 바꾼다 */
  .c-sheet-row:hover { box-shadow: none; background: var(--sheet-fill); }
}

/* ============================================================
 화면3 "시트 미리보기" 셀 상태 
 - 형식 오류 셀(수신자 전화번호 컬럼, 자동 보정 불가) = 빨간 밑줄 + 안내문구
 - 빈 값 셀 = "값 없음" 회색 이탤릭
 ============================================================ */
.c-sheet-preview__cell--empty {
  color: var(--color-text-muted);
  font-style: italic;
}
.c-sheet-preview__cell--invalid {
  text-decoration: underline;
  text-decoration-color: var(--sheet-danger-tx);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.c-sheet-preview__cell-note {
  display: block;
  margin-top: 2px;
  color: var(--sheet-danger-tx);
  font-size: var(--text-caption);
  font-style: normal;             /* 부모(--empty)의 italic 상속을 받지 않는다 — 이 노트는 빈 값이 아니다 */
  white-space: normal;            /* 표 기본 nowrap 을 이 노트만 풀어 줄바꿈을 허용한다 */
}

/* ============================================================
 화면4 우측 레일 — [미리보기 ⇄ 결제하기] 스왑 탭 
 두 콘텐츠를 이어붙이지 않고 하나씩 전환한다. "결제하기"는 실제 결제가 아니라 지금까지 설정한 값의
 읽기 전용 요약이다(결제예정액 합계·캐시/포인트 사용 입력 없음).
 ============================================================ */
/* ⚠ 여기 있던 `.c-sheet__rail-swap` / `.c-sheet__rail-swap-tab`(알약 버튼 2개)는 제거했다.
   주문페이지는 같은 자리에 라벨 2개 + 교환 아이콘이 카드 상단에 붙은 바(.c-order-swap)를 쓰는데,
   이 화면만 알약 버튼을 카드 바깥에 띄워서 눈에 띄게 달랐다. 이제 .c-order-swap 을 그대로 쓴다.

   ─ 주문페이지 규칙에서 딱 하나만 바꾼다: 노출 구간.
     원본은 `@media (min-width:1280px)` 에서만 flex 다 — ≤1279 에서는 레일이 1단 stack 되어
     미리보기·결제요약이 <b>동시에</b> 보이므로 이동 컨트롤이 무의미하기 때문이다.
     이 화면은 다르다. 여기서 바는 스크롤 이동이 아니라 <b>진짜 패널 전환</b>이고,
     숨기면 태블릿 이하에서 [결제하기]로 갈 방법이 사라진다. 그래서 전 구간 노출한다. */
.c-sheet__rail .c-order-swap { display: flex; }
/* 원본은 이 상쇄를 ≥1280 에서만 건다(바가 그 구간에서만 보이므로). 여기선 항상 보이니 항상 상쇄한다. */
.c-sheet__rail .c-order-coupon > .c-order-swap { margin-bottom: -10px; }

/* ⚠ 여기 있던 `.c-sheet__rail-note` / `.c-sheet-summary-group*` / `.c-sheet-summary__value--link`
   / `.c-sheet__rail .c-order-swap--standalone` 는 제거했다.
   [결제하기] 패널이 주문페이지 결제요약(.c-order-card.c-order-sum + .c-order-sum__*)을 그대로 쓰게 되면서
   그 네 규칙을 쓰는 마크업이 한 곳도 남지 않았다(전수 확인). 바도 이제 카드 안에 flush 로 붙으므로
   --standalone 모서리 보정이 필요 없다.

   ─ 주문페이지 규칙에서 딱 하나를 이 화면용으로 되돌린다: ≤767 하단 고정바.
     원본은 그 구간에서 `.c-order-sum__actions` 를 뷰포트 하단 fixed 바로 바꾸고,
     짝이 되는 본문 하단 여백(`.c-order { padding-bottom: 84px }`)으로 마지막 콘텐츠를 비워 둔다.
     이 화면에서는 그 짝이 이미 깨져 있다 — 위 `.c-sheet__rail.c-order` 가 padding-bottom 을 0 으로
     되돌리기 때문이다(레일이 주문페이지 그리드가 아니라서 그래야 한다). 게다가 여기 [결제하기]는
     탭으로 전환되는 패널이라, 기본 상태에서는 조상이 hidden 이고 탭을 누르는 순간에만 화면 아래에서
     바가 튀어나온다. → 레일 안에서는 카드 안 세로 버튼 묶음 그대로 둔다. */
@media (max-width: 767px) {
  .c-sheet__rail .c-order-sum__actions {
    position: static;
    flex-direction: column;
    padding: 4px 22px 18px;
    background: none;
    border-top: 0;
    box-shadow: none;
  }
  .c-sheet__rail .c-order-sum__caption { display: block; }
}

/* ============================================
   화면2 "샘플 미리보기 플로우" — 1분 미리보기 3단계 데모 모달.
   이 화면의 미리보기 스크립트 가 createElement 로 빌드해 body 에 append 한다.
   구조는 상품 선택 모달(.c-sheet-picker)과 같은 fixed 오버레이 패턴을 따르되,
   이 모달은 좁은 단일 컬럼(640px)이라 별도 네임스페이스로 둔다.
   ============================================ */
.c-sheet-preview-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.c-sheet-preview-modal[hidden] { display: none; }
.c-sheet-preview-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, 0.55); }
.c-sheet-preview-modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - var(--space-6) * 2);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.c-sheet-preview-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--sheet-border-soft);
}
.c-sheet-preview-modal__topbar-label { font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-preview-modal__progress { padding: var(--space-4) var(--space-6) 0; }
.c-sheet-preview-modal__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.c-sheet-preview-modal__progress-head span:first-child { font-weight: 700; color: var(--color-text-strong); }
.c-sheet-preview-modal__progress-bar { height: 4px; border-radius: var(--radius-pill); background: var(--sheet-border-soft); overflow: hidden; }
.c-sheet-preview-modal__progress-fill { height: 100%; width: 0; background: var(--point-blue-1); transition: width .2s ease; }
.c-sheet-preview-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-6); }
.c-sheet-preview-modal__hero-title { margin: 0; font-size: var(--text-heading-3); font-weight: 800; color: var(--color-text-strong); }
.c-sheet-preview-modal__hero-desc { margin: var(--space-3) 0 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-muted); }
.c-sheet-preview-modal__hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.c-sheet-preview-modal__intro { margin: 0 0 var(--space-4); font-size: var(--text-body-m); color: var(--color-text-muted); }
.c-sheet-preview-modal__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.c-sheet-preview-modal__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.c-sheet-preview-modal__card:hover { border-color: var(--point-blue-2); }
.c-sheet-preview-modal__card.is-selected { border-color: var(--point-blue-1); background: var(--sheet-info-bg); }
.c-sheet-preview-modal__card-title { font-size: var(--text-body-m); font-weight: 700; color: var(--color-text-strong); }
.c-sheet-preview-modal__card-meta { font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-preview-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
.c-sheet-preview-modal__report-card {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--sheet-fill);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.c-sheet-preview-modal__report-stat { margin: 0; font-size: var(--text-body-m); color: var(--color-text-muted); }

/* 공용 알럿(#laAlertTxt) 본문에 넣는 항목 목록 — 화면3 "외부 서비스 연동 (Google)" 안내.
   알럿 DOM 은 .c-sheet 밖에 있어 스코프 없이 이 클래스로만 건다.
   "·" 를 왼쪽 여백 안에 두어, 한 항목이 두 줄로 넘어가면 둘째 줄이 "·" 뒤 글자 위치에서 시작한다. */
.c-sheet-alert-list { margin: 0; padding: 0; list-style: none; text-align: left; }
.c-sheet-alert-list > li { position: relative; padding-left: 0.8em; }
.c-sheet-alert-list > li + li { margin-top: var(--space-1); }
.c-sheet-alert-list > li::before { content: '·'; position: absolute; left: 0; }

@media (max-width: 767px) {
  .c-sheet-preview-modal { padding: var(--space-4); }
  .c-sheet-preview-modal__hero-actions { flex-direction: column; }
  .c-sheet-preview-modal__hero-actions .c-sheet-btn { width: 100%; }
  .c-sheet-preview-modal__footer { flex-direction: column-reverse; }
  .c-sheet-preview-modal__footer .c-sheet-btn { width: 100%; }
}

/* ============================================
   화면4 "연동 기간 연장" 팝업 — 다음 단계 화면 [data-extend-modal].
   바깥 오버레이(.c-sheet-picker)는 상품 선택 모달과 공유하고, 안쪽 박스만 이 modifier 로 좁힌다.
   ============================================ */
.c-sheet-extend-box { max-width: 440px; height: auto; }
.c-sheet-extend-body { padding: 0 var(--space-7) var(--space-5); }
.c-sheet-extend-desc { margin: 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-mono-3); }
.c-sheet-extend-note { margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.c-sheet-extend-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-7);
  border-top: 1px solid var(--sheet-border-soft);
}
@media (max-width: 767px) {
  .c-sheet-extend-actions { flex-direction: column-reverse; }
  .c-sheet-extend-actions .c-sheet-btn { width: 100%; }
}

/* ============================================================
   표준 화면 보정 묶음 (.c-sheet--std)
   ============================================================
   위쪽 규칙은 하나도 고치지 않고, 루트에 `c-sheet--std` 가 함께 붙은 화면에만
   덧입히는 보정이다. 선택자를 `.c-sheet.c-sheet--std …` 로 시작해 명시도를 한 단계
   올려 두므로, 파일 어디에 놓이든 순서가 아니라 명시도로 기본값을 이긴다.

   ⚠ 이 클래스가 없는 화면은 이 블록이 한 줄도 걸리지 않고 기존 모양 그대로 남는다.
     여기에 규칙을 추가할 때는 반드시 `.c-sheet.c-sheet--std` 로 시작할 것 —
     빼는 순간 그 화면까지 같이 움직인다.
   ============================================================ */

/* ---- 상태 의미색 · 채움색 ----
   시안 대조에서 텍스트 색 4종과 채움색 1종이 어긋나 있었다.
   커스텀 프로퍼티는 상속되므로 여기서 값만 바꾸면 배지·안내 배너·인라인 오류 문구·
   빈 상태·표 머리 등 이 값을 읽는 자손이 전부 따라온다(컴포넌트를 하나씩 고치지 않는다).
   ⚠ 위험·경고 <b>배경</b>색 2종은 대조할 시안 값이 없어 그대로 둔다. */
.c-sheet.c-sheet--std {
  --sheet-ok-tx:      #2E9E68;
  --sheet-warn-tx:    #B45309;
  --sheet-danger-tx:  #E05339;
  --sheet-neutral-tx: #646C7C;
  --sheet-fill:       #F7F8FA;
}

/* ---- 카드 머리: 제목 시작 높이 고정 ----
   머리는 높이가 고정인데 내용이 가운데 정렬이라, 부제가 있는 카드와 없는 카드의
   제목 시작 높이가 서로 달랐다(부제가 붙으면 제목이 위로 올라갔다).
   위 정렬로 바꾸고 고정 여백을 줘서 부제 유무와 무관하게 같은 높이에서 시작하게 한다.
   여백은 머리 높이 안에 들어가므로 높이·아래 구분선 동작은 그대로다. */
.c-sheet.c-sheet--std .c-sheet-card__head {
  align-items: flex-start;
  padding-top: var(--space-6);
}
/* 머리 오른쪽 끝의 액션(버튼·스위치 묶음)은 제목과 달리 머리 상자 기준 가운데가 맞다.
   위에서 준 여백의 절반만큼 되돌리면 정렬 방식이 바뀌어도 예전과 같은 자리에 선다.
   좁은 폭에서는 머리가 줄바꿈되어 액션이 아랫줄로 내려가고 되돌릴 여백이 사라지므로,
   줄바꿈이 일어나지 않는 폭에서만 적용한다. */
@media (min-width: 768px) {
  .c-sheet.c-sheet--std .c-sheet-card__head > *:last-child:not(:first-child):not(.c-sheet-card__title) {
    align-self: center;
    margin-top: calc(var(--space-6) / -2);
  }
}

/* ---- 활용 예시 섹션 ---- */
/* 위 온보딩 박스와 맞닿아 경계가 1px 로 붙어 보였다 → 섹션 사이 표준 간격을 준다 */
.c-sheet.c-sheet--std .c-sheet-hero + .c-sheet-card { margin-top: var(--space-8); }
/* 목록이 위 여백을 0 으로 갖고 있어 제목·구분선·첫 항목이 한 덩어리로 붙어 있었다 */
.c-sheet.c-sheet--std .c-sheet-usecase { padding-top: var(--space-6); }
/* 흰 카드 안에 놓이는 항목이라 채움색이 거의 흰색이면 카드와 구분되지 않는다
   → 모서리를 키우고 한 단계 진한 회색면으로 덩어리를 분리한다 */
.c-sheet.c-sheet--std .c-sheet-usecase__item {
  border-radius: var(--radius-card-lg);
  background: var(--color-mosaic-bg);
}

/* ---- 2열 폼 바로 아래 붙는 안내 박스 ----
   조건을 켜면 선택칸 아래에 요약 안내가 곧바로 붙어 간격이 0 이었다.
   값은 이 파일이 폼 항목 사이에 쓰는 간격과 같다. */
.c-sheet.c-sheet--std .c-sheet-grid2 + .c-sheet-notice { margin-top: var(--space-5); }

/* ---- 메타 4열: 버튼이 들어간 칸 ----
   한 칸에만 버튼이 있어 그 칸만 세 줄이 되고 나머지 칸과 줄 높이가 어긋났다.
   라벨이 한 줄을 다 쓰고 값과 버튼은 같은 줄에 나란히 서게 한다.
   기준선 정렬이라 값 글자는 다른 칸의 값과 같은 높이에 남는다.
   :has() 를 지원하지 않는 브라우저에서는 규칙이 걸리지 않아 기존 모양으로 남는다. */
.c-sheet.c-sheet--std .c-sheet-metagrid__item:has(> .c-sheet-btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
}
.c-sheet.c-sheet--std .c-sheet-metagrid__item:has(> .c-sheet-btn) > .c-sheet-metagrid__label {
  flex: 0 0 100%;
}

/* ---- 화면2 목록 표: 머리행과 행의 열 맞춤 ----
 머리행은 카드의 직계 자식이라 좌우 30px(위 `.c-sheet-card > *:not(head)`)만 받는데,
 행은 그 30px 를 먹은 목록 안에서 자기 몫 좌우 20px(`.c-sheet-row` 패딩)을 또 받는다.
 그래서 머리 라벨은 30px 에서, 값은 50px 에서 시작해 <b>어떤 열도 세로로 맞지 않았다</b>.
 행의 중복 20px 만 없애면 둘 다 30px 에서 시작한다.

 ⚠ 이 묶음을 `--std` 로 스코프하는 이유는 `.c-sheet-row__reason` 때문이다.
 이 클래스는 화면2 전용이 아니다 — 화면4의 문구함 목록 렌더러가
 날짜 표시에 같은 이름을 만들어 붙인다. 스코프를 빼면 그 날짜 색까지 함께 움직인다
 (화면4 는 --std 가 없어 --sheet-neutral-tx 가 base 값 #5A6270 로 해석된다).
 나머지 `.c-sheet-row*` 는 화면2 에만 있지만, 한 컴포넌트 묶음을 두 스코프로 쪼개면
 다음 사람이 어느 쪽에 규칙을 더해야 할지 알 수 없어 함께 둔다. */

/* 시트명 셀은 마크업에서 <b>삭제</b>된다 → 열을 0 으로 접는 게 아니라 정의에서 뺀다(6열 → 5열).
 머리행 span 과 행 셀이 둘 다 6개에서 5개가 되므로 열 수도 5개여야 한다.
 비율은 실측(연동명 220 / 상품명 260 / 최근 발송 160 / 상태 140 / 케밥 32)을 그대로 쓰되
 단위는 기존과 같이 fr 로 남긴다 — 고정 px 로 바꾸면 812px + 열간격 64px = 876px 가 필요해져
 목록 카드 안쪽 폭이 그보다 좁은 1280~1440 구간에서 표가 카드를 넘친다.
 머리행과 행이 이 변수 하나만 읽으므로 둘이 갈라질 수 없다(그게 원래 이 변수의 목적이다). */
.c-sheet.c-sheet--std .c-sheet-list,
.c-sheet.c-sheet--std .c-sheet-thead { --sheet-cols: 220fr 260fr 160fr 140fr 32px; }

/* 사유 문구가 혼자 다른 계열 회색(--color-text-muted)이라 같은 칸의 대기중 건수와 톤이 갈렸다 */
.c-sheet.c-sheet--std .c-sheet-row__reason { color: var(--sheet-neutral-tx); }
/* 삭제된 시트명 열을 대신해 연동명 아래로 들어가는 보조문구 */
.c-sheet.c-sheet--std .c-sheet-row__subname { font-size: var(--text-caption); color: var(--sheet-neutral-tx); }
/* 연동명만 700 이라 표를 훑을 때 시선이 첫 열에 묶이고 상태·값 열이 뒤로 밀렸다 → 한 단계 내린다 */
.c-sheet.c-sheet--std .c-sheet-row__cell--name .c-sheet-row__name { font-weight: 500; }

@media (min-width: 1280px) {
  .c-sheet.c-sheet--std .c-sheet-thead { align-items: center; }
  /* 위에서 말한 중복 20px. 표가 되는 이 구간에서만 뗀다 — ≤1279 의 행은 테두리를 가진 카드라
 좌우 패딩이 사라지면 글자가 테두리에 붙는다(모바일 규칙이 그 전제로 짜여 있다). */
  .c-sheet.c-sheet--std .c-sheet-row { padding-left: 0; padding-right: 0; }
  /* 연동명 + 보조문구를 한 칸 안에서 위아래로 쌓는다. 표에서는 셀 라벨이 숨겨져 있어
     (같은 구간의 `.c-sheet-row__label { display:none }`) 칸에 남는 것이 이 둘뿐이다.
     ≤1279 카드형에서는 라벨이 보이므로 "라벨: 값" 가로 배치를 그대로 둔다. */
  .c-sheet.c-sheet--std .c-sheet-row__cell--name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  /* 열 폭이 정해져 있어 긴 상품명이 줄바꿈되면 그 행만 두 줄이 되어 표의 줄 높이가 흔들린다 → 말줄임.
     ≤1279 에서는 폭 제한이 없으므로 기존 줄바꿈(overflow-wrap:anywhere)을 남겨 둔다 —
     좁은 화면에서 이름을 잘라 버리면 확인할 방법이 사라진다. */
  .c-sheet.c-sheet--std .c-sheet-row__cell .c-sheet-row__value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ============================================================
 화면별 보정 묶음 — <b>스코프 없는 추가분</b>
 ============================================================
 ⚠ 여기서부터는 위 `.c-sheet--std` 블록이 <b>아니다</b>. 아래 규칙에 `--std` 를 붙이지 않는다.
 붙이지 않는 이유가 규칙마다 달라 각 규칙 위에 한 줄로 적어 둔다:
 · 화면4(주문페이지 패리티) 자체를 고치는 규칙 → 붙이면 영영 걸리지 않는다(아래 화면4 규칙과 같다).
 · 선택자·속성·id 가 한 화면에만 존재하는 규칙 → 붙여도 결과가 같고 읽는 비용만 는다.
 반대로 "화면1·2·3·5 용인데 선택자를 화면4 도 갖고 있는" 규칙은 여기 두면 안 된다.
 실제 사례가 바로 위 `--std` 블록의 `.c-sheet-row__reason` 이다.
 ============================================================ */

/* ---- 화면3: '연동할 시트' 드롭존 ----
 빈 상태 박스([data-sheet-none])와 [파일 선택] 버튼이 따로 놓여, 안내와 그 안내를 해결하는 버튼이
 두 덩어리로 갈라져 있었다. 마크업에서 빈 상태 박스를 없애고 버튼 하나를 전폭 점선 드롭존으로 합친다.

 ⚠ `[data-sheet-pick]` 는 이 자리에만 있는 속성이 아니다 — <b>선택된 시트 카드 안의
 [다른 파일 선택]</b> 보조 버튼에도 붙어 있다.
 속성만으로 잡으면 그 작은 버튼까지 전폭 점선 드롭존이 되므로 [data-sheet-pickrow] 안쪽으로 한 번 좁힌다.
 ⚠ 스코프 없음: 두 속성 모두 화면3 에만 있다.
 명시도 (0,2,0) 이라 .c-sheet-btn--sm(0,1,0)의 12px·좌우 16px 를 이긴다.
 모서리는 .c-sheet-btn 이 이미 주는 --radius-btn-rect(10px)가 실측치와 같아 다시 선언하지 않는다. */
[data-sheet-pickrow] { width: 100%; }
[data-sheet-pickrow] [data-sheet-pick] {
  width: 100%;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--sheet-border);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
  font-size: var(--text-body-m);
  font-weight: 500;
  text-align: center;
}
/* 공용 `.c-sheet-btn--ghost:hover` 가 (0,2,0) 이라 :hover 를 더해 (0,3,0) 으로 올려야 이긴다 */
[data-sheet-pickrow] [data-sheet-pick]:hover {
  border-color: var(--point-blue-1);
  background: var(--sheet-accent-soft);
  color: var(--point-blue-text);
}

/* ---- 화면3: 워크시트(탭)·감지 시작 행 줄 ----
   이 2열 묶음은 `.c-sheet-field` 가 아니라서 `.c-sheet-field + .c-sheet-field` 의 20px 를 받지 못하고
   위 드롭존에 딱 붙어 있었다. 형제 필드들이 쓰는 같은 간격을 준다.
   ⚠ 스코프 없음: `.c-sheet-grid2` 는 화면3 에만 있다(화면4 는 이 클래스를 쓰지 않는다).
   지급조건 카드의 2열 묶음도 같은 클래스인데, 그쪽도 머리에 붙어 있어 같은 간격이 필요하다. */
.c-sheet-grid2 { margin-top: var(--space-5); }

/* ---- 화면3: 미리보기 표의 '생략 행' ----
   "총 N행 중 M행 생략" 줄이 실제 데이터 행과 똑같이 그려져, 생략 안내가 아니라 값이 비어 있는
   데이터 한 줄로 읽혔다. 회색 면 + 이탤릭으로 성격을 바꾸고, 위아래 경계선으로 데이터 구간을 끊는다.
   데이터 행이 58px 인데 이 줄만 35px 라 사이에 낀 것처럼 눌려 보였던 것도 같은 패딩으로 푼다.
   ⚠ 스코프 없음: 미리보기 표(.c-sheet-preview)는 화면3 에만 있다.
   명시도 (0,2,1) — 공용 셀 규칙 `.c-sheet-preview__table td`(0,1,1)을 순서가 아니라 명시도로 이긴다. */
.c-sheet-preview__table .c-sheet-omitrow td {
  padding: 10px var(--space-3);
  border-top: 1px solid var(--sheet-border);
  border-bottom: 1px solid var(--sheet-border);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
  font-size: var(--text-caption);
  font-style: italic;
  text-align: center;
}

/* ---- 화면3: 지급조건 '선택' 뱃지 ----
 필수/선택이 라벨만으로는 구분되지 않아 지급조건을 필수로 오해하는 문의가 있었다.
 `.c-sheet-field__req`(빨강 '필수')의 반대쪽이라 같은 자리에 들어가는 중립 뱃지를 새로 둔다.
 ⚠ 이름은 `c-sheet-optbadge` 다. 이 파일의 컴포넌트 계열이 전부 `c-sheet-*` 이고
 다른 접두사를 쓰면 제품에 존재하지 않는 계열이 여기 하나만 남는다.
 11px 은 대응 rem 토큰이 없다(--text-caption 이 12px) → `.c-sheet-goods__limit` 과 같은 방식으로 px 고정. */
.c-sheet-optbadge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}
/* 지급조건 카드의 OFF 안내 박스가 마크업에서 빠지면 카드의 아래 여백도 함께 사라진다
   (그 박스가 OFF 상태에서 유일하게 보이는 본문이자 아래 여백이었다) → 머리에 아래 여백을 돌려준다.
   ⚠ `.c-sheet-card__head` 는 5개 화면의 모든 카드가 쓰는 공용 선택자다. 그대로 두면 전 화면의 카드가 움직인다.
     이 카드에는 data 훅이 없으므로 안에 있는 토글 id 로 좁힌다 — #sbRuleUse 는 화면3 에만 있고
     step1 스크립트가 getElementById 로 잡는 이름이라 임의로 바뀌지 않는다.
   ⚠ 스코프 없음: id 자체가 화면3 한 장이라 --std 가 더할 것이 없다.
     명시도 (1,1,0) 이라 위 `--std` 블록의 `.c-sheet--std .c-sheet-card__head`(0,3,0)보다 우선한다. */
.c-sheet-card__head:has(#sbRuleUse) { padding-bottom: var(--space-6); }

/* ---- 화면4: 캡션 다음에 오는 필드 ----
 [특정 날짜 지정] 안내 캡션과 그 아래 [발송 날짜] 입력칸 사이가 `.c-sheet-field__control` 기본값 8px 이라,
 바로 위 발송방식·전송시간이 쓰는 20px 리듬에서 혼자 떨어져 캡션에 달라붙어 보였다.
 ⚠ 스코프 없음 — <b>반드시</b>. 화면4는 `--std` 를 달지 않는 유일한 화면이라
 여기에 --std 를 붙이면 이 규칙은 영영 걸리지 않는다(위 묶음 머리에 적은 함정이다).
 ⚠ 5개 템플릿 전수 확인: 이 인접쌍이 실제로 만들어지는 곳은 화면4 전송시간 필드 한 곳뿐이다
 (다른 화면의 `__help` 는 전부 필드의 마지막 자식이다) → 다른 화면으로 샐 곳이 없다. */
.c-sheet-field__help + .c-sheet-field__control { margin-top: var(--space-5); }

/* ---- 화면5: 대기중 목록·발송 이력의 '박스 안 박스' ----
   흰 카드 안에 테두리 + 모서리 + 채움을 가진 상자가 또 들어가 액자가 두 겹이었다.
   바깥 카드는 그대로 두고 안쪽 상자의 테두리·모서리·배경을 지운 뒤, 위 요약 카드가 쓰는
   윗 구분선 한 줄로 바꾼다.
   ⚠ `.c-sheet-empty--sm` 은 화면3·4 도 쓴다(화면3 시트 미리보기 빈 상태 2곳, 화면4 문구함 모달의 '저장된 문구가 없어요').
     클래스만으로 잡으면 그 화면들의 점선 빈 상태 박스까지 함께 지워지므로 화면5 전용 data 훅으로 좁힌다.
     `.c-sheet-tablewrap` 은 화면5 에만 있다(화면3 미리보기는 선언만 공유하고 선택자는 .c-sheet-preview 로 갈라져 있다).
   ⚠ 스코프 없음: 좁힌 결과가 이미 화면5 전용이다.
   좌우 30px 은 카드가 자기 자식에게 주는 값과 같다. 명시도를 (0,2,0) 이상으로 올려
   그 규칙과 `head + *`(윗 구분선 + 22px)을 이 선택자가 직접 소유하게 한다 —
   그러지 않으면 어느 값이 이겼는지 확인하려고 두 곳을 오가야 한다. */
.c-sheet-card > .c-sheet-tablewrap,
.c-sheet-card > .c-sheet-empty--sm[data-waiting-empty],
.c-sheet-card > .c-sheet-empty--sm[data-history-empty],
.c-sheet-card > .c-sheet-empty--sm[data-noti-empty] {
  margin-top: var(--space-4);
  padding: var(--space-4) 30px 26px;
  border: none;
  border-top: 1px solid var(--sheet-border);
  border-radius: 0;
  background: transparent;
}

/* ---- 화면5: 상태 줄 정렬 ----
   상태 배지(색점 + 글자)와 사유 텍스트가 인라인 baseline 으로 놓여 색점이 글자선보다 내려가 있었다.
   ⚠ 스코프 없음: `.c-sheet__desc` 는 화면1·2 도 쓰지만 그쪽은 페이지 머리(.c-sheet__head) 안이고,
     카드 머리 안에 두는 것은 화면5 뿐이다 → 후손 결합자만으로 화면5 로 좁혀진다.
     화면4 에는 `.c-sheet__desc` 자체가 없다. */
.c-sheet-card__head .c-sheet__desc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

















.c-sheet-notice.c-sheet-notice--muted {
  margin: 0 30px;                 /* 카드 좌우 패딩만큼 안으로 들여 카드 폭을 꽉 채우지 않게 한다 */
  padding: 14px var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
}
/* 이 배너는 사유 제목 없이 한 줄 설명만 남기므로 제목 아래 여백이 필요 없다 */
.c-sheet-notice--muted .c-sheet-notice__desc { margin-top: 0; color: var(--sheet-neutral-tx); }

/* ---- 화면5: ⓘ 도움말 툴팁 ----
   처음엔 '대기중 목록' 제목 옆(감지 주기 안내)에 썼고, 그 안내는 카드 아래 상시 안내(.c-sheet-waitnote)로 옮겼다.
   지금은 상단 요약 '연결 시트명' 옆(시트 사용 규칙 요약)에서만 쓴다.
   ⚠ 스코프 없음: 새 이름이라 어느 화면에도 아직 없다.
   z-index 가 없으면 바로 아래 표가 만드는 쌓임 순서에 눌려 툴팁이 표 밑으로 들어간다.
   값은 케밥 메뉴와 같은 역할(페이지 안에서 잠깐 떠오르는 층)이라 같은 토큰을 쓴다 —
   숫자를 새로 정하면 이 파일에서 근거 없는 z-index 가 하나 더 는다. */
.c-sheet-infotip {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  color: var(--sheet-neutral-tx);
  font-size: var(--text-body-s);   /* 13px 토큰은 없다 — --text-body-s(13.5px)가 그 자리다 */
  vertical-align: middle;
  cursor: help;
}
.c-sheet-infotip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 130%;
  left: 0;
  z-index: var(--z-dropdown);
  width: 260px;
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
  background: var(--color-mono-1);
  color: var(--color-white);
  font-size: var(--text-caption);
  line-height: 1.4;
  white-space: normal;             /* 표 안에서 상속될 수 있는 nowrap 을 이 상자만 푼다 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.c-sheet-infotip:hover::after { opacity: 1; }

/* ---- 화면5: '대기중 목록' 안내 영역 ----
   위 ⓘ 툴팁은 이제 '연결 시트명' 옆에만 남는다. 대기중 목록의 반영 지연 안내는 hover 없이 카드 맨 아래에 상시 보인다.
   래퍼(.c-sheet-waitnote)는 카드 직계 마지막 자식이라 좌우 30px·하단 26px 를 카드 공통 규칙에서 받는다.
   위 표·빈 상태 박스도 하단 26px 를 갖고 있어 사이 간격을 따로 주지 않는다(겹치면 52px 가 된다).
   상자는 기본 .c-sheet-notice(중립 회색)를 그대로 쓴다 — 오류·경고가 아니라 안내라서.
   ⚠ 스코프 없음: 새 이름이라 화면5 에만 있다. */
.c-sheet-waitnote .c-sheet-notice { align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.c-sheet-waitnote__icon {
  flex: 0 0 auto;
  font-size: var(--text-body-s);
  line-height: 1.5;
  color: var(--sheet-neutral-tx);
}
/* 같은 화면 상태 안내(.c-sheet-notice__desc, 14px / 줄 높이 21px)와 같은 크기로. 색·굵기는 그대로. */
.c-sheet-waitnote__text {
  margin: 0;
  font-size: var(--text-body-m);
  line-height: 1.5;
  color: var(--sheet-neutral-tx);
}

/* ---- 화면5: 연동 운영 스위치 hover 안내 ----
   문구는 스크립트가 상태에 따라 data-tooltip 으로 넣는다.
   ⚠ 속성이 없으면 content:attr(...) 이 빈 문자열이 되어 <b>글자 없는 검은 상자</b>만 뜬다.
     속성 선택자를 조건으로 써서 애초에 ::after 가 만들어지지 않게 한다(빈 문자열도 함께 거른다).
   ⚠ 스코프 없음: `.c-sheet-switch` 는 화면3·4·5 가 모두 쓰지만 data-tooltip 을 다는 곳은 화면5 뿐이라
     속성 자체가 스코프 역할을 한다. position:relative 도 속성이 붙은 스위치에만 건다 —
     공용 `.c-sheet-switch` 에 걸면 그 안의 position:absolute 인 숨김 input 의 기준까지 같이 바뀐다. */
.c-sheet-switch[data-tooltip]:not([data-tooltip=""]) { position: relative; }
.c-sheet-switch[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-mono-1);
  color: var(--color-white);
  font-size: var(--text-caption);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.c-sheet-switch[data-tooltip]:not([data-tooltip=""]):hover::after { opacity: 1; }

/* 터치 기기에는 hover 가 없다. iOS 는 첫 탭을 hover 로 한 번 처리해 툴팁이 떠서 안 사라지는 상태가 되므로
   아예 만들지 않는다. 두 툴팁 모두 보조 설명이고 1차 정보는 옆의 캡션·라벨이 이미 갖고 있다. */
@media (hover: none) {
  .c-sheet-infotip::after,
  .c-sheet-switch[data-tooltip]:not([data-tooltip=""])::after { content: none; }
}

/* ---- 화면5: 운영 토글 색상 — <b>이 파일은 고치지 않는다</b> ----
 마크업/JS 에서 checked 의 의미를 뒤집는다(지금은 checked = 일시중지,
 현재 마크업 기준).
 그런데 이 파일의 스위치 규칙(위 `.c-sheet-switch__input:checked + .c-sheet-switch__track`)은
 <b>이미 관례대로</b> 칠하고 있다 — checked 면 --point-blue-1 + 손잡이 오른쪽, 아니면 --color-mono-6 + 왼쪽.
 즉 뒤집기가 끝나면 운영중 → 파랑/오른쪽, 일시중지 → 회색/왼쪽 이 저절로 맞는다.
 스펙에 함께 적혀 있던 색 반전 CSS 는 "뒤집기를 하지 않는 경우"의 대안이라,
 뒤집기와 같이 넣으면 두 번 뒤집혀 제자리로 돌아온다.
 → 규칙을 <b>추가하지 않는 것</b>이 이 항목의 조치다. 다음 사람이 "빠졌다"고 넣지 않도록 남긴다. */

/* ---- 화면1: 준비 중 카드 ----
   제목만 흐리게 두었더니(위 `.c-sheet-feature--soon .c-sheet-feature__name`) 설명과 배지는 또렷해서
   준비 중인 행이 눌리는 행과 비슷한 무게로 읽혔다. 행 전체 톤을 내려 "지금은 없는 것"으로 보이게 한다.
   ⚠ 스코프 없음: --soon modifier 는 허브(화면1)에만 있다. */
.c-sheet-feature--soon { opacity: .55; }

/* ---- ≤767: 가로 스크롤이 있다는 신호 ----
   화면2 필터탭과 화면5 표는 좁은 폭에서 가로로 스크롤되는데 잘린 티가 나지 않아
   오른쪽에 더 있다는 것을 알 수 없었다.

   🔴 스크롤 컨테이너에 position:relative 를 주고 ::after 를 absolute 로 붙이면 <b>안 된다.</b>
      그 상자의 기준이 스크롤되는 내용 영역이라 페이드가 내용과 함께 흘러가,
      끝까지 스크롤한 뒤에야 보인다 — 의도와 정확히 반대다.
      마크업은 이 작업 범위 밖이라 래퍼를 추가할 수 없고, 바깥 부모에 붙이면 스크롤 영역의
      세로 범위를 알 수 없어 카드 오른쪽 전체에 흰 띠가 생긴다.
      → position:sticky 로 푼다. ::after 를 스크롤 컨테이너의 <b>마지막 플렉스 아이템</b>으로 만들고
        right:0 으로 고정하면 스크롤과 무관하게 보이는 오른쪽 끝에 남는다.
        표 래퍼는 블록이라 그대로는 플렉스 아이템이 생기지 않으므로 이 구간에서만 flex 로 바꾼다
        (표는 이미 width:100% + nowrap 이라 블록일 때와 폭 계산 결과가 같다).

   페이드 끝 색은 뒤에 비치는 색과 같아야 한다. 두 영역 모두 흰 카드 안이고
   (`.c-sheet-card { background: var(--color-white) }`), 위 화면5 보정이 표 래퍼 자체를
   transparent 로 만들었으므로 실제로 비치는 것도 그 흰색이다 → 하드코딩 대신 같은 토큰을 쓴다.
   ≥768 에서는 두 영역이 스크롤되지 않아 페이드가 얼룩이 되므로 이 구간에만 건다. */
@media (max-width: 767px) {
  .c-sheet-card > .c-sheet-tablewrap { display: flex; }
  .c-sheet-tabs::after,
  .c-sheet-card > .c-sheet-tablewrap::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 32px;
    align-self: stretch;
    margin-left: -32px;            /* 마지막 내용 위에 겹쳐 얹는다 — 뒤에 빈 칸을 만들지 않는다 */
    background: linear-gradient(to right, transparent, var(--color-white));
    pointer-events: none;
  }
}

/* ---- 화면5: 요약 묶음 래퍼 ----
   좌우 패딩을 자식에게 넘겨, 자식이 카드 직계일 때와 같은 폭·구분선을 유지한다. */
.c-sheet.c-sheet--std .c-sheet-card > .c-sheet-card__body--flush { padding-left: 0; padding-right: 0; }
.c-sheet.c-sheet--std .c-sheet-card__body--flush > * { padding-left: 30px; padding-right: 30px; }

/* ---- 화면5: 예산 추가 인라인 카드 — 요약과 같은 구분선·간격 ---- */
.c-sheet.c-sheet--std .c-sheet-fundcard {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sheet-border-soft);
}
.c-sheet.c-sheet--std .c-sheet-fundcard__actions { margin-top: var(--space-3); }

/* ---- 화면3: 시트 사용 규칙 카드 ----
   시트 사용 규칙(해도 되는 것/안 되는 것)을 그림과 목록으로 보여 주는 카드다.
   처음 쓰는 사람이 규칙을
   글보다 먼저 그림으로 알아보도록 왼쪽에 작은 시트 그림(__demo), 오른쪽에 해도 되는 것/안 되는 것 목록을 둔다.
   ⚠ 새 컴포넌트다 — 제품에 같은 역할의 블록이 없다(.c-sheet-steps 는 순서 안내, .c-sheet-usecase 는 활용 예시라
     "해도 되는 것 / 안 되는 것" 대비를 담지 못한다). 색·간격·모서리는 전부 이 파일의 --sheet-* 와 tokens.css 토큰만 쓴다.
   ⚠ 스코프 없음: 클래스가 새 이름이라 이 카드에만 있다. 화면4(주문페이지 패리티)에는 쓰지 않는다.
   카드 본문은 __body 한 덩어리다 — `.c-sheet-card > *:last-child` 하단 여백·`head + *` 구분선이 그대로 적용된다. */
/* 머리 아래 여백 — 부제 아래 여백이 없던 것을 보정.
   이 카드는 머리에 제목 + 부제 두 줄이 들어가는데 머리 높이(min-height 74px, --std 위쪽 여백 24px)가
   그 두 줄로 꽉 차서 부제가 아래 구분선에 붙었다. 같은 화면의 지급조건 카드(`:has(#sbRuleUse)`)와 같은 값으로 아래 여백을 준다.
   클래스가 이 카드에만 있어 다른 카드로 새지 않는다. */
.c-sheet-rule > .c-sheet-card__head { padding-bottom: var(--space-6); }
.c-sheet-rule__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .c-sheet-rule__body {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }
  .c-sheet-rule__note { grid-column: 1 / -1; }
}
/* 작은 시트 그림 — 행 번호 칸 + 셀 2개. 실제 표가 아니라 그림이라 table 이 아니다(마크업은 aria-hidden). */
.c-sheet-rule__demo {
  overflow: hidden;
  border: 1px solid var(--sheet-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: var(--text-caption);
}
.c-sheet-rule__demo-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding-right: var(--space-3);
  border-top: 1px solid var(--sheet-border-soft);
  color: var(--color-text-muted);
}
.c-sheet-rule__demo-row:first-child { border-top: none; }
.c-sheet-rule__demo-row--head { background: var(--sheet-fill); color: var(--sheet-neutral-tx); font-weight: 700; }
.c-sheet-rule__demo-num {
  display: flex;
  flex: 0 0 1.75rem;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--sheet-border-soft);
  background: var(--sheet-fill);
  color: var(--sheet-neutral-tx);
}
.c-sheet-rule__demo-cell {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c-sheet-rule__demo-cell--wide { flex-grow: 2; }
.c-sheet-rule__demo-tag { flex: 0 0 auto; color: var(--sheet-ok-tx); font-weight: 700; }
/* "다음 발송" 줄 — 여기에 적으면 된다는 자리. 점선 + 옅은 브랜드 면으로 "빈 자리"임을 보인다. */
.c-sheet-rule__demo-row--next {
  margin: 2px;
  border: 1px dashed var(--point-blue-1);
  border-radius: var(--radius-sm);
  background: var(--sheet-info-bg);
  color: var(--sheet-info-tx);
  font-weight: 700;
}
.c-sheet-rule__demo-row--next .c-sheet-rule__demo-num {
  border-right-color: transparent;
  background: transparent;
  color: var(--sheet-info-tx);
}
.c-sheet-rule__demo-tag--next { color: var(--sheet-info-tx); }

.c-sheet-rule__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-sheet-rule__item { display: flex; align-items: flex-start; gap: var(--space-3); }
/* 둥근 표시 — 22px 은 작은 아이콘이라 px 고정(반응형 규약) */
.c-sheet-rule__mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1;
}
.c-sheet-rule__item--do .c-sheet-rule__mark   { background: var(--sheet-ok-bg);     color: var(--sheet-ok-tx); }
.c-sheet-rule__item--dont .c-sheet-rule__mark { background: var(--sheet-danger-bg); color: var(--sheet-danger-tx); }
.c-sheet-rule__text { min-width: 0; }
.c-sheet-rule__title { margin: 0; font-size: var(--text-body-m); font-weight: 700; line-height: 1.5; color: var(--color-text-strong); }
.c-sheet-rule__desc  { margin: var(--space-1) 0 0; font-size: var(--text-body-m); line-height: 1.6; color: var(--color-text-muted); }
.c-sheet-rule__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sheet-neutral-bg);
  color: var(--sheet-neutral-tx);
  font-size: var(--text-caption);
  line-height: 1.6;
}

/* ============================================================
   추가 보정
   ============================================================ */

/* ---- 화면3: 미리보기 위 안내 상자 아래 여백 ----
   시트 1행이 비면 "1행을 헤더로 지정해 주세요" 상자가 미리보기 표(또는 빈 상태 박스) 바로 위에 붙어 나왔다.
   같은 자리에 번갈아 뜨는 안내 4종(잘림·헤더 없음·헤더 중복·빈 시트)을 함께 잡는다 — 하나만 고치면
   둘이 동시에 뜰 때 아래쪽 상자가 다시 표에 붙는다. data 훅이 화면3 에만 있어 다른 화면으로 새지 않는다.
   간격은 이 화면의 안내 묶음이 쓰는 --space-4. */
.c-sheet.c-sheet--std [data-preview-truncated],
.c-sheet.c-sheet--std [data-preview-header-missing],
.c-sheet.c-sheet--std [data-preview-header-dup],
.c-sheet.c-sheet--std [data-preview-blocked] { margin-bottom: var(--space-4); }
/* 같은 상자 안 [감지 시작 행으로 이동] 버튼이 설명 문장에 붙어 있었다 */
.c-sheet.c-sheet--std [data-preview-header-missing] [data-goto-startrow] { margin-top: var(--space-3); }

/* ---- 화면3: 중복 발송 카드 ----
   본문이 숨겨지는 상태가 있다. 그때 카드의 마지막 자식이 숨은 본문이 되어
   머리가 `.c-sheet-card > *:last-child` 아래 여백을 잃는다 → 지급조건 카드(`:has(#sbRuleUse)`)와 같은 값으로 머리에 아래 여백을 준다.
   #sbDupSend 는 화면3 에만 있다. */
.c-sheet.c-sheet--std .c-sheet-card__head:has(#sbDupSend) { padding-bottom: var(--space-6); }
/* 잠긴 토글 — 눌러 보기 전에 알 수 있게 흐리게 + 금지 커서.
   공용 :disabled 가 아니라 전용 data 표식에만 건다.
   흐림 정도는 화면1 준비 중 카드와 같다. */
.c-sheet.c-sheet--std .c-sheet-switch[data-dup-noperm] { cursor: not-allowed; }
.c-sheet.c-sheet--std .c-sheet-switch[data-dup-noperm] .c-sheet-switch__track { opacity: .55; }
/* 권한 신청 안내 — 회색 상자(.c-sheet-rule__note)를 그대로 쓰고 안에서 문장 | [문의하기] 를 가로로 세운다.
   ⚠ 새 이름(c-sheet-dupnote): 제품에 "안내문 + 오른쪽 작은 버튼" 회색 상자 블록이 따로 없다. */
.c-sheet.c-sheet--std .c-sheet-dupnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.c-sheet.c-sheet--std .c-sheet-dupnote__text { flex: 1 1 auto; min-width: 0; margin: 0; }
.c-sheet.c-sheet--std .c-sheet-dupnote .c-sheet-btn { flex: 0 0 auto; }

/* ---- 화면3: 본인 번호 행 안내 ----
   미리보기 아래 "전화번호 형식이 이상한 행은…" 바로 아래(12px). 상자 모양은 회색 안내(.c-sheet-rule__note)를 쓰고
   색만 같은 카드의 경고 상자(.c-sheet-notice--warn)와 같은 연한 주황으로 바꾼다. 느낌표는 첫 줄에 맞추고
   오른쪽 [문의하기]는 상자 세로 가운데(중복 발송 카드 .c-sheet-dupnote 와 같은 가로 배치).
   ⚠ 새 이름(c-sheet-own-number): "경고색 안내문 + 오른쪽 작은 버튼" 상자가 제품에 따로 없다. */
.c-sheet.c-sheet--std .c-sheet-own-number { margin-top: var(--space-3); }
.c-sheet.c-sheet--std .c-sheet-own-number__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--sheet-warn-bg);
  color: var(--color-text-strong);
  font-size: var(--text-body-m);
}
.c-sheet.c-sheet--std .c-sheet-own-number__msg { display: inline-flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
/* 18px 아이콘 — 작은 아이콘이라 px 고정(반응형 규약). 첫 줄(14px × 1.6) 가운데에 오도록 2px 내린다. */
.c-sheet.c-sheet--std .c-sheet-own-number__icon { flex: none; margin-top: 2px; fill: var(--sheet-warn-tx); }
.c-sheet.c-sheet--std .c-sheet-own-number__icon-mark { fill: var(--color-white); }
.c-sheet.c-sheet--std .c-sheet-own-number__text { line-height: 1.6; }
.c-sheet.c-sheet--std .c-sheet-own-number__em { color: var(--sheet-warn-tx); font-weight: 700; }
.c-sheet.c-sheet--std .c-sheet-own-number .c-sheet-btn { flex: none; }

/* ---- 화면5: 상단 회색 안내 상자 세로 가운데 ----
   기본 .c-sheet-notice 가 align-items:flex-start 라 오른쪽 복구 버튼보다 키가 작은 한 줄 안내가 위에 붙어 있었다.
   사유마다 문장 길이가 달라 문구별로 고치지 않고 상자에서 가운데 정렬한다(여러 줄이어도 버튼이 문단 가운데에 선다).
   --muted 는 화면5 에만 있다(복구 팝업 안 상자는 버튼이 없어 결과가 같다). */
.c-sheet.c-sheet--std .c-sheet-notice.c-sheet-notice--muted { align-items: center; }

/* ---- 화면5: 발송 이력 주문번호 링크 ----
   링크처럼 보이는 button 이다 → 버튼 기본 외형을 지운다.
   표가 nowrap 이라 좁은 폭에서는 기존 가로 스크롤을 그대로 탄다. */
.c-sheet.c-sheet--std .c-sheet-ordlink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--point-blue-1);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.c-sheet.c-sheet--std .c-sheet-ordlink:hover,
.c-sheet.c-sheet--std .c-sheet-ordlink:focus-visible { text-decoration: underline; }

/* ---- 화면1·2: 1분 미리보기 Step2 간격 ----
   상품 카드 3장 바로 아래에 상품권 안내(노란 상자)가, 그 아래에 메시지 칸이 간격 없이 붙어 있었다.
   ⚠ 이 모달은 body 끝에 따로 붙어 .c-sheet--std 밖이다 — 모달 고유 이름으로 좁힌다. */
.c-sheet.c-sheet-preview-modal .c-sheet-preview-modal__cards + .c-sheet-notice { margin-top: var(--space-4); }
.c-sheet.c-sheet-preview-modal .c-sheet-preview-modal__body > .c-sheet-field { margin-top: var(--space-5); }
/* 완료 단계 — 요약 카드 바로 아래 회원 유형 안내(회색 상자)와 12px 간격 */
.c-sheet.c-sheet-preview-modal .c-sheet-preview-modal__report-card + .c-sheet-notice { margin-top: var(--space-3); }

/* ---- 화면1·2: 소개 페이지(/automation/intro)로 가는 글자 링크 ----
   파란 굵은 글자(--point-blue-text = 텍스트용 AA 변이). 크기는 놓인 문단을 따른다(상속). */
.c-sheet-introlink {
  color: var(--point-blue-text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.c-sheet-introlink:hover,
.c-sheet-introlink:focus-visible { text-decoration: underline; }
/* 화면2 머리 설명 끝에 붙는 링크 — 설명과 12px 띄우되, 줄이 넘어가 링크가 다음 줄로 내려가면 들여쓰기 없이 시작한다.
   margin-left 는 줄바꿈 뒤에도 남으므로 쓰지 않고 flex-wrap 의 column-gap(같은 줄 사이에만 생긴다)으로 띄운다. */
.c-sheet__desc--withlink {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
}
/* 화면1 '구글시트 연동' 줄 — 줄 링크(.c-sheet-feature__body, 연동 목록)와 소개 링크를 형제로 묶는 칸.
   <a> 안에 <a> 를 둘 수 없어 감싸는 칸이 하나 늘었다. 늘어나는 폭 규칙은 __body 에서 옮겨 온 것이다. */
.c-sheet-feature__main { flex: 1 1 auto; min-width: 0; }
.c-sheet-feature__main > .c-sheet-introlink {
  display: inline-block;
  margin-top: 10px;   /* 시안 값(토큰 8/12 사이) */
  font-size: var(--text-body-m);
}

/* ---- 화면4: 수정 모드 "상품 변경 확인" 팝업 ----
   [확인]은 "바뀐 상품의 가격과 유효기간을 확인했어요" 체크 전까지 aria-disabled 다. 공용 팝업에는 잠긴 [확인] 모양이
   없어 눌릴 것처럼 보인다 → 이 팝업([data-goods-change-modal], 화면4 전용 훅)에만 흐림을 건다. 공용 .popup_confirm 은 건드리지 않는다. */
[data-goods-change-modal] .popup_close_btn .popup_confirm[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ---- 상품 선택 모달: RM "기업, 대학 전용" 이미지 칩 ----
   상품 목록 카드의 RM 칩(main.css `.c-badge--tag` — 이미지 우하단 8px, 배경 --color-stripe-purple, 흰 글자, nowrap)과
   같은 자리·같은 색이다. 이 모달을 싣는 화면(화면4·화면5)은 main.css 를 싣지 않아 .c-badge 를 그대로 쓸 수 없다 —
   같은 카드의 Day 배지(.c-sheet-goods__limit, `.c-badge--day` 의 모달판)와 같은 방식으로 모달 전용 칩을 둔다.
   크기(패딩·radius·11px 700)는 같은 썸네일 안 Day 배지에 맞춘다(한 카드에 두 배지 크기가 다르면 어긋나 보인다).
   우상단은 선택 원(.c-sheet-goods__radio/__check)이 쓰므로 우하단이 비어 있다. */
.c-sheet-goods__tag {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  max-width: calc(100% - var(--space-4));
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-stripe-purple);
  color: var(--color-white);
  font-size: 11px;                   /* Day 배지와 같다 — 대응 rem 토큰 없음(--text-caption 은 12px) */
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}