/*
 * HC JOYN MENU v2 — 프론트엔드 스타일 v2.2.0
 * Astra Child 테마 간섭 차단 + 정확한 CSS 적용
 * 파일 위치: hc-joyn-menu/assets/css/joyn-menu.css
 */

/* ══════════════════════════════════════════════
   CSS 토큰
══════════════════════════════════════════════ */
:root {
    --hm-sp-xs:  clamp(0.25rem, 0.1rem  + 0.5vw, 0.75rem);
    --hm-sp-sm:  clamp(0.5rem,  0.2rem  + 0.8vw, 1.25rem);
    --hm-sp-md:  clamp(0.75rem, 0.4rem  + 1vw,   1.5rem);
    --hm-sp-lg:  clamp(1.25rem, 0.5rem  + 2vw,   2.5rem);
    --hm-tx-xs:   0.75rem;
    --hm-tx-sm:   1rem;
    --hm-tx-base: 1rem;
    --hm-tx-lg:   1.0625rem;
    --hm-tx-xl:   1.25rem;
    --hm-r-sm:   6px;
    --hm-r-md:   10px;
    --hm-r-lg:   14px;
    --hm-r-pill: 999px;
    --hm-tr-f: 0.15s ease;
    --hm-tr-b: 0.25s cubic-bezier(0.4,0,0.2,1);
    --hm-tr-p: 0.30s cubic-bezier(0.4,0,0.2,1);

    /* 라이트 테마 */
    --hm-hdr-grad:    linear-gradient(135deg,#4541FF 0%,#6c63ff 100%);
    --hm-panel:       #ffffff;
    --hm-panel-sub:   #f6f7ff;
    --hm-footer-bg:   #f0f1ff;
    --hm-shadow:      -4px 0 32px rgba(69,65,255,.18);
    --hm-overlay:     rgba(20,20,60,.52);
    --hm-text:        #1a1a2e;
    --hm-text-2:      #4a4a6a;
    --hm-text-3:      #9095aa;
    --hm-on-hdr:      #ffffff;
    --hm-border:      #e8eaf4;
    --hm-border-s:    #f0f1f8;
    --hm-accent:      #4541FF;
    --hm-icon-bg:     rgba(69,65,255,.08);
    --hm-icon-bd:     rgba(69,65,255,.15);
    --hm-icon-hov:    rgba(69,65,255,.16);
    --hm-item-hov:    rgba(69,65,255,.06);
    --hm-item-act:    rgba(69,65,255,.1);
    --hm-item-act-tx: #4541FF;
    --hm-dot:         rgba(69,65,255,.2);
    --hm-dot-act:     #4541FF;
    --hm-btn-bg:      rgba(69,65,255,.08);
    --hm-btn-bd:      rgba(69,65,255,.2);
    --hm-btn-tx:      #4541FF;
    --hm-btn-call:    rgba(69,65,255,.07);
    --hm-btn-call-bd: rgba(69,65,255,.18);
    --hm-btn-call-tx: var(--hm-accent);
    --hm-btn-cls:     rgba(69,65,255,.07);
    --hm-btn-cls-bd:  rgba(69,65,255,.18);
    --hm-btn-cls-tx:  var(--hm-text-2);
    --hm-trig:        linear-gradient(135deg,#4541FF 0%,#764ba2 100%);
}

[data-hm-theme="dark"] {
    --hm-hdr-grad:    linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);
    --hm-panel:       #0d1117;
    --hm-panel-sub:   #111827;
    --hm-footer-bg:   rgba(0,0,0,.35);
    --hm-shadow:      -4px 0 40px rgba(0,0,0,.6);
    --hm-overlay:     rgba(0,0,0,.72);
    --hm-text:        #e6edf3;
    --hm-text-2:      #b0bbd0;
    --hm-text-3:      #6e7a8a;
    --hm-border:      rgba(255,255,255,.09);
    --hm-border-s:    rgba(255,255,255,.05);
    --hm-accent:      #ff8c42;
    --hm-icon-bg:     rgba(255,255,255,.07);
    --hm-icon-bd:     rgba(255,255,255,.12);
    --hm-icon-hov:    rgba(255,140,66,.2);
    --hm-item-hov:    rgba(255,140,66,.08);
    --hm-item-act:    rgba(255,140,66,.13);
    --hm-item-act-tx: #ff8c42;
    --hm-dot:         rgba(255,255,255,.2);
    --hm-dot-act:     #ff8c42;
    --hm-btn-bg:      rgba(255,255,255,.07);
    --hm-btn-bd:      rgba(255,255,255,.15);
    --hm-btn-tx:      rgba(255,255,255,.9);
    --hm-btn-call:    rgba(255,255,255,.07);
    --hm-btn-call-bd: rgba(255,255,255,.16);
    --hm-btn-call-tx: rgba(255,255,255,.85);
    --hm-btn-cls:     rgba(255,255,255,.07);
    --hm-btn-cls-bd:  rgba(255,255,255,.16);
    --hm-btn-cls-tx:  rgba(255,255,255,.85);
    --hm-trig:        linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

/* ══════════════════════════════════════════════
   ★ ASTRA 테마 리셋 — display 제외하고 box model/폰트만
   display는 각 요소별로 개별 지정 (specificity 충돌 방지)
══════════════════════════════════════════════ */
#hcMenuOverlay *,
#hcMenuOverlay *::before,
#hcMenuOverlay *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    float: none;
    clear: none;
}

/* Astra a 태그 ::before/::after 완전 차단 */
#hcMenuOverlay a::before,
#hcMenuOverlay a::after { content: none !important; display: none !important; }

/* ══════════════════════════════════════════════
   Remix Icon 격리 (Astra 폰트 간섭 방지)
══════════════════════════════════════════════ */
#hcMenuOverlay i[class^="ri-"],
#hcMenuOverlay i[class*=" ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* ══════════════════════════════════════════════
   트리거 버튼
══════════════════════════════════════════════ */
.hc-joyn-menu-trigger {
    all: unset !important;
    position: fixed !important;
    top: clamp(14px, 3vw, 22px) !important;
    right: clamp(14px, 3vw, 22px) !important;
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 48px !important;
    padding: 10px 18px 10px 14px !important;
    background: var(--hm-trig) !important;
    color: #fff !important;
    border-radius: var(--hm-r-pill) !important;
    font-family: 'Pretendard', sans-serif !important;
    font-size: var(--hm-tx-sm) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(69,65,255,.35) !important;
    transition: transform var(--hm-tr-b), box-shadow var(--hm-tr-b) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    /* WKWebView: 100% 는 Text Autosizing·MI/Remix 글리프 팽창 여지 — none 고정 */
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    box-sizing: border-box !important;
    border: none !important;
    transform: scale(0.7) !important;  /* 30% 축소 */
    transform-origin: top right !important;
}
.hc-joyn-menu-trigger-top-left { transform: scale(0.7) !important; transform-origin: top left !important; }
.hc-joyn-menu-trigger::before,
.hc-joyn-menu-trigger::after { content: none !important; display: none !important; }
.hc-joyn-menu-trigger:hover  { transform: translateY(-1.4px) scale(0.721) !important; }
.hc-joyn-menu-trigger-top-left:hover { transform: translateY(-1.4px) scale(0.721) !important; transform-origin: top left !important; }
.hc-joyn-menu-trigger:active { transform: scale(0.679) !important; }
.hc-joyn-menu-trigger-top-left:active { transform: scale(0.679) !important; transform-origin: top left !important; }

/* 메뉴 열려있을 때 트리거 숨김 */
#hcMenuOverlay.active ~ .hc-joyn-menu-trigger,
body.hc-menu-open .hc-joyn-menu-trigger {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.56) !important;  /* 0.7 기준 80% */
    transform-origin: top right !important;
    transition: opacity .2s ease, transform .2s ease !important;
}
#hcMenuOverlay.active ~ .hc-joyn-menu-trigger-top-left,
body.hc-menu-open .hc-joyn-menu-trigger-top-left {
    transform-origin: top left !important;
}

