/* 기본 폰트 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
}

/* 배경 그라디언트 애니메이션 */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background: linear-gradient(-45deg, #38a169, #4fd1c5, #48bb78, #81e6d9);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
}

/* ============================================
   뷰 전환 애니메이션 (JavaScript 제어)
   ============================================ */

.main-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-content.hiding {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
}

.submenu-view {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu-view.showing {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* 서브메뉴 제목 */
.submenu-view h2 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu-view h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 서브메뉴 아이템 */
.submenu-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   메뉴 링크 스타일
   ============================================ */

.menu-link {
    display: inline-block;
    padding: 12px 32px;
    margin: 8px 0;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 9999px;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

.menu-link:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* ============================================
   뒤로가기 버튼
   ============================================ */

.back-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-button.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-button:hover {
    transform: scale(1.1);
}

/* ============================================
   이스터에그 진동 효과
   ============================================ */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-effect {
    animation: shake 0.5s ease-in-out;
}

/* ============================================
   서브메뉴 확장 기능 - 가지 모양
   ============================================ */

.submenu-expandable {
    position: relative;
    transition: transform 0.4s ease;
}

/* 확장 시 전체 뷰를 왼쪽으로 이동 */
.submenu-view.shifted {
    transform: translateX(-150px);
    transition: transform 0.4s ease;
}

.submenu-children {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, margin-left 0.3s ease;
}

.submenu-children.visible {
    opacity: 1;
    pointer-events: auto;
    margin-left: 40px;
}

/* 하위 메뉴 아이템 래퍼 */
.submenu-child-wrapper {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-30px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu-child-wrapper.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* 연결선 - 가지 모양 (가로) */
.connector-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    margin-right: 12px;
    position: relative;
}

.connector-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 하위 메뉴 링크 스타일 */
.submenu-children .menu-link {
    font-size: 0.85em;
    padding: 10px 24px;
    width: auto;
    min-width: 180px;
    background-color: rgba(255, 255, 255, 0.2);
}

.submenu-children .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

/* 다른 항목들 살짝 흐리게 */
.submenu-item.dimmed {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}