/* 한 화면 직접 입력. form.html에서 기존 스타일 뒤에 불러온다. */
.birth .birth-direct-person { min-width:0; padding:24px 20px; margin:16px 0; border:1px solid var(--line,#ddd4c5); border-radius:20px; background:var(--card,#fffdf7); }
.birth .birth-about > h3 { margin:20px 0 10px; font-size:18px; }
.birth .birth-about > .inline { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.birth .birth-about > .inline label { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; min-height:48px; border:1px solid var(--line,#ddd4c5); border-radius:12px; }
.birth .birth-about > .inline label:has(input:checked) { border-color:var(--accent,#8b6b28); background:var(--bg,#f7f3eb); }
.birth .birth-date-fields { display:block; }
.birth .birth-date-fields label { display:flex; flex-direction:column; gap:8px; margin:0; }
.birth .birth-date-fields input { box-sizing:border-box; width:100%; min-width:0; min-height:54px; padding:12px 16px; border:1px solid var(--line,#ddd4c5); border-radius:14px; background:var(--bg,#f7f3eb); color:var(--ink,#29251f); font:inherit; font-size:20px; }
.birth .birth-date-fields input::placeholder { color:var(--dim,#71695e); }
.birth .birth-time-fields { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.birth .birth-time-fields input { box-sizing:border-box; }
.birth .birth-time-picker > label.inline { display:flex; gap:8px; align-items:center; min-height:44px; margin:12px 0 0; }
.birth .birth-time-options { margin:16px 0; border-top:1px solid var(--line,#ddd4c5); padding-top:12px; }
.birth .birth-time-options summary { cursor:pointer; min-height:44px; line-height:1.6; padding:8px 0; }
.birth .birth-time-options .birth-time-bands { margin-top:12px; }
.birth .birth-time-direct { min-height:44px; padding:8px 12px; }
.birth .birth-direct-person input:focus-visible,.birth .birth-time-options summary:focus-visible { outline:3px solid var(--accent,#8b6b28); outline-offset:3px; }
.birth .birth-direct-person [hidden] { display:none !important; }
@media(max-width:360px) { .birth .birth-direct-person { padding:20px 14px; } }

.birth .birth-bubble-body { background:#eee5d0; }
.birth .birth-bubble h3 { color:var(--ink,#30291e); font-size:1.1rem; line-height:1.6; }
.birth .birth-bubble-who { color:#715836; }
.birth .birth-stage-prompt { margin:20px 0 12px; padding:12px 16px; border-left:3px solid #c6ac78; background:#fffaf0; color:#4b3b23; line-height:1.7; border-radius:0 12px 12px 0; }

/* 인물은 큰 그림 위, 질문은 아래에 배치한다. */
.birth .birth-bubble { flex-direction:column; align-items:stretch; gap:16px; }
.birth .birth-bubble img { width:100%; max-width:320px; height:auto; aspect-ratio:3/4; align-self:center; border-radius:18px; }

/* 입력 진행 표시줄(birth-progress.js) — JS 가 만들어 넣는다 */
.birth .birth-progress ol { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 8px; padding:0; list-style:none; font-size:.88rem; }
.birth .birth-progress li { display:flex; align-items:center; gap:6px; color:var(--dim,#71695e); transition:color .25s ease; }
.birth .birth-progress-n { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--line,#ddd4c5); font-size:.78rem; transition:background-color .25s ease,color .25s ease,border-color .25s ease; }
.birth .birth-progress li[data-state="done"] .birth-progress-n { background:var(--accent,#8b6b28); border-color:var(--accent,#8b6b28); color:var(--card,#fffdf7); }
.birth .birth-progress li[data-state="current"] { color:var(--ink,#29251f); font-weight:700; }
.birth .birth-progress li[data-state="current"] .birth-progress-n { border-color:var(--accent,#8b6b28); border-width:2px; color:var(--accent,#8b6b28); }
@media (prefers-reduced-motion:reduce) { .birth .birth-progress li,.birth .birth-progress-n { transition:none; } }