:root {
  --pink: #ff78ad;
  --pink-strong: #ff4d94;
  --pink-light: #fff0f6;

  --lilac: #a48cff;
  --lilac-light: #f1edff;

  --ink: #28232c;
  --sub: #817987;
  --line: #eee8ef;

  --cream: #fffafa;
  --paper: #ffffff;

  --radius-large: 34px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  color: var(--ink);

  background:
    #fffdfd;

  font-family:
    Arial,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    sans-serif;

  word-break: keep-all;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.site {
  min-height: 100vh;
  overflow: hidden;
}

.header {
  position: relative;
  z-index: 20;

  width: min(1180px, calc(100% - 48px));
  height: 80px;

  margin: 0 auto;

  display: flex;
  align-items: center;
}

.logo,
.footerLogo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo strong,
.footerLogo strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.logoFace {
  position: relative;

  width: 34px;
  height: 34px;

  display: block;

  border-radius: 13px 13px 15px 15px;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      #ff9ac5 58%,
      var(--lilac)
    );

  box-shadow:
    0 8px 20px rgba(255, 95, 158, 0.22);
}

.logoFace::before {
  content: "";

  position: absolute;

  left: 7px;
  right: 7px;
  top: 8px;
  bottom: 8px;

  border-radius: 10px;

  background: #fff;
}

.logoFace i {
  position: absolute;
  z-index: 2;

  top: 15px;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--pink-strong);
}

.logoFace i:first-child {
  left: 12px;
}

.logoFace i:last-child {
  right: 12px;
}

.nav {
  margin-left: 65px;

  display: flex;
  gap: 28px;

  color: #716a76;

  font-size: 12px;
  font-weight: 800;
}

.nav a {
  transition: .18s;
}

.nav a:hover {
  color: var(--pink-strong);
}

.headerRight {
  margin-left: auto;

  display: flex;
  gap: 8px;
}

.loginButton,
.downloadMini {
  height: 38px;
  padding: 0 16px;

  border-radius: 12px;

  font-size: 11px;
  font-weight: 900;
}

.loginButton {
  border: 1px solid var(--line);
  background: #fff;
}

.downloadMini {
  border: 0;

  color: #fff;
  background: var(--ink);
}

.hero {
  position: relative;

  width: min(1250px, calc(100% - 48px));
  min-height: 700px;

  margin: 15px auto 0;

  display: grid;
  grid-template-columns:
    minmax(0, .95fr)
    minmax(0, 1.05fr);

  align-items: center;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 20px 0 0;

  z-index: -3;

  border-radius: 44px;

  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(173, 151, 255, .17),
      transparent 28%
    ),
    radial-gradient(
      circle at 70% 58%,
      rgba(255, 133, 183, .19),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fff9fb,
      #fffefe
    );
}

.heroNoise {
  position: absolute;
  inset: 20px 0 0;

  z-index: -2;

  opacity: .35;

  background-image:
    radial-gradient(
      rgba(255, 90, 150, .16) 1px,
      transparent 1px
    );

  background-size:
    28px 28px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 58%,
      #000
    );
}

.heroCopy {
  padding-left: 70px;
}

.hello {
  margin: 0 0 18px;

  color: var(--pink-strong);

  font-size: 12px;
  font-weight: 900;
}

.hero h1 {
  margin: 0;

  font-size:
    clamp(54px, 5.2vw, 78px);

  line-height: 1.05;

  letter-spacing: -.075em;
}

.hero h1 em {
  color: transparent;

  font-style: normal;

  background:
    linear-gradient(
      90deg,
      #ff4d94,
      #ff78ad 45%,
      #9c83f6
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.heroDescription {
  max-width: 520px;

  margin: 28px 0 0;

  color: #756e7b;

  font-size: 15px;
  line-height: 1.9;
  letter-spacing: -.03em;
}

.heroButtons {
  margin-top: 31px;

  display: flex;
  align-items: center;
  gap: 22px;
}

.mainButton,
.finalButton {
  height: 52px;

  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  gap: 18px;

  color: #fff;

  border: 0;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #ff4e94,
      #ff79af
    );

  box-shadow:
    0 14px 32px rgba(255, 76, 148, .22);

  font-size: 12px;
  font-weight: 900;

  transition: .2s;
}

.mainButton:hover,
.finalButton:hover {
  transform: translateY(-2px);
}

.softLink {
  color: #5f5864;

  border-bottom:
    1px solid #cfc7d1;

  padding-bottom: 3px;

  font-size: 11px;
  font-weight: 800;
}

.memoryCloud {
  position: relative;

  min-height: 590px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.memoryOrbit {
  position: absolute;

  border:
    1px dashed
    rgba(158, 135, 190, .17);

  border-radius: 50%;
}

.orbitA {
  width: 440px;
  height: 440px;
}

.orbitB {
  width: 570px;
  height: 570px;
}

.memoryCenter {
  position: relative;
  z-index: 3;

  width: 200px;
  height: 200px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius:
    50% 48% 52% 48%;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fff3f8
    );

  border:
    1px solid rgba(255, 125, 176, .2);

  box-shadow:
    0 35px 80px rgba(87, 57, 91, .13);

  transform: rotate(-3deg);
}

.centerFace {
  position: relative;

  width: 70px;
  height: 62px;

  display: block;

  border-radius:
    26px 26px 30px 30px;

  background:
    linear-gradient(
      145deg,
      #ff78ad,
      #a98fff
    );
}

.centerFace::before {
  content: "";

  position: absolute;

  inset: 12px 13px;

  border-radius: 16px;

  background: #fff;
}

.centerFace i {
  position: absolute;
  z-index: 2;

  top: 29px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #ff5a9c;
}

.centerFace i:first-child {
  left: 25px;
}

.centerFace i:nth-child(2) {
  right: 25px;
}

.centerFace b {
  position: absolute;
  z-index: 2;

  left: 50%;
  top: 39px;

  width: 9px;
  height: 4px;

  transform:
    translateX(-50%);

  border-bottom:
    2px solid #ff72aa;

  border-radius: 50%;
}

.memoryCenter strong {
  margin-top: 13px;

  font-size: 14px;
}

.memoryCenter small {
  margin-top: 4px;

  color: #aaa2ad;

  font-size: 8px;
}

.memoryBubble {
  position: absolute;
  z-index: 4;

  min-width: 145px;

  padding: 12px 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border:
    1px solid rgba(231, 222, 234, .9);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, .9);

  box-shadow:
    0 18px 48px rgba(90, 60, 95, .11);

  backdrop-filter:
    blur(12px);
}

.memoryBubble > span {
  width: 33px;
  height: 33px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: var(--pink-strong);

  background: var(--pink-light);

  font-weight: 900;
}

.memoryBubble div {
  display: flex;
  flex-direction: column;
}

