/* pegboard-hooks · 详情页：挂在板上的写字夹板 */
.pg-detail { max-width: 960px; margin: 0 auto; }
.pg-detail .detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; width: fit-content; max-width: 100%; margin-bottom: 12px; padding: 4px 10px; border-radius: 4px; background: var(--pg-card); color: var(--pg-soft); font-size: .9rem; }
.pg-detail .detail-breadcrumb a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pg-red); font-weight: 700; }
.pg-detail .detail-top-ad:has(.ad) { margin: 8px 0 24px; }

.pg-clipboard { position: relative; padding: 34px 18px 18px; border-radius: 16px; background: var(--pg-slate); box-shadow: 0 12px 24px rgba(30, 39, 49, .22); }
.pg-clip { position: absolute; left: calc(50% - 70px); top: -10px; width: 140px; height: 34px; border-radius: 8px 8px 4px 4px; background: linear-gradient(#c9d0d7, #8f9aa5); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.pg-clip::before { content: ""; position: absolute; left: 50%; top: 8px; width: 30px; height: 10px; margin-left: -15px; border-radius: 5px; background: var(--pg-slate); }
.pg-paper { padding: 28px 32px 16px; border-radius: 4px; background: var(--pg-card); }
.pg-paper-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.pg-paper-head h1 { margin: 0; font-family: var(--pg-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; }
.pg-paper-byline { margin: 12px 0 20px; padding-bottom: 16px; border-bottom: 2px dashed var(--pg-hole); color: var(--pg-soft); font-size: .92rem; }
.pg-paper .detail-summary { padding: 12px 16px; border-radius: 6px; background: #fff6d6; line-height: 1.6; }
.pg-paper .detail-image img { border-radius: 6px; }
.pg-paper .detail-prose { max-width: 70ch; font-size: 1.06rem; line-height: 1.75; }
.pg-paper .detail-prose h2, .pg-paper .detail-prose h3 { font-family: var(--pg-display); font-weight: 900; }
.pg-paper .detail-prose a { color: var(--pg-red); }

.pg-swap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 8px; }
.pg-swap-link { display: grid; gap: 4px; padding: 14px 18px; border-radius: 10px; background: var(--pg-card); font-weight: 700; line-height: 1.35; box-shadow: 0 4px 10px rgba(30, 39, 49, .12); }
.pg-swap-link:hover { color: var(--pg-red); }
.pg-swap-dir { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-soft); }
.pg-swap-next { grid-column: 2; text-align: right; }

@media (max-width: 767px) {
    .pg-clipboard { padding: 26px 8px 8px; border-radius: 10px; }
    .pg-clip { left: calc(50% - 50px); width: 100px; height: 26px; }
    .pg-paper { padding: 16px 14px 8px; }
    .pg-paper-head h1 { font-size: 1.6rem; }
    .pg-swap { grid-template-columns: minmax(0, 1fr); }
    .pg-swap-next { grid-column: auto; }
}