/* =========================================================
   공용 레이아웃 — 헤더(GNB) · 페이지 머리 · 2차 메뉴 · 푸터

   이 파일은 모든 화면에 로드됩니다(_Layout.cshtml). 이관한 화면이든
   아니든 껍데기는 똑같이 이것을 씁니다.

   common.css 의 header / footer / .subvisual / .submenu 규칙을 걷어내고
   그 자리를 대신합니다. 그쪽을 지웠기 때문에 여기서 특이도를 올려
   싸울 필요가 없습니다.

   ── 바꾼 것 중 결과가 큰 하나 ──────────────────────────────
   예전 헤더는 position: fixed 로 본문 위에 떠 있었고, 본문은
   .no-subvisual main > .container { padding-top: 100px } 로 그만큼
   자리를 비워 줬습니다. 새 헤더는 문서 흐름 안에 있습니다(sticky).
   그래서 그 100px 장치와 .no-subvisual 클래스 자체가 필요 없습니다.

   ── 마크업을 건드리지 않은 이유 ────────────────────────────
   .subvisual 과 .submenu 는 87개 / 51개 화면이 각자 들고 있는
   마크업입니다. 구조를 바꾸면 그 파일을 전부 고쳐야 해서, 클래스
   이름을 그대로 두고 스타일만 갈아 끼웠습니다. 배경 사진을 걸던
   #SubpageMypage 같은 ID 규칙은 common.css 에서 지웠으므로 사진은
   자동으로 사라집니다.
   ========================================================= */

:root {
  /* 2차 메뉴가 헤더 아래에 붙으려면 헤더 높이를 알아야 한다. */
  --pd-gnb-h: 72px;

  /* z 값은 기존과 같은 숫자를 씁니다. 아직 이관하지 않은 90개 화면의
     팝업·오버레이가 예전 헤더(1000)를 기준으로 쌓여 있어서, 여기만
     디자인 시스템의 낮은 z 스케일로 내리면 그쪽이 헤더를 덮습니다. */
  --pd-gnb-z: 1000;
  --pd-submenu-z: 500;

  /*
     디자인 시스템의 겹침 순서를 이 헤더 위로 올립니다.

     tokens.css 의 z 스케일은 0~500 입니다(overlay 200, modal 300,
     toast 400, tooltip 500). 그대로 두면 **모달이 헤더 아래로 깔립니다.**
     헤더가 위에서 말한 이유로 1000 을 쓰기 때문입니다. 배경막이 헤더를
     덮지 못하고, 가운데 뜬 모달의 윗부분이 헤더에 잘립니다.

     드롭다운도 같은 문제입니다. 본문에서 열린 드롭다운(100)이 위에 붙어
     있는 2차 메뉴(500) 아래로 들어갑니다.

     그래서 순서를 값이 아니라 관계로 적습니다. 헤더가 나중에 낮은 값으로
     내려가면 이것들도 함께 내려갑니다.

     드롭다운은 헤더보다 아래입니다 — 본문에서 연 목록이 헤더를 덮을
     이유는 없습니다. 대신 2차 메뉴보다는 위여야 합니다.
  */
  --pd-z-dropdown: calc(var(--pd-submenu-z) + 100);
  --pd-z-overlay: calc(var(--pd-gnb-z) + 100);
  --pd-z-modal: calc(var(--pd-gnb-z) + 200);
  --pd-z-toast: calc(var(--pd-gnb-z) + 300);
  --pd-z-tooltip: calc(var(--pd-gnb-z) + 400);
}

@media (max-width: 960px) {
  :root { --pd-gnb-h: 60px; }
}

/* =========================================================
   0. 페이지 바탕

   common.css 가 body 에 #fafafa 를 깔고 있었습니다. 디자인 시스템의 페이지
   배경은 --pd-surface-sunken(#F7F8FA)입니다. 두 값이 비슷해 보이지만 성질이
   다릅니다 — #fafafa 는 중성 회색이고, 토큰 쪽은 다른 회색들과 같은 남색조
   (ink)에서 나옵니다. 카드(흰색)·표 머리·비활성 입력이 모두 그 계열이라,
   바탕만 중성이면 그 위의 회색들이 미세하게 누렇게 보입니다.

   common.css 보다 뒤에 실리므로 특이도를 올리지 않아도 이깁니다.
   ========================================================= */

body { background-color: var(--pd-surface-sunken); }

/* =========================================================
   1. 헤더 (GNB)

   가로 배치는 .pd-gnb__inner 가, 세로 정렬은 각 칸이 맡습니다.
   메뉴·계정·연락처는 모두 .pd-gnb__menus 안에 한 번만 그립니다.
   좁은 화면에서 이 덩어리가 통째로 서랍이 되고, order 로 순서만
   바뀝니다. (예전에는 _LoginPartial 을 두 번 그려서 id 가 중복됐습니다.)
   ========================================================= */

.pd-gnb {
  position: sticky;
  top: 0;
  z-index: var(--pd-gnb-z);
  background-color: var(--pd-surface);
  border-bottom: 1px solid var(--pd-border);
}

.pd-gnb__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pd-space-5);
  height: var(--pd-gnb-h);
  display: flex;
  align-items: center;
  gap: var(--pd-space-8);
}

.pd-gnb__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.pd-gnb__logo img {
  display: block;
  height: 18px;
  width: auto;
}

.pd-gnb__menus {
  flex: 1 1 auto;
  min-width: 0;
  /* 1차 메뉴 항목이 헤더 높이를 다 쓰게 합니다. 하위 메뉴 띠가 항목의
     아래(top: 100%)에 붙으므로, 항목이 글자 높이만큼만 크면 띠가 헤더
     한가운데서 열립니다. 현재 메뉴 밑줄(bottom: -1px)도 이래야 헤더의
     아래 선 위에 앉습니다. */
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--pd-space-6);
}

/* ---- 1차 메뉴 ---- */

.pd-gnb__nav {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
  height: 100%;
}

/* 항목에 position 을 주지 않습니다. 하위 메뉴 띠가 항목이 아니라 헤더를
   기준으로 자리를 잡아야 어느 메뉴를 가리켜도 같은 자리에서 열립니다. */
.pd-gnb__item {
  height: 100%;
  display: flex;
  align-items: center;
}

.pd-gnb__link {
  /* 현재 메뉴 밑줄(::after)이 잡을 기준. 예전에는 항목이 이 역할을 했습니다. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-1);
  height: 100%;
  padding-inline: var(--pd-space-3);
  font-size: 16px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  white-space: nowrap;
  /* base.css 의 :where(.pd-root) a:hover 가 밑줄을 그으려 합니다. 1차 메뉴는
     현재 위치를 아래 민트 선으로 알리고 있어서, 밑줄이 그어지면 선이 두 줄로
     겹칩니다. 가리켰다는 것은 글자색으로 알립니다. */
  text-decoration: none;
  transition: color var(--pd-dur) var(--pd-ease);
}
.pd-gnb__link:hover,
.pd-gnb__link:focus-visible { color: var(--pd-accent); text-decoration: none; }
.pd-gnb__link:focus-visible {
  outline: none;
  box-shadow: var(--pd-focus-ring);
  border-radius: var(--pd-radius-sm);
}

/* 현재 위치. 글자색과 아래 선을 함께 바꿔야 색만으로 구분하지 않게 된다. */
.pd-gnb__item.is-current > .pd-gnb__link,
.pd-gnb__link.is-current {
  color: var(--pd-accent);
}
.pd-gnb__item.is-current > .pd-gnb__link::after,
.pd-gnb__link.is-current::after {
  content: "";
  position: absolute;
  left: var(--pd-space-3);
  right: var(--pd-space-3);
  bottom: -1px;
  height: 2px;
  background-color: var(--pd-accent);
}

.pd-gnb__link .pd-icon { width: var(--pd-icon-sm); height: var(--pd-icon-sm); }