/* 데스크탑: 트리거 버튼 20% 더 크게 (0.7 → 0.84) */
@media (min-width: 601px) {
    .hc-joyn-menu-trigger {
        transform: scale(0.84) !important;
    }
    .hc-joyn-menu-trigger-top-left {
        transform: scale(0.84) !important;
    }
    .hc-joyn-menu-trigger:hover {
        transform: translateY(-1.68px) scale(0.865) !important;
    }
    .hc-joyn-menu-trigger-top-left:hover {
        transform: translateY(-1.68px) scale(0.865) !important;
    }
    .hc-joyn-menu-trigger:active {
        transform: scale(0.815) !important;
    }
    .hc-joyn-menu-trigger-top-left:active {
        transform: scale(0.815) !important;
    }
    #hcMenuOverlay.active ~ .hc-joyn-menu-trigger,
    body.hc-menu-open .hc-joyn-menu-trigger {
        transform: scale(0.672) !important;  /* 0.84 기준 80% */
    }
}

.hc-joyn-menu-trigger i {
    font-family: 'remixicon' !important;
    font-size: 17.6px !important; /* 22px의 80% (20% 축소) */
    font-style: normal !important;
    line-height: 1 !important;
    color: #fff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════
   오버레이
══════════════════════════════════════════════ */
#hcMenuOverlay {
    display: block !important;
    position: fixed !important;
    /* 항상 뷰포트 상단부터 (JS 오프셋 분기 제거) — 헤더는 padding-top:50px 로 통일 */
    inset: 0 !important;
    /* WebView/모바일 주소창: JS가 visualViewport 기준으로 --hm-vh 를 px로 주입 */
    --hm-vh: 100vh;
    width: 100% !important;
    height: var(--hm-vh) !important;
    min-height: var(--hm-vh) !important;
    min-height: -webkit-fill-available !important;
    background: var(--hm-overlay) !important;
    z-index: 9991 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity var(--hm-tr-b), visibility var(--hm-tr-b) !important;
}
@supports (backdrop-filter: blur(1px)) {
    #hcMenuOverlay {
        background: rgba(0,0,0,.42) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }
}
#hcMenuOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 다른 페이지로 이동 직전: 오버레이 페이드 대기 없이 즉시 숨김(체감 지연 완화) */
#hcMenuOverlay.hc-menu-instant-close {
    transition: opacity 0ms, visibility 0ms !important;
}

/* ══════════════════════════════════════════════
   메뉴에서 같은 탭 이동 시 전용 로딩 (#hcMenuOverlay 밖 — 닫힌 뒤에도 유지)
══════════════════════════════════════════════ */
.hc-joyn-menu-route-loading {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(20, 20, 45, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease, visibility 0.12s ease !important;
    box-sizing: border-box !important;
}
.hc-joyn-menu-route-loading.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.hc-joyn-menu-route-loading::after {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border: 3px solid rgba(255, 255, 255, 0.22) !important;
    border-top-color: var(--hm-accent, #4541FF) !important;
    border-radius: 50% !important;
    animation: hc-joyn-route-spin 0.65s linear infinite !important;
    box-sizing: border-box !important;
}
@keyframes hc-joyn-route-spin {
    to { transform: rotate(360deg); }
}

/* WKWebView·iOS: 오버레이 서브트리 전역 — 자동 텍스트/아이콘 팽창 끔 (Acts 목록·v3 와 동일 방침) */
#hcMenuOverlay,
#hcMenuOverlay * {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}


/* ══════════════════════════════════════════════
   메뉴 래퍼
══════════════════════════════════════════════ */
#hcMenuWrapper {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(100%, 420px) !important;
    height: var(--hm-vh) !important;
    min-height: var(--hm-vh) !important;
    min-height: -webkit-fill-available !important;
    padding-top: 0 !important;
    z-index: 9992 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* 모바일(특히 작은 화면/안드로이드): 100vh가 주소창 포함으로 계산되어 내부 스크롤이 잘리는 경우가 있어 dvh 우선 */
@supports (height: 100dvh) {
    #hcMenuOverlay {
        --hm-vh: 100dvh;
    }
    #hcMenuWrapper {
        --hm-vh: 100dvh;
    }
}

/* ══════════════════════════════════════════════
   패널 공통 — ★ display:flex 는 !important 없이 직접 지정
   (global reset에 display 없으므로 일반 규칙이 잘 작동함)
══════════════════════════════════════════════ */
#hcMenuOverlay .hc-menu-panel {
    display: flex !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    flex-direction: column !important;
    background: var(--hm-panel) !important;
    color: var(--hm-text) !important;
    overflow: hidden !important;
    min-height: 0 !important; /* flex 자식(panel-body) 스크롤 컷오프 방지 */
    transform: translateX(105%) !important;
    transition: transform var(--hm-tr-p) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    box-shadow: var(--hm-shadow) !important;
}
#hcMenuOverlay .hc-menu-panel.panel-main { z-index: 10 !important; }
#hcMenuOverlay .hc-menu-panel.panel-sub  { z-index: 20 !important; background: var(--hm-panel-sub) !important; }
#hcMenuOverlay .hc-menu-panel.is-active  { transform: translateX(0) !important; }
#hcMenuOverlay .hc-menu-panel.is-behind  { transform: translateX(-30%) !important; }

/* ══════════════════════════════════════════════
   패널 헤더
══════════════════════════════════════════════ */
#hcMenuOverlay .panel-header {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 68px !important;
    /* 상단 패딩 — 환경 분기 없이 항상 50px (하이브리드·Android·safe-area 보정은 하지 않음) */
    padding-top: 50px !important;
    padding-right: 16px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    background: var(--hm-hdr-grad) !important;
    color: var(--hm-on-hdr) !important;
    font-family: 'Pretendard', sans-serif !important;
}

