/*
 * ARCANA PRISM AURA EFFECT
 * 역할: 액티브 스킬 선택 효과, 저장 완료 잠금 효과, CTA 프리즘 효과를 단일 관리한다.
 * ARC-0.3.02 · 260615_11
 * 원칙:
 * - 효과는 대상 테두리 자체에만 머문다.
 * - 버튼/카드 뒤에서 큰 판이 회전하는 효과 금지.
 * - 20레벨/16레벨 뱃지는 스킬명을 덮지 않는다.
 * - 저장 완료 상태의 빗금/채도저하/테두리 흐름은 여기서만 관리한다.
 */
:root {
  --arcana-prism-white: rgba(255, 255, 255, 0.96);
  --arcana-prism-gold: rgba(255, 223, 141, 0.96);
  --arcana-prism-champagne: rgba(255, 241, 202, 0.92);
  --arcana-prism-lavender: rgba(190, 174, 255, 0.78);
  --arcana-prism-opal: rgba(164, 222, 255, 0.76);
  --arcana-prism-mint: rgba(194, 246, 232, 0.62);
  --arcana-prism-pink: rgba(255, 203, 226, 0.66);
  --arcana-prism-silver: rgba(220, 226, 238, 0.86);
  --arcana-skill-prism-size: 5px;
  --arcana-panel-prism-size: 5px;

  --arcana-comet-tail-soft: rgba(164, 222, 255, 0.12);
  --arcana-comet-tail: rgba(164, 222, 255, 0.46);
  --arcana-comet-core: rgba(190, 174, 255, 0.76);
  --arcana-comet-head: rgba(255, 255, 255, 0.98);
  --arcana-comet-spark: rgba(255, 203, 226, 0.60);
}

@property --arcana-comet-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes arcanaCometSpin {
  0% { --arcana-comet-angle: 0deg; }
  100% { --arcana-comet-angle: 360deg; }
}

@keyframes arcanaCometPulse {
  0%, 100% { opacity: .40; filter: blur(3px) brightness(1); }
  45% { opacity: .58; filter: blur(3px) brightness(1.12); }
}

@keyframes arcanaSkillPuddingRestore {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  12% { transform: translateY(2px) scale(0.935, 1.075); filter: brightness(1.08); }
  32% { transform: translateY(-2px) scale(1.052, 0.952); filter: brightness(1.14); }
  52% { transform: translateY(1px) scale(0.982, 1.03); filter: brightness(1.06); }
  72% { transform: translateY(-0.5px) scale(1.014, 0.992); filter: brightness(1.03); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes arcanaPrismEdgeTravelGold {
  0% {
    background-position: -180% 0, 280% 100%, 0 280%, 100% -180%;
    opacity: .70;
  }
  45% { opacity: .98; }
  100% {
    background-position: 280% 0, -180% 100%, 0 -180%, 100% 280%;
    opacity: .70;
  }
}

@keyframes arcanaPrismEdgeTravelSoft {
  0% {
    background-position: -160% 0, 260% 100%, 0 260%, 100% -160%;
    opacity: .58;
  }
  50% { opacity: .88; }
  100% {
    background-position: 260% 0, -160% 100%, 0 -160%, 100% 260%;
    opacity: .58;
  }
}

@keyframes arcanaSavedStripeBreath {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: 10px 10px, 0 0; }
}

/* ------------------------------------------------------------------
   저장 완료 패널: 빗금 + 채도 감소 + 바깥 테두리 광점 이동
   - 큰 회전판/두꺼운 선 금지
   - 카드 크기 변경 금지
   - 테두리 바깥 1~2px 영역에서 프리즘 꼬리 광점만 이동
------------------------------------------------------------------ */
:root {
  --arcana-edge-core-size: 5px;
  --arcana-edge-soft-size: 4px;
  --arcana-edge-line-size: 1px;
}

@keyframes arcanaEdgeDotOrbit {
  0% {
    left: 7%;
    top: -3px;
    transform: translate(-50%, -50%) scale(.78, .92);
    opacity: .18;
  }
  8% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(1.15, .82);
  }
  24% {
    left: 93%;
    top: -3px;
    transform: translate(-50%, -50%) scale(1.05, .86);
    opacity: .94;
  }
  26% {
    left: calc(100% + 3px);
    top: 12%;
    transform: translate(-50%, -50%) scale(.84, 1.12);
  }
  49% {
    left: calc(100% + 3px);
    top: 88%;
    transform: translate(-50%, -50%) scale(.84, 1.06);
    opacity: .92;
  }
  51% {
    left: 93%;
    top: calc(100% + 3px);
    transform: translate(-50%, -50%) scale(1.12, .84);
  }
  74% {
    left: 7%;
    top: calc(100% + 3px);
    transform: translate(-50%, -50%) scale(1.05, .86);
    opacity: .9;
  }
  76% {
    left: -3px;
    top: 88%;
    transform: translate(-50%, -50%) scale(.84, 1.12);
  }
  96% {
    left: -3px;
    top: 12%;
    transform: translate(-50%, -50%) scale(.84, 1.05);
    opacity: .82;
  }
  100% {
    left: 7%;
    top: -3px;
    transform: translate(-50%, -50%) scale(.78, .92);
    opacity: .18;
  }
}


