/* ══════════════════════════════════
   TOKENS
══════════════════════════════════ */
:root {
    /* 원시 컬러 */
    --color-white: #ffffff;
    --color-black: #111111;

    --color-blue-50: #F8F8FF;
    --color-blue-100: #F0F1FF;
    --color-blue-300: #6ED8FF;
    --color-blue-400: #4C98FF;
    --color-blue-500: #5764F0;
    --color-blue-600: #332D77;
    --color-blue-700: #000209;

    --color-purple-500: #673AFF;

    --color-red-400: #FF8E8E;
    --color-red-500: #FF6B6B;

    --color-gray-100: #F8F8F8;
    --color-gray-200: #E6E6E6;
    --color-gray-300: #DDDDDD;
    --color-gray-700: #666666;
    --color-gray-800: #999999;
    --color-gray-900: #222222;

    /* 시맨틱 컬러 */
    --primary: var(--color-blue-500);
    --primary-hover: var(--color-blue-600);
    --primary-soft: var(--color-blue-100);
    --primary-subtle: var(--color-blue-50);

    --secondary: var(--color-red-400);
    --secondary-hover: var(--color-red-500);
    --secondary-soft: #fff1ec;

    --surface: var(--color-white);
    --surface-soft: var(--color-blue-100);
    --surface-muted: var(--color-gray-100);
    --surface-dark: var(--color-black);

    --border: var(--color-gray-300);
    --border-soft: var(--color-blue-100);
    --border-muted: var(--color-blue-100);

    --text-title: var(--color-gray-900);
    --text-sub: var(--color-gray-800);
    --text-body: var(--color-gray-700);
    --text-caption: var(--color-gray-100);
    --text-strong: var(--color-blue-600);
    --text-accent: var(--color-blue-300);
    --text-inverse: var(--color-white);
    --text-kakao: var(--color-black);

    --kakao: #FEE500;
    --kakao-hover: #f5db00;

    --linear-primary: linear-gradient(90deg, var(--color-blue-400) 0%, var(--color-purple-500) 100%);
    --linear-secondary: linear-gradient(90deg, var(--color-red-400) 0%, var(--color-red-500) 100%);

    /* 투명도 */
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 17, 17, 17;
    --color-blue-500-rgb: 87, 100, 240;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --form-w: 400px;

    /* 데스크탑 폼 너비 */
    --max-w: 1280px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'nexon2', sans-serif;
}

/* ══════════════════════════════════
   DESKTOP LAYOUT  (≥ 900px)
   좌: 콘텐츠  우: 폼 sticky
══════════════════════════════════ */
.page-wrap {

    max-width: 100%;
    min-width: 360px;
    /* 가장 작은 모바일 기준 — 그보다 좁으면 가로 스크롤(레이아웃 유지) */
    margin: 0 auto;
}

/* content-col + aside 를 좌우로 묶는 영역 (hero/footer는 이 밖에서 전폭) */
.main-area {
    display: grid;
    grid-template-columns: 1fr var(--form-w);
    align-items: start;
    gap: 0;
}

/* 콘텐츠 열 — 좌우 패딩 0(거터는 각 content-block 이 담당) */
.content-col {
    min-width: 0;
    padding: 48px 0;
}

/* 각 섹션 래퍼 — 좌우 거터 40(폼과 간격). reviews/faq 는 자체 패딩 */
.content-block {
    padding: 0 40px;
}

/* 폼 열 — sticky */
.desktop-form-col {
    position: sticky;
    top: 111px;
       height: calc(100vh - 112px);
    overflow-y: auto;
    background: var(--surface);
    border-left: 0.5px solid var(--border);
    padding: 0;
    scrollbar-width: thin;
    box-shadow: -24px 0 24px -24px var(--surface-muted);
    z-index: 2;
}

.desktop-form-col::-webkit-scrollbar {
    width: 4px;
}

.desktop-form-col::-webkit-scrollbar-thumb {
    background: var(--primary-soft);
    border-radius: 2px;
}

.desktop-form-inner {
    padding: 36px 28px 40px;
}

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.hero {
    background: var(--primary);
    color: var(--surface);
    padding: 64px 40px 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* 인물이 하단에 있어 바닥 정렬 */
    justify-content: space-between;
    gap: 24px;
}

.hero::after {
    content: "";
    position: absolute;
    right: var(--form-w);
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(var(--color-white-rgb), 0.06);
    pointer-events: none;
}

.hero-content {
    max-width: 620px;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    /* 텍스트가 이미지 위로 */
}

/* hero 우측 이미지 — 폭(55%) 기준, 우/하단 패딩 상쇄해 모서리에 딱 붙임 */
.hero-visual {
    flex: 0 0 55%;
    /* 폭 55% 기준 — 화면 줄면 비율로 같이 줄다가 899↓ 사라짐 */
    align-self: flex-end;
    /* 바닥 정렬 */
    margin: 0 -40px -48px 0;
    /* hero 우(40)·하(48) padding 상쇄 */
    display: flex;
    justify-content: flex-end;
}

