/* ===========================
   사이드바 기본 구조
=========================== */
#sidebar {
    --sidebar-center-spacer: 200px;

    width:
        var(--sidebar-width);

    min-width:
        var(--sidebar-width);

    min-height: 100vh;

    padding:
        32px
        var(--sidebar-gap);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        var(
            --sidebar-bg-color,
            #ffdea8
        );

    color:
        var(
            --sidebar-text-color,
            #333333
        );
}

.sidebar-inner {
    width: 100%;

    min-height:
        calc(
            100vh -
            64px
        );

    display: grid;

    grid-template-rows:
        var(--sidebar-center-spacer)
        minmax(max-content, 1fr)
        var(--sidebar-center-spacer);

    align-items: stretch;

    margin: 0;
    padding: 0;
}

/* ===========================
   사이드바 대표 이미지
=========================== */
.sidebar-profile {
    grid-row: 1;

    width:
        var(--sidebar-inner-width);

    display: flex;
    align-items: center;
    justify-content: center;

    align-self: center;
    justify-self: center;

    margin: 0;
}

.sidebar-profile-link {
    display: block;

    width: 130px;
    height: 130px;

    flex:
        0 0 130px;

    overflow: hidden;

    border:
        1px solid
        rgba(51, 51, 51, 0.25);

    border-radius: 50%;

    background: transparent;
}

.sidebar-profile-image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;

    transition:
        transform 0.25s ease;
}

.sidebar-profile-link:hover
.sidebar-profile-image {
    transform:
        scale(1.04);
}

.sidebar-profile[data-profile-visible="show"] {
    display: flex;
}

.sidebar-profile[data-profile-visible="hide"] {
    display: none;
}

/* ===========================
   중앙 탐색 영역
=========================== */
.sidebar-navigation-group {
    grid-row: 2;

    width:
        var(--sidebar-inner-width);

    min-width: 0;

    align-self: center;
    justify-self: center;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    margin: 0;
    padding: 8px 0;

    overflow: visible;
}

/* ===========================
   대표 이미지 숨김 공통 구조
   데스크톱·모바일 공통 적용
=========================== */
.sidebar-inner.sidebar-profile-hide {
    width: 100%;

    min-height:
        calc(
            100vh -
            64px
        );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    margin: 0;
    padding: 0;
}

/*
 * 대표 이미지와 해당 영역을
 * 레이아웃에서 완전히 제거합니다.
 */
.sidebar-inner.sidebar-profile-hide
.sidebar-profile {
    display: none;

    width: 0;
    height: 0;

    margin: 0;
    padding: 0;
}

/*
 * 위·아래 자동 여백을 사용해
 * 탐색 그룹을 뷰포트 세로 중앙에 배치합니다.
 *
 * 탐색 그룹이 화면보다 길면
 * 자동 여백은 0으로 줄고 사이드바 전체가 스크롤됩니다.
 */
.sidebar-inner.sidebar-profile-hide
.sidebar-navigation-group {
    position: static;

    grid-row: auto;

    flex:
        0 0 auto;

    align-self: center;
    justify-self: auto;

    width:
        var(--sidebar-inner-width);

    min-width: 0;
    max-width: 100%;

    min-height: 0;
    max-height: none;

    margin-top: auto;
    margin-right: 0;
    margin-bottom: auto;
    margin-left: 0;

    padding: 0;

    overflow: visible;

    transform: none;
}

/* ===========================
   탐색 영역 공통 너비
=========================== */
.sidebar-navigation-group
.search-box,

.sidebar-navigation-group
.nav-menu,

.sidebar-navigation-group
.admin-subscribe-link {
    width: 100%;

    margin-right: 0;
    margin-left: 0;
}

