/* ============================================================
   下載專區　樣式（版面用 Bootstrap 3，這裡只負責調色與版型微調）
   ------------------------------------------------------------
   深紫 #523996 … 面板標題列底 / 大標題文字
   中紫 #7c61b3 … 規格・下載按鈕
   橘色 #e05619 … 手冊按鈕（共用手冊、專屬手冊）
   ============================================================ */
:root{
  --head:#523996;   /* 深紫：標題列底／大標題 */
  --brand:#7c61b3;  /* 中紫：規格・下載按鈕 */
  --brand-d:#63498f;
  --manual:#e05619; /* 橘：手冊按鈕 */
  --manual-d:#c4470f;
}
body{ background:#fff; }

/* ---- 大段落標題：無底線、深紫、置中 ---- */
.dl-h2{ color:var(--head); text-align:center; font-size:21px; font-weight:700; margin:44px 0 16px; }

/* ---- 搜尋框（在「製品仕様書…」大標下方）---- */
.dl-search{ max-width:520px; margin:0 auto 6px; position:relative; }
.dl-search input{ width:100%; box-sizing:border-box; font-size:16px; padding:12px 40px 12px 16px;
  border:2px solid #d9d9e5; border-radius:8px; outline:none; }
.dl-search input:focus{ border-color:var(--brand); }
.dl-search .clr{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border:none; background:none; font-size:20px; color:#aaa; cursor:pointer; display:none; }
.dl-search .clr.show{ display:block; }
.dl-searchhint{ text-align:center; color:#999; font-size:12px; margin:8px 0 22px; }

/* ---- 面板（分類區塊）---- */
.dl-panel{ border-radius:14px; margin-bottom:30px; overflow:hidden; border:1px solid #e7e7ee;
  scroll-margin-top:20px; }   /* 錨點捲動時，標題上方留一點間距 */
.dl-panel .panel-heading{ background:var(--head); color:#fff; border-color:var(--head); padding:0; }

/* 標題列：[箭頭] [標題(置中)] [共用手冊鈕] */
.dl-head{ display:flex; align-items:center; gap:12px; padding:18px 18px; position:relative; }
.dl-head .caret{ flex:0 0 auto; width:23px; height:23px; cursor:pointer; border:none; 
  transition:transform .2s; transform-origin:center; transform:rotate(90deg);   /* 展開＝朝下 */
  background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDgwIDgwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC43LjEwLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMjM2KSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iX+WcluWxpF8xIiBkYXRhLW5hbWU9IuWcluWxpF8xIj4KICAgICAgPHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iODAiIGhlaWdodD0iODAiLz4KICAgICAgPGcgaWQ9Il/lnJblsaRfMS0yIiBkYXRhLW5hbWU9Il/lnJblsaRfMSI+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjMuOCw3OC41Yy0xLjYsMC0zLjMtLjctNC41LTEuOS0yLjUtMi41LTIuNS02LjYsMC05bDI3LjgtMjcuOEwxOS4zLDEyLjJjLTIuNS0yLjUtMi41LTYuNiwwLTlzNi42LTIuNSw5LDBsMzIuMywzMi4zYzEuMiwxLjIsMS45LDIuOCwxLjksNC41cy0uNywzLjMtMS45LDQuNWwtMzIuMywzMi4zYy0xLjIsMS4yLTIuOCwxLjktNC41LDEuOWgwWiIvPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
  background-repeat:no-repeat; background-position:center; background-size:contain; }
.dl-panel.collapsed .dl-head .caret{ transform:rotate(0deg); }   /* 收合＝朝右 */
.dl-head .ttl{ flex:1 1 auto; font-weight:700; font-size:18px; text-align:center;
  cursor:pointer; user-select:none; padding:0 8px 0 15px}
.dl-note{ text-align:center; color:#888; font-size:12px; padding:12px 15px 4px; }

/* 共用手冊鈕（標題列右側，橘色）*/
.btn-shared{ background:var(--manual); color:#fff; border:none; border-radius:6px; padding:10px;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px; }
.btn-shared:hover,.btn-shared:focus{ background:var(--manual-d); color:#fff; }

/* 收合本體 */
.dl-panel.collapsed .dl-body{ display:none; }

/* ---- 機型列 ---- */
.dl-item{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px;
  border-top:1px solid #ececf2; }                 /* 每筆之間分隔線 */
.dl-body .dl-item:first-child{ border-top:none; } /* 第一筆不需上邊線 */
.dl-note + .dl-item{ border-top:none; }           /* 緊接說明文字的那筆：不加分隔線 */
.dl-info{ flex:1 1 auto; min-width:0; }
.dl-model{ font-weight:700; font-size:16px; color:#333; }  
.dl-name{ font-size:16px; color:#666; margin-top:2px; }
.dl-date{ font-size:16px; color:#666; margin-top:2px; }

/* ---- 按鈕（圓角 6px、padding 10px；手機不滿版、同一行）---- */
.dl-actions{ flex:0 0 auto; display:flex; gap:8px; }
.dl-actions .btn{ border-radius:6px; padding:10px; font-size:13px; font-weight:600; color:#fff;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border:none; }
.btn-spec{ background:var(--brand); } .btn-spec:hover,.btn-spec:focus{ background:var(--brand-d); color:#fff; }
.btn-manual{ background:var(--manual); } .btn-manual:hover,.btn-manual:focus{ background:var(--manual-d); color:#fff; }
/* 標題列右側按鈕：更新ログ（底色 #a130f2）；與共用手冊鈕同位置 */
.btn-log{ background:#a130f2; color:#fff; border:none; border-radius:6px; padding:10px;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px; }
.btn-log:hover,.btn-log:focus{ background:#8a1fd6; color:#fff; }
.dl-actions .btn .glyphicon{ top:1px; }

/* ---- 點擊後的外框：換成各按鈕自己的深色版（取代 BS 預設深藍）---- */
.dl-actions .btn:focus, .btn-shared:focus, .btn-log:focus{ outline:none; }
.btn-spec:focus{ box-shadow:0 0 0 3px rgba(82,57,150,.5); }        /* 規格・下載（紫）→ 深紫 #523996 */
.btn-manual:focus,
.btn-shared:focus{ box-shadow:0 0 0 3px rgba(196,71,15,.5); }      /* 手冊・共用手冊（橘）→ 深橘 #c4470f */
.btn-log:focus{ box-shadow:0 0 0 3px rgba(138,31,214,.5); }        /* 更新日誌（紫紅）→ 深紫紅 #8a1fd6 */

/* ---- 搜尋無結果：淺灰圓角方框 ---- */
.dl-empty{ display:none; text-align:center; color:#777; font-size:16px;
  background:#f4f4f6; border:1px solid #e4e4ea; border-radius:12px; padding:36px 24px; margin:0 0 40px; }

/* ---- 手機（≤600px）---- */
@media (max-width:600px){
  .dl-item{ flex-direction:column; align-items:stretch; }
  .dl-actions{ margin-top:10px; justify-content:flex-start; }   /* 按鈕靠左、不滿版、同一行 */
  /* 共用手冊鈕移到標題下方、置中；箭頭固定左側、標題仍置中 */
  .dl-head{ flex-wrap:wrap; justify-content:center; row-gap:10px; }
  .dl-head .caret{ position:absolute; left:12px; width:22px; height:22px;}
  .dl-head .ttl{ flex:1 1 100%; }
  .dl-head .btn-shared, .dl-head .btn-log{ flex:0 0 auto; margin:0 auto; }
}