/**
 * signup-terms.css
 * 회원가입 Step 1 — 약관 동의 폼 디자인
 *
 * 적용 범위: /signup-terms/ (page-signup-terms.php)
 * 의존: widocs-signup-steps (중앙정렬된 스텝 인디케이터)
 *
 * mobile-first, 보조 breakpoint: 480 / 768 / 1024
 */

.widocs-signup-step {
  --st-brand: #1a73e8;
  --st-brand-dark: #1557b0;
  --st-brand-soft: #e8f0fe;
  --st-ink: #202124;
  --st-muted: #5f6368;
  --st-line: #e1e5ea;
  --st-line-strong: #dadce0;
  --st-bg-soft: #f8fafc;
  --st-radius: 12px;
  --st-radius-sm: 10px;
  --st-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
  --st-focus: 0 0 0 3px rgba(26, 115, 232, 0.18);

  width: 100%;
  color: var(--st-ink);
}

/* ── 헤더 ───────────────────────────────────────── */
.widocs-signup-step__header {
  margin-bottom: 24px;
  text-align: center;
}

.widocs-signup-step__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--st-ink);
}

.widocs-signup-step__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--st-muted);
  line-height: 1.5;
}

/* ── 에러 알림 ───────────────────────────────────── */
.widocs-signup-step__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef2f2;
  color: #a8071a;
  border: 1px solid #fecaca;
  padding: 12px 14px;
  border-radius: var(--st-radius-sm);
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── 폼 ─────────────────────────────────────────── */
.widocs-signup-step__form {
  margin: 0;
}

/* ── 회원 유형 선택 (일반회원 / 의사·전문가) ───────── */
.widocs-signup-type {
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}

.widocs-signup-type__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--st-ink);
}

.widocs-signup-type__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.widocs-signup-type__opt {
  display: block;
  cursor: pointer;
}

.widocs-signup-type__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.widocs-signup-type__card {
  display: block;
  padding: 14px 16px;
  border: 1.5px solid var(--st-line-strong);
  border-radius: var(--st-radius);
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.widocs-signup-type__opt:hover .widocs-signup-type__card {
  border-color: var(--st-brand);
}

.widocs-signup-type__radio:checked + .widocs-signup-type__card {
  border-color: var(--st-brand);
  background: var(--st-brand-soft);
}

.widocs-signup-type__radio:focus-visible + .widocs-signup-type__card {
  box-shadow: var(--st-focus);
}

.widocs-signup-type__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-ink);
}

.widocs-signup-type__desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--st-muted);
}

@media (min-width: 480px) {
  .widocs-signup-type__options {
    grid-template-columns: 1fr 1fr;
  }
}

/* 전체 동의 카드 */
.widocs-signup-step__all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--st-line-strong);
  border-radius: var(--st-radius);
  background: var(--st-bg-soft);
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.widocs-signup-step__all:hover {
  border-color: var(--st-brand);
  background: var(--st-brand-soft);
}

.widocs-signup-step__all:has(input:checked) {
  border-color: var(--st-brand);
  background: var(--st-brand-soft);
}

.widocs-signup-step__all-note {
  color: var(--st-muted);
  font-weight: 400;
  font-size: 13px;
  margin-left: 2px;
}

/* 약관 항목 리스트 */
.widocs-signup-step__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widocs-signup-step__item {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.widocs-signup-step__item:hover {
  border-color: #c2cad6;
}

.widocs-signup-step__item:has(input:checked) {
  border-color: var(--st-brand);
}

.widocs-signup-step__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.widocs-signup-step__label {
  flex: 1;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--st-ink);
}

.widocs-signup-step__label strong {
  font-weight: 600;
}

.widocs-signup-step__tag {
  color: var(--st-muted);
  font-weight: 500;
  font-size: 12.5px;
  margin-right: 2px;
}

.widocs-signup-step__tag--required {
  color: var(--st-brand);
}

.widocs-signup-step__version {
  color: var(--st-muted);
  font-size: 12px;
  margin-left: 6px;
  font-weight: 400;
}

/* 체크박스 공통 */
.widocs-signup-step input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--st-brand);
  cursor: pointer;
}

.widocs-signup-step input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--st-focus);
  border-radius: 4px;
}

/* 본문 보기 버튼 / 링크 */
.widocs-policy-toggle {
  background: transparent;
  border: 0;
  color: var(--st-brand);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.widocs-policy-toggle:hover {
  background: var(--st-brand-soft);
}

.widocs-signup-step__external {
  color: var(--st-brand);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.widocs-signup-step__external:hover {
  background: var(--st-brand-soft);
}

/* 약관 본문 */
.widocs-policy-body {
  display: none;
  padding: 16px 18px;
  max-height: 280px;
  overflow: auto;
  background: var(--st-bg-soft);
  border-top: 1px solid var(--st-line);
  font-size: 13.5px;
  line-height: 1.7;
  color: #3c4043;
}

.widocs-policy-body.is-open {
  display: block;
}

/* ── 액션 버튼 영역 ────────────────────────────── */
.widocs-signup-step__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.widocs-signup-step__cancel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--st-line-strong);
  border-radius: var(--st-radius-sm);
  color: var(--st-muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.widocs-signup-step__cancel:hover {
  border-color: var(--st-muted);
  color: var(--st-ink);
  background: var(--st-bg-soft);
}

.widocs-signup-step__submit {
  flex: 1;
  background: var(--st-brand);
  color: #fff;
  border: 0;
  padding: 14px 20px;
  border-radius: var(--st-radius-sm);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.widocs-signup-step__submit:hover {
  background: var(--st-brand-dark);
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35);
}

.widocs-signup-step__submit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.25);
}

.widocs-signup-step__submit:focus-visible,
.widocs-signup-step__cancel:focus-visible {
  outline: none;
  box-shadow: var(--st-focus);
}

/* ── 하단 안내 ─────────────────────────────────── */
.widocs-signup-step__note {
  color: var(--st-muted);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.6;
}

/* ── 모바일 (<480px) ───────────────────────────── */
@media (max-width: 479px) {
  .widocs-signup-step__title {
    font-size: 20px;
  }

  .widocs-signup-step__all {
    padding: 14px 14px;
    font-size: 14.5px;
  }

  .widocs-signup-step__row {
    padding: 12px 14px;
  }

  .widocs-signup-step__label {
    font-size: 14px;
  }

  .widocs-signup-step__actions {
    flex-direction: column-reverse;
  }

  .widocs-signup-step__cancel {
    width: 100%;
  }
}

/* ── 태블릿 이상 (≥768px) ──────────────────────── */
@media (min-width: 768px) {
  .widocs-signup-step__title {
    font-size: 24px;
  }

  .widocs-signup-step__subtitle {
    font-size: 15px;
  }
}

/* ── 감소 모션 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .widocs-signup-step *,
  .widocs-signup-step *::before,
  .widocs-signup-step *::after {
    transition: none !important;
  }
}