.memoryBubble small {
  color: #aaa3ae;
  font-size: 8px;
}

.memoryBubble strong {
  margin-top: 3px;
  font-size: 12px;
}

.bubble1 {
  top: 95px;
  left: 55px;

  transform:
    rotate(-5deg);
}

.bubble2 {
  top: 115px;
  right: 20px;

  transform:
    rotate(4deg);
}

.bubble3 {
  bottom: 100px;
  left: 5px;

  transform:
    rotate(3deg);
}

.bubble4 {
  right: 40px;
  bottom: 75px;

  transform:
    rotate(-4deg);
}

.heroSticker {
  position: absolute;
  z-index: 7;

  padding: 9px 13px;

  border-radius: 999px;

  background: #fff;

  box-shadow:
    0 13px 33px rgba(94, 65, 98, .1);

  font-size: 9px;
  font-weight: 900;
}

.stickerLive {
  top: 80px;
  left: 46%;

  display: flex;
  align-items: center;
  gap: 7px;

  color: #ff4d94;

  transform:
    rotate(-4deg);
}

.stickerLive span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ff4d94;

  box-shadow:
    0 0 0 5px
    rgba(255, 77, 148, .1);
}

.stickerMemory {
  right: 110px;
  top: 55px;

  color: #7869bb;

  transform:
    rotate(3deg);
}

.stickerRoulette {
  right: 60px;
  bottom: 90px;

  color: #ff5a9d;

  transform:
    rotate(-4deg);
}

.littlePromise {
  width:
    min(950px, calc(100% - 48px));

  margin: 110px auto 20px;

  padding: 35px;

  text-align: center;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.littlePromise p {
  margin: 0;

  color: #98909d;

  font-size: 13px;
}

.littlePromise strong {
  display: block;

  margin-top: 9px;

  font-size: 25px;

  letter-spacing: -.05em;
}

.storySection {
  width:
    min(1120px, calc(100% - 48px));

  margin: 130px auto;

  position: relative;
}

.rememberSection {
  display: grid;

  grid-template-columns:
    80px
    .9fr
    1.1fr;

  gap: 45px;
}

.storyNumber {
  color: #e6dfe8;

  font-size: 45px;
  font-weight: 900;

  writing-mode:
    vertical-rl;
}

.tinyLabel {
  display: inline-block;

  color: var(--pink-strong);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .1em;
}

.storyTitle h2,
.reactionCopy h2,
.playHeader h2,
.continueCopy h2,
.finalSection h2 {
  margin:
    14px 0 20px;

  font-size:
    clamp(38px, 4.2vw, 57px);

  line-height: 1.13;

  letter-spacing: -.065em;
}

.storyTitle h2 em,
.playHeader h2 em,
.continueCopy h2 em,
.finalSection h2 em {
  color: #aaa1ad;

  font-style: normal;
}

.storyTitle p,
.reactionCopy p,
.playHeader p,
.continueSteps p,
.finalSection p {
  color: var(--sub);

  font-size: 13px;
  line-height: 1.85;

  letter-spacing: -.02em;
}

.memoryNotes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memoryNote {
  min-height: 115px;

  padding: 19px 20px;

  display: grid;
  grid-template-columns:
    35px 1fr auto;

  align-items: center;
  gap: 13px;

  border:
    1px solid var(--line);

  border-radius: 19px;

  background: #fff;

  box-shadow:
    0 10px 30px rgba(83, 61, 86, .04);

  transition: .2s;
}

.memoryNote:nth-child(2) {
  margin-left: 34px;
}

.memoryNote:hover {
  transform:
    translateX(5px);
}

.noteNumber {
  color: #cabfce;

  font-size: 10px;
  font-weight: 900;
}

.memoryNote h3 {
  margin: 0;

  font-size: 15px;
}

.memoryNote p {
  margin: 6px 0 0;

  color: #938b96;

  font-size: 10px;
  line-height: 1.6;
}

.noteCheck {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--pink-strong);

  border-radius: 50%;

  background: var(--pink-light);

  font-size: 11px;
  font-weight: 900;
}

.reactionSection {
  width:
    min(1180px, calc(100% - 48px));

  margin: 150px auto;

  padding: 80px 70px;

  display: grid;
  grid-template-columns:
    1.1fr .9fr;

  align-items: center;
  gap: 80px;

  border-radius:
    46px 46px 90px 46px;

  background:
    linear-gradient(
      145deg,
      #fff4f8,
      #f8f4ff
    );
}

.reactionStage {
  position: relative;

  min-height: 350px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.chat {
  position: relative;
  z-index: 2;

  width: 90%;

  padding: 17px;

  display: grid;
  grid-template-columns:
    42px 1fr auto;

  align-items: center;
  gap: 12px;

  border:
    1px solid rgba(231, 222, 233, .85);

  border-radius: 21px;

  background:
    rgba(255, 255, 255, .88);

  box-shadow:
    0 19px 45px rgba(97, 69, 100, .08);

  backdrop-filter:
    blur(10px);
}

.chatB {
  margin-left: 55px;
}

.chatAvatar {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  font-size: 12px;
  font-weight: 900;
}

.pinkAvatar {
  color: #d94f87;
  background: #ffe5ef;
}

.lilacAvatar {
  color: #7765c3;
  background: #eee9ff;
}

.chat strong {
  display: block;
  font-size: 11px;
}

.chat small {
  display: block;
  margin-top: 4px;

  color: #aaa3ad;

  font-size: 8px;
}

.chat > b {
  color: var(--pink-strong);
  font-size: 10px;
}

.reactionHeart {
  position: absolute;

  color: #ff8ab8;

  font-size: 22px;

  animation:
    floatHeart 4s ease-in-out infinite;
}

.heart1 {
  left: 20px;
  top: 25px;
}

.heart2 {
  right: 40px;
  top: 80px;

  animation-delay: .8s;
}

.heart3 {
  right: 100px;
  bottom: 25px;

  animation-delay: 1.6s;
}

@keyframes floatHeart {
  0%,
  100% {
    transform:
      translateY(0) rotate(-7deg);
  }

  50% {
    transform:
      translateY(-12px) rotate(7deg);
  }
}

.reactionCopy {
  max-width: 440px;
}

.reactionSmall {
  margin-top: 20px;

  color: #a79dab !important;

  font-size: 11px !important;
}

.playSection {
  width:
    min(1180px, calc(100% - 48px));

  margin: 160px auto;

  text-align: center;
}

.playHeader {
  max-width: 700px;

  margin: 0 auto;
}

.playRail {
  margin-top: 55px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 11px;
}

.playTicket {
  width: 135px;
  height: 165px;

  padding: 15px;

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  text-align: left;

  border:
    1px solid var(--line);

  border-radius:
    18px 18px 34px 18px;

  background: #fff;

  box-shadow:
    0 14px 35px rgba(87, 64, 90, .05);

  transition: .2s;
}

.playTicket:nth-child(even) {
  transform:
    translateY(22px);
}

.playTicket:hover {
  transform:
    translateY(-6px)
    rotate(-2deg);
}

.playTicket:nth-child(even):hover {
  transform:
    translateY(15px)
    rotate(2deg);
}

.playTicket > span {
  color: #c7beca;

  font-size: 9px;
  font-weight: 900;
}

.playTicket strong {
  font-size: 18px;
  letter-spacing: -.04em;
}

.playTicket i {
  color: var(--pink);

  font-size: 13px;
  font-style: normal;
}

.ticket2,
.ticket6 {
  background: #fff4f8;
}

.ticket4,
.ticket8 {
  background: #f5f1ff;
}

.playFoot {
  margin-top: 65px;

  color: #aaa2ad;

  font-size: 11px;
}

.continueSection {
  width:
    min(1120px, calc(100% - 48px));

  margin: 180px auto;

  position: relative;
}

.continueLine {
  position: absolute;

  left: -170px;
  top: 95px;

  width: 260px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      #f5a4c4
    );
}

