/* =========================================================
공용 레이아웃 — 헤더(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: 1280px;
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%;
/* 좌우 여백을 변수로 둡니다. 현재 메뉴 밑줄과 Beta 배지가 글자 끝을 이 값으로
찾아서, 좁은 폭에서 여백이 줄면 셋이 함께 움직여야 합니다. */
--gnb-link-px: var(--pd-space-3);
padding-inline: var(--gnb-link-px);
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(--gnb-link-px);
right: var(--gnb-link-px);
bottom: -1px;
height: 2px;
background-color: var(--pd-accent);
}
.pd-gnb__link .pd-icon { width: var(--pd-icon-sm); height: var(--pd-icon-sm); }
/* Beta 배지는 글자 오른쪽 위에 띄웁니다(PILLDOC-2451).
글자 옆에 줄지어 두면 배지 폭만큼 메뉴 단추가 넓어집니다. 입고관리가 들어와
1차 메뉴가 일곱 개가 되면서 그 폭을 낼 자리가 없어, 흐름에서 빼고 오른쪽
여백 위에 얹습니다. 단추 폭은 글자 길이만큼이 됩니다. 서랍(좁은 화면)에서는
한 줄을 통째로 쓰므로 아래 미디어쿼리에서 다시 글자 옆에 둡니다. */
.pd-gnb__badge {
position: absolute;
top: calc(50% - 19px);
left: calc(100% - var(--gnb-link-px) - 4px);
font-size: 10px;
font-weight: var(--pd-weight-bold);
font-style: italic;
line-height: 1;
color: var(--pd-cta);
letter-spacing: 0;
pointer-events: none;
}
/* ---- 하위 메뉴 ----
예전에는 화면 폭을 가로지르는 어두운 판이 열렸고, 높이를
menu-count7 { height: 308px } 처럼 항목 수마다 픽셀로 박아 뒀습니다.
항목을 하나 늘리면 잘렸습니다.
그 뒤 한동안 떠 있는 카드(세로 목록)였는데, 다시 **헤더 아래에 붙는
가로 띠**로 돌립니다. 이유는 서브페이지와 짝을 맞추기 위해서입니다 —
서브페이지는 헤더 바로 아래에 같은 모양의 2차 메뉴(.submenu)를 늘 펼쳐
두고 있습니다. hover 로 열리는 것과 머물러 있는 것이 다른 모양·다른
자리면 같은 메뉴로 읽히지 않습니다.
그래서 띠는 **항목이 아니라 헤더**를 기준으로 놓습니다. 어느 메뉴를
가리켜도 같은 자리에서 열리고, 왼쪽 끝이 서브페이지의 2차 메뉴와
맞습니다(.container 와 같은 1280 + 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% - 1280px) / 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% - 1280px) / 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;
}
/* 가운데로 모으는 띠(고객센터·내정보). 맞출 1차 메뉴 글자가 없어서
layout.js 가 왼쪽 여백을 재지 않고, 띠는 1280 컨테이너 가운데에 놓입니다.
좁은 화면(서랍)에서는 세로 목록이라 걸지 않습니다. */
@media (min-width: 961px) {
.pd-gnb__sub .pd-subnav--center { justify-content: center; }
}
/* 넓은 화면에서만 여는 삼각형. 좁은 화면에서는 서랍이 대신한다. */
.pd-gnb__caret {
display: none;
width: var(--pd-icon-sm);
height: var(--pd-icon-sm);
color: var(--pd-text-placeholder);
}
/* ---- 도구 줄 ----
고객센터 · 필독 에이전트 · 광고문의 · 원격지원. 서비스를 쓰다가 찾는 곳이라
1차 메뉴보다 한 급 작고 가볍게 둡니다(16 → 14px, 굵기 한 단계 아래). 같은
무게로 두면 서비스와 도구가 다시 한 줄로 섞여 읽힙니다.
항목·링크·하위 띠는 1차 메뉴와 같은 마크업(.pd-gnb__item)이라 여닫기,
현재 위치 밑줄, 서랍 모양을 그대로 물려받습니다. 여기서는 크기만 바꿉니다. */
.pd-gnb__tools {
order: 2;
flex: 0 0 auto;
display: flex;
align-items: center;
height: 100%;
}
.pd-gnb__tools .pd-gnb__link {
padding-inline: var(--pd-space-2);
font-size: 14px;
font-weight: var(--pd-weight-medium);
}
.pd-gnb__tools .pd-gnb__item.is-current > .pd-gnb__link::after {
left: var(--pd-space-2);
right: var(--pd-space-2);
}
/* 프로그램 설치 — 도구 줄에서 가장 먼저 보이는 자리입니다. 옅은 민트 바탕의 알약 모양에
내려받기 아이콘을 붙여 「설치하러 가는 곳」으로 읽히게 합니다. 채운 단추(주 단추)는
화면 본문의 할 일 몫이라 쓰지 않습니다. 원격지원(테두리)과 모양이 달라 둘이 섞이지 않습니다. */
.pd-gnb__tools .pd-gnb__install {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
margin-inline-end: var(--pd-space-2);
padding-inline: var(--pd-space-3);
border-radius: var(--pd-radius-pill);
background-color: var(--pd-accent-subtle);
color: var(--pd-accent-on-subtle);
font-size: 13px;
font-weight: var(--pd-weight-semibold);
white-space: nowrap;
text-decoration: none;
transition: background-color var(--pd-dur) var(--pd-ease);
}
.pd-gnb__tools .pd-gnb__install .pd-icon { width: 14px; height: 14px; }
.pd-gnb__tools .pd-gnb__install:hover { text-decoration: none; filter: brightness(0.96); }
.pd-gnb__tools .pd-gnb__install:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/* 알약 모양이라 현재 위치 밑줄 대신 테두리로 알립니다. */
.pd-gnb__tools .pd-gnb__item.is-current > .pd-gnb__install::after { display: none; }
.pd-gnb__tools .pd-gnb__item.is-current > .pd-gnb__install { box-shadow: inset 0 0 0 1px var(--pd-accent); }
/* ---- 계정 ---- */
/* 계정 영역은 로그아웃 POST 때문에 form 으로 한 겹 싸여 있습니다.
그 form 도 같은 줄로 세워야 안쪽 항목이 나란히 놓입니다. */
.pd-gnb__account,
.pd-gnb__account > form {
order: 3;
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);
}
/* 왼쪽 정렬은 오른쪽에 여유가 있을 때만 성립합니다. 1280px 화면에서는 200px 패널이 화면 끝을
6px 넘어, 닫혀 있어도 모든 로그인 화면에 가로 스크롤이 생겼습니다(2026-09-24 E2E 실측).
화면 끝에 닿는 폭에서만 오른쪽 정렬로 되돌립니다. 960px 이하는 서랍 안이라 static 입니다.
그 폭은 전화번호 칸(.pd-gnb__tels)이 빠지는 1400px 과 같습니다 — 번호 칸이 빠지면 계정이 맨 오른쪽
칸이 됩니다. 1299px 로 두었을 때 1300~1400px 에서 패널이 다시 화면 끝을 넘었습니다(2026-10-19 실측). */
@media (max-width: 1400px) {
.pd-gnb__menu-panel { left: auto; right: 0; }
}
.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 왼쪽에서 시작해 목록이 들쭉날쭉했습니다. 아이콘 자리만큼 들여씁니다.
(범위를 패널 안으로 좁혀, 이 목록이 다른 자리에 놓일 때는 건드리지 않습니다.
좁은 화면 서랍은 같은 패널을 쓰지만 안쪽 여백이 없어서 2절에서 이 값을
다시 잡습니다.) */
.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: 4;
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);
}
/* 고객센터 번호 옆 원격지원 — 서랍 전용(아래 좁은 화면 규칙). 넓은 화면에서는 도구 줄에 있습니다. */
.pd-gnb__tel-remote { display: none; }
/* 원격지원 — 채운 단추가 아니라 테두리 단추입니다.
한동안 민트로 채워 두었더니, 바로 아래 2차 메뉴의 [복약안내문 설정]과
같은 무게로 보였습니다. 둘은 하는 일이 다릅니다 — 이쪽은 막혔을 때 부르는
보조 통로(외부 원격지원 사이트)이고, 아래쪽이 이 화면에서 할 일입니다.
한 화면에 같은 세기의 단추가 둘이면 어느 것이 본줄기인지 알 수 없습니다.
같은 이유로 한 급 작습니다(34 → 30px, 13 → 12px).
도구 줄의 마지막 항목입니다(PILLDOC-2694). 링크(.pd-gnb__link)이기도 해서
도구 줄 글자 규칙보다 세게 걸어야 단추 모양이 남습니다. */
.pd-gnb__tools .pd-gnb__remote {
display: inline-flex;
gap: 4px;
margin-inline-start: var(--pd-space-2);
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__tools .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__tools .pd-gnb__remote:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/* 바깥 링크 아이콘은 글자(12px)와 같은 크기. 도구 줄 공통 크기(16px)면 글자보다 커 보였습니다. */
.pd-gnb__tools .pd-gnb__remote .pd-icon { width: 12px; height: 12px; }
/*
1차 메뉴의 「내정보」 줄은 좁은 화면 전용입니다.
넓은 화면에서는 같은 것이 헤더 오른쪽 계정 영역에 있습니다(이름에 가져다
대면 펼쳐지는 패널). 둘을 함께 두면 같은 메뉴가 한 화면에 두 번 나옵니다.
기본을 감춤으로 두고 서랍 절에서만 되살립니다 — 넓은 화면이 기본값이라
좁은 화면 전용 요소는 이렇게 두는 편이 안전합니다.
*/
.pd-gnb__item--profile { display: none; }
/* ---- 햄버거와 덮개 ---- */
.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 { --gnb-link-px: var(--pd-space-2); font-size: 15px; }
/*
도구 줄이 생기면서(PILLDOC-2694) 이 폭에서 서비스 메뉴와 도구 줄이 겹쳤습니다.
항목이 하나(필독 에이전트) 늘었기 때문입니다. 서랍으로 바뀌는 폭(960)은
그대로 두고, 빈자리부터 덜어냅니다 — 칸 사이 간격, 도구 줄 글자 옆 여백,
바깥 링크 아이콘 순서입니다. 아이콘을 빼도 새 창이라는 것은 낭독기 글자
「(새 창)」가 남아 알립니다.
*/
.pd-gnb__inner { gap: var(--pd-space-4); }
.pd-gnb__menus { gap: var(--pd-space-3); }
.pd-gnb__tools .pd-gnb__link { padding-inline: 6px; }
.pd-gnb__tools .pd-gnb__remote .pd-icon { display: none; }
/* 이름 길이는 회원마다 다릅니다. 긴 이름이 메뉴를 밀어 겹치지 않게 이 폭에서만
줄임표로 자릅니다. 전체 이름은 펼침 패널과 내정보 화면에 있습니다. */
.pd-gnb__name {
display: inline-block;
max-width: 7em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
}
@media (min-width: 961px) and (max-width: 1040px) {
/* 서랍 직전 폭. 위에서 덜어내고도 서비스와 도구가 12px 겹쳐 서비스 글자 옆
여백을 한 번 더 줄입니다(8 → 6px). */
.pd-gnb__nav .pd-gnb__link { --gnb-link-px: 6px; }
.pd-gnb__name { max-width: 6em; }
}
/* =========================================================
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 값 하나로 올라옵니다.
지금은 서랍이 헤더 아래에서 시작해(아래 top 참조) 단추와 겹칠 일이
없지만, 이 값은 그대로 둡니다 — 덮개(.pd-gnb__scrim)가 헤더까지 덮으므로
단추는 덮개보다 위에 있어야 눌립니다.
*/
.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);
}
/*
서랍은 화면 맨 위부터 그립니다. 닫는 X 자리는 계정 칸이 자기 위쪽 여백으로
비워 둡니다(아래 .pd-gnb__account).
여기까지 오는 데 두 번 돌아갔습니다. 처음에는 서랍 첫 칸이 계정 줄이라
닫는 X 가 이름 위에 겹쳐 앉았습니다. 그래서 서랍을 top: var(--pd-gnb-h) 로
내렸더니 위쪽이 뚫려 보였습니다 — 헤더의 아래 선이 서랍 위를 가로지르고
그림자가 거기 다시 얹혀 이음매가 생겼습니다. 다음에는 헤더 높이만큼을 흰
테두리로 뒀는데, 이번에는 그 흰 띠와 바로 아래 회색 계정 칸이 서로 다른
칸처럼 갈라져 보였습니다.
지금은 그 자리를 계정 칸에 넘겼습니다. 계정 칸이 회색 바탕째로 맨 위까지
올라오고 위쪽 여백으로 X 자리를 비우니, X 가 앉은 줄부터 마일리지까지가
한 덩어리로 읽힙니다.
*/
.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);
/* 그림자는 열렸을 때만 둡니다. 닫힌 서랍은 화면 오른쪽 밖에 붙어 있어서,
그림자가 있으면 번짐(34px)이 화면 안으로 비쳐 오른쪽 끝이 어둡게 보입니다. */
box-shadow: none;
transform: translateX(100%);
transition: transform var(--pd-dur-slow) var(--pd-ease), box-shadow var(--pd-dur-slow) var(--pd-ease);
}
/* 열린 상태 */
.pd-gnb.is-open .pd-gnb__menus { transform: translateX(0); box-shadow: var(--pd-shadow-lg); }
.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; }
/*
순서: 계정 칸 → 메인 메뉴 → 도구 줄 → 연락처
---- 계정 칸이 위에 붙어 있고, 그 아래가 스크롤된다 ----
계정 칸(이름·약국명·마일리지·로그아웃)은 지금 누구로 들어와 있는지를
말해 주는 자리라, 메뉴를 내리는 동안에도 자리를 지키는 편이 맞습니다.
position: sticky 로 스크롤 상자(.pd-gnb__menus)의 위쪽에 붙입니다. 메인
메뉴부터 연락처까지가 이 칸 **아래로** 지나갑니다.
sticky 는 **칸 단위**로 붙습니다 — 그래서 이 칸을 통째로 유지해야 합니다.
한동안 껍데기들을 display: contents 로 빼내 로그아웃만 메뉴 아래로 보냈는데,
그러면 붙일 칸 자체가 없어집니다. 로그아웃은 계정 정보와 함께 이 안에
둡니다 — 넓은 화면 펼침 패널의 순서(이름 → 약국명 → 마일리지 → 로그아웃)와
같아져 두 화면이 같은 이야기를 합니다.
이 칸의 회색 바탕이 맨 위까지 올라가므로 X 가 앉은 줄도 이 칸의 일부로
보입니다. 스크롤된 메뉴가 이 칸 뒤로 지나가려면 바탕이 불투명해야 하고
(가라앉은 회색이라 이미 불투명합니다) 겹칠 때 위로 와야 합니다(z-index).
위쪽 여백은 0 입니다 — X 자리를 비워 두지 않습니다.
한동안 헤더 높이만큼(60px) 위를 비워 두고 그 아래에 이름을 놓았습니다.
그런데 칸 전체가 한 회색이 되고 나니, 그 60px 이 **아무것도 없는 여백**으로
보였습니다(회색이라 칸이 갈라져 보이지도 않으니 더 그렇습니다). 그래서
이름을 그 띠에 함께 앉힙니다 — X 는 오른쪽 끝, 이름은 왼쪽입니다. 서랍
제목 줄에 닫기 단추가 붙어 있는 흔한 모양이고, 60px 을 통째로 아낍니다.
*/
.pd-gnb__account {
order: 1;
position: sticky;
top: 0;
z-index: 1;
flex: 0 0 auto;
flex-direction: column;
align-items: stretch;
padding-inline: var(--pd-space-5);
padding-block: 0 var(--pd-space-2);
background-color: var(--pd-surface-sunken);
border-bottom: 1px solid var(--pd-border);
}
/*
계정을 싸고 있는 form 도 함께 세로로 세웁니다.
넓은 화면에서는 이 form 이 계정 항목을 한 줄로 세우는 가로 상자입니다
(위 .pd-gnb__account > form). 서랍에서 계정 칸만 세로로 바꿨더니 form 은
여전히 가로 상자여서, 그 안의 내정보 덩어리가 **내용 폭까지 쪼그라들었습니다**
— 서랍 안쪽 260px 중 153px 만 쓰고 오른쪽 100px 이 비었습니다.
*/
.pd-gnb__account > form { flex-direction: column; align-items: stretch; }
/*
이름 줄이 닫는 X 와 같은 줄에 앉습니다.
오른쪽 여백은 X 자리입니다 — 단추 폭 40px(.pd-gnb__toggle)에 숨 쉴 자리를
더한 값입니다. 이름이 길어 줄이 바뀌어도 이 여백은 모든 줄에 걸리므로
글자가 X 밑으로 파고들지 않습니다.
이름은 이 칸에서 가장 중요한 정보라 한 급 키웁니다(14 → 16px). 반대로
약국명은 "지금 어느 약국인지" 알려 주는 보조 정보라 한 급 낮춥니다.
*/
.pd-gnb__user {
justify-content: flex-start;
flex-wrap: wrap;
min-height: var(--pd-gnb-h);
padding-block: 0;
padding-inline: 0 calc(40px + var(--pd-space-4));
}
.pd-gnb__name { font-size: 16px; }
.pd-gnb__user-caret { display: none; }
/*
로그인 전에는 이 줄이 계정 칸의 유일한 내용입니다. 그래서 이름 줄과 똑같이
X 자리를 비우고 같은 높이를 가져야 합니다 — 안 그러면 계정 칸이 이 줄
높이(31px)로 끝나 버리고, X(18~58)가 칸을 삐져나와 첫 메뉴 줄과 겹칩니다.
*/
.pd-gnb__auth {
flex-wrap: wrap;
gap: var(--pd-space-2);
align-items: center;
min-height: var(--pd-gnb-h);
padding-inline: 0 calc(40px + var(--pd-space-4));
}
/* 손가락 목표 44px. 글자 줄 높이(30px)만으로는 서랍의 다른 줄(52~56px)보다
낮아 빗맞히기 쉬웠습니다. 아래 전화번호도 같은 까닭입니다. */
.pd-gnb__auth-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 0;
}
.pd-gnb__tel-num {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/*
서랍에서는 펼치는 것이 아니라 그냥 놓입니다.
예전에는 이 패널을 통째로 감췄습니다 — 같은 항목이 내정보 화면 안의
2차 메뉴에 다시 나오고, 로그아웃은 패널 **밖에** 따로 있었기 때문입니다.
이제 로그아웃과 마일리지가 이 안으로 들어왔으므로 감추면 로그아웃으로
가는 길이 사라집니다. 그래서 패널은 살리고, 안의 목록만 아래에서
따로 감춥니다.
넓은 화면 패널과 손잡이를 잇던 다리(::before)는 여기서 필요 없습니다 —
가져다 대서 여는 것이 아니라 그냥 놓여 있습니다.
*/
.pd-gnb__menu-panel {
position: static;
min-width: 0;
margin: 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; }
/* 아래쪽 여백은 약국명과 마일리지를 갈라 놓기 위한 것입니다. 둘은 성격이
다릅니다 — 위는 「어느 약국으로 들어와 있나」, 아래는 누르면 마일리지
화면으로 가는 줄입니다. 붙여 두면 두 줄이 한 덩어리로 읽힙니다.
(마일리지 쪽 위 여백과 합쳐 글자 사이가 12 → 26px 로 벌어집니다.) */
.pd-gnb__menu-pharm {
padding-inline: 0;
padding-block: 0 var(--pd-space-3);
font-size: 12px;
}
/*
마일리지와 로그아웃 사이에 선이 **하나만** 있어야 합니다.
둘 다 선을 갖고 있었습니다 — 마일리지는 아래 선, 로그아웃은 위 선. 넓은
화면 패널에서는 그 사이에 목록 7개가 들어가서 각자 제 칸을 나누는 선이지만,
서랍에서는 목록을 감추므로 두 선이 8px 간격으로 나란히 놓여 이중선으로
보였습니다. 마일리지 쪽을 지웁니다 — 로그아웃의 위 선이 "여기부터 하는 일이
다르다"를 말하는 쪽이라 그것을 남깁니다.
좌우 여백을 0 으로 되돌릴 때 **음수 margin 도 함께** 되돌립니다. 이 줄은
넓은 화면에서 선을 패널 안쪽 여백까지 늘리려고 좌우로 8px 씩 빼내
놓았습니다 — 되돌리지 않으면 이 줄만 위아래보다 넓어집니다.
*/
.pd-gnb__mileage {
margin: 0;
padding-inline: 0;
padding-block: var(--pd-space-2);
border-bottom: none;
}
/*
펼침 패널 안의 목록은 여기서 감춥니다 — 대신 1차 메뉴에 「내정보」 줄이
있습니다(_Header.cshtml).
좁은 화면에서 이 목록으로 가는 길이 없었던 것이 이 작업의 시작이었는데,
길을 내는 방법이 둘이었습니다. 이 패널을 그냥 펼쳐 놓는 것과, 1차 메뉴에
여닫는 줄을 두는 것. 뒤쪽을 골랐습니다 — 서랍은 이미 복약안내 서비스·
고객센터를 꺾쇠로 여닫고 있어서, 내정보만 늘 펼쳐 두면 같은 서랍 안에서
같은 성격의 메뉴가 서로 다르게 동작합니다. 게다가 항목 7개를 늘 펼쳐 두면
서랍이 첫 화면을 넘겨(내용 837 / 창 784) 연락처·원격지원이 밀려납니다.
이 목록 자체는 감추지만 로그아웃과 계정 정보는 남습니다 — 그 둘은 다른
어디에도 없습니다.
*/
.pd-gnb__menu-panel .pd-subnav--stack { display: none; }
/* 로그아웃은 자주 누르는 것이 아니라 가끔 찾는 것이라, 계정 정보보다 한 급
작게 둡니다(14 → 13px, 위아래 여백 12 → 8px). 위 선만 남기고 그 위의
margin 도 걷어내 마일리지 바로 아래에 붙입니다. */
.pd-gnb__menu-logout {
width: 100%;
margin: 0;
padding-inline: 0;
padding-block: var(--pd-space-2);
font-size: 13px;
}
/* 서비스 목록이 남는 높이를 먹지 않습니다. 먹으면 바로 아래 도구 줄이 서랍
맨 밑으로 떨어져 사이가 텅 빕니다. 남는 높이는 연락처 위(margin-top: auto)로
보냅니다 — 연락처는 예전처럼 서랍 바닥에 붙습니다. */
.pd-gnb__nav {
order: 2;
flex: 0 0 auto;
flex-direction: column;
align-items: stretch;
gap: 0;
height: auto;
/* 아래 여백은 두지 않습니다 — 마지막 서비스 줄(약학정보)과 도구 줄 윗선 사이가 다른 줄 사이보다
8px 넓어 보였습니다. 마지막 줄은 아랫선이 없어 도구 줄 윗선이 그 줄의 아랫선 노릇을 합니다. */
padding: var(--pd-space-2) 0 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__item--profile). 위 .pd-gnb__item 규칙과 클래스 수가 같아
순서만으로도 이기지만, 순서에 기대지 않고 여기 적어 둡니다. */
.pd-gnb__item--profile { display: block; }
.pd-gnb__link {
height: auto;
padding: var(--pd-space-4) var(--pd-space-5);
font-size: 15px;
color: var(--pd-text);
}
.pd-gnb__badge {
position: static;
margin-left: 2px;
vertical-align: super;
}
.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;
}
.pd-gnb__caret:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/*
도는 것은 **삼각형뿐**입니다. 단추째로 돌리지 않습니다.
예전에는 단추(.pd-gnb__caret)에 transform: rotate(180deg) 를 걸었습니다.
그런데 이 단추는 눌린 뒤 초점 테두리(--pd-focus-ring, 민트색 3px)를 갖고
있어서, 단추가 도는 동안 **그 네모난 테두리가 함께 빙 돌았습니다.**
56×52 짜리 사각형이 화면에서 회전하니 눈에 크게 걸립니다.
테두리를 지우는 대신 도는 대상을 좁혔습니다 — 초점 테두리는 키보드로
쓰는 사람에게 지금 어디에 있는지 알려 주는 표시라 없앨 것이 아닙니다.
단추는 제자리에 있고 안의 삼각형만 돕니다.
*/
.pd-gnb__caret .pd-icon { transition: transform var(--pd-dur) var(--pd-ease); }
.pd-gnb__item.is-open > .pd-gnb__caret .pd-icon { 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;
}
/* 손가락으로 누를 자리입니다. 8px 여백 + 14px 글자로는 한 줄이 37px 밖에
안 돼서 눌러야 할 곳을 빗맞히기 쉬웠습니다. 여백을 12px, 글자를 15px 로
올리고 최소 높이를 못박습니다 — 손가락 목표는 44px 로 봅니다. 여백만
키우면 글꼴의 줄 높이에 따라 42px 처럼 몇 px 모자라게 나옵니다. 글자
크기는 바로 위 1차 메뉴(.pd-gnb__link)와 같아지고, 굵기로 층을 구분합니다. */
.pd-gnb__sub .pd-subnav__link {
height: auto;
min-height: 44px;
padding: var(--pd-space-3) var(--pd-space-5);
font-size: 15px;
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);
}
/*
진입 단추(복약안내문 설정)는 목록의 **왼쪽 끝**에 맞춥니다.
넓은 화면에서 이 단추는 가로 띠의 오른쪽 끝에 떨어져 있어야 해서
margin-inline-start: auto 로 밀어 놓았습니다(.pd-subnav__cta). 그런데
서랍에서는 그 띠가 세로 목록이라, 같은 규칙이 단추를 **오른쪽 벽에**
붙여 버립니다 — 위의 다른 항목들은 다 왼쪽에서 시작하는데 이것만 혼자
오른쪽에 가 있었습니다. 밀어내기를 걷어내고 항목들과 같은 선에 세웁니다.
*/
.pd-gnb__sub .pd-subnav__cta {
align-self: flex-start;
/* 위쪽 여백은 이 단추가 목록의 한 줄이 아니라는 표시입니다 — 나머지는
화면을 옮기는 링크고 이것만 누르면 작업 레이아웃으로 통째로 바뀝니다.
바로 붙여 두면 목록의 마지막 항목처럼 읽힙니다. */
margin-block: var(--pd-space-3) 0;
margin-inline: var(--pd-space-5) 0;
/* 같은 목록 안의 다른 줄과 같은 손가락 목표(44px). 디자인 시스템 단추의
기본 높이는 40px 이라 여기서만 올립니다. */
min-height: 44px;
}
/*
도구 줄은 서비스 목록 아래에 같은 모양의 줄로 이어집니다.
위 선 하나로 「여기부터는 서비스가 아니다」를 가릅니다. 줄 모양·여닫기는
.pd-gnb__item 규칙을 그대로 받고, 넓은 화면에서 작게 줄였던 글자만 서비스
줄과 같은 크기로 되돌립니다 — 손가락으로 누를 자리라 크기를 낮추지 않습니다.
*/
.pd-gnb__tools {
order: 3;
/* 서랍의 남는 높이를 받습니다 — 설치 줄을 연락처 윗선 바로 위에 붙이려고(아래 --install). */
flex: 1 0 auto;
flex-direction: column;
align-items: stretch;
height: auto;
/* 위 여백 없이 윗선에 바로 붙입니다 — 서비스 줄도 여백 없이 줄과 선이 이어져, 8px 를 두면 고객센터
줄만 떠 보였습니다(2026-10-20 검토). 아래 여백은 설치 단추의 몫입니다. */
padding-block: 0 var(--pd-space-2);
border-top: 1px solid var(--pd-border);
}
.pd-gnb__tools .pd-gnb__link {
padding: var(--pd-space-4) var(--pd-space-5);
font-size: 15px;
font-weight: var(--pd-weight-semibold);
}
/* 고객센터 줄은 서비스 줄과 같은 아랫선을 둡니다 — 같은 높이 · 같은 선이어야 같은 종류의 줄로
읽힙니다. 설치 줄은 단추라 선을 두지 않습니다(아래는 연락처 윗선이 가릅니다). */
.pd-gnb__tools .pd-gnb__item--install { border-bottom: none; }
/* 원격지원은 서랍에서 고객센터 번호 옆으로 갑니다(.pd-gnb__tel-remote · _Header 주석). */
.pd-gnb__tools .pd-gnb__item--remote { display: none; }
/* 프로그램 설치 — 도구 줄 맨 아래, 연락처 윗선 바로 위. 넓은 화면의 알약(옅은 민트 · 내려받기
아이콘)을 폭 가득 늘려 서랍에서 가장 먼저 눈에 들어오게 합니다. 손가락 목표는 48px. */
/* 도구 줄이 남는 높이를 받으므로 설치 줄은 그 맨 아래(margin-top: auto)에 붙습니다. 연락처가 서랍
바닥에 붙어 있어(.pd-gnb__contact margin-top: auto) 그냥 두면 둘 사이가 화면 반만큼 벌어졌습니다. */
.pd-gnb__tools .pd-gnb__item--install {
order: 1;
margin-top: auto;
padding: var(--pd-space-2) var(--pd-space-5);
}
.pd-gnb__tools .pd-gnb__install {
display: flex;
justify-content: center;
gap: var(--pd-space-2);
width: 100%;
height: 48px;
margin: 0;
padding: 0 var(--pd-space-4);
font-size: 15px;
}
.pd-gnb__tools .pd-gnb__install .pd-icon { width: 18px; height: 18px; }
/* 고객센터 번호 옆 원격지원 — 넓은 화면 도구 줄의 테두리 단추와 같은 모양, 손가락 목표 44px. */
.pd-gnb__tel-remote {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
margin-left: auto;
padding-inline: var(--pd-space-4);
border: 1px solid var(--pd-border-strong);
border-radius: var(--pd-radius-md);
color: var(--pd-text-secondary);
font-size: 14px;
font-weight: var(--pd-weight-semibold);
text-decoration: none;
}
.pd-gnb__tel-remote:hover { background-color: var(--pd-surface-sunken); color: var(--pd-text); text-decoration: none; }
.pd-gnb__tel-remote:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-gnb__tel-remote .pd-icon { width: 14px; height: 14px; }
.pd-gnb__contact {
order: 4;
margin-top: auto;
flex-direction: column;
align-items: stretch;
gap: var(--pd-space-3);
padding: var(--pd-space-5);
border-top: 1px solid var(--pd-border);
}
}
/* =========================================================
3. 페이지 머리 (.subvisual)
87개 화면이 상위
제목
모양으로 들고 있습니다. 마크업은 그대로 두고 배경 사진과 200px
높이를 걷어냈습니다.
========================================================= */
/*
제목 줄과 2차 메뉴는 헤더와 같은 흰 판 위에 놓아 한 덩어리로 읽히게
합니다. 그래서 밴드는 화면 폭을 다 쓰고, 글자만 본문 컨테이너(1280)에
맞춰 안쪽 여백으로 밀어 넣습니다. 마크업에 감쌀 칸이 없어서
(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% - 1280px) / 2 + var(--pd-space-5)));
text-align: start;
/* 배경을 두지 않습니다 — 페이지 배경이 그대로 비칩니다.
한동안 헤더·2차 메뉴와 같은 흰 판을 깔아 셋을 한 덩어리로 보이게 했는데,
그러면 **머물러 있는 것**(헤더·메뉴)과 **화면마다 바뀌는 것**(제목)이
같은 판 위에 놓여 경계가 사라집니다. 흰 판은 위의 두 줄까지입니다. */
height: auto;
}
/*
감추는 제목 줄 — 두 가지입니다
같은 이름이 두 번 나오는 화면을 감추는데, **문서에서도 지울 수 있는지**가
갈립니다. 어느 쪽인지는 "본문이 제목을 갖고 있는가"로 정합니다.
① --quiet : 아예 지운다 (내정보 7 · 상품구매 4 · 마일리지 2 = 13개)
이 화면들은 본문이 **이미 제목을 갖고 있습니다**(`비밀번호
`
같은 줄). 밴드까지 두면 같은 이름이 위아래로 두 번 나오고, 낭독기도 두 번
읽습니다. 그래서 화면에서만 감추는 것(sr-only)이 아니라 아예 지웁니다 —
문서의 h1 은 본문 쪽이 갖고 있습니다.
② --menu : 화면에서만 감추고 문서에는 남긴다 (13개)
2차·3차 메뉴 띠에 그 이름이 이미 켜져 있어 화면에서는 군더더기입니다.
그런데 이 화면들은 **본문에 제목이 없습니다** — 밴드가 유일한 제목입니다.
여기에 --quiet 를 쓰면 문서에 h1 이 하나도 남지 않아, 검색엔진과 낭독기가
화면 이름을 잃습니다. 눈에만 안 보이게 합니다.
.pd-sr-only(base.css) 와 같은 방식이지만 유틸리티를 겹쳐 붙이지 않습니다 —
.subvisual 의 padding 이 뒤에 실려 그 클래스의 padding: 0 을 덮기 때문입니다.
두 경우 모두 마크업은 남겨 둡니다. 되돌리려면 뷰에서 클래스 하나만 뺍니다.
*/
.subvisual--quiet { display: none; }
.subvisual--menu {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* 2차 메뉴가 좁은 컨테이너(.container-sm)를 쓰는 8개 화면에서는 제목도 같이
좁힌다. :has() 를 못 읽는 브라우저에서는 제목이 어긋날 뿐 깨지지 않는다.
지금은 두 컨테이너 폭이 같아져(둘 다 1280) 이 규칙이 옮기는 것이 없다.
.container-sm 을 다시 좁히면 되살아난다. 클래스 자체를 걷어내는 정리는
뷰 8개를 함께 고쳐야 해서 후속으로 남긴다. */
.subvisual:has(+ .submenu > .container-sm) {
padding-inline: max(var(--pd-space-5), calc((100% - 1280px) / 2 + var(--pd-space-5)));
}
/* 상위(섹션) 이름 — 작게, 흐리게
혼자 있는 h1 을 섹션 이름으로 보는 이유는 아래 "왜 h1 하나뿐일 때 작게
두는가"에 적었습니다. --page 는 그 짐작이 틀린 경우라 빼 둡니다. */
.subvisual h2,
.subvisual:not(.subvisual--page) > 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,
.subvisual--page > 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;
}
/*
--page : 섹션 줄 없이 제목 한 줄만
메뉴가 이미 영역을 말해 주는데 그 영역 이름을 제목 위에 또 적으면
같은 말이 세 번 나옵니다(1차 메뉴 · 섹션 줄 · 2차 메뉴). 섹션 줄을
지우고 제목만 남깁니다.
그러면서 화면 이름은 **메뉴에 없는 것으로 새로 짓습니다.** 예전에는
"문의 게시판 · 등록" 처럼 메뉴 항목 이름에 상태를 덧붙였는데, 앞부분이
탭과 겹쳐 읽는 사람이 두 번 훑어야 했습니다. "문의 등록하기" 처럼
이 화면에서만 쓰는 이름을 뷰가 직접 적습니다.
부르는 법
문의 등록하기
섹션 줄이 없어도 제목이 큰 스타일을 유지하는 것이 이 표시의 전부입니다.
위의 :not() 이 그것을 맡습니다.
*/
/*
왜 h1 하나뿐일 때 작게 두는가
87개 화면 중 45개는 밴드에 고객센터
처럼 **섹션 이름**만 넣고,
실제 화면 제목("공지사항")은 본문이 다시 그립니다. 사진 배경일 때는
장식으로 읽혀서 문제가 없었지만, 이제 둘 다 글자라 큰 쪽이 섹션이면
위계가 뒤집힙니다. 그래서 혼자 있는 h1 은 상위로 취급합니다.
나머지 12개는 내정보
마일리지
처럼 상위와 제목을 모두
갖고 있어 그대로 두 줄로 나옵니다. 각 영역을 이관할 때 앞의 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:not(.subvisual--page) > h1:first-child:last-child { font-size: 13px; }
.subvisual h2 + h1,
.subvisual--page > h1 { font-size: 22px; }
}
/* =========================================================
4. 2차 메뉴 (.submenu)
흰 판에 그림자를 얹고 사진 밴드 위로 -40px 끌어올리던 것을,
헤더 밑에 붙는 탭 줄로 바꿉니다. 모양은 디자인 시스템의 Tabs 와
같습니다(선 하나 + 현재 항목만 강조).
========================================================= */
/*
순서 — 2차 메뉴가 제목보다 **위**에 온다
마크업은 62개 화면이 다음에