@keyframes arcanaPrismTailOrbit {
  0% {
    left: 8%;
    top: -2px;
    transform: translate(-50%, -50%) rotate(0deg) scaleX(.78);
    opacity: .12;
  }
  7% {
    opacity: .92;
    transform: translate(-50%, -50%) rotate(0deg) scaleX(1.02);
  }
  23% {
    left: 92%;
    top: -2px;
    transform: translate(-50%, -50%) rotate(0deg) scaleX(1.06);
    opacity: .90;
  }
  26% {
    left: calc(100% + 2px);
    top: 11%;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(.96);
  }
  48% {
    left: calc(100% + 2px);
    top: 89%;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(1.04);
    opacity: .88;
  }
  51% {
    left: 92%;
    top: calc(100% + 2px);
    transform: translate(-50%, -50%) rotate(180deg) scaleX(.98);
  }
  73% {
    left: 8%;
    top: calc(100% + 2px);
    transform: translate(-50%, -50%) rotate(180deg) scaleX(1.06);
    opacity: .86;
  }
  76% {
    left: -2px;
    top: 89%;
    transform: translate(-50%, -50%) rotate(270deg) scaleX(.96);
  }
  96% {
    left: -2px;
    top: 11%;
    transform: translate(-50%, -50%) rotate(270deg) scaleX(1.0);
    opacity: .72;
  }
  100% {
    left: 8%;
    top: -2px;
    transform: translate(-50%, -50%) rotate(360deg) scaleX(.78);
    opacity: .12;
  }
}

@keyframes arcanaSkillPuddingInner {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  10% { transform: translateY(2px) scale(1.035, .89); filter: brightness(1.08); }
  24% { transform: translateY(-1.5px) scale(.955, 1.105); filter: brightness(1.15); }
  39% { transform: translateY(.8px) scale(1.025, .955); filter: brightness(1.07); }
  57% { transform: translateY(-.6px) scale(.988, 1.025); filter: brightness(1.03); }
  76% { transform: translateY(.2px) scale(1.006, .996); filter: brightness(1.01); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.arcana-panel.is-saving,
.arcana-panel.is-saved {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  cursor: not-allowed;
  background:
    repeating-linear-gradient(-45deg, rgba(148, 163, 184, 0.13) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,1)) !important;
  animation: arcanaSavedStripeBreath 18s ease-in-out infinite;
  box-shadow: none !important;
}

.arcana-panel.is-saving > *,
.arcana-panel.is-saved > * {
  position: relative !important;
  z-index: 3 !important;
}

.arcana-panel.is-saving > *:not(.arcana-actions):not(.arcana-panel-message):not(.arcana-panel-title),
.arcana-panel.is-saved > *:not(.arcana-actions):not(.arcana-panel-message):not(.arcana-panel-title) {
  filter: saturate(0.58) brightness(1.015) !important;
  opacity: 0.88 !important;
}

.arcana-panel.is-saving .arcana-actions,
.arcana-panel.is-saved .arcana-actions,
.arcana-panel.is-saving .arcana-panel-message,
.arcana-panel.is-saved .arcana-panel-message,
.arcana-panel.is-saving .arcana-panel-title,
.arcana-panel.is-saved .arcana-panel-title {
  filter: none !important;
  opacity: 1 !important;
}

.arcana-panel.is-saving::before,
.arcana-panel.is-saved::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 222deg,
      rgba(194, 246, 232, 0.00) 236deg,
      rgba(194, 246, 232, 0.22) 254deg,
      rgba(164, 222, 255, 0.54) 279deg,
      rgba(190, 174, 255, 0.66) 300deg,
      rgba(255, 255, 255, 0.98) 315deg,
      rgba(255, 223, 141, 0.72) 322deg,
      transparent 332deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .86 !important;
  animation: arcanaCometSpin 4.8s linear infinite !important;
}

