:root {
    /* === ecopulse 4-tone 팔레트 (2026) ===
       이미지 1 ecopulse 로고에서 추출한 통일된 그린 시스템
       - 4가지 핵심 톤이 명확한 역할로 분배됨
    */

    /* [1] 비비드 그린 — 메인 액센트 / CTA / 강조 */
    --violet:        #2BD964;  /* ecopulse 비비드 그린 */
    --violet-deep:   #1A4D3E;  /* ecopulse 딥 그린 */
    --violet-light:  #A8E6BC;  /* ecopulse 라이트 민트 */

    /* [2] 잉크 블랙 — 풀 다크 섹션 */
    --ink:           #0A1F17;  /* ecopulse 잉크 (거의 블랙에 가까운 다크 그린) */

    /* [3] 라이트 톤 — 배경 / 카드 */
    --chalk:         #E8F7EE;  /* 라이트 민트 배경 */
    --white:         #FFFFFF;

    /* [4] 포인트 액센트 — 가끔 등장하는 강조 */
    --turbo:         #C7F034;  /* 라임 (이미지 2에서 영감받은 포인트, 절제해서 사용) */

    /* === 중성색 === */
    --gray-200:      #E6E6E6;
    --gray-400:      #B5B5B5;
    --gray-600:      #686868;
    --gray-700:      #575757;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
    background: var(--white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   스크롤 진행도 바 (최상단)
============================================ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    box-shadow: 0 0 12px rgba(212,255,61,0.6);
    transition: width 0.08s linear;
}

/* ============================================
   플로팅 스티키 CTA — PC: 우측 하단 / 모바일: 풀와이드
============================================ */
.sticky-cta {
    display: block;
    position: fixed;
    z-index: 90;
    transform: translateY(140%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    /* PC 기본: 우측 하단 플로팅 */
    right: 24px;
    bottom: 24px;
    left: auto;
    width: auto;
    max-width: 360px;
}
.sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.sticky-cta-inner {
    background: var(--ink);
    border-radius: 20px;
    padding: 14px 14px 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(15,42,30,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
/* 노이즈 텍스처 — 디테일 */
.sticky-cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}
/* 라임 글로우 데코 */
.sticky-cta-inner::after {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(212,255,61,0.35) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    animation: float 9s ease-in-out infinite;
}
.sticky-cta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.sticky-cta-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--turbo);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sticky-cta-tag::before {
    content: "";
    width: 5px; height: 5px;
    background: var(--turbo);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--turbo);
    animation: kickerPulse 2s ease-in-out infinite;
}
.sticky-cta-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
}
.sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--turbo);
    color: var(--ink);
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.2px;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 16px rgba(212,255,61,0.4);
}
.sticky-cta-btn span {
    font-weight: 900;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212,255,61,0.55);
    filter: brightness(1.05);
}
.sticky-cta-btn:hover span { transform: translateX(4px); }
.sticky-cta-btn:active {
    transform: scale(0.97);
}

/* 닫기 버튼 (PC에서만 노출) */
.sticky-cta-close {
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
}
.sticky-cta:hover .sticky-cta-close { opacity: 1; }
.sticky-cta-close:hover { transform: scale(1.1); }

/* 모바일 — 풀와이드 알약 스타일 */
@media (max-width: 720px) {
    .sticky-cta {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
    .sticky-cta-inner {
        border-radius: 999px;
        padding: 8px 8px 8px 22px;
        gap: 12px;
    }
    .sticky-cta-inner::after {
        top: -20px; right: -20px;
        width: 100px; height: 100px;
    }
    .sticky-cta-price { font-size: 15px; }
    .sticky-cta-btn { padding: 12px 20px; font-size: 13px; }
    .sticky-cta-close { display: none; }
    .footer { padding-bottom: 100px; }
}

/* 작은 화면 - hover state 없을 때도 close 보이게 */
@media (hover: none) {
    .sticky-cta-close { opacity: 1; }
}

/* 사용자가 닫았을 때 영구 hidden */
.sticky-cta.is-dismissed { display: none !important; }

/* ============================================
   공지 띠 (상단 알림)
============================================ */
.topnote {
    background: var(--turbo);
    color: var(--ink);
    text-align: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ============================================
   HEADER
   데스크톱: sticky, 항상 보임
   모바일: 처음 보임 → 스크롤 다운 시 숨김 → 스크롤 업 시 재노출
============================================ */
.header {
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.header.is-scrolled {
    background: rgba(10, 31, 23, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom-color: rgba(255,255,255,0.04);
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: padding 0.3s;
}
.header.is-scrolled .header-inner {
    padding: 10px 24px;
}
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.header-logo img {
    height: 26px;
    width: auto;
}
.header-logo-tag {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.15);
}
.header-nav {
    list-style: none;
    display: flex;
    gap: 32px;
    flex: 1;
    justify-content: center;
}
.header-nav li {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding: 6px 0;
}
.header-nav li a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s;
}
.header-nav li a:hover { color: var(--turbo); }
.header-nav li.active a { color: var(--turbo); }
.header-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.header-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
}
.header-select {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
}
.header-cta {
    padding: 9px 22px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s;
}
.header-cta:hover { filter: brightness(0.95); }

/* ============================================
   1. HERO
============================================ */
/* ============================================
   1. HERO — 2슬라이드 캐러셀 + 좌(텍스트) 우(시각) 분할
============================================ */
.hero {
    position: relative;
    overflow: hidden;
}

/* 슬라이드 컨테이너 — 높이 고정으로 슬라이드 전환 시 점프 방지 */
.hero-slides {
    position: relative;
    min-height: 640px;
}

/* 각 슬라이드 — 절대 위치로 겹쳐서 페이드 전환 */
.hero-slide {
    position: absolute;
    inset: 0;
    padding: 80px 24px 100px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    animation: heroSlideFade 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes heroSlideFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 1: 라이트 그린 */
.hero-slide-1 {
    background: linear-gradient(180deg, var(--white) 0%, var(--chalk) 100%);
    color: var(--ink);
}
/* 슬라이드 2: 다크 */
.hero-slide-2 {
    background: var(--ink);
    color: var(--white);
}
/* 슬라이드 3: 라이트 (슬라이드 1과 비슷한 톤) */
.hero-slide-3 {
    background: linear-gradient(180deg, var(--chalk) 0%, var(--white) 100%);
    color: var(--ink);
}

/* 데코 도형 (슬라이드 1) */
.hero-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    z-index: 1;
}
.hero-deco-1 {
    top: -50px; left: 5%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(52,199,123,0.28) 0%, transparent 70%);
}
.hero-deco-2 {
    bottom: -100px; right: 5%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(212,255,61,0.32) 0%, transparent 70%);
}

/* 슬라이드 내부 그리드 — 좌(텍스트) + 우(시각) */
.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* 좌측 텍스트 영역 */
.hero-left {
    text-align: left;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(52,199,123,0.12);
    border: 1px solid rgba(52,199,123,0.28);
    color: var(--violet-deep);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 28px;
}
.hero-slide-2 .hero-eyebrow {
    background: rgba(212,255,61,0.12);
    border-color: rgba(212,255,61,0.4);
    color: var(--turbo);
}
.hero-eyebrow .ico,
.hero-eyebrow svg { color: currentColor; }

.hero-title {
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 800;
    letter-spacing: -2.8px;
    line-height: 120%;
    margin-bottom: 24px;
    color: inherit;
}
.hero-title .accent { color: var(--violet); }
.hero-slide-2 .hero-title .accent,
.hero-slide-2 .hero-title strong { color: var(--turbo); font-weight: 800; }

.hero-sub {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
    margin-bottom: 40px;
    color: var(--gray-700);
    letter-spacing: -0.2px;
    max-width: 460px;
}
.hero-slide-2 .hero-sub { color: rgba(255,255,255,0.72); }

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
    border: none;
    font-family: inherit;
}
.hero-cta.primary {
    background: var(--violet);
    color: var(--ink);
}
.hero-cta.primary:hover { filter: brightness(0.95); transform: translateX(2px); }
.hero-cta.outline {
    background: transparent;
    border: 1.5px solid var(--gray-200);
    color: var(--ink);
}
.hero-cta.outline:hover { border-color: var(--violet); color: var(--violet); }
.hero-slide-2 .hero-cta.outline {
    border-color: rgba(255,255,255,0.3);
    color: var(--white);
}
.hero-slide-2 .hero-cta.outline:hover { border-color: var(--turbo); color: var(--turbo); }

/* 슬라이드 2 통계 */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-stat-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1.2px;
    color: var(--turbo);
    margin-bottom: 4px;
    line-height: 1;
}
.hero-stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* ============================================
   우측 시각 영역
============================================ */
.hero-right {
    position: relative;
}

/* 슬라이드 1: 떠 있는 모의 카드 3개 */
.hero-mock {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(15,42,30,0.08);
    position: absolute;
    width: 270px;
}
.hero-mock-1 {
    top: 0; left: 30px;
    z-index: 3;
    animation: mockFloat 5s ease-in-out infinite;
}
.hero-mock-2 {
    top: 120px; right: 0;
    z-index: 2;
    animation: mockFloat 5.5s ease-in-out 0.4s infinite;
}
.hero-mock-3 {
    bottom: 10px; left: 200px;
    z-index: 1;
    animation: mockFloat 6s ease-in-out 0.8s infinite;
}
@keyframes mockFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-mock { animation: none; }
}

/* 과목별 컬러 변수 — 국어/영어/수학 통일 */
:root {
    --subj-kor: var(--violet); /* 국어 그린 */
    --subj-eng: #FF7272; /* 영어 코랄 */
    --subj-math: #04AAD5; /* 수학 블루 */
    --subj-kor-deep: var(--violet-deep);
    --subj-eng-deep: #E04F4F;
    --subj-math-deep: #0388A8;
}

.mock-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(50, 205, 139, 0.15);
    color: var(--subj-kor-deep);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}
.mock-tag.coral { background: rgba(255, 114, 114, 0.15); color: var(--subj-eng-deep); }
.mock-tag.blue  { background: rgba(4, 170, 213, 0.15); color: var(--subj-math-deep); }
.mock-tag .ico,
.mock-tag svg { width: 12px; height: 12px; }

.mock-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.6px;
    margin-bottom: 4px;
    line-height: 1.2;
}
.mock-sub {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 14px;
    line-height: 1.5;
}
.mock-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.mock-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    border-radius: 3px;
}
.mock-meta {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
}
.mock-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mock-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.mock-badge.correct {
    background: rgba(52,199,123,0.15);
    color: var(--violet-deep);
}
.mock-badge.point {
    background: var(--turbo);
    color: var(--ink);
}
.mock-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.mock-option {
    padding: 12px 0;
    background: var(--chalk);
    color: var(--ink);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}
.mock-option.is-correct {
    background: var(--violet);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(52,199,123,0.35);
}

/* 슬라이드 2: 큰 카드 3개 (grid) */
.hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.hero-bigcard {
    border-radius: 20px;
    padding: 28px 20px;
    aspect-ratio: 3/4.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s;
}
.hero-bigcard:hover { transform: translateY(-6px); }
.hero-bigcard-1 {
    background: linear-gradient(160deg, var(--subj-kor) 0%, var(--subj-kor-deep) 100%);
    color: var(--white);
}
.hero-bigcard-2 {
    background: linear-gradient(160deg, var(--subj-eng) 0%, var(--subj-eng-deep) 100%);
    color: var(--white);
}
.hero-bigcard-3 {
    background: linear-gradient(160deg, var(--subj-math) 0%, var(--subj-math-deep) 100%);
    color: var(--white);
}
.hero-bigcard-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.22);
    color: inherit;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
    letter-spacing: -0.2px;
}
.hero-bigcard-2 .hero-bigcard-tag { background: rgba(255,255,255,0.22); }
.hero-bigcard-icon {
    align-self: flex-end;
    color: rgba(255,255,255,0.55);
}
.hero-bigcard-2 .hero-bigcard-icon { color: rgba(255,255,255,0.55); }
.hero-bigcard-icon svg {
    width: 36px; height: 36px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-bigcard-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

/* ============================================
   슬라이드 3: 과목 커스텀 빌더 시각화
============================================ */
.custom-builder {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(15,42,30,0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* 상단 — 사용 가능한 과목 풀 */
.custom-pool-label,
.custom-mission-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-mission-count {
    color: var(--violet);
    font-weight: 800;
    background: var(--chalk);
    padding: 2px 10px;
    border-radius: 999px;
}
.custom-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.custom-chip {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px dashed var(--gray-200);
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-400);
    background: var(--white);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.custom-chip.is-on {
    border-style: solid;
    border-color: var(--violet);
    color: var(--violet-deep);
    background: rgba(52,199,123,0.08);
}
/* 과목별 chip 컬러 */
.custom-chip.is-on[data-subject="kor"] {
    border-color: var(--subj-kor);
    color: var(--subj-kor-deep);
    background: rgba(50, 205, 139, 0.1);
}
.custom-chip.is-on[data-subject="eng"] {
    border-color: var(--subj-eng);
    color: var(--subj-eng-deep);
    background: rgba(255, 114, 114, 0.1);
}
.custom-chip.is-on[data-subject="math"] {
    border-color: var(--subj-math);
    color: var(--subj-math-deep);
    background: rgba(4, 170, 213, 0.1);
}
/* coming soon 칩 — 라임 옐로우 톤 */
.custom-chip.is-soon {
    border-style: solid;
    border-color: rgba(212,255,61,0.5);
    color: var(--ink);
    background: rgba(212,255,61,0.18);
}
.custom-chip.is-soon em {
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
    color: var(--violet-deep);
    background: var(--turbo);
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

/* 화살표 (선택된 것이 미션으로 흘러감) */
.custom-arrow {
    display: flex;
    justify-content: center;
    color: var(--violet);
    opacity: 0.6;
    margin: -4px 0;
}
.custom-arrow .ico {
    animation: customFlow 2.4s ease-in-out infinite;
}
@keyframes customFlow {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .custom-arrow .ico { animation: none; }
}

/* 하단 — 오늘의 미션 슬롯 */
.custom-mission {
    background: var(--chalk);
    border-radius: 16px;
    padding: 18px 20px;
}
.custom-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    /* 슬롯이 추가/제거될 때 부드러운 레이아웃 변경 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-slot {
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: var(--white);
    letter-spacing: -0.3px;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top;
    overflow: hidden;
    max-height: 80px;
}
/* 슬롯이 사라지는 상태 (JS로 클래스 토글) */
.custom-slot.is-leaving {
    opacity: 0;
    transform: scale(0.85) translateY(-4px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
}
/* 모션 줄이기 설정 시 페이드만 */
@media (prefers-reduced-motion: reduce) {
    .custom-chip,
    .custom-slot,
    .custom-slots { transition: opacity 0.2s ease; }
    .custom-slot.is-leaving { transform: none; }
}

/* 과목별 색상 — 국어/영어/수학 통일 */
.custom-slot.kor  { background: linear-gradient(135deg, var(--subj-kor) 0%, var(--subj-kor-deep) 100%); }
.custom-slot.eng  { background: linear-gradient(135deg, var(--subj-eng) 0%, var(--subj-eng-deep) 100%); }
.custom-slot.math { background: linear-gradient(135deg, var(--subj-math) 0%, var(--subj-math-deep) 100%); }

/* ============================================
   슬라이더 컨트롤
============================================ */
.hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 24px 32px;
    background: inherit;
}
/* 슬라이드 활성에 따라 컨트롤 영역도 색상 통일 */
.hero[data-active="0"] .hero-controls { background: var(--chalk); }
.hero[data-active="1"] .hero-controls { background: var(--ink); }
.hero[data-active="2"] .hero-controls { background: var(--white); }

.hero-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}
.hero-arrow:hover {
    background: var(--violet);
    color: var(--ink);
    border-color: var(--violet);
}
.hero[data-active="1"] .hero-arrow {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: var(--white);
}
.hero[data-active="1"] .hero-arrow:hover {
    background: var(--turbo);
    border-color: var(--turbo);
    color: var(--ink);
}
.hero-arrow svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-dots {
    display: flex;
    gap: 8px;
}
.hero-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}
.hero-dot.active {
    width: 44px;
    background: var(--violet);
}
.hero[data-active="1"] .hero-dot { background: rgba(255,255,255,0.2); }
.hero[data-active="1"] .hero-dot.active { background: var(--turbo); }

/* 반응형 */
@media (max-width: 900px) {
    /* 모바일에서는 슬라이드를 자연 흐름으로 — active 슬라이드 크기에 컨테이너 자동 맞춤
       (데스크탑 absolute 페이드 전환 → 모바일은 display 토글로 단순화) */
    .hero-slides { min-height: 0; }
    .hero-slide {
        position: relative;
        inset: auto;
        padding: 60px 20px 60px;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: none;
    }
    .hero-slide.active {
        display: block;
        animation: heroSlideFade 0.4s ease;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-title { letter-spacing: -1px; }

    /* 슬라이드 1 모의 카드 — 모바일에서 자연스럽게 분리
       카드들이 살짝 겹치되, 각 카드의 핵심 정보(태그+타이틀)는 가려지지 않게
       좌-우-좌 지그재그 배치로 콜라주 느낌 유지 */
    .hero-slide-1 .hero-right { min-height: 480px; }
    .hero-mock {
        width: calc(100% - 50px);
        max-width: 290px;
        padding: 18px 20px;
    }
    .hero-mock-1 { top: 0; left: 0; }
    .hero-mock-2 { top: 160px; right: 0; left: auto; }
    .hero-mock-3 { top: 320px; bottom: auto; left: 20px; }
    /* 모바일에서는 mock 내부 폰트도 살짝 축소 */
    .hero-mock .mock-title { font-size: 20px; }
    .hero-mock .mock-sub { font-size: 13px; margin-bottom: 12px; }
    .hero-mock .mock-tag { font-size: 12px; margin-bottom: 10px; }
    .hero-mock .mock-meta { font-size: 13px; }
    .hero-mock .mock-option { padding: 10px 0; font-size: 15px; }

    .hero-stats { gap: 18px; flex-wrap: wrap; }
    .hero-stat-num { font-size: 26px; }

    /* 슬라이드 2 빅카드 — 모바일에서 세로 스택 (가로 레이아웃 카드)
       가로 스크롤 대신 세로로 쌓아 빈 공간 없이 정보를 풍부하게 노출 */
    .hero-cards {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 10px;
        overflow: visible;
        margin: 0;
        padding: 0;
        scroll-snap-type: none;
    }
    .hero-bigcard {
        flex: none;
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
        padding: 18px 20px;
        border-radius: 16px;
        /* 가로 레이아웃: 좌측 태그+타이틀, 우측 아이콘 */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    /* 좌측 텍스트 그룹을 묶기 위해 태그·타이틀에 직접 스타일 */
    .hero-bigcard-tag {
        font-size: 12px;
        padding: 4px 11px;
        order: 1;
        flex-shrink: 0;
    }
    .hero-bigcard-title {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: -0.4px;
        order: 2;
        flex: 1;
        margin: 0;
    }
    /* br을 공백으로 자연스럽게 처리 — "어휘 매일 7개" 한 줄 표시 */
    .hero-bigcard-title br {
        display: none;
    }
    .hero-bigcard-title::after {
        content: '';
    }
    .hero-bigcard-icon {
        order: 3;
        align-self: center;
        margin: 0;
        opacity: 0.55;
        flex-shrink: 0;
    }
    .hero-bigcard-icon svg { width: 28px; height: 28px; }

    /* 슬라이드 3 커스텀 빌더 — 모바일 보정 */
    .custom-builder { padding: 22px 18px 18px; gap: 16px; }
    .custom-chip { font-size: 13px; padding: 7px 12px; }
    .custom-mission { padding: 14px 14px; }
    /* 모바일에서는 2열로 — 폰트 14px 한 줄 가독성 유지 */
    .custom-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .custom-slot {
        font-size: 14px;
        padding: 11px 8px;
        letter-spacing: -0.3px;
    }
}
@media (max-width: 480px) {
    /* 매우 좁은 화면 — 모의카드 더 작게, 살짝 겹치되 핵심 영역 보장
       hero-slides는 자연 흐름이라 min-height 필요 없음 */
    .hero-slide-1 .hero-right { min-height: 460px; }
    .hero-mock {
        width: calc(100% - 40px);
        max-width: 270px;
        padding: 16px 18px;
    }
    .hero-mock-1 { top: 0; left: 0; }
    .hero-mock-2 { top: 150px; right: 0; left: auto; }
    .hero-mock-3 { top: 300px; bottom: auto; left: 20px; }

    /* 텍스트가 좁은 화면에서 깨지지 않도록 단어 단위 줄바꿈 강제 */
    body { word-break: keep-all; overflow-wrap: break-word; }
    .hero-title,
    .sec-title,
    .results-headline,
    .results-positioning-line,
    .concept-title,
    .cta-block-title,
    .solo-cta-title,
    .quote-body,
    .hero-sub,
    .sec-sub,
    .prod-name,
    .prod-desc,
    .benefit-title,
    .benefit-desc,
    .srv-card-title,
    .srv-card-list li {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* 가로 스크롤 방지 — clip을 써야 sticky가 정상 작동 (hidden은 sticky 깨트림) */
    html, body { overflow-x: clip; max-width: 100vw; }
    .wrap { padding: 0 16px; }

    /* hero 핵심 타이포 — clamp으로 자연 축소 */
    .hero-title { font-size: clamp(22px, 7vw, 30px); letter-spacing: -0.6px; line-height: 1.2; }
    .hero-sub { font-size: 14px; line-height: 1.6; }
    .hero-eyebrow { font-size: 12px; padding: 6px 12px; margin-bottom: 20px; }
    .hero-cta { padding: 12px 20px; font-size: 13px; }

    /* hero stats — 좁은 화면에서 줄바꿈 */
    .hero-stats { gap: 14px; }
    .hero-stat-num { font-size: 22px; }
    .hero-stat-label { font-size: 12px; }

    /* results — 핵심 수치 강조 유지하면서 축소 */
    .results-headline { font-size: clamp(28px, 9vw, 36px); letter-spacing: -1px; }
    .results-figure { font-size: clamp(56px, 18vw, 72px); letter-spacing: -2px; }
    .results-stats { gap: 20px; }
    .results-stat-num { font-size: 22px; }
    .results-stat-label { font-size: 12px; }
    .results-positioning-line { font-size: clamp(18px, 5.6vw, 22px); line-height: 1.5; }
    .results-positioning-sub { font-size: 13px; }

    /* 후기 카드 */
    .results-quote { padding: 24px 20px; }
    .results-quote::before { font-size: 100px; top: -16px; right: 12px; }
    .quote-body { font-size: 14px; line-height: 1.65; }
    .quote-name { font-size: 13px; }
    .quote-org { font-size: 12px; }

    /* 섹션 헤더 */
    .sec-head { margin-bottom: 44px; }
    .sec-title { font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -1.2px; line-height: 110%; }
    .sec-sub { font-size: 14px; line-height: 1.65; }
    .sec-kicker { font-size: 11px; letter-spacing: 1.8px; padding: 6px 12px 6px 10px; margin-bottom: 18px; }

    /* concept */
    .concept-band { padding: 48px 20px; }
    .concept-title { font-size: clamp(17px, 5.2vw, 20px); line-height: 1.55; }

    /* problem 카드 */
    .problem-card { padding: 22px 18px; }
    .problem-text { font-size: 14px; line-height: 1.5; }

    /* product 카드 */
    .prod-card { min-height: 380px; }
    .prod-stage { min-height: 220px; margin: 0; }
    .prod-body { padding: 20px 22px 24px; }
    .prod-body .prod-name { font-size: 22px; }
    .prod-desc { font-size: 13px; }

    /* benefits 카드 */
    .benefit-card { padding: 18px 14px; }
    .benefit-title { font-size: 15px; }
    .benefit-desc { font-size: 12px; line-height: 1.55; }

    /* sol-card */
    .sol-card { padding: 24px 20px; }
    .sol-card-title { font-size: 18px; }
    .sol-card-list li { font-size: 13px; }

    /* CTA */
    .cta-block { padding: 40px 28px; min-height: auto; border-radius: 24px; }
    .cta-block-title { font-size: 26px; line-height: 1.2; letter-spacing: -1px; }
    .cta-block-desc { font-size: 14px; }
    .cta-block-btn { font-size: 14px; padding: 14px 22px; margin-top: 28px; }
    .solo-cta { padding: 48px 28px; border-radius: 24px; }
    .solo-cta-title { font-size: 28px; letter-spacing: -1.2px; }
    .solo-cta-desc { font-size: 14px; }
    .solo-cta-btn { font-size: 14px; padding: 14px 28px; }

    /* faq */
    .faq-q { font-size: 13px; padding: 16px 18px; }
    .faq-a { padding: 0 18px 18px; font-size: 13px; line-height: 1.65; }

    /* pricing */
    .plan { padding: 36px 24px; }
    .plan-capacity-num { font-size: 48px; }
    .plan-name { font-size: 13px; letter-spacing: 2px; }
    .plan-price-hero-num { font-size: clamp(52px, 14vw, 64px); letter-spacing: -3px; }
    .plan-price-hero-unit { font-size: 16px; }
    .plan-price-original-num { font-size: 16px; }
    .plan-features li { font-size: 13.5px; padding: 9px 0 9px 26px; }
    .plan-btn { padding: 16px 22px; font-size: 14px; }
    .pricing-footnote { font-size: 12.5px; padding: 12px 20px; }

    /* v2 임팩트 텍스트 — 너비 초과 방지 */
    .v2-impact-line { font-size: clamp(48px, 18vw, 90px); letter-spacing: -1.5px; }

    /* 슬라이드 3 빌더 — 슬롯 가독성 보장 */
    .custom-slot { font-size: 12px; padding: 9px 6px; }
    .custom-pool-label, .custom-mission-label { font-size: 11px; }
}

/* iPhone Mini (375px) — 한 단계 더 보정 */
@media (max-width: 380px) {
    .wrap { padding: 0 14px; }

    .hero-slide { padding: 48px 16px 48px; }
    .hero-title { font-size: clamp(20px, 6.6vw, 26px); }
    .hero-sub { font-size: 13px; }

    .results { padding: 48px 0; }
    .results-headline { font-size: clamp(24px, 8.5vw, 30px); }
    .results-figure { font-size: clamp(48px, 16vw, 60px); }
    .results-stats { gap: 14px; }
    .results-stat-num { font-size: 19px; }
    .results-stat-label { font-size: 11px; }
    .results-quote { padding: 20px 16px; }
    .quote-body { font-size: 13px; }

    .section { padding: 48px 0; }
    .sec-title { font-size: clamp(24px, 6.5vw, 32px); letter-spacing: -1px; }
    .concept-title { font-size: clamp(15px, 4.8vw, 18px); }

    .prod-stage { min-height: 180px; margin: 0; }
    .prod-body { padding: 18px 18px 22px; }
    .prod-body .prod-name { font-size: 20px; }
    .prod-desc { font-size: 12px; }

    .v2-impact-line { font-size: clamp(40px, 16vw, 72px); letter-spacing: -1px; }

    .custom-slots { grid-template-columns: 1fr; }
    .custom-slot { font-size: 13px; padding: 10px 8px; }
}

/* 320px (iPhone SE 1세대 / 초소형) — 최후 안전장치 */
@media (max-width: 360px) {
    .wrap { padding: 0 12px; }

    .hero-title { font-size: clamp(18px, 6vw, 22px); letter-spacing: -0.4px; }
    .hero-cta { padding: 10px 16px; font-size: 12px; }
    .hero-eyebrow { font-size: 11px; padding: 5px 10px; }

    .results-headline { font-size: clamp(20px, 7.5vw, 26px); }
    .results-figure { font-size: clamp(40px, 14vw, 52px); }
    .results-stats { flex-direction: column; gap: 12px; align-items: flex-start; }

    .sec-title { font-size: clamp(22px, 6.5vw, 28px); }
    .concept-title { font-size: clamp(14px, 4.5vw, 16px); }

    .v2-impact-line { font-size: clamp(34px, 14vw, 60px); }
}

/* ============================================
   섹션 공통 (디자인 시스템)
============================================ */
.section {
    padding: 100px 0;
    background: var(--white);
}
.section--alt-bg {
    background: var(--chalk);
}
.section.alt {
    background: var(--chalk);
}

/* 통일 섹션 헤더 */
.sec-head {
    margin-bottom: 72px;
    max-width: 820px;
}
.sec-head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.sec-kicker {
    font-size: 12px;
    font-weight: 800;
    color: var(--violet-deep);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    background: rgba(52,199,123,0.08);
    border: 1px solid rgba(52,199,123,0.18);
    border-radius: 999px;
}
.sec-kicker .dot {
    width: 6px; height: 6px;
    background: var(--violet);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52,199,123,0.15), 0 0 16px var(--violet);
    flex-shrink: 0;
    animation: kickerPulse 2.4s ease-in-out infinite;
}
@keyframes kickerPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52,199,123,0.15), 0 0 16px var(--violet); }
    50%      { box-shadow: 0 0 0 6px rgba(52,199,123,0.05), 0 0 24px var(--violet); }
}
.sec-title {
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 120%;
    color: var(--ink);
    margin-bottom: 22px;
}
.sec-title .accent {
    color: var(--violet);
    position: relative;
    display: inline-block;
}
/* 단어 강조 라인 효과 — 스크롤 인뷰 시 좌→우로 그어짐 */
.sec-title .accent::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 4px;
    background: linear-gradient(90deg, var(--turbo) 0%, var(--violet-light) 100%);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.sec-head.is-visible .sec-title .accent::after,
.reveal.is-visible .sec-title .accent::after {
    transform: scaleX(1);
}
.sec-sub {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray-600);
    font-weight: 500;
    letter-spacing: -0.3px;
    max-width: 640px;
}
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

/* ============================================
   2.1 PROBLEM — 문제 공감
============================================ */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 56px;
}
.problem-card {
    background: var(--white);
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid rgba(52,199,123,0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    position: relative;
    overflow: hidden;
}
.problem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(52,199,123,0.07) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.problem-card:hover {
    transform: translateY(-6px);
    border-color: rgba(52,199,123,0.25);
    box-shadow: 0 20px 40px rgba(52,199,123,0.1);
}
.problem-card:hover::before { opacity: 1; }
.problem-icon {
    font-size: 36px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.problem-card:hover .problem-icon { transform: scale(1.15) rotate(-3deg); }
.problem-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.3px;
    color: var(--ink);
}
.problem-insight {
    text-align: center;
    padding: 40px 24px;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(52,199,123,0.12);
}
.problem-insight-line {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 4px;
}
.problem-insight-line.problem-insight-strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.8px;
    margin-top: 8px;
    margin-bottom: 0;
}
.problem-insight .accent {
    color: var(--violet);
}
.problem-insight .strike {
    text-decoration: line-through;
    text-decoration-color: var(--violet-light);
    text-decoration-thickness: 2px;
    color: var(--gray-400);
}

/* ============================================
   2.2 CONCEPT — 핵심 컨셉
============================================ */
.concept-band {
    background: var(--chalk);
    color: var(--ink);
    padding: 100px 24px;
    /* text-align: center; */
    position: relative;
    overflow: hidden;
}
.concept-band::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(52,199,123,0.18) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}
.concept-kicker {
    font-size: 12px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 2px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}
.concept-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.8px;
    color: var(--ink);
    max-width: 900px;
    position: relative;
    z-index: 2;
}
.concept-brand {
    color: var(--violet);
    font-weight: 800;
}
.concept-em {
    color: var(--violet-deep);
    font-weight: 800;
}

/* ============================================
   2.5 PRODUCT DETAIL
============================================ */
.product-detail {
    background: var(--white);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.prod-card {
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}
.prod-card--home {
    background: var(--chalk);
    color: var(--ink);
    padding: 0;                      /* 이미지가 카드 끝까지 확장 */
    gap: 0;                          /* 스테이지와 본문이 페이드로 연결 */
    overflow: hidden;
}
.prod-card--study {
    background: linear-gradient(160deg, var(--turbo) 0%, var(--turbo) 100%);
    color: var(--ink);
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.prod-card--brick {
    background: linear-gradient(160deg, var(--violet-deep) 0%, var(--ink) 100%);
    color: var(--white);
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.prod-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--violet);
}
.prod-card--study .prod-label { color: var(--violet-deep); }
.prod-card--brick .prod-label { color: var(--violet-light); }

.prod-name {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
}
.prod-name-sub {
    color: var(--violet);
    font-weight: 800;
}
.prod-card--study .prod-name-sub { color: var(--violet-deep); }
.prod-card--brick .prod-name-sub { color: var(--violet-light); }

.prod-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600);
    font-weight: 500;
    margin-top: auto;
}
.prod-card--brick .prod-desc { color: rgba(255,255,255,0.7); }

/* ── 3카드 공통: 시각 영역(stage) ── */
/* 이미지가 카드 가장자리까지 꽉 차게 fill — margin/border-radius 제거 */
.prod-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: rgba(255,255,255,0.4);
    overflow: hidden;
    isolation: isolate;
}
/* 카드별 stage 톤 미세 조정 (placeholder 단계용, 이미지 들어가면 가려짐) */
.prod-card--home .prod-stage {
    background: rgba(255,255,255,0.55);
}
.prod-card--study .prod-stage {
    background: rgba(255,255,255,0.4);
}
.prod-card--brick .prod-stage {
    background: rgba(255,255,255,0.04);
}
/* 이미지/영상/SVG/picture 어떤 형태로든 stage를 100% 채우게 fill —
 absolute + inset:0 으로 stage 좌표계에 정확히 채움, object-fit: cover로 비율 유지하며 잘라냄 */
.prod-stage > img,
.prod-stage > video,
.prod-stage > svg,
.prod-stage > picture,
.prod-stage > picture > img,
.prod-stage > a,
.prod-stage > a > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* 이미지가 들어가면 placeholder 라벨 자동 숨김 — HTML 그대로 두어도 됨 */
.prod-stage:has(> img, > picture, > video, > svg, > a) .prod-stage-label {
    display: none;
}

/* placeholder 안내 라벨 — 이미지 없을 때만 노출 */
.prod-stage-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed rgba(15,42,30,0.2);
    backdrop-filter: blur(4px);
}
.prod-card--brick .prod-stage-label {
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.prod-stage-label::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: 0.6;
}

/* ── 3카드 공통: 본문 영역 ── */
.prod-body {
    padding: 24px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
}
.prod-card--home .prod-body { background: var(--chalk); }
.prod-card--study .prod-body { background: var(--turbo); }
.prod-card--brick .prod-body { background: var(--ink); }
.prod-body .prod-name { font-size: 28px; }
.prod-body .prod-desc { margin-top: 6px; }

/* ============================================
   3. SERVICES — 가로 캐러셀 (카테고리 6장)
============================================ */
.services-carousel {
    position: relative;
    margin-top: 32px;
}

/* 트랙: 가로 스크롤 + 스크롤 스냅 */
.services-track {
    display: flex;
    gap: 20px;
    padding: 8px 24px 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.services-track::-webkit-scrollbar { display: none; }

/* 데스크톱: 한 화면에 카드 ~2.5장, 활성 카드는 가운데 */
@media (min-width: 1025px) {
    .services-track {
        /* 좌우 패딩을 카드 약 1장 폭으로 — 첫 카드도 가운데 정렬 가능 */
        padding: 8px calc((100vw - 460px) / 2) 32px;
        gap: 24px;
    }
}

/* 카드 */
.srv-card {
    flex: 0 0 calc((100vw - 48px - 20px) / 2.4);
    max-width: 460px;
    min-height: 360px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    opacity 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: grab;
}
.srv-card:active { cursor: grabbing; }

/* 데스크톱 카드 사이즈 */
@media (min-width: 1025px) {
    .srv-card {
        flex: 0 0 460px;
        min-height: 380px;
    }
}

/* 활성(가운데) 카드 — 살짝 들어올림 */
.srv-card.is-active {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 42, 30, 0.08);
    border-color: rgba(52, 199, 123, 0.25);
}

/* 카드 헤드 — 아이콘 + 카테고리명 */
.srv-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.srv-card-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(52, 199, 123, 0.1);
    display: grid;
    place-items: center;
    color: var(--violet);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}
.srv-card-icon .ico {
    width: 24px; height: 24px;
    stroke-width: 1.75;
}
.srv-card.is-active .srv-card-icon {
    background: var(--violet);
    color: var(--white);
    transform: rotate(-4deg);
}
.srv-card-cat {
    font-size: 13px;
    font-weight: 800;
    color: var(--gray-600);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.srv-card.is-active .srv-card-cat {
    color: var(--violet-deep);
}

/* 카드 헤드라인 */
.srv-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.7px;
    line-height: 1.3;
    margin: 0;
}

/* 카드 리스트 */
.srv-card-list {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--gray-200);
    padding-top: 22px;
}
.srv-card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--gray-700);
    font-weight: 600;
    letter-spacing: -0.2px;
}
.srv-card-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.6;
}
.srv-card-list li span { flex: 1; }

/* 태그 (NEW / HOT / CORE / BETA) */
.srv-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    background: var(--violet);
    color: var(--white);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    line-height: 1.4;
    text-transform: uppercase;
    font-style: normal;
}
.srv-tag--beta {
    background: var(--turbo);
    color: var(--ink);
}

/* 컨트롤 (좌측 화살표 + 도트 + 우측 화살표) */
.services-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 24px;
}
.srv-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 42, 30, 0.06);
}
.srv-arrow:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(52, 199, 123, 0.25);
}
.srv-arrow:active {
    transform: scale(0.96);
}
.srv-arrow .ico {
    width: 20px; height: 20px;
    stroke-width: 2;
}

.srv-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.srv-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
    overflow: hidden;
    position: relative;
}
.srv-dot:hover { background: var(--gray-400); }
.srv-dot.is-active {
    width: 40px;
    background: var(--gray-200);
}
.srv-dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet);
    transform-origin: left center;
    animation: srvDotProgress 5s linear forwards;
}
.services-carousel.is-paused .srv-dot.is-active::after {
    animation-play-state: paused;
}
@keyframes srvDotProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
    .services-track { scroll-behavior: auto; }
    .srv-card,
    .srv-card-icon { transition: none; }
    .srv-card.is-active { transform: none; }
    .srv-dot.is-active::after { animation: none; opacity: 0; }
}

/* 태블릿 */
@media (max-width: 1024px) {
    .services-track {
        /* 카드 1장 폭을 기준으로 좌우 대칭 패딩 */
        padding: 8px calc((100vw - ((100vw - 68px) / 1.6)) / 2) 32px;
    }
    .srv-card {
        flex: 0 0 calc((100vw - 48px - 20px) / 1.6);
        min-height: 340px;
        padding: 32px 28px 28px;
    }
    .srv-card-title { font-size: 22px; }
}

/* 모바일 — 한 카드 거의 풀폭 + 다음 카드 살짝 엿보기 */
@media (max-width: 480px) {
    .services-carousel { margin-top: 24px; }
    .services-track {
        gap: 14px;
        /* 모바일은 카드가 거의 풀폭 → 24px 좌우 패딩 (다음 카드 엿보기) */
        padding: 8px 24px 24px;
    }
    .srv-card {
        flex: 0 0 calc(100vw - 48px);
        min-height: 320px;
        padding: 28px 24px 24px;
        border-radius: 20px;
    }
    .srv-card-title { font-size: 20px; line-height: 1.35; }
    .srv-card-list { padding-top: 18px; gap: 10px; }
    .srv-card-list li { font-size: 13px; }
    .srv-card-icon { width: 42px; height: 42px; }
    .srv-card-icon .ico { width: 22px; height: 22px; }
    .srv-card-cat { font-size: 12px; }
    .services-controls { gap: 12px; padding: 0 16px; }
    .srv-arrow { width: 38px; height: 38px; }
    .srv-arrow .ico { width: 16px; height: 16px; }
}

/* iPhone Mini ~ 380px */
@media (max-width: 380px) {
    .srv-card { padding: 24px 20px 22px; min-height: 300px; }
    .srv-card-title { font-size: 18px; }
}


/* ============================================
   4. SOLUTIONS / 운영 구조 4단계
============================================ */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.sol-grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sol-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.2s;
}
.sol-card:hover {
    border-color: var(--violet);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(52,199,123,0.15);
}
.sol-step {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.sol-illust {
    aspect-ratio: 16/12;
    border-radius: 12px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    font-size: 60px;
    position: relative;
    overflow: hidden;
}
.sol-illust.i1 { background: linear-gradient(135deg, var(--violet-light) 0%, var(--chalk) 100%); }
.sol-illust.i2 { background: linear-gradient(135deg, var(--ink) 0%, var(--violet-deep) 100%); }
.sol-illust.i3 { background: linear-gradient(135deg, var(--chalk) 0%, var(--violet-light) 100%); }
.sol-illust.i4 { background: linear-gradient(135deg, var(--ink) 0%, var(--violet-deep) 100%); }
.sol-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sol-card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    background: var(--turbo);
    color: var(--ink);
    padding: 1px 7px;
    border-radius: 99px;
    letter-spacing: 0.2px;
    line-height: 1.4;
}
.sol-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sol-card-list li {
    font-size: 14px;
    line-height: 1.6;
    padding: 5px 0 0 16px;
    position: relative;
    color: var(--gray-700);
    font-weight: 500;
}
.sol-card-list li::before {
    content: '·';
    position: absolute;
    left: 4px; top: 5px;
    color: var(--violet);
    font-weight: 800;
}

/* ============================================
   5. SOLO CTA
============================================ */
.solo-cta {
    margin-top: 72px;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
    border-radius: 32px;
    padding: 72px 56px;
    color: var(--white);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.solo-cta::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--turbo) 0%, transparent 70%);
    opacity: 0.3;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    animation: float 9s ease-in-out infinite;
}
.solo-cta::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(125,221,168,0.45) 0%, transparent 70%);
    opacity: 0.6;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    animation: float 11s ease-in-out infinite reverse;
}
.solo-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    background: var(--turbo);
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(212,255,61,0.4);
}
.solo-cta-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.12;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.solo-cta-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.solo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: var(--white);
    color: var(--ink);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    letter-spacing: -0.2px;
}
.solo-cta-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.solo-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.solo-cta-btn:hover::after { transform: translateX(6px); }

/* ============================================
   5.5 RESULTS
============================================ */
.results {
    background: var(--chalk);
    color: var(--ink);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.results::before {
    content: '';
    position: absolute;
    top: 50%; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212,255,61,0.25) 0%, transparent 60%);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    filter: blur(40px);
}
.results-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.results-kicker {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 32px;
}
.results-headline {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.12;
    margin-bottom: 28px;
    color: var(--ink);
}
.results-headline strong {
    color: var(--violet);
    font-weight: 800;
    position: relative;
    display: inline-block;
}
.results-headline strong::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 8px;
    background: var(--turbo);
    z-index: -1;
    opacity: 0.55;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.results-main.is-visible .results-headline strong::after,
.results .reveal.is-visible .results-headline strong::after {
    transform: scaleX(1);
}
.results-figure-wrap {
    display: block;
    margin: 12px 0 4px;
    line-height: 1;
}
.results-figure {
    color: var(--violet);
    font-size: clamp(96px, 11vw, 144px);
    display: inline-block;
    line-height: 0.9;
    letter-spacing: -6px;
    font-variant-numeric: tabular-nums;
    /* background: linear-gradient(180deg, var(--ink) 0%, var(--violet-deep) 60%, var(--violet) 100%); */
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    /* 카운트업 진입 시 살짝 scale + opacity */
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-figure.is-counting {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.results-headline-tail {
    display: block;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--ink);
    letter-spacing: -1.5px;
    margin-top: 8px;
}
/* 카운트 완료 시 살짝 펑 튀는 액센트 */
@keyframes figurePop {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-2px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}
.results-figure.is-popped {
    animation: figurePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* results-stat 숫자도 count-up */
.results-stat-num {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-stat-num.is-counting {
    opacity: 1;
    transform: translateY(0);
}
.results-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-700);
    font-weight: 500;
    margin-bottom: 48px;
}
.results-desc strong {
    color: var(--violet-deep);
    font-weight: 800;
}
.results-stats {
    display: flex;
    gap: 56px;
}
.results-main {}
.results-stat {}
.results-stat-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 6px;
}
.results-stat-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================
   CERTIFICATION (공식 인증 — 마케팅 섹션)
============================================ */
.section--certify { background: var(--chalk); }
.certify-scope {
    display: block; text-align: center; margin: 0 0 44px;
}
.certify-scope span {
    display: inline-block; background: var(--white); color: var(--ink);
    font-size: 17px; font-weight: 700; line-height: 1.5;
    padding: 12px 26px; border-radius: 999px; word-break: keep-all;
    box-shadow: 0 6px 20px rgba(10,31,23,0.05);
}
.certify-scope b { color: var(--violet); font-weight: 700; }
.certify-grid {
    display: flex; gap: 32px; justify-content: center; align-items: flex-start; flex-wrap: wrap;
}
.certify-doc {
    display: block; width: 100%; max-width: 300px;
    border: 1px solid rgba(10,31,23,0.08); border-radius: 10px; overflow: hidden;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(10,31,23,0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.certify-doc:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(10,31,23,0.16); }
.certify-doc img { display: block; width: 100%; height: auto; }

@media (max-width: 720px) {
    .certify-scope { margin-bottom: 32px; }
    .certify-scope span { font-size: 14px; padding: 11px 20px; }
    .certify-grid { gap: 20px; }
    .certify-doc { max-width: 280px; }
}
@media (max-width: 400px) {
    .certify-doc { max-width: 240px; }
}

/* 우측 인용 카드 (캐러셀) — 라이트 톤 */
.results-quote {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 42, 30, 0.04);
    overflow: hidden;
}
/* 큰 인용부호 데코 — 슬라이드 전환마다 반짝 */
.results-quote::before {
    content: '"';
    position: absolute;
    top: -24px;
    right: 16px;
    font-size: 140px;
    line-height: 1;
    font-family: 'Archivo', serif;
    color: var(--violet);
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}
.results-quote.is-stamped::before {
    opacity: 0.12;
    transform: scale(1) rotate(0deg);
}

.quote-stage {
    position: relative;
    min-height: 220px;
    z-index: 2;
}
.quote-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(40px) scale(0.94);
    filter: blur(6px);
    transition:
            opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.5s ease;
    pointer-events: none;
}
.quote-slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
    position: relative;
}
/* 진입 시 본문이 살짝 위에서 떨어져 들어옴 */
.quote-slide.is-active .quote-body {
    animation: quoteBodyIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.quote-slide.is-active .quote-author {
    animation: quoteAuthorIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes quoteBodyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes quoteAuthorIn {
    from {
        opacity: 0;
        transform: translateY(8px) translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}
/* 활성 슬라이드 아바타 — 부드럽게 펄스 */
.quote-slide.is-active .quote-avatar {
    animation: avatarPulse 2.6s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,199,123,0.35); }
    50%      { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(52,199,123,0); }
}
/* 강조 마커 — 활성화 시 좌→우로 채워지는 형광펜 */
.quote-slide.is-active .quote-mark {
    background: linear-gradient(180deg, transparent 60%, rgba(212,255,61,0.6) 60%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    animation: markFill 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
@keyframes markFill {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
}
.quote-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 28px;
}
.quote-mark {
    background: linear-gradient(180deg, transparent 60%, rgba(212,255,61,0.6) 60%);
    padding: 0 2px;
}
.quote-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.quote-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* 아바타별 다양한 그라데이션 (그린 팔레트로 재구성) */
.quote-avatar--1 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--turbo) 85%); }
.quote-avatar--2 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--violet) 85%); }
.quote-avatar--3 { background: radial-gradient(circle at 30% 30%, var(--turbo), var(--violet-deep) 85%); }
.quote-avatar--4 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--violet-light) 85%); }
.quote-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 2px;
}
.quote-org {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

/* 도트 인디케이터 — 라이트 톤 */
.quote-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.quote-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
    overflow: hidden;
    position: relative;
}
.quote-dot:hover { background: var(--gray-400); }
.quote-dot.is-active {
    width: 40px;
    background: var(--gray-200);
}
.quote-dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet);
    transform-origin: left center;
    animation: quoteProgress 6s linear forwards;
}
@keyframes quoteProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.results-quote:hover .quote-dot.is-active::after {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .quote-slide { transition: opacity 0.2s; transform: none; filter: none; }
    .quote-slide.is-active { transform: none; filter: none; }
    .quote-slide.is-active .quote-body,
    .quote-slide.is-active .quote-author,
    .quote-slide.is-active .quote-avatar,
    .quote-slide.is-active .quote-mark {
        animation: none;
    }
    .quote-dot.is-active::after { animation: none; opacity: 0; }
    .results-quote::before { transition: none; }
    .results-figure { opacity: 1; transform: none; transition: none; }
    .results-figure.is-popped { animation: none; }
    .results-stat-num { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   5.3 BENEFITS
============================================ */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.benefit-card {
    background: var(--white);
    border-radius: 22px;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid rgba(52,199,123,0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    position: relative;
    overflow: hidden;
}
.benefit-card::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 3px;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(52,199,123,0.18);
    border-color: rgba(52,199,123,0.3);
}
.benefit-card:hover::before { transform: scaleX(1); }
.benefit-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 28px;
    margin: 0 auto 22px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s;
}
.benefit-card:hover .benefit-icon {
    transform: scale(1.1) rotate(-5deg);
}
.benefit-icon--violet      { background: var(--violet); box-shadow: 0 12px 28px rgba(52,199,123,0.3); }
.benefit-icon--ink         { background: var(--ink); box-shadow: 0 12px 28px rgba(15,42,30,0.25); }
.benefit-icon--turbo       { background: var(--turbo); box-shadow: 0 12px 28px rgba(212,255,61,0.4); }
.benefit-icon--violet-light{ background: var(--violet-light); box-shadow: 0 12px 28px rgba(125,221,168,0.4); }
.benefit-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}
.benefit-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--gray-600);
    font-weight: 500;
}

/* ============================================
   RESULTS 내부 포지셔닝 헤더
============================================ */
.results-positioning {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}
.results-mark {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--violet);
    margin: 0 auto 24px;
    border-radius: 2px;
}
.results-positioning-line {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -1px;
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto 16px;
}
.results-positioning-brand {
    color: var(--violet);
    font-weight: 800;
}
.results-positioning-em {
    color: var(--violet);
    font-weight: 800;
    background: linear-gradient(180deg, transparent 60%, rgba(135, 255, 199, 0.4) 60%);
    padding: 0 4px;
}
.results-positioning-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* ============================================
   5.7 PRICING — 2026 강화판
============================================ */
.pricing-section {
    background: var(--chalk);
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
}
/* 백그라운드 데코 — 흐릿한 그린 글로우 */
.pricing-section::before {
    content: "";
    position: absolute;
    top: 10%; left: -10%;
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(52,199,123,0.18) 0%, transparent 65%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.pricing-section::after {
    content: "";
    position: absolute;
    bottom: -10%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,255,61,0.22) 0%, transparent 65%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.pricing-section .wrap { position: relative; z-index: 2; }

/* 페럴랙스 작은 데코 마크 */
.pricing-deco-1, .pricing-deco-2 {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.pricing-deco-1 {
    top: 18%; right: 8%;
    width: 80px; height: 80px;
    background: var(--turbo);
    border-radius: 28px;
    opacity: 0.4;
    box-shadow: 0 20px 40px rgba(212,255,61,0.3);
    transform: rotate(15deg);
}
.pricing-deco-2 {
    bottom: 22%; left: 6%;
    width: 64px; height: 64px;
    background: var(--violet);
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 16px 32px rgba(52,199,123,0.4);
}
@media (max-width: 900px) {
    .pricing-deco-1 { width: 50px; height: 50px; top: 10%; right: 4%; }
    .pricing-deco-2 { width: 40px; height: 40px; bottom: 12%; left: 4%; }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}
.pricing-grid--2 {
    grid-template-columns: 1fr 1.05fr;
    max-width: 960px;
    gap: 28px;
    align-items: stretch;
}
.plan {
    background: var(--white);
    border: 1px solid rgba(15,42,30,0.06);
    border-radius: 28px;
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,42,30,0.04);
}
/* 카드 호버 시 — 미묘하게 떠오르고 보더 그린 액센트 */
.plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 64px rgba(52,199,123,0.18);
    border-color: rgba(52,199,123,0.4);
}
/* 카드 우상단 데코 — 호버 시 부드럽게 회전 */
.plan::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(52,199,123,0.12) 0%, transparent 70%);
    border-radius: 50%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.plan:hover::before {
    transform: scale(1.3) translate(-20px, 20px);
}

.plan--featured {
    background:
            radial-gradient(ellipse at top right, rgba(52,199,123,0.18) 0%, transparent 50%),
            var(--ink);
    color: var(--white);
    border-color: var(--ink);
    box-shadow: 0 24px 56px rgba(15,42,30,0.32);
}
.plan--featured::before {
    background: radial-gradient(circle, rgba(212,255,61,0.18) 0%, transparent 70%);
}
.plan--featured:hover {
    box-shadow: 0 36px 72px rgba(15,42,30,0.45), 0 0 0 1px rgba(212,255,61,0.3);
    border-color: rgba(212,255,61,0.25);
}

/* featured 카드에 미묘한 노이즈 텍스처 — SVG 인라인 */
.plan--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.plan-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--turbo);
    color: var(--ink);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.4;
    z-index: 3;
    box-shadow: 0 6px 20px rgba(212,255,61,0.5), 0 0 0 4px rgba(212,255,61,0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.plan-badge .ico {
    width: 12px; height: 12px;
}
.plan-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.plan-name::before {
    content: "";
    width: 22px; height: 1.5px;
    background: var(--violet);
    display: inline-block;
}
.plan--featured .plan-name { color: var(--turbo); }
.plan--featured .plan-name::before { background: var(--turbo); }

.plan-capacity {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}
.plan-capacity-num {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -4px;
    line-height: 1;
    color: var(--ink);
}
.plan--featured .plan-capacity-num { color: var(--white); }
.plan-capacity-unit {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1px;
}
.plan--featured .plan-capacity-unit { color: var(--white); }
.plan-capacity-desc {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 28px;
}
.plan--featured .plan-capacity-desc { color: rgba(255,255,255,0.55); }

/* === 가격 강조 (정가 → 프로모션가) === */
.plan-price-original {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.plan-price-original-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--gray-400);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.plan--featured .plan-price-original-label { color: rgba(255,255,255,0.45); }
.plan-price-original-num {
    font-size: 20px;
    font-weight: 500;
    color: var(--gray-400);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
}
.plan--featured .plan-price-original-num { color: rgba(255,255,255,0.45); }
.plan-price-promo-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--turbo) 0%, #c7f034 100%);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    line-height: 1.3;
    box-shadow: 0 6px 16px rgba(212,255,61,0.3);
}
.plan-price-promo-label::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--ink);
    border-radius: 50%;
}
.plan--featured .plan-price-promo-label {
    background: linear-gradient(135deg, var(--turbo) 0%, #c7f034 100%);
    color: var(--ink);
    box-shadow: 0 6px 20px rgba(212,255,61,0.5);
}
.plan-price-promo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.plan-price-hero-num {
    font-size: clamp(64px, 7vw, 84px);
    font-weight: 800;
    letter-spacing: -5px;
    line-height: 0.95;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    background: linear-gradient(180deg, var(--ink) 0%, var(--violet-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right:1%;
}
.plan--featured .plan-price-hero-num {
    background: linear-gradient(180deg, var(--white) 0%, var(--turbo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.plan-price-hero-unit {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-600);
    letter-spacing: -0.4px;
}
.plan--featured .plan-price-hero-unit { color: rgba(255,255,255,0.6); }
.plan-price-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--violet-deep);
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.2px;
}
.plan-price-save::before {
    content: "↓";
    font-size: 14px;
    font-weight: 900;
}
.plan--featured .plan-price-save { color: var(--turbo); }

/* === 플랜 푸터 (기준 인원 + 추가 비용) === */
.plan-meta {
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px dashed var(--gray-200);
}
.plan--featured .plan-meta { border-top-color: rgba(255,255,255,0.12); }
.plan-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.plan-meta-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: -0.2px;
}
.plan--featured .plan-meta-label { color: rgba(255,255,255,0.55); }
.plan-meta-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
}
.plan--featured .plan-meta-value { color: var(--white); }

.plan-price {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}
.plan--featured .plan-price { border-bottom-color: rgba(255,255,255,0.1); }
.plan-price-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--violet);
}
.plan--featured .plan-price-num { color: var(--turbo); }
.plan-price-unit {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    margin-left: 4px;
}
.plan--featured .plan-price-unit { color: rgba(255,255,255,0.5); }
.plan-price-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 800;
    background: var(--chalk);
    color: var(--violet);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    vertical-align: middle;
    line-height: 1.4;
}
.plan-price-tag--accent {
    background: var(--turbo);
    color: var(--ink);
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex: 1;
}
.plan-features li {
    font-size: 14.5px;
    line-height: 1.6;
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--gray-700);
    font-weight: 500;
    border-bottom: 1px solid rgba(15,42,30,0.04);
}
.plan-features li:last-child { border-bottom: none; }
.plan--featured .plan-features li {
    color: rgba(255,255,255,0.78);
    border-bottom-color: rgba(255,255,255,0.06);
}
.plan-features li .ico {
    position: absolute;
    left: 0; top: 12px;
    color: var(--violet);
    width: 16px; height: 16px;
    padding: 2px;
    background: rgba(52,199,123,0.12);
    border-radius: 50%;
}
.plan--featured .plan-features li .ico {
    color: var(--turbo);
    background: rgba(212,255,61,0.12);
}

.plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 18px 24px;
    background: var(--chalk);
    color: var(--ink);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
    letter-spacing: -0.2px;
}
.plan-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}
.plan-btn:hover {
    background: var(--ink);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,42,30,0.25);
}
.plan-btn:hover::after { transform: translateX(4px); }

.plan-btn--primary {
    background: var(--turbo);
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(212,255,61,0.35);
}
.plan-btn--primary:hover {
    background: var(--turbo);
    color: var(--ink);
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(212,255,61,0.5);
}

.pricing-footnote {
    text-align: center;
    margin-top: 56px;
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
    padding: 16px 24px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    display: inline-block;
    width: auto;
    border: 1px solid rgba(15,42,30,0.06);
}
.pricing-footnote-wrap { text-align: center; margin-top: 56px; }

/* ============================================
   5.8 FAQ
============================================ */
.faq-section {
    background: var(--chalk);
    padding: 100px 0;
}
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--white);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.faq-item[open] {
    border-color: var(--violet-light);
}
.faq-q {
    padding: 22px 28px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    letter-spacing: -0.3px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--chalk);
    color: var(--violet);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    transition: transform 0.25s, background 0.25s;
    flex-shrink: 0;
}
.faq-item[open] .faq-icon {
    background: var(--violet);
    color: var(--white);
    transform: rotate(45deg);
}
.faq-a {
    padding: 0 28px 24px 28px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--gray-700);
    font-weight: 500;
}

/* ============================================
   6. FINAL CTA
============================================ */
.final-cta {
    background: var(--white);
    padding: 100px 0 120px;
}
.final-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cta-block {
    border-radius: 32px;
    padding: 56px 44px;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block:hover {
    transform: translateY(-6px);
}
.cta-block.dark {
    background: var(--chalk);
    color: var(--ink);
    border: 1px solid rgba(15,42,30,0.06);
}
.cta-block.dark:hover {
    box-shadow: 0 24px 56px rgba(52,199,123,0.18);
}
.cta-block.dark::before {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
    opacity: 0.18;
    border-radius: 50%;
    filter: blur(20px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block.dark:hover::before {
    transform: scale(1.2) translate(-10px, -10px);
}
.cta-block.accent {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
    color: var(--white);
}
.cta-block.accent:hover {
    box-shadow: 0 28px 64px rgba(31,157,92,0.4);
}
.cta-block.accent::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--turbo) 0%, transparent 70%);
    opacity: 0.35;
    border-radius: 50%;
    filter: blur(20px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block.accent:hover::before {
    transform: scale(1.3) translate(10px, 10px);
}
/* accent에 미묘한 노이즈 */
.cta-block.accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}
.cta-block-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: fit-content;
    color: var(--violet-deep);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(15,42,30,0.06);
}
.cta-block.accent .cta-block-tag {
    background: rgba(255,255,255,0.95);
    color: var(--violet-deep);
}
.cta-block-tag.light {
    background: var(--turbo);
    color: var(--ink);
}
.cta-block-title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 120%;
    margin-top: 24px;
    position: relative;
    z-index: 2;
}
.cta-block-desc {
    font-size: 15px;
    color: var(--gray-700);
    line-height: 1.7;
    font-weight: 500;
    margin-top: 16px;
    position: relative;
    z-index: 2;
}
.cta-block.accent .cta-block-desc {
    color: rgba(255,255,255,0.88);
}
.cta-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
    cursor: pointer;
    width: fit-content;
    margin-top: 36px;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.cta-block-btn:hover::after { transform: translateX(6px); }
.cta-block-btn.dark {
    background: var(--ink);
    color: var(--white);
}
.cta-block-btn.light {
    background: var(--ink);
    color: var(--turbo);
}

/* ============================================
   도입 문의 모달
============================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal.is-open {
    display: flex;
    animation: modalFadeIn 0.25s ease;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 30, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.modal-dialog {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 44px 40px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border: none;
    background: var(--chalk);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 400;
    color: var(--gray-700);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.modal-close:hover {
    background: var(--violet);
    color: var(--white);
}
.modal-kicker {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.8px;
    margin-bottom: 8px;
}
.modal-desc {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* 폼 */
.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
}
.req {
    color: var(--violet);
    margin-left: 2px;
}
.form-input {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.form-input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(52, 199, 123, 0.15);
}
.form-input.is-invalid {
    border-color: #E53E3E;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}
.form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}
.form-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.chip {
    cursor: pointer;
    user-select: none;
}
.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.chip span {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--white);
    transition: all 0.18s;
}
.chip:hover span { border-color: var(--violet-light); }
.chip input:checked + span {
    background: var(--violet);
    color: var(--white);
    border-color: var(--violet);
}
.form-submit {
    margin-top: 8px;
    padding: 15px 24px;
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
}
.form-submit:hover {
    background: var(--violet);
    transform: translateY(-1px);
}
.form-privacy {
    font-size: 14px;
    color: var(--gray-400);
    text-align: center;
    margin-top: 4px;
    line-height: 1.5;
}

/* 완료 화면 */
.modal-success {
    text-align: center;
    padding: 24px 8px;
    animation: successFadeIn 0.4s ease;
}
@keyframes successFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--chalk);
    color: var(--violet);
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.success-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.success-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 32px;
}
.success-desc strong {
    color: var(--ink);
    font-weight: 800;
}

/* ============================================
   스크롤 애니메이션 — 2026 풀세트
============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 좌→우 슬라이드 인 */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 우→좌 슬라이드 인 */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 스케일 + 페이드 */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}
/* 블러 + 페이드 — 글자 강조 */
.reveal-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.58s; }
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* 페럴랙스 — JS로 --scroll-y CSS var 주입 */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* 스크롤 진행도에 따른 element 회전/스케일 — 데코용 */
.floating-deco {
    animation: float 8s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur,
    .reveal-stagger > *, [data-parallax], .floating-deco {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   FOOTER
============================================ */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,0.5);
    padding: 56px 0 40px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 0;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-logo { height: 26px; width: auto; opacity: 0.9; align-self: flex-start; }
.footer-info { line-height: 1.9; }
.footer-info b { color: rgba(255,255,255,0.85); font-weight: 700; }

/* 하단 정책 링크 + 카피라이트 */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.4); }

/* ============================================
   반응형
============================================ */
@media (max-width: 1100px) {
    .header-logo-tag { display: none; }
    .header-nav { gap: 16px; }
    .header-nav li { font-size: 14px; }
    .header-select { display: none; }
}
@media (max-width: 1024px) {
    .header-nav { gap: 14px; }
    .header-nav li { font-size: 14px; }
    .sol-grid { grid-template-columns: repeat(3, 1fr); }
    .sol-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .problem-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr; }
    .results-grid { grid-template-columns: 1fr; gap: 48px; }
    .pricing-section { padding: 80px 0 60px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
    .pricing-grid--2 { grid-template-columns: 1fr; max-width: 460px; gap: 20px; }
    .plan { padding: 40px 28px; border-radius: 24px; }
    .plan-price-hero-num { font-size: 64px; letter-spacing: -4px; }
    .plan-capacity-num { font-size: 64px; }
    .sec-title { font-size: 40px; letter-spacing: -1.6px; }
    .results-headline { font-size: 44px; }
    .results-figure { font-size: 80px; }
    .concept-title { font-size: 26px; }
    .results-positioning-line { font-size: 28px; }
}
@media (max-width: 900px) {
    .header { padding: 0; }
    .header-inner { padding: 12px 16px; gap: 12px; }
    .header.is-scrolled .header-inner { padding: 10px 16px; }
    .header-logo-tag { display: none; }
    .header-logo img { height: 24px; }
    /* 모바일에서 로고를 좌측 끝으로, 우측 그룹은 우측 끝으로 */
    .header-logo { margin-right: auto; }
    /* 모바일에서 데스크톱 nav 숨김 */
    .header-nav { display: none; }
    /* 햄버거 버튼 노출 (CSS 뒤쪽 정의를 이기기 위해 !important) */
    .header-burger { display: inline-flex !important; }
    /* CTA는 살짝 작게 */
    .header-cta { padding: 8px 16px; font-size: 13px; }

    /* 모바일 헤더: sticky 유지 (overflow-x는 별도 처리)
       hide-on-scroll-down은 transform만으로 */
    .header {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s, padding 0.3s;
    }
    .header.is-hidden {
        transform: translateY(-100%);
    }

    .header-inner { gap: 10px; }
    /* .hero { padding: 60px 24px 80px; } */
    .hero-shape-left, .hero-shape-right { display: none; }
    .hero-title { font-size: 28px; letter-spacing: -1px; }
    .hero-badges { gap: 8px; }
    .hero-badge { font-size: 14px; padding: 6px 12px; }
    .section { padding: 60px 0; }
    .sec-head { margin-bottom: 44px; }
    .sec-title { font-size: 32px; letter-spacing: -1.2px; }
    .sec-sub { font-size: 15px; }
    .sol-grid { grid-template-columns: 1fr 1fr; }
    .sol-grid--4 { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .benefit-card { padding: 24px 18px; }
    .problem-insight-line { font-size: 16px; }
    .problem-insight-line.problem-insight-strong { font-size: 20px; }
    .concept-band { padding: 60px 24px; }
    .concept-title { font-size: 20px; line-height: 1.6; }
    .results-positioning-line { font-size: 22px; line-height: 1.5; }
    .results-positioning { margin-bottom: 56px; }
    .final-cta-grid { grid-template-columns: 1fr; }
    .solo-cta { padding: 40px 28px; }
    .solo-cta-title { font-size: 22px; }
    .cta-block { padding: 36px 28px; min-height: auto; }
    .cta-block-title { font-size: 22px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .results { padding: 60px 0; }
    .results-headline { font-size: 36px; }
    .results-figure { font-size: 64px; }
    .results-stats { gap: 32px; flex-wrap: wrap; }
    .results-stat-num { font-size: 26px; }
    .quote-body { font-size: 14px; }
    .pricing-section, .faq-section { padding: 60px 0; }
    .faq-q { font-size: 14px; padding: 18px 22px; }
    .faq-a { padding: 0 22px 20px 22px; font-size: 14px; }
}

/* ============================================
   라인 아이콘 시스템
   - 모든 아이콘은 <svg><use href="#icon-X"/></svg> 형태로 사용
   - currentColor 상속 → 부모 색상 자동 적용
============================================ */
.ico {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* 사용처별 아이콘 크기 — 컨텍스트에 따라 자동 적용 */
.header-icon .ico { width: 18px; height: 18px; }
.problem-icon .ico { width: 36px; height: 36px; stroke-width: 1.5; color: var(--violet); }
.sol-illust .ico { width: 80px; height: 80px; stroke-width: 1.25; opacity: 0.85; }
.benefit-icon .ico { width: 28px; height: 28px; stroke-width: 1.75; color: var(--white); }
.benefit-icon--turbo .ico { color: var(--ink); }     /* turbo 배경에는 어두운 아이콘 */
.hero-badge .ico { width: 14px; height: 14px; stroke-width: 2; }
.plan-features .ico { width: 14px; height: 14px; stroke-width: 2.25; color: var(--violet); }
.plan--featured .plan-features .ico { color: var(--turbo); }
.plan-badge .ico,
.solo-cta-badge .ico { width: 13px; height: 13px; stroke-width: 2; }
.home-chip-info .ico { width: 12px; height: 12px; stroke-width: 2.25; }
/* ============================================
   V2 EDITORIAL — PITAPAT 스타일 임팩트 요소
   /OUR WORK · WE MAKE / DAILY / POSS·BLE · /SEVEN DOT 케이스
   ============================================ */
.v2-display {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    line-height: 0.92;
}

/* /OUR WORK 슬래시 헤딩 영역 */
.v2-slash-section {
    padding: 80px 24px 60px;
    background: var(--white);
}
.v2-slash-section--alt { background: var(--chalk); }
.v2-slash-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.v2-slash-title {
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: -2px;
    color: var(--violet);
    line-height: 1;
    display: inline-block;
}
/* .v2-slash-title::before {
  content: '';
  color: var(--violet);
  margin-right: 6px;
} */
.v2-slash-text {
    margin-top: 20px;
    max-width: 520px;
    line-height: 1.7;
    color: var(--gray-700);
    font-weight: 500;
}
.v2-slash-text strong {
    color: var(--violet);
    font-weight: 800;
}
.v2-slash-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: filter 0.15s, transform 0.15s;
    cursor: pointer;
    border: none;
    font-family: inherit;
    margin-top:32px;
}
.v2-slash-link:hover {
    filter: brightness(0.92);
    transform: translateX(4px);
}
.v2-slash-link .ico { width: 16px; height: 16px; }

/* WE MAKE / DAILY / POSS·BLE 임팩트 텍스트 */
.v2-impact {
    padding: 100px 24px 120px;
    background: var(--white);
    overflow: hidden;
}
.v2-impact-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.v2-impact-line {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--violet);
}
.v2-impact-line.l1 { text-align: left; }
.v2-impact-line.l2 {
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 2px var(--violet);
    margin: 6px 0;
}
.v2-impact-line.l3 { text-align: right; }
.v2-impact-line .slash { color: var(--turbo); }
.v2-impact-dot {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--turbo);
    top: 38%;
    right: 6%;
}

