@charset "UTF-8";

/* Pretendard Variable 폰트 로드 */
@font-face {
	font-family: 'Pretendard Variable';
	src: url('../font/Pretendard/PretendardVariable.woff2') format('woff2');
	font-weight: 100 900; /* Pretendard Variable 폰트의 가변적인 weight 범위 */
	font-display: block;
}

/* SUIT Variable 폰트 로드 */
@font-face {
	font-family: 'SUIT Variable';
	src: url('../font/SUIT/SUIT-Variable.woff2') format('woff2'); /* SUIT 폰트 파일 경로 및 이름 확인 필요 */
	font-weight: 100 900; /* SUIT Variable 폰트의 가변적인 weight 범위 */
	font-display: block;
}

* {
	font-family: 'Pretendard Variable', 'SUIT Variable', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.3px;
}

@media (max-width: 768px) {
	/* 모바일 이하 */
	* {
		font-size: 12px;
		line-height: 18px;
	}
	.responsive-padding {
		padding-right: 3vw;
	}
}

@media (max-width: 1024px) {
	/* 태블릿 이하 */
	* {
		font-size: 14px;
		line-height: 20px;
	}
	.responsive-padding {
		padding-right: 3vw;
	}
}

@media (min-width: 1440px) {
	.responsive-padding {
		padding-right: 20vw;
	}
}

@media (min-width: 1920px) {
	.responsive-padding {
		padding-right: 30vw;
	}
}

/* ========== Typography Styles ========== */
.super {
	font-size: 60px !important;
	font-weight: bold !important;
	line-height: 80px !important;
	letter-spacing: 0 !important;
}

.headline-01 {
	font-size: 38px !important;
	font-weight: 600 !important;
	line-height: 50px !important;
	letter-spacing: 0 !important;
}

.headline-02 {
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 44px !important;
	letter-spacing: 0 !important;
}

.headline-03 {
	font-size: 26px !important;
	font-weight: 600 !important;
	line-height: 36px !important;
	letter-spacing: 0 !important;
}

.headline-04 {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 30px !important;
	letter-spacing: 0 !important;
}

.headline-05 {
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 26px !important;
	letter-spacing: 0 !important;
}

.subheadline-01 {
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 30px !important;
	letter-spacing: 0 !important;
}

.subheadline-02 {
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 26px !important;
	letter-spacing: 0 !important;
}

.subheadline-03 {
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
}

.subheadline-04 {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 22px !important;
	letter-spacing: 0 !important;
}

.subheadline-05 {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
}

.body-01 {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 22px !important;
	letter-spacing: -0.3px !important;
}

.body-02 {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	letter-spacing: -0.3px !important;
}

.caption {
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 18px !important;
	letter-spacing: -0.3px !important;
}