.arcana-panel.is-saving::after,
.arcana-panel.is-saved::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 4px !important;
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 206deg,
      rgba(194, 246, 232, 0.00) 224deg,
      rgba(194, 246, 232, 0.13) 246deg,
      rgba(164, 222, 255, 0.26) 278deg,
      rgba(190, 174, 255, 0.34) 305deg,
      rgba(255, 255, 255, 0.58) 319deg,
      transparent 338deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  animation:
    arcanaCometSpin 4.8s linear infinite,
    arcanaCometPulse 2.4s ease-in-out infinite !important;
}

/* 저장 완료 후 입력 카드들은 잠김을 알아볼 수 있게 낮은 채도 유지 */
[data-panel-key="characterLevels"].is-saved .arcana-skill-btn,
[data-panel-key="equipmentOptions"].is-saved .arcana-equipment-card,
[data-panel-key="ownedArcanaCards"].is-saved .arcana-owned-card {
  filter: saturate(0.52) brightness(1.01) !important;
  opacity: 0.82 !important;
  pointer-events: none !important;
}

[data-panel-key="characterLevels"].is-saved .arcana-skill-btn.is-active,
[data-panel-key="equipmentOptions"].is-saved .arcana-equipment-card,
[data-panel-key="ownedArcanaCards"].is-saved .arcana-owned-card {
  filter: saturate(0.68) brightness(1.01) !important;
  opacity: 0.92 !important;
}

/* ------------------------------------------------------------------
   액티브 스킬 버튼: 크기 고정 + 내부 푸딩 + 외곽 광점 이동
   - 20260615_03 버튼/영역 크기 잠금
   - 버튼 자체는 커졌다 작아지는 기본 반응을 유지하되, 내부 요소에 squash/stretch 추가
   - 테두리 효과는 두꺼운 선이 아니라 프리즘 꼬리 광점 이동
------------------------------------------------------------------ */
.arcana-skill-btn.arcana-skill-icon-btn {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  column-gap: 7px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 5px 7px !important;
  text-align: left !important;
  transform-origin: center !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1.15),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    filter .18s ease !important;
}

