/* 전역 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   CSS Variables System (Custom Properties)
   ========================================= */
:root {
    /* --- Base Colors (Light Mode) --- */
    --bg-body: #f5f7fa;
    --bg-container: #ffffff;
    --bg-element: #ffffff;
    --bg-intro: rgba(255, 255, 255, 0.95);
    --bg-hover-soft: #f8f9ff;
    --bg-hover-hard: #e9ecef;
    --bg-filter-chip: #f8f9ff;

    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-link: #1976d2;

    --border-default: #dddddd;
    --border-light: #eeeeee;
    --border-dark: #999999;
    --border-focus: #667eea;

    --shadow-default: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.3);

    /* --- Brand & Accents -- */
    --primary-color: #667eea;

    /* Orange (Favorites) */
    --accent-orange: #ff9800;
    --accent-orange-bg: #fff3e0;
    --accent-orange-hover: #e65100;

    /* Blue (Pagination, Selected) */
    --accent-blue: #4374d9;
    --accent-blue-bg: #e8f0fe;

    /* Red (Delete/Clear) */
    --accent-delete: #666666;
    --accent-delete-hover: #d32f2f;
    --accent-delete-bg: #ffebee;

    /* Teal (Recent View) */
    --accent-teal: #009688;
    --accent-teal-dark: #00695c;
    --accent-teal-bg: #e0f2f1;

    /* --- Grade Badge Colors (Light) --- */
    --grade-8-bg: #E3F2FD;
    --grade-8-text: #01579B;
    --grade-8-border: #BBDEFB;
    --grade-7-2-bg: #BBDEFB;
    --grade-7-2-text: #01579B;
    --grade-7-bg: #90CAF9;
    --grade-7-text: #01579B;
    --grade-6-2-bg: #64B5F6;
    --grade-6-2-text: #01579B;
    --grade-6-bg: #42A5F5;
    --grade-6-text: white;
    --grade-5-2-bg: #2196F3;
    --grade-5-2-text: white;
    --grade-5-bg: #1E88E5;
    --grade-5-text: white;
    --grade-4-2-bg: #1976D2;
    --grade-4-2-text: white;
    --grade-4-bg: #1565C0;
    --grade-4-text: white;
    --grade-3-2-bg: #0D47A1;
    --grade-3-2-text: white;
    --grade-3-bg: #0C3D8A;
    --grade-3-text: white;
    --grade-3-border: #42A5F5;
    --grade-sp2-bg: #0A3474;
    --grade-sp2-text: white;
    --grade-sp2-border: #64B5F6;

    --grade-sp-bg-grad-start: #082A5E;
    --grade-sp-bg-grad-end: #051A3D;
    --grade-sp-text: #FFD700;
    --grade-sp-border: #FFD700;

    /* Length Badges */
    --length-long-bg: #e3f2fd;
    --length-long-text: #1976d2;
    --length-long-border: #90caf9;
    --length-short-bg: #fff3e0;
    --length-short-text: #f57c00;
    --length-short-border: #ffb74d;
    --length-none-bg: #f5f5f5;
    --length-none-text: #9e9e9e;
    --length-none-border: #e0e0e0;
}

/* --- Dark Mode Variables Overrides --- */
body.dark-mode {
    --bg-body: #1a1a1a;
    --bg-container: #2d2d2d;
    --bg-element: #3a3a3a;
    --bg-intro: #2d2d2d;
    --bg-hover-soft: #3a3a3a;
    --bg-hover-hard: #4a4a4a;
    --bg-filter-chip: #2d2d2d;

    --text-primary: #e0e0e0;
    --text-secondary: #aaaaaa;
    --text-tertiary: #777777;
    --text-link: #64b5f6;

    --border-default: #444444;
    --border-light: #3a3a3a;
    --border-dark: #666666;

    --shadow-default: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.8);

    /* Accents adjusted for Dark Mode */
    --accent-blue-bg: #3a3a3a;
    --accent-teal-dark: #80cbc4;
    --accent-teal-bg: #252525;
    --accent-delete: #aaa;
    --accent-delete-bg: #3a3a3a;

    /* Specific Grade Tweaks for Dark Mode */
    --grade-8-bg: #BBDEFB;
    --grade-7-2-bg: #90CAF9;
    --grade-7-bg: #64B5F6;
    --grade-sp-bg-grad-start: #1565C0;
    --grade-sp-bg-grad-end: #0D47A1;
}

/* Animation Reset in Dark Mode */
body.dark-mode,
body.dark-mode * {
    transition: none !important;
}

/* 스무스 스크롤 */
html {
    scroll-behavior: smooth;
}

/* 스크린 리더 전용 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 20px;
    transition: background 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg-container);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px var(--shadow-strong);
    position: relative; /* 중요: 이것이 절대 위치의 기준점이 됩니다 */
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

h1 {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* 검색 섹션 */
.search-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-container);
    padding: 15px 0;
    margin: 0 0 20px 0;
    box-shadow: 0 2px 8px var(--shadow-default);
    transition: background 0.3s ease;
}

.search-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.search-input-wrapper {
    grid-column: 1 / -1;
    position: relative;
}

#searchInput {
    width: 100%;
    padding: 10px 40px 10px 15px;
    font-size: 1rem;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 2px solid var(--border-default);
    border-radius: 8px;
    transition: all 0.3s;
}

.clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    cursor: pointer;
    display: none;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all 0.2s;
}

.clear-search-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover-hard);
}

#searchInput:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

.filter-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-default);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-element);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* 즐겨찾기 필터 */
.favorites-filter {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 20;
    padding: 10px 0;
}

.favorites-toggle-btn {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 2px solid var(--border-default);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--shadow-default);
}

.favorites-toggle-btn:hover {
    background: var(--accent-orange-bg);
    border-color: var(--accent-orange);
    color: var(--accent-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.favorites-toggle-btn.active {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.favorites-toggle-btn #favoritesCount {
    font-weight: 700;
}

/* 초성 필터 */
.chosung-filter-section {
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-body) 0%, var(--border-default) 100%);
    border-radius: 12px;
}

body.dark-mode .chosung-filter-section {
    background: linear-gradient(135deg, var(--bg-container) 0%, var(--bg-element) 100%);
}

.chosung-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.chosung-btn {
    min-width: 50px;
    padding: 10px 16px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 2px solid var(--border-default);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--shadow-default);
}

.chosung-btn:hover {
    background: var(--bg-hover-hard);
    color: var(--text-primary);
    border-color: var(--border-dark);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px var(--shadow-default);
}

.chosung-btn.active {
    background: var(--bg-hover-hard);
    color: var(--text-primary);
    border: 2px solid var(--border-dark);
    box-shadow: none;
}

.syllable-buttons {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 15px;
    background: var(--bg-element);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.syllable-buttons.show {
    display: flex;
}

.syllable-btn {
    min-width: 45px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    background: var(--bg-hover-soft);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.syllable-btn:hover {
    background: var(--bg-hover-hard);
    color: var(--text-primary);
    border-color: var(--border-dark);
    transform: translateY(-1px);
}

.syllable-btn.active {
    background: var(--bg-hover-hard);
    color: var(--text-primary);
    border-color: var(--border-dark);
    font-weight: 600;
}

.no-syllables-message {
    padding: 15px;
    background: var(--bg-element);
    border-radius: 8px;
    color: var(--text-tertiary);
    text-align: center;
    font-size: 0.9rem;
}

.result-info {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 로딩 메시지 스타일 추가 */
.loading-msg {
    text-align: center;
    padding: 30px;
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--bg-hover-soft);
    margin-bottom: 20px;
    border-radius: 8px;
}

.table-container {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--shadow-default);
    /* 모바일 가로 스크롤바 스타일링 */
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: var(--bg-hover-soft);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-container);
    table-layout: fixed;
    transition: background 0.3s ease;
}

thead {
    background: #4a5568;
    color: white;
}

body.dark-mode thead {
    background: #1a1a1a;
}

th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

th:nth-child(1) { width: 6%; }
th:nth-child(2) { width: 30%; }
th:nth-child(3) { width: 13%; }
th:nth-child(4) { width: 13%; }
th:nth-child(5) { width: 18%; }
th:nth-child(6) { width: 12%; }
th:nth-child(7) { width: 8%; }

td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

body.dark-mode td {
    border-bottom-color: var(--border-default);
}

tbody tr:hover {
    background: var(--bg-hover-soft);
}

.hanja-char {
    font-size: 1rem;
    font-weight: normal;
    color: var(--text-primary);
}

.blog-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.4rem;
    display: inline-block;
    transition: all 0.3s;
    line-height: 1;
}

body.dark-mode .blog-link {
    color: var(--text-link);
}

.blog-link:hover {
    transform: scale(1.2);
    filter: brightness(1.3);
}

/* 장단음 배지 */
.length-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.length-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px var(--shadow-default);
    filter: brightness(1.1);
}

.length-장음 {
    background: var(--length-long-bg);
    color: var(--length-long-text);
    border: 1px solid var(--length-long-border);
}

.length-단음 {
    background: var(--length-short-bg);
    color: var(--length-short-text);
    border: 1px solid var(--length-short-border);
}

.length-없음 {
    background: var(--length-none-bg);
    color: var(--length-none-text);
    border: 1px solid var(--length-none-border);
}

/* 즐겨찾기 별 */
.favorite-star {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: all 0.2s ease;
    filter: grayscale(100%);
    opacity: 0.5;
}

.favorite-star:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.2);
}

.favorite-star.active {
    filter: grayscale(0%);
    opacity: 1;
}

.favorite-star.active:hover {
    transform: scale(1.3) rotate(20deg);
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 30px 20px;
    margin-top: 20px;
}

.pagination>button {
    min-width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.4rem;
    font-weight: 400;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination>button:hover:not(:disabled) {
    background: var(--accent-blue-bg);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.pagination>button:disabled {
    background: var(--bg-element);
    color: var(--border-default);
    border-color: var(--border-light);
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    gap: 3px;
    align-items: center;
}

.page-numbers button {
    min-width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 400;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.page-numbers button:hover {
    background: var(--accent-blue-bg);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.page-numbers button.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    font-weight: 600;
    cursor: default;
}

.page-numbers button.active:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

footer {
    text-align: center;
    margin-top: 30px;
    color: var(--text-secondary);
}

footer a {
    color: var(--text-link);
    text-decoration: underline;
}

/* [수정됨] 다크모드 토글 - 절대 위치 고정 */
.dark-mode-toggle {
    position: absolute; /* .container를 기준으로 위치 고정 */
    top: 30px;          /* 위에서 30px 띄움 */
    right: 30px;        /* 오른쪽에서 30px 띄움 */
    z-index: 100;       /* 항상 맨 위에 표시 */
    margin: 0;
    padding: 0;
    display: block;
}

.dark-mode-btn {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 2px solid var(--border-default);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--shadow-default);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dark-mode-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px var(--shadow-default);
}

/* ============================
   Grade Badges
   ============================ */
.grade-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    min-width: 60px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
}

.grade-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px var(--shadow-strong);
    filter: brightness(1.1);
}

.grade-badge:active {
    transform: translateY(0) scale(1.02);
}

.grade-8 { background: var(--grade-8-bg); color: var(--grade-8-text); border-color: var(--grade-8-border); }
.grade-7-2 { background: var(--grade-7-2-bg); color: var(--grade-7-2-text); }
.grade-7 { background: var(--grade-7-bg); color: var(--grade-7-text); }
.grade-6-2 { background: var(--grade-6-2-bg); color: var(--grade-6-2-text); }
.grade-6 { background: var(--grade-6-bg); color: var(--grade-6-text); }
.grade-5-2 { background: var(--grade-5-2-bg); color: var(--grade-5-2-text); }
.grade-5 { background: var(--grade-5-bg); color: var(--grade-5-text); }
.grade-4-2 { background: var(--grade-4-2-bg); color: var(--grade-4-2-text); }
.grade-4 { background: var(--grade-4-bg); color: var(--grade-4-text); }
.grade-3-2 { background: var(--grade-3-2-bg); color: var(--grade-3-2-text); }
.grade-3 { background: var(--grade-3-bg); color: var(--grade-3-text); border: 2px solid var(--grade-3-border); font-weight: 700; }
.grade-special-2 { background: var(--grade-sp2-bg); color: var(--grade-sp2-text); border: 2px solid var(--grade-sp2-border); font-weight: 700; box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3); }
.grade-special { background: linear-gradient(135deg, var(--grade-sp-bg-grad-start) 0%, var(--grade-sp-bg-grad-end) 100%); color: var(--grade-sp-text); border: 2px solid var(--grade-sp-border); font-weight: 700; box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.grade-default { background: var(--length-none-bg); color: var(--length-none-text); border: 1px solid var(--length-none-border); }

/* Active Filter Chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 15px 0;
    padding: 12px;
    background: var(--bg-hover-soft);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px 12px;
    background: var(--bg-element);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px var(--shadow-default);
    transition: all 0.2s ease;
}

.filter-chip:hover {
    box-shadow: 0 2px 6px var(--shadow-default);
}

.filter-chip-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

.filter-chip-value {
    color: var(--text-primary);
    font-weight: 600;
}

.filter-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--border-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    padding: 0;
}

.filter-chip-remove:hover {
    background: var(--accent-delete-hover);
    color: white;
    transform: scale(1.1);
}

.filter-chip-remove:active {
    transform: scale(0.95);
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-button {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-element);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.dropdown-button:hover {
    border-color: var(--border-dark);
    background: var(--bg-hover-soft);
}

.dropdown-button:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dropdown-label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    margin-left: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-container);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: none;
    flex-direction: column;
}

.custom-dropdown.open .dropdown-menu {
    display: flex;
}

.dropdown-search {
    padding: 10px;
    border-bottom: 1px solid var(--border-light);
}

.dropdown-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-element);
    color: var(--text-primary);
}

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

.checkbox-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    user-select: none;
    color: var(--text-primary);
}

.checkbox-item:hover {
    background: var(--bg-hover-soft);
}

.checkbox-item input[type="checkbox"] {
    margin: 0 8px 0 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.dropdown-footer {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border-light);
}

.dropdown-apply-btn,
.dropdown-reset-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-apply-btn {
    background: var(--primary-color);
    color: white;
}

.dropdown-apply-btn:hover {
    background: var(--border-focus);
}

.dropdown-reset-btn {
    background: var(--length-none-bg);
    color: var(--text-secondary);
}

.dropdown-reset-btn:hover {
    background: var(--border-default);
}

/* Recent History */
.recent-view-btn {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--bg-element);
    color: var(--text-primary);
    border: 2px solid var(--border-default);
    border-radius: 8px;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--shadow-default);
}

