:root{font-family:Yu Gothic UI,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;color:#24352d;background:#eef3f0;font-synthesis:none;text-rendering:optimizeLegibility;--header-height: 98px;--note-width: 250px;--note-height: 210px;--page-bg: #eef3f0;--page-glow: rgba(84, 137, 106, .17);--text: #24352d;--muted: #63786d;--surface: rgba(255, 255, 255, .72);--surface-hover: rgba(255, 255, 255, .96);--border: rgba(35, 59, 48, .18);--field-bg: rgba(255, 255, 255, .72);--field-text: #22342b;--dialog-bg: #f8fbf9;--dialog-shadow: rgba(37, 60, 49, .25);--board-border: #94603e;--board-bg: #c79668;--focus: #315f49;color-scheme:light}:root[data-theme=dark]{--page-bg: #17231e;--page-glow: rgba(105, 148, 119, .18);--text: #f7f8f3;--muted: #aebfb5;--surface: rgba(255, 255, 255, .07);--surface-hover: rgba(255, 255, 255, .13);--border: rgba(255, 255, 255, .13);--field-bg: #24342d;--field-text: #fff;--dialog-bg: #21332b;--dialog-shadow: rgba(0, 0, 0, .52);--board-border: #815537;--board-bg: #b88658;--focus: #fff;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100vh;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 85% 0%,var(--page-glow),transparent 35%),var(--page-bg);color:var(--text);transition:color .22s ease,background .22s ease}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.project-dialog{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--border);border-radius:20px;color:var(--text);background:var(--dialog-bg);box-shadow:0 24px 80px var(--dialog-shadow)}.project-dialog::backdrop{background:#0a130fb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.project-dialog form{padding:26px}.dialog-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}.dialog-mark{width:34px;height:34px;flex:0 0 auto;border-radius:5px 5px 9px;background:#ffe27a;transform:rotate(-4deg)}.dialog-heading h2{margin:0;font-size:1.2rem}.dialog-heading p{margin:4px 0 0;color:var(--muted);font-size:.85rem}.project-dialog label{display:block;margin-bottom:8px;color:var(--text);font-size:.88rem;font-weight:700}.project-dialog input{width:100%;min-height:48px;padding:0 13px;border:1px solid var(--border);border-radius:11px;outline:0;color:var(--field-text);background:var(--surface);font-size:1rem}.project-dialog input:focus{border-color:#f8d85e;box-shadow:0 0 0 3px #f8d85e24}.dialog-error{min-height:20px;margin:7px 0 3px;color:#ffaaa5;font-size:.8rem}.dialog-actions{display:flex;justify-content:flex-end;gap:9px}.dialog-actions button{min-height:44px;padding:0 18px;border-radius:11px;font-weight:800;cursor:pointer}.dialog-cancel{border:1px solid var(--border);color:var(--text);background:transparent}.dialog-submit{border:0;color:#24382f;background:#f8d85e}.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:0 28px 24px}.app-header{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1560px;width:100%;margin:0 auto}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{width:38px;height:38px;flex:0 0 auto;border-radius:6px 6px 10px;background:#ffe27a;transform:rotate(-4deg);box-shadow:3px 4px #00000038}.brand h1{margin:0;font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:.04em}.brand p{margin:3px 0 0;color:var(--muted);font-size:.88rem}.search-box{width:min(390px,34vw);min-height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--border);border-radius:14px;color:var(--muted);background:var(--surface);transition:border-color .15s ease,background .15s ease}.search-box:focus-within{border-color:#b4911dbf;background:var(--surface-hover)}.search-icon{font-size:1.4rem;line-height:1;transform:rotate(-15deg)}.search-box input{width:100%;min-width:0;border:0;outline:0;color:var(--field-text);background:transparent;font-size:.95rem}.search-box input::placeholder{color:var(--muted)}.search-box input::-webkit-search-cancel-button{cursor:pointer;opacity:.65}.search-count{flex:0 0 auto;color:#f8d85e;font-size:.82rem;font-weight:700;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle{width:46px;height:46px;flex:0 0 auto;padding:0;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--surface);font-size:1.35rem;line-height:1;cursor:pointer;transition:transform .15s ease,background .15s ease}.theme-toggle:hover{background:var(--surface-hover);transform:translateY(-1px)}.save-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;white-space:nowrap}.save-dot{width:7px;height:7px;border-radius:50%;background:#77c98d;box-shadow:0 0 0 4px #77c98d1f}.save-status.saving .save-dot{animation:pulse .65s infinite alternate}.add-button{min-height:48px;border:0;border-radius:14px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:#1c2c25;background:#f8d85e;font-weight:800;box-shadow:0 5px #b4911d,0 10px 24px #0000002e;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.add-button span{font-size:1.35rem;line-height:1}.add-button:hover{background:#ffe57f;transform:translateY(-1px);box-shadow:0 6px #b4911d,0 12px 26px #0003}.add-button:active{transform:translateY(3px);box-shadow:0 2px #b4911d}.add-button:focus-visible,.theme-toggle:focus-visible,.delete-button:focus-visible,.complete-button:focus-visible,.color-button:focus-visible,.status-filter button:focus-visible,.project-controls button:focus-visible,.project-controls select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.board-toolbar{width:100%;max-width:1560px;flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:0 auto 12px}.project-controls{min-width:0;display:flex;align-items:center;gap:7px}.project-controls label{color:var(--muted);font-size:.82rem;font-weight:700}.project-controls select{width:min(230px,20vw);min-height:40px;padding:0 34px 0 12px;border:1px solid var(--border);border-radius:10px;color:var(--field-text);background:var(--field-bg);font-weight:700;cursor:pointer}.project-controls button{min-height:38px;padding:0 11px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--surface);font-size:.8rem;font-weight:700;cursor:pointer}.project-controls button:hover{background:var(--surface-hover)}.project-controls button:disabled{opacity:.35;cursor:not-allowed}.project-controls button.danger:hover{color:#ffd6d3;border-color:#ffaaa573;background:#99312d40}.toolbar-spacer{min-width:0}.status-filter{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.status-filter button{min-width:82px;min-height:38px;padding:0 15px;border:0;border-radius:10px;color:var(--muted);background:transparent;font-weight:700;cursor:pointer}.status-filter button:hover{color:var(--text);background:var(--surface-hover)}.status-filter button.active{color:#24382f;background:#f8d85e;box-shadow:0 2px 8px #0003}.board-wrap{width:100%;max-width:1560px;margin:0 auto;flex:1;min-height:0}.board{position:relative;isolation:isolate;width:100%;height:100%;min-height:480px;overflow:hidden;border:10px solid var(--board-border);border-radius:22px;background:var(--board-bg);box-shadow:inset 0 0 0 3px #a06f46,inset 0 0 45px #3f221140,0 18px 45px #00000047}.board:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.07),transparent 24%),radial-gradient(circle at 80% 70%,rgba(67,33,13,.12),transparent 30%)}.board-grid{position:absolute;inset:0;opacity:.25;background-image:radial-gradient(#6e472b 1px,transparent 1px);background-size:18px 18px}.notes-layer{position:absolute;inset:0}.complete-zone{position:absolute;right:18px;bottom:18px;z-index:900;width:190px;min-height:82px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:12px 16px;border:2px dashed rgba(255,255,255,.72);border-radius:16px;color:#fff;background:#223c30c7;box-shadow:0 8px 22px #391f1133;pointer-events:none;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.complete-zone>span{grid-row:1 / 3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#24432f;background:#aee7b9;font-size:1.25rem;font-weight:900}.complete-zone strong{align-self:end;font-size:.96rem}.complete-zone small{align-self:start;color:#c5d8cd;font-size:.72rem}.complete-zone.drop-active{transform:scale(1.06);background:#20683ef2;box-shadow:0 0 0 6px #aee7b938,0 12px 28px #391f1147}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;color:#321b0ea8;pointer-events:none}.empty-state[hidden]{display:none}.empty-note{width:62px;height:54px;background:#ffe27a8c;border-radius:5px 5px 12px;transform:rotate(-5deg);box-shadow:5px 6px #44271621}.empty-state h2{margin:22px 0 5px;font-size:1.15rem}.empty-state p{margin:0;font-size:.9rem}.note{position:absolute;width:var(--note-width);height:var(--note-height);overflow:hidden;border-radius:5px 5px 18px 6px;color:var(--note-text-color, #372f20);background:var(--note-color, #ffe681);box-shadow:3px 5px #3f28152e,8px 12px 24px #3f281533;transition:box-shadow .18s ease,transform .18s ease}.note:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 24px 24px;border-color:transparent transparent rgba(255,255,255,.28) transparent;pointer-events:none}.note.dragging{z-index:1000!important;transform:rotate(1.5deg) scale(1.02);box-shadow:10px 18px 32px #2a190e52;transition:box-shadow .18s ease,transform .18s ease}.note.search-hidden{display:none}.note.completed{opacity:.68;filter:saturate(.68)}.note.completed textarea{text-decoration:line-through;text-decoration-thickness:2px}.note.completed:before{content:"✓ 完了";position:absolute;right:16px;bottom:13px;z-index:2;padding:4px 9px;border-radius:99px;color:#fff;background:#205b34d1;font-size:.72rem;font-weight:800;pointer-events:none}.note-handle{height:46px;display:flex;align-items:center;justify-content:space-between;padding:5px 7px 0 16px;cursor:grab;touch-action:none}.note.dragging .note-handle{cursor:grabbing}.complete-button{width:32px;height:32px;flex:0 0 auto;padding:0;border:2px solid currentColor;border-radius:50%;color:inherit;background:transparent;opacity:.55;font-weight:900;cursor:pointer}.complete-button:hover{opacity:1;background:#ffffff3d}.note.completed .complete-button{color:#fff;border-color:#397b4c;background:#397b4c;opacity:1}.color-picker{position:absolute;left:18px;bottom:14px;z-index:3;display:flex;align-items:center;gap:7px}.color-button{width:22px;height:22px;padding:0;border:2px solid rgba(55,47,32,.18);border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #372f202e;transition:transform .14s ease,box-shadow .14s ease}.color-button:hover{transform:scale(1.13)}.color-button[aria-pressed=true]{box-shadow:0 0 0 2px #4a3c26,0 1px 2px #372f202e;transform:scale(.9)}.color-white{background:#fffdf7}.color-yellow{background:#ffe681}.color-blue{background:#a9d8f5}.color-red{background:#ffaaa5}.color-black{background:#252927;border-color:#ffffff8c}.delete-button{width:38px;height:38px;border:0;border-radius:50%;color:#372f20ad;background:transparent;font-size:1.45rem;line-height:1;cursor:pointer}.delete-button:hover{color:#662c22;background:#fff6}.note textarea{display:block;width:100%;height:calc(100% - 46px);resize:none;border:0;padding:2px 20px 54px;color:inherit;background:transparent;font-size:1rem;line-height:1.6;outline:none}.note textarea::placeholder{color:#372f2073}.note-black .delete-button{color:#ffffffc7}.note-black .delete-button:hover{color:#fff;background:#ffffff29}.note-black textarea::placeholder{color:#ffffff85}.mobile-hint{display:none}@keyframes pulse{to{opacity:.3}}@media(max-width:900px){:root{--header-height: 90px;--note-width: 220px;--note-height: 190px}.app-shell{padding:0 18px 18px}.save-status{display:none}.search-box{width:min(330px,40vw)}.board-toolbar{grid-template-columns:1fr auto}.toolbar-spacer,.project-controls label{display:none}.project-controls select{width:min(210px,28vw)}.project-controls button{padding:0 8px}.board{min-height:440px;border-width:8px;border-radius:18px}.complete-zone{right:12px;bottom:12px}}@media(max-width:600px){:root{--header-height: 166px;--note-width: min(250px, calc(100vw - 76px) );--note-height: 196px}body{overflow:hidden}.app-shell{padding:0 10px 12px}.app-header{min-height:var(--header-height);align-content:center;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0}.brand{gap:9px}.brand-mark{width:30px;height:30px}.brand h1{font-size:1.05rem}.brand p{display:none}.add-button{min-height:50px;padding:0 14px;border-radius:13px;font-size:.92rem}.header-actions{margin-left:auto}.search-box{width:100%;min-height:48px;order:3}.board-toolbar{grid-template-columns:1fr;gap:8px;margin-bottom:9px}.project-controls{width:100%}.project-controls select{min-width:0;width:auto;flex:1}.project-controls button{min-height:42px;padding:0 9px}.board{min-height:320px;border-width:7px;border-radius:15px}.status-filter{width:100%}.status-filter button{min-width:0;flex:1;min-height:42px;padding:0 8px}.note-handle{height:50px}.note textarea{height:calc(100% - 50px);padding-bottom:56px;font-size:1rem}.delete-button{width:42px;height:42px;font-size:1.55rem}.color-picker{left:16px;bottom:14px;gap:7px}.color-button{width:24px;height:24px}.complete-zone{width:148px;min-height:70px;grid-template-columns:34px 1fr;padding:9px 11px}.complete-zone>span{width:28px;height:28px;font-size:1rem}.mobile-hint{display:block;margin:9px 0 0;color:var(--muted);text-align:center;font-size:.78rem}}@media(max-width:370px){.app-header{min-height:var(--header-height)}.brand-mark{display:none}.add-button{padding:0 10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}