/* =========================================================
 * /assets/css/health-hub.css (FINAL)
 * - 건강 라운지 허브 전용
 * - 배경(은은한 블루 톤) + 타이포 강약 + 4카드 1줄
 * ========================================================= */

.page-health-hub .hh-wrap{
  padding-top: 14px;
  padding-bottom: 34px;
}

/* HERO 배경(예전 느낌: 아주 옅은 블루 그라데이션) */
.page-health-hub .hh-hero{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(47,107,255,.12), transparent 60%),
    radial-gradient(900px 360px at 80% 20%, rgba(99,179,237,.10), transparent 55%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,246,255,.92));
  padding: 18px;
}

/* 2열 레이아웃 */
.hh-hero-grid{
  display: grid;
  grid-template-columns: 1.5fr 0.6fr;
  gap: 16px;
  align-items: start;
}

/* 좌측 */
.hh-badge{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(30,64,175,.95);
  background: rgba(47,107,255,.12);
  border: 1px solid rgba(47,107,255,.18);
}

.hh-title{
  margin: 14px 0 ;
  font-size: 22px;
  font-weight: 900;
  color: rgba(15,23,42,.96);
  line-height: 1.15;
}

.hh-desc{
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.66);
  line-height: 1.55;
}

/* 탭(통일 UX) */
.hh-tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 16px 0;
}
.hh-tab{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
  text-decoration: none;
}
.hh-tab:hover{ background: #fff; }
.hh-tab.is-active{
  background: rgba(47,107,255,.95);
  border-color: rgba(47,107,255,.95);
  color: #fff;
}

/* 안내 박스 */
.hh-note{
  margin-top: 16px;
  padding: 20px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.76);
  line-height: 1.55;
}
.hh-note-sub{
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

/* 칩 */
.hh-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.hh-chip{
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 16px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.78);
  text-decoration: none;
}
.hh-chip--ok{
  border-color: rgba(34,197,94,.25);
}
.hh-chip--link{
  border-color: rgba(47,107,255,.22);
  color: rgba(30,64,175,.96);
}
.hh-chip--link:hover{ background: #fff; }

/* 4개 카드(한줄) */
.hh-focus-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hh-focus{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.hh-focus:hover{
  background: #fff;
  border-color: rgba(47,107,255,.22);
  transform: translateY(-1px);
}
.hh-focus-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  border: 1px solid rgba(15,23,42,.10);
}
.hh-ico--bp{ background: rgba(59,130,246,.12); }
.hh-ico--sugar{ background: rgba(34,197,94,.12); }
.hh-ico--chol{ background: rgba(244,63,94,.10); }
.hh-ico--weight{ background: rgba(245,158,11,.12); }

.hh-focus-title{
  font-size: 14px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}
.hh-focus-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.58);
}
.hh-focus-go{
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  color: rgba(15,23,42,.70);
  font-weight: 900;
}

/* 우측 */
.hh-top-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-bottom: 10px;
}
.hh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.78);
  text-decoration:none;
}
.hh-btn:hover{ background:#fff; }
.hh-btn--primary{
  background: rgba(47,107,255,.95);
  border-color: rgba(47,107,255,.95);
  color:#fff;
}
.hh-btn--primary:hover{ filter: brightness(0.98); }

.hh-panel{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
}

.hh-panel + .hh-panel{ margin-top: 12px; }

.hh-panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hh-panel-title{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.hh-mini-link{
  font-size: 13px;
  font-weight: 900;
  color: rgba(30,64,175,.95);
  text-decoration:none;
}
.hh-mini-link:hover{ text-decoration: underline; }

.hh-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hh-metric{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.95);
}
.hh-metric-k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.60);
}
.hh-metric-v{
  margin-top: 4px;
  font-size: 20px;
  font-weight: 950;
  color: rgba(15,23,42,.95);
}
.hh-metric-s{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

.hh-empty{
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(248,250,252,.95);
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.70);
}
.hh-empty-sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  line-height: 1.45;
}

.hh-appt-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.hh-appt{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.95);
}
.hh-appt-dt{
  min-width: 92px;
}
.hh-appt-date{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.88);
}
.hh-appt-time{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.60);
}
.hh-appt-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.hh-appt-meta{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.58);
}

