: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: 210px}*{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}.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}.board-wrap{border:1px solid rgba(24,52,58,.08);border-radius:26px;overflow:hidden;box-shadow:0 22px 60px #1a4f521c}.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.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;left:14px;bottom:11px;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% - 33px);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-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:2000}.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: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: 180px}.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}.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% - 36px);font-size:1rem}.toast{width:max-content;max-width:calc(100vw - 24px);bottom:16px}}@media(max-width:390px){:root{--note-width: 174px;--note-height: 174px}h1{font-size:1.25rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}