/* =========================================
   TRINUT STUDIO
   LANGUAGE SYSTEM
========================================= */


/* =========================================
   한국어 / 영어 표시
========================================= */

.lang-ko,
.lang-en {
    all: unset !important;
    display: none !important;
}


html[lang="ko"] .lang-ko {
    display: inline !important;
}


html[lang="en"] .lang-en {
    display: inline !important;
}




/* =========================================
   공통 언어 버튼
========================================= */

.language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    white-space: nowrap;
}


.lang-btn {
    border: 0;
    outline: 0;

    background: transparent;

    padding: 3px 2px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;

    color: inherit;

    opacity: 0.4;

    cursor: pointer;

    transition:
        opacity 0.15s ease;
}


.lang-btn:hover {
    opacity: 0.75;
}


.lang-btn.active {
    opacity: 1;
    font-weight: 700;
}


.lang-divider {
    font-size: 10px;
    opacity: 0.2;
}




/* =========================================
   PC 언어 선택

   HOME 바로 왼쪽에 들어감
========================================= */

.nav-language-item {
    display: flex;
    align-items: center;

    list-style: none;

    margin-right: 16px;
}


.desktop-language-switcher {
    min-width: 44px;
}




/* =========================================
   모바일 언어 선택

   모바일 NAV를 열었을 때만 존재함
========================================= */

.mobile-language-area {
    display: none;
}




/* =========================================
   모바일
========================================= */

@media (max-width: 768px) {


    /*
        데스크톱 네비 안의
        KO / EN은 모바일에서 숨김
    */
    .nav-language-item {
        display: none;
    }


    /*
        모바일 메뉴 내부 언어 선택기 표시
    */
    .mobile-language-area {
        display: flex;

        justify-content: flex-end;
        align-items: center;

        padding:
            10px
            22px
            4px;
    }


    .mobile-language-switcher {
        display: flex;
    }


    .mobile-language-switcher .lang-btn {
        font-size: 12px;
    }


    .mobile-language-switcher .lang-divider {
        font-size: 11px;
    }

}