/* ==========================================================================
   자미(가칭) 디자인 토큰 — PLAN-jami.md §1-1, §1-2
   출처 표기: 값이 DESIGN-jami.md(카카오 코퍼레이트 레퍼런스)에 있으면 표기 없음.
   없는 값은 모두 `확장: 이유` 주석을 단다. 카카오 브랜드 값(#fee500, 로그인 12px 등)은 쓰지 않는다.
   ========================================================================== */

:root {
  /* ---------- 컬러 (DESIGN-jami.md §2 Corporate marketing) ---------- */
  --jm-accent:  #fae100;  /* Marketing Yellow */
  --jm-dark:    #111111;  /* Dark Marketing */
  --jm-fg:      #333333;  /* Foreground */
  /* 확장: 레퍼런스 #888888은 흰 배경 대비 3.54:1로 AA(4.5:1) 미달 → #6b6b6b(5.33:1)로 조정. #eee 위에서도 4.59:1 */
  --jm-muted:   #6b6b6b;
  --jm-surface: #eeeeee;  /* Surface */
  --jm-border:  #dbdbdb;  /* Border */
  --jm-canvas:  #ffffff;  /* Canvas */
  --jm-on-dark: #ffffff;  /* On Dark */

  /* 레퍼런스에 있는 보조 값 */
  --jm-nav-hover:      #f3f3f3;               /* Corporate Navigation hover/pressed/current */
  --jm-surface-press:  #dfdfdf;               /* Milestone Filter pressed */
  --jm-dark-hover:     rgba(17, 17, 17, 0.75);/* Dark Marketing Tag hover/pressed */
  --jm-link-hover:     #111111;               /* Milestone Service Link hover */

  /* ---------- 확장 컬러: 사화(四化) ----------
     확장: 사화 의미색. 레퍼런스에 없음. 노랑·검정 톤을 해치지 않게 채도를 낮춤.
     WCAG 대비(vs #ffffff / vs #eeeeee[삼방사정 하이라이트 배경]):
       록  #2a7048  5.98 / 5.16   (계획서 원안 #2e7d4f는 흰 배경 5.05였으나 #eee 위 4.35로 미달 → 어둡게 조정)
       권  #a84b15  5.70 / 4.92   (원안 #b4531a: 흰 5.01, #eee 4.32 미달 → 조정)
       과  #2f5fa8  6.32 / 5.45   (원안 유지)
       기  #c0392b  5.44 / 4.69   (원안 유지)
     muted #6b6b6b 5.33 / 4.59   (원안 #888888: 3.54 → 조정)
     (2026-10-01 검토 게이트 1에서 위 대비 보정값 승인: muted #6b6b6b, 록 #2a7048, 권 #a84b15. 오류색 #c0392b, 모바일 Title 22/32, 카드 제목 20px, 입력 16px, 404 제목 30px 확장값도 승인.)
     fg #333333 12.63 / 10.89, #111 on #fae100 14.24
     항상 글자 배지(록·권·과·기)를 함께 표시한다(색만으로 구분 금지). */
  --jm-hua-lu:   #2a7048;  /* 化祿 록 */
  --jm-hua-quan: #a84b15;  /* 化權 권 */
  --jm-hua-ke:   #2f5fa8;  /* 化科 과 */
  --jm-hua-ji:   #c0392b;  /* 化忌 기 */

  /* 확장: 입력 오류 문구색. 사화 기(#c0392b)와 같은 값을 재사용해 새 색을 늘리지 않음. 흰 배경 5.44:1 */
  --jm-error:    #c0392b;
  /* 확장: 오류 필드 테두리. 색만 아니라 2px 굵기로도 구분 */
  --jm-error-border: #c0392b;

  /* ---------- 반경 (사용자 지정 4px 최우선; 레퍼런스 999/16/30px pill 대체) ---------- */
  --jm-radius: 4px;
  --jm-radius-circle: 50%; /* Culture Carousel Control: 원형 예외 */

  /* ---------- 간격 (DESIGN §5: 4/6/8/16/20 리듬) ---------- */
  --jm-space-1: 4px;
  --jm-space-2: 6px;
  --jm-space-3: 8px;
  --jm-space-4: 16px;
  --jm-space-5: 20px;
  /* 확장: 섹션 간격 40/80/120은 계획서 §1-1의 "리듬 배수" 지정값 */
  --jm-space-6: 40px;
  --jm-space-7: 80px;
  --jm-space-8: 120px;
  --jm-section-y: var(--jm-space-7);   /* 데스크톱 섹션 상하 */
  --jm-gutter: 16px;                   /* 확장: 모바일 좌우 여백(계획서 §3-4) */
  --jm-container: 1200px;              /* 확장: 컨테이너 최대폭(계획서 §3-4) */

  /* ---------- 깊이/모션 (DESIGN §2: 그림자 토큰 없음, transition 0s) ---------- */
  --jm-shadow: none;
  --jm-transition: 0s;
  --jm-line: 1px solid var(--jm-border);

  /* ---------- 타이포 ---------- */
  /* 확장: 레퍼런스의 KakaoBig/KakaoSmall은 재배포 권한 없음 → Pretendard 자체 호스팅(계획서 §0) */
  --jm-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  /* Display */
  --jm-display-size: 54px;   /* 레퍼런스 53.82px 반올림 */
  --jm-display-weight: 700;
  --jm-display-lh: 66px;
  --jm-display-ls: -1px;
  /* Heading */
  --jm-heading-size: 30px;
  --jm-heading-weight: 700;
  --jm-heading-lh: 40px;
  --jm-heading-ls: normal;
  /* Title */
  --jm-title-size: 28px;
  --jm-title-weight: 700;
  --jm-title-lh: 42px;
  /* Nav */
  --jm-nav-size: 17px;
  --jm-nav-weight: 400;
  --jm-nav-lh: 27px;
  /* Body */
  --jm-body-size: 14px;
  --jm-body-weight: 400;
  --jm-body-lh: 21px;
  /* 확장: 해석문 가독성을 위해 14→16px, 행간 1.78 (레퍼런스 Readable Body는 14px/24.92px) */
  --jm-read-size: 16px;
  --jm-read-weight: 400;
  --jm-read-lh: 1.78;
  --jm-read-ls: -0.2px;
  /* Caption */
  --jm-caption-size: 12px;
  --jm-caption-weight: 400;
  --jm-caption-lh: 18px;
  --jm-caption-ls: -0.2px;

  /* 확장: 명반 격자 칸 타이포. 모바일 하한 11px(계획서 §3-2). 데스크톱은 칸이 넓어 12/13px */
  --jm-cell-name-size: 13px;   /* 주성 이름 (굵게) */
  --jm-cell-sub-size: 12px;    /* 보조성·궁 이름·나이 */
  --jm-cell-lh: 1.35;

  /* 확장: 카드 제목(3단계 소개 등). 레퍼런스 Service Card 제목은 30px이나 3열 카드에는 과해 20px로 축소 */
  --jm-card-title-size: 20px;
  --jm-card-title-weight: 700;
  --jm-card-title-lh: 30px;
  /* 확장: 폼 라벨 14px/700 (Body 크기, 굵기만 700) */
  --jm-label-size: 14px;
  --jm-label-weight: 700;
  /* 확장: 입력·select 글자 16px (iOS Safari 자동 확대 방지) */
  --jm-input-size: 16px;

  /* 확장: 버튼 */
  --jm-btn-size: 15px;         /* 계획서 §1-1: 주 CTA 15px/700 */
  --jm-btn-weight: 700;
  --jm-btn-height: 48px;       /* 확장: 터치 영역 확보 (레퍼런스 pill은 32px) */
  --jm-btn-border: 2px solid #000000;
  --jm-input-height: 48px;     /* 확장: 입력 컨트롤 높이(터치 영역) */

  /* ---------- 포커스 ---------- */
  /* 확장: 레퍼런스는 브라우저 기본 링만 있음. 접근성을 위해 2px #111 링 정의 */
  --jm-focus-width: 2px;
  --jm-focus-color: #111111;
  --jm-focus-offset: 2px;
  --jm-focus-ring: var(--jm-focus-width) solid var(--jm-focus-color);
  /* 확장: 다크 섹션 위 포커스 링은 흰색(#111 링이 안 보임) */
  --jm-focus-color-on-dark: #ffffff;

  /* ---------- 브레이크포인트 참고값 (Bricks 기본) ---------- */
  /* CSS 변수는 미디어쿼리에서 쓸 수 없으므로 문서용. ≤991 태블릿 / ≤767 모바일 / ≤478 소형 */
  --jm-bp-tablet: 991px;
  --jm-bp-mobile: 767px;
  --jm-bp-small: 478px;
}