/* /SEVEN DOT 풀스크린 케이스 영역 */
.v2-case {
    padding: 60px 24px 80px;
    background: var(--white);
}
.v2-case-stage {
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16/8;
    border-radius: 24px;
    background: var(--ink);
    background-image:
            radial-gradient(circle at 30% 40%, rgba(52,199,123,0.4) 0%, transparent 50%),
            radial-gradient(circle at 70% 60%, rgba(212,255,61,0.18) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.v2-case-label {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--white);
    letter-spacing: -2px;
    text-align: center;
    line-height: 0.95;
}
.v2-case-label::before {
    content: '/';
    color: var(--violet-light);
    margin-right: 6px;
}
.v2-case-tags-glass {
    position: absolute;
    bottom: 24px; left: 24px;
    display: flex;
    gap: 8px;
}
.v2-case-tags-glass span {
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
}
.v2-case-meta {
    max-width: 1200px;
    margin: 24px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.v2-case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.v2-case-tag {
    padding: 6px 14px;
    background: var(--chalk);
    color: var(--violet);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.v2-case-desc {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
}
.v2-case-desc strong { color: var(--violet); font-weight: 800; }

/* 반응형 */
@media (max-width: 900px) {
    .v2-slash-section { padding: 60px 20px 40px; }
    .v2-slash-inner { flex-direction: column; align-items: flex-start; }
    .v2-impact { padding: 60px 20px 80px; }
    .v2-impact-line { letter-spacing: -2px; }
    .v2-impact-line.l2 { -webkit-text-stroke-width: 1.5px; }
    .v2-case { padding: 40px 20px 60px; }
    .v2-case-stage { aspect-ratio: 4/3; }
    .v2-case-meta { flex-direction: column; gap: 16px; }
}

/* ============================================
   [NEW] SOLUTIONS — Clear 앱 영감 + ecopulse 민트 톤
   다크 페이지 흐름 속 라이트 섹션으로 분위기 전환
============================================ */
.section--solutions {
    position: relative;
    overflow: hidden;
}
.section--solutions::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle,
    rgba(199, 240, 52, 0.20) 0%,
    rgba(43, 217, 100, 0.18) 40%,
    transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.section--solutions::after {
    content: '';
    position: absolute;
    bottom: -150px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle,
    rgba(26, 77, 62, 0.18) 0%,
    transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.section--solutions .wrap {
    position: relative;
    z-index: 1;
}
.section--solutions .sec-title { color: var(--ink); }
.section--solutions .sec-sub { color: var(--violet-deep); }
.sec-kicker--solutions { color: var(--violet-deep); }

/* 4단계 그리드 */
.flow-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
}

/* 공통 카드 */
.flow-card {
    position: relative;
    border-radius: 28px;
    padding: 32px;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.flow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(15, 42, 30, 0.08);
}
.flow-step {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--violet-deep);
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.flow-card-foot {
    margin-top: auto;
    position: relative;
    z-index: 2;
}
.flow-card-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 6px;
}
.flow-card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.flow-card-desc {
    font-size: 16px;
    color: var(--gray-700);
    line-height: 1.55;
    font-weight: 500;
}

/* 카드 1: 큰 타이포 카드 — 가장 밝은 톤 */
.flow-card--type {
    background: #F0FAF4;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 320px;
}
.flow-headline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 32px;
    margin-bottom: auto;
}
.flow-headline-text {
    font-size: clamp(56px, 7vw, 60px);
    font-weight: 800;
    letter-spacing: -3px;
    color: var(--ink);
    line-height: 1;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
/* 마지막 어절 + caret을 한 단위로 묶어, 줄바꿈 시 같이 이동 */
.flow-headline-last {
    white-space: nowrap;
}
.flow-caret {
    font-size: clamp(56px, 7vw, 60px);
    font-weight: 200;
    color: var(--violet);
    line-height: 1;
    margin-left: 6px;
    animation: flowCaretBlink 1.1s steps(1) infinite;
}
@keyframes flowCaretBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.flow-meta {
    font-size: 16px;
    color: var(--violet-deep);
    font-weight: 500;
    margin-top: 24px;
}

/* 카드 2: 그라디언트 블롭 — ecopulse 그린 그라디언트 */
.flow-card--blob {
    background: var(--ink);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-height: 320px;
    color: var(--white);
}
.flow-card--blob .flow-step { color: var(--violet); }
.flow-card--blob .flow-card-title { color: var(--white); }
.flow-card--blob .flow-card-desc { color: rgba(255,255,255,0.7); }
/* "7" 모양 블롭 — 하루 7개 미션을 시각화
 div의 ::before에 7 글자를 넣고 그라디언트로 색칠 */
.flow-blob {
    position: absolute;
    top: 50%; left: 70%;
    transform: translate(-50%, -55%);
    width: 240px; height: 240px;
    z-index: 1;
    /* 글로우 효과: 7 주위에 부드러운 빛 번짐 */
    filter: drop-shadow(0 0 40px rgba(43, 217, 100, 0.45))
    drop-shadow(0 0 80px rgba(199, 240, 52, 0.25));
}
.flow-blob::before {
    content: '7';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 280px;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -10px;
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    /* 그라디언트를 글자에 입힘 */
    background:
            radial-gradient(circle at 30% 30%, var(--turbo) 0%, transparent 55%),
            radial-gradient(circle at 70% 70%, var(--violet-light) 0%, transparent 60%),
            linear-gradient(135deg, var(--turbo) 0%, var(--violet) 50%, var(--violet-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.flow-blob--warm {
    /* warm variant: 글로우 톤 조정 */
    filter: drop-shadow(0 0 40px rgba(43, 217, 100, 0.5))
    drop-shadow(0 0 100px rgba(199, 240, 52, 0.3));
}
/* 기존 ::after 노이즈 오버레이는 원형이라 비활성화 */
.flow-card--blob .flow-blob::after {
    display: none;
}

/* 카드 3: 칩 그리드 — 중간 톤 민트 */
.flow-card--chips {
    background: #DCEFE3;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}
.flow-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #FFFFFF;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(10, 31, 23, 0.04);
}
.flow-chip--active {
    background: var(--violet);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(43, 217, 100, 0.35);
}

/* 카드 4: 차트 — 가장 진한 민트 톤 */
.flow-card--chart {
    background: #C8E8D4;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    overflow: hidden;
    padding-top: 28px;
}
.flow-card--chart .flow-step {
    margin-bottom: 0;
}
.flow-chart {
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
}
.flow-chart-tag {
    position: absolute;
    z-index: 2;
    background: #FFFFFF;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(15, 42, 30, 0.08);
    white-space: nowrap;
}
.flow-chart-tag--start {
    top: 140px;
    left: 38%;
}
.flow-chart-tag--end {
    top: 90px;
    right: 9%;
}

/* 반응형 — 태블릿 */
@media (max-width: 960px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr;
    }
    .flow-card--type, .flow-card--blob {
        grid-row: auto;
        min-height: 260px;
    }
    .flow-card--chips, .flow-card--chart {
        grid-row: auto;
    }
    .flow-headline-text, .flow-caret { font-size: 56px; }
}

/* 반응형 — 모바일 (≤768px: 일반 모바일 + 큰 모바일까지 커버) */
@media (max-width: 768px) {
    .flow-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .flow-card {
        grid-column: 1 / 2 !important;
        min-height: 220px;
        padding: 28px 24px;
        border-radius: 24px;
    }

    /* STEP 01: 큰 타이포 카드 — caret이 텍스트와 같은 줄에 있도록 inline-block화 */
    .flow-card--type { min-height: 280px; }
    .flow-headline {
        display: block;            /* flex → block: caret이 자연스럽게 텍스트 뒤에 따라감 */
        margin-top: 20px;
        margin-bottom: auto;
        line-height: 1.05;
    }
    .flow-headline-text {
        font-size: clamp(40px, 11vw, 56px);
        letter-spacing: -1.8px;
        display: inline;            /* 텍스트와 caret을 inline으로 묶음 */
    }
    .flow-caret {
        font-size: clamp(40px, 11vw, 56px);
        display: inline;
        margin-left: 4px;
    }
    .flow-meta { margin-top: 20px; }

    /* STEP 02: blob 카드 — 타이틀 가독성 확보 */
    .flow-card--blob { min-height: 260px; }
    .flow-blob { width: 180px; height: 180px; }
    .flow-blob::before { font-size: 220px; letter-spacing: -8px; }

    /* STEP 03: 칩 그리드 — 그대로 유지 */
    .flow-card-title { font-size: 20px; }

    /* STEP 04: 차트 카드 — absolute 해제하고 flow 안에 배치 */
    .flow-card--chart {
        padding: 28px 24px;
        min-height: 260px;
        overflow: visible;
        position: relative;
    }
    .flow-card--chart .flow-step {
        margin-bottom: 12px;
    }
    .flow-chart-wrap {
        position: absolute;
        top: 60px;
        left: 16px;
        right: 16px;
        aspect-ratio: 600 / 144;
        max-height: 90px;
        pointer-events: none;
        z-index: 1;
        margin: 0;
    }
    .flow-chart {
        width: 100%;
        height: 100%;
        display: block;
        top:0;
    }
    .flow-chart-tag {
        font-size: 11px;
        padding: 4px 10px;
    }
    .flow-chart-tag--start {
        top: 66%;
        left: 43%;
        bottom: auto;
        transform: translate(-50%, 0);
    }
    .flow-chart-tag--end {
        top: -20%;
        left: 84%;
        right: auto;
        transform: translate(-50%, 0);
    }
    .flow-card--chart .flow-card-foot {
        margin-top: auto;
    }

}

/* 매우 좁은 화면 — caret 폰트만 한 단계 더 축소 */
@media (max-width: 380px) {
    .flow-headline-text, .flow-caret {
        font-size: clamp(34px, 10vw, 44px);
        letter-spacing: -1.4px;
    }
    .flow-chip { font-size: 13px; padding: 7px 13px; }
    .flow-chart-tag { font-size: 10px; padding: 3px 8px; }
}


/* ============================================
   [NEW] SERVICES — 탭 + 좌측 Featured + 우측 그리드
   (이미지 3: 세븐닷 학원 운영 페이지 스타일)
============================================ */
.section--services { background: var(--ink); padding: 100px 0; }
.section--services .sec-title { color: var(--white); }
.section--services .sec-title .accent {
    color: var(--violet);
    -webkit-text-fill-color: var(--violet);
}
.section--services .sec-sub { color: rgba(255, 255, 255, 0.6); }
.section--services .sec-kicker { color: var(--violet); }

/* 상단 탭 (앱 아이콘) */
.svc-tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.svc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.2s ease;
}
.svc-tab:hover { transform: translateY(-2px); }
.svc-tab-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--white);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.svc-tab-ico .ico {
    width: 28px;
    height: 28px;
    stroke: var(--ink);
    stroke-width: 1.75;
}
.svc-tab-ico--featured {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.svc-tab-ico--featured .ico {
    stroke: var(--white);
    fill: var(--white);
}
.svc-tab-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
    position: relative;
}
.svc-tab.is-active .svc-tab-label {
    color: var(--violet);
    font-weight: 700;
}
.svc-tab.is-active .svc-tab-label::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--violet);
    border-radius: 2px;
}
.svc-tab.is-active:not([data-svc-tab="featured"]) .svc-tab-ico {
    box-shadow: 0 8px 20px rgba(52, 199, 123, 0.3);
}

/* 탭 패널 */
.svc-panel {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
    background: var(--chalk);
    border-radius: 28px;
    padding: 14px;
}
.svc-panel[hidden] { display: none; }

/* 좌측 Featured 카드 */
.svc-feature {
    background: linear-gradient(160deg, var(--violet-deep) 0%, var(--violet-deep) 100%);
    border-radius: 20px;
    padding: 40px 32px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    position: relative;
    overflow: hidden;
}
.svc-feature::before {
    content: '';
    position: absolute;
    top: -30%; right: -30%;
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(125, 221, 168, 0.35) 0%, transparent 70%);
    filter: blur(40px);
}
.svc-feature--alt {
    background: linear-gradient(160deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.svc-feature-title {
    font-family: 'Archivo', sans-serif;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 20px;
    position: relative;
}
.svc-feature-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    position: relative;
}

/* 우측 아이템 그리드 */
.svc-items {
    background: var(--white);
    border-radius: 20px;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    align-content: start;
}
.svc-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.svc-item-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--chalk);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(15, 42, 30, 0.06);
}
.svc-item-ico .ico {
    width: 22px;
    height: 22px;
    stroke: var(--violet-deep);
    stroke-width: 1.75;
}
.svc-item-body { flex: 1; min-width: 0; }
.svc-item-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.svc-item-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: 0.5px;
    font-style: normal;
    line-height: 1.5;
}
.svc-item-tag--new {
    background: var(--violet);
    color: var(--white);
}
.svc-item-tag--hot {
    background: var(--turbo);
    color: var(--ink);
}
.svc-item-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--gray-700);
    font-weight: 500;
}

/* 반응형 — 태블릿 */
@media (max-width: 960px) {
    .svc-panel {
        grid-template-columns: 1fr;
    }
    .svc-feature {
        min-height: 220px;
        padding: 32px;
    }
    .svc-feature-title { font-size: 36px; }
    .svc-items { padding: 28px; gap: 24px; }
}

/* 반응형 — 모바일 */
@media (max-width: 640px) {
    .section--services { padding: 60px 0; }
    .svc-tabs { gap: 16px; margin-bottom: 32px; }
    .svc-tab-ico { width: 48px; height: 48px; border-radius: 12px; }
    .svc-tab-ico .ico { width: 24px; height: 24px; }
    .svc-tab-label { font-size: 12px; }
    .svc-panel { padding: 10px; gap: 10px; border-radius: 22px; }
    .svc-feature { padding: 28px 24px; min-height: 180px; }
    .svc-feature-title { font-size: 32px; margin-bottom: 14px; }
    .svc-feature-desc { font-size: 14px; }
    .svc-items {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 20px;
    }
    .svc-item-ico { width: 40px; height: 40px; }
    .svc-item-title { font-size: 14px; }
    .svc-item-desc { font-size: 12.5px; }
}


/* ============================================
   [NEW] SERVICES — 자동 좌우 슬라이드 캐러셀
   6개 패널이 자동으로 좌→우 순환
============================================ */
.svc-carousel {
    position: relative;
}
.svc-carousel-viewport {
    overflow: hidden;
    border-radius: 28px;
}
.svc-carousel-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
}
/* 캐러셀 안에 들어간 패널: 한 슬라이드 = 뷰포트 전체 너비 */
.svc-carousel-track .svc-panel {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
}

/* 카테고리 라벨 (좌측 Feature 카드 상단) */
.svc-feature-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: auto;
    position: relative;
    z-index: 2;
}
.svc-feature-label .ico {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
}
.svc-feature {
    justify-content: flex-start;
}
.svc-feature-title {
    margin-top: auto;
}

/* 캐러셀 컨트롤 */
.svc-carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}
.svc-carousel-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.svc-carousel-arrow:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--ink);
    transform: scale(1.05);
}
.svc-carousel-arrow .ico {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

.svc-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.svc-carousel-dot {
    position: relative;
    height: 6px;
    width: 32px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.svc-carousel-dot span {
    /* 텍스트는 시각적으로 숨김 (스크린리더용) */
    position: absolute;
    left: -10000px;
    overflow: hidden;
}
.svc-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.35);
}
.svc-carousel-dot.is-active {
    width: 56px;
    background: rgba(255, 255, 255, 0.18);
}
/* 활성 도트 프로그레스 바 (자동 재생 시각화) */
.svc-carousel-dot.is-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background: var(--violet);
    transform-origin: left center;
    animation: svcDotProgress 6s linear forwards;
}
.svc-carousel.is-paused .svc-carousel-dot.is-active::after {
    animation-play-state: paused;
}
@keyframes svcDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 반응형 */
@media (max-width: 640px) {
    .svc-carousel-controls { gap: 12px; margin-top: 24px; }
    .svc-carousel-arrow { width: 38px; height: 38px; }
    .svc-carousel-arrow .ico { width: 16px; height: 16px; }
    .svc-carousel-dot { width: 24px; height: 5px; }
    .svc-carousel-dot.is-active { width: 40px; }
}


/* ============================================
   [NEW] 모바일 햄버거 + 드로어
============================================ */
/* 햄버거 버튼: 데스크톱에서 숨김 */
.header-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.header-burger:hover {
    background: rgba(255, 255, 255, 0.1);
}
.header-burger-line {
    display: block;
    width: 18px;
    height: 1.75px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s ease;
}
/* 햄버거 활성화 시 X 모양 */
.header-burger.is-open .header-burger-line:nth-child(1) {
    transform: translateY(5.75px) rotate(45deg);
}
.header-burger.is-open .header-burger-line:nth-child(2) {
    opacity: 0;
}
.header-burger.is-open .header-burger-line:nth-child(3) {
    transform: translateY(-5.75px) rotate(-45deg);
}

/* 드로어 컨테이너 */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
.mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

/* 백드롭 (어두운 배경) */
.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 23, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.is-open .mobile-drawer-backdrop {
    opacity: 1;
}

/* 드로어 패널 (우측에서 슬라이드 인) */
.mobile-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(86%, 360px);
    background: var(--ink);
    background-image:
            radial-gradient(circle at 90% 8%, rgba(199, 240, 52, 0.12) 0%, transparent 40%),
            radial-gradient(circle at 0% 100%, rgba(43, 217, 100, 0.10) 0%, transparent 50%);
    color: var(--white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
}
.mobile-drawer.is-open .mobile-drawer-panel {
    transform: translateX(0);
}

/* 드로어 헤드 */
.mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-drawer-brand img {
    height: 24px;
    width: auto;
}
.mobile-drawer-brand span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--white);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}
.mobile-drawer-close:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--ink);
}

/* 드로어 nav */
.mobile-drawer-nav {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    flex: 1;
}
.mobile-drawer-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-drawer-nav li a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    color: var(--white);
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    transition: all 0.25s ease;
    position: relative;
}
.mobile-drawer-nav li a::after {
    content: '→';
    position: absolute;
    right: 28px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    transform: translateX(-8px);
    opacity: 0;
    transition: all 0.25s ease;
}
.mobile-drawer-nav li a:hover,
.mobile-drawer-nav li a:active {
    background: rgba(43, 217, 100, 0.08);
    color: var(--violet);
    padding-left: 36px;
}
.mobile-drawer-nav li a:hover::after,
.mobile-drawer-nav li a:active::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--violet);
}
.mobile-drawer-num {
    font-family: 'Archivo', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
    transition: color 0.25s ease;
}
.mobile-drawer-nav li a:hover .mobile-drawer-num {
    color: var(--violet);
}

