/* ==========================================================================
   창귀전 archive.css — 서브페이지 전용 (창사 DB · 세계관 · 도감 · 갤러리)
   대문 index.html에는 연결하지 않는다. 대문 CSS와 완전 분리.

   설계 원칙
   - 창사 DB = site.css 신분증 2열(PC) / 1열(≤900px) 구조 유지. archive에서 카드·테이프 덮어쓰지 않음.
   - 세계관·도감·갤러리만 페이지별 톤 재작성. 대문(index)은 미연결.
   ========================================================================== */

:root {
  --cg-ink: #16110d;
  --cg-board: #1b1a1f;
  --cg-paper: #eceade;
  --cg-paper-dim: #d9d5c8;
  --cg-paper-text: #191c24;
  --cg-ochre: #cf9c42;
  --cg-navy: #131c28;
  --cg-jade: #9aa89b;
  --cg-seal: #b40000;
  --cg-seal-deep: #7a0000;
  --cg-seal-bright: #d01818;
  --cg-string: rgba(199, 30, 24, 0.55);
}

/* —— 접근성: 보이는 대제목 제거, 문서 구조용 h1 유지 —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* —— PC 좌우 여백 축소: 서브페이지만 콘텐츠 폭 확장 (nav 포함 동일 정렬) —— */
body:has(.archive-main) {
  --wrap: min(1380px, calc(100% - 56px));
  overflow-x: clip;
}

.archive-main {
  padding-top: clamp(44px, 5vw, 70px);
}

/* —— nav: 현재 페이지만 봉인 적색 —— */
.nav-links a[aria-current="page"] {
  color: var(--cg-seal-bright);
  text-decoration-color: var(--cg-seal-deep);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   좌측 고정 세로 제목 — 고서 표제처럼. 여백 있는 PC에서만, 모바일 숨김
   ========================================================================== */

@media (min-width: 1700px) {
  body:has(.archive-main)::before {
    content: "";
    position: fixed;
    top: calc(var(--nav-h) + 40px);
    /* 본문 좌측 여백의 정중앙 */
    left: calc((100vw - 1380px) / 4);
    z-index: 30;
    width: clamp(110px, calc((100vw - 1380px) / 2 - 64px), 190px);
    aspect-ratio: 1 / 4;
    background: url("제목.png") center top / contain no-repeat;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.75));
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* ==========================================================================
   페이지 전환 · 공통 연출
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 0.26s;
}

::view-transition-new(root) {
  animation-duration: 0.38s;
}

@keyframes cg-veil-lift {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

body:has(.archive-main)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(0, 0, 0, 0.55), #050403 78%);
  animation: cg-veil-lift 0.62s ease-out 0.04s both;
}

@keyframes cg-settle {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   창사 DB — site.css 신분증 2열 구조 복원
   (흰 서류철·명패·스탬프·테이프 덮어쓰기 전부 제거. 카드·테이프·테두리는 site.css)
   ========================================================================== */

.character-page-content {
  padding-bottom: 110px;
}

/* PC 2열 / 태블릿·모바일 1열 — 카드 글자 판독용 */
@media (max-width: 900px) {
  .character-page-content .identity-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   세계관 — 먹빛 문서. 연표·등급 내부 레이아웃 동결, 배경·용어 정리만 디자인
   ========================================================================== */

body:has(.world-page-content) {
  background-color: #0c0a08;
  background-image:
    radial-gradient(1100px 460px at 86% -6%, rgba(176, 135, 72, 0.09), transparent 62%),
    radial-gradient(860px 560px at -12% 34%, rgba(27, 40, 54, 0.5), transparent 58%),
    radial-gradient(520px 420px at 108% 78%, rgba(122, 0, 0, 0.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.011) 4px 5px),
    linear-gradient(180deg, #14100c, #0a0807 42%, #0d0b09);
  background-attachment: fixed;
}

.world-page-content {
  position: relative;
}

/* 섹션 제목: 한지 미색 먹글씨 + 은은한 글로우 */
.world-page-content .archive-section-head {
  border-bottom-color: rgba(231, 220, 195, 0.16);
}

.world-page-content .archive-section-head h2 {
  color: #e7dcc3;
  font-weight: 600;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.9),
    0 0 22px rgba(231, 220, 195, 0.22);
}

/* 연표 진입: 이동 없이 opacity만 */
@supports (animation-timeline: view()) {
  .world-page-content .world-chronicle-block {
    animation: cg-fade both ease;
    animation-timeline: view();
    animation-range: entry 0% entry 32%;
  }
}

/* —— 용어 정리: 밝은 종이 쪽지 · 붉은 용어 · 먹남색 본문 —— */
.world-page-content .world-glossary {
  gap: 24px 20px;
  padding-bottom: 22px;
  background: transparent;
}

.world-page-content .world-glossary-entry {
  position: relative;
  padding: 26px 24px 24px;
  background:
    radial-gradient(320px 130px at 78% 0%, rgba(255, 255, 252, 0.6), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(60, 66, 82, 0.05) 25px 26px),
    linear-gradient(172deg, #f3eee1, #e9e3d2 58%, #e0d9c5);
  border: 1px solid rgba(52, 44, 30, 0.5);
  border-top: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 16px 28px rgba(0, 0, 0, 0.55);
}

/* 쪽지마다 다른 기울임 — 리듬 */
.world-page-content .world-glossary-entry:nth-child(3n + 1) {
  transform: rotate(-0.5deg);
}

.world-page-content .world-glossary-entry:nth-child(3n + 2) {
  transform: rotate(0.45deg);
}

.world-page-content .world-glossary-entry:nth-child(3n) {
  transform: rotate(-0.25deg);
}

/* 쪽지 상단 절취 결 */
.world-page-content .world-glossary-entry::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -1px;
  right: -1px;
  height: 6px;
  background:
    linear-gradient(135deg, #f3eee1 5px, transparent 0) 0 0 / 12px 6px repeat-x,
    linear-gradient(225deg, #f3eee1 5px, transparent 0) 6px 0 / 12px 6px repeat-x;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* PC에서 홀짝 쪽지 높이 리듬 */
.world-page-content .world-glossary-entry:nth-child(even) {
  margin-top: 16px;
}

/* 용어 제목: 붉은색으로 시선 고정 */
.world-page-content .world-glossary-entry dt {
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: 0;
  color: #a80f0f;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.world-page-content .world-glossary-entry dt::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--cg-seal-deep), var(--cg-seal) 55%, transparent);
  border-radius: 0 2px 2px 0;
}

/* 본문: 진한 먹남색 */
.world-page-content .world-glossary-entry dd {
  color: #1d2430;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.78;
}

/* 일부 쪽지에만 유리테이프 */
.world-page-content .world-glossary-entry:nth-child(3n + 1)::after,
.world-page-content .world-glossary-entry:nth-child(6n + 4)::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 11%;
  width: 64px;
  height: 19px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.24) 58%, rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 1px dashed rgba(255, 255, 255, 0.3);
  border-right: 1px dashed rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transform: rotate(-3.2deg);
  pointer-events: none;
}

.world-page-content .world-glossary-entry:nth-child(6n + 4)::after {
  left: auto;
  right: 9%;
  width: 56px;
  height: 18px;
  transform: rotate(2.6deg);
}

/* 용어 섹션에만 직사각형 영문 스탬프 */
.world-page-content .archive-section:last-of-type {
  position: relative;
}

.world-page-content .archive-section:last-of-type::after {
  content: "SEALED";
  position: absolute;
  top: -6px;
  right: 8px;
  padding: 7px 16px;
  color: rgba(196, 30, 26, 0.66);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-shadow: 0 0 10px rgba(122, 0, 0, 0.45);
  border: 3px solid rgba(196, 30, 26, 0.56);
  border-radius: 2px;
  box-shadow:
    inset 0 0 10px rgba(122, 0, 0, 0.18),
    0 0 16px rgba(122, 0, 0, 0.22);
  transform: rotate(6deg);
  filter: blur(0.25px);
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  .world-page-content .world-glossary-entry {
    animation: cg-fade both ease;
    animation-timeline: view();
    animation-range: entry 0% entry 34%;
  }
}

/* ==========================================================================
   도감 — 심야 남색 증거철. 두 섹션의 폭·앵커를 다르게, 대치기록은 지그재그
   ========================================================================== */

body:has(.dex-page-content) {
  background-color: #0b1017;
  background-image:
    radial-gradient(1000px 420px at 80% -8%, rgba(27, 40, 54, 0.85), transparent 60%),
    radial-gradient(760px 500px at -10% 44%, rgba(122, 0, 0, 0.1), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(154, 168, 155, 0.014) 4px 5px),
    linear-gradient(180deg, #10161f, #0a0e14 46%, #0c1119);
  background-attachment: fixed;
}

.dex-page-content .archive-section {
  padding: 0;
  margin-bottom: clamp(64px, 8vw, 100px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dex-page-content .archive-section-head {
  margin-bottom: 26px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(154, 168, 155, 0.18);
}

/* 섹션 제목: 옥빛 회색 + 글로우 + 붉은 봉랍 점 */
.dex-page-content .archive-section-head h2 {
  position: relative;
  padding-left: 26px;
  color: #b9c7ba;
  font-weight: 600;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.85),
    0 0 20px rgba(154, 168, 155, 0.3);
}

.dex-page-content .archive-section-head h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 34% 30%, var(--cg-seal-bright), var(--cg-seal-deep) 72%);
  border-radius: 50% 46% 52% 48%;
  box-shadow: 0 0 9px rgba(180, 0, 0, 0.5);
  transform: translateY(-54%) rotate(14deg);
}

.dex-page-content .dex-grid {
  gap: clamp(18px, 2.4vw, 26px);
}

/* 증거 파일 카드 */
.dex-page-content .dex-card {
  position: relative;
  overflow: hidden;
  padding: 15px 15px 16px;
  background:
    radial-gradient(340px 150px at 80% 0%, rgba(154, 168, 155, 0.07), transparent 62%),
    linear-gradient(170deg, #1a2431, #121a24 52%, #10161f);
  border: 1px solid rgba(154, 168, 155, 0.22);
  border-top: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 30px rgba(0, 0, 0, 0.5);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

/* 상단 봉인 띠 */
.dex-page-content .dex-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: repeating-linear-gradient(
    -48deg,
    rgba(180, 0, 0, 0.78) 0 9px,
    rgba(38, 4, 4, 0.9) 9px 18px
  );
  opacity: 0.82;
}

/* 접힌 문서 모서리 */
.dex-page-content .dex-card::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent #0b1017 transparent transparent;
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.5));
  transition: border-width 0.2s ease;
}

.dex-page-content .dex-card h3 {
  margin: 12px 0 13px;
  color: #dfe6dd;
  font-weight: 600;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 0 14px rgba(223, 230, 221, 0.18);
}

.dex-page-content .dex-card img {
  border: 1px solid rgba(154, 168, 155, 0.16);
  background: #05070a;
}

.dex-page-content .dex-card:hover,
.dex-page-content .dex-card:focus-within {
  border-color: rgba(180, 0, 0, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 36px rgba(0, 0, 0, 0.62),
    0 0 22px rgba(122, 0, 0, 0.22);
}

.dex-page-content .dex-card:hover::after,
.dex-page-content .dex-card:focus-within::after {
  border-width: 0 30px 30px 0;
}

/* 현장 대치 기록: 1열 대형 — 좌/우 지그재그로 흐른다 */
.dex-page-content .archive-section:nth-of-type(2) .dex-grid {
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
}

.dex-page-content .archive-section:nth-of-type(2) .dex-card {
  width: min(1040px, 94%);
  padding: 18px 18px 20px;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(122, 0, 0, 0.12), transparent 62%),
    linear-gradient(170deg, #201823, #141019 52%, #100d15);
  border-color: rgba(176, 96, 96, 0.22);
}

.dex-page-content .archive-section:nth-of-type(2) .dex-card:nth-child(odd) {
  margin-right: auto;
}

.dex-page-content .archive-section:nth-of-type(2) .dex-card:nth-child(even) {
  margin-left: auto;
}

.dex-page-content .archive-section:nth-of-type(2) .dex-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--cg-seal-deep), rgba(122, 0, 0, 0.16) 70%, transparent);
  opacity: 1;
}

