@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#070912;--panel:#0d132c;--muted:#7f89a5;--orange:#ff601f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f8f9ff;font-family:'Noto Sans KR',sans-serif;font-size:14px}button,a,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:218px;background:#0c1129;border-right:1px solid #1b2037;padding:26px 0;z-index:2}.logo{display:block;margin:0 24px 30px;color:white;text-decoration:none;font-size:29px;font-weight:900;letter-spacing:-2px}.logo span{color:#ffce43}.logo i{display:block;font-style:normal;letter-spacing:1.3px;font-size:7px;color:#7c87ab;margin-top:7px}.category{background:var(--orange);padding:14px 21px;border-radius:0 28px 28px 0;margin-right:10px;font-size:13px;font-weight:900;letter-spacing:1px}nav{padding:14px 10px}nav button{display:flex;gap:15px;align-items:center;width:100%;background:none;border:0;text-align:left;color:#36a7ff;padding:14px 15px;border-radius:9px;font-weight:700;margin-bottom:5px}nav button.active{background:#1b244b;color:white}nav button:hover{background:#192140}.aside-bottom{position:absolute;bottom:28px;left:25px;font-size:11px;color:#9ba6c5;line-height:2.2}.aside-bottom small{color:#596581}.online{display:inline-block;width:6px;height:6px;background:#4bd6a3;border-radius:50%;margin-right:5px}main{margin-left:218px;padding:33px 30px 0;max-width:1550px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:9px;letter-spacing:2.6px;color:#8996b7;font-weight:700}h1{font-size:25px;letter-spacing:-1px;margin:8px 0 0;font-weight:800}h1 em{font-style:normal;color:#b3bbd1}.header-tag{font-size:9px;letter-spacing:1.4px;color:#8390ad;border:1px solid #2a3044;border-radius:20px;padding:9px 13px}.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px;gap:10px}.card{position:relative;overflow:hidden;border:1px solid #ffffff12;border-radius:12px;padding:0;display:block;text-align:left;width:100%;isolation:isolate;transition:transform .22s,filter .22s;background:#32334c;color:white}.card:hover{transform:translateY(-4px);filter:brightness(1.12)}.card:focus-visible{outline:3px solid #ffce43;outline-offset:3px}.card.big{grid-row:span 2}.art{position:absolute;inset:0;overflow:hidden}.wood{background:linear-gradient(115deg,#f2d18c,#ddb469)}.wood:before{content:'';position:absolute;inset:14px 18px;background-image:linear-gradient(#624c3b88 1px,transparent 1px),linear-gradient(90deg,#624c3b88 1px,transparent 1px);background-size:8% 8%;border:1px solid #765d3e80}.baduk:before{background-size:5.55% 5.55%}.star{position:absolute;background:#6d5234;width:5px;height:5px;border-radius:50%}.stone{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#414754,#10121d 68%);box-shadow:2px 4px 6px #0005}.stone.white{background:radial-gradient(circle at 30% 25%,#fff,#e4e6df 80%)}.big .stone{width:7%}.reversi{background:#26966f}.reversi:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#154b4380 1px,transparent 1px),linear-gradient(90deg,#154b4380 1px,transparent 1px);background-size:12.5% 12.5%}.reversi .stone{width:11%}.tic{background:linear-gradient(125deg,#f781a0,#6b3b59 80%)}.tic-grid{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-8deg);width:106px;height:106px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.tic-grid span{display:grid;place-items:center;font-size:25px;font-weight:900;border-right:2px solid #ffc2ce50;border-bottom:2px solid #ffc2ce50;color:#ffd2dd}.puzzle{background:linear-gradient(125deg,#b8a2f5,#56507f)}.tiles{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);width:105px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.tiles span{background:#d9d1ff;color:#6550a0;border-radius:4px;text-align:center;line-height:30px;font-size:18px;font-weight:800;box-shadow:0 3px 0 #74629d}.card:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#060914e8);z-index:0}.card-info{position:absolute;bottom:15px;left:16px;right:16px;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:8px}.card-info strong{font-size:16px;display:block}.card-info small{font-size:9px;color:#e0e3ee;display:block;margin-top:3px}.badge{font-size:9px;border:1px solid #ffffff35;background:#090b2270;padding:4px 7px;border-radius:5px;white-space:nowrap}.big .card-info{bottom:23px;left:23px;right:23px}.big .card-info strong{font-size:29px}.big .card-info small{font-size:12px}.top-label{position:absolute;top:18px;left:20px;z-index:1;background:#151a32d9;border-radius:5px;padding:6px 9px;font-size:9px;letter-spacing:1px;color:#ffdb72}section{margin-top:34px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}h2{font-size:17px;letter-spacing:-.5px;margin:0}.section-title>span{font-size:10px;color:var(--muted)}.row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.row .card{height:153px}.solo-wrap{display:grid;grid-template-columns:1fr 2fr;gap:20px}.solo-wrap .row{grid-template-columns:1fr}.note{border:1px solid #252239;border-radius:12px;padding:22px 30px;background:radial-gradient(ellipse at right,#24203a60,transparent)}.note>span{font-size:8px;letter-spacing:2px;color:#a493cc}.note h3{font-size:15px;margin:11px 0 6px}.note p{font-size:11px;color:#9495af;line-height:1.8;margin:0}.bottom-banner{margin-top:36px;padding:23px;display:flex;align-items:center;gap:18px;border-top:1px solid #222639;border-bottom:1px solid #222639}.bottom-banner>span{font-size:35px;color:#ffb14c}.bottom-banner strong{font-size:14px}.bottom-banner p{font-size:10px;color:var(--muted);margin:5px 0}.bottom-banner b{margin-left:auto;color:#ffb14c;font-size:9px;letter-spacing:1px}footer{display:flex;align-items:center;gap:24px;padding:29px 0 32px;color:#616d8b}footer a{font-weight:900;font-size:17px;color:#8b96b2}footer p{font-size:9px;line-height:1.8}footer>span{margin-left:auto;font-size:8px;letter-spacing:1px}dialog{width:min(680px,96vw);border:1px solid #38415f;border-radius:18px;background:#11172b;color:white;padding:25px;max-height:95vh}dialog::backdrop{background:#02040cdd;backdrop-filter:blur(7px)}.game-top{display:flex;align-items:center;justify-content:space-between}.game-top h2{font-size:25px;margin:5px 0 15px}.game-top button,.controls button{background:#252e49;color:white;border:0;border-radius:6px;padding:8px 12px}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px}.controls label{display:flex;align-items:center;gap:6px}select{padding:7px;background:#252e49;border:0;border-radius:5px;color:white}#status{color:#ffda7c;font-size:14px;min-height:22px}#play{display:grid;aspect-ratio:1;width:min(100%,520px);margin:auto;position:relative;background:#e7c17c;padding:13px;gap:0}#play button{border:0;padding:0;position:relative;background:transparent;min-width:0;min-height:0}#play.grid-board button{background-image:linear-gradient(transparent calc(50% - .5px),#876b42 calc(50% - .5px),#876b42 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#876b42 calc(50% - .5px),#876b42 calc(50% + .5px),transparent calc(50% + .5px))}#play button .disc{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#424756,#10121b 70%);box-shadow:1px 2px 3px #0005}#play button .disc.white{background:radial-gradient(circle at 30% 25%,white,#dfe5e2)}#play.reversi-board{background:#238c66;gap:1px}#play.reversi-board button{box-shadow:0 0 0 1px #18533f}#play button.valid:after{content:'';position:absolute;inset:40%;border-radius:50%;background:#ffd865}#play.tic-board{background:#40283f;gap:8px}#play.tic-board button{background:#69415d;color:#ffd0df;font-size:clamp(35px,7vw,70px);border-radius:7px}#play.puzzle-board{background:#373051;gap:8px}#play.puzzle-board button{background:#c5b5fa;color:#4c3c7c;font-weight:800;font-size:32px;border-radius:7px}#play.puzzle-board button.empty{background:#29243f}#rules{font-size:11px;line-height:1.9;color:#9ba7c1;margin-bottom:0}@media(min-width:1450px){.mosaic{grid-template-rows:220px 220px}}@media(max-width:1000px){aside{width:180px}main{margin-left:180px;padding:25px 20px}.header-tag{display:none}.mosaic{grid-template-rows:160px 160px}.card-info{left:10px;right:10px}.card-info small{display:none}.row .card{height:130px}}@media(max-width:700px){aside{position:sticky;top:0;width:100%;padding:12px 15px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #252b42}.logo{font-size:22px;margin:0;white-space:nowrap}.logo i,.category,.aside-bottom{display:none}nav{display:flex;padding:0;overflow:auto;margin-left:auto}nav button{width:auto;padding:8px;font-size:12px;margin:0;gap:5px;white-space:nowrap}nav button span{display:none}main{margin:0;padding:23px 15px 0}h1{font-size:22px}.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:260px 155px 155px}.card.big{grid-column:span 2;grid-row:span 1}.row{grid-template-columns:repeat(2,1fr)}.row .card{height:155px}.section-title>span{font-size:9px}.solo-wrap{grid-template-columns:1fr 1fr;gap:10px}.note{padding:18px 14px}.note h3{font-size:13px}.note p{font-size:10px}.bottom-banner{padding:19px 5px}.bottom-banner b{display:none}footer{gap:15px}footer>span{display:none}dialog{padding:18px}}