/* ============================================================================= */
/* Mobile (< 767px) */
/* ============================================================================= */

/* --------------- Typography --------------- */
.rsv-type-title,
.rsv-program-title,
.rsv-schedule-title,
.rsv-form-title,
.rsv-information-guide-title,
.rsv-imp-information-guide-title,
.rsv-portrait-title {
    font-weight: var(--font-title3-weight);
    font-size: var(--font-title3-size);
    line-height: var(--font-title3-line-height);
    letter-spacing: var(--font-title3-letter-spacing);
}

.rsv-survey-title {
    font-weight: var(--font-title4-weight);
    font-size: var(--font-title4-size);
    line-height: var(--font-title4-line-height);
    letter-spacing: var(--font-title4-letter-spacing);
}

.show-curriculum,
.rsv-allergy-yn-title,
.rsv-schedule-detail-title,
.rsv-schedule-detail-finish-tag,
.rsv-tel-title,
.rsv-name-label,
.rsv-group-name-label,
.rsv-age-label,
.rsv-job-label,
.rsv-cnt-label,
.rsv-mail-title,
.rsv-memo-label,
.rsv-survey-1-label,
.rsv-survey-2-label,
.rsv-survey-3-label,
.rsv-information-guide-wrapper .content-title,
.rsv-imp-information-guide-wrapper .content-title,
.rsv-portrait-content .content-title {
    font-weight: var(--font-title5-weight);
    font-size: var(--font-title5-size);
    line-height: var(--font-title5-line-height);
    letter-spacing: var(--font-title5-letter-spacing);
}

.rsv-program-input-wrapper > label,
.rsv-allergy-y,
.rsv-allergy-n,
.rsv-information-guide-y-label,
.rsv-information-guide-n-label,
.rsv-imp-information-guide-y-label,
.rsv-imp-information-guide-n-label,
.rsv-portrait-y-label,
.rsv-portrait-n-label {
    font-weight: var(--font-subtitle3-weight);
    font-size: var(--font-subtitle3-size);
    line-height: var(--font-subtitle3-line-height);
    letter-spacing: var(--font-subtitle3-letter-spacing);
}

.notice-banner-btn-text,
.rsv-allergy-group-text,
.rsv-allergy-alert-text,
.rsv-formatted-date-text,
.rsv-schedule-detail-remain-text,
.rsv-mail-at-text,
.rsv-tel1-field,
.rsv-tel2-field,
.rsv-tel3-field,
.tel-auth-btn,
.rsv-name-field,
.rsv-group-name-field,
.rsv-age-field,
.rsv-job-field,
.rsv-cnt-field,
.rsv-cnt-limit-text,
.rsv-mail-id-field,
.rsv-mail-domain-field,
.rsv-mail-domain-select,
.rsv-mail-error-text,
.rsv-memo-field,
.rsv-survey-1-field,
.rsv-survey-2-field,
.rsv-survey-3-field,
.rsv-information-guide-wrapper .content-text,
.rsv-imp-information-guide-wrapper .content-text,
.rsv-portrait-content .content-text,
.rsv-cancel-policy-wrapper .rsv-cancel-policy-text {
    font-weight: var(--font-subtitle4-weight);
    font-size: var(--font-subtitle4-size);
    line-height: var(--font-subtitle4-line-height);
    letter-spacing: var(--font-subtitle4-letter-spacing);
}

.rsv-type-individual,
.rsv-type-group,
.rsv-apply-btn {
    font-weight: var(--font-body2-weight);
    font-size: var(--font-body2-size);
    line-height: var(--font-body2-line-height);
}

.rsv-allergy-group-text {
    color: var(--color-point-red);
}

.rsv-schedule-detail-remain-text {
    color: var(--color-text-gray);
    white-space: pre-wrap;
}

/* --------------- Form Layout --------------- */
#apply-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#apply-form > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rsv-form-field-wrapper > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --------------- 공지사항 --------------- */
.notice-banner-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.notice-banner-btn-wrapper .notice-banner-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 내부 요소들을 양 끝으로 정렬 */
    width: 100%;
    padding: 8px 12px;
    
    background-color: inherit;
    border: 1px solid var(--color-point-red);
    color: var(--color-text-black);
}

