/* 30 · 猫眼防偷窥 —— 视觉母题「门体剖面 / 黄铜配件」
   独立布局：左 CSS 绘制门板剖面 + 右规格表单；方案卡用竖向优先级编号条，非网格卡片。 */
.b29.pc-wrap {
    --b29-bg: #f4f3ed;
    --b29-surface: #fffefa;
    --b29-surface-2: #f7f5ed;
    --b29-ink: #222a26;
    --b29-sub: #4e5c55;
    --b29-muted: #87918a;
    --b29-line: #e4e3d7;
    --b29-line-strong: #cfd1c0;
    --b29-accent: #2f6151;
    --b29-accent-2: #b08135;
    --b29-tint: #e6f0e9;
    --b29-radius: 12px;
    --b29-radius-sm: 8px;
    --pc-wood: #d9d0ba;
    --pc-brass: #b68a41;
}
:root[data-theme="dark"] .b29.pc-wrap {
    --b29-bg: #0f1412;
    --b29-surface: #1a211e;
    --b29-surface-2: #212a25;
    --b29-ink: #eaf1ec;
    --b29-sub: #b7c6bd;
    --b29-muted: #8b9c92;
    --b29-line: #2c3832;
    --b29-line-strong: #3b4a42;
    --b29-accent: #82c4a6;
    --b29-accent-2: #e3bd78;
    --b29-tint: #20362c;
    --pc-wood: #3a3b32;
    --pc-brass: #d2ae6c;
}
.pc-hero h1 em { font-style: normal; color: var(--b29-accent-2); }

/* 左：门体剖面（纯 CSS，无图片） */
.pc-board { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.pc-door { background: var(--b29-surface-2); padding: 26px 24px; border-right: 1px solid var(--b29-line); }
.pc-door-label { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--b29-accent-2); margin-bottom: 16px; }
.pc-door-panel { position: relative; width: min(250px, 92%); height: 290px; margin: 0 auto; border-radius: 7px;
    background: linear-gradient(100deg, var(--pc-wood), color-mix(in srgb, var(--pc-wood) 78%, #fff) 45%, var(--pc-wood));
    border: 3px solid rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 18px 32px rgba(0,0,0,.13); }
.pc-door-grain { position: absolute; inset: 14px; border: 1px solid rgba(0,0,0,.09); border-radius: 4px;
    background: repeating-linear-gradient(92deg, transparent 0 18px, rgba(0,0,0,.025) 18px 19px); }
.pc-peephole { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #f0d9a0, var(--pc-brass) 55%, #6f5224); border: 4px solid rgba(0,0,0,.22);
    display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.pc-lens { width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fb9bd, #1d2a2e 70%); }
.pc-door-arrow { position: absolute; top: 140px; left: -6px; right: -6px; text-align: center; font-size: 11.5px;
    color: var(--b29-sub); font-family: var(--b29-mono); letter-spacing: .04em; }
.pc-cover-mark { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 7px 12px; border-radius: 6px;
    background: var(--b29-accent); color: #fff; font-size: 12px; font-weight: 750; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.pc-cover-mark.is-hot { background: var(--b29-danger); }
.pc-door-foot { margin-top: 20px; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.8; }
.pc-door-foot b { color: var(--b29-accent); }

.pc-form { background: var(--b29-surface); padding: 28px 28px 24px; }
.pc-form h2 { font-size: var(--b29-lg); margin-bottom: 6px; }
.pc-question { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pc-form .b29-input { max-width: 100%; }
.pc-form .b29-chip { border-radius: 8px; }

/* 右：方案优先级条 */
.pc-verdict { padding: 18px 20px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); margin-bottom: 20px; font-size: var(--b29-sm); line-height: 1.85; }
.pc-verdict b { color: var(--b29-accent); }
.pc-verdict .pc-verdict-title { display: block; font-size: var(--b29-md); font-weight: 800; margin-bottom: 6px; color: var(--b29-ink); }
.pc-plans { display: flex; flex-direction: column; gap: 12px; }
.pc-plan { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: start;
    padding: 18px 20px; background: var(--b29-surface); border: 1px solid var(--b29-line); border-radius: var(--b29-radius); }
.pc-plan-no { font-family: var(--b29-mono); font-size: 26px; font-weight: 800; color: var(--b29-line-strong); line-height: 1; }
.pc-plan.is-top { border-left: 4px solid var(--b29-accent); }
.pc-plan.is-top .pc-plan-no { color: var(--b29-accent); }
.pc-plan h3 { font-size: var(--b29-md); margin-bottom: 5px; }
.pc-plan p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; margin: 0 0 8px; }
.pc-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-plan-tags span { font-size: var(--b29-xs); padding: 2px 9px; border-radius: 999px; background: var(--b29-surface-2); color: var(--b29-sub); border: 1px solid var(--b29-line); }
.pc-plan-note { font-size: var(--b29-xs); color: var(--b29-warn); line-height: 1.7; }
.pc-plan-rank { font-size: var(--b29-xs); font-weight: 800; color: var(--b29-accent); white-space: nowrap; }

.pc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-check-item { display: flex; gap: 12px; padding: 15px 17px; background: var(--b29-surface); border: 1px solid var(--b29-line); border-radius: var(--b29-radius-sm); }
.pc-check-item > span { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
    background: var(--b29-tint); color: var(--b29-accent); font-size: var(--b29-xs); font-weight: 800; }
.pc-check-item b { display: block; font-size: var(--b29-sm); }
.pc-check-item small { display: block; color: var(--b29-muted); font-size: var(--b29-xs); line-height: 1.7; margin-top: 3px; }

@media (max-width: 900px) {
    .pc-board { grid-template-columns: minmax(0, 1fr); }
    .pc-door { border-right: 0; border-bottom: 1px solid var(--b29-line); }
    .pc-checklist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .pc-door, .pc-form { padding: 18px 16px; }
    .pc-door-panel { height: 240px; }
    .pc-plan { grid-template-columns: 40px minmax(0, 1fr); }
    .pc-plan-rank { grid-column: 2; }
}