/* ══ 세무사 카드 v4 «에디토리얼» — 카드 안쪽(fragments/tax-card.html :: card) ═══════════════════════════════
   근거: 사용자 결정 2026-10-07 T1~T20(docs/requests/2026-10-07-tax-card-v4/ANSWERS.md) · 시안 mock/v4-mock.png.
   배치·치수·색은 시안대로, 글자는 실제 값(T8). 판정(접속 표시·첫 칩·배지 글·이름 줄 단계)은 서버 TaxCardView가 끝내고 넘긴다.

   규칙(TaxCardCssContractTest가 잰다)
   · 글자 크기 — 23·18·17(한 줄 소개 — 카드 폭 구간별, 사용자 결정 2026-10-08 6차 H1 ⓑ1 «23/19/17» → 기본 19 → 18은 D-924)·21·20·15px는 이 카드 파일 범위 토큰(--fs-card-*, T17:
     공용 눈금은 그대로, 전역 :root에 두지 않는다). 14·13px는 공용 토큰(label2·caption1 — 두 폭 모두 고정). 13px 아래 토큰은 쓰지 않는다.
     행간은 정수 px 토큰, 자간은 공용 --ls-22·18·14·13.
   · 굵기는 400·600 두 벌만(var(--fw-regular)·var(--fw-semibold)). 서체 지정 없음(본문 스택을 그대로 받는다).
   · 색은 tokens.css 토큰만 — 시안의 레퍼런스 색(크림·초록 글자·주황 별)은 쓰지 않는다. 별 = 평점 별 노랑 --rating-star(D-915 — 옛 T16 잉크), 첫 칩 = 눌림 파랑 바탕(T15),
     «접속 중» 글자 = 회색(T12)·점 = 접속 초록 토큰.
   · 세무사 사진 위치는 app.css 사진 묶음(.tc-photo)이 쥔다 — 이 파일에는 사진 위치 선언이 없다.
   · 치수 변수는 --tc-* (글자 크기 접두사를 치수에 쓰지 않는다).

   격자(루트 = 바깥 링크 a.tc-card)
     열  [여백 16][글 칸 minmax(0, 1fr)][사이 14][사진 칸 auto(= .tc-media 폭 136, 좁은 카드 124 — D-924)]
     줄  [16][칩][헤드라인][이름 줄][사무소·지역][1fr][16] — DOM 순서(이름 줄 먼저)와 다르게 시안 순서로 놓는다.
     헤드라인이 없으면 그 줄이 0이 되어 이름 블록이 칩 아래로 올라온다(T6). 카드 높이는 min-height 216(배지와 아치가 겹치지 않는 하한 — D-924, 옛 시안 200).
   폭 구간(@container tc — 카드 폭, 뷰포트 아님: 카드를 담는 칸 폭이 뷰포트와 따로 논다) — 이름 줄 단계를 구간마다 따로 읽는다
     z ≤ 262(280 폰) · y 263~287(300 폰 · 온보딩 레일 하한) · 아주 좁은 카드 x 288~327(320·344 폰) — 셋은 이름 20 · «접속 중»은 점만에서 시작
     (사용자 검수 2026-10-08 ②) · 좁은 카드 s 328~349(360·375 폰) · 기본 350~419 · 넓은 카드 w ≥ 420.
     경계·칸 치수는 TaxCardView 상수(NameBand)와 같다. 🔴 좁은 쪽 넷의 끝은 열린 경계(width < 350 · 328 · 288 · 263)다 — 서버 예산은 구간의 가장
     좁은 카드(정수 하한 350 · 328 · 288 · 263)로 잡으므로, 349.x·327.x·287.x·262.x 같은 소수 폭 카드(홈 2열 = (밴드 안폭 − 12)/2, --shell-pad 2.2vw)는
     좁은 쪽 구간에 들어야 그 구간 예산이 덮는다. 옛 «max-width: 349px»는 349.01~349.99를 기본 구간(예산 = 카드 350)에 넣어 글 칸이 예산보다 좁았다
     (검토 RN-R-1 — 카드 349.2 «남궁민수» + 접속 중의 «● 접속 중»이 아래 줄로 꺾여 카드 216 · 262.5 «황보민수아라»는 이름이 두 줄).
   세무사 지도 목록은 이 카드를 쓰지 않는다(사용자 결정 2026-10-07 범위 변경 — 지도는 라이브 .mp-row 그대로, v4는 홈 «지금 상담» 카드만) —
   지도 전용이던 거리 칸(.tc-dist)·핀 선택 테두리(.is-selected)는 걷었다.
   쓰는 곳: 홈 «지금 상담 가능한 세무사»(fragments/ad-card :: onlineCard — 지면 걸개·열 수·폰 밴드 번짐은 home.css #online-now) ·
   온보딩 레일 미리보기 · 프로필 편집 미리보기. 카드 폭 구간은 홈 배치에서(일반 웹·앱 웹뷰 같은 값): 폰 320 → 288 · 344 → 312(아주 좁은 카드) ·
   360 → 328(좁은 카드) · 390 → 358(기본) · PC 2열 ≈ 479(넓은 카드). */

