/*
 * 천명사주 입력 단계 — 상자 없는 한 줄 입력 (2026-10-23 사용자 결정)
 *
 * 화면 가득 배경 그림 위에, 상자 없이 질문 한 줄을 크게 왼쪽 아래에 두고 바로 아래에서 답한다.
 * 입력 영역이 화면 아래쪽 띠 하나라서 아이폰 키보드가 올라와도 질문과 입력칸만 키보드 위에 남는다
 * (키보드 맞춤은 umsh-keyboard-fit.js). 단계·동작(JS)은 그대로이고 모양만 바꾼다.
 * 입력 화면(.phone[data-scene="input"])에만 걸린다. 결과·로딩·랜딩 화면은 건드리지 않는다.
 */

/* 상자 없애기 */
.phone[data-scene="input"] .panel {
  max-height: none;
  overflow: visible;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

/* 아래쪽 글자가 그림 위에서도 읽히도록 화면 아래를 어둡게 */
.phone[data-scene="input"] .stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.86) 100%);
  pointer-events: none;
}

/* 이전 단계: 작은 글자 한 줄 */
.phone[data-scene="input"] .panel > .step-back {
  margin: 0 0 6px -6px;
  min-height: 36px;
  color: rgb(247 242 233 / 0.62);
  font-size: var(--umsh-text-sm, 13px);
}

/* 질문 한 줄을 크게 */
.phone[data-scene="input"] .panel h1 {
  margin: 0 0 18px;
  color: #fffaf0;
  font-size: var(--umsh-text-2xl, 24px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* 보조 설명은 화면에서 숨기고 화면 읽기 기능에는 남긴다 */
.phone[data-scene="input"] .panel > p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 입력칸: 테두리 없는 큰 한 줄 */
.phone[data-scene="input"] .field input,
.phone[data-scene="input"] .field textarea {
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fffaf0;
  font-size: var(--umsh-text-xl, 20px);
  font-weight: var(--umsh-weight-bold, 700);
  letter-spacing: -0.01em;
}

.phone[data-scene="input"] .field input::placeholder,
.phone[data-scene="input"] .field textarea::placeholder {
  color: rgb(247 242 233 / 0.34);
}

.phone[data-scene="input"] .field input:focus,
.phone[data-scene="input"] .field textarea:focus {
  outline: none;
  box-shadow: none;
}

/* 생년월일: 입력칸 오른쪽에 양력·음력 알약 */
.phone[data-scene="input"] .panel:has(#birth) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.phone[data-scene="input"] .panel:has(#birth) > :not(.segmented):not(.field-grid) { grid-column: 1 / -1; }
.phone[data-scene="input"] .panel:has(#birth) > .field-grid { grid-column: 1; grid-row: 3; }
.phone[data-scene="input"] .panel:has(#birth) > .segmented { grid-column: 2; grid-row: 3; }

.phone[data-scene="input"] .segmented {
  display: flex;
  gap: 6px;
  margin: 0;
}

.phone[data-scene="input"] .segmented button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgb(247 242 233 / 0.18);
  color: rgb(247 242 233 / 0.8);
  font-size: var(--umsh-text-md, 14px);
  font-weight: var(--umsh-weight-bold, 700);
}

.phone[data-scene="input"] .segmented button[aria-pressed="true"] {
  background: #fffaf0;
  color: #15100a;
}

/* 선택지: 동그라미 라디오 목록 */
.phone[data-scene="input"] .choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0;
}

.phone[data-scene="input"] .choices.two {
  grid-template-columns: repeat(2, max-content);
  column-gap: 28px;
}

.phone[data-scene="input"] .choice {
  position: relative;
  min-height: 48px;
  padding: 0 0 0 38px;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgb(247 242 233 / 0.86);
  font-size: var(--umsh-text-lg, 18px);
  font-weight: var(--umsh-weight-bold, 700);
  text-align: left;
  transform: none;
}

.phone[data-scene="input"] .choice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1.5px solid rgb(247 242 233 / 0.6);
  border-radius: 50%;
  box-sizing: border-box;
}

.phone[data-scene="input"] .choice.is-selected,
.phone[data-scene="input"] .choice[aria-pressed="true"] {
  background: none;
  color: #fffaf0;
  transform: none;
}

.phone[data-scene="input"] .choice.is-selected::before,
.phone[data-scene="input"] .choice[aria-pressed="true"]::before {
  border: 7px solid #e2b87b;
  background: #15100a;
}

/* 다음 · 몰라요 */
.phone[data-scene="input"] .actions {
  margin-top: 22px;
}

.phone[data-scene="input"] .next-cta {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: #fffaf0;
  color: #15100a;
  font-size: var(--umsh-text-base, 16px);
  font-weight: var(--umsh-weight-bold, 700);
}

.phone[data-scene="input"] .ghost {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: rgb(247 242 233 / 0.14);
  color: rgb(247 242 233 / 0.86);
}

/* 2026-10-23 요청: 성별 칩(남자·여자)도 생년월일의 양력·음력처럼 이름 칸 바로 옆에. */
.phone[data-scene="input"] .panel:has(#name) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.phone[data-scene="input"] .panel:has(#name) > :not(.gender-segmented):not(.field-grid) { grid-column: 1 / -1; }
.phone[data-scene="input"] .panel:has(#name) > .field-grid { grid-column: 1; grid-row: 3; margin-bottom: 0; }
.phone[data-scene="input"] .panel:has(#name) > .gender-segmented { grid-column: 2; grid-row: 3; margin-bottom: 0; }