/* 컴퓨팅 사고력 20: 기존 SP2 셸을 보존하고 게임 안쪽만 확장한다. */
.sp-stage:has(.ct20){overflow:auto;overscroll-behavior:contain;display:block;padding:12px;}
.ct20{--ct-main:#48651a;--ct-teal:#076e61;--ct-line:#c3d3dd;max-width:1120px;margin:auto;color:#26332f;font:500 16px/1.55 var(--sp-font-body);}
.ct20 *{box-sizing:border-box;}
.ct20 button,.ct20 a.ct20-btn{min-width:48px;min-height:48px;border:2px solid var(--ct-line);border-radius:14px;background:#fff;color:#26332f;padding:10px 12px;font:700 16px/1.35 var(--sp-font-body);cursor:pointer;touch-action:manipulation;white-space:pre-line;}
.ct20 button:hover:not(:disabled){border-color:var(--ct-main);background:#f3f7e8;}
.ct20 button:active:not(:disabled){transform:translateY(1px);}
.ct20 button:focus-visible,.ct20 input:focus-visible{outline:3px solid #48651a;outline-offset:3px;}
.ct20 button:disabled{color:#6a747a;background:#eef1f2;cursor:default;}
.ct20 button[aria-pressed=true]{background:#eaf2d9;border-color:var(--ct-main);color:#3b5514;box-shadow:inset 0 0 0 1px var(--ct-main);}
.ct20 button.ct20-primary{background:var(--ct-main);border-color:var(--ct-main);color:white;}
.ct20 button.ct20-primary:hover{background:#3b5514;color:white;}
.ct20-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;}
.ct20-pill{display:inline-block;background:#e5f3ef;color:#076052;border-radius:12px;padding:7px 12px;font-weight:800;}
.ct20-link{color:#48651a;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:48px;padding:8px;}
.ct20-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:16px;}
.ct20-panel{min-width:0;background:white;border:2px solid #d7e2dd;border-radius:22px;padding:18px;box-shadow:0 5px 0 #dce6df;}
.ct20 h2,.ct20 h3{font-family:var(--sp-font-display);font-weight:400;line-height:1.35;margin:0 0 10px;}
.ct20 h2{font-size:clamp(24px,4vw,32px);}.ct20 h3{font-size:22px;}
.ct20 p{margin:8px 0;overflow-wrap:anywhere;}.ct20 strong{font-weight:800;}
.ct20-goal{padding:12px;background:#f0f5df;border-radius:14px;color:#3b5514;margin-bottom:16px;}
.ct20-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ct20-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;}
.ct20-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;}
.ct20-tiles button{min-height:76px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;}
.ct20-number{font-family:var(--sp-font-num);font-size:28px;line-height:1.25;font-weight:800;}
.ct20-small{font-size:14px;color:#4e615a;}.ct20-help{padding:12px;border-left:4px solid var(--ct-teal);background:#eaf7f2;border-radius:8px;margin-top:12px;}
.ct20-score-help summary{min-height:48px;padding:12px 0;cursor:pointer;color:#48651a;}.ct20-duel .sp-hud-score b{font-size:15px;}
.ct20-feedback{padding:12px;border:2px solid #b9d1e9;border-radius:14px;background:#f1f7ff;min-height:58px;}
.ct20-feedback.is-good{border-color:#69a991;background:#e7f5ed;color:#145839;}
.ct20-actions{position:sticky;bottom:0;z-index:3;background:#fff8e9ed;border-top:2px solid #d4dfd8;margin:18px -2px 0;padding:10px 2px max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;}
.ct20-tools{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}.ct20-tools button{font-size:14px;}
.ct20-handoff{max-width:620px;margin:16px auto;text-align:center;padding:28px;}
.ct20-handoff .ct20-number{font-size:42px;}.ct20-handoff button{width:100%;margin-top:16px;}
.ct20-svg{width:100%;max-height:430px;display:block;background:#f9fbfe;border-radius:16px;border:1px solid #c3d3dd;}
.ct20-svg text{font:700 15px var(--sp-font-body);fill:#26332f;}.ct20-svg .ct20-gridline{stroke:#d1dce7;stroke-width:1;}.ct20-svg .ct20-axis{stroke:#668198;stroke-width:2;}
.ct20-svg .ct20-shape{fill:#5c7c2b33;stroke:#48651a;stroke-width:3;stroke-linejoin:round;}
.ct20-svg .ct20-target{fill:#0d9c8a12;stroke:#076e61;stroke-width:3;stroke-dasharray:8 5;}
.ct20-svg .ct20-original{fill:#687d8c20;stroke:#687d8c;stroke-width:2;stroke-dasharray:3 4;}
.ct20-pinboard{position:relative;max-width:460px;margin:12px auto;aspect-ratio:1;}
.ct20-pinboard svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.ct20-pins{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);}
.ct20-pins button{margin:auto;min-width:48px;min-height:48px;width:48px;height:48px;padding:0;border-radius:50%;background:#fff;box-shadow:0 2px 0 #cbd8e3;}
.ct20-pinboard:before{content:'';position:absolute;inset:10%;background-image:linear-gradient(#dae3ed 1px,transparent 1px),linear-gradient(90deg,#dae3ed 1px,transparent 1px);background-size:25% 25%;}
.ct20-equation{font:800 clamp(30px,5vw,48px)/1.4 var(--sp-font-num);text-align:center;padding:24px 4px;background:#eef4ff;border-radius:16px;}
.ct20-equation mark{background:#d2e5ff;color:#3b5514;border-radius:8px;padding:0 4px;}
.ct20-dials{display:grid;grid-template-columns:1fr 1fr;gap:8px;}.ct20-dials svg{width:100%;}.ct20-dials text{font:800 16px var(--sp-font-num);fill:#26332f;}
.ct20-card-red{border-bottom:5px solid #b63039!important;}.ct20-card-blue{border-bottom:5px solid #48651a!important;}
.ct20-zones button{min-height:88px;}.ct20-sorted{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}.ct20-sorted span{padding:8px 10px;border:1px solid #c3d3dd;border-radius:10px;}.ct20-sorted .middle{background:#d3eee6;border:2px solid #076e61;}
.ct20-code{font:800 clamp(28px,5vw,44px)/1.4 var(--sp-font-num);letter-spacing:4px;padding:16px;background:#edf5ff;text-align:center;border-radius:14px;overflow-wrap:anywhere;}
.ct20-candidates{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:12px 0;}.ct20-candidates span{padding:8px 0;text-align:center;background:#eaf2d9;border:1px solid #b9cde5;border-radius:8px;font-weight:800;}.ct20-candidates .gone{background:#f1f2f3;color:#747e83;text-decoration:line-through;}
.ct20 input[type=range]{width:100%;min-height:48px;accent-color:#48651a;touch-action:pan-x;}
.ct20-trail{padding-left:20px;max-height:190px;overflow:auto;}.ct20-trail li{margin:6px 0;}
.ct20-privacy{font:500 14px/1.6 var(--sp-font-body);color:#52645c;margin:10px 0;}
.ct20-hub{height:auto;min-height:100dvh;overflow:auto;padding:24px 16px;background:var(--sp-bg);}
.ct20-hub main{max-width:1160px;margin:auto;}.ct20-hub header{margin-bottom:24px;}.ct20-hub h1{font:400 clamp(32px,6vw,54px)/1.3 var(--sp-font-display);margin:8px 0;}.ct20-hub p{line-height:1.7;}
.ct20-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}.ct20-hub-card{display:flex;flex-direction:column;background:#fff;border:2px solid #d7e2dd;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #dce6df;}.ct20-hub-card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;}.ct20-hub-card section{padding:16px;flex:1;display:flex;flex-direction:column;}.ct20-hub-card h2{font:400 26px/1.3 var(--sp-font-display);margin:0;}.ct20-hub-card .ct20-row{margin-top:auto;}.ct20-hub-card a{display:inline-flex;min-height:48px;align-items:center;padding:10px 14px;border-radius:12px;background:#48651a;color:#fff;text-decoration:none;font-weight:700;}.ct20-hub-card a.secondary{background:#eaf2d9;color:#3b5514;}
@media(max-width:760px){.ct20-layout{grid-template-columns:1fr;}.ct20-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ct20-panel{padding:14px;}.ct20-svg{max-height:340px;}}
@media(max-width:440px){.sp-stage:has(.ct20){padding:8px;}.ct20-panel{padding:12px;border-radius:16px;}.ct20-tiles button{font-size:16px;padding:8px 4px;}.ct20-actions{gap:8px;grid-template-columns:1.4fr 1fr 1fr;}.ct20-actions button{padding:8px 4px;font-size:16px;}.ct20-hub-grid{grid-template-columns:1fr;}.ct20-head{font-size:14px;}.ct20-candidates{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;}.ct20-equation{font-size:32px;}}
@media(prefers-reduced-motion:reduce){.ct20 *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.ct20 button:active{transform:none;}.sp-confetti,.sp-particle{display:none!important;}}
.ct20-program{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}.ct20-token{display:inline-flex;align-items:center;min-height:48px;padding:10px 12px;border:2px solid #b6c99e;border-radius:12px;background:#f0f5df;font-weight:700;}
.ct20-blockcode{white-space:pre-wrap;background:#f0f5df;padding:12px;border-radius:14px;font:700 16px/1.7 var(--sp-font-body);margin:10px 0;}
.ct20-table{width:100%;border-collapse:separate;border-spacing:4px;font-size:16px;}.ct20-table th,.ct20-table td{text-align:center;padding:5px;}.ct20-table th{background:#edf3e1;}.ct20-table td button{width:100%;padding:8px 4px;}
.ct20-bits{display:grid;grid-template-columns:repeat(var(--cols),minmax(48px,1fr));gap:8px;}.ct20-bits button{font-size:24px;padding:8px 0;}.ct20-bits button.check-bit{border-style:dashed;}.ct20-bits .one{background:#26332f;color:white;}.ct20-bits .one[aria-pressed=true]{background:#26332f;color:white;}
.ct20-pixelrow{display:flex;gap:3px;flex-wrap:wrap;margin:10px 0;}.ct20-pixel{display:grid;place-items:center;min-width:23px;min-height:32px;border:1px solid #8d9f95;background:white;color:#26332f;font:700 14px var(--sp-font-num);}.ct20-pixel.black{background:#26332f;color:white;}
.ct20-printrow{display:flex;gap:5px;flex-wrap:wrap;min-height:24px;}.ct20-dot{width:24px;height:24px;display:inline-block;border-radius:4px;background:#5c7c2b;margin:3px;}
.ct20-trace{padding-left:22px;max-height:240px;overflow:auto;}.ct20-trace li{margin:8px 0;}.ct20-trace .fail{color:#a22630;font-weight:800;}
.ct20-lanes{display:grid;gap:12px;}.ct20-lane{background:#edf3e1;border-radius:14px;padding:12px;}.ct20-bar{display:flex;gap:4px;min-height:44px;margin-top:8px;}.ct20-bar span{display:flex;align-items:center;justify-content:center;border-radius:8px;background:#48651a;color:#fff;min-width:30px;font-weight:700;}
.ct20-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0;}.ct20-stack{display:flex;flex-direction:column-reverse;gap:8px;margin:10px 0;}.ct20-stack div{padding:12px;background:#eaf2d9;border:2px solid #93ad67;border-radius:12px;}.ct20-record{overflow-wrap:anywhere;padding:10px;background:#f5f7f1;border-radius:12px;margin:8px 0;}
.ct20-tag{font-size:14px;color:#456018;background:#edf3e1;border-radius:8px;padding:4px 8px;}.ct20-pass{color:#145839;font-weight:800;}.ct20-fail{color:#a22630;font-weight:800;}
body[data-game] .sp-stage{overflow:auto;overscroll-behavior:contain;display:block;padding:12px;}
.ct20-printrow{flex-wrap:nowrap;overflow-x:auto;max-width:100%;}.ct20-dot{flex:none;}
.ct20-network{position:relative;aspect-ratio:1.5;min-height:200px;margin:12px 0;background:#f6f9ee;border-radius:16px;}.ct20-network svg{position:absolute;inset:0;width:100%;height:100%;}.ct20-network-nodes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);}.ct20-network-nodes button{width:56px;height:56px;margin:auto;padding:4px;border-radius:50%;background:white;}
.ct20-hub{font-family:var(--sp-font-body);margin:0;color:#26332f;}.ct20-hub-filter{margin:16px 0;}.ct20-hub-filter button{font-size:16px;}
@media(max-width:440px){body[data-game] .sp-stage{padding:8px;}}
@media print{body.ct20-hub{padding:0;background:white;}body.ct20-hub .no-print{display:none!important;}body.ct20-hub main{max-width:none;}body.ct20-hub .ct20-panel{break-inside:avoid;box-shadow:none;margin-bottom:12px;}body.ct20-hub h1{font-size:28px;}body.ct20-hub h2{font-size:20px;}body.ct20-hub p{font-size:12px;}}
@media(max-width:440px){.ct20-table th,.ct20-table td{padding:2px;}.ct20-bits{gap:8px;}.ct20-bits button{padding:6px 0;}.ct20-table{border-spacing:2px;}}