/* =============================================================================
   CAPTAIN CARE Ver.02 — base.css   (I2 · 2026-07-31)
   브랜드북(캡틴다이어트 전자책 41p)의 지면 규칙을 화면으로 옮긴 것.

     ① 라임은 표지에만. 본문은 흰 배경 + 먹색.
     ② 챕터 헤더 = 먹색 바에 흰 글씨.
     ③ 섹션 = 큰 숫자 + 국문 제목 + 「: 부제」.
     ④ 사진은 전폭으로 크게, 한 장. 카드 그리드로 잘게 썰지 않는다.
     ⑤ 강조는 볼드 + 라임 하이라이트. 문장은 짧고 여백은 넓다.
============================================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── 타이포 ─────────────────────────────────────────────────────────────── */
.t-display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.t-h1      { font-size: var(--fs-h1);  font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.t-h2      { font-size: var(--fs-h2);  font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.t-sm      { font-size: var(--fs-sm); }
.t-xs      { font-size: var(--fs-xs); }
.t-dim     { color: var(--ink-70); }
.t-mute    { color: var(--ink-45); }
.t-num     { font-variant-numeric: tabular-nums; }   /* 체중·금액이 흔들리지 않게 */

/* 브랜드북 강조 = 볼드 + 라임 하이라이트 */
.t-mark {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--lime) 58%);
  padding: 0 .1em;
}

/* ③ 섹션 머리 — 큰 숫자 + 제목 + 부제 */
.sec-head { margin-bottom: var(--sp-5); }
.sec-head .num { font-size: var(--fs-display); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sec-head .ttl { font-size: var(--fs-h1); font-weight: 700; margin-top: var(--sp-2); }
.sec-head .sub { color: var(--ink-70); margin-top: var(--sp-1); }

/* ② 챕터 바 — 먹색 바탕에 흰 글씨 */
.chapter-bar {
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-weight: 700; letter-spacing: -.01em;
}

/* ── 레이아웃 ───────────────────────────────────────────────────────────── */
.page   { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
.read   { max-width: var(--read-max); }
.stack > * + * { margin-top: var(--sp-4); }
.row    { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow   { flex: 1 1 auto; min-width: 0; }
/* 🔴 **회원 화면은 폰으로 본다** — `.row`/`.row-between` 에는 `flex-wrap` 이 없어서
   320px 폭에서 이름 + 입력칸 + 버튼이 서로를 밀어낸다(2026-08-05 감사).
   `m/condition` 이 이미 인라인 `flexWrap: "wrap"` 으로 그 처방을 쓰고 있었는데
   **한 자리에만** 있었다 — 인라인이라 다른 화면이 그것을 못 답습했다.
   🔑 *한 화면이 찾은 처방을 인라인으로 두면, 그것은 처방이 아니라 그 화면의 사정이 된다.* */
.row-wrap { flex-wrap: wrap; }

/* ④ 전폭 사진 — 지면처럼 크게 한 장 */
.hero-photo {
  width: 100%; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-08);
}
.hero-photo img { width: 100%; height: auto; object-fit: cover; }

/* ── 표면 ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.card-quiet { background: var(--paper-dim); border-color: transparent; }
.card-lime  { background: var(--lime-wash); border-color: var(--lime-deep); }

/* ── 접힘 상자 (2026-08-06) — 이력은 접고 현재를 앞세운다 ─────────────────────
   summary 는 터치 타깃 44px 규약을 지킨다(회원·직원 공용 헬퍼라 예외 없음). */
.fold {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-md);
}
.fold > .fold-head {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; list-style: none; user-select: none;
}
.fold > .fold-head::-webkit-details-marker { display: none; }
.fold > .fold-head::before {
  content: "▸"; color: var(--ink-45); font-size: var(--fs-sm);
  transition: transform .12s ease;
}
.fold[open] > .fold-head::before { transform: rotate(90deg); }
.fold .fold-title { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.fold > .fold-body { padding: 0 var(--sp-4) var(--sp-4); }

/* 분류 칩 — 설명서의 파스텔 5색 */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  background: var(--ink-08);
}
/* 🔴 **누를 수 있는 칩은 44px 을 지킨다** (2026-08-05 · 감사)
   `.chip` 은 원래 *상태를 보여주는 조각*이라 작아도 됐다. 그런데 `m/health` 의
   제공자 고르개(카카오톡 / 통신사 PASS)가 `.chip` 으로 만들어진 **버튼**이었고,
   `padding: 4px` + `--fs-xs` 라 실제 터치 높이가 약 26px 이었다 — 같은 CSS 가
   `.btn`·`.input`·`.check` 에는 전부 `--touch`(44px)를 거는데 이 자리만 빠져 있었다.
   ⚠ 회원 화면은 **폰으로** 쓴다. 26px 짜리 조작부는 손가락으로 정확히 못 누른다.
   🔑 *같은 클래스가 보여주기도 하고 누르게도 하면, 누르는 쪽 규격을 따라야 한다.*
   → 요소 선택자를 붙여 **버튼일 때만** 규격을 올린다(표시용 칩은 그대로 작다). */
button.chip { min-height: var(--touch); padding-inline: var(--sp-4); }

.chip-mint     { background: var(--cat-mint); }
.chip-pink     { background: var(--cat-pink); }
.chip-lavender { background: var(--cat-lavender); }
.chip-sky      { background: var(--cat-sky); }
.chip-lime     { background: var(--cat-lime); }

/* ── 조작부 — 태블릿 우선(44px 최소) ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; background: var(--ink-08); color: var(--ink);
  transition: filter .12s ease, background .12s ease;
}
.btn:hover  { filter: brightness(.97); }
.btn:active { filter: brightness(.94); }
.btn:focus-visible { outline: 3px solid var(--lime-shade); outline-offset: 2px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-lime    { background: var(--lime); color: var(--ink); }
.btn-ghost   { background: transparent; border-color: var(--ink-20); }
.btn-lg      { min-height: var(--touch-lg); font-size: var(--fs-h2); width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* 🔴 **줄처럼 생긴 버튼** (2026-08-05 · 감사)
   `m/today` 의 메뉴 검색 결과가 `class="btn btn-ghost row-between"` 이었다. 그런데
   `.btn` 은 이 파일에서 `.row-between`(위쪽)보다 **뒤에** 있고 특정도가 같으므로
   **뒤엣것이 이긴다** — 즉 `justify-content: center` 와 `white-space: nowrap` 이 살아서
   ⑴ 의도한 좌우 배치가 아예 안 먹고 ⑵ **긴 음식 이름이 폰 폭에서 가로로 넘쳤다.**
   🔑 *같은 특정도의 두 클래스를 겹쳐 쓰면 이기는 쪽은 「의도」가 아니라 「파일 순서」다.*
   → 겹치기 대신 전용 클래스를 둔다. 이름이 길면 **줄바꿈**하고 왼쪽으로 정렬한다. */
.btn-row {
  justify-content: space-between; white-space: normal; text-align: left;
  padding-block: var(--sp-2);
}

.field { display: block; }
.field > .label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.input {
  width: 100%; min-height: var(--touch); padding: 0 var(--sp-3);
  font: inherit; color: var(--ink);
  border: 1px solid var(--ink-20); border-radius: var(--r-md); background: var(--paper);
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }

/* ── 직원 콘솔 셸 ───────────────────────────────────────────────────────── */
.shell { min-height: 100dvh; display: grid; grid-template-columns: var(--nav-w) 1fr; }
.sidenav {
  background: var(--paper-dim); border-right: 1px solid var(--ink-08);
  padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1);
}
.sidenav .brand { padding: var(--sp-2) var(--sp-2) var(--sp-5); }
.sidenav .brand img { height: 26px; width: auto; }
.navlink {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: 0 var(--sp-3);
  border-radius: var(--r-md); font-weight: 600; color: var(--ink-70);
}
.navlink:hover { background: var(--ink-08); color: var(--ink); }
.navlink[aria-current="page"] { background: var(--lime); color: var(--ink); }
.navlink .ico { width: 20px; text-align: center; flex: 0 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  border-bottom: 1px solid var(--ink-08);
  min-height: 56px; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}

/* ── 회원 PWA 셸 ──────────────────────────────────────────────────────────
   🔴 폰 레이아웃이므로 큰 화면에서 **폭을 묶는다.** 안 묶으면 데스크탑에서
      사진이 1500px 로 늘어나고 하단 탭이 화면 끝까지 벌어져 앱처럼 보이지 않는다.
      (2026-07-31 육안 검증에서 실제로 그렇게 나왔다 — 렌더를 봐야 잡히는 종류다.) */
.m-shell {
  min-height: 100dvh;
  max-width: var(--m-max); margin-inline: auto;
  border-inline: 1px solid var(--ink-08);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.m-head { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
.m-shell .page { max-width: none; }
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: min(var(--m-max), 100%); bottom: 0; z-index: 10;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper); border-top: 1px solid var(--ink-08);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-45);
  min-height: var(--touch);
}
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar .ico { font-size: 18px; line-height: 1; }

/* ── 상태 표시 ──────────────────────────────────────────────────────────── */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .v { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.stat .k { font-size: var(--fs-sm); color: var(--ink-70); }
.empty {
  border: 1px dashed var(--ink-20); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-45);
}
.scaffold-note {
  background: var(--lime-wash); border: 1px solid var(--lime-deep);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-70);
}

/* ── 표 — 직원 콘솔의 기본 표시 단위 (F06·F07 부터) ──────────────────────
   🔴 넓은 표는 **자기 안에서** 가로 스크롤한다. 페이지 본문이 좌우로 밀리면
      태블릿에서 네비까지 같이 움직여 조작이 어긋난다. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th {
  text-align: left; font-weight: 600; color: var(--ink-70);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink-20);
  white-space: nowrap;
}
.tbl td {
  padding: var(--sp-3); border-bottom: 1px solid var(--ink-08);
  vertical-align: middle;
}
/* 행 자체가 터치 타깃이다 — 44px 를 셀 패딩이 아니라 행 높이로 보장한다 */
.tbl tbody tr { min-height: var(--touch); }
.tbl tbody td { height: var(--touch); }
.tbl tbody tr[tabindex] { cursor: pointer; }
.tbl tbody tr[tabindex]:hover { background: var(--paper-dim); }
.tbl tbody tr[tabindex]:focus-visible { outline: 3px solid var(--lime-shade); outline-offset: -3px; }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── 직원 콘솔 본문 열 ─────────────────────────────────────────────────────
   🔴 flex 컨테이너로 만들지 말 것. 안쪽 `main.page` 가 `margin: 0 auto` 인데,
      flex 아이템의 좌우 auto margin 은 **stretch 를 꺼버린다** → main 이 내용
      크기로 쪼그라들어 500px 화면에서 본문이 221px 이 됐다(2026-07-31 실측).
      블록이면 그냥 채운다. */
