:root {
    /* --sub-visual-img-height: clamp(140px, 40.625vw, 260px); */
    --sub-visual-img-height: clamp(100px, 15.1515vw, 200px);
    --hospital-padding-top-01: clamp(25px, 7.8125vw, 50px);
    --hospital-padding-top-02: clamp(40px, 12.5vw, 80px);

    --sub-lnb-height: clamp(40px, 8.90625vw, 57px);
}

/* 
------------ visual 타이틀, 이미지 위치 공통 ------------ 
*/
:root {
    --sub-lnb-mobile-select-width: clamp(140px, 31.25vw, 200px);
    --sub-lnb-mobile-select-padding: 20px;
    --sub-lnb-mobile-anchor-width: 
        calc(
            var(--sub-lnb-mobile-select-width) 
            - calc(var(--sub-lnb-mobile-select-padding) * 2)
        )
    ;
}
.sub-section {
    & {
        overflow: hidden;
        padding-top: var(--content-vertical-gap-sm);

        @media screen and (max-width: 740px) {
            &.consult {padding-top: 0;}
        }
        @media screen and (max-width: 640px) {
            & {padding-top: var(--mobile-content-vertical-gap-sm);}
        }
        
        &.no-sub-visual {
            margin-top: var(--header-total-height);

            @media screen and (max-width: 1320px) {
                & {margin-top: var(--header-bottom-height);}
            }
        }

        &.notice {padding-top: 0;}
    }
}

.sub-visual {
    & {
        overflow: hidden;
        padding-top: calc(var(--header-top-height) + var(--header-bottom-height));

        & .sub-visual-img {
            position: relative;
            height: var(--sub-visual-img-height);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
    
            & .sub-visual-h1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: var(--font-size-28);
                font-weight: var(--font-weight-bold);
                color: var(--color-text-01);

                @media screen and (max-width: 640px) {
                    & {font-size: var(--font-size-22);}
                }
            }
        }
    }

    /* 
    ------------ LNB 공통 ------------ 
    */
    & .sub-lnb {
        height: var(--sub-lnb-height);

        /* 기본은 PC용 */
        & .sub-lnb-pc { display: flex; }
        & .sub-lnb-mobile { display: none; }

        /* 1200px 이하일 때는 모바일 메뉴만 보이도록 */
        @media (max-width: 1200px) {
            & {border-bottom: 1px solid var(--color-line-02);}

            & .sub-lnb-pc { display: none; }
            & .sub-lnb-mobile { 
                position: relative;
                display: block; 
                width: 100%;
                height: var(--sub-lnb-height);

                & > a {
                    z-index: 1;
                    position: absolute;
                    left: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--color-main-white);
                    width: var(--sub-lnb-mobile-anchor-width);
                    height: calc(100% - 1px);
                    transform: translateX(-50%);
                    font-size: var(--font-size-18);
                    font-weight: var(--font-weight-bold);
                    color: var(--color-main-03);

                    @media screen and (max-width: 480px) {
                        & {font-size: var(--font-size-16);}
                    }
                }
                & select {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    width: var(--sub-lnb-mobile-select-width);
                    height: 100%; /* calc 제거 */
                    padding: 0 var(--sub-lnb-mobile-select-padding);
                    border: none;
                    outline: none;
                    background: url('/img/common/icon-dropdown-blue-big.webp') no-repeat right center / 12px;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    transform: translateX(-50%);

                    @media screen and (max-width: 480px) {
                        & {font-size: var(--font-size-14);}
                    }
                }
            }
        }


        & ul {
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid var(--color-line-01);
        }
        & li {
            display: flex;
            justify-content: inherit;
            align-items: center;
            width: 120px;
            color: var(--color-text-03);
            font-weight: var(--font-weight-medium);
            transition: all 0.5s;

            &:hover {
                box-shadow: inset 0 -2px 0 0 var(--color-main-03);
                color: var(--color-main-03);
                font-weight: var(--font-weight-semi-bold);
            }
            &.active {
                box-shadow: inset 0 -2px 0 0 var(--color-main-03);
                color: var(--color-main-03);
                font-weight: var(--font-weight-semi-bold);
            }
            & a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 20px 0;
            }
        }
    }  
}
@media screen and (max-width: 1320px) {
    .sub-visual {padding-top: var(--header-bottom-height);}
}


/*============================================  
// 서브 페이지 공통 설정
=============================================*/
.sub-section-title-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(10px, 3.125vw, 20px);
    word-break: keep-all;
    text-align: center;

    &.left {
        align-items: flex-start;

        & .sub-section-title {align-items: flex-start;}
    }

    &.intro {gap: 30px;}

    &.grid .sub-section-sub-title {color: var(--color-text-05);}
    &.grid .sub-section-title {
        flex-direction: row;
        gap: clamp(5px, 0.75vw, 10px);

        @media screen and (max-width: 1000px) {
            & {
                flex-direction: column;
                gap: 0;
            }
        }

        & {
            font-weight: var(--font-weight-normal);

            &.column {
                flex-direction: column;
            }

            & strong {
                font-weight: var(--font-weight-bold);
                color: var(--color-text-02);
            }
        }
    }
}
.sub-section-sub-title {
    font-size: var(--font-main-sub-title-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-main-03);
    letter-spacing: 3px;
}

