/* 페이지 4 전용 스타일 */

/* 4페이지 배경 이미지 - 그레이 */
.page-4 .content-box {
    background-image: url('../images/bg-gray.jpg');
}

/* 4페이지는 기본 배경 사용 (다크 네이비) */

/* 4페이지 소제목 - 오렌지 */
.page-4 .logo-text p {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
    color: #1f2937;
    text-shadow: none;
}

/* 4페이지 헤더 여백 통일 */
.page-4 .header-section {
    margin-bottom: 10px;
}

/* 4페이지 로고 - 진한 오렌지 */
.page-4 .logo-icon {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.5);
}

.page-4 .logo-text h1 {
    background: linear-gradient(135deg, #ea580c 0%, #9a3412 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-4 .logo-text p {
    color: #94a3b8;
}

/* 4페이지 질문 말풍선 - 밝은 오렌지 그라데이션 */
.page-4 .question-bubble {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.page-4 .question-bubble::before {
    border-right-color: #f97316;
}

/* 4페이지 질문 아바타 */
.page-4 .question-avatar {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

/* 4페이지 답변 아바타 */
.page-4 .answer-avatar {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* 4페이지 답변 말풍선 - 화이트 */
.page-4 .answer-bubble {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: #cbd5e1;
}

/* 4페이지 답변 말풍선 아이콘 - 오렌지 그라데이션 */
.page-4 .answer-bubble .bubble-icon {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.4);
}

/* 4페이지 하이라이트 */
.page-4 .highlight {
    background: linear-gradient(transparent 50%, #fed7aa 50%);
    color: #c2410c;
}

.page-4 .answer-text strong {
    color: #c2410c;
}

/* 4페이지 기능 태그 - 오렌지 톤 */
.page-4 .tag {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #c2410c;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

/* 4페이지 자세히 보기 버튼 - 오렌지 그라데이션 */
.page-4 .demo-button {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 
        0 12px 35px rgba(249, 115, 22, 0.45),
        0 0 0 0 rgba(249, 115, 22, 0.4);
}

.page-4 .demo-button:hover {
    box-shadow: 
        0 16px 45px rgba(249, 115, 22, 0.5),
        0 0 0 8px rgba(249, 115, 22, 0.1);
}

/* 4페이지 알림 아이콘 */
.page-4 .notification-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.page-4 .notification-progress {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
}

/* 미납 관리 강조 효과 */
.page-4 .payment-emphasis {
    position: relative;
}

.page-4 .payment-emphasis::after {
    content: '💳';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 24px;
    animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}