/* ==========================================================================
   oodot design system — tokens.css
   색 · 타이포 · 간격 · 모서리 · 그림자 · 움직임의 단일 출처.
   이 파일만 바꾸면 모든 서비스의 외형이 함께 바뀐다.
   v1.1.1 · 라이트 모드 전용
   ========================================================================== */

/* ---------- 글꼴 ---------- */
@import url("fonts/pretendard-1.3.9/pretendardvariable-dynamic-subset.css");

:root {
  /* 라이트 전용이라고 브라우저에 알린다 — 없으면 크롬 '웹 콘텐츠 어둡게'가 화면을 통째로 뒤집는다(10-03 점검) */
  color-scheme: only light;

  /* ======================================================================
     1. 원시 색 (palette) — UI에서 직접 쓰지 않는다. 아래 의미 색이 참조만 한다.
     ====================================================================== */

  /* 회색 — 차갑고 중성적인 한 줄. 화면의 95%는 이 색들이다. */
  --od-gray-0:   #ffffff;
  --od-gray-25:  #fbfbfd;
  --od-gray-50:  #f5f5f7;
  --od-gray-100: #ededf0;
  --od-gray-200: #e1e1e6;
  --od-gray-300: #cfcfd6;
  --od-gray-400: #8a8a90;
  --od-gray-500: #6e6e73;
  --od-gray-600: #5a5a61;
  --od-gray-700: #4a4a52;
  --od-gray-800: #2e2e33;
  --od-gray-900: #1d1d1f;

  /* 파랑 — 포인트 컬러 한 줄. 500이 시그니처 #2A64F6. */
  --od-blue-50:  #eef3ff;
  --od-blue-100: #dde6ff;
  --od-blue-200: #bccfff;
  --od-blue-300: #93b0ff;
  --od-blue-400: #5c88fa;
  --od-blue-500: #2a64f6;
  --od-blue-600: #1c4fd8;
  --od-blue-700: #1740ad;
  --od-blue-800: #163683;

  /* 상태 색 — 성공 · 주의 · 위험. 포인트 컬러와 같은 무게로 쓰지 않는다. */
  --od-green-50:  #e9f6ec;
  --od-green-200: #bfe3c9;
  --od-green-600: #1d7f3c;
  --od-green-700: #17632f;

  --od-amber-50:  #fdf4e3;
  --od-amber-200: #f1dcae;
  --od-amber-600: #8a5a00;
  --od-amber-700: #6d4700;

  --od-red-50:  #fcecea;
  --od-red-200: #f4c9c5;
  --od-red-600: #c4302b;
  --od-red-700: #9d2622;

  /* ======================================================================
     2. 의미 색 (semantic) — 컴포넌트와 화면은 이것만 쓴다.
     ====================================================================== */

  /* 배경 */
  --od-bg:            var(--od-gray-0);    /* 카드·패널 등 올라오는 면 */
  --od-bg-page:       var(--od-gray-0);    /* 문서 페이지 바닥 — 대문·소개·약관·로그인. 선과 여백으로 나눈다 */
  --od-bg-canvas:     var(--od-gray-50);   /* 앱 화면 바닥 — 계정 관리·관리자. 흰 카드를 올려 나눈다 */
  --od-bg-subtle:     var(--od-gray-50);   /* 살짝 눌린 영역 */
  --od-bg-sunken:     var(--od-gray-100);  /* 더 눌린 영역, 입력 트랙 */
  --od-bg-hover:      rgba(0, 0, 0, .04);
  --od-bg-active:     rgba(0, 0, 0, .07);
  --od-bg-selected:   var(--od-gray-100);  /* 지금 있는 자리·걸린 조건 — 무채색이다 */
  --od-bg-disabled:   var(--od-gray-100);

  /* 글자 */
  --od-text:           var(--od-gray-900);  /* 본문·제목 */
  --od-text-secondary: var(--od-gray-600);  /* 설명, 부가 정보 (대비 6.8:1) */
  --od-text-tertiary:  var(--od-gray-500);  /* 캡션, 자리표시자 (대비 5.1:1) */
  --od-text-disabled:  var(--od-gray-400);
  --od-text-on-accent: #ffffff;
  --od-text-accent:    var(--od-blue-600);  /* 흰 바탕 위 파란 글자 (대비 6.6:1) */
  --od-text-success:   var(--od-green-700);
  --od-text-warning:   var(--od-amber-700);
  --od-text-danger:    var(--od-red-700);

  /* 선 */
  --od-border:        var(--od-gray-200);   /* 기본 경계 */
  --od-border-strong: var(--od-gray-400);   /* 입력 칸처럼 형태를 알려야 할 때 (대비 3.4:1) */
  --od-border-subtle: var(--od-gray-100);   /* 목록 구분선 */

  /* 포인트 */
  --od-accent:         var(--od-blue-500);
  --od-accent-hover:   var(--od-blue-600);
  --od-accent-active:  var(--od-blue-700);
  --od-accent-subtle:  var(--od-blue-50);  /* 파란 알림·정보의 바탕. '고른 것'에는 쓰지 않는다 */
  --od-accent-muted:   var(--od-blue-200);

  /* 상태 */
  --od-success:        var(--od-green-600);
  --od-success-subtle: var(--od-green-50);
  --od-success-border: var(--od-green-200);
  --od-warning:        var(--od-amber-600);
  --od-warning-subtle: var(--od-amber-50);
  --od-warning-border: var(--od-amber-200);
  --od-danger:         var(--od-red-600);
  --od-danger-hover:   var(--od-red-700);
  --od-danger-subtle:  var(--od-red-50);
  --od-danger-border:  var(--od-red-200);

  /* 그 밖 */
  --od-scrim:  rgba(0, 0, 0, .32);
  --od-focus:  var(--od-blue-500);

  /* ======================================================================
     3. 타이포
     크기마다 자간·행간이 다르다. 큰 글씨는 좁게, 작은 글씨는 넓게.
     ====================================================================== */
  --od-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --od-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --od-weight-regular:  400;
  --od-weight-medium:   500;
  --od-weight-semibold: 600;
  --od-weight-bold:     700;

  /* caption 12 */
  --od-size-caption:    0.75rem;
  --od-leading-caption: 1.45;
  --od-tracking-caption: 0.005em;
  /* footnote 13 */
  --od-size-footnote:    0.8125rem;
  --od-leading-footnote: 1.5;
  --od-tracking-footnote: 0.003em;
  /* subhead 14 */
  --od-size-subhead:    0.875rem;
  --od-leading-subhead: 1.55;
  --od-tracking-subhead: 0em;
  /* body 16 */
  --od-size-body:    1rem;
  --od-leading-body: 1.62;
  --od-tracking-body: -0.003em;
  /* headline 18 */
  --od-size-headline:    1.125rem;
  --od-leading-headline: 1.5;
  --od-tracking-headline: -0.006em;
  /* title-3 21 */
  --od-size-title-3:    1.3125rem;
  --od-leading-title-3: 1.4;
  --od-tracking-title-3: -0.012em;
  /* title-2 26 */
  --od-size-title-2:    1.625rem;
  --od-leading-title-2: 1.3;
  --od-tracking-title-2: -0.017em;
  /* title-1 32 */
  --od-size-title-1:    2rem;
  --od-leading-title-1: 1.22;
  --od-tracking-title-1: -0.021em;
  /* display-2 40 */
  --od-size-display-2:    2.5rem;
  --od-leading-display-2: 1.12;
  --od-tracking-display-2: -0.024em;
  /* hero 40→80 — 문서 페이지의 첫 문장 하나에만. 그림 없는 첫 화면을 글자가 채운다 */
  --od-size-hero:     clamp(2.5rem, 1.5rem + 3.9vw, 5rem);
  --od-leading-hero:  1.16;
  --od-tracking-hero: -0.034em;
  /* display-1 56 */
  --od-size-display-1:    3.5rem;
  --od-leading-display-1: 1.05;
  --od-tracking-display-1: -0.028em;

  /* ======================================================================
     4. 간격 — 4px 배수. 홀수 값을 만들지 않는다.
     ====================================================================== */
  --od-space-0:  0;
  --od-space-1:  0.25rem;  /*  4 */
  --od-space-2:  0.5rem;   /*  8 */
  --od-space-3:  0.75rem;  /* 12 */
  --od-space-4:  1rem;     /* 16 */
  --od-space-5:  1.25rem;  /* 20 */
  --od-space-6:  1.5rem;   /* 24 */
  --od-space-8:  2rem;     /* 32 */
  --od-space-10: 2.5rem;   /* 40 */
  --od-space-12: 3rem;     /* 48 */
  --od-space-16: 4rem;     /* 64 */
  --od-space-20: 5rem;     /* 80 */
  --od-space-24: 6rem;     /* 96 */

  /* ======================================================================
     5. 모서리
     ====================================================================== */
  --od-radius-xs:   4px;   /* 배지, 작은 표식 */
  --od-radius-sm:   6px;   /* 작은 버튼, 입력 칸 */
  --od-radius-md:   8px;   /* 버튼, 입력 칸 기본 */
  --od-radius-lg:   12px;  /* 카드, 메뉴 */
  --od-radius-xl:   16px;  /* 큰 카드, 시트 */
  --od-radius-2xl:  22px;  /* 히어로 면 */
  --od-radius-full: 999px; /* 알약, 아바타 */

  /* ======================================================================
     6. 그림자 — 면이 클수록 깊게. 라이트 모드에서만 유효하다.
     ====================================================================== */
  --od-shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .04);
  --od-shadow-2: 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --od-shadow-3: 0 8px 24px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
  --od-shadow-4: 0 24px 60px rgba(0, 0, 0, .14), 0 6px 18px rgba(0, 0, 0, .06);
  --od-shadow-focus: 0 0 0 3px rgba(42, 100, 246, .28);

  /* ======================================================================
     7. 움직임
     시간은 상한선이다. 손가락이 닿는 것은 시간이 아니라 스프링으로 움직인다.
     ====================================================================== */
  --od-duration-instant: 90ms;   /* 눌림 표시 */
  --od-duration-fast:    140ms;  /* 색·투명도 */
  --od-duration-base:    220ms;  /* 열고 닫기 */
  --od-duration-slow:    340ms;  /* 큰 면의 이동 */

  --od-ease-out:   cubic-bezier(0.32, 0.72, 0, 1);  /* 들어올 때 */
  --od-ease-in:    cubic-bezier(1, 0, 0.68, 0.28);  /* 나갈 때 (들어올 때의 역) */
  --od-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* 스프링 — motion.js 가 읽어 쓴다. response = 목표에 닿는 속도(초), damping 1 = 튐 없음 */
  --od-spring-ui-response:       0.4;   /* 나타나기 · 자리 옮기기 */
  --od-spring-ui-damping:        1;
  --od-spring-quick-response:    0.26;  /* 닫기 · 사라지기 */
  --od-spring-quick-damping:     1;
  --od-spring-momentum-response: 0.35;  /* 시트 · 던지기 · 토스트 */
  --od-spring-momentum-damping:  0.85;

  /* ======================================================================
     8. 레이아웃
     ====================================================================== */
  --od-container-sm: 40rem;   /* 640 — 읽는 글 */
  --od-container-md: 56rem;   /* 896 — 폼, 설정 */
  --od-container-lg: 72rem;   /* 1152 — 대시보드 */
  --od-container-xl: 90rem;   /* 1440 — 넓은 표 */
  --od-container-page: 80rem; /* 1280 — 문서 페이지의 틀. 상단바·본문·바닥이 같은 끝선에 선다 */
  --od-gutter: clamp(1rem, .4rem + 2.6vw, 2.5rem); /* 틀 좌우 여백 16→40 */

  /* 서비스 아이콘 — 종류가 다른 서비스를 한 집안으로 묶는 공통 규격 */
  --od-icon-radius: 22.5%;
  --od-icon-edge:   inset 0 0 0 1px rgba(0, 0, 0, .08); /* 흰 아이콘이 흰 바탕에 묻히지 않게 */
  /* 꺾이는 지점은 둘뿐 — 900(길잡이가 서랍이 된다) · 600(한 줄 배치).
     @media 안에서는 var() 를 못 써서 토큰으로 두지 못한다. 숫자를 이 둘 말고 쓰지 않는다. */

  --od-control-height-sm: 28px;
  --od-control-height-md: 36px;
  --od-control-height-lg: 44px;  /* 손가락이 닿는 최소 크기 */

  --od-z-sticky:  100;
  --od-z-menu:    200;
  --od-z-scrim:   300;
  --od-z-modal:   310;
  --od-z-toast:   400;
  --od-z-tooltip: 500;
}

/* ==========================================================================
   최소 초기화 — 서비스 쪽 CSS와 싸우지 않을 만큼만.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--od-bg-canvas);
  color: var(--od-text);
  font-family: var(--od-font);
  font-size: var(--od-size-body);
  line-height: var(--od-leading-body);
  letter-spacing: var(--od-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; }

/* hidden 속성은 어떤 display 규칙보다 세다 — 이 한 줄이 없으면 숨김이 풀린다 */
[hidden] { display: none !important; }

:where(a) { color: var(--od-text-accent); }

:where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* 초점 고리는 키보드로 왔을 때만 보인다 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--od-focus);
  outline-offset: 2px;
  border-radius: var(--od-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}