/* 스무스 스크롤 설정 */
html,
body,
main,
#mainContent {
    scroll-behavior: smooth;
}

/* 아이폰 safe-area 지원 */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* 스크롤바 스타일 - 기본 (다크 모드) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c9a227;
}

/* 앵커 링크 스크롤 오프셋 - 헤더에 가려지지 않도록 */
[id] {
    scroll-margin-top: 100px;
}
section[id] {
    scroll-margin-top: 100px;
}
div[id] {
    scroll-margin-top: 100px;
}
h3[id] {
    scroll-margin-top: 100px;
}

/* 폰트 크기 조절용 CSS 변수 */
:root {
    --font-scale: 1;
}

/* 본문 콘텐츠 폰트 크기 (CSS 변수 적용) */
main section,
main .book-content,
main p,
main blockquote,
main li,
main div:not(.evil-oval):not(.good-oval),
main div[id],
main div[id^="chapter"],
main div[id^="cover"],
main div[id^="intro"],
main div[id^="preface"],
main div[id^="prayer"],
main div[class*="space-y"],
main div[class*="text-"] {
    font-size: calc(1rem * var(--font-scale)) !important;
    line-height: 1.8;
    background-color: transparent !important;
}

main h1 {
    font-size: calc(2.5rem * var(--font-scale)) !important;
}

main h2 {
    font-size: calc(1.5rem * var(--font-scale)) !important;
}

main h3 {
    font-size: calc(1.25rem * var(--font-scale)) !important;
}

main h4 {
    font-size: calc(1.125rem * var(--font-scale)) !important;
}

main h5,
main h6 {
    font-size: calc(1rem * var(--font-scale)) !important;
}

/* Tailwind 클래스로 지정된 텍스트 크기도 스케일 적용 */
main .text-lg {
    font-size: calc(1.125rem * var(--font-scale)) !important;
}

main .text-xl {
    font-size: calc(1.25rem * var(--font-scale)) !important;
}

main .text-2xl {
    font-size: calc(1.5rem * var(--font-scale)) !important;
}

main .text-3xl {
    font-size: calc(1.875rem * var(--font-scale)) !important;
}

main .text-4xl {
    font-size: calc(2.25rem * var(--font-scale)) !important;
}

main .text-5xl {
    font-size: calc(3rem * var(--font-scale)) !important;
}

main .text-sm {
    font-size: calc(0.875rem * var(--font-scale)) !important;
}

main .text-xs {
    font-size: calc(0.75rem * var(--font-scale)) !important;
}

main .text-base {
    font-size: calc(1rem * var(--font-scale)) !important;
}

/* 테이블 내부 텍스트도 스케일 적용 */
main table,
main table td,
main table th {
    font-size: calc(1rem * var(--font-scale)) !important;
}

main table.text-sm td,
main table.text-sm th {
    font-size: calc(0.875rem * var(--font-scale)) !important;
}

main table.text-xs td,
main table.text-xs th {
    font-size: calc(0.75rem * var(--font-scale)) !important;
}

/* 천년·무궁 안식 비교 표 (book8 등)
   Tailwind CDN preflight가 *, ::before, ::after { border-width: 0 } 을 두므로
   테두리는 반드시 !important 로 덮어써야 보인다. */
main table.ebook-compare-table {
    width: 100%;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(201, 162, 39, 0.85) !important;
    margin: 1.75rem 0;
    line-height: 1.65;
}

main table.ebook-compare-table th {
    width: 50% !important;
    text-align: center;
    font-weight: 700;
    color: #c9a227;
    background: rgba(201, 162, 39, 0.12);
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(201, 162, 39, 0.55) !important;
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
    overflow-wrap: break-word;
}

main table.ebook-compare-table td {
    width: 50% !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(201, 162, 39, 0.5) !important;
    padding: 0.75rem 0.85rem;
    vertical-align: top;
    text-align: left;
    overflow-wrap: break-word;
}

main table.ebook-compare-table ul {
    margin: 0;
    padding-left: 1.15rem;
    list-style-type: disc;
}

main table.ebook-compare-table li {
    margin-bottom: 0.45rem;
}

main table.ebook-compare-table li:last-child {
    margin-bottom: 0;
}

[data-theme="light"] main table.ebook-compare-table {
    border-color: rgba(37, 99, 235, 0.65) !important;
}

[data-theme="light"] main table.ebook-compare-table th {
    color: #0066cc;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.45) !important;
}

[data-theme="light"] main table.ebook-compare-table td {
    border-color: rgba(37, 99, 235, 0.4) !important;
}

/* 드롭캡 스타일 */
.drop-cap::first-letter {
    float: left;
    font-size: calc(4rem * var(--font-scale));
    line-height: 1;
    padding-right: 15px;
    color: #c9a227;
    font-weight: 700;
}

[data-theme="light"] .drop-cap::first-letter {
    color: #0066cc !important;
}

/* 그리스어 스타일 */
.greek {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #c9a227;
}

[data-theme="light"] .greek {
    color: #0066cc !important;
}

/* 히브리어 스타일 */
.hebrew {
    font-family: 'SBL Hebrew', 'Noto Sans Hebrew', 'Times New Roman', serif;
    font-style: normal;
    color: #c9a227;
    direction: rtl;
    unicode-bidi: isolate;
}

[data-theme="light"] .hebrew {
    color: #0066cc !important;
}

/* 히브리어 원어 텍스트 스타일 */
.hebrew-text {
    font-family: 'SBL Hebrew', 'Noto Sans Hebrew', 'David Libre', 'Times New Roman', serif;
    font-style: normal;
    color: #c9a227;
    direction: rtl;
    unicode-bidi: bidi-override;
    font-size: inherit;
    line-height: 1.6;
}

[data-theme="light"] .hebrew-text {
    color: #0066cc !important;
}

/* 히브리어 박스 스타일 - 다크 모드에서는 금색, 라이트 모드에서는 파란색 */
.hebrew-box,
div[style*="border: 1px solid #0066cc"] {
    border-color: #c9a227 !important;
}

[data-theme="light"] .hebrew-box,
[data-theme="light"] div[style*="border: 1px solid #0066cc"] {
    border-color: #0066cc !important;
}

/* 히브리어 박스 내부의 ⓟ와 ⓢ 아이콘 색상 - 다크 모드에서는 금색, 라이트 모드에서는 파란색 */
.hebrew-box .hebrew-icon,
.hebrew-box span[style*="color: #0066cc"],
.hebrew-box span[style*="color:#0066cc"],
div[style*="border: 1px solid #0066cc"] .hebrew-icon,
div[style*="border: 1px solid #0066cc"] span[style*="color: #0066cc"],
div[style*="border: 1px solid #0066cc"] span[style*="color:#0066cc"] {
    color: #c9a227 !important;
}

