/* ======================================================= */
/* 0. 基礎設定與字體 (Modern Refined) */
/* ======================================================= */
:root {
    --sage-primary: #76bfa2;
    --sage-light: #eef7f4;
    --sage-dark: #3d6b59;
    --bg-gray: #f2f4f3;
}

body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* 假設使用 Inter 或系統無襯線字體 */
    background-color: #FAFAFA; /* 柔和極淺米白 */
    color: #333333; /* 柔和深灰 */
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* 更弱的陰影 */
    padding: 40px 60px;
    border-radius: 12px; /* 柔和圓角 */
}

/* 頂部標題 */
.container h1 {
    font-weight: 400; /* 輕字重 */
    font-size: 36px;
    margin-bottom: 5px;
}

.container p.description {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

/* ======================================================= */
/* 1. 校系選單 (Select) */
/* ======================================================= */
.selector-group {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 40px; /* 增加底部留白 */
    padding: 15px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; /* 增加底部線條，將選單區塊獨立出來 */
}

.selector-group select {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid;
    border-color: #ddd; /* 柔和鼠尾草綠 */
    border-radius: 4px;
    font-size: 16px;
    appearance: none;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.5s;
}

.selector-group select:hover {
    border-color: #55A692; /* 柔和鼠尾草綠 */
    transition: border-color 0.5s;
}

.selector-group select:focus {
    border-color: #55A692; /* 柔和鼠尾草綠 */
    outline: none;
}

/* 🌟 搜尋圖示按鈕樣式 🌟 */
.btn-search-icon {
    /* 重設按鈕樣式 */
    /* flex-grow: 1; */
    padding: 10px 20px;
    border: 1px solid;
    border-color: #ddd; /* 柔和鼠尾草綠 */
    border-radius: 4px;
    font-size: 16px;
    appearance: none;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.5s;
    font-weight: bold;
}

.btn-search-icon:hover {
    border-color: #55A692; /* 柔和鼠尾草綠 */
    outline: none;
}

#search-icon-button {
}

#search-icon-button:hover {
}

/* ======================================================= */
/* 2. 結果顯示區塊 (.results) */
/* ======================================================= */

/* 選中科系的頂部標題 */
.results h2 {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    border-bottom: 3px solid #55A692; /* 柔和鼠尾草綠粗線強調 */
    margin-bottom: 30px;
    padding-bottom: 15px;
}

/* ======================================================= */
/* 3. 最新標準 (115年) 區塊樣式 (突出顯示) */
/* ======================================================= */

.current-criteria-box {
    padding: 0 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    background-color: #f7fcfb; /* 極淺淡綠色背景，柔和突出 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #d4e0dd; /* 淺綠邊框 */
}

.current-criteria-box .box-title {
    color: #55A692; /* 柔和鼠尾草綠 */
    font-size: 24px;
    font-weight: 600;
    /* margin-bottom: 25px; */
}

.box-title {
    white-space: nowrap;
}

h5 {
    color: #333;
    font-size: 15px;
    font-weight: 500;
    /* margin-bottom: 10px; */
    border-left: 3px solid #55A692; /* 左側柔和綠色小標記 */
    padding-left: 8px;
}

/* --- 數據標籤基礎樣式 --- */
.data-tag {
    display: inline-block;
    /* padding: 5px 0; */
    margin-right: 0; /* 🌟 必須移除，避免與 .data-separator 的 margin 重疊 */
    /* margin-bottom: 8px;  */
    font-size: 15px;
    color: #333333; 
}

/* --- 數值 (Multiplier Value) 強調樣式 --- */
.data-tag b {
    color: #77BFA2; /* 🌟 Secondary Soft Teal/Mint Green for emphasis */
    font-weight: 700;
    font-size: 16px;
    border-bottom: none; /* No underline/dot for a cleaner look */
}

