/*
Theme Name: Kadence Child - HoMidLife Custom Styles
Description: HoMidLife 블로그를 위한 추가 사용자 정의 스타일입니다.
Author: 김성훈(호중년)
*/

/* --- 전역 기본 설정 --- */
body {
  -webkit-font-smoothing: antialiased; /* 폰트 렌더링을 더 부드럽게 합니다. */
  -moz-osx-font-smoothing: grayscale; /* Mac OS에서 폰트 렌더링을 부드럽게 합니다. */
  background: #ffffff !important; /* 웹사이트 배경색을 흰색으로 강제 설정합니다. */
  color: #111827; /* 기본 텍스트 색상을 어두운 회색으로 설정합니다. */
  margin: 0; /* body 요소의 기본 마진을 제거합니다. */
  font-family: 'Inter', sans-serif; /* 블로그 전체의 기본 폰트를 'Inter'로 통일합니다. */
}

/* --- 공용 컨테이너: 헤더, 본문, 푸터의 콘텐츠 폭 및 중앙 정렬 --- */
/* 블로그의 핵심 콘텐츠 영역(헤더, 본문 컨테이너, 푸터)의 최대 너비를 설정하고 중앙에 정렬합니다. */
.homidlife-container,
.site-header,
.site-footer {
  max-width: 1024px; /* 콘텐츠 영역의 최대 폭을 1024px로 제한합니다. */
  margin-left: auto;
  margin-right: auto; /* 좌우 마진을 자동으로 설정하여 중앙 정렬합니다. */
  padding-left: 16px;
  padding-right: 16px; /* 콘텐츠와 화면 가장자리 사이에 좌우 패딩을 추가합니다. */
  box-sizing: border-box; /* 패딩이 요소의 너비에 포함되도록 설정합니다. */
  background: #ffffff !important; /* 이 컨테이너들의 배경색을 흰색으로 강제 설정합니다. */
}

/* --- 본문 내용 영역 (글의 가독성을 위한 폭 및 간격 조정) --- */
/* 개별 글 내용이 표시되는 메인 영역(.site-main)의 폭과 상하단 간격을 조절합니다. */
.site-main {
  max-width: 750px; /* 글 내용의 가독성을 최적화하기 위해 폭을 750px로 제한합니다. */
  margin-left: auto;
  margin-right: auto; /* 좌우 마진을 자동으로 설정하여 중앙 정렬합니다. */
  padding-top: 0px !important; /* 메인 콘텐츠 위쪽(헤더와의) 간격을 0px로 설정합니다. */
  padding-bottom: 0px !important; /* 메인 콘텐츠 아래쪽(푸터와의) 간격을 0px로 설정합니다. (새로 조정) */
  padding-left: 16px; /* 좌우 패딩을 유지합니다. */
  padding-right: 16px; /* 좌우 패딩을 유지합니다. */
  box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정합니다. */
  background: #ffffff !important; /* 배경색을 흰색으로 강제 설정합니다. */
}

/* --- 헤더 (로고, 내비게이션, 검색창의 배치 및 간격) --- */
/* 블로그 상단 헤더의 요소들을 Flexbox를 사용하여 정렬하고 간격을 조절합니다. */
.site-header {
  display:flex; /* Flexbox 레이아웃을 활성화합니다. */
  align-items:center; /* 자식 요소들을 세로 중앙에 정렬합니다. */
  justify-content:space-between; /* 로고와 내비게이션을 양쪽 끝으로 정렬합니다. */
  gap: 12px; /* 로고와 내비게이션 사이의 간격을 12px로 설정합니다. */
  padding-top: 10px !important; /* 헤더 위쪽 간격을 10px로 설정합니다. */
  padding-bottom: 0px !important; /* 헤더 아래쪽 간격을 0px로 설정합니다. */
  flex-wrap: nowrap; /* 헤더 요소들이 줄바꿈되지 않도록 합니다. */
}

/* --- 로고 이미지 스타일 --- */
/* 헤더 내 로고 이미지의 크기를 조절합니다. */
.site-logo img {
  max-height:56px; /* 로고 이미지의 최대 높이를 56px로 제한합니다. */
  width:auto; /* 이미지의 가로세로 비율을 유지합니다. */
  display:block; /* 로고를 블록 요소로 설정합니다. */
  flex-shrink: 0; /* 로고가 공간 부족 시 줄어들지 않도록 합니다. */
}

