/* ===== 全域預設設定 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 讓 padding 和 border 包含在元素寬度內 */
}
/*
--sidebar-bg / --sidebar-link / --sidebar-hover 是針對 sidebar 區塊新增的藍灰系配色。
main-content 加入了邊框圓角與陰影，讓右側內容區看起來更像「卡片」。
home-icon 增加了 hover 效果，當滑鼠移過圖示時會微微放大，提升視覺動態感。
*/


/* 專業藍灰色風格強化設定 */
:root {    
    --header-gradient-start:#1f91ad;
    --header-gradient-end:#abcef7;
    --primary-color: #1f91ad;         /* 主色：清爽藍綠 */
    --secondary-color: #023047;       /* 深色標題 / 標籤 */
    --accent-color: #fae8ba;          /* 點綴色：橙黃 */
    --background-color: #ffffff;      /* 主背景：清新藍 */
    --text-color: #333;               /* 主要文字色 */    /* 文字為深灰 */

    /* Sidebar 用色 */
    --sidebar-gradient-start: #1f91ad;  /* sidebar 漸層起點 */
    --sidebar-gradient-end: #abcef7;    /* sidebar 漸層終點 */
    --sidebar-link: #ffffff;            /* sidebar 連結文字 */
    --sidebar-hover: #FB8500;           /* sidebar hover 時的顏色 */
    --white: #ffffff;                   

    /* footer 用色 */
    --footer-gradient-start: #1f91ad;  /* footer 漸層起點 */
    --footer-gradient-end: #abcef7;    /* footer 漸層終點 */

    --main-shadow: rgba(0, 0, 0, 0.1);

    /*Button style */
    --button-color: #42a6e0;
    
}

body, html {
    margin: 0;
    padding-top: 30px;                   /* 預留空間給固定導覽列 */
    padding-bottom: 20px;                   /* 預留空間給固定導覽列 */
    min-height: 100%;
    font-family: 'Segoe UI', sans-serif; /* 字型設定 */
    background-color: var(--background-color);  /* 背景為白 */
    color: var(--text-color);
    line-height: 1.6;                     /* 行高 */     

}

/*控制樣式顯示*/
.hidden {
    display: none !important;
}

/* 標題樣式 */
h1, h2, h3 {
  font-family: "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 1.5em;
  color: #222;
}

/* 段落樣式 */
p {
  font-size: 16px;
  margin-bottom: 1em;
}

/* 主容器（左側選單 + 右側內容區） */
.container {
    display: flex;  /* 使用 Flexbox 水平排列子元素 */
    margin: 0 auto;                  /* 置中對齊 */
    padding: 1rem 0;                 /* 上下間距 */ 
    width: 80%;    /* 寬度佔 80%，左右各留 10% */
    transition: opacity 0.3s ease-in-out; /*淡出動畫*/
}


.main-content {
    flex: 1;  /* 右側內容區佔據剩餘空間 */
    flex-grow: 1 0 auto;  /* grow: 1; shrink: 0; basis: auto */   /* 占據剩下的空間 */
    position: relative;  /* 讓內部的絕對定位以這為參考點 */
    overflow: visible;                    /* ⚠️ 若你希望移除 scrollbar（根據前述），這裡應改為 visible */
}
/* 右側內文樣式（卡片感） */
.main-content-card {  
    padding: 0 20px 30px 20px; /*整體往內縮  移除 padding-top (上（top）→ 右（right）→ 下（bottom）→ 左（left）) */  
    border: 1px solid #eee;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    
}

/* 右側內文樣式（無邊框） */
.main-content-noborder {
    padding: 0;
    border: none;
}

/*
flex-grow: 0：不要放大這個元素，即使有多餘空間也不會放大。
flex-shrink: 0：不要縮小這個元素，即使空間不足也不會縮小。
flex-basis: 10%：這個元素的初始寬度設為容器的 10%。
*/
.top-section {
    flex: 0 0 8%;
    background-color: transparent; /* 可選背景色 */
}

.bottom-section {
    flex: 1; 
    overflow: auto; /* 如果內容過多可捲動 */  
 
}

/* 頁腳樣式 */
footer {   
    position: fixed;                    /* 固定在頁面頂部 */
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.95); /* 微透明白底 */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);     /* 淡淡的陰影 */
    z-index: 1000;              
}


/* 頁腳內部區塊 */
.footer-content {
    display: flex;                      /* 橫向排列 */
    align-items: center;               /* 垂直置中 */
    justify-content: center;           /* 水平居中對齊 */
    padding: 0.5rem 10%;                /* 左右保留 10% 空白 */
}

.footer-content p {
    font-size: 0.6em;  /* 字體大小 (14px or 1.2em(rem): 相對於父元素(根元素)的字體大小來進行調整)*/
}



/* search form (search_compapny.html) */
/* === 表單區塊樣式 === */
.search-form {
    background-color: transparent;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    gap: 0.5rem; /*在子元素之間產生空隙，不會影響外部邊距或內部 padding, 0.5rem 通常等於 8px */
    align-items: center;
    flex-wrap: wrap; /*允許自動換行*/
}

/* === 共用輸入框樣式 === */
.shared-input {
    height: 1.8rem;         /* 統一高度 */
    padding: 0 0.75rem;     /* 水平 padding */
    font-size: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 確保 height 包含 padding 和 border */
}

/* === 個別寬度設定 === */
.input-short {
    width: 150px;
}

.input-medium {
    width: 200px;
}

.input-long {
    width: 400px;
}

.input-fluid {
    width: clamp(150px, 50%, 300px);  /* 輸入框在 100px 和 300px 之間自動調整 */
}

/* search-form所有按鈕的通用樣式 */
.search-form button {
    height: 1.8rem;             /* 統一高度 */
    padding: 0 0.75rem;          /* 水平 padding */
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 0.2rem;
    box-sizing: border-box;
}

/* === 按鈕色系 === */
/* 查詢按鈕 */
.btn-blue {
  background-color: var(--button-color); /* 藍色 */
  color: white;
}

.btn-gray {
  background-color: #6c757d; /* 灰色 */
  color: white;
}



/*for option13.html */
.ai-form-wide-input {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
}

/*文字狀態的button 看起來像「純文字超連結」*/
.text-button {
    all: unset;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.6em;
    margin-bottom: 4px;  /* 控制文字稍微往上，不會破壞底部對齊感 */
    margin-left: 5px;  /*該元素左邊與前一個元素之間留出 15 像素的間距*/
   
}
.text-button:hover {
    text-decoration: none;
    opacity: 0.8; /* 可選的視覺反饋 */    
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    transform: scale(1.05);
   
}







/*index.html*/
.article-item {
    display: flex;
    align-items: flex-start;
    gap: 6px; /* 元素之間的間距 */
    margin-bottom: 6px;    
}

/* 外部框線容器 */
.article-header-box {    
    width: 38%;   
    height: 250px;
    justify-content: flex-start;
    margin: 1.5rem 0 0 0.5rem;
    background-color: #f9f9f9;   
}

/* 卡片樣式，包住標題與時間 */
.article-title-card {
  background-color: #f4f7fe;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  max-width: 500px;
  height: 250px;
}

.article-title-border {
    display:flex;
    background: #fff;
    height: 250px;
    width: 93%; 
    border: 1px solid #eee;
    border-radius: 10px; /* 圓角一致化（跟 .case-left 相同） */
    margin: 50px 10px 10px 10px; /*上  右  下  左;*/  
    
}

/* 標題樣式 */
.article-title {    
    font-weight: bold;
    font-size: 1.5rem;
    word-wrap: break-word;    /* 自動斷行 */
     /*overflow: hidden; 如果內容超出區塊寬度，不顯示超出的部分*/
    white-space: normal;  /*normal 允許換行,  nowrap 不換行，強制整段文字在同一行顯示*/
    text-overflow: ellipsis; /*在被截斷的尾端顯示 …，只在搭配上面兩個屬性時生效*/
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #1a1a1a;    
    height: calc(100% - 50px);
}

