/* 수학 사고 10: 기존 SP2 셸을 보존하고 게임 안쪽만 확장한다. */
.sp-stage:has(.r10){overflow:auto;overscroll-behavior:contain;display:block;padding:12px;}
.r10{--r-blue:#215aa0;--r-teal:#076e61;--r-line:#c3d3dd;max-width:1120px;margin:auto;color:#26332f;font:500 16px/1.55 var(--sp-font-body);}
.r10 *{box-sizing:border-box;}
.r10 button,.r10 a.r10-btn{min-width:48px;min-height:48px;border:2px solid var(--r-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;}
.r10 button:hover:not(:disabled){border-color:var(--r-blue);background:#f0f6ff;}
.r10 button:active:not(:disabled){transform:translateY(1px);}
.r10 button:focus-visible,.r10 input:focus-visible{outline:3px solid #215aa0;outline-offset:3px;}
.r10 button:disabled{color:#6a747a;background:#eef1f2;cursor:default;}
.r10 button[aria-pressed=true]{background:#e4f0ff;border-color:var(--r-blue);color:#164b88;box-shadow:inset 0 0 0 1px var(--r-blue);}
.r10 button.r10-primary{background:var(--r-blue);border-color:var(--r-blue);color:white;}
.r10 button.r10-primary:hover{background:#174c8b;color:white;}
.r10-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;}
.r10-pill{display:inline-block;background:#e5f3ef;color:#076052;border-radius:12px;padding:7px 12px;font-weight:800;}
.r10-link{color:#215aa0;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:48px;padding:8px;}
.r10-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:16px;}
.r10-panel{min-width:0;background:white;border:2px solid #d7e2dd;border-radius:22px;padding:18px;box-shadow:0 5px 0 #dce6df;}
.r10 h2,.r10 h3{font-family:var(--sp-font-display);font-weight:400;line-height:1.35;margin:0 0 10px;}
.r10 h2{font-size:clamp(24px,4vw,32px);}.r10 h3{font-size:22px;}
.r10 p{margin:8px 0;overflow-wrap:anywhere;}.r10 strong{font-weight:800;}
.r10-goal{padding:12px;background:#eaf3ff;border-radius:14px;color:#174c8b;margin-bottom:16px;}
.r10-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.r10-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;}
.r10-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;}
.r10-tiles button{min-height:76px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;}
.r10-number{font-family:var(--sp-font-num);font-size:28px;line-height:1.25;font-weight:800;}
.r10-small{font-size:14px;color:#4e615a;}.r10-help{padding:12px;border-left:4px solid var(--r-teal);background:#eaf7f2;border-radius:8px;margin-top:12px;}
.r10-score-help summary{min-height:48px;padding:12px 0;cursor:pointer;color:#215aa0;}.r10-duel .sp-hud-score b{font-size:15px;}
.r10-feedback{padding:12px;border:2px solid #b9d1e9;border-radius:14px;background:#f1f7ff;min-height:58px;}
.r10-feedback.is-good{border-color:#69a991;background:#e7f5ed;color:#145839;}
.r10-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;}
.r10-tools{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}.r10-tools button{font-size:14px;}
.r10-handoff{max-width:620px;margin:16px auto;text-align:center;padding:28px;}
.r10-handoff .r10-number{font-size:42px;}.r10-handoff button{width:100%;margin-top:16px;}
.r10-svg{width:100%;max-height:430px;display:block;background:#f9fbfe;border-radius:16px;border:1px solid #c3d3dd;}
.r10-svg text{font:700 15px var(--sp-font-body);fill:#26332f;}.r10-svg .r10-gridline{stroke:#d1dce7;stroke-width:1;}.r10-svg .r10-axis{stroke:#668198;stroke-width:2;}
.r10-svg .r10-shape{fill:#3478d433;stroke:#215aa0;stroke-width:3;stroke-linejoin:round;}
.r10-svg .r10-target{fill:#0d9c8a12;stroke:#076e61;stroke-width:3;stroke-dasharray:8 5;}
.r10-svg .r10-original{fill:#687d8c20;stroke:#687d8c;stroke-width:2;stroke-dasharray:3 4;}
.r10-pinboard{position:relative;max-width:460px;margin:12px auto;aspect-ratio:1;}
.r10-pinboard svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.r10-pins{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);}
.r10-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;}
.r10-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%;}
.r10-equation{font:800 clamp(30px,5vw,48px)/1.4 var(--sp-font-num);text-align:center;padding:24px 4px;background:#eef4ff;border-radius:16px;}
.r10-equation mark{background:#d2e5ff;color:#174c8b;border-radius:8px;padding:0 4px;}
.r10-dials{display:grid;grid-template-columns:1fr 1fr;gap:8px;}.r10-dials svg{width:100%;}.r10-dials text{font:800 16px var(--sp-font-num);fill:#26332f;}
.r10-card-red{border-bottom:5px solid #b63039!important;}.r10-card-blue{border-bottom:5px solid #215aa0!important;}
.r10-zones button{min-height:88px;}.r10-sorted{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}.r10-sorted span{padding:8px 10px;border:1px solid #c3d3dd;border-radius:10px;}.r10-sorted .middle{background:#d3eee6;border:2px solid #076e61;}
.r10-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;}
.r10-candidates{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:12px 0;}.r10-candidates span{padding:8px 0;text-align:center;background:#e4f0ff;border:1px solid #b9cde5;border-radius:8px;font-weight:800;}.r10-candidates .gone{background:#f1f2f3;color:#747e83;text-decoration:line-through;}
.r10 input[type=range]{width:100%;min-height:48px;accent-color:#215aa0;touch-action:pan-x;}
.r10-trail{padding-left:20px;max-height:190px;overflow:auto;}.r10-trail li{margin:6px 0;}
.r10-privacy{font:500 14px/1.6 var(--sp-font-body);color:#52645c;margin:10px 0;}
.r10-hub{height:auto;min-height:100dvh;overflow:auto;padding:24px 16px;background:var(--sp-bg);}
.r10-hub main{max-width:1160px;margin:auto;}.r10-hub header{margin-bottom:24px;}.r10-hub h1{font:400 clamp(32px,6vw,54px)/1.3 var(--sp-font-display);margin:8px 0;}.r10-hub p{line-height:1.7;}
.r10-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}.r10-hub-card{display:flex;flex-direction:column;background:#fff;border:2px solid #d7e2dd;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #dce6df;}.r10-hub-card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;}.r10-hub-card section{padding:16px;flex:1;display:flex;flex-direction:column;}.r10-hub-card h2{font:400 26px/1.3 var(--sp-font-display);margin:0;}.r10-hub-card .r10-row{margin-top:auto;}.r10-hub-card a{display:inline-flex;min-height:48px;align-items:center;padding:10px 14px;border-radius:12px;background:#215aa0;color:#fff;text-decoration:none;font-weight:700;}.r10-hub-card a.secondary{background:#e4f0ff;color:#174c8b;}
@media(max-width:760px){.r10-layout{grid-template-columns:1fr;}.r10-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.r10-panel{padding:14px;}.r10-svg{max-height:340px;}}
@media(max-width:440px){.sp-stage:has(.r10){padding:8px;}.r10-panel{padding:12px;border-radius:16px;}.r10-tiles button{font-size:16px;padding:8px 4px;}.r10-actions{gap:8px;grid-template-columns:1.4fr 1fr 1fr;}.r10-actions button{padding:8px 4px;font-size:16px;}.r10-hub-grid{grid-template-columns:1fr;}.r10-head{font-size:14px;}.r10-candidates{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;}.r10-equation{font-size:32px;}}
@media(prefers-reduced-motion:reduce){.r10 *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.r10 button:active{transform:none;}.sp-confetti,.sp-particle{display:none!important;}}
.r10-boxes{display:flex;gap:8px;flex-wrap:wrap;}.r10-box{display:grid;place-items:center;min-width:68px;min-height:80px;background:#dcecff;border:3px solid #215aa0;border-radius:14px;white-space:pre-line;font-weight:800;}
.r10-tile-grid{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:8px;margin:12px 0;}.r10-tile-grid.small{grid-template-columns:repeat(2,64px);}.r10-tile-grid span{display:grid;place-items:center;min-height:56px;border:2px solid #c3d3dd;border-radius:12px;}.r10-tile-grid .painted{background:#215aa0!important;color:white!important;border-color:#215aa0!important;}
