/*
 * ============================================================
 *  CJ대한통운 판 — 밝은 판·어두운 판 둘 다
 * ============================================================
 *
 * 값의 출처는 cjlogistics.com 이 실제로 쓰는 색이다 (2026-08 확인)
 *   파랑 #007ac3 · 선 #e3e4e5 · 서체 Noto Sans KR · 오른쪽 아래 모서리를 30° 자른 상자
 *
 * ── 이 판이 하는 일 ─────────────────────────────────────
 *
 * 화면 하나에 카드가 열 장이고 카드마다 표·대화·목록이 들어간다.
 * 그래서 이 판이 푸는 문제는 둘뿐이다.
 *
 *   ① **어디부터 어디까지가 한 덩어리인가** — 카드 머리는 파랑 띠, 카드 경계는 진한 선,
 *      막대와 작업 자리는 2px 선. 화면 바탕(회색)과 카드(흰색)의 밝기 차이가
 *      그 위에 한 겹 더 얹힌다.
 *   ② **그 안에서 무엇을 먼저 읽는가** — 카드 제목(파랑 띠) → 표 항목명(무채 띠) → 값.
 *      띠 아래로는 크기·진하기·흐리기 세 가지로만 정하고 색을 더 쓰지 않는다.
 *
 * ── 지키는 것 다섯 ──────────────────────────────────────
 *
 * 1. **카드 제목은 CJ 파랑 띠에 흰 글자로 앉힌다.** 카드가 어디서 시작하는지와
 *    그 카드가 무엇인지가 한 번에 읽힌다 — 이 판에서 가장 큰 구획이고, 사업지 색이
 *    서는 자리도 여기다. 띠는 **얇게**(글자 높이 + 위아래 0.55rem) 둔다.
 * 2. **파랑 면은 그 띠 하나뿐이다.** 표 항목명 줄·상단 막대·탭까지 파랗게 하면
 *    카드 열 장에 파란 덩어리가 서른 개가 되고, 그때부터 파랑은 아무것도 가리키지 못한다.
 *    그 셋은 무채색 띠와 선이 맡는다.
 * 3. 나머지 파랑은 **지금 하는 일**에만 — 고른 탭 밑줄, 적는 칸, 누를 단추, 본문 링크.
 * 4. 표는 눈이 가로로 미끄러지지 않게 한 줄 걸러 아주 옅게 깐다. 숫자는 자릿수를 맞춘다.
 * 5. 모양은 한 갈래. 전부 각지게. CJ 의 잘린 모서리는 기본 단추 하나에만.
 *
 * ── ⚠️ 어두운 판을 반드시 함께 적는다 ───────────────────
 *
 * 앱의 무채색은 [data-theme="dark"] 가 통째로 뒤집어 준다. 그런데 여기서 숫자로 박은
 * 값은 안 뒤집힌다 — 뒤집는 쪽이 그 이름을 모르기 때문이다. 밝은 판만 적어 두면
 * 어두운 화면에 그 값들만 밝은 채로 남아, 카드마다 흰 띠가 하나씩 가로지른다.
 * (실제로 그렇게 났다 — --card-head-bg · --card-head-ink 둘이 범인이었다)
 *
 * 세기도 맞춰야 한다. 앱의 :root[data-theme='dark'] 와 우리 :root:root 는 세기가 같아서
 * 나중에 실린 쪽이 이긴다 — 앱 시트가 뒤다. 그래서 어두운 판은 :root:root[data-theme]
 * 로 한 겹 더 얹는다.
 *
 * **역할색·상태색의 옅은 톤은 여기서 안 고친다** — 앱이 한다(`index.css`, 여섯 색 전부).
 * 한때 이 파일에 그 표가 통째로 들어 있었는데, 앱으로 옮겨 간 뒤로는 같은 일을 두 곳에서
 * 하는 것이라 지웠다. 어두운 판에서 배지 색이 이상하면 고칠 자리는 `index.css` 다.
 *
 * ── 시연 ────────────────────────────────────────────────
 *
 * 회의실에서는 어두운 판이 잘 보인다 — [설정 › 테마 › 화면 밝기] 를 [어둡게].
 * 밝기만 바뀌고 읽는 순서는 같다.
 *
 * 놓는 자리: jar 옆 site/site-theme.css
 * 되돌리기: 파일을 비우거나 지운다 (재기동 필요 없음)
 */