[data-theme="light"] .hebrew-box .hebrew-icon,
[data-theme="light"] .hebrew-box span[style*="color: #0066cc"],
[data-theme="light"] .hebrew-box span[style*="color:#0066cc"],
[data-theme="light"] div[style*="border: 1px solid #0066cc"] .hebrew-icon,
[data-theme="light"] div[style*="border: 1px solid #0066cc"] span[style*="color: #0066cc"],
[data-theme="light"] div[style*="border: 1px solid #0066cc"] span[style*="color:#0066cc"] {
    color: #0066cc !important;
}

/* 원어 폰트 스타일 (히브리어 음성학적 표기법용) */
.original-text {
    font-family: 'SBL Hebrew', 'Noto Sans Hebrew', 'Times New Roman', serif;
    font-style: normal;
    color: #c9a227 !important;
}

[data-theme="light"] .original-text {
    color: #0066cc !important;
}

/* ===== 라이트 모드에서도 원어 폰트 색상(파란색)을 최우선으로 보장 ===== */
[data-theme="light"] .greek,
[data-theme="light"] .hebrew,
[data-theme="light"] .hebrew-text,
[data-theme="light"] .original-text {
    color: #0066cc !important;
}

/* 성경 인용문 스타일 */
main .scripture,
main .verse-text {
    font-size: calc(1rem * var(--font-scale));
}

/* 인라인 텍스트도 스케일 적용 */
main span,
main em,
main strong {
    font-size: inherit;
}

/* ===== 요한계시록 7장 목차 스타일 예외 처리 ===== */
/* "7. 나라와 제사장을 삼은 자들은…" 항목이 항상 굵게 + 배경색으로 표시되는 문제 방지 */
a.toc-link[href="#seal-7"] {
    background-color: transparent !important;
    font-weight: 400 !important;
    color: inherit !important;
}

/* ===== 사이드바 목차 행간 (toc-link 유무 공통) ===== */
#sidebar nav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#sidebar nav a,
#sidebar .toc-link {
    line-height: 1.3;
}

#sidebar nav a.text-sm,
#sidebar .toc-link.text-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#sidebar nav a.text-xs,
#sidebar .toc-link.text-xs {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.25;
}

#sidebar nav span.block {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    line-height: 1.25;
}

/* 텍스트 배경색 제거 - 텍스트 요소만 */
p,
main p,
.text-text-cream,
.text-text-light,
.italic,
div p,
div[class*="bg-"] p,
.bg-primary-gold\/5 p,
.bg-primary-navy\/60 p,
.bg-accent-burgundy\/10 p,
.bg-accent-burgundy\/15 p,
.bg-primary-navy\/40 p,
/* 배경 박스 안의 텍스트에서, 자체적으로 bg-primary-gold 계열 배경을 가진 요소는 제외 */
.bg-primary-gold\/5 *:not([class*="bg-primary-gold"]),
.bg-primary-navy\/60 *,
.bg-accent-burgundy\/10 *,
.bg-accent-burgundy\/15 *,
.bg-primary-navy\/40 * {
    background-color: transparent !important;
    background: transparent !important;
}

/* 모든 텍스트 요소의 배경색 제거 
   단, 번호 원 등 배경색이 디자인 요소인 경우(.bg-primary-gold)는 예외로 둔다 */
span:not(.bg-primary-gold),
em,
strong,
cite,
.text-primary-gold,
.greek,
.hebrew,
main span:not(.bg-primary-gold),
main em,
main strong,
main cite {
    background-color: transparent !important;
    background: transparent !important;
}

/* 특정 배경 div 내부의 모든 텍스트 요소
   단, 내부 요소 자체에 bg-primary-gold 계열 배경이 있는 경우는 유지 */
div[class*="bg-primary-gold"] p,
div[class*="bg-primary-gold"] span:not([class*="bg-primary-gold"]),
div[class*="bg-primary-gold"] em:not([class*="bg-primary-gold"]),
div[class*="bg-primary-gold"] strong:not([class*="bg-primary-gold"]),
div[class*="bg-primary-navy"] p,
div[class*="bg-primary-navy"] span,
div[class*="bg-primary-navy"] em,
div[class*="bg-primary-navy"] strong,
div[class*="bg-accent-burgundy"] p,
div[class*="bg-accent-burgundy"] span,
div[class*="bg-accent-burgundy"] em,
div[class*="bg-accent-burgundy"] strong {
    background-color: transparent !important;
    background: transparent !important;
}

/* 모바일 터치 최적화 */
button, a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* TTS 재생 중 텍스트 하이라이트 스타일 */
.tts-highlight {
    background-color: rgba(201, 162, 39, 0.2) !important;
    color: inherit !important;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.tts-highlight-active {
    background-color: rgba(201, 162, 39, 0.7) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
    padding: 2px 4px;
    border-radius: 3px;
}

/* 모바일 반응형 텍스트 */
@media (max-width: 768px) {
    .drop-cap::first-letter {
        font-size: calc(3rem * var(--font-scale));
        padding-right: 10px;
    }

    /* 모바일에서 blockquote 패딩 조정 */
    blockquote {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main section,
    main .book-content,
    main p,
    main blockquote,
    main li,
    main div,
    main div[id],
    main div[id^="chapter"],
    main div[id^="cover"],
    main div[id^="intro"],
    main div[id^="preface"],
    main div[id^="prayer"] {
        font-size: calc(0.95rem * var(--font-scale)) !important;
    }
    
    main h1 {
        font-size: calc(2rem * var(--font-scale)) !important;
    }
    
    main h2 {
        font-size: calc(1.25rem * var(--font-scale)) !important;
    }
    
    main h3 {
        font-size: calc(1.125rem * var(--font-scale)) !important;
    }
}

/* 아이폰 및 작은 화면 최적화 */
@media (max-width: 480px) {
    /* 헤더 패딩 조정 */
    header {
        padding-left: max(0.75rem, var(--safe-area-inset-left)) !important;
        padding-right: max(0.75rem, var(--safe-area-inset-right)) !important;
    }

    /* 버튼 크기 조정 (아이폰에서 터치하기 쉽게) */
    button.w-9 {
        min-width: 36px;
        min-height: 36px;
    }

    /* 버튼 간격 조정 */
    .flex.gap-1\.5 {
        gap: 0.5rem !important;
    }

    /* 언어 선택 박스 크기 조정 */
    #languageSelect {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* 오디오북 패널 패딩 조정 */
    #audioBookPanel {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* 본문 패딩 조정 */
    main > div {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ===== 스마트폰 성능 최적화 ===== */
    
    /* 모든 애니메이션 제거 (사이드바와 공유 메뉴는 예외) */
    *:not(#sidebar):not(#sidebar *):not(#shareMenu):not(#shareMenu *),
    *:not(#sidebar):not(#sidebar *):not(#shareMenu):not(#shareMenu *)::before,
    *:not(#sidebar):not(#sidebar *):not(#shareMenu):not(#shareMenu *)::after {
        animation: none !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition: none !important;
        transition-duration: 0s !important;
    }

    /* 복잡한 그라데이션을 단순한 색상으로 변경 */
    .bg-gradient-to-b,
    .bg-gradient-to-br,
    .bg-gradient-to-t,
    .bg-gradient-to-r,
    [class*="bg-gradient"] {
        background: #1a1a2e !important;
        background-image: none !important;
    }

    [data-theme="light"] .bg-gradient-to-b,
    [data-theme="light"] .bg-gradient-to-br,
    [data-theme="light"] .bg-gradient-to-t,
    [data-theme="light"] .bg-gradient-to-r,
    [data-theme="light"] [class*="bg-gradient"] {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* box-shadow 단순화 (공유 메뉴는 예외) */
    *:not(#shareMenu):not(#shareMenu *) {
        box-shadow: none !important;
    }

    /* transform 효과 제거 (사이드바와 공유 메뉴는 예외) */
    *:not(#sidebar):not(#sidebar *):not(#shareMenu):not(#shareMenu *) {
        transform: none !important;
    }

    /* filter 효과 제거 */
    * {
        filter: none !important;
    }

    /* backdrop-filter 제거 */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 복잡한 배경 이미지 제거 */
    * {
        background-image: none !important;
    }

    /* text-shadow 제거 */
    * {
        text-shadow: none !important;
    }

    /* hover 효과 제거 (터치 디바이스에서는 불필요, 사이드바는 예외) */
    *:not(#sidebar):not(#sidebar *):hover {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* 사이드바 그라데이션 단순화 */
    #sidebar {
        background: #16213e !important;
        background-image: none !important;
    }

    /* 사이드바는 기본적으로 숨겨져 있어야 함 (모바일) */
    #sidebar {
        transform: translateX(-100%) !important;
    }

    /* 사이드바가 열릴 때만 보이도록 */
    #sidebar.sidebar-visible {
        transform: translateX(0) !important;
    }

    [data-theme="light"] #sidebar {
        background: #f5f5f5 !important;
        background-image: none !important;
    }

    /* 헤더 배경 단순화 */
    header {
        background: rgba(22, 33, 62, 0.95) !important;
        background-image: none !important;
    }

    [data-theme="light"] header {
        background: rgba(255, 255, 255, 0.95) !important;
        background-image: none !important;
    }

    /* 푸터 배경 단순화 */
    footer {
        background: rgba(22, 33, 62, 0.95) !important;
        background-image: none !important;
    }

    [data-theme="light"] footer {
        background: rgba(255, 255, 255, 0.95) !important;
        background-image: none !important;
    }

    /* 본문 배경 단순화 */
    main {
        background: #1a1a2e !important;
        background-image: none !important;
    }

    [data-theme="light"] main {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* 표지 배경 단순화 */
    #cover {
        background: #1a1a2e !important;
        background-image: none !important;
    }

    [data-theme="light"] #cover {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* 검색 하이라이트 애니메이션 제거 */
    .search-highlight {
        animation: none !important;
    }

    /* TTS 하이라이트 애니메이션 제거 */
    .tts-highlight,
    .tts-highlight-active {
        transition: none !important;
    }

    /* 사이드바 오버레이 단순화 */
    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        transition: none !important;
    }

    /* 사이드바 토글 버튼 단순화 */
    .sidebar-toggle-btn {
        transition: none !important;
    }

    /* 사이드바 트리거 단순화 */
    .sidebar-trigger::after {
        transition: none !important;
    }

    /* 공유 메뉴는 정상 작동하도록 보장 */
    #shareMenu {
        pointer-events: auto !important;
        z-index: 10002 !important;
        position: absolute !important;
        background-color: #16213e !important;
        border: 1px solid rgba(201, 162, 39, 0.3) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
        isolation: isolate !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 180px !important;
    }

    [data-theme="light"] #shareMenu {
        background-color: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* hidden 클래스가 있을 때만 숨김 */
    #shareMenu.hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* hidden 클래스가 없을 때만 표시 - 최우선 적용 */
    #shareMenu:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 모바일에서 공유 메뉴가 확실히 보이도록 */
    @media (max-width: 480px) {
        #shareMenu:not(.hidden) {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 10002 !important;
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            margin-top: 0.5rem !important;
            background-color: #16213e !important;
            border: 1px solid rgba(201, 162, 39, 0.3) !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
            min-width: 180px !important;
            max-width: 90vw !important;
        }

        [data-theme="light"] #shareMenu:not(.hidden) {
            background-color: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
    }

    /* 공유 버튼과 옵션은 클릭 가능하도록 */
    #shareBtn {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.3) !important;
        position: relative !important;
        z-index: 10001 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
        isolation: isolate !important;
    }

    .share-option {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.3) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
    }

    /* 공유 버튼의 부모 컨테이너도 클릭 가능하도록 */
    div:has(> #shareBtn),
    header > div > div:has(> #shareBtn) {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* 공유 버튼 내부 아이콘도 클릭 가능하도록 */
    #shareBtn * {
        pointer-events: none !important;
    }

    /* 공유 버튼 활성 상태 */
    #shareBtn:active {
        opacity: 0.7 !important;
        transform: scale(0.95) !important;
        background-color: rgba(201, 162, 39, 0.2) !important;
    }

    /* 공유 옵션 스타일 보장 */
    .share-option {
        background-color: transparent !important;
        color: #f5f0e1 !important;
    }

    [data-theme="light"] .share-option {
        color: #1a1a2e !important;
    }

    /* 데스크톱 헤더 공유 메뉴 옵션 hover - 흰색 텍스트 */
    #shareMenu .share-option:hover,
    #shareMenu .share-option:active {
        background-color: #1967d2 !important;
        color: #ffffff !important;
    }

    #shareMenu .share-option:hover *,
    #shareMenu .share-option:active * {
        color: #ffffff !important;
    }

    [data-theme="light"] #shareMenu .share-option:hover,
    [data-theme="light"] #shareMenu .share-option:active {
        background-color: #1967d2 !important;
        color: #ffffff !important;
    }

    [data-theme="light"] #shareMenu .share-option:hover *,
    [data-theme="light"] #shareMenu .share-option:active * {
        color: #ffffff !important;
    }

    /* 공유 메뉴의 transition은 유지 (부드러운 표시/숨김) */
    #shareMenu,
    .share-option {
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    /* ===== 헤더 버튼 최적화 ===== */
    
    /* 헤더의 모든 버튼과 링크는 즉시 반응하도록 (공유 메뉴는 예외) */
    header button:not(#shareBtn):not(.share-option),
    header a,
    header select {
        transition: none !important;
        animation: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.2) !important;
        will-change: auto !important;
    }

    /* 공유 버튼 컨테이너가 메뉴를 가리지 않도록 */
    div:has(> #shareBtn) {
        position: relative !important;
        z-index: 10000 !important;
    }

    /* 헤더 버튼 hover 효과 제거 (모바일) */
    header button:hover,
    header a:hover {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
        background-color: inherit !important;
        border-color: inherit !important;
    }

    /* 헤더 배경 단순화 (backdrop-blur 제거) */
    header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 진행률 바 단순화 */
    #progressBar {
        transition: none !important;
    }

    /* 헤더의 모든 요소는 GPU 가속 비활성화 (성능 향상) */
    header * {
        will-change: auto !important;
        transform: translateZ(0) !important;
    }

    /* 헤더 링크는 즉시 전환되도록 */
    header a {
        text-decoration: none !important;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.2) !important;
    }

    /* 헤더 링크 클릭 시 즉시 반응 */
    header a:active {
        opacity: 0.7 !important;
        transform: scale(0.95) !important;
    }

    /* 모든 버튼 클릭 시 즉시 피드백 */
    header button:active {
        opacity: 0.7 !important;
        transform: scale(0.95) !important;
    }
}

/* 아이폰 X 이상 safe-area 지원 */
@supports (padding: max(0px)) {
    header {
        padding-top: max(0.5rem, calc(0.5rem + var(--safe-area-inset-top)));
        padding-left: max(1rem, var(--safe-area-inset-left));
        padding-right: max(1rem, var(--safe-area-inset-right));
    }

    footer {
        padding-bottom: max(0.75rem, calc(0.75rem + var(--safe-area-inset-bottom)));
        padding-left: max(0.75rem, var(--safe-area-inset-left));
        padding-right: max(0.75rem, var(--safe-area-inset-right));
    }

    main {
        padding-left: max(1rem, var(--safe-area-inset-left));
        padding-right: max(1rem, var(--safe-area-inset-right));
    }
}

/* 검색 하이라이트 애니메이션 */
.search-highlight {
    background-color: rgba(201, 162, 39, 0.65) !important;
    color: #ffffff !important;
    padding: 0 3px;
    border-radius: 3px;
    animation: highlight-pulse 0.5s ease-in-out;
}

/* 라이트 모드에서 검색 하이라이트를 파란색으로 표시 */
[data-theme="light"] .search-highlight {
    background-color: rgba(0, 102, 204, 0.25) !important;
    color: #1a1a2e !important; /* 본문 기본 텍스트 색상과 동일하게 */
}

@keyframes highlight-pulse {
    0% { background-color: rgba(201, 162, 39, 0.2); }
    50% { background-color: rgba(201, 162, 39, 0.8); }
    100% { background-color: rgba(201, 162, 39, 0.5); }
}

/* 사이드바 오버레이 (모바일) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 사이드바 호버 트리거 존 */
.sidebar-trigger {
    position: fixed;
    left: 0;
    top: 0;
    width: 20px;
    height: 100vh;
    z-index: 45;
    background: transparent;
}

.sidebar-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(201, 162, 39, 0.5), transparent);
    border-radius: 0 4px 4px 0;
    opacity: 0.5;
    transition: opacity 0.3s, width 0.3s;
}

.sidebar-trigger:hover::after {
    opacity: 1;
    width: 6px;
}

/* 사이드바 토글 버튼 (데스크톱용) */
.sidebar-toggle-btn {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;
    width: 32px;
    height: 32px;
    background: rgba(22, 33, 62, 0.95);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 50%;
    color: #c9a227;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    opacity: 0.7;
}

.sidebar-toggle-btn:hover {
    opacity: 1;
    background: rgba(201, 162, 39, 0.2);
    border-color: #c9a227;
}

.sidebar-toggle-btn.sidebar-open {
    left: 290px;
}

@media (min-width: 768px) {
    .sidebar-toggle-btn.sidebar-open {
        left: 330px;
    }
}

/* 사이드바 열림 상태 */
.sidebar-visible {
    transform: translateX(0) !important;
}

/* 다크/라이트 모드 전환 스타일 */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #fafafa;
    --text-primary: #1a1a2e;
    --text-secondary: #2d2d44;
    --text-light: #4a4a5c;
    --border-color: rgba(0, 0, 0, 0.1);
    --sidebar-bg: #f5f5f5;
    --main-bg: #ffffff;
}

