:root {
  --color-invert: #ffffff;
  --color-invert2: #252424;
  --width: 70px;
  --height: 70px;
  --dark-black: #1c1c25;
  --smoke: #c4c4c4;
  --blue: #2a4bb3;
  --medium-black: #25252f;
  --black: #101016;
  --soft-black: #3b3b44;
  --dark-blue: #213e9a;
  --black-blue: #1f367e;
  --dark-red: #95234c;
  --dark-yellow: #b58622;
  --dark-purple: #4548a9;
  --red: #e72a6e;
  --yellow: #ecb236;
  --white-smoke: #f7efdd;
  --purple: #7174db;
  --green: #44ac9e;
  --dark-green: #267267;
  --light-blue: #536cbb;
}

.power-switch {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width);
  height: var(--height);
  background: radial-gradient(
    circle at top,
    var(--color-highlight),
    var(--color-primary)
  );
  border-radius: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5),
    /* 바깥 그림자 */ inset 0 8px 12px var(--color-highlight),
    /* 상단 하이라이트 */ inset 0 -12px 15px var(--color-shadow); /* 내부 음영 */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 4px solid rgba(0, 0, 0, 0.3);
  background-color: #ecb236;
}

.power-switch .button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.power-switch .button::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: radial-gradient(
    circle closest-side,
    var(--color-invert),
    transparent
  );
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: perspective(1px) translateZ(0);
  backface-visibility: hidden;
}

.power-switch .button .power-off {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  fill: none;
  stroke: var(--color-invert2);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.power-switch .button .power-on {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  fill: none;
  stroke: var(--color-invert);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.power-switch .button .power-on .line,
.power-switch .button .power-off .line {
  opacity: 0.2;
}

.power-switch .button .power-on .circle,
.power-switch .button .power-off .circle {
  opacity: 0.2;
  transform: rotate(-58deg);
  transform-origin: center 38px;
  stroke-dasharray: 220;
  stroke-dashoffset: 40;
}

.power-switch .button .power-on {
  filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.8));
}

.power-switch .button .power-on .line {
  opacity: 0;
  transition: opacity 0.3s ease 1s;
}

.power-switch .button .power-on .circle {
  opacity: 1;
  stroke-dashoffset: 220;
  transition: transform 0s ease, stroke-dashoffset 1s ease 0s;
}

.power-switch input {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

/* CSS */
/* .button-55 {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: 0.75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
} */

/* .button-55:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 4px -6px;
} */

.power-switch input:checked + .button::after {
  opacity: 0.15;
  transform: scale(2) perspective(1px) translateZ(0);
  backface-visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.power-switch input:checked + .button .power-on,
.power-switch input:checked + .button .power-off {
  animation: click-animation 0.3s ease forwards;
  transform: scale(1);
}

.power-switch input:checked + .button .power-on .line,
.power-switch input:checked + .button .power-off .line {
  animation: line-animation 0.8s ease-in forwards;
}

.power-switch input:checked + .button .power-on .circle,
.power-switch input:checked + .button .power-off .circle {
  transform: rotate(302deg);
}

.power-switch input:checked + .button .power-on .line {
  opacity: 1;
  transition: opacity 0.05s ease-in 0.55s;
}

.power-switch input:checked + .button .power-on .circle {
  transform: rotate(302deg);
  stroke-dashoffset: 40;
  transition: transform 0.4s ease 0.2s, stroke-dashoffset 0.4s ease 0.2s;
}

@keyframes line-animation {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-25px);
  }
  85% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes click-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* 🔹 기본 스타일 */
body {
  background: #1b1a23;
  height: 100vh;
  font: 400 16px "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  transform: scale(0.8);
  transition: opacity 0.3s ease-in-out,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
  width: 250px;
  top: 22xp;
  top: -100px;
  right: -100px;
}

/* ✅ 이미지 로드 후 바운스 효과 */
.loaded {
  opacity: 1;
  transform: scale(1);
  animation: shake 1s infinite alternate ease-in-out;
}

/* ✅ 계속 흔들리는 애니메이션 */
@keyframes shake {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.02) rotate(1deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.02) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}