/* =============================================================
   소소도담 Auth UI · style.css
   skin/member/sosododam.auth/style.css
   ============================================================= */

/* ─── 1. Design Tokens ─────────────────────────────────────── */
:root {
  --ssd-pink:        #F7AFC4;
  --ssd-pink-light:  rgba(247, 175, 196, 0.12);
  --ssd-pink-mid:    rgba(247, 175, 196, 0.30);
  --ssd-pink-border: rgba(247, 175, 196, 0.90);
  --ssd-cream:       #FFFDFC;
  --ssd-text:        #2E2A2B;
  --ssd-sub:         #777173;
  --ssd-muted:       #B0AAB1;
  --ssd-success:     #7BAE96;
  --ssd-error:       #E07070;
  --ssd-border:      rgba(220, 210, 215, 0.70);

  /* Glass card */
  --ssd-card-bg:     rgba(255, 255, 255, 0.60);
  --ssd-card-border: rgba(255, 255, 255, 0.72);
  --ssd-card-shadow: 0 18px 50px rgba(100, 70, 80, 0.10),
                     inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --ssd-card-blur:   blur(22px);
  --ssd-card-radius: 26px;

  /* Input */
  --ssd-input-h:     54px;
  --ssd-input-r:     13px;

  /* Button */
  --ssd-btn-h:       56px;
  --ssd-btn-r:       14px;

  /* Progress */
  --ssd-step-done:   #F7AFC4;
  --ssd-step-active: #F7AFC4;
  --ssd-step-todo:   rgba(220, 210, 215, 0.80);
}

/* ─── 2. Page Shell (PC: fixed full-viewport) ───────────────── */
.ssd-auth-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  color: var(--ssd-text);
  /* 배경 없음 — .ssd-bg 가 절대 위치로 전 뷰포트를 덮음 */
  z-index: 1;
}

/* Background: 전체 뷰포트를 덮는 절대 레이어 (flex 흐름 밖) */
.ssd-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  pointer-events: none;
}

/* ─── 계절 파티클 오버레이 (seasonal_bg.inc.php) ─────────────────
   .ssd-bg 안에 삽입되는 <div class="ssd-season ssd-season--{spring|summer|autumn|winter}">
   각 <span class="ssd-season-particle" data-i="N">가 위에서 아래로 떨어지는 하나의 입자.
   순수 CSS 애니메이션(자바스크립트 없음), data-i로 시작 위치/지연/속도를 다양화한다. */
.ssd-season {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ssd-season-particle {
  position: absolute;
  top: -40px;
  left: 0;
  display: block;
  will-change: transform, opacity;
  animation-name: ssd-season-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* data-i(0~) 값으로 각 입자의 위치/시간/크기를 흩어놓는다.
   nth-of-type 21종 순환으로 최대 22개(겨울 기준)까지 각기 다른 값을 준다. */
.ssd-season-particle:nth-of-type(1)  { left: 3%;  width: 10px; height: 10px; animation-duration: 9s;  animation-delay: 0s; }
.ssd-season-particle:nth-of-type(2)  { left: 9%;  width: 7px;  height: 7px;  animation-duration: 11s; animation-delay: -2s; }
.ssd-season-particle:nth-of-type(3)  { left: 15%; width: 12px; height: 12px; animation-duration: 8s;  animation-delay: -5s; }
.ssd-season-particle:nth-of-type(4)  { left: 21%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: -1s; }
.ssd-season-particle:nth-of-type(5)  { left: 27%; width: 11px; height: 11px; animation-duration: 10s; animation-delay: -7s; }
.ssd-season-particle:nth-of-type(6)  { left: 33%; width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: -3s; }
.ssd-season-particle:nth-of-type(7)  { left: 39%; width: 9px;  height: 9px;  animation-duration: 9s;  animation-delay: -9s; }
.ssd-season-particle:nth-of-type(8)  { left: 45%; width: 13px; height: 13px; animation-duration: 11s; animation-delay: -4s; }
.ssd-season-particle:nth-of-type(9)  { left: 51%; width: 7px;  height: 7px;  animation-duration: 8s;  animation-delay: -6s; }
.ssd-season-particle:nth-of-type(10) { left: 57%; width: 10px; height: 10px; animation-duration: 14s; animation-delay: -8s; }
.ssd-season-particle:nth-of-type(11) { left: 63%; width: 8px;  height: 8px;  animation-duration: 10s; animation-delay: -2s; }
.ssd-season-particle:nth-of-type(12) { left: 69%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: -10s; }
.ssd-season-particle:nth-of-type(13) { left: 75%; width: 6px;  height: 6px;  animation-duration: 9s;  animation-delay: -1s; }
.ssd-season-particle:nth-of-type(14) { left: 81%; width: 11px; height: 11px; animation-duration: 13s; animation-delay: -5s; }
.ssd-season-particle:nth-of-type(15) { left: 87%; width: 9px;  height: 9px;  animation-duration: 8s;  animation-delay: -11s; }
.ssd-season-particle:nth-of-type(16) { left: 93%; width: 7px;  height: 7px;  animation-duration: 11s; animation-delay: -3s; }
.ssd-season-particle:nth-of-type(17) { left: 6%;  width: 10px; height: 10px; animation-duration: 10s; animation-delay: -6s; }
.ssd-season-particle:nth-of-type(18) { left: 18%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: -9s; }
.ssd-season-particle:nth-of-type(19) { left: 30%; width: 13px; height: 13px; animation-duration: 9s;  animation-delay: -4s; }
.ssd-season-particle:nth-of-type(20) { left: 42%; width: 7px;  height: 7px;  animation-duration: 14s; animation-delay: -7s; }
.ssd-season-particle:nth-of-type(21) { left: 54%; width: 9px;  height: 9px;  animation-duration: 10s; animation-delay: -12s; }
.ssd-season-particle:nth-of-type(22) { left: 66%; width: 6px;  height: 6px;  animation-duration: 11s; animation-delay: -0.5s; }

@keyframes ssd-season-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate3d(0, 110vh, 0) rotate(360deg); opacity: 0; }
}

/* 봄: 벚꽃잎 (연분홍 타원, 살랑거림) */
.ssd-season--spring .ssd-season-particle {
  background: radial-gradient(circle at 30% 30%, #ffe3ec 0%, #f8b8ce 60%, #f2a0bc 100%);
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  box-shadow: 0 0 4px rgba(247,175,196,.5);
  animation-name: ssd-season-fall, ssd-season-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes ssd-season-sway {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 26px; }
}

/* 여름: 반짝이는 물방울/빛 (위로 은은히 떠오름) */
.ssd-season--summer .ssd-season-particle {
  top: auto;
  bottom: -30px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #bfe8f5 55%, rgba(191,232,245,0) 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(191,232,245,.7);
  animation-name: ssd-season-rise;
  animation-timing-function: ease-in;
}
@keyframes ssd-season-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translate3d(0, -110vh, 0) scale(1); opacity: 0; }
}

/* 가을: 낙엽 (갈색/주황 계열, 크게 회전하며 떨어짐) */
.ssd-season--autumn .ssd-season-particle {
  background: linear-gradient(135deg, #e8a15c 0%, #c97b3c 60%, #a85d2a 100%);
  border-radius: 0 60% 0 60%;
  box-shadow: 0 1px 3px rgba(120,70,20,.35);
  animation-name: ssd-season-fall, ssd-season-tumble;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
}
@keyframes ssd-season-tumble {
  0%   { margin-left: 0; }
  25%  { margin-left: 18px; }
  50%  { margin-left: -10px; }
  75%  { margin-left: 14px; }
  100% { margin-left: 0; }
}

/* 겨울: 눈 (흰 원, 잔잔히 흩날리며 하강) */
.ssd-season--winter .ssd-season-particle {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eaf4ff 70%, rgba(234,244,255,0) 100%);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,.65);
  animation-name: ssd-season-fall, ssd-season-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
.ssd-season--winter .ssd-season-particle:nth-of-type(3n) { animation-duration: 16s, 5s; }
.ssd-season--winter .ssd-season-particle:nth-of-type(3n+1) { animation-duration: 12s, 6s; }

