/*
	base.css — 기본 스타일

	요소 기본값과 공통 유틸리티만 둔다.
	컴포넌트(카드·히어로·폼 파트 등)는 각 파트를 만들 때 추가한다.

	값은 전부 var(--*) 로 쓴다. 직접 쓰지 않는다 → design-system.md G-1 · check.sh V-6
	모바일 우선. 작은 화면을 먼저 쓰고 min-width 로 넓힌다 → G-3

	토큰 정의 → assets/css/tokens.css


	── 클래스 이름 규칙 (BEM) — G-125~128 ──────────────────

	CSS 변수가 아니라 작성 규약이라 tokens.css 에 넣을 수 없다.
	여기 적어둔다.

	  블록__요소--변형

	  .course-card              블록
	  .course-card__title       요소는 __
	  .course-card__price
	  .course-card--featured    변형은 --

	  G-125  소문자 + 하이픈        .service-times
	  G-126  요소는 __              .service-times__item
	  G-127  변형은 --              .button--disabled
	  G-128  접두사 없음            테마 전용이라 불필요

	템플릿 파트 이름과 블록 이름을 일치시킨다.
	  template-parts/course-card.php  →  .course-card


	── 미디어 쿼리 값 ──────────────────────────────────────

	@media 조건에는 var() 를 쓸 수 없다. CSS 사양의 제약이다.
	아래 세 값은 직접 쓰되, 바꿀 때 design-system.md 를 함께 고친다.

	  G-85   640px   큰 휴대폰
	  G-86   768px   태블릿
	  G-87  1024px   데스크톱

	이 파일에서 쓰는 곳마다 좌표를 주석으로 달았다.


	── 값을 직접 쓴 곳 (의도된 예외) ───────────────────────

	토큰이 없는 값이다. "고쳐야 할 것"으로 오해하지 않도록 적어둔다.
	새로 늘리지 않는다. 늘려야 하면 design-system.md 에 토큰을 먼저 만든다.

	  44px        버튼 터치 영역. G-104 가 픽셀로 못박은 값이다
	  1px · 2px   테두리·아웃라인 두께. 두께 토큰이 없다
	  700         굵은 글씨. 굵기 토큰이 없다
	  100%        html 기준 글자 크기. 사용자 브라우저 설정을 따르기 위함
	  1px         .visually-hidden 의 관용 구현
	  100         .skip-link 의 z-index. 층 토큰이 없다
*/

/* ═══════════════════════════════════════════
   초기화
   ═══════════════════════════════════════════ */

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

/* 사용자가 브라우저에서 정한 기본 글자 크기를 존중한다. rem 의 기준이 된다. */
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════
   본문
   ═══════════════════════════════════════════ */

/*
	🔴 **한글 줄바꿈을 뿌리에 건다** (`3-54` · 2026-08-31 · 회차 3 · `2-43` ㉠).

	한글은 낱말 안에서 아무 데나 끊긴다 — 「[필수] 개인정보처리방침 동의」가
	「[필/수]」로 쪼개진 자리에서 처음 잡혔다 (`1-112`). 그때는 **그 화면 하나에만**
	걸었고, 그래서 **새 화면을 지을 때마다 다시 빠뜨렸다.**
	⇒ **인스턴스가 아니라 기본값을 고친다** (밑줄과 같은 뿌리 진단이다).

	⚠️ **긴 영문·URL 이 안 끊겨 넘칠 수 있다.** 걸기 전에 두 사이트 여섯 화면을
	   재서 **16자 넘는 영문·URL 이 0곳**임을 확인했다 (2026-08-31).
	   ⚠️ **0곳은 오늘의 참이다** — 담당자가 긴 주소를 넣는 날 넘칠 수 있다.
	      그래서 아래 `overflow-wrap: anywhere` 를 **같이** 건다: 낱말 단위로
	      끊되, **한 낱말이 칸보다 길면 그때는 쪼갠다.** 둘이 함께 있어야
	      「한글은 곱게, 긴 주소는 안 넘치게」가 둘 다 참이 된다.
*/
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════
   제목 — G-45~48 · G-50

   페이지당 h1 은 하나. 섹션 제목은 h2.
   → CLAUDE.md 코드 작성 규칙 · check.sh V-5
   ═══════════════════════════════════════════ */

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-4xl);
}

