/* 약국입지 화면 전용 스타일.
   모든 선택자를 .pharmsite 아래로 스코프한다 — 공통 CSS(common/module/style)의 클래스를
   덮어쓰지 않기 위해서다. 색·폰트는 common.css 의 변수를 그대로 쓴다. */

/* 이 화면은 공통 `.container` 안에 없다 (Index.cshtml 주석 참조). `.pharmsite` 가 본문 폭
   컨테이너 역할을 직접 한다 — 1440px 상한에 묶이면 1920 화면에서 지도가 728px 밖에 남지
   않아, 서울 전체 폴리곤과 후보를 한눈에 보는 이 화면의 목적이 깨진다.
   위쪽 여백 100px 은 고정 헤더(position: fixed)를 비우는 값이다. 저장소가 서브비주얼 없는
   화면에 쓰는 값과 같다 (`.no-subvisual main > .container { padding-top: 100px }`) — 이 화면은
   `.container` 밖에 있어 그 규칙이 닿지 않으므로 직접 준다.

   --ps-panel-height: 세 칸(목록·지도·상세)의 높이를 한 곳에서 정한다. 고정값으로 두면
   큰 화면에서 지도 아래가 통째로 남는다. 화면 높이에 연동하되 위아래로 묶는다 — 너무
   낮으면 목록 40건이 한두 건씩 보이고, 너무 높으면 상세가 스크롤 대신 세로로만 길어진다.
   빼는 235px = 이 칸 위 215 + 아래 여백 20 이다. 위 215 의 내역(실측, 1600x900):
     헤더 여백 100 + 제목 34 + 제목 아래 24 + 툴바 41 + 툴바 아래 16
   이 값이면 세 칸의 끝이 화면 바닥에서 20px 위에 딱 맞는다 (공통 푸터는 그 아래에 있어
   페이지 자체는 스크롤된다 — 이 상수가 맞추는 것은 세 칸의 끝이다).
   서브비주얼(200px)과 신선도 줄(20px)을 없앤 만큼이 그대로 지도 높이로 갔다.
   상단을 바꾸는 스토리는 이 내역을 다시 재고 합이 235 인지 확인해야 한다 — 배경지도를
   select 에서 미리보기로 바꿀 때 툴바가 51 -> 41 로 줄었고, 제목 아래 여백이 그만큼을
   흡수해 합은 그대로였다. */
.pharmsite {
  max-width: 1920px;
  margin: 0 auto;
  padding: 100px 20px 20px;
  --ps-panel-height: clamp(560px, calc(100vh - 235px), 1100px);
}

/* 공통 style.css 에 태그 선택자로 `section { padding: 80px 0 }` 가 걸려 있다.
   이 화면의 section 은 문서 섹션이 아니라 레이아웃 칸이라, 그 여백을 받으면
   지도가 80px 아래로 밀려 옆 패널과 위쪽이 어긋난다. */
.pharmsite section {
  padding: 0;
}

/* ── 상단 툴바 (단계 탭 + 지역 필터) ── */
.pharmsite .ps-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

/* 높이는 겉 상자(테두리를 가진 이 요소)가 갖는다 — 안쪽 탭에 주면 테두리 2px 만큼 옆
   메뉴 버튼보다 커져 툴바 한 줄의 아래위 끝이 어긋난다(실측 43 대 41). */
.pharmsite .ps-tabs {
  display: inline-flex;
  height: 41px;
  border: 1px solid var(--color-light);
  border-radius: 8px;
  overflow: hidden;
}

/* 높이는 겉 상자(.ps-tabs)가 정한다. 여기서는 그 안을 채우기만 한다. */
.pharmsite .ps-tab {
  height: 100%;
  padding: 0 20px;
  border: 0;
  background: #fff;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.pharmsite .ps-tab + .ps-tab {
  border-left: 1px solid var(--color-light);
}

.pharmsite .ps-tab.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.pharmsite .ps-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}


/* ── 메뉴 버튼 ──
   닫혀 있을 때 현재 값을 보이고, 눌러야 열린다. 라벨(작게)과 값(진하게)을 세로로 쌓아
   "무엇을 고르는 컨트롤인가" 와 "지금 무엇인가" 를 한 버튼에서 함께 읽는다. */
.pharmsite .ps-menu {
  position: relative;
}

.pharmsite .ps-menu-button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 41px;
  padding: 0 11px;
  border: 1px solid var(--color-light);
  border-radius: 8px;
  background: #fff;
  color: var(--color-dark);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.pharmsite .ps-menu-button:hover {
  border-color: var(--color-primary);
}

/* 열린 동안은 버튼도 눌린 것으로 보인다 — 패널만 바뀌면 어느 버튼이 그 패널을 열었는지
   모호하다(메뉴가 둘 이상이면 실제로 헷갈린다). */
.pharmsite .ps-menu-button.open {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.pharmsite .ps-menu-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary);
}

/* 눈에서만 뺀다 — 이름은 보조기술에 남는다. 사이트에 .sr-only 가 있지만 이 화면에 실리는
   스타일시트에는 없어(실측) 직접 둔다. clip-path 를 쓰는 이유: clip 은 폐기된 속성이고
   display:none 이나 visibility:hidden 은 보조기술에서도 사라져 이름이 없어진다. */
.pharmsite .ps-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pharmsite .ps-menu-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.pharmsite .ps-menu-value {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
}

.pharmsite .ps-menu-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--color-gray);
}

/* 미리보기를 아이콘 자리에 놓는다. 그림은 JS 가 고른 선택지에서 복제해 넣는다. */
.pharmsite .ps-menu-thumb {
  width: 26px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  overflow: hidden;
}

.pharmsite .ps-menu-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 패널은 버튼 아래에 떠서 열린다 — 흐름에 밀어 넣으면 열 때마다 툴바가 높아지고 그만큼
   지도가 내려간다(이 화면은 그 높이를 지키려고 서브비주얼까지 뺐다).
   오른쪽 정렬인 이유: 이 메뉴들은 툴바 오른쪽 끝에 있어 왼쪽 정렬하면 화면 밖으로 나간다. */
.pharmsite .ps-menu-panel {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-light);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* display 를 지정했으므로 [hidden] 짝이 필요하다 — 없으면 hidden 을 걸어도 열려 있다. */
.pharmsite .ps-menu-panel[hidden] {
  display: none;
}

.pharmsite .ps-menu-panel select {
  min-width: 168px;
}

/* 배경지도 미리보기. 두 장을 나란히 붙여 하나의 컨트롤로 읽히게 한다 — 떨어뜨려 두면
   각자 독립된 버튼으로 보여 "둘 중 하나" 라는 관계가 사라진다. */
.pharmsite .ps-basemap {
  display: inline-flex;
  border: 1px solid var(--color-light);
  border-radius: 8px;
  overflow: hidden;
}

.pharmsite .ps-basemap-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 0;
  background: #fff;
  color: var(--color-dark);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}

.pharmsite .ps-basemap-item + .ps-basemap-item {
  border-left: 1px solid var(--color-light);
}

.pharmsite .ps-basemap-item:hover {
  background: var(--color-bg);
}

/* 켜진 쪽. 색만 바꾸면 좁은 화면에서 두 장이 나란히 있을 때 어느 쪽이 켜졌는지 훑기
   어려우므로 글씨 굵기까지 함께 바꾼다. */
.pharmsite .ps-basemap-item.current {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* 그림에 테두리를 준다 — 밝은 기본지도 썸네일이 흰 버튼 배경에 녹아 사라진다. */
.pharmsite .ps-basemap-thumb {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 21px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  overflow: hidden;
}

.pharmsite .ps-basemap-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 상태를 갖는 토글(지점 분석 모드). 생김새의 토대는 .ps-menu-button 이 갖는다 — 같은 줄의
   같은 크기 버튼이므로 테두리·높이·여백을 여기 다시 적으면 두 값이 다투고(선택자 특이도가
   같아 순서로 갈린다) 한쪽만 고치는 사고가 난다.
   여기에는 "옆 메뉴들과 다른 점" 만 둔다: 켜지면 탭처럼 채워진다. */
.pharmsite .ps-toggle.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* 목록 끝의 각주 줄. 툴바 -> 목록 머리 -> 목록 끝으로 옮겨 왔다. 툴바에서는 자기 줄을
   차지해 그 높이를 지도에서 빼앗았고, 목록 머리에서는 제목 줄을 두 줄로 늘려 목록 높이를
   먹었다. 화면 숫자의 근거이지 값이 아니므로 본문보다 작게 둔다.
   위쪽 선으로 목록과 갈라 둔다 — 마지막 항목의 밑선과 붙으면 항목 하나로 읽힌다. */
.pharmsite .ps-meta {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 7px 14px;
  border-top: 1px solid var(--color-light);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-gray);
}

.pharmsite .ps-meta-item {
  display: inline-flex;
  align-items: center;
}

/* ── 본문 2분할: 목록 / 지도 ── (상세는 지도 위에 얹는다)
   좌 폭을 고정하면 화면이 좁아질 때 줄어드는 쪽이 지도뿐이다 (1366 노트북에서 지도가
   654px 까지 내려갔다). 목록도 함께 줄이되 최소폭을 둔다 — 주소 한 줄이 들어가는 폭
   아래로는 내려가면 안 된다.

   상세용 세 번째 칸을 없앴다. 그 340px 이 그대로 지도 폭이 되고, 상세는 지도 위 팝업으로
   뜬다(아래 .ps-detail). 부수 효과로 지도 크기가 선택에 따라 변하지 않으므로 Kakao 에
   relayout() 을 알릴 일도 없어졌다 — 칸을 접었다 펴며 타일이 어긋날 여지가 사라진다.

   position: relative 인 이유: 팝업의 기준 상자다. 지도(.ps-map-wrap)에 붙이지 않는 이유는
   상세의 DOM 자리를 목록·지도의 형제로 남겨 뒀기 때문이고, 그 자리를 남긴 이유는 세로로
   쌓이는 배치에서 order 로 "지도 → 상세 → 목록" 을 정할 수 있어야 하기 때문이다. */
