@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/GyeonggiTitle/subsets/GyeonggiTitle-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Gowun+Dodum&family=Jua&display=swap');

@font-face {
	font-family: 'Jua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/npm/@fontsource/jua/files/jua-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/npm/@fontsource/jua/files/jua-korean-400-normal.woff2') format('woff2');
	unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;
}

:root {
	/* Font */
	--font-default			: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-pretendard		: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
	--font-gyeonggi-title	: "Gyeonggi Title", "Pretendard Variable", sans-serif;
	--font-gaegu			: "gaegu", "Pretendard Variable", sans-serif;
	--font-jua				: "Jua", "Pretendard Variable", sans-serif;

	/* Color */
	--color-g0			: #ffffff;
	--color-g1			: #eaf7f1;
	--color-g2			: #cfede0;
	--color-g3			: #7fcbae;
	--color-g4			: #28a77b;
	--color-g5			: #15835e;

	--color-white		: #ffffff;
	--color-light-gray	: #f3f3f3;
	--color-cream		: #fff8f0;

	--color-white-50	: rgba(255, 255, 255, 0.5);
	--color-white-80	: rgba(255, 255, 255, 0.8);

	--ink-default		: #0b1020;

	--bg-default		: #ffffff;




/*
	--bg-primary			: #ffffff;
	--bg-primary			: red;



	--kh-red: #E63946;
	--kh-red-deep: #C42836;
	--kh-red-soft: #FBDCDF;
	--kh-red-wash: #FFF4F5;

	--kh-ink: #1D2533;
	--kh-ink-2: #33425A;
	--kh-ink-3: #5B6579;
	--kh-ink-4: #8B94A6;

	--kh-yellow: #FFB703;
	--kh-yellow-soft: #FFE6A8;
	--kh-yellow-wash: #FFF7E0;

	--kh-cream: #FFF8F0;
	--kh-cream-2: #FDF1E3;
	--kh-paper: #FFFCF7;

	--kh-mint: #B8E6D5;
	--kh-sky: #CDE7F5;
	--kh-peach: #FFD9C2;
	--kh-lav: #E2DAF5;

	--line: #EAE3D8;
	--line-2: #F4ECDE;


	--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: "Jua", "Pretendard Variable", sans-serif;
	--font-hand: "Gaegu", "Gowun Dodum", sans-serif;
	--font-soft: "Gowun Dodum", "Pretendard Variable", sans-serif;


	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	--shadow-sm: 0 2px 6px rgba(29, 37, 51, 0.06);
	--shadow-md: 0 10px 30px rgba(29, 37, 51, 0.08);
	--shadow-lg: 0 24px 60px rgba(29, 37, 51, 0.12);
	--shadow-red: 0 10px 24px rgba(230, 57, 70, 0.22);

*/
}

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
body {
	color: var(--ink-default);
	font-family: var(--font-default); font-weight: 400;
	line-height: 1.6;
	background: var(--bg-default);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { width: 100%; display: block; }
ul{ list-style: none; }

/* Font */
.ink-g0 { color: var(--color-g0); }
.ink-g1 { color: var(--color-g1); }
.ink-g2 { color: var(--color-g2); }
.ink-g3 { color: var(--color-g3); }
.ink-g4 { color: var(--color-g4); }
.ink-g5 { color: var(--color-g5); }

.ink-white { color: var(--color-white); }
.ink-lg { color: var(--color-light-gray); }
.ink-cr { color: var(--color-cream); }

.ink-white-50 { color: var(--color-white-50); }
.ink-white-80 { color: var(--color-white-80); }


.font-pretendard { font-family: var(--font-pretendard); }
.font-gyeonggi-title { font-family: var(--font-gyeonggi-title); }
.font-gaegu { font-family: var(--font-gaegu); }
.font-jua { font-family: var(--font-jua); }

.font-08{ font-size: 0.8rem; }
.font-09{ font-size: 0.9rem; }
.font-10{ font-size: 1.0rem; }
.font-11{ font-size: 1.1rem; }
.font-12{ font-size: 1.2rem; }
.font-13{ font-size: 1.3rem; }
.font-14{ font-size: 1.4rem; }
.font-15{ font-size: 1.5rem; }
.font-20{ font-size: 2.0rem; }
.font-30{ font-size: 3.0rem; }
.font-40{ font-size: 4.0rem; }
.font-50{ font-size: 5.0rem; }




.font-300{ font-weight: 300; }
.font-400{ font-weight: 400; }
.font-500{ font-weight: 500; }
.font-600{ font-weight: 600; }
.font-700{ font-weight: 700; }
.font-800{ font-weight: 800; }
.font-900{ font-weight: 900; }

/* Background */
.bg-g0 { background: var(--color-g0); }
.bg-g1 { background: var(--color-g1); }
.bg-g2 { background: var(--color-g2); }
.bg-g3 { background: var(--color-g3); }
.bg-g4 { background: var(--color-g4); }
.bg-g5 { background: var(--color-g5); }

.bg-lg { background: var(--color-light-gray); }
.bg-br { background: var(--color-cream); }

/* Border */
.bd-g0 { border: 1px solid var(--color-g0); }
.bd-g1 { border: 1px solid var(--color-g1); }
.bd-g2 { border: 1px solid var(--color-g2); }
.bd-g3 { border: 1px solid var(--color-g3); }
.bd-g4 { border: 1px solid var(--color-g4); }
.bd-g5 { border: 1px solid var(--color-g5); }

.bd-br { border: 1px solid var(--color-cream); }

	/*--ink-default		: #0b1020;*/


/* Page Top */
.page-top {
	padding: 0 30px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.page-top > span {
	padding: 6px 14px;
	width: auto;
	color: var(--color-g5);
	font-size: 0.9rem; font-weight: 600;
	line-height: 1;
	background: var(--color-g2);
	border: none; border-radius: 999px;
}
.page-top > div {
	width: auto;
	color: #1d2533;
	font-family: var(--font-jua); font-size: clamp(2.4rem, 4.1vw, 3.2rem); font-weight: 400;
	text-align: center;
	line-height: 1.2;
	word-break: break-word;
	display: block;
}
.page-top > p {
	color: #33425a;
	text-align: center;
	word-break: keep-all;
	display: block;
}

/* Tag */
.tag-g52{
	padding: 6px 14px;
	width: auto;
	color: var(--color-g5);
	font-size: 0.9rem; font-weight: 600;
	line-height: 1;
	background: var(--color-g2);
	border: none; border-radius: 999px;
}









/* 삭제용 */
section.wrap-site{
	/*border: 1px dotted green !important;*/
}
section.wrap-site .wrap-site-sub{
	/*border: 1px dotted orange !important;*/
}