/* --- 주요 내비게이션 메뉴 스타일 (데스크톱 최적화) --- */
/* 데스크톱 환경에서 메인 내비게이션 메뉴 항목들의 스타일을 정의합니다. */
.main-navigation {
  display:flex; /* Flexbox 레이아웃을 활성화합니다. */
  gap:16px; /* 메뉴 아이템들 사이의 간격을 16px로 설정합니다. */
  align-items:center; /* 메뉴 아이템들을 세로 중앙에 정렬합니다. */
  flex-wrap: nowrap !important; /* 메뉴 아이템들이 한 줄에 유지되도록 강제합니다. (매우 중요!) */
  min-width: 0; /* Flexbox 아이템의 최소 너비를 0으로 설정하여 공간을 확보합니다. */
  overflow-x: auto; /* 내용이 넘칠 경우 가로 스크롤을 허용합니다. (최후의 수단) */
  -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤을 활성화합니다. */
  white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 강제합니다. */
}
.main-navigation a {
  color:#111827; /* 메뉴 텍스트 색상을 어두운 회색으로 설정합니다. */
  text-decoration:none; /* 메뉴 텍스트의 밑줄을 제거합니다. */
  font-weight:500; /* 메뉴 텍스트의 폰트 굵기를 설정합니다. */
  letter-spacing:0.02em; /* 메뉴 텍스트의 자간을 조절합니다. */
  white-space: nowrap !important; /* 메뉴 텍스트가 줄바꿈되지 않도록 강제합니다. */
  font-size: 16px !important; /* 메뉴 텍스트의 폰트 크기를 16px로 조정하여 가독성을 높였습니다. */
  font-family: 'Inter', sans-serif !important; /* 내비게이션 폰트를 'Inter'로 통일합니다. */
  flex-shrink: 0; /* 링크 텍스트가 공간 부족 시 줄어들지 않도록 합니다. */
}
.main-navigation a:hover {
  color:#1a73e8; /* 마우스 오버 시 메뉴 텍스트 색상을 파란색으로 변경합니다. */
  text-decoration:underline; /* 마우스 오버 시 메뉴 텍스트에 밑줄을 추가합니다. */
}

/* --- 푸터 (하단 영역의 배치 및 스타일) --- */
/* 블로그 하단 푸터 영역의 간격과 텍스트 스타일을 정의합니다. */
.site-footer {
  padding-top: 0px !important; /* 푸터 위쪽(메인 콘텐츠와의) 간격을 0px로 설정합니다. (새로 조정) */
  padding-bottom: 50px !important; /* 푸터 아래쪽에 여유 공간을 50px로 설정합니다. */
  color: #6b7280; /* 푸터 텍스트 색상을 회색으로 설정합니다. */
  font-size: 14px; /* 푸터 텍스트의 폰트 크기를 14px로 조정하여 가독성을 높였습니다. */
  text-align: center; /* 푸터 텍스트를 중앙 정렬합니다. */
}

/* --- 반응형 간소화 (태블릿 및 모바일 최적화) --- */
/* 화면 폭이 768px 이하일 때 적용되는 스타일 (태블릿 및 모바일) */
@media (max-width: 768px) {
  .main-navigation {
    gap: 12px; /* 메뉴 아이템 간 간격을 12px로 줄입니다. */
    flex-wrap: wrap; /* 메뉴 아이템들이 줄바꿈되도록 허용합니다. */
    justify-content: flex-end; /* 메뉴를 오른쪽으로 정렬합니다. */
  }
  .homidlife-container, .site-header, .site-main, .site-footer {
    padding-left: 12px;
    padding-right: 12px; /* 모바일 환경에서 좌우 패딩을 줄입니다. */
  }
}

/* --- 게시물 목록 제목 폰트 크기 조절 (반응형 최적화) --- */
/* 블로그 메인 및 카테고리 페이지에 표시되는 각 게시물 제목의 폰트 크기를 기기별로 조절합니다. */
.entry-title a { /* 모든 게시물 제목 링크에 적용 (데스크톱 기본) */
    font-size: 20px !important; /* 데스크톱 기본 폰트 크기를 20px로 설정합니다. */
    line-height: 1.4em !important; /* 줄 간격을 설정합니다. */
    max-height: 2.8em; /* 제목이 2줄을 초과할 경우 높이를 제한합니다. (1.4em * 2줄) */
    overflow: hidden; /* 제한된 높이를 초과하는 텍스트는 숨깁니다. */
    text-overflow: ellipsis; /* 숨겨진 텍스트 대신 '...'을 표시합니다. */
    display: -webkit-box; /* 웹킷 기반 브라우저에서 텍스트를 박스 형태로 표시합니다. */
    -webkit-line-clamp: 2; /* 텍스트를 2줄로 제한합니다. */
    -webkit-box-orient: vertical; /* 텍스트 방향을 세로로 설정합니다. */
}

@media (max-width: 900px) { /* 태블릿 환경 (화면 폭 900px 이하) */
    .entry-title a {
        font-size: 18px !important; /* 태블릿에서 폰트 크기를 18px로 조절합니다. */
    }
}

@media (max-width: 600px) { /* 모바일 환경 (화면 폭 600px 이하) */
    .entry-title a {
        font-size: 16px !important; /* 모바일에서 폰트 크기를 16px로 조절합니다. */
    }
}