/* PUB-ADD: 이게 뭐가 다른가요? 섹션 - FAQ 스타일 프리미엄 다크 디자인 */

/* 섹션 전체 - 프리미엄 다크 배경 (FAQ와 동일한 느낌) - !important로 기존 스타일 오버라이드 */
.pub-comparison-section {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 100px 0 !important;
    background: radial-gradient(900px 420px at 80% 15%, rgba(102, 126, 234, 0.22), transparent 60%),
                radial-gradient(700px 360px at 20% 70%, rgba(118, 75, 162, 0.18), transparent 60%),
                linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #111827 100%) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 은은한 그리드 패턴 */
.pub-comparison-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.4;
    pointer-events: none;
}

.pub-comparison-content-wrapper {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 20px !important;
    text-align: center !important;
}

/* 타이틀 영역 */
.pub-comparison-title-area {
    text-align: center;
    margin-bottom: 60px;
}

.pub-comparison-main-title {
    margin: 0 !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 카드 그리드 */
.pub-comparison-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 카드 공통 스타일 - FAQ 카드와 유사한 글라스 효과 */
.pub-comparison-card {
    position: relative !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

/* 좌측 그라데이션 라인 (FAQ 카드와 동일) */
.pub-comparison-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    opacity: 0.9;
}

.pub-comparison-card-general::before {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 50%, #475569 100%);
}

.pub-comparison-card-family::before {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

/* 우측 상단 빛 효과 */
.pub-comparison-card::after {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.pub-comparison-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    border-color: rgba(102, 126, 234, 0.3);
}

.pub-comparison-card-family:hover {
    border-color: rgba(102, 126, 234, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

/* 카드 헤더 */
.pub-comparison-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 아이콘 */
.pub-comparison-card-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

.pub-icon-general {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.2));
    border: 2px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.pub-icon-general::before {
    content: '🏪';
}

.pub-icon-family {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
    border: 2px solid rgba(102, 126, 234, 0.4);
    color: #a5b4fc;
}

.pub-icon-family::before {
    content: '👨‍👩‍👧‍👦';
}

.pub-comparison-card:hover .pub-comparison-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* 카드 타이틀 */
.pub-comparison-card-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    color: #f8fafc !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

/* kt-video.css의 카드별 텍스트 색상(어두운 색) 강제 오버라이드 */
.pub-comparison-card-general .pub-comparison-card-title {
    color: #f1f5f9 !important;
}

.pub-comparison-card-family .pub-comparison-card-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

/* 카드 콘텐츠 */
.pub-comparison-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 비교 아이템 */
.pub-comparison-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: all 0.3s ease;
}

.pub-comparison-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateX(4px);
}

/* 라벨 - 기본 스타일 */
.pub-comparison-item-label {
    flex-shrink: 0;
    width: 60px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
    transition: all 0.3s ease;
}

/* 각 항목별 색상 차별화 */
.pub-comparison-item:nth-child(1) .pub-comparison-item-label {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25)) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}

.pub-comparison-item:nth-child(2) .pub-comparison-item-label {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(109, 40, 217, 0.25)) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    color: #c4b5fd !important;
}

.pub-comparison-item:nth-child(3) .pub-comparison-item-label {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(219, 39, 119, 0.25)) !important;
    border: 1px solid rgba(236, 72, 153, 0.4) !important;
    color: #f9a8d4 !important;
}

.pub-comparison-item:nth-child(4) .pub-comparison-item-label {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.25)) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #86efac !important;
}

/* 텍스트 - 기본 스타일 */
.pub-comparison-item-text {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* 각 항목별 텍스트 색상 차별화 */
.pub-comparison-item:nth-child(1) .pub-comparison-item-text {
    color: #dbeafe !important;
}

.pub-comparison-item:nth-child(2) .pub-comparison-item-text {
    color: #e9d5ff !important;
}

.pub-comparison-item:nth-child(3) .pub-comparison-item-text {
    color: #fce7f3 !important;
}

.pub-comparison-item:nth-child(4) .pub-comparison-item-text {
    color: #d1fae5 !important;
}

/* kt-video.css에서 우리가족 카드 텍스트를 어둡게 만드는 규칙 오버라이드 */
.pub-comparison-card-family .pub-comparison-item-label,
.pub-comparison-card-family .pub-comparison-item-text {
    /* 각 항목별 색상이 이미 적용되므로 여기서는 오버라이드만 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* 하이라이트 텍스트 (수익 항목) */
.pub-highlight-text {
    color: #fbbf24;
    font-weight: 900;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 14px rgba(251, 191, 36, 0.35) !important;
}

/* PC: 좌우 2컬럼 레이아웃 */
@media (min-width: 768px) {
    .pub-comparison-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (min-width: 1024px) {
    .pub-comparison-section {
        padding: 120px 0;
    }
    
    .pub-comparison-main-title {
        font-size: 3.5rem;
    }
    
    .pub-comparison-card {
        padding: 40px 36px;
    }
}

/* 태블릿 */
@media (max-width: 1024px) and (min-width: 769px) {
    .pub-comparison-main-title {
        font-size: 2.6rem;
    }
    
    .pub-comparison-card {
        padding: 32px 28px;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .pub-comparison-section {
        padding: 80px 0;
    }
    
    .pub-comparison-content-wrapper {
        padding: 0 16px;
    }
    
    .pub-comparison-title-area {
        margin-bottom: 40px;
    }
    
    .pub-comparison-main-title {
        font-size: 2.2rem;
    }
    
    .pub-comparison-card {
        padding: 28px 24px;
    }
    
    .pub-comparison-card-header {
        gap: 12px;
        margin-bottom: 24px;
    }
    
    .pub-comparison-card-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .pub-comparison-card-title {
        font-size: 1.5rem;
    }
    
    .pub-comparison-item {
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
    }
    
    .pub-comparison-item-label {
        width: auto;
        align-self: flex-start;
    }
    
    .pub-comparison-item-text {
        font-size: 1rem;
    }
}

/* 소형 모바일 */
@media (max-width: 480px) {
    .pub-comparison-section {
        padding: 60px 0;
    }
    
    .pub-comparison-main-title {
        font-size: 1.8rem;
    }
    
    .pub-comparison-card {
        padding: 24px 20px;
    }
    
    .pub-comparison-card-title {
        font-size: 1.3rem;
    }
}