/* ---------- 모바일 타입 스케일 (≤767px) ---------- */
@media (max-width: 767px) {
  :root {
    /* 확장: 모바일 값은 계획서 §1-1 지정 */
    --jm-display-size: 32px;
    --jm-display-lh: 42px;
    --jm-display-ls: -0.5px;   /* 확장: 32px에서 -1px은 과해 -0.5px로 완화 */
    --jm-heading-size: 24px;
    --jm-heading-lh: 32px;
    /* 확장: Title 28px는 모바일에서 22/32로 축소 (계획서에 모바일 값 없음) */
    --jm-title-size: 22px;
    --jm-title-lh: 32px;
    --jm-section-y: var(--jm-space-6);   /* 확장: 모바일 섹션 간격 80→40 */
    --jm-cell-name-size: 12px;
    --jm-cell-sub-size: 11px;            /* 11px 하한 */
  }
}

/* ---------- 공통 기본 규칙 ---------- */
:focus-visible {
  outline: var(--jm-focus-ring);
  outline-offset: var(--jm-focus-offset);
}
.jm-on-dark :focus-visible { outline-color: var(--jm-focus-color-on-dark); }

/* 모션 없음: 호버·프레스·탭 전환 모두 즉시 */
* , *::before, *::after { transition: none !important; animation: none !important; }