/* ==========================================================================
   배움스키스쿨 디자인 토큰
   3단계 구조: 원색(primitive) → 의미(semantic) → 부품(component)
   페이지 코드는 의미·부품 토큰만 사용합니다. 원색은 이 파일 안에서만 씁니다.
   ========================================================================== */

/* 글꼴 ----------------------------------------------------------------------
   제목: 티머니 둥근바람 ExtraBold. 상세페이지 대표 제목("배움스키", "시즌 오픈 전 한정가")에 쓰인 브랜드 글꼴
   본문: Pretendard. 한글 가독성이 좋은 본문용 고딕
   손글씨: 나눔손글씨 펜. 강사 다짐·준비노트 메모 전용
   글꼴 파일은 각 페이지 <head>의 링크와 css/fonts.css에서 불러옵니다.
   티머니 둥근바람은 페이지에 쓰인 글자만 남긴 경량 파일(fonts/)을 씁니다. */

:root {
  /* ── 1. 원색 (primitive) ───────────────────────────────────────────────
     상세페이지와 문장 로고에서 직접 추출한 값을 기준으로 정리했습니다. */

  /* 칠판 그린: 히어로·후기·혜택 영역의 넓은 바탕. 학교 칠판 + 겨울 침엽수 */
  --pine-950: #072414;
  --pine-900: #0A2E1A;
  --pine-800: #0C381F; /* 상세페이지 히어로 #0C381F */
  --pine-700: #1A4A31;
  --pine-600: #2F5B45; /* 상세페이지 강사진 패널 #305D46 */
  --pine-300: #8FAE9B;
  --pine-200: #C9D6CD;
  --pine-100: #E3ECE6;

  /* 눈밭 화이트: 페이지 기본 바탕. 크림보다 차갑고 맑은 슬로프의 흰색 */
  --snow-0: #FFFFFF;
  --snow-50: #F5F7F3;
  --snow-100: #ECF1EC;
  --snow-200: #E1E8E3; /* 하위 페이지 카드 테두리·구분선 */

  /* 먹색: 본문 글자. 순수 검정 대신 그린이 섞인 먹색 */
  --ink-900: #14231A;
  --ink-600: #4B5B51;
  --ink-400: #7D8B82;

  /* 메달 골드: 문장 월계수·뱃지·핵심 강조. 영역의 5~10%만 */
  --gold-800: #7A5314; /* 골드 바탕 위 작은 글자 (5.40:1) */
  --gold-700: #94661A; /* 밝은 바탕 위 골드 글자 (4.67:1) */
  --gold-400: #E2B24F; /* 그린 바탕 위 강조·버튼 */
  --gold-100: #F3E4B9; /* 형광펜 밑줄 바탕 (상세페이지 단어 강조) */

  /* 문장 블루: 로고 리본·슬로건. 정보·링크·하늘 */
  --ice-700: #1A6A94; /* 밝은 바탕 위 링크 (5.51:1) */
  --ice-500: #258FC4; /* 문장 리본 #258FC4 */
  --ice-300: #7CCBF2; /* 그린 바탕 위 포인트 (슬로건 #65C8F8 계열) */
  --ice-50: #E5F0F6;  /* 상담 영역 하늘 바탕 #E6F1F7 */


  /* 카카오 공식 노랑 (카카오 브랜드 가이드) */
  --kakao-yellow: #FEE500;
  --kakao-label: #191919;

  /* ── 2. 의미 (semantic) ────────────────────────────────────────────── */
  --color-bg: var(--snow-50);           /* 페이지 바탕 */
  --color-surface: var(--snow-0);        /* 카드·사진 인화지 */
  --color-surface-sunk: var(--snow-100); /* 표 줄무늬·입력칸 */
  --color-line: var(--pine-200);         /* 구분선 */

  --color-text: var(--ink-900);          /* 본문 15.16:1 */
  --color-text-muted: var(--ink-600);    /* 보조 설명 6.68:1 */
  --color-heading: var(--pine-800);      /* 제목 12.17:1 */

  --color-field: var(--pine-800);        /* 칠판 영역 바탕 */
  --color-field-deep: var(--pine-900);
  --color-field-panel: var(--pine-600);
  --color-on-field: var(--snow-50);      /* 칠판 위 글자 12.17:1 */
  --color-on-field-muted: #C3D8CA;       /* 칠판 위 보조 글자 8.74:1, 회색이 아니라 그린 계열 */
  --color-chalk: rgb(233 239 233 / 0.55); /* 칠판 분필 선·낙서 */

  --color-accent: var(--gold-400);       /* 칠판 위 강조 6.69:1 */
  --color-accent-text: var(--gold-700);  /* 밝은 바탕 위 강조 글자 4.67:1 */
  --color-highlight: var(--gold-100);    /* 형광펜 */
  --color-link: var(--ice-700);
  --color-info: var(--ice-500);
  --color-sky: var(--ice-50);
  --color-on-field-info: var(--ice-300);

  --color-error: #B3261E;                /* 신청서 오류 글자 (흰 바탕 6.54:1) */
  --color-error-bg: #FCEDEB;             /* 오류 안내 상자 바탕 (오류 글자 5.74:1) */
  --color-input-border: var(--ink-400);  /* 입력칸 테두리 (흰 바탕 3.57:1) */
  --color-focus: var(--ice-500);         /* 밝은 바탕 포커스 링 3.36:1 */
  --color-focus-on-field: var(--gold-400);

  /* 브라우저 기본 요소도 브랜드 색으로 */
  --color-selection: var(--gold-100);    /* 글자 드래그 선택 */
  --color-caret: var(--pine-800);        /* 입력 커서 */
  --color-scrollbar: var(--pine-300);    /* 스크롤바 손잡이 */

  /* 글꼴 */
  --font-display: "TmoneyRoundWind", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-hand: "Nanum Pen Script", "Pretendard Variable", cursive;

  /* 글자 크기: 휴대폰(360px) → 데스크톱(1440px)까지 자연스럽게 커짐 */
  --text-display: clamp(2.5rem, 1.75rem + 3.75vw, 5rem);    /* 40 → 80px  히어로 한 줄 */
  --text-h1: clamp(2rem, 1.55rem + 2.25vw, 3.5rem);          /* 32 → 56px  섹션 대제목 */
  --text-h2: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);       /* 26 → 40px  섹션 제목 */
  --text-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);      /* 19 → 24px  카드 제목 */
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);     /* 17 → 20px  섹션 소개글 */
  --text-body: 1.0625rem;                                    /* 17px  본문 */
  --text-small: 0.9375rem;                                   /* 15px  보조 */
  --text-caption: 0.8125rem;                                 /* 13px  캡션·출처 (최소) */
  --text-label: 0.8125rem;                                   /* 13px  표 머리·뱃지·리본 라벨 (제목 위 소제목으로는 쓰지 않음) */
  --text-hand: clamp(1.625rem, 1.45rem + 0.9vw, 2.25rem);    /* 26 → 36px  손글씨는 시각 크기가 작아 크게 */
  --text-price: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);    /* 36 → 60px  가격 숫자 */

  --leading-tight: 1.2;    /* 제목 */
  --leading-snug: 1.4;     /* 카드 제목·버튼 */
  --leading-body: 1.75;    /* 한글 본문은 영문보다 넉넉하게 */
  --tracking-display: -0.02em;
  --tracking-label: 0.12em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 간격: 4px 기준 */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);          /* 좌우 여백 20 → 40px */
  --section-y: clamp(4.5rem, 3rem + 7.5vw, 9rem);             /* 섹션 위아래 72 → 144px */
  --stack-heading: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);     /* 제목 아래 간격 */
  --container: 72rem;   /* 1152px 콘텐츠 최대 폭 */
  --measure: 34em;      /* 한글 본문 한 줄 최대 길이 */

  /* 모서리: 상세페이지의 둥근 카드 언어 */
  --radius-sm: 0.5rem;   /* 8  표·작은 칩 */
  --radius-md: 1rem;     /* 16 입력·작은 카드 */
  --radius-lg: 1.5rem;   /* 24 카드·사진 */
  --radius-pill: 999px;  /* 상담 버튼 */

  /* 그림자: 사진 인화지에만 */
  --shadow-print: 0 1px 2px rgb(10 46 26 / 0.08), 0 12px 32px -12px rgb(10 46 26 / 0.28);
  --shadow-print-on-field: 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 40px -16px rgb(0 0 0 / 0.6); /* 칠판 위 사진 */
  --shadow-bar: 0 -8px 24px -12px rgb(10 46 26 / 0.35);

  /* 움직임 (emil-design-eng 기준: 들어올 때 강한 ease-out, UI 반응은 300ms 이하) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* 등장·누름: 바로 반응하고 부드럽게 멈춤 */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* 화면 안에서 움직임 */
  --duration-fast: 160ms;     /* 버튼 누름, 색 바뀜 */
  --duration-exit: 160ms;     /* 사라질 때는 들어올 때보다 빠르게 */
  --duration-base: 220ms;     /* 호버, 접힘 목록 펼침, 하단 바 */
  --duration-reveal: 560ms;   /* 첫 화면·사진·카톡 등장 (가끔 보는 장면이라 조금 길게) */
  --stagger: 70ms;            /* 여러 개가 차례로 나올 때 간격 */

  /* ── 3. 부품 (component) ───────────────────────────────────────────── */

  /* 카카오 상담 버튼 */
  --btn-kakao-bg: var(--kakao-yellow);
  --btn-kakao-fg: var(--kakao-label);
  --btn-kakao-bg-hover: #F5DC00;
  /* 지도 위 만나는 곳 표시 (상세페이지 지도의 빨간 동그라미와 같은 빨강) */
  --map-marker: #D33A2C;
  /* 전화 버튼 */
  --btn-call-bg: var(--pine-800);
  --btn-call-fg: var(--snow-50);
  --btn-call-bg-hover: var(--pine-700);
  /* 흰 카드 위 보내기 버튼 (상담 신청) */
  --btn-primary-bg: var(--pine-800);
  --btn-primary-fg: var(--snow-50);
  --btn-primary-bg-hover: var(--pine-700);
  /* 칠판 위 강조 버튼 (사전예약) */
  --btn-accent-bg: var(--gold-400);
  --btn-accent-fg: var(--pine-900);
  /* 칠판 위 전화 버튼 */
  --btn-call-light-bg: var(--snow-50);
  --btn-call-light-fg: var(--pine-800);
  --btn-call-light-bg-hover: var(--snow-0);
  --btn-height: 3.5rem;      /* 56px 엄지 터치 */
  --btn-height-sm: 2.75rem;  /* 44px 최소 터치 */
  --btn-radius: var(--radius-pill);

  /* 첫 화면 "배움스키" 큰 제목: 상세페이지처럼 흰색에서 하늘색으로 (사용자 지정) */
  --hero-title-fill: linear-gradient(180deg, #FFFFFF 12%, #D9F2FD 52%, #8FD3F5 100%);
  --hero-title-solid: var(--ice-300);              /* 그라데이션 글자를 못 그리는 브라우저용 */
  --hero-title-shadow: rgb(4 20 11 / 0.55);

  /* 겹침 순서 */
  --z-header: 30;    /* 상단 바 */
  --z-bar: 40;       /* 하단 상담 바 */
  --z-skip: 50;      /* 본문 바로가기 */

  /* 모바일 하단 고정 상담 바 */
  --bar-bg: rgb(245 247 243 / 0.94);
  --bar-height: 4.75rem;

  /* 사진 인화지 (상세페이지 폴라로이드 + 마스킹테이프) */
  --print-border: 0.625rem;  /* 10px 흰 테두리 */
  --print-border-bottom: 2.75rem;
  --print-tape: rgb(124 203 242 / 0.7);
  --print-tilt: -2deg;

  /* 카드 */
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-lg);
  --card-pad: clamp(1.25rem, 1rem + 1.25vw, 2rem);

  /* 표 (요금·등급) */
  --table-head-bg: var(--pine-600);
  --table-head-fg: var(--snow-50);
  --table-row-alt: var(--snow-100);

  /* 카톡 말풍선 (전날 상담·피드백 예시) */
  --bubble-teacher-bg: var(--snow-0);
  --bubble-parent-bg: var(--kakao-yellow);
  --chat-bg: #B7CAD8;  /* 카카오톡 채팅방 기본 배경 */

  /* ── 4. 하위 페이지 (요금·배움 소개·이용안내 등) ─────────────────────────
     시그너리처럼: 흰 바탕, 페이지 맨 위는 큰 사진 + 흰 글씨, 아래는 장식 없이 정돈.
     세련된 디테일: 바깥 틀 안에 카드가 놓인 이중 테두리, 가는 세리프 숫자, 화살표 동그라미가 든 둥근 버튼.
     진한 초록은 사진 위 막·강조 카드·상담 띠에만, 바닥글은 거의 검정. */
  --color-page: var(--snow-0);              /* 기본 바탕: 흰색 */
  --color-page-alt: var(--snow-50);         /* 묶음을 나누는 아주 옅은 회색 띠 */
  --color-border-soft: rgb(19 32 25 / 0.08);/* 머리카락처럼 얇은 선 */
  --color-shell: rgb(19 32 25 / 0.04);      /* 이중 테두리의 바깥 틀 */
  --color-paper: #FBFAF4;                   /* 부모님께 드리는 편지: 따뜻한 편지지 */
  --color-footer: #0B110E;                  /* 바닥글: 시그너리처럼 거의 검정 (초록 기운) */
  --color-tag-bg: var(--pine-100);          /* 작은 꼬리표 바탕 */
  --color-tag-fg: var(--pine-700);          /* 작은 꼬리표 글자 11.0:1 */
  --color-on-photo: var(--snow-0);          /* 사진 위 글자 */
  --color-on-photo-muted: rgb(255 255 255 / 0.82);
  --photo-scrim: linear-gradient(90deg, rgb(7 36 20 / 0.82) 0%, rgb(7 36 20 / 0.55) 55%, rgb(7 36 20 / 0.25) 100%); /* 사진 위 진초록 막 */
  --photo-scrim-mobile: linear-gradient(180deg, rgb(7 36 20 / 0.45) 0%, rgb(7 36 20 / 0.78) 100%);

  --font-serif: "Instrument Serif", "Times New Roman", serif;  /* 영문 포인트·가격 숫자 */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);                /* 무게감 있게 미끄러지는 움직임 */

  --page-section-y: clamp(4rem, 2.8rem + 5.5vw, 7.5rem);   /* 묶음 위아래 64 → 120px */
  --shell-pad: 0.375rem;                                    /* 이중 테두리 틈 6px */
  --radius-shell: 1.5rem;                                   /* 바깥 틀 24px */
  --radius-core: calc(var(--radius-shell) - var(--shell-pad)); /* 안쪽 카드 18px: 같은 중심의 둥근 모서리 */
  --card-radius-page: var(--radius-core);
  --btn-height-page: 3.25rem;    /* 52px */
  --btn-accent-bg-hover: #EBC266;
  --shadow-card: 0 1px 2px rgb(19 32 25 / 0.04), 0 18px 40px -28px rgb(19 32 25 / 0.3);
  --shadow-menu: 0 22px 48px -24px rgb(19 32 25 / 0.35);

  /* 공통 머리글 */
  --header-h: 4rem;        /* 휴대폰 64px */
  --header-h-lg: 4.75rem;  /* PC 76px */
  --notice-bg: #0B110E;
  --notice-fg: var(--snow-50);
  --z-menu: 45;            /* 휴대폰 전체 메뉴: 떠 있는 버튼(40)보다 위 */
  --z-toast: 60;
}