.pd-gnb__badge {
  font-size: 10px;
  font-weight: var(--pd-weight-bold);
  font-style: italic;
  color: var(--pd-cta);
  letter-spacing: 0;
  vertical-align: super;
}

/* ---- 하위 메뉴 ----
   예전에는 화면 폭을 가로지르는 어두운 판이 열렸고, 높이를
   menu-count7 { height: 308px } 처럼 항목 수마다 픽셀로 박아 뒀습니다.
   항목을 하나 늘리면 잘렸습니다.

   그 뒤 한동안 떠 있는 카드(세로 목록)였는데, 다시 **헤더 아래에 붙는
   가로 띠**로 돌립니다. 이유는 서브페이지와 짝을 맞추기 위해서입니다 —
   서브페이지는 헤더 바로 아래에 같은 모양의 2차 메뉴(.submenu)를 늘 펼쳐
   두고 있습니다. hover 로 열리는 것과 머물러 있는 것이 다른 모양·다른
   자리면 같은 메뉴로 읽히지 않습니다.

   그래서 띠는 **항목이 아니라 헤더**를 기준으로 놓습니다. 어느 메뉴를
   가리켜도 같은 자리에서 열리고, 왼쪽 끝이 서브페이지의 2차 메뉴와
   맞습니다(.container 와 같은 1440 + 20 여백 셈).

   ── 안에 무엇이 들어가는가 ──────────────────────────────────
   링크 줄 자체는 .pd-subnav 입니다(아래 4-1절). Views/Shared/_SubNav.cshtml
   이 그리며, 서브페이지의 2차 메뉴도 **같은 파샬**이 그립니다. 여기는
   자리와 배경, 여닫는 몸짓만 맡습니다. */

.pd-gnb__sub {
  position: absolute;
  /* 100% 는 헤더의 패딩 상자(72px)라 아래 보더 1px 이 빠져 있습니다.
     그대로 두면 띠의 첫 1px 이 보더와 겹칩니다. */
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  /* 서브페이지의 .submenu > .container 와 같은 셈. 두 띠의 왼쪽 끝이 맞습니다. */
  padding-inline: max(var(--pd-space-5), calc((100% - 1440px) / 2 + var(--pd-space-5)));
  /* 왼쪽 끝은 그 위의 1차 메뉴 글자에 맞춥니다 — 아래 4-2절.
     --pd-subnav-x 는 layout.js 가 재서 넣습니다. 없으면 위 셈 그대로입니다. */
  padding-inline-start: var(--pd-subnav-x, max(var(--pd-space-5), calc((100% - 1440px) / 2 + var(--pd-space-5))));
  background-color: var(--pd-surface);
  /* .submenu 와 **똑같이** 아래 선 하나뿐입니다. 한동안 여기에만 드리운
     그림자를 얹었는데, 서브페이지에서 hover 하면 머물러 있던 띠 아래로
     그림자가 새로 생겨 같은 메뉴가 다른 것으로 보였습니다(측정: 폭 전체
     11줄 차이). 띠는 헤더에 붙어 있지 떠 있는 것이 아니라 그림자가 할 일이
     없습니다. */
  box-shadow: inset 0 -1px 0 var(--pd-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--pd-dur) var(--pd-ease),
    transform var(--pd-dur) var(--pd-ease),
    visibility var(--pd-dur) var(--pd-ease);
}

/*
   이미 펼쳐져 있는 갈래는 hover 로 또 열지 않는다

   서브페이지에는 지금 갈래의 띠가 이미 헤더 밑에 머물러 있습니다. 그 1차
   메뉴를 가리키면 **똑같은 띠**가 그 위에 한 벌 더 덮입니다. 지금은 둘이
   픽셀까지 같아서 눈에 띄지 않지만, 없는 편이 맞습니다 — 열 것이 없는데
   여는 셈이고, 링크가 한 문서에 두 벌이라 키보드 이동에도 같은 항목이
   두 번 걸립니다.

   .is-current 만으로 정하지 않고 `main > .submenu` 가 실제로 있는지 함께
   봅니다. 그 갈래인데 띠가 없는 화면이 있으면 하위 메뉴로 가는 길이 통째로
   막히기 때문입니다.

   서랍(≤960px)에는 걸지 않습니다. 거기서는 눌러서 여는 방식이고 화면에
   띠가 함께 보이지 않습니다.
*/
@media (min-width: 961px) {
  body:has(main > .submenu) .pd-gnb__item.is-current > .pd-gnb__sub {
    opacity: 0;
    visibility: hidden;
  }
}

.pd-gnb__item:hover > .pd-gnb__sub,
.pd-gnb__item:focus-within > .pd-gnb__sub,
.pd-gnb__item.is-open > .pd-gnb__sub {
  opacity: 1;
  visibility: visible;
  /* 다 열린 뒤에는 항등 변환을 남기지 않습니다(translateY(0) 아님).
     남은 변환은 합성 레이어를 붙잡아 둘 이유가 없는데도 붙잡습니다. */
  transform: none;
}

/* 넓은 화면에서만 여는 삼각형. 좁은 화면에서는 서랍이 대신한다. */
.pd-gnb__caret {
  display: none;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
}

/* ---- 계정 ---- */

/* 계정 영역은 로그아웃 POST 때문에 form 으로 한 겹 싸여 있습니다.
   그 form 도 같은 줄로 세워야 안쪽 항목이 나란히 놓입니다. */
.pd-gnb__account,
.pd-gnb__account > form {
  order: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
}

/* 펼침을 여는 자리이자 내정보로 가는 링크. 헤더 오른쪽에 보이는 계정 정보는
   이 한 줄이 전부입니다(마일리지·로그아웃은 펼침 안으로 들어갔습니다). */
.pd-gnb__user {
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
  padding: var(--pd-space-1) var(--pd-space-2);
  border-radius: var(--pd-radius-sm);
  font-size: 14px;
  /* base.css 가 .pd-root 안의 a:hover 에 밑줄을 긋습니다. 이 줄은 링크보다
     메뉴 손잡이에 가까워서, 가리켰다는 것은 배경으로 알립니다. */
  text-decoration: none;
  transition: background-color var(--pd-dur) var(--pd-ease);
}
.pd-gnb__user:hover { background-color: var(--pd-surface-sunken); text-decoration: none; }
.pd-gnb__user:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-gnb__menu:hover > .pd-gnb__user,
.pd-gnb__menu:focus-within > .pd-gnb__user { background-color: var(--pd-surface-sunken); }

.pd-gnb__user-caret {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
  transition: transform var(--pd-dur) var(--pd-ease);
}
.pd-gnb__menu:hover .pd-gnb__user-caret,
.pd-gnb__menu:focus-within .pd-gnb__user-caret { transform: rotate(180deg); }

.pd-gnb__rank {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--pd-space-2);
  border-radius: var(--pd-radius-sm);
  font-size: 11px;
  font-weight: var(--pd-weight-bold);
  background-color: var(--pd-surface-muted);
  color: var(--pd-text-secondary);
}
.pd-gnb__rank[data-rank="premium"] {
  background-color: var(--pd-gold-50);
  color: var(--pd-gold-700);
}

.pd-gnb__name { color: var(--pd-text); font-weight: var(--pd-weight-semibold); }
.pd-gnb__name em { font-style: normal; font-weight: var(--pd-weight-regular); color: var(--pd-text-secondary); margin-inline-start: 2px; }

/* 펼침 맨 위의 마일리지 줄. 아래 목록에도 "마일리지" 항목이 있지만, 그쪽은
   가는 길이고 이쪽은 잔액입니다 — 펼치자마자 숫자가 보이는 것이 목적이라
   목록 위에 따로 둡니다. */
