/* ============================================================
   프렌글 IA 페이지 공용 컴포넌트 — 2026-09-18 2차 리뉴얼

   ⚠️ 이 파일은 **새 IA 페이지만** 부른다 (지금은 /service · service.html).
      부르는 페이지는 site.css → landing.css → 이 파일 순서로 싣고
      body 에 `lp-e` 를 붙인다. 순서를 바꾸면 안 된다 —
      여기 규칙 몇 개가 landing.css 의 `.lp-e .hero` 를 덮는다.

   ── 왜 이 파일이 따로 있나 ──────────────────────────────
   랜딩(index.html)의 디자인 어법을 그대로 쓰되, 랜딩에 없는 짜임이 몇 개 필요하다.
     · 빵가루(breadcrumb)      — 랜딩은 단일 페이지라 상위 경로가 없었다
     · 서브 히어로             — 랜딩 히어로(54px + 원 + 카드 넷)는 허브에 과하다
     · 흐름도 · 비교판 · 대상 카드 · 관련 콘텐츠
   반대로 **판(.e-panel) · 버튼(.e-btn) · 제목(.e-h2 / .e-lb / .e-lead) · 아이콘 칸(.e-ico)
   · 목업 조각(.mk-*) · 마지막 CTA(.ec) · 푸터 띄우기는 하나도 새로 쓰지 않았다** —
   전부 landing.css 것을 그대로 쓴다. 같은 것을 두 벌 두면 반드시 어긋난다.

   ── 글자 명도 기준 (2026-09-18 맞춤) ────────────────────
   흰 바탕 대비비 실측 —  steel #8b97b8  2.91:1 ✗   slate #5d6b93  5.26:1 ✓   navy  14.52:1 ✓
   파랑 바탕 대비비 실측 —  #a9bdf5  3.46:1 ✗   #c3d1ff  4.25:1 ✗   #d8e2ff  4.98:1 ✓
     읽어야 하는 것(문장 · 날짜 · 표 내용 · 시각 라벨)   → slate 이상 / 파랑 위는 #d8e2ff
     목업 안의 UI 흉내 라벨(.sv-mk-top 같은 10.5px 영문) → steel 그대로. 화면을 흉내 낸
       조각이라 실제 UI 처럼 옅은 편이 맞고, 읽어서 얻을 정보가 없다.
     섹션 머리 영문 라벨(TOPIC 01 · SECTION 02)         → steel 그대로. 장식이다.
   ⚠️ 굵게 써도 면제가 아니다 — 완화(3:1)는 **18.66px 이상 굵은 글자**부터다.

   ── 손대면 안 되는 것 ───────────────────────────────────
     .hero      landing.css 의 `.lp-e .hero` 가 위 여백을 잡는다. 이름을 지우면
                떠 있는 알약 내비 뒤로 제목이 깔린다.
     data-sec   랜딩의 이탈 집계가 읽는 이름표다. **IA 페이지에는 붙이지 않는다** —
                집계 스크립트(exitTrack.js)를 안 싣기 때문이고, 나중에 싣더라도
                랜딩 섹션 이름과 섞이면 숫자가 거짓이 된다.
   ============================================================ */


/* ============================================================
   1. Breadcrumb — 파랑 바탕 위, 히어로 바로 위
   ⚠️ 화면의 이 줄과 head 의 BreadcrumbList JSON-LD 는 **한 벌**이다.
      한쪽만 고치면 구글이 마크업과 화면이 다르다고 본다.
   ============================================================ */
.crumb{padding:calc(var(--gnb-h) + 26px) 0 0}
.crumb ol{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  list-style:none;margin:0;padding:0;
  font-size:12.5px;font-weight:600;letter-spacing:-0.02em;
}
.crumb li{display:inline-flex;align-items:center;gap:6px;color:#d8e2ff}
.crumb a{color:#d8e2ff;transition:color .16s ease}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumb li[aria-current]{color:#fff}
.crumb li + li::before{content:'\203A';color:#7d9aee;font-weight:700}


/* ============================================================
   2. PageHero — 허브·상세 공용 서브 히어로
   랜딩 히어로와 같은 어법(배지 → 큰 제목 → 한 줄 → 단추)이되 한 단 작다.
   ⚠️ 제목 크기를 랜딩(.e-dis 54px)과 같게 두면 안 된다. 허브가 홈보다
      크게 외치면 사이트 안에서 위아래가 뒤집힌다.
   ⚠️ 빵가루가 위 여백을 이미 냈으므로 히어로는 위를 비워 둔다.
   ============================================================ */
/* ⚠️ 아래 여백 28px 은 **제자리 이동 막대(.anav)와 짝**이다(2026-09-18).
   허브 넷(/service · /curriculum · /learn · /guide)은 전부 히어로 바로 뒤에 그 막대가
   오고, 막대는 자기 margin-top(--e-gap 20px)을 갖는다. 그래서 눈에 보이는 틈은
   여기 값 + 20px 이다. 예전 64px 이면 84px 이었는데, 막대 아래 첫 판까지는 20px 뿐이라
   **막대가 가리키는 판에는 붙고 위로는 멀리 떠** 있었다. 28+20=48px 로 줄여 맞췄다.
   값을 되돌리려면 10절 .anav 의 margin-top 과 함께 볼 것. */
.lp-e .hero.pg-hero{text-align:left;padding:22px 0 28px;overflow:visible}
.pg-hero .e-badge{margin-bottom:22px}
.pg-h1{font-size:44px;line-height:1.22;letter-spacing:-0.045em;font-weight:800;color:#fff;max-width:19em}
.pg-sub{margin-top:20px;max-width:34em}
.pg-hero .e-btns{justify-content:flex-start;margin-top:32px}
/* 파랑 바탕 위 옅은 글자 — 실측(대비비)
     #a9bdf5  3.46:1  ✗      #c3d1ff  4.25:1  ✗      #d8e2ff  4.98:1  ✓
   그래서 파랑 위 보조 문구는 전부 #d8e2ff 로 맞춘다(팔레트에 이미 있는 값이다). */
.pg-note{margin-top:14px;font-size:13.5px;color:#d8e2ff}

/* 히어로 오른쪽 요약 카드 — 이 서비스가 무엇인지 한눈에 (글자로도 남는다) */
.pg-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.pg-facts{
  background:rgba(255,255,255,.12);border-radius:24px;padding:26px;
  display:flex;flex-direction:column;gap:12px;
}
/* 🔴 파랑 구역 안의 흰 판 — 글자색을 되돌려야 한다(안 하면 흰 판에 흰 글씨) */
.pg-fact{background:#fff;border-radius:16px;padding:16px 18px;color:var(--navy)}
.pg-fact b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--steel)}
.pg-fact span{display:block;margin-top:6px;font-size:15px;font-weight:800;letter-spacing:-0.03em;line-height:1.4}
.pg-fact em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--slate);line-height:1.55}


/* ============================================================
   3. 문제 블록 — 아이콘 세 칸
   ⚠️ 랜딩 PROBLEM 의 네 칸(.ep-flow)을 그대로 옮기지 않았다. 같은 내용의
      페이지가 두 장 생기면 둘 다 색인에서 값이 깎인다. 여기는 **왜 말이
      안 나오는가** 세 가지로 다르게 말한다.
   ============================================================ */
.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.pr-item{background:var(--cream);border-radius:20px;padding:28px 26px}
.pr-item h3{margin-top:18px;font-size:17.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.pr-item p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--slate)}
/* 더 읽을 칼럼으로 잇는 줄 — 내부 링크가 이 자리에서 가장 자연스럽다 */
.pr-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--blue);
}
.pr-more:hover{text-decoration:underline;text-underline-offset:3px}
.pr-more svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   4. LearningFlow / StepTimeline — 넓은 화면 가로, 좁은 화면 세로
   이 페이지의 주인공 시각 요소다. 듀얼케어가 '수업 → 코칭 → 리캡 → 반복'
   이라는 **한 바퀴**라는 것을 글로 설명하지 않고 자리로 보여 준다.

   ⚠️ 칸과 화살표를 한 격자에 섞어 둔다(1fr auto 1fr auto …). 화살표를 칸 안에
      넣으면 좁은 화면에서 세로로 내려갈 때 방향을 돌릴 수가 없다.
      랜딩 듀얼케어(.ed-wrap)가 같은 방식이다.
   ============================================================ */
.flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:14px;align-items:stretch;margin-top:48px;
}
/* 칸 수가 다른 흐름 — 칸과 화살표를 섞은 격자라 칸 수마다 열 수가 달라진다.
   ⚠️ 이 이름을 쓰는 곳: 3단 = 학습 예시(수업→코칭→리캡), 5단 = 커리큘럼 HOW IT WORKS.
      좁은 화면 규칙(9절)은 .flow 하나로 세 경우를 모두 세로로 내린다. */
.flow--3{grid-template-columns:1fr auto 1fr auto 1fr}
.flow--5{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:10px}
.flow--5 .flow-step{padding:22px 18px}
.flow--5 .flow-step h3{font-size:16px}
.flow--5 .flow-step p{font-size:12.5px}

.flow-step{
  background:var(--cream);border-radius:22px;padding:26px 22px;
  display:flex;flex-direction:column;
}
.flow-step--loop{background:var(--tint)}
.flow-lb{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--steel)}
.flow-step h3{margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.flow-step p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--slate)}
.flow-who{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:12px;font-weight:800;letter-spacing:-0.015em;color:var(--blue);
}
.flow-who i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.flow-who--coach{color:var(--coral-ink)}
.flow-who--coach i{background:var(--coral)}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:18px;font-weight:700}
/* 마지막 화살표는 되돌아간다는 뜻이라 색을 준다 */
.flow-arrow--back{color:var(--coral)}
.flow-note{margin-top:30px;text-align:center;font-size:14.5px;font-weight:700;color:var(--slate);letter-spacing:-0.025em}
/* ⚠️ 굵게 쓴 글자도 면제가 아니다 — WCAG 의 '큰 글자(3:1)' 완화는 굵은 경우
   **18.66px 이상**부터다. .flow-note 는 14.5px/700 이라 4.5:1 이 필요하다. */
.flow-note b{color:var(--blue)}


/* ============================================================
   5. ServiceCard — 셋을 나란히. 각 카드가 상세 페이지의 입구다.
   ⚠️ 카드 안에 **시각 요소 한 조각**을 꼭 넣는다(.mk-* 목업). 셋 다 글만 있으면
      "무엇이 오가는지" 가 안 읽힌다 — 랜딩이 이 방식으로 설명한다.
   ============================================================ */
.sv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.sv-card{
  background:#fff;border-radius:24px;padding:30px 26px;
  display:flex;flex-direction:column;box-shadow:var(--sh-float);
}
/* 크림 판 위에서는 흰 카드가 그림자 없이도 선다 */
.e-panel--cream .sv-card{box-shadow:none}
.sv-lb{margin-top:18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--steel)}
.sv-card h3{margin-top:7px;font-size:19px;font-weight:800;letter-spacing:-0.04em;line-height:1.3}
.sv-card > p{margin-top:11px;font-size:14px;line-height:1.7;color:var(--slate)}
.sv-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sv-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.5;letter-spacing:-0.02em}
.sv-list svg{width:13px;height:13px;flex:none;margin-top:4px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sv-card--coach .sv-list svg{color:var(--coral)}
/* 목업 자리 — flex:1 로 **남는 높이를 이 칸이 먹는다.**
   ⚠️ min-height 만으로는 부족했다(실측: 카드 셋은 643px 로 같은데 목업 내용이
      두 줄 / 세 줄로 달라서 그 아래 [자세히 보기] 가 47px 씩 어긋났다).
      늘어나는 칸을 하나 정해 두면 목업 위끝과 링크 아래끝이 동시에 맞는다. */
.sv-mk{margin-top:22px;flex:1;background:var(--cream);border-radius:16px;padding:16px;min-height:132px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.e-panel--cream .sv-mk{background:var(--tint)}
.sv-mk-top{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--steel)}
.sv-mk-top em{font-style:normal;color:var(--coral-ink)}
.sv-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  font-size:14px;font-weight:800;letter-spacing:-0.025em;color:var(--blue);
  transition:gap .18s ease;
}
.sv-go svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sv-go:hover{gap:11px}
/* 아직 상세 페이지가 없는 카드 — 링크처럼 보이게 두지 않는다 */
.sv-go--soon{color:var(--steel);cursor:default}
.sv-go--soon:hover{gap:7px}


/* ============================================================
   6. ComparisonBlock — 구조를 나란히 놓는다
   ⚠️ 남의 학원 이름을 적지 않는다. 비교하는 것은 업체가 아니라 **구조**다
      (「수업만 있는 구조」 대 「수업 앞뒤가 이어진 구조」).
      표시광고법상 근거 없는 우위 비교가 되지 않도록 숫자·순위를 쓰지 않는다.
   ============================================================ */
.cmp{margin-top:48px;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.cmp-row{display:grid;grid-template-columns:168px 1fr 1fr}
.cmp-row + .cmp-row{border-top:1px solid var(--line)}
.cmp-row > div{padding:20px 22px}
.cmp-row--head > div{padding:18px 22px;background:var(--cream)}
.cmp-h{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--slate)}
.cmp-row--head .cmp-them{font-size:15.5px;font-weight:800;letter-spacing:-0.03em;line-height:1.35;color:var(--slate)}
.cmp-row--head .cmp-us{font-size:15.5px;font-weight:800;letter-spacing:-0.03em;line-height:1.35;color:var(--blue)}
.cmp-k{font-size:14px;font-weight:800;letter-spacing:-0.03em;color:var(--navy);background:var(--cream)}
.cmp-them{font-size:13.5px;line-height:1.65;color:var(--slate)}
.cmp-us{font-size:13.5px;line-height:1.65;color:var(--navy);font-weight:600;background:var(--tint)}
.cmp-cap{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--slate)}


/* ============================================================
   7. 대상 카드 — 「이런 분들에게 맞습니다」
   ⚠️ 커리큘럼 페이지(/curriculum/*)가 생기면 여기 링크를 그쪽으로 옮긴다.
      지금은 **있는 것**(칼럼 · FAQ 낱장)으로만 잇는다. 없는 주소를 미리
      적어 두면 그날까지 죽은 링크가 사이트에 남는다.
   ============================================================ */
.tg{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
/* 🔴🔴 **카드는 흰색이라야 한다.** 예전에는 크림(var(--cream))이었는데 이 조각이
   놓이는 자리(/service 의 #for-you)가 **크림 판**이라 판과 카드가 글자 그대로 같은
   색이었다 — rgb(255,249,242) 대 rgb(255,249,242), 그림자도 없음(2026-09-18 실측).
   네 칸이 카드로 보이지 않고 글 네 덩어리가 흩어진 것처럼 읽혔다.
   ⚠️ 여기서는 그림자를 **빼지 않는다.** 위 5절 `.e-panel--cream .sv-card{box-shadow:none}`
      같은 처리를 따라 하면 안 된다 — 흰색과 크림의 차이는 3%도 안 돼서, 크림 판
      위에서는 그림자가 유일하게 경계를 만드는 수단이다. */
.tg-card{
  background:#fff;border-radius:22px;padding:28px;
  box-shadow:var(--sh-float);
  display:flex;gap:18px;align-items:flex-start;
}
.tg-body{min-width:0}
.tg-card h3{font-size:17px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.tg-card p{margin-top:9px;font-size:13.5px;line-height:1.7;color:var(--slate)}
.tg-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tg-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill);background:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:-0.02em;color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--line);
}
.tg-links a:hover{box-shadow:inset 0 0 0 1px var(--blue)}


/* ============================================================
   8. RelatedContents — 다음에 볼 곳
   허브 페이지가 막다른 길이 되지 않게 아래·옆으로 잇는다.
   ============================================================ */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.rel-card{
  background:#fff;border-radius:20px;padding:26px 24px;
  box-shadow:var(--sh-float);display:flex;flex-direction:column;
}
.e-panel--cream .rel-card{box-shadow:none}
.rel-lb{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--steel)}
.rel-card h3{margin-top:10px;font-size:16.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.rel-card p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--slate)}
.rel-card .sv-go{margin-top:auto;padding-top:18px;font-size:13.5px}


/* ============================================================
   10. AnchorNavigation — 긴 허브·상세의 제자리 이동 막대
   ⚠️ 알약 내비가 fixed 로 떠 있다. 이 막대를 그 아래에 붙여 두면 두 겹이 되어
      좁은 화면에서 첫 화면의 40%를 먹는다. 그래서 **sticky 로만** 두고
      top 은 내비 높이만큼 내려 둔다.
   ⚠️ 좁은 화면에서는 줄바꿈하지 않고 **가로 스크롤**로 둔다(21절 지시).
      세로로 접으면 항목 다섯이 화면 절반을 덮는다.
   ============================================================ */
