@import url(reset.css);
@import url(common.css);
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    /* ============================================ 
    // header 레이아웃 기본 설정
    ==============================================*/
    --header-bg-color: var(--color-header-bright);
    --header-top-height: 45px;
    --header-top-gap-base: 8px;
    --header-bottom-height: clamp(60px, 12.5vw, 80px);
    --header-bottom-inner-grid-width: 240px;
    --header-total-height: calc(var(--header-top-height) + var(--header-bottom-height));


    /* ============================================ 
    // 로그인 박스 설정
    ==============================================*/
    --mobile-header-login-box-height: clamp(50px, 10.9375vw, 70px);
    
    /* ============================================ 
    // gnb 설정
    ==============================================*/
    --gnb-gap: 50px;
    --sub-menu-container-grid-01-width: 31vw;
    --sub-menu-container-height: 330px;
    --sub-menu-box-padding: 40px;


    /* ============================================ 
    // gnb 옆 상담, 예약 버튼
    ==============================================*/
    --reservation-box-gap: clamp(6px, 1.875vw, 12px);
    --btn-reservation-padding-base: clamp(3px, 0.938vw, 6px);


    /* ============================================ 
    // 상담, 예약 버튼 옆 모바일 메뉴 버튼
    ==============================================*/
    --btn-mobile-menu-width: 32px;
    --btn-mobile-menu-stick-height: 4px;
}
@media screen and (max-width: 1320px) {
    :root {
        --header-bottom-inner-grid-width: clamp(100px, 24.219vw, 155px);
        --gnb-top-pos: 
            calc(
                var(--header-bottom-height) 
                + var(--mobile-header-login-box-height)
            )
        ;
        --sub-menu-container-height: 
            calc(
                100dvh 
                - calc(
                    var(--header-bottom-height) 
                    + var(--mobile-header-login-box-height) 
                    + var(--simple-reservation-height)
                )
            )
        ;
    }
}


/* ============================================ 
// header 설정
==============================================*/
#header {
    z-index: 1000;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--header-bg-color);
}

.header-top {
    & {
        height: var(--header-top-height);
        font-size: var(--font-size-14);
    }
    & .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    & :where(.header-sns-box, .header-login-box) {
        display: flex;
        align-items: center;
        height: 100%;
    }
    & .header-sns-box {gap: var(--header-top-gap-base);}
    & .header-login-box {
        gap: calc(var(--header-top-gap-base) * 2);

        @media screen and (max-width: 1320px) {
            & {gap: 0;}
        }
    }
}

@media screen and (max-width: 1320px) {
    .header-top {
        position: absolute;
        width: 100%;

        & .inner {
            justify-content: flex-end;
            height: var(--header-bottom-height);
        }
    }
}

/* 헤더 상단 SNS 아이콘들 */
.header-sns-box {
    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--color-main-04);
    }
    & li a {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
    }
    & li:nth-child(1) a {background-image: url('/img/header/icon-sns-youtube.webp');}
    & li:nth-child(2) a {background-image: url('/img/header/icon-sns-blog.webp');}
    & li:nth-child(3) a {background-image: url('/img/header/icon-sns-instagram.webp');}
}

@media screen and (max-width: 1320px) {
    .header-sns-box {
        gap: clamp(9px, 2.8125vw, 18px);
        margin-right: calc(var(--btn-mobile-menu-width) + 20px);

        & a {
            width: clamp(32px, 7.03125vw, 45px);
            background-size: contain;
        }
    }
}


/* 헤더 상단 로그인 박스 */
.header-login-box {
    & {color: var(--color-text-03);}
    & li:nth-child(2) {position: relative;}
    & li:nth-child(2)::before {
        position: absolute;
        top: 50%;
        left: calc(var(--header-top-gap-base) * -1);
        width: 1px;
        height: 70%;
        background-color: var(--color-text-03);
        transform: translateY(-50%);
        content: '';
    }
}
@media screen and (max-width: 1320px) {
    .header-login-box {
        /* 모바일 메뉴 처음에는 로그인 박스 안 보이게 숨기기 */
        display: none;

        position: absolute;
        top: var(--header-bottom-height);
        left: 0;
        /* display: flex; */
        justify-content: center;
        align-items: center;
        gap: 0;
        width: 100%;
        height: var(--mobile-header-login-box-height);
        background-color: var(--color-main-white);

        li {
            flex: 1;
            height: 100%;

            &:nth-child(2)::before {
                left: 0;
                height: var(--mobile-header-login-box-height);
                background-color: var(--color-line-01);
            }

            & a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                font-size: var(--font-size-18);
                font-weight: var(--font-weight-bold);
                color: var(--color-text-02);
            }
        }
    }
}

