/* ==========================================================================
   1. 전역 변수 및 기본 스타일
   ========================================================================== */
:root {
    /* (기존 변수 선언 유지) */
    --bg-color-main: #ffffff;
    --bg-color-page: #f0f2f5;
    --text-color: #212529;
    --text-color-secondary: #5f6368;
    --link-color: #1a0dab;
    --border-color: #dfe1e5;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --search-button-bg-color: #4285F4;
    --weight-text-color: #007bff;

    --card-bg-color: rgb(250, 250, 250);
    --card-shadow-color: rgba(0, 0, 0, 0.1);
    --card-border-color: #e0e0e0;
    --card-text-color-secondary: rgb(108, 117, 125);

    --meta-tag-bg-color: rgb(233, 236, 239);
    --meta-tag-text-color: rgb(108, 117, 125);

    --accuracy-tag-bg-color: rgb(232, 246, 236);
    --accuracy-tag-text-color: rgb(0, 169, 71);

    /* 💡 [신규] 하이라이트 색상 변수 */
    --highlight-bg-color: #FFD54F; /* 형광펜 노란색 */
    --highlight-text-color: #000000;
}

body.dark-mode {
    /* (다크모드 변수 유지) */
    --bg-color-main: #202124;
    --bg-color-page: #131314;
    --text-color: #e8eaed;
    --text-color-secondary: #bdc1c6;
    --link-color: #8ab4f8;
    --border-color: #3c4043;
    --search-button-bg-color: #8ab4f8;
    --weight-text-color: #8ab4f8;

    --card-bg-color: #292a2d;
    --card-shadow-color: rgba(0, 0, 0, 0.5);
    --card-border-color: #3c4043;
    --card-text-color-secondary: #bdc1c6;

    --meta-tag-bg-color: #343a40;
    --meta-tag-text-color: #adb5bd;

    --accuracy-tag-bg-color: #1c3d2f;
    --accuracy-tag-text-color: #81c995;

    /* 💡 [신규] 하이라이트 다크모드 색상 변수 */
    --highlight-bg-color: #FBC02D; /* 조금 더 진한 노란색 */
    --highlight-text-color: #000000;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color-page);
    color: var(--text-color);
    margin: 0; padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

/* ==========================================================================
   2. 레이아웃
   ========================================================================== */
.container {
    width: 90%; max-width: 1400px;
    margin: 0 auto; background-color: var(--bg-color-main);
    padding: 2rem 2.5rem; border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    box-sizing: border-box;
}
.search-controls, footer { max-width: 100%; margin: auto; }
main { position: relative; }

/* ==========================================================================
   3. 헤더 및 검색 컨트롤
   ========================================================================== */
header { text-align: center; margin-bottom: 2rem; }
header h1 { font-size: 28px; font-weight: 700; margin: 0; }

.search-form { flex-grow: 1; }
.search-bar-wrapper {
    display: flex; align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 8px 0 20px; height: 46px;
    flex-grow: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}
.search-bar-wrapper:hover, .search-bar-wrapper:focus-within {
    box-shadow: 0 1px 6px rgba(32,33,36,0.48);
    border-color: rgba(223,225,229,0);
}
#search-input {
    flex-grow: 1; border: none; outline: none; padding: 0 10px;
    font-size: 16px; background-color: transparent; color: var(--text-color);
    height: 100%;
}
.search-bar-buttons { display: flex; align-items: center; }
.search-bar-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 0 8px; margin: 0 2px;
    display: flex; align-items: center; justify-content: center;
    height: 40px; width: 40px;
    border-radius: 50%;
    transition: background-color 0.2s;
    position: relative;
}
.search-bar-btn:hover { background-color: var(--bg-color-page); }

.search-icon, .settings-icon, .mic-icon {
    width: 24px; height: 24px;
    fill: var(--text-color-secondary);
}
body.dark-mode .search-icon { fill: #8ab4f8; }

#mic-btn.is-listening:disabled .mic-icon,
#mic-btn.is-listening .mic-icon {
    animation: pulse 1.5s infinite;
    fill: #DB4437;
}
#mic-btn:disabled .mic-icon {
    fill: var(--border-color);
}
/* ✅ [추가] 비활성화된 설정 아이콘 색상 변경 규칙 */
#settings-btn:disabled .settings-icon {
    fill: var(--border-color);
}


.spinner-inline {
    display: none; width: 20px; height: 20px;
    border: 3px solid var(--border-color);
    border-top-color: var(--search-button-bg-color);
    border-radius: 50%; animation: spin 1s linear infinite;
    position: absolute; top: 50%; left: 50%;
    margin-top: -10px; margin-left: -10px;
}
#search-submit-btn.loading .spinner-inline { display: block; }
#search-submit-btn.loading .search-icon { visibility: hidden; }

/* ==========================================================================
   4. 고급 설정
   ========================================================================== */
