/* =====================================================
// 공통 설정
===================================================== */
.sub-section {
    --list-font-size-base: var(--font-size-16);

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

    & .new-mark {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: calc(var(--list-font-size-base) * 1.125);
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--color-main-02);
        font-size: calc(var(--list-font-size-base) * 0.75);
        color: var(--color-main-white) !important;
    }
}


/* =====================================================
// 게시판 컨테이너
===================================================== */
#board-container {
    --board-border-radius: calc(var(--border-radius-board) * 0.71);

    padding: var(--mobile-content-vertical-gap-big) 0;
}


/* =====================================================
// 검색 결과가 없을 때
===================================================== */
#board-empty {
    padding: var(--mobile-content-vertical-gap-sm) 0;
    
    & .inner {
        display: flex;
        justify-content: center;
        align-items: center;

        & .empty-msg {
            width: fit-content;

            & strong {font-weight: var(--font-weight-semi-bold);}
        }
    }
}


/* =====================================================
// 게시판 검색 박스
===================================================== */
#board-search-box {
    --search-box-border: 2px solid var(--color-text-01);
    --search-box-font-size-base: var(--font-size-16);

    margin-bottom: calc(var(--gap-base) * 4);

    & .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--search-box-font-size-base);
        font-weight: var(--font-weight-light);

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

        & .total-count {
            color: var(--color-text-03);

            & strong {
                font-weight: var(--font-weight-normal);
                color: var(--color-main-02);
            }
        }

        & form {
            display: grid;
            grid-template-columns: repeat(3, auto);
            gap: calc(var(--gap-base) * 2);
            width: fit-content;

            & :where(select, input[type="text"]) {
                padding: 
                    0
                    calc(var(--gap-base) * 2)
                ;
                color: var(--color-text-03);
                letter-spacing: -0.05rem;
            }
            
            & select {
                max-width: 80px;
                border-bottom: var(--search-box-border);
            }
            & input[type="text"] {
                max-width: 240px;
                border-bottom: var(--search-box-border);

                &::placeholder {
                    color: inherit;
                }
            }
            & button {
                max-width: 80px;
                padding: 
                    calc(var(--gap-base) * 1.8)
                    calc(var(--gap-base) * 4)
                ;
                border-radius: var(--board-border-radius);
                background-color: var(--color-main-02);
                font-size: calc(var(--search-box-font-size-base) * 1.125);
                font-weight: var(--font-weight-bold);
                color: var(--color-main-white);
                line-height: 1;
                letter-spacing: -0.1rem;

                @media screen and (max-width: 640px) {
                    font-size: calc(var(--search-box-font-size-base) * 0.875);
                    letter-spacing: -0.025rem;
                }
            }
        }

        @media screen and (max-width: 600px) {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--gap-base) * 8);

            & .total-count {order: 2;}
            & form {
                grid-template-columns: 1fr 2.7fr auto;
                width: 100%;
                
                & :where(select, input[type="text"]) {padding-block: 5px;}
                & select {max-width: 100%;}
                & input[type="text"] {max-width: 100%;}
            }
        }
    }
}


/* =====================================================
// 게시판 그리드 형태 페이지
===================================================== */
#grid-board {
    --item-gap-multifly: 4;
    --column-gap-multifly: 8;
    --row-gap-multifly: 12;
    --grid-board-column-gap: calc(var(--gap-base) * var(--column-gap-multifly));
    --grid-board-row-gap: calc(var(--gap-base) * var(--row-gap-multifly));

    @media screen and (max-width: 1100px) {
        --item-gap-multifly: 2;
        --column-gap-multifly: 4;
        --row-gap-multifly: 6;
    }
    
    & .grid-board-wrap {
        --grid-column-num: 4;

        display: grid;
        grid-template-columns: repeat(var(--grid-column-num), 1fr);
        column-gap: var(--grid-board-column-gap);
        row-gap: var(var(--grid-board-row-gap));

        & .grid-board-item {
            --item-gap: calc(var(--gap-base) * var(--item-gap-multifly));

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--item-gap);
            padding-bottom: var(--item-gap);

            & .item-img-bx {
                overflow: hidden;
                width: 100%;
                
                & img {
                    width: 100%;
                    transition: transform .8s ease;
                }

                &:hover img {transform: scale(1.15);}
            }
            & h2 {
                font-size: clamp(var(--font-size-16, 1.06vw, var(--font-size-18)));
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-mid);
                text-align: center;
            }
        }
        @media screen and (max-width: 800px) {
            --grid-column-num: 3;
        }
        @media screen and (max-width: 480px) {
            --grid-column-num: 2;
        }
    }
}


