/* 공개 콘텐츠 표면 — 지도.
   토큰(tokens.css)만 쓰고 app.css는 건드리지 않는다(공용 파일 회피).

   ⚠ 세금 캘린더 규칙(.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); }
.page-head h1 { font-size: 26px; font-weight: 700; line-height: 1.3; }
.page-head p { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }

/* ── 지도 + 좌측 패널 ──────────────────────────────────────── */
/* 좌측 고정 패널(목록) + 우측 지도 — 목록과 지도를 동시에 본다.
   좁은 화면(≤720px)에서는 패널이 지도 위 하단의 **접히는 패널**이 된다(아래 미디어 구획).
   ⚠ hidden 속성으로 여닫는 요소는 전부 `[hidden]{display:none}` 가드를 함께 둔다 —
     author display가 UA [hidden]을 이겨 "숨겼는데 보이는" 사고가 반복됐다. */
.map-layout {
  display: grid; grid-template-columns: 400px minmax(0, 1fr);
  gap: var(--s-lg); align-items: stretch;
}
.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: 16px; font-weight: 700; }
.mp-count { margin-left: 2px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); }
.mp-online-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; 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 { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); word-break: keep-all; }
.mp-depth-note[hidden] { display: none; }

.mp-filters { display: flex; align-items: center; gap: 8px; padding: 10px var(--s-lg) 0; }
.mp-filter-lab { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.mp-filters select {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-primary); font-size: 13px;
}

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

.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: 13px; color: var(--primary);
}
.mp-region-note[hidden] { display: none; }
.mp-region-clear {
  margin-left: auto; border: 0; padding: 4px 8px; border-radius: var(--r-sm);
  background: transparent; color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer;
  text-decoration: underline;
}

.mp-empty {
  margin: var(--s-lg); padding: var(--s-xl); text-align: center;
  color: var(--text-tertiary); font-size: 13px;
  background: var(--surface-alt); border-radius: var(--r-md);
}
.mp-empty[hidden] { display: none; }

/* 🔴 목록 조각 상자([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 {
  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: #EFF6FF; box-shadow: inset 0 0 0 2px #BFDBFE; }
/* 사진 88px(사용자 지시 2026-08-09: 대각선 2배 = 44 → 88px) — 목록 카드
   (.tax-list[data-tax-list] .avatar)와 **같은 크기·같은 모서리(r-lg)**다. 지도와 목록은
   한 기능의 두 얼굴이라(D-189 §3.1) 같은 사진이 같은 모양으로 보여야 한다.
   원형을 버린 이유: 88px 원은 400px 패널에서 cover 사진의 네 귀를 잘라 먹는다.
   이니셜 폴백(span.avatar)도 같은 셀렉터가 같은 크기로 잡는다. */
