/* 페이지 51~55 전용 (제어·시험 계열). 색은 전역 변수만 사용 */
.p5-bc { font-size: .85rem; color: var(--text-dim); padding: 14px 0 0; }
.p5-bc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.p5-bc li:not(:last-child)::after { content: ">"; margin-left: 6px; color: var(--text-dim); }
.p5-bc a { text-decoration: none; }
.p5-bc a:hover { color: var(--red); }

.p5-svg { max-width: 440px; margin: 28px auto; }
.p5-svg svg { width: 100%; height: auto; display: block; }
.p5-svg--wide { max-width: 760px; }
.p5-box { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.p5-box--hot { fill: var(--ink); stroke: var(--red); }
.p5-t { fill: var(--ink); font: 700 16px var(--sans); }
.p5-t--w { fill: var(--white); }
.p5-s { fill: var(--text-dim); font: 13px var(--sans); }
.p5-s--w { fill: var(--paper-dim); }
.p5-arrow { stroke: var(--red); stroke-width: 2.5; fill: none; }
.p5-head { fill: var(--red); }
.p5-svg figcaption { text-align: center; font-size: .82rem; color: var(--text-dim); margin-top: 8px; }

.p5-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 22px 26px; margin: 36px 0; }
.p5-cta p { margin: 0; flex: 1 1 260px; }
.p5-cta .btn { flex: 0 0 auto; }

.p5-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.p5-card { background: var(--white); border: 1px solid var(--paper-dim); border-top: 3px solid var(--red); border-radius: var(--radius); padding: 18px; }
.p5-card h3 { font-size: 1.02rem; margin: 0 0 8px; }
.p5-card p { margin: 0; font-size: .9rem; color: var(--steel); }

.p5-def { margin: 20px 0 0; }
.p5-def dt { font-weight: 700; margin-top: 16px; padding-left: 12px; border-left: 3px solid var(--red); }
.p5-def dd { margin: 4px 0 0 15px; color: var(--steel); }

.p5-tl { list-style: none; margin: 28px 0 0; padding: 0 0 0 28px; border-left: 3px solid var(--red); }
.p5-tl li { position: relative; margin-bottom: 22px; padding-left: 8px; }
.p5-tl li::before { content: ""; position: absolute; left: -38px; top: 6px; width: 13px; height: 13px; background: var(--paper); border: 3px solid var(--red); border-radius: 50%; }
.p5-tl strong { display: block; }
.p5-tl span { color: var(--steel); font-size: .94rem; }

.p5-hsteps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 28px 0 0; padding: 0; counter-reset: s; }
.p5-hsteps li { position: relative; background: var(--ink-soft); color: var(--paper); border-radius: var(--radius); padding: 16px 12px; counter-increment: s; font-size: .88rem; }
.p5-hsteps li::before { content: "0" counter(s); display: block; font-family: var(--mono); color: var(--red); font-weight: 700; margin-bottom: 6px; }
.p5-hsteps b { display: block; font-size: 1rem; margin-bottom: 4px; color: var(--white); }

.p5-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.p5-two .prose-photo img { aspect-ratio: 4/3; }

@media (max-width: 860px) {
    .p5-grid { grid-template-columns: 1fr 1fr; }
    .p5-hsteps { grid-template-columns: 1fr; }
    .p5-hsteps li { display: flex; gap: 12px; align-items: baseline; }
    .p5-hsteps li::before { margin: 0; }
    .p5-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .p5-grid { grid-template-columns: 1fr; }
    .p5-cta { padding: 18px; }
    .p5-table, .p5-table tbody, .p5-table tr, .p5-table td { display: block; width: 100%; }
    .p5-table { overflow: visible; }
    .p5-table thead { display: none; }
    .p5-table tr { border: 1px solid var(--paper-dim); border-radius: var(--radius); margin-bottom: 12px; background: var(--white); }
    .p5-table td { border: 0; border-bottom: 1px solid var(--paper-dim); padding: 10px 12px; }
    .p5-table td:last-child { border-bottom: 0; }
    .p5-table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; color: var(--red); margin-bottom: 2px; }
}