@charset "utf-8";

/* ============================================================
   커스텀 디자인 오버라이드 (extend/zz_custom_design.extend.php가 주입)
   코어 업데이트에 안전 — 여기에만 작성할 것

   [사이드바 메뉴 - 티스토리 CustomSkin 이식]
   원본: CustomSkin style.css의 #sidebar / .widget-category
   - 사이드바는 원본처럼 아래 고정(bottom:0) + 높이 95vh
     → 위쪽 5vh는 사이드바 "외부" 빈공간, 우상단 80px 라운드
   - 배경색은 관리자 디자인 설정을 따름 (PC: 헤더색, 모바일: 기존값)
   - 포인트색은 라공에디션 --primary-color 사용
   - 카테고리 항목별 밑줄(border-bottom)은 사용하지 않음
   - CATEGORY 제목(h3)은 적용하지 않음
   ============================================================ */

:root {
    --ts-text-dark: #333333;    /* --color-text-dark */
    --ts-text-light: #5d5d5d;   /* --color-text-light */
    --ts-hover-bg: rgba(223, 208, 187, 0.4);     /* 항목 호버 배경 */
}

/* ============================================================
   PC 사이드바 (#hd) — 상시 노출 유지
   ============================================================ */

/* 원본 #sidebar: position fixed; bottom 0; height 95vh;
   padding 40px 0 20px; border-top-right-radius 80px; shadow */
#hd {
    top: auto;
    bottom: 0;
    height: 90vh;
    border-top-right-radius: 80px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

#hd #hd_wrapper {
    padding-top: 40px;
}

#hd #hd_menu {
    height: auto;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

#hd #main_menu_list {
    width: 100%;
}

#hd .main_me {
    width: 100%;
    margin: 0 0 2px;
}

/* 원본: .widget-category ul li a (밑줄 제거 버전) */
#hd .main_me_link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ts-text-dark);
    text-align: left;
    border: 0;
    border-radius: 0;
    transition: 0.2s;
    position: relative;
}

#hd .main_me_link i {
    font-size: 1em;
}

/* RA0 기존 밑줄 하이라이트(::after) 제거 */
#hd .main_me_link::after {
    display: none;
}

/* 원본: hover 시 배경 + 포인트색 + 들여쓰기 */
#hd .main_me_link:hover {
    transform: none;
    background: var(--ts-hover-bg);
    color: var(--primary-color);
    padding-left: 15px;
    border-radius: 12px;
}

#hd .main_me_link:hover i {
    transform: none;
}

/* ── PC 하위 메뉴: 클릭 팝업 대신 상시 노출 ── */
#hd .sub_me_list {
    display: block;
    position: static;
    min-width: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible;
    border-radius: 0;
    backdrop-filter: none;
    transition: none;
}

#hd .sub_me_box {
    transform: none !important;
    transition: none;
    gap: 0;
    width: 100%;
    padding: 0;
    backdrop-filter: none;
}

#hd .sub_me {
    margin: 0 0 2px;
    opacity: 1;
    transform: none;
    animation: none !important;
}

/* 원본: .sub_category_list li a (밑줄 제거 버전) */
#hd .sub_me_link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px 9px 25px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ts-text-light);
    text-align: left;
    border: 0;
    overflow: visible;
    transition: 0.2s;
    position: relative;
}

/* 원본: 하위 항목 '- ' 접두사 */
#hd .sub_me_link::before {
    content: '- ';
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 0.5;
    transition: none;
    z-index: auto;
}

/* RA0 기본 화살표 아이콘 제거 */
#hd .sub_me_link .fa-angle-right {
    display: none;
}

#hd .sub_me_link:hover {
    transform: none;
    background: var(--ts-hover-bg);
    color: var(--primary-color);
    padding-left: 15px;
}

#hd .sub_me_link:hover::before {
    width: auto;
}

/* ============================================================
   모바일 사이드바 (.mobile_sidebar) — 햄버거 토글 방식 유지,
   패널/항목 디자인만 티스토리 스킨과 동일하게
   ============================================================ */
@media (max-width: 768px) {

    /* 원본 #sidebar 모바일: width 80vw / max 340px / bottom 고정 95vh /
       우상단 80px 라운드 / 그림자 (배경은 RA0 기존값 유지) */
    .mobile_sidebar {
        top: auto;
        bottom: 0;
        height: 95vh;
        width: 80vw;
        max-width: 340px;
        left: -360px;
        border-top-right-radius: 80px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    .mobile_sidebar.active {
        left: 0;
    }

    /* 헤더(로고/닫기)는 고정, 메뉴(nav)만 내부 스크롤 */
    .mobile_sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile_sidebar_header {
        flex: 0 0 auto;
    }

    .mobile_sidebar_nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* 메뉴 사이드바 스크롤바 숨김
       (테마가 전역 ::-webkit-scrollbar 스타일을 쓰므로
        표준 scrollbar-width까지 함께 지정해야 확실히 사라짐) */
    .mobile_sidebar,
    .mobile_sidebar_nav {
        scrollbar-width: none;      /* Firefox / Chrome 121+ */
        -ms-overflow-style: none;   /* 구형 Edge/IE */
    }

    .mobile_sidebar::-webkit-scrollbar,
    .mobile_sidebar_nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* 상위 메뉴: PC와 동일한 티스토리 항목 디자인 */
    .mobile_menu_link {
        padding: 12px 20px;
        font-family: 'Pretendard', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--ts-text-dark);
        transition: 0.2s;
    }

    .mobile_menu_link:hover {
        background: var(--ts-hover-bg);
        color: var(--primary-color);
        padding-left: 25px;
    }

    /* 하위 메뉴: 아코디언 대신 상시 펼침 */
    .mobile_submenu {
        max-height: none;
        overflow: visible;
        background: transparent;
    }

    /* 펼침 화살표 불필요 */
    .submenu_arrow {
        display: none;
    }

    /* 항목별 밑줄 제거 */
    .mobile_submenu_item {
        border-bottom: 0;
    }

    .mobile_submenu_link {
        padding: 9px 20px 9px 35px;
        font-family: 'Pretendard', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: var(--ts-text-light);
        transition: 0.2s;
    }

    /* '- ' 접두사 + 기본 화살표 아이콘 제거 */
    .mobile_submenu_link::before {
        content: '- ';
        opacity: 0.5;
    }

    .mobile_submenu_link .fa-angle-right {
        display: none;
    }

    .mobile_submenu_link:hover {
        background: var(--ts-hover-bg);
        color: var(--primary-color);
        padding-left: 45px;
    }
}