/* ======================================================
   로그인/회원가입 통합 스타일 (팝업 + /login + /signup)
   ====================================================== */

/* ---------- 공통 변수 ---------- */
:root {
  --auth-primary: #1b62b5;
  --auth-primary-dark: #0e447a;
  --auth-accent: #e2401c;
  --auth-success: #2e7d32;
  --auth-border: #c6d6ee;
  --auth-border-hover: #9fb7e6;
  --auth-ring: rgba(27, 98, 181, 0.18);
  --cta-text: #fff;
}

/* ---------- 작은 유틸/애니메이션 ---------- */
@keyframes ctaShine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes arrowShine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* 필드 상태/메시지 (공통) */
.form-row .field-msg {
  display: block;
  margin-top: 0;
  font-size: 13px;
  line-height: 1.3;
}
.form-row .input-text.is-invalid {
  border-color: var(--auth-accent) !important;
}
.form-row .input-text.is-valid {
  border-color: var(--auth-success) !important;
}
#reg_password2_row,
#reg_phone_row {
  margin-bottom: 14px;
}

/* =========================================
   팝업 + /login 공통 레이아웃 & 높이 체인
   ========================================= */
#login-form-popup .row,
.ux-account-popup .row,
.page-id-13776 #customer_login {
  display: flex;
  align-items: stretch;
}

/* 팝업(라이트박스) 안쪽 요소 높이 100% */
#login-form-popup .lightbox-content,
#login-form-popup .lightbox-content .container,
#login-form-popup .lightbox-content .container .row,
#login-form-popup .lightbox-content .container .row > .col,
#login-form-popup .lightbox-content .container .row > .col > .col-inner,
#login-form-popup .account-register-inner,
#login-form-popup .account-cta-wrap,
#login-form-popup .account-cta-panel {
  height: 100% !important;
}

/* 팝업 라운드 제거 */
#login-form-popup .lightbox-content,
#login-form-popup .account-cta-panel {
  border-radius: 0 !important;
}

/* 내부 흰 배경 제거(팝업, /login) */
#login-form-popup .account-register-inner,
#login-form-popup .col > .col-inner,
.page-id-13776 .account-login-inner,
.page-id-13776 .col > .col-inner {
  background: transparent !important;
}

/* =========================================
   CTA 공통(팝업, /login 오른쪽, /signup 왼쪽)
   ========================================= */
.account-cta-wrap {
  display: flex !important;
}
.account-cta-panel {
  flex: 1 1 auto !important;
  min-height: 360px;
  background: var(--auth-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 32px !important;
  box-sizing: border-box !important;
  overflow: hidden;
  border-radius: 0 !important;
}
.account-cta-inner {
  max-width: 340px;
  text-align: center;
}
.account-cta-inner h3 {
  color: #fff;
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 700;
}

/* CTA 버튼(흰색 고스트 + >>> 효과) */
.account-cta-inner .button.white {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px;
  padding: 12px 28px;
  box-shadow: none !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.account-cta-inner .button.white:hover {
  background: #f2f2f2;
  color: var(--auth-primary);
}
.account-cta-inner .button.white::after {
  content: '>>>';
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  letter-spacing: -3px;
  font-size: 1.4em;
  line-height: 1.2;
  vertical-align: -2px;
  --sy: 1.4;
  transform: scaleY(var(--sy));
  transform-origin: 50% 60%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.6),
    #fff,
    rgba(255, 255, 255, 0.6)
  );
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: transform 0.25s, letter-spacing 0.25s;
}
.account-cta-inner .button.white:hover::after {
  font-weight: 900;
  --sy: 1.35;
  transform: translateX(4px);
  animation: ctaShine 1.2s linear infinite;
}

/* =========================================
   공통 타이포/입력/버튼 톤(팝업 + /login + /signup)
   ========================================= */

