a { text-underline-offset: .22em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #6366f1; outline-offset: 5px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 300; background: #fff; padding: 12px 20px; color: #3730a3; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.card h3 a, .extra-card h3 a, .drama-item h4 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .extra-card h3 a:hover, .drama-item h4 a:hover { color: #4f46e5; text-decoration: underline; }
.card, .extra-card { overflow-wrap: anywhere; }
.header-inner { gap: 24px; }
.nav { gap: 18px; }
.logo { flex-shrink: 0; }
.logo img { width: 55px; height: 44px; object-fit: contain; }
.logo span { font-size: 1.25rem; }
.hero { padding-left: 24px; padding-right: 24px; }
.hero-content, .hero-image { min-width: 0; }
.hero h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.3; }
.hero-image img, .card-img, .step-img, .community-images img, .timeline-right img { object-fit: contain; background: #eeedff; }
.table-scroll { overflow-x: auto; border: 1px solid #dfe3f5; border-radius: 20px; background: #fff; }
table { border-collapse: collapse; width: 100%; text-align: left; line-height: 1.7; }
th, td { padding: 20px; border-bottom: 1px solid #e4e8f3; vertical-align: top; }
thead th { background: #eef2ff; color: #3730a3; font-size: .96rem; }
tbody th { width: 17%; min-width: 130px; color: #1e293b; }
tbody td { color: #475569; min-width: 190px; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.comparison-section { padding-top: 0; }
.article-main { max-width: 1180px; padding-top: 34px; padding-bottom: 70px; }
.breadcrumbs { color: #64748b; font-size: .9rem; margin-bottom: 32px; }
.breadcrumbs a { color: #4f46e5; }
.article-heading { max-width: 900px; margin-bottom: 36px; }
.article-heading h1 { font-size: clamp(1.8rem,3.8vw,3rem); line-height: 1.35; }
.article-summary { font-size: 1.15rem; color: #475569; line-height: 1.85; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 42px; align-items: start; }
.article-body { min-width: 0; font-size: 1.05rem; line-height: 1.9; }
.quick-answer { padding: 26px; border-radius: 20px; background: linear-gradient(120deg,#e9edff,#f1e8ff); border: 1px solid #d6dafa; color: #312e81; }
.quick-answer strong { display: block; margin-bottom: 8px; }
.article-figure { margin: 28px 0 38px; }
.article-figure img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; background: #edeaff; border-radius: 22px; }
.article-figure figcaption { color: #64748b; font-size: .82rem; margin-top: 10px; }
.article-section { margin-top: 34px; scroll-margin-top: 110px; }
.article-section h2 { font-size: 1.5rem; line-height: 1.5; margin-bottom: 18px; }
.article-section p { margin-bottom: 18px; }
.article-section ul { padding-left: 1.5em; margin-bottom: 24px; }
.article-section li { margin: 10px 0; }
.article-section a { color: #4338ca; overflow-wrap: anywhere; }
.article-aside { position: sticky; top: 110px; }
.toc, .note-card { padding: 24px; border: 1px solid #e1e6f3; background: #fff; border-radius: 20px; margin-bottom: 20px; }
.toc h2, .note-card h3 { font-size: 1.05rem; line-height: 1.4; }
.toc ol { padding-left: 20px; margin-top: 18px; }
.toc li { margin: 12px 0; }
.toc a, .note-card a { color: #4338ca; font-size: .9rem; }
.note-card p { color: #64748b; margin: 14px 0; font-size: .9rem; }
.related-guides { margin-top: 44px; border-top: 1px solid #dbe2f4; padding-top: 32px; }
.related-guides h2 { font-size: 1.5rem; }
.related-guides ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 28px; padding-left: 22px; margin: 24px 0 32px; }
.related-guides a { color: #4338ca; }
.footer p { max-width: 680px; }
@media (min-width: 769px) and (max-width: 1120px) { .header-inner { flex-wrap: wrap; } .nav { gap: 20px; flex-wrap: wrap; } }
@media (max-width: 768px) {
 .hero { padding-left: 16px; padding-right: 16px; }
 .hero h1 { font-size: 1.85rem; }
 .hero-image { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .header-inner { gap: 12px; }
 .logo img { width: 40px; height: 35px; }
 .logo span { font-size: 1.15rem; }
 .grid-4 .card h3 { font-size: 1.03rem; line-height: 1.5; }
 .grid-4 .card p { font-size: .9rem; line-height: 1.7; }
 .article-main { padding-top: 24px; }
 .article-layout { display: flex; flex-direction: column; gap: 24px; }
 .article-aside { position: static; order: -1; width: 100%; }
 .toc { margin-bottom: 0; }
 .toc ol { columns: 2; column-gap: 32px; }
 .toc li { break-inside: avoid; }
 .article-aside .note-card { display: none; }
 .article-summary { font-size: 1.02rem; }
 .article-body { font-size: 1rem; }
 .article-section h2 { font-size: 1.3rem; }
 .quick-answer { padding: 20px; }
 .related-guides ul { grid-template-columns: minmax(0,1fr); }
 th, td { padding: 14px; }
 .section-title { line-height: 1.45; }
 .footer p { margin-left: auto; margin-right: auto; }
}