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

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

   ★ 굵기는 **받은 그대로 한 벌만** 쓴다(2026-09-15 강준영 지시 — "크기만 다르고
     굵기는 첨부한 폰트 그대로"). 그래서 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 {
  /* 2026-09-14 톤 전환 — 마크가 씨앗(베이지)+싹(초록)이 되면서 화면도 따라간다.
     네이비·코퍼는 328곳에서 var(--navy)·var(--copper) 로 불린다. 이름을 328번
     고치는 대신 **여기 두 줄의 값만** 새 팔레트로 옮긴다. 되돌리기도 두 줄이다.
     이름은 나중에 손대는 김에 하나씩 바꾼다. */
  --bark: #27352C;        /* 짙은 구조색 — 상단 바·제목 (옛 네이비 자리) */
  --bark-deep: #1B2620;   /* 상단 바 그라데이션 끝 */
  --bark-deeper: #141D18; /* 더 짙은 끝 */
  --bark-soft: #3C4E42;   /* 어두운 바 위의 보조 단추 */
  --sprout-deep: #3C7130; /* 눌림·hover */
  --sprout-soft: #6FA85F; /* 밝은 바탕에서의 hover */

  --navy: var(--bark);
  --copper: var(--sprout);
  --cream: #F7F3EE;
  --teal: #3A8FB7;
  /* 씨알 마크 — 2026-09-14. 아래는 씨앗, 위는 싹이다.
     「씨알」이 곧 낟알이라 이름과 마크가 같은 말을 한다.
     싹은 바탕에 따라 둘로 갈린다: 밝은 카드 위는 --sprout,
     어두운 상단 바 위는 --sprout-lift. 씨앗은 양쪽 다 같은 베이지로 읽힌다. */
  --seed: #E6D6B4;
  --sprout: #4C8B3C;
  --sprout-lift: #78B863;
  --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;   /* 페이지 제목·큰 수치 */
  /* 아래 둘은 **로그인 밖 소개 화면 전용** 이다. 파는 화면에는 22px 로는 모자란
     자리가 있다(대제목·인사말). 앱 안 화면에서는 쓰지 않는다 — 쓰면 화면마다
     글자 크기가 달라 보인다. 좁은 화면에서는 아래 미디어쿼리가 낮춘다. */
  --fs-display:  34px;   /* 소개 화면 대제목 */
  --fs-lede:     20px;   /* 소개 화면 인사말 */

  /* 모서리 사다리 — 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: var(--sprout-deep);
  /* 상태 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(76, 139, 60, 0.08);   /* --sprout 에서 나온다 */
  --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;
}

/* 좁은 화면(휴대폰)에서는 소개 화면 대제목을 낮춘다.
   토큰 값을 여기서 바꾸므로 템플릿에는 숫자가 남지 않는다. */
@media (max-width: 760px) {
  :root {
    --fs-display: 26px;
    --fs-lede:    17px;
  }
}