@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#352e48;background:#f7f5fa;--purple:#a99ae9;--pink:#efabbc;--mint:#a4d7c8;--yellow:#ead18c;--blue:#a3cce7}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #aa93e8;outline-offset:4px}.ambient{position:fixed;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(90px)}.ambient-one{width:450px;height:450px;background:#e8e1fb70;right:0;top:0}.ambient-two{width:320px;height:320px;background:#f4e9e770;left:-100px;bottom:0}.home-shell{max-width:1160px;margin:auto;padding:0 64px}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e1ed}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:1.9px}.brand-grid{display:grid;grid-template-columns:repeat(2,9px);gap:3px;transform:rotate(-6deg)}.brand-grid i{height:9px;background:#ab95df;border-radius:3px}.brand-grid i:nth-child(2){background:#e7a5b7}.brand-grid i:nth-child(3){background:#a6d0c2}.prototype{font-size:8px;letter-spacing:1.7px;color:#b2a8be;background:#eeeaf3;padding:7px 10px;border-radius:5px}.main-layout{display:grid;grid-template-columns:1fr 410px;gap:60px;align-items:center;padding:48px 0 58px}.eyebrow{font-size:9px;letter-spacing:2px;color:#a393b7;font-weight:700}.editorial h1{font-size:76px;line-height:1.06;letter-spacing:-4px;font-weight:900;margin:26px 0 32px}.editorial h1 span{color:#8e76c7}.tagline{font-size:22px;line-height:1.65;font-weight:700;letter-spacing:-.7px}.description{font-size:12px;color:#a39aaa;line-height:2;margin-top:18px}.desktop-note{display:flex;gap:16px;align-items:center;margin-top:43px}.desktop-note>span{font-size:11px;font-family:monospace;color:#a49ab5;border:1px solid #dbd3e6;border-radius:50%;width:34px;height:34px;display:grid;place-items:center}.desktop-note p{font-size:10px;color:#a99db2;line-height:1.9}.menu-card{background:#fff;border:1px solid #eee8f5;border-radius:28px;padding:23px 28px 21px;box-shadow:0 24px 65px #69517e0b}.card-top{display:flex;justify-content:space-between;align-items:center}.game-label{font-size:12px;letter-spacing:.4px;color:#b1a0c0;font-weight:600}.help-icon{border:1px solid #e5ddec;background:none;color:#ac9cb9;border-radius:50%;width:26px;height:26px;font-size:12px}.block-art{height:214px;position:relative;display:grid;place-items:center;margin-top:5px}.art-grid{display:grid;grid-template-columns:repeat(4,38px);gap:5px;transform:rotate(-12deg);padding:16px;background:linear-gradient(135deg,#f7f3fc,#f5effb);border-radius:24px;box-shadow:0 9px 0 #f0e9f7,0 19px 25px #b9a2d118}.art-grid i{height:38px;border-radius:12px;box-shadow:inset 0 3px 1px #ffffff70,inset 0 -3px 1px #00000008;position:relative}.art-grid i:after{content:'';position:absolute;width:8px;height:4px;left:9px;top:8px;background:#ffffff70;border-radius:50%;transform:rotate(-25deg)}.purple{background:var(--purple)}.pink{background:var(--pink)}.mint{background:var(--mint)}.yellow{background:var(--yellow)}.blue{background:var(--blue)}.art-grid i:nth-child(4){transform:translate(9px,-6px) rotate(9deg)}.art-grid i:nth-child(13){transform:translate(-7px,4px) rotate(-8deg)}.art-spark{position:absolute;color:#c5b1e4}.spark-one{font-size:29px;right:32px;top:33px}.spark-two{font-size:27px;left:23px;bottom:36px;color:#ddc37c}.floating-score{position:absolute;right:4px;bottom:28px;background:#fffaf0;color:#b49b58;font-size:18px;font-weight:800;transform:rotate(7deg);padding:9px 15px;border-radius:12px;box-shadow:0 6px 16px #a79b7910}.floating-score small{display:block;font-size:6px;letter-spacing:1px;margin-top:1px}.menu-card h2{text-align:center;font-size:24px;letter-spacing:-1px;margin:10px 0 6px}.card-description{text-align:center;font-size:11px;color:#b0a5b9;margin:0}.rule-chips{display:flex;justify-content:center;gap:7px;margin:18px 0 25px;font-size:8px;color:#a49aac}.rule-chips span{background:#f7f4fa;border-radius:30px;padding:7px 9px}.rule-chips b{font-size:10px;color:#8d7b9f;margin-right:2px}.mode-switch{display:flex;gap:4px;background:#f5f2f8;padding:4px;border-radius:10px}.mode-switch button{border:0;background:none;flex:1;color:#b2a5be;font-size:11px;font-weight:600;padding:9px 5px;border-radius:7px}.mode-switch button[aria-pressed=true]{background:white;color:#8c70b3;box-shadow:0 2px 6px #8f6caa0c}.mode-description{font-size:9px;color:#b2a7bd;text-align:center;margin:10px 0 13px;min-height:16px}.board-choice{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;color:#ad9fba;font-size:9px}.board-choice[hidden]{display:none}.board-choice select{font-size:10px;border:1px solid #e9e2f0;border-radius:7px;background:white;color:#9a88ad;padding:7px}.play-button{display:flex;justify-content:space-between;align-items:center;background:#9076cc;border:1px solid #8b71c6;box-shadow:0 5px 0 #7960b3,0 10px 17px #8e6dbc20;border-radius:12px;padding:16px 19px;color:white;text-decoration:none;font-size:13px;font-weight:700;transition:transform .1s}.play-button:hover{background:#896ec5}.play-button:active{transform:translateY(3px);box-shadow:0 2px 0 #7960b3}.arrow{font-size:18px;font-weight:400}.guide-button{display:block;width:100%;padding:15px;background:none;border:0;color:#a091b0;font-size:10px;margin-top:8px}.guide-button span{font-size:13px;margin-right:5px}.menu-bottom{display:flex;justify-content:center;align-items:center;gap:5px;padding-top:13px;border-top:1px solid #f0ebf5;font-size:7px;color:#bcb2c5}.status-dot{width:4px;height:4px;background:#b1cebd;border-radius:50%}footer{display:flex;justify-content:space-between;padding:22px 0;border-top:1px solid #e6e1ed;color:#b7adbf;font-size:8px}footer span:last-child{font-size:7px;letter-spacing:1.5px}dialog{border:1px solid #e7deef;border-radius:24px;padding:27px;width:430px;max-width:calc(100% - 32px);max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #30213f25;color:#493c5b}dialog::backdrop{background:#34254365;backdrop-filter:blur(6px)}.guide-top{display:flex;justify-content:space-between;align-items:center}.guide-top button{background:#f4f0f9;border:0;border-radius:50%;width:28px;height:28px;color:#a18bb6;font-size:12px}.guide-progress{display:flex;gap:5px;margin:21px 0 26px}.guide-progress i{width:26px;height:3px;background:#ece5f3;border-radius:5px}.guide-progress i.active{background:#a087cc}.guide-step h2{font-size:24px;letter-spacing:-.8px;line-height:1.5;margin:0 0 12px}.guide-step em{color:#9a7ec5;font-style:normal}.guide-step>p{font-size:11px;color:#a89ab6;line-height:1.9;margin-bottom:21px}.guide-step b{color:#8f7c9f}.tutorial-label{display:flex;justify-content:space-between;font-size:9px;color:#b3a3c0;margin:0 38px 8px}.tutorial-label button{background:none;border:0;color:#b3a3c0;font-size:9px}#tutorial-board{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:220px;aspect-ratio:1;margin:auto;background:#f4f0f9;padding:10px;border-radius:14px}.tutorial-block{border:0;border-radius:12px;background:var(--color);box-shadow:inset 0 2px 1px #ffffff66,inset 0 -2px 0 #00000008;color:#ffffff70;font-size:10px}.tutorial-block.empty{background:none;box-shadow:none;cursor:default}.guide-step .tutorial-message{font-size:10px;text-align:center;min-height:34px;line-height:1.7;margin:12px 0 0;color:#9b84b5}.gravity-illustration{display:flex;gap:23px;align-items:center;justify-content:center;background:#f7f3fb;border-radius:15px;padding:26px 14px;margin:25px 0;color:#c7b3dc}.mini-before,.mini-after{display:grid;grid-template-columns:repeat(3,25px);gap:4px}.gravity-illustration i{height:25px;border-radius:7px;box-shadow:inset 0 2px 0 #ffffff55}.gravity-illustration i.empty{border:1px dashed #ded2e8;box-shadow:none}.tip-card{background:#faf8fc;border:1px solid #eee8f4;border-radius:12px;padding:16px;margin:0 0 20px;font-size:11px}.tip-card p{font-size:10px;line-height:1.9;color:#ab9db9;margin:8px 0 0}.scoring-example{display:flex;gap:6px;margin:20px 0}.scoring-example span{flex:1;text-align:center;padding:12px 4px;border:1px solid #eee6f4;border-radius:10px;font-size:9px;color:#b2a4be}.scoring-example b{display:block;font-size:17px;margin-top:4px;color:#a28ac2}.finish-rules{display:grid;gap:17px;margin:20px 0}.finish-rules>div{display:flex;align-items:center;gap:12px}.finish-rules>div>span{font-size:21px;color:#b59dce;width:22px;text-align:center}.finish-rules p{margin:0;color:#afa0bc;font-size:10px;line-height:1.9}.finish-rules b{display:block;font-size:11px;color:#857294}.rules-note{display:block;font-size:8px;color:#b7acbf;line-height:1.7}.guide-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:25px;padding-top:18px;border-top:1px solid #eee7f4}.guide-navigation button,.guide-navigation a{border:0;background:#f2ecf9;padding:10px 13px;border-radius:8px;color:#a085bc;font-size:10px;text-decoration:none}.guide-navigation button:disabled{opacity:.35}.guide-navigation span{font-size:9px;color:#c3b7cc}.guide-navigation a{background:#967bc9;color:white}.guide-step[hidden],.guide-navigation [hidden]{display:none}@media(max-width:900px){.home-shell{padding:0 32px}.main-layout{gap:35px;grid-template-columns:1fr 380px}.editorial h1{font-size:60px}.editorial .eyebrow{font-size:7px}.menu-card{padding:23px}.tagline{font-size:20px}}@media(max-width:700px){.home-shell{padding:0 20px;max-width:470px}.topbar{height:72px}.brand{font-size:9px;letter-spacing:1.4px}.prototype{font-size:6px;letter-spacing:1px;padding:6px}.main-layout{display:block;padding:22px 0}.editorial{display:none}.menu-card{padding:20px 25px 18px;border-radius:24px}.block-art{height:185px}.art-grid{grid-template-columns:repeat(4,32px);padding:13px;border-radius:20px}.art-grid i{height:32px;border-radius:10px}.floating-score{right:6px;bottom:18px;font-size:16px}.menu-card h2{font-size:23px}.card-top .game-label{font-size:16px;font-weight:800;color:#8a73a2}.rule-chips{margin:15px 0 20px}footer{font-size:7px;padding:18px 0}footer span:last-child{font-size:6px;letter-spacing:.6px}dialog{padding:22px}.guide-step h2{font-size:22px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}