/* 버튼 글꼴: 넥슨 메이플스토리 (눈누 CDN) */
@font-face { font-family: 'NexonMaplestory'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFLight.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'NexonMaplestory'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff'); font-weight: 700; font-display: swap; }

/* 제목·헤더 글꼴: 세탁소 고딕 (눈누 무료 글꼴, jsDelivr) */
@font-face {
  font-family: 'LaundryGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicR.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'LaundryGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* 알림창(노트 배경) 글꼴: 학교안심 나들이체 (눈누 무료 글꼴, jsDelivr) */
@font-face {
  font-family: 'SchoolSafeOuting';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimNadeuriTTF-L.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SchoolSafeOuting';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimNadeuriTTF-B.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/*
 * 곰숲 디자인 토큰
 * 색·글꼴·간격·모양은 이 파일의 값만 바꾸면 전체 화면이 따라 바뀝니다.
 * 이미지(로고·지도·캐릭터)는 관리자 > 화면 이미지에서 교체합니다.
 */
:root {
  /* 색상: 포인트 */
  --color-sky: #2f7ebf;
  --color-sky-soft: #e8f1f9;
  --color-leaf: #5c9e1c;        /* 주 강조색 (코지 UI 팩의 잎 초록) */
  --color-leaf-deep: #3f7a0e;
  --color-leaf-soft: #eaf4d4;
  --color-leaf-shade: #3e7f0a;  /* 포인트 색 버튼의 아랫면(입체 그림자) */
  --color-sun: #f2b33d;
  --color-sun-soft: #fff1d6;
  --color-berry: #e3505b;
  --color-berry-soft: #fde3df;

  /* 색상: 바탕과 글자 */
  --mint: #87d6c4;              /* 화면 바탕 민트 (옅은 점무늬 위 색) */
  --color-bg: var(--mint);      /* 테마(game/theme.py)가 덮어쓰는 바탕색 이름 */
  --color-bg-top: #b8d39a;
  --color-surface: #fffeeb;
  --color-surface-alt: #fbefd9;
  --color-border: #edd3bd;
  --color-border-strong: #f6c3bb;  /* 흰 버튼·상자의 아랫면(입체 그림자) */
  --color-text: #4a2b22;
  --color-text-muted: #8a6252;
  --color-text-on-accent: #ffffff;
  --color-shadow: rgba(110, 50, 30, .14);
  --color-overlay: rgba(60, 30, 20, .45);

  /* 글꼴 */
  --font-display: "LaundryGothic", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --font-body: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --font-btn: "NexonMaplestory", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --note-font: 'SchoolSafeOuting', var(--font-body);  /* 알림창(노트 배경) 글꼴 */

  /* 화면 전체 크기: 이 값을 키우면 글자·간격이 함께 커진다 (기본 브라우저 16px) */
  --ui-scale: 16px;             /* 본문 기본 글자 크기 (rem 단위가 모두 이 값을 따른다) */

  /* 글자 크기 */
  --text-xs: .78rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.12rem;
  --text-xl: 1.28rem;
  --text-2xl: clamp(1.4rem, 3.2vw, 1.7rem);

  /* 간격 */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 36px;

  /* 모양 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-card: var(--cozy-line) solid var(--cozy-outline);  /* 코지 팩: 굵은 갈색 테두리 */
  /* 입체감: 흐림 없는 그림자. 상자는 아랫면 한 겹, 버튼은 아랫면 + 바닥 그림자 두 겹 */
  --shadow-card: inset 0 -4px 0 var(--cozy-lip-soft), 0 2px 0 var(--color-shadow);  /* 안쪽 분홍 아랫면 + 바닥 그림자 */
  --shadow-button: 0 3px 0 var(--btn-shade), 0 5px 0 var(--color-shadow);
  --shadow-button-pressed: 0 1px 0 var(--btn-shade), 0 2px 0 var(--color-shadow);

  /* 레이아웃 */
  --content-width: 1160px;
  --hud-h: 0px;                 /* 위쪽 바 높이 (위쪽 바 없음: 내 정보·로그아웃은 아래 핫바) */

  /* 버튼 (이미지 버튼으로 바꿀 때는 --btn-image 에 url(...) 지정) */
  --btn-bg: var(--color-surface);
  --btn-text: var(--color-text);
  --btn-border: var(--color-border);
  --btn-shade: var(--color-border-strong);
  --btn-primary-bg: var(--color-leaf);
  --btn-primary-text: var(--color-text-on-accent);
  --btn-danger-bg: var(--color-berry);
  --btn-danger-shade: #9c2c3c;
  --btn-image: none;

  /* 코지 UI 팩 (static/img/ui/cozy/). 이미지로 그린 부분(버튼·체크박스·종이·나무판)은 테마 색을 따르지 않으므로
     그 위 글자는 테마와 상관없이 --cozy-ink 로 쓴다 (밤 테마에서도 읽히게). */
  --cozy-outline: #97513e;   /* 팩 공통 갈색 테두리 */
  --cozy-cream: #fffeeb;
  --cozy-wood: #dd9a79;
  --cozy-wood-lip: #cc7f64;
  --cozy-lip: #fbd9cd;       /* 크림 상자의 분홍 아랫면 */
  --cozy-lip-line: #f8b3b6;
  --cozy-lip-soft: color-mix(in srgb, var(--cozy-lip-line) 55%, var(--color-surface));  /* 테마 바탕에 섞은 아랫면 */
  --cozy-ink: #4a2b22;
  --cozy-ink-muted: #7d5546;
  --cozy-line: 2px;          /* 상자 테두리 두께 */
}
/* 반응형 기준: 모바일 ≤ 760px. (CSS 변수는 미디어쿼리에 못 쓰므로 각 파일에서 760px로 통일) */