@charset "utf-8";

/* 공통 변수 */

/* =========================
    Colors
========================= */
:root {
	/* 텍스트 */
	--col-theme: #FF3B7D;
	--col-black: #0B0D0F;
	--col-gray: #7E737D;
	--col-darkgray: #666;
	--col-red: #c30e2e;
	--col-blue: #214b73;
	--col-pink: #f49fae;
	--col-purple: #574ABC;
	--col-green: #98be00;
	--col-yellow: #FFB300;

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

	/* 배경 */
	--col-bg-gray: #C9BBBB;
}


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


/* =========================
    Layout
========================= */
:root {
	--hd-height: 13rem;
	--hd-height-m: 9.3rem;
	--gnb-height: 6rem;
	--aside-wd: 25rem;
	--aside-wd-m: 20rem;

	--input-height: 4rem;
	--checkbox-wd: 2.4rem
}


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

	--border-radius-sm: 4px;
	--border-radius-md: 6px;
	--border-radius-lg: 8px;
}


/* =========================
    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); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

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