/* 헤더 상단 50px — 특이도 보강(환경·미디어쿼리 잔여 규칙 대비) */
#hcMenuOverlay#hcMenuOverlay .panel-header {
    padding-top: 50px !important;
}

#hcMenuOverlay .hc-menu-logo-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
}
#hcMenuOverlay .hc-menu-logo-link:focus,
#hcMenuOverlay .hc-menu-logo-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
#hcMenuOverlay .hc-menu-logo-img {
    display: block !important;
    height: clamp(28px, 5vw, 36px) !important;
    width: auto !important;
    object-fit: contain !important;
}
#hcMenuOverlay .hc-menu-logo-text {
    display: block !important;
    font-size: var(--hm-tx-lg) !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    color: #fff !important;
    white-space: nowrap !important;
}

#hcMenuOverlay .hm-hdr-spacer {
    display: block !important;
    flex: 1 !important;
}

#hcMenuOverlay .hc-menu-jseeds {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 1 !important;
    justify-content: center !important;
    color: rgba(255,255,255,.9) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
#hcMenuOverlay .hc-menu-jseeds-label,
#hcMenuOverlay .hc-menu-jseeds-unit {
    display: inline !important;
    opacity: .75 !important;
    font-size: 0.75rem !important;
    color: rgba(255,255,255,.9) !important;
}
#hcMenuOverlay .hc-menu-jseeds-num {
    display: inline !important;
    font-weight: 800 !important;
    font-size: var(--hm-tx-sm) !important;
    color: #fff !important;
}

#hcMenuOverlay .panel-header-title {
    display: block !important;
    flex: 1 !important;
    font-size: var(--hm-tx-base) !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Pretendard', sans-serif !important;
}
#hcMenuOverlay .panel-header-title i,
#hcMenuOverlay .hc-menu-item-link .item-text i {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin-right: 6px !important;
    font-size: 18px !important;
    font-style: normal !important;
    line-height: 1 !important;
}

#hcMenuOverlay .panel-header-back {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 64px !important;
    min-height: 40px !important;
    padding: 6px 10px 6px 6px !important;
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    border-radius: var(--hm-r-pill) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Pretendard', sans-serif !important;
    transition: background var(--hm-tr-f) !important;
}
#hcMenuOverlay .panel-header-back::before,
#hcMenuOverlay .panel-header-back::after { content: none !important; display: none !important; }
#hcMenuOverlay .panel-header-back:hover { background: rgba(255,255,255,.28) !important; }
#hcMenuOverlay .panel-header-back .material-icons { font-size: 18px !important; }

#hcMenuOverlay .panel-header-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    border: 1.5px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background var(--hm-tr-b), transform var(--hm-tr-b) !important;
}
/* 키보드 탐색 시에만 포커스 링 표시 */
#hcMenuOverlay .panel-header-close:focus { outline: none !important; }
#hcMenuOverlay .panel-header-close:focus-visible {
    outline: 2px solid rgba(255,255,255,.6) !important;
    outline-offset: 2px !important;
}
#hcMenuOverlay .panel-header-close::before,
#hcMenuOverlay .panel-header-close::after { content: none !important; display: none !important; }
#hcMenuOverlay .panel-header-close:hover {
    background: rgba(220,50,50,.3) !important;
    border-color: rgba(220,50,50,.5) !important;
    transform: rotate(90deg) scale(1.1) !important;
}
#hcMenuOverlay .panel-header-close .material-icons { font-size: 22px !important; }

/* ══ 상단 아이콘 4개 — 컴팩트 + 단순 애니메이션 ══ */
#hcMenuOverlay .hc-menu-top-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 10px 12px 8px !important;
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid var(--hm-accent) !important;
    flex-shrink: 0 !important;
}

#hcMenuOverlay .hc-menu-icon-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    /* 단순 애니메이션: opacity + 약한 scale만 */
    transition: background .15s ease, opacity .15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}
/* ::before 완전 제거 (튀어오르는 효과 제거) */
#hcMenuOverlay .hc-menu-icon-item::before { content: none !important; display: none !important; }
#hcMenuOverlay .hc-menu-icon-item::after  { content: none !important; display: none !important; }
#hcMenuOverlay .hc-menu-icon-item:hover {
    background: rgba(69,65,255,.08) !important;
    opacity: .85 !important;
}
#hcMenuOverlay .hc-menu-icon-item:active { opacity: .65 !important; }

