/* 입력 화면 공통 규칙 (궁합 템플릿 10/15) — 2026-10-31 구조 정리로 index.html <style> 993~1179줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* 2026-10-15 테마: 양력/음력 줄 없애고 생년월일 왼쪽에 [음력] 체크, 윤달은 그해 그달에 윤달이 있을 때만 */
#theme-form .cal-type-row,#theme-form .cal-type-row + .field-note{display:none!important}
.field-input.has-lunar{display:flex;align-items:center;gap:8px}
.field-input.has-lunar .date-field-wrap{min-width:0;display:block}
.field-input.has-lunar .date-field{width:100%;box-sizing:border-box;padding:11px 10px 11px 12px}
.lunar-chk{display:inline-flex;align-items:center;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.lunar-chk input{margin:0;accent-color:var(--accent);cursor:pointer}
.lunar-chk:has(input:checked){color:var(--ink)}
.lunar-chk input:checked+span{color:var(--ink)} /* iOS 15 보조: 글자는 span 하나 */
.leap-line{display:flex;margin:-2px 0 0}
.leap-line:has(.leap-btn[hidden]){display:none}
.leap-line.no-leap.no-leap{display:none} /* iOS 15 보조 (우선순위 같게 두 번) */
.leap-line .leap-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;background:none;font-size:.84rem;color:var(--muted)}
@container (max-width:330px){.field-input.has-lunar{width:100%;flex:none}.leap-line{padding-left:0}}
:where(.fortune-card.cq-narrow) .field-input.has-lunar{width:100%;flex:none}:where(.fortune-card.cq-narrow) .leap-line{padding-left:0} /* iOS 15 보조 */

/* 2026-10-15: [음력]은 날짜 칸 오른쪽, [윤달]은 그 아래 오른쪽 */
.leap-line{justify-content:flex-end;padding-left:0;width:328px;max-width:100%}
/* 2026-10-15: 폰(세로 폭 600px 이하)은 라벨을 입력칸 위로 */
@media (max-width:600px){
  #fortune-form,#saju-form,#theme-form{width:100%}
  .field-row{flex-direction:column;align-items:stretch;gap:4px}
  .field-label{flex:none;width:auto;display:block;padding-left:2px}
  .field-colon{display:none}
  .field-input,.field-row:has(.gender-field) .field-input,.field-row:has(.choice-field) .field-input,.theme-extra .field-row:has(.xf-choice) .field-input,.field-input.has-lunar{width:100%;flex:none}
  .field-input,.field-row.has-gender .field-input,.field-row.has-choice .field-input,.theme-extra .field-row.has-xf .field-input,.field-input.has-lunar{width:100%;flex:none} /* iOS 15 보조: 위 줄은 :has 때문에 iOS 15에서 통째로 무시됨 */
  .date-field-wrap{display:block;width:100%}
  .date-field,.input-box.time-select,.input-box.region-select,.ro-field{width:100%;max-width:100%}
  .field-note{padding-left:2px}
  .leap-line{width:auto;margin:-2px 0 0}
}

/* 2026-10-15 A안: [윤달]은 날짜 안내문 오른쪽, [음력]과 세로로 맞춤 · 둘 다 상자 오른쪽 끝으로 */
.field-input.has-lunar{width:auto;flex:1 1 auto}
.field-input.has-lunar .date-field-wrap{flex:1 1 auto;max-width:234px}
.lunar-chk{margin-left:auto;gap:6px}
.lunar-chk input{width:18px;height:18px}
.note-row{display:flex;gap:8px;margin:0 0 12px}
.note-row>.field-note{flex:1 1 auto;min-width:0;margin:0}
.note-row>.leap-btn{all:unset;box-sizing:border-box;flex:none;width:62px;display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;margin-top:0;margin-bottom:2px;line-height:1}