.dex-page-content .archive-section:nth-of-type(2) .dex-card h3 {
  font-size: 18px;
}

/* 섹션 헤더도 우측 앵커로 호응 */
.dex-page-content .archive-section:nth-of-type(2) .archive-section-head {
  width: min(1040px, 94%);
}

@supports (animation-timeline: view()) {
  .dex-page-content .dex-card {
    animation: cg-fade both ease;
    animation-timeline: view();
    animation-range: entry 0% entry 36%;
  }
}

/* ==========================================================================
   갤러리 — 뼈대·기능 유지. 필름 스트립 프레임 + 행 어긋남
   ========================================================================== */

body:has(.gallery-page-content) {
  background-color: #0d0b08;
  background-image:
    radial-gradient(1000px 420px at 76% -8%, rgba(207, 156, 66, 0.09), transparent 62%),
    radial-gradient(780px 540px at -10% 42%, rgba(27, 40, 54, 0.4), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.011) 4px 5px),
    linear-gradient(180deg, #13100b, #0a0907 44%, #0d0b09);
  background-attachment: fixed;
}

/* 섹션 제목: 황토 금빛 + 글로우 */
.gallery-page-content .archive-section-head {
  border-bottom-color: rgba(207, 156, 66, 0.24);
}

.gallery-page-content .archive-section-head h2 {
  color: #e3b45c;
  font-weight: 600;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.85),
    0 0 20px rgba(207, 156, 66, 0.3);
}

