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

/* --------------- Typography --------------- */
.rsv-check-wrapper .rsv-check-title-wrapper h3,
.rsv-check-wrapper .rsv-form-field-wrapper div h3,
.rsv-check-wrapper .rsv-form-field-wrapper div label {
    font-size: var(--font-title3-size);
    font-weight: var(--font-title3-weight);
    line-height: var(--font-title3-line-height);
    letter-spacing: var(--font-title3-letter-spacing);
}

.rsv-check-wrapper .rsv-button-wrapper button {
    font-size: var(--font-body2-size);
    font-weight: var(--font-body2-weight);
    line-height: var(--font-body2-line-height);
    letter-spacing: var(--font-body2-letter-spacing);
}

.auth-alert-message,
.rsv-check-wrapper .rsv-form-field-wrapper .rsv-formatted-date-text,
.rsv-check-wrapper .rsv-form-field-wrapper div p {
    font-size: var(--font-subtitle3-size);
    font-weight: var(--font-subtitle3-weight);
    line-height: var(--font-subtitle3-line-height);
    letter-spacing: var(--font-subtitle3-letter-spacing);
}

.rsv-check-list,
.rsv-check-wrapper .rsv-form-field-wrapper .rsv-mail-error-text,
.rsv-check-wrapper .rsv-form-field-wrapper div input,
.rsv-check-wrapper .rsv-form-field-wrapper div select,
.rsv-check-wrapper .rsv-form-field-wrapper div textarea {
    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);
}

/* ---- 휴대폰 인증 ---- */
.auth-alert-message-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.auth-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- 신청 조회 ---- */
.rsv-check-wrapper,
.rsv-check-wrapper .rsv-check-detail-wrapper,
.rsv-check-wrapper .rsv-check-detail-wrapper .rsv-form-field-wrapper > form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.rsv-check-wrapper .rsv-check-title-wrapper,
.rsv-check-wrapper .rsv-form-field-wrapper > form > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rsv-check-wrapper .rsv-form-field-wrapper .rsv-formatted-date-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

/* 신청 조회 > 이메일 */
.rsv-mail-field-wrapper {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rsv-mail-field-wrapper > .rsv-mail-at-text {
    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-button-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.rsv-button-wrapper button {
    flex: 1;
}

/* 신청 조회 > 안내 */

/* ============================================================================= */
/* Tablet (>= 768px) */
/* ============================================================================= */
@media (min-width: 768px) {
    /* 버튼 컨테이너 */
    .auth-btn-wrapper {
        flex-direction: row;
    }

    .auth-btn-wrapper > button {
        flex: 1;
    }

    /* 휴대폰 인증 팝업 */

    /* 이메일: 공간을 [아이디 @ 도메인] 그룹이 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); */
    }
}

/* ============================================================================= */
/* PC (>= 1280px) */
/* ============================================================================= */
@media (min-width: 1280px) {
    /* --------------- Typography --------------- */
    .rsv-check-wrapper .rsv-check-title-wrapper h3,
    .rsv-check-wrapper .rsv-form-field-wrapper div h3,
    .rsv-check-wrapper .rsv-form-field-wrapper div label {
        font-size: var(--font-title2-size);
        font-weight: var(--font-title2-weight);
        line-height: var(--font-title2-line-height);
        letter-spacing: var(--font-title2-letter-spacing);
    }
    
    .rsv-check-wrapper .rsv-button-wrapper button {
        font-size: var(--font-body1-size);
        font-weight: var(--font-body1-weight);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
    }
    
    .auth-alert-message {
        font-size: var(--font-subtitle2-size);
        font-weight: var(--font-subtitle2-weight);
        line-height: var(--font-subtitle2-line-height);
        letter-spacing: var(--font-subtitle2-letter-spacing);
    }

    .rsv-check-list,
    .rsv-check-wrapper .rsv-form-field-wrapper .rsv-formatted-date-text,
    .rsv-check-wrapper .rsv-form-field-wrapper div p,
    .rsv-check-wrapper .rsv-form-field-wrapper div .rsv-mail-error-text,
    .rsv-check-wrapper .rsv-form-field-wrapper div input,
    .rsv-check-wrapper .rsv-form-field-wrapper div select,
    .rsv-check-wrapper .rsv-form-field-wrapper div textarea {
        font-size: var(--font-subtitle3-size);
        font-weight: var(--font-subtitle3-weight);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
    }

    /* ---- 휴대폰 인증 ---- */
    .auth-alert-message-wrapper {
        text-align: center;
        margin-bottom: 40px;
    }
}