/* 공개 콘텐츠 표면 — 지도.
   토큰(tokens.css)만 쓰고 app.css는 건드리지 않는다(공용 파일 회피).
   🔴 지도 C안 토큰 정리(사용자 결정 2026-10-03 Q11·Q4 · Q15 «지도 파일 범위만»): 글자는 typography.css 크기 토큰 + 굵기
      400/500/600(700·소수점 크기 없음), 파란 **글자**는 --primary-pressed(#1B64DA — 버튼·면·핀 바탕의 #3182F6은 그대로),
      리터럴 색은 토큰으로. 예외 하나: 목록 행 제목 `.mp-top b` 17px/600(D-880 P-080 사용자 지시 — 지금은 상호, D-917).
      옛 예외 «거리 `.mp-dist` 12px»는 D-917(11차 B8 수정 메모 · 시안 Q1~Q5 — 13px 아래 글자 0)에서 13px(caption1)로 걷었다.
      공용 토큰·공용 규칙(app.css)은 고치지 않고, 지도 화면에서만 덮어쓴다.
      지도 전용 색 하나(군집 남색)는 공용 토큰이 아니라 아래 .map-layout의 지역 변수로 둔다.

   ⚠ 세금 캘린더 규칙(.cal-* · .aud-* · .dday · .disclaimer · .article-cta)은 전부 뺐다 —
     기능·화면·라우트를 모두 삭제했다(D-229, 사용자 결정). 되살리지 말 것.
   ⚠ `.page-head`만 남겼다 — 캘린더가 아니라 pro-quotes·pro-subscription·pro-ads·
     directory-map 네 지면이 쓴다. 캘린더와 같이 지우면 그 넷의 제목 여백이 무너진다. */

/* ── 페이지 머리 ───────────────────────────────────────────── */
.page-head { margin-top: var(--s-2xl); }
/* 제목·부제는 페이지 머리 한 부품(app.css .pg-title · .pg-sub)과 **같은 선언**이다(D-880, P-075 — 옛 26px·15px).
   타이포 3단계 묶음 ①: 제목 title1(24/32 · ≥768 28/38, 사용자 결정 2026-10-03) · 600 · --ls-22 · balance(옛 22/700/1.35/−0.4px),
   부제 body2 + pretty(옛 14/1.5). 🔴 app.css를 바꾸면 여기도 같은 PR에서 바꾼다(CrossShapeI1Test가 본문을 대조한다).
   ⚠ 제목 위 여백(margin-top)은 지면 값 그대로다 — 세무사 지도는 사용자 지시(2026-08-08)로 따로 정했다. */
.page-head h1 {
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22);
  color: var(--grey900); text-wrap: balance;
}
.page-head p {
  margin-top: 6px;
  font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--grey600); text-wrap: pretty;
}

/* ── 이 화면의 셸 정리 (사용자 결정 2026-10-03 지도 C안 Q6) ─────────────
   · 푸터는 **이 화면에서만** 숨긴다 — layout.html 구조는 그대로 두고 지도가 있는 본문(:has(.map-layout))만 고른다.
     (content.css는 pro 화면 셋도 .page-head 때문에 싣지만 그 화면엔 .map-layout이 없다.) :has가 없는 옛 브라우저는 푸터가
     그대로 보일 뿐이다(기능 손실 없음).
   · 푸터 바닥 줄의 이용약관·개인정보처리방침은 메뉴 하단(.side-legal — layout.html, MapController navLegalLinks)으로 옮긴다.
     셸 CSS는 건드리지 않고 모양은 여기서 준다. 접힌 레일(≥769 html.rail, 아이콘 줄)에서는 글자 링크가 들어갈 폭이 없어
     감추고, 펼치거나(peek) 좁은 화면 드로어로 열면 보인다. */
.main:has(.map-layout) > .shell-footer { display: none; }
/* 푸터를 숨겼으니 «본문 칸이 한 화면을 채워 푸터를 첫 화면 밖으로 민다»(shell.css `.main > :nth-last-child(2)` min-height, D-736)도
   이 화면에선 쓸모가 없다 — 그대로 두면 넓은 화면(≥900)에서 빈 곳으로 64px 스크롤됐다(검증 실측 1440×900 scrollH 964).
   모든 폭에 건다(푸터 숨김과 같은 범위). 셸 파일은 그대로다. */
.main:has(.map-layout) > :nth-last-child(2) { min-height: 0; }
.side-legal {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0 12px;
  padding: 2px 22px 4px;
}
/* 링크 한 줄의 눌리는 높이 44(design.md §4 — 모바일 히트 타깃) — 글자는 그대로, 위아래 여백으로만 키운다. */
.side-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13);   /* 13px · 400(D-923 규칙 — 옛 12 · 500) */
  color: var(--text-tertiary);
}
.side-legal a:hover { color: var(--text-secondary); text-decoration: underline; }
@media (min-width: 769px) {
  html.rail:not(.peek) .side-legal { display: none; }
}
/* (목록 끝·상세 끝 약관 줄 .mp-legal은 걷었다 — 사용자 지시 2026-10-03 지도 후속. 약관 링크는 위 메뉴 하단 .side-legal 하나다.) */

/* ── 지도 + 좌측 패널 ──────────────────────────────────────── */
/* 좌측 고정 패널(목록) + 우측 지도 — 목록과 지도를 동시에 본다.
   좁은 화면(≤899px)에서는 패널이 화면 한 장짜리 지도 위의 **시트**(접힘 ↔ 읽기, 지도 C안 Phase 1)가 된다(아래 미디어 구획).
   🔴 폭 기준은 사용자 결정 2026-10-03 지도 C안 Q6 — <600 전체 폭 시트 · 600~899 최대 480px 시트(왼쪽 정렬) · ≥900 패널.
      옛 지도 기준 720/721은 이 값(899/900)으로 통일했다. 셸의 768(드로어·상단바)과 타이포의 768은 셸 몫이라 그대로다.
      JS의 같은 기준은 region-map.js SHEET_MEDIA 한 곳이다(시험이 둘을 대조한다).
   ⚠ hidden 속성으로 여닫는 요소는 전부 `[hidden]{display:none}` 가드를 함께 둔다 —
     author display가 UA [hidden]을 이겨 "숨겼는데 보이는" 사고가 반복됐다. */
.map-layout {
  /* 지도 전용 색 — 군집 배지 남색(D-248 M-04). 공용 토큰에 없는 색이라 이 화면 범위의 변수 한 곳에 둔다(핀·배지는 #tax-map 안이라 상속된다). */
  --map-cluster-ink: #14243D;
  display: grid; grid-template-columns: 364px minmax(0, 1fr);   /* 넓은 화면 364 패널(D-897 Q6 보론 — 사용자 결정 2026-10-09 «모두 추천대로», 옛 520 · 그 전 400) · 좁은 화면은 아래 구획이 block으로 */
  gap: var(--s-lg); align-items: stretch;
  margin-top: var(--s-lg);   /* 옛 인라인 style — 좁은 화면(시트, 아래 구획)은 0이라 CSS로 옮겼다 */
}
.map-layout > .map-panel { grid-column: 1; grid-row: 1; }
.map-layout > .map-stage { grid-column: 2; grid-row: 1; }

.map-stage { position: relative; min-width: 0; }
.map-canvas {
  height: 100%; min-height: 560px;
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border);
}

/* ── 패널 ── */
.map-panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  max-height: calc(100vh - var(--topbar-h) - 140px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden;
}
.mp-grip { display: none; }   /* 좁은 화면 전용 — 아래 미디어 구획이 켠다 */
.mp-head {
  display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-lg) var(--s-lg) 0;
}
.mp-title { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
.mp-count { margin-left: 2px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.mp-online-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--text-secondary); cursor: pointer;
  white-space: nowrap;
}
.mp-online-toggle input { accent-color: var(--presence-online); }
/* 지도 키가 없으면 템플릿이 hidden을 건다(region-map.js가 안 실려 죽은 토글) — 가드 필수. */
.mp-online-toggle[hidden] { display: none; }
/* 토글이 무엇을 하는지 미리 말하는 한 줄(D-727) — 패널 머리 아래.
   ⚠ `[hidden]` 가드는 토글과 같은 이유로 필수다: author display가 UA 기본을 이긴다. */
/* (.mp-depth-note 패널 고지는 D-754에서 은퇴) */

/* 조건 줄 — 목록과 같은 조건 줄(D-878 P-009): 검색 칸이 맨 위, 그 아래 알약 셋(지역·분야·업종).
   알약·드롭다운 모양은 app.css의 목록 규칙(.dir-facet-*)을 그대로 쓰고, 364px 패널에 맞는 것만 고친다.
   ⚠ .dir-search의 flex-basis(240px)는 목록의 «가로 줄» 값이다 — 세로로 쌓는 여기서는 높이로 먹히므로 푼다. */
.mp-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--s-lg) 0; }
.mp-filters .dir-search { flex: none; min-width: 0; }
.mp-filters .dir-search .input { height: 42px; }
.mp-pills.dir-filters { margin: 0; gap: 6px; }
.mp-pills .dir-facet-btn { height: 36px; padding: 0 12px; }
/* 드롭다운 패널 — 기준은 알약 줄(.dir-filters relative, D-470)이고, 패널 폭 안에 **왼쪽부터** 편다.
   목록의 right:0 · 460px는 화면 왼쪽에 붙은 이 패널에서 왼쪽 밖으로 잘린다. */
.mp-pills .dir-facet-pop { left: 0; right: 0; }
/* 드롭다운 높이 상한 — 모든 폭. 지도 화면은 페이지가 스크롤되지 않고(좁은 화면 시트·넓은 화면 패널 둘 다 칸이 자른다) 드롭다운이 칸 안에서
   펴지므로, 긴 목록(분야 9종 + [적용])은 드롭다운 **안에서** 스크롤해 끝까지 닿는다. 넓은 화면은 아래 구획이 패널 바닥에 맞춰 더 줄이고,
   region-map.js(fitFacetPop)가 열 때 «패널 바닥 − 드롭다운 위» 실측으로 다시 맞춘다. */
