@charset "utf-8";

@layer reset {
  * {
    outline-color: var(--primary);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, input) {
    margin: 0;
    padding: 0;
  }

  :where(input, textarea, select, button) {
    font: inherit;
    color: inherit;
    caret-color: var(--primary);
  }

  :where(input, textarea, select) {
    min-width: 0;
    padding: 10rem 8rem;
    width: auto;
    border: 1px solid;
  }

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

  :where(address, em) {
    font-style: normal;
  }

  body {
    position: relative;
    accent-color: var(--primary);
    font: var(--font-size-16, 16rem)/1.5 var(--font-sans);
    overflow-wrap: break-word;
    word-break: keep-all;
    color: var(--black);
  }

  button {
    padding: 0;
    background: 0;
    border: 0;
    cursor: pointer;
  }

  dialog {
    color: inherit;
  }

  html {
    -webkit-text-size-adjust: 100%;
    /* * [CRITICAL] 시스템 텍스트 렌더링 최적화 및 크로스 브라우징 방어
		 * --------------------------------------------------------------------------
		 * 1. 목적: iOS Safari의 'Minimum Font Size(최소 9~10px)' 강제 업스케일링 알고리즘 방어.
		 * 2. 배경: html font-size가 10px 미만(예: 6.25%)일 때, 사파리가 rem 단위를 10배로 오계산하여 
		 * 레이아웃이 파괴되는 현상을 원천 차단함.
		 * 3. 주의: 'none' 대신 '100%'를 사용하여 브라우저의 임의 부풀리기는 억제하되, 
		 * 사용자의 수동 확대(Pinch-to-zoom) 권한을 보존하여 웹 접근성(WCAG)을 준수함.
		 * 4. 경고: 애플 기기에서의 레이아웃 일관성을 위해 절대 삭제하거나 수정하지 말 것.
		 * --------------------------------------------------------------------------
		 */
  }

  summary {
    cursor: pointer;
  }

  :where(svg:focus, svg *:focus) {
    outline: none;
  }

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

  textarea {
    resize: vertical;
  }

  ul,
  ol {
    list-style: none;
  }
}