.arcana-skill-btn.arcana-skill-icon-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.018, 1.012) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.982, .965) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn > * {
  position: relative !important;
  z-index: 6 !important;
  transform-origin: center !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-pudding .arcana-skill-icon,
.arcana-skill-btn.arcana-skill-icon-btn.is-pudding .arcana-skill-name,
.arcana-skill-btn.arcana-skill-icon-btn.is-pudding .arcana-skill-level-badge,
.arcana-skill-btn.arcana-skill-icon-btn.is-pudding .arcana-skill-priority-badge {
  animation: arcanaSkillPuddingInner .62s cubic-bezier(.16,.92,.2,1.22) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn .arcana-skill-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
}

.arcana-skill-btn.arcana-skill-icon-btn .arcana-skill-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  padding-right: 0 !important;
  line-height: 1.12 !important;
  font-size: 10.5px !important;
  letter-spacing: -0.07em !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  padding: 5px 7px !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active .arcana-skill-level-badge,
.arcana-skill-btn.arcana-skill-icon-btn.is-active .arcana-skill-priority-badge {
  position: absolute !important;
  right: 3px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  padding: 0 2px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .10) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active .arcana-skill-level-badge {
  top: 3px !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.has-priority-badge .arcana-skill-level-badge {
  top: 3px !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.has-priority-badge .arcana-skill-priority-badge {
  top: 17px !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active {
  --arcana-comet-tail-soft: rgba(164, 222, 255, 0.10);
  --arcana-comet-tail: rgba(164, 222, 255, 0.44);
  --arcana-comet-core: rgba(190, 174, 255, 0.72);
  --arcana-comet-head: rgba(255, 255, 255, 0.98);
  --arcana-comet-spark: rgba(255, 203, 226, 0.56);
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 226deg,
      var(--arcana-comet-tail-soft) 246deg,
      var(--arcana-comet-tail) 273deg,
      var(--arcana-comet-core) 298deg,
      var(--arcana-comet-head) 315deg,
      var(--arcana-comet-spark) 322deg,
      transparent 331deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .88 !important;
  animation: arcanaCometSpin 3.4s linear infinite !important;
  animation-delay: var(--arcana-skill-flow-delay, 0s) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 3px !important;
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 210deg,
      rgba(255,255,255,0) 228deg,
      var(--arcana-comet-tail-soft) 252deg,
      var(--arcana-comet-tail) 284deg,
      var(--arcana-comet-core) 308deg,
      rgba(255,255,255,.52) 320deg,
      transparent 337deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .46 !important;
  animation:
    arcanaCometSpin 3.4s linear infinite,
    arcanaCometPulse 1.9s ease-in-out infinite !important;
  animation-delay: var(--arcana-skill-flow-delay, 0s), 0s !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-level-20 {
  --arcana-comet-tail-soft: rgba(255, 223, 141, 0.12);
  --arcana-comet-tail: rgba(255, 223, 141, 0.48);
  --arcana-comet-core: rgba(255, 203, 226, 0.52);
  --arcana-comet-head: rgba(255, 255, 255, 0.98);
  --arcana-comet-spark: rgba(255, 241, 202, 0.88);
  border-color: rgba(207, 155, 42, 0.58) !important;
  background: linear-gradient(180deg, rgba(255,252,242,.98), rgba(255,255,255,1)) !important;
  color: #6f460c !important;
  box-shadow:
    0 0 0 1px rgba(255, 227, 159, 0.18),
    0 0 9px rgba(255, 214, 132, 0.10),
    0 3px 8px rgba(190, 174, 255, 0.05) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-level-16 {
  --arcana-comet-tail-soft: rgba(164, 222, 255, 0.12);
  --arcana-comet-tail: rgba(164, 222, 255, 0.46);
  --arcana-comet-core: rgba(190, 174, 255, 0.74);
  --arcana-comet-head: rgba(255, 255, 255, 0.98);
  --arcana-comet-spark: rgba(255, 203, 226, 0.55);
  border-color: rgba(156, 135, 232, 0.54) !important;
  background: linear-gradient(180deg, rgba(253,251,255,.98), rgba(255,255,255,1)) !important;
  color: #5b21b6 !important;
  box-shadow:
    0 0 0 1px rgba(164, 222, 255, 0.14),
    0 0 8px rgba(167, 139, 250, 0.09),
    0 3px 8px rgba(167, 139, 250, 0.05) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-level-20 .arcana-skill-level-badge {
  background: linear-gradient(135deg, #a9741f, #d7b762, #fff2c9) !important;
  color: #fff !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-level-16 .arcana-skill-level-badge {
  background: linear-gradient(135deg, #8b7cf6, #9fdcff, #c4b5fd) !important;
  color: #fff !important;
}

.arcana-skill-btn.arcana-skill-icon-btn .arcana-skill-priority-badge {
  background: linear-gradient(135deg, #1f2937, #475569) !important;
  color: #fff !important;
}

/* CTA는 기존 arcana-cta.css 구조를 유지하고 이 파일은 색감만 보조한다. */
.arcana-recommend-actions:hover .arcana-cta-wave-line,
.arcana-recommend-actions:focus-within .arcana-cta-wave-line {
  stroke: rgba(125, 211, 252, 0.58);
  filter: drop-shadow(0 0 2px rgba(190, 174, 255, 0.13));
}

.arcana-recommend-section.is-cta-loading .arcana-cta-wave-line {
  transition: stroke 1.35s ease, filter 1.35s ease, opacity 0.9s ease, stroke-width 0.9s ease;
}

#arcanaRunSimulation.arcana-wave-cta:hover:not(.is-soft-disabled),
#arcanaRunSimulation.arcana-wave-cta:focus-visible:not(.is-soft-disabled),
#arcanaRunSimulation.arcana-wave-cta.is-touch-preview:not(.is-soft-disabled) {
  color: #6d28d9;
  border-color: rgba(190, 174, 255, 0.30);
  box-shadow:
    0 14px 34px rgba(190, 174, 255, 0.08),
    0 0 0 1px rgba(125, 211, 252, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.94);
}

.arcana-recommend-section.is-cta-loading #arcanaRunSimulation.arcana-wave-cta {
  color: #7c3aed;
  border-color: rgba(190, 174, 255, 0.28);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98), rgba(255,255,255,0.92)),
    conic-gradient(from 0deg, rgba(190,174,255,.15), rgba(255,203,226,.12), rgba(125,211,252,.13), rgba(110,231,183,.09), rgba(190,174,255,.15));
}


/* ------------------------------------------------------------------
   ARC-0.3.02 · 260615_11
   테두리 혜성 광량 보강 + 액티브 스킬 영역 카드 외곽 혜성 적용
   - 크기/간격/레이아웃 값은 변경하지 않는다.
   - 두께는 유지하고 blur/drop-shadow/투명도만 보강한다.
------------------------------------------------------------------ */
.arcana-skill-btn.arcana-skill-icon-btn.is-active {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78),
    0 0 10px color-mix(in srgb, var(--arcana-comet-tail) 44%, transparent),
    0 0 18px color-mix(in srgb, var(--arcana-comet-core) 22%, transparent),
    0 3px 8px rgba(15, 23, 42, 0.04) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active::before {
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 188deg,
      rgba(255,255,255,0.00) 204deg,
      var(--arcana-comet-tail-soft) 226deg,
      var(--arcana-comet-tail) 258deg,
      var(--arcana-comet-core) 292deg,
      var(--arcana-comet-head) 312deg,
      rgba(255,255,255,1) 318deg,
      var(--arcana-comet-spark) 325deg,
      transparent 338deg,
      transparent 360deg) !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--arcana-comet-tail) 78%, transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--arcana-comet-core) 50%, transparent)) !important;
}

.arcana-skill-btn.arcana-skill-icon-btn.is-active::after {
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 176deg,
      rgba(255,255,255,0.00) 198deg,
      var(--arcana-comet-tail-soft) 230deg,
      var(--arcana-comet-tail) 274deg,
      var(--arcana-comet-core) 306deg,
      rgba(255,255,255,.88) 321deg,
      transparent 344deg,
      transparent 360deg) !important;
  opacity: .72 !important;
  filter:
    blur(.35px)
    drop-shadow(0 0 5px color-mix(in srgb, var(--arcana-comet-tail) 62%, transparent))
    drop-shadow(0 0 11px color-mix(in srgb, var(--arcana-comet-core) 34%, transparent)) !important;
}

/* 액티브 스킬 영역 카드: 버튼과 같은 계열의 혜성 흐름을 카드 외곽에도 표시 */
.arcana-target-panel {
  --arcana-panel-comet-tail-soft: rgba(164, 222, 255, 0.17);
  --arcana-panel-comet-tail: rgba(125, 211, 252, 0.64);
  --arcana-panel-comet-core: rgba(190, 174, 255, 0.72);
  --arcana-panel-comet-head: rgba(255, 255, 255, 1);
  --arcana-panel-comet-spark: rgba(255, 203, 226, 0.62);
}

.arcana-target-panel.is-skill-active::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.18)) padding-box,
    conic-gradient(from var(--arcana-comet-angle),
      rgba(255,255,255,.00) 0deg,
      rgba(164,222,255,.08) 42deg,
      rgba(255,255,255,.00) 86deg,
      rgba(255,255,255,.00) 178deg,
      rgba(255,255,255,0.00) 198deg,
      var(--arcana-panel-comet-tail-soft) 226deg,
      var(--arcana-panel-comet-tail) 260deg,
      var(--arcana-panel-comet-core) 294deg,
      var(--arcana-panel-comet-head) 315deg,
      var(--arcana-panel-comet-spark) 323deg,
      rgba(255,255,255,0.00) 340deg,
      rgba(255,255,255,.00) 360deg) border-box !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 4px rgba(125, 211, 252, .42))
    drop-shadow(0 0 10px rgba(190, 174, 255, .28)) !important;
  animation: arcanaCometSpin 4.4s linear infinite !important;
}

