body {

    margin: 0;

    background-color: #F3F1EC;

    font-family: Arial, sans-serif;

    text-align: center;

    color: #2E2E2E;

}

 

h1 {

    margin-top: 150px;

    font-size: 42px;

    letter-spacing: 8px;

    font-weight: 400;

}

 

p {

    margin-top: 15px;

    margin-bottom: 60px;

    font-size: 14px;

    letter-spacing: 2px;

}

 

button {

    display: block;

    width: 280px;

    height: 55px;

 

    margin: 18px auto;

 

    background-color: transparent;

    border: 1px solid #624B3B;

 

    color: #624B3B;

 

    font-size: 13px;

    letter-spacing: 2px;

 

    cursor: pointer;

}

 

button:hover {

    background-color: #624B3B;

    color: white;

}/* -------------------- */

/* MY PROGRAM PAGE */

/* -------------------- */

 

.program-page {

    width: 90%;

    max-width: 500px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.small-title {

    margin-top: 60px;

    margin-bottom: 50px;

 

    font-size: 11px;

    letter-spacing: 5px;

 

    color: #624B3B;

}

 

.program-page h1 {

    margin-top: 0;

}

 

.program-card {

    box-sizing: border-box;

 

    width: 100%;

    margin: 25px auto;

    padding: 35px 30px;

 

    border: 1px solid #C8BEB4;

 

    text-align: left;

}

 

.program-number {

    font-size: 11px;

    letter-spacing: 2px;

    color: #9A8D82;

}

 

.program-card h2 {

    margin-top: 15px;

    margin-bottom: 18px;

 

    font-size: 19px;

    font-weight: 400;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

.program-line {

    width: 35px;

    height: 1px;

 

    background-color: #624B3B;

 

    margin-bottom: 18px;

}

 

.program-card .program-description {

    margin: 0;

 

    font-size: 12px;

    letter-spacing: 1px;

    line-height: 1.8;

 

    color: #666;

}/* -------------------- */

/* RESERVATION PAGE */

/* -------------------- */

 

.reservation-page {

    width: 90%;

    max-width: 500px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.reservation-page h1 {

    margin-top: 0;

}

 

.reservation-form {

    margin-top: 40px;

    text-align: left;

}

 

.reservation-form label {

    display: block;

 

    margin-top: 22px;

    margin-bottom: 8px;

 

    font-size: 11px;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

.reservation-form input,

.reservation-form textarea {

    box-sizing: border-box;

 

    width: 100%;

    padding: 14px;

 

    border: 1px solid #C8BEB4;

    background-color: transparent;

 

    font-size: 14px;

}

 

.reservation-form textarea {

    height: 120px;

    resize: none;

}

 

.reservation-form button {

    margin-top: 30px;

    width: 100%;

}/* -------------------- */

/* MEMBERSHIP PAGE */

/* -------------------- */

 

.membership-page {

    width: 90%;

    max-width: 500px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.membership-page h1 {

    margin-top: 0;

}

 

 

/* MEMBERSHIP CARD */

 

.membership-card {

    box-sizing: border-box;

 

    width: 100%;

    height: 270px;

 

    margin: 45px auto 35px;

    padding: 28px;

 

    background-color: #624B3B;

    color: #F3F1EC;

 

    display: flex;

    flex-direction: column;

    justify-content: space-between;

 

    text-align: left;

}

 

.card-top,

.card-bottom {

    display: flex;

    justify-content: space-between;

 

    font-size: 10px;

    letter-spacing: 3px;

}

 

.card-center {

    margin-top: 20px;

}

 

.member-grade {

    font-size: 11px;

    letter-spacing: 4px;

 

    margin-bottom: 12px;

}

 

.member-name {

    font-size: 25px;

    letter-spacing: 3px;

    font-weight: 300;

}

 

 

/* MEMBERSHIP INFORMATION */

 

.membership-info {

    margin-bottom: 35px;

 

    border-top: 1px solid #C8BEB4;

}

 

.info-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

 

    padding: 18px 5px;

 

    border-bottom: 1px solid #C8BEB4;

}

 

.info-row span {

    font-size: 10px;

    letter-spacing: 2px;

 

    color: #8D8178;

}

 

.info-row strong {

    font-size: 12px;

    letter-spacing: 1px;

 

    font-weight: 400;

    color: #624B3B;

}/* -------------------- */

/* LOGIN PAGE */

/* -------------------- */

 

.login-page {

    width: 90%;

    max-width: 420px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.login-page h1 {

    margin-top: 0;

}

 

.login-form {

    margin-top: 50px;

    text-align: left;

}

 

.login-form label {

    display: block;

 

    margin-top: 22px;

    margin-bottom: 8px;

 

    font-size: 10px;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

.login-form input {

    box-sizing: border-box;

 

    width: 100%;

    padding: 15px;

 

    border: 1px solid #C8BEB4;

    background-color: transparent;

 

    font-size: 14px;

}

 

.login-form button {

    width: 100%;

    margin-top: 35px;

}/* -------------------- */

/* WELCOME MEMBER */

/* -------------------- */

 

.welcome {

    margin-top: -30px;

    margin-bottom: 45px;

 

    font-size: 10px;

    letter-spacing: 3px;

 

    color: #8D8178;

}

 

#welcomeName {

    color: #624B3B;

}/* -------------------- */

/* ADMIN PAGE */

/* -------------------- */

 

.admin-page {

    width: 90%;

    max-width: 700px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.admin-page h1 {

    margin-top: 0;

}

 

#reservationList {

    margin-top: 40px;

}

 

.reservation-card {

    box-sizing: border-box;

 

    width: 100%;

    margin-bottom: 20px;

    padding: 25px;

 

    border: 1px solid #C8BEB4;

 

    text-align: left;

}

 

.reservation-card h2 {

    margin-top: 10px;

    margin-bottom: 25px;

 

    font-size: 20px;

    font-weight: 400;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

.reservation-card p {

    margin: 15px 0;

 

    font-size: 10px;

    letter-spacing: 2px;

    line-height: 1.8;

 

    color: #8D8178;

}

 

.reservation-card strong {

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 1px;

 

    color: #2E2E2E;

}

 

.reservation-date {

    font-size: 11px;

    letter-spacing: 2px;

 

    color: #624B3B;

}.reservation-form select {

    box-sizing: border-box;

    width: 100%;

    padding: 14px;

 

    border: 1px solid #C8BEB4;

    background-color: transparent;

 

    font-size: 14px;

}

 

.reservation-card.cancelled {

    position: relative;

    opacity: 1;

    background-color: #F3E3E1 !important;

    border: 2px solid #C9A7A2 !important;

}

.reservation-card.cancelled::after {

    content: "CANCELLED";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-15deg);

    font-size: 28px;

    letter-spacing: 4px;

    font-weight: bold;

    color: rgba(98, 75, 59, 0.35);

    border: 2px solid rgba(98, 75, 59, 0.35);

    padding: 8px 15px;

    pointer-events: none;

}

.reservation-card.confirmed {

    background-color: #E4ECE5 !important;

    border: 2px solid #A8B8AA !important;

}

.reservation-card.pending {

    background-color: #F4EEDC !important;

    border: 2px solid #D4C5A1 !important;

}

 

/* V MOMENT CHANGE RESERVATION CALENDAR */

 

#changeCalendar {

    position: fixed;

    top: 0;

    left: 0;

 

    width: 100%;

    height: 100%;

 

    background-color: rgba(46, 46, 46, 0.35);

 

    display: flex;

    justify-content: center;

    align-items: center;

 

    z-index: 9999;

}

 

 

.calendar-window {

    box-sizing: border-box;

 

    width: 90%;

    max-width: 480px;

 

    padding: 35px;

 

    background-color: #F3F1EC;

 

    border: 1px solid #C8BEB4;

 

    text-align: center;

}

 

 

.calendar-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

 

 

.calendar-small-title {

    font-size: 10px;

    letter-spacing: 4px;

    color: #624B3B;

}

 

 

.calendar-close {

    width: auto;

    height: auto;

 

    margin: 0;

    padding: 5px 10px;

 

    border: none;

 

    font-size: 25px;

    line-height: 1;

 

    color: #624B3B;

}

 

 

.calendar-window h2 {

    margin-top: 35px;

    margin-bottom: 10px;

 

    font-size: 20px;

    font-weight: 400;

    letter-spacing: 3px;

 

    color: #624B3B;

}

 

 

.calendar-guide {

    margin: 0 0 35px;

 

    font-size: 11px;

    letter-spacing: 1px;

 

    color: #8D8178;

}

 

 

.calendar-month-row {

    display: grid;

    grid-template-columns: 50px 1fr 50px;

    align-items: center;

 

    margin-bottom: 25px;

}

 

 

#calendarMonthTitle {

    font-size: 14px;

    letter-spacing: 3px;

 

    color: #2E2E2E;

}

 

 

.calendar-arrow {

    width: 40px;

    height: 40px;

 

    margin: 0 auto;

    padding: 0;

 

    border: none;

 

    font-size: 24px;

 

    color: #624B3B;

}

 

 

.calendar-week {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

 

    margin-bottom: 10px;

 

    font-size: 9px;

    letter-spacing: 1px;

 

    color: #9A8D82;

}

 

 

#calendarDays {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

}

 

 

.calendar-day {

    width: 100%;

    height: 45px;

 

    margin: 0;

    padding: 0;

 

    border: none;

 

    font-size: 12px;

    letter-spacing: 0;

 

    color: #624B3B;

}

 

 

.calendar-day:hover {

    background-color: #624B3B;

    color: white;

}

 

 

.calendar-empty {

    height: 45px;

}

 

.calendar-day.selected {

    background-color: #624B3B;

    color: white;

    border-radius: 50%;

}

 

/* CHANGE RESERVATION - TIME DESIGN */

 

#changeTimeBox {

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #D8D0C8;

}

 

 

.change-time-title {

    margin-bottom: 18px;

 

    font-size: 10px;

    letter-spacing: 3px;

 

    color: #8D8178;

}

 

 

.change-time-buttons {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}

 

 

.change-time-buttons button {

    width: 100%;

    height: 44px;

 

    margin: 0;

    padding: 0;

 

    border: 1px solid #BEB3A9;

 

    background-color: transparent;

 

    font-size: 11px;

    letter-spacing: 1px;

 

    color: #624B3B;

}

 

 

.change-time-buttons button:hover:not(:disabled) {

    background-color: #624B3B;

    border-color: #624B3B;

 

    color: white;

}

 

 

.change-time-buttons .time-booked {

    background-color: #E5E1DC;

 

    border-color: #D5CEC7;

 

    color: #AAA39C;

 

    cursor: not-allowed;

 

    font-size: 9px;

}

 

 

.change-time-buttons .time-booked:hover {

    background-color: #E5E1DC;

 

    color: #AAA39C;

}

 

/* MY RESERVATION */

 

.my-reservation-page {

    width: 90%;

    max-width: 500px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.my-reservation-page h1 {

    margin-top: 0;

}

 

#myReservationList {

    margin-top: 40px;

    margin-bottom: 40px;

}

 

.my-reservation-empty {

    padding: 35px 20px;

 

    border: 1px solid #C8BEB4;

 

    font-size: 12px;

    letter-spacing: 1px;

    line-height: 1.8;

 

    color: #624B3B;

}

 

/* MY RESERVATION CARD */

 

.my-reservation-card {

    margin: 35px 0 45px;

    padding: 40px 35px;

 

    border: 1px solid #C8BEB4;

    background-color: #F7F5F1;

 

    text-align: left;

}

 

 

.my-reservation-label {

    margin-top: 25px;

    margin-bottom: 8px;

 

    font-size: 9px;

    letter-spacing: 3px;

 

    color: #9A8D82;

}

 

 

.my-reservation-label:first-child {

    margin-top: 0;

}

 

 

.my-reservation-date {

    font-size: 22px;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

 

.my-reservation-time {

    font-size: 22px;

    letter-spacing: 2px;

 

    color: #624B3B;

}

 

 

.my-reservation-status {

    display: inline-block;

 

    margin-top: 3px;

    padding: 9px 15px;

 

    border: 1px solid #624B3B;

 

    font-size: 10px;

    letter-spacing: 2px;

 

    color: #624B3B;

}

/* MY RESERVATION - PENDING */

 

.my-reservation-status.pending {

    background-color: #F4EEDC;

    border: 1px solid #D4C5A1;

    color: #624B3B;

}

/* MY RESERVATION - CONFIRMED */

 

.my-reservation-status.confirmed {

    background-color: #E4ECE5;

    border: 1px solid #A8B8AA;

    color: #536555;

}

 

/* MY RESERVATION - CANCELLED */

 

.my-reservation-status.cancelled {

    background-color: #F3E3E1;

    border: 1px solid #C9A7A2;

    color: #8A5F5B;

}

 

/* CUSTOMER RESERVATION CALENDAR */

 

#reservationCalendar {

    position: fixed;

    top: 0;

    left: 0;

 

    width: 100%;

    height: 100%;

 

    background-color: rgba(46, 46, 46, 0.35);

 

    display: flex;

    justify-content: center;

    align-items: center;

 

    z-index: 9999;

}

 

 

#reservationCalendarDays {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

}

 

