/* ============================================================
   2026 한국유교문화축전 — 디자인 토큰
   출처: 디자인 시안 v4 (design/디자인시안_v4_MAIN-INTRO.html) 확정값
   Phase 1에서 간격·타이포 스케일·레이어·모션 토큰 추가.
   ============================================================ */

:root {
  /* ── 컬러 — 주조: 네이비, 강조: 골드 ───────────────────── */
  --navy:    #123470;
  --navy-d:  #0D2650;
  --navy-08: #F1F4FA;
  --navy-15: #DFE6F2;
  --gold:    #EBA201;
  --gold-ink:#3A2A00;   /* 골드 배경 위 텍스트 */

  --ink:    #1E232C;    /* 본문 */
  --ink-2:  #454B56;    /* 본문 보조 — 주제문·기관명 (시안 .theme/.hosts) */
  /* 보조 텍스트 — 시안값 #6B7280은 흰 배경에서만 4.83:1이고
     페이지 배경(#F4F5F7)·navy-08 위에서는 4.43:1로 미달이다.
     네 가지 배경 모두에서 4.5:1을 넘도록 한 단계 어둡게 조정했다. */
  --sub:    #666E7A;    /* 흰색 5.15 / 배경 4.72 / 표라벨 4.89 / navy-08 4.68 */
  --line:   #E8EAEF;    /* 구분선·보더 */
  --line-2: #F1F2F5;    /* 내부 행 구분선 — line보다 옅음 (시안 표·목록) */
  --bg:     #F4F5F7;    /* 페이지 배경 */
  --bg-alt: #F8F9FB;    /* 개요 표 라벨·브레드크럼 배경 */
  --navy-l: #1A4088;    /* 하이라이트 카드 그라데이션 시작 */

  /* 그림 위에 흰 글씨를 얹을 때 까는 그늘의 짙기.
     히어로·프로그램 카드가 같은 값을 쓴다 — 한쪽만 진하면 같은 화면에서 따로 논다.
     0.69 는 **눈대중이 아니라 잰 값**이다. 키비주얼의 밝은 조각 위에서 흰 글씨가
     4.5:1 을 지키는 가장 옅은 지점이 여기다(scripts/check-browser.js 가 화소로 잰다).
     더 옅게 하려면 그늘이 아니라 **그림 쪽**을 손봐야 한다 — 글자 자리에 어두운
     조각이 오도록 콜라주 배치를 바꾸는 식이다. 값만 내리면 글씨가 묻힌다. */
  --shade:  .69;
  --white:  #FFFFFF;

  /* 상태 색 (뱃지·알림) — 흰 배경 대비 4.5:1 이상 */
  --live:   #C2410C;    /* '진행 중' 뱃지 */
  --danger: #B42318;

  /* ⚠ 접근성: --gold는 흰 배경 위 대비 2.2:1 — 텍스트 색으로 쓰지 말 것.
     골드는 배경/포인트로만 사용하고 그 위 텍스트는 --gold-ink. */

  /* ── 타이포그래피 ──────────────────────────────────────── */
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  /* ⚠ Black Han Sans는 시안 v4 기준 '히어로 날짜·슬로건' 대형 텍스트에만 쓴다.
     섹션 제목·페이지 제목·로고는 Pretendard 800(--fw-title). 남용 금지. */
  --font-display: 'Black Han Sans', var(--font-body);
  --fw-title: 800;      /* 제목용 Pretendard 웨이트 (시안 .sec-h h2 / .logo) */

  /* KWCAG 2.2 — 본문 16px 이상, 대비 4.5:1, 터치 44px */
  --fs-body: 16px;
  --touch-min: 44px;

  /* 타입 스케일 (모바일 기준 · 데스크톱에서 일부 확대) */
  --fs-xs:   14px;   /* 보조 라벨 — 본문 용도 금지 */
  --fs-sm:   15px;
  --fs-md:   16px;   /* 본문 기본 */
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  34px;

  --lh-tight: 1.25;
  --lh-base:  1.65;   /* 고령층·어린이 가독성 (SPEC INTRO-002) */

  /* ── 간격 스케일 (4px 배수) ────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 레이아웃 ─────────────────────────────────────────── */
  --content-max: 1200px;  /* 데스크톱 콘텐츠 최대 폭 */
  --bp-mobile: 767px;     /* 모바일 기준 */
  --bp-desktop: 1024px;   /* 데스크톱 확장 시작 */
  --gutter: var(--sp-5);  /* 좌우 여백 (데스크톱에서 확대) */

  --header-h: 56px;       /* 모바일 앱 헤더 — **띠를 뺀 막대 높이**다 */

  /* 헤더 아래 색동 띠.
     남색이 넓게 깔린 화면에 밝은 포인트를 하나 준다. 이미지가 아니라 그라데이션인 이유:
     단색 줄무늬는 어느 배율에서도 선명하고(이미지는 2x 화면에서 흐려진다), 파일·요청이
     없고, 색을 고칠 때 여기 한 줄만 만지면 된다.

     참고로 받은 시안은 파스텔이었는데 우리 화면(짙은 남색 헤더)에서는 묻힌다.
     채도를 올리되 주황 자리에 **우리 골드(--gold)** 를 그대로 넣어 팔레트와 잇는다.
     전통 색동의 차례(홍-주-황-녹-청-자)를 따른다. */
  --band-h: 5px;
  --band-1: #E24B4B;   /* 홍 */
  --band-2: #EBA201;   /* 주 — 축전 골드 */
  --band-3: #F2CB3D;   /* 황 */
  --band-4: #3FA45C;   /* 녹 */
  --band-5: #2A7FC9;   /* 청 */
  --band-6: #7B52A1;   /* 자 */

  /* 헤더가 화면에서 차지하는 **전체** 높이 (막대 + 띠).
     sticky 로 가려지는 높이라, 앵커로 이동할 때 이만큼 띄워야 제목이 안 가린다. */
  --header-total: calc(var(--header-h) + var(--band-h));
  --quickbar-h: 60px;     /* 모바일 하단 고정 퀵바 */

  /* ── 라운드·그림자 (시안 계열) ─────────────────────────── */
  --radius-card: 14px;   /* 카드·바로가기·개요 표 */
  --radius-lg: 16px;     /* 포스터 figure·슬로건 블록 */
  --radius-tile: 12px;   /* 바로가기 아이콘 타일 */
  --radius-badge: 6px;   /* 소형 뱃지(고정·카테고리) — pill 아님 */
  --radius-pill: 99px;   /* D-day·칩·버튼 */
  --radius-sm: 8px;
  --shadow-card: 0 24px 48px -20px rgba(30, 35, 44, .22);
  --shadow-sm:   0 2px 8px rgba(30, 35, 44, .08);

  /* 붓으로 그은 가로 획 — GNB 현재 위치 표시.
     두께는 처음부터 끝까지 일정하다. 왼쪽 끝은 둥글게 맺고, 오른쪽으로 갈수록 갈래로 나뉜다(갈필).

     ⚠ 이 값은 **손으로 고칠 수 없다.** 좌표가 수백 개다.
       모양을 바꾸려면 scripts/make-brush.js 의 값을 고치고 `npm run make-brush` 를 돌린다.
       난수를 쓰지 않으므로 같은 값이면 언제나 같은 모양이 나온다.
     ⚠ 색을 바꾸려면 그 스크립트의 GOLD 를 고칠 것 — 여기서 바꾸면 다음 생성 때 되돌아간다. */
  --eave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.2%207.5%20L2.8%205.9%20L4.4%205.5%20L6.0%205.2%20L7.6%205.2%20L9.2%205.2%20L10.8%205.3%20L12.4%205.4%20L14.0%205.5%20L15.6%205.5%20L17.2%205.4%20L18.8%205.4%20L20.4%205.4%20L22.0%205.4%20L23.6%205.4%20L25.2%205.4%20L26.8%205.5%20L28.4%205.5%20L30.0%205.5%20L31.6%205.4%20L33.2%205.4%20L34.8%205.4%20L36.4%205.3%20L38.0%205.3%20L39.6%205.4%20L41.2%205.4%20L42.8%205.4%20L44.4%205.4%20L46.0%205.4%20L46.0%2010.9%20L44.4%2010.8%20L42.8%2010.8%20L41.2%2010.8%20L39.6%2010.7%20L38.0%2010.6%20L36.4%2010.6%20L34.8%2010.6%20L33.2%2010.6%20L31.6%2010.6%20L30.0%2010.6%20L28.4%2010.7%20L26.8%2010.7%20L25.2%2010.6%20L23.6%2010.6%20L22.0%2010.6%20L20.4%2010.5%20L18.8%2010.5%20L17.2%2010.5%20L15.6%2010.5%20L14.0%2010.5%20L12.4%2010.5%20L10.8%2010.5%20L9.2%2010.5%20L7.6%2010.5%20L6.0%2010.4%20L4.4%2010.2%20L2.8%209.7%20L1.2%208.2%20Z%20M30.4%205.4%20L32.0%205.4%20L33.7%205.4%20L35.3%205.4%20L36.9%205.4%20L38.5%205.4%20L40.2%205.4%20L41.8%205.4%20L43.4%205.3%20L45.0%205.3%20L46.7%205.3%20L48.3%205.3%20L49.9%205.3%20L51.5%205.3%20L53.1%205.3%20L54.8%205.4%20L56.4%205.4%20L58.0%205.4%20L59.6%205.4%20L61.3%205.4%20L62.9%205.4%20L64.5%205.4%20L66.1%205.5%20L67.8%205.5%20L69.4%205.5%20L71.0%205.5%20L72.6%205.5%20L74.3%205.6%20L75.9%205.6%20L77.5%205.6%20L79.1%205.6%20L80.7%205.6%20L82.4%205.5%20L84.0%205.5%20L85.6%205.5%20L87.2%205.5%20L88.9%205.5%20L90.5%205.5%20L92.1%205.6%20L93.7%205.6%20L95.4%205.6%20L97.0%205.6%20L98.6%205.6%20L98.6%206.7%20L97.0%206.8%20L95.4%206.8%20L93.7%206.8%20L92.1%206.8%20L90.5%206.7%20L88.9%206.7%20L87.2%206.7%20L85.6%206.7%20L84.0%206.7%20L82.4%206.8%20L80.7%206.8%20L79.1%206.8%20L77.5%206.8%20L75.9%206.8%20L74.3%206.8%20L72.6%206.8%20L71.0%206.8%20L69.4%206.8%20L67.8%206.8%20L66.1%206.8%20L64.5%206.7%20L62.9%206.7%20L61.3%206.7%20L59.6%206.7%20L58.0%206.7%20L56.4%206.7%20L54.8%206.7%20L53.1%206.7%20L51.5%206.7%20L49.9%206.7%20L48.3%206.7%20L46.7%206.7%20L45.0%206.7%20L43.4%206.8%20L41.8%206.8%20L40.2%206.8%20L38.5%206.9%20L36.9%206.9%20L35.3%206.9%20L33.7%206.9%20L32.0%206.9%20L30.4%206.9%20Z%20M30.4%206.8%20L32.0%206.8%20L33.7%206.8%20L35.3%206.9%20L36.9%206.9%20L38.5%206.9%20L40.2%206.9%20L41.8%206.9%20L43.4%206.8%20L45.0%206.8%20L46.7%206.8%20L48.3%206.8%20L49.9%206.9%20L51.5%206.9%20L53.1%206.9%20L54.8%206.9%20L56.4%206.9%20L58.0%206.9%20L59.6%207.0%20L61.3%207.0%20L62.9%206.9%20L64.5%207.0%20L66.1%207.0%20L67.8%207.0%20L69.4%207.0%20L71.0%207.0%20L72.6%207.0%20L74.3%207.0%20L75.9%207.0%20L77.5%207.0%20L79.1%207.0%20L80.7%206.9%20L82.4%206.9%20L84.0%206.8%20L85.6%206.8%20L87.2%206.8%20L88.9%206.7%20L90.5%206.7%20L92.1%206.7%20L93.7%206.7%20L95.4%206.7%20L97.0%206.7%20L98.6%206.7%20L98.6%207.4%20L97.0%207.4%20L95.4%207.4%20L93.7%207.5%20L92.1%207.5%20L90.5%207.5%20L88.9%207.5%20L87.2%207.6%20L85.6%207.6%20L84.0%207.7%20L82.4%207.7%20L80.7%207.8%20L79.1%207.8%20L77.5%207.9%20L75.9%207.9%20L74.3%207.9%20L72.6%207.9%20L71.0%207.9%20L69.4%208.0%20L67.8%208.0%20L66.1%208.0%20L64.5%208.0%20L62.9%208.0%20L61.3%208.0%20L59.6%208.0%20L58.0%208.0%20L56.4%208.0%20L54.8%208.0%20L53.1%208.0%20L51.5%208.0%20L49.9%208.1%20L48.3%208.0%20L46.7%208.0%20L45.0%208.0%20L43.4%208.1%20L41.8%208.1%20L40.2%208.2%20L38.5%208.2%20L36.9%208.2%20L35.3%208.2%20L33.7%208.2%20L32.0%208.2%20L30.4%208.3%20Z%20M30.4%208.0%20L32.0%208.0%20L33.7%208.0%20L35.3%208.1%20L36.9%208.1%20L38.5%208.1%20L40.2%208.1%20L41.8%208.1%20L43.4%208.0%20L45.0%207.9%20L46.7%207.9%20L48.3%207.9%20L49.9%207.9%20L51.5%207.9%20L53.1%207.9%20L54.8%207.9%20L56.4%207.9%20L58.0%207.9%20L59.6%207.9%20L61.3%207.9%20L62.9%207.9%20L64.5%207.9%20L66.1%208.0%20L67.8%208.0%20L69.4%208.0%20L71.0%208.0%20L72.6%208.0%20L74.3%208.1%20L75.9%208.1%20L77.5%208.2%20L79.1%208.2%20L80.7%208.2%20L82.4%208.2%20L84.0%208.2%20L85.6%208.2%20L87.2%208.2%20L88.9%208.1%20L90.5%208.1%20L92.1%208.1%20L93.7%208.1%20L95.4%208.1%20L97.0%208.1%20L98.6%208.1%20L98.6%208.8%20L97.0%208.8%20L95.4%208.8%20L93.7%208.9%20L92.1%208.9%20L90.5%208.9%20L88.9%208.9%20L87.2%209.0%20L85.6%209.0%20L84.0%209.0%20L82.4%209.0%20L80.7%209.0%20L79.1%209.0%20L77.5%209.0%20L75.9%209.0%20L74.3%209.0%20L72.6%209.0%20L71.0%209.0%20L69.4%209.0%20L67.8%209.0%20L66.1%208.9%20L64.5%208.9%20L62.9%208.9%20L61.3%208.9%20L59.6%208.9%20L58.0%208.9%20L56.4%209.0%20L54.8%209.0%20L53.1%209.0%20L51.5%209.0%20L49.9%209.0%20L48.3%209.1%20L46.7%209.1%20L45.0%209.1%20L43.4%209.2%20L41.8%209.3%20L40.2%209.3%20L38.5%209.4%20L36.9%209.4%20L35.3%209.4%20L33.7%209.4%20L32.0%209.4%20L30.4%209.5%20Z%20M30.4%208.9%20L32.0%208.9%20L33.7%209.0%20L35.3%209.1%20L36.9%209.1%20L38.5%209.1%20L40.2%209.0%20L41.8%209.0%20L43.4%209.0%20L45.0%209.0%20L46.7%209.0%20L48.3%208.9%20L49.9%208.9%20L51.5%208.9%20L53.1%209.0%20L54.8%209.0%20L56.4%209.0%20L58.0%209.0%20L59.6%209.0%20L61.3%209.0%20L62.9%209.1%20L64.5%209.1%20L66.1%209.1%20L67.8%209.1%20L69.4%209.1%20L71.0%209.2%20L72.6%209.2%20L74.3%209.2%20L75.9%209.3%20L77.5%209.3%20L79.1%209.3%20L80.7%209.4%20L82.4%209.4%20L84.0%209.4%20L85.6%209.4%20L87.2%209.4%20L88.9%209.5%20L90.5%209.5%20L92.1%209.5%20L93.7%209.5%20L95.4%209.5%20L97.0%209.5%20L98.6%209.5%20L98.6%2010.6%20L97.0%2010.5%20L95.4%2010.5%20L93.7%2010.5%20L92.1%2010.5%20L90.5%2010.6%20L88.9%2010.6%20L87.2%2010.6%20L85.6%2010.5%20L84.0%2010.6%20L82.4%2010.6%20L80.7%2010.6%20L79.1%2010.5%20L77.5%2010.5%20L75.9%2010.4%20L74.3%2010.4%20L72.6%2010.4%20L71.0%2010.4%20L69.4%2010.4%20L67.8%2010.3%20L66.1%2010.3%20L64.5%2010.3%20L62.9%2010.3%20L61.3%2010.3%20L59.6%2010.3%20L58.0%2010.3%20L56.4%2010.3%20L54.8%2010.3%20L53.1%2010.3%20L51.5%2010.3%20L49.9%2010.3%20L48.3%2010.3%20L46.7%2010.4%20L45.0%2010.4%20L43.4%2010.4%20L41.8%2010.4%20L40.2%2010.5%20L38.5%2010.5%20L36.9%2010.6%20L35.3%2010.5%20L33.7%2010.5%20L32.0%2010.4%20L30.4%2010.4%20Z'%20fill='%23EBA201'/%3E%3C/svg%3E");
  --shadow-bar:  0 -2px 12px rgba(30, 35, 44, .10);

  /* ── 레이어 ───────────────────────────────────────────── */
  --z-quickbar: 90;
  --z-header:   100;
  --z-backdrop: 200;
  --z-drawer:   210;
  --z-lightbox: 300;

  /* ── 모션 ─────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .22s;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 64px;    /* 시안 PC 헤더 .p-hd */
    --gutter: var(--sp-8);
    --fs-3xl: 32px;
    --fs-4xl: 44px;
  }
}

/* 모션 최소화 선호 존중 (KWCAG 2.2) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}