.anav{position:sticky;top:calc(var(--gnb-h) + 8px);z-index:20;margin-top:var(--e-gap)}
.anav-in{
  max-width:var(--e-max);margin:0 auto;
  display:flex;gap:6px;align-items:center;
  padding:8px;border-radius:var(--r-pill);
  background:rgba(8,18,52,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  overflow-x:auto;scrollbar-width:none;
}
.anav-in::-webkit-scrollbar{display:none}
.anav a{
  flex:none;padding:9px 16px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;letter-spacing:-0.025em;color:#d8e2ff;
  white-space:nowrap;transition:background .16s ease,color .16s ease;
}
.anav a:hover{background:rgba(255,255,255,.14);color:#fff}
.anav a[aria-current]{background:#fff;color:var(--blue)}
/* 흰 판 위에 놓일 때(상세 페이지) — 파랑 위 기준을 되돌린다 */
.anav--light .anav-in{background:var(--cream);box-shadow:inset 0 0 0 1px var(--line-warm);-webkit-backdrop-filter:none;backdrop-filter:none}
.anav--light a{color:var(--slate)}
.anav--light a:hover{background:#fff;color:var(--blue)}
.anav--light a[aria-current]{background:var(--blue);color:#fff}


/* ============================================================
   11. Journey — 하루가 어떻게 흘러가나 (세로 타임라인)
   ⚠️ 4절 .flow 와 다른 것: flow 는 **구조**(수업→코칭→리캡→반복)를 보이고,
      이것은 **시각**(아침·점심·저녁)을 보인다. 같은 그림으로 두 번 말하지 않는다.
   ============================================================ */
.jn{margin-top:44px;position:relative;max-width:760px;margin-left:auto;margin-right:auto}
/* 왼쪽 줄 하나 — 점들을 잇는다 */
.jn::before{content:'';position:absolute;left:78px;top:14px;bottom:14px;width:2px;background:var(--line);}
.jn-row{display:grid;grid-template-columns:64px 30px 1fr;gap:16px;align-items:start}
.jn-row + .jn-row{margin-top:22px}
.jn-time{text-align:right;padding-top:2px;font-size:13px;font-weight:800;letter-spacing:-0.02em;color:var(--slate);font-variant-numeric:tabular-nums}
.jn-dot{position:relative;display:flex;justify-content:center;padding-top:5px}
.jn-dot i{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--blue);display:block}
.jn-row--coach .jn-dot i{box-shadow:0 0 0 3px var(--coral)}
.jn-row--rest .jn-dot i{box-shadow:0 0 0 3px var(--line);background:var(--cream)}
.jn-body{padding-bottom:4px}
.jn-body b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.4}
.jn-body p{margin-top:7px;font-size:14px;line-height:1.7;color:var(--slate)}
.jn-who{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--tint);
  font-size:11.5px;font-weight:800;letter-spacing:-0.015em;color:var(--blue);
}
.jn-row--coach .jn-who{background:var(--coral-tint);color:var(--coral-ink)}
.jn-row--rest .jn-who{background:var(--cream);color:var(--slate)}
/* 말풍선·교정 조각을 한 줄 끼울 자리 */
.jn-mk{margin-top:12px;max-width:420px}


/* ============================================================
   12. 상황 카드 — 「어떤 상황에서 영어가 필요한가」 (커리큘럼 허브)
   ⚠️ 커리큘럼을 카드 다섯으로 나열하지 않는다(6절 지시: 카드 그리드 반복 금지).
      사람이 고르는 기준은 '수준' 이 아니라 **상황**이라서, 상황 문장을 먼저 크게
      읽히게 하고 그 아래에 해당 커리큘럼 이름을 작게 둔다.
   ============================================================ */
.sit{margin-top:44px;display:flex;flex-direction:column;gap:14px}
/* ⚠️ 2026-09-18 — 줄 바탕이 판과 **같은 크림**(#fff9f2)이어서 다섯 줄의 경계가
      화면에서 아예 안 보였다(실측: 판과 줄의 배경색이 같은 값). 목록으로 읽히지 않고
      글 한 덩어리로 보인다. 크림 판 위의 흰 블록은 이미 쓰던 어법이라 그대로 따른다
      — site.css 의 「.wash .stats」(흰 바탕 + --line-warm 안쪽 선)와 같은 모양이다.
   ⚠️ 테두리를 border 가 아니라 **안쪽 그림자**로 그린다 — border 를 주면 줄 높이가
      2px 씩 밀려 아이콘 세로 가운데가 어긋난다. */
.sit-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  padding:26px 28px;border-radius:22px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-warm);
  transition:box-shadow .18s ease,transform .18s ease;
}
@media(hover:hover){.sit-item:hover{box-shadow:inset 0 0 0 1px transparent,var(--sh-float);transform:translateX(4px)}}
.sit-q{min-width:0}
.sit-q b{display:block;font-size:19px;font-weight:800;letter-spacing:-0.04em;line-height:1.4}
.sit-q p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--slate)}
.sit-name{
  flex:none;text-align:right;
  font-size:12.5px;font-weight:800;letter-spacing:-0.02em;color:var(--blue);
}
.sit-name span{display:block;margin-top:5px;font-size:16px;letter-spacing:-0.035em}
.sit-name em{display:block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--slate)}


/* ============================================================
   13. 카테고리 묶음 — 영어 학습 허브(/learn)
   칼럼 카드는 **새로 만들지 않고** site.css 7절의 .cl-card 를 그대로 쓴다.
   여기서는 격자에 맞게 안 여백과 제목 크기만 줄인다.
   ============================================================ */
.cat{margin-top:20px}
.cat + .cat{margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cat-head h2{font-size:26px;font-weight:800;letter-spacing:-0.04em;line-height:1.3}
.cat-head h2 small{display:block;margin-bottom:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--steel)}
.cat-head p{margin-top:10px;max-width:38em;font-size:14.5px;line-height:1.7;color:var(--slate)}
.cc-grid{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;list-style:none;padding:0}
.cc-grid .cl-card{padding:24px 26px 20px;gap:9px}
.cc-grid .cl-title{font-size:18px;line-height:1.45}
.cc-grid .cl-desc{font-size:14px;line-height:1.65}
.cc-grid .cl-foot{padding-top:13px;margin-top:2px}
.cc-grid .cl-meta{font-size:12.5px}
.cc-grid .cl-more{font-size:12.5px}
/* 아직 글이 없는 칸 — 빈 카드를 두지 않고 한 줄로 알린다 */
.cc-soon{
  grid-column:1 / -1;padding:20px 24px;border-radius:16px;
  background:var(--cream);font-size:13.5px;font-weight:600;color:var(--slate);line-height:1.7;
}


/* ---- 최신 글 목록 — 카드가 아니라 **한 줄짜리 색인**이다.
   ⚠️ 위 .cc-grid 카드와 같은 모양으로 두면 같은 글이 두 번 카드로 나와 페이지가
      카드 나열로 읽힌다(브리프 6절). 여기는 제목 한 줄로만 둔다.
   ⚠️ **날짜는 넣지 않는다** (2026-09-23 사용자 지시 "칼럼 노출되는 모든 섹션에 날짜 노출 안되게").
      site.css 의 빗장이 datetime 있는 time 을 숨긴다. 왼쪽 칸은 guide 의 '무료 체험' 같은
      딱지 자리로만 쓴다 — 그래서 격자가 아니라 flex 다(칸이 없거나 숨겨져도 제목이 안 밀린다). */