.sub-section-num {
    margin-top: 10px;
    font-size: 44px;
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-text-07);
}

.sub-section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: var(--font-main-h2-size);
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.3;

    @media screen and (max-width: 1320px) {
        & {font-size: var(--font-simple-input-title-box-h2-size);}
    }

    & strong {
        color: var(--color-main-03);
    }
}

.sub-section-text {
    text-align: center;
    font-size: var(--font-size-18);
    color: var(--color-text-03);
    line-height: 1.5;
    word-break: keep-all;

    &.left {text-align: left;}

    & em {
        font-weight: var(--font-weight-bold);
        color: var(--color-main-03);
    }
}

/* 밑줄 있는 서브 타이틀 */
:root {
    /* 800px 기준으로 계산 */
    --sub-under-bar-title-padding-top: clamp(35px, 8.75vw, 70px);
    --sub-under-bar-title-margin-bottom: clamp(15px, 3.75vw, 30px);
}
.sub-under-bar-title {
    padding-top: var(--sub-under-bar-title-padding-top);
    margin: 0 auto;
    margin-bottom: var(--sub-under-bar-title-margin-bottom);
    border-bottom: 1px solid var(--color-line-01);
    
    & h3 {
        display: inline-block;
        padding: 0 5px 10px 5px;
        font-size: var(--font-size-28);
        border-bottom: 3px solid var(--color-main-03);

        @media screen and (max-width: 1320px) {
            & {font-size: var(--font-simple-input-title-box-h2-size);}
        }
    }
}


/*======================================== 
// pagination
========================================*/
:root {
    --pagination-li-anchor-width: clamp(24px, 5.625vw, 36px);
}
.pagination-wrap {
    margin-bottom: var(--content-vertical-gap-sm);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    & li a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--pagination-li-anchor-width);
        aspect-ratio: 1/1;
        border-radius: 50%;
        font-size: var(--font-size-14);

    }
    & li.active a {
        background-color: var(--color-main-03);
        color: var(--color-main-white);
    }
}


/*======================================== 
// board 형태 레이아웃 공통
========================================*/
:root {
    --article-view-inner-padding: 10px;
    --article-view-title-notice-flag-padding-base: 5px;
    --article-view-title-notice-flag-border-radius: 14px;

    --article-view-meta-gap: 25px;
}

/* Grid, List 형태 공통 */
.article-search-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 
        /* var(--mobile-content-vertical-gap-big)  */
        0
        0 
        /* var(--mobile-content-vertical-gap-sm) */
        20px
    ;

    &.sm {margin-top: var(--mobile-content-vertical-gap-sm);}

    @media screen and (max-width: 740px) {
        & {
            flex-direction: column;
            gap: 20px;
            margin-top: var(--mobile-content-vertical-gap-sm);
            margin-bottom: 10px;
        }
        & .article-search-total {
            order: 2;
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
    }

    & p {
        color: var(--color-text-03);

        @media screen and (max-width: 640px) {
            & {font-size: var(--font-size-14);}
        }

        & em {color: var(--color-main-03);}
    }
}
.grid-template-section .article-search-wrap {margin-top: var(--mobile-content-vertical-gap-sm);}


.article-search-input-group {
    @media screen and (max-width: 640px) {
        & {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            font-size: var(--font-size-14);
        }
    }

    & form {
        display: flex;
        align-items: center;
        gap: 8px;

        @media screen and (max-width: 390px) {
            & {
                width: 100%;
            }
        }
    }
    & select {
        appearance: none;
        border-bottom: 2px solid var(--color-line-05);
        color: var(--color-text-03);
        background: url('/img/common/icon-dropdown-gray.webp') no-repeat 90%/13px;

        @media screen and (max-width: 640px) {
            & {background-size: 8px;}
        }
    }
    & input[type="text"] {
        border-bottom: 2px solid var(--color-line-05);
        
        @media screen and (max-width: 390px) {
            & {
                width: 100%;
            }
        }
    }
    & :where(select, input[type="text"]) {
        padding: 0 10px;
        height: 34px;
        letter-spacing: -0.035rem;
    }
    & select {padding-right: 25px;}
    & button {
        flex-shrink: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 74px;
        aspect-ratio: 1/0.45;
        border-radius: var(--main-border-radius-default);
        background-color: var(--color-main-03);
        font-size: var(--font-size-16);
        color: var(--color-main-white);
    }
}