[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f0f23;
    --text-primary: #f5f0e1;
    --text-secondary: #e8e2d4;
    --text-light: #d4c9b8;
    --border-color: rgba(201, 162, 39, 0.3);
    --sidebar-bg: linear-gradient(to bottom, #16213e, #0f0f23);
    --main-bg: radial-gradient(ellipse at top, #1f1f3a 0%, #1a1a2e 100%);
}

/* 라이트 모드 적용 */
[data-theme="light"] body,
[data-theme="light"] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .bg-primary-dark {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] .bg-primary-navy {
    background-color: var(--bg-secondary) !important;
}

[data-theme="light"] .text-text-cream {
    color: var(--text-primary) !important;
}

[data-theme="light"] .text-text-light {
    color: var(--text-light) !important;
}

/* 라이트 모드에서 opacity가 적용된 text-text-light 텍스트 가독성 개선 - 전역 규칙 */
[data-theme="light"] [class*="text-text-light/70"],
[data-theme="light"] [class*="text-text-light/60"],
[data-theme="light"] [class*="text-text-light/80"],
[data-theme="light"] p[class*="text-text-light/70"],
[data-theme="light"] p[class*="text-text-light/60"],
[data-theme="light"] p[class*="text-text-light/80"],
[data-theme="light"] span[class*="text-text-light/70"],
[data-theme="light"] span[class*="text-text-light/60"],
[data-theme="light"] span[class*="text-text-light/80"],
[data-theme="light"] div[class*="text-text-light/70"],
[data-theme="light"] div[class*="text-text-light/60"],
[data-theme="light"] div[class*="text-text-light/80"] {
    color: #1a1a2e !important;
    opacity: 1 !important;
}

/* 라이트 모드에서 일반 text-text-light 텍스트도 개선 (opacity 없는 경우) */
[data-theme="light"] p[class*="text-text-light"]:not([class*="/"]),
[data-theme="light"] span[class*="text-text-light"]:not([class*="/"]),
[data-theme="light"] div[class*="text-text-light"]:not([class*="/"]) {
    color: #2d2d44 !important;
}

[data-theme="light"] main {
    background: var(--main-bg) !important;
}

/* 라이트 모드에서 본문 텍스트 색상을 더 어둡게 설정
   단, 원어 폰트(.greek, .hebrew, .hebrew-text, .original-text)는 예외로 두어
   위에서 정의한 파란색이 유지되도록 한다. */
[data-theme="light"] main p,
[data-theme="light"] main section,
[data-theme="light"] main .book-content,
[data-theme="light"] main li,
[data-theme="light"] main span:not(.text-primary-gold):not([class*="text-primary"]):not([class*="text-blue"]):not(.greek):not(.hebrew):not(.hebrew-text):not(.original-text),
[data-theme="light"] main div:not([class*="text-primary"]):not([class*="bg-"]):not([class*="text-blue"]):not(.greek):not(.hebrew):not(.hebrew-text):not(.original-text) {
    color: #1a1a2e !important;
}

/* 라이트 모드에서 파란색 텍스트 클래스는 파란색 유지 */
[data-theme="light"] main .text-blue-600,
[data-theme="light"] main span.text-blue-600 {
    color: #2563eb !important;
}

/* 라이트 모드에서 blockquote 텍스트도 어둡게 */
[data-theme="light"] main blockquote {
    color: #1a1a2e !important;
}

/* 라이트 모드에서 text-text-light 클래스를 가진 본문 텍스트를 더 어둡게 */
[data-theme="light"] main .text-text-light,
[data-theme="light"] main p.text-text-light,
[data-theme="light"] main div.text-text-light {
    color: #1a1a2e !important;
}

[data-theme="light"] #sidebar {
    background: var(--sidebar-bg) !important;
    border-right-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .border-primary-gold\/30,
[data-theme="light"] .border-primary-gold {
    border-color: #0066cc !important;
}

/* 라이트 모드 스크롤바 - 파란색 */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #0066cc !important;
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #0052a3 !important;
}

/* Firefox 스크롤바 색상 */
[data-theme="light"] {
    scrollbar-color: #0066cc #f5f5f5 !important;
    scrollbar-width: thin !important;
}

[data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .sidebar-toggle-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .sidebar-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* 라이트 모드에서 summary-label 배경색 - 파란색, 텍스트 - 흰색 */
body[data-theme="light"] .summary-label,
body[data-theme="light"] .intro-summary-label,
body[data-theme="light"] [data-i18n-content="introSummaryTitle"],
body[data-theme="light"] [data-i18n-content="chapter2_2Title"],
body[data-theme="light"] [data-i18n-content="chapter3ProphesyTitle"],
body[data-theme="light"] [data-i18n-content="chapter4WarningTitle"],
body[data-theme="light"] [data-i18n-content="chapter4SalvationTitle"],
body[data-theme="light"] [data-i18n-content="chapter6TribulationTitle"],
body[data-theme="light"] div.summary-label,
body[data-theme="light"] div.intro-summary-label,
body[data-theme="light"] div[data-i18n-content="introSummaryTitle"],
body[data-theme="light"] .absolute.summary-label,
body[data-theme="light"] .absolute[data-i18n-content="introSummaryTitle"] {
    background-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* 다크 모드에서 summary-label 배경색 - 버건디, 텍스트 - 금색 */
body[data-theme="dark"] .summary-label,
body[data-theme="dark"] .intro-summary-label,
body[data-theme="dark"] [data-i18n-content="introSummaryTitle"],
body[data-theme="dark"] [data-i18n-content="chapter2_2Title"],
body[data-theme="dark"] [data-i18n-content="chapter3ProphesyTitle"],
body[data-theme="dark"] [data-i18n-content="chapter4WarningTitle"],
body[data-theme="dark"] [data-i18n-content="chapter4SalvationTitle"],
body[data-theme="dark"] [data-i18n-content="chapter6TribulationTitle"],
body[data-theme="dark"] div.summary-label,
body[data-theme="dark"] div.intro-summary-label,
body[data-theme="dark"] div[data-i18n-content="introSummaryTitle"],
body[data-theme="dark"] .absolute.summary-label,
body[data-theme="dark"] .absolute[data-i18n-content="introSummaryTitle"] {
    background-color: #6b2737 !important;
    background: #6b2737 !important;
    background-image: none !important;
    color: #c9a227 !important;
}

/* 라이트 모드 헤더 및 섹션 배경 */
[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="light"] section {
    background: transparent !important;
}

[data-theme="light"] footer {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="light"] #audioBookPanel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="light"] #searchModal {
    background: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] #searchModal > div {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 검색 모달 모바일 반응형 스타일 */
#searchModal {
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#searchModal:not(.hidden) {
    display: flex !important;
}

#searchModal.hidden {
    display: none !important;
}

/* 모달 배경 */
#searchModalBackdrop {
    pointer-events: auto;
    cursor: pointer;
}

/* 모달 컨텐츠 */
#searchModalContent {
    max-height: 90vh;
    overflow-y: auto;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    touch-action: manipulation;
}

/* 검색 입력 필드 포인터 이벤트 보장 */
#searchInput {
    pointer-events: auto !important;
    touch-action: manipulation;
    position: relative;
    z-index: 20;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 닫기 버튼 */
#closeSearchModal {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(201, 162, 39, 0.3);
    cursor: pointer;
}

/* 검색 버튼 */
#searchSubmitBtn {
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
}

/* 모바일에서 검색 모달 최적화 */
@media (max-width: 640px) {
    #searchModal {
        padding: 0.5rem;
    }
    
    #searchModalContent {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    
    #searchInput {
        font-size: 16px !important; /* iOS에서 줌 방지 */
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.2);
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default;
        position: relative;
        z-index: 20;
    }
    
    #searchSubmitBtn {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.3);
        position: relative;
        z-index: 20;
    }
    
    #closeSearchModal {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(201, 162, 39, 0.3);
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        z-index: 30 !important;
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #searchModalBackdrop {
        pointer-events: auto !important;
        touch-action: manipulation;
    }
}

[data-theme="light"] .bg-primary-navy\/50,
[data-theme="light"] .bg-primary-navy\/40,
[data-theme="light"] .bg-primary-navy\/60,
[data-theme="light"] .bg-primary-navy\/90 {
    background-color: rgba(245, 245, 245, 0.5) !important;
}

[data-theme="light"] .bg-primary-dark\/50,
[data-theme="light"] .bg-primary-dark\/80 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .bg-accent-burgundy\/20 {
    background-color: rgba(107, 39, 55, 0.1) !important;
}

[data-theme="light"] .bg-primary-gold\/10 {
    background-color: rgba(0, 102, 204, 0.1) !important;
}

[data-theme="light"] .bg-primary-gold\/20 {
    background-color: rgba(0, 102, 204, 0.15) !important;
}

[data-theme="light"] .bg-primary-gold\/5 {
    background-color: rgba(0, 102, 204, 0.05) !important;
}

/* 라이트 모드 - 섹션 상단 풍선도움말(서 문 / 주기도문 해설 / EPILOGUE 등) 스타일: 파란 배경 + 흰 글씨 */
[data-theme="light"] section span.inline-block.text-xs.text-primary-gold {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-color: rgba(0, 102, 204, 0.6) !important;
    box-shadow: 0 6px 14px rgba(0, 102, 204, 0.25);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 사이드바 링크 스타일 */
[data-theme="light"] #sidebar a {
    color: var(--text-primary) !important;
}

[data-theme="light"] #sidebar a:hover {
    background-color: rgba(0, 102, 204, 0.1) !important;
    border-left-color: #0066cc !important;
    color: #0066cc !important;
}

[data-theme="light"] #sidebar a.border-primary-gold,
[data-theme="light"] #sidebar a.text-primary-gold {
    border-left-color: #0066cc !important;
    color: #0066cc !important;
    background-color: rgba(0, 102, 204, 0.05) !important;
}

/* 라이트 모드에서 gradient 오버라이드 */
[data-theme="light"] .bg-gradient-to-b,
[data-theme="light"] .bg-gradient-to-br,
[data-theme="light"] .bg-gradient-to-t,
[data-theme="light"] .bg-gradient-to-r {
    background: var(--bg-secondary) !important;
}

