/* 신문 앤틱 배경 질감 */
body {
  background-color: #120b05;
  background-image:
    radial-gradient(#2d1c0e 1.5px, transparent 1.5px),
    radial-gradient(#1e130a 1.5px, #120b05 1.5px);
  background-size: 24px 24px;
  color: #140c04;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

/* 바랜 양피지 신문 본문 시트 (텍스트 간섭을 줄여 선명도 극대화) */
.newsprint-sheet {
  max-width: 1330px;
  background-color: #f7f0df;
  background-image:
    radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(225, 207, 172, 0.4) 100%);
  box-shadow:
    0 0 0 1px rgba(60, 36, 14, 0.7),
    0 25px 65px rgba(0, 0, 0, 0.85),
    inset 0 0 90px rgba(84, 52, 20, 0.22);
}

/* 모든 텍스트의 획 선명도 보장 */
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input {
  text-rendering: optimizeLegibility;
}

/* 신문 특유의 이중 실선 구분선 */
.news-rule-double {
  border-top: 3px double #2b1a0d;
  border-bottom: 1px solid #2b1a0d;
}

/* 살아 숨쉬는 마법 사진 (Moving Portrait) */
@keyframes magicalGrainSepia {

  0%,
  100% {
    filter: grayscale(35%) sepia(40%) contrast(1.15) brightness(0.96);
  }

  50% {
    filter: grayscale(10%) sepia(20%) contrast(1.2) brightness(1.04);
  }
}

.magical-portrait {
  animation: magicalGrainSepia 6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.magical-portrait::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -80%;
  width: 260%;
  height: 260%;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 250, 220, 0.25) 50%, transparent 65%);
  animation: wandGleam 6.5s infinite linear;
  pointer-events: none;
}

@keyframes wandGleam {
  0% {
    transform: translateY(-40%) rotate(22deg);
  }

  100% {
    transform: translateY(40%) rotate(22deg);
  }
}

/* 고전 빅토리아 양식 붉은 드롭캡 */
.drop-cap::first-letter {
  float: left;
  font-family: 'Cinzel', serif;
  font-size: 3.4rem;
  line-height: 0.82;
  padding: 4px 8px 2px 0;
  color: #7f1d1d;
  font-weight: 900;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
}

/* 부엉이 속보 마키 텍스트 스크롤 */
@keyframes marqueeScroll {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeScroll 55s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* 발자국 걷는 애니메이션 */
@keyframes footstepWalk {

  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 2px #7a1717);
  }
}

.footstep-anim-1 {
  animation: footstepWalk 1.8s infinite 0s ease-in-out;
}

.footstep-anim-2 {
  animation: footstepWalk 1.8s infinite 0.45s ease-in-out;
}

.footstep-anim-3 {
  animation: footstepWalk 1.8s infinite 0.9s ease-in-out;
}

.footstep-anim-4 {
  animation: footstepWalk 1.8s infinite 1.35s ease-in-out;
}

/* 수정구슬 신비로운 발광 */
@keyframes crystalGlow {

  0%,
  100% {
    box-shadow: 0 0 25px rgba(122, 23, 23, 0.4), inset 0 0 20px rgba(255, 230, 160, 0.5);
  }

  50% {
    box-shadow: 0 0 45px rgba(180, 83, 9, 0.7), inset 0 0 35px rgba(255, 255, 255, 0.8);
  }
}

.crystal-ball {
  animation: crystalGlow 4s ease-in-out infinite;
}

/* 잉크 피어오르는 인트로 */
@keyframes inkBloom {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.incantation-bloom {
  animation: inkBloom 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 고속도로 타임라인 트랙 구분선 */
.highway-timeline-track::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #7a1717;
}

/* 루모스 호버 & 달력 이펙트 */
.lumos-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lumos-hover:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.55), inset 0 0 8px rgba(245, 158, 11, 0.3);
  border-color: #7f1d1d;
}

@keyframes lumosGlowPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), inset 0 0 15px rgba(251, 191, 36, 0.2);
  }

  50% {
    box-shadow: 0 0 35px rgba(251, 191, 36, 0.75), inset 0 0 25px rgba(251, 191, 36, 0.4);
  }
}

