@charset "utf-8";

/* ==========================================================================
   HIYOU MEDIA — 가맹점 모집 대행 (HIYOU-MEDIA-LP-FRANCHISEREC-001)
   landing.css
   --------------------------------------------------------------------------
   이 랜딩은 templates/landing-golden-v1 스캐폴드를 뼈대로만 쓰고 전면
   hand-build 되었다 — POPPLE Golden Reference 의 .hero--challenge 류
   클래스를 재사용하지 않는다(브랜드 UI/컴포넌트 복사 금지 원칙).

   [A] shared/css/base.css 의 --color-*, --font-sans, --wrap-*, --r-*,
       --sh-*, --ring-* 토큰을 이 랜딩 전용 브랜드 값
       (brands/hiyou-media/design-tokens.css 의 --hm-*)으로 매핑한다.
       base.css 의 구조적 컴포넌트(.btn 일부, .field, .chips, .consent,
       .site-header, .sticky-cta, .spinner, .form-alert, .hp)가 이 페이지
       에서도 브랜드 색을 그대로 입도록 하기 위함이다 — 004 랜딩의
       --tpl-* 브릿지 패턴과 동일한 목적.

   [B] 이 페이지의 실제 시각 언어(.hm-* 클래스)는 전부 이 파일에서
       처음부터 정의한다. base.css 의 .section/.h2/.lead/.eyebrow 는
       쓰지 않는다 — Pipeline 컴포넌트 중심의 커스텀 구조라 범용
       템플릿 섹션 클래스가 맞지 않는다.

   [C] Design System v1.0 필수 규칙 재확인
       - 한국어 헤드라인에 Fraunces 사용 금지 (--hm-font-kr 만)
       - 데스크톱 Pipeline: 가로 / 모바일 Pipeline: 세로 (단순 축소 금지)
       - PROOF_REQUIRED 카드는 가짜 숫자 대신 "측정 항목" 프레이밍만

   [D] OFFICIAL COLOR SYSTEM v1.0(2026-08-24) — CTA COLOR RULE
       - CONVERSION(상담·진단 CTA) = Performance Red 채움, 배경 무관하게 동일
       - INFORMATION(탐색·이전·확인류) = Professional Blue outline
       - Red 는 CTA/Funnel 최종 단계/Leak 지점 전용 — 배경색으로 쓰지 않는다
       - 세부 근거는 brands/hiyou-media/design-tokens.css 의
         "COLOR MIGRATION NOTES" / "CONTRAST NOTES" 참고
   ========================================================================== */


/* ==========================================================================
   [A] 토큰 브릿지 — base.css --color-* 등을 --hm-* 로 매핑
   ========================================================================== */
:root {
  --color-primary:        var(--hm-color-primary);
  --color-primary-dark:   var(--hm-color-primary-dark);
  --color-primary-deep:   var(--hm-color-primary-dark);
  --color-primary-light:  var(--hm-color-primary-tint);
  --color-primary-tint:   var(--hm-color-primary-tint);

  --color-primary-border:      rgba(14, 27, 42, .16);
  --color-primary-border-soft: rgba(14, 27, 42, .10);
  --color-primary-hover-soft:  rgba(14, 27, 42, .05);
  --color-primary-on-deep:     rgba(245, 247, 250, .74);

  --color-secondary:       var(--hm-color-secondary);
  --color-secondary-light: var(--hm-color-secondary-tint);

  --grad-deep-from: var(--hm-color-primary);
  --grad-deep-to:   var(--hm-color-primary-dark);
  --grad-visual-from: var(--hm-color-primary);
  --grad-visual-to:   var(--hm-color-primary-dark);

  --sh-cta:     0 8px 22px rgba(14, 27, 42, .22);
  --ring-brand: 0 0 0 4px rgba(37, 99, 235, .22);
  --ring-focus: 0 0 0 3px rgba(37, 99, 235, .28);

  --font-sans: var(--hm-font-kr);

  --color-text:           var(--hm-text-primary);
  --color-text-strong:    var(--hm-text-primary);
  --color-text-soft:      var(--hm-text-secondary);
  --color-text-faint:     var(--hm-text-faint);

  --color-background:      var(--hm-surface-warm-white);
  --color-background-soft: var(--hm-surface-soft-gray);
  --color-line:      rgba(14, 27, 42, .12);
  --color-line-soft: rgba(14, 27, 42, .07);

  --color-danger:    var(--hm-color-error);
  --color-danger-bg: #FBEAEA;
  --color-success:   var(--hm-color-success);

  --wrap-max:  1200px;
  --wrap-body: var(--hm-grid-max-width);
  --wrap-text: 720px;

  --r-sm: var(--hm-radius-sm); --r-md: var(--hm-radius-md);
  --r-lg: var(--hm-radius-lg); --r-xl: var(--hm-radius-lg); --r-pill: var(--hm-radius-lg);

  --sh-sm: var(--hm-shadow-sm);
  --sh-md: var(--hm-shadow-md);
  --sh-lg: var(--hm-shadow-floating);

  --ease: var(--hm-ease-standard);
}

/* select 화살표는 base.css 가 회색 stroke 를 하드코딩하고 있어 브릿지로
   해결되지 않는다 — 이 랜딩에서만 재정의 */
select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


/* ==========================================================================
   [B-0] 헤더 / 푸터
   ========================================================================== */
.hm-header { border-bottom-color: rgba(14, 27, 42, .10); }
.hm-header .site-header__logo img { height: 24px; }

.hm-btn--ghost-nav {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--hm-radius-md);
  background: var(--hm-color-primary);
  color: var(--hm-text-inverse);
  font-family: var(--hm-font-kr);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
}
.hm-btn--ghost-nav:hover { background: var(--hm-color-primary-dark); }

.hm-footer {
  padding: 28px 0;
  background: var(--hm-color-primary-dark);
  color: rgba(245, 247, 250, .64);
  font-size: 13px;
  text-align: center;
}
.hm-footer a { color: rgba(245, 247, 250, .84); text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   [B-1] SECTION 공통 — 리듬: Navy / White / Gray / White / Gray /
                              DataDark / White / Gray / White / Navy
   ========================================================================== */
.hm-section {
  padding-block: var(--hm-section-padding-y-mobile);
  overflow: hidden;
}
.hm-section .wrap { max-width: var(--hm-grid-max-width); }

.hm-hero        { background: linear-gradient(165deg, var(--hm-color-primary) 0%, var(--hm-color-primary-dark) 100%); color: var(--hm-text-inverse); }
.hm-problem     { background: var(--hm-surface-warm-white); }
.hm-solution    { background: var(--hm-surface-soft-gray); text-align: center; }
.hm-services    { background: var(--hm-surface-warm-white); }
.hm-system      { background: var(--hm-surface-soft-gray); text-align: center; }
.hm-performance { background: var(--hm-surface-data-dark); color: var(--hm-text-inverse); text-align: center; }
.hm-process     { background: var(--hm-surface-warm-white); }
.hm-why         { background: var(--hm-surface-soft-gray); }
.hm-consultation{ background: var(--hm-surface-warm-white); }
.hm-final       { background: linear-gradient(165deg, var(--hm-color-primary) 0%, var(--hm-color-primary-dark) 100%); color: var(--hm-text-inverse); text-align: center; }


/* ==========================================================================
   [B-2] 타이포그래피
   ========================================================================== */
.hm-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font: var(--hm-text-label);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hm-color-secondary-dark);
}
.hm-eyebrow--on-dark { color: var(--hm-color-accent); }

.hm-h1 {
  font: var(--hm-text-h1);
  letter-spacing: -.02em;
  color: var(--hm-text-inverse);
  text-wrap: balance;
}

.hm-h2 {
  font: var(--hm-text-h2);
  letter-spacing: -.015em;
  color: var(--hm-text-primary);
  text-wrap: balance;
}
.hm-h2--on-dark { color: var(--hm-text-inverse); }

.hm-lead {
  margin-top: 14px;
  font: var(--hm-text-body-lg);
  color: var(--hm-text-secondary);
}
.hm-lead--on-dark { color: rgba(245, 247, 250, .78); }
.hm-lead strong { color: inherit; font-weight: 700; }
.hm-lead--on-dark strong { color: var(--hm-text-inverse); }


/* ==========================================================================
   [B-3] BUTTON SYSTEM
   --------------------------------------------------------------------------
   Dark 배경 위 CTA = 흰 배경 + Deep Navy 텍스트 (고채도 금지 원칙).
   Light 배경 위 Primary CTA = Mint 채움. Secondary 는 outline.
   ========================================================================== */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--hm-radius-md);
  border: none;
  font-family: var(--hm-font-kr);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--hm-duration-base) var(--hm-ease-standard),
              border-color var(--hm-duration-base) var(--hm-ease-standard),
              transform var(--hm-duration-fast) var(--hm-ease-standard);
}
.hm-btn:active { transform: translateY(1px); }
.hm-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.hm-btn.is-loading { pointer-events: none; }

/* CTA COLOR RULE(v5) — CONVERSION = Red / INFORMATION = Blue.
   primary-* 는 전환(Consultation Form 이동) 버튼 전용 — 밝은/어두운
   배경 어디서나 동일한 Performance Red 채움을 쓴다(배경에 맞춰 색이
   바뀌던 v1~v4 의 "다크=흰배경/라이트=Mint" 규칙은 공식 Color System
   에서 폐기됨). secondary-* 는 정보/탐색용 — Professional Blue outline. */
.hm-btn--primary-dark,
.hm-btn--primary-light {
  background: var(--hm-color-conversion);
  color: var(--hm-white);
  box-shadow: var(--hm-shadow-md);
}
.hm-btn--primary-dark:hover,
.hm-btn--primary-light:hover { background: var(--hm-color-conversion-hover); }

.hm-btn--secondary-dark {
  background: transparent;
  color: var(--hm-color-accent);
  border: 1px solid var(--hm-color-accent);
}
.hm-btn--secondary-dark:hover { background: rgba(59, 130, 246, .12); }

.hm-btn--secondary-light {
  background: transparent;
  /* 밝은 회색 배경(Solution 등) 위에서 4.5:1 을 확보하려면 기본 Blue-600
     보다 한 단계 어두운 톤이 필요하다(실측 5.41:1 — CONTRAST NOTES 참고) */
  color: var(--hm-color-secondary-dark);
  border: 1px solid var(--hm-color-secondary-dark);
}
.hm-btn--secondary-light:hover { background: var(--hm-color-secondary-tint); }

.hm-btn--block { width: 100%; }

.hm-btn .spinner { border-top-color: currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.hm-btn .btn__arrow { font-size: 17px; line-height: 1; transform: translateY(-1px); }


/* ==========================================================================
   [B-4] PIPELINE — 핵심 Visual Language
   --------------------------------------------------------------------------
   상태: inactive(회색) / active(Mint 강조) / complete(Teal 채움) / leak(적색 경고)
   데스크톱은 가로 트랙, 모바일은 세로 트랙 — landing.js 가 시퀀스 활성화를
   맡고, 이 CSS 는 상태 클래스별 정적 스타일 + reduced-motion 대응만 한다.
   ========================================================================== */
.hm-pipeline__track {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hm-pipeline__node-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 10px 0;
}
.hm-pipeline__line {
  flex: 0 0 auto;
  width: 2px;
  align-self: stretch;
  min-height: 28px;
  background: var(--hm-pipeline-line-inactive);
  margin-left: 21px;
}
.hm-pipeline__node {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--hm-radius-md);
  background: var(--hm-pipeline-node-inactive-bg);
  border: var(--hm-pipeline-node-inactive-border);
  color: var(--hm-text-primary);
  font-family: var(--hm-font-kr);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--hm-duration-slow) var(--hm-ease-standard),
              border-color var(--hm-duration-slow) var(--hm-ease-standard),
              color var(--hm-duration-slow) var(--hm-ease-standard);
}
/* Hero/Problem/Solution/Final 은 v2 부터 아래 [B-4b] FLOW / [B-4c] FUNNEL
   컴포넌트를 쓴다 — System(Extended) 전용 상태만 이 블록에 남긴다. */

