/* =========================================================
   SUA THEME - 프로필 (하트 커버)

   home-profile.css에서 이동(themes/sua 분리). 메뉴 패널
   스타일(.menu-panel 등)은 테마와 무관한 imory 공통 기능이라
   home/menu.css로 옮겼음.
========================================================== */

/* =========================================================
   프로필
========================================================== */

.profile {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 88%;

  transform:
    translate(-50%, -50%)
    translateY(8px);

  text-align: center;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;

  z-index: 5;
}


.heart-group.profile-open .profile {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, -50%)
    translateY(0);

  pointer-events: auto;

  cursor: default;
}


/* =========================================================
   프로필 페이지
========================================================== */

.profile-page {
  display: none;

  width: 100%;

  animation:
    profileFade 0.6s ease;
}


.profile-page.active {
  display: block;
}


@keyframes profileFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* =========================================================
   프로필 1페이지
========================================================== */

.profile-name {
  margin-bottom: 20px;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 14px;
  font-weight: 400;

  letter-spacing:
    0.14em;

  color: #555555;
}


.profile-text {
  margin: 0;

  font-size: 10px;

  line-height: 1.9;

  letter-spacing:
    0.06em;

  color: #777777;
}


/* =========================================================
   MORE / BACK
========================================================== */

.profile-nav {
  display: inline-block;

  margin-top: 27px;

  padding:
    4px 7px;

  border: 0;

  background:
    transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 9px;

  letter-spacing:
    0.1em;

  color: #999999;

  cursor: pointer;

  text-decoration:
    underline;

  text-decoration-thickness:
    0.5px;

  text-underline-offset:
    3px;

  -webkit-tap-highlight-color:
    transparent;
}


.profile-nav:hover {
  color: #555555;
}


/* =========================================================
   프로필 2페이지
========================================================== */

.more-section {
  margin-bottom: 18px;
}


.more-title {
  margin-bottom: 10px;

  font-size: 11px;

  font-weight: 500;

  letter-spacing:
    0.12em;

  color: #555555;
}


.more-text {
  margin:
    0 auto;

  max-width: 290px;

  font-size: 10px;

  line-height: 1.5;

  letter-spacing:
    0.04em;

  color: #777777;
}


.more-text.from-supabase {
  white-space:
    pre-line;
}


.more-section:last-of-type {
  margin-bottom: 24px;
}


/* =========================================================
   모바일 (프로필)

   원래 style.css 맨 끝의 하나의 @media(max-width:600px)
   블록이었음. 하트/LOVE EVENT 관련 부분은
   themes/sua/heart-interaction.css의 @media 블록으로 옮기고,
   여기에는 프로필 관련 부분만 남김. --detail-top 변수는
   themes/sua/heart-interaction.css의 @media 블록에서
   정의됨(같은 페이지에 home-base.css →
   themes/sua/heart-interaction.css →
   themes/sua/cover-profile.css 순서로 로드되어 있으면
   문제없이 상속됨).
========================================================== */

@media (max-width: 600px) {

  /* 프로필 1 */

  .profile {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 90%;

    transform:
      translate(-50%, -50%);

    text-align:
      center;

  }


  .heart-group.profile-open
  .profile {

    transform:
      translate(-50%, -50%);

  }


  /* 프로필 2 */

  .heart-group.detail-open
  .profile,

  .heart-group.profile-open.detail-open
  .profile {

    position: absolute;

    left: 50%;

    top:
      calc(
        var(--detail-top)
        -
        50dvh
        -
        var(--heart-group-y)
        +
        30vw
      );

    width:
      calc(
        100vw
        -
        44px
      );

    max-width:
      420px;

    transform:
      translateX(-50%);

  }


  #profilePage2 {

    width:
      100%;

    text-align:
      center;

  }


  .more-section {

    width:
      100%;

    margin-left:
      auto;

    margin-right:
      auto;

    margin-bottom:
      18px;

  }


  .more-title {

    margin-bottom:
      10px;

  }


  .more-text {

    width:
      100%;

    max-width:
      340px;

    margin-left:
      auto;

    margin-right:
      auto;

    text-align:
      center;

    line-height:
      1.5;

  }


  #backButton {

    margin-top:
      12px;

  }
}