@media (max-width: 768px) {
	.super {
		font-size: 30px !important;
		line-height: 42px !important;
	}

	.headline-01 {
		font-size: 24px !important;
		line-height: 30px !important;
	}

	.headline-02 {
		font-size: 23px !important;
		line-height: 28px !important;
	}

	.headline-03 {
		font-size: 22px !important;
		line-height: 28px !important;
	}

	.headline-04 {
		font-size: 20px !important;
		line-height: 26px !important;
	}

	.headline-05 {
		font-size: 18px !important;
		line-height: 24px !important;
	}

	.subheadline-01 {
		font-size: 20px !important;
		line-height: 26px !important;
	}

	.subheadline-02 {
		font-size: 18px !important;
		line-height: 24px !important;
	}

	.subheadline-03 {
		font-size: 16px !important;
		line-height: 22px !important;
	}

	.subheadline-04 {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	.subheadline-05 {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.body-01 {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	.body-02 {
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.caption {
		font-size: 10px !important;
		line-height: 16px !important;
	}
}

/* === Base Colors === */
.bg-black     { background-color: #000000; }
.bg-white     { background-color: #FFFFFF; }

/* === Grayscale === */
.bg-gray-01   { background-color: #F9F9F9 !important; }
.bg-gray-02   { background-color: #F3F3F3 !important; }
.bg-gray-03   { background-color: #EBEBEB !important; }
.bg-gray-04   { background-color: #DEDEDE !important; }
.bg-gray-05   { background-color: #C7C7C7 !important; }
.bg-gray-06   { background-color: #B6B6B6 !important; }
.bg-gray-07   { background-color: #868686 !important; }
.bg-gray-08   { background-color: #494949 !important; }
.bg-gray-09   { background-color: #2A2A2A !important; }
.bg-gray-10   { background-color: #1F1F1F !important; }

/* === Dim (Opacity) === */
.bg-dim-01    { background-color: rgba(0, 0, 0, 0.10) !important; }
.bg-dim-02    { background-color: rgba(0, 0, 0, 0.20) !important; }
.bg-dim-03    { background-color: rgba(0, 0, 0, 0.40) !important; }
.bg-dim-04    { background-color: rgba(0, 0, 0, 0.60) !important; }
.bg-dim-05    { background-color: rgba(0, 0, 0, 0.80) !important; }

/* === Primary Coral Colors === */
.bg-coral-01  { background-color: #FFF1EF !important; }
.bg-coral-02  { background-color: #FFE2DF !important; }
.bg-coral-03  { background-color: #FFD4D0 !important; }
.bg-coral-04  { background-color: #FFC5C0 !important; }
.bg-coral-05  { background-color: #FFB7B0 !important; }
.bg-coral-06  { background-color: #FFA9A0 !important; }
.bg-coral-07  { background-color: #FF9A90 !important; }
.bg-coral-08  { background-color: #FF8C81 !important; }
.bg-coral-09  { background-color: #FF7D71 !important; }
.bg-coral-10  { background-color: #FF6F61 !important; }

/* === Red Colors === */
.bg-red-01    { background-color: #FFDBD4 !important; }
.bg-red-02    { background-color: #F8C1BB !important; }
.bg-red-03    { background-color: #F5ACA5 !important; }
.bg-red-04    { background-color: #F18377 !important; }
.bg-red-05    { background-color: #EE6E61 !important; }
.bg-red-06    { background-color: #EC594A !important; }
.bg-red-07    { background-color: #E94534 !important; }
.bg-red-08    { background-color: #E7301D !important; }
.bg-red-09    { background-color: #DF1D1D !important; }
.bg-red-10    { background-color: #D41F1F !important; }

/* === Blue Colors === */
.bg-blue-01   { background-color: #E6EEFB !important; }
.bg-blue-02   { background-color: #CCDDF6 !important; }
.bg-blue-03   { background-color: #99BBEE !important; }
.bg-blue-04   { background-color: #6699E5 !important; }
.bg-blue-05   { background-color: #4D88E1 !important; }
.bg-blue-06   { background-color: #3377DD !important; }
.bg-blue-07   { background-color: #1A66D8 !important; }
.bg-blue-08   { background-color: #0055D4 !important; }
.bg-blue-09   { background-color: #004EC4 !important; }
.bg-blue-10   { background-color: #0044AA !important; }

/* === Green Colors === */
.bg-green-01  { background-color: #EBF7F3 !important; }
.bg-green-02  { background-color: #D7EFE7 !important; }
.bg-green-03  { background-color: #AFDFCF !important; }
.bg-green-04  { background-color: #9CD8C3 !important; }
.bg-green-05  { background-color: #74C8AA !important; }
.bg-green-06  { background-color: #60C09E !important; }
.bg-green-07  { background-color: #46B991 !important; }
.bg-green-08  { background-color: #38B086 !important; }
.bg-green-09  { background-color: #1FA778 !important; }
.bg-green-10  { background-color: #069765 !important; }

/* === Orange Colors === */
.bg-orange-01 { background-color: #FFF1E7 !important; }
.bg-orange-02 { background-color: #FFE3CE !important; }
.bg-orange-03 { background-color: #FFD5B6 !important; }
.bg-orange-04 { background-color: #FFC79D !important; }
.bg-orange-05 { background-color: #FFBA85 !important; }
.bg-orange-06 { background-color: #FFAC6C !important; }
.bg-orange-07 { background-color: #FF9E54 !important; }
.bg-orange-08 { background-color: #FF8223 !important; }
.bg-orange-09 { background-color: #FF740A !important; }
.bg-orange-10 { background-color: #EE6700 !important; }

/* === Purple Colors === */
.bg-purple-01 { background-color: #F0EAF4 !important; }
.bg-purple-02 { background-color: #E0D5E9 !important; }
.bg-purple-03 { background-color: #D1C0DE !important; }
.bg-purple-04 { background-color: #C2ABD3 !important; }
.bg-purple-05 { background-color: #B396C8 !important; }
.bg-purple-06 { background-color: #A381BD !important; }
.bg-purple-07 { background-color: #946CB2 !important; }
.bg-purple-08 { background-color: #8557A7 !important; }
.bg-purple-09 { background-color: #75429C !important; }
.bg-purple-10 { background-color: #662D91 !important; }

/* === Yellow Colors === */
.bg-yellow-01 { background-color: #FFFFE6 !important; }
.bg-yellow-02 { background-color: #FFF4CC !important; }
.bg-yellow-03 { background-color: #FFEEB3 !important; }
.bg-yellow-04 { background-color: #FFE999 !important; }
.bg-yellow-05 { background-color: #FFE380 !important; }
.bg-yellow-06 { background-color: #FFDD66 !important; }
.bg-yellow-07 { background-color: #FFD84D !important; }
.bg-yellow-08 { background-color: #FFD233 !important; }
.bg-yellow-09 { background-color: #FFCD1A !important; }
.bg-yellow-10 { background-color: #FFC700 !important; }

/* === Base Colors === */
.text-black     { color: #000000 !important; }
.text-white     { color: #FFFFFF !important; }

/* === Grayscale === */
.text-gray-01   { color: #F9F9F9 !important; }
.text-gray-02   { color: #F3F3F3 !important; }
.text-gray-03   { color: #EBEBEB !important; }
.text-gray-04   { color: #DEDEDE !important; }
.text-gray-05   { color: #C7C7C7 !important; }
.text-gray-06   { color: #B6B6B6 !important; }
.text-gray-07   { color: #868686 !important; }
.text-gray-08   { color: #494949 !important; }
.text-gray-09   { color: #2A2A2A !important; }
.text-gray-10   { color: #1F1F1F !important; }

/* === Dim (Opacity) === */
.text-dim-01    { color: rgba(0, 0, 0, 0.10) !important; }
.text-dim-02    { color: rgba(0, 0, 0, 0.20) !important; }
.text-dim-03    { color: rgba(0, 0, 0, 0.40) !important; }
.text-dim-04    { color: rgba(0, 0, 0, 0.60) !important; }
.text-dim-05    { color: rgba(0, 0, 0, 0.80) !important; }

/* === Primary Coral Colors === */
.text-coral-01  { color: #FFF1EF !important; }
.text-coral-02  { color: #FFE2DF !important; }
.text-coral-03  { color: #FFD4D0 !important; }
.text-coral-04  { color: #FFC5C0 !important; }
.text-coral-05  { color: #FFB7B0 !important; }
.text-coral-06  { color: #FFA9A0 !important; }
.text-coral-07  { color: #FF9A90 !important; }
.text-coral-08  { color: #FF8C81 !important; }
.text-coral-09  { color: #FF7D71 !important; }
.text-coral-10  { color: #FF6F61 !important; }

/* === Red Colors === */
.text-red-01    { color: #FFDBD4 !important; }
.text-red-02    { color: #F8C1BB !important; }
.text-red-03    { color: #F5ACA5 !important; }
.text-red-04    { color: #F18377 !important; }
.text-red-05    { color: #EE6E61 !important; }
.text-red-06    { color: #EC594A !important; }
.text-red-07    { color: #E94534 !important; }
.text-red-08    { color: #E7301D !important; }
.text-red-09    { color: #DF1D1D !important; }
.text-red-10    { color: #D41F1F !important; }

/* === Blue Colors === */
.text-blue-01   { color: #E6EEFB !important; }
.text-blue-02   { color: #CCDDF6 !important; }
.text-blue-03   { color: #99BBEE !important; }
.text-blue-04   { color: #6699E5 !important; }
.text-blue-05   { color: #4D88E1 !important; }
.text-blue-06   { color: #3377DD !important; }
.text-blue-07   { color: #1A66D8 !important; }
.text-blue-08   { color: #0055D4 !important; }
.text-blue-09   { color: #004EC4 !important; }
.text-blue-10   { color: #0044AA !important; }

/* === Green Colors === */
.text-green-01  { color: #EBF7F3 !important; }
.text-green-02  { color: #D7EFE7 !important; }
.text-green-03  { color: #AFDFCF !important; }
.text-green-04  { color: #9CD8C3 !important; }
.text-green-05  { color: #74C8AA !important; }
.text-green-06  { color: #60C09E !important; }
.text-green-07  { color: #46B991 !important; }
.text-green-08  { color: #38B086 !important; }
.text-green-09  { color: #1FA778 !important; }
.text-green-10  { color: #069765 !important; }

/* === Orange Colors === */
.text-orange-01 { color: #FFF1E7 !important; }
.text-orange-02 { color: #FFE3CE !important; }
.text-orange-03 { color: #FFD5B6 !important; }
.text-orange-04 { color: #FFC79D !important; }
.text-orange-05 { color: #FFBA85 !important; }
.text-orange-06 { color: #FFAC6C !important; }
.text-orange-07 { color: #FF9E54 !important; }
.text-orange-08 { color: #FF8223 !important; }
.text-orange-09 { color: #FF740A !important; }
.text-orange-10 { color: #EE6700 !important; }

/* === Purple Colors === */
.text-purple-01 { color: #F0EAF4 !important; }
.text-purple-02 { color: #E0D5E9 !important; }
.text-purple-03 { color: #D1C0DE !important; }
.text-purple-04 { color: #C2ABD3 !important; }
.text-purple-05 { color: #B396C8 !important; }
.text-purple-06 { color: #A381BD !important; }
.text-purple-07 { color: #946CB2 !important; }
.text-purple-08 { color: #8557A7 !important; }
.text-purple-09 { color: #75429C !important; }
.text-purple-10 { color: #662D91 !important; }

/* === Yellow Colors === */
.text-yellow-01 { color: #FFFFE6 !important; }
.text-yellow-02 { color: #FFF4CC !important; }
.text-yellow-03 { color: #FFEEB3 !important; }
.text-yellow-04 { color: #FFE999 !important; }
.text-yellow-05 { color: #FFE380 !important; }
.text-yellow-06 { color: #FFDD66 !important; }
.text-yellow-07 { color: #FFD84D !important; }
.text-yellow-08 { color: #FFD233 !important; }
.text-yellow-09 { color: #FFCD1A !important; }
.text-yellow-10 { color: #FFC700 !important; }

/* === Base Colors === */
.border-black     { border-color: #000000 !important; }
.border-white     { border-color: #FFFFFF !important; }

/* === Grayscale === */
.border-gray-01   { border-color: #F9F9F9 !important; }
.border-gray-02   { border-color: #F3F3F3 !important; }
.border-gray-03   { border-color: #EBEBEB !important; }
.border-gray-04   { border-color: #DEDEDE !important; }
.border-gray-05   { border-color: #C7C7C7 !important; }
.border-gray-06   { border-color: #B6B6B6 !important; }
.border-gray-07   { border-color: #868686 !important; }
.border-gray-08   { border-color: #494949 !important; }
.border-gray-09   { border-color: #2A2A2A !important; }
.border-gray-10   { border-color: #1F1F1F !important; }

/* === Dim (Opacity) === */
.border-dim-01    { border-color: rgba(0, 0, 0, 0.10) !important; }
.border-dim-02    { border-color: rgba(0, 0, 0, 0.20) !important; }
.border-dim-03    { border-color: rgba(0, 0, 0, 0.40) !important; }
.border-dim-04    { border-color: rgba(0, 0, 0, 0.60) !important; }
.border-dim-05    { border-color: rgba(0, 0, 0, 0.80) !important; }

/* === Coral Colors === */
.border-coral-01  { border-color: #FFF1EF !important; }
.border-coral-02  { border-color: #FFE2DF !important; }
.border-coral-03  { border-color: #FFD4D0 !important; }
.border-coral-04  { border-color: #FFC5C0 !important; }
.border-coral-05  { border-color: #FFB7B0 !important; }
.border-coral-06  { border-color: #FFA9A0 !important; }
.border-coral-07  { border-color: #FF9A90 !important; }
.border-coral-08  { border-color: #FF8C81 !important; }
.border-coral-09  { border-color: #FF7D71 !important; }
.border-coral-10  { border-color: #FF6F61 !important; }

/* === Red Colors (continued) === */
.border-red-03    { border-color: #F5ACA5 !important; }
.border-red-04    { border-color: #F18377 !important; }
.border-red-05    { border-color: #EE6E61 !important; }
.border-red-06    { border-color: #EC594A !important; }
.border-red-07    { border-color: #E94534 !important; }
.border-red-08    { border-color: #E7301D !important; }
.border-red-09    { border-color: #DF1D1D !important; }
.border-red-10    { border-color: #D41F1F !important; }

/* === Blue Colors === */
.border-blue-01   { border-color: #E6EEFB !important; }
.border-blue-02   { border-color: #CCDDF6 !important; }
.border-blue-03   { border-color: #99BBEE !important; }
.border-blue-04   { border-color: #6699E5 !important; }
.border-blue-05   { border-color: #4D88E1 !important; }
.border-blue-06   { border-color: #3377DD !important; }
.border-blue-07   { border-color: #1A66D8 !important; }
.border-blue-08   { border-color: #0055D4 !important; }
.border-blue-09   { border-color: #004EC4 !important; }
.border-blue-10   { border-color: #0044AA !important; }

/* === Green Colors === */
.border-green-01  { border-color: #EBF7F3 !important; }
.border-green-02  { border-color: #D7EFE7 !important; }
.border-green-03  { border-color: #AFDFCF !important; }
.border-green-04  { border-color: #9CD8C3 !important; }
.border-green-05  { border-color: #74C8AA !important; }
.border-green-06  { border-color: #60C09E !important; }
.border-green-07  { border-color: #46B991 !important; }
.border-green-08  { border-color: #38B086 !important; }
.border-green-09  { border-color: #1FA778 !important; }
.border-green-10  { border-color: #069765 !important; }

/* === Orange Colors === */
.border-orange-01 { border-color: #FFF1E7 !important; }
.border-orange-02 { border-color: #FFE3CE !important; }
.border-orange-03 { border-color: #FFD5B6 !important; }
.border-orange-04 { border-color: #FFC79D !important; }
.border-orange-05 { border-color: #FFBA85 !important; }
.border-orange-06 { border-color: #FFAC6C !important; }
.border-orange-07 { border-color: #FF9E54 !important; }
.border-orange-08 { border-color: #FF8223 !important; }
.border-orange-09 { border-color: #FF740A !important; }
.border-orange-10 { border-color: #EE6700 !important; }

/* === Purple Colors === */
.border-purple-01 { border-color: #F0EAF4 !important; }
.border-purple-02 { border-color: #E0D5E9 !important; }
.border-purple-03 { border-color: #D1C0DE !important; }
.border-purple-04 { border-color: #C2ABD3 !important; }
.border-purple-05 { border-color: #B396C8 !important; }
.border-purple-06 { border-color: #A381BD !important; }
.border-purple-07 { border-color: #946CB2 !important; }
.border-purple-08 { border-color: #8557A7 !important; }
.border-purple-09 { border-color: #75429C !important; }
.border-purple-10 { border-color: #662D91 !important; }

/* === Yellow Colors === */
.border-yellow-01 { border-color: #FFFFE6 !important; }
.border-yellow-02 { border-color: #FFF4CC !important; }
.border-yellow-03 { border-color: #FFEEB3 !important; }
.border-yellow-04 { border-color: #FFE999 !important; }
.border-yellow-05 { border-color: #FFE380 !important; }
.border-yellow-06 { border-color: #FFDD66 !important; }
.border-yellow-07 { border-color: #FFD84D !important; }
.border-yellow-08 { border-color: #FFD233 !important; }
.border-yellow-09 { border-color: #FFCD1A !important; }
.border-yellow-10 { border-color: #FFC700 !important; }


/* 노피 공통 색상 */
.bg-lightest       { background-color: #f3f6fc !important; }
.bg-lighter        { background-color: #dde8ff !important; }
.bg-light          { background-color: #a0b0f1 !important; }
.bg-middle         { background-color: #566fd7 !important; }
.bg-interstellar   { background-color: #131fa0 !important; }
.bg-dark           { background-color: #0c0476 !important; }
.bg-darker         { background-color: #07033c !important; }

.text-lightest       { color: #f3f6fc !important; }
.text-lighter        { color: #dde8ff !important; }
.text-light          { color: #a0b0f1 !important; }
.text-middle         { color: #566fd7 !important; }
.text-interstellar   { color: #131fa0 !important; }
.text-dark           { color: #0c0476 !important; }
.text-darker         { color: #07033c !important; }

.border-lightest       { border-color: #f3f6fc !important; }
.border-lighter        { border-color: #dde8ff !important; }
.border-light          { border-color: #a0b0f1 !important; }
.border-middle         { border-color: #566fd7 !important; }
.border-interstellar   { border-color: #131fa0 !important; }
.border-dark           { border-color: #0c0476 !important; }
.border-darker         { border-color: #07033c !important; }



.submenu {
	display: none;
}
.submenu.open {
	display: block;
}
.submenu ul {
	background-color: #f9fafb;
	border-radius: 0.5rem;
}
.submenu ul li a {
	display: block;
	padding: 0.5rem;;
	border-radius: 0.25rem;
}
.submenu ul li a:hover, .submenu ul li a.active {
	background-color: #e5e7eb;
	color: #1f2937;
	font-weight: bold;
}
.submenu.open ul {
	padding: 0.5rem;
	margin-top: 0.5rem;
}

/* 설명(말풍선) - S */
.tooltip {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.tooltip::before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M9 1.5C7.51664 1.5 6.06659 1.93987 4.83323 2.76398C3.59986 3.58809 2.63856 4.75943 2.07091 6.12987C1.50325 7.50032 1.35472 9.00832 1.64411 10.4632C1.9335 11.918 2.64781 13.2544 3.6967 14.3033C4.7456 15.3522 6.08197 16.0665 7.53683 16.3559C8.99168 16.6453 10.4997 16.4968 11.8701 15.9291C13.2406 15.3614 14.4119 14.4001 15.236 13.1668C16.0601 11.9334 16.5 10.4834 16.5 9C16.4978 7.01154 15.707 5.10513 14.3009 3.69907C12.8949 2.29302 10.9885 1.50215 9 1.5Z' stroke='%23868686' stroke-width='2'/%3E%3Cpath d='M8.25 8.25H8.75C9.30228 8.25 9.75 8.69772 9.75 9.25V10.5V12.75' stroke='%23868686' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.1875 6.375C9.70527 6.375 10.125 5.95527 10.125 5.4375C10.125 4.91973 9.70527 4.5 9.1875 4.5C8.66973 4.5 8.25 4.91973 8.25 5.4375C8.25 5.95527 8.66973 6.375 9.1875 6.375Z' fill='%23868686'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.tooltip::after {
	content: attr(data-message);
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0.5rem;
	display: none;
	white-space: nowrap;
	border-radius: 8px;
	background-color: white;
	color: #333;
	font-size: 0.75rem;
	padding: 0.5rem 0.75rem;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.tooltip:hover::after {
	display: block;
}
/* 설명(말풍선) - E */

/* 필수 항목 */
.required::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: #f97316;
	border-radius: 9999px;
	margin-left: 4px;
	position: relative;
	top: -6px;
}

/* 순서 변경 아이콘 */
.icon-dots {
	display: inline-block;
	width: 20px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg width='20' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3.2' cy='3.6' r='2.4' fill='%23B6B6B6'/%3E%3Ccircle cx='10' cy='3.6' r='2.4' fill='%23B6B6B6'/%3E%3Ccircle cx='16.8' cy='3.6' r='2.4' fill='%23B6B6B6'/%3E%3Ccircle cx='3.2' cy='10.4' r='2.4' fill='%23B6B6B6'/%3E%3Ccircle cx='10' cy='10.4' r='2.4' fill='%23B6B6B6'/%3E%3Ccircle cx='16.8' cy='10.4' r='2.4' fill='%23B6B6B6'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* 추가 버튼 - S */
.add-button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.6rem 1.25rem;
	background-color: #6b7280 !important;
	color: white;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s;
}
.add-button:hover {
	background-color: #4b5563 !important;
}
.add-button label {
	cursor: pointer;
}
.add-button::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6H10' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M6 2L6 10' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
/* 추가 버튼 - E */
/* 불러오기 버튼 - S */
.fetch-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	background-color: #e5e7eb !important;
	color: #1f2937;
	border: 1px solid #f3f4f6;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color 0.2s;
}
.fetch-button:hover {
	background-color: #d1d5db !important;
}
.fetch-button label {
	cursor: pointer;
}
/* 불러오기 버튼 - E */
/* 편집 버튼 - S */
.edit-button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.6rem 1.25rem;
	background-color: #4d88e1 !important;
	color: white;
	border: 1px solid #3f7ad3;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s;
}
.edit-button:hover {
	background-color: #2c5593 !important;
}
.edit-button label {
	cursor: pointer;
}
.edit-button::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D'12'%20height%3D'12'%20viewBox%3D'0%200%2012%2012'%20fill%3D'none'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cg%20clip-path%3D'url(%23clip0_802_96)'%3E%3Cpath%20d%3D'M8.01226%202.06462C7.96951%202.02317%207.9123%202%207.85275%202C7.7932%202%207.736%202.02317%207.69324%202.06462L2.56645%207.19029C2.5454%207.21117%202.52868%207.23602%202.51728%207.26339C2.50587%207.29076%202.5%207.32012%202.5%207.34977C2.5%207.37942%202.50587%207.40878%202.51728%207.43615C2.52868%207.46352%202.5454%207.48836%202.56645%207.50924L4.48956%209.43193C4.50973%209.45342%204.53409%209.47055%204.56114%209.48225C4.58819%209.49396%204.61735%209.5%204.64683%209.5C4.6763%209.5%204.70546%209.49396%204.73251%209.48225C4.75956%209.47055%204.78392%209.45342%204.80409%209.43193L9.93537%204.30626C9.97682%204.26351%2010%204.20632%2010%204.14678C10%204.08725%209.97682%204.03005%209.93537%203.98731L8.01226%202.06462Z'%20fill%3D'white'/%3E%3Cpath%20d%3D'M1.92076%208.06724C1.89201%208.03946%201.85675%208.01932%201.81822%208.00866C1.77968%207.998%201.73909%207.99717%201.70015%208.00623C1.6607%208.01456%201.62421%208.03333%201.59449%208.06058C1.56477%208.08782%201.5429%208.12254%201.53117%208.16111L0.512632%2011.1743C0.498404%2011.2155%200.496143%2011.2598%200.506114%2011.3022C0.516084%2011.3446%200.537876%2011.3832%200.568957%2011.4137C0.598771%2011.4502%200.638898%2011.4769%200.684108%2011.4903C0.729319%2011.5037%200.777516%2011.5032%200.822419%2011.4888L3.8358%2010.4844C3.87348%2010.4711%203.90731%2010.4487%203.93432%2010.4192C3.96133%2010.3898%203.98069%2010.3541%203.9907%2010.3154C4.00283%2010.2741%204.0031%2010.2302%203.99148%2010.1887C3.97986%2010.1472%203.95682%2010.1098%203.92499%2010.0808L1.92076%208.06724Z'%20fill%3D'white'/%3E%3Cpath%20d%3D'M11.0485%200.94226C10.7565%200.658551%2010.3666%200.5%209.96086%200.5C9.55511%200.5%209.16519%200.658551%208.87323%200.94226L8.56434%201.25327C8.54396%201.27363%208.52777%201.29785%208.51673%201.32454C8.50569%201.35123%208.5%201.37986%208.5%201.40877C8.5%201.43769%208.50569%201.46631%208.51673%201.493C8.52777%201.51969%208.54396%201.54392%208.56434%201.56428L10.4264%203.43909C10.4675%203.47821%2010.522%203.5%2010.5786%203.5C10.6352%203.5%2010.6897%203.47821%2010.7309%203.43909L11.0485%203.13246C11.1916%202.98881%2011.3052%202.81814%2011.3826%202.63022C11.4601%202.4423%2011.5%202.24083%2011.5%202.03736C11.5%201.83389%2011.4601%201.63242%2011.3826%201.4445C11.3052%201.25658%2011.1916%201.08591%2011.0485%200.94226Z'%20fill%3D'white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D'clip0_802_96'%3E%3Crect%20width%3D'12'%20height%3D'12'%20fill%3D'white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
/* 편집 버튼 - E */
/* 편집 아이콘 - S */
.modify-icon {
	position: absolute;
	bottom: -0.25rem;
	right: -0.25rem;
	width: 1.5rem;       /* w-6 */
	height: 1.5rem;      /* h-6 */
	background-color: #f3f4f6; /* bg-gray-100 */
	border: 1px solid #d1d5db; /* border-gray-300 */
	border-radius: 9999px;     /* rounded-full */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s;
}
.modify-icon:hover {
	background-color: #e5e7eb; /* hover:bg-gray-200 */
}
.modify-icon::after {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_588_14823)%22%3E%3Cpath%20d%3D%22M8.48397%202.18606C8.43871%202.14218%208.37813%202.11765%208.31508%202.11765C8.25203%202.11765%208.19146%202.14218%208.14619%202.18606L2.71782%207.61325C2.69553%207.63536%202.67783%207.66166%202.66576%207.69064C2.65368%207.71963%202.64746%207.75071%202.64746%207.78211C2.64746%207.8135%202.65368%207.84459%202.66576%207.87357C2.67783%207.90255%202.69553%207.92885%202.71782%207.95096L4.75406%209.98675C4.77541%2010.0095%204.80121%2010.0276%204.82985%2010.04C4.85849%2010.0524%204.88936%2010.0588%204.92057%2010.0588C4.95178%2010.0588%204.98265%2010.0524%205.01129%2010.04C5.03993%2010.0276%205.06573%2010.0095%205.08708%209.98675L10.5202%204.55956C10.5641%204.51431%2010.5886%204.45375%2010.5886%204.39071C10.5886%204.32767%2010.5641%204.26711%2010.5202%204.22185L8.48397%202.18606Z%22%20fill%3D%22%23868686%22/%3E%3Cpath%20d%3D%22M2.03363%208.54178C2.00318%208.51236%201.96586%208.49104%201.92506%208.47975C1.88426%208.46847%201.84128%208.46758%201.80004%208.47718C1.75827%208.486%201.71964%208.50588%201.68817%208.53472C1.6567%208.56357%201.63355%208.60033%201.62113%208.64117L0.542672%2011.8316C0.527607%2011.8752%200.525213%2011.9221%200.53577%2011.967C0.546328%2012.0119%200.569401%2012.0528%200.60231%2012.0851C0.633878%2012.1238%200.676365%2012.152%200.724235%2012.1662C0.772105%2012.1804%200.823138%2012.1798%200.870682%2012.1646L4.06132%2011.1011C4.10122%2011.087%204.13704%2011.0633%204.16564%2011.0321C4.19423%2011.0009%204.21473%2010.9632%204.22533%2010.9222C4.23817%2010.8784%204.23846%2010.8319%204.22616%2010.788C4.21386%2010.7441%204.18946%2010.7045%204.15575%2010.6737L2.03363%208.54178Z%22%20fill%3D%22%23868686%22/%3E%3Cpath%20d%3D%22M11.6984%200.997694C11.3893%200.697297%2010.9764%200.529419%2010.5468%200.529419C10.1172%200.529419%209.70432%200.697297%209.39519%200.997694L9.06813%201.327C9.04654%201.34856%209.02941%201.3742%209.01771%201.40246C9.00602%201.43072%209%201.46103%209%201.49165C9%201.52226%209.00602%201.55257%209.01771%201.58083C9.02941%201.60909%209.04654%201.63474%209.06813%201.6563L11.0397%203.64139C11.0833%203.68282%2011.141%203.70589%2011.2009%203.70589C11.2609%203.70589%2011.3185%203.68282%2011.3621%203.64139L11.6984%203.31673C11.8499%203.16463%2011.9702%202.98392%2012.0522%202.78494C12.1342%202.58597%2012.1765%202.37265%2012.1765%202.15721C12.1765%201.94177%2012.1342%201.72845%2012.0522%201.52948C11.9702%201.33051%2011.8499%201.14979%2011.6984%200.997694Z%22%20fill%3D%22%23868686%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_588_14823%22%3E%3Crect%20width%3D%2212.7059%22%20height%3D%2212.7059%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
/* 편집 아이콘 - E */
/* 삭제 버튼 - S */
.remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: #ffe2df !important;
    color: #e7301d;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.remove-button:hover {
    background-color: #ffd3cf !important;
}
.remove-button label {
    cursor: pointer;
}
/* 삭제 버튼 - E */

/* 상세보기 버튼 - S */
.detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: #ffffff !important;
    color: #1f1f1f;
    border: 1px solid #1f1f1f;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.detail-button:hover {
    background-color: #f4f4f4 !important;
}
.detail-button label {
    cursor: pointer;
}
/* 상세보기 버튼 - E */

/* 임시저장 버튼 - S */
.save-temp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: #868686 !important;
    color: #ffffff;
    border: 1px solid #868686;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.save-temp-button:hover {
    background-color: #6e6e6e !important;
}
.save-temp-button label {
    cursor: pointer;
}
/* 임시저장 버튼 - E */

/* 등록 버튼 - S */
.regist-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: #338af5 !important;
    color: #ffffff;
    border: 1px solid #338af5;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.regist-button:hover {
    background-color: #1d70f2 !important;
}
.regist-button label {
    cursor: pointer;
}
/* 등록 버튼 - E */

/* 수정 버튼 - S */
.modify-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: #64748b !important;
    color: #ffffff;
    border: 1px solid #64748b;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.modify-button:hover {
    background-color: #475569 !important;
}
.modify-button label {
    cursor: pointer;
}
/* 수정 버튼 - E */
/* 닫기 버튼 - S */
.close-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	background-color: #e5e7eb !important;
	color: #1f2937;
	border: 1px solid #f3f4f6;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color 0.2s;
}
.close-button:hover {
	background-color: #d1d5db !important;
}
.close-button label {
	cursor: pointer;
}
/* 닫기 버튼 - E */


/* 달력 아이콘 */
.calendar-icon {
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Crect x=%222%22 y=%224%22 width=%2219%22 height=%2217%22 rx=%223%22 stroke=%22%23868686%22 stroke-width=%222%22/%3E%3Cpath d=%22M11.5 15.5898C12.2249 15.5898 12.8125 15.0022 12.8125 14.2773C12.8125 13.5525 12.2249 12.9648 11.5 12.9648C10.7751 12.9648 10.1875 13.5525 10.1875 14.2773C10.1875 15.0022 10.7751 15.5898 11.5 15.5898Z%22 fill=%22%23868686%22/%3E%3Cpath d=%22M7.125 15.5898C7.84987 15.5898 8.4375 15.0022 8.4375 14.2773C8.4375 13.5525 7.84987 12.9648 7.125 12.9648C6.40013 12.9648 5.8125 13.5525 5.8125 14.2773C5.8125 15.0022 6.40013 15.5898 7.125 15.5898Z%22 fill=%22%23868686%22/%3E%3Cpath d=%22M15.875 15.5898C16.5999 15.5898 17.1875 15.0022 17.1875 14.2773C17.1875 13.5525 16.5999 12.9648 15.875 12.9648C15.1501 12.9648 14.5625 13.5525 14.5625 14.2773C14.5625 15.0022 15.1501 15.5898 15.875 15.5898Z%22 fill=%22%23868686%22/%3E%3Cpath d=%22M2.5 9L20.5 9%22 stroke=%22%23868686%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M7 2V4%22 stroke=%22%23868686%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M16 2V4%22 stroke=%22%23868686%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 24px 24px;
	padding-right: 3rem;
	cursor: pointer;
}

.radio-icon .icon-stroke path {
	stroke: #C7C7C7;
	stroke-width: 1.5;
}
.radio-icon.selected {
	background: white;
	border: 1px solid #d1d5db;
}
.radio-icon.selected .icon-stroke path {
	stroke: #000000;       /* 검정색으로 */
	stroke-width: 2;       /* 더 굵게 */
}

/* 셀렉트2 박스 (싱글) */
.select2-container--default .select2-selection--single {
	@apply rounded border border-gray-300 py-2 px-4 h-12 cursor-pointer w-full text-sm text-gray-900;
	display: flex;
	align-items: center;
	height: 3rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	@apply text-sm text-gray-800;
	line-height: 2.8rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 3rem !important;
	top: 0 !important;
	right: 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
	height: 2.8rem !important;
	margin-right: 25px !important;
}

.select2-container--default .select2-results__option {
	@apply text-sm px-4 py-2;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	@apply bg-blue-600 text-white;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	@apply bg-gray-200 text-black;
}

.select2-container .select2-dropdown {
	@apply text-sm;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	@apply text-sm px-3 py-2;
}

/* 셀렉트2 박스 (멀티) */
.select2-container--default .select2-selection--multiple {
	@apply rounded border border-gray-300 py-2 px-4 h-12 cursor-pointer w-full text-sm text-gray-900;
	display: flex;
	align-items: center;
	height: 3rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	@apply bg-blue-100 text-blue-800 border border-blue-300 rounded px-2 py-0.5 text-xs;
	margin-top: 0.65rem !important;
	max-width: 115px !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
	@apply text-sm px-3 py-2;
	margin-top: 13px !important;
	margin-left: 7px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
	height: 2.1rem !important;
	margin-right: 25px !important;
}

.flatpickr-clear-button {
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	font-size: 12px;
	padding: 2px 8px;
	cursor: pointer;
	border-radius: 4px;
}

.flatpickr-clear-button:hover {
	background-color: #e0e0e0;
}

.state {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-weight: 500;
	font-size: 0.875rem;
	text-align: center;
}

.state.pending {
	background-color: #fff7e6;
	color: #f97316; /* orange */
}

.state.launched {
	background-color: #e6f4ec;
	color: #22c55e; /* green */
}

.state.soldout {
	background-color: #fef2f2;
	color: #ef4444; /* red */
}

.state.stopselling {
	background-color: #f3f4f6;
	color: #6b7280; /* gray */
}
.state.waiting {
	background-color: #e0f2fe;
	color: #0284c7; /* blue */
}

.state.active {
	background-color: #EBF7F3;
	color: #1FA778; /* green */
}

.state.ended {
	background-color: #f3f4f6;
	color: #9ca3af; /* gray */
}

/* 일반 select를 select2와 동일한 UI로 스타일링 */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	color: #374151;
	line-height: 1.5;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	width: auto;
}

select:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}