.header-bottom {
    & {
        height: var(--header-bottom-height);
        border-width: 1px 0;
        border-style: solid;
        border-color: var(--color-line-01);
    }
    & .inner {
        display: grid;
        grid-template-columns: 
            var(--header-bottom-inner-grid-width) 
            auto 
            var(--header-bottom-inner-grid-width)
        ;
        align-items: center;
        height: 100%;
    }
}
@media screen and (max-width: 1320px) {
    .header-bottom .inner {
        grid-template-columns: 
            var(--header-bottom-inner-grid-width) 
            auto
        ;
        gap: 20px;
    }
}


/* 로고 */
#logo-box {
    & {
        z-index: 1000;
        position: relative;

        @media screen and (max-width: 1320px) {
            & a {
                width: 100%;
        
                & img {width: 100%;}
            }
        }
    }
}


/* ============================================ 
// gnb 설정
==============================================*/
#gnb {
    & {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--gnb-gap);
        height: 100%;
        font-weight: var(--font-weight-bold);
    }
    & li {
        height: 100%;
    }
    & .main-menu {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: var(--font-size-18);
    }
}
@media screen and (max-width: 1320px) {
    #gnb {
        position: absolute;

        /* 모바일 메뉴 안 보이게 숨기기 */
        display: none;

        top: var(--gnb-top-pos);
        left: 0;
        flex-direction: column;
        gap: 0;
        width: 50%;
        height: var(--sub-menu-container-height);
        background-color: var(--color-main-white);

        & li {
            width: 100%;
            border-width: 1px 0 0 0;
            border-style: solid;
            border-color: var(--color-line-01);
            background-color: var(--color-main-04);

            /* &:nth-child(1) {margin-top: -1px;} */
            
            &.open {
                background-color: var(--color-main-white);
                color: var(--color-main-03);

                & .main-menu::after {content: url('/img/common/icon-chevron-right-blue.webp');}
                .bi-chevron-right {display: none;}
            }

            & .main-menu {
                justify-content: space-between;
                padding: 0 var(--content-inner-padding);
            }
        }
    }

}


/* ============================================ 
// 서브메뉴: 전체
==============================================*/
.sub-menu-container {
    & {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;

        z-index: -1;
        position: absolute;
        top: var(--header-total-height);
        left: 0;
        /* display: grid; */
        grid-template-columns: var(--sub-menu-container-grid-01-width) auto;
        width: 100%;
        height: var(--sub-menu-container-height);
        background-color: #fff;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    &.active {
        display: grid;
        opacity: 1;
        visibility: visible;
    }
    & .gnb-simple-reservation {
        background: var(--color-main-03) url('/img/header/bg-gnb-grid-01.webp') no-repeat bottom left/contain;
    }
}
@media screen and (max-width: 1320px) {
    .sub-menu-container {
        top: 0;
        left: unset;
        right: -100%;
        width: 100%;

        &.active {display: flex;}
        & .gnb-simple-reservation {display: none;}
    }
}


/* ============================================ 
// 서브메뉴: 좌측 - 간편예약 부분
==============================================*/
@scope (.gnb-simple-reservation-inner) {
    
}

.gnb-simple-reservation-inner {
    &, 
    & .simple-box, 
    & .specialist-box, 
    & .simple-input-box, 
    & .simple-input-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        color: var(--color-main-white);
    }
    & {
        justify-content: center;
        gap: var(--gnb-simple-reservation-inner-gap);
        max-width: var(--gnb-simple-reservation-inner-max-width);
        height: 100%;
        margin-left: auto;
        margin-right: var(--gnb-simple-reservation-inner-gap);
    }
    & .simple-submit-group {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        justify-self: center;
        width: 100%;
    }
    & .simple-checkbox-wrap {margin: 0 auto;}

    & :where(.simple-box, .specialist-box) h2 {
        margin-bottom: calc(var(--gnb-simple-reservation-inner-gap) / 2);
        font-size: var(--font-gnb-simple-reservation-h2-size);
    }
    & .btn-submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 
            calc(var(--simple-reservation-input-padding-base) * 5) 
            calc(var(--simple-reservation-input-padding-base) * 6)
        ;
        border-radius: var(--main-border-radius-default);
        background-color: var(--color-gnb-01);
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-bold);
    }
    & .btn-submit.alt {background-color: var(--color-main-02);}
}


/* ============================================ 
// 서브메뉴: 우측 - 서브메뉴 리스트 부분
==============================================*/
.sub-menu-box {
    & {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--sub-menu-box-padding);
        padding: 0 var(--sub-menu-box-padding);
    }
    h2 {
        font-size: var(--font-sub-menu-main-title-size);
        color: var(--color-main-03);
    }
}
@media screen and (max-width: 1320px) {
    .sub-menu-box {
        gap: 0;
        width: 100%;
        height: calc(var(--sub-menu-container-height));
        padding: 0;

        & .sub-menu-main-title {display: none;}
    }
}

.sub-menu-list {
    & {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;

        & h3 {
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-regular);
            color: inherit;
        }

        & a {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 58px;
            padding: 0 20px;
            color: var(--color-text-02);

            &:hover {
                background-color: var(--color-main-03);
                color: var(--color-main-white);
            }
        }
    }
}
@media screen and (max-width: 1320px) {
    .sub-menu-list {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: var(--sub-menu-container-height);

        & a {
            flex-shrink: 0;
            height: calc(var(--sub-menu-container-height) / 6);
            border-radius: 0;
            border-width: 1px 0 0 0;
            border-style: solid;
            border-color: var(--color-line-01);

            /* &:nth-child(1) {margin-top: -1px;} */
        }
    }
}

/* ============================================ 
// gnb 옆 전문의상담, 온라인예약 버튼 부분
==============================================*/
#reservation-box {
    & {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--reservation-box-gap);
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-bold);
    }
    & .btn-reservation {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 
            calc(var(--btn-reservation-padding-base) * 2) 
            calc(var(--btn-reservation-padding-base) * 3)
        ;
        border: 1px solid var(--color-main-02);
        border-radius: var(--border-radius-default);
        color: var(--color-main-02);
    }
    & .btn-reservation.alt {
        border-color: var(--color-main-03);
        background-color: var(--color-main-03);
        color: var(--color-main-white);
    }
}
@media screen and (max-width: 1320px) {
    #reservation-box li:not(:last-child) {display: none;}
}
@media screen and (max-width: 640px) {
    #reservation-box {
        font-size: var(--font-size-14);
    
        & .btn-reservation {
            padding: 
                calc(var(--btn-reservation-padding-base) * 2) 
                calc(var(--btn-reservation-padding-base) * 2.5)
            ;
        }
    }
}


/* ============================================ 
// 상담, 예약 버튼 옆 모바일 메뉴 버튼
==============================================*/
#btn-mobile-menu {
    & {
        visibility: hidden;
        display: none;
        width: 0;
    }
}
@media screen and (max-width: 1320px) {
    #btn-mobile-menu {
        z-index: 1000;
        position: relative;
        visibility: visible;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: var(--btn-mobile-menu-width);
        aspect-ratio: 1/0.7;
        margin-left: clamp(5px, 0.78125vw, 15px);
        border: 1px solid transparent;
        cursor: pointer;

        & .mobile-menu-stick {
            width: 100%;
            height: var(--btn-mobile-menu-stick-height);
            background-color: var(--color-text-02);
            transition: transform 0.5s ease;
        }
    }
}


/* ============================================ 
// header에 mobile-menu-active 클래스 추가 시
==============================================*/
#header.mobile-menu-active {

    & .header-login-box {
        display: flex;
    }
    & #gnb {display: flex;}
    
    & #btn-mobile-menu .mobile-menu-stick:nth-child(1) { transform: rotate(45deg) translate(6px, 4px); }
    & #btn-mobile-menu .mobile-menu-stick:nth-child(2) { transform: translateX(100%); opacity: 0; }
    & #btn-mobile-menu .mobile-menu-stick:nth-child(3) { transform: rotate(-45deg) translate(7px, -5.5px); }
}



/* ============================================ 
온라인예약 클릭 후 나오는 모달창 CSS
============================================== */
/* reserve-modal.css — 병원 사이트 톤(라이트), 반응형 모달 스타일 (405px 이하 placeholder 축소) */
:root{
  --hosp-bg:#f5f8fb; --hosp-panel:#fff; --hosp-fg:#20669f; --hosp-muted:#5b6b7b; --hosp-border:#e5edf6;
  --hosp-primary:#2f7de1; --hosp-primary-600:#1f69c7; --hosp-accent:#1fb6a6; --hosp-danger:#e55353;
  --hosp-radius:14px;
  --hosp-font-lg:1.05rem; --hosp-font-base:1rem; --hosp-font-sm:0.9rem;
}

#reserveDim{display:none;position:fixed;inset:0;background:rgba(10,27,51,.55);backdrop-filter:blur(2px);z-index:9998}
#reserveDim[data-open="true"]{display:block}