/* =========================

   DATE SELECTOR

========================= */

 

.date-selector {

    position: relative;

    width: 100%;

    cursor: pointer;

}

 

.date-selector input {

    padding-right: 55px;

    cursor: pointer;

}

 

.date-selector:hover input {

    background-color: #EEEAE4;

    border-color: #9A8D82;

}

 

 

/* CALENDAR ICON */

 

.date-calendar-icon {

    position: absolute;

 

    right: 18px;

    top: 50%;

 

    width: 16px;

    height: 14px;

 

    transform: translateY(-45%);

 

    border: 1px solid #624B3B;

 

    pointer-events: none;

}

 

 

/* 달력 위쪽 고리 */

 

.date-calendar-icon::before {

    content: "";

 

    position: absolute;

 

    left: -1px;

    top: 3px;

 

    width: 16px;

    height: 1px;

 

    background-color: #624B3B;

}

 

 

/* 달력 안의 작은 점 */

 

.date-calendar-icon::after {

    content: "···";

 

    position: absolute;

 

    left: 2px;

    top: 1px;

 

    font-size: 9px;

    letter-spacing: 1px;

 

    color: #624B3B;

}

/* =========================

   CREATE ACCOUNT

========================= */

 

.signup-page {

    width: 88%;

    max-width: 420px;

    margin: 0 auto;

    padding-bottom: 80px;

}

 

