@charset "utf-8";

/* list */
.list_wrap .container {
  margin-top: calc(125px);
  padding-top: calc(55px);
}
.list_wrap .list_banner {
  width: 100%;
}
.list_wrap .list_banner .swiper-slide .link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_wrap .list_banner .prev_btn,
.list_banner .next_btn {
  background: no-repeat center / contain;
  width: 1.188rem;
  height: auto;
  aspect-ratio: 1 / 1.73684;
}
.list_wrap .list_banner .prev_btn {
  background-image: url(../img/slide_prev.png);
  left: 1.875rem;
}
.list_wrap .list_banner .next_btn {
  background-image: url(../img/slide_next.png);
  right: 1.875rem;
}

.list_wrap .list_category {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  margin: 2.5rem 0;
}
.list_wrap .list_category .title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.list_wrap .list_category .catebox {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
}
.list_wrap .list_category .catebox > li .link {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list_wrap .list_category .catebox > li .link .icon {
  width: auto;
  height: 2.625rem;
  display: block;
}
.list_wrap .list_category .catebox > li .link .txt {
  font-family: var(--second-family);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_wrap .list_category .catebox > li.active .link .txt {
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  font-weight: 700;
  color: var(--white);
}
.list_wrap .list_category .catebox > li.cate1.active .link .txt {
  background: var(--text-1);
}
.list_wrap .list_category .catebox > li.cate2.active .link .txt {
  background: var(--primary);
}
.list_wrap .list_category .catebox > li.cate3.active .link .txt {
  background: #e5a604;
}
.list_wrap .list_category .catebox > li.cate4.active .link .txt {
  background: #884dac;
}
.list_wrap .list_category .catebox > li .bar {
  width: 1px;
  height: 1.875rem;
  background: var(--text-2);
}

.list_wrap .list_box {
  position: relative;
  width: 100%;
  margin-bottom: 3.25em;
}
.list_wrap .list_box.rank_ver {
  margin-bottom: 3.75rem;
}
.list_wrap .list_titbox {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
}
.list_wrap .list_titbox .tit {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.list_wrap .list_titbox .tit .icon {
  width: auto;
  height: 1.125rem;
}
.list_wrap .list_titbox .sortbox {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.list_wrap .list_titbox .sortbox .sortbtn {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_wrap .list_titbox .sortbox .sortbtn.active {
  color: var(--primary);
}
.list_wrap .list_contbox {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.list_wrap .list_box.rank_ver .list_contbox {
  gap: 2.5rem;
}
.list_wrap .list_contbox > .listbox {
  display: flex;
  flex-wrap: wrap;
  gap: 3.75rem 1.25rem;
}
.list_wrap .list_contbox > .listbox .item {
  width: calc((100% - 1.25rem * 3) / 4);
}
.list_wrap .list_contbox > .listbox .item .rank {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-2);
  margin-bottom: 1.25rem;
}
.list_wrap .list_contbox > .listbox .item .rank.point {
  color: var(--secondary);
}
.list_wrap .list_contbox > .listbox .item .imgbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 0.89433;
  border-radius: 1.25rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.list_wrap .list_contbox > .listbox .item .imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list_wrap .list_contbox > .listbox .item .txtbox .tit {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.813rem;
}
.list_wrap .list_contbox > .listbox .item .txtbox .tit .cate {
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  background: var(--primary);
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 0.813rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--white);
}
.list_wrap .list_contbox > .listbox .item .txtbox .tit .cate.sin {
  background: var(--sin);
}
.list_wrap .list_contbox > .listbox .item .txtbox .tit .cate.saju {
  background: var(--saju);
}
.list_wrap .list_contbox > .listbox .item .txtbox .tit .cate.tarot {
  background: var(--tarot);
}
.list_wrap .list_contbox > .listbox .item .txtbox .info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
}
.list_wrap .list_contbox > .listbox .item .txtbox .info > .info_item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.list_wrap .list_contbox > .listbox .item .txtbox .info > .info_item .icon {
  width: 1.313rem;
  aspect-ratio: 1 / 1;
}
.list_wrap .list_contbox > .listbox .item .txtbox .info > .info_item .txt {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--text-1);
}
.list_wrap .list_contbox > .listbox .item .txtbox .info > .info_item .num {
  font-size: 0.813rem;
  color: #9c9c9c;
}
.list_wrap .list_contbox > .listbox .item .txtbox .emoji {
  margin: 0.813rem 0 0.938rem;
}
.list_wrap .list_contbox > .listbox .item .txtbox .emoji .emoji_badge {
  font-size: 0.875rem;
  gap: 0.563rem;
}
.list_wrap .list_contbox > .listbox .item .counsel_btn {
  border: 2px solid var(--secondary);
  border-radius: 0.5rem;
  padding: 0.625rem 0;
  width: 100%;
  height: 40px;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.563rem;
}
.list_wrap .list_contbox > .listbox .item .counsel_btn .icon {
  background: no-repeat center/contain;
  width: 1.313rem;
  aspect-ratio: 1/1;
}
.list_wrap .list_contbox > .listbox .item .counsel_btn.typeA {
  background: var(--secondary);
  color: var(--white);
}
.list_wrap .list_contbox > .listbox .item .counsel_btn.typeA .icon {
  background-image: url(../img/ico_call1.png);
}
.list_wrap .list_contbox > .listbox .item .counsel_btn.typeB {
  background: var(--white);
  color: var(--secondary);
}
.list_wrap .list_contbox > .listbox .item .counsel_btn.typeB .icon {
  background-image: url(../img/ico_call2.png);
}

/* 접속알림신청 */
.list_wrap .list_contbox > .listbox .item .counsel_btn_ing.typeC {
  background: var(--grey);
  color: var(--white);
}
.list_wrap .list_contbox > .listbox .item .counsel_btn_ing {
  border: 2px solid var(--grey);
  border-radius: 0.5rem;
  padding: 0.625rem 0;
  width: 100%;
  height: 40px;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.563rem;
}
.list_wrap .list_contbox > .listbox .item .counsel_btn_ing.typeC .icon {
  background-image: url(../img/ico_clock3.png);
  /* width: ; */
}
.list_wrap .list_contbox > .listbox .item .counsel_btn_ing .icon {
  background: no-repeat center/contain;
  width: 1.313rem;
  aspect-ratio: 1/1;
}

/* counsel popup */
.counsel_modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: 0.75rem;
  min-width: 440px;
  max-width: 90%;
  max-height: 90%;
  z-index: 100;
  overflow: hidden;
  transition: all 0.4s ease;
  opacity: 0;
  pointer-events: none;
  overflow: auto;
}
.counsel_modal::-webkit-scrollbar {
  display: none;
}
.counsel_modal.show {
  opacity: 1;
  pointer-events: auto;
}
.counsel_modal .modal_head {
  background: var(--primary);
  width: 100%;
  font-weight: 700;
  font-size: 0.938rem;
  color: var(--white);
  text-align: center;
  padding: 0.563rem;
}
.counsel_modal .modal_body {
  padding: 1.688rem 2.5rem;
}
.counsel_modal .modal_body .profile_box {
  display: flex;
  align-items: center;
  margin-bottom: 1.375rem;
}
.counsel_modal .modal_body .profile_box .thum {
  width: 82px;
  height: 88px;
  border-radius: 0.688rem;
  overflow: hidden;
  display: flex;
}
.counsel_modal .modal_body .profile_box .thum > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.counsel_modal .modal_body .profile_box .title {
  flex: 1;
  font-weight: 700;
  font-size: 1.125rem;
  color: #404040;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.313rem;
}
.counsel_modal .modal_body .profile_box .title .num {
  font-weight: 600;
  color: #67a4ff;
}
.counsel_modal .modal_body .profile_box .cate {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid #d7d7d7;
  padding: 0.375rem 0 0.375rem 2.375rem;
  margin-left: 2.375rem;
}
.counsel_modal .modal_body .profile_box .cate .icon {
  width: 2.875rem;
  margin-bottom: -0.625rem;
  margin-bottom: 1px;
}
.counsel_modal .modal_body .profile_box .cate .txt {
  font-family: var(--second-family);
  font-size: 0.875rem;
  text-align: center;
  color: #3a3a3a;
}
.counsel_modal .modal_body .login_box {
  border: 2px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 0.938rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  margin-bottom: 1rem;
}
.counsel_modal .modal_body .login_box .info {
  font-weight: 500;
  font-size: 0.813rem;
  color: var(--text-2);
}
.counsel_modal .modal_body .login_box .login_btn {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  color: var(--secondary);
  text-underline-offset: 3px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.counsel_modal .modal_body .login_box .login_btn .icon {
  width: 0.5rem;
}
.counsel_modal .modal_body .coin_box {
  display: flex;
  flex-direction: column;
  gap: 1.688rem;
}
.counsel_modal .modal_body .coin_box > .item {
  padding-bottom: 0.563rem;
  border-bottom: 1px solid #f0f0f0;
}
.counsel_modal .modal_body .coin_box > .item .titbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.counsel_modal .modal_body .coin_box > .item .titbox .left .tit {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.counsel_modal .modal_body .coin_box > .item .titbox .left .tit .txt {
  position: relative;
  font-size: 0.875rem;
  color: var(--text-1);
  padding-left: 1.5em;
}
.counsel_modal .modal_body .coin_box > .item .titbox .left .tit .txt::before {
  content: "";
  width: 0.25em;
  aspect-ratio: 1 / 1;
  background: var(--text-1);
  border-radius: 50%;
  position: absolute;
  left: 0.65em;
  top: 0.5em;
}
.counsel_modal .modal_body .coin_box > .item .titbox .left .tit .icon {
  background: url(../img/counsel_info.png) no-repeat center/contain;
  width: 1rem;
  aspect-ratio: 1/1;
}
.counsel_modal .modal_body .coin_box > .item .titbox .right .coin {
  font-weight: 700;
  font-size: 0.875rem;
  color: #404040;
}
.counsel_modal .modal_body .coin_box > .item .titbox .right .coin .time {
  font-weight: 400;
  font-size: 0.75rem;
  color: #838383;
}
.counsel_modal .modal_body .coin_box > .item .counsel_btn {
  font-size: 0.938rem;
  color: var(--white);
  border-radius: 0.25rem;
  padding: 1.188rem 1.25rem;
  width: 100%;
}
.counsel_modal .modal_body .coin_box > .item .counsel_btn.typeA {
  background: #f19e20;
}
.counsel_modal .modal_body .coin_box > .item .counsel_btn.typeB {
  background: var(--primary);
}
.counsel_modal .modal_body .coin_box > .item .counsel_btn .bold {
  font-weight: 800;
}
.counsel_modal .modal_body .coin_box > .item .notice_txt {
  font-size: 0.813rem;
  color: var(--text-1);
  text-align: center;
  margin-top: 0.75rem;
}
.counsel_modal .modal_body .coin_box > .item .notice_txt .color {
  font-weight: 700;
  color: #67a4ff;
}
.counsel_modal .modal_body .close_btn {
  background: #a8a8a8;
  font-weight: 800;
  font-size: 0.938rem;
  color: #ffffff;
  padding: 0.875rem 0;
  width: 100%;
  margin-top: 0.938rem;
  border-radius: 0.25rem;
}

/* login */
.login_wrap .container {
  padding-top: calc(125px);
}
.login_wrap .login_box {
  max-width: 308px;
  margin: 6.25rem auto;
}
.login_wrap .login_box .login_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  margin: 0 auto 6rem;
}
.login_wrap .login_box .login_form .kakao_btn {
  width: 100%;
  height: 48px;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-radius: 0.375rem;
  background: #fee500;
}
.login_wrap .login_box .login_form .kakao_btn .icon {
  width: 1.125rem;
}
.login_wrap .login_box .login_form .kakao_btn .txt {
  flex: 1;
}
.login_wrap .login_box .login_form .or {
  font-weight: 600;
  font-size: 0.688rem;
  color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.125rem 0;
}
.login_wrap .login_box .login_form .or::before,
.login_wrap .login_box .login_form .or::after {
  content: "";
  display: inline-block;
  flex: 1;
  height: 1px;
  background: #e7e7e7;
}
.login_wrap .login_box .login_form .form_box {
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.login_wrap .login_box .login_form .form_box .login_btn {
  width: 100%;
  height: 48px;
  background: #d62329;
  border-radius: 0.375rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  margin-top: 1.5rem;
}
.login_wrap .login_box .login_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.login_wrap .login_box .login_menu .link {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
}
.login_wrap .login_box .login_menu .bar {
  width: 1px;
  height: 0.75rem;
  background: #b4b4b4;
}

/* join */
.join_wrap .join_box {
  max-width: 424px;
  margin: 3.75rem auto 7.5rem;
}
.join_wrap .join_box .join_top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.join_wrap .join_box .join_top .back_btn {
  background: url(../img/ico_back.png) no-repeat center / contain;
  width: 0.688rem;
  height: 1.125rem;
}
.join_wrap .join_box .join_top .title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.join_wrap .join_box .join_top .title .icon {
  width: 1.688rem;
}
.join_wrap .join_box .join_form {
  padding: 0 2.313rem;
}
.join_wrap .join_box .join_form .form_box .join_btn {
  width: 100%;
  height: 48px;
  background: #d62329;
  border-radius: 0.375rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  margin-top: 4.063rem;
  pointer-events: none;
  opacity: 0.5;
}
.join_wrap .join_box .btn_verify {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 8px 16px;
  background-color: transparent;
  color: black;
  cursor: pointer;
}

/* detail.dial popup */
#counselPopup > div.modal_body > div.mycoin > div.left > p.coin {
  width: 1.5rem;
}
#counselPopup > div.modal_body > div.mycoin > div.left > .tit {
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--primary);
}
#counselPopup > div.modal_body > div.mycoin > div.left > .coin {
  font-weight: 600;
  font-size: 2rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#counselPopup > div.modal_body > div.mycoin {
  border-radius: 0.75rem;
  padding: 1.1rem 1.1rem 1.1rem;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 10px;
}
#counselPopup > div.modal_body > div.mycoin .left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#counselPopup > div.modal_body > div.mycoin .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
#counselPopup > div.modal_body > div.mycoin .right .coin_btn {
  background: var(--primary);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
}
#counselPopup > div.modal_body > div.mycoin .right .link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #d62329;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#counselPopup > div.modal_body > div.mycoin .right .link .arrow {
  width: 0.438rem;
}

