/**
 * Book Flip Core CSS - 필수 클래스만 (29개)
 * 원본 book-flip-base.css에서 추출
 */

/* ===========================================
   CSS Variables
=========================================== */
:root {
    --book-perspective: 1200px;
    --page-transition: 0.7s;
    --page-shadow: rgba(0, 0, 0, 0.3);
    --gold-color: #d4af37;
    --gold-light: #f4d03f;
    --gold-dark: #ffb400;
    --dark-bg: rgb(23 0 72 / 20%);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}

/* ===========================================
   Base Reset & Layout
=========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Noto Sans KR', 'Segoe UI', sans-serif;
}

body {
    background: #000;
    color: #fff;
}

.book-body {
    background: #000;
    color: #fff;
}

/* ===========================================
   Video Background
=========================================== */
.book-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-video-background);
    overflow: hidden;
}

.book-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(255 255 255 / 32%) 0%, rgb(0 0 0 / 56%) 50%, rgb(255 255 255 / 30%) 100%);
    z-index: var(--z-overlay);

}

/* ===========================================
   Book Container
=========================================== */
.book-container {
    position: fixed;
    inset: 5% 12% 5% 5%;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    perspective: var(--book-perspective);
    perspective-origin: left center;
    z-index: var(--z-page-content);
    background: transparent;
}

.book {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* 배경을 .book으로 이동 - 페이지만 커버 */
    background: var(--dark-bg);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 218, 11, 0.86);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(87, 77, 0, 0.5),
    inset 0 1px 0 rgba(255, 215, 0, 0.39);
    overflow: hidden;
}

/* ===========================================
   Logo Header
=========================================== */
.book-logo-header {
    position: fixed;
    top: 50px;
    left: 40px;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.book-logo-header img {
    height: 60px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.book-logo-header span {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.book-logo-header .logo-placeholder {
    width: 50px;
    height: 50px;
    display: inline-block;
}

/* 첫 페이지에서 로고 숨김 */
body:has(.book-page[data-page="0"].active) .book-logo-header {
    opacity: 0;
    visibility: hidden;
}

/* ===========================================
   Book Page
=========================================== */
.book-page {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: flex;
    align-items: stretch;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform var(--page-transition) cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity 0.3s ease;
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 페이지 모서리 효과 */
.book-page::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to right,
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.15));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--z-page-content);
    pointer-events: none;
}

/* 페이지 하단 그림자 */
.book-page::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 5%;
    width: 90%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: var(--z-background);
    pointer-events: none;
}

.book-page.active::after {
    opacity: 0.6;
}

/* ===========================================
   Page States
=========================================== */
.book-page.active {
    opacity: 1;
    transform: rotateY(0deg) translateZ(0);
    pointer-events: auto;
    z-index: var(--z-content);
}

.book-page.prev {
    opacity: 0;
    transform: rotateY(-90deg) translateZ(50px);
    z-index: var(--z-overlay);
}

.book-page.next {
    opacity: 0;
    transform: rotateY(90deg) translateZ(50px);
    z-index: var(--z-overlay);
}

/* ===========================================
   Page Flip Animations
=========================================== */
.book-page.flipping-out-left {
    animation: flipOutLeft var(--page-transition) cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
    transform-origin: left center;
}

.book-page.flipping-out-left::before,
.book-page.flipping-out-right::before,
.book-page.flipping-in-left::before,
.book-page.flipping-in-right::before {
    opacity: 1;
}

.book-page.flipping-in-right {
    animation: flipInRight var(--page-transition) cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
    transform-origin: left center;
}

.book-page.flipping-out-right {
    animation: flipOutRight var(--page-transition) cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
    transform-origin: left center;
}

.book-page.flipping-in-left {
    animation: flipInLeft var(--page-transition) cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
    transform-origin: left center;
}

/* 페이지 넘김 시 오른쪽 가장자리 하이라이트 */
.book-page.flipping-out-left::after,
.book-page.flipping-out-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to left,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%);
    pointer-events: none;
    opacity: 1;
}