.pd-gnb__mileage {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  /* 아래 목록(.pd-subnav--stack .pd-subnav__link)과 같은 여백·반경 */
  padding: var(--pd-space-2) var(--pd-space-3);
  border-radius: var(--pd-radius-md);
  font-size: 14px;
  color: var(--pd-text-secondary);
  text-decoration: none;
}
/* 약국명. 예전에는 이름 위 hover 툴팁이었습니다(위 _LoginPartial 주석).
   누를 것이 아니라 지금 어느 약국으로 들어와 있는지 알려 주는 줄입니다. */
.pd-gnb__menu-pharm {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  padding: var(--pd-space-1) var(--pd-space-3) var(--pd-space-2);
  font-size: 13px;
  color: var(--pd-text-muted);
  word-break: keep-all;
}
.pd-gnb__menu-pharm .pd-icon {
  flex: 0 0 auto;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
}

/* 잔액 줄은 목록과 하는 일이 달라 아래에 선을 하나 둡니다. */
.pd-gnb__mileage {
  margin-inline: calc(var(--pd-space-2) * -1);
  padding-inline: var(--pd-space-5);
  margin-bottom: var(--pd-space-2);
  padding-bottom: var(--pd-space-3);
  border-bottom: 1px solid var(--pd-border);
  border-radius: 0;
}
.pd-gnb__mileage:hover { color: var(--pd-gold-700); text-decoration: none; }
.pd-gnb__mileage .pd-icon {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-gold-500);
}
.pd-gnb__mileage-num {
  margin-inline-start: auto;
  font-weight: var(--pd-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pd-gold-700);
}

.pd-gnb__auth {
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
}
.pd-gnb__auth-link {
  padding: var(--pd-space-1) var(--pd-space-2);
  border-radius: var(--pd-radius-sm);
  font-size: 14px;
  color: var(--pd-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}
.pd-gnb__auth-link:hover { color: var(--pd-text); }
.pd-gnb__auth-link:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

/* 내정보 펼침 */
.pd-gnb__menu { position: relative; }
/* 패널의 **왼쪽**을 손잡이(이름)의 왼쪽에 맞춥니다. right: 0 이었을 때는
   패널이 이름보다 81px 더 왼쪽으로 삐져나와, 이름과 상관없는 자리에서
   떠오르는 것처럼 보였습니다(오른쪽 정렬은 손잡이가 화면 맨 끝에 있을 때
   쓰는 것인데, 여기는 오른쪽에 고객센터 번호와 원격지원이 더 있습니다). */
.pd-gnb__menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 200px;
  padding: var(--pd-space-2);
  /* 손잡이와 패널 사이 8px. 이 틈 위에서는 커서가 둘 다 벗어나므로 그대로
     두면 패널이 닫혀 로그아웃까지 못 갑니다. 아래 ::before 로 틈을 덮습니다. */
  margin-top: var(--pd-space-2);
  background-color: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--pd-dur) var(--pd-ease),
    transform var(--pd-dur) var(--pd-ease),
    visibility var(--pd-dur) var(--pd-ease);
}
/* 손잡이와 패널 사이 8px 를 잇는 다리. 눈에 보이지 않지만 패널의 일부라
   여기 있는 동안에도 .pd-gnb__menu:hover 가 유지됩니다. */
.pd-gnb__menu-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pd-space-2) * -1);
  height: var(--pd-space-2);
}

.pd-gnb__menu:hover > .pd-gnb__menu-panel,
.pd-gnb__menu:focus-within > .pd-gnb__menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 로그아웃. 목록과 같은 줄로 보이되 하는 일이 달라 위에 선을 하나 긋습니다.
   선은 패널 안쪽 여백(8px)을 가로질러야 칸을 나누는 것으로 읽혀서, 좌우로
   그만큼 빼내고 그만큼 다시 padding 으로 채웁니다. */
.pd-gnb__menu-logout {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  /* 폼 요소는 display:flex 를 줘도 폭이 내용만큼입니다(글자 폭 112px). 그래서
     위 선이 패널 가운데서 끊겨 보였습니다. 패널 안쪽 폭 + 좌우로 빼낸 8px 씩. */
  width: calc(100% + var(--pd-space-2) * 2);
  margin-inline: calc(var(--pd-space-2) * -1);
  margin-top: var(--pd-space-2);
  padding: var(--pd-space-3) var(--pd-space-5);
  border: none;
  border-top: 1px solid var(--pd-border);
  background: none;
  font-size: 14px;
  color: var(--pd-text-secondary);
  text-align: start;
  cursor: pointer;
  transition: color var(--pd-dur) var(--pd-ease);
}
/* 패널 안 목록의 글자 시작점을 위아래 줄과 맞춥니다. 약국명·마일리지·로그아웃은
   아이콘을 달고 있어 글자가 그만큼 안쪽에서 시작하는데, 아이콘 없는 메뉴 줄만
   24px 왼쪽에서 시작해 목록이 들쭉날쭉했습니다. 아이콘 자리만큼 들여씁니다.
   (서랍(모바일)에서 쓰는 .pd-subnav--stack 은 아이콘이 없으므로 건드리지
   않도록 패널 안으로만 범위를 좁힙니다.) */
.pd-gnb__menu-panel .pd-subnav--stack .pd-subnav__link {
  padding-inline-start: calc(var(--pd-space-3) + var(--pd-icon-sm) + var(--pd-space-2));
}

.pd-gnb__menu-logout:hover { color: var(--pd-text); }
.pd-gnb__menu-logout:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-gnb__menu-logout .pd-icon {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
}

/* ---- 연락처와 원격지원 ---- */

.pd-gnb__contact {
  order: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pd-space-4);
}

.pd-gnb__tels {
  display: grid;
  gap: 2px;
}
.pd-gnb__tel {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-size: 13px;
  color: var(--pd-text-secondary);
  white-space: nowrap;
}
.pd-gnb__tel-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pd-accent);
  font-size: 12px;
  font-weight: var(--pd-weight-semibold);
}
.pd-gnb__tel-label .pd-icon { width: 14px; height: 14px; }
.pd-gnb__tel-num {
  font-variant-numeric: tabular-nums;
  color: var(--pd-text);
  font-weight: var(--pd-weight-medium);
}

/* 원격지원 — 채운 단추가 아니라 테두리 단추입니다.

   한동안 민트로 채워 두었더니, 바로 아래 2차 메뉴의 [복약안내문 설정]과
   같은 무게로 보였습니다. 둘은 하는 일이 다릅니다 — 이쪽은 막혔을 때 부르는
   보조 통로(외부 원격지원 사이트)이고, 아래쪽이 이 화면에서 할 일입니다.
   한 화면에 같은 세기의 단추가 둘이면 어느 것이 본줄기인지 알 수 없습니다.

   같은 이유로 한 급 작습니다(34 → 30px, 13 → 12px). */
.pd-gnb__remote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-inline: var(--pd-space-3);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-radius-md);
  background-color: transparent;
  color: var(--pd-text-secondary);
  font-size: 12px;
  font-weight: var(--pd-weight-semibold);
  white-space: nowrap;
  /* base.css 의 :where(.pd-root) a:hover 가 밑줄을 그으려 합니다. 단추 모양인데
     글자에 밑줄이 그어지면 링크와 단추 사이 어디쯤으로 보입니다. */
  text-decoration: none;
  transition:
    background-color var(--pd-dur) var(--pd-ease),
    border-color var(--pd-dur) var(--pd-ease),
    color var(--pd-dur) var(--pd-ease);
}
.pd-gnb__remote:hover {
  background-color: var(--pd-surface-sunken);
  border-color: var(--pd-border-hover);
  color: var(--pd-text);
  text-decoration: none;
}
.pd-gnb__remote:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

/* ---- 햄버거와 덮개 ---- */

