/* 홈 (D-115) — 대형 히어로 배너 → 분야 칩 → 광고 세무사 → 인기 세무사 → 바로가기.
   앱 홈(D-110)과 같은 우선순위이고, 구조 수치는 opensea.io 라이트 실측을 따른다.
   색·타이포는 tokens.css(토스톤) 그대로 — 여기서 새 색을 만들지 않는다. */

/* ── 홈 세로 리듬 (D-262) ────────────────────────────────────────────────────
   🔴 **홈의 위아래 간격은 이 두 값이 전부 정한다. 블록마다 따로 적지 마라.**

   왜 변수로 묶었나 — 예전엔 블록마다 `margin-top: 40px`을 손으로 적었다. 상자끼리는
   전부 40으로 맞아 있었는데 **눈에 보이는 틈은 84·40·40·61·61·229·268·40**이었다(1440px 실측).
   밴드(전폭 색면)가 자기 안쪽 패딩을 따로 갖고 있어서, 같은 margin 40이 밴드 앞에서는
   40+패딩으로 벌어졌기 때문이다. 「상자 기준으로 맞췄다」가 「보기에 맞다」를 보장하지 않는다.
   ⇒ 지금은 **두 단**뿐이다: 보통 블록 사이 --home-gap, 밴드 경계 --home-gap + --band-pad.

   ⚠ 새 블록을 홈에 추가하면 margin-top에 반드시 var(--home-gap)을 쓸 것. 숫자를 적는 순간
     그 블록만 리듬에서 빠지고, 그 사실은 아무도 모르는 채로 남는다(위 실측이 그렇게 생겼다).
   ⚠ 밴드를 새로 만들면 padding 위아래도 var(--band-pad)다. 밴드마다 다른 값을 주면
     「밴드는 넓게」가 아니라 「밴드마다 제각각」이 된다(review 80/120 vs situ 20/20이 그랬다).
   ⚠ 좁은 화면 값은 **파일 맨 끝** @media에서 이 :root를 다시 정의한다(아래 D-166 주석 참고). */
:root {
  --home-gap: 56px;
  --band-pad: 40px;
}

/* ── 히어로 배너: 한 번에 한 장 (D-161) ─────────────────────────────
   예전엔 좌우 패딩으로 이웃 카드를 살짝 노출하는 peek 캐러셀이었다(D-128) —
   "옆에 더 있다"를 보여 주려는 장치였다. 지금은 우하단 카운터(n/N)와 좌우 화살표가
   그 역할을 하므로 **이웃을 걷어내고 그 폭을 본 배너에 돌려준다**(사용자 지시).
   ⚠ 카드 폭을 **퍼센트로 두 번 쓰지 않는다**(D-153에서 실측으로 잡은 결함).
   예전엔 `--hero-w: min(920px, 84%)`를 트랙 padding과 카드 flex-basis 양쪽에 썼는데,
   **같은 84%가 서로 다른 기준으로 풀린다**: padding은 wrap 폭(1024)의 84%=860,
   flex-basis는 **트랙의 안쪽 폭**(1024−패딩 164=860)의 84%=723. 카드가 padding이 가정한
   자리보다 137px 좁아져, 그 계산을 믿고 세운 화살표·카운터가 옆 카드 위에 얹혔다.
   지금은 **옆 여백(--hero-side) 하나만** 정하고 카드는 남은 자리를 그대로 채운다
   (flex-basis:100% = 트랙 안쪽 폭). 이러면 카드 폭과 여백이 정의상 어긋날 수 없다. */
/* 배너 위아래 여백 (D-166 → D-262에서 축소, 사용자 지시 "메인배너 상하여백을 살짝 줄이고")
   예전엔 60/84였다. 화면 맨 위에서 배너까지 152px — 참고 지면이 카테고리 줄에 쓰던 64px을
   우리는 그 줄을 두지 않으니 여백으로 돌린 값이었다. 그 줄이 없는 지면에서는 그냥 빈 자리로 읽힌다.

   지금은 **두 가지를 동시에 만족시키는 하나의 수**를 쓴다:
     ⓐ 위아래 대칭 (D-167, 사용자 지시) — 상단바 아래 끝을 기준으로 잰다.
        위 = .main 위 패딩 24 + margin-top 32 = **56**, 아래 = margin-bottom 56. 같다.
     ⓑ 아래쪽이 **섹션 리듬과 같은 값**(--home-gap) — 배너가 리듬 위에 올라선다.
        예전 84는 어느 섹션 간격과도 안 맞아 배너만 혼자 떠 보였다.
   ⇒ 화면 맨 위에서 배너까지 68(상단바) + 56 = **124px**.

   ⚠ margin-top만 리듬에서 벗어난 숫자(32)다. 위는 **고정 크롬(상단바) 바로 아래**라
     블록과 블록 사이와는 성격이 다르다 — 대칭을 맞추는 쪽이 우선이다.
     `.main`의 위 패딩(24px, shell.css)이 바뀌면 이 32도 같이 고쳐야 대칭이 유지된다.
   ⚠ 아래는 다음 형제의 margin-top과 **상쇄되어 큰 쪽만 남는다.** 둘 다 --home-gap이라
     지금은 정확히 --home-gap이다. 한쪽만 키우면 그쪽이 이겨 대칭이 깨진다. */
.hero-wrap {
  position: relative;
  /* 0 = 이웃이 안 보인다. 카드 왼쪽 끝이 본문 칼럼(=섹션 제목)과 정확히 맞아떨어진다.
     ⚠ 이 값을 되살리면 그만큼 이웃 카드가 다시 걸쳐 보인다(노출 폭 = side − peek).
        화살표·카운터 위치도 이 변수로 계산하므로 여기만 바꾸면 같이 따라간다. */
  --hero-side: 0px;
  /* 카드 사이 간격. 두 장을 놓으면 **늘 보이는 사이 간격**이 된다(예전엔 넘어가는 도중에만 보였다). */
  --hero-peek: 16px;
  /* 한 화면에 놓을 배너 장수 (D-190). 폭 계산·좁은 화면 폴백이 전부 이 값 하나를 본다. */
  --hero-per: 2;
}
/* 🔴 **여백은 `.hero-wrap` 본체에 주면 안 된다.** 밴드 안 로테이션 레일도 `.hero-wrap`이다
   (`<div class="hero-wrap situ-rail">` — 위 변수들을 물려받으려고 같은 클래스를 쓴다).
   그래서 여백만 `:not(.situ-rail)`로 떼어 둔다. 레일 여백은 `.situ-rail`이 따로 정한다.

   ⚠ 예전엔 `.hero-wrap`에 그냥 margin을 적고, 뒤에 오는 `.situ-rail { margin: 14px 0 0 }`이
     **순서로** 그걸 덮는 구조였다. 데스크톱은 우연히 맞았지만 좁은 화면 규칙은 파일 맨 끝이라
     레일보다 뒤 → 밴드 안 레일이 아래 48px을 물어 밴드 아래 틈만 37 → **85**로 벌어졌다(375px 실측).
     `:not()`으로 바꾼 지금은 **어느 쪽이 앞에 오든** 레일이 페이지 배너 여백을 물지 않는다. */
.hero-wrap:not(.situ-rail) {
  margin-top: 32px;
  margin-bottom: var(--home-gap);
}
/* 좁아지면 한 장으로 접는다(사용자 지시 "좌우 공간이 줄어들면 1개씩 보여져도 괜찮아").
   반 폭 카드가 3.08:1이라 폭이 줄면 높이가 같이 줄어드는데, 태블릿 폭에서 이미 카피가
   읽히지 않을 만큼 작아진다 — 광고 지면이 안 읽히면 지면이 아니다. 그래서 한 장으로 돌린다. */
@media (max-width: 900px) {
  .hero-wrap { --hero-per: 1; }
}
/* 배너가 한 장뿐이면 두 칸으로 쪼개지 않는다 — 복제본이 옆에 서서 **같은 그림이 두 번**
   보인다(무한 순환용 클론이라 지울 수도 없다). 장수는 서버가 안다(index.html). */
.hero-wrap.hero-one { --hero-per: 1; }
.hero-track {
  display: flex; gap: var(--hero-peek); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-inline: var(--hero-side);
  /* ⚠ `padding-block: 10px`을 되살리지 마라(D-167). 카드 그림자에 자리를 주려던 것인데,
     그림자를 걷어낸 지금은 배너 위아래에 **10px짜리 빈 띠**만 남는다 —
     그 띠 때문에 배너가 계산한 자리(152px)보다 아래에서 시작해 보였다. */
}
.hero-track::-webkit-scrollbar { display: none; }

/* ── 로테이션 배너를 가로 트랙으로 (D-258) ─────────────────────────────────────
   '이제 혼자 고민하지 않아도 돼요'가 이 레일을 쓴다. 밴드 안이라 위 여백을 다시 벌지 않는다
   (`.situ-band`가 이미 padding을 갖고 있다). 제목이 있던 때의 14px(제목↔레일 간격)은 D-765에서
   제목과 함께 0으로 접었다 — 밴드 패딩이 위아래 같은 값으로 남는다. */
.situ-rail { margin-top: 0; margin-bottom: 0; container: situ-rail / inline-size; }   /* 컨테이너 = 고민별 카드의 «오른쪽 128 타일» 판정(아래 @container) */
/* ── 고민별 안내 배너 카드 (2026-10-09 흰 카드 7장 — 사용자 승인 «바꿀 내용» 3·5) ─────────────────────
   옛 카드(1400×420 그림 위에 헤드라인·알약을 얹던 .hero-card 변형)를 걷고 **흰 카드 + 오른쪽 1:1 그림 타일**로 바꿨다 — 글자를 그림 위에 얹지 않는다.
   ⚠ `.hero-card`를 쓰지 않는다 — 폰 블록의 `.hero-card:not(.hero-img-only) { min-height: 240px }`(폴백 히어로용)이 이 카드에 걸리지 않게.
     폭 식은 `.hero-card`와 같다(`--hero-per` — 901 이상 두 장 · 900 이하 한 장, 위 `.hero-wrap` 변수).
   카드: 흰 바탕 · 1px --border · 모서리 16 · 안쪽 24. 헤드라인 title2(20 · ≥768 22)·600·최대 2줄 · 서브 body2(14/22 · ≥768 15/24)·400·#4E5968 한 줄
   (넘치면 말줄임) · 버튼 40px · 모서리 16 · label2 크기 14 + 600 · 흰 글자 · #1B64DA(hover/pressed에 새 색 없음).
   그림 타일: 바탕 #E8F3FF · 모서리 16 · 폰 = 버튼 줄 오른쪽 80px · 카드 폭 480 이상(화면 약 1248 이상) = 카드 오른쪽 세로 가운데 128px · 360 미만 = 숨김. */
.situ-card {
  position: relative; scroll-snap-align: start; min-width: 0;
  flex: 0 0 calc((100% - var(--hero-peek) * (var(--hero-per) - 1)) / var(--hero-per));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
  grid-template-areas: "head head" "sub sub" "btn tile"; column-gap: 16px;
  padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text-primary); text-decoration: none;
}
/* 마우스 올림·포커스·누름은 파일 끝 «홈 카드 반응 한 벌 — F안»(사용자 결정 2026-10-09 홈 카드 호버 F안 확정) — 그림 타일·제목에 사진 카드와 같은 문법.
   옛 테두리 색 hover · CTA 1px 눌림은 걷었다(F안: 그림자·바탕·테두리는 바꾸지 않는다). */
.situ-head {
  grid-area: head;
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); color: var(--text-primary);
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.situ-sub {
  grid-area: sub; margin-top: 8px;
  font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14); color: var(--grey700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.situ-btn {
  grid-area: btn; align-self: end; justify-self: start; margin-top: 24px;
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: var(--r-lg);
  background: var(--primary-pressed); color: #fff; white-space: nowrap;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14);
}
.situ-btn svg { flex: 0 0 auto; }
.situ-tile {
  grid-area: tile; align-self: end; margin-top: 16px;
  width: 80px; height: 80px; border-radius: var(--r-lg); overflow: hidden; background: var(--primary-light);
}
.situ-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 359px) {
  .situ-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sub" "btn"; }
  .situ-tile { display: none; }
}
/* 오른쪽 세로 가운데 128px 타일 — **카드 폭 480 이상**일 때만(레일 폭 976 이상 = 두 장 × 480 + 사이 16).
   ⚠ 안내는 «901 이상 128»이었지만, 901~1247 화면은 사이드바·여백을 빼면 두 장 카드가 315~479px뿐이라 128 타일을 옆에 세우면
     글자 칸이 113~246px로 줄어 헤드라인·서브가 7장 모두 잘렸다(로컬 실측 901·960·1024·1100·1180 — 잘림 14·12·9·6·1).
     그 폭에서는 폰과 같은 배치(버튼 줄 오른쪽 80px)로 둔다. 1280(카드 495.8)·1440(572)은 안내 그대로 오른쪽 128.
   레일 폭은 화면 900 이하(한 장)에서 최대 ~736이라 이 조건은 901 이상에서만 참이 된다. */
@container situ-rail (min-width: 976px) {
  .situ-card { grid-template-rows: auto auto auto; grid-template-areas: "head tile" "sub tile" "btn tile"; column-gap: 24px; align-content: center; }
  .situ-tile { align-self: center; margin-top: 0; width: 128px; height: 128px; }
}
/* 🔴 카드 **안** 화살표(.hero-arrow)는 만들지 않는다(2026-09-13 «카피와 겹침» — banner.js도 situ-rail에선 안 만든다). 넘김 버튼은 카드 밖 .situ-nav뿐. */
.situ-rail .hero-arrow { display: none !important; }