/* =====================================================
// 게시판 리스트 형태 페이지
===================================================== */
#list-board {

    & .inner {

        & .list-board-wrap {
            --col-w-base: clamp(40px, 9.09090909vw, 100px);

            --col-num-w: calc(var(--col-w-base) * 1.3);
            --col-title-w: auto;
            --col-author-w: calc(var(--col-w-base) * 1.5);
            --col-date-w: calc(var(--col-w-base) * 1.7);
            --col-views-w: var(--col-w-base);
            --list-padding: calc(var(--gap-base) * 4) 0;

            & li {
                display: grid;
                border-bottom: 1px solid var(--color-line-01);

                @media screen and (max-width: 640px) {
                    &:nth-child(2) {border-top: 2px solid var(--color-text-01);}
                }

                &.notice {
                    background-color: var(--color-board-02);
                    font-weight: var(--font-weight-regular);

                    & .notice-mark {
                        padding: 
                            calc(var(--gap-base) * 1)
                            calc(var(--gap-base) * 3)
                        ;
                        border-radius: var(--border-radius-board);
                        background-color: var(--color-main-02);
                        font-size: calc(var(--list-font-size-base) * 0.9375);
                        color: var(--color-main-white);
                    }
                }

                & :not(.col-title) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                }
                &:first-child .col-title {
                    text-align: center;
                    line-height: 1;
                }
                &:not(:first-child) .col-title {
                    padding: var(--list-padding);

                    &.new {
                        transform: translateY(2px);

                        & .new-mark {transform: translateY(-2px);}
                    }
                }
                &:not(:first-child) :not(:where(.col-title, .col-author)) {color: var(--color-text-board-01);}

                & .col-title {
                    display: inline-block;        
                    white-space: nowrap;    
                    overflow: hidden;       
                    text-overflow: ellipsis;
                    text-align: left;
                }

                font-size: var(--list-font-size-base);
            }

            &.notice-wrap {

                & li {
                    grid-template-columns: 
                        var(--col-num-w)
                        1fr
                        1fr
                    ;

                    & .col-meta {
                        display: grid;
                        grid-template-columns: 
                            var(--col-author-w)
                            var(--col-date-w)
                            var(--col-views-w)
                        ;
                        margin-left: auto;
                    }

                    @media screen and (max-width: 640px) {
                        grid-template:
                            "num title title" auto
                            "meta meta meta" auto
                            / auto 1fr 1fr
                        ;
                        & .col-num {
                            grid-area: num;
                            padding-left: calc(var(--gap-base) * 2);
                        }
                        & .col-title {
                            grid-area: title;
                            font-weight: var(--font-weight-regular);
                            padding-left: calc(var(--gap-base) * 2);
                        }
                        & .col-meta {
                            --meta-gap: calc(var(--gap-base) * 4);

                            grid-area: meta;
                            padding-block-end: calc(var(--gap-base) * 4);
                            padding-inline: calc(var(--gap-base) * 2);

                            display: flex;
                            justify-content: flex-start;
                            gap: var(--meta-gap);
                            margin-left: unset;
                            font-weight: var(--font-weight-light);

                            & > * {place-self: start;}
                            & > *:not(:last-child) {
                                position: relative;

                                &::after {
                                    position: absolute;
                                    right: calc(var(--meta-gap) / -2);
                                    width: 1px;
                                    height: 100%;
                                    background-color: var(--color-line-01);
                                    content: '';
                                }
                            }

                            & .col-views {
                                display: flex;
                                align-items: center;
                                gap: var(--gap-base);
                                width: fit-content;
                                place-self: end;

                                &::before {
                                    flex-shrink: 0;
                                    content: '조회수';
                                }
                            }
                        }

                        &:not(.notice) .col-num {display: none;}
                    }
                }
            }

            & .list-board-header {
                background-color: var(--color-main-02);
                color: var(--color-main-white);
                padding: var(--list-padding);

                @media screen and (max-width: 640px) {
                    display: none;
                }
            }
        }
    }
}



