/* 오늘의 제목 디자인 토큰 — 자동 생성 파일. tokens/src를 고친 뒤 `npm run tokens:build`로 다시 만든다. */
/* 테마: 기본은 기기 설정(prefers-color-scheme)을 따른다. data-theme="light|dark"를 html이나 화면 일부에 주면 그 아래는 그 테마로 고정된다. */

/* 원시 토큰과 테마와 무관한 의미 토큰 */
:root {
  --color-ink-0: #FFFFFF;
  --color-ink-25: #F8F9FB;
  --color-ink-50: #F2F3F6;
  --color-ink-100: #E6E8ED;
  --color-ink-200: #D2D6DE;
  --color-ink-300: #B3B9C5;
  --color-ink-400: #8F96A4;
  --color-ink-500: #666D7C;
  --color-ink-600: #515766;
  --color-ink-700: #3D424D;
  --color-ink-800: #2A2D35;
  --color-ink-850: #1F2128;
  --color-ink-900: #17191E;
  --color-ink-950: #0F1014;
  --color-velvet-50: #FFF0F3;
  --color-velvet-100: #FFDDE5;
  --color-velvet-200: #FFBBCB;
  --color-velvet-300: #FF8FAA;
  --color-velvet-400: #F75F86;
  --color-velvet-500: #E5386A;
  --color-velvet-600: #C8215A;
  --color-velvet-700: #A3184A;
  --color-velvet-800: #7C1239;
  --color-velvet-900: #520C27;
  --color-velvet-950: #33081A;
  --color-marquee-50: #FFF7E6;
  --color-marquee-100: #FFEDC4;
  --color-marquee-200: #FFDD8C;
  --color-marquee-300: #FFCB52;
  --color-marquee-400: #F9B42A;
  --color-marquee-500: #E09A12;
  --color-marquee-600: #A86F06;
  --color-marquee-700: #855809;
  --color-marquee-800: #5E3F0B;
  --color-marquee-900: #3A280A;
  --color-marquee-950: #261A08;
  --color-red-50: #FFF0EE;
  --color-red-100: #FFDCD7;
  --color-red-300: #FF9184;
  --color-red-400: #F66756;
  --color-red-500: #E2463A;
  --color-red-600: #BF3328;
  --color-red-700: #962A23;
  --color-red-900: #4A1612;
  --color-red-950: #2E0F0C;
  --color-green-50: #EAF8F2;
  --color-green-100: #CCEFE0;
  --color-green-300: #6FD3AA;
  --color-green-400: #33B888;
  --color-green-500: #159E70;
  --color-green-600: #0D7F5A;
  --color-green-700: #0B6648;
  --color-green-900: #0A3326;
  --color-green-950: #06211A;
  --color-blue-50: #EEF3FF;
  --color-blue-100: #DBE6FF;
  --color-blue-300: #8EAFFF;
  --color-blue-400: #5F8BF5;
  --color-blue-500: #3D6BE0;
  --color-blue-600: #2D55C2;
  --color-blue-700: #24449A;
  --color-blue-900: #142552;
  --color-blue-950: #0D1834;
  --color-alpha-ink-6: #0F10140F;
  --color-alpha-ink-45: #0F101473;
  --color-alpha-white-8: #FFFFFF14;
  --color-alpha-black-64: #000000A3;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-avatar-sm: 24px;
  --size-avatar-md: 32px;
  --size-avatar-lg: 40px;
  --size-touch-min: 44px;
  --border-width-hairline: 1px;
  --border-width-thick: 2px;
  --opacity-disabled: 0.4;
  --z-index-base: 0;
  --z-index-sticky: 10;
  --z-index-tabbar: 20;
  --z-index-fab: 30;
  --z-index-scrim: 40;
  --z-index-sheet: 50;
  --z-index-toast: 60;
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0, 0, 0, 1);
  --easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --easing-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-family-title: Hahmlet, "Noto Serif KR", AppleMyungjo, Batang, serif;
  --font-family-ui: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-30: 30px;
  --color-external-kakao-container: #FEE500;
  --color-external-kakao-label: #000000D9;
  --layout-gutter: var(--space-20);
  --layout-section-gap: var(--space-32);
  --layout-content-max-width: 560px;
  --layout-header-height: 52px;
  --layout-tabbar-height: 56px;
  --text-display-font-family: var(--font-family-title);
  --text-display-font-size: var(--font-size-30);
  --text-display-font-weight: var(--font-weight-bold);
  --text-display-line-height: 40px;
  --text-display-letter-spacing: -0.025em;
  --text-title-xl-font-family: var(--font-family-title);
  --text-title-xl-font-size: var(--font-size-24);
  --text-title-xl-font-weight: var(--font-weight-bold);
  --text-title-xl-line-height: 34px;
  --text-title-xl-letter-spacing: -0.02em;
  --text-title-lg-font-family: var(--font-family-title);
  --text-title-lg-font-size: var(--font-size-20);
  --text-title-lg-font-weight: var(--font-weight-semibold);
  --text-title-lg-line-height: 30px;
  --text-title-lg-letter-spacing: -0.015em;
  --text-title-md-font-family: var(--font-family-title);
  --text-title-md-font-size: var(--font-size-17);
  --text-title-md-font-weight: var(--font-weight-semibold);
  --text-title-md-line-height: 26px;
  --text-title-md-letter-spacing: -0.01em;
  --text-rank-font-family: var(--font-family-title);
  --text-rank-font-size: var(--font-size-26);
  --text-rank-font-weight: var(--font-weight-bold);
  --text-rank-line-height: 30px;
  --text-rank-letter-spacing: -0.02em;
  --text-heading-lg-font-family: var(--font-family-ui);
  --text-heading-lg-font-size: var(--font-size-22);
  --text-heading-lg-font-weight: var(--font-weight-bold);
  --text-heading-lg-line-height: 30px;
  --text-heading-lg-letter-spacing: -0.02em;
  --text-heading-md-font-family: var(--font-family-ui);
  --text-heading-md-font-size: var(--font-size-18);
  --text-heading-md-font-weight: var(--font-weight-bold);
  --text-heading-md-line-height: 26px;
  --text-heading-md-letter-spacing: -0.015em;
  --text-heading-sm-font-family: var(--font-family-ui);
  --text-heading-sm-font-size: var(--font-size-16);
  --text-heading-sm-font-weight: var(--font-weight-semibold);
  --text-heading-sm-line-height: 24px;
  --text-heading-sm-letter-spacing: -0.01em;
  --text-body-lg-font-family: var(--font-family-ui);
  --text-body-lg-font-size: var(--font-size-16);
  --text-body-lg-font-weight: var(--font-weight-regular);
  --text-body-lg-line-height: 24px;
  --text-body-lg-letter-spacing: -0.01em;
  --text-body-md-font-family: var(--font-family-ui);
  --text-body-md-font-size: var(--font-size-15);
  --text-body-md-font-weight: var(--font-weight-regular);
  --text-body-md-line-height: 22px;
  --text-body-md-letter-spacing: -0.005em;
  --text-body-sm-font-family: var(--font-family-ui);
  --text-body-sm-font-size: var(--font-size-14);
  --text-body-sm-font-weight: var(--font-weight-regular);
  --text-body-sm-line-height: 20px;
  --text-body-sm-letter-spacing: 0em;
  --text-label-lg-font-family: var(--font-family-ui);
  --text-label-lg-font-size: var(--font-size-16);
  --text-label-lg-font-weight: var(--font-weight-semibold);
  --text-label-lg-line-height: 22px;
  --text-label-lg-letter-spacing: -0.01em;
  --text-label-md-font-family: var(--font-family-ui);
  --text-label-md-font-size: var(--font-size-14);
  --text-label-md-font-weight: var(--font-weight-semibold);
  --text-label-md-line-height: 20px;
  --text-label-md-letter-spacing: -0.005em;
  --text-label-sm-font-family: var(--font-family-ui);
  --text-label-sm-font-size: var(--font-size-13);
  --text-label-sm-font-weight: var(--font-weight-medium);
  --text-label-sm-line-height: 18px;
  --text-label-sm-letter-spacing: 0em;
  --text-caption-font-family: var(--font-family-ui);
  --text-caption-font-size: var(--font-size-12);
  --text-caption-font-weight: var(--font-weight-regular);
  --text-caption-line-height: 16px;
  --text-caption-letter-spacing: 0em;
  --text-caption-strong-font-family: var(--font-family-ui);
  --text-caption-strong-font-size: var(--font-size-12);
  --text-caption-strong-font-weight: var(--font-weight-semibold);
  --text-caption-strong-line-height: 16px;
  --text-caption-strong-letter-spacing: 0em;
  --text-micro-font-family: var(--font-family-ui);
  --text-micro-font-size: var(--font-size-11);
  --text-micro-font-weight: var(--font-weight-medium);
  --text-micro-line-height: 14px;
  --text-micro-letter-spacing: 0.01em;
}

