/* default.css */

/* 사용자 공통 css */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 팝업레이어 */
/*#hd_pop {z-index:1000;position:relative;margin:0 auto;width:1200px;height:0}*/
#hd_pop {z-index:1000;margin:0 auto;width:1200px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden; z-index: 1000;}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff; z-index: 1000;}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}


/* 사용자 공통 css */

/* 숨김처리하는 클래스 */
.disN {
  display: none !important;
}


/* 알람블릿 */
.head_sec .lnbG .etc .notify {
  position: relative;
}

.head_sec .lnbG .etc .notify .alarm {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 12px;
    height: 12px;
    background: var(--main-color);
    border-radius: 12px;
    color: #fff;
    text-indent: 0;
    font-size: 11px;
    text-align: center;
    line-height: 14px;
    padding: 0 4px;
}


.action-btn {
    display: inline-block;
    width: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.md_btn button.on,
.md_btn button.gray {
    flex: 1;
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    border: 1px solid var(--main-color);
    color: var(--main-color);
  }
  .md_btn button.on{
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    cursor: pointer;
  }
  .md_btn button.gray {
    background: #e4e4e4;
    color: #999;
    border-color: #e4e4e4;
  }


  /* input */
input[type="email"] {
  width: 100%;
}
input[type="email"]:readonly {
  background-color: #dedede !important;
}
input[type="email"] {
  line-height: 40px;
  border: 1px solid #eee;
  background: #fff;
  padding: 0 15px;
}

.in-password input {
    width: 100%;
    padding: 12px;
    padding-right: 40px; /* 아이콘 공간 확보 */
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.in-password button {
    position: absolute;
    right: 190px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    padding: 5px;
    transition: color 0.2s;
}

.readonly {
    background-color: #dedede !important;
  }

/* modal_confirm_notice 스타일 추가 */
.modal.modal_confirm_notice {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 반투명 배경 */
    z-index: 1000; /* 다른 요소 위에 표시되는 우선 순위 */
}

.modal.modal_confirm_notice .modal_content {
    width: 320px; /* 모달의 기본 너비 */
    background-color: #fff; /* 모달 내용 배경 색 */
    border-radius: 12px; /* 모서리를 둥글게 처리 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
    text-align: center; /* 텍스트 중앙 정렬 */
    padding: 20px; /* 내부 여백 */
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* 화면 중앙 정렬 */
}

.modal.modal_confirm_notice .modal_content p {
    font-size: 16px; /* 메시지 텍스트 크기 */
    color: #333; /* 메시지 텍스트 색상 */
    margin-bottom: 20px; /* 버튼과 간격 */
}

.modal.modal_confirm_notice .modal_buttons {
    display: flex;
    justify-content: space-between; /* 버튼 간격 조정 */
    gap: 10px; /* 버튼간 여백 */
}

.modal.modal_confirm_notice .modal_buttons .button {
    width: 48%; /* 버튼 너비 설정 */
    padding: 12px 0;
    font-size: 14px;
    border: none;
    border-radius: 8px; /* 버튼 모서리 둥글게 */
    cursor: pointer;
    font-weight: bold;
}

.modal.modal_confirm_notice .modal_buttons .button_confirm_yes {
    background-color: #ff9831; /* 확인 버튼 배경 색 */
    color: #fff; /* 버튼 텍스트 색 */
    transition: background-color 0.2s, transform 0.2s; /* 호버 효과 */
}

.modal.modal_confirm_notice .modal_buttons .button_confirm_yes:hover {
    background-color: #e67c00; /* 호버 시 색상 변경 */
    transform: scale(1.05); /* 크기 약간 확대 */
}

.modal.modal_confirm_notice .modal_buttons .button_confirm_no {
    background-color: #dedede; /* 취소 버튼 배경 색 */
    color: #333; /* 텍스트 색상 */
    transition: background-color 0.2s, transform 0.2s; /* 호버 효과 */
}

.modal.modal_confirm_notice .modal_buttons .button_confirm_no:hover {
    background-color: #b0b0b0; /* 호버 시 색상 변경 */
    transform: scale(1.05); /* 크기 약간 확대 */
}
/* show 클래스가 modal에서 display를 덮어씀 */
.modal.show {
    display: block !important; /* !important로 우선 순위 강제 */
}

.empty_coupon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 24px;
    background-color: #fff;
}

#loading {
    text-align: center;
    margin: 30px 0;
    display: none;
}


/* 공지등 에디터에서 작성된 내용을 보여줄때 사용하는 클래스 */
/* width 초기화 */
.fr_accor_desc * {
    width: auto !important;
    /* 자녀 태그의 width 무시 */
    max-width: 100% !important;
    /* 부모 크기에 맞게 제한 */
    box-sizing: border-box;
    /* 패딩 포함 크기 계산 */
}

/* 주문/결제 혜택노출 영역 리사이즈 */

.space_re {
  max-width: 440px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 500px) {
  .space_re {
    max-width: 170px;
  }
}
@media (max-width: 400px) {
  .space_re {
    max-width: 100px;
  }
}

.md_btn button {flex: 1; height: 50px; line-height: 50px; font-size: 17px; border-radius: 10px; text-align: center; font-weight: 600; border: 1px solid var(--main-color); color: var(--main-color);  }
.md_btn button.gray {background: #e4e4e4;color: #999;border-color: #e4e4e4;}
.md_btn button.bg, .md_btn button.on {background: var(--main-color);border-color: var(--main-color);color: #fff;cursor:pointer;}
.md_btn button.sizel {height: 60px;line-height: 60px;font-size: 18px;}


/* 페이징 */
.pg_wrap {margin:10px 0 30px;text-align:center; }
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg {text-align:center}
.pg_page, .pg_current,.qa_page {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page,.qa_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover,.qa_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#ff9831;border:1px solid #ff9831;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* 리뷰더보기 버튼 추가 */
.review_fold_btn {
    background-color: #fff;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.review_fold_btn > img {
width: 16px;
}
.review_fold_btn.on img {
transform: rotate(180deg);
}

/* 주문관련 css custom */
.cha_btn:disabled,
button:disabled {
    background-color: #f0f0f0 !important;
    color: #999 !important;
}