[data-theme="light"] #sidebar.bg-gradient-to-b {
    background: var(--sidebar-bg) !important;
}

[data-theme="light"] header.bg-gradient-to-b {
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] footer.bg-gradient-to-t {
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] section.bg-gradient-to-br {
    background: transparent !important;
}

[data-theme="light"] .bg-gradient-to-br.from-primary-navy\/50,
[data-theme="light"] .bg-gradient-to-br.from-primary-navy\/50.to-primary-dark\/80 {
    background: transparent !important;
}

[data-theme="light"] .bg-gradient-to-br.from-accent-burgundy\/20 {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* 라이트 모드 버튼 스타일 */
[data-theme="light"] button {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 라이트 모드 인용문 스타일 */
[data-theme="light"] blockquote {
    border-left-color: #0066cc !important;
    border-left-width: 4px !important;
}

/* 라이트 모드 인용문 블록의 큰 따옴표 */
[data-theme="light"] span.text-primary-gold\/30,
[data-theme="light"] .text-primary-gold\/30 {
    color: rgba(0, 102, 204, 0.3) !important;
}

/* 라이트 모드 "주제 내용" 제목 */
[data-theme="light"] h3.text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 제목 색상 (파란색) */
[data-theme="light"] header h1,
[data-theme="light"] main h1,
[data-theme="light"] main h2 {
    color: #0066cc !important;
}

[data-theme="light"] main h3 {
    color: #1a1a2e !important;
}

/* 라이트 모드 진행률 바 */
[data-theme="light"] #progressBar.bg-gradient-to-r {
    background: linear-gradient(to right, #0066cc, #004499) !important;
}

[data-theme="light"] #chapterProgressBar.bg-gradient-to-r {
    background: linear-gradient(to right, #004499, #0066cc) !important;
}

/* 라이트 모드 구분선 */
[data-theme="light"] .bg-gradient-to-r.from-transparent.via-primary-gold,
[data-theme="light"] .bg-gradient-to-r.from-primary-gold {
    background: linear-gradient(to right, transparent, #0066cc, transparent) !important;
}

/* 라이트 모드 사이드바 헤더 배경 */
[data-theme="light"] #sidebar > div:first-child.bg-gradient-to-br.from-primary-gold\/10 {
    background: rgba(0, 102, 204, 0.1) !important;
}

/* 라이트 모드 accent 색상 (range input 등) */
[data-theme="light"] .accent-primary-gold,
[data-theme="light"] input[type="range"] {
    accent-color: #0066cc !important;
}

/* 라이트 모드 hover 상태 */
[data-theme="light"] button:hover.bg-primary-gold\/20,
[data-theme="light"] a:hover.bg-primary-gold\/10,
[data-theme="light"] button:hover.border-primary-gold,
[data-theme="light"] a:hover.border-primary-gold {
    background-color: rgba(0, 102, 204, 0.1) !important;
    border-color: #0066cc !important;
}

[data-theme="light"] button:hover.text-primary-gold,
[data-theme="light"] a:hover.text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 사이드바 "본 문" 텍스트 */
[data-theme="light"] #sidebar span.text-primary-gold\/60 {
    color: rgba(0, 102, 204, 0.6) !important;
}

/* 라이트 모드 별표 및 장식 요소 */
[data-theme="light"] .text-primary-gold.text-xs,
[data-theme="light"] .text-primary-gold.text-2xl,
[data-theme="light"] span.text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 오디오북 속도 표시 */
[data-theme="light"] #audioBookSpeedValue.text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 제목 아래 구분선 */
[data-theme="light"] h2 span.bg-primary-gold,
[data-theme="light"] .bg-primary-gold.h-0\.5,
[data-theme="light"] .bg-primary-gold.w-16 {
    background-color: #0066cc !important;
}

/* 라이트 모드 섹션 상단 구분선 */
[data-theme="light"] div.bg-gradient-to-r.via-primary-gold,
[data-theme="light"] .bg-gradient-to-r.from-transparent.via-primary-gold.to-transparent {
    background: linear-gradient(to right, transparent, #0066cc, transparent) !important;
}

/* 라이트 모드 인용문 박스 테두리 */
[data-theme="light"] .border-l-\[3px\].border-primary-gold,
[data-theme="light"] div.border-l-\[3px\].border-primary-gold {
    border-left-color: #0066cc !important;
}

/* 라이트 모드 인용문 cite */
[data-theme="light"] cite.text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드 인용문 번호 원 */
[data-theme="light"] span.bg-primary-gold.text-primary-dark,
[data-theme="light"] .bg-primary-gold.rounded-full {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

/* 라이트 모드에서 bg-primary-gold 배경색을 파란색으로 변경 */
[data-theme="light"] .bg-primary-gold,
[data-theme="light"] button.bg-primary-gold,
[data-theme="light"] a.bg-primary-gold,
[data-theme="light"] div.bg-primary-gold,
[data-theme="light"] span.bg-primary-gold {
    background-color: #0066cc !important;
}

/* 라이트 모드에서 hover 시 bg-primary-gold를 파란색으로 변경 */
[data-theme="light"] button:hover.bg-primary-gold,
[data-theme="light"] a:hover.bg-primary-gold {
    background-color: #0066cc !important;
}

/* 라이트 모드에서 bg-primary-gold 배경 위의 텍스트를 흰색으로 변경 */
[data-theme="light"] .bg-primary-gold,
[data-theme="light"] .bg-primary-gold *,
[data-theme="light"] button.bg-primary-gold,
[data-theme="light"] button.bg-primary-gold *,
[data-theme="light"] a.bg-primary-gold,
[data-theme="light"] a.bg-primary-gold *,
[data-theme="light"] div.bg-primary-gold,
[data-theme="light"] div.bg-primary-gold *,
[data-theme="light"] span.bg-primary-gold,
[data-theme="light"] span.bg-primary-gold * {
    color: #ffffff !important;
}

/* 라이트 모드에서 bg-primary-gold와 함께 사용되는 text-primary-dark를 흰색으로 */
[data-theme="light"] .bg-primary-gold.text-primary-dark,
[data-theme="light"] .bg-primary-gold .text-primary-dark {
    color: #ffffff !important;
}

/* 라이트 모드 태그 스타일 */
[data-theme="light"] span.bg-primary-gold\/10,
[data-theme="light"] .bg-primary-gold\/10 {
    background-color: rgba(0, 102, 204, 0.1) !important;
}

[data-theme="light"] span.border-primary-gold\/30,
[data-theme="light"] .border-primary-gold\/30 {
    border-color: rgba(0, 102, 204, 0.3) !important;
}

[data-theme="light"] .border-primary-gold\/20 {
    border-color: rgba(0, 102, 204, 0.2) !important;
}

[data-theme="light"] .border-primary-gold\/40 {
    border-color: rgba(0, 102, 204, 0.4) !important;
}

[data-theme="light"] .border-primary-gold\/50 {
    border-color: rgba(0, 102, 204, 0.5) !important;
}

[data-theme="light"] .border-primary-gold\/10 {
    border-color: rgba(0, 102, 204, 0.1) !important;
}

[data-theme="light"] .border-t.border-primary-gold\/10,
[data-theme="light"] li.border-t.border-primary-gold\/10 {
    border-top-color: rgba(0, 102, 204, 0.1) !important;
}

[data-theme="light"] .border-b.border-primary-gold\/30,
[data-theme="light"] div.border-b.border-primary-gold\/30 {
    border-bottom-color: rgba(0, 102, 204, 0.3) !important;
}

[data-theme="light"] .border-r.border-primary-gold\/30,
[data-theme="light"] aside.border-r.border-primary-gold\/30 {
    border-right-color: rgba(0, 102, 204, 0.3) !important;
}

[data-theme="light"] .border.border-primary-gold\/30,
[data-theme="light"] div.border.border-primary-gold\/30,
[data-theme="light"] button.border.border-primary-gold\/30 {
    border-color: rgba(0, 102, 204, 0.3) !important;
}

[data-theme="light"] .border-2.border-primary-gold\/50,
[data-theme="light"] div.border-2.border-primary-gold\/50 {
    border-color: rgba(0, 102, 204, 0.5) !important;
}

/* 라이트 모드 진행률 바 */
[data-theme="light"] #progressBar.bg-gradient-to-r {
    background: linear-gradient(to right, #0066cc, #004499) !important;
}

[data-theme="light"] #chapterProgressBar.bg-gradient-to-r {
    background: linear-gradient(to right, #004499, #0066cc) !important;
}

/* 라이트 모드 구분선 */
[data-theme="light"] .bg-gradient-to-r.from-transparent.via-primary-gold,
[data-theme="light"] .bg-gradient-to-r.from-primary-gold {
    background: linear-gradient(to right, transparent, #0066cc, transparent) !important;
}

/* 라이트 모드 사이드바 헤더 배경 */
[data-theme="light"] #sidebar > div:first-child.bg-gradient-to-br.from-primary-gold\/10 {
    background: rgba(0, 102, 204, 0.1) !important;
}

/* 라이트 모드 accent 색상 (range input 등) */
[data-theme="light"] .accent-primary-gold,
[data-theme="light"] input[type="range"] {
    accent-color: #0066cc !important;
}

/* 붉은 점선 박스 내부 텍스트 색상 개선 - 더 강력한 선택자 사용 */
div[class*="bg-accent-burgundy"] p[class*="text-text-light"],
div[class*="bg-accent-burgundy"] [class*="text-text-light"],
.bg-accent-burgundy\/15 p[class*="text-text-light"],
.bg-accent-burgundy\/15 [class*="text-text-light"] {
    color: #e8e2d4 !important;
}

/* 그리스어 해설 박스 내부 텍스트 색상 개선 */
div[class*="bg-primary-navy"] p[class*="text-text-light"],
div[class*="bg-primary-navy"] [class*="text-text-light"],
.bg-primary-navy\/40 p[class*="text-text-light"],
.bg-primary-navy\/40 [class*="text-text-light"],
.bg-primary-navy\/60 p[class*="text-text-light"],
.bg-primary-navy\/60 [class*="text-text-light"] {
    color: #e8e2d4 !important;
}

/* 라이트 모드에서도 가독성 개선 - 박스 내부 텍스트 */
[data-theme="light"] div[class*="bg-accent-burgundy"] p[class*="text-text-light"],
[data-theme="light"] div[class*="bg-accent-burgundy"] [class*="text-text-light"],
[data-theme="light"] .bg-accent-burgundy\/15 p[class*="text-text-light"],
[data-theme="light"] .bg-accent-burgundy\/15 [class*="text-text-light"],
[data-theme="light"] .bg-primary-gold\/5 p[class*="text-text-light"],
[data-theme="light"] .bg-primary-gold\/5 [class*="text-text-light"] {
    color: #1a1a2e !important;
    opacity: 1 !important;
}

[data-theme="light"] div[class*="bg-primary-navy"] p[class*="text-text-light"],
[data-theme="light"] div[class*="bg-primary-navy"] [class*="text-text-light"],
[data-theme="light"] .bg-primary-navy\/40 p[class*="text-text-light"],
[data-theme="light"] .bg-primary-navy\/40 [class*="text-text-light"],
[data-theme="light"] .bg-primary-navy\/60 p[class*="text-text-light"],
[data-theme="light"] .bg-primary-navy\/60 [class*="text-text-light"] {
    color: #1a1a2e !important;
    opacity: 1 !important;
}

/* 라이트 모드에서 폰트 크기 인디케이터 스타일 */
[data-theme="light"] #fontSizeIndicator {
    background-color: #ffffff !important;
    border-color: rgba(0, 102, 204, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #fontSizeIndicator span,
[data-theme="light"] #fontSizeIndicator .text-primary-gold {
    color: #0066cc !important;
}

/* 라이트 모드에서 토스트 메시지 스타일
   - 배경: 파란색 (#0066cc)
   - 글자: 흰색 (#ffffff)
   - 처음 디자인처럼 유지 */
[data-theme="light"] .bg-primary-gold.text-primary-dark,
[data-theme="light"] div[class*="bg-primary-gold"][class*="text-primary-dark"] {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 102, 204, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 테마 전환 버튼 */
.theme-toggle-btn {
    transition: all 0.3s ease;
}

/* 라이트 모드에서 표지 배경을 푸른 느낌으로 변경 */
[data-theme="light"] #cover {
    background: radial-gradient(circle at 20% 30%, rgba(102, 178, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(135, 206, 250, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, rgba(230, 240, 255, 0.3) 0%, rgba(240, 248, 255, 0.5) 100%) !important;
}

/* 언어 Select Box 스타일 */
#languageSelect {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a227' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    /* 역삼각형을 오른쪽 중앙에 오도록 위치 조정 */
    background-position: calc(100% - 0.6rem) 50% !important;
    background-position-x: calc(100% - 0.6rem) !important;
    background-position-y: 50% !important;
    background-size: 12px;
    padding-right: 2rem;
    background-color: transparent !important;
}

/* select 요소의 기본 배경 패턴 제거 (languageSelect 제외) */
select:not(#languageSelect) {
    background-image: none !important;
    background-repeat: no-repeat !important;
}

#languageSelect option {
    background-color: #16213e;
    color: #f5f0e1;
}

[data-theme="light"] #languageSelect {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b82f6' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
}

[data-theme="light"] #languageSelect option {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 공유 메뉴 스타일 */
#shareMenu {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    background-color: #16213e !important; /* 다크 모드 기본 배경색 */
}

.share-option {
    font-size: 0.875rem;
    background-color: transparent !important; /* 기본 배경은 투명 */
}

/* 데스크톱 헤더 공유 메뉴 옵션 hover 스타일 */
#shareMenu .share-option:hover {
    background-color: #1967d2 !important; /* hover 시 파란색 */
    color: #ffffff !important;
}

