/* ══ 맞춤 세무사 — 시안 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: var(--ink-link); }

/* ── 잉크 카드 — 지면의 무대. 셸은 라이트 그대로, 이 카드만 어둡다. ──
   🔴 그림자는 장식이 아니라 «깊이 신호»다(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 var(--ink-shadow-near), 0 18px 44px var(--ink-shadow-far);
  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: 18px; font-weight: 600; letter-spacing: .06em; color: var(--grey300); }
.fit-asof { font-size: 13px; color: var(--grey500); font-variant-numeric: tabular-nums; }
.fit-q {
  margin: 16px 0 0; font-size: 32px; font-weight: var(--fw-semibold); letter-spacing: -.01em;
  line-height: 1.45; color: var(--ink-strong); 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: var(--ink-link); cursor: pointer;
}
.fit-setcur button:focus-visible { outline: 2px solid var(--ink-link); 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; }

/* 상담노트·조건 전환(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: var(--ink-link); }
.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 var(--ink-w18); 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: var(--fw-semibold); color: var(--grey300);
  background: var(--ink-w08); border: 0; border-radius: 8px;
  padding: 10px 16px; cursor: pointer;
}

/* «어떻게 골랐는지» — <details> 점진 보강 없이 성립. */
.fit-how { margin-top: 8px; }
.fit-how summary { font-size: 14.5px; color: var(--ink-link); cursor: pointer; width: fit-content; padding: 8px 0; }
.fit-how-body { margin-top: 6px; border-top: 1px solid var(--ink-w09); padding-top: 10px; }
.fit-how-body dt { font-size: 14.5px; font-weight: var(--fw-semibold); 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: var(--ink-link); }

/* 사진 — 하단이 지면과 같은 잉크로 녹는다(경계 소멸). 카드 전체가 프로필로 가는 진짜 <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: var(--ink-w04);
}
.fp-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* object-position은 app.css 세무사 사진 묶음(50% 10%)이 정한다 — 여기서 다시 선언하지 마라(D-869).
     9:16 창은 마스터와 같아 세로 값이 무효고, 폰(768 이하) 4:5 변형과 명부 상자에서만 10%가 일한다. */
  object-fit: cover;
  /* ⚠ 옛 값은 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, var(--ink-fade) 153px, var(--ink-clear) 215px);
}
/* 사진 없는 세무사 — 잉크 위 무채 이니셜(시안 K 확정: 파랑 그라디언트 대체는 이 세계에 안 맞다). */
.fp-img-empty {
  display: grid; place-items: center; font-size: 58px; font-weight: var(--fw-semibold);
  color: var(--grey600); background: var(--ink-w05); filter: none;
}
.fp-presence {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: var(--ink-scrim); border-radius: var(--r-full);
  /* 글자 13px · 400(토큰) — 맞춤 세무사 지역·후기 칸(사용자 승인 2026-10-10)의 «13px 이상 · 400/600» 규칙을 세 칸이 함께 따른다(옛 12.5px · 500). */
  padding: 4px 11px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); color: var(--grey300);
}

/* ── 오버레이(시안 가5 «무대», D-624) — 눈썹·이름·사무소·근거가 사진 하단을 딛고 선다.
      «사진 밑에 글이 따라붙는» 명함이 아니라 «인물이 무대에 서 있는» 화면이 된다. ── */
.fp-ov { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
/* 이름 — 타이포 점검 2026-10-03 F4(사용자 승인 목록): 옛 29px(넓은 열 31 · 모바일 30 · 명부 모바일 22) / 행간 상속(body 22·24px — 글자보다
   작은 줄 상자) / 500 / −.01em → **토큰**: 기본 title1(24/32 · ≥768 28/38) · 600 · 크기 곡선 자간(--ls-22, 22~28px).
   모바일 위 세 장(≤767)은 display 28/38, 모바일 명부(≤768)는 title2(20/28 · 768에서 22/30) — 아래 @media.
   🔴 위계 예외(이유): 이 카드는 광고(프리미엄)·추천 «무대» 카드라 이름을 일부러 키운다(D-638·D-641 사용자 지시 «아래 카드도 위만큼 크게»).
      그래서 홈 섹션 제목(title2)보다 크거나(데스크톱 28 > 22) 같다(폰 명부 20 = 20) — «카드 안 이름 < 섹션 제목» 규칙의 유일한 예외다.
   ⚠ 행간이 생기며(줄 상자 24 → 38 · 22 → 28) 오버레이가 높아진다 — 그라디언트 .92 정지점은 «글자 꼭대기 + 6» 산술로 다시 쟀다(아래 각 자리). */
.fp-nm { display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); color: var(--ink-strong); }
.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:var(--fs-display)}`(아래 @media ≤767)이 (0,1,0)이라
      이 (0,2,0) 규칙이 크기까지 쥐면 모바일 이름이 title1(24)로 조용히 내려앉는다. */
.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)이면 잉크 위와 사실상 같은 대비다. */
/* text-wrap: balance — 타이포 점검 2026-10-03 F4·F6: 두 줄로 감기는 소개말·근거의 끝 줄에 한두 글자만 남지 않게 줄 길이를 고른다.
   dev 실측(라운드 로드, 홈 폰 두 줄 칸 115~150px · 320/360/390): «기장부터 / 절세까지 한 번에!» · «수원 창업 상담 / 많이 합니다» —
   «한 번에!»·«많이 합니다»가 한 덩어리로 남는다(점검 수용 기준). 줄 «수»는 그대로라 오버레이 높이·두 줄 예약(home.css)은 안 바뀐다.
   한 줄(nowrap) 자리에선 효과 없음.
   ⚠ 데스크톱 17px(넓은 열 18)·행간 1.5/1.45와 위 .fp-of 17px은 아직 토큰 밖이다 — 광고(프리미엄)·추천 무대 카드라 일부러 키운 눈금(D-638·D-641
     «아래 카드도 위만큼 크게»)이고, 점검 F4는 모바일(14.5 → 14/20)만 지시했다. 데스크톱 값의 토큰 이전은 /fit 묶음 4에서 /fit 화면과 함께. */
.fp-why { display: block; margin-top: 5px; font-size: 17px; line-height: 1.5;
  color: var(--grey300); word-break: keep-all; text-wrap: balance; }
.fp-why b { font-weight: var(--fw-semibold); color: var(--ink-strong); }   /* 강조 숫자 600 토큰(옛 500 — 지역·후기 칸의 «400/600» 규칙, 2026-10-10) */
/* 괄호 후기 수 «(12)» — 고정폭 숫자(F7). 슬라이드가 넘어가며 자릿수가 바뀌어도 줄 길이가 덜 흔들린다. */
.fp-rv { font-variant-numeric: tabular-nums; }
/* 근거 줄의 사실 한 조각(«셈톡 상담 N건»·«Q&A 답변 N건»·«후기 N건»·«경력 N년차»·«{분야} 글 N건»·«평가 N»…) = 한 덩어리(Q-416).
   감기는 격자(/fit/more 열 153~224px · 1024 세 장)에서 수가 제 이름표와 갈리지 않게 « · » 뒤에서만 감긴다.
   ⚠ nowrap이 아니라 inline-block이다: 업종·분야 이름이 긴 덩어리(«크리에이터·프리랜서 업종 등록(광고)»)는 칸 하나보다
     넓어 nowrap이면 칸 밖으로 최대 80px 삐져나간다(실측은 옛 꼬리 «업종 등록(광고)» 때 — 지금 꼬리는 «사업장을 맡아요 AD»). inline-block이면 칸에 드는 덩어리는 통째로 넘어가고, 칸보다 넓은 덩어리만
     안에서 감긴다(inline-block의 폭은 줄어들어 맞추기라 칸 폭을 넘지 않는다 — max-width를 따로 걸 필요가 없다) — 그때도
     꼬리(.fp-why-nb «글 N건»·«맡아요 AD»)는 붙어 있다. 줄 높이는 nowrap과 같다(실측은 fit-why 머리). */
.fp-why-u { display: inline-block; }
.fp-why-nb { white-space: nowrap; }
/* «{업종} 사업장을 맡아요 AD» 덩어리만 글처럼 흐른다 — 업종 이름이 붙으면 격자 열 대부분보다 넓어, 상자로 두면 칸을 꽉 채워 뒤 « · »가
   다음 줄 머리로 밀린다. 감기는 자리는 이름 뒤와 «사업장을» 뒤다(꼬리 .fp-why-nb «맡아요 AD»는 붙어 있다 — 통째 nowrap이면 390 격자 칸 129px에 134px가 샌다, fit-why 머리). */
.fp-why-u.fp-why-flow { display: inline; }
/* 🔴 AD 마크 — 별도 안내 줄을 걷고(D-624) 표기만 주장 낱말 곁에 붙였다. 옛 «(광고)» 글자는 «사업장을 맡아요» 옆 작은 회색 «AD»가
      됐다(사용자 지시 2026-10-03 지도 후속 — 이름·툴팁 «광고», 누르면 말풍선). 지우지 말 것: 유료 노출에서 온 사실에 붙는 표시다.
      공용 규칙은 아래 한 벌(content.css와 같은 글자), 여기서는 잉크판 위 색과 말풍선 자리만 덮는다:
      · 색은 지역·상호 줄과 같은 grey400(잉크 위 8.26:1).
      · 말풍선은 오버레이(.fp-ov) 기준으로 카드 폭 안, 오버레이 «위»(사진 위)에 편다 — 마크 기준이면 좁은 칸에서 카드 밖으로 잘린다.
      · 흰 카드 모양(바탕·테두리·그림자·글자색)은 공용 그대로다. 꼬리만 끈다 — 카드가 오버레이 위에 떠서 마크와의 사이에 이름·지역 줄이 있고,
        꼬리를 달면 마크가 아니라 이름을 가리킨다. 카드를 마크 줄 바로 위로 내리면 이번엔 근거 문장(«{업종} 사업장을»)을 덮는다.
      · 말풍선 앞머리 «광고»(<b>)는 근거 줄 강조(.fp-why b — 잉크판 위 흰 글자 500)를 물려받지 않게 공용 값(본문 글자색 600)을 한 번 더 못 박는다 —
        공용 규칙(.admark-tip b)과 특이도가 같아 파일 안 순서에만 기대면, 블록을 옮기는 순간 흰 카드 위 흰 글자가 된다. */
/* ── AD 마크(공용 한 벌 — content.css와 fit.css에 글자까지 같은 규칙이다. 고치려거든 둘을 함께: MapPageContractTest.adMarkRulesMatch) ──
   «이런 사업장을 맡아요» 옆 작은 회색 «AD»(사용자 지시 2026-10-03 지도 후속). 이름·툴팁은 «광고», 누르면 말풍선(.admark-tip)이 열린다.
   보이는 마크는 작게 두고 눌리는 자리만 44px 이상으로 넓힌다(::after — design.md §4). 색은 회색 토큰 하나(파랑·빨강 아님).
   말풍선은 흰 카드다(사용자 결정 2026-10-03 «시안처럼 흰 카드»): 흰 바탕 · 1px 테두리 · 둥근 귀 · 띄움 그림자 · 위쪽 꼬리(::before — 10px 사각을
   45도 돌린 것, 카드와 같은 바탕·테두리). 카드와 꼬리를 둘 다 마크 가운데에 맞춰 마크 바로 아래에 편다(left 50% + 제 폭 절반 당김).
   글자는 시안(.pop)대로 본문 400, 앞머리 «광고»(<b>)만 600 + 본문 글자색. */
.admark-wrap { position: relative; display: inline-block; margin-left: 6px; vertical-align: 1px; }
.admark {
  position: relative; display: inline-block; margin: 0; padding: 0 4px;
  border: 1px solid currentColor; border-radius: 4px; background: transparent; color: var(--text-tertiary); cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-12);
}
.admark::after { content: ""; position: absolute; left: -12px; right: -12px; top: -13px; bottom: -13px; }
.admark-tip {
  position: absolute; z-index: 30; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-secondary); box-shadow: var(--shadow-float); text-align: left; white-space: normal; word-break: keep-all;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);
}
.admark-tip b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.admark-tip::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg);
}
.admark-tip[hidden] { display: none; }
/* ── AD 마크 끝 ── */
.fp-why .admark { color: var(--grey400); }
.fp-why .admark-wrap { position: static; }
.fp-why .admark-tip { left: 0; right: 0; top: auto; bottom: calc(100% + 8px); transform: none; width: auto; max-width: none; }
.fp-why .admark-tip::before { display: none; }
.fp-why .admark-tip b { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* 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: var(--ink-strong); color: var(--grey900);
  border: 1px solid var(--ink-strong); 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 var(--ink-link); outline-offset: 3px; }

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

/* ── 지역·후기 칸 (사용자 승인 2026-10-10 — D-922 · 개정 «들어오면 묻기» · 개정 2 «접속 위치 추정») ─────────────────────
      색은 회색 눈금 토큰만, 글자 13px 이상 · 굵기 400/600. 이 세계엔 파랑 버튼이 없고 «채움»은 [지금 상담] 몫이다(D-605·D-635).
   ① 칸 위 기준 막대 — 기준 글자(«경기 기준(접속 위치 추정)») + 눈에 띄는 테두리 단추 [내 위치로 더 정확하게] + 안내 자리.
      넓은 화면에서는 세 칸이 같은 높이(글자 줄 + 단추 44)를 가져 사진 윗선이 맞는다(나머지 두 칸 = .fp-basis-pad 빈 자리).
      한 열(≤768)에서는 빈 자리를 접고 높이를 묶지 않는다. */
.fp-basis {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0;
  min-height: calc(var(--lh-label2) + 8px + 44px);
}
.fp-basis-t {
  margin: 0; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); color: var(--grey100);
}
.fp-basis-pad { visibility: hidden; }
/* [내 위치로 더 정확하게] — 테두리 단추(.fit-more a와 같은 문법, 테두리 grey500 = 잉크 위 5.45:1). 누름 높이 44. */
.fp-basis-btn {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-full); cursor: pointer;
  font-family: inherit; font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold);
  color: var(--grey100); background: transparent; border: 1px solid var(--grey500);
}
.fp-basis-btn[hidden] { display: none; }
.fp-basis-btn:focus-visible { outline: 2px solid var(--grey200); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fp-basis-btn:hover { border-color: var(--grey200); } }
.fp-basis-btn[aria-busy="true"] { cursor: progress; }
/* ② 기다리는 동안(위치를 묻는 중 · 최대 8초) — 칸 내용을 감추고 같은 모양의 자리 표시를 둔다. 움직임 없음(design.md §7 — 기본은 모션 없음). */
.fp-skel { display: none; }
.fp-card.is-waiting > :not(.fp-basis):not(.fp-skel) { display: none; }
.fp-card.is-waiting > .fp-skel { display: block; }
.fp-card.is-waiting .fp-basis-btn { display: none; }   /* 묻는 중에는 단추를 걷는다 — 이미 묻고 있다 */
.fp-skel-photo { display: block; aspect-ratio: 9 / 16; margin-top: 9px; border-radius: 6px; background: var(--grey800); }
.fp-skel-line { display: block; height: 14px; width: 70%; margin-top: 12px; border-radius: 4px; background: var(--grey800); }
.fp-skel-line.is-short { width: 45%; }
/* ③ 칸 아래 지역 고르기 — 진짜 GET 폼. 폰 입력 글자 16px(iOS 확대 방지 — design.md §4). */
.fp-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fp-near-sido { display: flex; gap: 8px; min-width: 0; }
.fp-near-sido select, .fp-near-sido button {
  min-height: 44px; max-width: 100%; padding: 0 12px; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-label1); font-weight: var(--fw-regular);
  color: var(--grey200); background: var(--grey900); border: 1px solid var(--grey600);
}
.fp-near-sido select:focus-visible, .fp-near-sido button:focus-visible { outline: 2px solid var(--grey200); outline-offset: 2px; }
.fp-geo-msg {
  margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); color: var(--grey300);
}
.fp-geo-msg[hidden] { display: none; }
/* 출처 한 줄 — 접속 위치 추정(source ip)으로 선 칸에만(DB-IP CC BY 4.0, geo/NOTICE.txt). */
.fp-credit {
  flex: 1 1 100%; margin: 0;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); color: var(--grey500);
}
.fp-credit a { color: var(--grey300); text-decoration: underline; text-underline-offset: 3px; }
.fp-credit a:focus-visible { outline: 2px solid var(--grey200); outline-offset: 2px; border-radius: 4px; }

/* ── 꼬리: 더 보기 1회 + 고지 ── */
.fit-more { margin-top: 24px; border-top: 1px solid var(--ink-w09);
  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: var(--fw-semibold); color: var(--ink-strong);
  /* ⚠ 카드 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: var(--ink-strong); }
.fit-more a:focus-visible { outline: 2px solid var(--ink-link); 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: var(--ink-link); }
.fit-guest a:focus-visible { outline: 2px solid var(--ink-link); 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: var(--ink-strong); color: var(--grey900); border-color: var(--ink-strong); }
/* 히트 타깃: 15px 글자 + 상하 15px ≈ 52px. 폭은 글자에 맞춘다 — 잉크 카드가 1180px까지 가므로
   전폭 버튼은 «누를 곳»이 아니라 «띠»로 읽힌다(옛 빈 상태의 1076px 버튼이 그랬다, D-627 실측). */
/* 🔴 주 행동은 «뚜렷하게»(D-642, 사용자 지시) — 17→20px, 굵기는 .fp-cta의 600을 700으로
   올려 받는다. 흰 채움이라 대비는 이미 21:1이고, 남은 손잡이는 크기와 굵기뿐이다.
   ⚠ 굵기 값은 600 토큰이다(타이포 점검 2026-10-03, 700+ 0): 라운드 서체(D-890)는 550~1000을 SemiBold 한 벌로 그려 옛 700과
     화면이 같다 — 값만 규칙(400/500/600) 안으로 들였다. 손잡이는 크기(20px)가 진다. */
.fp-cta.fp-cta-lg {
  display: inline-block; width: auto; font-size: 20px; font-weight: var(--fw-semibold); 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; }
/* 🔴 이 격자의 근거 줄은 balance가 아니라 욕심 줄바꿈(wrap)이다(2026-10-07 3차 리뷰 UX-A3-5). «관련 글 N건»(S6) 뒤 둘째 사실이 짧으면
      («경력 2년차») balance가 두 줄 길이를 맞추려고 « · »를 둘째 줄 머리로 보냈다 — 같은 격자 줄에서 «관련 글 1건 · / 경력 23년차»와
      «관련 글 1건 / · 경력 2년차»가 엇갈렸다(390 칸 129px 실측). 사실 한 조각은 덩어리(.fp-why-u)라 wrap이면 늘 « · » 뒤에서 감긴다.
      /fit 위 세 장·명부(fit-rest)의 balance(F4·F6)는 그대로다 — 이 지면 격자만. */
.fp-grid-more .fp-why { text-wrap: wrap; }
/* ⚠ 그라디언트는 «절대 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 이름을 쓰면 글자 덩어리가 그만큼 두꺼워진다. 되돌리려면 글자를 내려야 한다. */
  /* 타이포 점검 2026-10-03 F4 재측정(dev, /fit·/fit/more ≥769): 이름 줄 상자가 24 → 38(title1 28/38)이 되어 오버레이가 14px 높아졌다.
     근거 한 줄 카드 꼭대기 86.6 → 100.6(여유 17.4 — 그대로 둬도 «+6» 안), 근거 두 줄 카드(1440 · 18px)는 114.2 → 128.2로 옛 여유 3.8이
     −10.2가 됐다 → .92를 옛 여유까지만 되돌린다(128.2 + 3.8 = **132**, 램프 47 그대로 → **179**). 덮는 몫 165 → 179 / 367 ≈ 45% → 49%.
     ⚠ 두 줄 카드의 «+6» 미달(3.8)은 이 수정 전부터 있던 조건이다(D-644 머리 주석의 «파리티까지만»과 같은 선택). */
  background: linear-gradient(to top, var(--grey900) 0, var(--ink-fade) 132px, var(--ink-clear) 179px);
}
/* 명부 상자의 사진 object-position도 app.css 묶음(50% 10%)이 정한다 — 옛 8%(모자 쓴 초상의 정수리 대책)는
   걷었다. 10%는 4:5 창에서 마스터 3.0%부터 보여 머리 위 여유가 남는다(D-869). */

/* ── 명부 머리(D-757, 시안 B — 사용자 확정) — 괘선 + 「다른 세무사 N명」 ──
   D-636이 걷은 옛 `.fit-rest-h`(문장 두 줄)와 다르다: 부제가 없고(사용자 지시) «순위»를 말하지 않는다.
   위 세 장(기준으로 고른 무대)과 아래 명부(순위 없음)의 경계가 «카드 크기 차이»뿐이던 것을 세운다.
   제목은 흰 19px/600 — 카드 이름(31px)보다 두 단 아래, 표제 줄(12.5px 자간)보다 두 단 위. 수는 grey400/500. */
.fit-rest-hd { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ink-w09); }
.fit-rest-t { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: var(--ls-xl); color: var(--ink-strong); line-height: 1.35; }
.fit-rest-t b { font-weight: var(--fw-regular); color: var(--grey400); font-variant-numeric: tabular-nums; }
.fit-rest-hd + .fp-grid-rest { margin-top: 14px; }
/* 노트 상태 — [더 보기]가 접힌 뒤 .fit-rest 첫머리에 선다(위 .fit-more의 괘선 자리를 이어받는다). */
.fit-rest > .fit-rest-hd { margin-top: 22px; }

/* ── 「다른 세무사 더 보기」로 열리는 명부(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: var(--ink-link); }

/* ── 더 보기 페이지 — 같은 세계, 목록 밀도는 현행(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: var(--fw-semibold); color: var(--grey400);
  background: var(--ink-w07); border-radius: var(--r-full); padding: 11px 16px;
}
.fm-tabs a.on { background: var(--ink-strong); 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"],
.fp-near-sido.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 var(--ink-w18); border-radius: 8px; padding: 10px 10px; }
.fm-cond button { font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--grey300);
  background: var(--ink-w08); 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-sec(뒤로 가기 간격). */
.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: var(--ink-w08);
}
.fm-pager .cnt { color: var(--grey600); font-variant-numeric: tabular-nums; }
/* 옛 맨 아래 «…로 돌아가기» 링크(.fm-back)는 걷었다 — 뒤로 가기는 지면 맨 위 .pg-back 하나다(3차 정리 통합, design.md §4).
   잉크 무대 밖(흰 바탕)에 서고, 아래 무대와 12px(누름 영역의 아래 여백이 그 간격이다 — 세무시선 글 한 편과 같은 값). */
.fm-sec > .pg-back { margin-bottom: 0; }

/* ── 모바일: 한 사람이 한 화면 — 어둠 속에서 한 명씩 만난다 ── */
@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-skel-photo { aspect-ratio: 4 / 5; }
  .fp-basis-pad { display: none; }   /* 한 열 — 다른 칸과 윗선을 맞출 일이 없다 */
  .fp-basis { min-height: 0; }
  .fp-ov { left: 18px; right: 18px; bottom: 16px; }
  /* 위 세 장 이름(옛 30px)은 아래 ≤767 블록의 display 토큰으로 옮겼다(F4) — 768에서는 기본 title1(28/38)이 같은 28을 든다. */
  .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;
  }
  /* 명부 머리(D-757) — 좁은 화면은 한 단 붙인다. */
  .fit-rest-hd { margin-top: 26px; padding-top: 16px; }
  .fit-rest-t { font-size: 18px; }
  /* ⚠ 모바일 명부는 열이 153px이라 여기서만 한 단 내린다(D-641) — 데스크톱은 같은 눈금이다.
     타이포 점검 2026-10-03 F4: 이름 22/22/500 → title2(20/28 · 768에서 22/30 · 600) — 지시 값 22/28과 행간이 같은 토큰(크기는 폰 −2px).
     title1(24/32)은 크기·행간 모두 더 멀다. 소개말·근거·후기 수 14.5/21.025(소수점) → 14/20 = label2 크기·행간(값이 같은 토큰; body2는
     14/22라 두 줄 소개말 오버레이가 4px 높아지고 768에서 15/24로 뛴다). 굵기는 .fp-why의 400 그대로. */
  .fp-grid-rest .fp-nm { font-size: var(--fs-title2); line-height: var(--lh-title2); letter-spacing: var(--ls-18); }
  /* 지역 줄도 같은 토큰 크기(옛 리터럴 14px — 값 동일, 행간은 지금처럼 상속이라 높이 그대로). body2는 768에서 15로 뛰어 쓰지 않는다. */
  .fp-grid-rest .fp-of { font-size: var(--fs-label2); }
  .fp-grid-rest .fp-why { font-size: var(--fs-label2); line-height: var(--lh-label2); }

  /* ── 🔴 모바일 명부만 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%**가 된다.
     ⚠ 명부 글자를 또 키우거든 이 두 수를 «먼저» 다시 재라.
     타이포 점검 2026-10-03 F4 재측정(dev): 이름 22/22 → title2 20/28(+6) · 근거 14.5/21.025 → label2 14/20(줄마다 −1)로 근거 한 줄 카드
     꼭대기 79 → 84(여유 11 — «+6» 안), 근거 두 줄 카드는 100 → 104(390~767)·104 → 108(768)로 옛 여유 −5·−9가 −9·−13이 됐다 →
     옛 여유까지만 되돌린다: .92 = 95 + 4 = **99**, 램프 47 그대로 → **146**(D-644의 «파리티까지만»과 같은 선택 — 두 줄 카드 미달은 원래 조건). */
  .fp-grid-rest .fp-photo::after {
    background: linear-gradient(to top, var(--grey900) 0,
                var(--ink-fade) 99px, var(--ink-clear) 146px);
  }
}
/* 모바일 위 세 장 이름 — display(28/38) · 타이포 점검 2026-10-03 F4(옛 30px · 행간 상속 22). ≤767만: 토큰은 768부터 데스크톱 값
   (display 36/46)이라 768을 이 블록에 넣으면 한 열 카드 이름이 36으로 뛴다 — 768은 기본 규칙의 title1(28/38)이 같은 28을 든다.
   (0,1,0)이라 명부(.fp-grid-rest .fp-nm, 위 ≤768 블록 (0,2,0))는 그대로 title2다. */
@media (max-width: 767px) {
  .fp-nm { font-size: var(--fs-display); line-height: var(--lh-display); }
}

/* /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; }
  /* 이름 31px 단은 걷었다(타이포 점검 2026-10-03 F4 «컨테이너 쿼리 31px도 28로») — 기본 title1이 ≥768에서 28/38이라
     모바일 위 세 장(display 28)과 같은 눈금이고, 이 사다리가 막던 «모바일이 더 큰 역전»이 없다. */
  .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이 줄이라고 한
        바로 그 수치다. 파리티까지만 되돌리고 더 가지 않는다.
     타이포 점검 2026-10-03 F4 재측정(dev, 뷰포트 769~1000): 이름 줄 상자 24 → 38(title1)로 가장 높은 카드(눈썹 제 줄) 꼭대기 149 → 163,
     옛 여유 9가 −5가 됐다(이름 윗변이 램프에 앉는다) → «+6» 산술로 다시 잡는다: 163 + 6 = **169**, 램프 62 그대로 → **231**
     (덮는 몫 220 → 231 / 322.6 ≈ 68% → 72%). */
  .fp-photo::after {
    background: linear-gradient(to top, var(--grey900) 0,
                var(--ink-fade) 169px, var(--ink-clear) 231px);
  }
  @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,
                  var(--ink-fade) 153px, var(--ink-clear) 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 var(--ink-w14); }
.fit-me-hd { display: flex; align-items: baseline; gap: 12px; }
.fit-me-t { font-size: 15px; font-weight: 600; color: var(--grey100, var(--grey200)); letter-spacing: -.01em; }
.fit-me-v { margin-left: auto; font-size: 13.5px; color: var(--grey500); white-space: nowrap; }

/* 4카드 · 행 높이 공유(서브그리드) — 상태/제목/설명/칩이 카드 간 수평 정렬 */
.fit-me-seats {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 12px; margin-top: 14px; align-items: stretch;
}
.fit-me-seats > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 14px 14px 12px; border-radius: 12px;
  background: var(--ink-w04); border: 1px solid var(--ink-w10);
}
.fit-me-seats li.on {
  border-color: var(--ink-w42); background: var(--ink-w07);
}
/* 상태 필 + 초록/회색 점 */
.fit-me-st {
  display: inline-flex; align-items: center; justify-content: center;
  justify-self: start; gap: 8px;
  min-height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.02em; line-height: 1;   /* 굵기 600 토큰(옛 700 — 라운드에선 같은 SemiBold, 화면 동일) */
  color: var(--grey400); background: var(--ink-w06);
  border: 1px solid var(--ink-w14);
}
.fit-me-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--grey600); box-shadow: 0 0 0 2px var(--grey800);
}
.fit-me-seats li.on .fit-me-st {
  color: var(--grey900); background: var(--ink-strong); border-color: var(--ink-strong);
}
.fit-me-seats li.on .fit-me-dot {
  background: var(--success); box-shadow: 0 0 0 2px var(--grey100);
}
.fit-me-seats b {
  display: block; margin-top: 10px; align-self: start;
  font-size: 17.5px; font-weight: 600; color: var(--grey300); letter-spacing: -.02em;
  line-height: 1.3; word-break: keep-all;
}
.fit-me-seats li.on b { color: var(--ink-strong); }
.fit-me-seats em {
  display: block; margin-top: 6px; align-self: start;
  font-size: 14.5px; font-style: normal; color: var(--grey500); line-height: 1.45;
  word-break: keep-all;
}
.fit-me-metrics {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; align-self: end;
}
.fit-me-chip {
  position: relative; display: inline-flex;
}
.fit-me-chip-l {
  display: inline-flex; align-items: center;
  padding: 5px 9px; border-radius: 8px;
  font-size: 14.5px; font-weight: var(--fw-regular); font-style: normal;
  color: var(--grey200); background: var(--ink-w08);
  border: 1px solid var(--ink-w10); cursor: help;
}
.fit-me-chip:focus { outline: none; }
.fit-me-chip:focus-visible .fit-me-chip-l,
.fit-me-chip:hover .fit-me-chip-l {
  border-color: var(--ink-w35); background: var(--ink-w12);
}
.fit-me-tip {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  width: max-content; min-width: 240px; max-width: 340px;
  padding: 14px 16px; border-radius: 12px;
  font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.55;
  color: var(--grey200); background: var(--grey800);
  border: 1px solid var(--ink-w18);
  box-shadow: 0 12px 32px var(--ink-dim);
  word-break: keep-all;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px); transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.fit-me-tip-row {
  display: grid; grid-template-columns: 2.6em 1fr; gap: 8px 10px;
  align-items: start;
}
.fit-me-tip-row > em {
  margin: 0; font-style: normal; font-weight: var(--fw-semibold); font-size: 13px;   /* 굵기 600 토큰(옛 700 — 화면 동일) */
  line-height: 1.55; color: var(--ink-strong); letter-spacing: -.01em;
}
.fit-me-tip-row > span {
  font-size: 14px; line-height: 1.55; color: var(--grey300);
}
.fit-me-chip:hover .fit-me-tip,
.fit-me-chip:focus-within .fit-me-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 맨 왼쪽 카드 팁이 잘리면 오른쪽으로 */
.fit-me-seats li:first-child .fit-me-tip { left: 0; right: auto; }
.fit-me-seats li:last-child .fit-me-tip { left: auto; right: 0; }

.fit-me-note { margin-top: 14px; max-width: 720px; font-size: 14.5px; color: var(--grey400);
               line-height: 1.65; word-break: keep-all; }
.fit-me-note b { font-weight: 600; color: var(--grey100); }
.fit-me-links { margin-top: 11px; font-size: 13px; color: var(--grey500); }
.fit-me-links a { color: var(--ink-link); text-decoration: none; }
.fit-me-links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  /* 2×2: 위·아래 줄이 각각 4행을 공유하도록 8행 */
  .fit-me-seats {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto 1fr auto auto auto 1fr;
    gap: 14px 12px;
  }
  .fit-me-v { margin-left: 0; }
  .fit-me-hd { flex-wrap: wrap; gap: 4px 12px; }
  /* 말풍선을 칩이 아니라 «칸»에 가둔다 — 칩 기준 max-content(최대 340px)는 오른쪽 칸에서 화면 밖으로 나갔다.
     ⚠ 위 first/last-child 규칙(0,3,1)을 이기려고 nth-child로 같은 무게를 맞추고 뒤에 둔다. */
  .fit-me-seats > li { position: relative; }
  .fit-me-chip { position: static; }
  .fit-me-seats > li:nth-child(n) .fit-me-tip { left: 8px; right: 8px; width: auto; min-width: 0; max-width: none; }
}

/* 상담노트 업종 안내 한 줄 (D-675) — 잉크 지면의 본문 단(grey500) + 링크는 눈썹의 #4593FC.
   🔴 버튼이 아니다: 이 지면의 «채운» 버튼은 주 행동 하나뿐이고, 이 줄은 «권유»지 주 행동이 아니다. */
.fit-noteind { margin: 12px 0 0; font-size: 14.5px; color: var(--grey500); line-height: 1.6; }
/* fit-p7 ⑥ — «조건 바꾸기» 폼 안으로 옮겼다(폼은 줄바꿈 flex). 한 줄을 통째로 쓴다. */
.fit-cond .fit-noteind { flex: 1 1 100%; margin: 4px 0 0; }

/* ── fit-p7(사용자 승인 2026-10-10) — 가독성 정리 ───────────────────────────────────────
   ② 칸 이름 + 기준 줄 한 줄: 칸 이름은 옛 사진 위 눈썹의 파랑을 그대로 받는다(굵기는 기준 줄의 600).
   ④ 노트가 하나면 노트 고르기 대신 «새 상담노트 쓰기»(링크 톤).
   ⑤ «이 세 분을 고른 기준» — 세 칸 바로 아래. 칸마다 한 줄 + 공통, 숫자·순환은 안쪽 «자세히».
   ⑦ 노트 없음 — 세 칸 위 한 줄(사진이 곧 프로필 문). 글자 13px 이상 · 굵기 400/600 · 색은 토큰만. */
.fp-basis-ax { color: var(--ink-link); }
.fit-newnote { flex: 1 1 100%; font-size: 15px; color: var(--ink-link); padding: 8px 0; }
.fit-newnote:focus-visible { outline: 2px solid var(--ink-link); outline-offset: 3px; border-radius: 4px; }
.fit-why3 { margin-top: 16px; }
.fit-why3-list { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ink-w09); }
.fit-why3-list li { font-size: 14px; color: var(--grey400); line-height: 1.6; margin-top: 4px; word-break: keep-all; }
.fit-why3-list li:first-child { margin-top: 0; }
.fit-why3-list b { color: var(--grey100); font-weight: var(--fw-semibold); margin-right: 4px; }
.fit-how-more { margin-top: 8px; }
.fit-next { margin: 24px 0 0; font-size: 15px; color: var(--grey200); line-height: 1.6; word-break: keep-all; }
.fit-noteind b { color: var(--grey200); font-weight: var(--fw-semibold); }
.fit-noteind a { color: var(--ink-link); margin-left: 4px; }
.fit-noteind a:focus-visible { outline: 2px solid var(--ink-link); outline-offset: 3px; border-radius: 4px; }

/* ══ 지역 고르기(사용자 요청 2026-10-11 fit-p8) — 칩 단추 «경기 · 바꾸기» → PC 팝오버 · 폰(<600) 바닥 시트 ═══════════════════
   단추는 칸 위 막대의 테두리 단추(.fp-basis-btn)와 같은 문법(누름 높이 44). 판은 흰 면(셈톡 기본 면) — 잉크 위에 뜨는 층이라
   라이트 토큰을 쓴다. 지금 고른 칩은 파랑 채움(--primary-pressed #1B64DA · 흰 글자 대비 5.4:1).
   글자 13px 이상 · 굵기 400/600 · 색은 토큰 · 모서리 16(--r-lg) · 8px 리듬. 판·단추는 hidden으로 오고 스크립트가 드러낸다(fit-live.js). */
.rgn-btn[hidden] { display: none; }
/* 칸 위 단추 줄 — [내 위치로 찾기] + «경기 · 바꾸기»(위치 기준이면 지역 단추 하나). 좁으면 감긴다(8px 리듬). */
.fp-basis-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rgn-btn-v { color: var(--grey100); }
.rgn-btn-a { color: var(--ink-link); }
/* JS가 살아 있으면 옛 select는 숨긴다 — 값은 그대로 폼에 실린다(칩을 고르면 이 select 값을 바꿔 change를 낸다). */
form.js [data-rgn-fallback], form.fp-near-sido.js { display: none; }
/* 폼 안(«조건 바꾸기» · /fit/more 거르개)에서는 옆 select와 같은 칸 모양 — 옛 select 자리에 그대로 선다(좁은 화면은 전폭 스택 규칙을 따른다). */
.fit-cond .rgn-btn, .fm-cond .rgn-btn {
  min-height: 44px; padding: 0 12px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body2); font-weight: var(--fw-regular);
  background: var(--grey900); border: 1px solid var(--ink-w18); border-radius: 8px;
}

.rgn-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.rgn-scrim.is-sheet { background: var(--ink-dim); }
.rgn-scrim[hidden], .rgn-pop[hidden] { display: none; }
.rgn-pop {
  position: fixed; z-index: 61; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 16px; background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-float);
}
.rgn-pop:focus { outline: none; }
.rgn-pop.is-sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 80vh; overflow-y: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-width: 1px 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
}
.rgn-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rgn-t { margin: 0; font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); color: var(--text-primary); }
.rgn-x {
  min-width: 44px; min-height: 44px; padding: 0 8px; margin-right: -8px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body2); font-weight: var(--fw-regular); color: var(--text-secondary);
}
.rgn-geo {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 16px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body2); font-weight: var(--fw-semibold); color: var(--primary-pressed);
  background: var(--primary-light); border: 0; border-radius: var(--r-md);
}
.rgn-geo[hidden] { display: none; }
.rgn-geo[aria-busy="true"] { cursor: progress; }
.rgn-note { margin: 8px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.rgn-pop .rgn-msg { margin: 8px 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.rgn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.rgn-chip {
  min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-full); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body2); font-weight: var(--fw-regular); color: var(--text-primary); background: var(--surface-alt);
}
.rgn-chip[aria-pressed="true"] { background: var(--primary-pressed); color: var(--surface); font-weight: var(--fw-semibold); }
.rgn-x:focus-visible, .rgn-geo:focus-visible, .rgn-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rgn-chip:not([aria-pressed="true"]):hover { background: var(--grey200); }
}