/* ==================================
   베베유 컬러
=================================== */

:root {
    --bebe-yellow: #F6E27A;
    --bebe-yellow-soft: #FFF5BE;

    --bebe-green: #8FB86B;
    --bebe-green-dark: #6F9651;
    --bebe-green-soft: #F0F7EA;

    --bebe-bg: #FFF9EE;
    --bebe-text: #4D5548;

    --white: #FFFFFF;

    --gray-50: #FAFAF8;
    --gray-100: #F5F5F1;
    --gray-200: #ECECE7;
    --gray-300: #DCDDD7;
    --gray-500: #989B93;
    --gray-700: #686C64;

    --danger-bg: #FFF0EE;
    --danger-text: #B85850;

    --shadow-soft:
        0 10px 35px
        rgba(73, 81, 66, 0.07);
}


/* ==================================
   기본
=================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--bebe-text);

    font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


button,
input,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {
    cursor: default;
}


.hidden {
    display: none !important;
}


/* ==================================
   고객 예약 페이지
=================================== */

.reservation-body {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #FFFDF6 0%,
            var(--bebe-bg) 100%
        );
}


.wizard-page {
    width: 100%;
    min-height: 100vh;

    padding:
        18px
        16px
        60px;
}


.wizard-shell {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 620px;

    min-height:
        calc(100vh - 36px);

    margin: 0 auto;

    overflow: hidden;

    background-color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    border:
        1px solid
        rgba(
            143,
            184,
            107,
            0.13
        );

    border-radius: 30px;

    box-shadow:
        var(--shadow-soft);

    backdrop-filter:
        blur(16px);
}


/* ==================================
   상단
=================================== */

.wizard-topbar {
    display: grid;

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

    align-items: center;

    min-height: 72px;

    padding:
        12px
        22px;
}


.wizard-back-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background-color:
        var(--gray-100);

    color:
        var(--bebe-text);

    font-size: 22px;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}


.wizard-back-button:hover {
    background-color:
        var(--bebe-yellow-soft);
}


.wizard-back-button:active {
    transform:
        scale(0.92);
}


.wizard-brand {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;
}


