/* ============================================================================
   v2 디자인 토큰
   ① 아래 첫 :root 블록은 adm/brand_style_guide.html(= .agent/brand_style_guide.md) 의 :root 를 **그대로 복사**한 것. 이름·값을 바꾸지 않는다.
   ② 두 번째 :root 블록은 브랜드 md 본문에 있는 나머지 토큰(Gray/Spacing/Typography/Border/Shadow-xl/Navy/Info)과
      v2 리뉴얼에 필요해 같은 작명 규칙으로 더한 값([ext]). 값 확정 대기는 [제안]·[임시].
   규칙: v2 페이지 CSS는 색·간격·라운드·글자 크기를 이 변수로만 쓴다(디자인 가이드 원칙 1). 생 hex·px 금지.
   브레이크포인트(확정 2026-09-11): 모바일 ~767(디자인 기준 425) / 태블릿 768 / 데스크톱 1024 / 큰 화면 1440(배치 동일, 프레임 폭만 확대)
   ============================================================================ */

/* ── ① adm/brand_style_guide.html :root 원본 그대로 ────────────────────── */
:root {
  --main-color:     #2097FF;
  --main-hover:     #0084F0;
  --main-active:    #006CD4;
  --main-light:     #E8F4FF;
  --main-dark:      #003B7A;

  --color-primary-50:  #E8F4FF;
  --color-primary-100: #C5E3FF;
  --color-primary-200: #93CAFE;
  --color-primary-300: #60B1FF;
  --color-primary-400: #3DA4FF;
  --color-primary-500: #2097FF;
  --color-primary-600: #0084F0;
  --color-primary-700: #006CD4;
  --color-primary-800: #0052A8;
  --color-primary-900: #003B7A;
  --color-primary-950: #002455;

  --color-success-light: #D1FAE5;
  --color-success:       #10B981;
  --color-success-dark:  #065F46;
  --color-warning-light: #FEF3C7;
  --color-warning:       #F59E0B;
  --color-warning-dark:  #92400E;
  --color-error-light:   #FEE2E2;
  --color-error:         #E9595C;
  --color-error-dark:    #991B1B;

  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  --bg-body: #F8FAFC;
  --bg-card: #FFFFFF;
  --border-color: #E2E8F0;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(32,151,255,0.12);
  --shadow-lg: 0 8px 24px rgba(32,151,255,0.18);
}

