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

/* 이 화면은 문서가 아니라 지도 도구다(전면 플로팅 개편 — 사용자 지시).
   지도가 헤더 아래 뷰포트를 통째로 채우고, 목록 카드·툴바·범례는 전부 지도 위에 뜬다.
   제목 줄·서브비주얼·화면 토글이 있던 상단은 없앴다 — 그 높이가 그대로 지도가 됐다.

   top 이 var(--pd-gnb-h) 인 이유: 공통 헤더는 sticky 로 흐름 안에 있고 높이가 그 변수다
   (layout.css — 960px 아래에서 60px 로 준다). 값을 베끼면 헤더를 고칠 때 이 화면만 어긋난다.

   --ps-left-w / --ps-detail-w: 왼쪽 카드와 상세 팝업의 폭. 상세 팝업·안내 문구·경로·범례
   띠가 전부 "왼쪽 카드 오른쪽 옆"(--ps-side-x)을 기준으로 자리를 잡으므로 한 곳에서 정한다. */
.pharmsite {
  position: fixed;
  top: var(--pd-gnb-h);
  left: 0;
  right: 0;
  bottom: 0;
  /* 글꼴을 디자인 시스템 것으로 맞춘다. 이 화면은 .pd-root 로 감싸지 않으므로(전면 지도
     도구라 문서 리셋이 필요 없다) base.css 의 상속을 받지 못한다 — 글꼴만 여기서 준다.
     tnum 은 숫자 고정폭이다: 목록의 점수와 범례의 건수가 항목마다 흔들리지 않아야 한다. */
  font-family: var(--pd-font-sans);
  font-feature-settings: "ss01", "tnum";

  /* 글자와 여백을 디자인 시스템 스케일로 키운 만큼(사용자 지시 — 너무 작고 빽빽하다)
     상세 팝업은 넓혔다: 300~360 -> 332~400. 수치 카드 2열이 13px 라벨을 안 접는다.

     왼쪽 카드는 반대로 **좁혔다**(300~372 -> 256~300 · 사용자 지시). 이 카드와 상세 팝업이
     함께 뜨는 순간 둘이 지도를 나란히 덮으므로, 목록 쪽에서 줄일 수 있는 만큼이 그대로
     지도가 된다. 1600px 창에서 카드가 352 -> 272px 이라 지도가 80px 넓어진다.
     좁힌 만큼은 세 곳에서 뽑았다 — 점수의 만점(/100)을 빼고, 주소를 12px 로 내리고,
     약국 단계에서 과목 렌즈 줄을 감춘다. 그 셋 없이 폭만 줄이면 주소가 두 줄이 된다.
     하한 256px 의 근거: 첫 줄이 순위 배지 22 + 동명 4자(60) + 점수(40) + 좌우 여백 32 +
     점수 앞 여백 12 = 166px 이고, 가장 긴 주소가 12px 에서 약 190px 이다(실측). */
  --ps-gap: var(--pd-space-4);
  /* 256~300 -> 272~316px. 점수에 「점」이 붙어(사용자 지시) 점수 칸이 46 -> 64px 이
     되었다 — 그만큼만 늘린다("아주 조금만"). 동명 칸은 그대로다. */
  --ps-left-w: clamp(272px, 18vw, 316px);
  --ps-detail-w: clamp(332px, 27vw, 400px);
  --ps-side-x: calc(var(--ps-gap) + var(--ps-left-w) + var(--pd-space-3));

  /* 우상단 툴바가 차지하는 높이. 보통은 컨트롤 한 줄이고, 1023px 아래에서는 범위 바가
     자기 줄로 내려가 두 줄이 된다(아래 1023px 블록).
     변수로 두는 이유: 범례 패널의 top 과 아래 --ps-top 계산이 이 값을 베껴 쓰고 있었고,
     버튼 높이를 41 -> 48px 로 올렸을 때 베낀 쪽이 남아 7px 겹쳤다(실측). */
  --ps-toolbar-h: var(--pd-control-h-lg);

  /* 툴바 바로 아래 줄. 범례 패널과 지도 안내 문구가 이 값을 함께 본다 — 둘 다 툴바와
     같은 y 에 있으면 툴바(z-index 30)가 덮는다. 안내 문구는 왼쪽이라 전에는 겹치지
     않았는데, 범위 바가 툴바로 들어와 줄이 492px 이 되면서 1024px 창에서 60px 이
     툴바 뒤로 들어갔다(실측). 가로로 피하려면 폭을 창마다 다시 재야 한다. */
  --ps-below-toolbar: calc(var(--ps-gap) + var(--ps-toolbar-h) + var(--pd-space-3));

  /* 지도 우하단 확대·축소 컨트롤 자리. 오른쪽 칸이 이 높이만큼은 비워야 버튼을 덮지
     않는다 — 덮으면 눌리지도 않는다(칸 z-index 10 대 지도 안 1~3).
     실측(Leaflet): 줌 34x64 가 바닥에서 31px 위, 그 아래 저작자 알약 21px — 바닥부터 95px 다.
     카카오 쪽은 SDK 가 그리고 이 환경에서 SDK 가 안 실려 재지 못했다. 문서상 ZoomControl 이
     Leaflet 것보다 크므로(약 36x82) 여유를 25px 더 얹어 120px 로 둔다 — 1px 차이로 붙여
     두면 컨트롤이 조금만 커져도 다시 겹친다. */
  --ps-zoom-clear: 120px;

  /* 지도 위 오른쪽 칸의 폭. 칸 자신과 그 왼쪽에 뜨는 설정 패널이 같은 값을 본다 —
     한쪽에만 적으면 패널이 칸을 덮거나 사이가 벌어진다. */
  --ps-side-w: 236px;

  /* 지도 위 왼쪽 조각들(상세 팝업·안내 문구)의 위 여백. 보통은 --ps-gap 이고,
     좁은 데스크톱에서 상세가 열려 있을 때만 툴바만큼 내려간다(맨 아래 1279px 블록).
     둘이 한 값을 보게 두는 이유: 자리를 따로 적으면 한쪽만 내려가 서로 겹친다. */
  --ps-top: var(--ps-gap);
}

/* 스프라이트 아이콘은 줄 안에서 글자처럼 앉으면 안 된다 — inline 이면 baseline 아래
   여백이 생겨 버튼 안에서 아이콘이 위로 뜬다. base.css 의 리셋이 .pd-root 안에서만
   display: block 을 주므로 이 화면에서는 여기서 준다. */
.pharmsite .pd-icon,
.ps-guide-dialog .pd-icon {
  display: block;
}

/* 몸통 스크롤 잠금(Index 가 BodyClass 로 붙인다). 지도 확대·축소가 휠이라, 남겨 두면
   플로팅 카드 가장자리 같은 지도 밖에서 휠이 페이지를 굴려 화면이 통째로 밀린다.
   720px 아래는 잠그지 않는다 — 그 폭에서는 흐름 배치로 되돌리므로(맨 아래 미디어 블록)
   문서 스크롤이 이동 수단이고, 손가락에는 애초에 휠이 없다. */
@media (min-width: 721px) {
  body.ps-app {
    overflow: hidden;
  }

  /* 푸터를 감춘다. 몸통이 잠겨 있어 닿을 수 없는데, 푸터 안의 positioned 자식들이
     DOM 순서상 .pharmsite(fixed · z-index auto) 뒤라 지도 위로 글자가 비쳐 올라온다
     (실측 — 사업자 표기 줄이 지도 아래쪽에 겹쳐 보였다). .pharmsite 에 z-index 를 주는
     길은 막혀 있다: 쌓임 문맥이 생겨 이용안내 모달(--pd-z-modal)이 헤더(--pd-gnb-z)
     아래로 갇힌다. 720px 아래 흐름 배치에서는 푸터가 정상으로 보인다. */
  body.ps-app .pd-footer {
    display: none;
  }
}

/* 떠 있는 준비 알림 카드(_Layout 의 .pd-prior)를 이 화면에서는 감춘다(사용자 지시).
   `position: fixed` 로 우하단에 앉는데, 이 화면의 우하단은 지도의 것이다 — 카카오 줌
   컨트롤과 저작자 표시가 그 자리에 있고 340px 카드가 둘을 통째로 덮는다.
   폭에 상관없이 감춘다: fixed 라 720px 아래 흐름 배치에서도 지도 위에 뜬다.
   알림 자체가 사라지는 것은 아니다 — 다른 화면에서는 그대로 뜨고, 이 화면은 약국정보
   등록을 요구하지 않는다(로그인만 본다). */
body.ps-app .pd-prior {
  display: none;
}

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

/* ── 우상단 플로팅 툴바 (지역 · 지점 분석 · 배경지도 · 이용안내) ──
   단계 탭은 여기 없다 — 목록과 한 덩어리로 왼쪽 카드 머리에 있다(사용자 지시).
   z-index 30: 시설 범례 패널(10)·왼쪽 카드(20)보다 위 — 여기서 열리는 메뉴 패널(60)의
   버튼 줄이 다른 오버레이에 덮이면 안 된다. */
.pharmsite .ps-toolbar {
  position: absolute;
  top: var(--ps-gap);
  right: var(--ps-gap);
  z-index: 30;
}

/* ── 단계 탭 (왼쪽 카드 머리) ──
   카드의 첫 줄이다. 테두리·둥근 모서리를 갖지 않는다 — 상자는 카드(.ps-list)가 이미
   갖고 있고, 모서리는 카드의 overflow: hidden 이 잘라 준다. */
.pharmsite .ps-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  /* 46 -> 52px. 탭 글자가 15 -> 16px 이 되어 위아래 숨이 3px 밖에 남지 않았다. */
  height: 52px;
  border-bottom: 1px solid var(--pd-border);
}

/* 높이는 겉 줄(.ps-tabs)이 정한다. 여기서는 그 안을 채우기만 한다. */
.pharmsite .ps-tab {
  height: 100%;
  padding: 0 var(--pd-space-4);
  border: 0;
  background: var(--pd-surface);
  color: var(--pd-text-secondary);
  font-size: 16px;
  font-weight: var(--pd-weight-medium);
  cursor: pointer;
}

.pharmsite .ps-tab.active {
  background: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-weight: var(--pd-weight-bold);
}

/* 두 칸 사이 선. */
.pharmsite .ps-tabs > * + * {
  border-left: 1px solid var(--pd-border);
}

/* ── 진료과목 렌즈 — 탭 바로 아래 자기 줄 ──
   탭 사이에 끼워 두었을 때는 "세 번째 탭" 으로 읽혔다(사용자 지시로 꺼냈다).
   줄 전체가 버튼이다 — 카드 폭이 좁아 값이 길면("전체 과목" 대신 긴 과목명) 폭이 남지
   않고, 누를 자리가 넓을수록 렌즈가 있다는 것이 눈에 걸린다. */
.pharmsite .ps-stage .ps-menu-dept {
  border-bottom: 1px solid var(--pd-border);
}

.pharmsite .ps-stage .ps-menu-dept .ps-menu-button {
  width: 100%;
  /* 42 -> 48px(--pd-control-h-lg). 툴바의 메뉴 버튼과 같은 높이여야 한다 — 같은 문법의
     컨트롤이 화면 두 곳에서 다른 크기면 같은 것으로 읽히지 않는다. */
  height: var(--pd-control-h-lg);
  padding: 0 var(--pd-space-4);
  border: 0;
  border-radius: 0;
}

/* 캐럿은 오른끝이다 — 줄 전체 버튼이라 값 옆에 붙이면 남는 오른쪽이 빈 데로 읽힌다. */
.pharmsite .ps-stage .ps-menu-dept .ps-menu-caret {
  margin-left: auto;
}

/* 테두리가 없으므로 hover·열림 표시를 배경으로 한다. */
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button:hover:not(:disabled),
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button[aria-expanded="true"] {
  background: var(--pd-surface-muted);
}

/* 과목이 걸려 있을 때.
   색 채움을 쓰지 않는다 — 바로 위 활성 탭이 이미 그 문법이라 "켜진 탭 하나 더" 로 읽힌다.
   채움은 "어느 단계인가" 의 표시로 남기고, 과목은 글자를 진하게·강조색으로 두어
   "값을 든 풀다운" 으로 읽히게 한다. */
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button.active .ps-menu-value {
  font-weight: var(--pd-weight-bold);
  color: var(--pd-accent-on-subtle);
}

.pharmsite .ps-stage .ps-menu-dept .ps-menu-button.active .ps-menu-icon {
  color: var(--pd-accent);
}

/* 약국 단계에서는 잠긴다. 잠긴 것이 눈에도 보여야 눌러 보고 나서 알지 않는다.
   값·아이콘까지 함께 흐려야 한다 — 위의 .active 규칙이 그 둘에 강조색을 주고 있어서
   버튼에만 색을 걸면 잠긴 채로 강조색이 남는다(실측 화면에서 그랬다). */
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button:disabled,
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button:disabled .ps-menu-value,
.pharmsite .ps-stage .ps-menu-dept .ps-menu-button:disabled .ps-menu-icon {
  color: var(--pd-text-placeholder);
  cursor: not-allowed;
}

.pharmsite .ps-filters {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
}

/* ── 범위 바 (경로 + 선택기) ──
   접힌 「지역」 메뉴 버튼과 지도 위 드릴다운 경로(.ps-crumbs)가 하나로 합쳐진 자리다
   (사용자 결정). 둘 다 「서울 › 강남구 › 역삼동」을 말하고 있었고, 한쪽은 읽기만 되고
   다른 한쪽은 열어야 고칠 수 있었다.

   한 알약 안에 세 조각을 넣는다 — 콤보마다 테두리를 주면 상자 셋이 나란히 서서 "경로"
   라는 관계가 사라진다. 테두리·그림자는 겉 알약만 갖고 안쪽은 hover·focus 배경으로만
   구분한다.

   높이는 옆 버튼들과 같은 컨트롤 토큰이다 — 같은 줄에서 높이가 다르면 한 줄로 안 읽힌다. */
.pharmsite .ps-scope {
  display: flex;
  align-items: center;
  /* 4 -> 8px. 캐럿을 칸 안으로 넣은 뒤(사용자 지적) 캐럿과 다음 구분점(›) 사이가 8px,
     캐럿과 자기 글자 사이가 60px 이 되어 캐럿이 구분점에 딸린 것으로 읽혔다. */
  gap: var(--pd-space-2);
  height: var(--pd-control-h-lg);
  padding: 0 var(--pd-space-2);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow-sm);
}

/* 뿌리는 링크처럼 둔다 — 경로의 첫 칸이고, 누르면 서울 전체로 되돌아간다. */
.pharmsite .ps-scope-root {
  height: var(--pd-control-h-sm);
  padding: 0 var(--pd-space-2);
  border: 0;
  border-radius: var(--pd-radius-sm);
  background: none;
  color: var(--pd-accent-on-subtle);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  cursor: pointer;
}

.pharmsite .ps-scope-root:hover {
  background: var(--pd-surface-muted);
}

