/* ===== width (parent-based %) ===== */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.3333%; }
.w-2\/3 { width: 66.6667%; }
.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-3\/10 { width: 30%; }
.w-9\/10 { width: 90%; }

.w-20p { width: 20%; }
.w-30p { width: 30%; }
.w-40p { width: 40%; }
.w-50p { width: 50%; }

/* ===== width (fixed rem) ===== */
.w-10 { width: 1rem; }   /* 10px */
.w-20 { width: 2rem; }
.w-30 { width: 3rem; }
.w-40 { width: 4rem; }
.w-50 { width: 5rem; }
.w-60 { width: 6rem; }
.w-80 { width: 8rem; }
.w-100 { width: 10rem; }
.w-126 { width: 12.6rem; }
.w-180 { width: 18rem; }



@media (min-width: 1024px) {
    .lg\:w-50 { width: 5rem; }
    .lg\:w-60 { width: 6rem; }
    .lg\:w-200 { width: 20rem; }
    .lg\:w-280 { width: 28rem; }
    .lg\:w-350 { width: 35rem; }
    .lg\:w-400 { width: 40rem; }
    .lg\:w-500 { width: 50rem; }

    .lg\:w-1\/6 { width: 16%; }
    .lg\:w-1\/5 { width: 20%; }
    .lg\:w-1\/4{width: 25%; }
    .lg\:w-1\/3{width: 33.3333%; }
    .lg\:w-2\/3 { width: 66.6667%; }
    .lg\:w-1\/2{width: 50%; }
    .lg\:w-3\/5 { width: 60%; }
    .lg\:w-3\/4 { width: 75%; }
    .lg\:w-4\/5 { width: 80%; }

    .lg\:w-20p { width: 20%; }
    .lg\:w-25p { width: 25%; }
    .lg\:w-30p { width: 30%; }
    .lg\:w-70p { width: 70%; }
    .lg\:w-90p { width: 90%; }

    .lg\:w-full {
        width: 100%;
    }
}

/* ===== max-width (px) ===== */
.max-w-0    { max-width: 0; }

.max-w-50   { max-width: 50px; }
.max-w-80   { max-width: 80px; }
.max-w-100  { max-width: 100px; }
.max-w-120  { max-width: 120px; }
.max-w-150  { max-width: 150px; }

.max-w-200  { max-width: 200px; }
.max-w-250  { max-width: 250px; }
.max-w-300  { max-width: 300px; }
.max-w-350  { max-width: 350px; }
.max-w-400  { max-width: 400px; }

.max-w-500  { max-width: 500px; }
.max-w-600  { max-width: 600px; }
.max-w-800  { max-width: 800px; }
.max-w-1000 { max-width: 1000px; }


/* ===== max-width (%) ===== */
.max-w-10p  { max-width: 10%; }
.max-w-20p  { max-width: 20%; }
.max-w-25p  { max-width: 25%; }
.max-w-33p  { max-width: 33.3333%; }
.max-w-40p  { max-width: 40%; }
.max-w-50p  { max-width: 50%; }
.max-w-60p  { max-width: 60%; }
.max-w-66p  { max-width: 66.6667%; }
.max-w-70p  { max-width: 70%; }
.max-w-75p  { max-width: 75%; }
.max-w-80p  { max-width: 80%; }
.max-w-90p  { max-width: 90%; }
.max-w-100p { max-width: 100%; }

@media (min-width: 1024px) {

    /* ===== lg: max-width (px) ===== */
    .lg\:max-w-0    { max-width: 0; }

    .lg\:max-w-100  { max-width: 100px; }
    .lg\:max-w-200  { max-width: 200px; }
    .lg\:max-w-300  { max-width: 300px; }
    .lg\:max-w-400  { max-width: 400px; }
    .lg\:max-w-450  { max-width: 450px; }
    .lg\:max-w-500  { max-width: 500px; }
    .lg\:max-w-600  { max-width: 600px; }
    .lg\:max-w-800  { max-width: 800px; }

    /* ===== lg: max-width (%) ===== */
    .lg\:max-w-25p  { max-width: 25%; }
    .lg\:max-w-33p  { max-width: 33.3333%; }
    .lg\:max-w-40p  { max-width: 40%; }
    .lg\:max-w-50p  { max-width: 50%; }
    .lg\:max-w-60p  { max-width: 60%; }
    .lg\:max-w-66p  { max-width: 66.6667%; }
    .lg\:max-w-75p  { max-width: 75%; }
    .lg\:max-w-80p  { max-width: 80%; }
    .lg\:max-w-100p { max-width: 100%; }
}



