/**
 * utility.css
 * ====================================================================
 * SNUH CMS 공용 유틸리티 클래스
 * --------------------------------------------------------------------
 *
 * ⚠️ 사용 원칙 (꼭 읽어주세요)
 *
 * 1. 이 파일은 "급할 때만" 쓰는 응급 처방입니다.
 *    - 정상 워크플로우는 페이지/컴포넌트 CSS에 의미있는 클래스명으로 정의
 *    - 예: <div class="notice-card"> + .notice-card { padding: 20px; }
 *
 * 2. 유틸리티 사용 허용 상황
 *    - 일회성 간격 미세 조정
 *    - 긴급 버그 수정 / 배포 전 급한 핫픽스
 *    - 프로토타이핑, 데모/테스트 페이지
 *    - 의미있는 클래스명을 만들기엔 과한 단순 수정
 *
 * 3. 남용 시 문제점
 *    - "왜 이 값이지?" 추적 불가 (디자인 의도 소실)
 *    - 디자인 시스템 정비 시 전수 조사 어려움
 *    - <div class="mt-20 mb-10 pt-5 pb-15 pl-10 pr-10 fs-14 fw-500 ...">
 *      → 유지보수 지옥, JSP 가독성 저하
 *
 * 4. 이 파일의 모든 클래스는 !important 를 포함합니다.
 *    - 이유: 페이지별 CSS를 확실히 덮어쓰기 위함 (유틸의 본래 역할)
 *    - 프로젝트 전반의 "!important 남용 금지" 규칙의 공식 예외
 *    - 그만큼 신중히 사용하시고, 가능하면 컴포넌트 CSS로 이전 권장
 *
 * 5. 값 변경 시에는 :root 변수만 수정하면 일괄 반영됩니다.
 * ====================================================================
 */

/* ========================================================================
 * Design Tokens
 * ====================================================================== */
:root {
  /* Spacing scale (px) */
  --sp-0:   0;
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-5:   5px;
  --sp-8:   8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-15:  15px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-25:  25px;
  --sp-30:  30px;
  --sp-40:  40px;
  --sp-50:  50px;
  --sp-60:  60px;
  --sp-80:  80px;
  --sp-100: 100px;

  /* Font size (px) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Border radius (px) */
  --rd-0:   0;
  --rd-4:   4px;
  --rd-8:   8px;
  --rd-12:  12px;
  --rd-16:  16px;
  --rd-20:  20px;
}

/* ========================================================================
 * Padding
 * ====================================================================== */

/* Padding - All sides */
.p-0   { padding: var(--sp-0)   !important; }
.p-2   { padding: var(--sp-2)   !important; }
.p-4   { padding: var(--sp-4)   !important; }
.p-5   { padding: var(--sp-5)   !important; }
.p-8   { padding: var(--sp-8)   !important; }
.p-10  { padding: var(--sp-10)  !important; }
.p-12  { padding: var(--sp-12)  !important; }
.p-15  { padding: var(--sp-15)  !important; }
.p-16  { padding: var(--sp-16)  !important; }
.p-20  { padding: var(--sp-20)  !important; }
.p-24  { padding: var(--sp-24)  !important; }
.p-25  { padding: var(--sp-25)  !important; }
.p-30  { padding: var(--sp-30)  !important; }
.p-40  { padding: var(--sp-40)  !important; }
.p-50  { padding: var(--sp-50)  !important; }
.p-60  { padding: var(--sp-60)  !important; }
.p-80  { padding: var(--sp-80)  !important; }
.p-100 { padding: var(--sp-100) !important; }

/* Padding - Top */
.pt-0   { padding-top: var(--sp-0)   !important; }
.pt-2   { padding-top: var(--sp-2)   !important; }
.pt-4   { padding-top: var(--sp-4)   !important; }
.pt-5   { padding-top: var(--sp-5)   !important; }
.pt-8   { padding-top: var(--sp-8)   !important; }
.pt-10  { padding-top: var(--sp-10)  !important; }
.pt-12  { padding-top: var(--sp-12)  !important; }
.pt-15  { padding-top: var(--sp-15)  !important; }
.pt-16  { padding-top: var(--sp-16)  !important; }
.pt-20  { padding-top: var(--sp-20)  !important; }
.pt-24  { padding-top: var(--sp-24)  !important; }
.pt-25  { padding-top: var(--sp-25)  !important; }
.pt-30  { padding-top: var(--sp-30)  !important; }
.pt-40  { padding-top: var(--sp-40)  !important; }
.pt-50  { padding-top: var(--sp-50)  !important; }
.pt-60  { padding-top: var(--sp-60)  !important; }
.pt-80  { padding-top: var(--sp-80)  !important; }
.pt-100 { padding-top: var(--sp-100) !important; }

