/* =============================================================================
   📋 PLACEHOLDER COMPONENTS - 汎用プレースホルダーコンポーネント
   ============================================================================= */

/* 🔧🔧🔧 【基本プレースホルダー】コンテンツがない場合の表示 🔧🔧🔧 */
.diagram-placeholder {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, 
        rgba(255, 105, 180, 0.1), 
        rgba(255, 105, 180, 0.05)
    );
    border-radius: 15px;
    border: 2px dashed rgba(255, 105, 180, 0.3);
    position: relative;
    transition: all 0.3s ease;
}

.diagram-placeholder:hover {
    background: linear-gradient(135deg, 
        rgba(255, 105, 180, 0.15), 
        rgba(255, 105, 180, 0.08)
    );
    border-color: rgba(255, 105, 180, 0.4);
}

/* 🔧🔧🔧 【プレースホルダーコンテンツ】内部コンテンツ 🔧🔧🔧 */
.placeholder-content {
    text-align: center;
    padding: 40px 20px;
}

.placeholder-content h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 15px 0;
}

.placeholder-content p {
    font-size: 1.1rem;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.placeholder-content small {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

/* 🔧🔧🔧 【プレースホルダーバリエーション】用途別スタイル 🔧🔧🔧 */

/* 画像プレースホルダー */
.image-placeholder {
    background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.1), 
        rgba(52, 152, 219, 0.05)
    );
    border-color: rgba(52, 152, 219, 0.3);
}

/* データプレースホルダー */
.data-placeholder {
    background: linear-gradient(135deg, 
        rgba(46, 204, 113, 0.1), 
        rgba(46, 204, 113, 0.05)
    );
    border-color: rgba(46, 204, 113, 0.3);
}

/* ファイルプレースホルダー */
.file-placeholder {
    background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.1), 
        rgba(155, 89, 182, 0.05)
    );
    border-color: rgba(155, 89, 182, 0.3);
}

/* ビデオプレースホルダー */
.video-placeholder {
    background: linear-gradient(135deg, 
        rgba(231, 76, 60, 0.1), 
        rgba(231, 76, 60, 0.05)
    );
    border-color: rgba(231, 76, 60, 0.3);
}

/* 🔧🔧🔧 【プレースホルダーサイズ】サイズバリエーション 🔧🔧🔧 */

/* 小サイズプレースホルダー */
.placeholder-sm {
    min-height: 200px;
}

/* 中サイズプレースホルダー */
.placeholder-md {
    min-height: 300px;
}

/* 大サイズプレースホルダー */
.placeholder-lg {
    min-height: 400px;
}

/* 特大サイズプレースホルダー */
.placeholder-xl {
    min-height: 500px;
}

/* 🔧🔧🔧 【アクティブ状態】ドラッグ＆ドロップ対応 🔧🔧🔧 */
.placeholder-active {
    display: flex !important;
    border-style: solid;
    background: linear-gradient(135deg, 
        rgba(78, 205, 196, 0.15), 
        rgba(78, 205, 196, 0.08)
    );
    border-color: rgba(78, 205, 196, 0.5);
}

.placeholder-dragover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 🔧🔧🔧 【プレースホルダーローディング】読み込み状態 🔧🔧🔧 */
.placeholder-loading {
    background: linear-gradient(90deg, 
        rgba(200, 200, 200, 0.2) 25%, 
        rgba(200, 200, 200, 0.4) 50%, 
        rgba(200, 200, 200, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}