/* ==========================================================================
   오라클마크 (OracleMark) — 멀티 스킨 아키텍처 (5종 마스터 스킨)
   1. body[data-skin='aether']      : 에테르 모놀리스 (설산 야경 · 발광 화이트 모놀리스 · 초신성 입자 — 기본)
   2. body[data-skin='plexus']      : 실버 플렉서스 (은회색 안개 궤도 · 3D 폴리곤 메쉬 · 황금 백열광)
   3. body[data-skin='sanctum']     : 아스트랄 성소 (3단 삼면화 대성당 아치 제단 · 양피지 필사본)
   4. body[data-skin='nightmarket'] : 홍등 야시장 (새벽 3시 젖은 돌바닥 · 네온 좌우 역전 쇼케이스)
   5. body[data-skin='woodblock']   : 비장각 판각소 (고판화 목판 인쇄소 · 쌍선 변란 · 천원지방)
   ========================================================================== */

/* 3D 인터랙티브 배경 캔버스 (aether / plexus 전용) */
.aether-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: none;
}

body[data-skin='aether'] .aether-canvas,
body[data-skin='plexus'] .aether-canvas,
body[data-skin='chrono'] .aether-canvas,
body[data-skin='abyss'] .aether-canvas,
body[data-skin='ouroboros'] .aether-canvas {
  display: block;
}

body[data-skin='aether'] .paper-grain-overlay,
body[data-skin='plexus'] .paper-grain-overlay,
body[data-skin='chrono'] .paper-grain-overlay,
body[data-skin='abyss'] .paper-grain-overlay,
body[data-skin='ouroboros'] .paper-grain-overlay,
body[data-skin='aether']::before,
body[data-skin='plexus']::before,
body[data-skin='chrono']::before,
body[data-skin='abyss']::before,
body[data-skin='ouroboros']::before {
  display: none !important;
}

/* 상단 마스터 스킨 전환 컨트롤 바 */
.skin-switcher-bar {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-strong);
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}

.skin-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.73rem;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.skin-btn:hover {
  color: var(--text);
}

.skin-btn.is-active {
  background: var(--accent);
  color: #090b10;
  font-weight: 800;
}

body:not([data-skin='woodblock']) .edition-switch-wrap {
  display: none !important;
}


/* ==========================================================================
   SKIN 1 (DEFAULT): AETHER MONOLITH — 「에테르 모놀리스 · 설산과 초신성 빛의 관문」
   레퍼런스:
   - Image 1: 밤하늘 설산 위 공중 부양하는 순백 발광 모놀리스 카드 (INFINITE White Halo)
   - Image 4: 중심에서 뻗어나가는 황금·시안 워프 빛 파편 (Singularity Burst)
   - Image 5 & Opal: 동심원 궤도 + 3D 플렉서스 링 + 발광 캡슐 지표
   ========================================================================== */
body[data-skin='aether'] {
  --bg1: #040811;
  --bg2: #0b1628;
  --surface: rgba(10, 18, 32, 0.58);
  --surface-raised: rgba(18, 30, 52, 0.72);
  --surface-inset: rgba(5, 10, 18, 0.68);
  --text: #f4f8ff;
  --muted: rgba(210, 226, 248, 0.66);
  --accent: #ffcf78;        /* 초신성 앰버 골드 (Incandescent Amber) */
  --accent2: #7ce8ff;       /* 성운 아이스 시안 (Nebula Ice Cyan) */
  --seal-ink: #ffffff;
  --seal-text: #060b14;
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-fine: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.14);
  --ink-shadow: rgba(0, 0, 0, 0.65);
  --header-bg: rgba(8, 14, 24, 0.68);
  --header-border: rgba(255, 255, 255, 0.16);
  --wheel-plate: rgba(7, 13, 23, 0.55);
  --wheel-core-inner: rgba(255, 200, 110, 0.22);
  --wheel-core-outer: rgba(6, 12, 22, 0.85);
  --maxw: 1240px;

  background:
    radial-gradient(ellipse 75% 55% at 50% 38%, rgba(255, 175, 80, 0.14), transparent 65%),
    radial-gradient(ellipse 60% 45% at 50% 15%, rgba(90, 165, 255, 0.16), transparent 65%),
    linear-gradient(180deg, #040812 0%, #0d1b30 48%, #070d17 75%, #04060b 100%) fixed;
}

body[data-skin='aether'] .colophon-strip {
  display: none;
}

/* 플로팅 아일랜드 캡슐 헤더 (IMAGINATION 레퍼런스 스타일) */
body[data-skin='aether'] .site-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 14px;
}

body[data-skin='aether'] .header-in {
  background: rgba(8, 14, 26, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 18px;
  height: 54px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-skin='aether'] .logo-seal {
  border-radius: 50%;
  background: #ffffff;
  color: #050a14;
  border: 0;
  outline: 0;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
}

body[data-skin='aether'] .site-header nav {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

body[data-skin='aether'] .skin-switcher-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  padding: 3px;
}

body[data-skin='aether'] .skin-btn {
  border-radius: 999px;
}

body[data-skin='aether'] .skin-btn.is-active {
  background: #ffffff;
  color: #050a14;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.75);
}

/* 에테르 히어로: 중앙 집중형 시네마틱 타이포그래피 + 공중 부양 모놀리스 슬랩 */
body[data-skin='aether'] .hero {
  grid-template-columns: 1fr;
  text-align: center;
  padding-block: clamp(32px, 6vw, 68px) 24px;
  gap: 28px;
}

body[data-skin='aether'] .hero-folio {
  background: transparent;
  border: 0;
  box-shadow: none;
  grid-template-columns: 1fr;
}

body[data-skin='aether'] .hero-folio::before,
body[data-skin='aether'] .hero-marginalia,
body[data-skin='aether'] .hero-specs {
  display: none;
}

body[data-skin='aether'] .hero-text {
  align-items: center;
  padding: 0;
}

body[data-skin='aether'] .archive-stamp-row {
  justify-content: center;
}

body[data-skin='aether'] .eyebrow {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 16px;
  color: #e2eeff;
  letter-spacing: 0.18em;
}

body[data-skin='aether'] .stamp-pill {
  display: none;
}

body[data-skin='aether'] .hero h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.8vw, 4.1rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}