.gallery-page-content .code-group h3 {
  color: #e7d9be;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}

/* 출력 양식: 코드 가독성 */
.gallery-page-content .format-record p {
  color: #efe7d8;
  font-size: 15.5px;
  background: linear-gradient(168deg, #1b1712, #120f0b 60%);
  border: 1px solid rgba(207, 156, 66, 0.2);
}

.gallery-page-content .format-record b {
  color: #e3b45c;
  font-weight: 800;
}

.gallery-page-content .format-record code {
  color: #f0d28a;
  font-size: 0.95rem;
}

/* 코드표: 금빛 코드 + 미색 명칭 */
.gallery-page-content .code-table {
  gap: 10px;
}

.gallery-page-content .code-row {
  align-items: center;
  padding: 13px 15px;
  color: #ece4d5;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(168deg, #1b1712, #120f0b 62%);
  border: 1px solid rgba(207, 156, 66, 0.18);
  border-left: 3px solid rgba(207, 156, 66, 0.45);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gallery-page-content .code-row b {
  color: #f0c465;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(207, 156, 66, 0.35);
}

.gallery-page-content .code-row:hover {
  border-color: rgba(207, 156, 66, 0.5);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(207, 156, 66, 0.14);
}

/* 필터: 장부 톤 */
.gallery-page-content .gallery-filters label > span {
  color: #e7d9be;
}

.gallery-page-content .gallery-filters select {
  background: #17130d;
  border-color: rgba(207, 156, 66, 0.34);
}

.gallery-page-content .gallery-filters option {
  background: #17130d;
}

/* 갤러리 카드 = 필름 프레임: 위아래 스프로킷 구멍 */
.gallery-page-content .gallery-card {
  position: relative;
  padding: 14px 0;
  background: #0b0a08;
  border: 1px solid rgba(207, 156, 66, 0.2);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gallery-page-content .gallery-card::before,
.gallery-page-content .gallery-card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(236, 228, 213, 0.22) 0 9px,
    transparent 9px 23px
  );
  border-radius: 2px;
  pointer-events: none;
}

.gallery-page-content .gallery-card::before {
  top: 3px;
}

.gallery-page-content .gallery-card::after {
  top: auto;
  bottom: 3px;
}

.gallery-page-content .gallery-card > span {
  color: #ece4d5;
  font-size: 14.5px;
  font-weight: 600;
  background: linear-gradient(180deg, #1b1712, #120f0b);
}

.gallery-page-content .gallery-card strong {
  color: #f0c465;
  text-shadow: 0 0 10px rgba(207, 156, 66, 0.3);
}

.gallery-page-content .gallery-card small {
  color: #b7a888;
}

/* 가운데 열은 살짝 내려 필름 콜라주 리듬 */
@media (min-width: 900px) {
  .gallery-page-content .gallery-grid {
    row-gap: 26px;
  }

  .gallery-page-content .gallery-grid .gallery-card:nth-child(3n + 2) {
    transform: translateY(18px);
  }
}

.gallery-page-content .gallery-card:hover,
.gallery-page-content .gallery-card:focus-visible {
  border-color: rgba(207, 156, 66, 0.6);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(207, 156, 66, 0.18);
}

@supports (animation-timeline: view()) {
  .gallery-page-content .code-row,
  .gallery-page-content .gallery-card {
    animation: cg-fade both ease;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

/* ==========================================================================
   진입 스태거 (초기 로드) — 기울임 보존 위해 opacity만
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .character-page-content .identity-section,
  .dex-page-content .archive-section,
  .world-page-content .archive-section,
  .gallery-page-content .archive-section {
    animation: cg-fade 0.55s ease both;
  }

  .character-page-content .identity-section:nth-of-type(1) { animation-delay: 0.1s; }
  .character-page-content .identity-section:nth-of-type(2) { animation-delay: 0.18s; }
  .character-page-content .identity-section:nth-of-type(3) { animation-delay: 0.26s; }
  .character-page-content .identity-section:nth-of-type(4) { animation-delay: 0.34s; }
  .character-page-content .identity-section:nth-of-type(5) { animation-delay: 0.42s; }

  .dex-page-content .archive-section:nth-of-type(1),
  .world-page-content .archive-section:nth-of-type(1),
  .gallery-page-content .archive-section:nth-of-type(1) { animation-delay: 0.1s; }
  .dex-page-content .archive-section:nth-of-type(2),
  .world-page-content .archive-section:nth-of-type(2),
  .gallery-page-content .archive-section:nth-of-type(2) { animation-delay: 0.2s; }
  .world-page-content .archive-section:nth-of-type(3),
  .gallery-page-content .archive-section:nth-of-type(3) { animation-delay: 0.3s; }
  .gallery-page-content .archive-section:nth-of-type(4) { animation-delay: 0.4s; }
}

/* ==========================================================================
   반응형 — 장식 축소, 정보 열은 site.css 기존 규칙 유지
   ========================================================================== */

@media (max-width: 900px) {
  .world-page-content .world-glossary-entry:nth-child(even) {
    margin-top: 0;
  }

  .dex-page-content .archive-section:nth-of-type(2) .dex-card,
  .dex-page-content .archive-section:nth-of-type(2) .archive-section-head {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body:has(.archive-main) {
    --wrap: min(100% - 28px, 1460px);
  }

  .archive-main {
    padding-top: 36px;
  }

  .world-page-content .archive-section:last-of-type::after {
    font-size: 13px;
    padding: 5px 10px;
    letter-spacing: 0.18em;
    border-width: 2px;
  }

  .dex-page-content .dex-card::after {
    border-width: 0 16px 16px 0;
  }

  .gallery-page-content .gallery-grid .gallery-card:nth-child(3n + 2) {
    transform: none;
  }
}

/* ==========================================================================
   모션 감소 설정
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body:has(.archive-main)::after {
    animation-duration: 0.01s;
  }

  .character-page-content .identity-section,
  .dex-page-content .archive-section,
  .world-page-content .archive-section,
  .gallery-page-content .archive-section,
  .character-page-content .identity-card,
  .world-page-content .world-glossary-entry,
  .world-page-content .world-chronicle-block,
  .dex-page-content .dex-card,
  .gallery-page-content .code-row,
  .gallery-page-content .gallery-card {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}