/* ============================================================
   ShinhanTrustPass 디자인 토큰
   색 값 출처 : Shinhan AI Portal Design System tokens/colors.css,spacing 규칙 (2026-11-03 복사)
   글자 크기 : 화면설계서 7장 6항을 키운 값 (2026-11-03 반영)
   설계서 7장의 700,600,300 단계는 디자인 시스템에 없어 아래 6단 변수로 따로 둔다(미결 11 승인,2026-11-04).
   화면 CSS는 이 파일의 변수만 쓴다. 색과 크기를 직접 적지 않는다.
   ============================================================ */

:root {
  /* ---------- 브랜드 (디자인 시스템 값) ---------- */
  --shinhan-blue:        #0046FF;
  --shinhan-blue-light:  #4D7AFF;
  --shinhan-blue-dark:   #003ACC;
  --shinhan-blue-50:     #EEF3FF;
  --shinhan-blue-100:    #D6E1FF;
  --shinhan-navy:        #0A1838;
  --shinhan-navy-deep:   #050E1F;

  /* ---------- 신한 블루 6단 (화면설계서 7장,디자인 시스템에 없는 단계) ---------- */
  --shinhan-blue-700:    #002C99;
  --shinhan-blue-600:    #0039CC;
  --shinhan-blue-300:    #6E8FFF;

  /* ---------- 표면,글자,선 (디자인 시스템 라이트 값) ---------- */
  --bg-primary:      #F8FAFC;
  --bg-tertiary:     #EEF0F4;
  --bg-elevated:     #FFFFFF;

  --text-primary:    #0A1838;
  --text-secondary:  #4B5563;
  --text-tertiary:   #6B7280;
  --text-quaternary: #9CA3AF;
  --text-inverse:    #FFFFFF;

  --border-default:  #E5E7EB;
  --border-strong:   #D1D5DB;
  --border-subtle:   #F3F4F6;

  --shadow-xs:   0 1px 2px rgba(10, 24, 56, 0.04);
  --shadow-card: 0 1px 3px rgba(10, 24, 56, 0.04);
  --shadow-lg:   0 8px 24px rgba(10, 24, 56, 0.08);
  --shadow-xl:   0 16px 40px rgba(10, 24, 56, 0.12);
  --backdrop-modal: rgba(10, 24, 56, 0.5);
  --focus-ring:  0 0 0 3px rgba(0, 70, 255, 0.4);

  --radius-md: 6px;   /* 버튼,입력칸 */
  --radius-lg: 8px;   /* 카드 */
  --radius-xl: 12px;  /* 확인 창 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-primary: 'OneShinhan', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;

  /* ---------- 앱 역할 (화면설계서 7장 표의 자리) ---------- */
  --tp-fixed-bg:   var(--shinhan-blue-50);   /* 상단,하단 고정 구역 바탕,경고문 바탕 */
  --tp-key-bg:     var(--shinhan-blue-100);  /* 숫자 자판 버튼 바탕,검증미연동 표시 바탕 */
  --tp-strong:     var(--shinhan-blue-700);  /* 700 자리: 경고 글자,전체삭제,5초 이하 막대 */
  --tp-tab-active: var(--shinhan-blue-600);  /* 600 자리: 선택된 탭 */
  --tp-pressed:    var(--shinhan-blue-600);  /* 600 자리: 눌린 버튼 */
  --tp-sub-icon:   var(--shinhan-blue-300);  /* 300 자리: 보조 아이콘 */
  /* PIN 틀림 대기 중 숫자 자판을 흐리게 하는 정도(설계서 4.4). 시안에 없는 상태라 Phase 4가 더했다. 색은 바꾸지 않는다(R-29) */
  --tp-disabled-opacity: 0.4;

  /* ---------- 크기 (화면설계서 3장,7장) ---------- */
  --tp-header-h: 48px;
  --tp-tab-h:    56px;

  --tp-fs-title: 20px;  /* 화면 제목,상단 앱 이름 */
  --tp-fs-body:  17px;  /* 본문,버튼,입력칸 */
  --tp-fs-sub:   15px;  /* 보조 문구,검증미연동 표시 */
  --tp-fs-tab:   14px;  /* 탭 글자 */
  --tp-fs-otp:   34px;  /* OTP 코드 */
  --tp-fs-key:   28px;  /* 숫자 자판 */
  --tp-fs-brand: 22px;  /* 설치안내 앱 이름 */
}