body[data-skin='aether'] .hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
  border-bottom: 0;
  text-shadow: 0 0 28px rgba(255, 210, 130, 0.9), 0 0 60px rgba(124, 232, 255, 0.5);
}

body[data-skin='aether'] .hero .lead {
  max-width: 620px;
  margin-inline: auto;
  color: rgba(220, 234, 255, 0.76);
  font-size: 1.02rem;
}

body[data-skin='aether'] .hero-actions {
  justify-content: center;
}

body[data-skin='aether'] .hero-fan-frame {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body[data-skin='aether'] .hero-fan-frame::before,
body[data-skin='aether'] .fan-frame-head {
  display: none;
}

body[data-skin='aether'] .hero-fan {
  height: clamp(230px, 32vw, 310px);
}

body[data-skin='aether'] .fan-card {
  --crystal-base: url('/assets/crystal-gold.png?v=6');
  --crystal-glow: rgba(245, 190, 70, 0.34);
  padding: 10px 9px;
  border-radius: 24px;
  background: var(--crystal-base) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 20px 36px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 24px var(--crystal-glow));
}

body[data-skin='aether'] .fan-card[data-crystal='blue'] {
  --crystal-base: url('/assets/crystal-blue.png?v=6');
  --crystal-glow: rgba(65, 145, 255, 0.36);
}

body[data-skin='aether'] .fan-card[data-crystal='green'] {
  --crystal-base: url('/assets/crystal-green.png?v=6');
  --crystal-glow: rgba(45, 210, 105, 0.34);
}

body[data-skin='aether'] .fan-card[data-crystal='amethyst'] {
  --crystal-base: url('/assets/crystal-amethyst.png?v=6');
  --crystal-glow: rgba(168, 95, 245, 0.36);
}

body[data-skin='aether'] .fan-card svg {
  border-radius: 12px;
  opacity: 0.92;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%);
  mask-composite: intersect;
}

/* 섹션 타이틀 가독성 보호 (배경 3D 오브제 빛 간섭 완벽 차단) */
body[data-skin='aether'] .sec-header {
  position: relative;
  z-index: 2;
}

body[data-skin='aether'] .sec-kicker {
  background: rgba(5, 10, 20, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(255, 207, 120, 0.35);
  padding: 4px 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

body[data-skin='aether'] .sec-title {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.98),
    0 0 36px rgba(4, 8, 18, 0.95),
    0 0 64px rgba(4, 8, 18, 0.9);
}

body[data-skin='aether'] .sec-lead {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.98),
    0 0 28px rgba(4, 8, 18, 0.92);
}

/* ── AETHER 카드 공통: 미세 스페큘러 보더 & 무중력 다크 슬랩 ── */
body[data-skin='aether'] .card {
  background: rgba(9, 16, 28, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body[data-skin='aether'] .card::before {
  display: none;
}

body[data-skin='aether'] .folio-bar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body[data-skin='aether'] .step {
  border-radius: 50%;
  background: #ffffff;
  color: #050a14;
  border: 0;
  outline: 0;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
  font-family: var(--mono);
}

/* ── 부적 바탕색에 따라 4색 3D 원석(황금 호박 · 사파이어 블루 · 비취 그린 · 자수정 퍼플)이 자동 매칭되는 .talisman-mount ── */
body[data-skin='aether'] .talisman-frame {
  perspective: 1100px;
  padding: 16px 0 16px;
}

body[data-skin='aether'] .talisman-mount {
  --crystal-base: url('/assets/crystal-gold.png?v=6');
  --crystal-gloss: url('/assets/crystal-gold-gloss.png?v=6');
  --crystal-glow: rgba(245, 190, 70, 0.32);
  position: relative;
  width: min(100%, 415px);
  aspect-ratio: 542 / 974;
  padding: 0;
  border-radius: 0;
  background: var(--crystal-base) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 28px 48px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 36px var(--crystal-glow));
  overflow: visible;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease, background-image 0.25s ease;
}

body[data-skin='aether'] .talisman-mount[data-crystal='gold'] {
  --crystal-base: url('/assets/crystal-gold.png?v=6');
  --crystal-gloss: url('/assets/crystal-gold-gloss.png?v=6');
  --crystal-glow: rgba(245, 190, 70, 0.34);
}

body[data-skin='aether'] .talisman-mount[data-crystal='blue'] {
  --crystal-base: url('/assets/crystal-blue.png?v=6');
  --crystal-gloss: url('/assets/crystal-blue-gloss.png?v=6');
  --crystal-glow: rgba(65, 145, 255, 0.36);
}

body[data-skin='aether'] .talisman-mount[data-crystal='green'] {
  --crystal-base: url('/assets/crystal-green.png?v=6');
  --crystal-gloss: url('/assets/crystal-green-gloss.png?v=6');
  --crystal-glow: rgba(45, 210, 105, 0.34);
}

body[data-skin='aether'] .talisman-mount[data-crystal='amethyst'] {
  --crystal-base: url('/assets/crystal-amethyst.png?v=6');
  --crystal-gloss: url('/assets/crystal-amethyst-gloss.png?v=6');
  --crystal-glow: rgba(165, 90, 245, 0.36);
}

/* 2층(중간 매립층): 자수정 보석 내부 평면에 맞춰 정면 매립되고, 가장자리가 보석 베벨 속으로 부드럽게 녹아드는 부적 */
body[data-skin='aether'] .talisman {
  position: absolute;
  left: 6.4%;
  width: 87.2%;
  top: 4.3%;
  height: 91.4%;
  aspect-ratio: auto;
  z-index: 2;
  border-radius: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transform-origin: 50% 50%;
  opacity: 0.93;
  filter: saturate(0.95) contrast(1.02) brightness(0.98);
  /* 4면 가장자리가 자수정의 둥근 곡면 베벨 안쪽으로 자연스럽게 스며들도록 다단계 소프트 마스크 적용 */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 2%,
      rgba(0, 0, 0, 0.58) 4.8%,
      rgba(0, 0, 0, 0.9) 7.8%,
      #000 11%,
      #000 89%,
      rgba(0, 0, 0, 0.9) 92.2%,
      rgba(0, 0, 0, 0.58) 95.2%,
      rgba(0, 0, 0, 0.18) 98%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 1.5%,
      rgba(0, 0, 0, 0.58) 3.5%,
      rgba(0, 0, 0, 0.9) 5.8%,
      #000 8.5%,
      #000 91.5%,
      rgba(0, 0, 0, 0.9) 94.2%,
      rgba(0, 0, 0, 0.58) 96.5%,
      rgba(0, 0, 0, 0.18) 98.5%,
      transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 2%,
      rgba(0, 0, 0, 0.58) 4.8%,
      rgba(0, 0, 0, 0.9) 7.8%,
      #000 11%,
      #000 89%,
      rgba(0, 0, 0, 0.9) 92.2%,
      rgba(0, 0, 0, 0.58) 95.2%,
      rgba(0, 0, 0, 0.18) 98%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 1.5%,
      rgba(0, 0, 0, 0.58) 3.5%,
      rgba(0, 0, 0, 0.9) 5.8%,
      #000 8.5%,
      #000 91.5%,
      rgba(0, 0, 0, 0.9) 94.2%,
      rgba(0, 0, 0, 0.58) 96.5%,
      rgba(0, 0, 0, 0.18) 98.5%,
      transparent 100%);
  mask-composite: intersect;
}

body[data-skin='aether'] .talisman-mount::before {
  display: none;
}

/* 3층(최상단 원석 유리 굴절 & 스페큘러 하이라이트 코팅층):
   선택된 원석(gold/blue/green/amethyst)의 곡면 하이라이트 광택(var(--crystal-gloss))을
   부적 위에 덧씌워, 부적이 해당 색상의 수정 유리막 아래에 실제로 봉인된 입체감을 완성 */
body[data-skin='aether'] .talisman-mount::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--crystal-gloss) center / 100% 100% no-repeat;
  opacity: 0.95;
  pointer-events: none;
  z-index: 4;
}

body[data-skin='aether'] .talisman::before,
body[data-skin='aether'] .talisman::after {
  display: none;
}

/* ── IMAGE 5 핵심 재현: 동심원 궤도 + 황금 백열광 나침반 ── */
body[data-skin='aether'] .luopan-plate {
  background: radial-gradient(circle at 65% 65%, rgba(255, 190, 90, 0.16), rgba(8, 14, 26, 0.4) 65%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  aspect-ratio: 1;
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.03),
    0 0 0 13px rgba(255, 255, 255, 0.08),
    0 0 70px rgba(255, 185, 90, 0.18);
}

body[data-skin='aether'] .corner-trig {
  display: none;
}

body[data-skin='aether'] .sec-c.on path,
body[data-skin='aether'] .sec-f.on path {
  fill: #ffdfa0;
  stroke: #ffffff;
  stroke-width: 2;
  filter: drop-shadow(0 0 14px rgba(255, 200, 100, 0.9));
}

body[data-skin='aether'] .sec-c.on .s-name,
body[data-skin='aether'] .sec-c.on .s-sub,
body[data-skin='aether'] .sec-f.on .f-ico,
body[data-skin='aether'] .sec-f.on .f-name {
  fill: #080d18 !important;
}

/* ── OPAL 레퍼런스 스타일: 발광 캡슐 버튼 · 입력창 · 사주 알약 지표 ── */
body[data-skin='aether'] .btn {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--sans);
  box-shadow: none;
}

body[data-skin='aether'] .btn-primary {
  background: #ffffff;
  color: #060b14;
  border-color: #ffffff;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 200, 110, 0.35);
}

body[data-skin='aether'] .btn-primary:hover {
  background: #ffefd0;
  color: #060b14;
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.95), 0 0 80px rgba(255, 200, 110, 0.6);
}

body[data-skin='aether'] .btn-seal-mark {
  border-radius: 50%;
}