/* 테마별 의미 토큰: 라이트 */
:root, [data-theme="light"] {
  --color-bg-canvas: var(--color-ink-0);
  --color-bg-surface: var(--color-ink-0);
  --color-bg-surface-raised: var(--color-ink-0);
  --color-bg-grouped: var(--color-ink-50);
  --color-bg-muted: var(--color-ink-50);
  --color-bg-muted-strong: var(--color-ink-100);
  --color-bg-inverse: var(--color-ink-900);
  --color-bg-brand: var(--color-velvet-600);
  --color-bg-brand-pressed: var(--color-velvet-700);
  --color-bg-brand-subtle: var(--color-velvet-50);
  --color-bg-overlay-pressed: var(--color-alpha-ink-6);
  --color-bg-scrim: var(--color-alpha-ink-45);
  --color-fg-default: var(--color-ink-900);
  --color-fg-title: var(--color-ink-950);
  --color-fg-muted: var(--color-ink-600);
  --color-fg-subtle: var(--color-ink-500);
  --color-fg-disabled: var(--color-ink-300);
  --color-fg-inverse: var(--color-ink-0);
  --color-fg-on-brand: var(--color-ink-0);
  --color-fg-brand: var(--color-velvet-600);
  --color-border-default: var(--color-ink-100);
  --color-border-strong: var(--color-ink-200);
  --color-border-focus: var(--color-velvet-500);
  --color-border-brand: var(--color-velvet-600);
  --color-status-danger-fg: var(--color-red-600);
  --color-status-danger-bg: var(--color-red-50);
  --color-status-success-fg: var(--color-green-600);
  --color-status-success-bg: var(--color-green-50);
  --color-status-warning-fg: var(--color-marquee-700);
  --color-status-warning-bg: var(--color-marquee-50);
  --color-status-info-fg: var(--color-blue-600);
  --color-status-info-bg: var(--color-blue-50);
  --color-visibility-public-fg: var(--color-blue-600);
  --color-visibility-public-bg: var(--color-blue-50);
  --color-visibility-friends-fg: var(--color-green-700);
  --color-visibility-friends-bg: var(--color-green-50);
  --color-visibility-private-fg: var(--color-ink-600);
  --color-visibility-private-bg: var(--color-ink-50);
  --color-empathy-idle: var(--color-ink-500);
  --color-empathy-active: var(--color-velvet-600);
  --color-empathy-active-bg: var(--color-velvet-50);
  --color-rank-top: var(--color-marquee-600);
  --color-rank-rest: var(--color-ink-500);
  --color-rank-highlight-bg: var(--color-ink-50);
  --color-author-nickname: var(--color-ink-800);
  --color-author-anonymous: var(--color-ink-500);
  --color-badge-editorial-fg: var(--color-ink-0);
  --color-badge-editorial-bg: var(--color-ink-900);
  --color-external-apple-container: #000000;
  --color-external-apple-label: #FFFFFF;
  --shadow-sm: 0px 1px 2px 0px #0F10140F;
  --shadow-md: 0px 6px 20px 0px #0F101424;
  --shadow-lg: 0px -8px 32px 0px #0F10142E;
}