.search-box,
.nav-menu {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* ===========================
   구독 링크
=========================== */
.admin-subscribe-link {
    margin-top: 0;
    margin-bottom: 8px;

    font-size: 12px;
    text-align: left;
}

/* ===========================
   검색창
=========================== */
.search-box input {
    width: 100%;

    padding: 8px;

    border:
        1px solid
        #aaaaaa;

    border-radius: 4px;

    background: #ffffff;

    color:
        var(
            --sidebar-text-color,
            #333333
        );

    font-size: 14px;
}

.search-box input:focus-visible {
    border-color:
        var(
            --sidebar-hover-color,
            #d28a2e
        );

    outline:
        2px solid
        rgba(210, 138, 46, 0.25);

    outline-offset: 1px;
}

/* ===========================
   기본 메뉴
=========================== */
.nav-menu ul,
.category-menu ul {
    list-style: none;
}

.nav-menu > ul > li,
.category-menu > ul > li {
    margin: 10px 0;

    font-weight: 700;
}

.nav-menu .sub,
.category-menu ul ul {
    margin-left: 10px;
}

.nav-menu .sub li,
.category-menu ul ul li {
    margin: 5px 0;

    font-weight: 400;
}

.nav-menu a,
.category-menu a,
.admin-subscribe-link a {
    color:
        var(
            --sidebar-text-color,
            #333333
        );

    text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.category-menu a:hover,
.category-menu a:focus-visible,
.admin-subscribe-link a:hover,
.admin-subscribe-link a:focus-visible {
    color:
        var(
            --sidebar-hover-color,
            #d28a2e
        );

    opacity: 1;
}

/* ===========================
   티스토리 자동 카테고리 보정
=========================== */
.category-menu :is(
    .c_cnt,
    .cnt,
    .new,
    .ico_new,
    img[alt="N"],
    img[src*="new"]
) {
    display: none;
}

.category-menu .link_item {
    font-weight: 700;
}

.category-menu .link_sub_item {
    font-weight: 400;
}

/* ===========================
   전체 카테고리 링크 표시
=========================== */
.category-menu .link_tit {
    display: none;
}

body.is-all-category-layout-enabled
.category-menu .link_tit {
    display: inline-block;
}

body:not(.is-all-category-layout-enabled)
.category-menu .link_tit {
    display: none;
}

/* ===========================
   카테고리 접기·펼치기
=========================== */
.category-menu
.has-category-children {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    gap: 0;

    padding-right: 0;
}

.category-menu
.category-collapse-root {
    padding-right: 0;
}

.category-menu
.has-category-children
> .category-collapse-submenu {
    flex:
        0 0 100%;

    width: 100%;
    min-width: 100%;
}

.category-menu
.category-collapse-submenu {
    width: 100%;
}

.category-menu
.is-category-collapsed
> .category-collapse-submenu {
    display: none;
}

.category-menu
.is-category-expanded
> .category-collapse-submenu {
    display: block;
}

.category-menu
.category-collapse-root
> .category-collapse-submenu {
    display: block;
}

/* ===========================
   카테고리 삼각형 버튼
=========================== */
.category-collapse-toggle {
    position: static;

    flex:
        0 0 auto;

    width: 14px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(
            --sidebar-text-color,
            #333333
        );

    line-height: 1;
    vertical-align: middle;

    opacity: 0.72;
}

.category-collapse-toggle::before {
    content: "";

    display: block;

    width: 0;
    height: 0;

    margin-left: 2px;

    border-top:
        5px solid
        transparent;

    border-bottom:
        5px solid
        transparent;

    border-left:
        7.5px solid
        currentColor;

    transform:
        rotate(0deg);

    transform-origin:
        42% 50%;

    transition:
        transform 0.2s ease;
}

.is-category-expanded
> .category-collapse-toggle::before {
    transform:
        rotate(90deg);
}

.category-collapse-toggle:hover,
.category-collapse-toggle:focus-visible {
    color:
        var(
            --sidebar-hover-color,
            #d28a2e
        );

    opacity: 1;
}

.category-collapse-toggle:focus-visible {
    outline:
        2px solid
        var(
            --sidebar-hover-color,
            #d28a2e
        );

    outline-offset: 1px;
}

.category-collapse-root
> .category-collapse-toggle {
    display: none;
}

/* ===========================
   모바일 메뉴 버튼
=========================== */
#mobile-menu-btn {
    display: none;

    position: fixed;

    top: 15px;
    left: 15px;
    z-index: 4000;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(
            --sidebar-text-color,
            #333333
        );

    font-size: 28px;
    line-height: 1;

    text-align: center;
}

/* ===========================
   데스크톱 고정 사이드바
=========================== */
@media (min-width: 769px) {
    #layout {
        display: flex;
        align-items: flex-start;
    }

    #sidebar {
        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;

        height: auto;
        min-height: 0;
        max-height: none;

        overflow-x: hidden;
        overflow-y: auto;

        z-index: 30;
    }

    .sidebar-inner {
        min-height:
            calc(
                100vh -
                64px
            );
    }

    /*
     * 데스크톱에서도 대표 이미지가 숨김이면
     * 프로필용 그리드 행을 사용하지 않습니다.
     */
    .sidebar-inner.sidebar-profile-hide {
        min-height:
            calc(
                100vh -
                64px
            );

        display: flex;
    }

    .sidebar-inner.sidebar-profile-hide
    .sidebar-navigation-group {
        margin-top: auto;
        margin-bottom: auto;
    }

    #content {
        margin-left:
            var(--sidebar-width);
    }
}