.continueCopy {
  max-width: 750px;
}

.continueSteps {
  margin-top: 60px;

  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 13px;
}

.continueSteps article {
  min-height: 275px;

  padding: 25px;

  border-top:
    2px solid #ff8ab7;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fffafb
    );
}

.continueSteps article:nth-child(2) {
  border-top-color: #b19bff;
}

.continueSteps article:nth-child(3) {
  border-top-color: #8fc8bc;
}

.stepIcon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: var(--pink-strong);

  background: var(--pink-light);

  font-size: 17px;
  font-weight: 900;
}

.continueSteps small {
  display: block;

  margin-top: 32px;

  color: #b2a9b5;

  font-size: 8px;
  font-weight: 900;
}

.continueSteps h3 {
  margin: 9px 0 10px;

  font-size: 19px;
  line-height: 1.35;

  letter-spacing: -.045em;
}

.platformRibbon {
  width:
    min(1180px, calc(100% - 48px));

  margin: 130px auto;

  padding: 28px 38px;

  display: grid;
  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items: center;
  gap: 25px;

  color: #fff;

  border-radius: 26px;

  background:
    linear-gradient(
      105deg,
      #3a303b,
      #27232d
    );
}

.platformRibbon > div {
  display: flex;
  flex-direction: column;
}

.platformRibbon span {
  color: #c5bac7;
  font-size: 8px;
}

.platformRibbon strong {
  margin: 4px 0;

  font-size: 17px;
}

.platformRibbon small {
  color: #8f8592;
  font-size: 8px;
}

.platformRibbon i {
  color: #665b69;

  font-size: 18px;
  font-style: normal;
}

.finalSection {
  width:
    min(1120px, calc(100% - 48px));

  margin:
    160px auto 100px;

  padding:
    100px 30px;

  position: relative;

  text-align: center;

  border-radius:
    70px 70px 30px 70px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 136, 183, .2),
      transparent 28%
    ),
    radial-gradient(
      circle at 80% 85%,
      rgba(163, 142, 255, .22),
      transparent 30%
    ),
    #fff8fb;
}

.finalSection h2 {
  font-size:
    clamp(42px, 5vw, 68px);
}

.finalSection p {
  margin:
    0 auto 28px;

  max-width: 500px;
}

.finalButton {
  margin-top: 5px;
}

.version {
  display: block;

  margin-top: 13px;

  color: #b4abb6;

  font-size: 8px;
}

.finalSticker {
  position: absolute;

  top: 30px;
  right: 40px;

  padding:
    9px 13px;

  color: #ff5b9e;

  border:
    1px solid #f8d8e5;

  border-radius: 999px;

  background: #fff;

  font-size: 9px;
  font-weight: 900;

  transform:
    rotate(4deg);
}

.footer {
  width:
    min(1120px, calc(100% - 48px));

  margin: 0 auto;

  padding:
    35px 0 50px;

  display: flex;
  align-items: center;

  border-top:
    1px solid var(--line);
}

.smallFace {
  width: 28px;
  height: 28px;
}

.smallFace i {
  top: 12px;
}

.smallFace i:first-child {
  left: 10px;
}

.smallFace i:last-child {
  right: 10px;
}

.footerLinks {
  margin-left: 50px;

  display: flex;
  gap: 22px;

  color: #8e8691;

  font-size: 9px;
  font-weight: 700;
}

.footer > small {
  margin-left: auto;

  color: #b6adb8;

  font-size: 8px;
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;

    padding:
      80px 0 30px;
  }

  .heroCopy {
    padding:
      0 45px;
  }

  .memoryCloud {
    min-height: 520px;
  }

  .rememberSection,
  .reactionSection {
    grid-template-columns: 1fr;
  }

  .storyNumber {
    display: none;
  }

  .reactionSection {
    gap: 35px;
  }

  .continueSteps {
    grid-template-columns: 1fr;
  }

  .platformRibbon {
    grid-template-columns: 1fr;
  }

  .platformRibbon > i {
    transform: rotate(90deg);
  }
}