/* 다크: 기기 설정이 다크이고 라이트로 고정하지 않았을 때 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-canvas: var(--color-ink-950);
    --color-bg-surface: var(--color-ink-900);
    --color-bg-surface-raised: var(--color-ink-850);
    --color-bg-grouped: var(--color-ink-950);
    --color-bg-muted: var(--color-ink-800);
    --color-bg-muted-strong: var(--color-ink-700);
    --color-bg-inverse: var(--color-ink-50);
    --color-bg-brand-subtle: var(--color-velvet-950);
    --color-bg-overlay-pressed: var(--color-alpha-white-8);
    --color-bg-scrim: var(--color-alpha-black-64);
    --color-fg-default: var(--color-ink-50);
    --color-fg-title: var(--color-ink-25);
    --color-fg-muted: var(--color-ink-300);
    --color-fg-subtle: var(--color-ink-400);
    --color-fg-disabled: var(--color-ink-600);
    --color-fg-inverse: var(--color-ink-950);
    --color-fg-brand: var(--color-velvet-300);
    --color-border-default: var(--color-ink-800);
    --color-border-strong: var(--color-ink-700);
    --color-border-focus: var(--color-velvet-300);
    --color-border-brand: var(--color-velvet-300);
    --color-status-danger-fg: var(--color-red-300);
    --color-status-danger-bg: var(--color-red-950);
    --color-status-success-fg: var(--color-green-300);
    --color-status-success-bg: var(--color-green-950);
    --color-status-warning-fg: var(--color-marquee-300);
    --color-status-warning-bg: var(--color-marquee-950);
    --color-status-info-fg: var(--color-blue-300);
    --color-status-info-bg: var(--color-blue-950);
    --color-visibility-public-fg: var(--color-blue-300);
    --color-visibility-public-bg: var(--color-blue-950);
    --color-visibility-friends-fg: var(--color-green-300);
    --color-visibility-friends-bg: var(--color-green-950);
    --color-visibility-private-fg: var(--color-ink-300);
    --color-visibility-private-bg: var(--color-ink-850);
    --color-empathy-idle: var(--color-ink-400);
    --color-empathy-active: var(--color-velvet-300);
    --color-empathy-active-bg: var(--color-velvet-950);
    --color-rank-top: var(--color-marquee-300);
    --color-rank-rest: var(--color-ink-400);
    --color-rank-highlight-bg: var(--color-ink-900);
    --color-author-nickname: var(--color-ink-100);
    --color-author-anonymous: var(--color-ink-400);
    --color-badge-editorial-fg: var(--color-ink-950);
    --color-badge-editorial-bg: var(--color-ink-100);
    --color-external-apple-container: #FFFFFF;
    --color-external-apple-label: #000000;
    --shadow-sm: 0px 1px 2px 0px #00000066;
    --shadow-md: 0px 6px 20px 0px #00000099;
    --shadow-lg: 0px -8px 32px 0px #000000B3;
  }
}

/* 다크: data-theme="dark"로 고정했을 때 */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--color-ink-950);
  --color-bg-surface: var(--color-ink-900);
  --color-bg-surface-raised: var(--color-ink-850);
  --color-bg-grouped: var(--color-ink-950);
  --color-bg-muted: var(--color-ink-800);
  --color-bg-muted-strong: var(--color-ink-700);
  --color-bg-inverse: var(--color-ink-50);
  --color-bg-brand-subtle: var(--color-velvet-950);
  --color-bg-overlay-pressed: var(--color-alpha-white-8);
  --color-bg-scrim: var(--color-alpha-black-64);
  --color-fg-default: var(--color-ink-50);
  --color-fg-title: var(--color-ink-25);
  --color-fg-muted: var(--color-ink-300);
  --color-fg-subtle: var(--color-ink-400);
  --color-fg-disabled: var(--color-ink-600);
  --color-fg-inverse: var(--color-ink-950);
  --color-fg-brand: var(--color-velvet-300);
  --color-border-default: var(--color-ink-800);
  --color-border-strong: var(--color-ink-700);
  --color-border-focus: var(--color-velvet-300);
  --color-border-brand: var(--color-velvet-300);
  --color-status-danger-fg: var(--color-red-300);
  --color-status-danger-bg: var(--color-red-950);
  --color-status-success-fg: var(--color-green-300);
  --color-status-success-bg: var(--color-green-950);
  --color-status-warning-fg: var(--color-marquee-300);
  --color-status-warning-bg: var(--color-marquee-950);
  --color-status-info-fg: var(--color-blue-300);
  --color-status-info-bg: var(--color-blue-950);
  --color-visibility-public-fg: var(--color-blue-300);
  --color-visibility-public-bg: var(--color-blue-950);
  --color-visibility-friends-fg: var(--color-green-300);
  --color-visibility-friends-bg: var(--color-green-950);
  --color-visibility-private-fg: var(--color-ink-300);
  --color-visibility-private-bg: var(--color-ink-850);
  --color-empathy-idle: var(--color-ink-400);
  --color-empathy-active: var(--color-velvet-300);
  --color-empathy-active-bg: var(--color-velvet-950);
  --color-rank-top: var(--color-marquee-300);
  --color-rank-rest: var(--color-ink-400);
  --color-rank-highlight-bg: var(--color-ink-900);
  --color-author-nickname: var(--color-ink-100);
  --color-author-anonymous: var(--color-ink-400);
  --color-badge-editorial-fg: var(--color-ink-950);
  --color-badge-editorial-bg: var(--color-ink-100);
  --color-external-apple-container: #FFFFFF;
  --color-external-apple-label: #000000;
  --shadow-sm: 0px 1px 2px 0px #00000066;
  --shadow-md: 0px 6px 20px 0px #00000099;
  --shadow-lg: 0px -8px 32px 0px #000000B3;
}