.mp-pills .dir-facet-pop { max-height: min(60vh, 420px); overflow-y: auto; }
.mp-pills .dir-region-pop { width: auto; max-width: none; grid-template-columns: 110px 1fr; }
.mp-pills .dir-spec-pop { width: auto; max-width: none; }
.dir-ind-pop { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
/* (데스크톱 «패널 넘침 보이기 + 목록 아래 모서리 둥글리기»는 걷었다 — 넓은 화면 패널은 헤더 아래 전체 높이의 모서리 없는 칸이고
   드롭다운은 패널 안에서 편다. 아래 «넓은 화면 — 364 패널» 구획.) */

.map-panel .sort-bar { margin: 10px var(--s-lg) 4px; }

/* ── 공용 부품의 지도 화면 한정 덮어쓰기 (사용자 결정 2026-10-03 지도 C안 Q11·Q4) ──
   app.css의 공용 규칙(.filter-chip.on 700 · 지역 선택지 700 · .spec·열린 알약의 --primary 글자)은 다른 화면도 쓰므로 고치지 않고,
   지도 패널·카드 안에서만 덮는다. 켜진 칩은 굵기가 같아져도 테두리·바탕이 함께 바뀌어 색만으로 가르지 않는다(§7).
   글자 파랑은 눌림 파랑 --primary-pressed(#1B64DA) — --primary-light 위 #3182F6은 3.3:1로 12~14px 글자 하한(4.5:1)에 못 미친다. */
.map-panel .filter-chip.on,
.map-panel .dir-region-opt.on,
.map-panel .dir-region-gu-chip.on { font-weight: var(--fw-semibold); }
.map-panel .spec { color: var(--primary-pressed); }
/* «기장대리» 칩 — 칩 줄 맨 앞 + 살짝 강조(사용자 지시 2026-10-03 지도 후속 3). 바탕·글자는 다른 분야 칩과 같은 토큰(--primary-light · --primary-pressed)이고,
   굵기 600과 1px 안쪽 테두리(--primary)로만 가른다 — 새 색 없음, 색만으로 가르지 않는다(§7). 목록 행·상세 둘 다. */
.map-panel .spec.spec-bookkeep { font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--primary); }
/* «기장 받아요» 알약(D-900 ② — 사용자 결정 2026-10-04 «시안대로») — 위 강조 칩과 **같은 규칙**(같은 토큰 · 같은 칩 치수)이다.
   목록 행·상세 요약의 칩 줄 맨 앞에 서고, 그 행에서는 기장대리 칩 강조를 뺀다(directory-map.html · region-map.js). 새 색·새 토큰 없음. */
.map-panel .spec.spec-accepts { font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--primary); white-space: nowrap; }
.map-panel .dir-facet[open] > .dir-facet-btn,
.map-panel .dir-facet-d[open] > .dir-facet-btn,
.map-panel .dir-region-gu-chip:hover { color: var(--primary-pressed); }
/* 펼침 꺾쇠는 SVG(fragments/line-icons :: caret — D-892, 글자 ▾는 라운드 서체에 없다). 색은 공용 .dir-caret(--text-tertiary)를 따른다. */
.map-panel .dir-caret { flex: none; }

/* 지역 안내 띠(클러스터로 거른 지역) · 상담노트 분야 상태 띠(.mp-note-state, 지도 B안 M5) — 한 모양이다.
   🔴 글자색은 눌림 파랑 --primary-pressed(#1B64DA, 바탕 --primary-light 위 4.8:1)다. 옛 --primary(#3182F6)는 같은 바탕에서
      3.3:1이라 13px·12px 글자의 4.5:1에 못 미쳤다 — 상태 띠를 같은 모양으로 들이면서 지역 띠도 함께 올렸다(D-885). */
.mp-region-note {
  display: flex; align-items: center; gap: var(--s-sm);
  margin: 6px var(--s-lg) 0; padding: 8px var(--s-md);
  background: var(--primary-light); border-radius: var(--r-md);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--primary-pressed);
}
.mp-region-note[hidden] { display: none; }
/* [전체 보기] — 지역 띠는 button(클라 축), 상태 띠는 진짜 링크 a(서버 조건 — dir-filter.js가 가로챈다). 모양은 한 벌. */
.mp-region-clear {
  flex: none; margin-left: auto; border: 0; padding: 4px 8px; border-radius: var(--r-sm);
  background: transparent; color: var(--primary-pressed); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); cursor: pointer;
  text-decoration: underline; white-space: nowrap;   /* 13px(D-923 규칙 — 옛 12) */
}
/* 기장 안내 줄(사용자 지시 2026-10-03 지도 후속 3) — 목록 머리(조건·정렬 줄) 아래, 목록 행 위 한 줄 링크. 상태 띠(.mp-region-note)와 다른 모양:
   띠는 «지금 걸린 조건»(옅은 파랑 판), 이 줄은 «다음 행동»(흰 바탕 + 테두리 + 파랑 글자). 눌리는 높이 44. 끝은 선 아이콘(.row-go). */
.mp-bk-guide {
  flex: none; display: flex; align-items: center; gap: var(--s-sm);
  margin: 6px var(--s-lg) 0; padding: 0 var(--s-md); min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--primary-pressed); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold);
  text-decoration: none;
}
.mp-bk-guide[hidden] { display: none; }   /* 지역 묶음 띠가 서 있는 동안 숨는다(region-map.js showRegionNote) */
.mp-bk-guide:hover { background: var(--primary-light); }
.mp-bk-guide .row-go { color: var(--primary-pressed); }
/* 업종 줄(지도 B안 M6) — 상태 띠 아래 한 단락. 링크는 문장 속 링크 .t-link(app.css), 작은 글은 광고 고지. */
.mp-note-ind { margin: 6px var(--s-lg) 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-secondary); }
.mp-note-ind[hidden] { display: none; }
.mp-note-ind b { font-weight: var(--fw-semibold); }
.mp-note-ind .t-link { font-weight: var(--fw-semibold); color: var(--primary-pressed); }
.mp-note-ind small { display: block; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }   /* 13px(D-923 규칙 — 옛 12) */

/* 패널의 빈 상태(서버 0명·접속 중만 보기로 전부 가림)는 app.css `.empty` 부품이다(3차 정리 X4 — 옛 회색 판 .mp-empty를 걷었다).
   JS가 hidden으로 여닫는 쪽의 [hidden] 못도 부품 쪽(.empty[hidden])이 박는다. */

/* 🔴 목록 조각 상자([data-dir-results], 사용자 지시 2026-08-09)는 **세로 배치를 그대로 통과시켜야
   한다.** .map-panel은 flex column이고 스크롤을 맡는 것은 .mp-list(flex:1 · overflow-y:auto)인데,
   그 사이에 평범한 블록 상자가 하나 끼면 .mp-list가 더 이상 flex 자식이 아니게 되어 자기 높이
   전부로 늘어난다 — 패널은 overflow:hidden이라 **아래쪽 세무사가 잘려서 아예 닿을 수 없다**
   (실측으로 겪었다: 패널 574px에 내용 1897px).
   display:contents가 아니라 flex 통과를 쓰는 이유: contents는 상자를 없애버려서 조각을 받아오는
   동안의 흐림(aria-busy, app.css)이 그려지지 않는다 — 상자는 남기고 배치만 넘긴다. */
.map-panel > [data-dir-results] {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0;
}
.mp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-sm) 0; margin-top: 4px; }
.mp-row {
  position: relative;   /* 행 안의 화면낭독기 글(.sr-only «평점», absolute)이 스크롤 칸 밖 조상에 붙지 않게 */
  display: flex; align-items: flex-start; gap: var(--s-md);
  padding: var(--s-md) var(--s-lg); color: inherit;
}
.mp-row[hidden] { display: none; }   /* 접속중만 보기·지역 필터가 hidden으로 거른다 */
.mp-row + .mp-row { border-top: 1px solid var(--border); }
.mp-row:hover { background: var(--surface-alt); }
/* 핀 ↔ 목록 양방향(M-02) — 핀을 누르면 그 행이 하이라이트된다(옅은 파랑 바탕 + 파랑 틴트 테두리 — 토큰, 옛 리터럴 #EFF6FF·#BFDBFE). */
.mp-row.is-selected { background: var(--primary-light); box-shadow: inset 0 0 0 2px var(--tint-blue-line); }
/* 사진 56px — 사용자 결정 2026-10-03 지도 C안 Q11(«목록 행 사진은 지도 안에서만 56px, 프로필 편집 미리보기는 그대로»).
   옛 88px(사용자 지시 2026-08-09 «대각선 2배», D-189)는 시트 한 화면에 행이 셋도 안 들어가 걷었다. 둥근 네모(r-lg)·cover는 그대로.
   ⚠ 프로필 편집의 «세무사 지도» 미리보기 칸(profile-edit.css .pc-pv-map 66px)은 이 값을 따라가지 않는다 — 계약을 나눴다
     (PhotoCropContractTest). 1:1 창이라 사진 오버레이 기하(머리 9~39%)는 크기와 무관하게 그대로 맞는다.
   이니셜 폴백(span.avatar)도 같은 셀렉터가 같은 크기로 잡는다.
   사진의 object-position(50% 10%)은 app.css 세무사 사진 묶음이 img.avatar로 잡는다 — 여기서 다시 선언하지 마라(D-869). */
.mp-row .avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r-lg); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); color: var(--text-secondary);
}
.mp-main { flex: 1 1 auto; min-width: 0; display: block; }
/* ── 목록 행 세 줄(D-917 — 사용자 결정 2026-10-09 11차 B8 수정 메모 1~3 · 시안 Q1~Q4) ──
   ① 제목 줄(.mp-top) = 상호 + 오른쪽 위 접속 상태(.mp-tr — 상호와 같은 높이) · 한 줄(nowrap)
      🔴 오른쪽 위에 **거리는 없다**(D-897 Q6 보론 — 사용자 요청 2026-10-09 «지도 왼쪽 목록 줄의 오른쪽 위에서 거리를 빼고, 접속 중/오프라인만»).
         거리는 상세 머리 알약(.mp-sum-dist)·핀 이름표·가까운순 정렬이 그대로 쓴다 — 목록 줄에서만 뺐다.
   ② 작은 줄(.mp-sub) = «홍길동 세무사 · 지역»만 — 14px(body2, ≥768 15px) · 400(Q1 ⓐ — 옛 13px에서 한 단 크게)
   ③ 맨 아래 한 줄(.mp-foot) = 별점·후기 수 + 분야 칩(최대 3장 · 한 줄 · 넘치면 뒤 칩부터 숨김 — region-map.js fitRows)
   글자는 13px 아래가 없다 — 접속 상태·별점·칩 12 → 13px(caption1). 줄 끝 꺾쇠는 지도 목록에서만 뺐다(Q2 ⓐ). */
.mp-top { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: nowrap; min-width: 0; }
/* 사진이 커진 만큼 제목이 1순위.
   🔴 P-080 (나) + 사용자 지시(D-880, 2026-09-27 «세무사명은 폰트크기를 조금 더 크게»): 제목 **600 · 17px**
      (한 단 크게 — 이제 자리의 글자는 상호다, D-917 B13 메모). 700은 화면 머리(h1·h2)의 값이다(design.md 2절).
      (옛 오른쪽 위 거리 500 · 눌림 파랑 규칙은 거리와 함께 걷었다 — D-897 Q6 보론. 상세 거리 알약 .mp-sum-dist는 그대로다.)
   넘칠 때만 단계 줄임(시안 Q2 ⓐ): region-map.js fitRows가 제목 줄에 안 들어가는 행만 data-fit을 단다 — 17 → 16(heading) → 14(label2) → 13(caption1),
      줄 높이 24는 그대로. 넘침 판정은 글줄 상자(Range) 폭 — 소수점 넘침(scrollWidth 정수 판정이 못 보던 0.4px)도 잡는다. 그래도 안 되면(상호가 아주 길 때)
      줄바꿈으로 전체를 보인다(data-fit="wrap" — 목록은 상호 전체 표시, 요청 1절). 무JS 안전망은 «…»(JS가 있으면 생기지 않는다). */
.mp-top b { font-size: 17px; font-weight: 600; }
.mp-top b {
  flex: 0 1 auto; min-width: 0; line-height: var(--lh-heading); letter-spacing: var(--ls-18);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-top b[data-fit="16"] { font-size: var(--fs-heading); letter-spacing: var(--ls-14); }
.mp-top b[data-fit="14"] { font-size: var(--fs-label2); letter-spacing: var(--ls-14); }
.mp-top b[data-fit="13"] { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); }
.mp-top b[data-fit="wrap"] { font-size: var(--fs-caption1); letter-spacing: var(--ls-13); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* 오른쪽 위 — 접속 상태만(B8 수정 메모 1 · D-897 Q6 보론 — 거리는 뺐다). 늘 한 줄이고 줄어들지 않는다(제목이 먼저 줄어든다).
   상태는 **색이 아니라 굵기**로 가른다(사용자 요청 2026-10-09 «색 대신 글자 굵기로»): 접속 중 600 · 그 밖(오프라인·자리 비움·상담 중) 400,
   글자색은 둘 다 같은 토큰(--text-tertiary — 공용 .presence와 같다). 굵기 400·600 둘뿐(지도 규칙). 접속 점(.dot-presence — 공용 부품)은 그대로 둔다:
   점은 핀·상세·고르기 목록과 같은 한 벌의 접속 표시이고, 굵기가 더해져 색만으로 가르지 않는다(§7 — 색약·흑백에서도 굵기로 읽힌다). */
.mp-tr { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-sm); white-space: nowrap; }
.mp-tr .presence { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
.mp-row[data-presence="online"] .mp-tr .presence { font-weight: var(--fw-semibold); }
.mp-sub {
  display: block; margin-top: 2px; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 맨 아래 한 줄(B8 수정 메모 3) — 별점·후기 수(줄어들지 않음) + 칩 줄(남는 폭). (옛 «내려온 거리»는 거리와 함께 걷었다 — D-897 Q6 보론.) */
.mp-foot { display: flex; align-items: center; gap: var(--s-sm); margin-top: 6px; min-width: 0; white-space: nowrap; }
.mp-rate {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); color: var(--text-secondary);
}
/* 별은 SVG(fragments/line-icons :: star — D-892, 글자 ★는 라운드 서체에 없다). */
/* ⚠ app.css `img, svg { display: block }`이 별을 제 줄로 떨어뜨린다 — 글줄 안의 아이콘이라 inline-block으로 되돌린다(행·카드 둘 다). */
.mp-rate .star { display: inline-block; color: var(--rating-star); vertical-align: -2px; }   /* 평점 별 노랑(사용자 요청 2026-10-08 · D-915) — 옛 --warning 주황 */
/* 칩 줄 — 한 줄(nowrap) · 칩 13px · 넘친 칩은 눈에서만 숨긴다(.chip-fit-off — 홈 프리미엄 카드 [data-chip-fit]과 같은 시각 숨김, 낭독은 남는다).
   무JS면 줄 끝 칩이 overflow로 잘린다(줄바꿈은 없다). 칩 글자는 4.5칸 줄임 표(시안 Q3 ⓐ — MapController.rowChips). */
.mp-foot .spec-row { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.mp-foot .spec { flex: none; white-space: nowrap; padding: 1px 8px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); }
.mp-foot .spec-row > .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;
}
/* 같은 자리(같은 사무소 좌표) 다른 세무사 행 — 그 자리 핀을 누르면 고른 행과 함께 옅게 강조(B4 ⓑ). 고른 행은 아래 .is-selected(테두리 링)가 가른다. */
.mp-row.is-spot { background: var(--primary-light); }
/* (행 끝 선 아이콘 .row-go — 지도 목록에서만 뺐다: 시안 Q2 ⓐ, D-917. 다른 목록 줄은 그대로다.) */

/* 지도 칸 안의 빈·오류 안내(P-079 2-(가), D-880) — 키 미발급·SDK 실패(directory.js)·JS 꺼짐.
   부품 자체(아이콘·제목·설명·버튼·점선 틀)는 app.css `.empty` 한 벌이다 — 여기서는 **지도 칸을 채우는 자리**만
   잡는다(옛 `.map-placeholder`의 회색 판·이모지는 걷었다). 칸 높이는 옆 패널을 따른다(격자 stretch). */
.map-stage > .empty { height: 100%; min-height: 320px; justify-content: center; }

/* ── 패널 접기 손잡이(.mp-fold — 넓은 화면 ≥900만, D-897 Q6 보론 — 사용자 결정 2026-10-09 «모두 추천대로» 2 «안 2») ──
   지도 칸(.map-stage) 왼쪽 가장자리 = 패널 오른쪽 가장자리, 세로 가운데(자리는 그대로).
   D-952(사용자 승인 2026-10-11 — 시안 A3, ~/semtalk-share/map-handle): 9번의 44px 글자 알약 «‹ 목록 접기»(D-951)는 글자가 지도를 침범해 거절됐다 →
   **글자 없는 흰 세로 탭 32×64 + 겹꺾쇠 18px**(펼침 « 접기 · 접힘 » 펼치기). 겹꺾쇠는 «패널을 통째로 접기/펼치기»로 읽혀, 상세 머리 «‹ 목록»(뒤로 — 꺾쇠 하나)과
   섞이지 않는다. 꺾쇠는 잉크(--text-primary, 선 2.2 × 18/24 = 1.7px) · 그림자 · 지도를 덮는 폭 32(알약 103). 옛 24×64 탭(회색 꺾쇠 14px)은 지도 위에서 묻혔다(9번).
   누르는 영역: ::after가 좌우 9px씩 넓혀 50×65(design.md §4) — 접힘은 왼쪽이 사이드바 레일 밑이라 오른쪽으로만 넓힌다(아래 ≥900 구획 · 49×65).
   호버 = 옅은 회색 바탕(--surface-alt) · 키보드 초점 링 2px. 색은 토큰만. 전이 없음(§7). 낭독 이름은 «목록 접기» / «목록 펼치기»(aria-label) + aria-expanded —
   시트 손잡이(.mp-grip «목록 펼치기 / 접기»)와 다른 부품이다(≤899에서는 display:none 가드). 손잡이는 지도 덮개로 세지 않는다(region-map.js mapInsets). */
.mp-fold {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 64px; padding: 0; border: 1px solid var(--border); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--surface); color: var(--text-primary); box-shadow: 2px 0 10px rgba(17, 31, 40, .16); cursor: pointer;
}
.mp-fold::after { content: ""; position: absolute; left: -9px; right: -9px; top: 0; bottom: 0; }   /* 누르는 영역 50×65(오른쪽 테두리 1px 안쪽 기준) */
.mp-fold:hover { background: var(--surface-alt); }
.mp-fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mp-fold svg { display: block; width: 18px; height: 18px; flex: none; }

.map-notice[hidden] { display: none; }   /* 목록 0명이거나 핀이 있으면 숨는다(D-923 ⑥ — region-map.js mapRefresh가 조건마다 여닫는다) */
.map-notice {
  margin-top: var(--s-md); padding: 10px var(--s-md);
  background: var(--primary-light); border-radius: var(--r-md);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--primary-pressed);   /* 파란 글자는 눌림 파랑(Q4) — --primary-light 위 #3182F6은 3.3:1 */
}

/* 지도 위쪽 쌓기 상자(지도 B안 M4 보정, D-885) — 위치 안내(.map-toast)와 상담노트 제안(.map-ask)이 **위에서부터 쌓인다**.
   둘이 같은 top에 따로 서면 겹친다 — 위치를 거부한 사람·핀 0 화면에서는 안내가 내내 떠 있고 제안이 그 아래에 함께 선다
   (map-note.js). 안내가 두 줄로 접혀도(폰 390) 제안이 그 높이만큼 저절로 내려간다. 상자 자체는 지도 칸 안에 떠 있어 패널을
   밀지 않고, 빈 틈(gap)은 지도 끌기를 막지 않게 pointer-events를 넘긴다(칸만 받는다). */
.map-tops {
  position: absolute; left: var(--s-md); right: var(--s-md); top: var(--s-md); z-index: 5;
  display: flex; flex-direction: column; gap: var(--s-sm);
  pointer-events: none;
}
.map-tops > * { pointer-events: auto; }

/* 지도 위 안내 문구 — 위치 거부·너무 넓은 화면일 때만 뜬다. 자리는 위 쌓기 상자의 첫 칸. */
.map-toast {
  padding: 10px var(--s-lg); border-radius: var(--r-full);
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-secondary); text-align: center;
}
.map-toast[hidden] { display: none; }

/* 지금 상담노트의 분야로 좁혀 볼까요?(지도 B안, D-885) — 위 안내 문구와 **같은 흰 면**의 카드, 쌓기 상자의 둘째 칸.
   위쪽 자리를 셋이 나눠 쓴다: [이 지역에서 재검색] > 위치 안내 > 이 제안(map-note.js가 잠깐 뜨는 것이 떠 있는 동안 숨긴다 —
   오래 떠 있는 안내 아래에는 쌓인다). 지도 칸 안에 떠 있으므로 패널을 밀지 않는다. 좁은 지도 칸에서는 버튼 줄이 글 아래로
   내려간다(flex-wrap + 글 기준 폭). */