/* System(Extended) 변형 — 인터랙티브 버튼 */
.hm-pipeline--extended { margin-top: var(--hm-space-6); text-align: left; }
.hm-pipeline__track--extended .hm-pipeline__node-wrap {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.hm-pipeline__track--extended .hm-pipeline__node-wrap:hover .hm-pipeline__node,
.hm-pipeline__track--extended .hm-pipeline__node-wrap:focus-visible .hm-pipeline__node {
  background: var(--hm-pipeline-node-hover-bg);
  border-color: var(--hm-pipeline-node-hover-border);
}
/* 현재 선택된 1단계만 강한 강조(solid Blue + White) */
.hm-pipeline__track--extended .hm-pipeline__node-wrap.is-active .hm-pipeline__node {
  background: var(--hm-pipeline-node-active-bg);
  border-color: var(--hm-pipeline-node-active-bg);
  color: var(--hm-pipeline-node-active-text);
  font-weight: 700;
}
/* 지나간 단계(is-done) — solid 채움을 쓰지 않는다(7개가 전부 버튼처럼
   보이던 문제의 원인이었다). inactive 와 같은 White/Light-Gray 표면에
   Blue 테두리 + Navy 텍스트만 남겨 "지나갔다"는 신호만 은은하게 준다. */
.hm-pipeline__track--extended .hm-pipeline__node-wrap.is-done .hm-pipeline__node {
  background: var(--hm-surface-white);
  border-color: var(--hm-color-secondary);
  color: var(--hm-color-primary);
}
.hm-pipeline__track--extended .hm-pipeline__node { font-family: var(--hm-font-mono); font-size: 13px; letter-spacing: .02em; }

/* 데스크톱 전용 — 7단계가 전부 한 줄에 들어오면 "AI가 만든 박스 나열"처럼
   단조롭다. 홀수/짝수 단계를 위아래로 어긋나게 두어(staggered) 같은
   가로 한 줄이라도 리듬이 생기게 한다. 태블릿(768~1023px)은 어긋남 없이
   플랫하게 둔다 — 이미 2줄로 wrap 되므로 stagger 를 더하면 겹침 위험이 있다. */
@media (min-width: 1024px) {
  .hm-pipeline__track--extended .hm-pipeline__node-wrap:nth-child(even) {
    transform: translateY(22px);
  }
  .hm-pipeline__track--extended .hm-pipeline__node-wrap:nth-child(odd) {
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce), (max-width: 1023px) {
  .hm-pipeline__track--extended .hm-pipeline__node-wrap { transform: none; }
}

.hm-system__detail {
  margin-top: var(--hm-space-6);
  padding: 20px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  text-align: left;
  max-width: 560px;
  margin-inline: auto;
}
.hm-system__detail-title {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--hm-color-secondary-dark);
  letter-spacing: .04em;
}
.hm-system__detail-desc {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-text-primary);
}

/* Feedback Loop — OPTIMIZE 가 끊기지 않고 다음 TARGET 전략으로 이어지는
   continuous improvement 구조. 7단계 버튼 자체는 건드리지 않고, track
   바로 아래에 옅은 점선(위쪽 "되돌아가는 경로" 암시) + 텍스트 인디케이터
   만 추가한다 — 지그재그 stagger 배치와 무관하게 항상 안전하게 렌더링. */
.hm-pipeline__loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--hm-space-6);
  padding-top: var(--hm-space-4);
  border-top: 1px dashed var(--hm-color-secondary-tint);
  font-family: var(--hm-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hm-color-secondary-dark);
}
.hm-pipeline__loop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--hm-color-secondary-tint);
  font-size: 13px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .hm-pipeline__loop { margin-top: var(--hm-space-7); }
}


/* ==========================================================================
   DIAGNOSTIC → EXECUTION BRIDGE (신규) — 경량 전환, .hm-section 아님
   ========================================================================== */
.hm-bridge { background: var(--hm-surface-white); padding-block: 40px; }
.hm-bridge .wrap { max-width: 560px; text-align: center; }
.hm-bridge p {
  font-family: var(--hm-font-kr);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--hm-color-primary);
}
.hm-bridge__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--hm-color-secondary-tint);
  color: var(--hm-color-secondary-dark);
  font-size: 14px;
  font-weight: 700;
}


/* ==========================================================================
   [B-4b] FLOW — Hero 전용, 라인아트 리드플로우
   --------------------------------------------------------------------------
   Reference landing #7(다크 히어로 위 라인아트 다이어그램) 패턴 추출.
   박스 4개를 나열하지 않고, 얇은 선 위를 점 하나가 흐르는 것으로
   "리드가 이동하고 연결된다"는 인상만 남긴다 — Design Intelligence 문서의
   "component hidden 대신 절제된 라인" 원칙과 같은 방향.
   ========================================================================== */
.hm-flow__caption {
  font-family: var(--hm-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(245, 247, 250, .5);
  margin-bottom: var(--hm-space-6);
}
.hm-flow { margin-top: 4px; }
.hm-flow__line {
  position: relative;
  height: 2px;
  background: rgba(245, 247, 250, .2);
  margin: 0 5px;
}
.hm-flow__tick {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hm-color-accent);
  border: 2px solid var(--hm-color-primary);
  transform: translate(-50%, -50%);
}
.hm-flow__tick:nth-child(1) { left: 0%; }
.hm-flow__tick:nth-child(2) { left: 33.333%; }
.hm-flow__tick:nth-child(3) { left: 66.666%; }
.hm-flow__tick:nth-child(4) {
  left: 100%;
  /* 가맹 전환(최종 Conversion) 단계만 Red — 나머지 3단계(광고/문의/상담)는
     Information(Blue)로 남긴다. */
  background: var(--hm-color-conversion);
}
.hm-flow__dot {
  position: absolute;
  top: 50%; left: 0%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(37, 99, 235, .6);
  transform: translate(-50%, -50%);
  animation: hmFlowMove 3.4s var(--hm-ease-standard) infinite;
}
@keyframes hmFlowMove {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.hm-flow__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--hm-space-4);
}
.hm-flow__label {
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(245, 247, 250, .5);
}
.hm-flow__label.is-active { color: var(--hm-color-accent); }
@media (prefers-reduced-motion: reduce) {
  .hm-flow__dot { animation: none; left: 6%; opacity: 1; }
}


/* ==========================================================================
   [B-4c] FUNNEL — Problem/Solution/Final 공용, 핵심 스토리텔링 컴포넌트
   --------------------------------------------------------------------------
   Reference 조사 결과 순수 트라페조이드 드롭오프 차트는 라이브러리에
   없었다(cv_s 41장 전수 검사 결과) — clip-path 로 직접 구성했다.
   Problem = --broken(균열 + leak 콜아웃), Solution/Final = --sealed
   (동일 실루엣, 봉합 표시) 로 두 섹션이 "깨짐 → 연결"로 이어지게 한다.
   ========================================================================== */