/* 넘김 컨트롤 — 카드 밖 아래 한 줄: 왼쪽 점 7 + «n / 7» · 오른쪽 이전·다음(769 이상). JS(.is-ready) 전엔 감춘다. */
.situ-rail:not(.is-ready) .situ-ctrl { display: none; }
.situ-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; min-height: 40px; }
.situ-dots { display: flex; align-items: center; gap: 8px; min-width: 0; }
.situ-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--grey300); transition: width .2s ease, background .2s ease;
}
.situ-dot.is-active { width: 26px; background: var(--primary); }
.situ-dot:focus-visible { outline: 2px solid var(--primary-pressed); outline-offset: 2px; }
.situ-count {
  margin-left: 8px; white-space: nowrap;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--grey700);
  font-variant-numeric: tabular-nums;
}
.situ-nav { display: flex; gap: 8px; flex: none; }
.situ-arw {
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer;
  background: var(--surface); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center;
}
.situ-arw:hover { border-color: var(--grey300); }
.situ-arw:focus-visible { outline: 2px solid var(--primary-pressed); outline-offset: 2px; }
@media (max-width: 768px) {
  .situ-nav { display: none; }   /* 폰·좁은 폭은 스와이프 */
  /* 손가락 자리 — 8px 점은 그대로 두고 히트만 세로 36px · 가로는 점 사이(8px)를 반씩 나눠 겹치지 않게. */
  .situ-dot { position: relative; }
  .situ-dot::after { content: ""; position: absolute; inset: -14px -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .situ-dot { transition: none; }
}

/* ⚠ **그림자를 넣지 마라**(D-167). 예전 `0 10px 28px rgba(0,0,0,.16)`은 흰 배경 위에
   배너를 둘러싼 **회색 번짐**으로 보였다 — 사용자가 "여백에 회색이 보인다"고 지적한 것이
   이 그림자다. 참고 지면(nol.yanolja.com)도 배너에 그림자가 없다(실측 `shadow: none`).
   카드 배경 --grey100은 그림자가 아니라 **이미지를 못 받았을 때의 바닥색**이라 남긴다. */
/* 한 화면에 **두 장**을 놓는다(D-190, 사용자 지시 · 참고 지면 NOL). 한 장짜리 전면 배너는
   3.08:1 원고를 본문 폭 전체로 늘려서 세로를 크게 먹었는데, 반 폭으로 두 장을 놓으면
   **같은 비율로 높이가 절반**이 된다 — 사용자가 예상한 "총 높이가 줄어들 것 같다"가 이것이다.

   ⚠ 폭 계산은 `--hero-per`(한 화면에 놓을 장수) 하나로 몬다. gap이 (장수−1)개 들어가므로
     `(100% − gap×(n−1)) / n`이다. 좁은 화면에서 n을 1로 바꾸면 식이 100%로 접혀
     예전 동작으로 정확히 되돌아간다 — 분기를 두 벌 쓰지 않는 이유다.
   ⚠ **snap을 center → start로 바꿨다.** 두 장이 보이는데 center로 맞추면 가운데 한 장만
     정렬되고 좌우로 반쪽씩 걸쳐 보인다. start면 왼쪽 카드가 본문 칼럼에 딱 맞는다
     (한 장일 때는 start·center가 같은 자리라 폴백도 그대로다). */
.hero-card {
  position: relative; scroll-snap-align: start;
  flex: 0 0 calc((100% - var(--hero-peek) * (var(--hero-per) - 1)) / var(--hero-per));
  min-height: 320px; border-radius: var(--r-xl); overflow: hidden;
  display: flex; align-items: center;
}
/* 이미지 전용 배너 (D-142 · 비율 D-153) — 카드 비율을 **권장 원고 비율(3.08:1 · 2480×806)** 로
   고정한다. min-height를 그대로 두면 넓은 화면에서 카드가 원고보다 세로로 길어져 위아래가 잘린다.
   앱 캐러셀도 같은 비율을 쓴다 — 원고 한 장이 두 화면에서 **똑같이** 잘려야
   운영자가 결과를 예측할 수 있다(앱 promo_banner_carousel.dart의 _bannerAspect).
   ⚠ 이 숫자를 바꾸면 **앱도 같이** 바꿔야 한다. 2.5:1이던 것을 참고 사이트(NOL)와 같은
   가로로 긴 지면에 맞춰 넓혔다 — 좁은 비율에 넓은 원고를 넣으면 위아래가 잘려 카피가 날아간다.
   규격을 지킨 원고면 cover가 잘라내는 부분이 없다. 어긋난 원고는 가운데를 남기고 자른다 —
   레터박스(빈 띠)보다 광고 지면답게 보인다. */
/* 쓰이지 않음 · D-965 기준 원고 비율 아님(지금 원고 = 공용 2480×620 4:1 · 틀은 뒤쪽 .bnr.bnr-img — 템플릿이 이 클래스를 더는 쓰지 않는다). */
.hero-img-only { min-height: 0; aspect-ratio: 2480 / 806; background: var(--grey100); }
/* ⚠ `.is-active`(JS가 가운데 카드에 붙인다)로 **축소·반투명 처리를 하지 않는다**(D-161).
   그건 이웃이 보이던 시절에 깊이를 주려던 장치였다. 한 장만 보이는 지금은 넘어가는
   도중에 나가는 카드가 쪼그라드는 것만 보여서 오히려 어색하다.
   JS는 계속 이 클래스를 붙이지만(카운터 계산과 무관하게 무해하다) CSS는 쓰지 않는다. */
/* 이미지가 없거나 로드에 실패해도 이 그라디언트가 남아 레이아웃이 깨지지 않는다. */
.hero-g0 { background: linear-gradient(120deg, #5A97F8, #2F6BF0 55%, #1544A8); }
.hero-g1 { background: linear-gradient(120deg, #15C47E, #059862 55%, #04664A); }
.hero-g2 { background: linear-gradient(120deg, #7C6BF6, #5A45E0 55%, #3A2AA8); }
.hero-g3 { background: linear-gradient(120deg, #FF9F45, #FF6B00 55%, #C24E00); }

.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* .hero-photo(인물 컷아웃)·.hero-scrim(글자용 어둠막)은 삭제했다(D-142) — 배너가 이미지
   전용이 되면서 얹을 글자가 없어졌고, 가릴 이유가 없는 이미지를 가리고 있었다.
   아래 .hero-body 계열은 **배너가 없을 때의 폴백 카드**가 아직 쓰므로 남긴다. */

.hero-body {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 0 48px; max-width: 620px; color: #fff;
}
.hero-label {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.22);
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12);   /* caption2: 배지(옛 12/700) */
}
/* display · body2(C3 묶음 1): 폴백 제목 옛 32/700(폰 23) → 28/38 · ≥768 36/46 · 600, 부제 옛 15 → 14/22 · ≥768 15/24. */
.hero-title { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-36); }
.hero-sub { font-size: var(--fs-body2); line-height: var(--lh-body2); color: rgba(255,255,255,.88); }
.hero-cta {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  height: 44px; padding: 0 20px; border-radius: var(--r-full);
  background: #fff; color: var(--text-primary);
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14);   /* label1: 44px 알약 CTA(옛 14/700) */
}
/* 알약 끝 — 옛 꼬리 기호(::after '›')를 걷고 연한 회색 선 아이콘(fragments/line-icons :: go · app.css .row-go)을
   마크업에 둔다(3차 정리 통합 — 사용자 답 2026-09-28). 알약이 inline-flex라 margin-left:auto는 gap(3px) 뒤에 그대로 붙는다. */
/* 카드 전체를 덮는 클릭 영역 — 링크 없는 배너는 이 요소만 빠진다. */
.hero-tap { position: absolute; inset: 0; }

/* ── 화살표 · 카운터 (D-153, 참고 지면 NOL) ─────────────────────────
   점(dot) 대신 **화살표 + 우하단 카운터**를 쓴다. 배너가 10장이면 점 열 개는 하나하나가
   너무 작아 못 누르고, "몇 번째/몇 장"이라는 정보도 안 준다.
   ⚠ 셋 다 **JS가 만든다** — 눌러도 아무 일 없는 장식만 남는 상태를 만들지 않기 위해서다.
      스크립트가 죽으면 배너는 가로 스크롤로 그대로 넘길 수 있다. */

/* 좌우 화살표 — 가운데 카드의 양 끝에 걸친다. 옆 여백(--hero-side)에서 위치를 계산하므로
   화면 폭이 바뀌어도 항상 카드 모서리에 붙어 있다. */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: var(--r-full);
  border: 0; padding: 0; cursor: pointer;
  background: #fff; color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero-arrow:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .24); }
.hero-arrow:active { transform: translateY(-50%) scale(.94); }
.hero-arrow svg { width: 20px; height: 20px; display: block; }
/* 카드 안쪽으로 22px 물려 세운다(참고 지면과 같은 자리). */
.hero-arrow-prev { left: calc(var(--hero-side) + 22px); }
.hero-arrow-next { right: calc(var(--hero-side) + 22px); }

/* ⚠ **카운터(⏸ n/N ⊞)와 펼치기 패널의 CSS는 걷었다**(D-299, 사용자 지시 —
   「좌우 화살표만으로 충분」). 마크업을 만들던 banner.js 쪽도 함께 지웠으므로 여기 규칙만
   남으면 «무엇을 그리는지 알 수 없는 규칙»이 된다.
   ⚠ D-297에서 넣었던 `.situ-rail .hero-counter`(화살표와 안 겹치게 가로로 비키기)도 함께
     사라진다 — 비킬 대상이 없어졌기 때문이다.
   ⚠ 2026-10-09 고민별 배너가 «n / 7» 카운터를 되살렸지만(사용자 답 «추천대로») 카드 **밖** 아래 줄(.situ-ctrl)이다 —
     이전·다음도 같은 줄 오른쪽이라 겹칠 자리가 없어 옛 비키기 규칙은 되살리지 않는다. 옛 ⏸·펼치기는 여전히 없다.
   🔴 자동 넘김을 **멈출 수단**은 화살표가 받는다(banner.js stopAuto) — WCAG 2.2.2. 고민별 배너는 자동 넘김 자체가 없다. */

/* 좁은 화면 — 카드가 화면을 거의 채우므로 화살표를 접고(스와이프가 자연스럽다)
   카운터만 남긴다. 46px 버튼 두 개가 배너 위를 덮으면 원고가 안 보인다.
   ⚠ 카운터도 함께 줄인다. 카드 높이가 폭÷3.08이라 375px 화면에서는 **110px 남짓**인데,
      데스크톱과 같은 34px 알약을 얹으면 카드의 3분의 1을 덮어 원고 카피를 가린다(실측). */
@media (max-width: 768px) {
  /* ⚠ 좁은 화면 `.hero-wrap` 여백은 **파일 맨 끝** 리듬 블록에 있다(D-262). 여기 다시 적으면
     둘 중 뒤에 오는 쪽이 조용히 이겨서, 고친 값이 안 먹는 것처럼 보인다. */
  .hero-arrow { display: none; }
}

/* ── '이런 고민이라면' 밴드 (D-155) ─────────────────────────────────
   광고 목록과 그 아래를 나누며 시선을 환기시키는 전폭 띠.
   참고 지면(koreanair.com "여행의 완성을 위한 경험")에서 성질 둘을 가져왔다:
     ① 배경을 한 단 낮춰 페이지를 물리적으로 끊는다
     ② **볼드를 한 글자도 쓰지 않는다** — 바로 위가 광고 구간이라 목소리를 낮춰야 한다

   🔴 참고 지면의 나머지 둘(**파랑 틴트** · **테두리 없는 반투명 카드**)은 2026-08-09에
      걷어냈다. 사용자 지적은 "하늘색 배경 + 검은 글씨가 이질감"이었고, 실측해 보니
      **대비 문제가 아니었다** — 라벨은 최악 지점에서도 11.7:1로 넉넉했다(4.5:1 기준).
      진짜 원인은 둘이다:
        ⓐ **홈에서 채도 있는 색면이 이 밴드 하나뿐**이었다. 위(프리미엄 세무사)도
           아래(지금 상담 가능)도 순백 지면 + 흰 카드인데 여기만 #DCEBFC 판이었다.
        ⓑ **카드에 테두리가 없어** 틴트 위에서 카드 경계가 녹아, 줄 전체가 '카드 넉 장'이
           아니라 '검은 글씨가 얹힌 파란 판 하나'로 읽혔다.
      그래서 홈의 기존 두 부품으로 **수렴**시켰다 —
        · 밴드 = `.review-band`와 같은 처리(--grey50 + 위아래 1px --border)
        · 카드 = `.pf-card`와 같은 처리(--surface + 1px --border + --r-md)
      안 다섯을 실제로 렌더해 비교한 결과다(A 현행 #DCEBFC / B --grey50+헤어라인 /
      C 흰 배경+헤어라인 / D --surface-alt / E --primary-light). C는 밴드가 사라져
      '구간을 끊는다'는 임무가 없어졌고, D는 회색이 무거워 흰 이웃과 부딪혔고,
      E는 옅어졌을 뿐 같은 문제가 남았다. */

/* 전폭 처리 — ⚠ `width: 100vw`를 쓰면 안 된다. `.main`이 세무사모드에서
   `margin-left: var(--sidebar-w)`라 100vw는 사이드바 폭만큼 오른쪽으로 넘친다.
   본문 좌우 패딩만 되돌리면 의뢰인모드는 화면 끝까지, 세무사모드는 본문 칼럼 끝까지 정확히 찬다.
   ⚠ 앱 웹뷰(?app=1)는 셸이 본문 좌우 패딩을 0으로 걷는다 — 홈은 본문 상자(.home-page)가 그 여백을 다시 들어 이 번짐이 일반 웹과 똑같이 맞물린다
     (파일 아래 «앱 웹뷰 홈 본문 여백», 사용자 결정 2026-10-08). */
/* ⚠ **얇게 유지한다.** 이 구간의 임무는 위아래를 나누는 것이지 자기 존재를 주장하는 게 아니다.
   글자를 걷어내고(부제·분야줄·고지문 삭제) 여백을 줄여 200px 안쪽으로 낮췄다. */
/* ⚠ 배경·테두리는 `.review-band`(이 파일 아래쪽, 홈의 다른 전폭 밴드)와 **한 벌**이다.
   --grey50은 흰 배경 대비 1.03:1이라 **혼자서는 구간을 못 끊는다** — 위아래 헤어라인이
   실제로 끊는 일을 한다. 둘 중 하나만 남기면 밴드가 사라지거나(배경만) 뜬금없는
   구분선 두 줄만 남는다(테두리만). 한쪽을 고치면 `.review-band`도 같이 고칠 것. */
.situ-band {
  margin-inline: calc(var(--shell-pad) * -1);
  margin-top: var(--home-gap);            /* 다른 섹션과 같은 리듬 */
  padding: var(--band-pad) var(--shell-pad);  /* 안쪽 여백은 .review-band와 같은 값(D-262) */
  background: var(--grey50);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;   /* 레일이 밴드 밖으로 새지 않게 */
}
/* 밴드 제목(.situ-title 「먼저 상담한 분들이 남긴 이야기」, D-161 규칙 20px/500)은 **D-765에서 걷었다**
   (사용자 지시) — index.html의 <h2>와 함께. 되살리지 마라. */

/* ── 로테이션 배너 (D-247) — 캐러셀 ──────────────────────────────────────────
   지난 버전은 상황 카드가 왼쪽으로 흐르는 순수 CSS 마퀴였다(situ-*). 이미지가 이미
   1400×420(좌측 비움 + 우측 3D 오브제)이라, 그림을 배경으로 깔고 좌측 안전영역(46%)에
   글자를 얹는 배너로 바꿨다. 슬라이드는 겹쳐 쌓고 .is-active만 페이드로 보인다.

   🔴 JS 없이도 산다: 서버가 첫 슬라이드에 .is-active를 박아 두므로 그 한 장과 링크가 보인다.
      컨트롤(점·카운터·화살표)은 banner-carousel.js가 .is-ready를 붙이기 전엔 감춰 둔다 —
      눌러도 아무 일 없는 장식을 남기지 않는다.
   ⚠ 배경·테두리(.situ-band)는 위쪽 그대로 두고(리듬·review-band와 한 벌), 그 안에 카드를 넣는다. */
.bnr {
  /* 변수 둘은 **여기**(쓰는 자리)에 둔다(D-801). 예전(58c31143)엔 `.hero-wrap`에 있었다 — 그쪽 max-width
     calc가 읽어야 했기 때문인데, 그 calc를 걷은 지금은 올려 둘 이유가 없다. 여기 두면 `.bnr`이 어느 상자에
     놓여도 이웃 transform(아래)이 성립한다. ⚠ 폴백을 남긴다 — 변수가 없으면 `max-width`가 통째로 무효가
     되어 상한이 풀린다. 숫자는 여기 한 곳뿐이다. */
  --bnr-max: 1200px;      /* 본 배너 폭 */
  --bnr-peek-gap: 16px;   /* 본 배너와 이웃 사이 — .is-prev/.is-next의 transform이 쓴다 */
  position: relative; max-width: var(--bnr-max, 1200px); margin: 14px auto 0; height: 340px;
  border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: 0 12px 32px rgba(20, 36, 61, .10);
}
/* ── 이미지 전용 변형 (D-258) — 홈 최상단 광고주 배너가 이 캐러셀을 쓴다 ────────────
   🔴 **틀 높이를 낮췄다 — 홈 «안 B»(사용자 요청 2026-10-08 «배너 높이는 390에서 약 149px, 1280에서 약 252px로 낮춰요»).**
      틀은 여전히 **비율**이다(운영자가 결과를 예측할 수 있게 — D-153): 넓은 화면(901 이상) **4:1**(1280 → 1007.7 × 252) ·
      중간 폭(601~900) **3:1** · 폰(600 이하) **12:5**(390 → 358 × 149, 아래 블록). 옛 값 2480/806(원고 비율 그대로 — 1280에서 327) ·
      2:1 · 3:2에서 내려왔다. 그 사이 폭은 이 비율대로 따라간다.
   🔴 원고 = 틀 비율(D-965, 사용자 요청 2026-10-14 «메인배너 이미지가 위아래로 살짝 짤린것처럼 보이는 문제»): 공용 **2480×620(4:1)** · 모바일 **1200×500(12:5)**
     (ImageSpec.BANNER_PIXELS · BANNER_MOBILE_PIXELS — 관리자 «배너 관리» 권장 규격·비율 관문·미리보기가 같은 숫자를 읽는다).
     안 B는 틀만 낮춰서 옛 원고(2480×806 · 3.08:1, 폰 1200×800 · 3:2)가 cover에 위아래로 잘렸다(넓은 화면 11.5%씩 · 폰 18.75%씩) —
     틀은 그대로 두고 원고를 틀 비율로 다시 그렸다.
   ⚠ 중간 폭(601~900) 3:1 틀은 공용 4:1 원고의 **오른쪽 25%**를 자른다(아래 ≤900 블록 left center — 왼쪽 기준). 그래서 원고의 글자·버튼은
     **왼쪽 75% 안**에 둔다(안전 영역 — 관리자 공용 칸 안내 한 줄). 모바일 원고가 없는 배너는 폰(12:5)에서 공용 원고의 왼쪽 60%만 보인다.
   ⚠ 이 숫자를 바꾸면 **앱도 같이** 바꿔야 한다(promo_banner_carousel.dart의 aspectFor·cropFor — 10/13 6267570b에서 4:1 · 3:1 · 12:5와
     ≤900 왼쪽 기준으로 맞췄다. Flutter test/promo_banner_carousel_test.dart ⑤가 이 파일을 읽어 앱 값과 대조한다).
   ⚠ 여기에는 `.bnr-copy`가 없다(D-142) — 글자를 얹으려면 그 결정부터 뒤집어야 한다. */
.bnr.bnr-img { height: auto; aspect-ratio: 4 / 1; }
/* 광고 원고는 가운데가 주인공이다 — 기본 `.bnr-bg`의 `object-position: right center`는
   우리 일러스트(오브제가 우측)용이라 여기서 되돌린다. */
.bnr.bnr-img .bnr-bg { object-position: center; }
/* 🔴 점·카운터와 화살표는 **그림 밖 아래**에 선다 — 모든 폭(사용자 요청 2026-10-08 «점 내비는 이미지 밖 아래쪽으로 빼서 그림 속 버튼을
   가리지 않게»). 원고는 CTA를 왼쪽 아래에 그린다 — 옛 왼쪽 아래 알약(left 20 · bottom 16)이 낮아진 틀에서 그 CTA를 덮는다.
   넓은 화면(769 이상): 점은 배너 왼쪽 끝 아래 · 화살표는 오른쪽 끝 아래(안 B 시안). 폰·중간 폭(768 이하, 화살표 없음): 점은 가운데 아래(아래 블록).
   알약 배경은 흰 바탕 위라 걷는다. 그만큼 배너 상자 아래 여백을 준다(화살표 38 + 2 = 40 · 폰 30 — 옛 ≤600 값).
   예전에는 ≤600과 901~985(2026-10-03 사용자 답 «이 구간에서만 점을 상자 아래로»)만 아래였고 나머지 폭은 그림 안 왼쪽 아래였다 — 901~985 블록은 이 규칙에 흡수돼 걷었다.
   ⚠ 양 끝 4px 들임: 감싼 칸(.hero-wrap)이 overflow-x: clip(경계 = 본문 칼럼)이라 점·화살표를 칼럼 끝(0)에 붙이면 키보드 포커스 링
     (outline 2 + offset 2 = 4px)의 바깥 4px이 잘렸다(769 이상 실측 — 첫 점 링 왼쪽 · «다음» 링 오른쪽, design.md §4 «포커스 링은 보이게»,
     검토 UX-R-03). 그 4px만큼 안으로 들인다(≤768 가운데 점은 아래 블록이 left 50%로 덮는다 · 화살표는 ≤768에서 숨김). */
.bnr.bnr-img .bnr-dots {
  left: 4px; right: auto; bottom: -34px; transform: none;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 0;
}
.bnr.bnr-img .bnr-nav { right: 4px; bottom: -40px; }
.hero-wrap:not(.situ-rail):has(> .bnr-img) { padding-bottom: 40px; }
@media (max-width: 768px) {
  .bnr.bnr-img .bnr-dots { left: 50%; transform: translateX(-50%); }
  .hero-wrap:not(.situ-rail):has(> .bnr-img) { padding-bottom: 30px; }
}
.bnr-track { position: absolute; inset: 0; border-radius: inherit; }
/* 폰 원고(imageUrlMobile)가 있는 배너만 img를 picture로 감싼다(index.html — ≤600에서 source가 폰 원고를 고른다).
   picture는 상자를 만들지 않는다 — 기준 상자는 여전히 .bnr-slide이고, .bnr-bg의 absolute · inset 0 · cover가 그대로 산다.
   폰 원고는 틀(12:5, D-965)과 같은 비율이라 cover가 자르는 곳이 없다(아래 ≤900 left center는 공용 원고의 폴백 크롭). */
.bnr-slide > picture { display: contents; }

/* ══ 양옆 빈 자리에 이전·다음 배너를 앉힌다 (D-699, 사용자 지시) ═══════════════════
   신고: 「기기 모니터 환경에 따라 메인배너 양옆이 비어보인다」.
   원인은 위 `.bnr`의 **max-width: 1200px + margin auto**다 — 넓은 모니터일수록 좌우 여백이
   그대로 빈 자리가 된다(2000px 폭이면 양쪽 400px씩). 1200px 상한 자체는 지워선 안 된다:
   높이가 틀 비율(4:1 — 위 .bnr.bnr-img · D-965 원고 2480×620과 같음, 옛 원고 비율 2480×806에서 내려옴)을 따라가므로
   상한을 풀면 넓은 화면에서 배너만 자란다(2000px 폭이면 높이 500px — 옛 3.08:1 때는 650px).

   그래서 **본 배너는 그대로 두고, 앞뒤 장을 여백으로 내보낸다.**
   ⚠ 얼마나 보일지는 CSS가 정하지 않는다 — 남는 여백이 곧 노출 폭이고, 여백이 없으면 아무것도
     안 보인다. 「모니터 환경에 따라」라는 신고에 맞춰 **자리가 스스로 정하게** 둔 것이다.
     좁은 화면에서 따로 끌 필요가 없는 이유이기도 하다.
   ⚠ 이웃은 **주인공을 넘어서면 안 된다** — 어둡게 깔고 클릭·탭·낭독에서 뺀다
     (JS가 비활성에 aria-hidden·tabindex=-1을 이미 걸어 둔다. pointer-events로 한 겹 더 받친다).
   ⚠ 두 장뿐이면 JS가 표식을 아예 안 단다(앞뒤가 같은 장이라 반쪽이 된다) — banner-carousel.js. */
/* 이웃이 상자 **밖**으로 나가야 하므로 여기서 자르지 않는다. 대신 슬라이드가 자기를 자른다
   (둥근 모서리는 원래 `.bnr`의 overflow가 만들어 주던 것이라, 그 몫을 옮겨 준다). */
.bnr.bnr-img { overflow: visible; }
.bnr-slide { border-radius: inherit; overflow: hidden; }
/* 🔴 **자르는 경계는 지면(본문 칼럼) 폭이다 — 남는 여백이 곧 이웃 노출 폭** (D-801, 사용자 지시).
   경계는 두 번 오갔다. 세 번째로 옮기기 전에 읽어라:
     · 0fed7b07  지면 폭에서 잘랐다 — 여백이 있는 만큼 이웃이 보인다. (+8bceb310: clip-path → overflow-x clip)
     · 58c31143  「양쪽 200씩」 — 2560에서 양쪽 520px씩(당시 실측)이 «카드 세 장»으로 읽힌다고,
                 `.hero-wrap`을 `배너 + 2×(200+16) = 1632px`로 묶어 노출을 200에 **고정**했다.
     · D-801     🔴 **되돌렸다.** 고정하면 칼럼이 1632보다 넓은 순간 경계 **바깥**이 다시 빈 띠가 된다
                 (사용자 캡처 ≈2100px 폭 — 실측: 칼럼 1792, 이웃 200 + 양옆 빈 띠 80씩). 「200으로 고정하지
                 말고 남는 좌우 공간을 보여줄 수 있는 만큼」 — 상한을 걷고 지면 폭에서 자른다.
                 이웃의 바깥 끝이 아래 섹션(카드 격자)의 끝과 같은 선에 서는 것이 이 선택의 뜻이다.
   ⚠ 위 두 커밋은 메시지에 «D-699»·«D-700»을 달았지만 DECISIONS.md의 그 번호는 **다른 결정**(보수표)이다 —
     병행 세션 번호 충돌로 기록이 비었다. 이 배너의 결정 이력은 **D-801 항목**에 한데 적혀 있다.
   이웃 자체는 여전히 손대지 않는다 — 원래 크기 그대로 두고 보이는 만큼만 보이게 한다.
   폭을 줄이면 object-fit이 그림을 따로 축소해 본 배너와 배율이 달라져 다른 카드처럼 보인다.

   ⚠ 노출 폭은 CSS가 정하지 않는다 — **(칼럼 폭 − 1200 − 2×16) / 2** 가 저절로 나온다. 실측(dev, 사이드바 216):
     뷰포트 1440(칼럼 1161) → 0 · 1920(1620) → 194 · 2100(1792) → 280 · 2560(2232) → 500.
     여백이 없으면 이웃도 없으니 좁은 화면 규칙이 따로 없다.
   ⚠ 적히지 않은 상한이 하나 있다 — 이웃은 앞·뒤 **한 장씩**(1200)이라 칼럼이 1200 + 2×(1200+16) = 3632를
     넘으면 이웃이 통째로 보이고 그 바깥은 다시 빈다. 그때의 다음 수는 상한이 아니라 둘째 이웃(n≥5)이다.
   ⚠ 「카드 세 장으로 읽힌다」는 58c31143의 우려는 이웃을 한 단 눌러 둔 brightness(.78)·saturate(.85)
     (아래 .is-prev/.is-next)와 pointer-events:none이 받친다. 상한이 다시 필요해지면:
     `.hero-wrap:not(.situ-rail) { max-width: calc(1200px + 2 * (<이웃 폭> + 16px)); margin-inline: auto }`
     — 변수(`--bnr-max`·`--bnr-peek-gap`)는 `.bnr`에 있어 부모가 못 읽으니 그때는 `.hero-wrap`으로 올려라.
     그리고 BannerSidePeekTest.neighbourExposureFillsTheColumn이 바로 그 줄을 막고 있으니 함께 뒤집어라.
     그때는 «상한 안쪽만 채우고 바깥은 비는» 58c31143의 결과를 먼저 떠올릴 것.

   `overflow-x: clip`인 이유는 셋을 견줘 고른 것이다:
     · `overflow: hidden`  — 위아래까지 잘라 `.bnr`의 그림자(0 12px 32px)를 먹는다.
       게다가 한 축만 hidden으로 두면 다른 축이 auto로 끌려가 **스크롤 상자**가 되어 버린다.
     · `clip-path: inset()` — 🔴 **그림만 자르고 레이아웃 넘침은 그대로 둔다.** 처음에 이걸
       썼다가 실측에서 잡혔다: 뷰포트 1920에서 `scrollWidth`가 **2884**가 되어 홈 전체가
       가로로 스크롤됐다(이웃을 끄면 1920). 눈에는 멀쩡해 보여서 더 위험한 결함이다.
     · `overflow-x: clip`   — 잘라 내면서 **넘침도 없앤다**. 그리고 `clip`은 `hidden`과 달리
       반대 축의 `visible`을 auto로 끌어내리지 않아서, 위아래 그림자가 그대로 산다.
       («clip»이라는 값이 존재하는 이유가 바로 이 경우다.) */
.hero-wrap:not(.situ-rail) { overflow-x: clip; }   /* 경계 = 이 상자(칼럼 폭). 폭 상한을 두지 않는다(D-801) */
/* ⚠ `:not(.is-active)`은 방어다. 표식 셋은 JS가 매번 함께 갈아 끼우므로 한 장이 «활성이자
   이웃»일 수 없다 — 다만 그 규칙이 깨지는 날 **본 배너가 화면 밖으로 밀려나** 배너가 통째로
   사라진다. 값이 싼 보험이라 걸어 둔다.
   🔴 이웃은 **눌린다 — 그 장으로 넘기기만**(Q-379 B, 2026-09-24). 2560에서 다음 원고의 왼쪽 ≈500px이
   밝기 .78로 읽히는데 커서·클릭 응답이 없으면 «깨진 것»으로 보인다(design.md §4 «클릭처럼 보이면
   클릭돼야»). 그렇다고 링크(광고 이동)를 따르면 안 된다 — 클릭은 banner-carousel.js가 preventDefault →
   nav(그 장)로 받는다. aria-hidden·tabindex -1은 그대로라 낭독·탭 순서에서는 여전히 빠지고, 밝기도
   그대로다(주인공은 활성 한 장). */
.bnr-slide.is-prev:not(.is-active), .bnr-slide.is-next:not(.is-active) {
  opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer;
  filter: brightness(.78) saturate(.85);
}
.bnr-slide.is-prev:not(.is-active) { transform: translateX(calc(-100% - var(--bnr-peek-gap))); }
.bnr-slide.is-next:not(.is-active) { transform: translateX(calc(100% + var(--bnr-peek-gap))); }
/* ⚠ transform은 **전환하지 않는다**. 넘어갈 때 세 장의 표식이 한꺼번에 바뀌는데 위치까지
   애니메이션하면 이웃이 화면을 가로질러 날아간다 — 이 캐러셀은 페이드다(위 .bnr-slide). */
/* 슬라이드 전체가 링크다. 겹쳐 쌓고 활성만 페이드로 보인다.
   ⚠ 비활성은 pointer-events:none — 안 보이는 슬라이드의 CTA가 탭·클릭되면 안 된다(JS도 tabindex로 막지만
     CSS가 한 겹 더 받친다). visibility까지 꺼야 스크린리더·탭에서 완전히 빠진다.
     이웃 두 장(.is-prev/.is-next)만 위 규칙이 «넘기기» 클릭을 연다 — 링크는 아니다(Q-379 B). */
.bnr-slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  text-decoration: none; color: inherit;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease;
}
.bnr-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.bnr-slide:focus-visible { outline: 3px solid var(--primary-pressed); outline-offset: -3px; }
/* 배경 그림 — cover · 오브제 항상 우측(§1). 첫 장만 eager+preload(서버에서 건다). */
.bnr-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
}
/* 글자 자리 — 좌측 64px · 최대 46%(오브제 안전영역) · 세로 중앙. */
.bnr-copy {
  position: relative; z-index: 2;
  padding: 0 16px 0 64px; max-width: 46%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
/* ⚠ **`.bnr-chip`(카드 위 흰 알약)은 걷었다**(D-297). 마크업이 사라졌으므로 규칙도 지운다 —
   남겨 두면 «무엇을 그리는지 알 수 없는 규칙»이 된다. 되살릴 일이 있으면 함께 되돌릴 것. */
/* 헤드라인 — 최대 2줄. 한글은 어절에서 끊는다. */
.bnr-head {
  /* display(C3 묶음 1): 옛 33/44/700/−.02em → 28/38 · ≥768 36/46 · 600. 폰 19/26 줄은 걷었다.
     ⚠ 지금 홈 마크업에 .bnr-copy는 없다(index.html 머리 주석 «되살리지 마라») — 규칙만 토큰으로 옮겨 보존한다. */
  font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-36); color: #111827;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bnr-sub { font-size: var(--fs-body2); line-height: var(--lh-body2); color: #475569; word-break: keep-all; }   /* body2(옛 15.5/24 — 소수점 크기 0) */
.bnr-cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--primary); color: #fff;
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14);   /* label1: 46px 버튼(옛 15/600) */
  box-shadow: 0 4px 12px rgba(49, 130, 246, .28); transition: background .15s ease;
}
.bnr-slide.is-active:hover .bnr-cta { background: #2570E0; }   /* 이웃은 링크가 아니라 hover 응답도 없다(Q-379 B) */
.bnr-cta-arw { flex: 0 0 auto; }

/* ── 컨트롤 — JS(.is-ready) 전엔 감춘다 ───────────────────────────── */
.bnr:not(.is-ready) .bnr-dots,
.bnr:not(.is-ready) .bnr-nav { display: none; }
.bnr-dots {
  position: absolute; left: 20px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bnr-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(17, 24, 39, .25); transition: width .2s ease, background .2s ease;
}
.bnr-dot.is-active { width: 26px; background: var(--primary); }
.bnr-dot:focus-visible { outline: 2px solid var(--primary-pressed); outline-offset: 2px; }
.bnr-count { margin-left: 4px; font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); color: #475569; font-variant-numeric: tabular-nums; }   /* caption2 + tnum: 카운터(옛 12/400) */
.bnr-nav { position: absolute; right: 20px; bottom: 16px; z-index: 3; display: inline-flex; gap: 8px; }
.bnr-arw {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid #DBE4F0; cursor: pointer;
  background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #334155; display: inline-flex; align-items: center; justify-content: center;
}
.bnr-arw:hover { background: #fff; color: #111827; }
.bnr-arw:focus-visible { outline: 2px solid var(--primary-pressed); outline-offset: 2px; }

/* ── 모바일 (≤768px, §3) — 200px · 보호 그라데이션 · 서브 생략 · 화살표 숨김 ─── */
@media (max-width: 768px) {
  .situ-band { margin-inline: -16px; padding: var(--band-pad) 16px; }
  .bnr { height: 200px; border-radius: 16px; margin-top: 12px; }
  .bnr-bg { object-position: 76% center; }
  /* 좌→우 보호 막 — 76% 크롭이라 오브제가 왼쪽으로 당겨와 글자와 겹칠 수 있다(§3).
     🔴 HTML 카피(.bnr-copy) 시절의 장치다 — 카피가 **원고에 박힌** 이미지 배너(.bnr-img)에 얹히면
        왼쪽 절반의 카피를 92% 흰 막으로 씻어 버린다(360 실측: 카피가 안 읽혔다). 그래서 :not(.bnr-img)다(D-761). */
  .bnr:not(.bnr-img) .bnr-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        rgba(232, 240, 250, .92) 0%, rgba(232, 240, 250, .55) 46%, rgba(232, 240, 250, 0) 68%);
  }
  .bnr-copy { padding-left: 20px; max-width: 66%; gap: 6px; }
  /* .bnr-head 폰 전용 크기(옛 19/26)는 없다 — display 토큰이 폭별 두 단을 든다(C3 묶음 1). */
  .bnr-sub { display: none; }               /* §3 — 모바일은 칩+헤드라인+CTA만 */
  .bnr-cta { height: 36px; padding: 0 16px; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); }   /* label2: 36px 버튼(옛 13px) */
  .bnr-nav { display: none; }               /* 화살표 대신 스와이프 */
  .bnr-dots { left: 16px; bottom: 12px; }
}