.map-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s-md);
  padding: 12px 14px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .97); box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
.map-ask[hidden] { display: none; }
.map-ask-t { flex: 1 1 220px; min-width: 0; margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-primary); }
.map-ask-t b { font-weight: var(--fw-semibold); }
.map-ask-acts { display: flex; gap: 6px; flex: none; }
.map-ask-btn { height: 36px; padding: 0 14px; border-radius: 10px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); white-space: nowrap; }
.map-ask-btn.btn-ghost { padding: 0 12px; }

.map-recenter {
  position: absolute; right: var(--s-lg); bottom: var(--s-lg); z-index: 5;
  padding: 10px var(--s-lg); border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--text-primary); cursor: pointer;
}
.map-recenter:hover { background: var(--surface-alt); }

/* 지역 배지 — 인원수만 크게. 접속중 세무사가 있으면 초록(D-023 신호등 문법).
   래퍼를 44×44 고정으로 두고 배지를 가운데 정렬해, 자릿수가 늘어도 좌우로 균등하게
   커진다 → 마커 anchor(22,22)가 항상 배지 중심에 맞는다. */
.map-badge-wrap {
  position: relative; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* 군집 배지 — 남색 숫자 원(D-248 M-04 — 접속중이어도 남색 하나, 채움 색이 접속 신호를 맡는다). 옛 «파랑 34px 원 + 덮어쓰기 30px 남색»
   두 벌을 한 규칙으로 합쳤다(값은 덮어쓰던 쪽 그대로). */
.map-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--map-cluster-ink); border: 2px solid var(--surface); box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
  color: var(--surface); font-size: var(--fs-label2); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
}
.map-badge-cap {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap;   /* 13px(D-923 규칙 — 옛 12) */
  /* 지도 타일 위에서도 읽히게 흰 테두리를 두른다. */
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface);
}

/* 내 위치 — 파란 원 그대로 둔다. 세무사 핀은 흰 말풍선이라 모양으로 구분된다. */
.map-me-wrap { position: relative; width: 22px; height: 22px; }
.map-me {
  display: block; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--primary); border: 4px solid var(--surface); box-shadow: 0 2px 8px rgba(49, 130, 246, .35);
}

/* ── 개별 핀(PIN_ZOOM 이상) — 흰 말풍선 + 첫 글자 동그라미 + 상호 (D-917 — 사용자 결정 2026-10-09 9차 B · 지도 C안 Q12의 «이름»을 상호로) ──
   옛 M-04(흰 원 + 이니셜 + 아래 이름 캡션)·그 전의 물방울 핀 규칙은 걷었다. 군집 배지·줌 단계(D-766)는 그대로다.
   · 왼쪽 24px 동그라미 = 사무소 로고(PR 2 — 9차 B9~B12 ⓐ: 흰 바탕 정사각 96 사본을 원으로, .map-pin-logo) · 로고가 없으면 첫 글자(B6 ⓑ: 앞 «세무법인»·«(주)»·«주식회사»를
     건너뛴 첫 글자, 상호가 없으면 이름 첫 글자 — map-facts.js officeInitial). 브랜드 연한 파랑 바탕 + 눌림 파랑 글자 13px 600(요청 2절).
   · 오른쪽 = 상호 13px 600 — 10자 넘으면 앞 10자 + «…»(B7 ⓐ — map-facts.js pinText, 이 «…»만 말줄임 예외). 같은 자리 묶음은 «+N»(B4 ⓑ).
   · 전원을 그리고 **접속중은 초록**(테두리 + 동그라미 오른쪽 아래 점, D-023 신호등 문법 · B3 ⓐ) — 색만이 아니라 점 모양이 함께 가른다.
   · 선택은 파란 바탕 + 흰 글자 + 1.12배 + 흰 링(옛 «38px 파란 원»의 뜻 — 고른 핀이 한눈에 다르다), 맨 위 zIndex(region-map.js 170) · 늘 상호(B5).
   · 말풍선끼리 겹칠 때만 그 핀을 동그라미만(.is-logo — B5 ⓐ, 판정 map-facts.js compactPins). 확대 단계와 상관없다.
   · 광고 표기(.ad · .map-pin-ad «광고» 13px — B2 ⓐ)는 스위치(region-map.js PIN_AD_LABEL)로 꺼 둔다(B1 ⓑ — 로펌 회신 뒤 켬). 켜도 접속 중이면 초록 테두리가 먼저.
   · 꼬리 끝이 사무소 좌표다 — region-map.js drawPins의 anchor(PIN_W/2, PIN_H)가 이 기하와 짝이다
     (래퍼 256×38: 말풍선 32 + 꼬리 9px 정사각형 45° — 끝이 말풍선 바닥에서 약 6px 아래). 래퍼 폭은 가장 넓은 말풍선(10자 + «…» + «+N» + «광고»)을 덮는다.
   · 래퍼는 글자 길이와 무관하게 폭이 고정이라 가운데 anchor가 늘 맞는다. 빈 자리는 pointer-events를 넘겨
     이웃 핀·지도 끌기를 막지 않는다(말풍선만 누른다 — 클릭은 마커 DOM으로 거품이 올라간다).
   · 눌리는 높이는 44(design.md §4 — 모바일 히트 타깃 MUST). 말풍선(32)은 그대로 두고 투명한 .map-pin-hit(말풍선 폭 × 44, 위아래 6px씩)를
     말풍선 안에 깐다 — 옛 44×44 래퍼만큼의 높이를 되찾되, 폭은 말풍선만이라 이웃 핀을 가리지 않는다(::before는 접속중 점이 쓴다). */
.map-pin-wrap {
  position: relative; width: 256px; height: 38px;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
.map-pin {
  position: relative; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 252px; height: 32px; padding: 0 12px 0 4px;
  border: 1.5px solid var(--grey300); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-primary);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13);
  white-space: nowrap;
  transform-origin: 50% 100%;
  transition: transform .12s ease;
}
/* 첫 글자 동그라미(로고 자리) — 24px · 브랜드 연한 파랑 바탕 · 눌림 파랑 글자(요청 2절 #1B64DA). 낭독은 이름표(aria-label)가 맡는다(aria-hidden). */
.map-pin-ini {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-pressed);
  font-size: var(--fs-caption1); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: 0;
}
/* 사무소 로고(PR 2) — 첫 글자 위에 덮는다(못 읽으면 첫 글자가 그대로 보인다). 흰 바탕 로고가 흰 말풍선에 묻히지 않게 안쪽 1px 테두리. */
.map-pin-ini.has-logo { position: relative; overflow: hidden; }
.map-pin-logo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  border-radius: inherit; object-fit: cover; background: var(--surface);
  outline: 1px solid var(--grey200); outline-offset: -1px;
}
.map-pin-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 같은 자리 묶음 «+N»(B4 ⓑ) — 상호 뒤 같은 13px · 보조 글자색. */
.map-pin-more { flex: none; color: var(--text-secondary); }
/* 광고 표기 «광고»(B2 ⓐ 한글 13px) — 스위치가 켜질 때만 그린다(B1 ⓑ). */
.map-pin-ad { flex: none; font-weight: var(--fw-medium); color: var(--primary-pressed); }
.map-pin-hit { position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* 꼬리 — 말풍선의 바탕·테두리를 그대로 이어받는다(선택·접속중 색이 꼬리까지 따라간다). */
.map-pin::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 9px; height: 9px;
  background: inherit; border-right: inherit; border-bottom: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.map-pin.on { border-color: var(--presence-online); }
/* 접속 중 점 — 동그라미 오른쪽 아래(B3 ⓐ). 흰 테두리로 동그라미·말풍선 위에서 떠 보이게. */
.map-pin.on::before {
  content: ''; position: absolute; left: 22px; top: 21px; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--presence-online); box-shadow: 0 0 0 1.5px var(--surface);
  z-index: 1;   /* 로고 그림(.map-pin-ini.has-logo — 위치 잡힘)이 점을 덮지 않게(PR 2) */
}
.map-pin.ad { border: 2px solid var(--primary); }
.map-pin.ad.on { border-color: var(--presence-online); }   /* 광고 표기를 켜도 접속 중 초록이 먼저(fyi 19) */
.map-pin.sel {
  background: var(--primary); border-color: var(--primary); color: var(--surface);
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(20, 36, 61, .38);
}
.map-pin.sel .map-pin-ini { background: var(--surface); }
.map-pin.sel .map-pin-more,
.map-pin.sel .map-pin-ad { color: var(--surface); }
/* 겹칠 때만 동그라미만(B5 ⓐ) — 상호·«광고»를 감추고 동그라미 둘레만 남긴다. 이름표(aria-label)는 그대로라 낭독은 같다.
   묶음이면 «+N»은 남긴다(D-919 — 화면에서 겹쳐 합친 자리도 동그라미일 수 있다 · 누르면 고르기 목록). 폭은 map-facts.js logoWidth(33 + 9 + 글자)와 짝. */
.map-pin.is-logo { gap: 0; padding: 0 3px; }
.map-pin.is-logo.has-more { gap: 4px; padding-right: 8px; }
.map-pin.is-logo .map-pin-name,
.map-pin.is-logo .map-pin-ad { display: none; }
/* 같은 자리 다른 사무소 — 쌓기 말풍선(D-958 — 사용자 결정 2026-10-13 «둘 다 추천대로»). 사무소마다 한 줄(동그라미 + 상호 + «N명»), 3곳까지 모두,
   4곳부터 두 곳 + «외 N곳»(region-map.js pinRows · map-facts.js spotFace). 높이 = 테두리 3 + 여백 4 + 첫 줄 28 + 다음 줄 29씩(위 1px 가름선)
   = 64 · 93 — map-facts.js stackHeight와 짝. 래퍼는 꼬리 몫을 더해 70 · 99(region-map.js anchor = PIN_H + 높이 차). 폭 = 가장 넓은 줄(spotFace — 줄 하나는 한 줄 핀과 같은 셈).
   · 접속 중은 그 줄 동그라미 오른쪽 아래 점(한 줄 핀의 점과 같은 자리) — 말풍선 점(::before)은 끈다. 테두리 초록은 한 곳이라도 접속 중이면(한 줄 핀과 같다).
   · 고른 사람이 있으면 말풍선은 흰 바탕 그대로(파랑 테두리 · 1.12배) — **그 줄만** 파랑 바탕 + 흰 글자. */