/* --- 數據分隔符樣式 (適用於 .join() 插入的分隔符) --- */
.data-separator {
    color: #cccccc; /* 極淺灰色，柔和分隔線 */
    font-size: 1em; /* 與周圍文字大小相同 */
    font-weight: 300; /* 輕字重，降低存在感 */
    margin: 0 8px;   /* 🌟 核心間距：左右各 8px 創造呼吸空間 */
    display: inline-block; /* 確保 margin 屬性可以正確應用 */
    /* 移除 data-tag 上的 margin-right 避免過大的間隔 */
}

/* ======================================================= */
/* 4. 歷史數據區塊 (卡片式 Modern Card Design) */
/* ======================================================= */

/* 歷史數據區塊總標題 */
.results > h3 {
    color: #333; 
    font-size: 22px;
    font-weight: 500; 
    margin-top: 40px;
    margin-bottom: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
}

/* 單一歷史年份數據區塊容器 (卡片) */
.historical-entry-box {
    background-color: #ffffff; /* 卡片背景 */
    padding: 20px;
    border-radius: 8px; /* 柔和圓角 */
    margin-bottom: 25px;
    border: 1px solid #e5e5e5; /* 柔和邊框 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 輕微抬升感 */
    transition: transform 0.2s;
}

.historical-entry-box:hover {
    transform: translateY(-3px); /* 懸停微抬升效果 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

/* 歷史年份與舊系名標題 */
.history-year-title {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: 5px solid #77BFA2; /* 淺綠色強調條 */
    padding-left: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc; 
}

/* 詳細數據標籤 (錄取人數, 分數, 比例) */
.history-row-details {
    /* margin-top: 15px; */
    /* padding-top: 10px; */
    display: flex; /* Flexbox 排列更現代 */
    flex-wrap: wrap;
    gap: 15px;
}

.detail-tag {
    background-color: #f0f3f5; /* 略帶灰藍的淺背景 */
    color: #555;
    padding: 8px 15px;
    border-radius: 20px; /* 圓形標籤 */
    font-size: 14px;
    font-weight: 500;
}

.detail-tag b {
    color: #55A692; /* 柔和鼠尾草綠強調 */
    font-weight: 700;
}

.detail-tag .impossible {
    color: #FF6347
}

/* ======================================================= */
/* 5. 靜態備註區塊 (系統備註與說明) */
/* ======================================================= */

#system-notes-container {
    /* margin-top: 60px; */
    /* padding-top: 30px; */
    border-top: 1px solid #e0e0e0;
}

#system-notes-container h3 {
    color: #444;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.static-notes-box {
    background-color: #f5f5f5; /* 淺灰色塊，視覺上與數據區塊分離 */
    border: none;
    padding: 20px;
    border-radius: 8px;
    font-size: 14px;
    color: #777;
}

.static-notes-box p {
    margin-bottom: 5px;
}

.static-notes-box strong {
    color: #55A692; 
}

.static-notes-box a {
    color: #7f9590; 
}

/* ======================================================= */
/* 6. 響應式設計 (手機適配) */
/* ======================================================= */

@media (max-width: 768px) {
    /* --- 6.1 基礎佈局調整 --- */
    
    body {
        padding: 10px; /* 減少 body 的邊距 */
    }

    .container {
        padding: 20px; /* 減少 container 的內部留白 */
        border-radius: 0; /* 移除圓角，讓內容填滿螢幕 */
        box-shadow: none; /* 移除陰影，提升性能 */
    }

    /* 頂部標題 */
    .container h1 {
        font-size: 28px;
    }

    .container p.description {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    /* --- 6.2 選單堆疊 --- */
    
    .selector-group {
        flex-direction: column; /* 🌟 關鍵：將選單從並排改為垂直堆疊 */
        gap: 15px; /* 調整垂直間距 */
        padding: 15px 0;
        margin-bottom: 30px;
    }

    .selector-group select {
        flex-grow: unset; /* 移除 flex-grow */
        width: 100%; /* 讓選單佔滿整行 */
        padding: 10px;
        box-sizing: border-box; /* 確保 padding 不會導致寬度溢出 */
    }

    /* --- 6.3 結果區塊與卡片優化 --- */

    .results h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* 115年最新標準區塊 */
    .current-criteria-box {
        padding: 20px; /* 減少內部留白 */
        margin-bottom: 30px;
    }

    .current-criteria-box .box-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    h5 {
        font-size: 14px;
        padding-left: 6px; /* 縮小左側標記的間距 */
    }

    /* 歷史數據卡片 */
    .historical-entry-box {
        padding: 15px;
        margin-bottom: 20px;
    }

    .history-year-title {
        font-size: 16px;
        padding-left: 8px;
    }

    /* 詳細數據標籤 (錄取人數, 分數, 比例) */
    .history-row-details {
        gap: 10px; /* 縮小標籤間距 */
    }

    .detail-tag {
        font-size: 13px;
        padding: 6px 12px;
        /* 讓標籤可以分成兩行，避免溢出 */
        flex-basis: auto; 
    }
    
    /* 靜態備註區塊 */
    #system-notes-container {
        margin-top: 30px;
        padding-top: 20px;
    }
    
    .static-notes-box {
        padding: 15px;
        font-size: 13px;
    }
}

#system-notes-container p {
    border-left: 2px solid #979b9a; /* 左側柔和綠色小標記 */
    padding-left: 5px;
}

/* ======================================================= */
/* 8. 懸浮搜尋系統 (Spotlight Style) */
/* ======================================================= */

#spotlight-overlay {
    /* 遮罩層：讓背景變暗並阻擋點擊 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    backdrop-filter: blur(5px); /* 輕微模糊背景 */
    z-index: 2000;
    
    display: none; /* 預設隱藏，等待 F 鍵觸發 */
    
    /* 垂直置中 */
    /* display: flex; */
    justify-content: center;
    align-items: flex-start; /* 讓它靠近頂部，但不是正中央 */
    padding-top: 10vh; /* 從頂部開始 10% */
}

#spotlight-search-box {
    width: 650px;
    max-width: 90%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* 隱藏 suggestion 的邊界 */
    transition: all 0.2s ease-out;
}

#spotlight-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

#spotlight-suggestions {
    max-height: 400px; /* 限制建議列表的最大高度 */
    overflow-y: auto; /* 超出高度時可捲動 */
    position: relative;
    max-height: 400px;
    /* 必須確保沒有 overflow: hidden 在父層干擾 sticky */
}

/* 建議項目樣式 */
.suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    border-top: 1px solid #eeeeee;
    transition: background-color 0.2s;
    font-size: 15px;
}

.suggestion-item:hover,
.suggestion-item.active { /* 'active' 類別用於鍵盤導航選中時 */
    background-color: #e5f0ff; /* 淺藍色高亮 */
    color: #000000;
}

.suggestion-item .dept-name {
    font-weight: 600;
}

.suggestion-item .uni-name {
    color: #666;
    font-size: 13px;
}

/* 大學區段標頭樣式 */
.uni-section-header {
    /* 🌟 核心屬性：黏性定位 */
    position: sticky;
    top: 0; /* 卡在建議列表的最頂端 */
    
    background-color: #f8f9fa; /* 輕微的灰色背景 */
    padding: 8px 20px;
    font-size: 13px;
    font-weight: bold;
    color: #8b8b8b; /* 使用你的綠色主題色 */
    border-bottom: 1px solid #e0e0e0;
    z-index: 10; /* 確保標頭在建議項目之上 */
    
    /* 輕微的磨砂玻璃效果 (可選) */
    backdrop-filter: blur(5px);
    background-color: rgba(248, 249, 250, 0.9);
}

/* 黑夜模式適配 */
body.dark-mode .uni-section-header {
    background-color: rgba(45, 45, 45, 0.95);
    color: #64FFDA;
    border-bottom-color: #444;
}

/* --- 黑夜模式適配 --- */
body.dark-mode #spotlight-search-box {
    background-color: #2a2a2a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

body.dark-mode #spotlight-input {
    background-color: #2a2a2a;
    color: #f0f0f0;
}