/* ── 이미지 배너의 좁은 폭 (D-761, 반응형 1차 — 홈 → 홈 «안 B» 사용자 요청 2026-10-08로 틀을 낮춤) ───────────────────
   3.08:1 원고를 폰 폭(328px)에 그대로 넣으면 107px — 원고에 박힌 카피가 8px이 된다(360 실측). 원고는 다섯 장 모두
   «카피 왼쪽 · 오브제 오른쪽»이므로, 좁은 폭에서는 그림을 **왼쪽 기준**으로 잘라 카피를 살린다.
   🔴 틀 비율(사용자 요청 2026-10-08 «배너 높이는 390에서 약 149px»): 601~900 **3:1**(옛 2:1) ·
      600 이하 **12:5**(옛 3:2 — 390 → 358 × 149 · 360 → 328 × 137 · 320 → 288 × 120).
      원고는 D-965에서 틀 비율로 다시 그렸다(공용 4:1 · 폰 12:5 — 위 «이미지 전용 변형» 머리 주석). 601~900에서는 공용 4:1 원고의
      왼쪽 75%가 보이고(오른쪽 25% 잘림 — 글자·버튼 안전 영역), 폰 원고가 없는 배너는 600 이하에서 공용 원고의 왼쪽 60%가 보인다.
   ⚠ 모바일 원고 별도 업로드(2026-10-03 · D-965부터 12:5 · 1200×500 — 관리자 «모바일 이미지(선택, 12:5)»): 원고가 있는 배너는 ≤600에서
     index.html의 picture/source가 폰 원고로 바꾼다. 폰 원고는 이 틀과 같은 비율이라 cover가 자르는 곳이 없다.
   ⚠ 앱 aspectFor(lib promo_banner_carousel.dart)는 이 틀 값(12:5 · 3:1 · 4:1)을 따른다(2026-10-13 — 스토어 배포는 앱 동기화 때, D-391). */
@media (max-width: 900px) {
  .bnr.bnr-img { aspect-ratio: 3 / 1; }
  .bnr.bnr-img .bnr-bg { object-position: left center; }
}
@media (max-width: 600px) {
  .bnr.bnr-img { aspect-ratio: 12 / 5; }
  /* 점·카운터는 그림 **밖**(아래 가운데)으로 — 카피·CTA가 그려진 왼쪽 아래를 덮지 않는다(위 «모든 폭» 규칙 · ≤768 가운데와 같은 값).
     알약 배경은 흰 바탕 위라 걷고, 그 높이만큼 배너 아래 여백을 준다(:has는 폰 브라우저 전부 지원). */
  .bnr.bnr-img .bnr-dots {
    left: 50%; right: auto; bottom: -34px; transform: translateX(-50%);
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 0;
  }
  .hero-wrap:not(.situ-rail):has(> .bnr-img) { padding-bottom: 30px; }
}
/* 손가락 자리(design.md §4 — 모바일 ≥44px 권장, 최소 32px) — 8px 점·7px 점은 시각은 그대로 두고 히트만 넓힌다. */
@media (max-width: 768px) {
  .bnr-dot, .ad-slide-dots button { position: relative; }
  .bnr-dot::after, .ad-slide-dots button::after { content: ""; position: absolute; inset: -14px; }   /* 8·7px → 36·35px 히트 */
  .ad-slide-dots { gap: 10px; }
  /* 「전체 보기」는 21px 높이의 맨글자 링크였다 — 위아래 12px을 히트로 준다(자리는 안 움직인다). */
  .sec-head .more { padding: 12px 6px; margin: -12px -6px; }
}

/* 모션을 줄이겠다고 한 사용자: 자동 전환은 JS가 끄고(§4), 페이드도 없앤다 — 넘김은 즉시. */
@media (prefers-reduced-motion: reduce) {
  .bnr-slide { transition: none; }
}

/* ── 분야 칩 ────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 4px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); color: var(--text-secondary);   /* label2: 칩(옛 14/600 — app.css .chip와 같은 14/500 눈금) */
  display: inline-flex; align-items: center;
}
.chip:hover { background: var(--surface-alt); }
.chip-on { background: var(--text-primary); border-color: var(--text-primary); color: #fff; }
.chip-on:hover { background: var(--text-primary); }

/* ── 섹션 공통 ──────────────────────────────────────── */
/* 섹션 사이 간격 (D-166) — 참고 지면(nol.yanolja.com)이 모든 구간을 **40px**으로 띄운다(실측).
   예전엔 24·30·34가 뒤섞여 있어 구간 경계가 들쭉날쭉했다. */
.section { margin-top: var(--home-gap); }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
/* 타이포그래피 C3 묶음 1 — 섹션 머리 세 줄은 토큰이다: h2 = title2(20/28 · ≥768 22/30 · 600, 옛 20/700/상속 행간), 부제 = caption1(옛 13),
   「전체 보기」 = label2(옛 14/600). ⚠ hub.css의 섹션 머리글이 «같은 값»을 베낀다(그 파일 주석) — 묶음 3에서 같은 토큰으로 맞춘다. */
.sec-head h2 { font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); white-space: nowrap; }
.sec-head .sub { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
/* 「전체 보기」 색 — 타이포 점검 2026-10-03 F3: 14px 링크 글자라 4.5:1이 하한이다. --primary(#3182F6)는 흰 바탕 3.71:1 →
   --primary-pressed(#1B64DA) 5.41:1. ⚠ 파랑 «버튼 바탕»(.btn-primary 등 흰 글자 3.71:1)은 브랜드 색이라 여기서 건드리지 않는다. */
.sec-head .more { margin-left: auto; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); color: var(--primary-pressed); white-space: nowrap; }
/* '지금 상담 가능한 세무사' 머리줄 — 부제가 **우측 끝**에 선다(D-723, 사용자 지시). 「빠른 상담 ›」
   링크를 걷어 auto 여백을 다툴 상대가 없어졌으므로 부제가 그 자리를 이어받는다. 좁은 화면에서
   줄이 접히면(flex-wrap) 둘째 줄에서도 오른쪽에 붙는다. */
#online-now .sec-head .sub { margin-left: auto; text-align: right; }

/* ── 카드 레일 좌우 화살표 — **규칙은 css/rail.css로 옮겼다**(D-356).
   스크립트(js/paged-rail.js)와 짝인 규칙이라 스크립트와 함께 다녀야 한다. 홈이 아닌 지면
   (세무시선 목록의 인기 레일 등)이 홈 CSS를 통째로 링크하지 않고도 레일을 쓸 수 있다.
   ⚠ 이 지면(index.html)도 rail.css를 **따로 링크**한다 — 여기서 지웠다고 홈에서 안 실리면
     화살표가 카드 위에 겹친다. */

/* 아바타(광고·인기 공용) */
.avatar {
  position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  /* ⚠ 여기만 자간 0이다. 글자 한 자를 가운데 놓는 자리라, 자간이 붙으면 마지막 글자
     뒤에도 그만큼 공간이 생겨 글자가 왼쪽으로 밀린다. 스케일(19px→-.4px)을 쓰지 말 것. */
  font-weight: var(--fw-semibold); font-size: var(--fs-title3); letter-spacing: 0; overflow: visible;   /* 머리글자 한 자(52px 상자): 옛 19 → title3 18 */
}
.avatar img { width: 100%; height: 100%; border-radius: var(--r-md); object-fit: cover; }
/* 아바타에 붙는 접속 점. ⚠ app.css의 `.presence`는 '접속중' **텍스트 배지**라 이름이
   겹치면 디렉토리·상세·빠른상담의 상태 표시가 깨진다 — 그래서 `.av-dot`으로 분리했다. */
.avatar .av-dot {
  position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--surface); background: var(--presence-offline);
}
.av-dot.dot-online { background: var(--presence-online); }
.av-dot.dot-away { background: var(--presence-away); }
.av-dot.dot-busy { background: var(--presence-busy); }

/* 디렉토리 카드의 광고 라벨 줄 — 셸 개편 전 home.css에 있던 규칙을 그대로 가져온다
   (directory.html이 여전히 쓴다). */
.ad-row { margin-bottom: 4px; }

/* ── 광고 세무사 카드 ───────────────────────────────── */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* ── 광고 레일 (D-171) — 4장씩 끊어 넘어간다 ─────────────────────────────
   예전엔 D-162에서 상황 밴드와 같은 연속 마퀴였다. "홈의 모든 구간이 쉬지 않고 흘러가
   정신없다"는 사용자 지적으로, **한 화면에 --ad-per장을 고정해 두고 paged-rail.js가
   몇 초마다 한 세트씩 scrollTo로 미는** 방식으로 바꿨다. 서버는 `.ad-track`에 **진짜 카드만**
   담고(scroll-snap), 자동 넘김은 JS가 `track.clientWidth`(=카드 --ad-per장 폭)만큼 스크롤
   위치를 옮기는 것뿐이다. 2026-08-09부터 **끝에 앞쪽 카드의 복제본이 붙어 무한히 순환한다** —
   그 복제본도 JS가 만들고 걷는다(폭이 바뀌면 필요한 장수가 달라져 다시 깐다).
   ⚠ 카드 폭을 **cqw 기반 가변**으로 둔다(마퀴 시절의 고정 340px과 다르다) — 폭이
      바뀌어도 "한 화면 스크롤 = 정확히 --ad-per장"이 항상 성립해야 하기 때문이다.
      고정 폭이면 화면마다 실제로 몇 장이 보이는지 어긋나 JS의 "한 세트" 가정이 깨진다. */
.ad-rail {
  /* ⚠ 처음엔(D-171) 밴드처럼 화면 끝까지 채우는 전폭이었다. "양 끝이 꽉 차 답답하다"는
     지적(사용자 지시)으로 되돌렸다 — 이제 레일 상자 자체는 본문과 같은 --shell-pad를 그대로
     받는다(전폭이 아니다).
     🔴 그렇다고 **제목 줄과 카드 줄의 좌우 끝이 맞지는 않는다.** 예전에 여기 "정확히 맞는다"고
        적어 두었는데 거짓이다 — 카드 줄은 paged-rail.js가 씌우는 .rail-shell 안에 들어가고,
        그 셸이 화살표 자리(--ra-need)만큼 안쪽으로 파고든다. 실측(Chrome, 이 지면):
        769px → 37.09px · 1280px → 25.84px 안쪽. 완전히 일치하는 것은 --shell-pad가 커져
        셸이 되밀 여유가 생기는 아주 넓은 화면(약 2455px 이상)뿐이다.
        숫자의 출처와 그렇게 만든 이유는 이 파일 위쪽 `.rail-shell` 주석에 있다 —
        두 곳이 어긋나면 그쪽이 정본이다. */
  overflow: hidden;
  container-type: inline-size;   /* 카드 폭을 이 폭 기준(cqw)으로 잡는다 */
  --ad-gap: 14px;
  /* 한 행에 보일 장수 — 6→4(2026-08-09 카드 통일). '지금 상담 가능한' 레일(--tp-per)과
     **같은 값**을 쓴다: 두 레일의 카드가 같은 디자인이므로 폭까지 같아야 같은 카드로 읽힌다. */
  --ad-per: 4;
}
.ad-track {
  display: flex; gap: var(--ad-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ad-track::-webkit-scrollbar { display: none; }
/* 레일 안에서만 cqw로 폭을 잡는다 — 격자(.ad-grid)에서는 칸이 폭을 정한다.
   폭 계산 규칙은 .pf-card 정의부 옆(아래) `.ad-rail .pf-card`에 있다. */
/* 좁아질수록 한 행 장수를 줄인다 — ⚠ 브레이크포인트도 .tp-rail과 같은 값으로 묶는다.
   한쪽만 바꾸면 어떤 폭에서 두 레일의 카드 폭이 어긋나 통일이 깨진다. */
/* ⚠ 아래 세 줄은 **폴백**이다(D-282). 실제 장수는 paged-rail.js가 레일의 **실측 폭**에서
     정해 인라인 스타일로 덮는다 — 미디어쿼리는 «창»만 보아 사이드바가 먹은 폭을 모른다.
     JS가 안 도는 환경에서만 이 값이 쓰인다. 지우지 마라. */
@media (max-width: 1200px) { .ad-rail { --ad-per: 3; } }
@media (max-width: 900px)  { .ad-rail { --ad-per: 2; } }
@media (max-width: 600px)  { .ad-rail { --ad-per: 1; } }

/* '광고' 라벨은 표시 의무다(D-013 · 약관 제6조) — 끄는 옵션을 만들지 마라.
   2026-08-09 카드 통일: 회색 배경 필 대신 **작은 회색 텍스트**만 남긴다 — 광고임은 밝히되
   카드의 시각 위계(사진·이름 1순위)를 라벨이 이기지 않는다.
   ⚠ 홈 카드(.pf-card)는 이제 이 클래스를 쓰지 않는다 — 아래 `.ad-mark`("AD")로 갈아탔다
   (2026-08-09, 로톡 참고). 여기는 보존 중인 상단 레일 조각(.dad-card — 지금 어느 지면도 그리지 않는다)·pro-ads·
   관리자 미리보기(admin-ad-preview.js)가 쓴다 — 옛 디렉토리 목록은 목록 뷰와 함께 걷었다(D-880). */
.ad-label {
  margin-left: auto; align-self: flex-start;
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); color: var(--text-tertiary);   /* caption2: 옛 11/600 — 최소 크기 12(§3-3) */
  letter-spacing: var(--ls-12); white-space: nowrap;
}

/* ── 광고 마커 "AD" — 두 층위 (2026-08-09 「광고」→"AD", 로톡 참고 · D-226) ────────
   D-013 표시 의무: **마커 자체는 항상 보인다** — 호버로만 존재하면 표시가 아니다.
   설명("광고비를 낸 세무사예요.")은 보조 층위 셋으로 얹는다:
   ① CSS 호버 툴팁(아래 ::after) — transition 없이 **즉시** 뜬다,
   ② title(네이티브 툴팁 겸 ::after의 content 원본 — attr(title)이라 문구가 한 곳에만 산다),
   ③ aria-label(+role=img) — 스크린리더는 "AD" 대신 뜻을 읽는다.
   색은 --text-tertiary(#6B7684) — 흰 카드 위 대비 4.62:1로 4.5:1을 넘는다(WCAG AA).

   🔴 **두 층위를 헷갈리지 마라**(D-226):
     · `.ad-mark`     = **카드별** 마커. 광고와 일반이 섞인 **혼합 지면**('지금 상담 가능한'
                        레일) 전용 — 어느 카드가 광고인지는 카드에만 적을 수 있다.
     · `.sec-ad-mark` = **섹션** 마커. 카드가 전부 광고인 지면('프리미엄 세무사' 섹션 제목 옆,
                        광고 신청 미리보기 머리줄) 전용 — 카드마다 반복해도 정보가 안 는다.
   어느 지면이든 둘 중 하나는 반드시 그려진다. 한쪽을 지우면 라벨 없는 광고가 된다.
   문구·색·툴팁은 여기 한 규칙으로 묶어 둔다 — 두 벌로 두면 한쪽만 고치게 된다. */
.ad-mark, .sec-ad-mark {
  position: relative;
  /* caption2(C3 묶음 1): 옛 11/700/.5px → 12/18/500/+.03em — 배지·AD는 최소 크기 12(§3-3). 자간은 크기 곡선에서 온다. */
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); color: var(--text-tertiary);
  letter-spacing: var(--ls-12); white-space: nowrap;
}
/* 카드 마커만 우상단으로 민다. ⚠ `.sec-ad-mark`에는 이 auto를 주지 마라 — 섹션 제목 줄
   (.sec-head)에는 '전체 보기'(.more)가 이미 margin-left:auto라, 둘이 남는 폭을 나눠 가지며
   제목과 마커 사이가 화면 폭만큼 벌어진다(마커가 제목 "옆"이 아니게 된다). */
.ad-mark { margin-left: auto; align-self: flex-start; }
/* ⚠ `.sec-ad-mark`에는 align-self를 주지 않는다 — 부모 줄의 정렬을 그대로 따라야 한다.
   섹션 제목 줄(.sec-head)은 baseline, 광고 신청 미리보기 머리줄(.adm-preview-head)은
   center다. 여기서 하나로 못박으면 둘 중 한쪽에서 마커만 위아래로 어긋난다. */
.ad-mark::after, .sec-ad-mark::after {
  content: attr(title);
  position: absolute; top: calc(100% + 6px); z-index: 2;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--grey800); color: #fff;
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); white-space: nowrap;   /* caption2 */
  opacity: 0; visibility: hidden;
  /* 🔴 숨은 동안은 **display: none**이다(D-890, 타이포그래피 C1 dev 실측). visibility:hidden만으로는 안 보이는
     툴팁 상자(≈141px)가 **스크롤 넘침에 그대로 든다** — 서체가 9% 넓어지며 /quick-consult 머리글
     «지금 바로 상담가능한 세무사 AD»의 마커가 20px 오른쪽으로 밀리자, 폰 390에서 보이지도 않는 툴팁이 394px까지
     뻗어 문서가 가로로 스크롤됐다(홈 «지금 상담 가능한 세무사 AD»도 385px로 턱밑이었다). 전환(transition)은
     애초에 없어 보이는 동작은 같다. 아래 hover·focus 규칙이 display:block으로 되돌린다. */
  display: none;
  /* 툴팁이 떠 있어도 카드 링크 클릭을 가로채지 않는다. */
  pointer-events: none;
}
/* 카드 마커는 오른쪽 끝에 있어 오른쪽 정렬, 섹션 마커는 왼쪽에 있어 왼쪽 정렬 —
   반대로 두면 툴팁이 화면 밖으로 나가 잘린다. */
.ad-mark::after { right: 0; }
.sec-ad-mark::after { left: 0; }
/* 위가 아니라 **아래**로 편다 — 마커가 카드 최상단이라 위로 펴면 레일(.ad-track 등)의
   overflow에 잘린다. 키보드 사용자에게는 카드 포커스만으로 보여 준다(마커는 포커스 불가). */
.ad-mark:hover::after,
.pf-card:focus-visible .ad-mark::after,
.sec-ad-mark:hover::after { display: block; opacity: 1; visibility: visible; }

/* ── '지금 상담 가능한 세무사' 레일 (D-169 세로→가로, 넘김 방식은 D-171) ──────────
   카드 자체는 아래 .pf-card(2026-08-09 카드 통일 — 프리미엄 레일과 같은 카드)를 쓰고,
   여기는 **레일 배치**(2행 grid·열 폭·자동 넘김)만 정한다.
   ⚠ 그림자를 넣지 마라 — 홈의 다른 카드와 같은 규칙이다(D-167·D-168). hover는 테두리 색으로만.
   ⚠ D-171: 연속으로 흐르던 마퀴를 걷어냈다 — "홈의 모든 구간이 쉬지 않고 흘러가 정신없다"는
     지적으로, **3초마다 한 세트씩** paged-rail.js가 scrollTo로 미는 방식으로 바꿨다.
     서버는 진짜 카드만 그린다 — 순환용 복제본은 그 스크립트가 클라이언트에서 만든다.
   🔴 아래 `.tp-track`은 **2행 격자**다. 카드 수가 홀수면 마지막 열 아랫칸이 비는데, 거기에
     복제본이 끼면 순환 이음매가 반 칸 어긋난다 — paged-rail.js가 첫 복제본에 `grid-row-start:1`을
     걸어 새 열에서 시작시킨다. --tp-rows를 바꾸면 그 처리도 함께 봐야 한다. */
.tp-rail {
  /* ⚠ 처음엔(D-171) 밴드처럼 화면 끝까지 채우는 전폭이었다. "양 끝이 꽉 차 답답하다"는
     지적(사용자 지시)으로 광고 레일과 함께 되돌렸다 — 레일 상자는 본문과 같은 --shell-pad를
     그대로 받는다. ⚠ 다만 **카드 줄은 제목 줄보다 안쪽에 선다** — .rail-shell이 화살표 자리를
     비우기 때문이다(광고 레일과 같은 값·같은 이유, 실측은 .ad-rail·.rail-shell 주석 참고). */
  overflow: hidden;
  container-type: inline-size;   /* 카드 폭을 이 폭 기준(cqw)으로 잡는다 */
  --tp-gap: 14px;
  --tp-per: 4;                   /* 한 행에 보일 장수 — 6→4(2026-08-02 사용자 지시) */
  --tp-rows: 2;                  /* 행 수 — 1→2. 한 번에 --tp-per × --tp-rows = 8장 */
}
/* ⚠ **2행 레일**(2026-08-02 사용자 지시) — flex 한 줄에서 grid 2행으로 바꿨다.
   `grid-auto-flow: column` + `grid-template-rows: repeat(2, ...)`이면 카드가 **세로로 먼저**
   채워진 뒤 오른쪽으로 넘어간다: 1·2가 첫 열에 위아래로 서고, 3·4가 둘째 열에 선다.
   ⚠ 그래서 **읽는 순서가 행 단위가 아니라 열 단위**다 — 윗줄만 훑으면 1,3,5,7이 보인다.
     정렬은 여전히 의미가 있다(광고 우선노출이 앞) — 1·2가 나란히 첫 열(가장 눈에 띄는 자리)에
     오므로 우선순위 자체는 지켜진다. 굳이 "윗줄 1234 / 아랫줄 5678"로 만들려면 서버에서
     8장씩 페이지로 잘라 넘겨야 하는데, 그러면 페이지 크기가 8로 **고정**돼 좁은 화면에서
     열 수를 줄일 수 없다(아래 미디어쿼리가 통째로 무력화된다). 반응형을 지키는 쪽을 택했다.
   ⚠ 카드 폭은 flex-basis가 아니라 `grid-auto-columns`가 정한다 — `.ad-rail .pf-card`의
     flex 선언은 grid 컨테이너 안에서 무시된다.
   paged-rail.js는 그대로 둔다 — `scrollBy(clientWidth)`가 곧 '한 화면(=--tp-per열)'이라,
   행이 2줄이 돼도 한 번에 8장씩 넘어간다. */
.tp-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--tp-rows), auto);
  grid-auto-columns: calc((100cqw - (var(--tp-per) - 1) * var(--tp-gap)) / var(--tp-per));
  gap: var(--tp-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tp-track::-webkit-scrollbar { display: none; }

/* ── 홈 프로필 카드 (.pf-card, 2026-08-09 카드 통일) ─────────────────────
   '프리미엄 세무사'(광고 레일·격자·신청 폼 미리보기)와 '지금 상담 가능한 세무사' 레일이
   **전부 이 카드 하나**다(fragments/ad-card.html). 광고 카드에만 있던 차별 요소
   (다크 밴드 #1B2437·4:5 대형 사진·강조·반투명 라벨)는 홈에서 걷어냈다 —
   광고 카드와 일반 카드의 차이는 우상단 「광고」 회색 텍스트뿐이다(D-013).
   ⚠ **그림자를 넣지 마라**(D-167·D-168) — 흰 배경 위에서 카드 둘레가 회색으로 번진다.
     2026-08-09 실제 렌더 비교에서도 보더리스+그림자보다 1px 옅은 테두리(--border, grey200)가
     경계가 정갈해 이쪽으로 확정했다. 누를 수 있다는 신호는 hover 테두리 색으로만 준다. */
.pf-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px;
  background: var(--surface); transition: border-color .15s ease;
}
.pf-card:hover { border-color: var(--grey300); }
.pf-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 레일 폭 — 광고 레일(flex)은 이 규칙이, '지금 상담 가능' 레일(grid)은
   `.tp-track { grid-auto-columns }`가 폭을 정한다(플렉스 선언은 grid 안에서 조용히 무시된다).
   격자(.ad-grid)·신청 폼 미리보기에서는 부모가 폭을 정하므로 별도 분기가 필요 없다. */