.tc-card {
  /* 글자 — 카드 파일 범위 토큰(정수 px) */
  --fs-card-hl: 23px;      --lh-card-hl: 30px;     /* 한 줄 소개 600 · 두 줄 — 넓은 카드(≥ 420 · PC 2열 1280 이상) */
  --fs-card-hl-md: 18px;   --lh-card-hl-md: 26px;  /* 한 줄 소개 — 기본 구간(350~419 · 390·412 폰 · PC 2열 1024 · 광고 미니어처 358) = title3(18/26).
                                                    19 → 18(D-924): 아치 116×152가 사진 칸을 8px 더 가져가 카드 350(글 칸 184)에서 한글 10자 줄이 19px로는 안 든다 */
  --fs-card-hl-sm: 17px;   --lh-card-hl-sm: 24px;  /* 한 줄 소개 — 좁은 쪽(< 350 · 280~375 폰 · 768 2열). 행간 = heading(16/24) 줄 */
  --fs-card-name: 21px;    --lh-card-name: 28px;   /* 이름 600 — 행간 28은 아래 크기 넷에도 그대로(이름 줄 높이가 단계마다 흔들리지 않게) */
  --fs-card-name-sm: 20px;                         /* 이름 — 카드 ≤ 327 · 단계 4·5·7 */
  --fs-card-name-18: 18px;                         /* 이름 — 두 줄 단계 8~11(사용자 결정 2026-10-08 «글씨크기를 조절») */
  --fs-card-name-16: 16px;
  --fs-card-name-14: 14px;
  --fs-card-name-13: 13px;                         /* 하한 — 사용자 규칙 «13px보다 작은 글씨 없음» */
  --fs-card-meta: 15px;    --lh-card-meta: 22px;   /* «세무사» · 사무소·지역 400 */
  /* 치수 */
  --tc-min-h: 216px;       /* 카드 높이 하한(D-924 아치 크게 — 옛 시안 200) */
  --tc-gutter: 14px;       /* 글 칸 ↔ 사진 칸 */
  --tc-max: 560px;         /* 넓은 칸에서 카드가 늘어나지 않게(T20) */
  --tc-col: 136px;         /* 사진 칸 폭(T20 고정 — D-924: 128 → 136, 좁은 카드 118 → 124) */
  --tc-ph-w: 116px;        /* 아치 사진 116×152(기본 — D-924, 옛 100×130) · 테두리 6 → 아치 겉 128, 칸 양옆 4 */
  --tc-ph-h: 152px;
  --tc-ring: 6px;          /* 아치 테두리 */
  --tc-nm-gap: 8px;        /* 이름 줄 1단계 간격 */
  position: relative;
  display: grid;
  grid-template-columns: var(--s-lg) minmax(0, 1fr) var(--tc-gutter) auto;
  grid-template-rows: var(--s-lg) auto auto auto auto 1fr var(--s-lg);
  width: 100%;
  max-width: var(--tc-max);
  min-height: var(--tc-min-h);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--text-primary);
  text-decoration: none;
  container: tc / inline-size;
}
.tc-card[hidden] { display: none; }
/* 포커스 = 바깥 2px 파랑 링. */
.tc-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 칩 — 높이 30(행간 20 + 위아래 5) · 14px · 한 줄(넘친 칩은 둘째 줄로 꺾여 통째로 가려진다, DOM에는 남는다) ──
   글자는 카드 전용 칩 글자 표(4.5칸 이하 — 사용자 결정 2026-10-09 칩 기획 L1~L6 · 서버 TaxCardView.chipLabel → SpecialtyShortLabel). 칩 한 장이 칩 줄보다
   넓으면(표에 없는 옛 분야 · 280보다 좁은 화면) 첫 줄에 혼자 서서 글자 중간에서 잘렸다(1차 리뷰 R-B-rules-2·RBUX-02·RBC-3) → 칩 폭 상한 = 칩 줄 폭,
   넘치면 말줄임. 그래서 «첫 칩은 늘»(사용자 결정 2026-10-07 C8) — 첫 칩은 줄어들어도 첫 줄에 남는다(표 글자는 가장 좁은 칩 줄 100에서도 말줄임 0 —
   TaxCardCssContractTest 픽셀 가드).
   🔴 좁은 칸 촘촘 한 단(사용자 결정 2026-10-09 칩 기획 L5 ⓐ · 메모 «v4 촘촘 값(여백 8 · 간격 4)은 그대로»): 카드 < 420(모든 폰 · 768/1024 2열 ·
   온보딩 레일 · 광고 미니어처)은 좌우 여백 8 · 칩 사이 4가 기본이고, 카드 ≥ 420(이름 줄 넓은 카드 경계와 같음)은 아래 넓은 카드 블록이
   여백 12 · 사이 6으로 되돌린다. 같은 칸 폭이면 모든 카드가 같은 치수 — 글자 크기는 14px 그대로. 그래도 넘치면 뒤 칩부터 통째로 빠진다(«+N» 없음 — L6 ⓐ). */
