*{margin:0;padding:0;box-sizing:border-box}@media (display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}header{margin-top:10px}}@supports (-webkit-touch-callout:none){body{padding-top:constant(safe-area-inset-top);padding-bottom:constant(safe-area-inset-bottom);padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}body{font-family:'Hiragino Sans','Yu Gothic UI','Meiryo UI',sans-serif;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);min-height:100vh;padding:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:none;touch-action:pan-x pan-y}.container{max-width:1200px;margin:0 auto}header{text-align:center;margin-bottom:20px}header h1{color:#fff;font-size:1.8rem;margin-bottom:15px}.topic-management{margin-bottom:15px}.topic-selector{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.topic-select{padding:8px 12px;border:2px solid #fff;border-radius:6px;background:rgba(255,255,255,.9);color:#333;font-size:1rem;font-weight:500;min-width:150px;cursor:pointer}.topic-select:focus{outline:0;border-color:var(--current-topic-color,#2196f3);box-shadow:0 0 0 2px rgba(33,150,243,.3)}.add-topic-btn,.delete-topic-btn,.edit-topic-btn,.topic-matrix-btn{width:36px;height:36px;border:2px solid #fff;border-radius:6px;background:rgba(255,255,255,.9);color:#333;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.topic-matrix-btn:hover{background:#ff9800;color:#fff;border-color:#ff9800}.add-topic-btn:hover{background:#4caf50;color:#fff;border-color:#4caf50}.edit-topic-btn:hover{background:#2196f3;color:#fff;border-color:#2196f3}.delete-topic-btn:hover{background:#f44336;color:#fff;border-color:#f44336}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;font-weight:700;color:#333}.form-group input[type=text]{width:100%;padding:10px;border:2px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s ease}.form-group input[type=text]:focus{outline:0;border-color:#2196f3}.color-selector{display:flex;align-items:center;gap:10px}.color-selector input[type=color]{width:50px;height:40px;border:none;border-radius:6px;cursor:pointer}.color-presets{display:flex;gap:5px}.color-preset{width:30px;height:30px;border:2px solid #ddd;border-radius:50%;cursor:pointer;transition:transform .2s ease}.color-preset:hover{transform:scale(1.1);border-color:#333}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.save-btn{padding:10px 20px;background:#2196f3;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .2s ease}.save-btn:hover{background:#1976d2}.cancel-btn{padding:10px 20px;background:#757575;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .2s ease}.cancel-btn:hover{background:#616161}.floating-add-btn{position:fixed;bottom:90px;right:20px;width:56px;height:56px;background:#4caf50;color:#fff;border:none;border-radius:50%;font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s ease;z-index:100;display:flex;align-items:center;justify-content:center}.floating-add-btn:hover{background:#45a049;transform:scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,.4)}.matrix{position:relative;background:rgba(255,255,255,.9);border-radius:15px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.axis-labels{display:none}.quadrants{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:85vh;min-height:600px;position:relative}.vertical-axis{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#666;transform:translateX(-50%);z-index:10;pointer-events:none}.axis-arrow-up{position:absolute;top:-15px;left:50%;transform:translateX(-50%);color:#333;font-size:16px;font-weight:700;background:rgba(255,255,255,.9);padding:2px 4px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1)}.axis-label-vertical{position:absolute;top:20px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:.9rem;font-weight:700;color:#333;background:rgba(255,255,255,.9);padding:4px 8px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);border:1px solid #ddd;white-space:nowrap}.horizontal-axis{position:absolute;top:50%;left:0;right:0;height:2px;background:#666;transform:translateY(-50%);z-index:10;pointer-events:none}.axis-arrow-right{position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:#333;font-size:16px;font-weight:700;background:rgba(255,255,255,.9);padding:2px 4px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1)}.axis-label-horizontal{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.9rem;font-weight:700;color:#333;background:rgba(255,255,255,.9);padding:4px 8px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);border:1px solid #ddd;white-space:nowrap}.quadrant{background:#f8f9fa;border:2px solid #dee2e6;border-radius:10px;padding:12px;overflow-y:auto;position:relative;display:flex;flex-direction:column}.scroll-zone{position:absolute;z-index:10;background:0 0;pointer-events:auto;touch-action:pan-y}.scroll-zone-right{top:0;right:-2px;width:15px;height:100%}.scroll-zone-bottom{bottom:-2px;left:0;right:0;height:15px}@media (pointer:coarse){.scroll-zone-right{width:20px;right:-5px}.scroll-zone-bottom{height:20px;bottom:-5px}}.quadrant h3{font-size:1rem;margin-bottom:8px;text-align:center;padding:4px;border-radius:5px;color:#fff;font-weight:700;flex-shrink:0}.urgent-important h3{background:#dc3545}.not-urgent-important h3{background:#28a745}.urgent-not-important h3{background:#fd7e14}.not-urgent-not-important h3{background:#6c757d}.memo-container{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#ccc #f8f9fa;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative;z-index:1}.memo-container::-webkit-scrollbar{width:6px}.memo-container::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.memo-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px;transition:background .2s ease}.memo-container::-webkit-scrollbar-thumb:hover{background:#999}@media (pointer:coarse){.memo-container{touch-action:pan-y;scroll-behavior:smooth}.memo-container::-webkit-scrollbar{width:8px}.memo-container::-webkit-scrollbar-thumb{background:#999;border-radius:4px}.quadrant{min-height:200px;touch-action:pan-y}}.memo{background:#ffeb3b;border:none;border-radius:8px;padding:12px;font-size:.9rem;line-height:1.4;box-shadow:0 2px 5px rgba(0,0,0,.15);cursor:move;position:relative;word-wrap:break-word;transition:all .3s ease;min-height:50px;max-height:50px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;user-select:none;width:100%}@media (pointer:coarse){.memo{touch-action:manipulation;cursor:pointer}.memo.expanded{touch-action:manipulation}}.memo-text{flex:1;display:flex;align-items:center}.memo-date{font-size:.7rem;color:rgba(0,0,0,.5);text-align:right;margin-top:auto;line-height:1}.memo:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.2)}.memo::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:20px;height:10px;background:rgba(0,0,0,.1);border-radius:50%}.memo.expanded{max-height:none;min-height:80px;align-items:flex-start;padding-top:12px}.memo.dragging{transition:none;pointer-events:none;z-index:1000;opacity:.8;transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.3)}.memo.out-of-bounds{background:#ff6b6b;color:#fff;transform:scale(.9)}.trash-bin{position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:rgba(220,53,69,.9);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:100;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3)}.trash-bin:hover{transform:scale(1.1);background:#dc3545}.trash-icon{font-size:1.2rem;line-height:1}.trash-count{font-size:.6rem;font-weight:700;margin-top:2px;background:#fff;color:#dc3545;border-radius:10px;padding:1px 4px;min-width:16px;text-align:center}.trash-dropdown{position:absolute;bottom:60px;right:0;width:200px;background:#fff;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,.3);padding:15px;color:#333}.trash-title{font-size:.9rem;font-weight:700;margin-bottom:10px;text-align:center;color:#dc3545}.trash-memos{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.trash-memo{background:#f8f9fa;padding:10px;border-radius:8px;font-size:.8rem;cursor:pointer;transition:background .2s;border-left:3px solid #dc3545}.trash-memo:hover{background:#e9ecef}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.modal-content{background-color:#fff;margin:10% auto;padding:20px;border-radius:15px;width:90%;max-width:500px;box-shadow:0 10px 30px rgba(0,0,0,.3)}.close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer;line-height:1}.close:hover{color:#000}.modal h2{margin-bottom:15px;color:#333}#memo-text{width:100%;height:120px;padding:10px;border:2px solid #ddd;border-radius:8px;font-size:1rem;resize:vertical;font-family:inherit}.quadrant-selector{margin:15px 0}.quadrant-selector label{display:block;margin-bottom:5px;font-weight:700;color:#333}.quadrant-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.quadrant-btn{display:flex;align-items:center;gap:8px;padding:12px;border:2px solid #ddd;border-radius:8px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s ease}.quadrant-btn:hover{border-color:#007bff;background:#f8f9fa}.quadrant-btn.selected{border-color:#007bff;background:#e3f2fd;font-weight:700}.btn-color{width:16px;height:16px;border-radius:3px;flex-shrink:0}.urgent-important-color{background:#dc3545}.not-urgent-important-color{background:#28a745}.urgent-not-important-color{background:#fd7e14}.not-urgent-not-important-color{background:#6c757d}.quadrant.drag-over{background-color:#e3f2fd;border-color:#2196f3;transform:scale(1.02);transition:all .2s ease}.delete-zone{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,107,107,.1);border:4px dashed #ff6b6b;display:none;z-index:999;pointer-events:none}.delete-zone.active{display:block}@media (max-width:768px){body{padding:5px}header h1{font-size:1.5rem}.quadrants{height:75vh;min-height:450px}.quadrant{padding:8px}.quadrant h3{font-size:.9rem;margin-bottom:8px}.memo{padding:10px;font-size:.8rem;min-height:50px}.axis-label-horizontal,.axis-label-vertical{font-size:.8rem;padding:3px 6px}}@media (max-width:480px){.quadrants{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:75vh;min-height:450px}.quadrant{min-height:200px;padding:6px;-webkit-overflow-scrolling:touch;touch-action:pan-y}.memo-container{flex:1;min-height:150px;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-behavior:smooth}.quadrant h3{font-size:.8rem;margin-bottom:5px;padding:3px}.memo{padding:10px;font-size:.8rem;min-height:45px;width:100%}.axis-label-horizontal,.axis-label-vertical{font-size:.7rem;padding:2px 4px}.floating-add-btn{width:50px;height:50px;bottom:80px;right:15px;font-size:20px}.trash-bin{width:45px;height:45px;bottom:15px;right:15px}.trash-icon{font-size:1rem}.trash-count{font-size:.5rem;padding:1px 3px}.trash-dropdown{width:180px;bottom:55px}}.empty-trash-btn{width:100%;padding:8px 12px;background:#f44336;color:#fff;border:none;border-radius:6px;font-size:.8rem;cursor:pointer;transition:background-color .2s ease;margin-bottom:8px}.empty-trash-btn:hover{background:#d32f2f}.trash-separator{height:1px;background:#ddd;margin:8px 0}.trash-memo{padding:8px;border-radius:4px;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f0f0f0}.trash-memo:hover{background:#f0f8ff}.trash-memo:last-child{border-bottom:none}.trash-memo-text{font-size:.8rem;color:#333;margin-bottom:2px;line-height:1.2}.trash-memo-date{font-size:.7rem;color:#666;font-style:italic}@media (max-width:480px){.empty-trash-btn{font-size:.75rem;padding:6px 10px}.trash-memo-text{font-size:.75rem}.trash-memo-date{font-size:.65rem}.topic-selector{gap:6px}.topic-select{font-size:.9rem;padding:6px 10px;min-width:120px}.add-topic-btn,.delete-topic-btn,.edit-topic-btn,.topic-matrix-btn{width:32px;height:32px;font-size:.9rem}.topic-card{margin:3px;padding:8px;min-height:60px}.topic-card-header{margin-bottom:4px}.topic-card-name{font-size:.85rem;line-height:1.2}.topic-card-memo-count{font-size:.7rem}.topic-card-created{font-size:.6rem;margin-top:2px}.topic-card-drag-handle{font-size:14px;padding:2px 4px;min-width:20px;min-height:20px}.modal-buttons{flex-direction:column}.cancel-btn,.save-btn{width:100%}}.topic-card{background:rgba(255,255,255,.95);border-radius:12px;padding:12px;margin:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;transition:all .3s ease;border:3px solid transparent;position:relative;min-height:70px;display:flex;flex-direction:column;justify-content:space-between;word-wrap:break-word;overflow:hidden}.topic-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.25)}.topic-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.topic-card-color{width:16px;height:16px;border-radius:50%;flex-shrink:0}.topic-card-name{font-weight:700;font-size:1rem;color:#333;flex:1}.topic-card-drag-handle{font-size:14px;color:#999;cursor:grab;padding:4px 6px;border-radius:4px;transition:all .2s ease;user-select:none;touch-action:none;min-width:20px;min-height:20px;display:none;align-items:center;justify-content:center}.topic-card-drag-handle:hover{color:#666;background:rgba(0,0,0,.1)}.topic-card-drag-handle:active{cursor:grabbing;background:rgba(0,0,0,.15)}@media (pointer:coarse){.topic-card-drag-handle{font-size:16px;padding:6px 8px;min-width:24px;min-height:24px;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1)}}.topic-card-memo-count{font-size:.8rem;color:#666;text-align:right}.topic-card-created{font-size:.7rem;color:#999;text-align:right;margin-top:4px}.topic-card.dragging{opacity:.8;transform:scale(1.1) rotate(3deg);z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.4);border:2px dashed #2196f3;transition:none}.quadrant.drag-over{background-color:rgba(33,150,243,.1);border-color:#2196f3;border-style:dashed;transform:scale(1.02);transition:all .2s ease}.memo-textarea{cursor:text!important;pointer-events:auto!important;touch-action:manipulation;-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.memo.expanded{z-index:10;position:relative;cursor:default!important;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none}@media (pointer:coarse){.memo-textarea{font-size:16px;min-height:60px;line-height:1.4}}