/* 컴포넌트 토큰: 테마가 바뀌는 요소마다 다시 계산한다 */
:root, [data-theme] {
  --button-radius: var(--radius-md);
  --button-gap: var(--space-6);
  --button-sm-height: var(--space-32);
  --button-sm-padding-x: var(--space-12);
  --button-sm-label-font-family: var(--text-label-md-font-family);
  --button-sm-label-font-size: var(--text-label-md-font-size);
  --button-sm-label-font-weight: var(--text-label-md-font-weight);
  --button-sm-label-line-height: var(--text-label-md-line-height);
  --button-sm-label-letter-spacing: var(--text-label-md-letter-spacing);
  --button-md-height: var(--size-touch-min);
  --button-md-padding-x: var(--space-16);
  --button-md-label-font-family: var(--text-label-md-font-family);
  --button-md-label-font-size: var(--text-label-md-font-size);
  --button-md-label-font-weight: var(--text-label-md-font-weight);
  --button-md-label-line-height: var(--text-label-md-line-height);
  --button-md-label-letter-spacing: var(--text-label-md-letter-spacing);
  --button-lg-height: 52px;
  --button-lg-padding-x: var(--space-20);
  --button-lg-label-font-family: var(--text-label-lg-font-family);
  --button-lg-label-font-size: var(--text-label-lg-font-size);
  --button-lg-label-font-weight: var(--text-label-lg-font-weight);
  --button-lg-label-line-height: var(--text-label-lg-line-height);
  --button-lg-label-letter-spacing: var(--text-label-lg-letter-spacing);
  --button-primary-bg: var(--color-bg-brand);
  --button-primary-bg-pressed: var(--color-bg-brand-pressed);
  --button-primary-fg: var(--color-fg-on-brand);
  --button-secondary-bg: var(--color-bg-muted);
  --button-secondary-bg-pressed: var(--color-bg-muted-strong);
  --button-secondary-fg: var(--color-fg-default);
  --button-ghost-bg-pressed: var(--color-bg-overlay-pressed);
  --button-ghost-fg: var(--color-fg-muted);
  --button-danger-fg: var(--color-status-danger-fg);
  --button-disabled-opacity: var(--opacity-disabled);
  --chip-height: var(--space-32);
  --chip-padding-x: var(--space-12);
  --chip-gap: var(--space-8);
  --chip-radius: var(--radius-full);
  --chip-label-font-family: var(--text-label-sm-font-family);
  --chip-label-font-size: var(--text-label-sm-font-size);
  --chip-label-font-weight: var(--text-label-sm-font-weight);
  --chip-label-line-height: var(--text-label-sm-line-height);
  --chip-label-letter-spacing: var(--text-label-sm-letter-spacing);
  --chip-label-selected-font-family: var(--text-label-md-font-family);
  --chip-label-selected-font-size: var(--text-label-md-font-size);
  --chip-label-selected-font-weight: var(--text-label-md-font-weight);
  --chip-label-selected-line-height: var(--text-label-md-line-height);
  --chip-label-selected-letter-spacing: var(--text-label-md-letter-spacing);
  --chip-bg: var(--color-bg-muted);
  --chip-fg: var(--color-fg-muted);
  --chip-bg-selected: var(--color-bg-inverse);
  --chip-fg-selected: var(--color-fg-inverse);
  --composer-prompt-font-family: var(--text-body-md-font-family);
  --composer-prompt-font-size: var(--text-body-md-font-size);
  --composer-prompt-font-weight: var(--text-body-md-font-weight);
  --composer-prompt-line-height: var(--text-body-md-line-height);
  --composer-prompt-letter-spacing: var(--text-body-md-letter-spacing);
  --composer-prompt-color: var(--color-fg-muted);
  --composer-input-font-family: var(--text-display-font-family);
  --composer-input-font-size: var(--text-display-font-size);
  --composer-input-font-weight: var(--text-display-font-weight);
  --composer-input-line-height: var(--text-display-line-height);
  --composer-input-letter-spacing: var(--text-display-letter-spacing);
  --composer-input-color: var(--color-fg-title);
  --composer-placeholder-color: var(--color-fg-subtle);
  --composer-counter-font-family: var(--text-caption-font-family);
  --composer-counter-font-size: var(--text-caption-font-size);
  --composer-counter-font-weight: var(--text-caption-font-weight);
  --composer-counter-line-height: var(--text-caption-line-height);
  --composer-counter-letter-spacing: var(--text-caption-letter-spacing);
  --composer-counter-color: var(--color-fg-subtle);
  --composer-counter-warn-color: var(--color-status-warning-fg);
  --composer-counter-over-color: var(--color-status-danger-fg);
  --composer-option-height: var(--size-touch-min);
  --composer-option-radius: var(--radius-md);
  --composer-option-gap: var(--space-8);
  --composer-option-selected-border: var(--color-border-brand);
  --composer-option-selected-bg: var(--color-bg-brand-subtle);
  --composer-hint-font-family: var(--text-body-sm-font-family);
  --composer-hint-font-size: var(--text-body-sm-font-size);
  --composer-hint-font-weight: var(--text-body-sm-font-weight);
  --composer-hint-line-height: var(--text-body-sm-line-height);
  --composer-hint-letter-spacing: var(--text-body-sm-letter-spacing);
  --composer-hint-color: var(--color-status-info-fg);
  --composer-hint-bg: var(--color-status-info-bg);
  --composer-input-underline: var(--color-border-strong);
  --composer-input-underline-focus: var(--color-border-focus);
  --empathy-height: var(--space-32);
  --empathy-padding-x: var(--space-8);
  --empathy-gap: var(--space-4);
  --empathy-radius: var(--radius-full);
  --empathy-icon-size: var(--size-icon-md);
  --empathy-count-font-family: var(--text-caption-font-family);
  --empathy-count-font-size: var(--text-caption-font-size);
  --empathy-count-font-weight: var(--text-caption-font-weight);
  --empathy-count-line-height: var(--text-caption-line-height);
  --empathy-count-letter-spacing: var(--text-caption-letter-spacing);
  --empathy-idle-color: var(--color-empathy-idle);
  --empathy-active-color: var(--color-empathy-active);
  --empathy-active-bg: var(--color-empathy-active-bg);
  --empathy-pop-duration: var(--duration-normal);
  --empathy-pop-easing: var(--easing-pop);
  --empathy-pop-scale: 1.18;
  --tabbar-height: var(--layout-tabbar-height);
  --tabbar-bg: var(--color-bg-surface);
  --tabbar-border-color: var(--color-border-default);
  --tabbar-icon-size: var(--size-icon-lg);
  --tabbar-label-font-family: var(--text-micro-font-family);
  --tabbar-label-font-size: var(--text-micro-font-size);
  --tabbar-label-font-weight: var(--text-micro-font-weight);
  --tabbar-label-line-height: var(--text-micro-line-height);
  --tabbar-label-letter-spacing: var(--text-micro-letter-spacing);
  --tabbar-fg: var(--color-fg-subtle);
  --tabbar-fg-active: var(--color-fg-default);
  --feed-tabs-label-font-family: var(--text-heading-sm-font-family);
  --feed-tabs-label-font-size: var(--text-heading-sm-font-size);
  --feed-tabs-label-font-weight: var(--text-heading-sm-font-weight);
  --feed-tabs-label-line-height: var(--text-heading-sm-line-height);
  --feed-tabs-label-letter-spacing: var(--text-heading-sm-letter-spacing);
  --feed-tabs-fg: var(--color-fg-subtle);
  --feed-tabs-fg-active: var(--color-fg-default);
  --feed-tabs-indicator-color: var(--color-fg-default);
  --feed-tabs-indicator-width: var(--border-width-thick);
  --fab-size: 56px;
  --fab-radius: var(--radius-full);
  --fab-bg: var(--color-bg-brand);
  --fab-fg: var(--color-fg-on-brand);
  --fab-icon-size: var(--size-icon-lg);
  --fab-shadow: var(--shadow-md);
  --fab-offset: var(--space-20);
  --sheet-bg: var(--color-bg-surface-raised);
  --sheet-radius: var(--radius-xl);
  --sheet-shadow: var(--shadow-lg);
  --sheet-handle-color: var(--color-border-strong);
  --sheet-padding-x: var(--layout-gutter);
  --sheet-scrim: var(--color-bg-scrim);
  --sheet-enter-duration: var(--duration-slow);
  --sheet-enter-easing: var(--easing-enter);
  --toast-bg: var(--color-bg-inverse);
  --toast-fg: var(--color-fg-inverse);
  --toast-radius: var(--radius-md);
  --toast-padding-x: var(--space-16);
  --toast-padding-y: var(--space-12);
  --toast-label-font-family: var(--text-body-sm-font-family);
  --toast-label-font-size: var(--text-body-sm-font-size);
  --toast-label-font-weight: var(--text-body-sm-font-weight);
  --toast-label-line-height: var(--text-body-sm-line-height);
  --toast-label-letter-spacing: var(--text-body-sm-letter-spacing);
  --rank-numeral-font-family: var(--text-rank-font-family);
  --rank-numeral-font-size: var(--text-rank-font-size);
  --rank-numeral-font-weight: var(--text-rank-font-weight);
  --rank-numeral-line-height: var(--text-rank-line-height);
  --rank-numeral-letter-spacing: var(--text-rank-letter-spacing);
  --rank-numeral-width: var(--space-32);
  --rank-top-color: var(--color-rank-top);
  --rank-rest-color: var(--color-rank-rest);
  --rank-trophy-size: var(--size-icon-lg);
  --rank-item-title-font-family: var(--text-title-md-font-family);
  --rank-item-title-font-size: var(--text-title-md-font-size);
  --rank-item-title-font-weight: var(--text-title-md-font-weight);
  --rank-item-title-line-height: var(--text-title-md-line-height);
  --rank-item-title-letter-spacing: var(--text-title-md-letter-spacing);
  --rank-item-padding-y: var(--space-16);
  --rank-highlight-bg: var(--color-rank-highlight-bg);
  --rank-highlight-radius: var(--radius-lg);
  --rank-highlight-padding: var(--space-16);
  --rank-highlight-title-font-family: var(--text-title-lg-font-family);
  --rank-highlight-title-font-size: var(--text-title-lg-font-size);
  --rank-highlight-title-font-weight: var(--text-title-lg-font-weight);
  --rank-highlight-title-line-height: var(--text-title-lg-line-height);
  --rank-highlight-title-letter-spacing: var(--text-title-lg-letter-spacing);
  --tag-height: 22px;
  --tag-padding-x: var(--space-6);
  --tag-gap: var(--space-2);
  --tag-radius: var(--radius-xs);
  --tag-icon-size: var(--size-icon-xs);
  --tag-label-font-family: var(--text-caption-strong-font-family);
  --tag-label-font-size: var(--text-caption-strong-font-size);
  --tag-label-font-weight: var(--text-caption-strong-font-weight);
  --tag-label-line-height: var(--text-caption-strong-line-height);
  --tag-label-letter-spacing: var(--text-caption-strong-letter-spacing);
  --title-card-padding-x: var(--layout-gutter);
  --title-card-padding-y: var(--space-20);
  --title-card-gap: var(--space-8);
  --title-card-title-font-family: var(--text-title-lg-font-family);
  --title-card-title-font-size: var(--text-title-lg-font-size);
  --title-card-title-font-weight: var(--text-title-lg-font-weight);
  --title-card-title-line-height: var(--text-title-lg-line-height);
  --title-card-title-letter-spacing: var(--text-title-lg-letter-spacing);
  --title-card-title-color: var(--color-fg-title);
  --title-card-author-font-family: var(--text-label-sm-font-family);
  --title-card-author-font-size: var(--text-label-sm-font-size);
  --title-card-author-font-weight: var(--text-label-sm-font-weight);
  --title-card-author-line-height: var(--text-label-sm-line-height);
  --title-card-author-letter-spacing: var(--text-label-sm-letter-spacing);
  --title-card-meta-font-family: var(--text-caption-font-family);
  --title-card-meta-font-size: var(--text-caption-font-size);
  --title-card-meta-font-weight: var(--text-caption-font-weight);
  --title-card-meta-line-height: var(--text-caption-line-height);
  --title-card-meta-letter-spacing: var(--text-caption-letter-spacing);
  --title-card-meta-color: var(--color-fg-subtle);
  --title-card-divider-color: var(--color-border-default);
  --title-card-divider-width: var(--border-width-hairline);
  --title-card-pressed-bg: var(--color-bg-overlay-pressed);
}

