/* =========================================================
   health-check.css
   - 자가진단/상담 허브 + 상세 페이지 공용
   ========================================================= */

.hc-hero{
  padding: 18px 18px 14px;
}
.hc-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.hc-title{
  margin: 6px 0 6px;
  font-size: 22px;
  letter-spacing: -.4px;
}
.hc-sub{
  margin: 0;
  opacity: .80;
  line-height: 1.45;
}
.hc-sub--muted{ opacity:.72; }

.hc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.90);
}

.hc-quick{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hc-quick__btn{
  text-decoration:none;
  font-size: 14px;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(37,99,235,.06);
  color: rgba(15,23,42,.92);
}

.hc-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hc-card{
  padding: 14px;
  text-decoration:none;
  color: inherit;
}
.hc-card__head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.hc-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  font-size: 20px;
}
.hc-card__title{
  font-weight: 1000;
  font-size: 16px;
  margin-top: 2px;
}
.hc-card__desc{
  margin-top: 4px;
  opacity:.78;
  font-size: 13px;
  line-height: 1.35;
}
.hc-card__meta{
  margin-top: 10px;
  font-size: 12px;
  opacity:.70;
  font-weight: 800;
}

.hc-note{
  margin-top: 14px;
  padding: 14px 16px 16px;
}
.hc-note__title{
  margin: 4px 0 10px;
  font-size: 16px;
  font-weight: 1000;
}
.hc-list{
  margin-left: 12px;
  padding-left: 18px;
  line-height: 1.55;
  opacity: .88;
}
.hc-note__actions{
  margin-top: 10px;
}
.hc-link{
  font-weight: 1000;
  text-decoration:none;
}

.hc-page{ padding: 16px; }
.hc-page__head{ margin-bottom: 12px; }
.hc-page__title{ margin: 6px 0 6px; font-size: 26px; letter-spacing: -.4px; }
.hc-page__sub{ margin: 0; opacity: .78; }

.hc-box{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
}
.hc-h2{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 1000;
}
.hc-template{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 10px;
  font-weight: 900;
  opacity:.88;
}
.hc-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.12);
  font-weight: 1000;
  color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.90);
}
.hc-btn--primary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
}

@media (max-width: 980px){
  .hc-hero__top{ flex-direction: column; }
  .hc-grid{ grid-template-columns: 1fr; }
  .hc-template{ grid-template-columns: 1fr; }
}

/* =========================================================
   폰트 및 텍스트 크기 조절 (사용자 커스텀 영역)
   ========================================================= */

/* 메인 타이틀 (자가 진단/상담) */
.hc-title {
  font-size: 24px;         /* 기본 28px에서 24px로 하향 조정 권장 */
  font-weight: 800;        /* 1000은 너무 굵어 뭉칠 수 있으므로 700~800 추천 */
  letter-spacing: -0.5px;  /* 글자 간격을 좁혀 가독성 향상 */
}

/* 서브 텍스트 (설명글) */
.hc-sub {
  font-size: 14px;         /* 읽기 편한 기본 크기 */
  line-height: 1.6;        /* 줄 간격을 넓혀 전문적인 느낌 부여 */
  color: #475569;          /* 완전한 검정보다 세련된 슬레이트 그레이 */
}

/* 카드 제목 (마음 건강 체크 등) */
.hc-card__title {
  font-size: 16px;         /* 제목 강조를 위해 살짝 키움 */
  font-weight: 700;        /* 가독성 최적화 */
  margin-bottom: 4px;
}

/* 카드 설명글 및 메타 정보 */
.hc-card__desc {
  font-size: 13.3px;       /* 너무 작지 않게 조절 */
  line-height: 1.4;
}

.hc-card__meta {
  margin-left: 52px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* 리스트 및 일반 텍스트 */
.hc-list li {
  font-size: 13.5px;
  margin-bottom: 6px;      /* 항목 간 간격 확보 */
}
/* 메모 섹션 2등분 레이아웃 */
.hc-note__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 1:1 비율로 나눔 */
  gap: 30px;                     /* 사이 간격 */
}

.hc-note__title {
  border-bottom: 2px solid rgba(37, 99, 235, 0.1); /* 제목 하단 밑줄로 구분감 부여 */
  padding-bottom: 8px;
  color: #1e293b;
}

/* 모바일에서는 다시 한 줄로 보이게 처리 */
@media (max-width: 768px) {
  .hc-note__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* 1. 텍스트 크기 조절 (원하시는 대로 수정 가능) */
.hc-note__title { 
  font-size: 17px; /* 제목 크기 */
  font-weight: 800; 
  color: #1e293b;
  margin-bottom: 12px;
}

.hc-list li { 
  font-size: 14px; /* 본문 글씨 크기 */
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 2. 레이아웃 2등분 (그리드 적용) */
.hc-note__container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 5:5 비율 */
  gap: 40px; /* 사이 간격 넉넉히 */
  padding: 20px 0;
}

/* 3. 하단 팁(Tip) 박스 스타일 */
.hc-tip-box {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(37, 99, 235, 0.05); /* 연한 푸른색 배경 */
  border-radius: 12px;
  border-left: 4px solid #2563eb; /* 왼쪽 강조선 */
  display: flex;
  font-size: 14px;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #2563eb;
  font-weight: 700;
  transition: transform 0.2s;
}

.hc-tip-box:hover {
  transform: translateX(5px); /* 호버 시 살짝 움직임 */
}