@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap";:root{--bg:linear-gradient(135deg, #e8f5f3 0%, #dbeafe 50%, #f3e8ff 100%);--bg-color:#eef6f4;--card-bg:#ffffffd9;--card-bg-solid:#fff;--text:#0f172a;--text-sub:#475569;--accent:#009485;--accent-soft:#5bb5a8;--accent-light:#e8f5f3;--accent-glow:#00948526;--border:#0094851f;--shadow:0 2px 12px #00948514;--shadow-hover:0 6px 24px #00948524;--radius:20px;--radius-sm:12px;--pink:#f9a8d4;--pink-light:#fdf2f8;--lavender:#c4b5fd;--lavender-light:#f5f3ff;--peach:#fdba74;--peach-light:#fff7ed;--mint:#6ee7b7;--mint-light:#ecfdf5;--sky:#7dd3fc;--sky-light:#f0f9ff;letter-spacing:.04em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Noto Sans JP,Hiragino Sans,Hiragino Kaku Gothic ProN,Yu Gothic UI,system-ui,sans-serif;font-size:15px;line-height:1.8}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);background-attachment:fixed;min-height:100vh}#root{max-width:1200px;margin:0 auto;padding:32px 24px 80px}button{cursor:pointer;font-family:inherit;font-size:inherit;border:none}input,textarea,select{font-family:inherit;font-size:15px;line-height:1.6}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:32px;animation:.5s ease-out fadeInUp;display:flex}.header h1{color:var(--accent);letter-spacing:-.5px;font-size:28px;font-weight:700}.header-right{align-items:center;gap:10px;display:flex}.main-tabs{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);background:#ffffff80;border-radius:16px;gap:4px;width:fit-content;margin-bottom:28px;padding:4px;animation:.5s ease-out 30ms both fadeInUp;display:flex}.main-tab{color:var(--text-sub);background:0 0;border-radius:12px;align-items:center;gap:8px;padding:10px 28px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.main-tab:hover{color:var(--accent);background:var(--accent-light)}.main-tab.active{background:linear-gradient(135deg, var(--accent), var(--accent-soft));color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.main-tab-badge{text-align:center;background:#ffffff4d;border-radius:10px;min-width:22px;padding:2px 8px;font-size:11px;font-weight:700}.main-tab:not(.active) .main-tab-badge{background:var(--accent-light);color:var(--accent)}.btn-outline{background:var(--card-bg);color:var(--accent);border:1.5px solid var(--accent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;transition:all .15s}.btn-outline:hover{background:var(--accent-light)}.pin-btn{opacity:.3;background:0 0;padding:0 2px;font-size:14px;line-height:1;transition:opacity .15s,transform .15s}.pin-btn:hover{opacity:.7}.pin-btn.pinned{opacity:1;transform:rotate(-30deg)}.card-pinned{position:relative;border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent), var(--shadow)!important}.card-pinned:before{content:"PIN";color:#fff;background:var(--accent);letter-spacing:.5px;border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;position:absolute;top:-8px;right:16px}.kanban-col-done{opacity:.7}.kanban-col-done .kanban-card{opacity:.6}.kanban-col-done .kanban-card-text{text-decoration:line-through}.overdue-badge{color:#ef4444;background:#fef2f2;border:1.5px solid #fca5a5;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:700;animation:2s ease-in-out infinite gentleFloat}.search-bar{margin-bottom:18px;animation:.5s ease-out .12s both fadeInUp;position:relative}.search-input{border:1.5px solid var(--border);background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%;color:var(--text);border-radius:14px;padding:12px 40px 12px 18px;font-size:15px;transition:border-color .2s,box-shadow .2s}.search-input::placeholder{color:var(--text-sub);opacity:.6}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.search-clear{color:var(--text-sub);background:0 0;border-radius:50%;padding:4px 8px;font-size:16px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.search-clear:hover{color:var(--accent);background:var(--accent-light)}.stats{flex-wrap:wrap;gap:12px;margin-bottom:28px;animation:.5s ease-out 50ms both fadeInUp;display:flex}.stat-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--border);align-items:center;gap:10px;min-width:120px;padding:14px 20px;transition:transform .2s,box-shadow .2s;display:flex}.stat-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.stat-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.stat-label{color:var(--text-sub);font-size:13px;font-weight:500}.stat-num{color:var(--text);font-size:24px;font-weight:700}.product-summary{margin-bottom:36px;animation:.5s ease-out .1s both fadeInUp}.section-title{color:var(--accent);margin-bottom:14px;font-size:18px;font-weight:700}.product-summary-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;display:grid}.product-summary-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);flex-direction:column;gap:12px;padding:22px;transition:transform .2s,box-shadow .2s;display:flex}.product-summary-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.ps-header{align-items:center;gap:8px;display:flex}.ps-color-dot{border-radius:50%;flex-shrink:0;width:14px;height:14px}.ps-name{color:var(--text);flex:1;font-size:15px;font-weight:700}.ps-avg{color:var(--accent);font-size:20px;font-weight:700}.ps-bar-track{background:var(--accent-light);border-radius:4px;width:100%;height:8px;overflow:hidden}.ps-bar-fill{border-radius:4px;height:100%;transition:width .4s}.ps-meta{color:var(--text-sub);justify-content:space-between;font-size:13px;font-weight:500;display:flex}.ps-project-list{border-top:1px dashed var(--border);flex-direction:column;gap:8px;padding-top:10px;display:flex}.ps-project-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.ps-project-row-left{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.ps-mini-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.ps-project-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.ps-project-row-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.ps-mini-bar-track{background:var(--accent-light);border-radius:3px;width:64px;height:6px;overflow:hidden}.ps-mini-bar-fill{border-radius:3px;height:100%;transition:width .4s}.ps-project-pct{color:var(--text-sub);text-align:right;width:34px;font-size:13px;font-weight:700}.filters-section{flex-direction:column;gap:10px;margin-bottom:22px;animation:.5s ease-out .15s both fadeInUp;display:flex}.filters{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.filter-group-label{color:var(--accent);margin-right:4px;font-size:13px;font-weight:700}.filter-btn{background:var(--card-bg);color:var(--text-sub);border:1.5px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;padding:7px 16px;font-size:13px;font-weight:700;transition:all .2s}.filter-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.filter-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-soft));color:#fff;box-shadow:0 2px 8px var(--accent-glow);border-color:#0000}.project-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;animation:.5s ease-out .2s both fadeInUp;display:grid}.project-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);flex-direction:column;gap:16px;padding:24px;transition:transform .2s,box-shadow .2s;display:flex}.project-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}.card-header{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.card-header-left{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.card-header h3{word-break:break-all;color:var(--text);font-size:16px;font-weight:700;line-height:1.4}.product-tag{letter-spacing:.3px;border:1.5px solid;border-radius:10px;width:fit-content;padding:3px 10px;font-size:11px;font-weight:700}.card-tags-row{flex-wrap:wrap;gap:6px;display:flex}.priority-tag{border:1.5px solid;border-radius:10px;width:fit-content;padding:2px 10px;font-size:11px;font-weight:700}.priority-select{border:1.5px solid var(--border);background:var(--card-bg-solid);color:var(--text);cursor:pointer;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:500;transition:border-color .2s}.priority-select:focus{border-color:var(--accent);outline:none}.deadline-input{border:1.5px solid var(--border);background:var(--card-bg-solid);color:var(--text);cursor:pointer;border-radius:10px;padding:5px 10px;font-family:inherit;font-size:13px;font-weight:500}.deadline-input:focus{border-color:var(--accent);outline:none}.deadline-banner{border-radius:10px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:700;display:flex}.deadline-banner .deadline-date{opacity:.7;margin-left:auto;font-weight:500}.deadline-banner .deadline-icon{font-weight:900}.deadline-over{color:#dc2626;background:#fef2f2;border:1px solid #fca5a5}.deadline-today{color:#d97706;background:#fffbeb;border:1px solid #fcd34d}.deadline-soon{color:#b45309;background:#fffbeb;border:1px solid #fde68a}.deadline-ok{background:var(--accent-light);color:var(--accent);border:1px solid var(--border)}.card-overdue{border-color:#fca5a5!important;box-shadow:0 2px 12px #ef44441a!important}.phase-badge{white-space:nowrap;color:#fff;border-radius:14px;flex-shrink:0;padding:5px 14px;font-size:12px;font-weight:700;box-shadow:0 2px 6px #0000001a}.card-selects{flex-wrap:wrap;gap:14px;display:flex}.card-select-row{align-items:center;gap:6px;display:flex}.select-label{color:var(--text-sub);font-size:13px;font-weight:500}.phase-select,.product-select{border:1.5px solid var(--border);background:var(--card-bg-solid);color:var(--text);cursor:pointer;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:500;transition:border-color .2s}.phase-select:focus,.product-select:focus{border-color:var(--accent);outline:none}.note-area{color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius-sm);resize:vertical;background:#ffffff80;width:100%;min-height:48px;padding:10px 14px;font-size:14px;line-height:1.7;transition:border-color .2s}.note-area::placeholder{color:var(--text-sub);opacity:.6}.note-area:focus{border-color:var(--accent);background:#fffc;outline:none}.task-section{flex-direction:column;gap:6px;display:flex}.task-section-label{color:var(--accent);letter-spacing:.3px;font-size:13px;font-weight:700}.task-item{border-radius:8px;align-items:center;gap:6px;padding:5px 8px;font-size:14px;font-weight:500;transition:background .15s;display:flex}.task-item:hover{background:var(--accent-light)}.task-item span{flex:1}.task-remove{color:var(--text-sub);opacity:0;background:0 0;border-radius:50%;padding:0 4px;font-size:16px;line-height:1;transition:opacity .15s}.task-item:hover .task-remove{opacity:1}.task-remove:hover{color:#f43f5e;background:#fff1f2}.task-input-row{gap:6px;display:flex}.task-input{border:1.5px solid var(--border);color:var(--text);background:#ffffff80;border-radius:10px;flex:1;padding:8px 14px;font-size:14px;transition:border-color .2s}.task-input::placeholder{color:var(--text-sub);opacity:.6}.task-input:focus{border-color:var(--accent);background:#fffc;outline:none}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-soft));color:#fff;box-shadow:0 2px 8px var(--accent-glow);border-radius:14px;padding:10px 20px;font-size:15px;font-weight:700;transition:transform .15s,box-shadow .15s}.btn-primary:hover{box-shadow:0 4px 14px var(--accent-glow);transform:translateY(-1px)}.btn-sm{border-radius:10px;padding:7px 14px;font-size:13px}.btn-ghost{color:var(--text-sub);background:0 0;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:500;transition:all .15s}.btn-ghost:hover{color:#f43f5e;background:#fff1f2}.card-footer{border-top:1px dashed var(--border);justify-content:space-between;align-items:center;padding-top:10px;display:flex}.updated-at{color:var(--text-sub);font-size:12px;font-weight:500}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#00948514;justify-content:center;align-items:center;animation:.2s ease-out fadeInUp;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg-solid);border-radius:var(--radius);width:440px;max-width:90vw;box-shadow:var(--shadow-hover);border:1px solid var(--border);padding:30px}.modal h2{color:var(--accent);margin-bottom:20px;font-size:20px;font-weight:700}.modal-input{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--accent-light);width:100%;color:var(--text);margin-bottom:18px;padding:12px 16px;font-size:15px;transition:border-color .2s}.modal-input::placeholder{color:var(--text-sub);opacity:.6}.modal-input:focus{border-color:var(--accent);background:#fff;outline:none}.modal-field{margin-bottom:20px}.modal-label{color:var(--accent);margin-bottom:8px;font-size:14px;font-weight:700;display:block}.modal-select{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card-bg-solid);width:100%;color:var(--text);cursor:pointer;padding:10px 14px;font-size:15px;font-weight:500}.modal-select:focus{border-color:var(--accent);outline:none}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.btn-cancel{background:var(--accent-light);color:var(--text-sub);border-radius:14px;padding:10px 20px;font-size:15px;font-weight:500;transition:background .15s}.btn-cancel:hover{background:#dbeafe}.empty{text-align:center;color:var(--text-sub);grid-column:1/-1;padding:60px 20px;font-size:15px;font-weight:500}.progress-section{flex-direction:column;gap:4px;display:flex}.progress-header{justify-content:space-between;align-items:center;display:flex}.progress-label{color:var(--accent);font-size:13px;font-weight:700}.progress-value{color:var(--accent);font-size:16px;font-weight:700}.progress-bar-track{background:var(--accent-light);border-radius:5px;width:100%;height:10px;overflow:hidden}.progress-bar-fill{border-radius:5px;min-width:0;height:100%;transition:width .4s}.progress-slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:4px;margin-top:-2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg, var(--accent), var(--accent-soft));width:16px;height:16px;box-shadow:0 2px 6px var(--accent-glow);cursor:grab;border:2.5px solid #fff;border-radius:50%;transition:transform .15s}.progress-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.progress-slider::-moz-range-thumb{background:linear-gradient(135deg, var(--accent), var(--accent-soft));width:16px;height:16px;box-shadow:0 2px 6px var(--accent-glow);cursor:grab;border:2.5px solid #fff;border-radius:50%}.progress-slider::-webkit-slider-runnable-track{background:0 0;height:2px}.stat-card-avg{background:linear-gradient(135deg, var(--accent-light), var(--lavender-light));border:1px solid #00948533}.avg-ring{background:conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--accent-light) calc(var(--pct) * 1%));width:52px;height:52px;box-shadow:0 2px 8px var(--accent-glow);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.avg-ring-num{width:42px;height:42px;color:var(--accent);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.task-board{margin-top:40px;margin-bottom:40px;animation:.5s ease-out .15s both fadeInUp}.task-board-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.task-board-count{color:var(--accent);background:var(--accent-light);border-radius:12px;padding:5px 14px;font-size:13px;font-weight:700}.task-board-add-row{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.task-board-add-row .product-select{min-width:180px}.task-board-add-row .task-input{flex:1;min-width:200px}.card-task-count{background:var(--accent-light);color:var(--accent);border-radius:8px;margin-left:10px;padding:2px 8px;font-size:11px;font-weight:700}.kanban{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.kanban-col{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);border:1px solid var(--border);background:#ffffff80;flex-direction:column;min-height:200px;display:flex}.kanban-col-header{border-bottom:1px dashed var(--border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.kanban-col-title{color:var(--text);font-size:14px;font-weight:700}.kanban-col-count{color:var(--accent);background:var(--accent-light);border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;font-weight:700;display:flex}.kanban-col-body{flex-direction:column;flex:1;gap:8px;padding:10px;display:flex}.kanban-empty{text-align:center;color:var(--text-sub);opacity:.4;padding:20px 0;font-size:14px}.kanban-card{background:var(--card-bg-solid);border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--border);align-items:flex-start;gap:10px;padding:14px 16px;transition:transform .15s,box-shadow .15s;display:flex;position:relative}.kanban-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.kanban-card-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:5px}.kanban-card-content{flex:1;min-width:0}.kanban-card-text{color:var(--text);word-break:break-word;font-size:14px;font-weight:500;line-height:1.5}.kanban-card-project{color:var(--text-sub);margin-top:4px;font-size:12px;font-weight:500}.kanban-status-select{border:1px solid var(--border);background:var(--card-bg-solid);color:var(--text-sub);cursor:pointer;opacity:0;border-radius:8px;flex-shrink:0;padding:3px 6px;font-size:11px;transition:opacity .15s}.kanban-card:hover .kanban-status-select{opacity:1}.kanban-card-remove{color:var(--text-sub);opacity:0;background:0 0;border-radius:50%;flex-shrink:0;padding:2px 6px;font-size:14px;transition:opacity .15s}.kanban-card:hover .kanban-card-remove{opacity:1}.kanban-card-remove:hover{color:#f43f5e;background:#fff1f2}@media (width<=1100px){.kanban{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.kanban{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.project-grid,.product-summary-grid,.kanban{grid-template-columns:1fr}.stats{gap:8px}.stat-card{flex:1;min-width:0;padding:10px 14px}}