a.btn-write {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 100px;
    aspect-ratio: 1/0.42;
    border-radius: var(--main-border-radius-default);
    background-color: var(--color-main-03);
    font-size: var(--font-size-16);
    color: var(--color-main-white);

    & i {
        width: 14px;
        height: 15px;
        background: url('/img/common/icon-write.webp') no-repeat center/contain;
    }
}

span.notice-flag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 
        var(--article-view-title-notice-flag-padding-base)
        calc(var(--article-view-title-notice-flag-padding-base) * 2)
    ;
    border-radius: var(--article-view-title-notice-flag-border-radius);
    background-color: var(--color-main-03);
    color: var(--color-main-white);
}
span.new-icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-main-03);
    font-size: var(--font-size-12);
    color: var(--color-main-white);
}
span.input-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(2px, 0.533vw, 8px);
    font-weight: var(--font-weight-bold);
}
span.important {
    margin-right: 3px;
    color: red;
}


/*======================================== 
// board - View 페이지
========================================*/
:root {
    --answer-header-gap: clamp(5px, 1.5625vw, 10px);
    --answer-icon-width: clamp(20px, 5vw, 32px);
}

#article-view {
    margin-top: var(--content-vertical-gap-sm);
    border-top: 3px solid var(--color-text-02);

    @media screen and (max-width: 480px) {
        & {margin-top: var(--mobile-content-vertical-gap-sm);}
    }
}
.article-view-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    & .article-view-title-box {
        display: flex;
        align-items: center;
        gap: calc(var(--article-view-inner-padding) / 2);
        width: 100%;
        padding: 
            calc(var(--article-view-inner-padding) * 3) 
            var(--article-view-inner-padding)
        ;
        border-bottom: 1px solid var(--color-line-02);

        @media screen and (max-width: 640px) {
            & {
                padding: 
                    calc(var(--article-view-inner-padding) * 1.5) 
                    var(--article-view-inner-padding)
                ;
            }
        }

        & .subject-mark {
            margin-right: auto;
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-03);

            @media screen and (max-width: 480px) {
                & {font-size: var(--font-size-16);}
            }
        }

        & h3 {
            margin-right: auto;
            font-size: var(--font-size-20);

            @media screen and (max-width: 480px) {
                & {font-size: var(--font-size-16);}
            }
        }
    }

    & .password-check-box {
        margin: 20px auto;
        & p {
            margin-bottom: 5px;
            color: red;
        }
        & form {
            display: flex;
            align-items: center;
            gap: 5px;

            & input {
                padding: 7.5px;
                border: 1px solid var(--color-line-02);
                border-radius: 5px;
            }
            & button {
                padding: 10px 20px;
                border-radius: 5px;
                background-color: var(--color-main-03);
                color: var(--color-main-white);
            }
        }
    }

    & .article-view-meta {
        display: flex;
        align-items: center;
        gap: var(--article-view-meta-gap);
        width: 100%;
        margin-top: -1px;
        padding: 
            calc(var(--article-view-inner-padding) * 2) 
            var(--article-view-inner-padding)
        ;
        border-width: 1px 0;
        border-style: solid;
        border-color: var(--color-line-01);
        color: var(--color-text-03);

        @media screen and (max-width: 480px) {
            & {
                padding: 
                    calc(var(--article-view-inner-padding) * 1) 
                    var(--article-view-inner-padding)
                ;
            }
        }

        & :where(div, p) {line-height: 1;}

        & .meta-name {
            position: relative;

            &::after {
                position: absolute;
                top: 50%;
                right: calc(var(--article-view-meta-gap) / -2);
                width: 1px;
                height: 90%;
                background-color: var(--color-text-03);
                transform: translateY(-50%);
                content: '';
            }
        }

        & .meta-views {margin-left: auto;}
        & .meta-answer {margin-left: auto;}

        & .meta-link {
            & a {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                padding: 8px 20px;
                border-radius: 9px;
                background-color: var(--color-profile-01);
                font-size: var(--font-size-14);
                color: var(--color-profile-03);

                & i {line-height: 1;}
            }
        }
    }

    & .article-view-content {
        width: 100%;
        padding: 
            calc(var(--article-view-inner-padding) * 5) 
            var(--article-view-inner-padding)
        ;
        font-size: var(--font-size-18);
        line-height: 1.5;

        @media screen and (max-width: 1100px) {
            & img {width: 100%;}
        }
        @media screen and (max-width: 640px) {
            & {
                padding: 
                    calc(var(--article-view-inner-padding) * 2) 
                    var(--article-view-inner-padding)
                ;
            }
        }
        @media screen and (max-width: 480px) {
            & {font-size: var(--font-size-16);}
        }

        & .article-view-file {
    
            & a {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: fit-content;
                margin: 0 auto;
                padding: 8px 20px;
                border-radius: 9px;
                background-color: var(--color-profile-01);
                font-size: var(--font-size-14);
                color: var(--color-profile-03);

                & i {
                    line-height: 1;
                }
            }
        }

        & .answer-section {
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 3.125vw, 20px);
            margin-top: var(--mobile-content-vertical-gap-sm);
            padding: clamp(10px, 4.6875vw, 30px);
            border-radius: var(--simple-input-border-radius);
            background-color: var(--color-main-04);

            & .answer-header {
                display: flex;
                align-items: center;
                gap: var(--answer-header-gap);

                & .answer-icon {
                    width: var(--answer-icon-width);
                    aspect-ratio: 1/1;
                    border: 1px solid var(--color-line-01);
                    border-radius: 50%;
                    background-color: var(--color-main-white);
                    background-image: url('/img/common/symbol.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 50%;
                }

                & .answer-name {
                    font-weight: var(--font-weight-bold);
                }

                & .answer-date {
                    position: relative;
                    padding-left: var(--answer-header-gap);
                    font-size: var(--font-size-14);
                    color: var(--color-text-03);

                    &::before {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 1px;
                        height: 90%;
                        background-color: var(--color-text-03);
                        transform: translateY(-50%);
                        content: '';
                    }
                }
            }

            & .answer-body {
                padding-left: calc(var(--answer-icon-width) + var(--answer-header-gap));
                line-height: 1.5;
            }
        }
    }
}