@media (max-width: 680px) {
  .header,
  .hero,
  .littlePromise,
  .storySection,
  .reactionSection,
  .playSection,
  .continueSection,
  .platformRibbon,
  .finalSection,
  .footer {
    width:
      calc(100% - 28px);
  }

  .header {
    height: 70px;
  }

  .loginButton {
    display: none;
  }

  .hero {
    margin-top: 5px;
  }

  .hero::before {
    border-radius: 28px;
  }

  .heroCopy {
    padding:
      20px 22px 0;
  }

  .hero h1 {
    font-size: 48px;
  }

  .heroDescription br {
    display: none;
  }

  .heroButtons {
    align-items: flex-start;
    flex-direction: column;
  }

  .memoryCloud {
    min-height: 460px;

    transform:
      scale(.85);

    margin:
      -20px -60px;
  }

  .heroSticker {
    display: none;
  }

  .littlePromise {
    margin-top: 75px;
  }

  .littlePromise strong {
    font-size: 20px;
  }

  .storySection,
  .playSection,
  .continueSection {
    margin:
      100px auto;
  }

  .memoryNote:nth-child(2) {
    margin-left: 0;
  }

  .reactionSection {
    margin:
      100px auto;

    padding:
      50px 22px;

    border-radius:
      28px 28px 55px 28px;
  }

  .reactionStage {
    min-height: 280px;
  }

  .chat {
    width: 100%;
  }

  .chatB {
    margin-left: 0;
  }

  .playTicket {
    width:
      calc(50% - 7px);
  }

  .platformRibbon {
    margin:
      90px auto;
  }

  .finalSection {
    margin:
      100px auto 70px;

    padding:
      80px 22px;

    border-radius:
      42px 42px 22px 42px;
  }

  .finalSticker {
    display: none;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .footerLinks {
    margin-left: 0;

    flex-wrap: wrap;
  }

  .footer > small {
    margin-left: 0;
  }
}
/* =========================================================
   CHAECHAE_SERVICE_PAGES_V3
========================================================= */

.subPage {
  min-height:100vh;
  background:#fffdfd;
}

.subHeader {
  width:min(1080px, calc(100% - 48px));
  height:76px;
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.subBack {
  color:#8f8792;
  font-size:11px;
  font-weight:800;
}

.subBack:hover {
  color:var(--pink-strong);
}

.subHero {
  width:min(1080px, calc(100% - 48px));
  margin:55px auto 0;
}

.subKicker {
  display:inline-block;

  color:var(--pink-strong);

  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.subHero h1 {
  margin:14px 0 18px;

  font-size:clamp(46px, 6vw, 74px);
  line-height:1.05;
  letter-spacing:-.075em;
}

.subHero h1 em {
  color:#a79eaa;
  font-style:normal;
}

.subLead {
  max-width:580px;

  margin:0;

  color:var(--sub);

  font-size:14px;
  line-height:1.85;
}

.subContent {
  width:min(1080px, calc(100% - 48px));
  margin:65px auto 120px;
}

.downloadPanelV3 {
  padding:28px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;

  border:1px solid var(--line);
  border-radius:25px;

  background:
    linear-gradient(
      135deg,
      #fff,
      #fff4f8
    );

  box-shadow:
    0 24px 60px rgba(94, 66, 97, .08);
}

.downloadLogoV3 {
  width:66px;
  height:66px;

  display:grid;
  place-items:center;

  color:#fff;

  border-radius:21px;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      var(--lilac)
    );

  font-size:20px;
  font-weight:900;
}

.downloadInfoV3 small {
  color:var(--pink-strong);

  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}

.downloadInfoV3 h2 {
  margin:5px 0;

  font-size:21px;
  letter-spacing:-.04em;
}

.downloadInfoV3 p {
  margin:0;

  color:#99909d;

  font-size:10px;
}

.disabledDownloadV3 {
  height:44px;
  padding:0 17px;

  border:0;
  border-radius:13px;

  color:#aaa2ad;
  background:#eeeaf0;

  font-size:10px;
  font-weight:900;

  cursor:not-allowed;
}

.infoNoteV3 {
  margin-top:14px;
  padding:15px 17px;

  color:#8b828f;

  border-radius:15px;

  background:#faf7fa;

  font-size:10px;
  line-height:1.7;
}

.updateListV3 {
  display:flex;
  flex-direction:column;
}

.updateItemV3 {
  padding:27px 0;

  display:grid;
  grid-template-columns:130px 1fr;
  gap:25px;

  border-bottom:1px solid var(--line);
}

.updateItemV3:first-child {
  border-top:1px solid var(--line);
}

.updateVersionV3 {
  color:var(--pink-strong);

  font-size:12px;
  font-weight:900;
}

.updateItemV3 small {
  display:block;
  margin-top:5px;

  color:#b0a7b2;
  font-size:8px;
}

.updateItemV3 h3 {
  margin:0 0 9px;

  font-size:18px;
}

.updateItemV3 p {
  margin:0;

  color:#817985;

  font-size:11px;
  line-height:1.75;
}

.moduleShelfV3,
.supportGridV3 {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:13px;
}

.moduleItemV3,
.supportItemV3 {
  min-height:210px;
  padding:24px;

  position:relative;

  border:1px solid var(--line);
  border-radius:22px;

  background:#fff;
}

.moduleItemV3:nth-child(2) {
  background:#fff5f9;
}

.moduleItemV3:nth-child(3) {
  background:#f6f3ff;
}

.moduleBadgeV3 {
  display:inline-block;

  padding:5px 8px;

  color:var(--pink-strong);

  border-radius:999px;

  background:var(--pink-light);

  font-size:8px;
  font-weight:900;
}

.moduleItemV3 h3,
.supportItemV3 h3 {
  margin:28px 0 8px;

  font-size:20px;
  letter-spacing:-.045em;
}

.moduleItemV3 p,
.supportItemV3 p {
  margin:0;

  color:#89818c;

  font-size:11px;
  line-height:1.7;
}

.moduleItemV3 strong {
  position:absolute;
  right:20px;
  bottom:20px;

  color:#b3aab5;
  font-size:16px;
}

.djDoorV3 {
  min-height:400px;

  padding:55px;

  position:relative;

  overflow:hidden;

  border-radius:35px;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(171, 149, 255, .28),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255, 121, 174, .25),
      transparent 34%
    ),
    #2a252e;

  color:#fff;
}

.djDoorV3 small {
  color:#ff94bd;

  font-size:9px;
  font-weight:900;
}

.djDoorV3 h2 {
  max-width:570px;

  margin:14px 0;

  font-size:44px;
  line-height:1.14;
  letter-spacing:-.065em;
}

.djDoorV3 p {
  max-width:480px;

  color:#aaa1ad;

  font-size:12px;
  line-height:1.8;
}

.djPreviewV3 {
  position:absolute;

  right:45px;
  bottom:-45px;

  width:280px;
  height:250px;

  padding:26px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:28px 28px 0 0;

  background:rgba(255,255,255,.08);

  backdrop-filter:blur(15px);

  transform:rotate(4deg);
}

.djPreviewV3 span {
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      var(--lilac)
    );

  font-weight:900;
}

.djPreviewV3 b {
  display:block;
  margin-top:18px;

  font-size:19px;
}

.djPreviewV3 p {
  margin-top:7px;
  font-size:9px;
}

.comingButtonV3 {
  margin-top:25px;

  display:inline-flex;

  padding:11px 15px;

  color:#a79fa9;

  border-radius:12px;

  background:#fff;

  font-size:9px;
  font-weight:900;
}

.supportItemV3 a {
  display:inline-block;
  margin-top:25px;

  color:var(--pink-strong);

  font-size:9px;
  font-weight:900;
}

@media(max-width:680px) {
  .subHeader,
  .subHero,
  .subContent {
    width:calc(100% - 28px);
  }

  .downloadPanelV3 {
    grid-template-columns:auto 1fr;
  }

  .disabledDownloadV3 {
    grid-column:1 / -1;
  }

  .updateItemV3 {
    grid-template-columns:1fr;
    gap:10px;
  }

  .moduleShelfV3,
  .supportGridV3 {
    grid-template-columns:1fr;
  }

  .djDoorV3 {
    padding:35px 24px;
  }

  .djDoorV3 h2 {
    font-size:36px;
  }

  .djPreviewV3 {
    display:none;
  }
}
/* =========================================================
   CHAECHAE_NAV_LOGIN_V41
========================================================= */

