/* 입력 카드·달력·출생 시간·출생 지역 목록 — 2026-10-31 구조 정리로 index.html <style> 132~249줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 오늘 운세 입력 카드 ---- */
.fortune-card{container-type:inline-size;padding:16px 20px 18px;background:var(--surface);margin-bottom:16px}
.field-row{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.field-label{margin:0;font-size:.82rem;font-weight:600;color:var(--muted);text-align:left;white-space:nowrap;flex:0 0 84px;width:84px;display:flex;justify-content:flex-end;align-items:baseline}
/* 오른쪽 정렬: ":"은 모든 레이블에서 같은 세로선, 레이블 글자는 ":" 바로 앞에 붙고 길면 왼쪽으로 뻗음 */
.field-colon{flex:none;margin-left:.3em}
.field-input{flex:1;display:flex;justify-content:flex-start;min-width:0}
.field-row:has(.gender-field) .field-input{width:234px;flex:0 0 234px;justify-content:flex-start}
.field-row.has-gender .field-input{width:234px;flex:0 0 234px;justify-content:flex-start} /* iOS 15 보조 */
.date-field{display:flex;align-items:center;background:var(--bg);border-radius:14px;padding:11px 14px;width:234px;flex:0 0 auto}
.date-field.is-placeholder .date-input{color:var(--muted)}
.date-digits{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:100%;padding-left:1ch;padding-right:32px;box-sizing:border-box}
.date-input{all:unset;box-sizing:border-box;width:4ch;text-align:center;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.date-input.m,.date-input.d{width:2.4ch}
.date-input::placeholder{color:var(--muted)}
.date-sep{color:var(--muted);font-size:.95rem}
.gender-field{display:flex;gap:6px;background:var(--bg);flex:0 0 auto;width:152px}
.gender-field.half-field{max-width:152px}
.gender-btn{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:9px 0;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--muted)}
.gender-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.input-box{background:var(--bg);border-radius:14px;padding:11px 14px;text-align:center;flex:0 0 auto;width:180px}
/* 생년월일 입력창(.date-field)과 좌우 여백·가로폭을 동일하게 맞춤 */
.input-box.time-select,.input-box.region-select{width:234px;max-width:234px;padding-left:14px;padding-right:14px}
.input-box input{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;font-size:.95rem;color:var(--ink)}
.input-box input::placeholder{color:var(--muted)}
.half-field{max-width:50%}
.field-hidden{visibility:hidden;pointer-events:none}
.field-note{margin:0 0 12px;padding-left:94px;text-align:left;font-size:.78rem;line-height:1.3;color:var(--muted)}
#fortune-form,#saju-form{width:380px;max-width:100%;margin:0 auto}

/* ---- 생년월일: 달력 팝업 (해.달.날 참고) ---- */
.date-field-wrap{position:relative;display:inline-block}
.date-field{position:relative}
.date-cal-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.date-cal-btn svg{width:18px;height:18px;display:block}
@media (hover:hover){.date-cal-btn:hover{color:var(--ink)}}
/* 생년월일 입력창 바로 아래~출생지역 입력창 바로 위까지 빈틈 없이 꽉 채우는 고정 높이
   (달마다 주(row) 수가 달라도 grid-template-rows를 1fr로 분배해 항상 동일한 전체 높이를 유지) */
/* 가로폭을 생년월일 입력창보다 약간 좁게(양옆 6px씩 인셋), 가운데 정렬 */
.cal-popup{position:absolute;height:192px;z-index:35;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.16);padding:8px 14px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.cal-popup[hidden]{display:none}
/* 좌측 년/달 꺽쇠는 일·월요일 칸 위, 우측 달/년 꺽쇠는 금·토요일 칸 위에 오도록 아래 요일 그리드와 동일한 7열에 배치 */
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;margin-bottom:4px;flex:none}
.cal-header>*:nth-child(1){grid-column:1}
.cal-header>*:nth-child(2){grid-column:2}
.cal-header>*:nth-child(3){grid-column:3 / 6}
.cal-header>*:nth-child(4){grid-column:6}
.cal-header>*:nth-child(5){grid-column:7}
.cal-nav{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:2px;border-radius:8px;color:var(--muted)}
@media (hover:hover){.cal-nav:hover{background:var(--bg);color:var(--ink)}}
.cal-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
.cal-nav svg{width:14px;height:14px;display:block}
.cal-title{font-size:.85rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:1px;flex:none}
.cal-weekdays span{text-align:center;font-size:.68rem;color:var(--muted);padding:0;line-height:1.4}
.cal-weekdays span.sun{color:#e0729a}
.cal-weekdays span.sat{color:#4a9fd8}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;flex:1;min-height:0}
.cal-day{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:6px;cursor:pointer;font-size:.78rem;line-height:1;color:var(--ink)}
@media (hover:hover){.cal-day:hover{background:var(--bg)}}
.cal-day.sun{color:#e0729a}
.cal-day[disabled]{opacity:.28;cursor:default;pointer-events:none}
/* 생년월일이 미래일 때: 달력 아이콘 자리에 ⓘ (자시 구분 ⓘ와 같은 모양, 빨간색), 누르면 말풍선. 다시 입력하려고 칸을 누르면 달력 아이콘으로 돌아옴 */
.info-btn.date-err-btn{right:13px;border-color:#e5484d;color:#e5484d}
.info-btn.date-err-btn[aria-expanded="true"]{background:#e5484d;border-color:#e5484d;color:#fff}
.date-field.is-error .date-input{color:#e5484d}
/* 생년월일 ⓘ 말풍선도 달력·목록·자시 ⓘ 말풍선과 같은 크기(높이 고정, info-bubble 기본값 사용) */
.cal-day.sat{color:#4a9fd8}
/* 선택된 날짜를 빨간 원으로 표시(최초 로딩 시 기본값이 오늘이므로 처음엔 오늘 위치에, 날짜를 바꾸면 바뀐 날짜로 따라감) */
/* 칸의 가로·세로가 달라도 항상 정원이 되도록 짧은 쪽 기준 원형 배경으로 그림 */
.cal-day[aria-selected="true"]{background:radial-gradient(circle closest-side,#e11d48 96%,transparent 100%);color:#fff}

/* ---- 출생 시간: 커스텀 드롭다운 (해.달.날 참고) ---- */
.time-select{position:relative}
.time-select-btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer}
.time-select-label{display:block;width:100%;padding-right:18px;text-align:center;font-size:.95rem;color:var(--ink);white-space:nowrap}
.time-select-label.is-placeholder{color:var(--muted)}
.time-chevron{width:16px;height:16px;color:var(--muted);transition:transform .2s ease}
/* 달력 아이콘(.date-cal-btn, right:14px)과 동일한 세로선에 오도록 절대배치 */
.time-select-btn .time-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.time-select-btn[aria-expanded="true"] .time-chevron{transform:translateY(-50%) rotate(180deg)}
/* 달력 팝업과 동일한 가로폭(양옆 6px 인셋)·세로높이(192px)로 통일 */
.time-select-list{position:absolute;top:100%;left:6px;right:6px;height:192px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.16);overflow-y:auto;z-index:35;padding:6px;box-sizing:border-box}
.time-select-list[hidden]{display:none}
.time-option{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;padding:8px 6px;cursor:pointer;font-size:.95rem;color:var(--ink)}
@media (hover:hover){.time-option:hover{background:var(--bg)}}
.time-option[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
/* "모름"은 글자 수가 적어 다른 시간대(해시·술시 등)보다 작아 보이므로 글자 사이 간격을 넓혀 시각적 크기를 맞춤 */
/* 2026-10-15: "모   름"도 다른 시간과 같은 띄어쓰기(빈칸 3개), 간격 넓힘 없앰 */

/* ---- 출생 지역: 광역시/도 + 시/군 검색형 드롭다운 ---- */
.region-select{position:relative}
.region-control{width:100%}
.region-select .region-select-input{all:unset;box-sizing:border-box;display:block;width:100%;padding-right:18px;text-align:center;font-size:.95rem;color:var(--ink)}
.region-select-input::placeholder{color:var(--muted)}
/* 달력 아이콘·출생시간 꺽쇠와 동일한 세로선에 오도록 절대배치(버튼 자체를 배치해 클릭 영역 확보) */
.region-toggle{all:unset;box-sizing:border-box;position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer;color:var(--muted)}
.region-toggle[aria-expanded="true"] .time-chevron{transform:rotate(180deg)}
/* 달력 팝업과 동일한 가로폭(양옆 6px 인셋)·세로높이(192px)로 통일 */
.region-popup{position:absolute;top:100%;left:6px;right:6px;height:192px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.16);z-index:35;padding:10px 18px;box-sizing:border-box}
.region-popup[hidden]{display:none}
.region-metro{display:flex;flex-direction:column;gap:1px;margin-bottom:2px}
.region-item{all:unset;box-sizing:border-box;display:block;cursor:pointer;font-size:.95rem;color:var(--ink)}
@media (hover:hover){.region-item:hover{background:var(--bg)}}
.region-item.metro{text-align:left;color:#4a9fd8}
.region-item.region-hidden{display:none}
.region-item.is-active,.time-option.is-active{outline:2px solid var(--accent);outline-offset:-2px;background:var(--bg)} /* 키보드로 고르는 중인 항목 (2026-10-03) */
.region-province-block{margin-bottom:6px;padding-top:8px;border-top:1px solid var(--line)}
.region-province-block.region-hidden{display:none}
.region-province-name{text-align:center;font-size:.95rem;font-weight:700;color:#e0729a;margin:0 0 3px}
.region-city-list{display:flex;flex-direction:column;gap:1px}
.region-item.city{text-align:right}
.submit-row{display:flex;justify-content:center;margin-top:32px}
.submit-btn{all:unset;box-sizing:border-box;min-width:50%;text-align:center;padding:12px 28px;color:var(--on-accent);font-size:1rem;font-weight:700;cursor:pointer}
@media (hover:hover){.submit-btn:hover{opacity:.92}}
.submit-btn:disabled{opacity:.6;cursor:default}
.form-note{margin:8px 0 0;text-align:center;font-size:.85rem;color:var(--muted)}