body.dark-mode .suggestion-item {
    border-top-color: #333333;
    color: #d0d0d0;
}

body.dark-mode .suggestion-item .uni-name {
    color: #999;
}

body.dark-mode .suggestion-item:hover,
body.dark-mode .suggestion-item.active {
    background-color: #3e3e3e; 
    color: #f0f0f0;
}

/* ======================================================= */
/* 9. 結果顯示動畫樣式 */
/* ======================================================= */

/* 確保 results-display 容器存在 */
#results-display {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* 讓內容在移除時平滑過渡 */
}

/* 數據進入動畫 (Fade-in and Slide-down) */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-20px); /* 從上方 20px 處滑入 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 應用動畫的 Class */
.animate-in {
    animation: fadeInSlide 0.1s ease-out forwards;
}

/* 數據離開動畫 (可選，但推薦) */
.animate-out {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

/* ======================================================= */
/* 10. 動態島成績列 (Dynamic Island Style) */
/* ======================================================= */

#score-island-container {
    position: fixed;
    top: 20px; /* 距離頂部一點距離，產生懸浮感 */
    left: 50%;
    transform: translateX(-50%) scale(0.8); /* 初始縮小 */
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#score-island-container.island-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

#score-island-container p {
    margin: 0;
}

.score-island {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px); /* 磨砂玻璃 */
    padding: 10px 25px;
    border-radius: 50px; /* 膠囊形狀 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.island-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

.score-inputs-group {
    display: flex;
    gap: 8px;
}

/* 隱藏 Input 的上下拉桿 (Spinners) */
.input-unit input {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* 圓形輸入框 */
    border: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background: rgba(255,255,255,0.5);
    outline: none;
    transition: all 0.2s;
    /* 移除箭頭 */
    -moz-appearance: textfield;
}

.input-unit input::-webkit-outer-spin-button,
.input-unit input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-unit input:focus {
    border-color: #55A692;
    background: #fff;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    transform: scale(1.1);
}

#island-close-btn {
    background: rgba(0,0,0,0.05);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#island-close-btn:hover {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4444;
}

/* ======================================================= */
/* 14. 左撇子模式鏡像邏輯 */
/* ======================================================= */

/* 左側感應區樣式 */
#left-hand-trigger {
    position: fixed;
    top: 65%;
    left: 0;
    width: 20px; /* 平時很窄 */
    height: 40%;
    z-index: 4000;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: width 0.3s;
    visibility: hidden;
}

#left-hand-trigger:hover {
    width: 40px; /* 游標靠近時稍微變寬，暗示可以點擊 */
} /* 這他媽的到底有什麼用 我的手指看起來像游標嗎 */

.trigger-indicator {
    width: 10px;
    height: 150px;
    background: rgba(76, 175, 80, 0.3); /* 淡淡的綠色線條提示 */
    border-radius: 0 4px 4px 0;
}

/* --- 核心：左撇子模式下的元件位移 --- */

/* 1. 懸浮按鈕 (FAB) 移到左邊 */
.left-handed .island-trigger {
    right: auto;
    left: 0px;
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.15);
}

/* 2. GSAT Island 移到左邊 */
.left-handed #gsat-island{
    right: auto;
    left: -100px;
    border-radius: 0px 20px 20px 0px;
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.15);
}

.left-handed #gsat-island.active {
    transform: translateX(100px);
}

/* 3. 修改手機版收納 (Tucked) 方向 */
@media (max-width: 768px) {
    /* GSAT Island 從左側縮進去 */
    #left-hand-trigger {
        visibility: visible;
    }

    .left-handed #score-island-container.tucked {
        transform: translateY(-50%) translateX(calc(-100% + 30px)); /* 改為負向位移 */
    }

    .left-handed .score-island {
        border-radius: 0 20px 20px 0; /* 圓角改到右邊 */
    }

    .left-handed #score-island-container.tucked::after {
        left: auto;
        right: 8px; /* 標籤文字移到右緣 */
    }

    /* FAB 從左側縮進去 */
    .left-handed #fab-container.tucked {
        transform: translateX(calc(-100% + 40px));
    }

    .left-handed .fab-button {
        border-radius: 0 20px 20px 0;
    }
}

