@charset "utf-8";

/* BEAUTYS.COM 기본 레이아웃 스타일 (Tailwind preflight 비활성 보완) */
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: #191919;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* preflight 비활성 보완: w-full + padding 시 박스 넘침 방지 (border-box) */
.beautys-layout *,
.beautys-layout *::before,
.beautys-layout *::after {
  box-sizing: border-box;
}


/* 푸터를 항상 화면 하단에 고정(콘텐츠가 짧아도 떠오르지 않게) — sticky footer */
.beautys-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 풀블리드(화면 가로 전체) 요소가 가로 스크롤을 만들지 않도록 콘텐츠 영역 클리핑.
   overflow-x: clip 은 스크롤 컨테이너를 만들지 않아 sticky 헤더(영역 밖)에 영향 없음
   flex: 1 0 auto 로 콘텐츠가 남은 높이를 채워 푸터를 하단으로 밀어냄 */
.content {
  flex: 1 0 auto;
  overflow-x: clip;
}

/* ===== 회원 페이지(로그인/회원가입/계정찾기 등) 톤앤매너 =====
   Rhymix 회원 모듈 기본 스킨(bootstrap풍)에 BEAUTYS 디자인 토큰을 입힘.
   기존 폼 HTML은 그대로, CSS로만 적당히 정돈. */
.beautys-layout .member-page {
  max-width: 460px;
  margin: 56px auto 140px;
  padding: 36px 28px 40px;
  border: 1px solid #EEEEEE;
  border-radius: 14px;
}
@media (max-width: 833px) {
  .beautys-layout .member-page { margin: 32px auto 96px; }
}
.beautys-layout .member-page h1 {
  margin: 0 0 24px;
  padding: 0 !important;
  border: 0 !important;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: #191919;
  text-align: center;
}
.beautys-layout .member-page h1 i,
.beautys-layout .member-page .icon-user { display: none; }

/* 입력 필드 공통 — 작성 페이지 인풋과 동일하게.
   member.css(.xm input[type=text])가 같은 특이성으로 뒤에 로드되므로
   .beautys-layout 를 앞에 붙여 특이성을 높여 확실히 이기게 함 */
