@import url('https://fastly.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

/* =========================================================
   RA0 메뉴업 위젯
   · 기존 반투명 디자인 + 살짝 둥근 모서리
   · 하위 메뉴: 채널 목록형 (CH.01 아이콘 이름)
   · 호버 설명 자막
   · 기본 색은 라공에디션 테마 변수를 따라갑니다.
   ========================================================= */

/* =========================================================
   🎨 색 설정 (나중에 색을 바꾸고 싶으면 여기만 고치세요)
   ========================================================= */
.os-style-menu-widget {
    /* ── 메뉴 전용 고정 색 ── */
    --menu-pink: 196 220 238;   /* 연한 파스텔 분홍 #F9D8E4 (하위 메뉴 선택 막대, 설명창 바탕)
                                   ※ 숫자 3개는 빨강 초록 파랑(RGB) 값이에요.
                                     예: 하늘색 #C4DCEE로 바꾸려면 196 220 238 */

    /* ── 메인 메뉴창 ── */
    --menu-glass: 28%;          /* 바탕 진하기 (0%=완전 투명, 100%=불투명) */
    --menu-blur: 2px;           /* 뒤 배경 흐림 정도 (0px=흐림 없음) */

    /* ── 하위 메뉴창 ── */
    --sub-glass: 65%;           /* 바탕 진하기 (높을수록 뒤의 메인 메뉴가 덜 비침) */
    --sub-blur: 10px;           /* 뒤 배경 흐림 정도 */
}
/* ── 아래 색은 홈페이지 테마 색을 따라가요 ──
   (라공에디션 관리자의 테마 색 설정에서 바꾸면 홈페이지 전체가 같이 바뀌어요)
   --primary-color   : 메뉴 글자, 아이콘, 설명창 글자, 헤더 글자
   --secondary-color : 메인 메뉴에 마우스를 올리거나 선택했을 때 아이콘 색
   --card-bg-color   : 메뉴창·하위 메뉴창 바탕색
   --card-border-color : 메뉴창 테두리 */


.os-style-menu-widget {
    border-radius: 4px;
    box-shadow: 0 3px 2px rgb(from var(--black) r g b / 30%);
    overflow: visible;
    width: auto;
    min-width: 120px;
    font-family: galmuri9;
    margin: 0 auto;
    position: fixed;
    top: 30%;
    left: 5%;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    backdrop-filter: blur(var(--menu-blur));
    -webkit-backdrop-filter: blur(var(--menu-blur));
    border: 1px solid var(--card-border-color);
    z-index: 100000;
}

/* 반투명 배경 (카드 배경색 28%) */
.os-style-menu-widget::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    background: rgb(from var(--card-bg-color) r g b / var(--menu-glass));
    border-radius: 4px;
}

/* ---------- 헤더 ---------- */
.os-style-menu-widget .menu-header {
    text-align: left;
    padding: 2px 6px 0px;
    font-size: 11px;
    font-weight: 500;
    color: rgb(from var(--primary-color) r g b / 90%);
    font-family: galmuri11;
    z-index: 1;
    min-height: 20px;
    cursor: grab;
    user-select: none;
    background: rgb(from var(--card-bg-color) r g b / 30%);
    border-radius: 4px 4px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.os-style-menu-widget .menu-header:active {
    cursor: grabbing;
}

/* ---------- 사용자 정보 서브메뉴 ---------- */
.user-info-submenu {
    position: absolute;
    top: 25px;
    left: 15px;
    width: 150px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(from var(--primary-color) r g b / 50%);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.user-info-submenu.active::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    background: var(--card-bg-color);
    border-radius: 3px;
    opacity: 0.7;
    z-index: -1;
}

.user-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: color 0.2s;
    padding: 10px;
    margin: -10px;
}

.user-info-btn:hover {
    color: rgb(from var(--primary-color) r g b / 90%);
}

.user-info-submenu.active {
    display: block;
}

.user-info-item {
    padding: 4px 6px;
    transition: background-color 0.2s;
}

.user-info-item:hover {
    color: rgb(from var(--secondary-color) r g b / 10%);
    background-color: rgb(from var(--primary-color) r g b / 20%);
}

.user-info-item a {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
}

.user-info-item span {
    font-family: 'Galmuri11';
    font-size: 11px;
}

.user-info-item a:hover {
    color: var(--secondary-color);
}

.user-info-item i {
    margin-right: 3px;
    width: 16px;
    text-align: center;
}

/* ---------- 메인 메뉴 ---------- */
.os-style-menu-widget .main-menu {
    list-style: none;
    padding: 5px 8px 8px 8px;
    margin: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    box-sizing: border-box;
}

.os-style-menu-widget .menu-item.center-align {
    grid-column: 1 / span 2;
    width: 60px;
    margin: 0 auto;
}

.os-style-menu-widget .menu-item.center-align > a,
.os-style-menu-widget .menu-item.center-align .folder-item {
    justify-content: center;
}

.os-style-menu-widget .menu-item {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
}