/*=================== 답변대기/답변완료 마크 ===================*/
.answer-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    aspect-ratio: 1/0.429;
    border-radius: var(--sub-border-radius-default);

    &.wait {
        border: 1px solid var(--color-board-06);
    }
    &.done {
        background-color: var(--color-main-03);
        color: var(--color-main-white);
    }

    @media screen and (max-width: 480px) {
        & {font-size: var(--font-size-14);}
    }
}


/* 뷰 - 페이지네이션 (이전/다음 글) */
.article-pagination {
    display: flex;
    flex-direction: column;
    color: var(--color-text-03);

    & :where(.prev-article, .next-article) {
        display: flex;
        align-items: center;
        gap: calc(var(--article-view-inner-padding) * 4);
        padding: calc( var(--article-view-inner-padding) * 2);
        border-width: 1px 0;
        border-style: solid;
        border-color: var(--color-line-01);
        font-weight: var(--font-weight-regular);

        @media screen and (max-width: 480px) {
            & {
                padding: calc( var(--article-view-inner-padding) * 1);
            }
        }
    }

    & .next-article {margin-top: -1px;}
}


/* 목록보기 버튼 */
.article-view-list-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 
        var(--content-vertical-gap-sm) 
        auto 
        var(--content-vertical-gap-big)
    ;

    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(100px, 21.875vw, 140px);
        aspect-ratio: 1/0.42;
        border-radius: 10px;
        background-color: var(--color-main-03);
        font-size: var(--font-size-18);
        color: var(--color-main-white);

        @media screen and (max-width: 640px) {
            & {font-size: var(--font-size-16);}
        }
    }
}

:root {
    --list-article-item-grid-column-num-w1320: clamp(60px, 9.848vw, 130px);
    --list-article-item-grid-column-subject-w1320: clamp(60px, 9.848vw, 130px);
    /* --list-article-item-grid-column-title-w1320: clamp(); */
    --list-article-item-grid-column-author-w1320: clamp(60px, 11.3636vw, 150px);
    --list-article-item-grid-column-add-date-w1320: clamp(60px, 11.3636vw, 150px);
    --list-article-item-grid-column-views-w1320: clamp(80px, 7.575vw, 100px);
    --list-article-item-grid-column-answer-w1320: clamp(70px, 7.575vw, 100px);
    
    --list-article-item-padding-base: clamp(8px, 0.75vw, 10px);

    --list-article-item-grid-template-columns-grid-04: 
        var(--list-article-item-grid-column-num-w1320) 
        auto 
        var(--list-article-item-grid-column-author-w1320) 
        var(--list-article-item-grid-column-add-date-w1320)
    ;

    --list-article-item-grid-template-columns-grid-05: 
        var(--list-article-item-grid-column-num-w1320) 
        auto 
        var(--list-article-item-grid-column-author-w1320) 
        var(--list-article-item-grid-column-add-date-w1320) 
        var(--list-article-item-grid-column-views-w1320)
    ;

    --list-article-item-grid-template-columns-grid-06: 
        var(--list-article-item-grid-column-num-w1320) 
        var(--list-article-item-grid-column-subject-w1320) 
        auto 
        var(--list-article-item-grid-column-author-w1320) 
        var(--list-article-item-grid-column-add-date-w1320) 
        var(--list-article-item-grid-column-answer-w1320)
    ;
}

@media screen and (max-width: 480px) {
    :root {
        --list-article-item-grid-template-columns-grid-06: 
            var(--list-article-item-grid-column-num-w1320) 
            var(--list-article-item-grid-column-subject-w1320) 
            auto 
            var(--list-article-item-grid-column-add-date-w1320) 
            var(--list-article-item-grid-column-answer-w1320)
        ;
    }
    .grid-06 :where(.div-header, .div-body) {
        &.author {display: none;}
    }
}

@media screen and (max-width: 450px) {
    :root {
        --list-article-item-grid-template-columns-grid-05: 
            var(--list-article-item-grid-column-num-w1320) 
            auto 
            var(--list-article-item-grid-column-author-w1320) 
            var(--list-article-item-grid-column-add-date-w1320) 
        ;
    }
    :where(.div-header, .div-body) {
        & {font-size: 10px !important;}
        &.views {display: none;}
    }
}

@media screen and (max-width: 390px) {
    :root {
        --list-article-item-grid-template-columns-grid-06: 
            var(--list-article-item-grid-column-subject-w1320) 
            auto 
            var(--list-article-item-grid-column-add-date-w1320) 
            var(--list-article-item-grid-column-answer-w1320)
        ;
    }
    .grid-06 :where(.div-header, .div-body) {
        &.num {display: none;}
    }
}

.list-article-item-wrap {
    margin-bottom: var(--content-vertical-gap-sm);

    @media screen and (max-width: 1000px) {
        & {font-size: var(--font-size-14);}
    }
    @media screen and (max-width: 450px) {
        & {margin-bottom: var(--mobile-content-vertical-gap-sm);}
    }
}

:where(.list-article-item-header, .list-article-item-body-group) {
    & > div {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 
            calc(var(--list-article-item-padding-base) * 2) 
            var(--list-article-item-padding-base)
        ;

        @media screen and (max-width: 1320px) {
            & {
                padding: 
                    var(--list-article-item-padding-base) 
                    var(--list-article-item-padding-base)
                ;
            }
        }
    }
}

.list-article-item-header {
    display: grid;
    grid-template-columns: var(--list-article-item-grid-template-columns-grid-05);
    background-color: var(--color-main-03);
    color: var(--color-main-white);

    &.grid-04 {grid-template-columns: var(--list-article-item-grid-template-columns-grid-04);}
    &.grid-06 {grid-template-columns: var(--list-article-item-grid-template-columns-grid-06);}
}

.list-article-item-body {
    display: flex;
    flex-direction: column;

    & :where(.num, .add-date, .views) {color: var(--color-text-03);}
    & .subject {color: var(--color-main-03);}
    & .title {
        justify-content: flex-start;

        & a {
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            /* border: 1px solid red; */

            & span.title-text {
                flex: 1 1 0;          /* 남은 공간을 차지하고 줄어들 수 있음 */
                overflow: hidden;     
                white-space: nowrap;   /* 한 줄 유지 */
                text-overflow: ellipsis; /* 말줄임표 */

                @media screen and (max-width: 640px) {
                    & {
                        width: 100px;

                        &.consult {width: 60px;}
                    }
                }
                @media screen and (max-width: 380px) {
                    & {width: 80px;}
                }
            }
        }
    }

}
.list-article-item-body-group {
    display: grid;
    grid-template-columns: var(--list-article-item-grid-template-columns-grid-05);
    margin-top: -1px;
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--color-line-01);

    &.grid-04 {grid-template-columns: var(--list-article-item-grid-template-columns-grid-04);}
    &.grid-06 {grid-template-columns: var(--list-article-item-grid-template-columns-grid-06);}

    &.notice {
        background-color: var(--color-board-01);
        font-weight: var(--font-weight-bold);
    }

    &.no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        & .list-article-text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
    }
}

:root {
    --write-item-h3-margin: clamp(40px, 4.333vw, 65px);
    --write-input-width: clamp(100px, 10vw, 150px);
    --write-input-height: clamp(30px, 6.25vw, 40px);
    --write-input-padding-base: 5px;
}
@media screen and (max-width: 650px) {
    :root {
        --write-item-h3-margin: 15px;
        --write-input-width: 80px;
    }
}
@media screen and (max-width: 480px) {
    :root {
        --write-item-h3-margin: 5px;
        --write-input-width: 60px;
        --write-input-padding-base: 4px;
    }
}

/*======================================== 
// board - write 페이지
========================================*/
:root {
    --write-item-title-width: clamp(160px, 18.333vw, 275px);
    --write-input-title-width: 800px;
    --write-input-gap: clamp(10px, 1.333vw, 20px);
}
@media screen and (max-width: 650px) {
    :root {
        --write-item-title-width: 120px;
        --write-input-gap: 5px;
    }
}
@media screen and (max-width: 480px) {
    :root {
        --write-item-title-width: 85px;
        --write-input-gap: 5px;
    }
}

.write-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--content-vertical-gap-sm);

    & .write-item {
        display: grid;
        grid-template-columns: var(--write-item-title-width) auto;
        align-items: center;
        margin-top: -1px;
        border-width: 1px 0;
        border-style: solid;
        border-color: var(--color-board-04);
        padding: calc(var(--write-input-padding-base) * 3) 0;
        font-size: var(--font-size-18);

        @media screen and (max-width: 500px) {
            & {padding: calc(var(--write-input-padding-base) * 2) 0;}
        }

        &:first-child {border-top: 2px solid var(--color-main-03);}
        &:last-child {border-bottom: 1px solid var(--color-board-03);}

        & h3 {
            margin-left: var(--write-item-h3-margin);
            padding-right: 15px;
            font-weight: var(--font-weight-bold);
            line-height: 1.3;

            @media screen and (max-width: 1100px) {
                & {font-size: var(--font-size-16);}   
            }
            @media screen and (max-width: 480px) {
                & {
                    font-size: var(--font-size-14);
                }
            }
        }

        
        & .write-input {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--write-input-gap);

            @media screen and (max-width: 380px) {
                &.tel {
                    justify-content: space-between;
                    gap: 0;
                    width: 98%;
                }
            }

            &.subject {
                @media screen and (max-width: 710px) {
                    & {gap: 5px;}
                }
                @media screen and (max-width: 680px) {
                    & {
                        gap: 0;
                    
                        & .write-input-item {
                            & label {
                                margin-right: -1px;
                                border-radius: 0;

                                @media screen and (max-width: 610px) {
                                    & {
                                        width: fit-content;
                                        height: 25px;
                                        padding: 0 clamp(5px, 2.459vw, 15px);
                                        aspect-ratio: unset;
                                    }
                                }
                                @media screen and (max-width: 380px) {
                                    & {padding: 0 5px;}
                                }
                            }
                        }
                    }
                }
            }
            
            & #policy {
                overflow-y: auto;
                width: 98%;
                height: 200px;
                padding: 
                    calc(var(--write-input-padding-base) * 3) 
                    calc(var(--write-input-padding-base) * 2)
                ;
                border: 1px solid var(--color-board-04);
                border-radius: var(--main-border-radius-default);
                color: var(--color-text-03);
                line-height: 1.3;

                @media screen and (max-width: 480px) {
                    & h3, & div, & span, & table {font-size: 12px !important;}
                    & table td {line-height: 1.2 !important;}
                }

                & table {
                    width: 100% !important;
                    border-collapse: collapse !important;
                    table-layout: auto !important; /* 내용에 맞게 칸 크기 자동 조절 */
        
                    & th, & td {
                      padding: 8px !important;
                      text-align: left !important;
                      word-break: break-word !important; /* 긴 글자가 셀 안에서 줄바꿈 되도록 */
                    }
                }
            }

            & input:not([type="file"], [type="radio"]) {
                width: var(--write-input-width);
                height: var(--write-input-height);
                padding: 
                0 
                calc(var(--write-input-padding-base) * 2)
                ;
                border: 1px solid var(--color-board-04);
                border-radius: var(--main-border-radius-default); 
                
                &.title {
                    width: var(--write-input-title-width);
                
                    @media screen and (max-width: 1320px) {
                        & {width: 98%;}
                    }
                }
            }

            & input[type="file"] {
                height: var(--write-input-height);
                line-height: var(--write-input-height);
                padding-left: calc(var(--write-input-padding-base) * 2);
                border: 1px solid var(--color-line-02);
                border-radius: var(--main-border-radius-default); 

                &::file-selector-button {
                    position: absolute;
                    left: 390px;
                    width: 95px;
                    height: 40px;
                    border: 0;
                    border-radius: var(--main-border-radius-default);
                    background-color: var(--color-main-03);
                    font-size: var(--font-size-16);
                    font-weight: var(--font-weight-bold);
                    color: var(--color-main-white);
                }
            }

            @media screen and (max-width: 500px) {
                &.name input {width: 98%;}
            }
            
            & .write-input-item {

                & input[type="radio"] {display: none;}
                
                & label {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 90px;
                    aspect-ratio: 1/0.44;
                    border: 1px solid var(--color-board-06);
                    border-radius: 20px;

                    @media screen and (max-width: 850px) {
                        & {
                            width: 70px;
    
                            font-size: var(--font-size-14);
                        }
                    }
                }
                & input[type="radio"]:checked + label {
                    border: 0;
                    background-color: var(--color-main-03);
                    color: var(--color-main-white);
                }
            }

            & select {
                height: var(--write-input-height);
                padding: 
                    0 
                    calc(var(--write-input-padding-base) * 2)
                ;
                border: 1px solid var(--color-board-04);
                border-radius: var(--main-border-radius-default); 

                @media screen and (max-width: 480px) {
                    & {width: 98%;}
                }
            }

            & textarea {
                width: 98%;
                height: 200px;
                padding: 
                    calc(var(--write-input-padding-base) * 3) 
                    calc(var(--write-input-padding-base) * 2)
                ;
                border: 1px solid var(--color-board-04);
                border-radius: var(--main-border-radius-default);
                resize: none;

                &#content {
                    font-size: var(--font-size-18);

                    @media screen and (max-width: 480px) {
                        & {
                            height: 100px;
                            font-size: var(--font-size-14);
                        }
                    }
                }
            }

            @media screen and (max-width: 480px) {
                & :where(input, select, #policy) {font-size: var(--font-size-14);}
                & input[type="password"] {width: 98%;}
            }
        }
    }
}
.write-is-agreed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--write-input-padding-base) * 2);
    margin: var(--mobile-content-vertical-gap-sm) 0;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);

    @media screen and (max-width: 380px) {
        & {font-size: var(--font-size-18);}
    }

    & input[type="checkbox"] {
        width: 20px;
        aspect-ratio: 1/1;
    
        /* 기본 브라우저 스타일 제거 */
        appearance: none; /* 크롬/엣지/사파리 */
        -webkit-appearance: none; /* 웹킷 */
        -moz-appearance: none; /* 파이어폭스 */
    
        outline: 2px solid var(--color-board-04);
        border: none; /* 기본 테두리 제거 */
        border-radius: 1px;
        background: white; /* 배경 살리기 */
        cursor: pointer;
    }
    
    & input[type="checkbox"]:checked {
        outline: 2px solid var(--color-main-03);
        background: var(--color-main-03); /* 체크 시 색상 */
        position: relative;
    }
    
    & input[type="checkbox"]:checked::after {
        content: "✔"; /* 체크 표시 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
        font-size: 14px;
        color: white;
    }
}

.write-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--content-vertical-gap-big);

    & :where(a, button) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        aspect-ratio: 1/0.25;
        border-radius: var(--main-border-radius-default);
        font-size: var(--font-news-list-h3-size);
        font-weight: var(--font-weight-bold);
        color: var(--color-main-white);

        @media screen and (max-width: 380px) {
            & {font-size: var(--font-size-16);}
        }

        &.submit {background-color: var(--color-main-03);}
        &.cancel {background-color: var(--color-board-05);}
    }

    & a.cancel {color: var(--color-main-white);}
}



/* <------------- treatment.css 의 스케쥴표와 통합 ----------------> */
:root {
    --schedule-data-span-padding-base: clamp(2px, 1vw, 5px);
}

/* 스케쥴표 */
.schedule-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    text-align: center;

    & > div {
        flex: 1;

        &:not(:last-child) {border-bottom: 1px solid var(--color-line-02);}
    }

    @media screen and (max-width: 700px) {
        & {
            font-size: var(--font-size-14);
        }
    }
    @media screen and (max-width: 360px) {
        & {
            font-size: var(--font-size-13);
        }
    }

    & .schedule-header {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: center;
    }
    
    & .schedule-data-group {
        display: grid;
        grid-template-columns: 85.7% auto;
    
        & .schedule-data-box-layer {
            display: flex;
            flex-direction: column;
            width: 100%;
    
            & .schedule-data-box {
                display: grid;
                grid-template-columns: repeat(6, 1fr);

                &:not(:last-child) {border-bottom: 1px solid var(--color-line-02);}
            }
        }

        & .schedule-sat-data-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-left: 1px solid var(--color-line-02);

            & .sat-available-days {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px;
            }
        }
    }
    
    & .schedule-data {
        & {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        & span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            border-radius: calc(var(--schedule-data-span-padding-base) * 3);
            padding: 
                var(--schedule-data-span-padding-base) 
                calc(var(--schedule-data-span-padding-base) * 3)
            ;
    
            @media screen and (max-width: 640px) {
                & {
                    padding: 
                        var(--schedule-data-span-padding-base) 
                        calc(var(--schedule-data-span-padding-base) * 2)
                    ;
                }
            }
    
            &.span-t {
                border: 1px solid var(--color-line-02);
            }
            &.span-s {
                background-color: var(--color-main-03);
                color: var(--color-main-white);
            }
    
        }
    }
}



