/* 반응형 보완·iOS 15 보조 — 2026-10-31 구조 정리로 index.html <style> 286~328줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 반응형 보완 ---- */
.hint-h{display:none}
body.h-mode .hint-v{display:none}
body.h-mode .hint-h{display:inline}

/* 폰(600px 미만): 바깥 여백을 줄여 입력 영역을 넓게 확보 */
@media (max-width:599px){
  .wrap{padding:12px 12px 20px}
  .fortune-card{padding:14px 12px 16px}
  /* 폰에서는 입력폼 카드가 라벨을 위로 올려 길어지므로, 1:1 감정 카드도 같은 높이가 되도록 대화창 최소 높이를 늘림 */
  .chat-window{min-height:290px}
}

/* ① 카드 안쪽 폭이 라벨+입력창(320px)보다 좁으면: 라벨을 입력창 위로 올리고 입력창은 가능한 폭만큼 사용 */
@container (max-width:330px){
  #fortune-form,#saju-form{width:234px}
  .field-row{flex-direction:column;align-items:stretch;gap:2px}
  .field-label{flex:none;width:auto;display:block}
  .field-input,.field-row:has(.gender-field) .field-input,.field-row:has(.choice-field) .field-input{width:100%;flex:none}
  .date-field-wrap{display:block;width:100%}
  .date-field,.input-box.time-select,.input-box.region-select{width:100%;max-width:100%}
  .field-note{padding-left:0}
}
/* iOS 15 보조 (2026-10-24 Ⓔ): @container·:has를 모르는 브라우저용 — 같은 규칙을 클래스로 (front-end.js "iOS 15 보조"가 붙임)
   .cq-narrow = 메뉴 카드 안쪽 폭 330px 이하 · .has-gender/.has-choice/.has-xf = 그 칸이 든 줄 · :where()로 감싸 우선순위는 원래 규칙과 같게 */
:where(.fortune-card.cq-narrow) #fortune-form,:where(.fortune-card.cq-narrow) #saju-form{width:234px}
:where(.fortune-card.cq-narrow) .field-row{flex-direction:column;align-items:stretch;gap:2px}
:where(.fortune-card.cq-narrow) .field-label{flex:none;width:auto;display:block}
:where(.fortune-card.cq-narrow) .field-input,:where(.fortune-card.cq-narrow) .field-row.has-gender .field-input,:where(.fortune-card.cq-narrow) .field-row.has-choice .field-input{width:100%;flex:none}
:where(.fortune-card.cq-narrow) .date-field-wrap{display:block;width:100%}
:where(.fortune-card.cq-narrow) .date-field,:where(.fortune-card.cq-narrow) .input-box.time-select,:where(.fortune-card.cq-narrow) .input-box.region-select{width:100%;max-width:100%}
:where(.fortune-card.cq-narrow) .field-note{padding-left:0}

/* ③④ 터치 기기(폰·태블릿) */
@media (pointer:coarse){
  /* 아이폰 사파리는 16px 미만 입력칸을 누르면 화면을 자동 확대하므로 입력 글자를 16px로 (나란한 표시 글자도 함께 맞춤) */
  .date-input,.date-sep,.time-select-label,.region-select .region-select-input,.chat-input-row input,.chat-input-row textarea{font-size:16px}
  /* 달력·시간·지역 목록의 세로 높이를 늘려 손가락으로 누르기 쉽게 (세 목록 높이는 계속 동일) */
  .cal-popup,.time-select-list,.region-popup,.info-bubble{height:252px}
  .cal-day{font-size:.9rem}
  .time-option{padding:11px 6px}
  
}