.wizard-brand-mark {
    color:
        var(--bebe-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.wizard-brand strong {
    font-size: 15px;

    font-weight: 750;
}


.wizard-progress-text {
    justify-self: end;

    color:
        var(--gray-500);

    font-size: 12px;

    font-weight: 700;
}


/* ==================================
   진행바
=================================== */

.wizard-progress-track {
    width:
        calc(100% - 44px);

    height: 5px;

    margin:
        0
        22px;

    overflow: hidden;

    background-color:
        #F0EFE9;

    border-radius: 999px;
}


.wizard-progress-bar {
    width: 16.666%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--bebe-yellow),
            var(--bebe-green)
        );

    border-radius: inherit;

    transition:
        width 0.45s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* ==================================
   질문 화면
=================================== */

.wizard-stage {
    position: relative;

    flex: 1;

    padding:
        48px
        34px
        150px;
}


.wizard-step {
    display: none;
}


.wizard-step.active {
    display: block;
}


.step-enter-right {
    animation:
        wizardEnterRight
        0.32s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.step-enter-left {
    animation:
        wizardEnterLeft
        0.32s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.step-exit-left {
    animation:
        wizardExitLeft
        0.17s
        ease
        both;
}


.step-exit-right {
    animation:
        wizardExitRight
        0.17s
        ease
        both;
}


@keyframes wizardEnterRight {

    from {
        opacity: 0;
        transform:
            translateX(26px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }

}


@keyframes wizardEnterLeft {

    from {
        opacity: 0;
        transform:
            translateX(-26px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }

}


@keyframes wizardExitLeft {

    from {
        opacity: 1;
        transform:
            translateX(0);
    }

    to {
        opacity: 0;
        transform:
            translateX(-16px);
    }

}


@keyframes wizardExitRight {

    from {
        opacity: 1;
        transform:
            translateX(0);
    }

    to {
        opacity: 0;
        transform:
            translateX(16px);
    }

}


/* ==================================
   질문 제목
=================================== */

.question-heading {
    margin-bottom: 34px;
}


.question-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--bebe-green-dark);

    font-size: 12px;

    font-weight: 800;
}


.question-heading h1 {
    margin:
        0
        0
        14px;

    color:
        var(--bebe-text);

    font-size:
        clamp(
            28px,
            6vw,
            36px
        );

    line-height: 1.25;

    letter-spacing: -1.2px;
}


.question-heading p {
    margin: 0;

    color:
        var(--gray-500);

    font-size: 15px;

    line-height: 1.65;
}


/* ==================================
   접수방법 카드
=================================== */

.choice-list {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.service-choice {
    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    width: 100%;

    min-height: 104px;

    padding:
        20px
        20px;

    border:
        2px solid
        transparent;

    border-radius: 22px;

    background-color:
        var(--white);

    color:
        var(--bebe-text);

    text-align: left;

    box-shadow:
        0 6px 22px
        rgba(74, 82, 68, 0.06);

    transition:
        transform 0.18s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}


.service-choice:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(74, 82, 68, 0.09);
}


.service-choice:active {
    transform:
        scale(0.985);
}


.service-choice.selected {
    border-color:
        var(--bebe-green);

    background-color:
        var(--bebe-green-soft);

    box-shadow:
        0 9px 26px
        rgba(143, 184, 107, 0.16);
}


.choice-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    background-color:
        var(--bebe-bg);

    border-radius: 18px;

    font-size: 29px;
}


.service-choice.selected
.choice-icon {
    background-color:
        var(--bebe-yellow-soft);
}


.choice-content {
    display: flex;

    flex: 1;

    flex-direction: column;

    gap: 7px;

    min-width: 0;
}


.choice-content strong {
    font-size: 17px;

    font-weight: 800;
}


.choice-content small {
    color:
        var(--gray-500);

    font-size: 13px;

    line-height: 1.45;
}


.choice-title-line {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.choice-title-line em {
    padding:
        4px
        8px;

    background-color:
        var(--bebe-yellow);

    border-radius: 999px;

    color:
        var(--bebe-text);

    font-size: 10px;

    font-style: normal;

    font-weight: 800;
}


.choice-check {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 27px;
    height: 27px;

    background-color:
        var(--gray-100);

    border-radius: 50%;

    color:
        transparent;

    font-size: 13px;

    font-weight: 900;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.service-choice.selected
.choice-check {
    background-color:
        var(--bebe-green);

    color:
        white;

    transform:
        scale(1.08);
}


.step-footnote {
    margin:
        22px
        4px
        0;

    color:
        var(--gray-500);

    font-size: 12px;

    text-align: center;
}


/* ==================================
   큰 입력창
=================================== */

.stacked-inputs {
    display: flex;

    flex-direction: column;

    gap: 24px;
}


.big-input-wrap label {
    display: block;

    margin-bottom: 10px;

    color:
        var(--gray-700);

    font-size: 13px;

    font-weight: 750;
}


.big-input {
    width: 100%;

    padding:
        19px
        4px
        17px;

    border: none;

    border-bottom:
        2px solid
        var(--gray-200);

    outline: none;

    background-color:
        transparent;

    color:
        var(--bebe-text);

    font-size:
        clamp(
            20px,
            5vw,
            26px
        );

    font-weight: 700;

    letter-spacing: -0.5px;

    transition:
        border-color 0.22s ease;
}


.big-input::placeholder {
    color:
        #C6C8C1;

    font-weight: 500;
}


.big-input:focus {
    border-color:
        var(--bebe-green);
}


.field-help {
    display: block;

    margin-top: 10px;

    color:
        var(--gray-500);

    font-size: 12px;

    line-height: 1.5;
}


/* ==================================
   날짜 선택
=================================== */

.wizard-date-grid {
    display: grid;

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

    gap: 10px;
}


.wizard-date-button {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    min-height: 82px;

    padding:
        13px
        7px;

    border:
        2px solid
        transparent;

    border-radius: 18px;

    background-color:
        var(--white);

    color:
        var(--bebe-text);

    box-shadow:
        0 4px 16px
        rgba(73, 81, 66, 0.05);

    transition:
        transform 0.16s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.wizard-date-button:hover {
    transform:
        translateY(-1px);
}


.wizard-date-button:active {
    transform:
        scale(0.96);
}


.wizard-date-button strong {
    font-size: 16px;
}


.wizard-date-button span {
    color:
        var(--gray-500);

    font-size: 11px;
}


.wizard-date-button small {
    position: absolute;

    top: 7px;
    right: 7px;

    padding:
        2px
        5px;

    background-color:
        var(--bebe-yellow);

    border-radius: 999px;

    font-size: 8px;

    font-weight: 800;
}


.wizard-date-button.selected {
    border-color:
        var(--bebe-green);

    background-color:
        var(--bebe-green);

    color:
        white;
}


.wizard-date-button.selected span {
    color:
        rgba(
            255,
            255,
            255,
            0.8
        );
}


.date-result-card {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;

    margin-top: 22px;

    padding:
        17px;

    background-color:
        var(--bebe-yellow-soft);

    border-radius: 18px;

    animation:
        softAppear
        0.3s ease
        both;
}


.date-result-card > div:not(
    .date-result-arrow
) {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.date-result-card > div:last-child {
    text-align: right;
}


.date-result-card span {
    color:
        var(--gray-500);

    font-size: 10px;
}


.date-result-card strong {
    font-size: 13px;
}


.date-result-arrow {
    color:
        var(--bebe-green-dark);

    font-weight: 800;
}


/* ==================================
   방문 정보
=================================== */

.visit-guide-card {
    overflow: hidden;

    background-color:
        var(--white);

    border-radius: 22px;

    box-shadow:
        0 6px 22px
        rgba(73, 81, 66, 0.06);
}


.visit-guide-row {
    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        19px
        20px;

    border-bottom:
        1px solid
        var(--gray-100);
}


.visit-guide-row:last-child {
    border-bottom: none;
}


.visit-guide-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    background-color:
        var(--bebe-bg);

    border-radius: 14px;

    font-size: 21px;
}


.visit-guide-row div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.visit-guide-row small {
    color:
        var(--gray-500);

    font-size: 11px;
}


.visit-guide-row strong {
    font-size: 14px;

    line-height: 1.45;
}


.soft-notice {
    display: flex;

    gap: 11px;

    margin-top: 18px;

    padding:
        15px
        17px;

    background-color:
        var(--bebe-green-soft);

    border-radius: 16px;
}


.soft-notice span {
    font-size: 21px;
}


.soft-notice p {
    margin: 0;

    color:
        var(--gray-700);

    font-size: 12px;

    line-height: 1.6;
}


/* ==================================
   상품
=================================== */

.wizard-product-list {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.wizard-product-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        17px
        17px;

    border:
        2px solid
        transparent;

    border-radius: 18px;

    background-color:
        var(--white);

    box-shadow:
        0 3px 14px
        rgba(73, 81, 66, 0.045);

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.wizard-product-item.selected {
    border-color:
        var(--bebe-green);

    background-color:
        var(--bebe-green-soft);
}


.wizard-product-item.quantity-changed {
    transform:
        scale(1.01);
}


.wizard-product-info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.wizard-product-info strong {
    font-size: 14px;
}


.wizard-product-info span {
    color:
        var(--bebe-green-dark);

    font-size: 13px;

    font-weight: 700;
}


.wizard-product-info small {
    color:
        var(--gray-500);

    font-size: 10px;
}


.quantity-control {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.qty-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background-color:
        var(--gray-100);

    color:
        var(--bebe-text);

    font-size: 20px;

    transition:
        transform 0.14s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}


.qty-button:hover {
    background-color:
        var(--bebe-yellow);
}


.qty-button:active {
    transform:
        scale(0.84);
}


.plus-button {
    background-color:
        var(--bebe-yellow-soft);
}


.quantity {
    width: 25px;

    text-align: center;

    font-size: 16px;

    font-weight: 800;
}


/* ==================================
   상품 화면 미니 금액
=================================== */

.mini-price-summary {
    margin-top: 22px;

    padding:
        17px
        18px;

    background-color:
        var(--white);

    border-radius: 19px;

    box-shadow:
        0 4px 18px
        rgba(73, 81, 66, 0.05);
}


.mini-price-summary > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        7px
        0;

    color:
        var(--gray-700);

    font-size: 12px;
}


.mini-price-summary
.mini-price-final {
    margin-top: 8px;

    padding-top: 15px;

    border-top:
        1px solid
        var(--gray-200);

    color:
        var(--bebe-text);

    font-size: 14px;
}


.mini-price-final strong {
    font-size: 20px;
}


.discount-text {
    color:
        var(--bebe-green-dark);
}


/* ==================================
   최종 확인
=================================== */

.review-card {
    margin-bottom: 10px;

    padding:
        18px
        19px;

    background-color:
        var(--white);

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(73, 81, 66, 0.04);
}


.review-card-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}


.review-card-head > span {
    color:
        var(--gray-500);

    font-size: 11px;

    font-weight: 700;
}


.review-edit-button {
    padding:
        5px
        9px;

    border: none;

    border-radius: 999px;

    background-color:
        var(--gray-100);

    color:
        var(--gray-700);

    font-size: 10px;

    font-weight: 700;

    transition:
        background-color 0.16s ease,
        transform 0.16s ease;
}


.review-edit-button:hover {
    background-color:
        var(--bebe-yellow-soft);
}


.review-edit-button:active {
    transform:
        scale(0.92);
}


.review-card > strong {
    display: block;

    font-size: 15px;

    line-height: 1.6;
}


.review-multiline {
    white-space: pre-line;
}


.review-subtext {
    margin:
        8px
        0
        0;

    color:
        var(--bebe-green-dark);

    font-size: 11px;

    line-height: 1.5;
}


.review-product-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.review-product-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    font-size: 13px;
}


.review-product-row strong {
    flex-shrink: 0;
}


.review-price-card {
    margin-top: 18px;

    padding:
        21px;

    background-color:
        var(--bebe-yellow-soft);

    border-radius: 21px;
}


.review-price-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        7px
        0;

    color:
        var(--gray-700);

    font-size: 12px;
}


.review-price-row.discount strong {
    color:
        var(--bebe-green-dark);
}


.review-final-row {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    padding-top: 16px;

    border-top:
        1px solid
        rgba(
            77,
            85,
            72,
            0.1
        );

    font-weight: 800;
}


.review-final-row strong {
    font-size: 25px;
}


.review-price-card > p {
    margin:
        13px
        0
        0;

    color:
        var(--gray-500);

    font-size: 10px;

    text-align: center;
}


/* ==================================
   하단 고정 CTA
=================================== */

.wizard-footer {
    position: sticky;

    bottom: 0;

    z-index: 20;

    width: 100%;

    margin-top: auto;

    padding:
        18px
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.96
            )
            24%,
            rgba(
                255,
                255,
                255,
                1
            )
            100%
        );
}