/* 텍스트 스타일 */

.text-display {
  font-family: var(--text-display-font-family);
  font-size: var(--text-display-font-size);
  font-weight: var(--text-display-font-weight);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-letter-spacing);
}

.text-title-xl {
  font-family: var(--text-title-xl-font-family);
  font-size: var(--text-title-xl-font-size);
  font-weight: var(--text-title-xl-font-weight);
  line-height: var(--text-title-xl-line-height);
  letter-spacing: var(--text-title-xl-letter-spacing);
}

.text-title-lg {
  font-family: var(--text-title-lg-font-family);
  font-size: var(--text-title-lg-font-size);
  font-weight: var(--text-title-lg-font-weight);
  line-height: var(--text-title-lg-line-height);
  letter-spacing: var(--text-title-lg-letter-spacing);
}

.text-title-md {
  font-family: var(--text-title-md-font-family);
  font-size: var(--text-title-md-font-size);
  font-weight: var(--text-title-md-font-weight);
  line-height: var(--text-title-md-line-height);
  letter-spacing: var(--text-title-md-letter-spacing);
}

.text-rank {
  font-variant-numeric: tabular-nums;
  font-family: var(--text-rank-font-family);
  font-size: var(--text-rank-font-size);
  font-weight: var(--text-rank-font-weight);
  line-height: var(--text-rank-line-height);
  letter-spacing: var(--text-rank-letter-spacing);
}

