/* ======================================================================
   Transform utilities (Tailwind-like composable system)
   - translate / scale / rotate / skew / origin / gpu
   - mobile-first + lg variants (min-width: 1024px)

   박주병
   ====================================================================== */

/* ---------- defaults (safe baseline) ---------- */
:root {
    /* translate */
    --tw-translate-x: 0;
    --tw-translate-y: 0;

    /* rotate */
    --tw-rotate: 0;

    /* skew */
    --tw-skew-x: 0;
    --tw-skew-y: 0;

    /* scale */
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}

/* ---------- apply transform (compositor) ---------- */
.transform {
    transform:
            translate(var(--tw-translate-x), var(--tw-translate-y))
            rotate(var(--tw-rotate))
            skewX(var(--tw-skew-x))
            skewY(var(--tw-skew-y))
            scaleX(var(--tw-scale-x))
            scaleY(var(--tw-scale-y));
}

.transform-gpu {
    transform:
            translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
            rotate(var(--tw-rotate))
            skewX(var(--tw-skew-x))
            skewY(var(--tw-skew-y))
            scaleX(var(--tw-scale-x))
            scaleY(var(--tw-scale-y));
}

.transform-none { transform: none; }

/* ---------- transform-origin ---------- */
.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-top-right { transform-origin: top right; }
.origin-right { transform-origin: right; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-bottom { transform-origin: bottom; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-left { transform-origin: left; }
.origin-top-left { transform-origin: top left; }

/* ======================================================================
   TRANSLATE (rem-based scale: 1 = 0.1rem, 10 = 1rem)
   - x/y
   ====================================================================== */
.translate-x-0 { --tw-translate-x: 0; }
.translate-y-0 { --tw-translate-y: 0; }
.-translate-x-0 { --tw-translate-x: 0; }
.-translate-y-0 { --tw-translate-y: 0; }

/* common rem steps (네가 쓰는 h-스케일과 동일 감각) */
.translate-x-1  { --tw-translate-x: 0.1rem; }
.translate-x-2  { --tw-translate-x: 0.2rem; }
.translate-x-4  { --tw-translate-x: 0.4rem; }
.translate-x-6  { --tw-translate-x: 0.6rem; }
.translate-x-8  { --tw-translate-x: 0.8rem; }
.translate-x-10 { --tw-translate-x: 1rem; }
.translate-x-12 { --tw-translate-x: 1.2rem; }
.translate-x-15 { --tw-translate-x: 1.5rem; }
.translate-x-16 { --tw-translate-x: 1.6rem; }
.translate-x-20 { --tw-translate-x: 2rem; }
.translate-x-24 { --tw-translate-x: 2.4rem; }
.translate-x-32 { --tw-translate-x: 3.2rem; }
.translate-x-40 { --tw-translate-x: 4rem; }
.translate-x-48 { --tw-translate-x: 4.8rem; }
.translate-x-56 { --tw-translate-x: 5.6rem; }
.translate-x-64 { --tw-translate-x: 6.4rem; }
.translate-x-80 { --tw-translate-x: 8rem; }
.translate-x-96 { --tw-translate-x: 9.6rem; }
.translate-x-128 { --tw-translate-x: 12.8rem; }

.-translate-x-1  { --tw-translate-x: -0.1rem; }
.-translate-x-2  { --tw-translate-x: -0.2rem; }
.-translate-x-4  { --tw-translate-x: -0.4rem; }
.-translate-x-6  { --tw-translate-x: -0.6rem; }
.-translate-x-8  { --tw-translate-x: -0.8rem; }
.-translate-x-10 { --tw-translate-x: -1rem; }
.-translate-x-12 { --tw-translate-x: -1.2rem; }
.-translate-x-15 { --tw-translate-x: -1.5rem; }
.-translate-x-16 { --tw-translate-x: -1.6rem; }
.-translate-x-20 { --tw-translate-x: -2rem; }
.-translate-x-24 { --tw-translate-x: -2.4rem; }
.-translate-x-32 { --tw-translate-x: -3.2rem; }
.-translate-x-40 { --tw-translate-x: -4rem; }
.-translate-x-48 { --tw-translate-x: -4.8rem; }
.-translate-x-56 { --tw-translate-x: -5.6rem; }
.-translate-x-64 { --tw-translate-x: -6.4rem; }
.-translate-x-80 { --tw-translate-x: -8rem; }
.-translate-x-96 { --tw-translate-x: -9.6rem; }
.-translate-x-128 { --tw-translate-x: -12.8rem; }

.translate-y-1  { --tw-translate-y: 0.1rem; }
.translate-y-2  { --tw-translate-y: 0.2rem; }
.translate-y-4  { --tw-translate-y: 0.4rem; }
.translate-y-6  { --tw-translate-y: 0.6rem; }
.translate-y-8  { --tw-translate-y: 0.8rem; }
.translate-y-10 { --tw-translate-y: 1rem; }
.translate-y-12 { --tw-translate-y: 1.2rem; }
.translate-y-15 { --tw-translate-y: 1.5rem; }
.translate-y-16 { --tw-translate-y: 1.6rem; }
.translate-y-20 { --tw-translate-y: 2rem; }
.translate-y-24 { --tw-translate-y: 2.4rem; }
.translate-y-32 { --tw-translate-y: 3.2rem; }
.translate-y-40 { --tw-translate-y: 4rem; }
.translate-y-48 { --tw-translate-y: 4.8rem; }
.translate-y-56 { --tw-translate-y: 5.6rem; }
.translate-y-64 { --tw-translate-y: 6.4rem; }
.translate-y-80 { --tw-translate-y: 8rem; }
.translate-y-96 { --tw-translate-y: 9.6rem; }
.translate-y-128 { --tw-translate-y: 12.8rem; }

.-translate-y-1  { --tw-translate-y: -0.1rem; }
.-translate-y-2  { --tw-translate-y: -0.2rem; }
.-translate-y-4  { --tw-translate-y: -0.4rem; }
.-translate-y-6  { --tw-translate-y: -0.6rem; }
.-translate-y-8  { --tw-translate-y: -0.8rem; }
.-translate-y-10 { --tw-translate-y: -1rem; }
.-translate-y-12 { --tw-translate-y: -1.2rem; }
.-translate-y-15 { --tw-translate-y: -1.5rem; }
.-translate-y-16 { --tw-translate-y: -1.6rem; }
.-translate-y-20 { --tw-translate-y: -2rem; }
.-translate-y-24 { --tw-translate-y: -2.4rem; }
.-translate-y-32 { --tw-translate-y: -3.2rem; }
.-translate-y-40 { --tw-translate-y: -4rem; }
.-translate-y-48 { --tw-translate-y: -4.8rem; }
.-translate-y-56 { --tw-translate-y: -5.6rem; }
.-translate-y-64 { --tw-translate-y: -6.4rem; }
.-translate-y-80 { --tw-translate-y: -8rem; }
.-translate-y-96 { --tw-translate-y: -9.6rem; }
.-translate-y-128 { --tw-translate-y: -12.8rem; }

/* percent helpers (너가 물어본 10%, -50% 같은 케이스) */
.translate-x-10p  { --tw-translate-x: 10%; }
.translate-x-25p  { --tw-translate-x: 25%; }
.translate-x-50p  { --tw-translate-x: 50%; }
.translate-x-100p { --tw-translate-x: 100%; }

.-translate-x-10p  { --tw-translate-x: -10%; }
.-translate-x-25p  { --tw-translate-x: -25%; }
.-translate-x-50p  { --tw-translate-x: -50%; }
.-translate-x-100p { --tw-translate-x: -100%; }

.translate-y-10p  { --tw-translate-y: 10%; }
.translate-y-25p  { --tw-translate-y: 25%; }
.translate-y-50p  { --tw-translate-y: 50%; }
.translate-y-100p { --tw-translate-y: 100%; }

.-translate-y-10p  { --tw-translate-y: -10%; }
.-translate-y-25p  { --tw-translate-y: -25%; }
.-translate-y-50p  { --tw-translate-y: -50%; }
.-translate-y-100p { --tw-translate-y: -100%; }

/* fraction helpers (Tailwind 느낌) */
.translate-x-1\/2 { --tw-translate-x: 50%; }
.translate-y-1\/2 { --tw-translate-y: 50%; }
.-translate-x-1\/2 { --tw-translate-x: -50%; }
.-translate-y-1\/2 { --tw-translate-y: -50%; }

.translate-x-full { --tw-translate-x: 100%; }
.translate-y-full { --tw-translate-y: 100%; }
.-translate-x-full { --tw-translate-x: -100%; }
.-translate-y-full { --tw-translate-y: -100%; }

/* ======================================================================
   SCALE
   - uniform scale + axis scale
   ====================================================================== */
.scale-0    { --tw-scale-x: 0; --tw-scale-y: 0; }
.scale-50   { --tw-scale-x: 0.5; --tw-scale-y: 0.5; }
.scale-75   { --tw-scale-x: 0.75; --tw-scale-y: 0.75; }
.scale-90   { --tw-scale-x: 0.9; --tw-scale-y: 0.9; }
.scale-95   { --tw-scale-x: 0.95; --tw-scale-y: 0.95; }
.scale-100  { --tw-scale-x: 1; --tw-scale-y: 1; }
.scale-105  { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.scale-110  { --tw-scale-x: 1.10; --tw-scale-y: 1.10; }
.scale-125  { --tw-scale-x: 1.25; --tw-scale-y: 1.25; }
.scale-145  { --tw-scale-x: 1.45; --tw-scale-y: 1.45; } /* 너가 예시로 준 값 */
.scale-150  { --tw-scale-x: 1.5; --tw-scale-y: 1.5; }
.scale-200  { --tw-scale-x: 2; --tw-scale-y: 2; }

/* axis */
.scale-x-50  { --tw-scale-x: 0.5; }
.scale-x-75  { --tw-scale-x: 0.75; }
.scale-x-90  { --tw-scale-x: 0.9; }
.scale-x-95  { --tw-scale-x: 0.95; }
.scale-x-100 { --tw-scale-x: 1; }
.scale-x-105 { --tw-scale-x: 1.05; }
.scale-x-110 { --tw-scale-x: 1.10; }
.scale-x-125 { --tw-scale-x: 1.25; }
.scale-x-145 { --tw-scale-x: 1.45; }
.scale-x-150 { --tw-scale-x: 1.5; }

.scale-y-50  { --tw-scale-y: 0.5; }
.scale-y-75  { --tw-scale-y: 0.75; }
.scale-y-90  { --tw-scale-y: 0.9; }
.scale-y-95  { --tw-scale-y: 0.95; }
.scale-y-100 { --tw-scale-y: 1; }
.scale-y-105 { --tw-scale-y: 1.05; }
.scale-y-110 { --tw-scale-y: 1.10; }
.scale-y-125 { --tw-scale-y: 1.25; }
.scale-y-145 { --tw-scale-y: 1.45; }
.scale-y-150 { --tw-scale-y: 1.5; }

/* ======================================================================
   ROTATE
   ====================================================================== */
.rotate-0   { --tw-rotate: 0deg; }
.rotate-1   { --tw-rotate: 1deg; }
.rotate-2   { --tw-rotate: 2deg; }
.rotate-3   { --tw-rotate: 3deg; }
.rotate-6   { --tw-rotate: 6deg; }
.rotate-12  { --tw-rotate: 12deg; }
.rotate-45  { --tw-rotate: 45deg; }
.rotate-90  { --tw-rotate: 90deg; }
.rotate-180 { --tw-rotate: 180deg; }

.-rotate-1   { --tw-rotate: -1deg; }
.-rotate-2   { --tw-rotate: -2deg; }
.-rotate-3   { --tw-rotate: -3deg; }
.-rotate-6   { --tw-rotate: -6deg; }
.-rotate-12  { --tw-rotate: -12deg; }
.-rotate-45  { --tw-rotate: -45deg; }
.-rotate-90  { --tw-rotate: -90deg; }
.-rotate-180 { --tw-rotate: -180deg; }

/* ======================================================================
   SKEW
   ====================================================================== */
.skew-x-0  { --tw-skew-x: 0deg; }
.skew-x-3  { --tw-skew-x: 3deg; }
.skew-x-6  { --tw-skew-x: 6deg; }
.skew-x-12 { --tw-skew-x: 12deg; }
.-skew-x-3  { --tw-skew-x: -3deg; }
.-skew-x-6  { --tw-skew-x: -6deg; }
.-skew-x-12 { --tw-skew-x: -12deg; }

.skew-y-0  { --tw-skew-y: 0deg; }
.skew-y-3  { --tw-skew-y: 3deg; }
.skew-y-6  { --tw-skew-y: 6deg; }
.skew-y-12 { --tw-skew-y: 12deg; }
.-skew-y-3  { --tw-skew-y: -3deg; }
.-skew-y-6  { --tw-skew-y: -6deg; }
.-skew-y-12 { --tw-skew-y: -12deg; }

/* ======================================================================
   LG variants
   ====================================================================== */
@media (min-width: 1024px) {

    .lg\:transform {
        transform:
                translate(var(--tw-translate-x), var(--tw-translate-y))
                rotate(var(--tw-rotate))
                skewX(var(--tw-skew-x))
                skewY(var(--tw-skew-y))
                scaleX(var(--tw-scale-x))
                scaleY(var(--tw-scale-y));
    }

    .lg\:transform-gpu {
        transform:
                translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
                rotate(var(--tw-rotate))
                skewX(var(--tw-skew-x))
                skewY(var(--tw-skew-y))
                scaleX(var(--tw-scale-x))
                scaleY(var(--tw-scale-y));
    }

    .lg\:transform-none { transform: none; }

    /* origin */
    .lg\:origin-center { transform-origin: center; }
    .lg\:origin-top { transform-origin: top; }
    .lg\:origin-top-right { transform-origin: top right; }
    .lg\:origin-right { transform-origin: right; }
    .lg\:origin-bottom-right { transform-origin: bottom right; }
    .lg\:origin-bottom { transform-origin: bottom; }
    .lg\:origin-bottom-left { transform-origin: bottom left; }
    .lg\:origin-left { transform-origin: left; }
    .lg\:origin-top-left { transform-origin: top left; }

    /* percent translate (필수급만) */
    .lg\:translate-x-10p  { --tw-translate-x: 10%; }
    .lg\:translate-x-25p  { --tw-translate-x: 25%; }
    .lg\:translate-x-50p  { --tw-translate-x: 50%; }
    .lg\:translate-x-100p { --tw-translate-x: 100%; }
    .lg\:-translate-y-50p { --tw-translate-y: -50%; }

    /* fraction */
    .lg\:translate-x-1\/2 { --tw-translate-x: 50%; }
    .lg\:translate-y-1\/2 { --tw-translate-y: 50%; }
    .lg\:-translate-x-1\/2 { --tw-translate-x: -50%; }
    .lg\:-translate-y-1\/2 { --tw-translate-y: -50%; }

    /* scale presets */
    .lg\:scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
    .lg\:scale-110 { --tw-scale-x: 1.10; --tw-scale-y: 1.10; }
    .lg\:scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; }
    .lg\:scale-145 { --tw-scale-x: 1.45; --tw-scale-y: 1.45; }
    .lg\:scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; }

    /* rotate presets */
    .lg\:rotate-0 { --tw-rotate: 0deg; }
    .lg\:rotate-6 { --tw-rotate: 6deg; }
    .lg\:rotate-12 { --tw-rotate: 12deg; }
    .lg\:-rotate-6 { --tw-rotate: -6deg; }
    .lg\:-rotate-12 { --tw-rotate: -12deg; }
}