/* assets/css/sections/pricing-table.css — 价格页大表：列是套餐，行是功能。
   表头每列一张套餐卡（名称/价格/折合月价/适合人群/行动按钮），推荐列整列轻着色；
   表体为分组 + 功能行，单元格取值为文字、勾、横线、未包含提示或重点文字。
   结构由 vip.html 静态兜底 + assets/js/pricing.js 按同一份数据重建，两侧类名必须一致。
   窄屏横向滚动，首列固定；此文件同时承接原 pricing.css / compare.css 中仍在用的
   「全部套餐均包含」、加量包、说明卡片与脚注样式。 */

/* ============ 表格外壳：窄屏横向滚动 ============ */
.tbl-hint{ margin:0 0 16px; font-size:12.5px; color:var(--muted); }
.tbl-scroll{ overflow-x:auto; border:1px solid var(--line); background:var(--surface); }
.vip-tbl{ width:100%; min-width:1000px; border-collapse:collapse; }

/* ============ 表头：功能列标签 + 每列一张套餐卡 ============ */
.vip-tbl thead th{ padding:0; vertical-align:top; background:var(--surface); border-bottom:1px solid var(--line-dark); }
.vip-tbl thead th + th{ border-left:1px solid var(--line); }
.vip-tbl .c-feat{ width:200px; padding:18px; text-align:left; font-family:var(--serif); font-weight:700; font-size:15px; }
.vip-tbl thead th.is-pick{ background:var(--surface-2); box-shadow:inset 0 3px 0 var(--cinnabar); }

.pl-head{ position:relative; display:flex; flex-direction:column; height:100%; padding:20px 16px 18px; text-align:left; }
.pl-badge{
  position:absolute; right:12px; top:12px;
  padding:3px 9px; background:var(--cinnabar); color:#fff;
  font-size:11px; font-weight:500; line-height:1.6;
}
.pl-name{ font-family:var(--serif); font-weight:700; font-size:17px; }
.pl-price{ display:flex; align-items:baseline; gap:2px; margin-top:10px; }
.pl-price .cur{ font-size:14px; font-weight:500; }
.pl-price .v{ font-family:var(--serif); font-weight:900; font-size:26px; line-height:1; font-variant-numeric:lining-nums; }
.pl-price .per{ font-size:12px; color:var(--muted); }
.pl-note{ margin-top:6px; font-size:12px; color:var(--muted); }
.pl-fit{ margin-top:8px; font-size:12.5px; color:var(--muted); flex:1; }
.pl-cta{ width:100%; margin-top:14px; padding:10px 12px; font-size:13.5px; white-space:nowrap; }

/* ============ 分组行 ============ */
.vip-tbl .row-cat th{
  padding:12px 18px; background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:700; font-size:13.5px; text-align:left; color:var(--ink);
}
.vip-tbl .row-cat .mark{ margin-right:8px; }
.vip-tbl .cat-note{ margin-left:4px; font-weight:400; color:var(--muted); }

/* ============ 功能行 ============ */
.vip-tbl tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:top; }
.vip-tbl tbody td + td{ border-left:1px solid var(--line); }
.vip-tbl tbody tr:last-child td{ border-bottom:0; }
.c-name{ width:200px; font-weight:500; color:var(--ink); }
.c-name small{ display:block; margin-top:4px; font-weight:400; font-size:12px; color:var(--muted); }
.c-val{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.c-val.is-pick{ background:rgba(194,64,42,.03); }

/* 未包含提示（如「标准版起」）与重点文字（如「专属定制」） */
.lock{ display:inline-block; padding:2px 8px; border:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:12px; line-height:1.6; }
.special{ color:var(--cinnabar); font-weight:600; }
.vip-tbl .ok .ico{ width:16px; height:16px; }
.vip-tbl .no{ font-size:13.5px; }

/* 窄屏时首列固定，滚到哪里都能对上功能名 */
.vip-tbl th:first-child,
.vip-tbl td:first-child{ position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line); }
.vip-tbl thead th:first-child{ z-index:3; }
.vip-tbl .row-cat th{ position:sticky; left:0; z-index:2; }

/* ============ 全部套餐均包含 ============ */
.price-included{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  padding:18px 22px; margin-bottom:24px;
  background:var(--surface); border:1px solid var(--line);
}
.price-included .tag{ background:transparent; border:1px solid var(--line-dark); color:var(--ink); }
.included-list{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--muted); }
.included-list li{ position:relative; padding-left:16px; }
.included-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--ok-on-light); font-size:12px; }

/* ============ 加量包：两张并列的补充售卖卡 ============ */
.addon-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-top:32px; }
.addon{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
  padding:26px 28px; background:var(--surface); border:1px solid var(--line);
}
.addon-body{ min-width:0; flex:1 1 240px; }
.addon-body h3{ font-size:17.5px; font-weight:700; }
.addon-body p{ margin-top:8px; font-size:14px; color:var(--muted); }
.addon-price{ display:flex; align-items:baseline; gap:3px; }
.addon-price .cur{ font-size:15px; }
.addon-price .v{ font-family:var(--serif); font-weight:900; font-size:30px; line-height:1; font-variant-numeric:lining-nums; }
.addon-price .per{ font-size:12.5px; color:var(--muted); }

/* ============ 说明块：并排短说明 ============ */
.note-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  margin-top:32px; background:var(--line); border:1px solid var(--line);
}
.note{ padding:22px 24px; background:var(--surface); }
.note h4{ font-size:15.5px; font-weight:700; }
.note p{ margin-top:8px; font-size:13.5px; color:var(--muted); }

/* 脚注与合规行 */
.cmp-foot{ margin-top:22px; font-size:13px; color:var(--muted); }
.cmp-foot p + p{ margin-top:6px; }

@media (max-width:1020px){
  .vip-tbl .c-feat, .c-name{ width:170px; }
}
@media (max-width:900px){
  .addon-grid,.note-grid{ grid-template-columns:1fr; }
}