/* 드로어 푸터 */
.mobile-drawer-foot {
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 22px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 99px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mobile-drawer-cta:hover {
    background: var(--turbo);
    transform: translateY(-1px);
}
.mobile-drawer-meta {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* body 스크롤 잠금 */
body.drawer-open {
    overflow: hidden;
}:root {
     /* === ecopulse 4-tone 팔레트 (2026) ===
        이미지 1 ecopulse 로고에서 추출한 통일된 그린 시스템
        - 4가지 핵심 톤이 명확한 역할로 분배됨
     */

     /* [1] 비비드 그린 — 메인 액센트 / CTA / 강조 */
     --violet:        #2BD964;  /* ecopulse 비비드 그린 */
     --violet-deep:   #1A4D3E;  /* ecopulse 딥 그린 */
     --violet-light:  #A8E6BC;  /* ecopulse 라이트 민트 */

     /* [2] 잉크 블랙 — 풀 다크 섹션 */
     --ink:           #0A1F17;  /* ecopulse 잉크 (거의 블랙에 가까운 다크 그린) */

     /* [3] 라이트 톤 — 배경 / 카드 */
     --chalk:         #E8F7EE;  /* 라이트 민트 배경 */
     --white:         #FFFFFF;

     /* [4] 포인트 액센트 — 가끔 등장하는 강조 */
     --turbo:         #C7F034;  /* 라임 (이미지 2에서 영감받은 포인트, 절제해서 사용) */

     /* === 중성색 === */
     --gray-200:      #E6E6E6;
     --gray-400:      #B5B5B5;
     --gray-600:      #686868;
     --gray-700:      #575757;
 }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
    background: var(--white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   스크롤 진행도 바 (최상단)
============================================ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    box-shadow: 0 0 12px rgba(212,255,61,0.6);
    transition: width 0.08s linear;
}

/* ============================================
   플로팅 스티키 CTA — PC: 우측 하단 / 모바일: 풀와이드
============================================ */
.sticky-cta {
    display: block;
    position: fixed;
    z-index: 90;
    transform: translateY(140%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    /* PC 기본: 우측 하단 플로팅 */
    right: 24px;
    bottom: 24px;
    left: auto;
    width: auto;
    max-width: 360px;
}
.sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.sticky-cta-inner {
    background: var(--ink);
    border-radius: 20px;
    padding: 14px 14px 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(15,42,30,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
/* 노이즈 텍스처 — 디테일 */
.sticky-cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}
/* 라임 글로우 데코 */
.sticky-cta-inner::after {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(212,255,61,0.35) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    animation: float 9s ease-in-out infinite;
}
.sticky-cta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.sticky-cta-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--turbo);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sticky-cta-tag::before {
    content: "";
    width: 5px; height: 5px;
    background: var(--turbo);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--turbo);
    animation: kickerPulse 2s ease-in-out infinite;
}
.sticky-cta-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
}
.sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--turbo);
    color: var(--ink);
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.2px;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 16px rgba(212,255,61,0.4);
}
.sticky-cta-btn span {
    font-weight: 900;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212,255,61,0.55);
    filter: brightness(1.05);
}
.sticky-cta-btn:hover span { transform: translateX(4px); }
.sticky-cta-btn:active {
    transform: scale(0.97);
}

/* 닫기 버튼 (PC에서만 노출) */
.sticky-cta-close {
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
}
.sticky-cta:hover .sticky-cta-close { opacity: 1; }
.sticky-cta-close:hover { transform: scale(1.1); }

/* 모바일 — 풀와이드 알약 스타일 */
@media (max-width: 720px) {
    .sticky-cta {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
    .sticky-cta-inner {
        border-radius: 999px;
        padding: 8px 8px 8px 22px;
        gap: 12px;
    }
    .sticky-cta-inner::after {
        top: -20px; right: -20px;
        width: 100px; height: 100px;
    }
    .sticky-cta-price { font-size: 15px; }
    .sticky-cta-btn { padding: 12px 20px; font-size: 13px; }
    .sticky-cta-close { display: none; }
    .footer { padding-bottom: 100px; }
}

/* 작은 화면 - hover state 없을 때도 close 보이게 */
@media (hover: none) {
    .sticky-cta-close { opacity: 1; }
}

/* 사용자가 닫았을 때 영구 hidden */
.sticky-cta.is-dismissed { display: none !important; }

/* ============================================
   공지 띠 (상단 알림)
============================================ */
.topnote {
    background: var(--turbo);
    color: var(--ink);
    text-align: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ============================================
   HEADER
   데스크톱: sticky, 항상 보임
   모바일: 처음 보임 → 스크롤 다운 시 숨김 → 스크롤 업 시 재노출
============================================ */
.header {
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.header.is-scrolled {
    background: rgba(10, 31, 23, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom-color: rgba(255,255,255,0.04);
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: padding 0.3s;
}
.header.is-scrolled .header-inner {
    padding: 10px 24px;
}
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.header-logo img {
    height: 26px;
    width: auto;
}
.header-logo-tag {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.15);
}
.header-nav {
    list-style: none;
    display: flex;
    gap: 32px;
    flex: 1;
    justify-content: center;
}
.header-nav li {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding: 6px 0;
}
.header-nav li a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s;
}
.header-nav li a:hover { color: var(--turbo); }
.header-nav li.active a { color: var(--turbo); }
.header-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.header-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
}
.header-select {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
}
.header-cta {
    padding: 9px 22px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s;
}
.header-cta:hover { filter: brightness(0.95); }

/* ============================================
   1. HERO
============================================ */
/* ============================================
   1. HERO — 2슬라이드 캐러셀 + 좌(텍스트) 우(시각) 분할
============================================ */
.hero {
    position: relative;
    overflow: hidden;
}

/* 슬라이드 컨테이너 — 높이 고정으로 슬라이드 전환 시 점프 방지 */
.hero-slides {
    position: relative;
    min-height: 640px;
}

/* 각 슬라이드 — 절대 위치로 겹쳐서 페이드 전환 */
.hero-slide {
    position: absolute;
    inset: 0;
    padding: 80px 24px 100px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    animation: heroSlideFade 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes heroSlideFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 1: 라이트 그린 */
.hero-slide-1 {
    background: linear-gradient(180deg, var(--white) 0%, var(--chalk) 100%);
    color: var(--ink);
}
/* 슬라이드 2: 다크 */
.hero-slide-2 {
    background: var(--ink);
    color: var(--white);
}
/* 슬라이드 3: 라이트 (슬라이드 1과 비슷한 톤) */
.hero-slide-3 {
    background: linear-gradient(180deg, var(--chalk) 0%, var(--white) 100%);
    color: var(--ink);
}

/* 데코 도형 (슬라이드 1) */
.hero-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    z-index: 1;
}
.hero-deco-1 {
    top: -50px; left: 5%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(52,199,123,0.28) 0%, transparent 70%);
}
.hero-deco-2 {
    bottom: -100px; right: 5%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(212,255,61,0.32) 0%, transparent 70%);
}

/* 슬라이드 내부 그리드 — 좌(텍스트) + 우(시각) */
.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* 좌측 텍스트 영역 */
.hero-left {
    text-align: left;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(52,199,123,0.12);
    border: 1px solid rgba(52,199,123,0.28);
    color: var(--violet-deep);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 28px;
}
.hero-slide-2 .hero-eyebrow {
    background: rgba(212,255,61,0.12);
    border-color: rgba(212,255,61,0.4);
    color: var(--turbo);
}
.hero-eyebrow .ico,
.hero-eyebrow svg { color: currentColor; }

.hero-title {
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 800;
    letter-spacing: -2.8px;
    line-height: 120%;
    margin-bottom: 24px;
    color: inherit;
}
.hero-title .accent { color: var(--violet); }
.hero-slide-2 .hero-title .accent,
.hero-slide-2 .hero-title strong { color: var(--turbo); font-weight: 800; }

.hero-sub {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
    margin-bottom: 40px;
    color: var(--gray-700);
    letter-spacing: -0.2px;
    max-width: 460px;
}
.hero-slide-2 .hero-sub { color: rgba(255,255,255,0.72); }

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
    border: none;
    font-family: inherit;
}
.hero-cta.primary {
    background: var(--violet);
    color: var(--ink);
}
.hero-cta.primary:hover { filter: brightness(0.95); transform: translateX(2px); }
.hero-cta.outline {
    background: transparent;
    border: 1.5px solid var(--gray-200);
    color: var(--ink);
}
.hero-cta.outline:hover { border-color: var(--violet); color: var(--violet); }
.hero-slide-2 .hero-cta.outline {
    border-color: rgba(255,255,255,0.3);
    color: var(--white);
}
.hero-slide-2 .hero-cta.outline:hover { border-color: var(--turbo); color: var(--turbo); }

/* 슬라이드 2 통계 */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-stat-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1.2px;
    color: var(--turbo);
    margin-bottom: 4px;
    line-height: 1;
}
.hero-stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* ============================================
   우측 시각 영역
============================================ */
.hero-right {
    position: relative;
}

/* 슬라이드 1: 떠 있는 모의 카드 3개 */
.hero-mock {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(15,42,30,0.08);
    position: absolute;
    width: 270px;
}
.hero-mock-1 {
    top: 0; left: 30px;
    z-index: 3;
    animation: mockFloat 5s ease-in-out infinite;
}
.hero-mock-2 {
    top: 120px; right: 0;
    z-index: 2;
    animation: mockFloat 5.5s ease-in-out 0.4s infinite;
}
.hero-mock-3 {
    bottom: 10px; left: 200px;
    z-index: 1;
    animation: mockFloat 6s ease-in-out 0.8s infinite;
}
@keyframes mockFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-mock { animation: none; }
}

/* 과목별 컬러 변수 — 국어/영어/수학 통일 */
:root {
    --subj-kor: var(--violet); /* 국어 그린 */
    --subj-eng: #FF7272; /* 영어 코랄 */
    --subj-math: #04AAD5; /* 수학 블루 */
    --subj-kor-deep: var(--violet-deep);
    --subj-eng-deep: #E04F4F;
    --subj-math-deep: #0388A8;
}

.mock-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(50, 205, 139, 0.15);
    color: var(--subj-kor-deep);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}
.mock-tag.coral { background: rgba(255, 114, 114, 0.15); color: var(--subj-eng-deep); }
.mock-tag.blue  { background: rgba(4, 170, 213, 0.15); color: var(--subj-math-deep); }
.mock-tag .ico,
.mock-tag svg { width: 12px; height: 12px; }

.mock-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.6px;
    margin-bottom: 4px;
    line-height: 1.2;
}
.mock-sub {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 14px;
    line-height: 1.5;
}
.mock-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.mock-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    border-radius: 3px;
}
.mock-meta {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
}
.mock-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mock-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.mock-badge.correct {
    background: rgba(52,199,123,0.15);
    color: var(--violet-deep);
}
.mock-badge.point {
    background: var(--turbo);
    color: var(--ink);
}
.mock-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.mock-option {
    padding: 12px 0;
    background: var(--chalk);
    color: var(--ink);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}
.mock-option.is-correct {
    background: var(--violet);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(52,199,123,0.35);
}

/* 슬라이드 2: 큰 카드 3개 (grid) */
.hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.hero-bigcard {
    border-radius: 20px;
    padding: 28px 20px;
    aspect-ratio: 3/4.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s;
}
.hero-bigcard:hover { transform: translateY(-6px); }
.hero-bigcard-1 {
    background: linear-gradient(160deg, var(--subj-kor) 0%, var(--subj-kor-deep) 100%);
    color: var(--white);
}
.hero-bigcard-2 {
    background: linear-gradient(160deg, var(--subj-eng) 0%, var(--subj-eng-deep) 100%);
    color: var(--white);
}
.hero-bigcard-3 {
    background: linear-gradient(160deg, var(--subj-math) 0%, var(--subj-math-deep) 100%);
    color: var(--white);
}
.hero-bigcard-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.22);
    color: inherit;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
    letter-spacing: -0.2px;
}
.hero-bigcard-2 .hero-bigcard-tag { background: rgba(255,255,255,0.22); }
.hero-bigcard-icon {
    align-self: flex-end;
    color: rgba(255,255,255,0.55);
}
.hero-bigcard-2 .hero-bigcard-icon { color: rgba(255,255,255,0.55); }
.hero-bigcard-icon svg {
    width: 36px; height: 36px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-bigcard-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

/* ============================================
   슬라이드 3: 과목 커스텀 빌더 시각화
============================================ */
.custom-builder {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(15,42,30,0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* 상단 — 사용 가능한 과목 풀 */
.custom-pool-label,
.custom-mission-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-mission-count {
    color: var(--violet);
    font-weight: 800;
    background: var(--chalk);
    padding: 2px 10px;
    border-radius: 999px;
}
.custom-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.custom-chip {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px dashed var(--gray-200);
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-400);
    background: var(--white);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.custom-chip.is-on {
    border-style: solid;
    border-color: var(--violet);
    color: var(--violet-deep);
    background: rgba(52,199,123,0.08);
}
/* 과목별 chip 컬러 */
.custom-chip.is-on[data-subject="kor"] {
    border-color: var(--subj-kor);
    color: var(--subj-kor-deep);
    background: rgba(50, 205, 139, 0.1);
}
.custom-chip.is-on[data-subject="eng"] {
    border-color: var(--subj-eng);
    color: var(--subj-eng-deep);
    background: rgba(255, 114, 114, 0.1);
}
.custom-chip.is-on[data-subject="math"] {
    border-color: var(--subj-math);
    color: var(--subj-math-deep);
    background: rgba(4, 170, 213, 0.1);
}
/* coming soon 칩 — 라임 옐로우 톤 */
.custom-chip.is-soon {
    border-style: solid;
    border-color: rgba(212,255,61,0.5);
    color: var(--ink);
    background: rgba(212,255,61,0.18);
}
.custom-chip.is-soon em {
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
    color: var(--violet-deep);
    background: var(--turbo);
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

/* 화살표 (선택된 것이 미션으로 흘러감) */
.custom-arrow {
    display: flex;
    justify-content: center;
    color: var(--violet);
    opacity: 0.6;
    margin: -4px 0;
}
.custom-arrow .ico {
    animation: customFlow 2.4s ease-in-out infinite;
}
@keyframes customFlow {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .custom-arrow .ico { animation: none; }
}

/* 하단 — 오늘의 미션 슬롯 */
.custom-mission {
    background: var(--chalk);
    border-radius: 16px;
    padding: 18px 20px;
}
.custom-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    /* 슬롯이 추가/제거될 때 부드러운 레이아웃 변경 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-slot {
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: var(--white);
    letter-spacing: -0.3px;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top;
    overflow: hidden;
    max-height: 80px;
}
/* 슬롯이 사라지는 상태 (JS로 클래스 토글) */
.custom-slot.is-leaving {
    opacity: 0;
    transform: scale(0.85) translateY(-4px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
}
/* 모션 줄이기 설정 시 페이드만 */
@media (prefers-reduced-motion: reduce) {
    .custom-chip,
    .custom-slot,
    .custom-slots { transition: opacity 0.2s ease; }
    .custom-slot.is-leaving { transform: none; }
}

/* 과목별 색상 — 국어/영어/수학 통일 */
.custom-slot.kor  { background: linear-gradient(135deg, var(--subj-kor) 0%, var(--subj-kor-deep) 100%); }
.custom-slot.eng  { background: linear-gradient(135deg, var(--subj-eng) 0%, var(--subj-eng-deep) 100%); }
.custom-slot.math { background: linear-gradient(135deg, var(--subj-math) 0%, var(--subj-math-deep) 100%); }

/* ============================================
   슬라이더 컨트롤
============================================ */
.hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 24px 32px;
    background: inherit;
}
/* 슬라이드 활성에 따라 컨트롤 영역도 색상 통일 */
.hero[data-active="0"] .hero-controls { background: var(--chalk); }
.hero[data-active="1"] .hero-controls { background: var(--ink); }
.hero[data-active="2"] .hero-controls { background: var(--white); }

.hero-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}
.hero-arrow:hover {
    background: var(--violet);
    color: var(--ink);
    border-color: var(--violet);
}
.hero[data-active="1"] .hero-arrow {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: var(--white);
}
.hero[data-active="1"] .hero-arrow:hover {
    background: var(--turbo);
    border-color: var(--turbo);
    color: var(--ink);
}
.hero-arrow svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-dots {
    display: flex;
    gap: 8px;
}
.hero-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}
.hero-dot.active {
    width: 44px;
    background: var(--violet);
}
.hero[data-active="1"] .hero-dot { background: rgba(255,255,255,0.2); }
.hero[data-active="1"] .hero-dot.active { background: var(--turbo); }

/* 반응형 */
@media (max-width: 900px) {
    /* 모바일에서는 슬라이드를 자연 흐름으로 — active 슬라이드 크기에 컨테이너 자동 맞춤
       (데스크탑 absolute 페이드 전환 → 모바일은 display 토글로 단순화) */
    .hero-slides { min-height: 0; }
    .hero-slide {
        position: relative;
        inset: auto;
        padding: 60px 20px 60px;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: none;
    }
    .hero-slide.active {
        display: block;
        animation: heroSlideFade 0.4s ease;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-title { letter-spacing: -1px; }

    /* 슬라이드 1 모의 카드 — 모바일에서 자연스럽게 분리
       카드들이 살짝 겹치되, 각 카드의 핵심 정보(태그+타이틀)는 가려지지 않게
       좌-우-좌 지그재그 배치로 콜라주 느낌 유지 */
    .hero-slide-1 .hero-right { min-height: 480px; }
    .hero-mock {
        width: calc(100% - 50px);
        max-width: 290px;
        padding: 18px 20px;
    }
    .hero-mock-1 { top: 0; left: 0; }
    .hero-mock-2 { top: 160px; right: 0; left: auto; }
    .hero-mock-3 { top: 320px; bottom: auto; left: 20px; }
    /* 모바일에서는 mock 내부 폰트도 살짝 축소 */
    .hero-mock .mock-title { font-size: 20px; }
    .hero-mock .mock-sub { font-size: 13px; margin-bottom: 12px; }
    .hero-mock .mock-tag { font-size: 12px; margin-bottom: 10px; }
    .hero-mock .mock-meta { font-size: 13px; }
    .hero-mock .mock-option { padding: 10px 0; font-size: 15px; }

    .hero-stats { gap: 18px; flex-wrap: wrap; }
    .hero-stat-num { font-size: 26px; }

    /* 슬라이드 2 빅카드 — 모바일에서 세로 스택 (가로 레이아웃 카드)
       가로 스크롤 대신 세로로 쌓아 빈 공간 없이 정보를 풍부하게 노출 */
    .hero-cards {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 10px;
        overflow: visible;
        margin: 0;
        padding: 0;
        scroll-snap-type: none;
    }
    .hero-bigcard {
        flex: none;
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
        padding: 18px 20px;
        border-radius: 16px;
        /* 가로 레이아웃: 좌측 태그+타이틀, 우측 아이콘 */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    /* 좌측 텍스트 그룹을 묶기 위해 태그·타이틀에 직접 스타일 */
    .hero-bigcard-tag {
        font-size: 12px;
        padding: 4px 11px;
        order: 1;
        flex-shrink: 0;
    }
    .hero-bigcard-title {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: -0.4px;
        order: 2;
        flex: 1;
        margin: 0;
    }
    /* br을 공백으로 자연스럽게 처리 — "어휘 매일 7개" 한 줄 표시 */
    .hero-bigcard-title br {
        display: none;
    }
    .hero-bigcard-title::after {
        content: '';
    }
    .hero-bigcard-icon {
        order: 3;
        align-self: center;
        margin: 0;
        opacity: 0.55;
        flex-shrink: 0;
    }
    .hero-bigcard-icon svg { width: 28px; height: 28px; }

    /* 슬라이드 3 커스텀 빌더 — 모바일 보정 */
    .custom-builder { padding: 22px 18px 18px; gap: 16px; }
    .custom-chip { font-size: 13px; padding: 7px 12px; }
    .custom-mission { padding: 14px 14px; }
    /* 모바일에서는 2열로 — 폰트 14px 한 줄 가독성 유지 */
    .custom-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .custom-slot {
        font-size: 14px;
        padding: 11px 8px;
        letter-spacing: -0.3px;
    }
}
@media (max-width: 480px) {
    /* 매우 좁은 화면 — 모의카드 더 작게, 살짝 겹치되 핵심 영역 보장
       hero-slides는 자연 흐름이라 min-height 필요 없음 */
    .hero-slide-1 .hero-right { min-height: 460px; }
    .hero-mock {
        width: calc(100% - 40px);
        max-width: 270px;
        padding: 16px 18px;
    }
    .hero-mock-1 { top: 0; left: 0; }
    .hero-mock-2 { top: 150px; right: 0; left: auto; }
    .hero-mock-3 { top: 300px; bottom: auto; left: 20px; }

    /* 텍스트가 좁은 화면에서 깨지지 않도록 단어 단위 줄바꿈 강제 */
    body { word-break: keep-all; overflow-wrap: break-word; }
    .hero-title,
    .sec-title,
    .results-headline,
    .results-positioning-line,
    .concept-title,
    .cta-block-title,
    .solo-cta-title,
    .quote-body,
    .hero-sub,
    .sec-sub,
    .prod-name,
    .prod-desc,
    .benefit-title,
    .benefit-desc,
    .srv-card-title,
    .srv-card-list li {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* 가로 스크롤 방지 — clip을 써야 sticky가 정상 작동 (hidden은 sticky 깨트림) */
    html, body { overflow-x: clip; max-width: 100vw; }
    .wrap { padding: 0 16px; }

    /* hero 핵심 타이포 — clamp으로 자연 축소 */
    .hero-title { font-size: clamp(22px, 7vw, 30px); letter-spacing: -0.6px; line-height: 1.2; }
    .hero-sub { font-size: 14px; line-height: 1.6; }
    .hero-eyebrow { font-size: 12px; padding: 6px 12px; margin-bottom: 20px; }
    .hero-cta { padding: 12px 20px; font-size: 13px; }

    /* hero stats — 좁은 화면에서 줄바꿈 */
    .hero-stats { gap: 14px; }
    .hero-stat-num { font-size: 22px; }
    .hero-stat-label { font-size: 12px; }

    /* results — 핵심 수치 강조 유지하면서 축소 */
    .results-headline { font-size: clamp(28px, 9vw, 36px); letter-spacing: -1px; }
    .results-figure { font-size: clamp(56px, 18vw, 72px); letter-spacing: -2px; }
    .results-stats { gap: 20px; }
    .results-stat-num { font-size: 22px; }
    .results-stat-label { font-size: 12px; }
    .results-positioning-line { font-size: clamp(18px, 5.6vw, 22px); line-height: 1.5; }
    .results-positioning-sub { font-size: 13px; }

    /* 후기 카드 */
    .results-quote { padding: 24px 20px; }
    .results-quote::before { font-size: 100px; top: -16px; right: 12px; }
    .quote-body { font-size: 14px; line-height: 1.65; }
    .quote-name { font-size: 13px; }
    .quote-org { font-size: 12px; }

    /* 섹션 헤더 */
    .sec-head { margin-bottom: 44px; }
    .sec-title { font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -1.2px; line-height: 110%; }
    .sec-sub { font-size: 14px; line-height: 1.65; }
    .sec-kicker { font-size: 11px; letter-spacing: 1.8px; padding: 6px 12px 6px 10px; margin-bottom: 18px; }

    /* concept */
    .concept-band { padding: 48px 20px; }
    .concept-title { font-size: clamp(17px, 5.2vw, 20px); line-height: 1.55; }

    /* problem 카드 */
    .problem-card { padding: 22px 18px; }
    .problem-text { font-size: 14px; line-height: 1.5; }

    /* product 카드 */
    .prod-card { min-height: 380px; }
    .prod-stage { min-height: 220px; margin: 0; }
    .prod-body { padding: 20px 22px 24px; }
    .prod-body .prod-name { font-size: 22px; }
    .prod-desc { font-size: 13px; }

    /* benefits 카드 */
    .benefit-card { padding: 18px 14px; }
    .benefit-title { font-size: 15px; }
    .benefit-desc { font-size: 12px; line-height: 1.55; }

    /* sol-card */
    .sol-card { padding: 24px 20px; }
    .sol-card-title { font-size: 18px; }
    .sol-card-list li { font-size: 13px; }

    /* CTA */
    .cta-block { padding: 40px 28px; min-height: auto; border-radius: 24px; }
    .cta-block-title { font-size: 26px; line-height: 1.2; letter-spacing: -1px; }
    .cta-block-desc { font-size: 14px; }
    .cta-block-btn { font-size: 14px; padding: 14px 22px; margin-top: 28px; }
    .solo-cta { padding: 48px 28px; border-radius: 24px; }
    .solo-cta-title { font-size: 28px; letter-spacing: -1.2px; }
    .solo-cta-desc { font-size: 14px; }
    .solo-cta-btn { font-size: 14px; padding: 14px 28px; }

    /* faq */
    .faq-q { font-size: 13px; padding: 16px 18px; }
    .faq-a { padding: 0 18px 18px; font-size: 13px; line-height: 1.65; }

    /* pricing */
    .plan { padding: 36px 24px; }
    .plan-capacity-num { font-size: 48px; }
    .plan-name { font-size: 13px; letter-spacing: 2px; }
    .plan-price-hero-num { font-size: clamp(52px, 14vw, 64px); letter-spacing: -3px; }
    .plan-price-hero-unit { font-size: 16px; }
    .plan-price-original-num { font-size: 16px; }
    .plan-features li { font-size: 13.5px; padding: 9px 0 9px 26px; }
    .plan-btn { padding: 16px 22px; font-size: 14px; }
    .pricing-footnote { font-size: 12.5px; padding: 12px 20px; }

    /* v2 임팩트 텍스트 — 너비 초과 방지 */
    .v2-impact-line { font-size: clamp(48px, 18vw, 90px); letter-spacing: -1.5px; }

    /* 슬라이드 3 빌더 — 슬롯 가독성 보장 */
    .custom-slot { font-size: 12px; padding: 9px 6px; }
    .custom-pool-label, .custom-mission-label { font-size: 11px; }
}

/* iPhone Mini (375px) — 한 단계 더 보정 */
@media (max-width: 380px) {
    .wrap { padding: 0 14px; }

    .hero-slide { padding: 48px 16px 48px; }
    .hero-title { font-size: clamp(20px, 6.6vw, 26px); }
    .hero-sub { font-size: 13px; }

    .results { padding: 48px 0; }
    .results-headline { font-size: clamp(24px, 8.5vw, 30px); }
    .results-figure { font-size: clamp(48px, 16vw, 60px); }
    .results-stats { gap: 14px; }
    .results-stat-num { font-size: 19px; }
    .results-stat-label { font-size: 11px; }
    .results-quote { padding: 20px 16px; }
    .quote-body { font-size: 13px; }

    .section { padding: 48px 0; }
    .sec-title { font-size: clamp(24px, 6.5vw, 32px); letter-spacing: -1px; }
    .concept-title { font-size: clamp(15px, 4.8vw, 18px); }

    .prod-stage { min-height: 180px; margin: 0; }
    .prod-body { padding: 18px 18px 22px; }
    .prod-body .prod-name { font-size: 20px; }
    .prod-desc { font-size: 12px; }

    .v2-impact-line { font-size: clamp(40px, 16vw, 72px); letter-spacing: -1px; }

    .custom-slots { grid-template-columns: 1fr; }
    .custom-slot { font-size: 13px; padding: 10px 8px; }
}

/* 320px (iPhone SE 1세대 / 초소형) — 최후 안전장치 */
@media (max-width: 360px) {
    .wrap { padding: 0 12px; }

    .hero-title { font-size: clamp(18px, 6vw, 22px); letter-spacing: -0.4px; }
    .hero-cta { padding: 10px 16px; font-size: 12px; }
    .hero-eyebrow { font-size: 11px; padding: 5px 10px; }

    .results-headline { font-size: clamp(20px, 7.5vw, 26px); }
    .results-figure { font-size: clamp(40px, 14vw, 52px); }
    .results-stats { flex-direction: column; gap: 12px; align-items: flex-start; }

    .sec-title { font-size: clamp(22px, 6.5vw, 28px); }
    .concept-title { font-size: clamp(14px, 4.5vw, 16px); }

    .v2-impact-line { font-size: clamp(34px, 14vw, 60px); }
}

/* ============================================
   섹션 공통 (디자인 시스템)
============================================ */
.section {
    padding: 100px 0;
    background: var(--white);
}
.section--alt-bg {
    background: var(--chalk);
}
.section.alt {
    background: var(--chalk);
}

/* 통일 섹션 헤더 */
.sec-head {
    margin-bottom: 72px;
    max-width: 820px;
}
.sec-head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.sec-kicker {
    font-size: 12px;
    font-weight: 800;
    color: var(--violet-deep);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    background: rgba(52,199,123,0.08);
    border: 1px solid rgba(52,199,123,0.18);
    border-radius: 999px;
}
.sec-kicker .dot {
    width: 6px; height: 6px;
    background: var(--violet);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52,199,123,0.15), 0 0 16px var(--violet);
    flex-shrink: 0;
    animation: kickerPulse 2.4s ease-in-out infinite;
}
@keyframes kickerPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52,199,123,0.15), 0 0 16px var(--violet); }
    50%      { box-shadow: 0 0 0 6px rgba(52,199,123,0.05), 0 0 24px var(--violet); }
}
.sec-title {
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 120%;
    color: var(--ink);
    margin-bottom: 22px;
}
.sec-title .accent {
    color: var(--violet);
    position: relative;
    display: inline-block;
}
/* 단어 강조 라인 효과 — 스크롤 인뷰 시 좌→우로 그어짐 */
.sec-title .accent::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 4px;
    background: linear-gradient(90deg, var(--turbo) 0%, var(--violet-light) 100%);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.sec-head.is-visible .sec-title .accent::after,
.reveal.is-visible .sec-title .accent::after {
    transform: scaleX(1);
}
.sec-sub {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray-600);
    font-weight: 500;
    letter-spacing: -0.3px;
    max-width: 640px;
}
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