.pharmsite .ps-scope-sep {
  color: var(--pd-text-placeholder);
  font-size: 13px;
}

.pharmsite .ps-combo {
  position: relative;
  display: flex;
  align-items: center;
}

/* 폭을 고정한다. 값에 맞춰 늘리면 구를 고를 때마다 바 전체가 늘었다 줄어들어, 옆 버튼
   두 개가 그만큼 왼쪽으로 밀린다 — 방금 누르려던 버튼이 손 밑에서 움직인다.
   자치구는 4자("영등포구")가 최장이고 행정동은 shortDongName 뒤에도 길어질 수 있어
   (「종로1·2·3·4가동」) 넘치면 잘린다. 정확한 이름은 열어서 목록에서 읽는다. */
.pharmsite .ps-combo-input {
  /* 캐럿 자리를 이 칸 **안에** 둔다(오른쪽 여백 24px). 캐럿을 형제로 나란히 세웠을 때는
     hover·초점 배경과 초점 링이 칸에만 그려져, 화살표가 칸 경계에 걸터앉은 것으로 보였다
     (사용자 지적). 폭은 캐럿까지 합친 값이라 바 길이는 그대로다(92 + 20 = 112). */
  width: 112px;
  height: var(--pd-control-h-sm);
  padding: 0 24px 0 var(--pd-space-2);
  border: 0;
  border-radius: var(--pd-radius-sm);
  /* 옅은 바닥색을 늘 깔아 둔다. 투명하게 두었을 때는 칸의 경계가 hover 전에는 없어서,
     캐럿이 어느 칸의 것인지 눌러 보기 전에는 알 수 없었다(사용자 지적의 뿌리). 테두리로
     가르지 않는 이유는 겉 알약 안에 상자 셋이 서면 "경로" 라는 관계가 사라져서다. */
  background: var(--pd-surface-sunken);
  color: var(--pd-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  text-overflow: ellipsis;
  cursor: pointer;
}

.pharmsite .ps-combo[data-ps-combo="dong"] .ps-combo-input {
  width: 136px;
}

.pharmsite .ps-combo-input:hover:not(:disabled) {
  background: var(--pd-surface-muted);
}

/* 잠긴 칸은 바닥색까지 뺀다 — 옅은 색이 남으면 "누를 수 있는 칸" 으로 읽힌다. */
.pharmsite .ps-combo-input:disabled {
  background: none;
}

/* 이 화면은 .pd-root 안이 아니라 base.css 의 초점 링 규칙이 닿지 않는다(실측) — 토큰을
   직접 쓴다. 값이 흰 알약 안 글자뿐이라 초점이 어디 있는지 링 없이는 알 수 없다. */
.pharmsite .ps-combo-input:focus-visible {
  outline: none;
  background: var(--pd-surface-muted);
  box-shadow: var(--pd-focus-ring);
}

/* 구를 고르기 전의 행정동 칸. 잠긴 것이 눈에 보여야 눌러 보고 나서 알지 않는다.
   자리를 지우지 않는 이유: 칸이 사라지면 "다음에 무엇을 고르는가" 가 화면에서 없어진다. */
.pharmsite .ps-combo-input:disabled {
  color: var(--pd-text-placeholder);
  cursor: not-allowed;
}

.pharmsite .ps-combo-input::placeholder {
  color: var(--pd-text-placeholder);
  font-weight: var(--pd-weight-regular);
}

/* 캐럿은 장식이다 — 칸 어디를 눌러도 열리므로 클릭을 통과시킨다. 통과시키지 않으면
   캐럿을 정확히 누른 클릭만 아무 일도 하지 않아 고장으로 읽힌다.
   칸 위에 얹는다(absolute) — 형제로 나란히 두면 칸의 hover 배경·초점 링 밖에 남아
   경계에 걸터앉은 것으로 보인다(사용자 지적). */
.pharmsite .ps-combo-caret {
  position: absolute;
  right: var(--pd-space-1);
  top: 50%;
  transform: translateY(-50%);
  color: var(--pd-text-muted);
  pointer-events: none;
}

.pharmsite .ps-combo-input:disabled ~ .ps-combo-caret {
  color: var(--pd-text-placeholder);
}

/* 목록. z-index 는 메뉴 패널과 같은 60 이다 — 이 층은 "지금 고르는 중" 이라 지도 위
   무엇보다 앞이어야 하고, 툴바(30)만 넘겨서는 범례 패널(10) 위에 서지 못한다.
   높이 상한이 필요한 이유: 행정동은 한 구에 20개가 넘는 곳이 있어 목록이 화면 밖까지
   자란다. 이 화면은 몸통 스크롤이 잠겨 있어(body.ps-app) 화면 밖은 닿을 수 없다. */
.pharmsite .ps-combo-list {
  position: absolute;
  top: calc(100% + var(--pd-space-2));
  left: 0;
  z-index: 60;
  min-width: 148px;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  margin: 0;
  padding: var(--pd-space-1);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow-lg);
  list-style: none;
}

/* display 를 지정했으므로 [hidden] 짝이 필요하다 — 이 화면이 세 번 겪은 함정이다. */
.pharmsite .ps-combo-list[hidden] {
  display: none;
}

.pharmsite .ps-combo-option {
  padding: var(--pd-space-2) var(--pd-space-3);
  border-radius: var(--pd-radius-sm);
  color: var(--pd-text);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

/* 키보드가 짚고 있는 줄. hover 와 같은 배경을 쓰는 이유: 둘은 같은 뜻("지금 이 줄")이고,
   다르게 두면 마우스와 키보드가 각각 다른 줄을 짚은 것처럼 보인다. */
.pharmsite .ps-combo-option:hover,
.pharmsite .ps-combo-option.active {
  background: var(--pd-surface-muted);
}

/* 이미 고른 값. 배경이 아니라 글자로 표시한다 — 위의 "짚고 있는 줄" 과 겹치면
   무엇이 선택이고 무엇이 커서인지 구분되지 않는다. */
.pharmsite .ps-combo-option[aria-selected="true"] {
  color: var(--pd-accent-on-subtle);
  font-weight: var(--pd-weight-bold);
}

/* 검색어에 남는 것이 없을 때. 빈 상자를 두면 목록이 안 열린 것으로 읽힌다. */
.pharmsite .ps-combo-empty {
  padding: var(--pd-space-2) var(--pd-space-3);
  color: var(--pd-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* 아이콘만 있는 버튼(이용안내). 라벨이 없으므로 좌우 여백을 높이와 같게 두어 정사각형이
   된다 — 기본 여백(--pd-space-4)을 그대로 두면 아이콘 하나에 64px 이 된다. */
.pharmsite .ps-icon-button {
  justify-content: center;
  width: var(--pd-control-h-lg);
  padding: 0;
}


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

.pharmsite .ps-menu-button {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  /* 41 -> 48px. 크기·여백·모서리를 디자인 시스템 컨트롤 토큰으로 맞췄다(사용자 지시 —
     너무 작고 빽빽하다). 8px 모서리도 시스템의 컨트롤 값(--pd-radius-md, 6px)으로 내렸다:
     반경 매핑이 "버튼·입력은 md" 라 8px 는 이 화면만의 값이었다. */
  height: var(--pd-control-h-lg);
  padding: 0 var(--pd-space-4);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface);
  color: var(--pd-text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* 우상단 툴바의 버튼은 지도 위에 뜬다 — 옅은 그림자로 지도와 갈라 둔다.
   왼쪽 카드 안 버튼(진료과목)에는 주지 않는다: 카드가 이미 그림자를 갖는다. */
.pharmsite .ps-toolbar .ps-menu-button {
  box-shadow: var(--pd-shadow-sm);
}

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

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

/* 아이콘은 이제 스프라이트 SVG 다(Index.cshtml 참조) — 크기는 .pd-icon--md(20px)가 주므로
   여기서는 색과 줄어들지 않을 것만 정한다. 글리프 문자였을 때 있던 font-size 는 뜻이 없다. */
.pharmsite .ps-menu-icon {
  flex: 0 0 auto;
  color: var(--pd-accent);
}

/* 눈에서만 뺀다 — 이름은 보조기술에 남는다. 사이트에 .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 {
  /* 13.5 -> 14px. 디자인 시스템은 14px 미만을 본문에 쓰지 않는다(base.css 의 스케일).
     값이 한 글자만큼 길어지므로 max-width 도 함께 늘렸다(132 -> 148px). */
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  line-height: 1.4;
  color: var(--pd-text);
}

/* 캐럿도 스프라이트 아이콘(chevron-down)이다. 테두리로 삼각형을 그리던 자리다 —
   CSS 삼각형은 선 굵기가 없어 나머지 아이콘(Lucide, 선 굵기 2)과 다른 가족으로 보였고,
   크기를 키우면 뭉툭한 덩어리가 된다. */
.pharmsite .ps-menu-caret {
  flex: 0 0 auto;
  color: var(--pd-text-muted);
}

/* 미리보기를 메뉴 버튼의 아이콘 자리에 놓는다. 그림은 JS 가 고른 선택지에서 복제해 넣는다
   (syncBasemapButton). 배경지도가 툴바 -> 범례 패널 -> 다시 툴바로 오면서(사용자 지시)
   한 번 걷어냈다가 되살린 규칙이다. */
.pharmsite .ps-menu-thumb {
  width: 30px;
  height: 21px;
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-sm);
  overflow: hidden;
}

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

/* 글자가 없는 버튼이라 좌우 여백을 줄인다 — 기본 여백(16px)을 그대로 두면 그림 하나에
   82px 이 된다. 아이콘 전용 버튼(.ps-icon-button)과 같은 근거이고, 그쪽은 정사각형이라
   폭을 높이에 맞추지만 이쪽은 그림이 30x21 이라 여백만 줄인다. */
.pharmsite .ps-basemap-button {
  padding: 0 var(--pd-space-3);
}

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

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

/* 메뉴 패널 안 select 규칙은 걷어냈다 — 지역이 select 둘에서 콤보박스 둘로 바뀌면서
   (사용자 지시) 이 화면에 select 가 남지 않았다. */

/* ── 배경지도 선택지 ──
   자리가 세 번 바뀌었다: 툴바의 접힌 메뉴 -> 지도 위 범례 패널 -> **다시 툴바의 드롭다운**
   (사용자 지시). 패널 안에 있던 동안에는 폭이 204px 이라 네 장을 한 줄로 세우고 라벨을
   눈에서 뺐지만, 드롭다운은 폭을 스스로 정할 수 있으므로 2×2 로 되돌리고 라벨도 되살린다 —
   고르는 근거가 그림이라도 이름이 함께 있으면 "카카오" 와 "위성" 을 말로 가릴 수 있다. */
.pharmsite .ps-basemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pd-space-2);
}

.pharmsite .ps-basemap-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pd-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pd-text-secondary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.pharmsite .ps-basemap-item:hover {
  color: var(--pd-text);
}

/* 켜진 쪽. 민트 채움을 쓰지 않는다 — 그림이 곧 값인 컨트롤이라 채움이 그림을 덮는다.
   그림 둘레의 강조색 테두리와 굵은 라벨로 말한다(라벨은 드롭다운으로 돌아오면서 다시
   눈에 보인다). */
.pharmsite .ps-basemap-item.current {
  color: var(--pd-accent-on-subtle);
  font-weight: var(--pd-weight-bold);
}

.pharmsite .ps-basemap-item.current .ps-basemap-thumb {
  border-color: var(--pd-accent);
  box-shadow: 0 0 0 1px var(--pd-accent);
}

/* 그림에 테두리를 준다 — 밝은 기본지도 썸네일이 흰 버튼 배경에 녹아 사라진다.
   높이를 비율(48:34)로 두는 이유: 폭이 칸에 따라 달라지므로 고정 높이면 그림이 늘어난다. */
.pharmsite .ps-basemap-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 48 / 34;
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-sm);
  overflow: hidden;
}

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

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

/* 채움 위에서는 아이콘도 흰색이다. .ps-menu-icon 이 강조색을 들고 있어 그대로 두면
   민트 채움 위에 민트 아이콘이 놓여 사라진다. */
.pharmsite .ps-toggle.active .ps-menu-icon {
  color: var(--pd-text-on-accent);
}

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

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

/* ── 배치: 전부 플로팅 ──
   격자가 아니다. 지도(.ps-map-wrap)가 화면을 통째로 깔고, 목록 카드·상세 팝업·안내
   문구가 각자 absolute 로 그 위에 앉는다. 이 상자는 자리 잡기에 관여하지 않는다 —
   position 을 갖지 않으므로 자식들의 기준 상자는 화면 뿌리(.pharmsite, fixed)다.
   ps-layout-wide 토글(상세 접기)과 모바일 세로 배치의 걸이로만 남는다. */
.pharmsite .ps-layout {
  display: block;
}

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

/* 상세 팝업. 왼쪽 카드 바로 옆이다 — 목록에서 고른 것의 답이므로 목록 곁에 선다.

   오른쪽이 아닌 이유: 우상단은 툴바와 시설 범례 패널이 쓴다. 범례는 지금 보고 있는
   표식의 뜻과 화면 안 건수를 말하는 것이라 상세를 읽는 동안에도 필요하다.
   왼쪽의 안내문구·드릴다운 경로는 한 줄짜리라 아래 규칙으로 옆으로 비킨다.

   높이를 top/bottom 으로 늘려 잡지 않고 내용만큼 두는 이유: 기존 시설 상세는 짧아
   (종별·개설일·의사수) 꽉 찬 창 안에 빈 공간만 남는다. CSS 상한은 거친 값이고,
   정확한 상한은 JS 가 지도 좌하단 축척바·로고(ToS 상 가릴 수 없음)를 재서 준다
   — capDetailToMap. */
.pharmsite .ps-detail {
  position: absolute;
  top: var(--ps-top);
  left: var(--ps-side-x);
  z-index: 40;
  width: var(--ps-detail-w);
  max-height: calc(100% - var(--ps-gap) * 2);
  box-shadow: var(--pd-shadow-lg);
}

/* 팝업이 열리면 지도 아래 면책 띠를 그 오른쪽으로 비킨다. 둘이 팝업의 왼끝(--ps-side-x)을
   공유하므로, 긴 상세가 바닥 근처까지 내려오면(capDetailToMap 상한) 띠를 덮는다 —
   덮으면 z-index 순서에 따라 한쪽이 아예 안 보인다.
   (안내 문구와 표식 범례 띠도 이 규칙을 쓰던 자리다. 문구는 걷어냈고 범례는 우상단
   패널로 들어갔다.) */
.pharmsite .ps-layout:not(.ps-layout-wide) .ps-caveat-bar {
  left: calc(var(--ps-side-x) + var(--ps-detail-w) + var(--pd-space-3));
}