.tc-chips {
  grid-area: 2 / 2; min-width: 0; margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 4px; height: 30px; overflow: hidden;
}
.tc-chip {
  flex: none; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  height: 30px; padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--primary-light); color: var(--primary-pressed);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14);
}
.tc-chip-fill { background: var(--primary-pressed); color: var(--surface); }

/* ── 한 줄 소개(헤드라인) — 600 · 두 줄 말줄임(서버는 자르지 않는다 — 입력이 20자에서 막힌다, 사용자 결정 2026-10-08 6차 H4·H5 · HeadlineRule) ──
   글씨는 카드 폭 구간마다 한 단계(사용자 결정 2026-10-08 6차 H1 ⓑ1 «23 / 19 / 17» → D-924 «23 / 18 / 17»): 넓은 카드(≥ 420) 23/30 · 기본(350~419) 18/26 · 좁은 쪽(< 350) 17/24.
   경계는 이름 줄 단계와 같은 @container tc 블록이다(TaxCardView.BAND_NARROW_MAX + 1 = 350 열린 경계 · BAND_WIDE_MIN 420). 기본 구간 값이 이 구간 밖 규칙이고,
   좁은 쪽·넓은 값은 아래 두 @container 블록이 덮는다(< 328 · < 288 · < 263 카드는 < 350 블록 값을 그대로 탄다). 자간은 크기 곡선(typography.css —
   17~20px --ls-18 · 22~28px --ls-22). 폰에서는 소개(17·18)가 이름(21)보다 작다 — 받아들임(6차 H2 ⓐ).
   공백 없는 한글 20자는 카드 ≥ 328(360 폰 이상 — 기본 구간 하한 350에서 한 줄 10자)에서 두 줄 안이다(TaxCardCssContractTest가 글자 폭으로 잰다).
   D-924(아치 116×152 — 사진 칸 136/124)로 글 칸이 8·6px 줄어 기본 구간 19px로는 카드 350~361의 10자 줄(191.8px)이 셋째 줄로 넘쳤다 → 기본 구간 18px(글 칸 184 ≥ 181.7).
   카드 < 328(280·300·320·344 폰)은 말줄임 수용(6차 H3 ⓐ — 344는 질문지 밖 폭, 같은 < 328 구간이라 같은 처리로 본 구현 해석). 줄바꿈은 어절
   (body keep-all, D-880)이라 띄어쓰기에 따라 줄 끝이 빈다 — 가장 빠듯한 것은 띄어쓰기 섞인 현실형 글이다(카드 350 «스타트업 법인 설립부터» 줄 여유
   2.3px · 1024 2열 카드 356.5 «양도세 비과세·중과 판단» 2.9px — Blink 실측 2026-10-10 · 옛 19px은 0.2·0.52, TaxCardCssContractTest가 어절 줄바꿈 모의로 잰다).
   자간·글 칸·글꼴을 바꾸면 여기부터 넘친다.
   🔴 이름 줄이 두 줄(«세무사 ● …»를 이름 아래로 내린 단계)이어도 소개는 두 줄 그대로다(사용자 결정 2026-10-08 7차 P10 ⓐ — 옛 «한 줄 말줄임으로 줄여
   카드 높이 200 지키기»(--tc-hl-lines)는 걷었다). 그 카드만 이름 둘째 줄(22)만큼 길어질 수 있다 — 내용 높이(칩 30 + 10 · 소개 두 줄 + 12 · 이름 28 + 22 · 지역 2 + 22 ·
   위아래 32)는 넓은 카드 218 · 기본 210 · 좁은 쪽 206이라 D-924 카드 하한 216에서는 넓은 카드만 218로 2px 는다(옛 하한 200에서는 셋 다 늘었다 — 실측 200×11 · 206×13).
   홈 2열에서 옆 카드는 늘지 않는다(home.css). */