.siteHeader {
  position: relative;
  z-index: 50;
  width: min(1180px, calc(100% - 48px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.siteNav {
  margin-left: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  color: #746d78;
  font-size: 11px;
  font-weight: 800;
}

.siteNav a {
  position: relative;
  padding: 8px 0;
}

.siteNav a:hover {
  color: var(--pink-strong);
}

.siteHeaderActions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.siteLogin,
.siteDownload {
  height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 900;
}

.siteLogin {
  color: #5f5864;
  border: 1px solid var(--line);
  background: #fff;
}

.siteDownload {
  color: #fff;
  background: var(--ink);
}

.siteLogin:hover {
  color: var(--pink-strong);
  background: #fff8fb;
}

.loginPage {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 130, 181, .13),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 70%,
      rgba(164, 140, 255, .14),
      transparent 30%
    ),
    #fffdfd;
}

.loginStage {
  width: min(1000px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 430px;
  align-items: center;
  gap: 90px;
}

.loginIntro h1 {
  margin: 14px 0 20px;
  font-size: clamp(50px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -.075em;
}

.loginIntro h1 em {
  color: transparent;
  font-style: normal;
  background:
    linear-gradient(
      90deg,
      var(--pink-strong),
      var(--pink),
      var(--lilac)
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.loginIntro p {
  color: var(--sub);
  font-size: 14px;
  line-height: 1.8;
}

.loginCard {
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 30px 80px rgba(84, 60, 88, .1);
}

.loginLogoFace {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
}

.loginLogoFace i {
  top: 20px;
}

.loginLogoFace i:first-child {
  left: 16px;
}

.loginLogoFace i:last-child {
  right: 16px;
}

.loginCard h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.05em;
}

.loginCard > p {
  margin: 10px 0 25px;
  color: #918894;
  font-size: 11px;
  line-height: 1.75;
}

.spoonLoginButton,
.accountLoginButton {
  width: 100%;
  height: 50px;
  padding: 0 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 14px;

  font-size: 11px;
  font-weight: 900;

  cursor: not-allowed;
}

.spoonLoginButton {
  color: #fff;
  border: 0;
  background:
    linear-gradient(
      135deg,
      var(--pink-strong),
      var(--pink)
    );
}

.accountLoginButton {
  color: #5d5661;
  border: 1px solid var(--line);
  background: #fff;
}

.spoonLoginButton span,
.accountLoginButton span {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 7px;
}

.spoonLoginButton span {
  background: rgba(255,255,255,.18);
}

.accountLoginButton span {
  color: #a59da8;
  background: #f4f1f4;
}

.loginDivider {
  margin: 16px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.loginDivider span {
  height: 1px;
  background: var(--line);
}

.loginDivider small {
  color: #b0a8b2;
  font-size: 8px;
}

.loginNotice {
  display: block;
  margin-top: 17px;
  color: #b0a8b2;
  text-align: center;
  font-size: 8px;
}

@media(max-width:900px) {
  .siteNav {
    display: none;
  }

  .loginStage {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 70px 0;
  }

  .loginIntro {
    text-align: center;
  }

  .loginCard {
    width: min(430px, 100%);
    margin: 0 auto;
  }
}

@media(max-width:680px) {
  .siteHeader {
    width: calc(100% - 28px);
    height: 70px;
  }

  .siteLogin {
    display: none;
  }

  .siteDownload {
    height: 36px;
    padding: 0 12px;
  }

  .loginStage {
    width: calc(100% - 28px);
  }

  .loginIntro h1 {
    font-size: 48px;
  }

  .loginCard {
    padding: 27px 22px;
  }
}
/* =========================================================
   CHAECHAE_REAL_LOGIN_V5
========================================================= */

.siteMyPage {
  height:38px;
  padding:0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:var(--pink-strong);

  border-radius:12px;

  background:var(--pink-light);

  font-size:10px;
  font-weight:900;
}

.siteMyPage:hover {
  background:#ffe5ef;
}

.loginCardHello {
  display:block;

  margin-bottom:8px;

  color:var(--pink-strong);

  font-size:9px;
  font-weight:900;
}

.realLoginForm {
  display:flex;
  flex-direction:column;
  gap:13px;
}

.realLoginForm label {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.realLoginForm label > span {
  color:#69616d;

  font-size:9px;
  font-weight:900;
}

.realLoginForm input {
  width:100%;
  height:48px;

  padding:0 15px;

  color:var(--ink);

  outline:none;

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

  font-size:11px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.realLoginForm input::placeholder {
  color:#b9b1bb;
}

.realLoginForm input:focus {
  border-color:#f2a9c6;

  box-shadow:
    0 0 0 4px
    rgba(255, 104, 166, .08);
}

.realLoginForm input:disabled {
  opacity:.6;
}

.loginHelp,
.loginError {
  min-height:17px;

  margin:0;

  font-size:9px;
  line-height:1.6;
}

.loginHelp {
  color:#aaa2ad;
}

.loginError {
  color:#e04e81;
}

.realLoginButton {
  width:100%;
  height:51px;

  padding:0 17px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#fff;

  border:0;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      var(--pink-strong),
      var(--pink)
    );

  box-shadow:
    0 13px 30px
    rgba(255, 76, 148, .19);

  font-size:11px;
  font-weight:900;
}

.realLoginButton:disabled {
  opacity:.65;
  cursor:wait;
}

.realLoginButton b {
  font-size:15px;
}

.loginSecurity {
  display:block;

  margin-top:17px;

  color:#b0a8b2;

  text-align:center;

  font-size:8px;
}

.myPage {
  min-height:100vh;

  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(255, 124, 178, .1),
      transparent 26%
    ),
    #fffdfd;
}

.myPageHero,
.myPageContent {
  width:
    min(1080px, calc(100% - 48px));

  margin-left:auto;
  margin-right:auto;
}

.myPageHero {
  padding-top:70px;
}

.myWelcome {
  margin:
    13px 0 5px;

  color:#9f969f;

  font-size:12px;
}

.myPageHero h1 {
  margin:0;

  font-size:
    clamp(50px, 6vw, 74px);

  line-height:1.05;

  letter-spacing:-.075em;
}

.myPageHero h1 em {
  color:transparent;

  font-style:normal;

  background:
    linear-gradient(
      90deg,
      var(--pink-strong),
      var(--pink),
      var(--lilac)
    );

  -webkit-background-clip:text;
  background-clip:text;
}

.myPageHero > p:last-child {
  margin-top:22px;

  color:var(--sub);

  font-size:13px;
  line-height:1.85;
}

.myPageContent {
  margin-top:55px;
  padding-bottom:100px;
}

.accountCard {
  padding:22px;

  display:grid;
  grid-template-columns:
    auto 1fr auto;

  align-items:center;
  gap:15px;

  border:1px solid var(--line);
  border-radius:23px;

  background:
    linear-gradient(
      135deg,
      #fff,
      #fff5f9
    );

  box-shadow:
    0 18px 45px
    rgba(92, 63, 94, .06);
}

.accountAvatar {
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  color:#fff;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      var(--lilac)
    );

  font-size:17px;
  font-weight:900;
}

.accountIdentity {
  display:flex;
  flex-direction:column;
}

.accountIdentity small {
  color:#aaa2ad;
  font-size:8px;
}

.accountIdentity strong {
  margin-top:4px;
  font-size:16px;
}

.accountIdentity span {
  margin-top:2px;

  color:#8e8691;

  font-size:9px;
}

.accountConnected {
  padding:6px 9px;

  color:#4f966f;

  border-radius:999px;

  background:#eff9f3;

  font-size:8px;
  font-weight:900;
}

.myPageGrid {
  margin-top:15px;

  display:grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap:13px;
}

.myPageGrid article {
  min-height:210px;

  padding:23px;

  position:relative;

  border:1px solid var(--line);
  border-radius:21px;

  background:#fff;
}

.myPageGrid article:nth-child(2) {
  background:#fff7fa;
}

.myPageGrid article:nth-child(3) {
  background:#f7f4ff;
}

.myPageGrid article > span {
  color:#c4bbc6;

  font-size:9px;
  font-weight:900;
}

.myPageGrid h2 {
  margin:
    35px 0 8px;

  font-size:19px;
  letter-spacing:-.045em;
}

.myPageGrid p {
  margin:0;

  color:#8c848f;

  font-size:10px;
  line-height:1.7;
}

.myPageGrid b {
  position:absolute;

  left:23px;
  bottom:22px;

  color:var(--pink-strong);

  font-size:8px;
}

.logoutButton {
  margin-top:22px;

  padding:10px 14px;

  color:#827985;

  border:1px solid var(--line);
  border-radius:12px;

  background:#fff;

  font-size:9px;
  font-weight:900;
}

.logoutButton:hover {
  color:#d94e81;
  background:#fff7fa;
}

@media(max-width:760px) {
  .siteMyPage {
    display:none;
  }

  .myPageHero,
  .myPageContent {
    width:calc(100% - 28px);
  }

  .myPageGrid {
    grid-template-columns:1fr;
  }

  .accountCard {
    grid-template-columns:auto 1fr;
  }

  .accountConnected {
    grid-column:1 / -1;
    width:max-content;
  }
}
/* =========================================================
   CHAE_ACCOUNT_RECOVERY_V6
========================================================= */

.loginRecoveryLinks {
  margin-top:18px;
  padding-top:16px;

  border-top:1px solid var(--line);

  text-align:center;
}

.loginRecoveryLinks > span {
  display:block;

  margin-bottom:8px;

  color:#aaa2ad;

  font-size:8px;
}

.loginRecoveryLinks > div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
}

.loginRecoveryLinks a {
  color:#756d79;

  font-size:9px;
  font-weight:900;
}

.loginRecoveryLinks a:hover {
  color:var(--pink-strong);
}

.loginRecoveryLinks i {
  width:1px;
  height:10px;

  background:var(--line);
}

.recoveryPage {
  min-height:100vh;

  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(255, 122, 176, .12),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(163, 140, 255, .12),
      transparent 30%
    ),
    #fffdfd;
}

.recoveryStage {
  width:min(1000px, calc(100% - 48px));
  min-height:650px;

  margin:0 auto;

  display:grid;
  grid-template-columns:
    1fr 430px;

  align-items:center;
  gap:85px;
}

.recoveryIntro h1 {
  margin:14px 0 20px;

  font-size:
    clamp(50px, 6vw, 74px);

  line-height:1.05;

  letter-spacing:-.075em;
}

.recoveryIntro h1 em {
  color:transparent;

  font-style:normal;

  background:
    linear-gradient(
      90deg,
      var(--pink-strong),
      var(--pink),
      var(--lilac)
    );

  -webkit-background-clip:text;
  background-clip:text;
}

.recoveryIntro p {
  margin:0;

  color:var(--sub);

  font-size:13px;
  line-height:1.85;
}

.recoveryCard {
  padding:36px;

  border:1px solid var(--line);
  border-radius:30px;

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 28px 75px
    rgba(86, 60, 91, .09);
}

.recoveryCardLabel {
  display:inline-block;

  padding:6px 9px;

  color:var(--pink-strong);

  border-radius:999px;

  background:var(--pink-light);

  font-size:8px;
  font-weight:900;
}

.recoveryCard h2 {
  margin:14px 0 8px;

  font-size:23px;
  letter-spacing:-.05em;
}

.recoveryCard > p {
  margin:0 0 25px;

  color:#918995;

  font-size:10px;
  line-height:1.7;
}

.recoveryForm {
  display:flex;
  flex-direction:column;
  gap:13px;
}

.recoveryForm label {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.recoveryForm label > span {
  color:#69616d;

  font-size:9px;
  font-weight:900;
}

.recoveryForm input {
  width:100%;
  height:48px;

  padding:0 14px;

  outline:none;

  color:var(--ink);

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

  font-size:11px;
}

.recoveryForm input:focus {
  border-color:#f0a9c4;

  box-shadow:
    0 0 0 4px
    rgba(255, 104, 166, .08);
}

.tagInputShell {
  height:48px;

  padding-left:14px;

  display:flex;
  align-items:center;

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;
}

.tagInputShell:focus-within {
  border-color:#f0a9c4;

  box-shadow:
    0 0 0 4px
    rgba(255, 104, 166, .08);
}

.tagInputShell b {
  color:var(--pink-strong);

  font-size:12px;
}

.tagInputShell input {
  height:44px;

  border:0;
  box-shadow:none !important;
}

.recoveryHint,
.recoveryGuide {
  margin:0;

  color:#aaa2ad;

  font-size:9px;
  line-height:1.65;
}

.recoveryGuide {
  margin:18px 0;
}

.recoveryGuide b {
  color:#665d69;
}

.recoveryGuide.small {
  margin-top:12px;
}

.recoveryError {
  margin:0;

  color:#df4f81;

  font-size:9px;
  line-height:1.6;
}

.recoveryMainButton {
  width:100%;
  height:50px;

  margin-top:3px;

  color:#fff;

  border:0;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      var(--pink-strong),
      var(--pink)
    );

  box-shadow:
    0 13px 30px
    rgba(255, 76, 148, .17);

  font-size:10px;
  font-weight:900;
}

.recoveryMainButton:disabled {
  opacity:.55;
}

.recoveryTextButton {
  width:100%;

  margin-top:10px;

  color:#9a919d;

  border:0;

  background:transparent;

  font-size:8px;
  font-weight:800;
}

.recoverySpoonUser {
  padding:15px;

  display:flex;
  flex-direction:column;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #fff5f9,
      #f8f5ff
    );
}

.recoverySpoonUser small {
  color:#aaa2ad;

  font-size:7px;
}

.recoverySpoonUser strong {
  margin-top:4px;

  font-size:14px;
}

.recoverySpoonUser span {
  margin-top:2px;

  color:#978e9a;

  font-size:8px;
}

.recoveryCode {
  padding:18px;

  color:var(--pink-strong);

  border:1px dashed #efb7ce;
  border-radius:16px;

  background:#fff8fb;

  text-align:center;

  font-size:24px;
  font-weight:900;

  letter-spacing:.08em;

  user-select:all;
}

.recoveryVerified {
  padding:10px 12px;

  color:#4d946d;

  border-radius:12px;

  background:#eff9f3;

  font-size:9px;
  font-weight:900;
}

.recoveryResult {
  padding:28px 0 5px;

  text-align:center;
}

.recoveryResult > span {
  color:var(--pink-strong);

  font-size:9px;
  font-weight:900;
}

.recoveryResult p {
  margin:15px 0 5px;

  color:#98909b;

  font-size:9px;
}

.recoveryResult strong {
  display:block;

  margin-bottom:22px;

  font-size:27px;

  letter-spacing:-.04em;
}

.recoveryResult a {
  display:inline-flex;

  padding:11px 15px;

  color:#fff;

  border-radius:12px;

  background:var(--ink);

  font-size:9px;
  font-weight:900;
}

.resetDoneText {
  font-size:20px !important;
}

@media(max-width:900px) {
  .recoveryStage {
    grid-template-columns:1fr;

    gap:40px;

    padding:65px 0;
  }

  .recoveryIntro {
    text-align:center;
  }

  .recoveryCard {
    width:min(430px, 100%);

    margin:0 auto;
  }
}

@media(max-width:680px) {
  .recoveryStage {
    width:calc(100% - 28px);
  }

  .recoveryIntro h1 {
    font-size:46px;
  }

  .recoveryCard {
    padding:27px 22px;
  }
}
/* =========================================================
   CHAE_RECOVERY_PIN_V722
========================================================= */

.recoveryPasswordDivider {
  height:1px;
  margin:5px 0;
  background:var(--line);
}

.recoveryResult .resetDoneText {
  font-size:18px;
  letter-spacing:-.04em;
}

.recoveryForm input[type="password"] {
  letter-spacing:.08em;
}

.recoveryForm input[type="password"]::placeholder {
  letter-spacing:0;
}
/* =========================================================
   CHAE_RECOVERY_UI_V73
========================================================= */

.recoveryPinCard {
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:
    minmax(0, .9fr)
    minmax(320px, 1.1fr);

  gap:42px;

  margin-top:18px;
  padding:30px 32px;

  border:1px solid
    rgba(235, 220, 231, .95);

  border-radius:26px;

  background:
    radial-gradient(
      circle at 4% 10%,
      rgba(255, 127, 177, .13),
      transparent 31%
    ),
    radial-gradient(
      circle at 94% 92%,
      rgba(178, 151, 255, .11),
      transparent 34%
    ),
    rgba(255,255,255,.94);

  box-shadow:
    0 22px 60px
    rgba(93, 64, 92, .07);
}

.recoveryPinIntro {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.recoveryPinIntro > span {
  width:max-content;

  padding:6px 9px;

  color:var(--pink-strong);

  border-radius:999px;

  background:var(--pink-light);

  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.recoveryPinIntro h2 {
  margin:17px 0 11px;

  color:var(--ink);

  font-size:27px;
  line-height:1.22;

  letter-spacing:-.055em;
}

.recoveryPinIntro p {
  max-width:310px;

  margin:0;

  color:#8f8793;

  font-size:10px;
  line-height:1.75;
}

.recoveryPinForm {
  display:flex;
  flex-direction:column;

  gap:12px;

  padding:21px;

  border:1px solid
    rgba(235, 220, 231, .9);

  border-radius:20px;

  background:
    rgba(255,255,255,.86);
}

.pinStatus {
  min-height:42px;

  padding:10px 12px;

  display:flex;
  align-items:center;

  gap:9px;

  border-radius:13px;

  background:#faf7fa;
}

.pinStatus strong {
  color:#69616d;

  font-size:9px;
  font-weight:850;
}

.pinDot {
  flex:0 0 auto;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#cec7d0;
}

.pinDot.active {
  background:#58b883;

  box-shadow:
    0 0 0 4px
    rgba(88,184,131,.11);
}

.recoveryPinForm label {
  display:flex;
  flex-direction:column;

  gap:7px;
}

.recoveryPinForm label > span {
  color:#69616d;

  font-size:9px;
  font-weight:900;
}

.recoveryPinForm input {
  box-sizing:border-box;

  width:100%;
  height:48px;

  padding:0 14px;

  outline:none;

  color:var(--ink);

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

  font-size:11px;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

.recoveryPinForm input:focus {
  border-color:#f0a9c4;

  box-shadow:
    0 0 0 4px
    rgba(255,104,166,.08);
}

.recoveryPinForm button {
  width:100%;
  height:49px;

  margin-top:2px;

  border:0;
  border-radius:14px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ff4f91,
      #ff6da8
    );

  box-shadow:
    0 13px 28px
    rgba(255,79,145,.18);

  font-size:10px;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .16s ease,
    opacity .16s ease;
}

.recoveryPinForm button:not(:disabled):hover {
  transform:translateY(-1px);
}

.recoveryPinForm button:disabled {
  opacity:.45;
  cursor:not-allowed;

  box-shadow:none;
}

.recoveryPinForm > small {
  display:block;

  margin-top:1px;

  color:#aaa1ad;

  text-align:center;

  font-size:8px;
  line-height:1.6;
}

.pinMessage {
  margin:0;

  font-size:9px;
  line-height:1.6;
}

.pinMessage.error {
  color:#dc4f80;
}

.pinMessage.success {
  color:#4d966e;
}


/* ---------- recovery page polish ---------- */

.recoveryCard {
  position:relative;

  overflow:hidden;
}

.recoveryCard::after {
  content:"";

  position:absolute;

  right:-55px;
  bottom:-60px;

  width:155px;
  height:155px;

  pointer-events:none;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 125, 176, .08),
      transparent 68%
    );
}

.recoveryForm {
  position:relative;

  z-index:1;
}

.recoveryResult {
  position:relative;

  z-index:1;

  margin-top:8px;
  padding:28px 22px;

  border:1px solid
    rgba(238, 226, 235, .92);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fff8fb
    );
}

