/* =========================================================
   health-family.css
   - 우리 가족 건강 대시보드
   ========================================================= */

.page-health-family .site-main{
  padding: 18px 0 30px;
}

.hf-hero{
  padding: 16px 18px;
}

.hf-title{
  margin: 6px 0 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.hf-sub{
  margin: 0;
  opacity: .75;
  line-height: 1.45;
  font-weight: 600;
}

.hf-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

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

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

.hf-card{
  padding: 14px 16px;
}

.hf-card__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.hf-card__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.hf-card__hint{
  font-size: 12px;
  opacity: .65;
  font-weight: 700;
}

.hf-table-wrap{
  overflow:auto;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background:#fff;
}

.hf-table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
}

.hf-table th,
.hf-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  text-align:left;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 700;
}

.hf-table th{
  background: #f8fafc;
  font-weight: 900;
}

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

.hf-note{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
}

.hf-note__title{
  font-weight: 900;
  margin-bottom: 6px;
}

.hf-note__body{
  opacity: .78;
  line-height: 1.45;
  font-weight: 700;
}

.hf-links{
  margin-top: 10px;
}

.hf-link{
  font-weight: 900;
  text-decoration:none;
}

.hf-challenge{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: #fff;
  padding: 12px 12px;
}

.hf-challenge__row{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(15,23,42,.07);
}

.hf-challenge__row:first-child{
  border-top: none;
  padding-top: 0;
}

.hf-challenge__k{
  font-weight: 900;
  opacity: .75;
}

.hf-challenge__v{
  font-weight: 800;
  opacity: .9;
  line-height: 1.4;
}

@media (max-width: 980px){
  .hf-grid{ grid-template-columns: 1fr; }
  .hf-table{ min-width: 560px; }
}


/* =========================================================
   health-family.css (FINAL POLISH PATCH)
   - 카드 배경/여백/폰트/버튼 정리
   - 기존 스타일은 유지하고 '마감용 오버라이드'만 추가
   ========================================================= */

.page-health-family{
  background: #f6f8fb; /* 페이지 바탕 조금 더 소프트 */
}

/* 전체 상단 패딩 살짝 줄여서 꽉 찬 느낌 */
.page-health-family .site-main{
  padding: 14px 0 26px;
}