.tc-hl {
  grid-area: 3 / 2; min-width: 0; margin-bottom: 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: var(--fs-card-hl-md); line-height: var(--lh-card-hl-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
  color: var(--text-primary);
}

/* ── 이름 줄 — 🔴 이름은 잘리지도 말줄임되지도 않는다(사용자 결정 2026-10-08 «이름은 짤리거나 말줄임되지 않고 모두 한 줄로 잘 보이게» ·
   «이름 외 요소를 개행하거나 줄여서 이름은 모두 노출되게» — T19의 마지막 단계 «이름 말줄임»과 그 칸 맞춤(1차 리뷰 RBUX-08)은 걷었다) ──
   자리가 모자라면 이름 밖의 것부터 줄인다: 간격 8 → 6 → ① «접속 중» 글자는 점만 → 이름 20 → ② «세무사 ● …»를 이름 아래 줄로(카드 ≥ 328은
   이름 21부터 다시 · 카드 ≤ 327은 20 그대로) → ③ 이름 글씨를 단계로(21 · 20 → 18 → 16 → 14 → 13px 하한). 단계는 서버(TaxCardView.NAME_STEPS — 글자 폭 산식 · 구간 예산)가 정해 클래스로 넘기고,
   여기서는 단계마다 변수 넷을 놓는다(아래 «단계 표»):
     --tc-nm-gap    간격(8 · 6)
     --fs-card-nm   이름 글씨 — 카드 이름 토큰 하나를 가리킨다(21 · 20 · 18 · 16 · 14 · 13)
     --tc-on        «접속 중» 글자(1 보임 · 0 점만). 점만일 때는 .tc-on 폭을 점 7로 잘라 낸다 — 글자는 DOM에 그대로라 화면낭독기는 «접속 중»을 읽는다
                    (design.md 2절 «점은 글자 옆에서만»의 예외 — 사용자 결정 2026-10-08)
     --tc-nm-2l     두 줄(1이면 이름 칸이 줄 폭을 다 잡아 «세무사 ● …»가 아래 줄로 꺾인다)
   옛 다섯째 변수(두 줄 단계에서 한 줄 소개를 한 줄로)와 그것을 소개에 넘기던 형제 선택자는 걷었다(사용자 결정 2026-10-08 7차 P10 ⓐ —
   이름이 두 줄이어도 소개는 두 줄 그대로).
   · 이름 칸은 줄지 않는다(flex: none · 말줄임·가림 없음). 서버가 고른 단계면 글 칸 안에 든다(TaxCardCssContractTest 모의 배치). 그래도 이름 혼자
     글 칸보다 길면(예산 밖 — 248보다 좁은 카드, 13px 하한을 넘는 긴 이름) 이름 안에서 줄을 바꿔 다 보인다(max-width 100% · 어디서나 꺾기).
   · 줄은 꺾일 수 있다(flex-wrap) — 서버가 한 줄로 고른 단계에서 글자 폭이 산식과 어긋나도 «세무사»·«접속 중»이 아래 줄로 내려갈 뿐 이름은 안 가린다. */
.tc-nm {
  grid-area: 4 / 2; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tc-nm-gap); white-space: nowrap;
  --fs-card-nm: var(--fs-card-name);
}
.tc-name {
  flex: none; min-width: calc(var(--tc-nm-2l, 0) * 100%); max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  font-size: var(--fs-card-nm); line-height: var(--lh-card-name); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
  color: var(--text-primary);
}
.tc-title {
  flex: none;
  font-size: var(--fs-card-meta); line-height: var(--lh-card-meta); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--grey700);
}
/* «접속 중» — 점 + 글자(.tc-on-t). 점만 단계는 폭을 점(7)으로 자른다(overflow clip — 기준선이 그대로다. 모르는 브라우저는 hidden). */
.tc-on {
  flex: none; max-width: calc(7px + var(--tc-on, 1) * 1000px); overflow: hidden; overflow: clip;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--text-tertiary);
}
.tc-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%;
  background: var(--presence-online); vertical-align: middle;
}
/* 단계 표 — 서버 TaxCardView.NAME_STEPS와 같은 줄(번호 · 간격 · 이름 · «접속 중» 글자 · 두 줄 — TaxCardCssContractTest가 대조).
   기본 구간(350~419)은 구간 밖 규칙이고, 다른 구간은 아래 @container 블록이 같은 표를 그 구간 클래스로 다시 놓는다(겹치는 구간은 뒤 블록이 이긴다 —
   단계마다 변수 넷을 모두 놓으므로 앞 구간 값이 새지 않는다). 서버는 기본 구간에 4를 내지 않는다(카드 ≤ 327 전용). */
