/* 선택 버튼·양력/음력·입력 폼 접기·오늘 운세 결과 — 2026-10-31 구조 정리로 index.html <style> 329~400줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 선택형 토글(자시 구분 등): 성별 버튼과 같은 캡슐 모양 ---- */
.field-row:has(.choice-field) .field-input{width:234px;flex:0 0 234px;justify-content:flex-start}
.field-row.has-choice .field-input{width:234px;flex:0 0 234px;justify-content:flex-start} /* iOS 15 보조 */
.choice-field{display:flex;gap:6px;background:var(--bg);flex:0 0 auto;width:152px}
/* 양력/음력 선택 + 윤달 (2026-10-02): 성별 버튼과 같은 폭, 음력일 때만 오른쪽에 "윤달" */
.cal-type{display:flex;align-items:center;gap:6px;width:234px;max-width:100%}
.cal-type .choice-field{flex:0 0 152px}
.leap-btn{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:14px 0;border-radius:999px;background:var(--bg);cursor:pointer;font-size:.88rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:background-color .18s ease,color .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.leap-btn[hidden]{display:none}
.leap-btn:active{transform:scale(.96)}
.leap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.leap-btn:not([aria-pressed="true"]):hover{color:var(--ink)}}
.leap-btn:not([hidden]){animation:fadeIn .18s ease}
.field-note .note-solar{color:var(--ink);font-weight:600}
.field-note.is-warn{color:#e5484d}
/* 음력 모드 달력: 큰 글씨 = 양력, 작은 글씨 = 음력 */
.cal-day.has-lunar{flex-direction:column;gap:0}
.cal-day .cal-sd{line-height:1.05}
.cal-day .cal-ld{font-size:.52rem;line-height:1;color:var(--muted);margin-top:1px}
.cal-day .cal-ld.is-first{color:var(--ink);font-weight:700}
.cal-day[aria-selected="true"] .cal-ld{color:#fff}
.choice-btn{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:9px 0;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap}
.choice-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
/* 성별·자시 구분·날짜 기준 버튼: 색이 부드럽게 바뀌고, 누르는 순간 살짝 눌리는 느낌 */
.gender-btn,.choice-btn{transition:background-color .18s ease,color .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.gender-btn:active,.choice-btn:active{transform:scale(.96)}
@media (hover:hover){.gender-btn:not([aria-pressed="true"]):hover,.choice-btn:not([aria-pressed="true"]):hover{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.gender-btn,.choice-btn{transition:background-color .18s ease,color .18s ease}.gender-btn:active,.choice-btn:active{transform:none}}
/* ⓘ 설명 버튼: 달력·꺽쇠 아이콘과 같은 세로선(우측 14px)에 배치 */
.info-anchor{position:relative}
.info-btn{all:unset;box-sizing:border-box;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:700 .72rem/17px Georgia,serif;text-align:center;cursor:pointer}
.info-btn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* 말풍선 설명 */
/* 달력·시간·지역 목록과 같은 위치(입력칸 바로 아래, 양옆 6px 인셋)·크기(높이 192px, 터치 기기 252px), 내용이 길면 스크롤 */
.info-bubble{position:absolute;top:100%;left:6px;right:6px;height:192px;overflow-y:auto;z-index:36;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.16);padding:12px 14px;box-sizing:border-box;font-size:.8rem;line-height:1.55;text-align:left}
@media (pointer:coarse){.info-bubble{height:252px}} /* 터치 기기: 달력·목록과 같은 높이 (위 기본값보다 뒤에 있어야 적용됨) */
.info-bubble p{margin:0 0 6px}
.info-bubble p:last-child{margin:0;color:var(--muted)}
@container (max-width:330px){.field-row:has(.choice-field) .field-input{width:100%;flex:none}.cal-type{width:100%}}
:where(.fortune-card.cq-narrow) .field-row.has-choice .field-input{width:100%;flex:none}:where(.fortune-card.cq-narrow) .cal-type{width:100%} /* iOS 15 보조 */

/* ---- 입력 폼 접기: 결과가 나오면 입력 폼을 한 줄 요약으로 접음 (사주 풀이·오늘 운세 공통) ---- */
.form-summary{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:380px;max-width:100%;margin:0 auto;padding:11px 14px;border-radius:14px;background:var(--bg);color:var(--ink);font-size:.9rem;line-height:1.4;cursor:pointer}
.form-summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-summary:disabled{cursor:default;opacity:.6}
.form-summary-text{flex:1;min-width:0;text-align:left}
.form-summary-line{display:block;word-break:keep-all}
.form-summary-edit{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.form-summary-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
@media (hover:hover){.form-summary:not(:disabled):hover .form-summary-edit{color:var(--ink)}}
.form-summary + form:not([hidden]),.saju-result:not([hidden]){animation:formOpen .22s ease-out}
.form-cancel-row{text-align:center}
.form-cancel{all:unset;cursor:pointer;margin-top:10px;font-size:.82rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.form-cancel[hidden]{display:none}
.form-cancel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.form-cancel:hover{color:var(--ink)}}
@keyframes formOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* 달력·출생 시간·출생 지역 목록이 열릴 때: 위에서 살짝 내려오며 서서히 나타남 */
.cal-popup:not([hidden]),.time-select-list:not([hidden]),.region-popup:not([hidden]),.jasi-block:not([hidden]),#saju-jasi-rule:not([hidden]),.info-bubble:not([hidden]){transform-origin:top center;animation:listOpen .18s ease-out}
/* ---- 오늘 운세 결과: 타자 효과 (입력칸과 버튼 사이) ---- */
.fortune-stream{margin:6px 0 0;padding:18px 4px 4px;border-top:1px solid var(--line);animation:formOpen .22s ease-out}
.fortune-stream .saju-text{max-width:none}
/* 글이 써지는 동안 마지막 줄 끝에 깜박이는 커서 */
.fortune-stream.is-typing .saju-text>:last-child::after{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--ink);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@keyframes listOpen{from{opacity:0;transform:translateY(-8px) scaleY(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cal-popup:not([hidden]),.time-select-list:not([hidden]),.region-popup:not([hidden]),.jasi-block:not([hidden]),#saju-jasi-rule:not([hidden]),.info-bubble:not([hidden]){animation:none}}
.result-pending{margin:0;padding:12px 0;text-align:center;color:var(--muted);font-size:.9rem}
@container (max-width:330px){.form-summary{width:234px}}
:where(.fortune-card.cq-narrow) .form-summary{width:234px} /* iOS 15 보조 */