/* timeInput.css — 태어난 시각 입력 한 벌 (2026-10-13)
   ★★ 세 화면(랜딩 · 커플 · 관계)이 같은 모양을 쓴다. 화면마다 다시 그리지 않는다.
   ★ 커플 화면의 종전 모양(.ymd · .unit · .hint)을 그대로 옮겼다 — 보이는 것이 안 바뀌게. */
.mt-time { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
/* ★★★ 이름을 «세 번» 적어 세기를 맞춘다 — 화면마다 제 입력칸 규칙이 더 세서
   시/분 칸이 화면마다 달랐다(2026-10-13 실측: 높이 48 · 52 · 54.8px · 둥글기 10 · 12px).
   ★★ 맞서는 규칙이 둘 다 «클래스 셋 + 요소 하나»다 —
     랜딩 `.field-panel input:not([type=radio]):not([type=checkbox])`
     관계 `.rel-page .rel-field input:not([type=checkbox])`
   세기가 같으면 «나중에 실린 쪽»이 이긴다. timeInput.css 는 두 화면 모두에서 나중이다.
   ★ 범위는 .mt-time 안이다. 그 밖의 입력칸은 그 화면 것 그대로 둔다. */
.mt-time.mt-time.mt-time input {
  width: 72px; min-height: 48px; height: auto; padding: 12px; text-align: center;
  border: 1px solid var(--line, #ddd); border-radius: 10px;
  background: var(--surface, #fffefd); color: inherit;
  font: inherit; font-size: 17px;
  /* ★★ 줄높이를 못박는다 — 안 그러면 그 화면 줄높이를 물려받아 칸 «높이»가 화면마다 달라진다
     (실측: 커플 48px · 랜딩 54.0 · 관계 56.6). 칸의 높이는 부품이 정한다. */
  line-height: 1.2;
}
.mt-unit { font-size: 15px; line-height: 1.2; color: var(--muted, #777); flex: none; }
.mt-hint { font-size: 13px; line-height: 1.8; color: var(--muted, #777); margin: 10px 0 0; }
/* ★ 잘못 적었을 때 — 그 칸 «바로 아래»다. 제출을 기다리지 않는다 */
.mt-err { font-size: 14px; line-height: 1.7; color: #8c2f2f; margin: 8px 0 0; }

/* ★★★ 2026-10-13 N17 — 갈래 선택지의 «모양»도 이 부품이 쥔다.
   ★ 왜 — 부품은 세 화면에 같은 글자를 냈는데, 그 모양을 그리는 규칙이
     index.html(커플) «안쪽 <style>»에만 있었다. 랜딩·관계에서는 날것 라디오로 나왔다
     (2026-10-13 운영 실측 · 배포된 뒤에 봤다).
   ★★ 범위를 .mt-opts «안»으로 좁힌다 — .options · .option 은 흔한 이름이고,
     커플 마법사(app.js)가 제 것으로 쓰고 있다. 그쪽은 건드리지 않는다.
     커플 index.html 의 종전 규칙도 지우지 않았다. 값이 같아 겹쳐도 보이는 것이 안 바뀐다.
   ★ 값은 index.html 에서 «글자 그대로» 옮겼다. 다만 그 화면에만 있던 두 색은
     받침값을 함께 적는다(--surface · --blue-soft 는 랜딩·관계에 없다). */
.mt-opts { display: grid; gap: 10px; }
.mt-opts.seg-2 { grid-template-columns: 1fr 1fr; }
.mt-opts .option {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid var(--line, #e3deda); border-radius: 12px;
  background: var(--surface, #fffefd);
  font-size: 16px; line-height: 1.65; cursor: pointer;
}
.mt-opts .option:has(input:checked) { background: var(--blue-soft, #edf5fa); border-color: #98b5c9; }
/* ★★★ 이름을 두 번 적어 «세기»를 맞춘다 — 관계 화면의
   `.rel-page .rel-field input:not([type=checkbox])` 가 우리 라디오까지 잡아
   width:100% · min-height:52px 로 부풀렸다(2026-10-13 실측 · 글자가 세로로 흘렀다).
   ★★ 맞서는 규칙과 세기가 «같아지고», 같으면 나중에 실린 쪽이 이긴다 —
     timeInput.css 는 세 화면 모두에서 나중이다(위 .mt-time 주석과 같은 셈).
   ★ 범위는 그대로 .mt-opts 안이다. */
.mt-opts.mt-opts .option input {
  width: 18px; height: 18px; min-height: 0; flex: none;
  padding: 0; border: 0; border-radius: 0; background: none; accent-color: #668ba6;
}