/* overflow: hidden 을 두지 않는다 — 진료과목 메뉴 패널(340px)이 카드(.ps-list) 안에서
   열리는데, 카드 폭보다 넓어 오른쪽 지도 위로 걸쳐야 한다. hidden 이면 카드 끝에서
   잘린다(실측). 둥근 모서리는 첫 줄의 탭이 직접 갖는다(아래). */
.pharmsite .ps-list,
.pharmsite .ps-detail {
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface);
}

/* 탭이 카드의 첫 줄이라 제 배경(흰색·활성 민트)이 카드의 둥근 위 모서리를 덮는다 —
   9px 인 이유: 카드 테두리 1px 안쪽이라 카드 반경(--pd-radius-lg, 10px)을 그대로 쓰면
   바깥 곡선보다 커져 어긋난다. */
.pharmsite .ps-tabs > :first-child {
  border-radius: 9px 0 0 0;
}

.pharmsite .ps-tabs > :last-child {
  border-radius: 0 9px 0 0;
}

/* 왼쪽 카드: 단계 탭 + 진료과목 렌즈 + 후보 목록이 한 덩어리다(사용자 지시).
   지도 위에 뜨므로 그림자로 갈라 두고, 그 안에서 목록 본문이 남은 높이를 채운다.

   아래를 42px 비우는 이유: 지도 좌하단은 Kakao 축척바·로고 자리이고 ToS 상 가릴 수
   없다(카카오 배경지도를 골랐을 때). 카드가 화면 바닥까지 내려오면 그 왼쪽 끝
   (x 5~130 부근)을 덮는다. */
.pharmsite .ps-list {
  position: absolute;
  left: var(--ps-gap);
  top: var(--ps-gap);
  bottom: 42px;
  /* 50 인 이유: 카드가 쌓임 문맥이라 안에서 여는 과목 메뉴 패널(60)이 이 값에 갇힌다.
     상세 팝업(40)보다 위여야 팝업이 열린 채로도 패널이 그 위에 뜬다 — 카드와 팝업의
     상자 자체는 겹치지 않으므로(팝업이 카드 오른쪽 옆) 이 순서에 다른 부작용이 없다. */
  z-index: 50;
  width: var(--ps-left-w);
  display: flex;
  flex-direction: column;
  box-shadow: var(--pd-shadow-lg);
}

.pharmsite .ps-list-head {
  flex: 0 0 auto;
  padding: var(--pd-space-3) var(--pd-space-4);
  border-bottom: 1px solid var(--pd-border);
  font-size: 14px;
  color: var(--pd-text-muted);
}

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

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

.pharmsite .ps-chip {
  /* 칩의 반경은 시스템 매핑에서 pill 이다 — 11px 은 이 화면만의 값이었다. */
  padding: var(--pd-space-1) var(--pd-space-3);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface);
  color: var(--pd-text-secondary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.pharmsite .ps-chip.active {
  border-color: var(--pd-accent);
  background: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-weight: var(--pd-weight-medium);
}

/* 본문은 남은 높이를 채운다. 고정값을 주면 제목 칸에 칩이 붙고 빠질 때(탭 전환)
   목록 끝이 옆 칸과 어긋난다 — 지도 칸과 같은 이유로 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). 칸을 나누면 글 세 줄이
   모두 둘째 칸에서 시작한다.

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

   align-items: baseline — 첫 줄에 크기가 다른 글자가 넷(순위 13 · 동명 15 · 배지 12 ·
   점수 17px) 모여 밑선이 서너 갈래로 갈렸다. 밑선 정렬은 크기가 달라도 글자가 앉은 선을
   하나로 만든다. row-gap 으로 줄 간격을 한 값으로 모은다 — 항목마다 4px·3px 로 달랐다. */
.pharmsite .ps-list-body > li {
  display: grid;
  /* 순위 칸 22 -> 28px: 1~3위가 22px 메달 배지이고(아래) 그 오른쪽에 6px 이 남는다.
     4위 이하의 두 자리 숫자("40")는 13px 굵은 글씨로 15px 이라 같은 칸에서 남는다.
     줄 간격 3 -> 4px, 안 여백 12/14 -> 16px(--pd-space-4) 로 넓혔다(사용자 지시). */
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 0;
  row-gap: var(--pd-space-1);
  align-items: baseline;
  padding: var(--pd-space-4);
  border-bottom: 1px solid var(--pd-border);
  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(--pd-surface-sunken);
}

/* 글 왼쪽에 매달리는 번호.
   4위 이하의 맨숫자도 메달과 같은 22px 상자에 가운데로 세운다 — 폭을 주지 않으면 숫자가
   칸 왼끝에서 시작해 위 세 줄의 원 중심보다 왼쪽에 서고, 목록을 훑을 때 1~3위에서
   4위로 넘어가는 자리에서 번호 줄이 한 번 꺾인다(실측). */
.pharmsite .ps-item-rank {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text-muted);
}

/* ── 1~3위 메달 ──
   상위 셋에 랭킹 느낌을 확실히 준다(사용자 지시). 4위 이하는 위 회색 숫자 그대로다 —
   전부 배지로 두면 "상위" 라는 뜻이 사라지고 40개의 알약이 남는다.

   inline-flex 인 이유: 항목 격자가 baseline 정렬이라(위 주석) 블록으로 두면 원이 줄에서
   떠오른다. inline-flex 의 밑선은 안의 숫자 밑선이라 동명·점수와 한 선에 앉고, 원은
   그 선을 기준으로 위아래로 자란다.

   금·은·동 색: 시스템 팔레트에 은·동이 없다. 금은 골드 토큰(마일리지 계열)을 그대로 쓰고,
   은은 잉크 계열로 대신하고, 동만 이 화면에서 값을 정의한다 — 셋이 한 벌로 읽혀야 하므로
   두 개만 토큰이고 하나는 리터럴인 상태를 주석으로 남긴다. 금속 느낌은 기울기(gradient)가
   낸다: 단색 세 개는 "노랑·회색·주황 알약" 으로 읽혔다.

   글자색은 각 바탕에서 4.5:1 을 넘긴다(금 #8A5A08 on #E9B03D · 은 #4A4F55 on #DDE1E6 ·
   동 #5B3216 on #CE9068). 배지를 장식으로만 두고 숫자를 못 읽게 하면 순위가 사라진다. */
.pharmsite .ps-item-rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--pd-weight-extrabold);
  /* 안쪽 그림자로 테를 만든다. 테두리(border)로 두면 22px 상자가 24px 이 되어 순위 칸을
     넘고, 그만큼 동명이 밀린다. */
  box-shadow: inset 0 0 0 1px rgba(19, 28, 45, 0.14);
}

.pharmsite .ps-item-rank-1 {
  background: linear-gradient(155deg, var(--pd-gold-400), var(--pd-gold-500));
  color: var(--pd-gold-700);
}

.pharmsite .ps-item-rank-2 {
  background: linear-gradient(155deg, var(--pd-ink-100), var(--pd-ink-300));
  color: var(--pd-ink-700);
}

/* 동색만 리터럴이다 — 시스템에 해당 색이 없다(위 주석). 금·은과 같은 명도 대역에 두어야
   셋이 한 벌로 읽히므로 골드 토큰의 명도를 기준으로 색조만 옮긴 값이다. */
.pharmsite .ps-item-rank-3 {
  background: linear-gradient(155deg, #DFA87C, #C4855A);
  color: #5B3216;
}

/* 점수는 첫 줄의 오른쪽 칸이다. 자리를 정해 두는 이유: 자동 배치에 맡기면 출처 배지가
   있는 항목(약국 탭)과 없는 항목에서 점수가 다른 줄로 간다.
   tabular-nums — 폭이 같은 숫자를 쓰면 항목마다 소수점이 같은 자리에 서서, 목록을 훑을 때
   눈이 한 줄로 내려간다. 비례폭 숫자는 1 이 든 값만 왼쪽으로 당겨진다. */
.pharmsite .ps-item-score {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  /* 항목 격자의 column-gap 이 0 이므로(순위 칸 때문) 글과의 간격은 여기서 준다. */
  padding-left: var(--pd-space-3);
  /* 17 -> 18px(t-h4). 시스템 스케일은 …/18/16/14/13/12/11 이고 17 은 그 사이 값이었다
     (사용자 지시 — 스케일 밖 값을 정리한다). 점수 칸이 「100.0」 5자에서도 한 줄이다
     (실측 51px, 칸은 그만큼 잡히고 동명 칸이 남는 폭을 쓴다). */
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* 단위 「점」(사용자 지시). 숫자와 같은 크기면 자리수로 읽히므로 한 단 내리고 색을 죽인다 —
   수치 카드의 단위(.ps-stat-v small)와 같은 문법이다.
   목록에서 만점(/100)을 뺀 결정은 그대로다: 척도는 상세가 한 번 말하고, 이 글자는 "이 숫자가
   점수다" 를 말한다(만점이 얼마인지는 말하지 않는다). */
.pharmsite .ps-item-score small {
  margin-left: 1px;
  font-size: 13px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  /* 강조색을 글자에 그대로 쓰면 흰 바탕에서 대비가 2:1 이라 읽히지 않는다 — 시스템은
     글자용 강조색을 따로 둔다(--pd-accent-on-subtle, 5.9:1). 채움은 계속 --pd-accent 다. */
  color: var(--pd-accent-on-subtle);
}

/* .ps-item-score-max(만점 /100) 규칙은 걷어냈다 — 목록 줄에서 만점을 뺐다(사용자 지시).
   근거는 pharmsite-panel.js 의 SCORE_MAX_LABEL 자리에 남겨 두었다: 척도는 상세에서 한 번
   말하고(점수 탭 히어로 「89.0 / 100」) 목록 40줄이 그것을 40번 되풀이하지 않는다.
   쓰이지 않는 클래스 규칙을 남기면 다음 사람이 아직 화면에 있는 것으로 읽는다. */

/* 15 -> 16px(t-body-lg 크기). 스케일 밖 값이었다. 점수(18px bold)보다 작고 주소(12px)보다
   커서 항목의 위계는 그대로다. */
.pharmsite .ps-item-dong {
  font-size: 16px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text);
}

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

.pharmsite .ps-origin-asis {
  background: var(--pd-surface-muted);
  color: var(--pd-text-secondary);
}

.pharmsite .ps-origin-tobe {
  background: var(--pd-cta);
  color: var(--pd-text-on-accent);
}

.pharmsite .ps-detail-origin {
  /* 주소 줄이 아래 여백을 갖지 않으므로(세로 flex — 여백이 겹쳐지지 않는다) 이 상자가
     자기 위 여백을 갖는다. 아래는 탭 묶음이 준다. */
  margin: var(--pd-space-3) 0 0;
  padding: var(--pd-space-3);
  border-radius: var(--pd-radius-sm);
  font-size: 13px;
  line-height: 1.6;
  word-break: keep-all;
}

/* p.ps-origin-asis 규칙은 걷어냈다 — 상세 머리의 asis 안내 상자를 없앴다(사용자 지시로
   머리를 줄였고, 눈썹 줄의 「기존 병원 건물」이 같은 것을 말한다). 목록 줄의 배지
   (span.ps-origin-asis)는 그대로이고 그 규칙은 위에 있다. */

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

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

/* 주소는 글 칸에서 시작해 점수 칸까지 쓴다. 1열부터 쓰면 순위 아래로 파고들어 동명과
   왼쪽 선이 어긋난다 — 그것이 이번에 고친 것이다. 줄 간격은 격자의 row-gap 이 준다.
   (실측: 가장 긴 주소가 188px 이라 220px 칸에서 줄이 늘지 않는다) */
.pharmsite .ps-item-addr {
  grid-column: 2 / -1;
  display: block;
  /* 14 -> 12px(사용자 지시). 시스템은 본문을 14px 아래로 내리지 않지만 이 줄은 본문이
     아니라 캡션이다(--t-caption 12px) — 후보를 고르는 근거는 동명·점수·과목이고 주소는
     "어디쯤인가" 를 확인하는 딸린 값이다. 카드를 좁힌 폭을 여기서 벌었다: 가장 긴 주소가
     14px 에서 220px, 12px 에서 190px 이라 256px 카드에서도 한 줄에 남는다. */
  font-size: 12px;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

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

/* 과목 렌즈가 켜져 있을 때의 한 줄. 추천 과목 표시와 같은 자리를 쓰되 굵기로 가른다 —
   같은 자리에 다른 뜻(고른 과목의 근거 수치)이 들어오므로 훑을 때 구분돼야 한다. */
.pharmsite .ps-item-depts.ps-item-lens {
  font-weight: var(--pd-weight-bold);
}

/* ── 진료과목 선택 ── */

/* 메뉴 패널은 폭이 내용에 딸린다(다른 패널은 select 하나라 그걸로 충분했다).
   과목 패널은 2열 격자를 담아야 하므로 여기서 폭을 준다 — 안 주면 격자가 부모의 0 폭에
   맞춰 접혀 열이 글자 하나 폭이 된다(실측 110px). */
.pharmsite .ps-menu-dept .ps-menu-panel {
  /* 340 -> 380px. 항목 글자가 13 -> 14px 이 되어 두 열(각 최소 160px)이 접힌다. */
  width: 380px;

  /* 다른 메뉴는 우상단 툴바에 있어 오른끝을 버튼에 맞춘다(right:0). 이 메뉴는 왼쪽 카드
     안이라 같은 규칙을 쓰면 패널이 카드 왼쪽 밖(화면 끝)으로 뻗는다. 왼끝을 줄에 맞춘다 —
     패널(340px)이 카드보다 넓어 오른쪽 지도 위로 자연스럽게 걸친다. */
  left: var(--pd-space-2);
  right: auto;
}

/* 19개를 2열로. 한 열로 두면 패널이 세로로 길어져 지도를 덮고, 3열은 이름이 줄바꿈된다.
   메뉴 패널이 flex column 이라 격자는 이 안에서 따로 만든다.
   열 최소 폭을 두는 이유는 위와 같다 — 0 을 허용하면 다시 접힌다. */
/* 2열 격자 + 목록 전체가 접히지 않는 높이. 320px 이던 때는 19과목(10행)이 딱 맞았는데,
   점수 축을 전 과목으로 넓혀 24항목(전체 과목 + 23과목 = 12행)이 되자 스크롤이 생겨
   **치과·한방이 접혔다**(실측 scrollHeight 380 · clientHeight 320). 목록 맨 아래가 접히면
   "치과가 없다" 라는 처음 그 신고로 돌아간다 — 그것이 이 화면을 고친 이유다.
   400px 은 12행(384) + 여유다. 더 늘려도 되지만 그러면 패널이 지도를 더 덮는다. */
.pharmsite .ps-dept-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: var(--pd-space-1);
  /* 400 -> 540px. 항목이 커진 만큼(줄 높이 23 -> 36px) 12행이 들어갈 높이도 늘어난다 —
     여기서 접히면 목록 맨 아래(치과·한방)가 잘리고, 그것이 이 화면을 고친 그 신고다.
     실측 scrollHeight 520 (전체 과목 41 + 12행 × 36 + 간격) 에 여유를 둔 값이다.

     58vh 상한을 함께 두는 이유가 더 중요하다: 이 화면은 몸통 스크롤이 잠겨 있어(body.ps-app)
     패널이 창 아래로 나가면 그 부분에 **닿을 방법이 아예 없다**. 목록이 접히는 것보다
     나쁘다 — 접히면 안에서 굴려 볼 수 있다. 창이 낮으면 상한이 먼저 걸려 패널이
     화면 안에 남는다(700px 창에서 패널 바닥 676px). */
  max-height: min(540px, 58vh);
  overflow-y: auto;
}

.pharmsite .ps-dept-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-space-2);
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 0;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-surface);
  color: var(--pd-text-secondary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.pharmsite .ps-dept-item:hover:not(:disabled) {
  background: var(--pd-surface-muted);
}

/* "전체 과목" 은 19개와 동급이 아니라 되돌리기다. 한 칸만 쓰면 옆 과목과 나란히 앉아
   스무 번째 선택지로 읽힌다 — 줄 전체를 주고 아래에 선을 그어 무리에서 떼어 놓는다. */
.pharmsite .ps-dept-item[data-ps-dept=""] {
  grid-column: 1 / -1;
  margin-bottom: var(--pd-space-1);
  padding-bottom: var(--pd-space-3);
  border-bottom: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-sm) var(--pd-radius-sm) 0 0;
}

/* 켜진 항목. 배경지도 항목과 같은 문법(색 + 굵기)을 쓴다 — 같은 패널 어휘 안에 있다. */
.pharmsite .ps-dept-item.current {
  background: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-weight: var(--pd-weight-bold);
}

/* 과목 이름 옆의 건수 규칙(.ps-dept-count)은 걷어냈다. 그 숫자가 뜻을 잃어 화면에서 없앴고
   (남은 뜻이 "추천 상위 3에 든 자리 수" 뿐이었다 — 병원 렌즈 메뉴에 있을 값이 아니다),
   쓰이지 않는 클래스 규칙을 남기면 다음 사람이 그 값이 아직 있다고 읽는다. */

/* 서버가 고를 수 없는 항목을 보낸 경우(옛 형식 세대)에만 잠긴 모양이 된다. */
.pharmsite .ps-dept-item:disabled {
  color: var(--pd-text-placeholder);
  cursor: not-allowed;
}

/* 원천의 과목 귀속 결손 안내. 고르는 자리에서 알려야 하지만 본문을 늘 펼쳐 두면 패널의
   절반이 경고가 된다 — 한 줄만 남기고 자세한 것은 ⓘ 오버레이로 접는다(사용자 지시). */
.pharmsite .ps-dept-caution {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  margin: var(--pd-space-1) 0 0;
  padding-top: var(--pd-space-3);
  border-top: 1px solid var(--pd-border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-text-muted);
  white-space: nowrap;
}

/* ── 지도 ── */
/* 지도 칸이 화면 전체를 깐다. 지도 위 플로팅 조각들(안내 문구·경로·시설 패널·범례 띠)의
   기준 상자이기도 하다 — inset: 0 이라 화면 뿌리(.pharmsite)와 같은 좌표계다. */
.pharmsite .ps-map-wrap {
  position: absolute;
  inset: 0;
  min-width: 0;
}

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

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

   z-index: 0 을 주면 내부의 200~700 이 이 칸 안에 갇히고, 바깥 오버레이는 1 이상이면 위에 온다 —
   숫자 경쟁이 사라진다. 두 엔진 모두에 같은 이유로 통한다.

   테두리·둥근 모서리를 갖지 않는다 — 화면 끝까지가 지도다(전면 플로팅 개편).

   배경을 불투명하게 깐다: 이 칸은 fixed 라 문서 흐름의 푸터 위에 떠 있는데, 지도 엔진의
   배경이 투명이라 타일이 아직 안 온 자리로 뒤의 푸터 글자가 비쳐 올라왔다(실측 —
   줌 직후 타일 로딩 중에 보였다). */
.pharmsite .ps-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #E9ECEB;
}

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

/* ── 지도 위 안내 문구 (걷어냈음) ──
   어두운 알약(rgba(31,35,40,.88) + 흰 글자)이 지도 왼쪽 위에 떠 있었다. 걷어낸 이유는
   두 가지가 겹쳐서다(사용자 지적 — "위치가 애매한데 또 강조되어 있어 거슬린다"):
     자리   지도 위 왼쪽은 상세 팝업이 열리면 비켜야 하고, 툴바가 길어지면 또 비켜야 한다.
            이 회차에만 두 번 옮겼다.
     세기   화면에서 가장 진한 조각이었는데, 내용은 "확대하면 더 보인다" 는 안내였다.
   같은 말을 범례 패널의 안내 줄(.ps-fac-hint)이 이미 하고 있었다 — 세 상태(축척 밖·잘림·
   전체 해제)의 주인이 하나(facilityStatus)라 문구도 한 곳(categoryHintMessage)이면 된다.
   되살릴 일이 있으면 그 함수와 pharmsite-map.js 의 showNotice 이력을 함께 보세요. */

/* ── 드릴다운 경로 ──
   지도 위 왼쪽에 있던 경로 띠(.ps-crumbs)는 걷어냈다(사용자 결정). 우상단 범위 바가
   그 일을 한다 — 지역 콤보를 풀어 놓으니 두 조각이 같은 문장을 말하고 있었고, 한쪽은
   읽기만 되고 다른 한쪽은 열어야 고칠 수 있었다.
   덤으로 이 자리가 비어 안내 문구가 아래로 밀리지 않는다(옛 규칙: 문구가 뜨면 경로를
   46px 아래로). */

/* ── 지도 범례 ──
   후보 두 종류 + 기존 시설 두 종류가 한 지도에 같이 올라가므로 표식의 뜻을 적어 둔다.
   마커와 같은 SVG 를 쓴다 — 색을 CSS 에 따로 적으면 마커를 바꿀 때 어긋난다.

   자리가 세 번 바뀌었다: 지도 아래 흐름 → 지도 위 바닥 띠(전면 플로팅 개편) → **범례
   패널 안**(사용자 지시 — 배경지도 아래). 바닥 띠는 지도 폭을 가로질러 48~100px 을
   먹었고, 그 자리는 지도가 가장 넓은 아래쪽이다. 패널은 이미 세로로 서 있어 줄이
   늘어도 지도 폭을 빼앗지 않는다.
   그래서 이 규칙은 이제 자리를 잡지 않는다 — 패널의 한 절(節)일 뿐이다. */
.pharmsite .ps-legend {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--pd-text-secondary);
}

/* 패널 폭(안쪽 204px)에서는 항목이 접힐 수 있다 — nowrap 을 두면 「점선 = 병원 개원
   조건부(TO-BE)」가 상자 밖으로 뻗는다(가로 띠였을 때는 한 줄로 서는 것이 규칙이었다).
   표식은 첫 줄에 맞춰 세운다: 두 줄로 접히면 세로 중앙에 걸려 글의 첫 줄과 어긋난다. */
.pharmsite .ps-legend > li {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-space-2);
  line-height: 1.45;
}

/* 앞 항목들과 성격이 다르다(표식 열쇠가 아니라 수치의 성격) — 색을 죽이고 위쪽 여백으로
   갈라 둔다. 가로 띠였을 때는 margin-left:auto 로 줄 끝에 붙였다. */
.pharmsite .ps-legend > li.ps-legend-caveat {
  margin-top: var(--pd-space-1);
  color: var(--pd-text-muted);
  font-size: 12px;
}

.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,
/* 핀을 다시 그려 판이 24x34 -> 28x36 이 됐다. 14x18 은 그 비율(0.778)과 정확히 같다 —
   비율이 어긋나면 표식이 눌린 채로 그려져 지도의 핀과 다른 모양이 된다. */
.pharmsite .ps-legend-cand-pharm-tobe {
  width: 14px;
  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 가 이미 flex 다(정렬은 flex-start:
   패널 폭에서 항목이 두 줄로 접힐 수 있어 첫 줄에 맞춘다). */
.pharmsite .ps-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 16 -> 22px. 안의 아이콘은 16px(.pd-icon)이고 상자만 넓혔다 — 누르는 표적이 손가락에
     닿아야 한다. 24px 까지 키우지 않은 이유: 이 트리거는 13px 글자 줄 안에 있어 24px 이면
     범례 줄 높이를 아이콘이 정하게 된다(줄이 한 칸 두꺼워진다). */
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pd-text-muted);
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.pharmsite .ps-tip:hover,
.pharmsite .ps-tip:focus-visible {
  color: var(--pd-accent-on-subtle);
}

/* 툴팁 본문. 설명 오버레이와 같은 언어로 두되 자리는 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;
  /* 10.5 -> 13px. 시스템의 가장 작은 글자는 12px 이고, 이 본문은 100~250자를 담는 설명이라
     한 단 더 위(13px, --t-body-sm)가 맞다 — 여백도 6/8 -> 12px 로 함께 넓혔다.
     글자가 커진 만큼 한 줄이 길어지므로 max-width 도 320 -> 340px. */
  max-width: 340px;
  padding: var(--pd-space-3);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--pd-shadow-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

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

/* ── 면책 띠 ──
   표식 범례의 마지막 줄이었던 것을 화면 맨 아래 한 줄로 뺐다(사용자 지시 — 엄청
   강조되진 않지만 적당히 보이게).

   왼끝은 목록 카드 옆이고 **폭은 글자 길이만큼**이다(사용자 지시). 늘려 두었을 때는
   1220px 짜리 흰 띠가 지도 아래를 가로질러, 조용해야 하는 각주가 그 폭만으로 눈에 걸렸다.
   상한만 남긴다: 오른쪽으로 확대·축소 컨트롤(34px + 여백) 앞에서 멈춘다 — 좌하단은 카카오
   로고·축척, 우하단은 줌과 저작자 표시라 둘 다 ToS 상·조작상 가릴 수 없다.

   한 줄을 지킨다(nowrap + 넘치면 …): 두 줄이 되면 지도 아래가 문단으로 읽혀 "적당히" 를
   넘는다. 전체 문구는 12px 에서 약 440px 이라 상한(창 폭 - 카드 - 컨트롤)에 여유가 있고,
   좁은 데스크톱에서 잘리면 잘린 채로 둔다 — 같은 문구가 이용안내에도 있다.

   z-index 15: 지도 위 조각들(10)보다 위, 상세 팝업(40)보다 아래다. 팝업이 열리면 아래
   규칙이 오른쪽으로 비킨다. */
.pharmsite .ps-caveat-bar {
  position: absolute;
  left: var(--ps-side-x);
  bottom: var(--pd-space-3);
  z-index: 15;
  /* 글자 길이만큼. max-width 로 상한만 둔다 — right 를 주면 그 자리까지 늘어난다.
     64px 은 우하단 컨트롤 자리이고, 12px 은 왼끝과 대칭인 숨 고르기다. */
  max-width: calc(100% - var(--ps-side-x) - 64px);
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  margin: 0;
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: rgba(255, 255, 255, 0.9);
  color: var(--pd-text-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 경고 아이콘. 색을 주지 않는다 — .pd-icon 이 currentColor 라 문단 색을 그대로 따른다
   (사용자 지시 — 텍스트와 동일). 16px(--pd-icon-sm)로 두는 이유: 12px 글자 옆에서
   20px 이면 아이콘이 문구보다 먼저 읽힌다. */
.pharmsite .ps-caveat-icon {
  flex: 0 0 auto;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
}

/* ── 표식 툴팁 ──
   마커에 마우스를 올린 동안 이름을 띄운다. 브라우저 기본 툴팁(title 속성)을 대신한다 —
   그쪽은 뜨기까지 1초 가까이 걸렸다(사용자 지적).

   position: fixed + 좌표는 JS 가 넣는다(showMarkerTip). 지도 칸 안에 absolute 로 두는 길은
   막혀 있다: 지도 칸은 쌓임 문맥이라(z-index 0) 안에 둔 것이 바깥 오버레이와 겨루지 못한다.

   pointer-events: none 이 반드시 필요하다 — 툴팁이 표식 위에 뜨므로, 이 상자가 마우스를
   받으면 그 순간 마커의 mouseout 이 떠서 툴팁이 사라지고, 사라지면 다시 mouseover 가 떠서
   깜빡인다. z-index 80: 다른 툴팁(.ps-tip-body)과 같은 층이다. */
.pharmsite .ps-marker-tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  max-width: 240px;
  padding: var(--pd-space-2) var(--pd-space-3);
  border-radius: var(--pd-radius-md);
  /* 지도 위 어디에나 뜨므로 배경이 진해야 읽힌다 — 위성 지도 위에서도 대비가 남는다.
     시스템의 반전 표면(--pd-surface-inverted, #1F2328)에 투명도를 준 값이다. */
  background: rgba(31, 35, 40, 0.92);
  color: var(--pd-text-inverted);
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: var(--pd-shadow-md);
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 이 화면이 다섯 번 겪은 함정이다.
   (여기서는 position 이 display 를 바꾸지 않지만, 짝을 두는 관례를 지킨다.) */
.pharmsite .ps-marker-tip[hidden] {
  display: none;
}

/* ── 지도 위 오른쪽 칸 ──
   우상단, 툴바 바로 아래. 상자 둘을 세로로 세운다(사용자 지시):
     화면 안 기존 시설    늘 펼침
     지도 설정 및 안내    접힘 (.ps-map-aside — 기회도 · 배경지도 · 표식)
   자리 잡기를 이 껍데기가 하고 상자들은 생김새만 갖는다 — 두 상자를 각각 absolute 로
   두면 위 상자의 높이(종별 7줄 + 안내 줄이라 상태마다 다르다)를 아래 상자가 알아야 한다.

   z-index 는 안내 문구와 같은 이유로 필요하다 (Kakao 내부가 3 까지 쓴다).

   **아래 여유(--ps-zoom-clear)**: 카카오 지도는 우하단에 줌 컨트롤을 그린다
   (pharmsite-engine-kakao.js, ControlPosition.BOTTOMRIGHT). 한 상자로 이어 붙였을 때
   패널이 774px 이라 그 자리까지 내려와 버튼을 덮었고(사용자 신고), 이 칸이 z-index 10 이라
   눌리지도 않았다. 96px 은 그 컨트롤(약 32x60)과 여백을 덮는 값이다. 접힌 기본값이면
   애초에 닿지 않지만, 펼친 상태에서도 넘지 않도록 상한으로 못박는다. */
.pharmsite .ps-map-side {
  position: absolute;
  right: var(--ps-gap);
  /* 툴바 아래. 높이를 베끼지 않고 변수를 보는 이유: 버튼 높이를 41 -> 48px 로 올렸을 때
     베낀 값이 남아 이 자리가 7px 겹쳤고, 이제는 좁은 폭에서 툴바가 두 줄이 된다. */
  top: var(--ps-below-toolbar);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  /* 폭 236 · 글자 12~13px: 172px/10.5~11.5px -> 200px/12~12.5px -> 지금 값으로 두 번 키웠다
     (둘 다 사용자 지시 — 글자와 여백이 너무 작았다). 폭을 같이 키워야 종별 이름이
     줄바꿈되지 않는다. */
  width: var(--ps-side-w);
  max-height: calc(100% - var(--ps-below-toolbar) - var(--ps-zoom-clear));
  /* **칸은 스크롤하지 않는다.** 스크롤은 아래에서 상자마다 따로 준다 — 칸에 두었을 때는
     「지도 안내」를 펼치면 두 상자가 한 스크롤 상자에 담겨, 안내를 보려고 굴리면 종별
     목록이 함께 올라갔다(사용자가 두 번 지적한 것이 이것이다). */
  overflow: hidden;
}

/* 넘칠 때 줄어드는 쪽은 **시설 상자**다(flex 0 1 auto + 자기 스크롤). 「지도 안내」는
   줄지 않는다(0 0 auto) — 방금 눌러서 펼친 것이 잘리면 안 된다.
   그래서 낮은 해상도에서 굴리는 것은 종별 목록 하나이고, 그것은 자기 카드 안에서만
   움직인다. 상자 둘이 한 스크롤을 나눠 쓰지 않는다.
   min-height: 0 이 필수다 — flex 항목의 기본 min-height 는 auto 라 내용보다 작아지지
   않고, 그러면 칸이 상한을 넘어 아래 상자가 잘린다(overflow: hidden). */
.pharmsite .ps-map-side > .ps-map-panel:first-child {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pharmsite .ps-map-aside {
  flex: 0 0 auto;
}

/* 상자 하나의 생김새. 여백은 12/14 -> 16px(--pd-space-4) 로 사방을 같게 뒀다. */
.pharmsite .ps-map-panel {
  flex: 0 0 auto;
  padding: var(--pd-space-4);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--pd-shadow-md);
  font-size: 13px;
  color: var(--pd-text-secondary);
}

/* 접히는 상자는 제목 줄이 곧 버튼이라 안쪽 여백을 버튼이 갖는다 — 상자에 두면 접힌
   상태에서도 위아래 16px 이 남아 44px 버튼이 76px 짜리 덩어리로 보인다. */
.pharmsite .ps-map-aside {
  padding: 0;
}

.pharmsite .ps-aside-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-2);
  width: 100%;
  /* 접힌 상태의 상자가 곧 이 버튼이므로 모서리를 물려받는다(바깥 테두리 1px 안쪽이라 9px). */
  padding: var(--pd-space-3) var(--pd-space-4);
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--pd-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--pd-weight-bold);
  text-align: left;
  cursor: pointer;
}

