/* ============================================================
   프렌글 랜딩(홈) 전용 스타일 — 2026-09-28 새 디자인
   ------------------------------------------------------------
   원본 시안: _프로토타입/새디자인0928/  desk/index.html (데스크톱 1440)
                                        mob/index.html  (모바일 390)
   시안은 인라인 스타일로 그려져 있다 — 값(색 · 크기 · 여백)을 여기로 옮기면서
   이름을 붙였다. 시안과 나란히 볼 때는 같은 자리의 인라인 값과 대조하면 된다.

   ⚠️⚠️ **이 파일은 index.html 만 부른다.** 그리고 공용 이름(.gnb* · .foot* · .hero ·
      .ftrial-fab · #start-modal)을 건드리는 규칙은 **전부 `.lp-home` 아래**에 둔다
      (index.html 의 <body class="lp-home">). site.css · member.css 는 문서 페이지 ·
      칼럼 · FAQ 가 함께 쓰므로 거기 규칙을 고치면 마흔몇 장이 같이 바뀐다.
   ⚠️ 새 이름은 전부 `hm-` 로 시작한다(홈). E안의 `.e-*` · landing.css 와 섞지 않는다 —
      그 파일은 /service · /guide · 상세 18장이 계속 쓴다.

   ── 두 화면 ──────────────────────────────────────────────────
     768px 이상  데스크톱 시안. 1000px 아래로는 칸을 하나씩 세로로 쌓는다.
     767px 이하  모바일 시안. 16절 한 덩어리에 모았다.
     .only-d / .only-m — 두 시안의 글이 다른 자리에서 한쪽만 보이게 한다(1절).

   ── 색 ───────────────────────────────────────────────────────
     파랑 #3155C8 = 유일한 액션 색 · 코랄 #FF4F3D 는 선 · 밑줄 · 손글씨 번호에만
     (버튼에는 절대 안 쓴다 — 2026-09-02 규칙). 작은 코랄 글자는 대비 때문에
     한 단 내린 --hm-coral-ink(#C93B2C · 흰 바탕 5.0:1)로 쓴다.
     카카오 노랑은 '카카오로 시작하기' 단추에만(카카오 로그인 디자인 가이드).

   ── 손대면 안 되는 이름 (JS 가 잡는다) ─────────────────────────
     .gnb / .gnb.is-up        nav.js 가 오르내린다(넓은 화면에서는 여기서 접힘을 끈다 — 2절)
     .hero                    nav.js 가 높이를 잰다
     .ec · .foot              nav.js 가 폰의 하단 막대를 비키게 한다
     .ftrial-fab(.is-on)      nav.js
     #hmWeek · #hmDays · #hmWeekBody · #hmReviews · .foot-ia · .foot-col   home.js
     data-sec="…"             exitTrack.js 의 섹션 이름표
   ============================================================ */


/* ============================================================
   1. 토큰 · 바탕 · 두 화면 가르기
   ============================================================ */
.lp-home{
  --hm-blue:#3155c8;
  --hm-blue-deep:#2544a6;   /* 눌림 · 어두운 칸 */
  --hm-navy:#16255a;        /* 글자 — 순검정 금지 */
  --hm-ink:#3b4777;         /* 본문 */
  --hm-mute:#5d6b93;        /* 보조 글 (흰 바탕 5.4:1) */
  --hm-line:#e7eaf4;
  --hm-cream:#fff9f2;
  --hm-cream-line:#f0e7dc;
  --hm-tint:#f1f5fd;
  --hm-soft:#f7f9fe;
  --hm-coral:#ff4f3d;
  --hm-coral-ink:#c93b2c;
  --hm-coral-tint:#fff1ee;
  --hm-foot:#101c45;
  --hm-pen:'Nanum Pen Script','Pretendard Variable',Pretendard,cursive;
  --hm-max:1200px;          /* 본문 섹션 폭 */
  --hm-top:1280px;          /* GNB 막대 폭 — 안쪽 여백 40 을 포함한 값이라 글 칸은 1200 으로 본문과 같다 */
  --hm-side:40px;
  /* ⚠️ site.css 의 --gnb-h 를 이 장에서만 덮는다 — .gnb 높이 · 앵커 이동 보정이 이 값을 쓴다 */
  --gnb-h:76px;
  background:#fff;
}
.hm{
  color:var(--hm-navy);
  font-size:16px;line-height:1.6;letter-spacing:-0.01em;
  word-break:keep-all;overflow-wrap:break-word;
}
@media(max-width:767px){.lp-home .only-d{display:none !important}}
@media(min-width:768px){.lp-home .only-m{display:none !important}}
/* 🔴 읽기 전용 글(.hm-sr)은 absolute 다 — **위치를 가진 조상이 없으면 옆으로 넘기는 줄(요일 · 후기)을
   빠져나가 문서 폭을 넓힌다.** 2026-09-28 실측: 390 폰에서 문서가 745px 로 늘어 화면이 저절로
   작아졌다(모바일-점검.mjs 가 잡는 「가로 밀림」). 그래서 그 줄과 카드에 position:relative 를 준다(5 · 8절). */
.lp-home .hm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* 메뉴·앵커로 왔을 때 제목이 GNB 뒤에 깔리지 않게 */
.lp-home [data-sec]{scroll-margin-top:calc(var(--gnb-h) + 16px)}
.lp-home .hm a:focus-visible,.lp-home .hm button:focus-visible{outline:3px solid var(--hm-coral);outline-offset:3px}


/* ============================================================
   2. GNB — 파랑 막대 (시안: 76px · 로고 · 메뉴 여섯 · 기업문의 · 로그인 · 흰 알약)
   ⚠️ 마크업은 E안 그대로다(로그인 전환 · 햄버거 · 수강신청 링크 전부 살아 있다). 모양만 바꾼다.
   ⚠️ 메뉴 글자색은 **맨 위 줄에만** 준다. `.gnb-menu a` 로 쓰면 드롭다운(.nav2-d) 안의
      링크까지 흰 글씨가 되어 흰 판 위에서 사라진다.
   ============================================================ */
