/* =========================================================
   CLOSING.CSS
   마지막 인사 / 엔딩 화면
========================================================= */


/* =========================================================
   1. Closing Section
========================================================= */

.closing {
  position: relative;

  width: 100%;

  min-height:
    clamp(620px, 150vw, 760px);

  overflow: hidden;

  background:
    var(--color-section-dark);

  text-align: center;
}


/* =========================================================
   2. Full Photo
========================================================= */

.closing__photo {
  position: absolute;

  inset: 0;

  z-index: 0;

  background-position:
    center;

  background-size:
    cover;

  background-repeat:
    no-repeat;
}


/* =========================================================
   3. Photo Shade
========================================================= */

.closing__shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(37, 43, 54, 0.04) 0%,
      rgba(37, 43, 54, 0.08) 28%,
      rgba(37, 43, 54, 0.24) 56%,
      rgba(37, 43, 54, 0.76) 82%,
      rgba(37, 43, 54, 0.90) 100%
    );
}


/* =========================================================
   4. Content
========================================================= */

.closing__content {
  position: relative;

  z-index: 2;

  display: flex;

  min-height:
    clamp(620px, 150vw, 760px);

  flex-direction: column;

  align-items: center;
  justify-content: flex-end;

  width: 100%;

  padding:
    clamp(70px, 18vw, 110px)
    var(--page-padding)
    clamp(34px, 9vw, 46px);

  text-align: center;
}


/* =========================================================
   5. Closing Message
========================================================= */

.closing__message {
  width: 100%;

  max-width:
    340px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.96);

  font-family:
    "SUIT-Light";

  font-size:
    clamp(20px, 8vw, 22px);

  font-weight: 400;

  line-height:
    1.3;

  letter-spacing:
    -0.025em;

  white-space:
    pre-line;

  text-align: center;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.18);
}


/* =========================================================
   6. Bride / Groom Names
========================================================= */

.closing__names {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap:
    clamp(8px, 2.5vw, 11px);

  margin:
    clamp(28px, 7vw, 36px)
    0
    0;

  color:
    rgba(255, 255, 255, 0.84);

  font-family:
    var(--font-intro-name);

  font-size:
    clamp(16px, 5vw, 18px);

  font-weight: 300;

  line-height: 1;

  letter-spacing:
    var(--tracking-wide);

  text-shadow:
    0 1px 8px
    rgba(0, 0, 0, 0.16);
}


/* =========================================================
   7. &
========================================================= */

.closing__amp {
  color:
    var(--color-accent);

  font-family:
    var(--font-intro-script);

  font-size:
    clamp(24px, 6.5vw, 30px);

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   8. Closing Share
========================================================= */

.closing-share {
  position: relative;

  display: flex;

  width:
    min(100%, 320px);

  align-items: center;
  justify-content: center;

  gap:
    8px;

  margin-top:
    clamp(28px, 7vw, 34px);
}


/* =========================================================
   9. Share Button
========================================================= */

.closing-share__button {
  flex:
    1 1 0;

  min-width: 0;

  min-height:
    38px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.40);

  border-radius:
    999px;

  background:
    rgba(38, 44, 56, 0.30);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

  color:
    rgba(255, 255, 255, 0.94);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    15px;

  font-weight: 300;

  line-height: 1;

  letter-spacing:
    -0.015em;

  white-space:
    nowrap;

  cursor: pointer;

  transition:
    background-color
    var(--motion-fast)
    var(--ease-standard),

    border-color
    var(--motion-fast)
    var(--ease-standard),

    opacity
    var(--motion-fast)
    var(--ease-standard),

    transform
    var(--motion-fast)
    var(--ease-standard);
}


/* =========================================================
   10. Share Status
========================================================= */

.closing-share__status {
  position: absolute;

  top:
    calc(100% + 7px);

  left: 0;
  right: 0;

  min-height:
    14px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.68);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    9px;

  font-weight: 300;

  line-height:
    1.4;

  text-align: center;
}


/* =========================================================
   11. Hover
========================================================= */

@media (hover: hover) {

  .closing-share__button:hover {
    background:
      rgba(255, 255, 255, 0.13);

    border-color:
      rgba(255, 255, 255, 0.62);
  }

}


/* =========================================================
   12. Active
========================================================= */

.closing-share__button:active {
  transform:
    scale(0.98);
}


/* =========================================================
   13. Settings Button
   개발용 설정 버튼을 아직 쓰는 경우 유지
========================================================= */

.settings-open {
  margin-top:
    clamp(36px, 9vw, 48px);

  min-height: 30px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.28);

  border-radius:
    999px;

  background:
    rgba(38, 44, 56, 0.20);

  color:
    rgba(255, 255, 255, 0.66);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    9px;

  font-weight: 300;

  line-height: 1;

  letter-spacing:
    var(--tracking-wider);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

  transition:
    color
    var(--motion-fast)
    var(--ease-standard),

    border-color
    var(--motion-fast)
    var(--ease-standard),

    background-color
    var(--motion-fast)
    var(--ease-standard),

    transform
    var(--motion-fast)
    var(--ease-standard);
}


@media (hover: hover) {

  .settings-open:hover {
    color:
      rgba(255, 255, 255, 0.90);

    border-color:
      rgba(255, 255, 255, 0.46);

    background:
      rgba(255, 255, 255, 0.08);
  }

}


.settings-open:active {
  transform:
    scale(0.97);
}


/* =========================================================
   14. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .closing {
    min-height:
      600px;
  }


  .closing__content {
    min-height:
      600px;

    padding:
      60px
      20px
      34px;
  }


  .closing__message {
    max-width:
      300px;

    font-size:
      27px;

    line-height:
      1.32;
  }


  .closing__names {
    margin-top:
      26px;

    font-size:
      17px;
  }


  .closing__amp {
    font-size:
      24px;
  }


  .closing-share {
    width:
      min(100%, 290px);

    gap:
      7px;

    margin-top:
      26px;
  }


  .closing-share__button {
    min-height:
      36px;

    padding:
      7px 8px;

    font-size:
      9.5px;
  }


  .closing-share__status {
    font-size:
      8.5px;
  }

}


/* =========================================================
   15. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .closing-share__button,
  .settings-open {
    transition:
      none;
  }


  .closing-share__button:active,
  .settings-open:active {
    transform:
      none;
  }

}