/**
 * ============================================
 *   WIDGET CARD STYLES
 * ============================================
 * 87개 위젯 카드의 통일된 스타일
 * 200×150px 고정 크기, 독립적 아이덴티티
 */

/* ===== Base Card ===== */
.widget-card {
    width: 200px;
    height: 150px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.widget-card:hover {
    border-color: #b0b0b0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.widget-card:active {
    transform: scale(0.98);
}

/* ===== Header ===== */
.widget-card-header {
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 28px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-icon {
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.card-status {
    font-size: 7px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(4px);
}

.card-type {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== Title ===== */
.widget-card-title {
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 28px;
}

/* ===== Info Grid (2×2) ===== */
.widget-info-grid {
    padding: 0 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
}

.info-cell {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    overflow: hidden;
}

.info-icon {
    font-size: 10px;
    flex-shrink: 0;
}

.info-text {
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Special Content ===== */

/* Mini Chart */
.mini-chart {
    padding: 0 8px;
    margin-bottom: 6px;
}

/* Thumbnail Gallery */
.thumbnail-gallery {
    padding: 0 8px;
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.thumb-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
}

.thumb-more {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    background: #f5f5f5;
}

/* Progress Bar */
.progress-container {
    padding: 0 8px;
    margin-bottom: 6px;
}

.progress-label {
    font-size: 8px;
    color: #666;
    margin-bottom: 3px;
}

.progress-bar-bg {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    transition: width 0.3s;
    border-radius: 3px;
}

/* Timeline Badge */
.timeline-badge {
    margin: 0 8px 6px;
    display: inline-block;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 600;
    border-radius: 2px;
    text-transform: uppercase;
}

.timeline-badge.upcoming {
    background: #e3f2fd;
    color: #1976d2;
}

.timeline-badge.active {
    background: #e8f5e9;
    color: #388e3c;
}

.timeline-badge.ended {
    background: #f5f5f5;
    color: #999;
}

/* Alert Badge */
.alert-badge {
    margin: 0 8px 6px;
    padding: 4px 6px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
}

.alert-badge.urgent {
    background: #fee;
    color: #c00;
}

.alert-badge.warning {
    background: #fff3e0;
    color: #f57c00;
}

.alert-badge.info {
    background: #e3f2fd;
    color: #1976d2;
}

.alert-icon {
    font-size: 10px;
}

.alert-count {
    margin-left: auto;
    background: currentColor;
    color: white;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 7px;
    font-weight: 600;
}

/* ===== Actions ===== */
.widget-card-actions {
    margin-top: auto;
    padding: 6px 8px;
    display: flex;
    gap: 3px;
    border-top: 1px solid #f0f0f0;
}

.widget-card-actions .icon-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #e0e0e0;
    background: white;
    cursor: pointer;
    font-size: 11px;
    color: #666;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.widget-card-actions .icon-btn:hover {
    background: #f5f5f5;
    border-color: #b0b0b0;
    color: #000;
}

.widget-card-actions .icon-btn.danger:hover {
    background: #fee;
    border-color: #fcc;
    color: #c00;
}

.widget-card-actions .icon-btn.primary {
    background: #4a90e2;
    border-color: #4a90e2;
    color: white;
}

.widget-card-actions .icon-btn.primary:hover {
    background: #357abd;
}

/* ===== Category Colors (Header Gradients) ===== */
.widget-card[data-category="analytics"] .widget-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.widget-card[data-category="museum"] .widget-card-header {
    background: linear-gradient(135deg, #d4a574 0%, #8b6f47 100%);
}

.widget-card[data-category="visitor"] .widget-card-header {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.widget-card[data-category="education"] .widget-card-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.widget-card[data-category="marketing"] .widget-card-header {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.widget-card[data-category="operations"] .widget-card-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.widget-card[data-category="ai"] .widget-card-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.widget-card[data-category="integration"] .widget-card-header {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* ===== Responsive Grid ===== */
.widget-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px;
}