/* Material Icons - 폰트 로딩 최적화 */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    min-width: 1em;
    min-height: 1em;
}

/* SBL Fonts - Self-hosted */
@font-face {
    font-family: 'Ezra SIL SR';
    src: url('/attached_assets/fonts/SBL_Hbrw.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SBL Hebrew';
    src: url('/attached_assets/fonts/SBL_Hbrw.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KoPub Batang';
    src: url('/attached_assets/fonts/KoPubBatang.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gentium Plus';
    src: url('/attached_assets/fonts/SBL_grk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stam Sefarad CLM';
    src: url('/attached_assets/fonts/StamSefaradCLM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   반응형 브레이크포인트 표준 (JS와 일치)
   ========================================
   ULTRA_SMALL: 430px   - Galaxy Fold 접힌 상태, 소형 폰
   MOBILE:      767px   - 일반 모바일 (세로)
   TABLET:      1024px  - 태블릿, Galaxy Fold 펼침
   DESKTOP:     1025px+ - 노트북/데스크탑
   
   추가 브레이크포인트:
   320px  - 최소 화면 (극소형)
   600px  - 대형 모바일 (중간)
   
   Galaxy Fold 펼침 전용:
   680px~920px, 종횡비 0.75+ (JS에서 감지)
   ======================================== */

:root {
    --top-nav-height: 48px;
    --bg-color: #f4f4f4;
    --card-bg: #fff;
    --text-color: #212121;
    --text-sub: #757575;
    --border-color: #ddd;
    --primary-color: #0F52BA;
    --sapphire-blue: #0F52BA;
    --header-bg: #0a3d8f;
    --header-text: #fff;
    --hover-bg: #f9f9f9;
    --selected-bg: rgba(15, 82, 186, 0.12);
    --modal-bg: rgba(0,0,0,0.5);
    --brown-dark: #3e2723;
    --brown-medium: #5d4037;
    --bg-section: #f8f9fa;
}

body.dark-mode {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #E0E0E0;
    --text-sub: #9E9E9E;
    --border-color: #333;
    --primary-color: #4da3ff;
    --sapphire-blue: #4da3ff;
    --header-bg: #000;
    --header-text: #ddd;
    --hover-bg: #2a2a2a;
    --selected-bg: rgba(77, 163, 255, 0.2);
    --modal-bg: rgba(255,255,255,0.1);
    --bg-section: #1a1a1a;
}

.verse-highlight {
    background-color: rgba(15, 82, 186, 0.2) !important;
    border-left: 3px solid var(--primary-color) !important;
    animation: verse-flash 0.5s ease-in-out 3;
}

@keyframes verse-flash {
    0%, 100% { background-color: rgba(15, 82, 186, 0.2); }
    50% { background-color: rgba(15, 82, 186, 0.4); }
}

body.dark-mode .verse-highlight {
    background-color: rgba(77, 163, 255, 0.2) !important;
}

@keyframes verse-flash-dark {
    0%, 100% { background-color: rgba(77, 163, 255, 0.2); }
    50% { background-color: rgba(77, 163, 255, 0.4); }
}

body.dark-mode .verse-highlight {
    animation: verse-flash-dark 0.5s ease-in-out 3;
}

/* ========================================
   UX 개선: 애니메이션 및 트랜지션
   ======================================== */

/* 1. 페이지 전환 페이드 애니메이션 */
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes page-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

.page-transitioning {
    animation: page-fade-out 0.15s ease-out forwards;
}

.page-entering {
    animation: page-fade-in 0.2s ease-out forwards;
}

#bible-list.page-entering .verse-item {
    animation: verse-stagger-in 0.3s ease-out forwards;
    opacity: 0;
}

@keyframes verse-stagger-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 2. 패널 열기/닫기 애니메이션 */
@keyframes panel-slide-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes panel-slide-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-20px); }
}

.multi-panel-container .panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.multi-panel-container .panel.panel-entering {
    animation: panel-slide-in 0.3s ease-out forwards;
}

.multi-panel-container .panel.panel-exiting {
    animation: panel-slide-out 0.2s ease-out forwards;
}

/* 3. 버튼 리플 효과 */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--primary-color) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
}

.ripple-effect:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* 버튼 호버 피드백 */
.btn-interactive {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.btn-interactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-interactive:active {
    transform: translateY(0) scale(0.98);
}

/* 네비게이션 버튼 호버 효과 */
.nav-icons-group .nav-icon-btn {
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.nav-icons-group .nav-icon-btn:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-icons-group .nav-icon-btn:active {
    transform: scale(0.95);
}

/* 4. 스크롤 진행 표시기 */
.scroll-progress-bar {
    position: fixed;
    top: var(--top-nav-height, 48px);
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #4da3ff);
    width: 0%;
    z-index: 1000;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

body.dark-mode .scroll-progress-bar {
    background: linear-gradient(90deg, #4da3ff, #80c4ff);
}

/* 5. 모달 애니메이션 개선 */
@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modal-content-in {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

@keyframes modal-content-out {
    from { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: scale(0.9) translateY(20px); 
    }
}

.modal-overlay {
    animation: modal-backdrop-in 0.2s ease-out forwards;
}

.modal-overlay.modal-closing {
    animation: modal-backdrop-out 0.15s ease-out forwards;
}

.modal-overlay .modal-content {
    animation: modal-content-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.modal-overlay.modal-closing .modal-content {
    animation: modal-content-out 0.15s ease-out forwards;
}

/* 바텀시트 스타일 모달 */
@keyframes modal-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes modal-slide-down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.modal-bottomsheet .modal-content {
    animation: modal-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modal-bottomsheet.modal-closing .modal-content {
    animation: modal-slide-down 0.2s ease-out forwards;
}

/* 6. 절 하이라이트 글로우/펄스 효과 개선 */
@keyframes verse-glow-pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(15, 82, 186, 0.4);
        background-color: rgba(15, 82, 186, 0.15);
    }
    50% { 
        box-shadow: 0 0 15px 3px rgba(15, 82, 186, 0.3);
        background-color: rgba(15, 82, 186, 0.25);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(15, 82, 186, 0);
        background-color: rgba(15, 82, 186, 0.1);
    }
}

.verse-item.verse-focus-glow {
    animation: verse-glow-pulse 1.5s ease-in-out;
    border-radius: 4px;
    position: relative;
}

body.dark-mode .verse-item.verse-focus-glow {
    animation-name: verse-glow-pulse-dark;
}

@keyframes verse-glow-pulse-dark {
    0% { 
        box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.4);
        background-color: rgba(77, 163, 255, 0.15);
    }
    50% { 
        box-shadow: 0 0 15px 3px rgba(77, 163, 255, 0.3);
        background-color: rgba(77, 163, 255, 0.25);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(77, 163, 255, 0);
        background-color: rgba(77, 163, 255, 0.1);
    }
}

/* 선택된 절 지속 하이라이트 */
.verse-item.selected {
    transition: background-color 0.3s ease, border-left-color 0.3s ease;
}

/* 터치 피드백 개선 */
.verse-item {
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.verse-item:active {
    transform: scale(0.995);
    background-color: var(--selected-bg);
}

/* ======================================== */

html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: hidden;
}

html {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    height: 100%;
    height: -webkit-fill-available;
}

body {
    font-family: "Noto Sans KR", "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Dotum", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100%;
    height: -webkit-fill-available;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    touch-action: pan-x pan-y;
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* 전체 화면 오버플로우 방지 */
*, *::before, *::after {
    box-sizing: border-box;
}
header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 1rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: padding 3s ease;
}
/* 로그인 오버레이 */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0;
    box-sizing: border-box;
}

#login-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#login-modal {
    background: var(--card-bg);
    padding: 40px 50px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    margin: auto;
    flex-shrink: 0;
}

/* 모바일에서 로그인 모달 여백 조정 */
@media (max-height: 700px) {
    #login-modal {
        padding: 25px 30px;
    }
    
    #login-modal img {
        max-width: 200px !important;
        margin-bottom: 15px !important;
    }
    
    #pwa-install-banner {
        margin-top: 15px !important;
        padding: 12px !important;
    }
}

#login-modal img {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 260px;
}

#login-modal h2 {
    color: var(--primary-color);
    margin: 0 0 15px 0;
    font-size: 1.5rem;
}

#login-modal p {
    color: var(--text-sub);
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.login-overlay-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 15px rgba(15, 82, 186, 0.3);
}

.login-overlay-button:hover {
    background: #0d47a1;
    transform: translateY(-2px);
}

.login-overlay-button:active {
    transform: translateY(0);
}

.login-note {
    font-size: 0.85rem !important;
    color: #999 !important;
    margin-top: 20px !important;
}

/* 블러 효과 */
body.not-logged-in .nav-container,
body.not-logged-in .container {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
    overflow: hidden;
    animation: splash-auto-hide 3s ease-out forwards;
}
#splash-screen.slide-up {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    animation: none;
}
@keyframes splash-auto-hide {
    0%, 60% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}
#splash-content {
    text-align: center;
    opacity: 1;
}
#splash-logo {
    max-width: 260px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#splash-content h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: #0F52BA;
}
#splash-content .sub-title {
    font-size: 1rem;
    color: #0F52BA;
    opacity: 0.7;
    font-weight: normal;
    letter-spacing: 1px;
    display: block;
    margin-top: 10px;
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Resizer styles - 각 창의 세로줄 드래그 핸들 */
.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    z-index: 10;
    transition: background 0.2s ease;
}

.resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 44px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.resizer:hover::before,
.resizer.active::before {
    opacity: 1;
    background: var(--primary-color);
    height: 60px;
    width: 6px;
    box-shadow: 0 0 8px rgba(15, 82, 186, 0.5);
}
/* 주해/노트 모달 (전체화면) - 완전히 덮는 불투명 배경 */
#commentary-modal {
    background: #ffffff !important;
}

.commentary-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.commentary-modal-content .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.commentary-modal-content .modal-body {
    flex: 1;
    overflow-y: auto;
}

/* 글쓰기 버튼 */
.write-note-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin: 12px 0;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.write-note-btn:hover {
    background: #0a3d8f;
}

.write-note-btn .material-icons {
    font-size: 1.3rem;
}
aside, section {
    position: relative;
}

.nav-container {
    background-color: var(--card-bg);
    padding: 8px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    flex-shrink: 0;
}

/* 상단 내비게이션바: 현재 창 관련 기능 */
.nav-container.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--card-bg, #fff);
    border-bottom: none;
    padding: 2px 12px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    height: var(--top-nav-height);
    min-height: var(--top-nav-height);
    box-sizing: border-box;
    box-shadow: 0 1px 0 0 var(--border-color, #ddd);
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 하단 내비게이션바: 유니버설 기능 (화면 하단 고정) */



/* 통합 아이콘 그룹 - 좌우 스크롤 가능 */
.nav-icons-group { 
    display: flex !important; 
    flex-direction: row !important;
    align-items: center; 
    gap: 8px; 
    flex-wrap: nowrap !important; 
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch;
    /* 고정 아이콘(레이아웃, 설정)과 겹치지 않도록 오른쪽 여백 */
    margin-right: 20px;
}
.nav-icons-group::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.nav-icons-group .icon-btn-nav {
    flex-shrink: 0;
}
/* 기존 호환성 유지 */
.nav-left-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 1 auto; }
.nav-center-group { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
}
.nav-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}
.nav-right-group { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; justify-content: flex-end; }

/* 우측 고정 아이콘들 (레이아웃, 설정) */
.nav-container.top-nav .nav-right-fixed {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    background: var(--nav-bg);
}

/* 레이아웃 선택기 - 우측 고정 (설정 왼쪽) */
.nav-container.top-nav .layout-selector-wrapper {
    flex-shrink: 0;
    position: relative;
}
.nav-container.top-nav .layout-selector-wrapper.nav-right-fixed {
    padding-left: 4px;
}

/* 설정 아이콘 - 우측 끝 고정 */
.nav-container.top-nav .settings-wrapper {
    flex-shrink: 0;
    position: relative;
}
.nav-container.top-nav .settings-wrapper.nav-right-fixed {
    padding-left: 4px;
}
.settings-wrapper .settings-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-color);
    transition: all 0.2s;
}
.settings-wrapper .settings-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}
.settings-wrapper .settings-btn .material-icons {
    font-size: 1.25rem;
}
.history-group, .book-group, .move-group, .action-icons-group { display: flex; align-items: center; gap: 4px; }

/* 히스토리 모달 */
.history-modal-content {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 95%;
    max-height: 80vh;
}
.history-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-filter-btn, .history-clear-btn {
    margin-right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-filter-btn:hover, .history-clear-btn:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}
.history-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}
.history-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-sub);
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}
.history-tab .material-icons {
    font-size: 18px;
}
.history-tab:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}
.history-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}
.history-list {
    overflow-y: auto;
    flex: 1;
    max-height: calc(80vh - 110px);
}
.history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}
.history-item:hover {
    background: var(--hover-bg);
}
.history-item.current {
    background: rgba(15, 82, 186, 0.08);
}
.history-date-col {
    min-width: 45px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-sub);
    line-height: 1.3;
    padding-top: 2px;
    flex-shrink: 0;
}
.history-date-col .date-day {
    font-size: 0.68rem;
    display: block;
}
.history-icon-col {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.history-icon-col .material-icons {
    font-size: 15px;
    color: white;
}
.history-content-col {
    flex: 1;
    min-width: 0;
    padding-right: 24px;
}
.history-verse-ref {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.history-verse-text {
    font-size: 0.82rem;
    color: var(--text-sub);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.history-bookmark-btn {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-sub);
    opacity: 0.5;
    transition: all 0.15s;
    font-size: 0.9rem;
    line-height: 1;
}
.history-bookmark-btn:hover {
    opacity: 1;
    color: var(--primary-color);
}
.history-bookmark-btn.bookmarked {
    opacity: 1;
    color: #FFD700;
}
.history-bookmark-btn .material-icons {
    font-size: 1.5rem;
}
.history-delete-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-sub);
    opacity: 0.4;
    transition: opacity 0.15s;
    font-size: 0.9rem;
    line-height: 1;
}
.history-delete-btn:hover {
    opacity: 1;
    color: #e74c3c;
}
.history-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-sub);
}
body.night-mode .history-item.current {
    background: rgba(15, 82, 186, 0.15);
}
body.night-mode .history-verse-ref {
    color: #6aa3ff;
}

/* 내비게이션 아이콘 드래그 앤 드롭 */
.draggable-nav-icon {
    cursor: grab;
    transition: transform 0.15s ease, opacity 0.15s ease;
    touch-action: none;
}
.draggable-nav-icon:active {
    cursor: grabbing;
}
.draggable-nav-icon.dragging {
    opacity: 0.5;
    transform: scale(1.1);
    z-index: 9999;
}
.draggable-nav-icon.drag-over {
    border: 2px dashed var(--primary-color);
    border-radius: 6px;
}

/* 드롭 대상 컨테이너 표시 (상단↔하단 이동 시) */
.nav-drop-target {
    background: rgba(15, 82, 186, 0.1) !important;
    outline: 2px dashed var(--primary-color);
    outline-offset: -2px;
    border-radius: 6px;
}

/* 드롭다운 스타일 (진한 밤색 배경, 흰색 글자) */
.dropdown-wrapper { position: relative; display: inline-block; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--brown-dark);
    border: 1px solid var(--brown-medium);
    border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 3000; min-width: 50px;
}
.dropdown-menu.show { display: block; }

/* 초소형 화면 전용 더보기 버튼 (기본 숨김) */
.ultra-small-only {
    display: none !important;
}

/* 초소형 화면 전용 드롭다운 */
.ultra-dropdown-menu {
    display: none;
    position: fixed;
    bottom: 55px;
    left: 10px;
    background: var(--brown-dark);
    border: 1px solid var(--brown-medium);
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
    z-index: 1001;
    min-width: 150px;
}
.ultra-dropdown-menu.show { 
    display: block !important; 
}

/* 상단 내비바 더보기 팝업 메뉴 */
.top-nav-more-menu {
    position: fixed;
    top: var(--top-nav-height);
    right: 60px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1001;
    min-width: 150px;
}
.top-nav-more-menu.show {
    display: block !important;
}
.more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.more-menu-item:last-child {
    border-bottom: none;
}
.more-menu-item:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}
.more-menu-item .material-icons {
    font-size: 0.9rem;
    color: var(--text-sub);
}
.more-menu-item:hover .material-icons {
    color: var(--primary-color);
}
.more-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 태블릿/모바일 전용 아이콘 표시 제어 - JavaScript로 동적 처리 */
/* 기본 상태: 좁은 화면 (더보기 메뉴 사용) */
.tablet-nav-icon { display: none !important; }
.mobile-nav-icon { display: inline-flex !important; }

/* 넓은 화면 상태: body에 .wide-nav 클래스가 있을 때 */
body.wide-nav .tablet-nav-icon { display: inline-flex !important; }
body.wide-nav .mobile-nav-icon { display: none !important; }
body.wide-nav .top-nav-more-menu { display: none !important; }

/* 폴백: 768px 이상에서 JavaScript 미로드 시 기본 동작 */
@media (min-width: 768px) {
    body:not(.nav-js-loaded) .tablet-nav-icon { display: inline-flex !important; }
    body:not(.nav-js-loaded) .mobile-nav-icon { display: none !important; }
    body:not(.nav-js-loaded) .top-nav-more-menu { display: none !important; }
}

.menu-item {
    padding: 10px; cursor: pointer; color: #fff;
    text-align: center; border-bottom: 1px solid var(--brown-medium);
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--brown-medium); color: #ffeb3b; }

.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--text-sub); padding: 5px; }
.icon-btn:hover { color: var(--primary-color); }

.icon-btn-small {
    background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px;
    cursor: pointer; font-size: 0.8rem; padding: 0px 4px; color: var(--text-color); margin-left: 5px;
}
.icon-btn-small:hover { background: var(--hover-bg); color: var(--primary-color); }

.nav-trigger {
    background: var(--bg-color); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 4px;
    cursor: pointer; font-size: 0.9rem; font-weight: bold; color: var(--text-color); min-width: 50px;
}
.nav-trigger:hover { background: var(--hover-bg); }
.nav-trigger.active { border: 2px solid var(--primary-color); color: var(--primary-color); background: var(--card-bg); }

.location-text { font-weight: bold; margin: 0 5px; color: var(--primary-color); font-size: 1.1rem; white-space: nowrap;}
.location-text.clickable { 
    cursor: pointer; 
    padding: 8px 14px; 
    border-radius: 6px; 
    transition: all 0.2s ease;
    background: rgba(15, 82, 186, 0.08);
}
.location-text.clickable:hover { 
    background: rgba(15, 82, 186, 0.15);
}
.location-text.clickable:active {
    transform: scale(0.98);
}
.nav-btn { background: #6c757d; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: background-color 0.2s, transform 0.1s; display: flex; align-items: center; justify-content: center; }
.nav-btn:hover { background: #5a6268; transform: scale(1.05); }
.nav-btn:active { transform: scale(0.95); }

/* 등급 제한 버튼 스타일 */
.tier-locked {
    position: relative;
    opacity: 0.7;
}
.tier-locked::after {
    content: '\e897';
    font-family: 'Material Icons';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 12px;
    color: #ff9800;
    background: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.icon-btn-nav { 
    background: var(--primary-color); 
    color: white; 
    border: none; 
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 6px; 
    cursor: pointer; 
    transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-btn-nav.panel-open {
    background: #a8c4e8;
    color: #e8e8e8;
}
.icon-btn-nav .material-icons { 
    font-size: 22px !important; 
    width: 22px;
    height: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-btn-nav #nav-analysis-icon { font-size: 22px !important; font-weight: bold; }
.icon-btn-nav:hover { background: #0d47a1; transform: scale(1.05); }
.icon-btn-nav.panel-open:hover { background: #8fb0d8; }
.icon-btn-nav:active { transform: scale(0.95); }
.icon-btn-nav.has-content { background: #d32f2f; }
.icon-btn-nav.has-content.panel-open { background: #e8a8a8; }

/* 노트/토라포션 아웃라인 버튼 스타일 - 테두리 없는 깔끔한 스타일 */
.icon-btn-nav.outline-btn {
    background: var(--primary-light, rgba(15, 82, 186, 0.12)) !important;
    border: 1.5px solid var(--primary-color, #0F52BA) !important;
    color: var(--primary-color, #0F52BA) !important;
    width: 40px;
    height: 40px;
}
.nav-container.top-nav .icon-btn-nav.outline-btn .material-icons,
.nav-icons-group .icon-btn-nav.outline-btn .material-icons,
.icon-btn-nav.outline-btn .material-icons {
    color: var(--primary-color, #0F52BA) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--primary-color, #0F52BA) !important;
    font-size: 22px !important;
    width: 22px;
    height: 22px;
}
.icon-btn-nav.outline-btn:hover {
    background: var(--selected-bg, rgba(15, 82, 186, 0.28)) !important;
    transform: scale(1.05);
}
.icon-btn-nav.outline-btn:hover .material-icons {
    color: var(--header-bg, #0a3d8f) !important;
}
.icon-btn-nav.outline-btn.panel-open {
    background: var(--selected-bg, rgba(15, 82, 186, 0.38)) !important;
}
.icon-btn-nav.outline-btn.panel-open .material-icons {
    color: var(--header-bg, #0a3d8f) !important;
}

/* Covenant Ember 테마 아이콘 색상 강화 */
html.theme-covenant-ember .icon-btn-nav.outline-btn,
body.theme-covenant-ember .icon-btn-nav.outline-btn {
    background: rgba(76, 42, 95, 0.15) !important;
    border: 1px solid rgba(76, 42, 95, 0.4) !important;
}
html.theme-covenant-ember .icon-btn-nav.outline-btn .material-icons,
body.theme-covenant-ember .icon-btn-nav.outline-btn .material-icons {
    color: #4C2A5F !important;
    -webkit-text-fill-color: #4C2A5F !important;
}

/* 검색 모달 스타일 */
.search-modal-body {
    padding: 20px;
}

.search-input-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.search-top-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 100%;
}

.search-bottom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.search-language-select {
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 50px;
    width: auto;
    flex-shrink: 0;
}

.search-input-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
    border: 2px solid var(--sapphire-blue);
    border-radius: 4px;
    font-size: 15px;
    background: var(--card-bg);
    color: var(--text-color);
}
.search-input-field:focus {
    outline: none;
    border-color: var(--sapphire-blue);
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.1);
}

.search-execute-btn {
    padding: 10px 16px;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    min-width: 50px;
    flex-shrink: 0;
}

.search-execute-btn:hover {
    background: #0d4699;
}

.search-help-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-help-btn:hover {
    background: #0d4699;
    transform: scale(1.05);
}

.search-operators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
    align-items: center;
}

.search-operator-btn {
    padding: 10px 14px;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    min-width: 50px;
    height: 44px;
    transition: all 0.2s;
}

.search-operator-btn:hover {
    background: #0d4699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 82, 186, 0.3);
}

.search-range-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}

.search-range-btn {
    padding: 10px 12px;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
    min-width: 75px;
    height: 44px;
    transition: all 0.2s;
}

.search-range-btn:hover {
    background: #0d4699;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 82, 186, 0.3);
}

/* 범위 선택이 '전체'가 아닌 경우 강조 표시 */
.search-range-btn.scope-limited {
    background-color: rgba(200, 100, 100, 0.3);
    border: 1px solid #d4957a;
    color: #c84c38;
}

.search-range-btn.scope-limited:hover {
    background-color: rgba(200, 100, 100, 0.4);
    box-shadow: 0 4px 8px rgba(200, 100, 100, 0.3);
    transform: translateY(-2px);
}

.search-range-display {
    font-size: 0.9rem;
    color: #d32f2f;
    font-weight: bold;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    margin-top: 5px;
}

.search-range-clear-btn {
    padding: 10px 12px;
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    min-width: 75px;
    height: 44px;
    transition: all 0.2s;
}

.search-range-clear-btn:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.3);
}

.search-exact-match-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-color);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    transition: all 0.2s;
}

.search-exact-match-label:hover {
    background: var(--hover-bg);
}

.search-exact-match-checkbox {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* 성경 용례 섹션 */
.search-concordance-section {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-bottom: 15px;
}

.search-section-title {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 5px;
    font-weight: 600;
}

.search-concordance-desc {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 10px;
    opacity: 0.8;
}

.recent-concordance-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.recent-concordance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.recent-concordance-item:hover {
    background: rgba(15, 82, 186, 0.1);
}

.concordance-item-word {
    font-family: "Ezra SIL SR", "Gentium Plus", "Noto Sans Hebrew", serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.concordance-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.concordance-item-transliteration {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-style: italic;
}

.concordance-item-time {
    font-size: 0.75rem;
    color: var(--text-sub);
    opacity: 0.7;
}

.concordance-empty-msg {
    text-align: center;
    color: var(--text-sub);
    font-size: 13px;
    padding: 15px;
    opacity: 0.7;
}

.search-history-section {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.search-history-title {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 10px;
}

.search-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg-color);
    border-radius: 4px;
    cursor: pointer;
}

.search-history-item:hover {
    background: var(--border-color);
}

.search-history-item-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.search-history-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.search-history-action-btn {
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-sub);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-history-action-btn .material-icons {
    font-size: 18px;
}

.search-history-action-btn:hover {
    background: var(--border-color);
    color: var(--primary-color);
}

.search-history-action-btn.saved {
    color: var(--primary-color);
}

.search-history-action-btn.delete:hover {
    color: #dc3545;
}

/* Search Tabs */
.search-tabs-container {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.search-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-color);
    border-radius: 8px;
    padding: 3px;
}

.search-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-tab:hover {
    background: var(--border-color);
}

.search-tab.active {
    background: var(--primary-color);
    color: white;
}

/* Search Saved Section */
.search-saved-section {
    padding-top: 10px;
}

.search-saved-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg-color);
    border-radius: 4px;
    cursor: pointer;
}

.search-saved-item:hover {
    background: var(--border-color);
}

.search-saved-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.search-saved-query {
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-saved-date {
    font-size: 12px;
    color: var(--text-sub);
    flex-shrink: 0;
}

/* Save/Delete Buttons */
.search-save-btn,
.search-delete-btn {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-save-btn:hover {
    background: rgba(255, 193, 7, 0.2);
}

.search-save-btn.saved {
    color: #f59e0b;
}

.search-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.search-history-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.search-history-query {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-history-lang {
    font-size: 0.7rem;
    padding: 0px 4px;
    border-radius: 10px;
    background: var(--primary-color);
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-history-date {
    font-size: 12px;
    color: var(--text-sub);
    flex-shrink: 0;
    margin-left: 8px;
}


.search-history-query.hebrew-text {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.64rem;
    direction: rtl;
}

.search-history-query.greek-text {
    font-family: 'Gentium Plus', 'Times New Roman', serif;
    font-size: 0.9rem;
}
/* 팝업 검색 결과 섹션 스타일 */
.search-results-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    --hebrew-size: 1.64rem;
}

/* 검색 결과가 표시될 때 탭을 덮도록 설정 */
#search-modal #popup-search-results-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-main);
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    border-radius: 0 0 12px 12px;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 8px;
}

.search-results-header span {
    font-weight: bold;
    color: var(--primary-color);
}

.search-back-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.search-back-btn:hover {
    background: var(--hover-bg);
}

#popup-search-results {
    flex: 1;
    overflow-y: auto;
    --hebrew-size: 1.64rem;
}

.search-item {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background: var(--hover-bg);
    transform: translateX(5px);
}

.search-ref {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.search-text {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-color);
}

.search-highlight, mark.search-highlight {
    background: #fff59d;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 2px;
}

.dark-mode .search-highlight, .dark-mode mark.search-highlight {
    background: #ffa500;
    color: #000;
}

/* 검색 결과 스타일 */
.search-results-container {
    padding: 20px 20px 10px 20px;
    /* overflow는 search-modal-body에서 처리 */
}

.search-result-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    --hebrew-size: 1.64rem;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--hover-bg);
    transform: translateX(5px);
}

.search-result-ref {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.05rem;
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.search-result-header .search-result-ref {
    margin-bottom: 0;
}

.goto-verse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.goto-verse-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.goto-verse-btn .material-icons {
    font-size: 16px;
}

.search-result-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-color);
    --hebrew-size: 1.64rem;
}

.search-result-highlight {
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    background: #fff59d;
}

.search-result-highlight.color-1 {
    background: #fff59d;
}

.search-result-highlight.color-2 {
    background: #b3e5fc;
}

.search-result-highlight.color-3 {
    background: #c8e6c9;
}

.search-result-highlight.color-4 {
    background: #ffccbc;
}

.search-result-highlight.color-5 {
    background: #e1bee7;
}

.search-result-highlight.color-6 {
    background: #ffe0b2;
}

.dark-mode .search-result-highlight,
body.night-mode .search-result-highlight {
    background: #ffa500;
    color: #000;
}

body.night-mode .search-result-highlight.color-1 {
    background: #e6b800;
    color: #000;
}

body.night-mode .search-result-highlight.color-2 {
    background: #4fc3f7;
    color: #000;
}

body.night-mode .search-result-highlight.color-3 {
    background: #81c784;
    color: #000;
}

body.night-mode .search-result-highlight.color-4 {
    background: #ff8a65;
    color: #000;
}

body.night-mode .search-result-highlight.color-5 {
    background: #ba68c8;
    color: #000;
}

body.night-mode .search-result-highlight.color-6 {
    background: #ffb74d;
    color: #000;
}

/* 검색 결과에서 히브리어/헬라어 폰트 크기 */
.search-result-text .hebrew-word,
.search-result-text [lang="he"] {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.64rem;
    direction: rtl;
}

.search-result-text .greek-word,
.search-result-text [lang="el"] {
    font-family: 'Gentium Plus', 'Times New Roman', serif;
    font-size: 0.9rem;
}

/* 검색 결과 내 원어 하이라이트 */
.search-result-text mark.search-highlight.hebrew-word {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.64rem;
    direction: rtl;
}

.search-result-text mark.search-highlight.greek-word {
    font-family: 'Gentium Plus', 'Times New Roman', serif;
    font-size: 0.9rem;
}

.container { display: flex; flex: 1; margin: 0; overflow: hidden; position: relative; padding-top: var(--top-nav-height); padding-bottom: 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); box-sizing: border-box; height: 100%; height: -webkit-fill-available; }

body.dark-mode .container { background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%); }
#bible-area { 
    flex: 1; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); display: flex; flex-direction: column; border-right: 1px solid var(--border-color); 
    overflow-y: auto; 
    padding-top: 0 !important;
    margin-top: 0 !important;
    scroll-padding-top: 46px;
    position: relative;
}

body.dark-mode #bible-area {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
}


/* 데스크탑: 기본적으로 숨김, flex 컨테이너 준비 */
#analysis-panel, #lexicon-panel, #search-result-panel {
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
}

/* 검색 결과 패널 - 모든 화면에서 .show 시 표시 */
#search-result-panel.show {
    display: flex;
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    z-index: 2600;
    transform: translateX(0);
    visibility: visible;
}

#commentary-area {
    width: 400px; background: var(--card-bg); border-left: 1px solid var(--border-color);
    display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease, width 0.3s ease, flex 0.3s ease; z-index: 900;
}

/* 레이아웃 비율 */
body.layout-40-60 #bible-area { flex: 4; }
body.layout-40-60 #commentary-area { width: 60%; display: flex; }

body.layout-50-50 #bible-area { flex: 1; }
body.layout-50-50 #commentary-area { width: 50%; display: flex; }

body.layout-60-40 #bible-area { flex: 6; }
body.layout-60-40 #commentary-area { width: 40%; display: flex; }

body.layout-70-30 #bible-area { flex: 7; }
body.layout-70-30 #commentary-area { width: 30%; display: flex; }

body.layout-100-0 #bible-area { flex: 1; }
body.layout-100-0 #commentary-area { display: none; }

.sticky-header {
    position: sticky; top: 0; left: 0; right: 0; z-index: 10;
}
.panel-header {
    padding: 10px 15px; background: var(--hover-bg); border-bottom: 1px solid var(--border-color);
    font-weight: bold; color: var(--text-sub); display: flex; justify-content: space-between; align-items: center;
}
#analysis-panel .panel-header,
#search-result-panel .panel-header {
    justify-content: space-between;
    position: relative;
    padding-left: 10px;
    padding-right: 40px;
    cursor: default;
}
#analysis-panel .panel-header .close-icon,
#search-result-panel .panel-header .close-icon {
    position: relative;
    left: 0;
    cursor: pointer;
    color: #424242;
    font-weight: bold;
    z-index: 20;
    pointer-events: auto;
    flex-shrink: 0;
}
#analysis-panel .panel-header .close-icon:hover,
#search-result-panel .panel-header .close-icon:hover {
    color: #212121;
}

/* 단일창 사전 패널 - 다중창 플로팅 사전창 스타일과 통일 */
#lexicon-panel .lexicon-header-unified {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 44px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 600;
    border-bottom: none;
}

#lexicon-panel .lexicon-header-unified .lexicon-history-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

#lexicon-panel .lexicon-header-unified .lexicon-history-btn .material-icons {
    font-size: 20px;
    color: white !important;
}

#lexicon-panel .lexicon-header-unified .lexicon-history-btn:hover .material-icons {
    color: white !important;
}

#lexicon-panel .lexicon-header-unified .panel-title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    color: white !important;
}

#lexicon-panel .lexicon-header-unified .close-icon {
    cursor: pointer;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
}

#lexicon-panel .lexicon-header-unified .close-icon:hover {
    color: white;
}
.scrollable-content { flex: 1; overflow-y: auto; padding: 15px; }
#bible-list.scrollable-content { padding: 8px 10px; background: var(--card-bg); }
#lexicon-panel .scrollable-content { padding-bottom: 5px; }


/* 원어 사전 본문 색상 */
#lexicon-content {
    color: #212121;
}

/* 원어 사전 모달 스크롤 */
.modal-content.lexicon-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.modal-content.lexicon-content #modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

/* ================================================================
   반응형 Breakpoints 정의
   - 초소형 (~ 400px): Z Fold 접힌 상태
   - 핸드폰 (401 ~ 767px): 일반 모바일
   - 태블릿 (768 ~ 1024px): 태블릿 + Z Fold 펼친 상태
   - 데스크탑 (1025px ~): 노트북/데스크탑
   ================================================================ */

.mobile-only { display: none; }

/* 모바일 전용 (~ 767px) */
@media (max-width: 767px) {
    .mobile-only { display: inline-block; }
    :root { --top-nav-height: 48px; }
    
    /* 상단 내비게이션바 - 가로 레이아웃 강제 적용 */
    .nav-container.top-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        overflow: hidden;
        gap: 4px;
        height: var(--top-nav-height);
        box-sizing: border-box;
    }
    /* 아이콘 그룹 - 좌우 스크롤 */
    .nav-container.top-nav .nav-icons-group {
        flex: 1;
        min-width: 0;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding: 0 4px;
    }
    
    .nav-container.top-nav .nav-icons-group::-webkit-scrollbar {
        display: none;
    }
    
    /* 아이콘 버튼 축소 방지 */
    .nav-container.top-nav .nav-icons-group .icon-btn-nav {
        flex-shrink: 0;
    }
    
    /* 우측 고정 아이콘들 (레이아웃, 설정) */
    .nav-container.top-nav .nav-right-fixed {
        flex-shrink: 0;
        z-index: 10;
    }
    
    /* 레이아웃 선택기 - 우측 고정 */
    .nav-container.top-nav .layout-selector-wrapper.nav-right-fixed {
        padding-left: 4px;
    }
    
    /* 설정 아이콘 - 우측 고정 */
    .nav-container.top-nav .settings-wrapper.nav-right-fixed {
        padding-left: 4px;
    }
    
    /* 하단 내비게이션바 좌우 스크롤 */
    
    
    .nav-container.top-nav .nav-left-group,
    .nav-container.top-nav .nav-right-group,
    
    .panel-header {
        padding-right: 20px;
    }
    
    /* 모바일: 레이아웃 선택기 표시 */
    
    /* 모바일: 레이아웃 옵션 - single과 2row만 표시 */
    .layout-dropdown-item[data-layout="2col"],
    .layout-dropdown-item[data-layout="3col"],
    .layout-dropdown-item[data-layout="4col"],
    .layout-dropdown-item[data-layout="3row"],
    .layout-dropdown-item[data-layout="2x2"],
    .layout-dropdown-item[data-layout="3x2"] {
        display: none !important;
    }
    
    /* 모바일: 레이아웃 드롭다운 크기 조정 */
    .layout-dropdown {
        min-width: 200px;
        right: 0;
        left: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    /* 모바일: 프리셋 아이템 스타일 */
    .layout-preset-item {
        padding: 10px 12px;
        min-height: 44px;
    }
    
    /* 모바일: 멀티패널 컨테이너 패딩 최소화 */
    .multi-panel-container {
        padding: 0;
        gap: 2px;
    }
    
    /* 모바일: 패널 테두리 최소화 */
    .multi-panel {
        border-radius: 0;
        border-width: 1px;
    }
    
    /* 모바일 세로모드 - 복사 모달 전체 화면 (설정 모달은 별도 규칙 사용) */
    #copy-modal .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    #copy-modal {
        align-items: stretch;
    }
    
    /* 터치 영역 확대 - 최소 44px */
    .icon-btn, .icon-btn-nav {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .verse-num {
        width: 24px;
        min-width: 24px;
        min-height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem !important;
        text-align: center;
    }
    
    .grid-btn {
        min-height: 44px;
    }
    
    .action-btn, .save-btn, .cancel-btn, .copy-single-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    #current-location {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    #commentary-area {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        top: auto;
        width: 100%;
        max-width: none;
        height: 50%;
        max-height: 80%;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.3); 
        transform: translateY(100%); 
        background-color: var(--card-bg);
        z-index: 2000;
        display: flex !important;
        border-radius: 15px 15px 0 0;
        transition: transform 0.3s ease;
    }
    #commentary-area.show { transform: translateY(0); }
    
    #commentary-area .panel-header {
        border-radius: 15px 15px 0 0;
        padding-top: 15px;
    }
    #commentary-area .panel-header::before {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
    }
    
    /* 모바일에서 패널은 오버레이로 표시 */
    #analysis-panel {
        position: fixed;
        top: 0; bottom: 0;
        left: 0;
        width: 85%; max-width: 400px;
        display: flex;
        z-index: 2500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    }
    #analysis-panel.show { transform: translateX(0); }
    
    /* 모바일에서 사전창은 왼쪽에서 슬라이드인 (원전분해창과 동일) */
    #lexicon-panel {
        position: fixed;
        top: 0; bottom: 0;
        left: 0;
        width: 85%; max-width: 400px;
        display: flex;
        z-index: 2500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        border-radius: 0;
    }
    #lexicon-panel.show { transform: translateX(0); }
    
    /* 검색 결과 패널 - 모바일에서 전체화면 */
    #search-result-panel {
        position: fixed;
        top: 0; bottom: 0;
        left: 0; right: 0;
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        z-index: 2600;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        background: var(--bg-color);
        visibility: hidden;
    }
    #search-result-panel.show {
        transform: translateX(0);
        visibility: visible;
    }
    
    /* 모바일 검색 결과 패널 헤더 스타일 */
    #search-result-panel .panel-header {
        padding: 12px 15px;
    }
    
    #search-result-panel .panel-header .back-icon {
        display: inline-block !important;
        font-size: 24px;
        color: var(--primary-color);
        margin-right: 10px;
    }
    
    #search-result-panel .panel-header .close-icon {
        display: none !important;
    }
    
    .nav-left-group { gap: 5px; }
    .location-text { font-size: 1rem; }
}

/* 높이가 긴 (좁고 긴) 기종: Galaxy Fold 접힌 화면 등 
   max-aspect-ratio: 9/18 = 가로/세로 비율이 0.5 이하인 기기 (세로가 긴 기기) */
@media (max-width: 767px) and (max-aspect-ratio: 9/18) {
    .multi-panel-container {
        top: var(--top-nav-height);
    }
    
    /* 상단 내비게이션바 위치 고정 확인 */
    .nav-container.top-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
}

/* 극단적으로 긴 화면 (Galaxy Fold 접힌 화면, 21:9 이상) */
@media (max-width: 500px) and (max-aspect-ratio: 9/20) {
    .multi-panel-container {
        top: var(--top-nav-height);
    }
}

/* ==================== 좁은 화면 레이아웃 시스템 (Galaxy Fold 접힌 상태 등) ==================== */
/* body.narrow-screen-mode가 활성화되면 레이아웃 드롭다운에서 특정 항목만 표시 */

/* Galaxy Fold 접힌 화면: 펼친 화면과 동일한 비율로 확대 (1.35x) */
body.narrow-screen-mode {
    zoom: 1.35;
}

/* 기본: 일반 화면에서는 모든 항목 표시 */
.layout-normal-only {
    display: flex;
}

.layout-narrow-only {
    display: none !important;
}

/* 좁은 화면 모드일 때 */
body.narrow-screen-mode .layout-normal-only {
    display: none !important;
}

body.narrow-screen-mode .layout-narrow-only {
    display: flex !important;
}

body.narrow-screen-mode .layout-dropdown-section-title.layout-narrow-only {
    display: block !important;
}

/* 좁은 화면에서도 보이는 항목 */
body.narrow-screen-mode .layout-narrow-show {
    display: flex !important;
}

/* 좁은 화면 레이아웃 드롭다운 컴팩트 스타일 */
body.narrow-screen-mode .layout-dropdown {
    min-width: 160px;
    padding: 6px 0;
}

body.narrow-screen-mode .layout-dropdown-item {
    padding: 8px 12px;
}

body.narrow-screen-mode .layout-preset-item {
    padding: 8px 10px;
    min-height: 38px;
}

body.narrow-screen-mode .preset-actions button {
    padding: 4px 6px;
    font-size: 0.85rem;
}

/* ==================== 좁은 화면 레이아웃 시스템 끝 ==================== */

.bible-list-unified {
    list-style: none;
    margin: 0;
    padding: 0;
}

.verse-item { padding: 4px 2px 4px 2px; border-bottom: 1px solid var(--border-color); display: flex; align-items: flex-start; gap: 6px; cursor: pointer; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.verse-item:first-child { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
    .verse-item:hover:not(.touch-active) { background-color: var(--hover-bg); transition: background-color 0.3s ease; }
}
.verse-item.selected { background-color: var(--selected-bg); }
.verse-item.highlight-verse { 
    animation: pulse-highlight 0.5s ease-in-out; 
    box-shadow: 0 0 0 3px var(--sapphire-blue);
}

@keyframes pulse-highlight {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.verse-num { 
    font-weight: bold; 
    color: var(--primary-color); 
    font-size: 0.8rem !important; 
    width: 24px;
    min-width: 24px;
    flex-shrink: 0;
    padding: 2px 3px;
    background: linear-gradient(135deg, #E8F4FD 0%, #D6EAF8 100%);
    border-radius: 4px;
    margin-right: 4px;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;
}

/* 관주 아이콘 스타일 */
.crossref-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: pointer;
    color: #8B008B;
    vertical-align: middle;
    transition: transform 0.2s, color 0.2s;
}

.crossref-icon .material-icons {
    font-size: 1rem;
}

.crossref-icon:hover {
    color: #6A006A;
    transform: scale(1.2);
}

.crossref-icon:active {
    transform: scale(0.95);
}

/* 다크모드 관주 아이콘 */
.dark-mode .crossref-icon {
    color: #DDA0DD;
}

.dark-mode .crossref-icon:hover {
    color: #EE82EE;
}
.left-icon-btn:hover { background-color: var(--hover-bg); color: var(--text-color); }

.analysis-icon { font-weight: bold; color: #dc3545; font-family: "Ezra SIL SR", "Noto Sans Hebrew", serif; }
.analysis-icon:hover { color: #a71d2a; transform: scale(1.1); }
.comm-icon { color: #ccc; } 
.comm-icon.has-content { color: var(--primary-color); }
.comm-icon:hover { transform: scale(1.1); }
.copy-icon-left { color: #666; font-size: 1.1rem; }
.copy-icon-left:hover { color: #28a745; }

.text-column { flex: 1; }

/* verse-content: 병렬 버전을 수직으로 쌓기 */
.verse-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.verse-line { margin-bottom: 0; position: relative; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; width: 100%; }
.verse-line.hidden { display: none !important; }
.verse-line:last-child { margin-bottom: 0; }

/* 병렬보기에서 각 버전 라인을 블록으로 표시 */
/* 한글 텍스트는 block으로 자연스러운 텍스트 흐름 */
.verse-line.korean-text {
    display: block;
    width: 100%;
}
.verse-line.english-text,
.verse-line.hebrew-text,
.verse-line.greek-text {
    display: block;
    width: 100%;
}
/* 모든 버전의 Strong's 코드 단어가 인라인으로 이어지도록 */
.verse-line .strong-word,
.verse-line .hebrew-word {
    display: inline;
}

.korean-text { 
    font-size: var(--korean-size, 1.25rem) !important; 
    color: var(--korean-color, var(--text-color)) !important; 
    font-weight: 700; 
    line-height: 1.5; 
    font-family: var(--korean-font, "Noto Serif KR", serif) !important; 
}
/* 한글 성경 span 요소들이 줄바꿈 없이 이어지도록 */
.korean-text .strong-word,
.korean-verse .strong-word { display: inline; }
/* 패널용 성경 텍스트 - 메인 성경창과 동일한 스타일 적용 */
.korean-verse { 
    font-size: var(--korean-size, 1.25rem); 
    color: var(--korean-color, var(--text-color)) !important; 
    font-weight: 700; 
    line-height: 1.5; 
    font-family: var(--korean-font, "Noto Serif KR", serif); 
    display: inline;
}
.english-text { 
    display: block; 
    font-size: var(--english-size, 1rem) !important; 
    color: var(--english-color, #424242) !important;
    text-align: left; 
    font-family: var(--english-font, "Noto Serif", serif) !important; 
    margin-top: 0; 
    width: 100%; 
}
.english-verse { 
    display: block; 
    font-size: var(--english-size, 1rem); 
    color: var(--english-color, #424242) !important;
    text-align: left; 
    font-family: var(--english-font, "Noto Serif", serif); 
    margin-top: 0; 
    width: 100%; 
}
.hebrew-text { 
    display: block; 
    font-size: var(--uvs-hebrew-font-size, var(--hebrew-size, 0.9rem)); 
    color: var(--uvs-hebrew-font-color, var(--hebrew-color, #353535)); 
    font-family: var(--uvs-hebrew-font-family, var(--hebrew-font, "Ezra SIL SR", "Noto Sans Hebrew", serif)); 
    direction: rtl;
    margin-top: 2px; 
    width: 100%; 
    text-align: right;
    line-height: 1.4;
}
.greek-text { 
    display: block; 
    font-size: var(--uvs-greek-font-size, var(--greek-size, 1.3rem)); 
    color: var(--uvs-greek-font-color, var(--greek-color, #353535)); 
    font-family: var(--uvs-greek-font-family, var(--greek-font, "Gentium Plus", "Noto Serif", serif)); 
    margin-top: 0; 
    width: 100%; 
    direction: ltr;
    text-align: left;
    line-height: 1.4;
}

.hebrew-word { cursor: pointer; }
.hebrew-word:hover { color: blue; text-decoration: underline; }
.greek-word { cursor: pointer; }
.greek-word:hover { color: blue; text-decoration: underline; }
.maqqef-separator { color: inherit; cursor: default; user-select: none; }

.missing-verse-marker {
    color: #888;
    cursor: help;
    position: relative;
    border-bottom: 1px dotted #888;
}

.missing-verse-marker::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.missing-verse-marker:hover::after {
    opacity: 1;
    visibility: visible;
}

body.night-mode .missing-verse-marker::after {
    background: #555;
}
.strong-word { cursor: pointer; text-decoration: none; }
.strong-word:hover { background-color: var(--hover-bg); text-decoration: underline; text-decoration-style: dotted; }
/* 언어별 스트롱 단어 색상 - 글자체 설정의 색상 적용 */
.strong-word.kor { color: var(--korean-color, var(--text-color)) !important; }
.strong-word.kor:hover { color: var(--korean-color, var(--text-color)) !important; filter: brightness(0.7); }
.strong-word.eng { color: var(--english-color, #424242) !important; }
.strong-word.eng:hover { color: var(--english-color, #424242) !important; filter: brightness(0.7); }
.strong-code { cursor: pointer; color: var(--primary-color); font-weight: bold; }
.strong-code:hover { background-color: var(--hover-bg); text-decoration: underline; }

/* 주해창 원어 단어 스타일 (파란색, 폰트 크게) */
.commentary-orig-word {
    color: #0066cc;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    font-family: "Ezra SIL SR", "Gentium Plus", "Noto Sans Hebrew", "Noto Serif", serif;
}
.commentary-orig-word:hover {
    text-decoration: underline;
}

#commentary-display { white-space: pre-wrap; line-height: 1.8; font-size: 1.1rem; min-height: 100px; color: var(--text-color); }
textarea { width: 100%; height: 300px; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical; font-family: "Noto Sans KR", "Noto Sans", sans-serif; box-sizing: border-box; margin-bottom: 10px; background: var(--bg-color); color: var(--text-color); }
.action-btn { width: 100%; padding: 10px; background: #333; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }
.btn-group { display: flex; gap: 10px; }
.save-btn { flex: 1; background: #28a745; padding: 10px; color: white; border: none; border-radius: 4px; cursor: pointer; }
.cancel-btn { flex: 1; background: #dc3545; padding: 10px; color: white; border: none; border-radius: 4px; cursor: pointer; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-bg); display: flex; justify-content: center; align-items: center; z-index: 2000; }
/* 책/장/절 선택 모달은 전체화면 노트 모달(z-index: 9999) 위에 표시되어야 함 */
#nav-modal.modal-overlay, #chapter-nav-modal.modal-overlay, #verse-nav-modal.modal-overlay { z-index: 10500; }
.modal-content { background: var(--card-bg); padding: 20px; border-radius: 8px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; position: relative; color: var(--text-color); }
.large-modal { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.large-modal .modal-header { flex-shrink: 0; position: sticky; top: 0; background: var(--card-bg); z-index: 10; }
.large-modal .grid-container { flex: 1; overflow-y: auto; max-height: calc(85vh - 100px); margin-top: 0; padding-top: 12px; }
.medium-modal { max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.medium-modal .modal-header { flex-shrink: 0; position: sticky; top: 0; background: var(--card-bg); z-index: 10; border-bottom: 1px solid var(--border-color); }
.medium-modal .grid-container { flex: 1; overflow-y: auto; padding-top: 12px; }

/* Bottom Sheet 패턴 - 모바일 친화적 하단 슬라이드업 모달 */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bottom-sheet-overlay.show {
    display: block;
    opacity: 1;
}
.bottom-sheet-content {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 90%;
    max-width: 500px;
    background: var(--card-bg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    max-height: 80vh;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 4001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bottom-sheet-overlay.show .bottom-sheet-content {
    transform: translateX(-50%) translateY(0);
}
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}
body.dark-mode .bottom-sheet-handle {
    background: #555;
}
.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.bottom-sheet-header h2 {
    margin: 0;
    font-size: 0.9rem;
    flex: 1;
    text-align: center;
}
.bottom-sheet-header .close-btn {
    position: absolute;
    right: 16px;
    top: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-sub);
    line-height: 1;
}
.bottom-sheet-body {
    padding: 16px 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* 성경/장/절 선택 Bottom Sheet 스타일 */
.nav-bottom-sheet .nav-sheet-content {
    max-height: 70vh;
}
.nav-bottom-sheet .nav-sheet-header {
    padding-bottom: 8px;
}
.nav-bottom-sheet .nav-testament-tabs-wrapper {
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--border-color);
}
.nav-bottom-sheet .nav-testament-tabs-wrapper .range-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.nav-bottom-sheet .nav-testament-tabs-wrapper .range-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
}
.nav-bottom-sheet .nav-testament-tabs-wrapper .range-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.nav-bottom-sheet .nav-testament-tabs-wrapper .range-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nav-bottom-sheet .nav-sheet-body {
    padding: 16px 20px 24px;
    overflow-y: auto;
    max-height: calc(70vh - 140px);
}
.nav-bottom-sheet .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}
.nav-bottom-sheet .number-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
.nav-bottom-sheet .grid-btn {
    padding: 12px 8px;
    text-align: center;
    border-radius: 8px;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.nav-bottom-sheet .grid-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.nav-bottom-sheet .grid-btn.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 검색 모달 - 상단/하단 내비게이션 사이 고정 높이 */
/* 검색 모달 기본 스타일은 모바일에서만 적용 - 태블릿 이상에서는 floating-panel 스타일 사용 */

/* 검색 결과 영역 내 히브리어 폰트 크기 1.1배 */
#popup-search-results-section .search-text[lang="he"],
#popup-search-results .search-text[lang="he"] {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

/* 전체 + 검색 내역 버튼 같은 줄 배치 */
.search-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 일반 폰 (767px 이하): 검색창 전체 너비 */
@media (max-width: 767px) {
    #search-modal {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2500 !important;
        background: var(--bg-color) !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    #search-modal.show {
        transform: translateX(0);
    }
    #search-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

#search-modal .search-modal-body {
    flex: 1;
    overflow-y: auto;
}

/* 검색 모달 반응형 스타일 */
@media (max-width: 500px) {
    .search-bottom-row {
        flex-direction: column;
        align-items: stretch;
    }
    .search-operators {
        justify-content: center;
        width: 100%;
    }
    .search-range-container {
        align-items: stretch;
        width: 100%;
    }
    .search-range-container > div {
        justify-content: center !important;
    }
    .search-range-display {
        text-align: center;
    }
}

/* 성경 용례 모달 스타일 */
.word-occurrences-modal-content {
    max-width: 850px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.word-occurrences-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--border-color);
}
.occurrences-lemma {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    font-family: "Ezra SIL SR", "Gentium Plus", "Noto Serif Hebrew", serif;
}
.occurrences-transliteration {
    font-size: 0.9rem;
    color: var(--text-sub);
    font-style: italic;
}
.occurrences-count {
    margin-left: auto;
    font-size: 0.95rem;
    color: var(--text-sub);
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
}
.word-occurrences-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    padding: 0 10px;
    background: var(--card-bg);
}
.occurrences-tab {
    flex: 1;
    padding: 12px 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-sub);
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.occurrences-tab:hover {
    color: var(--primary-color);
    background: var(--hover-bg);
}
.occurrences-tab.active {
    color: var(--primary-color);
    font-weight: bold;
    border-bottom-color: var(--primary-color);
}
.occurrences-tab .tab-count {
    font-size: 0.8rem;
    background: var(--hover-bg);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
}
.occurrences-tab.active .tab-count {
    background: var(--primary-color);
    color: white;
}

/* 용례 검색 바 */
.occurrences-search-bar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}
.occurrences-search-bar .search-icon {
    color: var(--text-sub);
    font-size: 1.5rem;
}
.occurrences-search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.95rem;
    background: var(--bg-color);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s;
}
.occurrences-search-bar input:focus {
    border-color: var(--primary-color);
}
.occurrences-search-bar input::placeholder {
    color: var(--text-sub);
    font-size: 0.9rem;
}
.occurrences-search-bar .search-result-count {
    font-size: 0.85rem;
    color: var(--text-sub);
    white-space: nowrap;
}
.occurrences-search-bar .search-clear-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.occurrences-search-bar .search-clear-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}
.occurrences-search-bar .search-clear-btn .material-icons {
    font-size: 0.9rem;
}

/* 검색 하이라이트 */
.occurrence-highlight {
    background-color: rgba(255, 235, 59, 0.5);
    padding: 0 2px;
    border-radius: 2px;
}
body.dark-mode .occurrence-highlight {
    background-color: rgba(255, 193, 7, 0.3);
}

.word-occurrences-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}
.morph-filter-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    min-width: 100px;
}
.morph-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}
.apply-filter-btn {
    padding: 6px 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.apply-filter-btn:hover {
    background: #0d47a1;
}
.reset-filter-btn {
    padding: 6px 15px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.reset-filter-btn:hover {
    background: #5a6268;
}
.occurrences-expand-controls {
    display: flex;
    justify-content: flex-end;
    padding: 5px 15px;
    border-bottom: 1px solid var(--border-color);
}
.toggle-all-btn {
    padding: 5px 12px;
    background: #f5f5f5;
    color: #424242;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.toggle-all-btn:hover {
    background: #e0e0e0;
    border-color: #bbb;
}
.toggle-all-btn:active {
    background: #d5d5d5;
}
.word-occurrences-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    max-height: calc(90vh - 200px);
}
.occurrences-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-sub);
    font-size: 0.9rem;
}
.occurrence-category {
    margin-bottom: 15px;
}
.category-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.category-header:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
}
.category-header .material-icons {
    font-size: 1.5rem;
    margin-right: 20px;
    transition: transform 0.2s;
}
.category-header.collapsed .material-icons {
    transform: rotate(-90deg);
}
.category-title {
    font-weight: bold;
    color: var(--primary-color);
    flex: 1;
}
/* 카테고리 토글 버튼 - 전체 펼치기와 동일 스타일 */
.category-toggle-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: #f5f5f5;
    color: #424242;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    margin-right: 20px;
    white-space: nowrap;
}
.category-toggle-btn:hover {
    background: #e0e0e0;
    border-color: #bbb;
}
.category-toggle-btn:active {
    background: #d5d5d5;
}
.category-toggle-btn .material-icons {
    font-family: 'Material Icons' !important;
    font-size: 1rem !important;
}
.category-toggle-text {
    font-size: 0.75rem;
}
.category-header:hover .category-toggle-btn {
    background: #e8e8e8;
}
.category-count {
    font-size: 0.85rem;
    color: var(--text-sub);
    background: white;
    padding: 2px 10px;
    border-radius: 12px;
}
.category-items {
    padding-left: 15px;
    margin-top: 5px;
}
.category-items.hidden {
    display: none;
}
.subcategory-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-top: 5px;
    cursor: pointer;
    font-size: 0.95rem;
}
.subcategory-header:hover {
    background: #eeeeee;
}
.subcategory-title {
    flex: 1;
    color: var(--text-color);
}
.subcategory-count {
    font-size: 0.8rem;
    color: var(--text-sub);
}
.subcategory-items {
    padding-left: 10px;
}
.subcategory-items.hidden {
    display: none;
}
.occurrence-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}
.occurrence-item:hover {
    background: var(--hover-bg);
}
.occurrence-item:last-child {
    border-bottom: none;
}
.occurrence-ref {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.occurrence-ref-text {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
}
.occurrence-surface {
    font-size: 0.9rem;
    font-family: "Ezra SIL SR", "Gentium Plus", "Noto Serif Hebrew", serif;
    color: #1565c0;
}
.occurrence-morph {
    font-size: 0.8rem;
    color: var(--text-sub);
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}
.occurrence-meaning {
    font-size: 0.85rem;
    color: #7D0541;
    font-weight: 700;
}
.occurrence-korean {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
    margin-top: 5px;
}
.lexicon-content-wrapper {
    position: relative;
    text-align: left;
    line-height: 1.6;
    font-size: 1rem;
    padding: 10px 10px 0 10px;
    color: #212121;
}
.lexicon-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.lexicon-header-word {
    flex: 1;
    min-width: 0;
}
.lexicon-transliteration {
    font-size: 0.9rem;
    color: #008080;
    margin-top: 5px;
    font-family: "Noto Sans KR", "Noto Sans", sans-serif;
    text-align: left;
}
.occurrences-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: var(--primary-color);
    border: 1px solid #90caf9;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.occurrences-btn:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: translateY(-1px);
}
.occurrences-btn .material-icons {
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .word-occurrences-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .word-occurrences-info {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 15px;
    }
    .occurrences-lemma {
        font-size: 1.5rem;
    }
    .word-occurrences-filters {
        padding: 8px 10px;
    }
    .morph-filter-select {
        min-width: 50px;
        font-size: 0.85rem;
    }
}

/* TTS 설정 모달 - 토라포션 모달 위에 표시 */
#tts-settings-modal.modal-overlay {
    z-index: 11000 !important;
}

/* 용례 모달 - 원어 사전 패널 위에 표시 (z-index: 2500보다 높게) */
#word-occurrences-modal.modal-overlay {
    padding: 0;
    z-index: 10500 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.5) !important;
}
#word-occurrences-modal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 10501 !important;
    background: var(--card-bg) !important;
}
#word-occurrences-modal .modal-content * {
    pointer-events: auto !important;
}
#word-occurrences-modal .modal-header {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}
#word-occurrences-modal .close-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 20;
}
#word-occurrences-modal .word-occurrences-tabs {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}
#word-occurrences-modal .occurrences-tab {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 15;
}
#word-occurrences-modal .occurrences-expand-controls {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}
#word-occurrences-modal .toggle-all-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 15;
}
#word-occurrences-modal button,
#word-occurrences-modal input,
#word-occurrences-modal select {
    pointer-events: auto !important;
    cursor: pointer;
}
@media (min-width: 768px) {
    #word-occurrences-modal .modal-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 90% !important;
        height: auto !important;
        max-width: 850px !important;
        max-height: 90vh !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 8px !important;
    }
}
.small-modal { max-width: 350px; }

/* 설정 모달 헤더 고정 */
#settings-modal .modal-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 410px;
    overflow: hidden;
}
#settings-modal .modal-header {
    padding: 15px 20px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}
#settings-modal .settings-options {
    padding: 10px 20px 20px 20px;
    flex: 1;
    overflow-y: auto;
    
    position: relative;
    z-index: 1;
}



.right-aligned-modal {
    margin-right: 20px;
    align-self: flex-start;
    margin-top: 10px;
}

/* 드래그 가능한 모달 헤더 */
.draggable-modal .modal-content {
    position: absolute;
}
.modal-header {
    cursor: col-resize;
    user-select: none;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}
.draggable-header {
    cursor: grab;
    user-select: none;
}

/* 수평 드래그 핸들 (검색 모달, 노트 모달 등) */
.horizontal-drag-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    cursor: col-resize;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #bbb;
    border-radius: 3px;
    transition: background 0.2s;
}

.horizontal-drag-handle:hover,
.horizontal-drag-handle:active {
    background: var(--primary-color);
}

/* 플로팅 패널 리사이저 (좌우 너비 조절) - 기본적으로 숨김 */
.floating-resize-handle {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 20;
    background: transparent;
    transition: background 0.2s;
}

/* 태블릿 이상에서만 리사이저 표시 */
@media (min-width: 768px) {
    .floating-resize-handle {
        display: block;
    }
}

.floating-resize-handle:hover,
.floating-resize-handle:active {
    background: var(--primary-color);
}

/* 왼쪽 패널의 오른쪽 리사이저 */
.floating-resize-handle.resize-right {
    right: 0;
}

/* 오른쪽 패널의 왼쪽 리사이저 */
.floating-resize-handle.resize-left {
    left: 0;
}

.close-btn { position: absolute; top: 15px; right: 15px; font-size: 24px; cursor: pointer; color: #424242; z-index: 10; font-weight: bold; }
.sticky-close { position: sticky; top: 0; float: right; background: var(--card-bg); border-radius: 50%; padding: 2px 8px; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.close-btn:hover { color: #212121; }

.search-item { padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; }
.search-item:hover { background: var(--hover-bg); transform: translateX(5px); }
.search-ref { font-weight: bold; color: var(--primary-color); font-size: 0.9rem; margin-bottom: 5px; }
.search-text { font-size: 1rem; line-height: 1.4; color: var(--text-color); }
mark { background-color: #ffeeba; color: #333; padding: 0 2px; border-radius: 2px; }

/* 원전분해 팝업 여백 줄이기 */
.analysis-header-line {
    font-size: 1.3rem; font-weight: bold; color: var(--text-color);
    margin-bottom: 3px; padding-bottom: 3px; border-bottom: 2px solid var(--primary-color);
    text-align: center;
}
.analysis-container { display: flex; flex-direction: column; gap: 4px; }
.analysis-word-item { 
    margin-bottom: 0.6em; 
    line-height: 1.5; 
    font-size: 1.05rem; 
    padding-bottom: 0.5em;
    border-bottom: 1px dotted var(--border-color);
}

.orig-word { font-size: 1.6rem; font-family: "Ezra SIL SR", "Gentium Plus", "Noto Sans Hebrew", "Noto Serif", serif; font-weight: bold; color: #00008B; cursor: pointer; }
.analysis-orig-word { font-size: 1.6rem; font-family: "Ezra SIL SR", "Gentium Plus", "Noto Sans Hebrew", "Noto Serif", serif; font-weight: bold; color: var(--primary-color); cursor: pointer; }
.analysis-orig-word:hover { text-decoration: underline; }
.meaning-text { color: #7D0541; font-weight: bold; }
.grammar-arrow { color: #999; font-size: 0.9rem; margin-right: 5px; }

.lexicon-huge-word { font-size: 2rem; font-weight: bold; color: var(--primary-color); font-family: "Ezra SIL SR", "Gentium Plus", "Noto Sans Hebrew", "Noto Serif", serif; margin-right: 1.5em; }
.lexicon-meaning-line { color: #7D0541; font-weight: 600; font-size: 1.1rem; display: inline; }
.lexicon-header-section {
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.lexicon-separator { 
    border-bottom: 2px solid var(--primary-color); 
    margin: 8px 0; 
    width: 100%; 
}

.lexicon-body-content {
    text-align: left;
}

/* 복사 팝업 레이블 스타일 */
.copy-row { display: flex; align-items: flex-end; margin-bottom: 15px; justify-content: space-between; gap: 10px; }
.copy-btn-small { 
    flex: 1; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); 
    border-radius: 4px; cursor: pointer; font-size: 0.9rem; color: var(--text-color);
    text-align: center; white-space: nowrap;
}
.copy-btn-small:hover { background: var(--hover-bg); border-color: var(--primary-color); }
.range-selector { display: flex; align-items: flex-end; gap: 8px; flex: 1; }
.range-column { display: flex; flex-direction: column; flex: 1; }
.label-text-top { font-size: 0.75rem; color: var(--text-sub); margin-bottom: 4px; text-align: center; }
.verse-select { padding: 8px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); width: 100%; }

/* 새로운 복사 레이아웃 - 세로 배치 */
.copy-row-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 15px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
}

.copy-lang-label {
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.95rem;
    min-width: 50px;
}

.copy-single-btn {
    padding: 8px 14px;
    background: #4169E1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.copy-single-btn:hover {
    background: #3154b8;
    transform: translateY(-1px);
}

.copy-multi-separator {
    display: none;
}

.range-selector-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.verse-select-compact {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #4169E1;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
    flex: 1;
    max-width: 70px;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}

.verse-select-compact:focus {
    outline: 2px solid #4169E1;
    outline-offset: 1px;
}

.range-tilde {
    color: var(--text-sub);
    font-weight: bold;
}

.copy-range-btn {
    padding: 6px 12px;
    background: #4169E1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: 6px;
}

.copy-range-btn:hover {
    background: #3154b8;
    transform: scale(1.05);
}

/* 새로운 통합 복사 모달 스타일 */
.copy-language-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
}

.copy-lang-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
    white-space: nowrap;
}

.copy-lang-checkboxes {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.copy-lang-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.copy-lang-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4169E1;
    cursor: pointer;
}

.copy-lang-checkbox span {
    font-size: 0.9rem;
    color: var(--text-color);
}

/* 복사 모달 v2 - 언어별 버전 선택 */
.copy-language-selector-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
}

@media (max-width: 480px) {
    .copy-language-selector-v2 {
        grid-template-columns: 1fr;
    }
}

.copy-lang-group {
    background: var(--bg-section);
    border-radius: 6px;
    padding: 10px;
    border: 1px solid var(--border-color);
}

.copy-lang-group-header {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-color);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.copy-lang-versions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.copy-version-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.copy-version-checkbox:hover {
    background: var(--hover-bg);
}

.copy-version-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4169E1;
    cursor: pointer;
}

.copy-version-checkbox span {
    font-size: 0.85rem;
    color: var(--text-color);
}

.copy-version-checkbox.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.copy-version-checkbox.disabled span {
    color: #999;
}

.copy-version-checkbox.copy-version-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.copy-version-checkbox.copy-version-locked span {
    color: #999;
}

.copy-version-checkbox.copy-version-locked input[type="checkbox"] {
    cursor: not-allowed;
}

.copy-unified-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 15px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
}

.copy-single-btn-unified {
    width: 100%;
    max-width: 280px;
    padding: 12px 20px;
    background: #4169E1;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.2s;
}

.copy-single-btn-unified:hover {
    background: #3154b8;
    transform: translateY(-1px);
}

.copy-single-btn-unified:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.copy-range-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.copy-range-btn-unified {
    padding: 10px 16px;
    background: #4169E1;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.2s;
}

.copy-range-btn-unified:hover {
    background: #3154b8;
    transform: translateY(-1px);
}

.copy-range-btn-unified:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.copy-tip-section {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    background: #f0f7ff;
    border: 1px solid #d0e3ff;
    border-radius: 8px;
}

.copy-tip-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.copy-tip-content {
    flex: 1;
}

.copy-tip-content strong {
    display: block;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 4px;
}

.copy-tip-content p {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
    margin: 0;
}

.ai-translate-section {
    margin-top: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border: 1px solid #e0e8ff;
    border-radius: 10px;
}

.ai-translate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
}

.ai-translate-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ai-translate-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d0d8e8;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: var(--text-main);
}

.ai-translate-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a5dc9 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-translate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.3);
}

.ai-translate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ai-translate-btn .material-icons {
    font-size: 18px;
}

.ai-translate-result {
    margin-top: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e8ff;
}

.ai-translate-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 700;
}

.ai-translate-copy-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #d0d8e8;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.ai-translate-copy-btn .material-icons {
    font-size: 16px;
    color: var(--text-sub);
}

.ai-translate-copy-btn:hover {
    background: #f0f4ff;
}

.ai-translate-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
}

.ai-translate-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sub);
}

.ai-translate-loading .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e8ff;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

body.night-mode .ai-translate-section {
    background: linear-gradient(135deg, #1a2535 0%, #1e2a3d 100%);
    border-color: #2a3a4a;
}

body.night-mode .ai-translate-select {
    background: #1e2a3d;
    border-color: #3a4a5a;
    color: #e0e0e0;
}

body.night-mode .ai-translate-result {
    background: #1e2a3d;
    border-color: #3a4a5a;
}

body.night-mode .ai-translate-copy-btn {
    border-color: #3a4a5a;
}

body.night-mode .ai-translate-copy-btn:hover {
    background: #2a3a4a;
}

body.night-mode .copy-tip-section {
    background: #1a2a3a;
    border-color: #2a4a6a;
}

body.night-mode .copy-tip-content strong {
    color: #e0e0e0;
}

body.night-mode .copy-tip-content p {
    color: #aaa;
}

/* 빠른 액션 시트 */
.verse-action-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.action-sheet-content {
    position: relative;
    background: var(--bg-color, #fff);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 400px;
    max-height: 70vh;
    padding: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.action-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    margin-bottom: 12px;
}

.action-sheet-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color, #333);
}

.action-sheet-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-sheet-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.action-sheet-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 8px 0;
}

.action-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: var(--bg-secondary, #f5f5f5);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-sheet-item:hover {
    background: var(--primary-light, #e3f2fd);
    transform: translateY(-2px);
}

.action-sheet-item:active {
    transform: scale(0.95);
}

.action-sheet-item .material-icons {
    font-size: 1.5rem;
    color: var(--primary-color, #0F52BA);
}

.action-sheet-item .action-label {
    font-size: 0.85rem;
    color: var(--text-color, #333);
    font-weight: 700;
}

.action-sheet-range {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    text-align: center;
}

.action-sheet-range .range-hint {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin: 0 0 8px 0;
}

.action-sheet-range .range-display {
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
}

body.night-mode .action-sheet-content {
    background: var(--bg-color, #1a1a2e);
}

body.night-mode .action-sheet-item {
    background: var(--bg-secondary, #252545);
}

body.night-mode .action-sheet-item:hover {
    background: var(--primary-dark, #1a3a6a);
}

.verse-item.action-selected,
.verse-line.action-selected {
    background: rgba(15, 82, 186, 0.15) !important;
    border-left: 3px solid var(--primary-color, #0F52BA);
}

body.night-mode .verse-item.action-selected,
body.night-mode .verse-line.action-selected {
    background: rgba(65, 105, 225, 0.25) !important;
}

@media (max-width: 480px) {
    .action-sheet-body {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .action-sheet-item {
        padding: 12px 6px;
    }
    
    .action-sheet-item .material-icons {
        font-size: 1.3rem;
    }
    
    .action-sheet-item .action-label {
        font-size: 0.75rem;
    }
}

.highlight-yellow-btn {
    background: #ffeb3b;
    color: #333;
}

.highlight-yellow-btn:hover {
    background: #fdd835;
    transform: scale(1.05);
}

.highlight-green-btn {
    background: #4caf50;
}

.highlight-green-btn:hover {
    background: #43a047;
    transform: scale(1.05);
}

.highlight-pink-btn {
    background: #ff4081;
}

.highlight-pink-btn:hover {
    background: #f50057;
    transform: scale(1.05);
}

.verse-line.highlight-yellow,
.verse-item.highlight-yellow {
    background: rgba(255, 235, 59, 0.3) !important;
    box-shadow: inset 4px 0 0 #ffeb3b !important;
    border-radius: 4px !important;
}

.verse-line.highlight-green,
.verse-item.highlight-green {
    background: rgba(76, 175, 80, 0.3) !important;
    box-shadow: inset 4px 0 0 #4caf50 !important;
    border-radius: 4px !important;
}

.verse-line.highlight-pink,
.verse-item.highlight-pink {
    background: rgba(255, 64, 129, 0.3) !important;
    box-shadow: inset 4px 0 0 #ff4081 !important;
    border-radius: 4px !important;
}

.highlight-blue-btn {
    background: #2196f3;
}

.highlight-blue-btn:hover {
    background: #1976d2;
    transform: scale(1.05);
}

.highlight-clear-btn {
    background: #757575;
    color: white;
}

.highlight-clear-btn:hover {
    background: #616161;
    transform: scale(1.05);
}

.verse-line.highlight-blue,
.verse-item.highlight-blue {
    background: rgba(33, 150, 243, 0.3) !important;
    box-shadow: inset 4px 0 0 #2196f3 !important;
    border-radius: 4px !important;
}

/* 절 선택 상태 - verse-line 단위 */
.verse-item.multi-selected {
    background: rgba(65, 105, 225, 0.2);
    box-shadow: inset 4px 0 0 #4169E1;
    border-radius: 4px;
    margin: 2px 0;
}

.settings-options label { display: block; padding: 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.settings-options input { margin-right: 10px; }
.text-display-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.text-display-row .section-label { font-weight: bold; color: var(--text-sub); }
.text-display-row .inline-checkbox { display: inline-flex; align-items: center; margin: 0; padding: 0; border: none; cursor: pointer; }
.text-display-row .inline-checkbox input { margin-right: 5px; }

/* 언어 순서 설정 */
.lang-order-section {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.lang-order-section .section-label {
    font-weight: bold;
    color: var(--text-sub);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
}

.lang-order-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.lang-order-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lang-order-item:hover {
    background: var(--bg-color);
    border-color: var(--primary-color);
}

.lang-order-item.dragging {
    opacity: 0.5;
    background: var(--primary-color);
    cursor: grabbing;
}

.lang-order-item .drag-handle {
    color: var(--text-sub);
    font-size: 1.5rem;
    cursor: grab;
}

.lang-order-item .inline-checkbox {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

.lang-order-item .inline-checkbox input {
    margin-right: 5px;
}

/* 글자체 설정 */
.font-settings-section { padding: 15px 10px; background: var(--bg-color); }
.font-settings-title { text-align: center; font-size: 1.1rem; font-weight: bold; margin: 0 0 15px 0; color: var(--text-color); }

.font-tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); }
.font-tab { 
    flex: 1; padding: 10px; background: transparent; border: none; 
    border-bottom: 3px solid transparent; cursor: pointer; font-size: 0.9rem; 
    color: var(--text-sub); transition: all 0.2s; font-weight: 700;
}
.font-tab.active { border-bottom-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
.font-tab:hover { color: var(--text-color); }

.font-tab-content { display: none; padding: 10px 0; }
.font-tab-content.active { display: block; }

/* 폰에서 폰트 설정 배경 제거 */
@media (max-width: 767px) {
    .font-tab-content {
        background: transparent !important;
        border: none !important;
        padding: 10px 0 !important;
    }
    .font-settings-section {
        background: transparent !important;
        padding: 10px 0 !important;
    }
}

.font-sample { 
    padding: 20px; background: var(--card-bg); border: 1px solid var(--border-color); 
    border-radius: 8px; text-align: center; font-size: 1.1rem; line-height: 1.6; 
    margin-bottom: 20px; color: var(--text-color); min-height: 80px; display: flex; 
    align-items: center; justify-content: center;
}

.font-type-selector { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.font-type-btn { 
    flex: 1; max-width: 150px; padding: 12px 20px; background: var(--bg-color); 
    border: 2px solid var(--border-color); border-radius: 6px; cursor: pointer; 
    font-size: 0.9rem; font-weight: bold; color: var(--text-sub); transition: all 0.2s;
}
.font-type-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.font-type-btn:hover:not(.active) { border-color: var(--primary-color); color: var(--primary-color); }

.font-fixed-label { 
    text-align: center; padding: 12px; color: var(--text-sub); 
    font-size: 0.95rem; font-weight: 700; font-style: italic;
}

.font-size-control { 
    display: flex; align-items: center; gap: 10px; padding: 0 10px; 
    margin-bottom: 15px;
}
.size-label-left { font-size: 0.9rem; color: var(--text-sub); font-weight: bold; }
.size-label-right { font-size: 1.4rem; color: var(--text-sub); font-weight: bold; }
.font-size-slider { 
    flex: 1; -webkit-appearance: none; appearance: none; height: 6px; 
    border-radius: 3px; background: var(--border-color); outline: none;
}
.font-size-slider::-webkit-slider-thumb { 
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; 
    border-radius: 50%; background: var(--primary-color); cursor: pointer;
}
.font-size-slider::-moz-range-thumb { 
    width: 20px; height: 20px; border-radius: 50%; background: var(--primary-color); 
    cursor: pointer; border: none;
}


.font-apply-btn { 
    width: 100%; padding: 14px; background: #a84558; color: white; border: none; 
    border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; 
    transition: all 0.2s; margin-top: 10px;
}
.font-apply-btn:hover { background: #8f3a4a; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(168, 69, 88, 0.3); }
.font-apply-btn:active { transform: translateY(0); }

.grid-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 15px; padding: 0 20px; margin-left: auto; margin-right: auto; max-width: 95%; }
.grid-container.nt-grid { grid-template-columns: repeat(4, 1fr); }
.grid-container.ot-grid { grid-template-columns: repeat(5, 1fr); }
.number-grid { grid-template-columns: repeat(5, 1fr); }
.grid-btn { padding: 12px 8px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 5px; text-align: center; cursor: pointer; font-size: 1.05rem; color: var(--text-color); min-height: 48px; display: flex; align-items: center; justify-content: center; word-break: keep-all; white-space: nowrap; }
.grid-btn:hover { background: var(--hover-bg); border-color: #adb5bd; }
.grid-btn.selected { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.grid-btn.empty-cell { pointer-events: none; border: none; background: transparent; }

/* 모바일 성경 선택 그리드 (3글자 기준) */
@media (max-width: 480px) {
    .grid-container.ot-grid { grid-template-columns: repeat(4, 1fr); }
    .grid-container.nt-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 성경 선택 모달 헤더 레이아웃 */
.nav-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-modal-header h2 {
    flex: 0 0 auto;
    margin: 0;
}
/* 장/절 선택 모달 뒤로가기 버튼 */
.nav-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-right: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background-color 0.2s;
}
.nav-back-btn:hover {
    background-color: var(--hover-bg);
}
.nav-back-btn .material-icons {
    font-size: 24px;
}

/* 장 선택 옵션 토글 (헤더 내부 배치) */
.chapter-nav-option-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
    margin-left: 4px;
    flex-shrink: 0;
}

.chapter-nav-option-header input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin: 0;
}

.chapter-nav-option-header .toggle-label {
    white-space: nowrap;
}

body.night-mode .chapter-nav-option-header {
    color: #e0e0e0;
}

/* 장/절 선택 모달 헤더 레이아웃 개선 */
#chapter-nav-modal .modal-header,
#verse-nav-modal .modal-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 8px;
}

#chapter-nav-modal .modal-header h2,
#verse-nav-modal .modal-header h2 {
    flex: 1;
    text-align: right;
    margin: 0;
    padding-right: 10px;
    font-size: 1.1rem;
}

#chapter-nav-modal .modal-header .close-btn,
#verse-nav-modal .modal-header .close-btn {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
}

.range-tabs-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}
.range-tabs { 
    display: flex; 
    gap: 8px; 
}
.range-tab { 
    padding: 8px 20px; 
    background: var(--bg-color); 
    border: 2px solid var(--border-color); 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 1rem; 
    font-weight: 700;
    color: var(--text-color); 
    transition: all 0.2s; 
}
.range-tab:hover { background: var(--hover-bg); border-color: var(--primary-color); }
.range-tab.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.range-tab.ancient-text-btn {
    background: #f5f0e6;
    border-color: #c9b99a;
    color: #8b7355;
    font-size: 0.9rem;
}
.range-tab.ancient-text-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.range-tab.ancient-text-btn:hover:not(:disabled) {
    background: #ebe4d4;
    border-color: #a89070;
}
.toast { visibility: visible; min-width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 10px; position: fixed; z-index: 3000; left: 50%; bottom: 30px; transform: translateX(-50%); opacity: 1; transition: opacity 0.5s, bottom 0.5s; }
.toast.hidden { visibility: hidden; opacity: 0; bottom: 0; }

/* 관주 (Cross-Reference) 스타일 */
.btn-add-crossref {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    transition: all 0.2s;
}
.btn-add-crossref:hover {
    background: #0a3d8f;
    transform: scale(1.05);
}
.crossref-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 0.95rem;
}
.crossref-item {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.crossref-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.15);
}
.crossref-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.crossref-target {
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.crossref-target:hover {
    text-decoration: underline;
}
.crossref-target .material-icons {
    font-size: 1rem;
}
.crossref-delete-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s;
}
.crossref-delete-btn:hover {
    opacity: 1;
    background: rgba(231, 76, 60, 0.1);
}
.crossref-author {
    color: #888;
    font-size: 0.8rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.crossref-keyword {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), #3498db);
    color: white;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-bottom: 5px;
}
.crossref-description {
    color: #666;
    font-size: 0.9rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.keyword-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.keyword-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.keyword-suggestion-item:last-child {
    border-bottom: none;
}
.keyword-suggestion-item:hover {
    background: var(--hover-bg);
}
#crossref-save-btn:not(:disabled) {
    background: var(--primary-color);
    color: white;
    cursor: pointer;
}
#crossref-save-btn:not(:disabled):hover {
    background: #0a3d8f;
}

/* 원전분해 가로보기 모달 스타일 */
.fullscreen-modal {
    background: var(--bg-color);
    z-index: 3500;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.analysis-horizontal-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
}
.analysis-horizontal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    min-height: 44px;
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}
.analysis-header-left {
    flex: 0 0 auto;
    min-width: 50px;
}
/* 원전분해 모달에서 히스토리 좌우 화살표 숨기기 (드롭다운은 유지) */
#analysis-h-hist-back,
#analysis-h-hist-forward {
    display: none !important;
}
.analysis-verse-info {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.analysis-verse-info .clickable-verse {
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    font-size: 0.85rem;
}
.analysis-verse-info .clickable-verse:hover {
    background: rgba(255, 255, 255, 0.25);
    border-style: solid;
}
.analysis-verse-info .clickable-verse:active {
    transform: scale(0.98);
}
.analysis-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-shrink: 0;
    padding-right: 12px;
}

/* 원전분해 역본 선택 탭 */
.analysis-version-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.analysis-version-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.analysis-version-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}
.analysis-version-tab.active {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    font-weight: 600;
}
.analysis-version-tab .version-label-ot,
.analysis-version-tab .version-label-nt {
    display: none;
}
.analysis-version-tabs[data-testament="ot"] .version-label-ot {
    display: inline;
}
.analysis-version-tabs[data-testament="nt"] .version-label-nt {
    display: inline;
}

/* 가로모드 원전분해: Aleppo 버튼 (OT일 때만 표시) */
.analysis-version-tabs .version-ot-only {
    display: none;
}
.analysis-version-tabs[data-testament="ot"] .version-ot-only {
    display: flex;
}
.analysis-version-tabs[data-testament="nt"] .version-ot-only {
    display: none;
}

/* 가로모드 원전분해: TR 버튼 (NT일 때만 표시) */
.analysis-version-tabs .version-nt-only {
    display: none;
}
.analysis-version-tabs[data-testament="nt"] .version-nt-only {
    display: flex;
}
.analysis-version-tabs[data-testament="ot"] .version-nt-only {
    display: none;
}

/* 가로모드 원전분해: OT일 때 NT 라벨 숨기기 */
.analysis-version-tabs[data-testament="ot"] .version-label-nt {
    display: none;
}

/* 다중 창 원전분해 버전 탭 */
.analysis-version-tabs-multi {
    display: flex;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
    margin-left: 4px;
}
.analysis-version-tab-multi {
    background: transparent;
    border: 1.5px solid transparent;
    color: #4da6ff;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.analysis-version-tab-multi:hover {
    background: rgba(77, 166, 255, 0.1);
    border-color: #4da6ff;
}
.analysis-version-tab-multi.active {
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    border-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.analysis-version-tab-multi .version-label-ot,
.analysis-version-tab-multi .version-label-nt {
    display: none;
}
.analysis-version-tabs-multi[data-testament="ot"] .version-label-ot {
    display: inline;
}
.analysis-version-tabs-multi[data-testament="nt"] .version-label-nt {
    display: inline;
}
/* 기본값: data-testament가 없으면 OT 라벨 표시 */
.analysis-version-tabs-multi:not([data-testament]) .version-label-ot {
    display: inline;
}

/* TR 버튼: NT일 때만 표시 */
.analysis-version-tabs-multi .version-tr-only {
    display: none;
}
.analysis-version-tabs-multi[data-testament="nt"] .version-tr-only {
    display: flex;
}

/* OT일 때 NT 라벨 숨기기 (기본값) */
.analysis-version-tabs-multi[data-testament="ot"] .version-label-nt {
    display: none;
}
.analysis-version-tabs-multi[data-testament="ot"] .version-tr-only {
    display: none;
}

/* Aleppo 버튼: OT일 때만 표시 */
.analysis-version-tabs-multi .version-ot-only {
    display: none;
}
.analysis-version-tabs-multi[data-testament="ot"] .version-ot-only {
    display: flex;
}
.analysis-version-tabs-multi[data-testament="nt"] .version-ot-only {
    display: none;
}

/* TR 버튼: NT일 때만 표시 (version-nt-only) */
.analysis-version-tabs-multi .version-nt-only {
    display: none;
}
.analysis-version-tabs-multi[data-testament="nt"] .version-nt-only {
    display: flex;
}
.analysis-version-tabs-multi[data-testament="ot"] .version-nt-only {
    display: none;
}

/* 언어별 색상 구분 */
.analysis-version-tab-multi .version-hebrew {
    color: #d4a574;
    font-weight: 600;
}
.analysis-version-tab-multi .version-greek {
    color: #7cb3d4;
    font-weight: 600;
}
.analysis-version-tab-multi.active .version-hebrew {
    color: #c9956c;
}
.analysis-version-tab-multi.active .version-greek {
    color: #5a9cc4;
}

/* 다크모드 언어별 색상 */
.dark-mode .analysis-version-tab-multi .version-hebrew {
    color: #e8c4a0;
}
.dark-mode .analysis-version-tab-multi .version-greek {
    color: #8fc4e0;
}
.dark-mode .analysis-version-tab-multi.active .version-hebrew {
    color: #d4a574;
}
.dark-mode .analysis-version-tab-multi.active .version-greek {
    color: #7cb3d4;
}

/* 단일창 원전분해 버전 버튼 스타일 */
/* 네비바 원전분해 버전 토글 컨테이너 - 다중창 스타일 적용 */
.single-analysis-version-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
    margin-left: 4px;
}

.single-analysis-version-btn {
    background: transparent;
    border: 1.5px solid transparent;
    color: #666;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.single-analysis-version-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.single-analysis-version-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.05);
}
.single-analysis-version-btn.version-hebrew:not(.active):hover {
    background: rgba(212, 165, 116, 0.15);
    border-color: #d4a574;
}
.single-analysis-version-btn.version-greek:not(.active):hover {
    background: rgba(124, 179, 212, 0.15);
    border-color: #7cb3d4;
}

/* 단일창 언어별 색상 */
.single-analysis-version-btn.version-hebrew:not(.active) {
    color: #c9956c;
    border-color: #d4a574;
}
.single-analysis-version-btn.version-greek:not(.active) {
    color: #5a9cc4;
    border-color: #7cb3d4;
}
.single-analysis-version-btn.version-hebrew.active {
    background: #d4a574;
    border-color: #d4a574;
}
.single-analysis-version-btn.version-greek.active {
    background: #7cb3d4;
    border-color: #7cb3d4;
}

/* 다크모드 단일창 - 다중창 스타일과 일치 */
.dark-mode .single-analysis-version-toggle {
    background: rgba(255, 255, 255, 0.1);
}
.dark-mode .single-analysis-version-btn {
    background: transparent;
    border-color: transparent;
    color: #888;
}
.dark-mode .single-analysis-version-btn.version-hebrew:not(.active) {
    color: #e8c4a0;
}
.dark-mode .single-analysis-version-btn.version-greek:not(.active) {
    color: #8fc4e0;
}
.dark-mode .single-analysis-version-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
}


.analysis-maximize-btn {
    background: transparent;
    border: none;
    color: white;
    width: 28px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.analysis-maximize-btn:hover {
    opacity: 0.8;
}
.analysis-maximize-btn .material-icons {
    font-size: 1.3rem;
}
.analysis-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.analysis-header-close {
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}
.analysis-horizontal-header .close-btn {
    position: static;
    font-size: 1.5rem;
    color: white;
    cursor: pointer !important;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    pointer-events: auto !important;
    z-index: 9999 !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    user-select: none !important;
}
.analysis-horizontal-header .close-btn:hover {
    opacity: 0.8;
}
.analysis-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.analysis-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 상단 가로 스크롤 영역 */
.analysis-horizontal-scroll-wrapper {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--bg-section);
    border-bottom: 2px solid var(--border-color);
    -webkit-overflow-scrolling: touch;
}
.analysis-horizontal-scroll {
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
    padding: 4px 10px 10px 10px;
    min-width: max-content;
    height: 100%;
    align-items: flex-start;
}

/* 단어 블록 스타일 (A-E 세로 배치) */
.analysis-word-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
    flex-shrink: 0;
}
.analysis-word-block:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.2);
}
.analysis-word-block.selected {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.05);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.3);
}
/* A: 표면형 (히브리어) - 2.2rem */
.analysis-word-block .word-row-a {
    font-family: 'Ezra SIL SR', 'Ezra SIL', 'Times New Roman', serif;
    font-size: 2.2rem;
    color: var(--text-color);
    direction: rtl;
    margin-bottom: 4px;
    line-height: 1.2;
}
/* B: 한글 음역 - 1.5배 */
.analysis-word-block .word-row-b {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 4px;
}
/* C: 뜻 - 1.5배 */
.analysis-word-block .word-row-c {
    font-size: 0.9rem;
    color: #7D0541;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}
/* D: 문법 - 1.5배 */
.analysis-word-block .word-row-d {
    font-size: 0.95rem;
    color: #666;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.2;
}
/* E: 원형 (기본형) - 1.5배 */
.analysis-word-block .word-row-e {
    font-family: 'Ezra SIL SR', 'Ezra SIL', 'Times New Roman', serif;
    font-size: 1.5rem;
    color: #3498db;
    direction: rtl;
    background: rgba(52, 152, 219, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
}

/* LXX 모드: 그리스어 표시용 스타일 */
.analysis-word-block.lxx-mode .word-row-a {
    font-family: 'SBL Greek', 'SBL BibLit', 'Times New Roman', serif;
    direction: ltr;
    font-size: 2.2rem;
}
.analysis-word-block.lxx-mode .word-row-e {
    font-family: 'SBL Greek', 'SBL BibLit', 'Times New Roman', serif;
    direction: ltr;
    font-size: 1.3rem;
}

/* 하단 세로 스크롤 영역 (사전) */
.analysis-vertical-scroll-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color);
}
/* 원전분해 수평 리사이저 */
.analysis-h-resizer {
    height: 8px;
    background: linear-gradient(to bottom, var(--border-color, #ddd), transparent);
    cursor: row-resize;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analysis-h-resizer::before {
    content: '';
    width: 40px;
    height: 4px;
    background: var(--border-color, #ccc);
    border-radius: 2px;
}

.analysis-h-resizer:hover {
    background: linear-gradient(to bottom, var(--primary-color, #0F52BA), transparent);
}

.analysis-h-resizer:hover::before {
    background: var(--primary-color, #0F52BA);
}

.analysis-lexicon-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
}
.analysis-lexicon-header #analysis-lexicon-title {
    flex: none;
    text-align: center;
}
.analysis-lexicon-header #analysis-lexicon-history {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    padding: 4px 6px;
    min-width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.analysis-lexicon-header #analysis-lexicon-history:hover {
    background: rgba(0,0,0,0.15);
}
.analysis-lexicon-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}
.analysis-lexicon-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 0.95rem;
}
.analysis-lexicon-content-inner {
    line-height: 1.8;
    color: var(--text-color);
}
/* 사전 헤더 행: 히브리어 + Strong's 코드 (왼쪽) + 용례 버튼 (오른쪽) */
.lexicon-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
}
/* 히브리어 단어 + Strong 코드 그룹 */
.lexicon-header-row .lexicon-word-code {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lexicon-header-row .lexicon-hebrew {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.6rem;
    color: var(--text-color);
    direction: rtl;
}
.lexicon-header-row .lexicon-strong-code {
    font-size: 0.85rem;
    color: white;
    background: var(--primary-color);
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
}
.lexicon-header-row .lexicon-translit {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
}
/* 원전분해 가로보기 사전 새 레이아웃 */
.lexicon-translit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    margin-top: 4px;
}
.lexicon-translit-row .lexicon-translit-text {
    font-size: 1.05rem;
    color: #008080 !important;
    font-weight: 700;
    text-align: left !important;
    display: block;
    flex: 1;
}
body.dark-mode .lexicon-translit-row .lexicon-translit-text {
    color: #4db6ac !important;
}
body.dark-mode .lexicon-transliteration {
    color: #4db6ac;
}
.lexicon-translit-row .translit-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lexicon-meaning-row {
    font-size: 1rem;
    color: var(--primary-color);
    padding: 4px 0 12px 0;
}
.lexicon-divider {
    height: 3px;
    background: var(--primary-color);
    margin: 8px 0 16px 0;
    border-radius: 2px;
}
.lexicon-body {
    line-height: 1.9;
    padding-top: 8px;
    color: #333;
}
body.dark-mode .lexicon-body {
    color: #ccc;
}
/* 스트롱 코드 링크 스타일 */
.lexicon-link {
    color: #9c27b0;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}
.lexicon-link:hover {
    text-decoration: underline;
}
body.dark-mode .lexicon-link {
    color: #ce93d8;
}
body.dark-mode .lexicon-link:hover {
    text-decoration: underline;
}
/* 사전 뒤로가기 버튼 */
.lexicon-back-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}
.lexicon-back-btn:hover:not(:disabled),
.lexicon-forward-btn:hover:not(:disabled) {
    background: #0d47a1;
}
.lexicon-back-btn:disabled,
.lexicon-forward-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

/* 사전창 이전/다음 버튼 컨테이너 */
.lexicon-nav-btns {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.lexicon-forward-btn {
    position: static;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lexicon-nav-btns .lexicon-back-btn {
    position: static;
}

/* 사전창 히스토리 드롭다운 */
.lexicon-history-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    max-width: 280px;
    max-height: min(900px, calc(100vh - 120px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lexicon-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

.lexicon-history-clear-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lexicon-history-clear-btn:hover {
    background: rgba(0,0,0,0.1);
    color: #f44336;
}

.lexicon-history-list {
    overflow-y: auto;
    flex: 1;
}

.lexicon-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.lexicon-history-item:last-child {
    border-bottom: none;
}

.lexicon-history-item:hover {
    background: var(--hover-bg);
}

.lexicon-history-code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
    min-width: 50px;
}

.lexicon-history-hebrew {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 0.9rem;
    color: var(--text-color);
    direction: rtl;
}

.lexicon-history-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.lexicon-history-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.lexicon-history-strong {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
    font-size: 0.9rem;
    min-width: 50px;
}

.lexicon-history-word {
    font-size: 1.1rem;
    color: var(--text-color, #333);
}

.lexicon-history-translit {
    font-size: 0.95rem;
    color: var(--text-secondary, #666);
    font-style: italic;
}

.lexicon-history-meaning {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    margin-top: 2px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.night-mode .lexicon-history-dropdown {
    background: #2a2a2a;
    border-color: #444;
}

body.night-mode .lexicon-history-header {
    background: #222;
    border-color: #444;
}

/* 원전분해 히스토리 드롭다운 */
.analysis-history-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 260px;
    max-height: min(400px, calc(100vh - 120px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.analysis-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

.analysis-history-clear-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analysis-history-clear-btn:hover {
    background: rgba(0,0,0,0.1);
    color: #f44336;
}

.analysis-history-list {
    overflow-y: auto;
    flex: 1;
}

.analysis-history-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.analysis-history-item:last-child {
    border-bottom: none;
}

.analysis-history-item:hover {
    background: var(--hover-bg);
}

.analysis-history-ref {
    font-size: 0.95rem;
    color: var(--text-color);
}

.analysis-history-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

body.night-mode .analysis-history-dropdown {
    background: #2a2a2a;
    border-color: #444;
}

body.night-mode .analysis-history-header {
    background: #333;
}


body.night-mode .lexicon-history-item {
    border-color: #444;
}

body.night-mode .lexicon-history-item:hover {
    background: #333;
}

body.night-mode .lexicon-history-clear-btn:hover {
    background: rgba(255,255,255,0.1);
}

.analysis-lexicon-content-inner {
    position: relative;
}

.bible-update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.bible-update-notification.show { transform: translateY(0); }
.update-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    max-width: 600px;
    margin: 0 auto;
}
.update-notification-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.update-notification-text strong { color: #333; font-size: 0.95rem; }
.update-notification-buttons {
    display: flex;
    gap: 8px;
}
.update-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.update-btn.primary {
    background: var(--primary-color);
    color: white;
}
.update-btn.primary:hover { background: #0a3d8a; }
.update-btn.secondary {
    background: transparent;
    color: #666;
    border: 1px solid #ccc;
}
.update-btn.secondary:hover { background: #f0f0f0; }
@media (max-width: 480px) {
    .update-notification-content { flex-wrap: wrap; gap: 8px; }
    .update-notification-buttons { width: 100%; justify-content: flex-end; }
}

/* 모바일 가로모드 - 태블릿 레이아웃 적용 (~ 767px) */
@media (max-width: 767px) and (orientation: landscape) {
    #commentary-area {
        position: relative;
        transform: none;
        width: 40%;
        max-width: none;
        box-shadow: none;
        z-index: 900;
    }
    body.layout-60-40 #commentary-area { width: 40%; display: flex; }
    body.layout-50-50 #commentary-area { width: 50%; display: flex; }
}

/* ================================================================
   태블릿/데스크탑 공통 패널 레이아웃 (768px 이상)
   ================================================================ */
@media (min-width: 768px) {
    /* 동적 레이아웃 (태블릿/노트북에서 원전분해/원어사전 버튼 클릭 시) */
    body.layout-dynamic .container {
        display: flex;
        flex-direction: row;
    }
    
    /* 태블릿/노트북에서 패널을 flex 레이아웃에 포함 */
    body.layout-dynamic #analysis-panel,
    body.layout-dynamic #lexicon-panel,
    body.layout-dynamic #search-result-panel {
        position: relative;
        transform: none;
        width: auto;
        max-width: none;
        min-width: 0;
        top: auto; bottom: auto; left: auto; right: auto;
        z-index: auto;
        box-shadow: none;
        border-right: 1px solid var(--border-color);
        border-left: none;
        transition: flex 0.3s ease, opacity 0.3s ease;
        padding-top: var(--top-nav-height);
    }
    
    /* 태블릿/데스크탑에서 .desktop-visible 클래스로 표시 제어 */
    body.layout-dynamic #analysis-panel.desktop-visible,
    body.layout-dynamic #lexicon-panel.desktop-visible,
    body.layout-dynamic #search-result-panel.desktop-visible {
        display: flex;
    }
    
    /* desktop-visible이 없으면 숨김 - transition 없이 즉시 숨김 */
    body.layout-dynamic #analysis-panel:not(.desktop-visible),
    body.layout-dynamic #lexicon-panel:not(.desktop-visible),
    body.layout-dynamic #search-result-panel:not(.desktop-visible) {
        display: none;
        transition: none;
    }
    
    body.layout-dynamic #bible-area {
        min-width: 0;
        flex: 1;
        transition: flex 0.3s ease, opacity 0.3s ease;
    }
    
    /* 주해창도 desktop-visible 클래스로 표시 제어 */
    body.layout-dynamic #commentary-area {
        min-width: 0;
        width: 40%;
        flex-shrink: 0;
        transition: flex 0.3s ease, opacity 0.3s ease;
        display: none;
    }
    
    body.layout-dynamic #commentary-area.desktop-visible {
        display: flex;
    }
}

/* ================================================================
   데스크탑 레이아웃 (1025px 이상)
   ================================================================ */
@media (min-width: 1025px) {
    .desktop-fixed {
        position: relative !important;
        transform: none !important;
        width: 280px !important;
        max-width: 280px !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        border-right: 1px solid var(--border-color) !important;
        border-left: none !important;
        transition: none !important;
    }
    
    body.layout-2col .container {
        display: flex;
        flex-direction: row;
    }
    body.layout-2col #bible-area {
        order: 1;
        flex: 1;
    }
    body.layout-2col #commentary-area {
        order: 2;
        flex: 1;
    }
    
    body.layout-3a .container {
        display: flex;
        flex-direction: row;
    }
    body.layout-3a #analysis-panel.desktop-fixed {
        display: flex;
        order: 1;
        flex: 1;
        min-width: 0;
    }
    body.layout-3a #lexicon-panel {
        display: none;
    }
    body.layout-3a #bible-area {
        order: 2;
        flex: 1;
        min-width: 0;
    }
    body.layout-3a #commentary-area {
        order: 3;
        flex: 1;
        min-width: 0;
    }
    
    body.layout-3b .container {
        display: flex;
        flex-direction: row;
    }
    body.layout-3b #lexicon-panel.desktop-fixed {
        display: flex;
        order: 1;
        flex: 1;
        min-width: 0;
    }
    body.layout-3b #analysis-panel {
        display: none;
    }
    body.layout-3b #bible-area {
        order: 2;
        flex: 1;
        min-width: 0;
    }
    body.layout-3b #commentary-area {
        order: 3;
        flex: 1;
        min-width: 0;
    }
    
    body.layout-4col .container {
        display: flex;
        flex-direction: row;
    }
    body.layout-4col #lexicon-panel.desktop-fixed {
        order: 1;
        flex: 1;
    }
    body.layout-4col #analysis-panel.desktop-fixed {
        order: 2;
        flex: 1;
    }
    body.layout-4col #bible-area {
        order: 3;
        flex: 1;
    }
    body.layout-4col #commentary-area {
        order: 4;
        flex: 1;
    }
    
    /* 동적 레이아웃 (노트북에서 원전분해/원어사전 버튼 클릭 시) */
    body.layout-dynamic .container {
        display: flex;
        flex-direction: row;
    }
    
    /* 노트북에서 패널을 flex 레이아웃에 포함 */
    body.layout-dynamic #analysis-panel,
    body.layout-dynamic #lexicon-panel,
    body.layout-dynamic #search-result-panel {
        position: relative;
        transform: none;
        width: auto;
        max-width: none;
        min-width: 0;
        top: auto; bottom: auto; left: auto; right: auto;
        z-index: auto;
        box-shadow: none;
        border-right: 1px solid var(--border-color);
        border-left: none;
        transition: flex 0.3s ease, opacity 0.3s ease;
    }
    
    /* 데스크탑에서 .desktop-visible 클래스로 표시 제어 */
    body.layout-dynamic #analysis-panel.desktop-visible,
    body.layout-dynamic #lexicon-panel.desktop-visible,
    body.layout-dynamic #search-result-panel.desktop-visible {
        display: flex;
    }
    
    /* desktop-visible이 없으면 숨김 - transition 없이 즉시 숨김 */
    body.layout-dynamic #analysis-panel:not(.desktop-visible),
    body.layout-dynamic #lexicon-panel:not(.desktop-visible),
    body.layout-dynamic #search-result-panel:not(.desktop-visible) {
        display: none;
        transition: none;
    }
    
    body.layout-dynamic #bible-area {
        min-width: 0;
        flex: 1;
        transition: flex 0.3s ease, opacity 0.3s ease;
    }
    
    /* 주해창도 desktop-visible 클래스로 표시 제어 */
    body.layout-dynamic #commentary-area {
        min-width: 0;
        width: 40%;
        flex-shrink: 0;
        transition: flex 0.3s ease, opacity 0.3s ease;
        display: none;
    }
    
    body.layout-dynamic #commentary-area.desktop-visible {
        display: flex;
    }
}

.help-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--card-bg);
}

/* 검색 도움말 모달 불투명 배경 */
#search-help-modal .modal-content {
    background: var(--card-bg);
}

.help-section {
    margin-bottom: 20px;
}

.help-section h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 16px;
}

.help-section p {
    line-height: 1.8;
    color: var(--text-color);
}

.help-section strong {
    color: var(--primary-color);
    font-weight: bold;
}

/* 검색 범위 모달 - 클릭 이벤트 정상화 */
#search-range-modal {
    z-index: 2500 !important;
}

#search-range-modal .modal-content {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    max-height: 90vh;
    height: auto;
    min-height: 70vh;
}

#search-range-modal .search-range-body {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

#search-range-modal .search-range-body,
#search-range-modal select,
#search-range-modal button,
#search-range-modal .range-book-item {
    pointer-events: auto;
}

.search-range-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.range-preset-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.range-preset-row label {
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.range-preset-select {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
}

.range-book-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.range-book-selector {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-book-selector label {
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.range-book-dropdown {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
}

.range-select-all {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.range-select-all-btn {
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
}

.range-select-all-btn:hover {
    background: var(--hover-bg);
}

.range-book-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0 15px;
}

.range-book-item {
    padding: 15px 8px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    color: #5468ff;
    transition: all 0.2s;
    user-select: none;
    overflow: hidden;
    word-break: keep-all;
    line-height: 1.3;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.range-book-item.nt-book {
    color: #28a745;
}

.range-book-item.nt-first {
    grid-column: 1;
}

.range-book-item:hover {
    background: #f0f4ff;
    border-color: #5468ff;
}

.range-book-item.nt-book:hover {
    background: #e8f5e9;
    border-color: #28a745;
}

.range-book-item.selected {
    background: #5468ff;
    color: white;
    border-color: #5468ff;
}

.range-book-item.nt-book.selected {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.dark-mode .range-book-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .range-book-item:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.dark-mode .range-book-item.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.range-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.range-cancel-btn {
    flex: 1;
    padding: 15px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
}

.range-cancel-btn:hover {
    background: #5a6268;
}

.range-apply-btn {
    flex: 2;
    padding: 15px;
    background: var(--sapphire-blue, #0F52BA);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
}

.range-apply-btn:hover {
    background: #0d4699;
}

/* ================================================================
   태블릿 및 데스크탑 레이아웃 (768px 이상)
   ================================================================ */
@media (min-width: 768px) {
    /* 상단/하단 네비게이션바 강제 1줄 */
    .nav-container {
        flex-wrap: nowrap !important;
    }
    
    /* 상단 내비게이션바 스타일 */
    .nav-container.top-nav {
        padding: 3px 15px;
    }
    
    /* 하단 내비게이션바 스타일 */
    
    /* AHPI 로고 숨김 (태블릿) */
    .nav-center-group {
        display: none !important;
    }
    
    /* 네비게이션바 간격 최소화 (1줄 레이아웃) */
    .nav-left-group {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        flex: 0 1 auto !important;
    }
    
    .action-icons-group {
        gap: 4px !important;
        flex: 0 0 auto !important;
    }
    
    .nav-right-group {
        gap: 6px !important;
        flex: 0 0 auto !important;
    }
    
    .history-group, .move-group {
        gap: 4px !important;
    }
    
    /* 초소형 드롭다운 숨김 */
    #ultra-small-dropdown {
        display: none !important;
    }
}

/* ================================================================
   태블릿 레이아웃 (768px ~ 1024px) - Z Fold 펼친 상태 포함
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    
    .range-book-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* 터치 영역 확대 - 최소 44px (태블릿도 터치 디바이스) */
    .icon-btn, .icon-btn-nav {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .grid-btn {
        min-height: 44px;
    }
    
    .action-btn, .save-btn, .cancel-btn {
        min-height: 44px;
        padding: 10px 20px;
    }
}

/* 태블릿 세로 모드: 2단 레이아웃 (본문 + 주해) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .container {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    #bible-area {
        
    }
    
    body.layout-50-50 #bible-area {
        width: 60%;
    }
    
    body.layout-50-50 #commentary-area {
        width: 40%;
        position: relative;
        transform: none;
        display: flex;
    }
    
    /* 원전분석, 사전은 오버레이로 표시 */
    #analysis-panel, #lexicon-panel {
        position: fixed;
        left: 0;
        top: 50px;
        bottom: 0;
        width: 45%;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    }
    
    /* 사전 패널 - 다중창 플로팅 사전창과 동일한 max-width */
    #lexicon-panel {
        max-width: 500px;
    }
    
    /* 검색 결과 패널 - 왼쪽에 다단으로 표시 */
    #search-result-panel {
        position: fixed;
        left: 0;
        top: 50px;
        bottom: 0;
        width: 45%;
        max-width: 380px;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        display: none;
    }
    #search-result-panel.show {
        display: flex;
    }
}

/* 태블릿 가로 모드: 3단 레이아웃 (원전분석 + 본문 + 주해) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .container {
        display: flex;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    #bible-area {
        
    }
    
    #analysis-panel, #lexicon-panel, #search-result-panel {
        position: static;
        width: 280px;
        flex-shrink: 0;
        display: none;
    }
    
    #analysis-panel.show, #lexicon-panel.show, #search-result-panel.show {
        display: flex;
    }
    
    #bible-area {
        flex: 1;
    }
    
    #commentary-area {
        position: static;
        width: 45%;
        transform: none;
        display: flex;
        flex-shrink: 0;
    }
}

/* 모바일: 4열 그리드 (401px ~ 767px) */
@media (min-width: 431px) /* Galaxy Fold 접힘 초과 */ and (max-width: 767px) {
    .range-book-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 갤럭시 폴드 펼친 상태 (600px ~ 767px) - 검색 결과 두 단 레이아웃 */
@media (min-width: 600px) and (max-width: 767px) {
    /* 검색 결과 패널 - 왼쪽에 다단으로 표시 */
    #search-result-panel {
        position: fixed;
        left: 0;
        top: 50px;
        bottom: 0;
        width: 45%;
        z-index: 1500;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        border-right: 1px solid var(--border-color);
        display: none;
        transform: none;
        background: var(--card-bg);
        flex-direction: column;
    }
    /* show 또는 desktop-visible 클래스로 표시 */
    #search-result-panel.show,
    #search-result-panel.desktop-visible {
        display: flex;
    }
    
    /* 검색 결과 열릴 때 본문 영역 조정 - 정확한 2단 레이아웃 */
    body.search-panel-open .container {
        display: flex;
    }
    body.search-panel-open #bible-area {
        position: fixed;
        left: 50%;
        right: 0;
        top: 50px;
        bottom: 0;
        width: 45%;
        margin: 0;
        overflow-y: auto;
    }
    
    /* 검색 패널 내부 스크롤 */
    #search-result-panel .scrollable-content {
        flex: 1;
        overflow-y: auto;
    }
}

/* 초소형: 3열 그리드 (~ 430px) - Z Fold 접힌 상태, iPhone SE, 갤럭시 S23 등 */
@media (max-width: 430px) {
    .range-book-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 메인 컨테이너: 상단 내비게이션바와 겹침 방지 */
    .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* bible-area에 상단 패딩 추가 - 내비게이션바 높이 고려 */
    #bible-area {
        padding-top: 52px;
        padding-bottom: 5px !important;
    }
    
    /* 상단 네비게이션 바 레이아웃 */
    .nav-container.top-nav {
        flex-direction: row;
        height: auto;
        padding: 0px 4px;
        gap: 3px;
        justify-content: space-between;
    }
    
    /* 하단 네비게이션 바 레이아웃 */
    
    /* 왼쪽 그룹 */
    .nav-left-group {
        flex: 0 0 auto;
        gap: 2px;
        flex-wrap: nowrap;
    }
    
    /* 상단: 히스토리 그룹 숨김 (드롭다운 메뉴로 이동) */
    .top-nav .history-group {
        display: none !important;
    }
    
    /* 이동 그룹 축소 */
    .move-group {
        gap: 2px;
    }
    
    /* 상단 액션 아이콘 그룹 */
    .top-nav .action-icons-group {
        gap: 2px;
    }
    
    /* 상단: 복사만 표시, 원전분해/글쓰기 숨김 */
    .top-nav #nav-analysis-btn,
    .top-nav #nav-commentary-btn {
        display: none !important;
    }
    
    .top-nav #nav-copy-btn {
        display: flex !important;
    }
    
    .top-nav #nav-copy-btn .material-icons {
        font-size: 1rem;
    }
    
    /* 초소형 화면: 더보기 버튼 표시 */
    .ultra-small-only {
        display: flex !important;
    }
    
    /* 로고 숨김 */
    .nav-center-group {
        display: none !important;
    }
    
    /* 오른쪽 그룹 - 아이콘 순서 고정 */
    .nav-right-group {
        flex: 0 0 auto;
        gap: 2px;
    }
    
    /* 하단 오른쪽 그룹 아이콘 순서 고정: 레이아웃(1) < 로그인(2) < 설정(3) */
    
    
    
    /* 초소형: 레이아웃 옵션 - single과 2row만 표시 */
    .layout-dropdown-item[data-layout="2col"],
    .layout-dropdown-item[data-layout="3col"],
    .layout-dropdown-item[data-layout="4col"],
    .layout-dropdown-item[data-layout="3row"],
    .layout-dropdown-item[data-layout="2x2"],
    .layout-dropdown-item[data-layout="3x2"] {
        display: none !important;
    }
    
    /* 초소형: 레이아웃 드롭다운 크기 조정 */
    .layout-dropdown {
        min-width: 180px;
        right: 0;
        left: auto;
    }
    
    /* 초소형: 프리셋 아이템 스타일 */
    .layout-preset-item {
        padding: 8px 10px;
        min-height: 44px;
    }
    
    /* 복사 모달 전체 화면 (폰 기기) - 설정 모달은 line 12091+에서 처리 */
    #copy-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    
    /* 절 숫자 위 배치 + 공간 최소화 (iPhone SE, 소형 안드로이드) */
    .verse-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 2px 4px;
        gap: 0;
    }
    
    .verse-num {
        width: auto;
        min-width: auto;
        padding: 0 6px;
        margin: 0 0 2px 0;
        font-size: 0.75rem !important;
        line-height: 1.2;
        align-self: flex-start;
    }
    
    .text-column {
        width: 100%;
        text-align: left;
    }
    
    .verse-line {
        justify-content: space-between;
        margin-bottom: 1px;
    }
    
    /* 한글/영어 본문 좌측 정렬 */
    .korean-text, .english-text {
        text-align: left;
    }
    
    
    /* 노트, 검색 버튼 숨김 (드롭다운에 포함) */
    .hide-on-ultra-small {
        display: none !important;
    }
    
    /* 사용자 이름 표시 */
    #user-auth-section {
        display: flex !important;
    }
    
    #user-name {
        max-width: 60px !important;
        font-size: 0.8rem !important;
    }
    
    /* 네비게이션 버튼 크기 축소 */
    .nav-btn {
        padding: 4px 6px;
        font-size: 0.85rem;
        min-width: 32px;
        min-height: 32px;
    }
    
    /* 현재 위치 텍스트 크기 축소 */
    #current-location {
        font-size: 0.8rem;
        padding: 4px 6px;
        max-width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 아이콘 버튼 크기 축소 */
    .icon-btn {
        padding: 4px;
        min-width: 32px;
        min-height: 32px;
    }
    
    .icon-btn .material-icons {
        font-size: 1rem;
    }
    
    /* Z Fold 접힌 상태 - 극단적으로 좁은 화면 최적화 */
    .verse-item {
        flex-direction: row;
        align-items: flex-start;
        padding: 4px 6px 4px 2px;
        gap: 4px;
        height: auto;
        min-height: var(--top-nav-height);
        box-sizing: border-box;
    }
    
    .verse-num {
        width: 22px;
        min-width: 22px;
        text-align: center;
        font-size: 0.75rem !important;
        color: var(--primary-color);
        justify-content: center;
    }
    
    .text-column {
        width: 100%;
    }
    
    /* 폰트 크기 약간 축소 */
    .korean-text, .english-text {
        font-size: 0.95rem;
    }
    
    /* 네비게이션 바 아이콘 크기 축소 */
    .icon-btn, .icon-btn-nav {
        padding: 6px;
    }
    
    .icon-btn .material-icons,
    .icon-btn-nav .material-icons {
        font-size: 0.9rem;
    }
    
    /* 현재 위치 텍스트 크기 축소 */
    #current-location {
        font-size: 0.85rem;
        padding: 4px 8px;
    }
    
    /* 모달 크기 조정 - 초소형 화면에 최적화 */
    .modal-content {
        width: 98%;
        max-width: 98%;
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* 좌측 패널 내부 스크롤 강제 적용 */
    #analysis-panel .scrollable-content,
    #lexicon-panel .scrollable-content,
    #search-result-panel .scrollable-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* 검색 입력창 */
    .search-input-field {
        font-size: 0.9rem;
    }
    
    /* 용례 모달: 소형 화면 최적화 */
    .word-occurrences-modal-content,
    #word-occurrences-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 용례 모달 내부 컨텐츠 폭 제한 */
    .word-occurrences-body {
        padding: 8px 10px !important;
        overflow-x: hidden !important;
    }
    
    /* 용례 모달: 카테고리 헤더 폭 조정 */
    .occurrence-category {
        max-width: 100%;
        overflow: hidden;
    }
    
    .category-header {
        padding: 8px 10px;
        flex-wrap: nowrap;
        gap: 6px;
    }
    
    /* 용례 모달: 카테고리 제목 축소 */
    .category-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9rem;
    }
    
    /* 용례 모달: 카테고리 버튼 소형화 */
    .category-toggle-btn {
        padding: 0px 4px;
        font-size: 0.7rem;
        gap: 2px;
        flex-shrink: 0;
    }
    
    .category-toggle-btn .material-icons {
        font-size: 1rem !important;
    }
    
    /* 용례 모달: 카테고리 카운트 스타일 */
    .category-count {
        font-size: 0.75rem;
        padding: 0px 4px;
        flex-shrink: 0;
    }
    
    /* 카테고리 확장 아이콘 */
    .category-header .category-expand-icon {
        font-size: 1rem;
        margin-right: 4px;
    }
    
    /* 전체 펼치기 버튼 */
    .occurrences-expand-controls {
        padding: 5px 10px;
    }
    
    .toggle-all-btn {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* 매우 작은 화면 (360px 이하) - iPhone SE, Galaxy S 초기 모델, Galaxy Fold 접힌 화면 */
@media (max-width: 360px) {
    /* 레이아웃 선택기 숨김 - 공간 부족 */
    
    /* 용례 모달: 카테고리 헤더 - 2행 레이아웃 */
    .category-header {
        flex-wrap: wrap !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    
    /* 카테고리 제목 - 첫 행에서 전체 너비 사용 */
    .category-header .category-expand-icon {
        font-size: 0.9rem !important;
        margin-right: 4px !important;
    }
    
    .category-title {
        flex: 1 1 auto !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
    }
    
    /* 버튼과 카운트 - 두번째 행 */
    .category-toggle-btn {
        padding: 2px 5px !important;
        font-size: 0.65rem !important;
        margin-right: 4px !important;
    }
    
    .category-toggle-btn .material-icons {
        font-size: 0.9rem !important;
    }
    
    .category-toggle-text {
        font-size: 0.65rem !important;
    }
    
    .category-count {
        font-size: 0.7rem !important;
        padding: 1px 5px !important;
    }
    
    /* 전체 펼치기 버튼 영역 */
    .occurrences-expand-controls {
        padding: 4px 8px !important;
    }
    
    .toggle-all-btn {
        font-size: 0.75rem !important;
        padding: 3px 6px !important;
    }
    
    .toggle-all-btn .material-icons {
        font-size: 0.9rem !important;
    }
    
    /* 용례 모달 본문 패딩 축소 */
    .word-occurrences-body {
        padding: 6px 8px !important;
    }
    
    /* 모달 헤더 */
    .word-occurrences-info {
        padding: 6px 10px !important;
    }
    
    .occurrences-lemma {
        font-size: 1.3rem !important;
    }
}

/* ==================== 노트 시스템 스타일 ==================== */

/* 노트 뷰어 모달 - 전체화면 */
.notes-viewer-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
}

/* 노트 뷰어 헤더 - 글자크기 버튼 스타일 */
.notes-viewer-modal .modal-header .panel-font-size-btn {
    margin-right: 52px;
    font-size: 14px;
    padding: 5px 8px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 5px;
    background: rgba(255,255,255,0.15);
    color: white;
    min-width: 38px;
    height: 30px;
}

.notes-viewer-modal .modal-header .panel-font-size-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: white;
}

/* 노트 뷰어 모달 헤더 - position: relative 설정으로 닫기 버튼 올바른 위치 지정 */
.notes-viewer-modal .modal-header {
    position: relative;
}

/* 노트 뷰어 닫기 버튼 - 클릭 가능하도록 z-index 및 위치 조정 */
.notes-viewer-modal .modal-header .close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    font-size: 28px;
    color: var(--text-color);
    padding: 5px 10px;
    pointer-events: auto;
}

.notes-viewer-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* 노트 컨트롤 */
.notes-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.notes-filter-dropdowns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.notes-book-dropdown,
.notes-chapter-dropdown {
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 100px;
}

.notes-book-dropdown:disabled,
.notes-chapter-dropdown:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.notes-search-bar {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 120px;
}

.notes-search-bar input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
}

.notes-search-btn {
    padding: 10px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    white-space: nowrap;
}

.notes-search-btn:hover {
    background: #0a3a8a;
}

.notes-clear-btn {
    padding: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-sub);
}

.notes-sort-select {
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 100px;
}

/* 노트 필터 탭 */
.notes-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.notes-filter-tab {
    padding: 8px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.notes-filter-tab:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.notes-filter-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 노트 다운로드/업로드 컨트롤 */
.notes-io-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    
    border-top: 1px solid var(--border-color);
}

.notes-io-left {
    display: flex;
    gap: 8px;
}

.notes-io-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.notes-io-btn .material-icons {
    font-size: 1rem;
}

.notes-io-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 노트 리스트 */
.notes-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 370px;
}

.note-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid;
    border-radius: 6px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.note-card:hover {
    background: var(--hover-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.note-card[data-type="private"] {
    border-left-color: #4169E1;
}

.note-card[data-type="open"] {
    border-left-color: #2E8B57;
}

.note-card[data-type="ahpi"] {
    border-left-color: transparent;
    border-left-width: 4px;
    border-image: linear-gradient(180deg, #4FD1C5, #4299E1) 1;
    background: linear-gradient(135deg, rgba(79, 209, 197, 0.05) 0%, rgba(66, 153, 225, 0.05) 100%);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.note-type-badge {
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 700;
}

.note-type-badge.private {
    background: #E3F2FD;
    color: #4169E1;
}

.note-type-badge.open {
    background: #E8F5E9;
    color: #2E8B57;
}

.note-type-badge.ahpi {
    background: linear-gradient(135deg, #4FD1C5 0%, #4299E1 100%);
    color: white;
}

.note-card-reference {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.note-card-title {
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--text-color);
}

.note-card-preview {
    font-size: 0.9rem;
    color: var(--text-sub);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-date {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-top: 8px;
}

.notes-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-sub);
}

/* ============================================ */
/* 복합 참조 시스템 스타일 (Multi-Reference) */
/* ============================================ */

.note-multi-refs-section {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
}

.note-multi-refs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.note-multi-refs-header label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #666);
}

.add-refs-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #4FD1C5 0%, #4299E1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.add-refs-btn:hover {
    opacity: 0.9;
}

.add-refs-btn .material-icons {
    font-size: 16px;
}

#note-multi-refs-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}

#note-multi-refs-display .placeholder {
    font-size: 0.85rem;
    color: var(--text-tertiary, #999);
    font-style: italic;
}

.ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--bg-color, #fff);
    border-radius: 14px;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.ref-chip .material-icons {
    font-size: 14px;
}

.ref-chip.canonical {
    border-left: 3px solid #4299E1;
}

.ref-chip.canonical .material-icons {
    color: #4299E1;
}

.ref-chip.ancient {
    border-left: 3px solid #4FD1C5;
}

.ref-chip.ancient .material-icons {
    color: #4FD1C5;
}

.note-category-section {
    margin-bottom: 12px;
}

.note-category-section label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #666);
    margin-bottom: 6px;
}

#note-category-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-color, #fff);
    color: var(--text-color);
}

.note-tags-section {
    margin-bottom: 12px;
}

.note-tags-section label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #666);
    margin-bottom: 6px;
}

.note-tags-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.note-tags-input-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 0.9rem;
}

.note-tags-input-row button {
    padding: 8px 12px;
    background: var(--primary-color, #0F52BA);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

#note-tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--text-color);
}

.tag-chip .remove-tag {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tag-chip .remove-tag .material-icons {
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.tag-chip .remove-tag:hover .material-icons {
    color: #dc2626;
}

/* AHPI 주해 Squircle 카드 스타일 */
.note-card[data-type="ahpi"] {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15);
}

.note-card[data-type="ahpi"]:hover {
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.25);
}

.note-card[data-type="ahpi"] .note-type-badge {
    font-weight: 600;
}

/* ============================================ */
/* NoteListUnified 통합 스타일 */
/* ============================================ */

.note-list-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.note-list-controls-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.note-list-dropdowns {
    display: flex;
    gap: 8px;
}

.note-list-book-filter,
.note-list-chapter-filter {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 100px;
}

.note-list-book-filter-btn {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 100px;
    transition: all 0.2s;
}

.note-list-book-filter-btn:hover {
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

.note-list-search-bar {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}

.note-list-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-color);
}

.note-list-search-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.note-list-search-btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
}

.note-list-search-btn:hover {
    opacity: 0.9;
}

.note-list-clear-btn {
    padding: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-sub);
}

.note-list-sort-select {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 90px;
}

.note-list-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.note-list-filter-tab {
    padding: 8px 14px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.note-list-filter-tab:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.note-list-filter-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.note-list-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.note-list-download-btn,
.note-list-upload-btn {
    padding: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.2s;
}

.note-list-download-btn:hover,
.note-list-upload-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.note-list-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

/* 통합 노트 카드 스타일 */
.note-card-navbar,
.note-card-multi,
.note-card-single {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.note-card-navbar:hover,
.note-card-multi:hover,
.note-card-single:hover {
    background: var(--hover-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.note-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.note-card-type-badge {
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.note-card-ref-badge {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.note-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-top: 10px;
}

.note-card-author {
    font-weight: 700;
}

.note-card-revision {
    color: var(--primary-color);
}

/* 노트 상세보기 (인라인) */
.note-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.note-detail-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}

.note-detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.note-detail-back-btn:hover {
    background: var(--hover-bg);
}

.note-detail-back-btn .material-icons {
    font-size: 18px;
}

.note-detail-info {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.note-detail-type-badge {
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

.note-detail-ref {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1rem;
}

.note-detail-title {
    padding: 12px 16px 8px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
}

.note-detail-meta {
    padding: 0 16px 12px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-sub);
    border-bottom: 1px solid var(--border-color);
}

.note-detail-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    line-height: 1.7;
    color: var(--text-color);
}

.note-detail-actions {
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.note-detail-navigate-btn,
.note-detail-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.note-detail-navigate-btn {
    background: var(--primary-color);
    color: white;
    border: none;
}

.note-detail-navigate-btn:hover {
    opacity: 0.9;
}

.note-detail-edit-btn {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.note-detail-edit-btn:hover {
    background: var(--hover-bg);
}

.note-detail-navigate-btn .material-icons,
.note-detail-edit-btn .material-icons {
    font-size: 18px;
}

/* 빈 상태 및 로딩 */
.note-list-empty,
.note-list-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-sub);
}

.note-list-empty-icon,
.note-list-error-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.note-list-empty-text,
.note-list-error-text {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.note-list-empty-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.note-list-loading {
    text-align: center;
    padding: 60px 20px;
}

.note-list-loading .spinner {
    width: 40px;
    height: 44px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 성경 패널 로딩 스켈레톤 ===== */
.bible-loading-skeleton {
    padding: 20px;
}

.skeleton-verse {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-num {
    width: 24px;
    height: 24px;
    background: var(--skeleton-bg, #e0e0e0);
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-line {
    height: 16px;
    background: var(--skeleton-bg, #e0e0e0);
    border-radius: 4px;
}

.skeleton-status {
    text-align: center;
    color: var(--text-sub);
    font-size: 0.9rem;
    margin-top: 20px;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== 성경 패널 에러 상태 ===== */
.bible-error-state {
    text-align: center;
    padding: 60px 20px;
}

.bible-error-state .error-icon {
    font-size: 3rem;
    color: var(--text-muted, #999);
    margin-bottom: 16px;
}

.bible-error-state .error-message {
    color: var(--text-sub);
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.bible-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bible-retry-btn:hover {
    background: var(--primary-dark, #0a3d8f);
}

.bible-retry-btn .material-icons {
    font-size: 1.1rem;
}

/* ===== 통합 토스트 알림 ===== */
.ux-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toast-in 0.3s ease;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ux-toast.success {
    background: #4caf50;
    color: white;
}

.ux-toast.error {
    background: #f44336;
    color: white;
}

.ux-toast.warning {
    background: #ff9800;
    color: white;
}

.ux-toast.info {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.ux-toast.offline {
    background: #616161;
    color: white;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* 다크모드 스켈레톤 */
body.dark-mode .skeleton-num,
body.dark-mode .skeleton-line {
    background: var(--skeleton-bg-dark, #3a3a3a);
}

/* ===== 오프라인 배너 ===== */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #616161;
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10001;
    animation: slide-down 0.3s ease;
}

.offline-banner .material-icons {
    font-size: 1rem;
}

@keyframes slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* 단일창 노트리스트 */
.single-panel-notes {
    padding: 15px;
}

.single-panel-notes .notes-header {
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
}

/* 다중창 노트 패널용 조정 */
.multi-panel-notes .note-list-controls {
    padding: 0 12px;
}

.multi-panel-notes .note-list-filter-tabs {
    padding: 0 12px;
}

.multi-panel-notes .note-list-items {
    padding: 0 12px 12px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .note-list-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .note-list-dropdowns {
        width: 100%;
    }
    
    .note-list-book-filter,
    .note-list-chapter-filter {
        flex: 1;
    }
    
    .note-list-search-bar {
        width: 100%;
    }
    
    .note-list-sort-select {
        width: 100%;
    }
    
    .note-list-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }
    
    .note-list-filter-tab {
        flex-shrink: 0;
        font-size: 0.85rem;
        padding: 6px 12px;
    }
    
    .note-card-meta {
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================ */

/* 노트 에디터 모달 - 전체화면 */
#note-editor-modal {
    background: #ffffff !important;
}

.note-editor-modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    background: #ffffff;
}

.note-editor-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    overflow-y: auto;
}

/* 노트 에디터 헤더 레이아웃 */
.note-editor-modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 12px;
}

.note-editor-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    flex: 1;
}

.note-editor-header-left h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    margin: 0;
}

.note-editor-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header-icon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 0.9rem;
    width: 28px;
    height: 40px;
    min-width: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.header-icon-btn:active {
    background: rgba(255, 255, 255, 0.5);
}

/* 헤더 닫기 버튼 스타일 조정 - position override */
.note-editor-modal .modal-header .close-btn,
.note-editor-header-right .close-btn {
    position: static !important;
    font-size: 1.6rem;
    padding: 0;
    margin-left: 8px;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.note-editor-modal .modal-header .close-btn:hover,
.note-editor-header-right .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.note-type-header-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.note-reference-center {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 20px;
    flex-shrink: 0;
}

/* 클릭 가능한 구절 참조 (원전분해 패널 스타일) */
.note-reference-clickable {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
}

.note-reference-clickable:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.note-reference-clickable:active {
    background: rgba(255, 255, 255, 0.35);
}

.note-header-separator {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0 2px;
}

@media (min-width: 768px) {
    .note-editor-header-left {
        max-width: none;
        flex: 1;
    }
    
    .note-editor-header-left h2 {
        font-size: 1.5rem;
    }
    
    .note-reference-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
        font-size: 1rem;
    }
}

/* 개인노트로 전환 버튼 */
.note-convert-btn {
    padding: 10px 16px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.note-convert-btn:hover {
    background: #5a6268;
}

.note-icon {
    font-size: 1.5rem;
}

/* 노트 제목 행 */
.note-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 노트 제목 입력 */
.note-title-input {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    background: var(--card-bg);
    color: var(--text-color);
}

/* 더보기 메뉴 래퍼 */
.note-more-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* 더보기 버튼 (점 세개) */
.note-more-menu-btn {
    width: 40px;
    height: 44px;
    background: var(--hover-bg);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.note-more-menu-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.note-more-menu-btn .material-icons {
    font-size: 0.9rem;
    color: var(--text-color);
}

.note-more-menu-btn:hover .material-icons {
    color: white;
}

/* 드롭다운 메뉴 */
.note-more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 160px;
    overflow: hidden;
}

.note-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left;
    transition: background 0.2s;
}

.note-dropdown-item:hover {
    background: var(--hover-bg);
}

.note-dropdown-item .material-icons {
    font-size: 1.5rem;
    color: var(--text-sub);
}

.note-dropdown-item[data-action="trash"] {
    color: #dc3545;
}

.note-dropdown-item[data-action="trash"] .material-icons {
    color: #dc3545;
}

/* 저장 버튼 영역 전체 숨기기 (자동 저장으로 대체) */
#note-editor-modal .note-actions {
    display: none !important;
}

/* 에디터 툴바 */
.note-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
}

.toolbar-btn {
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.toolbar-btn:active {
    background: var(--primary-color);
    color: white;
}

.toolbar-divider {
    width: 1px;
    background: var(--border-color);
    margin: 0 5px;
}

/* 에디터 영역 */
.note-content-editor {
    min-height: 370px;
    max-height: 400px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: var(--card-bg);
    color: var(--text-color);
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.6;
}

.note-content-editor:focus {
    outline: 2px solid var(--primary-color);
}

.note-content-editor:empty:before {
    content: '노트 내용을 입력하세요...';
    color: var(--text-sub);
    opacity: 0.7;
}

/* 노트 액션 버튼 */
.note-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.note-save-btn, .note-share-btn, .note-delete-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.note-save-btn {
    background: #4169E1;
    color: white;
    flex: 1;
}

.note-save-btn:hover {
    background: #3457c9;
}

.note-save-btn:disabled,
.fullscreen-save-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.note-save-btn.saving,
.fullscreen-save-btn.saving {
    background: #6a8ecc;
    position: relative;
}

.note-save-btn.saving::after,
.fullscreen-save-btn.saving::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.note-save-btn.saved,
.fullscreen-save-btn.saved {
    background: #28a745;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.note-share-btn {
    background: #2E8B57;
    color: white;
    flex: 1;
}

.note-share-btn:hover {
    background: #257347;
}

.note-delete-btn {
    background: #dc3545;
    color: white;
}

.note-delete-btn:hover {
    background: #c82333;
}

/* 모바일 최적화 */
@media (max-width: 767px) {
    .notes-viewer-modal, .note-editor-modal {
        width: 95%;
        max-width: none;
    }
    
    .notes-controls {
        flex-direction: column;
    }
    
    .notes-sort-select {
        width: 100%;
    }
    
    .note-type-btn {
        min-width: 100%;
    }
    
    .note-toolbar {
        gap: 3px;
    }
    
    .toolbar-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* 노트 에디터 모달 -> 중앙 모달 스타일 */
#fullscreen-note-editor-modal.fullscreen-modal {
    z-index: 9999;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    background: var(--modal-bg);
}

.fullscreen-modal-content {
    width: 90%;
    max-width: 800px;
    height: 85vh;
    max-height: 700px;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
}

.fullscreen-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary-color);
    color: white;
    position: relative;
}

.fullscreen-header-left {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.fullscreen-header-left .note-type-header-icon {
    font-size: 1.3rem;
}

.fullscreen-modal-header .note-reference-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    opacity: 0.9;
    white-space: nowrap;
}

.fullscreen-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
}

.fullscreen-modal-header h2 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.fullscreen-save-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 700;
}

.fullscreen-save-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fullscreen-delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 700;
}

.fullscreen-delete-btn:hover {
    background: #c82333;
}

.fullscreen-note-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    overflow-y: auto;
}

/* 전체화면 노트 액션 버튼 */
.fullscreen-note-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-color);
}


/* 모바일 반응형 - 노트 에디터 모달 */
@media (max-width: 767px) {
    .fullscreen-modal-content {
        width: 95%;
        height: 90vh;
        max-height: none;
        border-radius: 8px;
    }
}

/* 갤럭시 폴드 및 작은 화면에서 X 버튼 위치 조정 */
@media (max-width: 430px) /* Galaxy Fold 접힘 */ {
    .fullscreen-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .fullscreen-close-btn {
        padding: 0 5px;
        margin-right: 5px;
    }
    
    .fullscreen-modal-header {
        padding: 10px 12px;
    }
    
    .fullscreen-save-btn, .fullscreen-delete-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .fullscreen-note-body {
        padding: 8px;
        gap: 6px;
    }
}

/* 갤럭시 폴드 접은 화면 등 좁은 화면 반응형 (420px 이하) */
@media (max-width: 430px) /* Galaxy Fold 접힘 */ {
    /* 네비바 아이콘 크기 확대 */
    .icon-btn-nav .material-icons {
        font-size: 1.35rem !important;
    }
    
    /* 아이콘 버튼 터치 영역 확대 */
    .icon-btn-nav {
        min-width: 38px;
        min-height: 38px;
        padding: 8px;
    }
    
    /* 설정 버튼 아이콘 확대 */
    .settings-wrapper .settings-btn .material-icons {
        font-size: 1.4rem;
    }
    
    /* 네비바 간격 조정 */
    .nav-icons-group {
        gap: 2px;
    }
    
    /* 상단바 패딩 조정 */
    .nav-container.top-nav {
        padding: 6px 8px;
    }
    
    /* 레이아웃 선택 버튼 */
    .layout-selector-btn .material-icons {
        font-size: 1.3rem;
    }
    
    /* 성경 선택 드롭다운 폰트 */
    .verse-selector-display {
        font-size: 0.95rem;
    }
    
    /* 본문 기본 폰트 살짝 확대 */
    .bible-content .verse-text {
        font-size: 1.05em;
    }
}

.fullscreen-note-title-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-color);
}

.fullscreen-note-toolbar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--bg-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.fullscreen-note-toolbar .toolbar-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.95rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-note-toolbar .toolbar-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.fullscreen-note-toolbar .toolbar-btn:active {
    transform: scale(0.95);
}

.fullscreen-note-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 6px 4px;
}

.fullscreen-note-content-editor {
    flex: 1;
    min-height: 300px;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.8;
    overflow-y: auto;
}

.fullscreen-note-content-editor:empty:before {
    content: '노트 내용을 입력하세요...';
    color: var(--text-sub);
    opacity: 0.6;
}

.fullscreen-note-content-editor:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* 주해창 내 노트 리스트 */
.verse-notes-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.verse-notes-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.verse-note-item {
    background: rgba(15, 82, 186, 0.05);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.verse-note-item:hover {
    background: rgba(15, 82, 186, 0.1);
}

.verse-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.verse-note-type {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--primary-color);
    color: white;
}

.verse-note-type.private { background: #6c757d; }
.verse-note-type.open { background: #28a745; }
.verse-note-type.ahpi { background: #ffc107; color: #333; }

.verse-note-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.verse-note-preview {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
}

/* ========== 관리자 패널 스타일 ========== */

/* 비-admin 사용자에게 admin 섹션 완전히 숨김 */
#settings-admin-section {
    display: none !important;
}

/* admin인 경우 JS에서 .admin-visible 클래스 추가 */
#settings-admin-section.admin-visible {
    display: block !important;
}

#admin-modal {
    display: none;
}

/* admin인 경우 JS에서 직접 style.display = 'flex' 설정 */

.admin-modal-content {
    max-width: 700px;
    width: 95%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal-content .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.admin-modal-content .admin-tabs {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--card-bg);
}

.admin-modal-content .admin-tab-content {
    flex: 1;
    overflow-y: auto;
}

.admin-panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.admin-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 10px 0;
    z-index: 10;
}

.admin-search-box {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
}

.admin-search-box .material-icons {
    color: var(--text-sub);
    font-size: 1.5rem;
}

.admin-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--text-color);
    outline: none;
}

.admin-search-box input::placeholder {
    color: var(--text-sub);
}

.admin-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

#admin-sort-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 130px;
}

#admin-sort-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.admin-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

#admin-user-count {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1rem;
}

.admin-refresh-btn {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.admin-refresh-btn:hover {
    background: var(--primary-color);
    color: white;
}

.admin-user-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.admin-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-sub);
}

.admin-user-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.admin-user-info {
    flex: 1;
    min-width: 0;
}

.admin-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 4px;
}

.admin-user-nickname {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-left: 4px;
}

.admin-user-email {
    font-size: 0.85rem;
    color: var(--text-sub);
    word-break: break-all;
}

.admin-user-date {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-top: 4px;
}

.admin-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-tier-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    min-width: 90px;
}

.admin-tier-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.admin-tier-select option[value="free"] { color: #6c757d; }
.admin-tier-select option[value="basic"] { color: #28a745; }
.admin-tier-select option[value="admin"] { color: #dc3545; }

.admin-reset-password-btn {
    background: transparent;
    border: 1px solid #0F52BA;
    color: #0F52BA;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-reset-password-btn:hover {
    background: #0F52BA;
    color: white;
}

.admin-delete-btn {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.admin-delete-btn:hover {
    background: #dc3545;
    color: white;
}

.admin-tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.admin-tier-badge.free { background: #e9ecef; color: #6c757d; }
.admin-tier-badge.member { background: #d4edda; color: #155724; }
.admin-tier-badge.ahpi_member { background: #cce5ff; color: #004085; }
.admin-tier-badge.ahpi_researcher { background: #fff3cd; color: #856404; }
.admin-tier-badge.admin { background: #f8d7da; color: #721c24; }

.admin-purchase-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
    color: white;
    font-weight: 500;
}

/* 관리자 아이콘 스타일 */
#btn-admin {
    color: #ff4444;
}

#btn-admin:hover {
    background: rgba(255, 68, 68, 0.2);
    color: #ff6666;
}

/* 모바일 대응 */
@media (max-width: 600px) {
    .admin-user-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .admin-user-actions {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-end;
    }
}

/* ========== Quill Rich Text Editor 스타일 ========== */

/* 에디터 컨테이너 */

/* 문자 팔레트 모달 */
.char-palette-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.char-palette-content {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.char-palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.char-palette-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.char-palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.char-btn {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    background: var(--hover-bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.char-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 히브리어 문자 스타일 */
.char-palette-grid .char-btn[data-char^="א"],
.char-palette-grid .char-btn[data-char^="ב"],
.char-palette-grid .char-btn[data-char^="ג"] {
    font-family: 'Ezra SIL SR', 'Noto Sans Hebrew', serif;
}


/* RTL 지원 */

/* 각주 스타일 */
.footnote-ref {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.8em;
    vertical-align: super;
}

.footnote-ref:hover {
    text-decoration: underline;
}
    overflow-x: auto;
}

/* 이미지 스타일 */
/* 모바일 대응 */
@media (max-width: 767px) {
    .char-palette-grid {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .ql-toolbar.ql-snow {
        padding: 4px !important;
    }
    
    .ql-snow .ql-formats {
        margin-right: 5px !important;
    }
    
    #quill-editor,
    #fullscreen-quill-editor {
        min-height: 370px;
    }
}

/* 태블릿 대응 */
@media (min-width: 768px) and (max-width: 1024px) {
    .char-palette-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* PWA 설치 안내 기본 표시 규칙 */
/* JavaScript가 로드되기 전에도 기기에 맞는 안내 표시 */

/* PC 기본 (768px 이상): PC 안내 표시 */
@media (min-width: 768px) {
    .pwa-pc-guide {
        display: block !important;
    }
    .pwa-ios-guide,
    .pwa-android-guide {
        display: none !important;
    }
}

/* 모바일 기본 (767px 이하): iOS/Android 안내는 JS에서 제어 */
/* 기본적으로 모든 안내 숨기고 JS에서 기기 감지 후 표시 */
@media (max-width: 767px) {
    .pwa-pc-guide {
        display: none !important;
    }
}

/* JS에서 설정한 인라인 스타일 우선 적용을 위해 !important 제거 버전 */
.pwa-guide-content[style*="display: block"] {
    display: block !important;
}

.pwa-guide-content[style*="display: none"] {
    display: none !important;
}

/* ==================== 태블릿/노트북 플로팅 패널 스타일 ==================== */
/* 768px 이상에서 주해창, 노트작성창, 노트 뷰어를 플로팅 창으로 변환 */
@media (min-width: 768px) {
    /* 공통 플로팅 패널 스타일 (기존 1/3에서 1/3 더 증가 = 44.44%) */
    .floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        position: fixed !important;
        width: 44.44% !important;
        background: transparent !important;
        display: flex !important;
        align-items: stretch !important;
        z-index: 1500 !important;
        pointer-events: none !important;
    }
    
    /* 플로팅 패널은 modal-overlay 스타일 재정의 */
    .modal-overlay.floating-panel {
        width: 44.44% !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    /* 왼쪽 패널 (글쓰기, 노트 에디터) */
    .floating-panel.floating-left {
        left: 0;
        right: auto;
        justify-content: flex-start !important;
    }
    
    /* 오른쪽 패널 (노트 목록) */
    .floating-panel.floating-right {
        right: 0;
        left: auto;
        justify-content: flex-end !important;
    }
    
    /* 모달 콘텐츠 클릭 가능하게 */
    .floating-panel > .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        pointer-events: auto !important;
        background: var(--card-bg) !important;
    }
    
    .floating-panel > .commentary-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        pointer-events: auto !important;
        background: var(--card-bg) !important;
    }
    
    /* 왼쪽 패널 그림자 (오른쪽으로) */
    .floating-panel.floating-left > .modal-content,
    .floating-panel.floating-left > .commentary-modal-content {
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* 오른쪽 패널 그림자 (왼쪽으로) */
    .floating-panel.floating-right > .modal-content {
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    .floating-panel .modal-header {
        cursor: ew-resize !important;
        user-select: none !important;
        background: var(--primary-color) !important;
        color: white !important;
        flex-shrink: 0;
        pointer-events: auto !important;
    }
    
    .floating-panel .modal-header h2 {
        color: white !important;
    }
    
    .floating-panel .modal-header .close-btn {
        color: white !important;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .floating-panel .modal-header .close-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* 주해 모달 - 플로팅 창 */
    #commentary-modal.floating-panel .modal-body {
        flex: 1;
        overflow-y: auto;
        height: calc(100vh - 60px);
    }
    
    /* 노트 뷰어 모달 - 플로팅 창 (개인 노트 작성 창과 동일 폭 = 44.44% + 60px) */
    #notes-viewer-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: calc(44.44% + 60px) !important;
        z-index: 1500 !important;
    }
    
    #notes-viewer-modal.floating-panel > .modal-content {
        pointer-events: auto !important;
    }
    
    #notes-viewer-modal.floating-panel .notes-viewer-body {
        max-height: calc(100vh - 60px);
        height: calc(100vh - 60px);
        overflow-y: auto;
    }
    
    /* 노트 에디터 모달 - 플로팅 창 (55.55%에서 1/5 감소 = 44.44%) */
    #note-editor-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: 44.44% !important;
    }
    
    #note-editor-modal.floating-panel .note-editor-body {
        flex: 1;
        overflow-y: auto;
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
    }
    
    #note-editor-modal.floating-panel #quill-editor {
        flex: 1;
        min-height: 370px;
    }
    
    /* 이미지 공유 모달 - 플로팅 창 */
    #verse-card-modal.floating-panel {
        width: 50% !important;
        z-index: 1500 !important;
    }
    
    #verse-card-modal.floating-panel > .verse-card-modal-content {
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: var(--card-bg) !important;
    }
    
    /* 검색 모달 - 플로팅 창 (검색결과 패널과 동일 크기) */
    #search-modal.floating-panel {
        position: fixed !important;
        top: var(--top-nav-height) !important;
        left: 0 !important;
        width: 33.33vw !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        max-height: calc(100vh - var(--top-nav-height)) !important;
        min-width: 320px !important;
        max-width: 600px !important;
        z-index: 1500 !important;
        pointer-events: none !important;
        display: flex !important;
    }
    
    #search-modal.floating-panel > .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        pointer-events: auto !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
        background: var(--card-bg) !important;
        overflow: hidden !important; /* 스크롤은 search-modal-body에서만 처리 */
    }
    
    #search-modal.floating-panel .search-modal-body {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    
    /* 검색 결과 모달 - 플로팅 창 (왼쪽, 검색 모달 위, 고정 크기) */
    #search-result-modal.floating-panel {
        z-index: 1600 !important;
        display: flex !important;
    }
    
    #search-result-modal.floating-panel > .modal-content {
        pointer-events: auto !important;
        background: var(--card-bg) !important;
    }
    
    #search-result-modal.floating-panel.fixed-size-panel {
        position: fixed !important;
        top: var(--top-nav-height) !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 33.33vw !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        max-height: calc(100vh - var(--top-nav-height)) !important;
        pointer-events: none !important;
        display: flex !important;
        z-index: 1600 !important;
    }
    
    #search-result-modal.floating-panel.fixed-size-panel > .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        pointer-events: auto !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
        background: var(--card-bg) !important;
    }
    
    /* 태블릿 (900-1199px): 검색창과 결과창 동일 폭 40vw */
    @media (min-width: 900px) and (max-width: 1199px) {
        #search-modal.floating-panel {
            width: 40vw !important;
            min-width: 320px !important;
            max-width: 520px !important;
        }
        
        #search-result-modal.floating-panel.fixed-size-panel {
            width: 40vw !important;
        }
    }
    
    /* 폴더블/소형 태블릿 (768-899px): 검색창 50vw */
    @media (min-width: 768px) and (max-width: 899px) {
        #search-modal.floating-panel {
            width: 50vw !important;
            min-width: 320px !important;
            max-width: 520px !important;
        }
        
        #search-result-modal.floating-panel.fixed-size-panel {
            width: 50vw !important;
        }
        
        /* 노트 뷰어와 노트 에디터 폭 동일하게 50vw */
        #notes-viewer-modal.floating-panel,
        #note-editor-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
            width: 50vw !important;
        }
    }
    
    #search-result-modal.floating-panel .search-results-container {
        flex: 1;
        overflow-y: auto;
        height: calc(100vh - 100px);
        padding: 15px;
    }
    
    /* 원전분해 모달 - 플로팅 패널 (오른쪽) - 토라포션과 동일한 너비 */
    #analysis-horizontal-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        max-width: 500px !important;
        width: 55% !important;
        background: transparent !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        pointer-events: none !important;
        transition: none !important;
        z-index: 1500 !important;
        display: flex !important;
    }
    
    #analysis-horizontal-modal.floating-panel .analysis-horizontal-container {
        width: 100% !important;
        height: 100% !important;
        pointer-events: auto !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
        background: var(--bg-color) !important;
    }
    
    #analysis-horizontal-modal.floating-panel .analysis-horizontal-header {
        cursor: move !important;
        user-select: none !important;
    }
    
    #analysis-horizontal-modal.floating-panel .analysis-horizontal-scroll-wrapper {
        max-height: none !important;
    }
    
    #analysis-horizontal-modal.floating-panel .analysis-vertical-scroll-wrapper {
        flex: 1 !important;
    }
    
    /* 원전분해 모달 - 드래그 이동 모드 */
    #analysis-horizontal-modal.floating-panel.draggable-mode {
        width: auto !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
    }
    
    #analysis-horizontal-modal.floating-panel.draggable-mode .analysis-horizontal-container {
        /* 너비/높이는 JavaScript에서 인라인 스타일로 설정 (드래그 시작 시점의 크기 유지) */
        min-width: 400px;
        min-height: 350px;
        max-width: 90vw;
        max-height: 85vh;
        border-radius: 12px;
        overflow: hidden;
    }
    
    /* 원전분해 모달 - 최대화 상태 (네비바 아래부터) */
    #analysis-horizontal-modal.floating-panel.maximized-mode {
        top: 44px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 44px) !important;
    }
    
    #analysis-horizontal-modal.floating-panel.maximized-mode .analysis-horizontal-container {
        position: fixed !important;
        left: 0 !important;
        top: 44px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 44px) !important;
        border-radius: 0 !important;
        z-index: 1600 !important;
    }
}

/* 모바일에서 원전분해 창 드래그/최대화 */
@media (max-width: 767px) {
    #analysis-horizontal-modal.draggable-mobile {
        position: fixed !important;
        background: transparent !important;
        pointer-events: none !important;
    }
    
    #analysis-horizontal-modal.draggable-mobile .analysis-horizontal-container {
        position: fixed !important;
        pointer-events: auto !important;
        border-radius: 12px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    }
    
    #analysis-horizontal-modal.draggable-mobile .analysis-horizontal-header {
        cursor: col-resize;
        user-select: none;
    }
    
    #analysis-horizontal-modal.draggable-mobile.maximized-mode .analysis-horizontal-container {
        position: fixed !important;
        top: 44px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 44px) !important;
        border-radius: 0 !important;
        z-index: 1600 !important;
    }
}

/* ==================== 갤럭시 폴드 4/5/6 펼친 화면 (768px ~ 1024px) ==================== */
/* 플로팅 패널 너비를 1/2로 설정 (나머지 스타일은 768px+ 미디어 쿼리에서 상속) */
@media (min-width: 768px) and (max-width: 1024px) {
    .floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: 50% !important;
    }
    
    .modal-overlay.floating-panel {
        width: 50% !important;
    }
}

/* 갤럭시 폴드 가로모드: 개인 노트 창과 주해/노트 뷰어 폭 교체 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* 개인 노트 에디터 - 더 넓게 (55.55%) */
    #note-editor-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: 50% !important;
    }
    
    /* 노트 뷰어 - 더 좁게 (44.44% + 60px) */
    #notes-viewer-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: calc(44.44% + 60px) !important;
    }
    
    /* 주해창 - 더 좁게 (44.44%) */
    #commentary-modal.floating-panel {
        top: var(--top-nav-height) !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: 44.44% !important;
    }
}

/* ==================== 화면 분할 시스템 (Split Screen System) ==================== */

/* 레이아웃 선택기 버튼 - 768px 이상에서 표시 */
.layout-selector-wrapper {
    position: relative;
    display: block;
}

.layout-selector-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-color, #333);
    transition: background 0.2s;
}

.layout-selector-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.layout-selector-btn .material-icons {
    font-size: 1.3rem;
}

/* 레이아웃 드롭다운 메뉴 (상단 네비게이션 아래로 펼쳐짐) */
.layout-dropdown {
    position: fixed;
    top: 52px;
    right: 8px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    min-width: 160px;
    padding: 8px 0;
    display: none;
    margin-top: 4px;
}

.layout-dropdown.show {
    display: block;
}

.layout-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    color: #333;
}

.layout-dropdown-item:hover {
    background: #f5f5f5;
}

.layout-dropdown-item.active {
    background: #e3f2fd;
    color: #0F52BA;
}

.layout-dropdown-item.disabled {
    display: none !important;
}

.layout-dropdown-item .layout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 18px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    gap: 2px;
    flex-shrink: 0;
    overflow: hidden;
}

.layout-dropdown-item .layout-icon.icon-single {
    padding: 3px;
}

.layout-dropdown-item .layout-icon.icon-single::after {
    content: '';
    width: 100%;
    height: 100%;
    background: currentColor;
    display: block;
}

.layout-dropdown-item .layout-icon.icon-2col,
.layout-dropdown-item .layout-icon.icon-3col,
.layout-dropdown-item .layout-icon.icon-4col {
    display: flex;
    flex-direction: row;
    padding: 2px 3px;
}

.layout-dropdown-item .layout-icon.icon-2col > span,
.layout-dropdown-item .layout-icon.icon-3col > span,
.layout-dropdown-item .layout-icon.icon-4col > span {
    flex: 1;
    height: 100%;
    background: currentColor;
}

.layout-dropdown-item .layout-icon.icon-2row,
.layout-dropdown-item .layout-icon.icon-3row {
    flex-direction: column;
    padding: 2px 3px;
}

.layout-dropdown-item .layout-icon.icon-2row > span,
.layout-dropdown-item .layout-icon.icon-3row > span {
    width: 100%;
    flex: 1;
    background: currentColor;
}

.layout-dropdown-item .layout-icon.icon-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 2px;
    gap: 1.5px;
}

.layout-dropdown-item .layout-icon.icon-2x2 > span {
    background: currentColor;
    min-width: 0;
    min-height: 0;
}

.layout-dropdown-item .layout-icon.icon-3x2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 2px;
    gap: 1.5px;
}

.layout-dropdown-item .layout-icon.icon-3x2 > span {
    background: currentColor;
    min-width: 0;
    min-height: 0;
}

.layout-dropdown-item .layout-icon.icon-4x2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 2px;
    gap: 1px;
}

.layout-dropdown-item .layout-icon.icon-4x2 > span {
    background: currentColor;
    min-width: 0;
    min-height: 0;
}

/* 원전분해 레이아웃 아이콘 (analysis-2: 상단 원전분해 + 하단 2패널, analysis-3: 상단 원전분해 + 하단 3패널) */
.layout-dropdown-item .layout-icon.icon-analysis-2,
.layout-dropdown-item .layout-icon.icon-analysis-3 {
    display: flex;
    flex-direction: column;
    padding: 2px;
    gap: 1.5px;
}

.layout-dropdown-item .layout-icon.icon-analysis-2 .analysis-row,
.layout-dropdown-item .layout-icon.icon-analysis-3 .analysis-row {
    width: 100%;
    height: 5px;
    background: currentColor;
    flex-shrink: 0;
}

.layout-dropdown-item .layout-icon.icon-analysis-2 .panel-row,
.layout-dropdown-item .layout-icon.icon-analysis-3 .panel-row {
    display: flex;
    flex: 1;
    gap: 1.5px;
}

.layout-dropdown-item .layout-icon.icon-analysis-2 .panel-row > span,
.layout-dropdown-item .layout-icon.icon-analysis-3 .panel-row > span {
    flex: 1;
    background: currentColor;
    min-width: 0;
    min-height: 0;
}

/* 프리셋 구분선 및 섹션 타이틀 */
.layout-dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 10px;
}

.layout-dropdown-section-title {
    font-size: 0.7rem;
    color: #888;
    padding: 4px 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 프리셋 아이템 */
.layout-preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    color: #333;
}

.layout-preset-item:hover {
    background: #f5f5f5;
}

.layout-preset-item.has-data {
    background: #f0f7ff;
}

.layout-preset-item.has-data:hover {
    background: #e3f2fd;
}

.preset-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.preset-icon {
    display: none;
    width: 22px;
    height: 16px;
    border: 1.5px solid #0F52BA;
    border-radius: 2px;
    flex-shrink: 0;
    overflow: hidden;
    color: #0F52BA;
}

.layout-preset-item.has-data .preset-icon {
    display: flex;
}

.layout-preset-item.has-data .preset-number {
    display: none;
}

.preset-icon.icon-single {
    padding: 2px;
}

.preset-icon.icon-single::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #0F52BA;
    display: block;
}

.preset-icon.icon-2col,
.preset-icon.icon-3col,
.preset-icon.icon-4col {
    display: flex;
    flex-direction: row;
    padding: 2px;
    gap: 2px;
}

.preset-icon.icon-2col > span,
.preset-icon.icon-3col > span,
.preset-icon.icon-4col > span {
    flex: 1;
    height: 100%;
    background: #0F52BA;
}

.preset-icon.icon-2row,
.preset-icon.icon-3row {
    display: flex;
    flex-direction: column;
    padding: 2px;
    gap: 2px;
}

.preset-icon.icon-2row > span,
.preset-icon.icon-3row > span {
    width: 100%;
    flex: 1;
    background: #0F52BA;
}

.preset-icon.icon-2x2,
.preset-icon.icon-3x2,
.preset-icon.icon-4x2 {
    display: grid;
    padding: 2px;
    gap: 1.5px;
}

.preset-icon.icon-2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.preset-icon.icon-3x2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.preset-icon.icon-4x2 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
}

.preset-icon.icon-2x2 > span,
.preset-icon.icon-3x2 > span,
.preset-icon.icon-4x2 > span {
    background: #0F52BA;
    min-width: 0;
    min-height: 0;
}

.preset-icon.icon-analysis-2,
.preset-icon.icon-analysis-3 {
    display: flex;
    flex-direction: column;
    padding: 2px;
    gap: 1.5px;
}

.preset-icon.icon-analysis-2 .analysis-row,
.preset-icon.icon-analysis-3 .analysis-row {
    width: 100%;
    height: 5px;
    background: #0F52BA;
    flex-shrink: 0;
}

.preset-icon.icon-analysis-2 .panel-row,
.preset-icon.icon-analysis-3 .panel-row {
    display: flex;
    flex: 1;
    gap: 1.5px;
}

.preset-icon.icon-analysis-2 .panel-row > span,
.preset-icon.icon-analysis-3 .panel-row > span {
    flex: 1;
    background: #0F52BA;
    min-width: 0;
    min-height: 0;
}

body.night-mode .preset-icon {
    border-color: #5b9bd5;
    color: #5b9bd5;
}

body.night-mode .preset-icon.icon-single::after,
body.night-mode .preset-icon.icon-2col > span,
body.night-mode .preset-icon.icon-3col > span,
body.night-mode .preset-icon.icon-4col > span,
body.night-mode .preset-icon.icon-2row > span,
body.night-mode .preset-icon.icon-3row > span,
body.night-mode .preset-icon.icon-2x2 > span,
body.night-mode .preset-icon.icon-3x2 > span,
body.night-mode .preset-icon.icon-4x2 > span,
body.night-mode .preset-icon.icon-analysis-2 .analysis-row,
body.night-mode .preset-icon.icon-analysis-3 .analysis-row,
body.night-mode .preset-icon.icon-analysis-2 .panel-row > span,
body.night-mode .preset-icon.icon-analysis-3 .panel-row > span {
    background: #5b9bd5;
}

.preset-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #e0e0e0;
    color: #666;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.layout-preset-item.has-data .preset-number {
    background: #0F52BA;
    color: white;
}

.preset-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
}

.layout-preset-item.has-data .preset-name {
    color: #333;
    font-weight: 700;
}

.preset-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.layout-preset-item:hover .preset-actions {
    opacity: 1;
}

.preset-save-btn,
.preset-rename-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.preset-save-btn:hover {
    background: #4CAF50;
    border-color: #4CAF50;
}

.preset-rename-btn:hover {
    background: #2196F3;
    border-color: #2196F3;
}

/* 나이트 모드 */
body.night-mode .layout-dropdown-divider {
    background: #444;
}

body.night-mode .layout-dropdown-section-title {
    color: #888;
}

body.night-mode .layout-preset-item {
    color: #e0e0e0;
}

body.night-mode .layout-preset-item:hover {
    background: #333;
}

body.night-mode .layout-preset-item.has-data {
    background: #1a3a5a;
}

body.night-mode .layout-preset-item.has-data:hover {
    background: #254e7a;
}

body.night-mode .preset-number {
    background: #444;
    color: #aaa;
}

body.night-mode .layout-preset-item.has-data .preset-number {
    background: #0F52BA;
    color: white;
}

body.night-mode .preset-name {
    color: #888;
}

body.night-mode .layout-preset-item.has-data .preset-name {
    color: #e0e0e0;
}

body.night-mode .preset-save-btn,
body.night-mode .preset-rename-btn {
    background: #333;
    border-color: #555;
}

body.night-mode .preset-save-btn:hover {
    background: #4CAF50;
    border-color: #4CAF50;
}

body.night-mode .preset-rename-btn:hover {
    background: #2196F3;
    border-color: #2196F3;
}

/* 분할 컨테이너 - 기존 .container에 적용 */

/* 레이아웃별 그리드 */
.container.layout-single {
    display: flex;
    position: fixed;
    top: var(--top-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0;
    height: auto;
    overflow: hidden;
}

.container.layout-single #analysis-panel,
.container.layout-single #lexicon-panel,
.container.layout-single #search-result-panel {
    display: none;
}

/* 모바일에서 .show 클래스 있으면 표시 (원전분해창 제외 - 단일창에서는 가로모달 사용) */
.container.layout-single #lexicon-panel.show,
.container.layout-single #search-result-panel.show {
    display: flex !important;
}

/* 단일창 모드에서 원전분해창은 항상 숨김 (가로모달 사용) */
.container.layout-single #analysis-panel,
.container.layout-single #analysis-panel.show {
    display: none !important;
}

/* 단일창 모드에서 리사이저 숨김 - 빈 공간 및 보라색 줄 방지 */
.container.layout-single .resizer {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 단일창 모드에서 모든 패널의 리사이저 숨김 (강화) */
.container.layout-single #analysis-panel .resizer,
.container.layout-single #lexicon-panel .resizer,
.container.layout-single #search-result-panel .resizer,
.container.layout-single #bible-area .resizer,
.container.layout-single #commentary-area .resizer {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}

/* 단일창 모드에서 사전창 - 왼쪽에서 오버레이로 표시 */
.container.layout-single #lexicon-panel.show {
    position: fixed !important;
    top: var(--top-nav-height, 50px);
    bottom: 0;
    left: 0;
    right: auto;
    width: 400px;
    max-width: 85vw;
    z-index: 2500;
    box-shadow: 5px 0 15px rgba(0,0,0,0.2);
}

/* 단일창 모드에서 사전창 내부 리사이저도 숨김 */
.container.layout-single #lexicon-panel.show .resizer {
    display: none !important;
    width: 0 !important;
}


/* 단일창 모드에서 성경 영역은 항상 전체 너비 유지 */
.container.layout-single #bible-area {
    flex: 1;
    width: 100%;
}

.container.layout-2col {
    display: flex;
    flex-direction: row;
}

.container.layout-2col > section,
.container.layout-2col > aside {
    flex: 1;
    min-width: 0;
}

.container.layout-3col {
    display: flex;
    flex-direction: row;
}

.container.layout-3col > section,
.container.layout-3col > aside {
    flex: 1;
    min-width: 0;
}

.container.layout-4col {
    display: flex;
    flex-direction: row;
}

.container.layout-4col > section,
.container.layout-4col > aside {
    flex: 1;
    min-width: 0;
}

.container.layout-2row {
    display: flex;
    flex-direction: column;
}

.container.layout-2row > section,
.container.layout-2row > aside {
    flex: 1;
    min-height: 0;
}

.container.layout-3row {
    display: flex;
    flex-direction: column;
}

.container.layout-3row > section,
.container.layout-3row > aside {
    flex: 1;
    min-height: 0;
}

.container.layout-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container.layout-2x2 > section,
.container.layout-2x2 > aside {
    min-width: 0;
    min-height: 0;
}

/* 행 레이아웃 패널 경계선 */
.container.layout-2row > section,
.container.layout-2row > aside,
.container.layout-3row > section,
.container.layout-3row > aside {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
}

.container.layout-2row > *:last-child,
.container.layout-3row > *:last-child {
    border-bottom: none;
}

/* 2x2 그리드 패널 경계선 */
.container.layout-2x2 > *:nth-child(2n) {
    border-right: none;
}

.container.layout-2x2 > *:nth-child(n+3) {
    border-bottom: none;
}

/* 패널 헤더 */
.split-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: linear-gradient(to bottom, #f8f9fa, #f0f1f2);
    border-bottom: 1px solid #e0e0e0;
    min-height: 34px;
    flex-shrink: 0;
}

.split-pane-header .pane-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.split-pane-header .pane-title .pane-icon {
    font-size: 0.95rem;
    color: #0F52BA;
}

/* 패널 타입 드롭다운 */
.pane-type-dropdown {
    position: relative;
}

.pane-type-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

.pane-type-btn:hover {
    border-color: #0F52BA;
    color: #0F52BA;
}

.pane-type-btn .material-icons {
    font-size: 0.9rem;
}

.pane-type-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 130px;
    padding: 4px 0;
    display: none;
    margin-top: 2px;
}

.pane-type-menu.show {
    display: block;
}

.pane-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #333;
    transition: background 0.15s;
}

.pane-type-option:hover {
    background: #f5f5f5;
}

.pane-type-option.active {
    background: #e3f2fd;
    color: #0F52BA;
}

.pane-type-option .pane-type-icon {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

/* 반응형: 모바일에서도 레이아웃 선택기 표시 */
@media (max-width: 767px) {
    .layout-selector-wrapper {
        display: block !important;
    }
}

/* 태블릿 (768px ~ 1023px): 최대 3패널, 레이아웃 선택기 표시 */
@media (min-width: 768px) and (max-width: 1023px) {
    .layout-selector-wrapper {
        display: block;
    }
    
    .layout-dropdown-item[data-layout="4col"],
    .layout-dropdown-item[data-layout="2x2"] {
        opacity: 0.4;
        pointer-events: none;
    }
    
    .layout-dropdown-item[data-layout="4col"]::after,
    .layout-dropdown-item[data-layout="2x2"]::after {
        content: "(3패널 제한)";
        font-size: 0.65rem;
        color: #999;
        margin-left: auto;
    }
}

/* 데스크탑 (1024px+): 모든 레이아웃 허용 */
@media (min-width: 1024px) {
    .layout-selector-wrapper {
        display: block;
    }
}

/* 나이트 모드 대응 */
body.night-mode .pane-type-btn {
    background: #333;
    border-color: #444;
    color: #ccc;
}

body.night-mode .pane-type-menu,
body.night-mode .layout-dropdown {
    background: #2a2a2a;
    border: 1px solid #444;
}

body.night-mode .pane-type-option,
body.night-mode .layout-dropdown-item {
    color: #e0e0e0;
}

body.night-mode .pane-type-option:hover,
body.night-mode .layout-dropdown-item:hover {
    background: #333;
}

body.night-mode .pane-type-option.active,
body.night-mode .layout-dropdown-item.active {
    background: #1a3a5a;
}

body.night-mode .layout-selector-btn {
    color: #e0e0e0;
}

body.night-mode .layout-selector-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ======================================
   멀티 패널 시스템 CSS
   ====================================== */

.multi-panel-container {
    position: fixed;
    top: var(--top-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 4px;
    padding: 2px;
    background: var(--bg-color);
    overflow: hidden;
    z-index: 50;
}

.multi-panel-container.layout-single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 단일 창일 때 패널 헤더 스타일 - 타입 드롭다운 표시 */
.multi-panel-container.layout-single .multi-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0px 4px;
}

.multi-panel-container.layout-single .multi-panel-header .panel-header-btns {
    display: none;
}

.multi-panel-container.layout-single .multi-panel-header .panel-title {
    font-weight: 600;
    color: var(--text-color);
    background: rgba(15, 82, 186, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
}

.multi-panel-container.layout-2col {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.multi-panel-container.layout-3col {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

.multi-panel-container.layout-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

.multi-panel-container.layout-2row {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.multi-panel-container.layout-3row {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

/* 1x2 레이아웃: 왼쪽 1개 큰 패널 + 오른쪽 2개 패널 (상하) */
.multi-panel-container.layout-1x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "panel0 panel1"
        "panel0 panel2";
}

.multi-panel-container.layout-1x2 > .multi-panel:nth-child(1) {
    grid-area: panel0;
}

.multi-panel-container.layout-1x2 > .multi-panel:nth-child(2) {
    grid-area: panel1;
}

.multi-panel-container.layout-1x2 > .multi-panel:nth-child(3) {
    grid-area: panel2;
}

/* 1x2 레이아웃: 열 wrapper 사용 시 */
.multi-panel-container.layout-1x2.use-column-wrappers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: none;
}

.multi-panel-container.layout-1x2.use-column-wrappers > .column-wrapper {
    display: grid;
    grid-template-rows: 1fr;
}

.multi-panel-container.layout-1x2.use-column-wrappers > .column-wrapper.column-1 {
    grid-template-rows: 1fr 1fr;
}

/* 2x1 레이아웃: 왼쪽 2개 패널 (상하) + 오른쪽 1개 큰 패널 */
.multi-panel-container.layout-2x1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "panel0 panel2"
        "panel1 panel2";
}

.multi-panel-container.layout-2x1 > .multi-panel:nth-child(1) {
    grid-area: panel0;
}

.multi-panel-container.layout-2x1 > .multi-panel:nth-child(2) {
    grid-area: panel1;
}

.multi-panel-container.layout-2x1 > .multi-panel:nth-child(3) {
    grid-area: panel2;
}

/* 2x1 레이아웃: 열 wrapper 사용 시 */
.multi-panel-container.layout-2x1.use-column-wrappers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: none;
}

.multi-panel-container.layout-2x1.use-column-wrappers > .column-wrapper {
    display: grid;
    grid-template-rows: 1fr;
}

.multi-panel-container.layout-2x1.use-column-wrappers > .column-wrapper.column-0 {
    grid-template-rows: 1fr 1fr;
}

.multi-panel-container.layout-2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.multi-panel-container.layout-3x2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.multi-panel-container.layout-4x2 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 원전분해 레이아웃 (analysis-2: 상단 원전분해 + 하단 2열, analysis-3: 상단 원전분해 + 하단 3열) */
.multi-panel-container.layout-analysis-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(220px, auto) 1fr;
    grid-template-areas:
        "analysis analysis"
        "panel1 panel2";
}

.multi-panel-container.layout-analysis-3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(220px, auto) 1fr;
    grid-template-areas:
        "analysis analysis analysis"
        "panel1 panel2 panel3";
}

/* 원전분해 레이아웃 - 0번 패널(원전분해)이 상단 전체 너비 차지 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child {
    grid-area: analysis;
    height: auto;
    min-height: 220px;
    max-height: none;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

/* 원전분해 카드 - 콘텐츠 기반 높이 (빈 공간 제거) */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-word-block,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-word-block {
    min-height: auto;
    height: auto;
}

/* DHNT 모드도 콘텐츠 기반 높이 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-word-block.dhnt-mode,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-word-block.dhnt-mode {
    min-height: auto;
}

/* 원전분해 레이아웃 - 상단 패널에서 사전 영역 숨기기 (5줄만 표시) */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-vertical-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-vertical-scroll-wrapper {
    display: none;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper {
    border-bottom: none;
}

/* 원전분해 레이아웃 - 하단 패널 배치 */
.multi-panel-container.layout-analysis-2 > .multi-panel:nth-child(2) {
    grid-area: panel1;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:nth-child(3) {
    grid-area: panel2;
}

.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(2) {
    grid-area: panel1;
}

.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(3) {
    grid-area: panel2;
}

.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(4) {
    grid-area: panel3;
}

/* 원전분해 레이아웃 - 하단 행 드래그 리사이즈 */
.multi-panel-container.layout-analysis-2 > .multi-panel:nth-child(n+2) .multi-panel-header,
.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(n+2) .multi-panel-header {
    cursor: row-resize;
    position: relative;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:nth-child(n+2) .multi-panel-header::before,
.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(n+2) .multi-panel-header::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    background: linear-gradient(90deg, transparent, var(--border-color), var(--border-color), transparent);
    border-radius: 4px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* 2행 레이아웃 행 높이 조절 - 아래 행 헤더로 드래그 */
.multi-panel-container.layout-2row .multi-panel:nth-child(2) .multi-panel-header,
.multi-panel-container.layout-2x2 .multi-panel:nth-child(n+3) .multi-panel-header,
.multi-panel-container.layout-3x2 .multi-panel:nth-child(n+4) .multi-panel-header,
.multi-panel-container.layout-3row .multi-panel:nth-child(2) .multi-panel-header,
.multi-panel-container.layout-3row .multi-panel:nth-child(3) .multi-panel-header {
    cursor: row-resize;
    position: relative;
}

/* 드래그 가능 표시 - 헤더 상단에 핸들 표시 (개선된 버전) */
.multi-panel-container.layout-2row .multi-panel:nth-child(2) .multi-panel-header::before,
.multi-panel-container.layout-2x2 .multi-panel:nth-child(n+3) .multi-panel-header::before,
.multi-panel-container.layout-3x2 .multi-panel:nth-child(n+4) .multi-panel-header::before,
.multi-panel-container.layout-3row .multi-panel:nth-child(2) .multi-panel-header::before,
.multi-panel-container.layout-3row .multi-panel:nth-child(3) .multi-panel-header::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    background: linear-gradient(90deg, transparent, var(--border-color), var(--border-color), transparent);
    border-radius: 4px;
    opacity: 0.5;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.multi-panel-container.layout-2row .multi-panel:nth-child(2) .multi-panel-header:hover::before,
.multi-panel-container.layout-2x2 .multi-panel:nth-child(n+3) .multi-panel-header:hover::before,
.multi-panel-container.layout-3x2 .multi-panel:nth-child(n+4) .multi-panel-header:hover::before,
.multi-panel-container.layout-3row .multi-panel:nth-child(2) .multi-panel-header:hover::before,
.multi-panel-container.layout-3row .multi-panel:nth-child(3) .multi-panel-header:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--primary-color), transparent);
    width: 50px;
    height: 10px;
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.4);
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(15, 82, 186, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(15, 82, 186, 0.7);
    }
}

/* 행 리사이징 중 상태 */
.multi-panel-container.row-resizing {
    user-select: none;
}

.multi-panel-container.row-resizing .multi-panel-header {
    cursor: ns-resize !important;
}

/* 행 리사이징 중 핸들 강조 */
.multi-panel-container.row-resizing .multi-panel-header::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--primary-color), transparent) !important;
    width: 50px !important;
    height: 12px !important;
    box-shadow: 0 4px 16px rgba(15, 82, 186, 0.6), 0 0 20px rgba(15, 82, 186, 0.3) !important;
    animation: none !important;
}

/* === 열 리사이즈 핸들 (수평 드래그) === */
.column-resize-handle {
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    z-index: 50;
    transition: background 0.2s ease;
}

.column-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 44px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.column-resize-handle:hover::before {
    opacity: 1;
    background: var(--primary-color);
    height: 60px;
    width: 6px;
    box-shadow: 0 0 8px rgba(15, 82, 186, 0.5);
}

.column-resize-handle.active::before {
    opacity: 1;
    background: var(--primary-color);
    height: 80%;
    width: 8px;
    box-shadow: 0 0 12px rgba(15, 82, 186, 0.7);
}

/* 열 리사이징 중 상태 */
.multi-panel-container.column-resizing {
    user-select: none;
}

.multi-panel-container.column-resizing * {
    cursor: ew-resize !important;
}

/* ===== 2x2/3x2 레이아웃 열 wrapper 스타일 ===== */
.column-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.column-wrapper .multi-panel {
    min-width: 0;
    min-height: 0;
}

/* 2x2 레이아웃 - 열 wrapper 사용 시 */
.multi-panel-container.layout-2x2.use-column-wrappers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3x2 레이아웃 - 열 wrapper 사용 시 */
.multi-panel-container.layout-3x2.use-column-wrappers {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 행 리사이즈 핸들 (열 wrapper 내부) */
.row-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    cursor: row-resize;
    z-index: 50;
    transition: background 0.2s ease;
}

.row-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.row-resize-handle:hover::before {
    opacity: 1;
    background: var(--primary-color);
    width: 60px;
    height: 6px;
    box-shadow: 0 0 8px rgba(15, 82, 186, 0.5);
}

.row-resize-handle.active::before {
    opacity: 1;
    background: var(--primary-color);
    width: 80%;
    height: 8px;
    box-shadow: 0 0 12px rgba(15, 82, 186, 0.7);
}

/* 열 wrapper 행 리사이징 중 상태 */
.column-wrapper.row-resizing {
    user-select: none;
}

.column-wrapper.row-resizing .row-resize-handle::before {
    opacity: 1 !important;
    background: var(--primary-color) !important;
    width: 50px !important;
    height: 8px !important;
    box-shadow: 0 4px 16px rgba(15, 82, 186, 0.6) !important;
}

.multi-panel {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.multi-panel.active-panel {
    border-color: #0F52BA;
    box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.2);
}

.multi-panel.maximized {
    position: fixed !important;
    top: var(--top-nav-height) !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 52px !important;
    z-index: 100 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.multi-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0px 4px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    height: 44px;
}

.dark-mode .multi-panel-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
}

.panel-type-dropdown {
    position: relative;
    flex-shrink: 0;
}

.panel-type-btn-multi {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 60px;
}

.panel-type-btn-multi:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.panel-type-menu-multi {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 200;
    min-width: 140px;
    display: none;
    overflow: hidden;
}

.panel-type-menu-multi.show {
    display: block;
}

.panel-type-option-multi {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
    transition: background 0.2s;
}

.panel-type-option-multi:hover {
    background: var(--hover-bg);
}

.panel-type-option-multi.selected {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color);
    font-weight: 700;
}

/* 패널 언어 선택 드롭다운 */
.panel-lang-dropdown {
    position: relative;
    flex-shrink: 0;
}

.panel-lang-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-color);
    min-width: 45px;
}

.panel-lang-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.panel-lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 200;
    min-width: 100px;
    display: none;
    overflow: hidden;
}

.panel-lang-menu.show {
    display: block;
}

.panel-lang-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
    transition: background 0.2s;
}

.panel-lang-option:hover {
    background: var(--hover-bg);
}

.panel-lang-option.selected {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color);
    font-weight: 700;
}

.panel-view-checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
    transition: background 0.2s;
}

.panel-view-checkbox-option:hover {
    background: var(--hover-bg);
}

.panel-view-checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* 인라인 노트 줄 수 선택 (보기설정 드롭다운 내) */
.panel-note-lines-inline {
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid #e57373;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
    cursor: pointer;
    font-weight: 700;
    outline: none;
    min-width: 70px;
}
.panel-note-lines-inline:focus {
    border-color: #e53935;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2);
}
.panel-note-lines-inline option {
    background: white;
    color: var(--text-color);
}

.panel-note-lines-config {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 8px;
}

.panel-note-lines-select {
    padding: 0px 4px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
}

.panel-note-lines-select-header {
    padding: 3px 6px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    margin-left: 4px;
}

.inline-note-card {
    margin: 8px 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f7f0, #e8f5e8);
    border: 1px solid #c8e6c8;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.night-mode .inline-note-card {
    background: linear-gradient(135deg, #1a2e1a, #1f3a1f);
    border-color: #2a4a2a;
}

.inline-note-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--text-sub);
}

.inline-note-header .note-icon {
    font-size: 1rem;
    color: #4caf50;
}

.inline-note-type {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
}

.inline-note-type.private { background: #e3f2fd; color: #1976d2; }
.inline-note-type.open { background: #fff3e0; color: #e65100; }
.inline-note-type.ahpi { background: #fce4ec; color: #c2185b; }

.night-mode .inline-note-type.private { background: #1a3a5c; }
.night-mode .inline-note-type.open { background: #4a2a0a; }
.night-mode .inline-note-type.ahpi { background: #4a1a2a; }

.inline-note-content {
    color: var(--text-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.inline-note-more {
    display: inline;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 700;
    margin-left: 4px;
}

.inline-note-more:hover {
    text-decoration: underline;
}

.crossref-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    cursor: pointer;
    color: #9e9e9e;
    font-size: 0.9rem !important;
    vertical-align: middle;
    transition: color 0.2s;
}

.crossref-indicator:hover {
    color: var(--primary-color);
}

.panel-parallel-config {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 210;
    min-width: 160px;
    padding: 10px;
}

.panel-parallel-config.show {
    display: block !important;
}

.parallel-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.parallel-config-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.parallel-config-confirm-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.parallel-config-confirm-btn .material-icons {
    font-size: 1rem;
}

.parallel-config-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parallel-lang-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-color);
    border-radius: 4px;
    cursor: grab;
    transition: background 0.2s;
}

.parallel-lang-item:hover {
    background: var(--hover-bg);
}

.parallel-lang-item.dragging {
    opacity: 0.5;
    background: var(--primary-color);
    color: white;
}

.parallel-lang-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.parallel-lang-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.parallel-config-note {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-top: 8px;
    text-align: center;
}

.panel-lang-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

.panel-font-option {
    border-top: none;
}

.panel-font-config {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 210;
    min-width: 200px;
    padding: 10px;
    display: none;
}

.panel-font-config.show {
    display: block !important;
}

.panel-font-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.panel-font-config-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--hover-bg);
    color: var(--text-sub);
    cursor: pointer;
    transition: background 0.2s;
}

.panel-font-config-close-btn:hover {
    background: var(--border-color);
}

.panel-font-config-close-btn .material-icons {
    font-size: 1rem;
}

.panel-font-config-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel-font-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-font-section label {
    font-size: 0.75rem;
    color: var(--text-sub);
    font-weight: 700;
}

.panel-font-type-btns {
    display: flex;
    gap: 6px;
}

.panel-font-type-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.panel-font-type-btn:hover {
    background: var(--hover-bg);
}

.panel-font-type-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.panel-font-size-slider {
    width: 100%;
    accent-color: var(--primary-color);
}

.panel-font-size-value {
    font-size: 0.75rem;
    color: var(--text-sub);
    text-align: center;
}

.panel-font-sample {
    padding: 10px;
    background: var(--bg-color);
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-color);
}

.panel-title {
    flex: 1;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* 성경창 패널 제목 - 클릭 가능 스타일 (상단 네비바와 동일) */
.panel-title.clickable {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #E8F4FD 0%, #D6EAF8 100%);
    color: var(--primary-color);
    transition: all 0.2s ease;
    display: inline-block;
    flex: 0 0 auto;
}

.panel-title.clickable:hover {
    background: linear-gradient(135deg, #D6EAF8 0%, #AED6F1 100%);
    transform: scale(1.02);
}

.panel-title.clickable:active {
    transform: scale(0.98);
}

.dark-mode .panel-title.clickable {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.3) 0%, rgba(15, 82, 186, 0.2) 100%);
    color: #64B5F6;
}

.dark-mode .panel-title.clickable:hover {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.4) 0%, rgba(15, 82, 186, 0.3) 100%);
}

/* 패널 가로 원전분해 스타일 (기존 모달 스타일 재사용) */
.panel-analysis-horizontal-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-analysis-horizontal-header {
    padding: 10px 16px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-section);
}

/* 패널 내 상단 단어 블록 영역 */
.panel-scroll-wrapper-top {
    flex: 0 0 auto;
    height: 38%;
    min-height: 160px;
    max-height: 250px;
}

/* 패널 내 하단 사전 영역 */
.panel-lexicon-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--border-color);
}

.panel-header-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.panel-header-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-sub);
    transition: all 0.2s;
}

.panel-header-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

/* 최대화 버튼 숨기기 */
.panel-header-btn.maximize-btn {
    display: none !important;
}

/* 창 연결 토글 스위치 - 칩 스타일 */
.sync-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 16px;
    background: #e9ecef;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.sync-toggle-wrapper.on {
    background: rgba(15, 82, 186, 0.15);
    border-color: #0F52BA;
}

.sync-toggle-wrapper:hover {
    background: #dde4eb;
}

.sync-toggle-wrapper.on:hover {
    background: rgba(15, 82, 186, 0.25);
}

.dark-mode .sync-toggle-wrapper {
    background: #333;
    border-color: #444;
}

.dark-mode .sync-toggle-wrapper.on {
    background: rgba(77, 163, 255, 0.2);
    border-color: #4da3ff;
}

.dark-mode .sync-toggle-wrapper:hover {
    background: #3a3a3a;
}

.dark-mode .sync-toggle-wrapper.on:hover {
    background: rgba(77, 163, 255, 0.3);
}

.sync-label {
    font-size: 0.75rem;
    color: var(--text-sub);
    white-space: nowrap;
    font-weight: 700;
}

.sync-toggle-wrapper.on .sync-label {
    color: #0F52BA;
}

.dark-mode .sync-toggle-wrapper.on .sync-label {
    color: #4da3ff;
}

.sync-toggle-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
    transition: all 0.25s ease;
}

.sync-toggle-wrapper.on .sync-toggle-indicator {
    background: #0F52BA;
    box-shadow: 0 0 4px rgba(15, 82, 186, 0.5);
}

.dark-mode .sync-toggle-indicator {
    background: #555;
}

.dark-mode .sync-toggle-wrapper.on .sync-toggle-indicator {
    background: #4da3ff;
    box-shadow: 0 0 4px rgba(77, 163, 255, 0.5);
}

.panel-header-btn.close-btn-multi:hover {
    background: #ffebee;
    color: #d32f2f;
}

.dark-mode .panel-header-btn.close-btn-multi:hover {
    background: rgba(211, 47, 47, 0.2);
}

.multi-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    position: relative;
    min-height: 0;
}

.multi-panel-content.single-layout-content {
    padding: 0;
}

.multi-panel-content .bible-panel-content {
    height: 100%;
    overflow-y: auto;
}

.multi-panel-content .verse-item {
    padding: 6px 4px;
    align-items: flex-start;
}

.multi-panel-content .panel-placeholder,
#bible-list .panel-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-sub);
    text-align: center;
    padding: 20px;
    position: relative;
}

.multi-panel-content .panel-placeholder-icon,
#bible-list .panel-placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.multi-panel-content .panel-placeholder-text,
#bible-list .panel-placeholder-text {
    font-size: 0.95rem;
}

.panel-resizer {
    position: absolute;
    background: transparent;
    z-index: 10;
}

.panel-resizer.horizontal {
    width: 100%;
    height: 10px;
    bottom: -5px;
    left: 0;
    cursor: row-resize;
}

.panel-resizer.horizontal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.panel-resizer.horizontal:hover::before {
    opacity: 1;
    background: var(--primary-color);
    width: 60px;
    height: 6px;
    box-shadow: 0 0 8px rgba(15, 82, 186, 0.5);
}

.panel-resizer.vertical {
    width: 10px;
    height: 100%;
    right: -5px;
    top: 0;
    cursor: col-resize;
}

.panel-resizer.vertical::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 44px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.panel-resizer.vertical:hover::before {
    opacity: 1;
    background: var(--primary-color);
    height: 60px;
    width: 6px;
    box-shadow: 0 0 8px rgba(15, 82, 186, 0.5);
}

.panel-resizer:hover {
    background: rgba(15, 82, 186, 0.3);
}

.multi-panel-content .search-panel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.multi-panel-content .search-input-wrapper {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.multi-panel-content .search-input-wrapper input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--bg-color);
    color: var(--text-color);
}

.multi-panel-content .search-input-wrapper button {
    padding: 8px 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.multi-panel-content .search-results-list {
    flex: 1;
    overflow-y: auto;
}

.multi-panel-content .notes-panel-content,
.multi-panel-content .torah-panel-content {
    height: 100%;
    overflow-y: auto;
}

.multi-panel-content .writer-panel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.multi-panel-content .writer-panel-content textarea {
    flex: 1;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.95rem;
    resize: none;
    background: var(--bg-color);
    color: var(--text-color);
}

.multi-panel-content .analysis-panel-content {
    height: 100%;
    overflow: hidden;
}

.multi-panel-content .lexicon-panel-content {
    height: 100%;
    overflow-y: auto;
}

/* 원전분해 패널 컨테이너 - 상하 영역 분리 */
.analysis-panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.analysis-panel-container .analysis-horizontal-scroll-wrapper {
    flex-shrink: 0;
}

.analysis-panel-container .analysis-vertical-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.analysis-panel-container .analysis-lexicon-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .multi-panel-container {
        top: var(--top-nav-height);
        bottom: 0;
    }
    
    .multi-panel-header {
        padding: 4px 6px;
        min-height: 32px;
    }
    
    .panel-type-btn-multi {
        min-width: 50px;
        font-size: 0.75rem;
        padding: 3px 6px;
    }
    
    .panel-header-btn {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }
    
    .multi-panel-container.layout-4col,
    .multi-panel-container.layout-3col,
    .multi-panel-container.layout-3row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .multi-panel-container {
        top: var(--top-nav-height);
        bottom: 0;
    }
    
    .multi-panel-container.layout-4col {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }
}

/* ================================================================
   플로팅 사전창 (멀티패널 모드용)
   ================================================================ */
.floating-lexicon-panel {
    position: fixed;
    top: var(--top-nav-height);
    bottom: 0;
    left: 0;
    width: 45%;
    max-width: 500px;
    background: var(--card-bg, #fff);
    border-right: 1px solid var(--border-color, #ddd);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    visibility: hidden;
}

.floating-lexicon-panel.show {
    transform: translateX(0);
    visibility: visible;
}

.floating-lexicon-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 600;
    position: relative;
}

.floating-lexicon-header .close-icon {
    cursor: pointer;
    font-size: 1.3rem;
    margin-right: 10px;
    opacity: 0.9;
}

.floating-lexicon-header .close-icon:hover {
    opacity: 1;
}

.floating-lexicon-header .panel-title {
    font-size: 1rem;
}

.floating-lexicon-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px 15px 5px 15px;
    color: var(--text-color, #212121);
    touch-action: pan-y pinch-zoom;
    transform-origin: top left;
}

/* 플로팅 사전창 내부 스타일 - 기존 사전창 스타일 상속 */
.floating-lexicon-content .lexicon-word-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color, #0F52BA);
}

.floating-lexicon-content .lexicon-word-main {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.floating-lexicon-content .lexicon-transliteration {
    font-size: 1rem;
    color: #008080;
    font-weight: 700;
    text-align: left;
}

.floating-lexicon-content .lexicon-meaning {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
}

.floating-lexicon-content .lexicon-section {
    margin: 15px 0;
}

.floating-lexicon-content .lexicon-section-title {
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.floating-lexicon-content .concordance-link {
    display: inline-block;
    padding: 6px 12px;
    background: var(--primary-color, #0F52BA);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 10px;
    cursor: pointer;
}

.floating-lexicon-content .concordance-link:hover {
    background: #0a3d8f;
}

/* 폰: 사전창 전체 화면 모달 */
@media (max-width: 767px) {
    .floating-lexicon-panel {
        position: fixed;
        top: var(--top-nav-height);
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-radius: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }
    
    .floating-lexicon-panel.show {
        transform: translateX(0);
    }
    
    .floating-lexicon-header {
        padding: 14px 16px;
    }
    
    .floating-lexicon-content {
        padding: 16px;
    }
}

/* 태블릿: 사전창 1/3 폭 모달 */
@media (min-width: 768px) and (max-width: 1023px) {
    .floating-lexicon-panel {
        position: fixed;
        top: var(--top-nav-height);
        bottom: 0;
        left: 0;
        width: 45%;
        max-width: 45%;
        border-right: 1px solid var(--border-color, #ddd);
    }
}

/* 데스크탑: 사전창 1/3 폭 또는 최대 400px */
@media (min-width: 1024px) {
    .floating-lexicon-panel {
        position: fixed;
        top: var(--top-nav-height);
        bottom: 0;
        width: 45%;
        max-width: 500px;
    }
}

@media (min-width: 1024px) {
    .multi-panel-container {
        top: var(--top-nav-height);
        bottom: 0;
    }
}

body.multi-panel-mode #legacy-container {
    display: none !important;
}

body:not(.multi-panel-mode) #multi-panel-container {
    display: none !important;
}

.dark-mode .multi-panel {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .multi-panel.active-panel {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.3);
}

.dark-mode .panel-type-menu-multi {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* 나이트모드 멀티패널 텍스트 색상 밝게 */
body.night-mode .multi-panel-content,
body.night-mode .multi-panel-content .verse-item,
body.night-mode .multi-panel-content .verse-line,
body.night-mode .multi-panel-content .korean-text,
body.night-mode .multi-panel-content .english-text {
    color: #e0e0e0;
}

body.night-mode .multi-panel-content .hebrew-text,
body.night-mode .multi-panel-content .greek-text {
    color: #d4b896;
}

body.night-mode .multi-panel-content .verse-num {
    color: #8ab4f8;
}

/* 프리셋 토스트 애니메이션 */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ============================================
   책갈피 (Bookmarks) 스타일
   ============================================ */

.bookmarks-modal-content {
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.bookmarks-modal-content .modal-header {
    cursor: default;
}

.bookmarks-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
}

.bookmarks-tabs {
    display: flex;
    gap: 5px;
}

.bookmark-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
}

.bookmark-tab:hover {
    background: rgba(15, 82, 186, 0.1);
}

.bookmark-tab.active {
    background: var(--primary-color);
    color: white;
}

.bookmark-manage-btn {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-color);
    font-size: 0.85rem;
}

.bookmark-manage-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.bookmarks-filter-bar {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.bookmark-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
}

.bookmark-search-box .material-icons {
    font-size: 0.9rem;
    color: var(--text-sub);
}

.bookmark-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-color);
    outline: none;
}

.bookmark-group-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
}

.bookmarks-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.bookmarks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: var(--text-sub);
    text-align: center;
}

.bookmarks-empty p {
    margin: 8px 0 0;
}

.bookmark-group-section {
    margin-bottom: 15px;
}

.bookmark-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: var(--bg-color);
    cursor: pointer;
    user-select: none;
}

.bookmark-group-header .material-icons {
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.bookmark-group-header.collapsed .material-icons.expand-icon {
    transform: rotate(-90deg);
}

.bookmark-group-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.9rem;
}

.bookmark-group-count {
    font-size: 0.8rem;
    color: var(--text-sub);
    background: var(--border-color);
    padding: 2px 8px;
    border-radius: 10px;
}

.bookmark-group-items {
    padding: 0 15px;
}

.bookmark-group-items.hidden {
    display: none;
}

.bookmark-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.bookmark-item:hover {
    background: rgba(15, 82, 186, 0.05);
}

.bookmark-item:last-child {
    border-bottom: none;
}

.bookmark-color-bar {
    width: 4px;
    height: 100%;
    min-height: 44px;
    border-radius: 2px;
    flex-shrink: 0;
}

.bookmark-info {
    flex: 1;
    min-width: 0;
}

.bookmark-ref {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.bookmark-label {
    font-size: 0.85rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.bookmark-group-tag {
    font-size: 0.75rem;
    padding: 0px 4px;
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color);
    border-radius: 4px;
}

.bookmark-date {
    font-size: 0.75rem;
    color: var(--text-sub);
}

.bookmark-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.bookmark-item:hover .bookmark-actions {
    opacity: 1;
}

.bookmark-action-btn {
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-sub);
}

.bookmark-action-btn:hover {
    background: var(--border-color);
    color: var(--primary-color);
}

.bookmark-action-btn .material-icons {
    font-size: 0.9rem;
}

/* 책갈피 추가/수정 팝업 */
.bookmark-popup {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 2000;
    padding: 15px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.bookmark-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color);
}

.bookmark-popup-location {
    text-align: center;
    padding: 10px;
    background: rgba(15, 82, 186, 0.08);
    border-radius: 8px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.bookmark-popup-field {
    margin-bottom: 12px;
}

.bookmark-popup-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.bookmark-popup-field input,
.bookmark-popup-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

.bookmark-popup-field input:focus,
.bookmark-popup-field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.bookmark-color-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-option {
    width: 28px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--text-color);
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px currentColor;
}

.bookmark-popup-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}

.bookmark-save-btn {
    flex: 1;
    padding: 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.bookmark-save-btn:hover {
    background: #0a3d8f;
}

.bookmark-delete-btn {
    padding: 10px 12px;
    background: #ffebee;
    color: #e53935;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.bookmark-delete-btn:hover {
    background: #ffcdd2;
}

/* 그룹 인라인 추가 UI */
.bookmark-group-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bookmark-group-input-wrapper select {
    flex: 1;
}

.bookmark-quick-add-group {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.2s;
}

.bookmark-quick-add-group:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.bookmark-quick-group-form {
    margin-top: 10px;
    padding: 12px;
    background: rgba(var(--primary-color-rgb, 15, 82, 186), 0.05);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.bookmark-quick-group-form input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-color);
    color: var(--text-color);
    margin-bottom: 10px;
    box-sizing: border-box;
}

.bookmark-quick-group-colors {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.bookmark-quick-group-colors .color-option {
    width: 24px;
    height: 24px;
}

.bookmark-quick-group-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bookmark-quick-group-actions button {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
}

.bookmark-quick-group-actions .btn-cancel {
    background: var(--card-bg);
    color: var(--text-sub);
    border: 1px solid var(--border-color);
}

.bookmark-quick-group-actions .btn-save {
    background: var(--primary-color);
    color: white;
}

/* 그룹 아이템 인라인 편집 */
.bookmark-group-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.bookmark-group-item:last-child {
    border-bottom: none;
}

.group-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.group-info {
    flex: 1;
    min-width: 0;
}

.group-name {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2px;
}

.group-name-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--bg-color);
    color: var(--text-color);
}

.group-count {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.group-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.group-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    transition: all 0.2s;
}

.group-action-btn:hover {
    background: var(--hover-color);
    color: var(--text-color);
}

.group-action-btn.delete:hover {
    background: #ffebee;
    color: #e53935;
}

.group-action-btn .material-icons {
    font-size: 0.9rem;
}

/* 그룹 관리 모달 */
.bookmark-groups-add {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.bookmark-groups-add input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 10px;
    background: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

.new-group-color-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.add-group-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.add-group-btn:hover {
    background: #0a3d8f;
}

.bookmark-groups-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.bookmark-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

.bookmark-group-item:last-child {
    border-bottom: none;
}

.group-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.group-info {
    flex: 1;
    min-width: 0;
}

.group-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.group-count {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.group-actions {
    display: flex;
    gap: 4px;
}

.group-action-btn {
    padding: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-sub);
}

.group-action-btn:hover {
    background: var(--border-color);
}

.group-action-btn.delete:hover {
    background: #ffebee;
    color: #e53935;
}

/* 책갈피된 구절 표시 */
.verse-bookmarked {
    position: relative;
}

.verse-bookmarked::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--bookmark-color, #0F52BA);
}

.bookmark-indicator {
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}

.bookmark-indicator .material-icons {
    font-size: 0.9rem;
}

/* 모바일 반응형 */
@media (max-width: 600px) {
    .bookmarks-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .bookmarks-filter-bar {
        flex-direction: column;
    }
    
    .bookmark-group-select {
        width: 100%;
    }
    
    .bookmark-popup {
        bottom: 70px;
        width: 95%;
    }
    
    .bookmark-actions {
        opacity: 1;
    }
}

/* 다크 모드 */
.dark-mode .bookmark-popup {
    background: var(--card-bg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.dark-mode .bookmark-group-header {
    background: rgba(255,255,255,0.05);
}

.dark-mode .bookmark-item:hover {
    background: rgba(255,255,255,0.05);
}

.dark-mode .bookmark-delete-btn {
    background: rgba(229, 57, 53, 0.2);
}

/* ===== 말씀 카드 공유 모달 ===== */
#verse-card-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    z-index: 2000;
    padding: 0;
    margin: 0;
}

.verse-card-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    margin: 0;
}

#verse-card-modal .modal-header .close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    cursor: pointer;
    color: var(--text-sub);
    z-index: 10;
    background: none;
    border: none;
    padding: 5px 10px;
}

#verse-card-modal .modal-header .close-btn:hover {
    color: var(--primary-color);
}

.verse-card-modal-content .modal-header {
    position: relative;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    z-index: 10;
    flex-shrink: 0;
    cursor: default;
}

/* 2단 레이아웃 래퍼 */
.verse-card-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* 좌측: 미리보기 영역 */
.verse-card-preview-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    padding: 20px;
    overflow: hidden;
}

#verse-card-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 우측: 편집 컨트롤 영역 */
.verse-card-controls-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
}

/* 카드 미리보기 - 너비 기준 크기 조정 */
.verse-card-preview {
    width: 85%;
    max-width: 320px;
    aspect-ratio: 9/16;
    background: #fdf8f3;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 날짜 섹션 */
.card-date-section {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
    background: transparent;
}

.card-day-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}

/* 이미지 섹션 - 9:16 카드에서 상단 45% 차지 (고정 비율) */
.card-image-section {
    height: 45%;
    flex-shrink: 0;
    background: #e8dfd3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #999;
    cursor: pointer;
}

.card-image-placeholder .material-icons {
    font-size: 3rem;
}

.card-image-placeholder span:last-child {
    font-size: 0.9rem;
}

#card-user-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-image-buttons {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
}

.card-image-btn {
    width: 40px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.card-image-btn:hover {
    background: rgba(0,0,0,0.8);
}

.card-image-btn .material-icons {
    font-size: 1.5rem;
}

.card-dict-btn {
    background: rgba(139, 69, 19, 0.8);
}

.card-dict-btn:hover {
    background: rgba(139, 69, 19, 1);
}

/* 성경 구절 섹션 */
.card-verse-section {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* 드래그 가능한 글상자 */
.card-textbox {
    position: relative;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: text;
}

.card-textbox:hover {
    background: rgba(15, 82, 186, 0.05);
}

.card-textbox:hover .textbox-controls {
    opacity: 1;
}

.card-textbox.dragging {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-textbox.drag-over {
    border: 2px dashed var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.08);
}

/* 글상자 컨트롤 버튼 */
.textbox-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    padding: 2px 4px;
    z-index: 10;
}

.textbox-ctrl-btn {
    width: 28px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub, #666);
    transition: all 0.2s;
}

.textbox-ctrl-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.textbox-ctrl-btn .material-icons {
    font-size: 18px;
}

.textbox-controls .drag-handle {
    font-size: 18px;
    color: var(--text-sub, #666);
    cursor: grab;
}

.textbox-controls .drag-handle:active {
    cursor: grabbing;
}

/* 추가 텍스트 영역 */
.card-extra-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    min-height: 24px;
}

.card-extra-text:empty:before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
}

.card-extra-text[contenteditable="true"]:focus {
    outline: none;
}

/* 다크모드 글상자 컨트롤 */
body.night-mode .textbox-controls {
    background: rgba(30,30,30,0.95);
}

body.night-mode .textbox-ctrl-btn {
    color: var(--text-sub, #aaa);
}

body.night-mode .card-extra-text {
    color: #ccc;
}

body.night-mode .card-extra-text:empty:before {
    color: #666;
}

.card-verse-ref {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.card-verse-ref:hover {
    background: rgba(15, 82, 186, 0.1);
}

.card-verse-ref[contenteditable="true"] {
    outline: 2px dashed var(--primary-color, #0F52BA);
    outline-offset: 2px;
    cursor: text;
    background: rgba(15, 82, 186, 0.05);
}

.card-verse-ref[contenteditable="true"]:focus {
    outline: 2px solid var(--primary-color, #0F52BA);
}

.card-verse-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}

.card-verse-lang-text {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.card-verse-lang-text:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-verse-lang-text:not(:last-child) {
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}

/* 구절 텍스트 편집 */
.card-verse-text[contenteditable="true"] {
    outline: 2px dashed var(--primary-color, #0F52BA);
    outline-offset: 4px;
    border-radius: 4px;
    cursor: text;
    min-height: 44px;
}

.card-verse-text[contenteditable="true"]:focus {
    outline: 2px solid var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.card-verse-edit-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(0,0,0,0.4);
    margin-top: 8px;
    cursor: pointer;
    transition: color 0.2s;
}

.card-verse-edit-hint:hover {
    color: var(--primary-color, #0F52BA);
}

.card-verse-edit-hint .material-icons {
    font-size: 1rem;
}

.card-verse-text.editing ~ .card-verse-edit-hint {
    display: none;
}

/* 구절 추가 버튼 */
.card-add-verse-section {
    padding: 8px 20px;
    display: flex;
    justify-content: center;
}

.card-add-verse-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
    border: 1px dashed var(--primary-color, #0F52BA);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.card-add-verse-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.card-add-verse-btn .material-icons {
    font-size: 0.9rem;
}

/* 다크 모드에서 편집 힌트 */
.verse-card-preview.bg-dark .card-verse-edit-hint {
    color: rgba(255,255,255,0.4);
}

.verse-card-preview.bg-dark .card-verse-edit-hint:hover {
    color: #6bb3f8;
}

.verse-card-preview.bg-dark .card-add-verse-btn {
    background: rgba(107, 179, 248, 0.2);
    color: #6bb3f8;
    border-color: #6bb3f8;
}

.verse-card-preview.bg-dark .card-add-verse-btn:hover {
    background: #6bb3f8;
    color: #1a1a1a;
}

/* 구절 추가 모달 */
.verse-add-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7000;
}

.verse-add-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.verse-add-modal-header {
    padding: 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.verse-add-modal-header h3 {
    margin: 0;
    font-size: 0.9rem;
}

.verse-add-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.verse-add-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.verse-add-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.verse-add-input:focus {
    outline: none;
    border-color: var(--primary-color, #0F52BA);
}

.verse-add-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
}

.verse-add-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.verse-add-item:last-child {
    border-bottom: none;
}

.verse-add-item:hover {
    background: #f5f5f5;
}

.verse-add-item.selected {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
}

.verse-add-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.verse-add-modal-footer button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

.verse-add-cancel-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
}

.verse-add-confirm-btn {
    background: var(--primary-color, #0F52BA);
    border: none;
    color: white;
}

/* QR 코드 섹션 */
.card-qr-section {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* QR 코드 숨김 */
#card-qr-code {
    display: none !important;
}

#card-qr-code {
    width: 40px;
    height: 44px;
}

#card-qr-code img, #card-qr-code canvas {
    width: 100% !important;
    height: 100% !important;
}

.card-qr-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 700;
    text-align: center;
}

/* 언어 선택 영역 */
.verse-card-language-section {
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.language-section-title {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.language-items-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.language-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.language-item:hover {
    background: var(--primary-light);
}

.language-item.dragging {
    opacity: 0.5;
    background: var(--primary-light);
    border: 1px dashed var(--primary-color);
    cursor: grabbing;
}

.language-item.drag-over {
    background: var(--primary-light);
    border: 1px solid var(--primary-color);
}

.language-item .drag-handle {
    display: inline-flex;
    font-size: 0.9rem;
    color: #999;
    cursor: grab;
}

.language-item:active .drag-handle {
    cursor: grabbing;
}

.language-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.language-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.language-name {
    font-size: 0.9rem;
    color: var(--text-color);
}

.language-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #888;
}

.language-hint .material-icons {
    font-size: 0.9rem;
}

/* ===== 옵션 컨트롤 영역 ===== */
.verse-card-controls {
    padding: 15px 20px;
    background: var(--card-bg);
    flex: 1;
    overflow-y: auto;
}

.verse-card-options {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.card-option-row {
    margin-bottom: 12px;
}

.card-option-row:last-child {
    margin-bottom: 0;
}

.option-title {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

/* 배경 선택 */
.bg-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bg-option {
    cursor: pointer;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.bg-option:hover {
    transform: scale(1.1);
}

.bg-option.active {
    border-color: var(--primary-color);
}

.bg-swatch {
    width: 28px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

.bg-cream {
    background: #fdf8f3;
}

.bg-white {
    background: #ffffff;
}

.bg-light-gray {
    background: #f5f5f5;
}

.bg-light-blue {
    background: #e8f4fc;
}

.bg-parchment {
    background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
}

.bg-hanji {
    background: linear-gradient(135deg, #f5f0e1 0%, #e8dcc8 100%);
}

.bg-dark {
    background: #1a1a1a;
}

/* 프리셋 선택 영역 */
.verse-card-presets {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.preset-title {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 12px;
}

.preset-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.preset-thumbnails-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.preset-thumbnails-scroll::-webkit-scrollbar {
    display: none;
}

.preset-thumb {
    flex-shrink: 0;
    width: 40px;
    cursor: pointer;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.preset-thumb.active {
    opacity: 1;
}

.preset-thumb:hover {
    opacity: 1;
}

.preset-preview {
    width: 40px;
    height: 80px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preset-thumb.active .preset-preview {
    border-color: var(--primary-color);
}

.preset-thumb span {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-top: 4px;
    display: block;
}

/* 프리셋 썸네일 스타일 */
.preset-classic-thumb {
    background: #fdf8f3;
}

.preset-elegance-thumb {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.preset-serif-thumb {
    background: #2c3e50;
    justify-content: center;
    align-items: center;
}

.preset-minimal-thumb {
    background: #fff;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
}

.preset-gradient-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    justify-content: center;
    align-items: center;
}

.preset-dark-thumb {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    justify-content: center;
    align-items: center;
}

.preset-nature-thumb {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}

.preset-sunset-thumb {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
}

.preset-parchment-thumb {
    background: linear-gradient(135deg, #d4a574 0%, #f5deb3 100%);
    justify-content: center;
    align-items: center;
}

.preset-parchment-thumb .thumb-big-text {
    color: #5d4037;
    font-family: 'Noto Serif KR', serif;
}

.preset-ocean-thumb {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
}

.thumb-img {
    height: 40%;
    background: #ddd;
}

.thumb-text {
    height: 60%;
    padding: 5px;
}

.thumb-text::before {
    content: '';
    display: block;
    height: 4px;
    background: #ccc;
    margin-bottom: 3px;
    border-radius: 2px;
}

.thumb-text::after {
    content: '';
    display: block;
    height: 3px;
    width: 70%;
    background: #ddd;
    border-radius: 2px;
}

.thumb-big-text {
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.thumb-big-text.serif {
    font-family: 'Noto Serif KR', serif;
}

.thumb-big-text.minimal {
    color: #333;
    font-weight: 300;
}

/* 액션 버튼 */
.verse-card-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.card-action-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    transition: background 0.2s;
}

.card-action-btn .material-icons {
    font-size: 1.5rem;
}

.save-btn {
    background: #f0f0f0;
    color: var(--primary-color);
}

.save-btn:hover {
    background: #e5e5e5;
}

.share-btn {
    background: var(--primary-color);
    color: white;
}

.share-btn:hover {
    background: #0a3d8f;
}

/* ===== 모듈형 카드 스타일 ===== */

/* 프레임 모양 - 항상 9:16 세로 비율 */
.verse-card-preview.frame-portrait {
    width: 85%;
    max-width: 320px;
    aspect-ratio: 9/16;
}

/* 배경 색상/질감 */
.verse-card-preview.bg-cream {
    background: #fdf8f3;
}

.verse-card-preview.bg-white {
    background: #ffffff;
}

.verse-card-preview.bg-light-gray {
    background: #f5f5f5;
}

.verse-card-preview.bg-light-blue {
    background: #e8f4fc;
}

.verse-card-preview.bg-parchment {
    background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
    position: relative;
}

.verse-card-preview.bg-parchment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: 12px;
}

.verse-card-preview.bg-parchment .card-verse-ref,
.verse-card-preview.bg-parchment .card-verse-text {
    font-family: 'Noto Serif KR', serif;
}

.verse-card-preview.bg-parchment .card-verse-ref {
    color: #5d4037;
}

.verse-card-preview.bg-parchment .card-verse-text {
    color: #3e2723;
}

.verse-card-preview.bg-parchment .card-qr-label {
    color: #5d4037;
}

.verse-card-preview.bg-hanji {
    background: linear-gradient(135deg, #f5f0e1 0%, #e8dcc8 100%);
    position: relative;
}

.verse-card-preview.bg-hanji::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' /%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: 12px;
}

.verse-card-preview.bg-hanji .card-verse-ref,
.verse-card-preview.bg-hanji .card-verse-text {
    font-family: 'Noto Serif KR', serif;
}

.verse-card-preview.bg-hanji .card-verse-ref {
    color: #4a4a4a;
}

.verse-card-preview.bg-hanji .card-verse-text {
    color: #2a2a2a;
}

.verse-card-preview.bg-hanji .card-qr-label {
    color: #5a5a5a;
}

.verse-card-preview.bg-dark {
    background: #1a1a1a;
}

.verse-card-preview.bg-dark .card-day-number,
.verse-card-preview.bg-dark .card-verse-ref,
.verse-card-preview.bg-dark .card-verse-text,
.verse-card-preview.bg-dark .card-qr-label {
    color: #f0f0f0;
}

.verse-card-preview.bg-dark .card-image-section {
    background: rgba(255,255,255,0.1);
}

.verse-card-preview.bg-dark .card-image-placeholder {
    color: rgba(255,255,255,0.5);
}

.verse-card-preview.bg-dark .card-qr-section {
    border-top-color: rgba(255,255,255,0.1);
}

/* 날짜 숨김 */
.verse-card-preview.hide-date .card-date-section {
    display: none;
}

/* ===== 스타일별 카드 스타일 ===== */

/* 클래식 (기본, 이미지 있음) */
.verse-card-preview.style-classic .card-image-section {
    background: #e8dfd3;
}

/* 엘레강스 (다크 테마, 이미지 있음) */
.verse-card-preview.style-elegance {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

.verse-card-preview.style-elegance .card-day-number,
.verse-card-preview.style-elegance .card-verse-ref,
.verse-card-preview.style-elegance .card-verse-text,
.verse-card-preview.style-elegance .card-qr-label {
    color: #f0f0f0;
}

.verse-card-preview.style-elegance .card-image-section {
    background: rgba(255,255,255,0.1);
}

.verse-card-preview.style-elegance .card-image-placeholder {
    color: rgba(255,255,255,0.5);
}

.verse-card-preview.style-elegance .card-qr-section {
    border-top-color: rgba(255,255,255,0.1);
}

/* 세리프 (텍스트 전용) */
.verse-card-preview.style-serif {
    justify-content: center;
    padding: 30px;
}

.verse-card-preview.style-serif .card-date-section,
.verse-card-preview.style-serif .card-image-section {
    display: none;
}

.verse-card-preview.style-serif .card-verse-section {
    flex: none;
    text-align: center;
}

.verse-card-preview.style-serif .card-verse-ref,
.verse-card-preview.style-serif .card-verse-text {
    font-family: 'Noto Serif KR', serif;
}

.verse-card-preview.style-serif .card-verse-text {
    font-size: 1.3rem;
    line-height: 1.8;
}

.verse-card-preview.style-serif .card-qr-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* 미니멀 (텍스트 전용) */
.verse-card-preview.style-minimal {
    justify-content: center;
    padding: 30px;
    border: 1px solid #e0e0e0;
}

.verse-card-preview.style-minimal .card-date-section,
.verse-card-preview.style-minimal .card-image-section {
    display: none;
}

.verse-card-preview.style-minimal .card-verse-section {
    flex: none;
    text-align: center;
}

.verse-card-preview.style-minimal .card-verse-ref {
    color: var(--primary-color);
}

.verse-card-preview.style-minimal .card-verse-text {
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 1.8;
}

.verse-card-preview.style-minimal .card-qr-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* 그라데이션 (텍스트 전용) */
.verse-card-preview.style-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    justify-content: center;
    padding: 30px;
}

.verse-card-preview.style-gradient .card-date-section,
.verse-card-preview.style-gradient .card-image-section {
    display: none;
}

.verse-card-preview.style-gradient .card-verse-section {
    flex: none;
    text-align: center;
}

.verse-card-preview.style-gradient .card-verse-ref,
.verse-card-preview.style-gradient .card-verse-text,
.verse-card-preview.style-gradient .card-qr-label {
    color: white;
}

.verse-card-preview.style-gradient .card-verse-text {
    font-size: 1.3rem;
    line-height: 1.8;
    font-weight: 700;
}

.verse-card-preview.style-gradient .card-qr-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-color: rgba(255,255,255,0.2);
}

/* 자연 (이미지 있음) */
.verse-card-preview.style-nature {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%) !important;
}

.verse-card-preview.style-nature .card-day-number,
.verse-card-preview.style-nature .card-verse-ref,
.verse-card-preview.style-nature .card-verse-text,
.verse-card-preview.style-nature .card-qr-label {
    color: #ffffff;
}

.verse-card-preview.style-nature .card-image-section {
    background: rgba(255,255,255,0.1);
}

.verse-card-preview.style-nature .card-image-placeholder {
    color: rgba(255,255,255,0.5);
}

.verse-card-preview.style-nature .card-qr-section {
    border-top-color: rgba(255,255,255,0.2);
}

/* 선셋 (이미지 있음) */
.verse-card-preview.style-sunset {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) !important;
}

.verse-card-preview.style-sunset .card-day-number,
.verse-card-preview.style-sunset .card-verse-ref,
.verse-card-preview.style-sunset .card-verse-text,
.verse-card-preview.style-sunset .card-qr-label {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.verse-card-preview.style-sunset .card-image-section {
    background: rgba(255,255,255,0.15);
}

.verse-card-preview.style-sunset .card-image-placeholder {
    color: rgba(255,255,255,0.6);
}

.verse-card-preview.style-sunset .card-qr-section {
    border-top-color: rgba(255,255,255,0.3);
}

/* 바다 (이미지 있음) */
.verse-card-preview.style-ocean {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) !important;
}

.verse-card-preview.style-ocean .card-day-number,
.verse-card-preview.style-ocean .card-verse-ref,
.verse-card-preview.style-ocean .card-verse-text,
.verse-card-preview.style-ocean .card-qr-label {
    color: #ffffff;
}

.verse-card-preview.style-ocean .card-image-section {
    background: rgba(255,255,255,0.15);
}

.verse-card-preview.style-ocean .card-image-placeholder {
    color: rgba(255,255,255,0.6);
}

.verse-card-preview.style-ocean .card-qr-section {
    border-top-color: rgba(255,255,255,0.3);
}

/* 다크모드 */
.dark-mode .verse-card-modal-content {
    background: var(--card-bg);
}

.dark-mode #verse-card-preview-container {
    background: #2a2a2a;
}

.dark-mode .preset-preview {
    background: #3a3a3a;
}

.dark-mode .preset-thumb span {
    color: var(--text-sub);
}

/* 모바일 반응형 - 1단 세로 레이아웃 */
@media (max-width: 767px) {
    #verse-card-modal {
        padding: 0 !important;
    }
    
    .verse-card-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .verse-card-body {
        flex-direction: column;
        overflow-y: auto;
    }
    
    .verse-card-preview-section {
        flex: 0 0 auto;
        min-height: 45vh;
        max-height: 50vh;
        padding: 15px;
    }
    
    .verse-card-controls-section {
        flex: 0 0 auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
        overflow-y: visible;
    }
    
    .verse-card-controls {
        max-height: none;
        overflow-y: visible;
    }
    
    .verse-card-preview {
        width: 70%;
        max-width: 280px;
    }
}

/* 갤럭시 폴드 이상 - 2단 가로 레이아웃 */
@media (min-width: 768px) {
    .verse-card-body {
        flex-direction: row;
    }
    
    .verse-card-preview-section {
        flex: 1;
        min-width: 0;
    }
    
    .verse-card-controls-section {
        flex: 1;
        max-width: 450px;
        min-width: 350px;
    }
    
    .verse-card-preview {
        width: 80%;
        max-width: 320px;
    }
}

/* ===== 이미지 편집 모달 ===== */
.image-editor-modal-content {
    background: #1a1a1a;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
}

.image-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2a2a2a;
    border-bottom: 1px solid #333;
}

.editor-header-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 6px;
}

.editor-header-btn:hover {
    background: rgba(255,255,255,0.1);
}

.editor-header-btn.primary {
    background: var(--primary-color);
    font-weight: 600;
}

.editor-header-btn.primary:hover {
    background: #0a3d8f;
}

.editor-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.editor-header-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.editor-history-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.editor-history-btn:hover:not(.disabled) {
    background: rgba(255,255,255,0.2);
}

.editor-history-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.editor-history-btn .material-icons {
    font-size: 20px;
}

.image-editor-canvas-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

#image-editor-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 편집 도구 영역 */
.image-editor-tools {
    background: #2a2a2a;
    padding: 0;
}

.editor-mode-tabs {
    display: flex;
    border-bottom: 1px solid #444;
}

.editor-mode-tab {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.editor-mode-tab .material-icons {
    font-size: 1.3rem;
}

.editor-mode-tab:hover {
    background: rgba(255,255,255,0.05);
    color: #aaa;
}

.editor-mode-tab.active {
    color: var(--primary-color);
    background: rgba(15, 82, 186, 0.1);
}

.editor-tool-panel {
    padding: 16px;
}

/* 크롭 도구 패널 숨김 (4:3 비율 고정) */
#crop-tools {
    display: none !important;
}

/* 크롭 비율 버튼 */
.crop-ratio-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.crop-ratio-btn {
    padding: 8px 16px;
    border: 1px solid #555;
    background: transparent;
    color: #ccc;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.crop-ratio-btn:hover {
    border-color: #888;
    color: #fff;
}

.crop-ratio-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* 도구 힌트 */
.tool-hint {
    color: #888;
    font-size: 0.85rem;
    text-align: center;
    margin: 0 0 16px;
}

.tool-action-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tool-action-btn:hover {
    background: #0a3d8f;
}

/* 회전 버튼 */
.rotate-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rotate-btn {
    padding: 14px 12px;
    border: 1px solid #555;
    background: transparent;
    color: #ccc;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.rotate-btn .material-icons {
    font-size: 1.5rem;
}

.rotate-btn:hover {
    border-color: var(--primary-color);
    color: #fff;
    background: rgba(15, 82, 186, 0.1);
}

/* 필터 버튼 */
.filter-buttons {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.filter-btn {
    flex-shrink: 0;
    padding: 8px;
    border: 2px solid transparent;
    background: transparent;
    color: #ccc;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: #555;
}

.filter-btn.active {
    border-color: var(--primary-color);
    color: #fff;
}

.filter-preview {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.filter-preview.bright {
    filter: brightness(1.3);
}

.filter-preview.dark {
    filter: brightness(0.7);
}

.filter-preview.grayscale {
    filter: grayscale(1);
}

.filter-preview.sepia {
    filter: sepia(1);
}

.filter-preview.warm {
    filter: sepia(0.3) saturate(1.3);
}

/* 크롭 오버레이 */
.crop-overlay {
    position: absolute;
    border: 2px dashed #fff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    cursor: col-resize;
}

.crop-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

.crop-handle.tl { top: -10px; left: -10px; cursor: nw-resize; }
.crop-handle.tr { top: -10px; right: -10px; cursor: ne-resize; }
.crop-handle.br { bottom: -10px; right: -10px; cursor: se-resize; }
.crop-handle.bl { bottom: -10px; left: -10px; cursor: sw-resize; }

/* 이미지 클릭 가능 표시 */
#card-user-image {
    cursor: pointer;
    transition: filter 0.2s;
}

#card-user-image:hover {
    filter: brightness(0.85);
}

.card-image-section {
    position: relative;
}

.edit-hint {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    display: none;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.card-image-section.has-image .edit-hint {
    display: flex;
}

.edit-hint:hover {
    background: rgba(0,0,0,0.8);
}

.edit-hint .material-icons {
    font-size: 0.85rem;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .image-editor-modal-content {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .editor-mode-tab {
        font-size: 0.7rem;
        padding: 10px 4px;
    }
    
    .editor-mode-tab .material-icons {
        font-size: 1.5rem;
    }
    
    .rotate-buttons {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .rotate-btn {
        padding: 10px 8px;
        font-size: 0.7rem;
    }
    
    .rotate-btn .material-icons {
        font-size: 1.5rem;
    }
}

/* ============================================
   TTS (성경 듣기) 플레이어 스타일
   ============================================ */

/* TTS 플레이어 바 - 화면 하단에 고정 (하단 네비바 위) */
.tts-player-bar {
    position: fixed;
    bottom: 55px;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1200;
    animation: tts-slide-up 0.3s ease-out;
}

@keyframes tts-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tts-player-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    gap: 12px;
}

.tts-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tts-location {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tts-verse {
    font-size: 0.8rem;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tts-player-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tts-control-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background 0.2s, color 0.2s;
}

.tts-control-btn:hover {
    background: var(--hover-bg);
}

.tts-control-btn:active {
    background: var(--selected-bg);
}

.tts-control-btn .material-icons {
    font-size: 0.9rem;
}

.tts-control-btn.tts-play-main {
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    color: white;
}

.tts-control-btn.tts-play-main:hover {
    background: var(--sapphire-blue);
    filter: brightness(1.1);
}

.tts-control-btn.tts-play-main .material-icons {
    font-size: 1.6rem;
}

.tts-control-btn.tts-close {
    color: var(--text-sub);
}

.tts-control-btn.tts-close:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* 진행률 바 */
.tts-progress-container {
    height: 3px;
    background: var(--border-color);
    position: relative;
}

.tts-progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.1s linear;
}

/* TTS 재생 중인 절 하이라이트 */
.verse-tts-playing {
    background: linear-gradient(90deg, rgba(15, 82, 186, 0.15) 0%, rgba(15, 82, 186, 0.05) 100%) !important;
    border-left: 3px solid var(--primary-color) !important;
    position: relative;
}

.verse-tts-playing::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    animation: tts-pulse 1.5s ease-in-out infinite;
}

@keyframes tts-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

body.dark-mode .verse-tts-playing {
    background: linear-gradient(90deg, rgba(77, 163, 255, 0.15) 0%, rgba(77, 163, 255, 0.05) 100%) !important;
}

/* TTS 설정 그룹 */
.tts-setting-group {
    margin-bottom: 0;
}

.tts-setting-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.tts-setting-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.tts-setting-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.tts-setting-group input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .tts-player-bar {
        bottom: 55px;
    }
    
    .tts-player-content {
        padding: 6px 12px;
        gap: 8px;
    }
    
    .tts-location {
        font-size: 0.85rem;
    }
    
    .tts-verse {
        font-size: 0.75rem;
    }
    
    .tts-control-btn {
        width: 32px;
        height: 32px;
    }
    
    .tts-control-btn .material-icons {
        font-size: 1.5rem;
    }
    
    .tts-control-btn.tts-play-main {
        width: 38px;
        height: 38px;
    }
    
    .tts-control-btn.tts-play-main .material-icons {
        font-size: 0.9rem;
    }
}

/* 태블릿/폴드 */
@media (min-width: 768px) and (max-width: 1024px) {
    .tts-player-bar {
        bottom: 55px;
    }
}

/* ============================================
   토라포션 TTS 재생 바 스타일
   ============================================ */
.torah-portion-overlay {
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 55px;
    touch-action: none;
}

.torah-portion-modal-content {
    margin: 0 auto !important;
    max-height: none !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 0 !important;
    touch-action: pan-y;
}

.torah-portion-modal-content #torah-portion-content {
    flex: 1;
    overflow-y: auto;
}

.torah-tts-bar {
    position: sticky;
    bottom: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), #1565C0);
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
    margin-top: auto;
}

.torah-tts-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    color: white;
}

.torah-tts-title {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.torah-tts-status {
    font-size: 0.8rem;
    opacity: 0.85;
}

.torah-tts-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.torah-control-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.torah-control-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.torah-control-btn:active {
    transform: scale(0.95);
}

.torah-control-btn .material-icons {
    font-size: 1.3rem;
}

/* 토라포션 재생 버튼 크기 구분 */
.torah-control-btn.torah-play-main {
    width: 44px;
    height: 44px;
    background: white;
    color: var(--primary-color);
}

.torah-control-btn.torah-play-main .material-icons {
    font-size: 1.6rem;
}

.torah-control-btn.torah-control-small {
    width: 34px;
    height: 34px;
}

.torah-control-btn.torah-control-small .material-icons {
    font-size: 0.9rem;
}

.torah-control-btn#torah-tts-play-btn {
    width: 44px;
    height: 44px;
    background: white;
    color: var(--primary-color);
}

.torah-control-btn#torah-tts-play-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

.torah-control-btn#torah-tts-play-btn .material-icons {
    font-size: 1.5rem;
}

.torah-control-btn.torah-tts-close {
    background: rgba(255, 255, 255, 0.15);
}

.torah-control-btn.torah-tts-close:hover {
    background: rgba(255, 100, 100, 0.4);
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .torah-tts-bar {
        padding: 8px 12px;
        border-radius: 0 0 10px 10px;
    }
    
    .torah-tts-title {
        font-size: 0.85rem;
    }
    
    .torah-tts-status {
        font-size: 0.75rem;
    }
    
    .torah-control-btn {
        width: 34px;
        height: 34px;
    }
    
    .torah-control-btn .material-icons {
        font-size: 1.5rem;
    }
    
    .torah-control-btn#torah-tts-play-btn {
        width: 40px;
        height: 44px;
    }
    
    .torah-control-btn#torah-tts-play-btn .material-icons {
        font-size: 0.9rem;
    }
}

/* 모바일 토라포션 헤더 - 2줄 레이아웃 */
@media (max-width: 767px) {
    .torah-header {
        flex-direction: column;
    }
    .torah-header .torah-nav-desktop {
        display: none !important;
    }
    .torah-header .torah-header-row-2 {
        display: flex !important;
    }
}

/* 단일 창 제목 줄 스타일 */
.single-panel-header {
    justify-content: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0px 4px;
    margin-top: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 44px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: nowrap;
    overflow: visible;
}

/* 패널 타입 드롭다운 항상 왼쪽 고정 */
.single-panel-header .panel-type-dropdown {
    order: -10;
    flex-shrink: 0;
}

/* 단일창 헤더의 책 제목 - flex 확장 비활성화로 왼쪽 정렬 유지 */
.single-panel-header .panel-title {
    flex: none;
    min-width: auto;
}


/* 단일창 헤더의 네비게이션 그룹 (글꼴, 이전/다음장, 책/장제목, 히스토리) - 우측 끝까지 확장 */
.single-panel-nav-group {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    flex: 1;
    flex-wrap: nowrap;
}

.single-panel-nav-group .panel-view-settings-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.single-panel-nav-group .panel-view-settings-btn .material-icons {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.single-panel-nav-group .panel-chapter-nav-btn {
    flex-shrink: 0;
    min-width: 28px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.single-panel-nav-group .panel-title {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    min-width: 80px;
    text-align: center;
}

.single-panel-nav-group .panel-history-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: auto;
}

.single-panel-nav-group .panel-history-btn .material-icons {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 도구 버튼들 오른쪽으로 이동 */
.single-panel-header .panel-header-btns {
    order: 10;
    margin-left: auto;
}

.dark-mode .single-panel-header {
    justify-content: flex-start;
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
}

.single-panel-type-dropdown {
    order: -10 !important;
    flex-shrink: 0;
    position: relative;
}

.single-panel-type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 60px;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.single-panel-type-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.single-panel-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.single-panel-name {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.single-panel-type-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-top: 4px;
    overflow: hidden;
}

.single-panel-type-menu.show {
    display: block;
}

.single-panel-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color);
}

.single-panel-option:hover {
    background: var(--hover-bg);
}

.single-panel-option.selected {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color);
    font-weight: 700;
}

.single-panel-option span:first-child {
    font-size: 0.9rem;
    min-width: 24px;
    text-align: center;
}

.single-panel-view-settings .single-view-settings-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.single-panel-view-settings .single-view-settings-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}


/* 책갈피 모달 - 현재 절 추가 섹션 */
.bookmark-add-current-section {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(15, 82, 186, 0.03);
}

.bookmark-add-current-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.bookmark-add-current-btn:hover {
    background: #0d47a1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.3);
}

.bookmark-add-current-btn:active {
    transform: translateY(0);
}

.bookmark-add-current-btn .material-icons {
    font-size: 1.5rem;
}

body.night-mode .bookmark-add-current-section {
    background: rgba(255, 255, 255, 0.03);
}

body.night-mode .bookmark-add-current-btn {
    background: #1565C0;
}

body.night-mode .bookmark-add-current-btn:hover {
    background: #1976D2;
}

/* 내비바 글쓰기창 헤더 스타일 - 멀티패널과 동일 */
.note-editor-header-styled {
    background: linear-gradient(135deg, var(--primary-color), #1565C0) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 15px !important;
}

.note-reference-btn-styled {
    margin-left: auto;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.note-reference-btn-styled:hover {
    background: rgba(255,255,255,0.3);
}

/* 내비바 글쓰기창 자동저장 상태 스타일 */
.note-save-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.note-save-status .status-icon {
    font-size: 0.9rem;
}

.note-save-status.saving {
    color: var(--primary-color);
}

.note-save-status.saving .status-icon::before {
    content: '🔄';
}

.note-save-status.saved {
    color: #4CAF50;
}

.note-save-status.error {
    color: #f44336;
}

/* 멀티패널 글쓰기창 3점 메뉴 스타일 */
.panel-writer-dropdown .panel-dropdown-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.panel-writer-more-btn:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05)) !important;
}

/* 설정 모달 중앙 팝업 스타일 */
.settings-modal-centered {
    position: relative !important;
    margin: auto !important;
    max-width: 450px !important;
    max-height: 85vh !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}

/* 노트 에디터 모달 - 멀티패널 스타일 (토라포션과 동일 크기) */
.note-editor-modal-styled {
    width: 95%;
    max-width: 500px;
    height: auto;
    max-height: calc(85vh - 55px);
    margin: auto;
    border-radius: 12px;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.note-editor-modal-styled .note-editor-body {
    flex: 1;
    min-height: 400px;
    padding: 0;
}

.note-dropdown-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

#note-editor-close-btn:hover {
    background: rgba(255,255,255,0.35);
}

@media (max-width: 600px) {
    .note-editor-modal-styled {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}


/* 설정 모달 강제 중앙 표시 - 모든 화면 크기 */
#settings-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
    /* 애니메이션/트랜지션 방지 */
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

#settings-modal.show,
#settings-modal[style*="display: flex"] {
    display: flex !important;
}

#settings-modal > .modal-content,
#settings-modal > .settings-modal-centered {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: auto !important;
    max-width: 450px !important;
    max-height: 85vh !important;
    width: 95% !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    /* 애니메이션/트랜지션 방지 */
    transition: none !important;
    animation: none !important;
    transform: none !important;
    /* 헤더 위에 표시되도록 z-index 추가 */
    z-index: 99999 !important;
}

@media (max-width: 500px) {
    #settings-modal > .modal-content,
    #settings-modal > .settings-modal-centered {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* ==================== 폰 네비바 좌우 스크롤 (설정/레이아웃 고정) ==================== */
@media (max-width: 768px) {
    /* 상단 내비게이션 컨테이너 - 고정 아이콘 양쪽 배치 */
    .nav-container.top-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        height: var(--top-nav-height);
        box-sizing: border-box;
        padding: 2px 8px;
        overflow: hidden;
    }
    
    /* 아이콘 그룹 - 좌우 스크롤 가능 (레이아웃 포함) */
    .nav-container.top-nav .nav-icons-group {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .nav-container.top-nav .nav-icons-group::-webkit-scrollbar {
        display: none;
    }
    
    /* 아이콘 그룹 내 버튼들 - flex-shrink 방지 */
    .nav-container.top-nav .nav-icons-group .icon-btn-nav {
        flex-shrink: 0;
    }
    
    /* 레이아웃 선택기 - 스크롤 그룹 내 */
    .nav-container.top-nav .nav-icons-group .layout-selector-wrapper {
        flex-shrink: 0;
    }
    
    /* 설정 아이콘 - 우측 고정 */
    .nav-container.top-nav .settings-wrapper.nav-right-fixed {
        flex-shrink: 0;
        z-index: 10;
        padding-left: 4px;
    }
}

/* 더 작은 화면에서 추가 조정 */
@media (max-width: 430px) {
    .nav-container.top-nav {
        padding: 0px 4px;
        gap: 3px;
    }
    
    .nav-container.top-nav .nav-icons-group {
        gap: 4px;
        height: var(--top-nav-height);
        box-sizing: border-box;
    }
    
    .nav-container.top-nav .settings-wrapper.nav-right-fixed {
        padding-left: 2px;
    }
    
    /* 아이콘 버튼 크기 약간 축소 */
    .nav-container.top-nav .icon-btn-nav {
        padding: 6px 8px;
    }
}



/* ============================================
   이중언어 사전 스타일 (Bilingual Lexicon)
   ============================================ */
.bilingual-lexicon-wrapper {
    position: relative;
    padding: 8px;
    line-height: 1.6;
}

.lexicon-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.lexicon-header-word {
    flex: 1;
}

.lexicon-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lexicon-lang-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.lang-toggle-btn {
    padding: 8px 14px;
    border: none;
    background: #f5f5f5;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-toggle-btn:first-child {
    border-right: 1px solid #ddd;
}

.lang-toggle-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.lang-toggle-btn:hover:not(.active) {
    background: #e0e0e0;
}

.lexicon-transliteration {
    font-size: 14px;
    color: #008080;
    margin-top: 2px;
    text-align: left;
}

.lexicon-pronunciation {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.lexicon-pos {
    font-size: 13px;
    color: #666;
    margin: 6px 0;
}

.lexicon-pos .pos-label {
    color: #888;
}

.lexicon-definition {
    margin-top: 10px;
}

.lexicon-def-basic {
    font-size: 15px;
    font-weight: 600;
    color: #7D0541;
    line-height: 1.5;
    margin-bottom: 8px;
}

.lexicon-source-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}

.lexicon-source-badge:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.lexicon-def-detailed {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin-top: 8px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 3px solid var(--primary-color, #0F52BA);
}

.lexicon-code-info {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lexicon-code-info .twot-ref-badge {
    font-size: 10px;
    background: #e8f0fe;
    color: var(--primary-color, #0F52BA);
    padding: 0px 4px;
    border-radius: 3px;
    font-weight: 700;
}

/* 다크모드 지원 */
body.dark-mode .bilingual-lexicon-wrapper {
    background: #1e1e1e;
}

body.dark-mode .lang-toggle-btn {
    background: #333;
    color: #aaa;
    border-color: #444;
}

body.dark-mode .lang-toggle-btn:first-child {
    border-color: #444;
}

body.dark-mode .lang-toggle-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}

body.dark-mode .lexicon-source-badge {
    background: #333;
    color: #999;
}

body.dark-mode .lexicon-source-badge:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

body.dark-mode .lexicon-def-detailed {
    background: #252525;
    color: #ccc;
}

body.dark-mode .lexicon-code-info {
    color: #666;
}

body.dark-mode .lexicon-code-info .twot-ref-badge {
    background: #2a3040;
    color: #6b9dff;
}

/* ============================================ */
/* 원어 사전 상세 섹션 (Extended Lexicon Section) */
/* ============================================ */
.lexicon-extended-section {
    margin-top: 10px;
}

.lexicon-extended-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color, #0F52BA);
    text-decoration: none;
    font-size: 13px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 6px;
    border: 1px solid rgba(15, 82, 186, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lexicon-extended-link:hover {
    background: linear-gradient(135deg, #e8eeff 0%, #dde5ff 100%);
    border-color: var(--primary-color, #0F52BA);
}

.lexicon-extended-link .material-icons {
    font-size: 18px;
}

.lexicon-extended-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 13px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.lexicon-extended-content {
    margin-top: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fc 100%);
    border-radius: 10px;
    border: 1px solid #e0e4ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
    line-height: 1.85;
}

.extended-content-wrapper {
    color: #2c3e50;
}

.extended-content-wrapper .lexicon-huge-word {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    color: #1a3a7a;
    font-family: 'Ezra SIL SR', 'Gentium Plus', serif;
    margin: 4px 6px 4px 0;
    padding: 8px 14px;
    background: linear-gradient(135deg, #e8f0ff 0%, #dde8ff 100%);
    border-radius: 6px;
    border: 1px solid rgba(26, 58, 122, 0.15);
}

.extended-meaning {
    color: #7D0541;
    font-weight: 600;
    background: linear-gradient(135deg, #fff0f5 0%, #ffe6ee 100%);
    padding: 2px 8px;
    border-radius: 4px;
    margin: 0 2px;
}

.extended-content-wrapper b,
.extended-content-wrapper strong {
    color: #1a3a7a;
    font-weight: 600;
}

.extended-content-wrapper i,
.extended-content-wrapper em {
    color: #5a6a8a;
    font-style: italic;
}

.extended-content-wrapper .lexicon-link {
    color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
}

.extended-content-wrapper .lexicon-link:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.extended-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
}

.extended-error,
.extended-no-data,
.extended-permission-error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e74c3c;
    font-size: 13px;
}

.extended-permission-error {
    color: #f39c12;
}

body.dark-mode .lexicon-extended-link {
    background: linear-gradient(135deg, #1a2a4a 0%, #152040 100%);
    border-color: rgba(15, 82, 186, 0.4);
}

body.dark-mode .lexicon-extended-link:hover {
    background: linear-gradient(135deg, #243654 0%, #1d2d50 100%);
}

body.dark-mode .lexicon-extended-locked {
    background: #2a2a2a;
    border-color: #444;
    color: #666;
}

body.dark-mode .lexicon-extended-content {
    background: linear-gradient(135deg, #1e2530 0%, #252a35 100%);
    border-color: #3a4050;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .extended-content-wrapper {
    color: #d0d5dd;
}

body.dark-mode .extended-content-wrapper .lexicon-huge-word {
    color: #7db4ff;
    background: linear-gradient(135deg, #1a2a45 0%, #253050 100%);
    border-color: rgba(125, 180, 255, 0.2);
}

body.dark-mode .extended-meaning {
    color: #ff80ab;
    background: linear-gradient(135deg, #35202a 0%, #402530 100%);
}

body.dark-mode .extended-content-wrapper b,
body.dark-mode .extended-content-wrapper strong {
    color: #7db4ff;
}

body.dark-mode .extended-content-wrapper .lexicon-link {
    background: rgba(15, 82, 186, 0.2);
}

body.dark-mode .extended-content-wrapper .lexicon-link:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

/* ============================================ */
/* 신학 사전 섹션 (Theological Section) */
/* ============================================ */
.lexicon-theological-section {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color, #0F52BA);
}

.theological-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 82, 186, 0.2);
}

.theological-header .material-icons {
    font-size: 18px;
    color: var(--primary-color, #0F52BA);
}

.theological-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-color, #0F52BA);
}

.twot-ref-badge {
    font-size: 10px;
    font-weight: 700;
    color: #666;
    background: white;
    padding: 0px 4px;
    border-radius: 10px;
    margin-left: auto;
    border: 1px solid #ddd;
}

.theological-content.unlocked {
    font-size: 13px;
    line-height: 1.7;
    color: #333;
}

.theological-row {
    margin: 6px 0;
}

.theo-label {
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}

.theological-summary {
    margin: 10px 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    line-height: 1.8;
}

.key-verses {
    color: var(--primary-color, #0F52BA);
}

.related-terms a {
    color: var(--primary-color, #0F52BA);
    text-decoration: none;
}

.related-terms a:hover {
    text-decoration: underline;
}

/* 잠긴 상태 (4등급 미만) */
.theological-content.locked {
    position: relative;
}

.theological-preview {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    filter: blur(1px);
    opacity: 0.7;
}

.theological-lock-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(15, 82, 186, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #666;
}

.theological-lock-notice .material-icons {
    font-size: 16px;
    color: var(--primary-color, #0F52BA);
}

/* 다크 모드 */
body.dark-mode .lexicon-theological-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-left-color: var(--primary-color, #5c8dd6);
}

body.dark-mode .theological-header {
    border-bottom-color: rgba(92, 141, 214, 0.3);
}

body.dark-mode .theological-header .material-icons,
body.dark-mode .theological-title {
    color: var(--primary-color, #5c8dd6);
}

body.dark-mode .twot-ref-badge {
    background: #2a2a4a;
    color: #aaa;
    border-color: #3a3a5a;
}

body.dark-mode .theological-content.unlocked {
    color: #ccc;
}

body.dark-mode .theo-label {
    color: #aaa;
}

body.dark-mode .theological-summary {
    background: rgba(0, 0, 0, 0.3);
    color: #bbb;
}

body.dark-mode .theological-preview {
    color: #888;
}

body.dark-mode .theological-lock-notice {
    background: rgba(92, 141, 214, 0.15);
    color: #aaa;
}

body.dark-mode .theological-lock-notice .material-icons {
    color: var(--primary-color, #5c8dd6);
}

/* ========================================
   보기설정 팝업 모달 (View Settings Popup)
   ======================================== */

/* 팝업 오버레이 */
.view-settings-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    cursor: pointer;
}

/* .view-settings-popup-overlay.active - 불필요 (항상 표시됨) */

/* 팝업 컨테이너 */
/* 팝업 컨테이너 */
.view-settings-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.view-settings-popup.show {
    display: flex;
    opacity: 1;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 팝업 헤더 */
.view-settings-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--primary-color, #0F52BA);
    color: #fff;
    position: relative;
    z-index: 10000;
}

.view-settings-popup-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-settings-popup-title .material-icons {
    font-size: 20px;
}

.view-settings-popup-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.view-settings-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.view-settings-popup-close .material-icons {
    font-size: 22px;
}

/* 팝업 콘텐츠 */
.view-settings-popup-content {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
    position: relative;
    z-index: 10000;
    background: inherit;
}

/* 섹션 스타일 */
.view-settings-section {
    margin-bottom: 18px;
}

.view-settings-section:last-child {
    margin-bottom: 0;
}

.view-settings-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 언어 선택 그리드 (2x2) */
.view-settings-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.view-settings-lang-btn {
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.view-settings-lang-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.view-settings-lang-btn.active {
    border-color: var(--primary-color, #0F52BA);
    background: var(--primary-color, #0F52BA);
    color: #fff;
}

.view-settings-lang-btn .material-icons {
    font-size: 18px;
}

/* 병렬 설정 섹션 */
.view-settings-parallel-config {
    display: none;
    margin-top: 14px;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 10px;
}

.view-settings-parallel-config.active {
    display: block;
}

.parallel-config-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.parallel-lang-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.parallel-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    transition: all 0.2s;
}

.parallel-lang-item:active {
    cursor: grabbing;
}

.parallel-lang-item.dragging {
    opacity: 0.5;
    background: #e3f2fd;
}

.parallel-lang-item.drag-over {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.1);
}

.parallel-lang-item .drag-handle {
    color: #999;
    font-size: 18px;
}

.parallel-lang-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    font-size: 14px;
}

.parallel-lang-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #0F52BA);
}

/* 폰트 설정 */
.view-settings-font-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.view-settings-font-row:last-child {
    margin-bottom: 0;
}

.view-settings-font-row label {
    font-size: 14px;
    color: #555;
    font-weight: 700;
    min-width: 50px;
}

body.dark-mode .view-settings-font-row label {
    color: #bbb;
}

.view-settings-font-label {
    font-size: 14px;
    color: #333;
}

/* 글자체 토글 */
.view-settings-font-toggle {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.font-toggle-btn {
    padding: 8px 14px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

.font-toggle-btn:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

.font-toggle-btn.active {
    background: var(--primary-color, #0F52BA);
    color: #fff;
}

/* 글자 크기 조절 */
.view-settings-font-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.font-size-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.font-size-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.font-size-btn .material-icons {
    font-size: 18px;
    color: #666;
}

.font-size-value {
    min-width: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

/* 색상 선택 */
.view-settings-color-picker {
    display: flex;
    gap: 8px;
}

.color-option {
    width: 28px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border-color: var(--primary-color, #0F52BA);
    box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.3);
}

.color-option.active::after {
    content: 'check';
    font-family: 'Material Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.color-option.color-black { background: #333; }
.color-option.color-dark { background: #555; }
.color-option.color-brown { background: #5D4037; }
.color-option.color-blue { background: #1565C0; }
.color-option.color-green { background: #2E7D32; }

/* 표시 옵션 (체크박스) */
.view-settings-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.view-settings-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.view-settings-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #0F52BA);
}

.view-settings-option-label {
    font-size: 14px;
    color: #333;
}

/* 패널 보기설정 버튼 (트리거) */
.panel-view-settings-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: all 0.2s;
}

.panel-view-settings-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.panel-view-settings-btn .material-icons {
    font-size: 20px;
}


/* 히스토리 버튼 스타일 */
.panel-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.panel-history-btn:hover {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
}

.panel-history-btn .material-icons {
    font-size: 14px;
}

body.dark-mode .panel-history-btn {
    color: #aaa;
}

body.dark-mode .panel-history-btn:hover {
    background: rgba(100, 150, 255, 0.15);
    color: #7aa2f7;
}

/* ========================================
   보기설정 팝업 다크 모드
   ======================================== */
body.dark-mode .view-settings-popup {
    background: #1e1e2e;
}

body.dark-mode .view-settings-popup-header {
    background: #2a2a4a;
}

body.dark-mode .view-settings-popup-content {
    background: #1e1e2e;
}

body.dark-mode .view-settings-section-title {
    color: #999;
}

body.dark-mode .view-settings-lang-btn {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #ccc;
}

body.dark-mode .view-settings-lang-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
}

body.dark-mode .view-settings-lang-btn.active {
    background: var(--primary-color, #5c8dd6);
    border-color: var(--primary-color, #5c8dd6);
    color: #fff;
}

body.dark-mode .view-settings-parallel-config {
    background: #252538;
}

body.dark-mode .parallel-lang-item {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #ccc;
}

body.dark-mode .parallel-lang-item.drag-over {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
}

body.dark-mode .view-settings-font-label {
    color: #ccc;
}

body.dark-mode .view-settings-font-toggle {
    border-color: #3a3a5a;
}

body.dark-mode .font-toggle-btn {
    background: #2a2a4a;
    color: #999;
    border-color: #3a3a5a;
}

body.dark-mode .font-toggle-btn.active {
    background: var(--primary-color, #5c8dd6);
    color: #fff;
}

body.dark-mode .font-size-btn {
    background: #2a2a4a;
    border-color: #3a3a5a;
}

body.dark-mode .font-size-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
}

body.dark-mode .font-size-btn .material-icons {
    color: #999;
}

body.dark-mode .font-size-value {
    color: #ccc;
}

body.dark-mode .color-option.active {
    border-color: var(--primary-color, #5c8dd6);
    box-shadow: 0 0 0 2px rgba(92, 141, 214, 0.3);
}

body.dark-mode .view-settings-option-label {
    color: #ccc;
}

body.dark-mode .panel-view-settings-btn {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #999;
}

body.dark-mode .panel-view-settings-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
}

/* ========================================
   패널 장 이동 버튼 (Panel Chapter Navigation)
   ======================================== */
.panel-chapter-nav-btn {
    font-size: 36px;
    font-weight: bold;
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
}

.panel-chapter-nav-btn:hover {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color);
}

.panel-chapter-nav-btn:active {
    transform: scale(0.95);
}

.panel-chapter-nav-btn .material-icons {
    font-size: 18px;
}

.panel-chapter-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

body.dark-mode .panel-chapter-nav-btn:hover {
    background: rgba(77, 163, 255, 0.15);
    color: var(--primary-color);
}

/* ========================================
   패널별 폰트 크기 조절 (Panel Font Size Control)
   ======================================== */

/* 폰트 크기 버튼 */
.panel-font-size-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: serif;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    min-width: 32px;
    height: 26px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 검색 모달 헤더 내 폰트 버튼 (흰색 헤더에서 보이도록) */
#search-modal .modal-header .panel-font-size-btn {
    background: white;
    border: 2px solid var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
    margin-right: 72px;
}

.panel-font-size-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.08);
}

.panel-font-size-btn:active {
    transform: scale(0.95);
}

/* 폰트 크기 단계 표시 */
.panel-font-size-btn[data-size="small"]::after { content: "₁"; font-size: 8px; margin-left: 1px; }
.panel-font-size-btn[data-size="normal"]::after { content: "₂"; font-size: 8px; margin-left: 1px; }
.panel-font-size-btn[data-size="large"]::after { content: "₃"; font-size: 8px; margin-left: 1px; }
.panel-font-size-btn[data-size="xlarge"]::after { content: "₄"; font-size: 8px; margin-left: 1px; }

/* 4단계 폰트 크기 변수 */
[data-font-size="small"] { --panel-font-scale: 0.85; }
[data-font-size="normal"] { --panel-font-scale: 1.0; }
[data-font-size="large"] { --panel-font-scale: 1.15; }
[data-font-size="xlarge"] { --panel-font-scale: 1.3; }

/* ========== 사전창 폰트 적용 ========== */
[data-font-size] .lexicon-header-word,
[data-font-size] .lexicon-pronunciation,
[data-font-size] .lexicon-pos,
[data-font-size] .lexicon-definition,
[data-font-size] .lexicon-def-basic,
[data-font-size] .lexicon-def-detailed,
[data-font-size] .theological-content,
[data-font-size] .theological-summary,
[data-font-size] .theological-row,
[data-font-size] .extended-section-content {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

/* 사전창 히브리어/헬라어 원어 */
[data-font-size] .lexicon-header-word .hebrew-word,
[data-font-size] .lexicon-header-word .greek-word {
    font-size: calc(2rem * var(--panel-font-scale, 1));
}

/* ========== 검색창 폰트 적용 ========== */
[data-font-size] .search-result-item,
[data-font-size] .search-result-text,
[data-font-size] .concordance-verse-text,
[data-font-size] .search-history-item {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

/* ========== 원전분해창 폰트 적용 ========== */
[data-font-size] .word-block,
[data-font-size] .word-original,
[data-font-size] .word-transliteration,
[data-font-size] .word-translation,
[data-font-size] .analysis-horizontal-content,
[data-font-size] .lexicon-word-display,
[data-font-size] .lexicon-content-wrapper {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

[data-font-size] .word-original {
    font-size: calc(1.4rem * var(--panel-font-scale, 1));
}

/* ========== 노트/주해창 폰트 적용 ========== */
[data-font-size] .note-content,
[data-font-size] .note-preview,
[data-font-size] .note-item-content,
[data-font-size] .ql-editor {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

/* ========== 토라포션창 폰트 적용 ========== */
[data-font-size] .torah-portion-name,
[data-font-size] .torah-reading-range,
[data-font-size] .torah-reading-description,
[data-font-size] .torah-section-content,
[data-font-size] .aliyah-text,
[data-font-size] #torah-portion-content {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

/* ========== 글쓰기창 폰트 적용 ========== */
[data-font-size] .fullscreen-note-editor .ql-editor,
[data-font-size] #fullscreen-quill-editor,
[data-font-size] #navbar-quill-editor {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

/* 노트 에디터 모달 글쓰기창 폰트 적용 */
#note-editor-modal[data-font-size="small"] .ql-editor,
#note-editor-modal[data-font-size="small"] #navbar-quill-editor {
    font-size: calc(1em * 0.85) !important;
}
#note-editor-modal[data-font-size="normal"] .ql-editor,
#note-editor-modal[data-font-size="normal"] #navbar-quill-editor {
    font-size: calc(1em * 1.0) !important;
}
#note-editor-modal[data-font-size="large"] .ql-editor,
#note-editor-modal[data-font-size="large"] #navbar-quill-editor {
    font-size: calc(1em * 1.15) !important;
}
#note-editor-modal[data-font-size="xlarge"] .ql-editor,
#note-editor-modal[data-font-size="xlarge"] #navbar-quill-editor {
    font-size: calc(1em * 1.3) !important;
}

/* 전체화면 노트 에디터 모달 폰트 적용 */
#fullscreen-note-editor-modal[data-font-size="small"] .ql-editor {
    font-size: calc(1em * 0.85) !important;
}
#fullscreen-note-editor-modal[data-font-size="normal"] .ql-editor {
    font-size: calc(1em * 1.0) !important;
}
#fullscreen-note-editor-modal[data-font-size="large"] .ql-editor {
    font-size: calc(1em * 1.15) !important;
}
#fullscreen-note-editor-modal[data-font-size="xlarge"] .ql-editor {
    font-size: calc(1em * 1.3) !important;
}

/* 다크모드 */
body.dark-mode .panel-font-size-btn {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #999;
}

body.dark-mode .panel-font-size-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
    color: var(--primary-color, #5c8dd6);
}

/* 플로팅 사전창 폰트 적용 */
.floating-lexicon-panel[data-font-size] .floating-lexicon-content,
.floating-lexicon-panel[data-font-size] .lexicon-content-wrapper,
.floating-lexicon-panel[data-font-size] .lexicon-definition,
.floating-lexicon-panel[data-font-size] .lexicon-def-basic,
.floating-lexicon-panel[data-font-size] .lexicon-def-detailed,
.floating-lexicon-panel[data-font-size] .theological-content {
    font-size: calc(1em * var(--panel-font-scale, 1));
}

.floating-lexicon-panel[data-font-size] .lexicon-header-word .hebrew-word,
.floating-lexicon-panel[data-font-size] .lexicon-header-word .greek-word {
    font-size: calc(2rem * var(--panel-font-scale, 1));
}

/* 플로팅 사전창 헤더 내 폰트 버튼 스타일 */
.floating-lexicon-header .panel-font-size-btn {
    margin-left: auto;
    margin-right: 20px;
}

/* ========================================
   보기설정 팝업 - 탭 기반 UI
   ======================================== */

/* 탭 바 */
.view-settings-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 16px;
    gap: 0;
}

.view-settings-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.view-settings-tab:hover {
    color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.view-settings-tab.active {
    color: var(--primary-color, #0F52BA);
    border-bottom-color: var(--primary-color, #0F52BA);
}

.view-settings-tab .tab-icon {
    font-size: 18px;
    font-weight: 600;
}

.view-settings-tab .tab-name {
    font-size: 13px;
}

/* 탭 콘텐츠 */
.view-settings-tab-content {
    padding: 0;
}

/* 폰트 설정 그룹 */
.view-settings-font-settings {
    padding: 8px 0;
}

/* 병렬 설정 */
.view-settings-parallel-settings {
    padding: 8px 0;
}

.view-settings-parallel-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.view-settings-parallel-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.view-settings-parallel-checkbox:hover {
    background: #e9ecef;
}

.view-settings-parallel-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #0F52BA);
}

.view-settings-parallel-checkbox .lang-icon {
    font-size: 16px;
    font-weight: 600;
    width: 24px;
    text-align: center;
}

/* 병렬 순서 목록 */
.view-settings-parallel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    transition: all 0.2s;
    margin-bottom: 6px;
}

.view-settings-parallel-item:active {
    cursor: grabbing;
}

.view-settings-parallel-item.dragging {
    opacity: 0.5;
    background: #e3f2fd;
}

.view-settings-parallel-item .drag-handle {
    color: #999;
    font-size: 18px;
}

.view-settings-parallel-item .lang-icon {
    font-size: 16px;
    font-weight: 600;
    width: 24px;
    text-align: center;
}

.view-settings-parallel-item .lang-name {
    font-size: 14px;
}

/* 통합 병렬 리스트 스타일 */
.view-settings-parallel-unified-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.view-settings-parallel-item.selected {
    background: #e8f4fd;
    border-color: var(--primary-color, #5B8DEF);
}

.view-settings-parallel-item:not(.selected) {
    opacity: 0.6;
}

.view-settings-parallel-item .parallel-item-checkbox {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.view-settings-parallel-item .parallel-item-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #5B8DEF);
    cursor: pointer;
    margin: 0;
}

body.dark-mode .view-settings-parallel-item.selected {
    background: #1a3a5c;
    border-color: var(--primary-color, #5B8DEF);
}

body.dark-mode .view-settings-parallel-item:not(.selected) {
    opacity: 0.5;
}

/* 표시 옵션 섹션 */
.view-settings-display-options {
    border-top: 1px solid #e0e0e0;
    margin-top: 16px;
    padding-top: 16px;
}

/* 다크 모드 */
body.dark-mode .view-settings-tabs {
    border-bottom-color: #444;
}

body.dark-mode .view-settings-tab {
    color: #aaa;
}

body.dark-mode .view-settings-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .view-settings-tab.active {
    color: var(--primary-color, #5B8DEF);
}

body.dark-mode .view-settings-parallel-checkbox {
    background: #2a2a2a;
}

body.dark-mode .view-settings-parallel-checkbox:hover {
    background: #333;
}

body.dark-mode .view-settings-parallel-item {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode .view-settings-display-options {
    border-top-color: #444;
}


/* 개인 노트 에디터 글자 크기 버튼 - 더 선명하게 */
.note-editor-font-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    min-width: 36px !important;
    height: 30px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s !important;
}

.note-editor-font-btn:hover {
    background: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 제목 입력창 + 삼점 메뉴 래퍼 */
#note-title-input {
    flex: 4 !important;
}

.note-more-menu-wrapper {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* 보기설정 폰트 크기 슬라이더 */
.view-settings-font-size-control.slider {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.view-settings-font-size-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.view-settings-font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--sapphire-blue, #0F52BA);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.15s;
}

.view-settings-font-size-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.view-settings-font-size-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--sapphire-blue, #0F52BA);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.view-settings-font-size-value {
    min-width: 45px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 700;
}

body.dark-mode .view-settings-font-size-slider {
    background: #444;
}

body.dark-mode .view-settings-font-size-value {
    color: #e0e0e0;
}

/* 보기설정 팝업 내부 래퍼 - 오버레이 위에 표시 */
.view-settings-popup-inner {
    position: relative;
    z-index: 10002;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 360px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    animation: popupSlideIn 0.25s ease-out;
}

body.dark-mode .view-settings-popup-inner {
    background: #2a2a2a;
}

/* 보기설정 폰트 타입 버튼 (고딕/명조) */
.view-settings-font-type-btns {
    display: flex;
    gap: 6px;
}

.view-settings-font-type-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: all 0.2s;
}

.view-settings-font-type-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.view-settings-font-type-btn.active {
    background: var(--primary-color, #0F52BA);
    color: #fff;
    border-color: var(--primary-color, #0F52BA);
}

body.dark-mode .view-settings-font-type-btn {
    background: #333;
    border-color: #555;
    color: #ccc;
}

body.dark-mode .view-settings-font-type-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
}

body.dark-mode .view-settings-font-type-btn.active {
    background: var(--primary-color, #5c8dd6);
    color: #fff;
}

/* 보기설정 폰트 색상 버튼 */
/* 보기설정 원어 역본 선택 버튼 */
.view-settings-version-btns {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.view-settings-version-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.view-settings-version-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.08);
}

.view-settings-version-btn.active {
    background: var(--primary-color, #0F52BA);
    color: #fff;
    border-color: var(--primary-color, #0F52BA);
}

.version-divider {
    color: #ccc;
    margin: 0 4px;
}

body.dark-mode .view-settings-version-btn {
    background: #333;
    border-color: #555;
    color: #ccc;
}

body.dark-mode .view-settings-version-btn:hover {
    border-color: var(--primary-color, #5c8dd6);
    background: rgba(92, 141, 214, 0.15);
}

body.dark-mode .view-settings-version-btn.active {
    background: var(--primary-color, #5c8dd6);
    color: #fff;
}

body.dark-mode .version-divider {
    color: #666;
}

.view-settings-font-color-btns {
    display: flex;
    gap: 8px;
}

.view-settings-font-color-btn {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-settings-font-color-btn:hover {
    transform: scale(1.1);
}

.view-settings-font-color-btn.active {
    border-color: var(--primary-color, #0F52BA);
    box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.3);
}

.view-settings-font-color-btn .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
}

/* 폰트 샘플 미리보기 */
.view-settings-font-sample {
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
    margin-top: 12px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

body.dark-mode .view-settings-font-sample {
    background: #333;
    color: #e0e0e0;
}


/* 노트 검색 입력창 넓이 조절 */
.notes-viewer-modal .notes-search-bar {
    max-width: calc(100% - 35px);
}

.notes-viewer-modal .notes-search-bar input {
    width: calc(100% - 35px);
}

/* 노트 뷰어 모달 폰트 크기 축소 */
.notes-viewer-modal .modal-header h2 {
    font-size: 1rem;
}

.notes-viewer-modal .notes-book-dropdown,
.notes-viewer-modal .notes-chapter-dropdown {
    padding: 7px 10px;
    font-size: 0.85rem;
    min-width: 85px;
}

.notes-viewer-modal .notes-search-bar input {
    padding: 7px 12px;
    font-size: 0.9rem;
}

.notes-viewer-modal .notes-search-btn {
    padding: 7px 12px;
    font-size: 0.85rem;
}

.notes-viewer-modal .notes-sort-select {
    padding: 7px 10px;
    font-size: 0.9rem;
    min-width: 85px;
}

.notes-viewer-modal .notes-filter-tab {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.notes-viewer-modal .note-card {
    padding: 12px;
}

.notes-viewer-modal .note-card-title {
    font-size: 0.95rem;
}

.notes-viewer-modal .note-card-meta {
    font-size: 0.8rem;
}

.notes-viewer-modal .note-card-preview {
    font-size: 0.85rem;
}


/* 플로팅 패널 모드에서 글자크기 버튼 숨김 (네비바에서 열릴 때) */
#search-modal.floating-panel .panel-font-size-btn,
#notes-viewer-modal.floating-panel .panel-font-size-btn {
    display: none !important;
}

/* 노트 뷰어 플로팅 패널 닫기 버튼 클릭 가능하게 */
#notes-viewer-modal.floating-panel .modal-header .close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    cursor: pointer;
    font-size: 28px;
    color: var(--text-color);
    padding: 10px 15px;
    pointer-events: auto !important;
    background: transparent;
    border: none;
}

#notes-viewer-modal.floating-panel .modal-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* ======================================
   네비게이션 아이콘 배치 설정
   ====================================== */
.nav-icons-arrangement-section {
    padding: 0 10px;
}

.nav-arrange-zone {
    background: var(--bg-section);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 60px;
    transition: all 0.2s ease;
}

.nav-arrange-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.1);
}

.nav-arrange-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.nav-arrange-dropzone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 4px;
}

.nav-arrange-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: grab;
    font-size: 0.85rem;
    color: var(--text-color);
    user-select: none;
    transition: all 0.15s ease;
    touch-action: none;
}

.nav-arrange-item:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.nav-arrange-item:active {
    cursor: grabbing;
}

.nav-arrange-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.nav-arrange-item .material-icons {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.nav-arrange-item .nav-item-icon {
    font-size: 1rem;
}

/* 드래그 플레이스홀더 */
.nav-arrange-placeholder {
    width: 60px;
    height: 36px;
    background: rgba(15, 82, 186, 0.2);
    border: 2px dashed var(--primary-color);
    border-radius: 6px;
}

/* 드롭존이 비어있을 때 */
.nav-arrange-dropzone:empty::before {
    content: '여기에 아이콘을 드래그하세요';
    color: var(--text-sub);
    font-size: 0.8rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
}

/* 나이트 모드 */
body.night-mode .nav-arrange-zone {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

body.night-mode .nav-arrange-zone.drag-over {
    background: rgba(15, 82, 186, 0.2);
}

body.night-mode .nav-arrange-item {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body.night-mode .nav-arrange-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============ 책갈피 하이라이트 토글 (통합 형광펜) ============ */
.bookmark-highlight-field {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.bookmark-highlight-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff9c4 0%, #fff176 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.25);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.bookmark-highlight-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
}

.highlight-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #5d4037;
    font-size: 1rem;
}

.highlight-toggle-label .material-icons {
    color: #e65100;
    font-size: 1.4rem;
}

.highlight-toggle-input {
    display: none;
}

.highlight-toggle-switch {
    position: relative;
    width: 56px;
    height: 30px;
    background: #bdbdbd;
    border-radius: 30px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.highlight-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.highlight-toggle-input:checked + .highlight-toggle-switch {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.highlight-toggle-input:checked + .highlight-toggle-switch::after {
    left: 29px;
}

.bookmark-highlight-desc {
    margin: 10px 0 0 0;
    font-size: 0.85rem;
    color: #666;
    padding-left: 6px;
    font-weight: 400;
}

/* 나이트 모드 */
body.night-mode .bookmark-highlight-toggle {
    background: linear-gradient(135deg, #4a4522 0%, #3d3a1e 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.night-mode .highlight-toggle-label {
    color: #fff9c4;
}

body.night-mode .highlight-toggle-label .material-icons {
    color: #ffc107;
}

body.night-mode .bookmark-highlight-desc {
    color: #999;
}

/* ============ 본문 하이라이트 스타일 ============ */
.verse-line.bookmark-highlight {
    position: relative;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.verse-line.bookmark-highlight::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--bookmark-highlight-color, #0F52BA);
}

/* 책갈피 아이템 - 하이라이트 표시 아이콘 */
.bookmark-item-highlight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #fff9c4 0%, #ffe082 100%);
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 1px 3px rgba(255, 193, 7, 0.4);
}

.bookmark-item-highlight-badge .material-icons {
    font-size: 14px;
    color: #f57c00;
}

/* 책갈피 목록 아이템 개선 */
.bookmark-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    border-left: 4px solid var(--bookmark-color, #0F52BA);
}

.bookmark-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.bookmark-item-content {
    flex: 1;
    min-width: 0;
}

.bookmark-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.bookmark-item-location {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1rem;
}

.bookmark-item-preview {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
}

.bookmark-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #999;
}

.bookmark-item-group-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bookmark-color-light, rgba(15, 82, 186, 0.1));
    color: var(--bookmark-color, #0F52BA);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bookmark-item-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 12px;
}

.bookmark-item-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.bookmark-item-action-btn:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.bookmark-item-action-btn.delete:hover {
    background: #ffebee;
    color: #e53935;
}

/* ==================== 세 개 모달 반응형 스타일 (원전분해, 노트 리스트, 노트 에디터) ==================== */
/* 갤럭시 폴드 펼침 (600px ~ 1023px): 화면 너비의 1/2 */
@media (min-width: 600px) and (max-width: 1023px) {
    #analysis-horizontal-modal.responsive-panel {
        position: fixed !important;
        top: var(--top-nav-height, 48px) !important;
        left: auto !important;
        right: 0 !important;
        width: 500px !important;
        max-width: 500px !important;
        height: calc(100vh - var(--top-nav-height, 48px)) !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 1500 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }
    
    #notes-viewer-modal.responsive-panel,
    #note-editor-modal.responsive-panel {
        position: fixed !important;
        top: var(--top-nav-height, 48px) !important;
        left: auto !important;
        right: 0 !important;
        width: 50vw !important;
        height: calc(100vh - var(--top-nav-height, 48px)) !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 1500 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }
    
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-container,
    #notes-viewer-modal.responsive-panel .modal-content,
    #note-editor-modal.responsive-panel .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        pointer-events: auto !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* 헤더 드래그 가능 스타일 */
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-header,
    #notes-viewer-modal.responsive-panel .modal-header,
    #note-editor-modal.responsive-panel .modal-header {
        cursor: grab !important;
        user-select: none !important;
    }
    
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-header:active,
    #notes-viewer-modal.responsive-panel .modal-header:active,
    #note-editor-modal.responsive-panel .modal-header:active {
        cursor: grabbing !important;
    }
}

/* 태블릿/데스크탑 (1024px 이상): 화면 너비의 1/3 */
@media (min-width: 1024px) {
    #analysis-horizontal-modal.responsive-panel {
        position: fixed !important;
        top: var(--top-nav-height, 48px) !important;
        left: auto !important;
        right: 0 !important;
        width: 500px !important;
        max-width: 500px !important;
        height: calc(100vh - var(--top-nav-height, 48px)) !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 1500 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }
    
    #notes-viewer-modal.responsive-panel,
    #note-editor-modal.responsive-panel {
        position: fixed !important;
        top: var(--top-nav-height, 48px) !important;
        left: auto !important;
        right: 0 !important;
        width: 33.33vw !important;
        height: calc(100vh - var(--top-nav-height, 48px)) !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 1500 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }
    
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-container,
    #notes-viewer-modal.responsive-panel .modal-content,
    #note-editor-modal.responsive-panel .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        pointer-events: auto !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* 헤더 드래그 가능 스타일 */
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-header,
    #notes-viewer-modal.responsive-panel .modal-header,
    #note-editor-modal.responsive-panel .modal-header {
        cursor: grab !important;
        user-select: none !important;
    }
    
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-header:active,
    #notes-viewer-modal.responsive-panel .modal-header:active,
    #note-editor-modal.responsive-panel .modal-header:active {
        cursor: grabbing !important;
    }
}

/* 모바일 (600px 미만): 전체화면 유지 - responsive-panel 클래스 무시 */
@media (max-width: 599px) {
    #analysis-horizontal-modal.responsive-panel,
    #notes-viewer-modal.responsive-panel,
    #note-editor-modal.responsive-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        pointer-events: auto !important;
    }
    
    #analysis-horizontal-modal.responsive-panel .analysis-horizontal-container,
    #notes-viewer-modal.responsive-panel .modal-content,
    #note-editor-modal.responsive-panel .modal-content {
        width: 100% !important;
        height: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* 반응형 패널 드래그 이동 상태 */
.responsive-panel.dragging {
    transition: none !important;
}

.responsive-panel.dragging .analysis-horizontal-container,
.responsive-panel.dragging .modal-content {
    transition: none !important;
}

/* 반응형 패널에서 닫기 버튼 클릭 가능하도록 보장 */
#analysis-horizontal-modal.responsive-panel .analysis-header-close,
#analysis-horizontal-modal.responsive-panel .close-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999 !important;
}

/* 멀티패널 검색 히스토리 섹션 */
.multi-panel-content .panel-history-section {
    padding: 15px 0;
    flex: 1;
    overflow-y: auto;
}

.multi-panel-content .panel-history-section .search-history-title {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.multi-panel-content .panel-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-panel-content .panel-history-list .search-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.multi-panel-content .panel-history-list .search-history-item:hover {
    background: var(--border-color);
}

.multi-panel-content .panel-history-list .search-history-query {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 700;
}

.multi-panel-content .panel-history-list .search-history-date {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.multi-panel-content .panel-search-section {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.multi-panel-content .search-top-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.multi-panel-content .panel-search-select {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
}

.multi-panel-content .panel-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--bg-color);
    color: var(--text-color);
}

.multi-panel-content .panel-search-btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
}

.multi-panel-content .panel-search-bottom {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.multi-panel-content .search-operator-btn {
    padding: 6px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-color);
}

.multi-panel-content .panel-range-btn,
.multi-panel-content .search-range-clear-btn {
    padding: 6px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-color);
}

.multi-panel-content .panel-range-display {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-sub);
}

.multi-panel-content .panel-results-section {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.multi-panel-content .search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.multi-panel-content .back-to-history-btn {
    padding: 6px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.multi-panel-content .panel-results-list {
    flex: 1;
    overflow-y: auto;
}

/* Multi-Panel Search Tabs */
.multi-panel-content .search-tabs-container {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.multi-panel-content .search-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-color);
    border-radius: 8px;
    padding: 3px;
}

.multi-panel-content .search-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.multi-panel-content .search-tab:hover {
    background: var(--border-color);
}

.multi-panel-content .search-tab.active {
    background: var(--primary-color);
    color: white;
}

.multi-panel-content .search-saved-section {
    padding-top: 8px;
}

.multi-panel-content .search-saved-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-panel-content .search-saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.multi-panel-content .search-saved-item:hover {
    background: var(--border-color);
}

.multi-panel-content .search-history-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.multi-panel-content .search-save-btn {
    padding: 4px 6px;
    margin-left: 8px;
}

/* 복합어 시각적 연결 - 앞 단어와 간격 제거 (히브리어만 적용) */
.hebrew-word.compound-join {
    margin-left: -0.3em;
}
/* 한글 strong-word는 음수 마진 적용 안함 - 겹침 방지 */
.strong-word.kor.compound-join {
    margin-left: 0;
}

/* 복합어 시각적 간격 - 반스페이스 추가 (검색은 그대로 유지) */
.compound-space {
    margin-left: 0.15em;
}

/* 사전 헤더 닫기 버튼 */

/* 원전분해 세로모드 패널 숨김 - 사용 안함 */
#analysis-panel {
    display: none !important;
}


/* ==================== 메인창 검색 패널 스타일 ==================== */
#bible-list .single-panel-search {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

#bible-list .single-panel-search .panel-search-section {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

#bible-list .single-panel-search .search-top-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

#bible-list .single-panel-search .panel-search-select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.95rem;
}

#bible-list .single-panel-search .panel-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.95rem;
    background: var(--bg-color);
    color: var(--text-color);
}

#bible-list .single-panel-search .panel-search-btn {
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
}

#bible-list .single-panel-search .panel-search-bottom {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#bible-list .single-panel-search .search-operator-btn {
    padding: 8px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
}

#bible-list .single-panel-search .search-operator-btn:hover {
    background: var(--bg-secondary);
}

#bible-list .single-panel-search .panel-range-btn,
#bible-list .single-panel-search .search-range-clear-btn {
    padding: 8px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-color);
}

#bible-list .single-panel-search .panel-range-btn:hover,
#bible-list .single-panel-search .search-range-clear-btn:hover {
    background: var(--bg-secondary);
}

#bible-list .single-panel-search .panel-range-display {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-sub);
}

#bible-list .single-panel-search .panel-history-section {
    flex: 1;
    overflow-y: auto;
    padding-top: 15px;
}

#bible-list .single-panel-search .search-history-title {
    font-size: 0.95rem;
    color: var(--text-sub);
    margin-bottom: 10px;
    font-weight: 700;
}

#bible-list .single-panel-search .panel-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bible-list .single-panel-search .search-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

#bible-list .single-panel-search .search-history-item:hover {
    background: var(--primary-light);
}

#bible-list .single-panel-search .search-history-query {
    font-size: 0.95rem;
    color: var(--text-color);
}

#bible-list .single-panel-search .search-history-date {
    font-size: 0.8rem;
    color: var(--text-sub);
}

#bible-list .single-panel-search .panel-results-section {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#bible-list .single-panel-search .search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

#bible-list .single-panel-search .back-to-history-btn {
    padding: 8px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--primary-color);
}

#bible-list .single-panel-search .back-to-history-btn:hover {
    background: var(--bg-secondary);
}

#bible-list .single-panel-search .panel-results-list {
    flex: 1;
    overflow-y: auto;
}

#bible-list .single-panel-search .search-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

#bible-list .single-panel-search .search-item:hover {
    background: var(--bg-secondary);
}

#bible-list .single-panel-search .search-ref {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 4px;
}

#bible-list .single-panel-search .search-text {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
}

#bible-list .single-panel-search .search-text .highlight {
    background: rgba(255, 215, 0, 0.4);
    padding: 0 2px;
    border-radius: 2px;
}

/* 고정 패널 타입 표시 (드롭다운 비활성화) */
.panel-type-fixed {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(15, 82, 186, 0.15);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--primary-color);
    cursor: default;
}

.panel-type-fixed .panel-type-icon {
    font-size: 1rem;
}

.panel-type-fixed .panel-type-name {
    font-weight: 700;
}

/* 원전분해 레이아웃 - 하단 패널들 배치 (원전분해 5줄 아래) */
.multi-panel-container.layout-analysis-2 > .multi-panel:nth-child(n+2),
.multi-panel-container.layout-analysis-3 > .multi-panel:nth-child(n+2) {
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child {
    z-index: 1;
}

/* 토라포션 모달 드래그 시 좌우 이동 허용 */
.torah-portion-modal-content[style*="position: absolute"] {
    margin: 0 !important;
}

.torah-portion-overlay .modal-header,
.torah-portion-overlay .torah-modal-header {
    cursor: grab;
    touch-action: pan-x;
    -webkit-user-drag: none;
}

.torah-portion-overlay .modal-header:active,
.torah-portion-overlay .torah-modal-header:active {
    cursor: grabbing;
}

/* 노트 목록 모달 드래그 시 좌우 이동 허용 (토라포션과 동일) */
#notes-viewer-modal .modal-content[style*="position: absolute"] {
    margin: 0 !important;
}

#notes-viewer-modal .modal-header {
    cursor: grab;
    touch-action: pan-x;
    -webkit-user-drag: none;
}

#notes-viewer-modal .modal-header:active {
    cursor: grabbing;
}

/* 원전분해 레이아웃 - 0번 패널과 하단 패널 사이 빈 공간 제거 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-panel-container,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-panel-container {
    padding-bottom: 0 !important;
}

/* 원전분해 레이아웃 - 0번 패널 (빈 공간 제거, 스크롤바 항상 표시) */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper {
    min-height: unset !important;
    height: fit-content;
    overflow-x: scroll;
    scrollbar-width: auto;
    padding-bottom: 0;
}

/* 원전분해 레이아웃 - 스크롤바 항상 표시 (WebKit 브라우저) */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar {
    height: 10px;
    display: block;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-track,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-thumb,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-thumb:hover,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 야간 모드 색상 대비 개선 */
body.night-mode {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #E0E0E0;
    --text-sub: #9E9E9E;
    --border-color: #333;
    --primary-color: #6ab0ff;
    --sapphire-blue: #6ab0ff;
    --header-bg: #0a1929;
    --header-text: #e0e0e0;
    --hover-bg: #2a2a2a;
    --selected-bg: rgba(106, 176, 255, 0.25);
    --modal-bg: rgba(0,0,0,0.7);
    --bg-section: #1a1a1a;
    --link-color: #82b1ff;
    --accent-color: #90caf9;
}

/* 야간 모드 텍스트 색상 개선 */
body.night-mode,
body.night-mode .verse-item,
body.night-mode .modal-content,
body.night-mode .settings-modal {
    color: var(--text-color);
}

/* 야간 모드 파란색 텍스트 밝기 개선 */
body.night-mode .hebrew-word,
body.night-mode .greek-word,
body.night-mode .strong-word {
    color: #90caf9 !important;
}

body.night-mode .verse-num {
    color: #82b1ff;
}

body.night-mode .location-text {
    color: #6ab0ff;
}

body.night-mode .book-btn.active,
body.night-mode .nav-btn.active {
    background: #1e3a5f;
    color: #90caf9;
}

body.night-mode a,
body.night-mode .link-style {
    color: #82b1ff;
}

/* 야간 모드 버튼 개선 */
body.night-mode .primary-btn,
body.night-mode button[style*="primary"] {
    background: #1e88e5;
    color: #fff;
}

body.night-mode .icon-btn:hover,
body.night-mode .icon-btn-small:hover {
    color: #90caf9;
}

/* 야간 모드 모달 배경 */
body.night-mode .modal-content,
body.night-mode .settings-modal,
body.night-mode .popup-content {
    background: #1e1e1e;
    border-color: #333;
}

body.night-mode .modal-header,
body.night-mode .settings-header {
    background: #252525;
    border-color: #333;
}

/* 야간 모드 성경 본문 가독성 */
body.night-mode .verse-item {
    background: #1e1e1e;
    border-color: #333;
}

body.night-mode .verse-item.selected {
    background: rgba(106, 176, 255, 0.15);
    border-left-color: #6ab0ff;
}

/* 야간 모드 하이라이트 색상 */
body.night-mode .verse-highlight {
    background-color: rgba(106, 176, 255, 0.2) !important;
    border-left-color: #6ab0ff !important;
}

/* 야간 모드 토스트 메시지 */
body.night-mode .toast {
    background: #333;
    color: #e0e0e0;
}

/* 야간 모드 입력 필드 */
body.night-mode input,
body.night-mode textarea,
body.night-mode select {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}

body.night-mode input::placeholder,
body.night-mode textarea::placeholder {
    color: #888;
}

/* 야간 모드 탭 및 네비게이션 */
body.night-mode .tab-btn.active {
    color: #90caf9;
    border-bottom-color: #6ab0ff;
}


body.night-mode .nav-icons-group .material-icons {
    color: #9e9e9e;
}

body.night-mode .nav-icons-group .material-icons:hover {
    color: #90caf9;
}

/* 히스토리 책갈피 버튼 스타일 */
.history-bookmark-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-sub);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-bookmark-btn:hover {
    opacity: 1;
    color: var(--primary-color);
}

.history-bookmark-btn.bookmarked {
    opacity: 1;
    color: var(--primary-color);
}

.history-bookmark-btn .material-icons {
    font-size: 0.9rem;
}

/* 히스토리 아이템에서 버튼 영역 확보 */
.history-item .history-content-col {
    padding-right: 56px;
}

/* 단일창 모드 - #bible-list 하단 여백 완전 제거 */
#bible-list,
#bible-list.scrollable-content,
#bible-area #bible-list {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 단일창 모드에서 마지막 절 아래 여백 제거 */
#bible-list .verse-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
    border-bottom: none !important;
}

/* ==================== 통합 원어사전 스타일 ==================== */
.lexicon-unified-wrapper {
    padding: 16px;
    line-height: 1.6;
}

.lexicon-unified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.lexicon-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lexicon-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lexicon-strong-search {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-section, #f8f7f4);
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #d8d5cf);
}

.lexicon-strong-search .strong-lang-select {
    width: 42px;
    padding: 4px 2px;
    border: 1px solid var(--border-color, #d8d5cf);
    border-radius: 4px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.lexicon-strong-search .strong-code-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--border-color, #d8d5cf);
    border-radius: 4px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    font-size: 0.85rem;
    text-align: center;
}

.lexicon-strong-search .strong-code-input::-webkit-outer-spin-button,
.lexicon-strong-search .strong-code-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lexicon-strong-search .strong-search-btn {
    padding: 4px 8px;
    background: var(--primary-color, #0F52BA);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lexicon-strong-search .strong-search-btn:hover {
    opacity: 0.85;
}

.lexicon-strong-search .lexicon-adjacent-btn {
    padding: 4px 8px;
    background: var(--card-bg, #fff);
    color: var(--primary-color, #0F52BA);
    border: 1px solid var(--primary-color, #0F52BA);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.lexicon-strong-search .lexicon-adjacent-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.lexicon-adjacent-dropdown {
    animation: fadeInScale 0.2s ease;
}

.lexicon-adjacent-dropdown .adjacent-list {
    max-height: 350px;
    overflow-y: auto;
}

.lexicon-adjacent-dropdown .adjacent-item:last-child {
    border-bottom: none;
}

.lexicon-adjacent-dropdown .adjacent-item.current {
    background: var(--hover-bg, #f0f5ff) !important;
    border-left: 3px solid var(--primary-color, #0F52BA);
}


/* 앞뒤 단어 드롭다운 가시성 보장 - 드롭다운은 document.body에 추가됨 */
.lexicon-adjacent-dropdown {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* 근접단어 버튼 */
.adjacent-words-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #333);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.adjacent-words-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

/* 히스토리 버튼 (단일창 원어사전 헤더) */
.lexicon-history-btn-unified {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--card-bg, #fff);
    color: var(--text-color, #333);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.lexicon-history-btn-unified:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

body.night-mode .lexicon-history-btn-unified {
    background: var(--card-bg, #2a2a2a);
    color: var(--text-color, #e0e0e0);
    border-color: var(--border-color, #444);
}

body.night-mode .lexicon-history-btn-unified:hover {
    background: var(--primary-color, #4a90e2);
    color: white;
    border-color: var(--primary-color, #4a90e2);
}

/* 근접단어 팝업 */
.adjacent-words-popup {
    position: fixed;
    z-index: 100000;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 400px;
    max-height: 450px;
    overflow: hidden;
    animation: fadeInScale 0.15s ease;
}

.adjacent-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.adjacent-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    transition: background 0.15s;
}

.adjacent-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.adjacent-popup-close .material-icons {
    font-size: 18px;
}

.adjacent-popup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: var(--text-muted, #888);
}

.adjacent-popup-list {
    max-height: 570px;
    overflow-y: auto;
}

/* 인접단어 팝업 드래그 가능한 헤더 */
.adjacent-popup-header {
    cursor: move;
    user-select: none;
}

.adjacent-word-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #eee);
    cursor: pointer;
    transition: background 0.1s;
}

.adjacent-word-item:hover {
    background: var(--hover-bg, #f5f8ff);
}

.adjacent-word-item.current {
    background: rgba(15, 82, 186, 0.1);
    border-left: 3px solid var(--primary-color, #0F52BA);
}

.adjacent-item-row1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.adjacent-item-row2 {
    display: block !important;
    margin-left: 60px !important;
    padding-left: 0 !important;
}

.adjacent-item-code {
    display: inline-block !important;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
    min-width: 50px;
}

.adjacent-item-word {
    display: inline-block !important;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color, #333);
}

.adjacent-item-translit {
    display: inline-block !important;
    font-size: 0.88rem;
    color: var(--accent-color, #1e88e5);
    font-weight: 700;
    margin-left: 8px;
}

.adjacent-item-def {
    display: block !important;
    font-size: 0.82rem;
    color: #DB25B4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 야간 모드 - 근접단어 */
body.night-mode .adjacent-words-btn {
    background: var(--card-bg, #1e1e1e);
    color: var(--text-color, #e0e0e0);
    border-color: var(--border-color, #444);
}

body.night-mode .adjacent-words-btn:hover {
    background: #6ea8fe;
    color: #0f172a;
    border-color: #6ea8fe;
}

body.night-mode .adjacent-words-popup {
    background: var(--card-bg, #1e1e1e);
    border-color: var(--border-color, #444);
}

body.night-mode .adjacent-popup-header {
    background: #6ea8fe;
    color: #0f172a;
}

body.night-mode .adjacent-word-item:hover {
    background: rgba(110, 168, 254, 0.1);
}

body.night-mode .adjacent-word-item.current {
    background: rgba(110, 168, 254, 0.15);
    border-left-color: #6ea8fe;
}

body.night-mode .adjacent-item-code {
    color: #6ea8fe;
}

.lexicon-meaning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #d8d5cf);
}

.lexicon-meaning-header .meaning-text {
    font-size: 1.1rem;
    color: var(--primary-color, #0F52BA);
    font-weight: 700;
    flex: 1;
    min-width: 100px;
}

.lexicon-meaning-header .meaning-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lexicon-word {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
}

.lexicon-strong-badge {
    background: var(--primary-color, #0F52BA);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 700;
}

.lexicon-occurrences-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
    border: 1px solid var(--primary-color, #0F52BA);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.lexicon-occurrences-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.lexicon-occurrences-btn .occurrences-icon {
    font-weight: bold;
    font-size: 0.9rem;
}

.lexicon-pos-line {
    font-size: 0.95rem;
    color: var(--text-muted, #666);
    margin-bottom: 4px;
}

.lexicon-pos-line .pos-label {
    color: var(--text-muted, #888);
}

.lexicon-translit-line {
    font-size: 1.05rem;
    color: #008080;
    margin-bottom: 6px;
    text-align: left;
}

.lexicon-meaning-line {
    font-size: 1.15rem;
    color: var(--primary-color, #0F52BA);
    font-weight: 600;
    margin: 8px 0 12px 0;
    line-height: 1.5;
}

.lexicon-separator {
    height: 2px;
    background: linear-gradient(to right, var(--primary-color, #0F52BA), transparent);
    margin: 12px 0;
}

.lexicon-lang-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.lexicon-lang-toggle .lang-toggle-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #666);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.lexicon-lang-toggle .lang-toggle-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.lexicon-bdb-section,
.lexicon-thayer-section,
.lexicon-lsj-section,
.lexicon-theo-section,
.lexicon-extended-section {
    margin-top: 12px;
}

.lexicon-bdb-section .section-header,
.lexicon-thayer-section .section-header,
.lexicon-lsj-section .section-header,
.lexicon-theo-section .section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
    margin-bottom: 8px;
}

.lexicon-bdb-section .section-header .material-icons,
.lexicon-thayer-section .section-header .material-icons,
.lexicon-lsj-section .section-header .material-icons,
.lexicon-theo-section .section-header .material-icons {
    font-size: 18px;
}

.lexicon-bdb-section .section-content,
.lexicon-thayer-section .section-content,
.lexicon-lsj-section .section-content,
.lexicon-theo-section .theo-summary {
    font-size: 0.95rem;
    color: var(--text-color, #333);
    line-height: 1.7;
}

.lexicon-lsj-section .lsj-headword {
    font-family: 'Gentium Plus', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
    margin-bottom: 6px;
}

/* LSJ 포맷팅된 콘텐츠 스타일 - 16px 기본 글꼴 */
.lsj-content-formatted {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color, #333);
    background: var(--bg-subtle, #fafafa);
    border-radius: 10px;
    padding: 18px 20px;
    border-left: 4px solid var(--primary-color, #0F52BA);
    margin-top: 8px;
}

.lsj-content-container {
    animation: fadeIn 0.2s ease-out;
}

.lsj-loading-placeholder {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary, #666);
    font-style: italic;
}

.lsj-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary, #666);
    background: var(--bg-subtle, #fafafa);
    border-radius: 8px;
}

.lsj-header-toggle:hover {
    background: var(--hover-bg, rgba(0,0,0,0.03));
    border-radius: 6px;
}

.lsj-expand-icon {
    transition: transform 0.2s ease;
}

.lsj-content-formatted p {
    margin: 0 0 14px 0;
}

.lsj-content-formatted p:last-child {
    margin-bottom: 0;
}

/* LSJ 소개/첫 문단 */
.lsj-content-formatted .lsj-intro {
    font-size: 16px;
}

/* LSJ 대분류 (로마 숫자) */
.lsj-content-formatted .lsj-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color, #ccc);
}

.lsj-content-formatted .lsj-section-num {
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
    font-size: 17px;
    margin-right: 8px;
}

/* LSJ 의미 섹션 (a., b., c.) */
.lsj-content-formatted .lsj-meaning {
    margin-left: 16px;
    padding-left: 12px;
    margin-top: 12px;
    border-left: 2px solid rgba(15, 82, 186, 0.15);
}

.lsj-content-formatted .lsj-meaning-letter {
    font-weight: 700;
    color: #7952b3;
    margin-right: 6px;
    font-size: 15px;
}

/* LSJ 세부 의미 (1., 2., 3.) */
.lsj-content-formatted .lsj-submeaning {
    margin-left: 32px;
    padding-left: 12px;
    font-size: 15px;
    color: var(--text-sub, #555);
    margin-top: 8px;
}

.lsj-content-formatted .lsj-num {
    font-weight: 600;
    color: #28a745;
    margin-right: 4px;
}

/* 헬라어 단어 (이탤릭) */
.lsj-content-formatted .lsj-greek {
    font-family: 'Gentium Plus', serif;
    font-style: italic;
    color: #0056b3;
}

/* 인라인 헤드워드 (굵은 글씨) */
.lsj-content-formatted .lsj-headword-inline {
    font-family: 'Gentium Plus', serif;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
}

/* 문헌 참조 */
.lsj-content-formatted .lsj-ref {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

/* 번역/정의 부분 */
.lsj-content-formatted .lsj-translation {
    color: #c7254e;
    font-weight: 700;
}

/* 정의 구분 */
.lsj-content-formatted .lsj-def {
    color: var(--text-color, #333);
}

/* 야간 모드 */
body.night-mode .lsj-content-formatted {
    background: var(--bg-subtle, #1e1e1e);
    border-left-color: var(--primary-color, #6ea8fe);
}

body.night-mode .lsj-content-formatted .lsj-greek {
    color: #6ea8fe;
}

body.night-mode .lsj-content-formatted .lsj-translation {
    color: #f8a5b3;
}

body.night-mode .lsj-content-formatted .lsj-meaning-letter {
    color: #b08fd8;
}

body.night-mode .lsj-content-formatted .lsj-num {
    color: #75d49b;
}

/* ========================================
   LSJ Modern Card UI Styles
   ======================================== */

/* 카드 컨테이너 */
.lsj-card-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* 헤더 카드 (표제어 + 품사) */
.lsj-header-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
    border-radius: 12px;
    border: 1px solid rgba(15, 82, 186, 0.15);
}

.lsj-headword-main {
    font-family: 'Gentium Plus', 'Noto Serif', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
    letter-spacing: 0.02em;
}

.lsj-pos-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* 소개문 카드 */
.lsj-intro-card {
    padding: 14px 16px;
    background: var(--bg-color, #fff);
    border-radius: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-color, #333);
}

/* 콘텐츠 카드 (단일 카드 레이아웃) */
.lsj-content-card {
    background: var(--bg-color, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color, #e0e0e0);
    overflow: hidden;
}

.lsj-content-body {
    padding: 18px 20px;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-color, #333);
}

/* 대분류 섹션 마커 (I., II., III.) */
.lsj-major-section {
    display: block;
    margin: 18px 0 10px 0;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color, #ccc);
}

.lsj-section-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 16px;
}

/* 하위 섹션 마커 (A., B., C.) */
.lsj-sub-section {
    display: inline-block;
    margin: 10px 0 6px 8px;
}

.lsj-subsection-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 12px;
}

/* 들여쓰기 (nbsp 대체) */
.lsj-indent {
    display: inline-block;
    width: 2em;
}

/* 대분류 섹션 카드 */
.lsj-section-card {
    background: var(--bg-color, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color, #e0e0e0);
    overflow: hidden;
}

.lsj-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    border-left: 4px solid var(--primary-color, #0F52BA);
}

.lsj-section-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.lsj-section-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color, #333);
}

.lsj-section-body {
    padding: 16px 18px;
}

.lsj-section-content {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-color, #444);
}

/* 중분류 (로마 숫자) */
.lsj-subsection {
    display: inline-block;
    margin-bottom: 14px;
    padding-left: 8px;
    border-left: 2px solid rgba(15, 82, 186, 0.12);
}

.lsj-subsection:last-child {
    margin-bottom: 0;
}

.lsj-subsection-numeral {
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
    font-size: 0.95rem;
    margin-bottom: 8px;
    margin-left: -8px;
    padding: 2px 8px;
    background: rgba(15, 82, 186, 0.08);
    border-radius: 4px;
}

.lsj-subsection-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-color, #444);
    padding-left: 8px;
}

/* 소분류 items (1., 2., 3.) */
.lsj-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 8px;
}

.lsj-item {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-subtle, #fafafa);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.lsj-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.lsj-item-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-color, #444);
}

/* 헬라어 단어 강조 */
.lsj-greek-word {
    font-family: 'Gentium Plus', 'Noto Serif', serif;
    color: #0056b3;
    font-style: italic;
}

/* 굵은 텍스트 (표제어, 강조) */
.lsj-bold {
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
}

/* 참조 마커 (cf., q.v. 등) */
.lsj-ref-marker {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* 문헌 참조 칩 */
.lsj-citation {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    font-size: 0.8rem;
    font-style: italic;
    border-radius: 4px;
    margin: 0 2px;
}

/* 야간 모드 - LSJ Card UI */
body.night-mode .lsj-header-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: rgba(99, 102, 241, 0.3);
}

body.night-mode .lsj-headword-main {
    color: #93c5fd;
}

body.night-mode .lsj-pos-badge {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.3);
}

body.night-mode .lsj-intro-card {
    background: var(--bg-color, #1e1e1e);
    border-color: var(--border-color, #333);
}

body.night-mode .lsj-section-card {
    background: var(--bg-color, #1e1e1e);
    border-color: var(--border-color, #333);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.night-mode .lsj-section-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom-color: var(--border-color, #333);
    border-left-color: #6ea8fe;
}

body.night-mode .lsj-section-letter {
    background: #6ea8fe;
    color: #0f172a;
}

body.night-mode .lsj-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

body.night-mode .lsj-item-num {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #064e3b;
}

body.night-mode .lsj-greek-word {
    color: #93c5fd;
}

body.night-mode .lsj-citation {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

body.night-mode .lsj-subsection {
    border-left-color: rgba(147, 197, 253, 0.2);
}

body.night-mode .lsj-subsection-numeral {
    background: rgba(147, 197, 253, 0.15);
    color: #93c5fd;
}

body.night-mode .lsj-bold {
    color: #93c5fd;
}

body.night-mode .lsj-ref-marker {
    color: #9ca3af;
}

body.night-mode .lsj-content-card {
    background: var(--bg-color, #1e1e1e);
    border-color: var(--border-color, #333);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.night-mode .lsj-major-section {
    border-top-color: var(--border-color, #444);
}

body.night-mode .lsj-section-marker {
    background: #6ea8fe;
    color: #0f172a;
}

body.night-mode .lsj-subsection-marker {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: #1e1b4b;
}

/* LSJ 계층 구조 포맷팅 - 마커와 줄바꿈 스타일 */

/* 1단계 줄바꿈 (로마 숫자 전) - 여백 추가 */
.lsj-break-1 {
    display: block;
    margin-top: 14px;
    content: '';
}

/* 2단계 줄바꿈 (대문자 전) - 약간의 여백 */
.lsj-break-2 {
    display: block;
    margin-top: 10px;
    content: '';
}

/* 1단계 마커: 로마 숫자 (I. II. III.) */
.lsj-marker-1 {
    display: inline-block;
    padding: 4px 12px;
    margin: 4px 6px 4px 0;
    background: linear-gradient(135deg, var(--primary-color, #0F52BA) 0%, #1e40af 100%);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(15, 82, 186, 0.2);
}

/* 2단계 마커: 대문자 (A. B. C.) */
.lsj-marker-2 {
    display: inline-block;
    padding: 3px 10px;
    margin: 3px 5px 3px 12px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.15);
}

/* 3단계 마커: 숫자 (1. 2. 3.) - 인라인 배지 */
.lsj-marker-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    margin: 1px 4px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 11px;
    vertical-align: middle;
}

/* 4단계 마커: 소문자 (a. b. c.) - 작은 인라인 배지 */
.lsj-marker-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 1px 3px;
    background: #6b7280;
    color: white;
    font-weight: 700;
    font-size: 0.7rem;
    border-radius: 9px;
    vertical-align: middle;
}

/* 야간 모드 - LSJ 마커 */
body.night-mode .lsj-marker-1 {
    background: linear-gradient(135deg, #6ea8fe 0%, #3b82f6 100%);
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(110, 168, 254, 0.25);
}

body.night-mode .lsj-marker-2 {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: #1e1b4b;
    box-shadow: 0 1px 3px rgba(167, 139, 250, 0.2);
}

body.night-mode .lsj-marker-3 {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #064e3b;
}

body.night-mode .lsj-marker-4 {
    background: #9ca3af;
    color: #1f2937;
}

/* LSJ 섹션 기반 레이아웃 (새 DB 구조 지원) */

/* 일반 정의 (맨 윗줄 등) */
.lsj-def-basic {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-color, #333);
    padding: 8px 0;
}

/* 대분류 (A. B. C.) - 굵고 큰 카드 */
.lsj-section-major {
    display: block;
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
    border-radius: 10px;
    border-left: 4px solid var(--primary-color, #0F52BA);
    font-size: 0.95rem;
    line-height: 1.8;
}

.lsj-section-major b {
    color: var(--primary-color, #0F52BA);
    font-size: 1rem;
}

/* 중분류 (I. II. III.) - 중간 들여쓰기 */
.lsj-section-minor {
    margin-top: 12px;
    margin-left: 8px;
    padding: 10px 14px;
    background: var(--bg-subtle, #fafafa);
    border-radius: 8px;
    border-left: 3px solid #7c3aed;
    font-size: 0.92rem;
    line-height: 1.75;
}

.lsj-section-minor b {
    color: #7c3aed;
    font-weight: 700;
}

/* 소분류 (1. 2. 3.) - 리스트 형태 */
.lsj-list-item {
    margin-left: 16px;
    padding: 6px 12px;
    border-left: 2px solid #059669;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-color, #333);
}

.lsj-list-item b {
    color: #059669;
    font-weight: 600;
}

/* 소소분류 (a. b. c.) - 더 깊은 들여쓰기 */
.lsj-sublist-item {
    margin-left: 28px;
    padding: 8px 14px;
    border-left: 1px solid #9ca3af;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted, #666);
}

.lsj-sublist-item b {
    color: #6b7280;
    font-weight: 700;
}

/* 야간 모드 - LSJ 섹션 스타일 */
body.night-mode .lsj-def-basic {
    color: var(--text-color, #e0e0e0);
}

body.night-mode .lsj-section-major {
    background: linear-gradient(135deg, rgba(110, 168, 254, 0.1) 0%, rgba(110, 168, 254, 0.05) 100%);
    border-left-color: #6ea8fe;
}

body.night-mode .lsj-section-major b {
    color: #6ea8fe;
}

body.night-mode .lsj-section-minor {
    background: rgba(167, 139, 250, 0.1);
    border-left-color: #a78bfa;
}

body.night-mode .lsj-section-minor b {
    color: #a78bfa;
}

body.night-mode .lsj-list-item {
    border-left-color: #34d399;
}

body.night-mode .lsj-list-item b {
    color: #34d399;
}

body.night-mode .lsj-sublist-item {
    border-left-color: #6b7280;
    color: var(--text-muted, #999);
}

/* LSJ 아코디언 (접힘/펼침) 스타일 */
.lsj-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.lsj-intro-section {
    padding: 12px 16px;
    background: var(--bg-subtle, #f9fafb);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.lsj-accordion-group {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-color, #fff);
    transition: box-shadow 0.2s ease;
}

.lsj-accordion-group:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lsj-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.lsj-accordion-header:hover {
    background: linear-gradient(135deg, #eef4ff 0%, #e0ebff 100%);
}

.lsj-accordion-icon {
    font-size: 0.8rem;
    color: var(--primary-color, #0F52BA);
    width: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lsj-accordion-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 40px;
    padding: 0 8px;
    background: var(--primary-color, #0F52BA);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    flex-shrink: 0;
}

.lsj-accordion-title {
    flex: 1;
    font-size: 0.92rem;
    color: var(--text-color, #333);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lsj-accordion-content {
    padding: 12px 16px 16px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-color, #fff);
}

.lsj-accordion-expanded .lsj-accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 야간 모드 - 아코디언 */
body.night-mode .lsj-accordion-group {
    border-color: var(--border-color, #444);
    background: var(--bg-color, #1e1e1e);
}

body.night-mode .lsj-accordion-header {
    background: linear-gradient(135deg, rgba(110, 168, 254, 0.1) 0%, rgba(110, 168, 254, 0.05) 100%);
}

body.night-mode .lsj-accordion-header:hover {
    background: linear-gradient(135deg, rgba(110, 168, 254, 0.15) 0%, rgba(110, 168, 254, 0.1) 100%);
}

body.night-mode .lsj-accordion-icon {
    color: #6ea8fe;
}

body.night-mode .lsj-accordion-marker {
    background: #6ea8fe;
    color: #0f172a;
}

body.night-mode .lsj-accordion-title {
    color: var(--text-color, #e0e0e0);
}

body.night-mode .lsj-accordion-content {
    border-top-color: var(--border-color, #444);
    background: var(--bg-color, #1e1e1e);
}

body.night-mode .lsj-intro-section {
    background: var(--bg-subtle, #252525);
    border-color: var(--border-color, #444);
}

/* ========================================
   End of LSJ Modern Card UI Styles
   ======================================== */

.lexicon-theo-section .theo-row {
    margin-bottom: 4px;
}

.lexicon-theo-section .theo-label {
    color: var(--text-muted, #888);
    margin-right: 6px;
}

.lexicon-theo-section.locked,
.lexicon-extended-section.locked {
    color: var(--text-muted, #888);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lexicon-extended-section .extended-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color, #0F52BA);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 8px;
    border: 1px solid rgba(15, 82, 186, 0.2);
    transition: all 0.2s ease;
}

.lexicon-extended-section .extended-toggle:hover {
    background: linear-gradient(135deg, #e8eeff 0%, #dde5ff 100%);
    border-color: var(--primary-color, #0F52BA);
}

.lexicon-extended-section .extended-toggle .material-icons {
    font-size: 18px;
}

.lexicon-extended-section .extended-content {
    margin-top: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fc 100%);
    border-radius: 10px;
    border: 1px solid #e0e4ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
    line-height: 1.85;
}

body.night-mode .lexicon-extended-section .extended-toggle,
body.dark-mode .lexicon-extended-section .extended-toggle {
    background: linear-gradient(135deg, #1a2a4a 0%, #152040 100%);
    border-color: rgba(15, 82, 186, 0.4);
}

body.night-mode .lexicon-extended-section .extended-toggle:hover,
body.dark-mode .lexicon-extended-section .extended-toggle:hover {
    background: linear-gradient(135deg, #243654 0%, #1d2d50 100%);
}

body.night-mode .lexicon-extended-section .extended-content,
body.dark-mode .lexicon-extended-section .extended-content {
    background: linear-gradient(135deg, #1e2530 0%, #252a35 100%);
    border-color: #3a4050;
}


/* ====================================================
   구조화된 사전 콘텐츠 스타일 (Structured Lexicon Content)
   ==================================================== */
.extended-definition {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F52BA;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e4ed;
}

.extended-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.extended-section {
    padding-left: 4px;
}

.extended-section-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.extended-section-num {
    font-weight: 700;
    color: #0F52BA;
    font-size: 1rem;
}

.extended-section-title {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.extended-section-content {
    padding-left: 20px;
    color: #444;
    line-height: 1.8;
}

.extended-subsections {
    margin-top: 10px;
    padding-left: 20px;
}

.extended-subsection {
    margin-bottom: 8px;
    line-height: 1.75;
}

.extended-subsection-label {
    font-weight: 600;
    color: #666;
    margin-right: 6px;
}

.extended-subsection-content {
    color: #444;
}

.extended-plain-text {
    line-height: 1.85;
    color: #444;
}

.extended-cross-refs {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e0e4ed;
    font-size: 0.9rem;
    color: #666;
}

.extended-cross-refs-label {
    font-weight: 700;
    color: #888;
}

/* 다크 모드 스타일 */
body.night-mode .extended-definition,
body.dark-mode .extended-definition {
    color: #6b9eff;
    border-bottom-color: #3a4050;
}

body.night-mode .extended-section-num,
body.dark-mode .extended-section-num {
    color: #6b9eff;
}

body.night-mode .extended-section-title,
body.dark-mode .extended-section-title {
    color: #e0e0e0;
}

body.night-mode .extended-section-content,
body.dark-mode .extended-section-content,
body.night-mode .extended-subsection-content,
body.dark-mode .extended-subsection-content,
body.night-mode .extended-plain-text,
body.dark-mode .extended-plain-text {
    color: #c0c0c0;
}

body.night-mode .extended-subsection-label,
body.dark-mode .extended-subsection-label {
    color: #999;
}

body.night-mode .extended-cross-refs,
body.dark-mode .extended-cross-refs {
    border-top-color: #3a4050;
    color: #888;
}

body.night-mode .extended-cross-refs-label,
body.dark-mode .extended-cross-refs-label {
    color: #777;
}

.lexicon-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted, #888);
}

.lexicon-link {
    color: var(--primary-color, #0F52BA);
    text-decoration: underline;
    cursor: pointer;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lexicon-lang-toggle-inline {
    display: flex;
    gap: 2px;
    margin-right: 8px;
}

.lexicon-lang-toggle-inline .lang-toggle-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #666);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.lexicon-lang-toggle-inline .lang-toggle-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.lexicon-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===============================================
   COLOR THEME SYSTEM - 고대 히브리 관점 성경 연구 앱
   3가지 테마: Sapphire Dawn(라이트), Midnight Watch(다크), Covenant Ember(세피아)
   =============================================== */

/* 테마 1: Sapphire Dawn (라이트) - 기본 라이트 테마 */
html.theme-sapphire-dawn, body.theme-sapphire-dawn {
    --bg-color: #f4f4f4;
    --card-bg: #ffffff;
    --text-color: #1e1b18;
    --text-sub: #5d5a57;
    --border-color: #d8d5cf;
    --primary-color: #0F52BA;
    --sapphire-blue: #0F52BA;
    --primary-light: rgba(15, 82, 186, 0.1);
    --accent-gold: #C9A646;
    --accent-gold-light: rgba(201, 166, 70, 0.15);
    --header-bg: #0a3d8f;
    --header-text: #ffffff;
    --hover-bg: #f0ede8;
    --selected-bg: rgba(15, 82, 186, 0.12);
    --modal-bg: rgba(0,0,0,0.5);
    --surface-parchment: #F5E6C4;
    --bg-section: #f8f7f4;
    --success-color: #2e7d32;
    --warning-color: #ed6c02;
    --error-color: #d32f2f;
}

/* 테마 2: Midnight Watch (다크) - 깊은 밤 학습용 (부드러운 대비) */
html.theme-midnight-watch, body.theme-midnight-watch {
    --bg-color: #2a2e3a;
    --card-bg: #343a4a;
    --text-color: #e8e6e0;
    --text-sub: #c0bcb2;
    --border-color: #4a5060;
    --primary-color: #6aa8e8;
    --sapphire-blue: #6aa8e8;
    --primary-light: rgba(106, 168, 232, 0.2);
    --accent-gold: #e8cf88;
    --accent-gold-light: rgba(232, 207, 136, 0.18);
    --header-bg: #222630;
    --header-text: #e8e6e0;
    --hover-bg: #3e4454;
    --selected-bg: rgba(106, 168, 232, 0.25);
    --modal-bg: rgba(0,0,0,0.55);
    --surface-parchment: #3e4454;
    --bg-section: #2e323e;
    --success-color: #7cd882;
    --warning-color: #ffc160;
    --error-color: #ff7878;
    /* 다크 테마용 본문 언어별 색상 (가독성 향상) */
    --english-color: #d0e4f8;
    --hebrew-color: #e8e0c0;
    --greek-color: #d8e4c8;
    --korean-color: #e8e6e0;
}

/* 테마 3: Covenant Ember (세피아) - 고대 양피지 느낌 */
html.theme-covenant-ember, body.theme-covenant-ember {
    --bg-color: #F2E8D5;
    --card-bg: #FAF4E8;
    --text-color: #2C2420;
    --text-sub: #5A4A3A;
    --border-color: #D4C4A8;
    --primary-color: #4C2A5F;
    --sapphire-blue: #4C2A5F;
    --primary-light: rgba(76, 42, 95, 0.1);
    --accent-gold: #8B6914;
    --accent-gold-light: rgba(139, 105, 20, 0.12);
    --header-bg: #3A1F4A;
    --header-text: #F5EDE0;
    --hover-bg: #EDE3D0;
    --selected-bg: rgba(76, 42, 95, 0.12);
    --modal-bg: rgba(44, 36, 32, 0.6);
    --surface-parchment: #E9DEC5;
    --bg-section: #F7F0E2;
    --success-color: #6B7A40;
    --warning-color: #9B6B2F;
    --error-color: #9B2F2F;
}

/* 배경색 옵션 - 각 테마에서 선택 가능 */
body.bg-default { /* 기본값 - 테마별 bg-color 사용 */ }

body.bg-parchment-light {
    --bg-color: #F5E6C4;
}

body.bg-parchment-warm {
    --bg-color: #E9DEC5;
}

body.bg-stone-gray {
    --bg-color: #D8D5C9;
}

body.bg-deep-night {
    --bg-color: #10131A;
}

body.bg-indigo-haze {
    --bg-color: #1B2336;
}

body.bg-soft-ivory {
    --bg-color: #FFFEF9;
}

/* 테마별 verse-highlight 애니메이션 */
html.theme-sapphire-dawn, body.theme-sapphire-dawn .verse-highlight {
    background-color: rgba(15, 82, 186, 0.2) !important;
    border-left: 3px solid var(--primary-color) !important;
    animation: verse-flash-sapphire 0.5s ease-in-out 3;
}

@keyframes verse-flash-sapphire {
    0%, 100% { background-color: rgba(15, 82, 186, 0.2); }
    50% { background-color: rgba(15, 82, 186, 0.4); }
}

html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight {
    background-color: rgba(58, 119, 195, 0.25) !important;
    border-left: 3px solid var(--accent-gold) !important;
    animation: verse-flash-midnight 0.5s ease-in-out 3;
}

html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .bible-korean,
html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .verse-korean {
    color: #FFFFFF !important;
}

html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .bible-english,
html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .verse-english {
    color: #C8DFFF !important;
}

html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .bible-hebrew,
html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .bible-greek,
html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .verse-hebrew,
html.theme-midnight-watch, body.theme-midnight-watch .verse-highlight .verse-greek {
    color: #E8DFC0 !important;
}

@keyframes verse-flash-midnight {
    0%, 100% { background-color: rgba(58, 119, 195, 0.25); }
    50% { background-color: rgba(58, 119, 195, 0.45); }
}

html.theme-covenant-ember, body.theme-covenant-ember .verse-highlight {
    background-color: rgba(76, 42, 95, 0.15) !important;
    border-left: 3px solid var(--primary-color) !important;
    animation: verse-flash-covenant 0.5s ease-in-out 3;
}

@keyframes verse-flash-covenant {
    0%, 100% { background-color: rgba(76, 42, 95, 0.15); }
    50% { background-color: rgba(76, 42, 95, 0.3); }
}

/* 테마별 검색 하이라이트 */
html.theme-midnight-watch, body.theme-midnight-watch .search-highlight,
html.theme-midnight-watch, body.theme-midnight-watch mark.search-highlight {
    background-color: rgba(209, 185, 112, 0.35) !important;
    color: var(--text-color) !important;
}

html.theme-covenant-ember, body.theme-covenant-ember .search-highlight,
html.theme-covenant-ember, body.theme-covenant-ember mark.search-highlight {
    background-color: rgba(139, 105, 20, 0.25) !important;
    color: var(--text-color) !important;
}

/* 테마별 Quill 에디터 스타일 */
html.theme-midnight-watch, body.theme-midnight-watch .ql-toolbar.ql-snow {
    background: var(--card-bg);
    border-color: var(--border-color);
}

html.theme-midnight-watch, body.theme-midnight-watch .ql-editor {
    background: var(--card-bg);
    color: var(--text-color);
}

html.theme-midnight-watch, body.theme-midnight-watch .ql-editor.ql-blank::before {
    color: var(--text-sub);
}

html.theme-covenant-ember, body.theme-covenant-ember .ql-toolbar.ql-snow {
    background: var(--surface-parchment);
    border-color: var(--border-color);
}

html.theme-covenant-ember, body.theme-covenant-ember .ql-editor {
    background: var(--card-bg);
    color: var(--text-color);
}

html.theme-covenant-ember, body.theme-covenant-ember .ql-editor.ql-blank::before {
    color: var(--text-sub);
}

/* 테마별 모달 및 드롭다운 */
html.theme-midnight-watch, body.theme-midnight-watch .modal-content,
html.theme-midnight-watch, body.theme-midnight-watch .dropdown-menu,
html.theme-midnight-watch, body.theme-midnight-watch .more-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

html.theme-covenant-ember, body.theme-covenant-ember .modal-content,
html.theme-covenant-ember, body.theme-covenant-ember .dropdown-menu,
html.theme-covenant-ember, body.theme-covenant-ember .more-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* 테마별 버튼 스타일 */
html.theme-midnight-watch, body.theme-midnight-watch .btn-primary,
html.theme-midnight-watch, body.theme-midnight-watch .primary-btn {
    background: var(--primary-color);
    color: #ffffff;
}

html.theme-covenant-ember, body.theme-covenant-ember .btn-primary,
html.theme-covenant-ember, body.theme-covenant-ember .primary-btn {
    background: var(--primary-color);
    color: #ffffff;
}

/* 테마별 스크롤바 (webkit) */
html.theme-midnight-watch, body.theme-midnight-watch::-webkit-scrollbar-track {
    background: var(--bg-color);
}

html.theme-midnight-watch, body.theme-midnight-watch::-webkit-scrollbar-thumb {
    background: #3a3e4a;
    border-radius: 4px;
}

html.theme-covenant-ember, body.theme-covenant-ember::-webkit-scrollbar-track {
    background: var(--bg-color);
}

html.theme-covenant-ember, body.theme-covenant-ember::-webkit-scrollbar-thumb {
    background: #C4B49E;
    border-radius: 4px;
}

/* 테마 선택 UI 스타일 */
.theme-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    min-width: 90px;
}

.theme-option:hover {
    background: var(--hover-bg);
}

.theme-option.active {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.theme-preview {
    width: 60px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-bottom: 6px;
}

.theme-preview-half {
    flex: 1;
}

.theme-option-label {
    font-size: 0.8rem;
    color: var(--text-sub);
    text-align: center;
}

/* 배경색 선택 UI */
.background-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.bg-swatch {
    width: 40px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
    position: relative;
}

.bg-swatch:hover {
    transform: scale(1.1);
}

.bg-swatch.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.bg-swatch.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* 성경 본문 로드 시 하이라이트 효과 */
.bible-content-highlight {
    animation: bible-flash 0.4s ease-out;
}

@keyframes bible-flash {
    0% { 
        background-color: rgba(var(--primary-color-rgb, 15, 82, 186), 0.15);
    }
    100% { 
        background-color: transparent;
    }
}

.bible-list-unified.bible-content-highlight,
#bible-list.bible-content-highlight {
    animation: bible-flash 0.4s ease-out;
}

/* 사전 편집 한/영 탭 */
.edit-lang-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 8px;
    padding: 4px;
    background: #f0f0f0;
    border-radius: 8px;
    width: fit-content;
}

.edit-lang-tab {
    padding: 6px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    transition: all 0.2s;
}

.edit-lang-tab.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.edit-lang-tab:hover:not(.active) {
    background: #e0e0e0;
}

.edit-lang-content {
    animation: fadeIn 0.2s ease;
}

body.night-mode .edit-lang-tabs,
body.dark-mode .edit-lang-tabs {
    background: #2a2f3a;
}

body.night-mode .edit-lang-tab,
body.dark-mode .edit-lang-tab {
    color: #aaa;
}

body.night-mode .edit-lang-tab:hover:not(.active),
body.dark-mode .edit-lang-tab:hover:not(.active) {
    background: #3a3f4a;
}

/* 한국어 기본 설명 섹션 (노란색 영역) */
.lexicon-korean-detail-section {
    margin-top: 12px;
    padding: 12px;
    background-color: #FFF9E6;
    border-radius: 8px;
    border-left: 3px solid #F5C400;
}

.lexicon-korean-detail-section .section-content {
    font-size: 0.95rem;
    color: var(--text-color, #333);
    line-height: 1.7;
}

/* 다크 모드 */
body.dark-mode .lexicon-korean-detail-section {
    background-color: rgba(245, 196, 0, 0.1);
    border-left-color: #F5C400;
}

body.dark-mode .lexicon-korean-detail-section .section-content {
    color: var(--text-color, #e0e0e0);
}

/* 휴지통 복원 버튼 */
.history-restore-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-sub);
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-restore-btn:hover {
    opacity: 1;
    color: #27ae60;
}
.history-restore-btn .material-icons {
    font-size: 0.9rem;
}
.trash-item {
    opacity: 0.7;
}
.trash-item .history-icon-col {
    opacity: 0.6;
}

/* 휴지통 필터 버튼 스타일 */
.trash-filter-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.trash-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    background: var(--bg-section, #f5f5f5);
    color: var(--text-color, #333);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trash-filter-btn:hover {
    background: var(--hover-bg, #e0e0e0);
}

.trash-filter-btn.active {
    background: var(--accent-color, #0F52BA);
    color: white;
    border-color: var(--accent-color, #0F52BA);
}

/* ==================== 성경 버전 설정 스타일 ==================== */
.version-lang-section {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.version-lang-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.version-lang-header:hover {
    background: var(--hover-bg);
}

.version-lang-header .version-selected-badge {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-weight: 700;
}

.version-lang-header .version-expand-icon {
    transition: transform 0.2s;
    font-size: 1.5rem;
    color: var(--text-sub);
}

.version-lang-header.expanded .version-expand-icon {
    transform: rotate(180deg);
}

.version-lang-body {
    padding: 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
}

.version-testament-group {
    margin-bottom: 12px;
}

.version-testament-group:last-child {
    margin-bottom: 0;
}

.version-testament-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 8px;
    padding-left: 4px;
}

.version-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.version-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.version-item:hover {
    border-color: var(--primary-color);
}

.version-item.selected {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.1);
}

.version-item input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.version-item-name {
    flex: 1;
    font-size: 0.9rem;
}

.version-item-short {
    font-size: 0.75rem;
    color: var(--text-sub);
    background: var(--bg-gray);
    padding: 0px 4px;
    border-radius: 4px;
}

.version-style-settings {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
}

.version-style-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.version-style-row:last-child {
    margin-bottom: 0;
}

.version-style-label {
    font-size: 0.8rem;
    color: var(--text-sub);
    min-width: 50px;
}

.version-style-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.version-style-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.version-style-btn:hover {
    border-color: var(--primary-color);
}

.version-style-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.version-size-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.version-size-btn {
    width: 28px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}

.version-size-btn:hover {
    border-color: var(--primary-color);
}

.version-size-value {
    font-size: 0.85rem;
    min-width: 36px;
    text-align: center;
}

/* 병렬보기 설정 */
.parallel-view-settings {
    margin-top: 8px;
}

.parallel-view-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
}

.parallel-version-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parallel-version-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s;
}

.parallel-version-item:hover {
    border-color: var(--primary-color);
}

.parallel-version-item.dragging {
    opacity: 0.5;
    border-style: dashed;
}

.parallel-version-item.drag-over {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.1);
}

.parallel-version-item .drag-handle {
    color: var(--text-sub);
    cursor: grab;
}

.parallel-version-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.parallel-version-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.parallel-version-name {
    font-size: 0.9rem;
    font-weight: 700;
}

.parallel-version-badge {
    font-size: 0.7rem;
    padding: 0px 4px;
    background: var(--bg-gray);
    border-radius: 4px;
    color: var(--text-sub);
}

.parallel-version-style-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.parallel-version-style-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 병렬보기 스타일 팝업 */
.parallel-style-popup {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 200px;
    z-index: 100;
}

/* Panel View Settings Popup - 보기 설정 팝업 */
.view-settings-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.view-settings-popup-overlay.show {
    opacity: 1;
}

.view-settings-popup-inner {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: vsPopupSlideIn 0.25s ease;
}

@keyframes vsPopupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.view-settings-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--primary-color, #0F52BA);
    color: #fff;
}

.view-settings-popup-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-settings-popup-close {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-settings-popup-close:hover {
    background: rgba(255,255,255,0.2);
}

.view-settings-popup-content {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(85vh - 60px);
}

.view-settings-section {
    margin-bottom: 20px;
}

.view-settings-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-settings-section-title .hint {
    font-weight: 400;
    font-size: 13px;
    color: #999;
}

/* 언어 토글 */
.view-settings-lang-toggles {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.view-settings-lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.view-settings-lang-toggle:hover {
    background: #e8e8e8;
}

.view-settings-lang-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #0F52BA);
}

.view-settings-lang-toggle .toggle-label {
    font-size: 14px;
    font-weight: 700;
}

/* 언어 순서 */
.view-settings-lang-order {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-lang-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s;
}

.vs-lang-order-item:hover {
    background: #f0f0f0;
    border-color: var(--primary-color, #0F52BA);
}

.vs-lang-order-item.dragging {
    opacity: 0.5;
    border-style: dashed;
}

.vs-lang-order-item.drag-over {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.1);
}

.vs-lang-order-item .drag-handle {
    color: #999;
    font-size: 18px;
}

.vs-lang-order-item .lang-name {
    font-size: 14px;
    font-weight: 700;
}

/* 원어 버전 그리드 */
.view-settings-version-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.version-label {
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}

/* 단일창 성경에서 버전 라벨 숨기기 */
#single-panel-content .verse-line .version-label,
#bible-list .verse-line .version-label {
    display: none !important;
}

.version-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    max-width: 180px;
}

.version-select:focus {
    outline: none;
    border-color: var(--primary-color, #0F52BA);
}

/* 슬라이더 */
.view-settings-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}

.view-settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color, #0F52BA);
    border-radius: 50%;
    cursor: pointer;
}

.view-settings-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color, #0F52BA);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* 적용 버튼 */
.view-settings-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.view-settings-apply-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--primary-color, #0F52BA);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.view-settings-apply-btn:hover {
    background: #0a3d8f;
    transform: translateY(-1px);
}

.view-settings-apply-btn .material-icons {
    font-size: 18px;
}

/* 다크모드 */
body.dark-mode .view-settings-popup-inner {
    background: #1e1e2e;
}

body.dark-mode .view-settings-popup-content {
    background: #1e1e2e;
}

body.dark-mode .view-settings-section-title {
    color: #aaa;
}

body.dark-mode .view-settings-lang-toggle {
    background: #2a2a4a;
    color: #ddd;
}

body.dark-mode .view-settings-lang-toggle:hover {
    background: #3a3a5a;
}

body.dark-mode .vs-lang-order-item {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #ddd;
}

body.dark-mode .vs-lang-order-item:hover {
    background: #3a3a5a;
}

body.dark-mode .version-label {
    color: #aaa;
}

body.dark-mode .version-select {
    background: #2a2a4a;
    border-color: #3a3a5a;
    color: #ddd;
}

body.dark-mode .view-settings-slider {
    background: #3a3a5a;
}

/* BSB Supplemented Words Styling */
.bsb-supplied {
    font-style: italic;
    color: inherit;
}

/* 모든 헤더 히스토리 버튼 아이콘 크기 1.5배 (16px -> 24px) */
.bible-panel-history-btn .material-icons,
.analysis-panel-history-btn .material-icons,
.lexicon-history-btn .material-icons,
.single-analysis-history-btn .material-icons,
#single-bible-history-btn .material-icons {
    font-size: 24px !important;
}

/* 단일창 모드 히스토리 버튼 우측 끝 배치 */
.single-analysis-history-btn,
.single-lexicon-history-btn {
    margin-left: auto !important;
}

/* ======================================
   전체화면 노트 에디터 - 플로팅 패널 스타일 (데스크탑)
   노트 뷰어 모달과 동일한 크기 및 드래그 기능
   ====================================== */
@media (min-width: 768px) {
    #fullscreen-note-editor-modal.fullscreen-modal {
        position: fixed !important;
        top: var(--top-nav-height) !important;
        left: 0 !important;
        right: auto !important;
        height: calc(100vh - var(--top-nav-height)) !important;
        width: calc(44.44% + 60px) !important;
        max-width: 600px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 1500 !important;
    }
    
    #fullscreen-note-editor-modal.fullscreen-modal .fullscreen-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    #fullscreen-note-editor-modal.fullscreen-modal .fullscreen-modal-header {
        cursor: grab !important;
        user-select: none !important;
    }
    
    #fullscreen-note-editor-modal.fullscreen-modal .fullscreen-modal-header:active {
        cursor: grabbing !important;
    }
    
    /* 노트 뷰어 초기 위치 */
    #notes-viewer-modal.floating-panel > .modal-content {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
}

/* 태블릿 (768-899px) */
@media (min-width: 768px) and (max-width: 899px) {
    #fullscreen-note-editor-modal.fullscreen-modal {
        width: 50vw !important;
        max-width: none !important;
    }
}

/* 검색 결과 책별 빠른 네비게이션 */
.search-book-nav-item:hover {
    background: rgba(15, 82, 186, 0.1) !important;
    border-color: var(--sapphire-blue) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.15);
}

.search-book-nav-item:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 책 스크롤 하이라이트 효과 */
.search-book-highlight {
    animation: bookHighlight 2s ease-out;
}

@keyframes bookHighlight {
    0% {
        background: rgba(15, 82, 186, 0.3);
        box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.4);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* 한글 음역 검색 하이라이트 */
.translit-highlight {
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.4) 0%, rgba(255, 150, 50, 0.4) 100%) !important;
    border-radius: 3px;
    padding: 1px 2px;
    font-weight: 600;
}

/* 히브리어/헬라어 폰트 크기 조정 (검색 결과) */
.search-text [dir="rtl"],
.search-result-text [dir="rtl"],
.search-item .search-text {
    font-size: 1.1em;
}

/* 히브리어 폰트 3포인트 크게 */
[lang="he"], 
.hebrew-text,
*:lang(he) {
    font-size-adjust: 0.58;
}

/* 검색 결과 내 히브리어 텍스트 크기 조정 */
.search-item .search-text,
.search-result-text {
    font-size: 1.05rem;
}

/* 히브리어 유니코드 범위 폰트 크기 증가 */
.search-text:has([dir="rtl"]),
.panel-results-list .search-item .search-text {
    line-height: 1.8;
}

/* 음역 검색 버튼 스타일 */
.translit-search-btn {
    padding: 8px 12px;
    background: var(--bg-section);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.translit-search-btn:hover {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

.translit-mode-indicator {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 검색 결과 내 히브리어 텍스트 크기 조정 */
.search-text,
.search-item .search-text {
    font-size: 1rem;
}

/* 검색 결과 내 히브리어 (RTL) 텍스트 크기 */
.search-text:lang(he),
.search-item .search-text[dir="rtl"],
.search-item .search-text:has([\u05D0-\u05EA]) {
    font-size: 1.9em !important;
    line-height: 1.5;
}

/* Hebrew text within search results - 검색 결과 내 히브리어 폰트 크기 오버라이드 */
.search-text .hebrew-word,
.search-result-item .hebrew-text,
.search-result-text .hebrew-text,
.search-results-list .hebrew-text,
#popup-search-results .hebrew-text,
#search-results-main .hebrew-text,
.popup-search-results .search-text .hebrew-text,
.panel-results-list .hebrew-text {
    font-size: 1.64rem !important;
    line-height: 1.5;
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif !important;
    color: inherit !important;
}

/* Greek text within search results */
.search-text .greek-word,
.search-item .greek-text {
    font-size: 0.9rem !important;
    line-height: 1.5;
    font-family: 'Gentium Plus', serif;
}

/* Search Autocomplete Dropdown */
.search-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    max-height: 350px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.search-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.search-autocomplete-item:last-child {
    border-bottom: none;
}

.search-autocomplete-item:hover {
    background: var(--bg-hover);
}

.search-autocomplete-query {
    font-size: 0.95rem;
    color: var(--text-main);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-autocomplete-query.hebrew-text {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.64rem;
    direction: rtl;
}

.search-autocomplete-query.greek-text {
    font-family: 'Gentium Plus', 'Times New Roman', serif;
    font-size: 0.9rem;
}

.search-autocomplete-date {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-left: 10px;
}

body.night-mode .search-autocomplete-dropdown {
    background: var(--bg-main);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* 검색 모달 새 레이아웃 구조 */
#search-modal .search-modal-layout {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 검색 탭 컨테이너 */
.search-tabs-container {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0 15px;
}

.search-tabs {
    display: flex;
    gap: 4px;
}

.search-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.search-tab .material-icons {
    font-size: 1.1rem;
}

.search-tab:hover {
    color: var(--sapphire-blue);
    background: rgba(15, 82, 186, 0.05);
}

.search-tab.active {
    color: var(--sapphire-blue);
    border-bottom-color: var(--sapphire-blue);
    background: rgba(15, 82, 186, 0.08);
}

.search-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
}

#search-modal .search-input-section {
    flex-shrink: 0;
    background: var(--card-bg);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    z-index: 15;
}

#search-modal .search-top-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

#search-modal .search-input-wrapper {
    flex: 1;
    position: relative;
}

#search-modal .search-input-field {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-main);
    color: var(--text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#search-modal .search-input-field:focus {
    outline: none;
    border-color: var(--sapphire-blue);
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.15);
}

#search-modal .search-execute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--sapphire-blue) 0%, #1a5fc7 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
}

#search-modal .search-execute-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.3);
}

#search-modal .search-execute-btn:active {
    transform: translateY(0);
}

/* 언어 필터 칩 */
.search-lang-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.search-lang-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-version-select {
    padding: 3px 6px;
    font-size: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-section);
    color: var(--text-sub);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.search-version-select:focus {
    border-color: var(--sapphire-blue);
}

.search-version-select:hover {
    border-color: var(--sapphire-blue);
}

.search-lang-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 0.8rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-lang-chip input[type="checkbox"] {
    display: none;
}

.search-lang-chip.active,
.search-lang-chip:has(input:checked) {
    background: linear-gradient(135deg, rgba(15,82,186,0.15) 0%, rgba(15,82,186,0.08) 100%);
    border-color: var(--sapphire-blue);
    color: var(--sapphire-blue);
    font-weight: 600;
}

.search-lang-chip:hover {
    border-color: var(--sapphire-blue);
}

/* 검색 옵션 행 */
.search-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.search-operators {
    display: flex;
    gap: 4px;
}

.search-operator-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-section);
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-operator-btn:hover {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

.search-range-controls {
    display: flex;
    align-items: center;
}

#search-modal .search-range-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

#search-modal .search-range-btn:hover {
    border-color: var(--sapphire-blue);
    color: var(--sapphire-blue);
}

/* 검색 모달에서 범위 선택이 '전체'가 아닌 경우 강조 표시 */
#search-modal .search-range-btn.scope-limited {
    background-color: rgba(200, 100, 100, 0.15);
    border-color: #d4957a;
    color: #c84c38;
}

#search-modal .search-range-btn.scope-limited:hover {
    background-color: rgba(200, 100, 100, 0.25);
    border-color: #c84c38;
    color: #c84c38;
}

#search-modal .search-range-btn .material-icons {
    font-size: 1rem;
}

#search-modal .search-range-btn .search-range-label {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-right: 4px;
}

/* 고급 검색 옵션 */
.search-advanced-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.search-option-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 0.75rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.search-option-chip input[type="checkbox"] {
    display: none;
}

.search-option-chip:has(input:checked) {
    background: rgba(39, 174, 96, 0.12);
    border-color: #27ae60;
    color: #27ae60;
}

.search-option-chip:hover {
    border-color: var(--sapphire-blue);
}

#search-modal .search-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    min-height: 0;
}

/* 검색 팁 */
.search-quick-tips {
    background: linear-gradient(135deg, rgba(15,82,186,0.08) 0%, rgba(15,82,186,0.03) 100%);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.search-tip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-sub);
}

.search-tip-icon {
    font-size: 1rem;
}

#search-modal .search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
    background: var(--bg-main);
    flex-shrink: 0;
}

#search-modal #popup-search-results-count {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sapphire-blue);
}

.search-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-section);
    border-radius: 6px;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.search-back-btn:hover {
    background: var(--sapphire-blue);
    color: white;
}

.search-back-btn .material-icons {
    font-size: 1.1rem;
}

/* 음역 검색 탭 */
.translit-search-header,
.strong-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
}

.translit-lang-select-row,
.strong-type-select {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.translit-lang-option,
.strong-type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.translit-lang-option input,
.strong-type-option input {
    display: none;
}

.translit-lang-option.active,
.translit-lang-option:has(input:checked),
.strong-type-option.active,
.strong-type-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(15,82,186,0.12) 0%, rgba(15,82,186,0.05) 100%);
    border-color: var(--sapphire-blue);
}

.translit-lang-option:hover,
.strong-type-option:hover {
    border-color: var(--sapphire-blue);
}

.translit-lang-option .hebrew-text,
.strong-type-option .hebrew-text {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.1rem;
}

.translit-lang-option .greek-text,
.strong-type-option .greek-text {
    font-family: 'Gentium Plus', serif;
    font-size: 0.9rem;
}

.translit-lang-option span:last-child,
.strong-type-option span:last-child {
    font-size: 0.75rem;
    color: var(--text-sub);
}

/* 음역 제안 */
.translit-suggestions {
    margin-top: 16px;
}

.translit-suggestion-header {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.translit-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.translit-suggestion-chip {
    padding: 5px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.translit-suggestion-chip:hover {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

/* 음역 미리보기 */
.translit-preview {
    background: linear-gradient(135deg, rgba(39,174,96,0.1) 0%, rgba(39,174,96,0.03) 100%);
    border: 1px solid rgba(39,174,96,0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.translit-preview-label {
    font-size: 0.75rem;
    color: #27ae60;
    margin-bottom: 4px;
}

.translit-preview-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
}

.translit-preview-text.hebrew-text {
    font-family: 'Ezra SIL SR', 'Ezra SIL', serif;
    font-size: 1.5rem;
    direction: rtl;
}

.translit-preview-text.greek-text {
    font-family: 'Gentium Plus', serif;
    font-size: 1.3rem;
}

/* Strong's 품사 필터 */
.strong-morph-filters {
    margin-top: 14px;
}

.strong-morph-label {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.strong-morph-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.strong-morph-chip {
    padding: 5px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.strong-morph-chip input {
    display: none;
}

.strong-morph-chip.active,
.strong-morph-chip:has(input:checked) {
    background: linear-gradient(135deg, rgba(15,82,186,0.12) 0%, rgba(15,82,186,0.05) 100%);
    border-color: var(--sapphire-blue);
    color: var(--sapphire-blue);
}

.strong-morph-chip:hover {
    border-color: var(--sapphire-blue);
}

/* Strong's 사전 미리보기 */
.strong-lexicon-preview {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.strong-lexicon-header {
    font-weight: 600;
    color: var(--sapphire-blue);
    margin-bottom: 8px;
    font-size: 1rem;
}

.strong-lexicon-content {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
}

/* 검색 내역 탭 */
.search-history-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.search-history-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.search-history-header .material-icons {
    font-size: 1.2rem;
    color: var(--sapphire-blue);
}

.search-history-actions {
    display: flex;
    gap: 8px;
}

.search-history-save-btn,
.search-history-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-section);
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.search-history-save-btn:hover {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

.search-history-clear-btn:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.search-history-save-btn .material-icons,
.search-history-clear-btn .material-icons {
    font-size: 1.1rem;
}

/* 저장된 검색어 섹션 */
.saved-search-section {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

.saved-search-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.saved-search-header .material-icons {
    font-size: 1rem;
    color: #f39c12;
}

.saved-search-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.saved-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.saved-search-item:hover {
    border-color: var(--sapphire-blue);
    background: rgba(15,82,186,0.05);
}

.saved-search-query {
    font-size: 0.85rem;
    color: var(--text-main);
}

.saved-search-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.saved-search-delete:hover {
    background: #e74c3c;
    color: white;
}

.saved-search-delete .material-icons {
    font-size: 0.9rem;
}

body.night-mode #search-modal .search-input-section {
    background: var(--card-bg);
}

body.night-mode #search-modal .search-results-header {
    background: var(--card-bg);
}

body.night-mode .search-tabs-container {
    background: var(--card-bg);
}

body.night-mode .search-tab.active {
    background: rgba(15, 82, 186, 0.2);
}

/* 좁은 모바일 화면에서 성경 책 이름 세로 표시 */
@media (max-width: 380px) {
    .grid-container.ot-grid { 
        grid-template-columns: repeat(4, 1fr); 
        gap: 4px;
    }
    .grid-container.ot-grid .grid-btn,
    .grid-container.nt-grid .grid-btn {
        padding: 8px 4px;
        font-size: 0.9rem;
        writing-mode: vertical-rl;
        text-orientation: upright;
        min-height: 60px;
        letter-spacing: -1px;
        white-space: nowrap;
    }
}

/* 매우 좁은 화면 (Z Fold 접힌 상태 등) */
@media (max-width: 320px) {
    .grid-container.ot-grid { 
        grid-template-columns: repeat(4, 1fr); 
        gap: 3px;
    }
    .grid-container.ot-grid .grid-btn,
    .grid-container.nt-grid .grid-btn {
        padding: 6px 3px;
        font-size: 0.85rem;
        min-height: 70px;
    }
}

/* MT 버전 선택 드롭다운 */
.analysis-version-wrapper {
    position: relative;
    display: inline-block;
}

.analysis-mt-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 180px;
    overflow: hidden;
}

.analysis-mt-dropdown.show {
    display: block;
}

.mt-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-color, #333);
    cursor: pointer;
    transition: background 0.2s;
}

.mt-dropdown-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.mt-dropdown-item.active {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
    font-weight: 700;
}

.mt-dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.mt-dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

/* 레이아웃 모달 스타일 */
.layout-modal-content {
    background: var(--card-bg, white);
    border-radius: 16px;
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.layout-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #eee);
}
.layout-modal-content .modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.layout-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.layout-modal-section {
    margin-bottom: 20px;
}
.layout-modal-section:last-child {
    margin-bottom: 0;
}
.layout-modal-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-text, #666);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.layout-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}
.layout-modal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--hover-bg, #f5f5f5);
    border: 2px solid transparent;
}
.layout-modal-item:hover {
    background: var(--accent-bg, #e8f4ff);
    border-color: var(--primary-color, #4da6ff);
}
.layout-modal-item.active {
    background: var(--accent-bg, #e8f4ff);
    border-color: var(--primary-color, #4da6ff);
}
.layout-modal-item .layout-icon {
    width: 40px;
    height: 30px;
}
.layout-modal-item span {
    font-size: 0.75rem;
    color: var(--text-color, #333);
}
.layout-modal-presets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.layout-modal-preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--hover-bg, #f5f5f5);
}
.layout-modal-preset-item:hover {
    background: var(--accent-bg, #e8f4ff);
}
.layout-modal-preset-item .preset-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color, #4da6ff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}
.layout-modal-preset-item .preset-name {
    flex: 1;
    font-size: 0.9rem;
}
.layout-modal-preset-item .preset-actions {
    display: flex;
    gap: 6px;
}
.layout-modal-preset-item .preset-actions button {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.layout-modal-preset-item .preset-actions button:hover {
    opacity: 1;
}

/* 다크모드 */
.dark-mode .layout-modal-content {
    background: var(--card-bg, #1e1e1e);
}
.dark-mode .layout-modal-item {
    background: #2a2a2a;
}
.dark-mode .layout-modal-item:hover,
.dark-mode .layout-modal-item.active {
    background: #333;
}
.dark-mode .layout-modal-preset-item {
    background: #2a2a2a;
}
.dark-mode .layout-modal-preset-item:hover {
    background: #333;
}

/* 좁은 화면에서 원전분해 레이아웃 숨기기 */
@media (max-width: 1024px) {
    .layout-normal-only-section {
        display: none;
    }
}

/* 네비바 분석 패널 버전 토글 버튼 */
.navbar-analysis-version-btn {
    background: transparent;
    border: 1.5px solid transparent;
    color: #666;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.navbar-analysis-version-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.navbar-analysis-version-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.05);
}
.navbar-analysis-version-btn.version-hebrew:not(.active):hover {
    background: rgba(212, 165, 116, 0.15);
    border-color: #d4a574;
}
.navbar-analysis-version-btn.version-greek:not(.active):hover {
    background: rgba(124, 179, 212, 0.15);
    border-color: #7cb3d4;
}
.navbar-analysis-version-btn.version-hebrew:not(.active) {
    color: #c9956c;
    border-color: #d4a574;
}
.navbar-analysis-version-btn.version-greek:not(.active) {
    color: #5a9cc4;
    border-color: #7cb3d4;
}
.navbar-analysis-version-btn.version-hebrew.active {
    background: #d4a574;
    border-color: #d4a574;
}
.navbar-analysis-version-btn.version-greek.active {
    background: #7cb3d4;
    border-color: #7cb3d4;
}
.dark-mode .navbar-analysis-version-btn {
    color: #999;
}
.dark-mode .navbar-analysis-version-btn.version-hebrew:not(.active) {
    color: #d4a574;
}
.dark-mode .navbar-analysis-version-btn.version-greek:not(.active) {
    color: #7cb3d4;
}
.dark-mode .navbar-analysis-version-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 없는 절 표시 스타일 */
.verse-missing {
    opacity: 0.6;
}
.missing-verse-text {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
}
.dark-mode .missing-verse-text {
    color: #666;
}

/* ===================================
   Strong's Lexicon 스타일 클래스
   =================================== */

/* 헬라어/히브리어 단어 - Sapphire Blue */
.greek-word {
    color: #0F52BA;
    font-weight: 700;
}

/* 정의/뜻 - 보라색 계열 */
.definition {
    color: #7B2D8E;
    font-style: italic;
}

/* 섹션 번호 (1., 2.) - Deep Blue */
.section-num {
    color: #003399;
    font-weight: 600;
}

/* 하위 섹션 (a), (b) - Blue */
.sub-section {
    color: #4299E1;
    font-weight: 700;
}

/* 참조 정보 - Teal */
.reference {
    color: #319795;
}

/* 일반 검정 텍스트 */
.text-black {
    color: #333333;
}

/* 야간 모드 대응 */
body.dark-mode .greek-word,
body.night-mode .greek-word {
    color: #6BA3E8;
}

body.dark-mode .definition,
body.night-mode .definition {
    color: #C78DD9;
}

body.dark-mode .section-num,
body.night-mode .section-num {
    color: #6B9AFF;
}

body.dark-mode .sub-section,
body.night-mode .sub-section {
    color: #7CC5FF;
}

body.dark-mode .reference,
body.night-mode .reference {
    color: #4FD1C5;
}

body.dark-mode .text-black,
body.night-mode .text-black {
    color: #E0E0E0;
}

/* === 델리취 5단 원전분해 카드 스타일 === */
.analysis-word-block.delitzsch-7tier,
.analysis-word-block.delitzsch-5tier,
.analysis-word-block.delitzsch-6tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    padding: 8px 14px;
    margin: 4px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.analysis-word-block.delitzsch-7tier:hover,
.analysis-word-block.delitzsch-5tier:hover,
.analysis-word-block.delitzsch-6tier:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.analysis-word-block.delitzsch-7tier.selected,
.analysis-word-block.delitzsch-5tier.selected,
.analysis-word-block.delitzsch-6tier.selected {
    background: linear-gradient(135deg, #e8f4fd 0%, #cce5ff 100%);
    border-color: #0F52BA;
    box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.2);
}

/* ===== DHNT 6단 카드 스타일 - SBL/WLC 스타일 통일 ===== */
/* 기본 행 스타일 */
.delitzsch-7tier .word-row,
.delitzsch-5tier .word-row,
.delitzsch-6tier .word-row {
    width: 100%;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 1행: 히브리어 표면형 - SBL/WLC의 word-row-a 스타일 */
.delitzsch-7tier .word-row.tier-1.hebrew-row,
.delitzsch-5tier .word-row.tier-1.hebrew-row,
.delitzsch-6tier .word-row.tier-1.hebrew-row {
    font-size: 2.2rem;
    font-family: 'Ezra SIL SR', 'Ezra SIL', 'Times New Roman', serif;
    color: var(--text-color);
    line-height: 1.2;
    margin-bottom: 4px;
    direction: rtl;
}

.delitzsch-7tier .word-row.tier-1.hebrew-row .hebrew-text,
.delitzsch-5tier .word-row.tier-1.hebrew-row .hebrew-text,
.delitzsch-6tier .word-row.tier-1.hebrew-row .hebrew-text {
    font-size: 2.2rem;
    color: inherit;
    font-family: inherit;
    direction: rtl;
    text-align: center;
    display: block;
    width: 100%;
}

/* 2행: 한글 음역 - SBL/WLC의 word-row-b 스타일 */
.delitzsch-7tier .tier-2.translit-row,
.delitzsch-5tier .tier-2.translit-row,
.delitzsch-6tier .tier-2.translit-row {
    font-size: 1.5rem;
    color: var(--primary-color, #0F52BA);
    font-weight: 600;
    margin-bottom: 4px;
}

/* 3행: 형태론 - SBL/WLC의 word-row-d 스타일 */
.delitzsch-6tier .tier-3.morph-row {
    font-size: 0.95rem;
    color: #666;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* 4행: 뜻 - SBL/WLC의 word-row-c 스타일 */
.delitzsch-6tier .tier-4.korean-row {
    font-size: 0.9rem;
    color: #7D0541;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}

/* 5행: 헬라어 - SBL/WLC의 word-row-e 스타일 */
.delitzsch-6tier .tier-5.greek-row {
    font-family: 'SBL Greek', 'SBL BibLit', 'Times New Roman', serif;
    font-size: 1.5rem;
    color: #3498db;
    direction: ltr;
    background: rgba(52, 152, 219, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* 6행: 헬라어 음역 - 프로젝트 음역 규칙 적용 */
.delitzsch-6tier .tier-6.greek-translit-row {
    font-size: 1.3rem;
    color: #2980b9;
    font-weight: 600;
    margin-top: 4px;
}

/* 7tier/5tier 스타일 유지 */
.delitzsch-7tier .tier-3.korean-row,
.delitzsch-5tier .tier-3.korean-row {
    font-size: 0.9rem;
    color: #7D0541;
    font-weight: 600;
}

.delitzsch-7tier .tier-4.morph-row,
.delitzsch-5tier .tier-4.morph-row {
    font-size: 0.85rem;
    color: #666;
    font-family: monospace;
}

.delitzsch-7tier .tier-5.greek-row,
.delitzsch-5tier .tier-5.greek-row {
    font-size: 1.3rem;
    font-family: 'Gentium Plus', 'SBL Greek', serif;
    color: #3498db;
    padding-top: 4px;
    border-top: 1px dashed #cbd5e0;
    margin-top: 4px;
}

/* 야간 모드 */
.night-mode .delitzsch-6tier .tier-3.morph-row {
    color: #a0aec0;
}

.night-mode .delitzsch-6tier .tier-4.korean-row {
    color: #e2e8f0;
}

.night-mode .delitzsch-6tier .tier-5.greek-row {
    color: #63b3ed;
    background: rgba(99, 179, 237, 0.1);
}

.night-mode .delitzsch-6tier .tier-6.greek-translit-row {
    color: #90cdf4;
}


.delitzsch-7tier .tier-5 .greek-code {
    display: none;
}

.delitzsch-7tier .maqqef-indicator,
.delitzsch-5tier .maqqef-indicator,
.delitzsch-6tier .maqqef-indicator {
    display: none;
}

/* 야간 모드 */
.night-mode .analysis-word-block.delitzsch-7tier,
.night-mode .analysis-word-block.delitzsch-5tier,
.night-mode .analysis-word-block.delitzsch-6tier {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-color: #4a5568;
}

.night-mode .analysis-word-block.delitzsch-7tier:hover,
.night-mode .analysis-word-block.delitzsch-5tier:hover,
.night-mode .analysis-word-block.delitzsch-6tier:hover {
    background: linear-gradient(135deg, #374151 0%, #2d3748 100%);
}

.night-mode .analysis-word-block.delitzsch-7tier.selected,
.night-mode .analysis-word-block.delitzsch-5tier.selected,
.night-mode .analysis-word-block.delitzsch-6tier.selected {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a7c 100%);
    border-color: #4299e1;
}

/* === 원전분해 카드 영역 높이 - 콘텐츠 기반 (불필요한 빈 공간 제거) === */
/* 스크롤 영역이 카드 콘텐츠에 맞게 자동 축소 */
.analysis-horizontal-scroll-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* 카드도 콘텐츠에 맞게 높이 조정 */
.analysis-word-block.delitzsch-6tier,
.analysis-word-block.delitzsch-7tier,
.analysis-word-block.delitzsch-5tier {
    min-height: auto;
    height: auto;
}


.night-mode .delitzsch-7tier .tier-1.hebrew-row,
.night-mode .delitzsch-5tier .tier-1.hebrew-row,
.night-mode .delitzsch-6tier .tier-1.hebrew-row {
    color: #b794f4;
    border-bottom-color: #4a5568;
}

.night-mode .delitzsch-7tier .tier-3.korean-row,
.night-mode .delitzsch-5tier .tier-3.korean-row,
.night-mode .delitzsch-6tier .tier-3.morph-row {
    color: #e2e8f0;
}

.night-mode .delitzsch-7tier .tier-5.greek-row,
.night-mode .delitzsch-5tier .tier-5.greek-row {
    color: #63b3ed;
    border-top-color: #4a5568;
}

/* === DHNT 2열 사전 레이아웃 (헬라어 좌, 히브리어 우) === */
.dual-lexicon-container {
    display: flex;
    gap: 12px;
    padding: 12px;
    height: 100%;
    overflow-y: auto;
}

.lexicon-column {
    flex: 1;
    min-width: 0;
    background: var(--bg-color, #fff);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    overflow-y: auto;
}

.lexicon-column.greek-column {
    border-left: 3px solid #3498db;
}

.lexicon-column.hebrew-column {
    border-left: 3px solid #805ad5;
}

.lexicon-loading {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

.lexicon-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    font-style: italic;
}

.lexicon-entry {
    padding: 12px;
}

.lexicon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.lexicon-header.greek-accent {
    color: #3498db;
}

.lexicon-header.hebrew-accent {
    color: #805ad5;
}

.lexicon-header .lang-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.lexicon-header .lexicon-code {
    font-size: 0.75rem;
    background: rgba(0,0,0,0.05);
    padding: 0px 4px;
    border-radius: 4px;
}

.lexicon-word {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}

.lexicon-word.greek-word {
    font-family: 'Gentium Plus', 'SBL Greek', serif;
    color: #3498db;
}

.lexicon-word.hebrew-word {
    font-family: 'Ezra SIL SR', 'SBL Hebrew', serif;
    color: #805ad5;
}

.lexicon-translit {
    font-size: 1.1rem;
    color: var(--primary-color, #0F52BA);
    font-weight: 600;
    margin-bottom: 4px;
}

.lexicon-pos {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
    font-style: italic;
}

.lexicon-definition {
    font-size: 0.95rem;
    color: var(--text-color, #333);
    line-height: 1.5;
    margin-bottom: 8px;
}

.lexicon-detailed {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
}

/* 야간 모드 - 2열 사전 */
.night-mode .dual-lexicon-container {
    background: transparent;
}

.night-mode .lexicon-column {
    background: #1a202c;
    border-color: #4a5568;
}

.night-mode .lexicon-header {
    border-bottom-color: #4a5568;
}

.night-mode .lexicon-header .lexicon-code {
    background: rgba(255,255,255,0.1);
}

.night-mode .lexicon-definition {
    color: #e2e8f0;
}

.night-mode .lexicon-detailed {
    color: #a0aec0;
    border-top-color: #4a5568;
}

/* 모바일 반응형 - 2열 → 1열 */
@media (max-width: 600px) {
    .dual-lexicon-container {
        flex-direction: column;
    }
    
    .lexicon-column {
        flex: none;
    }
}

/* === 다중 선택 보조 네비바 (상단 네비바 자리에 표시) === */
.multi-select-bar {
    z-index: 100000 !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(135deg, #0F52BA 0%, #1565C0 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: slideDown 0.2s ease;
}

/* 다중 선택 모드일 때 상단 네비바 숨김 */
body.multi-select-mode .nav-container.top-nav {
    display: none !important;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.multi-select-cancel {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
}

.multi-select-cancel:hover {
    background: rgba(255,255,255,0.3);
}

.multi-select-count {
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    flex: 1;
    margin-left: 12px;
}

.multi-select-actions {
    display: flex;
    gap: 8px;
}

.multi-select-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
}

.multi-select-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.multi-select-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.multi-select-btn .material-icons {
    font-size: 20px;
}

.highlight-actions {
    display: flex;
    gap: 6px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: none;
}

.highlight-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 13px;
    font-weight: 700;
    min-width: 50px;
    height: 40px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.highlight-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.highlight-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
}

.highlight-edit-btn {
    background: rgba(255,255,255,0.2);
    min-width: 28px;
    padding: 4px;
}

.highlight-edit-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* 다중 선택 시 선택된 절 하이라이트 */
.verse-item.multi-selected {
    background: linear-gradient(90deg, rgba(15, 82, 186, 0.15) 0%, rgba(79, 209, 197, 0.1) 100%) !important;
    box-shadow: inset 3px 0 0 #0F52BA;
}

.verse-item.multi-selected .verse-num {
    color: #0F52BA;
    font-weight: 700;
}

/* 다중 선택 모드일 때 커서 변경 */
body.multi-select-mode .verse-line {
    cursor: pointer;
}

body.multi-select-mode .verse-line:hover {
    background: rgba(15, 82, 186, 0.08);
}

/* 다중 선택 모드에서 본문 여백 (상단 네비바 자리에 표시되므로 추가 여백 불필요) */

/* 나이트 모드 */
body.night-mode .multi-select-bar {
    z-index: 100000 !important;
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
}

body.night-mode .verse-item.multi-selected {
    background: linear-gradient(90deg, rgba(25, 118, 210, 0.25) 0%, rgba(79, 209, 197, 0.15) 100%) !important;
    box-shadow: inset 3px 0 0 #42a5f5;
}

body.night-mode .verse-item.multi-selected .verse-num {
    color: #42a5f5;
}

/* =================================
   레이아웃 모달 아이콘 재디자인
   ================================= */

/* 레이아웃 모달 중앙 정렬 */
#layout-modal.modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-modal-content {
    background: var(--card-bg, white);
    border-radius: 20px;
    max-width: 420px;
    width: 92%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    margin: auto;
}

.layout-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.layout-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.layout-modal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--hover-bg, #f8f9fa);
    border: 2px solid #e0e0e0;
}

.layout-modal-item:hover {
    background: #e3f2fd;
    border-color: var(--sapphire-blue, #0F52BA);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.15);
}

.layout-modal-item.active {
    background: #e3f2fd;
    border-color: var(--sapphire-blue, #0F52BA);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.2);
}

.layout-modal-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.layout-modal-item span:last-child {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color, #333);
}

/* 새로운 레이아웃 아이콘 스타일 - 이미지 참고 디자인 */
.layout-modal-item .layout-icon {
    width: 64px;
    height: 44px;
    border: 2px solid #333;
    border-radius: 6px;
    background: white;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    box-sizing: border-box;
}

/* 단일 레이아웃 */
.layout-modal-item .layout-icon.icon-single {
    padding: 5px;
}
.layout-modal-item .layout-icon.icon-single::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 2열 레이아웃 */
.layout-modal-item .layout-icon.icon-2col {
    flex-direction: row;
    flex-wrap: nowrap;
}
.layout-modal-item .layout-icon.icon-2col > span {
    flex: 1;
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 3열 레이아웃 */
.layout-modal-item .layout-icon.icon-3col {
    flex-direction: row;
    flex-wrap: nowrap;
}
.layout-modal-item .layout-icon.icon-3col > span {
    flex: 1;
    height: 100%;
    background: #1a1a1a;
    border-radius: 2px;
}

/* 4열 레이아웃 */
.layout-modal-item .layout-icon.icon-4col {
    flex-direction: row;
    flex-wrap: nowrap;
}
.layout-modal-item .layout-icon.icon-4col > span {
    flex: 1;
    height: 100%;
    background: #1a1a1a;
    border-radius: 2px;
}

/* 2행 레이아웃 */
.layout-modal-item .layout-icon.icon-2row {
    flex-direction: column;
}
.layout-modal-item .layout-icon.icon-2row > span {
    flex: 1;
    width: 100%;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 3행 레이아웃 */
.layout-modal-item .layout-icon.icon-3row {
    flex-direction: column;
}
.layout-modal-item .layout-icon.icon-3row > span {
    flex: 1;
    width: 100%;
    background: #1a1a1a;
    border-radius: 2px;
}

/* 2x2 그리드 레이아웃 */
/* 1+2행 레이아웃 (1x2) */
.layout-modal-item .layout-icon.icon-1x2 {
    display: flex;
    flex-direction: row;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-1x2 > .left-panel {
    flex: 1;
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
}
.layout-modal-item .layout-icon.icon-1x2 > .right-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-1x2 > .right-stack > span {
    flex: 1;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 2행+1 레이아웃 (2x1) */
.layout-modal-item .layout-icon.icon-2x1 {
    display: flex;
    flex-direction: row;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-2x1 > .left-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-2x1 > .left-stack > span {
    flex: 1;
    background: #1a1a1a;
    border-radius: 3px;
}
.layout-modal-item .layout-icon.icon-2x1 > .right-panel {
    flex: 1;
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
}

.layout-modal-item .layout-icon.icon-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.layout-modal-item .layout-icon.icon-2x2 > span {
    background: #1a1a1a;
    border-radius: 2px;
}

/* 3x2 그리드 레이아웃 */
.layout-modal-item .layout-icon.icon-3x2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.layout-modal-item .layout-icon.icon-3x2 > span {
    background: #1a1a1a;
    border-radius: 2px;
}

/* 4x2 그리드 레이아웃 */
.layout-modal-item .layout-icon.icon-4x2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 3px;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-4x2 > span {
    background: #1a1a1a;
    border-radius: 1px;
}

/* 원전분해+2열 레이아웃 */
.layout-modal-item .layout-icon.icon-analysis-2 {
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.layout-modal-item .layout-icon.icon-analysis-2 .analysis-row {
    width: 100%;
    height: 14px;
    background: #1a1a1a;
    border-radius: 2px;
    margin-bottom: 3px;
}
.layout-modal-item .layout-icon.icon-analysis-2 .panel-row {
    display: flex;
    flex: 1;
    gap: 3px;
}
.layout-modal-item .layout-icon.icon-analysis-2 .panel-row > span {
    flex: 1;
    background: #1a1a1a;
    border-radius: 2px;
}

/* 원전분해+3열 레이아웃 */
.layout-modal-item .layout-icon.icon-analysis-3 {
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.layout-modal-item .layout-icon.icon-analysis-3 .analysis-row {
    width: 100%;
    height: 14px;
    background: #1a1a1a;
    border-radius: 2px;
    margin-bottom: 3px;
}
.layout-modal-item .layout-icon.icon-analysis-3 .panel-row {
    display: flex;
    flex: 1;
    gap: 2px;
}
.layout-modal-item .layout-icon.icon-analysis-3 .panel-row > span {
    flex: 1;
    background: #1a1a1a;
    border-radius: 1px;
}

/* 사용자 프리셋 섹션 재디자인 */
.layout-modal-presets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layout-modal-preset-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--hover-bg, #f8f9fa);
    border: 1px solid #e0e0e0;
}

.layout-modal-preset-item:hover {
    background: #e3f2fd;
    border-color: var(--sapphire-blue, #0F52BA);
}

.layout-modal-preset-item .preset-number {
    width: 28px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--sapphire-blue, #0F52BA) 0%, #1565C0 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.layout-modal-preset-item .preset-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
}

.layout-modal-preset-item .preset-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.layout-modal-preset-item:hover .preset-actions {
    opacity: 1;
}

.layout-modal-preset-item .preset-actions button {
    padding: 6px 10px;
    border: none;
    background: rgba(0,0,0,0.08);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.layout-modal-preset-item .preset-actions button:hover {
    background: var(--sapphire-blue, #0F52BA);
    color: white;
}

/* 다크모드 레이아웃 아이콘 */
.dark-mode .layout-modal-item .layout-icon {
    border-color: #888;
    background: #2a2a2a;
}
.dark-mode .layout-modal-item .layout-icon.icon-single::after,
.dark-mode .layout-modal-item .layout-icon.icon-2col > span,
.dark-mode .layout-modal-item .layout-icon.icon-3col > span,
.dark-mode .layout-modal-item .layout-icon.icon-4col > span,
.dark-mode .layout-modal-item .layout-icon.icon-2row > span,
.dark-mode .layout-modal-item .layout-icon.icon-3row > span,
.dark-mode .layout-modal-item .layout-icon.icon-2x2 > span,
.dark-mode .layout-modal-item .layout-icon.icon-3x2 > span,
.dark-mode .layout-modal-item .layout-icon.icon-4x2 > span,
.dark-mode .layout-modal-item .layout-icon.icon-analysis-2 .analysis-row,
.dark-mode .layout-modal-item .layout-icon.icon-analysis-3 .analysis-row,
.dark-mode .layout-modal-item .layout-icon.icon-analysis-2 .panel-row > span,
.dark-mode .layout-modal-item .layout-icon.icon-analysis-3 .panel-row > span {
    background: #e0e0e0;
}

.dark-mode .layout-modal-item {
    background: #2a2a2a;
    border-color: #444;
}
.dark-mode .layout-modal-item:hover,
.dark-mode .layout-modal-item.active {
    background: #333;
    border-color: var(--sapphire-blue, #4da6ff);
}
.dark-mode .layout-modal-preset-item {
    background: #2a2a2a;
    border-color: #444;
}
.dark-mode .layout-modal-preset-item:hover {
    background: #333;
    border-color: var(--sapphire-blue, #4da6ff);
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .layout-modal-content {
        max-width: 95%;
        border-radius: 16px;
    }
    .layout-modal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .layout-modal-item {
        padding: 10px 6px;
    }
    .layout-modal-item .layout-icon {
        width: 52px;
        height: 36px;
    }
    .layout-modal-item span:last-child {
        font-size: 0.7rem;
    }
}

/* 레이아웃 모달 위치 조정 - 네비바 아래 */
#layout-modal.modal-overlay {
    padding-top: 60px;
    align-items: flex-start;
}
#layout-modal .layout-modal-content {
    margin-top: 10px;
}


/* 다중선택 네비바 오버레이 */
.multi-select-nav-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: linear-gradient(135deg, #0F52BA 0%, #1565C0 100%);
    color: white;
    z-index: 1000;
    border-radius: inherit;
}

.multi-select-nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.multi-select-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.multi-select-nav-btn .material-icons {
    font-size: 22px;
}

.multi-select-count {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.multi-select-nav-actions {
    display: flex;
    gap: 8px;
}

body.night-mode .multi-select-nav-overlay {
    background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
}

/* nav-container에 position relative 추가 */
.nav-container.top-nav {
    position: relative;
}

/* 다중선택된 절 스타일 */
.verse-line.multi-selected {
    background: rgba(15, 82, 186, 0.15) !important;
    box-shadow: inset 3px 0 0 #0F52BA;
}

body.night-mode .verse-line.multi-selected {
    background: rgba(79, 209, 197, 0.15) !important;
    box-shadow: inset 3px 0 0 #4FD1C5;
}

/* 다중선택 네비바 오버레이 - 완전히 숨김 (multi-select-bar 사용) */
#multi-select-nav-overlay {
    display: none !important;
}

/* 데스크탑에서 단일창 헤더 빈 공간 방지 */
@media (min-width: 768px) {
    .single-panel-header {
    justify-content: flex-start;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    #bible-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    #bible-area > .resizer {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== Range Selection Section ===== */
.une-range-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background-secondary, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.une-range-label {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-weight: 700;
}

.une-range-buttons {
    display: flex;
    gap: 4px;
}

.une-range-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    background: var(--background-primary, #fff);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.une-range-btn:hover {
    background: var(--hover-bg, #f0f0f0);
}

.une-range-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.une-range-text {
    display: none;
}

@media (min-width: 600px) {
    .une-range-text {
        display: inline;
    }
}

.une-ref-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 100px;
}

.une-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--primary-light, #e3f2fd);
    color: var(--primary-dark, #1565c0);
    border-radius: 12px;
    font-size: 12px;
}

.une-ref-chip.ancient {
    background: #fff3e0;
    color: #e65100;
}

.une-ref-chip-remove {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    opacity: 0.7;
    padding: 0 2px;
}

.une-ref-chip-remove:hover {
    opacity: 1;
    color: #d32f2f;
}

/* ===== Reference Picker Modal ===== */
.une-ref-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.une-ref-picker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.une-ref-picker-content {
    position: relative;
    background: var(--background-primary, #fff);
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.une-ref-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--background-secondary, #f5f5f5);
}

.une-ref-picker-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.une-ref-picker-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

.une-ref-picker-close:hover {
    opacity: 1;
}

.une-ref-picker-body {
    padding: 16px;
}

.une-ref-picker-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.une-ref-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--background-primary, #fff);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.une-ref-tab:hover:not(.disabled) {
    background: var(--hover-bg, #f0f0f0);
}

.une-ref-tab.active {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.une-ref-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.une-ref-picker-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.une-ref-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.une-ref-picker-row label {
    width: 40px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.une-ref-picker-row select,
.une-ref-picker-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 14px;
    max-width: calc(100% - 50px);
}

.une-ref-verse-row select {
    flex: 0 1 80px;
    min-width: 60px;
}

.une-ref-verse-sep {
    color: var(--text-secondary, #999);
    flex-shrink: 0;
}

.une-ref-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--background-secondary, #f5f5f5);
}

.une-ref-picker-cancel,
.une-ref-picker-add {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.une-ref-picker-cancel {
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    color: var(--text-primary, #333);
}

.une-ref-picker-add {
    background: var(--primary-color, #0F52BA);
    border: 1px solid var(--primary-color, #0F52BA);
    color: white;
}

.une-ref-picker-add:hover {
    background: var(--primary-dark, #0d47a1);
}

/* Night mode */
body.night-mode .une-range-section {
    background: var(--background-secondary, #2a2a2a);
    border-color: var(--border-color, #444);
}

body.night-mode .une-range-btn {
    background: var(--background-primary, #333);
    border-color: var(--border-color, #555);
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .une-ref-chip {
    background: rgba(15, 82, 186, 0.2);
    color: #64b5f6;
}

body.night-mode .une-ref-picker-content {
    background: var(--background-primary, #2a2a2a);
}

body.night-mode .une-ref-picker-header,
body.night-mode .une-ref-picker-footer {
    background: var(--background-secondary, #222);
    border-color: var(--border-color, #444);
}

body.night-mode .une-ref-tab {
    background: var(--background-primary, #333);
    border-color: var(--border-color, #555);
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .une-ref-picker-row select,
body.night-mode .une-ref-picker-row input {
    background: var(--background-primary, #333);
    border-color: var(--border-color, #555);
    color: var(--text-primary, #e0e0e0);
}

/* ===== Share Toast ===== */
.une-share-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10001;
}

.une-share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.une-share-toast .material-icons {
    color: #4caf50;
    font-size: 20px;
}

/* ===== Toolbar Color/Table Dropdowns ===== */
.une-highlight-group,
.une-textcolor-group,
.une-table-group {
    position: relative;
}

.une-color-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.une-color-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.15s;
}

.une-color-btn:hover {
    transform: scale(1.15);
}

.une-table-dropdown {
    flex-direction: column;
    padding: 4px;
    min-width: 140px;
}

.une-table-action-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
}

.une-table-action-btn:hover {
    background: #f0f0f0;
}

body.night-mode .une-color-dropdown {
    background: #333;
    border-color: #555;
}

body.night-mode .une-table-action-btn {
    color: #e0e0e0;
}

body.night-mode .une-table-action-btn:hover {
    background: #444;
}

/* ===== Upward-opening Dropdowns for Bottom Toolbar ===== */
.une-dropdown-upward {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 4px;
}

.une-toolbar-bottom {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
    border-bottom: none;
    order: 999;
}

.une-toolbar-bottom .une-color-dropdown,
.une-toolbar-bottom .une-table-dropdown {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
}

.une-toolbar-bottom .une-toolbar-overflow {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
}

/* ===== Note Info Modal ===== */
.une-info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.une-info-modal {
    background: white;
    border-radius: 12px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}

.une-info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.une-info-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.une-info-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.une-info-close:hover {
    color: #333;
}

.une-info-modal-body {
    padding: 16px 20px;
}

.une-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.une-info-label {
    color: #666;
    font-size: 13px;
}

.une-info-value {
    font-weight: 700;
    font-size: 14px;
}

.une-info-divider {
    height: 1px;
    background: #eee;
    margin: 8px 0;
}

body.night-mode .une-info-modal {
    background: #2a2a2a;
}

body.night-mode .une-info-modal-header {
    border-color: #444;
}

body.night-mode .une-info-modal-header h3 {
    color: #e0e0e0;
}

body.night-mode .une-info-close {
    color: #aaa;
}

body.night-mode .une-info-label {
    color: #aaa;
}

body.night-mode .une-info-value {
    color: #e0e0e0;
}

body.night-mode .une-info-divider {
    background: #444;
}

/* ============================================ */
/* NoteListUnified (NLU) 새 스타일 */
/* ============================================ */

.nlu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--background-primary, #fff);
    border-radius: 12px;
    overflow: hidden;
}

.nlu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    height: 44px;
    background: linear-gradient(135deg, #0F52BA 0%, #1a5bc7 100%);
    color: white;
    pointer-events: auto !important;
    position: relative;
    z-index: 100;
    border-radius: 8px 8px 0 0;  /* 상단 모서리 둥글게 - 모달 컨테이너와 일치 */
}

.nlu-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nlu-header-icon {
    font-size: 16px;
}

.nlu-header-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.nlu-note-count {
    font-size: 14px;
    opacity: 0.85;
}

.nlu-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto !important;
    z-index: 200;
}

.nlu-header-right button {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.nlu-header-right button:hover {
    background: rgba(255,255,255,0.25);
}

.nlu-header-right button .material-icons {
    font-size: 18px;
}

.nlu-header-edit-btn {
    background: #4a9d8c !important;
    padding: 4px 12px !important;
    width: auto !important;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
}

.nlu-header-edit-btn:hover {
    background: #3a8d7c !important;
}

.nlu-view-toggle.active {
    background: rgba(255,255,255,0.35);
}

.nlu-close-btn {
    font-size: 24px !important;
    font-weight: 300;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    position: relative !important;
}

.nlu-type-tabs {
    display: flex;
    padding: 12px 16px;
    gap: 8px;
    background: var(--background-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    overflow-x: auto;
}

.nlu-type-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s;
}

.nlu-type-tab:hover {
    border-color: var(--primary-color, #0F52BA);
}

.nlu-type-tab.active {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.nlu-type-icon {
    font-size: 14px;
}

.nlu-type-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.nlu-type-tab.active .nlu-type-count {
    background: rgba(255,255,255,0.25);
}

.nlu-filters {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--background-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.nlu-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nlu-search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.nlu-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary, #999);
    font-size: 20px;
    pointer-events: none;
}

.nlu-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 14px;
    background: var(--background-primary, #fff);
    color: var(--text-primary, #333);
}

.nlu-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0F52BA);
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.1);
}

.nlu-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary, #999);
    cursor: pointer;
    padding: 4px;
}

.nlu-sort-dropdown {
    position: relative;
}

.nlu-sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #333);
}

.nlu-sort-btn .material-icons {
    font-size: 18px;
    color: var(--text-secondary, #666);
}

.nlu-sort-dir {
    font-weight: bold;
    color: var(--primary-color, #0F52BA);
    cursor: pointer;
}

.nlu-sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 150px;
    overflow: hidden;
}

.nlu-sort-menu.open {
    display: block;
}

.nlu-sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary, #333);
}

.nlu-sort-option:hover {
    background: var(--hover-bg, #f5f5f5);
}

.nlu-sort-option.active {
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
}

.nlu-sort-option .material-icons {
    font-size: 18px;
    color: var(--text-secondary, #666);
}

.nlu-filter-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.nlu-filter-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.nlu-filter-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

/* 삭제 진행 중 스타일 */
.nlu-bulk-delete-btn.nlu-deleting {
    opacity: 0.7;
    cursor: wait;
}

.nlu-bulk-delete-btn.nlu-deleting .material-icons {
    animation: nlu-spin 1s linear infinite;
}

@keyframes nlu-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 오프라인 모드 배지 */
.nlu-offline-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.nlu-offline-badge .material-icons {
    font-size: 18px;
}

body.night-mode .nlu-offline-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* 휴지통 비우기 버튼 */
.nlu-empty-trash-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.nlu-empty-trash-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

.nlu-empty-trash-btn .material-icons {
    font-size: 18px;
}

body.night-mode .nlu-empty-trash-btn {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 2px 4px rgba(185, 28, 28, 0.4);
}

body.night-mode .nlu-empty-trash-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

/* 다중선택 관련 스타일 */
.nlu-multi-select-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color, #333);
    transition: all 0.2s ease;
}

.nlu-multi-select-toggle:hover {
    background: rgba(15, 82, 186, 0.1);
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
}

.nlu-multi-select-toggle .material-icons {
    font-size: 18px;
}

.nlu-multi-select-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(15, 82, 186, 0.08);
    border-radius: 8px;
}

.nlu-selected-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
    min-width: 70px;
}

.nlu-select-all-btn,
.nlu-cancel-select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nlu-select-all-btn:hover,
.nlu-cancel-select-btn:hover {
    background: var(--bg-subtle, #f5f5f5);
    border-color: var(--primary-color, #0F52BA);
}

.nlu-select-all-btn .material-icons,
.nlu-cancel-select-btn .material-icons {
    font-size: 20px;
    color: var(--text-color, #555);
}

.nlu-bulk-delete-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nlu-bulk-delete-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
}

.nlu-bulk-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nlu-bulk-delete-btn .material-icons {
    font-size: 18px;
}

/* 카드 체크박스 */
.nlu-card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    cursor: pointer;
    padding: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.nlu-card-checkbox .material-icons {
    font-size: 22px;
    color: var(--primary-color, #0F52BA);
}

/* 선택된 카드 스타일 */
.nlu-note-card.nlu-card-selected {
    border: 2px solid var(--primary-color, #0F52BA) !important;
    background: rgba(15, 82, 186, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.15);
}

/* 야간 모드 - 다중선택 */
body.night-mode .nlu-multi-select-toggle {
    background: var(--bg-subtle, #2a2a2a);
    border-color: var(--border-color, #444);
    color: var(--text-color, #e0e0e0);
}

body.night-mode .nlu-multi-select-toggle:hover {
    background: rgba(110, 168, 254, 0.15);
    border-color: #6ea8fe;
    color: #6ea8fe;
}

body.night-mode .nlu-multi-select-actions {
    background: rgba(110, 168, 254, 0.1);
}

body.night-mode .nlu-selected-count {
    color: #6ea8fe;
}

body.night-mode .nlu-select-all-btn,
body.night-mode .nlu-cancel-select-btn {
    background: var(--bg-subtle, #2a2a2a);
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-card-checkbox {
    background: rgba(30, 30, 30, 0.95);
}

body.night-mode .nlu-card-checkbox .material-icons {
    color: #6ea8fe;
}

body.night-mode .nlu-note-card.nlu-card-selected {
    border-color: #6ea8fe !important;
    background: rgba(110, 168, 254, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.2);
}

.nlu-filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary, #333);
    transition: all 0.2s;
}

.nlu-filter-chip:hover {
    border-color: var(--primary-color, #0F52BA);
}

.nlu-filter-chip.active {
    background: rgba(15, 82, 186, 0.1);
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
}

.nlu-filter-chip .material-icons {
    font-size: 16px;
}

.nlu-chip-arrow {
    font-size: 14px !important;
    margin-left: -2px;
}

.nlu-filter-reset {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fee2e2;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    color: #dc2626;
}

.nlu-filter-reset .material-icons {
    font-size: 16px;
}

.nlu-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--background-secondary, #f8f9fa);
}

.nlu-loading,
.nlu-error,
.nlu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary, #666);
    gap: 12px;
}

.nlu-spinner {
    width: 40px;
    height: 44px;
    border: 3px solid var(--border-color, #e0e0e0);
    border-top-color: var(--primary-color, #0F52BA);
    border-radius: 50%;
    animation: nlu-spin 0.8s linear infinite;
}

@keyframes nlu-spin {
    to { transform: rotate(360deg); }
}

.nlu-error .material-icons {
    font-size: 48px;
    color: #dc2626;
}

.nlu-retry-btn {
    margin-top: 8px;
    padding: 8px 20px;
    background: var(--primary-color, #0F52BA);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.nlu-empty-icon {
    font-size: 48px !important;
    color: var(--text-tertiary, #ccc);
}

.nlu-empty-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #333);
}

.nlu-empty-sub {
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.nlu-notes-grid {
    display: grid;
    gap: 12px;
}

.nlu-notes-grid.nlu-view-card {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.nlu-notes-grid.nlu-view-list {
    grid-template-columns: 1fr;
}

.nlu-note-card {
    position: relative;
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.nlu-note-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.nlu-card-private {
    border-left: 4px solid #4169E1;
}

.nlu-card-open {
    border-left: 4px solid #4CAF50;
}

.nlu-card-ahpi {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #4FD1C5, #4299E1) 1;
    background: linear-gradient(135deg, rgba(79, 209, 197, 0.03) 0%, rgba(66, 153, 225, 0.03) 100%);
}

.nlu-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.nlu-card-type-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: white;
}

.nlu-card-ref {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #0F52BA);
}

.nlu-card-owner {
    font-size: 8px;
    color: #4CAF50;
    margin-left: auto;
}

.nlu-card-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #333);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nlu-card-preview {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nlu-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.nlu-tag-chip {
    padding: 2px 8px;
    background: var(--background-secondary, #f0f0f0);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.nlu-tag-more {
    font-size: 13px;
    color: var(--text-tertiary, #999);
}

.nlu-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #eee);
}

.nlu-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.nlu-card-author {
    font-weight: 700;
}

.nlu-card-date {
    color: var(--text-tertiary, #999);
}

.nlu-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nlu-card-revision {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: var(--primary-color, #0F52BA);
}

.nlu-card-revision .material-icons {
    font-size: 14px;
}

.nlu-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 1;  /* 항상 표시 */
}

.nlu-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-primary, #fff);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    color: var(--text-secondary, #666);
    transition: all 0.2s;
}

.nlu-action-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.nlu-action-delete:hover {
    background: #dc2626;
}

.nlu-action-btn .material-icons {
    font-size: 18px;
}

.nlu-filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.nlu-filter-modal-content {
    background: var(--background-primary, #fff);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nlu-filter-modal-small {
    max-width: 400px;
}

.nlu-filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.nlu-filter-modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.nlu-filter-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary, #666);
    padding: 0;
}

.nlu-filter-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.nlu-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.nlu-book-item,
.nlu-tag-item,
.nlu-category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background-secondary, #f5f5f5);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.nlu-book-item:hover,
.nlu-tag-item:hover,
.nlu-category-item:hover {
    background: var(--hover-bg, #e8e8e8);
}

.nlu-tag-list,
.nlu-category-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nlu-filter-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--background-secondary, #f8f9fa);
}

.nlu-filter-modal-footer button {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.nlu-filter-select-all,
.nlu-filter-clear {
    background: var(--background-primary, #fff);
    border: 1px solid var(--border-color, #ddd);
    color: var(--text-primary, #333);
}

.nlu-filter-apply {
    background: var(--primary-color, #0F52BA);
    border: none;
    color: white;
}

body.night-mode .nlu-container {
    background: var(--background-primary, #1e1e1e);
}

body.night-mode .nlu-type-tabs {
    background: var(--background-secondary, #252525);
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-type-tab {
    background: var(--background-primary, #1e1e1e);
    border-color: var(--border-color, #444);
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .nlu-filters {
    background: var(--background-primary, #1e1e1e);
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-search-input,
body.night-mode .nlu-sort-btn,
body.night-mode 

/* 오프라인 모드 배지 */
.nlu-offline-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.nlu-offline-badge .material-icons {
    font-size: 18px;
}

body.night-mode .nlu-offline-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* 휴지통 비우기 버튼 */
.nlu-empty-trash-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.nlu-empty-trash-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

.nlu-empty-trash-btn .material-icons {
    font-size: 18px;
}

body.night-mode .nlu-empty-trash-btn {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 2px 4px rgba(185, 28, 28, 0.4);
}

body.night-mode .nlu-empty-trash-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

.nlu-filter-chip {
    background: var(--background-secondary, #252525);
    border-color: var(--border-color, #444);
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .nlu-content {
    background: var(--background-secondary, #252525);
}

body.night-mode .nlu-note-card {
    background: var(--background-primary, #1e1e1e);
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-card-title {
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .nlu-card-footer {
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-sort-menu {
    background: var(--background-primary, #1e1e1e);
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-sort-option {
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .nlu-sort-option:hover {
    background: var(--hover-bg, #333);
}

body.night-mode .nlu-filter-modal-content {
    background: var(--background-primary, #1e1e1e);
}

body.night-mode .nlu-filter-modal-header,
body.night-mode .nlu-filter-modal-footer {
    border-color: var(--border-color, #444);
}

body.night-mode .nlu-filter-modal-footer {
    background: var(--background-secondary, #252525);
}

body.night-mode .nlu-book-item,
body.night-mode .nlu-tag-item,
body.night-mode .nlu-category-item {
    background: var(--background-secondary, #252525);
    color: var(--text-primary, #e0e0e0);
}

body.night-mode .nlu-action-btn {
    background: var(--background-secondary, #252525);
    color: var(--text-primary, #e0e0e0);
}

@media (max-width: 600px) {
    .nlu-notes-grid.nlu-view-card {
        grid-template-columns: 1fr;
    }
    
    .nlu-search-row {
        flex-direction: column;
    }
    
    .nlu-sort-dropdown {
        width: 100%;
    }
    
    .nlu-sort-btn {
        width: 100%;
        justify-content: center;
    }
    
    .nlu-type-tabs {
        padding: 10px 12px;
    }
    
    .nlu-type-tab {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .nlu-type-name {
        display: none;
    }
}

/* 검색 결과 개선 스타일 */
.search-book-stats {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.search-book-stats-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.search-book-stats-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-book-stat-chip {
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.search-book-stat-chip:hover {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

.search-book-stat-chip strong {
    color: var(--sapphire-blue);
    margin-left: 4px;
}

.search-book-stat-chip:hover strong {
    color: white;
}

.search-book-stat-more {
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.search-result-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: rgba(15, 82, 186, 0.05);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-ref {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.8rem;
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.search-result-header .search-result-ref {
    margin-bottom: 0;
}

.search-result-text {
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.5;
}

.search-highlight {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 193, 7, 0.3) 100%);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 700;
}

.strong-highlight {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.2) 0%, rgba(15, 82, 186, 0.1) 100%);
    color: var(--sapphire-blue);
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 3px;
}

.search-more-results {
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--text-sub);
    background: var(--bg-section);
    border-radius: 6px;
    margin-top: 10px;
}

body.night-mode .search-highlight {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 193, 7, 0.2) 100%);
}

body.night-mode .search-book-stats {
    background: rgba(255,255,255,0.03);
}

/* 검색 필터 활성화 스타일 */
.search-filter-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.1) 0%, rgba(15, 82, 186, 0.05) 100%);
    border: 1px solid var(--sapphire-blue);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.search-filter-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sapphire-blue);
}

.search-filter-clear {
    background: transparent;
    border: none;
    color: var(--sapphire-blue);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.search-filter-clear:hover {
    opacity: 1;
}

.search-filtered-count {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Writer Panel Type Tabs in Multi-Panel Header */
.writer-type-tabs-multi {
    display: flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 2px;
}

.writer-type-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-color);
    opacity: 0.85;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.writer-type-tab:hover {
    background: rgba(255,255,255,0.2);
    opacity: 1;
}

.writer-type-tab.active {
    background: var(--primary-color);
    color: white;
    opacity: 1;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.writer-type-tab span:first-child {
    font-size: 0.95rem;
}

.night-mode .writer-type-tabs-multi {
    background: rgba(255,255,255,0.1);
}

.night-mode .writer-type-tab:hover {
    background: rgba(255,255,255,0.2);
}

/* Responsive: Hide text on small screens */
@media (max-width: 768px) {
    .writer-type-tab span:last-child {
        display: none;
    }
    .writer-type-tab {
        padding: 4px 6px;
    }
}

/* ===== Strong's Code Selector Menu ===== */
.strongs-selector-menu {
    position: fixed;
    z-index: 100000;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 380px;
    padding: 0;
    animation: fadeInScale 0.15s ease-out;
    overflow: hidden;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.strongs-selector-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary-color, #0F52BA) 0%, #1565C0 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.strongs-selector-title {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}
.strongs-selector-word {
    font-size: 16px;
    font-weight: 600;
}
.strongs-selector-items {
    padding: 8px 0;
}
.strongs-selector-item {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 6px;
    border-bottom: 1px solid var(--border-color, #eee);
}
.strongs-selector-item:last-child {
    border-bottom: none;
}
.strongs-selector-item:hover {
    background: var(--bg-hover, #f0f7ff);
}
.strongs-selector-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.strongs-selector-code {
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color, #0F52BA);
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 48px;
    text-align: center;
}
.strongs-selector-code.hebrew {
    background: #0F52BA;
}
.strongs-selector-code.greek {
    background: #7B1FA2;
}
.strongs-selector-original {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #0F52BA);
    direction: rtl;
    unicode-bidi: bidi-override;
}
.strongs-selector-original.greek {
    direction: ltr;
    color: #7B1FA2;
}
.strongs-selector-translit {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-style: italic;
}
.strongs-selector-meaning {
    font-size: 13px;
    color: var(--text-primary, #333);
    line-height: 1.4;
    padding-left: 60px;
}
body.night-mode .strongs-selector-menu {
    background: var(--night-bg-secondary, #2a2a2a);
    border-color: var(--night-border-color, #444);
}
body.night-mode .strongs-selector-header {
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
}
body.night-mode .strongs-selector-item {
    border-color: var(--night-border-color, #3a3a3a);
}
body.night-mode .strongs-selector-item:hover {
    background: var(--night-bg-hover, #3a3a3a);
}
body.night-mode .strongs-selector-original {
    color: #6aa3ff;
}
body.night-mode .strongs-selector-original.greek {
    color: #ce93d8;
}
body.night-mode .strongs-selector-translit {
    color: var(--night-text-secondary, #999);
}
body.night-mode .strongs-selector-meaning {
    color: var(--night-text-primary, #ddd);
}

/* ===== 통합 플로팅 TTS 재생바 ===== */
.unified-tts-bar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    background: linear-gradient(135deg, var(--primary-color, #0F52BA) 0%, #1565C0 100%);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    touch-action: none;
    user-select: none;
    transition: opacity 0.2s, transform 0.2s;
}
.unified-tts-bar.dragging {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.02);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.unified-tts-drag-handle {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    cursor: grab;
    padding: 2px 20px;
}
.unified-tts-drag-handle:active {
    cursor: grabbing;
}
.unified-tts-drag-handle .material-icons {
    font-size: 18px;
}
.unified-tts-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 8px;
}
.unified-tts-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.unified-tts-status {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}
.unified-tts-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.unified-control-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.unified-control-btn:hover {
    background: rgba(255,255,255,0.3);
}
.unified-control-btn:active {
    transform: scale(0.92);
}
.unified-control-btn .material-icons {
    font-size: 22px;
}
.unified-play-main {
    width: 52px;
    height: 52px;
    background: white;
    color: var(--primary-color, #0F52BA);
}
.unified-play-main:hover {
    background: #f0f0f0;
}
.unified-play-main .material-icons {
    font-size: 28px;
}
.unified-tts-close {
    background: rgba(255,100,100,0.3);
}
.unified-tts-close:hover {
    background: rgba(255,100,100,0.5);
}
.unified-tts-progress {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.unified-tts-progress-fill {
    height: 100%;
    background: white;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* 나이트 모드 */
body.night-mode .unified-tts-bar {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.1);
}
body.night-mode .unified-play-main {
    background: #e0e0e0;
    color: #1a1a2e;
}

/* 전체화면 검색 결과 모달 */
.fullscreen-search-results-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary, #fff);
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

.fullscreen-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    flex-shrink: 0;
}

.fullscreen-search-back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--sapphire-blue, #0F52BA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-search-back-btn:active {
    background: rgba(15, 82, 186, 0.1);
}

.fullscreen-search-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-range-info {
    font-size: 12px;
    font-weight: 500;
    color: var(--sapphire-blue, #0F52BA);
    background: rgba(15, 82, 186, 0.1);
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

body.dark-mode .search-range-info {
    color: #4da3ff;
    background: rgba(77, 163, 255, 0.15);
}

.fullscreen-search-count {
    font-size: 14px;
    color: var(--sapphire-blue, #0F52BA);
    font-weight: 700;
    white-space: nowrap;
}

.fullscreen-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
}

.fullscreen-search-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-secondary, #f0f0f0);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.fullscreen-search-filter-chip:hover,
.fullscreen-search-filter-chip.active {
    background: var(--sapphire-blue, #0F52BA);
    color: white;
    border-color: var(--sapphire-blue, #0F52BA);
}

.fullscreen-search-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.fullscreen-search-result-item {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e8e8e8);
}

.fullscreen-search-result-item:active {
    background: var(--bg-secondary, #f5f5f5);
}

.fullscreen-result-reference {
    font-size: 14px;
    font-weight: 600;
    color: var(--sapphire-blue, #0F52BA);
    margin-bottom: 8px;
}

.fullscreen-result-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #333);
}

.fullscreen-result-text .search-highlight {
    background: rgba(255, 193, 7, 0.4);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 700;
}

/* 책별 하이라이트 스타일 */
.fullscreen-search-result-item.book-highlight {
    background: rgba(15, 82, 186, 0.08);
    border-left: 3px solid var(--sapphire-blue, #0F52BA);
}

/* 펄스 하이라이트 애니메이션 */
.fullscreen-search-result-item.pulse-highlight {
    animation: pulseHighlight 1.5s ease-out;
}

@keyframes pulseHighlight {
    0% {
        background: rgba(255, 193, 7, 0.5);
        transform: scale(1.01);
    }
    50% {
        background: rgba(255, 193, 7, 0.3);
    }
    100% {
        background: transparent;
        transform: scale(1);
    }
}

/* 노트 상세보기 영역 */
.nlu-note-detail {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 노트 상세보기 활성화 시 헤더/필터 숨기기 */
.nlu-container.nlu-viewing-detail .nlu-header,
.nlu-container.nlu-viewing-detail .nlu-type-tabs-row,
.nlu-container.nlu-viewing-detail .nlu-filters {
    display: none !important;
}

/* 노트 상세보기 활성화 시 content 영역 전체 높이 사용 */
.nlu-container.nlu-viewing-detail .nlu-content {
    height: 100%;
}

.nlu-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.nlu-detail-header-spacer {
    flex: 1;
}

.nlu-detail-info-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 4px 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.nlu-detail-info-box > div {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.nlu-info-label {
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 4px;
}

.nlu-detail-torah-portion .nlu-torah-portion-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-color, #0F52BA);
    color: white;
    border-radius: 4px;
    font-size: 0.85rem;
}

.nlu-detail-edit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: #4a9d8c;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.nlu-detail-edit-btn:hover {
    background: #3a8d7c;
}

.nlu-detail-edit-btn .material-icons {
    font-size: 16px;
}

.nlu-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

.nlu-back-btn:hover {
    background: #0a3d8f;
}

.nlu-back-btn .material-icons {
    font-size: 1.1rem;
}

.nlu-detail-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: white;
}

.nlu-detail-type-badge-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    border-radius: 6px;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.nlu-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.nlu-detail-title {
    margin: 0 0 12px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

.nlu-detail-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.nlu-detail-author {
    font-weight: 500;
    color: var(--text-color);
    text-align: right;
}

.nlu-author-label {
    font-weight: 700;
}

.nlu-detail-date {
    color: var(--text-muted);
    text-align: right;
}

.nlu-detail-revision {
    color: var(--primary-color);
    font-size: 0.85em;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(15, 82, 186, 0.1);
    border-radius: 4px;
}

.nlu-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.nlu-detail-body {
    line-height: 1.7;
    color: var(--text-color);
}

.nlu-detail-body p {
    margin: 0 0 12px 0;
}

.nlu-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 다크 모드 지원 */
body.night-mode .nlu-detail-header {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.night-mode .nlu-back-btn {
    background: var(--sapphire-blue);
}

body.night-mode .nlu-detail-edit-btn {
    background: #4a9d8c;
}

/* 노트 상세보기 - 패널 헤더 인라인 스타일 */
.nlu-detail-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 0 4px;
}

.nlu-detail-ref-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-color);
    font-size: 0.9rem;
}

.nlu-detail-title-inline {
    flex: 1;
    text-align: center;
    font-weight: 700;
    color: var(--text-color);
    font-size: 0.95rem;
}

.nlu-detail-actions-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nlu-detail-edit-btn-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #4a9d8c;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.nlu-detail-edit-btn-inline:hover {
    background: #3a8d7c;
}

.nlu-detail-edit-btn-inline .material-icons {
    font-size: 14px;
}

.nlu-back-btn-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.nlu-back-btn-inline:hover {
    background: #0a3d8f;
}

.nlu-back-btn-inline .material-icons {
    font-size: 14px;
}

/* 노트 상세보기 헤더 - 창타입 드롭다운 + 뷰 토글 */
.nlu-detail-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 4px;
    gap: 8px;
}

.nlu-detail-left-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nlu-inline-dropdown .nlu-dropdown-btn {
    background: var(--sapphire-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.nlu-inline-dropdown .nlu-dropdown-btn:hover {
    background: #0a3d8f;
}

.nlu-view-toggle-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-section, #f8f9fa);
    border-radius: 6px;
    padding: 2px;
}

.nlu-view-btn-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-sub);
    transition: background 0.2s, color 0.2s;
}

.nlu-view-btn-inline:hover {
    background: rgba(0,0,0,0.08);
}

.nlu-view-btn-inline.active {
    background: var(--sapphire-blue);
    color: white;
}

.nlu-view-btn-inline .material-icons {
    font-size: 18px;
}

.nlu-back-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-sub);
    transition: background 0.2s;
}

.nlu-back-btn-icon:hover {
    background: rgba(0,0,0,0.08);
    color: var(--sapphire-blue);
}

.nlu-back-btn-icon .material-icons {
    font-size: 18px;
}

body.dark-mode .nlu-view-toggle-inline {
    background: rgba(255,255,255,0.1);
}

body.dark-mode .nlu-view-btn-inline:hover {
    background: rgba(255,255,255,0.1);
}

body.dark-mode .nlu-back-btn-icon:hover {
    background: rgba(255,255,255,0.1);
}

/* 다중창에서 패널 헤더가 업데이트된 경우에만 내부 헤더 숨기기 */
.nlu-container.nlu-panel-header-updated .nlu-detail-header {
    display: none !important;
}

/* NoteListUnified Editing Mode - Hide all non-editor panes */
.nlu-container.nlu-editing .nlu-type-tabs,
.nlu-container.nlu-editing .nlu-filters,
.nlu-container.nlu-editing .nlu-notes-grid,
.nlu-container.nlu-editing .nlu-empty,
.nlu-container.nlu-editing .nlu-note-detail,
.nlu-container.nlu-editing .nlu-loading,
.nlu-container.nlu-editing .nlu-error {
    display: none !important;
}

.nlu-container.nlu-editing .nlu-note-editor {
    display: flex !important;
}

/* NoteListUnified Editor Styles */
.nlu-note-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nlu-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
}

.nlu-editor-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-gray);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: all 0.2s;
}

.nlu-editor-back-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.nlu-editor-ref {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-sub);
}

.nlu-editor-actions {
    display: flex;
    gap: 8px;
}

.nlu-editor-save-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.2s;
}

.nlu-editor-save-btn:hover {
    background: var(--primary-dark, #0A3D8F);
}

.nlu-editor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow-y: auto;
}

.nlu-editor-title {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

.nlu-editor-title:focus {
    outline: none;
    border-color: var(--primary-color);
}

.nlu-editor-body {
    flex: 1;
    min-height: 200px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.6;
    overflow-y: auto;
}

.nlu-editor-body:focus {
    outline: none;
    border-color: var(--primary-color);
}

.nlu-editor-body:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted, #999);
}


/* 새 닫기 버튼 (X) 스타일 */
.nlu-close-x {
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: 4px 12px;
    line-height: 1;
    user-select: none;
    pointer-events: auto !important;
    position: relative;
    z-index: 500;
}

.nlu-close-x:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* 헤더 왼쪽 영역에 뷰 토글 버튼 간격 */
.nlu-header-left .nlu-view-toggle {
    margin-left: 8px;
}

/* 플로팅 패널 내 NLU 헤더 클릭 가능하게 */
.floating-panel .nlu-header {
    pointer-events: auto !important;
}

.floating-panel .nlu-header-right {
    pointer-events: auto !important;
}

.floating-panel .nlu-close-x {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.floating-panel .nlu-container {
    pointer-events: auto !important;
}

/* notes-list-container 클릭 가능하게 */
#notes-list-container {
    pointer-events: auto !important;
}

.floating-panel #notes-list-container {
    pointer-events: auto !important;
}

/* notes-viewer-modal 전체 클릭 가능하게 */
#notes-viewer-modal.floating-panel .modal-content {
    pointer-events: auto !important;
}

#notes-viewer-modal .modal-content {
    pointer-events: auto !important;
}

#notes-viewer-modal .notes-viewer-modal {
    pointer-events: auto !important;
}

/* 노트 목록 모달 - 모든 레벨에서 클릭 가능하게 강제 적용 */
#notes-viewer-modal,
#notes-viewer-modal *,
#notes-viewer-modal .modal-content,
#notes-viewer-modal .notes-viewer-modal,
#notes-viewer-modal #notes-list-container,
#notes-viewer-modal .nlu-container,
#notes-viewer-modal .nlu-header,
#notes-viewer-modal .nlu-header-left,
#notes-viewer-modal .nlu-header-right,
#notes-viewer-modal .nlu-close-x,
#notes-viewer-modal #nlu-close-x-btn {
    pointer-events: auto !important;
}

/* 단, 모달 오버레이 자체는 배경 클릭용으로 유지 */
#notes-viewer-modal.modal-overlay {
    pointer-events: auto !important;
}

/* ==================== 노트목록 슬라이드 서랍 스타일 ==================== */
#notes-viewer-modal.slide-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#notes-viewer-modal.slide-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

#notes-viewer-modal.slide-drawer .modal-content {
    position: relative;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    background: var(--card-bg);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#notes-viewer-modal.slide-drawer.open .modal-content {
    transform: translateX(0);
}

/* 슬라이드 서랍 닫기 버튼 */
#notes-viewer-modal.slide-drawer #notes-viewer-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10001;
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 4px 12px;
    pointer-events: auto !important;
    transition: transform 0.2s, color 0.2s;
}

#notes-viewer-modal.slide-drawer #notes-viewer-close-btn:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* 태블릿/데스크톱에서 더 넓게 */
@media (min-width: 768px) {
    #notes-viewer-modal.slide-drawer .modal-content {
        width: 450px;
    }
}

@media (min-width: 1024px) {
    #notes-viewer-modal.slide-drawer .modal-content {
        width: 500px;
    }
}

/* ==================== 노트목록 슬라이드 서랍 - 하단까지 확장 ==================== */
/* 슬라이드 서랍 modal-content를 flex container로 만들어 nlu-container가 전체 높이를 차지하게 함 */
#notes-viewer-modal.slide-drawer .modal-content {
    display: flex;
    flex-direction: column;
}

#notes-viewer-modal.slide-drawer .nlu-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#notes-viewer-modal.slide-drawer .nlu-notes-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* 슬라이드 서랍 - 노트목록이 화면 하단까지 확장되도록 보장 */
#notes-viewer-modal.slide-drawer .notes-viewer-body {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#notes-viewer-modal.slide-drawer .nlu-type-tabs,
#notes-viewer-modal.slide-drawer .nlu-filters {
    flex-shrink: 0;
}

/* ==================== DHNT 카드창/사전창 경계선 조정 ==================== */
/* 원전분해+2열/3열 레이아웃 - 원어사전 완전 숨기기 (하단 패널 공간 확보) */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-lexicon-header,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-lexicon-header,
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-lexicon-scroll,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-lexicon-scroll,
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .dual-lexicon-container,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .dual-lexicon-container,
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-vertical-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-vertical-scroll-wrapper {
    display: none !important;
}

/* 원전분해+2열/3열 - 카드 영역만 표시, 높이 자동 조절 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child {
    min-height: auto;
    max-height: fit-content;
}

/* 원전분해+2열/3열 - 카드 스크롤 영역 높이 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper {
    min-height: auto;
    max-height: fit-content;
}

/* DHNT 6단/7단 카드가 있을 때 충분한 높이 확보 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper:has(.delitzsch-6tier),
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper:has(.delitzsch-6tier),
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper:has(.delitzsch-7tier),
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper:has(.delitzsch-7tier) {
    min-height: auto;
}

/* ==================== 단일창 노트목록 뷰 토글 버튼 ==================== */
.single-notes-view-toggle-container {
    order: -5 !important;
    display: flex;
    gap: 4px;
    margin-left: 10px;
}

.single-notes-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted, #888);
    transition: all 0.2s;
}

.single-notes-view-btn:hover {
    background: var(--hover-color, rgba(15, 82, 186, 0.1));
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
}

.single-notes-view-btn.active {
    background: var(--primary-color, #0F52BA);
    border-color: var(--primary-color, #0F52BA);
    color: white;
}

.single-notes-view-btn .material-icons {
    font-size: 18px;
}

/* 단일창/다중창 패널 컨텍스트에서 nlu-header 숨김 */
.nlu-container.nlu-panel-context .nlu-header {
    display: none;
}

/* 패널 노트목록에서 nlu-type-tabs 상단 패딩 조정 */
.nlu-container.nlu-panel-context .nlu-type-tabs {
    border-radius: 0;
}

/* 야간 모드 */
.night-mode .single-notes-view-btn {
    border-color: var(--border-color-dark, #4a5568);
    color: var(--text-muted-dark, #a0aec0);
}

.night-mode .single-notes-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color, #4a9eff);
    color: var(--primary-color, #4a9eff);
}

.night-mode .single-notes-view-btn.active {
    background: var(--primary-color, #4a9eff);
    border-color: var(--primary-color, #4a9eff);
    color: white;
}

/* 다중창 노트목록 헤더 버튼 스타일 (단일창과 통일) */
.notes-view-toggle-container {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 8px;
}

.notes-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #888);
    transition: all 0.2s;
}

.notes-view-btn:hover {
    background: var(--hover-color, rgba(15, 82, 186, 0.1));
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
}

.notes-view-btn.active {
    background: var(--primary-color, #0F52BA);
    border-color: var(--primary-color, #0F52BA);
    color: white;
}

.notes-view-btn .material-icons {
    font-size: 18px;
}

/* 야간 모드 */
.night-mode .notes-view-btn {
    border-color: var(--border-color-dark, #4a5568);
    color: var(--text-muted-dark, #a0aec0);
}

.night-mode .notes-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color, #4a9eff);
    color: var(--primary-color, #4a9eff);
}

.night-mode .notes-view-btn.active {
    background: var(--primary-color, #4a9eff);
    border-color: var(--primary-color, #4a9eff);
    color: white;
}

/* 새로고침 버튼 active 상태 비활성화 (토글 아닌 액션 버튼) */
.notes-view-btn.notes-refresh-btn.active,
.single-notes-view-btn.single-notes-refresh-btn.active {
    background: transparent;
    border-color: var(--border-color, #e0e0e0);
    color: var(--text-muted, #888);
}

.notes-view-btn.notes-refresh-btn:hover,
.single-notes-view-btn.single-notes-refresh-btn:hover {
    background: var(--hover-color, rgba(15, 82, 186, 0.1));
    border-color: var(--primary-color, #0F52BA);
    color: var(--primary-color, #0F52BA);
}

/* 단일창 노트목록 새로고침 버튼 - 헤더 우측 끝 배치 + 선명한 색상 */
.single-notes-view-btn.single-notes-refresh-btn {
    margin-left: auto;
    color: var(--primary-color, #0F52BA);
    border-color: var(--primary-color, #0F52BA);
}

.single-notes-view-btn.single-notes-refresh-btn .material-icons {
    color: var(--primary-color, #0F52BA);
}

/* 야간 모드 새로고침 버튼 */
.night-mode .single-notes-view-btn.single-notes-refresh-btn,
.dark-mode .single-notes-view-btn.single-notes-refresh-btn {
    color: #4da3ff;
    border-color: #4da3ff;
}

.night-mode .single-notes-view-btn.single-notes-refresh-btn .material-icons,
.dark-mode .single-notes-view-btn.single-notes-refresh-btn .material-icons {
    color: #4da3ff;
}

/* 토라포션 모달 드래그 가능 헤더 */
.torah-draggable-header {
    cursor: move !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.torah-draggable-header:active {
    cursor: grabbing !important;
}
.torah-modal-container {
    display: flex;
    flex-direction: column;
}
#torah-portion-content {
    scrollbar-width: thin;
}
#torah-portion-content::-webkit-scrollbar {
    width: 6px;
}
#torah-portion-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ===== Ketiv-Qere (케티브-케레) 스타일 ===== */
.ketiv-qere-inline {
    display: inline;
    direction: rtl;
    unicode-bidi: isolate;
    font-family: inherit;
}

.ketiv-part,
.qere-part {
    display: inline;
    color: var(--primary-color, #0F52BA);
    font-size: inherit;
}

.ketiv-part {
    margin-left: 0.3em;
}

.qere-part {
    margin-right: 0.3em;
}

.ketiv-text,
.qere-text {
    font-weight: 700;
    color: var(--text-color, #333);
    font-family: inherit;
}

/* 다크 모드 */
body.dark-mode .ketiv-part,
body.dark-mode .qere-part {
    color: var(--primary-color, #7da8ff);
}

body.dark-mode .ketiv-text,
body.dark-mode .qere-text {
    color: var(--text-color, #e0e0e0);
}

/* 케티브-케레 호버 효과 */
.ketiv-qere-inline:hover {
    background-color: rgba(15, 82, 186, 0.1);
    border-radius: 4px;
    cursor: pointer;
}

body.dark-mode .ketiv-qere-inline:hover {
    background-color: rgba(125, 168, 255, 0.15);
}

/* ===== 원전분해 케티브/케레 개별 카드 스타일 ===== */
.analysis-word-block.ketiv-card,
.analysis-word-block.qere-card {
    border: 2px solid var(--primary-color, #0F52BA);
    background-color: rgba(15, 82, 186, 0.05);
}

.analysis-word-block.ketiv-card .word-row-a {
    color: #8B4513;
    font-weight: 600;
}

.analysis-word-block.qere-card .word-row-a {
    color: #2E8B57;
    font-weight: 600;
}

body.dark-mode .analysis-word-block.ketiv-card,
body.dark-mode .analysis-word-block.qere-card {
    border-color: var(--primary-color, #7da8ff);
    background-color: rgba(125, 168, 255, 0.1);
}

body.dark-mode .analysis-word-block.ketiv-card .word-row-a {
    color: #DEB887;
}

body.dark-mode .analysis-word-block.qere-card .word-row-a {
    color: #90EE90;
}

/* 케티브/케레 마커 스타일 (כ=, ק=) */
.kq-marker {
    font-size: 0.65em;
    font-weight: 600;
    vertical-align: middle;
    margin-right: 2px;
    padding: 1px 3px;
    border-radius: 3px;
    font-family: 'SBL Hebrew', 'Ezra SIL', serif;
}

.ketiv-marker {
    color: #fff;
    background-color: #8B4513;
}

.qere-marker {
    color: #fff;
    background-color: #2E8B57;
}

body.dark-mode .ketiv-marker {
    color: #1a1a1a;
    background-color: #DEB887;
}

body.dark-mode .qere-marker {
    color: #1a1a1a;
    background-color: #90EE90;
}

/* 케티브/케레 카드의 스트롱코드 클릭 커서 */
.analysis-word-block.ketiv-card,
.analysis-word-block.qere-card {
    cursor: pointer;
}

.analysis-word-block.ketiv-card:hover,
.analysis-word-block.qere-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ========================================
   미디어 쿼리 인덱스 (브레이크포인트별 위치)
   ========================================
   
   최소 화면 (320px~380px):
   - 라인 20759: @media (max-width: 320px)
   - 라인 6480:  @media (max-width: 360px)
   - 라인 20741: @media (max-width: 380px)
   
   Galaxy Fold 접힘 (430px):
   - 라인 6157, 8318, 8346, 15231: @media (max-width: 430px)
   
   중간 모바일 (480px~600px):
   - 라인 3661, 3990, 4252, 5452, 14375, 14607, 14792, 22034: @media (max-width: 480px)
   - 라인 3227, 8830, 12556, 15110, 21503, 23454: @media (max-width: 600px)
   
   모바일 (767px):
   - 13개 위치: @media (max-width: 767px)
   
   태블릿 시작 (768px+):
   - 12개 위치: @media (min-width: 768px)
   
   태블릿 (768px~1024px):
   - 라인 5988, 6014, 6069, 8965, 9394, 9407: @media (min-width: 768px) and (max-width: 1024px)
   
   데스크탑 (1025px+):
   - 라인 5537: @media (min-width: 1025px)
   
   참고: 미디어 쿼리 위치는 파일 수정 시 변경될 수 있음
   ======================================== */

/* ========================================
   Galaxy Fold 펼침 상태 전용 스타일
   ========================================
   Galaxy Fold 3: 884x707px
   Galaxy Fold 4/5/6: 906x755px
   너비 680-920px, 종횡비 0.75+ (거의 정사각형)
   ======================================== */

/* Galaxy Fold 펼침: 너비 680-920px + 거의 정사각형 종횡비 */
@media (min-width: 680px) and (max-width: 920px) and (min-aspect-ratio: 3/4) {
    /* 패널 레이아웃 최적화 */
    .multi-panel-container {
        gap: 4px;
    }
    
    /* 2x2 그리드 최적화 */
    .multi-panel-container.layout-2x2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    /* 3열 레이아웃 최적화 */
    .multi-panel-container.layout-3col .panel-wrapper {
        min-width: 200px;
    }
    
    /* 원전분해 카드 최적화 */
    .analysis-word-block {
        padding: 6px 8px;
        min-width: 75px;
    }
    
    /* 폰트 크기 약간 조정 */
    .verse-text {
        font-size: 0.95rem;
    }
    
    /* 사전 패널 최적화 */
    .lexicon-panel-content {
        padding: 8px;
    }
    
    /* 상단 네비게이션 최적화 */
    .top-nav-bar {
        padding: 0 8px;
    }
    
    /* 모달 크기 최적화 */
    .modal-content {
        max-width: 90%;
        max-height: 90vh;
    }
}

/* Galaxy Fold 펼침 + 세로 모드 (세로가 더 긴 경우) */
@media (min-width: 680px) and (max-width: 920px) and (min-aspect-ratio: 3/4) and (orientation: portrait) {
    /* 2행 레이아웃 최적화 */
    .multi-panel-container.layout-2row {
        grid-template-rows: 1fr 1fr;
    }
    
    /* 성경 본문 영역 패딩 */
    #single-panel-content {
        padding: 8px 12px;
    }
}

/* Galaxy Fold 펼침 + 가로 모드 */
@media (min-width: 680px) and (max-width: 920px) and (min-aspect-ratio: 3/4) and (orientation: landscape) {
    /* 2열 레이아웃 최적화 */
    .multi-panel-container.layout-2col .panel-wrapper {
        flex: 1;
    }
    
    /* 원전분해 3열 최적화 */
    .multi-panel-container.layout-analysis-3 {
        grid-template-columns: 1fr;
        grid-template-rows: 50% 25% 25%;
    }
}

/* Galaxy Fold 펼침 상태 body 클래스 (JS에서 추가) */
body.galaxy-fold-unfolded {
    /* 폰트 렌더링 최적화 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.galaxy-fold-unfolded .multi-panel-container {
    /* 패널 간격 최적화 */
    gap: 4px;
}

body.galaxy-fold-unfolded .panel-wrapper {
    /* 패널 테두리 얇게 */
    border-width: 1px;
}

/* 병렬보기 설정 버전 순서 교체 버튼 */
.uvs-pv-swap-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.uvs-pv-swap-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.uvs-pv-swap-btn .material-icons {
    font-size: 16px;
    color: var(--text-secondary);
}

.uvs-pv-swap-btn:hover .material-icons {
    color: var(--primary-color);
}

.uvs-pv-version-checkboxes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* 검색 연산자 범위 선택 드롭다운 */
.search-operator-range-select {
    padding: 8px 10px;
    background: var(--bg-sub);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    min-width: 70px;
    height: 36px;
}

.search-operator-range-select:focus {
    outline: none;
    border-color: var(--sapphire-blue);
}

#bible-list .single-panel-search .search-operator-range-select {
    padding: 6px 8px;
    font-size: 13px;
    min-width: 60px;
    height: 32px;
}

.multi-panel-content .search-operator-range-select {
    padding: 6px 8px;
    font-size: 13px;
    min-width: 60px;
    height: 32px;
}

/* 버전 스택 레이아웃 (상하 배치) */
.uvs-pv-version-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.uvs-pv-version-stack-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s ease;
}

.uvs-pv-version-stack-item:active {
    cursor: grabbing;
}

.uvs-pv-version-stack-item.dragging {
    opacity: 0.5;
    background: var(--sapphire-blue);
    transform: scale(1.02);
}

.uvs-pv-version-stack-item.drag-over {
    border-color: var(--sapphire-blue);
    background: rgba(15, 82, 186, 0.1);
}

.uvs-pv-stack-drag {
    display: flex;
    align-items: center;
    color: var(--text-sub);
    cursor: grab;
}

.uvs-pv-stack-drag .material-icons {
    font-size: 16px;
}

.uvs-pv-version-stack-item .uvs-pv-version-checkbox-label {
    flex: 1;
    margin: 0;
}

.uvs-pv-fixed-version {
    opacity: 0.7;
    padding: 6px 8px;
    background: var(--bg-sub);
    border-radius: 6px;
}

.uvs-pv-fixed-version input:disabled + span {
    color: var(--text-sub);
}

/* 고정 버전 아이템 (LXX, DHNT) */
.uvs-pv-fixed-item {
    background: rgba(15, 82, 186, 0.08);
    border-color: var(--sapphire-blue);
}

.uvs-pv-fixed-icon {
    display: flex;
    align-items: center;
    color: var(--sapphire-blue);
}

.uvs-pv-fixed-icon .material-icons {
    font-size: 14px;
}

.uvs-pv-always-checked {
    pointer-events: none;
}

.uvs-pv-fixed-item .uvs-pv-version-checkbox-label {
    opacity: 0.9;
}

/* 근접 검색 결과 헤더 스타일 */
.proximity-search-header {
    background: linear-gradient(135deg, var(--sapphire-blue) 0%, #1565c0 100%);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.2);
}

.dark-mode .proximity-search-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.book-counts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 0;
}

.book-count-chip {
    display: inline-block;
    background: var(--bg-tertiary);
    color: var(--text-color);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
}

.dark-mode .book-count-chip {
    background: #3a3a3a;
    border-color: #555;
}

/* 근접 검색 결과 검색어 하이라이트 */
.search-term-highlight {
    background: linear-gradient(135deg, #fff59d 0%, #ffee58 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark-mode .search-term-highlight {
    background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 근접 검색 드롭다운 스타일 */
.search-operator-range-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 80px;
}

.search-operator-range-select:focus {
    outline: none;
    border-color: var(--sapphire-blue);
    box-shadow: 0 0 0 2px rgba(15, 82, 186, 0.2);
}

.dark-mode .search-operator-range-select {
    background: #2a2a2a;
    border-color: #555;
}

/* 검색 모달 최대 높이로 확장 */
#search-modal .modal-content.medium-modal.search-modal-layout {
    max-height: calc(100vh - var(--top-nav-height, 50px) - 10px) !important;
    height: calc(100vh - var(--top-nav-height, 50px) - 10px) !important;
    margin-top: calc(var(--top-nav-height, 50px) + 5px) !important;
}

/* 검색 자동완성 드롭다운 숨기기 */
.search-autocomplete-dropdown {
    display: none !important;
}

/* 근접 검색 쌍(pairs) 결과 스타일 */
.proximity-pairs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.proximity-book-group {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.proximity-book-header {
    background: var(--sapphire-blue);
    color: white;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.proximity-pair-card {
    background: var(--bg-main);
    border-left: 4px solid var(--sapphire-blue);
    margin: 10px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.proximity-pair-card:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.proximity-pair-verse {
    padding: 8px 0;
}

.proximity-verse-ref {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 700;
}

.proximity-verse-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-main);
}

.proximity-distance-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
}

.proximity-distance-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.proximity-distance-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    white-space: nowrap;
    border: 1px solid var(--border-color);
}

/* 첫 번째 검색어 하이라이트 (노란색) */
.proximity-term-1 {
    background: linear-gradient(135deg, #fff59d 0%, #ffee58 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 두 번째 검색어 하이라이트 (하늘색) */
.proximity-term-2 {
    background: linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 다크 모드 */
.dark-mode .proximity-term-1 {
    background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
    color: #000;
}

.dark-mode .proximity-term-2 {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    color: #000;
}

.dark-mode .proximity-pair-card {
    background: var(--card-bg);
}

.dark-mode .proximity-book-group {
    background: var(--card-bg-dark);
}

.dark-mode .proximity-distance-badge {
    background: #333;
    border-color: #555;
}

/* 3단어 이상 근접 검색 구간(spans) 스타일 */
.proximity-spans-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

.proximity-terms-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 10px;
}

.proximity-terms-legend .legend-item {
    font-size: 0.9rem;
}

.proximity-span-card {
    background: var(--bg-main);
    border-left: 4px solid var(--sapphire-blue);
    margin: 10px;
    padding: 12px;
    border-radius: 8px;
}

.proximity-span-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.proximity-span-badge {
    background: linear-gradient(135deg, var(--sapphire-blue) 0%, #1565c0 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.proximity-span-verses {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.proximity-span-verse {
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.proximity-span-verse:hover {
    transform: translateX(4px);
    background: var(--bg-tertiary);
}

.proximity-verse-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.proximity-verse-connector::before,
.proximity-verse-connector::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.proximity-verse-connector span {
    padding: 0 10px;
    white-space: nowrap;
}

/* 세 번째 검색어 하이라이트 (연두색) */
.proximity-term-3 {
    background: linear-gradient(135deg, #c5e1a5 0%, #aed581 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 네 번째 검색어 하이라이트 (분홍색) */
.proximity-term-4 {
    background: linear-gradient(135deg, #f8bbd9 0%, #f48fb1 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 다섯 번째 검색어 하이라이트 (보라색) */
.proximity-term-5 {
    background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
    color: #333;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 다크 모드 */
.dark-mode .proximity-term-3 {
    background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
    color: #fff;
}

.dark-mode .proximity-term-4 {
    background: linear-gradient(135deg, #ec407a 0%, #c2185b 100%);
    color: #fff;
}

.dark-mode .proximity-term-5 {
    background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%);
    color: #fff;
}

.dark-mode .proximity-span-card {
    background: var(--card-bg);
}

.dark-mode .proximity-span-verse {
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .proximity-span-verse:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 근접 검색 라벨 */
.proximity-search-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: var(--sapphire-blue);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    margin-left: 4px;
    border: 1px solid rgba(15, 82, 186, 0.2);
}

.dark-mode .proximity-search-label {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.3) 0%, rgba(15, 82, 186, 0.15) 100%);
    color: #64b5f6;
    border-color: rgba(100, 181, 246, 0.3);
}

/* 근접 검색 그룹 번호 배지 */
.proximity-group-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--sapphire-blue);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    margin-right: 8px;
}

/* 근접 범위 배지 개선 */
.proximity-range-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    color: #f57c00;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid #ffe082;
}

.dark-mode .proximity-range-badge {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0.1) 100%);
    color: #ffb74d;
    border-color: rgba(255, 183, 77, 0.3);
}

/* 추천 근접 검색어 섹션 */
.proximity-recommended-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1px solid #d0e3f7;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.dark-mode .proximity-recommended-section {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.15) 0%, rgba(15, 82, 186, 0.08) 100%);
    border-color: rgba(15, 82, 186, 0.3);
}

.proximity-recommended-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--sapphire-blue);
    margin-bottom: 8px;
}

.proximity-recommended-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.proximity-recommended-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proximity-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.dark-mode .proximity-chip {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.proximity-chip:hover {
    transform: translateX(4px);
    border-color: var(--sapphire-blue);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.15);
}

.proximity-chip .chip-icon {
    font-size: 1.2rem;
}

.proximity-chip .chip-text {
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}

.proximity-chip .chip-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 근접 검색 결과 헤더 및 정렬 옵션 */
.proximity-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.proximity-sort-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proximity-sort-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.proximity-sort-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-main);
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.proximity-sort-btn:hover {
    background: var(--bg-tertiary);
}

.proximity-sort-btn.active {
    background: var(--sapphire-blue);
    color: white;
    border-color: var(--sapphire-blue);
}

.dark-mode .proximity-sort-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .proximity-sort-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .proximity-sort-btn.active {
    background: var(--sapphire-blue);
    border-color: var(--sapphire-blue);
}

/* 근접 검색 결과 - 그룹 카드 스타일 */
.proximity-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--sapphire-blue) 0%, #1a5fc7 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    color: white;
}

.proximity-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
}

.proximity-summary-title .material-icons {
    font-size: 1.3rem;
    opacity: 0.9;
}

.proximity-summary-count {
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
}

.proximity-group-card {
    background: var(--bg-main);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.proximity-group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.proximity-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--border-color);
}

.proximity-group-number {
    font-weight: 700;
    color: var(--sapphire-blue);
    font-size: 0.9rem;
}

.proximity-group-book {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}

.proximity-group-distance {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-left: auto;
    background: var(--bg-main);
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.proximity-pair-verses {
    padding: 12px 16px;
}

.proximity-pair-verse {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.proximity-pair-verse:hover {
    background: var(--bg-tertiary);
}

.proximity-pair-connector {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.proximity-pair-connector .connector-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.proximity-pair-connector .connector-icon {
    color: var(--sapphire-blue);
    font-size: 1.2rem;
    padding: 0 8px;
    opacity: 0.7;
}

/* 다크 모드 */
.dark-mode .proximity-summary-header {
    background: linear-gradient(135deg, #1a3a6e 0%, #0d2a50 100%);
}

.dark-mode .proximity-group-card {
    background: var(--card-bg);
    border-color: #444;
}

.dark-mode .proximity-group-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    border-color: #444;
}

.dark-mode .proximity-group-distance {
    background: #333;
    border-color: #555;
}

.dark-mode .proximity-pair-verse:hover {
    background: #2a2a2a;
}

/* 이미지 편집 스타일 */
.une-editor-content img,
[class*="fullscreen-note-editor"] img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
    cursor: pointer;
}

.une-image-selected {
    outline: 3px solid var(--sapphire-blue);
    outline-offset: 2px;
}

.une-image-wrapper {
    display: inline-block;
    position: relative;
}

.une-image-wrapper img {
    max-width: 100%;
    height: auto;
}

.une-image-resize-handle {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 40px;
    background: var(--sapphire-blue);
    border-radius: 50%;
    cursor: nwse-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

.une-image-resize-handle .material-icons {
    font-size: 16px;
    color: white;
    transform: rotate(90deg);
}

/* 이미지 컨텍스트 메뉴 */
.une-image-context-menu {
    position: fixed;
    z-index: 10001;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    padding: 6px 0;
    animation: fadeInScale 0.15s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.une-context-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.95rem;
    transition: background 0.15s;
}

.une-context-item:hover {
    background: var(--bg-tertiary);
}

.une-context-item .material-icons {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.une-context-item.une-context-danger {
    color: #dc3545;
}

.une-context-item.une-context-danger .material-icons {
    color: #dc3545;
}

.une-context-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* 이미지 자르기 모달 */
.une-crop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.une-crop-modal {
    background: var(--bg-main);
    border-radius: 12px;
    width: 90vw;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.une-crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.une-crop-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.une-crop-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}

.une-crop-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.une-crop-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.une-crop-selection {
    position: absolute;
    border: 2px dashed white;
    background: rgba(255,255,255,0.1);
    cursor: col-resize;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}

.une-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.une-crop-cancel,
.une-crop-apply {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
}

.une-crop-cancel {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.une-crop-apply {
    background: var(--sapphire-blue);
    color: white;
}

/* 다크 모드 */
.dark-mode .une-image-context-menu {
    background: #2a2a2a;
    border-color: #444;
}

.dark-mode .une-crop-modal {
    background: #2a2a2a;
}

.dark-mode .une-crop-header,
.dark-mode .une-crop-actions {
    border-color: #444;
}

.dark-mode .une-crop-cancel {
    background: #444;
}

/* ==================== 원전분해 TTS 스타일 ==================== */
.analysis-tts-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.25);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.analysis-tts-btn:hover {
    background: rgba(79, 209, 197, 0.25);
    transform: scale(1.1);
}

.analysis-tts-btn.playing {
    background: var(--primary-color, #4FD1C5);
    color: white;
    animation: tts-pulse 1s infinite;
}

@keyframes tts-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 197, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(79, 209, 197, 0); }
}

.analysis-tts-btn .material-icons {
    font-size: 18px;
}

.analysis-tts-speed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.15);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
    margin-left: 4px;
    padding: 0 10px;
}

.analysis-tts-speed-btn:hover {
    background: rgba(79, 209, 197, 0.1);
    color: var(--primary-color, #4FD1C5);
    border-color: var(--primary-color, #4FD1C5);
}

.analysis-tts-speed-popup {
    background: var(--card-bg, #1a1a2e);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 180px;
}

.speed-popup-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #a0aec0);
    margin-bottom: 10px;
    text-align: center;
}

.speed-popup-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--text-secondary, #a0aec0);
}

.speed-popup-slider .speed-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}

.speed-popup-slider .speed-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-color, #4FD1C5);
    border-radius: 50%;
    cursor: pointer;
}

.speed-popup-slider .speed-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-color, #4FD1C5);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.speed-popup-value {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #4FD1C5);
    margin-bottom: 10px;
}

/* Light mode */
body.light-mode .analysis-tts-btn {
    background: rgba(15, 82, 186, 0.2);
    border-color: rgba(15, 82, 186, 0.4);
    color: #0F52BA;
}

body.light-mode .analysis-tts-btn:hover {
    background: rgba(15, 82, 186, 0.2);
}

body.light-mode .analysis-tts-btn.playing {
    background: #0F52BA;
    color: white;
}

body.light-mode .analysis-tts-speed-popup {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

body.light-mode .speed-popup-header {
    color: #64748b;
}

body.light-mode .speed-popup-value {
    color: #0F52BA;
}

body.light-mode .speed-popup-slider .speed-range {
    background: #e2e8f0;
}

body.light-mode .speed-popup-slider .speed-range::-webkit-slider-thumb {
    background: #0F52BA;
}

/* 분해 패널 헤더 TTS 컨테이너 */
.analysis-tts-controls {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 4px;
}
/* TTS 음성 선택 토글 */
.tts-voice-toggle {
    display: flex;
    background: rgba(79, 209, 197, 0.15);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(79, 209, 197, 0.4);
}

.tts-voice-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-color, #4FD1C5);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tts-voice-btn:hover {
    background: rgba(255,255,255,0.1);
}

.tts-voice-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}

body.light-mode .tts-voice-toggle {
    background: rgba(15, 82, 186, 0.1);
    border-color: rgba(15, 82, 186, 0.3);
}

body.light-mode .tts-voice-btn {
    color: #0F52BA;
}

body.light-mode .tts-voice-btn:hover {
    background: rgba(0,0,0,0.1);
}

body.light-mode .tts-voice-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}


/* === TTS 인라인 버튼 (헤더 영역) === */
.analysis-tts-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.analysis-tts-inline .tts-voice-toggle {
    display: flex;
    background: rgba(79, 209, 197, 0.15);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(79, 209, 197, 0.4);
}

.analysis-tts-inline .tts-voice-btn {
    padding: 3px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-color, #4FD1C5);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analysis-tts-inline .tts-voice-btn.active {
    background: var(--primary-color, #4FD1C5);
    color: white;
}

.analysis-tts-inline .analysis-tts-speed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.15);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    padding: 0 8px;
}

.analysis-tts-inline .analysis-tts-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.25);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.analysis-tts-inline .analysis-tts-btn .material-icons {
    font-size: 16px;
}

body.light-mode .analysis-tts-inline .tts-voice-toggle {
    background: rgba(15, 82, 186, 0.1);
    border-color: rgba(15, 82, 186, 0.3);
}

body.light-mode .analysis-tts-inline .tts-voice-btn {
    color: #0F52BA;
}

body.light-mode .analysis-tts-inline .tts-voice-btn.active {
    background: #0F52BA;
    color: white;
}

body.light-mode .analysis-tts-inline .analysis-tts-speed-btn {
    border-color: rgba(15, 82, 186, 0.4);
    background: rgba(15, 82, 186, 0.1);
    color: #0F52BA;
}

body.light-mode .analysis-tts-inline .analysis-tts-btn {
    border-color: rgba(15, 82, 186, 0.4);
    background: rgba(15, 82, 186, 0.2);
    color: #0F52BA;
}
/* === ub2e4uc911ucc3d ud5e4ub354 TTS uc778ub77cuc778 ubc84ud2bc === */
.analysis-tts-inline-multi {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
.analysis-tts-inline-multi .tts-voice-toggle {
    display: flex;
    background: rgba(79, 209, 197, 0.15);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(79, 209, 197, 0.4);
}
.analysis-tts-inline-multi .tts-voice-btn {
    padding: 2px 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-color, #4FD1C5);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.analysis-tts-inline-multi .tts-voice-btn.active {
    background: var(--primary-color, #4FD1C5);
    color: white;
}
.analysis-tts-inline-multi .analysis-tts-speed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.15);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: all 0.2s ease;
    padding: 0 6px;
}
.analysis-tts-inline-multi .analysis-tts-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(79, 209, 197, 0.5);
    background: rgba(79, 209, 197, 0.25);
    color: var(--primary-color, #4FD1C5);
    cursor: pointer;
    transition: all 0.2s ease;
}
.analysis-tts-inline-multi .analysis-tts-btn .material-icons {
    font-size: 14px;
}
body.light-mode .analysis-tts-inline-multi .tts-voice-toggle {
    background: rgba(15, 82, 186, 0.1);
    border-color: rgba(15, 82, 186, 0.3);
}
body.light-mode .analysis-tts-inline-multi .tts-voice-btn {
    color: #0F52BA;
}
body.light-mode .analysis-tts-inline-multi .tts-voice-btn.active {
    background: #0F52BA;
    color: white;
}
body.light-mode .analysis-tts-inline-multi .analysis-tts-speed-btn {
    border-color: rgba(15, 82, 186, 0.4);
    background: rgba(15, 82, 186, 0.1);
    color: #0F52BA;
}
body.light-mode .analysis-tts-inline-multi .analysis-tts-btn {
    border-color: rgba(15, 82, 186, 0.4);
    background: rgba(15, 82, 186, 0.2);
    color: #0F52BA;
}
/* === ub2e4uc911ucc3d ud5e4ub354 TTS uc778ub77cuc778 ubc84ud2bc ub05d === */
/* === TTS 인라인 버튼 끝 === */

/* ==================== 원전분해 TTS 스타일 끝 ==================== */

/* 원전분해 레이아웃 - 분석 패널 카드 영역 높이 보장 */
/* === 원전분해 레이아웃 - 콘텐츠 기반 높이 (빈 공간 제거) === */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .multi-panel-content,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .multi-panel-content {
    height: auto !important;
    min-height: auto !important;
    overflow: visible;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-panel-content,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-panel-content {
    height: auto !important;
    min-height: auto !important;
    overflow: visible;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-panel-container,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-panel-container {
    height: auto !important;
    min-height: auto !important;
    overflow: visible;
}

.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-horizontal-scroll-wrapper {
    min-height: auto !important;
    height: auto !important;
}

/* 분석 카드 컨테이너 - 콘텐츠 기반 높이 */
.multi-panel-container.layout-analysis-2 > .multi-panel:first-child .analysis-cards-container,
.multi-panel-container.layout-analysis-3 > .multi-panel:first-child .analysis-cards-container {
    min-height: auto !important;
}

/* 야간모드 1x2, 2x1 아이콘 */
.dark-mode .layout-modal-item .layout-icon.icon-1x2 > .left-panel,
.dark-mode .layout-modal-item .layout-icon.icon-1x2 > .right-stack > span,
.dark-mode .layout-modal-item .layout-icon.icon-2x1 > .left-stack > span,
.dark-mode .layout-modal-item .layout-icon.icon-2x1 > .right-panel,
body.night-mode .layout-modal-item .layout-icon.icon-1x2 > .left-panel,
body.night-mode .layout-modal-item .layout-icon.icon-1x2 > .right-stack > span,
body.night-mode .layout-modal-item .layout-icon.icon-2x1 > .left-stack > span,
body.night-mode .layout-modal-item .layout-icon.icon-2x1 > .right-panel {
    background: #e0e0e0;
}

/* ==================== 버전 약어 표시 스타일 ==================== */
/* 헤더의 버전 토글 */
.version-abbr-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}

.version-abbr-toggle-label {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 700;
}

/* 위치 선택 버튼 */
.version-abbr-pos-btn {
    padding: 8px 14px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
    text-align: center;
}

.version-abbr-pos-btn:hover {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.05);
}

.version-abbr-pos-btn.active {
    border-color: var(--primary-color);
    background: rgba(15, 82, 186, 0.1);
    box-shadow: 0 2px 8px rgba(15, 82, 186, 0.2);
}

/* 약어 배지 - 절 번호 앞 */
.version-abbr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #0F52BA;
    background: rgba(15, 82, 186, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    line-height: 1.2;
}

/* 약어 - 줄 끝 */
.version-abbr-end {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    margin-left: auto;
    padding-left: 12px;
    font-style: italic;
}

/* 약어 - 절 번호 위 */
.version-abbr-above {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    color: #0F52BA;
    background: rgba(15, 82, 186, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 2px;
    text-align: center;
    width: fit-content;
}

/* 야간 모드 */
.night-mode .version-abbr-badge {
    color: #7eb8ff;
    background: rgba(126, 184, 255, 0.15);
}

.night-mode .version-abbr-end {
    color: #aaa;
}

.night-mode .version-abbr-above {
    color: #7eb8ff;
    background: rgba(126, 184, 255, 0.12);
}

.night-mode .version-abbr-pos-btn {
    background: var(--bg-section);
    border-color: #555;
}

.night-mode .version-abbr-pos-btn:hover,
.night-mode .version-abbr-pos-btn.active {
    border-color: #7eb8ff;
    background: rgba(126, 184, 255, 0.1);
}

/* verse-line에서 줄 끝 표시를 위한 flex 레이아웃 */
.verse-line.has-abbr-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 절 번호 위 표시를 위한 컨테이너 */
.verse-num-with-abbr {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* ==================== 버전 약어 표시 스타일 끝 ==================== */

/* ==================== 토글 스위치 스타일 ==================== */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch.small {
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-switch .toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch.small .toggle-slider:before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch.small input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* 헤더 내 버전 토글 래퍼 - flex gap 사용 */
.view-settings-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-settings-popup-header h3 {
    margin: 0;
    flex-shrink: 0;
}

.version-abbr-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
}

.version-abbr-toggle-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.view-settings-popup-header .view-settings-popup-close {
    flex-shrink: 0;
}
/* ==================== 토글 스위치 스타일 끝 ==================== */

/* ==================== UnifiedViewSettings 버전 토글 스타일 ==================== */
.uvs-version-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.uvs-version-toggle-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

/* 위치 선택 섹션 */
.uvs-version-position-section {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-section, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    flex-wrap: wrap;
}

.uvs-version-pos-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    font-weight: 700;
}

.uvs-version-pos-btn {
    padding: 6px 12px;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--bg-color, #fff);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
    color: var(--text-color, #333);
    min-width: 60px;
    text-align: center;
    line-height: 1.3;
}

.uvs-version-pos-btn:hover {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.05);
}

.uvs-version-pos-btn.active {
    border-color: var(--primary-color, #0F52BA);
    background: rgba(15, 82, 186, 0.1);
    color: var(--primary-color, #0F52BA);
    font-weight: 600;
}

/* 야간 모드 */
.night-mode .uvs-version-position-section {
    background: #2a2a3a;
    border-bottom-color: #444;
}

.night-mode .uvs-version-pos-btn {
    background: #333;
    border-color: #555;
    color: #ddd;
}

.night-mode .uvs-version-pos-btn:hover,
.night-mode .uvs-version-pos-btn.active {
    border-color: #7eb8ff;
    background: rgba(126, 184, 255, 0.15);
    color: #7eb8ff;
}
/* ==================== UnifiedViewSettings 버전 토글 스타일 끝 ==================== */

/* ==================== UVS 헤더 토글 스위치 개선 ==================== */
.uvs-header .toggle-switch {
    width: 42px;
    height: 22px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.uvs-header .toggle-switch .toggle-slider {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 22px;
}

.uvs-header .toggle-switch .toggle-slider::before {
    width: 16px;
    height: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.uvs-header .toggle-switch input:checked + .toggle-slider {
    background: rgba(255, 255, 255, 0.5);
}

.uvs-header .toggle-switch input:checked + .toggle-slider::before {
    background: #2ecc71;
    transform: translateX(20px);
}

/* 헤더 토글 래퍼 개선 */
.uvs-version-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.uvs-version-toggle-label {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
/* ==================== UVS 헤더 토글 스위치 개선 끝 ==================== */

/* ==================== UVS 토글 스위치 강화 (재정의) ==================== */
.uvs-header .uvs-version-toggle-wrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 16px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15)) !important;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.uvs-header .uvs-version-toggle-label {
    font-size: 0.85rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.uvs-header .toggle-switch.small {
    width: 44px !important;
    height: 24px !important;
    background: rgba(120, 120, 140, 0.6) !important;
    border-radius: 24px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    position: relative;
}

.uvs-header .toggle-switch.small .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(120, 120, 140, 0.6);
    border-radius: 24px;
    transition: background 0.3s;
}

.uvs-header .toggle-switch.small .toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px !important;
    height: 18px !important;
    left: 2px;
    bottom: 1px;
    background: #fff !important;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.uvs-header .toggle-switch.small input:checked + .toggle-slider {
    background: #4CAF50 !important;
}

.uvs-header .toggle-switch.small input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: #fff !important;
}
/* ==================== UVS 토글 스위치 강화 끝 ==================== */

/* ==================== UVS 탭 전환 깜빡임 방지 ==================== */
.uvs-tab-content {
    opacity: 1;
    transition: none !important;
}

.uvs-tab-content[style*="display: none"] {
    display: none !important;
}

.uvs-tab-content[style*="display: block"] {
    display: block !important;
}

/* 탭 콘텐츠 내 요소들 깜빡임 방지 */
.uvs-tab-content * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 탭 전환 시 레이아웃 안정화 */
.uvs-body {
    contain: layout style;
}

.uvs-mode-tabs {
    contain: layout style;
}
/* ==================== UVS 탭 전환 깜빡임 방지 끝 ==================== */

/* 근접 검색 드롭다운 스타일 */
.search-operator-range-select.proximity-styled {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: var(--sapphire-blue, #0F52BA);
    font-weight: 600;
    border: 1px solid rgba(15, 82, 186, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}

.dark-mode .search-operator-range-select.proximity-styled {
    background: linear-gradient(135deg, rgba(15, 82, 186, 0.3) 0%, rgba(15, 82, 186, 0.15) 100%);
    color: #64b5f6;
    border-color: rgba(100, 181, 246, 0.3);
}

/* ==================== Version-Specific Font Settings ==================== */
/* Apply version-specific CSS variables to verse text elements */

/* Korean versions */
.verse-line[data-version="krv"],
.verse-line.version-krv,
.version-krv.verse-text,
[data-version="krv"] .verse-text {
    font-size: var(--uvs-krv-font-size, var(--uvs-korean-font-size, 18px)) !important;
    font-family: var(--uvs-krv-font-family, var(--uvs-korean-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--uvs-krv-font-color, var(--uvs-korean-font-color, #333)) !important;
}

.verse-line[data-version="nkrv"],
.verse-line.version-nkrv,
.version-nkrv.verse-text,
[data-version="nkrv"] .verse-text {
    font-size: var(--uvs-nkrv-font-size, var(--uvs-korean-font-size, 18px)) !important;
    font-family: var(--uvs-nkrv-font-family, var(--uvs-korean-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--uvs-nkrv-font-color, var(--uvs-korean-font-color, #333)) !important;
}

/* English versions */
.verse-line[data-version="kjv"],
.verse-line.version-kjv,
.version-kjv.verse-text,
[data-version="kjv"] .verse-text {
    font-size: var(--uvs-kjv-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-kjv-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-kjv-font-color, var(--uvs-english-font-color, #333)) !important;
}

.verse-line[data-version="bsb"],
.verse-line.version-bsb,
.version-bsb.verse-text,
[data-version="bsb"] .verse-text {
    font-size: var(--uvs-bsb-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-bsb-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-bsb-font-color, var(--uvs-english-font-color, #333)) !important;
}

.verse-line[data-version="web"],
.verse-line.version-web,
.version-web.verse-text,
[data-version="web"] .verse-text {
    font-size: var(--uvs-web-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-web-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-web-font-color, var(--uvs-english-font-color, #333)) !important;
}

/* Hebrew versions */
.verse-line[data-version="wlc"],
.verse-line.version-wlc,
.version-wlc.verse-text,
.version-wlc .hebrew-text,
[data-version="wlc"] .verse-text,
[data-version="wlc"] .hebrew-text,
.hebrew-text[data-version="wlc"] {
    font-size: var(--uvs-wlc-font-size, var(--uvs-hebrew-font-size, 20px)) !important;
    font-family: var(--uvs-wlc-font-family, var(--uvs-hebrew-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--uvs-wlc-font-color, var(--uvs-hebrew-font-color, #333)) !important;
}

.verse-line[data-version="aleppo"],
.verse-line.version-aleppo,
.version-aleppo.verse-text,
.version-aleppo .hebrew-text,
[data-version="aleppo"] .verse-text,
[data-version="aleppo"] .hebrew-text,
.hebrew-text[data-version="aleppo"],
.aleppo-text {
    font-size: var(--uvs-aleppo-font-size, var(--uvs-hebrew-font-size, 20px)) !important;
    font-family: var(--uvs-aleppo-font-family, var(--uvs-hebrew-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--uvs-aleppo-font-color, var(--uvs-hebrew-font-color, #333)) !important;
}

.verse-line[data-version="dhnt"],
.verse-line.version-dhnt,
.version-dhnt.verse-text,
.version-dhnt .hebrew-text,
[data-version="dhnt"] .verse-text,
[data-version="dhnt"] .hebrew-text,
.hebrew-text[data-version="dhnt"],
.delitzsch-text {
    font-size: var(--uvs-dhnt-font-size, var(--uvs-hebrew-font-size, 20px)) !important;
    font-family: var(--uvs-dhnt-font-family, var(--uvs-hebrew-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--uvs-dhnt-font-color, var(--uvs-hebrew-font-color, #333)) !important;
}

/* Greek versions */
.verse-line[data-version="sbl"],
.verse-line.version-sbl,
.version-sbl.verse-text,
.version-sbl .greek-text,
[data-version="sbl"] .verse-text,
[data-version="sbl"] .greek-text,
.greek-text[data-version="sbl"] {
    font-size: var(--uvs-sbl-font-size, var(--uvs-greek-font-size, 20px)) !important;
    font-family: var(--uvs-sbl-font-family, var(--uvs-greek-font-family, "Gentium Plus", serif)) !important;
    color: var(--uvs-sbl-font-color, var(--uvs-greek-font-color, #333)) !important;
}

.verse-line[data-version="tr"],
.verse-line.version-tr,
.version-tr.verse-text,
.version-tr .greek-text,
[data-version="tr"] .verse-text,
[data-version="tr"] .greek-text,
.greek-text[data-version="tr"],
.tr-text {
    font-size: var(--uvs-tr-font-size, var(--uvs-greek-font-size, 20px)) !important;
    font-family: var(--uvs-tr-font-family, var(--uvs-greek-font-family, "Gentium Plus", serif)) !important;
    color: var(--uvs-tr-font-color, var(--uvs-greek-font-color, #333)) !important;
}

.verse-line[data-version="lxx"],
.verse-line.version-lxx,
.version-lxx.verse-text,
.version-lxx .greek-text,
[data-version="lxx"] .verse-text,
[data-version="lxx"] .greek-text,
.greek-text[data-version="lxx"],
.lxx-text {
    font-size: var(--uvs-lxx-font-size, var(--uvs-greek-font-size, 20px)) !important;
    font-family: var(--uvs-lxx-font-family, var(--uvs-greek-font-family, "Gentium Plus", serif)) !important;
    color: var(--uvs-lxx-font-color, var(--uvs-greek-font-color, #333)) !important;
}
/* ==================== Version-Specific Font Settings End ==================== */

/* ==================== Parallel Mode Font Settings ==================== */
/* 병렬 모드에서는 --uvs-parallel-{version}-font-size 사용 (단일 패널과 완전 격리) */
[data-context="parallel"] .verse-line.version-krv,
[data-context="parallel"] .version-krv.verse-text {
    font-size: var(--uvs-parallel-krv-font-size, 18px) !important;
    font-family: var(--uvs-parallel-krv-font-family, "Noto Sans KR", sans-serif) !important;
    color: var(--uvs-parallel-krv-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-nkrv,
[data-context="parallel"] .version-nkrv.verse-text {
    font-size: var(--uvs-parallel-nkrv-font-size, 18px) !important;
    font-family: var(--uvs-parallel-nkrv-font-family, "Noto Sans KR", sans-serif) !important;
    color: var(--uvs-parallel-nkrv-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-kjv,
[data-context="parallel"] .version-kjv.verse-text {
    font-size: var(--uvs-parallel-kjv-font-size, 18px) !important;
    font-family: var(--uvs-parallel-kjv-font-family, "Noto Sans", sans-serif) !important;
    color: var(--uvs-parallel-kjv-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-bsb,
[data-context="parallel"] .version-bsb.verse-text {
    font-size: var(--uvs-parallel-bsb-font-size, 18px) !important;
    font-family: var(--uvs-parallel-bsb-font-family, "Noto Sans", sans-serif) !important;
    color: var(--uvs-parallel-bsb-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-web,
[data-context="parallel"] .version-web.verse-text {
    font-size: var(--uvs-parallel-web-font-size, 18px) !important;
    font-family: var(--uvs-parallel-web-font-family, "Noto Sans", sans-serif) !important;
    color: var(--uvs-parallel-web-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-wlc,
[data-context="parallel"] .version-wlc.verse-text,
[data-context="parallel"] .hebrew-text:not(.aleppo-text):not(.delitzsch-text) {
    font-size: var(--uvs-parallel-wlc-font-size, 20px) !important;
    font-family: var(--uvs-parallel-wlc-font-family, "Ezra SIL SR", serif) !important;
    color: var(--uvs-parallel-wlc-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-aleppo,
[data-context="parallel"] .version-aleppo.verse-text,
[data-context="parallel"] .aleppo-text {
    font-size: var(--uvs-parallel-aleppo-font-size, 20px) !important;
    font-family: var(--uvs-parallel-aleppo-font-family, "Ezra SIL SR", serif) !important;
    color: var(--uvs-parallel-aleppo-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-dhnt,
[data-context="parallel"] .version-dhnt.verse-text,
[data-context="parallel"] .delitzsch-text {
    font-size: var(--uvs-parallel-dhnt-font-size, 20px) !important;
    font-family: var(--uvs-parallel-dhnt-font-family, "Ezra SIL SR", serif) !important;
    color: var(--uvs-parallel-dhnt-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-sbl,
[data-context="parallel"] .version-sbl.verse-text,
[data-context="parallel"] .greek-text:not(.lxx-text):not(.tr-text) {
    font-size: var(--uvs-parallel-sbl-font-size, 20px) !important;
    font-family: var(--uvs-parallel-sbl-font-family, "Gentium Plus", serif) !important;
    color: var(--uvs-parallel-sbl-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-tr,
[data-context="parallel"] .version-tr.verse-text,
[data-context="parallel"] .tr-text {
    font-size: var(--uvs-parallel-tr-font-size, 20px) !important;
    font-family: var(--uvs-parallel-tr-font-family, "Gentium Plus", serif) !important;
    color: var(--uvs-parallel-tr-font-color, #333) !important;
}

[data-context="parallel"] .verse-line.version-lxx,
[data-context="parallel"] .version-lxx.verse-text,
[data-context="parallel"] .lxx-text {
    font-size: var(--uvs-parallel-lxx-font-size, 20px) !important;
    font-family: var(--uvs-parallel-lxx-font-family, "Gentium Plus", serif) !important;
    color: var(--uvs-parallel-lxx-font-color, #333) !important;
}
/* Parallel mode alias selectors (mt→wlc, na28→sbl, delitzsch→dhnt, textus_receptus→tr) */
[data-context="parallel"] .verse-line[data-version="mt"],
[data-context="parallel"] .version-mt.verse-text,
[data-context="parallel"] [data-version="mt"] {
    font-size: var(--uvs-parallel-wlc-font-size, 20px) !important;
    font-family: var(--uvs-parallel-wlc-font-family, "Ezra SIL SR", serif) !important;
    color: var(--uvs-parallel-wlc-font-color, #333) !important;
}

[data-context="parallel"] .verse-line[data-version="na28"],
[data-context="parallel"] .version-na28.verse-text,
[data-context="parallel"] [data-version="na28"] {
    font-size: var(--uvs-parallel-sbl-font-size, 20px) !important;
    font-family: var(--uvs-parallel-sbl-font-family, "Gentium Plus", serif) !important;
    color: var(--uvs-parallel-sbl-font-color, #333) !important;
}

[data-context="parallel"] .verse-line[data-version="delitzsch"],
[data-context="parallel"] .version-delitzsch.verse-text,
[data-context="parallel"] [data-version="delitzsch"] {
    font-size: var(--uvs-parallel-dhnt-font-size, 20px) !important;
    font-family: var(--uvs-parallel-dhnt-font-family, "Ezra SIL SR", serif) !important;
    color: var(--uvs-parallel-dhnt-font-color, #333) !important;
}

[data-context="parallel"] .verse-line[data-version="textus_receptus"],
[data-context="parallel"] .version-textus_receptus.verse-text,
[data-context="parallel"] [data-version="textus_receptus"] {
    font-size: var(--uvs-parallel-tr-font-size, 20px) !important;
    font-family: var(--uvs-parallel-tr-font-family, "Gentium Plus", serif) !important;
    color: var(--uvs-parallel-tr-font-color, #333) !important;
}
/* ==================== Parallel Mode Font Settings End ==================== */

/* ==================== Panel-Scoped Font Settings (660-case isolation) ==================== */
/* Panel containers with data-bvs-panel attribute use local CSS variables */
/* Each panel can have independent font/size/color settings per version */

/* When --bvs-* variables are set on a panel container, they override the global --uvs-* variables */
[data-bvs-panel] .verse-line.version-krv,
[data-bvs-panel] .version-krv.verse-text,
[data-bvs-panel] .korean-verse.version-krv {
    font-size: var(--bvs-krv-font-size, var(--uvs-krv-font-size, 18px)) !important;
    font-family: var(--bvs-krv-font-family, var(--uvs-krv-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--bvs-krv-font-color, var(--uvs-krv-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-nkrv,
[data-bvs-panel] .version-nkrv.verse-text,
[data-bvs-panel] .korean-verse.version-nkrv {
    font-size: var(--bvs-nkrv-font-size, var(--uvs-nkrv-font-size, 18px)) !important;
    font-family: var(--bvs-nkrv-font-family, var(--uvs-nkrv-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--bvs-nkrv-font-color, var(--uvs-nkrv-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-kjv,
[data-bvs-panel] .version-kjv.verse-text,
[data-bvs-panel] .english-verse.version-kjv {
    font-size: var(--bvs-kjv-font-size, var(--uvs-kjv-font-size, 18px)) !important;
    font-family: var(--bvs-kjv-font-family, var(--uvs-kjv-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--bvs-kjv-font-color, var(--uvs-kjv-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-bsb,
[data-bvs-panel] .version-bsb.verse-text,
[data-bvs-panel] .english-verse.version-bsb {
    font-size: var(--bvs-bsb-font-size, var(--uvs-bsb-font-size, 18px)) !important;
    font-family: var(--bvs-bsb-font-family, var(--uvs-bsb-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--bvs-bsb-font-color, var(--uvs-bsb-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-web,
[data-bvs-panel] .version-web.verse-text,
[data-bvs-panel] .english-verse.version-web {
    font-size: var(--bvs-web-font-size, var(--uvs-web-font-size, 18px)) !important;
    font-family: var(--bvs-web-font-family, var(--uvs-web-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--bvs-web-font-color, var(--uvs-web-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-wlc,
[data-bvs-panel] .version-wlc.verse-text,
[data-bvs-panel] .hebrew-text:not(.aleppo-text):not(.delitzsch-text) {
    font-size: var(--bvs-wlc-font-size, var(--uvs-wlc-font-size, 20px)) !important;
    font-family: var(--bvs-wlc-font-family, var(--uvs-wlc-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--bvs-wlc-font-color, var(--uvs-wlc-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-aleppo,
[data-bvs-panel] .version-aleppo.verse-text,
[data-bvs-panel] .aleppo-text {
    font-size: var(--bvs-aleppo-font-size, var(--uvs-aleppo-font-size, 20px)) !important;
    font-family: var(--bvs-aleppo-font-family, var(--uvs-aleppo-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--bvs-aleppo-font-color, var(--uvs-aleppo-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-dhnt,
[data-bvs-panel] .version-dhnt.verse-text,
[data-bvs-panel] .delitzsch-text {
    font-size: var(--bvs-dhnt-font-size, var(--uvs-dhnt-font-size, 20px)) !important;
    font-family: var(--bvs-dhnt-font-family, var(--uvs-dhnt-font-family, "Ezra SIL SR", serif)) !important;
    color: var(--bvs-dhnt-font-color, var(--uvs-dhnt-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-sbl,
[data-bvs-panel] .version-sbl.verse-text,
[data-bvs-panel] .greek-text:not(.lxx-text):not(.tr-text) {
    font-size: var(--bvs-sbl-font-size, var(--uvs-sbl-font-size, 20px)) !important;
    font-family: var(--bvs-sbl-font-family, var(--uvs-sbl-font-family, "Gentium Plus", serif)) !important;
    color: var(--bvs-sbl-font-color, var(--uvs-sbl-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-tr,
[data-bvs-panel] .version-tr.verse-text,
[data-bvs-panel] .tr-text {
    font-size: var(--bvs-tr-font-size, var(--uvs-tr-font-size, 20px)) !important;
    font-family: var(--bvs-tr-font-family, var(--uvs-tr-font-family, "Gentium Plus", serif)) !important;
    color: var(--bvs-tr-font-color, var(--uvs-tr-font-color, #333)) !important;
}

[data-bvs-panel] .verse-line.version-lxx,
[data-bvs-panel] .version-lxx.verse-text,
[data-bvs-panel] .lxx-text {
    font-size: var(--bvs-lxx-font-size, var(--uvs-lxx-font-size, 20px)) !important;
    font-family: var(--bvs-lxx-font-family, var(--uvs-lxx-font-family, "Gentium Plus", serif)) !important;
    color: var(--bvs-lxx-font-color, var(--uvs-lxx-font-color, #333)) !important;
}
/* ==================== Panel-Scoped Font Settings End ==================== */

/* Multi-panel version-specific selectors (korean-verse, english-verse containers) */
.korean-verse.version-krv,
.korean-verse[data-version="krv"] {
    font-size: var(--uvs-krv-font-size, var(--uvs-korean-font-size, 18px)) !important;
    font-family: var(--uvs-krv-font-family, var(--uvs-korean-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--uvs-krv-font-color, var(--uvs-korean-font-color, #333)) !important;
}

.korean-verse.version-nkrv,
.korean-verse[data-version="nkrv"] {
    font-size: var(--uvs-nkrv-font-size, var(--uvs-korean-font-size, 18px)) !important;
    font-family: var(--uvs-nkrv-font-family, var(--uvs-korean-font-family, "Noto Sans KR", sans-serif)) !important;
    color: var(--uvs-nkrv-font-color, var(--uvs-korean-font-color, #333)) !important;
}

.english-verse.version-kjv,
.english-verse[data-version="kjv"] {
    font-size: var(--uvs-kjv-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-kjv-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-kjv-font-color, var(--uvs-english-font-color, #333)) !important;
}

.english-verse.version-bsb,
.english-verse[data-version="bsb"] {
    font-size: var(--uvs-bsb-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-bsb-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-bsb-font-color, var(--uvs-english-font-color, #333)) !important;
}

.english-verse.version-web,
.english-verse[data-version="web"] {
    font-size: var(--uvs-web-font-size, var(--uvs-english-font-size, 18px)) !important;
    font-family: var(--uvs-web-font-family, var(--uvs-english-font-family, "Noto Sans", sans-serif)) !important;
    color: var(--uvs-web-font-color, var(--uvs-english-font-color, #333)) !important;
}

/* Galaxy Fold 기기별 줌 스타일 비활성화 - 표준 반응형 사용 */
/* body.fold-zoomed, html.fold-narrow 클래스는 더 이상 사용하지 않음 */

/* ========================================
   좁은 화면 표준 반응형 스타일 (430px 이하)
   모든 기기에서 동일한 표준 반응형 디자인 사용
   ======================================== */
@media screen and (max-width: 430px) {
    /* 좁은 화면 표준 반응형 스타일 - 기기별 특수 처리 없음 */
    /* 기본 폰트 크기 - 표준 크기 사용 */
    html {
        font-size: 16px !important;
    }
    
    body {
        font-size: 1rem !important;
    }
    
    /* 절 텍스트 크기 - 표준 크기 */
    .verse-item,
    .verse-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .verse-number {
        font-size: 0.85rem !important;
        min-width: 24px !important;
    }
    
    /* 네비게이션 바 */
    .top-nav,
    .nav-bar,
    .bottom-nav {
        font-size: 1rem !important;
    }
    
    .nav-icons-group .material-icons {
        font-size: 22px !important;
    }
    
    /* 헤더 및 타이틀 */
    .chapter-title,
    .panel-header,
    .single-panel-title {
        font-size: 1rem !important;
    }
    
    /* 버튼 크기 - 터치 타겟 최소 44px 유지 */
    button, 
    .btn,
    select {
        font-size: 0.9rem !important;
        padding: 10px 12px !important;
        min-height: 44px !important;
    }
    
    /* 단일창 패널 타입 버튼 - 다중창과 동일하게 */
    .single-panel-type-btn {
        padding: 3px 6px !important;
        font-size: 0.75rem !important;
        gap: 4px !important;
        min-width: 40px !important;
    }
    
    .single-panel-icon {
        font-size: 0.85rem !important;
    }
    
    .single-panel-name {
        white-space: nowrap !important;
    }
    /* 드롭다운이 잘리지 않도록 */
    .single-panel-header {
    justify-content: flex-start;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }
    
    /* 탭 크기 */
    .tab-btn,
    .version-tab {
        font-size: 0.95rem !important;
        padding: 8px 12px !important;
    }
    
    /* 모달 컨텐츠 */
    .modal-content {
        font-size: 1.05rem !important;
    }
    
    /* 아이콘 크기 */
    .material-icons {
        font-size: 24px !important;
    }
    
    /* 드롭다운 */
    .dropdown-item,
    .menu-item {
        font-size: 1rem !important;
        padding: 12px 16px !important;
    }
}

/* TTS 통합 버튼 스타일 */
.analysis-tts-unified-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 4px;
}

.analysis-tts-unified-btn:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

.analysis-tts-unified-btn .material-icons {
    color: var(--text-color, #333);
}

.analysis-tts-unified-btn:hover .material-icons {
    color: white;
}

/* TTS 플레이어 팝업 */
.tts-player-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 8px 12px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    width: 33vw;
    min-width: 160px;
    max-width: 260px;
}

.tts-player-popup.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.tts-player-popup.dragging {
    transition: none;
}

.tts-player-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color, #333);
    cursor: move;
    padding: 4px 0;
    border-radius: 8px 8px 0 0;
}

.tts-player-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-sub, #666);
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tts-player-close:hover {
    color: var(--text-color, #333);
}

.tts-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.tts-player-popup .tts-voice-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-section, #f5f5f5);
    border-radius: 6px;
    padding: 3px;
}

.tts-player-popup .tts-voice-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tts-player-popup .tts-voice-btn.active {
    background: var(--primary-color, #0F52BA);
    color: white;
}

.tts-speed-control {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-section, #f5f5f5);
    border-radius: 6px;
    padding: 4px;
}

.tts-speed-control button {
    width: 28px;
    height: 40px;
    border: none;
    background: var(--card-bg, #fff);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tts-speed-control button:hover {
    background: var(--hover-bg, #eee);
}

.tts-speed-display {
    min-width: 50px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.tts-stop-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #e53935;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tts-stop-btn:hover {
    background: #c62828;
}

/* 야간 모드 */
body.night-mode .tts-player-popup {
    background: var(--card-bg, #2d2d2d);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

body.night-mode .tts-speed-control,
body.night-mode .tts-player-popup .tts-voice-toggle {
    background: rgba(255,255,255,0.08);
}

body.night-mode .tts-speed-control button {
    background: var(--card-bg, #3d3d3d);
}

/* 원어사전 헤더 레이아웃 - 사전편집(좌), 음역(중), 한/En(우) */
.lexicon-translit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.lexicon-translit-row .lexicon-admin-edit-btn {
    margin-right: auto; /* Push to left */
}

.lexicon-translit-row .lexicon-translit-text {
    flex: 1;
    text-align: left !important;
    color: #008080 !important;
    display: block;
    font-weight: 700;
}

.lexicon-translit-row .translit-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto; /* Push to right */
}

/* 토라 포션 - 본문으로 가기 절 하이라이트 애니메이션 */
.torah-highlight-verse {
    animation: torahVerseHighlight 2.5s ease-out;
    background-color: rgba(255, 215, 0, 0.4) !important;
    border-radius: 4px;
}

@keyframes torahVerseHighlight {
    0% {
        background-color: rgba(255, 215, 0, 0.6);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    }
    70% {
        background-color: rgba(255, 215, 0, 0.4);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

body.night-mode .torah-highlight-verse {
    animation: torahVerseHighlightNight 2.5s ease-out;
    background-color: rgba(255, 193, 7, 0.3) !important;
}

@keyframes torahVerseHighlightNight {
    0% {
        background-color: rgba(255, 193, 7, 0.5);
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.4);
    }
    70% {
        background-color: rgba(255, 193, 7, 0.3);
        box-shadow: 0 0 8px rgba(255, 193, 7, 0.2);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* 근접 검색 헤더 스타일 */
.proximity-query-display {
    font-weight: 600;
    color: var(--sapphire-blue);
}

.proximity-range-info {
    color: var(--text-sub);
    font-weight: 700;
}

/* 근접 검색 결과 요약 헤더 */
.proximity-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(15,82,186,0.08) 0%, rgba(15,82,186,0.03) 100%);
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.proximity-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--sapphire-blue);
}

.proximity-summary-title .material-icons {
    font-size: 20px;
}

.proximity-summary-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.proximity-range-reset {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.proximity-range-reset label {
    color: var(--text-sub);
    font-weight: 700;
}

.proximity-range-reset select {
    padding: 4px 8px;
    border: 1px solid var(--sapphire-blue);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--sapphire-blue);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

.proximity-range-reset select:hover {
    background: rgba(15,82,186,0.1);
}

.proximity-summary-count {
    color: var(--text-sub);
    font-size: 0.9rem;
}

/* 나이트 모드 */
body.night-mode .proximity-summary-header {
    background: linear-gradient(135deg, rgba(110,168,254,0.1) 0%, rgba(110,168,254,0.03) 100%);
}

body.night-mode .proximity-range-reset select {
    background: var(--card-bg);
    border-color: #6ea8fe;
    color: #6ea8fe;
}

/* ========================================
   초기 로딩 깜빡임 방지 스타일
   ======================================== */

/* 초기 로딩 시 콘텐츠 숨김 */
#bible-list:empty {
    visibility: hidden;
}

/* 패널 타이틀이 표시되기 전 숨김 (JS에서 visibility: visible로 변경) */
#single-panel-title.loading-hidden {
    visibility: hidden;
}

/* 초기 로딩 완료 후 부드러운 표시 */
#single-panel-title {
    transition: visibility 0s, opacity 0.15s ease-in;
}

#single-panel-title.loaded {
    visibility: visible !important;
    opacity: 1;
}

/* ============================================
   LSJ 사전 개선된 스타일 - 2026-01-13
   ============================================ */

/* 대목차 (I., II., III., IV.) */
.lsj-section-major {
    display: block;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #fdebd0;
}

.lsj-section-major.lsj-first {
    margin-top: 16px;
}

.lsj-section-major-num {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #d35400;
    color: white;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    margin-right: 10px;
}

/* 소목차 (1., 2., 3.) */
.lsj-subsection {
    display: block;
    margin-top: 14px;
    margin-bottom: 8px;
    padding-left: 28px;
    text-indent: -28px;
    line-height: 1.75;
}

.lsj-subsection-num {
    display: inline-block;
    min-width: 24px;
    font-weight: 700;
    color: #2980b9;
    margin-right: 6px;
}

/* 대문자 섹션 (A., B., C.) */
.lsj-subsection-alpha {
    display: block;
    margin-top: 18px;
    margin-bottom: 10px;
    padding-left: 20px;
}

/* 그리스어 텍스트 */
.lsj-greek-text {
    font-family: 'Gentium Plus', 'Noto Serif', serif;
    font-style: italic;
    color: #1a5276;
    background: rgba(26, 82, 118, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    margin: 0 2px;
}

/* 한글 번역 텍스트 */
.lsj-translation {
    color: #c0392b;
    font-weight: 500;
}

/* 항목 참조 */
.lsj-see-also {
    color: #16a085;
    font-weight: 500;
    cursor: pointer;
}

.lsj-see-also:hover {
    text-decoration: underline;
}

/* 방언 표기 */
.lsj-dialect {
    color: #8e44ad;
    font-style: italic;
}

/* 어원 노트 */
.lsj-etymology {
    margin-top: 16px;
    padding: 14px 18px;
    background: #fef9e7;
    border-left: 4px solid #f1c40f;
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    color: #7d6608;
}

/* 야간 모드 대응 */
body.night-mode .lsj-section-major {
    border-bottom-color: rgba(253, 235, 208, 0.3);
}

body.night-mode .lsj-section-major-num {
    background: #e67e22;
}

body.night-mode .lsj-subsection-num {
    color: #6ea8fe;
}

body.night-mode .lsj-greek-text {
    color: #74b9ff;
    background: rgba(116, 185, 255, 0.1);
}

body.night-mode .lsj-translation {
    color: #ff7675;
}

body.night-mode .lsj-see-also {
    color: #55efc4;
}

body.night-mode .lsj-dialect {
    color: #a29bfe;
}

body.night-mode .lsj-etymology {
    background: rgba(254, 249, 231, 0.1);
    border-left-color: rgba(241, 196, 15, 0.5);
    color: #f1c40f;
}


/* ==================== TTS Verse Selector Styles ==================== */
.tts-verse-selector-row {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.tts-verse-select-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-section, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #333);
    transition: all 0.2s;
}

.tts-verse-select-btn:hover {
    background: var(--hover-bg, #eee);
    border-color: var(--primary-color, #0F52BA);
}

.tts-verse-select-btn .material-icons {
    color: var(--primary-color, #0F52BA);
}

.tts-current-ref {
    font-weight: 600;
}

/* 절 선택기 드롭다운 */
.tts-verse-selector {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10001;
}

.tts-verse-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-section, #f5f5f5);
    font-weight: 600;
    gap: 8px;
}

.tts-verse-selector-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-sub, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.tts-verse-selector-header button:hover {
    background: var(--hover-bg, #ddd);
}

.tts-back-btn {
    margin-right: auto;
}

.tts-verse-selector-header span:not(.material-icons) {
    flex: 1;
    text-align: center;
}

.tts-verse-selector-list {
    overflow-y: auto;
    max-height: 240px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tts-verse-item {
    padding: 8px 12px;
    background: var(--bg-section, #f8f8f8);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color, #333);
    transition: all 0.15s;
    text-align: left;
}

.tts-verse-item:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
    border-color: var(--primary-color, #0F52BA);
}

/* 숫자 그리드 (장/절) */
.tts-chapter-grid .tts-verse-item,
.tts-verse-grid .tts-verse-item {
    width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
}

.tts-number-item {
    flex-shrink: 0;
}

/* 야간 모드 */
body.night-mode .tts-verse-select-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-color, #eee);
}

body.night-mode .tts-verse-select-btn:hover {
    background: rgba(255,255,255,0.15);
}

body.night-mode .tts-verse-selector {
    background: var(--card-bg, #2d2d2d);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

body.night-mode .tts-verse-selector-header {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
}

body.night-mode .tts-verse-item {
    background: rgba(255,255,255,0.05);
    color: var(--text-color, #ddd);
}

body.night-mode .tts-verse-item:hover {
    background: var(--primary-color, #0F52BA);
    color: white;
}

/* 라이트 모드 */
body.light-mode .tts-verse-select-btn {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .tts-verse-selector {
    background: #fff;
}

body.light-mode .tts-verse-selector-header {
    background: #f5f5f5;
}

body.light-mode .tts-verse-item {
    background: #f8f8f8;
}

/* 팝업 위치 조정 (선택기 표시용) */
.tts-player-popup {
    position: relative;
}

/* 반응형 */
@media (max-width: 480px) {
    .tts-verse-selector {
        max-height: 250px;
    }
    
    .tts-verse-selector-list {
        max-height: 200px;
    }
    
    .tts-chapter-grid .tts-verse-item,
    .tts-verse-grid .tts-verse-item {
        width: 38px;
        height: 36px;
        font-size: 12px;
    }
}