@charset "utf-8";

/* tokens.css 에 정의된 정식 토큰만 노출한다. 토큰을 추가/삭제하면 이 파일도 같이 맞춘다. */

/* ========================================
   font-family
   - 제목은 도현체(--font-display, 400 단일), 본문은 Pretendard(--font-base).
     도현체는 굵기가 400뿐이라 .font-display 는 .fw-regular 와 함께 쓴다.
======================================== */
.font-base { font-family: var(--font-base); }
.font-display { font-family: var(--font-display); }

/* ========================================
   font-size
======================================== */
.fs-caption { font-size: var(--fs-caption); }
.fs-body { font-size: var(--fs-body); }
.fs-label { font-size: var(--fs-label); }
.fs-nav-title { font-size: var(--fs-nav-title); }
.fs-title { font-size: var(--fs-title); }
.fs-page-title { font-size: var(--fs-page-title); }
.fs-hero { font-size: var(--fs-hero); }

/* ========================================
   font-weight
======================================== */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }

/* ========================================
   line-height
======================================== */
.lh-none { line-height: var(--lh-none); }
.lh-tight { line-height: var(--lh-tight); }
.lh-snug { line-height: var(--lh-snug); }
.lh-body { line-height: var(--lh-body); }
.lh-relaxed { line-height: var(--lh-relaxed); }

/* ========================================
   letter-spacing
======================================== */
.ls-normal { letter-spacing: var(--ls-normal); }
.ls-tight { letter-spacing: var(--ls-tight); }
.ls-tightest { letter-spacing: var(--ls-tightest); }

/* ========================================
   color - text / icon
======================================== */
.color-text { color: var(--color-text); }
.color-text-sub { color: var(--color-text-sub); }
.color-text-mute { color: var(--color-text-mute); }
.color-text-disabled { color: var(--color-text-disabled); }
.color-text-invert { color: var(--color-text-invert); }
.color-primary { color: var(--color-primary); }
.color-icon { color: var(--color-icon); }
.color-icon-sub { color: var(--color-icon-sub); }
.color-icon-nav { color: var(--color-icon-nav); }

/* ========================================
   color - background
======================================== */
.bg-base { background-color: var(--color-bg); }
.bg-card { background-color: var(--color-bg-card); }
.bg-soft { background-color: var(--color-bg-soft); }
.bg-chip { background-color: var(--color-bg-chip); }
.bg-chip-warm { background-color: var(--color-bg-chip-warm); }
.bg-disabled { background-color: var(--color-bg-disabled); }
.bg-primary-soft { background-color: var(--color-primary-soft); }
/* 강조 태그 배경 — 두 클래스 모두 텍스트는 .color-text-invert 와 함께 쓴다. */
.bg-tag-coral { background-color: var(--color-tag-coral); }
.bg-tag-yellow { background-color: var(--color-tag-yellow); }
.bg-tag-ink { background-color: var(--color-tag-ink); }
.scrim { background-color: var(--color-scrim); }

/* ========================================
   border
======================================== */
/* 1px 고정 — 렌더링 선명도를 위해 rem/clamp 변환하지 않는다. */
.border-line { border: var(--size-hairline) solid var(--color-line); }
.border-card { border: var(--size-hairline) solid var(--color-line-card); }

/* ========================================
   radius
======================================== */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-image { border-radius: var(--radius-image); }
.radius-pill { border-radius: var(--radius-pill); }
/* 50% 는 요소 크기에 종속된 값이라 토큰으로 두지 않는다. */
.radius-full { border-radius: 50%; }

/* ========================================
   shadow
======================================== */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-strong { box-shadow: var(--shadow-card-strong); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-nav { box-shadow: var(--shadow-nav); }

/* ========================================
   spacing - margin
======================================== */
.m-0 { margin: 0; }

.mt-4 { margin-top: var(--space-4); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ========================================
   spacing - padding
======================================== */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ========================================
   gap
======================================== */
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* ========================================
   display
======================================== */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* ========================================
   flex direction / wrap
======================================== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* ========================================
   align / justify
======================================== */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* ========================================
   flex grow / shrink
======================================== */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.shrink-0 { flex-shrink: 0; }
.grow-1 { flex-grow: 1; }

/* ========================================
   width / height
======================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }

.max-w-full { max-width: 100%; }

/* ========================================
   position
======================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ========================================
   overflow
======================================== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========================================
   text
======================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
   grid helpers
======================================== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }

/* ========================================
   accessibility
======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}