.text-heading-lg {
  font-family: var(--text-heading-lg-font-family);
  font-size: var(--text-heading-lg-font-size);
  font-weight: var(--text-heading-lg-font-weight);
  line-height: var(--text-heading-lg-line-height);
  letter-spacing: var(--text-heading-lg-letter-spacing);
}

.text-heading-md {
  font-family: var(--text-heading-md-font-family);
  font-size: var(--text-heading-md-font-size);
  font-weight: var(--text-heading-md-font-weight);
  line-height: var(--text-heading-md-line-height);
  letter-spacing: var(--text-heading-md-letter-spacing);
}

.text-heading-sm {
  font-family: var(--text-heading-sm-font-family);
  font-size: var(--text-heading-sm-font-size);
  font-weight: var(--text-heading-sm-font-weight);
  line-height: var(--text-heading-sm-line-height);
  letter-spacing: var(--text-heading-sm-letter-spacing);
}

.text-body-lg {
  font-family: var(--text-body-lg-font-family);
  font-size: var(--text-body-lg-font-size);
  font-weight: var(--text-body-lg-font-weight);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-letter-spacing);
}

.text-body-md {
  font-family: var(--text-body-md-font-family);
  font-size: var(--text-body-md-font-size);
  font-weight: var(--text-body-md-font-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
}

.text-body-sm {
  font-family: var(--text-body-sm-font-family);
  font-size: var(--text-body-sm-font-size);
  font-weight: var(--text-body-sm-font-weight);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-letter-spacing);
}