body[data-skin='aether'] select,
body[data-skin='aether'] input[type='text'],
body[data-skin='aether'] input[type='time'] {
  border-radius: 14px;
  background: rgba(4, 9, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

body[data-skin='aether'] .seg {
  border-radius: 999px;
  padding: 4px;
}

body[data-skin='aether'] .seg input[type='radio'] + span {
  border-radius: 999px;
  font-family: var(--sans);
}

body[data-skin='aether'] .seg input[type='radio']:checked + span {
  background: #ffffff;
  color: #060b14;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.65);
}

body[data-skin='aether'] .pillars {
  border: 0;
  background: transparent;
  gap: 10px;
}

body[data-skin='aether'] .pil {
  border: 1.5px solid rgba(124, 232, 255, 0.38);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 16, 28, 0.65);
  box-shadow: 0 0 20px rgba(124, 232, 255, 0.12);
}

body[data-skin='aether'] .pil.me {
  border-color: #ffcf78;
  box-shadow: 0 0 24px rgba(255, 207, 120, 0.28);
}

body[data-skin='aether'] .el-bar {
  border-radius: 999px;
}

body[data-skin='aether'] .el-bar i {
  border-radius: 999px;
}


/* ==========================================================================
   SKIN 2: PLEXUS — 「실버 미스트 플렉서스 · 안개 궤도와 황금 백열광」
   레퍼런스:
   - Image 5: 은회색 안개 바탕(#c8c9ce) + 정밀한 동심원 궤도 + 우하단이 황금빛으로 타오르는 3D 폴리곤 메쉬 링
   - Image 2: 이슬 맺힌 연보라/화이트 유리알 질감
   ========================================================================== */
body[data-skin='plexus'] {
  --bg1: #c5c6cc;
  --bg2: #dcdde2;
  --surface: rgba(255, 255, 255, 0.46);
  --surface-raised: rgba(255, 255, 255, 0.72);
  --surface-inset: rgba(255, 255, 255, 0.28);
  --text: #15171c;
  --muted: rgba(25, 28, 36, 0.6);
  --accent: #e08218;        /* 백열 앰버 골드 */
  --accent2: #8c65d8;       /* 코스모스 라벤더 (Image 2) */
  --seal-ink: #181a20;
  --seal-text: #ffffff;
  --border-strong: rgba(20, 22, 28, 0.18);
  --border-fine: rgba(20, 22, 28, 0.09);
  --line: rgba(20, 22, 28, 0.14);
  --ink-shadow: rgba(20, 22, 28, 0.08);
  --header-bg: rgba(230, 231, 236, 0.72);
  --header-border: rgba(20, 22, 28, 0.12);
  --wheel-plate: rgba(255, 255, 255, 0.35);
  --wheel-core-inner: rgba(255, 215, 130, 0.55);
  --wheel-core-outer: rgba(235, 236, 240, 0.85);
  --maxw: 1240px;

  background:
    radial-gradient(circle at 55% 48%, rgba(255, 225, 165, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 50% 48%, #e2e3e8 0%, #c4c5cb 62%, #a8aaaf 100%) fixed;
}

body[data-skin='plexus'] .colophon-strip {
  display: none;
}

body[data-skin='plexus'] .site-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 14px;
}

body[data-skin='plexus'] .header-in {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0 18px;
  height: 54px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body[data-skin='plexus'] .logo-seal {
  border-radius: 50%;
  background: #181a20;
  color: #fff;
  border: 0;
  outline: 0;
  box-shadow: none;
}

body[data-skin='plexus'] .skin-switcher-bar {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  padding: 3px;
}

body[data-skin='plexus'] .skin-btn {
  border-radius: 999px;
}

body[data-skin='plexus'] .skin-btn.is-active {
  background: #181a20;
  color: #ffffff;
}

body[data-skin='plexus'] .card {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(30, 32, 40, 0.08);
}

body[data-skin='plexus'] .card::before,
body[data-skin='plexus'] .hero-folio::before,
body[data-skin='plexus'] .hero-marginalia,
body[data-skin='plexus'] .corner-trig {
  display: none;
}

body[data-skin='plexus'] .hero-folio,
body[data-skin='plexus'] .hero-fan-frame {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(30, 32, 40, 0.07);
  grid-template-columns: 1fr;
}

body[data-skin='plexus'] .talisman-mount {
  border-radius: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid #ffffff;
  box-shadow:
    0 0 40px rgba(255, 210, 125, 0.75),
    0 20px 50px rgba(20, 22, 28, 0.14);
}

body[data-skin='plexus'] .luopan-plate {
  border-radius: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 65% 65%, rgba(255, 210, 120, 0.55), rgba(255, 255, 255, 0.35) 65%);
  border: 1px solid rgba(20, 22, 28, 0.18);
  box-shadow:
    0 0 0 12px rgba(20, 22, 28, 0.03),
    0 0 0 13px rgba(20, 22, 28, 0.08),
    0 20px 50px rgba(255, 180, 70, 0.22);
}

body[data-skin='plexus'] .btn {
  border-radius: 999px;
  font-family: var(--sans);
  box-shadow: none;
}

body[data-skin='plexus'] .btn-primary {
  background: #181a20;
  color: #ffffff;
  border-color: #181a20;
  box-shadow: 0 10px 25px rgba(24, 26, 32, 0.22);
}

body[data-skin='plexus'] select,
body[data-skin='plexus'] input[type='text'],
body[data-skin='plexus'] input[type='time'] {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(20, 22, 28, 0.14);
  color: #15171c;
  color-scheme: light;
}


/* ==========================================================================
   SKIN 3: SANCTUM — 「천체 성소 · 삼면화 제단 (Triptych Altar)」
   ========================================================================== */
body[data-skin='sanctum'] {
  --bg1: #060809;
  --bg2: #0b1012;
  --surface: #0e1417;
  --surface-raised: #141c20;
  --surface-inset: #080b0d;
  --parchment: #f3ebd9;
  --parchment-ink: #1a150e;
  --text: #efe6d4;
  --muted: #938c7e;
  --accent: #d8b568;
  --accent2: #9e1f24;
  --seal-ink: #9e1f24;
  --seal-text: #f9f2e3;
  --border-strong: rgba(216, 181, 104, 0.45);
  --border-fine: rgba(216, 181, 104, 0.16);
  --line: rgba(216, 181, 104, 0.22);
  --ink-shadow: rgba(0, 0, 0, 0.85);
  --header-bg: #070a0c;
  --header-border: rgba(216, 181, 104, 0.35);
  --wheel-plate: #090d10;
  --wheel-core-inner: #172026;
  --wheel-core-outer: #080b0e;
  --maxw: 1380px;
}

@media (min-width: 1020px) {
  body[data-skin='sanctum'] #make > .sec-header { display: none; }
  body[data-skin='sanctum'] .studio-grid {
    grid-template-columns: 320px minmax(360px, 430px) minmax(420px, 1fr);
    gap: 20px;
    align-items: stretch;
  }
  body[data-skin='sanctum'] .studio-left,
  body[data-skin='sanctum'] .studio-right { display: contents; }
  body[data-skin='sanctum'] #form {
    grid-column: 1; grid-row: 1;
    background: var(--parchment); color: var(--parchment-ink);
    border: 2px solid var(--accent);
  }
  body[data-skin='sanctum'] #form select,
  body[data-skin='sanctum'] #form input[type='text'],
  body[data-skin='sanctum'] #form input[type='time'] {
    background: #fbf6ea; color: #1a1209; border: 1px solid #b59663; color-scheme: light;
  }
  body[data-skin='sanctum'] #form .lbl-meta,
  body[data-skin='sanctum'] #form .check,
  body[data-skin='sanctum'] #form .card-h { color: #1a1209 !important; }
  body[data-skin='sanctum'] .viewer {
    grid-column: 2; grid-row: 1;
    border: 2px solid var(--accent);
    border-radius: 220px 220px 4px 4px;
    padding: 38px 24px 24px;
  }
  body[data-skin='sanctum'] .wheel-card { grid-column: 3; grid-row: 1; }
  body[data-skin='sanctum'] .ad-download { grid-column: 1 / -1; grid-row: 2; }
}

