:root{font-family:Yu Kyokasho,游教科書体,UD Digi Kyokasho NP-R,UD デジタル 教科書体 NP-R,Klee One,Hiragino Maru Gothic ProN,cursive;color:#18343a;background:#f4f8f7;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #18343a;--muted: #6a7f82;--teal: #176b72;--teal-dark: #0e555b;--board: #dfecea;--note-width: 230px;--note-height: 252px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 8% 0%,rgba(56,154,158,.1),transparent 27rem),#f4f8f7}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(100%,1560px);margin:0 auto;padding:30px 36px 36px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:46px;aspect-ratio:1;border-radius:13px 13px 13px 4px;background:#ffd56a;box-shadow:0 8px 18px #176b7221;position:relative;transform:rotate(-3deg)}.brand-mark:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent #edb947 transparent}h1{margin:0;font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:.01em}.brand p{margin:3px 0 0;color:var(--muted);font-size:.9rem}.add-button{min-height:48px;border:0;border-radius:14px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:var(--teal);font-weight:700;box-shadow:0 7px 18px #176b723b;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.add-button span:first-child{font-size:1.5rem;line-height:1;font-weight:400}.add-button:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 10px 22px #176b7245}.add-button:active{transform:translateY(0)}.add-button:focus-visible,.delete-button:focus-visible,.color-button:focus-visible,.complete-button:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,107,114,.32);outline-offset:3px}.add-control{position:relative}.color-menu{padding:12px;border:1px solid rgba(24,52,58,.12);border-radius:16px;background:#fffffff7;box-shadow:0 14px 35px #18343a33;z-index:2100}.color-menu[hidden]{display:none}.creation-menu{position:absolute;top:calc(100% + 10px);right:0;width:220px}.color-menu p{margin:0 0 9px;color:var(--ink);font-size:.82rem;font-weight:700}.color-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.color-option{min-height:42px;border:0;border-radius:10px;padding:6px 8px;display:flex;align-items:center;gap:7px;color:var(--ink);background:transparent;font-size:.78rem;cursor:pointer}.color-option:hover,.color-option:focus-visible{background:#edf4f3;outline:none}.color-option i{width:25px;height:25px;flex:0 0 auto;border:2px solid rgba(24,52,58,.1);border-radius:8px;box-shadow:inset 0 1px #ffffff80}.color-option[data-note-color=yellow] i{background:#ffdf79}.color-option[data-note-color=pink] i{background:#f8bfd2}.color-option[data-note-color=blue] i{background:#bcdff5}.color-option[data-note-color=green] i{background:#bde8c8}.board-tools{min-height:48px;margin:-4px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.status-filters{padding:4px;display:inline-grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(24,52,58,.1);border-radius:14px;background:#e6efee}.view-controls{display:flex;align-items:center;gap:9px}.status-filters button{min-width:76px;min-height:38px;padding:0 14px;border:0;border-radius:10px;color:#60787a;background:transparent;font-weight:700;cursor:pointer}.status-filters button.active{color:var(--teal-dark);background:#fff;box-shadow:0 3px 10px #18343a1a}.status-filters button:focus-visible{outline:3px solid rgba(23,107,114,.25);outline-offset:1px}.arrange-button{min-height:46px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(24,52,58,.13);border-radius:13px;color:var(--teal-dark);background:#ffffffe6;font-weight:700;cursor:pointer;transition:background .16s,transform .16s,box-shadow .16s}.arrange-button:hover{background:#fff;transform:translateY(-1px);box-shadow:0 5px 14px #18343a17}.arrange-button:active{transform:translateY(0)}.arrange-button:focus-visible{outline:3px solid rgba(23,107,114,.25);outline-offset:2px}.arrange-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.6}.sort-control{min-height:46px;padding:4px 10px;display:grid;align-content:center;gap:1px;border:1px solid rgba(24,52,58,.13);border-radius:13px;background:#ffffffe6}.sort-control>span{color:#728789;font-size:.65rem;line-height:1}.sort-control select{max-width:150px;border:0;outline:0;color:var(--teal-dark);background:transparent;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}.sort-control:focus-within{outline:3px solid rgba(23,107,114,.2);outline-offset:2px}.search-tools{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex:1}.search-field{width:min(100%,390px);min-height:46px;padding:0 14px;display:flex;align-items:center;gap:10px;border:1px solid rgba(24,52,58,.13);border-radius:14px;background:#ffffffe0;box-shadow:0 5px 16px #1a4f520f;transition:border-color .16s,box-shadow .16s}.search-field:focus-within{border-color:#176b7280;box-shadow:0 0 0 3px #176b721a}.search-field svg{width:20px;flex:0 0 auto;fill:none;stroke:#698184;stroke-width:1.8;stroke-linecap:round}.search-field input{width:100%;min-width:0;border:0;outline:0;color:var(--ink);background:transparent;font-size:1rem}.search-field input::placeholder{color:#85989a}.result-count{min-width:78px;color:#5f7779;font-size:.95rem;font-weight:700;text-align:right;white-space:nowrap}.completion-dropzone{min-height:82px;margin:0 0 16px;padding:13px 18px;display:flex;align-items:center;gap:13px;border:2px dashed rgba(23,107,114,.3);border-radius:18px;color:#456b6d;background:#e1f1eead;transition:border-color .16s,background .16s,transform .16s}.completion-dropzone.drag-over{border-color:var(--teal);background:#d0ebe4;transform:scale(1.006)}.completion-icon{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--teal);font-size:1.35rem;font-weight:900}.completion-dropzone h2{margin:0 0 2px;color:var(--ink);font-size:1rem}.completion-dropzone p{margin:0;font-size:.83rem}.completion-dropzone strong{margin-left:auto;padding:7px 11px;border-radius:10px;color:var(--teal-dark);background:#ffffffb3;font-size:.85rem;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:18px}.board-wrap{min-width:0;border:1px solid rgba(24,52,58,.08);border-radius:26px;overflow:hidden;box-shadow:0 22px 60px #1a4f521c}.todo-panel{position:sticky;top:18px;max-height:calc(100vh - 36px);padding:18px 14px 14px;overflow:auto;border:1px solid rgba(24,52,58,.1);border-radius:22px;background:#ffffffe6;box-shadow:0 16px 42px #1a4f521a}.todo-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 4px 13px;border-bottom:1px solid rgba(24,52,58,.09)}.todo-panel-header p{margin:0 0 3px;color:#7b8f90;font-size:.72rem}.todo-panel-header h2{margin:0;color:var(--ink);font-size:1.08rem}.todo-panel-header h2 span{margin-left:5px;color:var(--teal);font-size:.75rem}.todo-close{display:none;width:42px;height:42px;border:0;border-radius:50%;color:#567073;background:#edf4f3;font-size:1.4rem;cursor:pointer}.todo-list{display:grid;gap:8px;padding-top:12px}.todo-item{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:stretch;gap:4px;padding:7px;border:1px solid rgba(24,52,58,.08);border-radius:14px;background:#f7faf9;transition:border-color .15s,transform .15s,box-shadow .15s}.todo-item:hover{border-color:#176b7240;transform:translateY(-1px);box-shadow:0 6px 15px #18343a12}.todo-complete{width:36px;height:36px;align-self:center;border:2px solid #80a6a3;border-radius:11px;color:transparent;background:#fff;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.todo-complete:hover,.todo-complete:focus-visible{border-color:var(--teal);color:#fff;background:var(--teal);outline:none}.todo-complete span{font-size:1rem;font-weight:900}.todo-content{min-width:0;padding:5px 6px;border:0;text-align:left;color:var(--ink);background:transparent;cursor:pointer}.todo-content strong{display:-webkit-box;overflow:hidden;font-size:.9rem;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.todo-content>span{margin-top:5px;display:flex;align-items:center;gap:6px;color:#7a8c8d}.todo-content i{width:10px;height:10px;flex:0 0 auto;border:1px solid rgba(24,52,58,.12);border-radius:50%}.todo-content small{overflow:hidden;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.todo-content:focus-visible{outline:3px solid rgba(23,107,114,.2);border-radius:8px}.todo-empty{padding:34px 12px 26px;text-align:center;color:#7b9293}.todo-empty>span{width:45px;height:45px;margin:0 auto 10px;display:grid;place-items:center;border:2px dashed #9ab1af;border-radius:50%;font-size:1.15rem}.todo-empty p{margin:0 0 5px;color:#5b7779;font-weight:800}.todo-empty small{display:block;line-height:1.5}.todo-fab,.todo-backdrop{display:none}.board{position:relative;min-height:calc(100vh - 145px);background-color:var(--board);background-image:radial-gradient(rgba(35,98,99,.16) 1.2px,transparent 1.2px);background-size:24px 24px;overflow:hidden;touch-action:none}.board:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 45%)}.empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#789193;pointer-events:none;transition:opacity .2s ease}.empty-state.hidden{opacity:0}.empty-icon{width:56px;height:56px;margin:0 auto 12px;border:2px dashed #92aaa9;border-radius:18px;display:grid;place-items:center;font-size:1.8rem}.empty-state p{margin:0 0 5px;font-size:1rem;font-weight:700;color:#5b797b}.empty-state span{font-size:.85rem}.note{position:absolute;width:var(--note-width);height:var(--note-height);padding:11px 15px 17px;border-radius:6px 6px 16px;background:var(--note-color, #ffdf79);box-shadow:0 12px 24px #2d403a2e,inset 0 1px #ffffff6b;transition:box-shadow .2s ease,transform .2s ease;animation:note-in .22s ease-out both;-webkit-user-select:none;user-select:none}@keyframes note-in{0%{opacity:0;transform:scale(.92) rotate(-1deg)}}.note.dragging{z-index:1000!important;transform:scale(1.025) rotate(.4deg);box-shadow:0 22px 38px #263a3645;transition:box-shadow .15s ease,transform .15s ease;cursor:grabbing}.note.focus-pulse{animation:note-focus 1s ease}@keyframes note-focus{0%,to{box-shadow:0 12px 24px #2d403a2e}35%{box-shadow:0 0 0 6px #176b7257,0 18px 30px #2d403a40;transform:scale(1.025)}}.note.filtered-out{display:none}.note.arranging{transition:left .34s cubic-bezier(.2,.75,.25,1),top .34s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,transform .2s ease}.note.completed{filter:saturate(.48);opacity:.78}.note.completed textarea{color:#5f665b;text-decoration:line-through;text-decoration-thickness:1.5px}.note.completed:after{content:"完了";position:absolute;right:13px;bottom:42px;padding:3px 8px;border:1px solid rgba(24,98,92,.28);border-radius:20px;color:#276c67;background:#ffffff85;font-size:.7rem;font-weight:800;pointer-events:none}.note-toolbar{height:28px;display:flex;align-items:center;justify-content:space-between}.note-actions{display:flex;align-items:center;gap:1px}.drag-handle{display:grid;grid-template-columns:repeat(3,3px);gap:3px;padding:8px 7px 8px 3px;cursor:grab;touch-action:none}.drag-handle i{width:3px;height:3px;background:#4741285e;border-radius:50%}.delete-button,.color-button,.complete-button{width:36px;height:36px;margin:-4px 0 0;border:0;border-radius:50%;display:grid;place-items:center;color:#433d268c;background:transparent;cursor:pointer;transition:color .15s,background .15s}.delete-button{margin-right:-7px}.delete-button:hover,.color-button:hover,.complete-button:hover{background:#fff6}.delete-button:hover{color:#8c3830}.delete-button svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.complete-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.complete-button[aria-pressed=true]{color:#fff;background:#287b70}.color-button span{width:17px;height:17px;border:2px solid rgba(67,61,38,.35);border-radius:50%;background:var(--current-color);box-shadow:inset 0 1px #ffffff8c}.note-color-menu{position:absolute;top:43px;right:8px;width:172px;padding:8px}.note-color-menu .color-options{grid-template-columns:repeat(4,1fr);gap:3px}.note-color-menu .color-option{min-height:36px;padding:4px;justify-content:center;position:relative}.note-color-menu .color-option i{width:25px;height:25px}.note-color-menu .color-option.selected:after{content:"✓";position:absolute;color:#244244;font-size:.75rem;font-weight:900;text-shadow:0 1px white}.note textarea{display:block;width:100%;height:calc(100% - 78px);resize:none;border:0;padding:3px 2px;color:#403c28;background:transparent;line-height:1.65;font-size:1.05rem;letter-spacing:.035em;-webkit-user-select:text;user-select:text}.note textarea::placeholder{color:#4741286e}.note textarea:focus{outline:none}.note-todo-toggle{position:absolute;left:14px;bottom:41px;min-height:28px;padding:3px 8px 3px 5px;display:inline-flex;align-items:center;gap:5px;border-radius:9px;color:#363e30b8;background:#ffffff61;font-size:.7rem;font-weight:800;cursor:pointer}.note-todo-toggle input{width:17px;height:17px;margin:0;accent-color:var(--teal);cursor:pointer}.note-todo-toggle:has(input:checked){color:#175d61;background:#ffffffad}.note-todo-toggle:focus-within{outline:3px solid rgba(23,107,114,.25);outline-offset:2px}.note-dates{position:absolute;right:18px;bottom:8px;left:15px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#4143329e;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.64rem;line-height:1.25;letter-spacing:.01em;pointer-events:auto}.note-dates time{min-width:0;overflow:visible;white-space:nowrap;cursor:help}.note-dates time:after{content:attr(data-full-date);position:absolute;z-index:60;bottom:calc(100% + 8px);left:0;width:max-content;max-width:205px;padding:7px 9px;border-radius:8px;color:#fff;background:#18343af2;box-shadow:0 7px 18px #18343a33;font-size:.72rem;line-height:1.35;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .15s,transform .15s}.note-dates time:last-child:after{right:0;left:auto}.note-dates time:hover:after,.note-dates time:focus-visible:after{opacity:1;transform:translateY(0)}.note-dates time:focus-visible{outline:2px solid rgba(23,107,114,.35);outline-offset:2px;border-radius:3px}.note-corner{position:absolute;right:0;bottom:0;width:24px;height:24px;border-radius:12px 0 15px;background:linear-gradient(135deg,#9b711724 0 49%,#ffffff5c 50%);pointer-events:none}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);min-height:48px;padding:7px 8px 7px 16px;display:flex;align-items:center;gap:14px;border-radius:12px;color:#fff;background:#18343aeb;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3200}.toast.show{opacity:1;transform:translate(-50%);pointer-events:auto}.toast button{min-height:36px;padding:0 12px;border:0;border-radius:9px;color:#173f43;background:#d9f1ec;font-weight:800;cursor:pointer}.toast button:hover{background:#fff}.toast button:focus-visible{outline:3px solid rgba(255,255,255,.55);outline-offset:2px}@media(max-width:1023px){body.todo-panel-open{overflow:hidden}.workspace{display:block}.todo-panel{position:fixed;z-index:2800;inset:auto 0 0;width:min(100%,620px);max-height:min(72vh,680px);margin:0 auto;padding:18px 16px max(18px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .24s ease}.todo-panel.open{transform:translateY(0)}.todo-close{display:grid;place-items:center}.todo-fab{position:fixed;z-index:2200;right:18px;bottom:max(18px,env(safe-area-inset-bottom));min-height:50px;padding:0 13px 0 17px;display:inline-flex;align-items:center;gap:9px;border:0;border-radius:25px;color:#fff;background:var(--teal);box-shadow:0 10px 28px #0e555b4d;font-weight:800;cursor:pointer}.todo-fab b{min-width:25px;height:25px;padding:0 6px;display:grid;place-items:center;border-radius:13px;color:var(--teal-dark);background:#d9f1ec;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.72rem}.todo-fab b.empty{color:#fffc;background:#ffffff2e}.todo-backdrop{position:fixed;z-index:2700;inset:0;display:block;background:#0e26296b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.todo-backdrop[hidden]{display:none}}@media(max-width:900px){.board-tools{flex-wrap:wrap}.view-controls{width:100%}.status-filters{flex:1}.search-tools{width:100%;flex-basis:100%}}@media(max-width:767px){:root{--note-width: 188px;--note-height: 216px}.app-shell{padding:18px 12px 12px}.topbar{margin-bottom:16px;gap:12px}.board-tools{margin:0 0 12px;gap:9px;flex-wrap:wrap}.view-controls{width:100%}.status-filters{flex:1}.status-filters button{min-width:0;min-height:40px;padding:0 8px}.arrange-button{min-height:48px;padding:0 12px}.sort-control{min-height:48px}.search-tools{width:100%;flex-basis:100%;gap:8px}.search-field{min-height:48px;padding:0 11px}.result-count{min-width:69px;font-size:.88rem}.completion-dropzone{min-height:76px;padding:10px 12px;gap:10px}.completion-icon{width:40px;height:40px}.completion-dropzone p{font-size:.76rem}.completion-dropzone strong{padding:6px 8px;font-size:.76rem}.brand{gap:9px;min-width:0}.brand-mark{width:38px;border-radius:11px 11px 11px 4px;flex:0 0 auto}.brand p{display:none}.add-button{min-width:48px;min-height:48px;padding:0 14px;border-radius:14px}.add-button span:last-child{display:none}.board-wrap{border-radius:19px}.board{min-height:max(460px,calc(100vh - 320px));background-size:20px 20px}.note{padding:8px 9px 14px}.note-toolbar{height:31px}.delete-button,.color-button,.complete-button{width:42px;height:42px;margin-top:-6px}.delete-button{margin-right:-5px}.note-color-menu{top:45px;right:4px;width:164px}.drag-handle{padding:12px 10px 12px 2px}.note textarea{height:calc(100% - 82px);font-size:1rem}.note-todo-toggle{left:9px;bottom:40px}.note-dates{right:14px;left:10px;font-size:.6rem}.toast{width:max-content;max-width:calc(100vw - 24px);bottom:16px}}@media(max-width:600px){.view-controls{flex-wrap:wrap}.sort-control{width:100%}.sort-control select{max-width:none;width:100%}}@media(max-width:390px){:root{--note-width: 174px;--note-height: 209px}h1{font-size:1.25rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}