/* ════════════════════════════════════════════════════════
   1. 값 — 밝은 판
   ════════════════════════════════════════════════════════ */

:root:root {
  /* 대표색 — 600 이 CJ 파랑 #007ac3 그대로다. 나머지는 흰색·검은색을 섞은 단계 */
  --c-brand-50: 242 248 252;
  --c-brand-100: 224 239 248;
  --c-brand-200: 191 222 240;
  --c-brand-300: 140 195 228;
  --c-brand-400: 82 165 214;
  --c-brand-500: 38 142 204;
  --c-brand-600: 0 122 195;
  --c-brand-700: 0 107 172;
  --c-brand-800: 0 92 146;
  --c-brand-900: 0 76 121;
  --c-brand-ink: 255 255 255;

  /*
   * 바탕 셋의 간격이 곧 구획이다 — **화면 바탕은 확실히 회색, 카드는 흰색.**
   * 앱 기본값(241 245 249)은 흰 카드와 너무 가까워 카드가 몇 장인지 세어지지 않았다.
   * 무채색에 파랑기는 한 방울만 남긴다(청록 쪽으로 2~3). 알아볼 만큼 넣으면 화면 전체가
   * 옅은 파란 판이 되어 정작 파란 표시가 안 보인다.
   */
  --c-surface: 255 255 255;        /* 카드 */
  --c-surface-muted: 241 244 248;  /* 표 항목명 줄 · 부드러운 단추 */
  --c-surface-sunken: 226 230 236; /* 화면 바탕 */

  /*
   * 선은 **두 단**이다. 굵기와 짝지어 쓴다.
   *   --card-border  카드 테두리 · 상단 막대 아래 2px · 표 항목명 줄 아래 2px → 큰 경계
   *   --c-line       입력칸 · 스크롤 막대                                    → 중간
   *   --c-line-soft  표 줄 사이                                              → 잔선
   */
  --card-border: 196 204 214;
  --c-line: 214 220 227;
  --c-line-soft: 231 235 240;

  --c-ink: 24 30 38;               /* 순검정 아님 — 흰 종이 위에서 눈이 편하다 */
  --c-ink-soft: 100 110 122;

  --font-sans: 'Noto Sans KR', Pretendard, 'Malgun Gothic', sans-serif;

  --radius-card: 0;
  --border-w: 1px;

  /*
   * 그림자 두 겹 — 가까운 것과 먼 것.
   * 카드가 회색 바탕에서 한 장씩 떨어져 보이는 만큼만. 한 겹만 두면 선을 하나 더 그은
   * 것처럼 보이고, 진하게 주면 카드 열 장이 저마다 떠올라 화면이 울퉁불퉁해진다.
   */
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.06), 0 8px 18px -14px rgb(16 24 40 / 0.22);

  /*
   * 카드 머리 — **CJ 파랑 띠에 흰 글자**. 이 판에서 파랑 면은 여기 하나다.
   *
   * 600(#007ac3)이 아니라 700 을 쓴다. 흰 글자를 얹었을 때 600 은 4.0:1 이라
   * 굵은 제목에서만 겨우 통과하고 곁말(개수·시각)은 흐려진다. 700 은 4.8:1 이라
   * 곁말까지 살아 있다 — 대표색은 단추가 지키고, 띠는 읽히는 쪽을 고른다.
   *
   * 높이는 얇게. 두꺼운 파랑 띠 열 장은 화면을 파랗게 덮고, 격자 높이(픽셀)도 먹는다.
   */
  --card-head-h: 0.55rem;
  --card-head-bg: var(--c-brand-700);
  --card-head-ink: 255 255 255;

  /* 스크롤 막대 — 물려받는 속성이라 여기 한 번이면 화면 전체가 따라온다 (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--c-line)) transparent;

  /*
   * 파랑 **하나**로 고른 탭·적는 칸·단추·본문 링크를 다 칠한다.
   * 나누면 반드시 어긋난다 — 선은 500, 글자는 300 이던 때 바로 위아래가 미묘하게
   * 다른 파랑이 되어 손이 덜 간 것처럼 보였다.
   * 값은 **글자 대비로** 고른다. 밝은 판 700 · 어두운 판 400 — 양쪽 다 5.3~5.5:1.
   */
  --cj-accent: var(--c-brand-700);

  /*
   * 표 — 한 줄 걸러 까는 바탕과 손가락이 지나는 줄.
   * 줄무늬는 **거의 안 보일 만큼**이다(0.022). 보이기 시작하면 그것이 격자가 되어
   * 정작 값이 뒤로 밀린다. 하는 일은 눈이 가로로 미끄러지지 않게 잡아 주는 것뿐이다.
   */
  --cj-stripe: rgb(20 30 45 / 0.022);
  --cj-row-hover: rgb(var(--c-brand-600) / 0.07);
}

