
.section {
    padding:60px 16px;
    max-width:1100px;
    margin:auto;
}

/* ------------------------------
    Hero (모바일 퍼스트)
--------------------------------*/
.hero {
    background:linear-gradient(135deg, #3B82F6, #6366F1);
    padding:90px 20px 60px;
    text-align:center;
    color:white;
    border-radius:0 0 28px 28px;
}
.hero h1 {
    font-size:26px;
    font-weight:500;
    margin-bottom:12px;
}
.hero p {
    font-size:15px;
    opacity:0.95;
}
.cta-btn {
    display:inline-block;
    margin-top:32px;
    padding:14px 28px;
    background:#fff;
    color:#3B82F6;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 3px 8px rgba(0,0,0,0.15);
    transition:0.2s;
}
.cta-btn:hover {
    background:#f0f0f0;
}

/* ------------------------------
    카드 설명 (모바일)
--------------------------------*/
h2.c-title {
	font-size:28px; 
	margin-bottom:20px;
}

.center {
	text-align:center; 
}

.cards {
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}
.card {
    padding:24px;
    background:white;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(0,0,0,0.04);
    text-align:center;
}
.card h3 {
    font-size:18px;
    margin-bottom:8px;
}
.card p {
    font-size:14px;
    opacity:0.85;
}

/* ------------------------------
    수익 계산기
--------------------------------*/
.calculator-box {
    background:white;
    padding:28px;
    border-radius:18px;
    box-shadow:0 4px 18px rgba(0,0,0,0.05);
    margin-top:14px;
}
.calculator-box label {
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    display:block;
}
.calculator-box input {
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:14px;
    font-size:15px;
		box-sizing: border-box;
}
.calculator-result {
    font-size:20px;
    font-weight:700;
    color:#3B82F6;
    margin-top:15px;
}

/* ------------------------------
    FAQ
--------------------------------*/
.faq-item {
    padding:18px;
    background:white;
    border-radius:12px;
    box-shadow:0 3px 15px rgba(0,0,0,0.05);
    margin-bottom:12px;
}
.faq-item h4 {
    font-size:16px;
    cursor:pointer;
}
.faq-item p {
    display:none;
    padding-top:10px;
    font-size:14px;
    color:#444;
}

@media (max-width:900px) {

	h2.c-title {
		font-size:24px; 
	}
}
/* ------------------------------
    태블릿 (600px 이상)
--------------------------------*/
@media (min-width:600px) {
    .hero h1 {
        font-size:32px;
    }
    .hero p {
        font-size:17px;
    }

    .cards {
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
    }

    .calculator-box {
        padding:34px;
    }
}

/* ------------------------------
    데스크탑 (900px 이상)
--------------------------------*/
@media (min-width:900px) {

    .section {
        padding:80px 20px;
    }

    .hero {
        padding:120px 20px 90px;
    }
    .hero h1 {
        font-size:38px;
    }
    .hero p {
        font-size:18px;
    }
    .cta-btn {
        font-size:18px;
        padding:16px 36px;
    }

    .cards {
        grid-template-columns:repeat(3, 1fr);
        gap:26px;
    }
    .card {
        padding:34px;
    }
    .card h3 {
        font-size:22px;
    }
    .card p {
        font-size:15px;
    }

    .calculator-box {
        padding:40px;
        border-radius:22px;
    }
}

/* ------------------------------
    대형 데스크탑 (1200px 이상)
--------------------------------*/
@media (min-width:1200px) {
    .hero h1 {
        font-size:44px;
    }
    .hero p {
        font-size:20px;
    }
    .cards {
        gap:28px;
    }
}