/* ============================================
   2.1 PROBLEM — 문제 공감
============================================ */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 56px;
}
.problem-card {
    background: var(--white);
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid rgba(52,199,123,0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    position: relative;
    overflow: hidden;
}
.problem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(52,199,123,0.07) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.problem-card:hover {
    transform: translateY(-6px);
    border-color: rgba(52,199,123,0.25);
    box-shadow: 0 20px 40px rgba(52,199,123,0.1);
}
.problem-card:hover::before { opacity: 1; }
.problem-icon {
    font-size: 36px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.problem-card:hover .problem-icon { transform: scale(1.15) rotate(-3deg); }
.problem-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.3px;
    color: var(--ink);
}
.problem-insight {
    text-align: center;
    padding: 40px 24px;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(52,199,123,0.12);
}
.problem-insight-line {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 4px;
}
.problem-insight-line.problem-insight-strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.8px;
    margin-top: 8px;
    margin-bottom: 0;
}
.problem-insight .accent {
    color: var(--violet);
}
.problem-insight .strike {
    text-decoration: line-through;
    text-decoration-color: var(--violet-light);
    text-decoration-thickness: 2px;
    color: var(--gray-400);
}

/* ============================================
   2.2 CONCEPT — 핵심 컨셉
============================================ */
.concept-band {
    background: var(--chalk);
    color: var(--ink);
    padding: 100px 24px;
    /* text-align: center; */
    position: relative;
    overflow: hidden;
}
.concept-band::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(52,199,123,0.18) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}
.concept-kicker {
    font-size: 12px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 2px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}
.concept-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.8px;
    color: var(--ink);
    max-width: 900px;
    position: relative;
    z-index: 2;
}
.concept-brand {
    color: var(--violet);
    font-weight: 800;
}
.concept-em {
    color: var(--violet-deep);
    font-weight: 800;
}

/* ============================================
   2.5 PRODUCT DETAIL
============================================ */
.product-detail {
    background: var(--white);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.prod-card {
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}
.prod-card--home {
    background: var(--chalk);
    color: var(--ink);
    padding: 0;                      /* 이미지가 카드 끝까지 확장 */
    gap: 0;                          /* 스테이지와 본문이 페이드로 연결 */
    overflow: hidden;
}
.prod-card--study {
    background: linear-gradient(160deg, var(--turbo) 0%, var(--turbo) 100%);
    color: var(--ink);
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.prod-card--brick {
    background: linear-gradient(160deg, var(--violet-deep) 0%, var(--ink) 100%);
    color: var(--white);
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.prod-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--violet);
}
.prod-card--study .prod-label { color: var(--violet-deep); }
.prod-card--brick .prod-label { color: var(--violet-light); }

.prod-name {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
}
.prod-name-sub {
    color: var(--violet);
    font-weight: 800;
}
.prod-card--study .prod-name-sub { color: var(--violet-deep); }
.prod-card--brick .prod-name-sub { color: var(--violet-light); }

.prod-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600);
    font-weight: 500;
    margin-top: auto;
}
.prod-card--brick .prod-desc { color: rgba(255,255,255,0.7); }

/* ── 3카드 공통: 시각 영역(stage) ── */
/* 이미지가 카드 가장자리까지 꽉 차게 fill — margin/border-radius 제거 */
.prod-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: rgba(255,255,255,0.4);
    overflow: hidden;
    isolation: isolate;
}
/* 카드별 stage 톤 미세 조정 (placeholder 단계용, 이미지 들어가면 가려짐) */
.prod-card--home .prod-stage {
    background: rgba(255,255,255,0.55);
}
.prod-card--study .prod-stage {
    background: rgba(255,255,255,0.4);
}
.prod-card--brick .prod-stage {
    background: rgba(255,255,255,0.04);
}
/* 이미지/영상/SVG/picture 어떤 형태로든 stage를 100% 채우게 fill —
 absolute + inset:0 으로 stage 좌표계에 정확히 채움, object-fit: cover로 비율 유지하며 잘라냄 */
.prod-stage > img,
.prod-stage > video,
.prod-stage > svg,
.prod-stage > picture,
.prod-stage > picture > img,
.prod-stage > a,
.prod-stage > a > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* 이미지가 들어가면 placeholder 라벨 자동 숨김 — HTML 그대로 두어도 됨 */
.prod-stage:has(> img, > picture, > video, > svg, > a) .prod-stage-label {
    display: none;
}

/* placeholder 안내 라벨 — 이미지 없을 때만 노출 */
.prod-stage-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed rgba(15,42,30,0.2);
    backdrop-filter: blur(4px);
}
.prod-card--brick .prod-stage-label {
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.prod-stage-label::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: 0.6;
}

/* ── 3카드 공통: 본문 영역 ── */
.prod-body {
    padding: 24px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
}
.prod-card--home .prod-body { background: var(--chalk); }
.prod-card--study .prod-body { background: var(--turbo); }
.prod-card--brick .prod-body { background: var(--ink); }
.prod-body .prod-name { font-size: 28px; }
.prod-body .prod-desc { margin-top: 6px; }

/* ============================================
   3. SERVICES — 가로 캐러셀 (카테고리 6장)
============================================ */
.services-carousel {
    position: relative;
    margin-top: 32px;
}

/* 트랙: 가로 스크롤 + 스크롤 스냅 */
.services-track {
    display: flex;
    gap: 20px;
    padding: 8px 24px 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.services-track::-webkit-scrollbar { display: none; }

/* 데스크톱: 한 화면에 카드 ~2.5장, 활성 카드는 가운데 */
@media (min-width: 1025px) {
    .services-track {
        /* 좌우 패딩을 카드 약 1장 폭으로 — 첫 카드도 가운데 정렬 가능 */
        padding: 8px calc((100vw - 460px) / 2) 32px;
        gap: 24px;
    }
}

/* 카드 */
.srv-card {
    flex: 0 0 calc((100vw - 48px - 20px) / 2.4);
    max-width: 460px;
    min-height: 360px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    opacity 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: grab;
}
.srv-card:active { cursor: grabbing; }

/* 데스크톱 카드 사이즈 */
@media (min-width: 1025px) {
    .srv-card {
        flex: 0 0 460px;
        min-height: 380px;
    }
}

/* 활성(가운데) 카드 — 살짝 들어올림 */
.srv-card.is-active {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 42, 30, 0.08);
    border-color: rgba(52, 199, 123, 0.25);
}

/* 카드 헤드 — 아이콘 + 카테고리명 */
.srv-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.srv-card-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(52, 199, 123, 0.1);
    display: grid;
    place-items: center;
    color: var(--violet);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}
.srv-card-icon .ico {
    width: 24px; height: 24px;
    stroke-width: 1.75;
}
.srv-card.is-active .srv-card-icon {
    background: var(--violet);
    color: var(--white);
    transform: rotate(-4deg);
}
.srv-card-cat {
    font-size: 13px;
    font-weight: 800;
    color: var(--gray-600);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.srv-card.is-active .srv-card-cat {
    color: var(--violet-deep);
}

/* 카드 헤드라인 */
.srv-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.7px;
    line-height: 1.3;
    margin: 0;
}

/* 카드 리스트 */
.srv-card-list {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--gray-200);
    padding-top: 22px;
}
.srv-card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--gray-700);
    font-weight: 600;
    letter-spacing: -0.2px;
}
.srv-card-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.6;
}
.srv-card-list li span { flex: 1; }

/* 태그 (NEW / HOT / CORE / BETA) */
.srv-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    background: var(--violet);
    color: var(--white);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    line-height: 1.4;
    text-transform: uppercase;
    font-style: normal;
}
.srv-tag--beta {
    background: var(--turbo);
    color: var(--ink);
}

/* 컨트롤 (좌측 화살표 + 도트 + 우측 화살표) */
.services-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 24px;
}
.srv-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 42, 30, 0.06);
}
.srv-arrow:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(52, 199, 123, 0.25);
}
.srv-arrow:active {
    transform: scale(0.96);
}
.srv-arrow .ico {
    width: 20px; height: 20px;
    stroke-width: 2;
}

.srv-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.srv-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
    overflow: hidden;
    position: relative;
}
.srv-dot:hover { background: var(--gray-400); }
.srv-dot.is-active {
    width: 40px;
    background: var(--gray-200);
}
.srv-dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet);
    transform-origin: left center;
    animation: srvDotProgress 5s linear forwards;
}
.services-carousel.is-paused .srv-dot.is-active::after {
    animation-play-state: paused;
}
@keyframes srvDotProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
    .services-track { scroll-behavior: auto; }
    .srv-card,
    .srv-card-icon { transition: none; }
    .srv-card.is-active { transform: none; }
    .srv-dot.is-active::after { animation: none; opacity: 0; }
}

/* 태블릿 */
@media (max-width: 1024px) {
    .services-track {
        /* 카드 1장 폭을 기준으로 좌우 대칭 패딩 */
        padding: 8px calc((100vw - ((100vw - 68px) / 1.6)) / 2) 32px;
    }
    .srv-card {
        flex: 0 0 calc((100vw - 48px - 20px) / 1.6);
        min-height: 340px;
        padding: 32px 28px 28px;
    }
    .srv-card-title { font-size: 22px; }
}

/* 모바일 — 한 카드 거의 풀폭 + 다음 카드 살짝 엿보기 */
@media (max-width: 480px) {
    .services-carousel { margin-top: 24px; }
    .services-track {
        gap: 14px;
        /* 모바일은 카드가 거의 풀폭 → 24px 좌우 패딩 (다음 카드 엿보기) */
        padding: 8px 24px 24px;
    }
    .srv-card {
        flex: 0 0 calc(100vw - 48px);
        min-height: 320px;
        padding: 28px 24px 24px;
        border-radius: 20px;
    }
    .srv-card-title { font-size: 20px; line-height: 1.35; }
    .srv-card-list { padding-top: 18px; gap: 10px; }
    .srv-card-list li { font-size: 13px; }
    .srv-card-icon { width: 42px; height: 42px; }
    .srv-card-icon .ico { width: 22px; height: 22px; }
    .srv-card-cat { font-size: 12px; }
    .services-controls { gap: 12px; padding: 0 16px; }
    .srv-arrow { width: 38px; height: 38px; }
    .srv-arrow .ico { width: 16px; height: 16px; }
}

/* iPhone Mini ~ 380px */
@media (max-width: 380px) {
    .srv-card { padding: 24px 20px 22px; min-height: 300px; }
    .srv-card-title { font-size: 18px; }
}


/* ============================================
   4. SOLUTIONS / 운영 구조 4단계
============================================ */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.sol-grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sol-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.2s;
}
.sol-card:hover {
    border-color: var(--violet);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(52,199,123,0.15);
}
.sol-step {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.sol-illust {
    aspect-ratio: 16/12;
    border-radius: 12px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    font-size: 60px;
    position: relative;
    overflow: hidden;
}
.sol-illust.i1 { background: linear-gradient(135deg, var(--violet-light) 0%, var(--chalk) 100%); }
.sol-illust.i2 { background: linear-gradient(135deg, var(--ink) 0%, var(--violet-deep) 100%); }
.sol-illust.i3 { background: linear-gradient(135deg, var(--chalk) 0%, var(--violet-light) 100%); }
.sol-illust.i4 { background: linear-gradient(135deg, var(--ink) 0%, var(--violet-deep) 100%); }
.sol-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sol-card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    background: var(--turbo);
    color: var(--ink);
    padding: 1px 7px;
    border-radius: 99px;
    letter-spacing: 0.2px;
    line-height: 1.4;
}
.sol-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sol-card-list li {
    font-size: 14px;
    line-height: 1.6;
    padding: 5px 0 0 16px;
    position: relative;
    color: var(--gray-700);
    font-weight: 500;
}
.sol-card-list li::before {
    content: '·';
    position: absolute;
    left: 4px; top: 5px;
    color: var(--violet);
    font-weight: 800;
}

/* ============================================
   5. SOLO CTA
============================================ */
.solo-cta {
    margin-top: 72px;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
    border-radius: 32px;
    padding: 72px 56px;
    color: var(--white);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.solo-cta::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--turbo) 0%, transparent 70%);
    opacity: 0.3;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    animation: float 9s ease-in-out infinite;
}
.solo-cta::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(125,221,168,0.45) 0%, transparent 70%);
    opacity: 0.6;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    animation: float 11s ease-in-out infinite reverse;
}
.solo-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    background: var(--turbo);
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(212,255,61,0.4);
}
.solo-cta-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.12;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.solo-cta-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.solo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: var(--white);
    color: var(--ink);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    letter-spacing: -0.2px;
}
.solo-cta-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.solo-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.solo-cta-btn:hover::after { transform: translateX(6px); }

/* ============================================
   5.5 RESULTS
============================================ */
.results {
    background: var(--chalk);
    color: var(--ink);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.results::before {
    content: '';
    position: absolute;
    top: 50%; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212,255,61,0.25) 0%, transparent 60%);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    filter: blur(40px);
}
.results-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.results-kicker {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 32px;
}
.results-headline {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.12;
    margin-bottom: 28px;
    color: var(--ink);
}
.results-headline strong {
    color: var(--violet);
    font-weight: 800;
    position: relative;
    display: inline-block;
}
.results-headline strong::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 8px;
    background: var(--turbo);
    z-index: -1;
    opacity: 0.55;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.results-main.is-visible .results-headline strong::after,
.results .reveal.is-visible .results-headline strong::after {
    transform: scaleX(1);
}
.results-figure-wrap {
    display: block;
    margin: 12px 0 4px;
    line-height: 1;
}
.results-figure {
    color: var(--violet);
    font-size: clamp(96px, 11vw, 144px);
    display: inline-block;
    line-height: 0.9;
    letter-spacing: -6px;
    font-variant-numeric: tabular-nums;
    /* background: linear-gradient(180deg, var(--ink) 0%, var(--violet-deep) 60%, var(--violet) 100%); */
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    /* 카운트업 진입 시 살짝 scale + opacity */
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-figure.is-counting {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.results-headline-tail {
    display: block;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--ink);
    letter-spacing: -1.5px;
    margin-top: 8px;
}
/* 카운트 완료 시 살짝 펑 튀는 액센트 */
@keyframes figurePop {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-2px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}
.results-figure.is-popped {
    animation: figurePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* results-stat 숫자도 count-up */
.results-stat-num {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-stat-num.is-counting {
    opacity: 1;
    transform: translateY(0);
}
.results-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-700);
    font-weight: 500;
    margin-bottom: 48px;
}
.results-desc strong {
    color: var(--violet-deep);
    font-weight: 800;
}
.results-stats {
    display: flex;
    gap: 56px;
}
.results-main {}
.results-stat {}
.results-stat-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 6px;
}
.results-stat-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================
   CERTIFICATION (공식 인증 — 마케팅 섹션)
