/* 몽코치 디자인 토큰. 디자인 가이드의 tokens.json 을 그대로 옮긴 것입니다.
   값을 바꿀 때는 가이드를 먼저 고치고 이 파일을 맞춥니다. 화면 코드에는 색과 크기를 직접 적지 않고 이 이름만 씁니다.
   stage-* 와 tier-*, spark 는 테마와 무관하게 같은 값입니다(무대 층은 항상 어둡습니다). */
:root {
  color-scheme: light dark;
  --ground: #f4f5f6;
  --surface: #ffffff;
  --surface-sunken: #e9ebee;
  --line: #dddfe3;
  --line-strong: #848891;
  --ink: #12141a;
  --ink-muted: #555961;
  --brand: #0047d9;
  --brand-strong: #0035a6;
  --brand-tint: #e4ecfd;
  --on-brand: #ffffff;
  --warn: #8a4b00;
  --warn-tint: #fbebd3;
  --danger: #b3261e;
  --danger-tint: #fdecea;
  --focus: #12141a;
  --stage: #0e1015;
  --stage-raised: #1b1e24;
  --stage-line: #6f737e;
  --stage-ink: #ffffff;
  --stage-ink-muted: #b9bcc4;
  --stage-brand: #1a5cf0;
  --stage-scrim: #0a0c12db;
  --stage-chip: #0a0c12a6;
  --stage-glass: #fffffff0;
  --on-glass: #12141a;
  --spark: #ffc94a;
  --on-spark: #1f1600;
  --tier-bronze: #d08b57;
  --tier-silver: #a7adb5;
  --tier-gold: #e8b93c;
  --tier-platinum: #cde0f6;
  --tier-diamond: #7fd6ff;
  --on-tier: #0e1015;
  --shadow-sheet: 0 -12px 40px #00000059;
  --ring-talk: 0 0 0 10px #1a5cf073, 0 0 0 22px #1a5cf038;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --tap-primary: 56px;
  --tap-talk: 108px;
  --content-max: 720px;
  --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "Black Han Sans", "IBM Plex Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-num: "Teko", "IBM Plex Sans KR", system-ui, sans-serif;
  /* 외부 로그인 단추. 색은 각 공급사의 로그인 단추 안내에서 정한 값이라 우리 브랜드 색과 무관하고, 로그인 단추 안에서만 씁니다.
     네이버는 흰 글자의 초록 단추가 대비 4.5:1 을 넘지 못해, 네이버 안내의 흰 단추(초록 로고, 검은 글자)를 씁니다. */
  --login-kakao: #fee500;
  --on-login-kakao: #000000d9;
  --login-naver-mark: #03c75a;
  --login-plain: #ffffff;
  --on-login-plain: #1f1f1f;
  --login-plain-line: #747775;
}
/* 어두운 테마: 기기 설정을 따르고, data-theme 으로 고정할 수 있습니다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111317;
    --surface: #1a1c21;
    --surface-sunken: #0c0d11;
    --line: #2b2e35;
    --line-strong: #6f737c;
    --ink: #eeeff2;
    --ink-muted: #a3a6ae;
    --brand: #8fb0ff;
    --brand-strong: #b8ccff;
    --brand-tint: #1b2a4d;
    --on-brand: #081a45;
    --warn: #f2c35b;
    --warn-tint: #3a2f14;
    --danger: #ff8a80;
    --danger-tint: #3a1f1d;
    --focus: #ffffff;
    --login-plain: #131314;
    --on-login-plain: #e3e3e3;
    --login-plain-line: #8e918f;
  }
}
:root[data-theme="dark"] {
  --ground: #111317;
  --surface: #1a1c21;
  --surface-sunken: #0c0d11;
  --line: #2b2e35;
  --line-strong: #6f737c;
  --ink: #eeeff2;
  --ink-muted: #a3a6ae;
  --brand: #8fb0ff;
  --brand-strong: #b8ccff;
  --brand-tint: #1b2a4d;
  --on-brand: #081a45;
  --warn: #f2c35b;
  --warn-tint: #3a2f14;
  --danger: #ff8a80;
  --danger-tint: #3a1f1d;
  --focus: #ffffff;
  --login-plain: #131314;
  --on-login-plain: #e3e3e3;
  --login-plain-line: #8e918f;
}

/* 글자 단계. 업무 층의 제목은 page-title, section-title, card-title 셋입니다. */
.page-title { font-family: var(--font-sans); font-size: 23px; line-height: 31px; font-weight: 700; }
.section-title { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 700; }
.card-title { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 700; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.input { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.hud-name { font-family: var(--font-sans); font-size: 19px; line-height: 24px; font-weight: 700; }
.hud-status { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.hud-hint { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.tier-name { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 400; }
.tier-name-sm { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 400; }
.score-xl { font-family: var(--font-num); font-size: 96px; line-height: 80px; font-weight: 600; }
.score-lg { font-family: var(--font-num); font-size: 48px; line-height: 44px; font-weight: 600; }
.score-md { font-family: var(--font-num); font-size: 26px; line-height: 26px; font-weight: 600; }