/* 제목 색 통일 (파란 패널 제외) */
#login-form-popup .account-login-inner h1,
#login-form-popup .account-login-inner h2,
#login-form-popup .account-login-inner h3,
#login-form-popup .account-register-inner h1,
#login-form-popup .account-register-inner h2,
#login-form-popup .account-register-inner h3,
.page-id-13776 .account-login-inner h1,
.page-id-13776 .account-login-inner h2,
.page-id-13776 .account-login-inner h3,
.page-id-13776 .account-register-inner h1,
.page-id-13776 .account-register-inner h2,
.page-id-13776 .account-register-inner h3,
.page-id-6774 .account-register-inner h1,
.page-id-6774 .account-register-inner h2,
.page-id-6774 .account-register-inner h3 {
  color: var(--auth-primary-dark) !important;
  font-weight: 800;
}

/* 파란 패널 안 제목은 흰색 */
#login-form-popup .account-cta-inner h1,
#login-form-popup .account-cta-inner h2,
#login-form-popup .account-cta-inner h3,
.page-id-13776 .account-cta-inner h1,
.page-id-13776 .account-cta-inner h2,
.page-id-13776 .account-cta-inner h3,
.page-id-6774 .account-cta-inner h1,
.page-id-6774 .account-cta-inner h2,
.page-id-6774 .account-cta-inner h3 {
  color: var(--cta-text) !important;
}

/* 라벨/필수표시 */
#login-form-popup .woocommerce-form-login label,
#login-form-popup .woocommerce-form-login .woocommerce-form__label,
.page-id-13776 .woocommerce-form-login label,
.page-id-13776 .woocommerce-form-login .woocommerce-form__label,
.page-id-6774 .woocommerce-form-register label,
.page-id-6774 .woocommerce-form-register .woocommerce-form__label {
  color: var(--auth-primary);
  font-weight: 600;
}
#login-form-popup .form-row label .required,
.ux-account-popup .form-row label .required,
.woocommerce-account .form-row label .required,
.page-id-13776 .form-row label .required,
.page-id-6774 .form-row label .required {
  color: var(--auth-accent) !important;
  font-weight: 700;
  margin-left: 3px;
}

/* 인풋(공통) */
#login-form-popup .woocommerce form .form-row .input-text,
#login-form-popup .woocommerce form input.input-text,
.page-id-13776 .woocommerce form .form-row .input-text,
.page-id-13776 .woocommerce form input.input-text,
.page-id-6774 .woocommerce form .form-row .input-text,
.page-id-6774 .woocommerce form input.input-text {
  border-radius: 8px;
  border: 2px solid var(--auth-border);
  background: #fff;
  padding: 10px 12px;
  line-height: 1.2;
  color: #1b2b4a;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
#login-form-popup .woocommerce form .form-row .input-text:hover,
#login-form-popup .woocommerce form input.input-text:hover,
.page-id-13776 .woocommerce form .form-row .input-text:hover,
.page-id-13776 .woocommerce form input.input-text:hover,
.page-id-6774 .woocommerce form .form-row .input-text:hover,
.page-id-6774 .woocommerce form input.input-text:hover {
  border-color: var(--auth-border-hover);
}
#login-form-popup .woocommerce form .form-row .input-text:focus,
#login-form-popup .woocommerce form input.input-text:focus,
#login-form-popup .woocommerce form .form-row .input-text:focus-visible,
#login-form-popup .woocommerce form input.input-text:focus-visible,
.page-id-13776 .woocommerce form .form-row .input-text:focus,
.page-id-13776 .woocommerce form input.input-text:focus,
.page-id-13776 .woocommerce form .form-row .input-text:focus-visible,
.page-id-13776 .woocommerce form input.input-text:focus-visible,
.page-id-6774 .woocommerce form .form-row .input-text:focus,
.page-id-6774 .woocommerce form input.input-text:focus,
.page-id-6774 .woocommerce form .form-row .input-text:focus-visible,
.page-id-6774 .woocommerce form input.input-text:focus-visible {
  border-color: var(--auth-primary) !important;
  box-shadow: 0 0 0 4px var(--auth-ring);
  outline: none;
}

/* 체크박스 + “기억하기” 라인 */
#login-form-popup .woocommerce-form-login input[type='checkbox'],
.page-id-13776 .woocommerce-form-login input[type='checkbox'] {
  accent-color: var(--auth-primary);
}
#login-form-popup .woocommerce-form-login .woocommerce-form__label-for-checkbox,
.ux-account-popup .woocommerce-form-login .woocommerce-form__label-for-checkbox,
.page-id-13776 .woocommerce-form-login .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 10px;
  line-height: 1.2;
}
#login-form-popup
  .woocommerce-form-login
  .woocommerce-form__label-for-checkbox
  input[type='checkbox'],
