/* =========================================================
   GeneratePress Child Theme - Nunu Studio Blog Style
   Version: 2.0 (2026-03-02)

   ★ 설계 원칙:
   - .entry-content 셀렉터로 모든 글(신규+기존)에 일괄 적용
   - [style] 속성 셀렉터로 기존 인라인 스타일 글도 오버라이드
   - 320px 최소 너비부터 반응형 대응
   - 메인 컬러: #00897B (틸)
========================================================= */
/* ---------------------------------------------------------
   1. 본문 기본
--------------------------------------------------------- */
.entry-content {
  color: #333;
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}
/* 기존 글: wrapper div에 인라인 line-height 오버라이드 */
.entry-content > div[style] {
  line-height: 1.8 !important;
}
/* ---------------------------------------------------------
   2. 단락 (p) / 리스트 아이템 (li)
   ※ 기존 글의 !important 인라인은 CSS로 완전 오버라이드 불가
     (color #222→#333, font-size 20px→17px 차이는 미미)
--------------------------------------------------------- */
.entry-content p,
.entry-content li {
  color: #333 !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  margin-bottom: 10px;
}
/* ---------------------------------------------------------
   3. H2 - 좌측 틸 액센트 바 + 연한 배경
--------------------------------------------------------- */
.entry-content h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  border: none !important;
  border-left: 4px solid #00897B !important;
  border-radius: 0 !important;
  background: #f7fafa !important;
  padding: 14px 18px !important;
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}
/* ---------------------------------------------------------
   4. H3 - 얇은 좌측 라인
--------------------------------------------------------- */
.entry-content h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  border: none !important;
  border-left: 3px solid #bbb !important;
  padding: 0 0 0 14px !important;
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}
/* ---------------------------------------------------------
   5. 링크
--------------------------------------------------------- */
.entry-content a {
  color: #00897B !important;
  text-decoration: none;
}
.entry-content a:hover {
  text-decoration: underline;
}
/* ---------------------------------------------------------
   6. 리스트 (ul / ol)
--------------------------------------------------------- */
.entry-content ul,
.entry-content ol {
  padding-left: 24px !important;
  margin-left: 0 !important;
  margin-bottom: 16px !important;
}
.entry-content ul {
  list-style: disc !important;
}
.entry-content ol {
  list-style: decimal !important;
}
.entry-content li {
  margin-bottom: 8px !important;
  padding-left: 4px !important;
}
/* 중첩 리스트 */
.entry-content ul ul,
.entry-content ol ol {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-left: 20px !important;
}
/* ---------------------------------------------------------
   7. 테이블
--------------------------------------------------------- */
.entry-content table {
  display: block;
  overflow-x: auto;
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 15px;
}
.entry-content th,
.entry-content td {
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  vertical-align: top;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.entry-content th {
  background: #f5f5f5;
  font-weight: 600;
  color: #333;
}
.entry-content tr:nth-child(even) td {
  background: #fafafa;
}
/* 첫 번째 열: 제목 역할 (줄바꿈 방지) */
.entry-content th:first-child,
.entry-content td:first-child {
  min-width: 80px;
  white-space: nowrap;
}
/* ---------------------------------------------------------
   8. 이미지
--------------------------------------------------------- */
.entry-content img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}
/* 블로그 목록 - custom-post-box 레이아웃 */
.custom-post-box {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 40px;
  align-items: flex-start !important;
}
.custom-post-box .custom-thumb {
  flex-shrink: 0 !important;
  width: 300px !important;
  max-width: 300px !important;
}
.custom-post-box .custom-thumb img {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.custom-post-box .custom-summary {
  flex: 1 !important;
  min-width: 0 !important;
}
.custom-post-box .custom-summary h3 {
  font-size: 18px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.custom-post-box .custom-summary h3 a {
  color: #333 !important;
}
.custom-post-box .custom-summary h3 a:hover {
  color: #00897B !important;
}
.custom-post-box .excerpt {
  font-size: 15px;
  line-height: 1.5;
  color: #555;
}
/* 모바일: 세로 배치 */
@media (max-width: 768px) {
  .custom-post-box {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .custom-post-box .custom-thumb {
    width: 100% !important;
    max-width: 100% !important;
  }
  .custom-post-box .custom-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px;
  }
}
/* ---------------------------------------------------------
   9. 코드 블록
--------------------------------------------------------- */
.entry-content code {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f4f4f4;
  padding: 2px 6px;
  font-size: 14px;
  color: #c7254e;
  border-radius: 4px;
}
.entry-content pre {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin: 1em 0;
}
.entry-content pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}
/* ---------------------------------------------------------
   10. 인용 (blockquote)
--------------------------------------------------------- */
.entry-content blockquote {
  border-left: 4px solid #00897B;
  background: #f9fafb;
  padding: 14px 18px;
  margin: 20px 0;
  color: #555;
  font-style: italic;
}
/* ---------------------------------------------------------
   11. 강조
--------------------------------------------------------- */
.entry-content strong {
  font-weight: 600;
  color: #1a1a1a;
}
/* ---------------------------------------------------------
   12. 기존 글 인트로 박스 (배경색 있는 div)
--------------------------------------------------------- */
.entry-content > div[style*="background"],
.entry-content > div > div[style*="background"] {
  border-radius: 10px;
}
/* ---------------------------------------------------------
   13. 반응형 - 태블릿 (≤ 1024px)
--------------------------------------------------------- */
@media (max-width: 1024px) {
  .entry-content {
    font-size: 16px;
  }
  .entry-content h2 {
    padding: 12px 14px !important;
    margin-top: 32px !important;
  }
  .entry-content h3 {
    font-size: 20px !important;
  }
  .entry-content table {
    font-size: 14px;
  }
  .entry-content th,
  .entry-content td {
    padding: 8px 10px;
  }
}
/* ---------------------------------------------------------
   14. 반응형 - 모바일 (≤ 480px)
--------------------------------------------------------- */
@media (max-width: 480px) {
  .entry-title {
    font-size: 28px !important;
  }
  .inside-article {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .entry-content {
    font-size: 15px;
    line-height: 1.75;
  }
  .entry-content p,
  .entry-content li {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .entry-content h2 {
    padding: 10px 12px !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
  }
  .entry-content h3 {
    font-size: 20px !important;
    padding-left: 10px !important;
    margin-top: 22px !important;
  }
  .entry-content ul,
  .entry-content ol {
    padding-left: 18px !important;
  }
  .entry-content table {
    font-size: 13px;
  }
  .entry-content th,
  .entry-content td {
    padding: 6px 8px;
  }
  .entry-content th:first-child,
  .entry-content td:first-child {
    min-width: 60px;
  }
  .entry-content blockquote {
    padding: 10px 14px;
    margin: 14px 0;
  }
}
/* ---------------------------------------------------------
   15. 반응형 - 최소 너비 (≤ 320px)
--------------------------------------------------------- */
@media (max-width: 320px) {
  .entry-title {
    font-size: 24px !important;
  }
  .inside-article {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .entry-content {
    font-size: 14px;
  }
  .entry-content p,
  .entry-content li {
    font-size: 14px !important;
  }
  .entry-content h2 {
    font-size: 19px !important;
    padding: 8px 10px !important;
  }
  .entry-content h3 {
    font-size: 17px !important;
  }
  .entry-content th,
  .entry-content td {
    padding: 5px 6px;
    font-size: 12px;
  }
}