.wizard-primary-button {
    width: 100%;

    min-height: 58px;

    padding:
        15px
        18px;

    border: none;

    border-radius: 17px;

    background-color:
        var(--bebe-green);

    color:
        white;

    font-size: 16px;

    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(143, 184, 107, 0.24);

    transition:
        transform 0.16s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.wizard-primary-button:hover:not(
    :disabled
) {
    background-color:
        var(--bebe-green-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 26px
        rgba(143, 184, 107, 0.28);
}


.wizard-primary-button:active:not(
    :disabled
) {
    transform:
        scale(0.98);
}


.wizard-primary-button:disabled {
    background-color:
        #DADDD5;

    color:
        #A1A69C;

    box-shadow: none;
}


.wizard-footer-hint {
    margin:
        9px
        4px
        0;

    color:
        var(--gray-500);

    font-size: 10px;

    line-height: 1.45;

    text-align: center;
}


.wizard-error {
    margin-bottom: 10px;

    padding:
        11px
        13px;

    background-color:
        var(--danger-bg);

    border-radius: 12px;

    color:
        var(--danger-text);

    font-size: 12px;

    text-align: center;

    animation:
        softAppear
        0.2s ease
        both;
}


/* ==================================
   완료화면
=================================== */

.complete-screen {
    padding:
        25px
        5px
        20px;

    text-align: center;
}


.complete-mascot {
    margin-bottom: 12px;

    font-size: 64px;

    animation:
        completeBounce
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.complete-eyebrow {
    color:
        var(--bebe-green);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.complete-screen h1 {
    margin:
        10px
        0
        14px;

    font-size:
        clamp(
            30px,
            7vw,
            39px
        );

    line-height: 1.2;

    letter-spacing: -1.4px;
}


.complete-screen > p {
    margin:
        0
        0
        26px;

    color:
        var(--gray-500);

    font-size: 14px;

    line-height: 1.65;
}


.complete-number {
    margin-bottom: 14px;

    padding:
        20px;

    background-color:
        var(--bebe-yellow-soft);

    border-radius: 20px;
}


.complete-number span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--gray-500);

    font-size: 10px;
}


.complete-number strong {
    color:
        var(--bebe-green-dark);

    font-size: 29px;
}


.complete-guide {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap:
        9px
        16px;

    margin-top: 13px;

    padding:
        19px;

    background-color:
        var(--white);

    border-radius: 19px;

    text-align: left;

    box-shadow:
        0 4px 18px
        rgba(73, 81, 66, 0.05);
}


.complete-guide span {
    color:
        var(--gray-500);

    font-size: 11px;
}


.complete-guide strong {
    text-align: right;

    font-size: 12px;
}


.secondary-action-button {
    width: 100%;

    margin-top: 17px;

    padding:
        15px;

    border:
        1px solid
        var(--gray-200);

    border-radius: 15px;

    background-color:
        var(--white);

    color:
        var(--bebe-text);

    font-weight: 750;
}


@keyframes completeBounce {

    0% {
        opacity: 0;
        transform:
            scale(0.7)
            translateY(10px);
    }

    60% {
        opacity: 1;
        transform:
            scale(1.08)
            translateY(-3px);
    }

    100% {
        transform:
            scale(1)
            translateY(0);
    }

}


@keyframes softAppear {

    from {
        opacity: 0;
        transform:
            translateY(6px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


/* ==================================
   개발용 데이터
=================================== */

.developer-panel {
    width: 100%;
    max-width: 620px;

    margin:
        20px
        auto
        0;

    padding:
        15px
        17px;

    background-color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    border:
        1px dashed
        var(--gray-300);

    border-radius: 14px;

    color:
        var(--gray-500);

    font-size: 11px;
}


.developer-panel summary {
    cursor: pointer;

    font-weight: 700;
}


.developer-panel p {
    margin:
        10px
        0;
}


.developer-panel pre {
    overflow-x: auto;

    margin: 0;

    padding: 13px;

    background-color:
        var(--white);

    border-radius: 10px;

    color:
        var(--bebe-text);

    white-space: pre-wrap;

    font-size: 11px;

    line-height: 1.55;
}


/* ==================================
   관리자 공통
   기존 기능 유지
=================================== */

.admin-body {
    background-color: #F5F6F2;
}


.admin-container {
    max-width: 1050px;

    margin: 0 auto;

    padding:
        40px
        25px
        80px;
}


.admin-main-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;
}


.admin-main-header h1 {
    margin: 3px 0;

    color: #4D5548;

    font-size: 30px;
}


.admin-main-header p {
    margin: 5px 0 0;

    color: #888;
}


.admin-brand-small {
    color: #8FB86B !important;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;
}


.customer-page-link {
    padding:
        12px
        16px;

    background-color: white;

    border-radius: 12px;

    color: #4D5548;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;
}


/* ==================================
   관리자 대시보드
=================================== */

.admin-dashboard {
    display: grid;

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

    gap: 14px;

    margin-bottom: 22px;
}


.dashboard-card {
    padding: 20px;

    background-color: white;

    border-radius: 17px;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.04);
}


.dashboard-card span {
    display: block;

    color: #777;

    font-size: 13px;
}


.dashboard-card strong {
    display: block;

    margin:
        8px
        0
        4px;

    color: #4D5548;

    font-size: 30px;
}


.dashboard-card small {
    color: #AAA;
}


.dashboard-new {
    border-top:
        4px solid #F6E27A;
}


.dashboard-today {
    border-top:
        4px solid #8FB86B;
}


.dashboard-progress {
    border-top:
        4px solid #8FB8B0;
}


/* ==================================
   관리자 검색/필터
=================================== */

.admin-toolbar {
    margin-bottom: 22px;

    padding: 18px;

    background-color: white;

    border-radius: 18px;
}


.admin-search-box {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0
        14px;

    border:
        1px solid #DDD;

    border-radius: 12px;
}


.admin-search-box input {
    flex: 1;

    padding:
        14px
        0;

    border: none;

    outline: none;

    background: transparent;
}


.admin-filter-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}


.admin-filter-button {
    padding:
        9px
        12px;

    border:
        1px solid #E0E0E0;

    border-radius: 30px;

    background-color: white;

    color: #666;

    font-size: 12px;
}


.admin-filter-button span {
    display: inline-block;

    margin-left: 4px;

    padding:
        2px
        6px;

    background-color: #F2F2F2;

    border-radius: 20px;

    font-size: 10px;
}


.admin-filter-button.active {
    border-color: #4D5548;

    background-color: #4D5548;

    color: white;
}


.today-filter.active {
    border-color: #8FB86B;

    background-color: #8FB86B;
}


.admin-result-count {
    margin:
        13px
        2px
        0;

    color: #999;

    font-size: 12px;
}


/* ==================================
   관리자 예약카드
=================================== */

.admin-reservation-list {
    display: grid;

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

    gap: 16px;
}


.admin-reservation-card {
    padding: 22px;

    background-color: white;

    border:
        1px solid #ECEDE8;

    border-radius: 20px;

    box-shadow:
        0 3px 13px
        rgba(0, 0, 0, 0.04);
}


.admin-card-header {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 17px;
}


.admin-card-header > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.admin-card-number {
    color: #999;

    font-size: 12px;
}


.admin-card-service {
    font-size: 19px;
}


.status-badge {
    display: inline-block;

    height: fit-content;

    padding:
        7px
        10px;

    border-radius: 30px;

    font-size: 11px;

    font-weight: bold;
}


.status-new {
    background-color: #FFF1A8;

    color: #756208;
}


.status-confirmed {
    background-color: #EAF5E3;

    color: #567B3C;
}


.status-washing {
    background-color: #E4F2F0;

    color: #477D75;
}


.status-clean {
    background-color: #E8EEFF;

    color: #50679C;
}


.status-done {
    background-color: #EEEEEE;

    color: #777;
}


.today-pickup-banner {
    margin-bottom: 15px;

    padding:
        10px
        12px;

    background-color: #EEF7E8;

    border-radius: 10px;

    color: #5B7F42;

    font-size: 12px;

    font-weight: bold;
}


.admin-card-info-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px
        0;

    font-size: 13px;
}


.admin-card-info-row span {
    color: #888;
}


.admin-card-info-row strong {
    text-align: right;
}


.admin-phone-link,
.detail-phone-link {
    color: #4D5548;

    font-weight: bold;

    text-decoration: underline;

    text-underline-offset: 3px;
}


.admin-card-product-area {
    margin-top: 14px;

    padding-top: 14px;

    border-top:
        1px solid #EEE;
}


.admin-card-label {
    color: #999;

    font-size: 11px;

    font-weight: bold;
}


.admin-product-chips {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 9px;
}


.admin-product-chip {
    padding:
        6px
        9px;

    background-color: #F6F6F2;

    border-radius: 8px;

    font-size: 11px;
}


.admin-notification-mini {
    display: flex;

    justify-content: space-between;

    margin-top: 15px;

    padding:
        10px
        12px;

    background-color: #FAFAF8;

    border-radius: 10px;

    font-size: 12px;
}


.notification-success {
    color: #65934A;
}


.notification-failed {
    color: #B85850;
}


.notification-test,
.notification-wait {
    color: #999;
}


.admin-card-price {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    padding: 14px;

    background-color: #FFF8CF;

    border-radius: 12px;

    font-size: 13px;
}


.admin-card-price strong {
    font-size: 18px;
}


.admin-detail-button {
    display: block;

    margin-top: 13px;

    padding: 13px;

    background-color: #4D5548;

    border-radius: 11px;

    color: white;

    text-align: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;
}


.admin-created-at {
    margin:
        12px
        0
        0;

    color: #AAA;

    font-size: 10px;

    text-align: right;
}


.admin-empty {
    padding: 60px;

    background-color: white;

    border-radius: 20px;

    color: #888;

    text-align: center;
}


.admin-empty-icon {
    margin-bottom: 10px;

    font-size: 35px;
}


/* ==================================
   관리자 상세
=================================== */

.admin-detail-container {
    max-width: 760px;

    margin: 0 auto;

    padding:
        35px
        20px
        80px;
}


.admin-back-link {
    display: inline-block;

    margin-bottom: 22px;

    color: #6B7C60;

    text-decoration: none;

    font-weight: bold;
}


.admin-detail-header {
    margin-bottom: 22px;

    text-align: center;
}


.admin-detail-small-title {
    margin: 0;

    color: #8FB86B;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;
}


.admin-detail-header h1 {
    margin:
        6px
        0
        12px;

    color: #4D5548;

    font-size: 31px;
}


/* ==================================
   관리자 빠른 작업
=================================== */

.admin-quick-actions {
    display: grid;

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

    gap: 8px;

    margin-bottom: 16px;
}


.quick-action-button {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 70px;

    padding: 10px;

    border:
        1px solid #E1E2DE;

    border-radius: 13px;

    background-color: white;

    color: #4D5548;

    text-decoration: none;

    font-size: 11px;

    font-weight: bold;
}


.quick-action-button span {
    font-size: 21px;
}


.quick-call {
    background-color: #8FB86B;

    color: white;

    border-color: #8FB86B;
}


/* ==================================
   관리자 상세 카드
=================================== */

.admin-detail-card {
    margin-bottom: 15px;

    padding: 22px;

    background-color: white;

    border-radius: 18px;

    box-shadow:
        0 3px 13px
        rgba(0, 0, 0, 0.04);
}


.admin-detail-card h2 {
    margin:
        4px
        0
        18px;

    font-size: 19px;
}


.detail-section-label {
    color: #8FB86B;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.operation-summary-card {
    border:
        2px solid #F6E27A;
}


.operation-summary-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;
}


