/* ============================================================
   앱스타일 요금계산기 (홈페이지 히어로 하단 삽입)
============================================================ */
.calc-section {
    padding: 56px 0 64px;
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}
.calc-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 48px rgba(26,115,232,0.14);
    border: 1px solid #e8f0fe;
    overflow: hidden;
}
.calc-header {
    background: linear-gradient(135deg, #0a1f4e 0%, #1a73e8 60%, #0891b2 100%);
    color: #fff;
    padding: 26px 28px 22px;
    text-align: center;
}
.calc-header h2 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 4px;
}
.calc-header p { font-size: 13px; opacity: 0.85; }

/* 진행 단계 표시 */
.calc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px 0;
}
.calc-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 90px;
}
.calc-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #e8ecf4;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    transition: all 0.25s;
}
.calc-step-dot.active .calc-step-num,
.calc-step-dot.done .calc-step-num {
    background: var(--primary);
    color: #fff;
}
.calc-step-dot.done .calc-step-num { background: var(--accent); }
.calc-step-label {
    font-size: 10.5px;
    color: #aaa;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.calc-step-dot.active .calc-step-label { color: var(--primary); font-weight: 800; }
.calc-step-line {
    flex: 0.6;
    height: 2px;
    background: #e8ecf4;
    margin-top: -18px;
}
.calc-step-line.done { background: var(--accent); }

.calc-body { padding: 24px 24px 28px; min-height: 320px; }
.calc-body-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.calc-body-sub { font-size: 12.5px; color: #999; margin-bottom: 18px; }

/* 카드형 선택지 */
.calc-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.calc-option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 12px;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.calc-option-card:hover:not(.disabled) { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,115,232,0.15); }
.calc-option-card.featured { border-color: var(--accent); background: #f2fbf5; }
.calc-option-card.featured::after {
    content: '주력 추천';
    position: absolute;
    top: -10px; right: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}
.calc-option-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f7f7f7;
}
.calc-option-icon { font-size: 30px; }
.calc-option-name { font-size: 14.5px; font-weight: 800; color: var(--dark); }
.calc-option-desc { font-size: 11.5px; color: #999; }
.calc-option-soon {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #bbb;
    padding: 2px 9px;
    border-radius: 20px;
    margin-top: 2px;
}

/* 통신사 카드 */
.calc-provider-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
    position: relative;
}
.calc-provider-card:hover:not(.disabled) { border-color: var(--prov-color, var(--primary)); transform: translateX(3px); }
.calc-provider-card.disabled { opacity: 0.5; cursor: not-allowed; background: #f7f7f7; }
.calc-provider-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.calc-provider-name { font-weight: 800; font-size: 15px; color: var(--dark); flex: 1; }
.calc-provider-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    background: #fff3e0;
    color: #e65100;
}
.calc-provider-badge.soon { background: #f1f3f4; color: #888; }

/* 상품 리스트 (계산기 3단계) */
.calc-product-item {
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.calc-product-item:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(26,115,232,0.12); }
.calc-product-item.selected { border-color: var(--primary); background: #f0f7ff; }
.calc-product-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.calc-product-name { font-size: 14.5px; font-weight: 800; color: var(--dark); }
.calc-product-price { font-size: 17px; font-weight: 900; color: var(--primary); }
.calc-product-price span { font-size: 11px; color: #999; font-weight: 600; margin-left: 2px; }
.calc-product-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #999; }
.calc-product-meta span {
    background: #f4f6fa;
    padding: 2px 8px;
    border-radius: 10px;
}
.calc-product-gift {
    margin-top: 8px;
    font-size: 12px;
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.calc-product-secret {
    margin-top: 6px;
    font-size: 12px;
    color: #8a6d00;
    background: #fff8e1;
    border: 1px dashed #ffe082;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

/* 결과/요약 화면 */
.calc-result-box {
    background: linear-gradient(135deg, #f0f7ff, #e8fff2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1.5px solid #d5e9ff;
}
.calc-result-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13.5px; color: #555; }
.calc-result-row strong { color: var(--dark); font-weight: 800; }
.calc-result-row.total { border-top: 1.5px dashed #c9dcf5; margin-top: 6px; padding-top: 12px; }
.calc-result-row.total strong { font-size: 22px; color: var(--primary); }

.calc-secret-lock {
    background: #fffaf0;
    border: 2px dashed #ffcc80;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    margin-bottom: 16px;
}
.calc-secret-lock .lock-icon { font-size: 30px; margin-bottom: 6px; }
.calc-secret-lock h4 { font-size: 15px; font-weight: 800; color: #e65100; margin-bottom: 4px; }
.calc-secret-lock p { font-size: 12.5px; color: #a1873a; }

.calc-secret-revealed {
    background: linear-gradient(135deg, #fff8e1, #ffe8b3);
    border: 2px solid #ffb300;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    margin-bottom: 16px;
    animation: secretPop 0.4s ease;
}
@keyframes secretPop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.calc-secret-revealed .gift-icon { font-size: 34px; margin-bottom: 6px; }
.calc-secret-revealed h4 { font-size: 15px; font-weight: 800; color: #e65100; margin-bottom: 4px; }
.calc-secret-revealed .secret-amount { font-size: 26px; font-weight: 900; color: #d84315; margin: 4px 0; }
.calc-secret-revealed p { font-size: 12.5px; color: #8a6d00; }

/* 정보입력 폼 */
.calc-form-group { margin-bottom: 14px; }
.calc-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.calc-form-group input[type="text"],
.calc-form-group input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font);
}
.calc-form-group input:focus { outline: none; border-color: var(--primary); }
.calc-consent-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 11.5px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 12px;
}
.calc-consent-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
}
.calc-consent-check input { width: 18px; height: 18px; }

/* 하단 네비 버튼 */
.calc-footer {
    display: flex;
    gap: 10px;
    padding: 0 24px 24px;
}
.calc-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: var(--font);
}
.calc-btn-back { background: #f1f3f4; color: #666; flex: 0.4; }
.calc-btn-back:hover { background: #e3e5e8; }
.calc-btn-next { background: var(--primary); color: #fff; }
.calc-btn-next:hover { background: var(--primary-dark); }
.calc-btn-next:disabled { background: #ccc; cursor: not-allowed; }
.calc-btn-kakao {
    background: #FEE500;
    color: #3c1e1e;
}
.calc-btn-kakao:hover { background: #ffd700; }
.calc-btn-apply {
    background: linear-gradient(135deg, #ff6b35, #ff8a5c);
    color: #fff;
}
.calc-btn-apply:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,0.35); }

/* 뒤로가기 없는 1단계 */
.calc-footer.single-btn .calc-btn-back { display: none; }

@media (max-width: 560px) {
    .calc-wrap { border-radius: 16px; margin: 0 8px; }
    .calc-option-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .calc-option-card { padding: 16px 8px; }
    .calc-step-label { display: none; }
    .calc-body { padding: 18px 16px 22px; }
    .calc-footer { padding: 0 16px 20px; }
}