:root{

  --neutral1:#FFFFFF;    /* 카드 배경 */
  --neutral2:#F7F8FA;    /* 페이지 배경 */
  --neutral3:#F1F3F6;    /* 옅은 채움 */
  --neutral4:#E9ECF1;    /* 구분선 */
  --neutral5:#DFE3EA;    /* 테두리 */
  --neutral6:#C3C9D4;    /* 비활성 */
  --neutral7:#98A0AF;    /* 캡션 */
  --neutral8:#727B8C;    /* 보조 글자 */
  --neutral9:#535C6D;    /* 본문 */
  --neutral10:#232A38;   /* 소제목 */
  --neutral11:#14182B;   /* 제목 · 주요 버튼 */

  --brand1:#F2F5FE;
  --brand2:#E4EAFD;
  --brand3:#C6D2FA;
  --brand4:#3B5BDB;      /* 메인 */
  --brand5:#2F49B4;      /* hover */

  --judge1:#1F6E4E;  --judge1-bg:#EAF4EE;  --judge1-line:#C7E2D3;
  --judge2:#8A6212;  --judge2-bg:#FBF3E3;  --judge2-line:#EEDFBB;
  --judge3:#A3382F;  --judge3-bg:#FBECEA;  --judge3-line:#F1D3CF;

  /* 어두운(neutral11) 배경 위에 얹는 흰 글자/트랙 — 불투명도 단계 */
  --on-dark-caption:rgba(255,255,255,.55);  /* 오늘 요약 캡션·범례 */
  --on-dark-unit:rgba(255,255,255,.5);      /* 오늘 요약 큰 숫자 옆 단위 */
  --on-dark-track:rgba(255,255,255,.14);    /* stack-bar 배경 트랙 */
  --on-dark-fill:rgba(255,255,255,.45);     /* stack-bar 일부완료 채움 */
  --on-dark-sub:rgba(255,255,255,.6);       /* 선택된 pick-item 보조 텍스트 */
  --overlay:rgba(20,24,43,.34);             /* 모달 배경 딤 처리 (neutral11 34%) */

  /* 모서리 반경 — planner.css 전역에서 참조만 하고 값이 없어 죽어있던 토큰.
     기존에 쓰이던 리터럴 값들(.nav-i/.icon-btn 9px, .side-box/.sum-list 12px,
     components.css .modal 18px)과 맞춰서 채웠다 */
  --r-sm:9px;
  --r-md:12px;
  --r-lg:18px;

  /* 그림자 — 위와 같은 이유로 채움. components.css의 동급 요소 그림자와
     톤만 --overlay 계열(rgba(20,24,43,..))로 맞췄다 */
  --shadow:0 2px 4px rgba(20,24,43,.08);
  --shadow-lg:0 10px 40px rgba(20,24,43,.2);

  --ui:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;   /* 숫자용 */

  /* ---------- 화면 너비 ---------- */
  --container:1080px;    /* 본문 최대 너비 */
}


*{
    box-sizing:border-box;
    margin:0;
    padding:0
}

body{
  font-family:var(--ui);
  background:var(--neutral2);
  color:var(--neutral9);
  font-size:14px;
  line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}

/* 숫자는 이 클래스로 — 자릿수가 세로로 맞습니다 */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}

/* 화면엔 안 보이지만 스크린 리더·폼 제출에는 남겨야 하는 요소용 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
         overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* 본문 폭 — 넓은 모니터에서 콘텐츠가 흩어지지 않게 */
.container{max-width:var(--container);margin:0 auto}

@media (max-width:767px){
  .container{padding:0 16px}
}