/* 동네보험 — 접속지역 입력 위젯 (region-field.js 짝)
   시안 C(입력칸형) + 모바일 직접 선택 가로 2분할 채택 (2026-05-20 사용자) */

.rf-field { margin: 16px 0; }

.rf-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rf-label { font-size: 13px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.rf-label::after { content: ' :'; }

.rf-resolved { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.rf-result-text { font-size: 14px; font-weight: 700; color: var(--text-primary); }

.rf-edit,
.rf-restore {
  background: none; border: none; padding: 3px 5px; margin-left: auto;
  color: var(--mint); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: underline; white-space: nowrap;
}
.rf-restore { display: none; }

.rf-note { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; flex: 1; }

/* 직접 선택 — 시·도/시·군·구 가로 2분할 (안2), 라벨 없이 placeholder가 라벨 역할 */
.rf-manual { display: flex; gap: 8px; margin-top: 10px; }
.rf-pick { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.rf-pick-label { display: none; }

select.rf-sido,
select.rf-gu {
  width: 100%; appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 14px; color: var(--text-primary);
  height: 44px; padding: 0 32px 0 12px; box-sizing: border-box;
  background-color: var(--bg-secondary);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
select.rf-sido:focus,
select.rf-gu:focus {
  border-color: var(--mint); box-shadow: 0 0 0 3px rgba(46,158,110,.1);
}
select.rf-gu:disabled {
  color: var(--text-tertiary); background-color: var(--border-light); cursor: default;
}

/* 상태 전환 — region-field.js 가 data-rf-state / data-rf-from 제어 */
[data-rf-state="resolved"] .rf-note,
[data-rf-state="resolved"] .rf-restore,
[data-rf-state="resolved"] .rf-manual,
[data-rf-state="manual"]   .rf-resolved { display: none !important; }
[data-rf-state="manual"][data-rf-from="edit"] .rf-restore { display: inline; }

/* resolved — 위치 찾음 시 입력칸 박스 */
.rf-field[data-rf-state="resolved"] .rf-line {
  height: 44px; padding: 0 12px; box-sizing: border-box; flex-wrap: nowrap;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rf-field[data-rf-state="manual"] .rf-line { padding: 4px 0; }

/* 모바일 — 터치 영역 48px (피츠의 법칙) */
@media (max-width: 768px) {
  select.rf-sido,
  select.rf-gu { height: 48px; }
  .rf-field[data-rf-state="resolved"] .rf-line { height: 48px; }
}