.composition-ratio-page .composition-article {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px 64px;
    color: var(--text);
}
.composition-ratio-page .article-header {
    max-width: 900px;
    margin: 8px auto 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}
.composition-ratio-page .article-kicker {
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 700;
}
.composition-ratio-page .article-header h1 {
    max-width: 760px;
    margin: 0;
    color: var(--text);
    font-size: 2.25rem;
    line-height: 1.45;
}
.composition-ratio-page .article-deck {
    max-width: 760px;
    margin: 16px 0 20px;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.8;
}
.composition-ratio-page .article-byline {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
}
.composition-ratio-page .article-byline span { padding: 0 8px; }
.composition-ratio-page .article-content {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.95;
}
.composition-ratio-page .article-content h2 {
    margin: 2.5rem 0 1rem;
    color: var(--text);
    font-size: 1.55rem;
    line-height: 1.55;
    scroll-margin-top: 100px;
}
.composition-ratio-page .article-content h3 {
    margin: 1.8rem 0 .6rem;
    color: var(--text);
    font-size: 1.14rem;
    line-height: 1.6;
    scroll-margin-top: 100px;
}
.composition-ratio-page .article-content p,
.composition-ratio-page .article-content li { color: var(--text); }
.composition-ratio-page .article-content li { margin-bottom: 8px; }
.composition-ratio-page .article-content a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.composition-ratio-page .article-content a:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 3px;
}
.composition-ratio-page .featured-image { margin: 0 auto 28px; }
.composition-ratio-page .featured-image img {
    display: block;
    width: min(100%, 760px);
    height: auto;
    margin: auto;
    border-radius: 8px;
}
.composition-ratio-page figcaption {
    margin-top: 10px;
    color: #475569;
    font-size: .88rem;
    line-height: 1.6;
}
.composition-ratio-page .answer-lead {
    padding: 18px 20px;
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 4px;
    color: #0f172a;
}
.composition-ratio-page .contents-list {
    margin: 28px 0;
    padding: 18px 22px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}
.composition-ratio-page .contents-list h2 { margin: 0 0 8px; font-size: 1.08rem; }
.composition-ratio-page .contents-list ul { margin: 0; padding-left: 1.3rem; }
.composition-ratio-page .contents-list li { margin: 2px 0; }
.composition-ratio-page .formula-box {
    display: grid;
    gap: 6px;
    margin: 20px 0;
    padding: 18px 20px;
    background: #f0fdfa;
    border-left: 4px solid #0f766e;
    border-radius: 4px;
    color: #0f172a;
}
.composition-ratio-page .formula-box strong { font-size: 1.08rem; }
.composition-ratio-page .formula-box span { color: #334155; font-size: .92rem; }
.composition-ratio-page .composition-visual {
    margin: 24px 0;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #0f172a;
}
.composition-ratio-page .visual-heading,
.composition-ratio-page .visual-row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) minmax(110px, 2fr) 54px;
    gap: 12px;
    align-items: center;
}
.composition-ratio-page .visual-heading {
    grid-template-columns: 1fr auto;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.composition-ratio-page .visual-heading strong { color: #334155; font-size: .9rem; }
.composition-ratio-page .visual-row { margin: 12px 0; }
.composition-ratio-page .visual-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.composition-ratio-page .visual-track {
    height: 14px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 7px;
}
.composition-ratio-page .visual-bar { display: block; height: 100%; border-radius: inherit; }
.composition-ratio-page .visual-bar.food { background: #2563eb; }
.composition-ratio-page .visual-bar.clothing { background: #0f766e; }
.composition-ratio-page .visual-bar.goods { background: #d15e41; }
.composition-ratio-page .table-scroll { max-width: 100%; overflow-x: auto; margin: 20px 0; border: 1px solid var(--border); border-radius: 6px; }
.composition-ratio-page table { width: 100%; min-width: 580px; border-collapse: collapse; background: #fff; color: #0f172a; }
.composition-ratio-page th,
.composition-ratio-page td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--border); }
.composition-ratio-page thead th { background: #f1f5f9; }
.composition-ratio-page tbody tr:last-child th,
.composition-ratio-page tbody tr:last-child td { border-bottom: 0; }
.composition-ratio-page .formula-code {
    margin: 16px 0;
    padding: 14px 18px;
    overflow-x: auto;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #0f172a;
}
.composition-ratio-page .formula-code code { color: inherit; white-space: nowrap; }
.composition-ratio-page .article-summary { margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
    .composition-ratio-page .composition-article { padding: 16px 16px 44px; }
    .composition-ratio-page .article-header { margin: 4px 0 20px; padding: 16px 0 22px; }
    .composition-ratio-page .article-header h1 { font-size: 1.7rem; }
    .composition-ratio-page .article-deck { font-size: 1rem; }
    .composition-ratio-page .article-content h2 { font-size: 1.35rem; }
    .composition-ratio-page .contents-list,
    .composition-ratio-page .composition-visual { padding: 15px; }
    .composition-ratio-page .visual-heading,
    .composition-ratio-page .visual-row { grid-template-columns: minmax(64px, .8fr) minmax(80px, 2fr) 48px; gap: 8px; }
    .composition-ratio-page .visual-heading { grid-template-columns: 1fr auto; }
}