/* 두고 클래스 — 강사님을 위한 세일즈 첫 화면 (home.js) · 수강생 첫 로그인 화면(.login-dc) · 강사 입점 문의 팝업(.hm-mbg)
 * 여기어때 디자인 시스템(YDS)의 시각 언어를 따른다:
 *  - 색: Lively red 800 #F94239 하나로 강조 (누르면 900 #EA2013), 연한 면 50 #FFF5F5 · 100 #FFEDEA · 200 #FEDFDE.
 *    로고 심볼은 브랜드 레드 #F7323F. 회색은 무채색 Neutral(#FAFAFA · #F5F5F5 · #E6E6E6 · #DCDCDC · #BBBBBB · #999999 · #707070 · #5C5C5C · #474747 · #222222)
 *  - 글꼴: 문대표 수강생 화면과 똑같은 글꼴 (styles.css 의 --font = Inter(영문 · 숫자) + Pretendard(한글)), 본문 자간 0 · 굵은 제목은 수강생 화면처럼 좁게(-0.02 ~ -0.04em)
 *  - 모서리 8 · 12 · 16 · 20px, 칩은 알약. 그림자는 역할별로 얕게 (flat · raised · float · sheet), 위 막대는 흰 바탕 + 내려가면 아주 옅은 그림자
 *  - 강조는 빨강으로만, 정보 표시는 Cyan, 성공은 Green */
body[data-mode="home"] { background: #fff; }
.hm, .hm-mbg {
  /* 여기어때 Lively red (800 #F94239 · 900 #EA2013 · 500 #FB7F79 · 200 #FEDFDE · 100 #FFEDEA · 50 #FFF5F5), 로고는 브랜드 레드 #F7323F */
  --pri: #f94239; --pri-dark: #ea2013; --pri-heavy: #ea2013; --pri-soft: #fff5f5; --pri-100: #ffedea; --pri-200: #fedfde; --pri-500: #fb7f79; --pri-line: rgba(249, 66, 57, .24);
  --logo: #f7323f;
  --green: #01a484; --green-soft: #e7f7f3; --cyan: #006ce0; --cyan-soft: #e3f0ff; --yellow: #ffb803; --violet: #7059fa;
  --g10: #fafafa; --g50: #f5f5f5; --g100: #e6e6e6; --g200: #dcdcdc; --g300: #bbbbbb; --g400: #999999;
  --g500: #707070; --g600: #5c5c5c; --g700: #474747; --g800: #333333; --g900: #222222;
  /* 그림자: flat · raised · float · sheet (여기어때 역할별 그림자) */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-md: 0 2px 16px rgba(0, 0, 0, .08);
  --sh-lg: 0 4px 20px rgba(0, 0, 0, .14);
  --sh-hov: 0 2px 16px rgba(0, 0, 0, .1);
  --ring: 0 0 0 3px rgba(249, 66, 57, .24);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* 문대표 수강생 화면과 같은 글꼴 (styles.css --font: Inter + Pretendard) */
  font-family: var(--font);
  font-feature-settings: "calt";
  letter-spacing: 0;
  color: var(--g900);
  word-break: keep-all;
}
.hm { background: #fff; overflow-x: clip; }
.hm-wrap { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.hm h1, .hm h2, .hm h3, .hm p, .hm-mbg h2, .hm-mbg p { margin: 0; }
.hm .icon, .hm-mbg .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hm .icon.sm, .hm-mbg .icon.sm { width: 18px; height: 18px; }
.hm .icon.xs { width: 15px; height: 15px; }

/* 강조: 빨간 글자 */
.hm-mark { color: var(--pri); background: none; }

/* 버튼 — 50px 알약, 700 */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .2s ease; }
.hm-btn:active { transform: scale(.98); }
.hm-btn .icon { transition: transform .2s var(--ease); }
.hm a:focus-visible, .hm button:focus-visible, .hm summary:focus-visible, .hm-mbg a:focus-visible, .hm-mbg button:focus-visible { outline: none; box-shadow: var(--ring); }
.hm-btn-sm { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.hm-btn-lg { height: 56px; padding: 0 28px; border-radius: 14px; font-size: 16px; }
.hm-btn-block { width: 100%; }
.hm-btn-p { background: var(--pri); color: #fff; }
.hm-btn-sec { background: #fff; border-color: var(--g200); color: var(--g700); }
.hm-btn-ghost { color: var(--pri); }
.hm-btn-inv { background: #fff; color: var(--pri); }
.hm-btn-onpri { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* 상단 바 — 60px, 그림자 없이 아래 보더 */
.hm-top { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--g100); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* 내려가면 여기어때처럼 흰 바탕에 아주 옅은 그림자 (Shadow/Header 0 4px 6px 4%) */
.hm-top.scrolled { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom-color: transparent; box-shadow: 0 4px 6px rgba(0, 0, 0, .04); }
.hm-top-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--pri), var(--pri-500)); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity .3s ease; }
.hm-top.scrolled .hm-top-prog { opacity: 1; }
.hm-top-in { display: flex; align-items: center; gap: 32px; height: 64px; }
.hm-logo { display: flex; align-items: center; color: var(--g900); border-radius: 6px; }
/* 두고 클래스 로고 — doogo 로고(레드 심볼 + 검정 글자) 그대로 + 오른쪽에 작은 빨간 CLASS 배지
 * --lh = doogo 로고 그림 높이(g 꼬리 포함). 배지는 로고 높이에 맞춰 같이 커지고 작아진다 */
.hm-lock { --lh: 34px; display: inline-flex; align-items: center; gap: calc(var(--lh) * .24); line-height: 1; vertical-align: middle; }
.hm-lock-logo { display: block; flex: none; height: var(--lh); width: auto; }
.hm-lock-cls { display: block; flex: none; padding: calc(var(--lh) * .09) calc(var(--lh) * .2); border-radius: calc(var(--lh) * .15); background: #f94239; color: #fff;
  font-family: var(--font); font-size: max(9px, calc(var(--lh) * .32)); font-weight: 700; font-style: normal; line-height: 1.05; letter-spacing: .06em; }
/* 다른 곳(문제 · 답 줄, 랜딩 미리보기)에서 쓰는 두고 심볼 하나 */
.hm-sym { display: block; flex: none; height: var(--lh, 40px); width: calc(var(--lh, 40px) * .958); background: var(--logo, #f7323f);
  -webkit-mask: url(assets/brand/doogo-symbol.png) center / contain no-repeat; mask: url(assets/brand/doogo-symbol.png) center / contain no-repeat; }
.hm-nav { display: flex; gap: 2px; }
.hm-nav-a { position: relative; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--g600); transition: color .15s ease, background-color .15s ease; }
.hm-nav-apply { color: var(--pri); font-weight: 700; }
.hm-top-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* 첫 화면 */
.hm-hero { position: relative; background: #fff; overflow: hidden; }
.hm-hero-glow { display: none; }
.hm-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 88px 0 72px; }
.hm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; background: var(--pri-soft); color: var(--pri-dark); font-size: 13px; font-weight: 600; }
.hm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pri); animation: hm-blink 1.6s ease-in-out infinite; }
@keyframes hm-blink { 50% { opacity: .35; } }
.hm-h1 { margin-top: 20px !important; font-size: 54px; font-weight: 800; line-height: 1.25; letter-spacing: 0; color: var(--g900); }
/* 첫 제목 — ‘두고 클래스’는 한 줄에 */
.hm-h1 .hm-mark { white-space: nowrap; }
@media (max-width: 1240px) { .hm-h1 { font-size: 48px; } }
.hm-lead { margin-top: 20px !important; max-width: 30em; font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--g500); }
.hm-lead b { color: var(--g900); font-weight: 700; }
.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.hm-hero-pts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; }
.hm-hero-pts li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--g600); }
.hm .hm-hero-pts .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--pri-soft); color: var(--pri); stroke-width: 2.4; box-sizing: border-box; }

.hm-hero-art { position: relative; height: 480px; }
.hm-hero-art::before { content: ""; position: absolute; inset: 0 -40px 0 12%; border-radius: 16px; background: #fafafa; border: 1px solid #efefef; }
.hm-browser { position: relative; border-radius: 12px; background: #fff; overflow: hidden; border: 1px solid var(--g200); box-shadow: var(--sh-md); }
.hm-browser-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--g50); border-bottom: 1px solid var(--g100); }
.hm-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--g300); }
.hm-browser-bar span { margin-left: 10px; padding: 2px 10px; border-radius: 50px; background: #fff; border: 1px solid var(--g100); font-size: 10.5px; font-weight: 600; color: var(--g500); }
.hm-browser img { display: block; width: 100%; height: auto; }
.hm-hero-browser { position: absolute; top: 40px; left: 18%; width: 100%; }
.hm-phone { position: relative; border-radius: 36px; padding: 8px; background: var(--g900); box-shadow: var(--sh-lg); }
.hm-phone img { display: block; width: 100%; aspect-ratio: 640 / 1300; object-fit: cover; object-position: top; border-radius: 29px; background: var(--g50); }
/* 실제 화면 녹화 영상 (첫 장면 사진 → 보이면 재생) · 오른쪽 아래 멈춤 버튼 */
.hm-browser-scr { position: relative; }
.hm-browser video { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; background: var(--g50); }
.hm-phone video { display: block; width: 100%; aspect-ratio: 640 / 1300; object-fit: cover; object-position: top; border-radius: 29px; background: var(--g50); }
.hm-vid-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .2s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; }
.hm-phone .hm-vid-btn { right: 18px; bottom: 18px; }
.hm-phone:hover .hm-vid-btn, .hm-browser:hover .hm-vid-btn, .hm-vid-btn:focus-visible, .hm-vid-btn.paused { opacity: 1; }
.hm .hm-vid-btn .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.hm .hm-vid-btn.paused .icon { fill: currentColor; }
/* 휴대폰 · 태블릿: 재생 버튼은 감춘다 (보이는 화면에서 저절로 재생). 멈춰 둔 영상에만 버튼이 보인다 */
@media (hover: none) { .hm-vid-btn { opacity: 0; pointer-events: none; } .hm-vid-btn.paused { opacity: 1; pointer-events: auto; } }
/* 영상 자동 재생을 막는 곳에서 대신 보여 주는 움직이는 그림 (같은 녹화) */
.hm-vid-anim { display: block; width: 100%; object-fit: cover; object-position: top; background: var(--g50); }
.hm-phone .hm-vid-anim { aspect-ratio: 640 / 1300; border-radius: 29px; }
.hm-browser .hm-vid-anim { height: auto; aspect-ratio: 1440 / 900; }
.hm-vid-anim + .hm-vid-btn { display: none; }
.hm .hm-cap .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--pri); fill: currentColor; }
.hm-hero-phone-wrap { position: absolute; left: 0; bottom: 0; width: 220px; }
.hm-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--g100); box-shadow: var(--sh-lg); animation: hm-float 6s ease-in-out infinite; }
.hm-chip b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--g900); }
.hm-chip small { display: block; font-size: 12px; font-weight: 400; color: var(--g500); }
.hm .hm-chip > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50px; background: var(--pri-soft); color: var(--pri-dark); stroke-width: 2; box-sizing: border-box; }
.hm .hm-chip > .icon.ok { background: var(--green-soft); color: var(--green); }
.hm-chip-a { top: 4px; left: 38%; }
.hm-chip-b { right: -10px; bottom: 112px; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 15px; animation-delay: -2s; }
.hm-chip-b b { font-size: 20px; letter-spacing: 0; font-weight: 800; }
.hm-chip-bar { display: block; width: 132px; height: 6px; border-radius: 50px; background: var(--g100); overflow: hidden; }
.hm-chip-bar i { display: block; height: 100%; border-radius: 50px; background: var(--pri); }
.hm-chip-c { left: 40%; bottom: 10px; animation-delay: -4s; }
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 숫자 */