.ad-rail .pf-card {
  flex: 0 0 calc((100cqw - (var(--ad-per) - 1) * var(--ad-gap)) / var(--ad-per));
  scroll-snap-align: start;
}
.tp-rail .pf-card { scroll-snap-align: start; }

.pf-top { display: flex; align-items: center; gap: 12px; }
/* 프로필 사진은 **크게** 본다(D-162, 사용자 지시) — 52px에서는 얼굴이 식별되지 않아
   "누구에게 상담받는지"가 안 보였다. 사진·이름이 카드에서 가장 먼저 읽혀야 한다.
   ⚠ 접속 점(.av-dot)도 같이 키운다. 88px 사진에 12px 점을 그대로 두면 먼지처럼 보인다. */
.pf-card .avatar { width: 88px; height: 88px; font-size: var(--fs-title1); border-radius: var(--r-lg); }   /* 머리글자(88px 상자): 옛 32 → title1 24 · ≥768 28 */
.pf-card .avatar img { border-radius: var(--r-lg); }
.pf-card .avatar .av-dot { width: 16px; height: 16px; right: -2px; bottom: -2px; border-width: 3px; }

/* min-width:0이 없으면 flex item이 줄어들지 않아 이름·상호 말줄임(ellipsis)이 아예 안 걸린다. */
.pf-id { min-width: 0; }
/* 이름 16→18px(2026-08-09 사용자 지시 — "이름 더 크게"). --ls-lg가 16~18px 구간이라
   자간 토큰은 그대로다. 앱 미러도 같은 한 단계(label1 16→title2 18, home_screen.dart). */
/* ⚠ 이름 18→20px(D-638, 사용자 지시: 「폰트가 작아서 가독성이 떨어진다」). 40대 이상 가독성이
   이번 상향의 배경이다 — /fit에서 같은 이유로 한 벌을 올렸다(D-636·D-637). */
.pf-name {
  /* title2(C3 묶음 1): D-638의 20px을 지키는 토큰(일반 «이름 → heading 16»보다 사용자 결정이 앞선다). ≥768 22/30. */
  font-size: var(--fs-title2); font-weight: var(--fw-semibold); line-height: var(--lh-title2); letter-spacing: var(--ls-18);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-office {
  margin-top: 3px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-tertiary);   /* body2(옛 15 — D-638 눈금, caption1 13으로 내리지 않는다) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 행 정렬(2026-08-09 사용자 지시) — 멘트(.ad-tagline) 유무로 아래 줄이 출렁이지 않게.
   카드가 flex column이고 레일(flex)·격자(grid)의 기본 stretch로 **한 행의 카드 높이는
   이미 같다** — 여기에 평점 줄에 margin-top:auto를 주면 평점·칩 블록이 카드 바닥에
   정렬돼, 멘트 없는 카드도 같은 높이에 두 줄이 선다. 남는 공간은 멘트 자리가 삼킨다.
   멘트 슬롯 고정 높이(다른 후보안)보다 나은 점: 멘트 자체가 없는 지면('지금 상담 가능'
   레일, withTagline=false)에 유령 여백이 안 생긴다. 멘트가 길어도 .ad-tagline이
   -webkit-line-clamp:1로 한 줄 말줄임이라 카드 높이를 두 줄로 키우지 못한다. */
.pf-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-tertiary); }   /* body2(옛 15) */
.pf-card .pf-meta { margin-top: auto; }
.pf-meta .star { color: var(--warning); font-weight: var(--fw-semibold); }   /* 점수 글자색 그대로 — 별 글자는 안쪽 .rating-star(app.css, 평점 별 노랑(사용자 요청 2026-10-08 · D-915)) */
/* 분야 칩 — app.css 기본(.spec-row margin-top:8px)은 카드 gap과 겹쳐 간격이 두 배가 된다.
   min-height 21px = 칩 한 줄(line-height 17 + 세로 패딩 2×2) — 분야 없는 카드도 빈 줄이
   같은 높이를 차지해 평점 줄이 내려앉지 않는다(조각이 빈 .spec-row를 항상 그린다).
   ⚠ line-height를 지우면 상속값(호스트 폰트에 따라 유동)으로 min-height와 어긋난다. */
/* 🔴 이 셋은 한 몸이다 — 칩 글자 label2(14, 옛 13.5) + line-height 20 + 세로 패딩 2×2 = 24px이 곧
      .spec-row의 min-height다. 하나만 고치면 분야 없는 카드에서 평점 줄이 내려앉는다
      (위 주석이 경고한 그대로). D-638에서 11.5→13.5로 올리며 21→24로 함께 옮겼다. */
.pf-card .spec-row { margin-top: 0; min-height: 24px; }
.pf-card .spec { font-size: var(--fs-label2); line-height: var(--lh-label2); padding: 2px 8px; }   /* label2 14/20(옛 13.5 — 소수점 0) · 20 + 2×2 = 24 = .spec-row min-height 그대로 */

/* 좁아질수록 한 행 장수를 줄인다(행 수 --tp-rows는 2로 고정).
   ⚠ D-171에서 **정수로 바꿨다**(예전엔 4.4·3.2·1.8 — 계속 흐르는 마퀴 시절, 끝 장이
     반쯤 걸쳐야 "더 있다"가 읽혔다). 지금은 몇 초에 한 번 딱딱 끊어 넘어가는 방식이라
     페이지마다 카드가 반쯤 잘려 있으면 오히려 어수선하다 — 매 세트가 정수 장으로 딱 채워진다.
   ⚠ **미디어쿼리**를 쓴다. `container-type`이 .tp-rail 자신에 걸려 있어 `@container`로
      자기 자신을 다시 꾸밀 수 없다(후손에만 적용된다 — D-159에서 겪었다). */
/* ⚠ 아래 세 줄은 **폴백**이다(D-282). 실제 장수는 paged-rail.js가 레일의 **실측 폭**에서
     정해 인라인 스타일로 덮는다 — 미디어쿼리는 «창»만 보아 사이드바가 먹은 폭을 모른다.
     JS가 안 도는 환경에서만 이 값이 쓰인다. 지우지 마라. */
@media (max-width: 1200px) { .tp-rail { --tp-per: 3; } }
@media (max-width: 900px)  { .tp-rail { --tp-per: 2; } }
@media (max-width: 600px)  { .tp-rail { --tp-per: 1; } }

/* ── 세무 Q&A (D-173) — '이런 것도 있어요' 타일 자리를 대신한다. 카드 3장, 채택된 답변만.
   (2026-08-09 사용자 지시: 4장→3장. 카드가 넓어진 만큼 제목·프로필사진·이름을 키운다 —
   본문 미리보기는 3줄 clamp·14px **그대로**다.)
   레이아웃: 제목 → 답변 미리보기(3줄로 자른다) → 작성자 줄(사진·이름 + **분야 라벨 우측 끝**).
   ⚠ 분야 라벨 자리는 두 번 옮겼다: 제목 **위** 배지 → 제목 줄 우측 끝 → (2026-08-09 사용자
      지시) **작성자 줄 우측 끝**. 되돌리지 마라 — 제목 줄에 있으면 긴 제목이 라벨과 폭을
      다퉈 제목이 늘 2줄로 잘렸다. QnaHomeRenderTest가 마크업 순서를 고정한다.
   ⚠ 그림자를 넣지 않는다 — 홈의 다른 카드(광고·세무사 레일)와 같은 규칙(D-167·D-168), hover는
      테두리 색으로만 신호를 준다.
   🔴 한 화면 장수(--qna-per: 3)와 HomeController.QNA_HOME_LIMIT(6)는 한 몸이다 —
      **상한이 한 화면 장수의 배수이면서 그보다 커야** 화살표로 넘길 다음 장이 생긴다.
      둘이 같았을 때(3/3) 트랙 폭이 정확히 한 화면이라 데스크톱에서 화살표가 영구 비활성이었다
      (실측 1280px: scrollWidth == clientWidth). QnaHomeRenderTest가 이 관계를 못박는다.
      ⚠ 상한은 천장일 뿐이라 실제 채택 답변이 3건 이하면 여전히 화살표가 사라진다 —
        눌러도 안 움직이는 버튼을 남기지 않는 쪽이 의도된 동작이다.

   ── 좌우 화살표 레일 (2026-08-09 사용자 지시) ────────────────────────────────
   격자였던 것을 **한 화면 --qna-per장짜리 가로 레일**로 바꿨다. 한 화면에 보이는 장수는
   그대로(3) — 보이는 그림은 같고, 넘길 수 있게만 됐다. 폭 계산은 광고 레일(.ad-rail)과
   같은 관용구(container-type + cqw)를 쓴다 — 두 레일이 다른 방식으로 폭을 잡으면 한쪽만
   어긋난다.
   ⚠ `.qna-home-grid`라는 이름은 그대로 둔다(격자가 아니게 됐어도) — 렌더 시험대와
     QnaHomeRenderTest가 이 클래스로 지면을 집는다. */
.qna-rail {
  /* ⚠ 화살표(.rail-arrow)의 기준은 여기가 아니라 paged-rail.js가 만드는 `.rail-shell`이다
     (버튼은 레일의 형제로 셸에 붙는다). 여기 position은 레일 안쪽 절대 위치 요소용으로만 남긴다. */
  position: relative;
  container-type: inline-size;
  --qna-gap: 16px;
  --qna-per: 3;
}
.qna-home-grid {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100cqw - (var(--qna-per) - 1) * var(--qna-gap)) / var(--qna-per));
  gap: var(--qna-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.qna-home-grid::-webkit-scrollbar { display: none; }
.qna-home-card { scroll-snap-align: start; }
.qna-home-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: inherit; transition: border-color .15s ease, background .15s ease;
  /* 격자 칸의 기본 min-width는 auto — 안 끊기는 긴 낱말이 칸을 밀면 페이지가 가로로
     스크롤된다(세무시선 카드 .sisun-card2와 같은 이유). 제목은 질문자가 쓰는 자유 입력이다. */
  min-width: 0;
}
.qna-home-card:hover { border-color: var(--grey300); background: var(--grey50); }
/* ── 카드 안 — 시안 A «대표 질문 카드» (D-720, 사용자 확정 2026-09-09) ───────────────
   보내 준 휴대폰 화면의 문제는 «카드 가운데가 휑함»이었다. 카드·레일 문법은 그대로 두고 안을
   넷으로 채운다: 분야 칩·질문자 → 제목 → 질문 본문 2줄 → 답한 세무사 얼굴+N → 채택 한 마디 판 →
   세무사 행. 층마다 «항상 있는 값»이라 카드끼리 밀도가 같다(한 마디만 조건부 — 폴백 판이 선다).
   🔴 프로필은 여전히 카드 바닥에 선다(D-704) — 이제 그 몫을 `.qna-home-author{margin-top:auto}`가
      진다. 예전엔 제목의 margin-bottom:auto였는데, 층이 넷이 되면서 «남는 세로»는 한 마디 판과
      세무사 행 사이가 맞다(제목 바로 아래가 벌어지면 본문이 제목에서 떨어져 보인다).
   ⚠ 유채색은 새로 없다. 한 마디 판은 --surface-tint(#F8FBFF)인데 카드 hover 배경 --grey50(#F9FAFB)과
     거의 같아 hover에서 면이 사라진다 — 그래서 판에 1px #DDEBFF 테두리를 함께 둔다. */
/* 분야 칩 자리 이력 — D-720 2판 제목 위 → 3판 세무사 행 우측 끝(「채택된 답변」 자리, margin-left:auto)
   → 2026-09-13 **상단 행 왼쪽**(지금, 아래 규칙). 옛 «우측 끝·margin-left:auto» 설명은 3판 시절 말이라
   D-765 리뷰에서 지웠다 — 지금 우측 끝의 알약은 하단 「외 N명이 답했어요」 스티커(.qna-home-oe) 하나뿐이다. */
/* 상단 행 — **분야 칩만**(D-764). 우측에 있던 얼굴 스택(+N)은 걷었다(아래 주석).
   min-height 30px = 칩 높이 — 분야가 빈 카드도 제목 시작선이 옆 카드와 같다(칩이 없으면 행이 0으로 접혀
   제목이 위로 뜬다). */
.qna-home-top {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; width: 100%; min-height: 30px;
}
/* 칩 30px — 하단 「외 N명」 스티커(6×12 · 999px)와 같은 알약 기하라 위·아래가 한 벌로 읽힌다(2026-09-13). */
.qna-home-cat {
  flex: none; align-self: center;
  /* label2(C3 묶음 1): 옛 14/700/1.25 → 14/20/500. 패딩 6→5로 알약 높이 30(= 20 + 2×5)을 지킨다 — .qna-home-top min-height 30과 짝. */
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); color: var(--primary-pressed);
  background: var(--primary-light); border-radius: 999px; padding: 5px 12px;
  min-height: 30px; display: inline-flex; align-items: center;
}
/* 제목은 **항상 2줄 자리**를 예약한다(2026-09-13, 디자인 파트너 의뢰) — 1줄 제목 카드에서 본문이 위로
   떠 레일의 본문 시작선이 어긋났다. min-height는 -webkit-box에도 먹는다(실측). 2줄 넘는 제목은 그대로
   말줄임(line-clamp 2)이라 최대 높이도 같은 값 — 곧 «고정 2줄»이다. 값은 토큰 행간(--lh-title3)이라 글자 눈금을 따라온다. */
.qna-home-title {
  min-width: 0; margin: 0;
  /* title3(C3 묶음 1): **카드 제목** 토큰(§3-3, 18/26 · 600). 옛 20/700/1.35. title2(≥768 22)를 써 보니 1000·1280 폭에서 2줄
     클램프에 **새로 잘리는 제목이 6장**(옛 0·2) 생겼다(실측) — 새 잘림 0 규칙과 카드 제목 규격이 같은 답을 가리킨다.
     2줄 예약도 같은 토큰 행간으로(2 × 26 = 52, 옛 54). ⚠ 섹션 h2(.sec-head h2)만 title2다. */
  font-size: var(--fs-title3); font-weight: var(--fw-semibold); line-height: var(--lh-title3); letter-spacing: var(--ls-18);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all;
  min-height: calc(2 * var(--lh-title3));
}
/* D-home-qna — 질문 본문(최대 3줄). 300자 상한이라 전문도 가능하나 홈은 3줄로 읽힌다. */
.qna-home-body {
  margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary);   /* body2(옛 14/1.5) */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all; flex: 1 1 auto; min-height: 0;
}
/* 상단 우측 얼굴 스택(.qna-home-faces · 최초 답변자 30px + «+N» 칩, D-720 2·5판)은 **D-764에서 걷었다**
   (디자인 파트너 보강·통합). 답변 수는 아래 세무사 행의 「외 N명이 답했어요」 스티커 한 곳만 말한다 —
   위 +N과 아래 「외 N명」이 같은 수를 두 번 말했고, 최초 답변자 얼굴은 채택 세무사 프로필과 «다른 사람
   사진 두 장»으로 읽혔다. 되살리지 마라(규칙·마크업·qnaFirst 조회를 함께 지웠다 — git 이력에 있다). */
/* 채택 한 마디 판 — 라벨 「홍** 님의 채택 한 마디」(사용자 지정 문구).
   🔴 본문에 min-height 44px(22px × 2줄)을 둔다 — 한 마디가 1줄이든 2줄이든 판 높이가 같아야
      카드끼리 세무사 행 위치가 안 흔들린다. 따옴표 글리프는 넣지 않는다(2줄 클램프가 닫는
      따옴표를 잘라 긴 한 마디에서만 짝이 안 맞는다). */
.qna-home-say { min-width: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-tint); border: 1px solid #DDEBFF; }
.qna-home-say-l { display: block; font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); color: var(--primary-pressed); margin-bottom: 4px; }   /* caption2 */
.qna-home-say-t {
  margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-primary); min-height: calc(2 * var(--lh-body2));   /* body2 · 2줄 예약(옛 14.5/22 · 44px) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 한 마디가 없는 카드 — 같은 자리·같은 높이의 회색 판. 색만이 아니라 글자(「아직 채택 전이에요」)가 다르다. */
.qna-home-say-none { background: var(--surface-alt); border-color: var(--border); }
.qna-home-say-none .qna-home-say-l { color: var(--text-secondary); }
.qna-home-say-none .qna-home-say-t { color: var(--text-tertiary); }
/* 세무사 행 — 이름 + 상호명만(사용자 지시: 지역 제외). 바닥에 붙는다(margin-top:auto, D-704). */
.qna-home-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--divider); }
.qna-home-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.qna-home-avatar-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: var(--fs-heading); font-weight: var(--fw-semibold);   /* 머리글자(40px 원): heading 16(옛 15) */
}
/* 이름 뭉치가 행의 남은 폭을 다 가진다(flex:1) — 그래야 안의 1행에서 스티커가 우측 끝까지 간다.
   🔴 min-height 46px = 스티커 줄 24(caption2 행간 18 + 패딩 2×3) + 간격 2 + 사무소 줄 20(caption1 행간) — C3 묶음 1 전엔 24.5 + 2 + 18.75 올림. 사무소가 없는 카드는
      뭉치가 24.5px로 접히고 행(align-items:center)이 그것을 가운데로 내려 **이름 줄이 옆 카드보다 13px
      아래**에 섰다(D-763부터 있던 결함, D-765 리뷰 실측). 높이를 예약하면 사무소·스티커 유무와 무관하게
      이름 줄의 y가 같다. 사무소·스티커 크기를 바꾸면 이 값도 같이. */