@media (max-width: 900px) {
  .ssd-season { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ssd-season-particle { animation: none !important; opacity: 0.6; }
}

/* Auth background images (img/background/) + gradient fallback.
 * 이미지 파일이 없거나 로드에 실패하면 아래 그라데이션이 그대로 표시됩니다.
 *  - login.png  : 로그인
 *  - join.png   : 회원가입 약관/계정/연락처
 *  - done.png   : 회원가입 완료
 *  - find.png   : 아이디·비밀번호 찾기/비밀번호 확인
 *  - member.png : 회원정보 수정
 */
.ssd-bg-login {
  background-image: url('./img/background/login.png'), linear-gradient(135deg, #fde8ef 0%, #f9c9d9 50%, #f7b6c8 100%);
}
.ssd-bg-join-terms {
  background-image: url('./img/background/join.png'), linear-gradient(135deg, #fde8ef 0%, #e8d5ea 50%, #d4c4e0 100%);
}
.ssd-bg-join-account {
  background-image: url('./img/background/join.png'), linear-gradient(135deg, #fbe9f0 0%, #f5c6d5 50%, #eec0cf 100%);
}
.ssd-bg-join-contact {
  background-image: url('./img/background/join.png'), linear-gradient(135deg, #fce8ee 0%, #f8cdd8 50%, #f2b8c8 100%);
}
.ssd-bg-join-done {
  background-image: url('./img/background/done.png'), linear-gradient(135deg, #e8f5f0 0%, #d4eae3 50%, #c0ddd5 100%);
}
.ssd-bg-find,
.ssd-bg-confirm {
  background-image: url('./img/background/find.png'), linear-gradient(135deg, #fde8ef 0%, #f9dae5 50%, #f5ccda 100%);
}
.ssd-bg-mypage {
  background-image: url('./img/background/member.png'), linear-gradient(135deg, #fde8ef 0%, #fad4e2 50%, #f5c2d3 100%);
}

/* 배경 효과: 사진은 그대로 두고, 햇살처럼 번지는 크림/핑크 광원만 은은하게 추가 */
.ssd-bg::before {
  content: '';
  position: absolute;
  inset: -7%;
  z-index: 0;
  background:
    radial-gradient(circle at 58% 18%, rgba(255,255,255,.48) 0 5%, rgba(255,255,255,.18) 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 76% 78%, rgba(247,175,196,.14) 0 6%, rgba(247,175,196,.055) 21%, rgba(247,175,196,0) 43%);
  filter: blur(10px);
  opacity: .9;
  pointer-events: none;
}

/* 오른쪽 카드 방향은 조금 더 밝게 정리해 카드와 사진의 경계를 부드럽게 연결 */
.ssd-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255,253,252,0) 34%, rgba(255,253,252,.06) 58%, rgba(255,253,252,.22) 100%);
  pointer-events: none;
}

/* 배경 감성 문구 */
.ssd-bg-copy {
  position: absolute;
  top: clamp(92px, 13vh, 145px);
  left: clamp(290px, 25vw, 500px);
  z-index: 2;
  width: min(260px, 22vw);
  color: rgba(74,59,64,.82);
  text-shadow: 0 2px 16px rgba(255,255,255,.96), 0 1px 2px rgba(255,255,255,.9);
}
.ssd-bg-copy strong {
  position: relative;
  display: block;
  margin: 0 0 10px;
  font-size: clamp(25px, 1.7vw, 31px);
  line-height: 1.28;
  font-weight: 750;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.ssd-bg-copy span {
  display: block;
  font-size: clamp(12px, .82vw, 14px);
  line-height: 1.7;
  font-weight: 500;
  color: rgba(84,69,74,.62);
  letter-spacing: -.012em;
  word-break: keep-all;
}
/* 정지형 반짝임 — 애니메이션 없이 아주 작게만 */
.ssd-bg-copy::before,
.ssd-bg-copy::after,
.ssd-bg-copy strong::after {
  position: absolute;
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1;
  color: rgba(247,175,196,.62);
  text-shadow: 0 1px 8px rgba(255,255,255,.92);
}
.ssd-bg-copy::before {
  content: '✦';
  left: -24px;
  top: -18px;
  font-size: 13px;
  opacity: .78;
}
.ssd-bg-copy::after {
  content: '✧';
  right: -8px;
  bottom: -18px;
  font-size: 12px;
  opacity: .55;
}
.ssd-bg-copy strong::after {
  content: '✦';
  right: -18px;
  top: -8px;
  font-size: 8px;
  opacity: .48;
}

/* Brand mark on bg: 하단은 문구를 빼고 로고만 작게 남긴다. */
.ssd-bg-brand {
  position: absolute;
  bottom: 38px;
  left: 48px;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: .74;
}
.ssd-bg-brand img {
  max-width: 148px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(255,255,255,.65));
}

/* ─── 3. Glass Card Column (balanced desktop placement) ─────── */
/*
 * 배경의 주요 오브젝트는 왼쪽에 모여 있으므로 카드는 오른쪽 여백을 사용하되
 * 화면 끝에 붙이지 않는다. 모든 인증 화면의 공통 축을 여기서 잡는다.
 */
.ssd-card-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(740px, 48vw);
  min-width: 500px;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px;             /* 상하 padding은 ::before/::after spacer로 대체 */
  overflow-y: auto;
  margin-left: clamp(440px, 43vw, 860px);
  margin-right: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 세로 중앙 정렬 + 상단 클리핑 방지 spacer (flex 1 trick) */
.ssd-card-wrap::before,
.ssd-card-wrap::after {
  content: '';
  flex: 1;
  min-height: 48px;   /* 최소 여백 보장 */
}

.ssd-card {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  box-shadow: 0 20px 54px rgba(105,72,82,0.12), inset 0 1px 0 rgba(255,255,255,0.74);
  padding: 44px 44px 40px;
}

/* ─── 4. Logo ───────────────────────────────────────────────── */
.ssd-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.ssd-logo a { display: inline-flex; }
.ssd-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* ─── 5. Title / Sub-title ──────────────────────────────────── */
.ssd-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ssd-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  text-align: center;
}
.ssd-subtitle {
  font-size: 13.5px;
  color: var(--ssd-sub);
  line-height: 1.65;
  text-align: center;
  margin-bottom: 28px;
}

/* ─── 6. Progress Bar ───────────────────────────────────────── */
.ssd-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}
.ssd-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
}
.ssd-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ssd-step-todo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  transition: background 0.25s;
  position: relative;
  z-index: 1;
}
.ssd-progress-step.done   .ssd-progress-dot,
.ssd-progress-step.is-done .ssd-progress-dot { background: var(--ssd-step-done); }
.ssd-progress-step.active .ssd-progress-dot,
.ssd-progress-step.is-active .ssd-progress-dot {
  background: var(--ssd-step-active);
  box-shadow: 0 0 0 5px rgba(247, 175, 196, 0.22);
}
.ssd-progress-step.active .ssd-progress-dot::after,
.ssd-progress-step.is-active .ssd-progress-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--ssd-pink);
}
.ssd-progress-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ssd-muted);
  white-space: nowrap;
}
.ssd-progress-step.done   .ssd-progress-label,
.ssd-progress-step.active .ssd-progress-label { color: var(--ssd-pink); }

.ssd-progress-line {
  flex: 1 1 0;
  height: 2px;
  background: var(--ssd-step-todo);
  margin-top: -20px; /* align with dot center */
  transition: background 0.25s;
}
.ssd-progress-line.done { background: var(--ssd-step-done); }

/* ─── 6-1. 회원정보 수정 4단계 위저드(edit_wizard.js) ─────────── */
.ssd-edit-progress {
  margin-bottom: 8px;
}
.ssd-edit-progress-label {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ssd-pink);
  margin: 0 0 22px;
}
.rb_member--ssd .ssd-edit-wizard-nav {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  margin-top: 24px !important;
}
.rb_member--ssd .ssd-edit-wizard-nav [data-edit-wizard-back] {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--ssd-border);
  color: var(--ssd-sub);
}
.rb_member--ssd .ssd-edit-wizard-nav [data-edit-wizard-next] {
  flex: 1 1 auto;
}

/* ─── 7. Form Layout ────────────────────────────────────────── */
.ssd-form { width: 100%; }

.ssd-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ssd-field:last-child { margin-bottom: 0; }

.ssd-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ssd-text);
  letter-spacing: -0.01em;
}
.ssd-label .ssd-required {
  color: var(--ssd-pink);
  margin-left: 3px;
}

/* ─── 8. Inputs ─────────────────────────────────────────────── */
.ssd-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ssd-input-h);
  padding: 0 16px;
  border: 1px solid var(--ssd-border);
  border-radius: var(--ssd-input-r);
  background: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 15px;
  color: var(--ssd-text);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}