.beautys-layout .member-page input[type="text"],
.beautys-layout .member-page input[type="password"],
.beautys-layout .member-page input[type="email"],
.beautys-layout .member-page input[type="tel"],
.beautys-layout .member-page input[type="number"],
.beautys-layout .member-page input[type="date"],
.beautys-layout .member-page input[type="url"],
.beautys-layout .member-page input[type="search"],
.beautys-layout .member-page select,
.beautys-layout .member-page textarea {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #191919;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
}
.beautys-layout .member-page textarea { height: auto; min-height: 90px; padding: 14px 18px; }
.beautys-layout .member-page input:focus,
.beautys-layout .member-page select:focus,
.beautys-layout .member-page textarea:focus { border-color: #FF2D78; outline: none; }
.beautys-layout .member-page input::placeholder { color: #9CA3AF; }

/* 로그인: 필드 세로 스택 */
.beautys-layout .member-page .login-body fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
}

/* 회원가입: 라벨/그룹 */
.beautys-layout .member-page .control-group { margin-bottom: 18px; }
.beautys-layout .member-page .control-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #191919;
}
.beautys-layout .member-page .control-label em { color: #FF2D78 !important; font-style: normal; }
.beautys-layout .member-page .description,
.beautys-layout .member-page .login-body p { margin-top: 8px; font-size: 13px; color: #9CA3AF; line-height: 1.5; }

/* 라디오/체크박스 라벨 (inline) */
.beautys-layout .member-page .controls label,
.beautys-layout .member-page label[for="keepid_opt"],
.beautys-layout .member-page label[for*="mailing"],
.beautys-layout .member-page label[for*="allow"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: #525C66;
}
.beautys-layout .member-page input[type="checkbox"],
.beautys-layout .member-page input[type="radio"] { width: auto; height: auto; accent-color: #FF2D78; }

/* 버튼 공통 (기본=아웃라인) — .btn 클래스에만 적용.
   ※ 과거 input[type=submit]/[button]을 무차별 타겟 → bg:#fff(0,3,1)가 .auth-submit/.btn-inverse(0,3,0)를 이겨
      핑크 버튼이 흰색으로 깨지던 문제 제거 */
.beautys-layout .member-page .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 52px !important;
  padding: 0 20px !important;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
/* 주 버튼: 로그인/등록 (핑크)
   ※ .btn 규칙의 input[type=submit](0,3,1)을 이기도록 input[type=submit].btn-inverse(0,4,1)까지 명시 */
.beautys-layout .member-page .submit,
.beautys-layout .member-page .btn-inverse,
.beautys-layout .member-page input[type="submit"].btn-inverse,
.beautys-layout .member-page input[type="button"].btn-inverse,
.beautys-layout .member-page .login-body input[type="submit"] {
  width: 100%;
  height: 52px !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 10px;
  background: #FF2D78;
  color: #fff;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 52px !important;
}
.beautys-layout .member-page .dateRemover { height: 44px; margin-left: 6px; }

/* 회원가입 하단 버튼 영역 (등록/취소) */
.beautys-layout .member-page .btnArea {
  border: 0 !important;
  padding-top: 20px !important;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}
.beautys-layout .member-page .btnArea .btn { flex: 1; float: none; }

/* 로그인 푸터 (ID/PW 찾기 · 회원가입) */
.beautys-layout .member-page .login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #F0F0F0;
}
.beautys-layout .member-page .login-footer a { font-size: 14px; color: #6B7280; }
.beautys-layout .member-page .login-footer a:last-child { color: #FF2D78; font-weight: 700; }

/* 회원 스킨 기본 래퍼(.xm) 여백 제거 */
.beautys-layout .member-page .xm { margin: 0; padding: 0; }
.beautys-layout .member-page .xm > .nav-tabs { display: none; }

/* ===== 내 정보 보기(dispMemberInfo, dl-horizontal) ===== */
.beautys-layout .member-page .dl-horizontal {
  display: block;
  margin: 0 0 26px;
  padding: 0;
}
.beautys-layout .member-page .dl-horizontal dt {
  float: none;
  width: auto;
  margin: 0;
  padding: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  text-align: left;
  overflow: visible;
  white-space: normal;
}
.beautys-layout .member-page .dl-horizontal dt em { color: #FF2D78; font-style: normal; }
.beautys-layout .member-page .dl-horizontal dd {
  margin: 4px 0 0;
  padding: 0 0 16px;
  border-bottom: 1px solid #F0F0F0;
  font-size: 15px;
  line-height: 1.5;
  color: #191919;
  word-break: break-all;
}
.beautys-layout .member-page .dl-horizontal dt:first-child { padding-top: 0; }

/* 내 정보 보기 하단 액션(수정/비번/이메일/탈퇴) — 2열 그리드 */
.beautys-layout .member-page .btnArea.btn-group {
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 1px solid #F0F0F0 !important;
  margin-top: 4px;
}
.beautys-layout .member-page .btnArea.btn-group .btn {
  flex: 1 1 calc(50% - 5px);
  min-width: 130px;
}

/* ===== 검증/안내 메시지 박스 ===== */
.beautys-layout .member-page .message {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.beautys-layout .member-page .message p { margin: 0; }
.beautys-layout .member-page .message.error,
.beautys-layout .member-page .message.warning { background: #FFF0F4; color: #FF2D78; }
.beautys-layout .member-page .message.info,
.beautys-layout .member-page .message.notice { background: #F4F6FF; color: #525C66; }

/* 비밀번호 재확인 등 input-append(인라인 래퍼) 세로 스택 */
.beautys-layout .member-page .input-append {
  display: block;
  width: 100%;
}
.beautys-layout .member-page .input-append > input[type="password"],
.beautys-layout .member-page .input-append > input[type="text"] { margin-bottom: 12px; }
.beautys-layout .member-page form > input[type="email"][readonly] { margin-bottom: 12px; }

/* 편집 불가(아이디·이메일) — 회색 처리로 시인성 개선 */
.beautys-layout .member-page input[readonly],
.beautys-layout .member-page input.auth-readonly {
  background-color: #F4F4F5 !important;
  color: #9CA3AF !important;
  cursor: not-allowed;
}
.beautys-layout .member-page .auth-field-note {
  margin-top: 6px;
  font-size: 13px;
  color: #9CA3AF;
}
.beautys-layout .member-page .auth-inline-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #FF2D78;
  text-decoration: none;
}

/* 부제(설명) 가운데 정렬 */
.beautys-layout .member-page .auth-desc { text-align: center; }

/* 로고 화면 중앙 정렬 */
.beautys-layout .member-page .auth-logo { display: block; text-align: center; margin: 0 0 18px; }
.beautys-layout .member-page .auth-logo img { display: inline-block; height: 22px; width: auto; }

/* ===== 라벨 위 입력 필드(.su-field) — 회원 폼 공통 ===== */
.beautys-layout .member-page .su-field { margin-bottom: 16px; }
.beautys-layout .member-page .su-field > label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #191919;
}
.beautys-layout .member-page .su-field > label em { color: #FF2D78; font-style: normal; margin-right: 2px; }
.beautys-layout .member-page .su-help { margin: 6px 0 0; font-size: 13px; color: #9CA3AF; }
.beautys-layout .member-page .su-err {
  margin: 4px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  background: #FFF0F4;
  color: #FF2D78;
  font-size: 13px;
  line-height: 1.5;
}

/* ===== 회원가입 3-Step 위저드 ===== */
.beautys-layout .member-page .su-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 26px; }
.beautys-layout .member-page .su-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5E7EB; transition: all .2s; }
.beautys-layout .member-page .su-dot.is-on { width: 22px; border-radius: 4px; background: #FF2D78; }
.beautys-layout .member-page .su-step { display: none; }
.beautys-layout .member-page .su-step.is-on { display: block; }

/* 약관 동의 */
.beautys-layout .member-page .su-agree { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; cursor: pointer; }
.beautys-layout .member-page .su-agree--all {
  padding: 15px 16px;
  margin-bottom: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #191919;
}
.beautys-layout .member-page .su-agree-list { display: flex; flex-direction: column; gap: 15px; padding: 2px 4px; }
.beautys-layout .member-page .su-agree input[type="checkbox"] { width: 20px; height: 20px; accent-color: #FF2D78; flex: 0 0 auto; }
.beautys-layout .member-page .su-agree span { flex: 1; }
.beautys-layout .member-page .su-agree span em { color: #FF2D78; font-style: normal; font-weight: 700; margin-right: 3px; }
.beautys-layout .member-page .su-view { flex: 0 0 auto; font-size: 13px; color: #9CA3AF; text-decoration: underline; }
.beautys-layout .member-page #su-next { margin-top: 26px; }

/* 단계 이동 버튼(이전/회원가입) */
.beautys-layout .member-page .su-btns { display: flex; gap: 10px; margin-top: 24px; }
.beautys-layout .member-page .su-prev {
  flex: 0 0 92px;
  height: 52px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
}
.beautys-layout .member-page .su-btns .auth-submit { flex: 1; width: auto; margin-top: 0; }
.beautys-layout .member-page .auth-submit:disabled { opacity: .4; cursor: not-allowed; }

/* 완료(STEP 03) */
.beautys-layout .member-page .su-done-ico {
  width: 64px; height: 64px; margin: 6px auto 22px;
  border-radius: 50%; background: #FF2D78;
  display: flex; align-items: center; justify-content: center;
}
.beautys-layout .member-page .su-step[data-step="3"] { text-align: center; }
.beautys-layout .member-page .su-home { display: block; margin-top: 14px; font-size: 14px; color: #6B7280; }

/* 약관 보기 팝업 */
.beautys-layout .member-page .su-pop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.beautys-layout .member-page .su-pop[hidden] { display: none; }
.beautys-layout .member-page .su-pop__dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.beautys-layout .member-page .su-pop__box {
  position: relative; width: 90%; max-width: 420px; max-height: 80vh; overflow-y: auto;
  background: #fff; border-radius: 14px; padding: 26px 24px;
}
.beautys-layout .member-page .su-pop__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #191919; }
.beautys-layout .member-page .su-pop__body { font-size: 14px; line-height: 1.7; color: #525C66; }
.beautys-layout .member-page .su-pop__body p { margin: 0 0 10px; }
.beautys-layout .member-page .su-pop__box .auth-submit { margin-top: 20px; }

/* ===== 회원 정보 보기 박스 ===== */
.beautys-layout .member-page .mi-info {
  background: #FAFAFA;
  border: 1px solid #F0F0F0;
  border-radius: 12px;
  padding: 18px 20px;
}
.beautys-layout .member-page .mi-info dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.beautys-layout .member-page .mi-leave { color: #9CA3AF !important; }

/* ===== 로그인 폼(커스텀 .auth-*) ===== */
.beautys-layout .member-page .auth-box { text-align: center; }
.beautys-layout .member-page .auth-logo { display: inline-block; margin-bottom: 22px; }
.beautys-layout .member-page .auth-logo img { height: 26px; width: auto; }
.beautys-layout .member-page .auth-title { margin: 0; padding: 0; border: 0; font-size: 24px; font-weight: 700; color: #191919; }
.beautys-layout .member-page .auth-desc { margin: 8px 0 28px; font-size: 14px; color: #9CA3AF; }
.beautys-layout .member-page .auth-msg {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFF0F3;
  font-size: 13px;
  line-height: 1.5;
  color: #E11D48;
  text-align: left;
}
.beautys-layout .member-page .auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.beautys-layout .member-page .auth-keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  font-size: 14px;
  color: #525C66;
  cursor: pointer;
}
.beautys-layout .member-page .auth-keep input { width: 18px; height: 18px; accent-color: #FF2D78; }
.beautys-layout .member-page .auth-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #FF2D78;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 52px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.beautys-layout .member-page .auth-submit:hover { background: #E91E63; }
.beautys-layout .member-page .auth-outline {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 10px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
}
.beautys-layout .member-page .auth-outline:hover { border-color: #FF2D78; color: #FF2D78; }
.beautys-layout .member-page .auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #F0F0F0;
}
.beautys-layout .member-page .auth-footer a { font-size: 14px; color: #6B7280; }
.beautys-layout .member-page .auth-sep { width: 1px; height: 12px; background: #E0E0E0; }
.beautys-layout .member-page .auth-footer .auth-signup { color: #FF2D78; font-weight: 700; }

/* 가로 스크롤 캐로셀: 스크롤바 숨김 */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 상단 고정 헤더 보정용 */
.fixed_header #header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 상세 우측 정보(dl/dd) — preflight 비활성으로 남는 dd 기본 좌측 마진(40px) 제거해 라벨과 좌측 정렬 */
.beautys-layout dd { margin-left: 0; margin-inline-start: 0; }

/* 약관/개인정보처리방침 문서 */
.beautys-layout .terms-doc h2 { margin: 34px 0 12px; font-size: 18px; font-weight: 700; color: #191919; }
.beautys-layout .terms-doc h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; color: #191919; }
.beautys-layout .terms-doc p { margin: 4px 0; }
.beautys-layout .terms-doc ol { margin: 6px 0; padding-left: 22px; list-style: decimal; }
.beautys-layout .terms-doc ul { margin: 6px 0; padding-left: 22px; list-style: disc; }
.beautys-layout .terms-doc li { margin: 3px 0; }
.beautys-layout .terms-doc > p:first-child { margin-bottom: 14px; color: #6B7280; }

/* 신고 사유 라디오 — 선택 시 내부 원형 점 표시
   (내부 점이 input의 손자라 Tailwind peer-checked가 적용되지 않는 문제 보정. 게시글+댓글 신고 공통) */
.beautys-layout input[name="report-reason"]:checked + span > span,
.beautys-layout input[name="creport-reason"]:checked + span > span {
  background-color: #FF2D78 !important;
}