.operation-summary-top > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.operation-label {
    color: #999;

    font-size: 11px;
}


.operation-summary-top strong {
    font-size: 19px;
}


.operation-price {
    font-size:
        24px !important;
}


.operation-schedule {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 15px;

    background-color: #FFF9EE;

    border-radius: 12px;
}


.operation-schedule div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.operation-schedule div:last-child {
    text-align: right;
}


.operation-schedule span {
    color: #999;

    font-size: 11px;
}


.schedule-arrow {
    font-size:
        20px !important;
}


.visit-operation-summary {
    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    padding: 15px;

    background-color: #FFF9EE;

    border-radius: 12px;
}


/* ==================================
   관리자 상태
=================================== */

.confirm-action-card {
    border:
        2px solid #8FB86B;
}


.confirm-description {
    color: #777;

    font-size: 13px;

    line-height: 1.6;
}


.confirm-reservation-button,
.status-update-button,
.notification-retry-button {
    width: 100%;

    margin-top: 12px;

    padding: 15px;

    border: none;

    border-radius: 11px;

    color: white;

    font-weight: bold;
}


.confirm-reservation-button {
    background-color: #8FB86B;
}


.status-update-button {
    background-color: #4D5548;
}


.notification-retry-button {
    background-color: #8FB86B;
}


