/*
 * BosangHero 디자인 토큰 — 빅테크 표준 (iOS HIG / Material 3 / Linear / Vercel)
 *
 * 사용처: Partner.Host, Admin.Host, Web, App(MAUI) 모두 공통
 * Import: <link href="_content/BosangHero.Shared/css/design-tokens.css" rel="stylesheet" />
 *
 * 영역:
 * - Safe Area (iOS 노치/홈인디케이터, Android 상태바/제스처바)
 * - z-index 11단계 레이어
 * - 폰트 스택 (Pretendard 우선)
 * - 터치 피드백 유틸
 */

:root {
  /* ===== Safe Area (env() 기반, 미지원 시 0 fallback) ===== */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ===== z-index 레이어 (빅테크 표준) ===== */
  --z-base: 0;
  --z-sticky: 10;        /* 페이지 내 sticky */
  --z-sidebar: 20;       /* 데스크톱 사이드바 */
  --z-header: 30;        /* 상단 헤더 (사이드바 위) */
  --z-mobile-nav: 40;    /* 하단 모바일 네비 */
  --z-dropdown: 50;      /* 드롭다운/팝오버/툴팁 */
  --z-backdrop: 60;      /* 모달 배경 오버레이 */
  --z-modal: 70;         /* 모달/드로어 패널 */
  --z-bottom-sheet: 80;  /* 바텀시트 (모달 위 중첩) */
  --z-dialog: 90;        /* Alert/Confirm 다이얼로그 */
  --z-toast: 100;        /* 토스트 알림 */
  --z-image-viewer: 9998;/* 전체화면 이미지 뷰어 (크리티컬 시스템 알림 바로 아래) */
  --z-critical: 9999;    /* 오프라인 인디케이터, 배포 알림, NoticePopup 등 최상위 시스템 메시지 */

  /* ===== 폰트 스택 ===== */
  --font-system:
    -apple-system, BlinkMacSystemFont,
    "Pretendard Variable", "Pretendard",
    "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto,
    "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-serif-brand: "Noto Serif KR", Georgia, serif;
}

/* ===== Safe Area 유틸 클래스 ===== */
.pt-safe { padding-top: var(--sat); }
.pr-safe { padding-right: var(--sar); }
.pb-safe { padding-bottom: var(--sab); }
.pl-safe { padding-left: var(--sal); }
.mt-safe { margin-top: var(--sat); }
.mb-safe { margin-bottom: var(--sab); }
.top-safe { top: var(--sat); }
.bottom-safe { bottom: var(--sab); }

.h-header { height: calc(3.5rem + var(--sat)); }       /* 56 + inset-top */
.h-mobile-nav { height: calc(4rem + var(--sab)); }     /* 64 + inset-bottom */

/* ===== z-index 유틸 클래스 ===== */
.z-base { z-index: var(--z-base); }
.z-sticky { z-index: var(--z-sticky); }
.z-sidebar { z-index: var(--z-sidebar); }
.z-header { z-index: var(--z-header); }
.z-mobile-nav { z-index: var(--z-mobile-nav); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-backdrop { z-index: var(--z-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-bottom-sheet { z-index: var(--z-bottom-sheet); }
.z-dialog { z-index: var(--z-dialog); }
.z-toast { z-index: var(--z-toast); }
.z-image-viewer { z-index: var(--z-image-viewer); }
.z-critical { z-index: var(--z-critical); }

/* ===== 터치 피드백 유틸 (iOS/Android 네이티브 느낌) ===== */
.btn-touch {
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-touch:active {
  transform: scale(0.97);
}

.icon-btn-touch {
  transition: transform 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0.75rem;
}
.icon-btn-touch:active {
  transform: scale(0.94);
}

/* ===== 전역 폰트 & 스무딩 ===== */
html, body {
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== 애니메이션 유틸 (바텀시트/모달 공통) ===== */
@keyframes app-slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes app-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes app-slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes app-scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-slideUp { animation: app-slideUp 280ms cubic-bezier(0.32, 0.72, 0, 1); }
.animate-fadeIn { animation: app-fadeIn 200ms ease-out; }
.animate-slideInRight { animation: app-slideInRight 250ms ease-out; }
.animate-scale-in { animation: app-scale-in 200ms ease-out; }