/* KSS 介面補充樣式（2026-10-30：頁首搜尋框、常見問題搜尋與題目框）
 * 在 tpl/header.php 中排在 layout.css 之後載入；不改 layout.css 原檔
 * 品牌主藍 #1e1eaa、淺藍底 #eef0fb、框線 #ddd
 */
:root {
  --kss-blue: #1e1eaa;
  --kss-blue-soft: #eef0fb;
  --kss-line: #ddd;
  --kss-search-line: #a8a8b4; /* 搜尋框外框：比一般分隔線深，白底上看得清楚（10/29 Wayne） */
  --kss-text: #222;
}

.kss-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 頁首搜尋框（桌機）：圓角膠囊、白底細框、放大鏡在框內右側 ===== */
.header2 .main-search2 {
  top: 0;
  /* 對齊選單文字的中線：選單（.main-menu2）是靠底對齊，文字中線離底部的距離隨寬度變，
     margin-bottom ＝ 文字中線離底距離 − 框高一半（19px）；10/29 用 1281～1920px 實量 */
  align-self: flex-end;
  margin-bottom: 14px;
  flex-shrink: 0;
  margin-left: 12px;
}
@media (max-width: 1680px) {
  .header2 .main-search2 { margin-bottom: 11px; }
}
@media (max-width: 1440px) {
  .header2 .main-search2 { margin-bottom: 6px; }
}
/* 頁首左右留白：原站頁首兩層容器把 .container 的 20px 左右留白拿掉了，
   1441～1680px 時灰色工具列、選單、搜尋框都貼到畫面邊緣。
   限制寬度最多到「畫面寬 − 40px」：左右至少 20px，超過 1720px 時自然接回 1680px 置中，不會跳動。
   1440px 以下原站自己給工具列右邊 20px，搜尋框也對齊 20px。 */