.text-label-lg {
  font-family: var(--text-label-lg-font-family);
  font-size: var(--text-label-lg-font-size);
  font-weight: var(--text-label-lg-font-weight);
  line-height: var(--text-label-lg-line-height);
  letter-spacing: var(--text-label-lg-letter-spacing);
}

.text-label-md {
  font-family: var(--text-label-md-font-family);
  font-size: var(--text-label-md-font-size);
  font-weight: var(--text-label-md-font-weight);
  line-height: var(--text-label-md-line-height);
  letter-spacing: var(--text-label-md-letter-spacing);
}

.text-label-sm {
  font-family: var(--text-label-sm-font-family);
  font-size: var(--text-label-sm-font-size);
  font-weight: var(--text-label-sm-font-weight);
  line-height: var(--text-label-sm-line-height);
  letter-spacing: var(--text-label-sm-letter-spacing);
}

.text-caption {
  font-variant-numeric: tabular-nums;
  font-family: var(--text-caption-font-family);
  font-size: var(--text-caption-font-size);
  font-weight: var(--text-caption-font-weight);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
}

.text-caption-strong {
  font-family: var(--text-caption-strong-font-family);
  font-size: var(--text-caption-strong-font-size);
  font-weight: var(--text-caption-strong-font-weight);
  line-height: var(--text-caption-strong-line-height);
  letter-spacing: var(--text-caption-strong-letter-spacing);
}

.text-micro {
  font-family: var(--text-micro-font-family);
  font-size: var(--text-micro-font-size);
  font-weight: var(--text-micro-font-weight);
  line-height: var(--text-micro-line-height);
  letter-spacing: var(--text-micro-letter-spacing);
}