.pharmsite .ps-layout {
  position: relative;
  display: grid;
  grid-template-columns: clamp(240px, 17vw, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* 보여줄 상세가 없으면 팝업을 아예 없앤다. 빈 팝업이 "후보를 선택하면 표시됩니다" 한 줄을
   담고 지도를 가리고 있을 이유가 없다. */
.pharmsite .ps-layout.ps-layout-wide .ps-detail {
  display: none;
}

/* 상세 팝업. 지도 위에 얹되 위아래로 여백을 둬 "지도 위에 뜬 창" 으로 보이게 한다.

   왼쪽인 이유: 우상단은 시설 범례 패널(172px, 종별 8줄 + 기회도 램프)이 쓴다. 오른쪽에
   두면 팝업이 그것을 통째로 덮는데(실측), 범례는 지금 보고 있는 표식의 뜻과 화면 안 건수를
   말하는 것이라 상세를 읽는 동안에도 필요하다. 좌하단 Kakao 스케일바·로고는 ToS 상 가릴 수
   없으니 아래로도 여유를 둔다(높이 상한).
   왼쪽에는 안내문구·드릴다운 경로가 있는데 둘은 한 줄짜리라 아래 규칙으로 옆으로 비킨다.

   높이를 top/bottom 으로 늘려 잡지 않고 내용만큼 두는 이유: 기존 시설 상세는 짧아
   (종별·개설일·의사수) 꽉 찬 창 안에 빈 공간만 남는다. 대신 칸 높이를 넘지 않게 묶는다
   (정확한 상한은 JS 가 지도를 직접 재서 준다 — capDetailToMap). */
.pharmsite .ps-detail {
  position: absolute;
  top: 12px;
  left: calc(clamp(240px, 17vw, 300px) + 28px);
  z-index: 40;
  width: clamp(300px, 25vw, 360px);
  max-height: calc(var(--ps-panel-height) - 24px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* 팝업이 열린 동안 안내문구·경로를 팝업 오른쪽으로 비킨다. 둘 다 한 줄짜리라 옆으로
   옮기면 그대로 읽히고, 겹쳐 두면 무엇이 위인지에 따라 한쪽이 아예 안 보인다.
   빼는 값의 근거: 팝업의 left(목록 폭 + 28) 에 팝업 폭과 간격 12 를 더한 자리다. */
.pharmsite .ps-layout:not(.ps-layout-wide) .ps-map-notice,
.pharmsite .ps-layout:not(.ps-layout-wide) .ps-crumbs {
  left: calc(clamp(300px, 25vw, 360px) + 24px);
}

.pharmsite .ps-list,
.pharmsite .ps-detail {
  border: 1px solid var(--color-light);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* 목록 칸을 지도·상세와 같은 높이로 묶고 그 안에서 본문이 남은 높이를 채운다.
   제목 칸에 칩이 붙었다 빠지는 만큼 본문이 늘고 줄어야 세 칸의 끝이 맞는다. */
.pharmsite .ps-list {
  height: var(--ps-panel-height);
  display: flex;
  flex-direction: column;
}

.pharmsite .ps-list-head {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-light);
  font-size: 13px;
  color: var(--color-gray);
}

/* 약국 후보 출처 필터. 목록 제목 아래에 붙는다 — 목록의 범위를 좁히는 컨트롤이므로
   상단 툴바(화면 전체의 범위)와는 다른 자리에 있어야 뜻이 갈린다. */
.pharmsite .ps-chips {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

/* display 를 지정한 요소는 hidden 속성만으로 사라지지 않는다 — 클래스 선택자의 display 가
   브라우저 기본 규칙(`[hidden] { display: none }`)을 이긴다. JS 가 hidden 으로 감추는
   요소에 display 를 주면 반드시 이 짝을 함께 둬야 한다.
   실제로 병원 탭에서 el.hidden === true 인데 화면에는 칩이 그대로 보였다. */
.pharmsite .ps-chips[hidden] {
  display: none;
}

.pharmsite .ps-chip {
  padding: 3px 9px;
  border: 1px solid var(--color-light);
  border-radius: 11px;
  background: #fff;
  color: var(--color-dark);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.pharmsite .ps-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* 본문은 남은 높이를 채운다. 고정값을 주면 제목 칸에 칩이 붙고 빠질 때(탭 전환)
   목록 끝이 옆 칸과 어긋난다 — 지도 칸과 같은 이유로 flex 로 둔다. */
.pharmsite .ps-list-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  overflow-y: auto;
}

/* 항목을 세 칸 격자로 둔다: 순위 | 글 | 점수.
   float: right 로 점수를 띄웠을 때는 점수가 흐름에서 빠져 아래 주소 줄이 점수를 피해
   감기며 첫 줄만 짧아졌다(실측). 격자는 점수에 자기 칸을 주므로 그 감김이 없다.

   순위에 칸을 따로 주는 이유: 첫 줄 안에 두면 동명이 순위만큼 안으로 밀려 아래 주소·진료과와
   왼쪽 선이 어긋난다(실측: 순위 35 · 동명 57 · 주소 35 · 진료과 35). 칸을 나누면 글 세 줄이
   모두 둘째 칸에서 시작한다.

   첫 칸을 22px 로 못박는 이유: auto 로 두면 칸 폭이 숫자 자릿수에 따라 달라져(1 대 40) 항목마다
   글이 시작하는 자리가 흔들린다. 22px 은 12px 굵은 글씨로 두 자리("40" 약 13px)가 들어가고도
   남는 폭이다. column-gap 을 0 으로 두는 것도 그래서다 — 순위 칸의 남는 폭이 이미 간격이다.
   점수와의 간격은 점수 쪽 padding 이 준다.

   align-items: baseline — 첫 줄에 크기가 다른 글자가 넷(순위 12 · 동명 14 · 배지 11 ·
   점수 15px) 모여 밑선이 서너 갈래로 갈렸다. 밑선 정렬은 크기가 달라도 글자가 앉은 선을
   하나로 만든다. row-gap 으로 줄 간격을 한 값으로 모은다 — 항목마다 4px·3px 로 달랐다. */
.pharmsite .ps-list-body > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 0;
  row-gap: 3px;
  align-items: baseline;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-bg);
  cursor: pointer;
}

/* 첫 줄의 글 덩어리. 동명과 배지가 서로 밑선을 맞춘다. */
.pharmsite .ps-item-head {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.pharmsite .ps-list-body > li:hover,
.pharmsite .ps-list-body > li.active {
  background: var(--color-bg);
}

/* 글 왼쪽에 매달리는 번호. 칸 폭은 항목 격자가 정하므로 여기서 폭을 잡지 않는다. */
.pharmsite .ps-item-rank {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray);
}

/* 점수는 첫 줄의 오른쪽 칸이다. 자리를 정해 두는 이유: 자동 배치에 맡기면 출처 배지가
   있는 항목(약국 탭)과 없는 항목에서 점수가 다른 줄로 간다.
   tabular-nums — 폭이 같은 숫자를 쓰면 항목마다 "/100" 이 같은 자리에 서서, 목록을 훑을 때
   눈이 한 줄로 내려간다. 비례폭 숫자는 1 이 든 값만 왼쪽으로 당겨진다. */
.pharmsite .ps-item-score {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  /* 항목 격자의 column-gap 이 0 이므로(순위 칸 때문) 글과의 간격은 여기서 준다. */
  padding-left: 10px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

/* 만점은 값보다 작고 옅다. 같은 크기로 두면 "85.9/100" 이 한 덩어리 숫자로 읽혀 순위를
   훑을 때 눈이 걸린다 — 값이 결론이고 만점은 단위다. */
.pharmsite .ps-item-score-max {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 400;
  color: #9aa3ab;
}

.pharmsite .ps-item-dong {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
}

/* 약국 후보의 출처 배지. asis 와 tobe 는 위험도가 다르므로 색으로도 갈라 둔다
   (tobe 는 병원이 개원해야 성립한다 — 포인트색으로 눈에 걸리게 한다). */
.pharmsite .ps-item-origin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}

.pharmsite .ps-origin-asis {
  background: var(--color-bg);
  color: var(--color-dark);
}

.pharmsite .ps-origin-tobe {
  background: var(--color-teoul);
  color: #fff;
}

.pharmsite .ps-detail-origin {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  word-break: keep-all;
}

.pharmsite p.ps-origin-asis {
  background: var(--color-bg);
  color: var(--color-dark);
}

/* 상세의 tobe 안내는 배지가 아니라 문장이라 배경을 채우지 않고 왼쪽 선으로 표시한다. */
.pharmsite p.ps-origin-tobe {
  border-left: 3px solid var(--color-teoul);
  background: var(--color-bg);
  color: var(--color-black);
}

/* 기존 개설 시설 상세임을 알리는 줄. 후보 상세와 같은 자리에 뜨므로 구분이 필요하다. */
.pharmsite p.ps-origin-existing {
  border-left: 3px solid var(--color-gray);
  background: var(--color-bg);
  color: var(--color-dark);
}

/* 주소는 글 칸에서 시작해 점수 칸까지 쓴다. 1열부터 쓰면 순위 아래로 파고들어 동명과
   왼쪽 선이 어긋난다 — 그것이 이번에 고친 것이다. 줄 간격은 격자의 row-gap 이 준다.
   (실측: 가장 긴 주소가 188px 이라 220px 칸에서 줄이 늘지 않는다) */
.pharmsite .ps-item-addr {
  grid-column: 2 / -1;
  display: block;
  font-size: 13px;
  color: var(--color-dark);
  word-break: keep-all;
}

/* 목록에서 "무엇을 열어야 하나". 점수만 보이면 후보를 고를 근거가 순위뿐이다.
   주소와 같은 칸에서 시작한다 — 왼쪽 선이 한 줄이어야 덩어리로 읽힌다. */
.pharmsite .ps-item-depts {
  grid-column: 2 / -1;
  display: block;
  font-size: 11.5px;
  color: var(--color-primary);
  word-break: keep-all;
}

/* ── 지도 ── */
/* 지도 칸 전체를 옆 패널과 같은 높이로 묶고, 그 안에서 지도가 남은 높이를 채운다.
   지도에 높이를 직접 주면 범례만큼 칸이 커져 세 칸의 끝이 어긋난다. */
.pharmsite .ps-map-wrap {
  position: relative;
  min-width: 0;
  height: var(--ps-panel-height);
  display: flex;
  flex-direction: column;
}

/* 지도 칸은 **쌓임 문맥**이어야 한다.

   position 만 있고 z-index 가 없으면 지도 내부가 쓰는 z-index 가 바깥 오버레이와 같은 문맥에서
   경쟁한다. Kakao 는 내부에 1~3 을 쓰지만 Leaflet 은 패인에 200~700 을 쓴다 — 그래서 배경지도를
   CARTO 로 바꾸자 범례 패널·안내 문구·경로·종별 목록이 통째로 지도 뒤로 깔렸다(실측:
   elementFromPoint 가 leaflet 캔버스를 돌려준다). 오버레이의 z-index 를 700 넘게 올리는 것은
   다음 라이브러리가 더 큰 값을 쓰면 또 깨진다.

   z-index: 0 을 주면 내부의 200~700 이 이 칸 안에 갇히고, 바깥 오버레이는 1 이상이면 위에 온다 —
   숫자 경쟁이 사라진다. 두 엔진 모두에 같은 이유로 통한다. */
.pharmsite .ps-map {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--color-light);
  border-radius: 8px;
}

/* 지점 분석 모드 커서. 지금 누르면 무슨 일이 일어나는지 눌러 보기 전에 알려야 한다.
   하위까지 내리는 이유: Kakao 가 지도 내부 div 에 자기 커서를 주므로 컨테이너에만 주면
   실제로 마우스가 얹히는 요소에는 닿지 않는다. */
.pharmsite .ps-map.ps-map-point-mode,
.pharmsite .ps-map.ps-map-point-mode * {
  cursor: crosshair;
}

/* 지도 위 안내 문구.
   z-index 를 반드시 준다 — Kakao SDK 가 지도 내부 div 에 z-index 1~3 을 붙이므로
   z-index:auto 로 두면 DOM 순서와 무관하게 지도 밑으로 깔려 영원히 안 보인다.
   좌하단이 아니라 좌상단에 붙인다 — 좌하단은 Kakao 스케일바와 로고 자리이고,
   그 표기는 ToS 상 가릴 수 없다. */
.pharmsite .ps-map-notice {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  margin: 0;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(44, 49, 52, 0.85);
  color: #fff;
  font-size: 13px;
}

/* ── 드릴다운 경로 ──
   지도 좌상단. 안내 문구와 같은 자리를 쓰므로 문구가 뜨면 그 아래로 내려간다.
   z-index 는 안내 문구와 같은 이유로 필요하다 (Kakao 내부가 3 까지 쓴다). */
.pharmsite .ps-crumbs {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--color-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 12px;
}

/* 안내 문구가 보이는 동안에는 경로를 그 아래로 내린다 — 둘이 겹치면 둘 다 못 읽는다. */
.pharmsite .ps-map-notice:not([hidden]) ~ .ps-crumbs {
  top: 54px;
}

.pharmsite .ps-crumb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: 12px;
  cursor: pointer;
}

.pharmsite .ps-crumb:hover {
  text-decoration: underline;
}

/* 현재 단위는 이동할 곳이 아니므로 버튼이 아니다. */
.pharmsite .ps-crumb-current {
  color: var(--color-black);
  font-weight: 700;
}

.pharmsite .ps-crumb-sep {
  color: var(--color-gray);
}

/* ── 지도 범례 ──
   후보 두 종류 + 기존 시설 두 종류가 한 지도에 같이 올라가므로 표식의 뜻을 적어 둔다.
   마커와 같은 SVG 를 쓴다 — 색을 CSS 에 따로 적으면 마커를 바꿀 때 어긋난다. */
.pharmsite .ps-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-dark);
}