body[data-skin='sanctum'] .talisman-mount {
  border-radius: 160px 160px 4px 4px;
}


/* ==========================================================================
   SKIN 4: NIGHTMARKET — 「구룡 새벽 3시 야시장 · 홍등 네온 점술방」
   ========================================================================== */
body[data-skin='nightmarket'] {
  --bg1: #05070a;
  --bg2: #091015;
  --surface: #0c1318;
  --surface-raised: #121d24;
  --surface-inset: #060a0d;
  --text: #eef7f4;
  --muted: #7da098;
  --accent: #00e5a3;
  --accent2: #ff2e1f;
  --seal-ink: #ff2e1f;
  --seal-text: #ffffff;
  --border-strong: rgba(0, 229, 163, 0.48);
  --border-fine: rgba(255, 46, 31, 0.28);
  --line: rgba(0, 229, 163, 0.25);
  --ink-shadow: rgba(255, 46, 31, 0.28);
  --header-bg: #060a0d;
  --header-border: #ff2e1f;
  --wheel-plate: #080e12;
  --wheel-core-inner: #14080a;
  --wheel-core-outer: #060b0e;
}

@media (min-width: 1000px) {
  body[data-skin='nightmarket'] .studio-grid {
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
  }
  body[data-skin='nightmarket'] .studio-right { grid-column: 1; grid-row: 1; }
  body[data-skin='nightmarket'] .studio-left { grid-column: 2; grid-row: 1; }
}


/* ==========================================================================
   SURREAL SKIN 6: CHRONO — 「크로노스 사막 · 초현실 액체시계와 반중력 황금방울」
   세계관: 살바도르 달리(Dalí)·데 키리코(De Chirico)풍 초현실 황혼 사막,
           개기일식 흑태양, 중력을 거슬러 떠오르는 액체 황금 방울과 살아 움직이는 액체금속 봉안틀
   ========================================================================== */
@keyframes chronoLiquidMorph {
  0%, 100% {
    border-radius: 42px 74px 46px 78px / 64px 36px 72px 40px;
    transform: translateY(0) rotate(-1.2deg);
  }
  33% {
    border-radius: 72px 40px 76px 44px / 38px 68px 42px 70px;
    transform: translateY(-7px) rotate(0.8deg);
  }
  66% {
    border-radius: 50px 66px 38px 68px / 62px 48px 36px 64px;
    transform: translateY(-3px) rotate(-0.5deg);
  }
}

@keyframes chronoHaloPulse {
  0%, 100% { opacity: 0.65; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.04) rotate(6deg); }
}

