@charset "utf-8";

/* ========================================
   font-size
======================================== */
.fs-11 { font-size: var(--fs-11); }
.fs-11-8 { font-size: var(--fs-11-8); }
.fs-13 { font-size: var(--fs-13); }
.fs-14 { font-size: var(--fs-14); }
.fs-14-4 { font-size: var(--fs-14-4); }
.fs-14-5 { font-size: var(--fs-14-5); }
.fs-14-8 { font-size: var(--fs-14-8); }
.fs-15 { font-size: var(--fs-15); }
.fs-15-8 { font-size: var(--fs-15-8); }
.fs-16 { font-size: var(--fs-16); }
.fs-16-8 { font-size: var(--fs-16-8); }
.fs-17 { font-size: var(--fs-17); }
.fs-18 { font-size: var(--fs-18); }
.fs-18-8 { font-size: var(--fs-18-8); }
.fs-19 { font-size: var(--fs-19); }
.fs-19-8 { font-size: var(--fs-19-8); }
.fs-20 { font-size: var(--fs-20); }
.fs-21 { font-size: var(--fs-21); }
.fs-21-3 { font-size: var(--fs-21-3); }
.fs-22 { font-size: var(--fs-22); }
.fs-22-8 { font-size: var(--fs-22-8); }
.fs-23-1 { font-size: var(--fs-23-1); }
.fs-24 { font-size: var(--fs-24); }
.fs-25 { font-size: var(--fs-25); }
.fs-27 { font-size: var(--fs-27); }
.fs-28 { font-size: var(--fs-28); }
.fs-30 { font-size: var(--fs-30); }
.fs-35 { font-size: var(--fs-35); }
.fs-38 { font-size: var(--fs-38); }
.fs-45 { font-size: var(--fs-45); }

.font-db { font-family: var(--font-dm); }

/* ========================================
   color - text
======================================== */
.color-line-gray { color: var(--color-line-gray); }
.color-line-dark { color: var(--color-line-dark); }
.color-light-blue { color: var(--color-light-blue); }
.color-purple { color: var(--color-purple); }
.color-primary { color: var(--color-primary); }
.color-primary-50 { color: var(--color-primary-50); }
.color-light-purple { color: var(--color-light-purple); }
.color-gray { color: var(--color-gray); }
.color-dark { color: var(--color-dark); }
.color-red { color: var(--color-red); }
.color-point { color: var(--color-point); }

