/* bg */
.bg-black\/50 {
    background-color: rgba(0,0,0,.5)
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.bg-bluel-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(158 206 224/var(--tw-bg-opacity))
}

.bg-caution-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 239 180/var(--tw-bg-opacity))
}

.bg-caution-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 248 217/var(--tw-bg-opacity))
}

.bg-caution-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 252 238/var(--tw-bg-opacity))
}

.bg-charcoal {
    --tw-bg-opacity: 1;
    background-color: rgb(77 81 89/var(--tw-bg-opacity))
}

.bg-choco-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(101 93 85/var(--tw-bg-opacity))
}

.bg-choco-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(36 30 23/var(--tw-bg-opacity))
}

.bg-cool {
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 247/var(--tw-bg-opacity))
}

.bg-cool-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(117 117 117/var(--tw-bg-opacity))
}

.bg-cool-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(97 97 97/var(--tw-bg-opacity))
}

.bg-error-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 234/var(--tw-bg-opacity))
}

.bg-green-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(125 217 130/var(--tw-bg-opacity))
}

.bg-green-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(74 222 128/var(--tw-bg-opacity))
}

.bg-info-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(214 235 255/var(--tw-bg-opacity))
}

.bg-info-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 216 240/var(--tw-bg-opacity));
}

.bg-info-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(101 163 255/var(--tw-bg-opacity))
}

.bg-info-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 250 255/var(--tw-bg-opacity))
}

.bg-red-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202/var(--tw-bg-opacity))
}

.bg-red-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

.bg-red-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 113 113/var(--tw-bg-opacity))
}

.bg-skin-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(50 116 246/var(--tw-bg-opacity))
}

.bg-skin-charcoal {
    --tw-bg-opacity: 1;
    background-color: rgb(77 81 89/var(--tw-bg-opacity))
}

.bg-skin-green {
    --tw-bg-opacity: 1;
    background-color: rgb(84 184 97/var(--tw-bg-opacity))
}

.bg-skin-orange {
    --tw-bg-opacity: 1;
    background-color: rgb(255 109 0/var(--tw-bg-opacity))
}

.bg-skin-red {
    --tw-bg-opacity: 1;
    background-color: rgb(234 63 51/var(--tw-bg-opacity))
}

.bg-skin-yellow {
    --tw-bg-opacity: 1;
    background-color: rgb(245 192 69/var(--tw-bg-opacity))
}

.bg-yellow-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 144/var(--tw-bg-opacity))
}

.bg-success-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 251 249/var(--tw-bg-opacity))
}

.bg-tertiary-lightred {
    --tw-bg-opacity: 1;
    background-color: rgb(255 224 217/var(--tw-bg-opacity))
}

.bg-white\/10 {
    background-color: hsla(0,0%,100%,.1)
}

.bg-white\/30 {
    background-color: hsla(0,0%,100%,.3)
}

.bg-white\/70 {
    background-color: hsla(0,0%,100%,.7)
}

.bg-wolf-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 245 239/var(--tw-bg-opacity))
}

.bg-choco-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(212 200 187/var(--tw-bg-opacity))
}

.bg-cool-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 247/var(--tw-bg-opacity))
}

.bg-cool-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242/var(--tw-bg-opacity))
}

.bg-cool-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233/var(--tw-bg-opacity))
}

.bg-cool-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(199 199 199/var(--tw-bg-opacity))
}

.bg-cool-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(158 158 158 / var(--tw-bg-opacity));
}

.bg-cool-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(252 252 252/var(--tw-bg-opacity))
}

.bg-cool-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(66 66 66/var(--tw-bg-opacity))
}

.bg-error-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 221 204/var(--tw-bg-opacity))
}

.bg-error-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 197 167/var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity))
}

.bg-inherit {
    background-color: inherit
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(255 100 18/var(--tw-bg-opacity))
}

.bg-primary-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 250 242/var(--tw-bg-opacity))
}

.bg-primary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 235 207/var(--tw-bg-opacity))
}

.bg-primary-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 210 160/var(--tw-bg-opacity))
}

.bg-primary-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 200 138/var(--tw-bg-opacity))
}

.bg-primary-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 149 77/var(--tw-bg-opacity))
}

.bg-primary-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 100 18/var(--tw-bg-opacity))
}

