/* shared-tools/layouts/layout_D1.css — D1 大对比表型专属布局层 */

/* ── 结论卡 ── */
.d1-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 24px;
}

.verdict {
  background: linear-gradient(135deg, var(--blue-50), var(--gray-50));
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.verdict .vic {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--amber);
}

.verdict .badge {
  display: inline-block;
  background: var(--amber);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.verdict h3 {
  font-size: 17px;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.verdict p {
  font-size: 13px;
  color: var(--gray-700);
  margin: 0;
}

/* ── 对比表 ── */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.cmp-table th {
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 10px;
  text-align: left;
  font-size: 13px;
}

.cmp-table th.win {
  background: var(--blue);
}

.cmp-table td {
  padding: 11px 10px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
}

.cmp-table tr td:first-child {
  font-weight: 600;
  color: var(--gray-900);
  background: var(--gray-50);
  text-align: left;
}

.cmp-table .star {
  color: var(--amber);
}

.cmp-table .yes {
  color: var(--green);
  font-weight: 700;
}

.cmp-table .no {
  color: var(--gray-400);
}

/* ── 逐项点评 ── */
.cmp-item {
  margin-bottom: 16px;
}

.cmp-item h3 {
  font-size: 15px;
  color: var(--gray-900);
  margin-bottom: 5px;
}

.cmp-item p {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0;
}

/* ── 响应式断点 ── */
@media (max-width: 768px) {
  .d1-wrap {
    padding: 24px 16px;
  }

  .verdict {
    flex-direction: column;
    gap: 12px;
  }

  .verdict .vic {
    width: 36px;
    height: 36px;
  }

  .cmp-table {
    font-size: 12px;
  }

  .cmp-table th {
    padding: 8px 6px;
  }

  .cmp-table td {
    padding: 8px 6px;
  }
}