/*********************
   정치24 design tokens
   - CSS 변수 + 변수와 1:1 매칭되는 유틸리티 클래스
   - common.css 이후에 로드되어 .box / .btn 등 legacy 기본값을 덮어쓰기
*********************/
:root {
  /* font */
  --font-25: 2.5rem;        --font-25-weight: 700;
  --font-23: 2.3rem;        --font-23-weight: 700;
  --font-20: 2rem;          --font-20-weight: 700;
  --font-18-sb: 1.8rem;     --font-18-sb-weight: 600;
  --font-18-eb: 1.8rem;     --font-18-eb-weight: 800;
  --font-18: 1.8rem;        --font-18-weight: 500;
  --font-16-sb: 1.6rem;     --font-16-sb-weight: 600;
  --font-15: 1.5rem;        --font-15-weight: 500;
  --font-13: 1.3rem;        --font-13-weight: 500;
  --font-13-light: 1.3rem;  --font-13-light-weight: 300;

  /* background */
  --bg-dark: #181818;
  --bg-light-gray: #f3f3f3;
  --bg-gray: #d4d4d4;
  --bg-selected: #f5f5f5;
  --bg-blue: #6e86fd;
  --bg-pale-blue: #F6F7FF;

  /* border */
  --border: #ededed;
  --border-selected: #c0c0c0;

  /* text color */
  --color-dark: #181818;
  --color-gray: #747474;
  --color-light-gray: #aaa;
  --color-blue: #6e86fd;
  --color-positive: #4a5bff;
  --color-negative: #FF3636;
}

/* === font utilities === */
.font-25       { font-size: var(--font-25);       font-weight: var(--font-25-weight); }
.font-23       { font-size: var(--font-23);       font-weight: var(--font-23-weight); }
.font-20       { font-size: var(--font-20);       font-weight: var(--font-20-weight); }
.font-18-eb    { font-size: var(--font-18-eb);    font-weight: var(--font-18-eb-weight); }
.font-18-sb    { font-size: var(--font-18-sb);    font-weight: var(--font-18-sb-weight); }
.font-18       { font-size: var(--font-18);       font-weight: var(--font-18-weight); }
.font-16-sb    { font-size: var(--font-16-sb);    font-weight: var(--font-16-sb-weight); }
.font-15       { font-size: var(--font-15);       font-weight: var(--font-15-weight); }
.font-13       { font-size: var(--font-13);       font-weight: var(--font-13-weight); }
.font-13-light { font-size: var(--font-13-light); font-weight: var(--font-13-light-weight); }

/* === background utilities === */
.bg-dark       { background: var(--bg-dark); }
.bg-light-gray { background: var(--bg-light-gray); }
.bg-gray       { background: var(--bg-gray); }
.bg-selected   { background: var(--bg-selected); }
.bg-blue       { background: var(--bg-blue); }
.bg-pale-blue  { background: var(--bg-pale-blue); }

/* === border utilities (사용자 사양: background로 적용) === */
.border           { background: var(--border); }
.border-selected  { background: var(--border-selected); }

/* === text color utilities === */
.color-dark       { color: var(--color-dark); }
.color-gray       { color: var(--color-gray); }
.color-light-gray { color: var(--color-light-gray); }
.color-blue       { color: var(--color-blue); }
.color-positive   { color: var(--color-positive); }
.color-negative   { color: var(--color-negative); }

/* === box / padding / button (새 토큰값으로 덮어쓰기) === */
.box {
  border-radius: 1.5rem;
}
.pd20 { padding: 2rem; }
.pd24 { padding: 2.4rem 2rem; }
.pd30 { padding: 3rem 2.8rem; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  width: 100%;
  padding: 2rem;
  margin: 0 auto;
}
.btn span {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}