/* ARCHIVE 글로벌 스타일 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  height: -webkit-fill-available;
  background: #0A1628;
  overscroll-behavior: none;
}

body {
  font-weight: 500;
  min-height: 100%;
  min-height: -webkit-fill-available;
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR',
               'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0A1628;
  color: #E8F0FC;
  overscroll-behavior: none;
}

#root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── 스크롤바 ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #253E5F; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #3A5A80; }

/* ── 수평 스크롤 ── */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* ── 애니메이션 ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes newBadgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes modalUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-up { animation: modalUp 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.badge-new { animation: newBadgePop 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── PWA 안전 영역 ── */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 포커스 링 (접근성) ── */
:focus-visible {
  outline: 2px solid #F5622E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── input 자동완성 스타일 덮어쓰기 ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0F1E35 inset !important;
  -webkit-text-fill-color: #E8F0FC !important;
  caret-color: #E8F0FC;
}

/* ── 선택 색상 ── */
::selection { background: rgba(245,98,46,0.3); }

/* ── 이미지 드래그 방지 ── */
img { -webkit-user-drag: none; user-select: none; }