/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==============================
   1) 데스크톱 레이아웃 (>=1025px)
============================== */
@media (min-width: 1025px) {
  /* 전체 레이아웃 wrapper */
  .container.grid-container {
    max-width: 1260px !important;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  /* 본문 + 사이드바 2단 grid 레이아웃 */
  .generate-columns-container {
    display: grid !important;
    grid-template-columns: 1000px 260px !important;  /* 본문+사이드바 포함 총 1260px */
    column-gap: 0 !important;
    box-sizing: border-box;
  }

  /* 본문 wrapper */
  #primary.content-area {
    width: 1000px !important; /* 본문 전체 크기 (내용 + 여백) */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* 아티클 내부 전체 */
  .inside-article {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  /* 본문 내용: 900px 고정 */
  .entry-content {
    width: 900px !important;  /* 핵심: 본문 내용 폭 고정 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* 내부 요소들 */
  .entry-content > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 사이드바 */
  #right-sidebar {
    width: 360px !important;
    box-sizing: border-box;
  }
}

/* ==============================
   2) 모바일 레이아웃 (<=768px)
============================== */

/* 모바일에서 본문 좌우 여백 + CLS 최적화 */
@media (max-width: 768px) {
  body.single-post .inside-article,
  body.blog .inside-article,
  body.archive .inside-article {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* CLS 개선: 그리드 및 카드 레이아웃 고정 */
  .generate-columns-container {
    grid-template-columns: 1fr !important;  /* 1열 */
    min-height: 100vh;
  }

  #right-sidebar {
    order: 2;
    margin-top: 20px;
  }

  .custom-post-box .custom-thumb {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    min-height: 202px;  /* home-card-mobile 높이 예약 */
  }

  .custom-post-box .custom-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .related-posts {
    min-height: 200px;  /* 동적 콘텐츠 공간 예약 */
  }

  /* 모바일에서 본문 폭 100% 고정 */
  .entry-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==============================
   3) 검색창 스타일
============================== */

/* 검색 입력창 높이 및 글자 크기 조정 */
.widget_search input[type="search"] {
  height: 32px !important;             /* 전체 입력창 높이 조절 */
  padding: 4px 8px !important;         /* 위아래/좌우 여백 */
  font-size: 15px !important;          /* 텍스트 크기 */
  line-height: 1.4 !important;         /* 줄 높이로 정렬 */
  box-sizing: border-box;              /* 패딩 포함 너비 계산 */
}

/* 검색 버튼(<button>) 높이 및 글자 크기 정리 */
.widget_search button {
  height: 32px !important;             /* 버튼 높이 입력창과 동일하게 */
  padding: 0 12px !important;          /* 좌우 여백만 설정 */
  font-size: 15px !important;          /* 글자 크기 동일하게 */
  line-height: 1.4 !important;         /* 줄 높이 */
  white-space: nowrap !important;      /* 버튼 안 텍스트 줄바꿈 방지 */
  box-sizing: border-box;              /* 너비 계산 방식 통일 */
  font-family: "Noto Sans KR", sans-serif; /* 한글 폰트 명시 */
}

/* ==============================
   4) 링크 & 헤딩 & 코드
============================== */

/* 기본 상태에서는 밑줄 제거 */
a {
  text-decoration: none;
}

/* 마우스 오버 시 밑줄 표시 */
a:hover {
  text-decoration: underline;
}

/* 헤딩 크기 조정 */
h1 {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 1em;
}
h2 {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 1em;
}
h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 0.8em;
}

/* <code> 태그 스타일 */
code {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  font-size: 14px;
  color: #c7254e;
  border-radius: 4px;
}

/* 관련 글 박스 */
.related-posts {
  border: 2px solid #e9e9e9;
  border-radius: 20px;
  padding: 20px;
}

/* ==============================
   5) 모바일 글 들여쓰기 제거
============================== */
@media (max-width: 768px) {
  /* 본문 전체 들여쓰기 제거 */
  .entry-content p {
    text-indent: 0 !important;         /* 첫 줄 들여쓰기 제거 */
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;       /* 강제 좌측 정렬 */
  }

  /* 목록 들여쓰기 최소화 */
  .entry-content ul,
  .entry-content ol {
    padding-left: 20px !important;     /* 40px → 20px */
    margin-left: 0 !important;
  }

  .entry-content li {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* 인용구 들여쓰기 줄이기 */
  .entry-content blockquote {
    margin-left: 10px !important;
    padding-left: 15px !important;
  }

  /* 이미지 들여쓰기 제거 */
  .entry-content img,
  .entry-content figure {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 테이블 들여쓰기 제거 */
  .entry-content table {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==============================
   6) 카드 썸네일 기본 스타일
============================== */

.custom-post-box .custom-thumb {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 16 / 9; /* 또는 4 / 3, 사이트에 맞는 비율 */
  overflow: hidden;
}
.custom-post-box .custom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==============================
   7) 본문 타이포그래피 (한국어 단어 중간 잘림 방지)
============================== */

.entry-content,
.entry-content p {
  word-break: keep-all;
  line-height: 1.7;
  font-size: 16px;
}

/* 제목 아래 첫 단락 여백 */
.entry-content > p:first-of-type {
  margin-top: 0.5em;
}

/* ==============================
   8) 테이블 최적화 (모바일)
============================== */

@media (max-width: 768px) {
  /* 모바일 테이블: 가로 스크롤 + 최소한의 줄바꿈 */
  .entry-content table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 8px;
    font-size: 14px;
    word-break: keep-all;
  }
}