/* ── 아이콘 래퍼 — 크기 줄임 ── */
#hcMenuOverlay .hc-menu-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    background: rgba(255,255,255,.1) !important;
    border: 1.5px solid rgba(255,255,255,.2) !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    /* rotate/scale 효과 제거 */
    transition: background .15s ease, border-color .15s ease !important;
    overflow: visible !important;
}
#hcMenuOverlay .hc-menu-icon-wrap::before,
#hcMenuOverlay .hc-menu-icon-wrap::after { content: none !important; display: none !important; }
#hcMenuOverlay .hc-menu-icon-item:hover .hc-menu-icon-wrap {
    background: rgba(69,65,255,.15) !important;
    border-color: var(--hm-accent) !important;
}

/* ── Remix Icon ── */
#hcMenuOverlay .hc-menu-icon-wrap i {
    display: inline-flex !important;
    font-size: 19px !important;
    color: inherit !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 1 !important;
}
#hcMenuOverlay .hc-menu-icon-item:hover .hc-menu-icon-wrap i {
    color: var(--hm-accent) !important;
}

/* ── 레이블 — 폰트 키움 ── */
#hcMenuOverlay .hc-menu-icon-label {
    display: block !important;
    font-size: 12.5px !important;
    text-align: center !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Pretendard', sans-serif !important;
    color: inherit !important;
    line-height: 1.3 !important;
}
#hcMenuOverlay .hc-menu-icon-item:hover .hc-menu-icon-label {
    color: var(--hm-accent) !important;
}

/* ── 쪽지 미읽음 배지 ── */
#hcMenuOverlay .hc-menu-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -4px !important; right: -4px !important;
    min-width: 18px !important; height: 18px !important;
    background: #e53935 !important;
    color: #fff !important;
    border-radius: var(--hm-r-pill) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 0 3px !important;
    border: 2px solid var(--hm-panel) !important;
    line-height: 1 !important;
    z-index: 2 !important;
    font-family: 'Pretendard', sans-serif !important;
}

/* ══════════════════════════════════════════════
   패널 바디
══════════════════════════════════════════════ */
#hcMenuOverlay .panel-body {
    display: block !important;
    flex: 1 !important;
    min-height: 0 !important; /* iOS/Android WebView: flex+overflow 조합에서 필수 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    background: transparent !important;
    /* 하단 고정 네비(또는 safe-area)로 마지막 항목이 잘리는 현상 방지 */
    padding-bottom: var(--hc-menu-bottom-space, 0px) !important;
}

/* ──────────────────────────────────────────────
   mainpage-mini 하단 네비와의 “겹침” 방지 (모바일)
   - 하단 고정 네비가 있을 때 메뉴 오버레이의 하단을 네비 높이만큼 올려,
     메뉴 마지막 항목/버튼이 네비 뒤로 가려지지 않게 한다.
   - (요청) panel-body padding으로 미봉하지 않고, 오버레이/래퍼 높이 자체를 조정.
────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.mpm-has-mobile-bottom-nav {
        --mpm-mbn-space: calc(5px + env(safe-area-inset-bottom, 0px));
    }
    body.mpm-has-mobile-bottom-nav #hcMenuOverlay {
        bottom: var(--mpm-mbn-space) !important;
        height: calc(var(--hm-vh) - var(--mpm-mbn-space)) !important;
        min-height: calc(var(--hm-vh) - var(--mpm-mbn-space)) !important;
    }
    body.mpm-has-mobile-bottom-nav #hcMenuWrapper {
        bottom: var(--mpm-mbn-space) !important;
        height: calc(var(--hm-vh) - var(--mpm-mbn-space)) !important;
        min-height: calc(var(--hm-vh) - var(--mpm-mbn-space)) !important;
    }
}

/* 하단 고정 네비가 감지되면(joyn-menu.js에서 토글) 스크롤 하단 여백을 실제 높이 기준으로 확장 */
body.hc-has-bottom-nav {
    /* JS가 --hc-bottom-nav-h(px) 주입. safe-area + 약간의 여유(12px) 추가 */
    --hc-menu-bottom-space: calc(var(--hc-bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
}
#hcMenuOverlay .panel-body::-webkit-scrollbar { width: 3px; }
#hcMenuOverlay .panel-body::-webkit-scrollbar-track { background: transparent; }
#hcMenuOverlay .panel-body::-webkit-scrollbar-thumb { background: rgba(69,65,255,.2); border-radius: 10px; }

/* ══════════════════════════════════════════════
   메뉴 리스트
══════════════════════════════════════════════ */
#hcMenuOverlay .hc-menu-list {
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
#hcMenuOverlay .hc-menu-list li {
    display: block !important;
    position: relative !important;
    list-style: none !important;
}

#hcMenuOverlay .hc-menu-item-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 54px !important;
    padding: 14px 16px !important;
    color: var(--hm-text) !important;
    font-size: var(--hm-tx-base) !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    border-bottom: 1px solid var(--hm-border-s) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: transparent !important;
    font-family: 'Pretendard', sans-serif !important;
    transition: background var(--hm-tr-f), color var(--hm-tr-f), padding-left .2s ease !important;
    position: relative !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}
