:root{font-family:Inter,Noto Sans JP,Yu Gothic UI,sans-serif;color:#f8fafc;background:#0b1120;font-synthesis:none;--header-h: 92px;--footer-h: 42px;--note-size: 210px}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100vh;overflow:hidden}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}#app{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 20% -10%,rgba(56,189,248,.12),transparent 35%),#0b1120}.app-header{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(20px,4vw,56px);border-bottom:1px solid rgba(148,163,184,.16);background:#0f172adb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{width:38px;height:38px;flex:0 0 auto;border-radius:9px 9px 12px;background:#facc15;box-shadow:8px 8px 0 -4px #38bdf8;transform:rotate(-3deg)}.brand h1{margin:0;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:.02em}.brand p{margin:4px 0 0;color:#94a3b8;font-size:.875rem}.search-control{min-width:220px;max-width:390px;flex:1 1 320px;display:flex;align-items:center;justify-content:center;gap:12px}.search-box{min-width:0;flex:1;height:44px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid rgba(148,163,184,.24);border-radius:13px;background:#1e293bc7;transition:border-color .16s,box-shadow .16s}.search-box:focus-within{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf81f}.search-icon{position:relative;width:15px;height:15px;flex:0 0 auto;border:2px solid #94a3b8;border-radius:50%}.search-icon:after{content:"";position:absolute;width:6px;height:2px;right:-5px;bottom:-2px;border-radius:2px;background:#94a3b8;transform:rotate(45deg)}.search-box input{width:100%;min-width:0;border:0;outline:0;color:#f8fafc;background:transparent;font-size:.9rem}.search-box input::placeholder{color:#64748b}.search-box input::-webkit-search-cancel-button{cursor:pointer;filter:invert(1);opacity:.55}.search-count{min-width:62px;color:#cbd5e1;font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.header-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}.add-note-control{position:relative}.save-status{color:#94a3b8;font-size:.8rem}.save-status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#38bdf8;margin-right:7px}.add-button{min-height:48px;border:0;border-radius:14px;padding:0 20px;color:#0f172a;background:#f8fafc;font-weight:800;cursor:pointer;box-shadow:0 8px 24px #00000038;transition:transform .16s,background .16s}.arrange-button{min-height:44px;display:flex;align-items:center;gap:7px;border:1px solid rgba(148,163,184,.24);border-radius:12px;padding:0 13px;color:#cbd5e1;background:#1e293bad;font-weight:800;cursor:pointer;transition:border-color .16s,color .16s,transform .16s}.arrange-button:hover{color:#fff;border-color:#38bdf880;transform:translateY(-1px)}.arrange-button:active{transform:translateY(0)}.grid-icon{width:16px;height:16px;display:grid;grid-template-columns:1fr 1fr;gap:2px}.grid-icon i{display:block;border:1.5px solid currentColor;border-radius:2px}.add-button:hover{transform:translateY(-2px);background:#facc15}.add-button:active{transform:translateY(0)}.add-button span{font-size:1.35rem;vertical-align:-1px;margin-right:4px}.workspace-toolbar{order:5;flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px);margin-top:-5px}.project-control{display:flex;align-items:center;gap:6px;min-width:0}.project-control label{color:#64748b;font-size:.76rem;font-weight:700}.project-control select{width:clamp(150px,18vw,240px);height:38px;padding:0 32px 0 11px;border:1px solid rgba(148,163,184,.24);border-radius:10px;outline:none;color:#f8fafc;background:#1e293b;font-size:.86rem;font-weight:700;cursor:pointer}.project-control select:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf81f}.project-control>button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.2);border-radius:10px;color:#cbd5e1;background:#1e293bb8;font-size:1.08rem;cursor:pointer}.project-control>button:hover,.project-control>button:focus-visible{border-color:#38bdf880;color:#fff;background:#38bdf824;outline:none}.project-control>button:disabled{opacity:.32;cursor:not-allowed}.project-control>.project-delete:hover,.project-control>.project-delete:focus-visible{border-color:#f8717180;color:#fecaca;background:#ef444421}.status-filter{display:flex;justify-content:center;gap:4px}.status-filter button{min-width:82px;min-height:36px;padding:0 15px;border:1px solid transparent;border-radius:10px;color:#94a3b8;background:transparent;font-weight:700;font-size:.85rem;cursor:pointer}.status-filter button:hover{color:#e2e8f0;background:#94a3b817}.status-filter button[aria-pressed=true]{color:#f8fafc;border-color:#38bdf857;background:#38bdf824}.color-menu{position:absolute;z-index:1100;width:184px;padding:8px;border:1px solid rgba(148,163,184,.26);border-radius:14px;background:#f8fafc;color:#1e293b;box-shadow:0 18px 45px #00000052}.color-menu[hidden]{display:none}.new-note-colors{right:0;top:calc(100% + 9px)}.color-menu-label{display:block;padding:5px 9px 7px;color:#64748b;font-size:.75rem;font-weight:700}.color-menu button{width:100%;min-height:42px;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;padding:7px 9px;background:transparent;color:#1e293b;font-weight:700;font-size:.875rem;cursor:pointer;text-align:left}.color-menu button:hover,.color-menu button:focus-visible{background:#e2e8f0;outline:none}.swatch{display:block;width:20px;height:20px;border-radius:50%;border:1px solid rgba(15,23,42,.14);box-shadow:inset 0 1px #fff9}.swatch-yellow{background:#fde68a}.swatch-pink{background:#fecdd3}.swatch-blue{background:#bae6fd}.swatch-green{background:#bbf7d0}.board-shell{padding:clamp(14px,2.4vw,28px);min-height:0}.board{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;border:1px solid rgba(148,163,184,.17);border-radius:24px;background-color:#151e30;background-image:radial-gradient(rgba(148,163,184,.16) 1px,transparent 1px);background-size:24px 24px;box-shadow:inset 0 1px #ffffff0a,0 24px 60px #00000038;touch-action:none}.board:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px #0003}.completed-drop-zone{position:absolute;z-index:800;right:18px;bottom:18px;width:250px;min-height:82px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px dashed rgba(125,211,252,.5);border-radius:17px;color:#cbd5e1;background:#0f172adb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px #00000038;pointer-events:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}.completed-drop-zone.drag-over{border-color:#38bdf8;background:#0e7490e6;transform:scale(1.035);box-shadow:0 0 0 4px #38bdf829,0 18px 36px #0000004d}.drop-check{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:50%;color:#082f49;background:#7dd3fc;font-size:1.2rem;font-weight:900}.completed-drop-zone>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.completed-drop-zone strong{color:#f8fafc;font-size:.9rem}.completed-drop-zone small{color:#94a3b8;font-size:.72rem;white-space:nowrap}.completed-drop-zone b{margin-left:auto;color:#7dd3fc;font-size:1rem}.empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#64748b;pointer-events:none;transition:opacity .2s}.empty-state.hidden{opacity:0}.empty-state[hidden]{display:none}.empty-state strong{color:#cbd5e1;font-size:1rem}.empty-state span:last-child{font-size:.85rem}.empty-icon{display:grid;place-items:center;width:54px;height:54px;border:1px dashed #475569;border-radius:16px;font-size:1.8rem;margin-bottom:4px}.note{position:absolute;width:var(--note-size);height:var(--note-size);z-index:1;display:grid;grid-template-rows:44px 1fr;color:#1e293b;border-radius:6px 6px 14px;overflow:visible;border-top:1px solid rgba(255,255,255,.52);box-shadow:0 2px 2px #0000002e,2px 11px 18px -7px #00000085,inset 0 -1px #fff3;transform:rotate(var(--note-tilt, 0deg));transform-origin:50% 12%;transition:box-shadow .15s,transform .15s}.note:hover{box-shadow:0 3px 3px #00000029,3px 15px 24px -8px #0000008f,inset 0 -1px #fff3}.note.dragging{z-index:1000;transform:rotate(calc(var(--note-tilt, 0deg) + 1deg)) scale(1.025);box-shadow:5px 24px 38px -9px #00000094,inset 0 -1px #fff3;transition:box-shadow .15s,transform .15s}.note:has(.note-color-menu:not([hidden])){z-index:100}.note.search-hidden{display:none}.note.arranged-pop{animation:settle-note .24s ease-out}.note.completed{filter:saturate(.55);opacity:.76}.note.completed textarea{color:#1e293b9e;text-decoration:line-through;text-decoration-thickness:1.5px}.note.completed:after{content:"完了";position:absolute;left:15px;bottom:12px;padding:3px 8px;border:1px solid rgba(15,118,110,.4);border-radius:99px;color:#115e59;background:#ffffff57;font-family:Inter,Noto Sans JP,sans-serif;font-size:.67rem;font-weight:900;letter-spacing:.08em;pointer-events:none}@keyframes settle-note{0%{transform:rotate(var(--note-tilt, 0deg)) scale(.96)}to{transform:rotate(var(--note-tilt, 0deg)) scale(1)}}.note-handle{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 7px 0 16px;cursor:grab;touch-action:none}.note.dragging .note-handle{cursor:grabbing}.grip{width:30px;height:5px;border-radius:99px;background:#1e293b38}.note-actions{display:flex;align-items:center;gap:1px}.complete-button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;color:#1e293b94;background:transparent;cursor:pointer}.complete-button:before{content:"";width:17px;height:17px;border:2px solid currentColor;border-radius:50%}.complete-button:hover,.complete-button:focus-visible{color:#0f766e;background:#ffffff59;outline:none}.complete-button[aria-pressed=true]{color:#0f766e}.complete-button[aria-pressed=true]:before{content:"✓";display:grid;place-items:center;color:#fff;background:#0f766e;border-color:#0f766e;font-size:.72rem;font-weight:900}.color-button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;cursor:pointer}.color-button:hover,.color-button:focus-visible{background:#ffffff59;outline:none}.color-button .swatch{width:18px;height:18px}.note-color-menu{right:8px;top:40px;width:154px}.note-color-menu button[aria-checked=true]:after{content:"✓";margin-left:auto}.delete-button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;color:#1e293ba8;background:transparent;cursor:pointer;font-size:1.35rem}.delete-button:hover,.delete-button:focus-visible{color:#7f1d1d;background:#ffffff59;outline:none}.note textarea{width:100%;height:100%;resize:none;border:0;outline:0;padding:4px 16px 18px;color:#1e293b;background:transparent;font-family:Klee One,UD Digi Kyokasho N-R,Hannotate SC,Yu Gothic,cursive;font-size:1.08rem;font-weight:500;line-height:1.65;letter-spacing:.025em;border-radius:0 0 14px 6px;box-shadow:inset 0 1px #1e293b0f}.note textarea::placeholder{color:#1e293b6b}.note-yellow{background:#fde68a}.note-blue{background:#bae6fd}.note-pink{background:#fecdd3}.note-green{background:#bbf7d0}.app-footer{min-height:var(--footer-h);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px clamp(20px,4vw,56px);color:#64748b;font-size:.76rem}.legend-dot{display:inline-block;width:8px;height:8px;border:2px solid #64748b;border-radius:50%;margin-right:7px}@media(max-width:767px){:root{--note-size: 168px;--header-h: 132px;--footer-h: 38px}.app-header{align-items:flex-start;padding:14px 16px;gap:10px;flex-wrap:wrap}.brand-mark{width:32px;height:32px}.brand p{display:none}.brand h1{font-size:1.1rem;line-height:32px}.header-actions{width:100%;justify-content:space-between}.search-control{order:3;width:100%;max-width:none;flex:1 0 100%;gap:10px}.workspace-toolbar{order:4;flex-direction:column;align-items:stretch;gap:8px;margin-top:0}.project-control{width:100%}.project-control label{display:none}.project-control select{flex:1;width:auto;min-width:0;height:44px}.project-control>button{width:44px;height:44px}.status-filter button{min-width:0;flex:1;min-height:42px}.search-box{height:48px}.add-button{min-height:48px;padding:0 18px}.arrange-button{min-height:48px;padding:0 11px}.color-menu button{min-height:46px}.new-note-colors{right:0}.board-shell{padding:10px}.board{min-height:400px;border-radius:18px;background-size:20px 20px}.note{grid-template-rows:46px 1fr}.delete-button,.color-button,.complete-button{width:40px;height:40px}.completed-drop-zone{right:12px;bottom:12px;width:calc(100% - 24px);min-height:72px;padding:10px 13px}.note textarea{padding:2px 14px 14px;font-size:1.05rem}.app-footer{justify-content:center;padding:8px 12px}.app-footer span:last-child{display:none}.empty-state{width:82%}}@media(min-width:768px)and (max-width:1100px){:root{--note-size: 190px}.app-header{padding-inline:28px}.brand p{display:none}.search-control{min-width:190px}.board-shell{padding:18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}