:root{font-family:DM Sans,Noto Sans JP,sans-serif;color:#282823;background:#f5f1e8;font-synthesis:none;--ink: #282823;--muted: #77766e;--cream: #f5f1e8;--line: #d9d4c8;--accent: #22231f;--note-size: 228px}*{box-sizing:border-box}.theme-toggle{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:12px;white-space:nowrap;cursor:pointer}.theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}:root[data-theme=dark]{color-scheme:dark;color:#eceee5;background:#20231f;--ink: #eceee5;--muted: #b2b7aa;--cream: #20231f;--line: #454b40}[data-theme=dark] body{background:radial-gradient(circle at 8% 4%,#30382e,transparent 25%),var(--cream)}[data-theme=dark] .topbar{background:#20231feb}[data-theme=dark] .project-bar,[data-theme=dark] .search-box,[data-theme=dark] .status-filter{border-color:var(--line);background:#2b3028}[data-theme=dark] .project-select,[data-theme=dark] .filter-button.is-selected{background:#434c3e;color:var(--ink)}[data-theme=dark] .project-select-label,[data-theme=dark] .project-actions button,[data-theme=dark] .filter-button,[data-theme=dark] .note-count,[data-theme=dark] .filter-empty,[data-theme=dark] footer{color:var(--muted)}[data-theme=dark] .project-actions button:first-child,[data-theme=dark] .project-actions button:hover,[data-theme=dark] .project-actions button:focus-visible{background:#434c3e;color:var(--ink)}[data-theme=dark] .project-actions button:last-child:hover{background:#603b36;color:#ffddd4}[data-theme=dark] .board{background:#282e25;border-color:var(--line);box-shadow:0 14px 40px #0003}[data-theme=dark] .board-grid{background-image:radial-gradient(#65705c 1px,transparent 1px)}[data-theme=dark] .completed-zone{background:#303a2bf0;border-color:#7d8f72;color:var(--ink)}[data-theme=dark] .completed-zone small{color:var(--muted)}[data-theme=dark] .completed-zone.is-drop-target{background:#46613c;border-color:#b4d7a5}[data-theme=dark] .eyebrow{color:#e0ab89}[data-theme=dark] .new-color-choice.selected{box-shadow:0 0 0 2px var(--cream),0 0 0 3px #d4ddcc}[data-theme=dark] .sticky-note{color-scheme:light}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100vh;background:radial-gradient(circle at 8% 4%,rgba(255,255,255,.8),transparent 25%),var(--cream)}button,textarea{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:78px;padding:0 clamp(24px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f5f1e8e0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;letter-spacing:-.02em}.brand-mark{width:27px;height:27px;position:relative;display:block}.brand-mark span{position:absolute;width:16px;height:16px;border-radius:3px;border:1.5px solid #252620}.brand-mark span:nth-child(1){left:0;top:1px;background:#ffce55;transform:rotate(-7deg)}.brand-mark span:nth-child(2){right:0;top:3px;background:#f28d76;transform:rotate(7deg)}.brand-mark span:nth-child(3){left:6px;bottom:0;background:#91cdb5;transform:rotate(2deg)}.topbar-actions{display:flex;align-items:center;gap:28px}.save-status{color:var(--muted);margin:0;font-size:12px;display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;border-radius:50%;background:#72aa82;box-shadow:0 0 0 3px #72aa8224}.new-color-controls{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;white-space:nowrap}.new-color-picker{display:flex;align-items:center;gap:5px}.new-color-choice{width:18px;height:18px;padding:0;border:1px solid rgba(51,48,42,.22);border-radius:50%;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.new-color-choice:hover,.new-color-choice:focus-visible{transform:scale(1.13);outline:none}.new-color-choice.selected{box-shadow:0 0 0 2px #f5f1e8f2,0 0 0 3px #33302a8c}.add-button,.empty-add-button{border:0;border-radius:8px;background:var(--accent);color:#fff;min-height:42px;padding:0 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 5px 14px #22231f24;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.add-button span{font-size:19px;line-height:0;vertical-align:-1px;margin-right:3px}.add-button:hover,.empty-add-button:hover{background:#3a3b34;transform:translateY(-1px);box-shadow:0 7px 18px #22231f33}.add-button:active,.empty-add-button:active{transform:translateY(0)}.workspace{width:100%;max-width:1500px;margin:0 auto;padding:36px clamp(24px,5vw,72px) 40px;flex:1}.project-bar{display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:30px;padding:7px 10px 7px 14px;border:1px solid #d8d1c3;border-radius:10px;background:#ffffff57}.project-select-label{color:#807b71;font-size:11px;font-weight:600;white-space:nowrap}.project-select{min-width:180px;max-width:360px;flex:1;height:33px;padding:0 30px 0 9px;border:0;border-radius:6px;outline:0;background:#fffdf8;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.project-select:focus{box-shadow:0 0 0 3px #96897329}.project-actions{display:flex;align-items:center;gap:5px}.project-actions button{min-height:32px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:#716d65;font-size:11px;cursor:pointer;transition:background .15s,color .15s}.project-actions button:hover,.project-actions button:focus-visible{background:#ffffffb3;color:var(--ink);outline:none}.project-actions button:first-child{background:#e4ddd0;color:#4d4c47}.project-actions button:last-child:hover{background:#f4ded9;color:#8f5148}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px;gap:24px}.eyebrow{margin:0 0 10px;color:#a06e56;font-size:10px;font-weight:700;letter-spacing:.18em}h1{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.045em;font-weight:600}.intro-copy{color:var(--muted);font-size:13px;margin:11px 0 0}.board-tools{display:flex;align-items:center;gap:20px}.search-box{width:min(235px,30vw);height:36px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid #d4cec1;border-radius:8px;background:#ffffff6b;color:#8d897e}.search-icon{font-size:21px;line-height:1;transform:rotate(-20deg)}.search-box input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.search-box:focus-within{border-color:#aba293;box-shadow:0 0 0 3px #9689731f}.note-count{margin:0 0 3px;color:#9a978e;font-size:11px;white-space:nowrap;letter-spacing:.1em}.note-count strong{color:var(--ink);font-size:17px;margin-right:4px}.status-filter{display:flex;align-items:center;padding:3px;border:1px solid #d4cec1;border-radius:8px;background:#fff6}.filter-button{min-height:27px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:#8d897e;font-size:11px;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}.filter-button:hover{color:var(--ink)}.filter-button.is-selected{background:#fffdf8;color:var(--ink);box-shadow:0 1px 4px #3e372d1c}.board{width:100%;min-height:610px;height:calc(100vh - 305px);max-height:850px;position:relative;overflow:hidden;border:1px solid #d8d1c3;border-radius:14px;background:#ebe4d7;box-shadow:inset 0 1px #ffffff80,0 14px 40px #3f362a0f}.board-grid{position:absolute;inset:0;opacity:.52;background-image:radial-gradient(#c9c1b2 1px,transparent 1px);background-size:24px 24px}.completed-zone{position:absolute;z-index:2;right:18px;bottom:18px;width:226px;min-height:76px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1.5px dashed #b5aa99;border-radius:10px;background:#f7f4ecc7;color:#756f64;box-shadow:0 5px 15px #3f362a0f;pointer-events:none;transition:border-color .16s,background .16s,transform .16s}.completed-zone.is-drop-target{z-index:1001;border-color:#8e9f8b;background:#e4efe1e6;transform:scale(1.03)}.completed-zone-icon{width:25px;height:25px;display:grid;place-items:center;border:1.5px solid #a8a093;border-radius:50%;color:#7d8f7a;font-size:16px}.completed-zone strong,.completed-zone small{display:block}.completed-zone strong{font-size:12px;font-weight:600}.completed-zone small{margin-top:3px;color:#9a9387;font-size:10px}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;transition:opacity .2s}.empty-state[hidden]{display:none}.filter-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8d897e;font-size:13px}.filter-empty[hidden]{display:none}.empty-illustration{width:108px;height:82px;position:relative;margin-bottom:18px}.empty-illustration span{position:absolute;width:62px;height:62px;border-radius:5px;box-shadow:0 8px 18px #463f3314}.empty-illustration span:nth-child(1){background:#f5caca;left:1px;top:13px;transform:rotate(-9deg)}.empty-illustration span:nth-child(2){background:#bcdacb;right:1px;top:7px;transform:rotate(8deg)}.empty-illustration span:nth-child(3){background:#f6d979;left:25px;top:0;transform:rotate(-1deg)}.empty-state h2{margin:0;font-size:17px;font-weight:600}.empty-state p{color:var(--muted);margin:8px 0 20px;font-size:12px}.empty-add-button{min-height:38px;font-size:12px;padding:0 16px}.sticky-note{position:absolute;width:var(--note-size);height:var(--note-size);border-radius:5px 5px 9px;padding:44px 20px 18px;border:1px solid rgba(92,78,56,.08);box-shadow:0 2px 2px #3e372d14,0 8px 13px #3e372d1f,0 18px 26px #3e372d14;transform:rotate(var(--rotation, 0deg));transition:box-shadow .18s ease,transform .18s ease;touch-action:none;animation:note-in .22s ease-out}.sticky-note:after{content:"";position:absolute;right:0;bottom:0;width:22px;height:22px;background:linear-gradient(135deg,#0000000d 49%,#ffffff73 50%);border-radius:0 0 8px;pointer-events:none}.sticky-note.dragging{z-index:1000!important;transform:rotate(0) scale(1.025);box-shadow:0 4px 5px #3e372d1f,0 18px 35px #3e372d38;transition:box-shadow .12s,transform .12s}.sticky-note.is-filtered-out{display:none}.sticky-note.is-completed{filter:saturate(.72);opacity:.8}.sticky-note.is-completed .note-text{text-decoration:line-through;text-decoration-color:#3c393259}.sticky-note.is-completed:before{content:"完了";position:absolute;right:14px;bottom:11px;padding:2px 6px;border-radius:4px;background:#ffffff6b;color:#3c39328c;font-size:10px;letter-spacing:.08em;pointer-events:none}.complete-note{position:absolute;top:8px;right:43px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid rgba(60,57,50,.35);border-radius:50%;background:#ffffff42;color:#3c393285;cursor:pointer;font-size:17px;line-height:1;opacity:.58;transition:opacity .15s,background .15s,color .15s,transform .15s}.sticky-note:hover .complete-note,.complete-note:focus-visible{opacity:1}.sticky-note.is-completed .complete-note{opacity:1;background:#70926ead;border-color:transparent;color:#fff}.complete-note:hover{transform:scale(1.08)}.note-handle{position:absolute;top:0;left:0;right:0;height:40px;cursor:grab;display:flex;align-items:center;justify-content:center}.note-handle:before{content:"";width:28px;height:3px;border-radius:4px;background:#33302a2e}.dragging .note-handle{cursor:grabbing}.color-picker{position:absolute;top:9px;left:12px;display:flex;gap:5px;z-index:2}.color-choice{width:17px;height:17px;padding:0;border:1px solid rgba(51,48,42,.22);border-radius:50%;cursor:pointer;box-shadow:0 1px 2px #3e372d1f;transition:transform .15s ease,box-shadow .15s ease}.color-choice:hover,.color-choice:focus-visible{transform:scale(1.15);box-shadow:0 2px 5px #3e372d33;outline:none}.color-choice.selected{box-shadow:0 0 0 2px #ffffffc7,0 0 0 3px #33302a8c}.delete-note{position:absolute;top:8px;right:8px;border:0;background:transparent;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;opacity:0;cursor:pointer;font-size:20px;color:#2928249e;transition:opacity .15s,background .15s}.sticky-note:hover .delete-note,.delete-note:focus-visible{opacity:1}.delete-note:hover{background:#ffffff61}.note-text{display:block;border:0;outline:0;resize:none;padding:0;width:100%;height:100%;color:#3c3932;background:transparent;line-height:1.75;font-family:Klee One,Noto Sans JP,cursive;font-weight:600;font-size:16px;overflow:auto;touch-action:pan-y}.note-text::placeholder{color:#3c39326e}.note-text:focus{outline:2px solid rgba(50,50,44,.18);outline-offset:5px;border-radius:2px}footer{min-height:70px;border-top:1px solid var(--line);padding:0 clamp(24px,5vw,72px);display:flex;align-items:center;justify-content:space-between;color:#8a887f;font-size:10px;letter-spacing:.025em}footer p{margin:0}footer span{color:#c48b6d;margin-right:6px}@keyframes note-in{0%{opacity:0;transform:scale(.92) rotate(var(--rotation))}}@media(max-width:767px){:root{--note-size: 176px}.topbar{height:auto;min-height:68px;padding:12px 16px;flex-wrap:wrap;gap:12px}.brand{font-size:16px;gap:9px}.brand-mark{transform:scale(.88);transform-origin:left center;width:25px}.save-status{display:none}.new-color-controls>span{display:none}.new-color-controls{gap:5px}.new-color-choice{width:17px;height:17px}.topbar-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end;width:100%}.add-button{min-height:44px;padding:0 13px;font-size:12px}.workspace{padding:20px 14px 28px}.project-bar{flex-wrap:wrap;gap:7px;margin-bottom:24px;padding:8px 9px}.project-select-label{width:100%}.project-select{min-width:0;flex:1;max-width:none}.project-actions{gap:2px}.project-actions button{padding:0 7px;font-size:10px}.intro{margin-bottom:18px;align-items:end}.board-tools{flex-direction:column;align-items:flex-end;gap:9px}.search-box{width:142px;height:34px}.status-filter{order:2}.completed-zone{right:12px;bottom:12px;left:12px;width:auto;min-height:65px;justify-content:center}.intro-copy{font-size:12px}.note-count{font-size:9px}.note-count strong{font-size:15px}.board{height:calc(100vh - 250px);min-height:520px;border-radius:10px}.sticky-note{padding:42px 15px 14px}.note-text{font-size:18px;line-height:1.65}.delete-note{opacity:.7;width:40px;height:40px;top:2px;right:2px}.complete-note{opacity:.82;top:4px;right:45px;width:36px;height:36px}.note-handle{height:42px}footer{min-height:62px;padding:14px 18px;justify-content:center;text-align:center}footer p:last-child{display:none}}@media(min-width:768px)and (max-width:1100px){:root{--note-size: 205px}.workspace{padding-top:38px}.board{min-height:600px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}