#hcMenuOverlay .hc-menu-item-link::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 3px !important; height: 100% !important;
    background: var(--hm-accent) !important;
    opacity: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    transition: opacity .15s !important;
}
#hcMenuOverlay .hc-menu-item-link::after { content: none !important; display: none !important; }
#hcMenuOverlay .hc-menu-item-link:hover,
#hcMenuOverlay .hc-menu-item-link:focus-visible {
    background: var(--hm-item-hov) !important;
    color: var(--hm-accent) !important;
    padding-left: 22px !important;
}
#hcMenuOverlay .hc-menu-item-link:hover::before { opacity: 1 !important; }

#hcMenuOverlay .current-menu-item > .hc-menu-item-link {
    background: var(--hm-item-act) !important;
    color: var(--hm-item-act-tx) !important;
    font-weight: 700 !important;
    padding-left: 22px !important;
}
#hcMenuOverlay .current-menu-item > .hc-menu-item-link::before { opacity: 1 !important; }

#hcMenuOverlay .hc-menu-item-link .item-text {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
}
#hcMenuOverlay .hc-menu-item-link .item-arrow {
    display: inline-flex !important;
    font-size: 22px !important;
    color: var(--hm-text-3) !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    pointer-events: none !important;
    transition: color var(--hm-tr-f), transform var(--hm-tr-f) !important;
}
#hcMenuOverlay .hc-menu-item-link:hover .item-arrow {
    color: var(--hm-accent) !important;
    transform: translateX(3px) !important;
}

#hcMenuOverlay .panel-sub .hc-menu-item-link {
    font-size: var(--hm-tx-sm) !important;
    font-weight: 500 !important;
    min-height: 50px !important;
}

#hcMenuOverlay .hc-menu-no-items {
    display: block !important;
    padding: 32px 16px !important;
    color: var(--hm-text-3) !important;
    font-size: var(--hm-tx-sm) !important;
    text-align: center !important;
    font-family: 'Pretendard', sans-serif !important;
}

/* ══════════════════════════════════════════════
   브레드크럼
══════════════════════════════════════════════ */
#hcMenuOverlay .breadcrumb-dots {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 0 4px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}
#hcMenuOverlay .breadcrumb-dot {
    display: inline-block !important;
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: var(--hm-dot) !important;
    transition: all .3s ease !important;
}
#hcMenuOverlay .breadcrumb-dot.active {
    width: 22px !important;
    border-radius: 3px !important;
    background: var(--hm-dot-act) !important;
}

/* ══════════════════════════════════════════════
   하단 푸터
══════════════════════════════════════════════ */
#hcMenuOverlay .panel-footer {
    display: flex !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    padding-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
    border-top: 1.5px solid var(--hm-border) !important;
    background: var(--hm-footer-bg) !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* mainpage-mini 모바일 하단 네비가 노출되는 페이지에서는
   메뉴 오버레이 하단(로그인/로그아웃/닫기) 바가 겹치므로 숨김 */
body.mpm-has-mobile-bottom-nav #hcMenuOverlay .panel-footer,
body.hc-has-bottom-nav #hcMenuOverlay .panel-footer {
    display: none !important;
}

#hcMenuOverlay .hc-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 !important;
    min-height: 40px !important;
    padding: 7px 8px !important;
    border-radius: var(--hm-r-md) !important;
    border: 1.5px solid var(--hm-btn-bd) !important;
    background: var(--hm-btn-bg) !important;
    color: var(--hm-btn-tx) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    font-family: 'Pretendard', sans-serif !important;
    transition: filter var(--hm-tr-f), transform var(--hm-tr-f), background var(--hm-tr-f) !important;
    -webkit-tap-highlight-color: transparent !important;
}
#hcMenuOverlay .hc-menu-btn::before,
#hcMenuOverlay .hc-menu-btn::after { content: none !important; display: none !important; }
#hcMenuOverlay .hc-menu-btn i {
    font-size: 15px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: inherit !important;
}
#hcMenuOverlay .hc-menu-btn:hover  { filter: brightness(.92) !important; }
#hcMenuOverlay .hc-menu-btn:active { transform: scale(.97) !important; }
/* 전화 버튼 — 차분한 강조 */
#hcMenuOverlay .hc-menu-btn.btn-call {
    background: var(--hm-btn-call) !important;
    border-color: var(--hm-btn-call-bd) !important;
    color: var(--hm-btn-call-tx, var(--hm-accent)) !important;
}
/* 닫기 버튼 — 차분한 배경 */
#hcMenuOverlay .hc-menu-btn.btn-close {
    background: var(--hm-btn-cls) !important;
    border-color: var(--hm-btn-cls-bd) !important;
    color: var(--hm-btn-cls-tx, var(--hm-text-2)) !important;
}

