@charset "utf-8";




.head_img .ornament {display: none;}

.couple_wrap {display: flex; justify-content: center; position: relative;} 
.ch_left,.ch_right {width: 50%; display: flex; flex-direction: column;} 
.couple_wrap :is(.ch_left, .ch_right).body {position: absolute; top: 0;}
.ch_left {align-items: flex-end; margin-right: 5%;} 
.ch_right {align-items: flex-start; margin-left: 5%;} 
.couple_wrap :is(.ch_left, .ch_right).body img {position: fixed; width: auto; height: 80vh; max-width: none; flex-shrink: 0;} 
.couple_wrap .profile_main:is(.left, .right) {cursor: pointer; bottom:55px; position: fixed; z-index: 2;} 
.couple_wrap .grad {background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); width: 100%; height:40%; bottom:0; left:0; position: fixed; z-index: 1;}

.cople_wrap .profile_main:is(.left, .right) .profile_main * { transition-duration: 0.8s !important;}
.cople_wrap .profile_main:is(.left, .right) .profile_main:hover .pha {letter-spacing: 0.5px !important; }
.cople_wrap .profile_main:is(.left, .right) .profile_main:hover .title {letter-spacing: 12px !important; }
.cople_wrap .profile_main:is(.left, .right) .profile_main:hover .en_name {letter-spacing: 4px !important; }
.cople_wrap .profile_main:is(.left, .right) .profile_main:hover .kr_name {letter-spacing: 8px !important; }


.profile_main .pha {
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -2px;
}

.profile_main.left .pha::before {
    content: "”";
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    right:-10px;
    top:-25px;
}

.profile_main.right .pha::before {
    content: "“";
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    left:-10px;
    top:-25px;
}
.profile_main .title {
    padding:4px 30px;
    border-radius: 5px;
    background: #8B6950;
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 8.76px;
    margin:20px 0 0 0;
}

.profile_main .en_name {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.profile_main .kr_name {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 6px;
    display: flex;
}
.profile_main.left .kr_name {
    justify-content: flex-end;
    align-items: center;
}
.profile_main.right .kr_name {
    justify-content: flex-start;
    align-items: center;
}
.profile_main.left .kr_name::before {
    content: "";
    width: 78px;
    height: 1px;
    background-color: white;
    display: inline-block;
    margin-right: 14px;
}
.profile_main.right .kr_name::after {
    content: "";
    width: 78px;
    height: 1px;
    background-color: white;
    display: inline-block;
    margin-left: 14px;
}
.pair_au {
    position: fixed;
    bottom:55px;
    left:0;
    right:0;
    margin:0 auto;
    text-align: center;
    z-index: 10;
    width: 28px;
}


.pair_au li a {
    background-color: var(--main);
    color: white;
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    display: inline-block;
    border-radius: 3.773px;
    box-sizing: border-box;
    margin-top: 4px;
}

.pair_au li a:hover {
    background-color: white;
    color:var(--main)
}

.pair_au li a.on {
    background-color: white;
    color:var(--main)
}

.modal {position: fixed;z-index: 20; padding: 30px; overflow: auto; max-width: 1000px; height:100vh;left: 0; right:0; margin:  0 auto; top:0; display: none;}
.modal_close {
    position: fixed;
    width: 100%;
    height:100vh;
    background: rgba(0, 0, 0, 0.80);
    left:0;
    top:0;
    overflow: auto;
    z-index: 12;
    cursor: pointer;
    display: none;
    transition: none !important;
}

.modal {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    animation-name: fadedown;
    animation-duration: 0.5s;
    transition: none !important;
}


.modal::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.modal.on {display: block;}
.modal_close.on {display: block;}

.modal .in_body {max-width: 1000px;margin: auto; text-align: center;}

.modal .modal_content {
    max-width: 600px;
    margin: auto;
    overflow: auto;
    margin-bottom: 100px;
}

.modal .catch {
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: 6px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.modal .en_name {
text-align: center;
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 36px */
margin-top: 8px;
}

.modal .en_name::before {
    content: "";
    width: 70px;
    height: 1px;
    background-color: white;
    display: block;
    margin: 8px auto;
}

.modal .kr_name {
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
letter-spacing: 8px;
margin-top: 8px;
}

.modal .detail {display: flex;align-items: center; margin-bottom: 5px;justify-content: center; margin-top: 28px;}

.modal .detail .title {
    width: 96px;
    height: 30px;
    flex-shrink: 0;
    line-height: 30px;
    text-align: center;
    border-radius: 2em;
    border: 1px solid #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-right: 23px;
    margin-top: 5px;
}

.modal .line {margin: 30px 0;}

.modal .con_title {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 24px */
margin-bottom: 10px;
}

.modal .contents p {
    margin-bottom: 45px;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 25.2px */
}

.close_btn {font-size: 18px; border-radius: 2em; border: 1px solid white; display: block; padding: 4px 12px; text-align: center; margin-top: 80px; cursor: pointer;}

@media all and (max-width:1024px) {

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    pointer-events: none;
  }

  /* 전체 구조 */
  .couple_wrap {
    flex-direction: column;
    align-items: center;
  }

  /* 좌우 캐릭터 */
  .ch_left,
  .ch_right {
    width: 100%;
    margin: 0 0 5% 0;
    align-items: center;
  }

  /* body 위치 해제 */
  .couple_wrap :is(.ch_left, .ch_right).body {
    position: relative;
  }

  /* 캐릭터 이미지 */
  .couple_wrap :is(.ch_left, .ch_right).body img {
    position: relative;
    height: 60vh;
    max-width: 100%;
    margin: 0 auto;
  }

  img {
    object-fit: contain;
  }

  /* 프로필 영역 */
  .couple_wrap .profile_main:is(.left, .right) {
    position: relative;
    bottom: auto;
    text-align: center;
    margin-top: 20px;
    filter: drop-shadow(0 0 3px #000);
  }

  /* 텍스트 크기 조정 */
  .profile_main .title {
    font-size: 13px;
    letter-spacing: 4px;
    margin-bottom: 5%;
  }

  .profile_main .en_name {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .profile_main .kr_name {
    font-size: 16px;
    letter-spacing: 3px;
    justify-content: center !important;
  }

  .profile_main .pha {
    word-break: keep-all;
    line-height: 1.6;
  }

  /* 그라데이션 */
  .couple_wrap .grad {
    display: none !important;
  }

  /* hover 효과 제거 (모바일 최적화) */
  .cople_wrap .profile_main:hover * {
    letter-spacing: normal !important;
  }

    .pair_au li {display: inline-block;}
    .pair_au li a {display: inline-block;}
    .pair_au {width: 100%; position: relative; bottom:0; margin-top: 60px; margin-bottom: 30px;}

}