.schedule-doctor-btn-box {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 20px);

    & a.btn-schedule {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140px;
        aspect-ratio: 1/0.25;
        border: 2px solid var(--color-main-03);
        border-radius: 17px;
        font-weight: var(--font-weight-bold);
        color: var(--color-main-03);
    
        &.alt {
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }
}

/*=============================================================== 
// No Page 페이지 없음
===============================================================*/
#no-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(400px, 109.375vw, 700px);
    margin-top: var(--header-total-height);

    @media screen and (max-width: 1320px) {
        & {margin-top: var(--header-bottom-height);}
    }

    & .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(20px, 6.25vw, 40px);

        @media screen and (max-width: 640px) {
            & {
                flex-direction: column;
            }
        }

        & .no-page-img-box {
            width: clamp(80px, 15.625vw, 100px);

            & img {
                width: 100%;
                object-fit: contain;
            }
        }

        & .no-page-text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(10px, 3.125vw, 20px);
            text-align: center;
            word-break: keep-all;
            line-height: 1.5;

            & h3 {
                font-size: clamp(20px, 2.666vw, 40px);
            }
            & p {
                font-size: clamp(14px, 1.333vw, 20px);
            }

            & .btn-resv {
                margin-top: 20px;
                padding: 10px 20px;
                border-radius: var(--sub-border-radius-default);
                background-color: var(--color-main-03);
                font-weight: var(--font-weight-bold);
                color: var(--color-main-white);
            }
        }
    }
}