#reserveModal{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;width:min(440px,92vw);border-radius:var(--hosp-radius);background:var(--hosp-panel);color:var(--hosp-fg);box-shadow:0 20px 60px rgba(12,20,33,.25);border:1px solid var(--hosp-border);overflow:hidden;font-size:var(--hosp-font-base);}
#reserveModal[aria-hidden="false"],#reserveModal[open]{display:block}

#reserveModal>div:first-child{padding:12px 20px;border-bottom:1px solid var(--hosp-border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#f9fbfe,#f2f6fb);font-size:var(--hosp-font-lg)}
#reserveModal strong{font-weight:800;letter-spacing:-.01em}
#reserveClose{border:0;background:transparent;font-size:34px;line-height:0;cursor:pointer;color:var(--hosp-muted);padding:0;border-radius:10px;display:inline-grid;place-items:center;width:34px;height:34px;}
#reserveClose:hover{background:#f0f6ff;color:var(--hosp-fg);}
#reserveClose:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--hosp-primary) 35%,transparent)}

#reserveStep1,#reserveStep2{padding:20px;font-size:var(--hosp-font-base)}
#reserveStep1 p,#reserveStep2 p{margin:0 0 14px;color:var(--hosp-muted);font-size:var(--hosp-font-lg)}

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

.reserve-action{padding:16px;border-radius:12px;border:1px solid var(--hosp-border);cursor:pointer;background:#fbfdff;text-align:center;font-weight:600;font-size:var(--hosp-font-base);transition:all .08s ease,box-shadow .18s ease,border-color .2s ease}
.reserve-action:hover{background:var(--hosp-fg);color: #fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,79,147,.08);border-color:color-mix(in oklab,var(--hosp-primary) 25%,var(--hosp-border));}
.reserve-action:active{transform:translateY(0)}

#reserveStep2 input[type="text"],#reserveStep2 input[type="password"]{width:100%;padding:14px;border:1px solid var(--hosp-border);border-radius:10px;background:#fbfdff;color:var(--hosp-fg);outline:0;transition:border-color .15s ease,box-shadow .15s ease,background .2s ease;font-size:var(--hosp-font-base)}
#reserveStep2 input::placeholder{color:#9ba8b6;font-size:var(--hosp-font-sm)}
#reserveStep2 input:focus{border-color:color-mix(in oklab,var(--hosp-primary) 40%,var(--hosp-border));box-shadow:0 0 0 3px color-mix(in oklab,var(--hosp-primary) 22%,transparent);background:#fff}
#reserveStep2 div>div:nth-child(2){display:flex;gap:8px;align-items:center;margin:8px 0}
#reserveStep2 div>div:nth-child(3){display:flex;gap:8px;margin-top:8px}
#reserveStep2 span{color:var(--hosp-muted);font-size:var(--hosp-font-base)}

#reserveBack,#reserveNext{flex:1;padding:14px;border-radius:10px;border:1px solid var(--hosp-border);cursor:pointer;font-weight:600;font-size:var(--hosp-font-base);transition:transform .06s ease,box-shadow .15s ease,background .2s ease,border-color .2s ease,color .2s ease}
#reserveBack{background:#f6faff;color:var(--hosp-fg)}
#reserveBack:hover{box-shadow:0 6px 18px rgba(37,79,147,.08)}
#reserveNext{background:linear-gradient(180deg,color-mix(in oklab,var(--hosp-primary) 85%,#0000),var(--hosp-primary));color:#fff;border-color:color-mix(in oklab,var(--hosp-primary) 60%,var(--hosp-border))}
#reserveNext:hover{box-shadow:0 10px 26px rgba(31,105,199,.28)}

#reserveModal[data-step="1"] #reserveStep1{display:block}
#reserveModal[data-step="1"] #reserveStep2{display:none}
#reserveModal[data-step="2"] #reserveStep1{display:none}
#reserveModal[data-step="2"] #reserveStep2{display:block}

@media(max-width:560px){#reserveModal{width:94vw;font-size:0.95rem}#reserveModal>div:first-child{padding:16px}#reserveStep1,#reserveStep2{padding:16px}.reserve-action{padding:14px;font-size:0.95rem}}

@media(max-width:405px){
  #reserveStep2 input::placeholder{font-size:0.75rem}
  #reserveStep2 span{font-size:0.8rem}
  #reserveStep2 input[type="text"],#reserveStep2 input[type="password"]{padding:12px;font-size:0.9rem}
}

@media(prefers-reduced-motion:reduce){.reserve-action,#reserveNext,#reserveBack{transition:none}}

.form-help{font-size:.9rem;color:var(--hosp-muted);margin-top:.375rem}