/*======================================================
// 감사의 글 (리스트)
=======================================================*/
.thanks-search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;

    & select {
        height: 34px;
        padding-right: 25px !important;
        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% / 10px;
    }

    & input[name="search"] {
        height: 34px;
        padding: 0 10px;
        border-bottom: 2px solid var(--color-line-05);
        letter-spacing: -0.035rem;

        @media screen and (max-width: 400px) {
            max-width: 170px;
        }
    }
    & 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);
    }
}

.thanks-intro-title {
    margin-bottom: var(--mobile-content-vertical-gap-sm);
    padding: clamp(10px, 2.34375vw, 15px) 0;
    font-size: var(--font-size-16);
    border-bottom: 4px solid var(--color-main-02);
    line-height: 1.3;
    word-break: keep-all;
}

.thanks-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: clamp(10px, 3.125vw, 20px);
    row-gap: clamp(20px, 6.25vw, 40px);

    @media screen and (max-width: 640px) {
        grid-template-columns: repeat(4, 1fr);
    }
    @media screen and (max-width: 400px) {
        grid-template-columns: repeat(2, 1fr);
    }

    & .thanks-item {

        & a {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
            height: 100%;

            & h3 {
                display: -webkit-box;        /* 플렉스 박스 기반 */
                -webkit-line-clamp: 2;       /* 최대 2줄까지만 표시 */
                -webkit-box-orient: vertical;/* 세로 방향으로 줄 제한 */
                overflow: hidden;            /* 넘치는 텍스트 숨김 */
                text-overflow: ellipsis;     /* 말줄임표 표시 */
                line-height: 1.3;
                word-break: keep-all;
            }
            

            & .thanks-thumb {
                overflow: hidden;
                width: 100%;
                aspect-ratio: 1/1;
                border: 1px solid var(--color-line-02);

                & img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}


/*======================================================
// 감사의 글 (상세)
=======================================================*/
:root {
    --thanks-view-padding-base: 10px;
    --thx-patient-info-gap: 20px;
    --thanks-navigation-padding-base: clamp(10px, 3.125vw, 20px);
}
.thanks-view {

    & h2 {
        padding: 
            calc(var(--thanks-view-padding-base) * 3) 
            var(--thanks-view-padding-base)
        ;
        border-top: 3px solid var(--color-main-03);
        border-bottom: 1px solid var(--color-line-02);
        font-size: var(--font-size-20);

        @media screen and (max-width: 380px) {
            padding: 
                calc(var(--thanks-view-padding-base) * 2) 
                var(--thanks-view-padding-base)
            ;
        }
    }

    & .thanks-view-content {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 6.25vw, 40px);

        & .thanks-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 
                calc(var(--thanks-view-padding-base) * 3) 
                var(--thanks-view-padding-base)
            ;
            border-bottom: 1px solid var(--color-line-02);

            @media screen and (max-width: 380px) {
                & {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 5px;
                    padding: 
                        calc(var(--thanks-view-padding-base) * 2) 
                        var(--thanks-view-padding-base)
                    ;
                }
            }

            & div {
                display: flex;
                align-items: center;

                &.thx-doctor-info {gap: 5px;}
                &.thx-patient-info {
                    gap: var(--thx-patient-info-gap);

                    & p {
                        position: relative;

                        &:not(:last-child)::after {
                            position: absolute;
                            top: 50%;
                            right: calc(var(--thx-patient-info-gap) / -2);
                            transform: translateY(-50%);
                            width: 1px;
                            height: 60%;
                            background-color: var(--color-line-05);
                            content: '';
                        }
                    }
                }
            }
        }

        & .thanks-photo {

            & img {
                /* max-width: 100%; */
                max-width: 600px;
            }
        }
    
        & .thanks-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
    
            & h3 {
                position: relative;
                padding: 
                    calc(var(--thanks-view-padding-base) * 2.5) 
                    var(--thanks-view-padding-base)
                    calc(var(--thanks-view-padding-base) * 2.5) 
                    calc(var(--thanks-view-padding-base) * 4.5) 
                ;
                /* background-color: #333; */
                /* color: var(--color-main-white); */
                font-size: var(--font-size-18);
                border-bottom-style: solid;
                border-bottom-color: #555;
                border-bottom-width: clamp(3px, 0.625vw, 4px);

                @media screen and (max-width: 640px) {
                    & {
                        padding: 
                            calc(var(--thanks-view-padding-base) * 2) 
                            var(--thanks-view-padding-base)
                            calc(var(--thanks-view-padding-base) * 2) 
                            calc(var(--thanks-view-padding-base) * 4.5) 
                        ;
                    }
                }
                @media screen and (max-width: 640px) {
                    & {
                        padding: 
                            calc(var(--thanks-view-padding-base) * 1.7) 
                            var(--thanks-view-padding-base)
                            calc(var(--thanks-view-padding-base) * 1.7) 
                            calc(var(--thanks-view-padding-base) * 4) 
                        ;
                    }
                }

                &::before {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: var(--thanks-view-padding-base);
                    width: 20px;
                    aspect-ratio: 1/1.5;
                    background: url('/img/common/symbol.webp') no-repeat center/contain;
                    content: '';
                }
            }

            & p {
                padding: 10px;
                font-size: var(--font-size-18);
                font-weight: var(--font-weight-light);
                line-height: 1.5;
            }
        }

        /*======================================================
        // 이전글 / 다음글
        =======================================================*/
        & .thanks-navigation {
            display: flex;
            flex-direction: column;
            border-width: 1px 0;
            border-style: solid;
            border-color: var(--color-line-02);
            color: var(--color-text-03);

            & .prev-post,
            & .next-post {
                display: grid;
                grid-template-columns: 
                    calc(var(--thanks-navigation-padding-base) * 2) 
                    auto
                ;
                align-items: center;
                padding: 0 var(--thanks-navigation-padding-base);

                & :where(a, p) {
                    display: flex;
                    align-items: center;
                    padding: var(--thanks-navigation-padding-base);
                    max-width: clamp(290px, 80vw, 1200px);

                    & > span {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            & .prev-post {
                border-bottom: 1px solid var(--color-line-02);
            }
        }
    }
}


/*======================================================
// 목록보기 버튼
=======================================================*/
.thanks-footer {
    display: flex;
    justify-content: center;
    margin: 
        var(--mobile-content-vertical-gap-sm) 
        auto 
        var(--mobile-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);
    }
}


/*======================================================
// 페이지네이션
=======================================================*/
:root {
    --pagination-anchor-width: 36px;
}
.pagination {
    margin: var(--mobile-content-vertical-gap-sm) auto;
        
    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--pagination-anchor-width);
        aspect-ratio: 1/1;
        border-radius: 50%;

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