.lt{margin-top:26px;list-style:none;padding:0;border-top:1px solid var(--line)}
.lt li{border-bottom:1px solid var(--line)}
.lt a{
  display:flex;align-items:baseline;gap:16px;
  padding:16px 6px;transition:background .16s ease;
}
.lt time{flex:none;width:96px}
.lt b{flex:1;min-width:0}
.lt a:hover{background:var(--tint)}
.lt time{font-size:13px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.lt b{font-size:15.5px;font-weight:700;letter-spacing:-0.03em;line-height:1.5;color:var(--navy)}
.lt a:hover b{color:var(--blue)}
.lt span{font-size:12px;font-weight:700;color:var(--slate);white-space:nowrap}
@media(max-width:640px){
  .lt a{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 4px}
  .lt time{width:auto}
  .lt span{display:none}
}

/* ============================================================
   14. 이용 단계 — /guide 의 다섯 칸
   ⚠️ 4절 .flow(수업 구조)와 겹치지 않게 **번호를 크게** 쓰고 이음선을 점선으로 둔다.
      같은 사이트 안에서 두 그림이 같아 보이면 둘 다 기억에 안 남는다.
   ============================================================ */
.gd{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.gd-step{position:relative;padding:26px 20px;border-radius:20px;background:var(--cream);display:flex;flex-direction:column}
.gd-n{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;
}
.gd-step h3{margin-top:15px;font-size:16px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.gd-step p{margin-top:8px;font-size:13px;line-height:1.65;color:var(--slate)}
.gd-step > a{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font-size:12.5px;font-weight:800;letter-spacing:-0.02em;color:var(--blue);
}
.gd-step > a svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* 점선 이음 — 칸 사이를 잇는다(마지막 칸 제외) */
.gd-step:not(:last-child)::after{
  content:'';position:absolute;top:19px;right:-10px;width:8px;height:2px;
  background:repeating-linear-gradient(90deg,var(--steel) 0 3px,transparent 3px 6px);
}


/* ============================================================
   15. Detail 전용 — 허브와 **같은 틀로 만들지 않는다**(20절 지시)
   허브는 '넓게 훑는' 페이지라 카드·격자가 주인공이고,
   상세는 '하나를 깊게' 라서 **한 줄 흐름 + 예시 + 주의사항**이 주인공이다.
   ============================================================ */
/* 상세 히어로 — 요약 카드 없이 한 칼럼. 대신 '이 문서가 답하는 것' 을 목록으로 둔다 */
.lp-e .hero.pg-hero--detail{padding:18px 0 52px}
.pg-hero--detail .pg-h1{font-size:38px;max-width:24em}
.pg-hero--detail .pg-sub{max-width:40em}
.dl-ask{
  margin-top:30px;padding:22px 24px;border-radius:20px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  max-width:44em;
}
.dl-ask b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;color:#d8e2ff}
.dl-ask ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.dl-ask li{display:flex;gap:10px;font-size:14.5px;font-weight:600;line-height:1.55;letter-spacing:-0.025em;color:#fff}
.dl-ask li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-top:8px}

/* 큰 번호 단계 — 상세의 본문 흐름 */
.dl-steps{margin-top:44px;display:flex;flex-direction:column;gap:0}
.dl-step{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:30px 0}
.dl-step + .dl-step{border-top:1px solid var(--line)}
.dl-no{font-size:40px;font-weight:800;letter-spacing:-0.045em;line-height:.9;color:var(--tint);-webkit-text-stroke:0}
.dl-step--on .dl-no{color:var(--blue)}
.dl-step h3{font-size:20px;font-weight:800;letter-spacing:-0.04em;line-height:1.35}
.dl-step > div > p{margin-top:11px;font-size:15px;line-height:1.75;color:var(--slate);max-width:44em}
.dl-mk{margin-top:18px;max-width:440px}

/* 주의사항 · 참고 — 코랄 왼쪽 선 하나 */
.dl-note{
  margin-top:40px;padding:24px 26px;border-radius:18px;
  background:var(--coral-tint);box-shadow:inset 3px 0 0 var(--coral);
}
.dl-note b{display:block;font-size:14px;font-weight:800;letter-spacing:-0.03em;color:var(--navy)}
.dl-note ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dl-note li{display:flex;gap:9px;font-size:13.5px;line-height:1.7;color:var(--slate)}
.dl-note li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--coral);margin-top:8px}

/* 전체 듀얼케어에서 이 조각이 맡는 자리 — 작은 지도 */
.dl-map{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dl-map span{
  padding:16px 14px;border-radius:14px;text-align:center;
  background:var(--cream);font-size:13.5px;font-weight:700;letter-spacing:-0.03em;color:var(--slate);
}
.dl-map span.is-here{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(49,85,200,.28)}
.dl-map-note{margin-top:14px;text-align:center;font-size:13px;color:var(--slate)}

/* 확인 안 된 내용 표시 — 화면에도 보이게 둔다(17절 지시) */
.todo{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  padding:7px 13px;border-radius:9px;
  background:#fff5d6;box-shadow:inset 0 0 0 1px #e8d9a3;
  font-size:12.5px;font-weight:700;letter-spacing:-0.02em;color:#8a6d1f;
}
.todo::before{content:'TODO';font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 5px;border-radius:4px;background:#8a6d1f;color:#fff}


/* ============================================================
   16. 미공개 시안 띠
   ⚠️ 이 띠가 보이는 페이지는 **라이브에 없다.** 루트에만 파일이 있고 _배포용/ 에
      복사하지 않았기 때문이다(그것이 이 저장소의 feature flag 다 —
      sync-deploy.mjs 는 배포본에 이미 있는 파일만 덮어쓴다).
   ⚠️ 띠를 지우지 말 것. 공개할 때는 띠를 지우는 것이 아니라 ARCHITECTURE.md 10절의
      네 단계를 밟는다(그 안에 이 띠 제거가 들어 있다).
   ============================================================ */
/* 🔴 위 여백은 **알약 내비 높이만큼** 내려야 한다. --e-gap 만 주면 떠 있는 내비 뒤로
   깔려서 띠가 아예 안 보인다(2026-09-18 실제로 그랬다 — 요소는 있는데 화면에 없었다).
   바로 뒤에 오는 빵가루는 그만큼 위 여백을 덜어낸다. */
.unpub{
  position:relative;z-index:30;
  max-width:var(--e-max);width:calc(100% - 32px);margin:calc(var(--gnb-h) + 18px) auto 0;
  padding:14px 20px;border-radius:16px;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;font-weight:700;letter-spacing:-0.02em;line-height:1.6;
}
.unpub b{
  flex:none;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.22);
  font-size:11px;font-weight:800;letter-spacing:.06em;
}
.unpub span{color:#fff2f0;font-weight:600}
.unpub + .crumb{padding-top:18px}
@media(max-width:640px){
  .unpub{width:calc(100% - 24px);padding:12px 16px;font-size:12.5px;margin-top:calc(var(--gnb-h) + 10px)}
  .unpub + .crumb{padding-top:14px}
}


/* ============================================================
   9. 좁은 화면 — site.css · landing.css 와 같은 지점에서만 내려간다
   ⚠️ 기준점을 새로 만들지 않는다. 1280 / 1000 / 760 / 640 / 360 다섯 곳이
      이미 정해져 있고, 여기서 새 숫자를 쓰면 이 페이지만 다른 폭에서 접힌다.
   ============================================================ */
@media(max-width:1280px){
  .pg-h1{font-size:40px}
  .pg-hero-grid{gap:32px}
}
@media(max-width:1000px){
  .pg-h1{font-size:34px}
  /* 히어로 — 요약 카드를 제목 아래로 내린다 */
  .pg-hero-grid{grid-template-columns:1fr;gap:34px}
  .pg-facts{padding:20px}
  .pr{grid-template-columns:1fr;gap:12px}
  .sv{grid-template-columns:1fr;gap:14px}
  .rel{grid-template-columns:1fr;gap:12px}
  .tg{grid-template-columns:1fr}
  /* 흐름도 — 세로로 세우고 **화살표 방향도 돌린다**(→ 가 아니라 ↓) */
  .flow,.flow--3,.flow--5{grid-template-columns:1fr;gap:10px;max-width:520px;margin-left:auto;margin-right:auto}
  .flow-arrow{font-size:0;padding:2px 0}
  .flow-arrow::after{content:'\2193';font-size:19px}
  .flow-arrow--back::after{content:'\2191'}
  /* 비교판 — 표를 줄 단위로 쪼갠다. 세 칸 격자를 좁은 화면에 그대로 두면
     글자가 두 자씩 끊긴다(실측 375폭에서 항목 칸이 84px).
     머리줄을 감추는 대신 각 칸 앞에 어느 쪽인지 글자로 붙인다. */
  .cmp-row{grid-template-columns:1fr}
  .cmp-row > div{padding:14px 18px}
  .cmp-row--head{display:none}
  .cmp-k{padding-top:18px}
  .cmp-them::before{content:'수업만 있는 구조 · ';font-weight:800;color:var(--slate)}
  .cmp-us::before{content:'프렌글 듀얼케어 · ';font-weight:800;color:var(--blue)}
  .cmp-row > div + div{border-top:1px dashed var(--line)}
  /* 이용 단계 다섯 칸 → 둘씩. 점선 이음은 가로 배치에서만 뜻이 있으니 지운다 */
  .gd{grid-template-columns:repeat(2,1fr)}
  .gd-step:not(:last-child)::after{display:none}
  /* 칼럼 카드 격자 → 한 줄 */
  .cc-grid{grid-template-columns:1fr}
  /* 상황 카드 — 오른쪽 이름표를 아래로 내린다(가로로 두면 글이 두 자씩 끊긴다) */
  .sit-item{grid-template-columns:auto 1fr;gap:16px}
  .sit-name{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .sit-name span{margin-top:0}
  .sit-name em{margin-top:0}
  .dl-map{grid-template-columns:repeat(2,1fr)}
  .pg-hero--detail .pg-h1{font-size:30px}
}
@media(max-width:640px){
  .pg-h1{font-size:30px;line-height:1.28}
  /* 좁은 화면 — --e-gap 이 12px 로 줄어드니 여기도 같이 줄인다(24+12=36px) */
  .lp-e .hero.pg-hero{padding-bottom:24px}
  .pg-hero .e-btns{flex-direction:column}
  .pr-item,.tg-card,.flow-step{padding:22px 20px}
  .sv-card{padding:24px 20px}
  .rel-card{padding:22px 20px}
  .tg-card{flex-direction:column;gap:14px}
  .crumb{padding-top:calc(var(--gnb-h) + 14px)}
  .flow{margin-top:32px}
  .pr,.sv,.tg{margin-top:32px}
  .cmp{margin-top:32px}
  /* 하루 흐름 — 시각 칸을 없애고 점 옆에 붙인다(64px 칸이 '오전 7:30' 을 두 줄로 접는다) */
  .jn::before{left:6px}
  .jn-row{grid-template-columns:14px 1fr;gap:14px}
  .jn-time{display:none}
  .jn-dot{padding-top:6px}
  .jn-body b{font-size:15.5px}
  .jn-body .jn-time--m{display:block;margin-bottom:4px;font-size:11.5px;font-weight:800;color:var(--slate)}
  .gd{grid-template-columns:1fr;gap:10px;margin-top:32px}
  .sit{margin-top:32px;gap:10px}
  .sit-item{padding:22px 20px}
  .sit-q b{font-size:17px}
  .dl-step{grid-template-columns:1fr;gap:0;padding:26px 0}
  .dl-no{font-size:30px;margin-bottom:12px}
  .cat + .cat{margin-top:36px;padding-top:32px}
  .cat-head h2{font-size:22px}
  .anav{top:calc(var(--gnb-h) + 2px)}
  .anav-in{padding:6px}
  .anav a{padding:8px 13px;font-size:12.5px}
  .dl-ask{padding:18px 20px}
  .pg-hero--detail .pg-h1{font-size:27px}
}
@media(max-width:360px){
  .pg-h1{font-size:27px}
}


/* ============================================================
   17. FAQ · 상품 안내를 IA 어법으로 (2026-09-18 보완)
   ------------------------------------------------------------
   두 페이지는 원래 각자의 판이었다.
     /faq      흰 바탕 + 가운데 기둥 + 옅은 그림자 카드 (site.css 6절)
     /pricing  문서 페이지 틀(.doc*) — terms · privacy · refund 와 공유 (site.css)
   허브 넷이 파랑 바탕 + 흰 판으로 정리되면서 이 둘만 다른 사이트처럼 보였다.

   ⚠️⚠️ **마크업을 갈아엎지 않는다.** 두 페이지 모두 건드리면 조용히 죽는 것이 붙어 있다.
     /faq      details.faq-item · summary · div.faq-a 를 faq-대조.mjs 가 정규식으로 찾고,
               #q-… 를 assets/js/faq.js 가, #contact 와 .mq-* 를 contact.js 가 잡는다.
     /pricing  표 안의 금액·회차는 거래조건 표시다. 한 글자도 바꾸지 않는다.
   그래서 **바꾸는 것은 껍데기와 색뿐**이고, 여기 규칙은 전부 `.lp-e` 아래에 둔다.

   🔴 `.doc*` 는 약관·개인정보처리방침·환불규정·동의서가 **함께 쓴다.**
      스코프 없이 고치면 법적 문서 네 장이 통째로 파래진다.
      `.lp-e` 는 /pricing 에만 붙였으므로 그 네 장은 지금 모양 그대로다.

   ⚠️ 2026-09-15 에 "FAQ도 흰색으로"(칼럼 목록과 맞춤) 라는 지시가 있었다. 이번 개편은
      그 지시를 뒤집는 것이 아니라 **기준이 바뀐 것**이다 — 사이트의 기준 화면이
      랜딩 E안(파랑 바탕 + 흰 판)이 됐고, 글이 놓이는 자리는 여전히 흰 판이다.
      ⚠️ /column(칼럼 목록)은 그때 FAQ 와 짝을 맞춘 페이지다. 아직 흰 바탕이라
         지금은 FAQ 와 갈라져 있다 — 함께 옮길지는 따로 정할 것.
   ============================================================ */

/* ---- 공통: 파랑 바탕 위 페이지 틀 ---- */
.lp-e .faq-page,
.lp-e .doc{background:transparent}
.lp-e .faq-frame{max-width:var(--e-max);padding-bottom:0}
.lp-e .doc{padding:0 0 var(--e-gap)}
.lp-e .doc-inner{max-width:var(--e-max);padding:0 16px}

/* ---- 머리 — 파랑 위 흰 글씨 (허브의 .pg-hero 와 같은 자리) ---- */
/* ⚠️ 아래 여백은 **제자리 이동 막대(.anav)와 나눠 갖는다.** 막대가 margin-top:var(--e-gap)
   을 따로 갖고 있어서, 여기 값 + 그 값이 실제 틈이다(44+20 = 64px 이라 너무 벌어져 있었다).
   지금은 20+20 = 40px. 한쪽만 보고 고치면 틈이 두 배로 움직인다. */
.lp-e .faq-hero{padding:22px 0 20px;text-align:left}
.lp-e .faq-hero .wrap{max-width:var(--e-max);padding:0 16px}
.lp-e .faq-pill{background:rgba(255,255,255,.16);color:#fff}
.lp-e .faq-pill svg{stroke:#fff}
.lp-e .faq-title{color:#fff;font-size:44px;line-height:1.22;letter-spacing:-0.045em}
/* 제목은 **두 줄 · 전부 흰색**이다 (2026-09-18 지시).
   ⚠️ .em 을 지우지 않고 색만 흰색으로 둔다 — 마크업의 뜻(강조 구간)은 남겨 두고
      색만 거둔 것이라, 나중에 강조를 되살릴 때 한 줄이면 된다.

   🔴 되살릴 때 **코랄 원색을 쓰지 말 것.** 파랑 위에서 #ff4f3d 는 대비비가 1.97:1 이라
      44px 굵은 제목인데도 큰 글자 기준(3:1)에 못 미치고, 빨강이 파랑 위에서 떨려
      경고처럼 읽힌다(2026-09-18 '색깔이 너무 무섭다' 지적으로 한 번 걷어냈다).
      파랑 위 강조는 landing.css 의 '.e-on-blue .e-mark' 와 같은 #ffc9c0(4.40:1)을 쓴다.
      코랄 원색은 흰 바탕에서만. */
.lp-e .faq-title .em{color:#fff}
.lp-e .faq-sub{margin-left:0;color:#d8e2ff;max-width:34em}
/* 파랑 위에서는 흰 채움이 주인공이다(파랑 채움 단추는 바탕에 묻힌다) */
.lp-e .faq-hero-cta{background:#fff;color:var(--blue);border-radius:var(--r-pill);box-shadow:0 10px 28px rgba(8,18,52,.24)}
.lp-e .faq-hero-cta:hover{background:#fff;color:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 34px rgba(8,18,52,.3)}

.lp-e .doc-head{padding:22px 0 40px;border-bottom:0;margin-bottom:0}
.lp-e .doc-title{color:#fff;font-size:44px;line-height:1.22;letter-spacing:-0.045em}
.lp-e .doc-meta{color:#d8e2ff;margin-top:14px}
/* 2026-09-23 — /pricing 의 사업자정보는 흰 판 밖(파랑 바탕)에 있어 --slate 로는 1.2:1 이었다 */
.lp-e .doc-foot{color:#d8e2ff;border-top-color:rgba(255,255,255,.22)}
/* '← 홈으로 돌아가기' 는 빵가루가 대신한다 */
.lp-e .doc-back{display:none}

/* ---- 본문 덩어리를 흰 판으로 ---- */
/* 🔴 가운데 정렬을 잃지 말 것 — 원래 규칙이 `margin:0 auto` 인데 위아래 여백만
   고치려고 `margin:… 0 0` 을 쓰면 판이 왼쪽으로 붙는다(2026-09-18 실제로 그랬다).
   가로는 반드시 auto 로 둔다.
   ⚠️ 폭도 넓힌다 — 판이 880px 이면 그 위의 알약 내비(1160)와 아래 CTA 띠보다 좁아
      리듬이 어긋난다. 허브의 .e-panel 과 같은 폭으로 두고, 글줄 길이는 판 **안에서**
      잡는다(아래 .faq-item 최대폭). */
.lp-e .faq-card,
.lp-e .doc-toc,
.lp-e .doc-body{
  background:#fff;border-radius:var(--e-r);
  max-width:none;padding:var(--e-pad) 56px;margin:var(--e-gap) auto 0;
  box-shadow:none;
}
/* 판은 넓게, 글줄은 좁게 — 허브의 .e-head(780px) 와 같은 판단이다.
   ⚠️ 묶는 자리는 문답 목록을 감싼 `.faq--board` 다. `.faq-item` 은 그 안에 있어서
      `.faq-card > .faq-item` 으로는 안 잡힌다(실제로 안 먹었다 — 답이 한 줄 1000px 이었다).
   ⚠️ 답 글줄이 950px 을 넘으면 눈이 다음 줄 첫 글자를 놓친다. 한글 기준 45~50자가 한 줄이다. */
.lp-e .faq--board,
.lp-e .faq-card-title{max-width:880px;margin-left:auto;margin-right:auto}

/* 판 안쪽 여백을 알약 내비와 맞춘다 — .wrap 의 24px 을 쓰면 판이 내비보다 16px 좁다 */
.lp-e .faq-frame > .wrap{padding:0 16px}
.lp-e .faq-card + .faq-card{margin-top:var(--e-gap)}
.lp-e .faq-card-title{text-align:left;margin-bottom:6px;font-size:28px;letter-spacing:-0.04em}
/* 목차는 판 안에서 크림 상자를 다시 두지 않는다 — 판 자체가 상자다 */
.lp-e .doc-toc{padding:36px 56px}
.lp-e .doc-toc h2{font-size:12px;letter-spacing:.1em;color:var(--steel);margin-bottom:14px}
.lp-e .doc-body > h2:first-of-type{margin-top:0}

/* FAQ 낱장(/faq/<슬러그>) — 게시판과 같은 틀이라 위 규칙을 그대로 받고,
   이 페이지에만 있는 조각(빵가루 · 물음 제목 · 돌아가기)만 파랑 위 기준으로 되돌린다. */
.lp-e .faq-crumb{color:#d8e2ff}
.lp-e .faq-crumb a{color:#d8e2ff}
.lp-e .faq-crumb a:hover{color:#fff}
.lp-e .faq-crumb span{color:#7d9aee}
/* 게시판(/faq)과 같은 왼쪽 정렬로 맞춘다 — 원래는 가운데였다.
   허브 넷의 히어로가 전부 왼쪽이라, 낱장만 가운데면 한 사이트로 안 읽힌다. */
.lp-e .faq-crumb{justify-content:flex-start}
.lp-e .faq-one-title{color:#fff;font-size:38px;line-height:1.28;letter-spacing:-0.04em;max-width:24em;margin-left:0}
/* 🔴 낱장에는 .crumb 가 없다 — 자체 빵가루(.faq-crumb)가 히어로 **안**에 있어서
   위 여백을 내주는 것이 없다. 게시판(/faq)은 .crumb 가 그 일을 한다.
   이걸 빼먹으면 물음 제목이 떠 있는 알약 내비 뒤로 깔린다(2026-09-18 실제로 그랬다). */
.lp-e .faq-one-hero{padding-top:calc(var(--gnb-h) + 26px);padding-bottom:36px}
@media(max-width:640px){.lp-e .faq-one-title{font-size:26px}}

/* 메일 문의 카드 — 크림 판 */
.lp-e .mq-bar--card{
  background:var(--cream);border-radius:var(--e-r);
  max-width:none;padding:var(--e-pad) 56px;margin:var(--e-gap) auto 0;box-shadow:none;
}

/* ---- 좁은 화면 — 허브와 같은 지점에서 같은 값으로 ---- */
@media(max-width:1000px){
  .lp-e .faq-title,.lp-e .doc-title{font-size:34px}
  .lp-e .faq-card,.lp-e .doc-toc,.lp-e .doc-body,.lp-e .mq-bar--card{padding:var(--e-pad) 28px}
  .lp-e .doc-toc{padding:30px 28px}
  .lp-e .doc-toc ol{columns:1}
}
@media(max-width:640px){
  .lp-e .faq-title,.lp-e .doc-title{font-size:30px;line-height:1.28}
  /* 좁은 화면도 같은 셈 — 여기 16 + 막대 12(--e-gap) = 28px */
  .lp-e .faq-hero{padding:18px 0 16px}
  /* 🔴 위 한 줄은 padding **단축**이라 낱장의 padding-top 을 되돌린다. 다시 내려 준다.
     (게시판은 .crumb 가 위 여백을 내주므로 해당 없음 — 낱장만 자체 빵가루를 쓴다) */
  .lp-e .faq-one-hero{padding-top:calc(var(--gnb-h) + 14px)}
  .lp-e .doc-head{padding:18px 0 28px}
  .lp-e .faq-card,.lp-e .doc-toc,.lp-e .doc-body,.lp-e .mq-bar--card{padding:var(--e-pad) 20px}
  .lp-e .faq-card-title{font-size:23px}
  .lp-e .faq-hero-cta{width:100%;justify-content:center}
}
@media(max-width:360px){
  .lp-e .faq-title,.lp-e .doc-title{font-size:27px}
}


/* ============================================================
   18. 마지막 CTA 제목 한 단 크게 (.e-h2--lg) — 2026-09-18
   ------------------------------------------------------------
   기본 .e-h2(36px)보다 4px(약 3pt) 크다. 짧은 문장을 두 줄로 끊어 쓰는 제목에 쓴다.
   ⚠️ .e-h2 자체를 키우지 않는다 — 그 이름은 랜딩·허브의 모든 섹션 제목이 함께 쓴다.
   ⚠️ 끊는 지점은 landing.css 의 .e-h2 와 같은 자리(1280 · 1000 · 640)에 맞춘다.
      새 기준점을 만들면 이 제목만 다른 폭에서 접힌다.
   ⚠️ pages.css 가 landing.css 뒤에 실리므로 같은 한 자리 선택자로도 이긴다.
   ============================================================ */
.e-h2--lg{font-size:40px}
@media(max-width:1280px){.e-h2--lg{font-size:37px}}
@media(max-width:1000px){.e-h2--lg{font-size:33px}}
@media(max-width:640px){.e-h2--lg{font-size:29px}}