/* ══════════════════════════════════════════════
   진입 애니메이션
══════════════════════════════════════════════ */
@keyframes hm-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
#hcMenuOverlay .hc-menu-panel.is-active .panel-header      { animation: hm-panel-in .3s .03s both ease !important; }
#hcMenuOverlay .hc-menu-panel.is-active .hc-menu-top-icons { animation: hm-panel-in .3s .07s both ease !important; }
#hcMenuOverlay .hc-menu-panel.is-active .breadcrumb-dots   { animation: hm-panel-in .3s .06s both ease !important; }
#hcMenuOverlay .hc-menu-panel.is-active .panel-body        { animation: hm-panel-in .3s .11s both ease !important; }
#hcMenuOverlay .hc-menu-panel.is-active .panel-footer      { animation: hm-panel-in .3s .15s both ease !important; }

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
@media (min-width: 769px) {
    #hcMenuWrapper { max-width: 400px !important; }
}
/* ══════════════════════════════════════════════
   모바일 상단 패딩 — 50px 고정
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 펼침 패널: vw/rem 토큰을 px로 고정 (뷰포트·루트 폰트 변동 완화) */
    #hcMenuOverlay {
        --hm-sp-xs: 6px;
        --hm-sp-sm: 10px;
        --hm-sp-md: 14px;
        --hm-sp-lg: 20px;
        --hm-tx-xs: 12px;
        --hm-tx-sm: 16px;
        --hm-tx-base: 16px;
        --hm-tx-lg: 17px;
        --hm-tx-xl: 20px;
    }
    #hcMenuOverlay .hc-menu-logo-img {
        height: 32px !important;
    }
    #hcMenuOverlay .hc-menu-jseeds-label,
    #hcMenuOverlay .hc-menu-jseeds-unit {
        font-size: 12px !important;
    }
    #hcMenuOverlay .panel-header-back {
        font-size: 12px !important;
    }
    #hcMenuOverlay .hc-menu-btn {
        font-size: 13px !important;
    }
    .hc-joyn-menu-trigger {
        font-size: 16px !important;
    }
    #hcMenuOverlay .panel-header {
        padding-top: 50px !important;
        align-items: flex-end !important;
        padding-bottom: 12px !important;
        min-height: 80px !important;
        background: transparent !important;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    #hcMenuOverlay .hc-menu-top-icons { display: none !important; }
    #hcMenuOverlay .panel-header {
        min-height: 68px !important;
        padding-top: 50px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        padding-left: 16px !important;
        align-items: center !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #hcMenuOverlay .hc-menu-panel { transition: none !important; animation: none !important; }
}

/* ── 터치(WKWebView): 가짜 :hover 가 남아 아이콘·버튼이 커진 것처럼 보이는 현상 완화 ── */
html.has-touch .hc-joyn-menu-trigger:not(.hc-joyn-menu-trigger-top-left):hover,
html.has-touch .hc-joyn-menu-trigger:not(.hc-joyn-menu-trigger-top-left):active {
    transform: scale(0.7) !important;
    transform-origin: top right !important;
}
html.has-touch .hc-joyn-menu-trigger-top-left:hover,
html.has-touch .hc-joyn-menu-trigger-top-left:active {
    transform: scale(0.7) !important;
    transform-origin: top left !important;
}
@media (min-width: 601px) {
    html.has-touch .hc-joyn-menu-trigger:not(.hc-joyn-menu-trigger-top-left):hover,
    html.has-touch .hc-joyn-menu-trigger:not(.hc-joyn-menu-trigger-top-left):active {
        transform: scale(0.84) !important;
        transform-origin: top right !important;
    }
    html.has-touch .hc-joyn-menu-trigger-top-left:hover,
    html.has-touch .hc-joyn-menu-trigger-top-left:active {
        transform: scale(0.84) !important;
        transform-origin: top left !important;
    }
}
html.has-touch #hcMenuOverlay .panel-header-close:hover {
    transform: none !important;
}

/* ══════════════════════════════════════════════
   ★ 전체 서비스 패널 — 검정 배경 + 2열 그리드
   hc-joyn-menu v2.1 All-Services Grid Mode
   파일 위치: hc-joyn-menu/assets/css/joyn-menu.css
══════════════════════════════════════════════ */

