:root{--wood: #e3b877;--wood-dark: #c8965a;--line: #6b4423;--cho: #0a6d3a;--han: #b02020;--bg: #2a2320;--panel: #3a322d;--text: #f3ecd8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%}body{background:#201b18;color:#f3ecdf;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,sans-serif;overscroll-behavior:none}#root{min-height:100vh;min-height:100dvh}.app{max-width:480px;margin:0 auto;padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px);display:flex;flex-direction:column;gap:12px}.topbar{padding-top:14px;text-align:center}.topbar h1{margin:0;font-size:22px;letter-spacing:2px;color:#f0d9a8}.status{margin-top:6px;font-size:15px;color:#d8c9ad;min-height:20px}.status-check{color:#ff8f6b;font-weight:700}.board-wrap{width:100%;position:relative}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#140e0a8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:8px;animation:overlayIn .2s ease-out;z-index:5}.result-card{width:min(78%,300px);padding:24px 22px;border-radius:16px;text-align:center;background:linear-gradient(180deg,#fbf1dc,#efdcb4);box-shadow:0 12px 30px #00000080;border:2px solid #c9a25f;animation:cardPop .28s cubic-bezier(.2,.9,.3,1.3)}.result-title{font-size:34px;font-weight:900;letter-spacing:2px}.result-card.win .result-title{color:#0a6d3a}.result-card.lose .result-title{color:#b02020}.result-detail{margin-top:8px;font-size:15px;color:#5c4a2e}.result-btn{margin-top:18px;width:100%}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes cardPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.board{width:100%;height:auto;display:block;touch-action:manipulation}.grid-line{stroke:#4a2f14;stroke-width:1.3;stroke-linecap:round;opacity:.9}.piece-group{pointer-events:none}.piece-oct{stroke:#78552880;stroke-width:.8}.piece-edge{fill:none;stroke:#ffffff73;stroke-width:.9}.piece-inner{fill:none;stroke-width:1.4}.inner-cho{stroke:#075a30bf}.inner-han{stroke:#9e1515bf}.piece-selected{stroke:#b8791f;stroke-width:2.2}.piece-label{font-weight:900;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Nanum Myeongjo,Apple SD Gothic Neo,Malgun Gothic,serif}.label-cho{fill:#075a30}.label-han{fill:#9e1515}.target-dot{fill:#145a288c}.target-capture{fill:none;stroke:#c82828cc;stroke-width:3}.last-from{fill:#ffd27840}.last-to{fill:#ffd27866}.side-hint{font-size:11px;fill:#7a5a30}.controls{display:flex;flex-direction:column;gap:10px;background:var(--panel);border-radius:12px;padding:12px}.control-row{display:flex;align-items:center;gap:10px}.control-row label{width:56px;font-size:13px;color:#cdbda0;flex-shrink:0}.segmented{display:flex;flex:1;gap:6px}.segmented button{flex:1;padding:9px 6px;border:1px solid #5a4d43;background:#4a413a;color:#e6d9c2;border-radius:8px;font-size:13px}.segmented button.active{background:#c8965a;color:#2a1c0e;border-color:#c8965a;font-weight:700}.buttons{gap:8px}.btn{flex:1;padding:12px;border:none;border-radius:10px;background:#5a4d43;color:#f3ecdf;font-size:15px;font-weight:600}.btn:disabled{opacity:.4}.btn.primary{background:#0a6d3a}.footer{text-align:center;font-size:12px;color:#8a7a63;padding:4px 0 8px}.status-bar{text-align:center;padding:14px 12px 10px;font-size:16px;color:#e7d9bd;min-height:22px}.status-bar.status-check{color:#ff8f6b;font-weight:700}.game-actions{padding:8px 12px calc(env(safe-area-inset-bottom) + 14px);display:flex;gap:8px}.game-actions .btn{flex:1}.game-actions .btn.primary{flex:2}.tray{margin:0 12px;padding:8px 10px;background:#3a322db3;border-radius:10px;display:flex;flex-direction:column;gap:6px}.tray-head{display:flex;align-items:baseline;justify-content:space-between}.tray-name{font-size:13px;font-weight:700}.name-cho{color:#2ec77a}.name-han{color:#ff6b6b}.tray-score{font-size:15px;font-weight:800;color:#f0d9a8}.tray-pieces{display:flex;flex-wrap:wrap;gap:3px;min-height:24px;align-items:center}.tray-empty{font-size:12px;color:#8a7a63}.cap-piece{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;font-size:14px;font-weight:800;font-family:Nanum Myeongjo,Apple SD Gothic Neo,Malgun Gothic,serif;background:#efe0bd;border:1px solid #b79a63}.cap-cho{color:#075a30}.cap-han{color:#9e1515}.setup{max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;gap:16px;min-height:100dvh}.setup-title{margin:0;text-align:center;font-size:30px;letter-spacing:3px;color:#f0d9a8}.setup-sub{margin:0;text-align:center;color:#b6a488;font-size:14px}.setup-footer{margin-top:auto;padding-top:16px;text-align:center;font-size:11px;color:#7a6b55;line-height:1.6}.setup-footer a{color:#b6a488}.stepper{display:flex;justify-content:space-between;gap:6px;margin-top:4px}.step-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.45}.step-dot.active,.step-dot.done{opacity:1}.step-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#5a4d43;color:#f3ecdf;font-size:13px;font-weight:700}.step-dot.active .step-num{background:#c8965a;color:#2a1c0e}.step-dot.done .step-num{background:#0a6d3a}.step-label{font-size:11px;color:#cdbda0}.setup-card{background:var(--panel);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}.setup-card h2{margin:0;font-size:18px;color:#f0d9a8}.setup-card .hint{margin:0;font-size:13px;color:#b6a488;line-height:1.5}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-grid.three{grid-template-columns:1fr 1fr 1fr}.choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border:2px solid #5a4d43;background:#4a413a;color:#e6d9c2;border-radius:12px;font-size:14px}.choice.active{border-color:#c8965a;background:#574433}.choice-big{font-size:26px;font-weight:800}.choice-big.cho-color{color:#2ec77a}.choice-big.han-color{color:#ff6b6b}.choice-desc{font-size:11px;color:#b6a488}.setup-nav{display:flex;margin-top:4px}.setup-nav.two{gap:10px}.setup-nav .btn{flex:1}.wing-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wing-col{display:flex;flex-direction:column;gap:8px}.wing-head{text-align:center;font-size:14px;font-weight:700;color:#f0d9a8;padding-bottom:2px}.wing-btn{padding:14px 8px;border:2px solid #5a4d43;background:#4a413a;color:#e6d9c2;border-radius:10px;font-size:16px;font-weight:600;letter-spacing:1px}.wing-btn.active{border-color:#c8965a;background:#574433;color:#f0d9a8}.inapp{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}.inapp-card{max-width:380px;width:100%;background:var(--panel);border-radius:16px;padding:24px 20px;text-align:center}.inapp-title{margin:0 0 12px;font-size:28px;letter-spacing:3px;color:#f0d9a8}.inapp-msg{font-size:15px;line-height:1.6;color:#e7d9bd}.inapp-btn{width:100%;margin-top:14px}.inapp-hint{font-size:13px;color:#b6a488;line-height:1.5;margin-top:12px}.inapp-steps{text-align:left;margin:10px auto 0;padding-left:22px;max-width:300px;font-size:14px;line-height:1.9;color:#e7d9bd}.inapp-steps b{color:#f0d9a8}.inapp-primary{margin-top:16px;padding:14px;background:#3a322d;border:1px solid #5a4d43;border-radius:12px}.inapp-primary-title{font-size:15px;font-weight:800;color:#f0d9a8;text-align:center}.inapp-icon{margin:0 3px}.inapp-url{margin-top:16px;padding:10px;background:#2a2320;border-radius:8px;font-size:12px;color:#8a7a63;word-break:break-all;-webkit-user-select:all;user-select:all}.result-card .result-btn+.result-btn{margin-top:8px;background:#5a4d43}.record-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#0f0b08b8;display:grid;place-items:center;padding:12px}.record-panel{width:100%;max-width:460px;max-height:92vh;max-height:92dvh;overflow-y:auto;background:#2a2320;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}.record-head{display:flex;align-items:center;justify-content:space-between}.record-title{font-size:18px;font-weight:800;color:#f0d9a8}.record-close{background:none;border:none;color:#cdbda0;font-size:20px;padding:4px 8px}.record-board{width:100%}.record-controls{display:flex;align-items:center;justify-content:center;gap:6px}.record-controls .btn{flex:1;padding:10px 4px;font-size:13px}.record-count{flex:0 0 auto;min-width:54px;text-align:center;font-size:13px;color:#cdbda0}.record-list{list-style:none;margin:0;padding:0;max-height:30vh;overflow-y:auto;border-top:1px solid #453b33}.record-move{padding:8px 10px;font-size:14px;color:#e7d9bd;border-bottom:1px solid #3a322d;cursor:pointer}.record-move.current{background:#574433;color:#f0d9a8;font-weight:700}.record-no{color:#8a7a63;margin-right:4px}.move-cho .record-no{color:#2ec77a}.move-han .record-no{color:#ff6b6b}.record-empty{padding:14px;text-align:center;color:#8a7a63;font-size:13px}.check-ring{fill:none;stroke:#ff3b30;stroke-width:3.5;opacity:.9;animation:checkPulse .9s ease-in-out infinite}@keyframes checkPulse{0%,to{stroke-width:2.5;opacity:.55}50%{stroke-width:5;opacity:1}}.check-banner{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:6;padding:6px 16px;border-radius:8px;font-size:15px;font-weight:800;color:#fff;background:#c62828;box-shadow:0 2px 8px #0006;white-space:nowrap;animation:bannerFlash .8s ease-in-out infinite alternate}@keyframes bannerFlash{0%{background:#c62828}to{background:#e53935}}