:root{font-family:Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,sans-serif;color:#263238;background:#f5f3ee}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,textarea{font:inherit}.app-shell{min-height:100vh;padding:32px clamp(20px,5vw,80px) 48px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto 26px}.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.status-filters{display:flex;padding:3px;border-radius:10px;background:#e5e4dc}.filter-button{min-height:34px;padding:5px 10px;border:0;border-radius:8px;color:#596563;background:transparent;font-size:.8rem;font-weight:700;cursor:pointer}.filter-button.is-active{color:#fff;background:#305d5b;box-shadow:0 2px 5px #24414226}.search-box{display:flex;align-items:center;gap:7px;height:44px;width:220px;padding:0 12px;border:1px solid #d5d2c7;border-radius:11px;color:#6d7774;background:#fffdfa}.search-box span{font-size:1.35rem;line-height:1}.search-box input{width:100%;min-width:0;border:0;outline:0;color:#354340;background:transparent}.search-box:focus-within{border-color:#305d5b;box-shadow:0 0 0 3px #305d5b20}.note-count{min-width:65px;color:#58706e;font-size:.84rem;font-weight:700;white-space:nowrap}.project-bar{display:flex;align-items:center;gap:12px;max-width:1440px;margin:0 auto 16px;padding:10px 12px;border:1px solid #e0ddd3;border-radius:13px;background:#fffdfa}.project-label{color:#6a7774;font-size:.8rem;font-weight:800;white-space:nowrap}.project-select{min-width:180px;max-width:320px;height:38px;padding:0 32px 0 10px;border:1px solid #cbc8bf;border-radius:8px;color:#334542;background:#fff;font-weight:700}.project-actions{display:flex;gap:7px;margin-left:auto}.project-button{min-height:36px;padding:6px 10px;border:1px solid #bbc7c1;border-radius:8px;color:#345a53;background:#fff;font-size:.8rem;font-weight:700;cursor:pointer}.project-button:hover:not(:disabled){border-color:#305d5b;background:#edf5f0}.project-button.is-danger{color:#a74c43;border-color:#e2b6af}.project-button:disabled{color:#a7aaa7;border-color:#d7d7d1;background:#f1f0ec;cursor:not-allowed}.eyebrow{margin:0 0 4px;color:#799090;font-size:.72rem;font-weight:800;letter-spacing:.16em}h1{margin:0;font-family:Segoe Print,Comic Sans MS,Hiragino Maru Gothic ProN,Yu Gothic,cursive;font-size:clamp(2rem,4vw,3rem);line-height:1;color:#244142}.add-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 18px;border:0;border-radius:12px;color:#fff;background:#305d5b;box-shadow:0 7px 16px #2441422b;font-weight:750;cursor:pointer;transition:transform .15s ease,background .15s ease}.align-button{min-height:44px;padding:9px 13px;border:1px solid #95aaa1;border-radius:11px;color:#315d54;background:#fffdfa;font-weight:750;cursor:pointer;transition:transform .15s ease,background .15s ease}.align-button:hover{background:#edf5f0;transform:translateY(-2px)}.add-button span{font-size:1.4rem;line-height:.8}.add-button:hover{background:#234b4a;transform:translateY(-2px)}.add-button:focus-visible,.align-button:focus-visible,.delete-button:focus-visible,.note-content:focus-visible{outline:3px solid #e69942;outline-offset:3px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:22px;max-width:1440px;margin:auto;align-items:stretch}.board-wrap{overflow:hidden;border-radius:20px;box-shadow:0 18px 42px #304a4a16}.board{position:relative;min-height:clamp(560px,calc(100vh - 178px),840px);overflow:hidden;border:6px solid #79502e;border-radius:20px;background-color:#bb7c42;background-image:radial-gradient(ellipse at 15% 20%,#e0a86a66 0 1px,transparent 2px),radial-gradient(ellipse at 75% 45%,#79451f55 0 1px,transparent 2px),radial-gradient(ellipse at 35% 75%,#f0bd7a4d 0 1px,transparent 2px),linear-gradient(125deg,#d49a5e33 25%,transparent 25% 50%,#70432122 50% 75%,transparent 75%);background-size:11px 13px,17px 19px,23px 29px,8px 8px;box-shadow:inset 0 0 22px #5a331e66}.empty-message{position:absolute;inset:50% auto auto 50%;width:min(280px,calc(100% - 40px));margin:0;transform:translate(-50%,-50%);color:#8b908c;text-align:center;line-height:1.7}.completed-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px;padding:26px 20px;border:2px dashed #75988c;border-radius:18px;color:#315c52;background:#e6f1eb;text-align:center;transition:background .15s ease,border-color .15s ease,transform .15s ease}.completed-zone.is-drop-target{border-color:#2b6e5e;background:#cfe8dc;transform:scale(1.02)}.completed-zone h2{margin:10px 0 6px;font-size:1.1rem}.completed-zone p{margin:0;color:#557269;font-size:.86rem;line-height:1.65}.completed-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;background:#4d927d;font-size:1.4rem;font-weight:800}.completed-count{margin-top:18px;padding:5px 11px;border-radius:999px;color:#3c7162;background:#ffffffa8;font-size:.8rem;font-weight:700}.note{position:absolute;width:220px;height:200px;display:flex;flex-direction:column;padding:10px 14px 14px;background:#fff09a;border:1px solid #f1dc73;border-radius:3px 3px 8px;box-shadow:3px 5px 10px #5a5a3b33;touch-action:none;transition:box-shadow .15s ease}.note[data-color=yellow]{background:#fff09a;border-color:#f1dc73}.note[data-color=orange]{background:#ffd4aa;border-color:#efb988}.note[data-color=mint]{background:#bce9df;border-color:#91d2c4}.note[data-color=lilac]{background:#d8ccff;border-color:#b8a8e9}.note.is-completed{filter:saturate(.55);opacity:.72}.note.is-completed .note-content{color:#596863;text-decoration:line-through;text-decoration-thickness:2px}.note.is-dragging{cursor:grabbing;box-shadow:8px 12px 20px #293e3d4a;z-index:10}.note-header{display:flex;justify-content:space-between;align-items:center;height:26px;margin-bottom:4px}.drag-handle{display:inline-flex;align-items:center;min-width:42px;height:34px;color:#5c6660;font-size:1.5rem;line-height:1;cursor:grab;-webkit-user-select:none;user-select:none}.complete-button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:2px solid #63736d;border-radius:50%;color:transparent;background:#fff6;font-size:.9rem;font-weight:900;cursor:pointer}.complete-button[aria-pressed=true]{border-color:#2e8069;color:#fff;background:#3b947a}.color-picker{display:flex;align-items:center;gap:4px}.color-option{width:16px;height:16px;padding:0;border:1px solid #6a5d49;border-radius:50%;cursor:pointer}.color-option.is-yellow{background:#fff09a}.color-option.is-orange{background:#ffd4aa}.color-option.is-mint{background:#bce9df}.color-option.is-lilac{background:#d8ccff}.color-option[aria-pressed=true]{outline:2px solid #305d5b;outline-offset:2px}.delete-button{width:36px;height:36px;border:0;border-radius:50%;color:#665844;background:#ffffff78;font-size:1.45rem;line-height:1;cursor:pointer}.delete-button:hover{background:#fff;color:#a53f35}.note-content{width:100%;min-height:0;flex:1;resize:none;padding:8px 3px;border:0;outline:none;color:#354340;background:transparent;font-family:Segoe Print,Comic Sans MS,Hiragino Maru Gothic ProN,Yu Gothic,cursive;font-size:1rem;line-height:1.6;letter-spacing:.02em}.note-content::placeholder{color:#74766b}@media(max-width:767px){.app-shell{padding:20px 14px 30px}.toolbar{align-items:flex-start;gap:14px;margin-bottom:18px}.toolbar-actions{width:100%;justify-content:flex-start;gap:8px}.status-filters{order:1;width:100%}.filter-button{flex:1;min-height:40px}.search-box{flex:1 1 190px;width:auto;height:48px}.project-bar{align-items:stretch;flex-wrap:wrap;gap:8px;margin-bottom:14px}.project-label{display:flex;align-items:center}.project-select{flex:1;min-width:0;max-width:none}.project-actions{width:100%;margin-left:0}.project-button{flex:1;min-height:42px;padding:6px 7px;font-size:.76rem}h1{font-size:2rem}.add-button{min-height:52px;padding:10px 14px;font-size:.88rem}.align-button{min-height:52px;padding:10px 13px;font-size:.88rem}.workspace{grid-template-columns:1fr;gap:14px}.board{min-height:calc(100vh - 235px);border-radius:14px}.board-wrap{border-radius:14px}.completed-zone{min-height:150px;padding:20px}.note{width:176px;height:180px;padding:10px 12px 12px}.color-picker{gap:3px}.color-option{width:15px;height:15px}.note-content{font-size:16px}}