/* [FILE: pricing.css] 
   중복된 코드를 제거하고 모든 색상을 main-style.css의 변수와 연결한 통합본입니다.
   사용자님의 원본 구조를 유지하며 '견적 확인하기' 및 '타이머' 가독성 코드를 추가했습니다.
*/

/* --- [A] 상단 제목과 버튼 영역 --- */

.pricing-header {
    text-align: center;         /* 글자들을 가운데로 모읍니다 (Center Alignment) */
    padding: 80px 20px 40px;    /* 위쪽 80px, 아래쪽 40px 여백 (Padding) */
    background-color: var(--color-faq-bg);  /* 변수로 연결된 연한 배경색 */
}

.badge-pricing {
    display: inline-block;
    background-color: var(--color-primary-hover);  /* 주색상 강조 변수 사용 */
    color: var(--white);               
    padding: 6px 24px;          
    border-radius: 50px;        
    font-size: 18px;            
    margin-bottom: 30px;        
}

.pricing-header .main-title {
    font-size: 52px;            
    font-weight: 800;           
    color: var(--color-text);   /* 짙은 남색 글자 변수 */
    margin-bottom: 24px;        
    letter-spacing: -1px;       
}

.pricing-header .highlight {
    color: var(--color-primary-hover);
}

.pricing-header .description {
    font-size: 19px;
    color: var(--color-text-light); /* 회색 글자 변수 */
    line-height: 1.6;           
    margin-bottom: 40px;        
}

/* [추가] 가독성 문제 해결: 견적 확인하기 & 타이머 */
.estimate-button-text, 
.quote-button span {
    /* root에 추가한 짙은 남색 변수를 강제 적용 (흰색 배경 대응) */
    color: var(--color-estimate-text) !important; 
    font-weight: 800 !important;   /* 가독성을 위해 더 두껍게 */
}

.timer-display, 
.countdown-number {
    /* root에 추가한 진한 오렌지 변수를 강제 적용 */
    color: var(--color-timer-focus) !important;
    font-weight: 800 !important;
}

.quote-button {
    background-color: var(--color-primary-hover);  
    color: var(--white);               
    border: none;               
    padding: 18px 45px;         
    font-size: 20px;            
    font-weight: 700;           
    border-radius: 50px;        
    cursor: pointer;            
    transition: 0.3s;           
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3); 
}

.quote-button:hover {
    background-color: var(--color-primary);  
    transform: translateY(-3px); 
}


/* --- [B] 하단 카드 영역 --- */

.card-container {
    display: flex;
    gap: 15px; 
    max-width: 1200px;
    width: 100%;
    align-items: stretch; 
    padding: 60px 20px; 
    margin: 0 auto;
}

.price-box {
    flex: 1; 
    min-width: 320px;
    padding: 50px 30px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease-in-out; 
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.side-box {
    margin-top: 10px; 
    margin-left: 5px; 
    margin-right: 5px;
}

[data-plan="deluxe"] {
    background-color: var(--color-primary-hover); 
    border: none; 
    color: var(--white);
    z-index: 10; 
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
    padding-top: 60px; 
}

[data-plan="standard"], [data-plan="premium"] {
    background-color: var(--white);
    border: 2px solid var(--border-color); /* 테두리색 변수 */
    color: var(--color-text);
}

.title {
    font-size: 28px; 
    font-weight: 800;
    margin-bottom: 12px;
    color: inherit;
    letter-spacing: -0.5px;
}

.custom-padding .title {
    font-size: 28px; 
    font-weight: 800;
    color: var(--white);
}

.subtitle {
    font-size: 17px;
    font-weight: 600;
    padding-bottom: 20px; 
    margin-bottom: 30px; 
    border-bottom: 1px solid var(--border-color); 
}

.custom-padding .subtitle {
    font-size: 17px;
    font-weight: 600;
    padding-bottom: 20px; 
    margin-bottom: 30px; 
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.features {
    list-style: none;
    line-height: 2.2;
    font-size: 15px;
}

.best-badge {
    position: absolute;
    top: -12px; 
    right: 20px;
    background-color: var(--color-danger); /* 빨간색 배지 변수 */
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 25px;
    animation: float 0.5s ease-in-out infinite alternate; 
}

@keyframes float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

.side-box:hover {
    transform: translateY(-15px); 
    border-color: var(--color-primary);
}

.custom-padding:hover {
    transform: translateY(-10px);
}

/* --- [C] FAQ 섹션 --- */

#faq-section {
    background-color: var(--color-faq-bg); /* 변수 연결 완료 */
    padding: 100px 20px;
    width: 100%;
}

.faq-header {
    text-align: center;
    margin-bottom: 50px;
}

.badge-faq {
    display: inline-block;
    background-color: var(--color-primary); 
    color: var(--white);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.faq-main-title {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
}

.faq-description {
    font-size: 17px;
    /* [가독성 개선] 투명도를 제거하고 짙은 회색 변수 연결 */
    color: var(--color-text-light) !important; 
    line-height: 1.6;
    opacity: 1 !important; 
}

#faq-container {
    max-width: 900px;
    margin: 0 auto;
    
    border-top: 2px solid var(--color-text);    /* 맨 위 검정색(텍스트색) 구분선 */
    border-bottom: 2px solid var(--color-text); /* 맨 아래 검정색(텍스트색) 구분선 */
    padding: 40px 0;                            /* 구분선과 FAQ 박스 사이의 여백(Padding) */
}

.faq-item {
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.faq-question {
    padding: 22px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.faq-item:nth-child(odd) .faq-question {
    background-color: var(--color-primary-hover); 
    color: var(--white);
}

.faq-item:nth-child(even) .faq-question {
    background-color: var(--white);
    color: var(--color-text);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background-color: var(--white);
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    padding: 25px 30px;
    line-height: 1.7;
    color: var(--color-text-light);
    font-size: 16px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

/* --- [D] FOOTER 디자인 --- */

.site-footer {
    background-color: var(--white); 
    padding: 60px 20px;
    border-top: 1px solid var(--border-color); 
    text-align: center; 
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-image-logo {
    width: 120px !important; /* 로고 크기 최적화 (Optimization) */
    height: auto; 
    margin-bottom: 30px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    image-rendering: -webkit-optimize-contrast; 
}

.brand-logo {
    font-family: 'Times New Roman', serif; 
    font-style: italic;
    font-size: 42px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 30px;
}

.footer-company-info {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.8; 
    margin-bottom: 30px;
    font-weight: 500;
}

.footer-policy-links {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.footer-policy-links a {
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 15px;
    font-weight: 500;
}

.footer-policy-links .bold-link {
    font-weight: 700; 
    color: var(--color-text);
}

.main-text {
    /* root의 짙은 남색 변수 사용 (Technical Term: Variable Mapping -> 변수 연결) */
    color: var(--color-estimate-text) !important; 
    
    /* 가독성을 위한 두께 및 선명도 설정 */
    font-weight: 800 !important;   /* 아주 두껍게 (Extra Bold) */
    opacity: 1 !important;         /* 100% 선명하게 (Opacity -> 투명도) */
    text-decoration: none !important; 
    display: inline-block;
}

/* 2. '타이머 숫자' 문구 위치 수정 */
.time-text {
    /* root의 진한 오렌지 변수 사용 */
    color: var(--color-timer-focus) !important;
    
    /* 숫자 강조 설정 */
    font-weight: 900 !important;   /* 가장 두껍게 (Black) */
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .footer-company-info p {
        font-size: 13px;
        word-break: keep-all; 
    }
}