.hm-funnel {
  position: relative;
  max-width: 500px;
  margin: var(--hm-space-7) auto 0;
}
.hm-funnel__stage {
  position: relative;
  height: 58px;
  margin: 3px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
  font-family: var(--hm-font-kr);
  font-size: 15px;
  font-weight: 600;
  color: var(--hm-text-inverse);
  background: var(--hm-color-secondary);
  transition: background-color var(--hm-duration-slow) var(--hm-ease-standard);
}
.hm-funnel__stage:first-child { margin-top: 0; clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); }
.hm-funnel__stage[data-stage="1"] { width: 100%; }
.hm-funnel__stage[data-stage="2"] { width: 82%; }
.hm-funnel__stage[data-stage="3"] { width: 60%; }
/* stage4(가맹 전환) 너비만 공통 — 색은 variant 별로 다르다:
   PROBLEM(--broken)은 "문제 발생 지점(leak)만 Red" 원칙이라 stage4 도
   기본 Blue 를 그대로 쓰고, SOLUTION/FINAL(--sealed)만 최종 전환을
   Red 로 강조한다(아래 --sealed 전용 규칙). */
.hm-funnel__stage[data-stage="4"] { width: 40%; }

/* --broken (Problem): 새는 지점(문제 발생) = Conversion 과 같은 Red 계열로 강조.
   text-inverse(#F5F7FA)는 Red 위에서 순백보다 대비가 살짝 낮아
   (3.94:1) 이 스테이지만 순백으로 명시한다(4.23:1, stage4 와 동일). */
.hm-funnel--broken .hm-funnel__stage--leak { background: var(--hm-color-conversion); color: var(--hm-white); }
.hm-funnel__leak {
  position: absolute;
  right: 10%;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hm-color-error);
  box-shadow: 0 0 0 5px rgba(185, 28, 28, .18);
  animation: hmLeakEscape 2.2s var(--hm-ease-standard) infinite;
}
@keyframes hmLeakEscape {
  0%   { transform: translate(0, -50%); opacity: 1; }
  70%  { transform: translate(18px, 14px); opacity: 0; }
  100% { transform: translate(18px, 14px); opacity: 0; }
}
.hm-funnel__leak-label {
  position: absolute;
  right: 2%;
  top: 44px;
  transform: translateY(-100%);
  padding: 5px 11px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-color-error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
}
.hm-funnel__leak-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 20px;
  background: var(--hm-color-error);
}
@media (prefers-reduced-motion: reduce) {
  .hm-funnel__leak { animation: none; }
}


/* ==========================================================================
   [B-4d] CONNECTED RECRUITMENT SYSTEM — Solution 전용(v6, Funnel 대체)
   --------------------------------------------------------------------------
   Solution 은 "선형 Funnel"이 아니라 "순환 연결 시스템"을 보여줘야 한다
   (Problem 의 Funnel vocabulary 와 절대 중복되지 않게). 데스크톱은 원형
   hub-and-spoke(6개 노드가 하나의 고리로 연결), 좁은 화면은 같은 개념의
   세로 연결 체인 — 폭이 좁아지지 않는 동일폭 pill 노드라 Funnel 실루엣과
   시각적으로 명확히 구분된다. "가맹 전환" 노드만 Conversion Red.
   ========================================================================== */
.hm-system-map { margin-top: var(--hm-space-7); }
.hm-system-map--ring { display: none; }

/* --- Mobile/Tablet: 세로 연결 체인 --- */
.hm-system-map--chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  margin-inline: auto;
}
.hm-system-map__chain-node {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-color-secondary);
  color: var(--hm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.hm-system-map__chain-node:not(:last-child) { margin-bottom: 22px; }
.hm-system-map__chain-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; height: 22px;
  background: var(--hm-color-secondary-tint);
  transform: translateX(-1px);
}
.hm-system-map__chain-node.hm-system-map__node--final { background: var(--hm-color-conversion); }
.hm-system-map__chain-node:last-child { background: transparent; border: 1px dashed var(--hm-color-secondary-dark); color: var(--hm-color-secondary-dark); font-size: 12.5px; font-weight: 500; }

/* --- Desktop(1024+): 원형 hub-and-spoke, section 폭을 실제로 활용 --- */
@media (min-width: 1024px) {
  .hm-system-map--chain { display: none; }
  .hm-system-map--ring {
    display: block;
    position: relative;
    width: 720px;
    height: 720px;
    max-width: 100%;
    margin-inline: auto;
  }
  .hm-system-map__ring-line {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px dashed rgba(37, 99, 235, .3);
  }
  .hm-system-map__hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 148px; height: 148px;
    border-radius: 50%;
    background: var(--hm-color-primary);
    color: var(--hm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--hm-font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.35;
    box-shadow: var(--hm-shadow-md);
    z-index: 2;
  }
  .hm-system-map__node {
    position: absolute;
    top: 50%; left: 50%;
    width: 128px;
    margin-left: -64px;
    margin-top: -22px;
    transform: rotate(calc(60deg * var(--i))) translate(0, -300px) rotate(calc(-60deg * var(--i)));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--hm-radius-lg);
    background: var(--hm-color-secondary);
    color: var(--hm-white);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--hm-shadow-sm);
    z-index: 1;
  }
  .hm-system-map__node--final { background: var(--hm-color-conversion); }
}


/* ==========================================================================
   [B-5] PROBLEM
   ========================================================================== */
.hm-problem__grid { display: grid; gap: var(--hm-space-6); }
.hm-pain-list { display: grid; gap: 10px; margin-top: var(--hm-space-5); }
.hm-pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--hm-radius-md);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hm-text-primary);
}
.hm-pain-list__mark {
  flex: 0 0 auto;
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--hm-color-error);
  padding-top: 2px;
}
.hm-turn {
  margin-top: var(--hm-space-5);
  padding: 20px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-color-primary);
  color: rgba(245, 247, 250, .7);
  font-size: 15px;
  line-height: 1.6;
}
.hm-turn strong { display: block; margin-top: 6px; font-size: 19px; color: var(--hm-color-accent); font-weight: 700; }


/* ==========================================================================
   [B-5b] TRUST STRIP — Connected Capability Rail (v4)
   --------------------------------------------------------------------------
   6-card grid 대신 화살표로 이어진 한 줄 rail. Solution/Consultation Benefit
   과 같은 mint tint 배경을 써서 "연결 섹션" 이라는 역할을 시각적으로 통일.
   ========================================================================== */
