/* ==========================================================================
  common.css — 전체 페이지 공통 스타일
  root
   ========================================================================== */

/* ── reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("font/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("font/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("font/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("font/Pretendard-Bold.woff2") format("woff2");
}

/* ── root ── */
:root {
  /* 사용자 */
  --color-primary: #0078ff;
  --color-primary-dark: #0058cc;
  --color-primary-medium: #79beff;
  --color-primary-light: #d9e9ff;
  --color-primary-lightest: #edf4ff;
  --color-sidebar-bg: #0078ff;
  --color-sidebar-active: #076adb;
  --color-sidebar-hover: #1a3b96;
  --color-sidebar-text: #ffffff;
  --color-sidebar-text-muted: rgba(255, 255, 255, 0.65);

  --color-shop-primary: #6d71f9;

  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-hover: #f9fafb;
  --color-border: #e2e2e2;
  --color-border-strong: #c2cad4;

  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #c4cbd5;
  --color-gray-600: #929da9;
  --color-modal-bg: #f5f6f8;
  --color-tooltip-bg: rgba(0, 0, 0, 0.75);

  /* 버튼 */
  --color-btn-primary: #0078ff;
  --color-btn-primary-hover: #0059cc;
  --color-btn-primary-active: #004499;
  --color-btn-voice: #fff188;
  --color-btn-voice-hover: #f1dc2b;
  --color-btn-dark: #1c2151;
  --color-btn-dark-hover: #0b1679;
  --color-btn-dark-active: #0f1336;
  /* 탭 */
  --color-tab-primary: #839bff;

  /* 상태 배지 */
  --color-badge-fail: #f86f57;
  --color-badge-success: #0078ff;
  --color-badge-yet: #8295b5;
  --color-badge-unconfirmed: #00ccaa;
  --color-badge-notify: #f87c57;
  /* 안내 */
  --color-danger: #ff4c43;
  --color-danger-light: #fee2e2;
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-focus: #1a6eff;

  /* ── 타이포그래피 ── */
  --font-family:
    "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;
  --font-size-xs: 0.875rem; /* 14px */
  --font-size-sm: 0.938rem; /* 15px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 1.75rem; /* 28px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --color-text-primary: #000b18;
  --color-text-secondary: #6b7c92;
  --color-text-disabled: #8295b5;
  --color-text-placeholder: #8295b5;

  /* ── 간격 시스템 (4px 기준) ── */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */

  /* ── 레이아웃 ── */
  --sidebar-width: 280px;
  --header-height: 72px;
  --main-padding: var(--space-8);

  /* ── 테두리 반경 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── 그림자 ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.18);

  /* ── 트랜지션 ── */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── 테이블 ── */
  /* 색상 */
  --tbl-border: #e4e8ed; /* 얇은 구분선 */
  --tbl-border-strong: #333a45; /* 테이블 상단 굵은 라인 */
  --tbl-header-bg: #f1f7ff; /* 라벨/헤더 셀 배경 (연한 블루) */
  --tbl-row-bg: #fff; /* 일반 데이터 셀 배경 */
  --tbl-row-hover: #f7f9fc; /* 목록형 행 hover */
  --tbl-text-primary: #777777; /* 본문/값 텍스트 */
  --tbl-text-label: var(--color-text-primary); /* 라벨/헤더 텍스트 */
  --tbl-text-muted: var(
    --color-text-placeholder
  ); /* placeholder, 마스킹된 값(010-****) */
  --tbl-link: var(--color-primary);
  --tbl-accent: var(--color-primary);
  --tbl-accent-bg: #eaf1fe; /* 배지 배경 */
  --tbl-disabled-bg: #f4f5f7; /* 비활성 버튼 배경 */
  --tbl-disabled-text: #b7bbc2; /* 비활성 버튼 텍스트 */

  /* 타입 */
  --tbl-fs-title: var(--font-size-md); /* 18px */
  --tbl-fs-cell: var(--font-size-xs); /* 14px */
  --tbl-fs-caption: 0.813rem; /* 13px */

  /* 레이아웃 */
  --tbl-radius: var(--radius-md);
  --tbl-cell-pad-y: 16px;
  --tbl-cell-pad-x: 20px;

  /* 인풋 */
  --form-input-height: 52px; /* 로그인·회원가입·내정보 모두 동일 */
  --form-input-bg: #fff; /* 기본 배경 — 연한 파랑 계열 */
  --form-input-bg-white: #fff; /* 포커스·활성 배경 */
  --form-input-bg-disabled: #e8eff8; /* 수정 불가 필드 배경 (내정보 이름·생년월일) */
  --form-input-border: var(--tbl-border); /* 기본 테두리 */
  --form-input-border-focus: var(--color-primary); /* 포커스 테두리 */
  --form-input-border-error: var(--color-danger); /* 오류 테두리 */
  --form-input-border-success: var(
    --color-success
  ); /* 검증 성공 테두리 (중복확인 통과 등) */
  --form-input-radius: var(--radius-md); /* border-radius — 공통 */
  --form-input-font: var(--font-size-sm); /* 14px */
  --form-input-color: var(--color-text-primary); /* 입력 텍스트 */
  --form-input-placeholder: var(--color-text-placeholder); /* placeholder */
  --form-input-shadow-focus: 0 0 0 3px rgba(26, 110, 255, 0.13);
  --form-input-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.12);
  /* 레이블 */
  --form-label-size: var(--font-size-xs); /* 14px */
  --form-label-weight: var(--font-weight-semibold);
  --form-label-color: var(--color-text-primary);
  --form-label-required: var(--color-danger); /* 필수색상 */
  /* 힌트·오류·성공 메시지 */
  --form-msg-size: var(--font-size-xs); /* 12px */
  --form-msg-hint: var(--color-text-secondary);
  --form-msg-error: var(--color-danger);
  --form-msg-success: var(--color-success);
  /* 버튼 (폼 내 보조 버튼 — 중복확인·인증요청 등) */
  --form-btn-height: var(--form-input-height);
  --form-btn-min-width: 80px;
}
/* ── 기본 본문 타이포그래피 ── */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* 리스트 초기화  */
ul,
ol {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select,
fieldset {
  font: inherit;
}
fieldset,
img {
  border: 0;
}
textarea::placeholder,
select:invalid {
  color: var(--color-text-placeholder);
}
button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* 글자 크기 조절 */

html[data-font-size="small"] {
  font-size: 14px;
}
html[data-font-size="medium"],
html:not([data-font-size]) {
  font-size: 16px;
}
html[data-font-size="large"] {
  font-size: 18px;
}

/* 스크롤바 영역 */
.scroll-container {
  overflow-y: auto;
  scrollbar-color: #d1d5db transparent;
  scrollbar-width: thin;
}
.scroll-container::-webkit-scrollbar {
  width: 6px;
}
.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #d1d5db; /* 연한 회색 */
  border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

.highlight {
  color: var(--color-primary);
}
.blind {
  position: absolute;
  left: -9999px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dot_new {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  outline: 2px solid #fff;
}
/* 애니메이션 */
/* 모션 감소 요청 사용자 지원 (접근성) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes btnGradientFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}