.pharmsite .ps-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.pharmsite .ps-legend-mark {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 후보 핀은 색이 종류마다 고정이라 파일을 그대로 쓴다 (기존 시설과 달리 종별로 갈리지
   않는다). 기존 시설 표식은 JS 가 지도 마커와 같은 함수로 만들어 넣으므로 여기 없다. */
.pharmsite .ps-legend-cand-hosp,
.pharmsite .ps-legend-cand-pharm,
.pharmsite .ps-legend-cand-pharm-tobe {
  width: 13px;
  height: 18px;
}

.pharmsite .ps-legend-cand-hosp {
  background-image: url('/images/pharmsite/cand-hosp.svg');
}

.pharmsite .ps-legend-cand-pharm {
  background-image: url('/images/pharmsite/cand-pharm.svg');
}

.pharmsite .ps-legend-cand-pharm-tobe {
  background-image: url('/images/pharmsite/cand-pharm-tobe.svg');
}

/* 툴팁 트리거. 범례 줄·범례 문구 줄 안에 들어가므로 그 줄 높이를 넘기지 않는다.
   vertical-align 을 middle 로 잡는 이유: 글자 크기가 10.5px 인 줄에 16px 상자를 넣는 자리라,
   baseline 에 두면 아이콘이 글자보다 내려앉는다(이 화면에서 겪었다).
   감싸개에 따로 규칙을 두지 않는다 — .ps-legend > li 가 이미 inline-flex + align-items:
   center 다. */
.pharmsite .ps-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #98A0A3;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.pharmsite .ps-tip:hover,
.pharmsite .ps-tip:focus-visible {
  color: var(--color-primary);
}

/* 툴팁 본문. 설명 오버레이와 같은 언어로 두되 자리는 JS 가 잰다 — 범례가 지도 아래 끝이라
   아래로 펼치면 화면 밖으로 나가고, 위로 뒤집는 판단은 픽셀을 재야 할 수 있다.

   white-space 를 되돌려야 한다: 트리거가 범례 줄(.ps-legend > li)에 있고 그 줄이 nowrap 이다.
   position: fixed 는 자리만 흐름에서 뗄 뿐 상속은 끊지 않으므로, 두지 않으면 아래 max-width 가
   아무 일도 하지 않는다 — 문구가 길어지는 순간 감기지 않고 상자 밖으로 넘친다. */
.pharmsite .ps-tip-body {
  position: fixed;
  white-space: normal;
  z-index: 80;
  display: block;
  max-width: 320px;
  padding: 6px 8px;
  border: 1px solid #E7E7E7;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 10.5px;
  line-height: 1.6;
  color: #5A6367;
  word-break: keep-all;
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 짝이 반드시 있어야 한다. */
.pharmsite .ps-tip-body[hidden] {
  display: none;
}

/* ── 지도 위 범례 패널 ──
   우상단에 얹는다. z-index 는 안내 문구와 같은 이유로 필요하다 (Kakao 내부가 3 까지 쓴다). */
.pharmsite .ps-map-panel {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 10;
  width: 172px;
  padding: 8px 10px 9px;
  border: 1px solid var(--color-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 11.5px;
  color: var(--color-dark);
}

.pharmsite .ps-map-panel-head {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-black);
}

.pharmsite .ps-map-panel-head + .ps-map-panel-head,
.pharmsite .ps-fac-legend + .ps-map-panel-head {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--color-light);
}

/* 화면 안 합계. 172px 폭에 제목과 나란히 놓으면 넘치므로 아래 줄에 둔다.
   float 로 제목 옆에 붙였다가 문단 높이를 차지하지 못해 범례 첫 줄 위로 새어 나왔다. */
.pharmsite .ps-map-panel-sum {
  display: block;
  margin: -3px 0 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray);
}

.pharmsite .ps-fac-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 줄 간격은 행이 쥐고, 가로 배치는 label 이 쥔다 — 누를 수 있는 영역이 곧 배치 영역이라야
   글리프·이름·건수 어디를 눌러도 켜지고 꺼진다. */
.pharmsite .ps-fac-row {
  padding: 1px 0;
}

.pharmsite .ps-fac-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

/* 지도 위 패널은 좁다. 기본 체크박스(13px)를 그대로 쓰면 종별 이름이 줄바꿈되므로 줄인다. */
.pharmsite .ps-fac-toggle input {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--color-primary);
}

/* 고를 수 없는 상태(축척 밖·잘림)에서는 커서까지 바뀌어야 한다. 흐리기만 하면 눌러 보고
   나서야 안 된다는 것을 알게 된다 — 이유는 아래 ps-fac-hint 가 문장으로 말한다. */
.pharmsite .ps-fac-legend-locked .ps-fac-toggle {
  cursor: not-allowed;
}

/* 조회 중. 스피너를 두지 않는다 — 지도를 움직일 때마다 도는 배경 작업이라 시선을 빼앗으면
   안 된다. 지금 보이는 건수가 곧 갱신될 값이라는 것만 옅게 알린다. */
.pharmsite .ps-fac-legend-busy .ps-fac-count {
  opacity: 0.45;
  transition: opacity 0.15s ease-out;
}

/* 화면에 없는 종별은 흐리게 둔다 — 지우면 표식의 뜻을 확인할 곳이 사라진다. */
.pharmsite .ps-fac-row-empty {
  opacity: 0.4;
}

/* 껐을 때도 흐리지만 체크가 빠진 것이 주된 신호다. "화면에 없음"(0곳)보다 덜 흐리게 둬야
   두 상태가 겹쳤을 때 어느 쪽인지 읽힌다. */
.pharmsite .ps-fac-row-off {
  opacity: 0.62;
}

.pharmsite .ps-fac-mark {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pharmsite .ps-fac-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pharmsite .ps-fac-count {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}

/* 기회도 램프. 색은 JS 가 폴리곤과 같은 배열에서 만들어 넣는다. */
.pharmsite .ps-opp-bar {
  height: 8px;
  border-radius: 4px;
  border: 1px solid var(--color-light);
}

.pharmsite .ps-opp-scale {
  display: flex;
  justify-content: space-between;
  margin: 3px 0 0;
  font-size: 10.5px;
  color: var(--color-gray);
}

.pharmsite .ps-map-panel-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--color-gray);
  word-break: keep-all;
}

/* 켜 둔 종별이 화면에 없을 때의 안내. 회색 주석과 달리 이것은 "지금 무언가 어긋났다" 는
   말이라 색을 준다 — 위의 note 와 같은 회색이면 읽히지 않고 지나간다. */
.pharmsite .ps-fac-hint {
  margin: 6px 0 0;
  padding: 6px 7px;
  border-radius: 4px;
  background: #FFF6E5;
  color: #8A5A00;
  font-size: 10.5px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 항상 보이는 전체 토글. 패널 폭을 꽉 채운다(사용자 지시) — 범례 아래 고정 자리이므로
   폭이 좁으면 목록의 한 행처럼 보여 "이건 버튼" 이 읽히지 않는다. */
.pharmsite .ps-fac-all {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 5px 8px;
  border: 1px solid #D9A64A;
  border-radius: 4px;
  background: #FFF;
  color: #8A5A00;
  font-size: 10.5px;
  text-align: center;
  cursor: pointer;
}

.pharmsite .ps-fac-all:hover {
  background: #FFF0D6;
}

/* 눌린 상태(전 종별 켜짐)를 색으로도 알린다 — aria-pressed 만으로는 눈으로 볼 수 없다. */
.pharmsite .ps-fac-all[aria-pressed="true"] {
  background: #FFF0D6;
  border-color: #B98529;
}

/* 축척 밖·잘림에서는 눌러도 아무 일이 없으므로 잠근다. 체크박스가 이미 그 상태에서
   disabled 이고, 버튼만 살아 있으면 눌리는데 바뀌지 않는 거짓 약속이 된다. */
.pharmsite .ps-fac-all:disabled {
  border-color: #D8D8D8;
  background: #F5F5F5;
  color: #9A9A9A;
  cursor: not-allowed;
}

/* 배경지도 저작자 표시 — 원본 화면과 같은 알약이다. Leaflet 자체 컨트롤에 모양만 입힌다.

   접힘은 font-size: 0 이다. display: none 이 아니므로 링크가 tab 순서에 남고, 그래서 키보드가
   닿는 순간(:focus-within) 펼칠 수 있다. 글자 크기에 transition 을 걸면 펼침이 옆으로 자라는
   움직임으로 읽힌다 — 별도 패널이 튀어나오는 것과 다르다.

   자리는 Leaflet 이 정한다(컨트롤 칸 우하단). 직접 만든 div 를 지도 옆에 두었을 때는 지도
   아래 표식 범례 위로 얹혀 글자를 덮었다(실측) — 컨트롤 칸이어야 지도 모서리에 붙는다.

   선택자에 .leaflet-control-attribution 을 함께 적는 이유: leaflet.css 가 이 파일보다 뒤에
   실려서, 특이도가 같으면 Leaflet 의 기본값이 이긴다(실측 — 배경이 0.82 가 아니라 0.8 로 나왔다). */
.pharmsite .leaflet-control-attribution.ps-credit {
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
  color: #98A0A3;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: font-size 0.12s;
}

/* 접혀 있을 때 보이는 것은 이 글리프 하나다. ::before 로 두면 접기·펼치기가 font-size 한
   속성으로 끝난다 — 글리프는 자기 크기를 따로 갖는다. */
.pharmsite .leaflet-control-attribution.ps-credit::before {
  /* 글리프를 16진 이스케이프(\24D8) 대신 문자로 적는다. 펼칠 때 뒤에 공백을 붙여야 하는데,
     CSS 는 이스케이프 뒤의 공백 하나를 이스케이프 종료로 먹어 버려 사라진다(실측). */
  content: "ⓘ";
  font-size: 12px;
  color: #98A0A3;
}

/* 마우스를 올리거나 링크에 초점이 가면 펼친다. 초점으로도 펼쳐야 키보드만 쓰는 사람이
   출처를 읽을 수 있다 — 라이선스 조건이 "닿을 수 있다" 이므로 마우스만으로는 부족하다. */
.pharmsite .leaflet-control-attribution.ps-credit:hover,
.pharmsite .leaflet-control-attribution.ps-credit:focus-within {
  padding: 4px 8px;
  font-size: 10px;
}

/* 펼치면 글리프와 글자 사이를 띄운다 — 원본과 같다. */
.pharmsite .leaflet-control-attribution.ps-credit:hover::before,
.pharmsite .leaflet-control-attribution.ps-credit:focus-within::before {
  content: "ⓘ ";
}

.pharmsite .leaflet-control-attribution.ps-credit a {
  color: #5A6367;
  text-decoration: underline;
}

/* ── 상세 패널 ── */
/* 높이를 명시한다. height:100% 로 두면 그리드 행 높이가 내용에 따라 정해지는 탓에
   상세 내용이 길어질수록 행 전체가 늘어나고 지도 칸까지 같이 커진다 (스크롤이 안 걸린다). */
/* 팝업 안이 스크롤된다 — 상세는 1,900px 넘게 길어지는 화면이다. 높이를 여기서 고정하지
   않는다: 팝업은 내용만큼이고 상한은 위(.ps-detail 의 max-height)가 준다. 고정하면 짧은
   상세(기존 시설: 종별·개설일·의사수)가 꽉 찬 창 안에 빈 공간만 남긴다. */
.pharmsite .ps-detail {
  padding: 16px;
  overflow-y: auto;
}

/* 닫기 버튼. sticky 인 이유는 이 껍데기가 스크롤 컨테이너라서다 — absolute 로 두면 내용을
   내릴 때 버튼이 위로 사라져 닫을 수단이 없어진다.
   패딩 밖으로 밀어 올리는 음수 여백: 버튼이 내용의 첫 줄을 밀어내면 제목이 아래로 내려간다. */
.pharmsite .ps-detail-close {
  position: sticky;
  top: -16px;
  z-index: 2;
  display: block;
  margin: -16px -16px 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  color: var(--color-gray);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.pharmsite .ps-detail-close:hover {
  color: var(--color-black);
}

.pharmsite .ps-detail-empty {
  margin: 0;
  color: var(--color-gray);
  font-size: 14px;
}

/* 두 탭을 잇는 링크(병원 후보 ↔ 파생 약국 후보). 주소가 없는 화면 안 동작이라 button 이고,
   문장 안에 섞이므로 글자 크기는 담긴 문단을 따른다(inherit).
   경로 버튼(.ps-crumb)과 달리 밑줄을 기본으로 두는 이유: 문장 속 button 은 색만으로는
   누를 수 있는 것으로 읽히지 않는다. 경로 버튼은 따로 서 있어 색만으로 충분하다. */
.pharmsite .ps-detail-cross {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.pharmsite .ps-detail-cross:hover {
  color: var(--color-black);
}

.pharmsite .ps-detail h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-black);
}

.pharmsite .ps-detail .ps-detail-addr {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-gray);
  word-break: keep-all;
}

.pharmsite .ps-metric {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-light);
  font-size: 14px;
}

.pharmsite .ps-metric > span:first-child {
  color: var(--color-dark);
}

.pharmsite .ps-metric > span:last-child {
  font-weight: 700;
  color: var(--color-black);
}

.pharmsite .ps-detail-section {
  margin-top: 18px;
}

.pharmsite .ps-detail-section > h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}

/* 제목 위의 작은 머리말. "무엇의 상세인지"(병원 후보 #3 / 약국 후보 #1 · 병원 후보 파생)를
   제목보다 먼저 읽히게 둔다 — 제목은 행정동명이라 그것만으로는 종류를 알 수 없다. */
.pharmsite .ps-eyebrow {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--color-primary);
}

/* 상세의 탭 줄. 세 칸을 같은 폭으로 둔다.
   grid-auto-columns 가 아니라 repeat(3, minmax(0, 1fr)) 인 이유: auto 계열은 칸의 내재 크기를
   따라가므로 긴 이름이 자기 칸을 밀어내 세 칸이 어긋난다. minmax(0, ...) 의 0 하한이 그것을
   막는다(협업 검토 지적). */
.pharmsite .ps-dtabs {
  margin-top: 14px;
}

.pharmsite .ps-dtab-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-light);
}

.pharmsite .ps-dtab {
  padding: 8px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-gray);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.pharmsite .ps-dtab[aria-selected="true"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

/* 탭 줄과 내용 사이 간격은 패널이 준다 — 첫 절의 margin 에 맡기면 절이 아닌 것(큰 점수 p)이
   먼저 올 때 간격이 달라진다. */
.pharmsite .ps-dtab-panel {
  display: block;
  padding-top: 12px;
}

.pharmsite .ps-dtab-panel > .ps-detail-section:first-child {
  margin-top: 0;
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 짝이 반드시 있어야 하고 display
   규칙보다 뒤에 와야 한다(이 화면에서 .ps-tip-body·.ps-chips 로 겪었다). */
.pharmsite .ps-dtab-panel[hidden] {
  display: none;
}

/* 절 안의 보조 설명. */
.pharmsite .ps-detail-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-gray);
  word-break: keep-all;
}

/* ── 수치 카드 격자 ──
   라벨-값 한 줄(ps-metric)로 지역 수치 7개를 쌓으면 세로로만 길어져 아래 절이 화면 밖으로
   밀린다. 340px 패널에 두 칸씩 넣는다. */
.pharmsite .ps-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pharmsite .ps-stat {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--color-bg);
}

.pharmsite .ps-stat-k {
  display: block;
  font-size: 11px;
  color: var(--color-gray);
  word-break: keep-all;
}

.pharmsite .ps-stat-v {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-black);
}

/* 단위는 값보다 작게. 숫자와 같은 크기면 자리수로 읽힌다. */
.pharmsite .ps-stat-v small {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray);
}

/* ── 추천 진료과목 ──
   순위 배지와 근거(일 처방 · 경쟁여유)를 위아래로 둔다. 한 줄에 넣으면 좁은 패널에서
   근거가 줄바꿈되며 배지와 뒤섞인다. */
.pharmsite .ps-dept {
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-light);
}

.pharmsite .ps-dept-badge {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
}

.pharmsite .ps-dept-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--color-dark);
  word-break: keep-all;
}

/* ── 처방 원천 표 ──
   기관·거리·획득·점유 네 값이라 라벨-값 한 줄에 안 담긴다. 기관명이 길어 넘칠 수 있어
   가로 스크롤을 이 상자 안에만 허용한다 (패널 자체가 가로로 밀리면 안 된다). */
.pharmsite .ps-src-scroll {
  overflow-x: auto;
}

.pharmsite .ps-src-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pharmsite .ps-src-table th {
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--color-light);
  font-weight: 500;
  color: var(--color-gray);
  white-space: nowrap;
}

.pharmsite .ps-src-table td {
  padding: 5px 4px;
  border-bottom: 1px dashed var(--color-light);
  color: var(--color-dark);
  white-space: nowrap;
}

.pharmsite .ps-src-table .ps-src-num {
  text-align: right;
}

/* 아직 개원하지 않은 병원 후보에서 온 몫. 실현되지 않으면 사라지는 값이라 실존 원천과
   같은 무게로 읽히면 안 된다. */
.pharmsite .ps-src-virtual > td {
  color: var(--color-teoul);
  font-style: italic;
}

/* ── 이 건물 ── */
.pharmsite .ps-bldg-addr {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--color-black);
  word-break: keep-all;
}

/* 기존 입주시설. 같은 건물에 이미 의료시설이 몇 곳 있는지가 후보를 고르는 근거 자체라
   눈에 걸리게 세운다(사용자 지시) — 이름 없이 11.5px 회색 한 줄일 때는 주소 아래 묻혔다.
   절 제목(14px/700)보다는 작게 둔다: 같아지면 무엇이 제목인지 흐려진다. */
.pharmsite .ps-bldg-tenants {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg);
}

.pharmsite .ps-bldg-counts {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-black);
}

/* 건수만 포인트색으로 뺀다 — "기존 입주시설" 이라는 이름과 그 값이 한 줄에 있으므로
   값이 먼저 읽혀야 한다. */
.pharmsite .ps-bldg-counts strong {
  color: var(--color-primary);
}

.pharmsite .ps-bldg-mate {
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-light);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-black);
}

.pharmsite .ps-bldg-mate:last-child {
  border-bottom: 0;
}

.pharmsite .ps-bldg-mate small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gray);
}

/* 법령·폐업 리스크 문구. 강조색은 디자인 시스템의 포인트색을 그대로 쓴다. */
.pharmsite .ps-risk {
  margin: 0 0 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-teoul);
  background: var(--color-bg);
  font-size: 13px;
  color: var(--color-dark);
  word-break: keep-all;
}

/* ── 지점 리포트 ──
   우클릭으로 방금 계산한 값이라 후보·시설 상세보다 수치를 크게 보여 준다. */
.pharmsite .ps-bigscore {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}

.pharmsite .ps-bigscore-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-black);
  letter-spacing: -0.5px;
}

.pharmsite .ps-bigscore-caption {
  font-size: 12px;
  color: var(--color-gray);
}

/* ── 점수 분해 방사형 ──

   막대 4~5개로는 "무엇이 약한 자리인가" 가 모양으로 읽히지 않았다. 방사형은 찌그러진 방향이
   곧 약한 축이다. 그림은 모양을 말하고, 아래 값 목록이 숫자를 말한다 — 그림만 두면 정확한
   값이 사라지고 보조기술로도 읽을 수 없다. */
.pharmsite .ps-radar {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 2px auto 6px;
}

/* 축 이름. 값 목록이 숫자를 말하므로 여기서는 어느 방향이 무엇인지만 말한다. */
.pharmsite .ps-radar-label {
  fill: #6b7480;
  font-size: 10px;
}

.pharmsite .ps-radar-label-missing {
  fill: #b3bac1;
}

.pharmsite .ps-radar-ring {
  fill: none;
  stroke: #e5e8ec;
  stroke-width: 1;
}

.pharmsite .ps-radar-spoke {
  stroke: #e5e8ec;
  stroke-width: 1;
}

/* 값이 없는 축은 점선이다. 0 으로 그리면 "최악" 으로 읽힌다 — 없는 값과 최저값은 다르다. */
.pharmsite .ps-radar-spoke-missing {
  stroke: #c8ced5;
  stroke-dasharray: 2 3;
}

.pharmsite .ps-radar-area {
  fill: rgba(0, 177, 176, 0.22);
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

.pharmsite .ps-radar-dot {
  fill: var(--color-primary);
}

.pharmsite .ps-radar-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 축 이름 · 가중치 · 값. 가중치를 함께 적는 이유는 방사형이 축의 동등함을 암시하기 때문이다 —
   실제 가중치는 55/20/15/10 으로 비대칭이라 균형이 좋아 보이는 모양이 10% 축 덕일 수 있다. */
.pharmsite .ps-radar-legend li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}

.pharmsite .ps-radar-axis {
  color: #3f4855;
}

.pharmsite .ps-radar-weight {
  color: #9aa3ab;
  font-size: 11px;
}

.pharmsite .ps-radar-value {
  min-width: 38px;
  text-align: right;
  font-weight: 700;
  color: var(--color-primary);
}

.pharmsite .ps-radar-legend-missing .ps-radar-value {
  color: #9aa3ab;
  font-weight: 400;
}

/* 카카오맵·로드뷰는 링크로만 연다 (타일을 끌어오지 않는다 — ToS). */
.pharmsite .ps-detail-links {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

.pharmsite .ps-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--color-light);
  border-radius: 4px;
  font-size: 12px;
  color: var(--color-dark);
  text-decoration: none;
}

.pharmsite .ps-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── 스크롤 단서 ──
   목록 40건과 상세 여러 섹션이 고정 높이 안에서 끝에 딱 잘려, 더 있다는 것이 드러나지
   않았다. 스크롤 컨테이너 아래쪽에 그림자를 깔고 그 위에 흰 덮개를 얹는다.
   덮개는 local 이라 내용과 함께 올라오고 그림자는 scroll 이라 상자에 고정돼서,
   끝까지 내리면 덮개가 그림자를 가려 단서가 사라진다.
   (배경 선언은 .ps-list/.ps-detail 의 background 단축 속성보다 뒤에 와야 살아남는다.) */
.pharmsite .ps-list-body,
.pharmsite .ps-detail {
  background-image:
    linear-gradient(to top, #fff, rgba(255, 255, 255, 0)),
    linear-gradient(to top, rgba(44, 49, 52, 0.24), rgba(44, 49, 52, 0));
  background-position: bottom, bottom;
  background-size: 100% 32px, 100% 20px;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}

/* 좁은 화면에서도 두 칸(목록·지도)을 유지한다 — 768 태블릿에서 지도 472px 이 나와 아직
   지도로서 쓸 수 있다. 상세는 이제 격자 칸이 아니라 지도 위 팝업이므로, 여기서는 팝업이
   지도를 다 덮지 않도록 폭만 줄인다(예전 grid-column·max-height 는 뜻을 잃었다). */
@media (max-width: 1279px) {
  .pharmsite .ps-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .pharmsite .ps-detail {
    width: clamp(280px, 42vw, 340px);
  }
}

/* ── 모바일 ──
   공통 헤더는 960px 아래에서 모바일 내비로 바뀌며 높이가 90 -> 64px 로 줄어든다.
   상단 여백 100px 을 그대로 두면 36px 이 죽으므로 같이 줄인다. */
@media (max-width: 960px) {
  .pharmsite {
    padding-top: 80px;
  }
}

/* 한 칸으로 세운다.
   분기점을 720px 에 두는 근거: 두 칸이 성립하려면 목록 최소 240 + 지도 최소 300 +
   간격 16 + 좌우 여백 24 = 580px 이 필요하고, 그 아래에서는 어느 쪽이든 못 쓰게 된다.
   실측으로 360px 창에서 지도가 64px 조각(가로 스크롤 249px)까지 내려갔다. 720 이면
   휴대폰(360~430)과 세로 소형 태블릿을 덮고, 768 태블릿은 위 두 칸 규칙에 남는다. */
@media (max-width: 720px) {
  .pharmsite {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 지도 위에 쌓인 높이를 걷어낸다. 한 칸 배치에서 이 높이는 전부 지도가 시작하는 자리를
     밀어내고, 그만큼 화면에 남는 "지도 밖" 영역이 줄어든다 — 그 영역이 페이지를 스크롤할
     유일한 자리이므로 얇아지면 화면에 갇힌다. 처음 실측이 37px 이었다.
     제목 아래 설명 한 줄을 지운다: 360px 에서 두 줄로 늘어 40px 을 쓰는데, 담는 내용은
     탭(병원 입지·약국 입지)과 지도 아래 범례가 이미 말한다. */
  .pharmsite .content-header .title p {
    display: none;
  }

  .pharmsite .ps-toolbar {
    gap: 10px;
    margin-bottom: 12px;
  }

  /* 그리드를 버리고 흐름으로 세운다. 순서를 DOM 과 다르게 두는 이유:
     지도가 이 화면의 목적이라 맨 위여야 하고, 상세는 누른 자리 근처에 나와야 한다.
     DOM 순서(목록·지도·상세)대로 두면 목록 40건을 지나 한참 내려가야 상세가 있어
     누르고도 아무 일이 없는 것처럼 보인다. */
  .pharmsite .ps-layout,
  .pharmsite .ps-layout.ps-layout-wide {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .pharmsite .ps-map-wrap {
    order: 1;
  }

  /* 지도 위 두 조각(경로 · 안내 문구)을 왼쪽으로 되돌린다.

     데스크톱에서는 상세가 지도 **위에 얹히는 팝업**이라 그 폭(상세 300~360px + 24px)만큼
     오른쪽으로 밀어 두어야 팝업에 가려지지 않는다. 이 폭에서는 상세가 지도 **아래 칸**이므로
     가릴 것이 없는데, 밀어 둔 값이 그대로 남아 366px 지도에서 둘이 오른쪽 끝으로 쏠렸다
     (실측: left 324px · 경로 폭 64 -> 42 · 안내 폭 30 — 한 문장이 30px 에 갇혔다).
     사용자가 모바일에서 지점 분석·표식을 눌렀을 때 본 것이 이것이다. */
  .pharmsite .ps-layout:not(.ps-layout-wide) .ps-map-notice,
  .pharmsite .ps-layout:not(.ps-layout-wide) .ps-crumbs {
    left: 12px;
  }

  /* scroll-margin-top: JS 가 후보를 누를 때 이 칸을 화면으로 데려온다(scrollIntoView).
     고정 헤더(64px)가 위를 덮으므로 그만큼 위에 여백을 둔다 — 없으면 상세 제목이
     헤더 밑으로 들어가 무엇의 상세인지 안 보인다. 헤더 높이를 아는 곳은 CSS 뿐이다. */
  /* 세로로 쌓이는 배치에서는 상세를 팝업으로 두지 않고 흐름으로 되돌린다.
     이 폭에서는 지도가 이미 화면 전폭이라 팝업으로 얻을 폭이 없고, 잃는 것은 크다:
     이 배치는 세로축을 하나만 두려고 안쪽 스크롤을 일부러 없앤 화면인데(아래 규칙),
     팝업은 자기 안에 스크롤을 만들어 손가락이 어느 쪽을 움직이는지 예측할 수 없게 한다.
     그래서 절대 배치·그림자·상한을 모두 되돌린다.

     scroll-margin-top: JS 가 후보를 누를 때 이 칸을 화면으로 데려온다(scrollIntoView).
     고정 헤더(64px)가 위를 덮으므로 그만큼 위에 여백을 둔다 — 없으면 상세 제목이
     헤더 밑으로 들어가 무엇의 상세인지 안 보인다. 헤더 높이를 아는 곳은 CSS 뿐이다. */
  .pharmsite .ps-detail {
    order: 2;
    scroll-margin-top: 76px;
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
  }

  /* 흐름에 있는 칸에는 닫기 버튼이 뜻을 잃는다 — 팝업이 아니므로 "덮은 것을 걷는" 동작이
     아니고, 누르면 칸이 사라져 방금 누른 후보의 정보만 없어진다. */
  .pharmsite .ps-detail-close {
    display: none;
  }

  .pharmsite .ps-list {
    order: 3;
  }

  /* 세 칸의 높이를 한 값으로 묶던 규칙(--ps-panel-height)을 푼다. 세로로 쌓이면
     각 칸이 자기 내용만큼 차지하는 것이 맞다. */
  .pharmsite .ps-map-wrap,
  .pharmsite .ps-list,
  .pharmsite .ps-detail {
    height: auto;
    max-height: none;
  }

  /* 지도 높이를 52vh 로 묶는다. 화면을 꽉 채우면 지도 위에서 시작한 세로 스와이프가
     전부 지도 이동으로 먹혀 페이지를 내릴 수 없다 — 한 칸 배치에서는 지도 옆에 빈 곳이
     없으므로 지도 밖 영역이 항상 화면에 남아 있어야 페이지를 스크롤할 수 있다.
     아래 목록이 늘 화면에 걸쳐 있어 거기서 스크롤하면 된다. */
  .pharmsite .ps-map {
    flex: 0 0 auto;
    height: clamp(300px, 52vh, 520px);
  }

  /* 범례 패널을 지도 위에서 흐름으로 내린다. 172px 패널이 360px 지도의 절반을 덮어
     지도와 패널을 둘 다 못 쓰게 만든다. 지우지 않는 이유는 종별 건수와 기회도 램프가
     지도에 그려진 숫자의 근거라서다. */
  .pharmsite .ps-map-panel {
    position: static;
    width: auto;
    margin-top: 8px;
  }

  /* 종별 7줄이 세로로 서면 이 블록만 281px 이 되어 지도와 목록 사이를 갈라놓는다.
     폭은 이제 화면 전체라 두 칸으로 접으면 절반으로 줄어든다 — 데스크톱에서 한 칸인
     이유는 패널이 172px 이라서였고, 여기서는 그 제약이 없다. */
  .pharmsite .ps-fac-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }

  /* 안내 문구는 지도 위에 남기되(가리는 대상이 지도 자신이라 뜻이 있다) 폭을 묶는다 —
     한 줄이 길어 좁은 지도에서는 네 줄까지 늘어난다. */
  .pharmsite .ps-map-notice {
    right: 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  /* 목록·상세의 안쪽 스크롤을 없앤다. 페이지 스크롤 안에 또 스크롤이 있으면 손가락이
     어느 쪽을 움직이는지 예측할 수 없다 — 세로축은 하나만 둔다. */
  .pharmsite .ps-list-body,
  .pharmsite .ps-detail {
    overflow: visible;
    min-height: 0;
  }

  .pharmsite .ps-list {
    overflow: visible;
  }

  /* 스크롤이 없어졌으므로 "더 있다" 는 그림자 단서도 지운다. 두면 바닥에 걷히지 않는
     그림자만 남는다. */
  .pharmsite .ps-list-body,
  .pharmsite .ps-detail {
    background-image: none;
  }

  /* 필터가 화면 밖으로 나갔던 이력이 있다 (390px 창에서 오른쪽 끝 x=609). 컨트롤이 select
     둘 + 버튼 둘에서 메뉴 버튼 셋으로 줄었지만, 값 문구("강남구 역삼동")가 길어질 수 있어
     여전히 넘칠 수 있다. 세 버튼이 한 줄에 들어가도록 값의 폭을 줄이고 늘어나게 둔다. */
  .pharmsite .ps-filters {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 8px;
    /* 메뉴 패널의 기준 상자다 (아래 ps-menu-panel 주석 참조). */
    position: relative;
  }

  /* 컨트롤 셋이 한 줄을 나눠 쓴다. 각자 한 줄을 차지하면 툴바가 4줄(190px)이 되어, 그 높이를
     지키려고 서브비주얼까지 뺀 이 화면에서 지도가 55px 내려간다(실측). flex-basis 0 으로
     같은 폭을 주고 넘치는 글자는 잘리게 둔다. */
  .pharmsite .ps-menu,
  .pharmsite .ps-filters > .ps-menu-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .pharmsite .ps-menu-button {
    width: 100%;
    padding: 0 7px;
    gap: 4px;
  }

  /* 360px 에서 버튼 하나에 남는 글자 폭이 56px 뿐이다. 글씨를 줄이고 장식(캐럿)을 빼서
     "지점 분석" 이 잘리지 않게 한다 — 여닫힘은 aria-expanded 가 알리므로 캐럿은 없어도 된다. */
  .pharmsite .ps-menu-value {
    font-size: 12px;
  }

  .pharmsite .ps-menu-caret {
    display: none;
  }

  /* 값이 길면 잘린다. 정확한 범위는 열어서 보거나 목록 제목에서 확인할 수 있다. */
  .pharmsite .ps-menu-value {
    max-width: none;
    width: 100%;
  }

  /* 패널을 버튼이 아니라 컨트롤 줄 전체에 붙인다.
     버튼에 붙이면 어느 쪽으로든 넘친다: 버튼이 한 줄의 1/3(약 105px)이라 패널을 그 폭으로
     줄이면 "전체 행정동" 을 고르는 select 가 제 이름도 못 담고, 넓히면 왼쪽 버튼의 패널이
     화면 밖으로 나간다(실측 left -87). 줄에 붙이면 폭이 화면 폭이라 두 문제가 함께 없어진다.
     패널은 열려 있을 때만 자리를 차지하므로 넓어도 손해가 없다.
     기준 상자를 옮기려면 .ps-menu 의 relative 를 풀어야 한다 — 그것이 남아 있으면 가장 가까운
     기준 상자가 여전히 버튼 쪽이다. */
  .pharmsite .ps-menu {
    position: static;
  }

  .pharmsite .ps-menu-panel {
    left: 0;
    right: 0;
  }

  .pharmsite .ps-menu-panel select {
    min-width: 0;
    width: 100%;
  }

  /* 탭은 손가락으로 누르는 것이라 폭을 채워 표적을 키운다. */
  .pharmsite .ps-tabs {
    width: 100%;
  }

  .pharmsite .ps-tab {
    flex: 1 1 0;
    padding: 11px 12px;
  }

  /* 신선도는 툴바가 wrap 되면 자기 줄로 내려온다. 그때는 두 줄이어도 무방하므로
     nowrap 을 푼다 (데스크톱에서 nowrap 인 이유는 툴바 높이를 지키기 위해서였다). */
}

/* 아주 좁은 화면(360·375 급)은 툴바가 한 줄 더 늘어난다 — 체크박스 둘 + 지점 분석 버튼 +
   배경지도가 336px 에 다 들어가지 않는다(합 351px). 컨트롤을 줄이는 대신 지도를 그만큼
   낮춰 "지도 밖" 영역을 지킨다. 그 영역이 페이지를 스크롤할 유일한 자리이고, 실측으로
   38px 까지 얇아졌었다.

   분기점 389px 의 근거. 390 은 툴바가 5줄로 들어가 손댈 필요가 없다(실측 여유 103px).
   375 는 그 줄이 351px 로 여유 폭 351px 에 정확히 들어차 경계에 걸려 있다 — 폰트가 조금만
   달라도 줄바꿈되고, 그때 52vh 를 쓰면 여유가 44px 로 떨어진다. 경계에 걸린 폭은 낮춘 쪽에
   두는 것이 안전하다. */
@media (max-width: 389px) {
  .pharmsite .ps-map {
    height: clamp(280px, 44vh, 420px);
  }
}

/* 지도 ↔ 이용안내 토글. 두 화면이 같은 부분 뷰(_ScreenToggle)를 제목 줄 안에 두므로
   규칙도 .pharmsite 아래 한 벌만 있다 — 안내 화면에만 따로 두면 두 화면의 모양이 갈라진다.

   두 항목을 붙여 세그먼트로 보인다. 떨어뜨려 두면 링크 두 개로 읽혀 "지금 어느 쪽인가" 가
   컨트롤로 안 읽힌다. 현재 항목은 색을 채워 구분하고, 그 표시는 aria-current 와 함께 간다. */
/* 라운드 없는 상자로 둔다(사용자 지시). 겉모습은 여기, 사이트 규칙과 다투는 선언만 아래
   긴 선택자에 둔다 — 특이도를 올려야 하는 것과 그냥 두면 되는 것을 섞으면, 나중에 겉모습을
   고치려는 사람이 어느 규칙을 봐야 하는지 알 수 없다. */
.pharmsite .ps-screen-toggle {
  border: 1px solid #dfe3e8;
  overflow: hidden;
  vertical-align: middle;
}

/* 두 칸을 같은 폭으로 만든다(사용자 지시). 격자의 1fr 두 칸은 칸 자체를 같게 만들고 그
   크기가 가장 넓은 칸의 글자 폭이 된다 — "지도" 2 자와 "이용안내" 4 자가 같아진다.

   flex 가 아닌 이유: flex 는 "남는 폭을 나눠 준다" 라서 이 칸처럼 폭이 글자에 맞춰 정해지면
   나눌 것이 없고, 게다가 flex 항목의 min-width 는 auto 라 "이용안내" 는 72px 아래로 줄지
   않는다 — 실측에서 49.5 / 72 가 그대로 남았다. px 를 박는 것도 답이 아니다(글자가 바뀌면
   다시 재야 한다).

   선택자가 긴 이유: 사이트의 `.content-header .title .title-inline > *` 가 (min-width:961px)
   에서 display: inline-block · padding-left: 15px · 구분선(::before)을 준다. 특이도가 0,3,1
   이라 `.pharmsite .ps-screen-toggle`(0,2,0)로는 못 이기고, 이 칸은 격자가 된 적이 없었다
   (실측: 계산값이 inline-block). 같은 특이도로 맞추면 파일 순서에 목숨을 걸어야 한다.
   안쪽 여백과 구분선도 여기서 뺀다 — 테두리 안에 15px 빈칸과 1px 막대가 들어가 상자가
   한쪽으로 밀려 보였다. 제목 글과의 간격은 테두리 밖의 margin 으로 옮겨 그대로 지킨다. */
.pharmsite .content-header .title .title-inline > .ps-screen-toggle {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-left: 15px;
  padding: 0;
}

.pharmsite .content-header .title .title-inline > .ps-screen-toggle::before {
  display: none;
}

.pharmsite .ps-screen-toggle-item {
  padding: 5px 14px;
  text-align: center;
  color: #5b6472;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

.pharmsite .ps-screen-toggle-item + .ps-screen-toggle-item {
  border-left: 1px solid #dfe3e8;
}

.pharmsite .ps-screen-toggle-item:hover {
  background: #f2f5f7;
}

.pharmsite .ps-screen-toggle-item.current {
  background: #00b1b0;
  color: #fff;
  font-weight: 700;
}

/* ── 이용안내(Guide) — 주석 달린 스크린샷 ──

   부품은 공통 style.css 의 것을 그대로 쓴다: .agent-image(스크린샷 위에 겹치는 틀),
   .manual-pointer, .m-point(깜박이는 점), lib.css 의 .tooltip_templates(숨김).
   여기서는 이 화면 고유의 것만 더한다 — 문단 여백과 핫스팟 좌표.
   화면 전환 토글은 두 화면이 함께 쓰므로 .pharmsite 아래에 있다.

   좌표를 왜 CSS 에 두는가: tooltipster 로 여는 매뉴얼의 관례가 그렇다(복약안내 프로그램
   설정 페이지도 같다). 다만 그 페이지들은 좌표를 눈대중으로 적었고, 여기서는 캡처 시점에
   각 대상 요소의 getBoundingClientRect() 로 계산한 값이다. 점(16px + 테두리 3px)의 왼쪽
   위가 기준이므로 중심을 맞추려고 11px 을 빼고 잘라낸 이미지 크기로 나눴다.
   스크린샷을 다시 찍으면 같은 절차로 다시 뽑는다 — 절차는 docs/pharmsite-guide.md 에 있다.

   .pharmsite-guide 아래로 스코프한다. 공통 클래스를 덮어쓰지 않는 이 화면의 규칙이고,
   좌표 선택자는 특히 다른 매뉴얼 페이지와 id 가 겹치면 조용히 어긋난다. */
.pharmsite-guide .ps-guide-lead {
  margin: 0 0 32px;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.7;
}

.pharmsite-guide h4 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}

/* 상세 칸 캡처는 304px 폭이라 두 장을 나란히 둔다. inline-block 사이의 공백만으로는
   간격이 들쭉날쭉하다. */
.pharmsite-guide .agent-image {
  vertical-align: top;
}

.pharmsite-guide .agent-image + .agent-image {
  margin-left: 24px;
}

.pharmsite-guide .agent-image img {
  border: 1px solid #e5e8ec;
  border-radius: 6px;
}

.pharmsite-guide .ps-guide-caption {
  margin: 12px 0 0;
  color: #7a8391;
  font-size: 14px;
}

.pharmsite-guide .ps-guide-foot {
  margin: 8px 0 40px;
  padding: 16px 20px;
  background: #f6f8fa;
  border-radius: 8px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.7;
}

/* 1. 화면 구성 — 잘라낸 크기 1600x900 (뷰포트 1600x1000 의 y 88 부터)

   상세가 지도 위 팝업이 되고(US-211) 툴바가 메뉴 버튼이 되면서(US-210) 화면 기하가 전부
   바뀌었다. 좌표는 캡처 시점에 대상의 getBoundingClientRect() 로 다시 계산했다.

   PsGuide_1_4(행정동 선택)는 없어졌다. 자치구·행정동 두 select 가 하나의 「지역」 메뉴 버튼
   뒤로 들어갔으므로 가리킬 자리가 하나다 — 한 자리에 점 둘을 겹쳐 두면 어느 것이 눌리는지
   알 수 없다. 설명은 PsGuide_1_3 이 둘을 함께 말한다.

   둘(_8 목록 · _9 지도)은 계산한 중앙이 아니라 옮긴 값이다. #ps-meta 가 목록 머리 안에 있어
   _2 와 _8 의 중앙이 4.5px 차이로 겹쳤고(실측), 지도 중앙은 후보 핀 위였다. _8 은 실제 후보
   항목으로, _9 는 표식·팝업·범례를 피한 지도 여백으로 옮겼다.

   2026-08-03 재캡처(US-305). 좌표가 여럿 밀렸다 — 설명 아이콘이 문장 안으로 들어가 목록 머리가
   짧아졌고(_2 24.46 -> 20.01, _8 48.56 -> 38.66), 범례 아래 「모든 종별」 토글이 늘어 패널
   중앙이 내려갔고(_5 26.86 -> 31.44), 툴바에 배경지도 선택지가 넷이 되며 버튼 폭이 바뀌었다
   (_3 80.87 -> 81.51, _6 87.52 -> 88.17, _7 94.42 -> 94.74). */
/* 2026-08-04 재캡처(5·6차). 툴바 라벨을 눈에서 빼고(US-405) 계산 각주를 목록 아래 popover 로
   내리고(US-407) 목록 항목을 격자로 정렬하고(US-404) 상세를 3탭으로 바꾸면서(US-501) 화면이
   통째로 달라졌다. 가장 크게 밀린 것은 계산 각주다 — 목록 머리(20.01%)에서 목록 끝(97.49%)으로
   갔다. 범례 세 줄이 툴팁으로 들어가(US-401) 그 아래 것들도 함께 올라왔다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_1"] { left: 7.31%; top: 10.40%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_2"] { left: 9.75%; top: 97.49%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_3"] { left: 81.35%; top: 10.40%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_5"] { left: 92.63%; top: 28.48%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_6"] { left: 88.00%; top: 10.40%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_7"] { left: 95.00%; top: 10.40%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_8"] { left: 9.75%; top: 33.75%; }
/* 지도는 계산한 중앙(59.00%, 55.52%)이 아니라 옮긴 값이다 — 그 자리가 병원 마커였다
   (elementFromPoint 가 leaflet-marker-icon 을 돌려줬다). 표식·팝업을 피한 지도 빈 곳이다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_9"] { left: 52.00%; top: 70.00%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_10"] { left: 31.25%; top: 49.52%; }

/* 2. 지도 보는 법 — 잘라낸 크기 1272x765 (.ps-map-wrap)
   상세 칸을 없앤 만큼 지도가 넓어져 952 -> 1272px 가 됐다. 이 장은 팝업을 닫고 찍는다 —
   팝업이 지도 왼쪽을 덮으므로 열린 채로는 설명할 지도가 가려진다. */
/* 이 장은 **서울 전체 범위**에서 찍는다. 앞선 두 회차는 후보를 고른 뒤의 건물 단위 화면이라
   경계 폴리곤이 한 장도 보이지 않았고, 그래서 _2(경계를 눌러 좁히기)·_4(행정동 기회도)가
   가리킬 대상이 없는 점이 됐다. 서울 전체에서는 426개 경계와 회색 램프가 함께 보인다. */
/* 2026-08-04 재캡처. 지도 칸이 3px 내려갔다(툴바가 한 줄이 되며 낮아졌다) — 클립을
   308,215 에서 308,218 로 옮겼다. 범례 세 줄이 툴팁으로 들어가(US-401) 범례 폭이 짧아져
   ⓘ 가 49.14% 에서 30.68% 로 왔고, 범례가 얇아진 만큼 옆 패널의 것들도 올라왔다.
   경계 위의 점(_2)과 후보 핀(_6)은 지도 안 좌표이고 기본 보기가 그대로여서 값을 유지한다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_1"] { left: 3.45%; top: 8.96%; }
/* 경계 폴리곤 위의 한 점(실측). 중앙은 마침 거기 있던 표식을 가리키게 된다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_2"] { left: 13.76%; top: 14.13%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_3"] { left: 92.30%; top: 4.58%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_4"] { left: 92.30%; top: 33.43%; }
/* 지도 아래 표식 범례(.ps-legend). 지도 칸 밖이지만 클립(765px) 안이다 */
/* 잰 값은 98.84% 인데 97.50% 로 당겼다 — .m-point 의 top 은 중심이 아니라 위 모서리이고
   16px 짜리 점이 그림 아래로 7px 삐져나갔다(실측). 범례 줄 안에는 그대로 있다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_5"] { left: 30.68%; top: 97.50%; }
/* 지도 안에 있는 후보 핀 하나(실측, 40px 짜리) */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_6"] { left: 59.75%; top: 26.35%; }

/* 3. 후보를 골랐을 때 — 잘라낸 크기 360x940 (지도 위 팝업), 탭 세 개

   세 장이 「스크롤 세 자리」에서 「탭 셋」으로 바뀌었다(US-506). 스크롤로 나누던 때는 같은
   내용을 세 번 찍어 겹치는 부분이 있었는데, 탭은 담긴 것이 아예 다르므로 겹침이 없다.

   높이를 707 에서 940 으로 올렸다. 세 탭의 내용이 각각 938 · 696 · 844px 이라 가장 긴 탭을
   기준으로 맞춰야 세 그림이 같은 크기가 된다 — 크기가 다르면 좌표를 그림마다 다른 기준으로
   재게 되고, 나란히 놓은 세 그림의 아래 끝이 어긋난다. 찍을 때 팝업의 max-height 를 풀고
   height 를 940 으로 고정한다(docs/pharmsite-guide.md 의 절차 참조).

   좌표는 탭마다 그 탭이 열린 상태에서 쟀다 — 감춰진 탭의 요소는 상자가 0x0 이라 재면 0 이
   나온다(실측으로 확인했다). */
/* 처방 탭 (guide-3a) — 머리는 세 탭에 공통이므로 첫 장에 붙인다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_1"] { left: 50.00%; top: 6.93%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_6"] { left: 50.00%; top: 23.16%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_5"] { left: 50.00%; top: 54.62%; }

/* 위치 탭 (guide-3b) */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_9"] { left: 50.00%; top: 23.16%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_10"] { left: 50.42%; top: 26.87%; }

/* 점수 탭 (guide-3c). 3_2 는 큰 숫자, 3_3 은 그 옆의 「점수 계산 방법」 설명 아이콘이다 —
   절 제목이 아니라 값과 아이콘을 각각 가리켜야 둘의 관계가 읽힌다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_2"] { left: 13.61%; top: 26.81%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_3"] { left: 32.43%; top: 26.87%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_4"] { left: 26.94%; top: 32.73%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_7"] { left: 50.00%; top: 38.58%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_3_8"] { left: 50.00%; top: 74.15%; }

/* 4. 임의 지점 — 잘라낸 크기 360x707 (지도 위 팝업) */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_1"] { left: 46.94%; top: 4.53%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_2"] { left: 46.94%; top: 11.17%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_3"] { left: 46.94%; top: 16.34%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_4"] { left: 46.94%; top: 22.16%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_5"] { left: 46.94%; top: 59.39%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_4_6"] { left: 46.94%; top: 65.76%; }

/* 좁은 화면 — 스크린샷을 줄여 보여 주고, 나란히 둔 두 장은 위아래로 쌓는다.
   좌표가 % 라 이미지를 줄여도 점은 따라간다.

   분기점 700px 의 근거: 상세 칸 캡처는 304px 이라 두 장 + 간격 24px + 컨테이너 좌우 여백 40px
   이면 약 672px 이다. 그보다 넓으면 나란히 들어가므로 간격을 살려 둔다 — 960px 로 잡았더니
   768px 에서 나란히 놓인 두 장이 서로 붙었다. 좁아지면 줄바꿈은 저절로 일어나고, 이 규칙은
   그때의 간격만 가로에서 세로로 옮긴다. */
@media (max-width: 700px) {
  .pharmsite-guide .agent-image + .agent-image {
    margin-left: 0;
    margin-top: 24px;
  }
}

/* ── 설명(i 아이콘) ──

   방법론 설명을 값과 같은 크기로 본문에 두면 무엇이 결론인지 흐려진다. 기본은 닫혀 있고
   i 를 누르면 열린다. 아이콘은 24px 로 둔다 — 손가락으로 누를 수 있는 최소치에 가깝고,
   그보다 작으면 모바일에서 옆 글자를 누르게 된다. */
/* 설명하는 문장 안에 들어가는 조각이라 흐름을 끊지 않는다 — 아이콘이 그 문장 끝에 붙는다.
   전에는 p 였고 위 여백까지 있어 아이콘이 아래 줄에 따로 놓였다. */
.pharmsite .ps-explain-line {
  display: inline;
}

/* 문장 안 아이콘은 **글자와 함께** 커지고 작아진다.

   전에는 24px 고정에 vertical-align: -6px 였고, 두 값이 다 자리마다 어긋났다(실측).
     크기   호스트 글자가 15~17px 이라 아이콘이 1.41~1.60배 — 값보다 아이콘이 먼저 읽혔다
     세로   고정 -6px 이라 글자 중심보다 5.0~7.5px 아래로 처졌다. 글자 크기가 자리마다 다르므로
            한 픽셀값으로는 맞을 수 없다

   그래서 크기를 em 으로 묶고 세로는 vertical-align: middle 로 맡긴다 — middle 은 글자의
   x-height 중심에 맞추므로 호스트 글자가 커지면 함께 내려간다. 결과는 호스트의 약 1.25배
   (15px -> 18.6px, 17px -> 21.1px)로, 주석으로 읽히되 눌리는 크기는 아래 ::before 가 지킨다. */
.pharmsite .ps-explain-line .ps-explain {
  position: relative;
  margin-left: 0.3em;
  font-size: 0.8em;
  width: 1.55em;
  height: 1.55em;
  vertical-align: middle;
}

/* 보이는 크기와 **만지는 크기**를 갈라 둔다. 원을 24px 로 키우면 문장 옆에서 값보다 아이콘이
   먼저 읽히고, 원만 줄이면 휴대폰에서 옆 글자를 누르게 된다 — 원은 글자에 맞추고 누를 자리만
   넓힌다.

   하한을 em 이 아니라 24px 로 두는 이유: 12px 글자 옆에서는 원이 14.9px 이라 em 여백으로는
   20.9px 밖에 안 됐다(실측). 24px 은 이 저장소가 처음에 원 지름으로 고른 값이고 근거는
   "그보다 작으면 휴대폰에서 옆 글자를 누르게 된다" 다 — 그 근거는 원이 작아져도 그대로다. */
.pharmsite .ps-explain-line .ps-explain::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 24px);
  height: max(100%, 24px);
}

/* 아이콘 글자도 원과 같은 비율로 줄어야 원 안에서 같은 자리에 앉는다.
   0.86em 은 원 지름의 약 0.55 로, 24px 원에 13px 글자였던 비율과 같다. */
.pharmsite .ps-explain-line .ps-explain-icon {
  font-size: 0.86em;
}

/* 큰 점수 옆은 규칙이 다르다. .ps-bigscore 가 flex + align-items: baseline 이라 아이콘이
   캡션(12px)의 베이스라인에 매달려 30px 숫자의 중심에서 한참 아래에 놓였고, flex gap 8px 에
   margin 4px 이 더해져 12px 이나 떨어져 있었다(실측).
   flex 항목은 vertical-align 을 무시하므로 align-self 로 맞추고, 간격은 gap 하나에 맡긴다. */
.pharmsite .ps-bigscore .ps-explain-line {
  align-self: center;
}

.pharmsite .ps-bigscore .ps-explain-line .ps-explain {
  margin-left: 0;
}

.pharmsite .ps-explain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  /* 원본의 ⓘ 와 같은 잉크로 맞춘다(#98A0A3 / 선 #E7E7E7) — 지도 위 알약과 문장 안 아이콘이
     같은 가족으로 읽혀야 한다. 원본처럼 글리프(ⓘ) 하나로 두지 않고 원+글자로 두는 이유:
     이 아이콘은 눌러야 열리는 버튼이고 24px 히트 영역을 지켜야 하며, 열림 상태를 테두리 색으로
     알려야 한다(원본 알약은 hover 로 펼쳐지므로 그 표시가 필요 없다). */
  border: 1px solid #E7E7E7;
  border-radius: 50%;
  background: #fff;
  color: #98A0A3;
  cursor: pointer;
  vertical-align: middle;
}

