/**
 * Custom Flex & Grid Utility Classes (Tailwind Style)
 * @author 신희대
 * @date 2025-01-14
 * @description Tailwind CSS 스타일의 Flexbox/Grid 유틸리티 클래스
 */

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

/* ============================================================================
   [2] Flex Direction
   ============================================================================ */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* ============================================================================
   [3] Flex Wrap
   ============================================================================ */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* ============================================================================
   [4] Justify Content (Main Axis)
   ============================================================================ */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* ============================================================================
   [5] Align Items (Cross Axis)
   ============================================================================ */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* ============================================================================
   [6] Align Content (Multi-line Cross Axis)
   ============================================================================ */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }
.content-stretch { align-content: stretch; }

/* ============================================================================
   [7] Align Self (Individual Item)
   ============================================================================ */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

/* ============================================================================
   [8] Flex (Shorthand)
   - flex-1 ~ flex-12: 비율 기반 분배
   - flex-auto: 콘텐츠 기반 자동 크기
   - flex-initial: 축소만 허용
   - flex-none: 고정 크기
   ============================================================================ */
.flex-1 { flex: 1 1 0%; }
.flex-2 { flex: 2 1 0%; }
.flex-3 { flex: 3 1 0%; }
.flex-4 { flex: 4 1 0%; }
.flex-5 { flex: 5 1 0%; }
.flex-6 { flex: 6 1 0%; }
.flex-7 { flex: 7 1 0%; }
.flex-8 { flex: 8 1 0%; }
.flex-9 { flex: 9 1 0%; }
.flex-10 { flex: 10 1 0%; }
.flex-11 { flex: 11 1 0%; }
.flex-12 { flex: 12 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* ============================================================================
   [9] Flex Grow (확장 비율) - 0 ~ 12
   ============================================================================ */
.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }
.grow-3 { flex-grow: 3; }
.grow-4 { flex-grow: 4; }
.grow-5 { flex-grow: 5; }
.grow-6 { flex-grow: 6; }
.grow-7 { flex-grow: 7; }
.grow-8 { flex-grow: 8; }
.grow-9 { flex-grow: 9; }
.grow-10 { flex-grow: 10; }
.grow-11 { flex-grow: 11; }
.grow-12 { flex-grow: 12; }

/* ============================================================================
   [10] Flex Shrink (축소 비율)
   ============================================================================ */
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }
.shrink-2 { flex-shrink: 2; }
.shrink-3 { flex-shrink: 3; }

/* ============================================================================
   [11] Flex Basis (기본 크기)
   ============================================================================ */
.basis-0 { flex-basis: 0; }
.basis-auto { flex-basis: auto; }
.basis-full { flex-basis: 100%; }
.basis-1\/2 { flex-basis: 50%; }
.basis-1\/3 { flex-basis: 33.333333%; }
.basis-2\/3 { flex-basis: 66.666667%; }
.basis-1\/4 { flex-basis: 25%; }
.basis-2\/4 { flex-basis: 50%; }
.basis-3\/4 { flex-basis: 75%; }
.basis-1\/5 { flex-basis: 20%; }
.basis-2\/5 { flex-basis: 40%; }
.basis-3\/5 { flex-basis: 60%; }
.basis-4\/5 { flex-basis: 80%; }
.basis-1\/6 { flex-basis: 16.666667%; }
.basis-5\/6 { flex-basis: 83.333333%; }
.basis-1\/12 { flex-basis: 8.333333%; }
.basis-2\/12 { flex-basis: 16.666667%; }
.basis-3\/12 { flex-basis: 25%; }
.basis-4\/12 { flex-basis: 33.333333%; }
.basis-5\/12 { flex-basis: 41.666667%; }
.basis-6\/12 { flex-basis: 50%; }
.basis-7\/12 { flex-basis: 58.333333%; }
.basis-8\/12 { flex-basis: 66.666667%; }
.basis-9\/12 { flex-basis: 75%; }
.basis-10\/12 { flex-basis: 83.333333%; }
.basis-11\/12 { flex-basis: 91.666667%; }

/* ============================================================================
   [12] Order
   ============================================================================ */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* ============================================================================
   [13] Gap (Flex & Grid)
   ============================================================================ */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-9 { gap: 2.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

/* Gap X (Horizontal) */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }

/* Gap Y (Vertical) */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }

/* ============================================================================
   [14] Grid Template Columns
   ============================================================================ */
.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)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* ============================================================================
   [15] Grid Template Rows
   ============================================================================ */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

/* ============================================================================
   [16] Grid Column Span
   ============================================================================ */
.col-auto { grid-column: auto; }
.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; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid Column Start */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-auto { grid-column-start: auto; }

/* Grid Column End */
.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-8 { grid-column-end: 8; }
.col-end-9 { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }
.col-end-auto { grid-column-end: auto; }

/* ============================================================================
   [17] Grid Row Span
   ============================================================================ */
.row-auto { grid-row: auto; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid Row Start */
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }
.row-start-auto { grid-row-start: auto; }

/* Grid Row End */
.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }
.row-end-auto { grid-row-end: auto; }

/* ============================================================================
   [18] Grid Auto Flow
   ============================================================================ */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* ============================================================================
   [19] Place Content (Grid Shorthand)
   ============================================================================ */
.place-content-start { place-content: start; }
.place-content-end { place-content: end; }
.place-content-center { place-content: center; }
.place-content-between { place-content: space-between; }
.place-content-around { place-content: space-around; }
.place-content-evenly { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

/* ============================================================================
   [20] Place Items (Grid Shorthand)
   ============================================================================ */
.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-items-center { place-items: center; }
.place-items-baseline { place-items: baseline; }
.place-items-stretch { place-items: stretch; }

/* ============================================================================
   [21] Place Self (Grid Shorthand)
   ============================================================================ */
.place-self-auto { place-self: auto; }
.place-self-start { place-self: start; }
.place-self-end { place-self: end; }
.place-self-center { place-self: center; }
.place-self-stretch { place-self: stretch; }

/* ============================================================================
   [22] Width Utilities
   ============================================================================ */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-2\/4 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-1\/6 { width: 16.666667%; }
.w-5\/6 { width: 83.333333%; }

/* ============================================================================
   [23] Height Utilities
   ============================================================================ */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

/* ============================================================================
   [24] Common Flex Patterns (Shortcuts)
   ============================================================================ */
/* 수평 중앙 정렬 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 수직 중앙 정렬 (세로 방향) */
.flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 양쪽 정렬 + 수직 중앙 */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 왼쪽 정렬 + 수직 중앙 */
.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 오른쪽 정렬 + 수직 중앙 */
.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 세로 스택 (위에서 아래로) */
.flex-stack {
    display: flex;
    flex-direction: column;
}

/* 가로 스택 (왼쪽에서 오른쪽으로) */
.flex-row-stack {
    display: flex;
    flex-direction: row;
}

/* ============================================================================
   [25] Responsive Breakpoints (Optional)
   - sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
   ============================================================================ */

/* Medium (768px+) */
@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:grid { display: grid; }

    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }

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

    .md\:items-start { align-items: flex-start; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }

    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .md\:gap-4 { gap: 1rem; }
    .md\:gap-6 { gap: 1.5rem; }
    .md\:gap-8 { gap: 2rem; }

    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-1\/4 { width: 25%; }
    .md\:w-full { width: 100%; }
    .md\:w-auto { width: auto; }
}

/* Large (1024px+) */
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
    .lg\:grid { display: grid; }

    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }

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

    .lg\:items-start { align-items: flex-start; }
    .lg\:items-center { align-items: center; }
    .lg\:items-end { align-items: flex-end; }

    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .lg\:gap-4 { gap: 1rem; }
    .lg\:gap-6 { gap: 1.5rem; }
    .lg\:gap-8 { gap: 2rem; }
    .lg\:gap-10 { gap: 2.5rem; }

    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-1\/3 { width: 33.333333%; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-1\/5 { width: 20%; }
    .lg\:w-full { width: 100%; }
    .lg\:w-auto { width: auto; }
}

/* Extra Large (1280px+) */
@media (min-width: 1280px) {
    .xl\:flex { display: flex; }
    .xl\:hidden { display: none; }
    .xl\:grid { display: grid; }

    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .xl\:gap-6 { gap: 1.5rem; }
    .xl\:gap-8 { gap: 2rem; }
    .xl\:gap-10 { gap: 2.5rem; }
}

/* ============================================================================
   [26] Text Utilities
   ============================================================================ */
.text-pre-wrap { white-space: pre-wrap; }