/* Padding - Bottom */
.pb-0   { padding-bottom: var(--sp-0)   !important; }
.pb-2   { padding-bottom: var(--sp-2)   !important; }
.pb-4   { padding-bottom: var(--sp-4)   !important; }
.pb-5   { padding-bottom: var(--sp-5)   !important; }
.pb-8   { padding-bottom: var(--sp-8)   !important; }
.pb-10  { padding-bottom: var(--sp-10)  !important; }
.pb-12  { padding-bottom: var(--sp-12)  !important; }
.pb-15  { padding-bottom: var(--sp-15)  !important; }
.pb-16  { padding-bottom: var(--sp-16)  !important; }
.pb-20  { padding-bottom: var(--sp-20)  !important; }
.pb-24  { padding-bottom: var(--sp-24)  !important; }
.pb-25  { padding-bottom: var(--sp-25)  !important; }
.pb-30  { padding-bottom: var(--sp-30)  !important; }
.pb-40  { padding-bottom: var(--sp-40)  !important; }
.pb-50  { padding-bottom: var(--sp-50)  !important; }
.pb-60  { padding-bottom: var(--sp-60)  !important; }
.pb-80  { padding-bottom: var(--sp-80)  !important; }
.pb-100 { padding-bottom: var(--sp-100) !important; }

/* Padding - Left */
.pl-0   { padding-left: var(--sp-0)   !important; }
.pl-2   { padding-left: var(--sp-2)   !important; }
.pl-4   { padding-left: var(--sp-4)   !important; }
.pl-5   { padding-left: var(--sp-5)   !important; }
.pl-8   { padding-left: var(--sp-8)   !important; }
.pl-10  { padding-left: var(--sp-10)  !important; }
.pl-12  { padding-left: var(--sp-12)  !important; }
.pl-15  { padding-left: var(--sp-15)  !important; }
.pl-16  { padding-left: var(--sp-16)  !important; }
.pl-20  { padding-left: var(--sp-20)  !important; }
.pl-24  { padding-left: var(--sp-24)  !important; }
.pl-25  { padding-left: var(--sp-25)  !important; }
.pl-30  { padding-left: var(--sp-30)  !important; }
.pl-40  { padding-left: var(--sp-40)  !important; }
.pl-50  { padding-left: var(--sp-50)  !important; }
.pl-60  { padding-left: var(--sp-60)  !important; }
.pl-80  { padding-left: var(--sp-80)  !important; }
.pl-100 { padding-left: var(--sp-100) !important; }

/* Padding - Right */
.pr-0   { padding-right: var(--sp-0)   !important; }
.pr-2   { padding-right: var(--sp-2)   !important; }
.pr-4   { padding-right: var(--sp-4)   !important; }
.pr-5   { padding-right: var(--sp-5)   !important; }
.pr-8   { padding-right: var(--sp-8)   !important; }
.pr-10  { padding-right: var(--sp-10)  !important; }
.pr-12  { padding-right: var(--sp-12)  !important; }
.pr-15  { padding-right: var(--sp-15)  !important; }
.pr-16  { padding-right: var(--sp-16)  !important; }
.pr-20  { padding-right: var(--sp-20)  !important; }
.pr-24  { padding-right: var(--sp-24)  !important; }
.pr-25  { padding-right: var(--sp-25)  !important; }
.pr-30  { padding-right: var(--sp-30)  !important; }
.pr-40  { padding-right: var(--sp-40)  !important; }
.pr-50  { padding-right: var(--sp-50)  !important; }
.pr-60  { padding-right: var(--sp-60)  !important; }
.pr-80  { padding-right: var(--sp-80)  !important; }
.pr-100 { padding-right: var(--sp-100) !important; }

/* Padding - X (Left + Right) */
.px-0   { padding-left: var(--sp-0)   !important; padding-right: var(--sp-0)   !important; }
.px-2   { padding-left: var(--sp-2)   !important; padding-right: var(--sp-2)   !important; }
.px-4   { padding-left: var(--sp-4)   !important; padding-right: var(--sp-4)   !important; }
.px-5   { padding-left: var(--sp-5)   !important; padding-right: var(--sp-5)   !important; }
.px-8   { padding-left: var(--sp-8)   !important; padding-right: var(--sp-8)   !important; }
.px-10  { padding-left: var(--sp-10)  !important; padding-right: var(--sp-10)  !important; }
.px-12  { padding-left: var(--sp-12)  !important; padding-right: var(--sp-12)  !important; }
.px-15  { padding-left: var(--sp-15)  !important; padding-right: var(--sp-15)  !important; }
.px-16  { padding-left: var(--sp-16)  !important; padding-right: var(--sp-16)  !important; }
.px-20  { padding-left: var(--sp-20)  !important; padding-right: var(--sp-20)  !important; }
.px-24  { padding-left: var(--sp-24)  !important; padding-right: var(--sp-24)  !important; }
.px-25  { padding-left: var(--sp-25)  !important; padding-right: var(--sp-25)  !important; }
.px-30  { padding-left: var(--sp-30)  !important; padding-right: var(--sp-30)  !important; }
.px-40  { padding-left: var(--sp-40)  !important; padding-right: var(--sp-40)  !important; }
.px-50  { padding-left: var(--sp-50)  !important; padding-right: var(--sp-50)  !important; }
.px-60  { padding-left: var(--sp-60)  !important; padding-right: var(--sp-60)  !important; }
.px-80  { padding-left: var(--sp-80)  !important; padding-right: var(--sp-80)  !important; }
.px-100 { padding-left: var(--sp-100) !important; padding-right: var(--sp-100) !important; }

/* Padding - Y (Top + Bottom) */
.py-0   { padding-top: var(--sp-0)   !important; padding-bottom: var(--sp-0)   !important; }
.py-2   { padding-top: var(--sp-2)   !important; padding-bottom: var(--sp-2)   !important; }
.py-4   { padding-top: var(--sp-4)   !important; padding-bottom: var(--sp-4)   !important; }
.py-5   { padding-top: var(--sp-5)   !important; padding-bottom: var(--sp-5)   !important; }
.py-8   { padding-top: var(--sp-8)   !important; padding-bottom: var(--sp-8)   !important; }
.py-10  { padding-top: var(--sp-10)  !important; padding-bottom: var(--sp-10)  !important; }
.py-12  { padding-top: var(--sp-12)  !important; padding-bottom: var(--sp-12)  !important; }
.py-15  { padding-top: var(--sp-15)  !important; padding-bottom: var(--sp-15)  !important; }
.py-16  { padding-top: var(--sp-16)  !important; padding-bottom: var(--sp-16)  !important; }
.py-20  { padding-top: var(--sp-20)  !important; padding-bottom: var(--sp-20)  !important; }
.py-24  { padding-top: var(--sp-24)  !important; padding-bottom: var(--sp-24)  !important; }
.py-25  { padding-top: var(--sp-25)  !important; padding-bottom: var(--sp-25)  !important; }
.py-30  { padding-top: var(--sp-30)  !important; padding-bottom: var(--sp-30)  !important; }
.py-40  { padding-top: var(--sp-40)  !important; padding-bottom: var(--sp-40)  !important; }
.py-50  { padding-top: var(--sp-50)  !important; padding-bottom: var(--sp-50)  !important; }
.py-60  { padding-top: var(--sp-60)  !important; padding-bottom: var(--sp-60)  !important; }
.py-80  { padding-top: var(--sp-80)  !important; padding-bottom: var(--sp-80)  !important; }
.py-100 { padding-top: var(--sp-100) !important; padding-bottom: var(--sp-100) !important; }

/* ========================================================================
 * Margin
 * ====================================================================== */

/* Margin - All sides */
.m-0   { margin: var(--sp-0)   !important; }
.m-2   { margin: var(--sp-2)   !important; }
.m-4   { margin: var(--sp-4)   !important; }
.m-5   { margin: var(--sp-5)   !important; }
.m-8   { margin: var(--sp-8)   !important; }
.m-10  { margin: var(--sp-10)  !important; }
.m-12  { margin: var(--sp-12)  !important; }
.m-15  { margin: var(--sp-15)  !important; }
.m-16  { margin: var(--sp-16)  !important; }
.m-20  { margin: var(--sp-20)  !important; }
.m-24  { margin: var(--sp-24)  !important; }
.m-25  { margin: var(--sp-25)  !important; }
.m-30  { margin: var(--sp-30)  !important; }
.m-40  { margin: var(--sp-40)  !important; }
.m-50  { margin: var(--sp-50)  !important; }
.m-60  { margin: var(--sp-60)  !important; }
.m-80  { margin: var(--sp-80)  !important; }
.m-100 { margin: var(--sp-100) !important; }
.m-auto { margin: auto !important; }

/* Margin - Top */
.mt-0   { margin-top: var(--sp-0)   !important; }
.mt-2   { margin-top: var(--sp-2)   !important; }
.mt-4   { margin-top: var(--sp-4)   !important; }
.mt-5   { margin-top: var(--sp-5)   !important; }
.mt-8   { margin-top: var(--sp-8)   !important; }
.mt-10  { margin-top: var(--sp-10)  !important; }
.mt-12  { margin-top: var(--sp-12)  !important; }
.mt-15  { margin-top: var(--sp-15)  !important; }
.mt-16  { margin-top: var(--sp-16)  !important; }
.mt-20  { margin-top: var(--sp-20)  !important; }
.mt-24  { margin-top: var(--sp-24)  !important; }
.mt-25  { margin-top: var(--sp-25)  !important; }
.mt-30  { margin-top: var(--sp-30)  !important; }
.mt-40  { margin-top: var(--sp-40)  !important; }
.mt-50  { margin-top: var(--sp-50)  !important; }
.mt-60  { margin-top: var(--sp-60)  !important; }
.mt-80  { margin-top: var(--sp-80)  !important; }
.mt-100 { margin-top: var(--sp-100) !important; }

/* Margin - Bottom */
.mb-0   { margin-bottom: var(--sp-0)   !important; }
.mb-2   { margin-bottom: var(--sp-2)   !important; }
.mb-4   { margin-bottom: var(--sp-4)   !important; }
.mb-5   { margin-bottom: var(--sp-5)   !important; }
.mb-8   { margin-bottom: var(--sp-8)   !important; }
.mb-10  { margin-bottom: var(--sp-10)  !important; }
.mb-12  { margin-bottom: var(--sp-12)  !important; }
.mb-15  { margin-bottom: var(--sp-15)  !important; }
.mb-16  { margin-bottom: var(--sp-16)  !important; }
.mb-20  { margin-bottom: var(--sp-20)  !important; }
.mb-24  { margin-bottom: var(--sp-24)  !important; }
.mb-25  { margin-bottom: var(--sp-25)  !important; }
.mb-30  { margin-bottom: var(--sp-30)  !important; }
.mb-40  { margin-bottom: var(--sp-40)  !important; }
.mb-50  { margin-bottom: var(--sp-50)  !important; }
.mb-60  { margin-bottom: var(--sp-60)  !important; }
.mb-80  { margin-bottom: var(--sp-80)  !important; }
.mb-100 { margin-bottom: var(--sp-100) !important; }

