@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  /* === Font === */
  --font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;

  /* === Colors === */
  --color-bg: #FAF7F3;
  --color-surface: #F0EAE3;
  --color-surface-2: #E8E0D7;
  --color-card-bg: #fff;       /* 카드·패널·입력 배경 — 테마마다 오버라이드 */
  --color-text: #1a1a1a;
  --color-text-muted: #7A6E66;
  --color-text-faint: #B0A89E;
  --color-border: #E5DDD6;
  --color-border-light: #EDE7E1;

  /* Primary — change here to retheme */
  --color-primary: #E07B4A;
  --color-primary-light: #FEECD8;
  --color-primary-text: #B85A28;

  /* Secondary teal */
  --color-teal: #4A9E8E;

  /* Category accents — 채도 낮춤 (실제 색상은 category-settings.js 기본값이 우선) */
  --color-accent-family:       #A07858;
  --color-accent-family-bg:    #F5EDE4;
  --color-accent-family-text:  #4A3020;

  --color-accent-friend:       #5A7898;
  --color-accent-friend-bg:    #E2EBF2;
  --color-accent-friend-text:  #283850;

  --color-accent-work:         #687888;
  --color-accent-work-bg:      #E8ECF0;
  --color-accent-work-text:    #303A48;

  --color-accent-club:         #5A7862;
  --color-accent-club-bg:      #DCE9DE;
  --color-accent-club-text:    #284030;

  --color-accent-default:      #786A88;
  --color-accent-default-bg:   #EAE6F0;
  --color-accent-default-text: #38284A;

  /* Status */
  --color-danger:    #E04A4A;
  --color-danger-bg: #FDEAEA;
  --color-success:   #3A9A60;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 12px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  /* === Border Radius === */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* === Typography === */
  --font-xs:  11px;
  --font-sm:  13px;
  --font-md:  15px;
  --font-lg:  18px;
  --font-xl:  22px;
  --font-2xl: 28px;
  --line-height-tight:  1.3;
  --line-height-normal: 1.55;

  /* === Shadows === */
  --shadow-card:  0 2px 8px rgba(80,50,20,.06), 0 1px 2px rgba(80,50,20,.04);
  --shadow-float: 0 4px 24px rgba(80,50,20,.12), 0 1px 4px rgba(80,50,20,.06);
  --shadow-modal: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  --shadow-tab:   0 -1px 0 rgba(80,50,20,.08);

  /* ============================================================
     ★ 레이아웃 조정 구역 — 여기 숫자만 바꾸면 전체 반영됩니다
     ============================================================ */

  /* 헤더 */
  --page-header-height:     56px;   /* 세 페이지 헤더 높이 (동일) */
  --page-header-pad-x:      16px;   /* 헤더 좌우 여백 */
  --page-header-lead-width: 40px;   /* 로고·← 버튼 슬롯 너비 */
  --header-action-height:   34px;   /* 헤더 버튼 높이 (정렬·삭제 등) */
  --header-action-pad-x:    12px;   /* 헤더 버튼 좌우 내부 여백 */

  /* 본문 */
  --page-body-pad-x:        16px;   /* 본문 좌우 여백 */
  --page-body-pad-top:      16px;   /* 헤더 ~ 첫 컨텐츠 사이 여백 (세 페이지 공통) */
  --page-body-gap:          12px;   /* 본문 카드 사이 간격 */

  /* 플로팅 바 (홈 하단) */
  --float-bar-height:       90px;
  --float-bar-bottom:       20px;

  /* ============================================================
     내부 계산용 — 위 값에서 자동 계산, 직접 수정 불필요
     ============================================================ */
  --max-width:       480px;
  --page-bottom-pad: calc(var(--float-bar-height) + var(--float-bar-bottom) + 12px);
}

/* ============================================================
   테마 — 화이트 모던
   ============================================================ */
[data-theme="white"] {
  --color-bg:           #FFFFFF;
  --color-surface:      #F5F5F5;
  --color-surface-2:    #EBEBEB;
  --color-card-bg:      #FFFFFF;
  --color-text:         #111111;
  --color-text-muted:   #595959;
  --color-text-faint:   #AAAAAA;
  --color-border:       #E0E0E0;
  --color-border-light: #EBEBEB;
  --shadow-card:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-float: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.05);
  --shadow-tab:   0 -1px 0 rgba(0,0,0,.08);
  --shadow-modal: 0 12px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
}

/* ============================================================
   테마 — 그레이 안정
   기준 #2A2A35 에서 밝기 +10%  →  bg #3E3E4C
   카드는 밝기를 더 높여 어두운 배경 위에서 부유감(elevation) 연출
   ============================================================ */
[data-theme="gray"] {
  --color-bg:           #3E3E4C;
  --color-surface:      #353542;
  --color-surface-2:    #2C2C38;
  --color-card-bg:      #48485A;
  --color-text:         #E8E8F2;
  --color-text-muted:   #9898B8;
  --color-text-faint:   #636380;
  --color-border:       #525268;
  --color-border-light: #484860;
  --color-primary:      #D4784A;
  --color-primary-light: #4A3028;
  --color-primary-text: #F0A870;
  --color-danger-bg:    #4A2525;
  --color-success:      #4AA870;
  --shadow-card:  0 2px 8px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.20);
  --shadow-float: 0 4px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
  --shadow-tab:   0 -1px 0 rgba(0,0,0,.35);
  --shadow-modal: 0 12px 40px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.30);
}

/* select 화살표 SVG 색상이 URL에 하드코딩 — 테마별 오버라이드 */
[data-theme="gray"] .select {
  background-color: var(--color-card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239898B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--color-text);
}