.recent-view-btn:hover {
    background: var(--accent-teal-bg);
    border-color: var(--accent-teal);
    color: var(--accent-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 150, 136, 0.2);
}

.recent-modal {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 320px;
    max-height: 500px;
    background: var(--bg-container);
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--shadow-strong);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

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

.recent-header {
    background: var(--accent-teal);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark-mode .recent-header {
    background: var(--accent-teal-dark);
}

.close-recent-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.recent-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--bg-hover-soft);
}

.recent-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-container);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.recent-item:hover {
    background: var(--accent-teal-bg);
}

.recent-item-link {
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

.recent-hanja {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-teal-dark);
    font-family: 'Times New Roman', serif;
}

.recent-hanja sup {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 2px;
    vertical-align: super;
}

.recent-detail {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.delete-recent-btn {
    background: none;
    border: none;
    color: var(--accent-delete);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    margin-left: 5px;
}

.delete-recent-btn:hover {
    color: var(--accent-delete-hover);
}

.recent-footer {
    padding: 10px;
    background: var(--bg-container);
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.clear-recent-btn {
    background: var(--length-none-bg);
    border: 1px solid var(--border-default);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.clear-recent-btn:hover {
    background: var(--accent-delete-bg);
    color: var(--accent-delete-hover);
    border-color: #ffcdd2;
}

.empty-msg {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}

/* Media Queries (모바일 설정 수정됨) */
@media (max-width: 768px) {
    /* 모바일에서 다크모드 버튼 위치 조정 */
    .dark-mode-toggle {
        top: 20px;   /* 위 여백 20px */
        right: 15px; /* 오른쪽 여백 15px */
    }

    .dark-mode-btn {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }

    header {
        padding-right: 50px; /* 버튼과 제목이 겹치지 않게 우측 여백 확보 */
    }

    .favorites-toggle-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .container {
        padding: 15px;
        border-radius: 15px;
    }

    .search-section {
        position: relative; /* 고정 위치 해제, 원래 흐름대로 */
        top: auto;
    }

    h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .search-filter-grid {
        grid-template-columns: 1fr;
    }

    .chosung-filter-section {
        padding: 15px;
    }

    .chosung-btn {
        min-width: 42px;
        padding: 8px 12px;
        font-size: 1rem;
    }

    .syllable-btn {
        min-width: 40px;
        padding: 6px 10px;
        font-size: 0.9rem;
    }

    .syllable-buttons {
        max-height: 200px;
        padding: 10px;
    }

    .table-container {
        margin: 0 -15px;
        border-radius: 0;
        position: relative;
    }

    .table-container::after {
        content: '← 좌우로 스크롤 →';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(102, 126, 234, 0.9);
        color: white;
        text-align: center;
        padding: 8px;
        font-size: 0.75rem;
        z-index: 5;
    }

    table {
        font-size: 0.75rem;
        min-width: 600px;
    }

    th, td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    th:nth-child(1) { width: 40px; }
    th:nth-child(2) { width: auto; min-width: 120px; }
    th:nth-child(3) { width: 80px; }
    th:nth-child(4) { width: 70px; }
    th:nth-child(5) { width: 60px; }
    th:nth-child(6) { width: 60px; }
    th:nth-child(7) { width: 60px; text-align: center; }
    td:nth-child(7) { text-align: center; }

    .hanja-char {
        font-size: 0.85rem;
    }

    .pagination {
        gap: 2px;
        padding: 20px 10px;
    }

    .pagination>button {
        min-width: 28px;
        height: 28px;
        font-size: 1.2rem;
    }

    .page-numbers button {
        min-width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .page-numbers {
        gap: 2px;
    }

    .recent-modal {
        width: 90%;
        right: 5%;
        bottom: 20px;
    }

    .recent-view-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
        margin-left: 5px;
    }
}