/* 공통 구역 */
.hm-sec { padding: 72px 0; }
/* 운영 흐름 바로 아래 3가지 기능이 이어지게 (둘 다 흰 바탕이라 간격을 줄인다) */
.hm-sec.hm-flow-sec { padding-bottom: 32px; }
.hm-sec.hm-flow-sec + .hm-sec { padding-top: 48px; }
/* 메뉴 버튼으로 내려왔을 때 위 막대(60px)에 제목이 가리지 않게 */
.hm-sec, .hm-hero { scroll-margin-top: 60px; }
/* 흰 구역 — 거의 흰색에 아주 옅은 빨강 기운만 (구분선으로 나눈다) */
.hm-soft { background: radial-gradient(1000px 480px at 100% 0%, rgba(249, 66, 57, .015), transparent 65%), #fffefe; border-top: 1px solid #f5f0ef; border-bottom: 1px solid #f5f0ef; }
.hm-h2 { font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--g900); }
.hm-h2-xl { font-size: 40px; line-height: 1.3; font-weight: 800; letter-spacing: 0; }
.hm-sub { margin-top: 12px !important; max-width: 42em; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--g500); }

/* 구역 제목 — 타이탄클래스처럼: 빨강 아이콘 + 굵은 제목 + 오른쪽 화살표 · 아래 구분선 */
.hm-shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px 48px; align-items: end; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--g200); }
.hm-shead.no-sub { grid-template-columns: minmax(0, 1fr) auto; }
.hm-shead-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hm-shead-ic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pri); color: #fff; }
.hm .hm-shead-ic .icon { width: 22px; height: 22px; stroke-width: 2; }
.hm-shead .hm-sub { margin: 0 !important; max-width: none; }
.hm-shead-r { justify-self: end; }
.hm-shead-link { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 36px; padding: 0 6px 0 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--g600); text-decoration: none; transition: color .15s ease, background-color .15s ease; }