.map-pin-wrap.is-rows2 { height: 70px; }
/* D-959 — 줌 17 이상 상호 전체: 말풍선이 래퍼(256)보다 넓어도 가운데 기준으로 양옆으로 편다 */
.map-pin-wrap.is-full .map-pin { max-width: 360px; flex-shrink: 0; }
.map-pin-wrap.is-rows3 { height: 99px; }
.map-pin.is-stack {
  flex-direction: column; align-items: stretch; gap: 0;
  height: auto; padding: 2px 4px; border-radius: var(--r-lg);
}
.map-pin-row {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 28px; padding-right: 8px; border-radius: var(--r-full);
}
.map-pin-row + .map-pin-row { height: 29px; border-top: 1px solid var(--grey100); }
.map-pin-row.is-rest { padding-left: 8px; color: var(--text-secondary); font-weight: var(--fw-regular); }
.map-pin.is-stack.on::before { display: none; }
.map-pin-row.on::before {
  content: ''; position: absolute; left: 18px; top: 20px; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--presence-online); box-shadow: 0 0 0 1.5px var(--surface);
  z-index: 1;
}
.map-pin.is-stack.sel { background: var(--surface); color: var(--text-primary); border-color: var(--primary); }
.map-pin.is-stack.sel .map-pin-ini { background: var(--primary-light); }
.map-pin.is-stack.sel .map-pin-more { color: var(--text-secondary); }
.map-pin.is-stack .map-pin-row.is-sel { background: var(--primary); color: var(--surface); }
.map-pin.is-stack .map-pin-row.is-sel .map-pin-ini { background: var(--surface); }
.map-pin.is-stack .map-pin-row.is-sel .map-pin-more,
.map-pin.is-stack .map-pin-row.is-sel .map-pin-ad { color: var(--surface); }
/* 쌓기가 이웃과 겹칠 때 — 동그라미 모음(사무소마다 자기 로고, 3개까지 6px씩 겹침 + 못 그린 사무소 «+N»). 폭 = 33 + 18 × (개수 − 1) + «+N» — map-facts.js spotFace와 짝. */
.map-pin.is-logo.is-faces { gap: 0; }
.map-pin.is-faces .map-pin-ini + .map-pin-ini { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.map-pin.is-faces .map-pin-more { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .map-pin { transition: none; } }

/* ── 고르기 목록(D-919 — 사용자 결정 2026-10-09 지도 질문 셋 «추천대로») ──
   «+N» 핀(두 명 이상)을 누르면 지도 위 작은 상자 «이 자리 세무사 N명». 자리(left·top)는 region-map.js placePick(MapFacts.pickSpot) —
   핀 위가 먼저, 모자라면 아래 · 시트·패널·위 쌓기 상자를 피한다. 층은 위 쌓기 상자(5)·재검색(6) 위, 좁은 화면 시트(12) 아래.
   항목 = 버튼(눌리는 높이 52 — 44 이상) · 상호 14/15 600 + «홍길동 세무사 · 접속 중» 13 400 · 접속 점. 글자는 13px 아래가 없고 말줄임 없이 줄바꿈한다.
   굵기는 지도 규칙대로 400·600 둘만(셈톡 산스 라운드 400/600 — 500 금지). 지금 고른 사람(aria-current)은 연한 파랑 바탕. [닫기] 44. */
.map-pick {
  position: absolute; left: 0; top: 0; z-index: 7;
  width: 280px; max-width: calc(100% - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(20, 36, 61, .18);
  outline: none;
}
.map-pick[hidden] { display: none; }
.map-pick-head { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-xs) var(--s-xs) 0 var(--s-lg); }
.map-pick-title {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); color: var(--text-primary);
}
.map-pick-close {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-md); background: none; color: var(--text-tertiary); cursor: pointer;
}
.map-pick-close:hover { background: var(--surface-alt); }
.map-pick-list { list-style: none; margin: 0; padding: 0 0 var(--s-sm); max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.map-pick-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 6px var(--s-lg); border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-primary);
}
.map-pick-item:hover { background: var(--surface-alt); }
.map-pick-item[aria-current="true"] { background: var(--primary-light); }
.map-pick-item .dot-presence { flex: none; width: 8px; height: 8px; }
.map-pick-txt { display: flex; flex-direction: column; min-width: 0; }
.map-pick-name { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-14); }
.map-pick-sub { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular); letter-spacing: var(--ls-13); color: var(--text-secondary); }


/* [이 지역에서 재검색](M-03) — 지도를 옮긴 뒤에만 뜬다(region-map.js). */
.map-research {
  position: absolute; top: var(--s-md); left: 50%; transform: translateX(-50%); z-index: 6;
  width: max-content;   /* 흰 알약이 글자를 감싼다 — left 50% 절대 위치는 너비가 지도 칸 절반에서 멈춰 좁은 폭에서 nowrap 글자만 바탕 밖으로 나간다(.tc-badge와 같은 고침, 2026-10-09) */
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); box-shadow: 0 4px 14px rgba(20, 36, 61, .18);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--primary-pressed); cursor: pointer; white-space: nowrap;   /* 파란 글자 = 눌림 파랑(Q4) */
}
.map-research[hidden] { display: none; }

/* (옛 지도 위 선택 카드 .map-card(D-248 M-01 — 384px 좌하 플로팅)는 걷었다 — 사용자 결정 2026-10-03 지도 C안 Q6 «≥900 520px 패널»:
   선택 정보는 모든 폭에서 패널 안 상세(.mp-detail)가 맡는다.) */

/* ── 상세(패널·시트 공통) — 지도 C안 Phase 1(시트)·Phase 2(패널 — 지금 364, 옛 520) ─────────────────────────
   같은 마크업(.mp-detail — 조각 밖)을 같은 렌더(region-map.js renderDetail)가 채운다. 여기는 모든 폭의 모양이고,
   시트만의 덧칠(띠 여백·버튼 줄 거꾸로 따라가기·끌기)은 좁은 화면 구획, 패널만의 덧칠(큰 사진·넓은 여백·옆 밀기)은 넓은 화면 구획에 있다.
   · 상세 모드 — 목록 부분(머리·조건 줄·정렬·띠·목록 조각)을 감추고 상세만 세운다(region-map.js가 data-mode를 단다).
   · 순서: 요약 → 이런 사업장을 맡아요(AD 마크 없음 — 2026-10-09 사용자 요청) → 소개 → 사무실 → 후기(SPEC 3-2, 기장 상자 없음 — Q2 · 상품 마디 없음 — 데이터가 없다). 데이터가 없는 마디는 그리지 않는다. */
.mp-detail[hidden] { display: none; }
.map-panel[data-mode="detail"] > :not(.mp-grip):not(.mp-detail) { display: none; }
.mp-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mp-dhead {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-xs);
  min-height: 44px; padding: 0 var(--s-sm) 2px;
}
/* [‹ 목록]·[닫기] — 눌리는 크기 44(design.md §4, 옛 40). */
.mp-dback, .mp-dclose {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-full);
}
.mp-dback { min-width: 44px; padding: 0 10px 0 6px; color: var(--text-secondary); font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-semibold); }   /* 600(D-923 규칙 — 굵기 400·600만, 옛 500) */
.mp-dclose { width: 44px; margin-left: auto; color: var(--text-tertiary); }
.mp-dback:hover, .mp-dclose:hover { background: var(--surface-alt); }
/* 작은 신원 — 본문을 120px 넘게 내렸을 때만(SPEC 4-1). 같은 이름이 본문에 있으니 화면낭독기에는 감춘다(aria-hidden). */
.mp-mini {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-sm);
  opacity: 0; transition: opacity .15s ease;
}
.mp-detail.is-scrolled .mp-mini { opacity: 1; }
.mp-mini-photo {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-full); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--text-secondary);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold);   /* 13px(D-923 규칙 — 옛 12) */
}
.mp-mini-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold);
}
.mp-dbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--s-lg) var(--s-lg);
}
.mp-dbody:focus { outline: none; }
/* 버튼 줄 — 상세 바닥에 붙는다(패널은 칸 바닥, 시트는 시트가 내린 만큼 JS가 거꾸로 올려 칸 바닥에 붙인다). */
.mp-dcta {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 10px var(--s-lg) 12px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.mp-dcta .btn { height: 48px; font-size: var(--fs-label1); line-height: var(--lh-label1); }
.mp-dcta:empty { display: none; }

/* 요약(시트 접힘에서 보이는 부분 · 패널 상세 첫 화면) — 사진 64 · 이름 title3 · 사무소 · 평점 또는 «후기 없음» · 경력 · 접속 · 분야 */
.mp-sum { padding: 4px 0 var(--s-lg); }
.mp-sum-head { display: flex; gap: var(--s-md); }
.mp-sum-photo {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-lg); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--primary-pressed);
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold);
}
.mp-sum-id { flex: 1 1 auto; min-width: 0; }
.mp-sum-nameline { display: flex; align-items: center; gap: var(--s-sm); }
.mp-sum-name {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18);
}
.mp-sum-name:focus { outline: none; }
/* 상세 제목 = 상호(D-917 — 9차 B13 메모 · 시안 Q5 ⓐ «상세 머리도 같은 규칙»). 거리 알약과 한 줄에 안 들어가면 목록처럼 단계 줄임
   (region-map.js fitDetailHead — 18(title3) → 16(heading) → 14(label2) → 13(caption1) · 토큰 단계만), 그래도 안 되면 줄바꿈으로 전체를 보인다
   (상세는 상호 전체 표시 — 요청 1절). 아래 ellipsis는 무JS 안전망. */
