/* 공통 변수 */
:root {
    --star-size: 32px;
    --star-gap: 4px;
}


/* =========================
    Colors
========================= */
:root {
    /* 텍스트 */
    --col-theme: #232323;
    --col-darktheme: #232323;
    --col-bk: #232323;
    --col-gray: #777;
    --col-darkgray: #5F6368;
    --col-red: #DB1919;
    --col-blue: #3B748D;
    --col-pink: #f49fae;
    --col-purple: #574ABC;
    --col-green: #98be00;
    --col-yellow: #FFB300;

    /* 배경 */
    --col-bg-theme: #E7F1F0;
    --col-bg-gray: #C9BBBB;
    --col-bg-blue: #E7EFF4;
    --col-bg-red: #F4EDED;

    /* 테두리 */
    --col-bd-gray: #DDD;
    --col-bd-red: #c30e2e;

    /* 포커스 */
    --focus-shadow: 0 0 0 2px rgba(35,35,35,0.1);
}



/* =========================
    Fonts
========================= */
:root {
    --font-family-base: 'Pretendard', sans-serif;
    --font-size-sm: 1.5rem;
    --font-size-md: 1.8rem;
    --font-size-lg: 2.0rem;
    --font-size-xl: 2.4rem;
}



/* =========================
    Layout
========================= */
:root {
    --high-height: 4rem;
    --hd-height: 4rem;
    --hd-height-m: 5.4rem;
    --gnb-height: 5.4rem;
    --aside-wd: 27rem;
    --aside-wd-m: 20rem;

    --input-height: 3rem;
    --bdTop-height: 4rem;
    --checkbox-wd: 2rem
}



/* =========================
    Spacing & Radius
========================= */
:root {
    --spacing-xs: 0.4rem;
    --spacing-sm: 0.8rem;
    --spacing-md: 1.6rem;
    --spacing-lg: 3.2rem;
    --spacing-xl: 6.4rem;
}



/* =========================
    Transitions
========================= */
:root {
    --trans-25: all .25s ease-in-out;
    --trans-45: all .45s cubic-bezier(0.645, 0.045, 0.355, 1);
}



/* =========================
    Spacing Utilities
========================= */
/* Margin */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Margin - vertical */
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

/* Margin - horizontal */
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

/* Margin - top */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Margin - bottom */
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

/* Margin - left & right */
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }


/* Padding */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Padding - vertical */
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Padding - horizontal */
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

/* Padding - top */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

/* Padding - bottom */
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

/* Padding - left & right */
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }