/* ============================================================================
   소마 센터 관리(웹 CRM) — 디자인 토큰 v1 (A단계 시안)
   작성 2026-10-22 · BRIEF_v1 5-2 + BRIEF_v0 7-2·7-3 을 코드로 옮김.

   정본 출처 (값은 아래 두 곳에서만 가져왔다. 새 색 0개)
   - 앱 core_ui : soma_1073_int/lib/core/ui/styles/app_colors.dart · app_gradients.dart ·
                  app_surfaces.dart · app_texts.dart, widgets/pass_progress_sections.dart ·
                  badges.dart · custom_switch.dart, motion/app_motion.dart,
                  core/navigation/main_navigation_screen.dart(하단 탭)
   - soma.ai.kr : soma_web main 3d64f3b — assets/site/css/site.css :root, pay/index.html <style>,
                  ambassador/admin/admin.css
   표기: [앱] = 앱 core_ui 값, [사이트] = soma.ai.kr 값, [판정] = 둘을 합칠 때 director 결정.

   서체 (운영 — 외부 요청 0, CSP font-src 'self')
   - Pretendard: /fonts/pretendard/pretendard.css(npm pretendard@1.3.9 가변 동적 서브셋)를 index.html 에서 싣는다.
   - 숫자: 사이트 archivo-num.woff2(SomaNum)를 직접 호스팅한다(BRIEF_v1 5-1 #4). 사이트와 같은 이름·같은 글자 범위
     (숫자 . / : – ·)·size-adjust — 쉼표·'원'·'명'은 Pretendard. 시안에서 바꾼 줄은 이 머리말과 @font-face src 뿐이다.
   ========================================================================== */

@font-face {
  font-family: "SomaNum";
  src: url(/fonts/soma-num/archivo-num.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  size-adjust: 103%;                                   /* [사이트] site.css @font-face SomaNum */
  unicode-range: U+0030-0039, U+002E, U+002F, U+003A, U+2013, U+00B7;
}

:root {
  color-scheme: only light;                            /* [사이트] 웹 전부 밝은 화면만. 다크 모드 없음 */

  /* ── 1. 면 ─────────────────────────────────────────────────────────────── */
  --paper:      #F7FAFC;   /* [사이트] 업무 화면 바탕(종이) · theme-color */
  --surface:    #FFFFFF;   /* [앱 white · 사이트 /pay panel] 흰 패널·시트·표 */
  --sky-1:      #E3F6FE;   /* [앱 skyBlue1] 선택된 레일 행 · 기본 아바타 원 · 락커 사용 칸 */
  --sky-6:      #E7F8FF;   /* [앱 skyBlue6] 얼굴 바탕 가운데 */
  --sky-7:      #BAEBFF;   /* [앱 skyBlue7] 얼굴 바탕 중심(α.5) */
  --face-bg:    radial-gradient(140% 140% at 50% 62%, rgba(186,235,255,.5) 0%, #E7F8FF 45%, #FFFFFF 100%);
                           /* [앱 AppGradients.welcomeFor] 로그인·입구 태블릿·상담 모드 표지에만 */
  --scrim:      rgba(17, 20, 24, .5);  /* [사이트 .sheet] 시트·모달 뒤 덮개 */

  /* ── 2. 글자 ───────────────────────────────────────────────────────────── */
  --ink:          #111418; /* [사이트] 모든 글자 · 주 버튼 바탕 · 신호등 칩 바탕 */
  --muted:        #5B6570; /* [사이트] 보조 글자 하나뿐(흰 바탕 5.9:1). 화면 폭이 바뀌어도 같은 값 */
  --muted-on-ink: #98A2AD; /* [사이트] 잉크 바탕 위 보조 글자(토스트) */
  --faint:        #979797; /* [앱 gray400] 쉐브런·선 아이콘·비활성·placeholder 전용. 글자 금지(2.92) */
  --on-ink:       #F7FAFC; /* [사이트] 잉크 위 글자 = 종이 */
  --on-brand:     #FFFFFF; /* [앱 white] 브랜드 그라데이션 위 글자(4.30~5.98:1) */
  --ink-hover:    #262B31; /* [사이트 /pay #payBtn:hover] 주 버튼 마우스 올림 */
  --wm-ai:        #BEBFBF; /* [사이트·앱 soma_text_logo.svg] 워드마크 'AI' 글자 전용 */

  /* ── 3. 선 ─────────────────────────────────────────────────────────────── */
  --line:        #E8EBED;  /* [앱 gray100] 패널 테두리 · 목록 행 구분 */
  --line-input:  #D9DDE0;  /* [앱 gray200] 입력칸 · 보조 버튼 · 시설 태그 테두리 */
  --line-strong: #111418;  /* [사이트 .spec] 표 머리 아래 1px 잉크 선 */

  /* ── 4. 브랜드 ─────────────────────────────────────────────────────────── */
  --drop:       #5FCDF9;   /* [앱 primary = 사이트 --sky] 물방울. 글자·흰 글자 바탕 금지(1.81) */
  --drop-deep:  #25B8F4;   /* [앱 primaryDeep = 사이트 --sky-deep] 캘린더 '지금' 선 · 진행선 · 포커스 고리 */
  --action:     #2E8CD5;   /* [앱 secondary = 사이트 --cta-blue] 누르는 글자 · 선 아이콘 · 막대 */
  --navy:       #0065B3;   /* [앱 tertiary] 선택된 내비 · 달성률 · 기본 아바타 글자 · 수강 기간 연장 */
  --nav-idle:   #B4CFE4;   /* [앱 skyBlue5 — assets/gnb/*.svg 비선택 아이콘] 내비 비선택 아이콘 전용 */
  --brand-grad: linear-gradient(150deg, #1E7EC9 0%, #0065B3 100%);
                           /* [앱 AppGradients.brand] lerp(secondary, tertiary, .35) → tertiary.
                              선택된 탭·알약 · '오늘 챙길 회원' 전광판 두 자리에만 */

  /* ── 5. 신호등·상태 (앱 회원관리 현황 타일 tile* 토큰) ─────────────────── */
  --go:       #12924A;  --go-bg:   #E4F5EA;   /* [앱 tileGreen*] '이용중' 점 · 성공 */
  --stop:     #D93A34;  --stop-bg: #FCE9E7;   /* [앱 tileRed*] '이용 불가' 점 · 마감 임박 숫자 · 미납 · 파괴적 액션 */
  --warn:     #CE7A12;  --warn-bg: #FBF0DB;   /* [앱 tileOrange*] 필수 미충족 점만. 신호등에 쓰지 않음(노랑 불 없음) */
  --mute:     #777777;  --mute-bg: #F8F7F7;   /* [앱 tileGray* · gray50] 모르는 상태 · 접힘 줄 바탕 · 막대 트랙 */
  --tag-fill: #E8EBED;  /* [앱 gray100] '이용 서비스' 태그 채움 — mute-bg 는 흰 행 위에서 1.05:1 로 안 보여서 [판정] */
  --switch-on:  #5FCDF9; /* [앱 CustomSwitch _activeColor = primary] 켜짐 트랙(글자 아님) */
  --switch-off: #C8C9C9; /* [앱 CustomSwitch _inactiveColor = gray300] 꺼짐 트랙 */

  /* ── 6. 진행 막대 (앱 PassProgressSections 문법) ───────────────────────── */
  --bar-h:       12px;     /* [판정] 카드 안 12(앱 16, 피그마 ≈14). 목록에는 막대 없음 */
  --bar-h-lg:    16px;     /* [앱] 입구 태블릿 결과 카드처럼 크게 보일 때 */
  --bar-track:   #F8F7F7;  /* [앱 gray50] + 1px --line-input 테두리 */
  --bar-period:  linear-gradient(90deg, #2E8CD5 0%, #0065B3 100%);
                           /* [판정·피그마 V3] 회원권·락커권 기간. secondary → tertiary, 새 색 0 */
  --bar-count:   linear-gradient(270deg, #4AB2EA 0%, #5FCDF9 59.62%, #8ADAFA 81.25%, #5FCDF9 100%);
                           /* [앱 passProgressDark/primary/Light] 수강권 회차·수강 기간. 채움 머리 = 진한 쪽 */
  --bar-extend:  #0065B3;  /* [앱 tertiary] 수강 기간이 '최적 주'를 넘긴 구간 */
  --bar-expired: #D9DDE0;  /* [앱 gray200] 만료 막대(꽉 찬 회색) */
  --avatar-bg:   #E3F6FE;  /* [앱 lightBlueGray] 기본 아바타 원 */
  --avatar-line: #BED5DE;  /* [앱 blueGray — ProfileAvatar 테두리] */
  --avatar-ink:  #0065B3;  /* [앱 tertiary] 성 한 글자(대비 5.4) */
  --capsule:     #FFFFFF;  /* V2 '입장' 캡슐 바탕 */

  /* ── 7. 리포트 4색 — 리포트 화면·리포트 점·장 띠·색인 탭에만 ───────────
     이름은 앱 report_kind_theme 과 같다: (장 색 = fill) · -deep · -accent(막대·로더) · -soft(면 시작) · -end(면 끝) · -border(강사 밴드 점선·연한 띠)
     수업 장 색 = fill #045FA3(앱 lessonReportAccentDeep). #2597EF 는 막대 accent 전용(앱 DESIGN_DIRECTION 5절) */
  --rpt-status: #EA7703;  --rpt-status-deep: #B85D02;  --rpt-status-accent: #EA7703;  --rpt-status-soft: #FFF3E2;  --rpt-status-end: #FEFAF4;  --rpt-status-border: #FFE1C3;  /* 01 몸 상태 */
  --rpt-lesson: #045FA3;  --rpt-lesson-deep: #045FA3;  --rpt-lesson-accent: #2597EF;  --rpt-lesson-soft: #DFF5FF;  --rpt-lesson-end: #F0F7FA;  --rpt-lesson-border: #7CC3F6;  /* 02 수업 */
  --rpt-diet:   #14A97B;  --rpt-diet-deep:   #0A6B4F;  --rpt-diet-accent:   #14A97B;  --rpt-diet-soft:   #E1F6EE;  --rpt-diet-end:   #F2F9F6;  --rpt-diet-border:   #6DD19C;  /* 03 식단 */
  --rpt-change: #5FCDF9;  --rpt-change-deep: #0D84B8;  --rpt-change-accent: #5FCDF9;  --rpt-change-soft: #E7F8FF;  --rpt-change-end: #F4FBFE;  --rpt-change-border: #BAEBFF;  /* 04 몸 변화 */
  --rpt-on-lesson: #FFFFFF;  /* 수업 장 색(#045FA3) 위 글자 — 흰색 6.62:1. 나머지 3색 위 글자는 잉크 */
  --rpt-trainer-status: #F7F0E8; --rpt-trainer-lesson: #EEF3F7; --rpt-trainer-diet: #E8EEEA; --rpt-trainer-change: #EEF5F8; /* [앱] 강사 전용 밴드(surface) */

  /* ── 8. 수업 유형 — 캘린더 블록·유형 배지에만 (앱 badges.dart · getCalendarCardColors) ── */
  --lt-single: #2E8CD5;  --lt-single-bg: #D0EAFF;  --lt-single-line: #2E8CD5;  --lt-single-fill: #C0E7F6;
  --lt-duet:   #8857CD;  --lt-duet-bg:   #E9D9FF;  --lt-duet-line:   #8856CC;  --lt-duet-fill:   #E9D9FF;
  --lt-group:  #37C437;  --lt-group-bg:  #C5EFB6;  --lt-group-line:  #09A208;  --lt-group-fill:  #C5EEB6;
  --lt-consult:#EA7703;  --lt-consult-bg:#FFE1C3;  --lt-consult-line:#EA7703;  --lt-consult-fill:#FFE0C2;
  --lt-trial:  #D939C9;  --lt-trial-bg:  #FED6F2;  --lt-trial-line:  #EA7703;  --lt-trial-fill:  #FFE0C2; /* 캘린더는 상담·체험 주황 우선 */
  --lt-membership:#6DD19C; --lt-membership-bg:#C9F3E7; --lt-membership-line:#00B894; --lt-membership-fill:#C9F3E7;

  /* ── 9. 강사 12색 — 캘린더 줄 머리 점·담당 강사 점에만 (앱 trainerColorPalette 순서) ── */
  --tr-1:#CE6877; --tr-2:#FE9E7D; --tr-3:#527607; --tr-4:#43D066; --tr-5:#11A47D; --tr-6:#18C8D6;
  --tr-7:#0D84B8; --tr-8:#6D9BFD; --tr-9:#724DE7; --tr-10:#BB65FB; --tr-11:#F193EE; --tr-12:#C41788;

  /* ── 10. 진하기 지도(주·빈 시간) — 앱 하늘 계열 순서 ─────────────────── */
  --heat-0:#F8F7F7; --heat-1:#E3F6FE; --heat-2:#BAEBFF; --heat-3:#5FCDF9; --heat-4:#0065B3;

  /* ── 11. 서체 ─────────────────────────────────────────────────────────── */
  --font:     "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-num: "SomaNum", "Archivo", var(--font);       /* 홀로 선 숫자만: 지금 n명·KPI·키패드·막대 머리 */
  --num-wdth: 125;                                     /* [사이트 .n1·.folio] 큰 숫자는 넓은 폭 */

  /* 글자 크기/줄 높이 — 앱 AppTexts 스케일(36/46·28/36·24/32·20/28·18/24·16/20·14/18·12/16·11/14·10/12) 위에
     웹 본문 14/20(para14)·15/24 를 더했다. 역할은 DESIGN_SYSTEM.md 3절 표에서 하나씩만 고른다. */
  --fs-10: 10px;  --lh-10: 12px;
  --fs-11: 11px;  --lh-11: 14px;
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 20px;
  --fs-18: 18px;  --lh-18: 24px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-28: 28px;  --lh-28: 36px;
  --fs-30: 30px;  --lh-30: 40px;
  --fs-36: 36px;  --lh-36: 46px;
  --fs-40: 40px;  --lh-40: 48px;
  --fs-64: 64px;  --lh-64: 72px;

  /* ── 12. 간격 (4 배수) ───────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* 틀 크기 (BRIEF_v1 5-3·5-4) */
  --head:      56px;   /* 머리 줄(PC·태블릿) [사이트 runhead] */
  --head-m:    48px;   /* 머리 줄(폰) */
  --rail:      232px;  /* PC 레일 */
  --rail-icon: 72px;   /* 태블릿 아이콘 레일 */
  --tabbar:    56px;   /* 폰 하단 탭(+ safe-area) */
  --gut:       32px;   /* 본문 바깥 여백 — 폰 20, ≥1600 48 (아래 미디어 쿼리) */
  --gap:       24px;   /* 단 사이 — 태블릿 20, 폰 12 */
  --content-max: 1440px;

  /* 높이 */
  --cta:     48px;   /* 주 버튼 [사이트 .pill · 관리자 .primary · 앱 CtaButton] */
  --cta-lg:  64px;   /* 입구 태블릿 '입장하기' */
  --btn:     40px;   /* 보조 버튼 · 머리 줄 [판매] */
  --btn-sm:  32px;   /* 행 안 작은 버튼 [앱 SubscribeButton 32] */
  --pill-tab: 36px;  /* 알약 탭 V8 */
  --input:   44px;   /* 입력칸 [앱 MemberListSearchField 44 · 사이트 터치 44] */
  --chip:    22px;   /* 신호등 칩·태그 V1·V5 [사이트 .ex-tag 22] */
  --badge:   20px;   /* 상태 배지 [앱 PillBadge 20] */
  --badge-type: 16px;/* 수업 유형 배지 [앱 LessonBadge 16] */
  --row:     56px;   /* PC 표 행 */
  --row-m:   60px;   /* 폰 목록 행 최소 [앱 레이아웃 상수] */
  --hit:     44px;   /* 누르는 칸 최소 */
  --key-w:   96px;  --key-h: 72px;   /* 입구 키패드 */

  /* ── 13. 모서리 ───────────────────────────────────────────────────────── */
  --r-badge: 8px;    /* [앱 LessonBadge] 유형 배지 */
  --r-input: 10px;   /* [앱 입력칸·CtaButton·세그먼트 트랙] 입력칸 · 접힘 줄 · 안쪽 칸 */
  --r-card:  14px;   /* [앱 카드·다이얼로그·시트·전광판] 패널 · 시트 위 모서리 · 키 */
  --r-face:  20px;   /* [사이트 /pay 넓은 화면 카드 · 앱 온보딩 L] 얼굴 화면 카드 */
  --r-pill:  999px;  /* 알약: 버튼 · 칩 · 탭 · 검색 결과 버튼 */

  /* ── 14. 그림자 — 떠 있는 것만. 패널은 그림자 0 ─────────────────────── */
  --e1:      0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);   /* [앱 AppSurfaces.e1] 팝오버·시트 */
  --e-lift:  0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.12);   /* [앱 e1(lift:1)] 토스트·떠 있는 버튼 */
  --e-face:  0 1px 2px rgba(17,20,24,.06), 0 16px 40px rgba(17,20,24,.08); /* [사이트 /pay ≥560 .page] 얼굴 카드 */
  --e-tab:   0 -4px 4px rgba(46,140,213,.08);                         /* [앱 bottomBarShadow] 폰 하단 탭 */
  --e-board: 0 4px 12px rgba(46,140,213,.14);                         /* [앱 TodayManagedMembersBanner] 전광판 */

  /* ── 15. 모션 — CSS transition 만. Lenis·GSAP 없음 ─────────────────── */
  --t-micro: 160ms;  --ease-micro: cubic-bezier(.25,.46,.45,.94);  /* [앱 pressDuration · 사이트 --e-micro] */
  --t-set:   320ms;  --ease-set:   cubic-bezier(.16,1,.3,1);        /* [사이트 --e-set · 앱 전광판 넘김 320] */
  --t-loader: 1600ms;                                              /* [앱 dropletLoaderCycle] */
  --t-drop:  550ms;  --ease-drop:  cubic-bezier(.45,0,.7,.35);     /* [사이트 --e-drop] 입장 성공 1곳만 */
  --press:   .985;   --press-pill: .97;                            /* [앱 pressScale · buttonPressScale] */

  /* ── 16. 포커스 ─────────────────────────────────────────────────────── */
  --focus: 2px solid var(--ink);   /* [사이트] 2px 잉크 + offset 2 */
  --focus-input: 0 0 0 3px rgba(37,184,244,.28);   /* 입력칸 포커스 고리 = drop-deep α.28 */
}

/* 반응형 틀 값 (BRIEF_v1 5-4) */
@media (min-width: 1600px) { :root { --gut: 48px; } }
@media (max-width: 1279px) { :root { --gap: 20px; } }
@media (max-width: 767px)  { :root { --gut: 20px; --gap: 12px; } }