/* 패널 자체 배경을 순수 검정으로 고정 */
#hcMenuOverlay .panel-all-svc {
    background: #111111 !important;
}
#hcMenuOverlay .panel-all-svc .panel-header {
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    color: #ffffff !important;
}

/* 로고 이미지 — 검정 배경 위 자연스럽게 */
#hcMenuOverlay .panel-all-svc .hc-menu-logo-img {
    filter: brightness(1) !important;   /* 원본 그대로 */
}

/* 로고 텍스트(이미지 없을 때) — 흰색 */
#hcMenuOverlay .panel-all-svc .hc-menu-logo-text {
    color: #ffffff !important;
}

/* 사이트명 링크 텍스트 */
#hcMenuOverlay .panel-all-svc .hc-menu-logo-link {
    color: #ffffff !important;
}

/* 상단 아이콘 바 — 다크 배경 조화 */
#hcMenuOverlay .panel-all-svc .hc-menu-top-icons {
    background: rgba(255,255,255,.04) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
#hcMenuOverlay .panel-all-svc .hc-menu-icon-wrap {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}
#hcMenuOverlay .panel-all-svc .hc-menu-icon-wrap i {
    color: #fff !important;
}
#hcMenuOverlay .panel-all-svc .hc-menu-icon-label {
    color: rgba(255,255,255,.75) !important;
}

/* 스크롤 바디 */
#hcMenuOverlay .hc-all-svc-body {
    background: #111111 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
#hcMenuOverlay .hc-all-svc-body::-webkit-scrollbar { width: 3px; }
#hcMenuOverlay .hc-all-svc-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

/* "전체 서비스" 타이틀 행 — 비표시(JS에서 생성 안 함, 구버전·캐시 대비) */
#hcMenuOverlay .hc-all-svc-title-row {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
#hcMenuOverlay .hc-all-svc-title {
    display: none !important;
}

/* 카테고리 섹션 */
#hcMenuOverlay .hc-svc-section {
    margin-bottom: 8px !important;
}

/* 카테고리 헤더 행 */
#hcMenuOverlay .hc-svc-cat-row {
    padding: 14px 20px 8px !important;
}
#hcMenuOverlay .hc-svc-cat-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.45) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-family: 'Pretendard', sans-serif !important;
}

/* 2열 그리드 */
#hcMenuOverlay .hc-svc-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px 0 !important;
    padding: 0 8px !important;
}

/* 각 셀 */
#hcMenuOverlay .hc-svc-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}
#hcMenuOverlay .hc-svc-cell::before,
#hcMenuOverlay .hc-svc-cell::after { content: none !important; display: none !important; }
#hcMenuOverlay .hc-svc-cell:hover,
#hcMenuOverlay .hc-svc-cell:active {
    background: rgba(255,255,255,.07) !important;
}
#hcMenuOverlay .hc-svc-cell.is-current {
    background: rgba(255,255,255,.1) !important;
}

/* 아이콘 래퍼 (박스 없이 아이콘만) */
#hcMenuOverlay .hc-svc-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: none !important;
}
#hcMenuOverlay .hc-svc-icon-wrap i[class*="ri-"] {
    font-family: 'remixicon' !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    background: transparent !important;
}

/* 메뉴 항목 이름 */
#hcMenuOverlay .hc-svc-cell-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e8e8e8 !important;
    letter-spacing: -0.2px !important;
    font-family: 'Pretendard', sans-serif !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
}
#hcMenuOverlay .hc-svc-cell.is-current .hc-svc-cell-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 섹션 구분선 */
#hcMenuOverlay .hc-svc-section + .hc-svc-section {
    border-top: 1px solid rgba(255,255,255,.06) !important;
    padding-top: 4px !important;
}

/* 하단 패딩 여유 */
#hcMenuOverlay .hc-all-svc-body::after {
    content: '' !important;
    display: block !important;
    height: calc(24px + var(--hc-menu-bottom-space, 0px)) !important;
}

/* 푸터 — 검정 배경과 어울리게 */
#hcMenuOverlay .panel-all-svc .panel-footer {
    background: rgba(0,0,0,.6) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}
#hcMenuOverlay .panel-all-svc .hc-menu-btn {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.9) !important;
}
#hcMenuOverlay .panel-all-svc .hc-menu-btn:hover {
    background: rgba(255,255,255,.13) !important;
}

/* 로그인한 사용자 JSeeds 잔액 */
#hcMenuOverlay .panel-all-svc .hc-menu-jseeds {
    color: rgba(255,255,255,.85) !important;
}

/* 닫기 버튼 다크 */
#hcMenuOverlay .panel-all-svc .panel-header-close {
    color: rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.14) !important;
}
#hcMenuOverlay .panel-all-svc .panel-header-close:hover {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}