h2 {
	font-size: var(--text-3xl);
}

h3 {
	font-size: var(--text-2xl);
}

h4 {
	font-size: var(--text-xl);
}

/* 제목 다음에 오는 글과의 간격. 제목 자체에는 위 여백을 주지 않는다. */
h1 + *,
h2 + *,
h3 + *,
h4 + * {
	margin-top: var(--space-4);
}

p + p {
	margin-top: var(--space-4);
}

/* 설교 전문·강의 소개처럼 긴 글 — G-52 · G-80 */
.prose {
	max-width: var(--container-narrow);
	line-height: var(--leading-loose);
}

/*
	본문 흐름 — 감싸개를 갈랐다 (`3-54` 곁가지 · 2026-09-01).

	  .prose       읽기 폭. **글을 읽는 자리** — 처리방침 · 공지 상세 ·
	               설교 대본. 상자째 좁다
	  .entry-flow  고객이 무엇을 넣을지 우리가 모르는 자리 — `page.php`.
	               **기본 문단은 읽기 폭 그대로**이고(줄 길이가 안 바뀐다),
	               `alignwide` 가 컨테이너 가득 · `alignfull` 이 화면
	               가득으로 벗어난다 (`align-wide` 지원과 한 쌍)

	⚠️ `alignfull` 은 **vw 를 안 쓴다** (`3-54` 곁가지 2). `50vw` 는 스크롤바
	   폭을 몰라 항상 보이는 스크롤바 환경에서 그만큼 넘친다. 대신 컨테이너의
	   좌우 여백만 벗어난다 — 모바일에서는 그것이 곧 화면 가득이고, 넓은
	   화면에서는 판까지다. **진짜 화면 가득은 「전체 폭」 템플릿**
	   (`template-full.php`)이 맡는다 — 거기는 조상이 이미 화면 폭이라
	   vw 없이 된다.
*/
.entry-flow {
	line-height: var(--leading-loose);
}

.entry-flow > * {
	max-width: var(--container-narrow);
}

.entry-flow > .alignwide {
	max-width: none;
}

.entry-flow > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--container-pad));
}

/*
	전체 폭 템플릿의 흐름 (`template-full.php`). 컨테이너 밖에 서므로
	기본 단은 가운데 · 판 값은 자식 토큰이 정한다 (G-2).
*/
.entry-flow--full {
	padding-inline: var(--container-pad);
}

.entry-flow--full > * {
	max-width: var(--container-base);
	margin-inline: auto;
}

.entry-flow--full > .alignwide {
	max-width: var(--container-wide);
}

.entry-flow--full > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--container-pad));
}

.prose > * + *,
.entry-flow > * + * {
	margin-top: var(--space-4);
}