.ssd-input::placeholder { color: var(--ssd-muted); }
.ssd-input:focus {
  border-color: var(--ssd-pink-border);
  box-shadow: 0 0 0 4px var(--ssd-pink-light);
  background: rgba(255, 255, 255, 0.96);
}
.ssd-input:disabled {
  background: rgba(245, 242, 243, 0.70);
  color: var(--ssd-muted);
  cursor: default;
}
.ssd-input.error {
  border-color: var(--ssd-error);
  box-shadow: 0 0 0 4px rgba(224, 112, 112, 0.10);
}

/* Textarea variant */
textarea.ssd-input {
  min-height: 100px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.6;
}

/* Input + button inline (e.g. 중복확인) */
.ssd-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ssd-input-row .ssd-input { flex: 1 1 0; }
.ssd-input-row .ssd-btn-sm { flex-shrink: 0; }

/* ─── 9. Buttons ─────────────────────────────────────────────── */
.ssd-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ssd-btn-h);
  background: var(--ssd-pink);
  color: #fff;
  border: none;
  border-radius: var(--ssd-btn-r);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s, transform 0.12s;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(247, 175, 196, 0.35);
}
.ssd-btn-primary:hover  { background: #f59bb5; }
.ssd-btn-primary:active { transform: scale(0.985); }
.ssd-btn-primary:disabled { opacity: 0.55; cursor: default; }

.ssd-btn-ghost {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ssd-btn-h);
  background: transparent;
  color: var(--ssd-text);
  border: 1.5px solid var(--ssd-border);
  border-radius: var(--ssd-btn-r);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-decoration: none;
  text-align: center;
  margin-top: 10px;
}
.ssd-btn-ghost:hover { border-color: var(--ssd-pink); background: rgba(247,175,196,0.06); }

/* Small button (inline) */
.ssd-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  background: rgba(247, 175, 196, 0.14);
  color: #c0607a;
  border: 1px solid rgba(247, 175, 196, 0.50);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}
.ssd-btn-sm:hover { background: rgba(247,175,196,0.26); }

/* Multi-button row */
.ssd-btn-group {
  display: flex;
  gap: 10px;
}
.ssd-btn-group > * { flex: 1 1 0; }

/* ─── 10. Divider with text ─────────────────────────────────── */
.ssd-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.ssd-divider::before,
.ssd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ssd-border);
}
.ssd-divider span {
  font-size: 12px;
  color: var(--ssd-muted);
  white-space: nowrap;
}

/* ─── 11. Social Login Wrapper ──────────────────────────────── */
.ssd-social { margin-top: 0; }
.ssd-social .social_login_btn_wrap,
.ssd-social .social_login_ul { width: 100% !important; }

/* ─── 12. Links Row ─────────────────────────────────────────── */
.ssd-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ssd-links a {
  font-size: 13px;
  color: var(--ssd-sub);
  text-decoration: none;
  padding: 4px 10px;
  transition: color 0.15s;
}
.ssd-links a:hover { color: var(--ssd-text); }
.ssd-links-sep {
  width: 1px;
  height: 12px;
  background: var(--ssd-border);
}
.ssd-links-strong {
  font-size: 13px;
  color: var(--ssd-pink) !important;
  font-weight: 700;
}

/* ─── 13. Auto-login / Remember ────────────────────────────── */
.ssd-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
}
.ssd-check-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--ssd-pink);
  cursor: pointer;
}
.ssd-check-row label {
  font-size: 13px;
  color: var(--ssd-sub);
  cursor: pointer;
  user-select: none;
}

/* ─── 14. Terms Agree Checkboxes ────────────────────────────── */
.ssd-terms-box {
  border: 1px solid var(--ssd-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  padding: 6px 4px;
  margin-bottom: 20px;
}
.ssd-terms-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.15s;
  cursor: pointer;
}
.ssd-terms-item:hover { background: rgba(247,175,196,0.07); }
.ssd-terms-item > input[type="checkbox"] {
  display: block !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--ssd-pink);
  flex: 0 0 18px !important;
  margin: 0;
  cursor: pointer;
}
.ssd-terms-item-text {
  flex: 1;
  font-size: 14px;
  color: var(--ssd-text);
  line-height: 1.45;
  user-select: none;
}
.ssd-terms-item-text .req { color: var(--ssd-pink); font-weight: 600; }
.ssd-terms-item-text .opt { color: var(--ssd-muted); font-size: 12px; }
.ssd-terms-view {
  font-size: 12px;
  color: var(--ssd-muted);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ssd-terms-view:hover { color: var(--ssd-sub); }
.ssd-terms-sep {
  height: 1px;
  background: var(--ssd-border);
  margin: 2px 14px;
  opacity: 0.6;
}
.ssd-terms-all {
  font-weight: 700;
  font-size: 14.5px;
  background: rgba(247,175,196,0.08);
  border-radius: 10px;
}
.ssd-terms-scroll {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--ssd-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--ssd-sub);
  line-height: 1.7;
  background: rgba(255,255,255,0.50);
  margin-top: 4px;
}

/* ─── 15. Message / Alert ───────────────────────────────────── */
.ssd-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 6px;
}
.ssd-msg-ok  { background: rgba(123,174,150,0.12); color: #3f8e6e; border: 1px solid rgba(123,174,150,0.30); }
.ssd-msg-err { background: rgba(224,112,112,0.10); color: #c05050; border: 1px solid rgba(224,112,112,0.25); }
.ssd-msg-info { background: rgba(247,175,196,0.12); color: #c0607a; border: 1px solid rgba(247,175,196,0.30); }

/* ─── 16. Field helper text ─────────────────────────────────── */
.ssd-hint {
  font-size: 12px;
  color: var(--ssd-muted);
  margin-top: 2px;
}
.ssd-hint.ok    { color: var(--ssd-success); }
.ssd-hint.error { color: var(--ssd-error); }

/* ─── 17. Section Subtitle (inside card) ────────────────────── */
.ssd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ssd-sub);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 24px 0 12px;
}

/* ─── 18. Spacer / Separator ────────────────────────────────── */
.ssd-space-sm  { height: 12px; }
.ssd-space-md  { height: 20px; }
.ssd-space-lg  { height: 32px; }

/* ─── 19. Result / Success Card ─────────────────────────────── */
.ssd-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(247,175,196,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 34px;
}
.ssd-result-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ssd-text);
  text-align: center;
  margin-bottom: 8px;
}

/* ─── 20. Multi-step sections ───────────────────────────────── */
.ssd-step-section { display: none; }
.ssd-step-section.active { display: block; }

/* ─── 21. Address / Extra field row ─────────────────────────── */
.ssd-addr-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ssd-addr-row .ssd-input { flex: 1; }

/* ─── 22. Hide Gnuboard outer chrome ────────────────────────── */
#header, #container_title, #rb_topvisual,
.breadcrumb, .location { display: none !important; }
.contents_wrap { padding: 0 !important; }
main, .sub { padding: 0 !important; background: transparent !important; }
body, html { background: var(--ssd-cream) !important; margin: 0; padding: 0; }
#container { padding: 0 !important; max-width: none !important; }
#contents  { padding: 0 !important; }

/* ─── 23. Captcha ───────────────────────────────────────────── */
.ssd-captcha { margin: 4px 0; }

/* ─── 24. Input with icon (left icon + optional eye button) ─── */
.ssd-field-icon {
  position: relative;
}
.ssd-field-icon .ssd-input-icon {
  position: absolute;
  left: 16px;
  bottom: 0;
  height: var(--ssd-input-h);
  display: flex;
  align-items: center;
  color: var(--ssd-muted);
  pointer-events: none;
  z-index: 1;
}
.ssd-field-icon .ssd-input {
  padding-left: 46px;
  padding-right: 46px;
}

/* Eye toggle button */
.ssd-eye-toggle {
  position: absolute;
  right: 14px;
  bottom: 0;
  height: var(--ssd-input-h);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--ssd-muted);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  z-index: 1;
}
.ssd-eye-toggle:hover { color: var(--ssd-sub); }

/* ─── 25. Login meta row (checkbox + find-links) ─────────────── */
.ssd-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 16px;
  gap: 8px;
}
.ssd-find-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.ssd-find-links a {
  font-size: 12.5px;
  color: var(--ssd-sub);
  text-decoration: none;
  padding: 2px 8px;
  transition: color 0.15s;
}
.ssd-find-links a:hover { color: var(--ssd-text); }
.ssd-links-sep {
  width: 1px;
  height: 11px;
  background: var(--ssd-border);
  display: inline-block;
}

