:root{
  --bg:#f4f8f7;--card:#fff;--text:#17312f;--muted:#647773;--line:#d8e3e1;
  --accent:#0f766e;--soft:#ecfdf5;--warm:#fff7ed;
}
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{margin:0}
button,input,select{font:inherit}
button{min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);padding:9px 13px;font-weight:750;cursor:pointer}
button:hover{border-color:#90aaa5}
button.active,button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #99f6e4;outline-offset:2px}
.topbar{padding:20px max(16px,calc((100% - 1180px)/2));background:#fff;border-bottom:1px solid var(--line)}
.topbar h1{margin:0;font-size:clamp(1.45rem,4vw,2.2rem)}
.topbar h1 span{font-size:.78rem;background:var(--soft);color:var(--accent);padding:4px 8px;border-radius:999px;vertical-align:middle}
.topbar p{margin:6px 0 0;color:var(--muted)}
main{width:min(1180px,calc(100% - 24px));margin:16px auto 40px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{flex:1;min-width:150px}
.tab{display:none}.tab.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 8px 24px rgba(23,49,47,.045);margin-bottom:14px}
.section-head{display:flex;gap:12px;justify-content:space-between;align-items:end;flex-wrap:wrap;margin-bottom:12px}
.section-head h2{margin:0;font-size:1.12rem}.section-head p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.shape-buttons{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.shape-buttons button{min-height:72px;display:grid;place-items:center;gap:2px;padding:8px 4px}
.shape-buttons .icon{font-size:1.45rem}.shape-buttons small{font-size:.72rem}
.two-col{display:grid;grid-template-columns:1.08fr .92fr;gap:14px}
#solidCanvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fbfdfd,#eef7f5);touch-action:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.range-row{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:10px;align-items:center;margin-top:12px}
.range-row label{color:var(--muted);font-size:.86rem}
.net-view{min-height:330px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:14px;background:#fbfdfd;padding:10px;overflow:hidden}
.net-view svg{max-width:100%;height:auto;max-height:320px}
.net-note,.explain{margin-top:10px;padding:10px 12px;background:#f8fbfa;border-radius:12px;color:var(--muted);font-size:.88rem;line-height:1.55}
.check{display:flex;gap:6px;align-items:center;font-size:.86rem;color:var(--muted)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr) 2.2fr;gap:10px}
.facts-grid>div,.result-grid>div{padding:14px;border-radius:14px;background:#f8fbfa;border:1px solid var(--line)}
.facts-grid span,.result-grid span{display:block;color:var(--muted);font-size:.8rem;margin-bottom:5px}
.facts-grid b,.result-grid b{font-size:1.05rem}
.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.input-grid label{display:grid;gap:6px;font-weight:700;font-size:.88rem}
.input-grid input,.input-grid select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.practice-card{max-width:780px;margin-inline:auto}
.practice-status{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:#f8fbfa;border-radius:12px}
.question{font-size:1.15rem;font-weight:850;line-height:1.5;padding:24px 4px 16px;text-align:center}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.answers button{min-height:58px}
.answers button.correct{background:#ecfdf5;border-color:#34d399;color:#065f46}
.answers button.wrong{background:#fff1f2;border-color:#fb7185;color:#9f1239}
.feedback{min-height:48px;padding:12px 0;font-weight:750}
footer{width:min(1180px,calc(100% - 24px));margin:0 auto 32px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
@media(max-width:920px){.shape-buttons{grid-template-columns:repeat(5,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.facts-grid{grid-template-columns:repeat(3,1fr)}.facts-grid .wide{grid-column:1/-1}}
@media(max-width:560px){main{width:min(100% - 16px,1180px)}.shape-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:13px;border-radius:15px}.input-grid,.result-grid{grid-template-columns:1fr}.answers{grid-template-columns:1fr}.facts-grid{grid-template-columns:repeat(3,1fr)}.net-view{min-height:280px}}

/* 전개도 조립실 */
.assembly-top{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#assemblySolidCanvas,#foldResultCanvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fbfdfd,#eef7f5)}
.assembly-reference{min-height:260px}
.assembly-reference.hint-hidden{filter:blur(16px);opacity:.25;pointer-events:none}
.assembly-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.assembly-steps span{padding:9px 7px;text-align:center;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.8rem;font-weight:800;background:#f8fbfa}
.assembly-steps span.active{background:var(--soft);border-color:#6ee7b7;color:#065f46}
.piece-tray{min-height:106px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border:1px dashed #a9bbb7;border-radius:15px;background:#f8fbfa;margin-bottom:16px}
.tray-placeholder{width:100%;text-align:center;color:var(--muted);font-size:.88rem}
.net-piece{width:72px;height:72px;border:2px solid #0f766e;background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;user-select:none}
.net-piece .piece-icon{font-size:1.6rem;line-height:1}
.net-piece small{font-size:.66rem;color:var(--muted)}
.net-piece.selected{outline:4px solid #fbbf24;outline-offset:2px;background:#fffbeb}
.net-piece[disabled]{opacity:.28}
.net-piece.dragging{opacity:.5}
.assembly-work{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:16px;align-items:start}
.board-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.board-title span{font-size:.8rem;color:var(--muted)}
.assembly-board{display:grid;grid-template-columns:repeat(11,48px);grid-auto-rows:48px;gap:3px;justify-content:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:
linear-gradient(45deg,#f3f8f7 25%,transparent 25%) 0 0/24px 24px,
linear-gradient(-45deg,#f3f8f7 25%,transparent 25%) 0 0/24px 24px,#fff;overflow:auto}
.board-cell{width:48px;height:48px;padding:0;border-radius:7px;border:1px solid #d7e3e0;background:rgba(255,255,255,.85);font-size:1.2rem;position:relative}
.board-cell:hover{background:#ecfdf5}
.board-cell.occupied{border:2px solid #0f766e;background:#ecfdf5}
.board-cell.drop-hot{background:#fef3c7;border-color:#f59e0b}
.board-cell .cell-num{position:absolute;right:3px;bottom:1px;font-size:.55rem;color:#647773}
.assembly-side{display:grid;gap:12px}
.assembly-help{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.assembly-help h3{margin:0 0 6px;font-size:1rem}.assembly-help ol{margin:0;padding-left:20px;color:var(--muted);line-height:1.65;font-size:.84rem}
.run-fold{min-height:58px;background:#0f766e;color:#fff;border-color:#0f766e;font-size:1.05rem}
.run-fold:disabled{background:#cbd5d1;border-color:#cbd5d1;cursor:not-allowed}
.assembly-result{padding:12px 14px;border-radius:14px;background:#f8fbfa;border:1px solid var(--line);line-height:1.55;font-size:.88rem}
.assembly-result.ok{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}
.assembly-result.bad{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.fold-result-card.success{border-color:#6ee7b7;box-shadow:0 8px 30px rgba(16,185,129,.12)}
.fold-animation{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:10px;align-items:center;margin-bottom:12px}
.fold-progress-track{height:14px;border-radius:999px;background:#e5eeec;overflow:hidden}
.fold-progress-track i{display:block;width:0;height:100%;background:#0f766e;transition:width .08s linear}
@media(max-width:920px){.assembly-top{grid-template-columns:1fr}.assembly-work{grid-template-columns:1fr}.assembly-board{grid-template-columns:repeat(11,42px);grid-auto-rows:42px}.board-cell{width:42px;height:42px}}
@media(max-width:560px){.assembly-steps{grid-template-columns:repeat(2,1fr)}.assembly-board{justify-content:start;grid-template-columns:repeat(11,38px);grid-auto-rows:38px}.board-cell{width:38px;height:38px}.net-piece{width:64px;height:64px}.assembly-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Lite 1.2 — 조각 회전 + 성공/실패 팝업 + 느린 접기 */
.board-cell.selected-piece{outline:4px solid #fbbf24;outline-offset:1px;background:#fffbeb}
.piece-shape{display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease;line-height:1}
.piece-shape.side-rect{width:31px;height:18px;border:2px solid #0f766e;border-radius:3px;background:#fff;color:transparent}
.piece-shape.triangle{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:27px solid #0f766e;position:relative}
.piece-shape.triangle::after{content:'';position:absolute;left:-11px;top:5px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:20px solid #ecfdf5}
.piece-shape.circle{width:29px;height:29px;border:2px solid #0f766e;border-radius:50%;background:#fff;color:transparent}
.piece-shape.square{width:27px;height:27px;border:2px solid #0f766e;background:#fff;color:transparent}
.piece-shape.polygon{font-size:1.7rem}
.rotate-hint{font-size:.72rem;color:#b45309;font-weight:800}
.game-popup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(14,35,32,.45);backdrop-filter:blur(3px);padding:20px}
.game-popup[hidden]{display:none}
.game-popup-box{width:min(420px,92vw);padding:30px 22px;border-radius:26px;text-align:center;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.25);animation:popIn .3s ease}
.game-popup.success .game-popup-box{border:4px solid #34d399}
.game-popup.fail .game-popup-box{border:4px solid #fb923c}
.game-popup-icon{font-size:4rem;line-height:1}
.game-popup-title{font-size:clamp(2rem,9vw,3.4rem);font-weight:950;margin:8px 0}
.game-popup.success .game-popup-title{color:#047857}
.game-popup.fail .game-popup-title{color:#c2410c}
.game-popup-sub{color:#647773;font-weight:750;line-height:1.5}
@keyframes popIn{0%{transform:scale(.72);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.fold-result-card.folding{border-color:#fbbf24}
.fold-result-card.folding #foldResultCanvas{box-shadow:inset 0 0 0 3px rgba(251,191,36,.18)}
#rotatePieceBtn:not(:disabled){border-color:#f59e0b;background:#fffbeb;color:#92400e}
\n/* 1.3 정팔면체 힌트 보정 */\n.assembly-reference svg text:last-child{font-weight:700}\n
/* Lite 1.4 전체 도형 수학 정확성 점검 */
.piece-shape.poly5,.piece-shape.poly6,.piece-shape.poly8{width:30px;height:30px;background:#0f766e;position:relative}
.piece-shape.poly5{clip-path:polygon(50% 2%,98% 37%,80% 96%,20% 96%,2% 37%)}
.piece-shape.poly6{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.piece-shape.poly8{clip-path:polygon(30% 2%,70% 2%,98% 30%,98% 70%,70% 98%,30% 98%,2% 70%,2% 30%)}

/* Lite 1.6 — Android/Kakao WebView 호환 다각형 면 */
.piece-svg{
  width:38px;
  height:38px;
  display:block;
  overflow:visible;
  transform-origin:50% 50%;
  transition:transform .18s ease;
  flex:0 0 auto;
}
.net-piece .piece-svg{width:42px;height:42px}
.board-cell .piece-svg{width:34px;height:34px;margin:auto}

/* Lite 1.8 — 자석 스냅 / 별 점수 / 힌지 순차 접기 */
.board-cell.snap-pop{animation:snapPop .42s ease;background:#d1fae5;border-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.16)}
@keyframes snapPop{0%{transform:scale(.82)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
.assembly-award{display:flex;gap:14px;align-items:center;justify-content:center;padding:12px 16px;margin-bottom:12px;border:1px solid #fcd34d;border-radius:16px;background:#fffbeb}
.award-stars{font-size:1.75rem;letter-spacing:4px;color:#f59e0b;text-shadow:0 2px 0 #fde68a}
.assembly-award>div:last-child{display:grid;gap:2px}.assembly-award b{font-size:1.25rem}.assembly-award span{font-size:.82rem;color:#647773}
.game-popup-score{margin-top:8px;font-size:1.2rem;font-weight:900;color:#b45309}
.star-burst{position:fixed;inset:0;z-index:10001;pointer-events:none;overflow:hidden}
.star-burst i{position:absolute;left:50%;top:46%;font-style:normal;font-size:2rem;animation:starFly 1.15s ease-out forwards}
@keyframes starFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.25) rotate(var(--r))}}
.hinge-note{font-weight:800;color:#0f766e}

/* Lite 1.9 — 모든 면 조각 SVG 채움 통일 */
.piece-svg polygon,
.piece-svg rect,
.piece-svg circle{
  vector-effect:non-scaling-stroke;
}
.net-piece,.board-cell.occupied{
  background:#f3fcf8;
}
.net-piece .piece-svg,
.board-cell .piece-svg{
  filter:drop-shadow(0 1px 0 rgba(15,118,110,.05));
}

/* Lite 3.0 — 자유 전개도 설계실 */
.fd-type-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.fd-type-buttons button{min-height:64px;display:grid;place-items:center;gap:2px}.fd-type-buttons button small{font-size:.72rem}.fd-type-buttons button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fd-guide{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:11px 12px;border-radius:14px;background:#f8fbfa;border:1px solid var(--line);font-size:.82rem;color:var(--muted)}.fd-guide b{color:var(--text)}.fd-guide span{padding:5px 8px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.fd-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#fdBaseCanvas,#fdNetCanvas,#fdSolidCanvas,#fdFoldCanvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fbfdfd,#eef7f5);touch-action:none}
.fd-valid{padding:6px 10px;border-radius:999px;background:#ecfdf5;border:1px solid #86efac;color:#047857;font-size:.78rem;font-weight:850}.fd-valid.bad{background:#fff7ed;border-color:#fdba74;color:#c2410c}
.fd-side-lengths{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.fd-side-lengths span{padding:6px 9px;border-radius:999px;background:#f8fbfa;border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.fd-height-row{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:12px;align-items:center;margin-top:12px}.fd-height-row label{font-size:.86rem;color:var(--muted)}
.fd-math-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.fd-math-grid>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fbfa}.fd-math-grid span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:5px}.fd-math-grid b{font-size:1.08rem}.fd-explain{margin:12px 0;padding:12px 14px;border-radius:14px;background:#f8fbfa;border:1px solid var(--line);font-size:.88rem;color:var(--muted);line-height:1.55}
@media(max-width:900px){.fd-grid-two{grid-template-columns:1fr}.fd-type-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.fd-type-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.fd-height-row{grid-template-columns:1fr}.fd-math-grid{grid-template-columns:1fr 1fr}}

/* Lite 3.1 — 자유 설계 전개도 힌지 순차 접기 */
.fd-fold-step{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fbfa}
.fd-fold-step b{color:#0f766e}.fd-fold-step span{font-size:.84rem;color:var(--muted)}
.fd-fold-note{margin:0 0 10px;padding:9px 11px;border-radius:11px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.82rem;line-height:1.5}
#fdFoldCanvas{background:linear-gradient(180deg,#fcfefe,#edf8f5)}