/* =====================================================
// 게시판 상세 보기 페이지
===================================================== */
#board-view {
    --view-font-size-base: var(--font-size-16);

    padding: var(--content-vertical-gap-big) 0;

    @media screen and (max-width: 640px) {
        padding: var(--content-vertical-gap-sm) 0;
    }
    @media screen and (max-width: 480px) {
        --view-font-size-base: var(--font-size-14);
    }

    & .inner {

        & .board-view-wrap {

            /* ========================== header ========================== */
            & .board-view-header {
                display: flex;
                justify-content: center;
                /* align-items: center; */
                align-items: flex-start;
                gap: calc(var(--gap-base) * 2);

                padding: 
                    calc(var(--gap-base) * 6) 
                    10px
                ;
                border-top: 2px solid var(--color-text-01);
                border-bottom: 1px solid var(--color-line-01);
                background-color: var(--color-board-01);

                & .board-mark {
                    flex-shrink: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 
                        calc(var(--gap-base) * 1.2)
                        calc(var(--gap-base) * 4)
                    ;
                    border-radius: var(--border-radius-board);
                    background-color: var(--color-main-02);
                    font-family: var(--font-family-granville);
                    font-size: calc(var(--view-font-size-base) * 0.9375);
                    color: var(--color-main-white);
                    letter-spacing: 0;
                    text-transform: capitalize;
                }
                
                & h2 {
                    font-size: calc(var(--view-font-size-base) * 1.125);
                    font-weight: var(--font-weight-regular);
                    line-height: var(--line-height-mid);
                }
            }

            /* ========================== meta ========================== */
            & .board-view-meta {
                display: flex;
                align-items: center;
                padding: 
                    calc(var(--gap-base) * 4)
                    calc(var(--gap-base) * 5)
                ;
                border-bottom: 1px solid var(--color-line-01);
                font-weight: var(--font-weight-light);

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

                & .meta-base {
                    --meta-base-gap: calc(var(--gap-base) * 6);

                    display: flex;
                    align-items: center;
                    gap: var(--meta-base-gap);

                    & .meta-name {
                        position: relative;

                        &::after {
                            position: absolute;
                            top: 50%;
                            right: calc(var(--meta-base-gap) / -2);
                            transform: translateY(-50%);
                            width: 1px;
                            height: 80%;
                            background-color: var(--color-line-01);
                            content: '';
                        }
                    }
                }
                & .meta-views {margin-left: auto;}
            }

            /* ========================== body ========================== */
            & .board-view-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: var(--mobile-content-vertical-gap-sm);
                
                @media screen and (max-width: 480px) {
                    font-size: var(--view-font-size-base);
                }

                & img {
                    width: 100%;
                    max-width: 700px;
                }
            }
            & .board-view-navigation {

                & ul {

                    & li {
                        
                        & a {
                            display: flex;
                            align-items: center;
                            gap: calc(var(--gap-base) * 8);

                            padding: calc(var(--gap-base) * 4);
                            border-width: 1px 0;
                            border-style: solid;
                            border-color: var(--color-line-01);
                            font-size: var(--view-font-size-base);

                            &:last-child {margin-top: -1px;}

                            &.no-page {cursor: unset;}

                            & em {
                                display: flex;
                                align-items: center;
                                gap: var(--gap-base);
                                line-height: var(--line-height-mid);
                                word-break: keep-all;
                            }
                        }
                    }
                }
            }
            & .board-view-btn-bx {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: var(--mobile-content-vertical-gap-sm);

                & a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 
                        calc(var(--gap-base) * 4)
                        calc(var(--gap-base) * 8)
                    ;
                    border-radius: var(--border-radius-board);
                    background-color: var(--color-main-02);
                    color: var(--color-main-white);
                }
            }
        }
    }
}


/* =====================================================
// 게시판 페이지네이션
===================================================== */
.board-pagination {
    
    & .inner {

        & ul {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: calc(var(--gap-base) * 1);
            margin-top: var(--content-vertical-gap-sm);

            & li {
                --pagination-w: 36px;

                display: flex;
                justify-content: center;
                align-items: center;
                width: var(--pagination-w);
                aspect-ratio: 1/1;
                border-radius: 50%;
                font-weight: var(--font-weight-regular);

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