.shell-body { min-width: 0; }

/* ── 입력 폼 격자 — 태블릿에서 2열, 폰에서 1열 ───────────────────────────── */
.form-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
select.input { appearance: auto; }

/* ── 구분선 문구 ("또는") ────────────────────────────────────────────────── */
.hr-or {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink-45); font-size: var(--fs-sm);
}
.hr-or::before, .hr-or::after {
  content: ""; flex: 1; height: 1px; background: var(--ink-20);
}

/* ── 토스트 — 저장·실패를 알리되 화면을 막지 않는다 ─────────────────────── */
.toast-host {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(420px, calc(100vw - var(--sp-5))); pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-2);
  opacity: 1; transition: opacity .35s ease, transform .35s ease;
}
.toast.out { opacity: 0; transform: translateY(6px); }
.toast-warn { background: var(--warn); }
.toast-err  { background: var(--stop); }

/* ── 모달 — 되돌릴 수 없는 것 앞에서만 ──────────────────────────────────── */
/* 🔴 `.modal-wrap`·`.modal` 을 지웠다(6차 감사 · 2026-08-01) — 유일한 사용처였던
   `confirmBox()` 가 부르는 곳 0건이라 함께 정리했다. 되돌릴 수 없는 동작이 생기는
   F09·F33 에서 **그때 필요한 모양으로** 다시 만든다. */

/* ── 반응형 — 태블릿이 기준, 데스크탑은 펴고 폰은 접는다 ─────────────────── */
@media (max-width: 900px) {
  /* 🔴 grid-template-rows 를 반드시 함께 준다. 없으면 암묵 행 2개가 100dvh 를
     나눠 가져 **메뉴 줄 하나가 화면 절반 높이로 늘어난다**(실측으로 잡힌 결함). */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidenav {
    position: sticky; top: 0; z-index: 6;
    flex-direction: row; align-items: center; overflow-x: auto; gap: var(--sp-2);
    border-right: none; border-bottom: 1px solid var(--ink-08);
    padding: var(--sp-2) var(--sp-3);
  }
  .sidenav .brand { display: none; }
  .navlink { white-space: nowrap; padding: 0 var(--sp-4); }
}
@media (max-width: 560px) {
  :root { --fs-display: 1.875rem; }
  .page { padding: var(--sp-4) var(--sp-3) var(--sp-7); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 진행률 미니그래프 (F06) ────────────────────────────────────────────────
   표 안에 들어가는 아주 작은 막대. 차트 라이브러리를 넣지 않는 이유는 바이블 1-3
   그대로다 — 이 정도를 위해 번들러가 들어오면 그때부터 화면마다 다른 차트가 생긴다.
   ⚠ 폭은 인라인 style 로 준다(값이 행마다 다르므로 CSS 로는 표현할 수 없다). */
.prog     { display: flex; align-items: center; gap: var(--sp-2); min-width: 132px; }
.prog-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; overflow: hidden;
            background: color-mix(in srgb, var(--ink) 10%, transparent); }
.prog-bar > i { display: block; height: 100%; background: var(--lime-deep); }
.prog-txt { font-size: var(--fs-xs); color: var(--ink-70);
            white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 필터 줄 — 좁은 화면에서 접힌다. 태블릿 우선이라 한 줄에 다 들어가는 것이 기본이다. */
.filters        { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.filters .input { width: auto; min-width: 128px; }
.filters .search{ min-width: 220px; flex: 1 1 220px; }

/* 미확인 메시지 개수 배지 */
.badge-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px;
           background: var(--ink); color: var(--paper); font-size: var(--fs-xs);
           font-weight: 700; text-align: center; line-height: 20px; }

/* ── 회원 상세 (F07) ────────────────────────────────────────────────────────
   한 화면에 열세 덩어리가 세로로 쌓인다. 구획이 안 보이면 실장은 스크롤 중에
   자기가 어디를 보고 있는지 잃는다 — 그래서 섹션마다 제목줄에 밑줄 하나를 둔다. */
.sec     { margin-top: var(--sp-6); }
.sec-bar { margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
           border-bottom: 1px solid var(--ink-08); }
/* 섹션 **안쪽**의 작은 묶음 제목. `.chapter-bar`(먹색 띠)를 쓰면 섹션 제목보다 강해져서
   위계가 뒤집힌다 — 실제로 「복약」이 「회원 셀프 기록」보다 커 보였다(2026-07-31 육안). */
.sub-head { margin-top: var(--sp-5); margin-bottom: var(--sp-2);
            font-size: var(--fs-sm); font-weight: 700; color: var(--ink-70); }

/* 라벨–값 쌍. 태블릿 가로에서 3~4열, 좁아지면 스스로 접힌다(미디어쿼리 없이). */
.kv      { display: grid; gap: var(--sp-4);
           grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kv > div{ min-width: 0; }
.kv .k   { display: block; font-size: var(--fs-xs); color: var(--ink-45); }
.kv .v   { display: block; font-weight: 600; overflow-wrap: anywhere; }

/* 요약 숫자 4칸 — .stat 을 가로로 늘어놓는 자리 */
.statrow { display: grid; gap: var(--sp-4);
           grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* 숫자 대신 **문장**이 들어가는 칸(「목표 미설정」). 같은 크기면 판정 불가라는 말이
   네 칸 중 제일 커져서 시선을 가져간다 — 판정할 수 없다는 것이 강조할 일은 아니다. */
.stat .v-words { font-size: var(--fs-h2); }

/* 🔴 지금 보고 있는 범위와 다른 지점의 회원일 때(유저 플로우 5-b).
   경고가 아니라 안내다 — 빨강을 쓰면 "무언가 잘못됐다"로 읽힌다. */
.notice-line { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
               background: var(--lime-wash); border: 1px solid var(--lime-deep);
               font-size: var(--fs-sm); }

/* 체중 추이 — 가로만 늘리므로(preserveAspectRatio=none) 선 굵기를 고정한다.
   ⚠ non-scaling-stroke 가 없으면 넓은 화면에서 선이 뭉개진다. */
.spark        { width: 100%; height: 96px; display: block; }
.spark .line  { fill: none; stroke: var(--lime-shade); stroke-width: 2;
                stroke-linejoin: round; stroke-linecap: round;
                vector-effect: non-scaling-stroke; }
.spark .goal  { stroke: var(--ink-20); stroke-width: 1; stroke-dasharray: 5 5;
                vector-effect: non-scaling-stroke; }
/* F22 — 같은 그래프 위에서 **누가 잰 것인지**만 가른다(마커만 다르다 · 축은 하나다).
   실장 측정은 채운 점, 회원 셀프는 속이 빈 점 — 색만으로 가르면 색약에서 구분이 사라진다. */
.spark .dot-staff { fill: var(--lime-shade); }
.spark .dot-self  { fill: var(--paper); stroke: var(--lime-shade); stroke-width: 1.5; }

/* 복약 3-상태 — null 은 아예 다른 글자(—)이고, 여기서는 색만 가른다 */
.tri-yes { color: var(--ok); font-size: 1.05em; }
.tri-no  { color: var(--ink-45); font-size: 1.05em; }

/* 동의 체크 한 줄 (F01) — 🔴 상자만 누르게 두면 태블릿에서 사실상 못 누른다.
   라벨 전체가 히트 영역이고 높이는 44px 를 넘긴다(I2 전제: 태블릿 우선). */
.check { display: flex; gap: var(--sp-3); align-items: flex-start;
         padding: var(--sp-3) 0; cursor: pointer; min-height: 44px; }
.check + .check { border-top: 1px solid var(--ink-08); }
.check-box  { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px;
              accent-color: var(--lime-shade); cursor: pointer; }
.check-text { display: block; }
.check-label { display: block; font-size: var(--fs-sm); font-weight: 600; }
/* 필수/선택 표시는 라벨 옆에 붙는 작은 글자다 — 색만으로 가르지 않는다(글자로도 말한다) */
.check-mark { margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: 600;
              color: var(--ink-45); }
.check-all  { border-bottom: 1px solid var(--ink-20); }
.check-all .check-label { font-size: var(--fs-body); }