/*
	본문 안 목록 — 항목 사이 (3-49 · G-120)

	`.prose > * + *` 는 `<ul>` **바깥**에만 여백을 준다. 안쪽 항목은 0이라
	**마커도 간격도 없이 줄만 바뀌었다** — 목록인지 줄바꿈한 문단인지
	구분이 안 됐다. 처리방침에서 실측했다 (목록 5 · 항목 18).

	`G-120` 이 「무순 목록은 마커 없이 **소제목과 간격**으로 묶는다」인데
	본문 안에서는 `<h2>` 조 제목이 소제목 노릇을 하고 있었고 **빠진 것이
	간격 하나**였다.

	⚠️ **마커를 켜지 않았다.** 이 목록들은 「항목」이 아니라 **짧은 문단**이다
	   — 「회원 가입 및 관리 — 본인 확인, …」은 모바일에서 두세 줄로 접힌다.
	   불릿을 켜면 접힌 줄이 불릿 아래로 들여쓰기되어 `G-122` 를 고친 자리로
	   되돌아간다. 하우스 스타일의 불릿 0건도 그대로 지킨다.

	⚠️ **`li` 가 아니라 `li + li` 다.** 첫 항목에 주면 `<ul>` 이 위에서 이미
	   받은 16px 에 더해져 목록이 문단에서 떠난다.

	값은 `--space-2` 다. `course-benefits__item` 이 쓰는 것과 **같은 값이다**
	— 둘 다 마커 없는 무순 목록이라 다르면 왜 다른지를 설명해야 한다.
*/
.prose li + li,
.entry-flow li + li {
	margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════
   링크
   ═══════════════════════════════════════════ */

/*
	🔴 **기본은 밑줄 없음. 본문 안에서만 되살린다** (`3-54` · 2026-08-31 · 회차 3).

	── 왜 뒤집었나 ──────────────────────────────────

	전에는 `a` 에 밑줄을 깔고 **부품마다 하나씩 껐다** — `text-decoration: none`
	을 손으로 적은 곳이 **열**이었다. 그 방식은 **새 부품을 지을 때마다 빠뜨린다.**
	`word-break` 도 `text-align` 도 같은 꼴로 물렸다 (회차 3 뿌리 진단).
	⇒ **인스턴스가 아니라 기본값을 고친다.**

	── 그런데 본문 링크는 밑줄이 있어야 한다 ──────────

	🔴 **링크색과 둘레 본문 글자의 대비가 3:1 미만이다** — 교회 **2.91** ·
	   강의 **1.88**. 밑줄을 빼면 **본문 링크를 색만으로 가리게 되어**
	   WCAG 1.4.1(색에만 기대지 않기)에 걸린다.
	⚠️ **짜임 링크는 해당 없다** — 메뉴·카드·목록·단추·꼬리는 **자리와 모양**으로
	   이미 구분된다. 글 속에 섞여 있는 링크만 색 말고 표시가 더 필요하다.

	그래서 **본문 감싸개 안에서만** 되살린다 — `.prose` 가 그 감싸개다
	(`the_content()` 를 내는 자리 전수에 붙어 있다).

	⚠️ **`text-decoration: none` 을 손으로 적은 열 곳은 안 지웠다.** 이제 없어도
	   되지만 **지우는 것과 뒤집는 것을 한 회차에 묶지 않는다** — 뒤집기가
	   잘못됐을 때 무엇이 원인인지 못 가른다.
*/
a {
	color: var(--color-primary);
	text-decoration: none;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

/*
	⚠️ **hover 에서 밑줄이 난다.** 마우스가 없는 기기에서는 안 보이지만,
	   그 기기에서는 **누를 수 있는 것을 누르며 확인**한다 — 본문 링크는
	   아래 `.prose` 가 처음부터 밑줄을 갖는다.
*/
a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/*
	본문 안 링크 — 밑줄을 되살린다.

	🔴 **이 규칙이 위 WCAG 근거를 지키는 자리다.** 본문 감싸개가 붙는 곳은
	   `page.php` · `template-privacy.php` · 교회 페이지 템플릿 여섯 ·
	   `single-notice.php` · `single-sermon.php` 다 (2026-08-31 전수).
	⚠️ **감싸개가 없는 본문이 있으면 여기서 안 걸린다** — 강의
	   `template-contact.php` · `template-instructor.php` 가 그랬고,
	   같은 회차에 감싸개를 씌웠다.
*/
.prose a,
.entry-flow a,
.course-notes__body a {
	text-decoration: underline;
}

/*
	어두운 바닥 (`G-118` · `3-54` 회차 4 · 2026-08-31).

	🔴 **어두운 바닥에서는 색만으로 링크를 알리지 않는다.** 밝은 바닥에서는
	   브랜드색 하나로도 링크가 보이지만, 어두운 바닥에서는 본문까지 밝은
	   색이라 **링크만 다른 색**이라는 신호가 약해진다 (`WCAG 1.4.1`).

	🔴 **감싸개로 건다.** 전에는 강의 홈 링크 **한 자리에만 손으로** 적혀
	   있었다 — 그 방식은 어두운 판이 하나 늘 때마다 빠뜨린다.
	   어두운 판을 새로 지으면 **`on-dark` 를 같이 붙인다.**

	전수로 재고 걸었다 (2026-08-31) — 붙는 곳 넷:
	  `site-footer`(두 사이트) · `instructor-brief`(강의) ·
	  `home-hero`(두 사이트) · `hero--image`(교회)

	⚠️ **`.button` 은 뺀다.** 단추는 자기 바탕을 갖고 있어 이 바탕과 무관하다.
	   밑줄을 그으면 단추 글자에 줄이 그인다.
*/
.on-dark a:not(.button) {
	text-decoration: underline;
}

/* ═══════════════════════════════════════════
   포커스 — G-102 · G-117

   키보드 사용자에게 지금 어디에 있는지 알려준다.
   이 규칙을 없애지 않는다. 없애면 키보드로 사이트를 쓸 수 없다.
   ═══════════════════════════════════════════ */

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════
   이미지 — G-110~112

   alt 는 마크업에서 챙긴다. 장식용이면 alt="".
   히어로는 지연 로딩하지 않는다 (LCP).
   ═══════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════
   표
   ═══════════════════════════════════════════ */

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

th {
	font-weight: var(--weight-bold);
}

/* ═══════════════════════════════════════════
   폼 — G-105~107 지원

   라벨 연결·오류 문구·입력값 유지는 마크업과 PHP 가 맡는다.
   여기서는 보이는 기본형만 잡는다.
   ═══════════════════════════════════════════ */

label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
}

input,
select,
textarea {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: inherit;

	/* 16px 아래로 내리지 않는다. iOS 가 입력 시 화면을 확대한다 — G-42 */
	font-size: var(--text-base);
}

textarea {
	min-height: var(--space-24);
	line-height: var(--leading-normal);
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
}

/* 오류 — G-23 · G-106
   색만으로 알리지 않는다. 문구를 함께 보여준다. */
.field--error input,
.field--error select,
.field--error textarea {
	border-color: var(--color-danger);
}

.field__error {
	margin-top: var(--space-2);
	color: var(--color-danger);
	font-size: var(--text-sm);
}

.field__hint {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════
   버튼 — G-100~104
   ═══════════════════════════════════════════ */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 아이콘과 글자 사이 — 자식이 하나뿐인 단추에는 안 나타난다 */
	gap: var(--space-2);

	/* 터치 영역 최소 44×44 — G-104 */
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition);
}