.options-panel {
    position: absolute; top: 60px; left: 0; width: 100%;
    background-color: var(--bg-color-main); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    padding: 1.5rem; box-sizing: border-box; z-index: 10;
    opacity: 0; transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.options-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.option-group { margin-bottom: 20px; }
.option-group:last-child { margin-bottom: 0; }
.option-group p { margin: 0 0 10px; font-weight: 500; font-size: 14px; }

/* ✅ [추가] 닫기 버튼 스타일 */
.close-options-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--text-color-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    transition: color 0.2s;
}
.close-options-btn:hover {
    color: var(--text-color);
}

.slider-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#weight-slider { flex-grow: 1; }
#weight-value { font-weight: 500; font-size: 14px; color: var(--text-color-secondary); }
#weight-value .accuracy { color: var(--link-color); font-weight: bold; }
#weight-value .similarity { color: #e57373; font-weight: bold; }
body.dark-mode #weight-value .similarity { color: #f28b82; }


.button-group, .theme-options { display: flex; flex-wrap: wrap; gap: 10px; }
.select-btn, .theme-btn {
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
    background-color: var(--bg-color-page);
    color: var(--text-color);
}
.select-btn:hover, .theme-btn:hover {
    border-color: var(--text-color-secondary);
    filter: brightness(95%);
}
body.dark-mode .select-btn:hover, body.dark-mode .theme-btn:hover {
    filter: brightness(120%);
}

.select-btn.active, .theme-btn.active {
    background-color: var(--search-button-bg-color);
    color: #ffffff;
    border-color: var(--search-button-bg-color);
    font-weight: 500;
}
body.dark-mode .select-btn.active, body.dark-mode .theme-btn.active {
    color: #202124;
}

/* ==========================================================================
   5. 검색 결과 카드
   ========================================================================== */
footer { margin-top: 40px; text-align: left; }
.result-header {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* 💡 [신규] 검색어 헤더 하이라이트 */
.result-header mark.query-highlight {
    background-color: var(--accuracy-tag-bg-color);
    color: var(--accuracy-tag-text-color);
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
}

.result-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: 8px; padding: 20px; margin-bottom: 15px;
    box-shadow: none;
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s;
}
.result-card:hover { background-color: var(--bg-color-page); }

.result-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.result-card h3 a {
    color: var(--link-color);
    text-decoration: none;
}
.result-card h3 a:hover { text-decoration: underline; }

.result-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 12px; }
.meta-tag { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }

.meta-tag.info {
    background-color: var(--meta-tag-bg-color);
    color: var(--meta-tag-text-color);
}
.meta-tag.accuracy {
    background-color: var(--accuracy-tag-bg-color);
    color: var(--accuracy-tag-text-color);
    font-weight: 700;
}

.result-snippet {
    color: var(--card-text-color-secondary);
    line-height: 1.6; font-size: 14px; margin: 0; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.result-snippet.expanded { -webkit-line-clamp: unset; }

/* 💡 [신규] 스니펫 내부 형광펜 하이라이트 */
.result-snippet mark {
    background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
    font-weight: 600; /* 살짝 굵게 */
    padding: 0; /* 패딩 없이 자연스럽게 */
    border-radius: 2px;
}

.toggle-btn-container { text-align: right; margin: 12px 0; min-height: 25px; }
.toggle-snippet-btn {
    background-color: var(--meta-tag-bg-color);
    color: var(--meta-tag-text-color);
    padding: 4px 8px; border-radius: 4px; font-size: 12px;
    font-weight: 500; border: 1px solid var(--border-color);
    cursor: pointer; display: none;
}

.result-url { font-size: 14px; color: var(--link-color); word-break: break-all; text-decoration: none; margin-top: 12px; display: block; }

/* ==========================================================================
   6. 기타 (스피너, 애니메이션)
   ========================================================================== */
.spinner { border: 4px solid var(--bg-color-page); border-top: 4px solid var(--search-button-bg-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 40px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* ==========================================================================
   7. 반응형 디자인 (모바일)
   ========================================================================== */
@media (max-width: 768px) {
    body { padding: 0; }
    .container { width: 100%; max-width: 100%; padding: 1rem; border-radius: 0; box-shadow: none; }
    .search-bar-wrapper { padding: 0 8px; }
    .options-panel { top: 55px; border-radius: 8px; }
    .result-card { padding: 15px; }
}

/* ==========================================================================
   8. AI 요약 (RAG) 컨테이너
   ========================================================================== */
.ai-summary-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
    display: none; /* 평소엔 숨겨져 있음 */
}

.ai-summary-container p.loading {
    color: var(--text-color-secondary);
    font-style: italic;
}

/* 답변 생성 완료시 깜빡임 효과 */
.ai-summary-container.done {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* ==========================================================================
   9. AI 답변 메타 정보 (모델명, 시간)
   ========================================================================== */
.ai-summary-container p.ai-meta {
    font-size: 13px;
    color: var(--text-color-secondary);
    font-style: italic;
    margin: 5px 0 0 0;
    padding: 0;
    line-height: 1.4;
    text-align: right; /* 오른쪽에 정렬 */
}

/* AI 주무관 이름은 조금 더 강조 */
.ai-summary-container p.ai-meta:first-of-type {
    font-weight: 500;
}