.article-detail { max-width: 1120px; margin: 0 auto; padding: 24px 26px 70px; }
.article-detail .seo-breadcrumb { margin: 0 0 18px; }
.article-detail-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 28px; align-items: center; padding: 34px; border: 1px solid #6d2589; border-radius: 24px; background: radial-gradient(circle at 85% 15%,#442070 0,transparent 42%),linear-gradient(135deg,#210438,#0d0118); box-shadow: 0 24px 70px #0008; }
.article-detail-hero .eyebrow { color: #ef78ff; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.article-detail-hero h1 { margin: 10px 0 14px; color: #fff; font-size: clamp(30px,4.4vw,52px); line-height: 1.15; }
.article-detail-hero p { margin: 0; color: #ded1e8; font-size: 16px; line-height: 1.8; }
.article-updated { display: block; margin-top: 16px; color: #bca9c9; font-size: 12px; }
.article-detail-hero img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid #ffffff22; border-radius: 18px; box-shadow: 0 18px 45px #0008; }
.article-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 28px; align-items: start; margin-top: 28px; }
.article-copy { padding: 30px 34px; border: 1px solid #ffffff18; border-radius: 22px; background: #130320d9; }
.article-copy section + section { margin-top: 38px; padding-top: 32px; border-top: 1px solid #ffffff14; }
.article-copy h2 { margin: 0 0 14px; color: #fff; font-size: clamp(22px,3vw,30px); line-height: 1.3; }
.article-copy h3 { margin: 24px 0 10px; color: #f4c8ff; font-size: 18px; }
.article-copy p,.article-copy li { color: #d8cce2; font-size: 15px; line-height: 1.85; }
.article-copy ul,.article-copy ol { margin: 12px 0 0; padding-left: 22px; }
.article-copy li + li { margin-top: 8px; }
.article-copy a { color: #f18cff; font-weight: 800; text-underline-offset: 3px; }
.article-callout { margin: 24px 0; padding: 18px 20px; border: 1px solid #9b3bc2; border-radius: 16px; background: linear-gradient(135deg,#4a126455,#17245366); }
.article-callout b { display: block; margin-bottom: 5px; color: #ffd86b; }
.article-toc { position: sticky; top: 20px; padding: 20px; border: 1px solid #7d2a9c; border-radius: 18px; background: #19052ae8; }
.article-toc b { display: block; margin-bottom: 12px; color: #fff; }
.article-toc a { display: block; padding: 9px 0; color: #cdbfd8; border-bottom: 1px solid #ffffff10; font-size: 13px; line-height: 1.45; text-decoration: none; }
.article-toc a:hover { color: #ffd86b; }
.article-related { margin-top: 28px; padding: 26px; border: 1px solid #ffffff18; border-radius: 22px; background: #130320; }
.article-related h2 { margin: 0 0 18px; color: #fff; font-size: 24px; }
.article-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.article-related-grid a { padding: 16px; color: #fff; border: 1px solid #743095; border-radius: 15px; background: #26063c; font-weight: 800; line-height: 1.5; text-decoration: none; }
.article-related-grid a:hover { border-color: #ffd86b; transform: translateY(-2px); }
@media (max-width:900px){.article-detail-hero,.article-detail-layout{grid-template-columns:1fr}.article-detail-hero img{max-height:360px}.article-toc{position:static}.article-related-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.article-detail{padding:18px 14px 50px}.article-detail-hero{padding:24px 20px}.article-copy{padding:24px 20px}.article-related-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.article-related-grid a{transition:none}}