/* 카드 공통 — 흰 바탕 · 1px 보더 · 16px. 마우스를 올리면 떠오르고 · 빨간 선 · 아이콘이 빨강으로 */
.hm-pillar, .hm-more-i, .hm-feat, .hm-step, .hm-pain, .hm-loop-i { background: #fff; border: 1px solid var(--g200); border-radius: 16px; }
.hm-hov { position: relative; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease, background-color .3s ease, color .3s ease; }
.hm-hov::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tone, var(--pri)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hm-ic { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--tone-bg, var(--pri-soft)); color: var(--tone, var(--pri)); transition: background-color .3s ease, color .3s ease, transform .4s var(--ease); }
.hm .hm-ic .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.hm-ic-sm { width: 40px; height: 40px; border-radius: 12px; }
.hm-ic-xs { width: 32px; height: 32px; border-radius: 10px; background: var(--tone-bg, #fff); }
.hm .hm-ic-xs .icon { width: 17px; height: 17px; }
.hm-ic-mute { background: var(--tone-bg, var(--g100)); color: var(--tone, var(--g700)); }
.hm .hm-ic-sm .icon { width: 20px; height: 20px; }
.hm-hov h3, .hm-hov b { transition: color .2s ease; }

/* 강사진 — 프로필 사진 카드 (사진 · 이름 · 분야 · 구분선 · SNS) */
.hm-tcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hm-tc { display: flex; flex-direction: column; min-width: 0; transition: transform .3s var(--ease); }
/* 강사 사진 — 긱스쿨 강사진처럼 큰 브랜드 모양 위에 누끼 사진, 우리는 흰 바탕 + 빨간 doogo 심볼(뒤로 6겹 = 입체 두께).
   액자(.hm-tc-frame)는 위를 14% 비워 두고, 사진(.hm-tc-cut)은 그 위로 머리가 살짝 튀어나오게 — 양옆 · 아래는 액자에 맞춰 자름 */
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm-tc { --sw: 132%; --sl: -6%; --st: 4%; }
.hm-tcs > .hm-tc:nth-child(4n+2) { --sw: 220%; --sl: -40%; --st: -40%; }
.hm-tcs > .hm-tc:nth-child(4n+3) { --sw: 150%; --sl: -22%; --st: 22%; }
.hm-tcs > .hm-tc:nth-child(4n+4) { --sw: 190%; --sl: -96%; --st: -6%; }
.hm-tc-photo { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; }
.hm-tc-frame { position: absolute; left: 0; right: 0; top: 14%; bottom: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #fff7f6 0%, #ffffff 70%); border: 1px solid #f4e6e4; box-shadow: 0 22px 40px -26px rgba(150, 30, 20, .45); transition: box-shadow .3s ease; }
.hm-tc-sym { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(170, 24, 12, .22)); transition: transform .6s var(--ease); }
.hm-tc-ex { fill: #c61d12; }
.hm-tc-ex:first-child { fill: #a8160c; }
.hm-tc-face { fill: url(#hm-dsym-g); }
.hm-tc-cut { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: inset(-40% 0 0 0 round 0 0 18px 18px); }
.hm-tc-cut img { position: absolute; left: 50%; bottom: 0; height: 106%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 10px 18px rgba(60, 10, 6, .22)); transition: transform .5s var(--ease); }
.hm-tc-ph { position: absolute; left: 50%; bottom: 0; width: 64%; transform: translateX(-50%); fill: #fff; filter: drop-shadow(0 10px 16px rgba(150, 24, 12, .28)); }
.hm-tc-tag { position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 50px; background: rgba(255, 255, 255, .96); border: 1px solid var(--g100); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); font-size: 12px; font-weight: 600; color: var(--g700); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.hm-tc-body { padding: 18px 2px 14px; border-bottom: 1px solid var(--g200); }
.hm-tc-body h3 { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: 0; transition: color .2s ease; }
.hm-tc-field { margin-top: 4px !important; font-size: 14px; font-weight: 400; color: var(--g600); }
.hm-tc-course { margin-top: 2px !important; font-size: 13px; color: var(--g400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tc-foot { display: grid; gap: 10px; padding-top: 14px; }
.hm-tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-tc-head h3 { min-width: 0; }
.hm-tc-sns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* 강사 SNS: 서비스 마크 + 이름표 알약 (예: [▶] 강사 유튜브 ↗) */
.hm-sns { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 7px; border-radius: 50px; border: 1px solid var(--g200); background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--g800); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.hm-sns svg { flex: none; width: 20px; height: 20px; }
.hm .hm-sns .icon { width: 12px; height: 12px; color: var(--g400); }
.hm-sns-youtube { border-color: #ffd6d6; background: #fff8f8; }
/* 강의 소개 · 무료 강의 = 두 칸 버튼, 수강생 로그인 = 한 줄 전체 */
.hm-tc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-tc-links.one .hm-tc-a { grid-column: 1 / -1; }
.hm-tc-links a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--g200); background: #fff; font-size: 14px; font-weight: 600; color: var(--g800); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.hm .hm-tc-links .hm-tc-a .icon { width: 15px; height: 15px; color: var(--g500); }
.hm-tc-links .hm-tc-login { grid-column: 1 / -1; border-color: var(--pri-200); background: var(--pri-soft); color: var(--pri-dark); font-weight: 700; }
.hm .hm-tc-links .hm-tc-login .icon { width: 14px; height: 14px; }
/* 입점 문의 띠 */
.hm-join { display: flex; align-items: center; gap: 20px; margin-top: 48px; padding: 24px 28px; border-radius: 16px; border: 1px solid #f3eeed; background: linear-gradient(100deg, #fffbfb, #fff 72%); transition: box-shadow .3s ease, transform .3s var(--ease); }
.hm-join-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--pri); color: #fff; transition: transform .45s var(--ease); }
.hm .hm-join-ic .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.hm-join-t { flex: 1; min-width: 0; }
.hm-join-t b { display: block; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.hm-join-t p { margin-top: 4px !important; font-size: 15px; line-height: 1.6; color: var(--g600); }

/* 혼자 들을 때 막히는 이유 */
.hm-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hm-pain { padding: 28px 24px; }
.hm-pain h3 { margin-top: 22px !important; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.hm-pain p { margin-top: 10px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }
.hm-answer { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 28px 32px; border-radius: 16px; background: #fff; border: 1px solid var(--g200); border-left: 4px solid var(--pri); }
.hm-answer .hm-sym { --lh: 40px; }
.hm-answer p { flex: 1; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.hm-answer-go { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--pri); color: #fff; font-size: 14px; font-weight: 600; transition: background-color .2s ease; }

/* 위 막대 오른쪽 · 첫 화면 수강생 링크 */
.hm-top-link { padding: 0 8px; font-size: 15px; font-weight: 600; color: var(--g600); text-decoration: none; transition: color .15s ease; }
.hm-student-link { margin-top: 18px !important; font-size: 14px; color: var(--g500); }
.hm-student-link a { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-weight: 700; color: var(--pri); text-decoration: none; }

/* 체크 목록 */
.hm-checks { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.hm-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--g700); }
.hm .hm-checks .icon { width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--pri-soft); color: var(--pri); stroke-width: 2.6; box-sizing: border-box; }

/* 강사님이 받는 세 가지 — 실제 화면과 함께 */
.hm-frows { display: grid; gap: 28px; }
.hm-frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; padding: 48px 56px; border-radius: 24px; background: linear-gradient(160deg, #fffcfc 0%, #ffffff 70%); border: 1px solid #f3eeed; }
.hm-frow.rev { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.hm-frow.rev .hm-frow-copy { order: 2; }
.hm-frow-top { display: flex; align-items: center; gap: 14px; }
/* 기능 번호 01 · 02 · 03 — 가장 먼저 눈에 들어오게 크게 (빨강 그라데이션 글자) */
/* 01 · 02 · 03 — 두께가 있는 입체 숫자 (오른쪽 아래로 6겹 + 그림자) */
.hm-frow-no { font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: #f94239; padding: 0 8px 8px 0;
  text-shadow: 1px 1px 0 #e52b1f, 2px 2px 0 #d9261a, 3px 3px 0 #cc2115, 4px 4px 0 #bf1d11, 5px 5px 0 #b1190e, 6px 6px 0 #a3160c, 8px 14px 22px rgba(170, 24, 12, .32); }
.hm-frow-tag { padding: 8px 16px; border-radius: 50px; background: var(--pri-soft); border: 1px solid var(--pri-200); font-size: 16px; font-weight: 700; color: var(--pri-dark); }
.hm-frow h3 { margin-top: 14px !important; font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: 0; color: var(--g900); }
.hm-frow-lead { margin: 12px 0 28px !important; font-size: 16px; line-height: 1.6; color: var(--g600); }
.hm-frow-art { position: relative; display: grid; justify-items: center; }
.hm-frow-phone { width: min(270px, 78%); }
.hm-frow-art .hm-cap { margin-top: 16px !important; }

/* 이용료 */
.hm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hm-plan, .hm-scale { display: flex; flex-direction: column; padding: 32px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--g200); }
.hm-plan-main { border: 2px solid var(--pri); box-shadow: 0 16px 40px -22px rgba(249, 66, 57, .5); }
.hm-plan-who { font-size: 14px; font-weight: 700; color: var(--pri); }
.hm-plan-price { display: block; margin-top: 10px; font-size: 32px; font-weight: 800; letter-spacing: 0; color: var(--g900); }
.hm-plan-price small { margin-left: 2px; font-size: 18px; font-weight: 400; color: var(--g700); }
.hm-plan-desc { margin: 8px 0 22px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }
.hm-plan .hm-checks { margin-bottom: 28px; }
.hm-plan .hm-btn-block { margin-top: auto; }
.hm-plan-foot { display: block; margin-top: 10px; text-align: center; font-size: 12px; color: var(--g400); }
.hm-scale-t { margin-bottom: 22px !important; font-size: 18px; font-weight: 700; color: var(--g900); }
.hm-scale-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; margin-bottom: 16px; }
.hm-scale-n { align-self: center; font-size: 14px; font-weight: 600; color: var(--g700); }
.hm-scale-bar { align-self: center; height: 10px; border-radius: 6px; background: var(--g50); overflow: hidden; }
.hm-scale-bar i { display: block; height: 100%; border-radius: 6px; background: var(--pri-200); }
.hm-scale-fee { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pri); }
.hm .hm-scale-fee .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.hm-scale-foot { margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--g100); font-size: 13px; line-height: 1.6; color: var(--g500); }

/* 플랫폼 세 가지 */
.hm-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-pillar { padding: 36px 32px 32px; }
.hm-pillar-top { display: flex; align-items: center; justify-content: space-between; }
.hm-pillar-no { font-size: 28px; font-weight: 800; letter-spacing: 0; color: var(--g100); transition: color .3s ease; }
.hm-pillar h3 { margin-top: 24px !important; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.hm-pillar p { margin-top: 10px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }
.hm-pillar-list { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--g100); display: grid; gap: 10px; }
.hm-pillar-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--g700); }
.hm-pillar-list .icon { width: 18px; height: 18px; color: var(--pri); stroke-width: 2.4; }

/* 수강생 화면 둘러보기 */
.hm-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: start; }
.hm-show-tabs { display: grid; gap: 6px; }
.hm-tab { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 18px; border-radius: 16px; text-align: left; color: var(--g700); transition: background-color .2s ease, color .2s ease; }
.hm-tab.on { background: var(--pri-soft); color: var(--g900); }
.hm-tab-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50px; background: #fff; border: 1px solid var(--g200); color: var(--g700); transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.hm-tab.on .hm-tab-ic { background: var(--pri); border-color: transparent; color: #fff; }
.hm-tab-t b { display: block; padding-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.hm-tab-t small { display: none; margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--g600); }
.hm-tab.on .hm-tab-t small { display: block; }
.hm-show-art { position: sticky; top: 92px; display: grid; justify-items: center; padding: 48px 24px; border-radius: 20px; background: linear-gradient(160deg, #fffcfc 0%, #ffffff 70%); border: 1px solid #f3eeed; }
.hm-show-glow { position: absolute; inset: 12% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 66, 57, .05), transparent); }
.hm-show-phone { width: min(290px, 78%); }
.hm-show-cap { display: none; }
.hm-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.hm-more-i { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 16px; row-gap: 2px; padding: 22px 24px; }
.hm-more-i .hm-ic { grid-row: span 2; }
.hm-more-i b { font-size: 16px; font-weight: 700; }
.hm-more-i > span:last-child { font-size: 14px; line-height: 1.5; color: var(--g500); }

/* 강사센터 */
.hm-atabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.hm-atab { height: 40px; padding: 0 20px; border-radius: 50px; border: 1px solid var(--g200); background: #fff; font-size: 15px; font-weight: 600; color: var(--g600); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.hm-atab.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); }
.hm-ashot { position: relative; padding: 32px; border-radius: 20px; background: #fff; border: 1px solid var(--g200); }
.hm-ashot .hm-browser { max-width: 960px; margin: 0 auto; }
.hm-cap { position: relative; margin-top: 14px !important; text-align: center; font-size: 12px; color: var(--g500); font-weight: 400; }
.hm-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.hm-feat { padding: 28px 24px; }
.hm-feat h3 { margin-top: 20px !important; font-size: 17px; font-weight: 700; line-height: 1.4; }
.hm-feat p { margin-top: 8px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }

/* 시작 순서 */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hm-step { padding: 28px 24px; }
.hm-step-no { display: inline-grid; place-items: center; height: 32px; min-width: 44px; padding: 0 10px; border-radius: 50px; background: var(--pri-soft); color: var(--pri-dark); font-size: 13px; font-weight: 700; letter-spacing: 0; transition: background-color .3s ease, color .3s ease; }
.hm-step b { display: block; margin-top: 20px; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.hm-step p { margin-top: 8px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }
/* 로그인 세 가지 */
.hm-login-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; margin-top: 24px; padding: 40px 48px; border-radius: 20px; background: #fff; border: 1px solid var(--g200); }
.hm-ld-copy h3 { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.hm-ld-copy p { margin: 12px 0 28px !important; font-size: 15px; line-height: 1.6; color: var(--g500); }
.hm-ld-card { display: grid; gap: 12px; padding: 22px; border-radius: 16px; background: linear-gradient(160deg, #fffcfc 0%, #ffffff 70%); border: 1px solid #f3eeed; }
.hm-ld-f small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--g500); }
.hm-ld-f > span { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--g200); background: #fff; font-size: 14px; font-weight: 700; }
.hm-ld-f .hm-sym { --lh: 22px; }
.hm-ld-f .icon { margin-left: auto; color: var(--g400); }
.hm-ld-pw { letter-spacing: .3em; color: var(--g700); }
.hm-ld-btn { display: grid; place-items: center; height: 46px; border-radius: 12px; background: var(--pri); color: #fff; font-size: 15px; font-weight: 600; }

/* 평생 네트워크 — 왼쪽 글 · 오른쪽 이어지는 순서 */
.hm-life-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; }
.hm-life-copy p { margin-top: 18px !important; max-width: 32em; font-size: 16px; line-height: 1.75; color: var(--g500); }
.hm-life-copy .hm-h2 + p { margin-top: 24px !important; }
.hm-life-copy p b { color: var(--g900); font-weight: 700; }
.hm-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.hm-loop::before { content: ""; position: absolute; left: 44px; top: 32px; bottom: 32px; width: 2px; background: repeating-linear-gradient(var(--pri-line) 0 6px, transparent 6px 12px); }
.hm-loop-i { display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 24px; }
.hm-loop-t { flex: 1; min-width: 0; }
.hm-loop-t b { display: block; font-size: 16px; font-weight: 700; }
.hm-loop-t small { display: block; margin-top: 2px; font-size: 14px; color: var(--g500); }
.hm-loop-i em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--g300); }

/* 자주 묻는 질문 */
.hm-faq-in { max-width: 880px; }
.hm-faq-in .hm-shead { margin-bottom: 0; border-bottom: 2px solid var(--g900); }
.hm-faq { border-bottom: 1px solid var(--g200); }
.hm-faq summary { display: flex; align-items: center; gap: 14px; padding: 24px 4px; font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; border-radius: 6px; transition: color .15s ease; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50px; background: var(--pri-soft); color: var(--pri-dark); font-size: 13px; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.hm-faq[open] summary > span { background: var(--pri); color: #fff; }
.hm-faq summary .icon { margin-left: auto; color: var(--g400); transition: transform .25s var(--ease), color .15s ease; }
.hm-faq[open] summary .icon { transform: rotate(180deg); }
.hm-faq p { padding: 0 4px 24px 48px; font-size: 15px; line-height: 1.7; color: var(--g500); }
.hm-faq-cta { padding: 0 4px 24px 48px; margin-top: -8px; }

/* 마지막 안내 — 빨강 띠 */
/* 마지막 안내 — 흰 바탕에 아주 옅은 빨강 기운, 빨강은 제목 일부 · 버튼에만 */
.hm-final { background: radial-gradient(760px 440px at 92% 8%, rgba(249, 66, 57, .025), transparent 70%), #fffefe; color: var(--g900); text-align: center; border-top: 1px solid #f3eeed; }
.hm-final-in { padding: 96px 0; }
.hm-final .hm-h2 { font-size: 40px; line-height: 1.3; color: var(--g900); letter-spacing: 0; font-weight: 800; }
.hm-final p { margin-top: 14px !important; font-size: 17px; font-weight: 400; color: var(--g600); }
.hm-cta-c { justify-content: center; }

/* 바닥 — 흰 바탕 (위 1px 선), 바로가기 · 두고 그룹사 · 사업자 정보 */
.hm-foot { background: #fff; color: var(--g500); border-top: 1px solid var(--g200); }
.hm-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding: 64px 0 44px; }
.hm-foot-brand p { margin-top: 16px !important; font-size: 14px; line-height: 1.6; color: var(--g500); }
.hm-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hm-foot-col { display: grid; align-content: start; justify-items: start; gap: 12px; }
.hm-foot-col b { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--g900); }
.hm-foot-col a, .hm-foot-apply, .hm-foot-a { font-size: 14px; font-weight: 400; color: var(--g600); text-decoration: none; text-align: left; transition: color .15s ease; }
.hm-foot-col strong { font-weight: 700; color: var(--g900); }
.hm-foot-apply { color: var(--pri); font-weight: 700; }
.hm-foot-biz { padding: 28px 0 40px; border-top: 1px solid var(--g100); }
.hm-foot-info { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.hm-foot-info div { display: inline-flex; gap: 6px; padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--g200); }
.hm-foot-info div:last-child { border-right: 0; }
.hm-foot-info dt { color: var(--g400); }
.hm-foot-info dd { margin: 0; color: var(--g700); }
.hm-foot-info a { color: inherit; text-decoration: none; }
.hm-foot-chk { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 50px; border: 1px solid var(--g300); font-size: 12px; line-height: 20px; color: var(--g600); }
.hm-foot-copy { font-size: 12px; letter-spacing: 0; color: var(--g400); }
/* 사업자 정보: 상호는 굵게 · 맨 아래 안내 문구(통신판매중개자) · 사업제휴 이메일 · 운영 시간 */
.hm-foot-info strong { font-weight: 700; color: var(--g900); }
.hm-foot-notice { margin: 14px 0 20px !important; max-width: 760px; font-size: 12px; line-height: 1.6; color: var(--g400); }
.hm-foot-mail { margin-top: 4px !important; }
.hm-foot-mail a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--g900) !important; white-space: nowrap; }
@media (max-width: 1080px) { .hm-foot-mail a { font-size: 18px; } }
.hm .hm-foot-mail .icon { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--pri-soft); color: var(--pri); stroke-width: 2; box-sizing: border-box; }
.hm-foot-hrs { display: grid; gap: 2px; margin-top: 6px !important; }
.hm-foot-hrs span { font-size: 14px; font-weight: 600; color: var(--g700); }
.hm-foot-hrs small { font-size: 12px; color: var(--g400); }

/* ---------- 마우스를 올렸을 때 (마우스가 있는 기기만 — 휴대폰에서 눌린 채로 남지 않게) ---------- */
@media (hover: hover) and (pointer: fine) {
  .hm-btn-p:hover { background: var(--pri-dark); box-shadow: 0 8px 18px -6px rgba(249, 66, 57, .55); }
  .hm-btn-sec:hover { border-color: var(--g900); }
  .hm-btn-ghost:hover { background: var(--pri-soft); }
  .hm-btn-inv:hover { background: var(--pri-soft); }
  .hm-btn-onpri:hover { background: #fff; color: var(--pri); border-color: #fff; }
  .hm-btn:hover .icon { transform: translateX(3px); }
  .hm-nav-a:hover { color: var(--g900); background: var(--g50); }
  .hm-nav-apply:hover { color: #fff; background: var(--pri); }
  .hm-shead-link:hover { color: var(--pri); background: var(--pri-soft); }
  .hm-shead-link:hover .icon { transform: translateX(3px); }
  .hm-shead-link .icon { transition: transform .2s var(--ease); }


  .hm-hov:hover { transform: translateY(-6px); border-color: var(--pri-line); box-shadow: var(--sh-hov); }
  .hm-hov:hover::after { transform: scaleX(1); }
  .hm-hov:hover .hm-ic { transform: rotate(-8deg) scale(1.08); }

  .hm-tc:hover { transform: translateY(-6px); }
  .hm-tc:hover .hm-tc-frame { box-shadow: 0 28px 48px -24px rgba(150, 30, 20, .5); }
  .hm-tc:hover .hm-tc-cut img { transform: translateX(-50%) scale(1.04); }
  .hm-tc:hover .hm-tc-sym { transform: translate(-3%, -4%) scale(1.05); }
  .hm-tc:hover .hm-tc-tag { background: var(--pri); border-color: var(--pri); color: #fff; }
  .hm-tc:hover h3 { color: var(--pri); }
  .hm-sns:hover { border-color: var(--g400); background: #fff; }
  .hm-sns-youtube:hover { border-color: #ff0000; }
  .hm-tc-links a:hover { border-color: var(--g900); color: var(--g900); }
  .hm-tc-links .hm-tc-login:hover { border-color: var(--pri); background: var(--pri); color: #fff; }
  .hm-join:hover { transform: translateY(-3px); box-shadow: var(--sh-hov); }
  .hm-join:hover .hm-join-ic { transform: rotate(90deg); }

  .hm-tab:hover:not(.on) { background: #fff; box-shadow: var(--sh-sm); }
  .hm-tab:hover:not(.on) .hm-tab-ic { border-color: var(--pri); color: var(--pri); }
  .hm-atab:hover:not(.on) { border-color: var(--g900); color: var(--g900); }
  .hm-faq summary:hover { color: var(--pri); }
  .hm-faq summary:hover .icon { color: var(--pri); }
  .hm-foot-col a:hover, .hm-foot-a:hover, .hm-foot-apply:hover { color: var(--pri); }
  .hm-top-link:hover { color: var(--pri); }
  .hm-student-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
    a  .hm-foot-info a:hover, .hm-foot-chk:hover { color: var(--pri); }
  .hm-foot-chk:hover { border-color: var(--pri); }
  .hm-top.scrolled .hm-nav-a:hover { background: rgba(0, 0, 0, .05); }
  .hm-top.scrolled .hm-nav-apply:hover { color: #fff; background: var(--pri); }
  .hm-top.scrolled .hm-btn-ghost:hover { background: rgba(0, 0, 0, .05); }
  .hm-answer-go:hover { background: var(--pri-dark); }
  .hm-hov:hover .hm-pillar-no { color: var(--pri-soft); }
  .hm-loop-i:hover em { color: var(--pri); }
}
/* 휴대폰: 카드는 누를 때 색이 바뀌지 않는다 (아이콘은 처음부터 여러 색). 링크 카드만 살짝 눌리는 느낌 */
@media (hover: none) {
  .hm-tc:active, .hm-join:active { transform: scale(.98); }
}

/* 나타나기 — 화면에 들어오면 아래에서 올라오며, 같은 줄 카드는 차례로 (--i) */
.hm-reveal { opacity: 0; }
.hm-reveal.in { opacity: 1; animation: hm-up .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.hm-reveal.now { animation: none; }
@keyframes hm-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- 강사 입점 문의 팝업 ---------- */
html.hm-noscroll { overflow: hidden; }
.hm-mbg { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: hm-fade .2s ease; }
.hm-modal { position: relative; width: min(580px, 100%); margin: auto; border-radius: 24px; background: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); animation: hm-pop .35s var(--ease); }
@keyframes hm-fade { from { opacity: 0; } }
@keyframes hm-pop { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.hm-modal-x { position: absolute; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--g500); transition: background-color .15s ease, color .15s ease, transform .3s var(--ease); }
.hm-modal-x:hover { background: var(--g100); color: var(--g900); transform: rotate(90deg); }
.hm-modal-in { padding: 40px 40px 36px; }
.hm-modal-head .hm-lock { --lh: 28px; }
.hm-modal-head h2 { margin-top: 24px !important; font-size: 24px; font-weight: 700; letter-spacing: 0; color: var(--g900); }
.hm-modal-head p { margin-top: 10px !important; font-size: 15px; line-height: 1.6; color: var(--g500); }
.hm-form { display: grid; gap: 18px; margin-top: 28px; }
.hm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hm-fld label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--g800); }
.hm-fld label em { font-style: normal; color: var(--pri); }
.hm-fld label small { font-size: 12px; font-weight: 400; color: var(--g400); }
.hm-in { display: block; width: 100%; height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--g200); background: #fff; font-size: 15px; color: var(--g900); transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
textarea.hm-in { height: auto; min-height: 76px; padding: 13px 16px; line-height: 1.6; resize: vertical; }
.hm-in::placeholder { color: var(--g400); }
.hm-in:hover { border-color: var(--g300); }
.hm-in:focus { outline: none; border-color: var(--pri); box-shadow: var(--ring); }
.hm-agree { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--g50); border: 1px solid var(--g100); cursor: pointer; }
.hm-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pri); cursor: pointer; }
.hm-agree span { font-size: 14px; font-weight: 600; color: var(--g800); line-height: 1.5; }
.hm-agree em { font-style: normal; color: var(--pri); }
.hm-agree small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--g500); }
.hm-form-err { font-size: 14px; font-weight: 600; color: var(--pri-dark); }
.hm-form-err:empty { display: none; }
.hm-btn.is-busy { opacity: .7; pointer-events: none; }
.hm-btn.is-busy .icon { animation: hm-send .7s ease-in-out infinite alternate; }
@keyframes hm-send { to { transform: translate(4px, -4px); } }
.hm-done { display: grid; justify-items: center; padding: 28px 0 8px; text-align: center; }
.hm-done-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pri); color: #fff; box-shadow: 0 12px 28px -8px rgba(249, 66, 57, .55); animation: hm-pop-in .5s var(--ease); }
.hm-mbg .hm-done-ic .icon { width: 34px; height: 34px; stroke-width: 2.6; }
@keyframes hm-pop-in { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
.hm-done h2 { margin-top: 24px !important; font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--g900); }
.hm-done p { margin: 12px 0 32px !important; font-size: 15px; line-height: 1.6; color: var(--g500); }
.hm-done .hm-btn { min-width: 180px; }

@media (prefers-reduced-motion: reduce) {
  .hm-reveal, .hm-reveal.in { opacity: 1; animation: none; }
  .hm-cmp-strike { transition: none; background-size: 100% 2px; }
  .hm-cmp-row.in .hm-cmp-ok, .hm-cmp-row.in .hm-cmp-new { animation: none; }
  .hm-chip, .hm-dot, .hm-mbg, .hm-modal, .hm-done-ic { animation: none; }
  .hm-btn, .hm-hov, .hm-tc, .hm-join, .hm-ic, .hm-tc-cut img, .hm-tc-sym, .hm-join-ic { transition: none; }
  .hm-hov:hover, .hm-tc:hover, .hm-join:hover,   .hm-top, .hm-top-prog { transition: none; }
  .hm-hov:hover .hm-ic, .hm-join:hover .hm-join-ic, .hm-tc:hover .hm-tc-sym { transform: none; }
  .hm-tc:hover .hm-tc-cut img { transform: translateX(-50%); }
}

/* 태블릿 */
@media (max-width: 1080px) {
  .hm-wrap { width: calc(100% - 64px); }
  .hm-h1 { font-size: 44px; }
  .hm-nav { display: none; }
  .hm-hero-in { grid-template-columns: 1fr; gap: 40px; padding: 72px 0 56px; }
  .hm-hero-art { height: auto; max-width: 720px; width: 100%; margin: 0 auto; padding: 40px 0 32px; }
  .hm-hero-art::before { inset: 0 0 0 10%; }
  .hm-hero-browser { position: relative; top: auto; left: auto; width: 86%; margin-left: auto; margin-right: 4%; }
  .hm-hero-phone-wrap { width: 30%; min-width: 150px; bottom: 12px; }
  .hm-chip-a { top: 8px; left: 30%; }
  .hm-chip-b { right: 0; bottom: 20%; }
  .hm-chip-c { left: 36%; bottom: 8px; }
  .hm-sec { padding: 60px 0; }
  .hm-tcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-pillars { grid-template-columns: 1fr; gap: 16px; }
  .hm-show { gap: 40px; }
  .hm-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hm-frow, .hm-frow.rev { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .hm-frow.rev .hm-frow-copy { order: 0; }
  .hm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-scale { grid-column: 1 / -1; }
  .hm-login-demo { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .hm-life-in { grid-template-columns: 1fr; gap: 40px; }
  }

/* 휴대폰 — 좌우 여백 20px */
@media (max-width: 720px) {
  .hm-wrap { width: calc(100% - 40px); }
  .hm-top-in { gap: 10px; height: 56px; }
  .hm-top .hm-lock { --lh: 26px; }
  .hm-top-r .hm-btn-ghost { padding: 0 10px; }
  .hm-hero-in { padding: 48px 0 32px; gap: 24px; }
  .hm-h1 { font-size: clamp(28px, 8.4vw, 40px); line-height: 1.3; }
  .hm-lead { font-size: 15px; }
  .hm-cta { margin-top: 32px; }
  .hm-cta .hm-btn-lg { flex: 1 1 100%; }
  .hm-hero-art { padding: 32px 0 15px; }
  .hm-hero-art::before { inset: 0 -20px 0 15%; border-radius: 16px 0 0 16px; }
  .hm-hero-browser { width: 84%; margin-right: 0; }
  .hm-hero-phone-wrap { width: 38%; min-width: 0; bottom: 6px; }
  .hm-phone { border-radius: 26px; padding: 6px; }
  .hm-phone img, .hm-phone video, .hm-phone .hm-vid-anim { border-radius: 21px; }
  .hm-phone .hm-vid-btn { right: 12px; bottom: 12px; width: 26px; height: 26px; }
  .hm-chip { padding: 8px 10px 8px 8px; gap: 8px; border-radius: 12px; }
  .hm-chip b { font-size: 12px; }
  .hm-chip small { font-size: 10px; }
  .hm .hm-chip > .icon { width: 26px; height: 26px; padding: 5px; }
  .hm-chip-a { left: auto; right: 0; top: 0; }
  .hm-chip-b { bottom: 24%; right: 0; padding: 10px 12px; }
  .hm-chip-b b { font-size: 18px; }
  .hm-chip-bar { width: 92px; }
  .hm-chip-c { display: none; }
  .hm-sec { padding: 52px 0; }
  .hm-h2 { font-size: 24px; line-height: 1.35; }
  .hm-h2-xl { font-size: 30px; }
  .hm-sub { font-size: 15px; }
  .hm-shead { margin-bottom: 32px; padding-bottom: 20px; }
  .hm-shead .hm-h2 { gap: 10px; }
  .hm-shead-ic { width: 34px; height: 34px; border-radius: 10px; }
  .hm .hm-shead-ic .icon { width: 19px; height: 19px; }
  .hm-shead .hm-sub { padding-left: 0; margin-top: 14px !important; }
  .hm-shead-link { font-size: 14px; padding: 0 2px 0 10px; }
  .hm-pillar { padding: 28px 24px 24px; }
  .hm-pillar h3 { margin-top: 20px !important; font-size: 20px; }
  .hm-ic { width: 44px; height: 44px; border-radius: 12px; }
  .hm .hm-ic .icon { width: 22px; height: 22px; }
  /* 수강생: 탭 · 휴대폰 화면 · 설명 · 카드 사이를 넉넉하게 */
  .hm-show { grid-template-columns: 1fr; gap: 24px; }
  .hm-show-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hm-show-tabs::-webkit-scrollbar { display: none; }
  .hm-tab { flex: none; width: auto; align-items: center; gap: 6px; height: 42px; padding: 0 16px 0 5px; border-radius: 50px; border: 1px solid var(--g200); background: #fff; scroll-snap-align: start; }
  .hm-tab.on { border-color: var(--pri); }
  .hm-tab-ic { width: 32px; height: 32px; border: 0; background: var(--g100); }
  .hm-tab-ic .icon { width: 16px; height: 16px; }
  .hm-tab-t b { padding: 0; font-size: 14px; }
  .hm-tab.on .hm-tab-t small { display: none; }
  .hm-show-art { position: relative; top: auto; padding: 40px 24px 32px; }
  .hm-show-phone { width: min(240px, 72%); }
  .hm-show-cap { position: relative; display: grid; gap: 8px; width: 100%; margin-top: 32px !important; padding-top: 24px; border-top: 1px solid var(--g200); text-align: center; }
  .hm-show-cap b { font-size: 17px; font-weight: 700; }
  .hm-show-cap span { font-size: 14px; line-height: 1.6; color: var(--g500); }
  .hm-more { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; gap: 12px; }
  .hm-more-i { grid-template-columns: 1fr; justify-items: start; row-gap: 4px; padding: 20px 18px; }
  .hm-more-i .hm-ic { grid-row: auto; margin-bottom: 10px; }
  .hm-more-i b { font-size: 15px; }
  .hm-more-i > span:last-child { font-size: 13px; }
  .hm-atabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 6px; scrollbar-width: none; }
  .hm-atabs::-webkit-scrollbar { display: none; }
  .hm-atab { flex: none; height: 38px; padding: 0 16px; font-size: 14px; }
  .hm-ashot { padding: 12px; border-radius: 16px; }
  .hm-browser { border-radius: 8px; }
  .hm-browser-bar { height: 20px; padding: 0 8px; gap: 4px; }
  .hm-browser-bar i { width: 6px; height: 6px; }
  .hm-browser-bar span { display: none; }
  .hm-feats { grid-template-columns: 1fr; margin-top: 32px; gap: 12px; }
  .hm-feat { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px; }
  .hm-feat .hm-ic { grid-row: span 2; }
  .hm-feat h3 { margin-top: 0 !important; align-self: end; }
  .hm-feat p { margin-top: 4px !important; }
  .hm-steps { grid-template-columns: 1fr; gap: 12px; }
  .hm-pains { grid-template-columns: 1fr; gap: 12px; }
  .hm-frows { gap: 16px; }
  .hm-frow, .hm-frow.rev { gap: 24px; padding: 28px 20px 24px; border-radius: 20px; }
  .hm-frow h3 { font-size: 24px; }
  .hm-frow-lead { margin-bottom: 20px !important; font-size: 15px; }
  .hm-frow-phone { width: min(240px, 72%); }
  .hm-plans { grid-template-columns: 1fr; gap: 12px; }
  .hm-plan, .hm-scale { padding: 26px 20px; }
    .hm-top-link, .hm-hide-m { display: none; }
  .hm-top-r { gap: 6px; }
  .hm-top-r .hm-btn-sm { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .hm-student-link { font-size: 13px; }
  .hm-step { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; padding: 20px; }
  .hm-step-no { grid-row: span 2; align-self: start; }
  .hm-step b { margin-top: 0; font-size: 17px; }
  .hm-step p { margin-top: 4px !important; }
  /* 강사진: 옆으로 넘겨 보기 (다음 카드가 살짝 보이게) */
  .hm-tcs { display: flex; gap: 14px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hm-tcs::-webkit-scrollbar { display: none; }
  .hm-tc { flex: 0 0 76%; scroll-snap-align: start; scroll-margin-left: 20px; }
  .hm-tc-body h3 { font-size: 20px; }
  .hm-join { flex-wrap: wrap; gap: 14px 16px; margin-top: 32px; padding: 20px; }
  .hm-join-ic { width: 44px; height: 44px; }
  .hm-join-t { flex: 1 1 calc(100% - 60px); }
  .hm-join-t b { font-size: 16px; }
  .hm-join-t p { font-size: 14px; }
  .hm-join .hm-btn { flex: 1 1 100%; }
  .hm-pain { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .hm-pain .hm-ic { grid-row: span 2; }
  .hm-pain h3 { margin-top: 0 !important; align-self: end; font-size: 17px; }
  .hm-pain p { margin-top: 4px !important; font-size: 14px; }
  .hm-answer { flex-wrap: wrap; gap: 14px; padding: 22px 20px; }
  .hm-answer .hm-sym { --lh: 32px; }
  .hm-answer p { flex: 1 1 calc(100% - 50px); font-size: 18px; }
  .hm-answer-go { margin-left: 46px; }
  .hm-pillar-no { font-size: 24px; }
  .hm-login-demo { padding: 24px 20px; margin-top: 16px; }
  .hm-ld-copy h3 { font-size: 20px; }
  .hm-ld-copy p { margin-bottom: 20px !important; }
  .hm-ld-copy .hm-btn { width: 100%; }
  .hm-life-copy p { font-size: 15px; }
  .hm-loop::before { left: 39px; }
  .hm-loop-i { padding: 16px 18px; gap: 14px; }
  .hm-loop-t b { font-size: 15px; }
  .hm-loop-t small { font-size: 13px; }
  .hm-hero-pts { gap: 8px 14px; }
  .hm-hero-pts li { font-size: 13px; }
  .hm-faq summary { font-size: 15px; padding: 20px 2px; gap: 10px; }
  .hm-faq summary > span { width: 28px; height: 28px; }
  .hm-faq p { padding: 0 2px 20px 40px; font-size: 14px; }
  .hm-faq-cta { padding: 0 2px 20px 40px; }
  .hm-final-in { padding: 72px 0; }
  .hm-final .hm-h2 { font-size: 28px; }
  .hm-final p { font-size: 15px; }
  .hm-foot-top { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 32px; }
  .hm-foot-cols { gap: 48px; }
    .hm-foot-info { display: grid; gap: 6px; }
  .hm-foot-info div { padding: 0; margin: 0; border: 0; }
  .hm-foot-biz { padding: 24px 0 36px; }
  /* 입점 문의: 아래에서 올라오는 시트 */
  .hm-mbg { place-items: end stretch; padding: 0; }
  .hm-modal { width: 100%; margin: auto 0 0; max-height: 94dvh; overflow-y: auto; border-radius: 24px 24px 0 0; animation-name: hm-sheet; }
  @keyframes hm-sheet { from { transform: translateY(40px); opacity: 0; } }
  .hm-modal-x { top: 12px; right: 12px; }
  .hm-modal-in { padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); }
  .hm-modal-head h2 { margin-top: 20px !important; font-size: 20px; }
  .hm-modal-head p { font-size: 14px; }
  .hm-form { gap: 16px; margin-top: 24px; }
  .hm-grid2 { grid-template-columns: 1fr; gap: 16px; }
  .hm-in { height: 48px; font-size: 16px; }
}
@media (max-width: 360px) {
  .hm-top-r .hm-btn-ghost { display: none; }
}


/* ===== PC에서 꽉 차게: 함께하는 강사 띠 · 운영 흐름 · 세부 기능 · 비교 · 강사센터 메뉴 · 기수 운영 · FAQ 2단 · 마지막 안내 · 바닥 ===== */

.hm-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: f; }
.hm-flow-i { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--g200); }
.hm-flow-i::before { content: ""; position: absolute; top: 40px; right: -11px; width: 10px; height: 10px; border-top: 2px solid var(--g300); border-right: 2px solid var(--g300); transform: rotate(45deg); background: transparent; }
.hm-flow-i:last-child::before, .hm-flow-i:nth-child(4n)::before { display: none; }
.hm-flow-no { position: absolute; top: 14px; right: 16px; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--tone, var(--pri)); opacity: .9; }
.hm-flow-i b { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--g900); }
.hm-flow-i em { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--pri-soft); font-size: 12px; font-style: normal; font-weight: 600; color: var(--pri-dark); }
.hm-flow-i p { font-size: 13px; line-height: 1.55; color: var(--g500); }

.hm-frow-more { list-style: none; margin: 28px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; border-top: 1px solid var(--g200); }
.hm-frow-more li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.hm-frow-more b { display: block; font-size: 14px; font-weight: 700; color: var(--g900); }
.hm-frow-more small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--g500); }
.hm-frow { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; }
.hm-frow.rev { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }

.hm-cmp { border-radius: 20px; background: #fff; border: 1px solid var(--g200); overflow: hidden; }
.hm-cmp-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--g100); }
.hm-cmp-row > * { padding: 18px 24px; font-size: 15px; line-height: 1.5; }
.hm-cmp-row > b { font-weight: 700; color: var(--g900); }
.hm-cmp-head { border-top: 0; background: var(--g10); }
.hm-cmp-head > span { font-size: 14px; font-weight: 700; color: var(--g700); }
.hm-cmp-head small { margin-left: 4px; font-weight: 400; color: var(--g400); }
.hm-cmp-head > span:last-child { background: var(--pri-soft); }
.hm-cmp-old { display: flex; gap: 8px; align-items: flex-start; color: var(--g400); }
.hm-cmp-new { display: flex; gap: 10px; align-items: flex-start; height: 100%; color: var(--g900); font-weight: 700; background: var(--pri-soft); }
/* 지금 방식: 빨간 줄이 왼쪽에서 오른쪽으로 그어진다 (여러 줄이면 줄을 따라 이어서) */
.hm-cmp-strike { text-decoration: none; color: inherit; background: linear-gradient(var(--pri), var(--pri)) no-repeat 0 62% / 0% 2px; transition: background-size .75s var(--ease) .25s, color .4s ease .25s; }
.hm-cmp-row.in .hm-cmp-strike, .hm-cmp-row.now .hm-cmp-strike { background-size: 100% 2px; color: var(--g400); }
/* 두고: 빨간 동그라미 체크가 톡 튀어나오고, 칸이 한 번 밝게 빛난다 */
.hm-cmp-ok { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; background: var(--pri); color: #fff; }
.hm .hm-cmp-ok .icon { width: 13px; height: 13px; stroke-width: 3; }
.hm-cmp-row.in .hm-cmp-ok { animation: hm-pop-in .45s var(--ease) .85s backwards; }
.hm-cmp-row.in .hm-cmp-new { animation: hm-cmp-glow 1.4s ease .85s backwards; }
@keyframes hm-cmp-glow { 0% { background-color: var(--pri-200); } 100% { background-color: var(--pri-soft); } }
.hm-lock-xs { --lh: 22px; }

.hm-menus { margin-top: 24px; padding: 28px 32px; border-radius: 20px; background: #fff; border: 1px solid var(--g200); }
.hm-menus-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 20px; }
.hm-menus-h b { font-size: 18px; font-weight: 700; color: var(--g900); }
.hm-menus-h span { font-size: 14px; color: var(--g500); }
.hm-menus-g { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; }
.hm-menus-col em { display: block; margin-bottom: 10px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--pri); }
.hm-menus-col em small { margin-left: 2px; font-weight: 600; color: var(--g400); }
.hm-menus-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hm-menus-col li { padding: 6px 12px; border-radius: 50px; background: var(--g50); font-size: 13px; font-weight: 600; color: var(--g700); }

.hm-cohort { margin-top: 24px; padding: 28px 32px; border-radius: 20px; background: linear-gradient(160deg, #fffcfc 0%, #ffffff 70%); border: 1px solid #f3eeed; }
.hm-cohort-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 20px; }
.hm-cohort-h b { font-size: 18px; font-weight: 700; color: var(--g900); }
.hm-cohort-h span { font-size: 14px; color: var(--g500); }
.hm-cohort-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-cohort-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--g100); }
.hm-cohort-steps em { display: block; font-size: 11px; font-style: normal; font-weight: 700; color: var(--pri); }
.hm-cohort-steps b { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--g900); }
.hm-cohort-steps small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--g500); }