.current-status-box {
    display: flex;

    justify-content: space-between;

    margin-bottom: 16px;

    padding: 14px;

    background-color: #FFF9EE;

    border-radius: 11px;
}


.status-change-card label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: bold;
}


.status-select {
    width: 100%;

    padding: 13px;

    border:
        1px solid #DDD;

    border-radius: 10px;

    background-color: white;
}


/* ==================================
   관리자 상세 정보
=================================== */

.detail-info-row {
    display: flex;

    justify-content: space-between;

    gap: 25px;

    padding:
        11px
        0;

    border-bottom:
        1px solid #EEEEEE;
}


.detail-info-row:last-child {
    border-bottom: none;
}


.detail-info-row span {
    color: #888;

    flex-shrink: 0;
}


.detail-info-row strong,
.detail-info-row a {
    text-align: right;
}


.detail-info-column {
    padding:
        11px
        0;

    border-bottom:
        1px solid #EEE;
}


.detail-info-column span {
    display: block;

    margin-bottom: 7px;

    color: #888;
}


.detail-copy-block {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding:
        13px
        0;

    border-bottom:
        1px solid #EEE;
}


.detail-copy-block > div {
    min-width: 0;
}


.detail-copy-block span {
    display: block;

    margin-bottom: 5px;

    color: #888;

    font-size: 12px;
}


