*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:#f0f2f5;color:#333;height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}.board-list-page{max-width:600px;width:100%;margin:0 auto;padding:60px 20px;height:100vh;overflow-y:auto}.board-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.board-list-header h1{font-size:24px}.btn-primary{background:#4a90d9;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#357abd}.board-list{list-style:none}.board-list-item{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:box-shadow .2s,transform .1s;box-shadow:0 1px 3px #00000014}.board-list-item:hover{box-shadow:0 3px 12px #0000001f;transform:translateY(-1px)}.board-title{font-size:15px;font-weight:500}.btn-delete{background:none;border:none;font-size:18px;cursor:pointer;opacity:.4;transition:opacity .2s;padding:4px 8px}.btn-delete:hover{opacity:1}.empty-message{text-align:center;color:#999;margin-top:60px;line-height:2;font-size:15px}.board-not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px;color:#999;font-size:16px}.board-view{display:flex;flex-direction:column;height:100vh}.board-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 1px 4px #0000000f;z-index:100;min-height:48px;flex-shrink:0}.header-left{display:flex;align-items:center;gap:12px}.header-left h2{font-size:16px;font-weight:600}.btn-back{background:none;border:1px solid #ddd;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;transition:background .2s}.btn-back:hover{background:#f5f5f5}.header-center{display:flex;align-items:center}.color-picker{display:flex;gap:6px}.color-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:#333;transform:scale(1.15)}.header-right{display:flex;align-items:center;gap:8px}.btn-icon{background:none;border:1px solid #ddd;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:16px;transition:background .2s}.btn-icon:hover:not(:disabled){background:#f5f5f5}.btn-icon:disabled{opacity:.3;cursor:not-allowed}.zoom-label{font-size:12px;color:#999;min-width:45px;text-align:right}.canvas-viewport{flex:1;overflow:auto;background:#e8ecf1;position:relative}.canvas-sizer{position:relative}.canvas{position:absolute;top:0;left:0;background:#f5f5f0;background-image:radial-gradient(circle,#ccc 1px,transparent 1px);background-size:30px 30px;cursor:default}.arrows-layer{position:absolute;top:0;left:0;z-index:1}.arrow-delete{opacity:0;transition:opacity .2s}.arrow-group:hover .arrow-delete{opacity:1}.note{position:absolute;z-index:2;border-radius:4px;box-shadow:2px 2px 8px #00000026;cursor:grab;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;transition:box-shadow .15s}.note:hover{box-shadow:3px 3px 12px #00000040}.note.active{box-shadow:0 0 0 2px #4a90d9,3px 3px 12px #0003;cursor:default;z-index:10}.note-text{padding:10px;font-size:13px;line-height:1.5;word-break:break-word;overflow:hidden;height:100%}.note-placeholder{color:#0000004d;font-style:italic;font-size:12px}.note-textarea{width:100%;height:100%;border:none;background:transparent;resize:none;outline:none;padding:10px;font-family:inherit;font-size:13px;line-height:1.5;color:#333;cursor:text}.note-textarea::placeholder{color:#0000004d;font-style:italic}.note-delete{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #00000026;z-index:11;transition:transform .15s}.note-delete:hover{transform:scale(1.2)}.connection-points{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.conn-point{position:absolute;width:12px;height:12px;border-radius:50%;background:#4a90d9;border:2px solid white;transform:translate(-50%,-50%);opacity:0;cursor:crosshair;pointer-events:auto;transition:opacity .15s,transform .15s;z-index:12}.note:hover .conn-point,.note.active .conn-point{opacity:1}.conn-point:hover{transform:translate(-50%,-50%) scale(1.3)}.conn-top{top:0;left:50%}.conn-right{top:50%;left:100%}.conn-bottom{top:100%;left:50%}.conn-left{top:50%;left:0}.board-footer{padding:6px 16px;background:#fff;border-top:1px solid #e0e0e0;font-size:12px;color:#999;text-align:center;flex-shrink:0}