#shareMenu .share-option:hover * {
    color: #ffffff !important;
}

[data-theme="light"] #shareMenu {
    background-color: #ffffff !important; /* 라이트 모드 배경색 */
    border-color: var(--border-color) !important;
}

[data-theme="light"] #shareMenu .share-option {
    color: var(--text-primary) !important;
    background-color: transparent !important; /* 기본 배경은 투명 */
}

[data-theme="light"] #shareMenu .share-option:hover {
    background-color: #1967d2 !important; /* hover 시 파란색 */
    color: #ffffff !important;
}

[data-theme="light"] #shareMenu .share-option:hover * {
    color: #ffffff !important;
}

/* 모바일용 공유 모달 - 최상위 레이어 */
#shareModal {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
    isolation: isolate !important;
    overflow: auto !important;
}

#shareModal:not(.hidden) {
    display: flex !important;
}

#shareModal * {
    pointer-events: auto !important;
}

#shareModal.hidden {
    display: none !important;
    visibility: hidden !important;
}

#shareModal .share-modal-content {
    position: relative !important;
    z-index: 100000 !important;
    backdrop-filter: blur(10px);
    isolation: isolate !important;
    background-color: #ffffff !important; /* 다크모드에서도 흰색 배경 */
}

/* 모달 오버레이 배경 - 푸른색 */
#shareModal::before {
    content: '';
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(30, 58, 138, 0.7) !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
}