.signup-page h1 {

    margin-top: 0;

}

 

.signup-page .reservation-form {

    width: 100%;

    margin: 40px auto 0;

}

/* =========================

   INTERNATIONAL PHONE

========================= */

 

.phone-input {

    display: flex;

    gap: 10px;

    width: 100%;

}

 

.phone-input select {

    width: 120px;

    flex-shrink: 0;

}

 

.phone-input input {

    flex: 1;

    width: auto;

}

 

 

/* =========================================================

   V MOMENT — LARGE MOBILE APP UI

   Applies only to phone-size screens.

========================================================= */

 

@media screen and (max-width: 768px) {

 

    html {

        font-size: 18px;

        -webkit-text-size-adjust: 100%;

    }

 

    body {

        width: 100%;

        min-height: 100vh;

        overflow-x: hidden;

    }

 

    h1 {

        margin-top: 72px;

        margin-bottom: 24px;

        font-size: 48px;

        line-height: 1.15;

        letter-spacing: 6px;

    }

 

    p {

        margin-top: 16px;

        margin-bottom: 44px;

        font-size: 18px;

        line-height: 1.65;

        letter-spacing: 1.5px;

    }

 

    button {

        box-sizing: border-box;

        width: 92%;

        max-width: 430px;

        min-height: 72px;

        height: auto;

        margin: 18px auto;

        padding: 18px 16px;

        font-size: 18px;

        line-height: 1.3;

        letter-spacing: 2px;

        touch-action: manipulation;

    }

 

    .small-title {

        margin-top: 36px;

        margin-bottom: 34px;

        font-size: 15px;

        letter-spacing: 5px;

    }

 

    .welcome {

        margin-top: -8px;

        margin-bottom: 42px;

        font-size: 15px;

        line-height: 1.6;

        letter-spacing: 2.5px;

    }

 

    #welcomeName {

        font-size: 16px;

    }

 

    /* MAIN PAGE BUTTONS */

    body > button {

        width: 90%;

        max-width: 430px;

        min-height: 74px;

        font-size: 18px;

    }

 

    /* PAGE WIDTH */

    .login-page,

    .signup-page,

    .reservation-page,

    .program-page,

    .membership-page,

    .my-reservation-page {

        box-sizing: border-box;

        width: 92%;

        max-width: 560px;

        padding-bottom: 60px;

    }

 

    .login-page h1,

    .signup-page h1,

    .reservation-page h1,

    .program-page h1,

    .membership-page h1,

    .my-reservation-page h1 {

        font-size: 42px;

        line-height: 1.2;

        letter-spacing: 5px;

    }

 

    /* FORMS */

    .login-form,

    .reservation-form,

    .signup-page .reservation-form {

        margin-top: 32px;

    }

 

    .login-form label,

    .reservation-form label {

        margin-top: 28px;

        margin-bottom: 11px;

        font-size: 15px;

        line-height: 1.4;

        letter-spacing: 2px;

    }

 

    .login-form input,

    .reservation-form input,

    .reservation-form textarea,

    .reservation-form select {

        box-sizing: border-box;

        width: 100%;

        min-height: 64px;

        padding: 17px 15px;

        font-size: 18px;

        line-height: 1.4;

        border-radius: 0;

    }

 

    .reservation-form textarea {

        min-height: 150px;

    }

 

    .login-form button,

    .reservation-form button {

        width: 100%;

        max-width: none;

        min-height: 70px;

        margin-top: 34px;

        font-size: 18px;

    }

 

    /* PROGRAM */

    .program-card {

        margin: 22px auto;

        padding: 34px 26px;

    }

 

    .program-number {

        font-size: 14px;

    }

 

    .program-card h2 {

        margin-top: 16px;

        margin-bottom: 20px;

        font-size: 25px;

        line-height: 1.35;

        letter-spacing: 2px;

    }

 

    .program-card .program-description {

        font-size: 17px;

        line-height: 1.8;

    }

 

    /* MEMBERSHIP */

    .membership-card {

        height: 280px;

        margin: 34px auto 32px;

        padding: 28px 24px;

    }

 

    .card-top,

    .card-bottom {

        font-size: 12px;

        letter-spacing: 2px;

    }

 

    .member-grade {

        font-size: 14px;

        letter-spacing: 3px;

    }

 

    .member-name {

        font-size: 30px;

        line-height: 1.25;

    }

 

    .info-row {

        padding: 22px 5px;

        gap: 14px;

    }

 

    .info-row span {

        font-size: 13px;

        line-height: 1.4;

    }

 

    .info-row strong {

        font-size: 16px;

        line-height: 1.4;

        text-align: right;

    }

 

    /* MY RESERVATION */

    #myReservationList {

        margin-top: 32px;

    }

 

    .my-reservation-empty {

        padding: 36px 22px;

        font-size: 16px;

        line-height: 1.7;

    }

 

    .my-reservation-card {

        margin: 28px 0 38px;

        padding: 34px 26px;

    }

 

    .my-reservation-label {

        margin-top: 26px;

        font-size: 13px;

    }

 

    .my-reservation-date,

    .my-reservation-time {

        font-size: 28px;

        line-height: 1.35;

    }

 

    .my-reservation-status {

        padding: 11px 16px;

        font-size: 13px;

    }

 

    /* CALENDAR */

    .calendar-window {

        width: 94%;

        max-width: 520px;

        max-height: 92vh;

        overflow-y: auto;

        padding: 25px 16px;

    }

 

    .calendar-small-title {

        font-size: 13px;

    }

 

    .calendar-close {

        font-size: 30px;

    }

 

    .calendar-window h2 {

        margin-top: 24px;

        font-size: 24px;

        letter-spacing: 2px;

    }

 

    .calendar-guide {

        margin-bottom: 24px;

        font-size: 14px;

        line-height: 1.6;

    }

 

    .calendar-month-row {

        grid-template-columns: 52px 1fr 52px;

        margin-bottom: 18px;

    }

 

    #calendarMonthTitle,

    #reservationMonthTitle {

        font-size: 17px;

        letter-spacing: 2px;

    }

 

    .calendar-arrow {

        width: 48px;

        min-height: 48px;

        height: 48px;

        font-size: 27px;

    }

 

    .calendar-week {

        font-size: 11px;

    }

 

    .calendar-day {

        min-height: 48px;

        height: 48px;

        font-size: 16px;

    }

 

    .calendar-empty {

        height: 48px;

    }

 

    .change-time-title {

        font-size: 13px;

    }

 

    .change-time-buttons {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

 

    .change-time-buttons button {

        width: 100%;

        min-height: 54px;

        height: auto;

        margin: 0;

        font-size: 15px;

    }

 

    /* ADMIN */

    .admin-page {

        box-sizing: border-box;

        width: 94%;

        padding-bottom: 55px;

    }

 

    .admin-page h1 {

        font-size: 38px;

        letter-spacing: 4px;

    }

 

    .reservation-card {

        padding: 26px 20px;

    }

 

    .reservation-card h2 {

        font-size: 24px;

    }

 

    .reservation-card p {

        font-size: 14px;

        line-height: 1.7;

    }

 

    .reservation-card strong {

        font-size: 17px;

    }

 

    .reservation-date {

        font-size: 14px;

    }

 

    .reservation-card button {

        width: 100%;

        max-width: none;

        min-height: 58px;

        margin: 10px 0;

        font-size: 15px;

    }

 

    /* PHONE NUMBER ROW */

    .phone-input {

        gap: 8px;

    }

 

    .phone-input select {

        width: 125px;

        flex-shrink: 0;

    }

 

    .phone-input input {

        min-width: 0;

    }

}

 