.qna-home-id { flex: 1 1 auto; min-width: 0; min-height: 46px; display: flex; flex-direction: column; gap: 2px; }
/* 1행: 이름(좌) + 스티커(우, margin-left:auto). 이름이 길면 이름만 줄고(min-width:0·말줄임) 스티커는 안 줄어든다. */
.qna-home-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qna-home-name { min-width: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* heading: 이름(옛 15/700) */
.qna-home-office { min-width: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* caption1: 사무소 메타(옛 12.5 — 소수점 0) */
/* 「외 N명이 답했어요」 — 이름과 **같은 줄** 우측 끝의 타원 스티커(D-764, 시안 C2 — 사용자 보강).
   D-763의 알약은 이름+사무소 «블록» 옆 세로 가운데에 떠 있었다. 이제 .qna-home-line 안에서 이름과 나란히
   선다(사무소는 그 아래 줄만). 연회색 스티커(--surface-alt)라 분야 칩(파랑)과 역할이 갈린다 — 이건 «수»지
   «분류»가 아니다. 글자 caption2(12/500, 옛 12.5/600) · 패딩 3×12(높이 24, 옛 6×12 = 24.5) · nowrap · flex:none — 수가
   잘리면 뜻이 사라진다. 이 스티커가 답변 수를 말하는 **유일한** 자리다(상단 +N은 D-764에서 걷었다).
   answeredCount ≤ 1이면 서버가 아예 안 그린다 — 채택 세무사 혼자 답한 글에 「외 0명」은 없다. */
.qna-home-oe {
  flex: none; margin-left: auto; white-space: nowrap;
  /* caption2(C3 묶음 1): 옛 12.5/600/행간 1 → 12/18/500. 패딩 6→3으로 스티커 높이 24(옛 24.5)를 지킨다 — .qna-home-id min-height 46 산술의 한 항. */
  font-size: var(--fs-caption2); font-weight: var(--fw-medium); line-height: var(--lh-caption2); letter-spacing: var(--ls-12); color: var(--text-secondary);
  background: var(--surface-alt); border-radius: 999px; padding: 3px 12px;
}
/* 「채택된 답변」 상태 줄은 3판에서 걷었다 — 채택 여부는 한 마디 판이 말한다(있음 / 「아직 채택 전이에요」). */

@media (max-width: 900px) { .qna-rail { --qna-per: 2; } }

/* ── 세무시선 홈 섹션 (D-221) — 카드는 여기 없다.
   홈 카드는 D-763부터 **히어로 톤**(fragments/sisun-card.html :: heroCard, 스타일은
   sisun-card.css `.sisun-hero*` — index.html이 home.css와 나란히 링크)이다. 목록(/sisun)은 같은
   파일의 card(p) 격자 그대로. 카드 스타일을 여기 다시 만들지 마라(두 벌이 되면 한쪽만 고친다).

   여기 있는 것은 **홈에서만 다른 것** 하나뿐이다: 좌우 화살표 레일(2026-08-09 사용자 지시).
   목록(/sisun)은 그대로 격자여야 하므로 `.sisun-rail` 아래로만 스코프한다 — sisun-card.css의
   `.sisun-grid2{ display:grid; grid-template-columns: repeat(2,1fr) }`를 홈에서만 덮어쓴다
   (선택자 특정도 0,2,0 > 0,1,0이라 파일 링크 순서와 무관하게 이긴다).
   ⚠ **한 화면 2장**(사용자 지시) — 격자였을 때의 한 행 장수와 같다. 늘리지 마라. */
.sisun-rail {
  position: relative;
  container-type: inline-size;
  --sisun-gap: 16px;
  --sisun-per: 2;
}
.sisun-rail .sisun-grid2 {
  display: grid; grid-auto-flow: column;
  /* 🔴 `grid-template-columns`를 **반드시 지운다**. sisun-card.css의 `repeat(2, 1fr)`이 그대로
     남아 있으면 앞 두 장만 그 1fr 칸에 들어가고 나머지가 grid-auto-columns로 흘러, 트랙 폭이
     한 화면보다 조금만 넓어진다 — 화살표를 눌러도 36px밖에 안 움직인다(실측으로 잡았다). */
  grid-template-columns: none;
  grid-auto-columns: calc((100cqw - (var(--sisun-per) - 1) * var(--sisun-gap)) / var(--sisun-per));
  gap: var(--sisun-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sisun-rail .sisun-grid2::-webkit-scrollbar { display: none; }
.sisun-rail .sisun-card2, .sisun-rail .sisun-hero { scroll-snap-align: start; }
/* 좁은 화면은 한 장씩 — 목록 격자의 768px 분기와 같은 값으로 묶는다. */
@media (max-width: 768px) { .sisun-rail { --sisun-per: 1; } }

/* ── 모바일 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ⚠ 이미지 전용 배너는 제외한다(:not). 이 min-height는 **글자가 들어가는 폴백 카드**를 위한
     값인데, 셀렉터 특이도가 같고 파일에서 뒤에 있어 `.hero-img-only { min-height: 0 }`을
     이겨 버렸다 — 좁은 화면에서 배너 카드가 240px로 늘어나 원고가 위아래로 잘렸다
     ("NOLDAY"가 "OLDA"로 잘리는 걸 실측으로 봤다). 비율은 원고가 정한다. */
  .hero-card:not(.hero-img-only) { min-height: 240px; }
  .hero-body { padding: 0 22px; }
  /* .hero-title 폰 전용 크기(옛 23)는 없다 — display 토큰이 28/38로 든다(C3 묶음 1). */
  .hero-photo { width: 52%; }
  .ad-grid { grid-template-columns: 1fr; }
  /* ⚠ `.qna-home-grid`는 여기서 빠졌다 — 2026-08-09에 레일이 되면서 `grid-auto-flow: column`이
     됐고, 그 위에 `grid-template-columns: 1fr`을 얹으면 **첫 카드만** 1fr 칸에 들어가고
     나머지는 grid-auto-columns로 흘러 한 화면 장수가 어긋난다. 장수는 --qna-per로만 정한다. */
  .qna-rail { --qna-per: 1; }
}

/* ── 광고 상품 표현 (D-124) ─────────────────────────────────────
   광고주가 산 '한 줄 멘트'. 강조(테두리·틴트·리본) 규칙은 D-821에서 걷었다 — 어느 지면·폼·관리자도
   강조 값을 읽지 않는다(옛 문서의 값은 남되 그리지 않는다).
   ⚠ '광고' 라벨은 그대로 붙는다(D-013).
   한 줄 멘트(.ad-tagline)는 홈 통일 카드에서도 유지하되 **일반 본문 톤**으로만 그린다. */
.ad-tagline {
  margin-top: 4px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary);   /* body2(옛 15/1.45) */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* 카드 gap이 이미 간격을 준다 — 통일 카드에서는 위 margin이 겹쳐 두 배가 된다. */
.pf-card .ad-tagline { margin-top: 0; }

/* ── 이용 후기 (D-128) ─────────────────────────────────────────── */
/* ── 후기 밴드 (D-163) — 한 화면을 통째로 쓰는 구간 ─────────────────────────
   참고 지면 kmong.com '고객 만족도' 구간 실측(1280×720):
     섹션 790px(뷰포트의 110%) · 배경 #FAFAFC · 위아래 테두리 1px · 패딩 80/120
     제목 36px/700/44 가운데 · 별 줄 min-h 101px(위 여백 40) · 레일 위 여백 80
     카드 390×279(1.40:1) · 흰 배경 · 패딩 32 · 테두리 1px #F2F3F7 · 그림자 없음
     프로필 50×50 원형 · 이름 20/700/30 · 본문 16/400/24
     마퀴 gap 24 · translate(0)→(-50%) · 150s → 8682px/150s = **58px/s**

   ⚠ 참고 지면의 이동 거리 `-50%`는 **gap 보정이 없다** — 매 바퀴 gap의 절반(12px)씩
      어긋난다. 그대로 베끼지 않고 우리가 쓰는 정확한 식을 쓴다(D-159·D-162).
   ⚠ 배경 #FAFAFC는 새로 만들지 않고 기존 --grey50(#F9FAFB)을 쓴다. 차이는 눈에 안 보이고,
      색을 하나 더 늘리면 그때부터 어느 회색이 맞는지 아무도 모른다.
   ⚠ 이 배경+헤어라인 조합은 위쪽 `.situ-band`와 **한 벌**이다(2026-08-09) — 홈의 전폭 밴드는
      둘뿐이고 둘이 같은 얼굴이어야 한다. 한쪽만 바꾸지 말 것. */
.review-band {
  /* 전폭 — 본문 좌우 패딩을 되돌린다. 밴드가 화면을 가로질러야 '구간이 바뀌었다'가 읽힌다. */
  margin-inline: calc(var(--shell-pad) * -1);
  margin-top: var(--home-gap);
  /* 사용자 지시: **한 페이지 높이를 완전히** 쓴다. 내용이 더 길면 알아서 늘어난다. */
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  /* 🔴 위아래가 **같은 값**이어야 한다(D-262). 예전엔 80/120이었는데, `justify-content:center`가
     **패딩을 뺀 안쪽 상자**의 가운데에 내용을 놓기 때문에 그 40px 차이가 내용을 통째로
     20px 위로 밀었다 — 밴드 위 틈 229 vs 아래 틈 268로 벌어져 있었다(1440×1000 실측).
     한 페이지를 쓰는 구간이라 남는 자리가 크고, 그래서 **작은 비대칭도 크게 보인다.**
     ⚠ 여기에 위아래 다른 값을 다시 넣지 마라. 넓게 보이고 싶으면 --band-pad를 올릴 것
       (그러면 .situ-band도 같이 따라와 두 밴드가 계속 한 벌로 남는다). */
  padding: var(--band-pad) 0;
  background: var(--grey50);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden;   /* 레일이 밴드 밖으로 새지 않게 */
}
.review-title {
  /* display(C3 묶음 1): 옛 clamp(25px, 3.2vw, 36px)/700/1.24 → 28/38 · ≥768 36/46 · 600 — 참고 지면 36은 데스크톱 단 그대로다. */
  font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-display);
  letter-spacing: var(--ls-36); text-align: center; color: var(--text-primary);
  padding-inline: var(--shell-pad);
}

.review-score {
  margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-inline: var(--shell-pad);
}
/* 별 — 회색 5개를 깔고 그 위에 노란 5개를 평점 비율만큼만 잘라 덮는다.
   ⚠ 개수를 반올림해 그리면 4.9와 5.0이 같은 그림이 되어 옆의 숫자와 어긋난다.
   ⚠ 색은 평점 별 노랑 --rating-star(D-915 — 사이트의 평점 별 한 색). 옛 «메인 파랑»(사용자 지시)은 11차 C1 ⓐ(사용자 결정 2026-10-09
     «노랑으로 맞추기»)로 바뀌었다 — 빈 별 회색(--grey200)은 그대로. */
.review-stars-gfx { position: relative; display: inline-block; --rs-size: clamp(38px, 5.4vw, 84px); }
.rs-row { display: flex; gap: clamp(5px, .7vw, 11px); }
.rs-row svg { width: var(--rs-size); height: var(--rs-size); display: block; flex: none; }
.rs-empty svg { fill: var(--grey200); }
.rs-fill {
  position: absolute; top: 0; left: 0; overflow: hidden;   /* width는 서버가 넣는다 */
}
.rs-fill svg { fill: var(--rating-star); }   /* 평점 별 노랑(11차 C1 ⓐ · D-915) — 옛 메인 파랑 */
.review-avg {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); color: var(--text-secondary);   /* title3 18/26(옛 18/600) — 폰은 아래 heading */
}

/* ── 후기 격자 (R3) — 마퀴를 세운 자리 ─────────────────────────────────────
   🔴 예전에는 마퀴였다(D-162). 흘리려면 같은 카드를 `reviewSets`벌 복제해야 하는데,
      후기가 3~4장뿐이라 **같은 문장이 화면에 나란히 두 번** 보였다. 신뢰를 만드는 자리에서
      복제가 보이면 오히려 「지어낸 것」으로 읽힌다. 마퀴·복제·@keyframes를 함께 걷었다.
   ⚠ 되살리지 마라 — 후기 수가 늘어도 «흐르는 글»은 읽으려면 쫓아가야 한다(WCAG 2.2.2).
     많아지면 격자를 늘리거나 [더 보기]를 두는 쪽이 맞다.
   ⚠ `auto-fit`이 아니라 **`auto-fill`**이다: 후기가 한 장일 때 카드 하나가 밴드 폭을 다 먹지
     않게 한다(D-241에서 같은 실수를 배너 격자에서 겪었다). */
/* 카드 레일 — 광고 레일과 같은 마퀴(D-162 · D-279에서 복원). 인덱스는 두지 않는다.
   🔴 **한 번 격자로 바꿨다가 되돌렸다.** 요구서 R3은 「복제 세트를 돌리지 않는다」며 격자를
      지시했고 그대로 했는데(D-263), 실제 화면에서는 후기 3장이 한 줄에 놓이고 밴드가
      한 페이지(100vh)라 **가운데 282px만 차 있고 위아래가 199px씩 빈** 모양이 됐다(실측).
      사용자 판단으로 레일을 되살린다(D-279).
   ⚠ **복제가 다시 생긴다.** 흐르게 하려면 같은 카드를 `reviewSets`벌 이어 붙여야 한다 —
      후기가 적으면 같은 글이 화면에 두 번 이상 보인다. 그게 R3이 격자로 바꾼 이유였고,
      되돌린 지금은 **아는 채로 감수하는 것**이다. 후기가 늘면 자연히 옅어진다.
   ⚠ 복제본은 템플릿에서 `aria-hidden`으로 가린다 — 스크린리더가 같은 글을 여러 번 읽지 않게. */
.review-rail {
  margin-top: 56px; overflow: hidden;
  --rv-w: min(390px, 86vw);
  --rv-gap: 24px;
}
/* ⚠ 트랙에 padding을 주지 마라 — `translateX(-100%)`의 100%가 패딩을 포함해 이음매가 벌어진다
   (D-162에서 실측으로 잡았다). 여백은 바깥 `.review-rail`에 줄 것. */
.review-marquee {
  display: flex; gap: var(--rv-gap); width: max-content;
  animation: rv-roll var(--rv-dur, 29s) linear infinite;
}
.review-set { display: flex; gap: var(--rv-gap); }
@keyframes rv-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc((-100% - var(--rv-gap)) / var(--rv-sets))); }
}
/* 후기는 **읽는** 내용이다 — 흘러가는 글을 쫓아 읽게 두면 안 된다(WCAG 2.2.2).
   ⚠ 이 두 줄을 지우지 마라. 마퀴를 되살린 이상 «멈출 방법»이 반드시 함께 있어야 한다. */
.review-rail:hover .review-marquee,
.review-rail:focus-within .review-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .review-marquee { animation: none; }
  .review-rail { overflow-x: auto; }
}
@media (max-width: 768px) { .review-rail { margin-top: 36px; --rv-gap: 12px; } }

.review-card {
  flex: 0 0 var(--rv-w);
  /* 비율을 실측값 그대로 지킨다(사용자 지시) — 좁은 화면에서도 같은 모양으로 줄어든다. */
  aspect-ratio: 390 / 279;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
/* 카드 상단 = **후기를 받은 세무사**(사용자 지시). 예전엔 여기가 의뢰인이었다. */
.rv-top { display: flex; align-items: center; gap: 14px; }
.rv-avatar {
  flex: none; width: 50px; height: 50px; border-radius: var(--r-full);
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  /* ⚠ 한 글자를 가운데 놓는 자리라 자간 0이다(아바타와 같은 이유, D-161). */
  font-size: var(--fs-title2); font-weight: var(--fw-semibold); letter-spacing: 0;   /* 머리글자(50px 원): title2 20 · ≥768 22(옛 20) */
  /* 사진이 들어오면 원형 밖으로 새지 않게 자른다(이니셜일 때는 아무 영향 없다). */
  overflow: hidden;
}
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-id { min-width: 0; }
/* ⚠ 한 줄로 고정한다. 이름이 길어 두 줄이 되면 카드 비율(390:279)이 그대로라
   맨 아래 의뢰인 줄이 밀려 잘린다. */
.rv-who {
  font-size: var(--fs-title2); font-weight: var(--fw-semibold); line-height: var(--lh-title2); letter-spacing: var(--ls-18);   /* title2(옛 20/700/1.5): 카드 제목 — 폰은 아래 title3 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 이름 옆 직함 — 이름보다 약하게. 이게 있어야 위(세무사)와 아래(의뢰인) 이름이
   같은 사람으로 읽히지 않는다. */
.rv-role { font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); color: var(--text-tertiary); letter-spacing: var(--ls-12); }   /* caption2: 직함 꼬리표(옛 13/600 · 폰 12) */
.rv-rating { display: flex; align-items: center; gap: 4px; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); color: var(--text-tertiary); }   /* label2(옛 14/600) */
.rv-rating svg { width: 15px; height: 15px; fill: var(--rating-star); display: block; }   /* 평점 별 노랑(11차 C1 ⓐ · D-915) — 점수 글자는 text-tertiary 그대로 */
.rv-body {
  /* body2(C3 묶음 1): 옛 16/1.5(폰 14) → 14/22 · ≥768 15/24. body1(16/28)은 카드 비율(390:279) 안에서 3줄 84px이 바닥 줄을 10px 밀어낸다 —
     카드 설명 눈금(body2)이 맞다. */
  margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary);
  /* 🔴 **부호 / 본문 / 부호** 세 칸짜리 세로 배치다(D-301). 클램프는 .rv-text가 가진다 —
     여기 두면 부호 줄까지 세어 본문이 그만큼 더 잘린다.
     ⚠ overflow를 hidden으로 두지 마라. 부호 글리프는 조인 줄 높이보다 커서 살짝 넘치는데,
       여기서 자르면 위아래가 뭉텅 잘린다. 카드(.review-card)가 이미 overflow:hidden이라
       카드 밖으로 새지 않는다. */
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}

/* 본문 — **잘리는 것은 여기뿐**이다.
   🔴 `flex: 0 0 auto`가 이 배치의 안전장치다. 처음에 `1 1 auto`로 두었더니, 카드 높이가
      고정(390:279)이라 남는 자리가 모자란 순간 **본문이 높이 0으로 사라졌다**(실측 —
      후기 글자가 통째로 없어졌다). 줄어들지 못하게 하면 최악의 경우 닫는 부호가 조금
      잘릴 뿐 글은 남는다. **옳은 실패 쪽으로 기울인다.**
   ⚠ 줄 수 4 → 3. 부호가 각각 자기 줄을 가져간 만큼 본문이 한 줄을 내줬다 — 그게 이
     배치의 값이다. 4로 되돌리면 아래 「…님이 남긴 후기」가 카드 밖으로 밀려 사라진다. */
.rv-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 0 0 auto;
}

/* 따옴표 줄 — 장식이라 **글자 한 줄만큼 자리를 먹지 않게** 높이를 조인다.
   🔴 부호는 글자가 아니라 **SVG 도형**이다(타이포그래피 C3 묶음 1 — 요청서 §3-4 «서체에 없는 기호는 CSS 도형·SVG로»).
      옛 Georgia 1.9em/700 세리프 글리프(D-299 — 본문 글꼴의 인용부호는 눈금(〃)처럼 읽힌다)는 OS마다 다른 서체로 그려졌고
      린트 T5(서체 직접 지정)에 걸렸다. 조각 fragments/line-icons :: quote(24×24 경로 하나 = 닫는 부호 모양)를 index.html의
      .rv-quote 안에 두고, 여는 부호는 180° 돌린다(“와 ”는 점대칭).
   ⚠ 높이 1.2em = 옛 글리프 줄(1.9em × 행간 .62 ≈ 1.18em) — 카드 비율(390:279) 안의 세로 산술(SituBannerContractTest ③)이 그대로다.
   ⚠ `line-height: 0`을 쓰지 마라 — 블록이 된 뒤 글자가 상자 밖으로 나가 보이지 않던 사고의 값이다(SVG가 돼도 되살리지 않는다). */
.rv-quote {
  flex: none; display: block; height: 1.2em;
  color: var(--primary); opacity: 0.38;
}
.rv-quote svg { display: block; width: 1.2em; height: 1.2em; fill: currentColor; }
/* 여는 부호는 왼쪽 위(180° 회전), 닫는 부호는 **오른쪽 아래** — 그래야 «감쌌다»는 모양이 완성된다. */
.rv-quote-open svg { transform: rotate(180deg); }
.rv-quote-close svg { margin-left: auto; }
/* 카드 하단 = **후기를 쓴 의뢰인 닉네임**(사용자 지시). 보조 위계라 작고 흐리게,
   그리고 절대 잘리지 않게 flex:none으로 바닥에 고정한다. */
.rv-client {
  flex: none; margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1);   /* caption1(옛 13/1.4 · 폰 12): 메타 */
  color: var(--text-tertiary); letter-spacing: var(--ls-13);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠ `.review-note`(하단 예시 고지)는 사용자 지시로 제거했다(D-164). 되살릴 일이 생기면
   마크업과 함께 이 자리에 다시 넣을 것 — 레일 아래 가운데 정렬 13px 회색 한 줄이었다. */

@media (max-width: 768px) {
  .review-band { margin-inline: -16px; padding: var(--band-pad) 0; }
  .review-score { margin-top: 28px; gap: 10px; }
  .review-avg { font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-14); }   /* heading 16/24(옛 15) — 폰 한 단 아래 */
  /* 하단 의뢰인 줄이 한 칸을 더 먹는다 — 카드 비율(390:279)은 그대로라 좁은 화면에서는
     줄 간격을 좁혀 그 자리를 만든다. 18로 되돌리면 본문 마지막 줄이 글자 중간에서 잘린다. */
  .review-card { gap: 12px; }
  .rv-avatar { width: 42px; height: 42px; font-size: var(--fs-title3); }   /* 머리글자(42px 원): title3 18(옛 17) */
  .rv-who { font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-18); }   /* title3 18/26(옛 17/25.5) */
  /* .rv-role 폰 전용 12px은 없다 — caption2가 이미 12다(C3 묶음 1). */
  /* 카드가 작아지면 본문 줄 수도 줄여야 비율 안에 들어간다.
     🔴 **클램프는 이제 .rv-text에 건다**(D-301). `.rv-body`는 부호/본문/부호를 담는
        세로 flex라 `-webkit-box`가 아니고, 거기 클램프를 걸면 **아무 일도 일어나지 않는다** —
        모바일에서 본문이 안 잘려 카드를 뚫는다. 글자 크기는 그대로 .rv-body가 정한다. */
  /* .rv-body 폰 14px은 body2 토큰이 든다(14/22). .rv-client 폰 전용 12px도 없다 — caption1 13/20(메타 최소 13).
     카드 세로 산술(390px 폭, 카드 335×239.7 · 패딩 20 · 간격 12): 46 + 12 + (16 + 66 + 16) + 12 + 20 = 188 ≤ 안높이 199.7(옛 184.3). */
  .rv-text { -webkit-line-clamp: 3; }
}

/* 가장 좁은 화면(320px대) — 카드 높이가 197px까지 줄어 본문 네 줄이 들어가지 않는다.
   ⚠ 이 구간을 지우면 마지막 줄이 **글자 중간에서 가로로 잘린** 채 보인다(실측으로 잡았다).
     후기 레일 묶음 수 계산(HomeController.REVIEW_CARD_MIN)도 이 폭을 기준으로 잡혀 있다. */
@media (max-width: 359px) {
  .rv-text { -webkit-line-clamp: 2; }   /* ⚠ .rv-body가 아니다 — 위 주석(D-301) */
}

/* ⚠ 예전에 여기 `@media (max-width: 768px) { .hero-wrap { --hero-side: 28px } }`가 있었다.
   좁은 화면에서 옆 카드를 걸쳐 보이게 하려던 것인데, 이제는 어느 폭에서도 한 장만
   보여야 하므로 지웠다(D-161). 되살리면 모바일에서만 이웃이 다시 나타난다. */

/* ── 지금 상담 가능 (D-129) ─────────────────────────────────── */
/* ⚠ `.live-dot`('상담 가능' 초록 배지)은 지웠다(D-169) — 세로 목록의 오른쪽 칸에만 쓰던
   것이고, 카드 레일에는 그 칸이 없다. 접속 상태는 카드 본문의 점(.tp-region .av-dot)이 말한다. */
.online-empty { margin-top: 12px; text-align: center; padding: 28px 20px; }

/* ══ 메인 기능 카드 3장 (D-137) ═══════════════════════════════════
   지역 격자 + 분야 카테고리 격자가 있던 자리. 이 셋이 서비스의 전부라, 홈에서
   가장 큰 덩어리를 차지한다.

   그림은 전부 인라인 SVG다 — 벡터라 레티나·4K에서도 그대로 선명하고, 카드마다
   래스터 이미지를 얹는 것보다 가볍다(이미지 요청 0건).

   3D는 `perspective`를 **부모**(.mainc-grid)에 두고 자식 카드를 회전시킨다. 카드마다
   perspective를 주면 각 카드가 자기 중심으로만 소실점을 잡아 나란히 놓았을 때 어긋나 보인다. */
/* 배너 바로 아래 블록 — 사용자가 콕 집은 자리다. 24px이라 배너에 붙어 있었다.
   ⚠ `--s-2xl`(24px)로 되돌리지 마라. 다른 섹션과 같은 40px이어야 리듬이 맞는다. */
.mainc-sec { margin-top: var(--home-gap); }
.mainc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  perspective: 1400px;
}

.mainc {
  --rx: 0deg; --ry: 0deg;          /* JS가 포인터 위치로 채운다 */
  --px: 0px;  --py: 0px;           /* 그림 시차(parallax) */
  --mx: 50%;  --my: 40%;           /* 광택 위치 */
  --lift: 0px;
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 5 / 7; padding: 26px 24px;
  container-type: inline-size;     /* 제목 글자 크기를 카드 폭(cqi)으로 잡는다(D-755) */
  border-radius: var(--r-xl); color: #fff; isolation: isolate;
  transform-style: preserve-3d;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 2px 6px rgba(11, 27, 61, .10), 0 12px 28px rgba(11, 27, 61, .12);
}
/* 넓은 화면에서는 **비율 대신 높이를 고정**한다(D-154).
   본문이 전폭이 되면서 1920 화면에서 한 장이 590×826까지 부풀어 첫 화면을 통째로 먹었다(실측).
   ⚠ `max-height`로 누르면 안 된다 — aspect-ratio가 살아 있으면 높이 상한에 맞춰 **폭까지
      328px로 같이 줄어** 카드 사이가 휑하게 벌어진다(실측). 비율을 꺼야 트랙을 채운 채 눕는다.
   ⚠ 이 블록은 반드시 `.mainc`**뒤에** 둔다 — 미디어쿼리는 특정도를 올려 주지 않아서,
      앞에 두면 뒤따르는 `aspect-ratio: 5/7`이 이겨 아무 일도 일어나지 않는다(실측으로 겪었다).
   좁은 화면(1080 미만)은 기존 5:7 그대로다 — 그 폭에서는 비율이 이미 460px 근처를 준다. */
@media (min-width: 1080px) {
  .mainc { aspect-ratio: auto; height: 460px; }
}

/* 포인터를 올리면 살짝 떠오르고, 놓는 동안은 JS가 기울기를 실시간으로 준다.
   전환 시간을 짧게 바꿔 손을 따라오는 느낌을 만든다(놓으면 다시 길어져 부드럽게 복귀). */
/* 떠오름 −10px · 그림자 · 기울기(JS)는 그대로다(사용자 결정 2026-10-09 홈 카드 Phase 2 ④ «−10px와 기울기 유지»).
   마우스 반응은 정밀 포인터에서만(터치에서 탭 뒤 :hover가 남지 않게) — 키보드 포커스는 어디서나 같은 모양 + 2px 파랑 링
   (옛 흰 3px 링은 흰 바탕 위에서 카드 밖이 안 보였다 — 홈 카드 링 한 벌 2px --primary). */
.mainc:focus-visible {
  --lift: -10px;
  transition: transform .12s ease-out, box-shadow .3s ease;
  box-shadow: 0 6px 14px rgba(11, 27, 61, .14), 0 26px 56px rgba(11, 27, 61, .22);
  outline: 2px solid var(--primary); outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .mainc:hover {
    --lift: -10px;
    transition: transform .12s ease-out, box-shadow .3s ease;
    box-shadow: 0 6px 14px rgba(11, 27, 61, .14), 0 26px 56px rgba(11, 27, 61, .22);
  }
  .mainc:active { --lift: -4px; }
}

/* 배경면 — 그라디언트·그림·광택이 여기 갇힌다. 라운드 클리핑은 이 층에서만 하고
   부모(.mainc)에는 overflow를 걸지 않는다: overflow:hidden은 preserve-3d를 무력화해
   자식의 translateZ가 통째로 죽는다. */
.mainc-face {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden;
  transform: translateZ(0);
}
.mainc-1 .mainc-face { background: linear-gradient(150deg, #2F80FF 0%, #1B64DA 52%, #1348AE 100%); }
.mainc-2 .mainc-face { background: linear-gradient(150deg, #2B3EC7 0%, #1E2A96 50%, #131C6B 100%); }
.mainc-3 .mainc-face { background: linear-gradient(150deg, #12B39A 0%, #0A8C7E 52%, #06655E 100%); }

/* 그림 — 카드 아래쪽 절반을 채우고, 포인터를 따라 아주 조금 어긋난다(시차). */
.mainc-art {
  position: absolute; left: 50%; top: 52%;
  width: 78%; height: auto; pointer-events: none;
  transform: translate(-50%, -46%) translate(var(--px), var(--py));
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) { .mainc:hover .mainc-art { transition: transform .12s ease-out; } }
/* ①은 심볼(프로필 카드 한 장)이 ③ 핀보다 화폭을 덜 채워 한 치수 키운다(D-608 보정). */
.mainc-1 .mainc-art { width: 88%; }

/* 광택 — 포인터 자리에 빛이 고인다. 3D 기울기만으로는 평면이 도는 것에 그치고,
   빛이 함께 움직여야 표면이 있다고 읽힌다. */
.mainc-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(255,255,255,.30), rgba(255,255,255,.06) 45%, transparent 70%);
  transition: opacity .35s ease;
}
/* 누름(터치 포함)은 이동 대신 광택만 — 색 판이라 «누름 바탕 #E8F3FF»를 쓰지 않는다. */
.mainc:focus-visible .mainc-glare, .mainc:active .mainc-glare { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .mainc:hover .mainc-glare { opacity: 1; } }

/* 글자층 — 배경보다 앞으로 끌어내야 기울일 때 깊이가 보인다. */
.mainc-top, .mainc-bottom { position: relative; display: flex; flex-direction: column; }
.mainc-top { gap: 10px; transform: translateZ(48px); }
.mainc-bottom { gap: 14px; transform: translateZ(28px); }

.mainc-live {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12);   /* caption2: 배지(옛 12/700) */
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full); padding: 8px 11px 8px 9px;   /* 행간 18 + 2×8 = 34 — 옛(상속 행간 22 + 2×5) 알약 높이 그대로 */
  backdrop-filter: blur(6px);
}
.mainc-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4AE3A6;
  box-shadow: 0 0 0 3px rgba(74, 227, 166, .28);
  animation: mainc-pulse 2s ease-in-out infinite;
}
@keyframes mainc-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 227, 166, .28); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 227, 166, .10); }
}