.arcana-target-panel.is-skill-active::after {
  content: '' !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  padding: 5px !important;
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 162deg,
      rgba(255,255,255,0.00) 188deg,
      rgba(194,246,232,.12) 222deg,
      rgba(125,211,252,.26) 266deg,
      rgba(190,174,255,.38) 304deg,
      rgba(255,255,255,.58) 322deg,
      transparent 348deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .72 !important;
  filter:
    blur(.45px)
    drop-shadow(0 0 7px rgba(125, 211, 252, .36))
    drop-shadow(0 0 15px rgba(190, 174, 255, .22)) !important;
  animation:
    arcanaCometSpin 4.4s linear infinite,
    arcanaCometPulse 2.2s ease-in-out infinite !important;
}

.arcana-target-panel.is-skill-active {
  box-shadow: none !important;
}

/* 저장/저장완료 영역 카드: 두께 유지, 광량과 꼬리만 강화 */
.arcana-panel.is-saving::before,
.arcana-panel.is-saved::before {
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      rgba(194, 246, 232, 0.07) 44deg,
      transparent 92deg,
      transparent 176deg,
      rgba(194, 246, 232, 0.00) 198deg,
      rgba(194, 246, 232, 0.24) 226deg,
      rgba(164, 222, 255, 0.74) 264deg,
      rgba(190, 174, 255, 0.82) 298deg,
      rgba(255, 255, 255, 1) 317deg,
      rgba(255, 223, 141, 0.82) 326deg,
      transparent 342deg,
      transparent 360deg) !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 4px rgba(164, 222, 255, .50))
    drop-shadow(0 0 11px rgba(190, 174, 255, .34)) !important;
}

.arcana-panel.is-saving::after,
.arcana-panel.is-saved::after {
  background:
    conic-gradient(from var(--arcana-comet-angle),
      transparent 0deg,
      transparent 158deg,
      rgba(194, 246, 232, 0.00) 188deg,
      rgba(194, 246, 232, 0.16) 224deg,
      rgba(164, 222, 255, 0.38) 270deg,
      rgba(190, 174, 255, 0.50) 307deg,
      rgba(255, 255, 255, 0.76) 326deg,
      transparent 352deg,
      transparent 360deg) !important;
  opacity: .82 !important;
  filter:
    blur(.55px)
    drop-shadow(0 0 7px rgba(164, 222, 255, .40))
    drop-shadow(0 0 17px rgba(190, 174, 255, .24)) !important;
}


/* ------------------------------------------------------------------
   ARC-0.3.02 · 260615_11
   카드 그림자 제거 + 액티브 스킬 영역 카드 효과 안정화
   - :has() 의존 제거: JS가 .is-skill-active 클래스를 직접 부여한다.
   - 영역 카드 크기/간격/배치는 변경하지 않는다.
   - 외곽 그림자/번짐 효과는 제거하고, 테두리 혜성 효과만 남긴다.
------------------------------------------------------------------ */
.arcana-panel {
  box-shadow: none !important;
}

.arcana-target-panel {
  position: relative !important;
  isolation: isolate !important;
}

