/* keycap-deck · 详情页：大刻字键帽 + 修饰键样式的元信息 */
.kc-detail { max-width: 960px; margin: 0 auto; }
.kc-detail .detail-breadcrumb { padding: 4px 0 12px; color: var(--kc-soft); }
.kc-detail .detail-breadcrumb a { color: #9f1239; font-weight: 600; }
.kc-detail .detail-top-ad:has(.ad) { margin: 4px 0 24px; }

.kc-doc { background: var(--kc-cap); border: 1px solid var(--kc-edge); border-radius: 22px; box-shadow: 0 4px 0 var(--kc-edge); }
.kc-doc-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 26px; align-items: start; padding: 28px 30px 22px; border-bottom: 1px solid var(--kc-edge); }
.kc-doc-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.kc-doc-heading h1 { margin: 0; font-family: var(--kc-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.15; letter-spacing: -.03em; }
.kc-doc-mods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.kc-mod-chip { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 4px 12px 7px; border-radius: 8px; background: #f0f1f5; border: 1px solid var(--kc-edge); box-shadow: inset 0 -3px 0 rgba(31, 35, 48, .1); font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
a.kc-mod-chip { background: var(--kc-tint); }
.kc-doc-body { padding: 24px 30px 18px; }
.kc-doc-body .detail-summary { padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--kc-tint) 45%, #fff); line-height: 1.6; }
.kc-doc-body .detail-prose { max-width: 70ch; font-size: 1.08rem; line-height: 1.75; }
.kc-doc-body .detail-prose a { color: #9f1239; }

.kc-arrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0 8px; }
.kc-arrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--kc-cap); border: 1px solid var(--kc-edge); border-radius: 14px; box-shadow: 0 3px 0 var(--kc-edge); }
.kc-arrow:hover .kc-arrow-title { text-decoration: underline; }
.kc-arrow-title { min-width: 0; font-weight: 600; line-height: 1.35; }
.kc-arrow-next { grid-column: 2; justify-content: flex-end; text-align: right; }

@media (max-width: 767px) {
    .kc-doc { border-radius: 16px; }
    .kc-doc-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px 14px; }
    .kc-cap-xl { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 12px; box-shadow: inset 0 -6px 0 rgba(31, 35, 48, .14), 0 2px 0 var(--kc-edge); padding-bottom: 5px; }
    .kc-doc-heading h1 { font-size: 1.55rem; }
    .kc-doc-body { padding: 16px 14px 8px; }
    .kc-arrows { grid-template-columns: minmax(0, 1fr); }
    .kc-arrow-next { grid-column: auto; }
}