/* =========================================================
   Pilldoc Design System - Base
   리셋, 웹폰트, 타이포그래피 스케일, 숫자 정렬 유틸리티.
   문서 전용 스타일은 doc.css, 컴포넌트는 components.css 에 있다.
   ========================================================= */

/* ---------------------------------------------------------
   웹폰트

   Pretendard GOV Variable 을 dynamic-subset 으로 불러온다.
   원본 variable woff2 는 5.4MB 라 한 번에 받으면 안 된다. 이 CSS 는
   unicode-range 로 120조각으로 나뉘어 있어서 실제 화면에 쓰인 글자가
   속한 조각만 내려온다. 한글 페이지 기준 대체로 40-90KB 조각 몇 개다.

   자체 호스팅으로 바꿀 때는 packages/pretendard-gov/dist/web/variable/
   woff2-dynamic-subset/ 의 조각 전체와 이 CSS 를 함께 가져와야 한다.
   조각 없이 CSS 만 복사하면 글꼴이 통째로 실패한다.
   --------------------------------------------------------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-gov-dynamic-subset.min.css");

/* ---------------------------------------------------------
   리셋 (.pd-root 안에만 적용)

   전역 리셋은 base-global.css 에 따로 있다. 이관이 끝나지 않은 화면에서는
   전역 리셋을 실을 수 없다. 레이아웃이 하나뿐이라 공용 헤더와 푸터,
   그리고 아직 옛 CSS 를 쓰는 형제 요소까지 함께 바뀌기 때문이다.

   그래서 이관 중인 화면은 콘텐츠를 <div class="pd-root"> 로 감싸고
   이 파일만 싣는다. 리셋의 효력이 그 안으로 제한된다.

   :where() 로 특이도를 0 으로 만든다. 리셋이 옛 CSS 를 이기면 안 되는 게
   아니라, 컴포넌트 클래스가 리셋을 이겨야 하기 때문이다.
   --------------------------------------------------------- */
.pd-root, :where(.pd-root) *, :where(.pd-root) *::before, :where(.pd-root) *::after { box-sizing: border-box; }

/* hidden 을 되받는다.

   브라우저 기본 [hidden] { display: none } 은 **브라우저 스타일시트**라,
   display 를 정한 우리 컴포넌트 규칙(.pd-empty { display: flex } 등)에
   그냥 집니다. 그래서 hidden 을 걸어 둔 요소가 그대로 보였습니다. 지금까지는
   컴포넌트마다 .pd-tabpanel[hidden] 처럼 하나씩 되받아 왔는데, 빠뜨리면
   조용히 새 나가므로 여기서 한 번에 막습니다.

   !important 는 컴포넌트 규칙(클래스 하나)뿐 아니라 화면별 규칙(클래스 둘)
   까지 이겨야 하기 때문입니다. hidden 은 "지금 없는 것"이라는 뜻이고, 그
   뜻을 뒤집는 스타일은 없어야 합니다. */
.pd-root [hidden], .pd-root[hidden] { display: none !important; }

.pd-root {
  font-family: var(--pd-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* ss01 은 Pretendard 의 대체 글리프 세트. tnum 은 숫자 고정폭.
     Pretendard GOV 는 숫자가 이미 고정폭이지만, 폰트 로딩 실패 시
     대체 서체에서도 표가 흔들리지 않도록 명시한다. */
  font-feature-settings: "ss01", "tnum";
}
/* 배경은 감싼 요소가 화면 전체를 덮지 않을 수 있으므로 수정자로 뺀다. */
.pd-root--surface { background: var(--pd-surface-sunken); }

:where(.pd-root) :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }
:where(.pd-root) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }

:where(.pd-root) :is(img, svg, video, canvas) { display: block; max-width: 100%; }

:where(.pd-root) :is(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}

:where(.pd-root) a { color: var(--pd-accent-on-subtle); text-decoration: none; }
:where(.pd-root) a:hover { color: var(--pd-mint-800); text-decoration: underline; }

:where(.pd-root) :is(code, kbd, samp) {
  font-family: var(--pd-font-mono);
  font-size: 0.88em;
  background: var(--pd-surface-muted);
  border-radius: var(--pd-radius-sm);
  padding: 1px 6px;
  color: var(--pd-ink-800);
}