.tc-nm-1 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
.tc-nm-2 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
.tc-nm-3 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 0; --tc-nm-2l: 0; }
.tc-nm-5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
.tc-nm-6 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 1; }
.tc-nm-7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 1; --tc-nm-2l: 1; }
.tc-nm-8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 1; --tc-nm-2l: 1; }
.tc-nm-9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 1; --tc-nm-2l: 1; }
.tc-nm-10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 1; --tc-nm-2l: 1; }
.tc-nm-11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 1; --tc-nm-2l: 1; }

/* ── 사무소 · 지역 — 15/22/400 · 한 줄 말줄임: 사무소가 먼저 준다 ── */
.tc-meta {
  grid-area: 5 / 2; min-width: 0; margin-top: 2px;
  display: flex; align-items: baseline; white-space: nowrap; overflow: hidden;
  font-size: var(--fs-card-meta); line-height: var(--lh-card-meta); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--grey700);
}
.tc-office { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-sep { flex: none; padding: 0 5px; color: var(--grey400); }
/* 사무소 말줄임 칸 맞춤 — 말줄임은 글자 단위라 flex가 남은 폭을 통째로 주면 «지유세무회계…» 뒤에 한 글자 남짓 빈칸이 남아 «·»까지 벌어졌다
   (3차 리뷰 RB3UX-06 · 홈 사무소 스위치 TaxCardView.HOME_SHOWS_OFFICE를 켠 시안 390 실측). 이름 줄(위 RBUX-08)과 같은 «글자 폭 배수» 상한이다.
   CSS는 같은 줄 지역의 폭을 모르므로 서버가 style 변수로 싣는다(TaxCardView.officeFitStyle — 글자 폭이 고른 한글·공백 사무소만, 그 밖은 변수 없음 →
   var 무효 → max-width none = 예전 말줄임). 15px 줄 기준 em, 자간(--ls-14 0.02) 포함:
   · --tc-rg 지역 폭 · --tc-of 사무소 전체 폭 · --tc-of-sp 사무소 앞에서 마지막 공백까지의 폭(«세무법인 »까지, 공백 없으면 0).
   · 남은 폭 밖(--tc-of-rest) = 지역 + 구분자(좌우 5 + «·» 0.271 + 자간 0.02 — SemTalkSansRound-Regular 실측).
   · 글자 자리(--tc-of-in) = 줄 폭 − 밖 − 여유 0.5px − 말줄임표(«…» 0.776 + 자간 0.02 = 0.796em).
   · 상한 = max(공백 앞 한글만으로 채운 폭 [= min(글자 자리를 한글 폭 0.968em(0.948 + 0.02)의 배수로 내림, 공백 앞 폭(--tc-of-sp − 공백 0.263 = 실측 0.243 + 자간))],
                공백 뒤 한글로 채운 폭 [= (글자 자리 − 공백까지 폭)을 한글 폭 배수로 내림 + 공백까지 폭 — 글자 자리가 공백까지 폭보다 좁으면 −1000px로 빠진다])
          + 말줄임표 + 0.25px(반올림 여유 — 보이는 글자가 한 자 더 빠지지 않게).
   · 사무소가 통째로 들어가면(줄 폭 − 밖 ≥ 사무소 전체 폭) 상한에 1000px를 더해 상한을 풀어 버린다 — 다 들어가는 사무소는 자르지 않는다.
   round()를 모르는 브라우저는 이 선언을 버리고(max-width none) 예전처럼 말줄임만 한다. */
.tc-office {
  --tc-of-rest: calc(var(--tc-rg) + 10px + 0.291em);
  --tc-of-in: calc(100% - var(--tc-of-rest) - 0.5px - 0.796em);
  max-width: calc(max(min(round(down, var(--tc-of-in), 0.968em), var(--tc-of-sp) - 0.263em),
                      round(down, calc(var(--tc-of-in) - var(--tc-of-sp)), 0.968em) + var(--tc-of-sp)
                        - round(up, max(0px, var(--tc-of-sp) - var(--tc-of-in)), 1000px))
                  + 0.796em + 0.25px
                  + round(up, max(0px, 100% - var(--tc-of-rest) - var(--tc-of)), 1000px));
}
/* 지역은 줄지 않는다(줄이는 몫이 소수점이어도 말줄임이 붙는다 — 사무소가 먼저 0까지 준다). 지역 혼자 칸을 넘을 때만 칸 폭에서 말줄임. */
.tc-region { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── 오른쪽 칸 — 연한 파랑 면(글자를 얹지 않는 면) · 아치 사진은 칸 아래에 붙고 배지는 칸 위 12px ──
   바탕 = --primary-light(#E8F3FF) — 시안 사진 면(#EFF4FB → #E5EEFB)에 가장 가까운 토큰(사용자 결정 2026-10-07 T8 «색은 시안대로»,
   1차 리뷰 RBUX-07: 옛 --surface-tint #F8FBFF는 흰 글 칸과 1.03:1이라 두 칸 구성이 사라졌다). 같은 면 위의 것들: 흰 배지(1px 테두리 +
   그림자로 선다) · 아치 테두리 --tint-blue-line. */
.tc-media {
  grid-area: 1 / 4 / -1 / 5; position: relative; width: var(--tc-col);
  background: var(--primary-light);
}
.tc-arch {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: calc(var(--tc-ph-w) + 2 * var(--tc-ring)); height: calc(var(--tc-ph-h) + var(--tc-ring));
  padding: var(--tc-ring) var(--tc-ring) 0;
  background: var(--tint-blue-line);
  border-radius: var(--r-full) var(--r-full) 0 0;   /* 위쪽 반지름 = 폭/2(큰 값이 폭에 맞춰 줄어든다) */
  overflow: hidden;
}
.tc-photo, .tc-initial {
  display: block; width: 100%; height: 100%;
  border-radius: var(--r-full) var(--r-full) 0 0;
}
.tc-photo { object-fit: cover; }
.tc-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-pressed);
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22);
}
/* 배지 — «후기 준비 중» / 별 + «4.7 · 후기 3»(99건까지) / 별 + «4.7 (128)»(100건부터 — 서버 TaxCardView.reviewCompactOf,
   사용자 결정 2026-10-07 C21). 좌우 여백 8 하나(C21 «여백 10 → 8») — 9,999건까지 좁은 카드 사진 칸 124 안(TaxCardCssContractTest가 글리프 폭으로 잰다). */
