@charset "utf-8";

/* 최초 페인트에서 트랜지션이 튀는 것만 막는다 (콘텐츠는 절대 숨기지 않는다 - SEO/CLS) */
body.no_ani .ham_btn,
body.no_ani .m_header,
body.no_ani .main_bx,
body.no_ani #content,
body.no_ani aside,
body.no_ani aside .aside{transition: none;}

/* ------------------------------------------------------------------ */
/* 레이아웃: 좌측 고정 네비 + 상단 고정 탭바 + 문서 전체 스크롤          */
/* ------------------------------------------------------------------ */

/* 페이지 콘텐츠 영역. ScrollSmoother 미사용 페이지가 여기서 오프셋을 받는다. */
.main_bx{padding-left: var(--sidebar-width); padding-top: var(--m_header-height); transition: padding-left .3s;}

/* ScrollSmoother 페이지는 #wrapper 가 뷰포트를 fixed 로 덮으므로,
   바깥의 main 이 문서 높이를 더해 스크롤이 남는 일이 없도록 자리를 비운다. */
.main_bx:has(> #wrapper){padding: 0;}

/* ScrollSmoother 사용 페이지. #wrapper 는 GSAP 이 뷰포트 전체 fixed 로 만들기 때문에
   오프셋은 실제로 스크롤되는 #content 가 가진다. */
#content{padding-left: var(--sidebar-width); padding-top: var(--m_header-height); transition: padding-left .3s;}

/* ------------------------------------------------------------------ */
/* 상단 탭바                                                           */
/* ------------------------------------------------------------------ */
.m_header{gap: 12px; background: #444; position: fixed; z-index: 98; top: 0; left: var(--sidebar-width); right: 0; height: var(--m_header-height); display: flex; align-items: center; justify-content: center; transition: left .3s;}
.m_h_content{text-decoration: none; overflow: unset; position: relative; cursor: pointer; transition: .3s; margin: 0; height: auto; width: 24px; aspect-ratio: 1/1; border-radius: 50%; background: #333; color: var(--accent-color); display: flex;align-items: center;justify-content: center;}
.m_h_content.on{background: #777;}
.m_h_content:hover{ transform: scale(1.11);}
.m_h_content i,
.m_h_content svg{width: 14px;aspect-ratio: 1/1;}
.m_h_content .x_btn{transition: .2s; overflow: hidden; position: absolute;z-index: 2;right: 5px;top: 5px;width: 0; aspect-ratio: 1/1; border-radius: 50%;background: #666; cursor: pointer;}
.m_h_content .x_btn:hover{transform: scale(1.1);}
.m_h_content:hover .x_btn{width: 10px;right: 0;top: 0;}
.m_h_content .x_btn::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; width: 6px;height: 1px;background: #fff;}
.m_h_content .x_btn::before{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; width: 6px;height: 1px;background: #fff;}
/* 탭이 하나뿐이면 닫기 버튼 숨김 */
.m_header:has(.m_h_content:nth-of-type(1):last-of-type) .m_h_content .x_btn {display: none;}
.m_header:has(.m_h_content:nth-of-type(2)) .m_h_content .x_btn {display: block;}

/* ------------------------------------------------------------------ */
/* 사이드바                                                            */
/* ------------------------------------------------------------------ */
aside{z-index: 99; transition: .3s; position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; height: 100dvh;}
aside .aside{left: 0; transition: .3s; position: relative; width: var(--sidebar-width); height: 100%; background: #444;display: flex;flex-direction: column;}
aside .s_header{padding: 20px 0; width: 100%;display: flex;align-items: center; justify-content: space-evenly;}
aside .copyright{color: #fff;font-size: 9px;padding: 6px 0;font-weight: 300;letter-spacing: .4px;}
aside .copyright .copyright_icon{color: var(--primary-color);}
/*  */
aside .profile{z-index: 3; position: relative; width: calc(50% - 40px); display: flex;align-items: center;justify-content: space-evenly;}
aside .profile::after{z-index: 2; content: '';display: block;width: 100%;height: 100%;top: 5px;right: 5px;background: var(--primary-color);position: absolute;}
aside .profile::before{z-index: 2; content: '';display: block;width: 100%;height: 100%;top: -5px;right: -5px;background: var(--accent-color);position: absolute;}
aside .profile img{width: 100%;height: auto;aspect-ratio: 1/1; position: relative; z-index: 3;}
aside .status_bx .title{font-size: 24px;font-weight: bold;color: #fff;}
aside .side_menu_bbx{overflow: auto; width: 100%;height: 100%;display: flex;flex-direction: column; align-items: center;justify-content: space-between;}
aside .side_menu_bbx ul{width: 100%; padding: 0 10px;gap: 4px;display: flex;flex-direction: column;}
aside .side_menu_bbx ul li{width: 100%;}
aside .side_menu_bbx ul li a{text-decoration: none; font-weight: bold; user-select: none; width: 100%;padding: 12px;transition: .2s;color: #fff;display: flex;align-items: center;gap: 12px;border-radius: 6px; cursor: pointer;}
aside .side_menu_bbx ul li a:hover{background: #555;}
aside .side_menu_bbx ul li .icon{width: 18px; aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
aside .side_menu_bbx ul li .icon svg{width: 100%;height: 100%;object-fit: contain; object-position: center;}

/* 현재 페이지 표시 - body 의 page-* 클래스로 서버가 정하므로 JS 깜빡임이 없다 */
body.page-home .side_menu_list .nav-home > a,
body.page-portfolio .side_menu_list .nav-portfolio > a,
body.page-lotto .side_menu_list .nav-lotto > a,
body.page-tarot .side_menu_list .nav-tarot > a{background: #555; pointer-events: none;}

/* ------------------------------------------------------------------ */
/* 햄버거 토글                                                          */
/* ------------------------------------------------------------------ */
.ham_btn{background: none; border: 0; padding: 0; transition: .3s; cursor: pointer; position: absolute;top: 4px;right: 4px;width: 21px; aspect-ratio: 1/1; display: flex;flex-direction: column;justify-content: space-around;}
.ham_btn span{position: relative; left: 0; transition: .2s; width: 100%;height: 3px;background: #fff;}
.ham_btn>div{display: flex;align-items: center;gap: 4px;}
.ham_btn:hover span:nth-child(2){left: -2px;}

body.ham aside{width: 0;}
body.ham aside .aside{left: calc(-1 * var(--sidebar-width)); opacity: 0;}
body.ham .ham_btn{right: -28px; opacity: 1;}
body.ham .m_header{left: 0;}
body.ham .main_bx,
body.ham #content{padding-left: 0;}

/* ==================================================================== */
/* 태블릿 (801 ~ 1200px) : 아이콘만 남는 레일 사이드바                     */
/* 예전에는 이 구간에서 네비가 통째로 사라져 햄버거로만 접근할 수 있었다.   */
/* ==================================================================== */
@media (min-width: 801px) and (max-width: 1200px) {
    aside,
    aside .aside { width: var(--sidebar-rail); }
    aside .aside { left: 0; opacity: 1; }

    aside .s_header {margin: 10px 0; flex-direction: column; padding: 34px 0 12px; gap: 8px; }
    aside .status_bx { display: none; }
    aside .profile { width: 34px; }
    aside .copyright { display: none; }

    aside .side_menu_bbx ul { padding: 0 8px; }
    aside .side_menu_bbx ul li a { justify-content: center; padding: 12px 0; gap: 0; }
    aside .side_menu_list .txt { display: none; }

    .ham_btn { right: 50%; transform: translateX(50%); }

    .m_header { left: var(--sidebar-rail); }
    .main_bx, #content { padding-left: var(--sidebar-rail); }

    /* 펼친 상태 = 데스크톱과 동일한 전체 사이드바 */
    body.ham aside,
    body.ham aside .aside { width: var(--sidebar-width); opacity: 1; left: 0; }
    body.ham aside .s_header { flex-direction: row; padding: 20px 0; gap: 0; }
    body.ham aside .status_bx { display: block; }
    body.ham aside .profile { width: calc(50% - 40px); }
    body.ham aside .copyright { display: block; }
    body.ham aside .side_menu_bbx ul { padding: 0 10px; }
    body.ham aside .side_menu_bbx ul li a { justify-content: flex-start; padding: 12px; gap: 12px; }
    body.ham .side_menu_list .txt { display: block; }
    body.ham .ham_btn { right: 4px; transform: none; }
    body.ham .m_header { left: var(--sidebar-width); }
    body.ham .main_bx,
    body.ham #content { padding-left: var(--sidebar-width); }
}

/* ==================================================================== */
/* 모바일 (~800px) : 오프캔버스 드로어                                    */
/* ==================================================================== */
@media (max-width: 800px) {
    aside{width: 100%;pointer-events: none;}
    aside .aside{left: calc(-1 * var(--sidebar-width)); width: min(var(--sidebar-width), 80%); opacity: 0;}
    body.ham aside{width: 100%;}
    body.ham aside .aside{left: 0; opacity: 1; pointer-events: all;}
    .m_header, body.ham .m_header { left: 0; }
    .main_bx, #content,
    body.ham .main_bx, body.ham #content { padding-left: 0; }

    /* 드로어가 열렸을 때 본문을 덮는 반투명 막 */
    body.ham aside::before{content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); pointer-events: all; z-index: -1;}

    /* 탭바와 햄버거는 손가락으로 누를 수 있는 크기로 */
    :root { --m_header-height: 44px; }
    .m_header { gap: 8px; padding: 0 8px; }
    .m_h_content { width: 32px; }
    .m_h_content svg { width: 17px; }

    .ham_btn{right: 4px; top: 4px; width: 44px; height: 44px; padding: 11px; pointer-events: all;}
}

/* 터치 기기: hover 가 없어 X 버튼을 띄울 방법이 없으므로 항상 보이게 한다. */
@media (hover: none) {
    .m_h_content:hover { transform: none; }
    .m_header:has(.m_h_content:nth-of-type(2)) .m_h_content .x_btn { width: 14px; right: -3px; top: -3px; }
}