/* 코닉 보더 회전용 커스텀 프로퍼티.
   이 선언은 반드시 사용하는 규칙보다 먼저 파싱되어야 한다.
   style.css 안에 두면 등록 전에 규칙이 파싱돼 from var(--angle) 이 무시된다. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ==========================================================================
   마브스쿨 랜딩 — 디자인 토큰
   Figma: WR7nhbnbebnGkti8fuMjDa · 페이지 "01 · 디자인 시스템 / 에셋"
   Variables 컬렉션 mabschool/color, mabschool/layout 과 1:1 대응한다.
   토큰 값을 바꿀 때는 Figma 변수도 함께 고쳐야 한다.
   ========================================================================== */

:root {
  /* ---- color · surface ---- */
  --bg-base: #000000;
  --bg-surface: #111111;
  --bg-surface-alt: #1d1d1d;
  --bg-elevated: #2a2a2a;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* ---- color · border ---- */
  --border-subtle: #2e2e2e;
  --border-strong: #454545;
  --border-focus: #3d81ee;

  /* ---- color · text ---- */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-tertiary: #777777;
  --text-inverse: #0a0a0a;

  /* ---- color · accent ---- */
  --accent-primary: #3d81ee;
  --accent-hover: #2e6fd8;
  --accent-pressed: #2560c0;
  --accent-soft: #73a9ff;
  --accent-surface: #132743;

  /* ---- color · state ---- */
  --state-error: #ff5a5a;
  --state-success: #2fbf71;
  --state-disabled: #3a3a3a;

  /* ---- color · light island (5주 프로세스 카드) ---- */
  --light-surface: #f5f7f9;
  --light-card: #ffffff;
  --light-text: #1a1a1a;
  --light-text-sub: #5a6169;
  --light-border: #e3e8ed;
  --light-accent-surface: #e8f0fe;

  /* ---- color · 주차 단계 ---- */
  --accent-step-1: #9cc0f7;
  --accent-step-2: #7babf4;
  --accent-step-3: #5a96f1;
  --accent-step-4: #3d81ee;
  --accent-step-5: #1f5fcc;

  /* Figma 시안의 형광 파랑 (슬라이드 11·26) */
  --neon-1: #35F8FF;
  --neon-2: #19C1FE;
  --neon-3: #0294FD;
  --neon-4: #0367FD;
  --neon-grad: linear-gradient(100deg, #35F8FF 0%, #19C1FE 19%, #0294FD 44%, #0367FD 100%);
  --neon-surface: #171F34;

  /* ---- 에셋 플레이스홀더 (실제 소재 교체 시 삭제) ---- */
  --asset-placeholder: #dde1e6;

  /* ==== layout · PC 모드 (기본) ==== */
  --content-max: 1200px;
  --gutter: 120px;
  --section-y: 160px;
  --section-y-sm: 120px;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --header-h: 80px;
  --button-h: 60px;
  --input-h: 56px;
  --floating-h: 64px;

  /* ==== typography · PC 램프 ==== */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --display-xl-size: 52px;   --display-xl-lh: 1.30; --display-xl-ls: -0.02em;
  --display-lg-size: 40px;   --display-lg-lh: 1.35; --display-lg-ls: -0.015em;
  --display-md-size: 32px;   --display-md-lh: 1.40; --display-md-ls: -0.01em;
  --heading-lg-size: 24px;   --heading-lg-lh: 1.45; --heading-lg-ls: -0.005em;
  --heading-md-size: 20px;   --heading-md-lh: 1.50; --heading-md-ls: -0.005em;
  --body-lg-size: 18px;      --body-lg-lh: 1.65;
  --body-md-size: 16px;      --body-md-lh: 1.70;
  --body-sm-size: 14px;      --body-sm-lh: 1.60;
  --btn-size: 17px;
  --stat-size: 48px;         --stat-lh: 1.15;

  /* ==== motion ==== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 400ms;

  --z-header: 90;
  --z-floating: 100;
  --z-modal: 200;
}

/* ==== layout + typography · Mobile 모드 ====
   Figma의 mabschool/layout "Mobile" 모드와 동일한 값이다. */
@media (max-width: 767px) {
  :root {
    --content-max: 350px;
    --gutter: 20px;
    --section-y: 80px;
    --section-y-sm: 56px;

    --space-2: 8px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 16px;
    --space-8: 20px;
    --space-10: 24px;
    --space-12: 32px;
    --space-16: 40px;

    --radius-lg: 14px;
    --radius-xl: 20px;

    --header-h: 60px;
    --button-h: 54px;
    --input-h: 52px;
    --floating-h: 56px;

    --display-xl-size: 30px;   --display-xl-lh: 1.35;
    --display-lg-size: 24px;   --display-lg-lh: 1.40;
    --display-md-size: 20px;   --display-md-lh: 1.40;
    --heading-lg-size: 18px;   --heading-lg-lh: 1.45;
    --heading-md-size: 16px;   --heading-md-lh: 1.50;
    --body-lg-size: 16px;      --body-lg-lh: 1.60;
    --body-md-size: 14px;      --body-md-lh: 1.70;
    --body-sm-size: 13px;      --body-sm-lh: 1.60;
    --btn-size: 16px;
    --stat-size: 32px;
  }
}

/* 태블릿 — PC 레이아웃을 유지하되 좌우 여백만 줄인다 (Figma FOUNDATIONS 규칙) */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --gutter: 40px;
    --section-y: 120px;
    --display-xl-size: 42px;
    --display-lg-size: 34px;
    --stat-size: 40px;
  }
}

/* ==========================================================================
   상세 소개 페이지는 "모바일 전용 문서"다.
   PC 폭에서 ?stay=1 로 검수할 때도 모바일 토큰을 그대로 쓰도록 고정한다.
   ========================================================================== */
html.doc-mobile {
  --content-max: 350px;
  --gutter: 24px;
  --section-y: 80px;
  --section-y-sm: 56px;
  --space-3: 8px;  --space-4: 12px; --space-5: 16px; --space-6: 16px;
  --space-8: 20px; --space-10: 24px; --space-12: 32px; --space-16: 40px;
  --radius-lg: 14px; --radius-xl: 20px;
  --header-h: 60px; --button-h: 54px; --input-h: 52px; --floating-h: 56px;
  --display-xl-size: 30px;  --display-xl-lh: 1.35;
  --display-lg-size: 24px;  --display-lg-lh: 1.40;
  --display-md-size: 20px;  --display-md-lh: 1.40;
  --heading-lg-size: 18px;  --heading-lg-lh: 1.45;
  --heading-md-size: 16px;  --heading-md-lh: 1.50;
  --body-lg-size: 16px;     --body-lg-lh: 1.60;
  --body-md-size: 14px;     --body-md-lh: 1.70;
  --body-sm-size: 13px;     --body-sm-lh: 1.60;
  --btn-size: 16px;         --stat-size: 32px;
}