/* 하단 2열 */
.hh-bottom{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 14px;
}
.hh-list-card, .hh-guide-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.hh-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hh-card-title{
  font-size: 15px;
  font-weight: 950;
  color: rgba(15,23,42,.94);
}
.hh-card-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.56);
}
.hh-card-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hh-card-links a{
  font-size: 13px;
  font-weight: 950;
  color: rgba(30,64,175,.95);
  text-decoration:none;
}
.hh-card-links a:hover{ text-decoration: underline; }

.hh-file-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.hh-file{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.92);
  text-decoration:none;
}
.hh-file:hover{ background:#fff; border-color: rgba(47,107,255,.22); }
.hh-file-name{
  font-size: 13px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}
.hh-file-meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.58);
  white-space: nowrap;
}

.hh-bullets{
  margin: 8px 0 0 0;
  padding-left: 16px;
}
.hh-bullets li{
  font-size: 13px;
  font-weight: 850;
  color: rgba(15,23,42,.72);
  line-height: 1.55;
}
.hh-guide-card code{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 950;
}

/* 반응형 */
@media (max-width: 1180px){
  .hh-hero-grid{ grid-template-columns: 1fr; }
  .hh-top-actions{ justify-content:flex-start; }
  .hh-bottom{ grid-template-columns: 1fr; }
  .hh-focus-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hh-title{ font-size: 26px; }
  .hh-focus-grid{ grid-template-columns: 1fr; }
  .hh-metrics{ grid-template-columns: 1fr; }
  .hh-btn{ width: 100%; }
  .hh-top-actions{ flex-direction: column; }
}

/* =========================================================
   (A) 습관 칩 아래 “자주 쓰는 바로가기 버튼 줄”
   - 기존: 실비/예약이 hh-chip--link 로 들어가 칩처럼 작고 눈에 안 띔
   - 변경: hh-actions-row + hh-action 으로 분리해서 “버튼”처럼 보이게
   - 요청: height 32px 정도
   ========================================================= */

/* ✅ 습관칩 아래 간격: “걷기 아래로 내려온 느낌”을 확실히 주는 여백 */
.hh-actions-row{
  margin-top: 10px;              /* 칩 다음 줄 간격 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ✅ 핵심: 버튼 높이(34px) + 버튼처럼 보이게(패딩/테두리/배경) */
.hh-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;                  /* ✅ 수정값 */
  padding: 0 12px;               /* 버튼 폭/손가락 클릭 영역 */
  border-radius: 999px;

  /* “칩”이 아니라 “액션 버튼”으로 보이도록 대비를 조금 더 줌 */
  background: rgba(47,107,255,.10);
  border: 1px solid rgba(47,107,255,.22);
  color: rgba(30,64,175,.98);

  /* 글씨 크기 조정 */
  font-weight: 950;
  font-size: 13px;

  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 36px;
}

.hh-action:hover{
  background: rgba(47,107,255,.14);
  border-color: rgba(47,107,255,.32);
}

/* 모바일에서 버튼이 너무 붙으면 줄바꿈 */
@media (max-width: 640px){
  .hh-action{ width: 100%; }
}


/* =========================================================
   (B) 4개 카드(혈압/혈당/콜레스테롤/체중) “더 크게” + “좀 더 아래로”
   - 사용자 요청:
     1) 카드 자체를 크게(패딩/아이콘/간격)
     2) 카드 위치를 지금보다 아래로(버튼/칩 다음에 “숨 고르고” 나오게)
   ========================================================= */

/* ✅ 카드 블록 전체를 조금 더 아래로 내려서 중심부 빈 느낌을 줄임 */
.hh-focus-grid{
  margin-top: 26px;              /* 기존 14px 정도면 16~22 사이로 조정 추천 */
}

/* ✅ 카드 크기 키우기: padding / min-height / 아이콘 크기 */
.hh-focus{
  padding: 12px 14px;            /* 카드 내부 여백 증가 (기존 12px → 14px) */
  min-height: 60px;              /* 카드 “덩어리감” (원하면 76~82로) */
  border-radius: 18px;           /* 조금 더 부드럽게 */
}

/* ✅ 아이콘 박스도 같이 키워서 시각적 무게를 올림 */
.hh-focus-ico{
  width: 44px;                   /* 기존 38px → 44px */
  height: 44px;
  border-radius: 16px;
  font-size: 20px;               /* 이모지 크기(원하면 18~22 조절) */
}

/* ✅ 제목/설명 간격(글씨는 사용자가 조정) */
.hh-focus-title{
  /* font-size는 사용자가 조정 */
  letter-spacing: -0.01em;       /* 타이틀이 더 단단해 보이게 */
}
.hh-focus-sub{
  margin-top: 3px;               /* 설명이 타이틀 아래 “숨”을 가지게 */
}