.hm-faq-in { max-width: none; }
.hm-faqs { columns: 2; column-gap: 56px; }
.hm-faq { break-inside: avoid; }

.hm-final { text-align: left; }
.hm-final-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 88px 0; }
.hm-final-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px !important; padding: 6px 12px; border-radius: 50px; background: #fff; border: 1px solid var(--pri-200); font-size: 13px; font-weight: 600; color: var(--pri-dark); }
.hm-final .hm-cta { margin-top: 32px; }
.hm-final-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hm-final-pts li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #f2eaea; box-shadow: 0 2px 16px rgba(0, 0, 0, .04); }
.hm-final-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg, var(--pri-soft)); color: var(--tone, var(--pri)); }
.hm-final-pts b { display: block; font-size: 17px; font-weight: 700; color: var(--g900); }
.hm-final-pts small { display: block; margin-top: 2px; font-size: 14px; color: var(--g500); }

.hm-foot-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hm-foot-cs { display: grid; align-content: start; gap: 6px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(160deg, #fffcfc 0%, #ffffff 70%); border: 1px solid #f3eeed; }
.hm-foot-cs b { font-size: 14px; font-weight: 700; color: var(--g900); }
.hm-foot-cs p { font-size: 13px; line-height: 1.5; color: var(--g500); }
.hm-foot-cs a { color: var(--g700); text-decoration: none; }
.hm-foot-tel { margin-top: 2px !important; font-size: 24px !important; font-weight: 800; color: var(--g900) !important; }
.hm-foot-tel a { color: var(--g900) !important; }
.hm-foot-tel-sm { font-size: 16px !important; font-weight: 700; }
.hm-foot-cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--g200); font-size: 14px; font-weight: 600; color: var(--g800); }
.hm-foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.hm-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hm-foot-legal a, .hm-foot-legal button, .hm-foot-col button[data-hm-legal] { padding: 0; border: 0; background: none; font-size: 13px; color: var(--g600); text-decoration: none; text-align: left; cursor: pointer; }
.hm-foot-col button[data-hm-legal] { font-size: 14px; }
.hm-foot-legal strong, .hm-foot-col button strong { font-weight: 700; color: var(--g900); }
.hm-foot-bottom .hm-foot-copy { margin: 0; }
.hm-modal-doc .hm-modal-head { padding-right: 32px; }
.hm-doc { margin: 16px 0 24px; max-height: 56vh; overflow: auto; font-size: 14px; line-height: 1.7; color: var(--g600); }
.hm-doc .legal-doc { max-height: none; overflow: visible; padding-right: 4px; }

