:root{color-scheme:dark;font-family:Inter,Pretendard,Noto Sans KR,system-ui,sans-serif;font-synthesis:none;--ink: #f5f8fa;--muted: #96a9b3;--surface: #12252d;--surface-deep: #0c1b21;--line: rgba(255, 255, 255, .15);--cyan: #34cbd9;--coral: #ff6b67;--yellow: #ffd34e;--lime: #82d96b}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#101a20}button{font:inherit;letter-spacing:0}button:disabled{cursor:default;opacity:.38}#app{display:flex;flex-direction:column;color:var(--ink)}.topbar{flex:0 0 70px;min-width:0;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);align-items:center;gap:16px;padding:10px 18px;background:#0b171d;border-bottom:1px solid var(--line)}.brand{min-width:0;display:flex;align-items:center;gap:10px}.brand h1{margin:0;font-size:1.5rem;line-height:1;letter-spacing:0}.brand small{color:var(--cyan);font-size:.56rem;font-weight:900;letter-spacing:0}.brand-mark{position:relative;width:34px;height:34px;flex:0 0 34px}.brand-mark i{position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:0 3px 9px #00000059}.brand-mark i:first-child{top:2px;left:2px;background:#080b0d;border:2px solid #39464c}.brand-mark i:last-child{right:1px;bottom:1px;background:#f7f6ef;border:2px solid #aebbc0}.segments{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.segments button{min-width:0;min-height:36px;padding:6px 12px;color:var(--muted);background:#09151a;border:1px solid var(--line);cursor:pointer}.segments button:first-child{border-radius:6px 0 0 6px}.segments button:last-child{border-radius:0 6px 6px 0}.segments button.selected{color:#0c1b21;background:var(--yellow);border-color:var(--yellow);font-weight:900}.mode-picker{width:236px}.toolbar{justify-self:end;display:flex;gap:7px}.icon-button{width:42px;height:42px;display:grid;place-items:center;padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;font-size:1.35rem;cursor:pointer}.icon-button:not(:disabled):hover{border-color:var(--cyan);color:var(--cyan)}.game-shell{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 278px}.board-stage{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 14px 14px;background:linear-gradient(rgba(52,203,217,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(52,203,217,.035) 1px,transparent 1px),#101a20;background-size:32px 32px}.turn-banner{width:min(100%,520px);min-height:40px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink)}.turn-banner strong{font-size:1rem}.turn-banner>span:last-child{margin-left:4px;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}.mini-stone{width:18px;height:18px;display:inline-block;flex:0 0 18px;border-radius:50%;vertical-align:middle}.mini-stone.black{background:#090d0f;border:2px solid #425159;box-shadow:inset 3px 3px 4px #ffffff1f}.mini-stone.white{background:#f7f7f0;border:2px solid #a8b5ba;box-shadow:inset -3px -3px 4px #0000001f}.board-wrap{position:relative;width:min(calc(100vh - 136px),calc(100vw - 330px),760px);min-width:250px;aspect-ratio:1;flex:0 1 auto;filter:drop-shadow(0 20px 32px rgba(0,0,0,.32))}#board{width:100%;height:100%;display:block;border:1px solid rgba(255,255,255,.28);border-radius:7px;touch-action:manipulation;cursor:crosshair;outline:none}#board:focus-visible{box-shadow:0 0 0 3px var(--cyan)}.thinking{position:absolute;z-index:3;top:12px;left:50%;display:none;align-items:center;gap:8px;padding:8px 12px;color:var(--ink);background:#09151ae6;border:1px solid var(--line);border-radius:6px;font-size:.78rem;font-weight:800;transform:translate(-50%);pointer-events:none}.thinking.active{display:flex}.thinking span{width:12px;height:12px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--cyan);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.match-panel{min-width:0;display:flex;flex-direction:column;gap:18px;padding:24px 20px;background:var(--surface-deep);border-left:1px solid var(--line)}.setting-group{display:grid;gap:8px}.setting-label{color:var(--muted);font-size:.72rem;font-weight:900}.setting-group .segments{width:100%}.setting-group .segments button{padding:6px 8px;font-size:.82rem}.side-picker button{display:flex;align-items:center;justify-content:center;gap:7px}.side-picker button.selected .mini-stone.black{border-color:#1f3037}.score-board{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.score-board>div{min-width:0;display:grid;place-items:center;gap:3px;padding:12px 4px;border-right:1px solid var(--line)}.score-board>div:last-child{border-right:0}.score-board small{color:var(--muted);font-size:.62rem}.score-board strong{font-size:1.15rem;font-variant-numeric:tabular-nums}.draw-score>span{width:18px;height:18px;color:var(--yellow);text-align:center}.primary-button,.secondary-button{width:100%;min-height:48px;border-radius:6px;font-weight:1000;cursor:pointer}.primary-button{color:#0c1b21;background:var(--yellow);border:2px solid #fff0a2;box-shadow:0 5px #a87d00}.primary-button:active{transform:translateY(3px);box-shadow:0 2px #a87d00}.secondary-button{color:var(--ink);background:transparent;border:1px solid var(--line)}#panelNewButton{margin-top:auto}.local-mode .ai-setting{display:none}.overlay{position:fixed;z-index:20;inset:0;display:none;place-items:center;padding:18px;background:#040a0da3;backdrop-filter:blur(5px)}.overlay.active{display:grid}.dialog{width:min(90vw,390px);padding:26px;color:var(--ink);background:#10242c;border:1px solid rgba(255,255,255,.23);border-radius:8px;box-shadow:0 24px 70px #00000080;text-align:center}.dialog>p:first-child{display:inline-block;margin:0 0 14px;padding:5px 10px;color:#0c1b21;background:var(--cyan);border-radius:4px;font-size:.68rem;font-weight:1000}.result-stone{width:70px;height:70px;display:block;margin:0 auto 12px;border-radius:50%}.result-stone.black{background:radial-gradient(circle at 34% 28%,#55636a,#090c0e 62%);border:2px solid #58666c}.result-stone.white{background:radial-gradient(circle at 34% 28%,#fff,#d6dddc 68%);border:2px solid #a9b6ba}.result-stone.draw{display:none}.dialog h2{margin:0 0 6px;color:var(--yellow);font-size:2.3rem;letter-spacing:0}.dialog #resultMoves{margin:0 0 20px;color:var(--muted);font-size:.85rem}.dialog .secondary-button{margin-top:10px}@media(max-width:900px){.topbar{grid-template-columns:minmax(112px,1fr) auto auto;padding-inline:12px}.mode-picker{width:210px}.game-shell{grid-template-columns:minmax(0,1fr) 235px}.match-panel{padding:18px 14px}.board-wrap{width:min(calc(100vh - 136px),calc(100vw - 275px),720px)}}@media(max-width:760px){.topbar{flex-basis:64px;grid-template-columns:minmax(72px,1fr) minmax(160px,190px) auto;gap:7px;padding:8px 9px}.brand{gap:6px}.brand-mark{display:none}.brand h1{font-size:1.25rem}.brand small{font-size:.48rem}.mode-picker{width:100%}.segments button{min-height:34px;padding:5px 7px;font-size:.76rem}.toolbar{gap:4px}.icon-button{width:36px;height:36px;font-size:1.12rem}.game-shell{display:flex;flex-direction:column}.match-panel{order:0;flex:0 0 112px;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;padding:8px 10px;border-left:0;border-bottom:1px solid var(--line)}.setting-group{gap:4px}.setting-label{font-size:.58rem}.setting-group .segments button{min-height:30px;padding:3px 4px;font-size:.68rem}.score-board{grid-column:1 / -1;min-height:42px}.score-board>div{grid-template-columns:auto auto auto;place-content:center;gap:5px;padding:4px}.score-board .mini-stone{width:13px;height:13px;flex-basis:13px}.score-board small{font-size:.55rem}.score-board strong{font-size:.85rem}#panelNewButton{display:none}.local-mode .match-panel{flex-basis:56px;display:block;padding:6px 10px}.board-stage{order:1;flex:1;justify-content:flex-start;gap:5px;padding:5px 8px 8px}.turn-banner{min-height:34px}.board-wrap{width:min(calc(100vw - 16px),calc(100vh - 245px));min-width:250px}}@media(max-height:520px)and (orientation:landscape){.topbar{flex-basis:56px;padding-block:6px}.brand small{display:none}.game-shell{grid-template-columns:minmax(0,1fr) 220px}.match-panel{padding:10px 12px;gap:10px}.score-board>div{padding-block:6px}.board-stage{gap:3px;padding:3px 8px 6px}.turn-banner{min-height:28px}.board-wrap{width:min(calc(100vh - 94px),calc(100vw - 260px));min-width:220px}.primary-button{min-height:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}