/*
  토큰 — apps/app/src/shared/theme.ts(= web plain.css) 값 그대로. 여기서 값을 발명하지 않는다.
  앱이 바뀌면 여기를 따라 고친다.
*/
@import url('./fonts/pretendard.css');

:root {
  /* 지면 */
  --bg: #ffffff;
  --bg-subtle: #f6f8fa;
  --card: #ffffff;
  /* 글자 */
  --text: #000000;
  --body: #4e5052;
  --text-muted: #636568;
  --text-faint: #87898e;
  /* 선 */
  --line: #e6e8ea;
  --line-soft: #edeff1;
  --line-strong: #d3d6d9;
  /* 강조 */
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eaf3ff;
  --on-accent: #ffffff;
  --danger: #f4361e;
  --danger-soft: rgba(244, 54, 30, 0.1);
  --success: #03a94d;
  --success-soft: rgba(3, 169, 77, 0.12);
  --warning: #b16c04;
  --warning-soft: rgba(177, 108, 4, 0.1);
  --press-down: #e3e4e6;
  --chip-canvas: #e9ebee;
  /* 등락 — 상승 빨강 · 하락 파랑 */
  --rise: #ed3738;
  --fall: #007eff;
  /* 아이콘 */
  --icon-on: #4e5052;
  --icon-off: #b6b9bd;
  /* 반전면 */
  --bar-dark: #121314;
  --on-dark: #ffffff;
  --on-dark-support: #e1e7eb;
  --on-dark-muted: #91969d;
  --on-dark-line: rgba(255, 255, 255, 0.22);
  /* 브랜드 마크 */
  --brand-deep: #1f4ef5;
  --brand-light: #4880ee;
  /* 팔레트(장식) */
  --p-violet: #8953f4;
  --p-teal: #078d77;
  --p-amber: #b0861d;

  /* 반경 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 20px;

  /* 그림자 */
  --shadow-hard: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-hard-lg: 0 8px 8px rgba(0, 0, 0, 0.1);
  --shadow-float: 0 8px 24px rgba(18, 19, 20, 0.08);

  /* 모션 */
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-spring: cubic-bezier(0.22, 1, 0.36, 1);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  /* web 전역 자간 — 절대값 -0.3px */
  letter-spacing: -0.3px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

.num {
  font-variant-numeric: tabular-nums;
}