/* ── 광고·구독 홈 (/dashboard/ads) — D-827, 시안 «나 · 무대만 색면»(a2na) + «클릭 뒤 판»(step2) ──────────────────
   provider.css 뒤에 링크한다(.ind-pick 조각은 그쪽 것 · 머리는 app.css .pg-head). 토큰만 쓴다 — 예외는 아래 «색면 눈금» 블록 하나
   (홈 home.css의 그라디언트·라이브 밴드 색을 문자열 그대로 미러한 hex — PLAN-IMPL §3 CSS 계약, 새 색을 만들지 않는다).
   유채색은 상품별 색면 4(홈 메인 3종 눈금, BRIEF-A2 §1)와 «지금 할 일»이 있는 판의 주 버튼 파랑 하나; 상태는 글자.
   굵기는 400/600뿐(세무사 화면 개선 2026-10-11 — 옛 700 h3·500 강조는 600으로). 미니어처(.cb-mini*)는 실제 화면을 줄인 장식이라 그 화면의 값 그대로. 화면 머리(.pg-title)는 타이포 3단계 묶음 ①에서 600(app.css).

   구조(전폭 1열): .cb-layout = 잔액 띠 .cb-bal → 묶음 .cb-groups(광고상품 · 구독상품, 각 .cb-grid) → 합계 .cb-sum
         → (product가 있을 때만) 전폭 판 .cb-panel(왼쪽 색면 무대 .cb-pstage + 오른쪽 흰 글 판 .cb-pmain). 바닥 고지 .cb-foot.
   폭 사다리(셸 실측 — 사이드바 216 + --shell-pad clamp 16~56 ×2):
     · 카드 4열은 뷰포트 ≥ 1200(본문 ≈ 931 → 카드 ≈ 224 = 종이 185 + 패딩 28 + 여유)에서만. 1100~1199는 본문 835 → 카드 200이라
       종이가 넘치므로 769~1199는 2열, ≤ 768(사이드바 드로어, 본문 = 폰 358)은 1열.
     · 판 2열(무대 minmax(340px, 38fr) · 글 62fr)은 > 1100에서만 — 큰 미니어처 상자 296 + 패딩 44 = 340이 무대 열의 하한이고,
       현행 접힘 지점(216 + 2×22 + 340 + 판 ≥ 480 ≈ 1100)과 같다. ≤ 1100은 무대 위 · 글 아래 1열.
   폰: 버튼·summary·링크·체크 히트 44(design.md §4), 설정 dl은 라벨 위·값 아래 한 열(§6 — 2단 금지).
   모션(§7): 미니어처 순환·호버 이동·꼬리뿐, 움직이는 속성은 transform·opacity·box-shadow(라이브 펄스, 홈 online-pulse 기법)뿐.
     transition에 all 없음. prefers-reduced-motion: reduce면 전부 정지(첫 프레임이 완결된 화면). JS 0. */

.cb-layout { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cb-layout * { word-break: keep-all; }

/* 잔액 띠(전폭, 흰 종이) — «광고캐시 1,234,000원» 한 줄, 라벨과 숫자가 같은 크기·굵기·잉크(D-825, 사용자 지적 «'광고 캐시' 문구가 너무 작아»).
   한 규칙이 둘을 같이 잡는다 — 따로 두면 다시 어긋난다. 폰 390(본문 358 − 패딩 32 = 326px)에서 22px «광고캐시» ≈ 90px +
   간격 8 + «99,999,999원» ≈ 150px = 248px로 한 줄이 선다(nowrap).
   [충전하기] 하나는 오른끝(margin-left: auto), 폰에서는 아랫줄 전폭. */
.cb-bal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 18px;
  background: var(--grey50); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cb-bal-amt { display: flex; align-items: baseline; gap: 8px; margin: 0; white-space: nowrap; }
.cb-bal-k, .cb-bal-n { font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-xl); color: var(--text-primary); }
.cb-bal-n { font-variant-numeric: tabular-nums; }
.cb-bal-fact { margin: 0; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-bal-acts { display: flex; gap: 8px; margin-left: auto; }

/* 묶음 — 1440(≥ 1200)에서는 광고상품 | 구독상품을 나란히, 각 격자 2열이라 카드 한 장 폭이 옛 4열과 같다.
   1199 이하는 묶음을 세로로 쌓고, 격자 열 수는 아래 폭 사다리(.cb-grid)가 정한다. 머리 글자는 .t-title3. */
.cb-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cb-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cb-group > .t-title3 { margin: 0; }
@media (min-width: 1200px) {
  .cb-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .cb-groups .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 카드 격자 — 데스크톱 4열(≥ 1200), 769~1199 2열, ≤ 768 1열. 카드 = 위 색면 무대(280px) + 아래 흰 글 판.
   묶음 안(≥ 1200)은 위 .cb-groups .cb-grid 가 2열로 덮는다. ── */
.cb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cb-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(11, 27, 61, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cb-card:hover { transform: translateY(-2px); border-color: var(--grey300); box-shadow: 0 6px 18px rgba(11, 27, 61, .12); }
.cb-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 고른 카드(aria-current) — 파랑 테두리 2px(테두리 + inset 그림자) + 카드 아래 작은 꼬리(판으로 잇는 표시, 회전한 사각 모서리). */
.cb-card[aria-current="page"], .cb-card[aria-current="page"]:hover {
  border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 2px 6px rgba(11, 27, 61, .06);
}
.cb-card[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--surface); border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg);
}

/* 무대(카드 위 280px) — 상품별 색면 + 머리 스크림(::before) + 종이 뒤 흰 빛·우상단 글로시(::after, 정지) + 흰 h3 + 흰 종이 미니어처.
   스크림: 홈 눈금은 위쪽(그라디언트 시작)이 밝아(초록 2.3:1 · 청록 2.7:1) 흰 제목이 맨색 위에서는 4.5:1에 못 미친다 — grey900 알파
   .47에서 .30(42%)을 거쳐 0(62%)으로 깔아 두 줄 제목의 둘째 줄까지 4.5:1을 넘긴다(시안 a2na 검사 반영). */
.cb-stage {
  position: relative; height: 280px; padding: 14px; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  color: var(--surface); border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}
.cb-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 31, 40, .47) 0, rgba(25, 31, 40, .30) 42%, rgba(25, 31, 40, 0) 62%);
}
.cb-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(150px circle at 92% 6%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
              radial-gradient(120px circle at 50% 70%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 72%);
}
.cb-stage .cb-name {
  position: relative; z-index: 1; align-self: stretch; margin: 0; font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.25;
  letter-spacing: var(--ls-xl); color: var(--surface); text-shadow: 0 1px 12px rgba(6, 20, 48, .28);
}

/* ══ 색면 눈금 — home.css 문자열 그대로(새 색 0): .mainc-1 파랑(프리미엄) · .hero-g1 초록(지금 상담) · .mainc-3 청록(세무사 찾기) ·
   .mainc-2 남색(자문위원). 라이브 밴드 연녹(.online-live-band)·펄스 점(.online-pulse)도 같은 파일의 값이다.
   🔴 이 파일의 hex는 이 블록뿐이다 — 홈이 눈금을 바꾸면 여기도 같이 바꾼다(W3 CSS 계약 시험이 home.css와 대조한다). ══ */
.cb-c-home_click .cb-stage,  .cb-pstage.cb-c-home_click  { background: linear-gradient(150deg, #2F80FF 0%, #1B64DA 52%, #1348AE 100%); }
.cb-c-online_time .cb-stage, .cb-pstage.cb-c-online_time { background: linear-gradient(120deg, #15C47E, #059862 55%, #04664A); }
.cb-c-map_top .cb-stage,     .cb-pstage.cb-c-map_top     { background: linear-gradient(150deg, #12B39A 0%, #0A8C7E 52%, #06655E 100%); }
.cb-c-qna_advisor .cb-stage, .cb-pstage.cb-c-qna_advisor { background: linear-gradient(150deg, #2B3EC7 0%, #1E2A96 50%, #131C6B 100%); }
.cb-mini-paper.cb-mini-paper-live { background: var(--surface); border: 1px solid var(--border); }
.cb-mini-pulse { background: var(--presence-online); box-shadow: none; }
@keyframes cb-mini-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
/* ══ 색면 눈금 끝 ══ */

/* ── 미니어처(.cb-mini, fragments/ad-mini.html) — 색면 위에 «띄운» 흰 종이(라운드 12 · 그림자) 185×150. 카드는 그대로, 판(.is-panel)은
   transform 1.6배(레이아웃 상자 296×240). 종이 안은 홈 지면의 실제 색(흰 카드 · 회색 눈금 · 파랑 · AD 마커 회색). 글자는 이름·지역뿐
   (② 지금 상담만 홈 카드 조각이 그리는 글자 그대로 — 아래 ② 블록). ── */
.cb-mini { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; margin: auto 0; }
.cb-mini-paper {
  width: 185px; max-width: 100%; height: 150px; padding: 7px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: 0 10px 26px rgba(6, 20, 48, .30), 0 1px 2px rgba(6, 20, 48, .16); color: var(--text-primary); overflow: hidden;
  font-size: 9px; line-height: 1.2; font-weight: 400; text-align: left;
}
.cb-mini-ph { display: flex; align-items: center; gap: 4px; height: 11px; margin: 0 0 5px; font-size: 9px; font-weight: 500; line-height: 1; color: var(--grey700); white-space: nowrap; }
.cb-mini-adm { display: inline-block; font-style: normal; font-size: 6.5px; font-weight: 400; line-height: 1; padding: 1.5px 2.5px; border: 1px solid var(--grey300); border-radius: 3px; color: var(--grey500); }
/* 사진 — 상자를 꽉 채운다. object-position은 app.css 세무사 사진 묶음(50% 10%)이 정한다 — 여기서 다시 선언하지 마라(D-869).
   폴백은 회색 판(grey100) + 이니셜 500 grey600. */
.cb-mini-pi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--grey100); }
.cb-mini-noimg { display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--grey600); background: var(--grey100); }
.cb-mini-nm { display: block; font-size: 8px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-mini-of { display: block; font-size: 6.5px; color: var(--grey500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cb-mini-ava { position: relative; display: block; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--grey100); }

/* ① 프리미엄 레일 — 세로 카드 53×118 세 장이 창(171 = 53×3 + 6×2)에 서고, 3초마다 한 장(59px)씩 왼쪽으로 12초 순환. 7장이라 -177에서 시작 3장과 같다.
   카드 = 홈 «프리미엄 세무사» 세로 카드(ad-card.html :: photoCard · home.css .pmc-*, 사용자 요청 2026-10-08)의 축소판(검토 RR-06 — 옛 9:16
   «사진 전면 + 어두운 오버레이» 카드는 은퇴): 흰 판 + 머리카락 테두리(홈 .pmc-card의 1px 고리 — ::before로 사진 위에 얹어 창 가장자리에서도
   잘리지 않는다) · 위 4:5 사진(53×66.25 — 확대 = 서버 설정값 ImageSpec.PREMIUM_PHOTO_ZOOM(dashboard-ads.html 머리 <style> 한 줄이
   --pmc-zoom을 정한다 — 광고·구독 «인라인 style 0» 계약이라 조각 ad-mini :: pc에는 style을 싣지 않는다, 사용자 결정 2026-10-08 7차 P8 ·
   8차 F11 ①) · 기준점 위 끝, 홈 .pmc-img와 같은 값) · 아래 이름 «세무사» · 칩 한 줄(분야 칩만 — 7차 P2) · 지역.
   글자는 미니어처 눈금(이름 8 · «세무사»·지역 6.5 · 칩 6px — 홈 카드 18·14·14·13px의 약 0.45배, 다른 미니어처의 6.5~9px와 같은 눈금).
   칩 줄은 홈처럼 한 줄 — 줄에 못 든 칩은 flex-wrap으로 둘째 줄로 꺾여 줄 높이(9) 밖에서 통째로 잘린다(무대는 JS 0 · aria-hidden 장식이라
   chip-fit.js를 싣지 않는다). 첫 칩 채움(--primary-pressed · 흰 글자), 둘째·셋째 연한 칩 — 홈과 같은 색.
   이름 줄은 홈처럼 «세무사»가 남는 폭에 다 안 들면 통째로 꺾여 숨는다(반쯤 잘린 글자 0) — 자간 0이어야 세 글자 이름 + «세무사»가 안폭 45에 든다
   (본문 자간 0.3px을 물려받으면 45.05로 0.05px 넘쳐 1280 카드 무대에서 «세무사»가 숨었다, 정적 하네스 실측).
   «내 카드»는 파랑 고리(정지). 빈 자리(is-empty)는 회색 판(테두리 없음). */
.cb-mini-rail-win { width: 171px; overflow: hidden; }
.cb-mini-rail-track { display: flex; gap: 6px; width: max-content; transform: translateX(0); animation: cb-mini-rail 12s cubic-bezier(.4, 0, .2, 1) infinite; }
.cb-mini-pc { position: relative; display: flex; flex-direction: column; width: 53px; height: 118px; flex: 0 0 53px; border-radius: 5px; overflow: hidden; background: var(--surface); }
.cb-mini-pc::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 5px; z-index: 1; pointer-events: none; }
.cb-mini-pc.is-empty { background: var(--grey100); }
.cb-mini-pc.is-empty::before { content: none; }
.cb-mini-pc.is-me::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--primary); border-radius: 5px; z-index: 2; pointer-events: none; }
.cb-mini-pph { position: relative; display: block; flex: none; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grey100); }
.cb-mini-pph img.cb-mini-pi { transform: scale(var(--pmc-zoom, 1)); transform-origin: 50% 0%; }
.cb-mini-pph .cb-mini-noimg { font-size: 18px; }
.cb-mini-pb { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px 4px 0; }
.cb-mini-pnm { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; height: 10px; min-width: 0; overflow: hidden; line-height: 10px; letter-spacing: 0; white-space: nowrap; }
.cb-mini-pnm .cb-mini-nm { flex: none; max-width: 100%; font-weight: 600; line-height: 10px; }
.cb-mini-pt { flex: none; font-size: 6.5px; line-height: 10px; color: var(--grey700); }
.cb-mini-pchips { display: flex; flex-wrap: wrap; gap: 2px; height: 9px; min-width: 0; overflow: hidden; }
.cb-mini-pchip {
  flex: none; display: inline-flex; align-items: center; height: 9px; padding: 0 2px; border-radius: 2px; white-space: nowrap;
  font-size: 6px; font-weight: 600; line-height: 1; background: var(--primary-light); color: var(--primary-pressed);
}
.cb-mini-pchip.is-fill { background: var(--primary-pressed); color: var(--surface); }
.cb-mini-pb .cb-mini-of { margin-top: 0; }
@keyframes cb-mini-rail { 0%, 22% { transform: translateX(0); } 25%, 47% { transform: translateX(-59px); } 50%, 72% { transform: translateX(-118px); } 75%, 100% { transform: translateX(-177px); } }

/* ② 라이브 밴드 — 연녹 밴드(위 눈금 블록) + 머리 펄스 점 + 세무사 카드 v4 두 장(나 · 이웃 1명 — 홈 «지금 상담» 카드 그 조각,
   fragments/tax-card :: card · 사용자 결정 2026-10-08 B15 «이번 PR에서 v4 축소판으로»). 카드 안쪽 모양은 tax-card.css 한 곳이다(dashboard-ads.html이 싣는다).
   · 축소 배율 — 카드를 실제 크기(폭 358 = 폰 390 홈 카드 · 기본 구간, 높이 216 = tax-card.css --tc-min-h, D-924)로 그리고 통째로 줄인다(transform —
     판 .is-panel 1.6배와 같은 기법). --cb-mc-k = 종이 안폭 171(185 − 안쪽 6 × 2 − 연녹 테두리 1 × 2) ÷ 358 ≈ .4777 → 카드 171 × 103.2. transform은 레이아웃 상자를
     줄이지 않으므로 겉 상자(.cb-mini-card)가 줄인 높이 104를 쥐고 안 상자(.cb-mini-card-in)가 넘친 원래 상자를 자른다.
   · 글자 — 선언은 tax-card.css 그대로(13·14·15·21·23px, 400/600)이고 보이는 크기만 배율만큼 작다: 카드 무대에서 이름 약 10 · 지역 약 7 · 칩 약 7 ·
     배지 약 6px(옛 행의 이름 10 · 지역 7과 같은 눈금, ≤ 1199의 1.2배·판 1.6배에서 더 커진다). 다른 미니어처의 6.5~9px 글자와 같은 «미니어처 눈금»이다.
   · 테두리 — 홈 지면 걸개(home.css #online-now .on-card)와 같은 바깥 고리 1px(border를 주면 카드 안폭이 줄어 @container tc 구간이 어긋난다).
     줄이지 않은 겉 상자에 둔다 — 카드에 두면 배율만큼 0.5px로 흐려진다. 모서리는 카드 반지름(--r-lg)에 배율을 곱한 값.
   · 쌓임 — 폰 홈처럼 세로 1열, 간격 6(홈 장 간격 12 × 배율). 카드 둘이 종이(150)에 다 들지 않아 이웃 카드는 윗머리(칩 줄·배지)만 보이고 종이 끝에서
     잘린다(목록이 이어진다). 빈 자리(is-empty)는 같은 크기의 흰 판 + 고리.
   · 내 카드 둘레에 파랑 클릭 고리가 8초마다 한 번 퍼진다(scale·opacity). 별은 카드 조각의 SVG(잉크, line-icons) — 이 파일에 별 규칙은 없다. */
.cb-mini-paper-live { padding: 6px; }
.cb-mini-paper-live .cb-mini-ph { gap: 3px; }
.cb-mini-pulse { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; animation: cb-mini-pulse 1.6s ease-out infinite; }
.cb-mini-live { --cb-mc-k: .4777; display: flex; flex-direction: column; gap: 6px; }
.cb-mini-card { position: relative; flex: none; height: 104px; border-radius: calc(var(--r-lg) * var(--cb-mc-k)); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.cb-mini-card-in { display: block; height: 100%; overflow: hidden; border-radius: inherit; }
.cb-mini-card .tc-card { width: 358px; transform: scale(var(--cb-mc-k)); transform-origin: 0 0; }
.cb-mini-ring { position: absolute; inset: -2px; border: 1.5px solid var(--primary); border-radius: 9px; opacity: .55; transform: scale(1); animation: cb-mini-ring 8s ease-out infinite; pointer-events: none; z-index: 3; }
@keyframes cb-mini-ring { 0% { transform: scale(1); opacity: .55; } 14% { transform: scale(1.08); opacity: 0; } 96% { transform: scale(1.08); opacity: 0; } 100% { transform: scale(1); opacity: .55; } }

/* ③ 세무사 지도 — 지도 판(카드 폭 전체, 청록 옅은 톤은 눈금 청록(위 «색면 눈금» 블록의 첫 색)의 알파 = rgba(18,179,154,.16) + 흰 도로 선) 위 핀이 10초 주기로 차례로 떠오르고(translateY·opacity),
   «내 핀»은 원형 사진 26 + 흰 꼬리(좌표가 없으면 빈 핀 is-empty). 옛 오른쪽 목록(«광고» 머리 + 작은 행)은 목록 뷰와 함께 걷었다 —
   판이 폭 전체라 핀·도로 선 자리는 %로 둔다. */
.cb-mini-map { display: flex; gap: 6px; align-items: stretch; height: 118px; }
.cb-mini-map-pane {
  position: relative; flex: 1 1 auto; min-width: 0; border-radius: 6px; overflow: hidden; background-color: rgba(18, 179, 154, .16);
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--surface), var(--surface));
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; background-position: 0 34px, 60% 0, 0 86px, 24% 0; background-repeat: no-repeat;
}
.cb-mini-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); animation: cb-mini-pin 10s ease-in-out infinite; }
.cb-mini-pin::after { content: ""; position: absolute; left: 4px; top: 9px; width: 2px; height: 5px; background: var(--primary); }
.cb-mini-pin-a { left: 16%; top: 14px; }
.cb-mini-pin-b { left: 74%; top: 62px; animation-delay: .45s; }
.cb-mini-pin-me { left: 42%; top: 40px; width: 26px; height: 26px; border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(6, 20, 48, .35); background: var(--surface); animation-delay: .9s; overflow: visible; }
.cb-mini-pin-me .cb-mini-pi { border-radius: 50%; }
.cb-mini-pin-me .cb-mini-noimg { font-size: 11px; }
.cb-mini-row-a .cb-mini-noimg { font-size: 9px; }
.cb-mini-pin-me.is-empty { background: var(--grey100); }
.cb-mini-pin-me::after { left: 9px; top: 23px; width: 4px; height: 6px; background: var(--surface); border-radius: 0 0 2px 2px; }
@keyframes cb-mini-pin { 0%, 82% { transform: translateY(0); opacity: 1; } 86%, 91% { transform: translateY(6px); opacity: 0; } 95% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }

/* ④ 자문위원 — 답변 구좌 칸 15(5열) 중 «내 칸» 하나(is-on)만 파랑으로 켜져 12초 주기로 한 번 깜빡이고(opacity), 아래 답변 행 2개
   (사진 16 · 이름 · 상호 표식 · 회색 막대 2줄). 켜진 칸 수를 일반 석 수(QnaStage GENERAL_SLOTS_MAX)와 잇지 않는다 — 그 수는 비구독 상한이지
   «찬 칸»이 아니다. 멈춘 무대([data-state="stop"] — 카드·판 공통)에서는 칸이 켜지지 않는다.
   행 바탕(.cb-mini-row · .cb-mini-row-t)은 이제 이 답변 행만 쓴다 — ② 지금 상담의 옛 원형 행은 세무사 카드 v4 축소판이 됐다(사용자 결정 2026-10-08 B15). */
.cb-mini-seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cb-mini-seat { position: relative; height: 9px; border-radius: 3px; background: var(--grey100); border: 1px solid var(--border); }
.cb-mini-seat.is-on::after { content: ""; position: absolute; inset: -1px; border-radius: 3px; background: var(--primary-light); box-shadow: inset 0 0 0 1px var(--primary); opacity: 1; animation: cb-mini-seat1 12s ease-out infinite; }
[data-state="stop"] .cb-mini-seat.is-on::after { animation: none; opacity: 0; }
.cb-mini-ans { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cb-mini-row { position: relative; display: flex; align-items: center; gap: 5px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); min-width: 0; }
.cb-mini-row.is-empty { min-height: 28px; }
.cb-mini-row-t { min-width: 0; flex: 1; line-height: 1.2; }
.cb-mini-row-a { padding: 4px 5px; align-items: flex-start; }
.cb-mini-row-a .cb-mini-ava { width: 16px; height: 16px; }
.cb-mini-row-a.is-empty { min-height: 26px; }
.cb-mini-role { display: inline-block; font-style: normal; margin-left: 3px; padding: 0 2.5px; border: 1px solid var(--grey300); border-radius: 3px; font-size: 5.5px; font-weight: 400; color: var(--grey600); line-height: 1.5; vertical-align: 1px; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mini-bar { display: block; height: 3px; border-radius: 2px; background: var(--border); margin-top: 3px; width: 100px; }
.cb-mini-bar + .cb-mini-bar { width: 72px; }
@keyframes cb-mini-seat1 { 0% { opacity: 1; } 3%, 8% { opacity: .15; } 12%, 100% { opacity: 1; } }

/* 판의 큰 미니어처 — 같은 조각을 1.6배(정지 transform, 레이아웃 상자 296×240). */
.cb-mini.is-panel { width: 296px; height: 240px; max-width: 100%; margin: 0 auto; display: block; }
.cb-mini.is-panel .cb-mini-paper { transform: scale(1.6); transform-origin: 0 0; }

/* ── 카드의 흰 글 판(아래 약 4할) — 사실 한 줄(회색) · 요금 500 + 상태 낱말 · 이번 달 · 다음 차감 · «자세히 보기» 파랑 + 동그라미 화살(홈 .mainc-go와 같은 SVG). ── */
.cb-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
/* 사실 한 줄은 4열(카드 ≈ 243)에서 셋은 2줄, 자문위원은 1줄로 접힌다 — 두 줄 높이(13 × 1.5 × 2 = 39px)를 예약해 요금·상태 줄의 기준선이
   네 카드에서 같은 높이에 선다(1280 실측 25px 어긋남). 1열(≤ 768)은 한 줄이라 예약을 푼다. */
.cb-fact { min-height: 39px; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
.cb-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* 요금이 먼저, 상태가 뒤 — 차례는 마크업이 정한다(CSS order 없음: 읽기 차례 = 보이는 차례, WCAG 1.3.2). */
.cb-fee { font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; }
.cb-st { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; }
.cb-st.is-off { font-weight: 400; color: var(--text-tertiary); }
.cb-nums {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.cb-nums b { font-weight: var(--fw-semibold); color: var(--text-primary); }
/* «자세히 보기» 잉크는 --primary-pressed — 14px 500 글자는 --primary(3.71:1)로는 4.5:1에 못 미치고, 같은 화면의 텍스트 링크(.cb-link ·
   .cb-more summary)도 이미 이 잉크(5.41:1)다. 동그라미 화살은 아이콘(3:1 대상)이라 --primary 그대로. */
.cb-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--primary-pressed); white-space: nowrap; }
.cb-go svg {
  width: 24px; height: 24px; flex: 0 0 24px; padding: 5px; border-radius: 50%; background: var(--primary-light); border: 1px solid rgba(49, 130, 246, .35);
  fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.cb-card:hover .cb-go svg { transform: translateX(4px); }

/* 네 카드의 «이번 달»을 더한 줄 — 격자 아래, 카드 안쪽 글자와 같은 축. 잔액과 잇는 문장은 없다.
   위 여백 4(격자 gap 16 → 20): 넷째 카드가 고른 카드면 꼬리 끝(카드 아래 ≈ 12px)과 오른끝 정렬 합계 줄이 5px 안팎으로 붙어 보인다. */
.cb-sum {
  display: flex; justify-content: flex-end; gap: 12px; margin: 4px 0 0; padding: 0 4px;
  font-size: 13px; line-height: 1.45; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.cb-sum b { font-weight: var(--fw-semibold); color: var(--text-secondary); }

/* ── 전폭 판(격자 아래 · 라운드 20 · 그림자 카드와 같음) — 왼쪽 색면 무대 열 minmax(340px, 38fr) + 오른쪽 흰 글 판 62fr. 등장 모션 없음(서버 렌더 전환).
   #panel로 내려올 때(카드 링크의 조각) 고정 상단바 아래 12px에 선다 — 안 걸면 판 머리가 상단바에 가린다.
   🔴 overflow는 hidden이 아니라 clip — clip은 라운드 모서리 안으로 자르기만 하고 스크롤 컨테이너를 만들지 않는다
      (Safari 16 · Chrome 90 · Firefox 81 이상). hidden은 판을 스크롤 상자로 만든다. ── */
.cb-panel {
  display: grid; grid-template-columns: minmax(340px, 38fr) minmax(0, 62fr); margin-top: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 2px 6px rgba(11, 27, 61, .06); overflow: clip;
  scroll-margin-top: calc(var(--topbar-h, 62px) + 12px);
}
/* 무대 열 — 큰 미니어처 → «이 상품이 하는 일» 3줄(흰 14px, 괘선은 흰 알파) → 요금 큰 글자(흰 500 28px tabular) → 차감 문장(흰 .9).
   스크림(::before): 미니어처 아래(230px)부터 grey900 알파 .45로 내려가 어느 높이의 흰 글자든 4.5:1을 넘긴다(가장 밝은 초록 시작색 기준 6:1). 정지.
   무대 내용(.cb-pstage-in)은 문서와 함께 스크롤한다. 상품 카드·글자가 스크롤을 따라 붙지 않는다(모든 상품 상세 공통). */
.cb-pstage { position: relative; padding: 22px 22px 26px; color: var(--surface); min-width: 0; }
.cb-pstage::before { content: ""; position: absolute; left: 0; right: 0; top: 230px; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(25, 31, 40, 0) 0, rgba(25, 31, 40, .45) 60px, rgba(25, 31, 40, .45) 100%); }
.cb-pstage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(180px circle at 90% 4%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); }
.cb-pstage-in { position: relative; z-index: 1; }
.cb-does { margin: 22px 0 0; font-size: 14px; line-height: 1.55; }
.cb-does span { display: block; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.cb-does span:first-child { border-top: 0; padding-top: 0; }
.cb-pfee { margin: 18px 0 0; font-size: 28px; font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-xl); }
.cb-pfee > span { white-space: nowrap; }
.cb-pfee small { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; opacity: .9; margin-top: 4px; letter-spacing: 0; }
.cb-nw { white-space: nowrap; }
.cb-pded { margin: 8px 0 0; font-size: 13px; line-height: 1.5; opacity: .9; }
.cb-pded span { display: block; }

/* 글 판 — 머리(h3 700 20px · 상태·시작일) → 설정/요금과 조건 dl(라벨 76px | 값) → 행동 또는 인라인 폼 → 내역(이달 일별 표 + 합계 + 전체 내역 링크). */
.cb-pmain { min-width: 0; padding: 22px 24px 24px; }
.cb-ph { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cb-ptitle { margin: 0; font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: var(--ls-xl); color: var(--text-primary); }
.cb-pmeta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cb-pmeta span { white-space: nowrap; }
.cb-sec { padding-top: 16px; }
.cb-sec + .cb-sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--divider); }
.cb-cap { margin: 0 0 10px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: 600; letter-spacing: .04em; color: var(--text-tertiary); }

/* 설정 — 라벨 | 값(+행동) 표. 값 14, 라벨 13 회색. */
.cb-dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; align-items: start; margin: 0; }
.cb-dl dt { padding-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
.cb-dl dd { margin: 0; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cb-dl dd.is-dim { color: var(--text-tertiary); }
/* 심사 중 판의 «신청 업종» 라벨 나열(D-821) — 낱말 사이 가운뎃점은 CSS가 찍는다(template의 th:each+th:if 조합에는 «마지막» 판정이 없다). */
.cb-tags span + span::before { content: " · "; color: var(--text-tertiary); }
.cb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cb-row form { display: inline-flex; }
.cb-sub { display: block; margin-top: 2px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.cb-btn:hover { background: var(--surface-alt); }
.cb-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 행동 줄 — 상태마다 주 버튼은 하나(멈춤 [충전하기] · 신청 전 [신청하기]). 잠긴 버튼은 진짜 disabled(§5 — 서버 판정과 같은
   규칙)이고 옆 .cb-why 한 줄이 이유를 말한다(«180,000원 모자라요»).
   🔴 잠금은 불투명도가 아니라 농도로 — opacity .45는 고스트 라벨이 2.83:1(§9 하한 3:1 아래), 채운 파랑은 흰 글자가 ≈1.7:1이라
      «무엇이 잠겼는지» 말하는 라벨이 안 읽힌다. --text-tertiary(grey600) on --surface-alt = 4.2:1(실측).
      이 판정(D-811 i항)은 app.css `.btn:disabled` 한 벌로 전역이 됐다(D-880, P-069) — 그 규칙이 .btn-primary:hover보다
      뒤에 있어 잠긴 채 색이 바뀌지 않는다. */
.cb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.cb-done .cb-acts { flex-direction: column; align-items: stretch; }
.cb-done .cb-acts .btn { width: 100%; justify-content: center; }
.cb-acts form { display: inline-flex; }
/* 잠긴 버튼 모양은 이 판정(D-811 i항)을 전역으로 올린 app.css `.btn:disabled` 한 벌이 든다(D-880, P-069) — 여기 다시 적지 마라. */
.cb-why { font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* 인라인 신청 폼(S5) — 신청 페이지(dashboard-ads-apply.html)의 칸·라벨 그대로, label+input(id 고정) · 체크 히트 44 · 버튼 44 · [신청하기] 전폭.
   칸은 app.css .input(48px)이되 글자는 16px — app.css .input의 15px는 폰에서 포커스 때 iOS가 화면을 확대한다(design.md §4 «모바일
   <input> 글자 ≥16px»). 폭을 가리지 않고 한 값이라 폰·데스크톱의 칸 높이가 같다. 업종 칩은 provider.css .ind-pick·.ind-fee 조각 그대로.
   설명 문단은 없다 — «요금과 조건» dl이 말한다. */
.cb-form { margin-top: 16px; }
.cb-form .input { font-size: 16px; }
.cb-field { display: block; margin-top: 14px; }
.cb-lb { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--grey700); margin-bottom: 6px; }
.cb-opt { font-weight: 400; color: var(--text-tertiary); }
.cb-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cb-help { margin: 6px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.cb-help b { font-weight: var(--fw-semibold); color: var(--text-secondary); }
/* 이어 쓰는 신청의 사실 한 줄(D-881 한 상품 한 문서) — 폼 첫 줄이라 위 여백 없이, 도움말보다 한 단 진하게(동의 문장과 같은 잉크). */
.cb-form > .cb-reapply { margin: 0 0 2px; font-size: 13px; color: var(--grey700); }
.cb-fs { margin-top: 14px; }
.cb-fs legend { margin-bottom: 0; }
.cb-form .ind-picks { margin: 8px 0 10px; }
.cb-form .ind-pick input { accent-color: var(--primary); }
.cb-agree { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 12px 0; margin-top: 12px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); cursor: pointer; }
.cb-agree input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--primary); }
.cb-agree span { font-size: 13px; line-height: 1.5; color: var(--grey700); }
.cb-form > .btn-primary { display: flex; width: 100%; min-height: 44px; margin-top: 14px; }

/* 업종 고치기 — 판 전폭 details(닫힘). 열면 provider.css .ind-pick 16개 + 저장. */
.cb-more { margin-top: 12px; }
.cb-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--primary-pressed); }
.cb-more > summary::-webkit-details-marker { display: none; }
.cb-more > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cb-more[open] > summary { margin-bottom: 4px; }
.cb-more .ind-picks { margin: 6px 0 10px; }
.cb-more .ind-pick input { font-size: 16px; accent-color: var(--primary); }
/* 입찰가 고치기(D-839 B6) — 같은 details 문법. 칸(.cb-field)과 [입찰가 저장]을 한 줄에, 폰은 줄바꿈. 입력 글자 16px(iOS 확대 방지). */
.cb-bid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.cb-bid .cb-field { margin-top: 6px; flex: 1 1 160px; max-width: 240px; }
.cb-bid .input { font-size: 16px; }
.cb-bid .cb-btn { margin-bottom: 1px; }

/* 내역 — 이달 일별 표. 숫자 오른끝·윗줄 기준. 월정액 상품은 «날짜 | 과금액» 두 열(클릭 열이 없다). */
.cb-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; font-variant-numeric: tabular-nums; }
.cb-tbl col.c-date { width: 36%; }
.cb-tbl col.c-n { width: 22%; }
.cb-tbl col.c-amt { width: 42%; }
.cb-tbl.is-2 col.c-date { width: 50%; }
.cb-tbl.is-2 col.c-amt { width: 50%; }
.cb-tbl th { padding: 6px 4px 8px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); text-align: right; color: var(--text-tertiary); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-tbl td { padding: 9px 4px; text-align: right; vertical-align: top; color: var(--text-primary); border-bottom: 1px solid var(--divider); white-space: nowrap; }
.cb-tbl th:first-child, .cb-tbl td:first-child { text-align: left; padding-left: 0; }
.cb-tbl th:last-child, .cb-tbl td:last-child { padding-right: 0; }
.cb-tbl td.is-dim { color: var(--text-tertiary); }
.cb-tbl tfoot td { border-bottom: 0; font-weight: var(--fw-semibold); }
/* 개편 전 클릭 이력(D-825) — 월정액 판 내역 아래(집행내역 화면도 같은 조각), 기본 접힘. summary는 .cb-more와 같은 문법(히트 36/44)이되
   회색 — «지금 할 일»이 아니라 지난 사실이다. 접힘은 CSS 셰브론(::before, 시안 .vs2-legacy summary::before와 같은 6px 선)이 말한다 —
   3차 잉크 한 줄이라 표시가 없으면 캡션으로 읽힌다. 열면 «날짜 · 과금액» 2열 표(.cb-tbl.is-2 그대로). */