.tc-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: max-content;   /* 흰 바탕이 글자를 감싼다 — left 50% 절대 위치는 너비가 사진 칸 절반에서 멈춰 nowrap 글자만 바탕 밖으로 나갔다(사용자 요청 2026-10-09) */
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: var(--r-full); background: var(--surface);
  box-shadow: 0 0 0 1px var(--divider), var(--shadow-card);
  white-space: nowrap;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;   /* 평점·후기 수는 바뀌는 숫자 — 고정폭(타이포 점검 2026-10-03 F7, 옛 홈 카드 .on-star·.on-rvw와 같은 규칙) */
}
.tc-badge svg { flex: none; width: 13px; height: 13px; color: var(--rating-star); }   /* 별만 평점 별 노랑(사용자 요청 2026-10-08 · D-915) — 배지 글자 «4.7»은 .tc-badge text-primary 그대로(옛 T16 잉크) */
.tc-rc { font-weight: var(--fw-regular); color: var(--grey700); }

/* 사진 145 캡처 변형(T18) — 사진 폭 112(얼굴 몫 기준 0.40~0.55 안: 높이 145면 폭 ≥ 109). 기본은 116×152(D-924). */
.tc-photo-145 .tc-media { --tc-ph-w: 112px; --tc-ph-h: 145px; --tc-ring: 4px; }

