/* ===== v1.9.116 · Layer1 진입 화면 (SPEC-SAJU-PROTO-V19116-001) =====
   설계 시안 v1.9.116 의 Layer1 규칙 가운데 화면에 효과가 남는 것만 옮긴다. 시안 블록 대응표:
   - v1990-layer1-sequential-questions → 아래 「한 문항씩」 (보이는 질문 하나·교차 전환·움직임 줄이기).
     배지 attr(data-step)·추가 질문 영역 간격 14px/16px 은 21-v1989-conversion.css 의 그 규칙을 그 자리에서 고쳤다.
   - cc106-clean-hero 의 질문 머리 제목 글꼴 → 21-v1989-conversion.css 의 머리 제목 규칙을 그 자리에서 고쳤다.
   - v1993-l1-only → 아래 「이전 질문 버튼」. 높이 42px → 44px(터치 높이), 글자색은 시안 값이 눌림 바탕 #EAF3F1
     위에서 4.30 이라 R-D7(같은 색조에서 최소한으로 진하게, 97%)로 #527471(눌림 4.54 · 흰 바탕 5.13)이다.
   - 초점: 질문이 바뀌면 app.js 가 새 질문 제목에 초점을 준다. 마우스 이용자에게 테두리가 번쩍이지 않게
     :focus:not(:focus-visible) 만 끄고, 키보드 이용자의 :focus-visible 표시는 남긴다(plan.md P2).
   - cc111-approved-portrait·cc112-hero-final-tune → 아래 「상단 그림」. 새 그림은 제목·부제를 그림 안에 담고 있어
     머리 글을 따로 두지 않는다. 시안의 l1-editable-hero 구조 대신 라이브 .l1-house-hero > img 를 그대로 쓰고,
     안내 줄 띠를 위해 두었던 아래 여백·음수 여백·아래 모서리를 0 으로 해 기본 정보 카드에 바로 붙인다.
     그림 비율(1149/1369)은 <img> 의 width·height 가 정한다.
   - cc113-input-matches-questions → 아래 「기본 정보 카드」. 제목 규칙은 label 과 legend(생년월일·성별 fieldset) 둘 다에 건다.
     입력 칸 글자는 시안 15px 대신 라이브의 16px 를 둔다 — 16px 미만이면 iOS Safari 가 초점 때 화면을 확대한다(plan.md P4).
     시안 색 가운데 대비 4.5:1 미달은 R-D7(같은 색조에서 최소한으로 진하게)로 바꿨다:
     성별 버튼 글 #737E7D → #6A7473 · 성별 선택 바탕 #5C9993 → #4C7F7A · 안내 글 #84908F → #6E7877 · 자리표시 글 #84908F → #6A7372.
     입력 칸 초점 테두리는 글자가 아니라 비텍스트(3:1)라 브랜드 토큰 var(--cc-mint) 를 쓴다.
     바탕은 background-color 만 바꿔 select 의 다른 배경 속성은 건드리지 않는다.
   - 시안의 첫 화면 숨김 장치(인라인 style·script)는 옮기지 않는다(spec.md §D).
   보이고 숨기는 상태는 app.js 가 l1-q-active(보임)·l1-q-leaving(사라지는 중) 클래스로 단다. */

/* 한 문항씩 — 두 질문을 같은 격자 칸에 겹쳐 교차 전환한다. 칸을 나눠 쓰므로 전환 중 카드가 위아래로 튀지 않는다. */
#viewInput #adaptiveCommonList,
#viewInput #adaptiveExtraList{
  grid-template-columns:minmax(0,1fr);
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q{
  display:none!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-active,
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-leaving{
  display:block!important;
  grid-row:1;
  grid-column:1;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-active{
  animation:l1v19116QuestionIn .48s cubic-bezier(.22,1,.36,1) both;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-leaving{
  animation:l1v19116QuestionOut .42s cubic-bezier(.4,0,.2,1) both;
  pointer-events:none;
  z-index:1;
}
@keyframes l1v19116QuestionIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes l1v19116QuestionOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-active,
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q.l1-q-leaving{
    animation:none;
  }
}

/* 질문 제목 초점 — 프로그램이 주는 초점은 키보드 이용자에게만 보인다 */
#viewInput .adaptive-question-list .adaptive-q label:focus:not(:focus-visible){
  outline:none;
}
#viewInput .adaptive-question-list .adaptive-q label:focus-visible{
  outline:3px solid #315F5C;
  outline-offset:3px;
  border-radius:6px;
}
/* 터치로 답한 전환이 준 초점에는 테두리를 그리지 않는다(R3, SPEC-SAJU-L1-FOLLOWUP-001). 터치 경로가 합성 클릭을 막아
   브라우저가 이 초점을 키보드 초점으로 여기기 때문이다. 표시(l1-touch-focus)는 app.js 가 터치 답일 때만 달고,
   초점을 잃거나 키 입력이 오면 뗀다 — 표시 없는 위 :focus-visible 규칙(키보드 테두리)은 그대로다. */
#viewInput .adaptive-question-list .adaptive-q label.l1-touch-focus:focus-visible,
#viewInput .l1-complete-note.l1-touch-focus:focus-visible{
  outline:none;
}

/* 이전 질문 버튼 */
#viewInput .l1-question-back{
  display:block;
  position:relative;
  z-index:10;
  margin:12px 0 0;
  min-height:44px;
  padding:9px 14px;
  border:1px solid #DCE6E4;
  border-radius:12px;
  background:#FFFFFF;
  color:#527471;
  font-family:'Nanum Gothic',sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
}
#viewInput .l1-question-back.hidden{
  display:none!important;
}
#viewInput .l1-question-back:active{
  background:#EAF3F1;
}

/* 완료 안내 (M5, R4) — 답으로 완료되면 app.js 가 #runBtn 대신 이 안내에 초점을 준다. 옛 완료 상자(#adaptiveQuestionStatus)와
   같은 모양·색(#457974 / #EEF6F4 = 4.51)이다. 초점 테두리는 상자 밖(outline-offset)에 그려 흰 둘레 위에 놓인다 —
   상자 안 바탕에 그리면 대비가 떨어진다. 색은 질문 제목 초점과 같은 #315F5C(흰 바탕 7.9). 마우스 초점에는 그리지 않는다. */
#viewInput .l1-complete-note{
  margin:18px 0 12px;
  padding:12px 14px;
  border:1px solid #D6E7E4;
  border-radius:14px;
  background:#EEF6F4;
  color:#457974;
  font-size:13px;
  font-weight:900;
  line-height:1.5;
  text-align:center;
  /* 낱말 가운데서 줄을 바꾸지 않는다(SPEC-SAJU-L1-FOLLOWUP-001 REQ-004). 한 덩어리가 상자보다 길 때만 넘침 대비로 끊는다. */
  word-break:keep-all;
  overflow-wrap:anywhere;
}
#viewInput .l1-complete-note:focus:not(:focus-visible){
  outline:none;
}
#viewInput .l1-complete-note:focus-visible{
  outline:3px solid #315F5C;
  outline-offset:3px;
}
/* 입력 칸 재평가로 완료될 때의 낭독은 화면 읽기 전용이다(보이는 완료 글은 위 안내 하나).
   21-v1989-conversion.css 의 !important 여백·안쪽 여백·테두리를 이겨 1px 로 접는다. */
#viewInput #adaptiveQuestionStatus.quick-result.visually-hidden{
  margin:-1px!important;
  padding:0!important;
  border:0!important;
}

/* 상단 그림 — 안내 줄 띠가 없어 그림이 상자를 꽉 채우고, 아래 모서리 없이 기본 정보 카드에 틈 없이 붙는다(cc112) */
#viewInput .l1-house-hero{
  margin:0!important;
  padding:0!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  background:#FFFAF4!important;
  box-shadow:0 12px 30px rgba(54,78,78,.045)!important;
}

/* 기본 정보 카드 — 판별 질문 카드와 같은 모양(cc113) */
#viewInput .l1-paper-card.l1-basic-card{
  margin-top:0!important;
  border:1px solid #E2EAE9!important;
  border-top:0!important;
  border-radius:0 0 19px 19px!important;
  background:#FFFFFF!important;
  box-shadow:0 5px 16px rgba(57,78,77,.045)!important;
}
#viewInput .l1-basic-card::before,
#viewInput .l1-basic-card::after{
  display:none!important;
  content:none!important;
}
#viewInput .l1-basic-card .l1-field>label,
#viewInput .l1-basic-card .l1-fieldset>legend{
  font-family:'Nanum Gothic',sans-serif!important;
  color:#34403F!important;
  font-size:15.5px!important;
  font-weight:800!important;
  line-height:1.68!important;
  letter-spacing:-.1px!important;
}
#viewInput .l1-basic-card .l1-hint{
  color:#6E7877!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-weight:400!important;
}
#viewInput .l1-basic-card input,
#viewInput .l1-basic-card select{
  border:1px solid #E3EBEA!important;
  border-radius:15px!important;
  background-color:#F6F9F8!important;
  color:#34403F!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
#viewInput .l1-basic-card input::placeholder{
  color:#6A7372!important;
}
#viewInput .l1-basic-card input:focus,
#viewInput .l1-basic-card select:focus{
  border-color:var(--cc-mint)!important;
  background-color:#FFFFFF!important;
  box-shadow:0 0 0 3px rgba(92,153,147,.14)!important;
}

/* 성별 — 두 칸 세그먼트. 판별 질문 세그먼트와 같은 확정 색이다 */
#viewInput .l1-basic-card #segGender{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  padding:4px!important;
  border:1px solid #E3EBEA!important;
  border-radius:15px!important;
  background:#F6F9F8!important;
}
#viewInput .l1-basic-card #segGender button{
  min-height:44px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#6A7473!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-size:12.5px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#viewInput .l1-basic-card #segGender button:hover{
  background:#FFFFFF!important;
  color:#53615F!important;
}
#viewInput .l1-basic-card #segGender button.on{
  background:#4C7F7A!important;
  color:#FFFFFF!important;
  box-shadow:0 4px 10px rgba(76,127,122,.17)!important;
}

@media (max-width:390px){
  #viewInput .l1-basic-card .l1-field>label,
  #viewInput .l1-basic-card .l1-fieldset>legend{
    font-size:15px!important;
    line-height:1.65!important;
  }
  #viewInput .l1-basic-card #segGender{
    gap:4px!important;
  }
  #viewInput .l1-basic-card #segGender button{
    font-size:12px!important;
  }
}