/* ========================================
   color - background
======================================== */
.bg-line-gray { background-color: var(--color-line-gray); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-primary { background-color: var(--color-primary); }
.bg-bg { background-color: var(--color-bg); }
.bg-light-purple { background-color: var(--color-light-purple); }
.bg-skeleton { background-color: var(--color-skeleton); }
.bg-point { background-color: var(--color-point); }

/* ========================================
   color - 열차 타입 (bg / text)
======================================== */
.bg-sm { background-color: var(--bg-sm); }
.c-sm { color: var(--c-sm); }
.bg-mg { background-color: var(--bg-mg); }
.c-mg { color: var(--c-mg); }
.bg-cm { background-color: var(--bg-cm); }
.c-cm { color: var(--c-cm); }
.bg-nr { background-color: var(--bg-nr); }
.c-nr { color: var(--c-nr); }
.bg-arx { background-color: var(--bg-arx); }
.c-arx { color: var(--c-arx); }
.bg-ktxs { background-color: var(--bg-ktxs); }
.c-ktxs { color: var(--c-ktxs); }
.bg-itxs { background-color: var(--bg-itxs); }
.c-itxs { color: var(--c-itxs); }
.bg-itxc { background-color: var(--bg-itxc); }
.c-itxc { color: var(--c-itxc); }
.bg-ktxe { background-color: var(--bg-ktxe); }
.c-ktxe { color: var(--c-ktxe); }
.bg-itxm { background-color: var(--bg-itxm); }
.c-itxm { color: var(--c-itxm); }

/* ========================================
   border
======================================== */
.border-line { border: 1px solid var(--color-line-gray); }

/* ========================================
   effect
======================================== */
.shadow-card { box-shadow: var(--shadow-card); }
.radius-card { border-radius: var(--radius-card); }

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

.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7-6 { margin-top: var(--space-7-6); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-12-5 { margin-top: var(--space-12-5); }
.mt-13 { margin-top: var(--space-13); }
.mt-14 { margin-top: var(--space-14); }
.mt-15 { margin-top: var(--space-15); }
.mt-16 { margin-top: var(--space-16); }
.mt-18 { margin-top: var(--space-18); }
.mt-20 { margin-top: var(--space-20); }
.mt-21 { margin-top: var(--space-21); }
.mt-22 { margin-top: var(--space-22); }
.mt-25 { margin-top: var(--space-25); }
.mt-30 { margin-top: var(--space-30); }
.mt-32 { margin-top: var(--space-32); }
.mt-33 { margin-top: var(--space-33); }
.mt-34 { margin-top: var(--space-34); }
.mt-36 { margin-top: var(--space-36); }
.mt-37 { margin-top: var(--space-37); }
.mt-40 { margin-top: var(--space-40); }
.mt-44 { margin-top: var(--space-44); }
.mt-50 { margin-top: var(--space-50); }
.mt-61 { margin-top: var(--space-61); }
.mt-64 { margin-top: var(--space-64); }
.mt-72 { margin-top: var(--space-72); }

.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7-6 { margin-bottom: var(--space-7-6); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-12-5 { margin-bottom: var(--space-12-5); }
.mb-13 { margin-bottom: var(--space-13); }
.mb-14 { margin-bottom: var(--space-14); }
.mb-15 { margin-bottom: var(--space-15); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-18 { margin-bottom: var(--space-18); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-21 { margin-bottom: var(--space-21); }
.mb-22 { margin-bottom: var(--space-22); }
.mb-25 { margin-bottom: var(--space-25); }
.mb-30 { margin-bottom: var(--space-30); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-33 { margin-bottom: var(--space-33); }
.mb-34 { margin-bottom: var(--space-34); }
.mb-36 { margin-bottom: var(--space-36); }
.mb-37 { margin-bottom: var(--space-37); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-44 { margin-bottom: var(--space-44); }
.mb-50 { margin-bottom: var(--space-50); }
.mb-61 { margin-bottom: var(--space-61); }
.mb-64 { margin-bottom: var(--space-64); }
.mb-72 { margin-bottom: var(--space-72); }

.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-7-6 { margin-left: var(--space-7-6); }
.ml-9 { margin-left: var(--space-9); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }
.ml-12-5 { margin-left: var(--space-12-5); }
.ml-13 { margin-left: var(--space-13); }
.ml-14 { margin-left: var(--space-14); }
.ml-15 { margin-left: var(--space-15); }
.ml-16 { margin-left: var(--space-16); }
.ml-18 { margin-left: var(--space-18); }
.ml-20 { margin-left: var(--space-20); }
.ml-21 { margin-left: var(--space-21); }
.ml-22 { margin-left: var(--space-22); }
.ml-25 { margin-left: var(--space-25); }
.ml-30 { margin-left: var(--space-30); }
.ml-32 { margin-left: var(--space-32); }
.ml-33 { margin-left: var(--space-33); }
.ml-34 { margin-left: var(--space-34); }
.ml-36 { margin-left: var(--space-36); }
.ml-37 { margin-left: var(--space-37); }
.ml-40 { margin-left: var(--space-40); }
.ml-44 { margin-left: var(--space-44); }
.ml-50 { margin-left: var(--space-50); }
.ml-61 { margin-left: var(--space-61); }
.ml-64 { margin-left: var(--space-64); }
.ml-72 { margin-left: var(--space-72); }

.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-7-6 { margin-right: var(--space-7-6); }
.mr-9 { margin-right: var(--space-9); }
.mr-10 { margin-right: var(--space-10); }
.mr-12 { margin-right: var(--space-12); }
.mr-12-5 { margin-right: var(--space-12-5); }
.mr-13 { margin-right: var(--space-13); }
.mr-14 { margin-right: var(--space-14); }
.mr-15 { margin-right: var(--space-15); }
.mr-16 { margin-right: var(--space-16); }
.mr-18 { margin-right: var(--space-18); }
.mr-20 { margin-right: var(--space-20); }
.mr-21 { margin-right: var(--space-21); }
.mr-22 { margin-right: var(--space-22); }
.mr-25 { margin-right: var(--space-25); }
.mr-30 { margin-right: var(--space-30); }
.mr-32 { margin-right: var(--space-32); }
.mr-33 { margin-right: var(--space-33); }
.mr-34 { margin-right: var(--space-34); }
.mr-36 { margin-right: var(--space-36); }
.mr-37 { margin-right: var(--space-37); }
.mr-40 { margin-right: var(--space-40); }
.mr-44 { margin-right: var(--space-44); }
.mr-50 { margin-right: var(--space-50); }
.mr-61 { margin-right: var(--space-61); }
.mr-64 { margin-right: var(--space-64); }
.mr-72 { margin-right: var(--space-72); }

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

/* ========================================
   spacing - padding
======================================== */
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7-6 { padding: var(--space-7-6); }
.p-9 { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-12-5 { padding: var(--space-12-5); }
.p-13 { padding: var(--space-13); }
.p-14 { padding: var(--space-14); }
.p-15 { padding: var(--space-15); }
.p-16 { padding: var(--space-16); }
.p-18 { padding: var(--space-18); }
.p-20 { padding: var(--space-20); }
.p-21 { padding: var(--space-21); }
.p-22 { padding: var(--space-22); }
.p-25 { padding: var(--space-25); }
.p-30 { padding: var(--space-30); }
.p-32 { padding: var(--space-32); }
.p-33 { padding: var(--space-33); }
.p-34 { padding: var(--space-34); }
.p-36 { padding: var(--space-36); }
.p-37 { padding: var(--space-37); }
.p-40 { padding: var(--space-40); }
.p-44 { padding: var(--space-44); }
.p-50 { padding: var(--space-50); }
.p-61 { padding: var(--space-61); }
.p-64 { padding: var(--space-64); }
.p-72 { padding: var(--space-72); }

.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7-6 { padding-left: var(--space-7-6); padding-right: var(--space-7-6); }
.px-9 { padding-left: var(--space-9); padding-right: var(--space-9); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-12-5 { padding-left: var(--space-12-5); padding-right: var(--space-12-5); }
.px-13 { padding-left: var(--space-13); padding-right: var(--space-13); }
.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-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-18 { padding-left: var(--space-18); padding-right: var(--space-18); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-21 { padding-left: var(--space-21); padding-right: var(--space-21); }
.px-22 { padding-left: var(--space-22); padding-right: var(--space-22); }
.px-25 { padding-left: var(--space-25); padding-right: var(--space-25); }
.px-30 { padding-left: var(--space-30); padding-right: var(--space-30); }
.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }
.px-33 { padding-left: var(--space-33); padding-right: var(--space-33); }
.px-34 { padding-left: var(--space-34); padding-right: var(--space-34); }
.px-36 { padding-left: var(--space-36); padding-right: var(--space-36); }
.px-37 { padding-left: var(--space-37); padding-right: var(--space-37); }
.px-40 { padding-left: var(--space-40); padding-right: var(--space-40); }
.px-44 { padding-left: var(--space-44); padding-right: var(--space-44); }
.px-50 { padding-left: var(--space-50); padding-right: var(--space-50); }
.px-61 { padding-left: var(--space-61); padding-right: var(--space-61); }
.px-64 { padding-left: var(--space-64); padding-right: var(--space-64); }
.px-72 { padding-left: var(--space-72); padding-right: var(--space-72); }

.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7-6 { padding-top: var(--space-7-6); padding-bottom: var(--space-7-6); }
.py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-12-5 { padding-top: var(--space-12-5); padding-bottom: var(--space-12-5); }
.py-13 { padding-top: var(--space-13); padding-bottom: var(--space-13); }
.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-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-21 { padding-top: var(--space-21); padding-bottom: var(--space-21); }
.py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); }
.py-25 { padding-top: var(--space-25); padding-bottom: var(--space-25); }
.py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); }
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.py-33 { padding-top: var(--space-33); padding-bottom: var(--space-33); }
.py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); }
.py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); }
.py-37 { padding-top: var(--space-37); padding-bottom: var(--space-37); }
.py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); }
.py-50 { padding-top: var(--space-50); padding-bottom: var(--space-50); }
.py-61 { padding-top: var(--space-61); padding-bottom: var(--space-61); }
.py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); }
.py-72 { padding-top: var(--space-72); padding-bottom: var(--space-72); }