/* ── ② 브랜드 md 본문의 나머지 토큰 + v2 확장 ──────────────────────────── */
:root {
	/* brand md: Navy / Info / Shadow-xl / Border / Radius-2xl */
	--color-navy-50: #EEF2FF; --color-navy-100: #D4DCFF; --color-navy-500: #1A3A6B; --color-navy-700: #0D2247; --color-navy-900: #070F22;
	--color-info-light: #E8F4FF; --color-info: #2097FF; --color-info-dark: #003B7A;
	--shadow-xl: 0 16px 40px rgba(32,151,255,0.22);
	--border-light: #E2E8F0; --border-medium: #CBD5E1; --border-focus: #2097FF;
	--radius-2xl: 16px;
	/* brand md: Spacing */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
	/* brand md: Typography (xs 11·sm 12는 원칙 7 "13px 미만 금지"로 v2에서 쓰지 않는다) */
	--font-base: 'Pretendard', 'Malgun Gothic', sans-serif;
	--text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px;
	--font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;

	/* [ext] 색 */
	/* PRO 업그레이드: pages/myorder.php의 기존 보라 팔레트 (사용자 지정) */
	--color-pro-50: #F5F3FF; --color-pro-100: #EDE9FE; --color-pro-200: #DDD6FE; --color-pro-500: #7C5FE8; --color-pro-700: #6D28D9; --color-pro-900: #4C1D95;
	--color-white: #FFFFFF;
	--color-error-hover: #DC2626;              /* brand md 버튼 표의 Danger hover */
	--overlay: rgba(15, 23, 42, .5);           /* 모달·시트 뒤 막 (gray-900 기반, 제안) */
	/* [ext] 페이지·섹션 (모바일 기본, 임시) */
	--page-x: 16px; --page-top: 16px; --section-gap: 24px; --section-y: 12px;
	--box-py: 20px; --box-px: 16px;            /* 상자(카드·배너·안내) 안쪽 여백 — 같은 열의 상자는 전부 이 값 (원칙 9) */
	--grid-gap: 12px; --grid-cols: 2;
	--frame-max: 100%;                         /* 화면 프레임(본문·헤더·앱바 공통) 최대 폭. 모바일은 꽉 채움 */
	--content-max: var(--frame-max); --wide-max: var(--frame-max);
	--shelf-card-w: 236px;                     /* 홈 선반(16:9) 카드 폭 — 태블릿 256 / 데스크톱 272(시안 원값) */
	/* [ext] 컴포넌트별 라운드 (제안) */
	--radius-btn: var(--radius-lg); --radius-btn-sm: var(--radius-md); --radius-input: var(--radius-lg); --radius-card: var(--radius-xl); --radius-thumb: var(--radius-lg);
	--radius-chip: var(--radius-full); --radius-badge: var(--radius-full); --radius-modal: var(--radius-2xl); --radius-sheet: var(--radius-2xl); --radius-toast: var(--radius-xl);
	/* [ext] 글자 — 디자인 가이드 §8-1 표 */
	--font-num: var(--font-base);
	--text-display: 32px;
	--leading-display: 1.25; --leading-h1: 1.3; --leading-h2: 1.35; --leading-h3: 1.4; --leading-h4: 1.45; --leading-body: 1.6; --leading-small: 1.5; --leading-caption: 1.4; --leading-tight: 1.3;
	--tracking-display: -.03em; --tracking-h1: -.02em; --tracking-h2: -.02em; --tracking-h3: -.015em; --tracking-h4: -.01em; --tracking-body-lg: -.005em; --tracking-body: 0;
	/* [ext] 치수 (임시 — §7 미정, 현재 앱 실측 출발점) */
	--btn-h-lg: 52px; --btn-h-md: 44px; --btn-h-sm: 36px;
	--btn-px-lg: 20px; --btn-px-md: 16px; --btn-px-sm: 12px;
	--input-h: 48px; --input-px: 14px;
	--chip-h: 34px; --chip-py: 6px; --chip-px: 22px;
	--tab-h: 44px; --touch-min: 44px;
	--icon-sm: 16px; --icon-md: 20px; --icon-lg: 26px;
	--header-h: 52px;
	--appbar-h: 56px;
	--appbar-total: calc(var(--ab-h, var(--appbar-h)) + env(safe-area-inset-bottom, 0px));
	--page-bottom: var(--appbar-total);
	--shadow-appbar: none;
	/* [ext] z-index · 모션 (임시) */
	--z-dropdown: 900; --z-sticky: 950; --z-header: 1000; --z-appbar: 1002; --z-sheet: 1100; --z-modal: 1200; --z-toast: 1300;
	--dur-fast: .15s; --dur-base: .25s; --ease: cubic-bezier(.2, .8, .2, 1);
}

/* 태블릿 ≥768 — 기기별 항목만 덮어쓴다 */
@media (min-width: 768px) {
	:root { --frame-max: 720px; --shelf-card-w: 256px; --page-x: 24px; --page-top: 20px; --section-gap: 32px; --grid-gap: 16px; --grid-cols: 3; }
}
/* 데스크톱 ≥1024 */
@media (min-width: 1024px) {
	:root { --frame-max: 960px; --shelf-card-w: 272px; --page-x: 32px; --page-top: 24px; --section-gap: 40px; --grid-gap: 20px; --grid-cols: 4; --header-h: 60px; --text-display: 36px; --text-3xl: 32px; --text-2xl: 24px; --text-xl: 20px; }
}
/* 큰 화면 ≥1440 — 새 배치 없음, 프레임 폭만 넓힌다 */
@media (min-width: 1440px) {
	:root { --frame-max: 1200px; }
}