/* ================================================================
   3일차 장면: 거꾸로 발명 (두 가지 길 · 포스트잇 · 조합 메뉴판 · 합치기 · 도전 카드 · 기록지 · 쓸모 · 발표)
   모든 규칙은 장면 클래스(.x-*) 아래로만 건다
   ================================================================ */
.title small.lvl{font-size:.42em;font-weight:900;color:var(--purple);margin-left:.4em;vertical-align:.35em;white-space:nowrap}
.pt{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 .3em;border-radius:99px;font-style:normal;font-weight:900;font-size:.7em;color:#fff}
.pt-d{background:#1F4FD8}.pt-a{background:#E8452C}.pt-i{background:#5F6470}

/* 표지: 오른쪽 쓸모 그림은 신호가 닿으면 통통 */
.circuit.uses .use image{transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .35s}
.circuit.uses.out-on .use image{transform:scale(1.12) rotate(-3deg)}

/* 발명의 두 가지 길 */
.x-two .tw{display:flex;flex-direction:column;gap:40px;margin-top:50px}
.x-two .tw-row{position:relative;display:flex;align-items:center;gap:18px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--ink);padding:26px 30px}
.x-two .tw-row.rev{border-color:var(--coral);box-shadow:7px 7px 0 var(--coral)}
.x-two .tw-tag{flex:none;width:200px;font-size:38px;font-weight:900;color:var(--ink)}
.x-two .rev .tw-tag{color:var(--coral)}
.x-two .tw-n{flex:1;font-size:34px;font-weight:900;line-height:1.3;background:var(--cream);border-radius:10px;padding:16px 18px;text-align:center}
.x-two .tw-row i{font-style:normal;font-size:40px;font-weight:900;color:var(--coral)}
.x-two .tw-u{position:absolute;right:-30px;top:-80px;width:130px;mix-blend-mode:multiply;transform:rotate(12deg)}
.x-two .foot{margin-top:40px;font-size:36px}

/* 포스트잇 이야기: 네 칸 시간 순서 + 오른쪽 그림 */
.x-story{display:block}
.x-story .st4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;width:1300px}
.x-story .st4 li{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:20px 22px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;gap:10px}
.x-story .st4 b{width:52px;height:52px;border-radius:50%;background:var(--hl,#FFD43B);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:28px}
.x-story .st4 h3{font-size:34px;font-weight:900;line-height:1.25}
.x-story .st4 p{font-size:26px;line-height:1.5;color:#33303a}
.x-story .st4 li:last-child{background:#fff7c9}
.x-story .st-pic{position:absolute;right:110px;top:250px;width:300px;mix-blend-mode:multiply;transform:rotate(-6deg)}

/* 조합 메뉴판 */
.x-menu .mn{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;margin-top:30px}
.x-menu .mn-col{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--ink);padding:18px 22px 22px}
.x-menu .mn-col h3{font-size:40px;font-weight:900;color:var(--coral);margin-bottom:12px}
.x-menu .mn-col.out h3{color:var(--purple)}
.x-menu .mn-col h3 small{font-size:24px;color:var(--mute);margin-left:10px}
.x-menu .mn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.x-menu .out .mn-grid{grid-template-columns:repeat(3,1fr)}
.mchip{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--cream);border-radius:10px;padding:10px 8px 12px;text-align:center}
.mchip img{width:110px;height:110px;object-fit:contain;background:#fff;border-radius:8px}
.mchip b{font-size:22px;font-weight:900;line-height:1.2}
.mchip .pt{position:absolute;right:6px;top:6px;font-size:18px}
.x-menu .mn-rule{margin-top:26px;font-size:32px;font-weight:900;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.x-menu .mn-rule .pt{font-size:26px}

/* 센서 두 개를 합치는 방법 */
.x-and .ao{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:34px}
.x-and .ao-c{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--ink);padding:22px 26px;display:flex;flex-direction:column;gap:18px}
.x-and .ao-c h3{font-size:36px;font-weight:900;display:flex;align-items:center;gap:14px}
.x-and .ao-c h3 .tg{font-size:26px}
.x-and .ezprog{font-size:30px}
.x-and .cblk.if{background:#3c8de7}
.x-and .amp{display:inline-block;background:#fff;color:#3c8de7;border-radius:6px;padding:0 .3em;margin:0 .15em}
.x-and .ex{font-size:28px;line-height:1.45;color:#33303a;font-weight:700}

/* 도전 카드 */
.x-cards .cds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.x-cards .cd{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:16px 20px 18px;display:flex;flex-direction:column;gap:8px}
.x-cards .cd.lv3{border-color:var(--purple);box-shadow:6px 6px 0 var(--purple)}
.x-cards .cd-pics{display:flex;align-items:center;gap:10px;min-height:110px}
.x-cards .cd-pics > b{font-size:36px;color:var(--coral);font-weight:900}
.x-cards .cd-in,.x-cards .cd-out{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.x-cards .cd-pics img{width:84px;height:84px;object-fit:contain;background:var(--cream);border-radius:8px}
.x-cards .cd-pics small{display:none}
.x-cards .cd-pics i{font-style:normal;font-weight:900;font-size:26px;color:var(--mute)}
.x-cards .cd h3{font-size:34px;font-weight:900}
.x-cards .cd p{font-size:25px;line-height:1.45;color:#33303a}

/* 기록지 쓰는 방법 */
.x-loghow .lh{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:40px;align-items:center}
.x-loghow .lh-steps{display:flex;flex-direction:column;gap:20px}
.x-loghow .lh-steps li{display:flex;gap:18px;align-items:center;font-size:36px;font-weight:900;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:16px 22px;box-shadow:5px 5px 0 var(--ink)}
.x-loghow .lh-steps b{flex:none;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px}
.x-loghow .lh-steps em{font-style:normal;color:var(--coral)}
.x-loghow .lh-go{display:flex;flex-direction:column;align-items:center;gap:16px;background:#fff;border:3px dashed var(--ink);border-radius:16px;padding:28px}
.x-loghow .lh-go .play{font-size:34px}
.x-loghow .lh-url{font-size:24px;color:var(--mute);text-align:center}
.x-loghow .lh-url b{color:var(--ink)}
.x-loghow .lh-qr{width:230px;height:230px;background:#fff}

/* 실험 시간 */
.x-prac .pr{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin-top:40px}
.x-prac .pr-check{display:flex;flex-direction:column;gap:18px}
.x-prac .pr-check li{display:flex;gap:16px;align-items:center;font-size:36px;font-weight:900;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:18px 22px}
.x-prac .pr-check i{flex:none;width:40px;height:40px;border:4px solid var(--ink);border-radius:8px;position:relative}
.x-prac .pr-check li.on i::after{content:"✓";position:absolute;left:4px;top:-14px;font-size:44px;color:var(--purple);font-style:normal}
.x-prac .pr-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--ink);color:#fff;border-radius:16px;padding:30px}
.x-prac .pr-t{font-size:60px;font-weight:900}
.x-prac .pr-t b{color:var(--hl,#FFD43B)}
.x-prac .pr-k{font-size:30px}
.x-prac kbd{display:inline-block;border:2px solid #fff;border-bottom-width:5px;border-radius:8px;padding:0 10px;font:900 28px var(--ff)}
.x-prac .play.ghost{background:#fff;color:var(--ink);font-size:30px}

/* 고르기 세 칸 */
.x-pick .pk3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.x-pick .pk3 li{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:28px;display:flex;flex-direction:column;gap:14px;min-height:320px}
.x-pick .pk3 b{width:64px;height:64px;border-radius:50%;background:var(--hl,#FFD43B);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:34px}
.x-pick .pk3 h3{font-size:42px;font-weight:900}
.x-pick .pk3 p{font-size:30px;line-height:1.5;color:#33303a}

/* 쓸모를 찾는 방법: 다섯 칸 */
.x-use .us5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.x-use .us-c{position:relative;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:18px 18px 16px;min-height:420px;display:flex;flex-direction:column;gap:12px}
.x-use .us-c:not(:last-child)::after{content:"→";position:absolute;right:-20px;top:46%;font-size:34px;font-weight:900;color:var(--coral);z-index:2;background:var(--cream);line-height:1}
.x-use .us-c b{font-family:var(--hand,var(--ff));font-size:28px;color:var(--purple)}
.x-use .us-c p{font-size:29px;font-weight:900;line-height:1.4}
.x-use .us-c img{margin-top:auto;width:100%;max-height:150px;object-fit:contain;mix-blend-mode:multiply}
.x-use .us-c.hl{background:#fff7c9;box-shadow:6px 6px 0 var(--ink)}

/* 장소 다섯 칸 */
.x-places .pl5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.x-places .pl5 li{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);padding:18px;text-align:center}
.x-places .pl5 img{width:100%;height:200px;object-fit:contain;mix-blend-mode:multiply}
.x-places .pl5 h3{font-size:40px;font-weight:900;margin-top:6px}
.x-places .pl5 p{font-size:26px;color:var(--mute);margin-top:4px}
.x-places .foot{margin-top:34px;font-size:34px}

/* 발표 */
.x-present .frame{margin-top:40px;font-size:46px;line-height:1.7;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:26px 34px;box-shadow:7px 7px 0 var(--ink)}
.x-present .pr3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.x-present .pr3 li{display:flex;gap:16px;align-items:center;font-size:34px;font-weight:900;background:var(--cream);border-radius:12px;padding:18px 20px}
.x-present .pr3 b{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}

/* 읽기 모드(휴대폰·좁은 창) */
body[data-mode="read"] .x-two .tw-row{flex-wrap:wrap}
body[data-mode="read"] .x-two .tw-tag{width:100%}
body[data-mode="read"] .x-two .tw-n{font-size:18px;flex:1 1 30%}
@media (max-width:820px){
  .x-story .st4,.x-menu .mn,.x-and .ao,.x-cards .cds,.x-loghow .lh,.x-prac .pr,.x-pick .pk3,.x-use .us5,.x-places .pl5,.x-present .pr3{grid-template-columns:1fr!important;width:auto}
  .x-menu .mn-grid,.x-menu .out .mn-grid{grid-template-columns:repeat(2,1fr)}
  .x-story .st-pic,.x-two .tw-u{display:none}
  .x-use .us-c{min-height:0}.x-use .us-c:not(:last-child)::after{display:none}
}
/* 빈 화면 점검에서 걸린 장 키우기 */
body[data-mode="present"] .x-two .tw-row{padding:40px 34px}
body[data-mode="present"] .x-two .tw-n{font-size:38px;padding:26px 20px}
body[data-mode="present"] .x-pick .pk3 li{min-height:470px}
body[data-mode="present"] .x-pick .pk3 h3{font-size:48px}
body[data-mode="present"] .x-pick .pk3 p{font-size:34px}
body[data-mode="present"] .x-cards .cd-pics img{width:116px;height:116px}
body[data-mode="present"] .x-cards .cd-pics{min-height:124px}
body[data-mode="present"] .x-and .ezprog{font-size:36px}
/* 부품 그림(SVG)으로 바꾼 뒤: 카드 칸이 그림 때문에 넓어지지 않게 */
.x-cards .cds{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-cards .cd-pics{min-width:0}
.x-cards .cd-pics > span{display:flex;align-items:center;gap:6px;min-width:0}
body[data-mode="present"] .x-cards .cd-pics img{width:auto;max-width:116px;flex:1 1 0;min-width:0}