.to-uac-button {
    border: none;
    background-color: #33333300;
}

.box-title form {
    display: inline;
}

.jump-link {
    /* width:  */
    color: #55A692; /* 預設使用較淡的綠 */
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    z-index: 10;
}

.jump-link svg {
    width: 18px;
    height: 18px;
}

.jump-link:hover {
    background-color: #c6c6c636; /* 淺色底 */
    color: #52a894; /* 深色圖示 */
    transform: scale(1.1);
}


/* --- GSAT island from Ross --- */
/* 側邊觸發標籤 */
.island-trigger {
    position: fixed;
    top: 80%;
    right: 0;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px); /* 磨砂玻璃感 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 10px 5px;
    font-size: 15px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    align-items: center;
    color: black;
}

.spotlight-trigger {
    top: 90%;
}

.trigger-icon { font-size: 18px; writing-mode: horizontal-tb; }
/* --- 極窄智慧島 --- */
.gsat-island {
    position: fixed;
    right: -100px; /* 初始隱藏位置 */
    top: 25%;
    width: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--sage-light);
    border-radius: 20px 0 0 20px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.05);
    z-index: 1001;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px 0;
}

.gsat-island.active {
    transform: translateX(-100px);
}

/* 輸入框清單 */
.score-minimal-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 輸入框樣式 */
.score-input {
    width: 70%;
    padding: 10px 5px;
    border: none;
    border-bottom: 2px solid var(--sage-light);
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--sage-dark);
    outline: none;
    transition: border-color 0.3s;
}

.score-input:focus {
    border-bottom-color: var(--sage-primary);
}

/* 針對 Placeholder 的樣式 */
.score-input::placeholder {
    font-size: 12px;
    color: #ccc;
    font-weight: normal;
}

/* 隱藏數字箭頭 */
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 自動存檔小圓點 */
.status-dot {
    width: 6px;
    height: 6px;
    background: var(--sage-primary);
    border-radius: 50%;
    margin: 15px auto 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.mode-toggle-btn {
    width: 80%;
    margin: 0 auto 15px auto;
    display: block;
    padding: 8px;
    background: var(--sage-light, #e8f3ee);
    color: var(--sage-dark, #3d6b59);
    border: 1px solid var(--sage-primary, #76bfa2);
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-toggle-btn:hover {
    background: var(--sage-primary, #76bfa2);
    color: white;
}

/* 讓容器維持原本的垂直排列 */
.score-minimal-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* --- Desktop 響應式優化 --- */
@media (min-width: 1024px) {
    
    /* 1. 整體佈局改為雙欄 */
    .app-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 左邊搜尋，右邊清單 */
        gap: 30px;
        max-width: 1200px;
        margin: 0 5vh;
        padding: 20px 20px;
        height: 90vh;
    }

    /* 2. 讓右側清單固定（Sticky），滾動左邊時右邊不動 */
    #selected-section {
        position: sticky;
        top: 20px;
        height: calc(100vh - 100px);
        overflow-y: auto;
        background: #fdfdfd;
        border-radius: 24px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    /* 3. 已選卡片在寬螢幕下稍微縮減 padding */
    .dept-item.selected {
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .dept-item.selected:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    }


    /* 5. 搜尋結果改為 Grid 網格佈局，增加效率 */
    #search-results {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
    }

    .info-list p {
        font-size: 18px;
    }

    .dept-comparison {
        font-size: 15px;
    }

    .delete-btn:hover {
        color: #e74c3c;
    }

    .suggestion-section .dept-item:hover  {
        background: var(--sage-light);
        color: var(--sage-dark);
    }
}

/* 針對超大螢幕 (如 2K 螢幕) 的寬度限制 */
@media (min-width: 1600px) {
    .app-container {
        max-width: 1400px;
    }
}