/* 動畫效果：點擊時閃一下 */
.bookmark-btn i {
    transition: transform 0.2s ease;
}
.bookmark-btn:active i {
    transform: scale(1.4);
}
/* 強制讓 Modal 顯示在黑幕上方 */
.modal {
    z-index: 1060 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}

:root {
    --content-item-active-right: -23%;
}
@media (min-width: 1900px) {
    :root {
        --content-item-active-right: -23%;
    }
}

#college-template.accordion {
    --bs-accordion-bg: auto;
    --bs-accordion-active-bg: auto;
    /* --bs-accordion-btn-focus-border-color: black; */
    --bs-accordion-btn-focus-box-shadow: none;
}

.search-label-side {
    flex-shrink: 0; 
    min-width: 10%; /* 固定查詢標籤寬度 */
}
/* 未來發展區域的文字標籤佈局 */
.future-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* 未來發展：設定寬度權重，讓它佔據剩餘空間 */
.future-select-box {
    flex: 1 1 auto; /* 自動增長，佔滿剩餘空間 */
    min-width: 250px; /* 確保最小寬度，避免擠壓 */
}
/* 確保 Select 不會超出容器 */
.form-select {
    width: 100%;
}
/* 國考按鈕樣式優化 */
.btn-ncku-gold {
    background-color: #E6E2CF !important;
    color: #5D5B4F !important;
    border: none;
    font-size: 0.85rem;
    padding: 4px 15px;
    height: fit-content; /* 讓高度隨文字縮放 */
}
.item-tag-box {
    position: relative;
    width: 110px;
}
/* 內容切換樣式 */
.content-item .item-content-body{
    transition: opacity 0.3s ease;
    /* 核心修正 */
    width: 85%;            /* 佔滿剩餘空間 */
    word-break: break-all;  /* 遇到長英文或標點強行換行 */
    overflow-wrap: break-word; /* 確保長字串會折行 */
    line-height: 1.6;       /* 增加行高，長句子才好閱讀 */
    padding-right: 15px;    /* 留一點右側間距，避免貼邊 */
}
/* 標籤按鈕樣式 */
.btn-tab {
    text-align: center;
    white-space: nowrap;
    width: 100%;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #444;
    transition: all 0.2s;
}
.btn-tab.active {
    background-color: #f4f0e6;
    border-color: #8b0000;
    color: #8b0000;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}
/* 按鈕外層容器：負責間距與對齊 */
.action-bar {
    display: flex;
    justify-content: flex-start; /* 讓按鈕靠左 */
    margin-bottom: 2rem;       /* 與下方內容的間隔，可依需求調整 */
}
/* 自定義按鈕：初始為白底紅字紅框 */
.btn-outline-custom {
    border: 1px solid #4a0e0e !important;
    color: #4a0e0e !important;
    font-weight: bold;
    padding: 0.4rem 1.2rem;
    transition: all 0.3s ease; /* 增加過渡動畫 */
}
/* 滑鼠移入：變為紅底白字 (顏色互換) */
.btn-outline-custom:hover {
    background-color: #4a0e0e !important;
    color: #ffffff !important;
}
/* 每一組能力指標的容器 */
.ability-item {
    margin-bottom: 1.25rem; /* 每一組之間的距離 */
    border-left: 3px solid #e9e5d8; /* 左側點綴邊框，增加設計感 */
    padding-left: 12px;
}
/* 標題樣式 (原本的 h5 效果) */
.ability-title {
    font-size: 1rem; /* 調整大小 */
    color: #47030F;    /* 深灰色 */
    line-height: 1.4;
}
/* 註解樣式 (原本的 h6 效果) */
.ability-note {
    font-size: 0.9rem; /* 較小的字體 */
    color: #5b5d5f;    /* 輔助灰色 */
    line-height: 1.5;
    letter-spacing: 0.5px; /* 稍微增加字距增加可讀性 */
}
/* 連接圓點 */
.connector-dot {
    position: absolute;
    right: var(--connector-dot-right); /* 剛好落在垂直線上 */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #8b0000;
    border-radius: 50%;
    z-index: 2;
}
.content-item.active .connector-dot {
    position: absolute;
    right: var(--content-item-active-right); /* 剛好落在垂直線上 */
    background-color: #8b0000;
}
/* 內容區塊動畫 */
.content-tab-wrapper {
    width: 95% !important;
    max-width: 800px;
    overflow: hidden; /* 防止收合時內容溢出 */
}
/* 垂直線位置微調 */
.vertical-connector {
    position: absolute;
    left: 125px; 
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #8b0000;
    opacity: 0.2;
}
/*圖示旋轉動畫優化 */
.transition-icon {
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}
/* 內容文字淡入效果 */
.item-content-body {
    animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
/* 內層收合內容區：設定最大高度與捲動 */
.domain-scroll-area {
    max-height: 210px; /* 超過此高度會出現捲動條 */
    overflow-y: auto;
    padding: 12px;
}
/* 1. 設定捲軸整體寬度 */
.domain-scroll-area::-webkit-scrollbar {
    width: 10px; /* 縱向捲軸寬度 */
    height: 10px; /* 橫向捲軸高度 */
}

/* 2. 設定捲軸軌道 (Track) 背景顏色 */
.domain-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1; /* 軌道背景色 */
    border-radius: 10px; /* 圓角 */
}

/* 3. 設定捲軸滑塊 (Thumb) 顏色 */
.domain-scroll-area::-webkit-scrollbar-thumb {
    background: #47030fd5; /* 滑塊顏色 */
    border-radius: 10px; /* 圓角 */
}

/* 4. 滑鼠懸停在滑塊上時的樣式 */
.domain-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #47030F; /* 懸停時的顏色 */
}


/* 課程標籤按鈕 */
.course-tag {
    display: inline-block;
    padding: 6px 16px;
    margin: 4px;
    border: 1px solid #602b35;
    border-radius: 50px;
    font-size: 0.85rem;
    color: #602b35;
    cursor: pointer;
}
.course-tag:hover {
    background: #47030F;
    border:1px solid #47030F;
    color:#fff;
}
/* 分頁按鈕啟動狀態 (酒紅色底線) */
.btn-check:checked + .btn-outline-secondary {
  border-bottom: 6px solid #4a0e0e !important;
  color: #4a0e0e;
  font-weight: bold;
  background: white;
}
.btn-check + .btn-outline-secondary {
  color: var(--bs-btn-color);
  background-color:#f5f5f5;
}

#suggestContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start; /* 確保內容從頂部開始排 */
}
/* 自定義捲軸樣式 (選配，讓 Chrome/Edge 瀏覽器更美觀) */
#suggestContainer::-webkit-scrollbar {
    width: 6px;
}
#suggestContainer::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
#suggestContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* College Belly Tabs */
.college-tabs {
    border-bottom: 1px solid #dee2e6;
}
.college-tabs .nav-link {
    border: none;
    border-top: 6px solid #6E6E6E;
    background-color: #F6F6F6;
    color: black;
    font-weight: bold;
    font-size:1.4em;
    border-radius: 0;
    padding: 10px 15px;
    margin-right: 1px;
}
.college-tabs .nav-link:hover {
    border-top: 6px solid #ababab;
    background-color: #e9ecef;
}
.college-tabs .nav-link.active {
background-color: #EBE6DB;
    border-top: 6px solid #4a0e0e;
}
.college-tabs .nav-link.disabled {
    background-color: transparent;
    border-top: 4px solid #a8a8a8;
    color: #a8a8a8;
}
.college-tabs .nav-link:lang(en) {
    font-size: 1.1em;
}

/* Disable or hide features when no dept is selected */
#college-container[data-mode="college"] [data-college-mode="hide"] {
    display: none;
}

.course-accordion .accordion-item {
    border-radius: 15px!important;
    border: 1px solid #d5d5d5 !important;
    background: #f5f5f5;
}

#contentCollapse .nav-link {
    border: 1px solid #460e0f;
    background-color: transparent;
    color: #460e0f;
    margin: 10px 10px;
    font-size: 1rem;
    /* border-left: 10px solid; */
    font-weight: 600;
}
#contentCollapse .nav-link.active {
    border-left: 10px solid #460e0f;
}


.offcanvas-header {
    flex-wrap: wrap;
}

/* 手機版 */
@media (max-width: 768px) {
    .offcanvas-header .college-title {
        width: 100%;
        margin-bottom: 10px;
    }

    .offcanvas-header .flex-grow-1 {
        width: 100%;
        max-width: 100% !important;
        margin-top: 8px;
    }

    .offcanvas-header .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}
.dept-select-wrap{
    max-width:300px;
}

@media (max-width:768px){
    .dept-select-wrap{
        max-width:100%;
        width:100%;
    }
}