/*
 * ch2-3 디자인 원칙 — ch2-2의 최종 공통 규칙에서 추출
 *
 * 1. 페이지 제목(h1): 82px, 파란색. 한 슬라이드의 최상위 개념만 쓴다.
 * 2. 제목 밑 설명(.subtitle): 36px, 회청색. 핵심어만 파란색 strong으로 강조한다.
 * 3. 각 칸 제목(h2): 기본 64px, 4열처럼 좁은 칸은 48px. 해당 tone 색으로 번호와 같은 행에 둔다.
 * 4. 각 칸 본문: 36px, 회청색. 문장 전체가 아닌 핵심 용어만 tone 색으로 강조한다.
 * 5. 보조 설명·캡션: 27~32px. 제목/본문보다 작되 수업 화면에서 읽히는 크기를 유지한다.
 * 6. 칸의 색: blue → orange → green 순으로 구분하고, 10px 상단선과 제목에 같은 tone을 쓴다.
 * 7. 번호: 54px 원형 배지를 제목 바로 앞에 둔다. 우측 상단 absolute 배치는 사용하지 않는다.
 * 8. 바깥 칸: 흰색 배경, 2px 테두리, 8px 모서리. 슬라이드 배경과 명확히 분리한다.
 * 9. 칸 안의 자료·예시 영역: 해당 tone의 soft 배경. 그 안의 실제 그림·값은 흰색으로 분리한다.
 * 10. 같은 단계의 칸은 같은 너비·간격·내부 여백을 사용하며, 정보 위계보다 장식을 앞세우지 않는다.
 */
.comparison-figure { flex: 1; min-height: 0; display: grid; place-items: start center; }
.comparison-figure img { display: block; max-width: 100%; max-height: 710px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(36, 58, 96, .12); }
.textbook-example { height: 400px; margin: 18px 0 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 6px 8px; border-radius: 8px; background: var(--tone-soft); }
.textbook-example img { display: block; width: 100%; height: 100%; object-fit: contain; }
.textbook-example figcaption { color: var(--tone-dark); font-size: 30px; line-height: 1.15; text-align: center; }
.two-column { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.panel { position: relative; min-width: 0; min-height: 0; padding: 22px; border: 2px solid var(--line); border-top: 10px solid var(--tone); border-radius: 8px; background: var(--paper); }
.panel > p { color: var(--muted); font-size: 36px; line-height: 1.2; }
.panel > p strong { color: var(--tone-dark); }
.definition-strip, .role-row { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 34px; padding: 20px 30px; border-radius: 18px; background: var(--blue-soft); color: var(--ink); font-size: 34px; }
.definition-strip strong { color: var(--blue); font-size: 40px; }
.concept-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.perceptron-detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(440px, .8fr); gap: 22px; }
.perceptron-figure { min-height: 0; display: grid; place-items: center; }
.perceptron-figure img { display: block; width: 100%; max-height: 440px; object-fit: contain; object-position: center; }
.variable-list { display: grid; gap: 12px; }
.variable-list section { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 8px; background: var(--blue-soft); }
.variable-list section > b { color: var(--blue); font-size: 40px; text-align: center; }
.variable-list p { color: var(--muted); font-size: 30px; line-height: 1.25; }
.variable-list strong { color: var(--blue); }
.card-diagram { height: 360px; margin: 10px 0; padding: 2px; border-radius: 8px; background: var(--tone-soft); }
.card-diagram img { display: block; width: 100%; height: 100%; object-fit: contain; }
.network-cards .panel > p { text-align: center; }
.role-row { justify-content: space-around; background: #fff; border: 1px solid var(--line); font-size: 30px; }
.role-row b { color: var(--blue); }
.deep-learning-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.deep-network-figure { min-height: 0; display: grid; place-items: center; padding: 12px; border-radius: 8px; background: var(--blue-soft); }
.deep-network-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.definition-cards { display: grid; gap: 24px; }
.application-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.application-grid .section-heading { margin-bottom: 10px; }
.application-grid p { margin: 10px 0 18px; }
.application-grid article div { display: flex; flex-wrap: wrap; gap: 12px; }
.application-grid article div b { padding: 10px 16px; border-radius: 999px; background: var(--tone-soft); color: var(--tone-dark); font-size: 30px; }