/* ═══════════════════════════════════════════════════════════
   site4 홈 — apple.com 문법 (views/home.php 전용)
   뉴트럴 베이스(#1D1D1F / #F5F5F7 / #FFF) + 에듀리온 브랜드 블루 포인트.
   초대형 타이트 헤드라인, 필(pill) 버튼, 무보더 라운드 카드,
   흰색↔그레이 섹션 교차, 블랙 피날레. 장식·세리프·유행 효과 없음.
   ═══════════════════════════════════════════════════════════ */
.hm {
    --hm-ink: #1D1D1F;
    --hm-ink-soft: #6E6E73;
    --hm-line: #D2D2D7;
    --hm-gray: #F5F5F7;
    --hm-point: #3D6BFA;
    --hm-point-deep: #2B51D8;
    --hm-sec-pad: clamp(120px, 14vw, 210px);

    color: var(--hm-ink);
    background: #fff;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    letter-spacing: -.012em;
    overflow-x: clip;
}
.hm ::selection { background: rgba(91,140,255,.25); }
.hm-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ── 홈 전용 다크 내비 (macbook-pro처럼 페이지 전체에서 다크 유지) ──
   home.css는 홈에서만 로드되므로 서브페이지에는 영향 없음 */
.header { background: rgba(0,0,0,.72); border-bottom-color: rgba(255,255,255,.1); }
.header__logo-name { color: #F5F5F7; }
/* 다크 헤더: 네이비 워드마크 락업 대신 심볼+흰 텍스트 */
.header__logo-lockup { display: none; }
.header__logo-sym { display: flex; }
.nav__link { color: #F5F5F7; }
.nav__link:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav__link.is-active { background: #F5F5F7; color: #000; }
.nav-toggle span { background: #F5F5F7; }

/* ── 섹션 헤드 두 가지: 쇼케이스(중앙 대형) / 에디토리얼(좌측 행) ── */
.hm-sechead { text-align: center; max-width: 880px; margin: 0 auto clamp(44px, 5.4vw, 76px); }
.hm-h2 {
    font-size: clamp(36px, 5.2vw, 64px); font-weight: 800;
    line-height: 1.22; letter-spacing: -.045em; margin: 0;
    word-break: keep-all;
}
.hm-rowhead {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    margin: 0 0 clamp(28px, 3.4vw, 44px); flex-wrap: wrap;
}
.hm-h3 {
    font-size: clamp(26px, 3.4vw, 40px); font-weight: 800;
    line-height: 1.3; letter-spacing: -.035em; margin: 0; word-break: keep-all;
}
.hm-lead {
    font-size: clamp(17px, 1.9vw, 21px); line-height: 1.65; font-weight: 500;
    color: var(--hm-ink-soft); margin: 22px 0 0; letter-spacing: -.02em; word-break: keep-all;
}
.hm-more { font-size: 17px; font-weight: 500; color: var(--hm-point); text-decoration: none; letter-spacing: -.02em; }
.hm-more:hover { text-decoration: underline; }
.hm-secmore { text-align: center; margin: 48px 0 0; }

/* 애플식 시차 대상: JS가 scale/opacity를 스크롤에 연동 */
[data-zoom] { will-change: transform, opacity; transform-origin: center 70%; }
@media (prefers-reduced-motion: reduce) { [data-zoom] { transform: none !important; opacity: 1 !important; } }

/* 필 버튼 (애플식) */
.hm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 30px; border-radius: 980px; border: 0;
    background: var(--hm-point); color: #fff;
    font-size: 17px; font-weight: 600; letter-spacing: -.02em;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease;
    font-family: inherit;
}
.hm-btn:hover { background: var(--hm-point-deep); }
.hm-btn--full { width: 100%; }
.hm-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 플로팅 CTA: 진단 폼이 화면 밖일 때 하단 고정 (홈 전용, home.php JS 구동) */
.hm-float {
    position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 14px); z-index: 95;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.hm-float.is-on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .3s ease, transform .3s ease;
}
.hm-float__btn { box-shadow: 0 12px 32px rgba(61,107,250,.38), 0 2px 10px rgba(0,0,0,.14); }
/* 같은 목적의 우하단 상담 FAB는 플로팅 CTA 표시 중 숨김 */
body.hm-float-on .chatFab { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
@media (max-width: 640px) {
    .hm-float { left: 16px; right: 16px; transform: translateY(14px); }
    .hm-float.is-on { transform: translateY(0); }
    .hm-float__btn { display: flex; width: 100%; }
    /* 모바일: 하단 바와 겹치는 FAB 그룹 전체 숨김 */
    body.hm-float-on .fab-group { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
}

/* 은은한 리빌 */
.hm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1); }
.hm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hm-reveal { opacity: 1; transform: none; transition: none; } }

/* ── 풀스크린 시네마 섹션: 한 화면 = 한 장면 (macbook-pro 문법) ── */
.hm-hero {
    min-height: calc(100vh - var(--header-h, 72px));
    min-height: calc(100svh - var(--header-h, 72px));
    display: flex; align-items: center;
}
.hm-hero > .hm-wrap { width: 100%; }
.hm-chat, .hm-cinema, .hm-final {
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
}
.hm-chat > .hm-wrap, .hm-cinema > .hm-wrap, .hm-final > .hm-wrap { width: 100%; }

/* 계획표 핀 스크롤: 긴 래퍼 + 화면에 고정되는 무대 */
.hm-plan { min-height: 220vh; }
.hm-plan__pin {
    position: sticky; top: 0;
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
}
.hm-plan__pin > .hm-wrap { width: 100%; }
/* 행 점등: 꺼진 행은 흐릿하게, 켜지면 제자리에서 선명해짐 */
.hm-plan__doc tbody tr, .hm-plan__doc tfoot tr {
    transition: opacity .45s ease, transform .45s ease;
}
.hm-plan__doc tr.is-dim { opacity: .13; transform: translateX(-10px); }
@media (prefers-reduced-motion: reduce) {
    .hm-plan { min-height: auto; padding: var(--hm-sec-pad) 0; }
    .hm-plan__pin { position: static; min-height: auto; }
    .hm-plan__doc tr.is-dim { opacity: 1; transform: none; }
}

/* ═══════════ 1. 히어로 (다크 시네마틱 — macbook-pro 문법) ═══════════ */
.hm-hero {
    position: relative; background: #000; color: #F5F5F7;
    padding: clamp(96px, 12vw, 180px) 0; overflow: hidden;
}
/* 브랜드 글로우 (블루→퍼플, 로고 그라데이션 잔광) */
.hm-hero::before {
    content: ''; position: absolute; pointer-events: none;
    width: 900px; height: 900px; right: -220px; top: -320px;
    background: radial-gradient(circle, rgba(91,140,255,.26) 0%, rgba(180,91,255,.08) 45%, transparent 68%);
}
/* 브랜드 "길" 라인 아트 (진입 시 드로잉) */
.hm-hero__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .45; }
/* 선/점 초기 상태 — 드로잉·점 이동은 main.js가 프레임 동기로 구동 */
.hm-hero__path-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hm-hero__path-dot { opacity: 0; transform-origin: center; transform-box: fill-box; }
.hm-hero__path-dot.is-on { opacity: 1; }
.hm-hero__path-dot.is-planted { animation: hmDotPlant .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes hmDotPlant { 0% { transform: scale(1); } 45% { transform: scale(1.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .hm-hero__path-line { stroke-dashoffset: 0; }
    .hm-hero__path-dot { opacity: 1; }
}

.hm-hero__grid {
    position: relative;
    display: grid; grid-template-columns: 1.12fr .88fr;
    gap: clamp(48px, 6vw, 110px); align-items: center;
}
.hm-hero__title {
    font-size: clamp(44px, 6.4vw, 88px); font-weight: 800;
    line-height: 1.14; letter-spacing: -.05em; margin: 0 0 28px; color: #F5F5F7;
    word-break: keep-all;
}
.hm-hero__title b { white-space: nowrap; }
/* 핵심 문장: 브랜드 민트→블루→퍼플 그라데이션 텍스트 */
.hm-hero__title b {
    background: linear-gradient(92deg, #37D5D6 0%, #5B8CFF 46%, #B45BFF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hm-hero__sub {
    font-size: clamp(17px, 2vw, 21px); line-height: 1.75; font-weight: 500;
    color: #A1A1A6; letter-spacing: -.02em;
    margin: 0 0 34px; word-break: keep-all; max-width: 560px;
}
.hm-hero__sub b { color: #F5F5F7; font-weight: 700; }
.hm-hero__facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.16); max-width: 480px; }
.hm-hero__facts li {
    padding: 6px 0;
    font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.7; color: #98989D; letter-spacing: -.015em;
    word-break: keep-all; overflow-wrap: break-word;
}

/* 진단 카드 (다크 히어로 위에서 발광) */
.hm-quiz {
    position: relative;
    background: #fff; border-radius: 24px;
    color: var(--hm-ink); /* 다크 히어로의 흰 글자색 상속 차단 */
    padding: 36px 34px 32px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.55), 0 0 120px rgba(91,140,255,.16);
}
.hm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 헤더: 타이틀 + iOS식 세그먼트 진행 표시 */
.hm-quiz__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.hm-quiz__head strong { font-size: 20px; font-weight: 800; color: var(--hm-ink); letter-spacing: -.03em; }
.hm-quiz__segs { display: flex; gap: 5px; }
.hm-quiz__segs i {
    width: 22px; height: 5px; border-radius: 999px;
    background: rgba(0,0,0,.1); transition: background .3s ease;
}
.hm-quiz__segs i.is-on { background: var(--hm-point); }
.hm-quiz__step { display: none; border: 0; margin: 0; padding: 0; }
.hm-quiz__step.is-on { display: block; }
.hm-quiz__step legend { font-size: 19px; font-weight: 700; letter-spacing: -.03em; padding: 0; margin: 0 0 16px; }
.hm-quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* 옵션: 애플식 그레이 필 (보더 없음), 선택 시 테라코타 링 */
.hm-opt {
    padding: 15px 10px; border-radius: 14px; border: 0;
    background: var(--hm-gray); font-size: 14.5px; font-weight: 500; color: var(--hm-ink); letter-spacing: -.02em;
    cursor: pointer; transition: background .12s, box-shadow .12s; text-align: center;
    font-family: inherit; box-shadow: 0 0 0 0 transparent;
}
.hm-opt:hover { background: #ECECEF; }
.hm-opt.is-picked { background: #fff; box-shadow: inset 0 0 0 2px var(--hm-point); font-weight: 700; color: var(--hm-point-deep); }
.hm-quiz__back { margin-top: 16px; border: 0; background: none; font-size: 13.5px; color: var(--hm-ink-soft); cursor: pointer; padding: 2px 0; font-family: inherit; }
.hm-quiz__back:hover { color: var(--hm-ink); text-decoration: underline; }
.hm-quiz__picked { margin: 0 0 16px; font-size: 14px; color: var(--hm-ink-soft); background: var(--hm-gray); border-radius: 12px; padding: 11px 14px; }
.hm-field { display: block; margin-bottom: 13px; }
.hm-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--hm-ink-soft); }
/* 입력창: 애플식 그레이 필, 포커스 시 테라코타 링 */
.hm-field input {
    width: 100%; padding: 15px 16px; border-radius: 14px; border: 0;
    font-family: inherit; font-size: 16px; color: var(--hm-ink); background: var(--hm-gray);
    outline: none; transition: box-shadow .12s, background .12s; box-sizing: border-box; letter-spacing: -.01em;
}
.hm-field input::placeholder { color: #A1A1A6; }
.hm-field input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--hm-point); }
.hm-agree { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--hm-ink-soft); margin: 6px 0 16px; cursor: pointer; }
.hm-agree input { accent-color: var(--hm-point); width: 15px; height: 15px; }
.hm-agree a { color: var(--hm-ink); }
.hm-quiz__trust { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #A1A1A6; text-align: center; }
.hm-quiz__err { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: #C63A22; }
.hm-quiz__done { text-align: center; padding: 38px 4px 24px; }
.hm-quiz__done strong { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
.hm-quiz__done p { font-size: 15.5px; line-height: 1.8; color: var(--hm-ink-soft); margin: 0; }

/* ═══════════ 2. 상담 대화 (실시간 재생 메신저) ═══════════ */
.hm-chat { background: #fff; padding: var(--hm-sec-pad) 0; }
.hm-chat__box {
    max-width: 760px; margin: 0 auto;
    background: var(--hm-gray); border-radius: 24px;
    padding: 0 0 clamp(26px, 3.6vw, 40px);
    overflow: hidden;
}
/* 메신저 헤더 */
.hm-chat__head {
    display: flex; align-items: center; gap: 13px;
    padding: 18px clamp(24px, 4vw, 40px);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: clamp(20px, 3vw, 30px);
}
.hm-chat__avatar {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--hm-point); color: #fff;
    font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.hm-chat__who b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.hm-chat__who span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--hm-ink-soft); margin-top: 2px; }
.hm-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; animation: hmDotPulse 2.4s ease infinite; }
@keyframes hmDotPulse { 50% { opacity: .45; } }

.hm-chat__stream {
    display: flex; flex-direction: column; gap: 14px;
    padding: 0 clamp(24px, 4vw, 40px);
}
.hm-chat__msg { max-width: 82%; }
.hm-chat__msg p {
    margin: 0; padding: 15px 20px; border-radius: 6px 22px 22px 22px;
    background: #fff;
    font-size: clamp(15px, 1.7vw, 17px); line-height: 1.7; letter-spacing: -.02em; word-break: keep-all;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.hm-chat__msg p b { color: var(--hm-point-deep); font-weight: 700; }
.hm-chat__msg--me { align-self: flex-end; }
.hm-chat__msg--me p {
    background: var(--hm-point); color: #fff;
    border-radius: 22px 6px 22px 22px; box-shadow: none;
}
.hm-chat__msg--me p b { color: #fff; }

/* 재생 상태: 공간은 처음부터 예약(visibility), 도착 시 제자리 팝 */
.hm-chat__msg { position: relative; }
.hm-chat__msg.is-wait p { visibility: hidden; }
.hm-chat__msg.is-pop p { animation: hmMsgPop .42s cubic-bezier(.34,1.56,.64,1) both; }
.hm-chat__msg--me.is-pop p { transform-origin: bottom right; }
.hm-chat__msg.is-pop:not(.hm-chat__msg--me) p { transform-origin: bottom left; }
@keyframes hmMsgPop {
    from { opacity: 0; transform: scale(.72) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 타이핑 인디케이터 (● ● ●) — 다음 메시지 자리 위에 겹쳐 표시 (레이아웃 불변) */
.hm-chat__typing {
    position: absolute; left: 0; top: 0;
    display: inline-flex; gap: 5px; align-items: center;
    padding: 16px 18px; border-radius: 6px 22px 22px 22px;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    animation: hmMsgPop .3s cubic-bezier(.34,1.56,.64,1) both;
    transform-origin: bottom left;
}
.hm-chat__typing span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #B8B8BF;
    animation: hmTyping 1.2s ease-in-out infinite;
}
.hm-chat__typing span:nth-child(2) { animation-delay: .18s; }
.hm-chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes hmTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ═══════════ 3. 계획표 ═══════════ */
.hm-plan { background: var(--hm-gray); padding: var(--hm-sec-pad) 0; }
.hm-plan__doc {
    max-width: 900px; margin: 0 auto;
    background: #fff; border-radius: 24px;
    padding: clamp(28px, 4.4vw, 52px) clamp(24px, 4.4vw, 52px) clamp(22px, 3.4vw, 38px);
    box-shadow: 0 4px 16px rgba(0,0,0,.04), 0 28px 70px rgba(0,0,0,.09);
}
.hm-plan__dochead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.hm-plan__dochead strong { font-size: clamp(18px, 2.1vw, 23px); font-weight: 800; letter-spacing: -.03em; }
.hm-plan__dochead span { font-size: 14px; color: var(--hm-ink-soft); }
.hm-plan__doc table { width: 100%; border-collapse: collapse; font-size: clamp(14px, 1.6vw, 16.5px); letter-spacing: -.015em; }
.hm-plan__doc th {
    text-align: left; padding: 12px; font-size: 13px; font-weight: 600;
    color: var(--hm-ink-soft); border-bottom: 1.5px solid var(--hm-ink); white-space: nowrap;
}
.hm-plan__doc td { padding: 15px 12px; border-bottom: 1px solid #E8E8ED; line-height: 1.5; }
.hm-plan__doc tfoot td { border-bottom: 0; border-top: 1.5px solid var(--hm-ink); font-weight: 800; }
.hm-plan__doc td:nth-child(3), .hm-plan__doc th:nth-child(3) { text-align: right; white-space: nowrap; }
.hm-plan__doc td:last-child, .hm-plan__doc th:last-child { color: var(--hm-ink-soft); font-size: 13.5px; white-space: nowrap; }
.hm-plan__doc tfoot td:last-child { color: var(--hm-point-deep); font-size: inherit; }
.hm-plan__note { margin: 16px 0 0; font-size: 13px; color: var(--hm-ink-soft); }
/* 계획표 포인트: 카드 대신 조용한 한 줄 나열 */
.hm-plan__points {
    list-style: none; margin: clamp(30px, 3.4vw, 44px) auto 0; padding: 0;
    display: flex; justify-content: center; gap: 12px 36px; flex-wrap: wrap;
    text-align: center;
}
.hm-plan__points li {
    font-size: clamp(14px, 1.5vw, 15.5px); font-weight: 500;
    letter-spacing: -.02em; color: var(--hm-ink-soft);
}
.hm-plan__points li br { display: none; }

/* ═══════════ 3.5 시네마 (다크: 스크롤 점등 문장 + 빅 스탯) ═══════════ */
.hm-cinema { background: #000; padding: clamp(130px, 16vw, 240px) 0; }
.hm-cinema__text {
    max-width: 980px; margin: 0 auto;
    font-size: clamp(30px, 4.6vw, 60px); font-weight: 800;
    line-height: 1.38; letter-spacing: -.045em; word-break: keep-all;
    color: rgba(245,245,247,.16);
}
.hm-cinema__text span { transition: color .3s ease; }
.hm-cinema__text span.is-lit { color: #F5F5F7; }
@media (prefers-reduced-motion: reduce) { .hm-cinema__text { color: #F5F5F7; } }

.hm-cinema__stats {
    max-width: 980px; margin: clamp(90px, 11vw, 150px) auto 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.hm-cinema__stats em {
    display: block; font-style: normal;
    font-size: clamp(52px, 6.4vw, 92px); font-weight: 800;
    letter-spacing: -.05em; line-height: 1.05; margin-bottom: 14px;
    background: linear-gradient(92deg, #37D5D6 0%, #5B8CFF 46%, #B45BFF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hm-cinema__stats span { font-size: clamp(14px, 1.6vw, 16.5px); line-height: 1.65; color: #98989D; letter-spacing: -.02em; }

/* ═══════════ 4. 약속 — 카드가 아닌, 사람이 쓴 문서처럼 ═══════════ */
.hm-promise { background: #fff; padding: var(--hm-sec-pad) 0; }
.hm-promise__list {
    max-width: 680px; margin: 0 auto; padding: 0;
    list-style: none; counter-reset: promise;
}
.hm-promise__list li {
    counter-increment: promise;
    position: relative; padding: clamp(20px, 2.6vw, 28px) 0 clamp(20px, 2.6vw, 28px) clamp(44px, 5vw, 58px);
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.hm-promise__list li:last-child { border-bottom: 0; }
.hm-promise__list li::before {
    content: counter(promise);
    position: absolute; left: 4px; top: clamp(22px, 2.8vw, 30px);
    font-size: clamp(17px, 2vw, 20px); font-weight: 800; color: var(--hm-point);
    font-variant-numeric: tabular-nums;
}
.hm-promise__list b { display: block; font-size: clamp(17px, 2vw, 21px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 5px; }
.hm-promise__list span { font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.75; color: var(--hm-ink-soft); letter-spacing: -.02em; word-break: keep-all; }
.hm-promise__sign { max-width: 680px; margin: 34px auto 0; text-align: right; font-size: 15px; font-weight: 500; color: var(--hm-ink-soft); letter-spacing: -.02em; }

/* ═══════════ 5. 과정 안내 ═══════════ */
.hm-course { background: var(--hm-gray); padding: var(--hm-sec-pad) 0; }
.hm-course__list { max-width: 1000px; margin: 0 auto; }
.hm-course__row {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: #fff; border-radius: 18px;
    padding: clamp(26px, 3.2vw, 36px) clamp(24px, 3vw, 36px);
    margin-bottom: 16px;
    text-decoration: none; color: var(--hm-ink);
    transition: transform .18s ease, box-shadow .18s ease;
}
.hm-course__row:hover { transform: scale(1.012); box-shadow: 0 14px 44px rgba(0,0,0,.08); }
.hm-course__row h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.035em; margin: 0 0 8px; }
.hm-course__row p { font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 1.65; color: var(--hm-ink-soft); letter-spacing: -.02em; margin: 0; word-break: keep-all; }
.hm-course__arr { flex-shrink: 0; font-size: 24px; color: var(--hm-point); transition: transform .18s; }
.hm-course__row:hover .hm-course__arr { transform: translateX(6px); }

/* ═══════════ 6. 후기 ═══════════ */
.hm-review { background: #fff; padding: var(--hm-sec-pad) 0; }
.hm-review__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hm-review__card {
    margin: 0; background: var(--hm-gray); border-radius: 18px;
    padding: clamp(28px, 3.2vw, 38px) clamp(24px, 2.8vw, 32px);
}
.hm-review__card h3 { font-size: clamp(17px, 1.9vw, 19px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 12px; line-height: 1.45; }
.hm-review__card p { font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.8; color: var(--hm-ink-soft); letter-spacing: -.015em; margin: 0 0 18px; }
.hm-review__card cite { font-style: normal; font-size: 14px; font-weight: 600; color: var(--hm-point-deep); }

/* ═══════════ 7. FAQ ═══════════ */
.hm-faq { background: var(--hm-gray); padding: var(--hm-sec-pad) 0; }
.hm-faq__list { max-width: 880px; margin: 0 auto; }
.hm-faq__item { background: #fff; border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
.hm-faq__item summary {
    list-style: none; cursor: pointer;
    padding: clamp(20px, 2.4vw, 27px) 56px clamp(20px, 2.4vw, 27px) clamp(22px, 2.6vw, 30px);
    font-size: clamp(16px, 1.9vw, 19px); font-weight: 700; letter-spacing: -.025em; position: relative;
}
.hm-faq__item summary::-webkit-details-marker { display: none; }
.hm-faq__item summary::after {
    content: '+'; position: absolute; right: clamp(20px, 2.4vw, 28px); top: 50%; transform: translateY(-50%);
    font-size: 26px; font-weight: 300; color: var(--hm-ink-soft); transition: color .15s;
}
.hm-faq__item[open] summary::after { content: '−'; color: var(--hm-point); }
.hm-faq__item > p {
    margin: 0; padding: 0 clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 28px);
    font-size: clamp(15px, 1.7vw, 16.5px); line-height: 1.85; color: var(--hm-ink-soft);
    letter-spacing: -.015em; word-break: keep-all;
}

/* ═══════════ 8. 마지막 안내 (블랙 피날레) ═══════════ */
.hm-final { background: #000; padding: clamp(120px, 15vw, 220px) 0; text-align: center; }
.hm-final h2 {
    color: #F5F5F7; font-size: clamp(30px, 4.8vw, 60px); font-weight: 800;
    line-height: 1.32; letter-spacing: -.045em; margin: 0 0 52px; word-break: keep-all;
}
.hm-final__cta { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.hm-final__tel { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; color: #F5F5F7; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.hm-final__tel small { font-size: 12.5px; font-weight: 400; color: rgba(245,245,247,.55); }
.hm-final__tel:hover { color: var(--hm-point); }

/* ═══════════ 반응형 ═══════════ */
@media (max-width: 1024px) {
    .hm-hero__grid { grid-template-columns: 1fr; gap: 52px; }
    .hm-hero__sub { max-width: none; }
    .hm-quiz { max-width: 580px; }
    .hm-review__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .hm-cinema__stats { grid-template-columns: 1fr; gap: 52px; text-align: center; }
}
@media (max-width: 560px) {
    .hm-wrap { padding: 0 20px; }
    .hm-quiz__opts { grid-template-columns: 1fr; }
    .hm-final__cta { flex-direction: column; gap: 22px; }
    .hm-plan__doc { padding: 22px 16px 18px; border-radius: 20px; }
    .hm-plan__doc td:last-child, .hm-plan__doc th:last-child { display: none; }
    .hm-chat__msg { max-width: 94%; }
}