/* ════════════════════════════════════════════════════════
   2. 값 — 어두운 판
   ════════════════════════════════════════════════════════
   앱이 뒤집어 주는 것(무채색 열 단계)은 그대로 두고, CJ 가 다르게 잡는 것만 적는다.
   앱 기본 어두운 판은 남보라 쪽인데 CJ 파랑은 청록 쪽이라, 나란히 두면 바탕이 붉게 보인다.
   ──────────────────────────────────────────────────────── */

:root:root[data-theme='dark'] {
  /*
   * 바탕 셋의 간격을 밝은 판과 같게 벌린다 — 화면 < 카드 < 머리 순으로 밝아진다.
   * 어두운 화면에서 구획은 그림자가 아니라 밝기 차이로만 보인다.
   */
  --c-surface: 27 33 42;           /* 카드 */
  --c-surface-muted: 37 45 56;     /* 표 항목명 줄 · 부드러운 단추 */
  --c-surface-sunken: 13 17 22;    /* 화면 바탕 — 카드보다 확실히 어둡게 */

  --card-border: 74 88 104;        /* 카드 경계 — 선보다 한 단 밝게 */
  --c-line: 55 66 79;
  --c-line-soft: 41 50 61;

  --c-ink: 228 234 241;            /* 순백 아님 — 어두운 바탕에서 눈이 아프다 */
  --c-ink-soft: 152 163 176;

  /*
   * 띠는 한 단 어둡게(800). 어두운 화면에서 700 띠는 카드 열 장이 저마다 빛나 보인다 —
   * 밝은 판과 반대 방향으로 가야 같은 무게가 된다. 흰 글자 대비는 6.0:1 로 오히려 낫다.
   */
  --card-head-bg: var(--c-brand-800);
  --card-head-ink: 255 255 255;

  /*
   * 어두운 바탕에서 옅은 그림자는 안 보인다 — 검정을 진하게 깔아야 층이 생긴다.
   * (앱 기본 어두운 판은 none 이다. 여기서 되살린다)
   */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.45), 0 10px 24px -16px rgb(0 0 0 / 0.85);

  /*
   * 파랑을 한 단 밝은 쪽으로 옮긴다.
   * #007ac3 은 흰 종이 위에서 또렷하지만 어두운 바탕에서는 묻힌다.
   * 대표색(600)은 그대로 둔다 — 단추 색이라 사업지 색과 어긋나면 안 된다.
   */
  --cj-accent: var(--c-brand-400);

  --cj-stripe: rgb(255 255 255 / 0.022);
  --cj-row-hover: rgb(var(--c-brand-400) / 0.1);

  scrollbar-color: rgb(var(--c-line)) transparent;
}

