[x-cloak] {
        display: none !important;
    }
    /*
    |--------------------------------------------------------------------------
    | 콘텐츠 표시 설정
    |--------------------------------------------------------------------------
    */
    html[data-image-preview="off"] .post-preview-image,
    html[data-image-preview="off"] .channel-preview-image,
    html[data-image-preview="off"] .editor-preview-image,
    html[data-image-preview="off"] .feed-preview-image {
        display: none !important;
    }
    html[data-channel-default-image="off"] .channel-default-image {
        display: none !important;
    }
    /*
    |--------------------------------------------------------------------------
    | 글꼴
    |--------------------------------------------------------------------------
    */
    html[data-font-family="system"] body {
        font-family: "Pretendard Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    }
    html[data-font-family="sans"] body {
        font-family: "Pretendard Variable", "Noto Sans KR", system-ui, sans-serif !important;
    }
    html[data-font-family="serif"] body {
        font-family: "Noto Serif KR", "Nanum Myeongjo", serif !important;
    }
    html[data-font-family="mono"] body {
        font-family: "D2Coding", "Consolas", monospace !important;
    }
    /*
    |--------------------------------------------------------------------------
    | 글자 크기
    |--------------------------------------------------------------------------
    */
    html[data-font-size="sm"] body {
        font-size: 14px;
    }
    html[data-font-size="base"] body {
        font-size: 16px;
    }
    html[data-font-size="lg"] body {
        font-size: 18px;
    }
    html[data-font-size="xl"] body {
        font-size: 20px;
    }
    /*
    |--------------------------------------------------------------------------
    | 배경
    |--------------------------------------------------------------------------
    */
    /* 배경 스킨은 public/css/change-skin.css에서 관리합니다. */
    /*
    |--------------------------------------------------------------------------
    | 페이지 폭 공통 변수
    |--------------------------------------------------------------------------
    */
    :root {
        --site-page-width: 960px;
        --community-board-width: 960px;
        --community-side-width: 180px;
        --community-layout-gap: 6px;
        --community-sticky-top: 50px;
    }
    html[data-page-width="960"] {
        --site-page-width: 960px;
        --community-board-width: 960px;
    }
    html[data-page-width="1100"] {
        --site-page-width: 1100px;
        --community-board-width: 1100px;
    }
    html[data-page-width="1200"] {
        --site-page-width: 1200px;
        --community-board-width: 1200px;
    }
    html[data-page-width="1280"] {
        --site-page-width: 1280px;
        --community-board-width: 1280px;
    }
    html[data-page-width="1440"] {
        --site-page-width: 1440px;
        --community-board-width: 1440px;
    }
    html[data-page-width="full"] {
        --site-page-width: 100%;
        --community-board-width: 100%;
    }
    /*
    |--------------------------------------------------------------------------
    | 공통 페이지 폭
    |--------------------------------------------------------------------------
    */
    .site-page-container {
        width: 100%;
        max-width: var(--site-page-width) !important;
        margin-left: auto;
        margin-right: auto;
    }
    html[data-page-width="full"] .site-page-container {
        max-width: none !important;
        width: 100% !important;
    }
    /*
    |--------------------------------------------------------------------------
    | 게시판 레이아웃
    |--------------------------------------------------------------------------
    | 게시판 파일 구조는 아래처럼 맞춰야 함.
    |
    | <div class="community-board-layout">
    |   <aside class="community-side-ad">...</aside>
    |   <main class="community-board-main">
    |       <div class="community-board-content">...</div>
    |   </main>
    |   <aside class="community-side-ad">...</aside>
    | </div>
    |--------------------------------------------------------------------------
    */
    .community-board-layout {
        width: 100%;
        max-width: calc(
            var(--community-board-width) +
            var(--community-side-width) * 2 +
            var(--community-layout-gap) * 2
        ) !important;
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        padding-top:6px;
        grid-template-columns:
            var(--community-side-width)
            minmax(0, var(--community-board-width))
            var(--community-side-width);
        gap: var(--community-layout-gap);
        align-items: start;
        overflow: visible;
    }
    .community-board-main {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;
    }
    .community-board-content {
        width: 100%;
        min-height: 700px;
        padding: 0;
    }
    /*
|--------------------------------------------------------------------------
| 게시판 좌우 광고 sticky
|--------------------------------------------------------------------------
| sticky는 aside 안쪽 div가 아니라 aside 자체에 적용합니다.
| 그래야 grid 레이아웃 안에서 스크롤 시 정상적으로 고정됩니다.
*/
.community-side-ad {
    display: block;
    width: var(--community-side-width);
    min-width: 0;
    position: sticky;
    top: var(--community-sticky-top);
    align-self: start;
    height: fit-content;
}
/*
|--------------------------------------------------------------------------
| 광고 내부 박스
|--------------------------------------------------------------------------
| 내부 div에는 sticky를 주지 않습니다.
| aside 자체가 sticky이므로 내부는 일반 block 상태로 둡니다.
*/
.community-side-ad-sticky,
.community-board-ad-sticky {
    position: static;
    top: auto;
    z-index: auto;
}
.community-side-ad img,
.community-board-ad-sticky img {
    display: block;
    max-width: 100%;
    height: auto;
}
    /*
    |--------------------------------------------------------------------------
    | 전체 폭
    |--------------------------------------------------------------------------
    */
    html[data-page-width="full"] .community-board-layout {
        max-width: none !important;
        grid-template-columns:
            var(--community-side-width)
            minmax(0, 1fr)
            var(--community-side-width);
    }
    /*
    |--------------------------------------------------------------------------
    | Tailwind 고정폭 강제 무력화
    |--------------------------------------------------------------------------
    | 게시판 파일에 max-w-[960px], w-full 같은 Tailwind가 남아 있어도
    | display-toolbar 설정이 우선 적용되게 함.
    |--------------------------------------------------------------------------
    */
    .community-board-layout > main.community-board-main {
        width: 100% !important;
        max-width: none !important;
    }
    .community-board-layout .community-board-content {
        max-width: none !important;
    }
    /*
    |--------------------------------------------------------------------------
    | 작은 화면 대응
    |--------------------------------------------------------------------------
    */
    @media (max-width: 1279px) {
        .community-board-layout {
            max-width: var(--community-board-width) !important;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 0;
        }
        html[data-page-width="full"] .community-board-layout {
            max-width: none !important;
        }
        .community-side-ad {
            display: none !important;
        }
    }
    @media (max-width: 1024px) {
        .community-board-layout {
            max-width: 100% !important;
            padding: 0;
        }
        .community-board-main {
            max-width: 100% !important;
        }
        .community-board-content {
            padding: 16px 12px 32px;
        }
    }
    /*
    |--------------------------------------------------------------------------
    | 상단 바 위치
    |--------------------------------------------------------------------------
    */
    html[data-topbar-position="fixed"] .site-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    html[data-topbar-position="normal"] .site-topbar {
        position: static;
    }
    html[data-topbar-position="hidden"] .site-topbar {
        display: none !important;
    }