/* ══════════════════════════════════════════════════════════════
   sesame-menu.css — 전 서비스 공통 모바일 햄버거 메뉴 (sesame.com 방식)
   적용: getstyle / getavata / getsticker / call (AI Live 는 getlive.css 에 동일 디자인 내장)
   ─────────────────────────────────────────────────────────────
   특징
   - 풀스크린 아님: 상단에서 내려오는 "드롭다운 패널"(하단 모서리 rounded)
   - 뒤 화면은 어둡게 딤 처리(콘텐츠 비침)
   - 우리 서비스 색감(밝은 파스텔 보라~핑크) — AI Live 대비 살짝 더 진하게
   - 항목은 순차 페이드인(항목 개수와 무관하게 절대 숨겨지지 않음)
   ─────────────────────────────────────────────────────────────
   ★ 공통 페이지는 JS(common-hamburger-menu.js)가 인라인 style.display 로 여닫으므로
     열림 트리거를 .active 클래스가 아닌 "display 노출" 자체로 잡는다(animation 기반).
   ★ 반드시 각 페이지의 getstyle.css / getavata-hamburger.css '뒤'에 로드되어야
     동일 명시도에서 로드 순서로 이긴다.
   ══════════════════════════════════════════════════════════════ */

/* 햄버거 버튼: 미니멀 */
.mobile-hamburger-btn {
    transition: transform 0.25s ease;
}

/* 오버레이 = 딤 레이어(뒤 화면 비침). display:none/​block 으로 토글됨 */
.mobile-hamburger-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(12, 8, 24, 0.55) !important;   /* 딤 */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 콘텐츠 = 상단 드롭다운 패널 (우리 색감 그라데이션, 하단만 rounded) */
.mobile-hamburger-overlay .mobile-hamburger-content {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: max(20px, env(safe-area-inset-top, 0px)) clamp(24px, 7vw, 40px) 28px !important;
    display: block !important;
    /* AI Live 보다 살짝 더 진한 파스텔 보라·핑크 (밝은 상업적 톤 유지) */
    background:
        radial-gradient(circle at 88% 4%, rgba(236, 72, 153, 0.42) 0%, transparent 52%),
        radial-gradient(circle at 4% 96%, rgba(167, 139, 250, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, #eaddff 0%, #efe2ff 34%, #fbd8ee 72%, #ffdeee 100%) !important;
    border-radius: 0 0 26px 26px !important;
    box-shadow: 0 20px 52px rgba(24, 16, 48, 0.28) !important;
    /* 위에서 아래로 슬라이드 다운 (표시될 때마다 재생) */
    animation: sesamePanelDown 0.42s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes sesamePanelDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* 리스트 */
.mobile-hamburger-overlay .mobile-hamburger-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background: none !important;
}
.mobile-hamburger-overlay .mobile-hamburger-list li {
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    /* 표시될 때만 재생 → 항목 개수와 무관하게 절대 숨겨지지 않음(both fill) */
    animation: sesameItemIn 0.4s ease both;
}
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(1) { animation-delay: 0.20s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(2) { animation-delay: 0.26s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(3) { animation-delay: 0.32s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(4) { animation-delay: 0.38s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(5) { animation-delay: 0.44s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(6) { animation-delay: 0.50s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:nth-child(7) { animation-delay: 0.56s; }
.mobile-hamburger-overlay .mobile-hamburger-list li:last-child { border-bottom: none !important; }
@keyframes sesameItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 메뉴 항목: 메인 본문과 동일 글꼴(상속), 적당히 작게, 다크 텍스트(밝은 패널 대비) */
.mobile-hamburger-overlay .mobile-hamburger-content .mobile-hamburger-list li a,
.mobile-hamburger-overlay .mobile-hamburger-list a {
    font-family: inherit !important;
    font-size: clamp(1.12rem, 4vw, 1.32rem) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #241a3d !important;
    display: flex !important;
    align-items: center;
    padding: clamp(0.72rem, 2vh, 0.98rem) 0 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    white-space: nowrap;
    background: none !important;
    border: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-hamburger-overlay .mobile-hamburger-content .mobile-hamburger-list li a:hover,
.mobile-hamburger-overlay .mobile-hamburger-list a:hover,
.mobile-hamburger-overlay .mobile-hamburger-list a:active {
    color: #7c3aed !important;
    padding-left: 6px !important;
    background: none !important;
}
/* 현재 페이지 강조: 다크 + 핑크 점 (공유 CSS 의 color:#fff !important 를 명시도로 이김) */
.mobile-hamburger-overlay .mobile-hamburger-content .mobile-hamburger-list li a.active,
.mobile-hamburger-overlay .mobile-hamburger-list a.active {
    color: #1a1030 !important;
    font-weight: 700 !important;
    background: none !important;
}
.mobile-hamburger-overlay .mobile-hamburger-list a.active::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}
.mobile-hamburger-overlay .mobile-hamburger-list a.active::before {
    display: none !important;
}

/* 닫기 X: 패널 우상단 안쪽 */
.mobile-hamburger-overlay .mobile-hamburger-content .hamburger-menu-popup {
    position: absolute !important;
    top: max(18px, env(safe-area-inset-top, 0px)) !important;
    right: clamp(20px, 6vw, 32px) !important;
    left: auto !important;
    z-index: 10001 !important;
    background: none !important;
}
.mobile-hamburger-overlay .menu-close-x {
    position: static !important;
    font-size: 1.4rem !important;
    font-weight: 300 !important;
    color: #241a3d !important;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease, color 0.25s ease;
    display: inline-block;
    background: none !important;
}
.mobile-hamburger-overlay .menu-close-x:hover {
    transform: rotate(90deg);
    color: #7c3aed !important;
}