.mp-sum-name[data-fit="16"] { font-size: var(--fs-heading); line-height: var(--lh-title3); letter-spacing: var(--ls-14); }
.mp-sum-name[data-fit="14"] { font-size: var(--fs-label2); line-height: var(--lh-title3); letter-spacing: var(--ls-14); }
.mp-sum-name[data-fit="13"] { font-size: var(--fs-caption1); line-height: var(--lh-title3); letter-spacing: var(--ls-13); }
.mp-sum-name[data-fit="wrap"] { font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* 거리 알약 — 13px(caption1, 옛 12px · 시안 Q5 ⓐ). */
.mp-sum-dist {
  flex: none; padding: 2px 8px; border-radius: var(--r-full);
  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); font-variant-numeric: tabular-nums;
}
/* 작은 줄 «홍길동 세무사 · 지역» — 14px(body2, ≥768 15px) · 400(시안 Q1·Q5 ⓐ — 옛 «상호 · 지역» 13px). */
.mp-sum-office {
  margin-top: 2px; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); letter-spacing: var(--ls-14);
  color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-sum-meta { margin-top: 2px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* 별은 SVG(region-map.js STAR_SVG — D-892, 글자 ★는 라운드 서체에 없다). 후기가 없으면 별·숫자 대신 «후기 없음»(지도 C안 — ★0.0 버그).
   ⚠ app.css `img, svg { display: block }`이 별을 제 줄로 떨어뜨린다 — 글줄 안의 아이콘이라 inline-block으로 되돌린다. */
.mp-sum-meta .star { display: inline-block; color: var(--rating-star); vertical-align: -2px; }   /* 평점 별 노랑(사용자 요청 2026-10-08 · D-915) */
.mp-norev { color: var(--text-tertiary); }
.mp-sum-presence { margin-top: 4px; 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-tertiary); }   /* 13px(옛 12 — 시안 Q5 ⓐ) */
.mp-sum-presence .dot-presence { width: 7px; height: 7px; }
/* 상세 분야 칩(D-923 규칙 — 사용자 결정 2026-10-10): 13px · 알약 포함 세 장 · **한 줄**(옛 공용 .spec 12px · 다섯 장 · 줄바꿈). 넘친 칩은 목록 행과 같은
   시각 숨김(.chip-fit-off — region-map.js fitDetailChips, 낭독은 남는다). 무JS면 줄 끝 칩이 overflow로 잘린다(줄바꿈은 없다). */
.mp-sum .spec-row { position: relative; margin-top: 10px; display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
.mp-sum .spec { flex: none; white-space: nowrap; font-size: var(--fs-caption1); line-height: var(--lh-caption1); letter-spacing: var(--ls-13); }
.mp-sum .spec-row > .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;
}

/* 상세 마디 */
.mp-sec { padding: var(--s-lg) 0; border-top: 1px solid var(--border); }
.mp-sec-h { margin: 0 0 var(--s-sm); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.mp-sec-t { margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); overflow-wrap: anywhere; }
.mp-sec-rate { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mp-sec-rate .star { display: inline-block; color: var(--rating-star); vertical-align: -2px; }   /* 평점 별 노랑(사용자 요청 2026-10-08 · D-915) */
.mp-inds { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-ind {
  padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-alt); color: var(--text-secondary);
  font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-regular);   /* 400(D-923 규칙 — 옛 500, 분야 칩과 같은 굵기) */
}
.mp-ind[hidden] { display: none; }
/* «+N» — 접힌 업종 칩 펼치기(사용자 지시 2026-10-03 지도 후속). 칩과 같은 모양의 버튼, 눌리는 높이는 ::after로 44px. */
.mp-ind-more {
  position: relative; border: 0; cursor: pointer; font-family: inherit;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-secondary);
}
.mp-ind-more::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
/* ── 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 마크 끝 ── */
/* 지도 상세의 말풍선 자리. 넓은 화면(≥600 — 시트 480·패널 364)은 공용 자리(마크 가운데 아래) 그대로다: 마크 가운데가 제목 왼쪽 끝에서
   약 170px(기본 글자 크기·100% 확대일 때, 제목이 한 줄일 때)이고 카드 폭 240의 절반을 더해도 제목 폭(패널 364 − 여백 48 = 316 이상) 안에 든다. 카드(z 30)는 아래 업종 칩 위에 뜬다.
   좁은 화면(<600 — 시트가 화면 전체 폭)에서는 마크 가운데 맞춤이 제목 폭을 넘을 수 있다 — 카드가 «마크 가운데 ± 120»이라 화면 280·390을 150%로
   확대(실효 260)하면 오른쪽으로, 제목이 두 줄로 감겨 마크가 줄 머리로 가면 왼쪽으로 화면 밖에 나가고 상세 본문이 옆으로 밀린다.
   그래서 카드를 마디 제목(.mp-sec-h) 기준으로 놓고 폭을 제목 폭 안(최대 240)으로 묶는다. 자리는 «마크 가운데 아래»를 제목 양 끝 안으로 당긴 곳이다
   (--admark-card-x — 제목 폭에 들면 넓은 화면과 같은 자리, 모자라면 제목 끝에 붙는다). 꼬리는 늘 마크 가운데를 가리킨다(--admark-tail-x — 카드 왼쪽 안쪽에서
   마크 가운데까지). 둘 다 열 때(그리고 열린 채 창 폭이 바뀌면) region-map.js가 잰다 — 재기 전·스크립트 없이는 제목 왼쪽 끝. */
@media (max-width: 599px) {
  .mp-sec-h { position: relative; }
  .mp-sec-h .admark-wrap { position: static; }
  .mp-sec-h .admark-tip { left: var(--admark-card-x, 0px); transform: none; max-width: min(240px, 100%); }
  .mp-sec-h .admark-tip::before { left: var(--admark-tail-x, 50%); }
}

/* ── 좁은 화면 — 시트 2단(지도 C안 Phase 1, 사용자 결정 2026-10-03 Q6·Q9·Q13) ───────────── */
/* 지도가 화면 한 장(«화면 높이 − 상단바»)을 다 쓰고, 목록 패널은 그 위에 얹힌 **시트**가 된다(SPEC 4-1·7-1).
   · 두 단계 — 접힘(목록 196px — 정렬 줄까지 / 선택 시 «요약 + 버튼 줄») ↔ 읽기(칸 − 지도 띠 216). 읽기에서 본문을 0→160px 내리면 띠가 136까지 준다.
   · 움직임은 transform 하나다(높이 애니메이션 없음 — 저사양 안드로이드 웹뷰). 시트 상자는 «칸 − 136» 높이로 두고 translateY로만 내린다
     (숫자 규칙 = static/js/map-detent.js, 손동작·상태 = region-map.js). 그래서 띠가 줄 때 레이아웃이 다시 돌지 않는다.
   · 상자를 내려 둔 만큼(읽기에서 최대 80px = 216 − 136) 스크롤 칸의 바닥이 화면 밖에 걸린다 — 스크롤 칸 바닥 여백에 그만큼(--mp-strip-gap)을
     더해 마지막 줄까지 닿게 한다. 상세의 버튼 줄은 시트가 내린 만큼 거꾸로 올려(JS) 늘 칸 바닥에 붙는다.
   · 이 화면만 페이지 스크롤·푸터가 없다(셸 파일은 그대로 — 지도가 있는 본문만 :has로 고른다. 키가 없으면(is-nomap) 보통 문서다).
   · 폭: <600 전체 폭 · 600~899 최대 480px 왼쪽 정렬(아래 중간 폭 구획). 셸의 768(드로어·상단바 56)은 셸 몫이라 따로다. */
