/* 엘리오 코딩 워크북(초4) 공통 스타일 — book-kid-proof에서 추출 */
:root {
        --kid-ink: #18304f;
        --kid-muted: #51647d;
        --kid-blue: #30a9ff;
        --kid-teal: #25c8b7;
        --kid-yellow: #ffd857;
        --kid-coral: #ff726f;
        --kid-lime: #a8df65;
        --kid-cream: #fff9e7;
        --kid-pink: #ffe8ef;
        --kid-line: #cfe6f4;
        --kid-shadow: 0 16px 34px rgba(40, 90, 130, 0.14);
        --kid-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
        --kid-hand: "Nanum Pen Script", "Comic Sans MS", "Apple SD Gothic Neo", cursive;
      }

      body.course-page.kidbook {
        min-width: 320px;
        background:
          radial-gradient(circle at 8% 6%, rgba(255, 216, 87, 0.36), transparent 23rem),
          radial-gradient(circle at 92% 8%, rgba(37, 200, 183, 0.28), transparent 20rem),
          linear-gradient(180deg, #f1fbff 0%, #fffef8 44%, #f5fbff 100%);
        color: var(--kid-ink);
        font-family: var(--kid-font);
        font-size: 17px;
      }

      .kidbook .course-topbar {
        border-bottom: 2px solid rgba(207, 230, 244, 0.86);
        background: rgba(255, 255, 255, 0.92);
      }

      .kidbook .brand-spark {
        background: linear-gradient(135deg, var(--kid-blue), var(--kid-teal));
      }

      .kidbook .back-link {
        border-color: var(--kid-line);
        color: #17628c;
      }

      .kid-shell {
        width: min(100% - 32px, 1080px);
        margin: 0 auto;
      }

      .kid-hero {
        padding: 42px 0 26px;
      }

      .kid-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.72fr);
        gap: 30px;
        align-items: center;
      }

      .kid-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        margin: 0 0 14px;
        border: 2px solid #bdebf3;
        border-radius: 999px;
        background: #ffffff;
        color: #18788a;
        padding: 7px 14px;
        font-size: 15px;
        font-weight: 900;
      }

      .kid-hero h1 {
        margin: 0;
        color: var(--kid-ink);
        font-size: clamp(36px, 7vw, 68px);
        line-height: 1.04;
        letter-spacing: 0;
      }

      .kid-lead {
        max-width: 650px;
        margin: 18px 0 0;
        color: var(--kid-muted);
        font-size: clamp(18px, 2.2vw, 22px);
        font-weight: 800;
        line-height: 1.55;
      }

      .mission-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        max-width: 680px;
        margin-top: 22px;
        border: 3px solid #ffe08a;
        border-radius: 24px;
        background: #fff7cd;
        padding: 18px 20px;
        box-shadow: var(--kid-shadow);
      }

      .mission-icon {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: #fff;
        font-size: 31px;
      }

      .mission-card h2 {
        margin: 0 0 3px;
        font-size: 18px;
        line-height: 1.2;
      }

      .mission-card p {
        margin: 0;
        color: #593f05;
        font-size: 20px;
        font-weight: 900;
        line-height: 1.35;
      }

      .mascot-wrap {
        position: relative;
        min-height: 320px;
      }

      .mascot-wrap img {
        display: block;
        width: min(100%, 320px);
        margin: 0 auto;
        filter: drop-shadow(0 20px 22px rgba(43, 107, 150, 0.16));
      }

      .speech {
        position: absolute;
        right: 0;
        bottom: 18px;
        max-width: 240px;
        border: 3px solid #9be0f3;
        border-radius: 22px;
        background: #fff;
        padding: 14px 16px;
        color: #1c516b;
        font-family: var(--kid-hand);
        font-size: 21px;
        font-weight: 900;
        line-height: 1.25;
        box-shadow: var(--kid-shadow);
      }

      .speech::before {
        content: "";
        position: absolute;
        left: 28px;
        bottom: -17px;
        width: 24px;
        height: 24px;
        border-right: 3px solid #9be0f3;
        border-bottom: 3px solid #9be0f3;
        background: #fff;
        transform: rotate(45deg);
      }

      .kid-section {
        padding: 24px 0;
      }

      .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px;
        color: var(--kid-ink);
        font-size: clamp(25px, 4vw, 36px);
        line-height: 1.15;
        letter-spacing: 0;
      }

      .section-title span {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: #fff;
        box-shadow: inset 0 0 0 3px var(--kid-line);
        font-size: 28px;
      }

      .make-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
        gap: 26px;
        align-items: center;
      }

      .goal-figure,
      .diagram-figure {
        margin: 0;
        overflow: hidden;
        border: 3px solid #d6eff8;
        border-radius: 26px;
        background: #fff;
        box-shadow: var(--kid-shadow);
      }

      .goal-figure img,
      .diagram-figure img {
        display: block;
        width: 100%;
        height: auto;
      }

      .goal-figure figcaption,
      .diagram-figure figcaption {
        border-top: 2px dashed #d6eff8;
        padding: 13px 16px 16px;
        color: var(--kid-muted);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.45;
      }

      .note-panel {
        border: 3px solid #b9efe8;
        border-radius: 26px;
        background: #ecfffb;
        padding: 22px;
      }

      .note-panel p {
        margin: 0 0 12px;
        color: #185a62;
        font-size: 19px;
        font-weight: 800;
        line-height: 1.58;
      }

      .note-panel p:last-child {
        margin-bottom: 0;
      }

      .parts-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .part-item {
        min-height: 150px;
        border: 3px solid #e4edfa;
        border-radius: 24px;
        background: #fff;
        padding: 18px 12px;
        text-align: center;
        box-shadow: 0 10px 22px rgba(28, 70, 110, 0.08);
      }

      .part-icon {
        display: grid;
        place-items: center;
        width: 62px;
        height: 62px;
        margin: 0 auto 10px;
        border-radius: 21px;
        background: #f0f8ff;
        font-size: 34px;
      }

      .part-item strong {
        display: block;
        font-size: 18px;
        line-height: 1.25;
      }

      .part-item small {
        display: block;
        margin-top: 6px;
        color: var(--kid-muted);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
      }

      .steps-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 24px;
        align-items: start;
      }

      .step-list {
        display: grid;
        gap: 13px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .step-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        border: 3px solid #e9defc;
        border-radius: 22px;
        background: #fff;
        padding: 16px;
      }

      .step-num {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 16px;
        background: #f4edff;
        color: #7041aa;
        font-size: 22px;
        font-weight: 1000;
      }

      .step-card h3 {
        margin: 0 0 5px;
        font-size: 19px;
        line-height: 1.25;
      }

      .step-card p {
        margin: 0;
        color: var(--kid-muted);
        font-size: 17px;
        font-weight: 750;
        line-height: 1.5;
      }

      .wire-notes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 12px;
      }

      .wire-note {
        border-radius: 18px;
        background: #fff;
        padding: 12px 14px;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.35;
      }

      .wire-note.red {
        border: 3px solid #ffaaa8;
      }

      .wire-note.black {
        border: 3px solid #8b98a8;
      }

      .code-band {
        border-top: 5px solid #bee8ff;
        border-bottom: 5px solid #bee8ff;
        background:
          linear-gradient(90deg, rgba(255, 216, 87, 0.22), transparent 24%),
          linear-gradient(270deg, rgba(48, 169, 255, 0.18), transparent 24%),
          #ffffff;
        padding: 32px 0;
      }

      .code-intro {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }

      .code-intro p {
        max-width: 680px;
        margin: 0;
        color: var(--kid-muted);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.5;
      }

      .code-box-kid {
        overflow-x: auto;
        border: 3px solid #cce4ff;
        border-radius: 26px;
        background: #f8fcff;
        padding: 20px;
        box-shadow: var(--kid-shadow);
      }

      .code-box-kid .sb-obj-name {
        margin: 0 0 12px;
        color: #476782;
        font-size: 16px;
        font-weight: 1000;
      }

      .code-box-kid .sb-scripts {
        display: grid;
        gap: 18px;
      }

      .code-box-kid .block-answer {
        min-width: min-content;
      }

      .challenge-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 22px;
        align-items: center;
        border: 3px solid #ffc8d5;
        border-radius: 26px;
        background: #fff4f7;
        padding: 22px;
      }

      .challenge-grid p {
        margin: 0;
        color: #713142;
        font-size: 19px;
        font-weight: 850;
        line-height: 1.55;
      }

      .mini-mascot {
        width: 132px;
        max-width: 28vw;
        filter: drop-shadow(0 12px 16px rgba(80, 60, 100, 0.13));
      }

      .cheer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 18px;
        align-items: center;
        margin: 34px 0 56px;
        border: 4px solid #ffd777;
        border-radius: 30px;
        background: #fff8dd;
        padding: 24px;
      }

      .cheer p {
        margin: 0;
        color: #684b05;
        font-family: var(--kid-hand);
        font-size: clamp(25px, 4vw, 38px);
        font-weight: 1000;
        line-height: 1.2;
      }

      @media (max-width: 900px) {
        .kid-hero-grid,
        .make-grid,
        .steps-grid {
          grid-template-columns: 1fr;
        }

        .mascot-wrap {
          min-height: 260px;
        }

        .speech {
          right: 8px;
          bottom: 4px;
        }

        .parts-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 560px) {
        body.course-page.kidbook {
          font-size: 17px;
        }

        .kid-shell {
          width: min(100% - 22px, 1080px);
        }

        .course-nav {
          width: min(100% - 22px, var(--course-width));
        }

        .mission-card,
        .cheer {
          grid-template-columns: 1fr;
        }

        .parts-list,
        .wire-notes,
        .challenge-grid {
          grid-template-columns: 1fr;
        }

        .section-title {
          align-items: flex-start;
        }

        .code-box-kid {
          padding: 14px;
        }
      }

      @media print {
        .course-topbar {
          position: static;
        }

        .kidbook {
          background: #fff;
        }

        .kid-section,
        .code-band {
          break-inside: avoid;
        }
      }