.hero-visual img {
    width: 100%;
    /* 폭 기준 (height 는 비율대로) */
    height: auto;
    display: block;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--color-white-rgb), 0.05);
    border: 0.5px solid rgba(var(--color-white-rgb), 0.4);
    color: var(--text-inverse);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}

.hero-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--text-accent);
    border-radius: 50%;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.hero h1 {
    font-family: 'nexon2', serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hero h1 em {
    font-style: normal;
    color: var(--text-accent);
}

.hero-desc {
    font-size: 15px;
    color: var(--text-inverse);
    line-height: 1.75;
    margin-bottom: 28px;
}

.hero-desc strong {
    color: var(--text-accent);
    font-weight: 600;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 32px;
}

.trust-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--color-white-rgb), 0.05);
    border: 0.5px solid rgba(var(--color-white-rgb), 0.4);
    color: var(--text-inverse);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
}

.trust-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(var(--color-white-rgb), 0.3);
    border-radius: var(--r-md);
    overflow: hidden;
    max-width: 460px;
    padding: 14px 10px;
}

.stat {
    text-align: center;
    border-right: 1px solid var(--color-blue-500);
}

.stat:last-child {
    border-right: 0;
}

.stat-num {
    display: block;
    font-family: 'nexon2', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-inverse);
}

/* ══════════════════════════════════
   CONTENT SECTIONS
══════════════════════════════════ */
.eyebrow {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.section-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.4;
    padding: 12px 0 18px 0;
}

.section-sub {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* PROGRAM PILLS */
.prog-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 48px;
}

.prog-pill {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 16px;
    transition: border-color 0.15s, transform 0.15s;
}

.prog-pill:hover {
    border-color: var(--primary);
    transform: translateX(2px);
}

.prog-pill-icon {
    width: 100%;
    /* 그리드 첫 칸(60px) 채움 — 픽셀값은 grid 한 곳에서만 관리 */
    height: 60px;
    object-fit: contain;
    display: block;
}

.prog-pill-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
}

.prog-pill-desc {
    font-size: 14px;
    color: var(--text-body);
}

.prog-pill-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    background: var(--primary-subtle);
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* STEPS */
.steps {
    display: flex;
    flex-direction: column;
}

.step-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 28px;
    position: relative;
}

.step-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 40px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--border), transparent);
}

.step-num {
    width: 34px;
    height: 34px;
    background: var(--primary);
    color: var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-body {
    list-style: none;
}

.step-body .title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-title);
}

.step-body .desc {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.6;
}

/* ══════════════════════════════════
   REVIEWS
══════════════════════════════════ */
.reviews-bg {
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    padding: 52px 0 52px 40px;
    position: relative;
    /* ::after 페이드 기준 */
}

/* 우측 20% 흰색 페이드 — 카드가 오른쪽에서 뎅강 잘리지 않고 fade-out */
.reviews-bg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    background: linear-gradient(to left,
            rgba(var(--color-white-rgb), 0.8),
            rgba(var(--color-white-rgb), 0));
    pointer-events: none;
}

.reviews-head {
    margin-bottom: 28px;
}

.reviews-scroll {
    display: flex;
    gap: 14px;

    width: 100%;
    max-width: none;
    margin-right: 0;
    padding-right: 0;

    position: relative;
    z-index: 1;
    pointer-events: auto;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-soft) transparent;
    padding-bottom: 6px;

    cursor: grab;
    user-select: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.reviews-scroll.is-dragging {
    cursor: grabbing;
}

.reviews-scroll.is-dragging .review-card {
    pointer-events: none;
}

.review-card {
    background: var(--surface-muted);
    border: 0.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;

    /* 카드 폭을 키워서 데스크탑에서도 스크롤 여유가 생기게 함 */
    min-width: 320px;

    scroll-snap-align: start;
    flex-shrink: 0;
}

.review-stars {
    color: var(--secondary-hover);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.review-text {
    font-size: 14px;
    color: var(--text-title);
    line-height: 1.7;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-hover);
    flex-shrink: 0;
}

.review-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
}

.review-meta {
    font-size: 12px;
    color: var(--text-body);
}

/* ══════════════════════════════════
   FAQ - 풀사이즈임
══════════════════════════════════ */
.faq-section {
    padding: 52px 40px;
    background: var(--surface-muted);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
}

.faq-item {
    background: var(--surface);
    border-radius: var(--r-md);
    border: 0.5px solid var(--border);
    overflow: hidden;
}

