/* =====================================================================
 * jn-tokens.css — 좋은이름닷컴 디자인 토큰 (A안 · 전통 정제형)
 * 위치   : /css/share/jn-tokens.css
 * 로드   : /comm/include/share/themeHead.jsp 에서 jn-theme.css 보다 먼저
 * 원칙   : 색·글꼴·간격 값은 이 파일에서만 정의하고, 다른 CSS는 var(--jn-*)로 참조
 * 기준폭 : 모바일 360~430px / PC 콘텐츠 최대 720px (600px 이상에서 PC 배치)
 * 호환   : CSS 변수만 사용 (Chrome 49+ · iOS 9.3+). min() · clamp() 는 쓰지 않는다
 *          (지원하지 않는 웹뷰에서는 var() 값 전체가 무효가 되어 대체값도 적용되지 않음)
 * 버전   : v2.1 (2026-10-20) — design-spec v2.1 과 짝. 값이 바뀌면 버전을 올리고 아래 변경 줄을 추가
 * 변경   : v2 (2026-10-19) 팝업 폭 토큰 분리, z-index 를 헤더(100000)보다 위로
 *          v2.1 (2026-10-20) --jn-color-on-brand, --jn-shadow-bar 추가 (BR11_B 질문 1 · 5)
 * ===================================================================== */