.pd-gnb__toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  border: none;
  border-radius: var(--pd-radius-md);
  background: none;
  color: var(--pd-text);
  cursor: pointer;
}
.pd-gnb__toggle:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-gnb__toggle .pd-icon { width: 24px; height: 24px; }
.pd-gnb__toggle .pd-gnb__toggle-close { display: none; }

.pd-gnb__scrim { display: none; }

/* ---- 넓은 화면에서 좁아질 때 순서대로 덜어낸다 ---- */

@media (min-width: 961px) and (max-width: 1400px) {
  .pd-gnb__tels { display: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .pd-gnb__mileage,
  .pd-gnb__rank { display: none; }
  .pd-gnb__link { padding-inline: var(--pd-space-2); font-size: 15px; }
}

/* =========================================================
   2. 좁은 화면 — 서랍

   .pd-gnb__menus 가 통째로 오른쪽에서 밀려 들어옵니다. 안의 순서만
   order 로 바뀝니다(계정 → 메뉴 → 연락처).
   ========================================================= */

@media (max-width: 960px) {
  /* 로고도 본문(.container 20px)과 같은 선에 세웁니다. */
  .pd-gnb__inner { gap: var(--pd-space-4); padding-inline: var(--pd-space-5); }
  /*
     서랍보다 위에 있어야 합니다.

     서랍(.pd-gnb__menus)은 position: fixed 에 z-index 가 헤더와 같은 값이고,
     오른쪽에서 300px 폭으로 들어옵니다. 햄버거 단추는 바로 그 자리(오른쪽 끝)에
     있어서, 열리면 서랍이 단추를 덮었습니다 — **닫는 X 가 보이지 않았습니다.**
     둘은 같은 쌓임 문맥(헤더) 안이라 z 값 하나로 올라옵니다.
  */
  .pd-gnb__toggle {
    display: inline-flex;
    position: relative;
    z-index: calc(var(--pd-gnb-z) + 1);
  }

  .pd-gnb__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--pd-gnb-z) - 1);
    background-color: rgba(19, 28, 45, 0.4);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--pd-dur) var(--pd-ease),
      visibility var(--pd-dur) var(--pd-ease);
  }

  .pd-gnb__menus {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: var(--pd-gnb-z);
    width: min(300px, 85vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--pd-surface);
    box-shadow: var(--pd-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--pd-dur-slow) var(--pd-ease);
  }

  /* 열린 상태 */
  .pd-gnb.is-open .pd-gnb__menus { transform: translateX(0); }
  .pd-gnb.is-open .pd-gnb__scrim { opacity: 1; visibility: visible; }
  .pd-gnb.is-open .pd-gnb__toggle-open { display: none; }
  .pd-gnb.is-open .pd-gnb__toggle-close { display: block; }

  /* 서랍이 열려 있는 동안 뒤 배경이 따라 스크롤되지 않게 한다. */
  body.pd-menu-open { overflow: hidden; }

  /* 순서: 계정 → 메뉴 → 연락처 */
  .pd-gnb__account {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pd-space-3);
    padding: var(--pd-space-5) var(--pd-space-5) var(--pd-space-4);
    background-color: var(--pd-surface-sunken);
    border-bottom: 1px solid var(--pd-border);
  }
  .pd-gnb__user { justify-content: flex-start; flex-wrap: wrap; padding-inline: 0; }
  .pd-gnb__user-caret { display: none; }
  .pd-gnb__auth { flex-wrap: wrap; gap: var(--pd-space-2); }
  .pd-gnb__auth-link { padding-inline: 0; }

  /*
     서랍에서는 펼치는 것이 아니라 그냥 놓입니다.

     예전에는 이 패널을 통째로 감췄습니다 — 같은 항목이 내정보 화면 안의
     2차 메뉴에 다시 나오고, 로그아웃은 패널 **밖에** 따로 있었기 때문입니다.
     이제 로그아웃과 마일리지가 이 안으로 들어왔으므로 감추면 로그아웃으로
     가는 길이 사라집니다.

     목록 7개는 여전히 감춥니다(내정보 화면에서 다시 만납니다). 남기는 것은
     서랍에 없던 두 가지, 마일리지와 로그아웃뿐이라 서랍 길이는 그대로입니다.
  */
  .pd-gnb__menu-panel {
    position: static;
    min-width: 0;
    margin: var(--pd-space-1) 0 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .pd-gnb__menu-panel::before { content: none; }
  .pd-gnb__menu-panel .pd-subnav--stack { display: none; }
  .pd-gnb__menu-pharm { padding-inline: 0; }
  .pd-gnb__mileage { padding-inline: 0; }
  .pd-gnb__menu-logout { width: 100%; margin-inline: 0; padding-inline: 0; }

  .pd-gnb__nav {
    order: 2;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: var(--pd-space-2) 0;
  }

  .pd-gnb__item {
    /* 서랍에서는 여는 삼각형이 항목 오른쪽에 절대 위치로 붙으므로
       여기서만 항목이 기준이 됩니다. */
    position: relative;
    display: block;
    height: auto;
    border-bottom: 1px solid var(--pd-border);
  }
  .pd-gnb__item:last-child { border-bottom: none; }

  .pd-gnb__link {
    height: auto;
    padding: var(--pd-space-4) var(--pd-space-5);
    font-size: 15px;
    color: var(--pd-text);
  }
  .pd-gnb__item.is-current > .pd-gnb__link::after,
  .pd-gnb__link.is-current::after { content: none; }

  /* 여는 삼각형이 여기서만 보인다. 링크와 겹치지 않게 별도 버튼이다. */
  .pd-gnb__caret {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 52px;
    padding: 14px 16px;
    border: none;
    background: none;
    color: var(--pd-text-muted);
    cursor: pointer;
    transition: transform var(--pd-dur) var(--pd-ease);
  }
  .pd-gnb__caret:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
  .pd-gnb__item.is-open > .pd-gnb__caret { transform: rotate(180deg); }

  /* 서랍 안에서는 띠가 아니라 세로 목록입니다. 폭이 좁아 가로로 늘어놓을
     자리가 없고, 부모 항목 아래에 들여쓰는 편이 관계를 더 잘 보여 줍니다.
     내정보 펼침 패널과 같은 모양이라 .pd-subnav--stack 의 규칙을 빌려 씁니다. */
  .pd-gnb__sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 var(--pd-space-3) 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
  }

  /* 좁은 화면에서는 hover 로 열리지 않는다. 눌러서 연다. */
  .pd-gnb__item:hover > .pd-gnb__sub,
  .pd-gnb__item:focus-within > .pd-gnb__sub { display: none; }
  .pd-gnb__item.is-open > .pd-gnb__sub { display: block; }

  .pd-gnb__sub .pd-subnav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    white-space: normal;
  }
  .pd-gnb__sub .pd-subnav__link {
    height: auto;
    padding: var(--pd-space-2) var(--pd-space-5);
    font-size: 14px;
    font-weight: var(--pd-weight-regular);
    border-bottom: none;
  }
  .pd-gnb__sub .pd-subnav__link.is-current {
    color: var(--pd-accent);
    font-weight: var(--pd-weight-semibold);
  }
  .pd-gnb__sub .pd-subnav__sep {
    width: auto;
    height: 1px;
    margin: var(--pd-space-1) var(--pd-space-5);
  }

  .pd-gnb__contact {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pd-space-3);
    padding: var(--pd-space-5);
    border-top: 1px solid var(--pd-border);
  }
  .pd-gnb__remote { height: 40px; }
}

/* =========================================================
   3. 페이지 머리 (.subvisual)

   87개 화면이 <div class="subvisual"><h2>상위</h2><h1>제목</h1></div>
   모양으로 들고 있습니다. 마크업은 그대로 두고 배경 사진과 200px
   높이를 걷어냈습니다.
   ========================================================= */