============================================ */
.section--certify { background: var(--chalk); }
.certify-scope {
    display: block; text-align: center; margin: 0 0 44px;
}
.certify-scope span {
    display: inline-block; background: var(--white); color: var(--ink);
    font-size: 17px; font-weight: 700; line-height: 1.5;
    padding: 12px 26px; border-radius: 999px; word-break: keep-all;
    box-shadow: 0 6px 20px rgba(10,31,23,0.05);
}
.certify-scope b { color: var(--violet); font-weight: 700; }
.certify-grid {
    display: flex; gap: 32px; justify-content: center; align-items: flex-start; flex-wrap: wrap;
}
.certify-doc {
    display: block; width: 100%; max-width: 300px;
    border: 1px solid rgba(10,31,23,0.08); border-radius: 10px; overflow: hidden;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(10,31,23,0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.certify-doc:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(10,31,23,0.16); }
.certify-doc img { display: block; width: 100%; height: auto; }

@media (max-width: 720px) {
    .certify-scope { margin-bottom: 32px; }
    .certify-scope span { font-size: 14px; padding: 11px 20px; }
    .certify-grid { gap: 20px; }
    .certify-doc { max-width: 280px; }
}
@media (max-width: 400px) {
    .certify-doc { max-width: 240px; }
}

/* 우측 인용 카드 (캐러셀) — 라이트 톤 */
.results-quote {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 42, 30, 0.04);
    overflow: hidden;
}
/* 큰 인용부호 데코 — 슬라이드 전환마다 반짝 */
.results-quote::before {
    content: '"';
    position: absolute;
    top: -24px;
    right: 16px;
    font-size: 140px;
    line-height: 1;
    font-family: 'Archivo', serif;
    color: var(--violet);
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}
.results-quote.is-stamped::before {
    opacity: 0.12;
    transform: scale(1) rotate(0deg);
}

.quote-stage {
    position: relative;
    min-height: 220px;
    z-index: 2;
}
.quote-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(40px) scale(0.94);
    filter: blur(6px);
    transition:
            opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.5s ease;
    pointer-events: none;
}
.quote-slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
    position: relative;
}
/* 진입 시 본문이 살짝 위에서 떨어져 들어옴 */
.quote-slide.is-active .quote-body {
    animation: quoteBodyIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.quote-slide.is-active .quote-author {
    animation: quoteAuthorIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes quoteBodyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes quoteAuthorIn {
    from {
        opacity: 0;
        transform: translateY(8px) translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}
/* 활성 슬라이드 아바타 — 부드럽게 펄스 */
.quote-slide.is-active .quote-avatar {
    animation: avatarPulse 2.6s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,199,123,0.35); }
    50%      { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(52,199,123,0); }
}
/* 강조 마커 — 활성화 시 좌→우로 채워지는 형광펜 */
.quote-slide.is-active .quote-mark {
    background: linear-gradient(180deg, transparent 60%, rgba(212,255,61,0.6) 60%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    animation: markFill 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
@keyframes markFill {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
}
.quote-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 28px;
}
.quote-mark {
    background: linear-gradient(180deg, transparent 60%, rgba(212,255,61,0.6) 60%);
    padding: 0 2px;
}
.quote-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.quote-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* 아바타별 다양한 그라데이션 (그린 팔레트로 재구성) */
.quote-avatar--1 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--turbo) 85%); }
.quote-avatar--2 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--violet) 85%); }
.quote-avatar--3 { background: radial-gradient(circle at 30% 30%, var(--turbo), var(--violet-deep) 85%); }
.quote-avatar--4 { background: radial-gradient(circle at 30% 30%, var(--violet-light), var(--violet-light) 85%); }
.quote-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 2px;
}
.quote-org {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

/* 도트 인디케이터 — 라이트 톤 */
.quote-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.quote-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: var(--gray-200);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
    overflow: hidden;
    position: relative;
}
.quote-dot:hover { background: var(--gray-400); }
.quote-dot.is-active {
    width: 40px;
    background: var(--gray-200);
}
.quote-dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet);
    transform-origin: left center;
    animation: quoteProgress 6s linear forwards;
}
@keyframes quoteProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.results-quote:hover .quote-dot.is-active::after {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .quote-slide { transition: opacity 0.2s; transform: none; filter: none; }
    .quote-slide.is-active { transform: none; filter: none; }
    .quote-slide.is-active .quote-body,
    .quote-slide.is-active .quote-author,
    .quote-slide.is-active .quote-avatar,
    .quote-slide.is-active .quote-mark {
        animation: none;
    }
    .quote-dot.is-active::after { animation: none; opacity: 0; }
    .results-quote::before { transition: none; }
    .results-figure { opacity: 1; transform: none; transition: none; }
    .results-figure.is-popped { animation: none; }
    .results-stat-num { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   5.3 BENEFITS
============================================ */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.benefit-card {
    background: var(--white);
    border-radius: 22px;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid rgba(52,199,123,0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    position: relative;
    overflow: hidden;
}
.benefit-card::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 3px;
    background: linear-gradient(90deg, var(--violet) 0%, var(--turbo) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(52,199,123,0.18);
    border-color: rgba(52,199,123,0.3);
}
.benefit-card:hover::before { transform: scaleX(1); }
.benefit-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 28px;
    margin: 0 auto 22px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s;
}
.benefit-card:hover .benefit-icon {
    transform: scale(1.1) rotate(-5deg);
}
.benefit-icon--violet      { background: var(--violet); box-shadow: 0 12px 28px rgba(52,199,123,0.3); }
.benefit-icon--ink         { background: var(--ink); box-shadow: 0 12px 28px rgba(15,42,30,0.25); }
.benefit-icon--turbo       { background: var(--turbo); box-shadow: 0 12px 28px rgba(212,255,61,0.4); }
.benefit-icon--violet-light{ background: var(--violet-light); box-shadow: 0 12px 28px rgba(125,221,168,0.4); }
.benefit-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}
.benefit-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--gray-600);
    font-weight: 500;
}

/* ============================================
   RESULTS 내부 포지셔닝 헤더
============================================ */
.results-positioning {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}
.results-mark {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--violet);
    margin: 0 auto 24px;
    border-radius: 2px;
}
.results-positioning-line {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -1px;
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto 16px;
}
.results-positioning-brand {
    color: var(--violet);
    font-weight: 800;
}
.results-positioning-em {
    color: var(--violet);
    font-weight: 800;
    background: linear-gradient(180deg, transparent 60%, rgba(135, 255, 199, 0.4) 60%);
    padding: 0 4px;
}
.results-positioning-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* ============================================
   5.7 PRICING — 2026 강화판
============================================ */
.pricing-section {
    background: var(--chalk);
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
}
/* 백그라운드 데코 — 흐릿한 그린 글로우 */
.pricing-section::before {
    content: "";
    position: absolute;
    top: 10%; left: -10%;
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(52,199,123,0.18) 0%, transparent 65%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.pricing-section::after {
    content: "";
    position: absolute;
    bottom: -10%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,255,61,0.22) 0%, transparent 65%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.pricing-section .wrap { position: relative; z-index: 2; }

/* 페럴랙스 작은 데코 마크 */
.pricing-deco-1, .pricing-deco-2 {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.pricing-deco-1 {
    top: 18%; right: 8%;
    width: 80px; height: 80px;
    background: var(--turbo);
    border-radius: 28px;
    opacity: 0.4;
    box-shadow: 0 20px 40px rgba(212,255,61,0.3);
    transform: rotate(15deg);
}
.pricing-deco-2 {
    bottom: 22%; left: 6%;
    width: 64px; height: 64px;
    background: var(--violet);
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 16px 32px rgba(52,199,123,0.4);
}
@media (max-width: 900px) {
    .pricing-deco-1 { width: 50px; height: 50px; top: 10%; right: 4%; }
    .pricing-deco-2 { width: 40px; height: 40px; bottom: 12%; left: 4%; }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}
.pricing-grid--2 {
    grid-template-columns: 1fr 1.05fr;
    max-width: 960px;
    gap: 28px;
    align-items: stretch;
}
.plan {
    background: var(--white);
    border: 1px solid rgba(15,42,30,0.06);
    border-radius: 28px;
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,42,30,0.04);
}
/* 카드 호버 시 — 미묘하게 떠오르고 보더 그린 액센트 */
.plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 64px rgba(52,199,123,0.18);
    border-color: rgba(52,199,123,0.4);
}
/* 카드 우상단 데코 — 호버 시 부드럽게 회전 */
.plan::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(52,199,123,0.12) 0%, transparent 70%);
    border-radius: 50%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.plan:hover::before {
    transform: scale(1.3) translate(-20px, 20px);
}

.plan--featured {
    background:
            radial-gradient(ellipse at top right, rgba(52,199,123,0.18) 0%, transparent 50%),
            var(--ink);
    color: var(--white);
    border-color: var(--ink);
    box-shadow: 0 24px 56px rgba(15,42,30,0.32);
}
.plan--featured::before {
    background: radial-gradient(circle, rgba(212,255,61,0.18) 0%, transparent 70%);
}
.plan--featured:hover {
    box-shadow: 0 36px 72px rgba(15,42,30,0.45), 0 0 0 1px rgba(212,255,61,0.3);
    border-color: rgba(212,255,61,0.25);
}

/* featured 카드에 미묘한 노이즈 텍스처 — SVG 인라인 */
.plan--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.plan-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--turbo);
    color: var(--ink);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.4;
    z-index: 3;
    box-shadow: 0 6px 20px rgba(212,255,61,0.5), 0 0 0 4px rgba(212,255,61,0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.plan-badge .ico {
    width: 12px; height: 12px;
}
.plan-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.plan-name::before {
    content: "";
    width: 22px; height: 1.5px;
    background: var(--violet);
    display: inline-block;
}
.plan--featured .plan-name { color: var(--turbo); }
.plan--featured .plan-name::before { background: var(--turbo); }

.plan-capacity {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}
.plan-capacity-num {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -4px;
    line-height: 1;
    color: var(--ink);
}
.plan--featured .plan-capacity-num { color: var(--white); }
.plan-capacity-unit {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1px;
}
.plan--featured .plan-capacity-unit { color: var(--white); }
.plan-capacity-desc {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 28px;
}
.plan--featured .plan-capacity-desc { color: rgba(255,255,255,0.55); }

/* === 가격 강조 (정가 → 프로모션가) === */
.plan-price-original {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.plan-price-original-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--gray-400);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.plan--featured .plan-price-original-label { color: rgba(255,255,255,0.45); }
.plan-price-original-num {
    font-size: 20px;
    font-weight: 500;
    color: var(--gray-400);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
}
.plan--featured .plan-price-original-num { color: rgba(255,255,255,0.45); }
.plan-price-promo-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--turbo) 0%, #c7f034 100%);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    line-height: 1.3;
    box-shadow: 0 6px 16px rgba(212,255,61,0.3);
}
.plan-price-promo-label::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--ink);
    border-radius: 50%;
}
.plan--featured .plan-price-promo-label {
    background: linear-gradient(135deg, var(--turbo) 0%, #c7f034 100%);
    color: var(--ink);
    box-shadow: 0 6px 20px rgba(212,255,61,0.5);
}
.plan-price-promo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.plan-price-hero-num {
    font-size: clamp(64px, 7vw, 84px);
    font-weight: 800;
    letter-spacing: -5px;
    line-height: 0.95;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    background: linear-gradient(180deg, var(--ink) 0%, var(--violet-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right:1%;
}
.plan--featured .plan-price-hero-num {
    background: linear-gradient(180deg, var(--white) 0%, var(--turbo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.plan-price-hero-unit {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-600);
    letter-spacing: -0.4px;
}
.plan--featured .plan-price-hero-unit { color: rgba(255,255,255,0.6); }
.plan-price-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--violet-deep);
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.2px;
}
.plan-price-save::before {
    content: "↓";
    font-size: 14px;
    font-weight: 900;
}
.plan--featured .plan-price-save { color: var(--turbo); }

/* === 플랜 푸터 (기준 인원 + 추가 비용) === */
.plan-meta {
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px dashed var(--gray-200);
}
.plan--featured .plan-meta { border-top-color: rgba(255,255,255,0.12); }
.plan-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.plan-meta-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: -0.2px;
}
.plan--featured .plan-meta-label { color: rgba(255,255,255,0.55); }
.plan-meta-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
}
.plan--featured .plan-meta-value { color: var(--white); }

.plan-price {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}
.plan--featured .plan-price { border-bottom-color: rgba(255,255,255,0.1); }
.plan-price-num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--violet);
}
.plan--featured .plan-price-num { color: var(--turbo); }
.plan-price-unit {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
    margin-left: 4px;
}
.plan--featured .plan-price-unit { color: rgba(255,255,255,0.5); }
.plan-price-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 800;
    background: var(--chalk);
    color: var(--violet);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    vertical-align: middle;
    line-height: 1.4;
}
.plan-price-tag--accent {
    background: var(--turbo);
    color: var(--ink);
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex: 1;
}
.plan-features li {
    font-size: 14.5px;
    line-height: 1.6;
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--gray-700);
    font-weight: 500;
    border-bottom: 1px solid rgba(15,42,30,0.04);
}
.plan-features li:last-child { border-bottom: none; }
.plan--featured .plan-features li {
    color: rgba(255,255,255,0.78);
    border-bottom-color: rgba(255,255,255,0.06);
}
.plan-features li .ico {
    position: absolute;
    left: 0; top: 12px;
    color: var(--violet);
    width: 16px; height: 16px;
    padding: 2px;
    background: rgba(52,199,123,0.12);
    border-radius: 50%;
}
.plan--featured .plan-features li .ico {
    color: var(--turbo);
    background: rgba(212,255,61,0.12);
}

.plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 18px 24px;
    background: var(--chalk);
    color: var(--ink);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
    letter-spacing: -0.2px;
}
.plan-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}
.plan-btn:hover {
    background: var(--ink);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,42,30,0.25);
}
.plan-btn:hover::after { transform: translateX(4px); }

.plan-btn--primary {
    background: var(--turbo);
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(212,255,61,0.35);
}
.plan-btn--primary:hover {
    background: var(--turbo);
    color: var(--ink);
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(212,255,61,0.5);
}

.pricing-footnote {
    text-align: center;
    margin-top: 56px;
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
    padding: 16px 24px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    display: inline-block;
    width: auto;
    border: 1px solid rgba(15,42,30,0.06);
}
.pricing-footnote-wrap { text-align: center; margin-top: 56px; }

/* ============================================
   5.8 FAQ
============================================ */
.faq-section {
    background: var(--chalk);
    padding: 100px 0;
}
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--white);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.faq-item[open] {
    border-color: var(--violet-light);
}
.faq-q {
    padding: 22px 28px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    letter-spacing: -0.3px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--chalk);
    color: var(--violet);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    transition: transform 0.25s, background 0.25s;
    flex-shrink: 0;
}
.faq-item[open] .faq-icon {
    background: var(--violet);
    color: var(--white);
    transform: rotate(45deg);
}
.faq-a {
    padding: 0 28px 24px 28px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--gray-700);
    font-weight: 500;
}

/* ============================================
   6. FINAL CTA
============================================ */
.final-cta {
    background: var(--white);
    padding: 100px 0 120px;
}
.final-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cta-block {
    border-radius: 32px;
    padding: 56px 44px;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block:hover {
    transform: translateY(-6px);
}
.cta-block.dark {
    background: var(--chalk);
    color: var(--ink);
    border: 1px solid rgba(15,42,30,0.06);
}
.cta-block.dark:hover {
    box-shadow: 0 24px 56px rgba(52,199,123,0.18);
}
.cta-block.dark::before {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
    opacity: 0.18;
    border-radius: 50%;
    filter: blur(20px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block.dark:hover::before {
    transform: scale(1.2) translate(-10px, -10px);
}
.cta-block.accent {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
    color: var(--white);
}
.cta-block.accent:hover {
    box-shadow: 0 28px 64px rgba(31,157,92,0.4);
}
.cta-block.accent::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--turbo) 0%, transparent 70%);
    opacity: 0.35;
    border-radius: 50%;
    filter: blur(20px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block.accent:hover::before {
    transform: scale(1.3) translate(10px, 10px);
}
/* accent에 미묘한 노이즈 */
.cta-block.accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}
.cta-block-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: fit-content;
    color: var(--violet-deep);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(15,42,30,0.06);
}
.cta-block.accent .cta-block-tag {
    background: rgba(255,255,255,0.95);
    color: var(--violet-deep);
}
.cta-block-tag.light {
    background: var(--turbo);
    color: var(--ink);
}
.cta-block-title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 120%;
    margin-top: 24px;
    position: relative;
    z-index: 2;
}
.cta-block-desc {
    font-size: 15px;
    color: var(--gray-700);
    line-height: 1.7;
    font-weight: 500;
    margin-top: 16px;
    position: relative;
    z-index: 2;
}
.cta-block.accent .cta-block-desc {
    color: rgba(255,255,255,0.88);
}
.cta-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
    cursor: pointer;
    width: fit-content;
    margin-top: 36px;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block-btn::after {
    content: "→";
    font-weight: 900;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-block-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.cta-block-btn:hover::after { transform: translateX(6px); }
.cta-block-btn.dark {
    background: var(--ink);
    color: var(--white);
}
.cta-block-btn.light {
    background: var(--ink);
    color: var(--turbo);
}

/* ============================================
   도입 문의 모달
============================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal.is-open {
    display: flex;
    animation: modalFadeIn 0.25s ease;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 30, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.modal-dialog {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 44px 40px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border: none;
    background: var(--chalk);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 400;
    color: var(--gray-700);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.modal-close:hover {
    background: var(--violet);
    color: var(--white);
}
.modal-kicker {
    font-size: 14px;
    font-weight: 800;
    color: var(--violet);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.8px;
    margin-bottom: 8px;
}
.modal-desc {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* 폼 */
.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
}
.req {
    color: var(--violet);
    margin-left: 2px;
}
.form-input {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.form-input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(52, 199, 123, 0.15);
}
.form-input.is-invalid {
    border-color: #E53E3E;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}
.form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}
.form-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.chip {
    cursor: pointer;
    user-select: none;
}
.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.chip span {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--white);
    transition: all 0.18s;
}
.chip:hover span { border-color: var(--violet-light); }
.chip input:checked + span {
    background: var(--violet);
    color: var(--white);
    border-color: var(--violet);
}
.form-submit {
    margin-top: 8px;
    padding: 15px 24px;
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
}
.form-submit:hover {
    background: var(--violet);
    transform: translateY(-1px);
}
.form-privacy {
    font-size: 14px;
    color: var(--gray-400);
    text-align: center;
    margin-top: 4px;
    line-height: 1.5;
}

/* 완료 화면 */
.modal-success {
    text-align: center;
    padding: 24px 8px;
    animation: successFadeIn 0.4s ease;
}
@keyframes successFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--chalk);
    color: var(--violet);
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.success-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.success-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 32px;
}
.success-desc strong {
    color: var(--ink);
    font-weight: 800;
}

/* ============================================
   스크롤 애니메이션 — 2026 풀세트
============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 좌→우 슬라이드 인 */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 우→좌 슬라이드 인 */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* 스케일 + 페이드 */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}
/* 블러 + 페이드 — 글자 강조 */
.reveal-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.38s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.58s; }
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* 페럴랙스 — JS로 --scroll-y CSS var 주입 */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* 스크롤 진행도에 따른 element 회전/스케일 — 데코용 */
.floating-deco {
    animation: float 8s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur,
    .reveal-stagger > *, [data-parallax], .floating-deco {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   FOOTER
============================================ */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,0.5);
    padding: 56px 0 40px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 0;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-logo { height: 26px; width: auto; opacity: 0.9; align-self: flex-start; }
.footer-info { line-height: 1.9; }
.footer-info b { color: rgba(255,255,255,0.85); font-weight: 700; }

/* 하단 정책 링크 + 카피라이트 */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.4); }

/* ============================================
   반응형
============================================ */
@media (max-width: 1100px) {
    .header-logo-tag { display: none; }
    .header-nav { gap: 16px; }
    .header-nav li { font-size: 14px; }
    .header-select { display: none; }
}
@media (max-width: 1024px) {
    .header-nav { gap: 14px; }
    .header-nav li { font-size: 14px; }
    .sol-grid { grid-template-columns: repeat(3, 1fr); }
    .sol-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .problem-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr; }
    .results-grid { grid-template-columns: 1fr; gap: 48px; }
    .pricing-section { padding: 80px 0 60px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
    .pricing-grid--2 { grid-template-columns: 1fr; max-width: 460px; gap: 20px; }
    .plan { padding: 40px 28px; border-radius: 24px; }
    .plan-price-hero-num { font-size: 64px; letter-spacing: -4px; }
    .plan-capacity-num { font-size: 64px; }
    .sec-title { font-size: 40px; letter-spacing: -1.6px; }
    .results-headline { font-size: 44px; }
    .results-figure { font-size: 80px; }
    .concept-title { font-size: 26px; }
    .results-positioning-line { font-size: 28px; }
}
@media (max-width: 900px) {
    .header { padding: 0; }
    .header-inner { padding: 12px 16px; gap: 12px; }
    .header.is-scrolled .header-inner { padding: 10px 16px; }
    .header-logo-tag { display: none; }
    .header-logo img { height: 24px; }
    /* 모바일에서 로고를 좌측 끝으로, 우측 그룹은 우측 끝으로 */
    .header-logo { margin-right: auto; }
    /* 모바일에서 데스크톱 nav 숨김 */
    .header-nav { display: none; }
    /* 햄버거 버튼 노출 (CSS 뒤쪽 정의를 이기기 위해 !important) */
    .header-burger { display: inline-flex !important; }
    /* CTA는 살짝 작게 */
    .header-cta { padding: 8px 16px; font-size: 13px; }

    /* 모바일 헤더: sticky 유지 (overflow-x는 별도 처리)
       hide-on-scroll-down은 transform만으로 */
    .header {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s, padding 0.3s;
    }
    .header.is-hidden {
        transform: translateY(-100%);
    }

    .header-inner { gap: 10px; }
    /* .hero { padding: 60px 24px 80px; } */
    .hero-shape-left, .hero-shape-right { display: none; }
    .hero-title { font-size: 28px; letter-spacing: -1px; }
    .hero-badges { gap: 8px; }
    .hero-badge { font-size: 14px; padding: 6px 12px; }
    .section { padding: 60px 0; }
    .sec-head { margin-bottom: 44px; }
    .sec-title { font-size: 32px; letter-spacing: -1.2px; }
    .sec-sub { font-size: 15px; }
    .sol-grid { grid-template-columns: 1fr 1fr; }
    .sol-grid--4 { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .benefit-card { padding: 24px 18px; }
    .problem-insight-line { font-size: 16px; }
    .problem-insight-line.problem-insight-strong { font-size: 20px; }
    .concept-band { padding: 60px 24px; }
    .concept-title { font-size: 20px; line-height: 1.6; }
    .results-positioning-line { font-size: 22px; line-height: 1.5; }
    .results-positioning { margin-bottom: 56px; }
    .final-cta-grid { grid-template-columns: 1fr; }
    .solo-cta { padding: 40px 28px; }
    .solo-cta-title { font-size: 22px; }
    .cta-block { padding: 36px 28px; min-height: auto; }
    .cta-block-title { font-size: 22px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .results { padding: 60px 0; }
    .results-headline { font-size: 36px; }
    .results-figure { font-size: 64px; }
    .results-stats { gap: 32px; flex-wrap: wrap; }
    .results-stat-num { font-size: 26px; }
    .quote-body { font-size: 14px; }
    .pricing-section, .faq-section { padding: 60px 0; }
    .faq-q { font-size: 14px; padding: 18px 22px; }
    .faq-a { padding: 0 22px 20px 22px; font-size: 14px; }
}

/* ============================================
   라인 아이콘 시스템
   - 모든 아이콘은 <svg><use href="#icon-X"/></svg> 형태로 사용
   - currentColor 상속 → 부모 색상 자동 적용
============================================ */
.ico {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* 사용처별 아이콘 크기 — 컨텍스트에 따라 자동 적용 */
.header-icon .ico { width: 18px; height: 18px; }
.problem-icon .ico { width: 36px; height: 36px; stroke-width: 1.5; color: var(--violet); }
.sol-illust .ico { width: 80px; height: 80px; stroke-width: 1.25; opacity: 0.85; }
.benefit-icon .ico { width: 28px; height: 28px; stroke-width: 1.75; color: var(--white); }
.benefit-icon--turbo .ico { color: var(--ink); }     /* turbo 배경에는 어두운 아이콘 */
.hero-badge .ico { width: 14px; height: 14px; stroke-width: 2; }
.plan-features .ico { width: 14px; height: 14px; stroke-width: 2.25; color: var(--violet); }
.plan--featured .plan-features .ico { color: var(--turbo); }
.plan-badge .ico,
.solo-cta-badge .ico { width: 13px; height: 13px; stroke-width: 2; }
.home-chip-info .ico { width: 12px; height: 12px; stroke-width: 2.25; }
/* ============================================
   V2 EDITORIAL — PITAPAT 스타일 임팩트 요소
   /OUR WORK · WE MAKE / DAILY / POSS·BLE · /SEVEN DOT 케이스
   ============================================ */
.v2-display {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    line-height: 0.92;
}

/* /OUR WORK 슬래시 헤딩 영역 */
.v2-slash-section {
    padding: 80px 24px 60px;
    background: var(--white);
}
.v2-slash-section--alt { background: var(--chalk); }
.v2-slash-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.v2-slash-title {
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: -2px;
    color: var(--violet);
    line-height: 1;
    display: inline-block;
}
/* .v2-slash-title::before {
  content: '';
  color: var(--violet);
  margin-right: 6px;
} */
.v2-slash-text {
    margin-top: 20px;
    max-width: 520px;
    line-height: 1.7;
    color: var(--gray-700);
    font-weight: 500;
}
.v2-slash-text strong {
    color: var(--violet);
    font-weight: 800;
}
.v2-slash-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: filter 0.15s, transform 0.15s;
    cursor: pointer;
    border: none;
    font-family: inherit;
    margin-top:32px;
}
.v2-slash-link:hover {
    filter: brightness(0.92);
    transform: translateX(4px);
}
.v2-slash-link .ico { width: 16px; height: 16px; }

/* WE MAKE / DAILY / POSS·BLE 임팩트 텍스트 */
.v2-impact {
    padding: 100px 24px 120px;
    background: var(--white);
    overflow: hidden;
}
.v2-impact-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.v2-impact-line {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--violet);
}
.v2-impact-line.l1 { text-align: left; }
.v2-impact-line.l2 {
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 2px var(--violet);
    margin: 6px 0;
}
.v2-impact-line.l3 { text-align: right; }
.v2-impact-line .slash { color: var(--turbo); }
.v2-impact-dot {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--turbo);
    top: 38%;
    right: 6%;
}