:root {

  /* ---------- 1. 브랜드 색 ---------- */
  --jn-color-brand-deep:   #4A1A26;  /* 헤더, 어두운 카드 바탕 */
  --jn-color-brand:        #6B1E2E;  /* 주 버튼, 현재 단계, 강조 글자 */
  --jn-color-gold:         #B08A3E;  /* 구분선 마름모, 아이콘 테두리, 보조 강조 */
  --jn-color-gold-light:   #D9B970;  /* 어두운 바탕 위 버튼, 완료 단계 */
  --jn-color-gold-pale:    #F1DDAF;  /* 어두운 바탕 위 강조 글자 */
  --jn-color-seal:         #B5302A;  /* 로고 도장, PDF 표시 */

  /* ---------- 2. 바탕 ---------- */
  --jn-color-bg:             #F5EEE3;  /* 페이지 바탕 (한지) */
  --jn-color-bg-outer:       #E6DBC9;  /* PC 720px 바깥 영역 */
  --jn-color-surface:        #FFFDF8;  /* 카드, 헤더 아래 띠, 하단 메뉴 */
  --jn-color-surface-sunken: #FBF6EC;  /* 카드 안 칸 (사주·수리 칸) */
  --jn-color-tint:           #F8EFE0;  /* 연한 골드: 선택·펼친 행, 아이콘 원 */
  --jn-color-tint-strong:    #EFE3CF;  /* 상태 띠, 작명코드 인증 카드 */
  --jn-color-input:          #FFFFFF;  /* 입력칸 */
  --jn-color-input-locked:   #F4EDE1;  /* 고정값 입력칸 (성씨·출생연도) */
  --jn-color-disabled-bg:    #EDE6DA;  /* 비활성 칸 */
  --jn-color-overlay:        rgba(43, 33, 29, 0.55);  /* 팝업·시트 뒤 */

  /* ---------- 3. 선 ---------- */
  --jn-color-line:        #E6D9C3;  /* 카드 테두리 */
  --jn-color-line-soft:   #EFE5D3;  /* 카드 안 구분선 */
  --jn-color-line-input:  #D9C8AB;  /* 입력칸 테두리 */
  --jn-color-line-strong: #CDBFA8;  /* 점선, 예정 단계 원 */

  /* ---------- 4. 글자 ---------- */
  --jn-color-text:         #2B211D;  /* 본문 */
  --jn-color-text-strong:  #3A2420;  /* 목록 제목 */
  --jn-color-text-title:   #4A1A26;  /* 카드 제목 (= brand-deep) */
  --jn-color-text-sub:     #6E625A;  /* 보조 설명 (대비 4.5:1 이상) */
  --jn-color-text-muted:   #8A7F74;  /* 비활성, 개수 표시 */
  --jn-color-text-gold:    #8A6A2E;  /* 골드 계열 글자 (밝은 바탕용) */
  --jn-color-text-on-dark: #F3E6CF;  /* 어두운 바탕 위 본문 */
  --jn-color-on-brand:     #FFFFFF;  /* 진한 바탕(주 버튼 · 선택 칸 · 현재 단계) 위 글자 */

  /* ---------- 5. 판정 (발음 = 소리 배지 / 선택 항목 = 도장) ---------- */
  --jn-color-good:     #2F6B4F;
  --jn-color-good-bg:  #E3EFE8;
  --jn-color-soso:     #5E554C;
  --jn-color-soso-bg:  #EEE8E1;
  --jn-color-bad:      #A63D2F;  /* 도장 테두리·× */
  --jn-color-bad-text: #8E3226;  /* 배지 글자 */
  --jn-color-bad-bg:   #F6E2DD;

  /* ---------- 6. 오행 칩 (글자색 / 바탕색) ---------- */
  --jn-ohaeng-wood:   #2E5233;  --jn-ohaeng-wood-bg:  #E4EEE2;  /* 木 */
  --jn-ohaeng-fire:   #8E3226;  --jn-ohaeng-fire-bg:  #F6E2DD;  /* 火 */
  --jn-ohaeng-earth:  #6F5420;  --jn-ohaeng-earth-bg: #F3E9D2;  /* 土 */
  --jn-ohaeng-metal:  #4F4F4F;  --jn-ohaeng-metal-bg: #ECEBE8;  /* 金 */
  --jn-ohaeng-water:  #243E61;  --jn-ohaeng-water-bg: #E1E8F2;  /* 水 */

  /* ---------- 7. 그래프 (jqPlot·D3 옵션에 같은 값 사용) ---------- */
  --jn-chart-primary: #6B1E2E;  /* 적합도 70점 이상, 사주 오행 */
  --jn-chart-second:  #B08A3E;  /* 적합도 70점 미만, 성명자 오행 */
  --jn-chart-track:   #EFE5D3;  /* 막대 바탕 */
  --jn-chart-grid:    #E0D2B8;  /* 격자·방사형 테두리 */

  /* ---------- 8. 글꼴 ---------- */
  --jn-font-display: 'Gowun Batang', 'Noto Serif KR', 'AppleMyungjo', serif;  /* 제목·이름·점수 */
  --jn-font-body:    'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --jn-font-brush:   'Nanum Brush Script', cursive;  /* 로고 글자 (이미지 로고가 있으면 미사용) */

  --jn-fs-score: 40px;  /* 결과 점수 */
  --jn-fs-name:  30px;  /* 결과 이름 */
  --jn-fs-h1:    23px;  /* 화면 대제목 */
  --jn-fs-h2:    19px;  /* 카드 대제목 */
  --jn-fs-h3:    17px;  /* 카드 제목, 하위 헤더 제목 */
  --jn-fs-body:  16px;  /* 글 위주 페이지 본문 */
  --jn-fs-base:  15px;  /* 목록, 일반 본문 */
  --jn-fs-sm:    14px;  /* 라벨, 버튼 보조 */
  --jn-fs-xs:    13px;  /* 보조 설명 */
  --jn-fs-xxs:   12px;  /* 칩, 범례, 캡션 (최소) */
  --jn-fs-input: 16px;  /* 입력칸: 16px 미만이면 iOS가 자동 확대 */

  --jn-fw-regular: 400;
  --jn-fw-medium:  500;
  --jn-fw-bold:    700;

  --jn-lh-body:  1.8;   /* 글 위주 페이지 */
  --jn-lh-base:  1.6;   /* 일반 */
  --jn-lh-tight: 1.3;   /* 제목 */

  /* ---------- 9. 간격 (4px 단위) ---------- */
  --jn-space-1: 4px;
  --jn-space-2: 8px;
  --jn-space-3: 12px;
  --jn-space-4: 16px;  /* 모바일 좌우 여백, 카드 안쪽 여백 */
  --jn-space-5: 20px;
  --jn-space-6: 24px;
  --jn-space-7: 32px;  /* PC 좌우 여백 */
  --jn-gap-card: 14px; /* 카드 사이 */

  /* ---------- 10. 크기 ---------- */
  --jn-touch:          44px;  /* 터치 영역 최소 */
  --jn-btn-h:          50px;  /* 주 버튼 */
  --jn-btn-h-sm:       46px;  /* 보조 버튼, 팝업 버튼 */
  --jn-input-h:        48px;  /* 입력칸·선택상자 */
  --jn-row-h:          52px;  /* 목록 한 줄 (한자 줄은 56px) */
  --jn-header-h:       52px;  /* 하위 화면 헤더 (모바일) */
  --jn-header-h-pc:    60px;
  --jn-native-nav-h:   64px;  /* 앱 하단 네이티브 메뉴 (웹뷰 하단 여백 계산용) */
  --jn-content-max:    720px; /* PC 콘텐츠 최대 폭 */
  --jn-text-max:       640px; /* 글 위주 본문 최대 폭 */
  /* 팝업 폭: 'width: var(--jn-popup-w); max-width: var(--jn-popup-max-w);' 로 함께 쓴다 */
  --jn-popup-w:        calc(100vw - 32px);  /* 좌우 16px 여백 */
  --jn-popup-max-w:    420px;
  --jn-popup-max-h:    80vh;

  /* ---------- 11. 모서리 ---------- */
  --jn-radius-seal: 4px;   /* 도장 */
  --jn-radius-sm:   8px;   /* 칩 안, 세그먼트 선택 */
  --jn-radius-md:   10px;  /* 버튼, 입력칸 */
  --jn-radius-lg:   14px;  /* 카드 */
  --jn-radius-xl:   16px;  /* 팝업, 큰 카드 */
  --jn-radius-pill: 999px; /* 칩, 배지 */

  /* ---------- 12. 그림자·층 ---------- */
  --jn-shadow-popup:  0 10px 30px rgba(0, 0, 0, 0.25);
  --jn-shadow-sticky: 0 4px 10px rgba(74, 26, 38, 0.08);
  --jn-shadow-bar:    0 -4px 10px rgba(74, 26, 38, 0.08);  /* 하단 고정 바 위쪽 */
  /* 기존 값: popupDark.jsp 팝업 5000, indexHeader.jsp 헤더 100000 !important (헤더는 바꾸지 않음) */
  --jn-z-sticky: 100;     /* 상단 고정 영역 (헤더 아래, 본문 흐름 안) */
  --jn-z-sheet:  190000;  /* 아래 시트 (인명목록 등) */
  --jn-z-popup:  200000;  /* servicePopup: 헤더보다 위 */
  --jn-z-toast:  200100;
}

/* 600px 이상(PC·태블릿): 좌우 여백과 제목 크기만 조정. 배치 변경은 jn-pattern.css에서 처리 */
@media (min-width: 600px) {
  :root {
    --jn-fs-h1:   30px;
    --jn-fs-name: 36px;
    --jn-fs-score: 44px;
  }
}