/* ✅ 오른쪽 화살표 버튼도 조금 키워 클릭감 개선 */
.hh-focus-go{
  width: 34px;                   /* 기존 30px → 34px */
  height: 34px;
  font-size: 14px;
}

/* ✅ 4개를 “한 줄” 유지하되, 화면이 좁아지면 2줄로 자연스럽게 */
@media (max-width: 1180px){
  .hh-focus-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hh-focus-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
 * HEALTH HUB - 마감 패치 (오늘요약 높이 + hover 강화)
 * - 목표:
 *   1) 우측 '오늘 요약' 카드가 좌측 4카드(미니카드) 영역과 시각적으로 균형
 *   2) 카드 hover 시 테두리/배경/살짝 상승으로 "클릭 가능" 느낌 강화
 * ========================================================= */

/* ---------------------------------------------------------
 * 1) 우측 '오늘 요약' 카드 높이/여백 조정
 * - 너무 과하면 부담스럽기 때문에 "살짝"만 올림
 * - min-height로 바닥을 올려서 좌측 카드 블록과 균형 맞춤
 * --------------------------------------------------------- */
.page-health-hub .today-card,
.page-health-hub .hu-today,              /* (혹시 클래스명이 다를 때 대비) */
.page-health-hub .hu-summary-card,
.page-health-hub .hub-summary{
  min-height: 136px;                     /* ✅ 기존보다 약간만 ↑ (필요 시 128~152 사이 조절) */
  padding-top: 14px;                      /* 상단 숨통 */
  padding-bottom: 14px;
}

/* '오늘 요약' 내부에 2개 박스(최근 업로드/마지막 업데이트) 세로 정렬이 타이트하면 */
.page-health-hub .today-card .stat-grid,
.page-health-hub .hub-summary .stat-grid{
  gap: 12px;                              /* 내부 카드 간 간격 약간 ↑ */
}

/* ---------------------------------------------------------
 * 2) 카드 hover 강조 (테두리/배경/살짝 상승)
 * - 클릭 가능한 카드(4개 카드, 최근업로드 카드 등)에 적용
 * - 과한 그림자 대신 "테두리+배경" 중심으로 고급스럽게
 * --------------------------------------------------------- */

/* 공통: 카드 성격 박스들 */
.page-health-hub .card,
.page-health-hub .hu-card,
.page-health-hub .hub-card,
.page-health-hub .mini-card,             /* 4개 카드가 mini-card일 경우 */
.page-health-hub .health-mini-card,
.page-health-hub .ha-card{
  transition:
    transform .12s ease,
    border-color .12s ease,
    background-color .12s ease,
    box-shadow .12s ease;
}

