:root{font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,Meiryo,sans-serif;color:#263c35;background:#f7f8f5;font-synthesis:none;--yellow:#fae89f;--pink:#f2d8dc;--blue:#d6e6f2;--green:#dce9ce}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #367965;outline-offset:4px}.topbar{height:84px;padding:0 4%;display:flex;align-items:center;border-bottom:1px solid #dfe4dc;background:#fff;gap:32px}.brand{display:flex;align-items:center;gap:12px;color:#244d40;text-decoration:none;font-size:26px;font-weight:700;letter-spacing:3px}.brand-icon{display:grid;place-items:center;background:#254e43;color:#fff;border-radius:9px;width:38px;height:38px;font-size:27px}.brand-en{font-size:11px;letter-spacing:2px;align-self:flex-end;margin-bottom:4px}.tagline,.local-label{font-size:13px;color:#758177}.local-label{margin-left:auto}main{max-width:1600px;margin:auto;padding:43px 4% 20px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#728477;margin-bottom:11px}h1{font-size:28px;letter-spacing:1px;margin:0;font-weight:650;display:flex;align-items:center;gap:14px}#count{font-size:13px;letter-spacing:0;border:1px solid #dbe0d5;background:#ebeee6;min-width:28px;height:27px;border-radius:8px;display:grid;place-items:center}.description{font-size:14px;color:#7a847c;margin:13px 0 0}.tools{display:flex;gap:24px;align-items:center}.palette{border:0;margin:0;padding:0;display:flex;gap:2px}.palette legend{font-size:12px;color:#778278;margin-bottom:4px}.swatch{width:38px;height:42px;display:grid;place-items:center;position:relative;cursor:pointer}.swatch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.swatch span{height:24px;width:24px;border-radius:50%;background:var(--paper);border:1px solid #00000010;pointer-events:none}.swatch input:checked+span{outline:1.5px solid #36594b;outline-offset:4px}.swatch input:focus-visible+span{outline:3px solid #36594b}.yellow{--paper:var(--yellow)}.pink{--paper:var(--pink)}.blue{--paper:var(--blue)}.green{--paper:var(--green)}.add{border:0;border-radius:8px;background:#254e43;color:#fff;padding:12px 22px;min-height:49px;font-size:14px;box-shadow:0 3px 5px #183b2210;white-space:nowrap}.add:hover{background:#173f32}.add span{font-size:23px;vertical-align:-1px;margin-right:6px}.board-frame{border:1px solid #dce2d8;border-radius:12px;overflow:hidden;background:#f0f2eb}.board-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 22px;background:#fff;border-bottom:1px solid #e0e5db;font-size:11px;letter-spacing:1px;color:#778476}.meta-divider{margin:0 12px;color:#bdc6b9}#save-status{font-size:12px;letter-spacing:0;text-align:right}#board{position:relative;background-image:radial-gradient(#c9d2c3 .8px,transparent .8px);background-size:20px 20px;min-height:480px}.note{position:absolute;width:var(--note-width,248px);height:238px;background:var(--paper);border-radius:3px 3px 16px;box-shadow:1px 5px 10px #3f482019;display:flex;flex-direction:column;transition:box-shadow .2s}.note:focus-within{box-shadow:0 0 0 2px #42594760,2px 7px 12px #3f48201c;z-index:2}.note.dragging{z-index:10;box-shadow:4px 12px 20px #27322330}.note-header{display:flex;align-items:center;padding:4px 7px 0 17px;flex-shrink:0}.drag-handle{border:0;background:none;display:flex;flex:1;align-items:center;justify-content:space-between;min-height:44px;color:#575b4470;cursor:grab;touch-action:none;padding:0 10px 0 0}.dragging .drag-handle{cursor:grabbing}.note-label{font-size:10px;letter-spacing:2px}.drag-handle>span:last-child{font-size:24px}.delete{background:transparent;color:#536045;border:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}.delete:hover{background:#0000000a;color:#842e34}.delete svg{width:17px;height:17px}.note textarea{border:0;background:transparent;resize:none;outline:none;padding:9px 20px 22px;width:100%;flex:1;min-height:0;font-size:16px;line-height:1.8;color:#3f4434}.note textarea::placeholder{color:#777855}#empty{text-align:center;padding:100px 20px 70px;color:#53624e}#empty[hidden]{display:none}.empty-mark{display:grid;place-items:center;margin:0 auto 26px;width:58px;height:58px;border:1px dashed #94a48b;border-radius:14px;font-size:27px;color:#7f9576}#empty h2{font-size:18px;font-weight:500;letter-spacing:1px}#empty p{font-size:14px;color:#889080}#empty-add{border:0;background:transparent;color:#365e46;padding:16px;min-height:48px;font-size:13px}#empty-add span{margin-left:15px}footer{display:flex;justify-content:space-between;gap:20px;padding-top:18px;color:#899181;font-size:12px}footer>span:first-child>span{font-size:17px;margin-right:4px}@media(min-width:1280px){#board{min-height:560px!important}}@media(max-width:800px){.topbar{height:72px;gap:18px}.tagline{display:none}main{padding-top:30px}.toolbar{align-items:flex-start}.tools{gap:12px}.add{padding:12px 15px}.description{font-size:13px}h1{font-size:25px}.brand-en{display:none}footer>span:last-child{display:none}}@media(max-width:600px){.topbar{height:66px;padding:0 20px}.brand{font-size:23px}.brand-icon{width:33px;height:33px}.local-label{font-size:11px}main{padding:27px 16px 20px}.toolbar{display:block;margin-bottom:20px}.eyebrow{font-size:10px}h1{font-size:25px}.description{font-size:12px;margin-top:10px}.tools{justify-content:space-between;margin-top:23px;gap:12px}.palette legend{font-size:11px}.swatch{width:36px;height:44px}.add{min-height:48px;font-size:13px;padding:10px 14px}.board-meta{padding:14px 12px;gap:8px;letter-spacing:0;font-size:10px}.meta-divider{margin:0 5px}#save-status{font-size:10px;max-width:48%}#empty{padding:95px 14px 60px}#empty h2{font-size:15px;letter-spacing:0}#empty p{font-size:12px}footer{font-size:10px;line-height:1.7}.delete,.drag-handle{min-height:44px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.note-color{display:flex;align-items:center;gap:10px;margin:0 14px 8px;flex-shrink:0;border-top:1px solid #263c3515;color:#46543f;font-size:14px}.note-color select{font:inherit;color:inherit;background:transparent;border:0;border-radius:4px;min-width:0;flex:1;min-height:44px;padding:6px 8px;cursor:pointer}.note-color select:focus-visible{outline:2px solid #36594b;outline-offset:0}.note-color option{background:#fff;color:#263c35}.note textarea{padding-bottom:8px}.note textarea{font-family:Yomogi,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;font-size:18px;font-weight:400;line-height:1.8}.note{transform:rotate(var(--note-tilt, -.8deg));transform-origin:50% 35%;background-image:linear-gradient(165deg,#ffffff18 0%,transparent 55%,#00000005 100%);box-shadow:0 1px 2px #34351d12,2px 6px 9px -3px #34351d26,5px 13px 16px -10px #34351d35;transition:transform .18s ease,box-shadow .18s ease}.note:focus-within{transform:rotate(0);box-shadow:0 0 0 2px #42594760,2px 6px 12px -3px #34351d2b,4px 14px 20px -10px #34351d35}.note.dragging{transform:rotate(0);box-shadow:0 2px 4px #34351d12,5px 12px 18px -4px #34351d35,9px 22px 28px -12px #34351d40}.board-frame{border:8px solid #b98853;border-top-color:#d7b185;border-left-color:#cda272;border-right-color:#a87948;border-bottom-color:#a87948;border-radius:8px;background:#cfa56f;box-shadow:0 1px #78532f55,0 7px 18px #6046261c}.board-meta{background:#faf5e9;border-bottom:1px solid #9d743f66;color:#75654f}#board{background-color:#cfa56f;background-image:linear-gradient(135deg,#fff2d51c,transparent 50%,#6a40150a),url(/cork-grain.svg);background-size:100% 100%,240px 240px;box-shadow:inset 0 2px 7px #65401e40}#empty{color:#4d3927}#empty p{color:#614a32}.empty-mark{color:#634629;border-color:#79552f;background:#fff5dd24}#empty-add{color:#284836;background:#fff9edb8;border-radius:7px;margin-top:8px}#empty-add:hover{background:#fff9ed}@media(max-width:600px){.board-frame{border-width:6px}.board-meta{padding-right:10px;padding-left:10px}}.search-toolbar{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#52604e;font-size:14px;flex-wrap:wrap}.search-toolbar>label{white-space:nowrap}.search-field{display:flex;align-items:center;flex:1;max-width:440px;min-width:0;background:#fff;border:1px solid #cbd3c4;border-radius:8px;overflow:hidden}.search-field:focus-within{outline:2px solid #36594b;outline-offset:2px}.search-field input{width:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:12px;font:inherit;font-size:16px;min-height:46px;color:#263c35}.search-field button{flex-shrink:0;border:0;background:transparent;color:#365e46;min-height:44px;padding:0 12px;font-size:13px}#search-count{font-variant-numeric:tabular-nums;white-space:nowrap}.note[hidden],#no-results[hidden],#clear-search[hidden]{display:none}#no-results{margin:0;text-align:center;padding:110px 20px;color:#4d3927;font-size:16px;line-height:1.9}@media(max-width:600px){.search-toolbar{gap:10px}.search-toolbar>label{width:100%;font-size:13px}.search-field{max-width:none}.search-field button{padding:0 8px}#search-count{font-size:13px}}.status-filters{display:flex;gap:4px;margin-bottom:18px;width:fit-content;max-width:100%;padding:4px;background:#e8ede4;border-radius:10px}.status-filters button{border:0;border-radius:7px;min-height:44px;padding:10px 22px;color:#52604e;background:transparent;font-size:14px}.status-filters button[aria-pressed=true]{background:#254e43;color:#fff;box-shadow:0 2px 5px #254e4320}#completed-zone{position:sticky;top:8px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:18px;border:2px dashed #819677;border-radius:10px;background:#edf3e8;box-shadow:0 3px 10px #263c3510;color:#36543b}#completed-zone strong{font-size:16px}#completed-count{font-size:13px;font-weight:400;margin-left:12px}#completed-zone p{font-size:13px;margin:5px 0 0;line-height:1.6}#show-completed{flex-shrink:0;min-height:44px;background:#fff;border:1px solid #9bae90;border-radius:7px;color:#36543b;padding:8px 12px;font-size:13px}#completed-zone.accepting{border-style:solid;border-color:#42774b}#completed-zone.drop-hover{background:#d0e7bd;box-shadow:0 0 0 3px #42774b40}.complete-toggle{flex-shrink:0;border:0;background:transparent;border-radius:50%;width:44px;height:44px;font-size:25px;color:#42553b;display:grid;place-items:center;margin-left:-9px}.complete-toggle:hover{background:#ffffff50}.is-completed .complete-toggle{color:#fff;background:#365e46;font-size:21px;width:36px;height:36px;margin:4px 4px 4px -5px}.is-completed{background-image:linear-gradient(#ffffff36,#ffffff36);border:1px solid #365e4640}.is-completed textarea{text-decoration:line-through;text-decoration-color:#52634a80;color:#5d6654}@media(max-width:600px){#completed-zone{padding:10px;gap:8px}#completed-zone strong{font-size:14px}#completed-count{margin-left:5px;font-size:12px}#completed-zone p{font-size:11px}#show-completed{font-size:12px;padding:7px 9px}.status-filters{width:100%}.status-filters button{flex:1;padding:10px 12px}.is-completed .complete-toggle{width:44px;height:44px;margin:0 0 0 -9px}}.project-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;margin-bottom:28px;background:#eef1e9;border:1px solid #d5ddce;border-radius:10px;font-size:14px;color:#40533b}.project-toolbar>label{white-space:nowrap}#project-select{font:inherit;min-height:44px;min-width:0;flex:1;max-width:360px;border:1px solid #bac8b1;border-radius:7px;background:#fff;color:#263c35;padding:8px 12px;text-overflow:ellipsis}.project-actions{display:flex;gap:8px;flex-wrap:wrap}.project-actions button,.dialog-actions button{min-height:44px;border:1px solid #bdcbb4;border-radius:7px;background:#fff;color:#36543b;padding:8px 14px;font:inherit;font-size:14px}#project-delete{color:#95423c}#project-dialog{width:min(460px,calc(100% - 32px));max-height:85vh;overflow:auto;border:1px solid #cbd5c3;border-radius:12px;padding:26px;color:#263c35;box-shadow:0 18px 60px #17291e40}#project-dialog::backdrop{background:#17291e70}#project-dialog h2{font-size:21px;margin:0 0 18px}#project-dialog-description{font-size:14px;line-height:1.8;overflow-wrap:anywhere}#project-name-label{display:block;font-size:14px;margin:14px 0 8px}#project-name{width:100%;min-height:46px;font:inherit;font-size:16px;border:1px solid #a7b79b;border-radius:6px;padding:10px}#project-name[hidden],#project-name-label[hidden]{display:none}#project-error{color:#a13730;font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap}#project-submit{background:#254e43;color:#fff}@media(max-width:600px){.project-toolbar{gap:10px;padding:12px}.project-toolbar>label{width:100%;font-size:13px}#project-select{max-width:none;width:100%;flex-basis:100%}.project-actions{width:100%;gap:6px}.project-actions button{flex:1;padding:8px;font-size:12px}}#align-notes{min-height:48px;border:1px solid #b5c3ac;border-radius:8px;background:#fff;color:#36543b;padding:10px 16px;font:inherit;font-size:14px;white-space:nowrap}#align-notes:hover{background:#edf3e8}.tools{flex-wrap:wrap}@media(max-width:600px){.tools{gap:10px}.tools .palette{flex-basis:100%}.tools .add{flex:1}#align-notes{min-height:48px}}@media(max-width:600px){.brand{font-size:18px;letter-spacing:1px;gap:8px}.topbar .local-label{display:none}}#theme-toggle{flex-shrink:0;min-height:44px;padding:8px 13px;border:1px solid #bac8b1;border-radius:8px;background:#fff;color:#36543b;font:inherit;font-size:14px;margin-left:auto}[data-theme=dark]{color-scheme:dark;background:#17201c;color:#e3eade}[data-theme=dark] .topbar{background:#1e2b24;border-color:#3b4a3d}[data-theme=dark] .brand{color:#e3eade}[data-theme=dark] .brand-icon{background:#405c4c}[data-theme=dark] :is(.tagline,.local-label,.description,.eyebrow,footer){color:#acbca6}[data-theme=dark] :is(.project-toolbar,.status-filters){background:#243128;border-color:#465740;color:#d3dfcb}[data-theme=dark] :is(#theme-toggle,#project-select,.project-actions button,.dialog-actions button,#align-notes,.search-field,#project-name){background:#2b3c30;color:#e3eade;border-color:#63775b}[data-theme=dark] .search-toolbar{color:#c0d0b7}[data-theme=dark] .search-field input{color:#e3eade}[data-theme=dark] .search-field input::placeholder{color:#a9bca0}[data-theme=dark] .search-field button{color:#cce2bf}[data-theme=dark] .palette legend{color:#b6c9aa}[data-theme=dark] .status-filters button{color:#c9d7c1}[data-theme=dark] .status-filters button[aria-pressed=true],[data-theme=dark] :is(.add,#project-submit){background:#a9d1b6;color:#183726}[data-theme=dark] #count{background:#354731;border-color:#617454;color:#e3eade}[data-theme=dark] #project-delete{color:#ffbcb2}[data-theme=dark] #completed-zone{background:#293b2b;border-color:#8aa778;color:#d5e8ca}[data-theme=dark] #completed-zone.drop-hover{background:#405f38;border-color:#bcdda9}[data-theme=dark] #show-completed{background:#344d33;border-color:#8aa778;color:#e4f1dd}[data-theme=dark] .board-frame{border-color:#7a5b3e #513c2a #513c2a #6a5037;background:#806340}[data-theme=dark] .board-meta{background:#302c23;color:#ddcfb6;border-color:#6e5a3e}[data-theme=dark] #board{background-image:linear-gradient(#201b1469,#201b1469),url(/cork-grain.svg)}[data-theme=dark] #empty,[data-theme=dark] #no-results{color:#fff0d7}[data-theme=dark] #empty p{color:#f0dec2}[data-theme=dark] .empty-mark{color:#f0dec2;border-color:#d3b892;background:#30251940}[data-theme=dark] #project-dialog{background:#243128;color:#e3eade;border-color:#63775b}[data-theme=dark] #project-error{color:#ffbcb2}[data-theme=dark] .swatch input:checked+span{outline-color:#d7e9cc}[data-theme=dark] .note{color-scheme:light}[data-theme=dark] .note:focus-within{box-shadow:0 0 0 2px #c6deb8,2px 6px 12px #0005}[data-theme=dark] :is(button,a,select):focus-visible{outline-color:#b8d9a7}@media(max-width:600px){.topbar{gap:8px;padding:0 14px}#theme-toggle{font-size:12px;padding:8px}.topbar .brand{font-size:17px}}
