@charset "UTF-8";

/* ============================================================
   신청 폼 (랜딩 하단 / 신청 수정) + 신청 확인 / 상세
   ============================================================ */

/* ---------- 신청 구분 탭 ---------- */
.apply-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 999px;
    background: #EAF2F9;
}

.apply-type__item {
    position: relative;
    display: block;
}

.apply-type__item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.apply-type__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 62px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    color: #6B7A8C;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.apply-type__item input:checked + span {
    background: var(--c-cta);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 100, 200, .25);
}

.apply-type__item input:focus-visible + span {
    outline: 3px solid rgba(1, 100, 200, .45);
    outline-offset: 2px;
}

.apply-type__desc {
    margin-top: 14px;
    font-size: 16px;
    color: #5B6776;
    text-align: center;
}

/* ---------- 레이아웃 ---------- */
.apply-form__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    margin-top: 44px;
}

/* 달력이 좁아지는 태블릿 이하에서는 한 줄로 */
@media (max-width: 1099px) {
    .apply-form__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* ---------- 입력 항목 ---------- */
.field + .field {
    margin-top: 24px;
}

[data-group-only] {
    display: none;
}

.is-group [data-group-only] {
    display: block;
}

.field__label {
    display: block;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--c-navy);
}

.req {
    margin-left: 2px;
    color: var(--c-coral);
}

.field__input {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1.5px solid #D3DDE8;
    border-radius: 14px;
    background: #fff;
    font-size: 18px;
    transition: border-color .2s, box-shadow .2s;
}

.field__input::placeholder {
    color: #A3AEBB;
}

.field__input:focus {
    outline: none;
    border-color: var(--c-cta);
    box-shadow: 0 0 0 4px rgba(0, 100, 200, .12);
}

.field__input[aria-invalid="true"],
.stepper[aria-invalid="true"] {
    border-color: var(--c-error);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .1);
}

.field__help {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-muted);
}

/* 인원수 증감 */
.stepper {
    display: flex;
    align-items: center;
    height: 60px;
    overflow: hidden;
    border: 1.5px solid #D3DDE8;
    border-radius: 14px;
    background: #fff;
}

.stepper:focus-within {
    border-color: var(--c-cta);
    box-shadow: 0 0 0 4px rgba(0, 100, 200, .12);
}

.stepper button {
    flex: none;
    width: 60px;
    height: 100%;
    border: 0;
    background: #F2F7FC;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-cta);
}

.stepper button:hover {
    background: #E3EFFB;
}

.stepper input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input:focus {
    outline: none;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper__unit {
    flex: 1;
    padding-left: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #5B6776;
}

/* ---------- 희망 날짜 달력 ---------- */
.date-picker {
    position: relative;
}

.date-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.date-slot {
    --slot: var(--c-cta);
    --slot-soft: rgba(0, 100, 200, .12);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 12px 18px;
    border: 2px solid #D3DDE8;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    transition: border-color .2s, box-shadow .2s;
}

.date-slot[data-slot="2"] {
    --slot: var(--c-orange);
    --slot-soft: rgba(255, 117, 75, .14);
}

.date-slot.is-active {
    border-color: var(--slot);
    box-shadow: 0 0 0 4px var(--slot-soft);
}

.date-slot[aria-invalid="true"] {
    border-color: var(--c-error);
}

.date-slot__rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--slot);
}

.date-slot__rank::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--slot);
}

.date-slot__value {
    max-width: 100%;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    color: #A3AEBB;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.date-slot.is-filled .date-slot__value {
    color: var(--c-text);
}

/* 개인 신청 가능일 안내 (개인 신청이고 날짜가 정해져 있을 때만) */
.date-picker__note {
    display: flex;
    gap: 4px 10px;
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: 14px;
    background: #EEF6FD;
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-navy);
    word-break: keep-all;
}

.date-picker__note[hidden] {
    display: none;
}

.date-picker__note strong {
    flex: none;
    color: var(--c-cta);
}

.calendar {
    margin-top: 12px;
    padding: 16px 16px 12px;
    border: 1.5px solid #E1E8F0;
    border-radius: 20px;
    background: #fff;
}

.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar__month {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
}