/* ===========================
   모바일 사이드바
=========================== */
@media (max-width: 768px) {
    html,
    body {
        min-height: 100dvh;
    }

    #layout {
        display: block;

        min-height: 100dvh;
    }

    #sidebar {
        --sidebar-center-spacer: 160px;

        position: fixed;

        top: 0;
        left: 0;
        z-index: 3000;

        width:
            var(--sidebar-width);

        min-width:
            var(--sidebar-width);

        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;

        padding:
            28px
            var(--sidebar-gap);

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior:
            contain;

        touch-action:
            pan-y;

        transform:
            translate3d(-100%, 0, 0);

        transition:
            transform 0.3s ease;

        will-change:
            transform;
    }

    #sidebar.active {
        transform:
            translate3d(0, 0, 0);
    }

    html.sidebar-open,
    body.sidebar-open {
        height: 100dvh;

        overflow: hidden;

        overscroll-behavior:
            none;
    }

    .sidebar-inner {
        width: 100%;
        height: auto;

        min-height:
            calc(
                100dvh -
                56px
            );

        grid-template-rows:
            var(--sidebar-center-spacer)
            minmax(max-content, 1fr)
            var(--sidebar-center-spacer);
    }

    .sidebar-profile {
        width:
            var(--sidebar-inner-width);

        margin: 0;
    }

    .sidebar-profile-link {
        width: 103px;
        height: 103px;

        flex:
            0 0 103px;
    }

    .sidebar-navigation-group {
        width:
            var(--sidebar-inner-width);

        max-width: 100%;

        margin: 0;

        overflow: visible;
    }

    /*
     * 대표 이미지가 숨김이면 모바일에서도
     * 프로필 및 빈 그리드 행을 제거합니다.
     */
    .sidebar-inner.sidebar-profile-hide {
        width: 100%;
        height: auto;

        min-height:
            calc(
                100dvh -
                56px
            );

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        margin: 0;
        padding: 0;
    }

    .sidebar-inner.sidebar-profile-hide
    .sidebar-navigation-group {
        flex:
            0 0 auto;

        align-self: center;

        width:
            var(--sidebar-inner-width);

        min-width: 0;
        max-width: 100%;

        min-height: 0;
        max-height: none;

        margin-top: auto;
        margin-right: 0;
        margin-bottom: auto;
        margin-left: 0;

        padding: 0;

        overflow: visible;
    }

    #mobile-menu-btn {
        display: block;

        transform:
            translate3d(0, 0, 0);

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 0.28s ease,
            opacity 0.22s ease,
            visibility 0s linear 0s;

        will-change:
            transform,
            opacity;
    }

    #mobile-menu-btn.is-hidden-by-scroll {
        transform:
            translate3d(
                calc(-100% - 32px),
                0,
                0
            );

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 0.28s ease,
            opacity 0.22s ease,
            visibility 0s linear 0.28s;
    }

    html.sidebar-open
    #mobile-menu-btn,

    body.sidebar-open
    #mobile-menu-btn {
        transform:
            translate3d(0, 0, 0);

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 0.28s ease,
            opacity 0.22s ease,
            visibility 0s linear 0s;
    }

    .category-collapse-toggle {
        width: 18px;
        height: 24px;
    }

    .category-collapse-toggle::before {
        border-top-width: 5px;
        border-bottom-width: 5px;
        border-left-width: 7px;
    }

    #content {
        width: 100%;

        min-height: 100dvh;

        margin-left: 0;

        padding:
            70px
            20px
            40px;

        overflow-y: auto;

        touch-action:
            pan-y;
    }
}

/* ===========================
   높이가 작은 화면
=========================== */
@media (max-height: 680px) {
    #sidebar {
        --sidebar-center-spacer: 150px;
    }

    .sidebar-profile-link {
        width: 100px;
        height: 100px;

        flex:
            0 0 100px;
    }

    .sidebar-inner.sidebar-profile-hide
    .sidebar-navigation-group {
        margin-top: auto;
        margin-bottom: auto;
    }
}

/* ===========================
   모션 감소 환경
=========================== */
@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #mobile-menu-btn,
    #mobile-menu-btn.is-hidden-by-scroll,
    .sidebar-profile-image,
    .category-collapse-toggle::before {
        transition: none;
    }
}