.mainc-title {
  /* 자간은 스케일에서 고른다(D-161) — 예전 -.7px는 같은 화면의 다른 제목(-.2·-.3)과 어긋나
     혼자 다른 서체처럼 보였다. */
  font-weight: var(--fw-semibold); line-height: var(--lh-title1); letter-spacing: var(--ls-22);
  /* 🔴 세 제목은 모두 **한 줄**이다(D-755, 사용자 지시) — 가장 긴 「우리 지역 세무사 지도」가 26px에서
     214px(실측, 자간 포함) = 글자크기 × 8.23이다. 3열 격자의 카드 **안폭**(패딩 뺀 값 = 1cqi × 100)은
     1280에서 274px, 1080에서 211px, 901에서 154px — 그래서 글자 크기를 안폭의 12%로 잡았다(Pretendard 8.23 × 12% ≈ 99%).
     🔴 라운드 서체(D-890)는 더 넓다 — 실측(C3 묶음 1) 28px → 261px = **9.33배** → 비율은 **10.5%**(아래 --fs-mainc-title).
     옛 실측(12%): 1440·1280 → 26 · 1080 → 25.3 · 1000 → 22.2 · 901 → 18.5. 지금(10.5%): 1440·1280 → 28(상한) · 1080 → 22.2 ·
     1000 → 19.4 · 901 → 18(하한 — 안폭 154에선 2줄, 옛 12%에서도 2줄이었다). 900 이하 캐러셀(안폭 ≤260)도 같은 식이 한 줄을 든다
     (아래 @media 주석) — 옛 «23px 고정»은 걷었다(C3 묶음 1).
     ⚠ white-space:nowrap을 쓰지 않는다 — 컨테이너 쿼리 없는 옛 브라우저에서는 넘치기보다 접히는 편이 낫다. */
  /* 타이포그래피 C3 묶음 1 — 유동 크기는 **토큰 사이에서만** 움직인다: 하한 title3(18) · 상한 title1(24 · ≥768 28, 옛 17~26).
     비율은 12% → **10.5%**: 라운드 서체가 넓어 「우리 지역 세무사 지도」 28px = 261px(9.33배, 옛 Pretendard 8.23배) — 9.33 × 10.5% = 98%.
     상한 28이 한 줄이려면 안폭 ≥ 267: 1440(326) · 1280(274) ✓, 그 아래는 10.5%가 내려 준다. 지역 변수로 두는 뜻은 린트(«font-size는
     var(--fs-*)만»)와 같다 — 숫자는 토큰에서만 온다.
     행간 = 상한 토큰의 행간 --lh-title1(32 · ≥768 38) — 타이포 점검 2026-10-03 F13(옛 비율 1.28 = 30.72·35.84px, 토큰 밖 소수점 행간).
     제목은 한 줄 계약(D-755)이라 행간은 «한 줄 상자 높이»로만 일한다: 상자가 1~2px 커질 뿐 카드(aspect-ratio 5/7 · space-between)
     높이는 그대로다. ⚠ 글자가 하한(18)에 붙는 좁은 칸에서는 제목이 2줄이 된다 — 그 칸의 행간은 바로 아래 컨테이너 쿼리가 하한 토큰으로 내린다. */
  --fs-mainc-title: clamp(var(--fs-title3), 10.5cqi, var(--fs-title1));
  font-size: var(--fs-mainc-title);
  text-shadow: 0 1px 12px rgba(6, 20, 48, .28);
}
/* F13 보정(타이포 점검 2026-10-03 검증 지적) — 글자가 **하한 title3(18)에 붙는 칸**에서는 행간도 하한 토큰 --lh-title3(26)이다.
   위 행간(--lh-title1)은 상한 기준이라, 18px 글자가 2줄로 접히는 칸(「우리 지역 세무사 지도」 18px ≈ 168px > 안폭)에서 줄 간격이
   38/18 = 2.1배로 벌어졌다(옛 1.28 비율은 23px). 경계 = 글자가 하한에 닿는 안폭 18 ÷ 0.105 = 171.4px → `max-width: 171px`
   (171~171.4 사이는 글자가 아직 18이지만 한 줄이라 행간은 상자 높이로만 일한다). 컨테이너는 이 제목의 가장 가까운 조상 .mainc
   (container-type: inline-size, 이름 없음)다 — cqi와 같은 칸을 잰다. 2줄이 나는 폭은 dev 실측 뷰포트 901~945(3열, 안폭 156~168)뿐이고
   (950 = 안폭 169부터 한 줄), 캐러셀(≤900, 안폭 ≥185)·960 이상(안폭 ≥173)은 이 쿼리에 들지 않는다. ⚠ 비율(10.5cqi)이나 하한 토큰을 바꾸면 이 경계도 다시 계산하라.
   덤(실측 901): 옛 38 행간의 2줄 제목은 카드 내용 높이를 키워 aspect-ratio 5/7이 최소 폭을 204.3으로 밀었고(트랙 201.8) 세 장이 격자보다
   7.5px 넘쳐 세 번째 카드 오른쪽이 잘렸다 — 26 행간에서는 201.8×282.5로 트랙과 같다. */
@container (max-width: 171px) {
  .mainc-title { line-height: var(--lh-title3); }
}
.mainc-desc {
  font-size: var(--fs-body2); line-height: var(--lh-body2); color: rgba(255, 255, 255, .88);   /* body2(옛 15/1.55) */
  text-shadow: 0 1px 10px rgba(6, 20, 48, .3);
}
/* 화살표는 hover 때만 밀려 나간다 — '누를 수 있다'를 말로 하지 않고 움직임으로 말한다.
   ⚠ 예전에 의사요소 두 개(가로선 + 회전한 세로선)로 그렸다가 회전 기준점이 어긋나
      찌그러진 갈고리가 나왔다. 선을 손으로 맞추지 말고 path 하나로 그린다. */
.mainc-go {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14);   /* label1: 카드 CTA(옛 15/700) */
}
.mainc-go svg {
  width: 26px; height: 26px; flex: 0 0 26px; padding: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3);
  fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.mainc:focus-visible .mainc-go svg { transform: translateX(5px); background: rgba(255, 255, 255, .34); }   /* 키보드에도 같은 화살표 밀림 */
@media (hover: hover) and (pointer: fine) { .mainc:hover .mainc-go svg { transform: translateX(5px); background: rgba(255, 255, 255, .34); } }

@media (max-width: 900px) {
  /* 3장이 좁아지면 글자가 갇힌다 — 가로 스크롤로 바꾸고 카드 크기는 지킨다(홈 배너와 같은 규약). */
  .mainc-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 4px; perspective: none;
  }
  .mainc-grid::-webkit-scrollbar { display: none; }
  .mainc { flex: 0 0 min(300px, 78%); scroll-snap-align: start; padding: 22px 20px; }
  /* .mainc-title 폰 고정 크기(옛 23px)는 없다(C3 묶음 1) — 기본 규칙의 유동 크기(10.5cqi, title3~title1)가 캐러셀 카드(안폭 ≤260)에서도
     한 줄을 지킨다: 260 → 27.3 · 239(390) → 24(상한) · 216(360) → 22.7 · 185(320) → 19.4. 옛 23 고정은 360·320에서 2줄이었다(실측). */
}

/* 손가락 입력·모션 최소화 환경에서는 기울이지 않는다. 기기가 흔들리는 것처럼 보일 뿐이다. */
@media (prefers-reduced-motion: reduce) {
  /* 이동·전환 없이 색만(그림자·광택·화살표 바탕이 바로 바뀐다). 위 hover·focus 규칙과 같은 특이도라 **뒤에 있어야** 이긴다 —
     옛 규칙은 (0,1,0)이라 hover의 (0,2,0) 전환에 져서 그림자 .3s · 광택 .35s · 화살표 5px 이동이 새어 나왔다(Phase 0 조사). */
  .mainc, .mainc:hover, .mainc:focus-visible, .mainc:active,
  .mainc-art, .mainc:hover .mainc-art, .mainc-glare, .mainc-go svg { transition: none; }
  .mainc, .mainc:hover, .mainc:focus-visible, .mainc:active { transform: none; --lift: 0px; }
  .mainc:hover .mainc-go svg, .mainc:focus-visible .mainc-go svg { transform: none; }
  .mainc-live::before { animation: none; }
}

/* ── 세무사 찾기 상단 광고 레일 (D-189 §3.2) ────────────────────────────────
   조각: templates/fragments/directory-ad-rail.html — 지금은 어느 지면도 그리지 않는다(지도 화면의 복원용 보존,
   directory-map.html 주석 · 옛 /directory 목록은 목록 뷰와 함께 걷었다, D-880). 아래 «/directory» 언급은 그때의 사정이다.
   ⚠ **홈 파일에 두는 이유.** 이 카드가 `.ad-label`(D-013 표시 의무)·`.ad-tagline`(D-124)·
     `.sec-head`를 **그대로** 쓴다. 파일을 나누면 같은 광고 스타일이 두 벌이
     되어 라벨 하나 고칠 때 한쪽만 고치게 된다. 대신 /directory/map은 home.css를 링크해야
     한다(조각의 `assets` 참고 — /directory는 이미 링크한다).
   ⚠ 카드 언어는 홈(.tp-card·.ad-card)이 아니라 **디렉토리 목록 카드(.tax-card)** 쪽을 따른다 —
     바로 아래 붙는 것이 그 목록이라, 사진·글자·그림자가 다르면 두 덩어리가 남처럼 보인다.
     그림자를 지우지 않는 것도 같은 이유다: D-167·D-168의 "배너 옆에서 광고 카드만 떠 보인다"는
     홈의 사정이고, 여기 이웃은 그림자가 있는 `.card`(.tax-card)다. */
.dad-sec { margin-bottom: var(--s-2xl); }

/* ⚠ 바깥에 overflow:hidden을 걸어 **페이지 가로 스크롤이 절대 생기지 않게** 한다 — 넘치는
     장수는 `.dad-track` 안쪽에서만 흐른다.
   ⚠ 카드 폭은 cqw(컨테이너 폭) 기준이다. 사이드바가 접히고 펴지며 본문 폭이 바뀌어도
     "한 화면 = 정수 장"이 유지돼야 자동 넘김(paged-rail.js)의 '한 세트' 가정이 안 깨진다
     (D-171에서 소수 장수를 정수로 되돌린 것과 같은 이유). */
.dad-rail { overflow: hidden; container-type: inline-size; --dad-gap: 12px; --dad-per: 1; }
.dad-track {
  display: flex; gap: var(--dad-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dad-track::-webkit-scrollbar { display: none; }

.dad-card {
  flex: 0 0 calc((100cqw - (var(--dad-per) - 1) * var(--dad-gap)) / var(--dad-per));
  scroll-snap-align: start; min-width: 0; padding: 14px 16px;
  transition: border-color .15s ease;
}
/* 카드 안에 링크가 둘이라, hover만 두면 키보드로 왔을 때 지금 어느 카드에 있는지 알 수 없다. */
.dad-card:hover, .dad-card:focus-within { border-color: var(--grey300); }
/* `.ad-label`은 홈에서 flex 행 오른쪽 끝에 붙던 것이라 margin-left:auto를 갖는다. 여기서는
   블록 안의 인라인이라 그 값이 무해하지만, 나중에 이 줄을 flex로 바꾸는 사람이 라벨이
   오른쪽으로 튀는 이유를 못 찾게 되므로 여기서 명시적으로 되돌려 둔다. */
.dad-card .ad-row { margin-bottom: 8px; }
.dad-card .ad-label { margin-left: 0; }

.dad-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 카드 본문 링크 — 사진+정보 한 덩어리. 카드 전체를 덮는 오버레이는 쓰지 않는다(조각 주석). */
/* ⚠ 사진은 **위로** 붙인다(align-items:center 아님). 좁은 화면에서는 정보가 다섯 줄까지
   늘어나는데, 가운데 정렬이면 사진이 아래로 내려가 이름 줄이 사진보다 위에 뜬다 —
   목록 카드(.tax-card)도 같은 이유로 flex-start다. */
.dad-main { flex: 1 1 240px; min-width: 0; display: flex; align-items: flex-start; gap: 12px; color: inherit; }
.dad-photo { width: 96px; height: 96px; font-size: var(--fs-title1); border-radius: var(--r-lg); }   /* 머리글자: title1 24 · ≥768 28(옛 34 · 폰 28) */
.dad-info { flex: 1; min-width: 0; }

.dad-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
/* 이름이 길어도 배지·상태·평점을 밀어내지 않게 — min-width:0이 없으면 flex item이 줄어들지
   않아 말줄임(ellipsis)이 아예 걸리지 않는다(.tp-id·.ad-id와 같은 관행). */
.dad-card .tax-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dad-card .badge, .dad-presence { flex: none; }
.dad-rating {
  margin-left: auto; flex: none; display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-secondary); white-space: nowrap;   /* caption1(옛 13) */
}
.dad-rating .star { color: var(--warning); font-weight: var(--fw-semibold); }   /* 점수 글자색 그대로 — 별 글자는 안쪽 .rating-star(app.css, 평점 별 노랑(사용자 요청 2026-10-08 · D-915)) */
.dad-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [상담 예약] — 본문 링크의 **형제**다(<a> 중첩 금지, 조각 주석 참고). */
.dad-cta { flex: none; margin-left: auto; }

/* **기본은 한 화면 한 장이다.** 두 장으로 나누면 정보 칸이 240px 남짓으로 눌려 이름 줄
   (이름·배지·접속상태·평점)이 두 줄로 접힌다 — 1280 실측에서 정확히 그랬다(정보 칸 237px).
   가로로 넓게 쓰는 것이 이 지면의 요지이므로, 두 장은 **정보 칸이 400px을 넘기는 폭**에서만 쓴다
   (사이드바 256 + 좌우 여백을 뺀 값 기준 — 1400에서 정보 칸 약 415px).
   ⚠ `@container`로 자기 자신을 다시 꾸밀 수 없어(container-type이 .dad-rail 자신에 걸려 있고
     컨테이너 쿼리는 후손에만 적용된다 — D-159에서 겪었다) 미디어쿼리를 쓴다. 그래서 사이드바가
     접힌(rail) 상태의 여유 폭까지는 못 본다 — 한 장으로 남을 뿐 깨지지는 않는다. */
@media (min-width: 1400px) { .dad-rail { --dad-per: 2; } }

@media (max-width: 600px) {
  .dad-sec { margin-bottom: var(--s-lg); }
  .dad-photo { width: 76px; height: 76px; }   /* 머리글자는 title1 토큰이 폰에서 24로 든다(옛 28) */
  /* 사진+정보가 한 줄을 다 쓰고 버튼은 아래 줄 전체를 쓴다. 한 줄에 밀어 넣으면 정보 칸이
     150px 남짓으로 눌려 이름·사무소가 전부 말줄임으로 끝난다(375px 실측). */
  .dad-main { flex: 1 1 100%; }
  /* 줄바꿈된 뒤에도 margin-left:auto가 남아 있으면 값이 혼자 오른쪽에 떨어져 어느 줄에
     속한 것인지 안 읽힌다. */
  .dad-rating { margin-left: 0; }
  .dad-cta { margin-left: 0; width: 100%; }
}

/* ── «지금 상담노트» 띠 (D-670) — 배너와 메인 카드 3장 사이. 홈·빠른 상담 공통
   (fragments/brief-current.html). 세 카드가 전부 이 노트로 열리므로 카드보다 먼저 보인다.
   ⚠ 섹션 리듬은 .cur-brief-sec의 --home-gap 하나 — 숫자를 적지 마라(파일 머리 규칙). */
.cur-brief-sec { margin-top: var(--home-gap); }
.cur-brief {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.cur-brief-ico {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; background: var(--primary-light); color: var(--primary);
}
.cur-brief-ico svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cur-brief-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cur-brief-cap { font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); color: var(--text-tertiary); }   /* caption2(옛 12/600) */
.cur-brief-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cur-brief-title {
  font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); color: var(--text-primary); min-width: 0;   /* heading(옛 16/700) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cur-brief-cat {
  flex: none; font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-medium); letter-spacing: var(--ls-12); color: var(--primary);   /* caption2(옛 12/600) */
  background: var(--primary-light); border-radius: 999px; padding: 3px 8px;   /* 18 + 2×3 = 24px 알약(옛 상속 행간 22 + 4 = 26) */
}
/* 🔴 띠 한 줄(제목 · 분야 칩 · 보기)에서는 칩도 줄어든다(2026-10-07 1차 리뷰 UX-2) — 긴 분야 이름(«과세예고통지·세무조사·조세불복»)
   칩이 줄어들지 않아(flex: none) 폰 360에서 제목이 한 글자, 320에서는 제목이 사라지고 «보기»가 줄 밖으로 나갔다.
   칩은 줄 폭의 40%까지만 · 넘치면 말줄임 → 제목 몫(줄의 60% − «보기»)이 늘 남고(제목은 지금처럼 말줄임) «보기»는 줄 안에 선다.
   노트를 알아보는 글자는 사용자가 쓴 제목이라 제목이 더 큰 몫을 갖는다(2026-10-07 3차 리뷰 UX-A3-7 — 절반이던 때 320에서 긴 칩 103px에
   제목이 62px «왕복 …» 두 글자였다). 40%면 320 칩 82 · 제목 약 83, 360 칩 98 · 제목 약 107(줄 206·246 실측 기준 계산).
   짧은 칩(«부가가치세» 75 · «상속·증여세» 78 · «절세 컨설팅» 78 — 실제 글꼴 실측)은 320에서도 온전하고, «창업·예비사업자»(102)만 320·360에서
   말줄임이다(390 이상은 온전). 칩은 줄어들지 않는다(flex: none 그대로) — 줄어들게 두면 제목이 긴 노트에서 짧은 칩까지 제목과 나눠 잘린다.
   상한보다 짧은 칩은 지금과 같은 모양·폭이다.
   ⚠ 줄(.cur-brief-line) 안의 칩만이다 — 빠른 상담 허브 카드의 칩(캡션 줄, hub.css)은 꺾이는 줄이라 그대로 둔다. */
.cur-brief-line > .cur-brief-cat {
  max-width: 40%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cur-brief-view { flex: none; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-tertiary); white-space: nowrap; }   /* caption1(옛 13) */
.cur-brief-lead { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-secondary); }   /* caption1(옛 13) */
.cur-brief-acts { flex: none; }
.cur-brief-chg { font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); letter-spacing: var(--ls-14); color: var(--primary); white-space: nowrap; }   /* label2: 작은 동작 링크(옛 14/700) */
.cur-brief-chg:focus-visible, .cur-brief-view:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}
/* 없을 때 — 캡션이 제목 자리에 선다(굵기로 가른다, 색 아님). */
.cur-brief-off .cur-brief-cap { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); color: var(--text-primary); }   /* heading(옛 15/700) — 제목 자리와 같은 토큰 */
.cur-brief-cta { flex: none; }

/* ⚠ 프리미엄 세무사 아래 «기장 띠» 한 줄(D-900 ③)의 규칙은 2026-10-09에 띠와 함께 걷었다(사용자 승인) — 고민별 배너 1번이
   같은 지도 기장 필터로 간다. 장부 선 아이콘(line-icons :: ledger)·줄 끝 꺾쇠(.row-go)는 메뉴·다른 줄이 계속 쓴다. */
@media (max-width: 640px) {
  .cur-brief { flex-wrap: wrap; padding: 12px 14px; gap: 10px 12px; }
  .cur-brief-body { flex: 1 1 calc(100% - 52px); }
  .cur-brief-acts { flex-basis: 100%; text-align: right; }
  .cur-brief-cta { flex-basis: 100%; width: 100%; }
}

/* ── 좁은 화면 세로 리듬 (D-166 · D-262) ───────────────────────────────────
   참고 지면 실측(375×812): 섹션 사이 **16**. 그 값은 그대로 둔다.

   D-262에서 **선언 방식만 바꿨다.** 예전엔 여기서
     `.section, .mainc-sec, .situ-band, .review-band { margin-top: 16px }`
   처럼 대상을 하나하나 적었다. 그래서 목록에서 `.review-band`를 빠뜨렸을 때
   마지막 구간만 40px로 남아 리듬이 거기서 끊겼다(실측 16,16,16,16,40).
   지금은 **변수 두 개만 다시 정의한다** — 홈의 모든 블록이 이미 그 변수를 보고 있으므로
   «목록에서 빠뜨린다»는 실수가 구조적으로 불가능하다. 새 블록을 추가해도 자동으로 따라온다.

   ⚠ **이 블록은 파일 맨 끝에 있어야 한다.** 미디어쿼리는 특이도를 올리지 않는다 —
     위쪽 `:root`보다 앞에 두면 뒤에 오는 56px이 이겨서 좁은 화면에서도 56px이 적용된다.
     실제로 예전에 그렇게 넣었다가 잡았다. */
@media (max-width: 768px) {
  :root {
    --home-gap: 16px;
    /* 밴드 안쪽도 함께 줄인다. 예전엔 situ 20 · review 56/72로 제각각이라
       좁은 화면에서 보이는 틈이 16,16,36,36,16,72,88,16이었다. */
    --band-pad: 20px;
  }
  /* 배너만 리듬에서 벗어난다(위 .hero-wrap 주석의 ⓐ·ⓑ와 같은 이유).
     대칭: 위 = .main 위 패딩 16 + 32 = 48, 아래 = 48. 화면 맨 위에서 56 + 48 = 104px.
     ⚠ 여기서 아래를 --home-gap(16)으로 내리지 마라 — 배너는 큰 그림 한 장이라
       16px만 남기면 다음 섹션 카드가 배너에 달라붙는다.
     🔴 `:not(.situ-rail)`을 떼지 마라 — 밴드 안 레일이 이 48px을 물어 간다(위 주석 참고). */
  .hero-wrap:not(.situ-rail) { margin-top: 32px; margin-bottom: 48px; }
}

/* ══ 광고 슬라이드 (D-453) — 프리미엄(3명×3장)·지금 상담(6명×3장) 공용. ══
   🔴 JS 없이는 전 슬라이드가 세로로 쌓여 다 보인다(완전한 폴백) — .is-carousel이 붙어야
      한 장씩 보인다(ad-slides.js). 마크업 hidden 금지. */
.ad-slides { position: relative; }
.ad-slide {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 12px;
  /* 🔴 **줄이 모자라는 장에서 카드가 세로로 늘어나던 것**(D-707, 사용자 신고 「카드가 길게
     늘어져 보인다」). 아래 D-698 수정이 모든 장을 **같은 격자 칸에 겹쳐** 두는데, 그러면
     장 하나하나가 «가장 큰 장»의 높이로 늘어난 칸을 받는다. `align-content`의 기본값
     `normal`은 격자에서 **stretch**라, 그 남는 세로를 `auto` 행들이 나눠 먹는다 —
     카드가 그만큼 키워진다.
     실측(모바일 한 열, 온라인 18명 = 8·8·2): 8장 장은 카드 212px인데 **2장 장은 884px**.
     사진칸(.on-th)이 `align-items: stretch`로 행 높이를 그대로 받아 사진이 통짜로 늘어났다.
     ⚠ 이건 «드문 경우»가 아니라 **매번**이다 — 마지막 장은 늘 나머지 인원만 담는다
       (18 % 8 = 2). 열 수가 4→2→1로 바뀌면 줄 수도 함께 바뀌어 나누어떨어지게 만들 수도 없다.
     ⇒ `start`로 못박는다: 행은 내용 높이 그대로, 남는 세로는 **아래에 남긴다**.
       겹쳐 놓은 칸의 높이(=지면 높이)는 그대로라 D-698의 «장을 갈아 끼워도 높이가 안 변한다»는
       하나도 안 깨진다. 두 수정은 서로 다른 축을 잡는다 — D-698은 «칸의 높이», 이것은 «칸 안의 배치».
     ⚠ 프리미엄 장(.ad-slide-photo, 9명 = 5+4)도 같은 병이었다. 거기는 `.fp-photo`가
       `aspect-ratio`를 들고 있어 사진이 늘지는 않았지만 카드 아래에 빈 자리가 생겼다. */
  align-content: start;
}
/* ⚠ 이 4열(옛 D-682 «지금 상담 = 4열 × 2행 = 8명»)은 **이제 어디에서도 이기지 않는다** — 세무사 카드 v4(사용자 결정 2026-10-07 범위 변경)
   뒤로 홈 «지금 상담 가능한 세무사»의 열 수는 아래 `#online-now .ad-slide.wide` 규칙(@container onl — 1·2열)이 정하고, 이 클래스를 함께 쓰는
   빠른 상담 허브(.hub-slide)는 hub.css가 6·4열로 덮는다. 열 수를 고치려거든 이 줄이 아니라 그 두 규칙을 고쳐라(짝: HomeController.ONLINE_PER_SLIDE 8 ·
   QuickConsultController.PER_SLIDE 12). 규칙을 걷지 않은 까닭: 아래 ≤900·≤560 미디어쿼리와 한 묶음인 옛 기본값이라, 걷어도 화면이 같다는 계약 시험부터
   다시 세워야 한다(3차 리뷰 RB3-13 — 이번에는 주석만 바로잡았다). */
