@keyframes vibrate {
    0% {transform: translateY(0);}
    25% {transform: translateY(-2px);}
    50% {transform: translateY(2px);}
    75% {transform: translateY(-2px);}
    100% {transform: translateY(2px);}
}
.animate-vibrate {
    animation: vibrate 100ms ease-in-out 5;
}

/*pc 화면 bg 관련*/
.body-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.body-content {
    position: relative;
    z-index: 20;
}

/*스크롤바*/
::-webkit-scrollbar {
    width: 3px;
    background-color: #dedede;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#2ba7d7, #1580bd);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#1580bd, #0f6699);
}

/*아코디언(코스 소개)*/
.collapse {
    border-radius: 0.5rem;
}

.collapse-title, :where(.collapse > input[type="checkbox"]), :where(.collapse > input[type="radio"]) {
    min-height: auto;
    padding: 0;
}

.collapse-title {
    padding:0.5rem 1rem;
}

.collapse[open] > :where(.collapse-content), .collapse-open > :where(.collapse-content), .collapse:focus:not(.collapse-close) > :where(.collapse-content), .collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content), .collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
    padding-bottom: 0.7rem;
    padding-top: 0.7rem;
}

/*이미지 슬라이드*/
.slick-slide {
    height: 10rem !important;
}

.slick-initialized .slick-slide {
    display: flex;
    flex-direction: column; /* 이 속성은 자식 요소들이 열 방향으로 배치되도록 합니다. */
}
.line-div {
    transition: transform 1s;
}

/*캘린더*/
#ui-datepicker-div {
    z-index: 1000 !important;
}

#check_agree {
    border-radius: 5px;
}

/* 달력 월 헤더: jQuery UI 테마 기본 배경(짙은 회색)을 카드 톤에 맞게 밝게 덮어쓴다.
   화살표(.ui-datepicker-prev/next)는 jQuery UI 기본 위치/아이콘을 그대로 두고 배경만 밝게. */
.ui-datepicker .ui-datepicker-header {
    background: #f1f5f9;            /* slate-100 */
    border: none;
    border-radius: 0.5rem;
}
.ui-datepicker .ui-datepicker-title {
    color: #0f6699;
    font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}
.ui-datepicker .ui-state-disabled {
    opacity: 0.4;
}

/* 선택한 날짜 강조: jQuery UI 기본이 #00c57c30(초록 19% 투명)+흰 글자라 너무 흐림.
   진한 초록 원 + 흰 굵은 글자로 또렷하게. */
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active:hover {
    background: #00b473 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 180, 115, 0.5);
}
/* 오늘 날짜 표시(선택 전): 옅은 초록 배경 + 진한 초록 글자로 구분 */
.ui-datepicker td .ui-state-highlight {
    background: #d7f5ea !important;
    color: #00905c !important;
    font-weight: 700 !important;
    border: none !important;
}

#res_div {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* Chrome, Safari, Edge */
#res_div::-webkit-scrollbar {
    display: none;
}

/*미결제건 모달 관련*/
.step {
    min-width: unset !important;
}

.steps .step:after {
    background-color: rgb(2 132 199 / var(--tw-text-opacity));
}

.step-resize.step::after {
    width: 1.2rem;
    height: 1.2rem;
    background-color: hsl(var(--b3) / var(--tw-bg-opacity))
}

.step-blue.step::after {
    background-color: white;
    border: 0.2rem solid rgb(2 132 199 / var(--tw-text-opacity));
}

.steps .step:before {
    height: 0.2rem;
}

.step-line.step:before {
    background-color: rgb(2 132 199 / var(--tw-text-opacity));
}

.steps .step[data-content]:after {
    color:white;
    font-size: 1rem;
}

@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local("Pretendard Variable"), url("../font/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("../font/Pretendard-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
}

body,
input,
select,
textarea {
    font-family: "Pretendard", sans-serif;
}