/* ============================================================
   프렌글 랜딩 전용 스타일 — 2026-09-18 개편(E안) 반영.

   ⚠️⚠️ **이 파일은 `.lp-e` 를 붙인 페이지만 부른다.**
   2026-09-18 2차 리뉴얼부터 index.html 혼자가 아니다 — 새 IA 페이지(/service …)가
   같은 브랜드 어법을 쓰려고 이 파일을 함께 부른다(그 페이지도 body 에 lp-e 를 붙인다).
   중복 CSS 를 새로 쓰지 않으려고 고른 길이다 — 판·버튼·제목·목업 조각이 여기 다 있다.
   site.css 는 terms · privacy · refund · consent-* · faq · column · pricing 이
   함께 쓴다. 여기 있는 규칙(특히 `body` 배경과 `.gnb`)이 그쪽까지 가면
   문서 페이지가 통째로 파랗게 된다. 그래서 두 겹으로 막았다 —
     ① 이 파일을 lp-e 페이지에서만 link 한다 (문서 페이지는 안 부른다)
     ② 공용 이름(body · .gnb* · .foot · .hero · .ftrial-fab)을 건드리는 규칙은
        전부 `.lp-e` 아래에 둔다 (index.html 의 <body class="lp-e">)
   새 이름(.e-*)은 다른 페이지에 아예 없으므로 스코프를 안 씌웠다.

   ── 왜 이렇게 생겼나 ────────────────────────────────
   2026-09-17 에 만든 다섯 시안 중 **E안**이 채택됐다.
   원본 시안: _프로토타입/랜딩_개편시안E.css (+ 랜딩_개편시안E.html)
   `.e-` 로 시작하는 이름은 전부 거기서 왔다 — 시안과 운영을 나란히 비교할 수
   있게 이름을 그대로 뒀다.

     배색  바탕을 통째로 `--blue` 로 깔고 그 위에 흰(크림) 판을 띄운다.
           A~D 시안이 전부 흰 바탕 + 남색 글자였는데 그 관계를 뒤집은 판이다.
     짜임  떠 있는 알약 내비 → 가운데 히어로 → 주인공 둘레의 UI 카드
           → 낱말 띠 → 흰 판 여섯 → 파랑 위 마지막 CTA

   ⚠️ 코랄은 배지·도형·번호·낱말에만 쓴다. **버튼에는 안 쓴다**(2026-09-02 규칙).
   🔴 **파랑 위에 흰 판을 놓을 때는 글자색을 되돌려야 한다.**
      부모의 color:#fff 를 물려받아 흰 판에 흰 글씨가 된다(시안에서 실제로 났다).

   ── 손대면 안 되는 이름 ─────────────────────────────
     .hero              assets/js/nav.js 가 높이를 재서 플로팅 CTA 시점을 정한다
     .ftrial-fab        같은 파일이 .is-on 을 붙인다
     .gnb / .gnb.is-up  nav.js 가 오르내린다
     data-sec="…"       assets/js/exitTrack.js 가 읽는 섹션 이름표
   ============================================================ */


/* ============================================================
   0. 바탕 — 이 한 줄이 개편의 시작이다
   ============================================================ */
.lp-e{background:var(--blue)}

/* 랜딩 전용 토큰 */
:root{
  --e-pad:96px;   /* 흰 판 안 여백 */
  --e-r:32px;     /* 흰 판 라운드 */
  --e-gap:20px;   /* 판 사이 틈 */
  --e-max:1160px; /* 판 최대 폭 */
}


/* ============================================================
   1. GNB → 떠 있는 남색 알약
   ⚠️ 마크업은 그대로다(로그인 전환·햄버거·수강신청 링크 전부 살아 있다).
      모양만 갈아 끼운다. nav.js 의 .is-up(위로 접기)도 그대로 작동한다.
   ============================================================ */