body[data-skin='chrono'] {
  --bg1: #09030e;
  --bg2: #240b1a;
  --surface: rgba(24, 9, 20, 0.68);
  --surface-raised: rgba(42, 15, 28, 0.78);
  --surface-inset: rgba(12, 4, 12, 0.75);
  --text: #fff6e5;
  --muted: rgba(255, 214, 165, 0.7);
  --accent: #ffd066;        /* 녹아내리는 24K 액체 황금 */
  --accent2: #ff5436;       /* 개기일식 크림슨 코로나 */
  --seal-ink: #ffd066;
  --seal-text: #14060c;
  --border-strong: rgba(255, 208, 102, 0.45);
  --border-fine: rgba(255, 160, 80, 0.22);
  --line: rgba(255, 208, 102, 0.22);
  --ink-shadow: rgba(0, 0, 0, 0.85);
  --header-bg: rgba(14, 5, 15, 0.82);
  --header-border: rgba(255, 208, 102, 0.35);
  --wheel-plate: rgba(18, 6, 16, 0.72);
  --wheel-core-inner: #2e1019;
  --wheel-core-outer: #12050e;
  background:
    radial-gradient(ellipse 90% 55% at 68% 24%, rgba(215, 88, 32, 0.36) 0%, transparent 65%),
    linear-gradient(180deg, #08030d 0%, #1d0918 38%, #4d1718 74%, #82301a 100%);
}

body[data-skin='chrono'] .site-header {
  width: min(var(--maxw), 94vw);
  margin: 14px auto 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 208, 102, 0.38);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(255, 165, 60, 0.18);
}

body[data-skin='chrono'] .colophon-strip { display: none; }

body[data-skin='chrono'] .card {
  background: linear-gradient(155deg, rgba(32, 11, 24, 0.74) 0%, rgba(15, 5, 14, 0.84) 100%);
  backdrop-filter: blur(18px);
  border: 1.5px solid rgba(255, 208, 102, 0.34);
  /* 초현실주의 비대칭 곡면 슬랩 + 데 키리코풍 긴 건축적 그림자 */
  border-radius: 36px 14px 40px 16px;
  box-shadow:
    18px 24px 0 rgba(8, 2, 10, 0.62),
    0 26px 56px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 232, 175, 0.35);
}

body[data-skin='chrono'] .card::before { display: none; }

/* 크로노스 부적 봉안 오브제: 살아 숨쉬듯 유동하는 24K 액체 황금 모놀리스 (.talisman-mount) */
body[data-skin='chrono'] .talisman-frame {
  padding: 20px 10px 38px;
}

body[data-skin='chrono'] .talisman-mount {
  position: relative;
  width: min(100%, 405px);
  padding: 26px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 250, 220, 0.92) 0%, transparent 45%),
    linear-gradient(135deg,
      #fff0b8 0%,
      #f5b638 22%,
      #9c4b06 48%,
      #ffdf80 74%,
      #6e2c03 100%);
  border: 2px solid #fff2c2;
  box-shadow:
    14px 20px 0 #3d1405,
    0 36px 70px rgba(0, 0, 0, 0.9),
    0 0 55px rgba(255, 175, 55, 0.42),
    inset 4px 5px 12px rgba(255, 255, 255, 0.9),
    inset -6px -8px 16px rgba(68, 22, 4, 0.85);
  animation: chronoLiquidMorph 9s ease-in-out infinite;
}

/* 부적 뒤편에서 일렁이는 개기일식 황금 코로나 후광 */
body[data-skin='chrono'] .talisman-mount::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  border: 1.5px dashed rgba(255, 210, 105, 0.55);
  box-shadow: 0 0 40px rgba(255, 140, 40, 0.35);
  animation: chronoHaloPulse 5s ease-in-out infinite;
  pointer-events: none;
}

body[data-skin='chrono'] .talisman {
  border-radius: 24px 42px 26px 44px;
  border: 2px solid rgba(55, 18, 4, 0.75);
  box-shadow:
    inset 0 0 24px rgba(120, 45, 5, 0.65),
    0 12px 30px rgba(0, 0, 0, 0.7);
}

body[data-skin='chrono'] .luopan-plate {
  border-radius: 54% 46% 48% 52% / 46% 54% 52% 48%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 175, 60, 0.2), rgba(18, 5, 14, 0.78) 70%);
  border: 2px solid rgba(255, 208, 102, 0.5);
  box-shadow: 0 0 55px rgba(255, 140, 35, 0.25);
}

body[data-skin='chrono'] .btn-primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe699, #f29d24);
  color: #16060a;
  border: 1px solid #fff3c4;
  box-shadow: 0 0 30px rgba(255, 185, 65, 0.65);
}


/* ==========================================================================
   SURREAL SKIN 7: ABYSS — 「심해 생체발광 · 아틀란티스 해파리 수초와 심연의 수경(水鏡)」
   세계관: 수심 4,000m 심해 오라클 신전, 살아 움직이는 발광 해파리·산호 촉수,
           맥동하는 생체발광 수막(Water-Mirror Membrane) 속에 봉안된 부적과 3단 심해 제단 레이아웃
   ========================================================================== */
