:root{--bg: #ede4cd;--bg-deep: #e3d7b9;--panel: #f6efdd;--panel-2: #faf5e8;--border: #cfc19e;--text: #2c2820;--dim: #7d7460;--ink: #3a342a;--ink-2: #5a5140;--seal: #b3402e;--seal-2: #cf5a45;--green: #5b7a52;--radius: 10px;--serif: "Noto Serif KR", "Gowun Batang", Batang, serif;--paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.31 0 0 0 0 0.22 0 0 0 0.045 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}*{box-sizing:border-box}::selection{background:#b3402e38}body{font-family:var(--serif);margin:0;color:var(--text);background:var(--paper),radial-gradient(1100px 500px at 70% -10%,rgba(90,81,64,.09),transparent 60%),radial-gradient(800px 400px at 0% 100%,rgba(179,64,46,.05),transparent 60%),radial-gradient(600px 300px at 100% 60%,rgba(255,253,245,.55),transparent 70%),var(--bg);min-height:100vh}main{max-width:1080px;margin:0 auto;padding:16px 14px 40px}header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 2px 16px;border-bottom:2px solid var(--ink);margin-bottom:16px;position:relative}header:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:linear-gradient(90deg,transparent,var(--border) 15%,var(--border) 85%,transparent)}h1{font-size:1.6rem;margin:0;letter-spacing:.22em;font-weight:900;font-family:var(--serif);color:var(--ink);text-shadow:0 1px 0 rgba(255,253,244,.6);display:inline-flex;align-items:center;gap:10px}h1:before{content:none}h1:after{content:"五";font-size:.72em;font-weight:700;line-height:1;color:#fff6ee;background:linear-gradient(160deg,var(--seal-2),var(--seal) 70%);border-radius:4px;padding:4px 5px;letter-spacing:0;box-shadow:0 1px 3px #78281966,inset 0 0 4px #fff0e659;transform:rotate(-4deg)}.me{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}.me .chip{font-size:.78rem;padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,#fbf7ec,var(--panel));color:var(--dim);white-space:nowrap;box-shadow:0 1px 2px #5a51401f}.me .chip.gold{color:var(--seal);border-color:#b3402e73;font-weight:600}.mono{font-family:Consolas,monospace}.card{background:var(--paper),linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:10px 0;box-shadow:0 1px 2px #5a51401a,0 6px 18px #5a514024;transition:box-shadow .2s,transform .2s,border-color .2s}.columns>.card:hover{transform:translateY(-2px);border-color:#bfae83;box-shadow:0 2px 4px #5a51401f,0 12px 28px #5a514033}.columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));grid-auto-rows:1fr;gap:14px}.columns>.card{margin:0}h2,h3{margin:4px 0 12px;font-size:1.06rem;letter-spacing:.08em;font-weight:700;display:flex;align-items:center;gap:9px}h2:before,h3:before{content:"";width:4px;height:17px;border-radius:1px;background:linear-gradient(180deg,var(--seal-2),var(--seal));display:inline-block;box-shadow:0 1px 2px #7828194d}button{margin:2px;padding:8px 15px;cursor:pointer;border-radius:8px;border:1px solid var(--ink-2);background:linear-gradient(180deg,#fbf7ec,#f0e8d3);color:var(--ink);font-size:.87rem;font-family:var(--serif);font-weight:600;letter-spacing:.03em;box-shadow:0 1px 2px #5a514029,inset 0 1px #fffdf4b3;transition:transform .06s,border-color .15s,box-shadow .15s,background .15s}button:hover:enabled{border-color:var(--seal);color:#7c2c1e;box-shadow:0 0 0 2px #b3402e21,0 2px 5px #5a514033;transform:translateY(-1px)}button:active:enabled{transform:translateY(0);box-shadow:inset 0 1px 3px #5a514033}button:disabled{cursor:default;opacity:.42;box-shadow:none}input{padding:8px 11px;margin:2px;border-radius:8px;border:1px solid var(--border);background:#fffdf6;color:var(--text);font-family:var(--serif);box-shadow:inset 0 1px 2px #5a514014;transition:border-color .15s,box-shadow .15s}input:focus{outline:none;border-color:#b3402e8c;box-shadow:0 0 0 3px #b3402e1a}.error{color:#a52a1a;font-weight:700}.warn{color:#a06018;font-weight:700}.note{color:var(--dim);font-size:.84rem}code{background:var(--bg-deep);border:1px solid var(--border);padding:1px 6px;border-radius:5px;color:var(--ink);font-family:Consolas,monospace;font-size:.9em}table td{padding:3px 12px}.onboarding{color:var(--dim);font-size:.87rem;line-height:1.75;padding-left:20px}.onboarding li::marker{color:var(--seal);font-weight:700}.clocks{display:flex;gap:12px;font-size:1.08rem;margin-bottom:12px}.clocks span{padding:7px 18px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg,#fbf7ec,var(--panel));font-family:Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--dim);box-shadow:0 1px 2px #5a51401f;transition:color .2s,border-color .2s,box-shadow .2s}.clocks .active{font-weight:700;color:var(--seal);border-color:#b3402e99;box-shadow:0 0 12px #b3402e33,0 1px 2px #5a51401f;animation:clock-breath 2.4s ease-in-out infinite}@keyframes clock-breath{0%,to{box-shadow:0 0 6px #b3402e24}50%{box-shadow:0 0 16px #b3402e4d}}.board{display:grid;grid-template-columns:repeat(15,32px);background:var(--paper),radial-gradient(420px 300px at 30% 20%,rgba(255,253,244,.55),transparent 70%),radial-gradient(500px 360px at 80% 90%,rgba(120,106,78,.1),transparent 70%),linear-gradient(160deg,#f5eedb,#ecdfc0 55%,#e2d2ab);border:3px solid var(--ink);border-radius:4px;padding:10px;width:fit-content;box-shadow:0 2px 4px #3c342433,0 14px 34px #3c34244d,inset 0 0 34px #786a4e24;position:relative}.board:after{content:"";position:absolute;right:6px;bottom:6px;width:18px;height:18px;border-radius:3px;background:#b3402e29;box-shadow:inset 0 0 0 1.5px #b3402e47;transform:rotate(-5deg);pointer-events:none}.cell{position:relative;width:32px;height:32px;margin:0;padding:0;background:transparent;border:none;border-radius:0;display:flex;align-items:center;justify-content:center;transition:none;box-shadow:none;font-family:var(--serif)}.cell:hover:enabled{transform:none;box-shadow:none;border:none}.cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#4a4234;pointer-events:none}.cell:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:#4a4234;pointer-events:none}.cell:nth-child(15n+1):before{left:50%}.cell:nth-child(15n):before{right:50%}.cell:nth-child(-n+15):after{top:50%}.cell:nth-child(n+211):after{bottom:50%}.cell:nth-child(49),.cell:nth-child(57),.cell:nth-child(113),.cell:nth-child(169),.cell:nth-child(177){background:radial-gradient(circle at center,#4a4234 3px,transparent 3.5px)}.cell:enabled{cursor:pointer}.cell:enabled:hover{background:radial-gradient(circle at center,rgba(58,52,42,.18) 11px,transparent 13px)}.stone{position:relative;z-index:1;width:27px;height:27px;border-radius:50%;box-shadow:0 2px 4px #3c342480,0 0 1px #3c342466;animation:stone-place .28s cubic-bezier(.2,.9,.3,1.2) both}@keyframes stone-place{0%{transform:scale(1.45);opacity:0;filter:blur(1.5px)}60%{opacity:1;filter:blur(0)}to{transform:scale(1)}}.stone.black{background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.32) 0%,transparent 32%),radial-gradient(circle at 35% 30%,#565049,#14110c 75%)}.stone.white{background:radial-gradient(circle at 33% 28%,#ffffff 0%,transparent 40%),radial-gradient(circle at 40% 35%,#fdfbf2,#e0d9c5 80%,#cec5ab);border:1px solid #a89e88}.cell.last .stone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:9px;height:9px;border-radius:50%;background:var(--seal);box-shadow:0 0 5px #b3402e8c}.cell.last .stone.black:after{background:var(--seal-2)}.forbidden-mark{position:relative;z-index:1;color:#a52a1a;font-size:15px;font-weight:800;text-shadow:0 1px 1px rgba(255,253,244,.5)}.result{margin-top:12px;padding:15px 17px;border-radius:var(--radius);background:var(--paper),linear-gradient(180deg,#5b7a5221,#5b7a520d);border:1px solid rgba(91,122,82,.4);box-shadow:0 4px 14px #5b7a5224;animation:result-in .4s ease-out both}@keyframes result-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.result h3{font-size:1.18rem}.result h3:before{background:linear-gradient(180deg,#86a57c,var(--green))}.actions{margin-top:10px}.game{width:fit-content}@media(prefers-reduced-motion:reduce){.stone,.result,.clocks .active{animation:none}.card,button,.clocks span{transition:none}}