/* modu-plus 랜딩 페이지 스타일 (index.html에서 이관) */

/* ─── 원본 <style> 블록 1 ─────────────────────────── */
/* ─── tokens ───────────────────────────────────────────────────── */
    :root {
      --bg:      #ffffff;
      --surface: #f3f7fb;
      --fg:      #111111;
      --muted:   #64748b;
      --border:  #e5e7eb;
      --accent:  #FFD269;
      --brand:   #111111;

      --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 7%, transparent);

      --font-display: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
      --font-body:    "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

      /* 폰트 위계 — 제일 작은 글자 14px, 히어로·섹션 타이틀은 clamp 반응형 */
      --fs-h1:   clamp(38px, 4.8vw, 58px);   /* 히어로 타이틀 */
      --fs-h2:   clamp(28px, 3.6vw, 44px);   /* 섹션 타이틀 */
      --fs-h3:   clamp(20px, 2vw, 24px);     /* 서브섹션·카드 타이틀 */
      --fs-h4:   18px;                        /* 소카드 제목 */
      --fs-lead: clamp(17px, 1.6vw, 19px);   /* 히어로 리드·섹션 인트로 */
      --fs-body: 16px;                        /* 기본 본문 */
      --fs-sm:   15px;                        /* 보조 본문·설명 */
      --fs-xs:   14px;                        /* 최소 (라벨·캡션·메타·태그) */

      --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px;
      --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: 96px;
      --container: 1240px; --gutter: 32px;
      --radius: 10px; --radius-lg: 16px;

      /* 섹션 상하 패딩 — 모바일 시원하게 열리되 데스크탑에서 크게 벌어짐 */
      --pad-section:    clamp(56px, 8vw, 128px);   /* 일반 섹션 */
      --pad-section-lg: clamp(64px, 10vw, 160px);  /* 강조 섹션(다크·랜딩 브레이크) */
    }

    /* ─── reset & base ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
    section { scroll-margin-top: 80px; }
    body {
      margin: 0; background: var(--bg); color: var(--fg);
      font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
      text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
      word-break: keep-all; overflow-wrap: break-word;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4 { text-wrap: balance; }

    /* ─── layout primitives ────────────────────────────────────────── */
    .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: var(--pad-section); }
    .section + .section { border-top: 1px solid var(--border); }
    .stack { display: flex; flex-direction: column; }
    .stack > * + * { margin-top: var(--gap-md); }
    .row { display: flex; align-items: center; gap: var(--gap-md); }
    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
    .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }
    @media (max-width: 920px) {
      .grid-2, .grid-3, .grid-4, .grid-1-2 { grid-template-columns: 1fr; }
    }

    /* ─── type ─────────────────────────────────────────────────────── */
    .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.3; letter-spacing: -0.01em; font-weight: 800; margin: 0; color: var(--brand); }
    .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.35; letter-spacing: -0.005em; font-weight: 700; margin: 0; color: var(--brand); }
    /* 헤드라인 포인트 — 브랜드 블루 컬러 강조 */
    h1 em, h2 em {
      font-style: normal;
      color: #3b82f6;
      font-weight: 800;
    }
    .h3, h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; margin: 0; }
    .lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); max-width: 60ch; margin: 0; }
        .eyebrow {
      display: inline-flex;
      align-items: center;
      padding: 6px 16px;
      border-radius: 99px;
      background: rgba(59,130,246,0.12);
      color: #2563eb;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin: 0 0 16px;
    }
    .meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
    .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

    /* ─── 스크롤 리빌 (JS가 [data-reveal] 부여 → is-visible로 애니메이션) ─── */
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }
      [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ─── chrome ───────────────────────────────────────────────────── */
    .topnav {
      position: sticky; top: 0; z-index: 10;
      background: color-mix(in oklch, var(--bg) 88%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: var(--gap-md); }
    /* 로고 — 가이드 §3 작업 영역 1번: 150×40 */
    .logo { display: inline-flex; align-items: center; flex: 0 0 auto; width: 150px; height: 40px; }
    .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
    /* 네비 활성 상태 (스크롤 스파이) */
    .topnav nav a.is-active { color: var(--fg); font-weight: 700; }
    .topnav nav { display: flex; gap: var(--gap-lg); }
    .topnav nav a { font-size: 14px; color: var(--muted); }
    .topnav nav a:hover { color: var(--fg); }
    @media (max-width: 920px) { .topnav nav { display: none; } }
    .pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: var(--fs-xs); border-top: 1px solid var(--border); }
    .pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }

    /* ─── buttons ──────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent;
      font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
      transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--accent); color: #111111; border-color: var(--accent); }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); border-color: color-mix(in srgb, var(--accent) 85%, black); }
    .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
    .btn-secondary:hover { border-color: var(--fg); }
    .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
    .btn-ghost:hover { color: var(--brand); }
    .btn-arrow::after { content: '→'; transition: transform 0.15s ease; }
    .btn-arrow:hover::after { transform: translateX(2px); }

    /* ─── card / pill ──────────────────────────────────────────────── */
    .card { background: var(--surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 24px; padding: 32px; box-shadow: 0 18px 46px rgba(15, 23, 42, .08); }
    .pill {
      display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
      background: var(--fg-soft); color: var(--fg); border: 1px solid var(--border);
      border-radius: 999px; font-size: var(--fs-xs); font-weight: 500;
    }
    .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

    /* ─── feature cell ─────────────────────────────────────────────── */
    .feature .feature-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      border: 1px solid var(--border); border-radius: 10px; color: var(--brand);
      margin-bottom: var(--gap-md); background: var(--bg);
    }
    .feature .feature-mark svg { width: 18px; height: 18px; }
    .feature h3 { margin-bottom: 8px; font-size: 18px; }
    .feature p { margin: 0; color: var(--muted); font-size: 15px; }

    /* ─── stat ─────────────────────────────────────────────────────── */
    .stat .stat-num {
      font-family: var(--font-display); font-size: clamp(52px, 7vw, 88px);
      line-height: 1; letter-spacing: -0.03em; color: var(--brand); font-weight: 800;
    }
    .stat .stat-label { color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 24ch; }

    /* ─── form ─────────────────────────────────────────────────────── */
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field label { font-size: var(--fs-xs); color: var(--muted); }
    .field label b { color: #ee0000; font-weight: 600; }
    .input, .textarea, .select {
      width: 100%; padding: 12px 14px; border: 1px solid var(--border);
      border-radius: var(--radius); background: var(--bg); color: var(--fg);
      font: inherit; font-size: 15px;
    }
    .input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
    .input.err, .textarea.err, .select.err { border-color: #d06a5a; }
    .textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
    .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

    /* ─── table ────────────────────────────────────────────────────── */
    .price-card {
      max-width: 920px; margin-inline: auto;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      background: var(--bg); overflow: hidden;
      box-shadow: 0 24px 48px -28px rgb(0 23 51 / 0.28);
    }
    .price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
    .price-table th, .price-table td { padding: 18px 26px; text-align: left; border-bottom: 1px solid var(--border); }
    .price-table thead th { background: var(--surface); color: var(--muted); font-weight: 600; font-size: 14px; }
    .price-table thead th.hl {
      background: var(--brand); color: #fff; font-size: 15px; font-weight: 700;
    }
    .price-table .hl-tag {
      display: inline-block; margin-right: 8px; padding: 2px 8px;
      background: var(--accent); color: var(--brand); border-radius: 999px;
      font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
      vertical-align: 1px;
    }
    .price-table tbody td:first-child { color: var(--muted); font-size: 14px; width: 20%; }
    .price-table td.hl {
      background: color-mix(in oklch, var(--accent) 9%, white);
      font-weight: 600; color: var(--brand);
    }
    .price-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .price-table tr.total td { border-bottom: 0; padding-block: 24px; }
    .price-table tr.total .num-col { font-size: 20px; font-weight: 700; }
    .price-table tr.total td.hl .num-big { font-size: 24px; color: var(--brand); }
    .save-badge {
      display: inline-block; margin-left: 10px; padding: 4px 12px;
      background: var(--accent); color: var(--brand); border-radius: 999px;
      font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-body);
      white-space: nowrap; vertical-align: 3px;
    }
    @media (max-width: 920px) {
      .price-table th, .price-table td { padding: 14px 16px; }
      .save-badge { display: block; margin: 8px 0 0; width: fit-content; }
    }

    /* ─── S03 roulette ─────────────────────────────────────────────── */
    .plus-split {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap-xl);
      align-items: center; margin-top: 48px; text-align: left;
    }
    .video-ph {
      aspect-ratio: 16 / 9; width: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      border: 2px dashed var(--border); border-radius: var(--radius-lg);
      background: var(--surface); color: var(--muted); font-size: 15px; font-weight: 600;
    }
    .video-ph-icon {
      width: 52px; height: 52px; display: grid; place-items: center;
      border: 1px solid var(--border); border-radius: 50%;
      font-size: 18px; color: var(--muted); padding-left: 4px; background: var(--bg);
    }
    .plus-eq {
      display: flex; align-items: center; justify-content: center;
      gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; padding-block: var(--gap-lg);
    }
    .plus-fixed {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.02em; white-space: nowrap;
    }
    .plus-sign { color: var(--accent); font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: 1; }
    .roulette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: min(320px, 80vw); }
    .roulette li {
      padding: 14px 22px; border: 1px solid var(--border); border-radius: var(--radius);
      color: var(--muted); font-size: clamp(15px, 1.8vw, 19px); font-weight: 600;
      text-align: center; transition: all 0.45s ease; background: var(--surface);
    }
    .roulette li.on {
      border-color: var(--accent); background: var(--accent-soft);
      color: var(--fg); transform: scale(1.03);
    }


    .result-card { position: sticky; top: 90px; }
    .result-card .rec-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .result-card .rec-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
    .result-card .rec-list li::before {
      content: '✓';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--accent);
      color: #0f172a;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    /* ─── S06 banners ──────────────────────────────────────────────── */
    /* ─── S06 curriculum archive ───────────────────────────────────── */
    .curation-board {
      border: 1px solid var(--border);
      border-radius: 20px;
      background: white;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(0,0,0,0.04);
    }
    .curation-filters {
      display: flex; gap: 8px; padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .curation-filters::-webkit-scrollbar { display: none; }
    .c-filter {
      padding: 8px 18px; border-radius: 99px;
      font-size: 14px; font-weight: 600; color: var(--muted);
      white-space: nowrap; cursor: pointer; transition: all 0.2s;
    }
    .c-filter:hover { color: var(--fg); background: rgba(0,0,0,0.05); }
    .c-filter.active { background: var(--fg); color: white; }
    
    .curation-list {
      padding: 32px;
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 32px 24px;
    }
    .curation-group h4 {
      font-size: 16px; color: var(--brand); margin-bottom: 16px;
      display: flex; align-items: center; gap: 8px;
    }
    .curation-group h4::before {
      content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    }
    .c-tags {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .c-tags span {
      font-size: var(--fs-xs); color: var(--muted); padding: 6px 12px;
      background: var(--surface); border-radius: 6px; border: 1px solid transparent;
      transition: all 0.2s; cursor: default;
    }
    .c-tags span:hover {
      background: white; border-color: var(--border); color: var(--fg);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* ─── pricing map ───────────────────────────────────────── */
    .pricing-cards { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
    .pricing-card {
      flex: 1; min-width: 280px; max-width: 320px;
      background: white; border-radius: 24px; padding: 40px 32px;
      box-shadow: 0 18px 46px rgba(15, 23, 42, .08); text-align: left;
    }
    .pricing-card.highlight {
      background: var(--accent); color: #111111; transform: scale(1.05);
      box-shadow: 0 20px 50px rgba(255,176,0,0.25); position: relative; border: none;
    }
    .p-badge { position: absolute; top: 16px; right: 24px; background: rgba(0,0,0,0.06); font-size: var(--fs-xs); padding: 4px 10px; border-radius: 99px; letter-spacing: 0.5px; color: #111111; font-weight: 700; }
    .pricing-card.highlight .p-tier { color: #111111; }
    .p-tier { font-size: 20px; font-weight: 700; color: var(--fg); margin: 0 0 16px; }
    .p-price { font-size: 28px; font-weight: 800; margin-bottom: 32px; word-break: keep-all; }
    .p-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
    .p-features li { display: flex; gap: 12px; font-size: 15px; align-items: flex-start; }
    .p-features .chk { color: var(--brand); font-weight: bold; }
    .pricing-card.highlight .p-features .chk { color: #111111; }

    .banner-card { border: 1px solid #e2e8f0; border-radius: 24px; background: white; padding: 12px; box-shadow: 0 12px 24px rgba(0,0,0,0.03); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; flex-direction: column; }
    .banner-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.1); border-color: #111111; }
    .banner-card img { width: 100%; height: auto; display: block; border-radius: 16px; }
    .banner-card .cap { padding: 16px 8px 8px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
    .banner-card .cap b { font-weight: 800; color: #0f172a; }
    .banner-card .cap .meta { font-size: 14px; color: #64748b; font-weight: 500; }

    /* ─── S07 checklist ────────────────────────────────────────────── */
    .check-card h3 { font-size: 17px; margin-bottom: 4px; }
    .check-card .meta { margin-bottom: 14px; display: block; }
    .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .check-list li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--fg); }
    .check-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex: 0 0 auto; }

    @media (max-width: 920px) {
      .row { justify-content: center; }
    }

    /* ─── S08 dashboard placeholder ────────────────────────────────── */
    .dash-ph {
      width: 100%; max-width: 480px; height: 220px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      border: 2px dashed var(--border); border-radius: var(--radius-lg);
      background: var(--surface); color: var(--muted);
    }
    .dash-ph b { font-size: 15px; font-weight: 600; color: var(--fg); }
    .dash-ph span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; }

    /* ─── S09 timeline ─────────────────────────────────────────────── */
    .tl-step { position: relative; padding-top: 22px; }
    .tl-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border); }
    .tl-step::after { content: ''; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
    .tl-step .tl-num { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--brand); margin-bottom: 10px; }
    .tl-step h3 { font-size: 18px; margin-bottom: 8px; }
    .tl-step p { margin: 0; color: var(--muted); font-size: 14px; }

    /* ─── S10 certs ────────────────────────────────────────────────── */
    .cert-list { list-style: none; margin: 0; padding: 0; }
    .cert-list li { padding: 16px 0; border-top: 1px solid var(--border); display: flex; gap: 14px; align-items: baseline; font-size: 15px; }
    .cert-list li .meta { flex: 0 0 88px; }

    /* ─── mid CTA strip ────────────────────────────────────────────── */
    .mid-cta { display: flex; justify-content: center; margin-top: var(--gap-xl); }

    /* ─── success card ─────────────────────────────────────────────── */
    .success-card { text-align: center; padding: 56px 28px; display: none; }
    .success-card.show { display: block; }
    .success-card .ok-mark {
      width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%;
      display: grid; place-items: center; background: var(--accent-soft);
      color: var(--brand); font-size: 24px; font-weight: 700;
    }

    @media (max-width: 920px) {
      .result-card { position: static; }
      .plus-split { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .plus-eq { flex-direction: column; }
    }

/* ─── 원본 <style> 블록 2 ─────────────────────────── */
.compare-wrapper {
            display: grid;
            gap: 32px;
            align-items: stretch;
            transition: all 0.4s ease;
          }
          @media (min-width: 768px) {
            .compare-wrapper { grid-template-columns: 1fr 1fr; }
          }
          .compare-card {
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: transform, opacity, box-shadow;
          }
          .compare-card.before {
            background: white; border-radius: 24px; padding: 48px; border: 1px solid #e2e8f0; position: relative;
          }
          .compare-card.after {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); border-radius: 24px; padding: 48px; border: 1px solid rgba(255,255,255,0.1); position: relative;
            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
            animation: pulse-glow-blue 3s infinite;
          }
          @keyframes pulse-glow-blue {
            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
            70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
          }
          
          /* Hover Interactions */
          .compare-wrapper:hover .compare-card.before {
            opacity: 0.4;
            transform: scale(0.97);
            filter: grayscale(100%);
          }
          .compare-wrapper:hover .compare-card.after {
            transform: scale(1.03) translateY(-8px);
            box-shadow: 0 32px 64px rgba(255, 210, 105, 0.15), 0 0 40px rgba(255, 210, 105, 0.1);
            border-color: rgba(255, 210, 105, 0.5);
          }
          .compare-card.after .check-icon {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          }
          .compare-wrapper:hover .compare-card.after .check-icon {
            transform: scale(1.25) rotate(10deg);
          }

/* ─── 원본 <style> 블록 3 ─────────────────────────── */
/* ─── Section: Contents (배경 마퀴 + 딤 + 매트릭스) ────────── */
.section-contents { position: relative; overflow: hidden; background: #0f172a; }
.section-contents__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 40px;
  gap: 24px;
  pointer-events: none;
}
.marquee-wrapper.section-contents__marquee { height: 180px; margin: 0; }
/* 마퀴는 인트로 영역에서만 강조 → 매트릭스 뒤는 다크로 페이드 */
.section-contents__marquee .marquee { animation-duration: 100s; }
.section-contents__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(15, 23, 42, 0.9) 30%,
    rgba(15, 23, 42, 0.98) 55%,
    rgba(15, 23, 42, 1) 100%
  );
  pointer-events: none;
}
.section-contents__content { position: relative; z-index: 2; }

/* 인트로 — 가운데 정렬 + 상하 대칭 여백 */
.section-contents__intro {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding-block: 48px;
}
.section-contents__eyebrow {
  background: rgba(255, 210, 105, 0.18);
  color: var(--accent);
}
.section-contents__title {
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* "하나의 구독" 강조 — 골드 */
.section-contents__title b {
  color: var(--accent);
  font-weight: 800;
}
.section-contents__lead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  margin-inline: auto;
}

/* 배경 썸네일 카드 — 실제 과정 썸네일 이미지 */
.section-contents__thumb {
  width: 280px;
  aspect-ratio: 8 / 5;  /* 실제 썸네일이 720x445(≈8:5)라서 이 비율이 잘림 없음 */
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background: #1e293b; /* 이미지 로드 전 fallback */
}
.section-contents__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 매트릭스: 반투명 유리 */
.curriculum-matrix {
            margin-top: 48px;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.12);
            overflow: hidden;
            font-family: var(--font-body);
          }
          .cm-tabs {
            display: flex;
            background: #f8fafc;
            padding: 16px;
            gap: 12px;
            border-bottom: 1px solid #e2e8f0;
          }
          .cm-tab {
            flex: 1;
            text-align: center;
            padding: 16px 24px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
            background: #e2e8f0;
          }
          .cm-tab.active {
            background: #3b82f6;
            color: white;
            box-shadow: 0 4px 12px rgba(59,130,246,0.3);
          }
          .cm-body {
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            background: #fafafa;
          }
          .cm-row {
            display: flex;
            align-items: center;
            gap: 32px;
          }
          .cm-role {
            width: 100px;
            font-weight: 800;
            font-size: 16px;
            color: #0f172a;
            text-align: right;
            border-right: 3px solid #cbd5e1;
            padding-right: 24px;
            flex-shrink: 0;
            letter-spacing: -0.02em;
          }
          .cm-row:nth-child(1) .cm-role { border-color: #3b82f6; } /* 경영 */
          .cm-row:nth-child(2) .cm-role { border-color: #111111; } /* HR */
          .cm-row:nth-child(3) .cm-role { border-color: #111111; } /* 마케팅 */
          .cm-row:nth-child(4) .cm-role { border-color: #f59e0b; } /* 세일즈 */
          .cm-row:nth-child(5) .cm-role { border-color: #10b981; } /* R&D */
          .cm-row:nth-child(6) .cm-role { border-color: #111111; } /* 개발 */
          
          .cm-courses {
            display: flex;
            flex: 1;
            gap: 16px;
          }
          .cm-course {
            flex: 1;
            padding: 18px 24px;
            border-radius: 12px;
            font-size: 14.5px;
            font-weight: 700;
            color: #334155;
            background: white;
            border: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            letter-spacing: -0.02em;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            transition: all 0.2s;
          }
          .cm-course:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.06);
          }
          .cm-course.level-1 { border-color: #e2e8f0; }
          .cm-course.level-2 { background: #f5f3ff; border-color: #ede9fe; color: #5b21b6; }
          .cm-course.level-3 { background: var(--accent); border-color: #ddd6fe; color: #4c1d95; }
          .cm-course svg { width: 18px; height: 18px; opacity: 0.4; }
          
          /* For nested multi-courses in a column */
          .cm-col {
            flex: 1; display: flex; flex-direction: column; gap: 8px;
          }
          .cm-col .cm-course { width: 100%; flex: 1; }
          
          @media (max-width: 1024px) {
            .cm-row { flex-direction: column; align-items: flex-start; gap: 16px; }
            .cm-role { width: auto; border-right: none; border-bottom: 3px solid #cbd5e1; padding-right: 0; padding-bottom: 8px; text-align: left; }
            .cm-courses { width: 100%; flex-direction: column; }
            .cm-course { width: 100%; }
          }

          /* ─── 매트릭스 tab 1: 시안 2 스타일 (사이드 인트로 + 6 카드) ─── */
          .cm-layout {
            display: grid;
            grid-template-columns: minmax(240px, 300px) 1fr;
            gap: 32px;
            align-items: start;
          }
          @media (max-width: 920px) {
            .cm-layout { grid-template-columns: 1fr; gap: 24px; }
          }

          /* 인트로 사이드바 */
          .cm-intro { padding: 4px 8px 0; }
          .cm-intro__eyebrow {
            display: inline-flex;
            align-items: center;
            padding: 6px 16px;
            border-radius: 99px;
            background: rgba(99, 102, 241, 0.12);
            color: #4f46e5;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin: 0 0 20px;
          }
          .cm-intro__title {
            font-family: var(--font-display);
            font-size: clamp(22px, 2.4vw, 30px);
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.02em;
            line-height: 1.35;
            margin: 0 0 16px;
            word-break: keep-all;
          }
          .cm-intro__desc {
            color: var(--muted);
            font-size: var(--fs-sm);
            line-height: 1.7;
            margin: 0;
            word-break: keep-all;
          }
          /* 서브틀한 아웃라인 링크 (강조 X) */
          .cm-intro__view-all {
            display: inline-flex;
            align-items: center;
            margin-top: 20px;
            padding: 10px 18px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            color: #475569;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: -0.01em;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
          }
          .cm-intro__view-all:hover {
            color: #3b82f6;
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.04);
          }

          /* 6 카드 그리드 */
          .cm-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
          }
          @media (max-width: 1180px) {
            .cm-grid { grid-template-columns: repeat(2, 1fr); }
          }
          @media (max-width: 620px) {
            .cm-grid { grid-template-columns: 1fr; }
          }

          /* 카드 (기본) */
          .cm-card {
            --card-accent: #6366f1;
            position: relative;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 22px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            overflow: hidden;
          }
          .cm-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
            border-color: color-mix(in oklch, var(--card-accent) 45%, #e5e7eb);
          }
          .cm-card__accent {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--card-accent);
          }
          .cm-card__head {
            display: flex;
            align-items: center;
            gap: 12px;
          }
          .cm-card__icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: color-mix(in oklch, var(--card-accent) 12%, white);
            color: var(--card-accent);
            display: grid;
            place-items: center;
            flex-shrink: 0;
          }
          .cm-card__icon svg { width: 22px; height: 22px; }
          .cm-card__role {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.01em;
          }
          .cm-card__need {
            margin: 0;
            padding: 12px 14px;
            font-size: var(--fs-sm);
            font-weight: 700;
            color: #334155;
            line-height: 1.5;
            background: color-mix(in oklch, var(--card-accent) 6%, #f8fafc);
            border-left: 3px solid var(--card-accent);
            border-radius: 8px;
            word-break: keep-all;
          }
          .cm-card__courses {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
          }
          /* 각 과정 아이템: 옅은 배경으로 덩어리감 (클릭 X) */
          .cm-card__courses li {
            padding: 10px 12px;
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.035);
            border: 1px solid rgba(15, 23, 42, 0.05);
            color: #475569;
            font-size: var(--fs-xs);
            font-weight: 600;
            line-height: 1.45;
            word-break: keep-all;
          }

          /* 직무별 accent 컬러 — Tab 1 (직무 특화) */
          .cm-card--strategy  { --card-accent: #3b82f6; }  /* 경영: 블루 */
          .cm-card--hr        { --card-accent: #6366f1; }  /* HR: 인디고 */
          .cm-card--marketing { --card-accent: #a855f7; }  /* 마케팅: 퍼플 */
          .cm-card--sales     { --card-accent: #f59e0b; }  /* 세일즈: 앰버 */
          .cm-card--accounting { --card-accent: #10b981; }  /* 재무회계: 이머랄드 */
          .cm-card--dev       { --card-accent: #0ea5e9; }  /* 개발: 스카이 */
          /* Tab 2 (직무 공통) */
          .cm-card--plan      { --card-accent: #6366f1; }  /* 기획: 인디고 */
          .cm-card--comm      { --card-accent: #ec4899; }  /* 커뮤: 핑크 */
          .cm-card--oa        { --card-accent: #14b8a6; }  /* OA: 틸 */
          .cm-card--problem   { --card-accent: #f59e0b; }  /* 문제해결: 앰버 */
          /* Tab 3 (산업 특화) */
          .cm-card--mfg       { --card-accent: #3b82f6; }  /* 제조: 블루 */
          .cm-card--it        { --card-accent: #8b5cf6; }  /* IT: 퍼플 */
          .cm-card--medical   { --card-accent: #ef4444; }  /* 의료: 레드 (의료 심볼릭) */
          .cm-card--retail    { --card-accent: #f43f5e; }  /* 유통: 로즈 */
          /* Tab 4 (계층별 리더십) — 성장 그라디언트 느낌 */
          .cm-card--junior    { --card-accent: #10b981; }  /* 신입: 이머랄드 (성장) */
          .cm-card--mid       { --card-accent: #0ea5e9; }  /* 대리/과장: 스카이 */
          .cm-card--lead      { --card-accent: #6366f1; }  /* 팀장: 인디고 */
          .cm-card--exec      { --card-accent: #f59e0b; }  /* 임원: 앰버 (성숙) */

/* Package Band 반응형은 아래 데스크톱 규칙 뒤에 정의됨 (cascade 순서 이슈로 이동) */

/* ─── 원본 <style> 블록 5 ─────────────────────────── */
.ai-tab-btn.active {
            background: var(--accent); border-color: var(--accent); color: #111;
            box-shadow: 0 8px 16px rgba(255,176,0,0.3); transform: translateY(-2px);
          }
          .ai-tab-content { display: none; animation: fadeInTabs 0.4s ease forwards; }
          .ai-tab-content.active { display: block; }
          .ai-tutor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
          @media (max-width: 920px) { .ai-tutor-grid { grid-template-columns: 1fr; gap: 48px; } }
          @keyframes fadeInTabs {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
          }

/* ─── 원본 <style> 블록 6 ─────────────────────────── */
.diag-container {
            position: relative;
            padding-left: 32px;
          }
          .diag-container::before {
            content: ''; position: absolute; top: 24px; bottom: 24px; left: 14px;
            width: 2px; background: #e2e8f0; z-index: 0;
          }
          .diag-step {
            position: relative; margin-bottom: 48px; z-index: 1;
          }
          .diag-step-num {
            position: absolute; left: -32px; top: -4px; width: 28px; height: 28px;
            background: white; border: 2px solid var(--accent); border-radius: 50%;
            display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--accent);
            box-shadow: 0 4px 8px rgba(255,176,0,0.2);
          }
          .step-tag {
            display: block; font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 16px;
          }
          .chips {
            display: flex; flex-wrap: wrap; gap: 12px;
          }
          .chip {
            padding: 12px 24px; border-radius: 99px; border: 1px solid #cbd5e1; background: white;
            color: #475569; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
          }
          .chip:hover {
            border-color: var(--accent); color: #0f172a; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(-2px);
          }
          .chip.selected {
            background: var(--accent); border-color: var(--accent); color: #111;
            box-shadow: 0 8px 16px rgba(255,176,0,0.3); transform: translateY(-2px);
          }
          .result-card {
            background: #0f172a; border-radius: 24px; padding: 24px 48px; color: white;
            box-shadow: 0 24px 48px rgba(0,0,0,0.1);
            display: flex; flex-direction: column;
            height: 620px;
            transition: all 0.4s ease;
          }
          @media (max-width: 920px) {
            .result-card { height: auto; min-height: 560px; }
          }
          .rec-list { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
          .rec-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #e2e8f0; line-height: 1.5; }
          .rec-list li::before {
            content: '✓';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            margin-top: 2px;
            border-radius: 50%;
            background: var(--accent);
            color: #0f172a;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
          }

/* ─── 원본 <style> 블록 7 ─────────────────────────── */
.lms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
          @media (max-width: 920px) { .lms-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ─── 원본 <style> 블록 8 ─────────────────────────── */
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
          @media (max-width: 1100px) { .t-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 640px) { .t-grid { grid-template-columns: 1fr; } }

/* ─── 원본 <style> 블록 9 ─────────────────────────── */
.marquee-wrapper { position: relative; width: 100vw; max-width: 100%; height: 80px; overflow: hidden; margin-bottom: 24px; left: 50%; transform: translateX(-50%); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
        .marquee { display: flex; align-items: center; height: 100%; width: max-content; animation: scroll-left 40s linear infinite; gap: 24px; padding-left: 24px; }
        .marquee.reverse { animation-direction: reverse; }
        .partner-logo { height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .partner-logo--compact { width: 90px; }
        .partner-logo--normal  { width: 130px; }
        .partner-logo--wide    { width: 190px; }
        .partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: 0.85; transition: filter 0.3s, opacity 0.3s; }
        .partner-logo:hover img { filter: grayscale(0); opacity: 1; }
        @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ─── 원본 <style> 블록 10 ─────────────────────────── */
/* (플로팅 바 모바일 규칙은 아래 mp-300~mp-308 데스크톱 정의 뒤에 위치 · cascade 순서) */

/* ─── inline style 이관 (mp-N) ────────────────────────────── */
/* ─── Section: Hero ────────────────────────────────────────────── */
.section-hero { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); color: #0f172a; padding-block: clamp(80px, 10vw, 120px); position: relative; overflow: hidden; border-bottom: none; }
/* 앰비언트 글로우 오브 · 대각선 (우상단 인디고 + 좌하단 블루) */
.section-hero::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 62%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.section-hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
/* 옅은 dot 패턴 (텍스트 영역 쪽으로만 페이드 노출) */
.section-hero__decor {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 40%, black 0%, transparent 55%);
  mask-image: radial-gradient(ellipse at 20% 40%, black 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.section-hero__grid { gap: 64px; align-items: center; position: relative; z-index: 1; }
.section-hero__text { text-align: left; }
.section-hero__accent { color: var(--brand); }
.section-hero__title { color: #0f172a; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; word-break: keep-all; }
.section-hero__lead { color: #475569; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; max-width: 52ch; margin-bottom: 36px; word-break: keep-all; }
.section-hero__actions { display: flex; gap: 12px; align-items: center; }
.section-hero__cta { padding: 14px 28px; border-radius: 8px; font-weight: 700; background: var(--accent); color: #111; font-size: 15px; transition: opacity 0.2s; }
.section-hero__visual {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-hero__image {
  width: 100%;
  height: auto;
  display: block;
}

/* 페이지 로드 시 히어로 fade-up 애니메이션 (스크롤 리빌과 별개) */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .section-hero__text > .eyebrow,
  .section-hero__title,
  .section-hero__lead,
  .section-hero__actions,
  .section-hero__visual {
    animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .section-hero__text > .eyebrow { animation-delay: 0.1s; }
  .section-hero__title           { animation-delay: 0.2s; }
  .section-hero__lead            { animation-delay: 0.35s; }
  .section-hero__actions         { animation-delay: 0.5s; }
  .section-hero__visual          { animation-delay: 0.35s; }

  /* 앰비언트 글로우/도트 배경은 살짝 늦게 자연스럽게 fade-in */
  .section-hero::before,
  .section-hero::after,
  .section-hero__decor {
    animation: hero-fade-in 1.4s ease-out 0.2s both;
  }
}
@media (max-width: 920px) {
  .section-hero__grid { text-align: center; }
  .section-hero__text { text-align: center; }
  .section-hero__lead { margin-inline: auto; }
  .section-hero__actions { justify-content: center; }
}
.section-plus,
.section-patent { background: #f8fafc; padding-block: var(--pad-section); }
/* ─── Section: Plus (Before vs After 비교) ────────────────── */
.section-plus__header { text-align: center; margin-bottom: 64px; }
.section-plus__title { font-size: var(--fs-h2); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }

/* Compare Card (before/after 공용) */
.compare-card__tag { position: absolute; top: -16px; left: 48px; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.compare-card.before .compare-card__tag { background: #64748b; color: white; }
.compare-card.after .compare-card__tag { background: white; color: #3b82f6; padding: 8px 20px; border-radius: 99px; font-weight: 800; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }

.compare-card__title { font-size: 24px; font-weight: 700; color: #334155; margin-top: 16px; margin-bottom: 32px; }
.compare-card.after .compare-card__title { font-size: 26px; font-weight: 800; color: white; letter-spacing: -0.02em; }

.compare-card__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.compare-card__item { display: flex; gap: 16px; align-items: flex-start; }

.compare-card__mark { min-width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; font-size: var(--fs-xs); font-weight: 800; }
.compare-card.before .compare-card__mark { background: #f1f5f9; color: #94a3b8; }
.compare-card.after .compare-card__mark { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); color: white; }

.compare-card__item-label { font-size: 16px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.compare-card.after .compare-card__item-label { color: white; }

.compare-card__item-desc { font-size: 15px; color: #64748b; line-height: 1.5; word-break: keep-all; }
.compare-card.after .compare-card__item-desc { color: rgba(255, 255, 255, 0.8); }

.compare-card__highlight { color: white; font-weight: 800; background: rgba(255, 255, 255, 0.15); padding: 2px 6px; border-radius: 4px; }
.section-value { background: #ffffff; padding-block: var(--pad-section) calc(var(--pad-section) + 48px); }

/* ─── Section: Value ──────────────────────────────────────────── */
.section-value__header {
  text-align: center;
  margin-bottom: 64px;
}
.section-value__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0;
}
.section-value__mark {
  font-style: normal;
  font-weight: 900;
  color: #3b82f6;
}
.section-value__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* 지그재그: 짝수번 카드를 아래로 밀어 상하 오프셋 (transform이라 grid 높이엔 영향 없음) */
.section-value__card { --card-offset: 0px; }
.section-value__card:nth-child(even) { --card-offset: 48px; }

.section-value__card {
  position: relative;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 28px;
  color: white;
  overflow: hidden;
  transform: translateY(var(--card-offset));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 좌상단 은은한 스포트라이트 (카드별 컬러 상속) */
.section-value__card::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--card-accent, #6366f1) 0%, transparent 65%);
  opacity: 0.18;
  pointer-events: none;
}
.section-value__card:hover {
  transform: translateY(calc(var(--card-offset) - 6px));
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
}
.section-value__card-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  color: white;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}
.section-value__card-icon svg { width: 28px; height: 28px; }
.section-value__card-title {
  position: relative;
  color: white;
  font-size: var(--fs-h4);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.section-value__card-desc {
  position: relative;
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
  word-break: keep-all;
}
/* 카드별 액센트 (가이드 브랜드 그라데이션 #3b82f6 → #6366f1을 n1에 앵커) */
.section-value__card--n1 {
  --card-accent: #3b82f6;
}
.section-value__card--n1 .section-value__card-icon {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.section-value__card--n2 {
  --card-accent: #6366f1;
}
.section-value__card--n2 .section-value__card-icon {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.section-value__card--n3 {
  --card-accent: #0ea5e9;
}
.section-value__card--n3 .section-value__card-icon {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
}
.section-value__card--n4 {
  --card-accent: #8b5cf6;
}
.section-value__card--n4 .section-value__card-icon {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

@media (max-width: 920px) {
  .section-value { padding-block: var(--pad-section) calc(var(--pad-section) + 32px); }
  .section-value__grid { grid-template-columns: repeat(2, 1fr); }
  .section-value__header { margin-bottom: 40px; }
  .section-value__card:nth-child(even) { --card-offset: 32px; }
}
@media (max-width: 560px) {
  .section-value { padding-block: var(--pad-section); }
  .section-value__grid { grid-template-columns: 1fr; }
  .section-value__card:nth-child(even) { --card-offset: 0px; }
}
/* 커리큘럼 매트릭스 탭 body: 활성 탭만 보이도록 (JS가 클래스 토글) */
.cm-body--hidden { display: none; }

/* ─── Plus Connector (섹션 사이 시각 연결 배지) ─────────── */
.plus-connector { display: flex; flex-direction: column; align-items: center; margin: -20px 0; position: relative; z-index: 5; }
.plus-connector__line { width: 2px; height: 40px; background: repeating-linear-gradient(to bottom, #93c5fd 0px, #93c5fd 6px, transparent 6px, transparent 12px); }
.plus-connector__line--bottom { margin-top: 14px; }
.plus-connector__badge { width: 64px; height: 64px; background: linear-gradient(135deg, #3b82f6, #6366f1); border: 4px solid white; border-radius: 50%; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); display: flex; justify-content: center; align-items: center; color: white; }
/* ─── Section: Legal (법정·안전교육) ────────────────────── */
.section-legal { padding-top: 60px; }

/* 상단 헤더 (section-contents 인트로 스타일과 통일) */
.section-legal__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding-block: 32px 56px;
}
.section-legal__eyebrow {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.section-legal__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #0f172a;
  margin: 24px 0 0;
  word-break: keep-all;
}
.section-legal__title b {
  color: #3b82f6;
  font-weight: 800;
}
.section-legal__lead {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 20px auto 0;
  word-break: keep-all;
  text-align: center;
}
.section-legal__lead b {
  color: #3b82f6;
  font-weight: 700;
}

/* 3열 카드 그리드 */
.section-legal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.section-legal__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-legal__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.section-legal__card-title {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0;
}
.section-legal__card-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.section-legal__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #d1d5db;
  position: relative;
  cursor: default;
}
.section-legal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.section-legal__thumb:hover img {
  transform: scale(1.04);
}
/* 호버 시 하단에 나타나는 캡션 (아주 작게) */
.section-legal__thumb-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
  color: white;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: keep-all;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.section-legal__thumb:hover .section-legal__thumb-caption {
  opacity: 1;
  transform: translateY(0);
}

/* 다크 스포트라이트 (section-contents 톤과 어울리되 조금 밝게) */
/* 풀 폭 스포트라이트 (단색 브랜드 인디고) */
.section-legal__spotlight {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80px;
  padding-top: 40px;
  padding-inline: var(--gutter);
  /* 20~30% 지점만 밝은 톤(#302F34), 나머지는 베이스(#1B1D1F) */
  background: linear-gradient(
    90deg,
    #1B1D1F 0%,
    #1B1D1F 15%,
    #302F34 22%,
    #302F34 28%,
    #1B1D1F 38%,
    #1B1D1F 100%
  );
  color: #3b82f6;
  overflow: hidden;
}
.section-legal__spotlight-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: center;
}

/* 좌: 스포트라이트 이미지 (단일 컴포지트, 축소 후 컬럼 내 가운데 정렬) */
.section-legal__spotlight-thumbs {
  display: block;
  max-width: 640px;
  margin: 0 auto;

}
.section-legal__spotlight-thumb {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;

}
/* 세로형 정성호가 기준 높이를 잡고, 가로형 표창원·정일용은 이 높이에 stretch */
.section-legal__spotlight-thumb--small { aspect-ratio: 3 / 4; }
.section-legal__spotlight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 우: 텍스트 */
.section-legal__spotlight-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align:center;
}
.section-legal__spotlight-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #a5b4fc;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
  word-break: keep-all;
}
.section-legal__spotlight-desc {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
  word-break: keep-all;
}
/* 서브틀 아웃라인 링크 (다크 스포트라이트용 · .cm-intro__view-all 와 동일 톤) */
.section-legal__spotlight-cta {
  display: inline-flex;
  align-self: center;
  align-items: center;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.section-legal__spotlight-cta:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 920px) {
  /* 그리드 폭 한정 + 콘텐츠 폭 안에서 가운데 정렬 */
  .section-legal__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
    margin-inline: auto;
  }
  /* 모바일 지그재그 · 축소 카드: 홀수 카드는 썸네일|타이틀, 짝수 카드는 타이틀|썸네일 */
  .section-legal__card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .section-legal__card:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .section-legal__thumb {
    flex: 0 0 55%;
    max-width: 240px;
    border-radius: 14px;
  }
  .section-legal__card-body {
    flex: 1;
    text-align: center;
  }
  .section-legal__card-title { font-size: 16px; }
  .section-legal__card-desc { font-size: 13px; }
  .section-legal__spotlight { padding-block: 30px; }
  .section-legal__spotlight-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* ─── Package Band (ALL-IN-ONE 통합 패키지 등식) ────────── */
.package-band {
  margin-top: 72px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.5);
}
.package-band__header {
  text-align: center;
  margin-bottom: 48px;
}
.package-band__title {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin: 12px 0;
  letter-spacing: -0.02em;
}
.package-band__lead {
  color: #64748b;
  font-size: 17px;
  margin: 0;
}

/* 등식 그리드 (카드 + · + 카드 + · + 카드) */
.package-band__grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.package-band__card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
  text-align: center;
}
.package-band__card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.package-band__card-icon--n1 { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.package-band__card-icon--n2 { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.package-band__card-icon--n3 { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.package-band__card-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 6px;
}
.package-band__card-desc {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  word-break: keep-all;
  line-height: 1.5;
}
.package-band__plus {
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}

/* 결과 박스 (다크 카드) */
.package-band__result {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.package-band__result-line {
  width: 3px;
  height: 48px;
  background: linear-gradient(to bottom, #cbd5e1, var(--accent));
  margin-bottom: -16px;
  z-index: 1;
}
.package-band__result-box {
  position: relative;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  width: 100%;
  max-width: 680px;
  z-index: 2;
}
.package-band__result-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--accent);
}
.package-band__result-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: 0.15;
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
}
.package-band__result-glow--n1 {
  right: -40px;
  top: -40px;
  background: var(--accent);
}
.package-band__result-glow--n2 {
  left: -40px;
  bottom: -40px;
  background: #3b82f6;
}
.package-band__result-eyebrow {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.package-band__result-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
}

/* Package Band 반응형 (좁은 화면에서 등식 세로 스택 · 카드 내부는 가로 배치) */
@media (max-width: 768px) {
  .package-band__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .package-band__plus {
    transform: rotate(90deg);
  }
  /* 카드: 아이콘 | 텍스트 가로 배치로 높이 축소 */
  .package-band__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    text-align: left;
  }
  .package-band__card-icon {
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }
  .package-band__card-icon svg { width: 24px; height: 24px; }
  .package-band__card-title { font-size: 17px; margin-bottom: 2px; }
  .package-band__card-desc { font-size: 13px; }
  .package-band__card-desc br { display: none; }
}

/* ─── Section: Patent (특허받은 시스템) ────────────────────── */
.section-patent__header { text-align: center; margin-bottom: 56px; }
.section-patent__title { font-size: var(--fs-h2); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.section-patent__lead { margin-top: 16px; margin-inline: auto; }
.section-patent__tabs { display: flex; justify-content: center; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }
.section-patent__tab { padding: 16px 32px; font-size: var(--fs-h4); font-weight: 700; border-radius: 99px; border: 1px solid #cbd5e1; background: white; color: #475569; cursor: pointer; transition: all 0.2s; }
.section-patent__diag-intro { text-align: center; margin-bottom: 40px; }
.section-patent__diag-title { font-size: clamp(22px, 2.8vw, 28px); line-height: 1.4; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 10px; word-break: keep-all; }
.section-patent__diag-desc { color: #475569; font-size: var(--fs-body); line-height: 1.5; word-break: keep-all; margin: 0; }
.section-patent__diag-grid { align-items: start; gap: 64px; }
.section-patent .diag-step:last-child { margin-bottom: 0; }

/* Empty state — 특허증 실제 이미지 사용 */
.section-patent__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 20px;
}
.section-patent__patent-visual {
  width: 220px;
  aspect-ratio: 3 / 4;
  background: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}
.section-patent__patent-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.section-patent__patent-tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 210, 105, 0.15);
  color: var(--accent);
  border: 1px solid rgba(255, 210, 105, 0.35);
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
}
.section-patent__empty-title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; color: #ffffff; margin: 0; }
.section-patent__empty-desc { color: #94a3b8; font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

/* Result state */
.section-patent__result { display: none; height: 100%; flex-direction: column; justify-content: space-evenly; gap: 20px; }
.section-patent__result-badge { margin-bottom: 12px; display: inline-flex; background: rgba(255, 176, 0, 0.15); color: var(--accent); padding: 6px 12px; border-radius: 6px; font-weight: 800; font-size: var(--fs-xs); }
.section-patent__result-title { font-size: 28px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.section-patent__result-preview { padding-top: 0; }
.section-patent__preview-frame { border-radius: 16px; overflow: hidden; position: relative; height: 180px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); }
.section-patent__preview-inner { width: 100%; height: 100%; background: linear-gradient(135deg, #312e81 0%, #1e293b 100%); position: relative; }
.section-patent__preview-tag { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.12); color: white; font-size: var(--fs-xs); font-weight: 700; padding: 5px 10px; border-radius: 6px; }
.section-patent__preview-play { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.section-patent__preview-play svg { margin-left: 2px; }
.section-patent__preview-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.85) 100%),
    url('../img/preview-overlay.png') center/cover no-repeat;
}
.section-patent__preview-badge { background: var(--accent); color: #111; padding: 6px 16px; border-radius: 99px; font-weight: 800; font-size: var(--fs-xs); transform: translateY(30px); box-shadow: 0 8px 16px rgba(255, 176, 0, 0.2); }
.section-patent__result-cta { width: 100%; margin-top: 24px; padding: 16px; border-radius: 12px; font-weight: 800; font-size: var(--fs-body); text-align: center; }
/* ─── AI Tutor (Tab 2 실시간 AI 튜터 목업 · 현재 비활성) ──── */
.ai-tutor__title { font-size: var(--fs-h2); line-height: 1.4; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin-bottom: 24px; word-break: keep-all; }
.ai-tutor__desc { color: #475569; font-size: 18px; line-height: 1.6; word-break: keep-all; max-width: 420px; margin: 0; }
.ai-tutor__mockup { position: relative; width: 100%; aspect-ratio: 4/3; margin-top: 20px; }

/* 배경 대시보드 목업 */
.ai-tutor__dashboard { position: absolute; right: -20px; top: 0; width: 90%; height: 85%; background: #f8fafc; border-radius: 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; }
.ai-tutor__browser-bar { height: 40px; background: #1e293b; display: flex; align-items: center; padding: 0 20px; }
.ai-tutor__browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); margin-right: 6px; }
.ai-tutor__browser-dot--last { margin-right: 0; }
.ai-tutor__dashboard-body { flex: 1; position: relative; }
.ai-tutor__sidebar { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: #f1f5f9; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; padding-top: 20px; gap: 16px; }
.ai-tutor__sidebar-item { width: 32px; height: 32px; border-radius: 8px; background: #6366f1; opacity: 0.2; }

/* 좌측: 강의 영상 목업 */
.ai-tutor__video { position: absolute; left: 0; bottom: 40px; width: 55%; aspect-ratio: 4/5; background: #d8b4fe; border-radius: 16px; box-shadow: 0 32px 64px rgba(99, 102, 241, 0.2); padding: 6px; display: flex; flex-direction: column; }
.ai-tutor__video-frame { flex: 1; background: #e9d5ff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ai-tutor__video-cross { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-tutor__video-label { font-weight: 800; font-size: 14px; color: #6b21a8; z-index: 1; }
.ai-tutor__video-caption { background: #6366f1; color: white; padding: 10px 24px; border-radius: 99px; text-align: center; font-weight: 700; font-size: 14px; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); z-index: 2; box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3); white-space: nowrap; }

/* 우측: AI 채팅 목업 */
.ai-tutor__chat { position: absolute; right: 40px; bottom: 0; width: 45%; aspect-ratio: 3/4; background: white; border-radius: 16px; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15); border: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: visible; }
.ai-tutor__chat-header { padding: 16px; border-bottom: 1px solid #f1f5f9; font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; align-items: center; color: #1e293b; }
.ai-tutor__chat-close { color: #94a3b8; }
.ai-tutor__chat-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f8fafc; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.ai-tutor__chat-hint { text-align: center; font-size: var(--fs-xs); color: #94a3b8; margin-bottom: 8px; }
.ai-tutor__bubble { display: flex; gap: 8px; }
.ai-tutor__bubble-icon { width: 24px; height: 24px; border-radius: 50%; background: #6366f1; display: grid; place-items: center; flex-shrink: 0; }
.ai-tutor__bubble-text { background: white; border: 1px solid #e2e8f0; padding: 10px 12px; border-radius: 12px; border-top-left-radius: 0; font-size: var(--fs-xs); color: #475569; width: 100%; line-height: 1.4; }
.ai-tutor__user-chip { align-self: flex-end; background: #e2e8f0; padding: 8px 12px; border-radius: 12px; border-bottom-right-radius: 0; font-size: var(--fs-xs); color: #475569; margin-top: 8px; }
.ai-tutor__badge { background: #6366f1; color: white; padding: 10px 32px; border-radius: 99px; text-align: center; font-weight: 700; font-size: 14px; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); z-index: 2; box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3); white-space: nowrap; }
/* ─── Section: LMS (목업 이미지 + 리스트) ─────────────────── */

/* 섹션 배경: 가이드 컬러(블루·인디고)로 은은한 스포트라이트 */
.section-lms {
  position: relative;
  background:
    radial-gradient(ellipse 45% 60% at 28% 65%, rgba(59, 130, 246, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 45% at 78% 30%, rgba(99, 102, 241, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0f172a 0%, #0a1220 100%);
  padding-block: var(--pad-section-lg);
  overflow: hidden;
}

.section-lms__card {
  position: relative;
}

/* 상단 헤더 (풀 폭) */
.section-lms__header {
  padding-bottom: 72px;
  color: white;
}
.section-lms__header .section-lms__eyebrow { margin-bottom: 20px; }
.section-lms__header .section-lms__title { margin: 0 0 16px; }
.section-lms__header .section-lms__lead { margin: 0; max-width: 640px; }

.section-lms__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
}

/* 좌: 목업을 카드 좌측·하단으로 확장 (배경처럼) */
.section-lms__mockup {
  position: relative;
  align-self: end;
  width: calc(100% + 48px);
  margin-left: -48px;
  margin-bottom: -8px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* 하단 페이드 오버레이: 돌이 카드 배경과 자연스럽게 이어짐 */
.section-lms__mockup::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(15, 23, 42, 0.4) 55%,
    rgba(10, 18, 32, 0.95) 100%
  );
  pointer-events: none;
  z-index: 2;
}
.section-lms__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.section-lms__shot.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.section-lms__shot[hidden] { display: block; }

/* 우: 인트로 + 리스트 */
.section-lms__intro { color: white; }
.section-lms__eyebrow {
  background: rgba(255, 210, 105, 0.18);
  color: var(--accent);
  margin: 0 0 20px;
}
.section-lms__title {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: white;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.section-lms__lead {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 32px;
  word-break: keep-all;
}

/* 4개 리스트 (구분선만) */
.section-lms__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-lms__list li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.section-lms__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.section-lms__tab {
  width: 100%;
  background: transparent;
  border: none;
  padding: 20px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: white;
  text-align: left;
  font: inherit;
  transition: padding-left 0.25s;
}
.section-lms__tab:hover { padding-left: 12px; }
.section-lms__tab-body { flex: 1; }
.section-lms__tab-title {
  color: white;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  transition: color 0.25s;
}
.section-lms__tab.is-active .section-lms__tab-title { color: #a5b4fc; }
.section-lms__tab-desc {
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.section-lms__tab-arrow {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  transition: color 0.25s, transform 0.25s;
}
.section-lms__tab:hover .section-lms__tab-arrow {
  color: white;
  transform: translate(3px, -3px);
}
.section-lms__tab.is-active .section-lms__tab-arrow { color: #a5b4fc; }

.section-lms__meta {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-align: left;
}

@media (max-width: 920px) {
  .section-lms__card { padding: 32px 24px; border-radius: 24px; }
  .section-lms__header { padding-bottom: 24px; }
  /* 참고 이미지 2번: 리스트 → 목업 순 */
  .section-lms__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .section-lms__intro { order: 1; width:100%;}
  .section-lms__mockup {
    order: 2;
    width: calc(100% + 48px);
    margin: 0 -24px;
    aspect-ratio: 3 / 2;
    align-self: initial;
  }
  .section-lms__mockup::after { height: 30%; }
  .section-lms__tab-title { font-size: var(--fs-h4); }
  /* 가독성 위해 모바일에서 desc 숨김 */
  .section-lms__tab-desc { display: none; }
  .section-lms__tab { padding: 16px 4px; }
  .section-lms__meta { margin-top: 24px; padding-top: 20px; }
}
/* ─── Section: Case (고객 사례 · 2x2 카드) ─────────────────── */
.section-case { background: #f8fafc; padding-block: var(--pad-section); }

.section-case__header {
  text-align: center;
  margin-bottom: 48px;
}
.section-case__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
}

/* 2x2 그리드 */
.section-case__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 라이트 pill 카드 (3열: 아바타 | 본문 | 맞춤제안) */
.section-case__card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 20px 32px 20px 20px;
  display: grid;
  grid-template-columns: auto 0.85fr 1.15fr;
  gap: 20px;
  align-items: center;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.section-case__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
}

/* 좌: 원형 아바타 (밝은 배경 + 이미지) */
.section-case__avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.section-case__avatar img {
  width: 80%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 중: 카테고리 · 회사 · 타이틀 · 인용문 (컴팩트) */
.section-case__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.section-case__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
}
.section-case__category { color: #6366f1; font-weight: 700; letter-spacing: 0.02em; }
.section-case__divider { color: #cbd5e1; }
.section-case__company { color: #94a3b8; font-weight: 500; }
.section-case__topic {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.section-case__quote {
  font-style: italic;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 우: 맞춤제안 뱃지 + 불릿 (더 넓게) */
.section-case__solution {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.section-case__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(99, 102, 241, 0.25);
  width: fit-content;
  letter-spacing: 0.02em;
}
.section-case__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-case__bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}
.section-case__check {
  width: 13px;
  height: 13px;
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 4px;
}

/* 반응형: 태블릿·모바일 */
/* 1180px: pill 3열 유지, outer 그리드만 1열로 (pill 한 줄에 하나씩) */
@media (max-width: 1180px) {
  .section-case__list { grid-template-columns: 1fr; }
}
/* 640px: 폭이 부족해서 3열 유지 어려움 → 세로 스택 */
@media (max-width: 640px) {
  .section-case__card {
    grid-template-columns: auto 1fr;
    padding: 24px;
    border-radius: 28px;
    gap: 20px;
  }
  .section-case__solution {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }
  .section-case__avatar { width: 88px; height: 88px; }
}
.section-pricing { background: #fdfdfd; padding-bottom: 0; }

/* ─── Section: Pricing ──────────────────────────────────────── */
.section-pricing__header { text-align: center; max-width: 40ch; margin: 0 auto 48px; }
.section-pricing__title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 0; }
.section-pricing__lead { margin: 16px auto 0; }

.section-pricing__cards { display: flex; gap: 24px; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }

/* 카드 (기본) */
.section-pricing__card { flex: 1; min-width: 300px; max-width: 380px; padding: 12px; display: flex; flex-direction: column; border: 1px solid #e2e8f0; box-shadow: 0 12px 24px rgba(0,0,0,0.03); background: white; border-radius: 24px; }
.section-pricing__card-body { background: #f8fafc; border-radius: 16px; padding: 32px 24px; flex-grow: 1; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }

/* 카드 (하이라이트) */
.section-pricing__card--highlight { border-color: #6366f1; box-shadow: 0 24px 48px rgba(99,102,241,0.2); transform: scale(1.05); }
.section-pricing__card--highlight .section-pricing__card-body { background: linear-gradient(135deg, #3b82f6, #6366f1); border: none; position: relative; }

.section-pricing__tier { color: #0f172a; font-size: 20px; font-weight: 700; margin-bottom: 6px; padding-top: 30px; }
.section-pricing__tier--highlight { color: white; padding-top: 0; }
.section-pricing__tier-desc { color: #64748b; font-size: 14px; margin: 0 0 20px; }
.section-pricing__tier-desc--highlight { color: rgba(255,255,255,0.8); }
.section-pricing__price { color: #0f172a; font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.section-pricing__price--highlight { color: white; }
.section-pricing__price-meta { color: #94a3b8; font-size: var(--fs-xs); margin: 0 0 20px; }
.section-pricing__price-meta--highlight { color: rgba(255,255,255,0.7); }

.section-pricing__badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 800; margin-bottom: 12px; background: rgba(255,255,255,0.2); color: white; width: fit-content; }

/* Tier 표 */
.section-pricing__tiers { background: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.section-pricing__tiers--highlight { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.section-pricing__tier-row { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
.section-pricing__tiers--highlight .section-pricing__tier-row { border-bottom-color: rgba(255,255,255,0.15); }
.section-pricing__tier-row--last { border-bottom: none; }
.section-pricing__tier-label { color: #64748b; }
.section-pricing__tier-label--highlight { color: rgba(255,255,255,0.8); }
.section-pricing__tier-value { color: #0f172a; }
.section-pricing__tier-row--last .section-pricing__tier-value { color: #FFD269; }
.section-pricing__tier-value--highlight { color: white; }

/* 기능 목록 */
.section-pricing__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.section-pricing__features--highlight { flex-grow: 1; }
.section-pricing__feature { display: flex; gap: 12px; font-size: 15px; }
.section-pricing__check { color: #6366f1; font-weight: bold; }
.section-pricing__check--highlight { color: white; }
.section-pricing__feature-text { color: #475569; }
.section-pricing__feature-text--highlight { color: white; font-weight: 700; }

.section-pricing__cta { background: white; color: #3b82f6; width: 100%; margin-top: 32px; display: block; text-align: center; border-radius: 99px; padding: 14px; text-decoration: none; font-weight: 800; font-size: 16px; box-shadow: 0 8px 16px rgba(59,130,246,0.25); transition: transform 0.2s; }
.section-pricing__cta:hover { transform: scale(1.03); }

.section-pricing__note { text-align: center; color: #94a3b8; font-size: var(--fs-xs); margin: 0 0 56px; }

/* ─── REAL CASE (계산 예시 카드 · 다크 톤) ─────────────────── */
.section-pricing__realcase {
  margin: 0 auto 64px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px 32px;
  color: #f1f5f9;
  text-align: center;
}
.section-pricing__realcase-eyebrow {
  color: #a5b4fc;
}

/* 상단 흐름 문구: 개별 → 통합 */
.section-pricing__realcase-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 20px 0 6px;
  line-height: 1.5;
  word-break: keep-all;
}
.section-pricing__realcase-flow-a { font-size: 20px; color: #94a3b8; }
.section-pricing__realcase-flow-a b { font-size: 24px; color: #f1f5f9; font-weight: 800; }
.section-pricing__realcase-flow-b { font-size: 20px; color: #cbd5e1; font-weight: 600; }
.section-pricing__realcase-flow-b b { font-size: 28px; color: #a5b4fc; font-weight: 800; }
.section-pricing__realcase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6366f1;
  color: white;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
  flex-shrink: 0;
}
.section-pricing__realcase-arrow svg { width: 20px; height: 20px; }

.section-pricing__realcase-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin: 18px 0 12px;
  color: #f8fafc;
  word-break: keep-all;
}
.section-pricing__realcase-title em {
  color: #a5b4fc;
  font-style: normal;
}
.section-pricing__realcase-lead {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: #94a3b8;
  word-break: keep-all;
}

/* 계산 카드 */
.section-pricing__calc {
  position: relative;
  max-width: 680px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.12);
  text-align: left;
}
.section-pricing__calc-header {
  margin: 0;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 800;
  color: #4f46e5;
  text-align: center;
  letter-spacing: 0.02em;
  background: #eef2ff;
  border-radius: 20px 20px 0 0;
}

/* 각 row (block 레이아웃 + 상단 라벨/가격 baseline) */
.section-pricing__calc-row {
  padding: 20px 24px;
  border-bottom: 1px solid #eef2f6;
}
.section-pricing__calc-row--highlight {
  background: #fffbf0;
  border-bottom: none;
}
.section-pricing__calc-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.section-pricing__calc-label {
  font-size: 17px;
  font-weight: 700;
  color: #334155;
  word-break: keep-all;
}
.section-pricing__calc-label b { font-weight: 700; }
.section-pricing__calc-label span {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
}
.section-pricing__calc-label--strong { color: #1e293b; }
.section-pricing__calc-label--strong b { font-weight: 800; }

.section-pricing__calc-price {
  font-size: 30px;
  font-weight: 900;
  color: #475569;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.section-pricing__calc-price span {
  font-size: 18px;
  font-weight: 700;
  margin-left: 2px;
}
.section-pricing__calc-price--accent {
  font-size: 38px;
  color: #e6a700;
}
.section-pricing__calc-price--accent span { font-size: 20px; }

.section-pricing__calc-formula {
  margin: 6px 0 0;
  font-size: 14px;
  color: #94a3b8;
  word-break: keep-all;
}
.section-pricing__calc-formula--accent { color: #b08800; }
.section-pricing__calc-formula sup {
  font-size: 12px;
  vertical-align: baseline;
  margin-left: 1px;
}
.section-pricing__calc-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: #94a3b8;
  word-break: keep-all;
}

/* 결론 밴드 */
.section-pricing__calc-footer {
  margin: 0;
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  border-radius: 0 0 20px 20px;
}
.section-pricing__calc-footer span {
  color: #FFD269;
  font-size: 19px;
}

/* 절감 스티커 — row 경계에 얹기 (톤 다이어트 · flow 내 상대위치) */
.section-pricing__sticker {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 74px;
  height: 74px;
  margin: -37px -32px -37px auto;
  border-radius: 50%;
  background: #f87171;
  color: white;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
  border: 2px dashed rgba(255, 255, 255, 0.55);
  transform: rotate(-6deg);
  text-align: center;
  pointer-events: none;
}
.section-pricing__sticker-amount {
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.section-pricing__sticker-amount em {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  margin-left: 1px;
}
.section-pricing__sticker-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-top: 1px;
}
.section-pricing__sticker-sub {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

.section-pricing__realcase-cta {
  display: inline-block;
  background: #FFD269;
  color: #111;
  padding: 14px 36px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(255, 210, 105, 0.3);
  transition: transform 0.2s;
}
.section-pricing__realcase-cta:hover { transform: scale(1.04); }

@media (max-width: 720px) {
  .section-pricing__realcase { padding: 32px 20px; }
  .section-pricing__realcase-flow { flex-direction:column; font-size: 16px; gap: 8px 12px; margin-top: 16px; }
  .section-pricing__realcase-flow-a { font-size: 15px; }
  .section-pricing__realcase-flow-a b { font-size: 18px; }
  .section-pricing__realcase-flow-b { font-size: 15px; }
  .section-pricing__realcase-flow-b b { font-size: 20px; }
  .section-pricing__realcase-arrow { width: 32px; height: 32px; transform: rotate(90deg); }
  .section-pricing__realcase-arrow svg { width: 16px; height: 16px; }
  .section-pricing__calc-price { font-size: 26px; }
  .section-pricing__calc-price span { font-size: 15px; }
  .section-pricing__calc-price--accent { font-size: 30px; }
  .section-pricing__calc-price--accent span { font-size: 16px; }
  .section-pricing__sticker {
    width: 64px;
    height: 64px;
    margin: -32px -6px -32px auto;
  }
  .section-pricing__sticker-amount { font-size: 15px; }
  .section-pricing__sticker-label { font-size: 11px; }
  .section-pricing__sticker-sub { font-size: 9px; }
}
/* ─── Section: Process (도입 프로세스) ────────────────────── */
.section-process__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-process__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  word-break: keep-all;
}

.section-process__card {
  background: linear-gradient(180deg, #feffff 0%, #eff6ff 50%, #dbeafe 100%);
  border-radius: 24px;
  padding: 48px 32px 0;
  color: #0f172a;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}
.section-process__subtitle {
  text-align: center;
  color: #3b82f6;
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 48px;
}

/* 4-step 그리드 */
.section-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.section-process__connector {
  position: absolute;
  top: 14px;
  left: 10%;
  right: 10%;
  height: 1px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.section-process__step {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.section-process__num {
  color: white;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-xs);
  border-radius: 4px;
}
.section-process__num--n1 { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.section-process__num--n2 { background: linear-gradient(135deg, #0284c7, #0ea5e9); }
.section-process__num--n3 { background: linear-gradient(135deg, #db2777, #ec4899); }
.section-process__num--n4 { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

.section-process__step-body {
  background: white;
  color: var(--fg);
  padding: 32px 20px;
  border-radius: 16px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.04),
    0 16px 32px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.section-process__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  align-self: center;
}
.section-process__badge--n1 { background: #e0e7ff; color: #6366f1; }
.section-process__badge--n2 { background: #e0f2fe; color: #0ea5e9; }
.section-process__badge--n3 { background: #fce7f3; color: #ec4899; }
.section-process__badge--n4 { background: #ede9fe; color: #8b5cf6; }

.section-process__desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  text-align: center;
  word-break: keep-all;
}

/* 월간 보고서 이미지 + 서류뭉치 */
.section-process__report {
  position: relative;
  max-width: 520px;
  margin: 80px auto -10px;
}
/* 하단 그라디언트 딤 (카드 배경 컬러로 자연스럽게 페이드) */
.section-process__report::after {
  content: '';
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(219, 234, 254, 0.4) 40%,
    rgba(219, 234, 254, 0.95) 90%
  );
  pointer-events: none;
  z-index: 5;
}
/* 뒤에 어긋난 서류뭉치 뒷장 2개 (depth-of-field 블러) */
.section-process__report-stack {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transform: translate(10px, -8px) rotate(2deg);
  transform-origin: bottom center;
  filter: blur(1px);
  opacity: 0.75;
}
.section-process__report-stack--2 {
  transform: translate(-9px, -4px) rotate(-1.5deg);
  background: #d1d5db;
  z-index: 0;
  filter: blur(2px);
  opacity: 0.6;
}
.section-process__report-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 반응형 */
@media (max-width: 920px) {
  .section-process__steps { grid-template-columns: repeat(2, 1fr); }
  .section-process__connector { display: none; }
  .section-process__report { margin-top: 48px; }
}
.section-process__report {

  margin: 80px auto -50px;
}
@media (max-width: 560px) {
  .section-process__steps { grid-template-columns: 1fr; gap: 12px; }
  .section-process__card { padding: 32px 20px; }
  .section-process__step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .section-process__num { flex-shrink: 0; }
  .section-process__step-body {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    gap: 8px;
    height: auto;
  }
  .section-process__badge { align-self: flex-start; }
  .section-process__desc { text-align: left; }
}
.section-trust { background: #0f172a; padding-top: var(--pad-section); padding-bottom: 0; overflow: hidden; color: rgba(255, 255, 255, 0.9); }
/* ─── Section: Trust ───────────────────────────────────────────── */
.section-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
  margin-bottom: var(--pad-section);
}
.section-trust__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 32px;
  color: #ffffff;
}
.section-trust__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.section-trust__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
}
.section-trust__chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}
.section-trust__stats { display: flex; flex-direction: column; padding-left:48px;}
.section-trust__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-block: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.374);
}
.section-trust__stat:last-child { border-bottom: none; }
.section-trust__stat-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0;
}
.section-trust__stat-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
}
/* 로고 마퀴 밴드: 다크 섹션 하단에 밝은 밴드로 마무리 */
.section-trust__logo-band {
  background: #ffffff;
  padding-block: 40px;
  margin-top: 64px;
  border-bottom: 1px solid #e2e8f0;
}
.section-trust__logo-band .marquee-wrapper { margin-bottom: 0; align-items: center;  }
.section-trust__logo-band .marquee-wrapper + .marquee-wrapper { margin-top: 12px; }
.section-trust__marquee { margin-top: 0; }
.section-trust .marquee { animation-duration: 120s; gap: 72px; padding-left: 72px; }
@media (max-width: 920px) {
  .section-trust__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
  .section-trust__stat { padding-block: 16px; }
}
.section-trust__stats {  padding-left:0;}
.section-contact { background: #f8fafc; padding-block: var(--pad-section); border-top: 1px solid #e2e8f0; }
/* ─── Section: Contact ────────────────────────────────────────── */
.section-contact__grid {
  background: white;
  border-radius: 24px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
@media (max-width: 920px) {
  .section-contact__grid { grid-template-columns: 1fr; }
}

/* 좌: Info 다크 패널 */
.section-contact__info {
  background: #0f172a;
  padding: 56px 40px;
  color: white;
  position: relative;
  overflow: hidden;
}
.section-contact__info::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.section-contact__eyebrow {
  background: rgba(255, 210, 105, 0.18);
  color: var(--accent);
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.section-contact__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 20px;
  word-break: keep-all;
  position: relative;
  z-index: 1;
}
.section-contact__lead {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 48px;
  word-break: keep-all;
  position: relative;
  z-index: 1;
}
.section-contact__meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.section-contact__meta-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.section-contact__meta-tel {
  font-size: 26px;
  font-weight: 800;
  color: white;
  letter-spacing: 0.03em;
}
.section-contact__meta-hours,
.section-contact__meta-site {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.section-contact__meta-link {
  color: white;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.section-contact__meta-link:hover { color: var(--accent); }

/* 우: Form 화이트 패널 */
.section-contact__form-wrap {
  padding: 56px 48px;
  background: white;
}
.section-contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .section-contact__row { grid-template-columns: 1fr; }
  .section-contact__info { padding: 40px 24px; }
  .section-contact__form-wrap { padding: 40px 24px; }
}
.section-contact__field { display: flex; flex-direction: column; }
.section-contact__field--full { grid-column: 1 / -1; }
.section-contact__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}
.section-contact__required {
  color: #ef4444;
  font-style: normal;
}
.section-contact__input,
.section-contact__select,
.section-contact__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: white;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #0f172a;
}
.section-contact__input:focus,
.section-contact__select:focus,
.section-contact__textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.section-contact__input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.section-contact__textarea { resize: vertical; min-height: 100px; }

/* Select wrapper (커스텀 화살표) */
.section-contact__select-wrap { position: relative; flex: 1; }
.section-contact__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  color: #475569;
}
.section-contact__select-wrap::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* 기업유형 인라인 (select + 기타 입력) */
.section-contact__inline-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.section-contact__inline-row .section-contact__input[hidden] { display: none; }
.section-contact__inline-row .section-contact__input:not([hidden]) { flex: 1; min-width: 0; }

/* 이메일 인라인 (prefix @ domain + select) */
.section-contact__email-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 6px;
  align-items: center;
}
.section-contact__email-row .section-contact__input:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.section-contact__email-row .section-contact__email-at { grid-column: 2; grid-row: 1; }
.section-contact__email-row .section-contact__input:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.section-contact__email-row .section-contact__select-wrap { grid-column: 1 / -1; grid-row: 2; }
.section-contact__email-at {
  font-size: var(--fs-sm);
  color: #64748b;
  padding: 0 4px;
  font-weight: 600;
}

/* 하단: 동의 + 제출 */
.section-contact__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.section-contact__agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: #475569;
  cursor: pointer;
  flex-wrap: wrap;
}
.section-contact__checkbox {
  accent-color: #6366f1;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.section-contact__agree-link {
  color: #6366f1;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.section-contact__submit {
  width: 100%;
  background: var(--accent);
  color: #111;
  font-size: var(--fs-body);
  font-weight: 800;
  padding: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 16px rgba(255, 176, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.section-contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 176, 0, 0.32);
}
.section-contact__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.section-contact__submit svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.section-contact__submit:hover svg { transform: translate(2px, -2px); }
/* ─── Floating Bottom Bar (하단 상시 노출 CTA 밴드) ────────── */
.bottom-bar { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: var(--container); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02); padding: 16px 24px 16px 32px; display: flex; justify-content: space-between; align-items: center; z-index: 9999; }
.bottom-bar__info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bottom-bar__title { display: inline-flex; align-items: center; flex-shrink: 0; }
.bottom-bar__logo { height: 26px; width: auto; max-width: none; display: block; flex-shrink: 0; object-fit: contain; }
.bottom-bar__divider { width: 1px; height: 14px; background: #cbd5e1; }
.bottom-bar__copy { font-size: 15px; font-weight: 600; color: #475569; letter-spacing: -0.01em; }
.bottom-bar__highlight { color: #3b82f6; font-weight: 800; }
.bottom-bar__actions { display: flex; gap: 12px; }
.bottom-bar__cta { text-decoration: none; padding: 14px 24px; font-weight: 700; border-radius: 10px; font-size: 15px; transition: all 0.2s; }
.bottom-bar__cta--secondary { background: #f1f5f9; color: #475569; }
.bottom-bar__cta--primary { padding: 14px 32px; background: var(--accent); color: #111111; font-weight: 800; box-shadow: 0 8px 16px rgba(255, 210, 105, 0.4); }

/* 플로팅 바 태블릿(≤940px): 카피만 숨기고 로고 + CTA 유지 */
@media (max-width: 940px) {
  .bottom-bar__copy { display: none; }
  .bottom-bar__actions { flex: 1; justify-content: flex-end; gap: 8px; }
  .bottom-bar__cta { flex-shrink: 0; }
}

/* 플로팅 바 모바일(≤768px): 로고 그룹 전체 숨기고 CTA만 노출 */
@media (max-width: 768px) {
  .bottom-bar__info { display: none; }
  .bottom-bar { padding: 10px 16px; }
  .bottom-bar__cta--primary { flex: 1; text-align: center; }
}

/* ─── Footer (사이트 공통 include) ─────────────────────────────── */
#footer_info {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.6);
  padding: 56px 0 72px;
  padding-bottom: calc(72px + 120px); /* 하단 플로팅 바에 가리지 않도록 */
}
#footer_info .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#footer_info .logo { margin: 0; }
#footer_info .logo_link {
  display: inline-block;
  width: 160px;
  height: 36px;
  background: url('../img/comm__logo.png') no-repeat left center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  text-decoration: none;
  transition: opacity 0.2s;
}
#footer_info .logo_link:hover { opacity: 1; }
#footer_info .blind {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#footer_info .company_info p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
  word-break: keep-all;
}
#footer_info .company_info span { display: inline-block; }
#footer_info .company_info .has_divider {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
#footer_info .company_info span:last-child {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  #footer_info { padding: 40px 0 56px; padding-bottom: calc(56px + 120px); }
  #footer_info .company_info .has_divider {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    display: block;
  }
  #footer_info .company_info br { display: none; }
}