/* ============================================================
 *  COMVILLAIN i18n — 언어 스위처 스타일
 *  헤더의 다크모드 버튼과 동일한 룩 + 메인메뉴 서브드롭다운과 동일한 배경
 * ============================================================ */

.cv-i18n {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 트리거 버튼: .header-btn(36x36, 중앙정렬, 테두리) 스타일을 그대로 상속.
   여기서는 배지 위치를 위한 relative 만 추가하고 박스는 건드리지 않는다. */
.cv-i18n-btn {
    position: relative;
    cursor: pointer;
    padding: 0;
}
.cv-i18n-btn > iconify-icon { pointer-events: none; }

/* 현재 언어 2글자 배지 (지구본 우하단) */
.cv-i18n-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 15px;
    height: 13px;
    padding: 0 2px;
    font-size: 8px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #fff;
    background: var(--cv-accent, #8B5CF6);
    border-radius: 7px;
    box-shadow: 0 0 0 1.5px var(--cv-card-bg, #fff);
    pointer-events: none;
}
.dark-mode .cv-i18n-badge { box-shadow: 0 0 0 1.5px var(--cv-card-bg, #1c1c22); }

/* ── 드롭다운 메뉴 : 메인메뉴 서브드롭다운(.sub-menu)과 동일 ── */
.cv-i18n-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    max-height: 72vh;
    overflow-y: auto;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 1002;
}
.cv-i18n.is-open .cv-i18n-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 항목: .sub-link 와 동일 톤 */
.cv-i18n-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: #374151;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s;
}
.cv-i18n-item:hover,
.cv-i18n-item:focus-visible {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
    transform: translateX(4px);
    outline: none;
}
.cv-i18n-flag { font-size: 18px; line-height: 1; }
.cv-i18n-label { flex: 1; }
.cv-i18n-check {
    color: #8B5CF6;
    opacity: 0;
    flex-shrink: 0;
}
.cv-i18n-item.is-active { color: #8B5CF6; font-weight: 700; }
.cv-i18n-item.is-active .cv-i18n-check { opacity: 1; }

/* 푸터 */
.cv-i18n-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 9px 14px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #9ca3af;
    font-size: 11px;
}

/* 로딩 스피너 (버튼 위) */
.cv-i18n.is-loading .cv-i18n-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .65;
    animation: cv-i18n-spin .6s linear infinite;
    background: transparent;
}
.cv-i18n.is-loading .cv-i18n-btn > iconify-icon { opacity: .25; }
@keyframes cv-i18n-spin { to { transform: rotate(360deg); } }

/* ── 다크 배경 상태(다크모드 / 스크롤 전 헤더)에서 서브메뉴와 동일하게 ── */
.dark-mode .cv-i18n-menu,
.alpha-header:not(.scrolled) .cv-i18n-menu {
    background: rgba(30, 41, 59, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.dark-mode .cv-i18n-item,
.alpha-header:not(.scrolled) .cv-i18n-item {
    color: rgba(255, 255, 255, 0.9);
}
.dark-mode .cv-i18n-item:hover,
.alpha-header:not(.scrolled) .cv-i18n-item:hover {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.22);
}
.dark-mode .cv-i18n-item.is-active,
.alpha-header:not(.scrolled) .cv-i18n-item.is-active { color: #c4b5fd; }
.dark-mode .cv-i18n-foot,
.alpha-header:not(.scrolled) .cv-i18n-foot {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

/* RTL */
html[dir="rtl"] .cv-i18n-menu { right: auto; left: 0; transform-origin: top left; }
html[dir="rtl"] .cv-i18n-item { text-align: right; }
html[dir="rtl"] .cv-i18n-item:hover { transform: translateX(-4px); }
html[dir="rtl"] .cv-i18n-badge { right: auto; left: -3px; }

/* 전환 페이드 */
html.cv-i18n-switching body { transition: opacity .15s ease; }