@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root{--ink:#f8f2ff;--muted:#b9afd0;--deep:#110b25;--panel:#1d1538;--panel2:#241946;--violet:#8e78da;--purple:#b798ff;--aqua:#6ce6e1;--gold:#ffd789;--rose:#ff9fc6;--line:rgba(220,205,255,.16);--glass:rgba(18,11,40,.82);--shadow:0 28px 70px rgba(4,2,18,.48)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--deep);color:var(--ink);font-family:'Noto Sans KR',sans-serif}
body{overflow-x:hidden;background:radial-gradient(circle at 50% -20%,#42317b 0,#17102f 43%,#0e091e 100%)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.is-hidden{display:none!important}.eyebrow{margin:0;color:var(--aqua);font-size:10px;font-weight:800;letter-spacing:.25em}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.ambient i{position:absolute;width:3px;height:3px;border-radius:50%;background:white;box-shadow:0 0 14px 3px rgba(167,145,255,.5);animation:drift 9s ease-in-out infinite}.ambient i:nth-child(1){left:9%;top:20%}.ambient i:nth-child(2){left:83%;top:13%;animation-delay:-2s}.ambient i:nth-child(3){left:72%;top:71%;animation-delay:-6s}.ambient i:nth-child(4){left:23%;top:82%;animation-delay:-4s}.ambient i:nth-child(5){left:52%;top:42%;animation-delay:-8s}@keyframes drift{50%{transform:translateY(-24px) scale(1.8);opacity:.35}}

.splash{position:fixed;inset:0;z-index:10;background:url('assets/moonlit-sudoku-keyart-v1.png') center/cover no-repeat;display:grid;place-items:center;transition:opacity .8s,transform .8s}.splash.leave{opacity:0;transform:scale(1.025);pointer-events:none}.splash-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,7,28,.94) 0,rgba(16,9,37,.72) 28%,rgba(13,8,31,.12) 57%,rgba(10,6,26,.4) 100%),linear-gradient(0deg,rgba(9,5,24,.8),transparent 45%)}
.splash-copy{position:relative;width:min(1280px,calc(100% - 72px));padding-left:3%;margin:auto}.moon-mark{margin:30px 0 5px;color:var(--gold);font-size:38px;text-shadow:0 0 30px rgba(255,215,137,.7)}.splash h1{font-family:'Gowun Batang',serif;margin:0;font-size:clamp(52px,6vw,88px);line-height:.96;letter-spacing:-.07em;text-shadow:0 5px 22px #080314}.splash h1 em{font-style:normal;color:var(--gold)}.splash-lead{font-family:'Gowun Batang',serif;font-size:17px;line-height:1.8;color:#ddd3ed;margin:28px 0}.primary-btn{min-width:250px;padding:17px 19px 17px 26px;border-radius:12px;background:linear-gradient(135deg,#f1d596,#caa75c);color:#241629;font-weight:800;display:inline-flex;align-items:center;justify-content:space-between;box-shadow:0 10px 35px rgba(241,213,150,.24);transition:.2s}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(241,213,150,.35)}.primary-btn b{font-size:18px}.splash-copy>small{display:block;margin:15px 3px;color:#968ba9;font-size:10px}

.app{position:relative;z-index:1;min-height:100vh}.topbar{height:76px;padding:0 max(24px,4vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(13,8,30,.76);backdrop-filter:blur(22px);position:relative;z-index:4}.brand{display:flex;align-items:center;gap:11px;background:none;padding:0}.brand-moon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,215,137,.38);border-radius:50%;color:var(--gold);font-size:23px}.brand strong,.brand small{display:block;text-align:left}.brand strong{font-family:'Gowun Batang',serif;font-size:16px}.brand small{font-size:7px;letter-spacing:.19em;color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:8px}.icon-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#9187aa}.icon-btn.active,.icon-btn:hover{color:var(--gold);border-color:rgba(255,215,137,.35);background:rgba(255,215,137,.08)}