.notice-banner-btn-wrapper .notice-banner-btn:hover,
.notice-banner-btn-wrapper .notice-banner-btn:active {
    background-color: transparent;
    border-color: var(--color-point-red);
    color: var(--color-text-black);
}

/* 텍스트와 알림 아이콘을 그룹화 */
.notice-banner-btn-wrapper .notice-banner-btn > span {
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
}

/* 알림 아이콘 (span의 ::before로 이동) */
.notice-banner-btn-wrapper .notice-banner-btn > span::before {
    content: '';
    display: inline-block;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */

    flex-shrink: 0; /* 아이콘 크기가 줄어들지 않도록 설정 */
    background-color: var(--color-point-red);
    mask-image: url('/images/components/ic_noti_16px-4be57016a70365e7965749e8a62ea16e.svg');
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* 오른쪽 화살표 아이콘 (::after) */
.notice-banner-btn-wrapper .notice-banner-btn::after {
    content: '';
    display: inline-block;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */

    flex-shrink: 0; /* 아이콘 크기가 줄어들지 않도록 설정 */
    background-color: currentColor;
    mask-image: url('/images/components/ic_chevron_right-3d942710a5a22a5a3bf7e46a4ac9ab49.svg');
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.notice-banner-btn-wrapper .notice-banner-btn > .notice-banner-btn-text {
    text-align: left;
}

/* --------------- 신청유형 --------------- */
.rsv-type-btn-wrapper {
    display: flex;
    gap: 12px;
}

/* --------------- 프로그램 --------------- */
.rsv-program-div {
    display: flex;
    align-items: center;
    gap: 24px;
}

.rsv-program-div:not(:last-child) {
    margin-bottom: 16px;
}

.show-curriculum {
    background-color: var(--color-light-gray);
    color: var(--color-text-black);
    padding: 8px 12px;
}

.rsv-program-input-wrapper {
    min-width: 8rem;
}


/* --------------- 교육일정 선택 --------------- */
.rsv-schedule-calendar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* 교육일정 선택 > 교육 상세 */
.rsv-schedule-detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rsv-schedule-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    padding: 16px;
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
}

.rsv-schedule-detail.selected {
    border: 1px solid var(--color-primary);
}

.rsv-schedule-detail-finish {
    color: var(--color-text-gray);
    /* border: transparent; */
    background-color: var(--color-light-gray);
}

.rsv-schedule-detail-none {
    color: var(--color-text-gray);
    background-color: var(--color-light-gray);
    text-align: center;
}

.rsv-schedule-detail.rsv-schedule-detail-available {
    cursor: pointer;
}

.rsv-schedule-detail-wrapper .rsv-schedule-detail-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rsv-schedule-detail-wrapper .rsv-schedule-detail-title-wrapper .rsv-schedule-detail-finish-tag {
    flex-shrink: 0;
/*     width: 36px; */
    color: var(--color-white);
    background-color: var(--color-text-gray);
    padding: 2px 6px;
    border-radius: 4px;
}

.rsv-schedule-detail-wrapper .rsv-schedule-detail-date-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --------------- 수강 신청서 작성 --------------- */
.rsv-form-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#form-fields-by-type-wrapper {
    gap: 16px;
}

#form-fields-by-type-wrapper > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 수강 신청서 작성 > 식품 알레르기 유무 */
.rsv-allergy-yn-field-wrapper {
    display: flex;
    gap: 24px;
    margin: 12px 0;
}

/* 수강 신청서 작성 > 휴대폰 번호 */
.rsv-tel-field-wrapper {
    display: flex;
    gap: 8px;
    flex: 1; /* 남는 공간은 field가 전부 차지 */
}

.form-inline-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 수강 신청서 작성 > 휴대폰 인증 팝업 */

