:root{font-family:Hiragino Sans,Yu Gothic UI,Yu Gothic,sans-serif;color:#123044;background:#dceef8;font-synthesis:none;--toolbar-height: 92px;--project-height: 64px;--filter-height: 58px;--note-size: 220px;color-scheme:light}:root[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,textarea{font:inherit}button{-webkit-tap-callout:none}.toolbar{position:relative;z-index:10;height:var(--toolbar-height);padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;background:linear-gradient(115deg,#0c5d93,#1388b7);box-shadow:0 4px 18px #08406033}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{width:38px;height:38px;flex:0 0 auto;border-radius:5px 5px 12px;background:#ffe06d;box-shadow:4px 4px #05314c38;transform:rotate(-4deg)}.brand h1{margin:0;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:.04em;line-height:1.2}.brand p{margin:5px 0 0;color:#d8f4ff;font-size:.86rem}.search-box{position:relative;width:clamp(190px,25vw,340px);flex:1 1 220px;max-width:340px}.search-box input{width:100%;height:46px;padding:0 86px 0 42px;border:1px solid rgb(255 255 255 / 32%);border-radius:14px;outline:0;color:#153e55;background:#fffffff0;font-size:1rem;box-shadow:inset 0 1px 2px #07405e1a}.search-box input::placeholder{color:#658696}.search-box input:focus{border-color:#ffe477;box-shadow:0 0 0 3px #ffe47759}.search-icon{position:absolute;top:50%;left:14px;z-index:1;color:#397087;font-size:1.5rem;line-height:1;transform:translateY(-52%) rotate(-15deg);pointer-events:none}.search-count{position:absolute;top:50%;right:12px;color:#426b7e;font-size:.78rem;font-weight:700;transform:translateY(-50%);white-space:nowrap;pointer-events:none}.create-controls{display:flex;align-items:center;gap:16px}.new-note-colors{margin:0;padding:0;border:0}.new-note-colors legend{margin-bottom:5px;color:#d8f4ff;font-size:.75rem}.color-options{display:flex;align-items:center;gap:7px}.color-option{width:31px;height:31px;flex:0 0 auto;padding:0;border:3px solid transparent;border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 0 0 1px #183d4e26,0 2px 5px #022c432e;cursor:pointer}.color-option:hover{transform:scale(1.08)}.color-option.is-selected{border-color:#fff;box-shadow:0 0 0 2px #174d69,0 2px 5px #022c432e}.color-option:focus-visible{outline:3px solid #fff;outline-offset:3px}.theme-toggle{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:1px solid rgb(255 255 255 / 34%);border-radius:14px;color:#fff3b8;background:#043a584d;font-size:1.35rem;cursor:pointer;transition:transform .16s,background .16s}.theme-toggle:hover{background:#04314b7a;transform:translateY(-1px)}.theme-toggle:focus-visible{outline:3px solid #ffe477;outline-offset:3px}.add-button{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;color:#17435c;background:#ffe477;box-shadow:0 5px #d9b73e,0 8px 18px #032e4738;font-weight:700;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.add-button span:first-child{font-size:1.5rem;line-height:1}.add-button:hover{transform:translateY(-2px);box-shadow:0 7px #d9b73e,0 11px 22px #032e4738}.add-button:active{transform:translateY(3px);box-shadow:0 2px #d9b73e}.add-button:focus-visible,.delete-button:focus-visible,.color-button:focus-visible,.complete-button:focus-visible,.note-text:focus-visible{outline:3px solid #fff;outline-offset:3px}.status-filters{height:var(--filter-height);display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;background:#fff;box-shadow:0 3px 12px #0e44611f;position:relative;z-index:8}.status-filters button{min-width:90px;min-height:42px;padding:0 18px;border:0;border-radius:22px;color:#486d80;background:transparent;font-weight:700;cursor:pointer}.status-filters button:hover{background:#e9f4fa}.status-filters button.is-active{color:#fff;background:#176f9f;box-shadow:0 3px 8px #0c537938}.status-filters button:focus-visible{outline:3px solid #f4c83e;outline-offset:2px}.project-bar{height:var(--project-height);display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 18px;color:#345f75;background:#eef8fc;border-bottom:1px solid #cae2ed;position:relative;z-index:9}.project-bar>label{font-size:.82rem;font-weight:700}.project-bar select{width:clamp(180px,28vw,360px);height:44px;padding:0 40px 0 14px;border:1px solid #9fc8da;border-radius:12px;outline:0;color:#173f54;background:#fff;font-size:1rem;font-weight:700;cursor:pointer}.project-bar select:focus{border-color:#177aa8;box-shadow:0 0 0 3px #177aa82b}.project-actions{display:flex;align-items:center;gap:6px}.project-actions button{min-height:42px;padding:0 13px;display:inline-flex;align-items:center;gap:5px;border:1px solid #a9cfde;border-radius:11px;color:#2a637e;background:#fff;font-size:.84rem;font-weight:700;cursor:pointer}.project-actions button:hover{border-color:#5aa7c4;background:#f8fdff}.project-actions button:focus-visible{outline:3px solid #f4c83e;outline-offset:2px}.project-actions .danger-button{color:#a54747}.project-actions button:disabled{color:#93a9b2;background:#e8f0f3;cursor:not-allowed;opacity:.7}.board{position:relative;width:100%;height:calc(100dvh - var(--toolbar-height) - var(--project-height) - var(--filter-height));overflow:hidden;background-color:#dceef8;background-image:radial-gradient(circle,rgb(16 105 154 / 18%) 1.2px,transparent 1.2px);background-size:24px 24px;touch-action:none}.board:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgb(255 255 255 / 42%),transparent 35%)}.empty-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none;color:#4b778d}.empty-state[hidden],.note[hidden]{display:none}.empty-note{width:88px;height:88px;display:grid;place-items:center;margin-bottom:18px;border-radius:7px 7px 22px;color:#72611a;background:#ffe477;box-shadow:0 12px 25px #1c5a772e;font-size:2.5rem;transform:rotate(-4deg)}.empty-state p{margin:0 0 7px;color:#28576f;font-size:1.1rem;font-weight:700}.empty-state span{font-size:.9rem}.note{position:absolute;width:var(--note-size);height:var(--note-size);padding:42px 18px 18px;border-radius:5px 5px 22px;background:var(--note-color, #ffe477);box-shadow:0 12px 24px #184f6733,inset 0 -16px 25px #966c000d;transform:rotate(var(--tilt, -1deg));transition:box-shadow .18s ease,transform .18s ease;-webkit-user-select:none;user-select:none;touch-action:none}.note:before{content:"";position:absolute;top:13px;left:50%;width:54px;height:15px;background:#ffffff7a;transform:translate(-50%) rotate(-2deg)}.note.is-dragging{z-index:1000!important;box-shadow:0 20px 34px #184f674d;transform:rotate(0) scale(1.025);cursor:grabbing}.note.is-arranging{transition:left .28s ease,top .28s ease,box-shadow .18s ease,transform .18s ease}.note.is-completed{filter:saturate(.48);opacity:.78;box-shadow:0 7px 16px #184f6724}.note.is-completed .note-text{color:#516064;text-decoration:line-through 2px rgb(45 83 91 / 48%)}.note-text{width:100%;height:100%;padding:0;resize:none;border:0;outline:0;color:#433d20;background:transparent;font-family:Klee,Klee One,YuKyokasho,Yu Kyokasho,Hiragino Maru Gothic ProN,Comic Sans MS,cursive;font-size:1.08rem;font-weight:500;line-height:1.7;letter-spacing:.035em;-webkit-user-select:text;user-select:text;touch-action:manipulation}.note-text::placeholder{color:#433d207a}.delete-button{position:absolute;top:9px;right:9px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;color:#705b16;background:transparent;font-size:1.35rem;line-height:1;cursor:pointer;opacity:.58;transition:opacity .15s,background .15s}.delete-button:hover{opacity:1;background:#ffffff7a}.color-button{position:absolute;top:9px;left:9px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;color:#17435c;background:#ffffff61;font-size:1.05rem;cursor:pointer}.color-button:hover{background:#ffffffad}.complete-button{position:absolute;top:9px;right:48px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:2px solid rgb(36 86 87 / 46%);border-radius:50%;color:transparent;background:#ffffff59;font-size:1.05rem;font-weight:900;cursor:pointer;transition:color .15s,background .15s,transform .15s}.complete-button:hover{color:#1c644b8c;transform:scale(1.06)}.complete-button[aria-pressed=true]{border-color:#287d5d;color:#fff;background:#35a875;box-shadow:0 2px 5px #12503938}.note-color-menu{position:absolute;z-index:3;top:45px;left:10px;padding:7px;display:flex;gap:6px;border-radius:22px;background:#ffffffeb;box-shadow:0 7px 18px #23445233}.note-color-menu[hidden]{display:none}.note-color-menu .color-option{width:30px;height:30px}.note-color-menu .color-option.is-selected{border-color:#fff;box-shadow:0 0 0 2px #256078}.completion-zone{position:absolute;right:22px;bottom:20px;z-index:1100;width:238px;min-height:86px;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:12px;border:3px dashed rgb(35 120 92 / 50%);border-radius:18px;color:#28654f;background:#e5faf0d4;box-shadow:0 8px 22px #1a57431f;pointer-events:none;transition:transform .16s,background .16s,border-color .16s}.completion-zone-check{width:39px;height:39px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:#35a875;font-size:1.35rem;font-weight:900}.completion-zone span:last-child{display:grid;gap:3px}.completion-zone strong{font-size:.96rem}.completion-zone small{color:#568572;font-size:.75rem}.completion-zone.is-drag-over{border-color:#168c5f;background:#caf7e1f5;transform:scale(1.055)}:root[data-theme=dark] body{background:#0f2330}:root[data-theme=dark] .toolbar{background:linear-gradient(115deg,#082f4b,#07536f);box-shadow:0 4px 18px #00000059}:root[data-theme=dark] .brand p,:root[data-theme=dark] .new-note-colors legend{color:#b6dce9}:root[data-theme=dark] .search-box input{border-color:#476979;color:#e5f4fa;background:#193b4b;box-shadow:inset 0 1px 2px #00000040}:root[data-theme=dark] .search-box input::placeholder{color:#91acb8}:root[data-theme=dark] .search-icon,:root[data-theme=dark] .search-count{color:#b2ced9}:root[data-theme=dark] .project-bar{color:#c4dce5;background:#173542;border-color:#2b4f5d}:root[data-theme=dark] .project-bar select,:root[data-theme=dark] .project-actions button{border-color:#456a78;color:#d4e9f1;background:#203f4c}:root[data-theme=dark] .project-actions button:hover{border-color:#6ca3b7;background:#294c5a}:root[data-theme=dark] .project-actions .danger-button{color:#ffb0b0}:root[data-theme=dark] .project-actions button:disabled{color:#708894;background:#1a3039}:root[data-theme=dark] .status-filters{background:#122c39;box-shadow:0 3px 12px #0000003d}:root[data-theme=dark] .status-filters button{color:#b4d0dc}:root[data-theme=dark] .status-filters button:hover{background:#214351}:root[data-theme=dark] .status-filters button.is-active{color:#fff;background:#1979a7}:root[data-theme=dark] .board{background-color:#0f2531;background-image:radial-gradient(circle,rgb(116 175 199 / 19%) 1.2px,transparent 1.2px)}:root[data-theme=dark] .board:before{background:linear-gradient(135deg,rgb(56 116 141 / 10%),transparent 38%)}:root[data-theme=dark] .empty-state{color:#91b1bf}:root[data-theme=dark] .empty-state p{color:#c5e0ea}:root[data-theme=dark] .note:not(.is-completed){filter:brightness(.86) saturate(.88);box-shadow:0 14px 28px #00000057}:root[data-theme=dark] .note.is-completed{filter:brightness(.68) saturate(.38);opacity:.82}:root[data-theme=dark] .note-color-menu{background:#1d3741f5;box-shadow:0 8px 20px #00000061}:root[data-theme=dark] .completion-zone{border-color:#57be948c;color:#a9dfc7;background:#164336e0;box-shadow:0 8px 22px #00000038}:root[data-theme=dark] .completion-zone small{color:#8bc2a9}:root[data-theme=dark] .completion-zone.is-drag-over{border-color:#6cddb0;background:#1b6349f5}@media(max-width:767px){:root{--toolbar-height: 138px;--project-height: 66px;--note-size: 164px}.toolbar{padding:12px 14px;gap:8px;flex-wrap:wrap;align-content:center}.brand{gap:9px}.brand-mark{width:31px;height:31px}.brand p{display:none}.brand h1{font-size:1.15rem}.search-box{width:auto;min-width:150px;max-width:none;flex:1 1 150px}.search-box input{height:42px;padding-left:38px;padding-right:78px;border-radius:12px}.search-icon{left:12px}.search-count{right:9px;font-size:.72rem}.create-controls{width:100%;justify-content:space-between;gap:10px}.new-note-colors{display:flex;align-items:center;gap:9px}.new-note-colors legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.color-option{width:36px;height:36px}.add-button{min-width:48px;min-height:48px;padding:0 14px;border-radius:13px}.theme-toggle{width:44px;height:44px;border-radius:12px}.add-button span:last-child{display:none}.note{padding:38px 14px 14px;border-radius:5px 5px 17px}.note-text{font-size:1rem;line-height:1.55}.delete-button{width:38px;height:38px;top:5px;right:5px}.color-button{width:38px;height:38px;top:5px;left:5px}.complete-button{width:38px;height:38px;top:5px;right:46px}.note-color-menu{top:44px;left:7px;gap:4px;padding:6px}.note-color-menu .color-option{width:29px;height:29px}.status-filters{gap:3px;padding-inline:8px}.status-filters button{min-width:0;flex:1;max-width:120px;min-height:44px;padding:0 8px}.completion-zone{right:12px;bottom:12px;width:calc(100% - 24px);min-height:72px;padding:9px 15px}.completion-zone-check{width:36px;height:36px}.project-bar{justify-content:stretch;gap:6px;padding:9px 10px}.project-bar>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.project-bar select{width:auto;min-width:0;flex:1;height:46px;padding-left:10px;font-size:.9rem}.project-actions{gap:4px}.project-actions button{width:44px;height:44px;padding:0;justify-content:center;font-size:1.15rem}.project-actions button span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}@media(min-width:768px)and (max-width:1050px){:root{--toolbar-height: 142px}.toolbar{padding-block:12px;flex-wrap:wrap;align-content:center;gap:10px 18px}.brand p{display:none}.search-box{max-width:none}.create-controls{width:100%;justify-content:flex-end}.new-note-colors{display:flex;align-items:center;gap:10px}.new-note-colors legend{margin:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}