* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
body, html { width: 100%; height: 100%; overflow: hidden; background: #000; color: #eee; font-family: sans-serif; }
.view { width: 100%; height: 100dvh; display: flex; flex-direction: column; }

.editor-header-slim { height: 40px; background: #1a1a1a; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid #333; }
.editor-header-slim h2 { font-size: 0.85rem; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#canvas-size-info { font-size: 0.7rem; color: #aaa; margin-right: 5px; }

.workspace { flex: 1; position: relative; background: #111; overflow: hidden; display: flex; }
#canvas-viewport { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; touch-action: none; }
#drawing-area { position: relative; background: #fff; image-rendering: pixelated; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.layer-canvas, #temp-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }

/* さらにスリム化したレイヤーパネル */
#layer-panel-slim {
    width: 35px; background: rgba(20, 20, 20, 0.9); border-left: 1px solid #444; 
    display: flex; flex-direction: column; overflow-y: auto; padding: 5px 0; z-index: 5;
}
.layer-item-slim {
    width: 28px; height: 28px; margin: 3px auto; border: 1px solid #555; border-radius: 4px;
    background: #222; display: flex; align-items: center; justify-content: center; font-size: 9px; position: relative;
    color: #ccc;
}
.layer-item-slim.active { border-color: #007bff; background: #007bff; color: white; }
.layer-vis-btn { 
    position: absolute; bottom: -2px; right: -2px; background: #444; border-radius: 50%; 
    width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-size: 8px; border: 1px solid #222;
}

.bottom-menu { background: #1a1a1a; padding: 5px; border-top: 1px solid #333; display: flex; flex-direction: column; gap: 5px; }
.menu-row { display: flex; justify-content: space-around; gap: 3px; }
.menu-row button { flex: 1; height: 36px; background: #333; border: none; border-radius: 4px; color: white; font-size: 0.65rem; }
.menu-row button.active { background: #007bff; }
#color-picker { width: 36px; height: 36px; border: none; border-radius: 4px; background: none; }

.project-grid { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-card { background: #222; padding: 10px; border-radius: 8px; text-align: center; }
.project-thumb { width: 100%; aspect-ratio: 1; background: #fff; image-rendering: pixelated; margin-bottom: 5px; }
.btn-delete-proj { width: 100%; background: #c33; color: white; border: none; border-radius: 4px; font-size: 0.7rem; padding: 4px 0; margin-top: 5px; }

.paste-panel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(0,0,0,0.9); padding: 8px; border-radius: 20px; display: flex; gap: 8px; border: 1px solid #555; }
.mini-status { position: absolute; bottom: 5px; left: 10px; font-size: 9px; color: #666; pointer-events: none; }
.primary-btn { background: #007bff; color: white; border: none; padding: 5px 15px; border-radius: 4px; font-weight: bold; }
.primary-btn-slim { background: #007bff; color: white; border: none; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; }