/* ============================================================
   誠創媒合 CKPeer — 設計系統(2026/09,依 design/CKPeer 首頁.dc.html)
   殿後載入,覆蓋套版與 WebSettingStyle 的樣式。
   色票:藍 #3A5FAE / 深藍 #2E4C8E / 粉 #EE4A78 / 深粉 #D93C6B /
        橘 #F2874E / 墨 #1F2430 / 次 #5B6070 / 線 #E9EBF1 / 底 #FAFAFB
   ============================================================ */

body{
  background:#FAFAFB !important;
  color:#1F2430 !important;
  font-family:"Noto Sans TC","Manrope",system-ui,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
a{color:#3A5FAE;}
a:hover{color:#EE4A78;}
::selection{background:#EE4A78;color:#fff;}
/* 套版內頁全部 float 造成 body 高度塌陷 → sticky 頁首失效;body 清除浮動撐開高度 */
body::after{content:""; display:block; clear:both;}

/* ---------- 頁首 ---------- */
#header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid #E8E9EE;
  box-shadow:none;
}
#header .page{padding:6px 16px;}
.logo img{height:46px !important; width:auto;}
.syisnav li a{color:#3F4654 !important; font-size:15px; font-weight:500;}
.syisnav li a:hover{color:#EE4A78 !important;}
/* 會員區(TopMenu.ascx.vb 附掛的 li) */
.syisnav li.kol-mfirst{margin-left:auto;}
.syisnav li.kol-login a{color:#3A5FAE !important; padding:8px 14px; border-radius:10px;}
.syisnav li.kol-login a:hover{background:#EEF2FB; color:#3A5FAE !important;}
.syisnav li.kol-signup a{
  color:#fff !important; padding:9px 18px; border-radius:10px; font-weight:700;
  background:linear-gradient(95deg,#3A5FAE,#EE4A78);
  box-shadow:0 6px 18px rgba(238,74,120,0.28);
}
.syisnav li.kol-signup a:hover{filter:brightness(1.06); color:#fff !important;}
.syisnav li.kol-center a{color:#3A5FAE !important; font-weight:700;}
@media screen and (min-width:768px){
  #header .page{display:flex; align-items:center; gap:20px;}
  #header .nav{flex:1;}
  ul.syisnav{display:flex; align-items:center; gap:4px; width:100%;}
  ul.syisnav li{float:none;}
}

/* ---------- 頁尾(深色) ---------- */
#footerTs{background:#1F2430 !important; color:#C9CDD8 !important; margin-top:auto;}
#footerTs a{color:#9AA0B0 !important;}
#footerTs a:hover{color:#fff !important;}
#footerTs .kolfoot-brand img{height:63px; width:auto; filter:brightness(0) invert(1); opacity:.92; display:block; margin-bottom:12px;}
#footerTs .kolfoot-brand p{margin:0; font-size:13.5px; line-height:1.8; color:#8E94A4; max-width:24em;}
/* 套版 Selfedit.css 在聯絡欄後墊了一條 #2e5692 藍帶(::before),移除以維持深色頁尾 */
#footerTs .BottomCntB::before{display:none !important;}
#footerTs .BottomCntB{padding:0 !important; margin-top:0 !important;}
#footerTs .BottomList{display:block !important; border-top:1px solid #31374A; padding:14px 0 0; margin-top:14px;}
#footerTs .BottomList a{font-size:13.5px; margin-right:20px;}
#footerTs .copyright{display:block !important; font-size:13px; color:#9AA0B0; padding:6px 0 22px;}
#footerTs .copyright a{display:none;}  /* 隱藏套版外部連結 */
.fixedbtn{display:none !important;}    /* 懸浮電話/LINE 鈕:本平台不使用 */

/* ---------- 共用元件(內頁) ---------- */
h3.tit{font-weight:800; letter-spacing:-0.3px; color:#1F2430;}
h3.tit .path{color:#8B90A0; font-weight:500;}
.custpg .btn a{
  background:linear-gradient(95deg,#3A5FAE,#EE4A78); color:#fff !important;
  border-radius:11px; font-weight:700; border:none;
  box-shadow:0 6px 18px rgba(58,95,174,0.22);
}
.custpg .btn a:hover{filter:brightness(1.06); color:#fff !important;}
.custpg input[type=text], .custpg input[type=password], .custpg input[type=number],
.custpg input[type=date], .custpg select, .custpg textarea{
  border:1.5px solid #E3E6EF; border-radius:10px; padding:8px 10px;
  font-family:inherit; background:#fff; color:#1F2430;
}
/* 套版 .syisform 有 height:35px 固定高,疊上 padding 會裁字 → 一律放開 */
.custpg input[type=text], .custpg input[type=password], .custpg input[type=number],
.custpg input[type=date], .custpg select{
  height:auto !important; min-height:42px; line-height:1.5;
}
.custpg input:focus, .custpg select:focus, .custpg textarea:focus{outline:none; border-color:#3A5FAE;}
.side .sidetit{font-weight:800; color:#1F2430;}
.side .subnav ul li a{border-radius:10px; color:#3F4654;}
.side .subnav ul li a:hover{background:#EEF2FB; color:#3A5FAE;}

/* ---------- 首頁(kh- 前綴) ---------- */
.kh-wrap{max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,24px); width:100%; box-sizing:border-box;}
.kh-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#F4F6FD 0%,#FDF1F5 60%,#FEF6F0 100%);
  border-bottom:1px solid #EDEEF3;
}
.kh-hero-inner{padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,5vw,64px);}
.kh-hero h1{margin:0; font-size:clamp(32px,4.4vw,54px); line-height:1.2; font-weight:900; letter-spacing:-0.5px; max-width:16em;}
.kh-grad-text{background:linear-gradient(95deg,#3A5FAE,#EE4A78 60%,#F2874E); -webkit-background-clip:text; background-clip:text; color:transparent;}
.kh-hero .kh-lead{margin:20px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.75; color:#5B6070; max-width:34em;}
.kh-stats{display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,36px); margin-top:30px;}
.kh-stats b{display:block; font-size:26px; font-weight:800;}
.kh-stats span{font-size:13px; color:#6B7280; margin-top:2px; display:block;}
.kh-search{
  margin-top:36px; background:#fff; border:1px solid #E7E9F1; border-radius:20px;
  padding:clamp(18px,3vw,24px); box-shadow:0 18px 44px rgba(31,36,48,0.07);
}
.kh-search .kh-lbl{font-size:13px; font-weight:700; color:#1F2430; letter-spacing:0.06em; margin-right:10px;}
.kh-search .kh-hint{font-size:12px; color:#9AA0AE;}
.kh-chiprow{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 22px;}
.kh-chip{
  padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:all .15s ease;
  border:1.5px solid #E3E6EF; background:#fff; color:#5B6070;
}
.kh-chip.on-blue{border-color:#3A5FAE; background:#EEF2FB; color:#3A5FAE;}
.kh-chip.on-pink{border-color:#EE4A78; background:#FDEFF3; color:#EE4A78;}
.kh-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; padding-top:22px; border-top:1px solid #EEF0F5;}
.kh-btn-primary{
  padding:14px 30px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(95deg,#3A5FAE,#EE4A78); color:#fff !important;
  font-size:16px; font-weight:700; font-family:inherit; text-decoration:none; display:inline-block;
  box-shadow:0 8px 22px rgba(58,95,174,0.25);
}
.kh-btn-primary:hover{filter:brightness(1.06); color:#fff !important;}
.kh-btn-line{
  padding:14px 28px; border-radius:12px; border:1.5px solid #D9DDE9;
  color:#3F4654 !important; font-size:16px; font-weight:600; background:#fff; display:inline-block;
}
.kh-btn-line:hover{border-color:#3A5FAE; color:#3A5FAE !important;}
.kh-sec{padding-top:clamp(44px,6vw,72px);}
.kh-sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.kh-sechead h2{margin:0; font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-0.3px;}
.kh-sechead p{margin:8px 0 0; font-size:14px; color:#6B7280;}
.kh-sechead .kh-more{font-size:15px; font-weight:600;}
.kh-cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:18px;}
.kh-ccard{
  display:flex; flex-direction:column; gap:14px; padding:18px; background:#fff;
  border:1px solid #E9EBF1; border-radius:16px; color:inherit !important; transition:all .18s ease;
}
.kh-ccard:hover{border-color:#C9D2EA; box-shadow:0 12px 28px rgba(31,36,48,0.08); transform:translateY(-2px); color:inherit !important;}
.kh-avatar{width:52px; height:52px; border-radius:999px; flex:0 0 auto; object-fit:cover; border:1px solid #E1E5F0; display:block;}
.kh-avatar-ph{width:52px; height:52px; border-radius:999px; flex:0 0 auto; background:repeating-linear-gradient(135deg,#EEF1F8 0 6px,#E3E8F4 6px 12px); border:1px solid #E1E5F0;}
.kh-cname{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kh-cmeta{font-size:12.5px; color:#8B90A0; margin-top:3px; font-family:Manrope,monospace;}
.kh-pill-blue{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#EEF2FB; color:#3A5FAE;}
.kh-pill-pink{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#FDF0F4; color:#D93C6B;}
.kh-pill-amber{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#FDF8EC; border:1px solid #E8D9B5; color:#8A6D3B;}
.kh-claimed{display:flex; align-items:center; gap:6px; font-size:12px; color:#5B9E6B; font-weight:600; margin-top:-2px;}
.kh-claimed i{width:6px; height:6px; border-radius:999px; background:#5B9E6B; display:block;}
.kh-kgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:20px;}
.kh-kcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid #E9EBF1;
  border-radius:18px; overflow:hidden; color:inherit !important; transition:all .18s ease;
}
.kh-kcard:hover{border-color:#C9D2EA; box-shadow:0 14px 32px rgba(31,36,48,0.09); transform:translateY(-2px); color:inherit !important;}
.kh-kimg{height:150px; position:relative; background:repeating-linear-gradient(135deg,#F1F3F9 0 8px,#E6EAF4 8px 16px); display:flex; align-items:center; justify-content:center;}
.kh-kimg img{width:100%; height:150px; object-fit:cover; display:block;}
.kh-kimg .kh-noimg{font-family:Manrope,monospace; font-size:11px; letter-spacing:0.1em; color:#98A0B4;}
.kh-ktag{position:absolute; left:14px; bottom:14px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; color:#fff;}
.kh-ktag.t-store{background:#3A5FAE;} .kh-ktag.t-ship{background:#EE4A78;} .kh-ktag.t-digi{background:#F2874E;}
.kh-kbody{padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1;}
.kh-ktitle{font-size:16.5px; font-weight:700; line-height:1.45;}
.kh-kbrand{font-size:13px; color:#7B8194;}
.kh-kfoot{margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #F0F2F7; font-size:12.5px;}
.kh-khold{color:#8B90A0; white-space:nowrap;}
.kh-kdue{font-weight:700; white-space:nowrap; color:#5B6070;}
.kh-kdue.hot{color:#D93C6B;}
.kh-cta{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:22px;}
.kh-ctabox{padding:clamp(26px,4vw,36px); border-radius:20px; color:#fff; display:flex; flex-direction:column; gap:14px;}
.kh-ctabox.blue{background:linear-gradient(150deg,#3A5FAE,#2E4C8E);}
.kh-ctabox.pink{background:linear-gradient(150deg,#EE4A78,#F2874E);}
.kh-ctabox h3{margin:0; font-size:24px; font-weight:800; color:#fff;}
.kh-ctabox p{margin:0; font-size:15.5px; line-height:1.75;}
.kh-ctabox.blue p{color:#DDE4F5;} .kh-ctabox.pink p{color:#FFEAF0;}
.kh-ctabtn{align-self:flex-start; margin-top:10px; padding:13px 24px; border-radius:11px; background:#fff; font-weight:700; font-size:15px;}
.kh-ctabox.blue .kh-ctabtn{color:#3A5FAE !important;} .kh-ctabox.pink .kh-ctabtn{color:#D93C6B !important;}
.kh-ctabtn:hover{filter:brightness(0.97);}
.kh-claimstrip{
  margin-top:22px; padding:20px clamp(18px,3vw,28px); border-radius:16px;
  border:1.5px dashed #D6DBE8; background:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-size:15.5px; color:#3F4654;
}
.kh-claimstrip a{font-weight:700;}
.kh-secttl-cta{text-align:center; max-width:34em; margin:0 auto 34px;}
.kh-secttl-cta h2{margin:0; font-size:clamp(24px,2.6vw,32px); font-weight:800;}
.kh-secttl-cta p{margin:12px 0 0; font-size:16px; line-height:1.75; color:#5B6070;}

/* ---------- 內頁擴充(2026/09 內頁結構化) ---------- */
.kh-btn-sm{padding:9px 18px !important; font-size:14px !important; border-radius:10px !important;}
.custpg h4{font-weight:800; color:#1F2430;}
.custpg .main{padding-top:10px;}
.custpg .tit{margin-bottom:14px;}
/* 內頁狀態列/分頁籤(inline pill 已掃色,補 hover) */
.custpg a:hover{opacity:.92;}
/* 列表頁搜尋帶(#defaultimg 內:大標題+搜尋條件) */
#defaultimg .kh-listhero{
  line-height:1.6; width:100%; box-sizing:border-box;
  background:linear-gradient(160deg,#F4F6FD 0%,#FDF1F5 60%,#FEF6F0 100%);
  border-bottom:1px solid #EDEEF3;
  padding:clamp(24px,3.5vw,40px) clamp(16px,3vw,24px);
}
#defaultimg .kh-listhero-inner{max-width:1200px; margin:0 auto; display:flow-root;}
#defaultimg .kh-listhero h2{margin:0 0 4px; font-size:clamp(26px,3.2vw,38px); font-weight:900; letter-spacing:-0.4px; color:#1F2430;}
#defaultimg .kh-listhero .kh-sub{font-size:14px; color:#6B7280; margin:0 0 18px;}
#defaultimg .kh-listhero .kh-cond{display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
#defaultimg .kh-listhero .kh-cond label{display:flex; align-items:center; gap:6px; font-size:14px; color:#3F4654;}
#defaultimg .kh-listhero select, #defaultimg .kh-listhero input[type=text]{
  border:1.5px solid #E3E6EF; border-radius:10px; padding:8px 10px; min-height:42px;
  font-family:inherit; background:#fff; color:#1F2430; font-size:14px;
}
#defaultimg .kh-listhero select:focus, #defaultimg .kh-listhero input:focus{outline:none; border-color:#3A5FAE;}
#defaultimg .kh-listhero .kh-note{font-size:12px; color:#9AA0AE; margin-top:12px;}

/* 分頁 */
.kh-pager{display:flex; justify-content:center; align-items:center; gap:6px; margin:26px 0 6px; flex-wrap:wrap;}
.kh-pager a, .kh-pager span{min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid #E3E6EF; border-radius:10px; font-size:14px; color:#3F4654 !important; background:#fff; padding:0 10px; text-decoration:none;}
.kh-pager a:hover{border-color:#3A5FAE; color:#3A5FAE !important;}
.kh-pager .cur{background:#3A5FAE; border-color:#3A5FAE; color:#fff !important; font-weight:700;}
.kh-pager .gap{border:none; background:transparent; min-width:auto; padding:0 2px; color:#8B90A0 !important;}

/* 表格(案件詳情合作條件等) */
.kh-tblcard{background:#fff; border:1px solid #E9EBF1; border-radius:16px; padding:18px 20px; box-shadow:0 4px 14px rgba(31,36,48,0.04);}
.kh-tblcard table td{padding:7px 4px !important; border-bottom:1px solid #F4F5F9;}
.kh-tblcard table tr:last-child td{border-bottom:none;}

/* ===================================================================
   會員區設計系統(依 誠創媒合平台首頁設計 wireframe)
   佈局:kh-mzone > kh-mgrid(260px 側欄 + 主欄) =================== */
.kh-mzone{clear:both; width:100%; background:#FAFAFB;}
.kh-mgrid{max-width:1200px; margin:0 auto; width:100%; box-sizing:border-box;
  padding:clamp(24px,4vw,40px) clamp(16px,3vw,24px) clamp(48px,7vw,80px);
  display:grid; gap:clamp(18px,2.5vw,24px); grid-template-columns:260px minmax(0,1fr);}
/* 套版 BasicCssSet-flex.css 把 aside 設為 display:contents,會讓側欄失去盒子、
   position:sticky 失效;明確指定 display:block 還原 */
.kh-mside{display:block !important; min-width:0; position:sticky; top:86px; align-self:start;}
/* 側欄手機版元件(桌機隱藏;手機規則見檔尾,需排在基礎定義之後才不被覆蓋) */
.kh-slabel{display:none;}
.kh-snavwrap{position:relative; min-width:0;}
.kh-snavfade{display:none;}
@media (max-width:1000px){ .kh-mgrid{grid-template-columns:minmax(0,1fr);} }
/* 側欄卡:頭像+名稱+選單 */
.kh-scard{background:#fff; border:1px solid #E9EBF1; border-radius:18px; padding:20px;}
.kh-schead{display:flex; align-items:center; gap:13px; padding-bottom:16px; border-bottom:1px solid #F0F2F7;}
.kh-scava{width:46px; height:46px; border-radius:999px; flex:0 0 auto; object-fit:cover; border:1px solid #E1E5F0; background:#EEF1F8; display:block;}
.kh-scava.sq{border-radius:13px;}
.kh-scava-ph{width:46px; height:46px; border-radius:999px; flex:0 0 auto; border:1px solid #E1E5F0;
  background:repeating-linear-gradient(135deg,#EEF1F8 0 6px,#E3E8F4 6px 12px);}
.kh-scava-ph.sq{border-radius:13px;}
.kh-scmeta{min-width:0;}
.kh-scname{font-size:15.5px; font-weight:800; color:#1F2430; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kh-scrole{font-size:12.5px; color:#7B8194; margin-top:3px;}
.kh-snav{display:flex; flex-direction:column; margin-top:8px;}
.kh-snav a{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:11px; font-size:15px; font-weight:500; color:#3F4654; text-decoration:none;}
.kh-snav a:hover{color:#EE4A78;}
.kh-snav a.on{font-weight:700; color:#3A5FAE; background:#EEF2FB;}
.kh-sbadge{min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:999px;
  background:#EE4A78; color:#fff; font-size:12px; font-weight:700; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-family:Manrope,sans-serif;}
/* 主欄 */
.kh-mmain{display:flex; flex-direction:column; gap:clamp(16px,2.5vw,22px); min-width:0;}
.kh-crumb{font-size:13.5px; color:#6B7280; display:flex; align-items:center; gap:8px;}
.kh-crumb a{color:#6B7280; text-decoration:none;}
.kh-crumb a:hover{color:#EE4A78;}
.kh-crumb b{color:#1F2430; font-weight:600;}
.kh-mh1{margin:10px 0 0; font-size:clamp(24px,2.8vw,32px); font-weight:900; letter-spacing:-0.4px; color:#1F2430; line-height:1.3;}
.kh-msub{margin:10px 0 0; font-size:14.5px; line-height:1.75; color:#6B7280;}
/* 內容卡 */
.kh-card{background:#fff; border:1px solid #E9EBF1; border-radius:18px; padding:clamp(20px,3vw,28px);}
.kh-card .kh-h2, .kh-mmain h2.kh-h2{margin:0 0 18px; font-size:19px; font-weight:800; color:#1F2430;}
/* 表單 */
.kh-formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px;}
.kh-field{display:flex; flex-direction:column; gap:7px; min-width:0;}
.kh-label{font-size:13.5px; font-weight:700; color:#3F4654;}
.kh-req{color:#EE4A78;}
.kh-card input[type=text], .kh-card input[type=password], .kh-card input[type=email],
.kh-card input[type=tel], .kh-card input[type=number], .kh-card input[type=date],
.kh-card input[type=url], .kh-card select, .kh-card textarea, .kh-input{
  padding:12px 15px !important; border-radius:12px !important; border:1.5px solid #E3E6EF !important;
  font-size:15px !important; color:#1F2430; width:100%; box-sizing:border-box; background:#fff;
  font-family:inherit; height:auto !important; line-height:1.5;}
.kh-card select{min-height:47px;}
.kh-card input:focus, .kh-card select:focus, .kh-card textarea:focus{border-color:#3A5FAE !important; outline:none;}
.kh-card input[type=checkbox], .kh-card input[type=radio]{width:17px !important; padding:0 !important;
  accent-color:#3A5FAE; vertical-align:middle; height:17px !important;}
.kh-hint{font-size:12.5px; line-height:1.7; color:#8B90A0;}
/* 按鈕 */
a.kh-btn-grad, button.kh-btn-grad, .kh-btn-grad{display:inline-block; padding:14px 32px; border:none; border-radius:12px;
  background:linear-gradient(95deg,#3A5FAE,#EE4A78); color:#fff !important; font-size:15.5px; font-weight:700;
  font-family:inherit; cursor:pointer; box-shadow:0 8px 22px rgba(58,95,174,0.25);
  text-decoration:none; text-align:center; line-height:1.4;}
.kh-btn-grad:hover{filter:brightness(1.06); color:#fff !important;}
a.kh-btn-oline, button.kh-btn-oline, .kh-btn-oline{display:inline-block; padding:10px 18px; border-radius:11px;
  border:1.5px solid #3A5FAE; background:#fff; color:#3A5FAE !important; font-size:14.5px; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none; text-align:center; line-height:1.4;}
.kh-btn-oline:hover{background:#3A5FAE; color:#fff !important;}
a.kh-btn-gray, .kh-btn-gray{display:inline-block; padding:9px 16px; border-radius:10px; border:1.5px solid #E3E6EF;
  color:#8B90A0 !important; font-size:14px; font-weight:600; background:#fff; cursor:pointer;
  text-decoration:none; font-family:inherit;}
.kh-btn-gray:hover{border-color:#EE4A78; color:#EE4A78 !important;}
/* 提示區塊 */
.kh-notebox{padding:14px 16px; border-radius:12px; background:#F1F3F9; font-size:13.5px; line-height:1.8; color:#5B6070;}
.kh-notebox-blue{padding:14px 16px; border-radius:12px; background:#EEF2FB; font-size:13.5px; line-height:1.8; color:#33518F;}
.kh-okstrip{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 18px;
  border-radius:14px; background:#E9F5EC; border:1px solid #CFE6D6; font-size:14.5px; color:#3F7D52;}
.kh-okstrip .t{display:inline-flex; align-items:center; gap:7px; font-weight:700; color:#2F6B44;}
.kh-okstrip .dot{width:7px; height:7px; border-radius:999px; background:#5B9E6B; display:block;}
.kh-msg-err{color:#D93C6B; font-size:14.5px; font-weight:600;}
.kh-msg-ok{color:#2F6B44; font-size:14.5px; font-weight:600;}
/* 虛線區(上傳、空狀態) */
.kh-dashbox{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:16px;
  border:1.5px dashed #D6DBE8; border-radius:14px; background:#FCFCFD;}
.kh-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(24px,4vw,36px) 16px; border:1.5px dashed #D6DBE8; border-radius:14px;}
.kh-empty .t{font-size:15.5px; font-weight:700; color:#5B6070;}
.kh-empty .d{font-size:13.5px; color:#8B90A0;}
/* 統計卡 */
.kh-statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px;}
.kh-stat{background:#fff; border:1px solid #E9EBF1; border-radius:16px; padding:18px;}
.kh-stat .lb{font-size:13px; color:#6B7280;}
.kh-stat .num{font-size:26px; font-weight:800; font-family:Manrope,sans-serif; color:#1F2430; margin-top:6px;}
/* 分類/篩選 chip 與 tab */
.kh-chip{display:inline-block; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; border:1.5px solid #E3E6EF; background:#fff; color:#5B6070; text-decoration:none;}
.kh-chip.on{border-color:#EE4A78; background:#FDEFF3; color:#EE4A78;}
.kh-tab{display:inline-block; padding:9px 18px; border-radius:999px; font-size:14.5px; font-weight:600;
  font-family:inherit; cursor:pointer; border:1.5px solid #E3E6EF; background:#fff; color:#5B6070; text-decoration:none;}
.kh-tab.on{border-color:#3A5FAE; background:#3A5FAE; color:#fff;}
/* 列項(通知卡、綁定帳號列) */
.kh-rowcard{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
  padding:clamp(16px,2.5vw,20px); border-radius:16px; background:#fff; border:1.5px solid #E9EBF1;}
.kh-rowcard.unread{border-color:#C9D2EA; box-shadow:0 10px 24px rgba(58,95,174,0.10);}
.kh-vbadge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  background:#E9F5EC; color:#3F7D52; font-size:12px; font-weight:700;}
.kh-vbadge .dot{width:5px; height:5px; border-radius:999px; background:#5B9E6B; display:block;}
/* 登入/註冊置中卡 */
.kh-authzone{clear:both; width:100%; background:#FAFAFB;}
.kh-authwrap{max-width:460px; width:100%; margin:0 auto; box-sizing:border-box;
  padding:clamp(24px,4vw,40px) 16px clamp(48px,7vw,80px);}
.kh-authwrap.wide{max-width:680px;}
.kh-authcard{background:#fff; border:1px solid #E7E9F1; border-radius:20px;
  padding:clamp(24px,4vw,36px); box-shadow:0 18px 44px rgba(31,36,48,0.07);}
.kh-authcard h1{margin:0; font-size:clamp(24px,2.8vw,30px); font-weight:900; letter-spacing:-0.4px; text-align:center; color:#1F2430;}
.kh-authcard .sub{margin:10px 0 0; font-size:14.5px; color:#6B7280; text-align:center;}
.kh-authcard input[type=text], .kh-authcard input[type=password], .kh-authcard input[type=email],
.kh-authcard input[type=tel], .kh-authcard select, .kh-authcard textarea{
  padding:12px 15px !important; border-radius:12px !important; border:1.5px solid #E3E6EF !important;
  font-size:15px !important; color:#1F2430; width:100%; box-sizing:border-box; background:#fff;
  font-family:inherit; height:auto !important; line-height:1.5;}
.kh-authcard input:focus, .kh-authcard select:focus, .kh-authcard textarea:focus{border-color:#3A5FAE !important; outline:none;}
.kh-authcard input[type=checkbox]{width:17px !important; height:17px !important; padding:0 !important; accent-color:#3A5FAE;}
.kh-authfoot{margin-top:24px; padding-top:20px; border-top:1px solid #EEF0F5; text-align:center; font-size:14.5px; color:#5B6070;}
.kh-dashstrip{margin-top:16px; padding:16px 20px; border-radius:16px; border:1.5px dashed #D6DBE8;
  background:#fff; text-align:center; font-size:14.5px; color:#5B6070;}
/* 聊天(站內訊息) */
.kh-chatgrid{display:grid; gap:clamp(14px,2vw,18px); grid-template-columns:260px minmax(0,1fr);}
@media (max-width:820px){.kh-chatgrid{grid-template-columns:minmax(0,1fr);}}
.kh-convcard{background:#fff; border:1px solid #E9EBF1; border-radius:18px; padding:12px; min-width:0;
  display:flex; flex-direction:column; gap:6px;}
.kh-convitem{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px;
  border-radius:13px; border:1.5px solid transparent; background:#fff; color:#1F2430;
  text-decoration:none; min-width:0;}
.kh-convitem:hover{background:#F7F8FB; color:#1F2430;}
.kh-convitem.on{border-color:#C9D2EA; background:#EEF2FB;}
.kh-convitem .nm{display:block; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1F2430;}
.kh-convitem .ab{display:block; font-size:12.5px; color:#8B90A0; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kh-threadcard{background:#fff; border:1px solid #E9EBF1; border-radius:18px; display:flex;
  flex-direction:column; min-width:0; overflow:hidden;}
.kh-threadhead{padding:16px 20px; border-bottom:1px solid #F0F2F7; display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
.kh-threadbody{padding:20px; display:flex; flex-direction:column; gap:14px; min-height:300px;
  max-height:480px; overflow-y:auto;}
.kh-brow{display:flex; justify-content:flex-start;}
.kh-brow.mine{justify-content:flex-end;}
.kh-bubble{max-width:78%; padding:13px 16px; border-radius:14px 14px 14px 4px;
  background:#F4F6FA; color:#1F2430; border:1px solid #EDEFF5;}
.kh-brow.mine .kh-bubble{border-radius:14px 14px 4px 14px;
  background:linear-gradient(95deg,#3A5FAE,#4B6CB8); color:#fff; border:none;}
.kh-bubble .tx{font-size:14.5px; line-height:1.8; word-break:break-word;}
.kh-bubble .tm{font-size:11.5px; margin-top:7px; font-family:Manrope,sans-serif; color:#9AA0AE;}
.kh-brow.mine .kh-bubble .tm{color:#C6D3F0;}
.kh-threadfoot{margin-top:auto; padding:16px 20px; border-top:1px solid #F0F2F7;
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.kh-threadfoot textarea{flex:1 1 220px; min-width:0; padding:12px 14px !important; border-radius:12px !important;
  border:1.5px solid #E3E6EF !important; font-size:14.5px !important; font-family:inherit; height:auto !important;
  box-sizing:border-box; line-height:1.6;}
/* 綁定流程步驟卡 */
.kh-stepgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:12px;}
.kh-step{padding:16px; border-radius:14px; background:#F7F8FB; border:1px solid #EDEFF5;}
.kh-step .n{width:26px; height:26px; border-radius:999px; background:linear-gradient(95deg,#3A5FAE,#EE4A78);
  color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-family:Manrope,sans-serif;}
.kh-step .t{font-size:13.5px; line-height:1.7; color:#5B6070; margin-top:10px;}
/* 合作進度雙欄 */
.kh-progrid{display:grid; gap:clamp(14px,2vw,18px); grid-template-columns:minmax(0,1fr) 320px; align-items:start;}
@media (max-width:900px){.kh-progrid{grid-template-columns:minmax(0,1fr);}}
/* 時間軸 */
.kh-tl{display:flex; flex-direction:column;}
.kh-tlrow{display:flex; gap:14px;}
.kh-tlrail{display:flex; flex-direction:column; align-items:center; flex:0 0 auto;}
.kh-tldot{width:11px; height:11px; border-radius:999px; background:#3A5FAE; margin-top:5px;}
.kh-tldot.future{background:#fff; border:2px solid #D9DDE9; width:9px; height:9px;}
.kh-tlline{width:2px; flex:1; background:#E9EBF1; min-height:14px;}
.kh-tlbody{padding-bottom:18px; min-width:0;}
.kh-tltitle{font-size:15px; font-weight:700; color:#1F2430; line-height:1.5;}
.kh-tltitle.future{color:#9AA0AE; font-weight:500;}
.kh-tltime{font-size:12.5px; color:#9AA0AE; margin-top:4px; font-family:Manrope,sans-serif;}
/* 公開檔案頁 */
.kh-phero{clear:both; width:100%; background:linear-gradient(160deg,#F4F6FD 0%,#FDF1F5 65%,#FEF6F0 100%); border-bottom:1px solid #EDEEF3;}
.kh-phero-in{max-width:1200px; margin:0 auto; box-sizing:border-box; padding:clamp(16px,2vw,20px) clamp(16px,3vw,24px) clamp(32px,5vw,48px);}
.kh-pgrid{max-width:1200px; margin:0 auto; width:100%; box-sizing:border-box;
  padding:clamp(24px,4vw,40px) clamp(16px,3vw,24px) clamp(48px,7vw,80px);
  display:grid; gap:clamp(18px,2.5vw,24px); grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); align-items:start;}
@media (max-width:1000px){.kh-pgrid{grid-template-columns:minmax(0,1fr);}}
.kh-pchip{font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; display:inline-block;}
.kh-pchip.blue{background:#EEF2FB; color:#3A5FAE;}
.kh-pchip.pink{background:#FDF0F4; color:#D93C6B;}
.kh-pchip.amber{background:#FDF3EB; color:#C4692F;}
/* 表單步驟號碼圈 */
.kh-step-n{width:30px; height:30px; flex:0 0 auto; border-radius:999px;
  background:linear-gradient(95deg,#3A5FAE,#EE4A78); color:#fff; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:Manrope,sans-serif;}
/* 條款/政策長文頁 */
.kh-doc h2.sec{margin:0; font-size:clamp(18px,2vw,21px); font-weight:800; color:#1F2430;}
.kh-doc section{background:#fff; border:1px solid #E9EBF1; border-radius:18px; padding:clamp(20px,3vw,30px); scroll-margin-top:90px;}
.kh-doc section p{margin:0; font-size:15.5px; line-height:1.9; color:#4B5162;}
.kh-doc section p + p{margin-top:12px;}
.kh-toc a{font-size:14.5px; color:#3F4654; padding:9px 10px; border-radius:9px; text-decoration:none; display:block;}
.kh-toc a:hover{background:#EEF2FB; color:#3A5FAE;}
/* 目錄:桌機顯示連結清單,手機改下拉選單 */
.kh-tocsel{display:none; width:100%; box-sizing:border-box; padding:12px 15px;
  border:1.5px solid #E3E6EF; border-radius:12px; font-size:15px; font-family:inherit;
  background:#fff; color:#1F2430; height:auto;}
@media (max-width:1000px){
  .kh-doc .kh-toclbl{display:none;}
  .kh-doc .kh-toc{display:none !important;}
  .kh-doc .kh-tocsel{display:block;}
  /* 目錄改下拉後,側欄卡去框線/底色/陰影,左右不留邊距 */
  .kh-doc .kh-scard{background:transparent; border:none; box-shadow:none; border-radius:0; padding:0;}
  /* 目錄改下拉後,.content 上方不留 padding */
  .kh-docpage{padding-top:0 !important;}
}
/* 公開檔案 hero 行動卡(設計稿 250px 白卡) */
.kh-heroact{display:flex; flex-direction:column; gap:10px; flex:0 0 250px; min-width:0;
  background:#fff; border:1px solid #E7E9F1; border-radius:16px; padding:18px;
  box-shadow:0 14px 34px rgba(31,36,48,0.07);}
@media (max-width:900px){.kh-heroact{flex:1 1 100%;}}

/* ===================================================================
   手機版頁首(比照 誠創媒合平台首頁設計:漢堡方框 + 白底下拉面板)
   沿用套版 .toggle 的 slideToggle;僅重新設定樣式 =================== */
@media screen and (max-width:767px){
  #header .page{display:flex; align-items:center; padding:8px 16px; position:relative;}
  .logo{flex:0 0 auto;}
  /* 漢堡按鈕:44x44 白底圓角方框,三短線 藍/藍/粉 */
  .menu.toggle{position:static; transform:none; top:auto; right:auto; margin-left:auto;
    width:44px; height:44px; padding:0; border-radius:11px; background:#fff; border:1.5px solid #E3E6EF;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; box-sizing:border-box;}
  .menu.toggle > div, .menu.toggle::before, .menu.toggle::after{
    position:static; transform:none; left:auto; top:auto; width:20px; height:2px; border-radius:2px; margin:0;}
  .menu.toggle::before{content:""; background:#3A5FAE;}
  .menu.toggle > div{background:#3A5FAE;}
  .menu.toggle::after{content:""; background:#EE4A78;}
  /* 下拉導覽面板:白底 + 陰影,取代套版灰底 */
  #header .col-.nav, #header .nav{width:100%; position:absolute; left:0; top:100%;
    background:#fff !important; border-top:1px solid #EEF0F5; box-shadow:0 14px 28px rgba(31,36,48,0.10);
    padding:8px 20px 20px; box-sizing:border-box; max-height:82vh; overflow-y:auto;}
  ul.syisnav{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  .syisnav li{width:100%; padding:0; margin:0; float:none;}
  .syisnav li a{display:block; text-align:left; font-size:16px; font-weight:600; line-height:1.4;
    color:#3F4654 !important; padding:12px 4px !important; border:none !important;
    border-bottom:1px solid #F0F1F5 !important; border-radius:0;}
  .syisnav li a:hover{color:#EE4A78 !important; background:transparent;}
  /* 會員/登入註冊列:改為整寬按鈕 */
  .syisnav li.kol-mfirst{margin-left:0;}
  .syisnav li.kol-login a, .syisnav li.kol-signup a{
    text-align:center; margin-top:10px; padding:13px 10px !important; border-radius:11px !important;
    border-bottom:none !important; font-weight:700;}
  .syisnav li.kol-login a{border:1.5px solid #D9DDE9 !important; color:#3A5FAE !important;}
  .syisnav li.kol-signup a{color:#fff !important;
    background:linear-gradient(95deg,#3A5FAE,#EE4A78); box-shadow:0 6px 18px rgba(238,74,120,0.28);}
  .syisnav li.kol-center a{color:#3A5FAE !important; font-weight:700;}
}

/* ===================================================================
   會員側欄手機版(比照設計:sticky 膠囊列 + 隱藏頭像 + 橫向捲動)
   置於檔尾以蓋過前面的 .kh-schead / .kh-snav 基礎定義 ============ */
@media (max-width:1000px){
  /* 單欄 grid 會把 sticky 側欄鎖在自己的列軌內無法固定;改為 block 流,
     側欄才能在整個容器高度內 sticky 固定於頂端 */
  .kh-mgrid{display:block;}
  .kh-mside{position:sticky; top:56px; z-index:40; margin-bottom:clamp(16px,3vw,20px);
    background:#FAFAFB; padding:8px 0;}
  .kh-scard{border-radius:14px; padding:8px; box-shadow:0 6px 16px rgba(31,36,48,0.06);}
  .kh-schead{display:none;}
  .kh-slabel{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 8px 8px;}
  .kh-slabel .t{font-size:12px; font-weight:800; letter-spacing:0.06em; color:#3A5FAE;}
  .kh-slabel .hint{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:#5B6070; white-space:nowrap;}
  .kh-slabel .ar{font-family:Manrope,sans-serif; letter-spacing:-1px;}
  .kh-snav{flex-direction:row; gap:8px; margin-top:0; padding:2px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .kh-snav::-webkit-scrollbar{display:none;}
  .kh-snav a{flex:0 0 auto; white-space:nowrap; justify-content:flex-start; gap:7px;
    padding:10px 16px; border-radius:999px; font-size:14.5px; font-weight:500;
    border:1.5px solid #E3E6EF; color:#3F4654; background:#fff;}
  .kh-snav a.on{border-color:#3A5FAE; background:#3A5FAE; color:#fff;}
  .kh-snavfade{display:block; position:absolute; top:0; right:0; bottom:0; width:34px;
    pointer-events:none; border-radius:0 12px 12px 0;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);}
}

/* 內容文章(關於平台/條款/隱私)CKEditor 內文樣式 */
.kh-artbody{font-size:15.5px; line-height:1.9; color:#4B5162;}
.kh-artbody p{margin:0 0 12px;}
.kh-artbody p:last-child{margin-bottom:0;}
.kh-artbody b, .kh-artbody strong{color:#1F2430;}
.kh-artbody h3, .kh-artbody h4{color:#1F2430; margin:18px 0 8px;}
.kh-artbody ul, .kh-artbody ol{margin:0 0 12px; padding-left:1.4em;}
.kh-artbody li{margin:4px 0;}
.kh-artbody a{color:#3A5FAE; text-decoration:underline;}
.kh-artbody img{max-width:100%; height:auto; border-radius:10px;}

/* 內容表格(關於平台/條款/隱私/FAQ 內文) */
.kh-artbody .kh-arttable, .kh-faqwrap .kh-arttable, table.kh-arttable{
  width:100%; border-collapse:collapse; margin:12px 0; font-size:14.5px;}
table.kh-arttable th, table.kh-arttable td{
  border:1px solid #E9EBF1; padding:9px 12px; text-align:left; vertical-align:top; line-height:1.7;}
table.kh-arttable th{background:#F4F6FB; font-weight:700; color:#1F2430; white-space:nowrap;}
table.kh-arttable tr:nth-child(even) td{background:#FCFCFD;}
/* 常見問答手風琴 */
.kh-faqwrap{display:flex; flex-direction:column; gap:8px;}
details.kh-faq{border:1px solid #E9EBF1; border-radius:12px; background:#fff; overflow:hidden;}
details.kh-faq > summary{list-style:none; cursor:pointer; padding:14px 44px 14px 16px; position:relative;
  font-size:15.5px; font-weight:700; color:#1F2430; line-height:1.55;}
details.kh-faq > summary::-webkit-details-marker{display:none;}
details.kh-faq > summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:400; color:#3A5FAE; line-height:1;}
details.kh-faq[open] > summary::after{content:"\2212";}
details.kh-faq[open] > summary{border-bottom:1px solid #F0F2F7;}
details.kh-faq > div{padding:14px 16px; font-size:14.5px; line-height:1.9; color:#4B5162;}
details.kh-faq > div p{margin:0 0 10px;}
details.kh-faq > div p:last-child{margin-bottom:0;}
details.kh-faq > div ul, details.kh-faq > div ol{margin:0 0 10px; padding-left:1.4em;}