/*
 * MF_INYEON_RANK_UI_V2
 * 인연 별자리 누적 순위 / 공유 결과
 */


.mf-inyeon-rank-v2 {
  position: relative;

  width: 100%;
  box-sizing: border-box;

  margin:
    18px 0;

  padding:
    19px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      215,
      189,
      255,
      .27
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      150deg,
      rgba(
        42,
        27,
        93,
        .96
      ),
      rgba(
        25,
        20,
        66,
        .96
      )
    );

  box-shadow:
    0 16px 40px
    rgba(
      12,
      7,
      39,
      .22
    );

  color:
    #ffffff;
}


.mf-inyeon-rank-v2::before {
  content: "";

  position: absolute;
  inset: -50% auto auto -20%;

  width: 70%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(
        174,
        117,
        255,
        .18
      ),
      transparent 67%
    );

  pointer-events: none;
}


.mf-inyeon-rank-v2__eyebrow {
  position: relative;

  margin:
    0 0 8px;

  color:
    #e6d2ff;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}


.mf-inyeon-rank-v2 h3 {
  position: relative;

  margin:
    0;

  color:
    #fff;

  font-size:
    clamp(
      18px,
      2.5vw,
      25px
    );

  line-height:
    1.35;

  letter-spacing:
    -.035em;
}


.mf-inyeon-rank-v2__hero {
  position: relative;

  display: grid;

  margin-top:
    14px;

  padding:
    17px 15px;

  gap:
    4px;

  border:
    1px solid
    rgba(
      255,
      227,
      157,
      .25
    );

  border-radius:
    17px;

  background:
    linear-gradient(
      135deg,
      rgba(
        126,
        74,
        211,
        .24
      ),
      rgba(
        255,
        203,
        116,
        .08
      )
    );

  text-align:
    center;
}


.mf-inyeon-rank-v2__hero span {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  font-size:
    12px;

  font-weight:
    700;
}


.mf-inyeon-rank-v2__hero strong {
  color:
    #fff0c9;

  font-size:
    clamp(
      21px,
      3.8vw,
      31px
    );

  line-height:
    1.3;

  letter-spacing:
    -.04em;

  text-shadow:
    0 0 18px
    rgba(
      255,
      213,
      135,
      .17
    );
}


.mf-inyeon-rank-v2__hero small {
  color:
    rgba(
      255,
      255,
      255,
      .64
    );

  font-size:
    11px;
}


.mf-inyeon-rank-v2__grid {
  position: relative;

  display: grid;

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

  gap:
    8px;

  margin-top:
    10px;
}


.mf-inyeon-rank-v2__item {
  display: grid;

  min-width: 0;

  padding:
    11px 9px;

  gap:
    3px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .10
    );

  border-radius:
    14px;

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

  text-align:
    center;
}


.mf-inyeon-rank-v2__item-label {
  overflow: hidden;

  color:
    rgba(
      255,
      255,
      255,
      .76
    );

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.mf-inyeon-rank-v2__item-rank {
  color:
    #fff;

  font-size:
    19px;

  line-height:
    1.15;
}


.mf-inyeon-rank-v2__item small {
  color:
    rgba(
      255,
      255,
      255,
      .5
    );

  font-size:
    9px;
}


.mf-inyeon-rank-v2__locked-copy {
  position: relative;

  margin:
    8px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      .68
    );

  font-size:
    12px;

  line-height:
    1.55;
}


.mf-inyeon-rank-v2__dots {
  position: relative;

  display: flex;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    15px;
}


.mf-inyeon-rank-v2__dot {
  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

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

  box-shadow:
    inset 0 0 0 1px
    rgba(
      255,
      255,
      255,
      .13
    );
}


.mf-inyeon-rank-v2__dot.is-active {
  background:
    #ddc2ff;

  box-shadow:
    0 0 12px
    rgba(
      197,
      147,
      255,
      .7
    );
}


.mf-inyeon-rank-v2__privacy,
.mf-inyeon-rank-v2__hint {
  position: relative;

  margin:
    12px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      .58
    );

  font-size:
    10px;

  line-height:
    1.5;

  text-align:
    center;
}


.mf-inyeon-rank-v2__play {
  position: relative;

  display: flex;

  min-height:
    45px;

  margin-top:
    13px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      236,
      214,
      255,
      .30
    );

  border-radius:
    14px;

  background:
    rgba(
      202,
      160,
      255,
      .13
    );

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    850;

  text-decoration:
    none;
}


/* =========================================================
 공유 결과
 ========================================================= */

.mf-inyeon-share-v2 {
  display: grid;

  width:
    min(
      100%,
      760px
    );

  box-sizing:
    border-box;

  margin:
    0 auto;

  padding:
    6px;

  gap:
    14px;
}


.mf-inyeon-share-v2__header {
  padding:
    22px 15px 8px;

  text-align:
    center;
}


.mf-inyeon-share-v2__header p {
  margin:
    0;

  color:
    #bca0eb;

  font-size:
    12px;

  font-weight:
    800;
}


