/* ============================================================
   base.css — 전 페이지 공통 디자인 토큰 + 리셋
   색상·간격·타이포 변수는 이 파일 한 곳에서만 정의한다.
   (개별 페이지에서 값이 다르면 해당 page CSS에서 :root override)
   ============================================================ */
:root{
  /* neutrals */
  --ink:#141620;
  --ink-soft:#393c4a;
  --muted:#6b7085;
  --paper:#ffffff;
  --mist:#f2f5fb;
  --mist-2:#e8edf8;
  --line:#e4e8f2;

  /* brand blue (primary) */
  --blue:#2b5cf5;
  --blue-deep:#1a2f8f;
  --blue-100:#e6ecfe;
  --blue-bright:#4a78ff;

  /* accent purple (포인트 컬러) */
  --violet:#7c3aed;
  --violet-100:#f0e9fd;   /* 연한 배경용 (--blue-100과 같은 역할) */

  /* accent teal (STEP·보조 강조) */
  --teal:#12b7a8;
  --teal-100:#d7f3ee;     /* 연한 배경용 */

  /* status */
  --ok:#12b76a;
  --warn:#f5a524;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(20,22,32,.06),0 4px 14px rgba(20,22,32,.05);
  --shadow-md:0 10px 40px rgba(25,40,110,.14);

  /* radius */
  --r:20px;

  /* typography */
  --display:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --latin:"Archivo",system-ui,sans-serif;
  --latin-x:"Archivo Expanded","Archivo",system-ui,sans-serif;

  /* layout metrics */
  --nav-h:70px;
  --tab-h:52px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--display);color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.01em;overflow-x:hidden;
  /* sticky footer: 내용이 짧아도 푸터를 화면 바닥에 붙임 */
  min-height:100vh;display:flex;flex-direction:column;
}
/* 헤더~푸터 사이 flex 아이템들은 세로로 자연스럽게 쌓임(가로 100% 유지) */
body > *{flex-shrink:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%}
/* width:100% 명시 — body가 flex column이라 auto 여백만으로는 내용 너비로 줄어듦 */
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px}