.lp-e .gnb{
  position:fixed;top:14px;left:0;right:0;height:auto;
  background:transparent;border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.lp-e .gnb-inner{
  max-width:var(--e-max);width:calc(100% - 32px);
  background:var(--navy);border-radius:var(--r-pill);
  padding:9px 9px 9px 24px;gap:26px;
  box-shadow:0 10px 32px rgba(8,18,52,.28);
}
.lp-e .gnb-brand img{height:24px;filter:brightness(0) invert(1)}
.lp-e .gnb-menu{margin:0 auto}
/* ⚠️ .gnb-biz(기업문의)도 남색 알약 위에 선다 — 막대 항목과 같은 색이라야
   한 줄로 읽힌다. site.css 에서 글자 크기·굵기를 이미 같이 받았고,
   여기서는 **알약 위 색만** 같이 받는다(2026-09-18). */
.lp-e .gnb-menu a,.lp-e .gnb-menu button,.lp-e .gnb-biz{color:#c9d2e8}
.lp-e .gnb-menu a:hover,.lp-e .gnb-menu button:hover,.lp-e .gnb-biz:hover{color:#fff}
.lp-e .gnb-menu a[aria-current="page"],.lp-e .gnb-menu a[aria-current="true"]{color:#fff}
.lp-e .gnb-login{color:#c9d2e8}
.lp-e .gnb-login:hover{color:#fff}
.lp-e .gnb-cta-b{background:#fff;color:var(--navy);border-radius:var(--r-pill);padding:12px 22px;font-weight:700}
.lp-e .gnb-cta-b:hover{background:#fff;color:var(--blue);box-shadow:0 8px 20px rgba(0,0,0,.24)}
/* 햄버거 — ⚠️ member.css 의 기본은 **흰 버튼 + 남색 막대**다.
   남색 알약 위에 그대로 두면 흰 버튼 둘(CTA·햄버거)이 나란히 서서 무겁고,
   막대만 흰색으로 바꾸면 흰 버튼 위 흰 막대라 아예 안 보인다(실제로 그랬다).
   버튼을 반투명으로 낮추고 막대를 흰색으로 올린다. */
.lp-e .gnb-burger{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lp-e .gnb-burger:hover{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.lp-e .gnb-burger i{background:#fff}

/* ⚠️ 플로팅 CTA 가 파랑이라 **파란 바탕에서 사라진다**. 흰 버튼으로 바꾼다. */
.lp-e .ftrial-fab{background:#fff;color:var(--blue);box-shadow:0 12px 32px rgba(8,18,52,.34)}
.lp-e .ftrial-fab:hover{background:#fff;color:var(--blue-deep)}
.lp-e .kakao-fab{box-shadow:0 10px 26px rgba(8,18,52,.3)}


/* ============================================================
   2. 판 · 글씨 — 공통 어법
   ============================================================ */
.e-wrap{max-width:var(--e-max);margin:0 auto;padding:0 16px}

/* 파랑 위에 뜬 판 */
.e-panel{
  background:#fff;border-radius:var(--e-r);
  padding:var(--e-pad) 56px;margin-top:var(--e-gap);
  position:relative;overflow:hidden;
}
.e-panel--cream{background:var(--cream)}
/* 파랑 바탕에 바로 놓이는 구간(히어로 · 낱말 띠 · 마지막 CTA) */
.e-on-blue{color:#fff;position:relative}
/* 알약 내비가 떠 있다 — 없으면 메뉴로 이동했을 때 제목이 내비 뒤에 깔린다 */
.e-panel,[data-sec]{scroll-margin-top:96px}

/* 섹션 머리 두 줄 — 작은 라벨 + 그 아래 색 있는 문장 */
.e-lb{text-align:center}
/* ⚠️ 왜 라벨만 750 인가 (2026-09-21 실측)
   "글자가 자글자글하다" 의 원인은 스무딩이 아니라 **굵기 대 크기**다.
   13px·800 은 1배율 화면에서 한 획이 1.5px 쯤 되는데, 픽셀에 딱 안 떨어져서
   획마다 번짐의 양이 달라진다 — 그게 자글거림으로 보인다. 750 으로 내리면
   획이 얇아져 번짐이 고르게 앉는다. Pretendard Variable 은 45~920 사이
   아무 값이나 진짜 굵기로 그리므로(가짜 굵게가 아니다) 750 도 또렷하다.
   🔴 -webkit-font-smoothing 을 건드려서 고치려 하지 말 것.
      이미 site.css 바닥 다지기에서 antialiased 로 켜 두었고, 그 속성은
      **맥·iOS 에서만 듣는다.** 윈도우 크롬은 무시한다 —
      antialiased 와 auto 를 나란히 놓고 봤는데 구분이 안 됐다.
   ⚠️ 21px 짜리 제목 줄은 800 그대로 둔다. 거기서는 획이 충분히 굵어 안 떤다. */
.e-lb b{display:block;font-size:13px;font-weight:750;letter-spacing:.14em;color:var(--navy)}
.e-lb span{display:block;margin-top:8px;font-size:21px;font-weight:800;letter-spacing:-0.03em;color:var(--blue)}
.e-on-blue .e-lb b{color:#fff}
.e-on-blue .e-lb span{color:#ffd9d3}

.e-dis{font-size:54px;line-height:1.2;letter-spacing:-0.045em;font-weight:800}
.e-h2{font-size:36px;line-height:1.26;letter-spacing:-0.04em;font-weight:800}
.e-lead{font-size:17px;line-height:1.7;letter-spacing:-0.022em;color:var(--slate)}
.e-on-blue .e-lead{color:#d8e2ff}
.e-mark{color:var(--coral)}
.e-on-blue .e-mark{color:#ffc9c0}

.e-head{max-width:780px;margin:0 auto;text-align:center}
.e-head .e-lb{margin-bottom:22px}
.e-head p{margin-top:18px;max-width:40em;margin-left:auto;margin-right:auto}

/* 배지 — 제목 위 작은 알약 */
.e-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:-0.015em;
}
.e-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none}

/* 버튼 — ⚠️ 파랑 위에서는 흰 채움, 흰 판 위에서는 파랑 채움이 주인공 */
.e-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-pill);padding:18px 32px;
  font-size:16.5px;font-weight:700;letter-spacing:-0.025em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.e-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.e-btn--white{background:#fff;color:var(--blue);box-shadow:0 10px 28px rgba(8,18,52,.24)}
.e-btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(8,18,52,.3)}
.e-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.e-btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #fff}
.e-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 흩뿌리는 작은 도형 */
.e-shape{position:absolute;pointer-events:none;z-index:1}
.e-shape--dot{border-radius:50%;background:var(--coral)}
.e-shape--ring{border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.e-shape--sq{border-radius:5px;background:var(--coral);transform:rotate(18deg)}
.e-shape--tri{width:0;height:0;border-left:11px solid var(--coral);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* 아이콘 칸 */
.e-ico{
  width:52px;height:52px;border-radius:16px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--blue);
}
.e-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.e-ico--coral{background:var(--coral-tint);color:var(--coral)}
/* ⚠️ head 의 스프라이트에는 **면으로 그린 아이콘**(#i-msg · #i-kakao)이 섞여 있다.
   위 규칙의 fill:none 이 그대로 먹으면 속이 빈 윤곽만 남는다 — 그런 아이콘에는 이걸 붙인다. */
.e-ico--fill svg{fill:currentColor;stroke:none}


/* ============================================================
   3. HERO
   ⚠️ .hero 이름을 그대로 쓴다 — nav.js 가 이 높이를 재서 플로팅 CTA 시점을 정한다.
      site.css 의 .hero 규칙(가운데 정렬 · 위쪽 여백 · 파란 원 그림자)을 여기서 덮는다.
   ============================================================ */
.lp-e .hero{
  padding:calc(var(--gnb-h) + 46px) 0 76px;
  text-align:center;overflow:visible;
}
.lp-e .hero::before{display:none}   /* site.css 의 옅은 파란 원 — 파랑 위에서는 안 보이고 방해만 된다 */

.eh-dis{margin:24px auto 0;max-width:13em;color:#fff}
.eh-sub{margin:22px auto 0;max-width:28em}
.eh-btns{margin-top:34px}
.eh-note{margin-top:16px;font-size:13.5px;color:#d8e2ff}

/* 신뢰 한 줄 */
.eh-proof{margin-top:26px;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.eh-avas{display:flex}
.eh-avas span{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--blue);
  background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;margin-left:-9px;
}
.eh-avas span:first-child{margin-left:0}
.eh-proof p{font-size:13.5px;color:#d8e2ff;font-weight:600}

/* 🟡 여기부터 6-1절 끝까지(.eh-stage · .eh-circle · .eh-in · .eh-card* · .eh-proof ·
   .eh-avas)는 **2026-09-22 히어로 개편으로 쓰지 않는 규칙**이다. index.html 에서
   해당 마크업을 뺐으므로 아무것도 안 맞는다. 지우지 않고 둔 이유 —
   이번 개편은 "Hero 만 바꿨을 때 Hero→PROBLEM 도달률이 오르는가" 를 보는 **시험**이고,
   되돌릴 일이 생기면 _backup/2026-09-22_히어로개편전/index.html 의 히어로 마크업만
   되돌리면 되게 해 두는 편이 안전하다. (.ee-video 를 남겨 둔 것과 같은 어법이다.)
   ⚠️ 시험이 끝나고 새 히어로로 굳히기로 하면 이 덩어리와 13절·15절의 .eh-card*
      규칙을 함께 지울 것. 그때까지는 새 규칙을 여기에 얹지 말 것 — 새것은 3-1·3-2절이다. */

/* 가운데 원 + 둘레에 뜬 카드
   ⚠️⚠️ 무대 높이는 **카드 넷이 세로로 안 겹치게** 정한 값이다. 카드 내용을 한 줄
      늘릴 때마다 여기를 다시 재야 한다 — 카드가 absolute 라 저절로 밀리지 않는다.
      실측 기록
        380  →  오른쪽 두 카드가 55px 겹쳤다
        480  →  지금 값. 카드 넷이 안 겹치고 위·아래 틈이 50px 대에서 벌어진다
      ⚠️ 2026-09-18 에 512 로 올렸다가 되돌렸다. 올린 이유는 FEEDBACK 카드가 237px 로
         커져 틈이 8px 까지 붙은 것이었는데, **진짜 원인은 높이가 아니라 CSS 였다** —
         '.eh-card b' 가 목업 안의 <b> 까지 블록으로 만들어 문장이 네 줄로 갈라져 있었다.
         그 선택자를 직속 자식(> b)으로 좁히자 카드가 190px 로 줄어 높이를 올릴 이유가 없어졌다.
         **틈이 좁아지면 높이를 올리기 전에 카드가 왜 커졌는지 먼저 볼 것.**
      재는 법 — 넓은 화면에서 .eh-c2 의 bottom 과 .eh-c3 의 top 차이를 본다.
      ⚠️ 1000px 아래에서는 카드가 격자로 내려가고 min-height 가 0 이 되므로 이 값은
         넓은 화면에만 영향을 준다. */
.eh-stage{position:relative;margin:56px auto 0;max-width:840px;min-height:480px}
.eh-circle{
  width:380px;height:380px;border-radius:50%;margin:50px auto 0;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  padding:34px;
}
/* 원 안 — 사진 대신 서비스 화면 한 판 (2026-09-18 결정) */
.eh-in{
  width:100%;background:#fff;border-radius:22px;padding:18px;
  box-shadow:0 18px 44px rgba(8,18,52,.28);color:var(--navy);text-align:left;
}
.eh-in-top{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--steel)}
.eh-in-top em{font-style:normal;color:var(--coral-ink)}
/* 같은 이유로 직속 자식만 — 이 카드 안에도 목업(.mk-*)이 들어간다 */
.eh-in > b{display:block;margin-top:12px;font-size:15px;font-weight:800;letter-spacing:-0.03em}

.eh-card{
  position:absolute;z-index:3;background:#fff;border-radius:16px;padding:14px 16px;
  text-align:left;
  color:var(--navy);   /* 🔴 파랑 구역 안의 흰 판 — 글자색을 되돌려야 한다 */
  /* 그림자 두 겹 (2026-09-18) — 예전에는 먼 한 겹(0 14px 38px)뿐이라 파랑 바탕에서
     가장자리가 뭉개져 카드가 바탕에 눌어붙어 보였다. 가까운 한 겹이 가장자리를 세우고
     먼 한 겹이 띄운다. site.css 의 --sh-float 과 같은 어법이고 값만 파랑 바탕에 맞췄다. */
  box-shadow:0 2px 6px rgba(8,18,52,.18), 0 20px 46px rgba(8,18,52,.34);
  /* 둥둥 뜨는 느낌 — 아래 6-1절 참고 */
  animation:eh-bob 4.5s ease-in-out infinite;
  will-change:transform;
}
.eh-card-lb{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--steel)}
/* 🔴 **직속 자식만**(> b). 이 규칙은 카드 제목용인데 자손 전체에 걸면 목업 안의
   <b>(교정된 낱말 등)까지 블록이 되어 문장이 줄마다 쪼개진다.
   2026-09-18 에 실제로 터졌다 — FEEDBACK 카드의 "I had bread and coffee today." 가
   한 줄에 들어갈 폭(154px < 168px)이었는데도 'I' / 'had' / 'bread and coffee today.'
   세 줄로 갈라졌고, 그래서 **교정이라는 것 자체가 안 읽혔다.** */
.eh-card > b{display:block;margin-top:6px;font-size:14px;font-weight:800;letter-spacing:-0.03em}
.eh-c1{left:0;top:14%;width:216px}
.eh-c2{right:0;top:2%;width:210px}
.eh-c3{right:2%;bottom:4%;width:224px}
.eh-c4{left:3%;bottom:10%;width:186px}


/* ── 6-1. 둥둥 뜨는 카드 넷 (2026-09-18) ─────────────────────────
   ⚠️ 폭이 9px 인 이유 — 카드 사이 세로 틈이 가장 좁은 곳이 50px 대다(위 .eh-stage
      주석의 실측). 이보다 크게 잡으면 넓은 화면에서 카드끼리 스친다.
      ⚠️ 줄어드는 양은 18px 이 아니라 **9px** 이다. 키프레임이 0 에서 -9 로만 가고
         +9 쪽으로는 안 가서, 최악이라야 위 칸이 제자리(0)일 때 아래 칸이 -9 로
         올라온 경우다. 양쪽으로 흔들게 고치면 이 계산이 두 배가 된다.
      실측(1280폭, 2026-09-18): 한 주기를 80번 표본으로 떠 가장 좁아졌을 때
      **오른쪽 50px · 왼쪽 54px** 가 남았다. 폭을 키우거나 카드 내용이 한 줄
      늘어날 때는 이 숫자를 다시 잴 것.
   ⚠️ 지연값이 **음수**다. 0 부터 시작하면 넷이 같은 높이에서 동시에 출발해
      한 덩어리처럼 오르내린다. 음수로 주면 로드 순간 이미 서로 어긋난 위상에 있다.
   ⚠️ transform 을 쓴다(top/margin 이 아니라). 저 넷은 absolute 라 top 을 건드리면
      매 프레임 레이아웃을 다시 계산한다 — transform 은 합성만 한다.
   ⚠️ 카드 안에 애니메이션을 얹지 말 것. 이 무대의 주인공은 가운데 화면이고
      카드는 거드는 것이다. 넷이 크게 움직이면 읽을 것이 흔들린다. */
@keyframes eh-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
/* ⚠️ 주기를 바꾸면 **이 넷도 같이 줄이거나 늘려야 한다.** 지연은 초 단위라
   주기가 짧아지면 위상이 밀려서 넷이 몰린다. 2026-09-18 에 5.4s → 4.5s 로
   줄이면서 같은 비율(×0.833)로 다시 잡은 값이다 — 주기 대비 4% · 31% · 58% · 80%.
   고르게 4등분(0/25/50/75%)하지 않은 이유: 정확히 나누면 넷이 규칙적으로
   물결쳐서 기계 같아 보인다. */
.eh-c1{animation-delay:-0.2s}
.eh-c2{animation-delay:-1.4s}
.eh-c3{animation-delay:-2.6s}
.eh-c4{animation-delay:-3.6s}

/* 움직임을 줄여 달라고 한 사람에게는 멈춘 채로 보여 준다(그림자는 그대로 둔다 —
   그건 움직임이 아니라 생김새다). site.css 가 쓰는 방식과 같게 규칙 바로 옆에 둔다. */
@media(prefers-reduced-motion:reduce){
  .eh-card{animation:none}
}

/* ── 3-1. 두 칸 히어로 (2026-09-22) ─────────────────────────────
   첫 화면 이탈 55.8% 를 보고 히어로 한 구역만 다시 짰다. 규칙 하나 —
   **첫 화면에는 읽을 것 하나, 누를 것 하나, 볼 것 하나만 둔다.**

   왼쪽은 읽는 칸, 오른쪽은 "하루가 이어진다" 를 보이는 칸이다. 예전처럼
   가운데에 다 쌓지 않는 이유는 세로 길이다 — 가운데 정렬은 배지부터
   카드 넷까지가 한 줄로 흘러 1,400px 을 먹었고, 그래서 PROBLEM 이
   첫 화면에서 두 번 스크롤 밖에 있었다. 두 칸으로 접으면 절반이 된다.

   ⚠️ 1000px 아래에서는 한 칸으로 돌아간다. 13절이 이미 그 폭에서
      .e-shape 를 빼고 글자를 줄인다 — 같은 지점을 쓴다. */
.eh-2col{position:relative}
/* 🔴 두 칸은 흩뿌린 도형(.e-shape · z-index:1)보다 **반드시 위**에 있어야 한다.
   가운데 정렬 때는 도형이 빈 양옆에만 있어서 겹칠 일이 없었는데, 두 칸에서는
   같은 자리가 글자 자리다. z-index 를 안 주면 코랄 네모가 설명 문장 위에 얹힌다. */
.eh-copy,.eh-flow{position:relative;z-index:2}

@media(min-width:1001px){
  /* 🔴 **.lp-home** 이어야 한다(홈에만 붙는 표). .lp-e 로 두면 business·curriculum·
     guide·learn·service 와 그 아래 상세까지 **서른 장의 히어로 여백이 같이 움직인다** —
     .lp-e 는 랜딩 어법을 쓰는 장 전부가 달고 있고, 그 장들도 .hero 를 하나씩 갖고 있다.
     2026-09-22 에 실제로 그렇게 썼다가 되돌렸다. 이 절의 다른 규칙은 .eh-* 라
     홈에만 있는 이름이어서 괜찮지만, .hero 는 공용 이름이다. */
  .lp-home .hero{padding:calc(var(--gnb-h) + 54px) 0 72px}
  .eh-2col{
    display:grid;
    /* ⚠️ 1.15 / 0.85 인 이유 — 왼쪽이 제목을 두 줄에 담아야 한다.
       1128px(=e-max 1160 − 좌우 16) 에서 틈 48 을 빼면 1080 이고,
       1.15 쪽이 621px 이다. 아래 44px 제목의 실측(602px)이 여기 들어간다.
       반반(540px)으로 두면 제목이 세 줄로 터진다. */
    grid-template-columns:1.15fr 0.85fr;
    gap:48px;align-items:center;
  }
  .eh-copy{text-align:left}
  /* 가운데 정렬 때 쓰던 auto 여백과 폭 제한을 푼다 — 이제 칸이 폭을 정한다 */
  /* 🔴 **표를 하나 더 붙여야 한다**(.lp-home → 0,2,0). 그냥 .eh-dis 로 두면 13절의
     `@media(max-width:1280px){.e-dis{font-size:48px}}` 이 파일 뒤쪽이라 이겨 버리고,
     그러면 **화면이 좁아질수록 제목이 커지는** 거꾸로 된 일이 난다
     (1281px 44px → 1280px 48px). 2026-09-22 에 실제로 그랬다.
     ⚠️ 유동 크기로 두는 이유 — 왼쪽 칸이 1440px 에서 621px, 1001px 에서 530px 로
     줄어든다. 고정값이면 좁은 쪽에서 제목이 세 줄로 터진다.
     실측(2026-09-22, 두 줄 유지): 1440→48px · 1280→43px · 1100→38px · 1024→38px. */
  .lp-home .eh-dis{margin:22px 0 0;max-width:none;font-size:clamp(38px,3.35vw,48px)}
  .eh-sub{margin:20px 0 0;max-width:none}
  .eh-btns{justify-content:flex-start}
  .eh-note{text-align:left}
}
/* 좁아지면 줄바꿈을 푼다 — 억지로 네 줄을 지키면 긴 줄이 두 줄로 터져 여섯 줄이 된다 */
@media(max-width:1000px){
  .eh-br{display:none}
  /* 두 칸이 한 줄로 내려오는 구간(768~1000px). 그냥 두면 그림이 **판 폭 그대로**
     늘어나 900px 화면에서 853px 짜리 카드에 한 문장만 들어앉는다 — 비어 보인다.
     글 읽는 폭에 맞춰 가운데로 모은다. 폰(≤767px)에서는 화면이 이보다 좁아
     이 값이 걸리지 않으므로 15-3절의 전폭 배치가 그대로 산다. */
  .eh-flow{max-width:560px;margin:34px auto 0}
}

/* ── 3-2. 두 단계 — 어제 수업 → 오늘 카톡 ───────────────────────
   ⚠️ 칸을 늘리지 말 것. 기능을 넷 보여 주던 예전 무대가 정확히 그래서
      안 읽혔다. 여기서 말할 것은 한 가지뿐이다 — **다음 날로 이어진다.**
   ⚠️ 흰 판이라 글자색을 되돌려야 한다(파랑 구역 안이다). .eh-card 가 쓰던
      두 겹 그림자를 그대로 쓴다 — 가까운 겹이 가장자리를 세우고 먼 겹이 띄운다. */
.eh-flow{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left}
.eh-step{
  background:#fff;border-radius:18px;padding:18px 20px;color:var(--navy);
  box-shadow:0 2px 6px rgba(8,18,52,.18), 0 20px 46px rgba(8,18,52,.34);
}
/* 라벨 — '어제' / '오늘' 만 진하게. 이 두 낱말이 곧 이 그림의 뜻이다 */
.eh-step-lb{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--steel);
}
.eh-step-lb em{
  font-style:normal;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--tint);color:var(--blue);letter-spacing:.04em;
}
.eh-step--coach .eh-step-lb em{background:var(--coral-tint);color:var(--coral-ink)}
/* 🔴 직속 자식만(> b) — 이 안에도 목업(.mk-*)이 들어간다. 자손 전체에 걸면
   말풍선 속 <b> 까지 블록이 되어 문장이 줄마다 쪼개진다(2026-09-18 사고). */
.eh-step > b{display:block;margin-top:9px;font-size:15.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.eh-talk{margin-top:12px}
.eh-who{
  display:block;margin-bottom:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--blue);
}
.eh-who--coach{color:var(--coral-ink)}
.eh-flow .mk-msg{max-width:100%}

/* 두 칸을 잇는 화살표 — 스프라이트의 오른쪽 화살표를 세운다 */
.eh-down{
  display:flex;align-items:center;justify-content:center;
  height:34px;color:rgba(255,255,255,.72);
}
.eh-down svg{
  width:20px;height:20px;transform:rotate(90deg);
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}



/* ============================================================
   4. 낱말 띠 — 서비스가 하는 일 넷
   ============================================================ */
.e-strip{margin-top:var(--e-gap);padding:26px 24px;text-align:center}
.e-strip-lb{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#d8e2ff}
.e-strip-row{margin-top:16px;display:flex;justify-content:center;gap:12px 32px;flex-wrap:wrap}
.e-strip-row span{font-size:17px;font-weight:800;color:#fff;letter-spacing:-0.03em}
.e-strip-row i{color:#7d9aee;font-style:normal}


/* ============================================================
   5. 목업 조각 — 사진 대신 쓰는 CSS 덩어리
   🔴 색을 직접 정한다. 파랑 구역 안에 놓이면 흰 글씨를 물려받는다.
   ============================================================ */
.mk-msg{padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.5;display:block;max-width:92%}
.mk-msg--bot{background:var(--cream);color:var(--navy);border-top-left-radius:4px}
.mk-msg--me{background:var(--blue);color:#fff;border-top-right-radius:4px;margin-left:auto}
.mk-msg + .mk-msg{margin-top:6px}
.mk-bars{display:flex;align-items:flex-end;gap:6px;height:44px}
.mk-bars i{flex:1;border-radius:4px 4px 2px 2px;display:block;background:var(--tint)}
.mk-bars i.on{background:var(--blue)}
.mk-fix{background:var(--cream);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--navy)}
/* 고치기 전 문장 — steel 은 흰 바탕에서 2.91:1 이라 11~12px 글자에서 안 읽힌다
   (WCAG AA 본문 기준 4.5:1). slate 는 5.26:1 이다. 고친 문장(navy 14.52:1)보다는
   여전히 옅어서 '전/후' 위계는 그대로 남는다. */
.mk-fix s{color:var(--slate)}
.mk-fix b{color:var(--blue)}
.mk-fix + .mk-fix{margin-top:7px}
/* 목업 밑 한 줄 — "왜 그렇게 고쳤는지" 나 "무엇이 담기는지" 를 적는다.
   ⚠️ 목업 안에 넣지 않고 밖에 두는 이유 — 상자 안은 **화면을 흉내 낸 것**이고
      이 줄은 그 화면에 대한 설명이다. 섞으면 둘 다 읽는 사람이 헷갈린다. */
.mk-why{margin-top:8px;font-size:12px;font-weight:600;line-height:1.55;letter-spacing:-0.02em;color:var(--slate)}
/* 1:1 수업 화면 — 두 칸(강사 · 나)으로 '둘만 있는 수업' 을 보인다.
   ⚠️ 2026-09-18 개편에서 이 자리에 실제 수업 영상을 넣었다가 **같은 날 뺐다**(운영 지시:
      출연자 노출 안 함). 사람 사진·영상 없이 같은 뜻을 전하려고 만든 조각이다.
   ⚠️ 아래 .ee-video 규칙은 지우지 않았다 — 되살릴 일이 있으면 마크업만 되돌리면 된다. */
.mk-meet{flex:1;min-height:96px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-meet span{
  border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;
}
.mk-meet span:first-child{background:var(--navy);color:#fff}
.mk-meet span:last-child{background:var(--blue);color:#fff}
.mk-meet svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   6. PROBLEM
   ============================================================ */
.ep-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:600px;margin:44px auto 0}
.ep-day{border-radius:14px;padding:14px 4px;text-align:center;background:var(--cream)}
.ep-day b{display:block;font-size:12.5px;font-weight:800;color:var(--steel)}
.ep-day i{display:block;margin:9px auto 0;width:8px;height:8px;border-radius:50%;background:#e0d7c9;font-style:normal}
.ep-day--on{background:var(--blue)}
.ep-day--on b{color:#fff}
.ep-day--on i{background:#fff}
.ep-legend{display:flex;justify-content:center;gap:20px;margin-top:14px;font-size:12.5px;color:var(--steel);font-weight:600;flex-wrap:wrap}
.ep-legend span{display:inline-flex;align-items:center;gap:7px}
.ep-legend i{width:8px;height:8px;border-radius:50%;background:#e0d7c9;display:block}
.ep-legend i.on{background:var(--blue)}

.ep-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.ep-step{background:var(--cream);border-radius:20px;padding:24px 22px}
.ep-no{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--blue)}
.ep-step b{display:block;margin-top:11px;font-size:16.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.ep-step p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--slate)}
.ep-step--gap{background:#fff;box-shadow:inset 0 0 0 2px #efe6d9}
.ep-step--gap b,.ep-step--gap .ep-no{color:var(--steel)}
/* 2026-09-23 — 꽉 찬 --coral 위 흰 글은 3.3:1 로 AA 미달이었다. 바탕을 --coral-ink 로 내려 5.1:1.
   번호·본문도 순백으로 올렸다(옛 #ffd9d3 은 2.5:1). */
.ep-step--back{background:var(--coral-ink);color:#fff}
.ep-step--back b{color:#fff}
.ep-step--back .ep-no{color:#fff}
.ep-step--back p{color:#fff}
.ep-step--back p{color:#fff2f0}

.ep-bridge{margin-top:48px;text-align:center}
.ep-bridge b{font-size:25px;font-weight:800;letter-spacing:-0.04em;line-height:1.35}
.ep-bridge span{display:block;margin-top:11px;font-size:15px;color:var(--slate)}


/* ============================================================
   7. DUAL CARE
   ============================================================ */
.ed{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:52px}
.ed-role{background:var(--cream);border-radius:24px;padding:32px}
.ed-role--coach{background:var(--coral-tint)}
.ed-role-head{display:flex;align-items:center;gap:14px}
.ed-role h3{font-size:22px;letter-spacing:-0.04em;font-weight:800;line-height:1.2}
.ed-role h3 small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--steel);margin-bottom:5px}
.ed-role ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.ed-role li{display:flex;gap:11px;align-items:flex-start;font-size:15px;letter-spacing:-0.025em;line-height:1.5;font-weight:600}
.ed-role li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ed-role--coach li svg{color:var(--coral)}
.ed-when{margin-top:22px;padding-top:15px;border-top:2px solid rgba(22,37,90,.08);font-size:12.5px;font-weight:700;color:var(--steel)}
.ed-me{width:164px;text-align:center;background:var(--blue);color:#fff;border-radius:24px;padding:28px 16px}
.ed-me-ava{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18)}
.ed-me b{display:block;margin-top:12px;font-size:18px;font-weight:800;letter-spacing:-0.035em}
.ed-me span{display:block;margin-top:5px;font-size:12px;color:#d8e2ff}
/* 🔴🔴 **이 규칙은 바로 위 `.ed-me span` 보다 뒤에, 그리고 더 진하게 와야 한다.**
   랜딩의 이모지 칸은 `<span class="ed-me-ava">` 다. `.ed-me span` 은 (0,1,1) 이고
   홑클래스 `.ed-me-ava` 는 (0,1,0) 이라 **순서와 상관없이 span 쪽이 이긴다** —
   그래서 display:flex 가 block 으로, font-size 가 12px 로 덮여 있었다.
   결과: 56px 원 안에 12px 이모지가 **위쪽에 치우쳐** 찍혔다(2026-09-18 실측 —
   위 여백 2px / 아래 여백 40px). 원·배경만 보이고 가운데 정렬은 한 번도 먹은 적이 없다.
   ⚠️ line-height:1 이 필요하다. 상속된 1.5 를 그대로 두면 줄상자가 글자보다 커서
      flex 로 가운데를 맞춰도 글리프가 그 안에서 또 치우친다.
   ⚠️ business.html 의 듀얼케어는 같은 칸이 <div> 라 이 사고를 안 겪었다.
      이 규칙은 그쪽도 함께 받는다(크기가 같아진다 — 일부러 그렇게 뒀다). */
.ed-me .ed-me-ava{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
  font-size:32px;line-height:1;
}
.ed-arrow{display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:17px}
.ed-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}


/* ============================================================
   8. EXPERIENCE — 하루 네 칸
   ⚠️ STEP 01 의 화면은 **실제 수업 영상**이다(2026-09-18 결정).
      옛 phones 섹션에 있던 Cloudinary 영상 둘 중 하나를 여기로 옮겼다.
   ============================================================ */
.ee{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.ee-card{background:#fff;border-radius:22px;padding:24px;display:flex;flex-direction:column}
.e-panel--cream .ee-card{background:#fff}
.ee-no{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.ee-card h3{margin-top:16px;font-size:17px;letter-spacing:-0.035em;line-height:1.35;font-weight:800}
.ee-card > p{margin-top:9px;font-size:13.5px;color:var(--slate);line-height:1.6}
.ee-mk{margin-top:18px;background:var(--cream);border-radius:14px;padding:14px;min-height:140px;display:flex;flex-direction:column;gap:8px}
.ee-time{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--steel);letter-spacing:.03em}
.ee-time em{font-style:normal;color:var(--coral-ink)}
/* 실제 수업 영상 — 세로 영상이라 9:16 틀에 맞춰 잘라 넣는다.
   ⚠️ **2026-09-18 현재 쓰이지 않는다.** STEP 01 의 영상을 뺐고(출연자 노출 안 함)
      그 자리는 위 .mk-meet 가 맡는다. 규칙은 되살릴 때를 위해 남겨 둔다 —
      영상 주소는 _backup 의 예전 index.html 에 그대로 있다. */
.ee-video{
  flex:1;min-height:150px;border-radius:12px;overflow:hidden;background:var(--navy);position:relative;
}
.ee-video video{width:100%;height:100%;object-fit:cover;display:block}


/* ============================================================
   9. DAILY TALK
   ============================================================ */
/* ⚠️ 두 칸의 키가 많이 다르다(실측 2026-09-18 — 랜딩·코칭상세 왼 236 / 오른 428).
      start 로 두면 왼쪽 목록만 위에 붙고 그 아래가 통째로 비어 보였다. 가운데로 맞춘다.
      ⚠️ 이 한 줄이 랜딩(#coach) · 이용 가이드 셋 · /service/coaching 넷을 함께 움직인다. */
.et{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-top:48px}
.et-list{list-style:none;display:flex;flex-direction:column;gap:15px}
.et-list li{display:flex;gap:14px;align-items:flex-start}
.et-list b{font-size:15.5px;font-weight:800;letter-spacing:-0.03em;display:block}
.et-list p{margin-top:3px;font-size:13.5px;color:var(--slate);line-height:1.6}
.et-no{
  width:30px;height:30px;border-radius:50%;flex:none;margin-top:1px;
  background:var(--coral-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}
.et-stage{background:var(--cream);border-radius:24px;padding:28px}
.et-row{display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:start}
.et-step{text-align:right;padding-top:11px;font-size:12px;font-weight:800;color:var(--steel)}
.et-step b{display:block;font-size:13px;color:var(--coral-ink);margin-bottom:3px}
.et-body{padding-bottom:18px}
.et-bubble{border-radius:16px;padding:13px 16px;font-size:14.5px;line-height:1.55;letter-spacing:-0.02em;max-width:400px}
.et-bubble--coach{background:#fff;border-top-left-radius:5px}
.et-bubble--me{background:var(--blue);color:#fff;border-top-right-radius:5px;margin-left:auto}
.et-bubble s{color:var(--steel)}
.et-bubble em{font-style:normal;font-weight:800;color:var(--blue)}
.et-bubble .ok{color:#1f9d55;font-weight:800}
.et-ko{margin-top:9px;max-width:400px;font-size:13.5px;line-height:1.65;color:var(--slate);letter-spacing:-0.02em}
.et-ko b{color:var(--navy);font-weight:700}
.et-who{font-size:11px;font-weight:800;color:var(--steel);margin-bottom:6px;display:block}


/* ============================================================
   10. LEARNING SYSTEM — 큰 번호 + 물결 이음선
   ============================================================ */
.el{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px;position:relative}
.el-step{position:relative}
.el-n{font-size:44px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--coral)}
.el-en{margin-top:12px;font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.el-step h3{margin-top:7px;font-size:16.5px;letter-spacing:-0.035em;line-height:1.4;font-weight:800}
.el-step p{margin-top:10px;font-size:13.5px;line-height:1.65;color:var(--slate)}
.el-step:not(:last-child)::after{
  content:'';position:absolute;top:22px;right:-18px;width:calc(100% - 46px);height:10px;
  background-repeat:repeat-x;background-size:22px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 22 10'%3E%3Cpath d='M0 5c3-6 8 6 11 0s8-6 11 0' fill='none' stroke='%23d8dff1' stroke-width='1.6'/%3E%3C/svg%3E");
}
.el-loop{margin-top:34px;text-align:center;font-size:14.5px;font-weight:700;color:var(--steel);letter-spacing:-0.02em}
.el-loop b{color:var(--blue)}


/* ============================================================
   11. TRUST — 지표 넷 + 후기
   ⚠️⚠️ [운영팀 확인 필요 — 2026-09-07 부터 이어지는 항목]
      아래 네 숫자는 **근거 표기가 어디에도 없다.** 표시광고법상 실증 자료 없는
      통계 표기는 문제가 되고, 답변엔진도 출처 없는 수치는 인용하지 않는다.
      집계 기준일 · 조사 대상 · 조사 기간 · 산정 기준을 받으면 각주에 넣는다.
      (같은 이유로 JSON-LD 의 AggregateRating 도 넣지 않았다)
      2026-09-18 개편에서는 **디자인만 바꾸고 값은 그대로 옮겼다.**
   ============================================================ */
.en{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.en-item{background:var(--cream);border-radius:20px;padding:28px 18px;text-align:center}
.en-n{font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-0.04em;line-height:1}
.en-n small{font-size:.56em;font-weight:700;margin-left:1px}
.en-l{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--steel)}
.en-note{margin-top:16px;text-align:center;font-size:12.5px;color:var(--steel);line-height:1.7}

.er{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.er-card{background:var(--cream);border-radius:20px;padding:28px}
.er-card p{margin-top:2px;font-size:14.5px;line-height:1.7;color:var(--slate);letter-spacing:-0.02em}
/* 흐르는 후기 두 줄 — site.css 의 .mq / .card 를 그대로 쓴다.
   ⚠️ .card 가 흰 바탕이라 흰 판 위에서는 카드가 안 보인다. 판 위에서만 크림으로 바꾼다. */
.e-panel .mq-card{background:var(--cream);box-shadow:none}


/* ============================================================
   12. FINAL CTA — 파랑 바탕으로 되돌아온다
   ============================================================ */
/* ⚠️ 아래 여백은 **푸터가 뜬 만큼을 빼고** 준다.
   이 띠 밑에는 곧바로 푸터가 오는데, 그 푸터는 판처럼 떠 있어서 margin-top 으로
   --e-gap 을 또 갖는다(아래 .lp-e .foot). 그래서 padding-bottom 을 위와 같은 96 으로
   두면 실제로 보이는 파란 띠는 위 96 / 아래 116 이 된다.
   예전 값 104 에서는 위 96 / 아래 124 로 28px 이 어긋나 있었다(2026-09-18 지적).
   calc 로 묶어 두면 --e-gap 을 바꿔도 위아래가 계속 같다. */
.ec{padding:96px 0 calc(96px - var(--e-gap));text-align:center}
.ec h2{color:#fff;max-width:15em;margin:0 auto}
.ec p{margin:22px auto 0;max-width:28em;font-size:17px;line-height:1.7;color:#d8e2ff}
.ec-alt{margin-top:22px;font-size:14.5px;color:#d8e2ff}
.ec-alt a{color:#fff;font-weight:700;margin-left:6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5);cursor:pointer}
.ec-alt a:hover{text-decoration-color:#fff}
.ec .avas{margin-top:32px}
.ec .avas span{color:#d8e2ff}
.ec .avas .ava{background:rgba(255,255,255,.18);color:#fff}

/* 푸터 — 흰 슬래브도 판처럼 띄운다 */
.lp-e .foot{
  max-width:var(--e-max);width:calc(100% - 32px);margin:var(--e-gap) auto 0;
  border-radius:var(--e-r) var(--e-r) 0 0;border-top:0;
}


/* ============================================================
   13. 좁은 화면 — site.css 와 같은 지점에서만 내려간다
   ============================================================ */
@media(max-width:1280px){
  :root{--e-pad:80px}
  .e-dis{font-size:48px}
  .e-h2{font-size:33px}
  .eh-c1,.eh-c4{left:-8px}
  .eh-c2,.eh-c3{right:-8px}
}
@media(max-width:1000px){
  :root{--e-pad:56px;--e-r:26px}
  .e-dis{font-size:40px}
  .e-h2{font-size:29px}
  .e-lead{font-size:16px}
  .e-panel{padding:var(--e-pad) 28px}
  .lp-e .gnb-inner{padding-left:20px}
  /* 히어로 — 떠 있는 카드를 원 아래 격자로 내린다.
     ⚠️ 감추지 않는다. 네 칸이 "수업 뒤가 있는 서비스" 를 말하는 핵심이다. */
  .eh-stage{min-height:0}
  .eh-circle{width:300px;height:300px;padding:26px}
  /* 🔴 격자로 내려오면 **둥둥 뜨는 것을 끈다.** 절대배치일 때는 카드가 빈 공간에 떠
     있어서 움직임이 '떠 있다' 로 읽히지만, 격자에서는 옆칸과 줄이 맞아 있어서
     같은 움직임이 '칸이 흔들린다' 로 읽힌다. 읽을 것이 들어 있는 칸이라 더 그렇다. */
  .eh-card{
    position:static;width:auto!important;animation:none;
    box-shadow:0 1px 4px rgba(8,18,52,.14), 0 10px 26px rgba(8,18,52,.24);
  }
  .eh-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
  .ep-flow{grid-template-columns:repeat(2,1fr)}
  .ee{grid-template-columns:repeat(2,1fr)}
  .el{grid-template-columns:repeat(2,1fr);gap:28px}
  .el-step:not(:last-child)::after{display:none}
  .en{grid-template-columns:repeat(2,1fr)}
  .er{grid-template-columns:1fr}
  .et{grid-template-columns:1fr;gap:28px}
  /* 듀얼케어 — 세로로. ⚠️ 화살표 방향도 돌린다(→← 가 아니라 ↓↑) */
  .ed{grid-template-columns:1fr;gap:14px;justify-items:center;max-width:520px;margin-left:auto;margin-right:auto}
  .ed-role{width:100%}
  .ed-wrap{grid-template-columns:1fr;justify-items:center;gap:8px;width:100%}
  .ed-me{width:100%;max-width:300px}
  .ed-arrow{font-size:0}
  .ed-arrow::after{font-size:18px}
  .ed-wrap .ed-arrow:first-child::after{content:'↓'}
  .ed-wrap .ed-arrow:last-child::after{content:'↑'}
  .e-shape{display:none}
}
@media(max-width:760px){
  .e-dis{font-size:36px}
  .e-h2{font-size:27px}
  .ee{grid-template-columns:1fr}
  .et-row{grid-template-columns:1fr;gap:0}
  .et-step{text-align:left;padding-top:0;margin-bottom:8px}
  .et-step b{display:inline;margin-right:7px}
  .et-body{padding-bottom:22px}
  .et-bubble,.et-ko{max-width:100%}
}
@media(max-width:640px){
  :root{--e-pad:36px;--e-r:22px;--e-gap:12px}
  .e-panel{padding:var(--e-pad) 20px}
  /* ⚠️ 모바일 H1 은 세 줄을 넘기지 않는다.
     실측(2026-09-17): 가장 긴 줄 "그 다음이 더 중요하니까." 가 34px 에서 303px,
     375폭에서 쓸 수 있는 폭은 327px. 360폭(312px)에도 들어간다. */
  .e-dis{font-size:34px;line-height:1.26}
  .e-h2{font-size:25px;line-height:1.3}
  .e-lead{font-size:15.5px}
  .e-lb span{font-size:18px;font-weight:750}   /* 작아지면 굵기도 함께 내린다 — 위 .e-lb b 주석 */
  .e-btn{width:100%;padding:17px 24px;font-size:16px}
  .e-btns{flex-direction:column}
  .lp-e .hero{padding:calc(var(--gnb-h) + 26px) 0 48px}
  .eh-circle{width:230px;height:230px;padding:18px}
  .eh-in{padding:14px;border-radius:16px}
  .eh-cards{grid-template-columns:1fr}
  .eh-stage{margin-top:36px}
  .lp-e .gnb-inner{padding:7px 7px 7px 16px;width:calc(100% - 24px)}
  .lp-e .gnb-brand img{height:20px}
  .lp-e .gnb-cta-b{padding:10px 16px;font-size:13px}
  .e-strip{padding:20px 16px}
  .e-strip-row{gap:8px 18px}
  .e-strip-row span{font-size:14.5px}
  .e-strip-row i{display:none}
  .ep-week{gap:5px;margin-top:32px}
  .ep-day{padding:11px 2px;border-radius:11px}
  .ep-day b{font-size:11px}
  .ep-flow{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .ep-bridge{margin-top:32px}
  .ep-bridge b{font-size:21px}
  .ed{margin-top:32px}
  .ed-role{padding:24px}
  .ee{gap:12px;margin-top:32px}
  .et{margin-top:32px}
  .et-stage{padding:20px 16px}
  .el{grid-template-columns:1fr;gap:22px;margin-top:32px}
  .el-n{font-size:36px}
  .en{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}
  .en-n{font-size:27px}
  .er{gap:12px}
  .er-card{padding:22px}
  /* 좁은 화면도 같은 셈 — --e-gap 이 12px 이라 아래는 52px 이 된다 */
  .ec{padding:64px 0 calc(64px - var(--e-gap))}
  .lp-e .foot{width:calc(100% - 24px);border-radius:22px 22px 0 0}
}
@media(max-width:360px){
  .e-dis{font-size:30px}
}


/* ============================================================
   14. IA 내비를 남색 알약 위에 올리기 (2026-09-18 2차 리뉴얼)
   ------------------------------------------------------------
   site.css 9절이 그린 드롭다운·이동 메뉴는 **흰 바탕 기준**이다.
   lp-e 페이지에서는 그 둘이 남색 알약 위에 서므로 여기서 색만 되돌린다.

   🔴 이 절이 없으면 드롭다운 판이 흰 판에 흰 글씨가 된다.
      `.lp-e .gnb-menu a{color:#c9d2e8}`(1절)이 판 안의 링크까지 물들이기 때문이다.
      이 파일 머리에 적어 둔 그 함정이 실제로 여기서 터진다.
   ============================================================ */

/* 드롭다운 — 여는 글자는 알약 위(옅은 흰색), 열린 판 안은 흰 바탕 기준으로 되돌린다.
   ⚠️ 알약 내비는 흰 막대보다 두껍다(padding 9px + 흰 CTA 단추). 판을 내리는 간격을
      2px 더 준다 — 안 주면 흰 판이 알약을 덮고 올라온다. */
.lp-e{--nav2-gap:24px}
.lp-e .nav2-d{box-shadow:0 18px 44px rgba(8,18,52,.28),0 0 0 1px rgba(255,255,255,.6)}
.lp-e .nav2-d a{color:var(--slate)}
.lp-e .nav2-d a:hover{background:var(--tint);color:var(--blue)}
.lp-e .nav2-d a.is-hub{color:var(--navy)}
.lp-e .nav2-d span{color:var(--steel)}

/* 좁은 화면 이동 메뉴 — 햄버거와 같은 처리(1절 주석 참고).
   흰 단추 둘이 나란히 서지 않게 반투명으로 낮추고 막대만 흰색으로 올린다. */
.lp-e .mnav-btn{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lp-e .mnav-btn:hover{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.lp-e .mnav-btn i{background:#fff}
.lp-e .mnav-panel{box-shadow:0 18px 44px rgba(8,18,52,.34),0 0 0 1px rgba(255,255,255,.55)}


/* ============================================================
   15. 모바일 정보구조 (≤767px) — 2026-09-21
   ------------------------------------------------------------
   무엇을 한 것인가
     PC 를 그대로 줄여 놓은 구간을 걷어내고, **좁은 화면에서 읽는 순서**를
     다시 짰다. 글은 하나도 지우지 않았다 — 자리와 표현 방식만 바꿨다.
     실측(390폭): 문서 전체 11,644px 였다. 섹션별로는 히어로 1,689 ·
     EXPERIENCE 1,711 · REVIEW 1,593 이 세 곳이 절반을 먹고 있었다.

   왜 `.lp-home` 아래에만 두는가
     `.e-* / .ee / .er / .el / .ed / .et` 은 랜딩만의 이름이 아니다.
     /service · /guide · 상세 18장이 같은 이름을 쓴다(그쪽도 body 에 lp-e 가 있다).
     스코프를 빼면 여기서 만든 캐러셀·타임라인이 그 마흔몇 장까지 간다.
     🔴 이 절에 규칙을 더할 때 **`.lp-home` 을 빠뜨리지 말 것.**

   왜 767px 인가
     이 파일의 기존 마디는 1280 / 1000 / 760 / 640 이다. 767 은 태블릿 세로
     (768)를 건드리지 않으면서 폰 가로(landscape 736)까지 담는 경계다.
     ⚠️ 641~767 구간에는 640 블록이 **안** 걸린다. 그래서 이 절은 640 블록에
        기대지 않고 혼자 서 있어야 한다 — 값을 여기서 다시 적는 이유다.

   손대지 않은 것
     · 콘텐츠·문장·CTA 목적지·data-sec 이름표·JSON-LD
     · 넓은 화면(≥768px) 레이아웃 — 이 절 바깥에는 아무것도 안 썼다
   ============================================================ */
/* 넓은 화면 기본값 — 모바일 전용 부품은 **아예 안 보인다.**
   ⚠️ 미디어쿼리 밖에 있어야 한다. 안에만 두면 JS 가 만든 점·단추가
      PC 에서 그대로 노출된다(실제로 그렇게 새는 실수를 막는 두 줄이다). */
.m-dots{display:none}
.m-more{display:none}

@media(max-width:767px){

  /* -- 15-0. 판 여백 ---------------------------------------
     내용이 줄어든 만큼 판 사이는 오히려 **벌린다**. 좁은 화면에서 판이
     연달아 붙으면 "또 설명이네" 로 읽히는데, 그건 여백이 아니라 경계의 문제다.
     36 에서 44 로 올려도 섹션들이 통째로 짧아져서 총 길이는 줄어든다. */
  .lp-home{--e-pad:44px;--e-r:22px}
  .lp-home .e-panel{padding:var(--e-pad) 20px}
  /* 제목 묶음 — 좁은 화면에서 라벨·제목·리드가 붙어 한 덩어리로 보이던 것 */
  .lp-home .e-head .e-lb{margin-bottom:16px}
  .lp-home .e-head p{margin-top:14px}
  .lp-home .e-lb span{font-size:17px;font-weight:750}  /* 같은 이유 */
  .lp-home .e-h2{font-size:25px;line-height:1.3}
  .lp-home .e-lead{font-size:15.5px;line-height:1.68}


  /* -- 15-1. 접기 (progressive disclosure) ------------------
     핵심 문장 → 보조 설명 → 펼쳐보기. 접혀 있어도 DOM 에는 그대로 있다.
     ⚠️ 이 규칙이 미디어쿼리 **안**에 있어야 넓은 화면에서 문단이 통째로 보인다.
        (JS 는 화면 폭을 보지 않는다 — 클래스만 붙이고 보이고 말고는 여기서 정한다) */
  .lp-home [data-mfold].is-folded .m-fold{display:none}
  .lp-home .m-more{
    display:inline-flex;align-items:center;gap:6px;
    margin:12px auto 0;padding:11px 18px;min-height:44px;   /* 손가락 최소 44px */
    border-radius:var(--r-pill);background:var(--tint);
    color:var(--blue);font-size:13.5px;font-weight:700;letter-spacing:-0.02em;
  }
  .lp-home .m-more::after{content:"+";font-size:15px;line-height:1}
  .lp-home [data-mfold]:not(.is-folded) .m-more::after{content:"−"}


  /* -- 15-2. 가로 스와이프 (캐러셀) -------------------------
     카드 넷을 세로로 쌓으면 그것만 한 화면을 넘긴다. 좌우로 눕히면
     **한 번에 한 장**만 읽히고 세로 길이는 한 장 값으로 끝난다.
     ⚠️ 라이브러리를 쓰지 않는다 — CSS scroll-snap 이 곧 스와이프다.
        손가락·트랙패드·키보드(포커스 뒤 방향키)가 모두 그냥 된다.
     ⚠️ 화면 끝까지 흘려보낸다(margin-inline:-20px). 카드가 잘려 보이는 것이
        "옆에 더 있다" 는 유일한 신호다. 20px 은 판 안쪽 여백과 같은 값이라
        첫 카드는 본문과 줄이 맞는다.
     ⚠️ .e-panel 이 overflow:hidden 이라 -20px 까지가 한계다. 더 빼면 잘린다. */
  .lp-home .m-swipe{
    display:flex;gap:10px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:20px;
    -webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding:3px 20px 8px;
    scrollbar-width:none;
  }
  .lp-home .m-swipe::-webkit-scrollbar{display:none}
  .lp-home .m-swipe > *{scroll-snap-align:start}
  .lp-home .m-swipe:focus-visible{outline:3px solid rgba(49,85,200,.45);outline-offset:2px;border-radius:14px}

  /* 점 — 몇 장 중 몇 번째인지. 누르면 그 장으로 간다.
     ⚠️ 누르는 칸은 26x34 다(WCAG 2.5.8 의 24x24 를 넘긴다). 보이는 점만 작다. */
  .lp-home .m-dots{display:flex;justify-content:center;gap:2px;margin-top:6px}
  .lp-home .m-dots button{
    width:26px;height:34px;display:flex;align-items:center;justify-content:center;
  }
  .lp-home .m-dots button::before{
    content:"";width:7px;height:7px;border-radius:50%;
    background:var(--line);transition:background .2s ease,width .2s ease;
  }
  .lp-home .m-dots button[aria-current="true"]::before{width:20px;border-radius:4px;background:var(--blue)}
  .lp-home .m-dots button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
  /* 파랑 바탕 위(히어로)에서는 색을 되돌린다 */
  .lp-home .e-on-blue .m-dots button::before{background:rgba(255,255,255,.34)}
  .lp-home .e-on-blue .m-dots button[aria-current="true"]::before{background:#fff}
  .lp-home .e-on-blue .m-swipe:focus-visible{outline-color:rgba(255,255,255,.7)}


  /* -- 15-3. HERO — 폰의 첫 화면은 따로 짠다 (2026-09-22 2차) --
     1차(같은 날 오전)는 넓은 화면을 두 칸으로 접으면서 **폰은 그 두 칸을 그대로
     세로로 쌓기만 했다.** 그래서 폰에서는 읽을 덩어리가 여섯이었다 — 배지 ·
     제목 세 줄 · 설명 네 줄 · 단추 · 안내 한 줄 · 흰 카드 둘. 히어로 하나가
     923px(1.14화면)이고 그 뒤에 낱말 띠가 또 붙어 PROBLEM 이 1,061px 이었다.
     **첫 화면 안에서 "여기서 페이지가 끝났다" 로 읽히는 모양**이다.

     2차에서 정한 것 — 폰의 첫 화면은 세 가지만 말한다.
       ① 원어민 1:1 영어회화다   ② 다음 날 전담 코치가 카톡으로 이어 준다
       ③ 무료로 해 볼 수 있다
     나머지는 아래 판들이 이미 하는 말이므로 여기서는 **줄이지 않고 뺀다.**
     글자를 작게 만들어 더 넣는 쪽으로는 가지 않는다 — 크기는 그대로 두고 양을 줄인다.

     폰에서만 빠지는 것 (DOM 에는 그대로 있고 넓은 화면은 한 글자도 안 바뀐다)
       · 설명 둘째 문장 .eh-sub-more — "수업할 때만 쓰는 영어가 아니라…".
         제목이 이미 한 말이라 읽을 문장만 두 줄 늘리고 있었다. (설명 네 줄 → 두 줄)
       · 두 단계 칸의 제목 줄 .eh-step > b — "원어민과 20분 대화" 는 설명 첫 문장이,
         "전담 코치가 다시 말을 겁니다" 는 제목이 그대로 말한다. 라벨('어제 원어민 수업' ·
         '오늘 카카오톡')과 말풍선만 있어도 차례는 읽힌다.
       · 낱말 띠 — 아래 15-4절.
     폰에서만 달라지는 것
       · 흰 카드 둘 → **한 장 안의 두 줄.** 카드가 연달아 쌓이는 모양 자체가
         "아직 설명이 남았다" 로 읽혔다. 첫 화면의 큰 카드는 하나까지다.

     실측 (2026-09-22 2차 · 괄호는 1차)
       375×812   단추 아래끝 409 (466) · 히어로 762 (923) · PROBLEM 시작 774 (1,061)
       360×740   단추 356 · 히어로 709 · PROBLEM 721      (≤360 은 제목이 30px 로 내려가 두 줄)
       390×844   단추 409 · 히어로 762 · PROBLEM 774
       412×915   단추 366 · 히어로 719 · PROBLEM 731      (제목이 두 줄로 붙는다)
       430×932   단추 366 · 히어로 719 · PROBLEM 731
       767×1024  단추 362 · 히어로 714 · PROBLEM 734      (그림은 560px 로 가운데 — 3-1절)
       가로 스크롤 없음 · 단추 높이 53px(손가락 44px 기준 위) · 제목 두~세 줄 · 설명 두 줄.
     🔴 **단추와 PROBLEM 의 첫 자락이 둘 다 첫 화면 안에 있어야 한다.**
        설명이 한 줄 늘면 26px, 말풍선이 한 줄 늘면 20px 씩 밀린다. 늘릴 일이
        생기면 늘리기 전에 **대신 무엇을 뺄지부터** 정할 것.
     ⚠️ 플로팅 CTA(.ftrial-fab)가 화면 아래 746~796 을 가로로 덮고 있다(2026-09-18 부터
        늘 떠 있다 — nav.js). 그래서 눈에 보이는 '다음 판' 은 그 아래 16px 이다.
        PROBLEM 시작을 796 보다 더 끌어올려도 보이는 양은 그대로다 — 더 줄일 이유가 없다.
     ⚠️ 높이를 고정해서 자르지 않는다. 위 숫자는 전부 '내용을 줄여서 나온 키' 다. */
  .lp-home .hero{padding:calc(var(--gnb-h) + 20px) 0 30px}
  .lp-home .eh-dis{margin-top:16px}
  .lp-home .eh-sub{margin-top:14px}
  /* 설명은 두 줄까지 — 둘째 문장은 넓은 화면에만 둔다(마크업은 index.html 히어로) */
  .lp-home .eh-sub-more{display:none}
  .lp-home .eh-btns{margin-top:24px;flex-direction:column;align-items:center;gap:10px}
  .lp-home .eh-btns .e-btn--white{width:100%}
  .lp-home .eh-note{margin-top:12px}

  /* 두 단계 그림 — 카드 **둘이 아니라 한 장 안의 두 줄**이다.
     ⚠️ 가로 스와이프(.m-swipe)로 바꾸지 말 것. '어제 → 오늘' 이라는 차례가
        손가락을 움직여야 보이는 것이 되면 이 그림을 넣은 뜻이 없어진다.
     ⚠️ 칸을 셋으로 늘리지 말 것 — 3-2절 주석과 같은 이유다. */
  .lp-home .eh-flow{
    margin-top:24px;
    background:#fff;border-radius:18px;padding:15px 16px 16px;
    box-shadow:0 2px 6px rgba(8,18,52,.18), 0 20px 46px rgba(8,18,52,.34);
  }
  .lp-home .eh-step{background:transparent;box-shadow:none;border-radius:0;padding:0}
  .lp-home .eh-step > b{display:none}
  .lp-home .eh-talk{margin-top:8px}
  .lp-home .eh-who{margin-bottom:4px}
  .lp-home .eh-flow .mk-msg{font-size:13px;padding:9px 12px}

  /* 두 줄을 잇는 자리 — 가는 선 하나에 화살표를 얹는다.
     🔴 **색을 되돌려야 한다.** 3-2절의 .eh-down 은 파란 바탕 위라 흰색인데,
        여기서는 흰 판 안이라 그대로 두면 화살표가 사라진다.
     ⚠️ 화살표 svg 에는 rotate(90deg) 가 걸려 있다 — svg 에 좌우 padding 을 줘서
        선을 끊으려 하면 그 흰 틈까지 같이 돌아 세로로 선다. 그래서 틈은 svg 가
        아니라 ::after(안 도는 칸)로 낸다. */
  .lp-home .eh-down{height:auto;margin:13px 0;position:relative;color:var(--steel)}
  .lp-home .eh-down::before{
    content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);
  }
  .lp-home .eh-down::after{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:34px;
    transform:translateX(-50%);background:#fff;
  }
  /* 🔴 z-index 가 있어야 화살표가 위 ::after 보다 **나중에** 그려진다.
     양수 z-index 는 z-index:auto 인 형제(::before · ::after)를 언제나 이긴다. */
  .lp-home .eh-down svg{width:16px;height:16px;position:relative;z-index:1}


  /* -- 15-4. 낱말 띠 — 폰에서는 뺀다 ------------------------
     "프렌글이 하는 일 — 원어민 1:1 수업 · 매일 카톡 코칭 · 표현 교정 · 학습 리포트".
     넓은 화면에서는 히어로와 PROBLEM 사이의 숨 고르기지만, 폰에서는 **첫 화면에서
     기능 넷을 다시 읽히는 줄**이었다. 히어로가 방금 뺀 것(기능 나열)을 바로 아래에서
     되돌려 놓는 셈이고, 이 띠가 먹는 126px(띠 114 + 틈 12) 때문에 PROBLEM 의 흰 판이
     첫 화면 밖으로 밀려 파란 바탕에서 페이지가 끝난 것처럼 보였다.
     넷은 지운 것이 아니라 #system · #coach · #learnsystem 이 그대로 말한다.
     ⚠️ 넓은 화면(≥768px)에는 그대로 있다. 되돌리려면 아래 display:none 한 낱말만 지운다.
     ⚠️ data-sec 이 없는 구역이라 이탈집계의 섹션 목록과는 무관하다 — 세던 것이 줄지 않는다. */
  .lp-home .e-strip{display:none;padding:18px 16px}
  /* 🟡 아래 셋은 띠를 다시 켤 때 쓰는 값이다(지금은 안 걸린다) */
  .lp-home .e-strip-row{margin-top:12px;gap:7px 16px}
  .lp-home .e-strip-row span{font-size:14px}
  .lp-home .e-strip-row i{display:none}


  /* -- 15-5. PROBLEM — 카드 넷에서 한 줄기 타임라인으로 ------
     "수업 → 며칠 → 다음 수업 → 결국" 은 **네 덩어리가 아니라 한 흐름**이다.
     카드로 끊어 놓으면 네 번 읽어야 하고, 세로로 쌓이면 600px 을 먹는다.
     선 하나에 꿰면 눈이 한 번에 따라 내려간다.
     ⚠️ 마지막 칸(결국 다시 처음부터)만 코랄 상자를 남긴다 — 이 흐름의 결론이라
        평평하게 두면 그냥 네 번째 문장이 된다. */
  .lp-home .ep-week{gap:5px;margin-top:26px}
  .lp-home .ep-day{padding:10px 2px;border-radius:10px}
  .lp-home .ep-day b{font-size:11px}
  .lp-home .ep-legend{margin-top:12px;gap:8px 16px;font-size:12px}

  .lp-home .ep-flow{
    display:block;grid-template-columns:none;
    margin-top:26px;padding-left:26px;position:relative;
  }
  .lp-home .ep-flow::before{
    content:"";position:absolute;left:7px;top:10px;bottom:34px;width:2px;
    background:var(--line-warm);
  }
  .lp-home .ep-step{
    background:transparent;box-shadow:none;border-radius:0;
    padding:0 0 18px;position:relative;
  }
  .lp-home .ep-step::before{
    content:"";position:absolute;left:-26px;top:3px;width:16px;height:16px;
    border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2.5px var(--blue);
  }
  .lp-home .ep-step--gap::before{box-shadow:inset 0 0 0 2.5px #e0d7c9}
  .lp-home .ep-step b{margin-top:5px;font-size:16px}
  .lp-home .ep-step p{margin-top:5px;font-size:13.5px}
  .lp-home .ep-step--back{
    background:var(--coral-ink);border-radius:16px;padding:16px 18px;margin-top:4px;
  }
  .lp-home .ep-step--back::before{background:var(--coral-ink);box-shadow:inset 0 0 0 2.5px #fff}
  .lp-home .ep-bridge{margin-top:28px}
  .lp-home .ep-bridge b{font-size:20px}
  .lp-home .ep-bridge span{margin-top:8px;font-size:14.5px}


  /* -- 15-6. DUAL CARE — 두 사람이 한 사람을 ----------------
     세로로 쌓인 상자 셋이 아니라 **사슬 하나**로 보이게 한다.
     가운데 "나" 는 300px 상자에서 알약으로 줄이고, 위아래 화살표가 그 알약을
     향하게 둔다(아래로 · 위로). 관계가 그림으로 남고 키는 120px 쯤 준다. */
  .lp-home .ed{margin-top:26px;gap:10px;max-width:none}
  .lp-home .ed-role{padding:20px;border-radius:20px}
  .lp-home .ed-role-head{gap:12px}
  .lp-home .e-ico{width:44px;height:44px;border-radius:14px}
  .lp-home .e-ico svg{width:22px;height:22px}
  .lp-home .ed-role h3{font-size:19px}
  .lp-home .ed-role ul{margin-top:15px;gap:9px}
  .lp-home .ed-role li{font-size:14.5px}
  .lp-home .ed-when{margin-top:15px;padding-top:12px;font-size:12px}
  .lp-home .ed-wrap{gap:4px}
  .lp-home .ed-me{
    width:auto;max-width:none;
    display:inline-flex;align-items:center;gap:11px;
    padding:9px 18px 9px 11px;border-radius:var(--r-pill);text-align:left;
  }
  .lp-home .ed-me .ed-me-ava{width:32px;height:32px;font-size:18px;margin:0;flex:none}
  .lp-home .ed-me b{margin-top:0;font-size:15px}
  .lp-home .ed-me span{margin-top:1px;font-size:11.5px}
  .lp-home .ed-arrow::after{font-size:15px}


  /* -- 15-7. EXPERIENCE — 하루 네 칸을 옆으로 ---------------
     이 섹션 하나가 390폭에서 1,711px 이었다(전체의 1/7). 네 칸이 모두
     목업을 하나씩 달고 세로로 섰기 때문이다. 옆으로 눕히면 한 칸 값이 된다.
     ⚠️ 카드를 줄이지 않았다 — 목업도 설명도 그대로다. 넘겨서 볼 뿐이다. */
  .lp-home .ee{display:flex;grid-template-columns:none;margin-top:24px}
  .lp-home .ee-card{flex:0 0 84%;padding:20px;border-radius:20px}
  .lp-home .ee-card h3{margin-top:14px;font-size:16.5px}
  .lp-home .ee-card > p{margin-top:7px;font-size:13.5px}
  .lp-home .ee-mk{margin-top:14px;min-height:132px}


  /* -- 15-8. DAILY TALK — 보여 주고 나서 이름 붙인다 --------
     왼쪽 목록(질문·답변·교정·설명)과 오른쪽 대화판은 **같은 네 단계**를
     두 번 말한다. 넓은 화면에서는 나란히 있어 한눈에 대조되지만, 좁은 화면에서는
     위아래로 서서 같은 말을 두 번 읽는 꼴이 된다.
     그래서 순서를 뒤집었다 — 실제 대화를 먼저 보이고, 목록은 그 아래 요약으로.
     ⚠️ 지우지 않았다. 순서만 바꿨다(order). DOM 은 그대로다. */
  .lp-home .et{margin-top:24px;gap:18px}
  .lp-home .et-stage{order:1;padding:16px 14px;border-radius:20px}
  .lp-home .et-list{order:2;gap:11px}
  .lp-home .et-list li{gap:11px}
  .lp-home .et-no{width:25px;height:25px;font-size:12px}
  .lp-home .et-list b{font-size:14.5px}
  .lp-home .et-list p{margin-top:2px;font-size:13px;line-height:1.55}
  .lp-home .et-body{padding-bottom:14px}
  .lp-home .et-bubble{font-size:14px;padding:11px 14px;border-radius:14px}
  .lp-home .et-ko{margin-top:7px;font-size:13px}
  .lp-home .et-step{margin-bottom:6px;font-size:11.5px}


  /* -- 15-9. LEARNING SYSTEM — 번호 넷에서 세로 여정으로 ----
     넓은 화면에서는 물결선이 네 단계를 잇는다. 좁은 화면에서는 그 선이
     사라지면서(1000px 블록) 큰 번호 넷이 그냥 쌓여 있었다 — 순서라는 뜻이
     시각적으로 없어진 것이다. 세로 레일로 그 뜻을 되살린다. */
  .lp-home .el{
    display:block;grid-template-columns:none;
    margin-top:24px;padding-left:38px;position:relative;
  }
  .lp-home .el::before{
    content:"";position:absolute;left:13px;top:6px;bottom:26px;width:2px;background:var(--line);
  }
  .lp-home .el-step{padding:0 0 22px}
  .lp-home .el-n{
    position:absolute;left:-38px;top:-2px;
    width:28px;height:28px;border-radius:50%;
    background:var(--coral-ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:12.5px;letter-spacing:0;
  }
  .lp-home .el-en{margin-top:0;font-size:12px}
  .lp-home .el-step h3{margin-top:4px;font-size:16px}
  .lp-home .el-step p{margin-top:6px;font-size:13.5px;line-height:1.6}
  .lp-home .el-loop{margin-top:6px;text-align:left;padding-left:38px;font-size:13.5px}


  /* -- 15-10. REVIEW — 수치 먼저, 후기는 한 장씩 ------------
     후기 카드 셋이 세로로 서면 800px 이다. 게다가 그 아래에 흐르는 띠가
     또 있어서 같은 성격의 덩어리가 두 번 지나간다.
     지표(2x2) → 후기 스와이프 한 장씩 → 흐르는 띠 로 정리한다. */
  .lp-home .en{gap:10px;margin-top:24px}
  .lp-home .en-item{padding:18px 10px;border-radius:16px}
  .lp-home .en-n{font-size:26px}
  .lp-home .en-l{margin-top:7px;font-size:12px}
  .lp-home .en-note{margin-top:13px;font-size:12px;line-height:1.65}
  .lp-home .er{display:flex;grid-template-columns:none;margin-top:20px}
  .lp-home .er-card{flex:0 0 84%;padding:20px;border-radius:20px}
  .lp-home .er-card p{font-size:14px;line-height:1.68}
  /* ⚠️ !important 는 마크업의 인라인 style="margin-top:36px" 를 이기기 위한 것이다.
        인라인을 지우면 넓은 화면 간격이 같이 바뀌므로 여기서만 덮는다. */
  .lp-home .mq{margin-top:22px!important}


  /* -- 15-11. 마지막 CTA -----------------------------------
     하단 고정 버튼과 겹치지 않게 아래를 조금 더 연다(site.css 의 .foot 처리와 짝). */
  .lp-home .ec{padding:56px 0 calc(56px - var(--e-gap))}
  .lp-home .ec p{margin-top:18px;font-size:15.5px}
  .lp-home .ec .avas{margin-top:26px}
  /* '수강신청 바로가기' 는 문장 속 링크라 기본 높이가 19px 이다(360폭 실측).
     문장 안 링크는 WCAG 2.5.8 의 예외지만 손가락으로는 여전히 작다 —
     글자 크기·밑줄은 그대로 두고 누를 칸만 위아래로 넓힌다.
     ⚠️ 이 링크는 토스 전자결제 심사가 보는 '상품으로 가는 길' 이다(index.html 9절 주석).
        지우거나 감추지 말 것. */
  .lp-home .ec-alt a{display:inline-block;padding:7px 4px}
}


/* 움직임을 줄여 달라고 한 사람에게는 점을 눌러도 미끄러지지 않게 한다
   (손으로 미는 것은 그대로 움직인다 — 그건 사람이 만든 움직임이다).
   ⚠️ 미디어쿼리 밖에 둔다. 두 조건(좁은 화면 + 모션 줄이기)을 한 규칙에 묶으면
      나중에 한쪽만 고칠 때 다른 쪽이 조용히 따라 바뀐다. */
@media(prefers-reduced-motion:reduce){
  .m-swipe{scroll-behavior:auto}
}