.os-style-menu-widget .menu-item > a,
.os-style-menu-widget .folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    padding: 5px 0px;
}

.os-style-menu-widget .menu-item > a:hover,
.os-style-menu-widget .folder-item:hover,
.os-style-menu-widget .menu-item.active > a,
.os-style-menu-widget .main-menu > .menu-item.open > .folder-item {
    background-color: rgb(from var(--primary-color) r g b / 15%);
}

.os-style-menu-widget .menu-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.9;
    color: rgb(from var(--primary-color) r g b / 80%);
    transition: transform 0.2s ease, color 0.2s ease;
    position: relative;
}

.os-style-menu-widget .menu-item > a:hover .menu-icon,
.os-style-menu-widget .folder-item:hover .menu-icon,
.os-style-menu-widget .main-menu > .menu-item.open > .folder-item .menu-icon {
    color: var(--secondary-color);
    transform: scale(1.1);
}

.os-style-menu-widget .menu-item > a:active .menu-icon,
.os-style-menu-widget .folder-item:active .menu-icon {
    animation: icon-pop 0.5s ease;
}

@keyframes icon-pop {
    0% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1.6);
    }
    100% {
        transform: scale(1.0);
    }
}

.os-style-menu-widget .menu-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.os-style-menu-widget .menu-icon i {
    font-size: 1.2rem;
}

.os-style-menu-widget .menu-text {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    font-family: galmuri9;
    opacity: 0.85;
    font-weight: 400;
    max-width: 100%;
    line-height: 1.2;
    color: var(--primary-color);
}

/* 권한이 없는 메뉴 */
.menu-restricted {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.menu-restricted a:hover,
.menu-restricted .folder-item:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

/* 구분선 (기존과 동일) */
.os-style-menu-widget .menu-divider {
    height: 1px;
    background-color: rgb(from var(--card-border-color) r g b / 15%);
    grid-column: 1 / span 2;
}

.os-style-menu-widget .submenu-indicator {
    position: absolute;
    top: 2px;
    right: 1px;
    transition: transform 0.2s ease;
    opacity: 0.6;
    font-size: 8px;
    background: rgb(from var(--black) r g b / 30%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.os-style-menu-widget .menu-item.open > .folder-item .submenu-indicator {
    transform: rotate(90deg);
}

.os-style-menu-widget .full-width-item {
    grid-column: 1 / span 2;
}

/* 번호를 3자리(001, 101 ...)로 표시하기 위한 규칙 */
@counter-style vf-pad3 {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    pad: 3 "0";
}

/* =========================================================
   하위 메뉴: 채널 목록형
   · 메뉴가 화면 왼쪽에 있으면 → 왼쪽에서 오른쪽으로 펼쳐짐
   · 메뉴가 화면 오른쪽에 있으면 → 오른쪽에서 왼쪽으로 펼쳐짐
   ========================================================= */
.os-style-menu-widget .sub-menu {
    list-style: none;
    padding: 4px;
    margin: 0;
    position: absolute;
    left: 100%;
    top: 0;
    width: max-content;
    min-width: 120px;
    display: block;
    background: rgb(from var(--card-bg-color) r g b / var(--sub-glass));
    border-radius: 4px;
    box-shadow: 0 3px 2px rgb(from var(--black) r g b / 30%);
    backdrop-filter: blur(var(--sub-blur));
    -webkit-backdrop-filter: blur(var(--sub-blur));
    border: 1px solid var(--card-border-color);
    z-index: 100;
    counter-reset: vf-ch;
    /* 닫힌 상태: 가로 폭 0 (왼쪽 기준) */
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s 0.25s;
}

/* 메뉴가 화면 오른쪽에 있으면 오른쪽 기준으로 펼침 */
.os-style-menu-widget.vf-right .sub-menu {
    transform-origin: right center;
}

.os-style-menu-widget .menu-item:nth-child(even) .sub-menu {
    left: auto;
    right: 100%;
}

.os-style-menu-widget .menu-item.open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s;
}

.os-style-menu-widget .sub-menu > li {
    counter-increment: vf-ch;
}

/* 한 줄: NO.001  아이콘  이름 */
.os-style-menu-widget .sub-menu .menu-item > a,
.os-style-menu-widget .sub-menu .folder-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
    padding: 3px 8px 3px 5px;
    font-size: 10px;
    text-align: left;
}

/* 채널 번호 (자동으로 매겨짐) */
.os-style-menu-widget .sub-menu .menu-item > a::before,
.os-style-menu-widget .sub-menu .folder-item::before {
    content: "NO." counter(vf-ch, vf-pad3);
    flex-shrink: 0;
    font-family: galmuri9;
    font-size: 8px;
    color: var(--primary-color);
    opacity: 0.55;
}

.os-style-menu-widget .sub-menu .menu-icon {
    width: 14px;
    height: 14px;
}

.os-style-menu-widget .sub-menu .menu-icon i {
    font-size: 0.75rem;
}

.os-style-menu-widget .sub-menu .menu-text {
    overflow: visible;
}

/* 하위 메뉴 글자·아이콘: 메인 메뉴와 같은 색 */
.os-style-menu-widget .sub-menu .menu-icon {
    color: rgb(from var(--primary-color) r g b / 80%);
}

/* 선택 막대: 연한 파스텔 분홍 */
.os-style-menu-widget .sub-menu .menu-item > a:hover,
.os-style-menu-widget .sub-menu .folder-item:hover {
    background-color: rgb(var(--menu-pink) / 85%);
}

.os-style-menu-widget .sub-menu li:hover .menu-icon,
.os-style-menu-widget .sub-menu li:hover .menu-text,
.os-style-menu-widget .sub-menu li:hover > a::before,
.os-style-menu-widget .sub-menu li:hover > .folder-item::before {
    color: var(--primary-color);
    opacity: 1;
}

.os-style-menu-widget .sub-menu li:hover .menu-icon {
    transform: none;
}

/* =========================================================
   호버 설명 자막 (하위 메뉴: 옆 / 메인 메뉴: 아래)
   ========================================================= */
.os-style-menu-widget .sub-desc,
.os-style-menu-widget .main-desc {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: 110;
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: 190px;
    padding: 5px 9px;
    font-family: galmuri9;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    word-break: keep-all;
    color: var(--primary-color);
    background: rgb(var(--menu-pink) / 85%);
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 3px;
    box-shadow: 0 3px 6px rgb(from var(--black) r g b / 15%);
    backdrop-filter: blur(var(--menu-blur));
    -webkit-backdrop-filter: blur(var(--menu-blur));
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-50%);
}