/* --- 멀티레슨(책 전체) 레이아웃 추가 --- */
.kid-lesson{padding:38px 0 8px;border-top:4px dashed #d9eef9}
.kid-lesson:first-of-type{border-top:none}
.lesson-h1{margin:6px 0 0;font-size:clamp(28px,5vw,46px);line-height:1.07;color:var(--kid-ink);letter-spacing:0}
.kid-toc{width:min(100% - 32px,1080px);margin:0 auto 8px;border:3px solid var(--kid-line);border-radius:24px;background:#fff;padding:20px 24px;box-shadow:var(--kid-shadow)}
.kid-toc h2{margin:0 0 12px;font-size:20px;color:var(--kid-ink)}
.kid-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 20px}
.kid-toc a{color:#1667a8;text-decoration:none;font-weight:800;font-size:16px}
.kid-toc a:hover{color:var(--kid-teal)}
.kid-toc .tn{color:#8aa0b4;font-size:13px;font-weight:700}
.kid-lesson.concept .code-band,.kid-lesson.concept .parts-list,.kid-lesson.concept .steps-grid{display:none}
.lesson-badge2{display:inline-flex;align-items:center;gap:8px;min-height:34px;margin:0 0 6px;border:2px solid #bdebf3;border-radius:999px;background:#fff;color:#18788a;padding:5px 13px;font-size:14px;font-weight:900}
.code-note{margin:10px 0 0;color:var(--kid-muted);font-size:14px;font-weight:700}

/* --- 큰 코드 접이식(초4 코드 벽 방지) --- */
.kid-code-collapse{border:3px solid #cce4ff;border-radius:26px;background:#f8fcff;box-shadow:var(--kid-shadow);overflow:hidden}
.kid-code-collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:20px 22px;background:linear-gradient(180deg,#fff,#eef6ff)}
.kid-code-collapse>summary::-webkit-details-marker{display:none}
.kid-code-collapse .cc-emoji{font-size:30px;flex:none}
.kid-code-collapse .cc-txt{flex:1;font-size:19px;font-weight:900;color:#1c5a86;line-height:1.35}
.kid-code-collapse .cc-txt b{color:#e0642f}
.kid-code-collapse .cc-arrow{font-size:22px;color:#5aa0d6;transition:transform .15s}
.kid-code-collapse[open] .cc-arrow{transform:rotate(180deg)}
.kid-code-collapse .code-intro-p{margin:0;padding:0 22px 8px;color:var(--kid-muted);font-size:17px;font-weight:800;line-height:1.5}
.kid-code-collapse .code-box-kid{margin:8px 20px;border:none;box-shadow:none;background:#f8fcff}
.kid-code-collapse .code-note{padding:0 22px 18px;margin:0}