/* 실측 결과 --hm-text-secondary(Gray-500)가 이 섹션의 tint 배경 위에서
   4.44:1 로 AA(4.5:1) 근소 미달이었다 — 이 두 섹션(mint-tint 배경)에서만
   본문 텍스트를 한 단계 어둡게(Gray-600, 6.94:1) 조정한다. */
.hm-trust,
.hm-preform { --hm-text-secondary: var(--hm-gray-600); }

.hm-trust { background: var(--hm-color-secondary-tint); text-align: center; }
.hm-rail { margin-top: var(--hm-space-6); }
.hm-rail__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 6px;
}
.hm-rail__item {
  padding: 8px 14px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  color: var(--hm-text-primary);
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.hm-rail__arrow { color: var(--hm-color-secondary-dark); font-size: 13px; font-weight: 700; }
@media (max-width: 479px) {
  .hm-rail__track { flex-direction: column; }
  .hm-rail__arrow { transform: rotate(90deg); }
}


/* ==========================================================================
   [B-6] SERVICES — Feature + Secondary (동일 카드 4개 반복 금지)
   --------------------------------------------------------------------------
   1개 feature 카드(전략)를 크게, 나머지 3개는 보조 스택으로 — Reference
   inventory 의 "균일 그리드를 하나만 깨라" 원칙 적용. 각 카드는 System
   섹션의 해당 단계를 태그로 표시해 "어디에서 개입하는지" 보이게 한다.
   ========================================================================== */
.hm-service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: var(--hm-space-6);
}
.hm-service-grid__secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.hm-service-card {
  padding: 26px 22px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  transition: border-color var(--hm-duration-base) var(--hm-ease-standard);
}
.hm-service-card:hover { border-color: var(--hm-color-secondary); }
.hm-service-card__stage {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--hm-color-secondary-dark);
  margin-bottom: 12px;
}
.hm-service-card__no {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 13px;
  color: var(--hm-color-data);
  margin-bottom: 10px;
}
.hm-service-card h3 { font-size: 18px; font-weight: 600; color: var(--hm-text-primary); letter-spacing: -.01em; }
.hm-service-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--hm-text-secondary); }

.hm-service-card--feature {
  background: var(--hm-color-primary);
  border-color: var(--hm-color-primary);
}
.hm-service-card--feature .hm-service-card__stage { color: var(--hm-color-accent); }
.hm-service-card--feature .hm-service-card__no { color: rgba(245, 247, 250, .5); }
.hm-service-card--feature h3 { color: var(--hm-text-inverse); font-size: 22px; }
.hm-service-card--feature p { color: rgba(245, 247, 250, .78); font-size: 15px; }


/* ==========================================================================
   [B-6b] INDUSTRY EXPERTISE — Industry Decision Matrix (v3: selector)
   --------------------------------------------------------------------------
   업종 버튼 선택 → 아래 패널의 변수가 바뀐다. 스와이프에 기대지 않으므로
   모바일도 동일 마크업/동작(터치=클릭)을 그대로 쓴다.
   ========================================================================== */
.hm-industry-selector { margin-top: var(--hm-space-6); }
.hm-industry-selector__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.hm-industry-selector__tab {
  padding: 13px 14px;
  border-radius: var(--hm-radius-md);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  color: var(--hm-text-secondary);
  font-family: var(--hm-font-kr);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--hm-duration-base) var(--hm-ease-standard),
              background-color var(--hm-duration-base) var(--hm-ease-standard),
              color var(--hm-duration-base) var(--hm-ease-standard);
}
.hm-industry-selector__tab:hover { border-color: var(--hm-color-secondary); }
.hm-industry-selector__tab.is-active {
  /* Industry 는 Information 영역 — Selected 상태도 Navy 가 아니라
     공식 Professional Blue(rule 7)를 그대로 쓴다. */
  background: var(--hm-color-secondary);
  border-color: var(--hm-color-secondary);
  color: var(--hm-white);
}
.hm-industry-selector__panel {
  margin-top: var(--hm-space-5);
  padding: 22px 24px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-soft-gray);
  border: var(--hm-border-subtle-on-light);
}
.hm-industry-selector__panel-label {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hm-text-faint);
}
.hm-industry-selector__panel-label strong {
  color: var(--hm-color-secondary-dark);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--hm-font-kr);
  font-size: 13px;
}
.hm-industry-selector__vars { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.hm-industry-selector__vars em {
  font-style: normal;
  padding: 7px 14px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  color: var(--hm-text-primary);
  font-size: 13.5px;
  font-weight: 600;
}
.hm-industry-note {
  margin-top: var(--hm-space-4);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hm-text-faint);
}


/* ==========================================================================
   [B-6c] FRANCHISE GROWTH TEAM — Role Roster (v3)
   --------------------------------------------------------------------------
   카드 그리드 대신 가로 로스터 행. 각 역할이 담당하는 System 7단계 구간을
   .hm-team__seg 7칸으로 표시해 "어디에 투입되는지"를 다른 섹션과 다른
   시각 문법(막대 세그먼트)으로 보여준다. 실사진 없음 — slot 만 hidden.
   ========================================================================== */
