@charset "UTF-8";

.resource-article {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
    border-radius: 6px;
}
.resource-article__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F4F7FB;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.resource-article__image img { width: 100%; height: 100%; object-fit: contain; }
.resource-article h2 { line-height: 1.45; letter-spacing: 0; }
.resource-article__body > p { color: var(--text-muted); }
.resource-article__body > p:last-child { margin-bottom: 0; }
.resource-article__link { font-size: .9375rem; font-weight: 600; }

.article-shell { max-width: 880px; }
.article-header { padding: var(--sp-6) 0 var(--sp-7); border-bottom: 1px solid var(--border); }
.article-header h1 { font-size: 2.125rem; line-height: 1.45; letter-spacing: 0; margin-bottom: var(--sp-5); }
.article-header .post-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; }
.article-summary { font-size: 1.125rem; color: var(--text-muted); line-height: 1.9; }
.article-body { padding: var(--sp-6) 0 var(--sp-7); line-height: 1.95; overflow-wrap: anywhere; }
.article-body h2 { margin: var(--sp-7) 0 var(--sp-4); font-size: 1.5rem; line-height: 1.5; letter-spacing: 0; }
.article-body h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: 1.125rem; letter-spacing: 0; }
.article-body h2:first-child { margin-top: 0; }
.article-body ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--sp-5); }
.article-body ul li + li { margin-top: var(--sp-2); }
.article-body sup { font-size: .75em; }
.article-body .article-key { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); background: #F0F7FA; border-left: 3px solid #087F73; }
.article-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) 0 var(--sp-5); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border); font-size: .9375rem; }
.article-toc strong { flex-basis: 100%; }
.article-formula { padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; background: #F4F7FB; border-left: 3px solid var(--brand); overflow-x: auto; font-size: .9375rem; }
.article-formula p { min-width: 420px; margin: 0; line-height: 2.1; }
.article-math-table { min-width: 680px !important; }
.article-figure { margin: var(--sp-6) 0; }
.article-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; }
.article-figure figcaption { margin-top: var(--sp-3); font-size: .875rem; color: var(--text-muted); line-height: 1.8; }
.article-table { margin: var(--sp-5) 0 var(--sp-6); overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
.article-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; line-height: 1.8; }
.article-table caption { text-align: left; padding: var(--sp-4); font-weight: 700; background: #F4F7FB; color: var(--brand); }
.article-table th, .article-table td { padding: 12px 16px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-table thead th { background: #F4F7FB; font-weight: 600; }
.article-table tbody th { font-weight: 600; min-width: 112px; }
.article-flow { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); counter-reset: step; border-top: 1px solid var(--border); }
.article-flow li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.article-flow li::before { content: counter(step, decimal-leading-zero); color: #087F73; font-weight: 700; }
.article-flow strong { display: block; }
.article-flow p { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.article-references { padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-muted); }
.article-references h2 { font-size: 1.125rem; margin-top: 0; }
.article-references ol { list-style: decimal; padding-left: 1.4em; }
.article-references li + li { margin-top: 8px; }
.article-related { padding: var(--sp-6) 0; border-top: 1px solid var(--border); }
.article-related h2 { font-size: 1.25rem; letter-spacing: 0; }
.article-related p { color: var(--text-muted); }
.article-back { display: inline-block; margin-top: var(--sp-4); }

@media (max-width: 700px) {
    .resource-article { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5); }
    .resource-article__image { aspect-ratio: 16 / 9; }
    .article-header { padding: var(--sp-5) 0 var(--sp-6); }
    .article-header h1 { font-size: 1.75rem; }
    .article-header .post-meta { display: block; }
    .article-header .post-meta span, .article-header .post-meta time { display: block; }
    .article-summary { font-size: 1rem; }
    .article-body h2 { font-size: 1.25rem; }
    .article-key { padding: var(--sp-4); }
}

@media print {
    .article-shell { max-width: none; }
    .article-related, .article-back { display: none; }
    .article-table { overflow: visible; }
    .article-table table { min-width: 0; }
    .article-figure { break-inside: avoid; }
}