/* ─── 26. Social notice text ─────────────────────────────────── */
.ssd-social-notice {
  font-size: 11.5px;
  color: var(--ssd-muted);
  text-align: center;
  line-height: 1.55;
  margin-top: 18px;
  padding: 0 4px;
}

/* ─── 27. Custom checkbox label ──────────────────────────────── */
.ssd-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ssd-sub);
}
.ssd-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ssd-checkmark {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ssd-border);
  border-radius: 5px;
  background: rgba(255,255,255,0.80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.ssd-check-label input[type="checkbox"]:checked ~ .ssd-checkmark {
  background: var(--ssd-pink);
  border-color: var(--ssd-pink);
}
.ssd-check-label input[type="checkbox"]:checked ~ .ssd-checkmark::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ─── 28. Inline button inside input row ─────────────────────── */
.ssd-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ssd-input-h);
  padding: 0 18px;
  background: rgba(247, 175, 196, 0.14);
  color: #c0607a;
  border: 1px solid rgba(247, 175, 196, 0.50);
  border-radius: var(--ssd-input-r);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.ssd-btn-inline:hover { background: rgba(247,175,196,0.26); }

/* ─── 29. Text-only button ───────────────────────────────────── */
.ssd-btn-text {
  background: none;
  border: none;
  color: var(--ssd-pink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: rgba(247,175,196,0.50);
  transition: color 0.15s;
}
.ssd-btn-text:hover { color: #f59bb5; }

/* ─── 30. Consent / Notification box ─────────────────────────── */
.ssd-consent-box {
  border: 1px solid var(--ssd-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  padding: 6px 4px;
  margin-top: 4px;
}
.ssd-consent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
}
.ssd-consent-row:hover { background: rgba(247,175,196,0.07); }
.ssd-consent-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--ssd-pink);
  flex-shrink: 0;
  cursor: pointer;
}
.ssd-consent-row-label {
  flex: 1;
  font-size: 13.5px;
  color: var(--ssd-text);
  line-height: 1.45;
  user-select: none;
}
.ssd-consent-sub {
  padding-left: 28px;
}
.ssd-consent-sub .ssd-consent-row {
  padding: 8px 14px;
}
.ssd-consent-sub .ssd-consent-row-label {
  font-size: 13px;
  color: var(--ssd-sub);
}

/* ─── 31. Image upload area ──────────────────────────────────── */
.ssd-img-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border: 2px dashed var(--ssd-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.50);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-align: center;
}
.ssd-img-upload:hover {
  border-color: var(--ssd-pink-border);
  background: var(--ssd-pink-light);
}
.ssd-img-upload-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ssd-pink-mid);
}
.ssd-img-upload-info {
  font-size: 12.5px;
  color: var(--ssd-muted);
  line-height: 1.5;
}

/* ─── 32. File input (hidden, triggered by label/button) ─────── */
.ssd-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  pointer-events: none;
}

/* ─── 33. Textarea ───────────────────────────────────────────── */
.ssd-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  padding: 14px 16px;
  border: 1px solid var(--ssd-border);
  border-radius: var(--ssd-input-r);
  background: rgba(255,255,255,0.82);
  font-family: inherit;
  font-size: 14px;
  color: var(--ssd-text);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}
.ssd-textarea::placeholder { color: var(--ssd-muted); }
.ssd-textarea:focus {
  border-color: var(--ssd-pink-border);
  box-shadow: 0 0 0 4px var(--ssd-pink-light);
  background: rgba(255,255,255,0.96);
}

/* ─── 34. Required badge ─────────────────────────────────────── */
.ssd-badge-req {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ssd-pink);
  background: rgba(247,175,196,0.15);
  border: 1px solid rgba(247,175,196,0.35);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ─── 35. Field success / error message ──────────────────────── */
.ssd-msg-field {
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ssd-msg-field.success { color: var(--ssd-success); }
.ssd-msg-field.error   { color: var(--ssd-error); }

/* ─── 36. Help text under input ─────────────────────────────── */
.ssd-help-text {
  font-size: 12px;
  color: var(--ssd-muted);
  line-height: 1.55;
  margin-top: 4px;
}

/* ─── 37. Wide card variant (register form) ──────────────────── */
.ssd-card--wide {
  max-width: 560px;
}

/* ─── 38. Full-form page variant (register multi-step) ───────── */
/* .ssd-bg 는 절대 위치 전체배경이므로 flex 조정 불필요 — card-wrap만 너비 조정 */
.ssd-auth-page--form {
  --ssd-input-h: 48px;
}
.ssd-auth-page--form .ssd-card-wrap {
  width: min(820px, 56vw);
  min-width: 620px;
  max-width: 820px;
  padding: 0 24px;
  align-items: center;
  margin-left: clamp(400px, 39vw, 760px);
  margin-right: auto;
}
/* 폼 페이지: 고정 높이 spacer (중앙 정렬보다 상단 기준이 낫다) */
.ssd-auth-page--form .ssd-card-wrap::before { flex: 0 0 44px; min-height: 44px; }
.ssd-auth-page--form .ssd-card-wrap::after  { flex: 0 0 60px; min-height: 60px; }
.ssd-auth-page--form .ssd-card {
  max-width: 680px;
  width: 100%;
  padding: 34px 38px 36px;
}
/* form 페이지에서의 --wide */
.ssd-auth-page--form .ssd-card--wide {
  max-width: 680px;
}

/* 작은 데스크톱에서는 문구 크기/폭만 줄여 카드와 겹치지 않게 유지 */
@media (min-width: 901px) and (max-width: 1380px) {
  .ssd-bg-copy {
    top: clamp(64px, 9vh, 84px);
    left: clamp(250px, 22vw, 310px);
    width: min(210px, 18vw);
  }
  .ssd-bg-copy strong {
    margin-bottom: 7px;
    font-size: clamp(21px, 1.7vw, 24px);
  }
  .ssd-bg-copy span {
    font-size: 11.5px;
    line-height: 1.55;
  }
  .ssd-bg-copy::before { left: -18px; top: -14px; }
  .ssd-bg-copy::after  { right: -5px; bottom: -14px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .ssd-bg-copy { display: none !important; }
}

/* ─── 39.5. Compact desktop / tablet landscape ──────────────── */
@media (min-width: 901px) and (max-width: 1180px) {
  .ssd-card-wrap {
    width: min(620px, 58vw);
    min-width: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: clamp(24px, 4vw, 48px);
    padding: 0 16px;
  }
  .ssd-auth-page--form .ssd-card-wrap {
    width: min(700px, 64vw);
    min-width: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: clamp(20px, 3vw, 36px);
    padding: 0 14px;
  }
  .ssd-card { padding: 38px 36px 34px; }
  .ssd-auth-page--form .ssd-card { padding: 32px 32px 34px; }
}

/* ─── 39.6. Auth tables / policy tables ─────────────────────── */
.ssd-auth-page .tbl_wrap {
  width: 100%;
  margin: 10px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(222,211,216,.76);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 8px 24px rgba(95,68,78,.045);
}
.ssd-auth-page table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  color: var(--ssd-text);
  font-size: 13px;
  line-height: 1.55;
}
.ssd-auth-page table caption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ssd-auth-page table th {
  padding: 12px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(222,211,216,.58) !important;
  border-bottom: 1px solid rgba(222,211,216,.66) !important;
  background: rgba(247,175,196,.10) !important;
  color: #625b5e !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-align: left !important;
  word-break: keep-all;
}
.ssd-auth-page table th:last-child { border-right: 0 !important; }
.ssd-auth-page table td {
  padding: 13px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(222,211,216,.45) !important;
  border-bottom: 1px solid rgba(222,211,216,.52) !important;
  background: rgba(255,255,255,.42) !important;
  color: var(--ssd-sub) !important;
  vertical-align: top !important;
  word-break: keep-all;
}
.ssd-auth-page table td:last-child { border-right: 0 !important; }
.ssd-auth-page table tbody tr:last-child td { border-bottom: 0 !important; }
.ssd-auth-page table tbody tr:hover td { background: rgba(247,175,196,.045) !important; }

/* ─── 40. Mobile (≤ 900 px) ────────────────────────────────── */
@media (max-width: 900px) {
  .ssd-auth-page {
    position: static;
    flex-direction: column;
    min-height: 100svh;
    background: var(--ssd-cream);
  }
  /* 모바일에서 배경 숨김 */
  .ssd-bg { display: none !important; }
  .ssd-auth-page .tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  .ssd-auth-page .tbl_wrap table { min-width: 500px; }
  .ssd-card-wrap {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding: 32px 16px 48px;
    background: var(--ssd-cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: stretch;
    flex-direction: column;
  }
  /* 모바일: spacer 제거 */
  .ssd-card-wrap::before,
  .ssd-card-wrap::after { display: none; }
  /* form 페이지 card-wrap 모바일 리셋 */
  .ssd-auth-page--form .ssd-card-wrap {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding: 24px 16px 48px;
    align-items: stretch;
  }
  .ssd-card {
    max-width: 100%;
    padding: 32px 22px 28px;
    background: rgba(255,255,255,0.90);
    border-radius: 20px;
  }
  .ssd-auth-page--form .ssd-card {
    max-width: 100%;
    padding: 28px 18px 28px;
  }
  .ssd-title  { font-size: 20px; }
}

@media (max-width: 480px) {
  .ssd-card  { padding: 28px 16px 24px; }
  .ssd-title { font-size: 18px; }
  .ssd-btn-group { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   rb.member 요소 오버라이드 — .rb_member--ssd 컨텍스트 전용
   JS 훅(클래스명) 유지, ssd 디자인 토큰으로 스타일만 교체
   ═══════════════════════════════════════════════════════════════ */

/* ─── A. rb_member 루트 초기화 ──────────────────────────────── */
.rb_member--ssd,
.rb_member--ssd .rb_login,
.rb_member--ssd .rb_reg,
.rb_member--ssd .rb_join { display: block; width: 100%; }

/* ─── B. rb_login_box 리스트 초기화 ─────────────────────────── */
.rb_member--ssd .rb_login_box {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rb_member--ssd .rb_login_box > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0; margin: 0;
  border: none; background: none;
}
.rb_member--ssd .rb_login_box > li[hidden] {
  display: none !important;
}
.ssd-auth-page--form .rb_member--ssd .rb_login_box {
  gap: 8px;
}

/* ─── C-1. 항목 그룹핑: 비슷한 항목끼리 묶어 스크롤 길이를 줄임 ──
   register_form.skin.php에서 각 그룹 첫 li에 class="ssd-group-start"와
   data-group-title 속성을 부여. 그룹: 계정 정보 / 연락처 / 주소 / 프로필 / 동의 및 수신설정 */
.ssd-auth-page--form .rb_member--ssd .rb_login_box > li.ssd-group-start {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(220,210,215,0.55);
}
.ssd-auth-page--form .rb_member--ssd .rb_login_box > li.ssd-group-start:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.ssd-auth-page--form .rb_member--ssd .rb_login_box > li.ssd-group-start::before {
  content: attr(data-group-title);
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ssd-pink);
}

/* ─── C. 라벨 (li > span, li > label) ───────────────────────── */
.rb_member--ssd .rb_login_box > li > span:first-child,
.rb_member--ssd .rb_login_box > li > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ssd-sub);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.rb_member--ssd .rb_login_box > li > span em { color: var(--ssd-error); font-style: normal; }

/* ─── D. 텍스트 입력 ─────────────────────────────────────────── */
.rb_member--ssd input[type="text"],
.rb_member--ssd input[type="password"],
.rb_member--ssd input[type="email"],
.rb_member--ssd input[type="tel"],
.rb_member--ssd input[type="number"],
.rb_member--ssd input.full_input,
.rb_member--ssd input.input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ssd-input-h);
  padding: 0 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--ssd-border);
  border-radius: var(--ssd-input-r);
  font-size: 15px;
  font-family: inherit;
  color: var(--ssd-text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.rb_member--ssd input[type="text"]:focus,
.rb_member--ssd input[type="password"]:focus,
.rb_member--ssd input[type="email"]:focus,
.rb_member--ssd input[type="tel"]:focus,
.rb_member--ssd input[type="number"]:focus,
.rb_member--ssd input.full_input:focus,
.rb_member--ssd input.input:focus {
  border-color: var(--ssd-pink);
  box-shadow: 0 0 0 3px var(--ssd-pink-light);
}
.rb_member--ssd input::placeholder { color: var(--ssd-muted); }

/* ─── E. Select ──────────────────────────────────────────────── */
.rb_member--ssd select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--ssd-border);
  border-radius: var(--ssd-input-r);
  font-size: 15px;
  font-family: inherit;
  color: var(--ssd-text);
  outline: none;
  cursor: pointer;
  appearance: auto;
}