.hm-team { margin-top: var(--hm-space-6); border-top: var(--hm-border-subtle-on-light); }
.hm-team__row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 26px 0;
  border-bottom: var(--hm-border-subtle-on-light);
}
.hm-team__no {
  font-family: var(--hm-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--hm-color-data);
  padding-top: 3px;
}
.hm-team__photo { display: none; } /* 실제 인물 사진 확보 시 hidden 제거 + 이미지 삽입 */
.hm-team__body h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--hm-text-primary); }
.hm-team__role-desc { margin-top: 4px; font-size: 13.5px; color: var(--hm-text-secondary); }
.hm-team__duties { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.hm-team__duties li {
  padding: 5px 11px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-surface-soft-gray);
  color: var(--hm-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}
.hm-team__pipeline { grid-column: 1 / -1; margin-top: 20px; max-width: 360px; }
.hm-team__pipeline-label {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--hm-color-secondary-dark);
  margin-bottom: 8px;
}
.hm-team__map { display: flex; gap: 4px; }
.hm-team__seg { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--hm-surface-soft-gray); }
.hm-team__seg.is-owned { background: var(--hm-color-secondary); }
.hm-team__output {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-color-secondary-tint);
  color: var(--hm-color-secondary-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.hm-team__legend { margin-top: var(--hm-space-4); font-size: 12px; color: var(--hm-text-faint); }


/* ==========================================================================
   [B-6d] HIYOU FRANCHISE RECRUITMENT DIAGNOSTIC — 5-Axis Framework (신규)
   --------------------------------------------------------------------------
   "판단 기준"(5-Axis) 을 "실행 프로세스"(System 7단계) 와 시각적으로
   분리한다 — 세로 단일열(Roadmap 의 좌우 지그재그와 다름) + 마름모
   번호 배지(Roadmap 의 원형 배지와 다름) + 하단 순환(loop) 표시.
   ========================================================================== */
.hm-framework { background: var(--hm-surface-white); }
.hm-framework-map { position: relative; margin-top: var(--hm-space-7); max-width: 640px; }
.hm-framework-map__spine {
  position: absolute;
  left: 21px; top: 21px; bottom: 60px;
  width: 2px;
  background: var(--hm-color-secondary-tint);
}
.hm-framework-map__axis {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  margin-bottom: var(--hm-space-6);
}
.hm-framework-map__no {
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  margin: 6px auto 0;
  border-radius: 6px;
  background: var(--hm-color-secondary);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-framework-map__no em {
  display: block;
  transform: rotate(-45deg);
  font-style: normal;
  font-family: var(--hm-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--hm-white);
}
.hm-framework-map__body h3 {
  font-family: var(--hm-font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--hm-text-primary);
  padding-top: 4px;
}
.hm-framework-map__q { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--hm-text-secondary); }
.hm-framework-map__tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.hm-framework-map__tags em {
  font-style: normal;
  padding: 4px 10px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-color-secondary-tint);
  color: var(--hm-color-secondary-dark);
  font-size: 12px;
  font-weight: 600;
}
.hm-framework-map__loop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--hm-space-4);
  padding: 14px 16px;
  border-radius: var(--hm-radius-md);
  background: var(--hm-surface-soft-gray);
  font-size: 13px;
  line-height: 1.55;
  color: var(--hm-text-secondary);
}
.hm-framework-map__loop-icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hm-color-secondary-tint);
  color: var(--hm-color-secondary-dark);
  font-size: 15px;
  font-weight: 700;
}


/* ==========================================================================
   [B-7] PERFORMANCE INTELLIGENCE — Measurement Architecture
   --------------------------------------------------------------------------
   4개 카드 그리드를 버리고 5단계 세로 flow diagram 으로 바꿨다.
   PROOF_REQUIRED 라는 내부 상태 문구는 방문자 화면에 노출하지 않는다
   ([data-proof-required] 속성으로만 남기고, 시각 요소는 만들지 않는다).
   ========================================================================== */
.hm-measure-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin: var(--hm-space-7) auto 0;
}
.hm-measure-flow__node {
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--hm-radius-lg);
  background: rgba(245, 247, 250, .04);
  border: var(--hm-border-subtle-on-dark);
  text-align: left;
  opacity: .4;
  transition: opacity var(--hm-duration-slow) var(--hm-ease-standard);
}
.hm-measure-flow__node.is-lit { opacity: 1; }
/* CONVERSION 노드만 Red — 나머지 4단계(CHANNEL/CAMPAIGN/LEAD/CONSULTATION)는
   기본 .hm-measure-flow__node 규칙(Blue 계열 tag)을 그대로 쓴다. */
.hm-measure-flow__node--final { background: rgba(229, 57, 53, .1); border-color: rgba(229, 57, 53, .45); }
.hm-measure-flow__node--final .hm-measure-flow__tag { color: var(--hm-color-conversion); }
.hm-measure-flow__tag {
  display: block;
  font-family: var(--hm-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--hm-color-data);
}
.hm-measure-flow__desc { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--hm-text-inverse); }
.hm-measure-flow__connector {
  width: 2px;
  height: 22px;
  background: rgba(245, 247, 250, .22);
}
.hm-measure-flow__meta {
  display: block;
  margin-top: 8px;
  font-family: var(--hm-font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(245, 247, 250, .6);
}
.hm-measure-flow__meta--center { text-align: center; margin-top: 0; }

/* 다중 소스(META/NAVER/CONTENT/OTHER) → 하나로 합류하는 실제 측정 아키텍처 구조 */
.hm-measure-flow__sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  padding-bottom: 14px;
}
.hm-measure-flow__sources::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 1px;
  background: rgba(245, 247, 250, .18);
}
.hm-measure-flow__source {
  padding: 7px 14px;
  border-radius: var(--hm-radius-sm);
  background: rgba(245, 247, 250, .06);
  border: var(--hm-border-subtle-on-dark);
  color: rgba(245, 247, 250, .82);
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
}
.hm-measure-flow__merge {
  width: 2px;
  height: 18px;
  background: rgba(245, 247, 250, .22);
  margin-bottom: 4px;
}
.hm-measure-flow__note {
  margin-top: var(--hm-space-4);
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(245, 247, 250, .48);
}


/* ==========================================================================
   [B-8] PROCESS — Timeline (scroll-progress spine)
   --------------------------------------------------------------------------
   landing.js 가 스크롤 진행률에 따라 --hm-timeline-fill-fill 을 갱신하고,
   지나간 단계 원에 .is-passed 를 붙인다. JS 가 없거나 reduced-motion 이면
   spine 자체가 옅게만 보이고(정적), 내용은 그대로 읽힌다.
   ========================================================================== */