.pharmsite .ps-aside-toggle:hover {
  color: var(--pd-accent-on-subtle);
}

/* 펼쳐지면 이 줄이 상자의 첫 줄이 되므로 아래 모서리를 내놓고 내용과 선으로 갈린다. */
.pharmsite .ps-aside-toggle[aria-expanded="true"] {
  border-radius: 9px 9px 0 0;
  border-bottom: 1px solid var(--pd-border);
  color: var(--pd-accent-on-subtle);
}

.pharmsite .ps-aside-caret {
  flex: 0 0 auto;
  color: var(--pd-text-muted);
  transition: transform 0.12s;
}

/* 펼침을 화살표 방향으로도 말한다 — aria-expanded 는 보조기술만 읽는다. */
.pharmsite .ps-aside-toggle[aria-expanded="true"] .ps-aside-caret {
  transform: rotate(180deg);
}

/* ── 「지도 안내」 내용 ──
   제 상자 안에서 아래로 펼쳐진다(사용자 지시 — 예전대로). 스크롤을 두지 않는다.

   한 번 왼쪽에 뜨는 패널로 뺀 이력이 있다: 그때는 배경지도 선택지(155px)와 면책 문구가
   함께 있어 칸 전체가 길었고, 펼치면 스크롤이 「화면 안 기존 시설」과 한 몸으로 잡혔다
   (사용자 지적). 그 둘이 각자 자기 자리로 나가면서(툴바 드롭다운 · 화면 아래 띠) 남은 것이
   기회도와 표식뿐이라 다시 제자리에 들어올 수 있게 됐다 — 실측 244px.

   그래도 낮은 해상도에서는 칸 전체가 상한(--ps-map-side 의 max-height)에 닿을 수 있다.
   그때 스크롤하는 것은 **칸**이고 이 상자가 아니다 — 여기에 스크롤을 또 두면 세로축이
   둘이 된다. */
.pharmsite .ps-aside-body {
  padding: var(--pd-space-4);
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 이 화면이 네 번 겪은 함정이다. */
.pharmsite .ps-aside-body[hidden] {
  display: none;
}

.pharmsite .ps-map-panel-head {
  margin: 0 0 var(--pd-space-2);
  font-size: 13px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

/* 절 사이 구분선. 배경지도 절은 클래스로 표시한다 — 인접 선택자로는 잡히지 않는다:
   바로 앞이 조건부 안내 문구(.ps-fac-hint)라, 문구가 뜨는 상태에서만 선이 생겼다. */
.pharmsite .ps-map-panel-head + .ps-map-panel-head,
.pharmsite .ps-fac-legend + .ps-map-panel-head,
.pharmsite .ps-map-panel-head-split {
  margin-top: var(--pd-space-4);
  padding-top: var(--pd-space-3);
  border-top: 1px solid var(--pd-border);
}

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

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

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

.pharmsite .ps-fac-toggle {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  margin: 0;
  cursor: pointer;
  font-weight: var(--pd-weight-regular);
}

.pharmsite .ps-fac-toggle input {
  flex: 0 0 auto;
  /* 13 -> 16px. 체크박스가 글자보다 작으면 줄의 중심이 흔들려 보이고, 손가락으로 켜고
     끄는 것이라 표적도 이만큼은 돼야 한다. */
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--pd-accent);
}

/* 고를 수 없는 상태(축척 밖·잘림)에서는 커서까지 바뀌어야 한다. 흐리기만 하면 눌러 보고
   나서야 안 된다는 것을 알게 된다 — 이유는 아래 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: 14px;
  height: 14px;
  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: var(--pd-weight-bold);
  color: var(--pd-text);
  font-variant-numeric: tabular-nums;
}

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

.pharmsite .ps-opp-scale {
  display: flex;
  justify-content: space-between;
  margin: var(--pd-space-2) 0 0;
  font-size: 12px;
  color: var(--pd-text-muted);
}

.pharmsite .ps-map-panel-note {
  margin: var(--pd-space-3) 0 0;
  font-size: 12px;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

/* 켜 둔 종별이 화면에 없을 때의 안내. 회색 주석과 달리 이것은 "지금 무언가 어긋났다" 는
   말이라 색을 준다 — 위의 note 와 같은 회색이면 읽히지 않고 지나간다. */
.pharmsite .ps-fac-hint {
  margin: var(--pd-space-3) 0 0;
  padding: var(--pd-space-2) var(--pd-space-3);
  border-radius: var(--pd-radius-sm);
  background: var(--pd-warning-subtle);
  color: var(--pd-warning-on-subtle);
  font-size: 12px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 항상 보이는 전체 토글. 패널 폭을 꽉 채운다(사용자 지시) — 범례 아래 고정 자리이므로
   폭이 좁으면 목록의 한 행처럼 보여 "이건 버튼" 이 읽히지 않는다. */
.pharmsite .ps-fac-all {
  display: block;
  width: 100%;
  margin: var(--pd-space-3) 0 0;
  /* 높이를 시스템의 작은 컨트롤(32px)에 맞춘다 — 여백만으로 만든 높이는 글자 크기가
     바뀔 때마다 달라진다. */
  min-height: var(--pd-control-h-sm);
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 1px solid var(--pd-gold-400);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface);
  color: var(--pd-warning-on-subtle);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.pharmsite .ps-fac-all:hover {
  background: var(--pd-warning-subtle);
}

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

/* 축척 밖·잘림에서는 눌러도 아무 일이 없으므로 잠근다. 체크박스가 이미 그 상태에서
   disabled 이고, 버튼만 살아 있으면 눌리는데 바뀌지 않는 거짓 약속이 된다. */
.pharmsite .ps-fac-all:disabled {
  border-color: var(--pd-border);
  background: var(--pd-surface-muted);
  color: var(--pd-text-placeholder);
  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: var(--pd-space-1) var(--pd-space-2);
  border-radius: var(--pd-radius-sm);
  background: rgba(255, 255, 255, 0.82);
  color: var(--pd-text-muted);
  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: 13px;
  color: var(--pd-text-muted);
}

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

/* 펼치면 글리프와 글자 사이를 띄운다 — 원본과 같다. */
.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: var(--pd-text-secondary);
  text-decoration: underline;
}

/* ── 상세 패널 ── */
/* 높이를 명시한다. height:100% 로 두면 그리드 행 높이가 내용에 따라 정해지는 탓에
   상세 내용이 길어질수록 행 전체가 늘어나고 지도 칸까지 같이 커진다 (스크롤이 안 걸린다). */
/* 팝업 안이 스크롤된다 — 상세는 1,900px 넘게 길어지는 화면이다. 높이를 여기서 고정하지
   않는다: 팝업은 내용만큼이고 상한은 위(.ps-detail 의 max-height)가 준다. 고정하면 짧은
   상세(기존 시설: 종별·개설일·의사수)가 꽉 찬 창 안에 빈 공간만 남긴다. */
/* ── 머리는 고정, 탭 내용만 스크롤 ── (사용자 지시)
   전에는 이 껍데기 하나가 스크롤 컨테이너였다. 그래서 탭 내용을 내리면 제목·주소·탭 줄이
   함께 위로 사라졌고, 어느 자리의 어느 탭을 보고 있었는지가 화면에서 없어졌다 — 탭을
   바꾸려면 매번 맨 위로 되올려야 했다.

   세로 flex 로 바꾼다: 머리는 자기 크기(flex 0 0 auto 기본), 탭 묶음이 남는 높이를 받고
   (flex 1 · min-height 0), 실제 스크롤은 열린 탭 칸이 갖는다.
   min-height: 0 이 반드시 필요하다 — flex 항목의 기본 min-height 는 auto 라 내용보다 작게
   줄지 않고, 그러면 칸이 팝업 밖으로 넘쳐 스크롤이 생기지 않는다.

   껍데기의 overflow 를 hidden 으로 두는 이유: 상한(max-height)에 닿았을 때 내용이 팝업
   테두리 밖으로 새는 것을 막는다. 스크롤은 안쪽 칸이 갖는다. */
.pharmsite .ps-detail {
  display: flex;
  flex-direction: column;
  padding: var(--pd-space-5);
  /* 가로는 자른다 — 겉상자 공통 규칙에서 overflow: hidden 을 뺐으므로(과목 패널 때문)
     여기서 직접 막는다. 넓은 표는 자기 상자(.ps-src-scroll)가 가로 스크롤을 갖는다. */
  overflow: hidden;
}

/* 머리(눈썹·제목·주소·출처)와 탭 묶음을 담는 칸. 스크롤을 여기에도 두는 이유: 탭이 없는
   상세(지점 리포트·기존 시설)는 절이 그냥 쌓이므로 스크롤할 곳이 필요하다. 탭이 있으면
   아래 규칙이 탭 칸에 높이를 주므로 이 칸은 넘치지 않고 스크롤바도 생기지 않는다.

   **오른쪽으로 20px 나갔다 그만큼 여백으로 되돌린다**: 스크롤바는 상자의 border-box 안쪽
   끝에 그려지므로, 이 칸이 카드 여백(20px) 안에서 끝나면 스크롤바가 카드 테두리에서 21px
   떨어진 자리에 떠 있는 것으로 보인다(실측 — 사용자 지적). 상자만 카드 안쪽 끝까지
   내보내고 padding 으로 글 자리를 지키면, 스크롤바는 테두리에 붙고 내용은 그대로 있다. */
.pharmsite .ps-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: calc(var(--pd-space-5) * -1);
  padding-right: var(--pd-space-5);
}

/* 닫기 버튼이 절대 배치가 됐다. sticky 였던 이유는 이 껍데기가 스크롤 컨테이너였기
   때문인데(내용을 내리면 버튼이 위로 사라진다) 이제 껍데기는 스크롤하지 않는다.
   흐름에서 빼면 세로 16px 을 되찾는다 — 음수 여백(-20px)으로 끌어올려도 36px 상자의
   나머지 16px 이 흐름에 남아 눈썹 줄을 그만큼 밀어내고 있었다(실측 y 37 -> 21). */