/*
   제목 줄과 2차 메뉴는 헤더와 같은 흰 판 위에 놓아 한 덩어리로 읽히게
   합니다. 그래서 밴드는 화면 폭을 다 쓰고, 글자만 본문 컨테이너(1440)에
   맞춰 안쪽 여백으로 밀어 넣습니다. 마크업에 감쌀 칸이 없어서
   (h1/h2 가 .subvisual 의 직계 자식입니다) padding 으로 맞춥니다.
*/
.subvisual {
  display: block;
  padding-block: var(--pd-space-8) var(--pd-space-5);
  padding-inline: max(var(--pd-space-5), calc((100% - 1440px) / 2 + var(--pd-space-5)));
  text-align: start;
  /* 배경을 두지 않습니다 — 페이지 배경이 그대로 비칩니다.
     한동안 헤더·2차 메뉴와 같은 흰 판을 깔아 셋을 한 덩어리로 보이게 했는데,
     그러면 **머물러 있는 것**(헤더·메뉴)과 **화면마다 바뀌는 것**(제목)이
     같은 판 위에 놓여 경계가 사라집니다. 흰 판은 위의 두 줄까지입니다. */
  height: auto;
}

/*
   감추는 제목 줄 (내정보 13개 · 상품구매 4개)

   이 화면들은 본문이 **이미 제목을 갖고 있습니다**(`<h1 class="t-h2">비밀번호</h1>`
   같은 줄). 밴드까지 두면 같은 이름이 위아래로 두 번 나오고, 낭독기도 두 번
   읽습니다. 그래서 화면에서만 감추는 것(sr-only)이 아니라 아예 지웁니다 —
   문서의 h1 은 본문 쪽이 갖고 있습니다.

   마크업은 남겨 둡니다. 되돌리려면 뷰에서 이 클래스 하나만 빼면 됩니다.
*/
.subvisual--quiet { display: none; }

/* 2차 메뉴가 좁은 컨테이너를 쓰는 8개 화면에서는 제목도 같이 좁힌다.
   :has() 를 못 읽는 브라우저에서는 제목이 80px 어긋날 뿐 깨지지 않는다. */
.subvisual:has(+ .submenu > .container-sm) {
  padding-inline: max(var(--pd-space-5), calc((100% - 1280px) / 2 + var(--pd-space-5)));
}

/* 상위(섹션) 이름 — 작게, 흐리게 */
.subvisual h2,
.subvisual > h1:first-child:last-child {
  display: block;
  margin-bottom: var(--pd-space-1);
  font-size: 14px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-muted);
  letter-spacing: normal;
  line-height: 1.4;
}

/* 화면 제목 — 크게 */
.subvisual h2 + h1 {
  display: block;
  margin-bottom: 0;
  font-size: 28px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/*
   제목 뒤에 붙는 상태 — 등록 / 수정 / 상세

   같은 화면이 상태만 달라 여러 번 나오는 경우가 있습니다(약사 어드바이스
   등록·수정·상세). 예전에는 이것을 h2 로 적어 화면 이름(h1)보다 작게
   내보냈는데, 단계가 아니라 곁가지 정보이므로 제목 옆으로 옮깁니다.
*/
.subvisual h1 .subvisual__state {
  display: inline-block;
  margin-inline-start: var(--pd-space-2);
  vertical-align: middle;
  /* 제목과 같은 줄에 서지만 제목을 밀어내지 않을 만큼만 */
  font-size: 15px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  letter-spacing: normal;
}
.subvisual h1 .subvisual__state::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-inline-end: var(--pd-space-2);
  vertical-align: -1px;
  background-color: var(--pd-border-strong);
}

/*
   왜 h1 하나뿐일 때 작게 두는가

   87개 화면 중 45개는 밴드에 <h1>고객센터</h1> 처럼 **섹션 이름**만 넣고,
   실제 화면 제목("공지사항")은 본문이 다시 그립니다. 사진 배경일 때는
   장식으로 읽혀서 문제가 없었지만, 이제 둘 다 글자라 큰 쪽이 섹션이면
   위계가 뒤집힙니다. 그래서 혼자 있는 h1 은 상위로 취급합니다.

   나머지 12개는 <h2>내정보</h2><h1>마일리지</h1> 처럼 상위와 제목을 모두
   갖고 있어 그대로 두 줄로 나옵니다. 각 영역을 이관할 때 앞의 45개도
   이 모양으로 맞춥니다. (복약안내 22개는 맞췄습니다 — 남은 23개)
*/

@media (max-width: 768px) {
  .subvisual {
    padding-block: var(--pd-space-6) var(--pd-space-4);
    /* .container 는 어느 폭에서나 20px 입니다(common.css). 16px 을 쓰면
       제목만 4px 왼쪽으로 튀어나옵니다. */
    padding-inline: var(--pd-space-5);
  }
  .subvisual h2,
  .subvisual > h1:first-child:last-child { font-size: 13px; }
  .subvisual h2 + h1 { font-size: 22px; }
}

/* =========================================================
   4. 2차 메뉴 (.submenu)

   흰 판에 그림자를 얹고 사진 밴드 위로 -40px 끌어올리던 것을,
   헤더 밑에 붙는 탭 줄로 바꿉니다. 모양은 디자인 시스템의 Tabs 와
   같습니다(선 하나 + 현재 항목만 강조).
   ========================================================= */

/*
   순서 — 2차 메뉴가 제목보다 **위**에 온다

   마크업은 62개 화면이 <div class="subvisual"> 다음에 <div class="submenu">
   순서로 들고 있습니다. 그대로 그리면 서브페이지에 들어섰을 때 제목이
   먼저 나오고 메뉴가 그 아래에 뜹니다. 헤더에서 hover 로 열리는 띠와
   같은 메뉴인데 자리가 달라, 페이지를 옮길 때마다 메뉴가 위아래로
   널뜁니다.

   헤더 바로 아래에 2차 메뉴가 붙어 있고 그 아래부터 화면 내용이 시작하는
   것이 이 사이트가 원래 쓰던 방식이고, 3차 탭을 제목 아래로 뺄 자리도
   그래야 생깁니다:

     헤더 → 2차 메뉴 → 제목 → 3차 탭 → 본문

   마크업 62곳을 옮기는 대신 main 을 세로 flex 로 두고 order 로 뒤집습니다.
   :has() 로 2차 메뉴가 있는 화면에만 겁니다.
*/
main:has(> .submenu) {
  display: flex;
  flex-direction: column;
}
main > .submenu { order: -1; }

/* 3차 탭은 제목 아래에 그대로 둡니다(기본 order 0 + DOM 순서). */
main > .submenu--tabs { order: 0; }

/*
   flex 로 바꾼 값 — 본문 컨테이너가 내용 폭으로 쪼그라들었다

   .container 는 common.css 에서 `margin-left: auto; margin-right: auto` 로
   가운데 정렬합니다. 그런데 main 이 세로 flex 가 되면 그 두 값이 **교차축의
   auto 여백**이 되고, 교차축 auto 여백은 stretch 를 막습니다. 그래서 컨테이너가
   내용 폭으로 줄어들고 남은 자리로 몰렸습니다.

   눈에 띈 모습: 고객센터 화면마다 폭이 달랐습니다(1440 폭에서 재면
   공지사항 449 · 뉴스 514 · 제휴문의 546 · 문의 게시판 876). 표나 카드가
   차지하는 폭이 그대로 컨테이너 폭이 된 것입니다.

   폭은 max-width(1440)가 정하고 auto 여백은 그 뒤 남는 자리를 나누게 합니다.
*/
main:has(> .submenu) > .container { width: 100%; }

/* 제목 위가 이제 탭 줄이라 여백을 줄입니다. 2차 메뉴가 없는 화면은
   그대로 넉넉하게 둡니다. */
main:has(> .submenu) > .subvisual {
  padding-block: var(--pd-space-6) var(--pd-space-4);
}