/* 發佈時間樣式 */
.article-publish-time {   
    font-size: 0.9em;
    margin-top: 1.5em;  /* 距離 title 下方兩行 */
    margin-bottom: 1em;
    color: #666;
    margin: 0 1em;
}

.article-summary {
    display: flex;
    flex-direction: column;
    flex: 2;
    max-width: 75%;
    padding: 10px;
    margin: 10px;
    line-height :2;
    color: #64748b;
}

.article-summary p {
    margin: 5px 0;
}

.article-content{
    padding: 1rem 8%;                /* 左右保留 10% 空白 */
}


.article-content p
{ 
    color: #64748b;
}

/*自訂縮排，完全控制對齊*/
.article-content li{ 
    color: #64748b;
    /*list-style-position: inside;  /* ⬅️ 這行會讓 marker 也內縮 */
    list-style: none;             /* 移除預設 marker *//* 騰出空間給 bullet */
    position: relative;           /* 必須要設，讓 ::before 的 absolute 有依據 */
    padding-left: 1.5em;          /* 留出空間給自定 marker */
    text-indent: 0;               /* 確保文字從左邊開始 */

}


/* 關鍵字區塊樣式 */
.article-keywords {
    margin-top: auto; /* 讓關鍵字區塊貼近底部 */
    padding-top: 8px;
    height: 15%;
}

/* 關鍵字標籤樣式 */
.keyword-tag {
    display: inline-block;
    background: #e3f2fd;
    color: var(--color_button);
    border-radius: var(--radius);
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    font-size: 0.75em;
}

/*自行放置符號，並精確位置*/
.article-content li::before {
  content: "•";                 /* 自訂 bullet */
  position: absolute;
  left: 0.4em;                      /* 和 li 的左邊對齊 0=將 bullet 放在「li 這個區塊」的最左邊（0 距離） */
  top: 0.15em;                  /* 垂直微調，讓 bullet 與文字對齊 */
}

.expand-toggle {
    color: #007bff;
    cursor: pointer;
    font-size: 0.9em;
}

/*共用button 設定*/
.common-btn {
    display: inline-block;   /* 讓 <a> 包住 SVG */
    text-decoration: none;  /* 移除底線 */
    transition: transform 0.2s ease, /* 加入縮放動畫 */
                box-shadow 0.2s ease; /* 加入陰影動畫 */
}


/* 滑鼠移到按鈕上時的效果 */
.common-btn:hover {
    transform: scale(1.05); /* 放大 5% */
   /* box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* 加入藍色陰影 */
}


/*共用button 設定*/
.read-more-button {
    display: inline-block;   /* 讓 <a> 包住 SVG */
    text-decoration: none;  /* 移除底線 */
    transition: transform 0.2s ease, /* 加入縮放動畫 */
                box-shadow 0.2s ease; /* 加入陰影動畫 */
}

/* 滑鼠移到按鈕上時的效果 */
.read-more-button:hover {
    transform: scale(1.005); /* 放大 0.5% */
   /* box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* 加入藍色陰影 */
}

/* 背景藍色圓角矩形 */
.button-rect {
    fill: var(--color_button); /* Bootstrap 藍 */
    transition: fill 0.2s ease; /* 平滑轉色（保留未來變化） */
} 
.button-text {
    fill: white; /* 文字顏色 */
    font-size: 12px; /* 字體大小 */
    font-family: sans-serif; /* 使用無襯線字型 */
}
/* 白色箭頭樣式 */
.button-arrow {
    fill: white;
}

/*-----------------------------------------------------*/
/* 頁數按鈕樣式 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
}
.page-btn, .nav-btn {
    border: none;
    background: none;
    padding: 6px 12px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.2s;
}
.page-btn.active {
    background: var(--color_button);
    color: #fff;
    border-radius: var(--radius);
    font-weight: bold;
    box-shadow: var(--shadow);
}
.page-btn:not(.active):hover, .nav-btn:hover:not(:disabled) {
    background: #e3f2fd;
}
.nav-btn:disabled {
    color: #aaa;
    cursor: not-allowed;
}
.ellipsis {
    padding: 0 8px;
    color: #888;
    font-size: 1.1em;
}
/*-----------------------------------------------------*/


/*配*/
@media (max-width: 768px) {
  /* 將主容器改為直式排列（sidebar 在上或隱藏）
  sidebar 跟 main-content 改為直排
  */
  .container {
    flex-direction: column;
    height: auto;
    padding-bottom: 80px; /* ✅ 預留底部空間避免被手機底部 UI 遮住 */
  }

  /*寬度 100%、去除右框線*/
  .sidebar {
    width: 100%;
    margin-right: 0;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }

  /* Main content 佔滿寬度，移除陰影與邊框 */
  .main-content {
    width: 100%;
    padding: 10px;
    border: none;
    box-shadow: none;
    padding-bottom: 80px; /* ✅ 再次確保主區域不被遮住 */
  }

  .top-section, .bottom-section {
    flex: none;
    width: 100%;
  }

  /* Header 區塊改為垂直排版 */
  /*導航區塊置中，避免過度壓縮*/
  .header-left h1 {
    font-size: 20px;
    text-align: center;
  }

  .header-right {
    flex-direction: column;
    align-items: center;
    font-size: 14px;
  }

  .header-right .divider {
    display: none;
  }

  /*for search_company.html 查詢欄改為直排，按鈕變滿版*/
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-form input[type="text"],
  .search-form button {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.5rem;
  }

}

/* ===== 建議清單樣式 ===== */
/* 建議清單的容器樣式 */
.suggestions-list {
  position: absolute;       /* 絕對定位在父元素（autocomplete-wrapper） */
  top: 100%;                /* 緊貼在 input 底下 */
  left: 0;
  width: inherit;           /* 繼承父元素（autocomplete-wrapper）的寬度，剛好等於 input-short */
  margin-top: 2px;          /* 與 input 之間留一點空隙 */
  background-color: #fff;   /* 白底，避免文字不易辨識 */
  border: 1px solid #ccc;   /* 淺灰邊線 */
  border-top: none;         /* 取消跟 input 連在一起的上邊線 */
  list-style: none;
  padding: 0;
  max-height: 200px;        /* 最多 200px 高度，超過要捲動 */
  overflow-y: auto;
  display: none;            /* 初始隱藏，只有有建議項目時才顯示 */
  color: rgb(192, 186, 186);              /* 建議文字用灰色 */
  font-style: italic;       /* 建議文字用斜體 */
  z-index: 1000;            /* 確保蓋在其他內容之上 */
}

/* --------------------------------------------------
   2. li 交替背景：奇數列保持純白，
      偶數列套上淺灰色 (如 #f9f9f9)；
      預設文字顏色灰黑 (gray-dark)
   -------------------------------------------------- */
/* 建議列表單一項目 */
.suggestions-list li {
  padding: 8px 12px;
  cursor: pointer;
  color: #bebbbb;               /* 深灰文字 */
  background-color: #ffffff;    /* 預設白底 */
  font-style: normal;           /* 不用斜體 */
  font-weight: 400;
  font-size: 0.8em;
}

/* --------------------------------------------------
   3. 滑鼠／鍵盤選中行的樣式 (灰底深灰字)
   -------------------------------------------------- */
/* 滑鼠滑過或鍵盤上下鍵選中時的背景效果 */
.suggestions-list li.active,
.suggestions-list li:hover {
  background-color: #dddddd;    /* 深一點的灰 (#ddd) */
  color: #777575;               /* 選中後文字加深 */
}

/* --------------------------------------------------
   4. 包住 input+suggestions-list 的 wrapper，
      確保下拉清單不會跑到其他格線以外
   -------------------------------------------------- */
/* 讓 <input id="company-query"> 和 以下的 <ul> 成為同一組，方便用 CSS 定位 */
.autocomplete-wrapper {
  position: relative;       /* 讓下面絕對定位的 suggestions-list 以這裡為參考 *

  display: inline-block;    /* 使寬度剛好包住 input 元素 讓 width: inherit 生效*/
}