/* ══ 맞춤 세무사 — 시안 K «자정의 명부» (D-605) ═══════════════════════════
   서비스 전체에서 이 지면의 본문 카드 한 장만 어둡다 — design.md 1절의 명시 예외.
   잉크 = grey900(#191F28) 재사용, 다크 위 글자는 기존 회색 눈금을 «글자색으로 뒤집어» 쓴다
   (새 회색 금지). 괘선은 흰색 알파. 유채색은 파랑 눈썹·링크(#4593FC — 다크 위 가독 톤,
   --presence-busy와 같은 값)와 초록 로그인 점뿐. CTA는 흰 아웃라인 필 — 파랑 버튼이 없는
   지면이라는 사실이 이 세계의 절제다.

   지면 문법(D-602·D-603 불변): 카드 토큰 7 이하 · 기준 눈썹이 이름보다 먼저 · 근거는
   사실·숫자만 · CTA 카드당 1 · «다른 세무사 더 보기» 최하단 1회 · 고지 대비 3:1 이상.
   D-603 리뷰가 못박은 것들(히트 타깃·말줄임 블록화·클릭 층)도 그대로 계승한다. */

.fit-blue { color: #4593FC; }

/* ── 잉크 카드 — 지면의 무대. 셸은 라이트 그대로, 이 카드만 어둡다. ──
   🔴 그림자는 장식이 아니라 «깊이 신호»다(D-621). 흰 셸과 잉크의 경계 대비는 16.56:1로 이
      시스템 최대 단차인데, 깊이 신호가 없으면 눈이 «얹힌 물체»가 아니라 «뚫린 창»으로 읽는다 —
      배경 범위를 넓혀야 하나 싶었던 어색함의 실제 원인이 이것이었다. 값은 사다리 실측으로 골랐다
      (12px/14% 는 안 보이고, 26px/30% 는 과했다 — 18px/22% 가 물체로 읽히는 최소치).
   ⚠ 폭 800은 design.md §6의 «데스크톱 본문 약 690» 기준을 넘긴 지면 한정 값이다(D-621) —
      1920에서 좌우 흰 여백을 465px에서 390px로 줄여 «흰 벌판» 체감을 범위 확대 없이 던다. */
.fit-ink {
  /* 🔴 **이 지면에 하나뿐인 치수 상수** — 카드 «열 폭»이다.
        D-626에서는 이 자리가 «사진의 키 예산»이었다. 9대16으로 바꾸면(D-632, 사용자 지시)
        키가 폭에서 나오므로 자유 변수가 폭으로 옮겨간다 — 같은 «상수 하나에서 파생» 규율은
        그대로다: 카드 폭도, 사진 키도, 격자 열 수도 여기서 나온다.
     ⚠ **D-626이 이 예산으로 지키던 것을 이제 못 지킨다.** 그때 360이던 근거는 「CTA 바닥 =
        403 + 예산 = 766px으로 1440×900 노트북 첫 화면 안」이었다. 9대16이면 사진 키가 630px이라
        CTA가 접힘 아래로 간다(실측은 D-632 원장에). 사용자가 «높이를 늘려 달라»고 지시했고,
        아래로 28명이 이어지는 지면이라 스크롤이 전제가 됐다 — 되돌리려거든 그 두 사실을 먼저 보라. */
  --fp-col: 360px;
  /* 🔴 타이포 사다리의 자다(D-626). 뷰포트 질의로는 못 잰다 — 같은 1440에서도 사이드바가
        펼쳐지면 본문 1161, 접히면 1309라 열 폭이 달라진다. 재야 하는 것은 «카드 폭»이다.
     ⚠ .fp-ov·.fp-presence의 절대위치 기준은 .fp-photo(position:relative)라 여기서 안 바뀐다. */
  container-type: inline-size; container-name: fitink;
  /* 🔴 폭 상한 800px 폐기(D-626). D-154가 사용자 지시로 본문 폭 상한을 없앴고 D-363이
        --page-max(1560px)를 정본으로 세웠는데, 이 지면(D-605)만 그 뒤에 690→800 고정값을
        따로 들였다 — 1920 화면에서 본문의 49.4%, 2560에서 35.8%만 썼다(실측).
     ⚠ 그렇다고 --page-max를 그대로 쓰지는 못한다. 상한을 정하는 것은 «자산»이다:
        ImageSpec.PROFILE은 「1:1 정사각형 · 800 × 800px 이상」이고 서버 리사이즈가 없다
        (StorageRepository.uploadTaxPhoto는 받은 바이트를 그대로 올린다). 규격 최소치 800px을
        2배 화면에서 확대 없이 그리려면 열은 400px 이하여야 하고,
        400×3 + 간격 18×2 + 안여백 32×2 = **1300px**이 그 역산값이다.
        --page-max(1560)면 열 487px → 974 소자px → 규격대로 올린 사진이 22% 확대된다.
     tokens.css 예외 목록 ⑨에 같은 이유를 적어 두었다. 초상 규격을 올리면 이 값도 같이 올린다. */
  /* 🔴 폭 상수를 쓰지 않는다 — 열 폭에서 파생한다. 360×3 + 간격 18×2 + 안여백 32×2 = 1180px.
        «고아 숫자»가 구조적으로 생길 수 없고, 열 폭을 바꾸면 지면 폭이 따라온다. */
  max-width: calc(3 * var(--fp-col) + 2 * 18px + 2 * 32px); margin: 16px auto 0;
  box-shadow: 0 2px 6px rgba(17, 31, 40, .10), 0 18px 44px rgba(17, 31, 40, .22);
  background: var(--grey900); border-radius: var(--r-xl);
  color: var(--grey200); padding: 30px 32px 22px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ── 머리: 명부의 표제 ── */
.fit-brandrow { display: flex; justify-content: space-between; align-items: baseline; }
.fit-brand { font-size: 12.5px; font-weight: 500; letter-spacing: .22em; color: var(--grey500); }
.fit-asof { font-size: 12.5px; color: var(--grey600); font-variant-numeric: tabular-nums; }
.fit-q {
  margin: 16px 0 0; font-size: 32px; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.45; color: #fff; word-break: keep-all; overflow-wrap: anywhere;
}
.fit-sub { margin-top: 7px; font-size: 15px; color: var(--grey500); }

/* ── 조건 줄 — 두 여닫이가 한 행에(D-637) ──
   왼쪽: 다른 상담노트로 보기 · 오른쪽 끝: 어떻게 골랐는지 보기.
   ⚠ `align-items: flex-start` — 한쪽이 열려도 다른 쪽 요약 줄은 제자리에 남는다.
   ⚠ 실측: 닫힌 두 요약이 약 330 + 150px이라 잉크 안폭 1116에서 한 줄에 든다. 「어떻게
     골랐는지」를 펴면 설명이 600px(읽기 폭)까지 넓어져 330 + 600 + 24 = 954로 여전히 한 줄이다.
     둘 다 펴면 좁은 화면에서 두 켜로 접힌다 — 그게 wrap을 남겨 둔 이유다. */
/* «잠깐 보는 노트» 안내 한 줄(D-670) — 원장과 다른 노트를 ?note= 로 볼 때만 선다.
   버튼은 링크 톤(#4593FC, .fit-pick-a와 같은 값) — 이 줄의 주인공은 카드이지 이 문이 아니다. */
.fit-setcur {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 14px; font-size: 14px; color: var(--grey400);
}
.fit-setcur button {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px;
  color: #4593FC; cursor: pointer;
}
.fit-setcur button:focus-visible { outline: 2px solid #4593FC; outline-offset: 3px; border-radius: 4px; }

.fit-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 0 24px;
}
.fit-topbar > .fit-pick { flex: 1 1 auto; min-width: 0; }
.fit-topbar > .fit-how { flex: 0 1 auto; margin-left: auto; margin-top: 14px; }

/* 상담노트·조건 전환(D-624) — 닫힌 요약 줄이 «지금 무엇을 보고 있는지»를 늘 말한다.
   사진이 무대인 시안 가5에서 전폭 셀렉트 셋을 상시 노출하면 무대가 폼에 먹힌다. */
.fit-pick { margin-top: 14px; }
.fit-pick > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  width: fit-content; padding: 7px 0; cursor: pointer; list-style: none;
}
.fit-pick > summary::-webkit-details-marker { display: none; }
.fit-pick-a { font-size: 14.5px; color: #4593FC; }
.fit-pick-a::after { content: " ▾"; }                 /* 상태 기호가 아니라 폼 여닫이 표시다 */
.fit-pick[open] .fit-pick-a::after { content: " ▴"; }
.fit-pick-now { font-size: 14px; color: var(--grey500); }
.fit-pick[open] .fit-pick-now { display: none; }      /* 펼치면 셀렉트가 같은 말을 한다 */

/* 조건 폼 — 어두운 지면의 투명 셀렉트. JS 없이 성립(진짜 GET 폼). */
.fit-cond { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; margin-bottom: 4px; }
.fit-cond select {
  font-size: 15px; color: var(--grey300);
  background: var(--grey900);   /* 펼침 목록 배경까지 어둡게 — 투명이면 OS가 흰 목록을 편다 */
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  padding: 10px 10px; max-width: 100%;
}
/* 상담노트 «이름»이 담기는 칸이라 한 눈금 크다(D-637, 사용자 지시) — 표제의 인용과 같은 값을
   말하는 자리이므로 다른 셀렉트보다 커야 짝이 읽힌다. */
.fit-cond .fit-note-sel { flex: 1 1 100%; min-width: 0; font-size: 16px; }
.fit-cond button {
  font-size: 15px; font-weight: 500; color: var(--grey300);
  background: rgba(255, 255, 255, .08); border: 0; border-radius: 8px;
  padding: 10px 16px; cursor: pointer;
}

/* «어떻게 골랐는지» — <details> 점진 보강 없이 성립. */
.fit-how { margin-top: 8px; }
.fit-how summary { font-size: 14.5px; color: #4593FC; cursor: pointer; width: fit-content; padding: 8px 0; }
.fit-how-body { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 10px; }
.fit-how-body dt { font-size: 14.5px; font-weight: 500; color: var(--grey200); margin-top: 8px; }
/* 🔴 읽기 폭은 --reading-max(760px)가 «아니다»(D-626 실측). 그 토큰은 본문 15~16px 기준값이라
      12.5px 설명글에 걸면 한 줄이 70자다 — tokens.css가 못박은 45~55자의 1.3배다.
      12.5px에서 45~55자는 480~590px 구간이고 560px이 그 가운데다.
   ⚠ 캡이 없으면 카드가 넓어질수록 한 줄이 길어진다(1116px 폭에서 실측 127자). */
.fit-how-body dd { font-size: 14px; color: var(--grey500); margin: 2px 0 0; line-height: 1.6;
  max-width: 600px; }

/* ── 카드 3열 — 사진이 어둠에 용해된다 ── */
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.fp-card { display: flex; flex-direction: column; min-width: 0; }
/* 🔴 D-644(사용자 지시, 시안 1 «곁이름»): 눈썹이 «이름 위 제 줄»에서 «이름 행 우측 끝»으로
   옮겨 갔고 18 → 26px이 됐다(넓은 열 19 → 27, +42%).
   ⚠ D-642에서 이미 15→18px·자간·굵기를 한 번 손댄 자리다. 그런데도 작다는 지적이 다시 온 것은
      «한 단 더»로는 안 되고 **자리**를 바꿔야 했다는 뜻이다 — 이름 위 제 줄에서는 29px 이름에
      눌려 무엇을 해도 부수적으로 읽혔다. 오른쪽 끝은 그 눌림에서 벗어난 자리다.
   ⚠ 자간을 또 옮긴다(.06em → −.01em). 26px에서 .06em은 1.56px이라 「거리 · 리뷰」가 다시
      흩어진다 — 자간은 «절대 px»으로 눈에 들어오므로 크기를 올릴 때마다 다시 잡아야 한다.
   ⚠ 27px에서 멈춘 근거: 23/25/27/29를 나란히 렌더해 골랐다(design.md §2 SHOULD). 29px은
      이름 31px과 1.07배라 「이름이 둘」로 읽히기 시작했다. 27px이면 1.15배로 단이 남는다. */
.fp-kicker { font-size: 26px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.35; color: #4593FC; }

/* 사진 — 하단이 지면과 같은 잉크로 녹는다(경계 소멸). 카드 전체가 프로필로 가는 진짜 <a>. */
.fp-photo {
  /* 🔴 **9대16이다**(D-632, 사용자 지시) — 위 세 장도 아래 명부와 같은 비율이 됐다.
     D-626은 여기에 «키 예산»(max-height)을 걸었다. 그 이유는 3열 4대5 격자에서 폭과 높이가
     용접돼 있어 카드를 넓히면 세 CTA가 접힘 아래로 나가기 때문이었다(H = 418 + 1.25×열).
     9대16은 그 결합을 더 세게 만든다(H = 418 + 1.78×열) — 곧 «CTA를 첫 화면에» 는 포기한
     선택이다. 대신 얻은 것: 사진이 사람으로 읽히고, 위아래 두 격자의 비율이 같아진다.
     ⚠ 해상도 대가: 열 354px의 9대16은 630px이고 2배 화면에서 1,260 소자px다. ImageSpec.PROFILE의
        권장 최소치 800px로는 부족하다 — 시드(800×1000) 기준 26% 확대다. 진짜 해법은 규격을
        올리는 것이고(D-626이 이미 지목), 그때까지는 큰 사진을 올린 세무사만 선명하다. */
  position: relative; display: block; aspect-ratio: 9 / 16; margin-top: 9px;
  border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .04);
}
.fp-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;   /* 얼굴은 위쪽에 있다(프로필 헤로와 동일) */
  /* ⚠ 옛 값은 saturate(.82) brightness(.96) — 잉크 세계의 «가라앉은» 톤을 위한 것이었는데,
     9대16으로 사진이 커진 뒤로는 어두운 정장이 배경과 붙어 사람이 안 보였다(D-640).
     한 눈금씩 되돌린다. 완전히 원본으로 두지 않는 이유는 이 지면이 여전히 잉크판이라
     원색 사진이 혼자 튀기 때문이다. */
  display: block; filter: saturate(.9) brightness(1.04);
}
.fp-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 정보가 사진 위에 앉으므로(시안 가5) 그라디언트는 아래에서 위로 깔린다.
     🔴 백분율이 아니라 **절대 px**이다(D-626) — 오버레이(눈썹·이름·사무소·근거)는 비율이
        어떻든 같은 높이를 쓰는데, 백분율로 두면 상자가 높아질수록 글자가 옅은 구간으로
        올라가 대비가 무너진다.
     🔴 **글자가 딛는 만큼만 덮는다**(D-640, 사용자 지적: 「배경색상으로 프로필사진이 너무
        안 보인다」). 9대16이 되면서 상자가 629px로 커졌는데 그라디언트는 옛 값 그대로라
        사진의 **40%**를 덮고 있었다 — 정작 글자는 124px(실측)뿐이다. 실측 높이에 맞춰
        128 / 205로 줄여 덮는 몫이 33%가 됐다. .92 지점부터는 사실상 잉크라 그 위 글자의
        대비는 잉크 위와 같다(D-621 실측 8.26/5.45/5.39) — 줄인 것은 «사진을 가리던 여분»이다.
     ⚠ 더 줄이려거든 오버레이 실측 높이(무대 124 · 명부 76)를 먼저 재라. */
  /* ⚠ 값은 오버레이 «실측»에서 나온다(D-640의 교훈). 글자를 키운 D-641에서 오버레이가
     124→136px이 됐고, `.fp-ov { bottom: 12px }`이라 글자는 바닥에서 148px까지 올라간다 —
     D-642에서 눈썹을 18px으로 키우자 오버레이가 140px이 되어 글자가 바닥에서 152px까지
     올라갔다 — .92 지점과 «정확히» 겹쳤다. 여유를 두려고 158로 올렸다(램프 158→220, 덮음 35%).
     글자 크기를 또 바꾸거든 이 두 수를 «먼저» 다시 재라. */
  /* D-644 재측정: 눈썹이 이름 행으로 들어가며 제 줄(28.5) + `.fp-nm`의 margin-top(4)이 함께
     사라져 오버레이가 140 → **107.5px**이다(46.5 + 2 + 27 + 5 + 27). bottom 12를 더해 글자
     꼭대기는 119.5px. 다만 기준선은 «근거 2줄»이다 — 노트 상태의 특화 축에서 상시 일어난다
     (18px에서 약 355px > 안폭 325.5px). 그때 107.5 + 27 = 134.5 → 꼭대기 146.5px이고,
     현행과 같은 여유 6.5px을 주면 .92 = **153**, 램프 폭 62px을 보존해 **215**.
     덮는 몫 220/628.5 = 35.0% → 215/628.5 = **34.2%**(D-640의 35% 상한 아래). */
  background: linear-gradient(to top, var(--grey900) 0, rgba(25, 31, 40, .92) 153px, rgba(25, 31, 40, 0) 215px);
}
/* 사진 없는 세무사 — 잉크 위 무채 이니셜(시안 K 확정: 파랑 그라디언트 대체는 이 세계에 안 맞다). */
.fp-img-empty {
  display: grid; place-items: center; font-size: 58px; font-weight: 500;
  color: var(--grey600); background: rgba(255, 255, 255, .05); filter: none;
}
.fp-presence {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: rgba(25, 31, 40, .72); border-radius: var(--r-full);
  padding: 4px 11px; font-size: 12.5px; font-weight: 500; color: var(--grey300);
}

/* ── 오버레이(시안 가5 «무대», D-624) — 눈썹·이름·사무소·근거가 사진 하단을 딛고 선다.
      «사진 밑에 글이 따라붙는» 명함이 아니라 «인물이 무대에 서 있는» 화면이 된다. ── */
.fp-ov { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.fp-nm { display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
  font-size: 29px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.fp-nm .fp-dot { font-style: normal; color: var(--success); margin-left: -5px; }  /* 초록 로그인 점(D-085) */

/* ── 곁이름(D-644) — 눈썹이 이름과 «같은 기준선»의 오른쪽 끝에 선다 ──────────────────
   🔴 위 세 장 «전용»이다. base `.fp-nm`은 fit.html·fragments/fit-cards·fit-more 셋이
      공유하므로, 한정하지 않으면 명부 카드와 /fit/more까지 이 배치가 샌다(명부엔 눈썹이
      아예 없어서 flex-wrap만 남고 margin-top 4px이 조용히 사라진다).
   🔴 여기서 font-size를 잡지 마라 — 모바일 `.fp-nm{font-size:30px}`(아래 @media)이 (0,1,0)이라
      이 (0,2,0) 규칙이 크기까지 쥐면 모바일 이름이 29px로 조용히 내려앉는다. */
.fp-grid:not(.fp-grid-rest) .fp-nm { flex-wrap: wrap; column-gap: 10px; row-gap: 0; margin-top: 0; }
.fp-who { display: flex; align-items: baseline; flex: 0 0 auto; min-width: 0; max-width: 100%; }
/* 말줄임은 이름«만» 먹는다 — 초록 점(D-085)은 바깥 .fp-who가 데리고 있어 잘리지도, 줄이
   바뀔 때 홀로 떨어지지도 않는다. */
.fp-who-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nm .fp-who .fp-dot { flex: 0 0 auto; margin-left: 1px; }   /* 현행 실효 간격(gap6 − 5) 재현 */
.fp-nm .fp-kicker { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

.fp-of {
  display: block;   /* span이지만 블록 — 인라인엔 말줄임·margin이 안 먹는다(D-603 리뷰) */
  margin-top: 2px; font-size: 17px;
  /* 🔴 grey500 → grey400(D-644, 사용자 지적: 「글씨가 너무 흐릿해서 가독성이 떨어진다」).
     잉크 위 대비 5.45 → **8.26:1**(계산). 새 색이 아니라 정본 회색 눈금의 한 칸 위다.
     ⚠ grey300(11.32)까지 올리지 않은 이유: 그러면 아래 근거 줄(.fp-why, grey300)과 «같아져»
        두 줄이 한 덩어리로 뭉갠다 — 500/400/300 셋을 나란히 렌더해서 고른 값이다.
        위계는 그대로 산다: 이름 #fff 16.56 > 근거 grey300 11.32 > 지역·상호 grey400 8.26. */
  color: var(--grey400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 근거 한 줄 — 사실만. 강조 낱말은 흰색 500이 가른다(다크판 위계: 색이 아니라 잉크 농도).
   그라디언트 .90 구간 위라 grey300(#D1D6DB)이면 잉크 위와 사실상 같은 대비다. */
.fp-why { display: block; margin-top: 5px; font-size: 17px; line-height: 1.5;
  color: var(--grey300); word-break: keep-all; }
.fp-why b { font-weight: 500; color: #fff; }
/* 🔴 «(광고)» — 별도 안내 줄을 걷고(D-624) 표기만 주장 낱말에 붙였다. 지우지 말 것:
      유료 노출에서 온 사실에 붙는 표시다. 설명은 «어떻게 골랐는지» 안에 있다. */
.fp-adm { font-weight: 400; color: var(--grey400); }

/* CTA — 흰 아웃라인 필 하나. «프로필 보기»는 뺐다 — 사진 전체가 이미 프로필 링크다(가5).
   🔴 margin-top:auto — 세 카드의 CTA 기준선을 맞춘다(D-621). 카드 높이는 그리드가 늘려 준다. */
.fp-act { display: flex; flex-direction: column; margin-top: auto; padding-top: 12px; }
/* 🔴 **채운다**(D-635, 사용자 지시: 「버튼임을 알 수 있도록」). 옛 판은 grey600 테두리에
      투명 바탕이라 잉크 위에서 «누를 것»으로 안 읽혔다 — 테두리 대비가 3.59:1(하한 3:1을 겨우
      넘김)이었고, 그 안이 지면과 같은 색이면 사람은 «글자»로 본다.
   ⚠ 새 색을 들이지 않았다. 이 잉크 세계엔 파랑 버튼이 없고(D-605) 유채색은 눈썹의 #4593FC와
      로그인 점의 #15C47E뿐이다 — 그래서 강조는 «색»이 아니라 «채움»이 진다. 흰 채움은 잉크 위
      21:1로 이 지면에서 낼 수 있는 가장 큰 대비다.
   ⚠ 위계는 그대로 산다: 채움 = 사람에게 하는 행동(지금 상담), 테두리 = 지면 이동(더 보기). */
.fp-cta {
  display: block; text-align: center; font-size: 16px; font-weight: 600;
  background: #fff; color: var(--grey900);
  border: 1px solid #fff; border-radius: var(--r-full); padding: 11px 0;
  transition: background-color .12s ease, border-color .12s ease;
}
/* 눌리는 것임을 손이 먼저 안다 — 색을 바꾸지 않고 농도만 한 눈금 내린다. */
.fp-cta:hover { background: var(--grey200); border-color: var(--grey200); }
.fp-cta:active { background: var(--grey300); border-color: var(--grey300); }
/* 키보드 초점은 어두운 지면에서도 보여야 한다(design.md §9) — 흰 버튼 «밖»으로 띄운다. */
.fp-cta:focus-visible { outline: 2px solid #4593FC; outline-offset: 3px; }

/* 축에 후보가 없을 때 — 칸은 지키고 사실을 말한다(§5). */
.fp-empty {
  margin-top: 9px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 22px 16px; font-size: 14px; color: var(--grey500); line-height: 1.6;
}

/* ── 꼬리: 더 보기 1회 + 고지 ── */
.fit-more { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 10px; text-align: center; }
/* 🔴 맨글자 링크가 아니라 «눌리는 것»으로 그린다(D-629, 사용자 지적). 이 세계엔 파랑 버튼이
      없으므로(D-605) 위계는 «채움 대 테두리»가 가른다 — 주 행동(상담노트 작성하기)은 흰 채움,
      이건 흰 테두리다. 카드 CTA(.fp-cta)와 같은 문법이라 같은 세계로 읽힌다.
   ⚠ 테두리는 grey600이다 — rgba(255,255,255,.16)은 잉크 위 1.65:1로 §9의 비텍스트 하한 3:1에
      못 미친다(D-621이 CTA에서 이미 겪고 고친 자리). */
.fit-more a {
  display: inline-block; font-size: 15px; font-weight: 500; color: #fff;
  /* ⚠ 카드 CTA가 채움이 된 뒤(D-635) 이쪽은 «테두리»가 위계를 진다 — 그래서 테두리를 한 눈금
     밝혀 3.59:1 → 5.4:1로 올린다. 채우지는 않는다: 채우면 지면 이동이 상담과 같은 무게가 된다. */
  border: 1px solid var(--grey500); border-radius: var(--r-full); padding: 11px 24px;
}
.fit-more a:hover { border-color: #fff; }
.fit-more a:focus-visible { outline: 2px solid #4593FC; outline-offset: 3px; }
.fit-legal { margin-top: 8px; font-size: 13.5px; color: var(--grey500); line-height: 1.6; }

/* ══ 상담노트가 없을 때 — «비어 있는 두 칸» ═════════════════════════════════════
   🔴 옛 `.fit-empty` 네 규칙(가운데 정렬 문장 둘 + 버튼 + min-height:300px)은 **폐기했다.**
      되살리지 마라. 그 구조의 결함은 문구가 짧은 것이 아니라 **비율**이었다: 폭이 800→본문
      전폭(1440에서 1161)이 되면서 잉크 카드가 1161×352, 곧 3.3대1 «가로 띠»가 됐다(D-626).
      읽기 폭 560px 캡은 띠 «안»의 문장만 좁혔을 뿐 띠 자체는 그대로였고, min-height를 올리면
      흰 공백이 검은 공백으로 바뀔 뿐이었다(D-621 실측).
      높이는 «만들어 넣는» 것이 아니라 «내용이 차지하는» 것이어야 한다 — 여기서는 다섯 칸 줄과
      세 장의 초상이 만든다(**실측** 1440 화면·사이드바 펼침에서 1161×799 = 1.45대1이고,
      주 CTA 바닥이 문서 315px·마지막 사진 바닥이 749px이라 둘 다 접힘 위다).
   ⚠ 옛 `.fit-empty .t` · `.fit-empty .d`는 쓰는 곳이 없어져 함께 걷었다(전수 확인: `fit-empty`는
      옛 fit.html 17행과 이 파일에만 있었다). */

/* ── 주 행동 — 이 지면의 주인공 ──
   🔴 옛 «다섯 칸» 줄(.fit-slots/.fs-*)은 폐기했다(D-628). 되살리지 마라: 표제가 이미
      「분야와 지역이 아직 비어 있어요」라고 말하고 있어 도해가 같은 문장을 되풀이했고,
      그만큼 CTA가 줄 오른쪽으로 밀려 «주인공»이 아니었다. 축 이름 셋은 카드 눈썹에 살아 있다.
   🔴 이 지면에서 «채운» 버튼은 이것 하나다. 카드의 아웃라인 CTA와 위계를 가르는 것은 색이 아니라
      «채움»이다 — 파랑 버튼이 없다는 이 세계의 규칙(D-605)을 깨지 않고 주 행동을 세우는 길. */
/* ⚠ 아래 여백이 이 부품의 절반이다 — 붙여 두면 버튼이 카드 격자의 «머리»로 읽혀
      주 행동이 아니라 격자의 라벨이 된다(실측에서 그렇게 보였다). */
/* 비로그인 로그인 한 줄(D-671) — 주 행동 아래. 잉크 세계의 유채색은 눈썹의 #4593FC뿐이라
   링크도 그 값을 쓴다(새 색을 들이지 않는다). 본문은 grey500 — 부제와 같은 단이다. */
.fit-guest { margin: 12px 0 0; font-size: 14.5px; color: var(--grey500); line-height: 1.6; }
.fit-guest a { color: #4593FC; }
.fit-guest a:focus-visible { outline: 2px solid #4593FC; outline-offset: 3px; border-radius: 4px; }

.fit-lead { margin: 20px 0 4px; }
/* ⚠ D-635에서 .fp-cta 기본이 «채움»이 되어 이 규칙은 할 일이 없어졌다 — 이름만 남긴다.
      주 행동(상담노트 작성하기)과 카드 CTA는 이제 «색»이 아니라 «크기»가 가른다(.fp-cta-lg). */
.fp-cta.fp-cta-solid { background: #fff; color: var(--grey900); border-color: #fff; }
/* 히트 타깃: 15px 글자 + 상하 15px ≈ 52px. 폭은 글자에 맞춘다 — 잉크 카드가 1180px까지 가므로
   전폭 버튼은 «누를 곳»이 아니라 «띠»로 읽힌다(옛 빈 상태의 1076px 버튼이 그랬다, D-627 실측). */
/* 🔴 주 행동은 «뚜렷하게»(D-642, 사용자 지시) — 17→20px, 굵기는 .fp-cta의 600을 700으로
   올려 받는다. 흰 채움이라 대비는 이미 21:1이고, 남은 손잡이는 크기와 굵기뿐이다. */
.fp-cta.fp-cta-lg {
  display: inline-block; width: auto; font-size: 20px; font-weight: 700; padding: 17px 42px;
}

/* ── 나머지 명부 — 위 세 장과 «같은 카드», 키 예산만 다르다(D-629) ──
   🔴 다른 것은 «열 폭»뿐이다 — 비율(9대16)도 카드 문법도 위 세 장과 같다(D-632).
      위는 --fp-col(360)이 정한 세 열, 여기는 최소 145px의 auto-fill이라 잉크 안폭 1116px에서
      일곱 열이 선다. 사진 키는 두 격자 모두 폭에서 나온다.
   🔴 옛 .fm-row(56×70 썸네일 행)는 여기서 폐기했다 — 위가 354px 사진인데 아래가 56px이면
      같은 지면의 두 부품이 «다른 물건»으로 보인다(사용자 지적). .fm-* 규칙은 /fit/more가
      아직 쓰므로 파일에는 남아 있다. */
/* 🔴 **다섯 열이다**(D-634, 사용자 지시) — 일곱 열은 카드가 145px까지 줄어 위 세 장(354px)과
      크기 차이가 너무 컸다. 최소 200px인 근거(실측):
        · 잉크 안폭 1116px(1180 − 64) → 200×5 + 16×4 = 1,064 ≤ 1,116이라 다섯 열(210.4px).
          여섯 열은 200×6 + 16×5 = 1,280 > 1,116이라 서지 못한다 — 그 사이가 «다섯»을 못박는다.
        · 1440(안폭 1097) 다섯 열(206.6px) · 1280(안폭 944) 네 열(224px).
      해상도: 열이 가장 넓어지는 1280의 224px는 9대16으로 398px, 2배 화면에서 796 소자px라
      원본 상한(800px) 바로 아래다. 이 최소값을 올리려거든 그 수를 먼저 다시 재라.
   ⚠ 위 세 장 대비 카드 폭이 210 / 354 = **59%**다(일곱 열일 때는 41%였다). */
.fp-grid.fp-grid-rest {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px; margin-top: 14px;
}
/* 🔴 여기는 «키 예산»이 아니라 **9대16 비율**이다(D-631, 사용자 지시).
      200px 키 예산으로는 상자가 206×200이 되어 오버레이(눈썹 없는 이름·사무소·근거 ≈ 96px)가
      상자의 절반을 덮었다 — 「카드의 절반이 글로 가려진다」. 9대16이면 206×366이라 같은 글이
      26%만 덮고 사진이 사람으로 읽힌다.
   ⚠ D-631까지는 위 세 장만 «키 예산»이었다 — D-632에서 둘 다 9대16이 되어 규칙이 하나가 됐다.
   ⚠ 해상도 상한: 열이 가장 넓어지는 곳은 1280(4열 × 223.9)이고 9대16이면 398px, 2배 화면에서
      796 소자px다 — ImageSpec.PROFILE 최소치 800px 바로 아래다. 열을 더 넓히려거든 이 수를
      먼저 다시 재라.
   ⚠ 정사각 원본을 9대16 상자에 cover하면 좌우 44%가 잘린다. 얼굴은 가운데라 남지만 어깨는
      잘린다 — 인물 사진의 관례 안이다(프로필 지면은 9대16을 이미 쓴다, profile.css). */
/* 위아래가 같은 비율이 됐으므로 여기서 다시 선언할 것이 없다 — .fp-photo가 이미 9대16이다. */
/* 🔴 **타이포를 내리지 않는다**(D-641, 사용자 지시: 「아래쪽 카드도 위쪽 카드만큼 크게」).
   D-629~637에서는 열 폭(207px)에 맞춰 한 단 내렸는데, 사용자가 두 격자의 글자를 같은 크기로
   맞추기를 원한다. 그래서 이름·사무소·근거의 전용 축소 규칙을 **걷었다** — 이제 두 격자가
   같은 눈금(그리고 같은 컨테이너 사다리)을 쓴다.
   ⚠ 대가: 열이 207px이라 사무소·지역 줄은 말줄임이 잦아진다(이름은 넉넉히 든다).
      되돌리려거든 여기에 다시 한 단 내리는 규칙을 넣어라 — 마크업은 이미 같다. */
.fp-grid-rest .fp-ov { left: 12px; right: 12px; bottom: 10px; }
.fp-grid-rest .fp-nm { margin-top: 0; }
.fp-grid-rest .fp-of { margin-top: 1px; }
.fp-grid-rest .fp-why { margin-top: 3px; line-height: 1.45; }
.fp-grid-rest .fp-photo { margin-top: 0; }

/* ── /fit/more의 목록 격자(D-630) — 같은 카드 가족, 이 지면 값만 다르다 ──
   이 지면은 --page-max(1560)까지 가므로 안폭이 1496px이고, 같은 200px 예산에서 여섯 열이 선다
   ((1496 − 5×16) ÷ 6 = 236). 한 판 10명이라 6 + 4로 두 켜다.
   🔴 여기엔 카드 아래 버튼이 산다 — /fit 빈 상태와 갈리는 유일한 점이다. 그래서 CTA 기준선을
      맞추는 .fp-act{margin-top:auto}(D-622)가 이 격자에서 다시 값을 한다. */
.fp-grid.fp-grid-more { margin-top: 14px; }
.fp-grid-more .fp-act { padding-top: 9px; }
/* ⚠ 「지금 상담」은 두 지면에서 같은 크기다(D-636, 사용자 지시) — 여기만 작으면 같은 행동이
      지면마다 다른 무게로 읽힌다. 카드 폭이 200~224px이라 16px 글자가 한 줄에 든다(실측). */
.fp-grid-more .fp-cta { font-size: 16px; padding: 11px 0; }
/* ⚠ 그라디언트는 «절대 px»이라(D-626) 상자가 작아지면 덮는 «비율»이 커진다 — 360px 사진에서
      37%이던 것이 200px에서 66%가 되어 작은 카드만 유독 어둡다. 그래서 이 격자에서는 값을
      키에 맞춰 줄인다(96/170 ≈ 같은 비율). 오버레이 글자가 딛는 .90 구간은 그대로 남는다. */
.fp-grid-rest .fp-photo::after {
  /* 명부는 글자가 76px(실측)이라 무대보다 더 짧다 — 옛 값(104/190)은 사진의 52%를 덮었다. */
  /* 명부도 같은 산술 — 오버레이 104px + bottom 10px = 114px까지 글자가 올라간다(D-641 실측).
     ⚠ 덮는 몫이 38%→45%로 늘었다. 두 격자의 글자를 «같은 크기»로 맞춘 대가다 — 열이 207px인데
        같은 31px 이름을 쓰면 글자 덩어리가 그만큼 두꺼워진다. 되돌리려면 글자를 내려야 한다. */
  background: linear-gradient(to top, var(--grey900) 0, rgba(25, 31, 40, .92) 118px, rgba(25, 31, 40, 0) 165px);
}
/* ⚠ 얼굴 위치도 상자 키를 따른다 — 200px 상자에서 18%는 정수리를 자른다(모자 쓴 초상에서
      실제로 잘렸다). 8%로 올려 머리 위 여유를 준다. */
.fp-grid-rest .fp-img { object-position: 50% 8%; }

/* ⚠ 옛 `.fit-rest-h`(명부 머리 한 줄)는 폐기했다(D-636, 사용자 지시). 되살리려거든
      「순위 없음」을 어디가 지는지 먼저 확인하라 — 지금은 «어떻게 골랐는지» 안이다. */

/* ── 「다른 세무사 더 보기」로 열리는 명부(D-633) ──
   빈 상태의 명부와 «같은 부품»이다 — 머리 한 줄 + 같은 격자. 다른 것은 이 자리가 접혀 있다가
   열린다는 것뿐이다. 그래서 새 규칙이 두 줄밖에 없다. */
.fit-rest { margin-top: 4px; }
/* ⚠ 옛 「여기까지가 … 전부예요」 줄은 걷었다(D-635, 사용자 지시). 끝났다는 사실은 이제
      «더 안 붙는다»는 동작이 말한다 — 문장을 다시 넣으려거든 그 결정을 먼저 보라. */

/* 격자 아래 한 줄 — «막히지 않았다»는 사실. 이 줄이 있어야 카드 CTA를 세우지 않은 것이
   «게이트»가 아니라 «배치»가 된다(design.md §4·§5, D-013). 지우지 말 것. */
.fit-open { margin-top: 14px; font-size: 13.5px; color: var(--grey500); line-height: 1.6;
  max-width: 640px; word-break: keep-all; }
.fit-open a { color: #4593FC; }

/* ── 더 보기 페이지 — 같은 세계, 목록 밀도는 현행(D-604 결정) ── */
/* ── 탭 + 조건을 «한 줄»로(D-631, 사용자 지시) ──
   이 지면에서 고를 것은 «순서»와 «조건» 둘뿐이라 한 줄에 서는 것이 그 사실과 맞는다.
   좁아지면 줄바꿈으로 자연스럽게 두 켜가 된다 — 가로 스크롤로 말지 않는다(칩이 숨는다). */
.fm-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.fm-tabs { display: flex; gap: 6px; }
.fm-tabs a {
  font-size: 14.5px; font-weight: 500; color: var(--grey400);
  background: rgba(255, 255, 255, .07); border-radius: var(--r-full); padding: 11px 16px;
}
.fm-tabs a.on { background: #fff; color: var(--grey900); }
.fm-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 🔴 JS가 살아 있을 때만 숨는다 — 클래스를 거는 것이 fit-live.js다. CSS만으로 숨기면
      스크립트가 죽은 환경에서 조건을 걸 수단이 사라진다(design.md §0). */
.fm-cond.js button[type="submit"],
.fit-cond.js button[type="submit"] { display: none; }
/* 갱신 중에는 목록이 «바뀌는 중»임을 농도로 말한다 — 기호를 쓰지 않는다(§5). */
[data-fit-live][aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }
.fm-cond select { font-size: 14.5px; color: var(--grey300); background: var(--grey900);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 10px 10px; }
.fm-cond button { font-size: 14.5px; font-weight: 500; color: var(--grey300);
  background: rgba(255, 255, 255, .08); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.fm-adnote { margin-top: 10px; font-size: 14px; color: var(--grey500); max-width: 560px; }
/* ⚠ 옛 행 목록 규칙(.fm-list · .fm-row · .fm-cover · .fm-photo · .fm-main · .fm-nm · .fm-why ·
      .fm-cta)은 **폐기했다**(D-630). D-626에서 반응형 그리드로 고쳤던 «이름과 버튼 사이가
      벌어진다» 문제는, 행을 카드로 바꾸면서 문제 자체가 사라졌다 — 카드는 폭이 늘면 열이 늘지
      한 행이 늘어나지 않는다. 되살리려거든 그때 그 증상(1300px에서 사공간 892px)을 먼저 재라.
      🔴 남긴 .fm-* 는 조작부와 꼬리뿐이다: .fm-tabs · .fm-cond · .fm-adnote · .fm-pager · .fm-back. */
.fm-pager { display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 16px; font-size: 14px; }
/* 페이저는 36px 정본 크기 — 맨글자 링크는 §4 히트 타깃 미달(D-603 리뷰). */
.fm-pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--grey300); background: rgba(255, 255, 255, .08);
}
.fm-pager .cnt { color: var(--grey600); font-variant-numeric: tabular-nums; }
.fm-back { margin-top: 6px; text-align: center; font-size: 14px; }
.fm-back a { display: inline-block; color: var(--grey500); padding: 10px 14px; }

/* ── 모바일: 한 사람이 한 화면 — 어둠 속에서 한 명씩 만난다 ── */
@media (max-width: 768px) {
  .fit-ink { padding: 22px 20px 18px; border-radius: 14px; }
  .fit-q { font-size: 26px; }
  .fp-grid { grid-template-columns: 1fr; gap: 26px; }
  /* 🔴 예산을 «푼다». 한 열에서는 사진이 전폭이라 키를 360으로 묶으면 696×360짜리
        가로 띠가 된다(실측). 세로 초상은 «한 장씩 볼 때»의 비율이다. */
  .fp-photo { aspect-ratio: 4 / 5; max-height: none; }
  .fp-ov { left: 18px; right: 18px; bottom: 16px; }
  .fp-nm { font-size: 30px; }
  .fp-why { font-size: 18px; }
  /* ⚠ select는 min-content 아래로 안 줄어든다 — 나란히 두면 가로 넘침(D-603 실측). 전폭 스택. */
  .fit-cond select, .fit-cond button, .fm-cond select, .fm-cond button {
    flex: 1 1 100%; width: 100%; min-width: 0;
  }
  /* 한 열에서는 주 행동을 전폭으로 — 여기서는 버튼이 «띠»로 읽히지 않는다(폭이 350 남짓). */
  .fp-cta.fp-cta-lg { display: block; width: 100%; text-align: center; padding: 14px 0; }
  /* 🔴 나머지 명부는 좁은 화면에서도 여러 열이다. 위 .fp-grid{1fr} 규칙에 딸려 한 열이 되면
        카드 열 장이 세로로 3,700px을 먹어 «한 번에 많이»(D-628)가 무너진다.
     🔴 «2열 고정»이 아니라 최소 폭이다(D-631) — 768px에서 2열이면 열이 342px이 되고 9대16은
        608px이라 2배 화면에서 1,216 소자px, 곧 800px 원본을 52% 확대해 그린다.
     🔴 최소값은 **실측에서 나온 수**다(데스크톱과 같은 145px, D-632). 390 화면의 잉크 안폭은 350이 아니라 **318px**이고
        (잉크 358 − 좌우 안여백 40), 160으로 두면 160×2 + 간격 12 = 332 > 318이라 **한 열**이
        된다 — 카드 열 장이 세로 5,650px을 먹는다. 145면 302 ≤ 318로 두 열이 서고,
        768에서는 네 열(165px)이라 어느 쪽도 해상도 상한 안이다. 이 수를 올리려거든 390의
        318px을 먼저 다시 재라. */
  .fp-grid.fp-grid-rest {
    grid-template-columns: repeat(auto-fill, minmax(min(145px, 100%), 1fr)); gap: 12px;
  }
  /* ⚠ 모바일 명부는 열이 153px이라 여기서만 한 단 내린다(D-641) — 데스크톱은 같은 눈금이다. */
  .fp-grid-rest .fp-nm { font-size: 22px; }
  .fp-grid-rest .fp-of { font-size: 14px; }
  .fp-grid-rest .fp-why { font-size: 14.5px; }

  /* ── 🔴 모바일 명부만 9대16으로 되돌린다 (D-650, 사용자 지적: 「프로필 이미지가 절반까지 가려진다」) ──
     위 `.fp-photo { aspect-ratio: 4/5 }`는 **위 세 장** 얘기다 — 한 열에서 사진이 전폭(303px)이라
     9대16이면 539px짜리 기둥이 된다는 것이 D-632의 근거였다. **명부는 두 열 145px이라 사정이 다르다**:
     9대16이어도 259px이고, 4대5로 누르면 182px밖에 안 되는데 그 안에 오버레이 79px가 들어앉아
     사진의 43%를 글자가 차지한다. 규칙 하나를 두 격자에 같이 걸었던 것이 이 결함의 뿌리다. */
  .fp-grid-rest .fp-photo { aspect-ratio: 9 / 16; }

  /* 🔴 **그리고 그라디언트를 다시 잰다** — 이게 실제 원인이었다(D-640과 같은 함정, 네 번째다).
     stops 118/165는 **데스크톱 명부**(사진 367px)에서 뽑은 절대 px인데 모바일 상자는 182px이라
     램프 끝이 사진의 **90.7%**를 덮고 있었다(실측). 글자는 89px까지만 올라오므로 **76px가 순전히
     낭비되는 덮음**이었다 — 얼굴이 그 구간에 있었다.
     새 값은 이 상자의 실측에서 나온다: 오버레이 79px + `.fp-grid-rest .fp-ov`의 bottom 10px =
     글자 꼭대기 **89px**. 여유 6px을 주어 .92 = **95px**, 램프 폭은 데스크톱 명부와 같은 47px → **142px**.
     9대16(259px)과 함께 덮는 몫이 **90.7% → 54.9%**가 된다.
     ⚠ 명부 글자를 또 키우거든 이 두 수를 «먼저» 다시 재라. */
  .fp-grid-rest .fp-photo::after {
    background: linear-gradient(to top, var(--grey900) 0,
                rgba(25, 31, 40, .92) 95px, rgba(25, 31, 40, 0) 142px);
  }
}

/* /fit/more 전용 폭 — 썸네일 목록이라 초상 3열의 상한(1300)에 매일 이유가 없다.
   집의 정본 지면 폭 토큰을 그대로 쓴다(D-363). 1920에서 96.3%, 2560에서 69.9%.
   이 폭에서 목록 격자(.fp-grid-more)는 여섯 열이 된다((1496 − 5×16) ÷ 6 = 236, D-630). */
.fit-ink.fit-ink-wide { max-width: var(--page-max); }

/* ── 폭 구간별 타이포 사다리 (D-626) ────────────────────────────────────────────
   🔴 **이 블록은 파일 맨 끝, 모바일 @media 뒤에 있어야 한다.** 컨테이너·미디어 질의는
      특정도를 올려 주지 않아서, 앞에 두면 뒤의 기본값이 이겨 아무 일도 안 일어난다
      (D-154 ④ⓑ에서 실제로 겪은 사고다).
   왜 필요한가: 오버레이 글자 크기는 열 233px 시절 값이다. 열이 354~400으로 넓어지면
   같은 20px 이름이 사진에 눌려 «작아 보인다» — 모바일(열 318)이 24px인데 데스크톱 넓은
   열이 20px인 역전이 실제로 생긴다. 사다리는 그 역전만 되돌리는 최소폭이다. */
@container fitink (min-width: 1000px) {
  .fp-kicker { font-size: 27px; }
  .fp-nm { font-size: 31px; }
  .fp-of { font-size: 18px; }
  .fp-why { font-size: 18px; }
  .fp-cta { font-size: 16.5px; padding: 11px 0; }
  /* ⚠ 채운 버튼은 세로 패딩을 사다리에 태우지 않는다 — 위 규칙의 `padding: 11px 0`이 좌우를
     0으로 덮어써 「상담노트 남기기」가 글자에 붙어 버린다. 좌우를 여기서 되돌린다. */
  .fp-cta.fp-cta-solid { padding: 12px 22px; }
  /* 유도 문장이 12.5px면 넓은 열의 근거 줄(13px)보다 작아 보인다 — 사다리의 역전만 되돌린다. */
  .fit-open, .fit-rest-h { font-size: 15px; }
}

/* ── 곁이름이 «안 되는» 폭 — 눈썹이 제 줄로 돌아간다(D-644) ─────────────────────────
   3열이 살아 있는 중간 폭(컨테이너 768~999 → 열 195~272px)에서는 이름과 27px 눈썹이 한 행에
   못 선다. 그때는 이름을 자르는 대신 눈썹이 **제 줄로 돌아간다** — 돌아가는 자리가 곧 D-643
   이전의 자리라 새 문법이 하나 더 생기지 않는다.
   ⚠ 모바일(≤768)은 격자가 «한 열»이라 오히려 폭이 남는다(390에서 안폭 282px) — 그래서
      여기서 우측 배치를 되살린다. 컨테이너 질의만으로는 이 둘을 못 가른다: 한 열이든 세 열이든
      컨테이너(.fit-ink)의 폭은 같기 때문이다. 뷰포트 질의를 «안에» 겹치는 이유가 그것이다. */
@container fitink (max-width: 999px) {
  /* 열이 181px까지 좁아지는 구간이라 눈썹도 한 단 내린다 — 26px을 그대로 들고 오면 제 줄
     하나가 35px을 먹어 오버레이가 140.6px으로 «넓은 열보다 커진다»(실측). 20px이면 132.5px으로
     D-643 이전과 같아지고, 아래 그라디언트도 옛 값 그대로 쓸 수 있다. */
  .fp-kicker { font-size: 20px; }
  .fp-nm .fp-kicker { order: -1; flex: 0 0 100%; margin-left: 0; margin-bottom: 4px; }
  /* 🔴 이 구간은 오버레이가 «안 줄었다» — 그런데 base가 153/215로 낮아졌으므로 그대로 두면
     여유가 0.4px까지 말라붙는다(실측 top 152.6 대 stop 153). 옛 값을 되돌린다.
     ⚠ 근거가 2줄이 되면 top이 170px으로 stop을 넘는다. 그건 이 구간에 **원래 있던** 조건이고
        (D-644 이전에도 144.5 → 170으로 같은 폭만큼 넘었다) 여기서 고치려면 램프를 246px까지
        올려야 하는데 이 구간 사진은 322.6px뿐이라 덮음이 76%가 된다 — D-640이 줄이라고 한
        바로 그 수치다. 파리티까지만 되돌리고 더 가지 않는다. */
  .fp-photo::after {
    background: linear-gradient(to top, var(--grey900) 0,
                rgba(25, 31, 40, .92) 158px, rgba(25, 31, 40, 0) 220px);
  }
  @media (max-width: 768px) {
    /* 한 열이라 오히려 폭이 남는다(390에서 안폭 282px) — 우측 배치도 큰 활자도 되살린다.
       실측: 오버레이 104.5px, 글자 꼭대기 120.5px으로 153 아래에 넉넉히 든다. */
    .fp-kicker { font-size: 26px; }
    .fp-nm .fp-kicker { order: 0; flex: 0 0 auto; margin-left: auto; margin-bottom: 0; }
    .fp-photo::after {
      background: linear-gradient(to top, var(--grey900) 0,
                  rgba(25, 31, 40, .92) 153px, rgba(25, 31, 40, 0) 215px);
    }
  }
}

/* ══ 세무사에게만 보이는 «내 자리» 한 단 (D-665) ═════════════════════════════
   🔴 이 지면은 잉크 카드(grey900) 안이다 — 새 눈금을 만들지 않고 기존 회색을 글자색으로
      뒤집어 쓰고, 괘선은 흰색 알파로 낸다(design.md §1 예외 규정 그대로).
   🔴 «서 있는 자리»의 강조는 **색이 아니라 괘선의 농도와 글자 농도**다 — 이 지면에는 파랑
      버튼이 없고 유채색은 눈썹과 초록 점뿐이다(파일 머리 규칙). 배지·별·기호를 쓰지 마라.
   ⚠ 잉크 위 대비 사다리(#191F28 기준): #fff 16.56 · grey200 13.47 · grey400 8.26 ·
      grey500 5.45. **grey600(#6B7684)은 3.9라 본문에 쓰지 않는다** — 여기서는 괘선에만. */
.fit-me { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.fit-me-hd { display: flex; align-items: baseline; gap: 12px; }
.fit-me-t { font-size: 13px; font-weight: 500; color: var(--grey200); letter-spacing: -.01em; }
.fit-me-v { margin-left: auto; font-size: 12.5px; color: var(--grey500); white-space: nowrap; }

.fit-me-seats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
                gap: 0 14px; margin-top: 13px; }
.fit-me-seats li { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.10); }
.fit-me-seats li.on { border-left-color: #fff; }
.fit-me-seats b { display: block; font-size: 13px; font-weight: 500; color: var(--grey500); }
.fit-me-seats li.on b { color: var(--grey200); }
.fit-me-seats small { font-size: 11.5px; font-weight: 400; color: var(--grey500); margin-left: 4px; }
/* 상태 한 줄 — «지금 보여요 / 지금은 안 보여요». 세무사가 읽어야 할 첫 문장이라 가장 크다. */
.fit-me-seats span { display: block; margin-top: 5px; font-size: 15px; color: var(--grey400); }
.fit-me-seats li.on span { color: #fff; font-weight: 500; }
/* 규칙 한 줄 — «이 자리는 무엇을 보는가». 세무사가 «무엇을 고치면 되나»를 여기서 읽는다.
   «N개 더 쓰면»은 적지 않는다(D-664) — 자리가 무엇을 세는지만 말한다. */
.fit-me-seats em { display: block; margin-top: 6px; font-size: 12px; font-style: normal;
                   color: var(--grey500); line-height: 1.5; word-break: keep-all; }
/* 내 값 — 원시 카운트만. 순위·점수·백분율 없음. */
.fit-me-seats i { display: block; margin-top: 4px; font-size: 12.5px; font-style: normal;
                  color: var(--grey400); line-height: 1.55; word-break: keep-all; }

.fit-me-note { margin-top: 12px; max-width: 860px; font-size: 12.5px; color: var(--grey500);
               line-height: 1.7; word-break: keep-all; }
.fit-me-note b { font-weight: 500; color: var(--grey200); }
.fit-me-links { margin-top: 11px; font-size: 13px; color: var(--grey500); }
.fit-me-links a { color: #4593FC; text-decoration: none; }
.fit-me-links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .fit-me-seats { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .fit-me-v { margin-left: 0; }
  .fit-me-hd { flex-wrap: wrap; gap: 4px 12px; }
}

/* 상담노트 업종 안내 한 줄 (D-675) — 잉크 지면의 본문 단(grey500) + 링크는 눈썹의 #4593FC.
   🔴 버튼이 아니다: 이 지면의 «채운» 버튼은 주 행동 하나뿐이고, 이 줄은 «권유»지 주 행동이 아니다. */
.fit-noteind { margin: 12px 0 0; font-size: 14.5px; color: var(--grey500); line-height: 1.6; }
.fit-noteind b { color: var(--grey200); font-weight: 500; }
.fit-noteind a { color: #4593FC; margin-left: 4px; }
.fit-noteind a:focus-visible { outline: 2px solid #4593FC; outline-offset: 3px; border-radius: 4px; }