.game-shell{width:min(1430px,100%);min-height:calc(100vh - 76px);margin:auto;display:grid;grid-template-columns:minmax(270px,36%) 1fr}.story-panel{position:relative;min-height:calc(100vh - 76px);overflow:hidden;border-right:1px solid var(--line)}.story-art{position:absolute;inset:0;background:url('assets/moonlit-sudoku-keyart-v1.png') 25% center/cover no-repeat;filter:saturate(.82)}.story-gradient{position:absolute;inset:0;background:linear-gradient(0deg,#100922 1%,rgba(15,9,33,.75) 25%,rgba(15,9,33,.04) 67%),linear-gradient(90deg,transparent 70%,#17102f)}.story-content{position:absolute;left:clamp(24px,4vw,60px);right:clamp(24px,4vw,60px);bottom:45px}.story-content h2{font-family:'Gowun Batang',serif;font-size:clamp(25px,2.2vw,35px);margin:9px 0}.story-content>p:not(.eyebrow){color:#c7bdd8;line-height:1.72;font-family:'Gowun Batang',serif;font-size:13px;min-height:45px}.guide-roster{display:flex;gap:9px;margin-top:18px}.guide{width:48px;height:48px;border-radius:50%;padding:2px;background:#2d214c;border:1px solid rgba(255,255,255,.18);overflow:hidden;transition:.2s}.guide img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(.7)}.guide.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,137,.14),0 0 25px rgba(255,215,137,.25);transform:translateY(-4px)}.guide.active img{filter:none}

.play-panel{padding:clamp(28px,4vh,48px) clamp(25px,5vw,74px) 32px;max-width:930px;width:100%;margin:auto}.game-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.game-head h2{font-family:'Gowun Batang',serif;font-size:clamp(22px,2.5vw,32px);margin:7px 0 0}.game-stats{display:flex;gap:24px;align-items:flex-end}.game-stats>div{display:flex;flex-direction:column;gap:3px}.game-stats small{font-size:9px;color:#8f85a5;letter-spacing:.08em}.game-stats button,.game-stats strong{background:none;padding:0;font-size:13px;font-weight:700;white-space:nowrap}.game-stats button{color:var(--gold)}#mistakes{display:flex;gap:4px;height:17px;align-items:center}#mistakes i{width:6px;height:6px;border-radius:50%;background:#504763;border:1px solid #716782}#mistakes i.used{background:var(--rose);box-shadow:0 0 8px rgba(255,159,198,.7)}
.progress-track{height:2px;background:rgba(255,255,255,.08);margin-bottom:16px;border-radius:3px}.progress-track span{height:100%;display:block;width:0;background:linear-gradient(90deg,var(--violet),var(--aqua));box-shadow:0 0 10px var(--aqua);transition:width .4s}
.board-wrap{position:relative;width:min(100%,600px);margin:auto}.sudoku-board{aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);background:rgba(25,17,50,.9);border:2px solid rgba(255,215,137,.66);border-radius:8px;overflow:hidden;box-shadow:0 22px 65px rgba(4,2,17,.45),0 0 40px rgba(121,93,205,.1)}.cell{position:relative;background:rgba(255,255,255,.012);border:0 solid rgba(200,187,234,.15);border-right-width:1px;border-bottom-width:1px;display:grid;place-items:center;font-size:clamp(17px,2.45vw,27px);font-weight:600;color:#eee7ff;transition:background .14s,color .14s;user-select:none}.cell:nth-child(9n){border-right:0}.cell:nth-last-child(-n+9){border-bottom:0}.cell.box-right{border-right:2px solid rgba(232,211,255,.46)}.cell.box-bottom{border-bottom:2px solid rgba(232,211,255,.46)}.cell.given{color:#eee8d3;font-weight:800}.cell.user{color:var(--aqua);text-shadow:0 0 12px rgba(108,230,225,.38)}.cell.related{background:rgba(128,104,196,.11)}.cell.same{background:rgba(108,230,225,.11);color:#b9fffb}.cell.selected{background:rgba(255,215,137,.2);box-shadow:inset 0 0 0 2px rgba(255,215,137,.56)}.cell.error{color:#ff8aaf;animation:shake .27s}.cell.hinted{color:var(--gold);animation:reveal .6s}.cell.complete-flash{animation:cellGlow 1.1s ease}.notes{position:absolute;inset:4px;display:grid;grid-template-columns:repeat(3,1fr);font-size:clamp(6px,1vw,10px);font-weight:500;color:#9c91b6;line-height:1}.notes span{display:grid;place-items:center}.pause-cover{position:absolute;inset:0;border-radius:8px;background:rgba(15,9,33,.95);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}.pause-cover>span{font-size:45px;color:var(--gold)}.pause-cover strong{font-family:'Gowun Batang',serif}.small-btn{padding:9px 18px;border-radius:20px;background:rgba(255,215,137,.12);color:var(--gold);border:1px solid rgba(255,215,137,.35)}
.cell-pad{position:absolute;z-index:8;width:168px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:16px;background:rgba(27,18,54,.97);border:1px solid rgba(255,215,137,.58);box-shadow:0 18px 50px rgba(3,1,13,.72),0 0 28px rgba(142,120,218,.28);backdrop-filter:blur(16px);transform-origin:center;animation:padIn .16s ease-out}.cell-pad::before{content:'숫자 선택';grid-column:1/-1;text-align:center;color:var(--gold);font-size:9px;letter-spacing:.15em;margin:0 0 2px}.cell-pad button{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);color:#f3edff;font-size:20px;font-weight:800;transition:.12s}.cell-pad button:hover:not(:disabled),.cell-pad button:active:not(:disabled){background:linear-gradient(145deg,rgba(108,230,225,.28),rgba(142,120,218,.32));border-color:var(--aqua);color:white;transform:scale(1.06)}.cell-pad button:disabled{opacity:.2;cursor:default}.cell-pad button.note-candidate{color:var(--aqua)}
.number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;width:min(100%,600px);margin:16px auto 12px}.number-pad button{height:44px;border-radius:9px;background:rgba(255,255,255,.055);border:1px solid var(--line);font-size:18px;font-weight:700;color:#d9d0ed;transition:.15s}.number-pad button:hover:not(:disabled){background:rgba(108,230,225,.11);border-color:rgba(108,230,225,.38);color:var(--aqua);transform:translateY(-2px)}.number-pad button:disabled{opacity:.22;cursor:default}.number-pad small{display:block;font-size:7px;color:#847a98;font-weight:400}.tool-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:min(100%,600px);margin:auto}.tool-row button{height:52px;border-radius:10px;background:transparent;color:#a49ab8;display:grid;grid-template-columns:1fr;place-items:center;align-content:center;position:relative}.tool-row button:hover,.tool-row button.active{background:rgba(255,255,255,.055);color:var(--gold)}.tool-row span{font-size:18px;line-height:1}.tool-row small{font-size:9px;margin-top:5px}.tool-row b{position:absolute;right:8px;top:5px;font-size:7px;background:#514272;border-radius:9px;padding:2px 5px;color:#d7c9ee}.tool-row button.active b{background:var(--gold);color:#26172e}

.popover{position:fixed;z-index:20;top:112px;right:max(42px,7vw);width:210px;background:#251a43;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);border-radius:14px;padding:8px}.popover button{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;padding:11px;border-radius:8px}.popover button:hover,.popover button.selected{background:rgba(255,215,137,.1);color:var(--gold)}.popover small{font-size:9px;color:#9085a6}.modal-backdrop{position:fixed;inset:0;z-index:30;background:rgba(5,2,14,.72);backdrop-filter:blur(8px)}.modal{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;background:linear-gradient(145deg,#281c49,#17102f);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:38px;box-shadow:var(--shadow)}.modal h2{font-family:'Gowun Batang',serif;font-size:28px;margin:8px 0 22px}.modal-close{position:absolute;right:18px;top:14px;background:none;color:#9e93b3;font-size:28px}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rule-grid article{padding:18px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.rule-grid b{color:var(--aqua);font-size:10px}.rule-grid strong{display:block;margin:10px 0 7px;font-size:13px}.rule-grid p,.modal>p:not(.eyebrow){color:var(--muted);font-size:11px;line-height:1.7}.tip{padding:13px 16px;background:rgba(108,230,225,.07);border-radius:9px}.primary-btn.compact{min-width:180px;padding:12px 16px;margin-top:10px}.compact-modal{width:min(480px,calc(100% - 32px));text-align:center}.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.ghost-btn{background:rgba(255,255,255,.07);padding:12px 18px;border-radius:10px;color:#bdb2d0}.result-modal{text-align:center;width:min(470px,calc(100% - 32px))}.result-stars{font-size:30px;letter-spacing:.25em;color:var(--gold);text-shadow:0 0 20px rgba(255,215,137,.6)}.result-stats{display:flex;justify-content:center;gap:45px;margin:25px 0}.result-stats small,.result-stats strong{display:block}.result-stats small{font-size:9px;color:#8e83a2}.result-stats strong{font-size:22px;color:var(--aqua);margin-top:4px}.toast{position:fixed;z-index:50;left:50%;bottom:28px;transform:translate(-50%,25px);opacity:0;padding:11px 18px;border-radius:28px;background:#30224e;border:1px solid rgba(255,255,255,.15);box-shadow:var(--shadow);font-size:11px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes reveal{0%{transform:scale(.5);filter:brightness(3)}60%{transform:scale(1.15)}}@keyframes cellGlow{50%{background:rgba(255,215,137,.38);color:white;text-shadow:0 0 16px var(--gold)}}@keyframes padIn{from{opacity:0;transform:scale(.82) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}

@media(max-width:900px){.game-shell{grid-template-columns:1fr}.story-panel{min-height:210px;border-right:0;border-bottom:1px solid var(--line)}.story-art{background-position:center 45%}.story-gradient{background:linear-gradient(0deg,#17102f 0,rgba(15,9,33,.25) 90%)}.story-content{bottom:20px}.story-content>p:not(.eyebrow){display:none}.guide-roster{position:absolute;right:0;bottom:0}.guide{width:41px;height:41px}.play-panel{padding-top:26px}.game-head{align-items:flex-start}.game-stats{gap:14px}}
@media(max-width:580px){body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}.topbar{height:58px;padding:0 12px;position:sticky;top:0}.brand-moon{width:34px;height:34px}.game-shell{min-height:calc(100vh - 58px)}.story-panel{min-height:112px}.story-content{left:13px;right:13px;bottom:10px}.story-content h2{font-size:17px;margin-bottom:0}.guide-roster{gap:5px}.guide{width:38px;height:38px}.play-panel{padding:14px 8px calc(94px + env(safe-area-inset-bottom))}.game-head{margin:0 4px 10px}.game-head .eyebrow{display:none}.game-head h2{font-size:18px;margin:0}.game-stats{gap:11px}.game-stats>div:first-child{display:none}.game-stats strong{font-size:12px}.progress-track{margin-bottom:10px}.board-wrap{width:min(100%,calc(100vh - 300px));min-width:290px}.cell{font-size:clamp(16px,6vw,23px);touch-action:manipulation}.number-pad{display:none}.cell-pad{position:fixed;width:180px;padding:9px;gap:7px}.cell-pad button{font-size:22px;min-height:46px}.tool-row{position:fixed;z-index:18;left:0;right:0;bottom:0;width:100%;max-width:none;gap:4px;margin:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(21,13,44,.96),rgba(12,7,28,.99));border-top:1px solid rgba(255,255,255,.15);box-shadow:0 -12px 32px rgba(4,2,15,.45);backdrop-filter:blur(18px)}.tool-row button{height:62px;border-radius:12px;background:rgba(255,255,255,.04)}.tool-row span{font-size:23px}.tool-row small{font-size:10px;margin-top:6px;font-weight:600}.tool-row b{font-size:8px;right:7px;top:6px}.splash{background-position:48% center}.splash-shade{background:linear-gradient(0deg,rgba(10,5,25,.97) 0,rgba(12,7,28,.68) 65%,rgba(12,7,28,.2))}.splash-copy{align-self:end;width:100%;padding:0 25px calc(8vh + env(safe-area-inset-bottom));text-align:center}.splash h1{font-size:50px}.splash-lead{font-size:14px}.splash-copy>small{color:#c0b5ce}.rule-grid{grid-template-columns:1fr}.modal{padding:28px 20px}.popover{top:66px;right:12px}.story-content .eyebrow{display:none}}
@media(max-width:380px){.story-panel{min-height:96px}.guide{width:34px;height:34px}.play-panel{padding-left:5px;padding-right:5px}.board-wrap{min-width:0;width:100%}.tool-row{padding-left:4px;padding-right:4px}.tool-row button{height:58px}.tool-row small{font-size:9px}.cell-pad{width:174px}}
@media(max-height:620px) and (orientation:landscape){.topbar,.story-panel{display:none}.game-shell{min-height:100vh;grid-template-columns:1fr}.play-panel{display:grid;grid-template-columns:min(70vh,52vw) minmax(250px,1fr);grid-template-rows:auto 1fr;padding:8px 90px 8px 10px;gap:8px 14px;max-width:none}.game-head{grid-column:2;margin:0}.progress-track{display:none}.board-wrap{grid-column:1;grid-row:1/3;width:min(96vh,52vw)}.number-pad{display:grid;grid-column:2;grid-template-columns:repeat(3,1fr);margin:0;width:100%;align-self:start}.number-pad button{height:44px}.tool-row{position:fixed;right:0;left:auto;top:0;bottom:0;width:78px;grid-template-columns:1fr;grid-template-rows:repeat(5,1fr);padding:5px;background:#120c29}.tool-row button{height:auto}.cell-pad{position:fixed}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}