.ad-slide.wide { grid-template-columns: repeat(4, 1fr); }
/* 🔴 **장을 갈아 끼워도 지면 높이가 변하지 않는다** (D-698, 사용자 신고).
   예전에는 `display: none ↔ grid`로 갈아 끼웠다 — 그러면 **컨테이너 높이가 «지금 켜진 장»의
   높이**가 된다. 그런데 마지막 장은 남는 인원만 담는다: 「지금 상담 가능한 세무사」는
   ONLINE_SLOTS 18을 8명씩 나눠 **8·8·2**라, 마지막 장은 늘 2명 = 한 줄이다
   (실측 334px → 170px). 3초마다 지면이 **164px 줄었다 늘고**, 그 아래 것들이 통째로 위아래로
   튀었다 — 바로 아래가 후기 밴드라 사용자에게는 「리뷰 영역이 새로고침되는」 것으로 보였다.
   ⚠ 이건 드문 경우가 아니라 **매번**이다(18 % 8 = 2). 인원 수를 고쳐 나누어떨어지게 만드는
     길도 있지만, 열 수는 화면 폭에 따라 4→2→1로 바뀌어(아래 미디어쿼리) 줄 수도 함께 바뀐다.
     그래서 «나누어떨어지게»로는 못 막는다 — 구조로 막아야 한다.

   해법: 모든 장을 **같은 격자 칸에 겹쳐** 두고 보이기만 갈아 끼운다. 높이는 언제나 가장 큰 장이다.
   ⚠ `display: none`이 아니라 `visibility: hidden`인 이유 — display:none은 자리를 만들지 않아
     겹쳐 놔도 높이에 기여하지 않는다(즉 이 수정의 전부가 무효가 된다).
     visibility:hidden은 자리를 지키면서도 **포커스·낭독 대상에서 빠진다** — 탭이 안 보이는
     카드로 새지 않는다(ad-slides.js가 거는 aria-hidden과 같은 뜻이고, 서로 방해하지 않는다).
   ⚠ 점(dots)은 **2행**에 둔다. 같은 칸에 넣으면 카드 위에 겹쳐 찍힌다.
   ⚠ JS가 죽으면 `.is-carousel`이 안 붙어 이 규칙이 통째로 꺼진다 — 전 슬라이드가 세로로
     쌓이는 폴백은 그대로다. */
.ad-slides.is-carousel { display: grid; grid-template-rows: auto auto; }
.ad-slides.is-carousel .ad-slide {
  grid-area: 1 / 1; display: grid; margin-top: 12px; visibility: hidden;
}
.ad-slides.is-carousel .ad-slide.on { visibility: visible; }
.ad-slides.is-carousel .ad-slide-dots { grid-area: 2 / 1; }
.ad-slide-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.ad-slide-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: var(--border); cursor: pointer;
}
.ad-slide-dots button[aria-current="true"] { background: var(--primary); width: 18px; border-radius: 4px; }
@media (max-width: 900px) {
  .ad-slide, .ad-slide.wide { grid-template-columns: repeat(2, 1fr); }
}
/* 🔴 560 이하는 **한 열**이다(D-638). 두 열은 카드가 173px로 줄어 이름이 「박…」이 되고
      (실측), 게다가 격자 칸이 카드의 min-content 아래로 못 내려가 **문서가 가로로 스크롤**됐다
      (문서 폭 390 → 646, 이 상향 이전부터 있던 결함이다).
   ⚠ `min-width: 0`으로 두 열을 유지하는 길도 있고 넘침은 그것으로도 잡힌다 — 다만 이름이
      두 글자로 잘려 «누구에게 상담받는지»를 못 읽는다. 이 지면의 존재 이유가 그것이라(D-162)
      폭을 주는 쪽을 골랐다. 대가는 세로다: 한 슬라이드가 카드 수만큼 길어진다. */
@media (max-width: 560px) {
  .ad-slide, .ad-slide.wide { grid-template-columns: 1fr; }
}

/* ══ '지금 상담 가능한 세무사' 카드 — 세무사 카드 v4 «에디토리얼» (사용자 결정 2026-10-07 범위 변경) ═══════════════
   카드 안쪽(칩 · 한 줄 소개 · 이름 «세무사» «접속 중» · 지역 · 아치 사진 · 후기 배지)은 tax-card.css 한 곳이 정한다
   (fragments/tax-card 조각 — index.html이 tax-card.css를 함께 싣는다). 여기는 이 지면의 걸개만: 카드 테두리·호버 · 열 수 · 폰 밴드 번짐(아래 라이브 밴드 끝).
   옛 사진 블리드 카드(.on-th 4:5 · .on-img · .on-body · .on-nm · .on-rt · .on-who · .on-cats — D-682·D-701·D-702·D-704)와 라이브 밴드의
   원형 112 변형(시안 C 2026-09-13 · 홈 원형만 object-position 18% 예외, 사용자 결정 2026-09-25)은 v4 아치로 바뀌며 걷었다 —
   아치 사진(.tc-photo)은 app.css 세무사 사진 묶음(50% 10%)을 타므로 페이지 CSS의 사진 위치 예외는 이제 0건이다.

   🔴 테두리는 바깥 고리(box-shadow 0 0 0 1px)다 — border를 주면 카드 안폭이 2px 줄어 @container tc 구간과 서버 이름 줄 예산
      (TaxCardView — 360 폰 카드 328 → 글 칸 180)이 어긋난다. 호버는 그림자만 더한다(사용자 결정 2026-10-07 C28 «그림자만»).
   🔴 열 수는 «밴드 안폭»으로 정한다(@container onl) — 사이드바가 펼쳐졌는지·접혔는지(html.rail)에 따라 같은 뷰포트에서도 안폭이 다르다.
      안폭 ≥ 668(카드 둘 × 328 + 간격 12) = 2열(한 칸 최대 560 = tax-card.css --tc-max — 넓은 화면은 열 사이 최대 64 · 나머지는 양옆, D-933), 그 아래 1열(카드 최대 560, 왼쪽 정렬).
      3열·4열은 쓰지 않는다 — 한 장 8명(HomeController.ONLINE_PER_SLIDE)과 짝이라 3열이면 마지막 줄이 비고, 사용자 결정이 «PC는 v4 2열»이다.
      1280(사이드바 펼침)에서 안폭 ≈ 970 → 카드 479 × 2열, 카드 200px라 섹션이 화면에 들어오면 3줄(6장) + 일부가 보인다.
   ⚠ 폰(≤560)의 밴드 번짐은 라이브 밴드 규칙(파일 아래 #online-now.online-live .online-live-band) **뒤에** 둔다 — 같은 특이성이라 앞에 두면 진다.
   ⚠ **앱 백로그**(앱 동결 D-391 — 앱은 따라오지 않았다, 3차 리뷰 RB3-09): lib/ui/screens/home/home_screen.dart의 `_onlineSection`·`_onlinePage`·`_onlineCard`
      (+ `_onlineCardHeight` 짝)는 아직 옛 카드다. 앱을 다시 열 때 이 v4로 옮긴다 — 칩 셋(첫 칩 대표 분야 채움 · 줄임 표 · 기장 자리 C14~C17 ·
      줄임 칩 화면낭독 이름) · 한 줄 소개 두 줄 말줄임 · 카드 폭 구간별 23/19/17px · 입력 20자(사용자 결정 2026-10-08 6차 H1·H4 — 웹 정본 HeadlineRule)(자동 소개 «… 상담 가능해요.»·«{이름} 세무사»는 빈 값 → 이름 줄 위로) ·
      이름 21 + «세무사» 15 + «접속 중» · 지역(사무소는 웹 스위치 TaxCardView.HOME_SHOWS_OFFICE를 따른다) · 오른쪽 128 아치 사진 + 흰 후기 배지 ·
      넓은 칸 2열/좁은 칸 1열 · 폰 밴드 번짐. 판정 규칙의 정본은 웹 TaxCardView(대표 분야 읽기 · 칩 · 자동 소개 · 이름 줄 단계 · 배지 꼴) 한 곳이다.
      + 이름 줄(사용자 검수 2026-10-08 ② → 사용자 결정 2026-10-08 «이름은 잘리거나 말줄임되지 않고 한 줄로 전부»): 이름은 줄이지도 말줄임하지도 않는다.
      자리가 모자라면 간격 8 → 6 → «접속 중»은 초록 점만(글자는 Semantics 라벨로) → 이름 20 → «세무사 ● …»를 이름 아래 줄로(헤드라인은 두 줄 그대로 — 7차 P10) →
      이름 글씨 20 → 18 → 16 → 14 → 13. 360 미만 폰(카드 ≤ 327)은 이름 20 · 점만에서 시작한다. 웹 정본 TaxCardView.NAME_STEPS · NameBand(구간 예산) ·
      tax-card.css 단계 표 — 앱은 글자 폭을 직접 잴 수 있어(TextPainter) 같은 차례만 따르면 된다.
      + 칩 글자·한 줄(사용자 결정 2026-10-09 칩 기획 L1~L6): 앱 카드 칩은 지금 저장 키 그대로(«상속·증여세»)·Wrap 줄바꿈이다. 앱을 다시 열 때 웹 정본
      SpecialtyShortLabel 표 9종(종소세·법인세·부가세·양도세·상속·증여·기장·세무조사·절세·창업 — 4.5칸 이하, 낭독은 화면 이름)과 한 줄 규칙
      (좁은 칸 촘촘 한 단 v4 여백 8·사이 4 / 프리미엄 여백 6·사이 4 → 그래도 넘치면 뒤 칩부터 통째로 빼기, 대표 칩은 늘 · «+N» 없음)을 옮긴다.
      + 자동 넘김 멈춤(사용자 결정 2026-10-08 B10-1 «화면 밖이거나 터치·스크롤 중이면 멈추기»): «지금 상담» 슬라이드만 화면 밖 · 손가락이 닿아 있는 동안 ·
      누르는 중 · 스크롤 중이면 멈추고, 손 뗀/스크롤 멈춘 뒤 3초 쉬고 간격 3초를 처음부터 센다(웹 정본 ad-slides.js shouldRun·enoughInView,
      뿌리 표시 data-autopause). 앱 `_HomeSlides`(home_screen.dart — `_onlineSection`도 굴린다)는 아직 Ticker로 무조건 3초마다 넘긴다.
      프리미엄 슬라이드는 웹도 그대로라 앱도 그대로다. B8(2열 묶음 가운데)·B9(2열 이름 블록 아래)는 2열(밴드 안폭 ≥ 668) 전용이라 폰 앱에는 해당이 없다. */
#online-now .on-card {
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow .15s ease;
}
/* 마우스 올림·포커스·누름은 파일 끝 «홈 카드 반응 한 벌 — F안»(사용자 결정 2026-10-09 홈 카드 호버 F안 확정 — 옛 C28 «호버 = 그림자만»을 사진 1.04배 + 이름 파랑으로 바꿨다, 그림자는 그대로). */
#online-now .ad-slides { container: onl / inline-size; }
#online-now .ad-slide.wide { grid-template-columns: minmax(0, 1fr); }
/* 2열 구간(밴드 안폭 ≥ 668)만의 배치 두 가지 — 1열(폰·좁은 칸)과 미리보기 둘(온보딩 레일·프로필 편집 — #online-now 밖)은 그대로다.
   · 묶음 가운데(사용자 결정 2026-10-08 B8 «2열 묶음을 밴드 가운데로») — 칸이 상한에서 더 늘지 않으면 남는 폭이 오른쪽에만 쌓인다.
     justify-content: center가 그 폭을 양옆으로 나눈다. (B8 당시에는 열 사이가 12 그대로라 1920 펼침에서 224.8 / 224.8이 남았다 — D-933부터
     남는 폭은 먼저 열 사이로 가고(상한 64), 그 상한을 넘는 몫만 양옆으로 간다: 1920 펼침 199 / 199.) 남는 폭이 0인 화면은 이 규칙이 아무것도 옮기지 않는다. 머리줄(제목·인원·부제)과
     점 내비는 지금처럼 밴드 기준이다 — 이 규칙은 장(.ad-slide) 안의 칸만 옮긴다. 프리미엄 장(.ad-slide-photo)·빠른 상담 허브는 #online-now 밖이다.
   · 이름 블록 아래 붙이기(사용자 결정 2026-10-08 B9 «2열에서만 이름 블록을 아래로 붙여 줄 맞추기») — 한 줄 소개가 없는 카드는 이름 블록이
     칩 아래로 올라온다(T6, tax-card.css 줄 [칩][헤드라인][이름 줄][사무소·지역][1fr]). 2열이면 옆 카드(소개 두 줄)와 이름 줄 y가 72px
     어긋났다(1280 실측). 여기서는 남는 세로(1fr)를 헤드라인과 이름 줄 **사이**로 옮겨 이름 줄·지역 줄을 카드 아래 여백 16 위에 붙인다 —
     줄 [16][칩][헤드라인][1fr][이름 줄][사무소·지역][16]. 칩 줄(위 16)·사진 칸·배지(사진 칸 위 12)는 줄 번호와 무관하게 그대로고,
     카드 높이는 min-height 200 그대로(내용 최대 196 — 칩 30 + 10 · 소개 두 줄 60 + 12 · 이름 28 · 지역 2 + 22 · 위아래 16). 그래서 한 줄에 선
     두 카드의 이름 줄이 소개 줄 수(0·1·2)와 무관하게 같은 y(카드 위에서 132)에 선다. 1열(폰)은 T6 «이름 블록 올리기» 그대로다.
     ⚠ 예외 — 이름이 두 줄인 카드(«세무사 ● …»를 이름 아래 줄로 내린 단계)는 소개 두 줄을 지키느라 그 카드만 이름 둘째 줄(22)만큼 길어진다
       (사용자 결정 2026-10-08 7차 P10 ⓐ «그 카드만 높이 200 → 218» — 소개 두 줄이면 구간별 1280 이상 218 · 1024 210 · 768 206).
       격자 기본값(align-items: stretch)이면 같은 줄 옆 카드까지 그 높이로 늘어 옆 카드의 이름이 132에서 내려갔다(검토 HA-03 · HL-RG-1 —
       1280 실측 150). 아래 align-items: start가 «그 카드만»을 지킨다 — 옆 카드는 200 · 이름 y 132 그대로이고, 같은 줄 두 카드의 아래 끝은
       6/10/18px 들쭉날쭉하다. 이름 두 줄 카드의 첫 줄은 옆 카드 이름보다 위에 선다(이름 블록이 22 높다 — 배포 전부터 있던 차이, 이제 16/12/4px). */
/* 넓은 화면 여백(D-933 · 사용자 승인 2026-10-11 «디자인적으로 더 깔끔한 방안» — D-932의 열 사이 상한 384를 64로).
   카드는 560에서 더 늘지 않는다. 장 묶음 폭(100cqw = .ad-slides, 컨테이너 onl)이 1,132(560 × 2 + 12)를 넘으면 열 사이가 먼저 넓어지되 64에서 멈추고,
   그 뒤 남는 폭은 양쪽 바깥으로 똑같이 나눠 카드 묶음을 가운데에 세운다(B8 justify-content: center). 두 카드가 한 묶음으로 읽히는 폭을 지킨다.
   · 열 사이 = 100cqw − 1,120(두 카드 560 × 2)을 12~64로 묶는다(clamp) — 1,184에서 64.
   · 줄 사이 = 열 사이의 절반을 12~32로 묶는다 — 열 사이 24부터 같이 늘어 1,184에서 32(열 64 : 줄 32).
   · 1,132 이하에서는 둘 다 12 그대로라 1024·1280·1440 펼침 · 1024·1280 접힘은 한 픽셀도 안 움직인다
     (사이드바 있는 웹 기준 — 사이드바 없는 앱 웹뷰 ?app=1은 화면 폭 약 1,225부터 이 규칙을 탄다). 끝값 64·32는 8 배수.
   · 결과(실측, 장 묶음 폭 · 열 사이 · 줄 사이 · 바깥 좌우): 1440 접힘 1,271 · 64 · 32 · 44 / 1680 펼침 1,352 · 64 · 32 · 84 /
     1680 접힘 1,500 · 64 · 32 · 158 / 1920 펼침 1,582 · 64 · 32 · 199 / 1920 접힘 1,730 · 64 · 32 · 273 / 2560 · 64 · 32 · 505~579. */
@container onl (min-width: 668px) {
  #online-now .ad-slide.wide { grid-template-columns: repeat(2, minmax(0, 560px)); }
  #online-now .ad-slide.wide { justify-content: center; }
  #online-now .ad-slide.wide { align-items: start; }
  #online-now .ad-slide.wide { column-gap: clamp(12px, calc(100cqw - 1120px), 64px); }
  #online-now .ad-slide.wide { row-gap: clamp(12px, calc((100cqw - 1120px) / 2), 32px); }
  #online-now .tc-card { grid-template-rows: var(--s-lg) auto auto 1fr auto auto var(--s-lg); }
  #online-now .tc-nm { grid-row: 5; }
  #online-now .tc-meta { grid-row: 6; }
}

/* ══ 프리미엄 세무사 — 사진 중심 세로 카드, 한 장에 5명 (사용자 요청 2026-10-08 «프리미엄 세무사 카드 개편») ══════════════
   카드 = fragments/ad-card :: photoCard(.pmc-*). 옛 9:16 다크 오버레이 카드(D-680 — /fit/more 명부 .fp-*를 빌려 쓰던 것)를 대신한다.
   홈과 광고 신청 미리보기(dashboard-ads-apply.html)가 이 파일과 같은 감싸개(.ad-slides > .ad-slide.ad-slide-photo)로 부른다 — 미리보기 = 실제.
   «지금 상담 가능한 세무사» v4 카드(가로 · 오른쪽 아치 사진 · tax-card.css)와 겹치지 않게 **세로 · 사진 위**다.

   🔴 열 수를 못박는 이유: 슬라이드마다 열이 달라지면 「슬라이드당 5장」이라는 **상품 규격**이 화면마다 달라진다.
      열 수(넓은 화면 5 · ≤1100 3 · ≤560 2)는 옛 카드 그대로다. HomeController.PREMIUM_PER_SLIDE(5)와 **짝**이다.
   ⚠ 폰(≤560)은 위 `.ad-slide`의 «560 이하 한 열»(D-638)을 따르지 않는다 — 두 열 사진 카드가 D-651에서 실측으로 확정된 형태다
     (한 열이면 슬라이드 하나가 카드 다섯 장 높이가 되어 «슬라이드»가 아니게 된다). (0,3,0)은 옛 fit.css 동점 대비가 남은 무게다. */
.ad-slides .ad-slide.ad-slide-photo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) {
  .ad-slides .ad-slide.ad-slide-photo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ad-slides .ad-slide.ad-slide-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 카드 — 흰 판 + 머리카락 테두리(지금 상담 카드 .on-card와 같은 결의 1px 그림자 선). 사진에는 아치·테두리·배지를 얹지 않는다(사용자 요청). */
.pmc-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 0 0 1px var(--border); color: inherit; text-decoration: none;
  transition: box-shadow .15s ease;
  container: pmc / inline-size;   /* 이름 글씨 단계 구간(아래 «프리미엄 이름 단계») — 카드 폭은 격자 칸이 정한다(내용 폭 아님) */
}
.pmc-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 마우스 올림·누름은 파일 끝 «홈 카드 반응 한 벌 — F안»(사용자 결정 2026-10-09 홈 카드 호버 F안 확정). */

/* 사진 — 위쪽 4:5 · 카드 폭 꽉. 🔴 확대 배율은 **서버 설정값 하나**(ImageSpec.PREMIUM_PHOTO_ZOOM — 사용자 결정 2026-10-08 7차 P8 «사진 확대 위쪽 기준
   1.1배 · 설정값 하나(1이면 꺼짐)» · 8차 F11 ①)다. 조각(ad-card.html :: photoCard)이 .pmc-photo에 --pmc-zoom으로 싣고 여기서는 변수만 읽는다 —
   이 파일에 배율 숫자를 적지 않는다(PremiumPhotoZoomContractTest). 변수가 없으면 1(확대 없음). 지금 설정값은 1.0 = 끔(11차 R7 ⓐ, 2026-10-09 —
   사진이 모두 4:5 판이라 자른 그대로 보인다).
   확대는 transform이고 기준점은 **위 끝(50% 0%)**이다. object-position은 app.css 세무사 사진 묶음 한 곳(50% 10% — .pmc-img를 그 목록에 더했다,
   페이지 CSS에 따로 쓰지 않는다 D-869).
   기준점 산식: 9:16 마스터를 4:5 창에 cover + 10%로 담으면 창은 마스터 세로 3.0~73.3%를 보인다(app.css 묶음 주석).
   기준점이 위 끝이면 창 안 y는 y × z가 된다 — 위는 그대로 붙고 확대분은 **아래 양복 쪽을 먹는다**(머리 꼭대기는 배율과 무관하게 잘리지 않는다).
   ⚠ 옛 기준점 50% 30%(«무대 머리 가운데»)는 데모 초상에서 머리 윗부분이 카드 윗변에 잘렸다(검토 UX-02). 같은 값을 프로필 편집 «홈 프리미엄»
     미리보기 칸이 쓴다(profile-edit.html data-zoom = 같은 설정값 · data-zoom-y 0 · photo-crop.js — PhotoCropContractTest가 대조). */
.pmc-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grey100); }
.pmc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
  object-fit: cover; transform: scale(var(--pmc-zoom, 1)); transform-origin: 50% 0%;
}
.pmc-initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-36);
  color: var(--grey500);
}

/* 글 판 — ① 이름 줄 ② 칩 한 줄 ③ 지역 · 평점 ④ 광고 문구 한 줄. 글자는 모두 13px 이상(사용자 요청 «카드 안 글자는 13px보다 작게 만들지 않아요»).
   🔴 같은 행 카드끼리 줄 자리를 맞춘다(사용자 결정 2026-10-08 7차 P4 ⓐ «평점 꺾임은 두고 같은 행 카드끼리 줄 높이 맞추기 — 지역·평점 자르지 않음»):
   격자 칸은 같은 행 카드를 같은 높이로 늘인다(.ad-slide 기본 align-items: stretch). 글 판이 카드 남는 높이를 다 받고(flex 1 0 auto)
   광고 문구 줄이 판 맨 아래에 붙는다(.pmc-copy margin-top: auto). 사진(4:5 · 같은 열 폭)·이름 줄(26 고정)·칩 줄(24 고정)은 늘 같은 높이라
   이름·칩·지역 줄은 같은 y에서 시작하고, 평점이 지역 다음 줄로 꺾인 카드가 그 행을 20px 키우면 이웃 카드의 문구 줄도 같은 만큼 내려와
   문구 줄 y가 같다(빈 자리는 지역 줄과 문구 줄 사이에 남는다 — subgrid로 행 칸을 나눈 것과 같은 그림). 격자 지원과 무관해 모든 웹뷰에서 같다.
   열 수(5/3/2)·카드 폭은 그대로다. */
