@charset "utf-8";

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

/* ========================================
   font-size
======================================== */
.fs-15 { font-size: var(--fs-15); }
.fs-19 { font-size: var(--fs-19); }
.fs-20 { font-size: var(--fs-20); }
.fs-21 { font-size: var(--fs-21); }
.fs-22 { font-size: var(--fs-22); }
.fs-23 { font-size: var(--fs-23); }
.fs-25 { font-size: var(--fs-25); }
.fs-26 { font-size: var(--fs-26); }
.fs-27 { font-size: var(--fs-27); }
.fs-28 { font-size: var(--fs-28); }
.fs-30 { font-size: var(--fs-30); }
.fs-31 { font-size: var(--fs-31); }
.fs-33 { font-size: var(--fs-33); }
.fs-35 { font-size: var(--fs-35); }
.fs-37 { font-size: var(--fs-37); }
.fs-40 { font-size: var(--fs-40); }

/* ========================================
   line-height
======================================== */
.lh-base { line-height: var(--lh-base); }
.lh-loose { line-height: var(--lh-loose); }
.lh-button { line-height: var(--lh-button); }

/* ========================================
   color - text / icon
======================================== */
.color-primary { color: var(--color-primary); }
.color-danger { color: var(--color-danger); }
.color-text { color: var(--color-text); }
.color-text-sub { color: var(--color-text-sub); }
.color-text-mute { color: var(--color-text-mute); }
.color-text-gray { color: var(--color-text-gray); }
.color-text-on-image { color: var(--color-text-on-image); }
.color-icon-mute { color: var(--color-icon-mute); }
.color-icon-disabled { color: var(--color-icon-disabled); }
.color-line-gray { color: var(--color-line-gray); }

/* ========================================
   color - background
======================================== */
.bg-primary { background-color: var(--color-primary); }
.bg-danger { background-color: var(--color-danger); }
.bg-base { background-color: var(--color-bg); }
.bg-gray { background-color: var(--color-bg-gray); }
.bg-control { background-color: var(--color-bg-control); }
.bg-card { background-color: var(--color-bg-card); }
.bg-glass { background-color: var(--color-glass); }
.bg-backdrop { background-color: var(--color-backdrop); }

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

/* ========================================
   radius
======================================== */
.radius-10 { border-radius: var(--radius-10); }
.radius-20 { border-radius: var(--radius-20); }
.radius-29 { border-radius: var(--radius-29); }
.radius-40 { border-radius: var(--radius-40); }
.radius-50 { border-radius: var(--radius-50); }
/* 원형·pill 은 토큰이 아니라 아래 유틸/컴포넌트에서 처리한다. */
.radius-full { border-radius: 50%; }
.radius-pill { border-radius: 999rem; }

/* ========================================
   shadow
======================================== */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-pin { box-shadow: var(--shadow-pin); }
.shadow-nav { box-shadow: var(--shadow-nav); }
.shadow-fab { box-shadow: var(--shadow-fab); }
.shadow-hero { box-shadow: var(--shadow-hero); }

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

.mt-10 { margin-top: var(--space-10); }
.mt-11 { margin-top: var(--space-11); }
.mt-12 { margin-top: var(--space-12); }
.mt-14 { margin-top: var(--space-14); }
.mt-15 { margin-top: var(--space-15); }
.mt-17 { margin-top: var(--space-17); }
.mt-19 { margin-top: var(--space-19); }
.mt-20 { margin-top: var(--space-20); }
.mt-22 { margin-top: var(--space-22); }
.mt-23 { margin-top: var(--space-23); }
.mt-25 { margin-top: var(--space-25); }
.mt-26 { margin-top: var(--space-26); }
.mt-27 { margin-top: var(--space-27); }
.mt-33 { margin-top: var(--space-33); }
.mt-35 { margin-top: var(--space-35); }
.mt-40 { margin-top: var(--space-40); }
.mt-45 { margin-top: var(--space-45); }
.mt-50 { margin-top: var(--space-50); }
.mt-60 { margin-top: var(--space-60); }

.mb-10 { margin-bottom: var(--space-10); }
.mb-11 { margin-bottom: var(--space-11); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-14 { margin-bottom: var(--space-14); }
.mb-15 { margin-bottom: var(--space-15); }
.mb-17 { margin-bottom: var(--space-17); }
.mb-19 { margin-bottom: var(--space-19); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-22 { margin-bottom: var(--space-22); }
.mb-23 { margin-bottom: var(--space-23); }
.mb-25 { margin-bottom: var(--space-25); }
.mb-26 { margin-bottom: var(--space-26); }
.mb-27 { margin-bottom: var(--space-27); }
.mb-33 { margin-bottom: var(--space-33); }
.mb-35 { margin-bottom: var(--space-35); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-45 { margin-bottom: var(--space-45); }
.mb-50 { margin-bottom: var(--space-50); }
.mb-60 { margin-bottom: var(--space-60); }

.ml-10 { margin-left: var(--space-10); }
.ml-11 { margin-left: var(--space-11); }
.ml-12 { margin-left: var(--space-12); }
.ml-14 { margin-left: var(--space-14); }
.ml-15 { margin-left: var(--space-15); }
.ml-17 { margin-left: var(--space-17); }
.ml-19 { margin-left: var(--space-19); }
.ml-20 { margin-left: var(--space-20); }
.ml-22 { margin-left: var(--space-22); }
.ml-23 { margin-left: var(--space-23); }
.ml-25 { margin-left: var(--space-25); }
.ml-26 { margin-left: var(--space-26); }
.ml-27 { margin-left: var(--space-27); }
.ml-33 { margin-left: var(--space-33); }
.ml-35 { margin-left: var(--space-35); }
.ml-40 { margin-left: var(--space-40); }
.ml-45 { margin-left: var(--space-45); }
.ml-50 { margin-left: var(--space-50); }
.ml-60 { margin-left: var(--space-60); }

.mr-10 { margin-right: var(--space-10); }
.mr-11 { margin-right: var(--space-11); }
.mr-12 { margin-right: var(--space-12); }
.mr-14 { margin-right: var(--space-14); }
.mr-15 { margin-right: var(--space-15); }
.mr-17 { margin-right: var(--space-17); }
.mr-19 { margin-right: var(--space-19); }
.mr-20 { margin-right: var(--space-20); }
.mr-22 { margin-right: var(--space-22); }
.mr-23 { margin-right: var(--space-23); }
.mr-25 { margin-right: var(--space-25); }
.mr-26 { margin-right: var(--space-26); }
.mr-27 { margin-right: var(--space-27); }
.mr-33 { margin-right: var(--space-33); }
.mr-35 { margin-right: var(--space-35); }
.mr-40 { margin-right: var(--space-40); }
.mr-45 { margin-right: var(--space-45); }
.mr-50 { margin-right: var(--space-50); }
.mr-60 { margin-right: var(--space-60); }

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

/* ========================================
   spacing - padding
======================================== */
.p-10 { padding: var(--space-10); }
.p-11 { padding: var(--space-11); }
.p-12 { padding: var(--space-12); }
.p-14 { padding: var(--space-14); }
.p-15 { padding: var(--space-15); }
.p-17 { padding: var(--space-17); }
.p-19 { padding: var(--space-19); }
.p-20 { padding: var(--space-20); }
.p-22 { padding: var(--space-22); }
.p-23 { padding: var(--space-23); }
.p-25 { padding: var(--space-25); }
.p-26 { padding: var(--space-26); }
.p-27 { padding: var(--space-27); }
.p-33 { padding: var(--space-33); }
.p-35 { padding: var(--space-35); }
.p-40 { padding: var(--space-40); }
.p-45 { padding: var(--space-45); }
.p-50 { padding: var(--space-50); }
.p-60 { padding: var(--space-60); }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-11 { padding-left: var(--space-11); padding-right: var(--space-11); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-14 { padding-left: var(--space-14); padding-right: var(--space-14); }
.px-15 { padding-left: var(--space-15); padding-right: var(--space-15); }
.px-17 { padding-left: var(--space-17); padding-right: var(--space-17); }
.px-19 { padding-left: var(--space-19); padding-right: var(--space-19); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-22 { padding-left: var(--space-22); padding-right: var(--space-22); }
.px-23 { padding-left: var(--space-23); padding-right: var(--space-23); }
.px-25 { padding-left: var(--space-25); padding-right: var(--space-25); }
.px-26 { padding-left: var(--space-26); padding-right: var(--space-26); }
.px-27 { padding-left: var(--space-27); padding-right: var(--space-27); }
.px-33 { padding-left: var(--space-33); padding-right: var(--space-33); }
.px-35 { padding-left: var(--space-35); padding-right: var(--space-35); }
.px-40 { padding-left: var(--space-40); padding-right: var(--space-40); }
.px-45 { padding-left: var(--space-45); padding-right: var(--space-45); }
.px-50 { padding-left: var(--space-50); padding-right: var(--space-50); }
.px-60 { padding-left: var(--space-60); padding-right: var(--space-60); }

.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-11 { padding-top: var(--space-11); padding-bottom: var(--space-11); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); }
.py-15 { padding-top: var(--space-15); padding-bottom: var(--space-15); }
.py-17 { padding-top: var(--space-17); padding-bottom: var(--space-17); }
.py-19 { padding-top: var(--space-19); padding-bottom: var(--space-19); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); }
.py-23 { padding-top: var(--space-23); padding-bottom: var(--space-23); }
.py-25 { padding-top: var(--space-25); padding-bottom: var(--space-25); }
.py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); }
.py-27 { padding-top: var(--space-27); padding-bottom: var(--space-27); }
.py-33 { padding-top: var(--space-33); padding-bottom: var(--space-33); }
.py-35 { padding-top: var(--space-35); padding-bottom: var(--space-35); }
.py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.py-45 { padding-top: var(--space-45); padding-bottom: var(--space-45); }
.py-50 { padding-top: var(--space-50); padding-bottom: var(--space-50); }
.py-60 { padding-top: var(--space-60); padding-bottom: var(--space-60); }

/* ========================================
   gap
======================================== */
.gap-10 { gap: var(--space-10); }
.gap-11 { gap: var(--space-11); }
.gap-12 { gap: var(--space-12); }
.gap-14 { gap: var(--space-14); }
.gap-15 { gap: var(--space-15); }
.gap-17 { gap: var(--space-17); }
.gap-19 { gap: var(--space-19); }
.gap-20 { gap: var(--space-20); }
.gap-22 { gap: var(--space-22); }
.gap-23 { gap: var(--space-23); }
.gap-25 { gap: var(--space-25); }
.gap-26 { gap: var(--space-26); }
.gap-27 { gap: var(--space-27); }
.gap-33 { gap: var(--space-33); }
.gap-35 { gap: var(--space-35); }
.gap-40 { gap: var(--space-40); }
.gap-45 { gap: var(--space-45); }
.gap-50 { gap: var(--space-50); }
.gap-60 { gap: var(--space-60); }

/* ========================================
   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; }

/* ========================================
   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 align
======================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ========================================
   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)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

/* ========================================
   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;
}