.page-id-13776
  .woocommerce-form-login
  .woocommerce-form__label-for-checkbox
  input[type='checkbox'] {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* 버튼(로그인/회원가입 공통 규격) */
#login-form-popup .woocommerce-form-login .button,
#login-form-popup form.login .button,
#login-form-popup .woocommerce-button.button.login,
#login-form-popup .woocommerce-form-register .button,
.page-id-13776 .woocommerce-form-login .button,
.page-id-13776 .woocommerce-form-register .button,
.page-id-6774 .woocommerce-form-register .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--auth-primary) !important;
  border: 2px solid var(--auth-primary) !important;
  border-radius: 8px;
  padding: 10px 18px !important;
  line-height: 1.1 !important;
  font-size: 14px !important;
  min-height: 42px;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
#login-form-popup .woocommerce-form-login .button:hover,
#login-form-popup form.login .button:hover,
#login-form-popup .woocommerce-button.button.login:hover,
#login-form-popup .woocommerce-form-register .button:hover,
#login-form-popup .woocommerce-form-login .button:focus,
#login-form-popup .woocommerce-form-register .button:focus,
.page-id-13776 .woocommerce-form-login .button:hover,
.page-id-13776 .woocommerce-form-register .button:hover,
.page-id-13776 .woocommerce-form-login .button:focus,
.page-id-13776 .woocommerce-form-register .button:focus,
.page-id-6774 .woocommerce-form-register .button:hover,
.page-id-6774 .woocommerce-form-register .button:focus {
  background: var(--auth-primary) !important;
  color: #fff !important;
  border-color: var(--auth-primary) !important;
}
#login-form-popup .woocommerce-form-login .button:active,
#login-form-popup .woocommerce-form-register .button:active,
.page-id-13776 .woocommerce-form-login .button:active,
.page-id-13776 .woocommerce-form-register .button:active,
.page-id-6774 .woocommerce-form-register .button:active {
  background: var(--auth-primary-dark) !important;
  border-color: var(--auth-primary-dark) !important;
  color: #fff !important;
}

/* 잊어버린 비밀번호 링크 */
#login-form-popup .lost_password a,
#login-form-popup .woocommerce-LostPassword a,
.page-id-13776 .lost_password a,
.page-id-13776 .woocommerce-LostPassword a {
  color: var(--auth-primary) !important;
  font-size: 0.8em;
}
#login-form-popup .lost_password a:hover,
#login-form-popup .woocommerce-LostPassword a:hover,
.page-id-13776 .lost_password a:hover,
.page-id-13776 .woocommerce-LostPassword a:hover {
  color: var(--auth-primary-dark) !important;
}

/* =========================================
   /login (page-id: 13776) – 반반 레이아웃 + sticky
   ========================================= */
.page-id-13776 #customer_login {
  display: flex;
  align-items: stretch;
  min-height: 70vh;
}
.page-id-13776 #customer_login .col-1,
.page-id-13776 #customer_login .col-2 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
.page-id-13776 #customer_login .account-login-inner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
/* 오른쪽 CTA를 그대로 패널 스타일로 사용 */
@media (min-width: 850px) {
  .page-id-13776 .account-cta-panel {
    position: sticky;
    top: 24px;
    height: auto !important;
  }
}
/* 모바일 스택 */
@media (max-width: 849px) {
  .page-id-13776 #customer_login {
    flex-direction: column;
  }
  .page-id-13776 #customer_login .col-1,
  .page-id-13776 #customer_login .col-2 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .account-cta-panel {
    min-height: 280px;
  }
}