/* 수강 신청서 작성 > 이름 (개인) */

/* 수강 신청서 작성 > 출생년도 (개인) */

/* 수강 신청서 작성 > 직업 (개인) */

/* 수강 신청서 작성 > 대표자 이름 (단체) */

/* 수강 신청서 작성 > 단체명 (단체) */

/* 수강 신청서 작성 > 수강인원 (단체) */
.rsv-cnt-input-wrapper {
    display: flex;
    gap: 4px;
}

.rsv-cnt-input-wrapper > .rsv-cnt-minus-btn,
.rsv-cnt-input-wrapper > .rsv-cnt-plus-btn {
    color: #000;
}

.rsv-cnt-input-wrapper > .rsv-cnt-field {
    text-align: center;
}

.rsv-cnt-limit-text {
    color: var(--color-text-gray);
}

/* 수강 신청서 작성 > 이메일 */
.rsv-mail-title-wrapper {
    display: flex;
    flex-direction: column;
    column-gap: 20px;
}

.rsv-mail-field-wrapper {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rsv-mail-field-wrapper .rsv-mail-at-text,
.rsv-mail-select-wrapper .rsv-mail-domain-select {
    color: var(--color-text-gray);
}

.rsv-mail-error-text {
    color: var(--color-point-red);
}

/* 수강 신청서 작성 > 기타사항 */
.rsv-memo-field {
    height: calc(calc(3em + calc(var(--form-field-padding-y) * 2)) + 2px);
    /* min-height: calc(calc(3em + calc(var(--form-field-padding-y) * 2)) + 2px); */
    max-height: calc(calc(15em + calc(var(--form-field-padding-y) * 2)) + 2px);
}

/* 수강 신청서 작성 > 설문조사 */
.rsv-form-field-wrapper > .rsv-survey-wrapper {
    padding-top: 12px;
    border-top: 1px solid var(--color-light-gray);
    gap: 16px;
}

.rsv-survey-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rsv-survey-field-wrapper .rsv-survey-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-1-field,
.rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-2-field,
.rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-3-field {
    height: calc(calc(3em + calc(var(--form-field-padding-y) * 2)) + 2px);
    /* min-height: calc(calc(3em + calc(var(--form-field-padding-y) * 2)) + 2px); */
    max-height: calc(calc(15em + calc(var(--form-field-padding-y) * 2)) + 2px);
}


/* --------------- 이용안내 & 이용 동의서 폼 --------------- */
.rsv-information-guide-content,
.rsv-imp-information-guide-content,
.rsv-portrait-content {
    padding: 20px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-text-gray);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rsv-information-guide-field-wrapper,
.rsv-imp-information-guide-field-wrapper,
.rsv-portrait-field-wrapper {
    display: flex;
    gap: 12px;
}

/* --------------- 취소 규정 --------------- */
#apply-form > .rsv-cancel-policy-wrapper {
    gap: 0;
    border-top: 1px solid #ccc;
    padding-top: 30px;
}

/* --------------- Modal Custom --------------- */
/* 커리큘럼 모달은 최대 너비 수정 */
#curriculumModal .modal-container {
    max-width: 800px;
}

/* Firefox 스크롤바 (투명도 조정) */
#curriculumModal .modal-content {
    scrollbar-width: thin;
    scrollbar-color: #b9b9b988 transparent;
}

#consentModal .modal-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Webkit 브라우저 스크롤바 (세로 스크롤바 제거, 가로 스크롤바 유지) */
#curriculumModal .modal-content::-webkit-scrollbar {
    width: 0px;
    height: 4px;
}

#curriculumModal .modal-content::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 4px;
}

#consentModal .modal-content::-webkit-scrollbar {
    display: none;
}

/* ============================================================================= */
/* Tablet (>= 768px) */
/* ============================================================================= */