.button:hover {
	background: var(--color-primary-hover);
	color: var(--color-text-invert);
}

.button--secondary {
	background: var(--color-bg);
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.button--secondary:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

/*
	비활성 — G-103

	결제 대기 중 수강 신청 버튼이 이 상태다 (T-64).
	설정값으로 제어하며 하드코딩하지 않는다 → CLAUDE.md 결제 대기 상태
*/
/* ─────────────────────────────────────────
   단추 갈래 — G-144~148 (`3-54` · 2026-08-31)

   디자인 꾸러미가 홈 한 장에서 요구한 것만 만든다 (`3-37`).
   **홈에 안 나온 갈래(soft · danger)는 안 만들었다.**

   🔴 **부모에 둔다.** 테두리 단추·투명 단추·크기 둘은 **사이트 말이 아니다** —
      강의도 언젠가 쓴다 (`R-1`). 색은 전부 토큰이라 자식이 제 색으로 선다.

   ⚠️ **지금 이 갈래를 쓰는 마크업이 한 곳도 없다.** 새 규칙을 더해도
      **두 사이트 화면이 한 픽셀도 안 바뀐다** — 계산값으로 댔다.
   ⚠️ **`min-height: 44px`(터치 영역 `G-104`)는 안 건드린다.** 꾸러미는 sm 을
      32px 로 두지만 **손가락이 닿아야 하는 것은 디자인보다 앞선다** —
      `--sm` 은 글자와 좌우 여백만 줄인다.
   ───────────────────────────────────────── */

/* 테두리 단추 — 옅은 강조. 「전체보기」 같은 두 번째 행동 */
.button--outline {
	border-color: var(--color-border-strong);
	background: transparent;
	color: var(--color-text);
}

.button--outline:hover {
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}

/* 투명 단추 — 세 번째 행동. 바탕이 없다 */
.button--ghost {
	border-color: transparent;
	background: transparent;
	color: var(--color-text);
}

.button--ghost:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

/*
	반전 단추 — 어두운 판 위에서만 쓴다.

	⚠️ **밝은 바탕에 쓰면 안 보인다.** 흰 테두리에 흰 글자다 —
	   어두운 판(`--color-bg-inverse`) 안에서만 선다.
*/
.button--inverse {
	border-color: var(--color-border-on-brand);
	background: transparent;
	color: var(--color-text-invert);
}

.button--inverse:hover {
	border-color: var(--color-text-invert);
	background: transparent;
	color: var(--color-text-invert);
}

/* 크기 — 글자와 좌우 여백만 바꾼다. 세로 최소 높이는 그대로다 */
.button--sm {
	padding-inline: var(--space-4);
	font-size: var(--text-sm);
}

.button--lg {
	padding-inline: var(--space-8);
	font-size: var(--text-lg);
}

/* 아이콘이 든 단추 — 글자와 아이콘 사이 간격 */
.button__icon {
	flex: 0 0 auto;
}

.button:disabled,
.button--disabled {
	background: var(--color-disabled);
	border-color: transparent;
	color: var(--color-text-invert);
	cursor: not-allowed;
}

.button:disabled:hover,
.button--disabled:hover {
	background: var(--color-disabled);
}

/* ═══════════════════════════════════════════
   레이아웃 — G-80~83
   ═══════════════════════════════════════════ */

.container {
	width: 100%;
	max-width: var(--container-base);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

/* 섹션 사이 — 모바일 G-66 */
.section {
	padding-block: var(--space-12);
}

/* ═══════════════════════════════════════════
   유틸리티
   ═══════════════════════════════════════════ */

/*
	화면에서는 감추고 스크린리더에는 읽히게 한다.
	display: none 은 읽히지 않으므로 쓰지 않는다.

	옛 recipe 에 있던 음수 여백은 clip: rect() 시절의 잔재다.
	clip-path 를 쓰면 필요 없다.
*/
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 본문 바로가기 — 키보드 사용자가 메뉴를 건너뛴다. G-116 */
.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg);
	color: var(--color-text);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* ═══════════════════════════════════════════
   태블릿 이상 — G-86 (768px)
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {

	h1 {
		font-size: var(--text-5xl);
	}

	.container {
		padding-inline: var(--space-6);
	}

	/* 섹션 사이를 넓힌다 — G-68 */
	.section {
		padding-block: var(--space-24);
	}
}

/* ═══════════════════════════════════════════
   맨 위로 단추 — 3-85 회차 57

   `assets/js/back-to-top.js` 가 긴 화면에서만 만든다 (JS 없으면 없다 · 1-111).
   🔴 **부모의 중립 기본**이다 — 색·둥글기·그림자는 전부 토큰이라 자식이 제 값으로
      선다. 자리는 오른쪽 아래, 손가락 자리 44 (G-104).
   ⚠️ 화살표는 테두리 둘을 돌려 그린다 — 스크립트가 만드는 단추라 PHP 스프라이트
      (`sitebase_icon`)를 못 부르고, 아이콘 꾸러미를 새로 들이지도 않는다 (R-17).
   ⚠️ 층은 머리(자식 10)보다 아래인 5 — 머리와 겹칠 자리가 없고, 오버레이(50)에는 덮인다.
   ═══════════════════════════════════════════ */

.back-to-top {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--touch-target);
	height: var(--touch-target);
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-circle);
	background: var(--color-bg);
	box-shadow: var(--shadow);
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

/*
	🔴 **보호막** (회차 58 · `LS-023` 두 번째). 스크립트가 `hidden` 으로 만들고
	   표지가 나가면 걷는데, 위 `display: flex` 가 브라우저 기본
	   `[hidden] { display: none }` 을 이겨 **첫 화면부터 보였다**(실측: `hidden`
	   인데 `flex` · 44px). `.site-header__cta[hidden]` 과 같은 꼴로 친다 —
	   특이도 (0,2,0) 이라 위 줄을 이기고, `hidden` 이 아닐 때는 안 걸린다.
*/
.back-to-top[hidden] {
	display: none;
}

.back-to-top:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-invert);
}

/* 위 화살표 — 테두리 두 변을 45° 돌린 것 */
.back-to-top::before {
	width: 0.625rem;
	height: 0.625rem;
	margin-top: var(--space-1);
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
	content: "";
}

@media (min-width: 48rem) {

	.back-to-top {
		right: var(--space-6);
		bottom: var(--space-6);
	}
}

/* ═══════════════════════════════════════════
   움직임 최소화 선호 — 접근성

   전정기관 장애가 있는 사용자를 위해 운영체제 설정을 따른다.
   ═══════════════════════════════════════════ */

@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;
	}
}