.cb-legacy { margin-top: 10px; }
.cb-legacy > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.cb-legacy > summary::-webkit-details-marker { display: none; }
.cb-legacy > summary::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 10px 2px 2px; border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary); transform: rotate(-45deg); }
.cb-legacy[open] > summary::before { transform: rotate(45deg); margin-bottom: 5px; }
.cb-legacy > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cb-legacy[open] > summary { margin-bottom: 4px; }
.cb-link { display: inline-flex; align-items: center; min-height: 36px; margin-top: 8px; padding: 0 2px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--primary-pressed); }
.cb-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 판 내역의 빈 상태는 app.css .empty 부품 한 벌(P-079 1-(나), K02) — 옛 .cb-empty 한 줄 글자는 걷었다. */

/* 바닥 한 줄 — «광고» 표시 고지(약관 제6조)뿐. 차감 차례 문장(AdRenewalOrder.STOP_NOTICE)은 지갑 화면에 있다. */
.cb-foot { margin: 18px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }

/* ── 묶음 G2 (P-052·053·055·056·059·060, D-880) — 신청 화면 · 지갑 · 집행 내역. 전부 .cb-* · .ad-* 스코프, 토큰만. ── */

/* 낱말 단위 줄바꿈 — 판(.cb-layout)과 같은 규칙을 신청 화면·지갑·집행 내역의 이 묶음 조각에도(폰 390에서 «차 / 례로»처럼 갈리지 않게). */
.ad-tabs *, .ad-fact *, .ad-apply-grid *, .cb-refund, .cb-ledger, .cb-older, .cb-rep-pick *, .cb-rep-sum *, .cb-rep-tbl * { word-break: keep-all; }

