.blog-breadcrumbs { padding-block: 24px; }
.blog-breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; gap: 7px 12px; color: var(--muted); font-size: 13px; }
.blog-breadcrumbs li + li::before { content: '/'; margin-right: 12px; color: #7d8999; }
.blog-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.blog-index-hero { background: var(--navy); color: #fff; padding: 65px 0 70px; }
.blog-index-hero h1 { max-width: 900px; font-size: clamp(43px,4.8vw,68px); }
.blog-index-intro { max-width: 920px; padding-block: 45px 15px; color: var(--muted); font-size: 18px; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.guide-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--blue); padding: 32px; background: #fff; }
.guide-card:hover, .guide-card:focus-visible { border-color: var(--blue); }
.guide-card h2 { font-size: 32px; line-height: 1.18; letter-spacing: -.015em; margin: 14px 0 18px; }
.guide-card:hover h2 { color: var(--blue); }
.guide-card p { color: var(--muted); }
.guide-card img { width: calc(100% + 64px); max-width: none; margin: -32px -32px 27px; aspect-ratio: 1200/630; object-fit: cover; }
.guide-topic { font-size: 11px; color: var(--blue); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.guide-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 26px; gap: 20px; font-size: 14px; color: var(--muted); }
.guide-card-bottom strong { color: var(--blue); font-size: 15px; }
.guide-card-bottom strong span { color: var(--red); margin-left: 10px; }
.article-header { padding-top: 35px; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.article-header h1 { max-width: 1080px; font-size: clamp(43px,4.8vw,66px); line-height: 1.08; letter-spacing: -.025em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 9px 24px; color: var(--muted); font-size: 14px; margin-top: 27px; }
.article-featured { margin-top: 38px; max-width: 1000px; }
.article-featured img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; }
.article-intro { max-width: 840px; padding-block: 35px 42px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.article-layout { display: grid; grid-template-columns: minmax(0,840px) minmax(240px,1fr); column-gap: 65px; align-items: start; padding-bottom: 80px; }
.article-toc { grid-column: 2; grid-row: 1; position: sticky; top: 112px; background: var(--gray-bg); border-top: 3px solid var(--blue); padding: 23px; max-height: calc(100dvh - 135px); overflow: auto; }
.article-toc summary { font: 700 24px/1.2 var(--heading-font); cursor: pointer; color: var(--navy); }
.article-toc nav { margin-top: 16px; }
.article-toc nav a { display: block; color: var(--muted); padding-block: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.article-toc nav a:hover { color: var(--blue); text-decoration: underline; }
.article-content { grid-column: 1; grid-row: 1; min-width: 0; font-size: 18px; line-height: 1.75; color: #39485c; }
.article-content h2 { color: var(--black); font-size: clamp(31px,3vw,40px); line-height: 1.16; letter-spacing: -.02em; margin: 60px 0 24px; }
.article-content > section:first-child > h2 { margin-top: 0; }
.article-content h3 { color: var(--navy); font-size: 27px; line-height: 1.25; margin: 30px 0 16px; }
.article-content p + p { margin-top: 21px; }
.article-content ul, .article-content ol { padding-left: 25px; margin-block: 22px; }
.article-content li + li { margin-top: 10px; }
.article-content p a, .article-content li a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-diagram { background: var(--gray-bg); border: 1px solid var(--line); padding: 24px; margin-top: 35px; }
.article-diagram h3 { margin: 0 0 20px; font-size: 25px; }
.article-diagram-scroll { overflow-x: auto; }
.article-diagram svg { display: block; width: 100%; min-width: 640px; height: auto; }
.article-diagram figcaption { font-size: 15px; line-height: 1.6; margin-top: 20px; padding-top: 18px; border-top: 1px solid #cbd6e3; }
.article-diagram-hint { display: none; color: var(--blue); font-size: 12px; margin-top: 12px; }
.article-faq .faq-list { margin-top: 10px; }
.article-faq .faq-list h3 { font-size: 22px; margin: 0; color: var(--black); }
.article-faq .faq-list p { font-size: 17px; line-height: 1.75; }
.article-related { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 45px; }
.article-related h2 { margin-top: 0; font-size: 31px; }
.article-related ul { list-style: none; padding: 0; margin: 0; }
.article-related li { border-bottom: 1px solid var(--line); margin: 0; }
.article-related a { display: flex; justify-content: space-between; gap: 20px; padding-block: 14px; color: var(--blue); font-size: 17px; font-weight: 600; text-decoration: none !important; }
.article-related a:hover { text-decoration: underline !important; }
.article-closing { border: 1px solid var(--line); border-left: 3px solid var(--red); padding: 30px; margin-top: 38px; }
.article-closing h2 { margin: 0 0 16px; font-size: 30px; }
.article-closing p { font-size: 17px; }
.article-closing .button { margin-top: 22px; font-size: 18px; }
.article-back { margin-top: 35px; font-size: 16px; }
.related-guides { padding-block: 28px; border-top: 1px solid var(--line); margin-bottom: 40px; font-size: 16px; }
.related-guides strong { color: var(--navy); margin-right: 9px; }
.related-guides a { display: inline; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.related-guides a + a::before { content: ' · '; display: inline; color: var(--muted); }
.primary-nav > a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }
@media(min-width:1081px) and (max-width:1350px) {
 .primary-nav { gap: 21px; }
}
@media(max-width:1080px) {
 .article-layout { column-gap: 35px; grid-template-columns: minmax(0,1fr) 245px; }
 .article-toc { padding: 20px; }
 .guide-card { padding: 26px; }
 .guide-card img { width: calc(100% + 52px); margin: -26px -26px 24px; }
}
@media(max-width:900px) {
 .article-layout { grid-template-columns: 1fr; gap: 38px; }
 .article-toc { grid-column: 1; grid-row: 1; position: static; max-height: none; }
 .article-content { grid-column: 1; grid-row: 2; }
}
@media(max-width:760px) {
 .blog-breadcrumbs { padding-block: 19px; }
 .blog-breadcrumbs ol { font-size: 12px; }
 .blog-index-hero { padding-block: 45px; }
 .blog-index-hero h1 { font-size: 43px; }
 .blog-index-intro { padding-block: 30px 0; font-size: 17px; }
 .guide-grid { grid-template-columns: 1fr; gap: 22px; }
 .guide-card h2 { font-size: 29px; }
 .article-header { padding-top: 20px; padding-bottom: 28px; }
 .article-header h1 { font-size: clamp(37px,9vw,52px); }
 .article-intro { padding-block: 28px 32px; font-size: 18px; }
 .article-meta { font-size: 13px; margin-top: 22px; }
 .article-content { font-size: 17px; line-height: 1.75; }
 .article-content h2 { font-size: 32px; margin-top: 45px; }
 .article-content h3 { font-size: 26px; }
 .article-layout { padding-bottom: 60px; }
 .article-diagram { padding: 18px; }
 .article-diagram-hint { display: block; }
 .article-related h2, .article-closing h2 { font-size: 29px; }
 .article-closing { padding: 23px; }
 .article-closing .button { font-size: 16px; padding-inline: 18px; gap: 12px; }
 .related-guides strong { display: block; margin-bottom: 9px; }
}
@media print {
 .article-toc, .article-closing, .article-related, .article-back, .blog-breadcrumbs, .article-diagram-hint { display: none; }
 .article-header { padding: 0 0 12pt; }
 .article-header h1 { font-size: 27pt; }
 .article-intro { padding: 15pt 0; }
 .article-layout { display: block; }
 .article-content { color: #000; font-size: 11pt; }
 .article-content h2 { font-size: 20pt; margin-top: 20pt; }
 .article-content h3 { font-size: 15pt; }
 .article-diagram { break-inside: avoid; }
 .article-diagram-scroll { overflow: visible; }
 .article-diagram svg { min-width: 0; }
}