.submenu {
  position: sticky;
  /* --pd-gnb-h 는 헤더 안쪽 높이라 아래 보더 1px 이 빠져 있다. 그대로 쓰면
     2차 메뉴의 첫 1px 이 헤더 뒤로 들어간다. */
  top: calc(var(--pd-gnb-h) + 1px);
  z-index: var(--pd-submenu-z);
  margin-top: 0;
  background-color: var(--pd-surface);
  box-shadow: inset 0 -1px 0 var(--pd-border);
}

.submenu > .container {
  background: none;
  box-shadow: none;
  text-align: start;
}

/* =========================================================
   4-2. 띠의 왼쪽 끝은 1차 메뉴 글자에 맞춘다

   한동안 두 띠 모두 왼쪽 끝을 본문 컨테이너(로고·화면 제목과 같은 x)에
   맞춰 뒀습니다. 그런데 2차 메뉴는 본문이 아니라 **1차 메뉴에 딸린 것**
   입니다. "복약안내 서비스" 아래에서 열리는데 글자가 로고 밑에서 시작하면
   어느 메뉴의 하위인지가 자리로 드러나지 않습니다.

   그래서 넓은 화면에서는 띠의 첫 글자를 그 1차 메뉴의 첫 글자에 맞춥니다.
   머물러 있는 띠(서브페이지)도 같은 자리라야 hover 로 열리는 띠와 겹쳐
   보입니다.

   ── 왜 스크립트로 재는가 ────────────────────────────────────
   로고 그림 폭이 정해져 있지 않고(height 만 고정) 1차 메뉴 글자 폭도
   글꼴에 따라 달라져서, CSS 만으로는 그 x 를 알 방법이 없습니다.
   layout.js 가 재서 --pd-subnav-x 로 넣습니다. 값이 없으면(스크립트 실패,
   좁은 화면) 예전처럼 컨테이너 왼쪽입니다.

   3차 탭(.submenu--tabs)은 옮기지 않습니다. 그것은 1차 메뉴가 아니라
   바로 위의 화면 제목에 딸린 것이라 제목과 같은 x 여야 합니다.
   ========================================================= */
main > .submenu:not(.submenu--tabs) > .container {
  padding-inline-start: var(--pd-subnav-x, var(--pd-space-5));
}

/* =========================================================
   4-1. 2차 메뉴 줄 (.pd-subnav) — 헤더와 서브페이지가 **함께 쓰는** 것

   Views/Shared/_SubNav.cshtml 이 그리는 링크 줄입니다. 감싸는 껍데기만
   다릅니다.

     헤더        .pd-gnb__sub  > .pd-subnav     (hover 로 열림)
     서브페이지  .submenu > .container > .pd-subnav  (머물러 있음)
     내정보 펼침 .pd-gnb__menu-panel > .pd-subnav--stack

   예전에는 이 줄이 곳마다 따로 있었습니다 — 헤더는 .pd-gnb__sub-link,
   서브페이지는 .submenu-1d a. 값을 손으로 맞춰 놓아도 한쪽만 고치면
   갈라졌습니다. 이제 규칙이 하나라 갈라질 수가 없습니다.

   .submenu-2d 는 아직 옛 마크업을 쓰는 3차 탭(뷰 13개)입니다. 규칙을
   따로 쓰지 않고 같은 블록에 선택자만 얹습니다.
   ========================================================= */

/*
   여백을 링크 안이 아니라 링크 사이에 둡니다

   예전에는 링크마다 padding-inline: 12px 이 있었습니다. 그래서
     · 첫 항목의 **글자**가 컨테이너 왼쪽 끝에서 12px 안으로 들어가
       로고·화면 제목과 세로로 어긋났고,
     · 아래 강조선이 글자보다 24px 넓게 그어졌습니다.

   안쪽 여백을 걷어 글자를 컨테이너 끝에 맞추고, 강조선은 글자 너비가
   됩니다. 항목 사이가 붙지 않도록 그만큼을 gap 으로 옮겼습니다
   (12 + 4 + 12 = 28 → 32).
*/
.pd-subnav,
.submenu .submenu-2d {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--pd-space-8);
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.pd-subnav__link,
.submenu .submenu-2d a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-1);
  flex: 0 0 auto;
  height: 52px;
  line-height: normal;
  padding-inline: 0;
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  letter-spacing: normal;
  /* 탭이므로 밑줄을 긋지 않습니다. base.css 의 :where(.pd-root) a:hover 가
     밑줄을 그으려 하는데, 아래 강조선과 겹쳐 두 줄이 됩니다. */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color var(--pd-dur) var(--pd-ease),
    border-color var(--pd-dur) var(--pd-ease);
}
.pd-subnav__link:hover,
.submenu .submenu-2d a:hover { text-decoration: none; }

/* 옛 CSS 가 링크 뒤에 붙이던 장식을 끕니다. */
.pd-subnav__link::after,
.submenu .submenu-2d a::after { content: none; }

.pd-subnav__link:hover,
.submenu .submenu-2d a:hover {
  color: var(--pd-text);
  border-bottom-color: var(--pd-border-strong);
}
.pd-subnav__link:focus-visible,
.submenu .submenu-2d a:focus-visible {
  outline: none;
  box-shadow: var(--pd-focus-ring);
  border-radius: var(--pd-radius-sm);
}

/* 현재 항목. 탭과 같은 규칙으로 강조선이 회색 선 위에 온다.
   .current 는 3차 탭이 아직 쓰는 옛 이름입니다. */
.pd-subnav__link.is-current,
.pd-subnav__link.is-current:hover,
.submenu .submenu-2d a.current,
.submenu .submenu-2d a.current:hover {
  color: var(--pd-accent);
  border-bottom-color: var(--pd-accent);
  z-index: 1;
}

.pd-subnav__link .pd-icon {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
}

/* 새로 생긴 항목 표시 */
.pd-subnav__link.is-new::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--pd-cta);
  flex: 0 0 auto;
}

/* 묶음 구분자. 예전에는 마크업에 <span>|</span> 글자가 들어 있어 탭 줄에서
   위로 떠 보였습니다. 이제 빈 span 을 세로선으로 그립니다.

   양옆의 gap(32px)만으로도 이미 넓어서 여백을 더 주지 않고 조금 당깁니다.
   묶음 사이(24+1+24=49px)가 항목 사이(32px)보다 넓기만 하면 됩니다. */
.pd-subnav__sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 16px;
  margin-inline: calc(var(--pd-space-2) * -1);
  background-color: var(--pd-border);
}

/* 탭 줄 안의 진입 단추(복약안내문 설정). 탭이 아니라 단추인 것은,
   누르면 탭이 바뀌는 게 아니라 화면이 통째로 작업 레이아웃으로 바뀌기
   때문입니다. 오른쪽 끝에 붙어 탭과 섞이지 않게 합니다. */
.pd-subnav__cta {
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: auto;
}
/* 아이콘도 단추 크기를 따라 키웁니다. .pd-btn 의 기본은 16px 인데, 이 단추는
   줄에서 혼자 채워진 것이라 아이콘이 작으면 글자만 커 보입니다.
   (52px 줄 안에 40px 단추 — 위아래로 6px 씩 남습니다.) */
.pd-subnav__cta .pd-icon {
  width: var(--pd-icon);
  height: var(--pd-icon);
}

/*
   가운데 변형 — 내정보 띠.

   다른 갈래의 띠는 헤더의 1차 메뉴 글자에 왼쪽 끝을 맞춥니다(4-2절).
   "내정보"는 1차 메뉴가 아니라 헤더 오른쪽 끝 계정 영역에 있어서 맞출 곳이
   없습니다. 가운데에 둡니다.

   좁은 화면에서는 걸지 않습니다. 이 줄은 넘치면 가로로 스크롤되는데,
   가운데 정렬한 flex 줄은 넘칠 때 **앞쪽이 스크롤 밖으로 밀려나** 첫 항목에
   닿을 수 없게 됩니다.
*/
@media (min-width: 961px) {
  .submenu .pd-subnav--center { justify-content: center; }
}

