/* -------------------------------------- */
/* 1. 개인화 및 학습 기능 - 테마/색상 조정 */
/* -------------------------------------- */
:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --header-bg: #4a7d65;
    --header-text: #ffffff;
    --memo-color: #fff3cd;
    --search-bg: #e9ecef;
    --main-font: 'Malgun Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --primary-color: #4a7d65;
    --share-bg: linear-gradient(135deg, #a8dadc, #457b9d);
    
    /* [신규] 1번 요청: 글자 크기 CSS 변수 */
    --bible-font-size: 1rem;
    
    /* [신규] 3번 요청: 하이라이트 색상 변수 */
    --highlight-bg: #fffb8f; 
    --highlight-text: #000;

    /* [신규] 2번 요청: 검색 하이라이트 색상 */
    --search-highlight-color: #d90000;
}

/* 다크 모드 */
.dark-mode {
    --bg-color: #212121;
    --text-color: #f8f8f8;
    --header-bg: #1c1c1c;
    --header-text: #bdbdbd;
    --memo-color: #333333;
    --search-bg: #424242;
    --primary-color: #6a9c82;
    --share-bg: linear-gradient(135deg, #2a9d8f, #264653);

    /* [신규] 3번 요청: 하이라이트 색상 (다크) */
    --highlight-bg: #726b00;
    --highlight-text: #f1f1f1;

    /* [신규] 2번 요청: 검색 하이라이트 색상 (다크) */
    --search-highlight-color: #ff5c5c;
}

body {
    font-family: var(--main-font);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* -------------------------------------- */
/* 공통 UI 및 레이아웃 */
/* -------------------------------------- */
.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-title {
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    margin-right: 10px;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: 10px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.icon-btn:hover { opacity: 1; }

.header-icon-group {
    display: flex;
    flex-shrink: 0;
}

#header-controls {
    display: flex;
    align-items: center;
}

.container {
    padding: 20px;
}

/* -------------------------------------- */
/* 2. [신규] 시작 화면: 성경 목록 페이지 */
/* -------------------------------------- */
.book-list-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.book-item {
    padding: 15px 10px;
    text-align: center;
    background-color: var(--bg-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    font-weight: 500;
}
.book-item:hover {
    background-color: var(--search-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dark-mode .book-item {
    border-color: #444;
}

.testament-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    grid-column: 1 / -1; /* 그리드 전체 너비 차지 */
}

/* -------------------------------------- */
/* 3. 성경 읽기: 본문 (main-text) */
/* -------------------------------------- */
.multi-screen-view {
    display: flex;
    gap: 15px;
    min-height: 70vh;
}

.version-pane {
    flex: 1;
    padding: 10px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.version-pane:last-child {
    border-right: none;
}

.single-pane {
    width: 100%;
    border-right: none !important;
}

.bible-text p {
    margin: 15px 0;
    line-height: 1.8;
    border-left: 3px solid transparent;
    padding-left: 10px;
    
    /* [신규] 1번 요청: 글자 크기 변수 적용 */
    font-size: var(--bible-font-size);
    transition: font-size 0.2s ease-in-out, background-color 0.3s;
}

/* [신규] 3번 요청: 하이라이트 스타일 */
.bible-text p.highlighted {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
}

.verse-number {
    font-weight: bold;
    margin-right: 5px;
    color: var(--primary-color);
    /* [신규] 3번 요청: 클릭 가능하도록 커서 변경 */
    cursor: pointer;
    user-select: none; /* 드래그 방지 */
}
.verse-number:hover {
    opacity: 0.7;
}

/* -------------------------------------- */
/* 4. 모달 (공통) */
/* -------------------------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: var(--bg-color);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* [신규] 장 선택 모달 */
#chapter-modal .modal-content {
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.chapter-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding-top: 10px;
}
.chapter-item {
    padding: 12px 0;
    text-align: center;
    background-color: var(--bg-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.chapter-item:hover {
    background-color: var(--search-bg);
}
.dark-mode .chapter-item {
    border-color: #444;
}

/* [수정] 공유 모달 (텍스트 정렬) */
#share-modal .modal-content {
    height: auto;
    max-height: 90vh;
    text-align: left; 
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close:hover, .modal-close:focus {
    color: var(--text-color);
    text-decoration: none;
}

/* -------------------------------------- */
/* 6. [삭제] 공유 이미지 스타일 */
/* -------------------------------------- */
/* #share-image-preview 와 .color-palette 관련 스타일 모두 삭제 */

/* -------------------------------------- */
/* 7. [수정] 기타 UI (메모, 검색) */
/* -------------------------------------- */

/* [삭제] 1번 요청: .nav-controls 삭제 */

/* [참고] .nav-btn은 하단 이동, 모달 버튼 등에서
   계속 사용되므로 삭제하지 않습니다. */
.nav-btn {
    background-color: var(--header-bg);
    color: var(--header-text);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.nav-btn:hover { opacity: 1; }

.memo-list-item {
    background-color: var(--memo-color);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-box {
    padding: 15px 20px;
    background-color: var(--search-bg);
    border-radius: 8px;
    margin-bottom: 20px;
}
.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* [수정] 2번 요청: 검색 컨트롤 (탭 버튼) */
.search-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}
.search-controls-tabs {
    display: flex;
    gap: 5px;
    align-items: center;
}
.search-tab-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: var(--search-bg);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity 0.2s, background-color 0.2s;
}
.dark-mode .search-tab-btn {
    border-color: #555;
}
.search-tab-btn:hover {
    opacity: 1;
}
.search-tab-btn.active {
    background-color: var(--primary-color);
    color: var(--header-text);
    opacity: 1;
    border-color: var(--primary-color);
}
#search-total-count {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0;
}

/* [신규] 2번 요청: '책별 검색' 드롭다운 */
.search-tab-dropdown {
    position: relative;
    display: inline-block;
}
.search-dropdown-content {
    display: none; /* JS로 제어 */
    position: absolute;
    top: 105%; /* 버튼 바로 아래 */
    left: 0;
    background-color: var(--bg-color);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 10;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px 0;
    margin: 0;
}
.search-tab-dropdown.open .search-dropdown-content {
    display: block;
}
.search-dropdown-content li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-book-list-item,
.search-book-list-item-disabled {
    display: block;
    padding: 8px 15px;
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
}
.search-book-list-item:hover {
    background-color: var(--search-bg);
}
.search-book-list-item-disabled {
    color: #999;
}


/* [삭제] 1번 요청: .search-group-header (아코디언 헤더) */
/* [삭제] 1번 요청: .search-group-items (아코디언 컨테이너) */


/* [신규] 5번 요청: 검색 결과 스타일 */
.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.dark-mode .search-result-item { border-bottom-color: #333; }
.search-result-item:hover { background-color: var(--search-bg); }

/* [신규] 2번 요청: 검색 키워드 하이라이트 */
.search-highlight {
    color: var(--search-highlight-color);
    font-weight: bold;
}


/* [신규] 5번 요청: 메모 검색 결과 스타일 */
.memo-search-result {
    background-color: var(--memo-color);
    border-left: 3px solid var(--primary-color);
}
.dark-mode .memo-search-result {
    background-color: #4f4a3c; /* 다크모드용 메모 색상 */
}


/* -------------------------------------- */
/* 8. 반응형 헤더 (틀 깨짐 방지) */
/* -------------------------------------- */
.mobile-menu-container {
    display: none; /* 평소에는 숨김 */
    position: relative;
}
.mobile-dropdown-menu {
    display: none; /* 클릭 시 JS로 'block'으로 변경 */
    position: absolute;
    top: 40px; /* 헤더 바로 아래 */
    right: 0;
    background-color: var(--header-bg);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 110;
    min-width: 170px; /* [수정] 너비 살짝 넓힘 */
}
.mobile-dropdown-menu a {
    color: var(--header-text);
    text-decoration: none;
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-dropdown-menu a:last-child {
    border-bottom: none;
}
.mobile-dropdown-menu a:hover {
    background-color: var(--primary-color);
}

/* -------------------------------------- */
/* 9. 미디어 쿼리 (반응형) */
/* -------------------------------------- */
@media (max-width: 600px) {
    .header-title {
        font-size: 1.0rem; /* 모바일에서 제목 폰트 살짝 줄이기 */
    }
    .header-icon-group {
        display: none;
    }
    .mobile-menu-container {
        display: block;
    }
    .book-list-main-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    /* [신규] 5번 요청: 하단 네비게이션 모바일 반응형 */
    #bottom-nav-section {
        gap: 5px;
    }
    .bottom-search-input {
        /* 검색창을 100% 너비로 */
        flex-basis: 100%;
        margin-top: 5px;
        order: 4; /* 순서 변경: 셀렉트, 이동 버튼 다음 */
    }
    #bottom-search-go {
        order: 5;
    }
    #bottom-book-select { order: 1; }
    #bottom-chapter-select { order: 2; }
    #bottom-nav-go { order: 3; }

    /* [신규] 4번 요청: 모바일에서 책/장 메모 버튼 */
    .memo-btn-inline {
        padding: 4px 8px;
        font-size: 0.75rem;
        margin-left: 5px;
    }

    /* [신규] 3번 요청: 토글 버튼 모바일 */
    #view-controls-section {
        flex-direction: column;
        align-items: stretch;
    }
}

/* -------------------------------------- */
/* 10. [신규] 한글/한자 토글 스위치 */
/* -------------------------------------- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px; 
}
.toggle-switch-container span {
    font-size: 0.9rem;
    color: var(--header-text);
    font-weight: 500;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px; 
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

@media (max-width: 600px) {
    .toggle-switch-container {
        display: none;
    }
}

/* -------------------------------------- */
/* 11. [수정] 각주 및 메모 하이라이트 */
/* -------------------------------------- */

/* [수정] 본문에 삽입될 각주 번호 (Superscript) */
sup.footnote-ref {
    vertical-align: super;
    font-size: 0.75em;
    color: var(--primary-color);
    font-weight: bold;
    margin-left: 2px;
    cursor: pointer;
}

/* 하단 각주 섹션 */
#footnote-section {
    padding: 15px 20px;
    background-color: var(--search-bg);
    border-radius: 8px;
    margin-bottom: 20px;
}

/* [수정] 2번 요청: 개별 삭제 버튼이 사라져서 flex 관련 속성 제거 */
.footnote-item {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
    line-height: 1.6;
}
.footnote-item:last-child {
    border-bottom: none;
}
.dark-mode .footnote-item {
    border-bottom-color: #444;
}

/* [수정] 2번 요청: 클릭 가능하도록 커서, 밑줄 추가 */
.footnote-ref-list {
    color: var(--primary-color);
    font-weight: bold;
    margin-right: 5px;
    cursor: pointer; /* [신규] */
    text-decoration: underline; /* [신규] */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.footnote-ref-list:hover {
    opacity: 0.8;
}

/* [신규] 하단 각주 메모 내용 (요청 사항) */
.memo-content {
    margin-left: 5px;
    font-style: italic; /* 메모 내용 기울임 */
    /* [신규] 줄바꿈 유지를 위해 */
    white-space: pre-wrap; 
}

/* [삭제] 2번 요청: 개별 삭제 버튼은 더 이상 사용하지 않음 */


/* -------------------------------------- */
/* 12. [삭제] 각주 메모 입력란 (하단 목록) */
/* -------------------------------------- */
/* .memo-textarea 스타일 삭제 (모달에서만 사용) */


/* -------------------------------------- */
/* 13. [수정] 4단계 + 5번 요청: 하단 네비게이션 */
/* -------------------------------------- */
#bottom-nav-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-top: 20px;
    background-color: var(--search-bg);
    border-radius: 8px;
    flex-wrap: wrap; /* [신규] 5번: 모바일에서 줄바꿈 허용 */
}

#bottom-nav-section select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

#bottom-nav-section #bottom-book-select {
    flex: 3; /* 책 이름이 기니까 더 넓게 */
}
#bottom-nav-section #bottom-chapter-select {
    flex: 1;
}

#bottom-nav-go {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
}

/* [신규] 5번 요청: 하단 검색창 스타일 */
.bottom-search-input {
    flex: 4; /* 검색창을 넓게 */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-width: 150px; /* 최소 너비 */
}
#bottom-search-go {
    width: 45px;
    height: 45px;
    font-size: 1.3rem; /* 아이콘 크기 조정 */
    background-color: var(--header-bg); /* nav-btn 스타일과 통일 */
    color: var(--header-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}
#bottom-search-go:hover { opacity: 1; }

/* -------------------------------------- */
/* 14. [신규] 5단계: 한자 사전 링크 */
/* -------------------------------------- */
.hanja-link {
    color: #007bff; /* 링크 색상 (파란색 계열) */
    text-decoration: underline;
    font-weight: normal; /* 본문과 동일하게 */
    cursor: pointer;
}
.dark-mode .hanja-link {
    color: #58a6ff; /* 다크모드용 파란색 */
}
.hanja-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* -------------------------------------- */
/* 15. [신규] 드래그 메모 입력창 (모달) */
/* -------------------------------------- */
#memo-input-area {
    width: 98%;
    min-height: 80px;
    padding: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--main-font);
    font-size: 0.95rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}
.dark-mode #memo-input-area {
    border-color: #555;
    background-color: var(--search-bg);
}

/* -------------------------------------- */
/* 16. [수정] 4번 요청: 책/장 메모 버튼 */
/* -------------------------------------- */

/* [수정] 4번 요청: 제목 옆 메모 버튼을 위한 컨테이너 */
.version-title-container {
    display: flex;
    justify-content: flex-start; /* [수정] space-between -> flex-start */
    align-items: center;
}
/* [수정] 4번 요청: 제목 옆 인라인 메모 버튼 스타일 */
.memo-btn-inline {
    background-color: var(--primary-color);
    color: var(--header-text);
    border: none;
    border-radius: 8px;
    padding: 5px 10px; /* 기존 .memo-btn 보다 작게 */
    font-size: 0.85rem; /* 기존 .memo-btn 보다 작게 */
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
    flex-shrink: 0; /* 제목이 길어져도 버튼이 줄어들지 않도록 */
    margin-left: 10px; /* 제목과의 간격 */
}
.memo-btn-inline:hover {
    opacity: 1;
}

/* [신규] 4번 요청: 모달 헤더의 책 메모 버튼 */
#chapter-modal .modal-header .memo-btn-inline {
    font-size: 0.9rem;
    padding: 5px 10px;
    background-color: var(--primary-color);
    color: var(--header-text);
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
    margin-left: 15px; /* 제목과의 간격 */
    margin-right: auto; /* [신규] 닫기 버튼(X)을 오른쪽으로 밀어냄 */
}
#chapter-modal .modal-header .memo-btn-inline:hover {
    opacity: 1;
}


/* -------------------------------------- */
/* 17. [신규] 2번 요청: 각주 수정 모달 */
/* -------------------------------------- */
#edit-footnote-modal .modal-content {
    height: auto;
    max-height: 90vh;
    text-align: left; 
}

/* 드래그 메모 입력창 재사용 */
#edit-memo-input {
    width: 98%;
    min-height: 80px;
    padding: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--main-font);
    font-size: 0.95rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}
.dark-mode #edit-memo-input {
    border-color: #555;
    background-color: var(--search-bg);
}

.edit-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
.edit-modal-buttons .nav-btn {
    width: auto;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1rem;
}
#delete-memo-button {
    background-color: #dc3545; /* 삭제 버튼 (빨간색) */
}
#save-memo-button {
    background-color: var(--primary-color); /* 저장 버튼 (초록색) */
}

/* -------------------------------------- */
/* 18. [삭제] 4번 요청: 책/장 메모 모달 */
/* -------------------------------------- */
/* 관련 스타일 모두 삭제 */


/* -------------------------------------- */
/* 19. [신규] 2번 요청: 헤더 링크 버튼 */
/* -------------------------------------- */
a.header-link-btn {
    font-size: 0.9rem; /* 텍스트에 맞게 폰트 크기 조정 */
    font-weight: bold;
    text-decoration: none; /* 밑줄 제거 */
    background-color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap; /* 줄바꿈 방지 */
}
a.header-link-btn:hover {
    opacity: 0.9;
    background-color: var(--primary-color); /* icon-btn의 기본 호버 효과 덮어쓰기 */
}

/* [신규] 1번 요청: 글자 크기 조절 (헤더) */
.font-control-group {
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,0.1); /* 헤더 배경보다 살짝 어둡게 */
    border-radius: 8px;
    margin-left: 15px;
    overflow: hidden; /* 버튼의 둥근 모서리를 감춤 */
}
.font-control-label {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0 10px;
    color: var(--header-text);
}
.font-control-group .icon-btn {
    font-size: 1.2rem; /* +/- 기호 크기 */
    font-weight: bold;
    margin: 0;
    border-radius: 0; /* 그룹 안에서는 각진 버튼으로 */
    padding: 4px 8px; /* 버튼 크기 살짝 조정 */
}
.font-control-group .icon-btn:hover {
    background-color: rgba(0,0,0,0.2);
}

/* -------------------------------------- */
/* 20. [신규] 3번 요청: 토글 버튼 및 하이라이트 목록 */
/* -------------------------------------- */
#view-controls-section {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.toggle-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    background-color: var(--search-bg);
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
    flex: 1; /* [신규] 버튼이 꽉 차게 */
}
.dark-mode .toggle-btn {
    border-color: #555;
}

.toggle-btn:hover {
    opacity: 1;
}

.toggle-btn.active {
    background-color: var(--primary-color);
    color: var(--header-text);
    opacity: 1;
    border-color: var(--primary-color);
}

#highlight-section {
    padding: 15px 20px;
    background-color: var(--search-bg);
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.highlight-item {
    padding: 12px;
    border-bottom: 1px dotted #ccc;
    cursor: pointer;
}
.dark-mode .highlight-item {
    border-bottom-color: #444;
}
.highlight-item:last-child {
    border-bottom: none;
}
.highlight-item:hover {
    background-color: var(--bg-color);
}
.highlight-item strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
}
.highlight-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}