/**
 * Transform Menu Widget - Additional Styles
 *
 * 기본 스타일은 menu_widget.php의 인라인 CSS로 처리됩니다.
 * 이 파일은 추가적인 테마/확장 스타일을 위한 것입니다.
 */

/* 기본 리셋 */
.tf-menu-widget * {
    box-sizing: border-box;
}

.tf-menu-widget ul,
.tf-menu-widget li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 애니메이션 효과 */
@keyframes tf-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tf-slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

@keyframes tf-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 호버 효과 변형 */
.tf-menu-widget .tf-menu-link {
    position: relative;
    overflow: hidden;
}

/* .tf-menu-widget .tf-menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease, left 0.3s ease;
}

.tf-menu-widget .tf-menu-link:hover::after {
    width: 100%;
    left: 0;
} */

/* 아이콘 애니메이션 */
.tf-menu-widget .tf-menu-icon i {
    transition: transform 0.3s ease;
}

.tf-menu-widget .tf-menu-link:hover .tf-menu-icon i {
    transform: scale(1.15);
}

/* 서브메뉴 화살표 회전 */
.tf-menu-widget .tf-submenu-indicator {
    transition: transform 0.3s ease;
}

/*
.tf-menu-widget .has-submenu.open .tf-submenu-indicator,
.tf-menu-widget .has-submenu:hover .tf-submenu-indicator {
    transform: rotate(180deg);
}
*/
.tf-menu-widget .has-submenu.open .tf-submenu-indicator {
    transform: rotate(180deg);
}

/* 포커스 스타일 (접근성) */
.tf-menu-widget .tf-menu-link:focus {
    outline: 2px solid var(--primary-color, #007bff);
    outline-offset: 2px;
}

.tf-menu-widget .tf-menu-link:focus:not(:focus-visible) {
    outline: none;
}

/* 드래그 핸들 스타일 개선 */
.tf-menu-widget .tf-drag-handle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tf-menu-widget .tf-drag-handle::before {
    content: '⋮⋮ ';
    letter-spacing: -2px;
}

/* 리사이즈 핸들 스타일 */
.tf-menu-widget .tf-resize-handle::before {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* 모바일 터치 피드백 */
@media (hover: none) {
    .tf-menu-widget .tf-menu-link:active {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .tf-menu-widget .tf-menu-link::after {
        display: none;
    }
}

/* 프린트 스타일 */
@media print {
    .tf-menu-widget {
        position: static !important;
        box-shadow: none !important;
    }

    .tf-menu-widget .tf-drag-handle,
    .tf-menu-widget .tf-resize-handle {
        display: none !important;
    }

    .tf-menu-widget .tf-submenu {
        position: static !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================
   세로형 하위 메뉴 사용자 설정
======================================== */

/* 하위 메뉴 표시용 다이아몬드 숨김 */
.tf-menu-widget .tf-submenu-indicator {
    display: none !important;
}

/* 하위 메뉴 아이콘 기본 크기 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu > .tf-submenu
.tf-menu-icon {
    transform: scale(0.8);
    transform-origin: center;
}

/* 하위 메뉴 호버 배경 제거 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu > .tf-submenu
.tf-menu-link:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 부모 메뉴와 하위 메뉴를 세로로 배치 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
}

/* 하위 메뉴를 부모 아이콘 바로 아래에 배치 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu > .tf-submenu {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    min-width: 0 !important;

    /* 하위 메뉴를 오른쪽으로 이동 */
    transform: translateX(30px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;

    /* 닫힌 상태 */
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    transition:
        max-height 0.3s ease,
        margin-top 0.3s ease,
        opacity 0.3s ease;
}

/* 기본 상태: 하위 메뉴 닫힘 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu > .tf-submenu {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* open 상태: 하위 메뉴 열림 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu.open > .tf-submenu {
    max-height: 300px !important;
    margin-top: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* 현재 페이지 때문에 자동으로 열린 하위 메뉴는 애니메이션 제거 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu.keep-open > .tf-submenu {
    transition: none !important;
}

/* 하위 메뉴 항목 위치 초기화 */
.tf-menu-widget.direction-column
.tf-menu-item.has-submenu > .tf-submenu > .tf-menu-item {
    width: 95px !important;
    min-width: 95px !important;
    text-align: left !important;
}

/* ========================================
   로그인·로그아웃·설정 버튼을 일반 메뉴와 동일하게
======================================== */

/* 버튼 항목의 전체 너비와 정렬 */
.tf-menu-widget.direction-column
.tf-btn-item {
    width: 95px !important;
    min-width: 95px !important;
}

/* 일반 메뉴와 동일한 링크 구조 */
.tf-menu-widget.direction-column
.tf-btn-item > .tf-menu-link {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;
    padding: 8px 12px !important;

    text-align: left !important;
}

/* 일반 메뉴 아이콘과 동일한 크기 */
.tf-menu-widget.direction-column
.tf-btn-item .tf-menu-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 로그인·로그아웃 아이콘 크기 */
.tf-menu-widget.direction-column
.tf-btn-item .tf-menu-icon i {
    font-size: 11px !important;
}

/* 로그인·로그아웃 글자 표시 + 크기 조정 */
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="login"] .tf-menu-text,
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="logout"] .tf-menu-text {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

/* 메뉴 설정·관리자 글자 숨김 */
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="settings"] .tf-menu-text,
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="admin"] .tf-menu-text {
    display: none !important;
}

.tf-menu-widget.direction-column
.tf-btn-item[data-btn="settings"],
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="admin"] {
    width: 54px !important;
    min-width: 54px !important;
}

/* 방명록과 로그인 사이 간격 */
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="login"],
.tf-menu-widget.direction-column
.tf-btn-item[data-btn="logout"] {
    margin-top: 24px !important;
}

/* 현재 보고 있는 게시판 메뉴 이름 */
.tf-menu-widget .tf-menu-link.is-current > .tf-menu-text,
.tf-menu-widget .tf-menu-link.is-current:hover > .tf-menu-text {
    color: var(--accent-color, #FE8C8C) !important;
}

/* 현재 메뉴는 hover해도 위로 움직이지 않게 */
.tf-menu-widget .tf-menu-link.is-current:hover {
    transform: none !important;
}