.lumos-active-box {
  animation: lumosGlowPulse 2.8s infinite ease-in-out;
}

/* 루모스 시전 인터랙션 & 암전/섬광 애니메이션 */
@keyframes lumosScreenFlash {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.98;
    background: radial-gradient(circle at center, #ffffff 15%, #fef3c7 45%, #f59e0b 80%, rgba(180, 83, 9, 0.9) 100%);
  }

  100% {
    opacity: 0;
    background: transparent;
  }
}

.lumos-flash-active {
  animation: lumosScreenFlash 0.85s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes wandCorePulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), 0 0 45px rgba(217, 119, 6, 0.35);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.95), 0 0 75px rgba(245, 158, 11, 0.6);
  }
}

.wand-core-glow {
  animation: wandCorePulse 2.2s infinite ease-in-out;
}

@keyframes letterInkEmerge {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.letter-ink-emerge {
  animation: letterInkEmerge 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lumos-card-lit {
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.35), 0 10px 30px rgba(20, 12, 4, 0.8) !important;
  border-color: #854d0e !important;
  transition: all 0.6s ease;
}

/* ============================================================ */
/* 🧩 예언자 일보 가로세로 낱말퍼즐 (Crossword Puzzle) 스타일 */
/* ============================================================ */
.cw-board {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  grid-template-rows: repeat(5, 36px);
  gap: 3px;
  justify-content: center;
  background-color: #d8c7a6;
  padding: 10px;
  border: 2px solid #2b1a0d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18), 3px 3px 0 #2b1a0d;
}

@media (min-width: 640px) {
  .cw-board {
    grid-template-columns: repeat(7, 45px);
    grid-template-rows: repeat(5, 45px);
    gap: 4px;
    padding: 14px;
  }
}

.cw-cell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 글자 입력 칸 */
.cw-cell-active {
  background-color: #ffffff;
  border: 1.5px solid #2b1a0d;
  box-shadow: 1px 1px 0 rgba(43, 26, 13, 0.25);
  transition: border-color 0.15s, background-color 0.15s;
}

.cw-cell-active:hover {
  background-color: #fffef5;
}

.cw-cell-active:focus-within {
  border-color: #8c1d1d;
  box-shadow: 0 0 0 2px rgba(140, 29, 29, 0.4);
  background-color: #fffef2;
}

/* 정답 완료 시 초록/골드 틴트 */
.cw-cell-correct {
  background-color: #e8f5e9 !important;
  border-color: #2e7d32 !important;
}

.cw-cell-correct input {
  color: #1b5e20 !important;
}

/* 막힌 칸 (빈 공간 앤틱 빗살 패턴) */
.cw-cell-block {
  background-color: #2b1a0d;
  background-image: repeating-linear-gradient(45deg,
      #2b1a0d,
      #2b1a0d 3px,
      #1d1209 3px,
      #1d1209 6px);
  border: 1.5px solid #2b1a0d;
  opacity: 0.88;
}

/* 좌상단 번호 표기 */
.cw-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-family: 'Cinzel', 'Noto Serif KR', serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #8c1d1d;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* 개별 글자 입력창 */
.cw-input-letter {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  font-size: 15px;
  font-weight: 800;
  color: #140c04;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  caret-color: #8c1d1d;
}

@media (min-width: 640px) {
  .cw-input-letter {
    font-size: 17px;
  }
}

/* 열쇠 목록 카드 스타일 */
.cw-clue-card {
  transition: all 0.15s ease;
  cursor: pointer;
}

.cw-clue-card:hover {
  background-color: #faeed4;
  border-color: #8c1d1d;
}
/* ------------------------------------------------------------- */
/* 펜시브 기억 저장소                                              */
/* ------------------------------------------------------------- */
.memory-vial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 8px 12px;
  background: rgba(247, 241, 227, 0.08);
  border: 1px solid rgba(253, 230, 138, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.memory-vial:hover,
.memory-vial.is-active {
  background: rgba(226, 232, 240, 0.2);
  border-color: #fde68a;
  box-shadow: 0 0 12px rgba(226, 232, 240, 0.6);
  transform: translateY(-3px);
}
.memory-vial .vial-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.85));
}
.memory-vial .vial-label {
  font-family: "Noto Serif KR", serif;
  font-size: 13px;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.pensieve-basin {
  min-height: 220px;
  background: radial-gradient(ellipse at center, #64748b 0%, #334155 45%, #1e1b16 100%);
  box-shadow: inset 0 0 30px rgba(226, 232, 240, 0.35);
}
.pensieve-basin.is-swirling {
  animation: pensieveSwirl 0.9s ease;
}
@keyframes pensieveSwirl {
  0% { filter: blur(0) brightness(1); }
  40% { filter: blur(3px) brightness(1.6); }
  100% { filter: blur(0) brightness(1); }
}

.patronus-form {
  display: inline-block;
  filter: grayscale(100%) brightness(1.25) sepia(100%) hue-rotate(165deg) saturate(380%) drop-shadow(0 0 12px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 25px rgba(147, 197, 253, 0.6));
  transition: filter 0.6s ease, transform 0.6s ease;
  animation: patronusHover 3s ease-in-out infinite alternate;
}
@keyframes patronusHover {
  0% {
    filter: grayscale(100%) brightness(1.2) sepia(100%) hue-rotate(165deg) saturate(350%) drop-shadow(0 0 10px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 22px rgba(147, 197, 253, 0.5));
    transform: translateY(0);
  }
  100% {
    filter: grayscale(100%) brightness(1.4) sepia(100%) hue-rotate(168deg) saturate(420%) drop-shadow(0 0 18px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 32px rgba(186, 230, 253, 0.75));
    transform: translateY(-5px);
  }
}
.patronus-memory {
  transition: opacity 0.5s ease;
}
.patronus-casting .patronus-form {
  filter: grayscale(100%) brightness(1.9) sepia(100%) hue-rotate(165deg) saturate(500%) drop-shadow(0 0 25px #38bdf8) drop-shadow(0 0 50px #93c5fd) drop-shadow(0 0 75px #bae6fd) !important;
  transform: scale(1.15) translateY(-8px) !important;
  animation: none;
}
.patronus-casting .patronus-card {
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.8), 0 0 45px rgba(191, 219, 254, 0.6);
}

/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* 소망의 거울 (The Mirror of Erised)                            */
/* ------------------------------------------------------------- */
.erised-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.erised-mirror {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px 10px;
  background: linear-gradient(135deg, #d4af37 0%, #aa771c 18%, #fbf5b7 38%, #c59b27 60%, #7c4a03 85%, #d4af37 100%);
  border: 3.5px solid #1a0f05;
  border-radius: 140px 140px 6px 6px;
  box-shadow: 
    0 8px 24px rgba(43, 26, 13, 0.28),
    4px 4px 0 #2b1a0d,
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.erised-mirror:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 28px rgba(180, 130, 40, 0.45),
    4px 4px 0 #2b1a0d,
    inset 0 2px 4px rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(0, 0, 0, 0.45);
}

.erised-mirror:active {
  transform: translateY(0);
}

/* Award Plaque Styling - realistic 3D plaque */
.award-plaque {
  background: linear-gradient(135deg, #f5e6c4 0%, #e0cba8 40%, #d4b98f 70%, #c5a57a 100%);
  border: 4px solid #bfa052;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), 0 8px 12px rgba(0,0,0,0.4);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.award-plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 4px, transparent 4px, transparent 8px);
  pointer-events: none;
}
.award-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* 상단 고딕 첨탑 장식 */
.erised-arch-crown {
  width: 32px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
  margin-bottom: 2px;
}

.erised-crown-gem {
  color: #fef08a;
  font-size: 15px;
  text-shadow: 0 0 6px #d4af37, 0 1px 2px #000;
}

/* 상단 황금 명문 리본 패널 (I show not your face but your heart's desire) */
.erised-inscription-banner {
  width: 94%;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: radial-gradient(ellipse at center, #241407 0%, #120902 100%);
  border: 1.5px solid #d4af37;
  border-radius: 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(255, 255, 255, 0.25);
}

.erised-inscription {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fef08a;
  text-shadow: 0 0 8px rgba(254, 240, 138, 0.7), 0 1px 2px #000;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .erised-inscription {
    font-size: 12px;
  }
}

/* 거울 유리 래퍼 및 내부 몰딩 프레임 */
.erised-glass-wrapper {
  width: 100%;
  position: relative;
  border-radius: 112px 112px 4px 4px;
  padding: 4px;
  background: linear-gradient(180deg, #593508, #2a1708);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(255, 255, 255, 0.3);
}

.erised-glass {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 255px;
  align-items: center;
  justify-content: center;
  border-radius: 108px 108px 2px 2px;
  overflow: hidden;
  background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 20%, #f1f5f9 45%, #94a3b8 70%, #64748b 100%);
  border: 2px solid #1a0f05;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45);
}

/* 거울 표면 반사광 오버레이 (대각선 하이라이트) */
.erised-glass-sheen {
  position: absolute;
  inset: -60% -60%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 47%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.2) 53%, transparent 60%);
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.erised-mirror:hover .erised-glass-sheen {
  transform: translate(25%, 25%);
}

/* 기본 상태: 거울 표면 힌트 */
.erised-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  z-index: 2;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.erised-hint-icon {
  font-size: 34px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
  animation: erisedFloat 3.2s ease-in-out infinite;
}

@keyframes erisedFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.erised-hint-title {
  font-family: "Noto Serif KR", serif;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .erised-hint-title {
    font-size: 17.5px;
  }
}

.erised-hint-sub {
  font-family: "Noto Serif KR", serif;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  background: rgba(255, 255, 255, 0.78);
  padding: 3.5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 소망 공개 상태 */
.erised-wish {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px 14px;
  background: radial-gradient(circle at 50% 25%, rgba(255, 253, 245, 0.98) 0%, rgba(247, 237, 215, 0.98) 100%);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 25px rgba(180, 130, 60, 0.25);
  text-align: left;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.erised-mirror.is-revealed .erised-wish {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.erised-mirror.is-revealed .erised-hint {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.erised-wish-header {
  text-align: center;
  border-bottom: 1.5px solid rgba(180, 83, 9, 0.3);
  padding-bottom: 7px;
  margin-bottom: 6px;
}

.erised-wish-badge {
  display: inline-block;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.1em;
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(217, 119, 6, 0.35);
  padding: 1.5px 8px;
  border-radius: 3px;
  margin-bottom: 3px;
}

.erised-wish-title {
  display: block;
  font-family: "Noto Serif KR", serif;
  font-size: 16px;
  font-weight: 900;
  color: #7f1d1d;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .erised-wish-title {
    font-size: 17px;
  }
}

.erised-wish-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Noto Serif KR", serif;
  font-size: 14px;
  color: #1e1309;
  line-height: 1.55;
  font-weight: 500;
}

@media (min-width: 640px) {
  .erised-wish-list {
    font-size: 14.5px;
  }
}

.erised-wish-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.erised-bullet {
  color: #d97706;
  font-size: 13px;
  line-height: 1.55;
  flex-shrink: 0;
}

.erised-wish-footer {
  text-align: center;
  font-family: "Noto Serif KR", serif;
  font-size: 11.5px;
  color: #78350f;
  opacity: 0.85;
  font-weight: 600;
  padding-top: 6px;
}

/* 하단 앤틱 황금 명판 */
.erised-plaque {
  margin-top: 10px;
  padding: 5px 16px;
  background: linear-gradient(180deg, #fef08a 0%, #d4af37 25%, #aa771c 75%, #78350f 100%);
  border: 2px solid #1a0f05;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.erised-name {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 800;
  color: #1a0f05;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
  .erised-name {
    font-size: 14px;
  }
}

/* 고딕 받침대 발 */
.erised-pedestal {
  width: 75%;
  height: 8px;
  background: linear-gradient(180deg, #85531d 0%, #3e2107 100%);
  border: 2px solid #1a0f05;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
  margin-top: -1px;
}

/* 펜시브 선반 탭과 병 아이콘 */
.pensieve-tab {
  padding: 5px 13px;
  font-family: "Noto Serif KR", serif;
  font-size: 13px;
  font-weight: 700;
  color: #fde68a;
  background: transparent;
  border: 1px solid rgba(253, 230, 138, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.pensieve-tab:hover {
  background: rgba(253, 230, 138, 0.15);
  transform: translateY(-1px);
}
.pensieve-tab.is-active {
  background: #fde68a;
  color: #2b1a0d;
  box-shadow: 0 0 8px rgba(253, 230, 138, 0.4);
}
.memory-vial .vial-glass { position: relative; }
.memory-vial .vial-icon {
  position: absolute;
  right: -12px;
  top: -8px;
  font-size: 0.95rem;
  filter: none;
}

/* -------------------------------------------------------------
 * 플레이리스트 레코드판(CD) 회전 및 음원 비주얼라이저 애니메이션
 * ------------------------------------------------------------- */
@keyframes spinRecord {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-disc {
  animation: spinRecord 3s linear infinite;
  transform-origin: center center;
}

.spin-disc-paused {
  animation-play-state: paused !important;
}

@keyframes visualizerBar {
  0%, 100% {
    height: 3px;
  }
  50% {
    height: 14px;
  }
}

.visualizer-bar-1 {
  display: inline-block;
  animation: visualizerBar 0.7s ease-in-out infinite;
}

.visualizer-bar-2 {
  display: inline-block;
  animation: visualizerBar 0.5s ease-in-out infinite 0.15s;
}

.visualizer-bar-3 {
  display: inline-block;
  animation: visualizerBar 0.85s ease-in-out infinite 0.3s;
}

/* ===================================================== */
/* 📜 마법 결투 클럽 조약문 & 수기 서명 스타일 */
/* ===================================================== */
.font-signature {
  font-family: 'Caveat', cursive;
}

.font-korean-signature {
  font-family: 'Nanum Pen Script', cursive;
}

.treaty-scroll-border {
  border: 3px double #2b1a0d;
  background-color: #f7edd7;
  background-image: 
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(240, 222, 185, 0.3) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(160, 120, 60, 0.04) 2px, rgba(160, 120, 60, 0.04) 4px);
}

.wax-seal-badge {
  background: radial-gradient(circle at 35% 35%, #b91c1c 0%, #881337 55%, #4c0519 100%);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6);
  border: 2px dashed rgba(253, 224, 71, 0.6);
}

.treaty-article-card {
  transition: all 0.25s ease;
}

.treaty-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(43, 26, 13, 0.15);
}

/* ============================================================ */
/* ⛓️ 현상수배(WANTED) 예언자 일보 신문 배경 및 아즈카반 스타일 */
/* ============================================================ */
.wanted-newspaper-bg {
  position: relative;
  background-color: #dfcb9f;
  background-image: 
    linear-gradient(rgba(247, 238, 220, 0.35), rgba(225, 203, 165, 0.45)),
    url('../../images/메인페이지/wanted_prophet_bg.jpg');
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
  box-shadow: 
    0 0 0 2px #2b1a0d,
    4px 4px 0 #2b1a0d,
    inset 0 0 60px rgba(43, 26, 13, 0.4);
  overflow: hidden;
}

.wanted-newspaper-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(43, 26, 13, 0.3) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(40, 25, 10, 0.025) 3px, rgba(40, 25, 10, 0.025) 6px);
  pointer-events: none;
  z-index: 1;
}

.wanted-newspaper-bg > * {
  position: relative;
  z-index: 2;
}

.wanted-prisoner-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wanted-prisoner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(43, 26, 13, 0.25);
}


/* 폰 화면: 코너 제목 옆 배지가 제목을 좁게 밀어내지 않도록 배지를 제목 아래 줄로 내림 */
@media (max-width: 639px) {
  section > .flex.justify-between.border-b-2 {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  section > .flex.justify-between.border-b-2 > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
}