.pharmsite .ps-explain:hover,
.pharmsite .ps-explain[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 아이콘 글자는 소문자 i 하나다. 세리프로 두면 알파벳이 아니라 기호로 읽힌다. */
.pharmsite .ps-explain-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

/* 열린 설명은 오버레이다 — 흐름에 두면 열 때마다 아래 내용이 그만큼 밀려 내려간다.

   position: fixed 인 이유가 하나 더 있다: 이 아이콘은 상세 팝업(overflow-y: auto)과 목록 칸
   (overflow: hidden) 안에 있어서, 그 안에서 absolute 로 띄우면 컨테이너 경계에서 잘린다.
   fixed 는 그 조상들의 잘림을 벗어난다. 좌표는 pharmsite.js 가 버튼을 재서 넣는다 —
   화면 밖으로 나가지 않게 아래·위를 뒤집고 좌우를 당긴다.

   z-index 80 의 근거: 상세 팝업 40 · 메뉴 패널 60 보다 위여야 한다. 설명은 그 둘 위에서 열린다. */
.pharmsite .ps-explain-body {
  position: fixed;
  z-index: 80;
  max-width: 300px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 6px 8px;
  /* 위의 저작자 표시 알약과 같은 언어로 맞춘다(원본 화면의 표현이다) — 3px 모서리,
     옅은 선(#E7E7E7), 10.5px 글자, 회색 잉크(#5A6367). 지도 위 ⓘ 와 문장 안 ⓘ 가 같은
     가족으로 읽혀야 한다.

     한 곳만 다르다: 배경이 반투명(0.82)이 아니라 거의 불투명하다. 원본 알약은 옅은 지도 위에
     한 줄을 얹는 것이라 반투명이 통하지만, 이쪽은 100~250자를 글자·표 위에 얹으므로 뒤가
     비치면 읽을 수 없다. */
  border: 1px solid #E7E7E7;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 10.5px;
  line-height: 1.6;
  color: #5A6367;
  word-break: keep-all;
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 클래스 선택자의 display 가
   브라우저 기본 규칙(`[hidden] { display: none }`)을 이긴다. 그래서 짝이 반드시 있어야 한다.

   이 짝이 없어서 설명 본문이 **처음부터 화면에 다 보이고 있었다.** JS 는 body.hidden = true 로
   만들었고 검사는 그 줄을 확인했지만, 브라우저는 위의 display: block 을 따랐다 — US-203 의
   "정보를 아이콘 뒤로 숨긴다" 가 화면에서는 한 번도 동작하지 않았다. 사용자가 눈으로 찾았다.

   같은 함정을 .ps-chips 가 이미 겪어서 짝을 갖고 있는데(위쪽), JS 가 만드는 요소는 그 검사
   대상이 아니었다. 검사를 넓히는 일은 US-301 에서 함께 한다. */
.pharmsite .ps-explain-body[hidden] {
  display: none;
}