.mp-row .avatar {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--r-lg); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); font-weight: 700; font-size: 32px; color: var(--text-secondary);
}
.mp-main { flex: 1 1 auto; min-width: 0; display: block; }
.mp-top { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; }
/* 사진이 커진 만큼 이름이 1순위 — 15 → 16px(위계만, 나머지 줄은 그대로). */
.mp-top b { font-size: 16px; font-weight: 700; }
.mp-dist { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.mp-dist[hidden] { display: none; }
.mp-sub {
  display: block; margin-top: 2px; font-size: 13px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-rate { display: block; margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.mp-rate .star { color: var(--warning); }
.mp-row .spec-row { margin-top: 6px; }
.mp-go { flex: 0 0 auto; align-self: center; color: var(--grey400); font-size: 20px; }

/* 키 미발급 시의 안내 플레이스홀더 — 앱의 지도 플레이스홀더와 같은 역할. */
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 260px; padding: var(--s-xl); text-align: center;
  background: var(--surface-alt); border: 1px dashed var(--grey300); border-radius: var(--r-xl);
}
.map-placeholder .ic { font-size: 30px; }
.map-placeholder .t { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.map-placeholder .s { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; }

.map-notice {
  margin-top: var(--s-md); padding: 10px var(--s-md);
  background: var(--primary-light); border-radius: var(--r-md);
  font-size: 13px; color: var(--primary);
}

/* 지도 위 안내 문구 — 위치 거부·너무 넓은 화면일 때만 뜬다. */
.map-toast {
  position: absolute; left: var(--s-md); right: var(--s-md); top: var(--s-md); z-index: 5;
  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: 13px; color: var(--text-secondary); text-align: center;
}
.map-toast[hidden] { display: none; }

.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: 13px; font-weight: 600; 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;
}
.map-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--primary); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.map-badge.on { background: var(--presence-online); }
.map-badge-cap {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
  /* 지도 타일 위에서도 읽히게 흰 테두리를 두른다. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* 내 위치 — 파란 원 그대로 둔다. 세무사 핀이 물방울 모양이 되면서 모양으로 구분된다. */
.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 #fff; box-shadow: 0 2px 8px rgba(49, 130, 246, .35);
}

/* 개별 핀(PIN_ZOOM 이상) — 전원을 그리고 **접속중은 초록**으로 구분한다(D-023 신호등 문법).
   예전의 지역 시트(지도 하단을 덮던 목록) 스타일은 패널로 대체하며 걷어냈다.

   🔴 모양(사용자 지시 2026-08-08): 예전엔 '내 위치'와 같은 파란 원이라 구분이 안 됐다 —
   **물방울(teardrop) 핀 + 안에 사무소(건물) 아이콘**으로 바꾼다. 외부 이미지 없이 CSS와
   data URI(SVG mask)만 쓴다. 꼭짓점이 사무소 좌표를 가리킨다 — region-map.js drawPins의
   anchor(22, 37)가 이 기하와 짝이다(래퍼 44px 가운데 x=22, 꼭짓점 y = 6 + 13 + 26×√2/2 ≈ 37).
   래퍼 44×44는 터치 히트영역 최소 크기다(마커 클릭 영역 = 이 DOM 크기). */
.map-pin-wrap {
  position: relative; width: 44px; height: 44px;
  display: flex; align-items: flex-start; justify-content: center; cursor: pointer;
}
.map-pin {
  display: block; width: 26px; height: 26px; margin-top: 6px;
  background: var(--primary); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;               /* 꼭짓점(왼쪽 아래)이… */
  transform: rotate(-45deg);                  /* …회전해서 정확히 아래를 가리킨다 */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
/* 건물 아이콘 — 흰 면에서 창·문이 뚫려 핀 색이 비친다. mask 미지원 옛 브라우저에서는
   흰 마름모(내부 점)로 저하되지만 물방울 윤곽은 그대로라 구분은 유지된다. */
.map-pin::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px;
  transform: translate(-50%, -50%) rotate(45deg);   /* 부모 회전 상쇄 — 건물이 똑바로 선다 */
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M5 21V3h10v18h-4v-4H9v4H5Zm2-14h2v2H7V7Zm4 0h2v2h-2V7Zm-4 4h2v2H7v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M5 21V3h10v18h-4v-4H9v4H5Zm2-14h2v2H7V7Zm4 0h2v2h-2V7Zm-4 4h2v2H7v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-pin.on {
  background: var(--presence-online);
  box-shadow: 0 0 0 4px rgba(21, 196, 126, .25), 0 1px 6px rgba(0, 0, 0, .3);
}

/* ── 개별 핀·군집 배지 재설계(D-248 M-04) ──
   개별 핀: 흰 원 + 색 테두리 + 이니셜(물방울 → 원). 접속중은 초록, 선택은 38px 파란 원 + 흰 링.
   군집: 남색(#14243D) 숫자 원. 아래 규칙은 위 원본 뒤에 와서 덮어쓴다(물방울 data URI는 손대지 않는다). */
.map-pin-wrap { align-items: center; }
.map-pin {
  width: 26px; height: 26px; margin: 0; border-radius: 50%; transform: none;
  background: #fff; border: 2px solid var(--primary); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.map-pin::after { display: none; }   /* 물방울 안의 건물 아이콘 제거 */
.map-pin.on { background: #fff; border-color: var(--presence-online); color: var(--presence-online); }
.map-pin.sel {
  width: 38px; height: 38px; background: var(--primary); border: 0; color: #fff; font-size: 15px;
  box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(20, 36, 61, .38);
}
.map-badge { min-width: 30px; height: 30px; font-size: 14px; background: #14243D; }
.map-badge.on { background: #14243D; }   /* 군집은 남색 통일 */

/* [이 지역에서 재검색](M-03) — 지도를 옮긴 뒤에만 뜬다(region-map.js). */
.map-research {
  position: absolute; top: var(--s-md); left: 50%; transform: translateX(-50%); z-index: 6;
  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: 13px; font-weight: 700; color: var(--primary); cursor: pointer; white-space: nowrap;
}
.map-research[hidden] { display: none; }

/* ── 핀 클릭 선택 카드(D-248 M-01) — 384px, 결정 가능한 정보 + CTA 2개. 좌하 플로팅. ── */
.map-card {
  position: absolute; left: var(--s-lg); bottom: var(--s-lg); z-index: 11;
  width: min(384px, calc(100% - 2 * var(--s-lg)));
  padding: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(20, 36, 61, .22); color: inherit;
}
.map-card[hidden] { display: none; }
.map-card-x {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--text-tertiary); font-size: 16px;
  cursor: pointer; border-radius: var(--r-full);
}
.map-card-x:hover { background: var(--surface-alt); }
.map-card-head { display: flex; gap: 12px; }
.map-card-photo {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); font-weight: 700; font-size: 26px; color: var(--primary);
}
.map-card-id { flex: 1 1 auto; min-width: 0; padding-right: 20px; }
.map-card-nameline { display: flex; align-items: center; gap: 8px; }
.map-card-name { font-size: 17.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card-dist-pill {
  flex: none; padding: 2px 8px; border-radius: var(--r-full);
  background: #EFF6FF; color: #1B5FD1; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.map-card-office { margin-top: 2px; font-size: 13px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card-meta { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.map-card-meta .star { color: var(--warning); }
.map-card-presence { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 5px; }
.map-card-presence .dot-presence { width: 7px; height: 7px; }
.map-card-specs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.map-card-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.map-card-cta .btn { height: 42px; }

/* ── 좁은 화면 ─────────────────────────────────────────────── */
/* 좌측 패널이 성립하지 않는다 — 지도를 크게 두고, 패널은 **낮은 피크 높이의 하단 패널**로.
   기본은 접힘(지도 대부분 노출), 손잡이를 누르거나 끌어올리면 펼쳐진다(region-map.js). */
@media (max-width: 720px) {
  .cal-item { padding: 14px; gap: 12px; }
  .cal-date { width: 52px; }

  .map-layout { display: block; position: relative; --mp-peek: 148px; }
  .map-canvas { height: min(72vh, 560px); min-height: 380px; }
  .map-panel {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 12;
    height: var(--mp-peek); max-height: calc(100% - 20px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .16);
    transition: height .2s ease;
  }
  .map-panel.expanded { height: min(76%, 480px); }
  .mp-grip {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; height: 20px; border: 0; background: transparent; cursor: grab;
    touch-action: none;   /* 손잡이를 끄는 동안 페이지 스크롤이 끼어들지 않게 */
  }
  .mp-grip-bar { width: 44px; height: 4px; border-radius: var(--r-full); background: var(--grey300); }
  .mp-head { padding-top: 0; }
  /* [내 위치]는 패널 피크에 가리지 않게 그 위로 띄운다. */
  .map-recenter { bottom: calc(var(--mp-peek) + 20px); }
  /* 선택 카드는 하단 시트로(M-05) — 전폭, 위 모서리만 둥글게, 패널보다 위. 스와이프로 닫힌다. */
  .map-card {
    left: 0; right: 0; bottom: 0; width: 100%; z-index: 13;
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(20, 36, 61, .22);
  }
  /* 시트 위 잡이줄 — 스와이프로 닫는 손잡이(region-map.js가 터치를 잡는다). */
  .map-card::before {
    content: ''; display: block; width: 40px; height: 4px; margin: 4px auto 12px;
    border-radius: var(--r-full); background: var(--grey300);
  }
}