.detail-copy-block strong {
    line-height: 1.5;

    word-break: break-all;
}


.entrance-block {
    margin:
        0
        -10px;

    padding:
        13px
        10px;

    background-color: #FFFDF3;
}


.small-copy-button {
    flex-shrink: 0;

    padding:
        8px
        11px;

    border:
        1px solid #DDD;

    border-radius: 8px;

    background-color: white;

    font-size: 11px;

    font-weight: bold;
}


/* ==================================
   관리자 상품/가격
=================================== */

.detail-product-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        12px
        0;

    border-bottom:
        1px solid #EEE;
}


.detail-product-row > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.detail-product-row span {
    color: #8FB86B;

    font-size: 13px;
}


.detail-product-quantity {
    font-size: 18px;
}


.detail-discount strong {
    color: #7DA65D;
}


.detail-final-price {
    display: flex;

    justify-content: space-between;

    margin-top: 14px;

    padding: 17px;

    background-color: #F6E27A;

    border-radius: 12px;

    font-weight: bold;
}


.detail-final-price strong {
    font-size: 22px;
}


/* ==================================
   관리자 알림/API
=================================== */

.notification-card {
    border:
        1px solid #CFE2C1;
}


.notification-error-box {
    margin-top: 12px;

    padding: 12px;

    background-color: #FFF0EE;

    border-radius: 10px;

    color: #B85850;

    font-size: 12px;
}


