/* OrderPro Modern Clear — tokens.css, copied verbatim from the design system artifact (version 1794021226-118f). Do not edit here: change the design system and copy again. */
/* 오더프로 디자인 시스템 — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #F2F4F6;
  --backdrop: #E5E8EB;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --fill: #F2F4F6;
  --fill-2: #E5E8EB;
  --line: #E5E8EB;
  --line-2: #F2F4F6;
  --t1: #191F28;
  --t2: #333D4B;
  --t3: #4E5968;
  --t4: #6B7684;
  --t5: #8B95A1;
  --t6: #B0B8C1;
  --blue: #3182F6;
  --blue-text: #1B64DA;
  --blue-weak: #E8F3FF;
  --blue-weak-2: #C9E2FF;
  --blue-200: #90C2FF;
  --blue-300: #64A8FF;
  --btn: #2171EA;
  --btn-hover: #1B64DA;
  --pon: #FFFFFF;
  --pc1: #3182F6;
  --pc2: #90C2FF;
  --pc3: #C9E2FF;
  --up: #D22030;
  --down: #1B64DA;
  --red: #F04452;
  --red-text: #D22030;
  --red-weak: #FFEEEE;
  --orange: #FE9800;
  --orange-text: #B25000;
  --orange-weak: #FFF3E0;
  --yellow: #FFC342;
  --green: #03B26C;
  --green-text: #037A4A;
  --green-weak: #E6F8EF;
  --tip: #191F28;
  --chart-cat-1: #3182F6;
  --chart-cat-2: #EB6834;
  --chart-cat-3: #1BAF7A;
  --shadow-pop: 0 12px 32px rgba(0,27,55,.14), 0 2px 6px rgba(0,27,55,.06);
  --shadow-seg: 0 1px 2px rgba(0,27,55,.08), 0 2px 8px rgba(0,27,55,.06);
}
[data-theme="dark"] {
  --bg: #101013;
  --backdrop: #0A0A0D;
  --surface: #1C1C22;
  --surface-2: #26262E;
  --fill: #2C2C35;
  --fill-2: #3C3C47;
  --line: #2C2C35;
  --line-2: #26262E;
  --t1: #FFFFFF;
  --t2: #E4E4E5;
  --t3: #C3C3C6;
  --t4: #9E9EA4;
  --t5: #7E7E87;
  --t6: #62626D;
  --blue-text: #64A8FF;
  --blue-weak: rgba(49,130,246,.18);
  --blue-weak-2: rgba(49,130,246,.3);
  --blue-200: #2F5E9E;
  --blue-300: #4593FC;
  --up: #FB8890;
  --down: #64A8FF;
  --red-text: #FB8890;
  --red-weak: rgba(240,68,82,.16);
  --orange-text: #FFBD51;
  --orange-weak: rgba(254,152,0,.16);
  --green-text: #4BD08F;
  --green-weak: rgba(3,178,108,.16);
  --tip: #3C3C47;
  --chart-cat-1: #3987E5;
  --chart-cat-2: #D95926;
  --chart-cat-3: #199E70;
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}
[data-theme="mint"] {
  --blue: #02A39E;
  --blue-text: #007C7A;
  --blue-weak: #EBFBF9;
  --blue-weak-2: #D4F6F3;
  --blue-200: #80DED7;
  --blue-300: #3CC5BE;
  --btn: #1FC1BA;
  --btn-hover: #08B6AF;
  --pon: #003E3E;
  --pc1: #02A39E;
  --pc2: #80DED7;
  --pc3: #BFF0EC;
}
[data-theme="mint-dark"] {
  --bg: #101013;
  --backdrop: #0A0A0D;
  --surface: #1C1C22;
  --surface-2: #26262E;
  --fill: #2C2C35;
  --fill-2: #3C3C47;
  --line: #2C2C35;
  --line-2: #26262E;
  --t1: #FFFFFF;
  --t2: #E4E4E5;
  --t3: #C3C3C6;
  --t4: #9E9EA4;
  --t5: #7E7E87;
  --t6: #62626D;
  --blue: #00A8A2;
  --blue-text: #59D4CD;
  --blue-weak: #1E2F32;
  --blue-weak-2: #223E41;
  --blue-200: #0E5C58;
  --blue-300: #1DA09A;
  --btn: #1FC1BA;
  --btn-hover: #48CFC8;
  --pon: #002D2E;
  --pc1: #02A39E;
  --pc2: #80DED7;
  --pc3: #BFF0EC;
  --up: #FB8890;
  --down: #64A8FF;
  --red-text: #FB8890;
  --red-weak: rgba(240,68,82,.16);
  --orange-text: #FFBD51;
  --orange-weak: rgba(254,152,0,.16);
  --green-text: #4BD08F;
  --green-weak: rgba(3,178,108,.16);
  --tip: #3C3C47;
  --chart-cat-1: #3987E5;
  --chart-cat-2: #D95926;
  --chart-cat-3: #199E70;
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}
[data-theme="red"] {
  --blue: #ED3542;
  --blue-text: #D11928;
  --blue-weak: #FFF2F3;
  --blue-weak-2: #FFE5E5;
  --blue-200: #FFAAA4;
  --blue-300: #FD736F;
  --btn: #E02535;
  --btn-hover: #CE1828;
  --pc1: #ED3542;
  --pc2: #FFAAA4;
  --pc3: #FFD6D2;
}
[data-theme="red-dark"] {
  --bg: #101013;
  --backdrop: #0A0A0D;
  --surface: #1C1C22;
  --surface-2: #26262E;
  --fill: #2C2C35;
  --fill-2: #3C3C47;
  --line: #2C2C35;
  --line-2: #26262E;
  --t1: #FFFFFF;
  --t2: #E4E4E5;
  --t3: #C3C3C6;
  --t4: #9E9EA4;
  --t5: #7E7E87;
  --t6: #62626D;
  --blue: #ED494F;
  --blue-text: #FF8386;
  --blue-weak: #2C1F22;
  --blue-weak-2: #3C2225;
  --blue-200: #822B2B;
  --blue-300: #E64246;
  --btn: #DF2836;
  --btn-hover: #ED444C;
  --pc1: #ED3542;
  --pc2: #FFAAA4;
  --pc3: #FFD6D2;
  --up: #FB8890;
  --down: #64A8FF;
  --red-text: #FB8890;
  --red-weak: rgba(240,68,82,.16);
  --orange-text: #FFBD51;
  --orange-weak: rgba(254,152,0,.16);
  --green-text: #4BD08F;
  --green-weak: rgba(3,178,108,.16);
  --tip: #3C3C47;
  --chart-cat-1: #3987E5;
  --chart-cat-2: #D95926;
  --chart-cat-3: #199E70;
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --radius-chip: 7px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-seg: 14px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pop: 20px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --bp-wide: 1240px;
  --bp-desktop: 980px;
  --bp-tablet: 860px;
  --bp-mobile: 720px;
  --sidebar-width: 272px;
  --topbar-height: 72px;
  --content-max: 1240px;
  --shell-max: 1512px;
  --form-measure: 1136px;
  --input-max: 560px;
  --hit-min: 44px;
  --font-sans: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.display-num { font-family: var(--font-sans); font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.04em; }
.h1 { font-family: var(--font-sans); font-size: 30px; line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; }
.kpi-value { font-family: var(--font-sans); font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; }
.kpi-unit { font-family: var(--font-sans); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
.card-title { font-family: var(--font-sans); font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; }
.lead { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: -0.01em; }
.order-amount { font-family: var(--font-sans); font-size: 17px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 1.45; font-weight: 700; letter-spacing: -0.02em; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.sub { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.field-label { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.table { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.meta { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }