/* ESP32 editorial extension. Shared foundations, existing articles untouched. */
.esp-page { max-width: 1200px; }
.esp-hero { max-width: 940px; padding-block: 40px 24px; }
.esp-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.55; margin-bottom: 20px; }
.esp-hero .lead { max-width: 850px; font-size: 1.125rem; }
.esp-meta, .esp-basis { font-size: .875rem; color: var(--muted); }
.esp-answer { max-width: 920px; padding: 24px 28px; border-left: 4px solid var(--green); background: var(--mist); }
.esp-answer p { margin: 0; font-weight: 650; }
.esp-layout { display: grid; grid-template-columns: minmax(0,1fr) 208px; gap: 52px; padding-block: 34px 64px; align-items: start; }
.esp-toc { grid-column: 2; grid-row: 1; position: sticky; top: 20px; border-top: 2px solid var(--green); padding-top: 15px; }
.esp-toc p { font-size: .875rem; font-weight: 700; }
.esp-toc ol { list-style: none; padding: 0; }
.esp-toc li { margin: 0; border-bottom: 1px solid var(--line); }
.esp-toc a { display: block; padding-block: 10px; font-size: .875rem; text-decoration: none; }
.esp-toc a:hover { text-decoration: underline; }
.esp-body { min-width: 0; max-width: 820px; }
.esp-body > section { border-top: 1px solid var(--line); padding-block: 28px 12px; margin-top: 22px; }
.esp-body > section:first-child { margin-top: 0; }
.esp-basis { color: var(--green); margin-bottom: 10px; }
.esp-body h2 { font-size: clamp(1.4rem, 2.7vw, 1.85rem); margin-bottom: 22px; }
.esp-body h3 { margin-top: 24px; margin-bottom: 10px; }
.esp-body p, .esp-body li { overflow-wrap: anywhere; }
.esp-body table { min-width: 35rem; font-size: .9375rem; }
.esp-body th[scope="row"] { background: var(--paper); min-width: 8rem; }
.esp-body th, .esp-body td { padding: 14px; }
.esp-body caption { text-align: left; font-weight: 700; margin-bottom: 10px; }
.esp-body .table-hint { display: block; font-size: .875rem; color: var(--muted); }
.esp-callout { margin-block: 24px; padding: 22px; border-left: 3px solid var(--green); background: var(--mist); }
.esp-callout > :last-child { margin-bottom: 0; }
.esp-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-block: 24px; }
.esp-project { border: 1px solid var(--line); border-top: 3px solid var(--green); padding: 20px; min-width: 0; }
.esp-project h3 { margin-top: 0; font-size: 1.125rem; }
.esp-project p { margin-bottom: 12px; }
.esp-project p:last-child { margin-bottom: 0; font-size: .875rem; color: var(--muted); }
.esp-project .esp-tag { color: var(--green); font-size: .875rem; font-weight: 650; display: block; margin-bottom: 8px; }
.esp-diagram { margin: 28px 0; }
.esp-diagram img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.esp-diagram figcaption { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.esp-next ul, .esp-sources { list-style: none; padding: 0; }
.esp-next li { border-bottom: 1px solid var(--line); padding-block: 16px; }
.esp-next a { font-weight: 650; }
.esp-next li p { margin: 6px 0 0; }
.esp-sources { margin-top: 24px; font-size: .875rem; }
.esp-sources li { padding-block: 8px; }
.esp-sources p { margin-top: 5px; color: var(--muted); }
.esp-steps { padding: 0; list-style: none; counter-reset: esp-step; }
.esp-steps > li { counter-increment: esp-step; border: 1px solid var(--line); padding: 22px; margin-bottom: 16px; }
.esp-steps > li::before { content: "STEP " counter(esp-step); color: var(--green); font-size: .875rem; font-weight: 700; }
.esp-steps h3 { margin-top: 8px; }
@media(max-width:1000px) { .esp-layout { grid-template-columns: minmax(0,1fr); gap: 16px; } .esp-toc { grid-column: 1; position: static; } .esp-toc ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; } }
@media(max-width:640px) { .esp-hero { padding-top: 28px; } .esp-hero .lead { font-size: 1.0625rem; } .esp-answer { padding: 20px; } .esp-toc ol,.esp-projects { grid-template-columns: 1fr; } .esp-project { padding: 18px; } .esp-layout { padding-bottom: 44px; } .esp-callout { padding: 18px; } .esp-body th,.esp-body td { padding: 12px; } }

.esp-toc-mobile { display: none; }
@media(max-width:1000px) { .esp-toc-desktop { display: none; } .esp-toc-mobile { display: block; } .esp-toc-mobile summary { cursor: pointer; font-weight: 700; padding: 10px 0; } }
@media(max-width:400px) { .esp-diagram { margin-inline: -24px; } .esp-diagram figcaption { margin-inline: 24px; } }

@media(max-width:380px) { .esp-diagram { margin-inline: -18px; } .esp-diagram figcaption { margin-inline: 18px; } }

@media(max-width:640px) { .esp-body .tablewrap::before { content: "表は横にスクロールできます"; display: block; font-size: .875rem; color: var(--muted); margin-bottom: 8px; } }