.recoveryResult > span {
  display:inline-flex;

  padding:6px 9px;

  border-radius:999px;

  background:var(--pink-light);
}

.recoveryResult strong {
  color:var(--ink);
}

.recoveryResult a {
  text-decoration:none;

  transition:
    transform .16s ease,
    opacity .16s ease;
}

.recoveryResult a:hover {
  transform:translateY(-1px);
}


/* ---------- mobile ---------- */

@media(max-width:900px) {
  .recoveryPinCard {
    grid-template-columns:1fr;

    gap:24px;

    padding:26px;
  }

  .recoveryPinIntro p {
    max-width:none;
  }
}

@media(max-width:680px) {
  .recoveryPinCard {
    padding:22px;

    border-radius:22px;
  }

  .recoveryPinIntro h2 {
    font-size:24px;
  }

  .recoveryPinForm {
    padding:17px;
  }
}
/* =========================================================
   CHAE_RECOVERY_UI_V74
========================================================= */

.recoveryPinCard {
  grid-template-columns:
    minmax(0, .78fr)
    minmax(360px, 1.22fr);

  gap:34px;

  padding:24px 28px;

  min-height:0;

  background:
    radial-gradient(
      circle at 2% 10%,
      rgba(255,127,177,.085),
      transparent 28%
    ),
    radial-gradient(
      circle at 98% 94%,
      rgba(178,151,255,.075),
      transparent 30%
    ),
    rgba(255,255,255,.96);

  box-shadow:
    0 18px 48px
    rgba(93,64,92,.055);
}

