/* =========================================================
   HIN v1 – Additional CSS Patch (WP theme-agnostic)
   - Font-face 강제 적용
   - 본문 폭 넓힘 + 중앙정렬 보정
   - 표: 가로 스크롤 없이 화면 폭에 맞게 자동 줄바꿈
   - 목차: "카드와 카드 사이 간격"만 확 줄임 (목차 섹션 한정)
   - 섹션 카드화 + 문단 가독성(줄간격/여백) 개선
   - "다음 읽을거리" 카드 크기/정렬 개선
========================================================= */

/* ===== Font (global for hin-post only) ===== */
@font-face{
  font-family:'KyoboHandwriting2020ParkDoYeon';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* 폰트 적용이 "실제 post"에서 안 먹히는 케이스 대비:
   - .hin-post 자신 + 내부 모든 요소에 !important로 고정 */
.hin-post,
.hin-post *{
  font-family:'KyoboHandwriting2020ParkDoYeon', system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

/* ===== Readability (line-height / paragraph spacing) ===== */
.hin-post{
  line-height:1.95 !important;          /* 1.85 -> 1.95: '살짝만' 넓힘 */
}
.hin-post .hin-p{
  margin:12px 0 !important;             /* 문단 구분감 */
}
.hin-post .hin-ul li{ margin:6px 0 !important; }
.hin-post .hin-ol li{ margin:8px 0 !important; }

/* ===== Content width & centering ===== */
/* 글 본문 컨테이너 자체 */
.hin-post .hin-wrap{
  max-width:1040px !important;          /* 980보다 조금 더 넓게(원하면 1120까지 가능) */
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

/* 테마가 본문 컬럼을 왼쪽에 박아두는 경우 중앙 보정 */
#primary,
.content-area,
.site-content,
.site-main,
.entry-content,
.wp-site-blocks,
.wp-block-post-content{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* 테마가 max-width를 강제하는 경우 상한 완화 */
:where(.site-content, .site-main, .entry-content, .wp-block-post-content, .wp-site-blocks){
  max-width:1200px !important;
  width:100% !important;
}

/* ===== Section separation (sec1~sec8 카드화) ===== */
.hin-post .hin-wrap > section[id^="sec"]{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:18px 16px;
  margin:14px 0;                        /* 섹션끼리 구분감 */
}
.hin-post .hin-wrap > section[id^="sec"] .hin-h2{
  margin:0 0 10px !important;
}

/* 기존 HR은 섹션 카드화하면 과하니 숨김 */
.hin-post .hin-hr{ display:none !important; }

/* ===== TOC spacing (목차 카드 간격만 줄이기) ===== */
/* "목차 섹션"에만 적용 */
.hin-post section[aria-label="목차"] .hin-toc{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;  /* 데스크톱 2열 */
  gap:6px !important;                        /* <-- 카드와 카드 사이 간격(핵심) */
}

/* 링크/내부 요소가 테마 margin으로 벌어지는 것 싹 제거 */
.hin-post section[aria-label="목차"] .hin-toc > a{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.hin-post section[aria-label="목차"] .hin-toc > a *{
  margin:0 !important;
}

/* 카드 자체도 margin 제거 + 패딩 살짝 줄임 */
.hin-post section[aria-label="목차"] .hin-tocItem{
  margin:0 !important;
  padding:10px 12px !important;
}

/* 모바일은 1열 */
@media (max-width:720px){
  .hin-post section[aria-label="목차"] .hin-toc{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
}

/* ===== TABLE: fit to container (no horizontal scroll) ===== */
.hin-post .table-wrap{
  overflow-x:hidden !important;          /* 스크롤바 제거 */
  width:100% !important;
  max-width:100% !important;
  border-radius:14px;
}

/* 핵심: min-width 제거 + 화면 폭 안에서 칸 분배 */
.hin-post .table-wrap table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;               /* <-- min-width(640px) 무력화 */
  table-layout:fixed !important;        /* 화면 폭에 맞게 */
}

.hin-post .table-wrap th,
.hin-post .table-wrap td{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  padding:10px 10px !important;
}

/* 모바일에서 표 가독성 보정 */
@media (max-width:720px){
  .hin-post .table-wrap th,
  .hin-post .table-wrap td{
    font-size:13px !important;
    padding:8px 8px !important;
  }
}

/* ===== "다음 읽을거리" 카드 디자인 개선 ===== */
.hin-post .hin-next{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;  /* 데스크톱 2열로 보기 좋게 */
  gap:10px !important;
}
.hin-post .hin-next a{
  display:block !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  padding:14px 14px !important;
  text-decoration:none !important;
  color:inherit !important;
  background:#ffffff !important;
}
.hin-post .hin-next a strong{
  display:block !important;
  font-size:15px !important;
  margin:0 0 6px !important;
}
.hin-post .hin-next a span{
  display:block !important;
  font-size:12.5px !important;
  color:#64748b !important;
  line-height:1.7 !important;
}
.hin-post .hin-next a:hover{
  background:#f8fafc !important;
}

@media (max-width:720px){
  .hin-post .hin-next{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   [SITE-WIDE PATCH] Single Post content centering & width
   - 창 크기 바뀌어도 가운데 정렬이 따라오게 테마 컨테이너를 보정
   - 너무 과격하게 전체 레이아웃을 깨지 않도록 "single post"에만 한정
========================================================= */

body.single-post #primary,
body.single-post .content-area,
body.single-post .site-main,
body.single-post .entry-content,
body.single-post .wp-block-post-content{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single-post #primary,
body.single-post .content-area,
body.single-post .site-main{
  width: 100% !important;
  max-width: 1280px !important; /* 전체 본문 컬럼 상한 (광고 좌/우 여백 확보용) */
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* 일부 테마가 #content / .site-content에 좌측 offset을 주는 케이스 보정 */
body.single-post #content,
body.single-post .site-content{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* 블록 테마에서 중앙정렬이 깨지는 경우: 내부 콘텐츠 폭만 중앙으로 */
body.single-post .wp-site-blocks{
  width: 100% !important;
}

/* 다음 읽을거리 카드: 세로 크기 줄이기 */
.hin-post .hin-next a{
  padding:10px 12px !important;
}

.hin-post .hin-next a strong{
  margin:0 0 4px !important;
  line-height:1.35 !important;
}

.hin-post .hin-next a span{
  line-height:1.45 !important;
  margin:0 !important;
}

.hin-post section[aria-label="참고자료"]{
  margin-top:18px !important;
  clear: both !important;
}

/* ===== Webfont (Noonnu 공식 스니펫) ===== */
@font-face{
  font-family:'KyoboHandwriting2020ParkDoYeon';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* ===== 1) 폰트 강제 적용: 현재 글( clean-article )에만 ===== */
#postTop.clean-article,
#postTop.clean-article *{
  font-family:'KyoboHandwriting2020ParkDoYeon', system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

/* ===== 2) 본문 폭/가독성 ===== */
#postTop.clean-article{
  max-width: 980px !important;   /* 원래 860px → 넓힘 */
  margin-left:auto !important;
  margin-right:auto !important;
  line-height: 1.95 !important;
}

/* ===== 3) 목차 카드 간격만 줄이기 (현재 구조: .toc-list가 grid) ===== */
#postTop.clean-article .toc-list{
  gap: 6px !important;           /* 원래 10px → 6px */
}
#postTop.clean-article .toc a{
  padding: 10px 12px !important; /* 카드 패딩도 살짝 줄임 */
}

/* ===== 4) 표: 가로 스크롤 없애고 화면폭에 맞추기 ===== */
#postTop.clean-article .table-wrap{
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

#postTop.clean-article .table-wrap table{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important; /* 핵심 */
}

#postTop.clean-article .table-wrap th,
#postTop.clean-article .table-wrap td{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 모바일 표 글자/패딩 보정 */
@media (max-width:720px){
  #postTop.clean-article .table-wrap th,
  #postTop.clean-article .table-wrap td{
    font-size: 13px !important;
    padding: 8px !important;
  }
}