/*=============================================================
// 진료시간
==============================================================*/
:root {
    --treatment-info-section-border-radius: clamp(5px, 1.742vw, 23px);
    --treatment-info-section-padding: clamp(15px, 2.27vw, 30px);
    --treatment-info-box-width: 440px;
    --treatment-time-note-margin: clamp(10px, 1.515vw, 20px);

    --schedule-doctor-list-gap: 30px;
    --schedule-doctor-list-item-gap: clamp(20px, 3.03vw, 40px);
    --schedule-doctor-info-box-padding: 20px;
    --schedule-doctor-info-box-gap: clamp(20px, 3.03vw, 40px);

    --schedule-doctor-img-box-width: 260px;
    --schedule-doctor-img-box-height: clamp(240px, 39vw, 320px);
}

/* 의료진 리스트 틀 */
.schedule-doctor-list {
    display: flex;
    flex-direction: column;
    gap: var(--schedule-doctor-list-gap);
    /* border: 2px solid black; */

    &.intro {
        margin: 
            var(--mobile-content-vertical-gap-sm) 
            auto 
            var(--mobile-content-vertical-gap-big)
        ;
    }
}
.schedule-doctor-list-item {
    display: grid;
    grid-template-columns: var(--schedule-doctor-img-box-width) auto;
    gap: var(--schedule-doctor-list-item-gap);

    @media screen and (max-width: 820px) {
        & {
            display: flex;
            flex-direction: column;
        }
    }
}

/* 의료진 사진 */
.schedule-doctor-img-box {
    overflow: hidden;
    height: var(--schedule-doctor-img-box-height);
    padding-top: 20px;
    border-radius: var(--sub-border-radius-default);
    background-color: var(--color-main-04);

    & img {
        width: 100%;
        /* height: 100%; */
        object-fit: cover;

        @media screen and (max-width: 820px) {
            & {
                height: 100%;
                object-fit: contain;
            }
        }
    }

    
}

.schedule-doctor-info-box {
    & {
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        gap: var(--schedule-doctor-info-box-gap);
        padding: var(--schedule-doctor-info-box-padding) 0;
    }

    & .schedule-doctor-info-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;

        @media screen and (max-width: 1000px) {
            & {
                flex-direction: column;
            }
        }

        & .schedule-doctor-info-detail {
            display: flex;
            flex-direction: column;
            gap: 15px;

            @media screen and (max-width: 1000px) {
                & {
                    align-items: center;
                }
            }

            & .schedule-doctor-info-name {
                display: flex;
                align-items: center;

                & .name-box {
                    flex-shrink: 0;
                    display: flex;
                    align-items: flex-end;
                    gap: 5px;

                    & h4 {
                        font-size: var(--font-size-28);

                        @media screen and (max-width: 640px) {
                            & {font-size: var(--font-simple-input-title-box-h2-size);}
                        }
                    }
                    & p {
                        font-size: var(--font-size-20);

                        @media screen and (max-width: 640px) {
                            & {font-size: var(--font-size-16);}
                        }
                    }
                }

                & .department {
                    position: relative;
                    margin-left: 10px;
                    padding-left: 10px;
                    font-size: var(--font-size-20);
                    font-weight: var(--font-weight-bold);
                    color: var(--color-main-03);
                    word-break: keep-all;
                    line-height: 1.2;

                    &::before {
                        position: absolute;
                        top: 50%;
                        left: 0px;
                        width: 2px;
                        height: 90%;
                        transform: translateY(-50%);
                        background-color: var(--color-line-06);
                        content: '';
                    }
                }
            }

            & .specialty-box {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                line-height: 1.3;
                
                & h5 {
                    flex-shrink: 0;
                    font-weight: var(--font-weight-bold);
                    color: var(--color-main-03);
                }
                & p {
                    color: var(--color-text-03);
                    word-break: keep-all;
                }

                @media screen and (max-width: 480px) {
                    & {
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                    }
                }
            }
        }

        /* <----- 이하 btn-schedule은 sub_common.css로 이동 -----> */
    }

    
}