.recoveryPinIntro {
  padding-left:6px;
}

.recoveryPinIntro > span {
  padding:5px 8px;

  font-size:7px;
  letter-spacing:.07em;
}

.recoveryPinIntro h2 {
  margin:14px 0 9px;

  font-size:24px;
  line-height:1.2;
}

.recoveryPinIntro p {
  max-width:275px;

  font-size:9px;
  line-height:1.65;
}

.recoveryPinForm {
  gap:10px;

  padding:18px;

  border-radius:18px;
}

.pinStatus {
  min-height:38px;

  padding:9px 11px;

  border-radius:12px;
}

.pinStatus strong {
  font-size:8px;
}

.pinDot {
  width:7px;
  height:7px;
}

.recoveryPinForm label {
  gap:6px;
}

.recoveryPinForm label > span {
  font-size:8px;
}

.recoveryPinForm input {
  height:43px;

  padding:0 13px;

  border-radius:12px;

  font-size:10px;
}

.recoveryPinForm button {
  height:44px;

  margin-top:1px;

  border-radius:12px;

  font-size:9px;

  box-shadow:
    0 10px 22px
    rgba(255,79,145,.14);
}

.recoveryPinForm > small {
  font-size:7px;
}

.pinMessage {
  font-size:8px;
}

/* 카드 아래 목록이 너무 멀어 보이지 않게 */
.recoveryPinCard + .myPageGrid {
  margin-top:14px;
}