.pharmsite .ps-detail-close {
  position: absolute;
  top: var(--pd-space-2);
  right: var(--pd-space-2);
  z-index: 2;
  /* × 글자를 아이콘으로 바꿨으므로 상자 가운데에 앉히려면 flex 여야 한다 —
     display: block 이던 때는 글자 상자의 위치가 세로 정렬을 정했다. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface);
  color: var(--pd-text-muted);
  line-height: 1;
  cursor: pointer;
}

.pharmsite .ps-detail-close:hover {
  background: var(--pd-surface-muted);
  color: var(--pd-text);
}

/* 15 -> 14px. 시스템 스케일은 56/40/28/22/18/16/14/13/12/11 이고 15 는 그 사이 값이었다
   (사용자 지시 — 디자인 시스템에 위배되는 것을 찾아 고친다). 본문이므로 t-body(14)다. */
.pharmsite .ps-detail-empty {
  margin: 0;
  color: var(--pd-text-muted);
  font-size: 14px;
}

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

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

/* 상세 제목. 시스템의 t-h4(18px/700)에 맞춘다 — 이 팝업에서 가장 큰 글자다. */
.pharmsite .ps-detail h2 {
  margin: 0 0 var(--pd-space-1);
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

/* 닫기 버튼이 절대 배치라(위 참조) 첫 두 줄은 그 아래로 지나갈 수 있다 — 오른쪽을 비워
   둔다. 36px 버튼이 오른쪽 여백 8px 에 앉으므로 44px 을 피하면 되고, 32px 은 팝업의
   오른쪽 여백 20px 과 합쳐 그 값이 된다. */
.pharmsite .ps-detail > .ps-detail-body > .ps-eyebrow,
.pharmsite .ps-detail > .ps-detail-body > h2 {
  padding-right: 32px;
}

/* 아래 여백을 0 으로 두고 다음 조각이 자기 위 여백을 갖는다 — 세로 flex 로 바뀌면서
   인접 여백이 더 이상 겹쳐지지 않는다(16 + 20 이 36px 이 됐다, 실측). */
.pharmsite .ps-detail .ps-detail-addr {
  margin: 0;
  font-size: 14px;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

.pharmsite .ps-metric {
  display: flex;
  justify-content: space-between;
  gap: var(--pd-space-3);
  padding: var(--pd-space-2) 0;
  border-bottom: 1px dashed var(--pd-border);
  /* 15 -> 14px (t-body). 스케일에 없는 값이었다. */
  font-size: 14px;
}

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

.pharmsite .ps-metric > span:last-child {
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

.pharmsite .ps-detail-section {
  margin-top: var(--pd-space-6);
}

/* 절 제목. 15 -> 16px(t-body-lg 크기 + bold) — 스케일에 없는 값이었다. 팝업 제목(h2)이
   18px 이므로 16 이면 위계가 유지되고, 카드 값(18px)과는 굵기·색으로 갈린다. */
.pharmsite .ps-detail-section > h3 {
  margin: 0 0 var(--pd-space-3);
  font-size: 16px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

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

/* 상세의 탭 줄. 세 칸을 같은 폭으로 둔다.
   grid-auto-columns 가 아니라 repeat(3, minmax(0, 1fr)) 인 이유: auto 계열은 칸의 내재 크기를
   따라가므로 긴 이름이 자기 칸을 밀어내 세 칸이 어긋난다. minmax(0, ...) 의 0 하한이 그것을
   막는다(협업 검토 지적). */
.pharmsite .ps-dtabs {
  /* 20 -> 16px. 주소 줄의 아래 여백(16)과 겹쳐져 20px 이던 것이, 세로 flex 로 바뀌며
     36px 이 됐다 — 주소는 여백을 0 으로 두고 이 값만 남긴다. */
  margin-top: var(--pd-space-4);
  /* 남는 높이를 받아 안쪽 칸에 넘긴다. min-height: 0 은 필수다(위 .ps-detail 주석). */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.pharmsite .ps-dtab {
  padding: var(--pd-space-3) var(--pd-space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--pd-text-muted);
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.pharmsite .ps-dtab[aria-selected="true"] {
  border-bottom-color: var(--pd-accent);
  color: var(--pd-accent-on-subtle);
  font-weight: var(--pd-weight-bold);
}

/* 탭 줄과 내용 사이 간격은 패널이 준다 — 첫 절의 margin 에 맡기면 절이 아닌 것(큰 점수 p)이
   먼저 올 때 간격이 달라진다. */
.pharmsite .ps-dtab-panel {
  display: block;
  /* 여기가 이 팝업의 유일한 스크롤 칸이다(사용자 지시 — 탭 내용만 스크롤).
     오른쪽으로 20px 나갔다 그만큼 여백으로 되돌리는 이유는 위 .ps-detail-body 와 같다 —
     스크롤바를 카드 안쪽 끝에 붙인다. 4px 이던 때는 스크롤바가 여전히 16px 안쪽에 떴다. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--pd-space-4);
  padding-right: var(--pd-space-5);
  margin-right: calc(var(--pd-space-5) * -1);
}

.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: var(--pd-space-3) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

/* 큰 숫자 바로 아래 줄. ⓘ 뒤에 접혀 있던 기준 문장을 꺼내 둔 자리다(사용자 지시 —
   점수 탭의 i 버튼을 밖으로 푼다). 큰 숫자의 아래 여백(16px)을 이 줄이 대신 쓰므로
   위 여백을 접어 숫자에 붙인다 — 떨어뜨려 두면 다음 절의 설명으로 읽힌다. */
.pharmsite .ps-hero-note {
  margin-top: calc(var(--pd-space-4) * -1 + var(--pd-space-1));
}

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

/* 카드가 하나뿐인 절(약국 점수의 「예상 처방유입」)은 두 칸을 다 쓴다. 격자가 1fr 1fr 이라
   그대로 두면 반 칸짜리 카드 하나가 왼쪽에 홀로 떠 잘못 잘린 것으로 보인다(실측). */
.pharmsite .ps-stats > .ps-stat:only-child {
  grid-column: 1 / -1;
}

.pharmsite .ps-stat {
  padding: var(--pd-space-3);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-sunken);
}

.pharmsite .ps-stat-k {
  display: block;
  font-size: 12px;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

.pharmsite .ps-stat-v {
  display: block;
  margin-top: var(--pd-space-1);
  /* 17 -> 18px(t-h4). 스케일에 없는 값이었다. 132px 카드에서 「2,191만원」이 18px 로도
     한 줄이다(실측 96px). */
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

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

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

/* 15 -> 16px. 스케일에 없는 값이었다. 절 제목과 같은 크기이지만 색이 다르고, 이 줄이
   그 절의 결론(과목 이름)이라 제목과 경쟁하지 않는다. */
.pharmsite .ps-dept-badge {
  display: block;
  font-size: 16px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

.pharmsite .ps-dept-meta {
  display: block;
  margin-top: var(--pd-space-1);
  font-size: 13px;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

/* 「선택 과목」 줄(화면 라벨이 「고른 과목」이던 자리다). 아래 추천 세 줄과 **묻는 것이
   달라서** 갈라 놓는다 — 그쪽은 "이 자리에 무엇이 들어서야 하나" 이고, 이쪽은 "내가 고른
   과목은 이 자리에서 어떤가" 다. 값의 앞 세 자리는 순서를 맞춰 두었으니 위아래로 견줄 수 있다.
   왼쪽 굵은 선과 옅은 바탕으로 묶어 "이 자리에 대한 답" 임을 먼저 읽히게 한다. */
.pharmsite .ps-dept-focus {
  margin-bottom: var(--pd-space-2);
  padding: var(--pd-space-3);
  border-bottom: 0;
  border-left: 3px solid var(--pd-accent);
  border-radius: 0 var(--pd-radius-md) var(--pd-radius-md) 0;
  background: var(--pd-surface-sunken);
}

.pharmsite .ps-dept-focus .ps-dept-meta {
  color: var(--pd-text);
}

/* 약국 파생이 안 되는 과목의 각주. 경고색을 쓰지 않는다 — 결함이 아니라 성격이다. */
.pharmsite .ps-dept-note {
  display: block;
  margin-top: var(--pd-space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

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

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

.pharmsite .ps-src-table th {
  padding: var(--pd-space-1) var(--pd-space-1) var(--pd-space-2);
  border-bottom: 1px solid var(--pd-border);
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  white-space: nowrap;
}

.pharmsite .ps-src-table td {
  padding: var(--pd-space-2) var(--pd-space-1);
  border-bottom: 1px dashed var(--pd-border);
  color: var(--pd-text-secondary);
  white-space: nowrap;
}

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

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

/* ── 이 건물 ── */
.pharmsite .ps-bldg-addr {
  margin: 0 0 var(--pd-space-2);
  font-size: 13px;
  color: var(--pd-text);
  word-break: keep-all;
}

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

.pharmsite .ps-bldg-counts {
  margin: 0 0 var(--pd-space-2);
  font-size: 14px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

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

.pharmsite .ps-bldg-mate {
  padding: var(--pd-space-2) 0;
  border-bottom: 1px dashed var(--pd-border);
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text);
}

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

.pharmsite .ps-bldg-mate small {
  margin-left: var(--pd-space-2);
  font-size: 12px;
  font-weight: var(--pd-weight-regular);
  color: var(--pd-text-muted);
}

/* 법령·폐업 리스크 문구. 강조색은 디자인 시스템의 포인트색을 그대로 쓴다. */
.pharmsite .ps-risk {
  margin: 0 0 var(--pd-space-2);
  padding: var(--pd-space-3);
  border-left: 3px solid var(--pd-cta);
  border-radius: 0 var(--pd-radius-md) var(--pd-radius-md) 0;
  background: var(--pd-surface-sunken);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

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

/* 시스템의 t-h2(28px)보다 크게 둔다 — 이 화면에서 가장 큰 숫자이고 방금 계산한 값이다. */
.pharmsite .ps-bigscore-value {
  font-size: 32px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.15;
  color: var(--pd-text);
  letter-spacing: -0.02em;
}

.pharmsite .ps-bigscore-caption {
  font-size: 13px;
  color: var(--pd-text-muted);
}

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

   막대 4~5개로는 "무엇이 약한 자리인가" 가 모양으로 읽히지 않았다. 방사형은 찌그러진 방향이
   곧 약한 축이다. 그림은 모양을 말하고, 아래 값 목록이 숫자를 말한다 — 그림만 두면 정확한
   값이 사라지고 보조기술로도 읽을 수 없다. */
/* 260 -> 300px. 축 이름이 오른쪽에서 잘렸다 — 「병원 앞 입지」가 상자 밖으로 나갔다
   (실측: viewBox 240 안에서 라벨이 257px 까지 뻗었다). viewBox 를 300 으로 넓혔고
   (pharmsite-panel.js 의 RADAR) 그 폭으로 그려야 11px 라벨이 11px 로 나온다 —
   260px 로 눌러 두면 9.5px 이 되어 스케일 밖으로 다시 떨어진다. */
.pharmsite .ps-radar {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: var(--pd-space-1) auto var(--pd-space-2);
}

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

.pharmsite .ps-radar-label-missing {
  fill: var(--pd-ink-400);
}

.pharmsite .ps-radar-ring {
  fill: none;
  stroke: var(--pd-border);
  stroke-width: 1;
}

.pharmsite .ps-radar-spoke {
  stroke: var(--pd-border);
  stroke-width: 1;
}

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

.pharmsite .ps-radar-area {
  /* 시스템 강조색(--pd-accent, #39BFC4)에 투명도를 준 값이다. 변수에 알파를 얹을 수 없어
     숫자로 적는다 — 강조색을 바꿀 때 여기도 함께 본다. */
  fill: rgba(57, 191, 196, 0.22);
  stroke: var(--pd-accent);
  stroke-width: 1.5;
}

.pharmsite .ps-radar-dot {
  fill: var(--pd-accent);
}

.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: var(--pd-space-3);
  padding: var(--pd-space-1) 0;
  font-size: 14px;
}

.pharmsite .ps-radar-axis {
  color: var(--pd-text-secondary);
}

.pharmsite .ps-radar-weight {
  color: var(--pd-text-muted);
  font-size: 12px;
}

.pharmsite .ps-radar-value {
  min-width: 42px;
  text-align: right;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-accent-on-subtle);
}

.pharmsite .ps-radar-legend-missing .ps-radar-value {
  color: var(--pd-text-placeholder);
  font-weight: var(--pd-weight-regular);
}

/* 카카오맵·로드뷰는 링크로만 연다 (타일을 끌어오지 않는다 — ToS). */
/* 주소 줄 바로 아래에 오는 컨트롤 줄. 위 여백을 스스로 갖는 이유: 주소가 아래 여백을 0 으로
   두었고(세로 flex 는 인접 여백을 겹쳐 주지 않는다) 그대로면 주소에 붙는다(실측 0px).
   아래를 0 으로 두는 이유는 그 반대다 — 16px 을 남겨 두었더니 다음 조각의 위 여백 12px 과
   더해져 28px 이 됐다. 간격은 뒤에 오는 것이 준다. */
.pharmsite .ps-detail-links {
  display: flex;
  gap: var(--pd-space-2);
  margin: var(--pd-space-3) 0 0;
}

/* 링크지만 생김새는 컨트롤이다 — 시스템의 작은 버튼(32px · md 모서리)에 맞춘다.
   inline-flex 로 바꾼 이유: inline-block 에서는 높이를 글자와 여백이 정해 옆 컨트롤과
   1~2px 씩 어긋났다. */
.pharmsite .ps-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pd-control-h-sm);
  padding: 0 var(--pd-space-3);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  font-size: 13px;
  color: var(--pd-text-secondary);
  text-decoration: none;
}

.pharmsite .ps-link:hover {
  border-color: var(--pd-accent);
  color: var(--pd-accent-on-subtle);
}

/* ── 스크롤 단서 (걷어냈음) ──
   스크롤 상자 바닥에 그라디언트 두 겹(흰 덮개 + 어두운 그림자)을 깔아 "더 있다" 를
   알리던 규칙이 있었다. 걷어냈다(사용자 지시 — 이상한 그림자로 읽힌다).

   실제로 그렇게 보이는 이유가 있었다: 덮개는 background-attachment: local 이라 내용과 함께
   움직이고 그림자는 scroll 이라 상자에 붙어 있어서, **스크롤할 것이 없는 상태**에서도 둘의
   자리가 어긋나면 상자 바닥에 옅은 띠가 남는다. 탭 칸은 탭마다 내용 높이가 달라(위치 탭
   373px · 점수 탭 837px) 그 상태가 흔했다.

   되살릴 일이 있으면 그림자보다 명시적인 수단을 쓰는 것이 낫다 — 예: 넘칠 때만 붙는
   클래스를 JS 가 재서 달거나, scroll-shadow 를 지원하는 브라우저 기능이 생긴 뒤에. */

/* 좁은 데스크톱 — 상세 팝업을 조금 좁혀 카드·팝업 옆에 지도가 남게 한다.
   왼쪽 카드 폭은 clamp 가 이미 300px 로 줄인다. 위치 계산이 전부 --ps-detail-w 를
   참조하므로 변수만 바꾸면 자리 비킴(안내 문구·경로)도 같이 따라온다. */
@media (max-width: 1279px) {
  .pharmsite {
    --ps-detail-w: clamp(312px, 30vw, 372px);
  }

  /* 상세가 열려 있으면 지도 위 왼쪽 조각들을 툴바 한 줄 아래에서 시작한다.
     이 폭에서는 팝업의 오른끝이 우상단 툴바의 왼끝을 넘는다 — 1024px 창에서 팝업이
     328~640, 툴바가 472~1008 이라 「지역」 버튼이 통째로 팝업 뒤에 깔렸다(실측).
     팝업이 z-index 40, 툴바가 30 이라 눌릴 수도 없다.

     세로로 비키는 것이 맞는 이유: 가로로 좁히려면 팝업이 144px 이 되어 상세를 담을 수
     없고, 툴바를 팝업 위로 올리면 버튼이 상세 글 위에 떠 읽는 것을 가린다. 잃는 것은
     팝업 높이 60px 이고, 그 상한은 JS 가 실제 top 을 재서 다시 잡는다(capDetailToMap).
     1280px 이상에서는 겹치지 않는다(실측 팝업 674 · 툴바 728).

     한 변수(--ps-top)로 내리는 이유: 안내 문구도 팝업이 열리면 그 오른쪽으로
     비키는데(위 규칙), 그 자리가 곧 툴바 자리다. 팝업만 내리면 이번에는 그것이
     툴바 뒤로 들어간다. 둘이 같은 값을 보면 줄이 통째로 내려간다.

     범위 바가 툴바로 들어오면서 줄이 615 -> 547px 로 길어졌다(이용안내를 아이콘만으로
     줄인 뒤 값이다). 그래서 이 규칙이 전보다 넓은 폭에서 필요해졌다 — 1279px 창에서도
     툴바 왼끝이 716px 이라 팝업 오른끝(688)과 28px 차이다(실측). */
  .pharmsite .ps-layout:not(.ps-layout-wide) {
    --ps-top: calc(var(--ps-gap) + var(--ps-toolbar-h) + var(--pd-space-3));
  }
}

/* 툴바를 두 줄로 접는다.
   범위 바(약 360px) + 지점 분석 + 이용안내가 한 줄에 547px 이고, 이 줄은 오른쪽에
   붙어 있다. 1023px 이하에서는 그 왼끝이 왼쪽 카드(16~272px)와 겹치기 시작한다 —
   800px 창에서 툴바 왼끝 237px, 카드 오른끝 272px 이라 35px 이 카드 뒤로 들어간다.
   카드가 z-index 50, 툴바가 30 이라 범위 바가 통째로 카드 뒤에 깔린다.

   가로로 줄이는 길은 막혀 있다: 콤보 폭을 줄이면 「종로1·2·3·4가동」이 두 글자만
   남고, 지점 분석의 라벨은 아이콘만으로 대체되지 않는다(⌖ 는 관용 표식이 아니다).
   그래서 세로로 접는다. 범위 바가 첫 줄인 이유: 가장 자주 쓰는 컨트롤이다. */
@media (max-width: 1023px) {
  .pharmsite {
    /* 두 줄 + 사이 간격. 범례 패널과 --ps-top 이 이 값을 본다. */
    --ps-toolbar-h: calc(var(--pd-control-h-lg) * 2 + var(--pd-space-2));
  }

  .pharmsite .ps-filters {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* 범위 바가 첫 줄을 통째로 쓴다 — 100% 를 주지 않으면 지점 분석이 그 옆에 붙어
     첫 줄이 다시 길어진다(줄바꿈은 넘칠 때만 일어난다). */
  .pharmsite .ps-scope {
    flex: 1 0 100%;
  }
}

/* 한 칸으로 세운다.
   분기점을 720px 에 두는 근거: 두 칸이 성립하려면 목록 최소 240 + 지도 최소 300 +
   간격 16 + 좌우 여백 24 = 580px 이 필요하고, 그 아래에서는 어느 쪽이든 못 쓰게 된다.
   실측으로 360px 창에서 지도가 64px 조각(가로 스크롤 249px)까지 내려갔다. 720 이면
   휴대폰(360~430)과 세로 소형 태블릿을 덮고, 768 태블릿은 위 두 칸 규칙에 남는다. */
@media (max-width: 720px) {
  /* 이 폭에서는 플로팅 앱 배치를 접고 흐름으로 세운다. 손가락에는 휠이 없어 몸통 스크롤과
     지도 확대가 다투지 않고, 좁은 화면에서는 카드·팝업이 지도를 다 덮어 버려 "지도 위에
     띄운다" 는 전제 자체가 성립하지 않는다. 헤더는 sticky 로 흐름 안에 있으므로 위 여백은
     숨 고르기 12px 만 준다. */
  .pharmsite {
    position: static;
    padding: var(--pd-space-4) var(--pd-space-4) var(--pd-space-6);
  }

  .pharmsite .ps-toolbar {
    position: static;
    margin-bottom: var(--pd-space-4);
  }

  /* 플로팅 카드의 겉상자를 푼다(display: contents) — 안의 조각들이 .ps-layout 의 flex
     항목이 되어 order 로 다시 세울 수 있다. 단계 탭이 목록과 함께 지도 아래로 내려가면
     "이 화면에 약국 입지도 있다" 는 첫 정보가 스크롤 밖으로 사라진다 — 탭·렌즈(.ps-stage)만
     지도 위로 올리고 목록(head·body·meta)은 지도·상세 아래 제자리에 둔다.
     겉상자가 사라졌으므로 테두리·배경은 조각들이 각자 갖는다(아래). */
  .pharmsite .ps-list {
    position: static;
    width: auto;
    box-shadow: none;
    display: contents;
  }

  /* overflow: hidden 을 두지 않는다 — 과목 메뉴 패널이 이 상자 안에서 열린다(위 데스크톱
     카드와 같은 함정). 모서리는 탭(위 공통 규칙)과 렌즈 버튼(아래)이 직접 갖는다. */
  .pharmsite .ps-stage {
    order: 0;
    margin-bottom: var(--pd-space-4);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    background: var(--pd-surface);
  }

  /* 겉상자 테두리와 겹쳐 밑선이 두 줄이 된다 — 마지막 줄의 안쪽 선을 뺀다.
     hover 배경이 상자의 둥근 아래 모서리를 덮지 않게 모서리도 제 것으로 갖는다. */
  .pharmsite .ps-stage .ps-menu-dept {
    border-bottom: 0;
  }

  .pharmsite .ps-stage .ps-menu-dept .ps-menu-button {
    border-radius: 0 0 9px 9px;
  }

  /* 약국 단계에서는 렌즈 줄이 감춰지므로(syncDeptButton) 탭이 상자의 마지막 줄이 된다.
     그대로 두면 활성 탭의 민트 채움이 상자의 둥근 아래 모서리를 각지게 덮고, 탭 줄의
     밑선이 상자 테두리와 겹쳐 두 줄로 보인다.
     :has() 를 쓰는 이유: 상태를 JS 에서 두 번(메뉴에 hidden · 상자에 클래스) 말하면 한쪽만
     바뀌는 사고가 난다. 미지원 브라우저에서는 아래 모서리만 각져 보인다 — 기능 손실은 없다. */
  .pharmsite .ps-stage:has(.ps-menu-dept[hidden]) .ps-tabs {
    border-bottom: 0;
  }

  .pharmsite .ps-stage:has(.ps-menu-dept[hidden]) .ps-tabs > :first-child {
    border-radius: 9px 0 0 9px;
  }

  .pharmsite .ps-stage:has(.ps-menu-dept[hidden]) .ps-tabs > :last-child {
    border-radius: 0 9px 9px 0;
  }

  .pharmsite .ps-list-head {
    order: 3;
    margin-top: var(--pd-space-4);
    border: 1px solid var(--pd-border);
    border-bottom: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg) var(--pd-radius-lg) 0 0;
    background: var(--pd-surface);
  }

  .pharmsite .ps-list-body {
    order: 4;
    border: 1px solid var(--pd-border);
    border-top: 0;
    border-bottom: 0;
    background: var(--pd-surface);
  }

  .pharmsite .ps-meta {
    order: 5;
    border: 1px solid var(--pd-border);
    border-radius: 0 0 var(--pd-radius-lg) var(--pd-radius-lg);
    background: var(--pd-surface);
  }

  .pharmsite .ps-map-wrap {
    position: relative;
    inset: auto;
  }

  .pharmsite .ps-map {
    position: relative;
    inset: auto;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
  }

  /* 범례 띠를 지도 아래 흐름으로 되돌리던 규칙은 필요 없어졌다 — 표식 범례가 우상단
     패널 안으로 들어갔고(사용자 지시), 그 패널이 이 폭에서 이미 흐름으로 내려온다. */

  /* 그리드를 버리고 흐름으로 세운다. 순서를 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;
  }

  /* 지도 위 안내 문구를 왼쪽으로 되돌리던 규칙도 없다 — 문구 슬롯 자체를 걷어냈다
     (사용자 지시). 데스크톱에서 밀어 둔 값(--ps-side-x)이 이 폭에 남으면 366px 지도에서
     한 문장이 30px 에 갇힌다는 것이 그 규칙의 근거였다 — 다시 지도 위에 무엇을 얹으면
     같은 함정을 다시 만난다. */

  /* 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-side {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    margin-top: var(--pd-space-3);
  }

  /* 상자별 스크롤도 푼다 — 이 폭에서는 페이지가 하나의 세로축이고, 카드 안에 또 축을
     두면 손가락이 어느 쪽을 움직이는지 예측할 수 없다(이 화면의 다른 칸들과 같은 규칙). */
  .pharmsite .ps-map-side > .ps-map-panel:first-child {
    overflow: visible;
  }

  /* 면책 띠를 지도 위에서 흐름으로 내린다 — 366px 지도 위에 얹으면 지도 아래 끝을 덮고,
     한 줄 규칙(nowrap) 때문에 잘려 읽을 수 없다. 흐름에서는 두 줄로 감기게 둔다. */
  .pharmsite .ps-caveat-bar {
    position: static;
    /* 흐름에서는 폭을 채운다 — 글자 길이만큼 두면 카드 아래에 어중간한 상자가 남는다.
       두 줄로 감기게 두므로(아래) 아이콘은 첫 줄에 맞춘다. */
    display: flex;
    align-items: flex-start;
    max-width: none;
    margin-top: var(--pd-space-3);
    white-space: normal;
    overflow: visible;
  }

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

  /* 목록·상세의 안쪽 스크롤을 없앤다. 페이지 스크롤 안에 또 스크롤이 있으면 손가락이
     어느 쪽을 움직이는지 예측할 수 없다 — 세로축은 하나만 둔다.
     데스크톱에서 머리를 고정하려고 세운 세로 flex(껍데기 · 본문 · 탭 묶음 · 탭 칸)도 함께
     푼다. 이 폭에서는 상세가 팝업이 아니라 흐름 안의 칸이라 고정할 머리가 없고, flex 가
     남으면 탭 칸이 자기 안에서 스크롤을 만들어 세로축이 둘이 된다. */
  .pharmsite .ps-list-body,
  .pharmsite .ps-detail,
  .pharmsite .ps-detail-body,
  .pharmsite .ps-dtab-panel {
    overflow: visible;
    min-height: 0;
  }

  .pharmsite .ps-detail,
  .pharmsite .ps-detail-body,
  .pharmsite .ps-dtabs {
    display: block;
  }

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

  /* 스크롤이 없어졌으므로 "더 있다" 는 그림자 단서도 지운다. 두면 바닥에 걷히지 않는
     그림자만 남는다. */
  /* 필터가 화면 밖으로 나갔던 이력이 있다 (390px 창에서 오른쪽 끝 x=609). 지금은 범위 바
     한 줄 + 버튼 둘이고, 범위 바가 데스크톱 폭(약 360px)을 그대로 들고 오면 360px 창에서
     넘친다. 그래서 아래에서 콤보를 늘어나게 둔다. */
  .pharmsite .ps-filters {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--pd-space-2);
    /* 메뉴 패널의 기준 상자다 (아래 ps-menu-panel 주석 참조). */
    position: relative;
  }

  /* 범위 바는 줄 전체를 쓰고, 안의 두 콤보가 남는 폭을 나눠 갖는다. 데스크톱에서 폭을
     고정한 이유(바 길이가 값에 따라 흔들리면 옆 버튼이 움직인다)는 여기서는 없어진다 —
     바가 이미 줄 전체이므로 안에서 나눠도 겉 폭이 변하지 않는다. */
  .pharmsite .ps-scope {
    width: 100%;
  }

  .pharmsite .ps-combo {
    flex: 1 1 0;
    min-width: 0;
  }

  .pharmsite .ps-combo-input,
  .pharmsite .ps-combo[data-ps-combo="dong"] .ps-combo-input {
    width: 100%;
  }

  /* 컨트롤 셋이 한 줄을 나눠 쓴다. 각자 한 줄을 차지하면 툴바가 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 var(--pd-space-2);
    gap: var(--pd-space-1);
  }

  /* 아이콘도 한 단 내린다(20 -> 16px). 버튼들이 366px 한 줄을 나눠 쓰는 자리라 아이콘이
     커진 만큼이 그대로 값에서 빠진다 — 실측으로 값에 남는 폭이 50 -> 46px 였다.
     svg. 로 좁히는 관례는 남긴다: 이 자리에 그림(span)이 다시 들어오면 눌린다. */
  .pharmsite .ps-filters svg.ps-menu-icon {
    width: var(--pd-icon-sm);
    height: var(--pd-icon-sm);
  }

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

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

  /* 아이콘만 있는 버튼은 늘리지 않는다 — 위 `flex: 1 1 0` 을 그대로 받으면 20px 아이콘
     하나가 반 줄(약 180px)을 차지한 빈 버튼이 된다. */
  .pharmsite .ps-filters > .ps-icon-button {
    flex: 0 0 auto;
    width: var(--pd-control-h-lg);
  }

  /* 값이 길면 잘린다. 정확한 범위는 열어서 보거나 목록 제목에서 확인할 수 있다. */
  .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;
  }

  /* 과목 메뉴는 우상단 무리(.ps-filters)가 아니라 왼쪽 카드의 단계 묶음 안에 있다.
     위 .ps-menu 의 relative 를 푸는 규칙이 이 메뉴에도 걸리므로, 기준 상자가 될 줄이
     여기서는 .ps-stage 다 — 안 주면 기준이 페이지 겉상자까지 올라가 top:100% 가 문서
     바닥이 되고 패널이 화면 한참 아래에 그려진다(옛 배치에서 실측 y 4847). */
  .pharmsite .ps-stage {
    position: relative;
  }

  /* 데스크톱에서 준 고정 폭(340px)을 푼다. 이 줄은 화면 폭을 꽉 채우므로 줄에 맞추는 것이
     다른 두 메뉴와 같은 규칙이 된다. */
  .pharmsite .ps-menu-dept .ps-menu-panel {
    width: auto;
    left: 0;
    right: 0;
  }

  /* 콤보 목록을 칸이 아니라 범위 바 전체에 붙인다 — 옆 메뉴 패널이 이 폭에서 쓰는 것과
     같은 처방이다(위 .ps-menu-panel 주석). 칸에 붙이면 어느 쪽으로든 넘친다: 칸이
     줄의 절반도 안 되므로 그 폭으로 줄이면 「종로1·2·3·4가동」이 안 들어가고, 넓히면
     오른쪽 칸의 목록이 화면 밖으로 나간다.
     기준 상자를 옮기려면 .ps-combo 의 relative 를 풀어야 한다 — 남아 있으면 가장 가까운
     기준 상자가 여전히 칸 쪽이다. */
  .pharmsite .ps-scope {
    position: relative;
  }

  .pharmsite .ps-combo {
    position: static;
  }

  .pharmsite .ps-combo-list {
    left: 0;
    right: 0;
    min-width: 0;
  }

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

  .pharmsite .ps-tab {
    flex: 1 1 0;
    padding: var(--pd-space-3) var(--pd-space-4);
  }

  /* 이용안내 모달은 이 폭에서 전체화면이 된다 — "거의 가득" 의 가장자리 14px 이
     좁은 화면에서는 장식이 아니라 손실이다. */
  .ps-guide-dialog {
    inset: 0;
    border-radius: 0;
  }

  .ps-guide-body {
    padding: var(--pd-space-6) var(--pd-space-4) var(--pd-space-8);
  }

  /* 신선도는 툴바가 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);
  }
}

/* 지도 ↔ 이용안내 토글(.ps-screen-toggle)은 걷어냈다 — 이용안내가 별도 화면이 아니라
   이 화면 위 모달(.ps-guide-layer, 아래)이 되면서 오갈 두 주소 자체가 없어졌다.
   부분 뷰(_ScreenToggle.cshtml)도 함께 지웠다. */

/* ── 이용안내 모달 ──
   화면을 거의 가득 채우는 레이어다(사용자 지시). 별도 주소(/PharmSite/Guide)로 나가면
   보던 지도 상태(범위·과목·선택)가 끊기므로 화면 위에 얹는다 — 닫으면 보던 자리 그대로다.

   z-index 는 공통 토큰(--pd-z-modal)을 쓴다 — 헤더(--pd-gnb-z)까지 덮는 층이라
   이 화면 안 숫자(상세 40 · 메뉴 60 · 설명 80)와는 급이 다르다.
   fixed 인 이유: 기준이 뷰포트다. .pharmsite(헤더 아래)에 맞추면 헤더가 모달 옆에서
   계속 눌리는 채로 남는다. */
.ps-guide-layer {
  position: fixed;
  inset: 0;
  z-index: var(--pd-z-modal, 1200);
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 — 짝이 반드시 있어야 한다
   (이 화면의 .ps-chips·.ps-explain-body 가 겪은 그 함정이다). */
.ps-guide-layer[hidden] {
  display: none;
}

.ps-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 30, 34, 0.55);
}

.ps-guide-dialog {
  position: absolute;
  inset: clamp(14px, 3vh, 36px) clamp(14px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  /* 히어로급 큰 판이라 시스템 매핑의 xl(16px)이다 — 12px 는 이 화면만의 값이었다. */
  border-radius: var(--pd-radius-xl);
  background: var(--pd-surface);
  box-shadow: 0 24px 64px rgba(19, 28, 45, 0.32);
  overflow: hidden;
}

/* 머리(제목·닫기)는 스크롤 밖이다 — 어느 깊이에서도 닫을 수단이 남아야 한다. */
.ps-guide-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pd-space-3) var(--pd-space-4) var(--pd-space-3) var(--pd-space-6);
  border-bottom: 1px solid var(--pd-border);
}

/* 시스템의 t-h4(18px/700). 모달의 이름이라 본문보다 한 단 위다. */
.ps-guide-head strong {
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

/* × 글자를 아이콘으로 바꿨으므로 가운데 정렬은 flex 가 맡는다(글자 상자가 아니라). */
.ps-guide-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pd-radius-md);
  background: none;
  color: var(--pd-text-muted);
  line-height: 1;
  cursor: pointer;
}

.ps-guide-close:hover {
  background: var(--pd-surface-muted);
  color: var(--pd-text);
}

.ps-guide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pd-space-8) var(--pd-space-8) var(--pd-space-12);
}

/* 모달이 열린 동안 몸통을 잠근다(pharmsite.js 가 붙인다). 720px 아래는 문서가 스크롤되는
   화면이라, 이 잠금이 없으면 모달 끝에서 휠·스와이프가 배경을 굴린다. */
body.ps-guide-open {
  overflow: hidden;
}

/* ── 이용안내(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 var(--pd-space-8);
  color: var(--pd-text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

/* 절 제목. 시스템의 t-h3(22px/700)에 맞춘다. */
.pharmsite-guide h4 {
  margin: 0 0 var(--pd-space-4);
  font-size: 22px;
  font-weight: var(--pd-weight-bold);
  letter-spacing: -0.01em;
}

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

.pharmsite-guide .agent-image + .agent-image {
  margin-left: var(--pd-space-6);
}

.pharmsite-guide .agent-image img {
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
}

.pharmsite-guide .ps-guide-caption {
  margin: var(--pd-space-3) 0 0;
  color: var(--pd-text-muted);
  font-size: 14px;
}

.pharmsite-guide .ps-guide-foot {
  margin: var(--pd-space-3) 0 var(--pd-space-10);
  padding: var(--pd-space-5) var(--pd-space-6);
  background: var(--pd-surface-sunken);
  border-radius: var(--pd-radius-lg);
  color: var(--pd-text-secondary);
  /* 15 -> 16px(t-body-lg). 스케일 밖 값이었다. 본문 문단이고 line-height 1.7 이라
     시스템의 body-lg(1.65)와 같은 급이다. */
  font-size: 16px;
  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) 그 아래 것들도 함께 올라왔다. */
/* 2026-08-12 재캡처. 단계 상자에 진료과목 메뉴가 끼어들어(병원 입지 · 진료과목 · 약국 입지)
   툴바 왼쪽이 통째로 밀렸고 오른쪽 무리도 버튼 폭 변화로 함께 움직였다. 새 점 _1_11 은 그
   메뉴 버튼이다. 전 회차처럼 값을 재사용하지 않고 대상마다 다시 쟀다 — 클립이 같아도
   요소가 움직이면 값은 못 쓴다(docs/pharmsite-guide.md 의 2026-08-03 교훈).
     _1_1 7.31 -> 3.60   두 탭의 중간을 가리키던 점이 「병원 입지」 자기 자리로 왔다
                          (탭 둘이 더 이상 붙어 있지 않아 중간에는 과목 메뉴가 있다)
     _1_2 9.75 -> 3.28   목록 끝 각주는 자리가 같은데, 「계산 시각」 항목 중앙으로 옮겼다 —
                          9.75% 는 두 항목 사이에 떨어져 어느 쪽을 가리키는지 흐렸다
     _1_3 81.35 -> 80.66 · _1_6 88.00 -> 87.32 · _1_7 95.00 -> 94.31   오른쪽 무리가 밀렸다
     _1_5 28.48 -> 27.26 · _1_8 33.75 -> 32.53 · _1_10 49.52 -> 21.79
                          _1_10 은 팝업 가운데(수익 카드)를 가리키고 있었다. 상세가 3탭이
                          된 뒤 그 자리는 탭마다 다른 내용이라, 탭을 옮겨도 남는 머리(제목)로
                          되돌렸다 — 이 점의 설명이 창 전체를 말하기 때문이다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_1"] { left: 3.60%; top: 9.18%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_2"] { left: 3.28%; top: 96.28%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_3"] { left: 80.66%; top: 9.18%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_5"] { left: 91.94%; top: 27.26%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_6"] { left: 87.32%; top: 9.18%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_7"] { left: 94.31%; top: 9.18%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_8"] { left: 9.06%; top: 32.53%; }
/* 지도는 계산한 중앙(59.00%, 55.52%)이 아니라 옮긴 값이다 — 그 자리가 병원 마커였다
   (elementFromPoint 가 leaflet-marker-icon 을 돌려줬다). 표식·팝업을 피한 지도 빈 곳이다.
   이번 회차에도 이 좌표가 지도 캔버스 위인지 elementFromPoint 로 다시 확인했다. */
.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: 30.56%; top: 21.79%; }
/* 진료과목 메뉴 버튼. 「병원 입지」와 「약국 입지」 사이다 — 화면의 자리가 설명의 자리이므로
   점도 그 사이에 온다. 자세한 것은 5절(guide-5a·5b)이 맡는다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_1_11"] { left: 9.74%; top: 9.18%; }

/* 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)은 지도 안 좌표이고 기본 보기가 그대로여서 값을 유지한다.
   (_2 는 그 판단이 틀렸다 — 2026-08-12 에 그 좌표가 서울 밖임을 확인했다. 아래 참조.) */
/* 2026-08-12 재캡처. 기하는 그대로였다(.ps-map-wrap 308,218,1272,765) — 이 장을 다시 찍은
   이유는 범례 줄 오른쪽 끝에 수치의 성격을 밝히는 문구가 생겼기 때문이다(새 점 _2_7).
   그래도 좌표는 대상마다 다시 쟀고, 셋이 움직였다.
     _2_1 3.45 -> 2.58    같은 대상(#ps-crumbs) 안에서 오른아래였던 것을 중앙으로
     _2_3 4.58 -> 15.07   전 값은 패널 **머리**(「화면 안 기존 시설」)를 가리켰다. 이 점의
                          설명은 종별을 켜고 끄는 줄이므로 범례 목록(#ps-fac-legend) 중앙으로
                          내렸다 — 같은 패널 안이다
     _2_2 는 아래에 따로 적는다(서울 밖을 가리키고 있었다) */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_1"] { left: 2.58%; top: 7.52%; }
/* 경계 폴리곤 위의 한 점. 중앙은 마침 거기 있던 표식을 가리키게 된다.
   전 값 13.76%/14.13% 는 **서울 밖**이었다 — 캡처 픽셀이 회색(250,250,248)이고, 같은 좌표를
   실제 지도에서 눌러 보면 범위가 좁혀지지 않고 지점 리포트가 열린다(실측). 이 점의 설명이
   "경계 안을 누르면 좁혀진다" 이므로 안내가 자기 설명과 어긋난 자리를 가리키고 있었다.
   지금 값은 강서구 폴리곤 안이다 — 같은 좌표를 눌러 「서울 전체 › 강서구」로 좁혀지는 것을
   확인했고, 캡처에서도 28×28 안이 전부 폴리곤 색이며 40px 안에 흰 경계선이 보인다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_2"] { left: 21.54%; top: 55.42%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_3"] { left: 91.43%; top: 15.07%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_4"] { left: 91.43%; top: 31.99%; }
/* 지도 아래 표식 범례(.ps-legend). 지도 칸 밖이지만 클립(765px) 안이다 */
/* 잰 값은 97.40% 인데 97.10% 로 당겼다 — .m-point 의 top 은 중심이 아니라 위 모서리이고
   22px(16 + 테두리 3 × 2) 짜리 점이 그림 아래로 2px 삐져나갔다. 범례 줄 안에는 그대로 있다. */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_5"] { left: 29.81%; top: 97.10%; }
/* 지도 안에 있는 후보 핀 하나(실측, 40px 짜리) */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_6"] { left: 59.75%; top: 26.35%; }
/* 범례 줄 오른쪽 끝의 「추정치」 문구. _2_5 와 같은 줄이므로 top 도 같은 값을 쓴다 —
   같은 줄의 두 점이 높이가 다르면 줄이 기울어 보인다 */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_2_7"] { left: 84.66%; top: 97.10%; }

/* 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%; }

/* 5. 진료과목으로 보기 — 두 장이고 잘라낸 크기가 다르다.

   guide-5a 452x496 (뷰포트 14,152 부터) — 단계 상자와 열린 과목 패널. 패널을 포함하는
   가장 작은 사각형이 아니라 왼쪽의 「병원 입지」까지 넣었다. 이 컨트롤을 찾는 사람이
   기억하는 것은 "병원 입지 옆" 이므로 그 이웃이 그림 안에 있어야 자리가 읽힌다.

   guide-5b 1600x900 (1절과 같은 클립) — 과목을 고른 뒤의 화면. 1절 그림과 같은 크기·같은
   클립이라 두 장을 견주면 무엇이 달라졌는지가 바로 보인다(제목 · 범례 머리 · 항목 한 줄).
   후보를 고르지 않은 상태로 찍는다 — 팝업이 목록과 지도를 덮으면 이 절이 보일 것을 덮는다.

   2026-08-12 2차: 점수 축을 전 과목으로 넓혀 패널 항목이 24개(전체 과목 + 23과목)가 됐다.
   목록이 12행이 되어 스크롤이 생겼고(실측 scrollHeight 380 vs clientHeight 320) **치과·한방이
   접혔다** — 목록 max-height 를 400px 로 올려 다 보이게 한 뒤 다시 찍었다. 그래서 이 장의
   높이가 436 → 496 이고 아래쪽 두 점(_5_3·_5_4)의 top 이 함께 내려왔다.
   _5_3 은 이제 산부인과가 아니라 **치과** 줄을 가리킨다 — 사용자가 물은 그 과목이다.

   2026-08-12 3차: 항목의 과목 근거 줄이 「남은 자리 · 지역 수요」 두 값이 되어 두 줄로 늘었다.
   항목 높이가 커져 _5_7 이 27.42% → 28.31% 로 내려왔다(첫 항목의 그 줄을 다시 잰 값이다). */
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_1"] { left: 31.39%; top: 3.76%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_2"] { left: 58.03%; top: 13.93%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_3"] { left: 40.33%; top: 78.91%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_4"] { left: 58.95%; top: 92.15%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_5"] { left: 8.97%; top: 16.64%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_6"] { left: 91.94%; top: 39.78%; }
.pharmsite-guide .m-point[data-tooltip-content="#PsGuide_5_7"] { left: 9.75%; top: 28.31%; }

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

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

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

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

/* 값과 그 아이콘을 한 덩어리로 묶는 껍데기(metaLine 이 만든다). 이어 두기만 하면 긴 줄에서
   아이콘만 다음 줄에 홀로 떨어져 값과 무관한 점 하나로 보였다 — 끊기는 자리가 공백이 아니라
   아이콘(inline-flex) 앞이라 줄바꿈 없는 공백(U+00A0)으로도 막히지 않았다(실측).
   묶는 단위가 짧아야 한다: 「남은 자리 상위 3%」가 110px 이라 358px 줄에서 넘치지 않는다. */
.pharmsite .ps-explain-tie {
  white-space: nowrap;
}

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

   전에는 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;
  /* 지도 위 저작자 표시 알약과 같은 잉크로 맞춘다(--pd-text-muted / 선 --pd-border) —
     둘이 같은 가족으로 읽혀야 한다. 직접 적은 회색(#98A0A3 / #E7E7E7)을 쓰던 자리다:
     시스템 토큰으로 바꾸니 두 곳이 같은 값을 가리키게 되어 어긋날 수 없다. 원본처럼 글리프(ⓘ) 하나로 두지 않고 원+글자로 두는 이유:
     이 아이콘은 눌러야 열리는 버튼이고 24px 히트 영역을 지켜야 하며, 열림 상태를 테두리 색으로
     알려야 한다(원본 알약은 hover 로 펼쳐지므로 그 표시가 필요 없다). */
  border: 1px solid var(--pd-border);
  border-radius: 50%;
  background: var(--pd-surface);
  color: var(--pd-text-muted);
  cursor: pointer;
  vertical-align: middle;
}

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

/* 아이콘 글자는 소문자 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: 320px;
  max-height: 40vh;
  overflow-y: auto;
  padding: var(--pd-space-3);
  /* 위의 저작자 표시 알약과 같은 언어로 맞춘다 — 시스템 토큰으로 통일했다(모서리 md,
     선 --pd-border, 글자 13px, 잉크 --pd-text-secondary). 지도 위 ⓘ 와 문장 안 ⓘ 가 같은
     가족으로 읽혀야 한다.

     한 곳만 다르다: 배경이 반투명(0.82)이 아니라 거의 불투명하다. 원본 알약은 옅은 지도 위에
     한 줄을 얹는 것이라 반투명이 통하지만, 이쪽은 100~250자를 글자·표 위에 얹으므로 뒤가
     비치면 읽을 수 없다. */
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--pd-shadow-md);
  /* 10.5 -> 13px. 툴팁 본문(.ps-tip-body)과 같은 값이다 — 같은 뜻의 조각이 화면 두 곳에서
     다른 크기면 한 벌로 읽히지 않는다. */
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  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;
}