.blog-article-page { padding-top:28px; padding-bottom:60px; color:#302635; }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; color:#796c7d; font-size:13px; margin-bottom:28px; }
.article-breadcrumb a { color:#74255f; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
.article-main { min-width:0; }
.article-category { display:inline-block; padding:7px 12px; border-radius:20px; background:#f4eaf2; color:#74255f; font-size:12px; font-weight:750; margin-bottom:18px; }
.article-header h1 { color:#302635; font-size:clamp(30px,3.5vw,44px); font-weight:800; line-height:1.22; letter-spacing:-.7px; margin-bottom:20px; overflow-wrap:anywhere; }
.article-meta { display:flex; flex-wrap:wrap; gap:16px; color:#796c7d; font-size:13px; margin-bottom:28px; }
.article-cover { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-radius:20px; margin-bottom:36px; }
.article-content { color:#594f60; font-size:17px; line-height:1.85; overflow-wrap:anywhere; }
.article-content p { margin-bottom:22px; }
.article-content h2,.article-content h3,.article-content h4 { color:#302635; font-weight:750; line-height:1.35; margin:32px 0 16px; }
.article-content h2 { font-size:28px; }.article-content h3 { font-size:24px; }.article-content h4 { font-size:21px; }
.article-content img { display:block; max-width:100% !important; width:auto; height:auto !important; margin:24px auto; border-radius:14px; }
.article-content figure { max-width:100% !important; margin:24px 0; }
.article-content figure img { width:100%; margin:0; }
.article-content figcaption { text-align:center; font-size:13px; color:#796c7d; margin-top:10px; }
.article-content ul,.article-content ol { padding-left:24px; margin-bottom:24px; }.article-content li+li { margin-top:10px; }
.article-content a { color:#74255f; text-decoration:underline; }
.article-content blockquote { margin:26px 0; padding:22px; border-left:4px solid #883b71; background:#f7f1f8; border-radius:0 12px 12px 0; }
.article-content table { display:block; max-width:100%; overflow-x:auto; }.article-content iframe,.article-content video { max-width:100%; }
.article-end { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid #e6dbe8; padding-top:24px; margin-top:36px; }
.article-end a { color:#74255f; font-size:14px; font-weight:700; }
.article-sidebar { display:grid; gap:24px; }
.article-sidebar-card { padding:22px; border:1px solid #e1d5e5; border-radius:18px; background:#fff; }
.article-sidebar h2 { color:#302635; font-size:20px; font-weight:750; margin-bottom:20px; }
.article-related { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #eee5f0; }.article-related:last-child { border:0; padding-bottom:0; }
.article-related img { width:76px; height:76px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.article-related strong { display:block; color:#302635; font-size:14px; line-height:1.5; font-weight:700; }
.article-related span span { display:block; font-size:12px; color:#74255f; margin-top:8px; }
.article-related:hover { text-decoration:none; }.article-related:hover strong { color:#74255f; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; }.article-tags a { color:#74255f; background:#f4eaf2; border-radius:8px; padding:8px 10px; font-size:13px; }
.article-plan { padding:26px; border-radius:18px; background:#f3edf5; }.article-plan > i { font-size:26px; color:#74255f; margin-bottom:18px; }.article-plan h2 { line-height:1.4; margin-bottom:12px; }.article-plan p { font-size:14px; line-height:1.7; color:#706575; }
.article-plan a { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-radius:10px; background:#74255f; color:#fff; font-size:14px; font-weight:700; }
.blog-article-page a:focus-visible { outline:3px solid #b988a9; outline-offset:4px; }
@media(max-width:991px) { .article-layout { grid-template-columns:minmax(0,1fr) 260px; gap:24px; } }
@media(max-width:767px) { .article-layout { grid-template-columns:1fr; }.blog-article-page { padding-bottom:36px; }.article-cover { margin-bottom:24px; }.article-content { font-size:16px; }.article-sidebar { margin-top:16px; } }