.calendar__nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #F1F6FB;
    color: var(--c-cta);
}

.calendar__nav svg {
    width: 20px;
    height: 20px;
}

.calendar__nav:not(:disabled):hover {
    background: #E1EEFB;
}

.calendar__nav:disabled {
    opacity: .35;
    cursor: default;
}

.calendar__week,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar__week {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-muted);
    text-align: center;
}

.calendar__week span:first-child {
    color: var(--c-coral);
}

.calendar__week span:last-child {
    color: var(--c-ocean);
}

.calendar__grid {
    margin-top: 6px;
    row-gap: 2px;
}

.calendar__day {
    position: relative;
    display: grid;
    place-items: center;
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
}

.calendar__day > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color .15s, color .15s;
}

.calendar__day.is-sun { color: var(--c-coral); }
.calendar__day.is-sat { color: var(--c-ocean); }

.calendar__day:not(:disabled):hover > span {
    background: #EAF3FD;
}

.calendar__day.is-today > span {
    box-shadow: inset 0 0 0 1.5px #B4C3D3;
}

.calendar__day:disabled {
    color: #CBD3DC;
    cursor: default;
}

/* 개인 신청: 고를 수 있는 날짜가 몇 개뿐이라 한눈에 보이도록 */
.date-picker.is-fixed .calendar__day:not(:disabled) > span {
    background: #E6F1FD;
}

.date-picker.is-fixed .calendar__day:not(:disabled):hover > span {
    background: #D2E6FB;
}

.calendar__day.is-first > span {
    background: var(--c-cta) !important;
    color: #fff;
}

.calendar__day.is-second > span {
    background: var(--c-orange) !important;
    color: #fff;
}

.calendar__rank {
    position: absolute;
    top: 0;
    left: calc(50% + 12px);
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid currentColor;
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.calendar__day.is-first .calendar__rank { color: var(--c-cta); }
.calendar__day.is-second .calendar__rank { color: var(--c-orange); }

.date-picker__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 10px;
}

.date-picker__msg {
    min-height: 21px;
    font-size: 14px;
    color: var(--c-muted);
}

.date-picker__msg.is-warn {
    font-weight: 700;
    color: var(--c-coral);
}

/* 알약 버튼 (신청 확인 링크와 같은 모양, 작게). 줄이 바뀌어도 오른쪽에 붙는다 */
.date-picker__reset {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 34px;
    margin-left: auto;
    padding: 4px 16px;
    border: 2px solid var(--c-cta);
    border-radius: 999px;
    background: #fff;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-cta);
    transition: background-color .2s, color .2s;
}

.date-picker__reset:hover {
    background: var(--c-cta);
    color: #fff;
}

/* ---------- 선택 옵션 (선셋 요트) ---------- */
.option-box {
    margin-top: 44px;
}

.option-box__label {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--c-navy);
}

.option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 1.5px solid #F6D3C5;
    border-radius: 18px;
    background: #FFF7F2;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.option-card input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--c-coral);
    cursor: pointer;
}

.option-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-coral);
    color: #fff;
}

.option-card__icon svg {
    width: 60%;
    height: 60%;
}

.option-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.option-card__text strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-navy);
}

.option-card__text em {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--c-coral);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: #fff;
    vertical-align: 2px;
    white-space: nowrap;
}

.option-card__text small {
    font-size: 14px;
    line-height: 1.5;
    color: #6B6360;
}

.option-card:has(input:checked) {
    border-color: var(--c-coral);
    background: #FFEFE7;
    box-shadow: 0 0 0 4px rgba(251, 98, 52, .12);
}

.option-card:has(input:focus-visible) {
    outline: 3px solid rgba(251, 98, 52, .45);
    outline-offset: 2px;
}

/* ---------- 개인정보 동의 ---------- */
.agree {
    margin-top: 24px;
    padding: 22px 26px;
    border-radius: 18px;
    background: #F4F8FB;
}

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-navy);
    cursor: pointer;
}

.check input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--c-cta);
    cursor: pointer;
}

.check input[aria-invalid="true"] {
    outline: 2px solid var(--c-error);
    outline-offset: 2px;
}

