/* 나도스터디 공인중개사 — 첫 화면(홈)
   접두어 hm- 만 쓴다. 히어로와 맨 아래 "시험장 가는 길"은 만화 강의(scene-kit) 그림체 그대로 그린다.
   브랜드 티파니블루(--brand)는 팻말 끈·버튼 테두리 같은 포인트에만. 바탕은 하늘·풀·흙 색. */

/* 홈일 때만 본문 폭을 넓힌다 */
.view:has(> .hm) { max-width: 1120px; }
/* 히어로는 화면 폭 가득 — 스크롤바 폭만큼 가로로 넘치지 않게 */
html:has(.hm-hero), body:has(.hm-hero) { overflow-x: clip; }

.hm {
  --hm-orange: #ff7a18;
  --hm-card: var(--surface);
  --hm-r: 20px;
  --ink: #3a2f28;
  /* 그림 색 — 낮 */
  --sky-1: #bfe3fb; --sky-2: #eaf6ff;
  --hill-b: #a9dcb1; --hill-f: #8ed39c; --hill-l: #6fbf85;
  --soil: #c69b6d;
  --cloud-f: #fff; --cloud-s: #b9d3e6;
  --grass-ink: #24502f;
  --road: #dcb582; --road-e: #b88a55;
  --frame: #3a2f28;
  --tch-nm: #3a2f28;
  --tree-f: none;
  --sun-d: block; --moon-d: none; --star-d: none;
  display: flex; flex-direction: column; gap: 22px;
}
/* 그림 색 — 밤 (칠판·팻말은 그대로) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm {
    --sky-1: #0c1631; --sky-2: #1d2f5a;
    --hill-b: #26443a; --hill-f: #1e3a2d; --hill-l: #2f5a43;
    --soil: #4d3a2a;
    --cloud-f: #2a3a60; --cloud-s: #41547f;
    --grass-ink: #b5dcc0;
    --road: #5a4632; --road-e: #3f3124;
    --frame: #4a5566;
    --tch-nm: #e3ece6;
    --tree-f: brightness(.55) saturate(.8);
    --sun-d: none; --moon-d: block; --star-d: block;
  }
}
:root[data-theme="dark"] .hm {
  --sky-1: #0c1631; --sky-2: #1d2f5a;
  --hill-b: #26443a; --hill-f: #1e3a2d; --hill-l: #2f5a43;
  --soil: #4d3a2a;
  --cloud-f: #2a3a60; --cloud-s: #41547f;
  --grass-ink: #b5dcc0;
  --road: #5a4632; --road-e: #3f3124;
  --frame: #4a5566;
  --tch-nm: #e3ece6;
  --tree-f: brightness(.55) saturate(.8);
  --sun-d: none; --moon-d: block; --star-d: block;
}
.hm em { font-style: normal; }
.hm svg { flex: none; }

/* ---------- 공통 버튼 (AI 선생님 섹션) ---------- */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 800; font-size: 16px;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.hm-btn svg { width: 19px; height: 19px; }
.hm-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.hm-btn-main { background: var(--accent); color: #fff; }

/* ---------- 손그림 버튼: 나무 명패 · 분필 ---------- */
.hm-plate {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 20px; white-space: nowrap;
  font-weight: 800; font-size: 16.5px; color: #3b2412; letter-spacing: -0.01em;
  background:
    repeating-linear-gradient(177deg, rgba(120, 72, 30, .07) 0 2px, transparent 2px 8px),
    linear-gradient(#f2d5a6, #dcae72);
  border: 2.5px solid #3a2f28;
  border-radius: 9px 13px 10px 12px / 12px 9px 13px 10px;
  box-shadow: inset 0 0 0 3px #f8e6c6, inset 0 0 0 5.5px var(--brand), 0 4px 0 #3a2f28;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hm-plate svg { width: 18px; height: 18px; color: #128f90; }
.hm-plate:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #f8e6c6, inset 0 0 0 5.5px var(--brand), 0 6px 0 #3a2f28; }
.hm-plate:active { transform: translateY(2px); box-shadow: inset 0 0 0 3px #f8e6c6, inset 0 0 0 5.5px var(--brand), 0 2px 0 #3a2f28; }
.hm-plate.alt { background: #fffaf0; box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #3a2f28; }
.hm-plate.alt:hover { box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #3a2f28; }
.hm-plate.alt svg { color: #3b2412; }

.hm-chalk {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 30px 0 22px; margin-bottom: 3px; white-space: nowrap;
  font-weight: 800; font-size: 16px; color: #0c4748;
  background: linear-gradient(#effdfc, #c3efed 55%, #a3e2df);
  border: 2.5px solid #3a2f28; border-radius: 20px 5px 5px 20px;
  box-shadow: 0 3px 0 #3a2f28; transform: rotate(-2deg);
  transition: transform .18s ease;
}
.hm-chalk::after {
  content: ''; position: absolute; right: -3px; top: -2.5px; bottom: -2.5px; width: 13px;
  border: 2.5px solid #3a2f28; border-radius: 50%; background: #e2f8f7;
}
.hm-chalk span { position: relative; }
.hm-chalk:hover { transform: rotate(-2deg) translateY(-3px); }
.hm-plate:focus-visible, .hm-chalk:focus-visible, .hm-sign:focus-visible, .hm-post:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 4px;
}

/* ---------- 히어로: 그림책 무대 ---------- */
.hm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: -18px calc(50% - 50vw) 0;
  padding-top: 38px;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 72%);
}
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm-hero .scene .sc, .hm-road .scene .sc { opacity: 1; }
.hm-hero svg, .hm-road svg { display: block; }

/* 하늘 */
.hm-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hm-hero .hm-stars { position: absolute; left: 0; top: 0; width: 100%; height: 260px; display: var(--star-d); }
.hm-stars circle { fill: #fff6cf; animation: hmTw 3.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes hmTw { 50% { opacity: .3; } }
.hm-sun, .hm-moonw { position: absolute; top: 20px; right: max(3%, calc(50% - 640px)); width: 104px; }
.hm-sun { display: var(--sun-d); }
.hm-moonw { display: var(--moon-d); width: 84px; top: 28px; }
.hm-sun svg, .hm-moonw svg, .hm-cloud svg, .hm-tree svg { width: 100%; height: auto; }
.hm-moon { fill: #fdf1bf; stroke: #d6bd70; stroke-width: 2.5; }
.hm-crater { fill: #ecd88f; }
.hm-cloud { position: absolute; width: 132px; animation: hmFlow 70s ease-in-out infinite alternate; }
.hm-cloud.c1 { left: 5%; top: 44px; }
.hm-cloud.c2 { left: 36%; top: 6px; width: 96px; animation-duration: 90s; animation-delay: -30s; }
.hm-cloud.c3 { left: 76%; top: 132px; width: 112px; animation-duration: 80s; animation-delay: -55s; }
@keyframes hmFlow { from { transform: translateX(-5vw); } to { transform: translateX(7vw); } }
.hm-hero .scene .cloud path { fill: var(--cloud-f); stroke: var(--cloud-s); }

/* 무대: 선생님 · 칠판 · 달력 */
.hm-stage {
  position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 200px minmax(0, 640px) 132px; grid-template-areas: "tch board cal";
  justify-content: center; align-items: end; column-gap: 18px;
}
.hm-tch { grid-area: tch; position: relative; z-index: 3; margin: 0 -40px -30px 0; }
.hm-tch svg { width: 100%; height: auto; }
.hm-easel { grid-area: board; position: relative; }
.hm-cal { grid-area: cal; margin-bottom: -34px; }
.hm-cal svg { width: 100%; height: auto; }

/* 선생님 */
.hm-gls circle { fill: rgba(255, 255, 255, .18); stroke: #3a2f28; stroke-width: 2.2; }
.hm-gls path { stroke: #3a2f28; stroke-width: 2.4; }
.hm-arm-o { fill: none; stroke: #3a2f28; stroke-width: 12; stroke-linecap: round; }
.hm-arm { fill: none; stroke: #5b7cf0; stroke-width: 7; stroke-linecap: round; }
.hm-stick-o { stroke: #3a2f28; stroke-width: 7.5; stroke-linecap: round; }
.hm-stick { stroke: #c08a4c; stroke-width: 3.5; stroke-linecap: round; }
.hm-chalk-tip { fill: #fff; stroke: #3a2f28; stroke-width: 1.6; }
.hm-hand { fill: #ffe1c8; stroke: #3a2f28; stroke-width: 2.4; }
.hm-hero .scene .hm-tch-nm { fill: var(--tch-nm); font-size: 16px; font-weight: 700; }
.hm-nod { transform-box: fill-box; transform-origin: 50% 95%; animation: hmNod 8s ease-in-out 2.5s infinite; }
@keyframes hmNod {
  0%, 82%, 100% { transform: none; }
  86% { transform: translateY(3px) rotate(-3deg); }
  90% { transform: none; }
  94% { transform: translateY(3px) rotate(-2deg); }
  98% { transform: none; }
}

/* 칠판 (짙은 녹색 · 나무 테두리 · 분필 가루) */
.hm-board {
  position: relative; min-height: 292px; padding: 30px 36px 84px; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #2f4b3f, #22382f 60%, #1b2c25);
  border: 12px solid #9a6a3c; border-radius: 12px;
  box-shadow: 0 0 0 2.5px #3a2f28, inset 0 0 0 2px rgba(40, 28, 18, .75), inset 0 0 60px rgba(0, 0, 0, .45), 0 12px 0 -4px rgba(20, 30, 40, .12);
  color: #f3f6f1;
}
.hm-board::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 20% at 28% 90%, rgba(255, 255, 255, .08), transparent 70%),
    radial-gradient(38% 16% at 80% 14%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(30% 12% at 62% 54%, rgba(255, 255, 255, .035), transparent 70%),
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .22) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .18) 0 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 90px 70px, 130px 104px;
}
.hm-chalk-date {
  position: absolute; top: 12px; right: 22px; z-index: 3;
  font-family: Gaegu, 'Nanum Pen Script', cursive; font-size: 19px; font-weight: 700; color: rgba(243, 246, 241, .72);
}
.hm-board h1 {
  position: relative; margin: 16px 0 14px;
  font-family: 'Noto Sans KR', 'Pretendard', sans-serif; font-size: 40px; font-weight: 900; line-height: 1.32; letter-spacing: -0.035em;
  color: #f6f8f3; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .35);
}
.hm-y { position: relative; color: #ffe27a; white-space: nowrap; }
.hm-y::after {
  content: ''; position: absolute; left: -2px; right: -4px; bottom: -7px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C40 2 72 9 112 5 S172 3 197 6' fill='none' stroke='%23ffe27a' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hm-lead {
  position: relative; margin: 0; max-width: 26em;
  font-family: Gaegu, 'Nanum Pen Script', cursive; font-size: 26px; font-weight: 700; line-height: 1.35; color: #e8f0ea;
}
.hm-br { display: inline; }
.hm-hero .hm-doodle {
  position: absolute; right: 24px; bottom: 76px; width: 92px; opacity: .3;
  fill: none; stroke: #f3f6f1; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* 분필 받침대와 그 위에 놓인 버튼 */
.hm-tray {
  position: relative; z-index: 2; height: 16px; margin: -5px -16px 0;
  background: linear-gradient(#b17d45, #8a5f36); border: 2.5px solid #3a2f28; border-radius: 5px 5px 8px 8px;
}
.hm-tray-items { position: absolute; left: 36px; right: 36px; bottom: calc(100% - 1px); display: flex; align-items: flex-end; gap: 14px; }
.hm-eraser {
  width: 66px; height: 26px; margin-left: auto; margin-bottom: 1px;
  border: 2.5px solid #3a2f28; border-radius: 6px; box-shadow: 0 3px 0 #3a2f28;
  background: linear-gradient(#e9e3d6 0 52%, #56657a 52%);
}
/* 이젤 다리 */
.hm-easel::before, .hm-easel::after {
  content: ''; position: absolute; top: 100%; width: 14px; height: 34px; z-index: -1;
  background: #9a6a3c; border: 2.5px solid #3a2f28; border-top: 0; border-radius: 0 0 4px 4px;
}
.hm-easel::before { left: 14%; transform: rotate(5deg); transform-origin: top; }
.hm-easel::after { right: 14%; transform: rotate(-5deg); transform-origin: top; }

/* 달력 종이 */
.hm-cal-post { fill: #a9793f; stroke: #3a2f28; stroke-width: 2.4; }
.hm-cal-pg, .hm-cal-pg2 { fill: #fffdf4; stroke: #3a2f28; stroke-width: 2.6; filter: url(#rough); }
.hm-cal-pg2 { fill: #ece4d0; }
.hm-cal-top { fill: #e0555a; stroke: #3a2f28; stroke-width: 2.6; }
.hm-hero .scene .hm-cal-h { fill: #fff; font-size: 13.5px; font-weight: 700; }
.hm-cal-ring { fill: none; stroke: #5d626b; stroke-width: 4; stroke-linecap: round; }
.hm-hero .scene .hm-cal-d { fill: #2a2118; font-size: 33px; font-weight: 900; letter-spacing: -0.04em; }
.hm-hero .scene .hm-cal-s { fill: #48566a; font-size: 13px; font-weight: 700; }
.hm-cal-curl { fill: #e8dfca; stroke: #3a2f28; stroke-width: 2; stroke-linejoin: round; }

/* 언덕 · 나무 · 과목 팻말 */
.hm-ground { position: relative; z-index: 1; padding: 50px 20px 34px; }
.hm-hills { position: absolute; left: 0; top: -92px; width: 100%; height: calc(100% + 92px); z-index: -1; }
.hm-hills .hb { fill: var(--hill-b); }
.hm-hills .hf { fill: var(--hill-f); }
.hm-hills .hl { fill: none; stroke: var(--hill-l); stroke-width: 3; }
.hm-hills .hs { fill: var(--soil); }
.hm-tree { position: absolute; z-index: -1; width: 74px; filter: var(--tree-f); }
.hm-tree.t1 { left: 2%; top: -148px; width: 96px; }
.hm-tree.t2 { left: 9.5%; top: -110px; width: 62px; }
.hm-tree.t3 { right: 9%; top: -118px; width: 70px; }
.hm-tree.t4 { right: 2.5%; top: -142px; width: 92px; }

.hm-signs {
  position: relative; max-width: 1000px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
}
.hm-sign { display: block; transform: translateY(var(--dy, 0)); }
.hm-sign:nth-child(1) { --dy: 4px; }
.hm-sign:nth-child(2) { --dy: -14px; }
.hm-sign:nth-child(3) { --dy: 8px; }
.hm-sign:nth-child(4) { --dy: -8px; }
.hm-sign:nth-child(5) { --dy: 12px; }
.hm-sign:nth-child(6) { --dy: -16px; }
.hm-sign svg { height: 104px; width: auto; transform-origin: 50% 100%; transition: transform .2s ease; }
.hm-sign:hover svg, .hm-sign:focus-visible svg { transform: rotate(-3deg) translateY(-4px); }
.hm-sign:focus-visible { border-radius: 12px; }
.hm-hero .scene .sign.on { animation-delay: calc(var(--i) * .09s + .25s); }
.hm-bow rect, .hm-bow path, .hm-bow circle { fill: var(--brand); stroke: #3a2f28; stroke-width: 1.8; stroke-linejoin: round; }
.hm-sign-cap {
  margin: 20px 0 0; text-align: center;
  font-family: Gaegu, 'Nanum Pen Script', cursive; font-size: 19px; font-weight: 700; color: var(--grass-ink);
}

/* 수치 띠 */
.hm-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--hm-card); border: 1px solid var(--line); border-radius: var(--hm-r); box-shadow: var(--shadow);
}
.hm-stat { padding: 16px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hm-stat + .hm-stat { border-left: 1px solid var(--line); }
.hm-stat b { font-size: 27px; font-weight: 900; letter-spacing: -0.03em; color: var(--accent-ink); line-height: 1.2; }
.hm-stat b small { font-size: 14px; font-weight: 800; margin-left: 2px; color: var(--text-2); }
.hm-stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- 퀵 메뉴 ---------- */
.hm-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.hm-quick a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: 16px;
  font-size: 13.5px; font-weight: 800; color: var(--text-2); background: var(--hm-card); border: 1px solid var(--line);
  transition: transform .15s ease, border-color .15s ease;
}
.hm-quick a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--q) 50%, var(--line)); }
.hm-q-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--q); background: color-mix(in srgb, var(--q) 13%, transparent); }
.hm-q-ic svg { width: 23px; height: 23px; }

/* ---------- 섹션 공통 ---------- */
.hm-sec { margin-top: 26px; }
.hm-sec-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.hm-sec-h h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.3; width: 100%; order: 2; }
.hm-sec-h h2 em { color: var(--accent-ink); }
.hm-kicker {
  order: 1; display: inline-block; padding: 0 2px 6px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--accent-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C20 1.5 36 5.5 54 3.2 S84 2 98 4' fill='none' stroke='%232dc4c4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 6px no-repeat;
}
.hm-more { order: 1; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.hm-more svg { width: 16px; height: 16px; }
.hm-sec-lead { margin: 0 0 18px; color: var(--text-2); font-size: 16px; max-width: 40em; }
.hm-note { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }

/* 내 학습 현황: 기존 대시보드를 그대로 싣되 과목 카드는 아래 커리큘럼과 겹치므로 숨김 */
.hm-dash > .card.hero { margin-top: 4px; }
.hm-dash .section:has(.subj-grid) { display: none; }
.hm-dash .section-h { flex-wrap: wrap; justify-content: flex-start; column-gap: 12px; }
.hm-dash .section-h h2 { flex: none; }

/* ---------- 강점 (폰 목업) ---------- */
.hm-feat-grid { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; }
.hm-feat-vis {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 0 16px; border-radius: 28px;
}
.hm-feat-cap { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.hm-phone {
  width: 286px; border-radius: 42px; padding: 10px; background: #111418;
  box-shadow: 0 30px 60px rgba(16, 24, 40, .28), 0 0 0 1px var(--line-2), inset 0 0 0 2px #2b3038;
}
.hm-phone-in {
  position: relative; border-radius: 33px; overflow: hidden; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; height: 560px; font-size: 11px; line-height: 1.45;
}
.hm-phone-in::before { content: ''; position: absolute; top: 7px; left: 50%; width: 78px; height: 20px; border-radius: 12px; background: #111418; transform: translateX(-50%); z-index: 3; }
.hm-ph-top {
  display: flex; align-items: center; justify-content: space-between; padding: 34px 14px 8px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: relative;
}
.hm-ph-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.hm-ph-logo { font-weight: 900; font-size: 13px; color: var(--accent-ink); letter-spacing: -0.03em; }
.hm-ph-pill { font-size: 9.5px; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 9px; border-radius: 7px; }
.hm-ph-body { flex: 1; padding: 10px 12px 0; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.hm-ph-crumb { font-size: 9.5px; color: var(--muted); }
.hm-ph-tags { display: flex; gap: 5px; }
.hm-ph-tags span { font-size: 9px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.hm-ph-tags .ok { background: var(--ok-soft); color: var(--ok); }
.hm-ph-ttl { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }

.hm-num {
  width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 10px; font-weight: 900; background: #fff; color: #111; box-shadow: 0 0 0 2px var(--hm-orange);
  font-style: normal;
}
.hm-ph-play {
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 9px;
  background: var(--hm-orange); color: #fff; font-weight: 900; font-size: 12px;
  box-shadow: 0 0 0 0 rgba(255, 122, 24, .5); animation: hmRing 2.4s ease-out infinite;
}
.hm-ph-play svg { width: 13px; height: 13px; }
@keyframes hmRing { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 24, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 122, 24, 0); } }

.hm-ph-player { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.hm-ph-ph { display: flex; align-items: center; gap: 4px; padding: 5px 8px; font-weight: 800; font-size: 10px; }
.hm-ph-ph svg { width: 11px; height: 11px; color: var(--hm-orange); }
.hm-ph-ph span { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 9px; }
.hm-ph-stage { background: #fff; line-height: 0; border-top: 1px solid #c89a63; border-bottom: 1px solid #c89a63; }
.hm-ph-sub { padding: 5px 8px; text-align: center; font-size: 10px; font-weight: 700; background: #1f2a37; color: #fff; min-height: 25px; transition: opacity .2s; }
.hm-ph-bar { height: 3px; background: var(--line); }
.hm-ph-bar span { display: block; height: 100%; width: 12%; background: var(--hm-orange); transition: width .6s ease; }

.hm-ph-lines { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.hm-ph-lines i { height: 6px; border-radius: 4px; background: var(--surface-2); }
.hm-ph-lines i:first-child { background: color-mix(in srgb, var(--hl) 80%, var(--surface-2)); width: 78%; }
.hm-ph-lines i.s { width: 55%; }
.hm-ph-solve { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hm-ph-solve > span { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; border-radius: 9px; font-weight: 900; font-size: 10.5px; position: relative; }
.hm-ph-solve svg { width: 12px; height: 12px; }
.hm-ph-solve .past { background: var(--ok-soft); color: var(--ok); }
.hm-ph-solve .type { background: var(--accent-soft); color: var(--accent-ink); }
.hm-ph-solve .hm-num { position: absolute; top: -7px; left: -5px; }
.hm-ph-done { display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 800; font-size: 10.5px; }
.hm-ph-done svg { width: 12px; height: 12px; }
.hm-ph-tab { display: flex; justify-content: space-around; align-items: center; height: 40px; background: var(--surface); border-top: 1px solid var(--line); margin-top: 8px; }
.hm-ph-tab i { width: 16px; height: 16px; border-radius: 5px; background: var(--line-2); }
.hm-ph-tab b { width: 26px; height: 26px; border-radius: 50%; margin-top: -14px; background: radial-gradient(circle at 30% 25%, #6fe6e0, #2dc4c4 55%, #139899); box-shadow: 0 0 0 3px var(--surface); }
.hm-ph-play .hm-num { margin-right: 2px; }

.hm-f-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hm-f {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--hm-r);
  background: var(--hm-card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hm-f-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 900; font-size: 16px; color: #fff;
}
.hm-f.f1 .hm-f-n { background: var(--hm-orange); }
.hm-f.f2 .hm-f-n { background: var(--ok); }
.hm-f.f3 .hm-f-n { background: var(--accent); }
.hm-f h3 { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 900; }
.hm-f h3 svg { width: 18px; height: 18px; }
.hm-f.f1 h3 svg { color: var(--hm-orange); }
.hm-f.f2 h3 svg { color: var(--ok); }
.hm-f.f3 h3 svg { color: var(--accent-ink); }
.hm-f p { margin: 5px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.hm-f p b { color: var(--text); }

/* ---------- AI 선생님 ---------- */
.hm-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8edf2; color: #5b6573; flex: none; }
.hm-av svg { width: 16px; height: 16px; }
.hm-av.ai { background: var(--accent); color: #fff; }
@keyframes hmPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.hm-ai {
  padding: 36px; border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hm-ai-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: center; }
.hm-ai-go2 { display: none; }
.hm-ai-pts { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: var(--text-2); }
.hm-ai-pts li { display: flex; align-items: center; gap: 9px; }
.hm-ai-pts svg { width: 18px; height: 18px; color: var(--accent-ink); }
.hm-ai-pts li:last-child { padding: 9px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }

.hm-chat { border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.hm-chat-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.hm-on { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ok); display: inline-flex; align-items: center; gap: 5px; }
.hm-on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.hm-chat-b { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.hm-msg { display: flex; align-items: flex-end; gap: 8px; }
.hm-msg.me { justify-content: flex-end; }
.hm-bub { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; }
.hm-msg.me .hm-bub { background: #118f90; color: #fff; border-bottom-right-radius: 5px; font-weight: 600; }
.hm-msg.ai .hm-bub { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--text); }
.hm-bub ol { margin: 6px 0 6px; padding-left: 20px; }
.hm-bub li { margin: 1px 0; }
.hm-tip { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px; font-size: 13px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.hm-chat-in { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.hm-chat-in i { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.hm-chat-in i svg { width: 16px; height: 16px; }
/* 화면에 들어오면 말풍선이 차례로 */
.hm-chat.wait .hm-msg { opacity: 0; transform: translateY(8px); }
.hm-chat.in .hm-msg { animation: hmPop .45s both; }
.hm-chat.in .hm-msg:nth-child(2) { animation-delay: .7s; }
.hm-chat.in .hm-msg:nth-child(3) { animation-delay: 1.6s; }
.hm-chat.in .hm-msg:nth-child(4) { animation-delay: 2.3s; }
.hm-chat.still .hm-msg { animation: none; opacity: 1; transform: none; }

/* ---------- 학습 흐름 ---------- */
.hm-flow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; counter-reset: fl; }
.hm-flow li {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 18px 8px 16px; border-radius: 18px; background: var(--hm-card); border: 1px solid var(--line);
}
.hm-flow li + li::before {
  content: ''; position: absolute; left: -10px; top: 44px; width: 10px; height: 2px; background: var(--line-2);
}
.hm-flow li + li::after {
  content: ''; position: absolute; left: -7px; top: 40px; border: 5px solid transparent; border-left-color: var(--line-2); border-right: 0;
}
.hm-fl-ic {
  position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.hm-fl-ic svg { width: 25px; height: 25px; }
.hm-fl-ic em {
  position: absolute; top: -6px; right: -8px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: var(--bg); font-size: 11px; font-weight: 900;
}
.hm-flow li:nth-child(2) .hm-fl-ic { background: color-mix(in srgb, var(--hm-orange) 15%, transparent); color: var(--hm-orange); }
.hm-flow li:nth-child(3) .hm-fl-ic { background: var(--ok-soft); color: var(--ok); }
.hm-flow li:nth-child(5) .hm-fl-ic { background: var(--bad-soft); color: var(--bad); }
.hm-flow li:nth-child(6) .hm-fl-ic { background: radial-gradient(circle at 30% 25%, #6fe6e0, #2dc4c4 55%, #139899); color: #fff; }
.hm-flow b { font-size: 16px; font-weight: 900; }
.hm-flow li > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---------- 커리큘럼 ---------- */
.hm-cur-g { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; margin-top: 12px; }
.hm-cur-l { padding-top: 14px; display: flex; flex-direction: column; }
.hm-cur-l b { font-size: 18px; font-weight: 900; }
.hm-cur-l span { font-size: 13px; color: var(--muted); }
.hm-cur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hm-cur.g1 .hm-cc { grid-column: span 2; }
.hm-cc {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 18px; overflow: hidden;
  background: var(--hm-card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.hm-cc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.hm-cc:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.hm-cc-no { font-size: 12px; font-weight: 800; color: var(--c); }
.hm-cc h3 { font-size: 17.5px; font-weight: 900; }
.hm-cc p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.hm-cc-m { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.hm-cc-m b { font-weight: 900; color: var(--text); }
.hm-cc-bar { height: 5px; border-radius: 4px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.hm-cc-bar span { display: block; height: 100%; background: var(--c); border-radius: 4px; }

/* ---------- 시험장 가는 길 ---------- */
.hm-road { margin-top: 30px; }
.hm-road-map {
  position: relative; height: var(--rh, 340px); overflow: hidden;
  border: 2.5px solid var(--frame); border-radius: 18px;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
}
.hm-road-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hm-road .hm-road-v { display: none; }
.hm-road-bg .rg { fill: var(--hill-f); }
.hm-road-bg .rgl { fill: none; stroke: var(--hill-l); stroke-width: 3; }
.hm-road-bg .re { fill: none; stroke: var(--road-e); stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; }
.hm-road-bg .rr { fill: none; stroke: var(--road); stroke-width: 43; stroke-linecap: round; stroke-linejoin: round; }
.hm-road-bg .rd { fill: none; stroke: var(--road-e); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 30; opacity: .7; }

.hm-posts { list-style: none; margin: 0; padding: 0; }
.hm-posts li { position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; }
.hm-post { position: absolute; top: 0; bottom: 0; left: -84px; width: 168px; color: inherit; border-radius: 12px; }
.hm-post-svg { position: absolute; left: 0; top: var(--fy); width: 168px; height: auto; transform: translateY(-95.5%); }
.hm-post-svg .sc { transform-origin: 50% 100%; transition: transform .2s ease; }
a.hm-post:hover .hm-post-svg .sc { transform: rotate(-3deg) translateY(-4px); }
.hm-road .scene .sign text { font-size: 21px; }
.hm-road .scene .sign .bd { stroke-linejoin: round; }
.hm-road .scene .hm-goal .bd { fill: #ffe6c4; }
.hm-flagpole { stroke: #3a2f28; stroke-width: 3; stroke-linecap: round; }
.hm-flag { fill: #e0555a; stroke: #3a2f28; stroke-width: 2.2; stroke-linejoin: round; transform-box: fill-box; transform-origin: 0 50%; animation: hmWave 2.6s ease-in-out infinite; }
@keyframes hmWave { 50% { transform: skewY(-6deg) scaleX(.9); } }
.hm-post-cap {
  position: absolute; left: 4px; right: 4px; top: calc(var(--fy) + 54px);
  text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--grass-ink);
}
a.hm-post .hm-post-cap { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-kid { position: absolute; left: 15.5%; top: var(--ky); width: 46px; transform: translate(-50%, -92%); }
.hm-kid svg { width: 100%; height: auto; }

/* 마지막 이정표 옆 — 명패 두 개가 걸린 나무 게시판 */
.hm-road-go {
  position: absolute; right: 2.4%; top: 52px; width: 196px; z-index: 1;
  display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 16px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 38px), #c89560;
  border: 2.5px solid #3a2f28; border-radius: 10px; box-shadow: 0 4px 0 rgba(58, 47, 40, .35);
}
.hm-road-go::before, .hm-road-go::after {
  content: ''; position: absolute; top: 100%; width: 13px; height: 70px; z-index: -1;
  background: #a9793f; border: 2.5px solid #3a2f28; border-top: 0; border-radius: 0 0 4px 4px;
}
.hm-road-go::before { left: 22%; }
.hm-road-go::after { right: 22%; }
.hm-road-go .hm-plate { width: 100%; }

/* ---------- 태블릿 ---------- */
@media (max-width: 980px) {
  .hm-stage { grid-template-columns: 160px minmax(0, 1fr) 112px; column-gap: 12px; }
  .hm-tch { margin: 0 -30px -58px 0; }
  .hm-board h1 { font-size: 34px; }
  .hm-lead { font-size: 22px; }
  .hm-hero .hm-doodle, .hm-eraser { display: none; }
  .hm-sign svg { height: 88px; }
  .hm-feat-grid { grid-template-columns: 1fr; gap: 24px; }
  .hm-ai-grid { grid-template-columns: 1fr; gap: 20px; }
  .hm-ai-go { display: none; }
  .hm-ai-go2 { display: flex; }
  .hm-ai-pts { margin-bottom: 0; }
  .hm-flow { grid-template-columns: repeat(3, 1fr); }
  .hm-flow li:nth-child(4)::before, .hm-flow li:nth-child(4)::after { display: none; }
  .hm-cur-g { grid-template-columns: 1fr; gap: 8px; }
  .hm-cur-l { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  .hm-cur { grid-template-columns: 1fr 1fr; }
  .hm-cur.g1 .hm-cc { grid-column: auto; }
}

/* ---------- 휴대폰 · 좁은 태블릿: 세로 무대 ---------- */
@media (max-width: 860px) {
  .hm-hero { padding-top: 26px; }
  .hm-stage {
    grid-template-columns: 1fr auto; grid-template-areas: "board board" "tch cal";
    padding: 0 16px; column-gap: 0;
  }
  .hm-tch { width: 150px; margin: 4px 0 -34px 4px; justify-self: start; }
  .hm-cal { width: 96px; margin: 14px 10px -26px 0; }
  .hm-easel::before, .hm-easel::after { display: none; }
  .hm-sun { width: 78px; top: 4px; right: 4px; }
  .hm-moonw { width: 62px; top: 6px; right: 8px; }
  .hm-cloud.c1 { top: 300px; left: 38%; width: 96px; }
  .hm-cloud.c2 { top: 4px; left: 12%; width: 74px; }
  .hm-cloud.c3 { display: none; }
  .hm-tree.t2, .hm-tree.t3 { display: none; }
  .hm-tree.t1 { left: 36%; top: -96px; width: 76px; }
  .hm-tree.t4 { right: 32%; top: -80px; width: 60px; }
  .hm-ground { padding: 40px 10px 32px; }
  .hm-signs { flex-wrap: wrap; justify-content: space-around; row-gap: 16px; max-width: 460px; }
  .hm-sign svg { height: 70px; }
  .hm-sign-cap { font-size: 17px; margin-top: 16px; }

  .hm-road-map { height: auto; padding: 16px 12px 20px 0; background: var(--hill-f); }
  .hm-road .hm-road-h, .hm-kid { display: none; }
  .hm-road .hm-road-v { display: block; width: 62px; }
  .hm-road-bg .re { stroke-width: 36; }
  .hm-road-bg .rr { stroke-width: 30; }
  .hm-road-bg .rd { stroke-dasharray: 1 24; }
  .hm-posts li { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .hm-post {
    position: relative; left: auto; top: auto; bottom: auto; width: auto;
    display: grid; grid-template-columns: 140px 1fr; align-items: start; column-gap: 10px; padding: 0 0 0 46px;
  }
  .hm-post-svg { position: static; width: 140px; height: 100px; transform: none; }
  .hm-post-cap { position: static; text-align: left; font-size: 14px; padding-top: 44px; }
  .hm-road-go {
    position: relative; right: auto; top: auto; width: auto; margin: 16px 0 0 46px;
    flex-direction: row; gap: 10px; padding: 12px 10px;
  }
  .hm-road-go::before, .hm-road-go::after { display: none; }
  .hm-road-go .hm-plate { flex: 1; width: auto; padding: 0 8px; font-size: 15px; }
}
@media (max-width: 640px) {
  .hm { gap: 16px; }
  .hm-board { min-height: 0; padding: 22px 18px 74px; border-width: 10px; }
  .hm-chalk-date { top: 8px; right: 14px; font-size: 16px; }
  .hm-board h1 { font-size: 28px; margin: 12px 0 10px; }
  .hm-lead { font-size: 21.5px; line-height: 1.3; }
  .hm-tray { margin: -5px -8px 0; }
  .hm-tray-items { left: 14px; right: 14px; gap: 10px; }
  .hm-plate { padding: 0 12px; font-size: 15.5px; height: 48px; }
  .hm-tray-items .hm-plate { flex: 1.15; }
  .hm-tray-items .hm-chalk { flex: 1; padding: 0 20px 0 14px; font-size: 15.5px; }

  .hm-stats { grid-template-columns: repeat(6, 1fr); }
  .hm-stat { grid-column: span 2; padding: 12px 6px; }
  .hm-stat:nth-child(4), .hm-stat:nth-child(5) { grid-column: span 3; border-top: 1px solid var(--line); }
  .hm-stat:nth-child(4) { border-left: 0; }
  .hm-stat b { font-size: 22px; }
  .hm-stat span { font-size: 11.5px; }

  .hm-quick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hm-quick a { font-size: 12.5px; padding: 10px 4px 9px; gap: 6px; border-radius: 14px; }
  .hm-q-ic { width: 36px; height: 36px; border-radius: 11px; }
  .hm-q-ic svg { width: 20px; height: 20px; }

  .hm-sec { margin-top: 18px; }
  .hm-sec-h h2 { font-size: 23px; }
  .hm-sec-lead { font-size: 15px; }
  .hm-f { padding: 15px 16px; gap: 12px; }
  .hm-f h3 { font-size: 16.5px; }
  .hm-f p { font-size: 14.5px; }

  .hm-ai { padding: 24px 16px; border-radius: 22px; margin-left: -4px; margin-right: -4px; }
  .hm-bub { font-size: 14px; max-width: 88%; }
  .hm-chat-b { padding: 12px; }

  .hm-flow { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-flow li { flex-direction: row; text-align: left; align-items: center; gap: 10px; padding: 12px; }
  .hm-flow li::before, .hm-flow li::after { display: none; }
  .hm-fl-ic { width: 42px; height: 42px; border-radius: 13px; margin: 0; }
  .hm-fl-ic svg { width: 21px; height: 21px; }
  .hm-fl-ic em { right: auto; left: -7px; top: -7px; width: 19px; height: 19px; font-size: 10.5px; }
  .hm-flow li > b { font-size: 15px; }
  .hm-flow li { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; }
  .hm-flow li .hm-fl-ic { grid-row: span 2; }
  .hm-flow li > span:last-child { font-size: 12px; }

  .hm-cur { grid-template-columns: 1fr; gap: 10px; }
  .hm-cc { padding: 15px 16px 14px; }
}
@media (max-width: 380px) {
  .hm-board h1 { font-size: 25px; }
  .hm-lead { font-size: 18.5px; }
  .hm-tray-items .hm-chalk, .hm-plate { font-size: 14.5px; }
  .hm-phone { width: 262px; }
  .hm-phone-in { height: 530px; }
  .hm-post { grid-template-columns: 124px 1fr; }
  .hm-post-svg { width: 124px; height: 90px; }
  .hm-post-cap { padding-top: 38px; }
}

/* ---------- 움직임 줄이기: 전부 정지 ---------- */
/* ---------- 칠판 가격 쪽지 ---------- */
.hm-price-tag {
  position: absolute; top: 52px; right: 30px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 10px 16px 9px; border: 0; border-radius: 4px; cursor: pointer;
  background: #fff3b0; color: #3a2f28; transform: rotate(4deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35); font-family: Gaegu, 'Nanum Pen Script', cursive;
  transition: transform .15s ease;
}
.hm-price-tag::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; margin-left: -23px;
  background: rgba(255, 255, 255, .55); transform: rotate(-3deg);
}
.hm-price-tag small { font-size: 16px; font-weight: 700; }
.hm-price { scroll-margin-top: calc(var(--hdr-h, 84px) + 14px); }
.hm-price-tag b { font-family: 'Noto Sans KR', 'Pretendard', sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: #d9480f; }
.hm-price-tag:hover { transform: rotate(0deg) scale(1.04); }
.hm-lead b.hm-y { font-weight: 700; }

/* ---------- 강점 8가지 ---------- */
.hm-perk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-perk {
  display: flex; flex-direction: column; height: 100%; color: inherit; transition: transform .15s ease, box-shadow .15s ease;
  padding: 20px 18px 18px; border-radius: var(--hm-r); background: var(--hm-card); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-top: 4px solid var(--pc);
}
.hm-perk-ic {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc);
}
.hm-perk-ic svg { width: 23px; height: 23px; }
.hm-perk h3 { margin: 12px 0 6px; font-size: 18px; font-weight: 900; letter-spacing: -0.03em; }
.hm-perk p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.hm-perk p b { color: var(--text); }
.hm-perk:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(20, 40, 50, .5); }
.hm-perk-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 800; color: var(--pc); }
.hm-perk-go svg { width: 15px; height: 15px; }

/* ---------- 수강료 ---------- */
.hm-price-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 36px; align-items: center;
  padding: 34px 38px; border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, #17a6a7 0%, #2dc4c4 55%, #5fd6d0 100%);
  box-shadow: 0 14px 34px -14px rgba(23, 166, 167, .7);
}
.hm-price-card .hm-kicker { background: none; color: #fff; border-bottom: 2px solid rgba(255, 255, 255, .7); padding-bottom: 3px; }
.hm-price-l h2 { margin: 10px 0 8px; font-size: 34px; font-weight: 900; line-height: 1.28; letter-spacing: -0.04em; }
.hm-price-l h2 em { color: #fff3b0; }
.hm-price-sub { margin: 0 0 20px; font-size: 16.5px; opacity: .95; }
.hm-price-sub b { font-weight: 900; }
.hm-price-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-price-card .hm-btn-main { background: #fff; color: #0b7577; }
.hm-btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.hm-price-inc {
  list-style: none; margin: 0; padding: 20px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 11px;
}
.hm-price-inc li { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; }
.hm-price-inc svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: #fff; color: #17a6a7; stroke-width: 3; }

@media (max-width: 980px) {
  .hm-perk-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-price-card { grid-template-columns: 1fr; padding: 28px 26px; }
}
@media (max-width: 640px) {
  .hm-price-tag { position: relative; top: auto; right: auto; flex-direction: row; gap: 8px; align-items: baseline; margin-top: 14px; padding: 7px 14px; transform: rotate(-1.5deg); }
  .hm-price-tag::before { display: none; }
  .hm-price-tag small { font-size: 15px; }
  .hm-price-tag b { font-size: 19px; }
  .hm-board { display: flex; flex-direction: column; align-items: flex-start; }
  .hm-board .hm-price-tag { order: 3; }
  .hm-perk-grid { gap: 10px; }
  .hm-perk { padding: 15px 13px; }
  .hm-perk-ic { width: 38px; height: 38px; border-radius: 12px; }
  .hm-perk-ic svg { width: 20px; height: 20px; }
  .hm-perk h3 { font-size: 15.5px; margin-top: 9px; }
  .hm-perk p { font-size: 13px; line-height: 1.55; }
  .hm-price-l h2 { font-size: 27px; }
  .hm-price-card { padding: 24px 18px; border-radius: 22px; }
  .hm-price-cta .hm-btn { flex: 1 1 100%; }
}

/* ---------- 띠: AI 챗봇에 일일이 묻지 마세요 ---------- */
.hm-nop-card { padding: 30px 34px 26px; border-radius: 26px; background: #1f2d33; color: #eef6f6; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55); }
.hm-nop-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.hm-nop-no, .hm-nop-yes { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; }
.hm-nop-no { background: rgba(255, 255, 255, .06); }
.hm-nop-no p { color: #b9c7ca; }
.hm-nop-no b { color: #fff; text-decoration: line-through; text-decoration-color: #ff6b6b; text-decoration-thickness: 2px; }
.hm-nop-yes { background: #2dc4c4; color: #fff; }
.hm-nop-yes b { color: #fff3b0; }
.hm-nop-row p { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.45; letter-spacing: -0.03em; }
.hm-nop-mk { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.hm-nop-mk svg { width: 22px; height: 22px; stroke-width: 3; }
.hm-nop-no .hm-nop-mk { background: #ff6b6b; color: #fff; }
.hm-nop-yes .hm-nop-mk { background: #fff; color: #17a6a7; }
.hm-nop-arrow { color: #2dc4c4; }
.hm-nop-arrow svg { width: 30px; height: 30px; stroke-width: 2.6; }
.hm-nop-foot { margin: 20px 0 0; text-align: center; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.hm-nop-foot em { color: #7fe3e0; }
@media (max-width: 860px) {
  .hm-nop-card { padding: 22px 16px 20px; border-radius: 22px; }
  .hm-nop-row { grid-template-columns: 1fr; gap: 8px; }
  .hm-nop-arrow { justify-self: center; transform: rotate(90deg); }
  .hm-nop-row p { font-size: 16.5px; }
  .hm-nop-row p br { display: none; }
  .hm-nop-no, .hm-nop-yes { padding: 14px 14px; }
  .hm-nop-foot { font-size: 16.5px; line-height: 1.5; }
}

/* ---------- 시험 안내 배너 (히어로 아래) ---------- */
.xb { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; color: inherit;
  background: linear-gradient(120deg, #fff8e1 0%, #ffffff 60%); border: 2px solid #ffd666; box-shadow: 0 10px 24px -16px rgba(180, 130, 0, .55);
  transition: transform .15s ease, box-shadow .15s ease; }
.xb:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(180, 130, 0, .6); }
.xb-ic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #ffb400; color: #fff; }
.xb-ic svg { width: 28px; height: 28px; }
.xb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xb-k { font-size: 12.5px; font-weight: 900; color: #b07800; letter-spacing: .02em; }
.xb-t { font-size: 19px; font-weight: 900; letter-spacing: -0.03em; color: #1c2b30; }
.xb-t strong { margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #e03131; color: #fff; font-size: 15px; }
.xb-fs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.xb-f { font-size: 14px; color: #3d4b50; }
.xb-f em { font-style: normal; font-weight: 800; color: #b07800; margin-right: 6px; }
.xb-f b { font-weight: 700; }
.xb-go { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 12px; background: #1c2b30; color: #fff; font-weight: 800; font-size: 14px; }
.xb-go svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xb { background: linear-gradient(120deg, #3a2f10 0%, var(--surface) 60%); border-color: #8a6a10; } :root:not([data-theme="light"]) .xb-t { color: var(--text); } :root:not([data-theme="light"]) .xb-f { color: var(--text-2); } }
:root[data-theme="dark"] .xb { background: linear-gradient(120deg, #3a2f10 0%, var(--surface) 60%); border-color: #8a6a10; }
:root[data-theme="dark"] .xb-t { color: var(--text); }
@media (max-width: 760px) {
  .xb { flex-wrap: wrap; padding: 14px 14px; gap: 10px 12px; border-radius: 18px; }
  .xb-ic { width: 44px; height: 44px; border-radius: 13px; }
  .xb-main { flex-basis: calc(100% - 60px); }
  .xb-t { font-size: 16px; }
  .xb-fs { flex-direction: column; gap: 3px; }
  .xb-f { font-size: 13px; }
  .xb-go { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after { animation: none !important; transition: none !important; }
}

/* ---------- 히어로 질문창 (궁금하면 바로 묻고, 즉시 답) — 나도스터디 전 과정 공통 강점 ---------- */
.hm-ask {
  position: relative; z-index: 2; margin: 14px 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h go" "b b"; gap: 12px 16px; align-items: center;
  padding: 16px 18px 18px; border-radius: var(--hm-r);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
  border: 2px solid var(--accent); box-shadow: 0 10px 28px rgba(44, 85, 224, .16);
}
.hm-ask-h { grid-area: h; display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-ask-av { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.hm-ask-av svg { width: 24px; height: 24px; }
.hm-ask-av.sm { width: 30px; height: 30px; border-radius: 10px; }
.hm-ask-av.sm svg { width: 17px; height: 17px; }
.hm-ask-ht { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-ask-ht b { font-size: 20px; font-weight: 900; letter-spacing: -.03em; color: var(--text); }
.hm-ask-ht small { font-size: 14px; color: var(--text-2); font-weight: 600; }
.hm-ask-ht em { font-style: normal; color: var(--accent-ink); font-weight: 800; }
.hm-ask-h .hm-on { margin-left: 8px; white-space: nowrap; }
.hm-ask-go {
  grid-area: go; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(44, 85, 224, .3); transition: transform .15s;
}
.hm-ask-go:hover { transform: translateY(-1px); }
.hm-ask-go svg { width: 18px; height: 18px; }
.hm-ask-body { grid-area: b; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: stretch; }
.hm-ask-q {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-2); font-size: 15px; font-weight: 700; color: var(--text); min-height: 52px;
}
.hm-ask-me { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.hm-ask-me svg { width: 16px; height: 16px; }
.hm-ask-caret { width: 2px; height: 1.1em; background: var(--accent); margin-left: -6px; opacity: 0; }
.hm-ask.typing .hm-ask-caret { opacity: 1; animation: hmCaret .8s steps(1) infinite; }
@keyframes hmCaret { 50% { opacity: 0; } }
.hm-ask-a {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); min-height: 76px;
}
.hm-ask-a p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); transition: opacity .35s; }
.hm-ask-a p b { color: var(--accent-ink); }
.hm-ask.typing .hm-ask-a p, .hm-ask.think .hm-ask-a p { opacity: 0; }
.hm-ask-dots { position: absolute; left: 54px; top: 22px; display: none; gap: 5px; }
.hm-ask.think .hm-ask-dots { display: flex; }
.hm-ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: hmDot 1s infinite; }
.hm-ask-dots i:nth-child(2) { animation-delay: .15s; } .hm-ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hmDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 760px) {
  .hm-ask { grid-template-columns: 1fr; grid-template-areas: "h" "b" "go"; padding: 14px; gap: 10px; }
  .hm-ask-ht b { font-size: 17px; }
  .hm-ask-ht small { font-size: 12.5px; }
  .hm-ask-h .hm-on { display: none; }
  .hm-ask-av { width: 38px; height: 38px; border-radius: 12px; }
  .hm-ask-body { grid-template-columns: 1fr; gap: 8px; }
  .hm-ask-q { font-size: 14px; min-height: 46px; }
  .hm-ask-a { min-height: 96px; }
  .hm-ask-a p { font-size: 13.5px; }
  .hm-ask-go { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hm-ask-caret, .hm-ask-dots i { animation: none; } }

/* 2026-09-29 사용자: 강점 카드 수가 한 줄에 딱 나뉘지 않으면 마지막 한 장을 한 줄 전체로 넓혀 빈칸을 없앤다 */
@media (min-width: 981px) { .hm-perk-grid > li:last-child:nth-child(4n+1) { grid-column: 1 / -1; } }
@media (min-width: 641px) and (max-width: 980px) { .hm-perk-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hm-perk-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hm-perk-grid > li:last-child:nth-child(odd) .hm-perk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.hm-perk-grid > li:last-child:nth-child(odd) .hm-perk h3 { grid-column: 2; margin: 0; }
.hm-perk-grid > li:last-child:nth-child(odd) .hm-perk-ic { grid-row: 1 / span 2; }
.hm-perk-grid > li:last-child:nth-child(odd) .hm-perk p { grid-column: 2; margin-top: 4px; }
.hm-perk-grid > li:last-child:nth-child(odd) .hm-perk-go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; }


/* ---------- AI 강사 히어로(표준 설계 규정 2026-10-02 — 캐릭터 폐기) ---------- */
.hm-tch-img { display: block; width: auto; height: 470px; max-width: none; margin: 0 0 -6px -10px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22)); pointer-events: none; }
.hm-tch { margin-right: -28px; }
.hm-tch-tag { position: absolute; left: 0; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(20, 32, 48, .86); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hm-tch-tag b { background: #ffe36e; color: #142030; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; }
@media (max-width: 980px) { .hm-tch-img { height: 400px; } }
@media (max-width: 860px) {
  .hm-tch { width: auto; margin: 0 0 -10px 0; }
  .hm-tch-img { height: 300px; margin: 0; }
  .hm-tch-tag { bottom: 8px; font-size: 11.5px; }
}

/* ---------- 맛보기 버튼 · 팝업 (try.js, 2026-10-02) ---------- */
.hm-perk-grid li.has-try { position: relative; }
.hm-try {
  position: absolute; top: 18px; right: 14px; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px 6px 9px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  background: var(--pc); color: #fff; box-shadow: 0 6px 14px -8px var(--pc); transition: transform .15s ease;
}
.hm-try svg { width: 14px; height: 14px; }
.hm-try:hover { transform: scale(1.06); }
.try-modal .modal { width: min(820px, 100%); }
.try-modal .kind.try { color: #e0620d; }
.try-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.try-note small { display: block; margin-top: 4px; font-size: 12px; }
.try-lead { margin: 0 0 12px; color: var(--text-2); font-size: 14.5px; }
.try-vid { position: relative; border-radius: 12px; overflow: hidden; background: #26423a; }
.try-vid video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #26423a; }
.try-vid-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: rgba(10, 20, 16, .78); color: #fff; }
.try-vid-end b { font-size: 19px; }
.try-vid-end span { font-size: 14px; opacity: .9; }
.try-vid-end[hidden] { display: none; }
.try-chat { min-height: 150px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.try-me { align-self: flex-end; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; }
.try-bot { display: flex; gap: 9px; align-items: flex-start; max-width: 94%; }
.try-bot > div { padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; }
.try-bot small { display: block; font-size: 12px; font-weight: 800; color: var(--accent-ink); margin-bottom: 2px; }
.try-bot p { margin: 0; }
.try-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); border: 2px solid var(--line); }
.try-typing { color: var(--muted); }
.try-qs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.try-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.try-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.try-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.try-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 800; color: var(--text-2); }
.try-form select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; }
.try-plan-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 10px; }
.try-plan-sum div { padding: 10px; border-radius: 12px; background: var(--accent-soft); text-align: center; }
.try-plan-sum small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.try-plan-sum b { font-size: 19px; color: var(--accent-ink); }
.try-warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
.try-week { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.try-week li { display: flex; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.try-week b { flex: none; color: var(--accent-ink); }
.try-read h4 { margin: 0 0 8px; font-size: 16px; }
.try-read table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.try-read th, .try-read td { border: 1px solid var(--line-2); padding: 7px 8px; text-align: left; vertical-align: top; }
.try-read th { background: var(--surface-2); }
.try-box { margin-top: 10px; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.65; }
.try-box p { margin: 3px 0 0; }
.try-box.easy { background: var(--ok-soft); }
.try-box.easy b { color: var(--ok); }
.try-box.trap { background: var(--bad-soft); }
.try-box.trap b { color: var(--bad); }
.try-q { padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.try-q:last-of-type { border-bottom: 0; }
.try-qq { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.try-q ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.try-q ol button { width: 100%; text-align: left; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }
.try-q ol button:hover:not(:disabled) { border-color: var(--accent); }
.try-q ol button.ok { border-color: var(--ok); background: var(--ok-soft); font-weight: 700; }
.try-q ol button.ng { border-color: var(--bad); background: var(--bad-soft); }
.try-q ol button:disabled { cursor: default; color: var(--text); }
.try-exp { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.65; }
.try-exp p { margin: 4px 0 0; }
.try-exp b.ok { color: var(--ok); }
.try-exp b.ng { color: var(--bad); }
.try-cyc { width: 100%; border-collapse: collapse; font-size: 14px; }
.try-cyc th, .try-cyc td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.try-cyc td:first-child, .try-cyc th:first-child { text-align: left; font-weight: 700; }
.try-cyc th { font-size: 12.5px; color: var(--muted); }
.try-ok { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; white-space: nowrap; }
.try-cyc td.pop .try-ok { animation: pop .5s ease; }
.try-mini { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.try-mini:disabled { opacity: .5; cursor: default; }
.try-timer { display: flex; align-items: center; gap: 22px; }
.try-ring { --p: 0%; width: 130px; height: 130px; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 80%, transparent 81%), conic-gradient(#0e9486 var(--p), var(--line) 0); }
.try-ring b { font-size: 28px; font-variant-numeric: tabular-nums; }
.try-ring span { font-size: 12px; color: var(--muted); }
#try-tq { margin-top: 14px; }
@media (max-width: 720px) {
  .hm-try { top: 13px; right: 10px; padding: 5px 9px 5px 7px; font-size: 12px; }
  .try-form { grid-template-columns: 1fr 1fr; }
  .try-form label:first-child { grid-column: 1 / -1; }
  .try-plan-sum { grid-template-columns: repeat(2, 1fr); }
  .try-timer { flex-direction: column; gap: 14px; }
  .try-cyc th, .try-cyc td { padding: 8px 3px; font-size: 13px; }
}
/* 폰 목업 — AI 강사 강의 장면(course.js instructor.lec) */
.hm-ph-vid { position: relative; background: #26423a; }
.hm-ph-vid img { display: block; width: 100%; height: auto; }
.hm-ph-live { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 122, 24, .92); color: #fff; }
.hm-ph-live svg { width: 11px; height: 11px; }
/* 서비스 체험하기 — 히어로 버튼 · 체험 띠 · 체험관 탭 (2026-10-02) */
.hm-try-hero {
  position: relative; z-index: 2; margin-top: 16px; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; text-align: left;
  background: #ff7a18; color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 8px 20px -8px #ff7a18;
  animation: hmTryPulse 2.4s ease-in-out infinite; transition: transform .15s ease;
}
.hm-try-hero > svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fff; color: #ff7a18; flex: none; }
.hm-try-hero b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.hm-try-hero small { display: block; font-size: 13px; opacity: .92; font-weight: 600; }
.hm-try-hero:hover { transform: translateY(-2px) scale(1.02); }
@keyframes hmTryPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 8px 20px -8px #ff7a18; } 50% { box-shadow: 0 0 0 8px rgba(255, 122, 24, .22), 0 8px 20px -8px #ff7a18; } }
@media (prefers-reduced-motion: reduce) { .hm-try-hero { animation: none; } }
.hm-tb-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: center; padding: 26px 28px; border-radius: var(--hm-r); background: var(--hm-card); border: 1px solid var(--line); box-shadow: var(--shadow); border-top: 4px solid #ff7a18; }
.hm-tb-l h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.hm-tb-l h2 em { font-style: normal; color: #ff7a18; }
.hm-tb-l p { margin: 0 0 16px; color: var(--text-2); line-height: 1.6; }
.hm-tb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hm-tb-list button {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px 12px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 800; transition: transform .15s ease, border-color .15s ease;
}
.hm-tb-list button:hover { transform: translateY(-2px); border-color: var(--pc); }
.hm-tb-n { position: absolute; top: 6px; left: 8px; font-size: 11px; color: var(--muted); }
.hm-tb-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc); }
.hm-tb-ic svg { width: 22px; height: 22px; }
.try-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.try-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.try-tab b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11.5px; }
.try-tab.on { border-color: #ff7a18; background: #ff7a18; color: #fff; }
.try-tab.on b { background: #fff; color: #ff7a18; }
.try-h { display: flex; align-items: center; gap: 8px; margin: 12px 0 12px; font-size: 18px; font-weight: 900; }
.try-h span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff7a18; color: #fff; font-size: 14px; }
.try-modal .modal-f { justify-content: stretch; }
.try-nav { width: 100%; display: flex; align-items: center; gap: 10px; }
.try-nav .btn.primary { margin-left: auto; }
.try-count { font-size: 13px; color: var(--muted); font-weight: 700; }
@media (max-width: 720px) {
  .hm-try-hero { margin-top: 12px; padding: 9px 16px 9px 10px; }
  .hm-try-hero b { font-size: 16.5px; }
  .hm-try-hero small { font-size: 12px; }
  .hm-tb-card { grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; }
  .hm-tb-l h2 { font-size: 21px; }
  .hm-tb-list { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .hm-tb-list button { padding: 12px 2px 8px; font-size: 12px; gap: 4px; }
  .hm-tb-ic { width: 36px; height: 36px; }
  .try-nav .btn { padding-left: 12px; padding-right: 12px; }
}
/* 수강생·관리자에게는 맛보기 버튼·체험 띠 숨김 (try.js mark) */
.nd-enrolled .hm-try-hero, .nd-enrolled .hm-tryband, .nd-enrolled .hm-try { display: none !important; }
/* 서비스 체험 안내 띠 — 실제 화면 위 아래쪽 (try.js, 2026-10-02) */
.try-tour {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h, 64px) + env(safe-area-inset-bottom) + 10px); z-index: 45;
  width: min(760px, calc(100% - 20px)); padding: 10px 14px 12px; border-radius: 18px; background: var(--surface); color: var(--text);
  border: 2px solid #ff7a18; box-shadow: 0 18px 40px -14px rgba(20, 30, 40, .45);
}
.try-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.try-tour-kick { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #e0620d; }
.try-tour-kick svg { width: 14px; height: 14px; }
.try-tour-x { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.try-tour-x svg { width: 14px; height: 14px; }
.try-tour-dots { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 6px; scrollbar-width: none; }
.try-tour-dots::-webkit-scrollbar { display: none; }
.try-tour-dots button { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.try-tour-dots b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); font-size: 10.5px; }
.try-tour-dots button.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.try-tour-dots button.done b { background: var(--ok-soft); }
.try-tour-dots button.on { background: #ff7a18; border-color: #ff7a18; color: #fff; }
.try-tour-dots button.on b { background: #fff; color: #ff7a18; }
.try-tour-body h4 { display: flex; align-items: center; gap: 7px; margin: 2px 0 4px; font-size: 16px; font-weight: 900; }
.try-tour-body h4 span { padding: 1px 7px; border-radius: 999px; background: #ff7a18; color: #fff; font-size: 11.5px; }
.try-tour-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.try-tour-body p b { color: var(--text); }
.try-tour-body .btn { margin-top: 6px; }
.try-tour-note { margin-top: 4px !important; font-size: 12.5px !important; color: var(--muted) !important; }
.try-ask { margin: 2px 2px 0 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.try-tour-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.nd-touring .view { padding-bottom: 300px !important; }
@media (max-width: 720px) {
  .try-tour { padding: 8px 11px 10px; border-radius: 14px; }
  .try-tour-dots span { display: none; }
  .try-tour-dots button { padding: 3px; }
  .try-tour-dots button.on span { display: inline; }
  .try-tour-dots button.on { padding-right: 9px; }
  .try-tour-body h4 { font-size: 15px; }
  .try-tour-body p { font-size: 13px; }
}
.try-tour-r { display: inline-flex; align-items: center; gap: 10px; }
.try-tour-r a { font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.hm-tb-list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .hm-tb-list { grid-template-columns: repeat(3, 1fr); } }
/* 체험 띠: 9단계가 잘리지 않게(2026-10-02 사용자) — PC 는 넓게·한 줄 9칸, 좁으면 줄바꿈 */
.try-tour { width: min(1040px, calc(100% - 20px)); }
.try-tour-dots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; overflow: visible; }
.try-tour-dots button { justify-content: center; padding: 5px 4px; min-width: 0; }
.try-tour-dots button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .try-tour-dots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .try-tour-dots { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
  .try-tour-dots button { padding: 3px 0; }
  .try-tour-dots button span, .try-tour-dots button.on span { display: none; }
  .try-tour-dots button.on { padding-right: 0; }
}
/* 가격 비교 띠 (2026-10-02) */
.hm-cmp-card { padding: 28px; border-radius: var(--hm-r); background: var(--hm-card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.hm-cmp-h h2 { margin: 6px 0 18px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.hm-cmp-h h2 em { font-style: normal; color: #364fc7; }
.hm-cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; max-width: 760px; margin: 0 auto; }
.hm-cmp-box { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; border-radius: 18px; }
.hm-cmp-box small { font-size: 14px; font-weight: 800; }
.hm-cmp-box b { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-cmp-box span { font-size: 14px; color: var(--text-2); }
.hm-cmp-box em { font-style: normal; font-size: 14.5px; font-weight: 800; margin-top: 4px; }
.hm-cmp-box.them { background: var(--surface-2); color: var(--muted); }
.hm-cmp-box.them b { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(217, 58, 63, .55); }
.hm-cmp-box.ours { background: #364fc7; color: #fff; box-shadow: 0 14px 30px -14px #364fc7; transform: scale(1.04); }
.hm-cmp-box.ours span { color: rgba(255, 255, 255, .88); }
.hm-cmp-box.ours em { color: #ffe066; }
.hm-cmp-vs { font-size: 18px; font-weight: 900; color: var(--muted); }
.hm-cmp-big { margin: 18px 0 14px; font-size: 18px; font-weight: 700; }
.hm-cmp-big b { color: #d93a3f; font-size: 22px; }
.hm-cmp-note { max-width: 760px; margin: 14px auto 0; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: left; }
@media (max-width: 720px) {
  .hm-cmp-card { padding: 20px 14px; }
  .hm-cmp-h h2 { font-size: 20px; }
  .hm-cmp-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-cmp-vs { display: none; }
  .hm-cmp-box { padding: 14px 8px; }
  .hm-cmp-box b { font-size: 24px; }
  .hm-cmp-box small, .hm-cmp-box span { font-size: 12.5px; }
  .hm-cmp-box em { font-size: 13px; }
  .hm-cmp-big { font-size: 15.5px; }
  .hm-cmp-big b { font-size: 18px; }
}
/* 가격 비교: 비수강자 = 히어로 바로 아래, 수강생·관리자 = 수강료 위 */
.hm-cmp-sec.low { display: none; }
.nd-enrolled .hm-cmp-sec.top { display: none; }
.nd-enrolled .hm-cmp-sec.low { display: block; }
/* 교안 PDF 교재 미리보기 (try.js pdfPreview) */
.try-pdf-li { margin: 8px 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.try-pdf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.try-pdf-pg { margin: 0; }
.try-pdf-pg img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line-2); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); background: #fff; }
.try-pdf-pg figcaption { margin-top: 5px; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .try-pdf-row { grid-template-columns: 1fr 1fr; } .try-pdf-row .try-pdf-pg:first-child { grid-column: 1 / -1; max-width: 60%; margin: 0 auto; } }

/* ---------- 합격 수기 띠 · 대문 조정(합격 환급 · 새 요금) — 2026-10-13, home.js NDPASS 블록 (다섯 과정 같음) ---------- */
.hm-rf { position: relative; margin: -4px 0 14px; max-width: calc(100% - 150px); }
.hm-rf-big { margin: 0; font-family: 'Noto Sans KR', 'Pretendard', sans-serif; font-size: 27px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.3; color: #f6f8f3; }
.hm-rf-sub { margin: 7px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #e8f0ea; }
.hm-rf-sub span { white-space: nowrap; }
.hm-rf-sub a { color: #ffe27a; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hm-price-tag.hm-v2 { padding: 9px 14px 8px; }
.hm-price-tag.hm-v2 small { font-size: 14.5px; }
.hm-price-tag.hm-v2 b { font-size: 21px; }
.hm-v2-rows { display: flex; flex-direction: column; align-items: center; margin: 1px 0 2px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.hm-v2-rows i { font-style: normal; white-space: nowrap; }
.hm-price-tag .hm-v2-bk { margin-top: 2px; padding: 0 6px; border-radius: 4px; background: #d9480f; color: #fff; font-size: 13.5px !important; line-height: 1.5; }
.hm-v2-box { margin: 4px 0 16px; }
.hm-v2-h { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--text-2); }
.hm-v2-plans, .ac-v2-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-v2-plans li, .ac-v2-plans li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); text-align: center; }
.hm-v2-plans span, .ac-v2-plans span { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.hm-v2-plans b, .ac-v2-plans b { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.hm-v2-plans em, .ac-v2-plans em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent-ink); }
.hm-v2-note, .ac-v2-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.hm-v2-note b, .ac-v2-note b { color: var(--warn); }
.ac-v2 { margin: 14px 0 4px; }
.ac-v2-h { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--text-2); }

.hm-pass { scroll-margin-top: calc(var(--hdr-h, 84px) + 14px); }
.hm-pass-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-pass-list.is-empty { grid-template-columns: 1fr; }
.hm-pass-load { grid-column: 1 / -1; margin: 0; padding: 28px 10px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--hm-r, 20px); }
.hm-pc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--hm-r, 20px); box-shadow: var(--shadow); color: var(--text); transition: transform .15s ease, border-color .15s ease; }
.hm-pc:hover { transform: translateY(-2px); border-color: var(--accent); }
.hm-pc-ph { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.hm-pc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-pc-b { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; min-width: 0; }
.hm-pc-b small { font-size: 12.5px; font-weight: 800; color: var(--accent-ink); }
.hm-pc-b b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.hm-pc-ex { font-size: 14px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hm-pc-who { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.hm-pass-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 22px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--hm-r, 20px); background: var(--surface); }
.hm-pass-empty b { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.hm-pass-empty span { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.hm-pass-empty .hm-btn { height: 44px; margin-top: 4px; font-size: 15px; }
.hm-pass-list:not(.is-empty) .hm-pass-empty { justify-content: center; }
@media (max-width: 980px) {
  .hm-rf { max-width: none; }
}
@media (max-width: 860px) {
  .hm-pass-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hm-rf { margin: 0 0 12px; }
  .hm-rf-big { font-size: 22px; }
  .hm-rf-sub { font-size: 13.5px; }
  .hm-rf-sub span { white-space: normal; }
  .hm-price-tag.hm-v2 { flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 2px; }
  .hm-v2-rows { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: 14px; }
  .hm-v2-plans, .ac-v2-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-pass-list { grid-template-columns: 1fr; }
}
.nd-pn-closed a[href^="/pass-write.html"] { display: none !important; }   /* 합격 수기 접수 닫힘(passnote_open=0) */
/* 2026-10-13 요금 개편 기본값 — 칠판 쪽지 "월 1만 원" + 할인 줄(작게) */
.hm-price-tag.hm-v2 .hm-v2-rows { font-size: 13.5px; font-weight: 700; }
.hm-v2-rows i:last-child { font-size: 12.5px; opacity: .85; }
.hm-price-sub small { display: inline-block; margin-top: 4px; }
@media (max-width: 760px) { .hm-price-tag.hm-v2 .hm-v2-rows { font-size: 13px; } }