/* ════════════════════════════════════════════════════════════════
   Inbox 디자인 토큰 — 브랜드 사전 적응 완료
   ────────────────────────────────────────────────────────────────
   사용자 포털 브랜드:
     - Primary: #F05A28 (오렌지)
     - Fonts: Pretendard / SUIT
   
   prototype과의 차이:
     - prototype의 navy-* → 이 파일의 brand-*
     - prototype의 IBM Plex Sans KR → Pretendard
     - 상태 색상 중 attention 톤만 amber로 미세 조정
       (오렌지 브랜드와 색이 겹치지 않도록)
   
   Pretendard 폰트 로딩:
     사용자 포털이 이미 Pretendard를 로드 중이면 아래 @import 라인을
     주석 처리하세요. 중복 로드를 피합니다.
   ════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ──────────────────────────────────────────────────────────────
     브랜드 컬러 — 오렌지 (#F05A28) 계열
     ────────────────────────────────────────────────────────────── */
  --brand-primary:      #F05A28;  /* 메인 브랜드 오렌지 — primary 액션 버튼, 선택 상태 */
  --brand-primary-dark: #D44819;  /* hover 시 어두운 오렌지 */
  --brand-primary-darker:#B83A12; /* active 시 더 어두운 오렌지 */
  --brand-primary-100:  #FEE9DE;  /* 매우 옅은 오렌지 — 카드 선택 배경, hover */
  --brand-primary-50:   #FFF6F1;  /* 더 옅은 오렌지 — 미묘한 강조 배경 */
  --brand-text:         #8C2A0C;  /* 오렌지 위에 쓰는 텍스트 (옅은 배경 위 강조 텍스트) */

  /* ──────────────────────────────────────────────────────────────
     중립 그레이 스케일 (변경 없음)
     ────────────────────────────────────────────────────────────── */
  --gray-900: #1a1d23;
  --gray-800: #2a2f3a;
  --gray-700: #4a5160;
  --gray-600: #6b7382;
  --gray-500: #8c95a6;
  --gray-400: #b4bcc9;
  --gray-300: #d4dae2;
  --gray-250: #dee3eb;
  --gray-200: #e7ebf1;
  --gray-150: #eef1f6;
  --gray-100: #f2f5f9;
  --gray-50:  #f8fafc;
  --white: #ffffff;
  --bg:    #f4f6fa;

  /* ──────────────────────────────────────────────────────────────
     상태 색상
     ────────────────────────────────────────────────────────────── */
  --st-progress:    #2451a0;  /* 파랑: 진행 중 — 자동보정·재시도·정보 */
  --st-progress-bg: #e6edf9;

  --st-done:        #0e8a4f;  /* 초록: 완료 */
  --st-done-bg:     #e1f5ec;

  /* ⚠️ attention은 brand 오렌지와 겹치지 않도록 amber로 조정 */
  --st-attention:   #B45309;  /* 호박색(amber): 확인 필요 */
  --st-attention-bg:#FEF3C7;

  --st-error:       #c4282c;  /* 빨강: 오류·반려 */
  --st-error-bg:    #fde6e7;

  --st-wait:        #8c95a6;  /* 회색: 대기 */
  --st-wait-bg:     #eef1f6;

  /* ──────────────────────────────────────────────────────────────
     레이아웃 치수
     ────────────────────────────────────────────────────────────── */
  --h-topbar: 48px;     /* 사용자 포털의 글로벌 탑바와 충돌 시 조정 */
  --w-rail:   224px;    /* 글로벌 사이드바 (사용자 기존 자산 사용 시 무시) */
  --w-list:   380px;    /* 메일 리스트 패널 */

  /* ──────────────────────────────────────────────────────────────
     라운딩 / 그림자
     ────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(20,20,20,.04), 0 1px 3px rgba(20,20,20,.06);
  --shadow:    0 4px 14px rgba(20,20,20,.08), 0 1px 3px rgba(20,20,20,.05);
  --shadow-lg: 0 12px 32px rgba(20,20,20,.16), 0 4px 12px rgba(20,20,20,.08);

  /* ──────────────────────────────────────────────────────────────
     폰트 패밀리 — Pretendard 우선
     ────────────────────────────────────────────────────────────── */
  --font-sans:    'Pretendard', 'SUIT', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Pretendard', 'SUIT', system-ui, sans-serif;
  --font-mono:    'D2Coding', 'IBM Plex Mono', 'Courier New', monospace;

  /* ──────────────────────────────────────────────────────────────
     ⚠️ 호환성 별칭 (alias) — components.css는 prototype의 --navy-* 변수를
     그대로 참조하므로, 변환 작업 없이 정상 동작하도록 alias 매핑.
     ────────────────────────────────────────────────────────────── */
  --navy-900: var(--brand-primary-darker);
  --navy-800: var(--brand-primary-darker);
  --navy-700: var(--brand-primary);
  --navy-600: var(--brand-primary-dark);
  --navy-500: var(--brand-primary);
  --navy-400: #F58867;     /* 오렌지 중간 톤 (보더용) */
  --navy-100: var(--brand-primary-100);
  --navy-50:  var(--brand-primary-50);
}

/* ════════════════════════════════════════════════════════════════
   기본 타이포 + body 리셋
   사용자 포털에 이미 reset이 있으면 이 블록은 제거하세요.
   ════════════════════════════════════════════════════════════════ */
body, .inbox * {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum' 1;  /* 숫자 폭 통일 (테이블 정렬용) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════
   유틸리티: 숨김 / 포커스 상태
   ════════════════════════════════════════════════════════════════ */
.inbox button:focus-visible,
.inbox a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* 키보드 사용자에게만 outline 표시 */
.inbox button:focus:not(:focus-visible) {
  outline: none;
}