/*
   세로 변형 — 헤더 계정 영역의 "내정보" 펼침 패널.

   같은 목록을 좁은 카드 안에 세워야 해서 탭이 아니라 목록으로 그립니다.
   목록이 다른 것이 아니라 **놓이는 자리**가 다를 뿐이라 같은 파샬을 씁니다.
*/
.pd-subnav--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  white-space: normal;
}
.pd-subnav--stack .pd-subnav__link {
  height: auto;
  padding: var(--pd-space-2) var(--pd-space-3);
  border-radius: var(--pd-radius-md);
  border-bottom: 0;
  font-size: 14px;
  font-weight: var(--pd-weight-regular);
  transition:
    background-color var(--pd-dur) var(--pd-ease),
    color var(--pd-dur) var(--pd-ease);
}
.pd-subnav--stack .pd-subnav__link:hover {
  background-color: var(--pd-surface-sunken);
  color: var(--pd-text);
  border-bottom-color: transparent;
}
.pd-subnav--stack .pd-subnav__link.is-current {
  color: var(--pd-accent);
  font-weight: var(--pd-weight-semibold);
  border-bottom-color: transparent;
}
.pd-subnav--stack .pd-subnav__sep {
  width: auto;
  height: 1px;
  margin: var(--pd-space-1) var(--pd-space-3);
}

.submenu .submenu-2d a i { font-size: 14px; font-weight: 400; }

/* 2차는 한 단계 작게 */
.submenu .submenu-2d {
  border-top: 1px solid var(--pd-border);
}
.submenu .submenu-2d a { height: 44px; font-size: 14px; }

/*
   3차 탭 (.submenu--tabs)

   2차 메뉴 줄에 얹혀 있던 3차 항목을 제목 아래로 내린 띠입니다.
   같은 줄에 겹쳐 있을 때는 "2차의 곁가지"였지만, 제목 아래로 오면
   **이 화면의 탭**입니다. 그래서 헤더에 붙지 않고(sticky 아님) 화면
   내용과 함께 흐릅니다. 위 경계선도 없앱니다 — 제목이 이미 경계입니다.

   ── 모양을 밑줄 탭에서 알약 칩으로 바꿨다 ──────────────────
   1차(헤더) · 2차(머무는 띠) · 3차가 **모두 같은 밑줄 탭**이었습니다.
   프로그램 설치 화면을 위에서 아래로 보면 민트 밑줄이 세 줄 이어지는데,
   층이 세 개라는 것이 아니라 같은 줄이 세 번 반복되는 것처럼 읽힙니다.

   3차만 칩으로 바꿉니다. 3차는 "이 화면의 어느 갈래를 보는가"라서
   위치 이동이 아니라 **고르기**에 가깝고, 칩은 그 뜻에 맞는 모양입니다.
   1·2차의 밑줄은 그대로 둡니다 — 그쪽은 실제로 다른 화면으로 갑니다.
*/
.submenu--tabs {
  position: static;
  top: auto;
  z-index: auto;
  /* 아래 hairline 을 없앱니다. 선이 남으면 칩으로 바꿔도 "세 번째 탭 줄"
     로 보입니다. 흰 띠와 본문 배경의 색 차이가 이미 경계입니다. */
  box-shadow: none;
  background-color: transparent;
}

.submenu--tabs .submenu-2d {
  border-top: 0;
  gap: var(--pd-space-2);
  /* 칩이 둥근 모양이라 위아래로 숨 쉴 자리가 필요합니다.
     이 줄은 overflow-y: hidden 이므로 여백을 안쪽에 둡니다. */
  padding-block: var(--pd-space-1) var(--pd-space-5);
}

.submenu--tabs .submenu-2d a {
  height: 34px;
  padding-inline: var(--pd-space-4);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background-color: var(--pd-surface);
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-secondary);
  transition:
    background-color var(--pd-dur) var(--pd-ease),
    border-color var(--pd-dur) var(--pd-ease),
    color var(--pd-dur) var(--pd-ease);
}
.submenu--tabs .submenu-2d a:hover {
  border-color: var(--pd-border-strong);
  background-color: var(--pd-surface);
  color: var(--pd-text);
}
.submenu--tabs .submenu-2d a:focus-visible {
  outline: none;
  box-shadow: var(--pd-focus-ring);
}
.submenu--tabs .submenu-2d a.current,
.submenu--tabs .submenu-2d a.current:hover {
  background-color: var(--pd-accent);
  border-color: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-weight: var(--pd-weight-semibold);
}

@media (max-width: 768px) {
  /* 좁은 화면에서는 항목 사이도 함께 좁힙니다(32 → 20). */
  .submenu .pd-subnav,
  .submenu .submenu-2d { gap: var(--pd-space-5); }
  .submenu .pd-subnav__link { height: 46px; font-size: 14px; }
  .submenu .submenu-2d a { height: 40px; font-size: 13px; }

  /* 3차 칩은 gap 을 줄이지 않습니다 — 칩끼리 붙으면 한 덩어리로 보입니다. */
  .submenu--tabs .submenu-2d {
    gap: var(--pd-space-2);
    padding-block: var(--pd-space-1) var(--pd-space-4);
  }
  .submenu--tabs .submenu-2d a { height: 32px; font-size: 13px; padding-inline: var(--pd-space-3); }
}

/* =========================================================
   5. 푸터
   ========================================================= */

.pd-footer {
  margin-top: var(--pd-space-16);
  padding-block: var(--pd-space-10);
  background-color: #ffffff;
  border-top: 1px solid var(--pd-border);
  color: var(--pd-text-muted);
}

.pd-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pd-space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--pd-space-10);
  align-items: start;
}

.pd-footer__logo { display: block; line-height: 0; }
.pd-footer__logo img { display: block; height: 50px; width: auto; }

.pd-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2) var(--pd-space-5);
  margin-bottom: var(--pd-space-4);
}
.pd-footer__menu a {
  font-size: 14px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  text-decoration: none;
}
.pd-footer__menu a:hover { color: var(--pd-text); text-decoration: underline; }
.pd-footer__menu a:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-sm); }

/* 사업자 정보. 예전에는 span 사이에 세로선을 그렸는데, 줄이 바뀌면
   선이 줄 끝에 남았습니다. flex 로 감싸고 구분선을 항목 앞에 둡니다. */
.pd-footer__company {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--pd-space-3);
  margin-bottom: var(--pd-space-2);
}
.pd-footer__company span {
  position: relative;
  font-size: 12px;
  color: var(--pd-text-muted);
  word-break: keep-all;
  padding: 0;
  border: none;
}
.pd-footer__company span + span::before {
  content: "";
  position: absolute;
  left: calc(var(--pd-space-3) / -2);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background-color: var(--pd-border);
}
.pd-footer__company a { color: var(--pd-text-secondary); text-decoration: underline; }

.pd-footer__copyright { font-size: 12px; color: var(--pd-text-placeholder); }

.pd-footer__contact {
  padding-inline-start: var(--pd-space-8);
  border-inline-start: 1px solid var(--pd-border);
}
.pd-footer__contact-title {
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  margin-bottom: var(--pd-space-1);
}
.pd-footer__contact-num {
  display: block;
  font-size: 22px;
  font-weight: var(--pd-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pd-text);
  text-decoration: none;
}
.pd-footer__contact-num:hover { color: var(--pd-accent); }
.pd-footer__contact p { font-size: 13px; color: var(--pd-text-muted); margin-top: 2px; }