/* ===== height utilities ===== */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }


/* ===== height scale (rem based) ===== */
.h-1  { height: 0.1rem; }   /* 1px */
.h-2  { height: 0.2rem; }   /* 2px */
.h-4  { height: 0.4rem; }   /* 4px */
.h-6  { height: 0.6rem; }   /* 6px */
.h-8  { height: 0.8rem; }   /* 8px */
.h-10 { height: 1rem; }     /* 10px */
.h-12 { height: 1.2rem; }
.h-15 { height: 1.5rem; }
.h-16 { height: 1.6rem; }
.h-20 { height: 2rem; }
.h-22 { height: 2.2rem; }
.h-24 { height: 2.4rem; }
.h-26 { height: 2.6rem; }
.h-32 { height: 3.2rem; }
.h-40 { height: 4rem; }
.h-41 { height: 4.1rem; }
.h-43 { height: 4.3rem; }
.h-48 { height: 4.8rem; }
.h-56 { height: 5.6rem; }
.h-64 { height: 6.4rem; }
.h-170 { height: 17rem; }
.h-200 { height: 20rem; }
.h-250 { height: 25rem; }
.h-300 { height: 30rem; }
.h-344 { height: 34.4rem; }
.h-400 { height: 40rem; }

/* ===== size (percent based) ===== */
.h-5p  { height: 5%; }
.h-6p  { height: 6%; }
.h-8p  { height: 8%; }
.h-10p { height: 10%; }
.h-20p { height: 20%; }
.h-100p { height: 100%; }

/* ===== height scale (lg: ≥1024px) ===== */
@media (min-width: 1024px) {

    .lg\:h-1   { height: 0.1rem; }   /* 1px */
    .lg\:h-2   { height: 0.2rem; }   /* 2px */
    .lg\:h-4   { height: 0.4rem; }   /* 4px */
    .lg\:h-6   { height: 0.6rem; }   /* 6px */
    .lg\:h-8   { height: 0.8rem; }   /* 8px */
    .lg\:h-10  { height: 1rem; }     /* 10px */
    .lg\:h-12  { height: 1.2rem; }
    .lg\:h-15  { height: 1.5rem; }
    .lg\:h-16  { height: 1.6rem; }
    .lg\:h-20  { height: 2rem; }
    .lg\:h-24  { height: 2.4rem; }
    .lg\:h-27  { height: 2.7rem; }
    .lg\:h-28  { height: 2.8rem; }
    .lg\:h-32  { height: 3.2rem; }
    .lg\:h-40  { height: 4rem; }
    .lg\:h-43  { height: 4.3rem; }
    .lg\:h-48  { height: 4.8rem; }
    .lg\:h-56  { height: 5.6rem; }
    .lg\:h-64  { height: 6.4rem; }
    .lg\:h-100 { height: 10rem; }
    .lg\:h-150 { height: 15rem; }
    .lg\:h-280 { height: 28rem; }
    .lg\:h-344 { height: 34.4rem; }
    .lg\:h-400 { height: 40rem; }

}






/* ===== max-height (px) ===== */
.max-h-0    { max-height: 0; }

.max-h-50   { max-height: 50px; }
.max-h-80   { max-height: 80px; }
.max-h-100  { max-height: 100px; }
.max-h-120  { max-height: 120px; }
.max-h-150  { max-height: 150px; }

.max-h-200  { max-height: 200px; }
.max-h-250  { max-height: 250px; }
.max-h-300  { max-height: 300px; }
.max-h-350  { max-height: 350px; }
.max-h-400  { max-height: 400px; }

.max-h-500  { max-height: 500px; }
.max-h-600  { max-height: 600px; }
.max-h-800  { max-height: 800px; }
.max-h-1000 { max-height: 1000px; }

