@charset "UTF-8";
.avatar {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
  /* ‘γ‘ցFborder-radius: 50% ‚ΝŒέŠ·«‚ͺ‚‚’‚Μ‚Ε•Ή—p„§ */
  border-radius: 50%;
  margin: 0 auto;
}

.card {
  width: min(420px, calc(420 / 640 * 100vw));
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
}
.card__img {
  display: block;
  width: 100%;
  transition: transform 300ms ease;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* ŽΞ‚ί‰Ί‰E‚πΨ‚ι */
}
.card:hover .card__img {
  transform: scale(1.06);
}

.preview-wrap:has(#wave-clip) {
  position: relative;
  width: 100%;
  height: min(140px, calc(140 / 640 * 100vw));
  overflow: hidden;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}


.shape {
  width: min(320px, calc(320 / 640 * 100vw));
  aspect-ratio: 1 / 1;
  background-color: #3498db;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 600ms cubic-bezier(.2,.8,.2,1);
  margin: 0 auto;
  animation: is--open 3s ease-in-out infinite;
}
.shape.is--open {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 85%);
}
@keyframes is--open {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 85%);
  }
}


.preview-wrap:has(.hero-wave) {
  position: relative;
  width: 100%;
  height: min(140px, calc(140 / 640 * 100vw));
  overflow: hidden;
}
.hero-wave {
  position: absolute;
  bottom: min(20px, calc(20 / 640 * 100vw));
  height: min(360px, calc(360 / 640 * 100vw));
  overflow: hidden;
}
.hero-wave img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-wave h1 {
  position: absolute;
  left: min(20px, calc(20 / 640 * 100vw));
  bottom: min(20px, calc(20 / 640 * 100vw));
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.4);
}