/* /SEVEN DOT 풀스크린 케이스 영역 */
.v2-case {
    padding: 60px 24px 80px;
    background: var(--white);
}
.v2-case-stage {
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16/8;
    border-radius: 24px;
    background: var(--ink);
    background-image:
            radial-gradient(circle at 30% 40%, rgba(52,199,123,0.4) 0%, transparent 50%),
            radial-gradient(circle at 70% 60%, rgba(212,255,61,0.18) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.v2-case-label {
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--white);
    letter-spacing: -2px;
    text-align: center;
    line-height: 0.95;
}
.v2-case-label::before {
    content: '/';
    color: var(--violet-light);
    margin-right: 6px;
}
.v2-case-tags-glass {
    position: absolute;
    bottom: 24px; left: 24px;
    display: flex;
    gap: 8px;
}
.v2-case-tags-glass span {
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
}
.v2-case-meta {
    max-width: 1200px;
    margin: 24px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.v2-case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.v2-case-tag {
    padding: 6px 14px;
    background: var(--chalk);
    color: var(--violet);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.v2-case-desc {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
}
.v2-case-desc strong { color: var(--violet); font-weight: 800; }

/* 반응형 */
@media (max-width: 900px) {
    .v2-slash-section { padding: 60px 20px 40px; }
    .v2-slash-inner { flex-direction: column; align-items: flex-start; }
    .v2-impact { padding: 60px 20px 80px; }
    .v2-impact-line { letter-spacing: -2px; }
    .v2-impact-line.l2 { -webkit-text-stroke-width: 1.5px; }
    .v2-case { padding: 40px 20px 60px; }
    .v2-case-stage { aspect-ratio: 4/3; }
    .v2-case-meta { flex-direction: column; gap: 16px; }
}

/* ============================================
   [NEW] SOLUTIONS — Clear 앱 영감 + ecopulse 민트 톤
   다크 페이지 흐름 속 라이트 섹션으로 분위기 전환
============================================ */
.section--solutions {
    position: relative;
    overflow: hidden;
}
.section--solutions::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle,
    rgba(199, 240, 52, 0.20) 0%,
    rgba(43, 217, 100, 0.18) 40%,
    transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.section--solutions::after {
    content: '';
    position: absolute;
    bottom: -150px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle,
    rgba(26, 77, 62, 0.18) 0%,
    transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.section--solutions .wrap {
    position: relative;
    z-index: 1;
}
.section--solutions .sec-title { color: var(--ink); }
.section--solutions .sec-sub { color: var(--violet-deep); }
.sec-kicker--solutions { color: var(--violet-deep); }

/* 4단계 그리드 */
.flow-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
}

/* 공통 카드 */
.flow-card {
    position: relative;
    border-radius: 28px;
    padding: 32px;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.flow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(15, 42, 30, 0.08);
}
.flow-step {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--violet-deep);
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.flow-card-foot {
    margin-top: auto;
    position: relative;
    z-index: 2;
}
.flow-card-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 6px;
}
.flow-card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.flow-card-desc {
    font-size: 16px;
    color: var(--gray-700);
    line-height: 1.55;
    font-weight: 500;
}

/* 카드 1: 큰 타이포 카드 — 가장 밝은 톤 */
.flow-card--type {
    background: #F0FAF4;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 320px;
}
.flow-headline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 32px;
    margin-bottom: auto;
}
.flow-headline-text {
    font-size: clamp(56px, 7vw, 60px);
    font-weight: 800;
    letter-spacing: -3px;
    color: var(--ink);
    line-height: 1;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
/* 마지막 어절 + caret을 한 단위로 묶어, 줄바꿈 시 같이 이동 */
.flow-headline-last {
    white-space: nowrap;
}
.flow-caret {
    font-size: clamp(56px, 7vw, 60px);
    font-weight: 200;
    color: var(--violet);
    line-height: 1;
    margin-left: 6px;
    animation: flowCaretBlink 1.1s steps(1) infinite;
}
@keyframes flowCaretBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.flow-meta {
    font-size: 16px;
    color: var(--violet-deep);
    font-weight: 500;
    margin-top: 24px;
}

/* 카드 2: 그라디언트 블롭 — ecopulse 그린 그라디언트 */
.flow-card--blob {
    background: var(--ink);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-height: 320px;
    color: var(--white);
}
.flow-card--blob .flow-step { color: var(--violet); }
.flow-card--blob .flow-card-title { color: var(--white); }
.flow-card--blob .flow-card-desc { color: rgba(255,255,255,0.7); }
/* "7" 모양 블롭 — 하루 7개 미션을 시각화
 div의 ::before에 7 글자를 넣고 그라디언트로 색칠 */
.flow-blob {
    position: absolute;
    top: 50%; left: 70%;
    transform: translate(-50%, -55%);
    width: 240px; height: 240px;
    z-index: 1;
    /* 글로우 효과: 7 주위에 부드러운 빛 번짐 */
    filter: drop-shadow(0 0 40px rgba(43, 217, 100, 0.45))
    drop-shadow(0 0 80px rgba(199, 240, 52, 0.25));
}
.flow-blob::before {
    content: '7';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 280px;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -10px;
    font-family: 'Archivo', 'Pretendard Variable', sans-serif;
    /* 그라디언트를 글자에 입힘 */
    background:
            radial-gradient(circle at 30% 30%, var(--turbo) 0%, transparent 55%),
            radial-gradient(circle at 70% 70%, var(--violet-light) 0%, transparent 60%),
            linear-gradient(135deg, var(--turbo) 0%, var(--violet) 50%, var(--violet-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.flow-blob--warm {
    /* warm variant: 글로우 톤 조정 */
    filter: drop-shadow(0 0 40px rgba(43, 217, 100, 0.5))
    drop-shadow(0 0 100px rgba(199, 240, 52, 0.3));
}
/* 기존 ::after 노이즈 오버레이는 원형이라 비활성화 */
.flow-card--blob .flow-blob::after {
    display: none;
}

/* 카드 3: 칩 그리드 — 중간 톤 민트 */
.flow-card--chips {
    background: #DCEFE3;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}
.flow-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #FFFFFF;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(10, 31, 23, 0.04);
}
.flow-chip--active {
    background: var(--violet);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(43, 217, 100, 0.35);
}

/* 카드 4: 차트 — 가장 진한 민트 톤 */
.flow-card--chart {
    background: #C8E8D4;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    overflow: hidden;
    padding-top: 28px;
}
.flow-card--chart .flow-step {
    margin-bottom: 0;
}
.flow-chart {
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
}
.flow-chart-tag {
    position: absolute;
    z-index: 2;
    background: #FFFFFF;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(15, 42, 30, 0.08);
    white-space: nowrap;
}
.flow-chart-tag--start {
    top: 140px;
    left: 38%;
}
.flow-chart-tag--end {
    top: 90px;
    right: 9%;
}

/* 반응형 — 태블릿 */
@media (max-width: 960px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr;
    }
    .flow-card--type, .flow-card--blob {
        grid-row: auto;
        min-height: 260px;
    }
    .flow-card--chips, .flow-card--chart {
        grid-row: auto;
    }
    .flow-headline-text, .flow-caret { font-size: 56px; }
}

/* 반응형 — 모바일 (≤768px: 일반 모바일 + 큰 모바일까지 커버) */
@media (max-width: 768px) {
    .flow-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .flow-card {
        grid-column: 1 / 2 !important;
        min-height: 220px;
        padding: 28px 24px;
        border-radius: 24px;
    }

    /* STEP 01: 큰 타이포 카드 — caret이 텍스트와 같은 줄에 있도록 inline-block화 */
    .flow-card--type { min-height: 280px; }
    .flow-headline {
        display: block;            /* flex → block: caret이 자연스럽게 텍스트 뒤에 따라감 */
        margin-top: 20px;
        margin-bottom: auto;
        line-height: 1.05;
    }
    .flow-headline-text {
        font-size: clamp(40px, 11vw, 56px);
        letter-spacing: -1.8px;
        display: inline;            /* 텍스트와 caret을 inline으로 묶음 */
    }
    .flow-caret {
        font-size: clamp(40px, 11vw, 56px);
        display: inline;
        margin-left: 4px;
    }
    .flow-meta { margin-top: 20px; }

    /* STEP 02: blob 카드 — 타이틀 가독성 확보 */
    .flow-card--blob { min-height: 260px; }
    .flow-blob { width: 180px; height: 180px; }
    .flow-blob::before { font-size: 220px; letter-spacing: -8px; }

    /* STEP 03: 칩 그리드 — 그대로 유지 */
    .flow-card-title { font-size: 20px; }

    /* STEP 04: 차트 카드 — absolute 해제하고 flow 안에 배치 */
    .flow-card--chart {
        padding: 28px 24px;
        min-height: 260px;
        overflow: visible;
        position: relative;
    }
    .flow-card--chart .flow-step {
        margin-bottom: 12px;
    }
    .flow-chart-wrap {
        position: absolute;
        top: 60px;
        left: 16px;
        right: 16px;
        aspect-ratio: 600 / 144;
        max-height: 90px;
        pointer-events: none;
        z-index: 1;
        margin: 0;
    }
    .flow-chart {
        width: 100%;
        height: 100%;
        display: block;
        top:0;
    }
    .flow-chart-tag {
        font-size: 11px;
        padding: 4px 10px;
    }
    .flow-chart-tag--start {
        top: 66%;
        left: 43%;
        bottom: auto;
        transform: translate(-50%, 0);
    }
    .flow-chart-tag--end {
        top: -20%;
        left: 84%;
        right: auto;
        transform: translate(-50%, 0);
    }
    .flow-card--chart .flow-card-foot {
        margin-top: auto;
    }

}

/* 매우 좁은 화면 — caret 폰트만 한 단계 더 축소 */
@media (max-width: 380px) {
    .flow-headline-text, .flow-caret {
        font-size: clamp(34px, 10vw, 44px);
        letter-spacing: -1.4px;
    }
    .flow-chip { font-size: 13px; padding: 7px 13px; }
    .flow-chart-tag { font-size: 10px; padding: 3px 8px; }
}


/* ============================================
   [NEW] SERVICES — 탭 + 좌측 Featured + 우측 그리드
   (이미지 3: 세븐닷 학원 운영 페이지 스타일)
============================================ */
.section--services { background: var(--ink); padding: 100px 0; }
.section--services .sec-title { color: var(--white); }
.section--services .sec-title .accent {
    color: var(--violet);
    -webkit-text-fill-color: var(--violet);
}
.section--services .sec-sub { color: rgba(255, 255, 255, 0.6); }
.section--services .sec-kicker { color: var(--violet); }

/* 상단 탭 (앱 아이콘) */
.svc-tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.svc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.2s ease;
}
.svc-tab:hover { transform: translateY(-2px); }
.svc-tab-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--white);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.svc-tab-ico .ico {
    width: 28px;
    height: 28px;
    stroke: var(--ink);
    stroke-width: 1.75;
}
.svc-tab-ico--featured {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.svc-tab-ico--featured .ico {
    stroke: var(--white);
    fill: var(--white);
}
.svc-tab-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
    position: relative;
}
.svc-tab.is-active .svc-tab-label {
    color: var(--violet);
    font-weight: 700;
}
.svc-tab.is-active .svc-tab-label::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--violet);
    border-radius: 2px;
}
.svc-tab.is-active:not([data-svc-tab="featured"]) .svc-tab-ico {
    box-shadow: 0 8px 20px rgba(52, 199, 123, 0.3);
}

/* 탭 패널 */
.svc-panel {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
    background: var(--chalk);
    border-radius: 28px;
    padding: 14px;
}
.svc-panel[hidden] { display: none; }

/* 좌측 Featured 카드 */
.svc-feature {
    background: linear-gradient(160deg, var(--violet-deep) 0%, var(--violet-deep) 100%);
    border-radius: 20px;
    padding: 40px 32px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    position: relative;
    overflow: hidden;
}
.svc-feature::before {
    content: '';
    position: absolute;
    top: -30%; right: -30%;
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(125, 221, 168, 0.35) 0%, transparent 70%);
    filter: blur(40px);
}
.svc-feature--alt {
    background: linear-gradient(160deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.svc-feature-title {
    font-family: 'Archivo', sans-serif;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 20px;
    position: relative;
}
.svc-feature-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    position: relative;
}

/* 우측 아이템 그리드 */
.svc-items {
    background: var(--white);
    border-radius: 20px;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    align-content: start;
}
.svc-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.svc-item-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--chalk);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(15, 42, 30, 0.06);
}
.svc-item-ico .ico {
    width: 22px;
    height: 22px;
    stroke: var(--violet-deep);
    stroke-width: 1.75;
}
.svc-item-body { flex: 1; min-width: 0; }
.svc-item-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.svc-item-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: 0.5px;
    font-style: normal;
    line-height: 1.5;
}
.svc-item-tag--new {
    background: var(--violet);
    color: var(--white);
}
.svc-item-tag--hot {
    background: var(--turbo);
    color: var(--ink);
}
.svc-item-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--gray-700);
    font-weight: 500;
}

/* 반응형 — 태블릿 */
@media (max-width: 960px) {
    .svc-panel {
        grid-template-columns: 1fr;
    }
    .svc-feature {
        min-height: 220px;
        padding: 32px;
    }
    .svc-feature-title { font-size: 36px; }
    .svc-items { padding: 28px; gap: 24px; }
}

/* 반응형 — 모바일 */
@media (max-width: 640px) {
    .section--services { padding: 60px 0; }
    .svc-tabs { gap: 16px; margin-bottom: 32px; }
    .svc-tab-ico { width: 48px; height: 48px; border-radius: 12px; }
    .svc-tab-ico .ico { width: 24px; height: 24px; }
    .svc-tab-label { font-size: 12px; }
    .svc-panel { padding: 10px; gap: 10px; border-radius: 22px; }
    .svc-feature { padding: 28px 24px; min-height: 180px; }
    .svc-feature-title { font-size: 32px; margin-bottom: 14px; }
    .svc-feature-desc { font-size: 14px; }
    .svc-items {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 20px;
    }
    .svc-item-ico { width: 40px; height: 40px; }
    .svc-item-title { font-size: 14px; }
    .svc-item-desc { font-size: 12.5px; }
}


/* ============================================
   [NEW] SERVICES — 자동 좌우 슬라이드 캐러셀
   6개 패널이 자동으로 좌→우 순환
============================================ */
.svc-carousel {
    position: relative;
}
.svc-carousel-viewport {
    overflow: hidden;
    border-radius: 28px;
}
.svc-carousel-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
}
/* 캐러셀 안에 들어간 패널: 한 슬라이드 = 뷰포트 전체 너비 */
.svc-carousel-track .svc-panel {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
}

/* 카테고리 라벨 (좌측 Feature 카드 상단) */
.svc-feature-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: auto;
    position: relative;
    z-index: 2;
}
.svc-feature-label .ico {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
}
.svc-feature {
    justify-content: flex-start;
}
.svc-feature-title {
    margin-top: auto;
}

/* 캐러셀 컨트롤 */
.svc-carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}
.svc-carousel-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.svc-carousel-arrow:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--ink);
    transform: scale(1.05);
}
.svc-carousel-arrow .ico {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

.svc-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.svc-carousel-dot {
    position: relative;
    height: 6px;
    width: 32px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.svc-carousel-dot span {
    /* 텍스트는 시각적으로 숨김 (스크린리더용) */
    position: absolute;
    left: -10000px;
    overflow: hidden;
}
.svc-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.35);
}
.svc-carousel-dot.is-active {
    width: 56px;
    background: rgba(255, 255, 255, 0.18);
}
/* 활성 도트 프로그레스 바 (자동 재생 시각화) */
.svc-carousel-dot.is-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background: var(--violet);
    transform-origin: left center;
    animation: svcDotProgress 6s linear forwards;
}
.svc-carousel.is-paused .svc-carousel-dot.is-active::after {
    animation-play-state: paused;
}
@keyframes svcDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 반응형 */
@media (max-width: 640px) {
    .svc-carousel-controls { gap: 12px; margin-top: 24px; }
    .svc-carousel-arrow { width: 38px; height: 38px; }
    .svc-carousel-arrow .ico { width: 16px; height: 16px; }
    .svc-carousel-dot { width: 24px; height: 5px; }
    .svc-carousel-dot.is-active { width: 40px; }
}


/* ============================================
   [NEW] 모바일 햄버거 + 드로어
============================================ */
/* 햄버거 버튼: 데스크톱에서 숨김 */
.header-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.header-burger:hover {
    background: rgba(255, 255, 255, 0.1);
}
.header-burger-line {
    display: block;
    width: 18px;
    height: 1.75px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s ease;
}
/* 햄버거 활성화 시 X 모양 */
.header-burger.is-open .header-burger-line:nth-child(1) {
    transform: translateY(5.75px) rotate(45deg);
}
.header-burger.is-open .header-burger-line:nth-child(2) {
    opacity: 0;
}
.header-burger.is-open .header-burger-line:nth-child(3) {
    transform: translateY(-5.75px) rotate(-45deg);
}

/* 드로어 컨테이너 */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
.mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

/* 백드롭 (어두운 배경) */
.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 23, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.is-open .mobile-drawer-backdrop {
    opacity: 1;
}

/* 드로어 패널 (우측에서 슬라이드 인) */
.mobile-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(86%, 360px);
    background: var(--ink);
    background-image:
            radial-gradient(circle at 90% 8%, rgba(199, 240, 52, 0.12) 0%, transparent 40%),
            radial-gradient(circle at 0% 100%, rgba(43, 217, 100, 0.10) 0%, transparent 50%);
    color: var(--white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
}
.mobile-drawer.is-open .mobile-drawer-panel {
    transform: translateX(0);
}

/* 드로어 헤드 */
.mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-drawer-brand img {
    height: 24px;
    width: auto;
}
.mobile-drawer-brand span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--white);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}
.mobile-drawer-close:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--ink);
}

/* 드로어 nav */
.mobile-drawer-nav {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    flex: 1;
}
.mobile-drawer-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-drawer-nav li a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    color: var(--white);
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    transition: all 0.25s ease;
    position: relative;
}
.mobile-drawer-nav li a::after {
    content: '→';
    position: absolute;
    right: 28px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    transform: translateX(-8px);
    opacity: 0;
    transition: all 0.25s ease;
}
.mobile-drawer-nav li a:hover,
.mobile-drawer-nav li a:active {
    background: rgba(43, 217, 100, 0.08);
    color: var(--violet);
    padding-left: 36px;
}
.mobile-drawer-nav li a:hover::after,
.mobile-drawer-nav li a:active::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--violet);
}
.mobile-drawer-num {
    font-family: 'Archivo', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
    transition: color 0.25s ease;
}
.mobile-drawer-nav li a:hover .mobile-drawer-num {
    color: var(--violet);
}

/* 드로어 푸터 */
.mobile-drawer-foot {
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 22px;
    background: var(--violet);
    color: var(--ink);
    border-radius: 99px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mobile-drawer-cta:hover {
    background: var(--turbo);
    transform: translateY(-1px);
}
.mobile-drawer-meta {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* body 스크롤 잠금 */
body.drawer-open {
    overflow: hidden;
}