@media (min-width: 1441px) {
  .header2 .header2-block1,
  .header2 .header2-block2 {
    max-width: min(1680px, calc(100% - 40px));
  }
}
@media (max-width: 1440px) {
  .header2 .main-search2 { margin-right: 20px; }
}
.header2 .main-search2 form {
  width: 180px;
  height: 38px;
  border: 1px solid var(--kss-search-line);
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.header2 .main-search2 form:hover {
  border-color: #7c7c8c;
}
.header2 .main-search2 form:focus-within {
  border-color: var(--kss-blue);
  box-shadow: 0 0 0 3px rgba(30, 30, 170, .12);
}
.header2 .main-search2 form input {
  height: 36px;
  padding: 0 40px 0 16px;
  font-size: 1.4rem;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.header2 .main-search2 form button {
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.header2 .main-search2 form button svg {
  width: 18px;
  height: 18px;
}
.header2 .main-search2 form button:focus-visible {
  outline: 2px solid var(--kss-blue);
  outline-offset: 1px;
}
@media (max-width: 1440px) {
  .header2 .main-search2 form {
    width: 160px;
  }
}
/* 1441～1500px：左右留白後德文選單最長，搜尋框縮窄讓出空間，選單才不會換行（10 語實測）
   必須放在基本寬度（180px）與 1440px 規則之後：權重相同時後寫的才生效 */
@media (min-width: 1441px) and (max-width: 1500px) {
  .header2 .main-search2 { margin-left: 8px; }
  .header2 .main-search2 form { width: 140px; }
}

/* ===== 頁首搜尋框（手機展開的搜尋區）：同樣的膠囊形 ===== */
.phone-header2-block-search .phone-header2-main-search form {
  height: 44px;
  border: 1px solid var(--kss-search-line);
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
}
.phone-header2-block-search .phone-header2-main-search form:focus-within {
  border-color: var(--kss-blue);
  box-shadow: 0 0 0 3px rgba(30, 30, 170, .12);
}
.phone-header2-block-search .phone-header2-main-search form input {
  height: 42px;
  border: none;
  border-radius: 999px;
  padding: 0 48px 0 18px;
  font-size: 1.6rem; /* 16px：iOS 點進輸入框時不會自動放大畫面 */
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.phone-header2-block-search .phone-header2-main-search form button {
  right: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.phone-header2-block-search .phone-header2-main-search form button svg {
  width: 20px;
  height: 20px;
}

/* ===== 通用膠囊搜尋框（常見問題頁使用） ===== */
.kss-pill-search {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.kss-pill-search .kss-pill-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 48px 0 20px;
  border: 1px solid var(--kss-search-line);
  border-radius: 999px;
  background: #fff;
  color: var(--kss-text);
  font-size: 1.6rem;
  box-shadow: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.kss-pill-search .kss-pill-input:hover {
  border-color: #bbb;
}
.kss-pill-search .kss-pill-input:focus {
  border-color: var(--kss-blue);
  box-shadow: 0 0 0 3px rgba(30, 30, 170, .12);
}
/* 瀏覽器自帶的清除鈕留著（方便清空），放大鏡在它右邊 */
.kss-pill-search .kss-pill-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--kss-blue);
  pointer-events: none;
}

/* ===== 常見問題：搜尋列（在上方頁籤與分類按鈕之間） ===== */
.kss-faq-search-bar {
  margin-top: 30px;
}
.kss-faq-search-bar + .sub-menu {
  margin-top: 24px;
}
@media (max-width: 640px) {
  .kss-faq-search-bar {
    margin-top: 20px;
  }
  .kss-faq-search-bar + .sub-menu {
    margin-top: 16px;
  }
}

/* ===== 常見問題：題目框（每題一個圓角外框、兩位數編號、三角形箭頭） ===== */
.kss-faq-list {
  margin-bottom: 80px;
}
.kss-faq-item {
  border: 1px solid var(--kss-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s, background-color .2s;
}
.kss-faq-item + .kss-faq-item {
  margin-top: 14px;
}
.kss-faq-item[hidden] {
  display: none !important;
}
.kss-faq-item:hover,
.kss-faq-item.is-open {
  border-color: var(--kss-blue);
}
.kss-faq-item:hover {
  background: var(--kss-blue-soft);
}
.kss-faq-h {
  margin: 0;
  padding: 0;
  font: inherit;
}
.kss-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px 24px;
  border: 0;
  background: none;
  color: var(--kss-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.kss-faq-q:focus-visible {
  outline: 2px solid var(--kss-blue);
  outline-offset: 2px;
}
.kss-faq-no {
  flex-shrink: 0;
  min-width: 2.4em;
  color: var(--kss-blue);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.kss-faq-title {
  flex: 1;
  min-width: 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}
.kss-faq-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--kss-blue);
  transition: transform .25s ease;
}
/* 收合朝下、展開朝上 */
.kss-faq-item.is-open .kss-faq-arrow {
  transform: rotate(180deg);
}

/* 答案：JS 啟用後才收合（is-ready），沒有 JS 時全部直接顯示 */
.kss-faq-a {
  display: grid;
  grid-template-rows: 1fr;
}
.kss-faq-a-inner {
  min-height: 0;
  overflow: hidden;
}
.kss-faq-a-inner > .unreset {
  padding: 0 24px 20px 88px; /* 左邊對齊題目文字：外距 24 + 編號 48 + 間距 16 */
  color: #444;
  font-size: 1.6rem;
  line-height: 1.7;
}
/* 答案從 Word／Google 文件貼進後台時會帶進字級、字型、行高（例：10.5pt 微軟正黑體、行高 1.2），
   網站另外對段落設 18px：答案內一律跟答案區同字級、字型、行高（標題、上下標、small 維持原本大小）（10/30 Wayne 選 A） */
.kss-faq-a-inner > .unreset *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(sup):not(sub):not(small) {
  font-size: inherit !important;
}
.kss-faq-a-inner > .unreset * {
  font-family: inherit !important;
}
.kss-faq-a-inner > .unreset [style*="line-height"] {
  line-height: inherit !important;
}
.kss-faq-list.is-ready .kss-faq-a {
  transition: grid-template-rows .25s ease, visibility 0s linear 0s;
}
.kss-faq-list.is-ready .kss-faq-item:not(.is-open) .kss-faq-a {
  grid-template-rows: 0fr;
  visibility: hidden; /* 收合時答案裡的連結不會被 Tab 到 */
  transition: grid-template-rows .25s ease, visibility 0s linear .25s;
}
.kss-faq-empty {
  margin: 30px 0 0;
  text-align: center;
  color: #666;
  font-size: 1.6rem;
}
.kss-faq-empty:empty {
  display: none;
}

@media (max-width: 960px) {
  .kss-faq-list {
    margin-bottom: 40px;
  }
  .kss-faq-q {
    gap: 12px;
    padding: 15px 16px;
  }
  .kss-faq-no {
    font-size: 1.8rem;
  }
  .kss-faq-title {
    font-size: 1.7rem;
  }
  .kss-faq-a-inner > .unreset {
    padding: 0 16px 16px;
  }
}
@media (max-width: 480px) {
  .kss-faq-item + .kss-faq-item {
    margin-top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kss-faq-list.is-ready .kss-faq-a,
  .kss-faq-list.is-ready .kss-faq-item:not(.is-open) .kss-faq-a,
  .kss-faq-arrow,
  .kss-faq-item {
    transition: none;
  }
}

/* ===== 篩選區塊往下捲時固定在頁首下方（常見問題、產業應用列表頁與內頁共用；10/29 Wayne） =====
   .kss-sticky-filter：搜尋框＋分類按鈕（或只有分類按鈕）包成一塊。
   top 由 js/kss-sticky.js 依「目前固定在畫面上的頁首」底邊設定。
   沒有 JS（或 JS 載入失敗）時不固定、跟著內容捲動：top:0 會跑進固定頁首底下，手機會被頁首蓋住（審查第 2 輪）。
   JS 算好 top 之後才加 is-ready 啟用 sticky。 */
.kss-sticky-filter {
  position: relative;
  z-index: 50; /* 低於頁首（1000），高於內文 */
  padding: 12px 0;
  background: #fff;
  transition: box-shadow .2s;
  /* 換分類後跳到這裡（網址 #kss_faq_filter、#kss_app_filter）：留出固定頁首的高度（桌機 122px、平板手機 71～87px） */
  scroll-margin-top: 122px;
}
@media (max-width: 1280px) {
  .kss-sticky-filter { scroll-margin-top: 88px; }
}
.kss-sticky-filter.is-ready {
  position: -webkit-sticky;
  position: sticky;
}
.kss-sticky-filter.is-stuck {
  box-shadow: 0 8px 12px -10px rgba(0, 0, 0, .25);
}
.kss-sticky-filter .sub-menu {
  margin-top: 0;
}
/* 區塊裡第一塊和分類列之間的距離（常見問題的搜尋列、產業應用的搜尋框） */
.kss-sticky-filter .kss-faq-search-bar,
.kss-sticky-filter .kss-app-search {
  margin-top: 0;
  padding-top: 0;
}
.kss-sticky-filter .kss-faq-search-bar + .sub-menu,
.kss-sticky-filter .kss-app-search + .sub-menu {
  margin-top: 16px;
}
/* 常見問題：區塊前面是上方頁籤 */
.kss-faq-sticky {
  margin-top: 18px;
}
/* 產業應用：區塊前的留白。用有高度的空白塊而不是 margin：
   沒有大圖時這塊是頁面第一個元素，margin 會跟 .main 的 margin（頁首高度）合併而消失 */
.kss-sticky-gap {
  height: 28px;
}
.kss-faq-search-bar[hidden] {
  display: none !important;
}
/* 平板、手機：區塊高度控制在約 110px 內（搜尋框 44＋一排分類約 42＋上下留白） */
@media (max-width: 1024px) {
  .kss-sticky-filter {
    padding: 6px 0;
  }
  .kss-faq-sticky {
    margin-top: 10px;
  }
  .kss-sticky-filter .kss-faq-search-bar + .sub-menu,
  .kss-sticky-filter .kss-app-search + .sub-menu {
    margin-top: 8px;
  }
  .kss-sticky-gap {
    height: 14px;
  }
}

/* ===== 產業應用：搜尋框（列表頁，移到分類上方的膠囊形）（10/29 Wayne 選 B） ===== */
.kss-app-search .kss-pill-search {
  max-width: 560px;
}
.kss-pill-search .kss-pill-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kss-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.kss-pill-search .kss-pill-btn:hover {
  background: var(--kss-blue-soft);
}
.kss-pill-search .kss-pill-btn:focus-visible {
  outline: 2px solid var(--kss-blue);
  outline-offset: 1px;
}

/* ===== 分類按鈕排成一排（.sub-menu.kss-chip-row；產業應用、常見問題共用），桌機左右箭頭、手機手指滑 =====
   沒有 JS（預設）：靠左、保留細捲軸，開頭的分類一定捲得到
   JS 啟用（is-ready）：隱藏捲軸；放得下（is-fit）置中；放不下（is-overflow）靠左＋箭頭＋漸淡 */
.kss-chip-row .container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}
.kss-chip-row ul {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c4c4d0 transparent;
  padding: 2px 0 8px;
}
.kss-chip-row ul::-webkit-scrollbar {
  height: 6px;
}
.kss-chip-row ul::-webkit-scrollbar-thumb {
  background: #c4c4d0;
  border-radius: 3px;
}
.kss-chip-row.is-ready ul {
  scrollbar-width: none;
  padding: 2px 0;
}
.kss-chip-row.is-ready ul::-webkit-scrollbar {
  display: none;
}
/* 放得下時置中：用左右 auto 外距置中（內容變寬時外距自動變 0，不會把開頭推到捲不到的位置） */
.kss-chip-row.is-fit ul li:first-child {
  margin-left: auto;
}
.kss-chip-row.is-fit ul li:last-child {
  margin-right: auto;
}
.kss-chip-row.is-overflow .container {
  padding-left: 72px;
  padding-right: 72px;
}
/* 還有內容的那一側漸淡 */
.kss-chip-row.is-overflow ul {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.kss-chip-row.is-overflow.is-start ul {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}
.kss-chip-row.is-overflow.is-end ul {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
  mask-image: linear-gradient(to right, transparent 0, #000 36px);
}
.kss-chip-row ul li {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.kss-chip-row ul li a {
  white-space: nowrap;
  font-size: 16px;
  padding: 9px 20px;
}
.kss-chip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kss-search-line);
  border-radius: 50%;
  background: #fff;
  color: var(--kss-blue);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.kss-chip-row.is-overflow .kss-chip-arrow {
  display: flex;
}
.kss-chip-arrow-prev {
  left: 20px;
}
.kss-chip-arrow-next {
  right: 20px;
}
.kss-chip-arrow:hover:not(:disabled) {
  background: var(--kss-blue-soft);
  border-color: var(--kss-blue);
}
.kss-chip-arrow:disabled {
  opacity: .3;
  cursor: default;
}
/* 平板、手機：不放箭頭，手指滑 */
@media (max-width: 1024px) {
  .kss-chip-row.is-overflow .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .kss-chip-row .kss-chip-arrow,
  .kss-chip-row.is-overflow .kss-chip-arrow {
    display: none;
  }
}
@media (max-width: 640px) {
  .kss-chip-row ul {
    gap: 8px;
  }
  .kss-chip-row ul li a {
    font-size: 15px;
    padding: 8px 16px;
  }
}

/* ===== 搜尋結果頁：搜尋框改膠囊形（跟頁首、常見問題、產業應用一致；10/29 Wayne） =====
   原站 .search-word form 有自己的方形輸入框＋藍色按鈕樣式，這裡蓋掉；位置維持靠左 */
.search-word .kss-result-search {
  max-width: 560px;
  margin: 0 0 20px; /* 下方保留原站 20px，跟「關鍵字」那行分開 */
  display: block;
}
.search-word .kss-result-search .kss-pill-input {
  width: 100%;
  max-width: none; /* 原站留給旁邊方形按鈕的 calc(100% - 70px) 拿掉，放大鏡在框內 */
  display: block;
  height: 48px;
  margin: 0;
  padding: 0 52px 0 22px;
  border: 1px solid var(--kss-search-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.6rem;
}
.search-word .kss-result-search .kss-pill-input:focus {
  border-color: var(--kss-blue);
  box-shadow: 0 0 0 3px rgba(30, 30, 170, .12);
  outline: none;
}
.search-word .kss-result-search .kss-pill-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kss-blue);
}
.search-word .kss-result-search .kss-pill-btn:hover {
  background: var(--kss-blue-soft);
}

/* ===== 頁尾「請選擇目錄」下拉：箭頭統一成國家/地區那種實心三角形（10/29 Wayne） ===== */
.footer-download2 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M0 0h10L5 6z%27 fill=%27%23333%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 32px !important;
}
.footer-download2 select::-ms-expand {
  display: none;
}

/* ===== 搜尋結果總筆數：關鍵字同一行靠右、灰色（10/30 Wayne） ===== */
.search-word .keyword { display: flex; align-items: baseline; flex-wrap: wrap; }
.search-word .keyword .kss-search-total { margin-left: auto; color: #767676; font-size: 1.5rem; white-space: nowrap; }

/* ===== 文章目錄加寬：跟文章內容同寬，減少標題斷行、縮短頁面（11/02 客戶需求；消息、技術文章、產業應用、解決方案共用） ===== */
.j-titleList-block { display: block; width: 100%; }

/* ===== 技術文章內頁版面（11/11 客戶需求）：右欄「其他技術文章」移到最後、跟手機版一樣（桌機也上下排；規則照 layout.css 960 以下那組，只套技術文章頁） ===== */
.technical-main .news-detail-block { display: block; }
.technical-main .news-detail-block .content-block { width: 100%; padding-right: 0; margin-bottom: 40px; }
.technical-main .news-detail-block .other-block { width: 100%; }

/* ===== 「其他產業應用&解決方案文章」「其他技術文章」卡片（11/11 客戶：一列 4 個、先圖再文字）：技術文章內頁、產業應用內頁共用；圖框與標題照產業應用內頁原本的相關卡片；不用輪播，超過 4 個換行 ===== */
.kss-rel-iapp { margin-top: 40px; }
.kss-rel-iapp-title { font-size: 2.4rem; font-weight: bold; color: var(--kss-blue); }
.kss-rel-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 16px; margin-top: 20px; }
.kss-rel-card a { display: block; }
.kss-rel-card .pic { box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15); }
.kss-rel-card .pic .border { position: relative; padding-bottom: calc((105 / 150) * 100%); text-align: center; overflow: hidden; height: 0; }
.kss-rel-card .pic .border img { max-width: 100%; max-height: 100%; position: absolute; display: block; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #fff; }
.kss-rel-card .title { font-size: 2rem; text-align: center; margin-top: 10px; color: #716e71; overflow-wrap: anywhere; word-break: break-word; } /* 長單字（例如德文）也能在卡片內斷行，不壓到隔壁 */
@media (max-width: 960px) { .kss-rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kss-rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .kss-rel-iapp-title { font-size: 2rem; } .kss-rel-card .title { font-size: 1.6rem; } }