@media (max-width: 899px) {
  .cal-item { padding: 14px; gap: 12px; }
  .cal-date { width: 52px; }

  /* 화면 틀 — 본문 여백을 이 화면에서만 걷고, 문서가 스크롤되지 않게 잠근다(당겨서 새로고침도). 한 화면 최소 높이는 위 «셸 정리»가 모든 폭에서 걷는다. */
  .main:has(.map-layout:not(.is-nomap)) { padding: 0; }
  html:has(.map-layout:not(.is-nomap)),
  body:has(.map-layout:not(.is-nomap)) { overflow: hidden; overscroll-behavior: none; }

  .map-layout {
    --mp-peek: 196px;          /* 목록 접힘 — JS가 오기 전 첫 그림도 이 높이다(MapDetent.LIST_PEEK와 같은 값 · 정렬 칩 줄까지) */
    --mp-strip-gap: 80px;      /* 읽기에서 상자를 내려 두는 최대량 = 216 − 136(MapDetent.STRIP_MAX − STRIP_MIN) */
    display: block; position: relative; margin-top: 0;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden; overflow: clip;   /* clip — 초점·찾기가 칸을 스크롤해 시트가 어긋나지 않게(hidden은 스크립트 스크롤을 받는다) */
  }
  /* 앱 웹뷰(?app=1, D-692)는 상단바가 접혀 있다 — 상단바를 빼지 않은 화면 높이(나머지 앱 처리는 아래 «앱 웹뷰» 구획 — Phase 3). */
  .app-embed .map-layout { height: 100vh; height: 100dvh; }
  .map-stage { position: absolute; inset: 0; }
  /* 지도 칸은 제 쌓임 맥락에 가둔다(isolation) — 네이버 내부 층(핀 z 150~200·로고)이 시트(z 12) 위로 올라와 목록·[상담 신청]을 덮지 않게.
     로고·저작권 표기는 region-map.js placeMapMarks가 시트 모드에서 칸 위쪽으로 옮긴다(시트에 가리지 않게). */
  .map-canvas { height: 100%; min-height: 0; border: 0; border-radius: 0; isolation: isolate; }
  /* 위쪽 쌓기 상자(위치 안내·상담노트 제안)와 [이 지역에서 재검색]은 칸 위쪽 지도 표기 줄(약 24px) 아래에 선다 — 표기를 덮지 않게. */
  .map-tops, .map-research { top: 36px; }
  /* 지도 칸 안내(P-079)는 칸을 채우고, 글자는 접힌 시트 **위**에 선다 — 안 그러면 시트가 안내와 [다시 불러오기]를 덮는다. */
  .map-stage > .empty { height: 100%; min-height: 0; border-radius: 0; padding-bottom: calc(var(--mp-peek) + 28px); }

  /* 시트(= 목록 패널). 첫 그림은 CSS만으로 목록 접힘(상자 높이 − 목록 접힘만큼 내림) — JS가 오면 인라인 transform이 이어받는다. */
  .map-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
    height: calc(100% - 136px); max-height: none;
    border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .16);
    overflow: visible;          /* 위 가장자리에 붙은 손잡이(.mp-grip)의 눌리는 영역(::after 위 10px)이 상자 밖에 선다 — 스크롤은 안쪽 칸(.mp-list·.mp-dbody)이 자른다 */
    transform: translateY(calc(100% - var(--mp-peek)));
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
  /* 손가락·스크롤을 그대로 따라가는 동안(is-live)은 전이를 끈다 — 프레임마다 새 전이가 시작돼 늦게 따라오지 않게. */
  .map-panel.is-live, .map-panel.is-live .mp-dcta { transition: none; }
  /* 지도 키가 없을 때(is-nomap, 3차 후속 K15) — 시트를 끌 region-map.js가 실리지 않으므로 칸·시트를 풀어
     지도 안내 아래 펼친 보통 목록으로 편다(noscript 모드와 같은 값). 안내 칸은 시트를 비켜 설 까닭이 없다. */
  .map-layout.is-nomap { height: auto; overflow: visible; margin-top: var(--s-lg); }
  .map-layout.is-nomap .map-stage { position: relative; inset: auto; }
  .map-layout.is-nomap .map-panel { position: static; height: auto; max-height: none; transform: none; box-shadow: none; margin-top: var(--s-lg); border: 1px solid var(--border); border-radius: var(--r-xl); }
  .map-layout.is-nomap .mp-list { max-height: none; }
  .map-layout.is-nomap .mp-grip { display: none; }
  .map-layout.is-nomap .map-stage > .empty { min-height: 0; padding-bottom: 28px; }
  /* 패널 접기 손잡이는 넓은 화면 몫이다 — 시트에는 .mp-grip이 있다. 접힘 표식(.is-folded)이 남아 있어도 시트는 그대로다(넓은 화면 구획만 읽는다). */
  .mp-fold { display: none; }

  /* 시트 손잡이(.mp-grip[data-panel-grip]) — 시트 위 가장자리 가운데에 붙은 **화살표 알약 64×24**(사용자 요청 2026-10-09 «앱에서도 화살표로 눌러서
     목록이 닫히고 열릴 수 있도록 비슷한 UI로» — 넓은 화면 접기 손잡이의 옛 모양(.mp-fold 24×64 — 9번 글자 알약 44(D-951)을 거쳐 지금은 32×64 겹꺾쇠 탭(D-952))을 눕힌 모양: 같은 토큰(--surface/--border/--text-secondary) ·
     같은 꺾쇠 선 아이콘 14px(stroke 2.2) · 눌리는 영역 44(::after 위아래 10 — 폭은 72) · 전이 없음 §7). 옛 회색 막대(.mp-grip-bar 44×4)는 걷었다.
     위 가장자리에 붙는다(border-top 0 · 아래 모서리만 둥글게 — .mp-fold가 패널 가장자리에 붙는 것과 같은 꼴). 시트 흐름의 첫 줄이라 높이 24가 머리 위
     여백이다(옛 막대 줄 22 → 24, 목록 접힘은 region-map.js가 정렬 줄을 재서 맞춘다 — LIST_PEEK 196은 하한).
     · 꺾쇠 둘(˄ .mp-grip-up · ˅ .mp-grip-down) 가운데 .map-layout[data-sheet] 상태에 맞는 하나만 — 접힘(peek · JS 전 첫 그림도)은 ˄ «펼치기», 읽기(read)는 ˅ «접기».
     · 탭 한 번 = 접힘 ↔ 읽기(region-map.js gripEl click → setSheet 토글). 끌기는 그대로(touch-action none — 손잡이·머리는 언제나 시트를 끈다, SPEC 5-1).
     · 폰 웹과 앱 웹뷰(?app=1 — 아래 «앱 웹뷰» 구획은 접힘 높이에 안전 영역만 더한다)가 같은 손잡이다. 넓은 화면(≥900)은 위 기본 규칙 .mp-grip { display: none }이
       감춘다(이 구획만 켠다 — .mp-fold와 다른 부품). 접힌 상태 기억 없음(시트 기본 = 접힘, D-897). */
  .mp-grip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: center; z-index: 1;   /* z 1 — 상세 머리의 작은 신원(.mp-mini opacity 0 = 제 층)이 ::after 아래쪽 10px를 덮지 않게 */
    flex: 0 0 auto; width: 64px; height: 24px; padding: 0; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--surface); color: var(--text-secondary); box-shadow: 0 2px 8px rgba(20, 36, 61, .12); cursor: pointer;
    touch-action: none;   /* 손잡이·머리는 언제나 시트를 끈다(SPEC 5-1) — 브라우저 스크롤이 끼어들지 않게 */
  }
  .mp-grip::after { content: ""; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; }
  /* (:hover 없음 — 손가락 지면이라 탭 뒤 hover가 눌어붙어 회색으로 남는다. 초점 링은 키보드(:focus-visible)만.) */
  .mp-grip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .mp-grip svg { display: block; width: 14px; height: 14px; flex: none; }
  .map-layout[data-sheet="read"] .mp-grip-up { display: none; }
  .map-layout:not([data-sheet="read"]) .mp-grip-down { display: none; }
  .mp-head { padding-top: 0; touch-action: none; }

  /* 목록 스크롤 칸 — 바닥 여백에 «상자를 내려 둔 최대량»을 더한다(머리 주석). */
  .mp-list { padding-bottom: calc(var(--s-sm) + var(--mp-strip-gap)); overscroll-behavior: contain; }

  /* 조건 줄 드롭다운(P-009) — 시트 **안**에서 알약 줄 바로 아래로 편다(높이 상한은 위 모든 폭 규칙). 옛 «화면 바닥 fixed 시트»는 쓰지 않는다:
     시트가 transform을 가지면 fixed의 기준이 시트 상자가 되어(화면 밖으로 내려 둔 바닥) 드롭다운이 화면 밖에 선다.
     접힘에서 알약을 열면 region-map.js가 시트를 읽기로 올려 펼칠 자리를 만든다. */

  /* (읽기 상태 띠 안내(rider) — «지도는 그대로 움직여요» + [지도 크게] — 는 걷었다: 화살표 알약 손잡이 .mp-grip과 역할이 겹쳤다.
     사용자 결정 2026-10-10 ⓐ, D-897 보론. 읽기 높이는 그대로 — map-detent.js STRIP_MAX 216.) */

  /* 읽기 상태 — 지도 위쪽 쌓기 상자(위치 안내·상담노트 제안, D-885)는 접힘에서만 보인다. 자리(지도 칸 안 위쪽)는 사용자 결정 Q13,
     읽기에서 숨기는 것은 구현 해석이다(읽기 띠 216을 안내·제안 카드가 덮지 않게).
     [내 위치]는 접힘에서만, 시트 위 가장자리 위에 선다(region-map.js가 놓을 때 bottom을 맞춘다). 끄는 동안은 숨긴다. */
  .map-layout[data-sheet="read"] .map-tops { visibility: hidden; }
  .map-recenter { bottom: calc(var(--mp-peek) + 12px); }
  .map-layout[data-sheet="read"] .map-recenter,
  .map-layout.is-dragging .map-recenter { visibility: hidden; }
  /* 핀 0 안내(«아직 사무소 위치를 등록한 세무사가 없어…») — 칸 아래 흐름에 서면 한 장 칸(overflow clip) 밖으로 잘린다.
     지도 칸 위, 접힌 시트와 [내 위치](높이 약 42) 위에 띄운다. --mp-peek은 region-map.js가 지금 접힘 높이로 맞춘다(목록 잰 높이 · 상세 요약).
     읽기·끄는 중에는 [내 위치]처럼 숨는다(띠 216을 덮지 않게). */
  .map-layout:not(.is-nomap) .map-notice {
    position: absolute; left: var(--s-md); right: var(--s-md); bottom: calc(var(--mp-peek) + 62px); z-index: 5; margin-top: 0;
  }
  .map-layout[data-sheet="read"] .map-notice,
  .map-layout.is-dragging .map-notice { visibility: hidden; }
  /* 목록 접힘 = 머리(제목·N명·접속 중만 보기) + 첫 세무사 행 한 줄(D-923 ③ — 사용자 결정 2026-10-10). 조작부(검색·알약 셋·정렬)와
     띠(지역 묶음·노트 상태·노트 업종)·기장 안내 줄·업종 고지는 **읽기 상태에서만** 선다 — 접힘에서는 자리를 비켜 첫 행이 올라온다.
     접힘 높이는 region-map.js가 «머리 + 첫 행»을 재서 놓는다(map-detent.js listPeek). 상세 모드·넓은 화면(≥900)은 그대로다.
     JS 전 첫 그림(data-sheet 없음)은 지금처럼 다 보인다 — 시트가 켜지는 순간 접힘으로 바뀐다. */
  .map-layout[data-sheet="peek"] .map-panel:not([data-mode="detail"]) :is(.mp-filters, .sort-bar, .mp-region-note, .mp-note-ind, .mp-bk-guide, [data-ind-note]) { display: none; }
  /* 상담노트 제안(지도 B안) — 지도 칸 **위쪽**에 떠서 접힌 시트와 겹치지도, 밀지도 않는다.
     글이 한 줄을 다 쓰고 버튼 줄은 그 아래(시안 #map-b 폰 판). 위치 안내가 떠 있으면 그 아래에 쌓인다(.map-tops —
     폰에서도 따로 top을 주지 마라, 안내와 겹친다). */
  .map-ask { display: block; }
  .map-ask-acts { margin-top: 10px; }

  /* ── 시트 상세의 덧칠(모양은 위 «상세(패널·시트 공통)») — 머리는 시트를 끌고, 본문 바닥엔 띠 여백, 버튼 줄은 시트를 거꾸로 따라간다. ── */
  .mp-dhead { touch-action: none; }
  .mp-dbody { padding-bottom: calc(var(--s-lg) + var(--mp-strip-gap)); }
  .mp-dcta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);   /* 시트와 같은 전이 — 둘이 같이 움직여 버튼 줄은 제자리에 있다 */
  }
}

/* ── 중간 폭(600~899) — 시트는 최대 480px, 왼쪽 정렬(사용자 결정 2026-10-03 지도 C안 Q6) ──
   전체 폭으로 펴면 768 태블릿에서 목록 한 줄이 700px을 넘어 읽기 줄이 너무 길다. 위 좁은 화면 구획의 값 위에 폭만 덮는다
   (높이·단계·손잡이는 그대로). 시트 오른쪽은 지도가 그대로 보인다. 드롭다운도 시트 안에서 편다(위 구획). */
@media (min-width: 600px) and (max-width: 899px) {
  .map-panel { right: auto; width: min(480px, 100%); border-top-right-radius: var(--r-xl); }
}

