/* 40 · 狗剪指甲教程 —— 视觉母题「指甲剖面 / 分步刻度」
   独立布局：左侧大 SVG 剖面（血线可见性随选择切换）+ 右侧参数；步骤用带刻度的竖向尺。 */
.b29.nc-wrap {
    --b29-bg: #faf6ee;
    --b29-surface: #fffdf8;
    --b29-surface-2: #f6efdf;
    --b29-ink: #2b261c;
    --b29-sub: #5e5543;
    --b29-muted: #958b74;
    --b29-line: #eae0c9;
    --b29-line-strong: #d8c7a3;
    --b29-accent: #b08026;
    --b29-accent-2: #a3483d;
    --b29-tint: #f8edcf;
    --b29-radius: 14px;
    --b29-radius-sm: 9px;
}
:root[data-theme="dark"] .b29.nc-wrap {
    --b29-bg: #15130e;
    --b29-surface: #211e16;
    --b29-surface-2: #2b2618;
    --b29-ink: #f4ecd8;
    --b29-sub: #cabe9f;
    --b29-muted: #9d9177;
    --b29-line: #3a3220;
    --b29-line-strong: #50452b;
    --b29-accent: #e7c06e;
    --b29-accent-2: #ef9b8d;
    --b29-tint: #3c3018;
}
.nc-hero h1 em { font-style: normal; color: var(--b29-accent-2); display: block; font-size: .57em; margin-top: 10px; }
.nc-console { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.nc-figure { padding: 24px 26px; background: var(--b29-surface-2); }
.nc-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); margin-bottom: 8px; }
.nc-nail { width: 100%; height: auto; display: block; background: var(--b29-surface); border: 1px solid var(--b29-line); border-radius: var(--b29-radius-sm); }
.nc-shell { fill: #efe3c8; stroke: #bda982; stroke-width: 3; }
.nc-quick { fill: #d98b86; opacity: .9; transition: opacity .25s, fill .25s; }
.nc-quick-label { font-size: 13px; font-weight: 800; fill: #6f312d; font-family: var(--b29-font); }
.nc-cut { stroke: var(--b29-accent-2); stroke-width: 3; stroke-dasharray: 7 5; }
.nc-cut-label, .nc-foot-label { font-size: 11px; fill: var(--b29-muted); font-family: var(--b29-font); }
.nc-nail.is-dark .nc-shell { fill: #4a4237; stroke: #2f2a22; }
.nc-nail.is-dark .nc-quick { fill: #4a4237; opacity: 1; }
.nc-nail.is-dark .nc-quick-label { fill: #f0d8a0; }
.nc-nail.is-mix .nc-quick { opacity: .45; }
.nc-figure-note { margin-top: 10px; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.75; }
.nc-side { padding: 26px 24px; background: var(--b29-surface); border-left: 1px solid var(--b29-line); display: flex; flex-direction: column; gap: 13px; }
.nc-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); }
.nc-side-h2 { font-size: var(--b29-lg); margin-bottom: 4px; }

.nc-verdict { padding: 17px 20px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 22px; }
.nc-verdict b { color: var(--b29-accent); }
/* 竖向刻度尺：左侧轴线串起每步 */
.nc-steps { display: flex; flex-direction: column; }
.nc-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding-bottom: 18px; position: relative; }
.nc-step:not(:last-child)::before { content: ""; position: absolute; left: 20px; top: 40px; bottom: 0; width: 2px; background: var(--b29-line-strong); }
.nc-step-no { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: var(--b29-tint); border: 2px solid var(--b29-accent); color: var(--b29-accent);
    font-family: var(--b29-mono); font-size: var(--b29-sm); font-weight: 800; z-index: 2; }
.nc-step-body { padding: 8px 0 0; }
.nc-step h3 { font-size: var(--b29-md); margin-bottom: 5px; }
.nc-step p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.78; margin: 0 0 6px; }
.nc-step small { font-size: var(--b29-xs); color: var(--b29-accent-2); line-height: 1.7; }

.nc-bleed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nc-bleed-item { padding: 16px; border-radius: var(--b29-radius-sm); background: var(--b29-surface); border: 1px solid var(--b29-line); border-top: 4px solid var(--b29-accent-2); }
.nc-bleed-item b { display: block; font-size: var(--b29-sm); margin-bottom: 5px; }
.nc-bleed-item small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.75; }

@media (max-width: 900px) {
    .nc-console { grid-template-columns: minmax(0, 1fr); }
    .nc-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .nc-bleed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nc-figure, .nc-side { padding: 18px 16px; }
    .nc-bleed { grid-template-columns: minmax(0, 1fr); }
    .nc-step { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
    .nc-step:not(:last-child)::before { left: 17px; }
    .nc-step-no { width: 36px; height: 36px; }
}