.note-row>.leap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (min-width:601px){#theme-form{width:460px}}
/* 2026-10-15: 성별 버튼을 둥근 알약 모양으로 (모든 화면 공통) */
.gender-field{border-radius:999px;padding:4px}
.gender-btn{border-radius:999px}
/* 2026-10-15: 윤달 체크를 안내문 아랫선에 맞춤 */
.note-row{align-items:flex-end}

/* 2026-10-15: 윤달 자리를 늘 비워 둠 — 나타나고 사라져도 안내문·아래 칸이 움직이지 않게 */
.note-row>.leap-btn[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}
/* 2026-10-15: 자시 구분·날짜 기준 등 선택 버튼도 성별 버튼과 같은 둥근 알약 모양 */
.choice-field{border-radius:999px;padding:4px}
.choice-btn{border-radius:999px}
/* 2026-10-15: 달력·출생 지역·출생 시간 목록을 입력칸과 같은 폭으로, 입력칸 바로 아래에 붙여서 */
/* 열렸을 때 입력칸과 목록이 한 덩어리로 보이게: 틈 없이 겹치고, 맞닿는 모서리는 각지게 */
/* 2026-10-15 수정(사용자 요청): 목록 창 위 모서리도 아래처럼 둥글게, 입력칸 모서리는 그대로 — 입력칸 바로 아래 4px 띄워 같은 폭으로 */
.cal-popup{left:0;right:0;top:calc(100% - 1px);margin-top:0}
.time-select-list,.region-popup{left:-1px;right:-1px;top:100%;margin-top:0} /* A안(10/15): 1px 겹쳐 입력칸·창 테두리가 한 줄로 */ /* 띄우지 않고 입력칸 바로 아래에 밀착 (10/15 사용자 요청) */

/* 2026-10-15: 관계 버튼 — 연인·부부·가족 / 줄바꿈 / 친구·동업 */
.xf-choice[data-name="relation"]{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:6px}
.xf-choice[data-name="relation"] .pill-break{display:none}
/* 2026-10-15 B안: 관계 줄을 내 정보·상대 정보 사이에 따로 (상자 안 줄과 왼쪽 맞춤) */
.theme-rel{margin:14px 0 0;padding:0 15px;font-size:.85rem}
.theme-rel .field-note{margin-bottom:0}
.theme-rel .fold-note{margin:6px 0 0;padding-left:94px}
@media (max-width:600px){.theme-rel .fold-note{padding-left:2px}}
/* 2026-10-15 확인용: 관계를 상자 밖으로 뺐으니 한 줄로 */

/* 2026-10-15 결정: 모든 입력 화면 — [보기] 버튼만 메뉴 색, 고른 버튼·체크는 밝은 회색(흰 글씨). 성별·선택 버튼 바탕은 다른 입력칸과 같게 */
:root{--pick:#a7a199;--pick-ink:#fff}
#fortune-form .gender-field,#saju-form .gender-field,#theme-form .gender-field,#counsel-form .gender-field,#fortune-form .choice-field,#saju-form .choice-field,#theme-form .choice-field,#counsel-form .choice-field{background:var(--field);border:1px solid var(--field-line)}
#fortune-form .gender-btn[aria-pressed="true"],#saju-form .gender-btn[aria-pressed="true"],#theme-form .gender-btn[aria-pressed="true"],#counsel-form .gender-btn[aria-pressed="true"],#fortune-form .choice-btn[aria-pressed="true"],#saju-form .choice-btn[aria-pressed="true"],#theme-form .choice-btn[aria-pressed="true"],#counsel-form .choice-btn[aria-pressed="true"],#fortune-form .chat-pill[aria-pressed="true"],#saju-form .chat-pill[aria-pressed="true"],#theme-form .chat-pill[aria-pressed="true"],#counsel-form .chat-pill[aria-pressed="true"]{background:var(--pick);color:var(--pick-ink);border-color:var(--pick)}
/* 2026-10-30 3단계 11번: [음력]·[자세히] 체크 상자를 직접 그림 — iOS 15.3은 accent-color가 안 돼 기본 파랑이 나왔음. [윤달] 상자와 같은 모양, 체크하면 메뉴 색 면 + 흰 체크 */
.lunar-chk input,.leap-btn input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:4px;border:1.6px solid #b9b2a6;box-sizing:border-box;background:#fff center/12px 12px no-repeat;cursor:pointer;vertical-align:middle}
.lunar-chk input:checked,.leap-btn input:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.pointer-mode .lunar-chk input:focus-visible,html.pointer-mode .leap-btn input:focus-visible{outline:none}
.leap-btn input:checked+span{color:var(--ink)} /* 2026-10-31: [윤달]도 [음력]·[자세히]와 같은 진짜 체크박스(label+input) */
/* 2026-10-30 05 결정: [윤달]도 [음력]·[자세히]와 같은 상자 — 체크하면 메뉴 색 면 + 흰 체크 (10/15 회색을 바꿈), 버튼 바탕은 없음 */
@media (hover:hover){.note-row>.leap-btn:not([aria-pressed="true"]):hover,.leap-line .leap-btn:not([aria-pressed="true"]):hover{color:var(--muted)}} /* 2026-10-31 05: [윤달]도 [음력]·[자세히]처럼 마우스를 올려도 글자색 그대로 (예전 알약 버튼 규칙 끔) */
/* 2026-10-15 A안: 빠진 칸 안내는 [보기] 버튼 위에 떠 있는 말풍선 한 줄 — 다른 칸을 밀지 않음 */
.form-toast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);max-width:min(320px,92vw);width:max-content;background:#3a3631;color:#fff;font-size:.84rem;line-height:1.4;padding:9px 14px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.18);text-align:center;z-index:20;pointer-events:none;animation:toastIn .2s ease-out}
.form-toast::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#3a3631}
.form-toast.is-out{opacity:0;transition:opacity .3s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
/* 2026-10-15: 관계 버튼 5개를 위아래 입력칸과 같은 폭에 고르게 (왼쪽·오른쪽 끝 맞춤) */
.theme-rel .field-input{width:234px;flex:0 0 234px}
.theme-rel .xf-choice[data-name="relation"]{grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:5px}
.theme-rel .xf-choice[data-name="relation"] .chat-pill{padding:7px 0;text-align:center}
@media (max-width:600px){.theme-rel .field-input{width:100%;flex:none}}
/* 2026-10-15 폰 세로: 날짜 칸을 남는 폭만큼 넓히고 [음력]·[윤달]은 오른쪽 끝으로 붙임 (일 숫자가 달력 아이콘과 겹치던 문제) */
@media (max-width:600px){
  
  .field-input.has-lunar .date-field-wrap{max-width:none}
  .field-input.has-lunar .date-field{padding:11px 8px 11px 10px}
  .lunar-chk,.note-row>.leap-btn{width:auto;gap:4px}
  .lunar-chk{margin-right:-2px}
}
/* 2026-10-15: 출생 시간·출생 지역 목록에서 고른(가리킨) 항목 = 밝은 회색 바탕, 글자색은 원래대로(지역의 하늘색·분홍 유지). 달력 고른 날짜는 빨강 그대로 */
:root{--pick-soft:#e2ded8}
/* 10/15 수정: 고른 항목 바탕을 성별 버튼과 같은 밝은 회색, 글자는 흰색 (안 고른 항목은 원래 색 그대로) */
.time-option[aria-selected="true"],.region-item.is-active,.time-option.is-active{outline:none;background:var(--pick);color:var(--pick-ink)!important;font-weight:600}
/* 10/15: 출생 시간·출생 지역 목록의 고른 회색 면을 같은 폭·같은 좌우 여백으로 (목록 안쪽 여백 6px, 항목 모서리 10px, 항목 높이 같게) */
.time-select-list,.region-popup{padding:6px}
.region-item{border-radius:10px;padding:8px 14px}
.time-option{border-radius:10px}
@media (pointer:coarse){.region-item{padding:11px 14px}}
/* 2026-10-15 작명: 성 고르기 — 출생 시간과 같은 목록 모양, 한자가 여럿이면 옆에 한자 고르기 */
#theme-sur .field-input.sur-pick{display:flex;gap:6px;width:234px;flex:0 0 234px}
#theme-sur .sur-pick .region-select{flex:1 1 0;min-width:0;width:auto;max-width:none}
#xf-sur-sel .region-item.city{text-align:center}
@media (max-width:600px){#theme-sur .field-input.sur-pick{flex:none}}
/* 2026-10-15 작명 결과: 이름 후보를 굵고 조금 크게 */
.saju-text p.has-name{margin-top:14px}
.saju-text .name-cand{font-weight:700;font-size:1.06em;color:var(--ink)}

/* 택일 (2026-10-15): 목적 버튼 5개(모두 두 글자) 한 줄 — 관계와 같이 입력칸 폭에 칸 맞춤 / 원하는 달 = 출생 시간과 같은 목록 (09:39 결정) */
.theme-rel .xf-choice[data-name="purpose"]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:5px}
.theme-rel .xf-choice[data-name="purpose"] .chat-pill{padding:7px 0;text-align:center}
#theme-date .field-row+.field-note+.field-row{margin-top:10px}
/* 신년·올해 운세 볼 해 (2026-10-15): 상자 밖 테두리 없는 줄, 버튼 2개 입력칸 폭에 칸 맞춤 */
.theme-rel .xf-choice[data-name="year"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px}
.theme-rel .xf-choice[data-name="year"] .chat-pill{padding:7px 0;text-align:center}

/* 사주 풀이 (2026-10-15): 테마 사주와 같은 "사람" 상자·음력 체크·빠진 칸 테두리 */
#saju-form .cal-type-row,#saju-form .cal-type-row + .field-note{display:none!important}
#saju-form .is-invalid{box-shadow:0 0 0 2px var(--mark)!important;border-color:var(--mark)!important}
#saju-form .theme-extra.is-invalid{box-shadow:0 0 0 1px var(--mark)!important}
#saju-me-fields{margin-top:8px}
@media (min-width:601px){#saju-form{width:460px}}
/* 오늘 운세 (2026-10-15): 사주 풀이와 같은 사람 상자·음력 체크·빠진 칸 테두리 */
#fortune-form .cal-type-row,#fortune-form .cal-type-row + .field-note{display:none!important}
#fortune-form .is-invalid{box-shadow:0 0 0 2px var(--mark)!important;border-color:var(--mark)!important}
#fortune-form .theme-extra.is-invalid{box-shadow:0 0 0 1px var(--mark)!important}
#fortune-me-fields{margin-top:8px}
#fortune-me-box+.fortune-stream{margin-top:14px}
@media (min-width:601px){#fortune-form{width:460px}}
/* 1:1 감정 근거 선택창 (2026-10-15): 꺽쇠를 선택창 안 오른쪽으로 — 위 막대의 돋보기(같은 폭 버튼, 맨 오른쪽)와 가운데 세로줄이 맞음 */
.cb-select{position:relative;margin-top:10px}
.cb-select .cb-picked{margin-top:0;padding-right:44px;cursor:pointer}
.cb-select #cb-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);width:34px;height:33px;padding:0;border-radius:50%}
@media (hover:hover){.cb-select #cb-toggle:hover{background:var(--bg)}}
.cb-select:has(.cb-picked[hidden]) #cb-toggle{display:none}
.cb-select.no-pick.no-pick #cb-toggle{display:none} /* iOS 15 보조 */
@media (max-width:599px){.cb-select .cb-picked{padding-right:36px}.cb-select #cb-toggle{width:28px}}
/* 1:1 감정 상담 주제 버튼 (2026-10-15 19:16 사용자 요청): 고른 근거 결과의 메뉴 색 — 켜진 주제는 그 색 테두리·글씨, 고른 주제는 그 색 면 / 꺼진 주제는 흐린 회색 그대로 */
#chat-pills[data-kind="fortune"]{--k-bd:var(--today-soft-line);--k-tx:var(--today-soft-text);--k-bg:var(--today-soft-bg);--k-on:var(--today-soft-ink)}
#chat-pills[data-kind="saju"]{--k-bd:var(--saju-soft-line);--k-tx:var(--saju-soft-text);--k-bg:var(--saju-soft-bg);--k-on:var(--saju-soft-ink)}
#chat-pills[data-kind="theme"]{--k-bd:var(--theme-soft-line);--k-tx:var(--theme-soft-text);--k-bg:var(--theme-soft-bg);--k-on:var(--theme-soft-ink)}
/* 2026-10-15 19:36 사용자 요청: 1:1 감정 황금색보다 톤을 낮춰 흐리게 — 켜진 주제는 옅은 테두리·글씨, 고른 주제는 옅은 면 + 진한 글씨 (iOS 15에서도 되게 색은 고정값) */
#chat-pills[data-kind]:not([data-kind=""]) .chat-pill:not(.is-off){border-color:var(--k-bd);color:var(--k-tx)}
#chat-pills[data-kind]:not([data-kind=""]) .chat-pill:not(.is-off)[aria-pressed="true"]{background:var(--k-bg);border-color:var(--k-bd);color:var(--k-on)}
/* 스크롤 표시 공통 (2026-10-15): 기본 막대는 숨기고 직접 그린 얇은 막대 (front-end.js MyconScrollHint) */
.sh-native-off{scrollbar-width:none}
.sh-native-off::-webkit-scrollbar{display:none}
.sh-thumb{position:absolute;width:4px;border-radius:2px;background:rgba(60,55,50,.35);opacity:0;transition:opacity .35s ease;pointer-events:none}
.sh-thumb.is-on{opacity:1;transition:opacity .12s ease}
/* 출생 시각 시:분 입력 시안 (2026-10-15): 생년월일 칸과 같은 모양 + 오른쪽 [대략] (음력 체크 자리) */
.hm-input{all:unset;box-sizing:border-box;width:2.4ch;text-align:center;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-input::placeholder{color:var(--muted)}
.hm-field.is-placeholder .hm-input{color:var(--muted)}
.hm-field .hm-24{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--muted)}
.field-input.has-hm .time-select{flex:1 1 auto;width:auto;max-width:none;min-width:0}
.field-input.has-hm .hm-wrap[hidden],.field-input.has-hm .time-select[hidden]{display:none!important}
.jasi-block.hm-after{display:none!important}
.hm-calc .hm-warn{display:block;margin-top:2px;color:#c0566f}
.sub-region-row[hidden],.sub-region-note[hidden]{display:none!important}
@media (pointer:coarse){.hm-input{font-size:16px}}

/* 2026-10-15 입력칸 가로 길이 통일: 체크([음력]·[자세히]) 자리를 같은 폭으로 두고, 체크가 없는 칸도 그만큼 비워 오른쪽 끝을 맞춤
   PC = 모든 입력칸 234px / 폰(600px 이하) = 줄 폭 - 체크 자리 */
:root{--chk-w:74px}
.lunar-chk{width:var(--chk-w);flex:0 0 var(--chk-w);justify-content:flex-start;box-sizing:border-box}
.field-input.has-hm .time-select,.field-input.has-hm .hm-wrap{flex:1 1 auto;width:auto;min-width:0;max-width:234px}
@media (max-width:600px){
  .field-input.has-lunar{gap:8px}
  .field-input.has-lunar .date-field-wrap,.field-input.has-hm .time-select,.field-input.has-hm .hm-wrap{flex:0 0 auto;min-width:0;width:calc(100% - var(--chk-w) - 8px);max-width:calc(100% - var(--chk-w) - 8px)}
  #theme-sur .field-input.sur-pick{width:calc(100% - var(--chk-w) - 8px)}
  .field-input:not(.has-lunar)>.input-box,.field-input:not(.has-lunar)>.ro-field,.field-input:not(.has-lunar)>.date-field-wrap{width:calc(100% - var(--chk-w) - 8px);max-width:calc(100% - var(--chk-w) - 8px)}
}