.pmc-body { display: flex; flex-direction: column; flex: 1 0 auto; gap: 6px; min-width: 0; padding: 12px 12px 14px; }
/* 이름 줄 — 🔴 이름이 «세무사»보다 먼저 잘리지 않는다(검토 UX-07 — 320 칸 115px에서 다섯 글자 이름 «선우하늘빛»이 «선우하…»가 되고
   «세무사»는 온전했다). 이름은 flex: none(제 글자 폭 그대로). «세무사»도 flex: none이라 글자가 반쯤
   잘리지 않고, 남는 폭에 다 안 들어가면 **통째로** 다음 줄로 꺾인다 — 그 둘째 줄은 줄 높이(26 = 이름 행간) 고정 + overflow: hidden이라 보이지
   않는다(글 판 높이 그대로). 화면낭독기는 «이름 세무사»를 그대로 읽는다(overflow는 접근성 이름에서 빼지 않는다). 지금 9명은 모두 세 글자라 변화 0.
   🔴 이름은 늘 온전(사용자 결정 2026-10-08 7차 P8 ④ · D-911 보론 «이름은 짤리거나 말줄임되지 않고 모두 한 줄로», 검토 UX-R-05): 이름이 글 칸보다
   길면 글씨를 단계로 줄인다(18 → 16 → 14 → 13 — 아래 «프리미엄 이름 단계»). 13px로도 넘치는 이름(119보다 좁은 카드 · 아주 긴 이름)만
   max-width 100%에서 말줄임이 남는다. 행간 26은 단계와 무관하게 그대로라 줄 자리(7차 P4)가 같다. */
.pmc-nm {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 0;
  height: var(--lh-title3); min-width: 0; overflow: hidden; white-space: nowrap;
}
.pmc-name {
  flex: none; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
  color: var(--text-primary);
}
.pmc-title {
  flex: none;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--grey700);
}
/* 프리미엄 이름 단계 — 서버 TaxCardView.PREMIUM_NAME_STEPS와 같은 표(번호 · 글씨 토큰 · 자간 곡선 — PremiumCardPlanBTest가 대조):
   1 = 18 title3 · 2 = 16 heading · 3 = 14 label2 · 4 = 13 caption1(하한). 단계는 서버가 글자 폭 산식(한글 0.948em + 자간)으로 카드 폭 구간마다 정해
   클래스로 싣는다(.pmc-nm에 «pmc-nm-N pmc-nm-mN pmc-nm-sN pmc-nm-xN pmc-nm-zN»). 기본 구간(카드 ≥ 200)은 구간 밖 규칙이고, 좁은 구간은 아래
   @container 블록(열린 경계 — 소수 폭 카드도 좁은 쪽 예산 · 겹치는 구간은 뒤 블록이 이긴다 · 구간마다 1~4를 모두 놓아 앞 구간 값이 새지 않는다).
   경계 = TaxCardView.PremiumNameBand(200 · 174 · 159 · 139 · 119 — 구간의 가장 좁은 카드, 예산 = 그 폭 − 24). */
.pmc-nm-1 .pmc-name { font-size: var(--fs-title3); letter-spacing: var(--ls-18); }
.pmc-nm-2 .pmc-name { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
.pmc-nm-3 .pmc-name { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
.pmc-nm-4 .pmc-name { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
@container pmc (width < 200px) {
  .pmc-nm-m1 .pmc-name { font-size: var(--fs-title3); letter-spacing: var(--ls-18); }
  .pmc-nm-m2 .pmc-name { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
  .pmc-nm-m3 .pmc-name { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
  .pmc-nm-m4 .pmc-name { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
}
@container pmc (width < 174px) {
  .pmc-nm-s1 .pmc-name { font-size: var(--fs-title3); letter-spacing: var(--ls-18); }
  .pmc-nm-s2 .pmc-name { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
  .pmc-nm-s3 .pmc-name { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
  .pmc-nm-s4 .pmc-name { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
}
@container pmc (width < 159px) {
  .pmc-nm-x1 .pmc-name { font-size: var(--fs-title3); letter-spacing: var(--ls-18); }
  .pmc-nm-x2 .pmc-name { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
  .pmc-nm-x3 .pmc-name { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
  .pmc-nm-x4 .pmc-name { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
}
@container pmc (width < 139px) {
  .pmc-nm-z1 .pmc-name { font-size: var(--fs-title3); letter-spacing: var(--ls-18); }
  .pmc-nm-z2 .pmc-name { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
  .pmc-nm-z3 .pmc-name { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
  .pmc-nm-z4 .pmc-name { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
}

/* 🔴 칩 줄 — **무조건 한 줄**(사용자 요청 2026-10-08 «칩 줄에 flex-wrap: nowrap과 white-space: nowrap을 걸어요»): 줄에 flex-wrap: nowrap +
   white-space: nowrap · 칩에도 white-space: nowrap(칩 안에서도 줄바꿈 0).
   폭이 모자라면 줄을 바꾸거나 글자를 13px 아래로 줄이지 않고 **뒤 칩부터 숨긴다**(셋째 → 둘째, 대표 칩 하나는 늘) — 실제 렌더 폭으로
   static/js/chip-fit.js가 .chip-fit-off를 단다(무JS면 넘친 칩은 줄 끝에서 잘린다 — overflow: hidden).
   크기 기준: 글자 13px(caption1) · 좌우 여백 7px · 칩 사이 4px. 칩이 없어도 줄 높이(24)를 지켜 카드 글 판의 줄 자리가 같다.
   🔴 좁은 칸 촘촘 한 단(사용자 결정 2026-10-09 칩 기획 L5 ⓐ + 메모 «디자인 기준(좌우 여백 6~8 · 칩 사이 4)보다 작게 하지 말고 여백 6 · 간격 4까지만»):
   카드 < 200(모든 폰 · 600 · 1280 · 광고 신청 미리보기)은 아래 @container 블록이 좌우 여백 6으로 줄인다(칩 사이 4 그대로). 같은 칸 폭이면 모든
   카드가 같은 치수 — 글자 크기는 13px 그대로. 칩 글자는 4.5칸 이하 표(SpecialtyShortLabel).
   첫 칩(대표 분야)은 채운 칩(#1B64DA 바탕 · 흰 글자), 둘째·셋째는 연한 칩 — 글자 굵기는 600(v4 칩과 같은 굵기).
   position: relative = 숨긴 칩(아래 .chip-fit-off, absolute 1px)의 기준 상자 — 줄의 overflow: hidden 안에 갇혀 가로 넘침에 들지 않는다. */
.pmc-chips { position: relative; display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 4px; height: 24px; min-width: 0; overflow: hidden; }
.pmc-chip {
  flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: 6px;
  white-space: nowrap; background: var(--primary-light); color: var(--primary-pressed);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
}
.pmc-chip-fill { background: var(--primary-pressed); color: var(--surface); }
/* 좁은 칸 촘촘 한 단 — 이름 단계와 같은 카드 폭 경계(< 200, TaxCardView.PremiumNameBand). 기본 칩 규칙보다 뒤에 둬야 이긴다(위 이름 단계 블록 안에 두면 진다). */
@container pmc (width < 200px) {
  .pmc-chip { padding: 0 6px; }
}
/* 줄에 못 든 칩 — 🔴 눈에서만 숨긴다(시각 숨김 — .sr-only와 같은 결). hidden(display: none)은 칩의 원래 이름까지 접근성 트리에서 빼
   폭마다 링크 낭독이 달라졌다(검토 UX-04 · design.md §9 «시각에서 라벨을 걷어냈다면 접근성 이름은 남긴다»). absolute라 flex 줄의 칸·사이(gap)에
   들지 않는다. v4 «지금 상담» 카드(tax-card.css .tc-chips — 넘친 칩을 줄 밖으로 잘라도 낭독은 남음)와 같은 낭독이다. */
[data-chip-fit] > .chip-fit-off {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 지역 14px + 평점(후기가 있을 때만 «★ 4.7 (3)», 별 = 평점 별 노랑 --rating-star — 사용자 요청 2026-10-08 «리뷰 별은 노란색», D-915 · 옛 grey900 #191F28.
   숫자 «4.7»은 text-primary 600 · «(3)»은 grey700 그대로). 한 줄에 모자라면 평점이 다음 줄로 내려간다(지역은 자르지 않는 쪽 —
   지역 하나만으로도 넘치는 드문 경우만 말줄임). 사무소는 그리지 않는다(D-723). */
.pmc-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--text-secondary);
}
.pmc-region { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-rt { flex: none; white-space: nowrap; color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pmc-star { color: var(--rating-star); }   /* 평점 별 노랑(사용자 요청 2026-10-08 · D-915) */
.pmc-rc { font-weight: var(--fw-regular); color: var(--grey700); }

/* 광고 문구 한 줄(D-124) — 넘치면 말줄임(nowrap + ellipsis · «…» 한 글자는 브라우저가 찍는다). 문구가 없으면 같은 자리의 빈 판이 줄 높이를 지킨다.
   margin-top: auto = 판 맨 아래(같은 행 카드끼리 문구 줄 y를 맞춤 — 위 .pmc-body 주석, 7차 P4).
   글자색은 한 단 흐린 grey600 #6B7684(사용자 결정 2026-10-08 7차 P5 ⓐ «광고 문구만 #6B7684로 한 단 흐리게» — 지역 줄은 text-secondary 그대로.
   흰 바탕 4.62:1 · 14px AA 통과). 사실(지역)과 광고주가 산 문구(D-124)가 같은 결로 붙어 읽히지 않게. */
.pmc-copy {
  display: block; min-height: var(--lh-label2); margin-top: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--grey600);
}


/* ══ D-home-345 · 지금 상담 가능 = 라이브 밴드 ═══════════════════════════════════
   프리미엄(사진 갤러리)과 시각 언어를 가른다. 연녹 밴드 · 펄스 · 인원 칩(카드는 세무사 카드 v4 — 옛 원형 112 아바타는
   사용자 결정 2026-10-07 범위 변경으로 아치 사진이 됐다, 위 «지금 상담 가능한 세무사» 카드 블록). */
#online-now.online-live .online-live-band {
  background: linear-gradient(180deg, #F3FBF6 0%, #FFFFFF 78%);
  border: 1px solid #D8F0E2;
  border-radius: var(--r-xl);
  padding: 16px 16px 18px;
}
#online-now.online-live .online-live-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 14px;
}
#online-now.online-live .online-live-head h2 { margin: 0; }
#online-now.online-live .online-pulse {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
  animation: online-pulse 1.6s ease-out infinite;
}
@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #online-now.online-live .online-pulse { animation: none; }
}
#online-now.online-live .online-count {
  flex: none; font-size: var(--fs-caption2); font-weight: var(--fw-medium); line-height: var(--lh-caption2); letter-spacing: var(--ls-12);   /* caption2: 인원 배지(옛 12/700/1.2 · 아래 13 상향도 접었다) */
  color: #15803D; background: #DCFCE7; padding: 4px 10px; border-radius: 999px;
}
#online-now.online-live .online-live-head .sub {
  margin-left: auto; text-align: right; font-size: var(--fs-body2); line-height: var(--lh-body2); letter-spacing: var(--ls-14); color: var(--text-secondary);   /* body2: 설명 문장(옛 13 → 아래 14 상향을 한 토큰으로) */
}
/* 타이포 점검 2026-10-03 F8 — 폰(≤767)에서는 부제가 제목 줄에 못 서고 둘째 줄로 접히는데, 우측 정렬이 남아 «떨어진 한 조각»으로
   읽혔다. 접히는 폭에서는 제 줄 전체를 쓰고 왼쪽(제목과 같은 시작선)에 선다. ≥768은 D-723 그대로(제목 줄 우측 끝). */
@media (max-width: 767px) {
  #online-now.online-live .online-live-head .sub { flex-basis: 100%; margin-left: 0; text-align: left; }
}
/* 인원 칩 + AD 한 묶음(3차 리뷰 RB3-06·RB3UX-04) — 묶음은 줄지 않고(flex: none) 통째로 꺾인다. 간격은 머리줄 열 간격(10)과 같다.
   폰 밴드 번짐(아래 ≤560 규칙) 뒤 안폭 = 화면 − 32라 375~393에서 «펄스 + 제목 + 인원»까지만 첫 줄에 들고 AD(19 + 간격 10)만 혼자 둘째 줄로
   떨어졌다(390 실측 3.6px 모자람). 묶으면 인원 칩과 AD가 함께 둘째 줄로 내려가 AD가 늘 인원 칩 옆에 선다(섹션 제목 옆 1회 표시, D-226·D-453).
   정렬은 머리줄과 같은 center — .sec-ad-mark에는 align-self를 주지 않는다(위 마커 규칙). */
#online-now.online-live .online-tags { flex: none; display: inline-flex; align-items: center; gap: 10px; }
#online-now.online-live .online-count { padding: 5px 12px; }   /* 13px 상향은 caption2(12)로 접었다 — 배지 최소 크기 토큰 하나(C3 묶음 1). .sub 14px 상향은 위 body2 토큰이 든다. */
#online-now.online-live .online-live-band { padding: 18px 18px 20px; }
/* 폰(≤560) — 밴드가 화면 끝까지 번진다(사용자 지시 2026-10-07 «폰 390px 필수 수정: 섹션 상자의 좌우 여백을 줄이거나 카드를 화면 폭 가득»).
   좌우 테두리·둥근 모서리를 걷고 본문 여백 16을 밴드 안쪽 여백이 대신 진다(후기·상황 밴드와 같은 margin-inline −16px 번짐 — 셸 본문 여백이
   ≤768에서 16px 고정이라 성립한다). 카드 = 화면 폭 − 32: 390 → 358(글 칸 200, 기본 구간) · 360 → 328(글 칸 180, 좁은 카드 구간 = TaxCardView.NARROW_CARD).
   예전에는 카드가 테두리 + 안쪽 여백 18 상자 안에 들어가 390에서 320(글 칸 172)이었다. 머리줄(제목·인원·AD·부제)은 본문 글과 같은 16에서 시작한다.
   앱 웹뷰(?app=1)도 같다 — 홈 본문 상자가 셸이 걷은 여백 16을 다시 들기 때문이다(바로 아래 «앱 웹뷰 홈 본문 여백»). */
@media (max-width: 560px) {
  #online-now.online-live .online-live-band {
    margin-inline: -16px; padding-inline: 16px; border-inline: 0; border-radius: 0;
  }
}
/* ══ 앱 웹뷰(?app=1) 홈 본문 여백 — 일반 웹과 같은 좌우 여백(사용자 결정 2026-10-08 «4-5번은 권장안대로 진행해줘 화면이 깔끔하게 보여지도록») ══
   웹뷰는 셸이 본문 좌우 여백을 0으로 걷는다(shell.css `.app-embed .main` — 판정은 서버 GlobalModelAdvice.appEmbed 한 곳, body.app-embed;
   다른 임베드 지면은 지면이 제 여백을 든다 — pro-briefs.css `.app-embed .pr-page` 같은 관례). 홈은 제 여백이 없어 배너·프리미엄·Q&A·세무시선 글이
   화면 끝(x 0)에 붙었고, 밴드 셋(«지금 상담»·상황·후기)만 안쪽 여백 16에서 시작해 왼쪽 끝선이 0과 16으로 갈렸다. 561~768에서는 «지금 상담»
   상자(테두리·둥근 모서리 — 번짐은 ≤560만)의 테두리가 화면 끝에 닿았다(라이브 검수 2026-10-08, 사용자 검수 ① 뒤).
   ⇒ 홈 본문 상자(index.html의 콘텐츠 조각 .home-page)가 셸이 걷은 여백을 그대로 든다 — 폰(≤768) 16 · 그 위 --shell-pad(일반 웹 .main과 같은 값).
     그러면 밴드 셋의 번짐(음수 여백 — 셸 여백을 되돌리는 장치)이 일반 웹과 똑같이 맞물려 바탕은 화면 끝까지, 카드 = 화면 − 32(360 → 328 · 390 → 358),
     «전체 보기» 히트의 오른쪽 −6도 여백 안에 든다(검수 ①에서 끈 웹뷰 전용 끔 셋 — 밴드 둘 · «지금 상담» ≤560 · «전체 보기» — 은 걷었다).
   ⚠ 이 규칙은 .home-page 안만 — 다른 화면(다른 임베드 지면 · 빠른 상담 허브 hub.css `.app-embed .hub-tiles` 등)은 그 클래스가 없어 한 픽셀도 안 움직인다.
     폰 16은 셸 폰 규칙(shell.css ≤768 .main)과 같은 값이어야 한다 — 밴드 번짐 −16이 그 값을 되돌린다(HomeOnlineSectionTest가 대조). */
.app-embed .home-page { padding-inline: var(--shell-pad); }
@media (max-width: 768px) {
  .app-embed .home-page { padding-inline: 16px; }
}
/* 🔴 웹뷰(?app=1) 769px 이상 홈 왼쪽 사이드바 빈 띠(사용자 결정 2026-10-08 7차 P11 ⓐ «안 B 배포에 함께 넣어 고치기(일반 웹 변화 없음)»).
   셸은 웹뷰에서 사이드바를 display: none으로 접지만 본문 왼쪽 여백(`.main` margin-left = --sidebar-w 216 · 레일이면 `html.rail .main` --rail-w 68)이
   ≥769에서 그대로 남아 홈 왼쪽이 빈 띠가 됐다(≤768은 셸 폰 규칙이 이미 0). 이 홈 본문(.main 바로 아래 .home-page)일 때만 걷는다 —
   질문지 P11이 보인 범위(홈)다. 셸 공용 규칙(shell.css .app-embed .main)과 다른 웹뷰 지면(/qna 등 — 제 좌우 여백이 없어 걷으면 글이
   화면 끝 x 0에 붙는다, 검토 UX-R-01)은 그대로이고, 지도는 제 규칙(content.css .app-embed .main:has(.map-layout))이 따로 걷는다.
   home.css는 광고 신청 미리보기·빠른 상담·관리자 화면도 싣지만 .home-page가 없어 한 픽셀도 안 움직인다.
   구체성: (0,3,0)이 `.main`(0,1,0)·`html.rail .main`(0,2,1)을 이긴다(!important 없음). :has를 모르는 옛 웹뷰는 빈 띠가 남을 뿐이다(라이브와 같음). */
.app-embed .main:has(> .home-page) { margin-left: 0; }


/* D-home-qna — 채택 한 마디 판은 홈에서 은퇴(상세로 미룸). */
.qna-home-say { display: none; }

/* ══ 타이포 점검 2026-10-03 — 줄바꿈(F6) · 고정폭 숫자(F7) ══════════════════════════════════════
   근거: docs/requests/2026-10-03-typography-review/review_fixes.md §1·§2(사용자 승인 목록 F2~F9·F11~F13·F15).
   F6 — 제목은 balance(줄 길이를 고르게 — 끝 줄에 «이유»·«왔어요»·«하나요» 한두 글자만 남지 않게), 본문은 pretty(마지막 줄 고아만 막는다).
     ⚠ 줄 «수»는 바꾸지 않는다(balance는 같은 줄 수 안에서만 고른다) — 2줄 클램프·2줄 예약(.qna-home-title·.situ-head)의 산술은 그대로다.
     🔴 .sec-head h2는 **롱핸드 text-wrap-style**로만 건다: 그 규칙의 white-space: nowrap(한 줄 계약)은 text-wrap-mode를 쥐는데,
        같은 특이성의 뒤 규칙에서 단축형 `text-wrap: balance`를 쓰면 mode가 wrap으로 덮여 섹션 제목이 줄을 바꾼다(dev 실측으로 잡음).
        nowrap인 동안 balance는 효과가 없다 — 제목류 규칙을 한 벌로 두려고 함께 둘 뿐이다. 나머지 대상은 nowrap이 없어 단축형이다.
     세무시선 히어로 제목(.sisun-hero-title)은 sisun-card.css, 명부 근거 줄(.fp-why — /fit·/fit/more)은 fit.css에 같은 값이 있다.
   F7 — 수가 바뀌는 자리(카운터·별점·후기 수·「외 N명」)는 tabular-nums: 라운드 서체는 «1» 458 · «0» 713 단위라 비례 숫자면 자릿수가
     바뀔 때 줄이 흔들린다. 서체에 tnum이 들어 있다(D-890). .bnr-count는 이미 걸려 있다(위). .fp-rv는 fit.css, .sisun-hero-date는 sisun-card.css. */
.qna-home-title, .situ-head, .mainc-title, .review-title { text-wrap: balance; }
.sec-head h2 { text-wrap-style: balance; }
.qna-home-body, .cur-brief-lead, .mainc-desc { text-wrap: pretty; }
.online-count, .mainc-live, .qna-home-oe { font-variant-numeric: tabular-nums; }   /* «지금 상담» 카드 배지 숫자는 tax-card.css .tc-badge */

/* ══ 홈 카드 반응 한 벌 — F안 «토스 응용» · 프리미엄 · 지금 상담 · 고민별 배너 (사용자 결정 2026-10-09 홈 카드 호버 F안 확정) ══════════════
   참고: 토스 TDS PC 사진 카드(.p-cardV2 — hover 사진만 확대, 누름·포커스 사진 테두리 1.5px #1b64da) + toss.tech 글 카드(hover 제목 #3182f6).
   셈톡 규칙으로 옮긴 값:
   · 마우스(정밀 포인터)에서만 — 사진 1.04배(기준점 50% 10% · .3s 감속) · 이름 #3182F6(전환 없이). 그림자·바탕·테두리는 바꾸지 않는다.
   · 누름 — 사진 틀 안쪽 1.5px #1B64DA(사진 위 층 ::after — 사진에 가려지지 않게) · 사진 1.02배 · 이름 #1B64DA.
   · 포커스 — 2px #3182F6 링(카드마다 원래 자리) + 이름 #3182F6.
   · 움직임 줄이기 — 확대·전환 없이 색만(이름 색 · 누름 테두리는 움직임이 아니라 남는다).
   · 고민별 배너는 사진 대신 그림 타일(.situ-tile)과 제목(.situ-head)에 같은 문법. 광고 표시(섹션 AD · 광고 문구)는 어떤 상태에서도 그대로.
   · «지금 상담» 카드의 «● 접속 중» 점은 카드 v4 그대로다.
   ⚠ 프리미엄 사진의 평소 기준점은 위 끝(50% 0% — 확대 설정값 ImageSpec.PREMIUM_PHOTO_ZOOM 규칙, PremiumPhotoZoomContractTest)이다. 50% 10%는
     마우스·누름 상태에서만 건다 — 설정값이 1(지금)이면 기준점이 바뀌어도 그림이 움직이지 않는다. */
.pmc-img, .tc-photo, .situ-tile img { transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.tc-photo, .situ-tile img { transform-origin: 50% 10%; }
.situ-tile { position: relative; }
.pmc-photo::after, .tc-arch::after, .situ-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--primary-pressed); opacity: 0;
}
.situ-card:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }   /* 레일(overflow-x: auto)이 바깥 링을 잘라 안쪽에 그린다 */
.pmc-card:focus-visible .pmc-name, #online-now .on-card:focus-visible .tc-name, .situ-card:focus-visible .situ-head { color: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .pmc-card:hover .pmc-img { transform: scale(calc(var(--pmc-zoom, 1) * 1.04)); transform-origin: 50% 10%; }
  #online-now .on-card:hover .tc-photo, .situ-card:hover .situ-tile img { transform: scale(1.04); }
  .pmc-card:hover .pmc-name, #online-now .on-card:hover .tc-name, .situ-card:hover .situ-head { color: var(--primary); }
}
.pmc-card:active .pmc-photo::after, #online-now .on-card:active .tc-arch::after, .situ-card:active .situ-tile::after { opacity: 1; }
.pmc-card:active .pmc-img { transform: scale(calc(var(--pmc-zoom, 1) * 1.02)); transform-origin: 50% 10%; }
#online-now .on-card:active .tc-photo, .situ-card:active .situ-tile img { transform: scale(1.02); }
.pmc-card:active .pmc-name, #online-now .on-card:active .tc-name, .situ-card:active .situ-head { color: var(--primary-pressed); }
@media (prefers-reduced-motion: reduce) {
  .pmc-img, .tc-photo, .situ-tile img { transition: none; }
  .pmc-card:hover .pmc-img, .pmc-card:active .pmc-img { transform: scale(var(--pmc-zoom, 1)); transform-origin: 50% 0%; }
  #online-now .on-card:hover .tc-photo, #online-now .on-card:active .tc-photo,
  .situ-card:hover .situ-tile img, .situ-card:active .situ-tile img { transform: none; }
}