/* css/style.css */
body { 
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.panel-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; }

/* キャンバスエリア */
.workspace-container {
    position: relative; width: 100%; height: 100%; background-color: #e2e8f0;
    border-radius: 1rem; overflow: hidden; border: 2px dashed #cbd5e1;
    transition: all 0.3s;
}
.workspace-container.has-image { border: 2px solid #cbd5e1; background-color: white; }

#drop-overlay {
    position: absolute; inset: 0; z-index: 50;
    background-color: rgba(59, 130, 246, 0.1); backdrop-filter: blur(2px);
    border: 4px dashed #3b82f6; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#drop-overlay.active { opacity: 1; pointer-events: auto; }
#drop-overlay * { pointer-events: none; }

#image-canvas { z-index: 10; pointer-events: none; }
#drawing-canvas { z-index: 20; cursor: crosshair; }

/* 家具リストアイテム */
.furn-item { 
    transition: all 0.2s; border: 2px solid #e2e8f0; border-radius: 0.5rem; 
    cursor: pointer; position: relative; background: white;
    padding: 0.75rem; display: flex; align-items: center; justify-content: space-between;
}
.furn-item:hover { border-color: #cbd5e1; background-color: #f8fafc; }

.furn-item.active-brush { 
    border-color: #2563eb; background-color: #eff6ff;
    box-shadow: 0 0 0 1px #2563eb; z-index: 10;
}
.furn-item.active-brush .item-label { color: #1e40af; font-weight: 700; }

/* データあり */
.furn-item.has-data { border-color: #94a3b8; background-color: #f1f5f9; }

.count-badge {
    background: #3b82f6; color: white; font-size: 10px; font-weight: bold;
    padding: 2px 6px; border-radius: 99px; margin-left: auto; margin-right: 8px;
}

.color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; }
.trash-btn { padding: 6px; border-radius: 6px; color: #94a3b8; transition: all 0.2s; }
.trash-btn:hover { background-color: #fee2e2; color: #ef4444; }

.step-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-weight: 800; color: #334155; font-size: 0.95rem; }
.step-num { background: #0f172a; color: white; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; }

.custom-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem;
}

.viewer-thumb { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; opacity: 0.6; }
.viewer-thumb.active { border-color: #2563eb; opacity: 1.0; transform: scale(1.05); box-shadow: 0 4px 6px rgba(37,99,235,0.2); }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }

.history-thumb { aspect-ratio: 16/9; cursor: zoom-in; border-radius: 0.5rem; overflow: hidden; position: relative; border: 1px solid #e2e8f0; transition: all 0.2s; background: #f8fafc; }
.history-thumb:hover { transform: translateY(-2px); border-color: #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.badge-count { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.6); color: white; font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: bold; pointer-events: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }