/* ============================================================
   프렌글 기업 영어교육(/business) 전용 스타일 — 2026-09-18 신설

   ⚠️⚠️ **이 파일은 business.html 한 장만 부른다.**
   네 번째로 실린다 — site.css → landing.css → pages.css → business.css.
   앞 세 벌이 이미 갖고 있는 것(판 · 버튼 · 제목 · 목업 · 듀얼케어 · 흐름도 ·
   FAQ 아코디언 · 입력칸)은 **여기서 다시 쓰지 않는다.** 여기 있는 것은
   B2B 페이지에만 있고 다른 데 없는 조각뿐이다.

   ── 왜 새 파일인가 ──────────────────────────────
   랜딩(B2C)과 이 장은 **읽는 사람이 다르다.** 랜딩은 "나도 할 수 있을까" 를 묻는
   개인이고, 여기는 "우리 조직에 넣어도 되나" 를 묻는 담당자다. 그래서 같은
   브랜드 어법(파랑 바탕 · 흰 판 · 알약 내비 · 코랄 신호)은 그대로 쓰되,
   **정보를 담는 방식**을 다르게 둔다 — 숫자 스펙 · 역할 분담 레인 · 순환 구조도.
   landing.css 에 `.biz-` 를 얹지 않은 이유는 그쪽이 이미 640줄이고, 이 장의
   수명(영업 자료라 자주 갈아엎힌다)이 랜딩과 다르기 때문이다.

   ── 이름 규칙 ───────────────────────────────────
   전부 `.biz-` 로 시작한다. 하나 예외는 `.gd--4`(pages.css 14절 .gd 의 칸 수
   변형)인데, 새 이름을 만드는 대신 있는 조각의 변형으로 두는 편이 맞다.

   🔴 **파랑 위에 흰 판을 놓을 때는 글자색을 되돌려야 한다.**
      부모의 color:#fff 를 물려받아 흰 판에 흰 글씨가 된다(landing.css 머리 참고).

   ⚠️ 코랄은 배지·도형·번호·강조 낱말에만. **버튼에는 안 쓴다**(2026-09-02 규칙).
   ⚠️ 새 색·새 모서리값·새 끊는 지점을 만들지 않았다. 색은 :root 토큰,
      끊는 지점은 1280 / 1000 / 760 / 640 다섯 곳 중에서만 쓴다.
   ============================================================ */


/* ============================================================
   1. 미공개 표시 — 이 장은 아직 라이브에 없다
   ⚠️ 띠 자체는 pages.css 16절(.unpub)이 그린다. 여기서는 아무것도 더하지 않는다.
      이 주석은 "왜 안 보이나" 를 찾는 사람을 위해 남긴다.
   ============================================================ */


/* ============================================================
   2. HERO — 왼쪽 문장, 오른쪽 스펙 칩 셋
   ⚠️ .pg-hero(pages.css 2절)를 그대로 쓰고 **오른쪽 칸만** 갈아 끼운다.
      /service 는 그 자리에 요약 카드(.pg-facts)를 두는데, 담당자가 첫 화면에서
      알아야 하는 것은 요약이 아니라 **스펙**이라 칩 셋으로 바꾼다.
   ============================================================ */
.biz-hero .pg-h1{max-width:15em}

/* 히어로 ↔ 제자리 이동 막대 사이 — **여기서 따로 정하지 않는다.**
   처음에는 이 페이지만 24px 로 덮었는데(2026-09-18 1차 지시), 같은 문제가 허브 넷에
   똑같이 있다는 것이 확인돼 pages.css 2절의 `.lp-e .hero.pg-hero` 자체를 28px 로
   고쳤다(2차 지시). 그래서 이 페이지도 그 값을 그대로 받는다 —
   허브 다섯 장이 한 값을 쓰는 편이 어긋날 자리를 하나 줄인다. */

/* 첫 화면 스펙 칩 — 원어민 1:1 수업 / 카톡 영어 학습 / 학습 리포트 */
.biz-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.biz-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  font-size:14px;font-weight:700;letter-spacing:-0.025em;color:#fff;
}
.biz-chip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.biz-chip--fill svg{fill:currentColor;stroke:none}

/* 히어로 오른쪽 — 체험 안내 상자.
   ⚠️ **무료를 히어로 주인공보다 크게 만들지 않는다**(브리프 5절 지시).
      그래서 제목 크기를 h1 근처로 올리지 않고, 판도 반투명으로 낮춰 둔다.
      여기서 파는 것은 '공짜' 가 아니라 '도입 전에 확인할 방법' 이다. */
.biz-pilot{
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  border-radius:24px;padding:30px 28px;
}
.biz-pilot-lb{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:800;letter-spacing:.12em;color:#ffd9d3;
}
.biz-pilot-lb::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.biz-pilot b{display:block;margin-top:13px;font-size:20px;font-weight:800;letter-spacing:-0.04em;line-height:1.4;color:#fff}
.biz-pilot p{margin-top:11px;font-size:14px;line-height:1.75;color:#d8e2ff}
.biz-pilot ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.biz-pilot li{display:flex;gap:10px;font-size:13.5px;font-weight:600;line-height:1.55;color:#fff}
.biz-pilot li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:#ffc9c0;margin-top:8px}


/* ============================================================
   3. PRODUCT SPECS — 숫자 넷
   숫자가 **먼저** 읽혀야 한다. 그래서 라벨을 숫자 위가 아니라 아래 둔다.
   ⚠️ 랜딩 TRUST 의 지표판(.en)과 다른 것: 저기는 '성과' 고 여기는 '스펙' 이다.
      성과는 근거가 필요하지만 스펙은 우리가 정하는 값이라 그냥 쓸 수 있다.
   ============================================================ */
.biz-spec{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.biz-spec-item{
  background:var(--cream);border-radius:22px;padding:30px 26px;
  display:flex;flex-direction:column;
}
.biz-spec-n{
  font-size:42px;font-weight:800;letter-spacing:-0.05em;line-height:1;
  color:var(--blue);font-variant-numeric:tabular-nums;
}
/* MIN · DAILY · WEEKLY 처럼 글자로 된 스펙은 숫자보다 작게 — 같은 크기로 두면
   글자 스펙만 판을 꽉 채워서 숫자 넷의 리듬이 깨진다(실측: DAILY 가 42px 에서 148px) */
.biz-spec-n small{font-size:.52em;font-weight:800;letter-spacing:-0.02em;margin-left:3px}
.biz-spec-n em{font-style:normal;font-size:.62em;letter-spacing:-0.03em}
.biz-spec-item h3{margin-top:18px;font-size:16.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.biz-spec-item p{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--slate)}
/* 마지막 줄 — 단서(예: 40분 선택 가능)를 숨기지 않고 작게 단다 */
.biz-spec-item span{
  display:block;margin-top:auto;padding-top:16px;
  font-size:12px;font-weight:700;letter-spacing:-0.02em;color:var(--steel);
}


/* ============================================================
   4. LEARNING LOOP — 이 장의 주인공 그림
   ------------------------------------------------------------
   왜 고리로 그리나
     담당자가 사는 것은 '수업 회차' 가 아니라 **영어와 만나는 빈도**다.
     그 말을 글로 하면 한 문단이고, 고리로 그리면 한 눈이다.
     마지막 화살표(NEXT CLASS → CLASS)만 코랄인 이유가 그것이다 —
     끝나는 것이 아니라 **되돌아간다**는 표시.

   ⚠️ 칸 다섯의 자리는 원 위 각도로 계산한 값이다(반지름 210, 중심 440·280,
      72도 간격, 12시부터 시계방향). 퍼센트로 적어 둔 것은 무대가 폭에 따라
      줄어들기 때문이다 — 픽셀로 박으면 좁아질 때 칸이 원 밖으로 튄다.
        CLASS   -90도 → (440, 70)      → 50.00% · 12.50%
        RECAP   -18도 → (639.7, 215.1) → 72.70% · 38.41%
        DAILY    54도 → (563.4, 449.9) → 64.03% · 80.34%
        COACH   126도 → (316.6, 449.9) → 35.97% · 80.34%
        NEXT    198도 → (240.3, 215.1) → 27.30% · 38.41%
      칸 하나를 옮기려면 각도부터 다시 계산할 것. 눈대중으로 옮기면 그 칸만
      원에서 벗어나고, 고리가 고리로 안 읽힌다.

   ⚠️ 고리(SVG)와 칸(HTML)이 **같은 틀 안에서 같은 비율로** 줄어야 한다.
      그래서 무대에 aspect-ratio 를 주고 SVG 를 그 위에 통째로 덮는다.
   ⚠️ 1000px 아래에서는 고리를 감추고 세로 흐름으로 바꾼다(9절). 원을 그대로
      줄이면 칸 안 글자가 두 자씩 끊긴다.
   ============================================================ */
.biz-loop{
  position:relative;max-width:880px;margin:52px auto 0;
  aspect-ratio:880 / 560;
}
.biz-loop-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 고리 · 화살촉 · 가운데 원판 — 색을 SVG 속성으로 박지 않고 여기서 준다.
   ⚠️ 마크업에 stroke="#..." 을 쓰면 배색이 바뀔 때 HTML 까지 뒤져야 한다.
      이 저장소의 색은 전부 :root 토큰이 정본이다. */
/* ⚠️ 고리 색으로 --line(#e7eaf4)을 쓰면 **크림 판 위에서 안 보인다**(대비 1.1:1 —
   실제로 첫 판에서 화살촉만 떠 있고 원이 없었다). 그림자와 같은 방식으로
   브랜드 파랑을 옅게 깐다(landing.css 의 rgba(49,85,200,.08) 계열과 한 가족). */
.biz-loop-ring .biz-ring{fill:none;stroke:rgba(49,85,200,.28);stroke-width:2.5;stroke-dasharray:7 10;stroke-linecap:round}
.biz-loop-ring .biz-disc{fill:var(--tint);stroke:none}
.e-panel--cream .biz-loop-ring .biz-disc{fill:#fff}
.biz-loop-ring .biz-tip{fill:var(--blue);stroke:none}
/* 마지막 화살촉(NEXT CLASS → CLASS)만 코랄 — 끝이 아니라 **되돌아간다**는 표시다 */
.biz-loop-ring .biz-tip--back{fill:var(--coral)}

/* 가운데 — 이 그림이 무슨 말을 하는지 한 줄 */
.biz-loop-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:236px;text-align:center;
}
.biz-loop-core b{
  display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--steel);
}
.biz-loop-core strong{
  display:block;margin-top:10px;font-size:23px;font-weight:800;
  letter-spacing:-0.045em;line-height:1.35;color:var(--navy);
}
.biz-loop-core span{display:block;margin-top:11px;font-size:13px;line-height:1.65;color:var(--slate)}

/* 칸 다섯.
   ⚠️ 폭 186px 은 **재서 정한 값**이다. 원 위 다섯 자리는 서로 76px 씩 떨어져 있는데
      칸 폭이 196 이면 CLASS↔RECAP 과 NEXT↔CLASS 가 **3px 을 두고 붙는다**(실측
      1440폭: 805.2 / 808.3). 186 이면 같은 자리에서 틈이 13.8px 로 벌어진다.
      폭을 다시 올리려면 반지름(business.css 위 주석의 210)부터 키울 것. */
.biz-node{
  position:absolute;transform:translate(-50%,-50%);
  width:186px;background:#fff;border-radius:18px;padding:16px 18px;
  box-shadow:var(--sh-float);text-align:left;
  color:var(--navy);   /* 🔴 판이 크림일 수도 흰색일 수도 있다 — 글자색을 못 박는다 */
}
.biz-node-lb{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--blue)}
.biz-node b{display:block;margin-top:7px;font-size:14.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.4}
.biz-node p{margin-top:7px;font-size:12px;line-height:1.6;color:var(--slate)}
/* 누가 하는 일인지 — 원어민 강사(파랑) · 코치(코랄) · 학습자(회색) */
.biz-node i{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:-0.015em;color:var(--steel);
}
.biz-node i::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.biz-node--teacher i{color:var(--blue)}
.biz-node--coach i{color:var(--coral-ink)}
/* 되돌아가는 칸 — 고리가 닫히는 지점이라 테두리로 표시한다 */
.biz-node--back{box-shadow:var(--sh-float),inset 0 0 0 1.5px var(--coral)}

/* 「다시 처음으로」 알림 — 넓은 화면에서는 고리 자체가 그 말을 하므로 숨긴다.
   1000px 아래에서 고리가 사라질 때만 나온다(13절). */
.biz-loop-back{display:none}

.biz-loop-pos1{left:50.00%;top:12.50%}
.biz-loop-pos2{left:72.70%;top:38.41%}
.biz-loop-pos3{left:64.03%;top:80.34%}
.biz-loop-pos4{left:35.97%;top:80.34%}
.biz-loop-pos5{left:27.30%;top:38.41%}

/* 그림 아래 한 줄 — 그림이 못 하는 말(왜 그것이 성장과 이어지나)을 여기서 한다 */
.biz-loop-say{margin-top:44px;text-align:center}
.biz-loop-say b{display:block;font-size:22px;font-weight:800;letter-spacing:-0.04em;line-height:1.45}
.biz-loop-say b em{font-style:normal;color:var(--blue)}
.biz-loop-say p{margin:14px auto 0;max-width:34em;font-size:15px;line-height:1.75;color:var(--slate)}


/* ============================================================
   5. EVERYDAY ENGLISH — 주제 넷 + 카톡 화면 한 조각
   ⚠️ 주제를 카드 넷으로만 두지 않는다. 그러면 이 장에서 네 번째 카드 격자가 된다
      (브리프 4절: 카드 남발 금지). 왼쪽은 목록, 오른쪽은 **실제로 오가는 화면**이다.
   ============================================================ */
.biz-day{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:48px}
.biz-topic{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.biz-topic li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;
  padding:22px 24px;border-radius:20px;background:#fff;
}
.e-panel .biz-topic li{background:var(--cream)}
.e-panel--cream .biz-topic li{background:#fff}
.biz-topic b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-0.035em;line-height:1.35}
.biz-topic p{margin-top:8px;font-size:13.5px;line-height:1.7;color:var(--slate)}

/* 카톡 화면 한 판 — .mk-msg(landing.css 5절)를 그대로 담는 틀 */
.biz-talk{background:var(--navy);border-radius:24px;padding:22px;color:#fff}
.e-panel--cream .biz-talk{background:var(--navy)}
.biz-talk-top{
  display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.biz-talk-ava{
  width:34px;height:34px;border-radius:50%;flex:none;background:var(--coral-ink);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;
}
.biz-talk-top b{display:block;font-size:14px;font-weight:800;letter-spacing:-0.03em}
.biz-talk-top span{display:block;margin-top:2px;font-size:11px;color:#d8e2ff}
/* 🔴🔴 **이 파일에서 같은 함정이 세 번째다.** 이름표 칸도 `<span>` 이라 바로 윗줄
   `.biz-talk-top span`(0,1,1)이 홑클래스 `.biz-talk-ava`(0,1,0)를 **순서와 상관없이**
   이긴다. 그래서 display:flex · 13px · 흰 글씨가 전부 덮여, 34px 코랄 원 안에
   11px 하늘색 「코」가 **왼쪽 위 구석에** 찍혀 있었다(2026-09-21 실측 —
   위 1px / 아래 20px / 왼 0 / 오른 25px).

   앞서 같은 이유로 터진 둘
     .ec p        → .biz-ask-note   (흰 판에 하늘색 글씨)
     .ed-me span  → .ed-me-ava      (원 위쪽에 12px 이모지)

   ⚠️ 새 조각을 만들 때 **부모 밑에 태그 선택자(`.부모 span` 꼴)를 두면**, 그 안에
      같은 태그로 된 다른 칸이 생기는 순간 조용히 덮인다. 홑클래스로는 절대 못 이긴다.
      자손 선택자로 두 칸을 만들어 되돌리는 것이 이 파일의 처방이다. */
.biz-talk-top .biz-talk-ava{
  display:flex;align-items:center;justify-content:center;
  margin-top:0;
  font-size:13px;line-height:1;color:#fff;
}
.biz-talk-body{margin-top:16px;display:flex;flex-direction:column;gap:7px}
/* 시각 표시 — 하루 안에서 언제 오가는지가 이 그림의 요점이다 */
.biz-talk-time{
  align-self:center;margin:6px 0;padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#c3d1ff;
}
.biz-talk-note{margin-top:16px;font-size:12px;line-height:1.65;color:#d8e2ff}


/* ============================================================
   5-1. DUAL CARE — 물려받은 조각 한 줄 손보기
   🔴 landing.css 7절의 `.ed-role` 은 **흰 판 기준**이라 카드가 크림이다.
      이 장은 듀얼케어를 **크림 판** 위에 놓아서(판 여섯이 흰색으로 이어지는 것을
      끊으려고) 그대로 두면 왼쪽 카드가 바탕에 묻힌다 — 오른쪽은 코랄이라 남고
      왼쪽만 사라져서 '두 명이 함께 본다' 가 한 명으로 읽힌다.
      판이 크림일 때만 카드를 흰색으로 되돌린다.
   ============================================================ */
.e-panel--cream .ed-role{background:#fff}
.e-panel--cream .ed-role--coach{background:var(--coral-tint)}


/* ============================================================
   6. PERFORMANCE — 만족도 · 정규 전환율
   🔴🔴 **값이 없으면 이 구역은 화면에 아예 없다.** assets/js/business.js 의
      b2bStats 가 전부 null 이면 hidden 이 안 풀린다.
      숫자를 지어 넣지 않는 것이 이 장의 전제다(브리프 11절) — 표시광고법상
      실증 자료 없는 통계 표기는 문제가 되고, 답변엔진도 출처 없는 수치는
      인용하지 않는다. 랜딩 지표판의 각주를 비워 둔 것과 같은 판단이다.
   ⚠️ 각주(.biz-stat-note)도 값과 함께 켜진다. 집계 기준·기간 없이 숫자만
      켜는 길은 만들어 두지 않았다 — 그 조합이 정확히 금지된 표기다.
   ============================================================ */
.biz-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:48px}
.biz-stat-item{
  background:var(--blue);color:#fff;border-radius:24px;padding:36px 30px;text-align:center;
}
.biz-stat-item:nth-child(2){background:var(--navy)}
.biz-stat-item:nth-child(3){background:var(--coral)}
.biz-stat-n{font-size:52px;font-weight:800;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
.biz-stat-n small{font-size:.44em;font-weight:700;margin-left:2px}
.biz-stat-item b{display:block;margin-top:16px;font-size:15.5px;font-weight:800;letter-spacing:-0.035em}
.biz-stat-item span{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.biz-stat-note{
  margin-top:20px;text-align:center;font-size:12.5px;line-height:1.75;color:var(--steel);
}


/* ============================================================
   7. REVIEWS — 파랑 바탕 위 큰 따옴표
   ⚠️ 카드 셋을 나란히 놓지 않는다(브리프 8절). 판을 걷어내고 파랑 위에 글자만
      크게 둔다 — 이 장에서 흰 판이 연달아 여섯이라, 여기서 한 번 끊어야
      스크롤이 지루해지지 않는다.
   ============================================================ */
.biz-say{padding:96px 0 84px}
.biz-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.biz-quote blockquote{
  margin:0;font-size:21px;font-weight:700;letter-spacing:-0.04em;line-height:1.55;color:#fff;
}
/* 따옴표는 글자가 아니라 도형으로 — 글자로 두면 서체마다 크기가 달라진다 */
.biz-quote::before{
  content:'';display:block;width:34px;height:26px;margin-bottom:22px;
  background:var(--coral);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V13.8C0 6.2 4.6 1.1 13 0l1.4 4.7C9.9 6 7.6 8.4 7.5 12H14v14zm20 0V13.8C20 6.2 24.6 1.1 33 0l1.4 4.7C29.9 6 27.6 8.4 27.5 12H34v14z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V13.8C0 6.2 4.6 1.1 13 0l1.4 4.7C9.9 6 7.6 8.4 7.5 12H14v14zm20 0V13.8C20 6.2 24.6 1.1 33 0l1.4 4.7C29.9 6 27.6 8.4 27.5 12H34v14z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.biz-quote cite{
  display:block;margin-top:24px;font-style:normal;
  font-size:13.5px;font-weight:700;letter-spacing:-0.02em;color:#d8e2ff;
}
/* 개인차 고지 — 후기를 쓰는 이상 빠질 수 없는 줄이다. 작게 두되 지우지 말 것 */
.biz-say-note{margin-top:48px;text-align:center;font-size:12.5px;color:#d8e2ff;line-height:1.7}


/* ============================================================
   8. FOR HR — 누가 무엇을 하나, 레인 셋
   ⚠️ 흐름도(.flow)를 또 쓰지 않는다. 4절 고리와 같은 그림이 두 번 나오면
      둘 다 기억에 안 남는다(pages.css 11절이 같은 이유로 갈라 둔 것).
      여기는 **가로 흐름이 아니라 세로 레인 셋**이다 — 요점이 '순서' 가 아니라
      '누가 얼마나 하나' 라서, 칸 수가 곧 부담의 크기로 읽혀야 한다.
   ============================================================ */
.biz-lanes{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;margin-top:48px;align-items:start}
.biz-lane{border-radius:24px;padding:28px 24px;background:var(--cream)}
/* 가운데(프렌글)만 색을 준다 — 일이 어디에 몰려 있는지가 한 눈에 보여야 한다 */
.biz-lane--us{background:var(--blue);color:#fff}
.biz-lane-head{display:flex;align-items:center;gap:12px}
.biz-lane-head b{font-size:17px;font-weight:800;letter-spacing:-0.04em}
.biz-lane-head span{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--steel)}
.biz-lane--us .biz-lane-head span{color:#d8e2ff}
.biz-lane-ico{
  width:40px;height:40px;border-radius:13px;flex:none;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--blue);
}
.biz-lane-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.biz-lane--us .biz-lane-ico{background:rgba(255,255,255,.18);color:#fff}
.biz-lane ol{list-style:none;margin:22px 0 0;padding:0;counter-reset:lane}
.biz-lane li{
  position:relative;padding:12px 0 12px 32px;
  font-size:14px;font-weight:700;letter-spacing:-0.025em;line-height:1.5;
}
.biz-lane li::before{
  counter-increment:lane;content:counter(lane);
  position:absolute;left:0;top:11px;
  width:21px;height:21px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;
  background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1px var(--line);
}
.biz-lane--us li::before{background:rgba(255,255,255,.2);color:#fff;box-shadow:none}
/* 칸 사이 잇는 세로 점선 — 마지막 칸에는 안 붙인다 */
.biz-lane li:not(:last-child)::after{
  content:'';position:absolute;left:10px;top:34px;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 3px,transparent 3px 6px);
}
.biz-lane--us li:not(:last-child)::after{
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.4) 0 3px,transparent 3px 6px);
}
.biz-lane-tail{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(22,37,90,.1);
  font-size:12.5px;font-weight:700;line-height:1.6;color:var(--steel);
}
.biz-lane--us .biz-lane-tail{border-top-color:rgba(255,255,255,.22);color:#d8e2ff}

/* 레인 아래 한 줄 요약 + 아이콘 다섯 */
.biz-ops-say{
  margin-top:40px;padding:26px 28px;border-radius:20px;background:var(--tint);text-align:center;
}
.biz-ops-say b{font-size:19px;font-weight:800;letter-spacing:-0.04em;line-height:1.45}
.biz-ops-say b em{font-style:normal;color:var(--blue)}
.biz-ops{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.biz-ops span{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-pill);background:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:-0.025em;color:var(--navy);
  box-shadow:inset 0 0 0 1px var(--line);
}
.biz-ops svg{width:15px;height:15px;flex:none;color:var(--blue);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   8-1. 교육 진행 현황 (2026-09-21)
   ⚠️ 위 레인 셋과 같은 무게로 보이면 안 된다 — 레인이 이 구역의 주인공이고
      이것은 "그래서 담당자는 무엇을 받나" 한 조각이다. 그래서 카드 격자를 새로
      만들지 않고 **띠 하나**로 둔다(브리프 6절: 카드 남발 금지).
   ⚠️ 바로 위 .biz-ops-say 와 붙어 있다. 그쪽이 --tint(파랑 옅은 워시)라서
      여기는 흰 판으로 갈라 둔다. 같은 색이면 두 덩어리가 한 덩어리로 읽힌다.
   ============================================================ */
.biz-report{
  margin-top:16px;padding:28px 30px;border-radius:20px;
  background:#fff;box-shadow:var(--sh-float);
}
.e-panel--cream .biz-report{box-shadow:var(--sh-float)}
.biz-report > b{display:block;font-size:18px;font-weight:800;letter-spacing:-0.04em;line-height:1.4}
.biz-report > p{margin-top:9px;font-size:14px;line-height:1.7;color:var(--slate)}
.biz-report-items{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:20px;
}
.biz-report-items span{
  display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:14px;
  background:var(--cream);
  font-size:13.5px;font-weight:700;letter-spacing:-0.025em;color:var(--navy);
}
.biz-report-items svg{width:15px;height:15px;flex:none;color:var(--blue);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* 경계 한 줄 — 기업에 가는 것과 본인에게만 가는 것을 가른다.
   ⚠️ 작게 두되 흐리지 말 것. 이 줄이 개인정보 처리 약속이다. */
.biz-report-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--slate);
}
.biz-report-note svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--steel);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   9. FREE TRIAL — 무엇을 얼마나 주나
   ⚠️ 할인 띠처럼 보이게 만들지 않는다(브리프 10절). 가격도, 남은 기간도,
      깜빡이는 것도 없다. 여기서 파는 것은 **도입 전에 확인할 방법**이다.
   ============================================================ */
.biz-give{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.biz-give-item{
  background:#fff;border-radius:24px;padding:30px 28px;
  box-shadow:var(--sh-float);display:flex;flex-direction:column;
}
.e-panel--cream .biz-give-item{box-shadow:none}
.biz-give-lb{display:block;margin-top:18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--steel)}
.biz-give-item h3{margin-top:9px;font-size:19px;font-weight:800;letter-spacing:-0.04em;line-height:1.3}

/* 🔴🔴 **제공량(회차 · 기간)을 숫자로 적지 않는다** — 2026-09-18 운영 결정.
   ------------------------------------------------------------------
   여기 한때 `.biz-give-n` 이라는 큰 숫자 줄이 있었다(「4회」 ·「3개월」).
   그 값은 noindex 인 /start 에만 있는 값이고, llms.txt 는 "무료 체험의 제공
   횟수와 기간 조건" 을 **공개하지 않는 항목**으로 적어 두었다. 이 장은 색인될
   예정이라 숫자를 두면 사이트 안에서 두 방침이 어긋난다.
   그래서 줄을 통째로 걷어내고, 그 자리를 **무엇을 주는가**(아이콘 + 체크 목록)로
   바꿨다. 횟수·기간은 아래 조건 띠의 「상담 시 안내」 한 칸이 받는다.
   ⚠️ 되살리려면 llms.txt 의 '공개하지 않는 정보' 절을 먼저 고칠 것.
      숫자만 되돌리면 그때부터 두 문서가 서로 다른 말을 한다. */
.biz-give-item .e-ico{margin-bottom:2px}
/* 숫자 줄이 갖고 있던 구분선을 목록이 이어받는다 — 없으면 제목과 목록이 붙는다 */
.biz-give-item ul{
  list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.biz-give-item li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.55;letter-spacing:-0.02em}
.biz-give-item li 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}

/* 흰 판 위의 주인공 단추.
   ⚠️ landing.css 는 `.e-btn--white`(파랑 위)와 `.e-btn--ghost` 둘만 갖고 있다.
      파랑 위에서는 흰 채움이 주인공이지만 **흰 판 위에서는 파랑 채움**이 주인공이다
      (landing.css 2절 주석의 원칙). 그 짝이 없어서 여기서 만든다.
   ⚠️ 코랄로 만들지 말 것 — 코랄은 배지·도형·번호에만 쓴다(2026-09-02 규칙). */
.e-btn--blue{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(49,85,200,.28)}
.e-btn--blue:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 32px rgba(49,85,200,.34)}

/* CTA 밑 한 줄 */
.biz-cta-note{margin-top:16px;text-align:center;font-size:14px;line-height:1.7;color:var(--slate)}

/* 조건 다섯 — 담당자가 결재 올릴 때 그대로 옮겨 적는 줄이다 */
.biz-terms{
  margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
}
.biz-terms span{
  display:flex;align-items:center;gap:9px;padding:15px 18px;border-radius:14px;
  background:#fff;font-size:13.5px;font-weight:700;letter-spacing:-0.025em;color:var(--navy);
  box-shadow:inset 0 0 0 1px var(--line);
}
.e-panel .biz-terms span{background:var(--cream);box-shadow:none}
.biz-terms svg{width:15px;height:15px;flex:none;color:var(--blue);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   10. 도입 절차 — pages.css 14절 .gd 의 네 칸 변형
   ⚠️ 새 조각을 만들지 않는다. .gd 는 이미 번호 · 점선 이음 · 좁은 화면 규칙을
      갖고 있고, 다른 것은 칸 수뿐이다.
   ============================================================ */
.gd--4{grid-template-columns:repeat(4,1fr)}


/* ============================================================
   11. 문의 상자 — 구글 시트로 받거나, 메일 앱을 연다
   ------------------------------------------------------------
   🔴 2026-09-30 부터 **구글 시트로 받는다**(business.js · _문의접수/). 그때만 수집·이용
      동의 칸(.biz-consent)이 보인다. 그 전에는 예전처럼 이용자의 메일 앱을 연다.
      칸을 늘리려면 privacy.html 제1조·제6조와 문의접수.gs 의 폼표를 한 벌로 고칠 것.
   ⚠️ 메일 앱이 설정 안 된 기기에서는 눌러도 아무 일이 안 난다(모바일에서 흔하다).
      그래서 주소를 눌린 뒤 글자로 꺼낸다(.mq-addr). 그 줄을 지우지 말 것.
   ============================================================ */
.biz-ask{
  margin-top:40px;background:#fff;border-radius:26px;padding:36px 34px;
  color:var(--navy);   /* 🔴 파랑 구역 안의 흰 판 */
  box-shadow:0 18px 44px rgba(8,18,52,.24);text-align:left;
}
/* 🔴🔴 landing.css 12절의 `.ec p` 가 **이 상자 안 문단까지 물들인다.**
   (margin:22px auto 0 · max-width:28em · font-size:17px · color:#d8e2ff)
   상자가 .ec 안에 들어 있어서다. 게다가 `.ec p` 는 (0,1,1) 이라 `.biz-ask-note`
   같은 홑클래스 (0,1,0) 를 **순서와 상관없이 이긴다** — 실제로 흰 판 위에
   연한 하늘색 글씨가 되어 안 읽혔다(2026-09-18 확인).
   그래서 여기서는 홑클래스가 아니라 **자손 선택자**로 되돌린다. */
.biz-ask p{margin:0;max-width:none;font-size:13.5px;line-height:1.7;color:var(--slate)}
.biz-ask-head b{display:block;font-size:19px;font-weight:800;letter-spacing:-0.04em}
.biz-ask .biz-ask-head p{margin-top:8px}
/* 문의 유형 — 브리프 마지막 CTA 둘(무료 체험 / 도입)을 여기서 받는다.
   ⚠️ 같은 폼으로 가는 **단추 둘**을 만들면 누른 뒤에 아무 차이가 없다. 대신
      담당자가 무엇을 묻는지를 고르게 하고 그 값을 메일 본문 첫 줄로 보낸다 —
      받는 쪽이 두 갈래를 가를 수 있어야 한다(메일 제목은 걸러내기용이라 고정).
   ⚠️ 보기에만 단추인 div 가 아니라 **진짜 radio** 다. div 로 만들면 키보드와
      화면 낭독기에서 고를 수가 없다. */
/* ⚠️ fieldset 을 그대로 격자로 만들지 않는다 — legend 가 격자 칸이 되면
   브라우저마다 자리가 달라진다. 바깥은 블록, 안쪽 묶음만 격자로 둔다.
   ⚠️ 이 저장소에는 sr-only 같은 감춤 유틸이 없다. 만들지 않고 **legend 를 그냥
      보이게** 둔다 — 담당자에게도 "둘 중 하나를 고르는 칸" 이라는 안내가 필요하다. */
.biz-kind{border:0;margin-top:22px}
.biz-kind > legend{
  padding:0;margin-bottom:8px;
  font-size:12px;font-weight:800;letter-spacing:-0.02em;color:var(--steel);
}
.biz-kind-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.biz-kind label{display:block;cursor:pointer}
/* 화면에서만 감춘다 — display:none 으로 지우면 키보드 이동에서도 사라진다 */
.biz-kind input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.biz-kind span{
  display:block;padding:15px 18px;border-radius:14px;background:var(--cream);
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .16s ease,background .16s ease;
}
.biz-kind b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-0.03em;color:var(--navy)}
.biz-kind em{display:block;margin-top:4px;font-style:normal;font-size:12px;font-weight:600;color:var(--slate)}
.biz-kind input:checked + span{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--blue)}
.biz-kind input:checked + span b{color:var(--blue)}
/* 키보드로 옮겨 다닐 때 어디 있는지 보여야 한다 — 입력칸이 안 보이니 직접 그린다 */
.biz-kind input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

.biz-ask-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.biz-ask-grid label{display:block}
.biz-ask-grid label span{
  display:block;margin-bottom:6px;
  font-size:12px;font-weight:800;letter-spacing:-0.02em;color:var(--steel);
}
.biz-ask-full{grid-column:1 / -1}
/* 여러 줄 입력 — .mq-in 의 모양을 그대로 쓰고 높이만 준다 */
.biz-ask textarea.mq-in{min-height:96px;resize:vertical}
.biz-ask-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;flex-wrap:wrap}
.biz-ask-row .btn{flex:none;border-radius:12px;padding:14px 26px;font-size:15.5px}
/* ⚠️ 두 칸짜리로 둔다 — 위 `.biz-ask p`(0,1,1)가 홑클래스를 이겨서, 예전에는 여기
   적어 둔 12.5px 이 한 번도 안 먹고 13.5px 로 나오고 있었다(2026-09-21 훑다가 발견).
   값이 안 먹는 규칙을 남겨 두면 다음 사람이 이 숫자를 믿는다. */
.biz-ask .biz-ask-note{font-size:12.5px;line-height:1.7;color:var(--slate);margin:0}
/* 전화로 가는 길 — 메일이 안 열리는 사람을 위해서도, 급한 담당자를 위해서도 */
.biz-ask-tel{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13.5px;font-weight:700;letter-spacing:-0.025em;color:var(--blue);
}
.biz-ask-tel svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.biz-ask-tel:hover{text-decoration:underline;text-underline-offset:3px}

/* 구글 시트로 받을 때만 보이는 것들(business.js) — 미끼 칸 · 수집·이용 동의 · 접수 알림.
   🔴 여기 <p> 둘은 위 `.biz-ask p`(0,1,1)에 지지 않게 **두 칸짜리**로 적는다(이 파일의 고질병). */
.biz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.biz-hp input{font-size:16px}   /* 모바일-점검 ②(입력칸 16px) 에 안 걸리게 */
.biz-consent{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--cream)}
.biz-consent-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--navy)}
.biz-consent-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.biz-consent-terms{margin:12px 0 0;border-top:1px solid rgba(22,37,90,.12)}
.biz-consent-terms div{display:grid;grid-template-columns:68px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid rgba(22,37,90,.12)}
.biz-consent-terms dt{font-size:12px;font-weight:800;color:var(--steel);line-height:1.6}
.biz-consent-terms dd{margin:0;font-size:13px;line-height:1.6;color:var(--slate)}
.biz-ask .biz-consent-note{margin-top:10px;font-size:12.5px;line-height:1.65;color:var(--slate)}
.biz-consent-note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.biz-ask-row .btn:disabled{opacity:.55;cursor:default}
.biz-ask .biz-ask-ok{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--tint);font-size:14px;line-height:1.65;color:var(--navy)}
.biz-ask-ok:focus{outline:0}


/* ============================================================
   12. FINAL CTA 보조
   ⚠️ 틀은 landing.css 12절(.ec)을 그대로 쓴다. 여기서는 단추 둘의 우선순위와
      문의 상자가 들어갈 자리만 잡는다.
   ============================================================ */
.biz-end .e-btns{margin-top:34px}
/* 🔴 `.ec p`(0,1,1) 가 홑클래스를 이긴다 — 위 .biz-ask 주석과 같은 함정이다.
   여기도 자손 선택자로 두 칸을 만든다(0,2,0). */
.biz-end .biz-end-note{margin:26px auto 0;max-width:30em;font-size:14px;color:#d8e2ff;line-height:1.7}

/* ── 위아래 여백 맞추기 (2026-09-18 지시) ─────────────────────
   재 보니 이 구역은 위아래가 따로 놀고 있었다(실측).

     구역 위 → 제목            96px
     본문 아래 → 문의 상자      40px     ← 제목 덩어리가 위로 96, 아래로 40
     상자 아래 → 마지막 문구    26px
     문구 아래 → 구역 끝       104px     ← 문구가 위로 26, 아래로 104

   ① 제목 덩어리(제목 + 본문)는 위아래를 **72px 로 맞춘다** — 96 과 40 사이에서
      고른 값이다. 96 으로 맞추면 제목과 문의 상자가 너무 멀어지고, 40 으로
      맞추면 앞 판과 붙는다.
   ② 마지막 문구는 **좁은 쪽(26px)에 맞춘다**(지시). 그래서 구역의 아래 여백이
      104px → 26px 로 줄어든다.

   ⚠️ `.ec` 의 padding 을 고치면 **랜딩 마지막 CTA 까지 같이 바뀐다**(landing.css 12절).
      그래서 두 칸짜리 선택자(.ec.biz-end)로 이 페이지에서만 덮는다.
   ⚠️ 문구의 margin-top(26px)과 구역의 padding-bottom 은 **한 벌이다.**
      한쪽만 고치면 다시 어긋난다. */
.ec.biz-end{padding:72px 0 26px}
.biz-end .biz-ask{margin-top:72px}


/* ============================================================
   13. 좁은 화면
   ⚠️ 끊는 지점을 새로 만들지 않는다. 1280 / 1000 / 760 / 640 네 곳은
      site.css · landing.css · pages.css 가 이미 쓰는 값이다.
   ============================================================ */
@media(max-width:1280px){
  .biz-spec{gap:12px}
  .biz-spec-item{padding:26px 22px}
  .biz-spec-n{font-size:38px}
  .biz-quotes{gap:28px}
}

@media(max-width:1000px){
  /* 스펙 넷 — 2×2 (브리프 9절 지시) */
  .biz-spec{grid-template-columns:repeat(2,1fr)}

  /* 🔴 고리를 세로 흐름으로 바꾼다.
     원을 그대로 줄이면 196px 칸이 원 안으로 파고들어 글자가 두 자씩 끊긴다.
     그래서 **고리(SVG)와 가운데 글을 감추고** 칸을 세로로 세운 뒤,
     되돌아간다는 뜻은 마지막 칸의 코랄 테두리와 그 아래 한 줄이 맡는다. */
  .biz-loop{aspect-ratio:auto;max-width:480px;display:flex;flex-direction:column;gap:0}
  .biz-loop-ring,.biz-loop-core{display:none}
  /* 🔴🔴 **left · top 을 반드시 함께 되돌린다.** position 만 relative 로 바꾸면
     .biz-loop-posN 의 left:72.7% / top:38.41% 가 **그대로 살아서** 칸을 오른쪽으로
     밀어낸다 — relative 에도 left·top 이 먹기 때문이다.
     2026-09-18 실제로 그렇게 났다: 375폭에서 02·03 칸이 화면 밖으로 잘렸다.
     (position:static 으로 두면 left·top 이 죽지만, 그러면 아래 ::after 화살표가
      기댈 자리가 없어진다. 그래서 relative 를 쓰고 값을 auto 로 되돌린다.) */
  .biz-node{position:relative;left:auto;top:auto;transform:none;width:100%}
  /* 칸 사이 화살표 — 칸 아래에 하나씩.
     ⚠️ :not(:last-child) 로 고르면 **마지막 칸에도 붙는다** — 이 틀의 막내는
        칸이 아니라 .biz-loop-back(「다시 처음으로」)이기 때문이다. 그래서
        되돌아가는 칸을 이름(.biz-node--back)으로 집어서 뺀다.
     ⚠️ top:100% 가 있어야 칸 **아래**에 선다. 안 주면 absolute 가 제자리
        (마지막 글줄 끝)로 가서 화살표가 문장 옆에 붙는다. */
  .biz-node:not(.biz-node--back){margin-bottom:34px}
  .biz-node:not(.biz-node--back)::after{
    content:'\2193';
    position:absolute;left:50%;top:100%;transform:translateX(-50%);
    margin-top:7px;line-height:1;
    font-size:19px;font-weight:700;color:var(--steel);
  }
  /* 마지막 칸 아래 — 처음으로 돌아간다 */
  .biz-loop-back{
    display:block;
    margin-top:14px;padding:13px 18px;border-radius:var(--r-pill);
    background:var(--coral-tint);color:var(--coral-ink);text-align:center;
    font-size:13px;font-weight:800;letter-spacing:-0.025em;
  }

  .biz-day{grid-template-columns:1fr;gap:28px}
  .biz-lanes{grid-template-columns:1fr;gap:12px}
  .biz-give{grid-template-columns:1fr;gap:12px}
  .biz-quotes{grid-template-columns:1fr;gap:34px}
  .biz-ask-grid{grid-template-columns:1fr}
  .gd--4{grid-template-columns:repeat(2,1fr)}
  .biz-pilot{padding:26px 24px}
}

@media(max-width:760px){
  .biz-say{padding:64px 0 56px}
  .biz-quote blockquote{font-size:19px}
  .biz-loop-say b{font-size:19px}
  .biz-ops-say b{font-size:17px}
}

/* ============================================================
   14. 좁은 화면 — 카드 묶음을 좌우 스와이프로 (2026-09-21 지시)
   ------------------------------------------------------------
   왜 바꾸나
     이 장은 카드 묶음이 여섯이다. 좁은 화면에서 전부 한 칸으로 쌓으니 같은 모양의
     카드를 스무 번 넘게 지나야 끝이 났고, **나란히 놓고 비교하라고 만든 묶음**
     (기업 담당자 2칸 · 프렌글 5칸 · 구성원 4칸)이 세로로 늘어서면서 비교 자체가
     사라졌다. 좌우로 넘기면 한 화면에서 옆 칸과 견줄 수 있다.

   어떻게
     격자를 풀고 flex + scroll-snap 으로 바꾼다. **마크업은 건드리지 않는다** —
     아래 이름들은 전부 이미 있는 묶음이고, 이 파일은 /business 만 부르므로
     .pr · .gd 를 함께 써도 /service · /curriculum 에는 닿지 않는다.

   ⚠️ 칸 폭이 84% 인 것이 핵심이다. 100% 로 두면 옆 칸이 안 보여서 **넘길 수 있다는
      것을 아무도 모른다.** 16% 가 삐져나와야 손가락이 움직인다. 점(dot)을 따로
      그리지 않는 이유도 이것이다 — 살짝 보이는 다음 칸이 그 역할을 한다.
   ⚠️ 판 밖으로 흘려보낸다(margin/padding inline). 카드가 판 안쪽 여백에서 끊기면
      '잘린 목록' 이 아니라 '끝난 목록' 으로 읽힌다.
      바깥 .e-panel 에 overflow:hidden 이 있어 페이지 가로 스크롤로 새지 않는다.
   ⚠️ padding-block 은 그림자 자리다. 없으면 --sh-float 의 아래쪽이 잘려
      카드가 상자에 갇힌 것처럼 보인다.
   ⚠️ 여기 넣지 않은 묶음과 이유
        .biz-loop   고리다. 세로 흐름 + 되돌아가는 칩이 '한 바퀴' 를 말한다(4절).
        .ed         듀얼케어. ↓↑ 화살표가 두 방향을 말한다.
        .biz-topic  한 줄짜리 항목이라 넘길 것이 없다.
   ============================================================ */
@media(max-width:640px){
  .biz-spec,
  .pr,
  .biz-lanes,
  .biz-give,
  .gd--4{
    display:flex;
    gap:12px;
    align-items:stretch;          /* 넘길 때 칸 높이가 들쭉날쭉하면 지저분하다 */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    margin-inline:-20px;          /* .e-panel 의 좌우 여백(20px)과 짝 */
    padding-inline:20px;
    padding-block:8px;            /* 그림자 자리 */
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .biz-spec::-webkit-scrollbar,
  .pr::-webkit-scrollbar,
  .biz-lanes::-webkit-scrollbar,
  .biz-give::-webkit-scrollbar,
  .gd--4::-webkit-scrollbar{display:none}

  .biz-spec > *,
  .pr > *,
  .biz-lanes > *,
  .biz-give > *,
  .gd--4 > *{
    flex:0 0 84%;
    scroll-snap-align:start;
  }

  /* 후기는 판 밖(.biz-say)이라 좌우 여백이 .e-wrap 의 16px 이다 */
  .biz-quotes{
    display:flex;gap:28px;align-items:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    margin-inline:-16px;padding-inline:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .biz-quotes::-webkit-scrollbar{display:none}
  .biz-quotes > *{flex:0 0 84%;scroll-snap-align:start}

  /* FAQ 「더 보기」 — assets/js/business.js 가 만들어 넣는다(hidden 으로 여닫는다).
     ⚠️ 알약 단추로 만들지 않는다. 이 자리의 주인공은 아래 CTA 이고 이것은 목록을
        더 펴는 손잡이다. 파랑 채움이 둘이면 어느 쪽이 다음 행동인지 흐려진다. */
  .faq-fold{
    display:block;width:100%;margin-top:14px;padding:14px 16px;
    border-radius:14px;background:var(--cream);
    font-size:14px;font-weight:700;letter-spacing:-0.025em;color:var(--blue);
  }
  .faq-fold::after{content:' ↓';font-weight:800}
  .faq-fold:hover,.faq-fold:focus-visible{background:var(--tint)}

  .biz-spec{gap:10px;margin-top:32px}
  .biz-spec-item{padding:22px 18px;border-radius:18px}
  .biz-spec-n{font-size:32px}
  .biz-spec-item h3{margin-top:14px;font-size:15px}
  .biz-spec-item p{font-size:12.5px}
  .biz-chip{padding:9px 14px;font-size:13px}
  .biz-pilot{padding:22px 20px;border-radius:20px}
  .biz-pilot b{font-size:18px}
  .biz-loop{margin-top:32px}
  .biz-loop-say{margin-top:32px}
  .biz-topic li{padding:18px 20px;gap:14px}
  .biz-talk{padding:18px;border-radius:20px}
  .biz-lane{padding:24px 20px}
  .biz-ops-say{padding:22px 20px}
  .biz-ops span{padding:10px 14px;font-size:12.5px}
  .biz-give-item{padding:26px 22px}
  .biz-stat-item{padding:30px 22px}
  .biz-stat-n{font-size:42px}
  .biz-say{padding:52px 0 48px}
  /* 좁은 화면에서도 같은 관계를 지킨다 — 제목 덩어리는 위아래 56px,
     마지막 문구는 위아래 22px(좁은 쪽). landing.css 의 `.ec{padding:64px 0 72px}` 를 덮는다. */
  .ec.biz-end{padding:56px 0 22px}
  .biz-end .biz-ask{margin-top:56px}
  .biz-end .biz-end-note{margin-top:22px}
  .biz-ask{padding:26px 20px;border-radius:22px}
  /* 단추는 손가락 크기를 지킨다 — 줄이 좁아지면 폭을 꽉 채운다 */
  .biz-ask-row{flex-direction:column;align-items:stretch}
  .biz-ask-row .btn{width:100%;padding:16px 24px}
  .biz-ask-note{text-align:center}
  .gd--4{grid-template-columns:1fr}
}