/* ===================================================================
   WUAZEN 홈 — 미니멀 재구성 (2026-07-26)
   대표님: "홈 배너가 아마추어 같고 레이아웃이 너무 복잡하다.
            카테고리에 있는 내용이 홈에 또 있어 중복된다. 미니멀하게 전문가답게."
   → 원칙 3가지
     ① 홈은 '진입점'이다 — 상세는 하위 페이지 몫. 홈에서 설명하지 않는다.
     ② 화면당 시각 요소 최소화 — 장식(마퀴·초대형 숫자·광원·칩)을 전부 걷어낸다.
     ③ 여백이 위계를 만든다 — 블록 사이를 크게 비우고, 블록 안은 조밀하게.
   premium.css 뒤에 로드되어 홈에서만 적용된다(hm- 접두어).
   =================================================================== */

.hm-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); }

/* ── 1. 히어로 — 이미지 한 장 + 한 문장 ─────────────────────── */
.hm-hero {
  position: relative; overflow: hidden; background: var(--navy); color: var(--ivory);
  min-height: min(92vh, 860px); display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(56px, 8vw, 96px);
}
.hm-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.62; transform: scale(1.03);
}
.hm-hero::after {   /* 좌측을 어둡게 눌러 글자 가독성 확보 */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,27,42,0.96) 0%, rgba(13,27,42,0.86) 38%, rgba(13,27,42,0.34) 72%, rgba(13,27,42,0.2) 100%);
}
.hm-hero-inner { position: relative; z-index: 2; max-width: 20ch; }
.hm-kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
}
.hm-hero h1 {
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 800; line-height: 1.14;
  letter-spacing: -0.045em; color: #FCFBF7; word-break: keep-all;
}
.hm-hero h1 em { font-style: normal; color: var(--gold); }
.hm-hero-sub {
  margin-top: clamp(20px, 2.6vw, 30px); max-width: 26ch;
  font-size: clamp(1rem, 1.35vw, 1.1875rem); line-height: 1.8; color: rgba(247,246,241,0.78); word-break: keep-all;
}
.hm-hero-cta { margin-top: clamp(30px, 4vw, 44px); }

/* ── 2. 선언 한 문장 ────────────────────────────────────────── */
.hm-say { background: var(--ivory); color: var(--text-dark); }
.hm-say-inner { padding: clamp(96px, 13vw, 190px) 0; max-width: 24ch; }
.hm-say p {
  font-size: clamp(1.55rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.45;
  letter-spacing: -0.032em; word-break: keep-all;
}
.hm-say p span { color: var(--gold-ink); }

/* ── 3. 세 갈래 진입점(설명 없음, 링크만) ───────────────────── */
.hm-ways { background: var(--ivory); padding-bottom: clamp(96px, 12vw, 170px); }
.hm-way {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) 30px;
  align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: clamp(28px, 3.4vw, 42px) 0; border-top: 1px solid var(--border-light);
  color: inherit; transition: padding 420ms var(--ease-lux), color 240ms ease-out;
}
.hm-way:last-of-type { border-bottom: 1px solid var(--border-light); }
.hm-way:hover { padding-left: 14px; }
.hm-way b {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; word-break: keep-all;
}
.hm-way span { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); color: var(--text-muted); line-height: 1.7; word-break: keep-all; }
.hm-way i {
  font-style: normal; justify-self: end; font-size: 1.25rem; color: var(--gold-ink);
  transition: transform 420ms var(--ease-lux);
}
.hm-way:hover i { transform: translateX(8px); }

/* ── 4. 증명 한 줄 ──────────────────────────────────────────── */
.hm-proof { background: var(--navy); color: var(--ivory); padding: clamp(52px, 6vw, 78px) 0; }
.hm-proof-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 78px); align-items: baseline; }
.hm-proof-row div { display: flex; align-items: baseline; gap: 10px; }
.hm-proof-row b { font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 800; color: var(--gold); letter-spacing: -0.03em; font-feature-settings: 'tnum'; }
.hm-proof-row span { font-size: 0.9375rem; color: rgba(247,246,241,0.66); word-break: keep-all; }

/* ── 5. 마감 CTA ────────────────────────────────────────────── */
.hm-end { background: var(--ivory); text-align: center; padding: clamp(100px, 13vw, 190px) 0; }
.hm-end h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.35;
  letter-spacing: -0.032em; word-break: keep-all;
}
.hm-end p { margin: clamp(18px, 2vw, 26px) auto 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.8; color: var(--text-muted); word-break: keep-all; }
.hm-end .btn { margin-top: clamp(30px, 4vw, 42px); }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .hm-hero { min-height: auto; padding-top: calc(var(--header-h) + 64px); }
  .hm-hero-inner, .hm-hero-sub, .hm-say-inner { max-width: none; }
  .hm-hero::after { background: linear-gradient(180deg, rgba(13,27,42,0.9) 0%, rgba(13,27,42,0.82) 55%, rgba(13,27,42,0.9) 100%); }
  .hm-way { grid-template-columns: 1fr 26px; row-gap: 10px; }
  .hm-way span { grid-column: 1 / -1; }
  .hm-way i { grid-row: 1; }
  .hm-proof-row { gap: 18px 32px; }
}

/* ── 폭 기준 보정 (2026-07-26 실측) ──────────────────────────
   ★`ch` 단위는 '그 요소 자신의 글자 폭' 기준이다. 컨테이너(16px)에 max-width:20ch를
   주면 약 320px밖에 안 돼서, 그 안의 72px 제목이 "일의 / 무게를 / 줄이고," 처럼
   다섯 줄로 쪼개졌다. 큰 글자 블록의 폭은 px로 잡는다. */
.hm-hero-inner { max-width: 760px; }
.hm-hero h1 { max-width: 760px; }
.hm-hero-sub { max-width: 460px; }
.hm-say-inner { max-width: 920px; }
@media (max-width: 899px) {
  .hm-hero-inner, .hm-hero h1, .hm-hero-sub, .hm-say-inner { max-width: none; }
}

/* 히어로 비주얼 가시성 — 실측상 이미지가 과하게 눌려 골드 라인이 거의 안 보였다.
   글자 쪽(좌측)은 그대로 어둡게 유지하고 우측만 걷어 준다. */
.hm-hero-img { opacity: 0.82; }
.hm-hero::after {
  background: linear-gradient(100deg, rgba(13,27,42,0.97) 0%, rgba(13,27,42,0.9) 34%, rgba(13,27,42,0.42) 62%, rgba(13,27,42,0.12) 100%);
}
@media (max-width: 899px) {
  .hm-hero-img { opacity: 0.5; }
  .hm-hero::after { background: linear-gradient(180deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.84) 55%, rgba(13,27,42,0.92) 100%); }
}

/* 히어로 이미지 scale(1.03)이 모바일에서 4px 가로 스크롤을 만들었다(390 → scrollWidth 394).
   확대는 필요 없으므로 제거한다. */
.hm-hero-img { transform: none; }

/* ★모바일 진입점 행 배치 버그 (2026-07-26 실측)
   `grid-template-columns: 1fr 26px`만 주고 자동배치에 맡겼더니 제목<b>이 26px짜리
   둘째 칸에 들어가 글자가 넘쳤다(가로 4px 초과의 원인이자 시각적으로도 깨짐).
   → 세 요소의 행·열을 명시한다. */
@media (max-width: 899px) {
  .hm-way b    { grid-column: 1; grid-row: 1; }
  .hm-way i    { grid-column: 2; grid-row: 1; align-self: center; }
  .hm-way span { grid-column: 1 / -1; grid-row: 2; }
}