/**
 * Multi-ring loader — auth-action · index 로그인/인증 전환 공용
 * cssbuttons.io @harmankanda.github.io/New · 차콜 단색
 */

.auth-ring-loader {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  color: #141414;
}

.pl {
  display: block;
  width: 5em;
  height: 5em;
}

.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pl__ring1 {
  opacity: 1;
  animation: pl-ring1 4s 0s ease-in-out infinite;
}

.pl__ring2 {
  opacity: 0.88;
  animation: pl-ring2 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
  opacity: 0.76;
  animation: pl-ring3 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
  opacity: 0.64;
  animation: pl-ring4 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
  opacity: 0.52;
  animation: pl-ring5 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
  opacity: 0.4;
  animation: pl-ring6 4s 0.2s ease-in-out infinite;
}

@keyframes pl-ring1 {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}

@keyframes pl-ring2 {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}

@keyframes pl-ring3 {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}

@keyframes pl-ring4 {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}

@keyframes pl-ring5 {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}

@keyframes pl-ring6 {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%,
  50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%,
  to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl__ring1,
  .pl__ring2,
  .pl__ring3,
  .pl__ring4,
  .pl__ring5,
  .pl__ring6 {
    animation: none;
    stroke-dashoffset: -94.247778;
    transform: rotate(0.5turn);
    opacity: 0.55;
  }
}

/* auth-action.html — panelLoading 인증 처리 중 링 로더 */