.agree__detail {
    margin-top: 10px;
    padding-left: 36px;
}

.agree__detail summary {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #5B6776;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.agree__table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
    color: #4A5563;
}

.agree__table th,
.agree__table td {
    padding: 10px 12px;
    border: 1px solid #DDE5EE;
    background: #fff;
    text-align: left;
    vertical-align: top;
}

.agree__table th {
    width: 110px;
    background: #F7FAFC;
    font-weight: 700;
    white-space: nowrap;
}

.agree__note {
    margin-top: 8px;
    font-size: 13px;
    color: var(--c-muted);
}

/* ---------- 버튼 ---------- */
.apply-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 320px;
    min-height: 78px;
    padding: 0 56px;
    border: 0;
    border-radius: 999px;
    background: var(--c-cta);
    box-shadow: 0 14px 28px rgba(0, 100, 200, .28);
    font-family: var(--f-display);
    font-size: 27px;
    font-weight: 700;
    color: #fff;
    transition: background-color .2s, transform .2s, box-shadow .2s;
}

.btn-submit svg {
    width: 38px;
    height: 38px;
}

.btn-submit:not(:disabled):hover {
    background: var(--c-blue);
    transform: translateY(-2px);
}

.btn-submit:disabled {
    opacity: .6;
    cursor: progress;
}

.apply-form__actions .btn {
    min-height: 78px;
    padding: 0 40px;
    font-size: 22px;
}

/* ---------- 신청 확인 ---------- */
.check-form .field + .field {
    margin-top: 20px;
}

.check-form .btn-submit {
    width: 100%;
    min-width: 0;
    margin-top: 32px;
}

/* ---------- 신청 상세 ---------- */
.result-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 32px auto 0;
    padding: 18px 24px;
    border-radius: 18px;
    background: #E4F1FD;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-blue);
}

.result-banner .ico-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-cta);
    font-size: 17px;
    color: #fff;
}

.result-banner--canceled {
    background: #FFEEE8;
    color: #C94A24;
}

.result-banner--canceled .ico-mark {
    background: var(--c-coral);
}

.detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--c-navy);
}

.detail-head h2 {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--c-navy);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge--APPLIED {
    background: #E6F1FD;
    color: var(--c-cta);
}

.status-badge--CANCELED {
    background: #FFEDE7;
    color: var(--c-coral);
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
}

.info-table th,
.info-table td {
    padding: 17px 4px;
    border-bottom: 1px solid #EBF0F5;
    text-align: left;
    vertical-align: top;
}

.info-table th {
    width: 34%;
    font-weight: 700;
    color: #6B7A8C;
}

.info-table td {
    font-weight: 700;
    color: var(--c-text);
}

.date-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--c-cta);
    font-size: 13px;
    color: #fff;
}

.date-chip--2 {
    background: var(--c-orange);
}

.option-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--c-coral);
    font-size: 14px;
    color: #fff;
}

.detail-note {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-muted);
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.detail-actions .btn {
    min-width: 170px;
    min-height: 58px;
    font-size: 19px;
}

/* ============================================================
   큰 화면 (랜딩 타이포와 균형)
   ============================================================ */
@media (min-width: 1280px) {
    .apply-type {
        max-width: 640px;
    }

    .apply-type__item span {
        height: 70px;
        font-size: 25px;
    }

    .apply-type__desc {
        font-size: 17px;
    }

    .field + .field {
        margin-top: 28px;
    }

    .field__label {
        margin-bottom: 12px;
        font-size: 21px;
    }

    .field__input,
    .stepper {
        height: 66px;
    }

    .field__input {
        font-size: 19px;
    }

    .field__help {
        font-size: 15px;
    }

    .date-slot {
        padding: 14px 20px;
    }

    .date-slot__rank {
        font-size: 17px;
    }

    .date-slot__value {
        font-size: 18px;
    }

    .calendar {
        padding: 20px 20px 14px;
    }

    .calendar__month {
        font-size: 25px;
    }

    .calendar__week {
        font-size: 15px;
    }

    .calendar__day {
        height: 58px;
        font-size: 18px;
    }

    .calendar__day > span {
        width: 48px;
        height: 48px;
    }

    .calendar__rank {
        left: calc(50% + 14px);
    }

    .date-picker__note {
        font-size: 16px;
    }

    .date-picker__msg,
    .date-picker__reset {
        font-size: 15px;
    }

    .check {
        font-size: 18px;
    }

    .option-box__label {
        margin-bottom: 12px;
        font-size: 21px;
    }

    .option-card__text strong {
        font-size: 19px;
    }

    .option-card__text small {
        font-size: 15px;
    }
}

/* ============================================================
   모바일
   ============================================================ */
@media (max-width: 767px) {
    .apply-type {
        gap: 6px;
        padding: 6px;
    }

    .apply-type__item span {
        height: 52px;
        font-size: 18px;
    }

    .apply-type__desc {
        margin-top: 10px;
        font-size: 14px;
    }

    .apply-form__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        margin-top: 30px;
    }

    .field + .field {
        margin-top: 20px;
    }

    .field__label {
        margin-bottom: 8px;
        font-size: 16px;
    }

    .field__input,
    .stepper {
        height: 52px;
        border-radius: 12px;
    }

    .field__input {
        padding: 0 16px;
        font-size: 16px;
    }

    .field__help {
        font-size: 13px;
    }

    .stepper button {
        width: 52px;
        font-size: 22px;
    }

    .stepper input {
        font-size: 18px;
    }

    .stepper__unit {
        font-size: 16px;
    }

    .date-slots {
        gap: 8px;
    }

    .date-slot {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .date-slot__rank {
        font-size: 14px;
    }

    .date-slot__value {
        font-size: 14px;
    }

    .calendar {
        padding: 12px 8px 8px;
        border-radius: 16px;
    }

    .calendar__month {
        font-size: 19px;
    }

    .calendar__nav {
        width: 40px;
        height: 40px;
    }

    .calendar__week {
        font-size: 13px;
    }

    .calendar__day {
        height: 44px;
        font-size: 15px;
    }

    .calendar__day > span {
        width: 38px;
        height: 38px;
    }

    .calendar__rank {
        left: calc(50% + 9px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
    }

    .date-picker__note {
        padding: 10px 14px;
        font-size: 14px;
    }

    .date-picker__msg,
    .date-picker__reset {
        font-size: 13px;
    }

    .option-box {
        margin-top: 32px;
    }

    .option-box__label {
        margin-bottom: 8px;
        font-size: 16px;
    }

    .option-card {
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }

    .option-card input {
        width: 22px;
        height: 22px;
    }

    .option-card__icon {
        width: 40px;
        height: 40px;
    }

    .option-card__text strong {
        font-size: 16px;
    }

    .option-card__text em {
        display: block;
        width: fit-content;
        margin: 6px 0 0;
        font-size: 12px;
    }

    .option-card__text small {
        font-size: 13px;
    }

    .agree {
        margin-top: 20px;
        padding: 18px 16px;
        border-radius: 14px;
    }

    .check {
        gap: 10px;
        font-size: 15px;
    }

    .check input {
        width: 22px;
        height: 22px;
    }

    .agree__detail {
        padding-left: 0;
    }

    .agree__table {
        font-size: 13px;
    }

    .agree__table th {
        width: 76px;
        padding: 8px;
        white-space: normal;
    }

    .agree__table td {
        padding: 8px;
    }

    .apply-form__actions {
        margin-top: 32px;
    }

    .btn-submit {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        padding: 0 24px;
        font-size: 21px;
    }

    .btn-submit svg {
        width: 30px;
        height: 30px;
    }

    .apply-form__actions .btn {
        flex: 1;
        min-height: 62px;
        padding: 0 16px;
        font-size: 18px;
    }

    .result-banner {
        margin-top: 24px;
        padding: 14px 16px;
        font-size: 15px;
    }

    .detail-head h2 {
        font-size: 22px;
    }

    .info-table {
        font-size: 15px;
    }

    .info-table th,
    .info-table td {
        padding: 14px 2px;
    }

    .info-table th {
        width: 36%;
    }

    .detail-actions .btn {
        flex: 1 1 40%;
        min-width: 0;
        min-height: 54px;
        font-size: 17px;
    }
}