/* =========================================================
   /assets/css/health_family_edit.css
   - 우리 가족 건강 > 기록 추가/수정 페이지 전용
   - 공통(btn/input/card/muted)은 common.css를 사용
   ========================================================= */

.page-health-family-edit .site-main{
  padding: 14px 0 26px;
}

/* 카드 전체 */
.page-health-family-edit .card{
  padding: 16px 18px;
}

/* 상단 헤더(제목 + 돌아가기) */
.hf-edit__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.hf-edit__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.hf-edit__sub{
  margin: 6px 0 0;
  opacity: .75;
  font-weight: 700;
  line-height: 1.35;
}

/* 대상/탭 선택 영역 */
.hf-edit__filters{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* 라벨/도움말 */
.hf-label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  opacity: .80;
  margin-bottom: 6px;
}

.hf-help{
  font-size: 12px;
  opacity: .65;
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.35;
}

/* 탭(선택) : 나중에 select 대신 탭버튼으로 바꾸고 싶을 때 사용 */
.hf-tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.hf-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  text-decoration:none;
  color: #0f172a;
  font-weight: 900;
  font-size: 12.5px;
}

.hf-tab.is-active{
  border-color: rgba(47,107,255,.35);
  box-shadow: 0 8px 18px rgba(47,107,255,.12);
}

/* 실제 입력 폼 그리드 */
.hf-form{
  margin-top: 14px;
}

.hf-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 2칸 합치기 */
.hf-span2{
  grid-column: 1 / -1;
}

/* 입력요소 간격을 조금 안정적으로 */
.page-health-family-edit .input{
  width: 100%;
}

/* 하단 버튼 바 */
.hf-edit__footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* 모바일: 1열 */
@media (max-width: 900px){
  .hf-grid{ grid-template-columns: 1fr; }
  .hf-span2{ grid-column: auto; }
}

/* =========================================================
   입력 박스 높이/가독성 개선
   ========================================================= */

.page-health-family-edit .input,
.page-health-family-edit select.input,
.page-health-family-edit input.input{
  height: 36px;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 10px;
}

/* date input은 오른쪽 아이콘 때문에 padding 약간 여유 */
.page-health-family-edit input[type="date"].input{
  padding-right: 12px;
}

/* textarea는 height 대신 최소 높이로 */
.page-health-family-edit textarea.input{
  height: auto;
  min-height: 110px;
  padding: 10px 10px;
  line-height: 1.4;
  resize: vertical;
}

/* =========================================================
   입력 박스 선(테두리) 부드럽게
   ========================================================= */

.page-health-family-edit .input{
  border: 1px solid rgba(15,23,42,.18) !important; /* ✅ 진한 검정 대신 연한 회색 */
  box-shadow: none !important;
  outline: none;
}

.page-health-family-edit .input:focus{
  border-color: rgba(47,107,255,.55) !important;  /* ✅ 포커스 시만 파란 강조 */
  box-shadow: 0 0 0 4px rgba(47,107,255,.14) !important;
}

/* =========================================================
   폼 폭을 중간 폭으로(너무 길게 늘어지지 않게)
   ========================================================= */

.page-health-family-edit .hf-form{
  max-width: 980px;   /* ✅ 900~1050 사이 취향 조정 */
}

/* 버튼 높이/톤 맞추기 */
.page-health-family-edit .btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 900;
}

.page-health-family-edit .btn-primary{
  box-shadow: 0 8px 18px rgba(47,107,255,.18);
}

.page-health-family-edit .hf-edit__footer{
  justify-content: flex-end;
  gap: 10px;
}