/* 카드 공통: 너무 하얗게 뜨지 않게, 그림자 정돈 */
.page-health-family .card{
  background: #fbfcfe;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* HERO: 조금 더 구분되는 톤 */
.page-health-family .hf-hero{
  background: linear-gradient(180deg, #fbfcff 0%, #f7faff 100%);
}

.hf-title{
  font-size: 22px;      /* 24 → 22 */
  margin: 4px 0 6px;
}

.hf-sub{
  font-size: 13px;
  font-weight: 700;
  opacity: .78;
}

/* 칩: 살짝 작게 + 눌림/선택감 */
.hf-chip{
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 900;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

/* 그리드 간격: 카드가 붙어 보이지 않게 */
.hf-grid{
  gap: 16px;            /* 14 → 16 */
  margin-top: 14px;     /* 12 → 14 */
}

.hf-card{
  padding: 14px 16px;   /* 유지 */
}

/* 카드 헤더: 타이틀/힌트/버튼 줄 정렬 예쁘게 */
.hf-card__head{
  margin-bottom: 10px;
}

.hf-card__title{
  font-size: 15px;      /* 16 → 15 */
  letter-spacing: -.1px;
}

.hf-card__hint{
  font-size: 12px;      /* 유지 */
  opacity: .62;
}

/* 버튼: +추가 / 수정 / 삭제를 작고 단정하게 */
.page-health-family .btn{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

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

/* 테이블: 폰트/패딩 정돈 + 배경 톤 */
.hf-table-wrap{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
}

.hf-table{
  min-width: 600px;     /* 640 → 600 */
}

.hf-table th,
.hf-table td{
  padding: 9px 10px;    /* 10 → 9 */
  font-size: 12.5px;    /* 13 → 12.5 */
  font-weight: 750;
}

.hf-table th{
  background: #f5f7fb;
  font-weight: 900;
}

/* 메모 카드: 텍스트 가독성 */
.hf-note{
  background: #fff;
}

.hf-note__title{
  font-size: 13px;
}

.hf-note__body{
  font-size: 13px;
  opacity: .82;
}

/* 챌린지 박스: 행 간격/폰트 약간 정리 */
.hf-challenge{
  background: #fff;
}

.hf-challenge__row{
  padding: 7px 0;       /* 8 → 7 */
  grid-template-columns: 100px 1fr; /* 110 → 100 */
}

.hf-challenge__k{
  font-size: 12.5px;
  opacity: .72;
}

.hf-challenge__v{
  font-size: 13px;
}

/* 링크(예방접종/기관) : 버튼처럼 보이게 */
.hf-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
}

/* 모바일: 테이블 너무 넓지 않게 */
@media (max-width: 980px){
  .hf-table{ min-width: 520px; }
}

@media (max-width: 640px){
  .hf-title{ font-size: 20px; }
  .hf-sub{ font-size: 12.5px; }
  .page-health-family .btn{ padding: 6px 9px; }
  .hf-table{ min-width: 480px; }
}

/* =========================================================
   FINAL UX PATCH v2
   - 수정 버튼 직사각형
   - 관리/메모 정렬 & gap 정리
   - empty-state 박스 스타일
   ========================================================= */

/* +추가 버튼(헤더 오른쪽) : 작고 또렷하게 */
.page-health-family .hf-card__head .btn{
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
}

/* 테이블 '관리' 버튼: 같은 스타일(직사각형) */
.page-health-family .hf-table td:last-child > div{
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content:flex-start;
  flex-wrap:nowrap;            /* 줄바꿈 방지 */
}

/* 수정 버튼도 '버튼'처럼 보이게 (링크 btn 포함) */
.page-health-family .hf-table td:last-child a.btn,
.page-health-family .hf-table td:last-child button.btn{
  padding: 7px 12px;
  border-radius: 10px;         /* 완전 pill 말고 직사각형 */
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
  min-width: 52px;
  text-align:center;
}

/* 삭제 버튼 강조는 살짝만 (너무 튀면 이 줄 삭제) */
.page-health-family .hf-table td:last-child button.btn{
  border-color: rgba(15,23,42,.22);
}

/* '메모' 칸이 너무 좁아 줄바꿈 이상하면: 최소 폭 확보 */
.page-health-family .hf-table th:nth-child(4),
.page-health-family .hf-table td:nth-child(4){
  min-width: 220px;            /* 메모 칸 */
}

/* '관리' 칸 최소 폭 */
.page-health-family .hf-table th:last-chil

/* =========================================================
   FINAL UX PATCH v4 (ONE-LINE ROW + ELLIPSIS)
   목적:
   1) '수정/삭제' 버튼을 가로 배치(행 높이 감소)
   2) 헤더(마지막 검진일 등) 줄바꿈 금지 → 표가 한 줄 느낌
   3) '검진 항목/메모'가 길어도 행 높이 늘지 않게 1줄 말줄임(...)
   ---------------------------------------------------------
   ✅ 너가 조정할 곳(추천 순서)
   [1] 관리 칸 폭: 150px → 버튼이 끼면 160~170
   [2] 말줄임 적용 칸: 1,4번 칸 (검진항목/메모) 필요에 따라 on/off
   [3] 행 높이: td padding (8~10)로 미세 조정
   ========================================================= */

/* -----------------------------
   A) 헤더는 한 줄로 고정
   ----------------------------- */
.page-health-family .hf-table th{
  white-space: nowrap;     /* ✅ 헤더 줄바꿈 방지 */
}

/* -----------------------------
   B) 셀 기본 정렬(높이 정돈)
   ----------------------------- */
.page-health-family .hf-table td{
  vertical-align: middle;
  padding: 8px 10px;       /* ✅ 행 높이 조정 포인트 (8~10 사이 추천) */
}

/* -----------------------------
   C) '관리' 버튼을 가로로 배치
   ----------------------------- */
.page-health-family .hf-table td:last-child > div{
  display: flex;
  flex-direction: row;     /* ✅ 세로 → 가로 */
  align-items: center;
  justify-content: flex-start;
  gap: 6px;                /* ✅ 버튼 간격(6~8 추천) */
  flex-wrap: nowrap;       /* ✅ 기본은 줄바꿈 금지 */
}

/* 버튼 자체(수정/삭제) 크기 줄여서 행 높이 감소 */
.page-health-family .hf-table td:last-child a.btn,
.page-health-family .hf-table td:last-child button.btn{
  padding: 6px 10px;       /* ✅ 버튼 높이 줄임 */
  border-radius: 10px;     /* ✅ 직사각형 느낌 */
  line-height: 1;
  min-width: 0;            /* ✅ 불필요한 최소폭 제거 */
  white-space: nowrap;
}

/* -----------------------------
   D) 열 폭(간격) 재조정
   - 5열 구조(정기검진/예방접종 동일)
   ----------------------------- */

/* (1) 검진항목/예방접종명 */
.page-health-family .hf-table th:nth-child(1),
.page-health-family .hf-table td:nth-child(1){
  width: 190px;            /* ✅ 길면 210~230으로 늘려도 됨 */
}

/* (2) 다음 예정일/마지막 접종 */
.page-health-family .hf-table th:nth-child(2),
.page-health-family .hf-table td:nth-child(2){
  width: 120px;
}

/* (3) 마지막 검진일/다음 권장 */
.page-health-family .hf-table th:nth-child(3),
.page-health-family .hf-table td:nth-child(3){
  width: 120px;            /* ✅ '마지막 검진일'이 줄바꿈되면 130으로 */
}

/* (4) 메모 */
.page-health-family .hf-table th:nth-child(4),
.page-health-family .hf-table td:nth-child(4){
  width: auto;             /* ✅ 남는 폭을 메모가 먹음 */
  min-width: 220px;        /* ✅ 너무 좁아지는 것 방지 */
}

/* (5) 관리 (가로 버튼 2개 들어갈 폭) */
.page-health-family .hf-table th:nth-child(5),
.page-health-family .hf-table td:nth-child(5){
  width: 150px;            /* ✅ 버튼이 끼면 160~170 */
  white-space: nowrap;
}

/* -----------------------------
   E) '한 줄 고정 + 말줄임(...)'
   - 행 높이 늘어나는 원인(긴 텍스트)을 컷
   - 기본은 1번(항목), 4번(메모)에 적용
   ----------------------------- */

/* 1번 칸(검진항목/예방접종명) : 1줄 말줄임 */
.page-health-family .hf-table td:nth-child(1){
  white-space: nowrap;     /* ✅ 1줄 */
  overflow: hidden;        /* ✅ 넘치면 숨김 */
  text-overflow: ellipsis; /* ✅ ... */
  max-width: 1px;          /* ✅ table에서 ellipsis 작동 트릭 */
}

/* 4번 칸(메모) : 1줄 말줄임(기본 ON)
   - 만약 메모를 여러 줄로 보고 싶으면 이 블록을 주석 처리(삭제)하면 됨
*/
.page-health-family .hf-table td:nth-child(4){
  white-space: nowrap;     /* ✅ 1줄 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1px;
}

/* -----------------------------
   F) 모바일(아주 좁을 때)만 관리 버튼 줄바꿈 허용
   ----------------------------- */
@media (max-width: 520px){
  .page-health-family .hf-table td:last-child > div{
    flex-wrap: wrap;       /* ✅ 좁으면 줄바꿈 허용 */
  }
  .page-health-family .hf-table th:nth-child(5),
  .page-health-family .hf-table td:nth-child(5){
    width: 130px;
  }
}

/* =========================================================
   MEMO 폭 확보 패치 (CSS only)
   - 관리 칸이 먹는 폭을 줄여서 메모에 공간을 돌려줌
   ========================================================= */

/* 1) 관리 칸 폭을 조금 줄임 (150 -> 130~140 권장) */
.page-health-family .hf-table th:nth-child(5),
.page-health-family .hf-table td:nth-child(5){
  width: 140px !important;   /* ✅ 필요하면 140으로 */
}

/* 2) 관리 버튼 사이 간격(gap) 줄이기 */
.page-health-family .hf-actions{
  gap: 6px !important;       /* ✅ 8 -> 6 */
}

/* 3) 관리 버튼 자체 폭/패딩 줄이기 */
.page-health-family .hf-actions .btn{
  padding: 6px 9px !important; /* ✅ 버튼 더 슬림 */
}

/* 4) 헤더/셀 padding을 아주 살짝 줄여서 전체 폭 절약 */
.page-health-family .hf-table th,
.page-health-family .hf-table td{
  padding: 8px 9px !important; /* ✅ 10 -> 9 */
}

/* ===== 확정: 테이블 헤더 절대 줄바꿈 금지 ===== */
.page-health-family .hf-table thead th{
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* (혹시 전역 break-all이 너무 강하면 더 강하게) */
.page-health-family .hf-table thead th{
  word-break: keep-all !important;
  line-break: strict !important;
}
@media (max-width: 860px){
  .mh-grid{ grid-template-columns: 1fr !important; }
}

.page-health-family .hf-mental{
  position: relative;
  z-index: 2;
}

.page-health-family .hf-mental .btn{
  position: relative;
  z-index: 3;
}

/* 마음 건강 요약 */
.page-health-family .hf-mental{
  position: relative; /* ✅ 클릭 문제 대비 */
  z-index: 2;
}

.page-health-family .hf-mental-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-health-family .hf-mental-item{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.page-health-family .hf-mental-k{
  font-weight: 900;
  color: #2563eb;
  margin-bottom: 6px;
}

.page-health-family .hf-mental-v{
  font-weight: 800;
  color: rgba(15,23,42,.78);
  white-space: pre-wrap;
  line-height: 1.35;
}

.page-health-family .hf-mental-tip{
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 860px){
  .page-health-family .hf-mental-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
  [마음 건강 요약] 폰트/간격 “한 번에” 조절용 토큰
  - ✅ 여기 숫자만 바꾸면 섹션 전체가 같이 바뀜
  - 기본: 13px 기준
============================================================================ */
.page-health-family{
  --mh-font: 13px;      /* ✅ 전체 본문 기본 글씨 (원하시는 13px) */
  --mh-title: 16px;     /* 제목(“마음 건강 요약”) */
  --mh-label: 13.5px;     /* ①②③④ 라벨 */
  --mh-value: 12.8px;     /* 입력된 내용 글씨 */
  --mh-hint: 12px;      /* “마지막 저장” 같은 보조문구 */
  --mh-tip: 12.5px;       /* Tip 문구 */

  --mh-gap: 12px;       /* 카드들 사이 간격 */
  --mh-pad: 12px;       /* 항목 카드 안쪽 여백 */
  --mh-radius: 14px;    /* 항목 카드 둥글기 */
  --mh-line: 1.35;      /* 줄간격 */
}

/* ============================================================================
  [마음 건강 요약] 실제 스타일
============================================================================ */
.page-health-family .hf-mental{
  position: relative; /* (클릭/겹침 문제 예방용) */
  z-index: 2;
}

/* 헤더(제목/저장시간/버튼) */
.page-health-family .hf-mental .hf-card__title{
  font-size: var(--mh-title);
}

.page-health-family .hf-mental .hf-card__hint{
  font-size: var(--mh-hint);
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* 버튼 글씨도 같이 13px 기준으로 */
.page-health-family .hf-mental .btn{
  font-size: var(--mh-font);
}

/* 2열 그리드 */
.page-health-family .hf-mental-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mh-gap);
}

/* 항목 카드 */
.page-health-family .hf-mental-item{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--mh-radius);
  padding: var(--mh-pad);
  background: #fff;
}

/* ①②③④ 라벨 */
.page-health-family .hf-mental-k{
  font-size: var(--mh-label);
  font-weight: 900;
  color: #2563eb;
  margin-bottom: 6px;
}

/* 값(내용) */
.page-health-family .hf-mental-v{
  margin-left: 16px;
  font-size: var(--mh-value);
  font-weight: 800;
  color: rgba(15,23,42,.78);
  white-space: pre-wrap;
  line-height: var(--mh-line);
}

/* Tip */
.page-health-family .hf-mental-tip{
  margin-left: 12px;
  margin-top: 10px;
  font-size: var(--mh-tip);
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* 모바일: 1열 */
@media (max-width: 860px){
  .page-health-family .hf-mental-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
  [조절 가이드]
  - 글씨를 전체적으로 키우고 싶으면: --mh-font / --mh-label / --mh-value 를 14px 등으로
  - 카드가 답답하면: --mh-pad 를 14px / --mh-gap 을 14px
  - 더 둥글게: --mh-radius 16px
============================================================================ */