.arcana-target-panel.is-skill-active {
  overflow: visible !important;
  box-shadow: none !important;
}

.arcana-target-panel.is-skill-active > * {
  position: relative !important;
  z-index: 3 !important;
}

.arcana-target-panel.is-skill-active::before {
  z-index: 1 !important;
}

.arcana-target-panel.is-skill-active::after {
  z-index: 2 !important;
}

.arcana-panel.is-saving,
.arcana-panel.is-saved {
  box-shadow: none !important;
}

.arcana-panel.is-saving::before,
.arcana-panel.is-saved::before,
.arcana-panel.is-saving::after,
.arcana-panel.is-saved::after,
.arcana-target-panel.is-skill-active::before,
.arcana-target-panel.is-skill-active::after {
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   ARC-0.3.02 · 260615_12
   저장 카드 01/02/04 혜성 테두리 표시 안정화 + 드롭다운 고정 레이어
   - 레이아웃/카드/버튼 크기는 변경하지 않는다.
   - 외곽 효과만 clipping 되지 않도록 저장 카드 overflow 우선순위를 보정한다.
   - 카드 내부 본문 영역은 기존 overflow 정책을 유지한다.
------------------------------------------------------------------ */
[data-card="01"].arcana-panel.is-saving,
[data-card="01"].arcana-panel.is-saved,
[data-card="02"].arcana-panel.is-saving,
[data-card="02"].arcana-panel.is-saved,
[data-card="04"].arcana-panel.is-saving,
[data-card="04"].arcana-panel.is-saved,
[data-card="01"].arcana-target-panel.is-skill-active {
  overflow: visible !important;
  isolation: isolate !important;
  box-shadow: none !important;
}

[data-card="01"].arcana-panel.is-saving > *,
[data-card="01"].arcana-panel.is-saved > *,
[data-card="02"].arcana-panel.is-saving > *,
[data-card="02"].arcana-panel.is-saved > *,
[data-card="04"].arcana-panel.is-saving > *,
[data-card="04"].arcana-panel.is-saved > *,
[data-card="01"].arcana-target-panel.is-skill-active > * {
  position: relative !important;
  z-index: 3 !important;
}

[data-card="01"].arcana-panel.is-saving::before,
[data-card="01"].arcana-panel.is-saved::before,
[data-card="02"].arcana-panel.is-saving::before,
[data-card="02"].arcana-panel.is-saved::before,
[data-card="04"].arcana-panel.is-saving::before,
[data-card="04"].arcana-panel.is-saved::before,
[data-card="01"].arcana-target-panel.is-skill-active::before {
  z-index: 1 !important;
}

[data-card="01"].arcana-panel.is-saving::after,
[data-card="01"].arcana-panel.is-saved::after,
[data-card="02"].arcana-panel.is-saving::after,
[data-card="02"].arcana-panel.is-saved::after,
[data-card="04"].arcana-panel.is-saving::after,
[data-card="04"].arcana-panel.is-saved::after,
[data-card="01"].arcana-target-panel.is-skill-active::after {
  z-index: 2 !important;
}

[data-card="01"] .arcana-skill-grid,
[data-card="02"] .arcana-equipment-list,
[data-card="04"] #arcanaOwnedCardGrid {
  overflow-x: hidden !important;
}

[data-card="01"] .arcana-skill-grid,
[data-card="02"] .arcana-equipment-list {
  overflow-y: hidden !important;
}

/* 드롭다운 메뉴는 fixed 레이어로 띄워 카드 내부 높이/스크롤을 밀지 않는다. */
.arcana-custom-select-menu.is-floating-menu {
  position: fixed !important;
  z-index: 9999 !important;
  top: var(--arcana-floating-menu-top, auto) !important;
  left: var(--arcana-floating-menu-left, 0px) !important;
  bottom: auto !important;
  width: var(--arcana-floating-menu-width, 100px) !important;
  max-height: var(--arcana-floating-menu-max-height, 150px) !important;
  margin: 0 !important;
}

.arcana-custom-select.is-drop-up .arcana-custom-select-button::after {
  content: '⌃';
}