@media(max-width:900px) {
  .recoveryPinCard {
    grid-template-columns:1fr;

    gap:20px;

    padding:22px;
  }

  .recoveryPinIntro {
    padding-left:0;
  }

  .recoveryPinIntro p {
    max-width:none;
  }
}

@media(max-width:680px) {
  .recoveryPinCard {
    padding:19px;

    border-radius:20px;
  }

  .recoveryPinIntro h2 {
    font-size:22px;
  }

  .recoveryPinForm {
    padding:15px;
  }
}
/* =========================================================
   CHAE_RECOVERY_UI_V75
========================================================= */

.recoveryPinCard {
  grid-template-columns:
    minmax(250px, .72fr)
    minmax(390px, 1.28fr);

  gap:30px;

  padding:
    20px 26px;

  align-items:center;
}

.recoveryPinIntro {
  justify-content:flex-start;

  padding:
    4px 0 4px 4px;
}

.recoveryPinIntro > span {
  padding:
    5px 9px;

  font-size:7px;

  letter-spacing:-.01em;
}

.recoveryPinIntro h2 {
  margin:
    13px 0 8px;

  font-size:23px;

  line-height:1.18;
}

.recoveryPinIntro p {
  max-width:250px;

  color:#978e99;

  font-size:9px;

  line-height:1.6;
}

.recoveryPinForm {
  gap:9px;

  padding:16px 17px;

  border-radius:17px;
}

.pinStatus {
  min-height:36px;

  padding:
    8px 10px;
}

.recoveryPinForm input {
  height:42px;
}

.recoveryPinForm button {
  height:42px;
}

.recoveryPinForm > small {
  margin-top:0;
}

.recoveryPinCard + .myPageGrid {
  margin-top:12px;
}

@media(max-width:900px) {
  .recoveryPinCard {
    grid-template-columns:1fr;

    gap:18px;

    padding:21px;
  }

  .recoveryPinIntro {
    padding:0;
  }
}

@media(max-width:680px) {
  .recoveryPinIntro h2 {
    font-size:21px;
  }

  .recoveryPinForm {
    padding:15px;
  }
}
@media(max-width:680px){.siteHeader{height:auto;min-height:70px;flex-wrap:wrap;gap:8px;padding:10px 0}.siteHeaderActions{display:flex;flex-wrap:wrap;gap:6px}.siteLogin{display:inline-flex!important;align-items:center;padding:8px 10px;font-size:14px}.siteDownload{padding:0 10px}.siteNav{overflow-x:auto;max-width:100%}}

/* Mobile webviews avoid costly backdrop repaint during scrolling. */
html{scroll-behavior:auto}#remember{scroll-margin-top:24px}#remember:focus{outline:none}
@media(max-width:768px){.memoryBubble,.chat,.djRoomActions,.accountCard{backdrop-filter:none;-webkit-backdrop-filter:none}.reactionHeart{animation:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.exeDownloadV3{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border-radius:13px;background:#e963a0;color:white;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer}.exeDownloadV3:hover{background:#ce4d88}.downloadStatus{display:block;font-size:14px;line-height:1.5;color:#6e5069;margin:8px 0}[data-exe-download][aria-busy="true"]{opacity:.7;cursor:wait}

/* DISCORD_HEADER_START */
.siteDiscord{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.siteDiscord svg{flex:none}
.siteDiscordMobile{display:none}
.siteDiscord:focus-visible{outline:2px solid var(--pink-strong);outline-offset:4px;border-radius:6px}
@media(max-width:900px){.siteDiscordMobile{display:inline-flex;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:white;color:#5f5864;font-size:10px;font-weight:900}.siteDiscordMobile:hover{color:var(--pink-strong)}}
@media(min-width:901px) and (max-width:1100px){.siteHeader{height:auto;min-height:78px;flex-wrap:wrap;row-gap:8px;padding:10px 0}}
/* DISCORD_HEADER_END */