@charset "UTF-8";
/* faq-technical.html · 技术问答 —— 金色左竖条卡片 + 宽手风琴 + 对照表 */

.ft-wrap{max-width:860px;margin:0 auto}

/* 手风琴（本页：纸感底色 + 左侧金条） */
.faq-list{margin-bottom:8px}
.faq-item{
  background:var(--white);border:1.5px solid var(--line);
  border-left:5px solid var(--gold-500);
  border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;
  transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.faq-item:hover{box-shadow:var(--shadow-sm);transform:translateX(4px)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:20px 24px;
  font-size:15.5px;font-weight:700;color:var(--navy-900);line-height:1.6;
}
.faq-icon{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gold-400)}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--gold-500);
  transition:transform var(--t-fast);
}
.faq-icon::before{width:10px;height:2px;transform:translate(-50%,-50%)}
.faq-icon::after{width:2px;height:10px;transform:translate(-50%,-50%)}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{display:none}
.faq-item.open .faq-a{display:block}
.faq-a p{padding:0 24px 22px;font-size:14.5px;color:var(--ink-2);line-height:1.95}
.faq-a a{color:var(--gold-500);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 技术栈表 */
.ft-table{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.ft-table table{width:100%;border-collapse:collapse;background:var(--white);min-width:640px}
.ft-table th{background:var(--navy-900);color:var(--gold-300);text-align:left;padding:14px 20px;font-size:14px}
.ft-table td{padding:13px 20px;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.ft-table td:first-child{font-weight:700;color:var(--navy-800)}
.ft-table td a{color:var(--gold-500);font-weight:700}

/* 兼容双栏 */
.ft-compat{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ft-compat-col{
  background:var(--white);border-radius:var(--r-lg);padding:30px 32px;
  box-shadow:var(--shadow-sm);
}
.ft-compat-h{font-size:17px;margin-bottom:14px;color:var(--navy-800)}
.ft-compat-list{list-style:none}
.ft-compat-list li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:14.5px;color:var(--ink-2);line-height:1.8;
}
.ft-compat-list li::before{
  content:"";position:absolute;left:2px;top:11px;width:10px;height:6px;
  border-left:2px solid var(--gold-500);border-bottom:2px solid var(--gold-500);
  transform:rotate(-45deg);
}

/* 误区卡 */
.ft-myths{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ft-myth{
  background:rgba(255,255,255,.05);border:1px solid rgba(201,169,106,.35);
  border-radius:var(--r-lg);padding:28px 24px;
}
.ft-myth-h{color:var(--gold-300);font-size:16.5px;margin-bottom:10px}
.ft-myth-p{color:#C6CDDE;font-size:14px;line-height:1.9}

.rv1{--d:.08s}
.rv2{--d:.18s}
.rv3{--d:.28s}

@media (max-width:920px){
  .ft-compat{grid-template-columns:1fr}
  .ft-myths{grid-template-columns:1fr}
}