/* ── 관계사주 페이지 전용 스타일 ─────────────────────
   style.css의 디자인 토큰(--cream/--apricot/--bean 등)과 헤더/푸터를 그대로 상속.
   이 파일은 위저드·리포트 UI만 추가한다. */

.saju-main {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px) clamp(16px, 5vw, 28px) 96px;
}

/* 인트로 */
.saju-intro { text-align: center; margin-bottom: clamp(24px, 5vw, 40px); }
.saju-intro .eyebrow {
  display: inline-block;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--apricot-text);
  background: var(--cream-2);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.saju-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.25; color: var(--bean);
}
.saju-intro h1 em { color: var(--apricot-text); font-style: normal; }
.saju-intro p { margin-top: 12px; color: color-mix(in srgb, var(--bean) 78%, transparent); }

/* 진행 단계 표시 */
.saju-steps {
  display: flex; justify-content: center; gap: 8px;
  margin: 0 auto clamp(20px, 4vw, 32px);
  list-style: none; padding: 0; flex-wrap: wrap;
}
.saju-steps li {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  color: color-mix(in srgb, var(--bean) 45%, transparent);
}
.saju-steps li .dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-2); color: var(--bean);
  font-size: .78rem; font-weight: 700;
  transition: background .25s, color .25s;
}
.saju-steps li.on { color: var(--bean); }
.saju-steps li.on .dot { background: var(--apricot); color: var(--white); }
.saju-steps li.done .dot { background: var(--mugwort); color: var(--white); }
.saju-steps li + li::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--bean) 12%, transparent);
  margin-right: 8px;
}

/* 카드 공통 (스텝 패널) */
.saju-panel {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--bean) 8%, transparent);
  border-radius: var(--squish-a);
  padding: clamp(20px, 4vw, 34px);
  box-shadow: 0 8px 30px rgba(74, 52, 42, .05);
}
.saju-panel[hidden] { display: none; }
.saju-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.55rem);
  color: var(--bean); margin-bottom: 6px;
}
.saju-panel .panel-sub { color: color-mix(in srgb, var(--bean) 68%, transparent); margin-bottom: 22px; font-size: .95rem; }

/* 관계유형 선택 */
.rel-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .rel-choices { grid-template-columns: 1fr; } }
.rel-card {
  text-align: left; cursor: pointer;
  background: var(--cream); border: 2px solid transparent;
  border-radius: var(--squish-sm); padding: 20px 18px;
  transition: border-color .2s, transform .2s var(--spring), background .2s;
  display: flex; flex-direction: column; gap: 8px;
  font: inherit; color: inherit;
}
.rel-card:hover { transform: translateY(-3px); background: var(--white); border-color: color-mix(in srgb, var(--apricot) 55%, transparent); }
.rel-card.sel { border-color: var(--apricot); background: var(--white); }
.rel-card .rel-emoji { font-size: 1.9rem; }
.rel-card .rel-ico { width: 46px; height: 46px; }
.rel-card h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--bean); }
.rel-card p { font-size: .88rem; color: color-mix(in srgb, var(--bean) 68%, transparent); line-height: 1.5; }

/* 입력 폼 */
.person-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .person-forms { grid-template-columns: 1fr; } }
.person-form {
  background: var(--cream); border-radius: var(--squish-sm);
  padding: 18px 16px;
  border: 1px solid color-mix(in srgb, var(--bean) 7%, transparent);
}
.person-form legend, .person-form .pf-title {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--bean);
  margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
.pf-row { margin-bottom: 12px; }
.pf-row label { display: block; font-size: .82rem; font-weight: 600; color: var(--bean); margin-bottom: 5px; }
.pf-row .hint { font-weight: 400; color: color-mix(in srgb, var(--bean) 55%, transparent); font-size: .76rem; }
.pf-grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.saju-panel input[type="number"],
.saju-panel input[type="text"],
.saju-panel select {
  width: 100%; font: inherit; font-size: .95rem;
  padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--bean) 14%, transparent);
  background: var(--white); color: var(--bean);
}
.saju-panel input:focus, .saju-panel select:focus {
  outline: none; border-color: var(--apricot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apricot) 22%, transparent);
}
.gender-toggle { display: flex; gap: 8px; }
.gender-toggle label {
  flex: 1; text-align: center; cursor: pointer;
  padding: 9px 0; border-radius: 12px; font-size: .9rem; font-weight: 600;
  background: var(--white); border: 1.5px solid color-mix(in srgb, var(--bean) 14%, transparent);
  color: color-mix(in srgb, var(--bean) 70%, transparent); margin: 0;
}
.gender-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.gender-toggle input:checked + span,
.gender-toggle label:has(input:checked) { }
.gender-toggle label.on { background: var(--apricot); border-color: var(--apricot); color: var(--white); }

.form-err {
  color: #B4392A; font-size: .85rem; font-weight: 600;
  margin-top: 4px; min-height: 1.1em;
}

/* 버튼 행 */
.saju-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.saju-actions .btn { flex: 0 0 auto; }
.saju-actions .btn-back { margin-right: auto; }

/* 로딩 */
.saju-loading { text-align: center; padding: 60px 20px; }
.loading-bear {
  width: 84px; height: 84px; margin: 0 auto 20px;
  animation: bear-squish 1.4s var(--spring) infinite;
}
@keyframes bear-squish {
  0%,100% { transform: scale(1,1); }
  50% { transform: scale(1.08,.9); }
}
.saju-loading p { font-family: var(--font-display); font-size: 1.15rem; color: var(--bean); }
.saju-loading .load-sub { font-family: var(--font-body); font-size: .9rem; color: color-mix(in srgb, var(--bean) 60%, transparent); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .loading-bear { animation: none; } }

/* ── 리포트 ── */
.saju-report[hidden] { display: none; }
.report-head { text-align: center; margin-bottom: 8px; }
.report-head .demo-flag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  color: #8A5A1E; background: #FBE9C8; padding: 3px 12px; border-radius: 999px; margin-bottom: 10px;
}
.report-head h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--bean); line-height: 1.3; }
.report-people {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 30px;
}
.person-chip {
  background: var(--cream-2); border-radius: 999px;
  padding: 7px 16px; font-size: .85rem; font-weight: 600; color: var(--bean);
}
.person-chip b { color: var(--apricot-text); }

/* 각도 카드 */
.angle-card {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--bean) 9%, transparent);
  border-radius: var(--squish-b);
  padding: clamp(20px, 3.5vw, 30px);
  margin-bottom: 20px;
  box-shadow: 0 6px 24px rgba(74, 52, 42, .05);
}
.angle-card .angle-no {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; color: var(--apricot-text);
  margin-bottom: 8px;
}
.angle-card .angle-no .num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--apricot); color: var(--white);
  display: grid; place-items: center; font-size: .82rem;
}
.angle-card h3 { font-family: var(--font-display); font-size: 1.28rem; color: var(--bean); margin-bottom: 12px; }
.angle-summary { color: var(--bean); line-height: 1.72; font-size: 1rem; }

/* 상세(유료) 잠금 영역 */
.angle-detail {
  margin-top: 18px; position: relative;
  border-top: 1px dashed color-mix(in srgb, var(--bean) 18%, transparent);
  padding-top: 18px;
}
.detail-label {
  font-size: .8rem; font-weight: 700; color: var(--apricot-text);
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.detail-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.detail-points li {
  position: relative; padding-left: 22px;
  font-size: .94rem; color: color-mix(in srgb, var(--bean) 82%, transparent); line-height: 1.6;
}
.detail-points li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--mugwort);
}
/* 잠금 상태: 미리보기 흐림 + 오버레이 */
.angle-detail.locked .detail-points { filter: blur(4px); user-select: none; pointer-events: none; opacity: .85; }
.detail-lock {
  margin-top: 16px; text-align: center;
  background: var(--cream); border-radius: var(--squish-sm);
  padding: 18px 16px;
}
.detail-lock p { font-size: .9rem; color: var(--bean); margin-bottom: 12px; }
.detail-lock p b { color: var(--apricot-text); }
.cross-sell {
  margin-top: 14px; font-size: .88rem; color: var(--apricot-text); font-weight: 600;
  background: color-mix(in srgb, var(--mugwort) 16%, transparent);
  padding: 10px 14px; border-radius: 12px;
}

.report-oneline {
  text-align: center; font-family: var(--font-display);
  font-size: 1.15rem; color: var(--bean); line-height: 1.5;
  background: var(--cream-2); border-radius: var(--squish-a);
  padding: 24px 20px; margin: 8px 0 26px;
}
.report-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 버튼 사이즈 보정 (홈 style.css btn 상속) */
.btn-sm { padding: 8px 18px; font-size: .9rem; }

/* 데모 안내 배너 */
.demo-banner {
  background: #FBF3E2; border: 1px solid #F0D9A8;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 22px;
  font-size: .86rem; color: #7A5A22; line-height: 1.55;
}
.demo-banner b { color: #6A4A15; }

/* 개인정보 고지 (STEP2 제출 전) */
.privacy-note {
  margin: 4px 0 20px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--mugwort) 12%, var(--white));
  font-size: .82rem; line-height: 1.7;
  color: color-mix(in srgb, var(--bean) 78%, transparent);
}
.privacy-note b { color: var(--bean); }