/* 자주 묻는 질문  */
.faq-q {
    width: auto;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-icon {
    font-size: 20px;
    font-weight: 300;
    color: var(--primary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-a {
    display: none;
    padding: 12px 18px 16px;
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.75;
    border-top: 0.5px solid var(--border-soft);
}

.faq-item.open .faq-a {
    display: block;
}

/* ══════════════════════════════════
   DESKTOP FORM (sticky column)
══════════════════════════════════ */
.desk-form-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.desk-form-title {
    font-family: 'nexon2', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.3;
    margin-bottom: 4px;
}

.desk-form-sub {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 22px;
}

.form-divider {
    height: 0.5px;
    background: var(--border);
    margin: 18px 0;
}

/* FIELD */
.field-group {
    margin-bottom: 16px;
}

.field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.required {
    font-size: 12px;
    background: var(--secondary-soft);
    color: var(--secondary-hover);
    padding: 2px 6px;
    border-radius: 4px;
}

.field-hint {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 5px;
}

/* PROG SELECT GRID */
.prog-select-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.prog-opt {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 8px;
    cursor: pointer;
    background: var(--surface-muted);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.12s;
}

.prog-opt:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
    color: var(--primary-hover);
}

.prog-opt.active {
    border-color: var(--primary);
    background: var(--primary-subtle);
    color: var(--primary-hover);
}

.prog-opt-name {
    font-size: 12px;
    font-weight: 700;
    display: block;
}

.prog-opt-desc {
    font-size: 12px;
    opacity: 0.7;
}

/* 5번 항목 전폭 */
.prog-opt-full {
    grid-column: 1 / -1;
}

/* 6번: 기타 관심 사업 버튼 */
.prog-opt-expand {
    justify-content: space-between;
    cursor: pointer;
}

.prog-etc-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.etc-label {
    font-size: 12px;
    font-weight: 700;
}

.etc-arrow {
    font-size: 12px;
    color: var(--primary);
    transition: transform 0.2s;
    display: inline-block;
}

.etc-arrow.open {
    transform: rotate(180deg);
}

.etc-selected-text {
    font-size: 12px;
    color: var(--primary-hover);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 기타 패널 (아코디언) */
.etc-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 5px;
    padding: 10px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary-soft);
    border-radius: var(--r-sm);
    animation: fadeDown 0.18s ease;
}

.etc-panel.open {
    display: grid;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.etc-panel .prog-opt {
    background: var(--surface);
    font-size: 12px;
}

.region-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* INPUTS */
select,
input[type=text],
input[type=tel],
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'nexon2', sans-serif;
    color: var(--text-title);
    background: var(--surface-muted);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}



textarea {
    resize: none;
    min-height: 76px;
    line-height: 1.6;
    font-size: 12px;
}

textarea::placeholder {
    color: var(--text-sub);
    font-size: 12px;
    line-height: 1.6;
}

/* mobile: iOS zoom 방지 */
@media (max-width: 900px) {

    select,
    input[type=text],
    input[type=tel] {
        font-size: 16px;
        padding: 12px 14px;
    }

    textarea {
        font-size: 14px;
    }
}

/* PRIVACY */
.privacy-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    background: var(--surface-muted);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
}


.privacy-row label {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.55;
    cursor: pointer;
}

.privacy-row a {
    color: var(--primary);
    text-decoration: none;
}

/* BUTTONS */
.submit-btn {
    width: 100%;
    background: var(--primary);
    color: var(--surface);
    border: none;
    border-radius: var(--r-md);
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.submit-btn:hover {
    background: var(--primary-hover);
}

.submit-btn:active {
    background: var(--primary-hover);
}

.submit-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 8px;
    line-height: 1.5;
}

.or-row {
    text-align: center;
    position: relative;
    margin: 11px 0;
    font-size: 12px;
    color: var(--text-sub);
}

.or-row::before,
.or-row::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 43%;
    height: 0.5px;
    background: var(--border);
}

.or-row::before {
    left: 0;
}

.or-row::after {
    right: 0;
}

.kakao-btn {
    width: 100%;
    background: var(--kakao);
    color: var(--text-kakao);
    border: none;
    border-radius: var(--r-md);
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}

.kakao-btn:hover {
    background: var(--kakao-hover);
}

/* SUCCESS */
.success-box {
    display: none;
    background: var(--primary-subtle);
    border: 1px solid var(--primary-soft);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    text-align: center;
    margin-top: 12px;
}

.success-box.show {
    display: block;
    animation: fadeUp 0.35s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.success-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--text-inverse);
    font-size: 22px;
}

.success-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-hover);
    margin-bottom: 10px;
}

.success-list {
    list-style: none;
    text-align: left;
}

.success-list li {
    font-size: 12px;
    color: var(--text-body);
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.55;
}

.success-list li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.site-footer {
    background: var(--text-title);
    color: rgba(var(--color-white-rgb), 0.8);
    text-align: center;
    padding: 32px 20px;
    font-size: 12px;
    line-height: 2;
}

