/* RW-028: 사주 생년월일(시) 입력 화면 전용 스타일 - 채팅 말풍선/선택지/타이핑 등은
   reading.css 것을 그대로 재사용하고(팔레트 통일), 여기서는 입력 폼과 사주 결과 카드만 추가한다. */
.birth-form{
  max-width:340px; width:100%; margin:24px auto; padding:20px; border-radius:16px;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.saju-icon{ display:block; margin:0 auto 8px; }
.birth-intro{ margin:0 0 4px; font-size:.9rem; color:var(--muted); text-align:center; }
.birth-row{ display:flex; gap:10px; }
.birth-row label{
  flex:1; display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--muted);
}
.birth-row input{
  padding:10px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-family:inherit; font-size:.92rem;
}
.birth-row input:focus{ outline:2px solid var(--accent2); }
.birth-checkbox{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text); }
.birth-gender{
  display:flex; align-items:center; gap:16px; margin:0; padding:0; border:none;
  font-size:.82rem; color:var(--text);
}
.birth-gender legend{ font-size:.78rem; color:var(--muted); padding:0; margin:0 4px 0 0; }
.birth-gender label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.birth-submit{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:12px; font-size:.92rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.birth-submit:hover{ filter:brightness(1.08); }
.birth-submit:disabled{ opacity:.6; cursor:default; }
.birth-error{ color:var(--accent); font-weight:700; font-size:.82rem; margin:0; }
.birth-error.hidden{ display:none; }

/* 사주 계산 결과(년/월/일/시주 + 오행 분포) - AI 호출 없이 결정론적으로 산출되는 값이라
   챗봇 말풍선이 아닌 별도 요약 카드로 보여준다(RW-028 완료조건: 계산/요약 로직 1개). */
.saju-result{
  max-width:82%; align-self:flex-start; margin-left:34px; padding:14px 16px;
  border-radius:16px; background:var(--bubble-bot); border:1px solid var(--border);
  box-shadow:var(--shadow); font-size:.88rem;
}
/* RW-047 궁합: 본인/상대방 두 결과 카드를 구분하는 라벨 */
.saju-result .person-label{ font-weight:700; font-size:.82rem; color:var(--accent); margin-bottom:8px; }
.saju-pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px;
}
.saju-pillar{ text-align:center; }
.saju-pillar .p-label{ font-size:.68rem; color:var(--muted); }
.saju-pillar .p-value{ font-weight:700; font-size:.95rem; }
/* RW-048 토정비결: 상괘/중괘/하괘 3칸(사주 4기둥과 칸 수가 달라 열 수만 재정의) */
.saju-pillars.tojeong-pillars{ grid-template-columns:repeat(3,1fr); }
.tojeong-code{ margin-top:8px; font-size:.8rem; color:var(--muted); text-align:center; }
.saju-elements{ display:flex; flex-direction:column; gap:5px; }
.saju-el-row{ display:flex; align-items:center; gap:8px; font-size:.76rem; }
.saju-el-row .el-name{ width:1.4em; color:var(--muted); }
.saju-el-row .el-bar{
  flex:1; height:8px; border-radius:999px; background:var(--border); overflow:hidden;
}
.saju-el-row .el-bar > span{
  display:block; height:100%; background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.saju-el-row .el-count{ width:1.4em; text-align:right; color:var(--muted); }