@charset "utf-8";

/* ==========================================================================
   HIYOU MEDIA — Design System v1.0 — design-tokens.css
   --------------------------------------------------------------------------
   Factory v1.2 Section "HIYOU MEDIA DESIGN SYSTEM v1.0"(2026-08-23) —
   HIYOU-MEDIA-LP-FRANCHISEREC-001 첫 랜딩을 위해 설계됨. POPPLE 의
   brands/popple/_brand/brand.css 와 완전히 독립된 별도 토큰 세트다 —
   --hm- 접두사를 쓰고, POPPLE 의 --color-* 이름 규칙을 공유하지 않는다
   (실수로 같은 랜딩에 두 브랜드 토큰이 섞여 들어가도 값이 서로
   덮어쓰지 않도록 접두사로 구조적으로 분리).

   ★ COLOR SYSTEM v1.0 — HIYOU Media 공식 Brand Color 로 migration 됨
     (2026-08-24, "HIYOU MEDIA OFFICIAL COLOR SYSTEM v1.0"). 이전 버전의
     Mint(#4FD8B8)/Teal(#1EA893) 은 공식 브랜드 컬러가 아니었다 — 아래
     "COLOR MIGRATION NOTES" 참고. Typography/Spacing/Grid/Radius/Shadow/
     Motion/Pipeline-shape 토큰은 이번 migration 대상이 아니라 v1.0 그대로.

   Brand Principle — TRUST FIRST, PERFORMANCE SECOND.
     Navy/Blue = 신뢰·전문성·전략 (정보/탐색/시스템 요소 전반)
     Red       = 성과·행동·전환 (Conversion CTA·Funnel 최종 단계·문제 지점 전용)
     White/Gray = 가독성·구조·여백
   목표 비율(전체 랜딩 기준): White/Light Gray 60% · Navy/Blue 25% ·
   Black/Gray 10% · Red 5% — Red 는 절대 넓은 배경색으로 쓰지 않는다.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     OFFICIAL PALETTE (raw) — HIYOU Media Official Core
     ------------------------------------------------------------------ */
  --hm-navy-950: #0B1629;   /* 가장 어두운 표면 — Hero/Performance/Final 다크 배경 */
  --hm-navy-900: #12233F;   /* Trust Navy — 브랜드 기본 Navy */

  --hm-blue-600: #2563EB;   /* Professional Blue — Information 기본색 */
  --hm-blue-500: #3B82F6;   /* Bright Blue — 다크 배경 위 강조/Secondary Data */
  --hm-blue-400: #60A5FA;
  --hm-blue-200: #BFDBFE;   /* 다크 배경 위 보조 텍스트 */
  --hm-blue-100: #DBEAFE;
  --hm-blue-50:  #EFF6FF;   /* 옅은 tint 배경 */

  --hm-red-700: #B91C1C;    /* Deep Red — Conversion CTA hover */
  --hm-red-500: #E53935;    /* Performance Red — Conversion CTA 기본, Funnel 최종 단계, Leak 지점 */

  --hm-black:    #111827;   /* Professional Black — 기본 텍스트 잉크 */
  --hm-gray-700: #374151;
  --hm-gray-600: #4B5563;
  --hm-gray-500: #6B7280;   /* Secondary 텍스트 */
  --hm-slate:    #64748B;   /* 비교/메타데이터 전용 */
  --hm-border:   #D1D5DB;
  --hm-light-gray: #E5E7EB;

  --hm-background: #F8FAFC; /* Background White */
  --hm-white:      #FFFFFF; /* Pure White */

  --hm-success: #16A34A;
  --hm-warning: #F59E0B;

  /* ------------------------------------------------------------------
     COLOR — 의미별 토큰(semantic). landing.css 는 원칙적으로 이 아래
     토큰만 참조한다(위 raw 팔레트를 직접 참조하지 않는다) — 나중에
     팔레트가 또 바뀌어도 여기 한 곳만 고치면 되게 하기 위함.
     ------------------------------------------------------------------ */
  --hm-color-primary:       var(--hm-navy-900);   /* 브랜드 기본 Navy — 헤더/CTA 텍스트/Structural */
  --hm-color-primary-dark:  var(--hm-navy-950);   /* 가장 어두운 톤 — 다크 섹션 그라데이션 끝점 */
  --hm-color-primary-light: #1C3350;              /* 다크 배경 위 보조 요소(카드/보더) */
  --hm-color-primary-tint:  var(--hm-blue-50);    /* 아주 옅은 tint — 밝은 배경 위 섹션 구분용 */

  /* Information — 시스템/탐색/구조 전반(Conversion 아님) */
  --hm-color-secondary:      var(--hm-blue-600);  /* Professional Blue */
  --hm-color-secondary-dark: #1D4ED8;             /* hover, 밝은 배경 위 텍스트 강조 */
  --hm-color-secondary-tint: var(--hm-blue-50);

  /* Bright Accent — 다크 배경 위 정보성 강조(Pipeline active 등). Conversion 금지 */
  --hm-color-accent:      var(--hm-blue-500);
  --hm-color-accent-dark: var(--hm-blue-600);
  --hm-color-accent-tint: var(--hm-blue-100);

  /* Conversion — CTA 전용. 페이지 전체에서 이 토큰은 오직 전환 버튼/
     Funnel 최종 단계/Leak(문제 발생 지점)에만 쓴다 — 절대 배경색으로
     넓게 쓰지 않는다(목표 비율 5%). */
  --hm-color-conversion:       var(--hm-red-500);
  --hm-color-conversion-hover: var(--hm-red-700);

  --hm-color-data:      var(--hm-blue-600);
  --hm-color-data-fill: #1D4ED8;
  --hm-color-data-tint: var(--hm-blue-50);

  /* ------------------------------------------------------------------
     SURFACE
     ------------------------------------------------------------------ */
  --hm-surface-warm-white: var(--hm-background);  /* Problem/Services/Consultation 섹션 배경 */
  --hm-surface-soft-gray:  var(--hm-light-gray);  /* Solid/System 섹션, 카드 배경 */
  --hm-surface-data-dark:  var(--hm-navy-950);    /* Performance Intelligence 섹션 전용 다크 서피스 */
  --hm-surface-white:      var(--hm-white);

  /* ------------------------------------------------------------------
     TEXT
     ------------------------------------------------------------------ */
  --hm-text-primary:   var(--hm-black);   /* Primary Ink */
  --hm-text-secondary: var(--hm-gray-500);
  --hm-text-faint:     color-mix(in srgb, var(--hm-gray-500) 65%, white);
  --hm-text-inverse:   #F5F7FA;   /* 다크 배경 위 흰 텍스트 */

  /* ------------------------------------------------------------------
     SEMANTIC
     ------------------------------------------------------------------ */
  --hm-color-success: var(--hm-success);
  --hm-color-warning: var(--hm-warning);
  --hm-color-error:   var(--hm-red-700);   /* 폼 에러 텍스트 — Deep Red(대비 확보) */
  --hm-color-info:    var(--hm-blue-600);

  /* ------------------------------------------------------------------
     TYPOGRAPHY — 이번 migration 대상 아님(색상 전용 작업), v1.0 그대로
     ------------------------------------------------------------------ */
  --hm-font-kr:        'IBM Plex Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --hm-font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hm-font-mono:      'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --hm-text-display: 700 clamp(36px, 4.2vw, 56px)/1.12 var(--hm-font-kr);
  --hm-text-h1:       700 clamp(28px, 3.2vw, 44px)/1.16 var(--hm-font-kr);
  --hm-text-h2:       600 clamp(22px, 2.4vw, 32px)/1.22 var(--hm-font-kr);
  --hm-text-h3:       600 20px/1.3  var(--hm-font-kr);
  --hm-text-body-lg:  400 18px/1.6  var(--hm-font-kr);
  --hm-text-body:     400 16px/1.7  var(--hm-font-kr);
  --hm-text-small:    400 14px/1.6  var(--hm-font-kr);
  --hm-text-label:    600 12px/1.4  var(--hm-font-kr);
  --hm-text-metric:   500 clamp(24px, 2.6vw, 34px)/1.1 var(--hm-font-mono);
  --hm-text-mono:     400 14px/1.6  var(--hm-font-mono);
  --hm-text-editorial-accent: 500 italic clamp(20px, 2.2vw, 28px)/1.3 var(--hm-font-editorial);

  /* ------------------------------------------------------------------
     SPACING / GRID — 이번 migration 대상 아님, v1.0 그대로
     ------------------------------------------------------------------ */
  --hm-grid-max-width:      1200px;
  --hm-grid-columns:        12;
  --hm-grid-gutter:         24px;
  --hm-section-padding-y:   120px;
  --hm-section-padding-y-sm: 96px;

  --hm-grid-max-width-tablet:    100%;
  --hm-grid-side-padding-tablet: 48px;
  --hm-grid-columns-tablet:      8;
  --hm-grid-gutter-tablet:       20px;
  --hm-section-padding-y-tablet: 80px;

  --hm-grid-side-padding-mobile: 20px;
  --hm-grid-columns-mobile:      4;
  --hm-grid-gutter-mobile:       16px;
  --hm-section-padding-y-mobile: 56px;

  --hm-space-1: 4px;  --hm-space-2: 8px;  --hm-space-3: 12px; --hm-space-4: 16px;
  --hm-space-5: 24px; --hm-space-6: 32px; --hm-space-7: 48px; --hm-space-8: 64px;

  /* ------------------------------------------------------------------
     RADIUS / BORDER / SHADOW — border 색만 공식 Gray(#D1D5DB)로 갱신,
     나머지(반경/그림자 형태)는 v1.0 그대로.
     ------------------------------------------------------------------ */
  --hm-radius-sm: 4px;
  --hm-radius-md: 8px;
  --hm-radius-lg: 14px;

  --hm-border-subtle-on-light: 1px solid var(--hm-border);
  --hm-border-strong-on-light: 1px solid var(--hm-gray-500);
  --hm-border-subtle-on-dark:  1px solid rgba(245, 247, 250, .14);
  --hm-border-strong-on-dark:  1px solid rgba(245, 247, 250, .32);

  --hm-shadow-sm:       0 1px 2px rgba(11, 22, 41, .06);
  --hm-shadow-md:       0 4px 12px rgba(11, 22, 41, .08);
  --hm-shadow-floating: 0 12px 32px rgba(11, 22, 41, .14);

  /* ------------------------------------------------------------------
     MOTION — 이번 migration 대상 아님, v1.0 그대로
     ------------------------------------------------------------------ */
  --hm-duration-fast: 150ms;
  --hm-duration-base: 240ms;
  --hm-duration-slow: 420ms;
  --hm-ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --hm-ease-emphasized: cubic-bezier(.2, 0, 0, 1);

  /* ------------------------------------------------------------------
     PIPELINE — 상태 토큰. active/complete 는 모두 Information(Blue) —
     System 7단계 중 Conversion(가맹 전환)에 해당하는 단계가 없으므로
     Pipeline 자체에는 Red 가 쓰이지 않는다(Red 는 Funnel 컴포넌트 전용).
     ------------------------------------------------------------------ */
  --hm-pipeline-line-inactive:  rgba(37, 99, 235, .22);
  --hm-pipeline-line-complete:  var(--hm-color-secondary);
  --hm-pipeline-node-inactive-bg: var(--hm-surface-soft-gray);
  --hm-pipeline-node-inactive-border: var(--hm-border-subtle-on-light);
  /* ACTIVE(현재 선택된 1단계)만 강한 강조를 갖는다 — Professional Blue
     solid + White 텍스트(5.17:1, CONTRAST NOTES 참고). 지나간 단계(is-done)
     는 더 이상 solid 채움을 쓰지 않는다(아래 hm-pipeline__node-wrap.is-done
     규칙 참고) — 7단계가 전부 solid blue 버튼처럼 보이던 문제 수정. */
  --hm-pipeline-node-active-bg:   var(--hm-color-secondary);
  --hm-pipeline-node-active-text: var(--hm-white);
  --hm-pipeline-node-complete-bg: var(--hm-color-secondary);
  --hm-pipeline-node-complete-text: var(--hm-text-inverse);
  --hm-pipeline-node-hover-border: var(--hm-color-secondary);
  --hm-pipeline-node-hover-bg:    var(--hm-color-secondary-tint);
}

