--------------------------------------------------------- */
.pd-table-scroll {
max-height: var(--pd-table-h, 400px);
max-width: var(--pd-table-w, 100%);
overflow: auto;
border: 1px solid var(--pd-border);
border-radius: var(--pd-radius-lg);
background: var(--pd-surface);
/* sticky 셀이 둥근 모서리 밖으로 새지 않게 한다. */
position: relative;
}
.pd-table-scroll > .pd-table { border-collapse: separate; border-spacing: 0; }
.pd-table-scroll thead th {
position: sticky;
top: 0;
z-index: 2;
/* sticky 요소에는 border-bottom 이 스크롤 시 함께 붙지 않는 경우가 있어
box-shadow 로 경계선을 그린다. */
box-shadow: inset 0 -1px 0 var(--pd-border);
border-bottom: 0;
}
.pd-table-scroll [data-sticky-col] {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background: var(--pd-surface);
/* 고정 열과 스크롤되는 본문 사이 경계 */
box-shadow: inset -1px 0 0 var(--pd-border);
}
.pd-table-scroll thead [data-sticky-col] {
z-index: 3;
background: var(--pd-surface-sunken);
box-shadow: inset -1px 0 0 var(--pd-border), inset 0 -1px 0 var(--pd-border);
}
/* 고정 열은 hover 배경도 따라가야 한다. 안 그러면 행이 끊겨 보인다. */
.pd-table-scroll tbody tr:hover > [data-sticky-col] { background: var(--pd-surface-sunken); }
/* ---------------------------------------------------------
좁은 화면에서 열 감추기
숨길 열의 th 와 td 양쪽에 같은 클래스를 붙인다.
pd-col-hide-sm 640px 이하에서 숨김
pd-col-hide-md 768px 이하에서 숨김
pd-col-hide-lg 1024px 이하에서 숨김
숨긴 정보가 그 화면에서 정말 필요 없는지 먼저 판단한다.
필요하면 감추지 말고 아래의 리스트 변환을 쓴다.
리스트 변환(.pd-table--stack)과 같이 쓰면 카드에서는 되살아난다.
카드에는 자리가 있으니 좁은 화면에서 정보를 잃지 않는다는 뜻이다.
카드에서도 끝까지 감추려면 pd-col-drop-* 를 쓴다.
pd-col-drop-sm / -md / -lg 표에서도 카드에서도 숨김
--------------------------------------------------------- */
/* 표 안에서는 셀 선택자를 함께 적는다. 리스트 변환이 `tbody td`(0,1,2)로
display 를 걸기 때문에 클래스 하나(0,1,0)로는 감추기가 무효가 된다.
그 셀 선택자를 :not(.pd-table--stack) 으로 묶어 두는 것이 핵심이다.
이게 없으면 감추기(0,2,1)가 아래의 되살리기(0,2,0)를 명시도로 눌러서,
두 기능을 같이 쓰는 화면에서 열이 통째로 사라진다. 주문내역의 「옵션」이
그렇게 사라졌다(PILLDOC-2008). */
@media (max-width: 640px) {
.pd-col-hide-sm,
.pd-col-drop-sm { display: none; }
.pd-table:not(.pd-table--stack) :is(th, td).pd-col-hide-sm,
.pd-table :is(th, td).pd-col-drop-sm { display: none; }
}
@media (max-width: 768px) {
.pd-col-hide-md,
.pd-col-drop-md { display: none; }
.pd-table:not(.pd-table--stack) :is(th, td).pd-col-hide-md,
.pd-table :is(th, td).pd-col-drop-md { display: none; }
}
@media (max-width: 1024px) {
.pd-col-hide-lg,
.pd-col-drop-lg { display: none; }
.pd-table:not(.pd-table--stack) :is(th, td).pd-col-hide-lg,
.pd-table :is(th, td).pd-col-drop-lg { display: none; }
}
/* ---------------------------------------------------------
모바일 리스트 변환
.pd-table--stack 을 붙이고 각 td 에 data-label 을 준다.
768px 이하에서 각 행이 카드가 되고 셀마다 레이블이 붙는다.
2026.08.03
열이 6개 이상이면 감추기보다 이 방식이 낫다.
--------------------------------------------------------- */
@media (max-width: 768px) {
.pd-table--stack { border-collapse: separate; border-spacing: 0; }
.pd-table--stack thead { display: none; }
.pd-table--stack tbody, .pd-table--stack tr, .pd-table--stack td, .pd-table--stack th { display: block; }
.pd-table--stack tbody tr {
border: 1px solid var(--pd-border);
border-radius: var(--pd-radius-lg);
padding: var(--pd-space-2) var(--pd-space-4);
margin-bottom: var(--pd-space-3);
background: var(--pd-surface);
}
.pd-table--stack tbody tr:last-child { margin-bottom: 0; }
.pd-table--stack tbody tr:hover > td { background: transparent; }
.pd-table--stack tbody td,
.pd-table--stack tbody th[scope="row"] {
display: flex;
align-items: baseline;
/* space-between 으로 두면 셀 안의 자식이 여럿일 때(금액 + 단위처럼)
서로 양 끝으로 벌어진다. 레이블만 auto 로 밀고 나머지는 붙여 둔다.
gap 도 쓰지 않는다. flex 의 gap 은 항목 사이 전부에 걸려서
숫자와 단위 사이까지 벌린다. 레이블의 padding 으로 대신한다. */
justify-content: flex-end;
column-gap: 0;
padding: var(--pd-space-2) 0;
border-bottom: 1px solid var(--pd-border);
text-align: end;
}
.pd-table--stack tbody tr > *:last-child { border-bottom: 0; }
/* 비어 있음을 알리는 칸은 레이블도 정렬도 붙이지 않는다. */
.pd-table--stack tbody td.pd-table__empty {
display: block;
text-align: center;
border-bottom: 0;
}
.pd-table--stack tbody td.pd-table__empty::before { content: none; }
.pd-table--stack tbody tr:has(> .pd-table__empty) {
border: 0;
background: transparent;
padding: 0;
}
.pd-table--stack tbody td::before,
.pd-table--stack tbody th[scope="row"]::before {
content: attr(data-label);
flex: 0 0 auto;
margin-inline-end: auto;
padding-inline-end: var(--pd-space-4);
font-size: 13px;
font-weight: var(--pd-weight-medium);
color: var(--pd-text-muted);
text-align: start;
}
/* data-label 이 없는 셀(액션 버튼 등)은 레이블 자리를 비운다. */
.pd-table--stack tbody td:not([data-label])::before { content: ""; }
/* 변환된 표에서는 감추기 클래스를 무시한다. 카드에는 자리가 있다.
한 클래스가 「카드에서 숨김」과 「카드에서 보임」을 동시에 뜻할 수 없다는
지적(PILLDOC-2008)이 맞아서, 클래스를 둘로 갈랐다. 카드에서도 끝까지
감추려는 열은 pd-col-drop-* 를 쓰고, 그것은 여기서 되살아나지 않는다. */
.pd-table--stack :is(th, td).pd-col-hide-sm,
.pd-table--stack :is(th, td).pd-col-hide-md,
.pd-table--stack :is(th, td).pd-col-hide-lg { display: flex; }
/* 래퍼의 테두리는 카드가 대신하므로 없앤다. */
.pd-table-wrap:has(.pd-table--stack) { border: 0; border-radius: 0; background: transparent; }
}
/* ---------------------------------------------------------
Data table
툴바 + 선택 + 정렬 + 빈 상태 + 페이지네이션을 갖춘 표.
--------------------------------------------------------- */
.pd-datatable { display: flex; flex-direction: column; gap: var(--pd-space-4); }
.pd-datatable__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pd-space-3);
flex-wrap: wrap;
}
.pd-datatable__filters { display: flex; align-items: center; gap: var(--pd-space-2); flex-wrap: wrap; }
.pd-datatable__search { width: 260px; max-width: 100%; }
.pd-datatable__actions { display: flex; align-items: center; gap: var(--pd-space-2); }
/* 선택된 행 개수 안내줄. 선택이 있을 때만 나타난다. */
.pd-datatable__selection {
display: flex;
align-items: center;
gap: var(--pd-space-3);
padding: var(--pd-space-2) var(--pd-space-4);
background: var(--pd-accent-subtle);
color: var(--pd-accent-on-subtle);
border-radius: var(--pd-radius-md);
font-size: 13px;
font-weight: var(--pd-weight-medium);
}
.pd-datatable__selection[hidden] { display: none; }
.pd-datatable__selection-count { font-variant-numeric: tabular-nums; font-weight: var(--pd-weight-bold); }
/* 체크박스 열은 폭을 고정한다. */
.pd-table [data-col="select"] { width: 44px; padding-inline-end: 0; }
.pd-table [data-col="actions"] { width: 1%; white-space: nowrap; text-align: end; }
.pd-table tbody tr[aria-selected="true"] > td,
.pd-table tbody tr[aria-selected="true"] > th { background: var(--pd-accent-subtle); }
/* 정렬 가능한 머리글 */
.pd-table__sort {
display: inline-flex;
align-items: center;
gap: var(--pd-space-1);
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
border-radius: var(--pd-radius-xs);
}
.pd-table__sort:hover { color: var(--pd-text); }
.pd-table__sort:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pd-table__sort .pd-icon { width: 14px; height: 14px; opacity: 0.35; transition: opacity var(--pd-dur) var(--pd-ease), transform var(--pd-dur) var(--pd-ease); }
.pd-table__sort:hover .pd-icon { opacity: 0.7; }
/* 정렬 상태는 th 의 aria-sort 가 유일한 출처다. */
[aria-sort="ascending"] .pd-table__sort .pd-icon,
[aria-sort="descending"] .pd-table__sort .pd-icon { opacity: 1; color: var(--pd-accent-hover); }
[aria-sort="descending"] .pd-table__sort .pd-icon { transform: rotate(180deg); }
[aria-sort="ascending"] .pd-table__sort,
[aria-sort="descending"] .pd-table__sort { color: var(--pd-text); font-weight: var(--pd-weight-bold); }
/* =========================================================
11. TOOLTIP / TOAST / MODAL
========================================================= */
/* --- Tooltip ---
CSS 만으로 동작한다. 마우스뿐 아니라 키보드 포커스에도 뜬다.
툴팁은 보조 설명만 담는다. 툴팁에만 있는 정보를 만들지 않는다.
터치 기기에는 hover 가 없으므로 필수 정보는 본문에 둔다. */
.pd-tip { position: relative; display: inline-flex; }
.pd-tip__bubble {
position: absolute;
z-index: var(--pd-z-tooltip);
bottom: calc(100% + var(--pd-space-2));
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: var(--pd-space-2) var(--pd-space-3);
background: var(--pd-surface-inverted);
color: var(--pd-text-inverted);
font-size: 13px;
font-weight: var(--pd-weight-medium);
line-height: 1.5;
border-radius: var(--pd-radius-md);
box-shadow: var(--pd-shadow-md);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity var(--pd-dur) var(--pd-ease), transform var(--pd-dur) var(--pd-ease), visibility var(--pd-dur);
pointer-events: none;
}
.pd-tip__bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--pd-surface-inverted);
}
.pd-tip:hover .pd-tip__bubble,
.pd-tip:focus-within .pd-tip__bubble {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* 여러 줄 툴팁 */
.pd-tip__bubble--wrap { white-space: normal; width: max-content; max-width: 240px; text-align: start; }
/* 아래로 열리는 변형 */
.pd-tip--bottom .pd-tip__bubble { bottom: auto; top: calc(100% + var(--pd-space-2)); transform: translateX(-50%) translateY(-4px); }
.pd-tip--bottom .pd-tip__bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--pd-surface-inverted); }
.pd-tip--bottom:hover .pd-tip__bubble,
.pd-tip--bottom:focus-within .pd-tip__bubble { transform: translateX(-50%) translateY(0); }
/* 도움말 아이콘 버튼 */
.pd-tip-btn {
width: 20px; height: 20px;
display: inline-grid;
place-items: center;
border: 0;
background: transparent;
color: var(--pd-text-placeholder);
border-radius: 50%;
cursor: help;
padding: 0;
}
.pd-tip-btn:hover { color: var(--pd-text-muted); }
.pd-tip-btn:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/* --- Toast --- */
.pd-toast-region {
position: fixed;
z-index: var(--pd-z-toast);
bottom: var(--pd-space-6);
inset-inline-end: var(--pd-space-6);
display: flex;
flex-direction: column;
gap: var(--pd-space-2);
pointer-events: none;
}
.pd-toast {
display: flex;
align-items: flex-start;
gap: var(--pd-space-3);
background: var(--pd-surface-inverted);
color: var(--pd-text-inverted);
padding: var(--pd-space-3) var(--pd-space-4);
border-radius: var(--pd-radius-md);
font-size: 14px;
line-height: 1.5;
max-width: 380px;
box-shadow: var(--pd-shadow-lg);
pointer-events: auto;
}
.pd-toast__icon {
width: 20px; height: 20px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
margin-top: 1px;
background: var(--pd-accent);
color: var(--pd-text-on-accent);
}
.pd-toast__icon .pd-icon { width: 12px; height: 12px; }
.pd-toast--danger .pd-toast__icon { background: var(--pd-danger); }
.pd-toast--warning .pd-toast__icon { background: var(--pd-warning); color: var(--pd-ink-900); }
.pd-toast--success .pd-toast__icon { background: var(--pd-success); }
.pd-toast__body { flex: 1 1 auto; min-width: 0; }
.pd-toast__title { font-weight: var(--pd-weight-semibold); margin-bottom: 2px; }
.pd-toast__close {
border: 0;
background: transparent;
color: var(--pd-ink-400);
cursor: pointer;
padding: 0;
width: 20px; height: 20px;
display: grid;
place-items: center;
border-radius: var(--pd-radius-xs);
flex-shrink: 0;
}
.pd-toast__close:hover { color: var(--pd-white); background: rgba(255, 255, 255, 0.12); }
/* --- Modal --- */
.pd-modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--pd-z-overlay);
background: rgba(31, 35, 40, 0.5);
display: grid;
place-items: center;
padding: var(--pd-space-4);
}
.pd-modal-backdrop[hidden] { display: none; }
.pd-modal {
position: relative;
z-index: var(--pd-z-modal);
width: 100%;
max-width: 440px;
max-height: calc(100vh - var(--pd-space-8));
display: flex;
flex-direction: column;
background: var(--pd-surface);
border-radius: var(--pd-radius-lg);
box-shadow: var(--pd-shadow-lg);
overflow: hidden;
}
.pd-modal--lg { max-width: 640px; }
.pd-modal--sm { max-width: 360px; }
.pd-modal__head {
padding: var(--pd-space-6) var(--pd-space-6) var(--pd-space-3);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--pd-space-4);
}
.pd-modal__title { font-size: 18px; font-weight: var(--pd-weight-bold); line-height: 1.45; }
.pd-modal__body {
padding: 0 var(--pd-space-6) var(--pd-space-6);
font-size: 14px;
color: var(--pd-text-secondary);
line-height: 1.65;
overflow-y: auto;
}
.pd-modal__foot {
padding: var(--pd-space-4) var(--pd-space-6);
border-top: 1px solid var(--pd-border);
background: var(--pd-surface-sunken);
display: flex;
justify-content: flex-end;
gap: var(--pd-space-2);
}
/* 파괴적 동작을 확인받는 모달은 제목 위에 경고 아이콘을 둔다. */
.pd-modal__icon {
width: 40px; height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--pd-danger-subtle);
color: var(--pd-danger);
margin-bottom: var(--pd-space-3);
}
.pd-modal__icon .pd-icon { width: var(--pd-icon); height: var(--pd-icon); }
/* =========================================================
12. SKELETON / SPINNER / EMPTY
========================================================= */
/* 스켈레톤은 실제 콘텐츠의 모양을 흉내내야 한다. 화면 전체를
회색 덩어리로 덮으면 로딩이 더 길게 느껴진다. */
.pd-skeleton {
display: block;
background: var(--pd-surface-muted);
border-radius: var(--pd-radius-sm);
position: relative;
overflow: hidden;
}
.pd-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: pd-shimmer 1.4s var(--pd-ease) infinite;
}
.pd-skeleton--text { height: 1em; border-radius: var(--pd-radius-xs); }
/* 마지막 줄은 짧게 해서 문단처럼 보이게 한다. */
.pd-skeleton--text:last-child { width: 65%; }
.pd-skeleton--title { height: 1.4em; width: 45%; }
.pd-skeleton--circle { border-radius: 50%; }
.pd-skeleton--thumb { aspect-ratio: 1.2 / 1; border-radius: var(--pd-radius-md); }
.pd-skeleton-group { display: flex; flex-direction: column; gap: var(--pd-space-2); }
/* 움직임을 줄이는 설정에서는 반짝임을 멈추고 정적인 회색만 남긴다. */
@media (prefers-reduced-motion: reduce) {
.pd-skeleton::after { animation: none; display: none; }
}
/* --- Spinner ---
결정적인 진행률을 알 수 있으면 스피너 대신 진행 표시를 쓴다.
스피너는 얼마나 남았는지 모를 때만 쓴다. */
.pd-spinner {
width: var(--pd-spinner-size, 20px);
height: var(--pd-spinner-size, 20px);
border-radius: 50%;
border: 2px solid var(--pd-border-strong);
border-top-color: var(--pd-accent);
animation: pd-spin 700ms linear infinite;
flex-shrink: 0;
}
.pd-spinner--sm { --pd-spinner-size: 14px; border-width: 2px; }
.pd-spinner--lg { --pd-spinner-size: 32px; border-width: 3px; }
.pd-spinner--inverted { border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--pd-white); }
/* 로딩 중임을 문자로도 알린다. 스피너만으로는 스크린리더가 침묵한다. */
.pd-loading { display: inline-flex; align-items: center; gap: var(--pd-space-2); font-size: 14px; color: var(--pd-text-muted); }
/* display 를 정한 컴포넌트는 hidden 을 스스로 되받아야 한다. 브라우저 기본
[hidden] { display: none } 은 작성자 스타일에 밀린다 — 그러지 않으면
hidden 을 걸어 둔 요소가 그대로 보인다. */
.pd-loading[hidden] { display: none; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
@keyframes pd-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
/* 스피너는 회전이 곧 의미다. 멈추지 않고 느리게만 만든다. */
.pd-spinner, .pd-btn[data-loading="true"]::after { animation-duration: 2s; }
}
/* --- Empty state --- */
.pd-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pd-space-3);
padding: var(--pd-space-12) var(--pd-space-6);
text-align: center;
}
.pd-empty__icon {
width: 48px; height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--pd-surface-muted);
color: var(--pd-text-placeholder);
}
.pd-empty__icon .pd-icon { width: var(--pd-icon-lg); height: var(--pd-icon-lg); }
.pd-empty__title { font-size: 15px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
.pd-empty__desc { font-size: 14px; color: var(--pd-text-muted); max-width: 34em; line-height: 1.6; }
.pd-empty[hidden] { display: none; }
/* --- Prose (편집기에서 온 본문) ---
공지사항 본문, 상품 상세, FAQ 처럼 **DB 에 저장된 HTML** 을 그리는 자리다.
마크업을 우리가 정하지 못한다. 편집기가 만든 것을 그대로 받는다.
그래서 이 컨테이너 안에서는 리셋을 되돌린다. .pd-root 와 기존 common.css 는
둘 다 ul 의 불릿과 제목의 여백을 지우는데, 그 상태로 본문을 넣으면 목록이
그냥 문단으로 보이고 문단 사이가 붙는다. 실제로 그래서 notice-rich-text.css
라는 파일이 따로 생겼었다. 그 역할을 여기로 가져왔다.
.pd-root 의 리셋은 :where() 로 특이도가 0 이라 아래 규칙이 항상 이긴다.
안의 내용에 클래스를 붙일 수 없으므로 요소 선택자를 쓴다. 이 파일에서
요소 선택자를 쓰는 유일한 곳이고, 반드시 .pd-prose 안으로 제한한다. */
.pd-prose {
font-size: 15px;
line-height: 1.75;
color: var(--pd-text-secondary);
word-break: keep-all;
overflow-wrap: anywhere;
}
.pd-prose > :first-child { margin-top: 0; }
.pd-prose > :last-child { margin-bottom: 0; }
.pd-prose p { margin: 0 0 var(--pd-space-4); }
.pd-prose :is(h1, h2, h3, h4) {
color: var(--pd-text);
font-weight: var(--pd-weight-bold);
line-height: 1.4;
margin: var(--pd-space-8) 0 var(--pd-space-3);
}
.pd-prose h1 { font-size: 24px; letter-spacing: -0.02em; }
.pd-prose h2 { font-size: 20px; letter-spacing: -0.015em; }
.pd-prose h3 { font-size: 17px; }
.pd-prose h4 { font-size: 15px; }
/* 편집기가 만든 목록은 불릿이 있어야 목록으로 읽힌다. */
.pd-prose ul { list-style: disc; margin: 0 0 var(--pd-space-4); padding-inline-start: var(--pd-space-6); }
.pd-prose ol { list-style: decimal; margin: 0 0 var(--pd-space-4); padding-inline-start: var(--pd-space-6); }
/* li 에 직접 list-style 을 되살려야 한다. module.css 의
`dl, ul, ol, li { list-style: none }` 이 li 를 직접 잡고 있어서
부모 ul 에 disc 를 줘도 마커가 나오지 않는다. */
.pd-prose :is(ul, ol) > li { list-style: inherit; padding-inline-start: 0; }
.pd-prose li { margin-bottom: var(--pd-space-1); }
/* 기존 CSS 가 li 앞에 '∙' 를 넣는다(style.css). 진짜 마커와 겹친다. */
.pd-prose li::before { content: none; display: none; }
.pd-prose :is(ul, ol) :is(ul, ol) { margin-bottom: 0; }
.pd-prose strong, .pd-prose b { font-weight: var(--pd-weight-bold); color: var(--pd-text); }
.pd-prose em, .pd-prose i { font-style: italic; }
.pd-prose u { text-decoration: underline; }
.pd-prose s { text-decoration: line-through; }
.pd-prose a { color: var(--pd-accent-on-subtle); text-decoration: underline; }
.pd-prose a:hover { color: var(--pd-mint-800); }
.pd-prose blockquote {
margin: var(--pd-space-4) 0;
padding: var(--pd-space-2) var(--pd-space-4);
border-inline-start: 3px solid var(--pd-border-strong);
color: var(--pd-text-muted);
}
/* 편집기가 크기를 지정한 이미지가 있을 수 있으므로 폭만 제한한다. */
.pd-prose :is(img, video) { max-width: 100%; height: auto; margin-bottom: var(--pd-space-4); }
.pd-prose video { width: 100%; }
/* 본문 안의 표는 .pd-table 을 붙일 수 없다. 최소한만 정리한다. */
.pd-prose table {
width: 100%;
border-collapse: collapse;
margin: var(--pd-space-4) 0;
font-size: 14px;
}
.pd-prose :is(th, td) {
border: 1px solid var(--pd-border);
padding: var(--pd-space-2) var(--pd-space-3);
text-align: start;
vertical-align: middle;
}
.pd-prose th { background: var(--pd-surface-sunken); color: var(--pd-text); font-weight: var(--pd-weight-semibold); }
/* 표가 좁은 화면을 밀지 않게 한다. 안의 표는 열 수를 우리가 모른다. */
.pd-prose-scroll { overflow-x: auto; }
.pd-prose hr { border: 0; border-top: 1px solid var(--pd-border); margin: var(--pd-space-8) 0; }
/* --- Note (안내 문구) ---
화면에 계속 남아 있는 안내다. 저절로 사라지는 알림은 Toast 를 쓴다.
기존 사이트의 .message / .message-success 가 하던 자리다.
기본은 중립이다. 색을 붙이는 것은 그 색의 뜻이 맞을 때만 한다.
화면에서 가장 눈에 띄는 것이 안내 문구가 되면 정작 할 일이 묻힌다.
*/
.pd-note {
display: flex;
align-items: flex-start;
gap: var(--pd-space-3);
padding: var(--pd-space-4) var(--pd-space-5);
border: 1px solid var(--pd-border);
border-radius: var(--pd-radius-lg);
background: var(--pd-surface-sunken);
color: var(--pd-text-secondary);
font-size: 14px;
line-height: 1.6;
}
/* 아이콘을 첫 줄 가운데에 맞춘다. 본문 line-height 가 아이콘보다 크다. */
.pd-note > .pd-icon { margin-top: 2px; color: var(--pd-text-muted); }
.pd-note strong { color: var(--pd-text); font-weight: var(--pd-weight-semibold); }
.pd-note--accent { background: var(--pd-accent-subtle); border-color: var(--pd-mint-100); color: var(--pd-accent-on-subtle); }
.pd-note--success { background: var(--pd-success-subtle); border-color: var(--pd-green-500); color: var(--pd-success-on-subtle); }
.pd-note--warning { background: var(--pd-warning-subtle); border-color: var(--pd-gold-400); color: var(--pd-warning-on-subtle); }
.pd-note--danger { background: var(--pd-danger-subtle); border-color: var(--pd-red-500); color: var(--pd-danger-on-subtle); }
.pd-note--accent > .pd-icon,
.pd-note--success > .pd-icon,
.pd-note--warning > .pd-icon,
.pd-note--danger > .pd-icon { color: inherit; }
.pd-note--accent strong,
.pd-note--success strong,
.pd-note--warning strong,
.pd-note--danger strong { color: inherit; }
/* =========================================================
13. CHART
ECharts 를 담는 껍데기만 CSS 로 정의한다. 색과 축 스타일은
scripts/charts.js 의 테마가 토큰을 읽어 주입한다.
========================================================= */
.pd-chart {
/* 높이를 지정하지 않으면 ECharts 가 0px 로 잡아 아무것도 안 보인다. */
height: var(--pd-chart-h, 280px);
width: 100%;
}
.pd-chart-card { display: flex; flex-direction: column; gap: var(--pd-space-4); }
.pd-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-space-3); flex-wrap: wrap; }
.pd-chart-title { font-size: 15px; font-weight: var(--pd-weight-bold); color: var(--pd-text); }
.pd-chart-sub { font-size: 13px; color: var(--pd-text-muted); }
/* 지표 한 줄. 차트 위에 현재 값을 크게 보여줄 때 쓴다. */
.pd-metric { display: flex; flex-direction: column; gap: 2px; }
.pd-metric__label { font-size: 13px; color: var(--pd-text-muted); }
.pd-metric__value {
font-size: 28px;
font-weight: var(--pd-weight-bold);
color: var(--pd-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1.2;
}
.pd-metric__delta { font-size: 13px; font-weight: var(--pd-weight-semibold); display: inline-flex; align-items: center; gap: 2px; }
.pd-metric__delta[data-dir="up"] { color: var(--pd-success-on-subtle); }
.pd-metric__delta[data-dir="down"] { color: var(--pd-danger); }
.pd-metric__delta[data-dir="flat"] { color: var(--pd-text-muted); }
.pd-metric-row { display: flex; gap: var(--pd-space-8); flex-wrap: wrap; }
/* 범례를 직접 그릴 때. ECharts 기본 범례를 끄고 쓰는 경우다. */
.pd-legend { display: flex; flex-wrap: wrap; gap: var(--pd-space-4); font-size: 13px; color: var(--pd-text-secondary); }
.pd-legend__item { display: inline-flex; align-items: center; gap: var(--pd-space-2); }
.pd-legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
...