/* detail */
.detail_wrap .container {
  padding-top: calc(130px);
  padding-bottom: 5rem;
}
.detail_wrap .container > .inner {
  max-width: 900px;
}
.detail_wrap .detail_top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0 1.25rem;
}
.detail_wrap .detail_top .back_btn {
  background: url(../img/ico_back.png) no-repeat center / contain;
  width: 0.75rem;
  height: 1.25rem;
}
.detail_wrap .detail_top .title {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-1);
}
.detail_wrap .detail_info {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  padding: 0 0.563rem 1.25rem;
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: 1.25rem;
}
.detail_wrap .detail_info .imgbox {
  width: 450px;
  height: 320px;
  display: flex;
  border-radius: 1.25rem;
  background: #fb999c;
  overflow: hidden;
}
.detail_wrap .detail_info .imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail_wrap .detail_info .txtbox {
  position: relative;
  flex: 1;
}
.detail_wrap .detail_info .txtbox .cate {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0.781rem;
}
.detail_wrap .detail_info .txtbox .cate .icon {
  width: 3.375rem;
  margin-bottom: -0.625rem;
}
.detail_wrap .detail_info .txtbox .cate .txt {
  font-family: var(--second-family);
  font-size: 1rem;
  text-align: center;
  color: #3a3a3a;
}
.detail_wrap .detail_info .txtbox > .titlebox .title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.detail_wrap .detail_info .txtbox > .titlebox .title .name {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 90%;
  color: var(--text-1);
}
.detail_wrap .detail_info .txtbox > .titlebox .title .bar {
  width: 1px;
  height: 1.25rem;
  background: var(--text-2);
}
.detail_wrap .detail_info .txtbox > .titlebox .title .number {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--secondary);
}
.detail_wrap .detail_info .txtbox > .titlebox .hashtag {
  display: none;
}
.detail_wrap .detail_info .txtbox > .sidebox {
  display: flex;
  gap: 0.813rem;
}
.detail_wrap .detail_info .txtbox > .sidebox > .item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.detail_wrap .detail_info .txtbox > .sidebox > .item .icon {
  width: 1.5rem;
}
.detail_wrap .detail_info .txtbox > .sidebox > .item .txt {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--text-1);
}
.detail_wrap .detail_info .txtbox > .sidebox > .item .num {
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap .detail_info .txtbox > .sidebox > .item.pc_hide {
  display: none;
}
.detail_wrap .detail_info .txtbox > .desc {
  margin: 1.75rem 0 2rem;
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap .detail_info .txtbox > .point {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.detail_wrap .detail_info .txtbox > .point .icon {
  width: 1.25rem;
}
.detail_wrap .detail_info .txtbox > .point .txt {
  font-weight: 600;
  font-size: 1.125rem;
  color: #222;
}
.detail_wrap .detail_info .txtbox > .point .num {
  font-size: 1.063rem;
  color: #9c9c9c;
}
.detail_wrap .detail_info .txtbox > .btnbox {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 0.875rem;
}
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn {
  flex: 1;
  border-radius: 0.5rem;
  padding: 0.625rem 0;
  width: 100%;
  height: 50px;
  font-weight: 800;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.563rem;
}

/* 접속알림신청 */
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn.status_offline {
  background: var(--grey);
  color: var(--white);
}


.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn .icon {
  background: no-repeat center/contain;
  width: 1.313rem;
  aspect-ratio: 1/1;
}
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn.typeA {
  background: var(--secondary);
  color: var(--white);
}
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn.typeA .icon {
  background-image: url(../img/ico_call1.png);
}
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn.typeB {
  border: 2px solid var(--secondary);
  background: var(--white);
  color: var(--secondary);
}
.detail_wrap .detail_info .txtbox > .btnbox .counsel_btn.typeB .icon {
  background-image: url(../img/ico_call2.png);
}
.detail_wrap .detail_info .txtbox > .btnbox .bookmark_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.313rem;
  font-size: 0.75rem;
  color: #535353;
}
.detail_wrap .detail_info .txtbox > .btnbox .bookmark_btn .icon {
  background: url(../img/ico_bookmark_off.png) no-repeat center / contain;
  width: 1.25rem;
  aspect-ratio: 1 / 1.25;
}
.detail_wrap .detail_info .txtbox > .btnbox .bookmark_btn.active .icon {
  background-image: url(../img/ico_bookmark_on.png);
}
.detail_info .txtbox .sidebox2 {
  display: none;
  position: relative;
  z-index: 1;
}
.detail_wrap .detail_review {
  position: relative;
  margin-bottom: 2.5rem;
}
.detail_wrap .detail_review .titbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.detail_wrap .detail_review .titbox .icon {
  width: 1.188rem;
}
.detail_wrap .detail_review .titbox .title {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.detail_wrap .detail_review .titbox .more {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
  display: inline-block;
}
.detail_wrap .detail_review .review_slider {
  width: 100%;
  border-radius: 0.625rem;
  padding: 0.875rem;
  box-shadow: inset 0 0 14px 0 #ffc9c6;
  background: var(--bg);
}
.detail_wrap .detail_review .review_slider .review_item {
  border: 1px solid var(--third);
  border-radius: 0.875rem;
  padding: 1.25rem 0.625rem 0.813rem;
  width: 336px;
  box-shadow: 0 0.25rem 0.563rem 0 rgba(214, 35, 41, 0.15);
  background: var(--white);
}
.detail_wrap .detail_review .review_slider .review_item .titbox {
  padding: 0 0.625rem;
  gap: 0.25rem;
  margin-bottom: 0.375rem;
  cursor: default;
}
.detail_wrap .detail_review .review_slider .review_item .titbox .icon {
  width: 1.125rem;
}
.detail_wrap .detail_review .review_slider .review_item .titbox .title {
  font-size: 1rem;
}
.detail_wrap .detail_review .review_slider .review_item .titbox .ratebox {
  display: flex;
}
.detail_wrap .detail_review .review_slider .review_item .titbox .ratebox .rate {
  background: url(../img/ico_rate.png) no-repeat center / contain;
  width: 1.25rem;
  aspect-ratio: 1 / 1;
}
.detail_wrap
  .detail_review
  .review_slider
  .review_item
  .titbox
  .ratebox
  .rate
  + .rate {
  margin-left: -0.25rem;
}
.detail_wrap .detail_review .review_slider .review_item .infobox {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  padding: 0 0.625rem;
  cursor: default;
}
.detail_wrap .detail_review .review_slider .review_item .infobox .txt {
  font-weight: 500;
  font-size: 0.75rem;
  color: #9e9e9e;
}
.detail_wrap .detail_review .review_slider .review_item .infobox .bar {
  width: 1px;
  height: 0.75rem;
  background: #9e9e9e;
}
.detail_wrap .detail_review .review_slider .review_item .emoji {
  padding: 0.375rem 0.625rem 0.188rem;
  margin-bottom: 0.75rem;
  cursor: default;
}
.detail_wrap .detail_review .review_slider .review_item .desc {
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 150%;
  color: var(--text-1);
  margin-bottom: 1.188rem;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  cursor: default;
}
.detail_wrap .detail_review .review_slider .review_item.open .desc {
  -webkit-box-orient: unset;
}
.detail_wrap .detail_review .review_slider .review_item .review_more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail_wrap .detail_review .review_slider .review_item .review_more > img {
  width: 1.5rem;
}
.detail_wrap .detail_content {
  position: relative;
}
.detail_wrap .detail_content > .section {
  margin-bottom: 1.25rem;
}
#Introduction {
  scroll-margin-top: 170px;
}
#Review {
  scroll-margin-top: 170px;
}
#QnA {
  scroll-margin-top: 170px;
}
#AdditionalService {
  display: none;
  scroll-margin-top: 170px;
}
.detail_wrap #AdditionalService .contbox {
  padding: 2rem 0 3rem;
}
.detail_wrap #AdditionalService .additional-service-empty {
  border: 1px solid #e9e9e9;
  border-radius: 0.75rem;
  padding: 2.25rem 1.5rem;
  background: #fafafa;
  color: var(--text-2);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.detail_wrap #AdditionalService .membership-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid #ffd9db;
  border-radius: 0.75rem;
  background: #fff8f8;
}
/* display:flex 가 hidden 속성을 덮으므로 명시적으로 되돌린다 */
.detail_wrap #AdditionalService .membership-entry[hidden] {
  display: none;
}
.detail_wrap #AdditionalService .membership-entry-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.detail_wrap #AdditionalService .membership-entry-title {
  color: #313131;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}
.detail_wrap #AdditionalService .membership-entry-desc {
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.detail_wrap #AdditionalService .join-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 13px;
  border: 0.75px solid #ee555a;
  border-radius: 999px;
  background: #fff1f0;
  color: #ee555a;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.detail_wrap #AdditionalService .join-chip svg {
  width: 0.854rem;
  height: 1.004rem;
  flex: 0 0 auto;
}
.detail_wrap #AdditionalService .join-chip:focus-visible {
  outline: 2px solid rgba(242, 75, 85, 0.45);
  outline-offset: 3px;
}
.detail_wrap #AdditionalService .addon-services {
  padding: 0;
  background: #fff;
}
.detail_wrap #AdditionalService .addon-section-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  color: #313131;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
}
.detail_wrap #AdditionalService .addon-section-title small {
  color: var(--secondary);
  font-size: 0.95rem;
  font-weight: 800;
}
.detail_wrap #AdditionalService .addon-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.detail_wrap #AdditionalService .addon-service-card {
  overflow: hidden;
  border: 1px solid #ededed;
  border-radius: 0.75rem;
  background: #fff;
  color: #444;
  box-shadow: 0 0.25rem 0.813rem rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.detail_wrap #AdditionalService .addon-service-card:focus-visible {
  outline: 2px solid rgba(242, 75, 85, 0.45);
  outline-offset: 3px;
}
.detail_wrap #AdditionalService .addon-service-card:hover {
  border-color: rgba(214, 35, 41, 0.32);
  box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.detail_wrap #AdditionalService .addon-card-image {
  position: relative;
  aspect-ratio: 320 / 145;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.92) 0 13px, transparent 14px),
    linear-gradient(135deg, #ffe8ea 0%, var(--secondary) 100%);
}
.detail_wrap #AdditionalService .addon-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail_wrap #AdditionalService .addon-card-copy {
  padding: 0.875rem 1rem 1rem;
}
.detail_wrap #AdditionalService .addon-card-meta {
  min-height: 1.4rem;
  margin-bottom: 0.35rem;
}
.detail_wrap #AdditionalService .addon-card-subtitle {
  display: block;
  color: #666;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
}
.detail_wrap #AdditionalService .addon-card-name {
  display: block;
  min-height: 2.5em;
  color: #313131;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: keep-all;
}
/* 2026-07 이후 리스트에서 카테고리 배지를 렌더하지 않는다(detail_content_additional_service.js).
   복원 대비해 스타일만 보존 — 아래 .addon-badge-row / .addon-kind-badge 는 현재 미출력. */
.detail_wrap #AdditionalService .addon-badge-row {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.55rem;
}
.detail_wrap #AdditionalService .addon-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #fff1f0;
  color: var(--secondary);
  font-size: 0.78rem;
  font-weight: 800;
}
.detail_wrap #AdditionalService .addon-card-price {
  display: block;
  margin-top: 0.55rem;
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
#popupOverlayExpertise {
  display: none;
}
.detail_wrap .detail_content > .section .titbox {
  display: flex;
  border-bottom: 2px solid var(--secondary);
  margin-bottom: 1.25rem;
}
.detail_wrap .detail_content > .section .titbox > .title {
  width: 168px;
  height: 54px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 90%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
}
.detail_wrap .detail_content > .section .titbox > .tablink {
  display: flex;
}
.detail_wrap .detail_content > .section .titbox > .tablink.pc_hide {
  display: none;
}
.detail_wrap .detail_content > .section .titbox > .tablink .link {
  width: 168px;
  height: 54px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 90%;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail_wrap .detail_content > .section .titbox > .tablink .link.active {
  font-weight: 800;
  color: var(--white);
  background: var(--secondary);
}
.detail_wrap .detail_content > .section .titbox > .tablink .link .num {
  font-weight: 400;
}
.detail_wrap .detail_content > .section .contbox {
  position: relative;
}

.detail_wrap #Introduction .content {
  font-size: 1.125rem;
  color: #3d3d3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.75rem 0 4.625rem;
}
.detail_wrap #Introduction .content > .img {
  margin: 0 auto 4.625rem;
  display: block;
  max-width: 350px;
}
.detail_wrap #Introduction .infobox {
  border-top: 1px solid #d4d4d4;
  display: flex;
  gap: 1.25rem;
  padding: 1.875rem 1.25rem;
}
.detail_wrap #Introduction .infobox .infoitem {
  width: calc((100% - 1.25rem) / 2);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.detail_wrap #Introduction .infobox .infoitem .title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.detail_wrap #Introduction .infobox .infoitem .title .icon {
  width: 1.125rem;
}
.detail_wrap #Introduction .infobox .infoitem .title .tit {
  font-weight: 600;
  font-size: 1rem;
  color: #000;
}
.detail_wrap #Introduction .infobox .infoitem .title .sub {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 116%;
  color: #929292;
}
.detail_wrap #Introduction .infobox .infoitem .descbox {
  flex: 1;
}
.detail_wrap #Introduction .infobox .infoitem .descbox .txt {
  position: relative;
  font-size: 1rem;
  padding-left: 1.85em;
}
.detail_wrap #Introduction .infobox .infoitem .descbox .txt::before {
  content: "";
  width: 0.25em;
  aspect-ratio: 1 / 1;
  background: var(--text-1);
  border-radius: 50%;
  position: absolute;
  left: 0.8em;
  top: 0.5em;
}
.detail_wrap #Introduction .infobox .notice_item .descbox {
  background: #f8f8f8;
  border-radius: 0.5rem;
  padding: 1.25rem 1rem 1.25rem 0.375rem;
}
.detail_wrap #Introduction .infobox .notice_item .descbox .txt {
  line-height: 140%;
  color: #222;
}
.detail_wrap #Introduction .infobox .notice_item .descbox .txt::before {
  background: #222;
}
.detail_wrap #Introduction .infobox .history_item .descbox {
  border: 1px solid #ececec;
  border-radius: 0.5rem;
  padding: 1rem 0.375rem;
}
.detail_wrap #Introduction .infobox .history_item .descbox .txt {
  color: #525252;
}
.detail_wrap #Introduction .infobox .history_item .descbox .txt::before {
  background: #525252;
}
.detail_wrap #Introduction .infobox .store_item {
  display: none;
}

.detail_wrap #Review .titbox {
  margin-bottom: 0;
}
.detail_wrap #Review .write_area {
  max-width: 620px;
  margin: 1.875rem auto;
}
.detail_wrap #Review .write_area .title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-1);
  padding: 0.563rem 1.25rem;
  margin-bottom: 0.625rem;
}
.detail_wrap #Review .write_area .write_box {
  position: relative;
  border: 1px solid var(--third);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 0.25rem 0.563rem 0 rgba(214, 35, 41, 0.15);
  background: var(--white);
  overflow: hidden;
}
.detail_wrap #Review .write_area .write_box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.625rem;
  margin-bottom: 1.5rem;
}
.detail_wrap #Review .write_area .write_box .top .left {
  display: flex;
  align-items: center;
}
.detail_wrap #Review .write_area .write_box .top .left .icon {
  width: 1.25rem;
  margin-right: 0.5rem;
}
.detail_wrap #Review .write_area .write_box .top .left .name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
  margin-right: 0.813rem;
}
.detail_wrap #Review .write_area .write_box .top .left .select {
  border: 1px solid var(--text-2);
  border-radius: 1.25rem;
  padding: 0 1rem;
  width: 120px;
  height: 28px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-2);
  appearance: none;
  background: url(../img/select_arrow2.png) no-repeat right 1rem center /
    0.75rem auto var(--white);
  cursor: pointer;
}
.detail_wrap #Review .write_area .write_box .top .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.detail_wrap #Review .write_area .write_box .top .right .tit {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-right: 0.625rem;
}
.detail_wrap #Review .write_area .write_box .top .right .rating_box {
  display: flex;
}
.detail_wrap #Review .write_area .write_box .top .right .rating_box input {
  display: none;
}
.detail_wrap #Review .write_area .write_box .top .right .rating_box label {
  background: url(../img/ico_star3.png) no-repeat center/contain;
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: pointer;
  -webkit-mask: url(../img/ico_star3.png) center / contain no-repeat;
  mask: url(../img/ico_star3.png) center / contain no-repeat;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .top
  .right
  .rating_box
  label[for="rs0"] {
  display: none;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .top
  .right
  .rating_box
  label:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--secondary);
  background-size: 205% 100%;
  background-position: 0 0;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .top
  .right
  .rating_box
  input:checked
  + label
  ~ label:before {
  background: rgba(0, 0, 0, 0.1);
  background-position: 100% 0;
}
.detail_wrap #Review .write_area .write_box .top .right .bar {
  width: 1px;
  height: 1.375rem;
  background: #d4d4d4;
  margin: 0 0.75rem;
}
.detail_wrap #Review .write_area .write_box .top .right .write_btn {
  font-weight: 700;
  font-size: 0.938rem;
  color: var(--white);
  background: var(--secondary);
  padding: 0.438rem 1.125rem;
  border-radius: 0.5rem;
}

/* 리뷰쓰기 */
.detail_wrap
  #Review
  .write_area
  .write_box
  .reviewable_order
  .reviewable_order_item_left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .reviewable_order
  .write_review_btn {
  font-weight: 700;
  font-size: 0.938rem;
  color: var(--white);
  background: var(--secondary);
  padding: 0.438rem 1.125rem;
  border-radius: 0.5rem;
}
/* 리뷰쓰기 입력창 */
.detail_wrap #Review .write_area .write_box#id_review_write_box {
  display: none;
}
/* 리뷰할 주문 목록(없는 경우 없습니다 표시) */
.detail_wrap #Review .write_area .write_box#id_reviewable_orders_list {
  display: none;
}