@media (max-width: 960px) {
  .pd-footer { margin-top: var(--pd-space-10); padding-block: var(--pd-space-8); }
  .pd-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pd-space-6);
    padding-inline: var(--pd-space-4);
  }
  .pd-footer__logo { display: none; }
  .pd-footer__contact {
    order: -1;
    padding-inline-start: 0;
    border-inline-start: none;
  }
  .pd-footer__contact-num { font-size: 20px; }
}

/* =========================================================
   6. 푸터를 화면 아래로 밀기

   내용이 짧은 화면(약사 어드바이스 목록, 계정 안내 화면 등)에서 푸터가
   화면 중간에 떠 있고 그 아래로 400px 넘게 빈 바닥이 남았습니다. 페이지가
   덜 그려진 것처럼 보입니다.

   common.css 에는 .wrap 에 min-height: 100% 가 있었지만 주석 처리된
   상태였습니다. 높이를 100% 로 주려면 html, body 까지 높이를 물려야 해서
   그때는 손대기 어려웠을 것입니다. 이제 dvh 를 쓸 수 있습니다.
   (dvh 는 모바일에서 주소창이 접힐 때 vh 가 튀는 문제도 함께 없앱니다)

   .wrap 의 자식은 호환성 알림 · 헤더 · 알림 배너 · main · 푸터입니다.
   헤더는 sticky, 알림 배너는 fixed 라 둘 다 flex 배치에 영향을 받지
   않습니다. 나머지는 세로로 쌓이던 그대로입니다.
   ========================================================= */

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
/* 남는 높이는 본문이 받는다. 줄어들지는 않게(1 0 auto) 해서 내용이 긴
   화면의 스크롤 동작은 그대로 둔다. */
.wrap > main { flex: 1 0 auto; }

/* =========================================================
   7. 본문 여백

   예전에는 헤더가 떠 있어서 .no-subvisual main > .container 가
   padding-top: 100px 로 자리를 비웠습니다. 헤더가 흐름 안으로
   들어왔으므로 그 보정이 필요 없습니다. 제목 줄이 없는 화면
   (계정·약관 등)만 위 여백을 스스로 갖습니다.
   ========================================================= */

main > .container { padding-block: var(--pd-space-10); }

/* =========================================================
   7-1. 가운데로 모으는 화면 (body 에 pd-center)

   본문이 컨테이너(1440)보다 좁은 화면들입니다. 왼쪽에 붙여 두면 오른쪽이
   통째로 비어 화면이 한쪽으로 쏠려 보입니다.

   제목 줄도 **같이** 옮깁니다. 본문만 가운데로 가고 제목이 왼쪽 끝에 남으면
   둘이 다른 화면처럼 읽힙니다. 그래서 폭을 변수 하나로 두고 본문과 제목이
   같은 값을 씁니다.

   3차 탭이 있는 화면에는 걸지 않습니다. 탭으로 오가는 옆 화면들과 폭이
   다르면 탭을 누를 때마다 제목과 탭 줄이 좌우로 흔들립니다. 필독 프로그램
   설정을 1280 으로 줄여 봤다가 그 이유로 되돌렸습니다.

   되돌리려면 뷰의 ViewData["BodyClass"] 한 줄만 지우면 됩니다.
   ========================================================= */

body.pd-center { --pd-page-w: var(--pd-read-w); }

body.pd-center main > .container > .pd-root {
  max-width: var(--pd-page-w);
  margin-inline: auto;
}

/* 제목 줄은 컨테이너가 아니라 본문 칸의 왼쪽 끝에 맞춥니다. 셈은
   .container 의 것과 같습니다 — 1440 대신 본문 폭을 넣은 것뿐입니다. */
body.pd-center .subvisual {
  padding-inline: max(var(--pd-space-5), calc((100% - var(--pd-page-w)) / 2));
}

/* 제목 줄과 2차 메뉴가 이미 위 여백을 만든 화면에서는 본문이 한 번 더
   40px 를 벌리지 않게 한다. 셋은 형제로 나란히 놓인다. */
.submenu + .container,
.subvisual + .container { padding-top: var(--pd-space-6); }

/* 제목 줄을 감춘 화면(.subvisual--quiet)에서는 위의 24px 이 2차 메뉴와 본문
   사이의 전부가 됩니다. 인접 선택자는 감춰진 형제도 세기 때문에 그대로
   걸립니다. 제목이 없어진 만큼 원래 여백으로 되돌립니다.
   (인접이 아니라 :has 로 잡는 것은, 그 사이에 2차 메뉴가 끼어 있어서
   .subvisual--quiet + .container 로는 닿지 않기 때문입니다.) */
main:has(> .subvisual--quiet) > .container { padding-top: var(--pd-space-10); }

@media (max-width: 768px) {
  main > .container { padding-block: var(--pd-space-8); }
  .submenu + .container,
  .subvisual + .container { padding-top: var(--pd-space-5); }
  main:has(> .subvisual--quiet) > .container { padding-top: var(--pd-space-8); }
}


/* =========================================================
   떠 있는 알림 카드 (_Layout.cshtml `.pd-prior`)

   아직 하지 않은 준비(약국정보 등록 · 프로그램 설치)를 알립니다. 로그인한
   사람에게만, RestUserCheck 응답으로 켜집니다.

   옛 규칙(.prior / .prior-warning, style.css·admin.css)은 코랄 판에 흰 글자
   였습니다. 코랄은 이 시스템에서 전환 유도(CTA) 색이라 "지금 눌러야 하는 것"
   으로 읽히는데, 이 카드는 하던 일을 멈출 만큼 급하지 않습니다. 흰 판에
   경고색 아이콘으로 낮춥니다. 마크업 이름을 바꿨으므로 옛 규칙은 더 이상
   어디에도 걸리지 않습니다.
   ========================================================= */

.pd-prior {
  position: fixed;
  z-index: 30;
  inset-block-end: var(--pd-space-6);
  inset-inline-end: var(--pd-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  /* 본문 위에 떠 있지만 본문을 가리는 폭이 되면 안 됩니다. */
  max-width: 340px;
}

.pd-prior__item {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  padding: var(--pd-space-4);
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-lg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--pd-dur) var(--pd-ease),
    box-shadow var(--pd-dur) var(--pd-ease),
    transform var(--pd-dur) var(--pd-ease);
}
/* 시스템의 가장 큰 그림자가 --pd-shadow-lg 이고 이 카드가 이미 그것을 씁니다.
   가리켰을 때는 그림자를 더 키우는 대신 살짝 들어 올려 반응을 알립니다. */
.pd-prior__item:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--pd-border-hover);
  transform: translateY(-2px);
}
.pd-prior__item:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

/* 아이콘은 경고색 판에 올립니다. 판이 흰색이라 아이콘만으로도 눈이 갑니다. */
.pd-prior__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pd-radius-md);
  background: var(--pd-warning-subtle);
  color: var(--pd-warning-on-subtle);
}
.pd-prior__icon .pd-icon { width: var(--pd-icon); height: var(--pd-icon); }

.pd-prior__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-prior__title {
  font-size: 14px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text);
  word-break: keep-all;
}
.pd-prior__desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-text-muted);
  word-break: keep-all;
}

.pd-prior__go {
  flex: 0 0 auto;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
}

/* 좁은 화면에서는 설명을 접고 한 줄로 만듭니다. 카드 두 장이 세로로 서면
   화면 아래 절반을 먹습니다. 오른쪽 끝 여백도 한 급 줄입니다. */
@media (max-width: 768px) {
  .pd-prior {
    inset-block-end: var(--pd-space-4);
    inset-inline-end: var(--pd-space-4);
    inset-inline-start: var(--pd-space-4);
    max-width: none;
    align-items: flex-end;
  }
  .pd-prior__item { padding: var(--pd-space-3); gap: var(--pd-space-2); }
  .pd-prior__desc { display: none; }
  .pd-prior__icon { width: 30px; height: 30px; }
  .pd-prior__title { font-size: 13px; }
}