@charset "utf-8";

/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, figcaption,
ul, ol, li, dl, dt, dd,
fieldset, legend, address, hr { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img,
svg,
video { display: block; max-width: 100%; height: auto; border: 0; }

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

address { font-style: normal; }

hr { border: 0; }

/* JS 로 토글하는 요소는 hidden 속성이 항상 이기도록 한다 */
[hidden] { display: none !important; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

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

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

/* 키보드 포커스는 항상 보이게 유지한다 */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/* 단, 스크립트가 스크롤 목적지로 포커스를 옮기는 요소(tabindex="-1")는 예외.
   섹션처럼 화면 전체 폭인 요소에 테두리가 그려지면
   좌우는 화면 밖으로 나가고 위아래만 붉은 가로선으로 보인다.
   조작 대상이 아니라 위치 안내용이므로 테두리를 그리지 않는다. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* 화면에서는 감추고 스크린리더에는 읽히게 */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}