/* ===================================
   PATTERN GRID & CARD SYSTEM
   =================================== */

/* Pattern Grid */
.patterns-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    overflow: visible;
    grid-auto-rows: 1fr;
}

/* Pattern Cards Base */
.pattern-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: 45px 24px 20px 24px; /* 상단 패딩 50px에서 45px로, 하단 24px에서 20px로 줄임 */
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Pattern Card Size Variants - 예시 표시 시 */
.pattern-card.size-small {
    min-height: 110px; /* 120px에서 110px로 더 줄임 */
}

.pattern-card.size-medium {
    min-height: 120px; /* 135px에서 120px로 더 줄임 */
}

.pattern-card.size-large {
    min-height: 135px; /* 150px에서 135px로 더 줄임 */
}

.pattern-card.size-xl {
    min-height: 160px; /* 180px에서 160px로 더 줄임 */
}

/* Pattern Card Hover Effects */
.pattern-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.pattern-card.editing {
    background: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Examples Hidden State - 예시 미표시 시 */
.pattern-card.examples-hidden {
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 45px 24px 24px 24px; /* 패딩 유지 */
}

.pattern-card.examples-hidden .pattern-header {
    display: none;
}

.pattern-card.examples-hidden .pattern-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.pattern-card.examples-hidden .pattern-label {
    margin-bottom: 8px; /* 12px에서 8px로 줄임 */
}

/* 예시 미표시 시 카드 크기 - 더 작게 */
.pattern-card.examples-hidden.size-small {
    min-height: 90px; /* 100px에서 90px로 줄임 */
}

.pattern-card.examples-hidden.size-medium {
    min-height: 100px; /* 110px에서 100px로 줄임 */
}

.pattern-card.examples-hidden.size-large {
    min-height: 110px; /* 120px에서 110px로 줄임 */
}

.pattern-card.examples-hidden.size-xl {
    min-height: 120px; /* 130px에서 120px로 줄임 */
}

/* Pattern Header */
.pattern-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    justify-content: space-between;
}

.pattern-card .pattern-header {
    display: none;
}

.pattern-number {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--border);
    flex-shrink: 0;
}