/* =========================================================

   V MOMENT — FINAL MOBILE BALANCE

   Slightly smaller than LARGE MOBILE and moved upward.

========================================================= */

 

.home-wrap {

    width: 100%;

}

 

.home-area {

    width: 100%;

}

 

@media screen and (max-width: 768px) {

 

    .home-page h1 {

        margin-top: 42px;

        margin-bottom: 14px;

        font-size: 42px;

        letter-spacing: 6px;

    }

 

    .home-subtitle {

        margin-top: 10px;

        margin-bottom: 30px;

        font-size: 16px;

        line-height: 1.5;

    }

 

    .home-page .welcome {

        margin-top: 0;

        margin-bottom: 26px;

        font-size: 14px;

    }

 

    .home-page button,

    .home-area button {

        width: 88%;

        max-width: 410px;

        min-height: 62px;

        margin: 13px auto;

        padding: 14px 15px;

        font-size: 16px;

    }

 

    .small-title {

        margin-top: 28px;

        margin-bottom: 28px;

    }

 

    .login-page h1,

    .signup-page h1,

    .reservation-page h1,

    .program-page h1,

    .membership-page h1,

    .my-reservation-page h1 {

        font-size: 38px;

    }

 

    .login-form input,

    .reservation-form input,

    .reservation-form textarea,

    .reservation-form select {

        min-height: 58px;

        font-size: 16px;

    }

 

    .login-form button,

    .reservation-form button {

        min-height: 62px;

        font-size: 16px;

    }

}