/* ============================================================
   Mobile-first survey styles (Tailwind 보완용)
   ※ 클래스명은 js/question-renderer.js 와 1:1 대응
   ============================================================ */

/* ── 기본 ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif; }
* { box-sizing: border-box; }

/* ── 문항 카드 ────────────────────────────────────────────── */
.section-note {
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.question-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.question-text {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.55;
  margin-bottom: 14px;
}
/* 문항 번호 배지 */
.q-number {
  display: inline-block;
  background: #1d4ed8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.question-hint {
  font-size: 13px;
  color: #6b7280;
  margin-top: -6px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.question-error {
  color: #ef4444;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.question-error.hidden { display: none; }

/* ── 선택지(단일/복수) ────────────────────────────────────── */
.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.radio-label, .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background-color 0.15s;
  font-size: 15px;
  line-height: 1.45;
  width: 100%;
  flex-wrap: wrap;
}
.radio-label:hover, .checkbox-label:hover { border-color: #93c5fd; background: #eff6ff; }
.radio-label.selected, .checkbox-label.selected { border-color: #3b82f6; background: #eff6ff; }
.radio-label input[type=radio],
.checkbox-label input[type=checkbox] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #3b82f6;
  cursor: pointer;
}
.radio-label > span, .checkbox-label > span { flex: 1; min-width: 0; }

/* 보기 동그라미 번호 */
.opt-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
}

/* ── 기타/세부 직접 입력 (크게) ───────────────────────────── */
.other-text, .inline-detail-text {
  display: block;
  width: 100%;
  flex-basis: 100%;
  border: 2px solid #93c5fd;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  margin-top: 8px;
  outline: none;
  background: #f8fbff;
}
.other-text:focus, .inline-detail-text:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

/* 옵션 옆 인라인 세부입력(취득일/자녀수 등) */
.inline-year-month, .inline-count {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 2px solid #93c5fd;
  border-radius: 10px;
}
.inline-year-month input, .inline-count input {
  width: 90px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.inline-year-month input:focus, .inline-count input:focus { border-color: #3b82f6; }
.inline-label { font-size: 14px; color: #475569; }

/* ── 텍스트/숫자 입력 ────────────────────────────────────── */
.text-input, .number-input {
  width: 100%;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
}
.text-input:focus, .number-input:focus { border-color: #3b82f6; }
.text-input-sm {
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
  background: #fff;
  min-width: 0;
}
.text-input-sm:focus { border-color: #3b82f6; }

/* ── 순위 문항 ────────────────────────────────────────────── */
.rank-group { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: flex; align-items: center; gap: 10px; }
.rank-label {
  flex-shrink: 0;
  min-width: 56px;
  font-size: 14px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.rank-select {
  flex: 1;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  outline: none;
  background: #fff;
}
.rank-select:focus { border-color: #3b82f6; }
.other-rank-text {
  width: 100%;
  border: 2px solid #93c5fd;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  margin-top: 4px;
  outline: none;
  background: #f8fbff;
}

/* ── 행렬 테이블 ─────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px 4px;
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 340px;
  font-size: 13px;
}
.matrix-table th {
  background: #f1f5f9;
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  color: #374151;
  border: 1px solid #e2e8f0;
  line-height: 1.35;
  vertical-align: middle;
}
.matrix-table td {
  padding: 8px 4px;
  border: 1px solid #eef2f7;
  text-align: center;
  vertical-align: middle;
}
/* 구분(행 라벨) 칸 - 넓게, 줄바꿈 허용 */
.matrix-table td.row-label {
  text-align: left;
  padding: 10px 10px;
  font-size: 13px;
  color: #374151;
  vertical-align: middle;
  min-width: 130px;
  max-width: 200px;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.4;
  background: #fafcff;
}
.matrix-table tr:hover td { background: #f9fafb; }
.radio-label-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 40px;
}
.radio-label-cell input[type=radio] {
  width: 18px; height: 18px; accent-color: #3b82f6; cursor: pointer;
}
.radio-label-cell small { font-size: 11px; color: #64748b; line-height: 1.2; }
.radio-label-cell.selected { background: #dbeafe; }
.matrix-table td.dimmed, .radio-label-cell.dimmed { opacity: 0.35; pointer-events: none; }

/* 두 항목(경험/의향 등) 그룹 구분 색상 */
.matrix-table th.grp-a { background: #e0efff; color: #1e40af; }
.matrix-table td.grp-a { background: #f2f8ff; }
.matrix-table th.grp-b { background: #ffe9d6; color: #9a3412; }
.matrix-table td.grp-b { background: #fff6ee; }
.matrix-table .grp-divider { border-left: 3px solid #fb923c; }
.matrix-table td.grp-a .radio-label-cell.selected { background: #bfdbfe; }
.matrix-table td.grp-b .radio-label-cell.selected { background: #fed7aa; }

/* 두 항목 모두 응답 안내 배너 */
.dual-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #374151;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.dual-note b { color: #b45309; }
.dual-and { color: #9ca3af; font-weight: 700; margin: 0 2px; }
.dual-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 2px;
}
.dual-badge.a { color: #1e40af; }
.dual-badge.b { color: #9a3412; }

/* 해당없음(행 단위) 셀/체크 */
.na-cell { min-width: 88px; }
.na-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b45309;
  cursor: pointer;
  white-space: nowrap;
}
.na-check input { width: 16px; height: 16px; accent-color: #d97706; }
.na-note {
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  text-align: center;
}
.row-na .radio-label-cell { opacity: 0.3; pointer-events: none; }

/* 시설명 직접입력 (experience) */
.facility-name {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  background: #f8fbff;
}

/* 불만족 이유 행 */
.dis-reason-row td { padding: 0; border: none; }
.dissatisfy-row {
  padding: 8px 10px;
  background: #fffbeb;
  border-radius: 8px;
  margin: 2px 0 6px;
}
.dissatisfy-row.hidden { display: none; }
.dis-select {
  width: 100%;
  border: 2px solid #fcd34d;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.dis-select:focus { border-color: #d97706; }

/* ── 년/월, 경과시간 입력 ─────────────────────────────────── */
.year-month-row, .elapsed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.input-year, .input-month, .input-num {
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
  width: 110px;
}
.input-month, .input-num { width: 90px; }
.input-year:focus, .input-month:focus, .input-num:focus { border-color: #3b82f6; }
.year-month-row span, .elapsed-row span { font-size: 15px; color: #374151; }

/* ── 주소 ─────────────────────────────────────────────────── */
.address-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.address-row .text-input-sm { flex: 1; }
.address-row span { font-size: 14px; color: #475569; }

/* ── 자녀 나이 ────────────────────────────────────────────── */
.children-ages { display: flex; flex-direction: column; gap: 10px; }
.child-row { display: flex; align-items: center; gap: 10px; }
.child-label {
  flex-shrink: 0;
  width: 60px;
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8;
}
.child-row .input-year { flex: 1; width: auto; }
.child-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 14px;
}

/* ── 직업 상세 / 하위그룹 ─────────────────────────────────── */
.job-detail, .sub-group { display: flex; flex-direction: column; gap: 12px; }
.job-field { display: flex; flex-direction: column; gap: 6px; }
.job-field label { font-size: 14px; font-weight: 600; color: #374151; }
.sub-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fafcff;
}
.sub-group-label { font-size: 15px; font-weight: 700; color: #1d4ed8; margin-bottom: 10px; }

/* ── 페이지 전환 ─────────────────────────────────────────── */
.page.hidden { display: none; }

/* ── 하단 그림자 ─────────────────────────────────────────── */
.shadow-up { box-shadow: 0 -2px 8px rgba(0,0,0,0.08); }

/* ── 자동저장 애니메이션 ─────────────────────────────────── */
@keyframes fadeInOut {
  0% { opacity:0; transform:translateY(-6px); }
  20% { opacity:1; transform:translateY(0); }
  80% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-6px); }
}
#save-indicator.show { display: block; animation: fadeInOut 2.5s forwards; }

/* ── 큰 화면 최대 너비 ───────────────────────────────────── */
@media (min-width: 640px) {
  .question-card { padding: 24px 22px; }
  .question-text { font-size: 17px; }
  .matrix-table { font-size: 14px; }
}