.hm-timeline-wrap { position: relative; margin-top: var(--hm-space-6); }
.hm-timeline__spine {
  position: absolute;
  left: 16px; top: 17px; bottom: 17px;
  width: 2px;
  background: var(--color-line);
}
.hm-timeline__spine-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--hm-color-secondary);
  transition: height .1s linear;
}
.hm-timeline { display: grid; gap: 0; }
.hm-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding-bottom: 26px;
}
.hm-timeline li:last-child { padding-bottom: 0; }
.hm-timeline__no {
  position: relative; z-index: 1;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hm-surface-white);
  border: 1.5px solid var(--hm-color-secondary);
  color: var(--hm-color-secondary-dark);
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 500;
  transition: background-color var(--hm-duration-base) var(--hm-ease-standard),
              color var(--hm-duration-base) var(--hm-ease-standard);
}
li.is-passed .hm-timeline__no {
  background: var(--hm-color-secondary);
  color: var(--hm-text-inverse);
}
.hm-timeline h3 {
  padding-top: 4px;
  font-family: var(--hm-font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hm-text-primary);
}
.hm-timeline p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--hm-text-secondary); }
.hm-timeline__output {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-color-secondary-tint);
  color: var(--hm-color-secondary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- Desktop(1024+): 중앙 spine 기준 좌우 지그재그 —
   7단계가 왼쪽 한 줄에 몰리고 오른쪽이 텅 비던 문제(v6 이전)를
   spine 을 중앙으로 옮기고 홀/짝 단계를 좌우에 번갈아 배치해 해결한다.
   내용은 무변경, 배치만 바꿨다. */
@media (min-width: 1024px) {
  .hm-timeline__spine { left: 50%; transform: translateX(-1px); }
  .hm-timeline li {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 0 40px;
    padding-bottom: 44px;
    align-items: start;
  }
  .hm-timeline__no { grid-column: 2; justify-self: center; }
  .hm-timeline li > div { grid-column: 1; text-align: right; }
  .hm-timeline li:nth-child(even) > div { grid-column: 3; text-align: left; }
}


/* ==========================================================================
   [B-9] WHY HIYOU — Comparison
   ========================================================================== */
.hm-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: var(--hm-space-6);
}
.hm-compare__col {
  padding: 24px 22px;
  border-radius: var(--hm-radius-lg);
}
.hm-compare__tag {
  display: inline-block;
  font-family: var(--hm-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  margin-bottom: 12px;
}
.hm-compare__mark { display: flex; gap: 5px; margin-bottom: 10px; }
.hm-compare__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-line); }
.hm-compare__dot--off { background: var(--hm-color-error); }
.hm-compare__dot--on { background: var(--hm-color-secondary); }
.hm-compare__col h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hm-compare__col ul { margin-top: 14px; display: grid; gap: 10px; }
.hm-compare__col li { padding-left: 20px; position: relative; font-size: 14px; line-height: 1.55; }

.hm-compare__col--against {
  background: transparent;
  border: 1px dashed rgba(14, 27, 42, .24);
}
.hm-compare__col--against .hm-compare__tag { color: var(--hm-text-faint); }
.hm-compare__col--against h3 { color: var(--hm-text-faint); }
.hm-compare__col--against li { color: var(--hm-text-secondary); }
.hm-compare__col--against li::before { content: "–"; position: absolute; left: 0; color: var(--hm-text-faint); }

.hm-compare__col--for {
  background: var(--hm-surface-white);
  border: 1.5px solid var(--hm-color-secondary);
  box-shadow: var(--hm-shadow-sm);
}
.hm-compare__col--for .hm-compare__tag { color: var(--hm-color-secondary-dark); }
.hm-compare__col--for h3 { color: var(--hm-color-secondary-dark); }
.hm-compare__col--for li { color: var(--hm-text-primary); font-weight: 500; }
.hm-compare__col--for li::before { content: "✓"; position: absolute; left: 0; color: var(--hm-color-secondary); font-weight: 700; }


/* ==========================================================================
   [B-9b] CONSULTING OUTCOME — Pre-Form (v8)
   --------------------------------------------------------------------------
   "상담 신청하면 뭘 받는지"의 불확실성만 없앤다. Trust Strip 과 같은
   Blue tint 배경 — 같은 "연결 섹션" 역할임을 시각적으로 통일.
   ========================================================================== */
.hm-preform { background: var(--hm-color-secondary-tint); text-align: center; }
.hm-preform__product {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--hm-radius-sm);
  background: var(--hm-surface-white);
  border: 1px solid var(--hm-color-secondary);
  color: var(--hm-color-secondary-dark);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hm-preform__product span {
  font-family: var(--hm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--hm-text-secondary);
}
.hm-preform__list {
  margin-top: var(--hm-space-6);
  display: grid;
  gap: 20px;
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.hm-preform__list li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.hm-preform__no { font-family: var(--hm-font-mono); font-weight: 700; font-size: 13px; color: var(--hm-color-secondary-dark); padding-top: 2px; }
.hm-preform__list h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--hm-text-primary); }
.hm-preform__list p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--hm-text-secondary); }
.hm-preform .hm-hero__cta-row { justify-content: center; margin-top: var(--hm-space-6); }


/* ==========================================================================
   [B-10] CONSULTATION FORM
   ========================================================================== */
.hm-consultation__grid { display: grid; gap: var(--hm-space-6); }
.hm-consultation__reassure {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--hm-text-faint);
}
.hm-form-panel {
  padding: 24px 20px;
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-white);
  border: var(--hm-border-subtle-on-light);
  box-shadow: var(--hm-shadow-sm);
}
.hm-form-group__title {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hm-color-secondary-dark);
  padding: 0;
  border: none;
}

/* --- 2-Step Form (Phase 14) --- */
.hm-form-step { border: none; padding: 0; margin: 0; min-width: 0; }
.hm-form-step[hidden] { display: none; }
.hm-form-step__actions { display: flex; gap: 10px; }
.hm-form-step__actions .hm-btn--secondary-light { width: auto; flex: 0 0 auto; padding: 0 20px; }
.hm-form-step__actions #lead-submit { flex: 1 1 auto; }

.hm-form-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.hm-form-progress__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hm-text-faint);
}
.hm-form-progress__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--hm-surface-soft-gray);
  color: var(--hm-text-faint);
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.hm-form-progress__step.is-active { color: var(--hm-color-secondary-dark); }
.hm-form-progress__step.is-active .hm-form-progress__no { background: var(--hm-color-secondary); color: var(--hm-text-inverse); }
.hm-form-progress__step.is-done .hm-form-progress__no { background: var(--hm-color-secondary-tint); color: var(--hm-color-secondary-dark); }
.hm-form-progress__bar { flex: 1 1 auto; height: 1px; background: var(--color-line); }


/* ==========================================================================
   [B-11] FINAL CTA — Typography-led, 1단 중앙 정렬(v6, Funnel 제거)
   --------------------------------------------------------------------------
   Headline → Lead 사이는 좁게, Lead → CTA 사이는 넓게 둬서 "설명을 다
   읽고 나면 CTA로 시선이 자연스럽게 떨어지는" 위계를 만든다(section 7).
   ========================================================================== */
.hm-final__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.hm-final__headline { text-wrap: balance; }
.hm-final .hm-lead { max-width: 480px; margin-inline: auto; }
.hm-final__cta-btn {
  display: flex;
  width: 100%;
  max-width: 380px;
  margin: var(--hm-space-7) auto 0;
}
.hm-final__note { margin-top: 14px; font-size: 13px; color: rgba(245, 247, 250, .58); }