/* 메인 메뉴 설명: 칸 바로 아래 가운데 */
.os-style-menu-widget .main-desc {
    top: calc(100% + 4px);
    left: 50%;
    max-width: 160px;
    text-align: center;
    transform: translateX(-50%);
}

.os-style-menu-widget .main-menu > .menu-item > a:hover ~ .main-desc,
.os-style-menu-widget .main-menu > .menu-item > .folder-item:hover ~ .main-desc {
    visibility: visible;
    opacity: 1;
    animation: vf-typing 0.35s steps(8) both;
}

/* 깜빡이는 입력 커서 _ */
.os-style-menu-widget .sub-desc::after,
.os-style-menu-widget .main-desc::after {
    content: "_";
    margin-left: 2px;
    animation: vf-caret-blink 0.8s steps(1) infinite;
}

@keyframes vf-caret-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 메뉴가 화면 오른쪽에 있으면 자막도 왼쪽으로 */
.os-style-menu-widget.vf-right .sub-desc {
    left: auto;
    right: calc(100% + 10px);
}

/* 호버 시 타자 치듯 드러남 */
.os-style-menu-widget .sub-menu > .menu-item:hover > .sub-desc {
    visibility: visible;
    opacity: 1;
    animation: vf-typing 0.35s steps(8) both;
}

@keyframes vf-typing {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* ---------- 최소화 버튼 ---------- */
.os-style-menu-widget .menu-minimize-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 14px;
    height: 14px;
    font-size: 10px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-border-color);
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 1px solid;
    transition: background-color 0.2s;
    border-color: rgb(from var(--card-border-color) r g b / 70%);
}

.os-style-menu-widget .menu-minimize-btn:hover {
    background-color: var(--secondary-color);
}

.os-style-menu-widget.minimized .main-menu {
    display: none;
}

.os-style-menu-widget.minimized .menu-minimize-btn i {
    transform: rotate(90deg);
}

/* 닉네임을 드래그 핸들로 스타일링 */
.os-style-menu-widget .user-nickname {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}

/* 모바일 환경에서 닉네임 드래그 핸들 강화 */
@media screen and (max-width: 768px) {
    .os-style-menu-widget .user-nickname {
        padding: 3px 7px;
        position: relative;
        display: inline-block;
    }
    .os-style-menu-widget .user-nickname::before {
        content: '⋮⋮';
        margin-right: 5px;
        opacity: 0.5;
        font-size: 10px;
        vertical-align: middle;
        position: absolute;
        left: 0;
    }
}

/* 모바일 토글 버튼 */
#mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: rgb(from var(--secondary-color) r g b / 85%);
    color: var(--primary-color);
    border-radius: 50%;
    z-index: 1000;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

#mobile-menu-toggle:hover {
    background: rgb(from var(--primary-color) r g b / 85%);
    color: var(--secondary-color);
}

@media screen and (max-width: 768px) {
    #mobile-menu-toggle {
        display: flex;
    }

    /* 메뉴 위젯 초기 상태 (화면 밖으로) */
    .os-style-menu-widget {
        position: fixed;
        top: 80px !important;
        left: -300px !important;
        transform: scale(1.3) !important;
        transition: left 0.3s ease;
    }

    /* 메뉴 활성화 상태 */
    .os-style-menu-widget.active {
        left: 30px !important;
    }

    /* 모바일은 호버가 없으므로 설명 자막 숨김 */
    .os-style-menu-widget .sub-desc,
    .os-style-menu-widget .main-desc {
        display: none;
    }
}