/*
 * landing-v2.css — 랜딩 v2 디자인 시스템 (수석 웹디자이너 박제 2026-06-01)
 *
 * 컨셉: 토스 큰 여백 + 노션 깔끔 카드 + 리니어 정밀 그리드 + Apple 부드러운 그림자
 * 원칙: 모바일 First (360 → 768 → 1280 → 1920), 8pt grid, 라운드 12px, Pretendard
 * 토큰 정합: design-tokens.css 참조 (--hp-* 변수만 사용, 하드코딩 색은 그린·오렌지·네이비 3종만)
 */

/* ===== 0. 컨테이너 ===== */
.lv2-section {
    padding: 80px 24px;
}
.lv2-container {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
.lv2-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.lv2-eyebrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hp-brand-600);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.lv2-section-title {
    font-family: var(--hp-font-sans);
    font-size: 44px;
    line-height: 1.25;
    color: var(--hp-text-primary);
    font-weight: 800;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}
.lv2-section-sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--hp-text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

/* ===== 1. Hero ===== */
.lv2-hero {
    position: relative;
    padding: 96px 24px 80px;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(15, 110, 86, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, rgba(255, 107, 53, 0.08), transparent 60%),
        linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
    overflow: hidden;
}
.lv2-hero-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.lv2-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 110, 86, 0.08);
    color: var(--hp-brand-700);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 26px;
    border: 1px solid rgba(15, 110, 86, 0.16);
}
.lv2-hero-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hp-brand-500);
    box-shadow: 0 0 0 4px rgba(15, 110, 86, 0.18);
}
.lv2-hero-h1 {
    font-family: var(--hp-font-sans);
    font-size: 60px;
    line-height: 1.16;
    font-weight: 800;
    color: var(--hp-text-primary);
    letter-spacing: -0.025em;
    margin: 0 0 22px;
}
.lv2-hero-h1 .hl-green { color: #0F6E56; }
.lv2-hero-h1 .hl-orange { color: #FF6B35; }
.lv2-hero-sub {
    font-size: 22px;
    line-height: 1.6;
    color: var(--hp-text-secondary);
    max-width: 760px;
    margin: 0 auto 44px;
}
.lv2-hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.lv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 60px;
    padding: 0 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lv2-btn-primary {
    background: linear-gradient(135deg, #0F6E56 0%, #0A5240 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(15, 110, 86, 0.28);
}
.lv2-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 110, 86, 0.36);
}
.lv2-btn-secondary {
    background: #FFFFFF;
    color: #1A2B4A;
    border: 1.5px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(15, 20, 25, 0.04);
}
.lv2-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: #1A2B4A;
    box-shadow: 0 10px 24px rgba(26, 43, 74, 0.14);
}
.lv2-hero-trust {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.lv2-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 10px 16px;
    color: var(--hp-text-secondary);
    font-size: 15px;
    font-weight: 600;
}
.lv2-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.lv2-trust-dot.green { background: #0F6E56; }
.lv2-trust-dot.navy { background: #1A2B4A; }
.lv2-trust-dot.orange { background: #FF6B35; }

/* ===== 2. Feature ===== */
.lv2-feature {
    background: #FFFFFF;
}
.lv2-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lv2-feature-card {
    background: #FFFFFF;
    border: 1px solid #EAEDF0;
    border-radius: 16px;
    padding: 32px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.lv2-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 4px;
    background: var(--accent, #0F6E56);
}
.lv2-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 20, 25, 0.08);
    border-color: transparent;
}
.lv2-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-bg, rgba(15, 110, 86, 0.10));
    color: var(--accent, #0F6E56);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}
.lv2-feature-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--hp-text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.lv2-feature-body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--hp-text-secondary);
    margin: 0;
}
.lv2-feature-card.green {
    --accent: #0F6E56;
    --accent-bg: rgba(15, 110, 86, 0.10);
}
.lv2-feature-card.orange {
    --accent: #FF6B35;
    --accent-bg: rgba(255, 107, 53, 0.10);
}
.lv2-feature-card.navy {
    --accent: #1A2B4A;
    --accent-bg: rgba(26, 43, 74, 0.10);
}