@media (hover: hover) and (pointer: fine) {
  .hm-foot-cs-btn:hover { border-color: var(--pri); color: var(--pri); }
  .hm-foot-legal a:hover, .hm-foot-legal button:hover, .hm-foot-col button[data-hm-legal]:hover { color: var(--pri); }
}
@media (max-width: 1180px) {
  .hm-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-flow-i:nth-child(4)::before { display: none; }
  .hm-foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-foot-cols { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1080px) {
  .hm-shead { grid-template-columns: minmax(0, 1fr) auto; }
  .hm-shead .hm-sub { grid-column: 1 / -1; grid-row: 2; }
  .hm-frow, .hm-frow.rev { grid-template-columns: 1fr; }
  .hm-menus-g { grid-template-columns: 1fr; gap: 16px; }
  .hm-cohort-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-final-in { grid-template-columns: 1fr; gap: 32px; }
  .hm-cmp-row { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hm-shead, .hm-shead.no-sub { grid-template-columns: 1fr; gap: 12px; }
  .hm-shead .hm-sub { grid-row: auto; }
  .hm-shead-r { justify-self: start; }
  .hm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hm-flow-i { padding: 16px 14px; }
  .hm-flow-i::before { display: none; }
  .hm-flow-i b { font-size: 16px; }
  .hm-frow-more { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; padding-top: 20px; }
  .hm-cmp-row { grid-template-columns: 1fr; }
  .hm-cmp-head { display: none; }
  .hm-cmp-row > * { padding: 10px 16px; font-size: 14px; }
  .hm-cmp-row > b { padding-top: 16px; padding-bottom: 4px; }
  .hm-cmp-old::before { content: "지금"; flex: none; margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--g400); }
  .hm-cmp-new { padding-bottom: 14px; }
  .hm-cmp-new::before { content: "두고"; flex: none; margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--pri); }
  .hm-menus, .hm-cohort { padding: 20px 18px; }
  .hm-cohort-steps { grid-template-columns: 1fr; }
  .hm-faqs { columns: 1; }
  .hm-final-in { padding: 64px 0; }
  .hm-final-pts li { padding: 14px 16px; }
  .hm-foot-top { grid-template-columns: 1fr; }
  .hm-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row: auto; gap: 24px; }
  .hm-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- 수강생 첫 로그인 화면 (강사 고르기 전, app.js renderPicker) — 흰 바탕 + 여기어때 레드(YDS) ---------- */
