/* ============================================================
   울산늘봄누리센터 물품대여시스템 · 디자인 토큰
   CI 기반 컬러 시스템 (Green 기본 / Blue 대체 테마)
   ============================================================ */
:root {
  /* --- CI 원본 컬러 --- */
  --ci-green: #90B44B;
  --ci-blue: #46729C;
  --ci-orange: #F39824;
  --ci-charcoal: #404040;

  /* --- Primary (Green 테마 · 기본) --- */
  --primary: #0E9F6E;
  --primary-dark: #057A55;
  --primary-darker: #046244;
  --primary-tint: #E6F6F0;
  --primary-tint-2: #C8EBDD;

  /* --- Secondary (CI 연두) --- */
  --secondary: #90B44B;
  --secondary-dark: #71903A;
  --secondary-tint: #F0F5E4;

  /* --- Accent (CI 오렌지) --- */
  --accent: #F39824;
  --accent-dark: #D97D0A;
  --accent-tint: #FEF3E2;

  /* --- Surface / Background --- */
  --surface: #FFFFFF;
  --surface-2: #FCFCFD;
  --bg-subtle: #F9FAFB;
  --bg-muted: #F3F4F6;

  /* --- Text --- */
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF;

  /* --- Border --- */
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --border-focus: var(--primary);

  /* --- Status --- */
  --st-available: #0E9F6E;
  --st-low: #F59E0B;
  --st-out: #DC2626;
  --st-pending: #2563EB;
  --st-return: #6D28D9;
  --st-cancel: #6B7280;

  --st-ok-bg: #E6F6F0;      --st-ok-text: #057A55;
  --st-low-bg: #FEF3C7;     --st-low-text: #B45309;
  --st-out-bg: #FEE2E2;     --st-out-text: #B91C1C;
  --st-pending-bg: #DBEAFE; --st-pending-text: #1D4ED8;
  --st-return-bg: #F3E8FF;  --st-return-text: #6D28D9;
  --st-cancel-bg: #F3F4F6;  --st-cancel-text: #4B5563;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.1), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.1), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-xl: 0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);

  /* --- Radius --- */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px;

  /* --- Spacing (4px scale) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* --- Typography ---
     늘봄누리센터 공식 홈페이지(neulbom.uc.ac.kr) 타이포그래피 분석 결과 반영
     · font-family : "pretendard", "Noto Sans KR", 맑은고딕, 돋움 …
     · body        : 18px / line-height 1.6 / letter-spacing -.01em / #333
     · 실사용 스케일 : 13·14·15·16·17·18·20·22·24·26·28·32·34·40px
     · 최소 크기    : 13px (모바일) / 14px (데스크톱)
     · 표(th·td)   : 18px → 모바일 17px
     · 버튼        : 14(소) / 16(중) / 18(대) px
     · 대제목      : 40px → 34px → 28px (반응형 단계)
     ------------------------------------------------------------ */
  --font-sans: 'Pretendard Variable', Pretendard, pretendard, 'Noto Sans KR',
               -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               '맑은고딕', 'Malgun Gothic', '돋움', Dotum, system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* 공식 홈페이지 스케일 매핑
     xs=13(최소) sm=14 base=15 md=16(본문) lg=18(강조·표) xl=20
     2xl=24 3xl=28 4xl=34 5xl=40(대제목) */
  --fs-2xs: 12px;  /* 카운터 배지 등 비문장 요소 전용 */
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px; --fs-4xl: 34px;
  --fs-5xl: 40px;

  /* 공식 홈페이지 본문 조판값 */
  --lh-base: 1.6;
  --lh-tight: 1.3;
  --ls-base: -0.01em;
  --ls-tight: -0.03em;
  --ls-title: -0.05em;

  /* --- Layout --- */
  --header-h: 60px;
  --sidebar-w: 236px;
  --container-max: 1440px;
  --mobile-nav-h: 60px;
  /* 입력·버튼 공통 높이 (행 높이 정렬 기준) */
  --control-h: 44px;
  --icon-sm: 40px;   /* 리스트 아이콘 박스 */
  --icon-md: 52px;   /* 카드 아이콘 박스 */
  --icon-lg: 76px;   /* 강조 아이콘 박스 */
  /* 검색 입력 돋보기 아이콘 (아이콘 크기 · 좌측 좌표 · 확보 여백) */
  --search-ic-size: 16px;
  --search-ic-x: 12px;
  --search-ic-pad: 36px;

  /* --- Motion --- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .12s;
  --dur: .2s;
  --dur-slow: .32s;

  --z-header: 100;
  --z-sidebar: 90;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   Blue 테마 (CI 블루 기반) · <html data-theme="blue">
   ============================================================ */
[data-theme='blue'] {
  --primary: #2E6EA6;
  --primary-dark: #1F5480;
  --primary-darker: #17415F;
  --primary-tint: #EAF2F9;
  --primary-tint-2: #CFE1F0;
  --st-available: #2E6EA6;
  --st-ok-bg: #EAF2F9;
  --st-ok-text: #1F5480;
}

/* ============================================================
   Warm 테마 (CI 연두 강조)
   ============================================================ */
[data-theme='warm'] {
  --primary: #7A9E33;
  --primary-dark: #5F7D24;
  --primary-darker: #4A621B;
  --primary-tint: #F2F7E6;
  --primary-tint-2: #DFEBC4;
  --st-available: #7A9E33;
  --st-ok-bg: #F2F7E6;
  --st-ok-text: #5F7D24;
}

/* --- 고대비 모드 (접근성) --- */
[data-contrast='high'] {
  --text-secondary: #4B5563;
  --text-tertiary: #6B7280;
  --border: #9CA3AF;
  --border-strong: #6B7280;
}

/* --- 강사(이용자) 화면 스케일 · <html data-scale="senior"> ---
   센터 강사 대부분이 50~60대이므로 가독성을 최우선으로 한 단계 큰 스케일 적용.
   본문 19px(공식 홈페이지 선언값 18px보다 한 단계 위) · 최소 15px ·
   터치 타깃 52px · 아이콘 박스 확대 · 행간 1.7
   ------------------------------------------------------------ */
[data-scale='senior'] {
  --fs-2xs: 14px;
  --fs-xs: 15px; --fs-sm: 16px; --fs-base: 17px; --fs-md: 19px;
  --fs-lg: 21px; --fs-xl: 24px; --fs-2xl: 28px; --fs-3xl: 33px; --fs-4xl: 40px;
  --fs-5xl: 46px;
  --lh-base: 1.7;
  --lh-tight: 1.35;
  --control-h: 52px;
  --icon-sm: 52px;
  --icon-md: 66px;
  --icon-lg: 96px;
  --mobile-nav-h: 72px;
  /* 글씨가 커진 만큼 검색 아이콘·여백도 키워 placeholder 겹침 방지 */
  --search-ic-size: 20px;
  --search-ic-x: 14px;
  --search-ic-pad: 44px;
  /* 여백도 함께 키워 요소가 붙어 보이지 않게 함 */
  --sp-3: 14px; --sp-4: 18px; --sp-5: 24px; --sp-6: 28px;
}

/* --- 큰 글씨 모드 (접근성) --- */
[data-fontsize='large'] {
  --fs-2xs: 14px;
  --fs-xs: 15px; --fs-sm: 16px; --fs-base: 17px; --fs-md: 18px;
  --fs-lg: 20px; --fs-xl: 23px; --fs-2xl: 27px; --fs-3xl: 32px; --fs-4xl: 38px;
  --fs-5xl: 44px;
}

/* 강사 화면 + 큰 글씨 모드 동시 적용 시 최대 스케일 */
[data-scale='senior'][data-fontsize='large'] {
  --fs-2xs: 15px;
  --fs-xs: 16px; --fs-sm: 18px; --fs-base: 19px; --fs-md: 21px;
  --fs-lg: 23px; --fs-xl: 26px; --fs-2xl: 31px; --fs-3xl: 36px; --fs-4xl: 43px;
  --fs-5xl: 50px;
  --control-h: 58px;
  --search-ic-size: 22px;
  --search-ic-x: 15px;
  --search-ic-pad: 48px;
}