.detail-page { max-width: 900px; margin: 0 auto; padding: 42px 24px 64px; }
.breadcrumb-nav { margin: 0 0 16px; font-size: 14px; color: #857f77; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
.breadcrumb-list a { color: #857f77; text-decoration: none; }
.breadcrumb-list a:hover { color: #a92325; text-decoration: underline; }
.breadcrumb-sep { color: #c4bcb2; user-select: none; }
.breadcrumb-list li[aria-current="page"] { color: #252525; font-weight: 600; }

.detail-card { padding: 42px; background: #fffdfa; border: 1px solid #e8e0d5; border-radius: 20px; box-shadow: 0 16px 36px rgb(81 56 38 / 7%); }
.detail-kicker { margin: 0; color: #bd2527; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.detail-card h1 { margin: 10px 0 30px; color: #252525; font-size: clamp(32px, 4vw, 42px); letter-spacing: -0.04em; line-height: 1.2; }
.detail-numbers { margin: 0 0 34px; color: #30323a; font-size: clamp(40px, 5vw, 54px); font-weight: 800; letter-spacing: 0.05em; line-height: 1; }
.detail-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.detail-card dl div { min-height: 86px; padding: 17px 18px; background: #fff; border: 1px solid #f1ebe3; border-radius: 12px; }
.detail-card dt { color: #857f77; font-size: 14px; }
.detail-card dd { margin: 8px 0 0; color: #292929; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.detail-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 0; padding: 18px 0; border-top: 1px solid #f1ebe3; border-bottom: 1px solid #f1ebe3; }
.detail-pager-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s ease-in-out; }
.detail-pager-btn.prev, .detail-pager-btn.next { color: #a92325; background: #fff7f5; border: 1px solid #f0d7d2; }
.detail-pager-btn.prev:hover, .detail-pager-btn.next:hover { background: #feebe8; color: #7e1719; }
.detail-pager-btn.disabled { color: #b5ada4; background: #f7f4ef; border: 1px solid #eae4dc; cursor: not-allowed; }

.detail-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 24px 0 0; }
.detail-links a { color: #a92325; font-weight: 700; text-decoration: none; }
.detail-links a:hover { color: #7e1719; text-decoration: underline; }

@media (max-width: 640px) {
  .detail-page { padding: 18px 12px 40px; }
  .breadcrumb-nav { margin: 0 0 12px; font-size: 13px; }
  .detail-card { padding: 26px 18px 22px; border-radius: 18px; }
  .detail-kicker { font-size: 13px; }
  .detail-card h1 { margin: 8px 0 24px; font-size: clamp(28px, 8vw, 34px); line-height: 1.25; word-break: keep-all; }
  .detail-numbers { margin-bottom: 28px; font-size: 38px; }
  .detail-card dl { grid-template-columns: 1fr; gap: 10px; }
  .detail-card dl div { min-height: 0; padding: 14px; }
  .detail-card dd { margin-top: 6px; font-size: 16px; }
  .detail-pager { flex-direction: column; gap: 8px; align-items: stretch; }
  .detail-pager-btn { justify-content: center; width: 100%; box-sizing: border-box; }
  .detail-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .detail-links a { padding: 11px 8px; text-align: center; background: #fff7f5; border: 1px solid #f0d7d2; border-radius: 9px; font-size: 14px; }
}