/* ==========================================================================
   COLOR MIGRATION NOTES (2026-08-24 — OFFICIAL COLOR SYSTEM v1.0)
   --------------------------------------------------------------------------
   이전 v1.0(2026-08-23)의 Primary/Secondary(Teal #1EA893)/Accent(Mint
   #4FD8B8)는 공식 브랜드 컬러가 아니었다 — 사용자 확인 후 아래처럼
   semantic role 기준으로 각각 다른 공식 색으로 옮겼다(일괄 치환 아님):

     Teal(Secondary)  → Professional Blue #2563EB   (Information/시스템 전반)
     Mint(Accent)     → Bright Blue #3B82F6          (다크 배경 위 정보성 강조)
     CTA 채움(구 Mint) → Performance Red #E53935      (Conversion 전용, 신규 분리)
     Funnel 최종 단계(구 Mint) → Performance Red       (가맹 전환 = Conversion)
     Funnel Leak 지점(구 Teal-dark) → Performance Red  (문제 발생 지점)
     Funnel Seal 배지(구 Mint) → Success Green #16A34A (봉합 = 완료 상태)
     Primary Navy(#0E1B2A) → Trust Navy #12233F / Navy-950 #0B1629

   즉 "Mint/Teal 을 Red 로 일괄 치환"이 아니라, 원래 하나의 토큰이 여러
   역할(정보 강조 + 전환 CTA)을 겸하고 있던 걸 이번에 Blue(정보)/Red(전환)
   /Green(완료) 세 갈래로 분리했다.
   ========================================================================== */