/* ========================================
   gap
======================================== */
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7-6 { gap: var(--space-7-6); }
.gap-9 { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-12-5 { gap: var(--space-12-5); }
.gap-13 { gap: var(--space-13); }
.gap-14 { gap: var(--space-14); }
.gap-15 { gap: var(--space-15); }
.gap-16 { gap: var(--space-16); }
.gap-18 { gap: var(--space-18); }
.gap-20 { gap: var(--space-20); }
.gap-21 { gap: var(--space-21); }
.gap-22 { gap: var(--space-22); }
.gap-25 { gap: var(--space-25); }
.gap-30 { gap: var(--space-30); }
.gap-32 { gap: var(--space-32); }
.gap-33 { gap: var(--space-33); }
.gap-34 { gap: var(--space-34); }
.gap-36 { gap: var(--space-36); }
.gap-37 { gap: var(--space-37); }
.gap-40 { gap: var(--space-40); }
.gap-44 { gap: var(--space-44); }
.gap-50 { gap: var(--space-50); }
.gap-61 { gap: var(--space-61); }
.gap-64 { gap: var(--space-64); }
.gap-72 { gap: var(--space-72); }

/* ========================================
   container / section
======================================== */
section {
    width: 100%;
    padding-bottom: var(--space-64);
}

.inner {
    max-width: var(--layout-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.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);
}

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

/* =========================
   Train Type Color Utilities
========================= */

/* KTX, KTX-산천(A-type), KTX-산천(B-type), KTX-이음, KTX-청룡 */
.u-train-ktx {
  background-color: var(--bg-ktx);
  color: var(--c-ktx);
}

/* ITX-새마을, ITX-청춘, ITX-마음 */
.u-train-itx {
  background-color: var(--bg-itx);
  color: var(--c-itx);
}

/* 무궁화호, SRT */
.u-train-mg {
  background-color: var(--bg-mg);
  color: var(--c-mg);
}

/* 통근열차, AREX직통 */
.u-train-cm {
  background-color: var(--bg-cm);
  color: var(--c-cm);
}

/* 누리로, 새마을호 */
.u-train-nr {
  background-color: var(--bg-nr);
  color: var(--c-nr);
}

/* =========================
   반응형
========================= */