@keyframes abyssBubblePulse {
  0%, 100% {
    border-radius: 46% 54% 48% 52% / 42% 44% 56% 58%;
    box-shadow:
      0 28px 65px rgba(0, 0, 0, 0.9),
      0 0 48px rgba(0, 255, 213, 0.45),
      0 0 90px rgba(255, 42, 157, 0.25),
      inset 0 0 28px 10px rgba(0, 255, 213, 0.55),
      inset 0 -18px 36px rgba(255, 42, 157, 0.42);
  }
  50% {
    border-radius: 53% 47% 52% 48% / 48% 42% 58% 52%;
    box-shadow:
      0 34px 75px rgba(0, 0, 0, 0.92),
      0 0 65px rgba(255, 42, 157, 0.52),
      0 0 110px rgba(0, 255, 213, 0.35),
      inset 0 0 34px 14px rgba(0, 225, 255, 0.68),
      inset 0 -22px 42px rgba(255, 42, 157, 0.58);
  }
}

body[data-skin='abyss'] {
  --bg1: #010710;
  --bg2: #031c2e;
  --surface: rgba(3, 22, 38, 0.64);
  --surface-raised: rgba(6, 36, 58, 0.76);
  --surface-inset: rgba(1, 12, 22, 0.78);
  --text: #e6fffb;
  --muted: rgba(145, 232, 228, 0.72);
  --accent: #00ffd5;        /* 심해 생체발광 네온 시안 */
  --accent2: #ff2a9d;       /* 메두사 해파리 마젠타 */
  --seal-ink: #00ffd5;
  --seal-text: #01111a;
  --border-strong: rgba(0, 255, 213, 0.48);
  --border-fine: rgba(255, 42, 157, 0.28);
  --line: rgba(0, 255, 213, 0.24);
  --ink-shadow: rgba(0, 0, 0, 0.88);
  --header-bg: rgba(2, 14, 26, 0.82);
  --header-border: rgba(0, 255, 213, 0.4);
  --wheel-plate: rgba(2, 16, 28, 0.72);
  --wheel-core-inner: #04283e;
  --wheel-core-outer: #010e1a;
  --maxw: 1380px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 15%, rgba(0, 215, 200, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 25% 75%, rgba(255, 42, 157, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #01060d 0%, #021626 48%, #03263c 100%);
}

body[data-skin='abyss'] .site-header {
  width: min(var(--maxw), 94vw);
  margin: 14px auto 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 213, 0.42);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 36px rgba(0, 255, 213, 0.2), 0 18px 45px rgba(0, 0, 0, 0.8);
}

body[data-skin='abyss'] .colophon-strip { display: none; }

body[data-skin='abyss'] .card {
  background:
    radial-gradient(circle at 15% 15%, rgba(0, 255, 213, 0.12), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(255, 42, 157, 0.12), transparent 55%),
    rgba(2, 18, 32, 0.68);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 255, 213, 0.36);
  border-radius: 34px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(0, 255, 213, 0.14),
    inset 0 1px 0 rgba(160, 255, 245, 0.38);
}

body[data-skin='abyss'] .card::before { display: none; }

/* 데스크톱 3단 심해 아틀란티스 신전 레이아웃 (중앙에 거대 생체발광 수경 봉안소 배치) */
@media (min-width: 1040px) {
  body[data-skin='abyss'] .studio-grid {
    grid-template-columns: 330px minmax(380px, 450px) minmax(410px, 1fr);
    gap: 22px;
    align-items: start;
  }
  body[data-skin='abyss'] .studio-left,
  body[data-skin='abyss'] .studio-right {
    display: contents;
  }
  body[data-skin='abyss'] #form {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-skin='abyss'] .viewer {
    grid-column: 2;
    grid-row: 1;
    border: 2px solid rgba(0, 255, 213, 0.62);
    box-shadow:
      0 0 55px rgba(0, 255, 213, 0.25),
      0 0 95px rgba(255, 42, 157, 0.16),
      0 30px 70px rgba(0, 0, 0, 0.88);
  }
  body[data-skin='abyss'] .wheel-card {
    grid-column: 3;
    grid-row: 1;
  }
  body[data-skin='abyss'] .ad-download {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 심연의 수경(水鏡 · Living Medusa Water-Mirror) 부적 봉안 오브제 */
body[data-skin='abyss'] .talisman-frame {
  padding: 16px 8px 24px;
}

body[data-skin='abyss'] .talisman-mount {
  position: relative;
  padding: 26px 22px;
  background:
    radial-gradient(ellipse at 32% 22%, rgba(190, 255, 248, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 42, 157, 0.38) 0%, transparent 58%),
    linear-gradient(160deg, rgba(0, 235, 215, 0.34) 0%, rgba(4, 52, 82, 0.72) 52%, rgba(145, 28, 122, 0.45) 100%);
  border: 2px solid rgba(165, 255, 245, 0.85);
  animation: abyssBubblePulse 6s ease-in-out infinite;
}

body[data-skin='abyss'] .talisman {
  border-radius: 26px;
  border: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

body[data-skin='abyss'] .luopan-plate {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 255, 213, 0.18), rgba(2, 18, 32, 0.82) 68%);
  border: 1.5px solid rgba(0, 255, 213, 0.55);
  box-shadow:
    0 0 0 10px rgba(0, 255, 213, 0.05),
    0 0 55px rgba(0, 255, 213, 0.25),
    inset 0 0 32px rgba(255, 42, 157, 0.22);
}

body[data-skin='abyss'] .btn-primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #00ffd5, #00a8ff);
  color: #011018;
  border: 1px solid #b8fff4;
  box-shadow: 0 0 28px rgba(0, 255, 213, 0.65);
}