/* hover/focus 시 "살짝" 강조 */
.page-health-hub .card:hover,
.page-health-hub .hu-card:hover,
.page-health-hub .hub-card:hover,
.page-health-hub .mini-card:hover,
.page-health-hub .health-mini-card:hover,
.page-health-hub .ha-card:hover{
  transform: translateY(-2px);            /* ✅ 살짝 떠오름 */
  border-color: rgba(47,107,255,.28);     /* ✅ 기존 파랑 라인 계열(사이트 톤과 통일) */
  background-color: rgba(47,107,255,.03); /* ✅ 배경 살짝만 물들이기 */
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

/* 키보드 접근성: 포커스 링(클릭 가능한 a/button 포함 카드에 유용) */
.page-health-hub .card:focus-within,
.page-health-hub .hu-card:focus-within,
.page-health-hub .hub-card:focus-within,
.page-health-hub .mini-card:focus-within,
.page-health-hub .health-mini-card:focus-within,
.page-health-hub .ha-card:focus-within{
  border-color: rgba(47,107,255,.40);
  box-shadow: 0 0 0 3px rgba(47,107,255,.14);
}

/* ---------------------------------------------------------
 * 3) 링크형 카드(전체 클릭되는 <a>)에만 hover 강조를 더 주고 싶을 때(선택)
 * --------------------------------------------------------- */
.page-health-hub a.card:hover,
.page-health-hub a.hu-card:hover,
.page-health-hub a.mini-card:hover{
  text-decoration: none;
}

/* ---------------------------------------------------------
 * 4) 모바일에서는 hover 상승을 줄여서 흔들림/오작동 느낌 방지
 * --------------------------------------------------------- */
@media (max-width: 640px){
  .page-health-hub .card:hover,
  .page-health-hub .hu-card:hover,
  .page-health-hub .hub-card:hover,
  .page-health-hub .mini-card:hover,
  .page-health-hub .health-mini-card:hover,
  .page-health-hub .ha-card:hover{
    transform: none;
  }
}

/* =========================================================
 * HEALTH HUB - hh-panel(오늘 요약) 높이 + hover 마감 패치
 * 대상:
 *  - <section class="hh-panel card" aria-label="오늘 요약">
 * ========================================================= */

/* 1) 오늘 요약 카드 높이/패딩: 좌측 4카드 블록과 균형 */
.page-health-hub .hh-panel.card{
  min-height: 148px;            /* ✅ 여기만 140~170 사이로 조절 */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 제목 아래 여백이 필요하면 */
.page-health-hub .hh-panel-title{
  margin-bottom: 10px;
}

/* 2) 카드 hover 강조(공통 card) */
.page-health-hub .card{
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.page-health-hub .card:hover{
  transform: translateY(-2px);
  border-color: rgba(47,107,255,.28);
  background-color: rgba(47,107,255,.03);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.page-health-hub .card:focus-within{
  border-color: rgba(47,107,255,.40);
  box-shadow: 0 0 0 3px rgba(47,107,255,.14);
}

@media (max-width:640px){
  .page-health-hub .card:hover{ transform:none; }
}

/* =========================================================
 * [FIX] 4개 카드 클릭 안 되는 현상 해결
 * 원인: 다른 레이어가 위를 덮거나(pointer-events), z-index가 낮음
 * ========================================================= */

/* 1) 카드 그리드 */
.page-health-hub .hh-focus-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

/* 2) 카드(링크) 자체 - 클릭 우선순위 강제 */
.page-health-hub .hh-focus{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;

  background: #fff;
  border: 1px solid rgba(15,23,42,.10);

  /* ✅ 클릭 안되는 현상 방지 핵심 */
  position: relative;
  z-index: 10;
  pointer-events: auto;

  /* hover 부드럽게 */
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

/* 3) 카드 hover 강조 */
.page-health-hub .hh-focus:hover{
  transform: translateY(-2px);
  border-color: rgba(47,107,255,.28);
  background: rgba(47,107,255,.03);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* 4) 카드 내부 아이콘/텍스트 */
.page-health-hub .hh-focus-ico{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  font-size: 18px;
}

.page-health-hub .hh-focus-txt{
  min-width: 0;
}

.page-health-hub .hh-focus-title{
  font-weight: 900;
  color: rgba(15,23,42,.92);
  line-height: 1.1;
}

.page-health-hub .hh-focus-sub{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.62);
  line-height: 1.25;
}

.page-health-hub .hh-focus-go{
  margin-left: auto;
  font-weight: 900;
  opacity: .75;
}

/* 5) 반응형 */
@media (max-width: 980px){
  .page-health-hub .hh-focus-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .page-health-hub .hh-focus-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
 * [EMERGENCY] 혹시 위에 투명 레이어가 덮는 경우 강제 해제
 * ========================================================= */

/* ✅ 아주 흔한 케이스:
   상단 안내 박스/배경 그라데이션 pseudo-element가 overlay로 깔려서 클릭을 막음
   아래는 안전하게 클릭만 살리는 방어코드 */
.page-health-hub .hh-hero::before,
.page-health-hub .hh-hero::after{
  pointer-events: none;
}

/* =========================================================
 * FINAL PATCH (20260202)
 * - 우측 병원예약 미니카드 높이 컴팩트
 * - "이번 주 권장 루틴" 링크를 우측 상단으로
 * ========================================================= */

/* 공통: 카드 헤더형(좌 타이틀 / 우 링크) */
.hh-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

/* 1) 우측 병원/의원 예약 미니카드 컴팩트 */
.hh-appt-list{
  gap: 8px;
}

.hh-appt{
  padding:8px 10px;      /* ✅ 높이 줄이기 */
  gap:10px;
}

.hh-appt-dt{
  min-width:76px;         /* 날짜/시간 영역 살짝 줄임 */
}

.hh-appt-date{
  font-size:11px;
  line-height:1.1;
}

.hh-appt-time{
  font-size:11px;
  line-height:1.1;
  margin-top:3px;
}

.hh-appt-title{
  font-size:13px;
  line-height:1.2;
  margin-bottom:2px;
}

.hh-appt-meta{
  font-size:11px;
  line-height:1.2;
  margin-top:2px;
}

/* 루틴 카드 아래쪽 여백 최소화 */
.hh-panel .hh-bullets{
  margin-bottom:0;
}

/* === FIX: 건강 라운지 우측 상단 "자료 업로드" hover 글씨 안보임 === */
/* hh-action이 공통 버튼 클래스라면, 업로드 버튼에만 클래스를 하나 더 주는게 베스트 */

.hh-actions .hh-action{
  color:#0f172a;            /* 기본 글씨 (만약 기본이 흰색이면 아래에서 override됨) */
}

/* 업로드(Primary) 버튼: 기본은 파랑/흰글씨, hover에도 흰글씨 유지 */
.hh-actions .hh-action.hh-action--primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.hh-actions .hh-action.hh-action--primary:hover,
.hh-actions .hh-action.hh-action--primary:focus{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;               /* ✅ hover 시 글씨 고정 */
}

/* 만약 hover 시 배경이 밝아지는 디자인이면 아래처럼(대안)
.hh-actions .hh-action.hh-action--primary:hover{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
*/
/* 오른쪽 컬럼(병원예약/권장루틴/요약카드 등) */
.health-side{
  display:flex;
  flex-direction:column;
  gap:14px;          /* ✅ 여기 숫자로 간격 조절 (12~18 추천) */
}


/* ===== 건강 허브: 하단(최근/부모님/안내) 정렬 FIX ===== */
.health-bottom{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 980px){
  .health-bottom{ grid-template-columns:1fr; }
}

.health-card{ padding:12px; }

.health-h2{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:-.2px;
}

.health-file-list{
  list-style:none;
  margin:0;
  padding:0;
}

.health-file-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-top:1px solid #eef2f7;
}

.health-file-item:first-child{ border-top:0; }

.health-file-link{
  flex:1;
  min-width:0;
  font-weight:700;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.health-file-meta{
  flex:0 0 auto;
  font-size:12px;
  opacity:.65;
}

/* =========================================================
 * [TUNE] 이번 주 권장 루틴 카드 높이 줄이기
 * - 패딩/라인하이트/리스트 간격 압축
 * ========================================================= */
.health-routine{
  padding: 10px 14px;          /* (기존보다 ↓) */
}

.health-routine .card-head,
.health-routine .health-card-head,
.health-routine .health-h2{
  margin-bottom: 8px;          /* 제목 아래 간격 ↓ */
}

.health-routine ul{
  margin: 6px 0 0;
  padding-left: 16px;
}

.health-routine li{
  margin: 4px 0;               /* 리스트 줄 간격 ↓ */
  line-height: 1.25;           /* 텍스트 높이 ↓ */
  font-size: 12px;             /* 살짝 작게 */
}

/* 카드 안쪽 요소가 gap을 쓰는 경우 대비 */
.health-routine .row,
.health-routine .stack{
  gap: 6px;
}

/* ✅ 병원예약 ↔ 권장루틴 사이 간격 추가 */
.page-health-hub #hh-appointments{ margin-bottom: 14px; }

/* =========================================================
 * ✅ 업로드 목록 자동 순번 (1. 2. 3.)
 * ========================================================= */
.page-health-hub .health-file-list{
  counter-reset: fileNo;
}
.page-health-hub .health-file-item{
  counter-increment: fileNo;
  position: relative;
  padding-left: 20px; /* 번호 공간 */
}
.page-health-hub .health-file-item::before{
  content: counter(fileNo) ".";
  position: absolute;
  left: 0;
  top: 10px;          /* 줄맞춤(필요시 8~12) */
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,23,42,.70);
}

.page-health-hub .health-data .health-h2{
  font-size: 16px;       /* ✅ 제목 크기 (추천 15~17) */
  font-weight: 950;
  letter-spacing: -0.2px;
  margin: 0 0 10px;      /* 제목 아래 여백 */
}

/* 파일명(리스트 내용) */
.page-health-hub .health-file-link{
  font-size: 13px;       /* ✅ 요청값 */
  font-weight: 900;
  line-height: 1.35;
}

/* 오른쪽 날짜(메타) */
.page-health-hub .health-file-meta{
  font-size: 12px;       /* 날짜는 12가 가장 균형 좋음 */
  font-weight: 800;
  opacity: .7;
}