@charset "utf-8";

/* =========================================================
   회원가입 (/join/) — 본문 tools/pages/member/join.html, 양식 재구성 assets/js/sub/member/signup.js
   코스모스팜 스킨 CSS(.cosmosfarm-members-form …)가 이 파일보다 뒤에 로드되고 일부는
   !important 라서, 양식 안 규칙은 .signup 접두사로 선택자를 더 세게 하고 필요한 곳만 !important.
   ========================================================= */
.signup {padding: 15rem 0 20rem; color: var(--color-text);}
.signup__inner {width: 100%; max-width: 40rem; margin: 0 auto;}

/* 단계 전환: 기본은 가입 방법 선택, .is-form 이면 양식 */
.signup:not(.is-form) .signup-main,
.signup.is-form .signup-intro {display: none;}

/* ---------- SNS 버튼 (cosmosfarm-members/social-buttons.php) ---------- */
.sns-login {display: flex; gap: 2rem;}
.sns-login__btn {display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; transition: opacity 0.2s ease;}
.sns-login__btn:hover {opacity: 0.85;}
/* 아이콘 파일(images/common/icon_login-*.svg)에 원형 배경까지 들어 있어서 버튼 크기 그대로 채운다 */
.sns-login__btn img {display: block; width: 100%; height: 100%;}

/* 가로선 + 가운데 글자 */
.signup-divider {display: flex; align-items: center; gap: 2.4rem; font-size: 1.7rem; color: var(--color-muted-sub);}
.signup-divider::before,
.signup-divider::after {content: ""; flex: 1; height: 1px; background-color: #a1a1a1;}

.signup__btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 6rem; border-radius: 5px; background-color: var(--color-primary); color: var(--white); font-size: 1.8rem; font-weight: 700;}
.signup__btn:hover,
.signup__btn:focus-visible {background-color: var(--color-primary-dark);}

/* ---------- 1단계: 가입 방법 선택 ---------- */
.signup-intro {text-align: center;}
.signup-intro__title {font-size: 4rem; font-weight: 600; color: var(--black); line-height: 1.3;}
/* 시안: 리드 문구는 40rem 칼럼보다 넓게 한 줄 */
.signup-intro__lead {margin: 1.6rem -10rem 0; font-size: 2.6rem; font-weight: 600; line-height: 1.4; color: var(--color-text); letter-spacing: -0.05rem;}
.signup-intro .sns-login {justify-content: center; margin-top: 6.4rem;}
.signup-intro__sns-desc {margin-top: 2rem; font-size: 1.7rem; color: var(--color-muted-sub);}
.signup-intro .signup-divider {margin: 8rem 0 3.6rem;}
.signup-intro__login {margin-top: 2rem; font-size: 1.6rem;}
.signup-intro__login a {display: inline; margin-left: 0.6rem; text-decoration: underline; text-underline-offset: 0.3rem;}

/* ---------- 2단계: 양식 ---------- */
.signup-main__lead {font-size: 4rem; font-weight: 600; line-height: 1.4; color: var(--black); letter-spacing: -0.19rem;}
.signup-block {margin-top: 10rem;}
.signup-block__title,
.signup .signup-form__title {font-size: 2rem; font-weight: 700; color: var(--black); line-height: 1.4;}
.signup-block__desc {margin-top: 0.6rem; font-size: 1.7rem; font-weight: 500; color: var(--color-muted-sub);}
.signup-block .sns-login {margin-top: 2.4rem;}
.signup-main > .signup-divider {margin: 4rem 0 5rem;}

/* 플러그인 양식 */
.signup .cosmosfarm-members-form {width: 100% !important; margin: 0;}
.signup .signup-form__title {margin: 0 0 3rem;}
.signup .signup-form__sep {margin: 4rem 0; border: 0; border-top: 1px solid #d9d9d9;}
.signup .cosmosfarm-members-form label.text {padding: 0 0 0.8rem; font-size: 1.4rem; font-weight: 600; line-height: 1.4; color: var(--color-text);}
.signup .cosmosfarm-members-form .req {margin-left: 0.2rem; color: var(--color-primary);}
.signup .cosmosfarm-members-form .div_text {margin: 0 0 2.4rem;}
.signup .cosmosfarm-members-form input.textbox {height: 5.2rem; padding: 0 2rem; border: 1px solid #c4c4c4; border-radius: 4px; font-size: 1.6rem; line-height: normal; color: var(--black);}
.signup .cosmosfarm-members-form input.textbox:focus {border-color: var(--color-primary);}
.signup .cosmosfarm-members-form input.textbox::placeholder {color: var(--color-muted-lighter);}
.signup .cosmosfarm-members-form input[type="password"] {letter-spacing: 0.3em;}

/* 비밀번호 안내 문구 — 입력칸 아래 */
.signup .div_text:has(+ .signup-form__msg:not(:empty)) {margin-bottom: 0.8rem;}
.signup-form__msg {font-size: 1.4rem; line-height: 1.4;}
.signup-form__msg:not(:empty) {margin-bottom: 2.4rem;}
.signup-form__msg.is-ok {color: var(--color-primary);}
.signup-form__msg.is-error {color: #dc5050;}
.signup .cosmosfarm-members-form input.textbox[aria-invalid="true"] {border-color: #dc5050;}
.signup-form__msg--agree {margin-top: 1.2rem;}

/* 피부 고민 선택 — 버튼형 체크박스 */
.signup .cosmosfarm-members-form .div_multicheckbox {display: block; padding: 0;}
.signup-chips {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem;}
.signup .cosmosfarm-members-form .signup-chips__item {position: relative; display: flex; align-items: center; justify-content: center; height: 5.2rem; padding: 0; border: 1px solid #c4c4c4; border-radius: 4px; font-size: 1.6rem; line-height: 1.4; color: var(--black); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;}
.signup .cosmosfarm-members-form .signup-chips__item input {position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.signup .cosmosfarm-members-form .signup-chips__item:has(input:checked) {border-color: var(--color-primary); background-color: #eaf3f4;}
.signup .cosmosfarm-members-form .signup-chips__item:has(input:focus-visible) {outline: 2px solid var(--color-accent); outline-offset: 2px;}

/* 약관 동의 */
.signup .signup-agree {padding: 2.4rem 2rem; border: 1px solid #c4c4c4; border-radius: 4px;}
.signup .cosmosfarm-members-form .signup-agree__label {display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 0; font-size: 1.6rem; line-height: 1.4; color: var(--color-muted-sub); cursor: pointer;}
.signup .cosmosfarm-members-form .signup-agree__all {padding-bottom: 1.6rem; border-bottom: 1px solid #d9d9d9; font-size: 1.8rem; font-weight: 700; color: var(--black);}
.signup-agree__list {display: flex; flex-direction: column; gap: 1.6rem; margin: 0; padding: 2rem 0 0; list-style: none;}
.signup-agree__item {display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.signup-agree__tag {font-weight: 400;}
.signup-agree__tag.is-required {color: var(--color-primary);}
.signup .signup-agree input.checkbox {width: 2.2rem; height: 2.2rem; margin: 0;}
.signup .signup-agree input.checkbox:checked {background-color: var(--color-primary);}
.signup-agree__note {padding: 2rem; border-radius: 0.5rem; background-color: #f5f5f5; font-size: 1.3rem; line-height: 1.6; color: var(--color-muted-sub); letter-spacing: -0.05rem;}
.signup-agree__note p:not(:first-child) {margin-top: 1rem;}
/* 스킨의 button 규칙이 padding·background-color 에 !important 를 걸어서 여기도 !important */
.signup .cosmosfarm-members-form .signup-agree__view {flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; line-height: 1; padding: 0 !important; border: 0; background-color: transparent !important; color: var(--color-muted-lighter); cursor: pointer;}
.signup .cosmosfarm-members-form .signup-agree__view svg {width: 1.6rem; height: 1.6rem;}
.signup .cosmosfarm-members-form .signup-agree__view:hover,
.signup .cosmosfarm-members-form .signup-agree__view:focus {color: var(--color-primary); background-color: transparent;}

/* 회원가입 버튼 */
.signup .cosmosfarm-members-form .button_div {margin: 4rem 0 0;}
.signup .cosmosfarm-members-form .button_div input[type="submit"] {height: 6rem; line-height: 6rem; border-radius: 5px; background-color: var(--color-primary) !important; font-size: 1.8rem; font-weight: 700;}
.signup .cosmosfarm-members-form .button_div input[type="submit"]:hover {background-color: var(--color-primary-dark) !important;}
.signup .cosmosfarm-members-form .req-text {display: none;}

/* 가입 오류·완료 메시지 (WP-Members) */
.signup .wpmem_msg {margin-bottom: 3rem; padding: 1.6rem 2rem; border-radius: 4px; background-color: #f4f4f4; font-size: 1.5rem; line-height: 1.5;}

@media (max-width: 768px) {
  .signup {padding: 6rem 0 8rem;}
  .signup-intro__title {font-size: clamp(2.8rem, 7.8vw, 4rem);}
  .signup-intro__lead {margin-inline: 0; font-size: clamp(1.6rem, 4.2vw, 2.2rem);}
  .signup-intro .sns-login {margin-top: 4rem;}
  .signup-intro .signup-divider {margin: 5rem 0 3rem;}
  .signup-main__lead {font-size: clamp(2.4rem, 6.25vw, 3.2rem);}
  .signup-block {margin-top: 6rem;}
  .sns-login__btn {width: 5.6rem; height: 5.6rem;}

  /* 2단계 양식 — 모바일 시안(768) 값: clamp(절반, 시안값×1.302vw, 시안값).
     작은 글자는 서브페이지와 같이 360px 부터 최소값을 넘게: 메타 1.2rem·3.2vw, 문장 1.3rem·3.5vw */
  .signup.is-form {padding-top: clamp(6.4rem, 16.67vw, 12.8rem);}
  .signup-block {margin-top: clamp(7rem, 18.23vw, 14rem);}
  .signup-block__title,
  .signup .signup-form__title {font-size: clamp(1.7rem, 4.43vw, 3.4rem);}
  .signup-block__desc {margin-top: clamp(0.5rem, 1.3vw, 1rem); font-size: clamp(1.3rem, 3.5vw, 2.6rem);}
  .signup-block .sns-login {gap: clamp(1.6rem, 4.17vw, 3.2rem); margin-top: clamp(2.2rem, 5.73vw, 4.4rem);}
  .signup-block .sns-login__btn {width: clamp(6rem, 15.63vw, 12rem); height: clamp(6rem, 15.63vw, 12rem);}
  .signup-main > .signup-divider {gap: clamp(2.1rem, 5.47vw, 4.2rem); margin: clamp(3.8rem, 9.9vw, 7.6rem) 0; font-size: clamp(1.3rem, 3.5vw, 2.6rem);}

  /* 플러그인이 폼 앞에 두는 빈 앵커(inline-block)가 한 줄(약 26px)을 차지해 제목이 밀려서 */
  .signup .cosmosfarm-members-form > a#register {display: block;}
  .signup .signup-form__title {margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}
  .signup .signup-form__sep {margin: clamp(3.2rem, 8.33vw, 6.4rem) 0;}
  .signup .cosmosfarm-members-form label.text {padding-bottom: clamp(0.7rem, 1.82vw, 1.4rem); font-size: clamp(1.2rem, 3.2vw, 2.4rem);}
  .signup .cosmosfarm-members-form .div_text {margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}
  .signup .cosmosfarm-members-form input.textbox {height: clamp(4.8rem, 12.5vw, 9.6rem); padding: 0 clamp(1.6rem, 4.17vw, 3.2rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .signup .div_text:has(+ .signup-form__msg:not(:empty)) {margin-bottom: clamp(0.6rem, 1.56vw, 1.2rem);}
  .signup-form__msg {font-size: clamp(1.3rem, 3.5vw, 2.6rem);}
  .signup-form__msg:not(:empty) {margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}

  .signup-chips {gap: clamp(0.8rem, 2.08vw, 1.6rem);}
  .signup .cosmosfarm-members-form .signup-chips__item {height: clamp(4.8rem, 12.5vw, 9.6rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}

  .signup .signup-agree {padding: clamp(1.8rem, 4.69vw, 3.6rem) clamp(1.6rem, 4.17vw, 3.2rem);}
  .signup .cosmosfarm-members-form .signup-agree__label {gap: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.3rem, 3.5vw, 2.6rem);}
  .signup .cosmosfarm-members-form .signup-agree__all {gap: clamp(1.2rem, 3.13vw, 2.4rem); padding-bottom: clamp(1.6rem, 4.17vw, 3.2rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .signup-agree__list {gap: clamp(1.6rem, 4.17vw, 3.2rem); padding-top: clamp(1.8rem, 4.69vw, 3.6rem);}
  .signup .signup-agree input.checkbox {width: clamp(1.8rem, 4.69vw, 3.6rem); height: clamp(1.8rem, 4.69vw, 3.6rem);}
  .signup-agree__note {padding: clamp(1.4rem, 3.65vw, 2.8rem) clamp(1.6rem, 4.43vw, 3.4rem); font-size: clamp(1.1rem, 3.05vw, 2.2rem); line-height: 1.45;} /* 시안 그대로 11px — 최소 글자 크기(12px) 예외 */

  .signup .cosmosfarm-members-form .button_div {margin-top: clamp(4rem, 10.42vw, 8rem);}
  .signup .cosmosfarm-members-form .button_div input[type="submit"] {height: clamp(5.2rem, 13.54vw, 10.4rem); line-height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
}

/* =========================================================
   로그인 (/login/) — 본문 tools/pages/member/login.html, 폼 cosmosfarm-members/login-form.php
   ========================================================= */
.member-login {padding: 14rem 0 20rem; color: var(--color-text);}
.member-login__inner {width: 100%; max-width: 40rem; margin: 0 auto;}
.member-login__title {margin-bottom: 6rem; font-size: 4rem; font-weight: 600; line-height: 1.3; color: var(--black); text-align: center;}
.member-login .cosmosfarm-members-form {width: 100% !important; margin: 0;}

.member-login__field {position: relative;}
.member-login__field + .member-login__field {margin-top: 1.2rem;}
.member-login__icon {position: absolute; top: 50%; left: 2rem; width: auto; height: 1.8rem; transform: translateY(-50%); pointer-events: none;}
.member-login .cosmosfarm-members-form .member-login__field input {height: 5.6rem; padding: 0 2rem 0 5rem; border: 1px solid #afafaf; border-radius: 4px; font-size: 1.6rem; line-height: normal; color: var(--black);}
.member-login .cosmosfarm-members-form .member-login__field input:focus {border-color: var(--color-primary);}
.member-login .cosmosfarm-members-form .member-login__field input::placeholder {color: var(--color-muted-lighter);}

/* 아이디 저장 — 테두리형 작은 체크박스 */
.member-login .cosmosfarm-members-form .member-login__save {display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; padding: 0; font-size: 1.6rem; line-height: 1.4; color: var(--color-muted-sub); cursor: pointer;}
.member-login .cosmosfarm-members-form .member-login__save input {appearance: none; -webkit-appearance: none; flex: none; width: 1.6rem; height: 1.6rem; margin: 0; border: 1px solid #a1a1a1; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M13.5 1.16 12.28 0 5.3 6.68 1.22 2.78 0 3.94 5.3 9l1.21-1.16z' fill='%23a1a1a1'/%3E%3C/svg%3E") center / 0.9rem no-repeat; cursor: pointer;}
.member-login .cosmosfarm-members-form .member-login__save input:checked {border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M13.5 1.16 12.28 0 5.3 6.68 1.22 2.78 0 3.94 5.3 9l1.21-1.16z' fill='%23fff'/%3E%3C/svg%3E");}

.member-login .cosmosfarm-members-form .button_div {margin: 3rem 0 0;}
.member-login .cosmosfarm-members-form .button_div input[type="submit"] {height: 6rem; line-height: 6rem; border-radius: 5px; background-color: var(--color-primary) !important; font-size: 1.8rem; font-weight: 700;}
.member-login .cosmosfarm-members-form .button_div input[type="submit"]:hover {background-color: var(--color-primary-dark) !important;}

.member-login__links {display: flex; justify-content: center; align-items: center; margin-top: 3rem; font-size: 1.7rem;}
.member-login__links li + li::before {content: ""; display: inline-block; width: 1px; height: 1.2rem; margin: 0 1.2rem; background-color: #c4c4c4; vertical-align: -0.1rem;}
.member-login .cosmosfarm-members-form .member-login__links a {color: var(--color-text); vertical-align: baseline;}
.member-login .cosmosfarm-members-form .member-login__links a:hover {color: var(--color-primary);}

.member-login__sns {margin-top: 8rem;}
.member-login__sns .sns-login {justify-content: center; margin-top: 3rem;}
/* 폼 안이라 스킨의 .cosmosfarm-members-form a {display: inline-block} 이 덮어서 */
.member-login .cosmosfarm-members-form .sns-login__btn {display: grid;}

.member-login .wpmem_msg {margin-bottom: 3rem; padding: 1.6rem 2rem; border-radius: 4px; background-color: #f4f4f4; font-size: 1.5rem; line-height: 1.5;}

@media (max-width: 768px) {
  /* 모바일 시안(768) M_로그인_0917: clamp(절반, 시안값×1.302vw, 시안값) — 작은 글자는 문장 1.3rem·3.5vw */
  .member-login {padding: clamp(8rem, 20.7vw, 15.9rem) 0 clamp(11.6rem, 30.2vw, 23.2rem);}
  .member-login__inner {max-width: none;}
  .member-login__title {margin-bottom: clamp(5.3rem, 13.8vw, 10.6rem); font-size: clamp(3.4rem, 8.85vw, 6.8rem);}
  .member-login__field + .member-login__field {margin-top: clamp(1rem, 2.6vw, 2rem);}
  .member-login__icon {left: clamp(2.5rem, 6.51vw, 5rem); height: clamp(1.3rem, 3.39vw, 2.6rem);}
  .member-login .cosmosfarm-members-form .member-login__field input {height: clamp(4.8rem, 12.5vw, 9.6rem); padding-left: clamp(4.8rem, 12.5vw, 9.6rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .member-login .cosmosfarm-members-form .member-login__save {gap: clamp(0.8rem, 2.08vw, 1.6rem); margin-top: clamp(1.3rem, 3.39vw, 2.6rem); font-size: clamp(1.3rem, 3.5vw, 2.6rem);}
  .member-login .cosmosfarm-members-form .member-login__save input {width: clamp(1.4rem, 3.65vw, 2.8rem); height: clamp(1.4rem, 3.65vw, 2.8rem); background-size: 55%;}
  .member-login .cosmosfarm-members-form .button_div {margin-top: clamp(3rem, 7.81vw, 6rem);}
  .member-login .cosmosfarm-members-form .button_div input[type="submit"] {height: clamp(5.2rem, 13.54vw, 10.4rem); line-height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .member-login__links {margin-top: clamp(2.2rem, 5.73vw, 4.4rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .member-login__links li + li::before {height: clamp(1.2rem, 3.13vw, 2.4rem); margin: 0 clamp(1rem, 2.6vw, 2rem);}
  .member-login__sns {margin-top: clamp(4.8rem, 12.5vw, 9.6rem);}
  .member-login__sns .signup-divider {font-size: clamp(1.3rem, 3.5vw, 2.6rem);}
  .member-login__sns .sns-login {gap: clamp(1.6rem, 4.17vw, 3.2rem); margin-top: clamp(2.8rem, 7.29vw, 5.6rem);}
  .member-login__sns .sns-login__btn {width: clamp(6rem, 15.63vw, 12rem); height: clamp(6rem, 15.63vw, 12rem);}
}

/* =========================================================
   공통: 테두리형 작은 체크박스 (.member-check) — 마이페이지 마케팅 동의·탈퇴 확인
   ========================================================= */
.member-check {display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.5rem; line-height: 1.4; color: #333; cursor: pointer;}
.member-check input {appearance: none; -webkit-appearance: none; flex: none; width: 1.8rem; height: 1.8rem; margin: 0; border: 1px solid #a1a1a1; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M13.5 1.16 12.28 0 5.3 6.68 1.22 2.78 0 3.94 5.3 9l1.21-1.16z' fill='%23a1a1a1'/%3E%3C/svg%3E") center / 1rem no-repeat; cursor: pointer;}
.member-check input:checked {border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M13.5 1.16 12.28 0 5.3 6.68 1.22 2.78 0 3.94 5.3 9l1.21-1.16z' fill='%23fff'/%3E%3C/svg%3E");}
.member-check input:focus-visible {outline: 2px solid var(--color-accent); outline-offset: 2px;}

/* =========================================================
   마이페이지 (/mypage/) — 본문 tools/pages/member/mypage.html, 화면 inc/member.php [el_mypage]
   ========================================================= */
.mypage-section {padding: 14rem 0 20rem; background-color: #f8f8f8; color: var(--color-text);}
.mypage-section:has(.member-guest) {background-color: var(--white);} /* 아이디 찾기·비밀번호 재설정은 로그인 화면처럼 흰 바탕 (회색은 로그인 후 카드 화면만) */
.mypage {display: grid; grid-template-columns: 22rem minmax(0, 90rem); justify-content: center; gap: 6rem; align-items: start;}

.mypage__title {font-size: 4rem; font-weight: 600; line-height: 1.3; color: var(--black);}
.mypage__user {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 6.4rem; padding-bottom: 2rem; border-bottom: 1px solid #cacaca;}
.mypage__name {font-size: 2.4rem; font-weight: 600; color: var(--black);}
.mypage__joined {padding: 0.5rem 1rem; border: 1px solid #bebebe; border-radius: 10rem; font-size: 1.4rem; color: var(--color-muted-sub); letter-spacing: -0.05rem;}
.mypage__nav {display: flex; flex-direction: column; gap: 0.4rem; margin-top: 2.4rem;}
.mypage__nav a {display: flex; align-items: center; height: 5.2rem; padding: 0 4rem; border-radius: 0.5rem; font-size: 1.8rem; color: var(--color-text); transition: background-color 0.2s ease;}
.mypage__nav a:hover {background-color: #f0f0f0;}
.mypage__nav a.is-active {background-color: #ebebeb; font-weight: 600; color: var(--black);}

.mypage__card {padding: 6rem; border-radius: 1rem; background-color: var(--white);}
.mypage__card-title {padding-bottom: 2.6rem; border-bottom: 1px solid #cacaca; font-size: 2.4rem; font-weight: 700; line-height: 1.4; color: var(--black);}
.mypage__msg {margin-top: 2.4rem; padding: 1.4rem 2rem; border-radius: 4px; font-size: 1.5rem; line-height: 1.5;}
.mypage__msg--done {background-color: #eaf3f4; color: var(--color-primary);}
.mypage__msg--error {background-color: #fdeeee; color: #d23c3c;}

.mypage-form__legend {padding: 0; margin: 4rem 0 2.4rem; font-size: 1.8rem; font-weight: 700; color: var(--black);}
.mypage-form__desc {margin: -1.6rem 0 2rem; font-size: 1.6rem; color: var(--color-muted-sub);}

/* 내 정보·비밀번호 변경 — WP-Members 폼([wpmem_profile]) 모양. 칸 감싸기·묶음 제목은 inc/member.php el_mypage_profile_rows.
   플러그인 기본 CSS(#wpmem_profile_form …)·코스모스팜 스킨보다 우선하도록 아이디 선택자 + 버튼은 !important */
.mypage__card :is(#wpmem_reg, #wpmem_login, #wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form, .cosmosfarm-members-form) {width: 100% !important; max-width: none; margin: 0; font-family: inherit; font-size: 1.6rem; color: var(--color-text);} /* 운영은 코스모스팜이 폼을 .cosmosfarm-members-form(너비 50%)로 감싼다 */
.mypage__card :is(a#register, a#pwdchange), .mypage__card form :is(.req, .req-text) {display: none;}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) fieldset {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 2rem; min-width: 0; margin: 0; padding: 0; border: 0;}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) legend {display: none;} /* 제목은 테마가 .mypage__card-title 로 (사파리가 격자 fieldset 안 legend 를 가끔 세로로 그림) */
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) fieldset > * {grid-column: 1 / -1;}
.mypage__card #wpmem_profile_form .mypage-field {grid-column: span 3; margin-bottom: 2.4rem;} /* 내 정보 칸 2열 */
.mypage__card #wpmem_profile_form :is(.mypage-field--skin_concern, .mypage-field--marketing_sms) {grid-column: 1 / -1;}
.mypage__card #wpmem_profile_form .mypage-field:has(.member-check) {grid-column: span 2; margin-bottom: 1.2rem;} /* 마케팅 동의 3개 한 줄 */
.mypage__card #wpmem_profile_form .member-check {display: inline-flex;}
.mypage__card #wpmem_profile_form .member-check input {width: 1.8rem; height: 1.8rem; margin: 0; vertical-align: middle;} /* 코스모스팜 input[type=checkbox] {width:auto} 보다 우선 */
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) label:is(.text, [for="current_password"], [for="pass1"], [for="pass2"]) {display: block; width: auto; margin: 0 0 1rem; padding: 0; font-size: 1.4rem; font-weight: 600; color: var(--color-text);}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) :is(.div_text, .div_checkbox, .div_multicheckbox) {width: auto; margin: 0; float: none;}
.mypage__card :is(#wpmem_pwdchange_form, .pwdchange-form form) .div_text {margin-bottom: 2.4rem;}
.mypage__card :is(#wpmem_login, .pwdchange-form) {padding-top: 4rem !important;} /* 제목 아래 간격 (플러그인 CSS 가 폼 여백을 0 으로) */
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .div_text input {width: 100%; height: 5.2rem; padding: 0 1.8rem; border: 1px solid #c4c4c4; border-radius: 4px; background-color: var(--white); font-size: 1.6rem; color: var(--black);}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .div_text input:focus {border-color: var(--color-primary); outline: none;}
.mypage__card #wpmem_profile_form .div_text input[readonly] {background-color: #f4f4f4; color: #333;}
.mypage__card #wpmem_profile_form .mypage-field > .mypage-form__legend:first-child {margin-top: 1.6rem;}

/* 관심 내역 → 칩 (회원가입 '피부 고민 선택'과 같은 모양) */
.mypage__card #wpmem_profile_form .div_multicheckbox {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 0; font-size: 0;}
.mypage__card #wpmem_profile_form .div_multicheckbox br {display: none;}
.mypage__card #wpmem_profile_form .div_multicheckbox input {position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.mypage__card #wpmem_profile_form .div_multicheckbox label {flex: 0 0 calc(50% - 0.4rem); display: flex; align-items: center; justify-content: center; height: 5.2rem; border: 1px solid #c4c4c4; border-radius: 4px; font-size: 1.6rem; color: var(--black); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; padding-bottom: 0;}
.mypage__card #wpmem_profile_form .div_multicheckbox input:checked + label {border-color: var(--color-primary); background-color: #eaf3f4; color: var(--color-primary); font-weight: 500;}
.mypage__card #wpmem_profile_form .div_multicheckbox input:focus-visible + label {outline: 2px solid var(--color-accent); outline-offset: 2px;}

/* 저장 버튼 */
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .button_div {display: flex; justify-content: center; width: auto; margin: 2.8rem 0 0; padding: 3.2rem 0 0; border-top: 1px solid #c4c4c4; text-align: center;}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .button_div .buttons {width: 18rem; height: 6rem; padding: 0 !important; border: 0; border-radius: 4px; background-color: var(--color-primary) !important; font-size: 1.7rem; font-weight: 700; color: var(--white); cursor: pointer; transition: background-color 0.2s ease;}
.mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .button_div .buttons:hover {background-color: var(--color-primary-dark) !important;}

/* 코스모스팜 '강력한 비밀번호 사용' 실시간 안내 — 마이페이지 비밀번호 변경에만 (회원가입은 signup.js 가 같은 규칙으로 안내) */
.mypage__card .password-strength-meter-display {display: block; margin-top: 0.8rem; font-size: 1.4rem; line-height: 1.5;}
.mypage__card .password-strength-meter-display.bad {color: #dc5050;}
.mypage__card .password-strength-meter-display.good {color: var(--color-primary);}
.signup .password-strength-meter-display {display: none;}

/* 저장 결과·오류 안내 (WP-Members) */
.mypage__card .wpmem_msg {margin: 0 0 2.4rem; padding: 1.4rem 2rem; border: 0; border-radius: 4px; background-color: #eaf3f4; font-size: 1.5rem; line-height: 1.5; color: var(--color-primary); text-align: left;}

.mypage-form__buttons {display: flex; justify-content: center; gap: 0.8rem; margin-top: 4rem; padding-top: 3.2rem; border-top: 1px solid #c4c4c4;}
.mypage-btn {display: inline-flex; align-items: center; justify-content: center; width: 20rem; height: 6rem; border: 1px solid transparent; border-radius: 4px; font-size: 1.7rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.mypage-btn--line {border-color: #c4c4c4; background-color: var(--white); color: var(--color-muted);}
.mypage-btn--line:hover {border-color: var(--black); color: var(--black);}
.mypage-btn--primary {background-color: var(--color-primary); color: var(--white); font-weight: 700;}
.mypage-btn--primary:hover {background-color: var(--color-primary-dark);}
.mypage-form__buttons .mypage-btn--primary:only-child {width: 18rem;}

/* 회원탈퇴 */
.mypage-withdraw {display: flex; gap: 2.4rem; margin-top: 4rem;}
.mypage-withdraw__icon {flex: none; width: 6rem; height: 6rem;}
.mypage-withdraw__text {font-size: 1.6rem; line-height: 1.7; color: var(--black);}
.mypage-withdraw__check {margin-top: 1.6rem; color: var(--color-muted);}

/* 로그아웃 상태: 아이디 찾기·비밀번호 재설정 (WP-Members 폼) */
.member-guest {max-width: 40rem; margin: 0 auto;}
.member-guest .cosmosfarm-members-form {width: 100% !important; margin: 0; font-size: 1.6rem;}
.member-guest .cosmosfarm-members-form .message{padding: 2rem; }
.member-guest .cosmosfarm-members-form label {padding: 0 0 0.8rem; font-size: 1.4rem; font-weight: 500; color: #333;}
.member-guest .cosmosfarm-members-form .div_text {margin-bottom: 2rem;}
.member-guest .cosmosfarm-members-form input[type="text"],
.member-guest .cosmosfarm-members-form input[type="email"],
.member-guest .cosmosfarm-members-form input[type="password"] {height: 5.6rem; padding: 0 2rem; border-radius: 4px; font-size: 1.6rem; line-height: normal; border-color: #afafaf;}
.member-guest .cosmosfarm-members-form .button_div {margin-top: 1rem;}
.member-guest .cosmosfarm-members-form input[type="submit"] {height: 6rem; line-height: 6rem; border-radius: 5px; background-color: var(--color-primary) !important; font-size: 1.8rem; font-weight: 700;}
.member-guest .wpmem_msg {margin-bottom: 3rem; padding: 1.6rem 2rem; border-radius: 4px; background-color: var(--white); font-size: 1.5rem; line-height: 1.5;}
.member-guest__desc {margin: -3rem -10rem 5rem; font-size: 2rem; font-weight: 500; line-height: 1.6; color: var(--color-text); text-align: center; word-break: keep-all;}
.member-guest__back {margin-top: 3rem; font-size: 1.5rem; text-align: center;}
.member-guest__back a {text-decoration: underline; text-underline-offset: 0.3rem;}

@media (max-width: 1024px) {
  .mypage {grid-template-columns: 18rem minmax(0, 1fr); gap: 3rem;}
  .mypage__card {padding: 4rem;}
}
@media (max-width: 768px) {
  /* 모바일 시안(768): 제목·이름·탭만 회색 띠(화면 끝까지), 내용은 흰 바탕에 카드 없이.
     clamp(절반, 시안값×1.302vw, 시안값) — 작은 글자는 메타 1.2rem·3.2vw, 문장 1.3rem·3.5vw */
  /* 아이디 찾기·비밀번호 재설정(.member-guest) — 모바일 시안 M_아이디 찾기(01)·M_비밀번호 변경(01) */
  .mypage-section {padding: clamp(8rem, 20.7vw, 15.9rem) 0 clamp(11.6rem, 30.2vw, 23.2rem); background-color: var(--white);}
  .member-guest {max-width: none;}
  .member-guest .cosmosfarm-members-form label {padding-bottom: clamp(0.7rem, 1.82vw, 1.4rem); font-size: clamp(1.2rem, 3.2vw, 2.4rem);}
  .member-guest .cosmosfarm-members-form .div_text {margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}
  .member-guest .cosmosfarm-members-form input[type="text"],
  .member-guest .cosmosfarm-members-form input[type="email"],
  .member-guest .cosmosfarm-members-form input[type="password"] {height: clamp(4.8rem, 12.5vw, 9.6rem); padding: 0 clamp(1.6rem, 4.17vw, 3.2rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .member-guest .cosmosfarm-members-form .button_div {margin-top: clamp(1.8rem, 4.69vw, 3.6rem);}
  .member-guest .cosmosfarm-members-form input[type="submit"] {height: clamp(5.2rem, 13.54vw, 10.4rem); line-height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .mypage-section:has(.mypage) {padding: 0 0 clamp(9rem, 23.7vw, 18.2rem); background-color: var(--white);}
  .mypage {grid-template-columns: minmax(0, 1fr); gap: 0;}
  .mypage__side {margin-inline: calc(50% - 50vw); padding: clamp(4.4rem, 11.46vw, 8.8rem) calc(50vw - 50%) clamp(1.4rem, 3.65vw, 2.8rem); background-color: #f8f8f8;}
  .mypage__title {font-size: clamp(3rem, 7.81vw, 6rem);}
  .mypage__user {gap: clamp(1rem, 2.6vw, 2rem); margin-top: clamp(4.3rem, 11.2vw, 8.6rem); padding-bottom: clamp(1.6rem, 4.17vw, 3.2rem);}
  .mypage__name {font-size: clamp(1.8rem, 4.69vw, 3.6rem);}
  .mypage__joined {display: inline-flex; align-items: center; height: clamp(2.4rem, 6.25vw, 4.8rem); padding: 0 clamp(0.8rem, 2.08vw, 1.6rem); font-size: clamp(1.2rem, 3.2vw, 2.2rem);}
  .mypage__nav {flex-direction: row; gap: clamp(0.4rem, 1.04vw, 0.8rem); margin-top: clamp(2.6rem, 6.77vw, 5.2rem);}
  .mypage__nav a {flex: 1; justify-content: center; white-space: nowrap; height: clamp(4rem, 10.42vw, 8rem); padding: 0 0.4rem; border-radius: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .mypage__nav a:hover {background-color: transparent;}
  .mypage__nav a.is-active {background-color: var(--black); color: var(--white);}
  .mypage__nav a.mypage__nav-logout {display: none;} /* 모바일은 시안대로 탭 3개 — 로그아웃은 메뉴(오프캔버스)에 있다 */

  .mypage__card {padding: clamp(4.5rem, 11.72vw, 9rem) 0 0; border-radius: 0; background-color: transparent;}
  .mypage__card-title {padding-bottom: clamp(1.9rem, 4.95vw, 3.8rem); font-size: clamp(2rem, 5.21vw, 4rem);}
  .mypage-form__legend {margin: clamp(4rem, 10.42vw, 8rem) 0 clamp(2.2rem, 5.73vw, 4.4rem); font-size: clamp(1.7rem, 4.43vw, 3.4rem);}
  .mypage-form__desc {margin: calc(-1 * clamp(1.6rem, 4.17vw, 3.2rem)) 0 clamp(2.2rem, 5.73vw, 4.4rem); font-size: clamp(1.3rem, 3.5vw, 2.6rem); line-height: 1.55;}
  .mypage__card #wpmem_profile_form .mypage-field {grid-column: 1 / -1; margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}
  .mypage__card #wpmem_profile_form .mypage-field:has(.member-check) {grid-column: span 3; margin-bottom: clamp(1.4rem, 3.65vw, 2.8rem);} /* 마케팅 동의 2열 */
  .mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) label:is(.text, [for="current_password"], [for="pass1"], [for="pass2"]) {margin-bottom: clamp(0.7rem, 1.82vw, 1.4rem); font-size: clamp(1.2rem, 3.2vw, 2.4rem);}
  .mypage__card :is(#wpmem_pwdchange_form, .pwdchange-form form) .div_text {margin-bottom: clamp(2.2rem, 5.73vw, 4.4rem);}
  .mypage__card :is(#wpmem_login, .pwdchange-form) {padding-top: clamp(3rem, 7.81vw, 6rem) !important;}
  .mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .div_text input {height: clamp(4.8rem, 12.5vw, 9.6rem); padding: 0 clamp(1.6rem, 4.17vw, 3.2rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .mypage__card #wpmem_profile_form .div_multicheckbox {row-gap: clamp(0.8rem, 2.08vw, 1.6rem);}
  .mypage__card #wpmem_profile_form .div_multicheckbox label {flex-basis: calc(50% - clamp(0.4rem, 1.04vw, 0.8rem)); height: clamp(4.8rem, 12.5vw, 9.6rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .button_div {margin-top: clamp(2.8rem, 7.29vw, 5.6rem); padding-top: clamp(2.8rem, 7.29vw, 5.6rem);}
  .mypage__card :is(#wpmem_profile_form, #wpmem_pwdchange_form, .pwdchange-form form) .button_div .buttons {width: 100%; height: clamp(5.2rem, 13.54vw, 10.4rem); border-radius: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .mypage .member-check {gap: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.2rem, 3.2vw, 2.8rem); letter-spacing: -0.05rem; padding: 0 !important;}
  .mypage .member-check input {width: clamp(1.55rem, 4.11vw, 3.6rem); height: clamp(1.55rem, 4.11vw, 3.6rem); background-size: 50%;} /* 글자의 1.29배 */
  .mypage__card #wpmem_profile_form .member-check input {width: clamp(1.55rem, 4.11vw, 3.6rem); height: clamp(1.55rem, 4.11vw, 3.6rem);}

  .mypage-form__buttons {gap: clamp(0.8rem, 2.08vw, 1.6rem); margin-top: clamp(4.2rem, 10.94vw, 8.4rem); padding-top: clamp(2.8rem, 7.29vw, 5.6rem);}
  .mypage-btn {flex: 1; width: auto; height: clamp(5.2rem, 13.54vw, 10.4rem); border-radius: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .mypage-form .mypage-btn--primary:only-child {flex: none; width: 100%;}

  .mypage-withdraw {flex-direction: column; align-items: center; gap: clamp(2.2rem, 5.73vw, 4.4rem); margin-top: clamp(3rem, 7.81vw, 6rem); text-align: center;}
  .mypage-withdraw__icon {width: clamp(6rem, 15.63vw, 16rem); height: clamp(6rem, 15.63vw, 16rem);}
  .mypage-withdraw__text {font-size: clamp(1.2rem, 3.2vw, 2.8rem); line-height: 1.6;}
  .mypage-withdraw__check {margin-top: clamp(2rem, 5.21vw, 4rem);}
  .member-guest__desc {margin: calc(-1 * clamp(4.35rem, 11.33vw, 8.7rem)) calc(-1 * clamp(0.6rem, 1.43vw, 1.1rem)) clamp(5.3rem, 13.8vw, 10.6rem); font-size: clamp(1.2rem, 3.6vw, 1.5rem); letter-spacing: -0.05rem;} /* 제목 아래 1.9rem·입력칸까지 10.6rem(시안), 좌우는 여백까지 조금 넓게 */
}
.member-guest .cosmosfarm-members-form .link-text {margin-top: 2rem; font-size: 1.4rem; color: var(--color-muted); text-align: center;}
.member-guest .cosmosfarm-members-form .link-text a {color: #333; text-decoration: underline; text-underline-offset: 0.3rem; vertical-align: baseline;}
@media (max-width: 768px) {
  /* 안내·결과 문구 — 문장 하한 1.3rem·3.5vw, 위는 PC 크기까지 (.link-text 가 위 미디어쿼리보다 뒤에 있어 여기서) */
  .member-guest .cosmosfarm-members-form {font-size: clamp(1.3rem, 3.5vw, 1.6rem);}
  .member-guest .wpmem_msg {font-size: clamp(1.3rem, 3.5vw, 1.5rem);}
  .member-guest .cosmosfarm-members-form .link-text {font-size: clamp(1.2rem, 3.2vw, 1.4rem);}
  .member-guest__back {margin-top: clamp(2.4rem, 6.25vw, 3rem); font-size: clamp(1.3rem, 3.5vw, 1.5rem);}
}

/* 가입 직후 이메일 인증 대기 (signup.js initPending) */
.signup-pending {text-align: center;}
.signup-pending__icon {display: inline-grid; place-items: center; width: 8rem; height: 8rem; border-radius: 50%; background-color: #eaf3f4; color: var(--color-primary);}
.signup-pending__icon svg {width: 3.6rem; height: 3.6rem;}
.signup-pending__title {margin-top: 2.8rem; font-size: 3.2rem; font-weight: 700; line-height: 1.4; color: var(--black);}
.signup-pending__text {margin-top: 2rem; font-size: 1.6rem; line-height: 1.7;}
.signup-pending__text b {color: var(--color-primary); font-weight: 600;}
.signup-pending__note {margin-top: 1.2rem; font-size: 1.4rem; color: var(--color-muted);}
.signup-pending__resend {width: 100%; height: 5.6rem; margin-top: 4rem; border: 1px solid #c4c4c4; border-radius: 5px; background-color: var(--white); font-size: 1.6rem; color: var(--color-text); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;}
.signup-pending__resend:hover {border-color: var(--color-primary); color: var(--color-primary);}
.signup-pending__resend:disabled {opacity: 0.5; cursor: default;}
.signup-pending__msg {min-height: 2rem; margin-top: 1.6rem; font-size: 1.4rem; color: var(--color-primary);}
@media (max-width: 768px) {
  .signup-pending__title {font-size: clamp(2.2rem, 6vw, 3.2rem);}
  .signup-pending__text {font-size: 1.5rem;}
  .signup-pending__text br {display: none;}
}
.member-login__notice {margin-bottom: 2rem; padding: 1.4rem 2rem; border-radius: 4px; background-color: #eaf3f4; font-size: 1.5rem; line-height: 1.5; color: var(--color-primary); text-align: center;}
.cosmosfarm-members-form.loginfailed {width: 100% !important; margin: 0 0 2rem;} /* 로그인 실패 안내 (코스모스팜 상자) — 안내 문구는 inc/member.php el_member_login_failed_args */
.cosmosfarm-members-form.loginfailed .message {margin: 0; padding: 1.4rem 2rem; border-radius: 4px; background-color: #fdeeee; font-size: 1.5rem; line-height: 1.5; color: #d23c3c; text-align: center;}