/* 다크모드에서 모달 콘텐츠 텍스트 색상 */
[data-theme="dark"] #shareModal .share-modal-content,
#shareModal .share-modal-content {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

[data-theme="dark"] #shareModal .share-modal-content h2,
#shareModal .share-modal-content h2 {
    color: #1a1a2e !important;
}

[data-theme="dark"] #shareModal .share-modal-content p,
#shareModal .share-modal-content p {
    color: #4a5568 !important;
}

[data-theme="dark"] #shareModal .share-modal-content .share-option,
#shareModal .share-modal-content .share-option {
    color: #1a1a2e !important;
}

[data-theme="light"] #shareModal .share-modal-content {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e !important;
}

/* 모바일에서만 모달 표시 */
@media (min-width: 768px) {
    #shareModal {
        display: none !important;
    }
}


/* 라이트 모드 사이드바 헤더 */
[data-theme="light"] #sidebar > div:first-child {
    background: transparent !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="light"] #sidebar h2 {
    color: var(--text-primary) !important;
}

/* 창조 동사 원칙 박스 - 행간 여백 제거 */
.creation-principle p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
.creation-principle p.text-primary-gold {
    margin-bottom: 0.25rem;
}

/* 하단 이전/다음 버튼 hover 스타일 - 다크 모드에서는 금색, 라이트 모드에서는 파란색 */
#prevChapterBtn:hover,
#nextChapterBtn:hover {
    color: #c9a227 !important;
}

[data-theme="light"] #prevChapterBtn:hover,
[data-theme="light"] #nextChapterBtn:hover {
    color: #0066cc !important;
}

/* 타원 배경색 유지 - 악과 선 타원 (최우선 적용) */
.evil-oval,
.evil-oval.w-14,
.evil-oval.h-8,
.evil-oval.rounded-full,
main .evil-oval,
main div.evil-oval,
div.evil-oval,
body .evil-oval,
body main .evil-oval,
body main div.evil-oval {
    background-color: #dc2626 !important;
    background: #dc2626 !important;
    background-image: none !important;
}

.good-oval,
.good-oval.w-14,
.good-oval.h-8,
.good-oval.rounded-full,
main .good-oval,
main div.good-oval,
div.good-oval,
body .good-oval,
body main .good-oval,
body main div.good-oval {
    background-color: #16a34a !important;
    background: #16a34a !important;
    background-image: none !important;
}

/* 타원 내부 텍스트는 배경색 제거 */
.evil-oval *,
.good-oval * {
    background-color: transparent !important;
    background: transparent !important;
}

/* 라이트 모드에서 첫아담 다이어그램의 붉은색 텍스트들 - 첫아담, 육의 열매 사망의 열매, 죽게 됨, 죽음과 저주 */
[data-theme="light"] .adam-diagram-red {
    color: #dc2626 !important;
}

/* 라이트 모드에서 마지막 아담 다이어그램의 파란색 텍스트들 - 마지막 아담, 육의 열매 영생의 열매, 변화 됨, 영 원 한, 생명과 축복 */
[data-theme="light"] .adam-diagram-blue {
    color: #2563eb !important;
}

/* 독자 반응 섹션 공유하기 버튼 테두리 제거 및 hover 효과 제거 */
#readerShareBtn {
    border: none !important;
    background-color: transparent !important;
    cursor: default !important;
    pointer-events: auto !important;
}

#readerShareBtn:hover,
#readerShareBtn:focus,
#readerShareBtn:active {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* 헤더 공유하기 버튼 테두리 - 목차 버튼과 동일하게 */
header button#shareBtn.border,
header #shareBtn.border,
header button#shareBtn,
header #shareBtn {
    border: 1px solid rgba(201, 162, 39, 0.3) !important; /* 다크 모드 기본 */
    border-width: 1px !important;
    border-style: solid !important;
}

[data-theme="light"] header button#shareBtn.border,
[data-theme="light"] header #shareBtn.border,
[data-theme="light"] header button#shareBtn,
[data-theme="light"] header #shareBtn {
    border: 1px solid rgba(0, 102, 204, 0.3) !important; /* 라이트 모드: 목차와 동일 */
    border-width: 1px !important;
    border-style: solid !important;
}

/* 라이트 모드 좋아요 버튼 배경색 - 옅은 파란색 */
[data-theme="light"] #likeBtn {
    background-color: rgba(59, 130, 246, 0.1) !important; /* 옅은 파란색 */
}

/* 공유 카운터 기본 색상 (다크 모드) */
#shareCount,
.share-count {
    color: #c9a227 !important;
}

/* 다크 모드에서 공유 카운터를 금색으로 표시 */
[data-theme="dark"] #shareCount,
[data-theme="dark"] .share-count,
[data-theme="dark"] span#shareCount,
[data-theme="dark"] button #shareCount,
[data-theme="dark"] #readerShareBtn #shareCount,
[data-theme="dark"] #readerShareBtn .share-count {
    color: #c9a227 !important;
}

/* 라이트 모드에서 공유 카운터를 파란색으로 유지 */
[data-theme="light"] #shareCount,
[data-theme="light"] .share-count,
[data-theme="light"] span#shareCount,
[data-theme="light"] button #shareCount,
[data-theme="light"] #readerShareBtn #shareCount,
[data-theme="light"] #readerShareBtn .share-count {
    color: #2563eb !important;
}

/* 모바일에서 메인 콘텐츠 중앙 정렬 보장 */
@media (max-width: 1024px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    main#mainContent {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    main#mainContent > div {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}