.site-footer strong {
    color: rgba(var(--color-white-rgb), 0.6);
}

/* ══════════════════════════════════
   MOBILE BOTTOM BAR  (< 900px)
══════════════════════════════════ */
.bottom-bar {
    display: none;
    /* JS로 제어 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(var(--color-black-rgb), 0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.bottom-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottom-bar-text {
    flex: 1;
    min-width: 0;
}

.bottom-bar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
}

.bottom-bar-sub {
    font-size: 12px;
    color: var(--text-body);
}

.bottom-bar-btn {
    background: var(--primary);
    color: var(--surface);
    border: none;
    border-radius: var(--r-md);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.bottom-bar-btn:active {
    background: var(--primary-hover);
}




/* ══════════════════════════════════
   BOTTOM SHEET  (< 900px)
══════════════════════════════════ */
.sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--color-black-rgb), 0.45);
    z-index: 200;
    align-items: flex-end;
}

.sheet-overlay.show {
    display: flex;
    animation: fadeOverlay 0.22s ease;
}

@keyframes fadeOverlay {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.sheet {
    width: 100%;
    max-height: 92vh;
    background: var(--surface);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

.sheet-handle {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px 0;
    gap: 12px;
}

.sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: var(--border-muted);
    border-radius: 2px;
}

.sheet-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-title);
}

.sheet-close {
    width: 32px;
    height: 32px;
    background: var(--surface-muted);
    border: none;
    border-radius: 50%;
    font-size: 18px;
    color: var(--text-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ══════════════════════════════════
   RESPONSIVE BREAKPOINT
══════════════════════════════════ */

/* ── ≤1280: 좁아지면 좌측 거터 복원(풀폭 데스크탑에선 review-content 좌측 0) ── */
@media (max-width: 1280px) {
    .review-content {
        padding-left: 40px;
    }
}

/* ── ≤900: 모바일 단일 컬럼 ── */
@media (max-width: 900px) {

    /* 단일 컬럼 — 2컬럼 grid 는 main-area 에 있음(page-wrap 아님) */
    .page-wrap {
        max-width: 100%;
    }

    .main-area {
        display: block;
    }

    /* 좌우 거터 모바일값(32) — 폼 숨김이라 우패딩도 거터로 */
    .content-block {
        padding: 0 32px;
    }

    .review-content {
        padding-left: 32px;
    }

    /* 모바일 body 패딩 (하단 바 공간) */
    body {
        padding-bottom: 62px;
    }

    /* hero 모바일 */
    .hero {
        padding: 48px 20px 36px;
    }

    .hero::after {
        right: -30px;
        top: -40px;
        width: 180px;
        height: 180px;
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero-desc {
        font-size: 14px;
    }

    .hero-stats {
        max-width: 100%;
    }

    /* hero 우측 이미지 숨김 → 텍스트/stats 풀폭 */
    .hero-visual {
        display: none;
    }

    .stat-num {
        font-size: 20px;
    }

    /* 콘텐츠 컬럼 패딩 */
    .content-col {
        padding: 28px 0;
    }

    /* reviews 는 가로스크롤 풀블리드라 좌우 0 */
    .reviews-bg {
        padding: 32px 0;
    }

    /* faq 좌우 거터를 다른 블록과 동일하게 32 */
    .faq-section {
        padding: 32px 32px;
    }

    /* section titles */
    .section-title {
        font-size: 22px;
    }

    /* 데스크탑 sticky 폼 숨김 */
    .desktop-form-col {
        display: none;
    }

    /* 하단 바 표시 (JS로 show/hide) + 다크 그라데이션 강조 */
    .bottom-bar {
        display: block;
        background: linear-gradient(180deg, var(--color-blue-700) 0%, var(--color-blue-700) 40%, var(--color-blue-500) 100%);
        border-top: none;
        box-shadow: 0 -10px 30px rgba(var(--color-black-rgb), 0.35);
    }

    .bottom-bar-title {
        color: var(--text-inverse);
    }

    .bottom-bar-sub {
        color: rgba(255, 255, 255, 0.7);
    }

    .bottom-bar-btn {
        background: var(--color-white);
        color: var(--color-blue-700);
        box-shadow: 0 4px 14px rgba(var(--color-black-rgb), 0.25);
    }

    .bottom-bar-btn:active {
        transform: scale(0.97);
        background: var(--color-gray-100);
    }
}

/* ── ≤600: 프로그램 아이콘 축소(60→40) ── */
@media (max-width: 600px) {

    /* 아이콘 칸을 40 으로 — 아이콘 width:100% 라 자동 따라감 */
    .prog-pill {
        grid-template-columns: 40px 1fr auto;
        align-items: start;
        gap: 8px;
    }

    .prog-pill-icon {
        height: 40px;
    }
}