/* ===== 3. Pricing ===== */
.lv2-pricing {
    background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
}
.lv2-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.lv2-pricing-card {
    background: #FFFFFF;
    border: 1.5px solid #EAEDF0;
    border-radius: 20px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lv2-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 20, 25, 0.08);
}
.lv2-pricing-card.featured {
    border-color: #0F6E56;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F9F5 100%);
    box-shadow: 0 24px 48px rgba(15, 110, 86, 0.16);
    transform: translateY(-8px);
}
.lv2-pricing-card.featured:hover {
    transform: translateY(-12px);
    box-shadow: 0 32px 64px rgba(15, 110, 86, 0.22);
}
.lv2-pricing-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0F6E56 0%, #0A5240 100%);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(15, 110, 86, 0.32);
}
.lv2-pricing-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}
.lv2-pricing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.lv2-pricing-amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--hp-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.lv2-pricing-unit {
    font-size: 17px;
    font-weight: 600;
    color: var(--hp-text-tertiary);
}
.lv2-pricing-note {
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-brand-600);
    margin: 0 0 10px;
}
.lv2-pricing-desc {
    font-size: 17px;
    color: var(--hp-text-secondary);
    margin: 0 0 26px;
    min-height: 48px;
    line-height: 1.5;
}
.lv2-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}
.lv2-pricing-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text-primary);
    padding: 7px 0;
}
.lv2-pricing-list li::before {
    content: "✓";
    color: #0F6E56;
    font-weight: 800;
    flex-shrink: 0;
}
.lv2-pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
/* 옵션 박스 — 3티어 공통 (PC+모바일 1+1 1만원) */
.lv2-pricing-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 16px 24px;
    background: #F0FAF6;
    border: 1px solid #C7E8DB;
    border-radius: 12px;
    font-size: 16px;
    color: var(--hp-text-primary);
}
.lv2-pricing-addon-label {
    display: inline-block;
    padding: 4px 12px;
    background: #0F6E56;
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.lv2-pricing-addon-text { font-size: 16px; }
.lv2-pricing-addon-text b { color: #0F6E56; font-weight: 800; }
.lv2-pricing-cta-primary {
    background: #0F6E56;
    color: #FFFFFF;
}
.lv2-pricing-cta-primary:hover {
    background: #0A5240;
    transform: translateY(-1px);
}
.lv2-pricing-cta-secondary {
    background: #F4F6F8;
    color: #1A2B4A;
    border: 1px solid #EAEDF0;
}
.lv2-pricing-cta-secondary:hover {
    background: #EAEDF0;
}

/* ===== 4. CTA ===== */
.lv2-cta {
    background:
        radial-gradient(800px 400px at 50% 100%, rgba(255, 107, 53, 0.18), transparent 60%),
        linear-gradient(135deg, #0F6E56 0%, #1A2B4A 100%);
    color: #FFFFFF;
    text-align: center;
    border-radius: 0;
}
.lv2-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.lv2-cta-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 16px;
    color: #FFFFFF;
}
.lv2-cta-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px;
}
.lv2-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 36px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0F6E56;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lv2-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* ===== 5. Footer ===== */
.lv2-footer {
    background: #0F1419;
    color: rgba(255, 255, 255, 0.72);
    padding: 56px 24px 32px;
    font-size: 13px;
    line-height: 1.7;
}
.lv2-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}
.lv2-footer-brand .logo {
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px;
}
.lv2-footer-brand .desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
}
.lv2-footer-col h4 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
}
.lv2-footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s ease;
}
.lv2-footer-col a:hover {
    color: #FFFFFF;
}
.lv2-footer-bottom {
    max-width: 1180px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* ===== 6. Responsive (모바일 First — 작은 화면 우선) ===== */
@media (max-width: 1024px) {
    .lv2-feature-grid,
    .lv2-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .lv2-pricing-card.featured {
        transform: none;
    }
    .lv2-pricing-card.featured:hover {
        transform: translateY(-4px);
    }
    .lv2-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .lv2-section { padding: 64px 20px; }
    .lv2-hero { padding: 72px 20px 56px; }
    .lv2-hero-h1 { font-size: 40px; }
    .lv2-hero-sub { font-size: 18px; }
    .lv2-section-title { font-size: 32px; }
    .lv2-section-sub { font-size: 17px; }
    .lv2-feature-title { font-size: 21px; }
    .lv2-feature-body { font-size: 16px; }
    .lv2-pricing-amount { font-size: 40px; }
    .lv2-pricing-list li { font-size: 16px; }
    .lv2-pricing-desc { font-size: 16px; }
    .lv2-cta-title { font-size: 30px; }
    .lv2-btn { width: 100%; }
    .lv2-hero-cta { flex-direction: column; align-items: stretch; }
    .lv2-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .lv2-footer-bottom { flex-direction: column; align-items: flex-start; }
}