.mf-inyeon-share-v2__header h2 {
  margin:
    5px 0;

  color:
    #392f55;

  font-size:
    clamp(
      24px,
      5vw,
      34px
    );

  letter-spacing:
    -.05em;
}


.mf-inyeon-share-v2__header span {
  color:
    #887c9e;

  font-size:
    11px;

  font-weight:
    700;
}


.mf-inyeon-share-v2__line {
  display: grid;

  padding:
    20px 16px;

  gap:
    7px;

  border:
    1px solid
    rgba(
      147,
      105,
      206,
      .14
    );

  border-radius:
    21px;

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

  box-shadow:
    0 13px 35px
    rgba(
      51,
      34,
      81,
      .08
    );

  text-align:
    center;
}


.mf-inyeon-share-v2__stars {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  color:
    #9c78d7;

  font-size:
    23px;
}


.mf-inyeon-share-v2__stars i {
  width:
    min(
      35vw,
      190px
    );

  height:
    3px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      rgba(
        150,
        102,
        226,
        .18
      ),
      #b38af0,
      rgba(
        150,
        102,
        226,
        .18
      )
    );

  box-shadow:
    0 0 15px
    rgba(
      157,
      112,
      226,
      .35
    );
}


.mf-inyeon-share-v2__line h3 {
  margin:
    3px 0 0;

  color:
    #43365f;

  font-size:
    23px;
}


.mf-inyeon-share-v2__line strong {
  color:
    #70569d;

  font-size:
    15px;
}


.mf-inyeon-share-v2__line p {
  margin:
    2px auto 0;

  max-width:
    560px;

  color:
    #706681;

  font-size:
    12px;

  line-height:
    1.6;
}


.mf-inyeon-share-v2__cards {
  display: grid;

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

  gap:
    8px;
}


.mf-inyeon-share-v2__card {
  display: grid;

  min-width:
    0;

  padding:
    7px;

  gap:
    4px;

  border:
    1px solid
    rgba(
      96,
      68,
      137,
      .11
    );

  border-radius:
    14px;

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

  text-align:
    center;
}


.mf-inyeon-share-v2__card img,
.mf-inyeon-share-v2__card-fallback {
  display: block;

  width:
    100%;

  aspect-ratio:
    2 / 3;

  object-fit:
    cover;

  border-radius:
    8px;

  background:
    rgba(
      109,
      78,
      159,
      .08
    );
}


.mf-inyeon-share-v2__card-fallback {
  display: grid;

  place-items:
    center;

  color:
    #9879c7;

  font-size:
    28px;
}


.mf-inyeon-share-v2__card small {
  color:
    #91869f;

  font-size:
    9px;
}


.mf-inyeon-share-v2__card strong {
  overflow: hidden;

  color:
    #4c405e;

  font-size:
    10px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.mf-inyeon-share-v2__notice {
  margin:
    0;

  color:
    #938a9d;

  font-size:
    9px;

  line-height:
    1.5;

  text-align:
    center;
}


.mf-inyeon-share-v2__error {
  width:
    min(
      100%,
      560px
    );

  box-sizing:
    border-box;

  margin:
    40px auto;

  padding:
    28px 20px;

  border-radius:
    22px;

  background:
    #fff;

  box-shadow:
    0 15px 45px
    rgba(
      47,
      28,
      78,
      .11
    );

  text-align:
    center;
}


.mf-inyeon-share-v2__error > span {
  color:
    #a57bd8;

  font-size:
    30px;
}


.mf-inyeon-share-v2__error h2 {
  margin:
    8px 0;

  color:
    #463b55;
}


.mf-inyeon-share-v2__error p {
  color:
    #84798e;

  font-size:
    12px;
}


.mf-inyeon-share-v2__error a {
  display: inline-flex;

  min-height:
    44px;

  margin-top:
    10px;

  padding:
    0 18px;

  align-items:
    center;

  border-radius:
    13px;

  background:
    #6d4da2;

  color:
    #fff;

  font-size:
    12px;

  font-weight:
    800;

  text-decoration:
    none;
}


@media (
  max-width: 640px
) {

  .mf-inyeon-rank-v2 {
    margin:
      12px 0;

    padding:
      14px;

    border-radius:
      17px;
  }


  .mf-inyeon-rank-v2__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    gap:
      5px;
  }


  .mf-inyeon-rank-v2__item {
    padding:
      9px 4px;

    border-radius:
      11px;
  }


  .mf-inyeon-rank-v2__item-label {
    font-size:
      9px;
  }


  .mf-inyeon-rank-v2__item-rank {
    font-size:
      16px;
  }


  .mf-inyeon-rank-v2__item small {
    font-size:
      7px;
  }


  .mf-inyeon-share-v2 {
    gap:
      10px;

    padding:
      2px;
  }


  .mf-inyeon-share-v2__header {
    padding:
      15px 8px 4px;
  }


  .mf-inyeon-share-v2__line {
    padding:
      15px 10px;

    border-radius:
      16px;
  }


  .mf-inyeon-share-v2__cards {
    gap:
      5px;
  }


  .mf-inyeon-share-v2__card {
    padding:
      5px;
  }
}