:root {
    --orange:#FF6B35; --navy:#1A2B4A; --navy2:#2C3E6B;
    --white:#fff; --bg:#F4F5F7; --gray:#8B95A1;
    --dark:#2A2A2A; --purple:#7C3AED;
    --r-lg:20px; --r-md:16px; --r-sm:12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif;
    background: #ffffff;
    color: #0a0a0a;
}
a { text-decoration: none; }

/* ══ 1. 이벤트 스트립 ══ */
.strip{
    background:var(--navy);color:#fff;
    text-align:center;padding:8px 16px;
    font-size:14.5px;font-weight:600;letter-spacing:-.15px;
    position:sticky;top:0;z-index:0;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.strip em{
    background:var(--orange);color:#fff;
    padding:2px 8px;border-radius:20px;
    font-size:10.5px;font-weight:700;font-style:normal;
}

/* ── Hero Section ── */
.hero-section {
    background: linear-gradient(142deg, #1a2b4a 0%, #1b2d4d 14.3%, #1d2f51 28.6%, #1e3255 42.9%, #203458 57.1%, #21365c 71.4%, #23395f 85.7%, #243b63 100%);
    padding: 60px 280px;
    min-height: 820px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Left col */
.hero-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 120px;
}
.hero-heading h1 {
    font-size: 52px;
    font-weight: 700;
    color: white;
    line-height: 1.15;
    letter-spacing: -1px;
    transition: opacity 0.4s ease;
}
.hero-heading h1.fade-out { opacity: 0; }
.hero-heading h1 span { color: #ff6b35; }
.hero-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.65;
    transition: opacity 0.4s ease;
}
.hero-desc.fade-out { opacity: 0; }
.hero-desc span { color: #ff6b35; }
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stat-card {
    background: rgba(255,255,255,0.1);
    border: 0.9px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #ff6b35;
    line-height: 1.5;
    text-align: center;
}
.stat-value.white { color: white; font-size: 28px; }
.stat-value.orange-sm { color: #ff6b35; font-size: 28px; }
.stat-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-align: center;
    line-height: 1.5;
}
.hero-btns {
    display: flex;
    gap: 12px;
}
.btn-primary {
    background: #ff6b35;
    border: none;
    border-radius: 14px;
    padding: 0 28px;
    height: 58px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);
    white-space: nowrap;
}
.btn-ghost {
    background: rgba(255,255,255,0.1);
    border: 0.9px solid rgba(255,255,255,0.3);
    border-radius: 14px;
    padding: 0 28px;
    height: 58px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.hero-guide-link {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
}

/* 가이드북 버튼 */
.guidebook-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.16);border-radius:10px;padding:10px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,0.78);cursor:pointer;transition:all 0.2s;text-decoration:none; width: max-content;}
.guidebook-btn:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.28);color:#fff;}
.guidebook-btn .gb-icon{font-size:18px;}
.guidebook-badge{display:inline-block;background:#F59E0B;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:2px;animation:badgePulse 2s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{opacity:1;}50%{opacity:0.6;}}

/* Right col */
.hero-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Onboarding Event Card ── */
.onboarding-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.1);
}
.onboarding-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.badge-orange {
    background: #ff6b35;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}
.onboarding-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2b4a;
}
.onboarding-steps {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}
.onboarding-steps span.orange { color: #ff6b35; }
.onboarding-steps span.purple { color: #7c3aed; }
.onboarding-steps span.navy { color: #1a2b4a; }
.onboarding-steps span.gray { color: #8b95a1; font-weight: 400; }

.boost-visual {
    background: linear-gradient(90deg, #fff5f2 0%, #fef5f3 10%, #fdf4f5 20%, #fbf4f6 30%, #faf3f7 40%, #f9f3f9 50%, #f8f2fa 60%, #f7f2fb 70%, #f5f1fc 80%, #f4f1fe 90%, #f3f0ff 100%);
    border: 1.8px dashed rgba(255,107,53,0.3);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.boost-from, .boost-to {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.boost-label {
    font-size: 10px;
    color: #8b95a1;
    text-align: center;
}
.boost-label.purple { color: #7c3aed; font-weight: 700; }
.boost-badge-gray {
    background: #f4f5f7;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1a2b4a;
}
.boost-badge-gradient {
    background: linear-gradient(90deg, #ff6b35 0%, #7c3aed 100%);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    color: white;
}
.boost-arrow {
    font-size: 24px;
    color: #ff6b35;
}
.boost-desc {
    font-size: 12px;
    color: #8b95a1;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 16px;
}
.btn-dark {
    background: #1a2b4a;
    border: none;
    border-radius: 14px;
    width: 100%;
    height: 47px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 8px;
}
.btn-light-border {
    background: white;
    border: 0.9px solid #e0e0e0;
    border-radius: 10px;
    width: 100%;
    height: 37px;
    font-size: 13px;
    font-weight: 500;
    color: #1a2b4a;
    cursor: pointer;
    font-family: inherit;
}

/* ── Simulator Card ── */
.simulator-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.1);
}
.simulator-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 16px;
}
.sim-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.sim-label {
    font-size: 11px;
    font-weight: 500;
    color: #8b95a1;
}
.sim-toggle {
    display: flex;
    gap: 8px;
}
.sim-toggle-btn {
    flex: 1;
    height: 33px;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    background: #f4f5f7;
    color: #8b95a1;
    transition: all 0.2s;
}
.sim-toggle-btn.active-orange {
    background: #ff6b35;
    color: white;
}
.sim-toggle-btn.active-purple {
    background: #7c3aed;
    color: white;
}
.sim-select {
    width: 100%;
    height: 35px;
    border: 0.9px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    color: #2a2a2a;
    background: #f4f5f7;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b95a1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
.sim-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.sim-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sim-slider-label { font-size: 11px; font-weight: 500; color: #8b95a1; }
.sim-slider-val { font-size: 11px; font-weight: 700; color: #ff6b35; }
.sim-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #e0e0e0;
    outline: none;
    cursor: pointer;
}
.sim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff6b35;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(255,107,53,0.4);
}
.sim-result {
    background: linear-gradient(90deg, #fff5f2 0%, #fff4f0 25%, #fff3ee 50%, #fff1ed 75%, #fff0eb 100%);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sim-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
}
.sim-result-label { font-size: 12px; color: #8b95a1; }
.sim-result-value { font-size: 20px; font-weight: 700; color: #1a2b4a; }
.sim-result-value.orange { color: #ff6b35; }
.sim-result-divider {
    border-top: 0.9px solid rgba(139,149,161,0.2);
    padding-top: 6px;
}
.sim-result-note { font-size: 10px; color: #8b95a1; }
.sim-result-note-link {
    font-size: 11px;
    color: #7c3aed;
    text-align: center;
    margin-top: 8px;
}

/* ── Section base ── */
.section {
    padding: 80px 110px;
}
.section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a2b4a;
    text-align: center;
    margin-bottom: 16px;
}
.section-desc {
    font-size: 18px;
    color: #8b95a1;
    text-align: center;
    margin-bottom: 48px;
}

/* ── Teaching Type Section ── */
.type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto 24px;
}
.type-card {
    background: white;
    border: 1.8px solid #e0e0e0;
    border-radius: 16px;
    padding: 32px;
}
.type-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 24px;
}
.type-icon.orange { background: rgba(255,107,53,0.1); }
.type-icon.purple { background: rgba(124,58,237,0.1); }
.type-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 12px;
}
.type-card p {
    font-size: 15px;
    color: #8b95a1;
    line-height: 1.63;
    margin-bottom: 20px;
}
.type-link-orange { font-size: 14px; font-weight: 700; color: #ff6b35; }
.type-link-purple { font-size: 14px; font-weight: 700; color: #7c3aed; }

/* QnA Card */
.qna-card {
    background: white;
    border: 1.8px solid #e0e0e0;
    border-radius: 16px;
    padding: 34px;
    max-width: 1024px;
    margin: 0 auto;
}
.qna-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.qna-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(124,58,237,0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.badge-orange-light {
    background: rgba(255,107,53,0.1);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ff6b35;
}
.qna-card h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 16px;
}
.qna-intro p {
    font-size: 16px;
    font-weight: 500;
    color: #1a2b4a;
    line-height: 1.625;
    margin-bottom: 2px;
}
.qna-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

/* Recommended track */
.rec-track {
    background: #f4f5f7;
    border-radius: 14px;
    padding: 20px;
}
.rec-track-title {
    font-size: 13px;
    font-weight: 700;
    color: #8b95a1;
    margin-bottom: 16px;
}
.rec-track-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rec-track-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.step-circle.purple { background: #7c3aed; }
.step-circle.orange { background: #ff6b35; }
.rec-track-item span { font-size: 15px; font-weight: 500; color: #1a2b4a; }

/* QnA preview */
.qna-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.qna-preview-title { font-size: 15px; font-weight: 700; color: #1a2b4a; }
.qna-preview-more { font-size: 12px; font-weight: 500; color: #8b95a1; }
.qna-item {
    background: #f4f5f7;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
}
.qna-item-inner {
    display: flex;
    gap: 12px;
}
.qna-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.qna-avatar.purple { background: linear-gradient(135deg, #7c3aed, #9d5cff); }
.qna-avatar.orange { background: linear-gradient(135deg, #ff6b35, #ff8a5e); }
.qna-content { flex: 1; }
.qna-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.qna-user { font-size: 11px; font-weight: 700; color: #1a2b4a; }
.qna-status-badge {
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
}
.qna-status-badge.purple { background: rgba(124,58,237,0.1); color: #7c3aed; }
.qna-status-badge.orange { background: rgba(255,107,53,0.1); color: #ff6b35; }
.qna-question { font-size: 12px; font-weight: 500; color: #1a2b4a; margin-bottom: 4px; }
.qna-answer-row { display: flex; align-items: center; gap: 8px; }
.qna-a-badge {
    border-radius: 4px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 500;
    height: 19px;
    display: flex;
    align-items: center;
}
.qna-a-badge.gray { background: rgba(26,43,74,0.1); color: #1a2b4a; }
.qna-a-badge.green { background: rgba(0,201,80,0.2); color: #00a63e; }
.qna-a-text { font-size: 10px; color: rgba(26,43,74,0.6); }

/* Countdown card */
.qna-right { display: flex; flex-direction: column; gap: 12px; }
.countdown-card {
    background: linear-gradient(138deg, #1a2b4a 0%, #1b2d4d 14.3%, #1d2f51 28.6%, #1e3255 42.9%, #203458 57.1%, #21365c 71.4%, #23395f 85.7%, #243b63 100%);
    border-radius: 16px;
    padding: 20px;
}
.countdown-header {
    background: #ff6b35;
    border-radius: 14px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.countdown-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: white;
}
.countdown-dday { font-size: 13px; font-weight: 700; color: white; }
.countdown-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}
.countdown-unit { text-align: center; }
.countdown-num {
    font-size: 24px;
    font-weight: 700;
    color: white;
    display: block;
    line-height: 1.5;
}
.countdown-unit-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}
.countdown-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.countdown-progress-label span {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}
.countdown-progress-label strong {
    font-size: 11px;
    font-weight: 700;
    color: white;
}
.progress-track {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}
.progress-fill {
    height: 100%;
    background: #ff6b35;
    border-radius: 999px;
}
.countdown-info-box {
    background: rgba(255,255,255,0.1);
    border: 0.9px solid rgba(255,107,53,0.3);
    border-radius: 14px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.countdown-info-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}
.countdown-info-row strong { color: #ff6b35; font-weight: 700; }
.btn-event-notify {
    border: 1.8px solid #ff6b35;
    background: none;
    border-radius: 14px;
    width: 100%;
    height: 47px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
}
.btn-event-notify:hover{background:rgba(255,107,53,0.28);border-color:#FF6B35;}
.btn-event-notify.notified{background:rgba(16,185,129,0.15);border-color:#10B981;color:#10B981;}

/* ── Onboarding Quest Section ── */
.quest-section {
    background: #f4f5f7;
    padding: 80px 280px;
}
.quest{display:none;flex-direction:column;gap:0;position:relative}
.qi{display:flex;align-items:flex-start;gap:13px;padding-bottom:18px;position:relative}
.qi:last-child{padding-bottom:0}
.ql{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.qc{
    width:38px;height:38px;border-radius:50%;
    background:var(--bg);border:2px solid #dde2ea;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;position:relative;z-index:1;
}
.qc.act{background:#fff0e8;border-color:var(--orange)}
.qc.rew{background:#ede9fe;border-color:var(--purple)}
.qline{width:2px;flex:1;background:#e8ebf0;margin-top:3px;min-height:24px}
.qi:last-child .qline{display:none}
.qinfo{flex:1;padding-top:7px}
.qstep{font-size:10.5px;color:var(--gray);font-weight:600;letter-spacing:.2px;margin-bottom:2px}
.qtitle{font-size:14.5px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.qtitle.rv{color:var(--purple)}
.qdesc{font-size:11.5px;color:var(--gray);margin-top:2px;line-height:1.5}
.rew-tag{
    display:inline-flex;align-items:center;gap:3px;
    background:#ede9fe;color:var(--purple);
    padding:3px 9px;border-radius:20px;
    font-size:10.5px;font-weight:700;margin-top:5px;
}
.quest-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
.quest-step-card {
    background: white;
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
}
.quest-step-num {
    width: 48px;
    height: 48px;
    background: #ff6b35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0 auto 16px;
}
.quest-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 6px;
}
.quest-step-desc { font-size: 13px; color: #8b95a1; }
.quest-cta { text-align: center; }
.btn-cta-big {
    background: #ff6b35;
    border: none;
    border-radius: 14px;
    padding: 0 72px;
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1);
}

/* ── FAQ Section ── */
.faq-section {
    padding: 80px 110px;
    max-width: 1390px;
    margin: 0 auto;
}
.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: white;
    border: 0.9px solid #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.faq-question-text {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b4a;
}
.faq-icon {
    width: 20px;
    height: 20px;
    color: #8b95a1;
    font-size: 18px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-answer {
    display: none;
    padding: 0 24px 20px;
    font-size: 14px;
    color: #8b95a1;
    line-height: 1.6;
}
.faq-item.open .faq-answer { display: block; }

/* ── CTA Section ── */
.cta-section {
    background: linear-gradient(158deg, #1a2b4a 0%, #1b2d4d 14.3%, #1d2f51 28.6%, #1e3255 42.9%, #203458 57.1%, #21365c 71.4%, #23395f 85.7%, #243b63 100%);
    padding: 96px 247px;
}
.cta-inner { max-width: 896px; margin: 0 auto; }
.cta-heading {
    font-size: 48px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
}
.cta-heading span { color: #ff6b35; }
.cta-sub {
    font-size: 20px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-bottom: 40px;
}
.cta-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.btn-cta-hero {
    background: #ff6b35;
    border: none;
    border-radius: 16px;
    padding: 0 48px;
    height: 78px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}
.btn-cta-ghost {
    background: rgba(255,255,255,0.1);
    border: 0.9px solid rgba(255,255,255,0.3);
    border-radius: 14px;
    padding: 0 32px;
    height: 48px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    font-family: inherit;
}

/* ══ 고정 하단 ══ */
.sticky-btn{
    position:fixed;bottom:0;left:50%;transform:translateX(-50%);
    width:100%;max-width:430px;
    background:#fff;border-top:1px solid #e8ebf0;
    padding:10px 18px;z-index:400;
    box-shadow:0 -3px 16px rgba(0,0,0,.07);
    display: none;
}
.sticky-btn .btn-p {
    display:block;width:100%;background:var(--orange);color:#fff;
    border:none;border-radius:var(--r-md);padding:15px;
    font-size:15px;font-weight:800;text-align:center;cursor:pointer;
    text-decoration:none;letter-spacing:-.3px;
    box-shadow:0 4px 18px rgba(255,107,53,.38);transition:.18s;
}
.sticky-btn .btn-p:active {transform:scale(.97)}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .hero-section { padding: 60px 48px; }
    .section { padding: 60px 48px; }
    .quest-section { padding: 60px 48px; }
    .cta-section { padding: 80px 48px; }
    .faq-section { padding: 60px 48px; }
    .quest-steps { grid-template-columns: repeat(3, 1fr); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    
}
@media (max-width: 900px) {
    .strip {font-size:11.5px;}
    .strip em {font-size:10.5px;}
    .hero-section { grid-template-columns: 1fr; padding: 40px 24px; }
    .section,
    .faq-section {padding: 40px 24px;}
    .hero-left { padding-top: 24px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .type-cards { grid-template-columns: 1fr; }
    .qna-inner { grid-template-columns: 1fr; }
    .quest-steps { grid-template-columns: repeat(2, 1fr); display: none;}
    .quest.mobile {display: flex;}
    .cta-section { padding: 60px 24px; }
    .cta-heading { font-size: 32px; }
    .sticky-btn {display: block;}
    
}
@media (max-width: 600px) {
    .hero-heading h1 { font-size: 36px; }
    .section,
    .faq-section {padding: 30px 16px;}
    .section-title { font-size: 28px; }
    .quest-steps { grid-template-columns: 1fr 1fr; }
    .hero-btns { flex-direction: column; }
    .btn-primary, .btn-ghost { width: 100%; }
    .hero-desc {height: 90px;}
    .guidebook-btn {width: 100%;}
}