.login-dc { --dc-pri: #f94239; --dc-pri-dark: #ea2013; --dc-pri-soft: #fff5f5; --dc-ink: #222222; --dc-g50: #fafafa; --dc-g100: #f5f5f5; --dc-g200: #e6e6e6; --dc-g400: #999999; --dc-g500: #707070; --dc-g600: #474747;
  background: #fff; color: var(--dc-ink); font-family: var(--font); font-feature-settings: "calt"; word-break: keep-all; }
.dc-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px 0; border-right: 1px solid #f3eeed; overflow: hidden;
  /* 흰 바탕에 아주 옅은 빨강 기운만 */
  background: radial-gradient(640px 440px at 92% 0%, rgba(249, 66, 57, .03), transparent 70%), linear-gradient(180deg, #fffcfc 0%, #ffffff 100%); }
.dc-brand::before { content: ""; position: absolute; right: -90px; bottom: -70px; width: 440px; height: 460px; background: var(--dc-pri); opacity: .04; pointer-events: none;
  -webkit-mask: url(assets/brand/doogo-symbol.png) center / contain no-repeat; mask: url(assets/brand/doogo-symbol.png) center / contain no-repeat; }
.dc-brand > * { position: relative; }
.dc-logo { align-self: flex-start; border-radius: 8px; }
.dc-logo .hm-lock { --lh: 36px; }
.dc-hero { max-width: 520px; padding: 48px 0; }
.dc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 50px; background: var(--dc-pri-soft); color: var(--dc-pri-dark); font-size: 13px; font-weight: 600; }
.dc-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--dc-pri); }
.dc-headline { margin: 20px 0 0; font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1.3; letter-spacing: 0; color: var(--dc-ink); }
.dc-headline span { color: var(--dc-pri); }
.dc-sub { margin: 20px 0 0; max-width: 30em; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--dc-g500); }
.dc-pts { list-style: none; display: grid; gap: 12px; margin: 32px 0 0; padding: 0; }
.dc-pts li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--dc-g600, #474747); }
.dc-pts .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--tone-bg, #fff); border: 0; color: var(--tone, var(--dc-pri)); box-sizing: border-box; stroke-width: 2; }
.dc-foot { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 24px; border-top: 1px solid var(--dc-g200); font-size: 13px; color: var(--dc-g400); }
.dc-foot a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--dc-g600); text-decoration: none; }
.dc-panel { background: #fff; }
.login-dc .login-topright { color: var(--dc-g600); }
.login-dc .login-home { color: var(--dc-g500); }
.dc-center { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; background: #ffedea; color: var(--dc-pri-dark); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease; }
.dc-card { padding: 40px 36px 32px; border: 1px solid var(--dc-g100); border-radius: 24px; background: #fff; box-shadow: 0 2px 16px rgba(0, 0, 0, .08); }
.dc-card-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.dc-card-logo .hm-lock { --lh: 30px; }
.login-dc .login-card h1 { margin: 0 0 8px; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 0; color: var(--dc-ink); }
.login-dc .login-card .lead { margin: 0 0 28px; text-align: center; font-size: 14px; color: var(--dc-g500); }
.login-dc .field-label { font-size: 15px; font-weight: 600; color: var(--dc-ink); }
.dc-ins-list { display: grid; gap: 10px; margin: 12px 0 10px; }
.dc-ins { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: 16px; border: 1px solid var(--dc-g200); background: #fff; text-align: left; transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.dc-ins:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 66, 57, .3); }
.dc-ins-av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--tone-bg, var(--dc-pri-soft)); color: var(--tone, var(--dc-pri-dark)); font-size: 18px; font-weight: 700; }
.dc-ins-av.has-photo { background: var(--dc-g100); }
.dc-ins-av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.5); transform-origin: 50% 34%; }
.dc-ins-t { flex: 1; min-width: 0; }
.dc-ins-t b { display: block; font-size: 16px; font-weight: 700; color: var(--dc-ink); }
.dc-ins-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--dc-g500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ins > .icon { color: var(--dc-g400); transition: color .2s ease, transform .2s ease; }
.login-dc .tiny { color: var(--dc-g400); }
.dc-partner { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--dc-g50); border: 1px solid var(--dc-g100); color: var(--dc-g600); font-size: 14px; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.dc-partner > .icon:first-child { color: var(--dc-pri); }
.dc-partner span { flex: 1; min-width: 0; }
.dc-partner b { color: var(--dc-ink); font-weight: 700; margin-right: 4px; }
.login-dc .login-legal button { color: var(--dc-g400); }
@media (hover: hover) and (pointer: fine) {
  .dc-ins:hover { border-color: var(--dc-pri); box-shadow: 0 12px 26px -14px rgba(249, 66, 57, .45); transform: translateY(-2px); }
  .dc-ins:hover > .icon { color: var(--dc-pri); transform: translateX(3px); }
  .dc-center:hover { background: var(--dc-pri); color: #fff; }
  .login-dc .login-home:hover, .dc-foot a:hover { color: var(--dc-pri); }
  .dc-partner:hover { border-color: var(--dc-pri); background: #fff; }
  .login-dc .login-legal button:hover { color: var(--dc-ink); }
}
@media (max-width: 1023px) {
  .dc-brand { padding: 20px 20px 0; border-right: 0; border-bottom: 1px solid var(--dc-g100); }
  .dc-brand::before { width: 260px; height: 272px; right: -60px; bottom: -40px; }
  .dc-logo .hm-lock { --lh: 28px; }
  .dc-hero { padding: 28px 0 32px; }
  .dc-eyebrow { font-size: 12px; }
  .dc-headline { margin-top: 16px; font-size: 30px; line-height: 1.3; }
  .dc-sub { margin-top: 14px; font-size: 15px; }
  .dc-pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .dc-pts li { gap: 6px; padding: 6px 12px 6px 6px; border-radius: 50px; background: #fff; border: 1px solid var(--dc-g200); font-size: 13px; }
  .dc-pts .icon { width: 24px; height: 24px; padding: 4px; border: 0; background: var(--tone-bg, var(--dc-pri-soft)); border-radius: 50%; }
  .dc-foot { display: none; }
  .dc-card { padding: 28px 20px 22px; }
  .dc-card-logo { display: none; }
}

/* ---------- 제목 자간: 문대표 수강생 화면처럼 굵은 제목은 좁게 (본문은 0) ---------- */
.hm-h1, .dc-headline { letter-spacing: -0.04em; }
.hm-h2, .hm-h2-xl, .hm-final .hm-h2, .hm-frow h3, .hm-plan-price, .hm-pillar-no, .hm-chip-b b, .hm-foot-tel, .login-dc .login-card h1 { letter-spacing: -0.03em; }
.hm-tc-body h3, .hm-join-t b, .hm-pain h3, .hm-answer p, .hm-scale-t, .hm-pillar h3, .hm-feat h3, .hm-step b, .hm-ld-copy h3, .hm-modal-head h2, .hm-done h2,
.hm-show-cap b, .hm-flow-i b, .hm-menus-h b, .hm-cohort-h b, .hm-final-pts b, .hm-cmp th, .hm-faq summary, .dc-ins-t b { letter-spacing: -0.02em; }

/* 한 줄 화면(태블릿 · 휴대폰): 기능 카드는 설명 → 실제 화면 영상 → 세부 기능 6개 순서 (영상이 세부 목록 아래로 밀리지 않게) */
@media (max-width: 1080px) {
  .hm-frow, .hm-frow.rev { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hm-frow-copy { display: contents; }
  .hm-frow-art { order: 1; margin-top: 28px; }
  .hm-frow-more { order: 2; }
}

/* ---------- 아이콘 여러 색 — 파스텔 바탕 + 진한 아이콘, 카드 순서대로 돌아가며 (빨강 · 파랑 · 초록 · 보라 · 주황 · 분홍) ---------- */
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+1) { --tone: #f94239; --tone-bg: #ffedea; }
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+2) { --tone: #1f6fe0; --tone-bg: #e5f0ff; }
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+3) { --tone: #0c9b7c; --tone-bg: #e0f5ef; }
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+4) { --tone: #6c55f0; --tone-bg: #eeebff; }
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+5) { --tone: #e8710a; --tone-bg: #fff0e1; }
:is(.hm-pains, .hm-feats, .hm-more, .hm-flow, .hm-cohort-steps, .hm-loop, .hm-final-pts, .hm-frow-more, .hm-steps, .dc-pts, .dc-ins-list) > :nth-child(6n+6) { --tone: #d6336c; --tone-bg: #ffe8f0; }
.hm .hm-frow-more .hm-ic-xs { color: var(--tone); }
.hm-steps .hm-step-no { background: var(--tone-bg, var(--pri-soft)); color: var(--tone, var(--pri-dark)); }
.hm-flow-i em { background: var(--tone-bg, var(--pri-soft)); color: var(--tone, var(--pri-dark)); }

/* ---------- 기능 3가지 — 휴대폰을 입체 무대 위에 ----------
   스크롤하면 천천히 돌아가고(--sp: 들어올 때 +1 → 가운데 0 → 나갈 때 -1), 마우스를 올리면 따라 기울어요(--mx · --my).
   휴대폰 뒤 아주 큰 입체 doogo 심볼(7겹) · 휴대폰 두께 · 빛 반사 · 바닥 그림자 · 앞에 떠 있는 알림 카드가 서로 다른 깊이에 있어 입체로 보여요.
   휴대폰(터치 화면)에서는 기기를 기울이면 따라 기울어요(권한을 묻지 않는 브라우저만) */
.hm-3d { --sp: 0; --mx: 0; --my: 0; --dir: 1; --ry: -18deg; --rx: 8deg; position: relative; z-index: 1; width: min(270px, 78%); perspective: 1300px; }
.hm-frow.rev .hm-3d { --dir: -1; }
.hm-3d-stage { position: relative; transform-style: preserve-3d; transform: translateY(calc(var(--sp) * 16px)) rotateY(calc(var(--dir) * (var(--ry) - var(--sp) * 12deg) + var(--mx) * 14deg)) rotateX(calc(var(--rx) + var(--sp) * 6deg - var(--my) * 10deg)); transition: transform .6s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.hm-3d .hm-frow-phone { width: 100%; transform-style: preserve-3d; background: linear-gradient(145deg, #2c2c33 0%, #111114 55%, #1e1e23 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.hm-3d .hm-frow-phone::before, .hm-3d .hm-frow-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.hm-3d .hm-frow-phone::before { background: linear-gradient(145deg, #5a5a64, #26262c); transform: translateZ(-7px); }
.hm-3d .hm-frow-phone::after { background: #0c0c0f; transform: translateZ(-14px); box-shadow: 0 50px 70px -30px rgba(30, 14, 20, .42), 0 20px 34px -18px rgba(30, 14, 20, .28); }
.hm-3d-sym { position: absolute; left: 50%; top: 50%; width: 172%; transform-style: preserve-3d; transform: translate(-52%, -60%) translateZ(-90px); pointer-events: none; }
.hm-3d-sym svg { display: block; width: 100%; height: auto; overflow: visible; fill: #c61d12; transform: translateZ(calc(var(--k) * -3px)); }
.hm-3d-sym svg + svg { position: absolute; left: 0; top: 0; }
.hm-3d-sym svg:first-child { fill: #9e140b; filter: drop-shadow(0 30px 34px rgba(170, 24, 12, .25)); }
.hm-3d-sym svg:last-child { fill: url(#hm-dsym-g); }
.hm-3d-glare { position: absolute; inset: 8px; border-radius: 29px; pointer-events: none; transform: translateZ(1px); background: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 60%); background-size: 300% 100%; background-position: calc(50% + var(--sp) * 40% - var(--mx) * 30%) 0; transition: background-position .6s cubic-bezier(.22, .8, .24, 1); }
.hm-3d-floor { position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -30px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 18, 24, .24), rgba(40, 18, 24, 0)); filter: blur(3px); transform: translateX(calc(var(--dir) * 12px - var(--mx) * 10px)) scaleX(calc(1 - var(--sp) * .08)); transition: transform .6s cubic-bezier(.22, .8, .24, 1); pointer-events: none; }
.hm-frow-art .hm-cap { margin-top: 40px !important; }
.hm-fchip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(17, 17, 17, .06); box-shadow: 0 22px 44px -18px rgba(30, 14, 24, .32), 0 6px 14px -6px rgba(30, 14, 24, .14); white-space: nowrap; pointer-events: none; transform: translateZ(80px); animation: hm-bob 6s ease-in-out infinite; }
.hm-fchip b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--g900); }
.hm-fchip small { display: block; font-size: 12px; font-weight: 400; color: var(--g500); }
.hm .hm-fchip > .icon { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50px; background: var(--pri-soft); color: var(--pri-dark); stroke-width: 2; box-sizing: border-box; }
.hm .hm-fchip > .icon.ok { background: var(--green-soft); color: var(--green); }
.hm-fchip.stat { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.hm-fchip.stat b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-fchip.stat .hm-chip-bar { width: 128px; }
.hm-fchip-a { top: 13%; left: -30%; }
.hm-fchip-b { bottom: 17%; right: -27%; transform: translateZ(120px); animation-delay: -3s; }
.hm-frow.rev .hm-fchip-a { left: auto; right: -30%; }
.hm-frow.rev .hm-fchip-b { right: auto; left: -27%; }
@keyframes hm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 720px) {
  .hm-3d { --ry: -14deg; --rx: 8deg; width: min(230px, 64%); }
  .hm-3d-sym { transform: translate(-52%, -60%) translateZ(-60px); }
  .hm-frow-no { font-size: 46px; }
  .hm-3d .hm-frow-phone::before { transform: translateZ(-4px); }
  .hm-3d .hm-frow-phone::after { transform: translateZ(-8px); }
  .hm-3d-glare { inset: 6px; border-radius: 21px; }
  .hm-3d-floor { bottom: -24px; height: 28px; }
  .hm-frow-art .hm-cap { margin-top: 32px !important; }
  .hm-fchip { gap: 8px; padding: 8px 10px 8px 8px; border-radius: 12px; transform: translateZ(50px); }
  .hm-fchip b { font-size: 12px; }
  .hm-fchip small { font-size: 10px; }
  .hm .hm-fchip > .icon { width: 26px; height: 26px; padding: 5px; }
  .hm-fchip.stat { gap: 6px; padding: 9px 11px; }
  .hm-fchip.stat b { font-size: 16px; }
  .hm-fchip.stat .hm-chip-bar { width: 88px; }
  .hm-fchip-a { top: 10%; left: -24%; }
  .hm-fchip-b { bottom: 14%; right: -22%; transform: translateZ(70px); }
  .hm-frow.rev .hm-fchip-a { right: -24%; }
  .hm-frow.rev .hm-fchip-b { left: -22%; }
}
/* 움직임 줄이기를 켠 기기에서도 이 입체 움직임은 천천히 그대로 (대표님 요청 — 크게 흔들리지 않는 느린 움직임만) */
@media (prefers-reduced-motion: reduce) {
  .hm .hm-fchip { animation: hm-bob 6s ease-in-out infinite !important; }
  .hm .hm-fchip-b { animation-delay: -3s !important; }
  .hm .hm-3d-stage, .hm .hm-3d-floor { transition: transform .6s cubic-bezier(.22, .8, .24, 1) !important; }
  .hm .hm-3d-glare { transition: background-position .6s cubic-bezier(.22, .8, .24, 1) !important; }
}