:root{--bg: #f4f1ea;--surface: #ffffff;--ink: #1f1c18;--ink-soft: #6b645a;--line-thin: #cfc9bd;--line-thick: #4a453d;--accent: #0f766e;--accent-ink: #ffffff;--entered: #1749b8;--hinted: #0f766e;--wrong-ink: #b3261e;--wrong-bg: #fbdedb;--sel: #bfe0dc;--peer: #e7efed;--same: #d3e6f7;--stamp: #0f766e;--stamp-more: #08514b;--btn: #ffffff;--btn-line: #d8d2c6;--shadow: 0 1px 0 rgba(0, 0, 0, .07);--tap: rgba(15, 118, 110, .16);--heart: #b8213c;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,sans-serif;font-size:17px;line-height:1.4;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right)}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;touch-action:manipulation}.view{flex:1;min-height:0;display:none;flex-direction:column}.view.is-active{display:flex}#app .view .view{position:relative}.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 6px 16px}.topbar-left{min-width:0}.top-btn{flex:none;min-height:var(--top-btn-h, 60px);height:var(--top-btn-h, 60px);padding:0 18px;border:1px solid var(--btn-line);border-radius:14px;background:var(--btn);box-shadow:var(--shadow);font-size:17px;font-weight:700;color:var(--ink)}.top-btn:active{background:var(--tap)}.topbar h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}.topbar h1 .round{margin-left:8px;font-size:16px;font-weight:700;color:var(--ink-soft);letter-spacing:0}.topbar .meta{font-size:17px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.topbar .meta .level{font-weight:800;color:var(--ink)}.topbar .meta .elapsed{font-weight:800;color:var(--accent)}.sheet-backdrop{position:fixed;inset:0;background:#1f1c186b;display:flex;align-items:flex-end;z-index:10}.sheet{width:100%;background:var(--bg);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #0000002e}.sheet h2{margin:0 0 6px;font-size:21px;font-weight:800;text-align:center}.sheet .sheet-note{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--ink-soft);text-align:center}.sheet-option{width:100%;min-height:68px;margin-bottom:10px;border-radius:16px;border:1px solid var(--btn-line);background:var(--surface);font-size:21px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px}.sheet-option:active{background:var(--tap)}.sheet-option.quiet{background:none;border-color:transparent;box-shadow:none;color:var(--ink-soft);margin-top:2px}.sheet-option.quiet:active{background:#1f1c180f}.sheet-option.current{border:2px solid var(--accent);color:var(--accent)}.sheet-option .mark{font-size:18px}.board-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 4px}.board{width:var(--board, 340px);height:var(--board, 340px);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:var(--surface);border:3px solid var(--line-thick);border-radius:6px;overflow:hidden;font-size:calc(var(--board, 340px) / 9 * .62)}.cell{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line-thin);border-bottom:1px solid var(--line-thin);font-weight:600;font-variant-numeric:tabular-nums;color:var(--entered);background:var(--surface);transition:background-color 90ms linear}.cell:nth-child(9n){border-right:none}.cell:nth-child(n+73){border-bottom:none}.cell.bx{border-right:2px solid var(--line-thick)}.cell.by{border-bottom:2px solid var(--line-thick)}.cell.given{color:var(--ink);font-weight:800}.cell.hinted{color:var(--hinted);font-weight:800}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.sel{background:var(--sel)}.cell.wrong{color:var(--wrong-ink);background:var(--wrong-bg)}.cell.wrong.sel{background:#f6c9c4}.notes{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:.32em;font-weight:700;color:var(--ink-soft);line-height:1}.notes span{display:flex;align-items:center;justify-content:center}@keyframes solved-glow{0%{box-shadow:0 0 #0f766e00}40%{box-shadow:0 0 0 10px #0f766e59}to{box-shadow:0 0 #0f766e00}}.board.solved{animation:solved-glow .9s ease-out}.board.finished{box-shadow:0 0 0 8px #0f766e4d}.tools{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px 4px}.tool{min-height:var(--tool-h, 62px);height:var(--tool-h, 62px);border:1px solid var(--btn-line);border-radius:14px;background:var(--btn);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink)}.tool .label{font-size:17px;font-weight:700;letter-spacing:-.02em}.tool:active{background:var(--tap)}.tool[disabled]{opacity:.38}.tool.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.tool .badge{font-size:13px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}.tool.on .badge{color:var(--accent-ink)}.keypad{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 12px 10px}.key{min-height:var(--key-h, 60px);height:var(--key-h, 60px);border:1px solid var(--btn-line);border-radius:14px;background:var(--btn);box-shadow:var(--shadow);font-size:clamp(24px,calc(var(--key-h, 60px) * .5),34px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--entered)}.key:active{background:var(--tap)}.key[data-done="1"]{color:var(--btn-line);background:#f2efe8}.keypad.note-mode .key{color:var(--ink-soft);font-size:24px}.subhead{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 12px 4px}.subhead h1{margin:0;font-size:22px;font-weight:800;text-align:center}.subhead-spacer{display:block}.back-btn{justify-self:start;min-width:60px;min-height:60px;border:1px solid var(--btn-line);border-radius:14px;background:var(--btn);box-shadow:var(--shadow);font-size:24px;font-weight:700;color:var(--ink);line-height:1}.back-btn:active{background:var(--tap)}.sheet-divider{height:1px;background:var(--btn-line);margin:6px 12px 12px}.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 24px}.cal-head{display:flex;align-items:center;justify-content:space-between;padding:6px 0 12px}.cal-head .month{font-size:22px;font-weight:800}.cal-nav{min-width:62px;min-height:62px;border-radius:14px;border:1px solid var(--btn-line);background:var(--btn);font-size:24px;display:flex;align-items:center;justify-content:center}.cal-nav[disabled]{opacity:.3}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cal-dow{text-align:center;font-size:14px;font-weight:700;color:var(--ink-soft);padding-bottom:4px}.cal-day{aspect-ratio:1;border-radius:12px;background:var(--surface);border:1px solid var(--btn-line);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--ink-soft);position:relative}.cal-day.blank{background:none;border:none}.cal-day.out{background:none;border:none;color:#c3bdb1;font-weight:500}.cal-day.today{border:2px solid var(--accent)}.cal-day.done{background:var(--stamp);border-color:var(--stamp);color:#fff}.cal-day.done.more{background:var(--stamp-more);border-color:var(--stamp-more)}.cal-day.done.more .stamp{font-size:21px;transform:translate(-3px,-3px)}.cal-day .count{position:absolute;right:4px;bottom:2px;font-size:15px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}.cal-day.done .num{display:none}.cal-day .stamp{display:none;font-size:26px;line-height:1}.cal-day.done .stamp{display:block}@keyframes stamp-in{0%{transform:scale(2.6);opacity:0}55%{transform:scale(.88);opacity:1}to{transform:scale(1);opacity:1}}.cal-day.just .stamp{animation:stamp-in .52s cubic-bezier(.2,1.1,.3,1) both}.summary{margin-top:18px;background:var(--surface);border:1px solid var(--btn-line);border-radius:16px;padding:18px;text-align:center}.summary .big{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1.1}.summary .label{font-size:17px;color:var(--ink-soft);margin-top:2px}.summary .sub{font-size:16px;color:var(--ink-soft);margin-top:10px}.stat-list{margin-top:14px;background:var(--surface);border:1px solid var(--btn-line);border-radius:16px;overflow:hidden}.stat-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #efece5;font-size:18px}.stat-row:last-child{border-bottom:none}.stat-row .v{font-weight:800;font-variant-numeric:tabular-nums}.section-title{font-size:15px;font-weight:700;color:var(--ink-soft);margin:22px 0 8px 4px}.wide-btn{width:100%;min-height:64px;margin-top:16px;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-size:20px;font-weight:800;box-shadow:var(--shadow)}.wide-btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--btn-line);font-weight:700}.wide-btn:active{filter:brightness(.94)}.setting-row{margin-top:26px;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--surface);border:1px solid var(--btn-line);border-radius:16px;font-size:17px;color:var(--ink-soft)}.switch{min-width:84px;min-height:46px;border-radius:23px;border:1px solid var(--btn-line);background:#ece8e0;font-size:16px;font-weight:700;color:var(--ink-soft)}.switch.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.hint-text{margin:10px 4px 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}.footer-note{margin:34px 0 8px;text-align:center}.footer-note .dedication{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}.footer-note .copyright{margin:10px 0 0;font-size:14px;color:#a49c8e;font-variant-numeric:tabular-nums}.footer-note .version{margin:4px 0 0;font-size:13px;color:#b6ae9f;font-variant-numeric:tabular-nums}.done-panel{margin-top:16px;background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:20px;text-align:center}.done-panel .headline{font-size:22px;font-weight:800}.done-panel .time{margin-top:8px;font-size:17px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:12}.finished-panel{flex:none;height:calc(var(--tool-h, 62px) + var(--key-h, 60px) * 3 + 48px);padding:4px 12px 0;display:flex;flex-direction:column;align-items:center}.finished-panel .greeting-wrap{flex:none;height:124px;padding:0;margin-top:6px;width:100%}.finished-panel .greeting-heart{width:112px;height:112px}.finished-panel .greeting{font-size:22px;margin:0}.greeting{text-align:center}.finished-panel .wide-btn{width:100%;margin:12px 0 0;min-height:64px}.toast{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:20;padding:16px 18px;border-radius:14px;background:#1f1c18eb;color:#fff;font-size:17px;font-weight:600;line-height:1.4;text-align:center;box-shadow:0 6px 20px #00000040}@media(prefers-reduced-motion:no-preference){.toast{animation:toast-in .16s ease-out both}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}}.greeting-wrap{position:relative;display:grid;place-items:center;padding:48px 0}.greeting-heart{position:absolute;width:184px;height:184px;color:var(--heart);opacity:.12;pointer-events:none}@media(prefers-reduced-motion:no-preference){.greeting-heart{animation:heart-in .9s cubic-bezier(.2,.9,.3,1) both}@keyframes heart-in{0%{opacity:0;transform:scale(.86)}}}.greeting{position:relative;font-size:24px;font-weight:800;line-height:1.5;color:var(--accent);margin-bottom:4px}.notice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-soft);font-size:19px;padding:24px;text-align:center}