.bg-primary-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 71 13/var(--tw-bg-opacity))
}

.bg-slate-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(203 213 225/var(--tw-bg-opacity))
}

.bg-success-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 243 239/var(--tw-bg-opacity))
}

.bg-tertiary-softblue {
    --tw-bg-opacity: 1;
    background-color: rgb(236 242 255/var(--tw-bg-opacity))
}

.bg-transparent {
    background-color: transparent
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

/* !important bg */
.\!bg-black {
    --tw-bg-opacity: 1!important;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))!important
}

.\!bg-transparent {
    background-color: transparent!important
}

.\!bg-charcoal-blue {
    --tw-bg-opacity: 1!important;
    background-color: rgb(77 81 89/var(--tw-bg-opacity))!important
}

.\!bg-opacity-100 {
    --tw-bg-opacity: 1 !important
}

.\!bg-cool-100 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(247 247 247/var(--tw-bg-opacity))!important
}

.\!bg-error-100 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(254 221 204/var(--tw-bg-opacity))!important
}

.\!bg-primary {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 100 18/var(--tw-bg-opacity))!important
}

.\!bg-primary-400 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 149 77/var(--tw-bg-opacity))!important
}

.\!bg-success-100 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(224 243 239/var(--tw-bg-opacity))!important
}

.\!bg-white {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))!important
}

.\!bg-cool-200 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(242 242 242/var(--tw-bg-opacity))!important
}

.\!bg-cool-600 {
    --tw-bg-opacity: 1!important;
    background-color: rgb(117 117 117/var(--tw-bg-opacity))!important
}

.\!bg-tertiary-softblue {
    --tw-bg-opacity: 1!important;
    background-color: rgb(236 242 255/var(--tw-bg-opacity))!important
}

/* bg-hover */
bg-\[\#9E9E9ECC\]:hover {
    background-color: #9e9e9ecc
}

.hover\:bg-choco-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(140 131 122/var(--tw-bg-opacity))
}

.hover\:bg-cool-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(252 252 252/var(--tw-bg-opacity))
}

.hover\:bg-cool-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}

.hover\:bg-cool-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242/var(--tw-bg-opacity))
}

.hover\:bg-cool-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233/var(--tw-bg-opacity))
}

.hover\:bg-cool-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33/var(--tw-bg-opacity))
}

.hover\:bg-primary-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 149 77/var(--tw-bg-opacity))
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.hover\:bg-wolf-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(217 212 205/var(--tw-bg-opacity))
}

.hover\:\!bg-error-50:hover {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 241 234/var(--tw-bg-opacity))!important
}

/* bg-active */
active\:bg-choco-600:active {
    --tw-bg-opacity: 1;
    background-color: rgb(70 63 55/var(--tw-bg-opacity))
}

.active\:bg-cool-200:active {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242/var(--tw-bg-opacity))
}

.active\:bg-error-100:active {
    --tw-bg-opacity: 1;
    background-color: rgb(254 221 204/var(--tw-bg-opacity))
}

.active\:bg-primary-600:active {
    --tw-bg-opacity: 1;
    background-color: rgb(219 71 13/var(--tw-bg-opacity))
}

.active\:bg-success-100:active {
    --tw-bg-opacity: 1;
    background-color: rgb(224 243 239/var(--tw-bg-opacity))
}

.active\:bg-wolf-200:active {
    --tw-bg-opacity: 1;
    background-color: rgb(192 183 171/var(--tw-bg-opacity))
}

/* focus-bg */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* border */
.border-choco-400 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(140 131 122/var(--tw-border-opacity));
}

.border-cool-50 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(252 252 252/var(--tw-border-opacity))
}

.border-cool-500 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(158 158 158/var(--tw-border-opacity))
}

.border-cool-700 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(97 97 97/var(--tw-border-opacity))
}

.border-error-400 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(249 79 63/var(--tw-border-opacity))
}

.border-info-600 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(36 96 219/var(--tw-border-opacity))
}

.border-primary-400 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(255 149 77/var(--tw-border-opacity))
}

.border-success-400 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(81 188 161/var(--tw-border-opacity))
}

.border-wolf-100 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(217 212 205/var(--tw-border-opacity))
}

