/* ============================================================
   comfyui-pipeline.css
   子页面：ComfyUI 能力专题（V2 · 严肃排版）
   - 沿用电商设计语言（红/墨黑/米色）+ editorial 长文
   - 头部/长文基础版式复用 video-pipeline.css；此处只做增量组件
============================================================ */

/* ---------- 本页刊头编号覆盖 ---------- */
.vp-article::before { content: 'CASE · NO.12'; }

/* ---------- 左栏：成品展示栈 ---------- */
.cw-showcase {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  position: sticky; top: 1rem; align-self: start;
}
@media (max-width: 1024px) { .cw-showcase { position: relative; top: auto; } }

.cw-frame {
  position: relative;
  width: 100%; max-width: 345px;
  background: #111;
  padding: 10px;
  box-shadow:
    8px 8px 0 rgba(199,50,59,0.9),
    14px 18px 32px rgba(0,0,0,0.28);
  transform: rotate(-0.8deg);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.cw-frame:hover {
  transform: rotate(0) translateY(-4px) scale(1.01);
  box-shadow:
    10px 10px 0 rgba(199,50,59,0.9),
    18px 24px 36px rgba(0,0,0,0.3);
}
.cw-frame img {
  display: block; width: 100%; height: auto;
  background: #0a0a0a;
}
.cw-frame.cw-landscape { max-width: 420px; transform: rotate(0.7deg); }
.cw-frame.cw-landscape:hover { transform: rotate(0) translateY(-4px) scale(1.01); }

.cw-badge {
  position: absolute; top: -12px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  padding: 4px 10px;
  background: var(--vp-red, #C7323B); color: var(--vp-paper, #FBF6EC);
  border: 1.5px solid var(--vp-rule, #14110E);
}

.cw-caption {
  display: flex; flex-direction: column; gap: 4px; text-align: right;
  width: 100%; max-width: 345px;
}
.cw-caption .pc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--vp-red, #C7323B); letter-spacing: 0.08em; font-weight: 800;
}
.cw-caption .pc-name {
  font-size: 18px; font-weight: 800; letter-spacing: 0.02em;
  font-family: 'Noto Sans SC', sans-serif; color: var(--vp-ink, #14110E);
}
.cw-caption .pc-cat {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #555; letter-spacing: 0.1em; text-transform: uppercase;
}

/* 主图下的小缩略图双列 */
.cw-minis {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.8rem; width: 100%; max-width: 345px;
}
.cw-minis .cw-mini {
  position: relative; background: #111; padding: 6px;
  box-shadow: 4px 4px 0 rgba(20,17,14,0.85);
  transform: rotate(-0.5deg);
}
.cw-minis .cw-mini:last-child { transform: rotate(0.5deg); }
.cw-minis .cw-mini img { display: block; width: 100%; height: auto; }
.cw-minis .cw-mini span {
  display: block; text-align: center; padding: 4px 0 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; color: #999; text-transform: uppercase;
}

/* ---------- 前后对比块 ---------- */
.cw-compare { margin: 1.6rem 0; }

.cmp-pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.8rem; align-items: stretch; align-items: center;
}
.cmp-cell {
  position: relative; border: 1.5px dashed var(--vp-rule, #14110E);
  background: #fff; padding: 6px;
}
.cmp-cell img { display: block; width: 100%; height: auto; }
.cmp-tag {
  position: absolute; top: -11px; left: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; padding: 2px 8px;
  background: var(--vp-ink, #14110E); color: var(--vp-paper, #FBF6EC);
}
.cmp-tag.is-after { background: var(--vp-red, #C7323B); }
.cmp-arrow {
  align-self: center;
  font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800;
  color: var(--vp-red, #C7323B);
  transform: rotate(90deg);
  padding: 0 2px;
}

.cmp-caption {
  margin-top: 0.7rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; color: var(--vp-ink-soft, #5B544A);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.cmp-caption b { color: var(--vp-ink, #14110E); }

/* 双参考输入行 */
.cmp-refs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.cmp-refs .cmp-cell { background: var(--vp-paper-2, #F2EBD9); }

@media (max-width: 640px) {
  .cmp-pair { grid-template-columns: 1fr; }
  .cmp-arrow { transform: rotate(90deg); text-align: center; }
  .cmp-refs { grid-template-columns: 1fr; }
}

/* ---------- 工作流节点图（wf-map） ---------- */
.wf-map {
  background: #101010;
  box-shadow: 8px 8px 0 rgba(37,99,235,0.85);
  border: 1.5px solid var(--vp-rule, #14110E);
  padding: 1rem 1.1rem 1.2rem;
  margin: 1.6rem 0;
  font-family: 'JetBrains Mono', monospace;
  overflow-x: auto;
}
.wf-title {
  font-size: 11px; letter-spacing: 0.2em; color: #6ee7b7;
  text-transform: uppercase; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 8px;
}
.wf-title::before { content: '●'; color: var(--vp-red, #C7323B); font-size: 8px; }
.wf-row {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin: 0.45rem 0;
  min-width: 560px;
}
.wf-node {
  font-size: 11.5px; padding: 4px 9px;
  background: #1d1d1f; color: #e5e7eb;
  border: 1px solid #3f3f46; border-radius: 3px;
  white-space: nowrap;
}
.wf-node.hot { border-color: var(--vp-red, #C7323B); color: #fca5a5; }
.wf-node.io { border-color: #2f9e63; color: #6ee7b7; }
.wf-link { color: #52525b; font-size: 12px; }
.wf-cmt { color: #71717a; font-size: 10.5px; letter-spacing: 0.05em; margin-top: 0.8rem; }

/* ---------- 选型对比表（kw-table） ---------- */
.kw-table {
  width: 100%; border-collapse: collapse;
  margin: 1.4rem 0;
  font-family: var(--vp-sans, 'Noto Sans SC', sans-serif);
  font-size: 13.5px;
}
.kw-table th, .kw-table td {
  border: 1px solid var(--vp-rule, #14110E);
  padding: 0.55rem 0.7rem;
  text-align: left; vertical-align: top; line-height: 1.55;
}
.kw-table th {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--vp-ink, #14110E); color: var(--vp-paper, #FBF6EC);
  font-weight: 600;
}
.kw-table tbody tr:nth-child(even) { background: rgba(20,17,14,0.035); }
.kw-table td.win {
  color: var(--vp-red, #C7323B); font-weight: 700;
}
.kw-table .kw-col-win { background: rgba(199,50,59,0.07); }
@media (max-width: 640px) {
  .kw-table { font-size: 12px; }
  .kw-table th, .kw-table td { padding: 0.4rem 0.45rem; }
}

/* ---------- 提示词卡（cw-prompt） ---------- */
.cw-prompt {
  border-left: 3px solid var(--vp-red, #C7323B);
  background: var(--vp-paper-2, #F2EBD9);
  border-top: 1px solid var(--vp-rule, #14110E);
  border-right: 1px solid var(--vp-rule, #14110E);
  border-bottom: 1px solid var(--vp-rule, #14110E);
  padding: 0.85rem 1rem;
  margin: 1.2rem 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.7;
  color: var(--vp-ink, #14110E);
}
.cw-prompt .cw-prompt-label {
  display: block; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--vp-red, #C7323B);
  font-weight: 800; margin-bottom: 0.4rem;
}
.cw-prompt em { font-style: normal; color: var(--vp-red, #C7323B); font-weight: 700; }

/* ---------- 参数 chips ---------- */
.cw-specs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0;
}
.cw-specs span {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border: 1px solid var(--vp-rule, #14110E);
  background: #fff;
}
.cw-specs span.cw-spec-hot {
  background: var(--vp-red, #C7323B); color: var(--vp-paper, #FBF6EC);
  border-color: var(--vp-red, #C7323B);
}

/* ---------- 步骤编号列表（复用 vp-num-list 的编号感，独立防冲突） ---------- */
.cw-steps { counter-reset: cwstep; margin: 1rem 0; padding: 0; list-style: none; }
.cw-steps li {
  counter-increment: cwstep;
  position: relative; padding-left: 2.6rem; margin: 0.9rem 0;
}
.cw-steps li::before {
  content: counter(cwstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800;
  color: var(--vp-paper, #FBF6EC);
  background: var(--vp-ink, #14110E);
  padding: 2px 6px;
}
.cw-steps li b { color: var(--vp-red, #C7323B); }

/* ---------- 结果数据行 ---------- */
.cw-data {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--vp-rule, #14110E);
  margin: 1.4rem 0; background: #fff;
}
.cw-data > div {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--vp-rule, #14110E);
  display: flex; flex-direction: column; gap: 3px;
}
.cw-data > div:last-child { border-right: 0; }
.cw-data .d-num {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800; color: var(--vp-red, #C7323B);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cw-data .d-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--vp-ink-soft, #5B544A);
}
@media (max-width: 720px) {
  .cw-data { grid-template-columns: 1fr 1fr; }
  .cw-data > div:nth-child(2n) { border-right: 0; }
  .cw-data > div:nth-child(-n+2) { border-bottom: 1px solid var(--vp-rule, #14110E); }
}