/* Margin - Left */
.ml-0   { margin-left: var(--sp-0)   !important; }
.ml-2   { margin-left: var(--sp-2)   !important; }
.ml-4   { margin-left: var(--sp-4)   !important; }
.ml-5   { margin-left: var(--sp-5)   !important; }
.ml-8   { margin-left: var(--sp-8)   !important; }
.ml-10  { margin-left: var(--sp-10)  !important; }
.ml-12  { margin-left: var(--sp-12)  !important; }
.ml-15  { margin-left: var(--sp-15)  !important; }
.ml-16  { margin-left: var(--sp-16)  !important; }
.ml-20  { margin-left: var(--sp-20)  !important; }
.ml-24  { margin-left: var(--sp-24)  !important; }
.ml-25  { margin-left: var(--sp-25)  !important; }
.ml-30  { margin-left: var(--sp-30)  !important; }
.ml-40  { margin-left: var(--sp-40)  !important; }
.ml-50  { margin-left: var(--sp-50)  !important; }
.ml-60  { margin-left: var(--sp-60)  !important; }
.ml-80  { margin-left: var(--sp-80)  !important; }
.ml-100 { margin-left: var(--sp-100) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin - Right */
.mr-0   { margin-right: var(--sp-0)   !important; }
.mr-2   { margin-right: var(--sp-2)   !important; }
.mr-4   { margin-right: var(--sp-4)   !important; }
.mr-5   { margin-right: var(--sp-5)   !important; }
.mr-8   { margin-right: var(--sp-8)   !important; }
.mr-10  { margin-right: var(--sp-10)  !important; }
.mr-12  { margin-right: var(--sp-12)  !important; }
.mr-15  { margin-right: var(--sp-15)  !important; }
.mr-16  { margin-right: var(--sp-16)  !important; }
.mr-20  { margin-right: var(--sp-20)  !important; }
.mr-24  { margin-right: var(--sp-24)  !important; }
.mr-25  { margin-right: var(--sp-25)  !important; }
.mr-30  { margin-right: var(--sp-30)  !important; }
.mr-40  { margin-right: var(--sp-40)  !important; }
.mr-50  { margin-right: var(--sp-50)  !important; }
.mr-60  { margin-right: var(--sp-60)  !important; }
.mr-80  { margin-right: var(--sp-80)  !important; }
.mr-100 { margin-right: var(--sp-100) !important; }
.mr-auto { margin-right: auto !important; }

/* Margin - X (Left + Right) */
.mx-0   { margin-left: var(--sp-0)   !important; margin-right: var(--sp-0)   !important; }
.mx-2   { margin-left: var(--sp-2)   !important; margin-right: var(--sp-2)   !important; }
.mx-4   { margin-left: var(--sp-4)   !important; margin-right: var(--sp-4)   !important; }
.mx-5   { margin-left: var(--sp-5)   !important; margin-right: var(--sp-5)   !important; }
.mx-8   { margin-left: var(--sp-8)   !important; margin-right: var(--sp-8)   !important; }
.mx-10  { margin-left: var(--sp-10)  !important; margin-right: var(--sp-10)  !important; }
.mx-12  { margin-left: var(--sp-12)  !important; margin-right: var(--sp-12)  !important; }
.mx-15  { margin-left: var(--sp-15)  !important; margin-right: var(--sp-15)  !important; }
.mx-16  { margin-left: var(--sp-16)  !important; margin-right: var(--sp-16)  !important; }
.mx-20  { margin-left: var(--sp-20)  !important; margin-right: var(--sp-20)  !important; }
.mx-24  { margin-left: var(--sp-24)  !important; margin-right: var(--sp-24)  !important; }
.mx-25  { margin-left: var(--sp-25)  !important; margin-right: var(--sp-25)  !important; }
.mx-30  { margin-left: var(--sp-30)  !important; margin-right: var(--sp-30)  !important; }
.mx-40  { margin-left: var(--sp-40)  !important; margin-right: var(--sp-40)  !important; }
.mx-50  { margin-left: var(--sp-50)  !important; margin-right: var(--sp-50)  !important; }
.mx-60  { margin-left: var(--sp-60)  !important; margin-right: var(--sp-60)  !important; }
.mx-80  { margin-left: var(--sp-80)  !important; margin-right: var(--sp-80)  !important; }
.mx-100 { margin-left: var(--sp-100) !important; margin-right: var(--sp-100) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin - Y (Top + Bottom) */
.my-0   { margin-top: var(--sp-0)   !important; margin-bottom: var(--sp-0)   !important; }
.my-2   { margin-top: var(--sp-2)   !important; margin-bottom: var(--sp-2)   !important; }
.my-4   { margin-top: var(--sp-4)   !important; margin-bottom: var(--sp-4)   !important; }
.my-5   { margin-top: var(--sp-5)   !important; margin-bottom: var(--sp-5)   !important; }
.my-8   { margin-top: var(--sp-8)   !important; margin-bottom: var(--sp-8)   !important; }
.my-10  { margin-top: var(--sp-10)  !important; margin-bottom: var(--sp-10)  !important; }
.my-12  { margin-top: var(--sp-12)  !important; margin-bottom: var(--sp-12)  !important; }
.my-15  { margin-top: var(--sp-15)  !important; margin-bottom: var(--sp-15)  !important; }
.my-16  { margin-top: var(--sp-16)  !important; margin-bottom: var(--sp-16)  !important; }
.my-20  { margin-top: var(--sp-20)  !important; margin-bottom: var(--sp-20)  !important; }
.my-24  { margin-top: var(--sp-24)  !important; margin-bottom: var(--sp-24)  !important; }
.my-25  { margin-top: var(--sp-25)  !important; margin-bottom: var(--sp-25)  !important; }
.my-30  { margin-top: var(--sp-30)  !important; margin-bottom: var(--sp-30)  !important; }
.my-40  { margin-top: var(--sp-40)  !important; margin-bottom: var(--sp-40)  !important; }
.my-50  { margin-top: var(--sp-50)  !important; margin-bottom: var(--sp-50)  !important; }
.my-60  { margin-top: var(--sp-60)  !important; margin-bottom: var(--sp-60)  !important; }
.my-80  { margin-top: var(--sp-80)  !important; margin-bottom: var(--sp-80)  !important; }
.my-100 { margin-top: var(--sp-100) !important; margin-bottom: var(--sp-100) !important; }

/* ========================================================================
 * Display
 * ====================================================================== */
.d-none         { display: none         !important; }
.d-block        { display: block        !important; }
.d-inline       { display: inline       !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex         !important; }
.d-inline-flex  { display: inline-flex  !important; }

/* ========================================================================
 * Flex
 * ====================================================================== */

/* Flex direction */
.flex-row         { flex-direction: row         !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col         { flex-direction: column      !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-wrap    { flex-wrap: wrap    !important; }
.flex-nowrap  { flex-wrap: nowrap  !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify content (main axis) */
.justify-start   { justify-content: flex-start    !important; }
.justify-end     { justify-content: flex-end      !important; }
.justify-center  { justify-content: center        !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around  !important; }
.justify-evenly  { justify-content: space-evenly  !important; }

/* Align items (cross axis) */
.items-start    { align-items: flex-start !important; }
.items-end      { align-items: flex-end   !important; }
.items-center   { align-items: center     !important; }
.items-baseline { align-items: baseline   !important; }
.items-stretch  { align-items: stretch    !important; }

/* Align self */
.self-start    { align-self: flex-start !important; }
.self-end      { align-self: flex-end   !important; }
.self-center   { align-self: center     !important; }
.self-baseline { align-self: baseline   !important; }
.self-stretch  { align-self: stretch    !important; }

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

/* ========================================================================
 * Text align
 * ====================================================================== */
.text-left    { text-align: left    !important; }
.text-center  { text-align: center  !important; }
.text-right   { text-align: right   !important; }
.text-justify { text-align: justify !important; }

/* ========================================================================
 * Text ellipsis (말줄임)
 * ====================================================================== */

/* 한 줄 말줄임 */
.ellipsis {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 2줄 말줄임 */
.ellipsis-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* 3줄 말줄임 */
.ellipsis-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* ========================================================================
 * Width / Height
 * ====================================================================== */
.w-auto  { width: auto !important; }
.w-10   { width: 10% !important; }
.w-25   { width: 25% !important; }
.w-50   { width: 50% !important; }
.w-75   { width: 75% !important; }
.w-100   { width: 100% !important; }
.mw-100  { max-width: 100% !important; }

.h-auto  { height: auto !important; }
.h-100   { height: 100% !important; }
.mh-100  { max-height: 100% !important; }

.vw-100  { width: 100vw !important; }
.vh-100  { height: 100vh !important; }

/* ========================================================================
 * Column width (table colgroup/th/td) — 인라인 style="width:.." 대체용
 * ====================================================================== */
.col-w-60    { width: 60px !important; }
.col-w-64    { width: 64px !important; }
.col-w-70    { width: 70px !important; }
.col-w-80    { width: 80px !important; }
.col-w-90    { width: 90px !important; }
.col-w-120   { width: 120px !important; }
.col-w-130   { width: 130px !important; }
.col-w-140   { width: 140px !important; }
.col-w-160   { width: 160px !important; }
.col-w-180   { width: 180px !important; }
.col-w-200   { width: 200px !important; }
.col-w-220   { width: 220px !important; }
.col-w-240   { width: 240px !important; }
.col-w-280   { width: 280px !important; }

.col-w-15p   { width: 15% !important; }
.col-w-18p   { width: 18% !important; }
.col-w-20p   { width: 20% !important; }
.col-w-22p   { width: 22% !important; }
.col-w-30p   { width: 30% !important; }
.col-w-38p   { width: 38% !important; }
.col-w-47p   { width: 47% !important; }
.col-w-50p   { width: 50% !important; }
.col-w-60p   { width: 60% !important; }
.col-w-70p   { width: 70% !important; }

/* 줄바꿈 방지 (테이블 셀 nowrap 인라인 대체) */
.u-nowrap   { white-space: nowrap !important; }

/* <small> 태그 리셋 — 브라우저 기본 83%(=13.33px) 축소 제거, 디자인 시스템 최소 단위(16px) 강제 */
small      { font-size: var(--fs-small); }

/* 테이블 No 컬럼 중앙 정렬 */
.td-num    { text-align: center !important; }

/* 테이블 빈 상태 (데이터 없음 메시지) */
.td-empty  { padding: 40px 0 !important; color: var(--color-gray-500) !important; text-align: center !important; }

/* ========================================================================
 * Font weight
 * ====================================================================== */
.fw-400 { font-weight: 400 !important; } /* Regular */
.fw-500 { font-weight: 500 !important; } /* Medium */
.fw-600 { font-weight: 600 !important; } /* Semibold */
.fw-700 { font-weight: 700 !important; } /* Bold */

/* ========================================================================
 * Font size
 * ⚠️ 주의: 가능하면 의미 기반 클래스(h1, .title-lg 등)를 우선 사용하세요.
 *        디자인 시스템 정비 시 폰트 크기 유틸의 전수 교체가 필요해질 수 있습니다.
 * ====================================================================== */
.fs-12 { font-size: var(--fs-12) !important; }
.fs-13 { font-size: var(--fs-13) !important; }
.fs-14 { font-size: var(--fs-14) !important; }
.fs-15 { font-size: var(--fs-15) !important; }
.fs-16 { font-size: var(--fs-16) !important; }
.fs-18 { font-size: var(--fs-18) !important; }
.fs-20 { font-size: var(--fs-20) !important; }
.fs-22 { font-size: var(--fs-22) !important; }
.fs-24 { font-size: var(--fs-24) !important; }
.fs-28 { font-size: var(--fs-28) !important; }
.fs-32 { font-size: var(--fs-32) !important; }
.fs-36 { font-size: var(--fs-36) !important; }
.fs-40 { font-size: var(--fs-40) !important; }
.fs-48 { font-size: var(--fs-48) !important; }

/* ========================================================================
 * Position
 * ====================================================================== */
.pos-static   { position: static   !important; }
.pos-relative { position: relative !important; }
.pos-absolute { position: absolute !important; }
.pos-fixed    { position: fixed    !important; }
.pos-sticky   { position: sticky   !important; }

/* ========================================================================
 * Overflow
 * ====================================================================== */
.overflow-visible { overflow: visible !important; }
.overflow-hidden  { overflow: hidden  !important; }
.overflow-scroll  { overflow: scroll  !important; }
.overflow-auto    { overflow: auto    !important; }

.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-hidden  { overflow-x: hidden  !important; }
.overflow-x-scroll  { overflow-x: scroll  !important; }
.overflow-x-auto    { overflow-x: auto    !important; }

.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-hidden  { overflow-y: hidden  !important; }
.overflow-y-scroll  { overflow-y: scroll  !important; }
.overflow-y-auto    { overflow-y: auto    !important; }

/* ========================================================================
 * Cursor
 * ====================================================================== */
.cursor-pointer     { cursor: pointer     !important; }
.cursor-default     { cursor: default     !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-wait        { cursor: wait        !important; }
.cursor-text        { cursor: text        !important; }

/* ========================================================================
 * Border radius
 * ====================================================================== */
.rounded-0      { border-radius: var(--rd-0)  !important; }
.rounded-4      { border-radius: var(--rd-4)  !important; }
.rounded-8      { border-radius: var(--rd-8)  !important; }
.rounded-12     { border-radius: var(--rd-12) !important; }
.rounded-16     { border-radius: var(--rd-16) !important; }
.rounded-20     { border-radius: var(--rd-20) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill   { border-radius: 9999px !important; }