/* 세무사 찾기 요금 세 줄(P-059) — 폼의 업종 칩을 고르면 ad-apply-industries.js가 dl에 is-live, 고른 개수의 줄에 is-on을 단다.
   고른 줄만 500 1차 잉크, 나머지 400 3차 잉크. 무JS면 is-live가 없어 셋 다 같은 잉크(400). */
.cb-dl.is-live dd[data-ind-tier] { color: var(--text-tertiary); }
.cb-dl.is-live dd[data-ind-tier].is-on { color: var(--text-primary); font-weight: var(--fw-semibold); }
/* «지금 요금» — 요금과 조건 dl과 같은 격자(라벨 76px)라 값의 시작선이 «결제» 행과 맞는다(P-059). */
.cb-now { margin-top: 4px; }
.cb-now dd b { font-weight: var(--fw-semibold); }
.cb-gate a { font-weight: var(--fw-semibold); color: var(--primary-pressed); }

/* 신청 화면 — 상품 탭 넷(판과 같은 차례) + 상태 낱말(13px 400 3차 잉크, P-052). 고른 탭 = aria-current(파랑 테두리 · 연한 바탕). */
.ad-tabs { margin: 12px 0 16px; }
.ad-tabs .choice-chip { gap: 6px; min-height: 44px; }
.ad-tabs .choice-chip[aria-current="page"] { border-color: var(--primary); color: var(--primary-pressed); background: var(--primary-light); font-weight: 600; }
.ad-tabs .choice-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ad-tab-st { font-size: 13px; font-weight: 400; color: var(--text-tertiary); white-space: nowrap; }
/* 사실 카드(P-052 (가)) — 켜진·멈춘·심사 중 상품은 빈 폼 대신 이 한 장: 첫 줄 15px 500 · dl · 바닥 한 줄 · [광고·구독에서 설정 보기]. */
.ad-fact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ad-fact .cb-dl { align-self: stretch; }
.ad-fact-t { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.5; color: var(--text-primary); }
.ad-fact-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--grey700); }
/* 신청 카드 — 상품 이름(h3) · 설명 한 줄 · 요금과 조건 dl · 신청 폼(판과 같은 조각). */
.ad-apply-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ad-apply-card .cb-form { margin-top: 0; }
.ad-apply-card > .cb-help { margin: 0; }
.ad-apply-h { margin: 0; font-size: 17px; font-weight: var(--fw-semibold); line-height: 1.4; color: var(--text-primary); }
.ad-apply-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey700); }
.ad-apply-lead b { font-weight: var(--fw-semibold); color: var(--text-primary); }
.ad-apply-go { align-self: flex-start; }
/* 대표 분야 한 줄(V3 ⑤ A) — «요금과 조건»과 같은 dl 격자(라벨 76px) 한 행: 칩(home.css .pmc-chip.pmc-chip-fill 그대로 — 미리보기 첫 칩과 같은 모양)
   + 사실 한 문장 13px 2차 잉크 + [바꾸기](.cb-btn — 지도 «위치 고치기»와 같은 부품). 좁으면 낱말 단위로 줄을 바꾼다(.ad-apply-grid * keep-all). */
.ad-lead-v { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ad-lead-t { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--grey700); }
/* 폼 · 미리보기 1.4fr 0.6fr(P-056 — 폼 칸을 넓혀 동의 문장이 한 줄에 서게). 좁으면 폼 위 · 미리보기 아래 한 열(§6). */
.ad-apply-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-apply-grid.has-preview { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
/* 미리보기 카드 한 장 — 홈 1280 폭 한 칸과 같은 190px 세로 카드를 가운데에(P-056 · 사용자 요청 2026-10-08 세로 카드 — 1280 홈 칸 실측 190.3).
   홈 home.css의 5/3/2열 규칙((0,3,0))을 (0,4,0)으로 덮는다 — 카드 모양(사진 4:5 · 칩 한 줄 · 멘트 한 줄)은 홈 규칙 그대로 걸린다. */
.ad-preview .ad-slides .ad-slide.ad-slide-photo { grid-template-columns: minmax(0, 190px); justify-content: center; margin: 0; }

/* 지갑(P-053 · P-060) — 잔액 띠 두 버튼의 도착 자리. sticky 머리(--topbar-h 62) 아래 16px에 선다(78px). */
.cb-anchor { scroll-margin-top: calc(var(--topbar-h, 62px) + 16px); }
.cb-refund { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--grey700); }
.cb-refund b { font-weight: var(--fw-semibold); }
/* 충전 요청 상태 — 글자(칩 걷기): 확인 중(할 일) 500 1차 잉크, 충전 완료·취소됨(끝난 일) 400 3차 잉크(농도의 뜻, design.md §2). */
.cb-rq-st { flex: 0 0 auto; font-size: 14px; font-weight: 400; color: var(--text-tertiary); white-space: nowrap; }
.cb-rq-st.is-open { font-weight: var(--fw-semibold); color: var(--text-primary); }
/* 광고캐시 내역 표 — «일시 · 내용 · 금액». 내용은 왼쪽·줄바꿈(메모 둘째 줄), 일시는 좁으면 날짜/시각 두 줄, 금액은 오른쪽·tabular-nums(.cb-tbl). */
.cb-ledger { margin-top: 8px; }
.cb-ledger col.c-when { width: 24%; }
.cb-ledger col.c-what { width: 48%; }
.cb-ledger col.c-amt { width: 28%; }
.cb-ledger th:nth-child(2), .cb-ledger td.cb-what { text-align: left; }
.cb-ledger td.cb-when, .cb-ledger td.cb-what { white-space: normal; }
.cb-ledger td.cb-what { word-break: keep-all; overflow-wrap: anywhere; }
.cb-ledger td.cb-what .tag { margin-left: 4px; vertical-align: 1px; }
.cb-ledger td.is-credit { font-weight: var(--fw-semibold); }
.cb-older { margin: 6px 0 0; font-size: 13px; color: var(--text-tertiary); }
.cb-older a { font-weight: var(--fw-semibold); color: var(--primary-pressed); }

/* 집행 내역(P-055 (가)) — 고르기는 전부 링크(무JS): 캠페인 칩 + 기간 링크 둘(aria-current). 합계는 전폭 한 줄 17px 500 1차 잉크. */
.cb-rep-pick { display: flex; flex-direction: column; gap: 12px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; color: var(--grey700); background: var(--surface); }
.cb-chip[aria-current="page"] { border-color: var(--primary); color: var(--primary-pressed); background: var(--primary-light); font-weight: var(--fw-semibold); }
.cb-period { display: flex; gap: 6px; }
.cb-period a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--grey700); }
.cb-period a[aria-current="page"] { background: var(--primary-light); color: var(--primary-pressed); font-weight: var(--fw-semibold); }
.cb-chip:focus-visible, .cb-period a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cb-rep-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 16px 0 0; }
.cb-rep-sum span { font-size: 13px; color: var(--text-tertiary); }
.cb-rep-sum b { font-size: 17px; font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cb-rep-tbl { margin-top: 12px; }
.cb-rep-tbl .t-title3 { margin: 0 0 8px; }

/* ── 폭 사다리 ── */
@media (max-width: 1199px) {
  /* 카드 2열 — 카드 ≈ 400px이라 종이를 1.2배로(정지 transform · 레이아웃 상자는 그대로라 제목과 겹치지 않는다, 시안 폰 실측 여백 ≥ 19px). */
  .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-mini:not(.is-panel) { transform: scale(1.2); }
  /* 묶음이 세로로 쌓이면 위 묶음의 꼬리가 아래 묶음 머리를 가리킨다 — 위 묶음만 끈다. 아래 묶음은 판을 가리키므로 그대로. */
  .cb-group:first-child .cb-card[aria-current="page"]::after { display: none; }
}
@media (max-width: 1100px) {
  /* 판 1열 — 무대 위 · 글 아래. 무대는 이미 문서 스크롤이다. */
  .cb-panel { grid-template-columns: minmax(0, 1fr); }
  .cb-pstage-in { position: relative; top: auto; }
  /* 세무사 화면 개선 2026-10-11 — 1열 판의 큰 미니어처(296×240)는 바로 위 고른 카드에 같은 그림이 있다 — 두 번 그리지 않는다(폰 판 높이 ≈ 300px 절약). */
  .cb-pstage .cb-mini.is-panel { display: none; }
}
@media (max-width: 900px) {
  /* 신청 화면 — 폼 위 · 미리보기 아래 한 열(P-056, design.md §6). 미리보기 한 장은 231px 가운데 그대로. */
  .ad-apply-grid.has-preview { grid-template-columns: minmax(0, 1fr); }
}
/* 카드 1열은 599 아래만(세무사 화면 개선 2026-10-11) — 600~768(태블릿·드로어 셸, 본문 ≥ 568)은 위 2열 그대로: 카드 ≈ 360px은 폰 1열 카드(358)와 같은 폭이라
   미니어처 1.2배가 그대로 든다. 768에서 1열 네 장이 문서 2,500px이던 것을 2×2로 줄였다. */
@media (max-width: 599px) {
  .cb-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
  .cb-fact { min-height: 0; }
  .cb-bal { padding: 14px 16px; gap: 6px 14px; }
  .cb-bal-acts { margin-left: 0; flex-basis: 100%; margin-top: 6px; }
  .cb-bal-acts .btn { flex: 1; }
  /* 폰(카드 1열)에서는 꼬리가 판이 아니라 바로 아래 카드를 가리키므로 끈다 — 파랑 테두리 + #panel 앵커 이동만. */
  .cb-card[aria-current="page"]::after { display: none; }
  .cb-sum { justify-content: space-between; padding: 0 16px; }
  .cb-pstage { padding: 18px 16px 22px; }
  .cb-pmain { padding: 18px 16px 20px; }
  .cb-btn, .cb-more > summary, .cb-legacy > summary, .cb-link { min-height: 44px; height: auto; }
  .cb-chip, .cb-period a { min-height: 44px; }
  .cb-ledger td.cb-when { font-size: 13px; }
  .cb-acts .btn { flex: 1; }
  .cb-acts form { flex: 1; }
  .cb-acts form .btn { width: 100%; }
  .cb-2 { grid-template-columns: minmax(0, 1fr); }
  /* 라벨 위·값 아래 한 열(§6 — 세로로 쌓아 성립). 쌍 사이 14px. */
  .cb-dl { grid-template-columns: minmax(0, 1fr); gap: 3px 0; }
  .cb-dl dt { padding-top: 0; }
  .cb-dl dd + dt { margin-top: 14px; }
  /* 대표 분야 한 줄(V3 ⑤ A)은 «요금과 조건» 바로 아래 둘째 dl — 카드 간격 12 + 5 = 위 dl 안 쌍 사이(3 + 14)와 같은 17. */
  .ad-apply-card > .cb-dl + .ad-lead { margin-top: 5px; }
}

/* ── 정지 프레임(design.md §7) — 모든 순환을 멈추고 호버 이동도 끈다. 첫 프레임이 완결된 화면이다(opacity 0으로 시작하는 요소 없음). ── */
@media (prefers-reduced-motion: reduce) {
  .cb-mini-rail-track, .cb-mini-pulse, .cb-mini-ring, .cb-mini-pin, .cb-mini-seat.is-on::after { animation: none; }
  .cb-card, .cb-go svg { transition: none; }
  .cb-card:hover { transform: none; }
  .cb-card:hover .cb-go svg { transform: none; }
}