:root{--ink:#193b39;--muted:#72827e;--line:#e2e9e3;--paper:#f6f7f2;--teal:#245b52}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:9px;padding:9px 13px;transition:.15s}button:hover{border-color:#7eaa9c;background:#f2f7f3}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #57a7bb;outline-offset:3px}header{height:82px;max-width:1280px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:19px}.logo{background:var(--ink);color:#d2edb6;border-radius:10px;width:34px;height:34px;text-align:center;font-size:26px}.brand small{font-size:9px;font-weight:500;letter-spacing:2px;margin-left:9px;color:var(--muted)}.private{font-size:12px;color:var(--muted)}main{max-width:1184px;margin:auto;padding:0 24px}.intro{display:flex;align-items:center;justify-content:space-between;padding:48px 4px 36px}.eyebrow{font-size:10px;letter-spacing:2px;color:#63846f;font-weight:700}h1{font-size:39px;letter-spacing:-1.9px;line-height:1.35;margin:15px 0}.sub{line-height:1.9;color:var(--muted);font-size:14px}.intro-note{padding:25px 32px;border-left:1px solid #cdd9ca;margin-right:45px}.intro-note>span{font-size:53px;letter-spacing:-3px;font-weight:500}.intro-note p{font-size:12px;color:var(--muted);line-height:1.8}.workspace{display:grid;grid-template-columns:1fr 1.15fr;gap:22px}.panel{padding:27px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 18px #153f3e03}.section-head,.section-head>div{display:flex;align-items:center;gap:10px}.section-head{justify-content:space-between}h2{font-size:18px;margin:0;letter-spacing:-.5px}.step{font-size:11px;font-weight:700;color:#789680;background:#f0f5ec;border-radius:6px;padding:5px 7px}.pill{font-size:11px;border-radius:20px;padding:5px 10px;background:#eff5f0;color:#527060;white-space:nowrap}.hint{color:var(--muted);font-size:12px;line-height:1.8;margin:12px 0 20px}.board-frame{padding:0 15px}.axis{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;color:#9ba8a1;font-size:10px;margin:0 0 10px}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;background:#e8ede7;padding:9px;border-radius:13px;max-width:410px;margin:auto}.cell{aspect-ratio:1;border:1px solid #dce4da;border-radius:6px;padding:0;background:#f9faf6;position:relative;min-width:0}.cell.wet{background:#bce0e4;border-color:#8fc6cd}.cell.wet:after{content:'★';color:#6cabb4;font-size:24px;font-weight:400}.board-tools{display:flex;justify-content:center;gap:8px;margin-top:17px}.board-tools button{font-size:11px;padding:7px 11px}.legend{display:flex;justify-content:center;gap:20px;font-size:11px;color:var(--muted);margin:17px 0 24px}.legend span{display:flex;gap:6px;align-items:center}.legend i{width:11px;height:11px;background:#f9faf6;border:1px solid #dce4da;border-radius:3px}.legend .water-key{background:#bce0e4;border-color:#8fc6cd}.rules{border-top:1px solid var(--line);padding-top:16px}.rules h3{font-size:12px;margin:0}.rules p{font-size:11px;color:var(--muted);line-height:1.8}.rules strong{color:#4a6f65}#colorLegend{display:flex;gap:10px;flex-wrap:wrap;font-size:10px}#colorLegend span{display:flex;gap:4px;align-items:center}.dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid #0002}.field-label{font-size:11px;font-weight:600;display:block;margin:17px 0 10px}#shapePicker{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}#shapePicker button{padding:9px 3px 5px;font-size:10px;color:#73867e}.mini{display:grid;grid-template-columns:repeat(4,8px);grid-template-rows:repeat(2,8px);gap:2px;justify-content:center;align-content:center;height:28px;margin-bottom:4px}.mini i{background:currentColor;border-radius:2px}.selected{border-color:var(--teal)!important;background:#edf4ee!important;box-shadow:0 0 0 1px var(--teal)}#colorPicker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}#colorPicker button{padding:9px 2px;font-size:10px}.swatch{display:block;width:21px;height:21px;border:1px solid #0002;border-radius:6px;margin:0 auto 6px}.add-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:20px 0;font-size:12px}.add-row input{width:65px;padding:8px;border:1px solid var(--line);border-radius:8px}.primary{background:var(--teal);color:white;border-color:var(--teal);font-weight:600}.primary:hover{background:#194b43;color:white}.add-row .primary{margin-left:auto}.inventory-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eff2ed;font-size:12px}.inventory-item .mini{margin:0}.inventory-item .count{margin-left:auto;display:flex;align-items:center;gap:9px}.count button{padding:2px 8px;font-size:15px}.inventory-empty{padding:27px 10px;text-align:center;font-size:12px;color:#8d9c94;background:#fafbf8;border-radius:10px;margin-top:16px}#inventory{max-height:none;overflow:visible}.inventory-footer{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-size:11px;color:var(--muted)}.inventory-footer button{font-size:10px;border:0;padding:4px}.options{display:flex;flex-wrap:wrap;gap:15px;border-top:1px solid var(--line);padding-top:17px;font-size:11px}.options input{accent-color:var(--teal)}.options select{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:3px}.solve-row{display:flex;gap:8px;margin-top:20px}.solve{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px}.bottom-hint{text-align:center;font-size:10px;margin:9px 0 0}.result-panel{margin-top:23px}.result-panel .section-head>button{font-size:11px}#status{font-size:12px;color:#668475;margin-top:20px}#emptyResult{text-align:center;padding:38px 10px 28px;color:#84958a}#emptyResult>span{font-size:42px;color:#a6bb9e}#emptyResult h3{font-size:15px;font-weight:500}#emptyResult p{font-size:12px;line-height:1.9}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:20px 25px}.score-line{display:flex;gap:7px;align-items:baseline;margin-bottom:17px}.score-line strong{font-size:46px;letter-spacing:-2px}.score-line .pill{margin-left:auto}.result-grid h3{font-size:16px}.result-cell{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;border:2px solid #0002;color:#263c38}.result-cell .drop{position:absolute;right:3px;bottom:1px;font-size:11px;color:#266b80}.result-cell.future{opacity:.18}.playback{display:flex;align-items:center;gap:10px;margin:14px 0}.playback input{min-width:50px;flex:1;accent-color:var(--teal)}.playback span{font-size:11px;white-space:nowrap}#pieceSteps{display:grid;gap:6px}#pieceSteps button{display:flex;align-items:center;gap:9px;text-align:left;font-size:12px;padding:9px}#pieceSteps button b{margin-left:auto;font-size:11px}.step-number{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;border:1px solid #0002}footer{padding:30px 0;display:flex;justify-content:space-between;color:#8c9b90;font-size:10px}[hidden]{display:none!important}@media(max-width:800px){header{padding:0 22px;height:65px}.brand small{display:none}.intro{padding:28px 0 20px}h1{font-size:31px}.intro-note{display:none}.workspace{grid-template-columns:1fr}.panel{padding:22px}.result-grid{grid-template-columns:1fr;gap:15px;padding:15px 0}main{padding:0 16px}.private{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.editor-wrap{display:flex;gap:20px;align-items:center;margin-top:18px;padding:16px;background:#f7f9f4;border-radius:12px}.editor-wrap strong{font-size:12px}.editor-wrap .hint{margin:6px 0}.editor-wrap button{font-size:11px}.editor-wrap #clearShape{display:block;margin-top:8px}#shapeStatus{font-size:11px;color:#68816e}#shapeEditor{display:grid;grid-template-columns:repeat(4,28px);gap:4px;flex-shrink:0}#shapeEditor button{width:28px;height:28px;padding:0;border-radius:4px}.drawn{background:#527e6d!important;border-color:#527e6d!important}.mini{grid-template-rows:repeat(4,7px);grid-template-columns:repeat(4,7px);height:36px;gap:2px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}dialog{border:1px solid var(--line);border-radius:20px;padding:28px;max-width:440px;width:calc(100% - 32px);color:var(--ink)}dialog::backdrop{background:#153f3e88;backdrop-filter:blur(4px)}dialog p{line-height:1.9;font-size:13px}.ad-placeholder{background:#f2f5ed;border:1px dashed #bcccb7;border-radius:12px;padding:40px 15px;text-align:center;margin:20px 0;color:#7a8d76}footer button{font-size:10px;padding:0;border:0;background:none}#remaining{font-size:12px;line-height:2;margin-top:12px}details{font-size:12px}#shapePicker button{padding-top:5px}#privacyDialog p{color:#687c72}@media(max-width:400px){.editor-wrap{gap:12px;padding:12px}#shapeEditor{grid-template-columns:repeat(4,24px)}#shapeEditor button{width:24px;height:24px}}

#shapePicker{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}#shapePicker button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:73px;padding:8px 4px;gap:4px;color:#668575;background:#fafbf8}#shapePicker button.selected{color:#244e40;background:#e9f2e5!important}#shapePicker .mini{grid-template-columns:repeat(4,8px);grid-template-rows:repeat(4,8px);gap:2px;height:38px;margin:0}#shapePicker button>span:last-child{font-size:10px}.template-note{font-weight:400;color:#819184;float:right;font-size:10px}#selectedPiece{display:flex;align-items:center;gap:12px;margin-top:17px;padding:10px 13px;background:#f4f7f0;border-radius:10px;font-size:12px}#selectedPiece .mini{margin:0;filter:drop-shadow(0 0 1px #5f7060)}#selectedPiece small{display:block;color:#859283;font-size:10px;margin-top:4px}.quantity-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}.quantity-stepper button{border:0;border-radius:0;padding:7px 10px;font-size:17px}.quantity-stepper input{border:0!important;border-radius:0!important;text-align:center;width:44px!important;padding:8px 0!important;appearance:textfield}.quantity-stepper input::-webkit-inner-spin-button{appearance:none}.add-row{gap:10px;padding:13px 0 9px;border:0}.add-row .primary{white-space:nowrap}#addFeedback{font-size:11px;color:#547c60;min-height:17px;margin:0 0 6px}.cell.wet:after{color:#497e87;font-size:23px}.result-cell .drop{font-size:13px;color:#245866}.legend .water-key{display:grid;place-items:center;width:15px;height:15px}.legend .water-key:after{content:'★';font-style:normal;color:#497e87;font-size:9px}.workspace{align-items:start}.board-panel{position:sticky;top:20px}@media(max-width:800px){.board-panel{position:static}}@media(max-width:380px){.template-note{float:none;display:block;margin-top:5px}.quantity-stepper button{padding:7px 8px}.add-row{gap:7px}}

main{padding-top:26px}.board-manager{margin:20px 0 12px}.board-tabs{display:flex;flex-wrap:wrap;gap:7px}.board-tabs button{flex:1;min-width:60px;font-size:12px}.board-tabs small{display:block;font-size:10px;margin-top:4px;color:#809183}.board-actions{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.board-actions button{font-size:11px}.result-boards{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.result-boards button{flex:1;min-width:130px;text-align:left}.result-boards span{display:block;font-size:11px;margin-top:6px;line-height:1.7}.result-boards button:disabled{opacity:.75;background:#f6f5f0}.result-boards strong{font-size:13px}#completionSummary{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:#eef5e8;padding:15px 17px;margin-top:20px;border-radius:10px}#completionSummary strong{font-size:20px}#completionSummary span{font-size:12px;color:#6b836d}#resultBoard{position:relative;gap:0;padding:0;border:3px solid #2f5148;border-radius:5px;overflow:hidden}#resultBoard .cell{border:0;border-radius:0;box-shadow:inset 0 0 0 .5px #ffffff30}#resultBoard .cell:hover{filter:brightness(1.08)}.piece-outlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.piece-outlines path{stroke:#264c43;stroke-width:4;fill:none;stroke-linecap:square;stroke-linejoin:round}.piece-outlines .outline-highlight{stroke:#f5f8b2;stroke-width:8;filter:drop-shadow(0 0 2px #315b42)}.piece-outlines .outline-off{display:none}.piece-outlines .outline-future{opacity:.16}.brand{font-size:18px}.result-grid[hidden]{display:none}#colorLegend{gap:12px}header .brand small{display:none}

#resultBoard .result-cell{cursor:default}#resultBoard .result-cell:hover{filter:none}#resultBoard .drop{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);font-size:24px;line-height:1;color:#234b43;text-shadow:0 1px 1px #ffffff70}.cell-number{position:absolute;top:5px;left:6px;font-size:11px;line-height:1;color:#24463b99}.piece-line{display:flex;align-items:center;gap:9px;font-size:12px;padding:10px 11px;border:1px solid var(--line);border-radius:9px}.piece-line b{margin-left:auto;font-size:11px}.score-explanation{margin:-9px 0 18px}.tier-rules{border-top:1px solid var(--line);margin-top:15px;padding-top:13px;font-size:11px}.tier-rules p{line-height:1.9;margin:7px 0}.piece-outlines path{stroke:#234a40;stroke-width:4.5}.result-cell.future{opacity:1}

.calculation-wait{display:flex;align-items:center;gap:15px;background:#eff5e9;border:1px solid #dce9d1;border-radius:12px;padding:20px;margin-top:20px}.calculation-wait strong{font-size:15px;line-height:1.8}.calculation-wait p{font-size:12px;line-height:1.8;color:#6c826d;margin:7px 0 0}.wait-spinner{width:27px;height:27px;flex-shrink:0;border:3px solid #ccddc2;border-top-color:#41694d;border-radius:50%;animation:puzzle-spin 1s linear infinite}@keyframes puzzle-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.wait-spinner{animation:none}}#adMessage{font-size:15px;font-weight:600;line-height:1.9}

.comments-panel{margin-top:23px}.comments-panel .section-head>button{font-size:11px}.comment-fields{display:grid;grid-template-columns:1fr 190px;gap:16px}.comment-fields label,.comment-body-label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600}.comment-fields input,.comment-fields select,.comment-body-label textarea{border:1px solid var(--line);border-radius:9px;padding:12px;background:#fbfcf8;color:var(--ink);font:inherit;min-width:0}.comment-body-label{margin-top:15px}.comment-body-label textarea{resize:vertical;min-height:110px;line-height:1.8}.comment-submit-row{display:flex;align-items:center;gap:14px;margin-top:12px}.comment-submit-row>span{font-size:11px;color:var(--muted);white-space:nowrap}.comment-submit-row small{color:#8b978c;font-size:10px;line-height:1.7}.comment-submit-row button{margin-left:auto;white-space:nowrap}.comment-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#commentStatus{font-size:12px;line-height:1.8;color:#55765e;min-height:21px;margin:12px 0}.comment-filters{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:20px;flex-wrap:wrap}.comment-filters button{font-size:11px;padding:7px 12px}.comment-item{padding:20px 0;border-bottom:1px solid var(--line)}.comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.comment-head strong{font-size:13px;overflow-wrap:anywhere}.comment-head time{font-size:10px;color:#92a092;margin-left:auto}.comment-tag{font-size:10px;padding:4px 8px;border-radius:5px;background:#f0f3ed;color:#67806b}.comment-tag.bug{background:#fff0e6;color:#9c6a47}.comment-tag.idea{background:#edf1ff;color:#697d9d}.comment-item p{font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#466254;margin:12px 0 0}.comment-delete{border:0;background:none;font-size:10px;color:#8b998d;padding:7px 0 0}#commentMore{display:block;margin:20px auto 0;font-size:12px}@media(max-width:600px){.comment-fields{grid-template-columns:1fr 125px;gap:10px}.comment-submit-row{flex-wrap:wrap}.comment-submit-row small{order:3;width:100%}.comment-head time{width:100%;margin-left:0}.comment-fields input,.comment-fields select{padding:10px}}