/* 바오밥 디자인 토큰 — 정의는 이 파일 한 곳에만 둔다.
   style.css 는 맨 앞에서 @import 로 가져오고, style.css 를 읽지 않는
   독립 화면(terms·trial·privacy·landing·data_deletion)은 이 파일만 링크한다.
   이 파일에는 :root 밖에 없어 어떤 요소에도 매칭되지 않는다 — 링크해도
   화면이 바뀌지 않는다. 그것이 분리한 이유다. */

/* 학교안심 책갈피 — KERIS 가 배포하는 글꼴. 2026-09-15 강준영 지시로 본문 서체 교체.
   자체 호스팅이다. 외부 CDN 을 쓰지 않는 것이 이 저장소 규칙이다(DESIGN.md §2-3).

   ★ 굵기는 **받은 그대로 한 벌만** 쓴다("크기만 다르고 굵기는 첨부한 폰트 그대로").
     그래서 100~900 을 이 한 벌이 모두 감당한다고 선언한다. 이렇게 적으면 브라우저가
     굵은 글씨를 흉내 내지 않는다 — 화면에서 font-weight 를 500·600·700 으로 적은
     자리도 원본 굵기로 나온다. 흉내 굵기는 한글 획을 뭉개서 일부러 껐고,
     위계는 크기로만 준다.

   ★ 379KB 다. 부분집합(subset)으로 줄이지 않았다 — 고객이 쓴 글·가게 이름이
     그대로 화면에 나오는 서비스라, 빠진 글자가 문장 한가운데서 다른 글꼴로
     떨어지면 그게 더 나쁘다. */
@font-face {
  font-family: "Hakgyoansim Chaekgalpi";
  src: url("/static/fonts/hakgyoansim-chaekgalpi.woff2") format("woff2");
  font-weight: 100 900;   /* 한 벌이 전 굵기를 맡는다 = 흉내 굵기 없음 */
  font-style: normal;
  font-display: swap;     /* 다 받기 전에도 글은 읽힌다 */
}

:root {
  --navy: #2B3A4E;
  --copper: #C67B3C;
  --cream: #F7F3EE;
  --teal: #3A8FB7;
  --gray-100: #F5F5F5;
  --gray-300: #DDDDDD;
  --gray-500: #6B6B6B;
  --gray-700: #555555;
  --text: #222222;
  --danger: #D62F2F;
  --warning: #E6A800;
  --success: #2E7D32;

  /* 서체 — 정의는 여기 한 곳. 값은 새로 고른 것이 아니라 style.css 가
     이미 쓰던 스택을 옮겨 온 것이다.
     전에는 스택이 세 가지로 흩어져 26곳에 적혀 있었고, 맑은 고딕은
     윈도우 전용 글꼴이라 아이폰에서 화면마다 다른 글꼴이 떴다 —
     main.py 19곳은 시스템 기본, style.css 화면은 애플 서체로. */
  --font-sans: "Hakgyoansim Chaekgalpi", "맑은 고딕", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 글자 크기 사다리 — 7단계.
     54가지로 흩어져 있던 것을 1단계에서 17개로 모으고, 여기서 7개로 줄였다.
     지킨 것: --fs-lg 는 16px 고정(입력칸이 이 값을 쓰고, 16px 미만이면 iOS 가
     입력할 때 화면을 확대한다) · --fs-base 15px 은 4개 화면의 body 크기 ·
     제목은 두 층(카드 제목 18 · 페이지 제목 22)을 남겼다. */
  --fs-xs:     11.5px;   /* 배지·아주 작은 라벨 */
  --fs-sm:     12.5px;   /* 보조 설명 */
  --fs-md:     13.5px;   /* 작은 본문 */
  --fs-base:     15px;   /* 본문 · body 4곳 */
  --fs-lg:       16px;   /* 입력칸 (16px 고정) */
  --fs-title:    18px;   /* 카드 제목 */
  --fs-hero:     22px;   /* 페이지 제목·큰 수치 */

  /* 모서리 사다리 — 5단계. 286곳에 21가지로 흩어져 있던 것을 모았다.
     숫자가 아니라 쓰임으로 묶었다: 20px·99px 은 높이 20~26px 요소에 붙어
     완전히 둥글게 보이는 알약이므로 --r-pill 이다.
     예외 둘은 그대로 둔다 — 50%(원: 단계 번호·아바타) · 2px(스크롤바 손잡이). */
  --r-sm:         6px;   /* 작은 칩·코드·토글 */
  --r-md:         8px;   /* 버튼·입력칸 */
  --r-lg:        10px;   /* 카드·상자 */
  --r-xl:        12px;   /* 큰 카드·히어로 */
  --r-pill:     999px;   /* 알약·진행 바 (완전히 둥근) */

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);

  /* ===== 시맨틱 토큰 층 — 몽타주(wanteddev/montage-web wds-theme) 체계 ×
     바오밥 팔레트. 색을 용도로 부른다: 새 코드는 아래 이름을 쓰고,
     기존 클래스는 화면 단위로 점진 전환 (디자인_몽타주적용_계획 §2) ===== */
  /* 글자 4위계 — 위계는 별색이 아니라 투명도 단계로 (어느 배경에서도 유지) */
  --label-normal: #222222;
  --label-neutral: rgba(34, 37, 41, 0.88);
  --label-alt: rgba(46, 50, 56, 0.61);
  --label-assistive: rgba(46, 50, 56, 0.28);
  /* 선 3위계 */
  /* 카드·입력칸 테두리. 화면마다 #e3ddd4 로 복제돼 있었고 두 화면은 정의가 없어
     테두리가 글자색으로 나왔다. 여기 한 곳에 두고 선 3위계의 첫 단계를 쓴다. */
  --line: var(--line-normal);
  --line-normal: rgba(112, 115, 124, 0.22);
  --line-neutral: rgba(112, 115, 124, 0.16);
  --line-alt: rgba(112, 115, 124, 0.08);
  /* 배경 */
  --bg-normal: #ffffff;
  --bg-alt: var(--cream);
  /* 주 동작색 */
  --primary: var(--copper);
  --primary-strong: #B06A2F;
  /* 상태 3색 + 연한 배경(8%) */
  --status-positive: var(--success);
  --status-cautionary: var(--warning);
  --status-negative: var(--danger);
  --bg-status-positive: rgba(46, 125, 50, 0.08);
  --bg-status-cautionary: rgba(230, 168, 0, 0.08);
  --bg-status-negative: rgba(214, 47, 47, 0.08);
  /* 8% 틴트를 주조색·안내색에도 — 몽타주가 상태색에 쓰는 방식과 같다 */
  --bg-primary-weak: rgba(198, 123, 60, 0.08);
  --bg-info-weak: rgba(58, 143, 183, 0.08);
  /* 상호작용 */
  --inactive: #989BA2;
  --disable-bg: #F4F4F5;
  /* 간격 사다리 — 임의 픽셀 대신 스텝만 사용 */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px;
  --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
}