/*
  에코114 디자인 토큰 — 고객 웹의 모든 화면이 쓰는 값은 여기 하나에서만 정한다(앱 lib/core/theme/app_theme.dart 와 같은 값 — test/core/core_test.dart 가 대조).
  v2 (2026-10-19 리디자인): 기준은 사장님이 "너무 마음에 들어" 하신 시안 v2 `_design/04_리디자인_시안/index.html`(커밋 85056fc · fb8bc88).
    색 값의 기준(SSOT)은 docs/02_디자인/03_에코114_색토큰.md §1 표다 — 바뀐 색 11 · 새 토큰 3(forest 숲색 판 · warning-weak 경고 옅은 바탕 · warning-line 경고 테두리).
    글자 크기·줄간격·모서리·그림자·주 단추 높이도 시안 v2 에 맞췄다(제목은 굵고 촘촘하게, 본문 17px, 모서리 12·16·20·28px, 옅은 그림자).
    옛 기준안(_design/03_상세화면/ 25장 · 2026-09-23 2차)과 그 시안에서 CSS 를 뽑던 생성기(tools/dev/build_*_css.py)는 v2 부터 쓰지 않는다.
  --font-family 값은 그대로 둔다. 실제 웹은 index.html 에서 Pretendard 를 불러온다 (개발문서 §8-4).
*/
:root {
  --color-bg: #FFFFFF;
  --color-surface: #F5F6F0;
  --color-border: #DCE1D4;
  --color-border-strong: #6B7366;
  --color-text-strong: #121A10;
  --color-text: #3A4236;
  --color-text-weak: #5F675A;
  --color-primary: #2E6B12;
  --color-primary-strong: #255A0E;
  --color-primary-weak: #F0F8D8;
  --color-on-primary: #FFFFFF;
  --color-accent: #C4E640;
  --color-danger: #8A5A00;
  --color-success: #287040;
  --color-warning: #8A5A00;
  --color-warning-weak: #FFF1D6;
  --color-warning-line: #F0D29C;
  --color-forest: #17291A;
  --color-clear: transparent;
  --color-panel: var(--color-text-strong);
  --color-on-panel: var(--color-bg);
  --color-backdrop: rgb(18 26 16 / 0.56);
  --font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-size-display: 36px;
  --font-size-title: 27px;
  --font-size-section: 22px;
  --font-size-body: 17px;
  --font-size-small: 14px;
  --font-size-button: 18px;
  --font-weight-heavy: 800;
  --font-weight-strong: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --line-height-display: 1.24;
  --line-height-title: 1.32;
  --line-height-section: 1.36;
  --line-height-body: 1.65;
  --line-height-small: 1.55;
  --line-height-button: 1.4;
  --letter-spacing: -0.03em;
  --letter-spacing-body: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-1: 12px;
  --radius-2: 16px;
  --radius-3: var(--radius-2);
  --radius-4: 20px;
  --radius-5: 28px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --shadow-1: 0 1px 2px rgb(18 26 16 / 0.06), 0 1px 1px rgb(18 26 16 / 0.03);
  --shadow-2: 0 18px 40px -22px rgb(18 26 16 / 0.35);
  --button-height: 60px;
  --button-secondary-height: 56px;
  --input-height: 56px;
  --touch-min: 48px;
  --icon-size: 24px;
  --icon-size-small: 16px;
  --icon-size-service: 32px;
  --icon-stroke: 2.5px;
  --control-size: 24px;
  --swatch-size: 32px;
  --skeleton-line-height: 16px;
  --skeleton-block-height: 64px;
  --page-max: 480px;
  --page-gutter: var(--space-5);
  --photo-height: 160px;
  --header-height: 64px;
  --dock-min-height: calc(var(--button-secondary-height) + var(--space-3) + var(--space-3));
  --dialog-max: 432px;
  --composition-preview-height: 320px;
  --zero: 0;
  --one: 1;
  --two: 2;
  --three: 3;
  --grid-flex: 1fr;
  --full: 100%;
  --half: 50%;
  --short: 64%;
  --viewport-block: 100dvh;
  --translate-center: -50%;
  --z-floating: 10;
  --service-symbol-size: 48px;
  --service-tile-min: 208px;
  --service-tile-basis: 7em;
  --service-index-width: 32px;
  --border-width-accent: 4px;
  --process-rail-start: 15px;
  --process-index-basis: 2em;
  --grid-end: -1;
  /* 디자인 v2(2026-10-19) 웹 부품 값 — 시안 v2 에서 잰 값. 색이 아니라 앱 대조(core_test) 밖이다 */
  --font-size-label: 15px;
  --icon-size-chip: 20px;
  --icon-box-size: 46px;
  --chip-height: 30px;
  --dot-size: 8px;
  --dot-ring: 4px;
  --process-dot-size: 34px;
  --card-min-height: 176px;
  --feature-card-height: 224px;
  --photo-ratio-hero: 10 / 11;
  --photo-ratio-wide: 16 / 10;
  --photo-ratio-card: 4 / 3;
  --hero-fluid: 9vw;
  --mark-depth: -0.34em;
  --glass-mix: 90%;
  --glass-blur: blur(14px) saturate(1.4);
  --overlay-mix: 55%;
  --on-dark-weak: 80%;
  --line-on-dark: 14%;
  --line-on-light: 22%;
  --ring-mix: 18%;
  --card-basis: 8em;
}