.border-wolf-600 {
    --tw-border-opacity: 1;
    border: 1px solid rgb(115 98 73/var(--tw-border-opacity))
}

/* border:hover */
.hover\:border-choco-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(140 131 122/var(--tw-border-opacity))
}

.hover\:border-cool-50:hover {
    --tw-border-opacity: 1;
    border-color: rgb(252 252 252/var(--tw-border-opacity))
}

.hover\:border-cool-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(158 158 158/var(--tw-border-opacity))
}

.hover\:border-cool-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(97 97 97/var(--tw-border-opacity))
}

.hover\:border-error-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(249 79 63/var(--tw-border-opacity))
}

.hover\:border-info-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(36 96 219/var(--tw-border-opacity))
}

.hover\:border-primary-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(255 149 77/var(--tw-border-opacity))
}

.hover\:border-success-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(81 188 161/var(--tw-border-opacity))
}

.hover\:border-wolf-100:hover {
    --tw-border-opacity: 1;
    border-color: rgb(217 212 205/var(--tw-border-opacity))
}

.hover\:border-wolf-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(115 98 73/var(--tw-border-opacity))
}

/* font-color */
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-choco-900 {
    --tw-text-opacity: 1;
    color: rgb(7 6 5 / var(--tw-text-opacity));
}

.text-choco,
.text-choco-700 {
    --tw-text-opacity: 1;
    color: rgb(36 30 23 / var(--tw-text-opacity));
}

.text-choco-600 {
    --tw-text-opacity: 1;
    color: rgb(70 63 55 / var(--tw-text-opacity));
}

.text-choco-500 {
    --tw-text-opacity: 1;
    color: rgb(101 93 85 / var(--tw-text-opacity));
}

.text-wolf-900 {
    --tw-text-opacity: 1;
    color: rgb(71 57 43 / var(--tw-text-opacity));
}

.text-wolf-700 {
    --tw-text-opacity: 1;
    color: rgb(100 85 63 / var(--tw-text-opacity));
}

.text-charcoal,
.text-skin-charcoal {
    --tw-text-opacity: 1;
    color: rgb(77 81 89 / var(--tw-text-opacity));
}

.text-cool-900 {
    --tw-text-opacity: 1;
    color: rgb(33 33 33 / var(--tw-text-opacity));
}

.text-cool-800 {
    --tw-text-opacity: 1;
    color: rgb(66 66 66 / var(--tw-text-opacity));
}

.text-cool-700 {
    --tw-text-opacity: 1;
    color: rgb(97 97 97 / var(--tw-text-opacity));
}

.text-cool-600 {
    --tw-text-opacity: 1;
    color: #757575;
}

.text-cool-500 {
    --tw-text-opacity: 1;
    color: rgb(158 158 158 / var(--tw-text-opacity));
}

.text-cool-400 {
    --tw-text-opacity: 1;
    color: rgb(199 199 199 / var(--tw-text-opacity));
}

.text-cool-300 {
    --tw-text-opacity: 1;
    color: rgb(233 233 233 / var(--tw-text-opacity));
}

.text-dust-300 {
    --tw-text-opacity: 1;
    color: rgb(159 141 109 / var(--tw-text-opacity));
}

.text-cream-200 {
    --tw-text-opacity: 1;
    color: rgb(246 208 109 / var(--tw-text-opacity));
}

.text-caution-400 {
    --tw-text-opacity: 1;
    color: rgb(255 217 114 / var(--tw-text-opacity));
}

.text-caution-500 {
    --tw-text-opacity: 1;
    color: rgb(255 199 68 / var(--tw-text-opacity));
}

.text-caution-700 {
    --tw-text-opacity: 1;
    color: rgb(183 129 34 / var(--tw-text-opacity));
}

.text-skin-yellow {
    --tw-text-opacity: 1;
    color: rgb(245 192 69 / var(--tw-text-opacity));
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity));
}

.text-primary-400 {
    --tw-text-opacity: 1;
    color: rgb(255 149 77 / var(--tw-text-opacity));
}

.text-primary-500 {
    --tw-text-opacity: 1;
    color: rgb(255 100 18 / var(--tw-text-opacity));
}

.text-primary-600 {
    --tw-text-opacity: 1;
    color: rgb(219 71 13 / var(--tw-text-opacity));
}

.text-skin-orange {
    --tw-text-opacity: 1;
    color: rgb(255 109 0 / var(--tw-text-opacity));
}

.text-error-300 {
    --tw-text-opacity: 1;
    color: rgb(252 128 102 / var(--tw-text-opacity));
}

.text-error-400 {
    --tw-text-opacity: 1;
    color: rgb(249 79 63 / var(--tw-text-opacity));
}

.text-error,
.text-error-500 {
    --tw-text-opacity: 1;
    color: rgb(245 2 2 / var(--tw-text-opacity));
}

.text-error-700 {
    --tw-text-opacity: 1;
    color: rgb(176 1 31 / var(--tw-text-opacity));
}

.text-skin-red {
    --tw-text-opacity: 1;
    color: rgb(234 63 51 / var(--tw-text-opacity));
}

.text-success-400 {
    --tw-text-opacity: 1;
    color: rgb(81 188 161 / var(--tw-text-opacity));
}

.text-success-500 {
    --tw-text-opacity: 1;
    color: rgb(43 173 142 / var(--tw-text-opacity));
}

.text-success,
.text-success-600 {
    --tw-text-opacity: 1;
    color: rgb(4 144 111 / var(--tw-text-opacity));
}

.text-skin-green {
    --tw-text-opacity: 1;
    color: rgb(84 184 97 / var(--tw-text-opacity));
}

.text-info-300 {
    --tw-text-opacity: 1;
    color: rgb(131 186 255 / var(--tw-text-opacity));
}

.text-info,
.text-info-600 {
    --tw-text-opacity: 1;
    color: rgb(36 96 219 / var(--tw-text-opacity));
}

.text-info-500 {
    --tw-text-opacity: 1;
    color: rgb(50 125 255 / var(--tw-text-opacity));
}

.text-skin-blue {
    --tw-text-opacity: 1;
    color: rgb(50 116 246 / var(--tw-text-opacity));
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(84 125 189);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-inherit {
    color: inherit;
}

/* font-color !impotant */
.\!text-choco, .\!text-choco-700 {
    --tw-text-opacity: 1 !important;
    color: #241e17 !important;
}
.\!text-warm-700 {
    --tw-text-opacity: 1!important;
    color: rgb(106 104 99/var(--tw-text-opacity))!important
}

/* text hover */
.hover\:text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity))
}

.hover\:text-choco:hover {
    --tw-text-opacity: 1;
    color: rgb(36 30 23/var(--tw-text-opacity))
}

.hover\:text-choco-400:hover {
    --tw-text-opacity: 1;
    color: rgb(140 131 122/var(--tw-text-opacity))
}

.hover\:text-error-400:hover {
    --tw-text-opacity: 1;
    color: rgb(249 79 63/var(--tw-text-opacity))
}

.hover\:text-info-600:hover {
    --tw-text-opacity: 1;
    color: rgb(36 96 219/var(--tw-text-opacity))
}

.hover\:text-primary-400:hover {
    --tw-text-opacity: 1;
    color: rgb(255 149 77/var(--tw-text-opacity))
}

.hover\:text-success-400:hover {
    --tw-text-opacity: 1;
    color: rgb(81 188 161/var(--tw-text-opacity))
}

.hover\:text-wolf-600:hover {
    --tw-text-opacity: 1;
    color: rgb(115 98 73/var(--tw-text-opacity))
}

/* border */
.hover\:underline-border-cool-100:hover {
    border-bottom: 1px solid #f2f2f2;
}
.hover\:underline-border-cool-300:hover {
    border-bottom: 1px solid #e9e9e9;
}
.hover\:underline-border-cool-400:hover {
    box-shadow: inset 0 -1px 0 #c7c7c7;
}
/* 밑줄 호버 효과만 따로 분리 */
.underline-hover {
    position: relative;
}

.underline-hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    --tw-bg-opacity: 1;
    background-color: rgb(199 199 199/var(--tw-bg-opacity));
    transition: width 0.3s ease;
}

.underline-hover:hover::after {
    width: 100%;
}

.underline-hover.active::after {
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(101 163 255/var(--tw-bg-opacity));
}


/* 📌 부드러운 배경 전환 전용 클래스 */
.smooth-bg-transition {
    transition: background-color 0.6s ease-in-out !important;
}