/* ── 넓은 화면(≥900) — 왼쪽 364px 패널 하나가 헤더 아래 지도와 같은 높이(지도 C안 Phase 2, 사용자 결정 2026-10-03 Q6 · 폭은 D-897 Q6 보론 2026-10-09) ──
   · 화면 틀: 지도 칸과 패널이 «화면 높이 − 상단바» 한 장을 나란히(격자 364 | 나머지) 나눠 쓴다 — 패널 높이 = 지도 높이.
     폭 364(옛 520 — 사용자 결정 2026-10-09 «모두 추천대로»): 1280에서 지도가 54% → 66%, 1024에서 43% → 58%(Phase 1 실측). 1024 웹과 태블릿 가로 앱 웹뷰(?app=1)도
     예외 없이 364다 — D-903의 «태블릿 가로 1024 ?app=1 = 520 패널 그대로»를 이 결정이 바꿨다.
     본문 여백을 이 화면에서만 걷고 페이지 스크롤을 잠근다(좁은 화면 구획과 같은 셀렉터 — 셸 파일은 그대로, 지도가 있는 본문만 :has로 고른다).
     패널이 지도 칸 밖(격자 옆)이라 지도 맞춤의 왼쪽 덮개는 0이다(region-map.js mapInsets — MapDetent.panelOverlap이 겹친 폭만 센다).
   · 접기 손잡이(.mp-fold — 위 «패널 접기 손잡이» 구획): 패널 오른쪽 가장자리 세로 가운데. 접힘(.map-layout.is-folded) = 패널 display:none · 격자 0 | 1fr · 지도 전폭 ·
     손잡이는 왼쪽 가장자리 같은 탭에 꺾쇠 »(D-952). 전이 없음(design.md §7 — 지도 칸 ResizeObserver가 autoResize). 손잡이 32는 덮개로 세지 않는다(mapInsets 0 그대로).
   · 사이드바는 이 화면에서 아이콘 줄(레일 68)로 접힌다 — 셸의 화면별 강제 접기(NavMenu COMPOSE → layout navCompose)를 켰을 뿐 셸 CSS·JS는 그대로다.
   · 패널 안: 목록 ↔ 상세(위 «상세(패널·시트 공통)»)가 옆으로 밀며 바뀐다(아래 움직임 구획 — 움직임 줄이기면 없음). 버튼 줄은 상세 바닥에 붙는다.
   · 지도 키가 없으면(is-nomap) 보통 문서다 — 패널은 옛 모양(테두리·둥근 모서리·화면 높이 상한) 그대로 364 폭만 쓴다(손잡이는 지도 칸 안이라 없다). */
@media (min-width: 900px) {
  .main:has(.map-layout:not(.is-nomap)) { padding: 0; }
  html:has(.map-layout:not(.is-nomap)),
  body:has(.map-layout:not(.is-nomap)) { overflow: hidden; overscroll-behavior: none; }
  .map-layout:not(.is-nomap) {
    gap: 0; margin-top: 0;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
  }
  /* 앱 웹뷰(?app=1, D-692)는 상단바가 접혀 있다 — 상단바를 빼지 않은 화면 높이(나머지 앱 처리는 아래 «앱 웹뷰» 구획 — Phase 3). */
  .app-embed .map-layout:not(.is-nomap) { height: 100vh; height: 100dvh; }
  .map-layout:not(.is-nomap) > .map-panel {
    height: 100%; max-height: none;
    border: 0; border-right: 1px solid var(--border); border-radius: 0;
    overflow: hidden; overflow: clip;   /* 옆 밀기 중의 상세가 지도 위로 비치지 않게 — 드롭다운은 패널 안 알약 줄 아래에서 편다 */
  }
  /* 드롭다운은 패널(칸 바닥)에서 잘리고 페이지는 잠겨 있다 — 패널 바닥까지만 펴고 나머지는 드롭다운 안에서 스크롤한다.
     160 = 패널 위 ~ 드롭다운 위(실측 144) + 바닥 여유. 열 때 region-map.js fitFacetPop이 실측으로 다시 맞춘다(앱 웹뷰·서체 차이). */
  .map-layout:not(.is-nomap) .mp-pills .dir-facet-pop {
    max-height: min(420px, calc(100vh - var(--topbar-h) - 160px));
    max-height: min(420px, calc(100dvh - var(--topbar-h) - 160px));
  }
  /* isolation — 네이버 내부 층(핀 z 150~200)이 지도 칸 위 컨트롤(접기 손잡이 z 6 · 재검색 · 고르기 목록)을 덮지 않게(좁은 화면 구획과 같은 까닭). */
  .map-layout:not(.is-nomap) .map-canvas { min-height: 0; border: 0; border-radius: 0; isolation: isolate; }
  /* 핀 0 안내(지도 칸 아래 흐름에 서면 한 장 칸 밖으로 잘린다) — 지도 칸 위 왼쪽 아래에 띄운다([내 위치] 자리는 비킨다). */
  .map-layout:not(.is-nomap) .map-notice { position: absolute; left: var(--s-lg); right: 120px; bottom: var(--s-lg); z-index: 5; margin-top: 0; }

  /* 패널 접힘(D-897 Q6 보론 — 사용자 결정 2026-10-09 1·2·4): 패널은 display:none(격자 0 | 1fr — 지도가 전폭), 손잡이는 같은 32×64 탭에 꺾쇠만 »(D-952).
     전이 없음(§7). 접힌 상태는 브라우저 localStorage 'lsm.map.panelFold'(region-map.js — 기기별 기억, 운영 쓰기 0). 접힌 채 핀·«+N»을 누르면 펼친다.
     접힌 탭의 왼쪽은 사이드바 레일(아이콘 줄) 밑이라 누르는 넓힘을 오른쪽(지도 쪽)으로만 둔다 — 49×65(실측). */
  .map-layout.is-folded:not(.is-nomap) { grid-template-columns: 0 minmax(0, 1fr); }
  .map-layout.is-folded:not(.is-nomap) > .map-panel { display: none; }
  .map-layout.is-folded .mp-fold::after { left: 0; right: -18px; }
  .map-layout.is-folded .mp-fold-in { display: none; }
  .map-layout:not(.is-folded) .mp-fold-out { display: none; }

  /* 패널 상세 — 사진 72(옛 카드 사진 크기) · 넓은 여백. 내용·순서는 시트와 같다(renderDetail 하나). */
  .mp-dhead { padding: 8px var(--s-md) 0; }
  .mp-dbody { padding: 0 var(--s-xl) var(--s-xl); }
  .mp-sum { padding-top: 8px; }
  .mp-sum-photo { width: 72px; height: 72px; }
  .mp-dcta { padding: 12px var(--s-xl) 16px; }
}

/* ── 앱 웹뷰(?app=1, D-692) — 이 화면만 (지도 C안 Phase 3, 사용자 결정 2026-10-03 Q14 «웹 ?app=1만») ─────────────
   · 본문 왼쪽 여백: 셸은 임베드에서 상단바·사이드바를 감추지만(shell.css .app-embed) 본문의 왼쪽 여백(사이드바 216 · 이 화면은 레일 68)은 ≥769에서
     그대로 남아 화면 왼쪽이 빈 띠가 됐다(Phase 3 전 실측 820·1024 — 68px). 지도가 있는 본문만 0으로 — 공용 규칙(shell.css .app-embed .main)과
     다른 임베드 지면은 그대로다. 구체성: .app-embed .main:has(.map-layout)(0,3,0)이 html.rail .main(0,2,1)·.main(0,1,0)을 이긴다(!important 없음).
     :has가 없는 옛 웹뷰는 빈 띠가 남을 뿐이다(기능 손실 없음 — 위 «셸 정리»와 같은 조건).
   · 아래 안전 영역: 앱이 ?app=1&inset=N(0~80 정수)을 넘기면 서버(MapController.appInset)가 칸에 --map-inset-b로 싣는다(웹·잘못된 값에는 없다 → 0).
     버튼 줄 아래 = 12 + 안전 영역(SPEC 7-2 «버튼 줄 아래 여백은 페이지가 직접 12px») — 넓은 화면(≥900) 웹의 16도 앱에서는 이 값이다.
     env(safe-area-inset-bottom)와는 큰 쪽만 — 둘이 함께 와도 겹쳐 세지 않는다. 목록 끝·목록 접힘(첫 그림 — JS가 오면 region-map.js가 잰 값에
     같은 안전 영역을 더해 --mp-peek을 다시 쓴다)·넓은 화면 지도 바닥 컨트롤([내 위치]·핀 0 안내)도 그만큼 올린다.
     상세 접힘은 따로 올리지 않는다 — «요약 + 버튼 줄»을 재는데 버튼 줄 높이에 이미 들어 있다. */
.app-embed .main:has(.map-layout) { margin-left: 0; }
.app-embed .mp-dcta { padding-bottom: calc(12px + max(var(--map-inset-b, 0px), env(safe-area-inset-bottom, 0px))); }
.app-embed .mp-list { padding-bottom: calc(var(--s-sm) + var(--map-inset-b, 0px)); }
@media (max-width: 899px) {
  .app-embed .map-layout { --mp-peek: calc(196px + var(--map-inset-b, 0px)); }   /* 196 = 위 좁은 화면 구획 --mp-peek(MapDetent.LIST_PEEK) */
  .app-embed .mp-list { padding-bottom: calc(var(--s-sm) + var(--mp-strip-gap) + var(--map-inset-b, 0px)); }
}
@media (min-width: 900px) {
  .app-embed .map-recenter { bottom: calc(var(--s-lg) + var(--map-inset-b, 0px)); }
  .app-embed .map-layout:not(.is-nomap) .map-notice { bottom: calc(var(--s-lg) + var(--map-inset-b, 0px)); }
}
/* 목록 ↔ 상세 옆 밀기(SPEC 4-2) — transform·opacity만(design.md §7). region-map.js setPane이 사람이 바꿀 때만 data-slide를 단다(첫 그림은 움직이지 않는다).
   움직임 줄이기(reduce)에서는 이 구획 자체가 없다(no-preference일 때만). */
@keyframes mp-slide-from-right { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mp-slide-from-left { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .map-panel[data-slide="detail"] > .mp-detail { animation: mp-slide-from-right .22s cubic-bezier(.2, .8, .2, 1); }
  .map-panel[data-slide="list"] > :not(.mp-detail):not(.mp-grip) { animation: mp-slide-from-left .22s cubic-bezier(.2, .8, .2, 1); }
}

/* 움직임 줄이기 — 시트의 전이를 끈다(지도 이동은 region-map.js가 즉시 이동으로 바꾼다, SPEC 5-4). */
@media (prefers-reduced-motion: reduce) {
  .map-panel, .mp-mini, .mp-dcta { transition: none; }
}