@media (min-width: 1024px) {
    .lg\:max-h-0    { max-height: 0; }

    .lg\:max-h-100  { max-height: 100px; }
    .lg\:max-h-200  { max-height: 200px; }
    .lg\:max-h-300  { max-height: 300px; }
    .lg\:max-h-400  { max-height: 400px; }
    .lg\:max-h-450  { max-height: 450px; }
    .lg\:max-h-500  { max-height: 500px; }
    .lg\:max-h-600  { max-height: 600px; }
    .lg\:max-h-800  { max-height: 800px; }
    .lg\:h-5p  { height: 5%; }
    .lg\:h-6p  { height: 6%; }
    .lg\:h-8p  { height: 8%; }
}





@media (min-width: 1024px) {
    .lg\:relative{position: relative;}
    .lg\:absolute{position:absolute;}
    .lg\:static{position:static;}
}


/* ===== flex layout ===== */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

@media (min-width: 1024px) {

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

}


.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}


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

/* align */
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch{ align-items: stretch; }


/* ===== gap scale ===== */
.gap-0  { gap: 0; }
.gap-4  { gap: 0.4rem; }  /* 4px */
.gap-8  { gap: 0.8rem; }  /* 8px */
.gap-10 { gap: 1rem; }    /* 10px */
.gap-12 { gap: 1.2rem; }
.gap-16 { gap: 1.6rem; }
.gap-20 { gap: 2rem; }
.gap-24 { gap: 2.4rem; }
.gap-32 { gap: 3.2rem; }
.gap-36 { gap: 3.6rem; }

/* ===== order utilities ===== */
.order-0  { order: 0; }
.order-1  { order: 1; }
.order-2  { order: 2; }
.order-3  { order: 3; }
.order-4  { order: 4; }
.order-5  { order: 5; }

.order-first { order: -9999; }
.order-last  { order: 9999; }


@media (min-width: 1024px) {
    .lg\:order-0  { order: 0; }
    .lg\:order-1  { order: 1; }
    .lg\:order-2  { order: 2; }
    .lg\:order-3  { order: 3; }
    .lg\:order-4  { order: 4; }
    .lg\:order-5  { order: 5; }

    .lg\:order-first { order: -9999; }
    .lg\:order-last  { order: 9999; }
}



.none{display: none;}
.relative{position: relative;}
.absolute{position:absolute;}

.inline-block{display: inline-block;!important;}
.block{display: block;!important;}

@media (min-width: 1024px) {
    .lg\:block{display: block;!important;}

}
.top-32  { top: 3.2rem; }

.\-right-10p  { right: -10%; }
.\-right-15p  { right: -15%; }
.\-right-18p  { right: -18%; }
.\-right-20p  { right: -20%; }


.right-0  { right: 0; }
.left-0  { left: 0; }
.left-70  { left: 7rem; }

.bottom-0  { bottom: 0; }
.bottom-5  { bottom: 0.5rem; }
.bottom-10 { bottom: 1rem; }
.bottom-15 { bottom: 1.5rem; }
.bottom-20 { bottom: 2rem; }
.bottom-30 { bottom: 3rem; }
.bottom-40 { bottom: 4rem; }
.bottom-50 { bottom: 5rem; }
.bottom-130 { bottom: 13rem; }
.bottom-150 { bottom: 15rem; }
.bottom-190 { bottom: 19rem; }
.bottom-200 { bottom: 20rem; }
.bottom-210 { bottom: 21rem; }
@media (min-width: 1024px) {
    .lg\:bottom-50 { bottom: 5rem; }
    .lg\:bottom-90 { bottom: 9rem; }
    .lg\:bottom-130 { bottom: 13rem; }
    .lg\:bottom-200 { bottom: 20rem; }


    .lg\:left-30  { left: 3rem; }
    .lg\:left-280  { left: 28rem; }
    .lg\:left-380  { left: 38rem; }

    .lg\:\-right-5p  { right: -5%; }
    .lg\:\-right-10p  { right: -10%; }
}


.left-2p  { left: 2%; }
.left-9p  { left: 9%; }
.left-10p  { left: 10%; }
.left-15p  { left: 15%; }
.left-16p  { left: 16%; }
.left-20p  { left: 20%; }
.left-30p  { left: 30%; }
.left-40p  { left: 40%; }
.left-50p  { left: 50%; }

.right-10p { right: 10%; }
.right-20p { right: 20%; }
.right-35 {
    right: 3.5rem;
}