/* ─── F. Textarea ────────────────────────────────────────────── */
.rb_member--ssd textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--ssd-border);
  border-radius: var(--ssd-input-r);
  font-size: 14px;
  font-family: inherit;
  color: var(--ssd-text);
  resize: vertical;
  outline: none;
  transition: border-color .2s;
  min-height: 100px;
}

/* ─── G. input_wrap (인라인 입력 + 버튼 행) ─────────────────── */
.rb_member--ssd .input_wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.rb_member--ssd .input_wrap input[type="text"],
.rb_member--ssd .input_wrap input[type="password"],
.rb_member--ssd .input_wrap input[type="email"],
.rb_member--ssd .input_wrap input[type="tel"],
.rb_member--ssd .input_wrap input.full_input,
.rb_member--ssd .input_wrap input.input { flex: 1 1 auto; min-width: 0; }

/* ─── H. btn_frmline (인라인 보조 버튼: 중복확인 등) ────────── */
.rb_member--ssd .btn_frmline {
  flex-shrink: 0;
  height: var(--ssd-input-h);
  padding: 0 18px;
  background: rgba(247,175,196,0.15);
  border: 1.5px solid var(--ssd-pink-border);
  border-radius: var(--ssd-input-r);
  color: #c46885;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rb_member--ssd .btn_frmline:hover { background: rgba(247,175,196,0.30); }

/* ─── I. btn_submit (기본 제출 버튼) ────────────────────────── */
.rb_member--ssd .btn_submit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--ssd-btn-h);
  background: var(--ssd-pink);
  border: none;
  border-radius: var(--ssd-btn-r);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(247,175,196,0.40);
  transition: opacity .2s, transform .15s;
}
.rb_member--ssd .btn_submit:hover  { opacity: .88; transform: translateY(-1px); }
.rb_member--ssd .btn_submit:active { transform: none; }
.rb_member--ssd .btn_submit:disabled { opacity: .5; cursor: default; transform: none; }

/* ─── J. btn_leave (탈퇴 danger 버튼) ───────────────────────── */
.rb_member--ssd .btn_leave {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  background: transparent;
  border: 1.5px solid rgba(224,112,112,0.40);
  border-radius: var(--ssd-btn-r);
  color: var(--ssd-error);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.rb_member--ssd .btn_leave:hover { background: rgba(224,112,112,0.08); }

/* ─── K. btn_confirm 래퍼 ────────────────────────────────────── */
.rb_member--ssd .btn_confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ─── L. alt_boxs (약관·수신 동의 영역) ─────────────────────── */
.rb_member--ssd .alt_boxs {
  background: rgba(255,255,255,0.50);
  border: 1px solid var(--ssd-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* alt_boxs 직계 ul: rb.member는 <ul>안에 바로 <input>,<label>,<button> 배치 */
.rb_member--ssd .alt_boxs > ul {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}
.rb_member--ssd .alt_boxs > li {
  list-style: none;
  margin: 0; padding: 0;
}
.rb_member--ssd .alt_boxs li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  list-style: none;
}

/* ── 체크박스: 절대로 숨겨지지 않도록 !important 전부 적용 ── */
.rb_member--ssd .ssd-native-check,
.rb_member--ssd .alt_boxs input[type="checkbox"],
.rb_member--ssd .alt_boxs > ul > input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 5px !important;
  accent-color: var(--ssd-pink) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  position: static !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* ── 수신설정 카드: 프로필 정보공개 카드와 동일한 톤으로 통일 ── */
.rb_member--ssd li:has(> span + .alt_boxs) > .alt_boxs,
.rb_member--ssd .alt_boxs {
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--ssd-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(100,70,80,.06);
}
.rb_member--ssd .alt_boxs .help_t_text,
.rb_member--ssd .alt_boxs [class*="date"],
.rb_member--ssd .alt_boxs small {
  display: block;
  margin: 2px 0 8px 26px;
  font-size: 11.5px;
  color: var(--ssd-muted);
}

/* ── SNS 로그인 관리 아이콘(sns-wrap-reg / sns-icon) ──
   기존 스타일이 없어 코어 기본 버튼 모양(각진 사각형)이 그대로 노출되던 것을
   둥근 모서리 + 은은한 그림자 + hover 효과로 정리 */
.rb_member--ssd .sns-wrap-reg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.rb_member--ssd .sns-wrap-reg a.sns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(100,70,80,.10);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.rb_member--ssd .sns-wrap-reg a.sns-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(100,70,80,.16);
}
.rb_member--ssd .sns-wrap-reg a.sns-icon img,
.rb_member--ssd .sns-wrap-reg a.sns-icon svg {
  width: 20px;
  height: 20px;
}
/* 각 브랜드 공식 컬러 (RGB) 그대로 적용 */
.rb_member--ssd .sns-wrap-reg a.sns-naver   { background-color: #03C75A !important; border: none !important; }
.rb_member--ssd .sns-wrap-reg a.sns-kakao   { background-color: #FEE500 !important; border: none !important; }
.rb_member--ssd .sns-wrap-reg a.sns-google  { background-color: #fff    !important; border: 1.5px solid #dadce0 !important; }
.rb_member--ssd .sns-wrap-reg a.sns-twitter,
.rb_member--ssd .sns-wrap-reg a.sns-x       { background-color: #000000 !important; border: none !important; }
.rb_member--ssd .sns-wrap-reg a.sns-payco   { background-color: #ED1D24 !important; border: none !important; }


/* 라벨 */
.rb_member--ssd .alt_boxs label,
.rb_member--ssd .alt_boxs span.label_txt {
  font-size: 14px;
  color: var(--ssd-text);
  cursor: pointer;
  flex: 1;
}

/* 내용 보기 버튼 */
.rb_member--ssd .js-open-consent,
.rb_member--ssd .alt_boxs a {
  font-size: 12px;
  color: var(--ssd-sub);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 하위 리스트 (자식 수신동의) ──
   rb.member 는 <div class="desc_sub"><ul class="desc_sub"><input>...<label>...</ul>
   형태로 <ul> 안에 직접 <input>, <label> 배치
*/
.rb_member--ssd .desc_sub,
.rb_member--ssd ul.desc_sub {
  list-style: none !important;
  margin: 0 !important;
  padding: 2px 0 2px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
/* ul.desc_sub 자체를 한 행(row)으로: <input> <label> 나란히 */
.rb_member--ssd ul.desc_sub {
  flex-direction: row !important;
  align-items: center !important;
  padding: 3px 0 3px 26px !important;
  gap: 8px !important;
}
.rb_member--ssd .desc_sub li {
  font-size: 13px;
  color: var(--ssd-sub);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
/* desc_sub 체크박스도 절대 숨겨지지 않게 */
.rb_member--ssd .desc_sub input[type="checkbox"],
.rb_member--ssd ul.desc_sub > input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  accent-color: var(--ssd-pink) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  position: static !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* ─── M. 중복확인 결과 메시지 ────────────────────────────────── */
.rb_member--ssd .result_message,
.rb_member--ssd [id$="_msg"] {
  font-size: 12px;
  margin-top: 5px;
  padding: 6px 10px;
  border-radius: 8px;
}
.rb_member--ssd .result_message.success,
.rb_member--ssd [id$="_msg"].success {
  background: rgba(123,174,150,0.12);
  color: var(--ssd-success);
}
.rb_member--ssd .result_message.fail,
.rb_member--ssd .result_message.error,
.rb_member--ssd [id$="_msg"].fail {
  background: rgba(224,112,112,0.10);
  color: var(--ssd-error);
}

/* ─── N. 프로필 이미지 업로드 영역 ──────────────────────────── */
.rb_member--ssd .img_area,
.rb_member--ssd .profile_img_wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rb_member--ssd .img_area img,
.rb_member--ssd .profile_img_wrap img {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ssd-border);
}
.rb_member--ssd .img_area a,
.rb_member--ssd .img_area button {
  font-size: 13px;
  color: var(--ssd-sub);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  font-family: inherit;
}

/* ─── O. help_text / notice_txt ─────────────────────────────── */
.rb_member--ssd .help_text,
.rb_member--ssd .notice_txt {
  display: block;
  font-size: 12px;
  color: var(--ssd-muted);
  margin-top: 4px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ─── O-1. 회원아이콘/회원이미지: 원형 아바타 + 카메라 버튼 오버레이 ──
   register_form.skin.php: <div class="mem_img_upload"><label class="mem_img_avatar">
   (이미지 + 카메라 아이콘) + 숨긴 input[file] + 안내문/삭제(mem_img_meta) 구조 */
.rb_member--ssd .mem_img_upload {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.rb_member--ssd .mem_img_avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  display: block;
}
/* 회원아이콘(mb_icon, 원본 22x22 권장)은 회원이미지(mb_img, 100x100)보다 작게 표시 */
.rb_member--ssd .mem_img_avatar--sm {
  width: 30px;
  height: 30px;
}
.rb_member--ssd .mem_img_avatar--sm .mem_img_cam {
  width: 16px;
  height: 16px;
  right: -3px;
  bottom: -3px;
}
.rb_member--ssd .mem_img_avatar--sm .mem_img_cam svg {
  width: 9px;
  height: 9px;
}
.rb_member--ssd .mem_img_avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ssd-border);
  display: block;
}
.rb_member--ssd .mem_img_cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ssd-pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ssd-cream);
  box-shadow: 0 2px 6px rgba(100,70,80,.18);
}
.rb_member--ssd .mem_img_file_hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.rb_member--ssd .mem_img_meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rb_member--ssd .mem_img_meta .help_text {
  margin-top: 0;
}
.rb_member--ssd .mem_img_del_wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rb_member--ssd .mem_img_del_wrap input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  border-radius: 4px !important;
  accent-color: var(--ssd-pink) !important;
}
.rb_member--ssd .mem_img_del_wrap label.inline {
  font-size: 12.5px;
  color: var(--ssd-sub);
  cursor: pointer;
}

/* ─── O-2. 동의/수신설정 아코디언 (컴팩트화) ──────────────────
   자바스크립트 없이 순수 CSS로 구현: 부모 체크박스가 체크(:checked)됐을 때만
   그 뒤에 오는 하위 항목(.desc_sub)들이 펼쳐진다. 껴진 상태에서는
   하위 항목이 의미가 없으므로("알림수신 끄면 개별알림도 무의미") 논리적으로도 자연스럽다.
   대상: "알림수신 동의"(parent-notification) → 댓글/답글/대댓글/쇼핑/구독/기타 알림
        "광고성 정보 수신 동의"(parent-promo) → 이메일/SMS 수신동의 */
.rb_member--ssd .alt_boxs .desc_sub,
.rb_member--ssd .alt_boxs > div.desc_sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.rb_member--ssd .alt_boxs input.parent-notification:checked ~ div.desc_sub,
.rb_member--ssd .alt_boxs ul:has(> input.parent-notification:checked) + div.desc_sub,
.rb_member--ssd .alt_boxs input.parent-promo:checked ~ ul.desc_sub,
.rb_member--ssd .alt_boxs ul:has(> input.parent-promo:checked) ~ ul.desc_sub {
  max-height: 400px;
  opacity: 1;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* 알림 하위 항목을 세로 목록 대신 가로 칩(chip)으로 배치해 길이를 대폭 줄임 */
.rb_member--ssd .alt_boxs > div.desc_sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 26px;
}
.rb_member--ssd .alt_boxs > div.desc_sub > ul.desc_sub {
  display: inline-flex !important;
  align-items: center;
  width: auto;
  gap: 5px !important;
  padding: 5px 10px 5px 8px !important;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ssd-border);
  border-radius: 999px;
}
.rb_member--ssd .alt_boxs > div.desc_sub > ul.desc_sub label {
  font-size: 12.5px;
  white-space: nowrap;
}
.rb_member--ssd .alt_boxs > div.desc_sub > ul.desc_sub input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}
/* 부모 체크박스 옆에 펼침 상태를 알려주는 화살표 아이콘 */
.rb_member--ssd .alt_boxs input.parent-notification,
.rb_member--ssd .alt_boxs input.parent-promo {
  position: relative;
}
.rb_member--ssd .alt_boxs ul:has(input.parent-notification),
.rb_member--ssd .alt_boxs ul:has(input.parent-promo) {
  position: relative;
}
.rb_member--ssd .alt_boxs ul:has(input.parent-notification)::after,
.rb_member--ssd .alt_boxs ul:has(input.parent-promo)::after {
  content: '▾';
  position: absolute;
  right: 68px;
  color: var(--ssd-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.rb_member--ssd .alt_boxs ul:has(input.parent-notification:checked)::after,
.rb_member--ssd .alt_boxs ul:has(input.parent-promo:checked)::after {
  transform: rotate(180deg);
  color: var(--ssd-pink);
}

/* ─── P. join_links ──────────────────────────────────────────── */
.rb_member--ssd .join_links {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 14px;
  font-size: 14px;
}
.rb_member--ssd .join_links a {
  color: var(--ssd-sub);
  text-decoration: none;
}
.rb_member--ssd .join_links a:hover { color: var(--ssd-text); }

/* ─── Q. SMS 인증 위젯 ───────────────────────────────────────── */
.rb_member--ssd .sms_cert_wrap { display: flex; flex-direction: column; gap: 10px; }
.rb_member--ssd .sms_cert_wrap .input_wrap { gap: 8px; }
.rb_member--ssd .sms_cert_wrap input[type="text"],
.rb_member--ssd .sms_cert_wrap input[type="tel"] { min-height: 48px; font-size: 14px; }
.rb_member--ssd .sms_cert_wrap button { height: 48px; padding: 0 14px; font-size: 13px; }

/* ─── R. 소셜 로그인 모던화 (실제 HTML: .sns-wrap > a.sns-icon.sns-*) ─── */
/*
 * 리빌더/그누보드 소셜 스킨은 #sns_login 자체에 흰 배경, 테두리, 패딩을 가질 수 있다.
 * 인증 페이지에서는 카드 배경을 그대로 사용하고 아이콘 행만 노출해야 하므로 상위 박스부터 리셋한다.
 */
.ssd-social {
  margin-top: 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 로그인 페이지는 그누보드 기본 #sns_login/.login-sns 마크업을 아예 사용하지 않는다. */
.ssd-social-icons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ssd-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background-color: var(--ssd-social-color, #fff);
  background-image: var(--ssd-social-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  box-shadow: 0 2px 8px rgba(100,70,80,0.10);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ssd-social-link.ssd-social-google {
  border: 1.5px solid #dadce0;
  background-size: 29px 29px;
}
.ssd-social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(100,70,80,0.18);
}
.ssd-social-logo {
  display: block;
  width: 100%;
  height: 100%;
}
.ssd-social #sns_login,
.ssd-social .login-sns {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* h3 제목 숨김 (아래 구분선 문구와 중복되므로 아이콘만 표시) */
.ssd-social #sns_login h3 { display: none !important; }

/* sns-wrap: 가로 나란히 아이콘 배열 */
.ssd-social .sns-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 각 소셜 버튼 → 46px 원형 아이콘 */
.ssd-social a.sns-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  min-width: 0 !important;
  flex: 0 0 46px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(100,70,80,0.10) !important;
  transition: transform .15s, box-shadow .15s !important;
  position: relative !important;
}
.ssd-social a.sns-icon:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(100,70,80,0.18) !important;
}

/* 텍스트 숨김, 아이콘만 */
.ssd-social a.sns-icon .txt { display: none !important; }
.ssd-social a.sns-icon .ico {
  position: absolute !important;
  inset: 0 !important;
  background-size: 26px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 브랜드 배경색 */
.ssd-social a.sns-naver   { background-color: #03C75A !important; border: none !important; }
.ssd-social a.sns-kakao   { background-color: #FEE500 !important; border: none !important; }
.ssd-social a.sns-google  { background-color: #fff    !important; border: 1.5px solid #dadce0 !important; }
.ssd-social a.sns-twitter { background-color: #1DA1F2 !important; border: none !important; }
.ssd-social a.sns-payco   { background-color: #ED1D24 !important; border: none !important; }
.ssd-social a.sns-facebook{ background-color: #1877F2 !important; border: none !important; }
.ssd-social a.sns-apple   { background-color: #000    !important; border: none !important; }

/* 회원가입 SNS: 기본 skin의 float/50% 규칙을 제거해 한 줄 정렬을 안정화 */
.ssd-social #sns_register {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ssd-social #sns_register > h2 {
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.ssd-social #sns_register > .sns-wrap {
  float: none !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}
.ssd-social #sns_register a.sns-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
}

/* 로그인 SNS도 공급자가 여러 개여도 한 줄을 유지 */
.ssd-social #sns_login .sns-wrap {
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* ─── S. rb_member--ssd 내 모바일 대응 ──────────────────────── */
@media (max-width: 900px) {
  .rb_member--ssd .rb_login_box { gap: 16px; }
  .rb_member--ssd .alt_boxs { padding: 12px 14px; }
  .rb_member--ssd .btn_submit { height: 52px; font-size: 15px; }
}

/* SNS 한 줄 모바일 안전영역 */
@media (max-width: 480px) {
  .ssd-social-icons { gap: 7px; }
  .ssd-social-link {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    background-size: 25px 25px;
  }
  .ssd-social-link.ssd-social-google { background-size: 24px 24px; }
  .ssd-social #sns_register > h2 { display: none !important; }
  .ssd-social #sns_register > .sns-wrap,
  .ssd-social #sns_login .sns-wrap { gap: 6px !important; }
  .ssd-social #sns_register a.sns-icon,
  .ssd-social #sns_login a.sns-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
}

/* ─── Auth wizard integration fix ─────────────────────────────── */
.ssd-register-wizard .rb_login_box > li[hidden] {
  display: none !important;
}

.rb_member--ssd .ssd-register-step-actions {
  margin-top: 8px;
}

.rb_member--ssd .ssd-register-back {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  background: rgba(255,255,255,.64);
  border: 1.5px solid var(--ssd-border);
  border-radius: var(--ssd-btn-r);
  color: var(--ssd-sub);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.rb_member--ssd .ssd-register-back:hover {
  border-color: var(--ssd-pink-border);
  background: rgba(247,175,196,.08);
  color: #c46885;
}

.ssd-auth-page--form #ssd_register_subtitle {
  margin-bottom: 22px;
}

@media (max-width: 480px) {
  .ssd-auth-page--form .ssd-progress-label { font-size: 10px; }
  .ssd-auth-page--form .ssd-progress-dot { width: 26px; height: 26px; }
  .ssd-auth-page--form .ssd-progress-line { margin-top: -19px; }
}


/* ─── T. 소소도담 인증 전용 소셜 행 ─────────────────────────────
 * 그누보드/리빌더의 #sns_login, .login-sns, .ssd-social 같은 공용 선택자와
 * 완전히 분리한다. 흰 박스/50% float 규칙이 다시 끼어들지 않도록 전용 클래스만 사용.
 */
.sodam-auth-social {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.sodam-auth-social-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sodam-auth-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  border: 0 !important;
  background-color: var(--ssd-social-color, #fff) !important;
  background-image: var(--ssd-social-logo) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 30px !important;
  box-shadow: 0 2px 8px rgba(100,70,80,.10) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.sodam-auth-social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(100,70,80,.18) !important;
}
.sodam-auth-social-link.sodam-auth-social-google {
  border: 1.5px solid #dadce0 !important;
  background-size: 29px 29px !important;
}
.sodam-auth-social-logo { display:none !important; }
@media (max-width:480px) {
  .sodam-auth-social-icons { gap: 7px !important; }
  .sodam-auth-social-link {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    background-size: 25px 25px !important;
  }
  .sodam-auth-social-link.sodam-auth-social-google { background-size: 24px 24px !important; }
}

/* ─── Auth checkbox ownership fix (2026-09-14) ─────────────────
 * GnuBoard's legacy skins draw a second checkbox with label > span.
 * sosododam.auth uses the native checkbox, so suppress only that legacy
 * decorative span to prevent duplicate/floating squares on every auth panel.
 */
.rb_member--ssd .ssd-native-check + label > span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.rb_member--ssd .ssd-native-check + label {
  position: static !important;
  float: none !important;
}


/* ─── Native consent alignment fix (2026-09-14) ────────────────── */
.rb_member--ssd .alt_boxs > ul {
  display:grid !important;
  grid-template-columns:18px minmax(0,1fr) auto !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:9px !important;
  row-gap:4px !important;
  width:100% !important;
  min-height:36px !important;
  margin:0 !important;
  padding:5px 0 !important;
}
.rb_member--ssd .alt_boxs > ul > .ssd-native-check {
  align-self:center !important;
  justify-self:start !important;
}
.rb_member--ssd .alt_boxs > ul > label {
  align-self:center !important;
  justify-self:stretch !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.45 !important;
  text-align:left !important;
}
.rb_member--ssd .alt_boxs > ul > .js-open-consent {
  align-self:center !important;
  justify-self:end !important;
  margin:0 !important;
}
.rb_member--ssd ul.desc_sub {
  display:grid !important;
  grid-template-columns:16px minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:8px !important;
  width:100% !important;
  padding:4px 0 4px 27px !important;
}
.rb_member--ssd ul.desc_sub > input[type="checkbox"] {
  align-self:center !important;
  justify-self:start !important;
}
.rb_member--ssd ul.desc_sub > label {
  align-self:center !important;
  justify-self:stretch !important;
  margin:0 !important;
  line-height:1.45 !important;
  text-align:left !important;
}


/* 2026-09-14: prevent legacy checkbox decoration from being generated beside native auth controls. */
.ssd-auth-page input.sdd-native-check + label::before,
.ssd-auth-page input.sdd-native-check + label::after,
.ssd-auth-page .sdd-check-label::before,
.ssd-auth-page .sdd-check-label::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ─── Subtle floral ambience (2026-09-14) ─────────────────────
 * 기존 배경 이미지는 그대로 두고, 문구/로고 주변에 아주 옅은 꽃잎만 더한다.
 * 애니메이션 없이 정적이며 카드/입력영역에는 겹치지 않는다.
 */
.ssd-bg-copy::before {
  content: '❀';
  left: -28px;
  top: -20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  color: rgba(247,175,196,.34);
  opacity: .52;
  filter: blur(.15px);
  transform: rotate(-13deg);
}
.ssd-bg-copy::after {
  content: '✿';
  right: -12px;
  bottom: -20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  opacity: .50;
  filter: blur(.2px);
  transform: rotate(16deg);
}
.ssd-bg-copy strong::after {
  content: '✦';
  right: -16px;
  top: -7px;
  font-size: 7px;
  color: rgba(247,175,196,.44);
  opacity: .58;
}
.ssd-bg-brand::before,
.ssd-bg-brand::after {
  position: absolute;
  pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  text-shadow: 0 1px 9px rgba(255,255,255,.75);
}
.ssd-bg-brand::before {
  content: '❀';
  left: 116px;
  bottom: 34px;
  font-size: 15px;
  color: rgba(247,175,196,.28);
  opacity: .44;
  transform: rotate(9deg);
}
.ssd-bg-brand::after {
  content: '✿';
  left: 143px;
  bottom: 18px;
  font-size: 10px;
  color: rgba(255,255,255,.62);
  opacity: .38;
  transform: rotate(-18deg);
}
@media (min-width: 901px) and (max-width: 1180px) {
  .ssd-bg-brand::before,
  .ssd-bg-brand::after { opacity: .24; }
}

/* ─── 2026-09-14: visible-but-subtle floral + compact policy tables ─── */
/* 꽃은 배경 문구 근처에서 '보이긴 하되' 장식처럼만 느껴지는 강도로 조정 */
.ssd-bg-copy::before {
  content: '✿' !important;
  left: -34px !important;
  top: -24px !important;
  font-size: 22px !important;
  color: rgba(238,140,171,.62) !important;
  opacity: .58 !important;
  filter: blur(.1px) !important;
  text-shadow: 0 2px 12px rgba(255,255,255,.96), 0 0 7px rgba(247,175,196,.28) !important;
  transform: rotate(-12deg) !important;
}
.ssd-bg-copy::after {
  content: '❀' !important;
  right: -16px !important;
  bottom: -22px !important;
  font-size: 16px !important;
  color: rgba(255,255,255,.92) !important;
  opacity: .56 !important;
  text-shadow: 0 1px 10px rgba(190,102,130,.18), 0 0 8px rgba(255,255,255,.92) !important;
  transform: rotate(15deg) !important;
}
.ssd-bg-brand::before {
  font-size: 18px !important;
  color: rgba(238,140,171,.50) !important;
  opacity: .50 !important;
}
.ssd-bg-brand::after {
  font-size: 12px !important;
  color: rgba(255,255,255,.88) !important;
  opacity: .46 !important;
}

/* 인증 화면 표는 문서형으로 커 보이지 않도록 공통 밀도 축소 */
.ssd-auth-page .tbl_wrap {
  margin: 8px 0 12px !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.ssd-auth-page table {
  font-size: 11px !important;
  line-height: 1.38 !important;
}
.ssd-auth-page table th {
  padding: 7px 9px !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}
.ssd-auth-page table td {
  padding: 7px 9px !important;
  font-size: 10.5px !important;
  line-height: 1.42 !important;
}
@media (max-width: 900px) {
  .ssd-auth-page .tbl_wrap table { min-width: 0 !important; table-layout: fixed !important; }
}

/* 글꼴 지원 여부와 상관없이 보이는 순수 CSS 꽃잎 1개 */
.ssd-bg-copy strong::before {
  content: '';
  position: absolute;
  left: -48px;
  top: 22px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: .46;
  background:
    radial-gradient(circle at 50% 12%, rgba(247,175,196,.62) 0 3px, transparent 3.8px),
    radial-gradient(circle at 88% 50%, rgba(247,175,196,.54) 0 3px, transparent 3.8px),
    radial-gradient(circle at 50% 88%, rgba(255,255,255,.78) 0 3px, transparent 3.8px),
    radial-gradient(circle at 12% 50%, rgba(247,175,196,.52) 0 3px, transparent 3.8px),
    radial-gradient(circle at 50% 50%, rgba(235,142,171,.72) 0 2.4px, transparent 3px);
  filter: drop-shadow(0 2px 5px rgba(255,255,255,.72));
  transform: rotate(11deg);
}

/* 정보공개 변경 제한 안내(ul > mb_open hidden input 형제 텍스트) 세로 찢김 보정
   실제 DOM: <ul><input type="hidden" name="mb_open">텍스트<br>텍스트</ul> */
.rb_member--ssd .alt_boxs > ul:has(> input[type="hidden"][name="mb_open"]) {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  color: var(--ssd-sub, #7a6f73) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.rb_member--ssd .alt_boxs > ul:has(> input[type="hidden"][name="mb_open"]) > input[type="hidden"] {
  display: none !important;
}

/* 2026-09-15: 이중 체크박스 렌더링 수정
   원인: rb.css/form.css(코어)가 전역으로 input[type="checkbox"] + label::before/::after에
   25x25px 가짜 체크박스를 그리는데, 이를 숨기려던 기존 규칙이 클래스명을
   "sdd-native-check"(오타)로 지정해 실제 클래스 "ssd-native-check"와 매칭되지 않았음.
   .desc_sub(하위 수신동의 항목: 광고성 이메일/SMS 등)에서 특히 두드러지게 보였음.
   social_register_member.skin.php 등 일부 파일은 "sdd-native-check"로 실제 오기되어
   있으므로 두 철자 모두 대상에 포함한다. */
.ssd-auth-page input.ssd-native-check + label::before,
.ssd-auth-page input.ssd-native-check + label::after,
.ssd-auth-page input.sdd-native-check + label::before,
.ssd-auth-page input.sdd-native-check + label::after,
.ssd-auth-page .ssd-check-label::before,
.ssd-auth-page .ssd-check-label::after,
.ssd-auth-page .sdd-check-label::before,
.ssd-auth-page .sdd-check-label::after {
  content: none !important;
  display: none !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ─── 41. Login method tabs (ID / Email / Phone) ───────────── */
.ssd-login-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 5px;
  border: 1px solid rgba(220, 210, 215, 0.72);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ssd-login-tab {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ssd-sub);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}

.ssd-login-tab:hover {
  color: var(--ssd-text);
  background: rgba(247, 175, 196, 0.08);
}

.ssd-login-tab:active {
  transform: scale(.985);
}

.ssd-login-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(247, 175, 196, 0.22);
}

.ssd-login-tab.is-active {
  background: rgba(247, 175, 196, 0.92);
  color: #fff;
  box-shadow: 0 4px 12px rgba(247, 175, 196, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ssd-login-type-icon[hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  .ssd-login-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
  }

  .ssd-login-tab {
    min-height: 40px;
    padding: 0 6px;
    font-size: 12.5px;
    border-radius: 9px;
  }
}