/* ==========================================================================
   CONTRAST NOTES (실제 계산값 — WCAG 2.1 상대휘도 공식 기준, 2026-08-24 재검증)
   --------------------------------------------------------------------------
   PASS(4.5:1 이상, 일반 텍스트)
     White(#FFFFFF)      on Trust Navy(#12233F)              15.70:1
     White               on Navy-950(#0B1629)                18.09:1
     Blue-200(#BFDBFE)   on Navy-900/950 (다크 배경 보조 텍스트) 11.05 / 12.73:1
     White               on Professional Blue(#2563EB)         5.17:1
     Black(#111827)      on Bright Blue-500(#3B82F6, Pipeline active) 4.82:1
     Professional Blue   on White / Background(#F8FAFC)        5.17 / 4.94:1
     White               on Deep Red hover(#B91C1C)            6.47:1
     Deep Red(#B91C1C)   on White (폼 에러 텍스트)              6.47:1
     Gray-500(#6B7280)   on White (Secondary 텍스트)           4.83:1
     Black               on Background(#F8FAFC)                16.96:1
     Blue-600            on Blue-50 tint 배경                  4.75:1
     Black               on Success Green(#16A34A, seal 배지)   5.38:1
     Black               on Warning(#F59E0B)                    8.26:1
     Bright Blue-500     on Navy-950(큰 텍스트/eyebrow 전용)     4.92:1

   주의 — 경계/미달 (그대로 두되 사용처를 제한함)
     White on Performance Red(#E53935, CTA 기본)  4.23:1
       → AA 일반 텍스트 기준(4.5:1) 미달, AA 큰 텍스트 기준(3:1)은 충분히 통과.
         버튼 텍스트가 16px/600(semibold, WCAG 상 "bold" 로 보긴 애매한 굵기)라
         엄격히는 "큰 텍스트" 예외에 해당하지 않는다. 공식 브랜드 색(#E53935)을
         임의로 바꾸지 않고 그대로 적용했다 — 향후 완전한 AA 준수가 필요하면
         버튼 폰트를 700 굵기 + 18px 이상으로 키우거나, 기본 상태를 Deep Red
         (#B91C1C, 6.47:1 통과)로, hover 를 밝은 Red 로 바꾸는 대안을 검토할 것.
     White on Bright Blue-500(#3B82F6)  3.68:1 → AA 일반 텍스트 미달.
       → 이 조합은 실제로 쓰지 않는다(Pipeline active 는 Black 텍스트로 통일).
     White / Black on Warning(#F59E0B)  2.15:1 FAIL(White) / 8.26:1(Black)
       → Warning 토큰은 이 랜딩에서 텍스트 배경으로 쓰지 않는다(정보용).
     White / Black on Success Green(#16A34A) on White 텍스트 3.30:1 FAIL
       → seal 배지는 Black 텍스트로 통일(5.38:1 통과), 흰 텍스트로 쓰지 않는다.
   ========================================================================== */