@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--green:#41664b;--ink:#243b2e;--muted:#788177;--paper:#f8f9f4;--line:#e2e7de}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:'Noto Sans KR',sans-serif;color:var(--ink);font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:white;border-radius:8px;padding:10px 15px;transition:background .15s}button:hover{background:#edf2e8}button:focus-visible,a:focus-visible{outline:3px solid #96b369;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{max-width:1180px;margin:auto;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{text-decoration:none;color:inherit}.brand{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:1px}.brand b{font-weight:800}.logo{background:var(--green);color:white;font-size:27px;width:39px;height:39px;text-align:center;border-radius:10px;line-height:36px}.home{font-size:11px;letter-spacing:1px;color:var(--muted)}main{max-width:1120px;padding:0 30px;margin:auto}.intro{padding:48px 0 36px}.eyebrow,.section-label{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--green)}h1{font-size:37px;letter-spacing:-1.8px;margin:12px 0 13px;line-height:1.4}h1 span{color:#91a76b}.intro p,.guide p{color:var(--muted);line-height:1.8;margin:0}.mobile{display:none}.layout{display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:start}aside{padding-top:14px}h2{font-size:20px;letter-spacing:-.6px;margin:8px 0 21px}.sizes{display:flex;gap:6px;margin-bottom:28px}.sizes button{flex:1;padding:12px 4px;font-weight:700;font-size:13px}.sizes small{display:block;margin-top:6px;font-size:10px;font-weight:400;color:var(--muted)}.sizes button.active{background:var(--green);color:white;border-color:var(--green)}.sizes button.active small{color:#d8e2d1}.list-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-bottom:10px}.puzzle-item{display:flex;width:100%;align-items:center;text-align:left;padding:13px 12px;border:0;margin-bottom:5px;background:transparent;gap:12px}.puzzle-item.active{background:#e9efdf}.puzzle-item .num{font-size:12px;color:var(--muted)}.puzzle-item strong{font-size:13px;font-weight:500;flex:1}.puzzle-item .badge{font-size:10px;color:var(--green)}.save-note{display:flex;gap:10px;border-top:1px solid var(--line);margin-top:21px;padding-top:22px;font-size:11px}.save-note small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.game{background:white;border:1px solid var(--line);border-radius:18px;padding:25px 32px 15px;box-shadow:0 8px 30px #2b493507}.game-head{display:flex;justify-content:space-between;align-items:center}.game-head h2{margin-bottom:16px;font-size:23px}.timer{display:grid;grid-template-columns:auto 29px;gap:2px 12px;align-items:center}.timer span{font-size:10px;color:var(--muted)}.timer b{font-size:18px;font-variant-numeric:tabular-nums;font-weight:500;grid-row:2}.timer button{grid-column:2;grid-row:1/3;border:0;padding:8px;font-size:18px;background:var(--paper)}.board-area{position:relative;display:flex;justify-content:center;padding:12px 0 23px}#board{display:grid;width:100%;max-width:515px;touch-action:none;user-select:none;--n:10;--cw:20%;grid-template-columns:var(--cw) repeat(var(--n),1fr)}.corner{display:flex;align-items:center;justify-content:center;color:#93a385;font-size:22px;background:#f6f8f1}.col-clue{background:#f6f8f1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:7px;gap:2px;font-size:12px;font-weight:600;min-height:70px}.row-clue{background:#f6f8f1;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding-right:9px;font-size:12px;font-weight:600}.clue.done{color:#b4beb0}.clue.hover{background:#e4ecd7}.cell{border:0;border-right:1px solid #ced8c6;border-bottom:1px solid #ced8c6;border-radius:0;padding:0;aspect-ratio:1;background:#fff;font-size:20px;font-weight:400;line-height:1;min-width:0}.cell:hover,.cell.hover{background:#f0f4e9}.cell.fill{background:var(--green);box-shadow:inset 0 0 0 2px #ffffff14}.cell.cross{color:#9ba596}.cell.error{background:#f9dfd7;color:#ac5036;box-shadow:inset 0 0 0 2px #bd6852}.cell.fill.error{background:#ac5036}.cell.group-right{border-right:2px solid #8c9a81}.cell.group-bottom{border-bottom:2px solid #8c9a81}.cell.edge-left{border-left:2px solid #8c9a81}.cell.edge-top{border-top:2px solid #8c9a81}.game-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:0}.mode{display:flex;background:var(--paper);padding:4px;border-radius:10px;gap:4px}.mode button{padding:8px 15px;border:0;background:transparent;font-size:16px}.mode button span{font-size:12px;margin-left:5px}.mode button.active{background:var(--green);color:white}.progress-text{font-size:11px;color:var(--muted)}.tools{display:flex;justify-content:space-between;gap:6px;margin-top:17px;border-top:1px solid var(--line);padding-top:14px}.tools button{border:0;font-size:11px;padding:8px 4px;white-space:nowrap}#status{text-align:center;font-size:11px;color:var(--muted);line-height:1.6;min-height:35px;margin:12px 0 0}.guide{margin:56px 0 35px;padding-top:30px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:27px}.guide h2{font-size:18px;margin:8px 0}.guide p{font-size:11px}.guide button{border:0;background:none;padding:12px 0;font-size:11px}.step{font-size:10px;color:#9aab7c}h3{font-size:13px;margin:10px 0 8px}.example{display:flex;align-items:center;margin-top:16px;gap:3px}.example b{font-size:11px;margin-right:5px}.example i{height:22px;width:22px;border:1px solid #ccd5c4;font-style:normal;text-align:center;color:#9ba596}.example .filled{background:var(--green);border-color:var(--green)}.shortcut{font-size:10px;line-height:2;margin-top:13px;color:#5e6a5a}.shortcut span{color:#8b9586;margin-left:8px}footer{border-top:1px solid var(--line);padding:23px 0 32px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:.7px}dialog{border:1px solid var(--line);border-radius:20px;padding:35px;max-width:460px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 90px #18332522}dialog::backdrop{background:#25372777;backdrop-filter:blur(3px)}dialog p{font-size:13px;line-height:1.9;color:#72806e}dialog .close{margin:8px 0}#helpDialog>.close{float:right;border:0;padding:0 5px;font-size:25px}dialog .primary{background:var(--green);color:white;border-color:var(--green)}#winDialog{text-align:center}#winDialog button{display:block;width:100%}.win-icon{display:block;font-size:60px;color:#86a04f}#pauseOverlay{position:absolute;inset:0;background:#f7f9f3f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;border-radius:8px}#pauseOverlay[hidden]{display:none}@media(min-width:900px){#board.big .col-clue,#board.big .row-clue{font-size:11px}}@media(max-width:850px){.layout{grid-template-columns:210px 1fr;gap:18px}.game{padding:22px 20px}.guide{grid-template-columns:repeat(2,1fr)}.col-clue,.row-clue{font-size:10px}.row-clue{gap:3px;padding-right:4px}.cell{font-size:16px}}@media(max-width:620px){header{padding:18px 20px}.brand{font-size:10px;gap:8px}.home{font-size:9px}.logo{width:31px;height:31px;font-size:23px;line-height:28px}main{padding:0 18px}.intro{padding:30px 0 20px}h1{font-size:28px;letter-spacing:-1px}.intro p{font-size:12px}.layout{display:flex;flex-direction:column;gap:15px}aside{width:100%;padding:0}.section-label,aside h2,.list-head,.save-note{display:none}.sizes{margin:0 0 9px}.sizes button{padding:8px}.sizes small{display:inline;margin-left:7px}#puzzleList{display:flex;gap:6px;overflow:auto;padding-bottom:4px}.puzzle-item{flex:0 0 auto;width:auto;padding:8px 10px;border:1px solid var(--line);gap:7px}.puzzle-item strong{font-size:11px}.puzzle-item .badge{font-size:9px}.game{width:100%;padding:20px 13px 10px}.game-head{padding:0 5px}.game-head h2{font-size:20px}.eyebrow{font-size:8px}.board-area{padding:8px 0 20px}.col-clue{font-size:10px;gap:1px;padding-bottom:5px}.row-clue{font-size:10px;gap:3px}.big .col-clue,.big .row-clue{font-size:8px}.big .row-clue{gap:2px}.big .cell{font-size:13px}.mode button{padding:7px 12px}.tools button{font-size:10px}.guide{margin-top:32px;gap:22px}.guide h2{font-size:17px}footer span:last-child{display:none}}
