/* =========================================================
   티드립 2026 — 디자인 토큰
   색·글자·간격·모서리·그림자는 여기서만 정한다. 화면과 컴포넌트는 변수만 쓴다.
   시안과 라이믹스 레이아웃(layouts/tdrip_2026/css)이 같은 파일을 쓴다.
   ========================================================= */
:root {
  /* 브랜드 — 로고 초록 #008741 */
  --td-green: #008741;
  --td-lemon: #FFE15A;
  --td-coral: #F0533F;
  --td-sky: #2F7DE1;
  --td-violet: #7457D9;
  --td-naver: #03C75A;

  /* 의미 토큰(라이트) */
  --td-bg: #F4F5F2;
  --td-surface: #FFFFFF;
  --td-surface-2: #F8F9F6;
  --td-surface-3: #EEF0EB;
  --td-line: #E4E7E0;
  --td-line-strong: #D2D7CE;
  --td-text: #141A16;
  --td-text-2: #47504A;
  --td-text-3: #687069;
  --td-text-visited: #8B928D;
  --td-text-inverse: #FFFFFF;

  --td-brand: var(--td-green);
  --td-brand-hover: #00773A;
  --td-brand-text: #007A3B;
  --td-brand-soft: #E8F5ED;
  --td-brand-soft-2: #CDEBD9;
  --td-brand-ink: #003D1F;
  --td-hl: var(--td-lemon);
  --td-hl-soft: #FFF6C7;
  --td-hl-text: #7A5A00;
  --td-hot: var(--td-coral);
  --td-hot-soft: #FFECE8;
  --td-hot-text: #C53A27;
  --td-info: var(--td-sky);
  --td-info-soft: #EAF2FD;
  --td-info-text: #1F61B8;
  --td-ai: var(--td-violet);
  --td-ai-soft: #F0ECFC;
  --td-ai-text: #5B3FC0;
  --td-focus: 0 0 0 3px rgba(0, 135, 65, .28);
  --td-dim: rgba(12, 18, 14, .48);

  /* 글자 */
  --td-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --td-t-2xs: 11px;
  --td-t-xs: 12px;
  --td-t-sm: 13px;
  --td-t-md: 14px;
  --td-t-base: 15px;
  --td-t-lg: 17px;
  --td-t-xl: 20px;
  --td-t-2xl: 24px;
  --td-t-3xl: 30px;
  --td-t-4xl: 40px;
  --td-read-size: 17px;          /* 본문 글자 크기(읽기 설정이 바꾼다) */
  --td-tracking: -0.015em;

  /* 간격 */
  --td-s-1: 4px;
  --td-s-2: 8px;
  --td-s-3: 12px;
  --td-s-4: 16px;
  --td-s-5: 20px;
  --td-s-6: 24px;
  --td-s-8: 32px;
  --td-s-10: 40px;
  --td-s-12: 48px;

  /* 모서리 */
  --td-r-xs: 6px;
  --td-r-sm: 10px;
  --td-r-md: 14px;
  --td-r-lg: 20px;
  --td-r-xl: 28px;
  --td-r-pill: 999px;

  /* 그림자 */
  --td-shadow-1: 0 1px 2px rgba(20, 26, 22, .05);
  --td-shadow-2: 0 12px 32px -14px rgba(20, 26, 22, .22), 0 2px 6px rgba(20, 26, 22, .05);
  --td-shadow-3: 0 24px 60px -20px rgba(20, 26, 22, .35);

  /* 틀 */
  --td-shell: 1200px;
  --td-aside: 320px;
  --td-header-h: 64px;
  --td-tabbar-h: 60px;
  --td-ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* 다크 — 직접 고른 경우 */
:root[data-theme="dark"] {
  --td-bg: #0D110F;
  --td-surface: #141916;
  --td-surface-2: #181E1A;
  --td-surface-3: #1F2621;
  --td-line: #252D27;
  --td-line-strong: #333C35;
  --td-text: #E7ECE8;
  --td-text-2: #B3BBB5;
  --td-text-3: #8D968F;
  --td-text-visited: #6F7871;
  --td-brand: #13A05C;
  --td-brand-hover: #18B267;
  --td-brand-text: #4DD18F;
  --td-brand-soft: rgba(19, 160, 92, .14);
  --td-brand-soft-2: rgba(19, 160, 92, .26);
  --td-brand-ink: #CFF5E0;
  --td-hl-soft: rgba(255, 225, 90, .13);
  --td-hl-text: #FFE27A;
  --td-hot-soft: rgba(240, 83, 63, .16);
  --td-hot-text: #FF8F7F;
  --td-info-soft: rgba(47, 125, 225, .16);
  --td-info-text: #8DBBFF;
  --td-ai-soft: rgba(116, 87, 217, .2);
  --td-ai-text: #BBA8FF;
  --td-focus: 0 0 0 3px rgba(77, 209, 143, .35);
  --td-dim: rgba(0, 0, 0, .62);
  --td-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --td-shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --td-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* 글자 크기 설정(가-/가+) */
:root[data-read="s"] { --td-read-size: 15px; }
:root[data-read="l"] { --td-read-size: 19px; }
:root[data-read="xl"] { --td-read-size: 21px; }

@media (max-width: 767px) {
  :root { --td-header-h: 56px; }
}

/* 원팡 2026 스킨에서 옮겨 온 코드가 쓰는 이름(같은 값으로 잇는다) */
:root {
  --td-w-regular: 400;
  --td-w-medium: 500;
  --td-w-semibold: 600;
  --td-w-bold: 700;
  --td-w-black: 800;
  --td-dur: .18s;
  --td-success: var(--td-brand-text);
  --td-success-soft: var(--td-brand-soft);
  --td-sky-soft: var(--td-info-soft);
  --td-mint-soft: var(--td-brand-soft);
  --td-cream-soft: var(--td-hl-soft);
  --td-warning: var(--td-hl-text);
  --td-warning-soft: var(--td-hl-soft);
}