.api-study-card {
    border:
        1px dashed #AAA;
}


.api-link-button {
    display: block;

    margin-top: 8px;

    padding: 12px;

    background-color: #4D5548;

    border-radius: 10px;

    color: white;

    text-align: center;

    text-decoration: none;

    font-size: 12px;

    font-weight: bold;
}


.api-preview-button {
    background-color: #8FB86B;
}


.admin-bottom-back-button {
    display: block;

    margin-top: 25px;

    padding: 15px;

    background-color: #4D5548;

    border-radius: 12px;

    color: white;

    text-align: center;

    text-decoration: none;

    font-weight: bold;
}


/* ==================================
   관리자 토스트
=================================== */

.admin-toast {
    position: fixed;

    left: 50%;

    bottom: 30px;

    transform:
        translateX(-50%)
        translateY(20px);

    padding:
        11px
        18px;

    background-color: #4D5548;

    border-radius: 30px;

    color: white;

    font-size: 13px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s,
        transform 0.2s;
}


.admin-toast.show {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ==================================
   모바일
=================================== */

@media (
    max-width: 700px
) {

    .wizard-page {
        padding: 0;
    }


    .wizard-shell {
        min-height: 100vh;

        border: none;

        border-radius: 0;

        box-shadow: none;
    }


    .wizard-stage {
        padding:
            42px
            22px
            145px;
    }


    .wizard-topbar {
        padding:
            10px
            18px;
    }


    .wizard-progress-track {
        width:
            calc(100% - 36px);

        margin:
            0
            18px;
    }


    .wizard-footer {
        padding:
            18px
            18px
            max(
                22px,
                env(
                    safe-area-inset-bottom
                )
            );
    }


    .developer-panel {
        margin:
            15px
            14px
            30px;

        width:
            calc(100% - 28px);
    }


    .admin-container {
        padding:
            25px
            14px
            60px;
    }


    .admin-main-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-dashboard {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .admin-reservation-list {
        grid-template-columns:
            1fr;
    }


    .admin-quick-actions {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}


@media (
    max-width: 480px
) {

    .question-heading {
        margin-bottom: 29px;
    }


    .question-heading h1 {
        font-size: 29px;
    }


    .service-choice {
        min-height: 96px;

        padding:
            17px
            16px;
    }


    .choice-icon {
        width: 52px;
        height: 52px;

        font-size: 25px;
    }


    .wizard-date-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap: 8px;
    }


    .wizard-date-button {
        min-height: 77px;
    }


    .wizard-product-item {
        padding:
            15px
            14px;
    }


    .qty-button {
        width: 34px;
        height: 34px;
    }


    .admin-detail-container {
        padding:
            25px
            14px
            60px;
    }


    .operation-summary-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .operation-schedule {
        grid-template-columns:
            1fr;
    }


    .schedule-arrow {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .operation-schedule
    div:last-child {
        text-align: left;
    }


    .visit-operation-summary {
        flex-direction:
            column;

        gap: 7px;
    }

}