@media (min-width: 768px) {
    /* 수강 신청서 작성 > 휴대폰 인증 팝업 */
    
    /* 수강 신청서 작성 > 이메일 */
    .rsv-mail-title-wrapper {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
    }
    
    /* 이메일: 공간을 [아이디 @ 도메인] 그룹이 2, [선택] 그룹이 1의 비율로 가짐 */
    .form-inline-group {
        flex-direction: row;
    }

    .rsv-mail-wrapper .form-inline-group > .rsv-mail-field-wrapper {
        flex: 2;
    }
    .rsv-mail-wrapper .form-inline-group > .rsv-mail-select-wrapper {
        flex: 1;
    }

    /* 수강 신청서 작성 > 기타사항 */
    .rsv-memo-field {
        height: calc(calc(1.5em + calc(var(--form-field-padding-y) * 2)) + 2px);
        /* min-height: calc(calc(1.5em + calc(var(--form-field-padding-y) * 2)) + 2px); */
    }
    

    /* 수강 신청서 작성 > 설문조사 */
    .rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-1-field,
    .rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-2-field,
    .rsv-survey-field-wrapper .rsv-survey-item-wrapper .rsv-survey-3-field {
        height: calc(calc(1.5em + calc(var(--form-field-padding-y) * 2)) + 2px);
        /* min-height: calc(calc(1.5em + calc(var(--form-field-padding-y) * 2)) + 2px); */
    }
}

/* ============================================================================= */
/* PC (>= 1280px) */
/* ============================================================================= */
@media (min-width: 1280px) {
    /* --------------- Typography --------------- */
    .rsv-type-title,
    .rsv-program-title,
    .rsv-schedule-title,
    .rsv-form-title,
    .rsv-information-guide-title,
    .rsv-imp-information-guide-title,
    .rsv-portrait-title {
        font-weight: var(--font-title2-weight);
        font-size: var(--font-title2-size);
        line-height: var(--font-title2-line-height);
        letter-spacing: var(--font-title2-letter-spacing);
    }

    .rsv-survey-title {
        font-weight: var(--font-title3-weight);
        font-size: var(--font-title3-size);
        line-height: var(--font-title3-line-height);
        letter-spacing: var(--font-title3-letter-spacing);
    }

    .show-curriculum,
    .rsv-allergy-yn-title,
    .rsv-tel-title,
    .rsv-name-label,
    .rsv-group-name-label,
    .rsv-age-label,
    .rsv-job-label,
    .rsv-cnt-label,
    .rsv-mail-title,
    .rsv-memo-label,
    .rsv-survey-1-label,
    .rsv-survey-2-label,
    .rsv-survey-3-label,
    .rsv-information-guide-wrapper .content-title,
    .rsv-imp-information-guide-wrapper .content-title,
    .rsv-portrait-content .content-title {
        font-weight: var(--font-title4-weight);
        font-size: var(--font-title4-size);
        line-height: var(--font-title4-line-height);
        letter-spacing: var(--font-title4-letter-spacing);
    }

    .notice-banner-btn-text,
    .rsv-allergy-group-text,
    .rsv-allergy-alert-text,
    .rsv-mail-at-text,
    .rsv-tel1-field,
    .rsv-tel2-field,
    .rsv-tel3-field,
    .tel-auth-btn,
    .rsv-name-field,
    .rsv-group-name-field,
    .rsv-age-field,
    .rsv-job-field,
    .rsv-cnt-field,
    .rsv-cnt-limit-text,
    .rsv-mail-id-field,
    .rsv-mail-domain-field,
    .rsv-mail-domain-select,
    .rsv-mail-error-text,
    .rsv-memo-field,
    .rsv-survey-1-field,
    .rsv-survey-2-field,
    .rsv-survey-3-field,
    .rsv-information-guide-wrapper .content-text,
    .rsv-imp-information-guide-wrapper .content-text,
    .rsv-portrait-content .content-text,
    .rsv-cancel-policy-wrapper .rsv-cancel-policy-text {
        font-weight: var(--font-subtitle3-weight);
        font-size: var(--font-subtitle3-size);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
    }

    /* --------------- Form Layout --------------- */
    #apply-form {
        margin-bottom: 6rem;
    }
}