/* 키보드 사용자에게만 포커스 링을 보여준다. */
:where(.pd-root) :focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-sm); }

/* 스크린리더 전용 텍스트 */
.pd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   타이포그래피 스케일

   한글 기준 행간이다. 라틴 기준(1.2-1.4)보다 넉넉한 1.5-1.6 을 쓴다.
   자간은 큰 글자에서만 음수로 조이고, 본문 이하에서는 건드리지 않는다.
   14px 미만을 본문에 쓰지 않는다.
   --------------------------------------------------------- */
.t-display {
  font-size: 56px; font-weight: var(--pd-weight-bold);
  letter-spacing: -0.03em; line-height: 1.15;
}
.t-h1 {
  font-size: 40px; font-weight: var(--pd-weight-bold);
  letter-spacing: -0.02em; line-height: 1.25;
}
.t-h2 {
  font-size: 28px; font-weight: var(--pd-weight-bold);
  letter-spacing: -0.015em; line-height: 1.3;
}
.t-h3 {
  font-size: 22px; font-weight: var(--pd-weight-bold);
  letter-spacing: -0.01em; line-height: 1.4;
}
.t-h4 {
  font-size: 18px; font-weight: var(--pd-weight-bold);
  line-height: 1.45;
}
.t-body-lg { font-size: 16px; font-weight: var(--pd-weight-regular); line-height: 1.65; }
.t-body    { font-size: 14px; font-weight: var(--pd-weight-regular); line-height: 1.6; }
.t-body-sm { font-size: 13px; font-weight: var(--pd-weight-regular); line-height: 1.55; }
.t-caption { font-size: 12px; font-weight: var(--pd-weight-medium); line-height: 1.5; color: var(--pd-text-muted); }
.t-label {
  font-size: 11px; font-weight: var(--pd-weight-bold); line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pd-text-muted);
}
.t-code { font-family: var(--pd-font-mono); font-size: 13px; }

/* 큰 화면 전용 크기를 좁은 화면에서 줄인다. Display 와 H1 만 조정하면
   나머지는 이미 모바일에서 읽히는 크기다. */
@media (max-width: 768px) {
  .t-display { font-size: 36px; letter-spacing: -0.02em; }
  .t-h1      { font-size: 28px; }
  .t-h2      { font-size: 22px; }
}

/* ---------------------------------------------------------
   숫자

   금액·수량·날짜처럼 열로 정렬되는 숫자에 붙인다.
   별도 모노 서체를 쓰지 않고 Pretendard GOV 의 고정폭 숫자를 그대로 쓴다.
   --------------------------------------------------------- */
.t-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* 표에서 숫자 열은 오른쪽 정렬이 기본이다. */
.t-num--end { text-align: right; }

/* 금액의 단위는 숫자보다 작고 연하게 떼어 놓는다. */
.t-unit {
  font-size: 0.78em;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  margin-left: 2px;
}

/* ---------------------------------------------------------
   텍스트 색 유틸리티
   --------------------------------------------------------- */
.t-muted     { color: var(--pd-text-muted); }
.t-secondary { color: var(--pd-text-secondary); }
.t-danger    { color: var(--pd-danger); }
.t-success   { color: var(--pd-success-on-subtle); }
.t-accent    { color: var(--pd-accent-on-subtle); }

/* ---------------------------------------------------------
   아이콘

   Lucide 스프라이트를 <use> 로 참조한다.
     <svg class="pd-icon" aria-hidden="true"><use href="#i-search"/></svg>
   의미가 있는 아이콘은 aria-hidden 대신 <title> 이나 인접 텍스트를 둔다.
   stroke-width 는 스프라이트의 symbol 에 새겨져 있다. 여기서 덮어쓰면
   외부 스프라이트에서는 적용되지 않으므로 크기만 다룬다.
   --------------------------------------------------------- */
.pd-icon {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  flex-shrink: 0;
  color: inherit;
}
.pd-icon--md { width: var(--pd-icon); height: var(--pd-icon); }
.pd-icon--lg { width: var(--pd-icon-lg); height: var(--pd-icon-lg); }