/* ════════════════════════════════════════════════════════
   3. 카드 — 제목은 파랑 띠 위에
   ════════════════════════════════════════════════════════ */

/*
 * 머리와 내용 사이에는 선을 안 긋는다 — 파랑 면이 곧 경계다.
 * 파랑 띠 밑에 회색 선까지 그으면 경계가 두 겹이 되어 띠가 두꺼워 보인다.
 */
.card-head.card-head {
  border-bottom-color: transparent;
}

/*
 * 제목은 파랑 띠 위의 흰 글자. 본문이 0.875rem 이므로 0.9375rem 에서 멈춘다 —
 * 띠 위 글자는 같은 크기라도 크게 보이고, 키우면 띠가 두꺼워져 격자 높이를 먹는다.
 * 자간은 아주 조금만 좁힌다. 굵은 한글은 자모가 커서 기본 자간이 헐거워 보인다.
 */
.card-head.card-head h2 {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: rgb(255 255 255);
}

/*
 * 머리 오른쪽의 곁말(개수·시각·상태)은 흰색을 조금 눌러 쓴다.
 * 회색으로 두면 파랑 띠 위에서 탁해지고, 흰색 그대로면 제목과 같은 무게가 된다.
 */
.card-head.card-head > :last-child:not(h2) {
  color: rgb(255 255 255 / 0.78);
}

/*
 * 아이콘은 제목보다 조금 작게, 한 겹 흐리게 — 같은 크기·같은 진하기면
 * 아이콘이 제목보다 무거워 보인다. 이모지도 같은 칸에서 오므로(span) 셋을 함께 짚는다.
 */