/* ==========================================================================
   [B-12] STICKY CTA — Mobile
   ========================================================================== */
.hm-sticky-cta { background: rgba(248, 250, 252, .97); border-top-color: var(--color-line); }
.hm-sticky-cta .sticky-cta__label { color: var(--hm-color-secondary-dark); }
.hm-sticky-cta .sticky-cta__sub   { color: var(--hm-text-primary); }
.hm-sticky-cta .hm-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 46px;
  padding: 0 20px;
  font-size: 14.5px;
}


/* ==========================================================================
   반응형 — Desktop: 가로 Pipeline / Mobile: 세로 Pipeline (단순 축소 금지)
   ========================================================================== */
@media (min-width: 768px) {
  .hm-section { padding-block: var(--hm-section-padding-y-tablet); }
  .hm-compare { grid-template-columns: repeat(2, 1fr); }

  /* PROCESS — 세로 Roadmap 을 태블릿에서 유지한다("하나로 연결된
     Roadmap" 요구 — 2열로 쪼개면 연결이 시각적으로 끊긴다). System(가로
     Pipeline)과 의도적으로 다른 시각 문법. 데스크톱(1024+)은 중앙 spine
     좌우 지그재그로 폭을 넓힌다(아래 1024px 미디어쿼리). */
  .hm-timeline-wrap { max-width: 640px; margin-inline: auto; }

  .hm-team__row { grid-template-columns: 44px 1fr 300px; align-items: start; }
  .hm-team__pipeline { grid-column: 3; margin-top: 0; max-width: none; }

  .hm-industry-selector__tabs { grid-template-columns: repeat(3, 1fr); }

  /* Pipeline: 압축된 가로 트랙으로 전환(태블릿) */
  .hm-pipeline__track { flex-direction: row; align-items: stretch; }
  .hm-pipeline__node-wrap { flex-direction: column; padding: 0; }
  .hm-pipeline__line { width: auto; height: 2px; min-height: 0; align-self: center; flex: 1 1 auto; margin: 0 6px; }
  .hm-pipeline__node-wrap:first-child .hm-pipeline__line { display: none; }
  .hm-pipeline__node { white-space: nowrap; }

  .hm-pipeline--extended .hm-pipeline__track--extended { flex-direction: row; flex-wrap: wrap; }
  .hm-pipeline__track--extended .hm-pipeline__node-wrap { flex: 1 1 13%; flex-direction: row; }

}

@media (min-width: 1024px) {
  .hm-section { padding-block: var(--hm-section-padding-y); }

  .hm-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 64px;
    align-items: center;
  }
  .hm-hero__visual { order: 2; }

  .hm-problem__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }

  .hm-service-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hm-service-card--feature { height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .hm-service-grid__secondary { grid-template-columns: repeat(1, 1fr); gap: 12px; }

  .hm-measure-flow { max-width: 620px; }
  .hm-measure-flow__node { padding: 20px 26px; }

  .hm-consultation__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: start; }
  .hm-form-panel { padding: 32px; }

  /* PROCESS — 중앙 spine 지그재그는 넓은 폭에서 의미가 있다 */
  .hm-timeline-wrap { max-width: 900px; }
}

.hm-hero__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--hm-space-6); }
/* CTA ALIGNMENT SYSTEM(v7) — Hero 는 Left 유지(위 기본 규칙 그대로),
   본문 단독 CTA 섹션은 전부 section content axis 기준 Center. text-align:
   center 는 flex 자식(버튼) 정렬에 영향을 주지 않아 Solution/Performance
   처럼 섹션 자체가 text-align:center 여도 CTA 행은 여전히 왼쪽에 붙어
   있었다 — 이게 실제 원인이었다. */
.hm-solution .hm-hero__cta-row,
.hm-industry .hm-hero__cta-row,
.hm-performance .hm-hero__cta-row {
  justify-content: center;
}
.hm-hero__sub { margin-top: var(--hm-space-4); font: var(--hm-text-body-lg); color: rgba(245, 247, 250, .82); text-wrap: balance; }
.hm-hero__note { margin-top: var(--hm-space-4); font-size: 13px; color: rgba(245, 247, 250, .58); }
.hm-hero__visual { margin-top: var(--hm-space-7); }


/* ==========================================================================
   접근성 — prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hm-btn, .hm-pipeline__node, .hm-service-card { transition: none; }
}


/* ==========================================================================
   PRINT / PDF EXPORT SAFETY(v7)
   --------------------------------------------------------------------------
   원인: PDF/인쇄 캡처는 스크롤이 없어 IntersectionObserver 기반 .fade-up
   리빌(shared/main.js)이 트리거되지 않는다 — opacity:0/translateY(16px)
   초기 상태가 그대로 캡처되어 Solution Diagram 등이 "큰 빈 공간"으로
   보였다(실제 브라우저 렌더링은 정상 — CDP 스크린샷으로 확인됨).

   인쇄 페이지 폭은 OS/브라우저 설정에 따라 1024px 미만인 경우가 흔하다
   (A4/Letter 세로). 고정 폭(720px 원형 다이어그램, 900px 지그재그
   Roadmap)을 억지로 좁은 인쇄 폭에 맞추면 잘려나갈 위험이 크므로, 이미
   반응형으로 검증된 좁은-화면 버전(세로 연결 체인 / 세로 spine)을
   인쇄에서 그대로 쓴다 — fade-up 강제 표시로 "안 보이는" 문제는
   해결되고, 레이아웃 잘림 위험은 만들지 않는다. 다이어그램 디자인
   자체는 바꾸지 않았다(화면 Desktop 표시는 무변경).
   ========================================================================== */
@media print {
  .fade-up { opacity: 1 !important; transform: none !important; }
  .hm-system-map--ring { display: none !important; }
  .hm-system-map--chain { display: flex !important; }

  /* Roadmap(Process) 07 OPTIMIZE 의 title/설명/OUTPUT 배지가 페이지
     경계에서 둘로 잘려나가던 문제 — 각 step(li) 내부가 한 페이지
     안에서만 렌더링되도록 강제한다. 웹 레이아웃(지그재그/세로 spine)
     자체는 건드리지 않는다 — print 전용 규칙. */
  .hm-timeline li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}