@charset "utf-8";

/* ========================================
   typography
======================================== */
.font-base { font-family: var(--font-family-base); }
.font-en { font-family: var(--font-family-en); }

.fw-400 { font-weight: var(--fw-regular); }
.fw-500 { font-weight: var(--fw-medium); }
.fw-600 { font-weight: var(--fw-semibold); }
.fw-700 { font-weight: var(--fw-bold); }
.fw-800 { font-weight: var(--fw-extrabold); }

.lh-100 { line-height: var(--lh-100); }
.lh-120 { line-height: var(--lh-120); }
.lh-130 { line-height: var(--lh-130); }
.lh-140 { line-height: var(--lh-140); }
.lh-150 { line-height: var(--lh-150); }
.lh-160 { line-height: var(--lh-160); }
.lh-170 { line-height: var(--lh-170); }

.ls-tight { letter-spacing: var(--ls-tight); }
.ls-normal { letter-spacing: var(--ls-normal); }
.ls-wide { letter-spacing: var(--ls-wide); }

/* fixed font-size */
.fs-12 { font-size: var(--fs-12); }
.fs-14 { font-size: var(--fs-14); }
.fs-16 { font-size: var(--fs-16); }
.fs-18 { font-size: var(--fs-18); }
.fs-20 { font-size: var(--fs-20); }
.fs-22 { font-size: var(--fs-22); }
.fs-24 { font-size: var(--fs-24); }
.fs-32 { font-size: var(--fs-32); }

/* responsive font-size */
.rfs-12 { font-size: var(--rfs-12); }
.rfs-14 { font-size: var(--rfs-14); }
.rfs-16 { font-size: var(--rfs-16); }
.rfs-18 { font-size: var(--rfs-18); }
.rfs-20 { font-size: var(--rfs-20); }
.rfs-22 { font-size: var(--rfs-22); }
.rfs-24 { font-size: var(--rfs-24); }
.rfs-32 { font-size: var(--rfs-32); }

/* semantic text */
.text-caption { font-size: var(--text-caption); }
.text-small { font-size: var(--text-small); }
.text-body { font-size: var(--text-body); }
.text-body-lg { font-size: var(--text-body-lg); }
.text-subtitle { font-size: var(--text-subtitle); }
.text-subtitle-lg { font-size: var(--text-subtitle-lg); }
.text-title { font-size: var(--text-title); }
.text-display { font-size: var(--text-display); }

.text-caption-r { font-size: var(--text-caption-r); }
.text-small-r { font-size: var(--text-small-r); }
.text-body-r { font-size: var(--text-body-r); }
.text-body-lg-r { font-size: var(--text-body-lg-r); }
.text-subtitle-r { font-size: var(--text-subtitle-r); }
.text-subtitle-lg-r { font-size: var(--text-subtitle-lg-r); }
.text-title-r { font-size: var(--text-title-r); }
.text-display-r { font-size: var(--text-display-r); }

/* ========================================
   color
======================================== */
.color-primary { color: var(--color-primary); }
.color-primary-solid { color: var(--color-primary-solid); }
.color-secondary { color: var(--color-secondary); }
.color-point { color: var(--color-point); }
.color-danger { color: var(--color-danger); }
.color-success { color: var(--color-success); }
.color-warning { color: var(--color-warning); }

.color-white { color: var(--color-white); }
.color-black { color: var(--color-black); }

.color-text-primary { color: var(--text-color-primary); }
.color-text-secondary { color: var(--text-color-secondary); }
.color-text-muted { color: var(--text-color-muted); }

.bg-white { background-color: var(--color-white); }
.bg-muted { background-color: var(--bg-color-muted); }
.bg-primary { background-color: var(--color-primary-solid); }
.bg-point { background-color: var(--color-point); }

.border-default { border: 0.1rem solid var(--border-color-default); }

/* ========================================
   radius
======================================== */
.radius-6 { border-radius: var(--radius-6); }
.radius-8 { border-radius: var(--radius-8); }
.radius-12 { border-radius: var(--radius-12); }
.radius-16 { border-radius: var(--radius-16); }
.radius-32 { border-radius: var(--radius-32); }

.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-pill { border-radius: var(--radius-pill); }

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

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-48 { margin-bottom: var(--space-48); }

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

/* responsive margin */
.rmt-16 { margin-top: var(--rspace-16); }
.rmt-24 { margin-top: var(--rspace-24); }
.rmt-32 { margin-top: var(--rspace-32); }

.rmb-16 { margin-bottom: var(--rspace-16); }
.rmb-24 { margin-bottom: var(--rspace-24); }
.rmb-32 { margin-bottom: var(--rspace-32); }
.rmb-40 { margin-bottom: var(--rspace-40); }

/* ========================================
   spacing - padding
======================================== */
.p-8 { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }
.p-40 { padding: var(--space-40); }

.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }

.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }

/* responsive padding */
.rp-16 { padding: var(--rspace-16); }
.rp-20 { padding: var(--rspace-20); }
.rp-24 { padding: var(--rspace-24); }
.rp-32 { padding: var(--rspace-32); }
.rp-40 { padding: var(--rspace-40); }

.rpx-16 { padding-left: var(--rspace-16); padding-right: var(--rspace-16); }
.rpx-24 { padding-left: var(--rspace-24); padding-right: var(--rspace-24); }
.rpx-32 { padding-left: var(--rspace-32); padding-right: var(--rspace-32); }

.rpy-16 { padding-top: var(--rspace-16); padding-bottom: var(--rspace-16); }
.rpy-24 { padding-top: var(--rspace-24); padding-bottom: var(--rspace-24); }
.rpy-32 { padding-top: var(--rspace-32); padding-bottom: var(--rspace-32); }

/* ========================================
   gap
======================================== */
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }

.rgap-8 { gap: var(--rspace-8); }
.rgap-12 { gap: var(--rspace-12); }
.rgap-16 { gap: var(--rspace-16); }
.rgap-20 { gap: var(--rspace-20); }
.rgap-24 { gap: var(--rspace-24); }
.rgap-32 { gap: var(--rspace-32); }

/* ========================================
   container
======================================== */
.container {
    width: 100%;
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
}

.container--content {
    max-width: var(--layout-content-width);
}

.container--narrow {
    max-width: var(--layout-narrow-width);
}

/* ========================================
   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%; }
.max-w-content { max-width: var(--layout-max-width); }
.max-w-narrow { max-width: var(--layout-narrow-width); }

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

/* ========================================
   margin auto helpers
======================================== */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

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

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

/* ========================================
   gap
======================================== */
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }

.rgap-12 { gap: var(--rspace-12); }
.rgap-16 { gap: var(--rspace-16); }
.rgap-24 { gap: var(--rspace-24); }
.rgap-32 { gap: var(--rspace-32); }

/* ========================================
   z-index
======================================== */
.z-base { z-index: var(--z-base); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-toast { z-index: var(--z-toast); }

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

/* ========================================
   specific ui
======================================== */
.title {
    font-weight: 700;
    font-size: var(--fs-20);
}