.detail_wrap #Review .write_area .write_box .emoji {
  padding: 0 1.313rem;
  margin-bottom: 1.5rem;
}
.detail_wrap #Review .write_area .write_box .emoji .emoji_item input {
  display: none;
}
.detail_wrap #Review .write_area .write_box .emoji .emoji_item .emoji_badge {
  cursor: pointer;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge.emoji1 {
  border: 1px solid #e75358;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge.emoji2 {
  border: 1px solid #c2a717;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge.emoji3 {
  border: 1px solid #29a515;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge.emoji4 {
  border: 1px solid #298ae2;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge.emoji5 {
  border: 1px solid #d765ff;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge
  .icon,
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  .emoji_badge
  .icon2 {
  width: 1.313rem;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  input:not(:checked)
  + .emoji_badge {
  background: #fcfcfc;
  border-color: var(--text-2);
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  input:not(:checked)
  + .emoji_badge
  .icon {
  display: none;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  input:not(:checked)
  + .emoji_badge
  .icon2 {
  display: block;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  input:not(:checked)
  + .emoji_badge
  .txt {
  color: var(--text-2);
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .emoji
  .emoji_item
  input:checked
  + .emoji_badge
  .icon2 {
  display: none;
}
.detail_wrap #Review .write_area .write_box .textbox .textarea {
  border-radius: 0.5rem;
  padding: 0.625rem 1.25rem;
  width: 100%;
  height: 100px;
  background: var(--bg);
  border: none;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 150%;
  color: #e48d8d;
  resize: none;
}
.detail_wrap #Review .write_area .write_box .textbox .textarea::placeholder {
  color: #e48d8d;
}
.detail_wrap #Review .write_area .write_box .login_popup {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.72);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1.25rem);
  height: calc(100% - 1.25rem);
  border-radius: 0.875rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.detail_wrap #Review .write_area .write_box .login_popup.hide {
  display: none;
}
.detail_wrap #Review .write_area .write_box .login_popup .login_msgbox {
  border: 2px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 1.5rem 2.813rem 1rem;
  background: var(--white);
  text-align: center;
}
.detail_wrap #Review .write_area .write_box .login_popup .login_msgbox .desc {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.58);
}
.detail_wrap #Review .write_area .write_box .login_popup .login_msgbox .link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: var(--secondary);
  text-underline-offset: 3px;
}
.detail_wrap
  #Review
  .write_area
  .write_box
  .login_popup
  .login_msgbox
  .link
  .icon {
  width: 0.4rem;
}
.detail_wrap #Review .write_area .write_box .login_popup .notice_txt {
  padding: 0 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--secondary);
}
.detail_wrap #Review .write_area .write_box .login_popup .notice_txt .icon {
  width: 0.938rem;
}
.detail_wrap #Review .write_area .write_box#id_review_write_login_popup {
  height: 220px;
}
.detail_wrap #Review .chartarea {
  padding: 1.25rem 0 1.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail_wrap #Review .chartarea .rating {
  display: flex;
  align-items: center;
  gap: 0.156rem;
  padding: 1.25rem 0 2.25rem;
}
.detail_wrap #Review .chartarea .rating .num {
  font-weight: 800;
  font-size: 1.625rem;
  letter-spacing: 0.06em;
  color: var(--text-1);
}
.detail_wrap #Review .chartarea .rating .rate {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}
.detail_wrap #Review .chartarea .rating .rate .star {
  background: url(../img/ico_rate2.png) no-repeat center/contain;
  width: 1.5rem;
  aspect-ratio: 1/1;
}
.detail_wrap #Review .chartarea .rating .count {
  font-size: 1rem;
  color: var(--text-2);
}
.detail_wrap #Review .chartarea .chartbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.25rem 0;
}
.detail_wrap #Review .chartarea .chartbox .emoji {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge {
  position: absolute;
  white-space: nowrap;
  width: max-content;
  height: 35px;
  font-size: 0.875rem;
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge.emoji1 {
  right: 100%;
  top: 30%;
  transform: translateY(-50%);
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge.emoji2 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge.emoji3 {
  left: 100%;
  top: 30%;
  transform: translateY(-50%);
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge.emoji4 {
  left: 65%;
  bottom: 3%;
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge.emoji5 {
  right: 65%;
  bottom: 3%;
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge .icon {
  width: 1.375rem;
}
.detail_wrap #Review .chartarea .chartbox .emoji .emoji_badge .num {
  font-weight: 400;
}
.detail_wrap #Review .chartarea .analysis {
  padding: 2.5rem 0 1.25rem;
  font-size: 0.875rem;
  line-height: 200%;
  text-align: center;
  color: var(--text-2);
}
.detail_wrap #Review .chartarea .analysis .desc {
  font-size: 1.125rem;
  color: var(--text-1);
}
.detail_wrap #Review .chartarea .analysis .desc .bold {
  font-weight: 700;
}
.detail_wrap #Review .chartarea .analysis .desc .point {
  font-weight: 700;
  color: var(--primary);
}
.detail_wrap #Review .reviewarea {
  padding: 1.25rem 0 1.25rem;
  max-width: 716px;
  margin: 0 auto;
}
.detail_wrap #Review .reviewarea > .titlebox {
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail_wrap #Review .reviewarea > .titlebox .title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.detail_wrap #Review .reviewarea > .titlebox .title .num {
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--text-2);
}
.detail_wrap #Review .reviewarea > .titlebox .sortbox {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.detail_wrap #Review .reviewarea > .titlebox .sortbox .sortbtn {
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap #Review .reviewarea > .titlebox .sortbox .sortbtn.active {
  font-weight: 700;
  color: var(--primary);
}
.detail_wrap #Review .reviewarea .reviewbox {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.625rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item {
  border: 1px solid var(--third);
  border-radius: 0.875rem;
  padding: 1.875rem 1.25rem 1.5rem;
  box-shadow: 0 0.25rem 0.563rem 0 rgba(214, 35, 41, 0.15);
  background: var(--white);
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.625rem;
  margin-bottom: 1.25rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .top .left {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .titlebox {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .titlebox .icon {
  width: 1.125rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .titlebox .title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .titlebox .ratebox {
  display: flex;
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .titlebox
  .ratebox
  .rate {
  background: url(../img/ico_rate.png) no-repeat center / contain;
  width: 1.25rem;
  aspect-ratio: 1 / 1;
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .titlebox
  .ratebox
  .rate
  + .rate {
  margin-left: -0.25rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .infobox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .infobox .txt {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .infobox .bar {
  width: 1px;
  height: 0.75rem;
  background: #9e9e9e;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .emoji {
  padding: 0.375rem 0.625rem 0.188rem;
  margin-bottom: 0.75rem;
  cursor: default;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .desc {
  padding: 0 0.75rem;
  font-size: 1rem;
  line-height: 150%;
  color: var(--text-1);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: pre-line;
  cursor: default;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .answer_lsit {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .answer_box {
  border: 1px solid var(--third);
  border-radius: 0.313rem;
  padding: 1.125rem 1.25rem 1rem;
  background: var(--bg);
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .answer_box
  .answer_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .answer_box
  .answer_titbox {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .answer_box
  .answer_titbox
  .icon {
  width: 1.125rem;
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .answer_box
  .answer_titbox
  .title {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-2);
}
.detail_wrap
  #Review
  .reviewarea
  .reviewbox
  .review_item
  .answer_box
  .answer_titbox
  .title
  .name {
  color: var(--text-1);
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .answer_box .date {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap #Review .reviewarea .reviewbox .review_item .answer_desc {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  color: var(--text-1);
}
.detail_wrap #Review > .more_box {
  margin-top: 1.25rem;
  padding-bottom: 1.875rem;
}
.detail_wrap #Review .pagination {
  display: none;
}

.detail_wrap #QnA {
}
.detail_wrap #QnA .titbox {
  margin-bottom: 0;
}
.detail_wrap #QnA .write_area {
  max-width: 716px;
  margin: 1.875rem auto 2.5rem;
  padding: 0 0.625rem;
}
.detail_wrap #QnA .write_area .title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-1);
  padding: 0.563rem 1.25rem;
  margin-bottom: 0.625rem;
}
.detail_wrap #QnA .write_area .write_box {
  border: 1px solid var(--third);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 0.25rem 0.563rem 0 rgba(214, 35, 41, 0.15);
  background: var(--white);
}
.detail_wrap #QnA .write_area .write_box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.625rem;
  margin-bottom: 0.625rem;
}
.detail_wrap #QnA .write_area .write_box .top .left {
  display: flex;
  align-items: center;
}
.detail_wrap #QnA .write_area .write_box .top .left .icon {
  width: 1.25rem;
  margin-right: 0.5rem;
}
.detail_wrap #QnA .write_area .write_box .top .left .name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
}
.detail_wrap #QnA .write_area .write_box .top .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.detail_wrap #QnA .write_area .write_box .top .right .tit {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-right: 0.625rem;
}
.detail_wrap #QnA .write_area .write_box .top .right .write_btn {
  font-weight: 700;
  font-size: 0.938rem;
  color: var(--white);
  background: var(--secondary);
  padding: 0.438rem 1.125rem;
  border-radius: 0.5rem;
}
.detail_wrap #QnA .write_area .write_box .textbox .textarea {
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  width: 100%;
  height: 95px;
  background: var(--bg);
  border: none;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 150%;
  color: #e48d8d;
  resize: none;
}
.detail_wrap #QnA .write_area .write_box .textbox .textarea::placeholder {
  color: #e48d8d;
}
.detail_wrap #QnA .write_area .write_box .notice_txt {
  font-size: 0.75rem;
  line-height: 150%;
  text-align: center;
  color: var(--text-2);
  margin-top: 1.25rem;
}
.detail_wrap #QnA .qnaarea {
  padding: 0 0 1.25rem;
  max-width: 716px;
  margin: 0 auto;
}
.detail_wrap #QnA .qnaarea > .titlebox {
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail_wrap #QnA .qnaarea > .titlebox .title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.detail_wrap #QnA .qnaarea > .titlebox .title .num {
  font-weight: 400;
}
.detail_wrap #QnA .qnaarea .qnabox {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.625rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item {
  border: 1px solid var(--third);
  border-radius: 0.875rem;
  padding: 1.875rem 1.25rem 1.5rem;
  box-shadow: 0 0.25rem 0.563rem 0 rgba(214, 35, 41, 0.15);
  background: var(--white);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .top {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.625rem;
  margin-bottom: 1.25rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .top .icon {
  width: 1.125rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .top .title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .top .date {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .desc {
  padding: 0 0.75rem;
  font-size: 1rem;
  line-height: 150%;
  color: var(--text-1);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  cursor: default;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_lsit {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box {
  border: 1px solid var(--third);
  border-radius: 0.313rem;
  padding: 1.125rem 1.25rem 1rem;
  background: var(--bg);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box .answer_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box .answer_titbox {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box .answer_titbox .icon {
  width: 1.125rem;
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box .answer_titbox .title {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-2);
}
.detail_wrap
  #QnA
  .qnaarea
  .qnabox
  .qna_item
  .answer_box
  .answer_titbox
  .title
  .name {
  color: var(--text-1);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_box .date {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-2);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .answer_desc {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  color: var(--text-1);
}
.detail_wrap #QnA .qnaarea .qnabox .qna_item .re_answer_lsit {
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.detail_wrap #QnA > .more_box {
  margin-top: 1.25rem;
  padding-bottom: 1.875rem;
}

/* mypage */
.mypage_wrap .container {
  margin-top: 125px;
  padding-top: calc(55px);
}
.mypage_wrap .container > .inner {
  max-width: 640px;
  margin-bottom: 20px;
}
.mypage_wrap .mypage_top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
  padding: 1.25rem 0 0.625rem;
}
.mypage_wrap .mypage_top .back_btn {
  background: url(../img/ico_back.png) no-repeat center / contain;
  width: 0.75rem;
  height: 1.25rem;
}
.mypage_wrap .mypage_top .title {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.mypage_wrap .mypage_top .logout_btn {
  position: absolute;
  right: 10px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.mypage_wrap .mobile_path .logout_btn {
  position: absolute;
  right: 10px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}
.mypage_wrap .mypage_guide_banner {
  width: 100%;
  min-height: 3.5rem;
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.mypage_wrap .mypage_guide_banner .guide_link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.923rem;
  line-height: 1.25;
}
.mypage_wrap .mypage_guide_banner .guide_icon {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
  position: relative;
  flex-shrink: 0;
}
.mypage_wrap .mypage_guide_banner .guide_icon img {
  max-width: none;
  position: absolute;
  pointer-events: none;
}
.mypage_wrap .mypage_guide_banner .guide_icon .guide_icon_circle {
  inset: 0;
  width: 100%;
  height: 100%;
}
.mypage_wrap .mypage_guide_banner .guide_icon .guide_icon_mark {
  width: 46.5%;
  height: 63.3%;
  position: absolute;
  left: 26.8%;
  top: 18.3%;
  overflow: hidden;
}
.mypage_wrap .mypage_guide_banner .guide_icon .guide_icon_mark img {
  width: 136.3%;
  height: 100%;
  left: -18.3%;
  top: 0;
}
.mypage_wrap .mypage_guide_banner .guide_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mypage_wrap .mypage_guide_banner .guide_arrow {
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.mypage_wrap .mypage_guide_banner .guide_close {
  width: 1rem;
  height: 1rem;
  position: relative;
  flex-shrink: 0;
}
.mypage_wrap .mypage_guide_banner .guide_close::before,
.mypage_wrap .mypage_guide_banner .guide_close::after {
  content: "";
  width: 0.75rem;
  height: 2px;
  background: var(--primary);
  border-radius: 999px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.mypage_wrap .mypage_guide_banner .guide_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mypage_wrap .mypage_guide_banner .guide_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* .mypage_wrap .mypage_login {display: none;}  */
.mypage_wrap .mypage_login {
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: 1.1rem;
  padding: 1.7rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.mypage_wrap .mypage_login .desc {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.58);
}
.mypage_wrap .mypage_login .link {
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: var(--primary);
  text-underline-offset: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1rem;
}
.mypage_wrap .mypage_login .link .arrow {
  background: url(../img/counsel_login_arrow.png) no-repeat center/contain;
  width: 0.8rem;
  height: 1.3rem;
}
.mypage_wrap .mypage_contbox {
  position: relative;
  margin-bottom: 13.75rem;
}
.mypage_wrap .mypage_contbox .mycoin {
  border-radius: 0.75rem;
  padding: 1.5rem 1.5rem 1.875rem;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
}
.mypage_wrap .mypage_contbox .mycoin .left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mypage_wrap .mypage_contbox .mycoin .left .tit {
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--primary);
}
.mypage_wrap .mypage_contbox .mycoin .left .coin {
  font-weight: 600;
  font-size: 2rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mypage_wrap .mypage_contbox .mycoin .left .coin .icon {
  width: 1.5rem;
}
.mypage_wrap .mypage_contbox .mycoin .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.mypage_wrap .mypage_contbox .mycoin .right .link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #d62329;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mypage_wrap .mypage_contbox .mycoin .right .link .arrow {
  width: 0.438rem;
}
.mypage_wrap .mypage_contbox .mycoin .right .coin_btn {
  background: var(--primary);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
}
.mypage_wrap .mypage_contbox .mynav {
  padding: 1.875rem 4rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage_wrap .mypage_contbox .mynav > .item {
  position: relative;
}
.mypage_wrap .mypage_contbox .mynav > .item .link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.mypage_wrap .mypage_contbox .mynav > .item .link .icon {
  width: 2.188rem;
}
.mypage_wrap .mypage_contbox .mynav > .item .link .tit {
  flex: 1;
}
.mypage_wrap .mypage_contbox .mynav > .bar {
  width: 1px;
  height: 2.125rem;
  background: #d8d8d8;
}
.mypage_wrap .mypage_contbox .mymenu {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 1.875rem;
}
.mypage_wrap .mypage_contbox .mymenu > .item {
  width: 100%;
}
.mypage_wrap .mypage_contbox .mymenu > .item .link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
}
.mypage_wrap .mypage_contbox .mymenu > .item .link .icon {
  width: 1.5rem;
}
.mypage_wrap .mypage_contbox .mymenu > .item .link .tit {
  flex: 1;
  font-weight: 500;
  font-size: 1rem;
  color: #212121;
}
.mypage_wrap .mypage_contbox .mymenu > .item.point .link .tit {
  font-weight: 700;
  color: var(--primary);
}
.mypage_wrap .mypage_contbox .mymenu > .item .link .arrow {
  background: url(../img/ico_arrow.png) no-repeat center/contain;
  width: 0.625rem;
  height: 1.188rem;
}
.mypage_wrap .mypage_contbox .mymenu > .bar {
  width: 100%;
  height: 1px;
  background: #dbdbdb;
}
.mypage_wrap .login_box {
  max-width: 308px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
}

.all_notice_wrap .container {
  padding-top: calc(116px);
}
.all_notice_wrap .container > .inner {
  max-width: 640px;
}
.all_notice_wrap .mypage_top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
  padding: 1.25rem 0 0.625rem;
}
.all_notice_wrap .mypage_top .back_btn {
  background: url(../img/ico_back.png) no-repeat center / contain;
  width: 0.75rem;
  height: 1.25rem;
}
.all_notice_wrap .mypage_top .title {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.all_notice_wrap .mypage_top .logout_btn {
  position: absolute;
  right: 10px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.all_notice_wrap .mypage_contbox .mynav > .item {
  position: relative;
}
.all_notice_wrap .mypage_contbox .mynav > .item .link {
  font-weight: 500;
  font-size: 0.875rem;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.all_notice_wrap .mypage_contbox .mynav > .item .link .icon {
  width: 2.188rem;
}
.all_notice_wrap .mypage_contbox .mynav > .item .link .tit {
  flex: 1;
}
.all_notice_wrap .mypage_contbox .mynav > .bar {
  width: 1px;
  height: 2.125rem;
  background: #d8d8d8;
}
.all_notice_wrap .mypage_contbox .mymenu {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 1.875rem;
}
.all_notice_wrap .mypage_contbox .mymenu > .item {
  width: 100%;
}
.all_notice_wrap .mypage_contbox .mymenu > .item .link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
}
.all_notice_wrap .mypage_contbox .mymenu > .item .link .icon {
  width: 1.5rem;
}
.all_notice_wrap .mypage_contbox .mymenu > .item .link .tit {
  flex: 1;
  font-weight: 500;
  font-size: 1rem;
  color: #212121;
}
.all_notice_wrap .mypage_contbox .mymenu > .item.point .link .tit {
  font-weight: 700;
  color: var(--primary);
}
.all_notice_wrap .mypage_contbox .mymenu > .item .link .arrow {
  background: url(../img/ico_arrow.png) no-repeat center/contain;
  width: 0.625rem;
  height: 1.188rem;
}
.all_notice_wrap .mypage_contbox .mymenu > .bar {
  width: 100%;
  height: 1px;
  background: #dbdbdb;
}

/* 상담사 자주 묻는 질문 */
.all_notice_wrap .mypage_contbox .faq_list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 1.875rem;
}
.all_notice_wrap .mypage_contbox .faq_list > .item {
  width: 100%;
}
.all_notice_wrap .mypage_contbox .faq_list > .item .link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
}
.all_notice_wrap .mypage_contbox .faq_list > .item .link .icon {
  width: 1.5rem;
}
.all_notice_wrap .mypage_contbox .faq_list > .item .link .tit {
  flex: 1;
  font-weight: 500;
  font-size: 1rem;
  color: #212121;
}
.all_notice_wrap .mypage_contbox .faq_list > .item.point .link .tit {
  font-weight: 700;
  color: var(--primary);
}
.all_notice_wrap .mypage_contbox .faq_list > .item .link .arrow {
  background: url(../img/ico_arrow.png) no-repeat center/contain;
  width: 0.625rem;
  height: 1.188rem;
}
.all_notice_wrap .mypage_contbox .faq_list > .bar {
  width: 100%;
  height: 1px;
  background: #dbdbdb;
}

/* 상담사 공지사항 */
.all_notice_wrap .mypage_contbox .notice_list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 1.875rem;
}
.all_notice_wrap .mypage_contbox .notice_list > .item {
  width: 100%;
}
.all_notice_wrap .mypage_contbox .notice_list > .item .link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
}
.all_notice_wrap .mypage_contbox .notice_list > .item .link .icon {
  width: 1.5rem;
}
.all_notice_wrap .mypage_contbox .notice_list > .item .link .tit {
  flex: 1;
  font-weight: 500;
  font-size: 1rem;
  color: #212121;
}
.all_notice_wrap .mypage_contbox .notice_list > .item.point .link .tit {
  font-weight: 700;
  color: var(--primary);
}
.all_notice_wrap .mypage_contbox .notice_list > .item .link .arrow {
  background: url(../img/ico_arrow.png) no-repeat center/contain;
  width: 0.625rem;
  height: 1.188rem;
}
.all_notice_wrap .mypage_contbox .notice_list > .bar {
  width: 100%;
  height: 1px;
  background: #dbdbdb;
}

/* 상담사 1:1문의 */
.all_notice_wrap .mypage_contbox .qna_list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 1.875rem;
}
.all_notice_wrap .mypage_contbox .qna_list > .item {
  width: 100%;
}
.all_notice_wrap .mypage_contbox .qna_list > .item .link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
}
.all_notice_wrap .mypage_contbox .qna_list > .item .link .icon {
  width: 1.5rem;
}
.all_notice_wrap .mypage_contbox .qna_list > .item .link .tit {
  flex: 1;
  font-weight: 500;
  font-size: 1rem;
  color: #212121;
}
.all_notice_wrap .mypage_contbox .qna_list > .item.point .link .tit {
  font-weight: 700;
  color: var(--primary);
}
.all_notice_wrap .mypage_contbox .qna_list > .item .link .arrow {
  background: url(../img/ico_arrow.png) no-repeat center/contain;
  width: 0.625rem;
  height: 1.188rem;
}
.all_notice_wrap .mypage_contbox .qna_list > .bar {
  width: 100%;
  height: 1px;
  background: #dbdbdb;
}

/* 상담사 */
.counselor_wrap .counselor_infobox {
  display: table;
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px 15px;
  margin-bottom: 30px;
}
.counselor_wrap .container > .inner {
  max-width: 640px;
}
.counselor_wrap .container > .inner .left {
  width: 50%;
  display: table-cell;
}
.counselor_wrap .container > .inner .left .user_id {
  font-size: 16px;
  font-weight: 600;
  color: #eb655f;
  margin-bottom: 6px;
}
.counselor_wrap .container > .inner .left .btn_user_motify {
  font-size: 14px;
  color: #999999;
}

.counselor_wrap .container > .inner .right {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding-left: 4%;
}
.counselor_wrap .container > .inner .info_step {
  margin-bottom: 15px;
}
.counselor_wrap .container > .inner .info_step .tit {
  padding-bottom: 5px;
}
.counselor_wrap .container > .inner .info_step .tit > a {
  font-size: 14px;
  color: #999999;
}
.counselor_wrap .container > .inner .info_step p {
  letter-spacing: normal;
}
.counselor_wrap .container > .inner .info_step > .con_step {
  width: 100%;
  height: 45px;
  text-align: center;
  vertical-align: middle;
  border-radius: 45px;
  background-color: #fff;
  font-size: 26px;
  font-weight: 500;
  line-height: 45px;
  color: #38b30b;
}
.counselor_wrap .container > .inner .info_tel .tit {
  font-size: 14px;
  color: #999999;
  padding-bottom: 5px;
}
.counselor_wrap .container > .inner .info_tel > .tel_toggle {
  position: relative;
}
.counselor_wrap .container > .inner .info_tel > .tel_toggle .checkbox {
  display: none;
}
.counselor_wrap
  .container
  > .inner
  .info_tel
  > .tel_toggle
  .checkbox:checked
  + .toggle {
  background-color: #ffffff;
}
.counselor_wrap .container > .inner .info_tel > .tel_toggle .toggle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  border-radius: 30px;
  border: 2px solid #ffffff;
  box-sizing: border-box;
}
.counselor_wrap
  .container
  > .inner
  .info_tel
  > .tel_toggle
  .toggle
  span.toggle_on {
  float: left;
  width: 50%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: #eb655f;
  padding-left: 5%;
}
.counselor_wrap
  .container
  > .inner
  .info_tel
  > .tel_toggle
  .toggle
  span.toggle_off {
  float: right;
  width: 50%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: #aaaaaa;
  padding-right: 5%;
}
.counselor_wrap
  .container
  > .inner
  .info_tel
  > .tel_toggle
  .checkbox:checked
  + .toggle:after {
  content: "";
  position: absolute;
  width: 49%;
  height: 40px;
  border-radius: 30px;
  background-color: #eb655f;
  border: 2px solid #b8433e;
  top: 1px;
  left: 50%;
  transition: all 0.5s;
  box-sizing: border-box;
}
.counselor_wrap .container > .inner .info_tel > .tel_toggle .toggle:after {
  content: "";
  position: absolute;
  width: 49%;
  height: 40px;
  border-radius: 30px;
  background-color: #eeeeee;
  border: 2px solid #dddddd;
  top: 1px;
  left: 1%;
  transition: all 0.5s;
  box-sizing: border-box;
}

/* 전화상담 관리 */
.counselor_wrap .section_box {
  position: relative;
  margin-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
}
.counselor_wrap .container h4.sc_title {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
}
.counselor_wrap .section_box table.tb_list {
  width: 100%;
  border-top: solid 1px #eeeeee;
}
.counselor_wrap .section_box table.tb_list tbody tr th {
  position: relative;
  background-color: #f5f5f5;
  padding: 10px 15px;
  text-align: left;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_wrap .section_box table.tb_list tbody tr td {
  position: relative;
  text-align: left;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_wrap .section_box table.tb_list tbody tr td.link_txt a {
  display: inline-block;
  width: 100%;
  color: #151515;
  padding: 10px 20px 10px 15px;
}

/* 콘텐츠 관리 */
.counselor_wrap .section_box ul.mn_list {
  width: 100%;
  border-top: solid 1px #eeeeee;
}
.counselor_wrap .section_box ul.mn_list li {
  position: relative;
  display: block;
  border-bottom: solid 1px #eeeeee;
}
.counselor_wrap .section_box ul.mn_list li > a {
  display: block;
  padding: 10px 5px;
  font-size: 13px;
  color: #151515;
}

/* 상담사 메뉴 */
.counselor_menu_wrap .container {
  padding-top: 0;
  margin-top: 0 !important;
}
.counselor_menu_wrap .container {
  position: relative;
  background-color: #fff;
  padding: 0 15px 36px;
}
.counselor_menu_wrap .container > .inner {
  max-width: 640px;
}
.counselor_menu_wrap header {
  position: relative;
  padding: 0 0px;
  border-bottom: solid 1px #f5f5f5;
  box-shadow: 0px 3px 6px #00000005;
  background-color: #fff;
  z-index: 5;
}
.counselor_menu_wrap header .header_title {
  display: flex;
  padding: 15px 11px;
}
.counselor_menu_wrap header .header_title > .btn_back {
  float: left;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(/page/img/ico_back.png) center center;
  background-size: 9px;
  background-repeat: no-repeat;
}
.counselor_menu_wrap header .header_title > p {
  float: left;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #151515;
  padding-left: 10px;
}
.counselor_menu_wrap .counselmenu_detail {
  padding-left: 0;
  padding-right: 0;
}

.counselor_menu_wrap ul {
  width: 100%;
  border-top: solid 1px #f0f0f0;
}
.counselor_menu_wrap .counselmenu_bt_box {
  padding: 25px 15px;
}
.counselor_menu_wrap ul li {
  padding: 15px;
  border-bottom: solid 1px #f0f0f0;
}
.counselor_menu_wrap ul li dl {
  display: flex;
}
.counselor_menu_wrap ul li dl dd.txt_right {
  text-align: right;
  margin: auto;
  flex: 1;
  font-size: 13px;
}
.counselor_menu_wrap ul li dl dt {
  display: table-cell;
  width: 30%;
  font-size: 13px;
  font-weight: 600;
  color: #151515;
  text-align: left;
  vertical-align: middle;
}
.counselor_menu_wrap ul,
li {
  list-style: none;
}
.counselor_menu_wrap ul.list_num li {
  position: relative;
  font-size: 12px;
  padding: 10px 10px 5px 18px;
  color: #555555;
}
.counselor_menu_wrap table.tb_list_red {
  width: 100%;
}
.counselor_menu_wrap table.tb_list_red thead tr th {
  background-color: #eb655f1a;
  padding: 12px 15px;
  text-align: center;
  font-size: 14px;
  color: #151515;
  border-right: solid 1px #ffffff;
}
.counselor_menu_wrap table.tb_list_red tbody tr th {
  position: relative;
  padding: 10px 15px;
  text-align: left;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_menu_wrap table.tb_list_red tbody tr td {
  position: relative;
  padding: 10px 15px;
  text-align: center;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}

.counselor_menu_wrap .mt_25 {
  margin-top: 25px;
}

.counselor_menu_wrap .top_title {
  background-color: #f5f5f5;
  text-align: center;
  padding: 25px 15px 25px;
}
.counselor_menu_wrap .top_title > h3 {
  font-size: 14px;
  font-weight: 500;
  color: #151515;
}
.counselor_menu_wrap .container_inner {
  padding: 20px 15px;
}
.counselor_menu_wrap h4.sc_title {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
}
.counselor_menu_wrap table.tb_list {
  width: 100%;
  border-top: solid 1px #eeeeee;
}
.counselor_menu_wrap table.tb_list tbody tr th {
  position: relative;
  background-color: #f5f5f5;
  padding: 10px 15px;
  text-align: left;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_menu_wrap table.tb_list tbody tr td {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_menu_wrap table {
  border-spacing: 0px;
}
.counselor_menu_wrap table.tb_list tbody tr td.txt {
  padding-left: 10px;
}

.counselor_menu_wrap ul.counsel_month_list li .mon {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45em;
  padding: 10px 0;
  color: #151515;
  border-bottom: solid 1px #eeeeee;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_time {
  font-size: 12px;
  font-weight: 400;
  padding: 10px 0;
  color: #999999;
  border-bottom: solid 1px #eeeeee;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_time dl {
  margin: 0;
  padding: 0;
  display: flex;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_time dl dt {
  margin: 0;
  padding: 0 5px 0 0;
  line-height: 1.45em;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_time dl dd {
  margin: 0;
  padding: 0;
  line-height: 1.45em;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_total {
  font-size: 12px;
  padding: 10px 0;
}
.counselor_menu_wrap ul.counsel_month_list li .txt_total dl {
  margin: 0;
  padding: 0;
  display: flex;
}

.counselor_menu_wrap .container.monthly_detail {
  position: relative;
  background-color: #fff;
  padding: 0;
}
.counselor_menu_wrap .detail_tit {
  padding: 15px;
  font-size: 14px;
  color: #151515;
  border-bottom: solid 1px #f0f0f0;
}
.counselor_menu_wrap .detail_con .detail_box {
  padding: 15px;
  border-bottom: solid 1px #f0f0f0;
}
.counselor_menu_wrap .detail_con .detail_box dl.tit {
  display: flex;
  padding-bottom: 5px;
}
.counselmenu_detail .detail_con .detail_box dl {
  margin: 0;
  padding: 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
}
.counselmenu_detail .detail_con .detail_box dl.tit dt {
  margin: 0;
  padding: 0;
  color: #151515;
  font-weight: 600;
}
.counselmenu_detail .detail_con .detail_box dl.tit dd {
  margin: 0;
  padding: 0;
  color: #151515;
  font-weight: 600;
}
.counselmenu_detail .detail_con .detail_bt_box {
  padding: 15px;
}

.counselor_menu_wrap .btn_txt_btn {
  background-color: #38b30b;
  color: #ffffff;
  border: solid 1px #38b30b;
  width: 100%;
  border-radius: 5px;
  padding: 12px;
  text-align: center;
}
.counselor_menu_wrap textarea.write_text {
  line-height: 1.5;
  resize: none;
}
.counselor_menu_wrap textarea.write_text {
  height: 150px;
}
.counselor_menu_wrap textarea.input_text {
  width: 100%;
  padding: 12px 15px;
  font-size: 14px;
  color: #555555;
  border-radius: 5px;
  border: solid 1px #dddddd;
}

ul.detail_tab {
  display: flex;
  border-bottom: solid 1px #eeeeee;
  padding: 0 15px;
}
ul.detail_tab.two li {
  float: left;
  width: 50%;
  text-align: center;
}
ul.detail_tab li a.active,
ul.detail_tab li button.active {
  font-weight: 700;
  color: #38b30b;
}

/* coin recharge */
.coinRecharge_wrap .container {
  padding-top: calc(125px);
  padding-bottom: 7.75rem;
}
.coinRecharge_wrap .container > .inner {
  max-width: 640px;
}
.coinRecharge_wrap .coinbox .coin_top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.875rem;
  padding: 1.25rem 0 0.625rem;
}
.coinRecharge_wrap .coinbox .coin_top .back_btn {
  background: url(../img/ico_back.png) no-repeat center / contain;
  width: 0.75rem;
  height: 1.25rem;
}
.coinRecharge_wrap .coinbox .coin_top .title {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 90%;
  color: var(--text-1);
}
.coinRecharge_wrap .coinbox .current_box {
  border-radius: 0.75rem;
  padding: 1.125rem 1.875rem;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.875rem;
}
.coinRecharge_wrap .coinbox .current_box .title {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.coinRecharge_wrap .coinbox .current_box .title .icon {
  width: 1.25rem;
}
.coinRecharge_wrap .coinbox .current_box .coin {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-1);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.coinRecharge_wrap .coinbox .current_box .coin .num {
  font-weight: 600;
  font-size: 1.375rem;
}
.coinRecharge_wrap .coinbox .recharge_box {
  margin-bottom: 1.875rem;
}
.coinRecharge_wrap .coinbox .recharge_box .titbox {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.coinRecharge_wrap .coinbox .recharge_box .titbox .sub {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-2);
}
.coinRecharge_wrap .coinbox .recharge_box .contbox {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .head {
  border-radius: 0.5rem;
  padding: 0.625rem 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.125rem;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .head .head_tit {
  width: 50%;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--primary);
  text-align: center;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .head .bar {
  width: 1px;
  height: 1rem;
  background: var(--secondary);
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item {
  position: relative;
  width: 100%;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > input {
  position: absolute;
  right: 1.875rem;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  width: 1.125rem;
  aspect-ratio: 1 / 1;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  transition: all 0.4s ease;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > input::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  border-radius: 50%;
  transition: all 0.4s ease;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label {
  border: 2px solid var(--grey);
  border-radius: 0.5rem;
  padding: 1.563rem 1.875rem;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  transition: all 0.4s ease;
  cursor: pointer;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label .left {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label .left .icon {
  background: url(../img/ico_coin2.png) no-repeat center / contain;
  width: 1rem;
  aspect-ratio: 1 / 1;
  display: inline-block;
  transition: all 0.4s ease;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .left
  .title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .left
  .title
  .tit {
  font-weight: 600;
  font-size: 1.125rem;
  color: #414141;
  transition: all 0.4s ease;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .left
  .title
  .plus {
  background: url(../img/ico_plus.png) no-repeat center/contain;
  width: 0.438rem;
  aspect-ratio: 1/1;
  transition: all 0.4s ease;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .left
  .title
  .percent {
  font-weight: 600;
  font-size: 0.875rem;
  color: #414141;
  transition: all 0.4s ease;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label .bar {
  width: 1px;
  height: 1rem;
  background: #e3e3e3;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label .right {
  width: 50%;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .right
  .price {
  width: 100%;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--primary);
  transition: all 0.4s ease;
  text-align: right;
  padding-right: 5.125rem;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge {
  border-radius: 0.5rem;
  padding: 0.25rem 0.625rem;
  position: absolute;
  top: -0.75rem;
  left: -1.063rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge.typeA {
  background: #ff6268;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(216, 35, 35, 0.49);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge.typeB {
  background: #ffb547;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(216, 143, 35, 0.49);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge.typeC {
  background: #ff6268;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(216, 35, 35, 0.49);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge
  .icon {
  background: url(../img/ico_fire.png) no-repeat center/contain;
  width: 0.938rem;
  aspect-ratio: 1/1;
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label
  .recommend_badge
  .txt {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--white);
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label:hover {
  border-color: var(--secondary);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > label:hover:active {
  background: #ffeded;
}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > input:checked {
  border-color: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked::before {
  background: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label {
  background: var(--secondary);
  border-color: var(--grey);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .left
  .icon {
  background-image: url(../img/ico_coin3.png);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .left
  .title
  .tit {
  color: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .left
  .title
  .plus {
  background-image: url(../img/ico_plus2.png);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .left
  .title
  .percent {
  color: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .bar {
  background: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked
  + label
  .right
  .price {
  color: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .recharge_box
  .contbox
  > .item
  > input:checked:active
  + label {
  background: var(--primary);
}
.coinRecharge_wrap .coinbox .recharge_box .btnbox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.coinRecharge_wrap .coinbox .recharge_box .btnbox .confirm_btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-2);
}
.coinRecharge_wrap .coinbox .recharge_box .btnbox .confirm_btn .icon {
  width: 0.875rem;
}
.coinRecharge_wrap .coinbox .payment_box .titbox {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-1);
  padding: 1.25rem 0;
  border-bottom: 1px solid #e2e2e2;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox {
  border-bottom: 1px solid #e2e2e2;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item {
  width: 100%;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .radio_btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  cursor: pointer;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .radio_btn input {
  appearance: none;
  position: relative;
  border: 1px solid #e6e6e6;
  width: 1.125rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  cursor: pointer;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .radio_btn
  input::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  border-radius: 50%;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .radio_btn
  input:checked {
  border-color: var(--secondary);
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .radio_btn
  input:checked::before {
  background: var(--secondary);
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .radio_btn label {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
  display: block;
  flex: 1;
  cursor: pointer;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .methodcont {
  display: none;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item.active .methodcont {
  display: block;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .add_cardbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .add_cardbox .img {
  max-width: 208px;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .add_cardbox .txt {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: #5a5a5a;
}
.coinRecharge_wrap .coinbox .payment_box .methodbox > .item .pay_selbox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 1.25rem 0 1.875rem;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn {
  width: 100%;
  max-width: 240px;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn
  input {
  display: none;
}

/* 결제 버튼 : 기본 스타일 */
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn
  label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 1.5rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: #727272;
  width: 100%;
  border: 1px solid var(--grey);
  background: var(--white);
  transition: all 0.4s ease;
  cursor: pointer;
}

/* 결제 버튼 : 체크 스타일 */
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn
  input:checked
  + label {
  background: var(--primary);
  color: var(--white);
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn
  label
  .kakao_pay {
  width: 3.375rem;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .methodbox
  > .item
  .pay_selbox
  .selbtn
  label
  .naver_pay {
  width: 3.25rem;
}
.coinRecharge_wrap .coinbox .payment_box .salebox {
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 1px solid #e2e2e2;
}
.coinRecharge_wrap .coinbox .payment_box .salebox .tit {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
}
.coinRecharge_wrap .coinbox .payment_box .salebox .desc {
  font-size: 1rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.coinRecharge_wrap .coinbox .payment_box .salebox .desc .link {
  display: flex;
  align-items: center;
  width: 0.5rem;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .title {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
  padding: 0.625rem 0;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .totallist {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
  padding: 1.25rem 0;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .totallist > .item {
  font-size: 1.125rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .totallist > .item .txt {
  width: 40%;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .totallist > .item .desc {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .totalbox
  .totallist
  > .item
  .desc.point {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--primary);
  font-size: 0.875rem;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .totalbox
  .totallist
  > .item
  .desc.point
  .icon {
  background: url(../img/ico_coin2.png) no-repeat center/contain;
  width: 1rem;
  aspect-ratio: 1/1;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .totalbox
  .totallist
  > .item
  .desc.point
  .num {
  font-weight: 600;
  font-size: 1.125rem;
}
.coinRecharge_wrap .coinbox .payment_box .totalbox .totallist > .item.last {
  margin-top: 2.5rem;
}
.coinRecharge_wrap
  .coinbox
  .payment_box
  .totalbox
  .totallist
  > .item.last
  .desc {
  color: var(--primary);
  font-weight: 600;
}
.coinRecharge_wrap .coinbox .payment_box .pay_btn {
  width: 100%;
  height: 60px;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--white);
  background: var(--primary);
  border-radius: 0.5rem;
}
.coinRecharge_wrap .coinbox .payment_box .pay_btn .num {
  font-weight: 700;
}

/* calculate popup */
.calculate_modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: 0.75rem;
  padding: 1.25rem;
  min-width: 500px;
  max-width: 90%;
  max-height: 90%;
  z-index: 100;
  overflow: hidden;
  transition: all 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
.calculate_modal.show {
  opacity: 1;
  pointer-events: auto;
}
.calculate_modal .tit_box {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}
.calculate_modal .tit_box .icon {
  width: 1rem;
}
.calculate_modal .current_box {
  border-radius: 0.75rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.calculate_modal .current_box .title {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.calculate_modal .current_box .title .icon {
  width: 1.25rem;
}
.calculate_modal .current_box .coin {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-1);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.calculate_modal .current_box .coin .num {
  font-weight: 600;
  font-size: 1.25rem;
}
.calculate_modal .info_box1 {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1.875rem;
  padding: 0 0.875rem;
}
.calculate_modal .info_box1 > .item {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.calculate_modal .info_box1 > .item .tit {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-1);
}
.calculate_modal .info_box1 > .item .tit .sub {
  font-weight: 400;
}
.calculate_modal .info_box1 > .item .selectbox {
  position: relative;
  border: 2px solid var(--text-1);
  border-radius: 0.5rem;
  padding: 0 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calculate_modal .info_box1 > .item .selectbox::after {
  content: "";
  background: url(../img/select_arrow3.png) no-repeat center / contain;
  width: 0.8rem;
  aspect-ratio: 1 / 1;
  margin-left: -0.8rem;
}
.calculate_modal .info_box1 > .item .selectbox .select {
  width: calc(55px + 1.25rem);
  height: 40px;
  font-weight: 600;
  font-size: 1rem;
  padding-right: 1.25rem;
  color: var(--text-1);
  appearance: none;
  background: none;
  cursor: pointer;
  text-align: center;
  border: none;
}
.calculate_modal .info_box1 > .item .input {
  border: 2px solid var(--text-1);
  border-radius: 0.5rem;
  padding: 0 0.25rem;
  width: 100%;
  height: 40px;
  font-weight: 600;
  font-size: 0.813rem;
  color: var(--text-1);
  text-align: center;
}
.calculate_modal .info_box1 > .item .input::placeholder {
  color: var(--text-2);
}
.calculate_modal .info_box2 {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  padding: 0 0.875rem;
}
.calculate_modal .info_box2 > .item {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.calculate_modal .info_box2 > .item .tit {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-1);
}
.calculate_modal .info_box2 > .item .desc {
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--text-1);
}
.calculate_modal .info_box2 > .item .desc .num {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--primary);
}
.calculate_modal .confirm_btn {
  width: 100%;
  height: 48px;
  background: var(--primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
}

/* pay popup */
#payPopup .modal_box .coin {
  margin-top: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.563rem;
}
#payPopup .modal_box .coin .icon {
  background: url(../img/ico_coin2.png) no-repeat center/contain;
  width: 1.313rem;
  aspect-ratio: 1/1;
}
#payPopup .modal_box .coin .txt {
  font-weight: 600;
  font-size: 1.375rem;
  color: #404040;
}
#payPopup .modal_box .coin .txt .point {
  color: var(--primary);
}
#payPopup .modal_box .modal_btnbox {
  margin-top: 2.438rem;
}



/* 그누보드 */
.status_box.gall_board {
  margin-top: 200px;
}




/* 25.06.06 작업*/

/* 메인 팝업 */
.main_popup { position: fixed;  left: 0%; top: 0%;  width: 100%;  height: 100%; z-index: 100;  overflow: hidden; transition: all 0.4s ease;  opacity: 0; pointer-events: none;}
.main_popup.show { opacity: 1; pointer-events: auto;}
.main_popup .popup_inner {position: absolute;  left: 50%; top: 50%;  transform: translate(-50%, -50%); max-width: 640px; width: auto; max-height: 90%; transition: all 0.4s ease;  display: flex; flex-direction: column; gap: 0.125rem; background: none; border-radius: 0; align-items: unset;padding: 0; overflow: auto;}
.main_popup .popup_inner::-webkit-scrollbar {display: none;}
.main_popup .btnbox{display: flex; align-items: center; justify-content: space-between;}
.main_popup .btnbox .btn{font-weight: 500; font-size: 2.375rem;line-height: 86%;letter-spacing: -0.02em; color: var(--white); }
.main_popup .btnbox .btn.close_btn { background: url(../img/ico_close.png) no-repeat center / contain; aspect-ratio: 1 / 1; width: 3.75rem; transition: all 0.4s ease;}
.main_popup .btnbox .btn.close_btn:hover {transform: rotate(180deg);}
.main_popup .mainpop_slider { width: auto;  max-width: 640px; aspect-ratio: 1 / 1.25;  max-height: 82vh;}
.main_popup .mainpop_slider .imgbox {width: 100%; border-radius: 1.25rem; overflow: hidden;}
.main_popup .mainpop_slider .imgbox .link {width: 100%; display: flex;}
.main_popup .mainpop_slider .imgbox .link img{width: 100%; height: 100%; object-fit: cover;}
.main_popup .mainpop_slider .pagination {bottom: 1.25rem;}
.main_popup .mainpop_slider .pagination .swiper-pagination-bullet{background: #000;}
.main_popup .mainpop_slider .pagination .swiper-pagination-bullet-active{background: #000;}


/* 로그인 ver2 */
.login_wrap .login_box2 {  max-width: 460px;  box-shadow: 0 0.125rem 1.75rem 0 rgba(0, 0, 0, 0.2);  background: var(--white);  border-radius: 0.75rem;  margin: 5.875rem auto 9rem;  padding: 3.125rem 3.75rem 2.375rem;  display: flex;  flex-direction: column;   align-items: center;}
.login_wrap .login_box2 .logobox { display: flex;  align-items: center;  justify-content: center;  width: 6.25rem;  margin-bottom: 2.188rem;}
.login_wrap .login_box2 .title {  font-weight: 700;  font-size: 2.5rem;   line-height: 1.05;  letter-spacing: -0.02em;  text-align: center; color: var(--text-1);  margin-bottom: 1.125rem;}
.login_wrap .login_box2 .title .point { color: var(--primary);}
.login_wrap .login_box2 .imgbox { display: flex; max-width: 16.75rem;  margin-bottom: 1.339rem;}
.login_wrap .login_box2 .btnbox { width: 100%;  display: flex;  flex-direction: column;   align-items: center;  max-width: 21rem;  gap: 1.75rem;}
.login_wrap .login_box2 .btnbox .kakao_btn {  width: 100%;  height: 54px;  font-weight: 700;  font-size: 1.125rem;  color: rgba(0, 0, 0, 0.85);  display: flex;  align-items: center; justify-content: space-between; padding: 0 1.5rem;  border-radius: 0.375rem; background: #fee500;}
.login_wrap .login_box2 .btnbox .kakao_btn .icon { width: 1.438rem;}
.login_wrap .login_box2 .btnbox .kakao_btn .txt { flex: 1;}
.login_wrap .login_box2 .btnbox .id_login_btn {  font-weight: 500;  font-size: 0.875rem;   line-height: 130%;  letter-spacing: 0.04em;  text-decoration: underline;   text-decoration-skip-ink: none;  text-align: center;  color: #848484;}
.login_wrap .login_box2 .btnbox .apple_btn {  width: 100%;  height: 54px;  font-weight: 700;  font-size: 1.125rem;  color: rgba(255, 255, 255);  display: flex;  align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.5rem;  border-radius: 0.375rem; background: #000;}
.login_wrap .login_box2 .btnbox .apple_btn .icon { width: 1.438rem;}
.login_wrap .login_box2 .btnbox .apple_btn .txt { flex: 1;}




/* 칼럼  */
.list_wrap .list_contbox.mb { margin-bottom: 10.25em;}
.list_wrap .list_contbox > .listbox.column_ver {gap: 2.563rem 2.438rem; }
.list_wrap .list_contbox > .listbox.column_ver .item {width: calc((100% - 2.438rem*2)/3); box-shadow: 0 0 0.938rem 0 rgba(0, 0, 0, 0.1); background: var(--white); border-radius: 1.25rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .imgbox{width: 100%; aspect-ratio: 1/0.688235; display: flex; margin-bottom: 0; border-radius: 1.25rem 1.25rem 0 0;}
.list_wrap .list_contbox > .listbox.column_ver .item .imgbox > img{width: 100%; height: 100%; object-fit: cover;}
.list_wrap .list_contbox > .listbox.column_ver .item > .bottom{display: flex; flex-direction: column; gap: 3.5rem; padding: 1rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .txtbox{display: flex; flex-direction: column; gap: 1.25rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .txtbox .tit {  font-weight: 700; font-size: 1.875rem;  line-height: 1.4;  margin-bottom: 0;}
.list_wrap .list_contbox > .listbox.column_ver .item .txtbox .desc{font-size: 1.25rem;
color: var(--text-2);}
.list_wrap .list_contbox > .listbox.column_ver .item .infobox{display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .infobox .infoitem{display: flex; align-items: center;gap: 0.125rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .infobox .infoitem .icon{width: 2.188rem;}
.list_wrap .list_contbox > .listbox.column_ver .item .infobox .infoitem .txt{font-weight: 600;font-size: 1.188rem;text-align: center;color: var(--text-1);}



/* 모바일 타이머 배너 */
.timer_banner {display: none;}


/* 코인충전 */
.coinRecharge_wrap .coinbox .current_box { padding: 1.313rem 1.875rem;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label { padding: 1.375rem 1.875rem;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .left .icon {position: relative; background: none;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .left .icon::after {  content: "";  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  background: url(/page/img/ico_gift.png) no-repeat center / contain;  width: 2.188rem;  aspect-ratio: 1 / 0.802816;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .left .title .plus, .coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .left .title .percent{ display: none;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .left .title .first_txt{font-weight: 800; font-size: 0.875rem; color: var(--primary); transition: all 0.4s ease;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > input:checked + label .left .title .first_txt{color: var(--white);}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .right .price {position: relative;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .right .origin{ position: absolute;top: 0.6rem; right: 7.125rem; bottom: calc(100% - 1.75rem); font-weight: 500; font-size: 0.813rem; color: var(--text-2); transition: all 0.4s ease;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > label .right .origin::before {content: ""; position: absolute; left: 0; top: 40%; transform: translateY(-50%); width: 100%; height: 1px; background: var(--text-2); transition: all 0.4s ease;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > input:checked + label .right .origin{ color: var(--white);}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item.first > input:checked + label .right .origin::before{ background: var(--white);}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item > label .recommend_badge.typeFirst {box-shadow: 0 0.125rem 0.75rem 0 rgba(216, 35, 35, 0.49); background: linear-gradient(270deg, #ffb547 0%, #ff6268 100%);}

.coinRecharge_wrap .coinbox .recharge_box .contbox > .item:not(.first) > label .left .title .first_txt {display: none;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item:not(.first) > label .right .price .origin {display: none;}
.coinRecharge_wrap .coinbox .recharge_box .contbox > .item:not(.first) > label .recommend_badge.typeFirst  {display: none;}

.coinRecharge_wrap .coinbox .payment_box .totalbox .notebox {display: flex; flex-direction: column; gap: 0.125rem; padding: 1rem 1.613rem 1.125rem;background: #f1f1f1;margin-bottom: 0.625rem;}
.coinRecharge_wrap .coinbox .payment_box .totalbox .notebox .txt{position: relative; font-weight: 500;font-size: 0.875rem;color: var(--text-2); padding-left: 0.6em;}
.coinRecharge_wrap .coinbox .payment_box .totalbox .notebox .txt::before{content: ""; position: absolute; left: 0; top: 0.55em; width: 2px; aspect-ratio: 1/1; background: var(--text-2); border-radius: 100px;}



/* 메인 팝업 */
.main_popup { position: fixed;  left: 0%; top: 0%;  width: 100%;  height: 100%; z-index: 100;  overflow: hidden; transition: all 0.4s ease;  opacity: 0; pointer-events: none;}
.main_popup.show { opacity: 1; pointer-events: auto;}
.main_popup .popup_inner {position: absolute;  left: 50%; top: 50%;  transform: translate(-50%, -50%); max-width: 640px; width: auto; max-height: 90%; transition: all 0.4s ease;  display: flex; flex-direction: column; gap: 0.125rem; background: none; border-radius: 0; align-items: unset;padding: 0; overflow: auto;}
.main_popup .popup_inner::-webkit-scrollbar {display: none;}
.main_popup .btnbox{display: flex; align-items: center; justify-content: space-between;}
.main_popup .btnbox .btn{font-weight: 500; font-size: 2.375rem;line-height: 86%;letter-spacing: -0.02em; color: var(--white); }
.main_popup .btnbox .btn.close_btn { background: url(../img/ico_close.png) no-repeat center / contain; aspect-ratio: 1 / 1; width: 3.75rem; transition: all 0.4s ease;}
.main_popup .btnbox .btn.close_btn:hover {transform: rotate(180deg);}
.main_popup .mainpop_slider { width: auto;  max-width: 640px; aspect-ratio: 1 / 1.25;  max-height: 82vh;}
.main_popup .mainpop_slider .imgbox {width: 100%; border-radius: 1.25rem; overflow: hidden;}
.main_popup .mainpop_slider .imgbox .link {width: 100%; display: flex;}
.main_popup .mainpop_slider .imgbox .link img{width: 100%; height: 100%; object-fit: cover;}
.main_popup .mainpop_slider .pagination {bottom: 1.25rem;}
.main_popup .mainpop_slider .pagination .swiper-pagination-bullet{background: #000;}
.main_popup .mainpop_slider .pagination .swiper-pagination-bullet-active{background: #000;}


/* seo 영역 */
.seo_area {border-top: 1px solid var(--grey); font-weight: 500; line-height: 148%; color: var(--text-1); font-size: 0.813rem; padding: 2.125rem 2.813rem;}
.seo_area .title{font-size: 1.375rem; font-weight: 700;}
.seo_area .sub_title{font-size: 1.25rem; font-weight: 700;}
.seo_area .txt{}
.seo_area .list{display: flex;flex-direction: column;}
.seo_area .list .list_txt{position: relative; display: block;  padding-left: 1.2em;}
.seo_area .list .list_txt::before{content: ""; position: absolute; left: 0.4em; top: 0.55em; width: 2px; aspect-ratio: 1/1; background: var(--text-1); border-radius: 100px;}



/* 모달 스타일 */
.modal.ver2 { background: rgba(0, 0, 0, 0.5);}
.modal.ver2 .modal_box {  border-radius: 1rem; max-width: 32rem; overflow: auto;}
.modal.ver2 .modal_box::-webkit-scrollbar {display: none;}
.modal.ver2 .modal_box .modal_btnbox {margin: 0;}
.modal.ver2 .modal_box .modal_btnbox .btn { font-size: 1.8rem;  background: var(--button);  height: 5rem; font-weight: 600; }

.modal.ver3 { background: rgba(0, 0, 0, 0.5);}
.modal.ver3 .modal_box { border-radius: 1.2rem 1.2rem 0 0; width: 100%;  max-width: 100%;  padding: 0;  position: absolute;  left: 0;  top: auto; bottom: 0;  transform: translateY(2.5rem); box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.18);  margin: 0;}
.modal.ver3.show  .modal_box {transform: translateY(0);}
.modal.ver3 .modal_box .modal_btnbox {margin: 0; gap: 1.2rem;}
.modal.ver3 .modal_box .modal_btnbox .btn { border-radius: 0.6rem; font-size: 1.8rem;  background: var(--button);  height: 5rem; font-weight: 600; }
.modal.ver3 .modal_box .modal_btnbox .btn.typeB {color: var(--text-2); background: var(--grey);}
.modal.ver3 .modal_box .modal_body {width: 100%; display: flex; flex-direction: column;}


/* 등록완료 팝업 */
.joinComplete_modal.ver2 .modal_box{padding: 3rem 2rem; }
.joinComplete_modal .modal_txtbox { display: flex;  flex-direction: column;  align-items: center;  text-align: center;}
.joinComplete_modal .modal_txtbox .sub { font-weight: 600;  font-size: 1.6rem;   line-height: 1; color: var(--secondary); margin-bottom: 0.5rem;}
.joinComplete_modal .modal_txtbox .tit {  font-weight: 600;  font-size: 2.2rem;   line-height: 1.3; color: var(--text-1);  margin-bottom: 2rem;}
.joinComplete_modal .modal_txtbox .desc { font-weight: 400;  font-size: 1.4rem;  line-height: 1.5;  color: var(--text-2);}
.joinComplete_modal .modal_txtbox .img { width: 16.7rem; margin: 0.5rem 0 2rem;}


/* 앱 강제 업데이트 팝업 */
.app_version_popup_modal.ver2 .modal_box{padding: 3rem 2rem; }
.app_version_popup_modal .modal_txtbox { display: flex;  flex-direction: column;  align-items: center;  text-align: center;}
.app_version_popup_modal .modal_txtbox .sub { font-weight: 600;  font-size: 1.6rem;   line-height: 1; color: var(--secondary); margin-bottom: 0.5rem;}
.app_version_popup_modal .modal_txtbox .tit {  font-weight: 600;  font-size: 2.2rem;   line-height: 1.3; color: var(--text-1);  margin-bottom: 2rem;}
.app_version_popup_modal .modal_txtbox .desc { font-weight: 400;  font-size: 1.4rem;  line-height: 1.5;  color: var(--text-2);}
.app_version_popup_modal .modal_txtbox .img { width: 16.7rem; margin: 0.5rem 0 2rem;}


/* 전화 팝업 */
.call_modal .top_box { position: relative; height: 13.4rem; max-height: 58vh; transition: all 0.4s ease; overflow: hidden;}
.call_modal .top_box .info_btn{background: url(../img/ico_info2.png) no-repeat center/contain; width: 2.2rem; aspect-ratio: 1/1; position: absolute; right: 1.8rem; top: 1.2rem; z-index: 10;}
.call_modal .top_box .profile {  padding: 3.9rem 2rem 1.8rem;  display: flex;   align-items: center;  gap: 1.7rem;  border-bottom: 1px solid var(--grey);  position: absolute; left: 0; bottom: 0; width: 100%; transition: all 0.4s ease;}
.call_modal .top_box .profile .thumbox{width: 7.5rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 0.7rem;}
.call_modal .top_box .profile .thumbox .img{width: 100%; height: 100%; object-fit: cover;}
.call_modal .top_box .profile .txtbox {flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;}
.call_modal .top_box .profile .txtbox .badge.tarot { background: var(--tarot);  border-radius: 0.2rem;   padding: 0.1rem 0.35rem; font-weight: 500; font-size: 1.2rem; color: white;}
.call_modal .top_box .profile .txtbox .badge.saju { background: var(--saju);  border-radius: 0.2rem;   padding: 0.1rem 0.35rem; font-weight: 500; font-size: 1.2rem; color: white;}
.call_modal .top_box .profile .txtbox .badge.sin { background: var(--sin);  border-radius: 0.2rem;   padding: 0.1rem 0.35rem; font-weight: 500; font-size: 1.2rem; color: white;}
.call_modal .top_box .profile .txtbox .title {display: flex; align-items: center; gap: 0.75rem;}
.call_modal .top_box .profile .txtbox .title .name {font-weight: 600;font-size: 2.4rem;color: var(--text-1)}
.call_modal .top_box .profile .txtbox .title .bar {width: 1.25px; height: 1.4rem; background: #dcdcdc;}
.call_modal .top_box .profile .txtbox .title .num {font-weight: 500;font-size: 2rem;color: var(--secondary);}
.call_modal .top_box .call_info { position: relative; padding: 0 2.2rem;  display: flex;  flex-direction: column;  align-items: center; gap: 3.2rem; height: 0;  overflow: auto; background: var(--white); border-bottom: 1px solid var(--grey); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; transform: translateY(2.5rem); transition: all 0.4s ease;  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.18); background: #fff;  border-radius: 1.2rem 1.2rem 0 0; opacity: 0; pointer-events: none; z-index: 10;}
.call_modal .top_box .call_info::-webkit-scrollbar {display: none;}
.call_modal .top_box .call_info .imgbox { display: flex; width: 9.5rem; margin-top: 5rem;}
.call_modal .top_box .call_info .txtbox{display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 3rem;}
.call_modal .top_box .call_info .txtbox .tit{font-weight: 600;font-size: 1.8rem;line-height: 100%;color: var(--text-1);}
.call_modal .top_box .call_info .txtbox .desc{font-size: 1.4rem;line-height: 150%;color: var(--text-2);}

.call_modal .top_box .call_info .txtbox .desc ul{list-style: disc !important; padding-left: 1.5rem; margin: 0;}
.call_modal .top_box .call_info .txtbox .desc li{margin-bottom: 0.5rem;}
.call_modal .top_box .call_info .txtbox .desc li:last-child{margin-bottom: 0;}
.call_modal .top_box .call_info .txtbox ul.desc { list-style: disc !important; padding-left: 1.5rem; margin: 0; }
.call_modal .top_box .call_info .txtbox ul.desc > li { list-style: disc !important; display: list-item !important; margin-bottom: 0.5rem; color: var(--text-1); }
.call_modal .top_box .call_info .txtbox ul.desc > li:last-child { margin-bottom: 0; }
.call_modal .top_box .call_info .txtbox ul.desc { list-style-type: disc !important; /* ● */ padding-left: 1.5rem; margin: 0; }
.call_modal .top_box .call_info .txtbox ul.desc > li { list-style-type: disc !important; display: list-item !important; margin-bottom: 0.5rem; }
.call_modal .top_box .call_info .txtbox ul.desc > li > ul { list-style-type: circle !important; /* ○ */ padding-left: 1.5rem; margin: 0.5rem 0 0 0; }
.call_modal .top_box .call_info .txtbox ul.desc > li > ul > li { list-style-type: circle !important; display: list-item !important; margin-bottom: 0.3rem; }
.call_modal .top_box .call_info .txtbox ul.desc > li > ul > li:last-child { margin-bottom: 0; }

.call_modal .top_box .call_info .close_btn{background: url(../img/popup_close.png) no-repeat center/contain; width: 1.8rem; aspect-ratio: 1/1; position: absolute; right: 1.8rem; top: 1.2rem; z-index: 10;}
.call_modal .top_box.info_show {height: 47rem;}
.call_modal .top_box.info_show .info_btn {opacity: 0; pointer-events: none;}
.call_modal .top_box.info_show .call_info {transform: translateY(0%); opacity: 1; pointer-events: auto;}
.call_modal .pay_wrap { background: #f5f5f5; display: flex; flex-direction: column; padding: 0 2rem;}
.call_modal .pay_wrap .pay_method{border-bottom: 1px solid var(--grey);}
.call_modal .pay_wrap .pay_method .method_box{padding: 1.55rem 0; display: flex; align-items: center; justify-content: space-between; display: none;}
.call_modal .pay_wrap .pay_method .method_box .card{font-weight: 500;font-size: 1.6rem;line-height: 100%;color: var(--text-1); display: flex; align-items: center; gap: 0.75rem;}
.call_modal .pay_wrap .pay_method .method_box .card .num {font-weight: 400;}
.call_modal .pay_wrap .pay_method .method_box .card .icon{background: url(../img/ico_card.png) no-repeat center/contain; width: 2.5rem; aspect-ratio: 1/1;}
.call_modal .pay_wrap .pay_method .method_box .point{font-size: 1.6rem; line-height: 100%;color: var(--text-2); display: flex; align-items: center; gap: 0.7rem;}
.call_modal .pay_wrap .pay_method .method_box .point .arrow{background: url(../img/ico_call_arrow.png) no-repeat center/contain; width: 0.8rem; aspect-ratio: 1 / 1.625;}
.call_modal .pay_wrap .pay_method .method_txtbox { padding: 1.35rem 0; display: none;}
.call_modal .pay_wrap .pay_method .method_txtbox .cmt_txt { font-weight: 600;   font-size: 1.8rem; color: var(--text-1); display: flex; align-items: center; gap: 0.7rem; display: none;}
.call_modal .pay_wrap .pay_method .method_txtbox .cmt_txt .icon { width: 2rem;}
.call_modal .pay_wrap .pay_price { display: flex; align-items: baseline;   justify-content: space-between;  padding: 2.5rem 0 1.85rem;}
.call_modal .pay_wrap .pay_price .left {  font-weight: 500; font-size: 1.6rem;  color: var(--text-1);}
.call_modal .pay_wrap .pay_price .right { font-weight: 500;  font-size: 1.8rem;  line-height: 130%;  text-align: right;  color: var(--text-2);  display: flex;  align-items: baseline;  gap: 0.4em;}
.call_modal .pay_wrap .pay_price .right .txt .after {display: none;}
.call_modal .pay_wrap .pay_price .right .price { font-weight: 600;  font-size: 2.4rem;  color: var(--text-1);}
.call_modal .pay_wrap .pay_btn { width: 100%; padding: 0.6rem 0 2.5rem;}
.call_modal .pay_wrap .pay_btn .btn { width: 100%;  height: 5rem;  font-weight: 600;   font-size: 1.8rem;  line-height: 130%; color: var(--white);  background: var(--button);  border-radius: 0.6rem;}
.call_modal .pay_wrap .pay_btn .btn .txt {display: none;}

.call_modal.state1 .pay_wrap .pay_method .method_box {display: flex;}
.call_modal.state1 .pay_wrap .pay_btn .btn .txt1 {display: block;}
.call_modal.state1 .pay_wrap .pay_price .right .txt .after {display: inline-block;}

.call_modal.state2 .pay_wrap .pay_method .method_txtbox {display: block;}
.call_modal.state2 .pay_wrap .pay_method .method_txtbox .cmt_txt.cmt1{display: flex;}
.call_modal.state2 .pay_wrap .pay_price .left { opacity: 0;}
.call_modal.state2 .pay_wrap .pay_btn .btn .txt2 {display: block;}

.call_modal.state3 .pay_wrap .pay_method .method_txtbox {display: block;}
.call_modal.state3 .pay_wrap .pay_method .method_txtbox .cmt_txt.cmt2{display: flex;}
.call_modal.state3 .pay_wrap .pay_price .left { opacity: 0;}
.call_modal.state3 .pay_wrap .pay_btn .btn .txt3 {display: block;}

.call_modal.state4 .pay_wrap .pay_method .method_box {display: flex;}
.call_modal.state4 .pay_wrap .pay_btn .btn .txt4 {display: block;}
.call_modal.state4 .pay_wrap .pay_price .left { opacity: 0;}





/* 결제수단 */
.paymentMethod_modal {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 50; background: #fff; display: flex; flex-direction: column; overflow: auto;}
.paymentMethod_modal::-webkit-scrollbar {display: none;}
.paymentMethod_modal .headbox { padding: 4.2rem 0 0; display: flex; flex-direction: column; gap: 2.4rem;}
.paymentMethod_modal .headbox .top {padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between;}
.paymentMethod_modal .headbox .top .back_btn, .paymentMethod_modal .headbox .top .back_btn_no_back {background: url(../img/ico_back4.png) no-repeat center/contain; width: 2.2rem; aspect-ratio: 1/1; display: flex;}
.paymentMethod_modal .headbox .progress { position: relative;  background: var(--grey);   width: 100%; height: 0.4rem;}
.paymentMethod_modal .headbox .progress .bar { position: absolute; left: 0; top: 0;   height: 100%; width: 0;  background: var(--secondary); transition: all 0.4s ease;}
.paymentMethod_modal .bodybox {flex: 1; padding: 3rem 2.5rem 4rem; display: flex; flex-direction: column;  gap: 4rem;}
.paymentMethod_modal .bodybox .txtbox{display: flex; flex-direction: column; gap: 2.4rem;}
.paymentMethod_modal .bodybox .txtbox .titbox { font-weight: 700;  font-size: 2.6rem;  line-height: 1.3;  color: var(--text-1); display: flex; align-items: center; justify-content: space-between;}
.paymentMethod_modal .bodybox .txtbox .titbox .add_btn { height: 3.5rem;  font-weight: 700;  font-size: 1.2rem;  line-height: 100%;  color: var(--secondary);   background: var(--bg); padding: 0 1.58rem;  border-radius: 10rem; display: flex; align-items: center;  justify-content: center;}
.paymentMethod_modal .bodybox .txtbox .descbox {  display: flex;  flex-direction: column;   gap: 1.2rem;  min-height: 11.4rem;}
.paymentMethod_modal .bodybox .txtbox .descbox .desc { font-weight: 500;  font-size: 1.7rem;   line-height: 1.5;  color: var(--text-2);}
.paymentMethod_modal .btnbox{padding: 0 2rem 5rem; display: flex; flex-direction: column ;gap: 1.8rem;}
.paymentMethod_modal .btnbox .btn {  width: 100%;  height: 5.8rem;  border-radius: 1.2rem; background: var(--button);  font-weight: 500;  font-size: 1.8rem;  line-height: 1;  color: var(--white); transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}
.paymentMethod_modal .btnbox .btn:disabled {background: var(--grey);}
.paymentMethod_modal .btnbox .kakao_btn { width: 100%;  height: 5.8rem;  border-radius: 1.2rem;   background: #ffeb00; display: flex; align-items: center; justify-content: center;}
.paymentMethod_modal .btnbox .kakao_btn .icon{width: 6.2rem;}

.paymentMethod_modal .radiowrap {display: flex; flex-direction: column; gap: 1.8rem;} 
.paymentMethod_modal .radiowrap .radio_box{box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15); border-radius: 1.2rem; display: flex; align-items: center; gap: 1.2rem; padding: 1.9rem;} 
.paymentMethod_modal .radiowrap .radio_box .input_radio{position: relative; appearance: none; width: 1.8rem; height: 1.8rem; border: 2px solid var(--text-2); border-radius: 50%;} 
.paymentMethod_modal .radiowrap .radio_box .input_radio::before{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--secondary); width: 1rem; aspect-ratio: 1/1; opacity: 0;} 
.paymentMethod_modal .radiowrap .radio_box .input_radio:checked{border-color: var(--secondary);;} 
.paymentMethod_modal .radiowrap .radio_box .input_radio:checked:before{opacity: 1;} 
.paymentMethod_modal .radiowrap .radio_box .label_radio{font-weight: 600;font-size: 1.8rem; line-height: 100%;color: var(--text-2); display: flex; flex: 1;} 
.paymentMethod_modal .radiowrap .radio_box .label_radio .img{width: 6.2rem;} 
.paymentMethod_modal .radiowrap .radio_box .del_btn{background: url(../img/popup_close.png) no-repeat center/contain; width: 1.8rem; aspect-ratio: 1/1;} 

.paymentMethod_modal .form_box { flex-direction: row; flex-wrap: wrap; gap: 4.6rem 2rem;}
.paymentMethod_modal .form_box .form_item { width: 100%;  gap: 1.6rem;}
.paymentMethod_modal .form_box .form_item.w50 { width: calc((100% - 2rem) / 2);}
.paymentMethod_modal .form_box .input_box .label_text { padding: 0;  color: var(--text-2);}
.paymentMethod_modal .form_box .input_box .input_text {  border-bottom: 2px solid var(--grey);  padding: 0;  border-radius: 0;  background: #fff;  font-weight: 400;   font-size: 2rem;  transition: all 0.4s ease;}
.paymentMethod_modal .form_box .input_box .input_text::placeholder{color: var(--grey);} 
.paymentMethod_modal .form_box .input_box .input_text:focus{border-color: var(--secondary);;} 



/* 첫상담 팝업  */
.firstConsult_modal .modal_body, .afterFirstConsult_modal .modal_body{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.2rem 2rem 2.4rem;}
.firstConsult_modal .modal_body .img, .afterFirstConsult_modal .modal_body .img{width: 6.2rem;margin-bottom: 1.4rem;}
.firstConsult_modal .modal_body .tit, .afterFirstConsult_modal .modal_body .tit{font-weight: 700;font-size: 2rem;line-height: 100%;letter-spacing: -0.02em;text-align: center;color: var(--text-1); margin-bottom: 2.4rem;}
.firstConsult_modal .modal_body .tit .txt, .afterFirstConsult_modal .modal_body .tit .txt{display: none;}
.firstConsult_modal .modal_body .descbox, .afterFirstConsult_modal .modal_body .descbox{display: none; flex-direction: column; gap: 1rem;}
.firstConsult_modal .modal_body .descbox .desc, .afterFirstConsult_modal .modal_body .descbox .desc{font-weight: 500;font-size: 1.4rem; line-height: 150%;letter-spacing: -0.02em;text-align: center;color: var(--text-2);}
.firstConsult_modal .modal_btnbox, .afterFirstConsult_modal .modal_btnbox {padding: 0.6rem 2rem 2rem;}

.firstConsult_modal.state1 .modal_body .tit .txt1, .afterFirstConsult_modal.state1 .modal_body .tit .txt1{display: block;}
.firstConsult_modal.state1 .modal_body .descbox1, .afterFirstConsult_modal.state1 .modal_body .descbox1 {display: flex;}

.firstConsult_modal.state2 .modal_body .tit .txt2, .afterFirstConsult_modal.state2 .modal_body .tit .txt2{display: block;}
.firstConsult_modal.state2 .modal_body .descbox2, .afterFirstConsult_modal.state2 .modal_body .descbox2 {display: flex;}


/* 첫상담 팝업  */
.callGuide_modal.ver2 .modal_box { padding: 4.3rem 1.2rem 2rem;}
.callGuide_modal .modal_box .modal_close{background: url(../img/popup_close.png) no-repeat center/contain; width: 1.8rem; aspect-ratio: 1/1; position: absolute; right: 1.6rem; top: 1.2rem; z-index: 10;}
.callGuide_modal .modal_box .top_box { display: flex;  flex-direction: column;  align-items: center;  text-align: center;  margin-bottom: 2rem;}
.callGuide_modal .modal_box .top_box .icon{width: 3.4rem;margin-bottom: 1rem;}
.callGuide_modal .modal_box .top_box .tit { font-weight: 700;  font-size: 2.4rem;   color: var(--text-1);  margin-bottom: 0.6rem;}
.callGuide_modal .modal_box .top_box .desc { font-size: 1.5rem; color: var(--text-2);}
.callGuide_modal .modal_box .step_box {  width: 100%;  border-radius: 0.8rem;  background: #f5f5f5; display: flex;  flex-direction: column;  align-items: center;   gap: 0.9rem;  padding: 1.15rem 0.8rem;  margin-bottom: 1.8rem;}
.callGuide_modal .modal_box .step_box .step { width: 100%; padding: 1.7rem 0;   box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);  background: var(--white);  border-radius: 0.8rem;  font-weight: 600;  font-size: 1.6rem;  line-height: 100%; text-align: center;  color: var(--text-1);}
.callGuide_modal .modal_box .step_box .step .color { color: var(--secondary);}
.callGuide_modal .modal_box .step_box .arrow {background: url(../img/call_arrow_down.png) no-repeat center/contain; width: 1.4rem; aspect-ratio: 1/0.71428;}
.callGuide_modal .modal_box .last {font-size: 1.2rem;line-height: 100%;text-align: center;color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 0.4rem;} 
.callGuide_modal .modal_box .last .icon {background: url(../img/ico_info3.png) no-repeat center/contain; width: 1.2rem; aspect-ratio: 1/1;}





/* 25.06.19 작업*/
/* 회원가입 안내 */
.joinGuide_modal {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 50; background: #fff; display: flex; flex-direction: column; overflow: auto;}
.joinGuide_modal::-webkit-scrollbar {display: none;}
.joinGuide_modal .headbox { padding: 4.2rem 0 0; display: flex; flex-direction: column; gap: 2.4rem; flex-shrink: 0;}
.joinGuide_modal .headbox .top {padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between;}
.joinGuide_modal .headbox .top .back_btn {background: url(../img/ico_back4.png) no-repeat center/contain; width: 2.2rem; aspect-ratio: 1/1; display: flex;}
.joinGuide_modal .headbox .top .nextTime_btn {font-size: 1.6rem;line-height: 100%;text-align: right;color: var(--text-2);}
.paymentMethod_modal .headbox .top .nextTime_btn {font-size: 1.6rem;line-height: 100%;text-align: right;color: var(--text-2);}
.joinGuide_modal .headbox .progress { position: relative;  background: var(--grey);   width: 100%; height: 0.4rem;}
.joinGuide_modal .headbox .progress .bar { position: absolute; left: 0; top: 0;   height: 100%; width: 0;  background: var(--secondary); transition: all 0.4s ease;}
.joinGuide_modal .bodybox {flex: 1; padding: 3rem 2.5rem 4rem; display: flex; flex-direction: column;  gap: 4rem; overflow-y: auto !important; min-height: 0;}
.joinGuide_modal .bodybox .txtbox{display: flex; flex-direction: column; gap: 2.4rem; flex-shrink: 0;}
.joinGuide_modal .bodybox .txtbox::-webkit-scrollbar {
    width: 4px;
}
.joinGuide_modal .bodybox .txtbox::-webkit-scrollbar-track {
    background: transparent;
}
.joinGuide_modal .bodybox .txtbox::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}
.joinGuide_modal .bodybox .txtbox::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}
.joinGuide_modal .bodybox .txtbox .tit { font-weight: 700;  font-size: 2.6rem;  line-height: 1.3;  color: var(--text-1);}
.joinGuide_modal .bodybox .txtbox .descbox {  display: flex;  flex-direction: column;   gap: 1.2rem;  min-height: 11.4rem;}
.joinGuide_modal .bodybox .txtbox .descbox .desc { font-weight: 500;  font-size: 1.7rem;   line-height: 1.5;  color: var(--text-2);}
.joinGuide_modal .bodybox .imgbox { display: flex; align-items: center;   justify-content: center; flex: 1; min-height: 0;}
.joinGuide_modal .bodybox .imgbox .img1 { width: 27rem; max-width: 100%; height: auto;}
.joinGuide_modal .bodybox .imgbox .img2 { width: 21.5rem; max-width: 100%; height: auto;}
.joinGuide_modal .btnbox{padding: 0 2rem 5rem; display: flex; flex-direction: column ;gap: 1.8rem; flex-shrink: 0;}
.joinGuide_modal .btnbox .btn {  width: 100%;  height: 5.8rem;  border-radius: 1.2rem;   background: var(--button);  font-weight: 500;  font-size: 1.8rem;  line-height: 1;    color: var(--white); transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}
.joinGuide_modal .btnbox .btn:disabled {background: var(--grey);}
.joinGuide_modal .btnbox .kakao_btn { width: 100%;  height: 5.8rem;  border-radius: 1.2rem;   background: #ffeb00; display: flex; align-items: center; justify-content: center;}
.joinGuide_modal .btnbox .kakao_btn .icon{width: 6.2rem;}
.joinGuide_modal .checkwrap { display: flex;  flex-direction: column;  justify-content: flex-end;  gap: 1.4rem;  flex: 1; margin-top: auto;}
.joinGuide_modal .checkwrap .check_line{width: 100%; height: 1px; background: var(--grey); display: block}
.joinGuide_modal .checkwrap .check_box { border-radius: 0; gap: 1.3rem; padding: 0;  background: none; align-items: flex-start;}
.joinGuide_modal .checkwrap .check_box .input_check {  width: 2.2rem;  margin: 0;  border-color: #d0d0d0;  border-radius: 0.2rem; cursor: pointer; margin-top: 0.2rem;}
.joinGuide_modal .checkwrap .check_box .input_check::before { width: 1.25rem;}
.joinGuide_modal .checkwrap .check_box .input_check:checked {  background: var(--secondary); border-color: var(--secondary);}
.joinGuide_modal .checkwrap .check_box .label_check{ display: flex; align-items: center;font-weight: 500;font-size: 1.6rem; line-height:1.5;letter-spacing: -0.02em;color: var(--text-2); flex: 1; cursor: pointer; word-break: keep-all;} 
.joinGuide_modal .checkwrap .check_box .label_check .link {  font-weight: 600;   font-size: 1.3rem;  line-height: 1;  letter-spacing: -0.02em;  text-decoration: underline;  text-decoration-skip-ink: none;  text-align: center;  color: var(--secondary);  padding: 0 0.6rem;  text-underline-offset: 3px;}

.joinGuide_modal.step1 .headbox .progress .bar {width: 25%;}
.joinGuide_modal.step2 .headbox .progress .bar {width: 50%;}
.joinGuide_modal.step3 .headbox .progress .bar {width: 75%;}
.joinGuide_modal.step4 .headbox .progress .bar {width: 92.31%;}

/* 25.06.19 작업*/
/* 회원가입 안내 */
.onboard-page { 
    overflow: hidden !important; 
    height: 100vh !important; 
    position: fixed;
    width: 100%;
}
.onboard-page body { 
    overflow: hidden !important; 
    height: 100vh !important; 
    position: fixed;
    width: 100%;
}
.onboard-page .wrap {
    height: 100vh;
    overflow: hidden;
}

.joinGuide_modal {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 50; background: #fff; display: flex; flex-direction: column; overflow: auto;}

.joinGuide_modal .checkwrap { 
    display: flex;  
    flex-direction: column;  
    gap: 1.4rem;  
    flex: 1; 
    margin-top: auto;
}
.joinGuide_modal .checkwrap::-webkit-scrollbar {
    width: 4px;
}
.joinGuide_modal .checkwrap::-webkit-scrollbar-track {
    background: transparent;
}
.joinGuide_modal .checkwrap::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}
.joinGuide_modal .checkwrap::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}




/* 후기요청  */
.revieRequest_modal {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 50; background: #fff; display: flex; flex-direction: column; overflow: auto;}
.revieRequest_modal::-webkit-scrollbar {display: none;}
.revieRequest_modal .headbox { padding: 4.2rem 0 0; display: flex; flex-direction: column; gap: 2.4rem;}
.revieRequest_modal .headbox .top {padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between;}
.revieRequest_modal .headbox .top .back_btn {background: url(../img/ico_back4.png) no-repeat center/contain; width: 2.2rem; aspect-ratio: 1/1; display: flex;}
.revieRequest_modal .bodybox {flex: 1; padding: 2rem 1.9rem 4rem; display: flex; flex-direction: column;  gap: 4rem;}
.revieRequest_modal .bodybox > .titbox .tit { font-weight: 700;  font-size: 2.1rem;  text-align: center;  color: var(--text-1);}
.revieRequest_modal .bodybox > .titbox .tit .small { font-weight: 500; font-size: 1.8rem;}
.revieRequest_modal .bodybox > .titbox .tit .color{color: var(--secondary);}
.revieRequest_modal .bodybox .rv_list { display: flex; flex-direction: column; gap: 1.4rem;}
.revieRequest_modal .bodybox .rv_list .item { position: relative; display: flex;  align-items: center;  gap: 1.4rem;  padding: 1rem;  border-radius: 0.7rem;  background: var(--white);  border: 1px solid var(--grey); overflow: hidden;}
.revieRequest_modal .bodybox .rv_list .item .thumbox { width: 7.8rem; aspect-ratio: 1 / 1; display: flex; border-radius: 0.7rem;}
.revieRequest_modal .bodybox .rv_list .item .thumbox .img {width: 100%; height: 100%; object-fit: cover;border-radius: 0.7rem;}
.revieRequest_modal .bodybox .rv_list .item .txtbox { flex: 1; display: flex;  flex-direction: column;  gap: 1.2rem;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top { display: flex;  flex-direction: column;  gap: 0.4rem;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .titbox { font-weight: 500;   font-size: 1.7rem;  line-height: 130%; color: #000; display: flex;align-items: center; gap: 0.4rem;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .titbox .badge.tarot {  font-family: var(--second-family);  font-weight: 700;  font-size: 1.2rem;  line-height: 1.25;  letter-spacing: 0.04em;   text-align: center;  color: var(--white);  padding: 0.2rem 0.6rem 0.3rem 0.6rem;   background: var(--tarot);  border-radius: 0.5rem;  display: inline-flex;  align-items: center;  justify-content: center;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .titbox .badge.sin {  font-family: var(--second-family);  font-weight: 700;  font-size: 1.2rem;  line-height: 1.25;  letter-spacing: 0.04em;   text-align: center;  color: var(--white);  padding: 0.2rem 0.6rem 0.3rem 0.6rem;   background: var(--sin);  border-radius: 0.5rem;  display: inline-flex;  align-items: center;  justify-content: center;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .titbox .badge.saju {  font-family: var(--second-family);  font-weight: 700;  font-size: 1.2rem;  line-height: 1.25;  letter-spacing: 0.04em;   text-align: center;  color: var(--white);  padding: 0.2rem 0.6rem 0.3rem 0.6rem;   background: var(--saju);  border-radius: 0.5rem;  display: inline-flex;  align-items: center;  justify-content: center;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .descbox {  font-weight: 500;  font-size: 1.2rem;  line-height: 1.2; color: #c3c3c3; display: flex; align-items: center;  gap: 0.6rem;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .top .descbox .bar { width: 1px;   height: 1.4rem; background: #c3c3c3;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .bottom { display: flex;  align-items: center;  justify-content: space-between;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .bottom .time { font-weight: 600;  font-size: 1.7rem; line-height: 130%;  color: #000;}
.revieRequest_modal .bodybox .rv_list .item .txtbox .bottom .date { font-weight: 500;  font-size: 1.2rem;  color: #9e9e9e;}
.revieRequest_modal .bodybox .rv_list .item .complete_box { font-weight: 700;   font-size: 1.7rem;  line-height: 130%; text-align: center;  color: var(--white);   background: rgba(0, 0, 0, 0.6); position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  display: flex; align-items: center;  justify-content: center;  transition: all 0.4s ease; opacity: 0;  pointer-events: none;}
.revieRequest_modal .bodybox .rv_list .item.done .complete_box{opacity: 1; pointer-events: auto;}
.revieRequest_modal .btnbox{padding: 0 2rem 5rem; display: flex; flex-direction: column ;gap: 1.8rem;}
.revieRequest_modal .btnbox .btn {  width: 100%;  height: 5.8rem;  border-radius: 1.2rem; background: var(--button);  font-weight: 500;  font-size: 1.8rem;  line-height: 1;  color: var(--white); transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}


/* 후기 작성 */
.reviewWrite_modal { position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 9999; background: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.reviewWrite_modal::-webkit-scrollbar {display: none;}
.reviewWrite_modal .headbox { padding: 4.2rem 0 0; display: flex; flex-direction: column; gap: 2.4rem;}
.reviewWrite_modal .headbox .top {padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between;}
.reviewWrite_modal .headbox .top .back_btn {background: url(../img/ico_back4.png) no-repeat center/contain; width: 2.2rem; aspect-ratio: 1/1; display: flex;}
.reviewWrite_modal .bodybox {flex: 1; padding: 2rem 2.4rem 0; display: flex; flex-direction: column; }
.reviewWrite_modal .titlebox .tit { font-weight: 600;  font-size: 2.2rem;  text-align: center;  color: var(--text-1);}
.reviewWrite_modal .topbox {display: flex; flex-direction: column; align-items: center; gap: 0.7rem;  padding: 1.7rem 0 1.2rem;}
.reviewWrite_modal .topbox .thum { width: 12.1rem; border-radius: 0.7rem; overflow: hidden; display: flex}
.reviewWrite_modal .topbox .thum .img {width: 100%; height: 100%; object-fit: cover;}
.reviewWrite_modal .topbox .name { font-weight: 600; font-size: 2.4rem; line-height: 130%;  text-align: center;  color: var(--text-1);}
.reviewWrite_modal .topbox .info { font-weight: 500; font-size: 1.2rem; line-height: 1.2;  color: #c3c3c3; display: flex; align-items: center; gap: 0.6rem;}
.reviewWrite_modal .topbox .info .bar { width: 1px;  height: 1.4rem; background: #c3c3c3;}
.reviewWrite_modal .ratebox { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-top: 0.6rem;}
.reviewWrite_modal .ratebox .rating{ display: flex; align-items: center;  flex-direction: row-reverse;  gap: 0.9rem;}
.reviewWrite_modal .ratebox .rating .input_star{display: none;}
.reviewWrite_modal .ratebox .rating .label_star{background: url(../img/ico_star_off.png) no-repeat center/contain; width: 2.8rem; aspect-ratio: 1/1; cursor: pointer; display: block;}
.reviewWrite_modal .ratebox .rating .input_star:checked ~ .label_star {background-image: url(../img/ico_star_on.png);}
.reviewWrite_modal .ratebox .rate_txt { font-weight: 500;  font-size: 1.2rem;   line-height: 130%;  text-align: center;  color: var(--secondary);}
.reviewWrite_modal .stylebox { display: flex; flex-direction: column;  align-items: center; gap: 1rem; padding: 1.2rem 0 2rem;  border-bottom: 1px solid var(--grey);}
.reviewWrite_modal .stylebox .tit { font-weight: 700;  font-size: 1.7rem;  line-height: 130%; text-align: center; color: var(--text-1);}
.reviewWrite_modal .stylebox .badgebox { display: flex; flex-wrap: wrap;  align-items: center; justify-content: center;  gap: 0.7rem; max-width: 29rem;}
.reviewWrite_modal .stylebox .badgebox .emoji_badge .icon { background: no-repeat center / contain; width: 2rem;  aspect-ratio: 1 / 1;}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji1,
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji2,
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji3,
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji4,
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji5 { border: 1px solid var(--text-2); background: #fcfcfc; color: var(--text-2)}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.on { border: 1px solid var(--third); background: #fff4f3; color: var(--primary);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji1 .icon {background-image: url(../img/ico_call_emoji1_off.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji1.on .icon {background-image: url(../img/ico_call_emoji1_on.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji2 .icon {background-image: url(../img/ico_call_emoji2_off.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji2.on .icon {background-image: url(../img/ico_call_emoji2_on.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji3 .icon {background-image: url(../img/ico_call_emoji3_off.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji3.on .icon {background-image: url(../img/ico_call_emoji3_on.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji4 .icon {background-image: url(../img/ico_call_emoji4_off.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji4.on .icon {background-image: url(../img/ico_call_emoji4_on.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji5 .icon {background-image: url(../img/ico_call_emoji1_off.png);}
.reviewWrite_modal .stylebox .badgebox .emoji_badge.emoji5.on .icon {background-image: url(../img/ico_call_emoji1_on.png);}
.reviewWrite_modal .textbox { display: flex; flex-direction: column; gap: 1.4rem;  padding: 1.5rem 0 1rem;}
.reviewWrite_modal .textbox .check_box { gap: 0.7rem; border-radius: 0; background: none;  padding: 0;}
.reviewWrite_modal .textbox .check_box .input_check { margin: 0;  width: 1.9rem;  border-radius: 0.2rem;  border: 1px solid #d0d0d0;}
.reviewWrite_modal .textbox .check_box .input_check::before { background: url(../img/ico_check_on.png) no-repeat center / contain; width: 1.25rem;}
.reviewWrite_modal .textbox .check_box .input_check:checked {background: var(--secondary); border-color: var(--secondary);}
.reviewWrite_modal .textbox .check_box .label_check{font-weight: 700;font-size: 1.4rem;line-height: 100%;color: #d0d0d0;}
.reviewWrite_modal .textbox .input_box textarea.input_text {  border-radius: 1rem;   height: 12.6rem; padding: 0.9rem 1.2rem;}
.reviewWrite_modal .textbox .input_box textarea.input_text::placeholder {color: #c3c3c3;}
.reviewWrite_modal .btnbox{padding: 0 2rem 5rem; display: flex; flex-direction: column ;gap: 1.8rem;}
.reviewWrite_modal .btnbox .btn {  width: 100%;  height: 5.8rem;  border-radius: 0.7rem; background: var(--button);  font-weight: 500;  font-size: 1.8rem;  line-height: 1;  color: var(--white); transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}

.reviewWrite_modal.ver2 .modal_box { padding: 1.7rem 2rem 2rem;}
.reviewWrite_modal .modal_box .modal_close{background: url(../img/popup_close2.png) no-repeat center/contain; width: 1.8rem; aspect-ratio: 1/1; position: absolute; right: 1.1rem; top: 1.8rem; z-index: 10;}
.reviewWrite_modal .modal_box .contbox {width: 100%;}
.reviewWrite_modal .modal_box .titlebox .tit { font-size: 1.7rem;}
.reviewWrite_modal .modal_box .topbox { gap: 0.6rem; padding: 1.4rem 0 1.2rem;}
.reviewWrite_modal .modal_box .topbox .thum { border-radius: 0.6rem;  width: 10rem;}
.reviewWrite_modal .modal_box .topbox .name {  font-size: 2rem;}
.reviewWrite_modal .modal_box .topbox .info { font-size: 1rem; gap: 0.4rem;}
.reviewWrite_modal .modal_box .topbox .info .bar { height: 1.2rem;}
.reviewWrite_modal .modal_box .ratebox { gap: 0.6rem; margin-top: 0.4rem;}
.reviewWrite_modal .modal_box .ratebox .rating { gap: 0.8rem;}
.reviewWrite_modal .modal_box .ratebox .rating .label_star { width: 2.4rem;}
.reviewWrite_modal .modal_box .ratebox .rate_txt { font-size: 1rem;}
.reviewWrite_modal .stylebox { gap: 0.8rem; padding: 1rem 0 1.6rem;}
.reviewWrite_modal .stylebox .tit { font-size: 1.4rem;}
.reviewWrite_modal .stylebox .badgebox { gap: 0.6rem; max-width: 24rem;}
.reviewWrite_modal .stylebox .badgebox .emoji_badge {  font-size: 1rem; height: 2.4rem;  gap: 0.7rem; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-width: 1px;}
.reviewWrite_modal .stylebox .badgebox .emoji_badge .icon { width: 1.575rem;}
.reviewWrite_modal .textbox { gap: 1.15rem; padding: 1.2rem 0 0.8rem;}
.reviewWrite_modal .textbox .check_box { gap: 0.6rem;}
.reviewWrite_modal .textbox .check_box .input_check { width: 1.6rem;}
.reviewWrite_modal .textbox .check_box .input_check::before { width: 1rem;}
.reviewWrite_modal .textbox .check_box .label_check { font-size: 1.2rem;}
.reviewWrite_modal .textbox .input_box textarea.input_text { height: 10.4rem;  border-radius: 0.8rem; padding: 0.8rem 1rem;}
.reviewWrite_modal.ver2 .modal_box .modal_btnbox .btn {  border-radius: 0.6rem;  font-size: 1.6rem;}

/* Enable scrolling for joinGuide_modal on all devices (PC & mobile) */
.joinGuide_modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: auto !important; /* Allow scrolling on all devices */
}

.joinGuide_modal .bodybox {
    flex: 1;
    padding: 3rem 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    overflow-y: auto !important; /* Always allow vertical scroll for content */
    justify-content: space-between;
    min-height: 0;
}

/* Ensure images are responsive and do not overflow */
.joinGuide_modal .bodybox .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    max-width: 100%;
    overflow: visible;
}

.joinGuide_modal .bodybox .imgbox img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 온보딩 모달 스크롤 완전 보장 */
.onboard-page, .onboard-page body, .onboard-page .wrap {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
}

.joinGuide_modal {
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    z-index: 50;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: auto !important;
}

.joinGuide_modal .bodybox {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    height: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 3rem 2.5rem 4rem;
}




/* 카드등록 약관 동의 */
.cardRegister_modal .modal_box {overflow: unset;}
.cardRegister_modal .modal_box .modal_body { padding: 4rem 2rem 3rem;}
.cardRegister_modal .modal_box .modal_body .title { font-weight: 700;  font-size: 2rem;  line-height: 1.5;  color: var(--text-1); margin-bottom: 1.8rem;}
.cardRegister_modal .gift_box { display: flex; flex-direction: column;  align-items: center; position: absolute; bottom: calc(100% + 4rem);}
.cardRegister_modal .gift_box .icon { width: 16rem;}
.cardRegister_modal .gift_box .txt{font-size: 1.8rem;line-height: 100%;text-align: center;color: var(--white); padding: 0.65rem 1.2rem; background: rgba(0, 0, 0, 0.5); border-radius: 10rem;}
.cardRegister_modal .gift_box .txt .bold{font-weight: 700;}

.cardRegister_modal .gift_box .txt.guide {display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; font-size: 1.4rem; line-height: 1.4; text-align: left; color: #272C35; padding: 0.65rem 1.2rem; background: #EBF2FF; border-radius: 1rem; }
.cardRegister_modal .gift_box .txt.guide .guide {padding: 5px;}
.cardRegister_modal .gift_box .icon.lock { width: 3rem;}
.cardRegister_modal .gift_box .txt.guide .underline {text-decoration: underline;}

.cardRegister_modal .checkwrap{ display: flex; flex-direction: column; gap: 1.2rem;}
.cardRegister_modal .checkwrap .check_box { border-radius: 0; gap: 1rem;  padding: 0;  background: none;  align-items: flex-start;}
.cardRegister_modal .checkwrap .check_box .input_check { width: 2rem;  margin: 0;  border-color: #d0d0d0; border-radius: 0.2rem; cursor: pointer;}
.cardRegister_modal .checkwrap .check_box .input_check:checked { background: var(--secondary);  border-color: var(--secondary);}
.cardRegister_modal .checkwrap .check_box .input_check::before { width: 1rem;}
.cardRegister_modal .checkwrap .check_box .label_check {  display: flex; align-items: center; justify-content: space-between;  font-weight: 500;   font-size: 1.4rem; line-height: 1.5;  color: var(--text-2);  flex: 1; cursor: pointer; word-break: keep-all;}
.cardRegister_modal .checkwrap .check_box .label_check .txt {flex: 1;}
.cardRegister_modal .checkwrap .check_box .label_check .link { background: url(../img/ic_arrow_right.png) no-repeat center / contain; width: 0.8rem; aspect-ratio: 1 / 1.5;}
.cardRegister_modal .modal_box .modal_btnbox {padding: 0 2rem 2.5rem;}




/* 로그인 */
.login_wrap2.web_left .container {height: calc(var(--vh) * 100);}

.login_wrap2 .intro_section { position: relative;  width: 100%;  height: 100%;}
.login_wrap2 .login_section .loginbg_slider {  width: 100%; height: calc(var(--vh) * 100);}
.login_wrap2 .login_section .loginbg_slider .item{width: 100%;  height: 100%;}
.login_wrap2 .login_section .loginbg_slider .item::after { content: "";  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 38.6rem;  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);}
.login_wrap2 .login_section .loginbg_slider .item .img{width: 100%;  height: 100%; object-fit: cover;}
.login_wrap2 .login_section .contbox { position: absolute;  left: 50%;  bottom: 0;  transform: translateX(-50%);  width: 100%;  display: flex;  flex-direction: column; align-items: center; justify-content: flex-end;  gap: 2rem;  padding-bottom: 5.4rem;   z-index: 10;}
.login_wrap2 .login_section .contbox .history_login { display: flex;  align-items: center;  justify-content: center;  gap: 0.4rem;  padding: 0.6rem 1rem;  background: var(--white);  border-radius: 10rem;}
.login_wrap2 .login_section .contbox .history_login .icon {  width: 1.65rem;  aspect-ratio: 1 / 1;  border-radius: 50%;}
.login_wrap2 .login_section .contbox .history_login .txt { font-weight: 700;  font-size: 1.1rem; line-height: 130%;  color: var(--text-1);}
.login_wrap2 .login_section .contbox .login_btns { width: 100%;  display: flex;  flex-direction: column;  gap: 1.4rem;}
.login_wrap2 .login_section .contbox .login_btns .login_btn {  width: 100%;  height: 5.4rem;  display: flex;  align-items: center;  justify-content: center;  gap: 1rem;   font-weight: 600;  font-size: 1.8rem;   line-height: 130%;  border-radius: 10rem;  padding: 0 3rem;}
.login_wrap2 .login_section .contbox .login_btns .login_btn .icon{width: 2.5rem;}
.login_wrap2 .login_section .contbox .login_btns .login_btn .txt { flex: 1;}
.login_wrap2 .login_section .contbox .login_btns .login_btn.type_kakao {  background: #fee500;  color: #191919;}
.login_wrap2 .login_section .contbox .login_btns .login_btn.type_apple {  background: var(--text-1);  color: var(--white);}
.login_wrap2 .login_section .contbox .login_btns .login_btn.type_id {  font-weight: 500;   font-size: 1.4rem;  color: var(--text-2);  height: auto;  padding: 0.6rem 3rem;}




#dataLoadingModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;  /* 이 부분이 중요! */
}
#dataLoadingModal .loading-inner {
  width: 100px;
  height: 100px;
}