.lp-home .gnb{
  height:var(--gnb-h);
  background:var(--hm-blue);border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* 흰 드롭다운 판이 막대 바로 아래에서 열리도록 — (76 − 메뉴 글자 칸 38) / 2 */
  --nav2-gap:19px;
}
.lp-home .gnb-inner{max-width:var(--hm-top);padding:0 var(--hm-side);gap:40px}
.lp-home .gnb-brand img{height:30px;filter:brightness(0) invert(1)}
.lp-home .gnb-menu{gap:28px}
.lp-home .gnb-menu > a,.lp-home .gnb-menu .nav2-t,.lp-home .gnb-biz{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.88);
}
.lp-home .gnb-menu > a:hover,.lp-home .gnb-menu .nav2-t:hover,.lp-home .gnb-biz:hover{
  color:#fff;text-decoration:underline;text-underline-offset:6px;
}
/* 시안에는 드롭다운 화살표가 없다 — 올리면 열리는 것은 그대로다 */
.lp-home .nav2-t > svg{display:none}
.lp-home .gnb-actions{gap:24px}
.lp-home .gnb-biz{margin-right:0}
/* 로그인 — 알약이던 것을 글자로 (id 와 display 전환은 nav.js 그대로) */
.lp-home #gnbLogin{
  padding:8px 0;background:transparent;border-radius:0;box-shadow:none;
  font-size:15px;font-weight:600;color:rgba(255,255,255,.88);
}
.lp-home #gnbLogin:hover{background:transparent;box-shadow:none;transform:none;color:#fff;text-decoration:underline;text-underline-offset:6px}
/* 무료 수업 신청하기 — 흰 알약 */
.lp-home .gnb-free{
  height:44px;padding:0 22px;border-radius:999px;
  background:#fff;color:var(--hm-navy);
  font-size:15px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap;
  transition:background .18s ease;
}
.lp-home .gnb-free:hover{background:var(--hm-cream)}
.lp-home .gnb a:focus-visible,.lp-home .gnb button:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 햄버거 — member.css 기본은 흰 버튼 + 남색 막대. 파랑 위에서는 반투명 + 흰 막대 */
.lp-home .gnb-burger{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lp-home .gnb-burger:hover{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.lp-home .gnb-burger i{background:#fff}
/* 넓은 화면에서는 막대를 접지 않는다 — 하단 고정 버튼이 없는 대신 이 막대의 흰 알약이
   늘 보여야 해서다. nav.js 는 그대로 .is-up 을 붙였다 뗐다 하지만 여기서 무시한다.
   🔴 폰에서는 예전대로 접힌다(아래로 내리면 숨고 올리면 내려온다) — 16절. */
@media(min-width:768px){
  .lp-home .gnb.is-up{transform:none}
}
/* 1000~1180 — 메뉴 여섯 + 오른쪽 넷이 한 줄에 들도록 틈만 좁힌다 */
@media(max-width:1180px){
  .lp-home .gnb-inner{gap:28px;padding:0 28px}
  .lp-home .gnb-menu{gap:20px}
  .lp-home .gnb-actions{gap:18px}
  .lp-home .gnb-free{padding:0 18px}
}


/* ============================================================
   3. 공통 — 폭 · 단추 · 제목 · 두 칸 짜임
   ============================================================ */
.hm-in{max-width:var(--hm-max);margin:0 auto}
.hm-sec{padding:120px var(--hm-side)}

.hm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 22px;border-radius:999px;
  font-size:15px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap;
  transition:background .18s ease;
}
.hm-btn--lg{height:58px;padding:0 30px;font-size:17px}
.hm-btn--white{background:#fff;color:var(--hm-navy)}
.hm-btn--white:hover{background:var(--hm-cream)}
.hm-btn--blue{background:var(--hm-blue);color:#fff}
.hm-btn--blue:hover{background:var(--hm-blue-deep)}

.hm-h2{
  font-size:clamp(34px,3.3vw,46px);line-height:1.2;font-weight:800;letter-spacing:-0.04em;
}
.hm-p{font-size:18px;line-height:1.75;color:var(--hm-ink)}
.hm-copy{display:flex;flex-direction:column;gap:22px}

.hm-split{display:grid;align-items:start}
.hm-split--dual{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}
.hm-split--daily{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.hm-split--cta{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center}

/* 초록이 아니라 파랑 — 교정된 낱말에 코랄 밑줄 */
.hm-fix{
  padding:0 3px;border-radius:4px;background:var(--hm-coral-tint);color:inherit;
  box-shadow:inset 0 -2px 0 var(--hm-coral);
}
/* 손글씨 메모 · 번호 */
.hm-note{font-family:var(--hm-pen);font-size:21px;line-height:1.1;color:var(--hm-coral-ink)}
.hm-pen-no{font-family:var(--hm-pen);line-height:1;color:var(--hm-coral)}


/* ============================================================
   4. HERO — 파랑 위 왼쪽 정렬
   ⚠️ padding-top 은 고정 GNB 높이만큼을 먹고 시작한다(막대 뒤에 글이 깔리지 않게).
   ============================================================ */
.lp-home .hero{
  padding:calc(var(--gnb-h) + 44px) var(--hm-side) 0;
  background:var(--hm-blue);color:#fff;
  text-align:left;overflow:visible;
}
/* 🔴 site.css 의 .hero::before(폭 1100px 옅은 후광)를 끈다. 옛 흰 히어로의 장식이라 파랑 위에서는
   보이지도 않는데, 위에서 overflow 를 풀었으므로 **폰에서 문서 폭을 745px 로 늘려 화면을 통째로
   축소시켰다**(2026-09-28 실측 · 390 폰). 되살리려면 overflow:hidden 도 같이 되돌릴 것. */
.lp-home .hero::before{content:none}
.hm-hero .hm-in{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hm-badge{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:13px;font-weight:700;
}
.hm-badge span{width:8px;height:8px;border-radius:999px;background:#ffc9c0}
.hm-h1{font-size:clamp(48px,5vw,72px);line-height:1.12;font-weight:800;letter-spacing:-0.045em}
.hm-hero-lead{max-width:660px;font-size:19px;line-height:1.7;color:rgba(255,255,255,.9)}
.hm-hero-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:4px}
.hm-hero-act .hm-btn{box-shadow:0 10px 30px rgba(16,28,69,.25)}
.hm-hero-note{font-size:15px;color:rgba(255,255,255,.88)}
.hm-hero .hm-btn:focus-visible{outline-color:#fff}


/* ============================================================
   5. WEEK — 한 주 플래너
   넓은 화면: 흰 판이 파랑 위로 떠올라 히어로에 걸친다. 파랑은 판의 아래 312px 위에서 끝난다
   (시안의 margin-bottom:-312px 을 배경 그라데이션으로 옮겼다 — 판 높이가 요일마다 달라도
   '판 아래끝에서 312px 위' 는 늘 같은 자리다). 아래 112px 은 다음 섹션까지의 흰 여백.
   ============================================================ */
.hm-week{
  padding:56px var(--hm-side) 112px;
  background:linear-gradient(to bottom,var(--hm-blue) 0,var(--hm-blue) calc(100% - 424px),#fff calc(100% - 424px));
}
.hm-week-card{
  background:#fff;color:var(--hm-navy);
  border-radius:32px;box-shadow:0 30px 80px rgba(16,28,69,.26);
  padding:36px 40px 34px;display:flex;flex-direction:column;gap:28px;
}
.hm-week-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hm-week-copy{display:flex;flex-direction:column;gap:8px;max-width:700px}
.hm-week-title{font-size:30px;line-height:1.3;font-weight:800;letter-spacing:-0.035em;text-wrap:balance}
.hm-week-sub{font-size:16px;line-height:1.6;color:var(--hm-mute)}

/* 두 스위치 */
.hm-seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--hm-tint);flex-shrink:0}
.hm-seg button{
  height:44px;padding:0 20px;border-radius:999px;
  background:transparent;color:var(--hm-navy);
  font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.hm-seg button[aria-pressed="true"]{background:var(--hm-navy);color:#fff}

/* 요일 다섯 칸 */
.hm-days{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hm-day{
  position:relative;height:172px;padding:16px 16px 14px;border-radius:20px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:10px;
  text-align:left;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.hm-day:hover{filter:brightness(.97)}
.hm-day-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.hm-day-name{font-size:24px;line-height:1;font-weight:800;letter-spacing:-0.03em}
.hm-day-chip{padding:5px 8px;border-radius:6px;font-size:12px;line-height:1;font-weight:700;white-space:nowrap}
.hm-day-text{flex-grow:1;max-height:62px;overflow:hidden;font-size:14px;line-height:1.45;font-weight:600}
.hm-day-mark{font-family:var(--hm-pen);font-size:25px;line-height:1}
.hm-day-type{font-size:15px;line-height:1.3;font-weight:800}

.hm-day--lesson{background:var(--hm-blue);border:1px solid var(--hm-blue);color:#fff}
.hm-day--lesson .hm-day-text{color:rgba(255,255,255,.92)}
.hm-day--lesson .hm-day-chip{background:rgba(255,255,255,.18);color:#fff}
.hm-day--lesson .hm-day-mark{color:#ffd9d2}
.hm-day--coach{background:var(--hm-cream);border:1px solid var(--hm-cream-line);color:var(--hm-navy)}
.hm-day--coach .hm-day-chip{background:var(--hm-coral-tint);color:var(--hm-coral-ink)}
.hm-day--coach .hm-day-mark{color:var(--hm-coral-ink)}
/* 「배우기만 할 때」 의 빈 날 — 빗금 */
.hm-day--empty{
  background:repeating-linear-gradient(135deg,#f6f7fb 0,#f6f7fb 7px,#eceff6 7px,#eceff6 8px);
  border:1px solid var(--hm-line);color:#6f7aa0;
}
.hm-day--empty .hm-day-text{color:var(--hm-mute)}
/* 고른 요일 — 흰 틈 + 남색 테 + 살짝 뜸 */
.hm-day.is-on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--hm-navy);transform:translateY(-6px)}

/* 고른 요일의 설명 + 대화 — 몸통(#hmWeekBody) 안에 설명판과 단계 줄이 같이 들어 있어 틈을 따로 준다 */
.hm-week-body{display:flex;flex-direction:column;gap:28px}
.hm-detail{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;
  border-top:1px solid var(--hm-line);padding-top:32px;
}
.hm-detail-copy{display:flex;flex-direction:column;gap:14px}
.hm-detail-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hm-detail-day{font-size:15px;font-weight:800}
.hm-detail-step{padding:5px 9px;border-radius:6px;background:var(--hm-tint);color:var(--hm-blue);font-size:12px;line-height:1.2;font-weight:700}
.hm-detail-title{font-size:26px;line-height:1.35;font-weight:800;letter-spacing:-0.03em;text-wrap:balance}
.hm-detail-desc{font-size:17px;line-height:1.72;color:var(--hm-ink)}
.hm-detail-where{font-size:14px;font-weight:600;color:var(--hm-mute)}
.hm-detail-mh{font-size:18px;line-height:1.45;font-weight:800;letter-spacing:-0.03em}

.hm-chat{
  background:var(--hm-soft);border-radius:24px;padding:24px;min-height:280px;
  display:flex;flex-direction:column;gap:12px;
}
.hm-msg{align-self:flex-start;max-width:88%;display:flex;flex-direction:column;gap:6px}
.hm-msg--me{align-self:flex-end;max-width:80%;align-items:flex-end}
.hm-who{font-size:12px;line-height:1;font-weight:700}
.hm-who--coach{color:var(--hm-coral-ink)}
.hm-who--teacher{color:var(--hm-blue)}
.hm-bub{
  background:#fff;border:1px solid var(--hm-line);border-radius:18px 18px 18px 6px;
  padding:12px 16px;font-size:15px;line-height:1.55;font-weight:600;color:var(--hm-navy);
}
.hm-bub--fix{line-height:1.6}
.hm-bub--me{background:var(--hm-blue);border:0;color:#fff;border-radius:18px 18px 6px 18px;line-height:1.5}
.hm-msg--me .hm-note{padding-right:4px}
.hm-msg:not(.hm-msg--me) .hm-note{padding-left:4px}
.hm-voice{
  display:flex;align-items:center;gap:12px;
  background:var(--hm-blue);color:#fff;border-radius:18px 18px 6px 18px;padding:12px 18px;
}
.hm-voice svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
.hm-wave{display:flex;align-items:center;gap:3px;height:26px}
.hm-wave i{width:3px;border-radius:2px;background:rgba(255,255,255,.88)}
.hm-dur{font-size:14px;font-weight:700}
.hm-line-label{font-size:13px;line-height:1.4;font-weight:700;color:var(--hm-mute)}
.hm-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 4px;border-bottom:1px solid var(--hm-line);font-size:15px;
}
.hm-row span:first-child{color:var(--hm-mute)}
.hm-row span:last-child{font-weight:700;text-align:right}

/* 학습 순서 — 그날 하는 일만 남색으로 켠다 */
.hm-steps{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.hm-step-list{display:flex;align-items:center;gap:10px;flex-wrap:wrap;list-style:none}
.hm-step{
  display:flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid var(--hm-line);background:#fff;color:var(--hm-mute);
  font-size:14px;font-weight:700;transition:background .2s ease,color .2s ease;
}
.hm-step.is-on{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff}
.hm-step-arrow{display:flex}
.hm-step-arrow svg{width:14px;height:14px;fill:none;stroke:#9aa5c6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hm-steps-note{font-size:14px;color:var(--hm-mute)}

/* 「배우기만 할 때」 — 네 단계 + 다리 */
.hm-alone{border-top:1px solid var(--hm-line);padding-top:32px;display:flex;flex-direction:column;gap:28px}
.hm-alone-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hm-as{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:3px solid var(--hm-blue)}
.hm-as span{font-size:13px;font-weight:700;color:var(--hm-blue)}
.hm-as strong{font-size:19px;line-height:1.4;font-weight:800}
.hm-as p{font-size:15px;line-height:1.65;color:var(--hm-ink)}
.hm-as--gap{border-top-color:#c9d0e4}
.hm-as--gap span{color:var(--hm-mute)}
.hm-as--back{border-top-color:var(--hm-coral)}
.hm-as--back span,.hm-as--back strong{color:var(--hm-coral-ink)}
.hm-bridge{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 28px;border-radius:20px;background:var(--hm-cream);
}
.hm-bridge p{font-size:19px;line-height:1.5;font-weight:800;letter-spacing:-0.02em}


/* ============================================================
   6. DUAL — 가르치는 사람과 챙기는 사람 (넓은 화면은 표, 폰은 카드 둘)
   ============================================================ */
.hm-dual{padding-top:0}
.hm-links{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:6px}
.hm-links a{font-size:16px;font-weight:700;color:var(--hm-blue);text-decoration:underline;text-underline-offset:5px}
.hm-links a:hover{color:var(--hm-blue-deep)}

.hm-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6;color:var(--hm-navy)}
.hm-table caption{caption-side:bottom;text-align:left;padding-top:22px;font-size:15px;line-height:1.6;color:var(--hm-mute)}
.hm-table thead th{padding:0 28px 22px 0;text-align:left;vertical-align:bottom}
.hm-table thead th:first-child{width:18%;padding-right:0}
.hm-table thead th:nth-child(2){width:41%}
.hm-table thead th:last-child{width:41%;padding-right:0}
.hm-role{display:flex;flex-direction:column;gap:10px}
.hm-role i{width:40px;height:6px;border-radius:999px;background:var(--hm-blue)}
.hm-role b{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-0.03em}
.hm-role small{font-size:14px;font-weight:700;color:var(--hm-blue)}
.hm-role--coach i{background:var(--hm-coral)}
.hm-role--coach small{color:var(--hm-coral-ink)}
.hm-table tbody tr{border-top:1px solid var(--hm-line)}
.hm-table tbody tr:last-child{border-bottom:1px solid var(--hm-line)}
.hm-table tbody th{padding:22px 16px 22px 0;text-align:left;vertical-align:top;font-size:14px;font-weight:700;color:var(--hm-mute)}
.hm-table tbody td{padding:22px 28px 22px 0;vertical-align:top;font-weight:600}
.hm-table tbody td:last-child{padding-right:0}
.hm-table ul{list-style:none;display:flex;flex-direction:column;gap:6px}


/* ============================================================
   7. DAILY — 고치기 전에, 먼저 대화합니다
   ============================================================ */
.hm-daily{background:var(--hm-cream)}
.hm-daily-steps{list-style:none;margin-top:8px;display:flex;flex-direction:column;border-top:1px solid var(--hm-cream-line)}
.hm-daily-steps li{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;
  padding:16px 0;border-bottom:1px solid var(--hm-cream-line);
}
.hm-daily-steps .hm-pen-no{font-size:32px}
.hm-daily-steps li > span:last-child{display:flex;flex-direction:column;gap:4px}
.hm-daily-steps strong{font-size:17px;line-height:1.4;font-weight:800}
.hm-daily-steps strong + span{font-size:15px;line-height:1.6;color:var(--hm-ink)}

.hm-talk{
  background:#fff;border-radius:32px;padding:30px 32px 34px;
  box-shadow:0 12px 48px rgba(49,85,200,.08);
  display:flex;flex-direction:column;gap:20px;
}
.hm-talk-head{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--hm-cream-line)}
.hm-talk-ava{
  width:44px;height:44px;border-radius:999px;background:var(--hm-coral-tint);color:var(--hm-coral-ink);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
}
.hm-talk-head > span:last-child{display:flex;flex-direction:column;gap:2px}
.hm-talk-head strong{font-size:16px;line-height:1.3;font-weight:800}
.hm-talk-head strong + span{font-size:13px;line-height:1.3;color:var(--hm-mute)}
.hm-talk-row{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-items:start}
.hm-talk-row .hm-pen-no{padding-top:8px;font-size:34px}
.hm-tb{
  justify-self:start;max-width:92%;
  background:var(--hm-cream);border-radius:20px 20px 20px 6px;padding:14px 18px;
  font-size:16px;line-height:1.55;font-weight:600;
}
/* 코치의 첫 말만 한 단 굵게 (시안 그대로) */
.hm-talk-head + .hm-talk-row .hm-tb{font-weight:700}
.hm-tb--me{background:var(--hm-blue);color:#fff;border-radius:20px 20px 6px 20px;line-height:1.5}
.hm-talk-row--me > .hm-tb{justify-self:end;max-width:80%;font-weight:600}
.hm-tb-wrap{justify-self:start;max-width:92%;display:flex;flex-direction:column;gap:8px}
.hm-tb-wrap > .hm-tb{max-width:none;line-height:1.6}
.hm-talk-row--me > .hm-tb-wrap{justify-self:end;max-width:82%;align-items:flex-end}
.hm-tb .hm-fix{background:#ffe3dd}
.hm-tb-wrap .hm-note{font-size:24px;padding:0 6px}


/* ============================================================
   8. REVIEW — 지표 넷 + 후기 아홉
   ============================================================ */
.hm-review .hm-in{display:flex;flex-direction:column;gap:64px}
/* 2026-09-29 — 지표를 후기 아래로 내렸다(숫자가 먼저 말하지 않게). 머리는 글 한 칸만 남는다 */
.hm-review-head{display:block}
.hm-review-head .hm-copy{gap:14px;max-width:560px}
.hm-review-head .hm-p{font-size:17px;line-height:1.7}
.hm-stats-wrap{display:flex;flex-direction:column;gap:14px;margin-top:-16px}
.hm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--hm-navy)}
.hm-stats > div{display:flex;flex-direction:column;gap:4px;padding:18px 16px 0 0}
.hm-stats dt{order:2;font-size:14px;color:var(--hm-mute)}
.hm-stats dd{order:1;font-size:38px;line-height:1.15;font-weight:800;letter-spacing:-0.035em}
.hm-stats-note{font-size:13px;line-height:1.6;color:var(--hm-mute)}

/* 한 격자 안에 아홉 — 위 셋(.is-lead)이 큰 카드, 아래 여섯이 작은 글 */
.hm-rv{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:36px}
.hm-rv-card{position:relative;margin:0;display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--hm-line)}
.hm-rv-card blockquote{font-size:16px;line-height:1.75}
.hm-rv-card blockquote::before{content:'“'}
.hm-rv-card blockquote::after{content:'”'}
.hm-rv-card figcaption{font-size:14px;color:var(--hm-mute)}
.hm-rv-card strong{font-weight:400}
.hm-rv-sep::before{content:', '}
.hm-rv-card:nth-child(4){margin-top:28px}
.hm-rv-card:nth-child(5),.hm-rv-card:nth-child(6){margin-top:28px}

.hm-rv-card.is-lead{gap:20px;padding-top:24px;border-top:2px solid var(--hm-navy)}
.hm-rv-card.is-lead blockquote{font-size:19px;line-height:1.7;font-weight:600;letter-spacing:-0.02em}
.hm-rv-card.is-lead blockquote::before,.hm-rv-card.is-lead blockquote::after{content:none}
.hm-stars{font-size:16px;line-height:1;letter-spacing:3px;color:var(--hm-blue)}
.hm-rv-card.is-lead figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.hm-rv-ava{
  width:40px;height:40px;border-radius:999px;background:var(--hm-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0;
}
.hm-rv-card.is-lead .hm-rv-who{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.3}
.hm-rv-card.is-lead strong{font-size:15px;font-weight:800;color:var(--hm-navy)}
.hm-rv-card.is-lead .hm-rv-sep{display:none}


/* ============================================================
   9. FINAL CTA — 파랑 + 오른쪽 요일 다섯 칸(장식)
   ============================================================ */
.hm-cta{background:var(--hm-blue);color:#fff;padding:112px var(--hm-side)}
.hm-cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hm-cta .hm-h2{font-size:clamp(36px,3.6vw,52px);letter-spacing:-0.045em}
.hm-cta .hm-p{max-width:520px;line-height:1.7;color:rgba(255,255,255,.9)}
.hm-cta-act{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:6px}
.hm-cta-alt{font-size:15px;font-weight:700;color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.hm-cta-alt:hover{color:#fff}
.hm-cta-proof{font-size:14px;color:rgba(255,255,255,.86)}
.hm-cta a:focus-visible,.hm-cta button:focus-visible{outline-color:#fff}
.hm-cta-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hm-cta-week span{
  height:132px;padding:14px 12px;border-radius:16px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hm-cta-week b{font-size:22px;line-height:1;font-weight:800}
.hm-cta-week i{font-family:var(--hm-pen);font-style:normal;font-size:22px;line-height:1}
.hm-cta-week .is-coach{background:var(--hm-blue-deep);color:#fff}
.hm-cta-week .is-coach i{color:#ffd9d2}
.hm-cta-week .is-lesson{background:#fff;color:var(--hm-blue)}


/* ============================================================
   10. 푸터 — 짙은 남색
   ⚠️ 칼럼 묶음(.foot-ia)은 ia-내비.mjs 가 찍는 마크업이다. 모양만 여기서 바꾼다.
   ⚠️ 로고는 첫 칸 머리에 ::before 로 얹는다 — 마크업을 IA:FOOT 안에 넣으면 도구가 지운다.
      그림은 GNB 와 같은 가로 로고를 흰색으로 뒤집은 것이다(글이 아니라 장식 · 이름은 옆 글에 있다).
   ============================================================ */
.lp-home .hm-foot{
  padding:72px var(--hm-side) 48px;border-top:0;
  background:var(--hm-foot);color:rgba(255,255,255,.78);
}
.lp-home .hm-foot .foot-inner{max-width:var(--hm-max);padding:0;display:flex;flex-direction:column;gap:48px}
.lp-home .hm-foot .foot-ia{
  grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:32px;
  padding-bottom:0;border-bottom:0;
}
.lp-home .hm-foot .foot-ia-brand{padding-right:24px}
.lp-home .hm-foot .foot-ia-brand::before{
  content:'';display:block;width:77px;height:30px;margin-bottom:18px;
  background:url(img/logo-frengle-wide.png) no-repeat left center/contain;
  filter:brightness(0) invert(1);
}
.lp-home .hm-foot .foot-ia-brand > b{font-size:14px;font-weight:700;color:#fff}
.lp-home .hm-foot .foot-ia-brand p{margin-top:0;max-width:none;font-size:14px;line-height:1.75;color:rgba(255,255,255,.78)}
.lp-home .hm-foot .foot-col{display:flex;flex-direction:column;gap:10px}
.lp-home .hm-foot .foot-col > b{margin-bottom:4px;font-size:14px;font-weight:800;color:#fff}
.lp-home .hm-foot .foot-col a{padding:0;font-size:14px;font-weight:400;color:rgba(255,255,255,.78)}
.lp-home .hm-foot a:hover{color:#fff;text-decoration:underline}
.lp-home .hm-foot a:focus-visible,.lp-home .hm-foot button:focus-visible{outline:3px solid var(--hm-coral);outline-offset:3px}
.hm-foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding-top:28px;
  display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.7;
}
.lp-home .hm-foot .foot-links{gap:8px 24px;font-size:13px;font-weight:400}
.lp-home .hm-foot .foot-links a{color:rgba(255,255,255,.78)}
.lp-home .hm-foot .foot-links b{font-weight:800;color:#fff}
.lp-home .hm-foot .foot-info{margin-top:0;display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.78)}
.lp-home .hm-foot .foot-info p{display:flex;flex-wrap:wrap;gap:2px 20px}
.lp-home .hm-foot .foot-copy{margin-top:0;font-size:13px;color:rgba(255,255,255,.6)}
/* 폰 접기 단추(home.js 가 폰에서만 끼운다) — 모양은 16절 */
.foot-acc{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;background:transparent;color:#fff;
  font:inherit;font-size:15px;font-weight:800;text-align:left;cursor:pointer;
}
.foot-acc-chev{width:16px;height:16px;flex-shrink:0;fill:none;stroke:rgba(255,255,255,.7);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.foot-col.is-open .foot-acc-chev{transform:rotate(180deg)}


/* ============================================================
   11. 하단 고정 CTA — 넓은 화면에서는 없다 (GNB 의 흰 알약이 대신한다)
   ============================================================ */
@media(min-width:768px){
  .lp-home .ftrial-fab{display:none}
}


/* ============================================================
   12. 무료 수업 신청 창 (#start-modal STEP 1 — 시안의 한 장짜리 창)
   ⚠️ #start-modal 로만 좁혔다 — 마이페이지 · 가입 완료 · 확인창도 .sm-sheet 를 쓴다.
   ⚠️ STEP 2(쿠폰 등록 길)는 member.css 모양을 거의 그대로 쓰고 여백만 맞춘다.
   ============================================================ */
.lp-home #start-modal{background:rgba(16,28,69,.62);padding:24px}
.lp-home #start-modal .sm-sheet{
  max-width:440px;padding:0;border-radius:28px;overflow-x:hidden;
  box-shadow:0 40px 100px rgba(16,28,69,.45);color:var(--hm-navy);
}
/* 닫기 — 흰 판(STEP 2) 위에서는 옅은 파랑 원, 파랑 판(STEP 1) 위에서는 반투명 흰 원 */
.lp-home #start-modal .sm-close{
  top:16px;right:16px;width:44px;height:44px;
  background:var(--hm-tint);color:var(--hm-navy);font-size:17px;
}
.lp-home #start-modal .sm-sheet:has(.sm-step--choice.is-on) .sm-close{background:rgba(255,255,255,.16);color:#fff}
.lp-home #start-modal .sm-sheet:has(.sm-step--choice.is-on) .sm-close:hover{background:rgba(255,255,255,.26)}
.lp-home #start-modal .sm-close:focus-visible{outline:3px solid var(--hm-coral);outline-offset:2px}

.lp-home #start-modal .sm-card{
  border-radius:0;padding:32px 32px 26px;text-align:left;
  background:var(--hm-blue);box-shadow:none;color:#fff;
  display:flex;flex-direction:column;gap:18px;
}
.lp-home #start-modal .sm-card::before{content:none}
.lp-home #start-modal .sm-card-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.88);letter-spacing:0}
.lp-home #start-modal .sm-card-h{display:flex;flex-direction:column;gap:2px;font-weight:800;letter-spacing:-0.03em}
.lp-home #start-modal .sm-card-lead,.lp-home #start-modal .sm-card-tail{margin:0;font-size:20px;line-height:1.4;font-weight:800;color:#fff}
.lp-home #start-modal .sm-card-price{margin:0;font-size:64px;line-height:1.05;letter-spacing:-0.05em}
.lp-home #start-modal .sm-card-feats{
  list-style:none;margin:0;padding:16px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:14px;line-height:1.45;font-weight:700;
}
.lp-home #start-modal .sm-body{padding:28px 32px 24px;display:flex;flex-direction:column;gap:16px}
.lp-home #start-modal .sm-body-t{font-size:18px;line-height:1.4;font-weight:800;letter-spacing:-0.02em}
.lp-home #start-modal .sm-body-s{margin-top:-10px;font-size:14px;line-height:1.6;color:var(--hm-mute)}
/* 카카오 단추 — 노랑은 member.css 그대로(가이드), 모양만 시안 쪽으로 */
.lp-home #start-modal .sm-body .sm-k-btn{
  margin-top:0;height:56px;padding:0 20px;border-radius:12px;
  background:#fee500;color:rgba(0,0,0,.85);box-shadow:none;font-size:17px;
}
.lp-home #start-modal .sm-body .sm-k-btn:hover{background:#f5dc00;transform:none;box-shadow:none}
.lp-home #start-modal .sm-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:2px}
.lp-home #start-modal .sm-links button{
  min-height:44px;background:transparent;color:var(--hm-blue);
  font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}
.lp-home #start-modal .sm-links button:hover{color:var(--hm-blue-deep)}
.lp-home #start-modal .sm-body-foot{padding-top:14px;border-top:1px solid var(--hm-line);font-size:13px;color:var(--hm-mute)}
/* STEP 2 — 판 여백을 없앴으므로 칸이 스스로 여백을 갖는다 */
.lp-home #start-modal .sm-step--kakao{padding:44px 28px 26px}
.lp-home #start-modal .sm-back{top:16px;left:16px;width:44px;height:44px;background:var(--hm-tint);color:var(--hm-navy)}


/* ============================================================
   13. 1100px 아래 — 넓은 화면 시안의 여백을 조인다
   ============================================================ */
@media(max-width:1100px){
  .lp-home{--hm-side:32px}
  .hm-sec{padding-top:104px;padding-bottom:104px}
  .hm-dual{padding-top:0}
  .hm-split--dual,.hm-split--cta,.hm-review-head{gap:48px}
  .hm-split--daily{gap:56px}
  .hm-week-card{padding:32px 30px 30px}
  .hm-detail{gap:32px}
  .lp-home .hm-foot .foot-ia{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .lp-home .hm-foot .foot-ia-brand{grid-column:1 / -1;padding-right:0}
  .lp-home .hm-foot .foot-ia-brand p{max-width:36em}
}


/* ============================================================
   14. 1000px 아래 — 두 칸을 세로로 쌓는다 (태블릿 · 작은 노트북)
   ============================================================ */
@media(max-width:1000px){
  .hm-split--dual,.hm-split--daily,.hm-split--cta,.hm-review-head{grid-template-columns:minmax(0,1fr);gap:44px}
  .hm-detail{grid-template-columns:minmax(0,1fr);gap:24px}
  .hm-alone-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-day{height:156px;padding:14px 12px 12px}
  .hm-day-text{font-size:13px}
  .hm-rv{column-gap:28px}
  .hm-cta-week{max-width:520px}
}


/* ============================================================
   15. 768~900 — 요일 다섯 칸이 한 줄에 들어가도록 글을 줄인다
   ============================================================ */
@media(min-width:768px) and (max-width:900px){
  .hm-day-mark{font-size:21px}
  .hm-day-chip{display:none !important}
  .hm-rv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-rv-card:nth-child(n){margin-top:0}
  .hm-rv-card:nth-child(4){margin-top:0}
  .lp-home .hm-foot .foot-ia{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   16. 폰 (767px 이하) — 모바일 시안
   시안 폭은 390 이다. 그보다 넓은 폰·세로 태블릿에서는 글 칸만 480 안에 둔다.
   ============================================================ */
@media(max-width:767px){
  .lp-home{--gnb-h:60px;--hm-side:24px}

  /* GNB — [로고] …… [로그인] [햄버거] */
  .lp-home .gnb-inner{padding:0 8px 0 20px;gap:8px}
  .lp-home .gnb-brand img{height:26px}
  .lp-home .gnb-actions{gap:2px}
  .lp-home .gnb-free{display:none}
  .lp-home #gnbLogin{height:44px;padding:0 10px;font-size:14px;font-weight:700;color:rgba(255,255,255,.9)}
  .lp-home .gnb-burger{width:44px;height:44px;border-radius:999px;background:transparent;box-shadow:none}
  .lp-home .gnb-burger:hover{background:rgba(255,255,255,.14);box-shadow:none}
  .lp-home .gnb-burger i{width:18px;height:2.2px}

  .hm-in{max-width:480px}
  .hm-sec{padding:88px var(--hm-side)}
  .hm-h2{font-size:28px;line-height:1.3;letter-spacing:-0.04em}
  .hm-p{font-size:16px;line-height:1.65}
  .hm-copy{gap:12px}

  /* HERO */
  .lp-home .hero{padding:calc(var(--gnb-h) + 64px) var(--hm-side) 120px}
  .hm-hero .hm-in{gap:20px}
  .hm-h1{font-size:34px;line-height:1.24}
  .hm-hero-lead{font-size:17px;line-height:1.65}
  .hm-hero-act{width:100%;padding-top:20px}
  .hm-hero-act .hm-btn{width:100%}

  /* WEEK — 흰 바탕 평범한 섹션. 요일은 옆으로 넘긴다 */
  .hm-week{background:#fff;padding:80px 0 88px}
  .hm-week .hm-in{max-width:none}
  .hm-week-card{background:transparent;border-radius:0;box-shadow:none;padding:0;gap:28px}
  .hm-week-head{flex-direction:column;align-items:stretch;gap:28px;padding:0 var(--hm-side)}
  /* 옆으로 넘기는 줄(요일 · 후기)은 화면 끝까지, 글 칸은 시안 폭(480) 안에 */
  .hm-week-head,.hm-week-body,.hm-review-head,.hm-stats-wrap{
    width:100%;max-width:calc(480px + 2 * var(--hm-side));margin-left:auto;margin-right:auto;
  }
  .hm-week-copy{gap:12px}
  .hm-week-title{font-size:26px;line-height:1.32;letter-spacing:-0.04em}
  .hm-week-sub{color:var(--hm-ink);line-height:1.65}
  .hm-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-seg button{padding:0 8px;font-size:14px}

  .hm-days{
    display:flex;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--hm-side);
    padding:6px var(--hm-side) 10px;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .hm-days::-webkit-scrollbar{display:none}
  .hm-day{
    flex:0 0 150px;height:auto;min-height:150px;padding:18px 16px;scroll-snap-align:start;
    border:0;justify-content:flex-start;align-items:flex-start;gap:10px;
  }
  .hm-day-type{line-height:1.3}
  .hm-day-text{flex-grow:0;max-height:none;font-size:15px;line-height:1.5;font-weight:500;white-space:pre-line}
  .hm-day--lesson .hm-day-type{color:#ffd9d2}
  .hm-day--coach .hm-day-type{color:var(--hm-coral-ink)}
  .hm-day--coach .hm-day-text{color:var(--hm-ink)}
  .hm-day--empty{background:repeating-linear-gradient(135deg,#f6f7fb 0,#f6f7fb 6px,#eceff6 6px,#eceff6 7px)}
  .hm-day--empty .hm-day-type{color:var(--hm-mute)}
  .hm-day.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hm-navy);transform:none}

  .hm-week-body{padding:0 var(--hm-side)}
  .hm-detail{border-top:0;padding-top:4px;gap:14px}
  .hm-chat{border-radius:22px;padding:20px 16px;min-height:0;gap:14px}
  .hm-chat:not(.is-open) .is-extra{display:none}
  .hm-msg--me{max-width:84%}
  .hm-msg:not(.hm-msg--me){max-width:90%}
  .hm-bub{border:0;padding:12px 15px}
  .hm-note{font-size:20px}
  .hm-voice{gap:10px;padding:11px 14px;border-radius:16px 16px 5px 16px}
  .hm-voice svg{width:14px;height:14px}
  .hm-wave{gap:2px;height:24px}
  .hm-dur{font-size:13px}
  .hm-line-label{font-size:12px}
  .hm-row{padding:10px 2px;font-size:14px;gap:12px}
  .hm-more{
    justify-self:center;min-height:48px;padding:0 24px;border-radius:999px;
    background:var(--hm-tint);color:var(--hm-blue);font-size:15px;font-weight:700;cursor:pointer;
  }
  .hm-more:hover{background:#e6ecfa}
  .hm-alone{border-top:0;padding-top:4px}
  .hm-bridge{flex-direction:column;align-items:stretch;gap:20px;padding:26px 22px;border-radius:22px}
  .hm-bridge p{font-size:17px;line-height:1.6;font-weight:700}
  .hm-bridge .hm-btn{height:52px;font-size:16px}

  /* DUAL — 옅은 파랑 바탕 + 카드 둘 */
  .hm-dual{background:var(--hm-soft);padding-top:88px}
  .hm-split--dual{gap:32px}
  .hm-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hm-role-card{background:#fff;border-radius:22px;padding:24px 18px 26px;display:flex;flex-direction:column;gap:14px}
  .hm-role-en{font-size:15px;line-height:1;font-weight:800;color:var(--hm-blue)}
  .hm-role-card--coach .hm-role-en{color:var(--hm-coral-ink)}
  .hm-role-card h3{font-size:21px;line-height:1.35;font-weight:800;letter-spacing:-0.035em}
  .hm-role-card p{font-size:16px;line-height:1.75;color:var(--hm-ink)}

  /* DAILY — 번호마다 말풍선 */
  .hm-split--daily{gap:40px}
  .hm-daily-m{list-style:none;display:flex;flex-direction:column;gap:30px}
  .hm-daily-m li{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .hm-daily-m li.is-me{align-items:flex-end}
  .hm-dm-lb{display:flex;align-items:baseline;gap:10px}
  .hm-dm-lb .hm-pen-no{font-size:36px;line-height:.8}
  .hm-dm-lb strong{font-size:16px;line-height:1.4;font-weight:800}
  .hm-daily-m .hm-tb{max-width:88%;background:#fff;border-radius:18px 18px 18px 6px;padding:14px 16px;font-weight:600}
  .hm-daily-m .hm-tb--me{background:var(--hm-blue);border-radius:18px 18px 6px 18px}
  .hm-daily-m .hm-fix{background:#ffe3dd}
  .hm-dm-why{margin-top:-4px;padding-left:6px;font-size:15px;line-height:1.5;font-weight:600;color:var(--hm-coral-ink)}

  /* REVIEW — 지표 2×2 · 후기는 옆으로 */
  .hm-review{padding:88px 0}
  .hm-review .hm-in{max-width:none;gap:40px}
  .hm-review-head{gap:24px;padding:0 var(--hm-side)}
  .hm-stats-wrap{gap:24px;margin-top:0;padding:0 var(--hm-side)}
  .hm-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;border-top:0}
  .hm-stats > div{gap:8px;padding:0}
  .hm-stats dt{font-size:15px;line-height:1.4}
  .hm-stats dd{font-size:34px;line-height:1.1;letter-spacing:-0.04em}

  .hm-rv{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--hm-side);
    padding:0 var(--hm-side) 4px;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .hm-rv::-webkit-scrollbar{display:none}
  .hm-rv:focus-visible{outline:3px solid rgba(49,85,200,.45);outline-offset:-3px;border-radius:14px}
  .hm-rv-card,.hm-rv-card.is-lead{
    flex:0 0 84%;scroll-snap-align:start;margin-top:0 !important;
    padding:26px 22px;border:0;border-radius:22px;background:var(--hm-soft);
    justify-content:space-between;gap:20px;
  }
  .hm-rv-card blockquote,.hm-rv-card.is-lead blockquote{font-size:16px;line-height:1.7;font-weight:600;letter-spacing:-0.015em}
  .hm-rv-card blockquote::before,.hm-rv-card blockquote::after{content:none}
  .hm-stars,.hm-rv-ava{display:none}
  .hm-rv-card figcaption,.hm-rv-card.is-lead figcaption{margin-top:0;display:block;font-size:15px;line-height:1.4}
  .hm-rv-card .hm-rv-who,.hm-rv-card.is-lead .hm-rv-who{display:inline;font-size:15px}
  .hm-rv-card strong,.hm-rv-card.is-lead strong{font-size:15px;font-weight:800;color:var(--hm-navy)}
  .hm-rv-card .hm-rv-sep,.hm-rv-card.is-lead .hm-rv-sep{display:inline}
  .hm-rv-sep::before{content:' · '}

  /* CTA */
  .hm-cta{padding:96px var(--hm-side) 104px}
  .hm-cta-copy{gap:16px}
  .hm-cta .hm-h2{font-size:30px;line-height:1.3}
  .hm-cta .hm-p{font-size:17px;line-height:1.65}
  .hm-cta-act{width:100%;flex-direction:column;gap:8px;padding-top:24px}
  .hm-cta-act .hm-btn{width:100%;height:60px;font-size:18px}
  .hm-cta-alt{min-height:48px;display:flex;align-items:center}

  /* 푸터 — 소개 한 칸 + 접는 묶음 넷 */
  /* 아래 여백은 시안대로 32 — 하단 막대는 마지막 CTA 에서 이미 비켜 있어 푸터를 덮지 않는다(nav.js 끝자락) */
  .lp-home .hm-foot{padding:48px 20px calc(32px + env(safe-area-inset-bottom, 0px))}
  .lp-home .hm-foot .foot-inner{gap:32px}
  .lp-home .hm-foot .foot-ia{display:flex;flex-direction:column;gap:0}
  .lp-home .hm-foot .foot-ia-brand{padding:0 0 32px}
  .lp-home .hm-foot .foot-ia-brand::before{width:66px;height:26px;margin-bottom:14px}
  .lp-home .hm-foot .foot-ia-brand p{font-size:13px}
  .lp-home .hm-foot .foot-col{gap:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .lp-home .hm-foot .foot-col:first-of-type{border-top:1px solid rgba(255,255,255,.14)}
  .lp-home .hm-foot .foot-col > b{margin:0}
  .lp-home .hm-foot .foot-col a{display:block;padding:7px 0;font-size:15px}
  .lp-home .hm-foot .foot-col a:last-child{margin-bottom:14px}
  /* 스크립트가 접기를 켰을 때만 접는다 — 안 돌면 전부 펼친 채로 둔다 */
  .lp-home .hm-foot .foot-ia.is-acc .foot-col:not(.is-open) a{display:none}
  .lp-home .hm-foot .foot-ia:not(.is-acc) .foot-col > b{padding:16px 0 8px}
  .hm-foot-bottom{border-top:0;padding-top:4px;gap:12px;font-size:12px}
  .lp-home .hm-foot .foot-links{gap:4px 16px}
  .lp-home .hm-foot .foot-links a{padding:4px 0}
  .lp-home .hm-foot .foot-info{font-size:12px;gap:0}
  .lp-home .hm-foot .foot-info p{gap:0 12px}
  .lp-home .hm-foot .foot-copy{font-size:12px}

  /* 하단 고정 막대 — 흰 막대 + 파란 알약 (시안 mob)
     ⚠️ 뜨고 지는 때는 nav.js 가 정한다: 첫 화면 단추를 지나야 뜨고, 마지막 CTA · 푸터에서 비킨다. */
  .lp-home .ftrial-fab{
    left:0;right:0;bottom:0;border-radius:0;
    display:flex;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.96);border-top:1px solid var(--hm-line);
    box-shadow:none;color:#fff;
  }
  .lp-home .ftrial-fab:hover{background:rgba(255,255,255,.96);box-shadow:none}
  .lp-home .ftrial-fab-text{
    flex-grow:1;height:54px;border-radius:999px;background:var(--hm-blue);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:800;letter-spacing:-0.02em;
  }
  .lp-home .ftrial-fab:hover .ftrial-fab-text{background:var(--hm-blue-deep)}
  .lp-home .ftrial-fab-arrow{display:none}
  .lp-home .ftrial-fab:focus-visible{outline:none}
  .lp-home .ftrial-fab:focus-visible .ftrial-fab-text{outline:3px solid var(--hm-coral);outline-offset:2px}

  /* 신청 창 — 아래에서 올라오는 시트 */
  .lp-home #start-modal{align-items:flex-end;padding:0}
  .lp-home #start-modal .sm-sheet{
    max-width:480px;border-radius:28px 28px 0 0;
    box-shadow:0 -20px 60px rgba(16,28,69,.3);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .lp-home #start-modal .sm-close{top:14px;right:12px}
  .lp-home #start-modal .sm-card{padding:12px 24px 22px;gap:14px}
  /* 손잡이 */
  .lp-home #start-modal .sm-card-title::before{
    content:'';display:block;width:36px;height:4px;margin:0 auto 14px;border-radius:999px;
    background:rgba(255,255,255,.4);
  }
  .lp-home #start-modal .sm-card-title{font-size:13px}
  .lp-home #start-modal .sm-card-lead,.lp-home #start-modal .sm-card-tail{font-size:18px}
  .lp-home #start-modal .sm-card-price{font-size:52px}
  .lp-home #start-modal .sm-card-feats{padding-top:14px;gap:10px;font-size:13px}
  .lp-home #start-modal .sm-body{padding:22px 24px 20px;gap:14px}
  .lp-home #start-modal .sm-body-t{font-size:17px}
  .lp-home #start-modal .sm-body-s{margin-top:-10px;font-size:13px}
  .lp-home #start-modal .sm-body .sm-k-btn{height:54px;font-size:16px}
  .lp-home #start-modal .sm-links{flex-wrap:nowrap}
  .lp-home #start-modal .sm-body-foot{padding-top:12px;font-size:12px}
}

/* 가장 좁은 폰 — 제목이 한 줄 더 접히지 않게 */
@media(max-width:359px){
  .hm-h1{font-size:30px}
  .hm-h2,.hm-week-title{font-size:24px}
  .hm-day{flex-basis:138px}
}


/* ============================================================
   17. 움직임 줄이기
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .lp-home .hm *,.lp-home .gnb-free,.lp-home #start-modal *{transition:none !important;animation:none !important}
  .hm-day.is-on{transform:none}
}