/* ── 좁은 카드(< 350 — 360·375 폰 · 소수 폭 349.x 포함): 사진 칸 124 · 사진 110×146(높이 146이면 폭 ≥ 110 — T18 비율, D-924 옛 118 · 98×130) · 한 줄 소개 17/24(6차 H1 ⓑ1 — 더 좁은
   x·y·z 구간도 이 값) · 이름 줄 단계는 s 클래스(위 단계 표 그대로) ── */
@container tc (width < 350px) {
  .tc-media, .tc-photo-145 .tc-media { --tc-col: 124px; --tc-ph-w: 110px; --tc-ph-h: 146px; --tc-ring: 4px; }
  .tc-hl { font-size: var(--fs-card-hl-sm); line-height: var(--lh-card-hl-sm); }
  .tc-nm-s1 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
  .tc-nm-s2 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
  .tc-nm-s3 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-s5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-s6 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-s7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-s8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-s9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-s10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-s11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 1; --tc-nm-2l: 1; }
}
/* ── 카드 < 328 세 구간(x 288 이상 328 미만 — 320·344 폰 · y 263 이상 288 미만 — 300 폰·온보딩 레일 하한 · z 263 미만 — 280 폰) ──
   사용자 검수 2026-10-08 ② «360 미만 카드에서는 이름 20px, «접속 중»은 초록 점만 남기고 글자는 화면낭독기용으로만» — 이 세 구간은 그 모양(단계 4)에서
   시작하고 두 줄로 내려가도 점만이다(--tc-on 0 — 서버 TaxCardView.LADDER_TIGHT · 단계 4 → 5 → 7 → 8 → 9 → 10 → 11). 예산은 구간의 가장 좁은 카드
   (x 288 → 글 칸 140 · y 263 → 115 · z 248 → 100)로 잡는다. 좁은 구간이 뒤라 겹치는 폭에서 이긴다.
   ⚠ design.md 2절 «점은 글자 옆에서만»의 예외(사용자 결정 2026-10-08 기록)이다 — 글자는 DOM에 그대로라 링크 이름은 어느 폭에서나 «… 세무사 접속 중».
   ⚠ 구간은 카드 폭 기준이라 홈 밖 미리보기도 같은 규칙을 탄다 — 온보딩 레일 카드 263~327(PC 약 1,100~1,283, onboarding.css)은 이름 20px부터
     («접속 중» 없음). 사용자 결정 2026-10-08 «온보딩 2단계 미리보기도 홈 카드와 같은 규칙 그대로». 광고 미니어처(카드 358 고정)는 기본 구간이다. */
@container tc (width < 328px) {
  .tc-nm-x4 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-x5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-x7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-x8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-x9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-x10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-x11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 0; --tc-nm-2l: 1; }
}
@container tc (width < 288px) {
  .tc-nm-y4 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-y5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-y7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-y8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-y9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-y10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-y11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 0; --tc-nm-2l: 1; }
}
@container tc (width < 263px) {
  .tc-nm-z4 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-z5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-z7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-z8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-z9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-z10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 0; --tc-nm-2l: 1; }
  .tc-nm-z11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 0; --tc-nm-2l: 1; }
}
/* ── 넓은 카드(≥ 420): 한 줄 소개 23/30(6차 H1 ⓑ1 — PC 2열 그대로) · 칩 여백 12 · 사이 6(좁은 칸 촘촘 한 단을 되돌림 — 2026-10-09 칩 기획 L5 ⓐ) ·
   이름 줄 단계는 w 클래스(위 단계 표 그대로) ── */
@container tc (min-width: 420px) {
  .tc-hl { font-size: var(--fs-card-hl); line-height: var(--lh-card-hl); letter-spacing: var(--ls-22); }
  .tc-chips { gap: 6px; }
  .tc-chip { padding: 5px 12px; }
  .tc-nm-w1 { --tc-nm-gap: 8px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
  .tc-nm-w2 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 0; }
  .tc-nm-w3 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-w5 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 0; --tc-nm-2l: 0; }
  .tc-nm-w6 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-w7 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-sm); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-w8 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-18); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-w9 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-16); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-w10 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-14); --tc-on: 1; --tc-nm-2l: 1; }
  .tc-nm-w11 { --tc-nm-gap: 6px; --fs-card-nm: var(--fs-card-name-13); --tc-on: 1; --tc-nm-2l: 1; }
}