.top-0   { top: 0; }

.top-10p   { top: 10%; }
.top-20p   { top: 20%; }
.top-30p   { top: 30%; }

.bottom-1p { bottom: 1%; }
.bottom-3p { bottom: 3%; }
.bottom-5p { bottom: 5%; }
.bottom-8p { bottom: 8%; }
.bottom-9p { bottom: 9%; }
.bottom-10p { bottom: 10%; }
.bottom-14p { bottom: 14%; }
.bottom-15p { bottom: 15%; }
.bottom-20p { bottom: 20%; }
.bottom-25p { bottom: 25%; }
.bottom-30p { bottom: 30%; }





@media (min-width: 1024px) {

    /* ===== lg position ===== */
    .lg\:left-0  { left: 0; }
    .lg\:left-20p  { left: 20%; }
    .lg\:left-28p  { left: 28%; }
    .lg\:left-30p  { left: 30%; }
    .lg\:left-36p  { left: 36%; }
    .lg\:left-39p  { left: 39%; }
    .lg\:left-40p  { left: 40%; }
    .lg\:left-47p  { left: 47%; }
    .lg\:left-50p  { left: 50%; }
    .lg\:left-59p  { left: 59%; }

    .lg\:bottom-0 { bottom: 0; }
    .lg\:bottom-10p { bottom: 10%; }
    .lg\:bottom-14p { bottom: 14%; }
    .lg\:bottom-15p { bottom: 15%; }
    .lg\:bottom-16p { bottom: 16%; }
    .lg\:bottom-18p { bottom: 18%; }
    .lg\:bottom-19p { bottom: 19%; }
    .lg\:bottom-20p { bottom: 20%; }
    .lg\:bottom-25p { bottom: 25%; }

    .lg\:top-auto { top: auto; }
    .lg\:top-0 { top: 0; }
    .lg\:top-10p { top: 10%; }
    .lg\:top-15p { top: 15%; }
    .lg\:top-20p { top: 20%; }
    .lg\:top-25p { top: 25%; }
    .lg\:top-30p { top: 30%; }
    .lg\:top-35p { top: 35%; }
    .lg\:top-40p { top: 40%; }
    .lg\:top-45p { top: 45%; }
    .lg\:top-50p { top: 50%; }

    .lg\:right-auto { right: auto; }
    .lg\:right-0 { right: 0; }
    .lg\:right-10p { right: 10%; }
    .lg\:right-15p { right: 15%; }
    .lg\:right-20p { right: 20%; }
    .lg\:right-35 {
        right: 3.5rem;
    }
    .lg\:right-40p { right: 40%; }
    .lg\:right-50p { right: 50%; }
    .lg\:right-60p { right: 60%; }
    .lg\:right-70p { right: 70%; }
    .lg\:right-80p { right: 80%; }
    .lg\:right-90p { right: 90%; }
    .lg\:right-100p { top: 100%; }




}


/* ===============================
   Z-Index Utilities (Tailwind-style)
   =============================== */
.z--10    { z-index: -10; }
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }

.z-auto { z-index: auto; }




/* ===== grid layout ===== */
.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

@media (min-width: 1024px) {
    .lg\:grid {
        display: grid;
    }
    .lg\:inline-grid {
        display: inline-grid;
    }
}


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


@media (min-width: 1024px) {
    .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)); }
}



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

@media (min-width: 1024px) {
    .lg\:grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}



/* ===== grid column span ===== */
.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; }

@media (min-width: 1024px) {
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
}


/* ===== grid row span ===== */
.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; }

@media (min-width: 1024px) {
    .lg\:row-span-1 { grid-row: span 1 / span 1; }
    .lg\:row-span-2 { grid-row: span 2 / span 2; }
    .lg\:row-span-3 { grid-row: span 3 / span 3; }
}


/* ===== grid align ===== */
.place-items-start  { place-items: start; }
.place-items-center { place-items: center; }
.place-items-end    { place-items: end; }

.place-content-start  { place-content: start; }
.place-content-center { place-content: center; }
.place-content-end    { place-content: end; }

@media (min-width: 1024px) {
    .lg\:place-items-start  { place-items: start; }
    .lg\:place-items-center { place-items: center; }
    .lg\:place-items-end    { place-items: end; }
}