/* ==========================================================================
   Base Reset - Foundation Styles
   HTML/Body 기본 스타일과 리셋
   ========================================================================== */

/* ===== HTML & Body ===== */
html {
  height: 100%;
}

body {
  font-family: var(--font-family-primary);
  min-height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  caret-color: var(--color-text-primary);
}

/* ===== Scroll Lock (when modal is open) ===== */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Prevent iOS auto-scroll on input focus */
body.menu-open .create-menu-backdrop,
body.menu-open .search-modal-backdrop {
  touch-action: none;
}

body.menu-open .create-menu-sheet,
body.menu-open .create-menu-sheet * {
  touch-action: auto;
}

/* ===== Form Element Resets =====
   Pointer focus: hide outline (mobile/touch — would look like noise).
   Keyboard focus (:focus-visible): show a visible ring for accessibility.
   :focus-visible matches only when the browser determines focus is keyboard-
   driven (Tab traversal), not from a mouse click or touch.
*/
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ===== Accessibility: Reduced Motion =====
   사용자가 시스템에서 "Reduce Motion" 을 켜면 모든 애니메이션/전환을
   즉시 끝내도록 강제. iOS "설정 > 접근성 > 동작 > 동작 줄이기" 와
   macOS "손쉬운 사용 > 디스플레이 > 동작 줄이기" 에서 설정 가능.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ===== WebKit autofill =====
   Chrome/Safari 가 자동완성된 input 에 강제로 적용하는 lavender/yellow 배경을
   덮어쓴다. 긴 inset box-shadow 트릭은 배경색만 덮을 수 있는 유일한 방법이다
   (background-color 는 autofill 이 무시함).
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  caret-color: var(--color-text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== Link Reset ===== */
a {
  text-decoration: none;
  color: inherit;
}