.card-head.card-head h2 svg,
.card-head.card-head h2 img,
.card-head.card-head h2 > span[aria-hidden] {
  width: 0.95em;
  height: 0.95em;
  line-height: 1;
  color: rgb(255 255 255);
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════
   4. 표 — 데이터가 먼저 읽히는 자리
   ════════════════════════════════════════════════════════
   화면에서 사람이 실제로 보는 것은 대부분 표 안의 값이다.
   항목명 줄은 **무채색 띠 + 굵은 글자 + 아래 굵은 선**으로 세운다 — 여기까지 파랗게 하면
   카드 하나에 파란 띠가 둘이 되어 어느 쪽이 카드 제목인지 사라진다(원칙 2).
   ──────────────────────────────────────────────────────── */

/*
 * `[class]` 를 붙여 세기를 올린다 — 앱이 항목명 색을 클래스로 적어 두어
 * (text-slate-500) 요소 이름만으로는 안 이긴다. 이 대괄호가 빠지면 자간만 걸리고
 * 색·굵기는 그대로다.
 */
thead th[class] {
  background-color: rgb(var(--c-surface-muted));
  color: rgb(var(--c-ink));
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-top: 7px;
  padding-bottom: 7px;
}
thead tr[class],
thead th[class] {
  border-bottom-color: rgb(var(--card-border));
}
thead tr[class] {
  border-bottom-width: 2px;
}

/*
 * 값 줄. 한 줄 걸러 아주 옅게 깔고 줄 사이는 잔선으로 남긴다 —
 * 둘 중 하나만 두면 스무 줄부터 눈이 가로로 미끄러진다.
 *
 * 바탕색이 이미 정해진 줄은 건드리지 않는다(:not([class*="bg-"])) —
 * 고른 줄·강조된 줄이 줄무늬에 섞이면 안 된다.
 */
tbody tr[class]:not([class*='bg-']):nth-child(even) {
  background-color: var(--cj-stripe);
}
tbody tr:not([class*='bg-']) {
  transition: background-color 120ms ease;
}
tbody tr:not([class*='bg-']):hover {
  background-color: var(--cj-row-hover);
}
tbody tr[class] {
  border-bottom-color: rgb(var(--c-line-soft));
}

/*
 * 줄의 첫 칸은 그 줄이 무엇인지를 말한다(상담사 이름·시각·문서 제목).
 * 한 단 진하게 두면 표를 세로로 훑을 때 눈이 그 칸만 따라간다.
 */
tbody td[class]:first-child {
  color: rgb(var(--c-ink));
  font-weight: 600;
}

/* 값 줄은 한 줄이 조금 두꺼운 편이 읽기 쉽다 — 앱 기본(py-1.5)에 2px 씩 더한다 */
tbody td[class] {
  padding-top: 7px;
  padding-bottom: 7px;
}

/*
 * 숫자는 자릿수를 맞춘다. 통화 수·금액·시각이 세로로 늘어서는 화면이라,
 * 폭이 다른 숫자는 줄마다 자리가 밀려 눈으로 세로 비교를 못 한다.
 */
table,
input,
time { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════
   5. 단추 — 잘린 모서리는 여기 하나만
   ════════════════════════════════════════════════════════ */

.btn.btn {
  border-radius: 0;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/*
 * 기본 단추 하나만 CJ 의 잘린 모서리를 쓴다. 화면에서 진한 파랑 면도 이것뿐이라
 * "여기를 누르면 된다"가 모양과 색 양쪽으로 한 번에 읽힌다.
 * 그림자는 안 준다 — 각진 판에 얹으면 잘린 모서리 밑에 그림자만 남아 어긋나 보인다.
 */
.btn-primary.btn-primary {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* 테두리를 ring 으로 그리는 둘 — 각지게 두고 선만 무채색으로 맞춘다 */
.btn-ghost.btn-ghost {
  --tw-ring-color: rgb(var(--c-line));
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
}
.btn-ghost.btn-ghost:hover { background-color: rgb(var(--c-surface-muted)); }

.btn-danger.btn-danger { --tw-ring-color: rgb(var(--c-line)); }

/*
 * 되돌리기 단추는 어두운 판에서 글자색이 안 뒤집힌다 — 색이 클래스 안에 녹아 있어
 * (@apply) `text-rose-700` 같은 이름으로는 앱 규칙에 안 걸린다. 여기서만 따로 적는다.
 */
:root[data-theme='dark'] .btn-danger.btn-danger {
  color: rgb(253 164 175);
}

/* ════════════════════════════════════════════════════════
   6. 입력칸·항목명
   ════════════════════════════════════════════════════════ */

/*
 * 입력칸은 카드보다 한 단 눌러 앉힌다 — 어두운 판에서 카드와 같은 밝기면
 * 어디까지가 적는 자리인지 안 보인다. 밝은 판에서는 흰 종이 그대로 둔다.
 */
.field.field {
  border-radius: 0;
  border-color: rgb(var(--c-line));
  padding-block: 6px;
}

:root[data-theme='dark'] .field.field {
  background-color: rgb(19 24 31);
}

/*
 * 적고 있는 칸 — 파랑을 쓰는 자리 넷 중 하나다.
 * 선 색만 바꾸고 두께는 그대로 둔다. 굵히면 칸 높이가 1px 밀려 옆 칸과 어긋난 것처럼
 * 보인다. 무게는 안쪽 선으로 준다. 바깥으로 번지는 빛은 안 쓴다 —
 * 각진 판에서 번져 나온 빛만 둥글어 혼자 논다.
 */
.field.field:focus {
  border-color: rgb(var(--cj-accent));
  box-shadow: inset 0 0 0 1px rgb(var(--cj-accent) / 0.45);
}

/* 항목명은 작고 흐리게, 자간만 조금 넓힌다 — 작은 글자는 좁으면 뭉쳐 읽힌다 */
.label.label {
  color: rgb(var(--c-ink-soft));
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════
   7. 상단 막대 · 탭 · 로그인
   ════════════════════════════════════════════════════════ */

/*
 * 상단 막대와 작업 자리는 **2px 선**으로 가른다.
 * 파랑으로 채우지 않는다 — 카드 머리 띠가 이미 파랑이라, 막대까지 파랗게 하면
 * 화면 위쪽이 통째로 파란 판이 되고 카드 제목이 그 안에 묻힌다(원칙 2).
 */
.app-header.app-header {
  background-color: rgb(var(--c-surface));
  border-bottom-width: 2px;
  border-bottom-color: rgb(var(--card-border));
  box-shadow: none;
}

/*
 * 고른 탭 — 파랑을 쓰는 자리 넷 중 하나다.
 *
 * 알약으로 채우지 않는다. 채우면 막대 안에 덩어리가 생겨 옆의 사업지 이름과 다투고,
 * 탭이 늘면 덩어리도 는다. 대신 **밑줄 2px** 로 짚는다 — 탭이 몇 개든 줄은 하나다.
 * 글자는 먹색으로 진하게: 색이 아니라 진하기가 "여기"를 말한다.
 */
.app-header [class~='bg-brand-50'] {
  background-color: transparent;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 0 rgb(var(--cj-accent));
}
.app-header [class~='bg-brand-50'][class~='text-brand-700'] {
  color: rgb(var(--c-ink));
  font-weight: 700;
}

/*
 * 로그인 상자만 위에 파랑 2px 을 둔다.
 * 그 화면에는 카드가 한 장뿐이라 파랑이 반복되지 않고, 처음 만나는 화면이라
 * 사업지 색이 한 번은 서 있어야 한다.
 */
.login-card.login-card {
  border-radius: 0;
  border-top: 2px solid rgb(var(--cj-accent));
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 18px 40px -28px rgb(16 24 40 / 0.35);
}

/* ════════════════════════════════════════════════════════
   8. 목록의 키워드 뱃지 — 여기서만 키운다
   ════════════════════════════════════════════════════════
   상담 이력·콜 이력 줄 오른쪽에 붙는 말(해지·환불·변질…)이다. 화면 코드는 10px 로
   그리는데, 그 줄에서 **사람이 실제로 찾는 값**이 그것이라 이 사업지에서는 키운다.

   화면 코드를 고치지 않는 이유는 크기가 사업지마다 다르기 때문이다 — 목록을 빽빽하게
   쓰는 곳에서는 10px 가 맞고, 여기서는 아니다. 요소 설정([글자 크기])을 따르게 만들면
   제목·곁말까지 같이 움직여 줄 높이가 바뀐다.

   ── 짚는 법 ────────────────────────────────────────────

   뱃지를 가리키는 이름이 따로 없어 **생김새로 짚는다.** 셋을 겹쳐 다른 뱃지와 가른다.
     span + min-w-0        목록 줄의 키워드 (묶음 목록 쪽은 button 이라 안 걸린다)
     span + ring-slate-200 접힌 개수 (+n)
   `[class~=]` 는 공백으로 나뉜 이름 하나를 정확히 짚는다 — `[class*=]` 로 적으면
   `text-[0.6875rem]` 같은 다른 크기까지 걸린다.
   ──────────────────────────────────────────────────────── */

span[class~='rounded-full'][class~='min-w-0'][class~='text-[0.625rem]'],
span[class~='rounded-full'][class~='ring-slate-200'][class~='text-[0.625rem]'] {
  font-size: 0.875rem;   /* 10px → 14px */
  line-height: 1.3;
  padding-inline: 0.5rem;
}

/*
 * 색 — **CJ 파랑 칩.**
 *
 * 화면 코드는 키워드에 `warning`(앰버)을 고정으로 준다. 그런데 상담 이력 줄은 상태에 따라
 * 이미 앰버로 칠해져 있어서, 앰버 줄 위에 앰버 칩이 얹히면 둘 다 탁한 갈색으로 뭉친다.
 * 키워드는 경고가 아니라 **그 줄에서 찾는 값**이라 색의 뜻도 안 맞는다.
 *
 * 파랑은 어느 상태색(앰버·초록·빨강) 위에서도 겹치지 않는 유일한 색이다 — 상태는 밖에서
 * 정해져 늘어날 수 있고, 파랑은 이 판이 쥐고 있다.
 *
 * **반투명으로 깔지 않는다.** 0.18 쯤으로 깔면 밑의 앰버가 비쳐 줄마다 다른 색이 된다.
 * 어두운 판에서도 불투명 값을 적는 이유가 그것이다.
 *
 * 무채색 칩(회색 바탕 + 먹색 글자)도 후보였다. 읽기는 그쪽이 조금 낫지만, 사업지 색이
 * 화면에서 카드 머리 띠 하나로 줄어든다.
 */
span[class~='rounded-full'][class~='min-w-0'][class~='text-[0.625rem]'] {
  background-color: rgb(var(--c-brand-100));
  color: rgb(var(--c-brand-900));
  --tw-ring-color: rgb(var(--c-brand-300));
}
:root[data-theme='dark'] span[class~='rounded-full'][class~='min-w-0'][class~='text-[0.625rem]'] {
  background-color: rgb(17 49 71);
  color: rgb(176 214 238);
  --tw-ring-color: rgb(var(--c-brand-400) / 0.45);
}

/* 접힌 개수(+n)는 무채로 남긴다 — 키워드가 아니라 "더 있다"는 표시다 */
span[class~='rounded-full'][class~='ring-slate-200'][class~='text-[0.625rem]'] {
  background-color: rgb(var(--c-surface-muted));
  color: rgb(var(--c-ink-soft));
  --tw-ring-color: rgb(var(--c-line));
}
:root[data-theme='dark'] span[class~='rounded-full'][class~='ring-slate-200'][class~='text-[0.625rem]'] {
  background-color: rgb(45 55 66);
  color: rgb(190 200 212);
  --tw-ring-color: rgb(255 255 255 / 0.14);
}

/* ════════════════════════════════════════════════════════
   9. 마감 — 손 안 댄 자리 하나가 나머지를 다 미완성으로 만든다
   ════════════════════════════════════════════════════════ */

/*
 * 스크롤 막대. 기본값은 굵고 회색이라 카드 안에서 제일 진한 것이 스크롤 막대가 된다.
 * 투명한 테두리로 안쪽을 깎아(background-clip) 가늘게 만들고, 바탕은 비운다.
 */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgb(var(--c-line));
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--c-ink-soft) / 0.55); }
*::-webkit-scrollbar-corner { background: transparent; }

/* 글자를 끌었을 때 — 브라우저 기본 파랑 대신 사업지 색으로 */
::selection {
  background-color: rgb(var(--c-brand-200));
  color: rgb(23 33 43);
}
:root[data-theme='dark'] ::selection {
  background-color: rgb(var(--c-brand-800));
  color: rgb(241 245 249);
}

/* ════════════════════════════════════════════════════════
   10. 문서 본문
   ════════════════════════════════════════════════════════ */

.rich.rich a { color: rgb(var(--cj-accent)); }
.rich.rich h1, .rich.rich h2 { border-top-color: rgb(var(--c-line)); }
.rich.rich th { background-color: rgb(var(--c-surface-muted)); }

/*
 * 어두운 판에서 그림 밝기 뒤집기는 **앱이 한다**(`index.css` 의 `--img-filter`).
 * 사업지 취향이 아니라 어두운 판의 결함이라 여기 적지 않는다.
 * 사진이 많아 끄고 싶으면 이 파일에 한 줄 —  :root:root { --img-filter: none; }
 */