:root{font-family:DM Sans,Noto Sans JP,sans-serif;color:#34322f;background:#f5f2ea;font-synthesis:none;--header-height: 136px;--footer-height: 48px;--note-width: 240px;--note-height: 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-shell{height:100vh;display:grid;grid-template-rows:var(--header-height) 1fr var(--footer-height)}.topbar{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:88px 48px;align-items:center;padding:0 clamp(24px,4vw,64px);background:#faf8f3f0;border-bottom:1px solid #ded9ce;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:15px}.brand-mark{width:40px;height:40px;padding:9px 8px;display:flex;flex-direction:column;gap:5px;background:#f4c84c;border-radius:8px 8px 8px 2px;box-shadow:0 3px 8px #75601b24;transform:rotate(-2deg)}.brand-mark i{height:2px;border-radius:2px;background:#6e5923;opacity:.65}.brand h1{margin:0;color:#2d2b28;font-size:20px;font-weight:700;letter-spacing:-.3px}.brand p{margin:3px 0 0;color:#888279;font-size:12px;letter-spacing:.05em}.search-box{grid-column:2;width:min(32vw,390px);height:42px;display:flex;align-items:center;gap:9px;padding:0 11px;color:#8c867d;background:#eeebe4;border:1px solid transparent;border-radius:10px;transition:background .16s,border-color .16s,box-shadow .16s}.search-box:focus-within{color:#5e5a53;background:#fff;border-color:#cec8bc;box-shadow:0 0 0 3px #5c564a14}.search-box svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.search-box input{width:100%;min-width:0;padding:0;border:0;outline:0;color:#393632;background:transparent;font-size:13px}.search-box input::placeholder{color:#989188}.search-box input::-webkit-search-cancel-button{cursor:pointer}.search-shortcut{flex:0 0 auto;padding:3px 6px;color:#999289;background:#faf8f3;border:1px solid #dcd6cb;border-radius:5px;font-size:9px;font-weight:600}.add-button,.empty-add-button{border:0;color:#fff;background:#363532;cursor:pointer;font-weight:600;box-shadow:0 5px 14px #2d2b2824;transition:transform .18s,background .18s,box-shadow .18s}.add-control{position:relative;justify-self:end;display:flex;align-items:center;gap:9px}.theme-button{width:42px;height:42px;display:grid;place-items:center;padding:0;color:#625d55;background:#eeebe4;border:1px solid #ddd7cc;border-radius:10px;cursor:pointer;transition:color .15s,background .15s,transform .15s}.theme-button:hover{color:#292724;background:#fff;transform:translateY(-1px)}.theme-icon{font-size:21px;line-height:1}.add-button{min-height:46px;padding:0 19px;display:flex;align-items:center;gap:8px;border-radius:11px}.add-button span:first-child{font-size:23px;font-weight:400;line-height:1;margin-top:-2px}.add-button:hover,.empty-add-button:hover{background:#1f1e1c;transform:translateY(-1px);box-shadow:0 7px 18px #2d2b2830}.add-button:active,.empty-add-button:active{transform:translateY(1px)}.align-button{grid-column:3;grid-row:2;align-self:start;justify-self:end;min-height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#5e5952;background:#fffdf8;border:1px solid #d8d2c7;border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;box-shadow:0 2px 5px #3933280f;transition:background .15s,transform .15s,box-shadow .15s}.align-button:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 9px #3933281a}.align-button:active{transform:translateY(1px)}.align-icon{width:14px;height:14px;display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:2px}.align-icon i{border:1.5px solid currentColor;border-radius:1px}.project-control{grid-column:1;grid-row:2;align-self:start;display:flex;align-items:center;gap:5px}.project-switcher{position:relative}.project-trigger{max-width:230px;height:36px;display:flex;align-items:center;gap:8px;padding:0 11px;color:#4c4842;background:#fffdf8;border:1px solid #d8d2c7;border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;box-shadow:0 2px 5px #3933280f}.project-icon{color:#80796f;font-size:16px}.project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-chevron{margin-left:auto;color:#8f887e;font-size:14px}.project-action{width:34px;height:34px;padding:0;color:#817b72;background:transparent;border:0;border-radius:8px;cursor:pointer;font-size:16px}.project-action:hover,.project-action:focus-visible{color:#3d3934;background:#e9e5dc;outline:none}.project-action:disabled{opacity:.28;cursor:not-allowed}.project-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1200;width:250px;padding:10px;color:#3d3934;background:#fffdf8;border:1px solid #d9d3c8;border-radius:12px;box-shadow:0 14px 32px #322d2433}.project-menu[hidden]{display:none}.project-menu>p{margin:2px 7px 8px;color:#918a81;font-size:10px;font-weight:700;letter-spacing:.08em}.project-list{max-height:220px;overflow-y:auto}.project-list button,.create-project{width:100%;min-height:39px;display:flex;align-items:center;gap:9px;padding:7px 9px;border:0;border-radius:8px;cursor:pointer;text-align:left;font-size:12px}.project-list button{color:#4b4741;background:transparent}.project-list button:hover{background:#f0ede6}.project-list button.active{color:#315e38;background:#e7f0e4;font-weight:700}.project-list button span:first-child{width:18px;text-align:center}.project-list button small{margin-left:auto;color:#969087;font-size:9px}.create-project{margin-top:7px;color:#4a4640;background:transparent;border-top:1px solid #e5e0d7;border-radius:0 0 8px 8px;font-weight:700}.create-project:hover{background:#f0ede6}.status-tabs{grid-column:2;grid-row:2;align-self:start;justify-self:center;display:flex;padding:4px;background:#ebe7de;border-radius:10px}.status-tabs button{min-width:82px;height:34px;padding:0 14px;border:0;border-radius:7px;color:#79736a;background:transparent;cursor:pointer;font-size:12px;font-weight:600;transition:color .15s,background .15s,box-shadow .15s}.status-tabs button:hover{color:#34312d}.status-tabs button.active{color:#34312d;background:#fffdf8;box-shadow:0 2px 6px #3933281f}.board{position:relative;min-height:0;overflow:hidden;isolation:isolate}.board-pattern{position:absolute;inset:0;z-index:-1;background-color:#f5f2ea;background-image:radial-gradient(#c9c3b6 1px,transparent 1px);background-size:24px 24px;opacity:.65}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;transition:opacity .2s}.empty-state[hidden]{display:none}.empty-illustration{width:122px;height:108px;position:relative;margin-bottom:22px}.empty-note{position:absolute;display:block;width:84px;height:84px;border-radius:5px 5px 5px 1px;box-shadow:0 10px 24px #675f4930}.empty-note.back{left:12px;top:2px;background:#efada6;transform:rotate(-10deg)}.empty-note.front{right:10px;bottom:0;padding:25px 18px;background:#f4d66d;transform:rotate(7deg)}.empty-note.front i{display:block;width:100%;height:3px;margin-bottom:8px;border-radius:3px;background:#9c873c;opacity:.5}.empty-state h2{margin:0;font-size:21px;letter-spacing:-.02em}.empty-state p{margin:8px 0 20px;color:#817c73;font-size:14px}.empty-add-button{min-height:42px;padding:0 17px;border-radius:9px;font-size:13px}.search-empty{z-index:2;pointer-events:none}.search-empty-icon{width:62px;height:62px;display:grid;place-items:center;margin-bottom:17px;color:#8d877d;background:#ebe7dd;border-radius:50%;font-size:38px;font-family:sans-serif;line-height:1}.complete-dropzone{position:absolute;right:clamp(18px,3vw,42px);bottom:22px;z-index:8;width:260px;height:82px;display:flex;align-items:center;justify-content:center;gap:12px;color:#79766f;background:#faf8f2d1;border:2px dashed #aaa69c;border-radius:14px;box-shadow:0 5px 16px #3e392f14;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;transition:border-color .16s,color .16s,background .16s,transform .16s}.complete-dropzone strong,.complete-dropzone small{display:block}.complete-dropzone strong{font-size:13px}.complete-dropzone small{margin-top:3px;font-size:10px;opacity:.72}.dropzone-check{width:34px;height:34px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:18px;font-weight:700}.complete-dropzone.drag-over{color:#477846;background:#e2f1dcf2;border-color:#689565;transform:scale(1.035)}.note{position:absolute;width:var(--note-width);height:var(--note-height);display:grid;grid-template-rows:45px 1fr 30px;border:1px solid rgba(84,76,53,.08);border-radius:3px 4px 5px 2px;color:#4e493e;background-image:linear-gradient(105deg,rgba(255,255,255,.13),transparent 28%,rgba(91,78,45,.025) 72%,rgba(255,255,255,.08)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(95,83,53,.012) 3px 4px);box-shadow:1px 2px 2px #48412f1f,4px 8px 11px #48412f24,10px 18px 28px #48412f14;transform:rotate(var(--rotation, 0deg));transform-origin:center;transition:left .22s ease,top .22s ease,box-shadow .16s,transform .16s;overflow:hidden;touch-action:none}.note[hidden]{display:none}.note:after{content:"";position:absolute;right:-1px;bottom:-1px;width:28px;height:28px;border-radius:100% 0 0;background:linear-gradient(135deg,transparent 42%,rgba(79,72,53,.09) 48%,rgba(255,255,255,.22) 70%);filter:drop-shadow(-2px -2px 2px rgba(70,63,46,.05));pointer-events:none}.note[data-color=yellow]{background-color:#f6da73}.note[data-color=pink]{background-color:#f2b8b2}.note[data-color=blue]{background-color:#afd7e4}.note[data-color=green]{background-color:#bcd9ae}.note.completed{opacity:.68;filter:saturate(.55)}.note.completed .note-text{color:#625f58;text-decoration:line-through;text-decoration-thickness:1.5px}.note.completed:before{content:"完了";position:absolute;right:14px;bottom:12px;z-index:2;padding:3px 8px;color:#3f7145;background:#ffffff9e;border:1px solid rgba(63,113,69,.35);border-radius:10px;font:700 9px Noto Sans JP,sans-serif;letter-spacing:.08em;pointer-events:none}.note:hover{box-shadow:1px 3px 3px #48412f21,6px 12px 17px #48412f2b,12px 23px 34px #48412f17}.note.dragging{z-index:1000!important;transform:rotate(0) scale(1.025);box-shadow:0 18px 34px #403b3040;cursor:grabbing;transition:box-shadow .16s,transform .16s}.note-header{display:flex;align-items:center;justify-content:space-between;padding:5px 7px 0 14px;cursor:grab;-webkit-user-select:none;user-select:none}.note-actions{position:relative;display:flex;align-items:center}.drag-handle{display:grid;grid-template-columns:repeat(3,3px);gap:3px;padding:7px 5px;opacity:.34}.drag-handle i{width:3px;height:3px;border-radius:50%;background:currentColor}.delete-button,.color-button,.complete-button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;color:inherit;background:transparent;cursor:pointer;opacity:.55;transition:background .15s,opacity .15s}.delete-button{font-size:20px}.color-button:before{content:"";width:15px;height:15px;border:2px solid currentColor;border-radius:50%;background:#ffffff73}.complete-button{font-size:17px;font-weight:700}.note.completed .complete-button{color:#356f3d;background:#ffffff8c;opacity:1}.delete-button:hover,.delete-button:focus-visible,.color-button:hover,.color-button:focus-visible,.complete-button:hover,.complete-button:focus-visible{background:#ffffff52;opacity:.95;outline:none}.color-menu{z-index:1100;padding:12px;color:#3d3a35;background:#fffdf8;border:1px solid #ded8cc;border-radius:12px;box-shadow:0 12px 28px #403b302b}.color-menu[hidden]{display:none}.color-menu p{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}.color-options{display:flex;gap:8px}.color-option{width:32px;height:32px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px #5b554529;transition:transform .15s,border-color .15s}.color-option:hover,.color-option:focus-visible{transform:scale(1.1);outline:none}.color-option[aria-checked=true]{border-color:#3f3c36;box-shadow:inset 0 0 0 2px #fff}.color-option[data-color=yellow]{background:#f6da73}.color-option[data-color=pink]{background:#f2b8b2}.color-option[data-color=blue]{background:#afd7e4}.color-option[data-color=green]{background:#bcd9ae}.new-note-menu{position:absolute;top:calc(100% + 9px);right:0}.note-color-menu{position:absolute;top:38px;right:0}.note-text{width:100%;height:100%;padding:7px 17px;resize:none;border:0;outline:0;color:#4c473d;background:transparent;font-family:Klee One,Yu Mincho,cursive;font-size:17px;font-weight:600;line-height:1.75;letter-spacing:.025em;cursor:text;touch-action:manipulation}.note-text::placeholder{color:currentColor;opacity:.45}.note-footer{padding:0 15px;color:inherit;font-size:10px;opacity:.45;text-align:right;-webkit-user-select:none;user-select:none}.footer{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,64px);color:#8c867d;background:#f8f6f1;border-top:1px solid #ded9ce;font-size:11px;letter-spacing:.02em}.footer>span:first-child{display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#77a36d;box-shadow:0 0 0 3px #77a36d1f}.note-count{font-weight:600;text-transform:uppercase}@media(max-width:767px){:root{--header-height: 228px;--footer-height: 42px;--note-width: 210px;--note-height: 190px}.topbar{grid-template-columns:1fr auto;grid-template-rows:68px 54px 52px 54px;padding:0 16px}.brand{gap:10px}.brand-mark{width:36px;height:36px}.brand h1{font-size:16px}.brand p{display:none}.add-button{min-width:48px;min-height:48px;justify-content:center;padding:0 13px}.add-button span:first-child{font-size:27px}.add-button span:last-child{display:none}.add-control{grid-column:2;grid-row:1}.theme-button{width:44px;height:44px}.align-button{grid-column:1;grid-row:1;align-self:center;justify-self:end;margin-right:8px;min-width:44px;min-height:44px;justify-content:center;padding:0}.align-button>span:last-child{display:none}.align-icon{width:16px;height:16px;grid-template-columns:repeat(2,6px);grid-template-rows:repeat(2,6px)}.search-box{grid-column:1 / -1;grid-row:2;width:100%;height:42px;align-self:start}.search-shortcut{display:none}.project-control{grid-column:1 / -1;grid-row:3;width:100%}.project-switcher{flex:1}.project-trigger{width:100%;max-width:none;min-height:42px}.project-action{width:42px;height:42px}.project-menu{width:min(290px,calc(100vw - 32px))}.project-list button,.create-project{min-height:46px}.status-tabs{grid-column:1 / -1;grid-row:4;width:100%}.status-tabs button{min-width:0;flex:1;min-height:36px}.note{grid-template-rows:48px 1fr 28px}.delete-button,.color-button,.complete-button{width:38px;height:40px}.delete-button{font-size:23px}.note-header{padding-right:4px}.color-option{width:38px;height:38px}.note-color-menu{top:43px;right:-3px}.drag-handle{padding:10px 8px}.note-text{padding:4px 15px;font-size:17px}.empty-state{justify-content:flex-start;padding-top:max(70px,13vh)}.empty-state p{max-width:270px;line-height:1.7}.empty-add-button{min-height:48px;padding:0 20px}.footer{padding:0 16px}.note-count{flex:0 0 auto;margin-left:10px}.complete-dropzone{right:12px;bottom:12px;width:calc(100% - 24px);height:70px}}html[data-theme=dark]{color-scheme:dark;background:#1d1f20}html[data-theme=dark] body{color:#e7e2d9;background:#1d1f20}html[data-theme=dark] .topbar{background:#202223f5;border-color:#3b3d3d}html[data-theme=dark] .brand h1{color:#f0ece5}html[data-theme=dark] .brand p{color:#aaa59d}html[data-theme=dark] .brand-mark{box-shadow:0 4px 10px #00000052}html[data-theme=dark] .search-box{color:#aaa69f;background:#292b2c;border-color:#3c3e3f}html[data-theme=dark] .search-box:focus-within{color:#ded9d0;background:#242627;border-color:#656768;box-shadow:0 0 0 3px #ffffff0f}html[data-theme=dark] .search-box input{color:#eeeae3}html[data-theme=dark] .search-box input::placeholder{color:#8d8983}html[data-theme=dark] .search-shortcut{color:#aaa59d;background:#363839;border-color:#4b4d4e}html[data-theme=dark] .theme-button{color:#f0cc68;background:#303233;border-color:#494b4c}html[data-theme=dark] .theme-button:hover{color:#ffe28c;background:#3a3c3d}html[data-theme=dark] .board-pattern{background-color:#202223;background-image:radial-gradient(#4b4d4d 1px,transparent 1px);opacity:.7}html[data-theme=dark] .footer{color:#aaa59d;background:#222425;border-color:#3b3d3d}html[data-theme=dark] .status-tabs{background:#2c2e2f}html[data-theme=dark] .status-tabs button{color:#aaa69f}html[data-theme=dark] .status-tabs button:hover{color:#f0ece5}html[data-theme=dark] .status-tabs button.active{color:#f0ece5;background:#414344;box-shadow:0 2px 7px #00000047}html[data-theme=dark] .project-trigger,html[data-theme=dark] .align-button{color:#ddd8d0;background:#2b2d2e;border-color:#484a4b;box-shadow:0 2px 6px #0003}html[data-theme=dark] .project-action{color:#aaa69e}html[data-theme=dark] .project-action:hover{color:#f0ece5;background:#37393a}html[data-theme=dark] .project-menu,html[data-theme=dark] .color-menu{color:#e7e2da;background:#2b2d2e;border-color:#4a4c4d;box-shadow:0 14px 32px #0000006b}html[data-theme=dark] .project-list button{color:#ddd8d0}html[data-theme=dark] .project-list button:hover,html[data-theme=dark] .create-project:hover{background:#383a3b}html[data-theme=dark] .project-list button.active{color:#b8deb7;background:#344337}html[data-theme=dark] .create-project{color:#ddd8d0;border-color:#464849}html[data-theme=dark] .complete-dropzone{color:#aaa69f;background:#2a2c2de0;border-color:#626464;box-shadow:0 5px 18px #00000040}html[data-theme=dark] .complete-dropzone.drag-over{color:#a8d5a5;background:#2f4531f2;border-color:#75a771}html[data-theme=dark] .empty-state h2{color:#e7e2d9}html[data-theme=dark] .empty-state p{color:#aaa59d}html[data-theme=dark] .search-empty-icon{color:#aaa69f;background:#303233}html[data-theme=dark] .note{box-shadow:2px 4px 5px #00000047,8px 15px 24px #00000040}html[data-theme=dark] .note[data-color=yellow]{background-color:#c9ad4d}html[data-theme=dark] .note[data-color=pink]{background-color:#c6817d}html[data-theme=dark] .note[data-color=blue]{background-color:#78aebb}html[data-theme=dark] .note[data-color=green]{background-color:#87ad78}@media(max-width:400px){:root{--note-width: 190px;--note-height: 180px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}