/* ======================================================
   /signup (page-id: 6774) — CTA 제거 + 폼만 가운데
   ====================================================== */

/* 레이아웃을 단일 컬럼으로 */
.page-id-6774 #customer_login {
  display: block !important; /* flex → block */
  min-height: auto !important;
}

/* 좌측 CTA 컬럼/요소 완전 제거 */
.page-id-6774 #customer_login .col-1,
.page-id-6774 .account-cta-wrap,
.page-id-6774 .account-cta-panel {
  display: none !important;
}

/* 우측(=남는) 컬럼을 폼 단일 컬럼으로 중앙 정렬 */
.page-id-6774 #customer_login .col-2 {
  flex: none !important;
  max-width: 520px !important; /* 필요시 660~800px로 조절 */
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important; /* 혹시 남아있을 배경 제거 */
  color: inherit !important;
  min-height: 0 !important;
}
.page-id-6774 #customer_login .col-2 > .col-inner {
  display: block !important;
}

/* 가입 폼 박스 기본 여백 유지(원하면 수치 조절) */
.page-id-6774 .account-register-inner {
  padding: 40px 20px !important;
  background: #fff; /* 테마가 투명 처리해놨다면 유지 */
}

/* 하단 한 줄 링크(로그인 유도) — '잊어버리셨나요?' 라인과 통일 */
.page-id-6774 .signup-login-note {
  margin-top: 8px !important;
  text-align: left; /* 가운데 원하면 center */
}
.page-id-6774 .signup-login-note a {
  color: var(--auth-primary);
}
.page-id-6774 .signup-login-note a:hover {
  color: var(--auth-primary-dark);
}

/* 모바일은 기본 단일 컬럼이라 추가 작업 불필요하지만,
   혹시 상단 규칙보다 약해서 깨질 때를 대비한 보루 */
@media (max-width: 849px) {
  .page-id-6774 #customer_login {
    display: block !important;
  }
  .page-id-6774 #customer_login .col-2 {
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.happy-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 32px;
  text-align: center;
  gap: 10px;
  background: #fafafa;
  border: 1px dashed #e1e1e1;
  border-radius: 12px;
}
.happy-empty__icon {
  font-size: 48px;
  line-height: 1;
  opacity: 0.9;
}
.happy-empty__title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
}
.happy-empty__desc {
  margin: 0;
  color: #666;
}

#cat-tabs-wrap .tabbed-content .nav,
#cat-tabs-wrap .tabbed-content .tabbed-nav,
#cat-tabs-wrap .tabs .tab-nav,
#cat-tabs-wrap ul.nav.nav-tabs {
  display: none !important;
}

/* signup 페이지 폼 박스 중앙 정렬 + 적당한 폭 */
.account-register-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 사용자명 안내문 */
.note-unchange {
  font-weight: 400;
  color: #6b7280; /* 회색 */
  margin-left: 0.5rem;
  font-size: 0.9em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .note-unchange {
    display: block;
    margin: 0.25rem 0 0;
  }
}

/* 비번/비번확인 나란히 */
.form-row-first,
.form-row-last {
  width: 48% !important;
  float: left;
}
.form-row-last {
  margin-left: 4%;
}
.clear {
  clear: both;
}

/* (edit-account) 로그인ID 읽기전용 스타일 */
#account_user_login[disabled] {
  background: #f7f7f7;
  color: #666;
  cursor: not-allowed;
  border-color: #ddd;
}

/* (회원가입 공통) 검증 상태 테두리 */
.form-row .input-text.is-invalid {
  border-color: var(--auth-accent) !important;
}
.form-row .input-text.is-valid {
  border-color: var(--auth-success) !important;
}