/* ===========================================
   Keyframes - 책장 넘김 효과
   opacity 겹침으로 프레임 안보이게 처리
=========================================== */
@keyframes flipOutLeft {
    0% {
        transform: rotateY(0deg) translateZ(0) skewY(0deg);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    20% {
        transform: rotateY(-30deg) translateZ(60px) skewY(-2deg);
        opacity: 1;
        box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: rotateY(-90deg) translateZ(100px) skewY(-3deg);
        opacity: 1;
        box-shadow: -20px 8px 35px rgba(0, 0, 0, 0.5);
    }
    80% {
        transform: rotateY(-140deg) translateZ(60px) skewY(-1deg);
        opacity: 0.7;
        box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(-180deg) translateZ(0) skewY(0deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes flipInRight {
    0% {
        transform: rotateY(180deg) translateZ(0) skewY(0deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    20% {
        transform: rotateY(140deg) translateZ(60px) skewY(1deg);
        opacity: 0.7;
        box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: rotateY(90deg) translateZ(100px) skewY(3deg);
        opacity: 1;
        box-shadow: 20px 8px 35px rgba(0, 0, 0, 0.5);
    }
    80% {
        transform: rotateY(30deg) translateZ(60px) skewY(2deg);
        opacity: 1;
        box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(0deg) translateZ(0) skewY(0deg);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes flipOutRight {
    0% {
        transform: rotateY(0deg) translateZ(0) skewY(0deg);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    20% {
        transform: rotateY(30deg) translateZ(60px) skewY(2deg);
        opacity: 1;
        box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: rotateY(90deg) translateZ(100px) skewY(3deg);
        opacity: 1;
        box-shadow: 20px 8px 35px rgba(0, 0, 0, 0.5);
    }
    80% {
        transform: rotateY(140deg) translateZ(60px) skewY(1deg);
        opacity: 0.7;
        box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(180deg) translateZ(0) skewY(0deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes flipInLeft {
    0% {
        transform: rotateY(-180deg) translateZ(0) skewY(0deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    20% {
        transform: rotateY(-140deg) translateZ(60px) skewY(-1deg);
        opacity: 0.7;
        box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: rotateY(-90deg) translateZ(100px) skewY(-3deg);
        opacity: 1;
        box-shadow: -20px 8px 35px rgba(0, 0, 0, 0.5);
    }
    80% {
        transform: rotateY(-30deg) translateZ(60px) skewY(-2deg);
        opacity: 1;
        box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: rotateY(0deg) translateZ(0) skewY(0deg);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* ===========================================
   Page Content & Structure
=========================================== */
.page-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    background: #00000045;
    padding: clamp(12px, calc(6px + 1.5vw), 30px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.page-content > * {
    position: relative;
    z-index: var(--z-base);
}

/* 페이지 코너 폴드 효과 */
.page-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, transparent 50%, rgba(212, 175, 55, 0.2) 50%);
    border-radius: 0 20px 0 0;
    pointer-events: none;
    z-index: var(--z-base);
}

.page-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-inner::before {
    display: none;
}

.page-header {
    height: 5%;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.page-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: var(--gold-color);
    margin: 0;
}

.page-header p {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 255);
    margin: 0;
}

.page-number {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ===========================================
   Sticky Nav (책갈피)
=========================================== */
.page-sticky-nav {
    position: absolute;
    top: 31.2%;
    right: -118px;
    transform: translateY(-50%);
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sticky-note {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 236, 139, 0.95) 0%, rgba(255, 230, 109, 0.9) 100%);
    padding: clamp(7px, 1.5vw, 15px) clamp(0px, 0.5vw, 5px) clamp(3px, 1.5vw, 10px) clamp(5px, 1vw, 50px);
    width: 130px; /* 고정 width: 번역 변경 시 레이아웃 시프트 방지 */
    min-width: clamp(7px, 1vw, 14px);
    border-top-right-radius: clamp(3px, 1vw, 13px);
    border-bottom-right-radius: clamp(5px, 1vw, 15px);
    border-right: clamp(3px, 0.5vw, 6px) solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid rgba(255, 255, 255, 0.3);
    border-bottom: 3px solid rgba(0, 0, 0, 0.5);
    box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 3);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: clamp(8px, 1.2vw, 16px);
    transform: translateX(-95px); /* 고정 픽셀값: 아이콘만 보이도록 */
}

.sticky-note::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 0;
    border-color: transparent rgba(0, 0, 0, 0.15) transparent transparent;
    z-index: var(--z-base);
}

.sticky-note::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: inherit;
    border-bottom-color: transparent;
    filter: brightness(0.85);
}

.sticky-note i {
    font-size: clamp(14px, 2vw, 18px);
    color: rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
    z-index: var(--z-base);
}

.sticky-note span {
    font-size: clamp(11px, 1vw, 16px);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    letter-spacing:0;
    z-index: var(--z-base);
}

.sticky-note:hover {
    transform: translateX(-15px); /* 호버 시 전체 노출 */
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.sticky-note.active {
    transform: translateX(-10px); /* 활성 상태: 거의 전체 노출 */
    box-shadow: -6px 6px 20px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5);
    border-left-width: clamp(4px, 0.6vw, 6px);
}

/* 섹션별 색상 */
.sticky-note[data-section="home"] {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.95) 0%, rgba(255, 160, 180, 0.9) 100%);
    border-left-color: rgba(220, 20, 60, 0.3);
}

.sticky-note[data-section="home"]::after {
    border-color: rgba(255, 182, 193, 0.95) transparent transparent transparent;
}

.sticky-note[data-section="course"] {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.95) 0%, rgba(124, 218, 124, 0.9) 100%);
    border-left-color: rgba(34, 139, 34, 0.3);
}

.sticky-note[data-section="course"]::after {
    border-color: rgba(144, 238, 144, 0.95) transparent transparent transparent;
}

.sticky-note[data-section="about"] {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.95) 0%, rgba(153, 196, 210, 0.9) 100%);
    border-left-color: rgba(70, 130, 180, 0.3);
}

.sticky-note[data-section="about"]::after {
    border-color: rgba(173, 216, 230, 0.95) transparent transparent transparent;
}

.sticky-note[data-section="gallery"] {
    background: linear-gradient(135deg, rgba(255, 218, 185, 0.95) 0%, rgba(255, 198, 165, 0.9) 100%);
    border-left-color: rgba(255, 140, 0, 0.3);
}

.sticky-note[data-section="gallery"]::after {
    border-color: rgba(255, 218, 185, 0.95) transparent transparent transparent;
}

.sticky-note[data-section="directions"] {
    background: linear-gradient(135deg, rgba(221, 160, 221, 0.95) 0%, rgba(201, 140, 201, 0.9) 100%);
    border-left-color: rgba(147, 112, 219, 0.3);
}

.sticky-note[data-section="directions"]::after {
    border-color: rgba(221, 160, 221, 0.95) transparent transparent transparent;
}

.sticky-note[data-section="reservation"] {
    background: linear-gradient(135deg, rgba(255, 255, 153, 0.95) 0%, rgba(255, 255, 133, 0.9) 100%);
    border-left-color: rgba(255, 215, 0, 0.3);
}

.sticky-note[data-section="reservation"]::after {
    border-color: rgba(255, 255, 153, 0.95) transparent transparent transparent;
}

/* ===========================================
   Scroll Hint
=========================================== */
.book-scroll-hint {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-sidebar);
    text-align: center;
    animation: fadeInOut 3s ease-in-out infinite;
    pointer-events: none;
}

.book-scroll-hint i {
    font-size: 1.5rem;
    color: var(--gold-color);
    display: block;
    margin-bottom: 5px;
    animation: bounce 1s ease-in-out infinite;
}

.book-scroll-hint span {
    color: rgba(255, 255, 255, 255);
    font-size: 0.875rem;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* ===========================================
   360° Viewer Modal
=========================================== */
.viewer360-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: var(--z-modal);
    justify-content: center;
    align-items: center;
}

.viewer360-content {
    position: relative;
    width: 95%;
    max-width: 1200px;
    height: 80vh;
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.viewer360-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: var(--z-header);
    transition: all 0.3s ease;
}

.viewer360-close:hover {
    background: var(--gold-color);
    color: #000;
}

.viewer360-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    z-index: var(--z-widget);
}

.viewer360-header span {
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-color);
    font-family: 'Playfair Display', serif;
}

.panorama360-container {
    width: 100%;
    height: 100%;
}

.viewer360-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: var(--z-widget);
}

.viewer360-nav {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.viewer360-nav:hover {
    background: var(--gold-color);
    color: #000;
    border-color: var(--gold-color);
}

#viewer360Info {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   Responsive
   - 모바일 가로: book-flip-landscape.css
   - 모바일 세로: book-flip-portrait.css
=========================================== */

/* ===========================================
   Print Styles
=========================================== */
@media print {
    .book-video-bg,
    .book-video-overlay,
    .book-scroll-hint,
    .page-sticky-nav {
        display: none;
    }

    .book-page {
        position: relative;
        page-break-after: always;
        opacity: 1;
        transform: none;
    }

    .page-content {
        background: #fff;
        color: #000;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ===========================================
   Language Selector (번역 선택기)
=========================================== */
.language-selector {
    position: fixed;
    top: 1px;
    right: 12%;
    z-index: var(--z-header);
    display: flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    padding: 1px 1px;
    border-radius: 25px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lang-btn.active {
    background: var(--gold-color);
    color: #000;
    border-color: var(--gold-color);
    font-weight: 600;
}

.lang-flag {
    font-size: 14px;
}

.lang-text {
    font-size: 11px;
}

/* ===========================================
   Language Selector (책갈피 스타일)
   - 왼쪽 배치, 오른쪽→왼쪽 펼침 애니메이션
=========================================== */
.lang-bookmark {
    position: fixed;
    top: 10%;
    left: 10px;
    right: auto;
    z-index: var(--z-popup);
    cursor: pointer;
}

.lang-current {
    background: linear-gradient(135deg, rgba(80, 130, 80, 0) 0%, rgba(60, 110, 60, 0) 100%);
    padding: 10px 16px 10px 12px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    font-size: 24px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.lang-bookmark:hover .lang-current {
    padding-right: 20px;
    box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.4);
}

.lang-bookmark.open .lang-current {
    border-bottom-left-radius: 0;
}

.lang-bookmark .lang-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, rgba(60, 110, 60, 0.95) 0%, rgba(40, 90, 40, 0.95) 100%);
    border-bottom-left-radius: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 4px 8px rgba(0, 0, 0, 0.3);
}

.lang-bookmark.open .lang-dropdown {
    max-height: 200px;
    opacity: 1;
    transform: translateX(0);
}

.lang-bookmark .lang-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 12px 10px 16px;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.lang-bookmark .lang-dropdown button:hover {
    background: rgba(255, 223, 81, 0.31);
}

.lang-bookmark .lang-dropdown button.selected {
    background: rgba(255, 215, 0, 0.2);
}

.lang-bookmark .lang-dropdown button:last-child {
    border-bottom-left-radius: 8px;
}