/* ==========================================================================
   SURREAL SKIN 8: OUROBOROS — 「차원균열 성운 · 우로보로스 기하학 프랙탈과 차원문」
   세계관: 에셔(Escher)·닥터 스트레인지 미러 디멘션풍 기하학 차원 균열,
           역회전하는 신성 기하학 메르카바(Merkaba)·오파님(Ophanim) 룬 링과 공중부양 차원문
   ========================================================================== */
@keyframes ouroborosSpinCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ouroborosSpinCCW {
  from { transform: translate(-50%, -50%) rotate(45deg); }
  to   { transform: translate(-50%, -50%) rotate(-315deg); }
}

body[data-skin='ouroboros'] {
  --bg1: #06020b;
  --bg2: #160722;
  --surface: rgba(18, 7, 28, 0.72);
  --surface-raised: rgba(32, 12, 46, 0.82);
  --surface-inset: rgba(9, 3, 15, 0.82);
  --text: #fdf4ff;
  --muted: rgba(224, 188, 248, 0.7);
  --accent: #ffcf6b;        /* 아스트랄 연금술 황금 */
  --accent2: #ff2e6c;       /* 차원 균열 크림슨 마젠타 */
  --seal-ink: #ff2e6c;
  --seal-text: #ffffff;
  --border-strong: rgba(255, 207, 107, 0.52);
  --border-fine: rgba(255, 46, 108, 0.32);
  --line: rgba(255, 207, 107, 0.24);
  --ink-shadow: rgba(0, 0, 0, 0.9);
  --header-bg: rgba(11, 4, 18, 0.85);
  --header-border: rgba(255, 207, 107, 0.45);
  --wheel-plate: rgba(14, 5, 22, 0.78);
  --wheel-core-inner: #280a2c;
  --wheel-core-outer: #0c0314;
  background:
    radial-gradient(ellipse 75% 50% at 50% 28%, rgba(225, 40, 95, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 75% 70%, rgba(135, 45, 235, 0.2) 0%, transparent 65%),
    linear-gradient(180deg, #050209 0%, #13061e 50%, #21071a 100%);
}

body[data-skin='ouroboros'] .site-header {
  width: min(var(--maxw), 94vw);
  margin: 14px auto 0;
  border: 1.5px solid rgba(255, 207, 107, 0.48);
  background: rgba(12, 4, 20, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 35px rgba(255, 46, 108, 0.24), 0 18px 48px rgba(0, 0, 0, 0.85);
}

body[data-skin='ouroboros'] .colophon-strip { display: none; }

body[data-skin='ouroboros'] .card {
  background:
    linear-gradient(145deg, rgba(28, 9, 40, 0.78) 0%, rgba(12, 4, 20, 0.88) 100%);
  backdrop-filter: blur(18px);
  border: 1.5px solid rgba(255, 207, 107, 0.42);
  border-radius: 6px;
  outline: 1px solid rgba(255, 46, 108, 0.35);
  outline-offset: -7px;
  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.88),
    0 0 34px rgba(185, 55, 255, 0.18);
}

body[data-skin='ouroboros'] .card::before { display: none; }

/* 차원균열 부적 봉안 오브제: 역회전하는 이중 메르카바 기하학 성운 차원문 (.talisman-mount) */
body[data-skin='ouroboros'] .talisman-frame {
  padding: 36px 18px 42px;
  overflow: visible;
}

body[data-skin='ouroboros'] .talisman-mount {
  position: relative;
  width: min(100%, 385px);
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(44, 12, 58, 0.92), rgba(16, 4, 26, 0.95));
  border: 2px solid #ffcf6b;
  box-shadow:
    0 0 0 4px rgba(18, 5, 28, 0.95),
    0 0 0 6px #ff2e6c,
    0 0 55px rgba(255, 46, 108, 0.55),
    0 0 95px rgba(165, 75, 255, 0.4),
    inset 0 0 28px rgba(255, 207, 107, 0.45);
  overflow: visible;
}

/* 부적 등 뒤에서 시계·반시계 방향으로 끝없이 역회전하는 8각 차원 마법진 프레임 */
body[data-skin='ouroboros'] .talisman-mount::before,
body[data-skin='ouroboros'] .talisman-mount::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 207, 107, 0.48);
  box-shadow:
    0 0 28px rgba(255, 46, 108, 0.4),
    inset 0 0 24px rgba(175, 85, 255, 0.35);
  pointer-events: none;
  z-index: 0;
}

body[data-skin='ouroboros'] .talisman-mount::before {
  animation: ouroborosSpinCW 26s linear infinite;
}

body[data-skin='ouroboros'] .talisman-mount::after {
  border-color: rgba(255, 46, 108, 0.55);
  animation: ouroborosSpinCCW 19s linear infinite;
}

body[data-skin='ouroboros'] .talisman {
  position: relative;
  z-index: 2;
  border: 1.5px solid rgba(255, 207, 107, 0.85);
  box-shadow: 0 0 32px rgba(255, 46, 108, 0.45);
}

body[data-skin='ouroboros'] .luopan-plate {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 46, 108, 0.22), rgba(14, 4, 24, 0.88) 68%);
  border: 2px solid #ffcf6b;
  outline: 2px dashed rgba(255, 46, 108, 0.55);
  outline-offset: 8px;
  box-shadow: 0 0 65px rgba(255, 46, 108, 0.32);
}

body[data-skin='ouroboros'] .btn-primary {
  background: linear-gradient(135deg, #ff2e6c, #9b2eff);
  color: #ffffff;
  border: 1px solid #ffcf6b;
  box-shadow: 0 0 32px rgba(255, 46, 108, 0.65);
}