/* =========================================================
   HIN v1.2 – Additional CSS Patch (WP theme-agnostic)
   - Font-face: GangwonEducationModuche 적용
   - 본문 폭 넓힘 + 중앙정렬 보정
   - 표: 가로 스크롤 없이 화면 폭에 맞게 자동 줄바꿈
   - 목차 카드 간격 조정
   - 섹션 카드화 + 문단 가독성 개선
   - 다음 읽을거리 카드 크기/정렬 개선
   - clean-article / hin-post 양쪽 구조 대응
========================================================= */

/* ===== Font: GangwonEducationModuche ===== */
@font-face{
  font-family:'GangwonEducationModuche';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFLightA.woff') format('woff');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'GangwonEducationModuche';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===== Font apply: hin-post structure ===== */
.hin-post,
.hin-post *{
  font-family:'GangwonEducationModuche', system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

/* ===== Font apply: clean-article structure ===== */
#postTop.clean-article,
#postTop.clean-article *{
  font-family:'GangwonEducationModuche', system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

/* =========================================================
   Base readability
========================================================= */

.hin-post{
  font-size:20px !important;
  line-height:2.02 !important;
  letter-spacing:-0.15px !important;
  font-weight:300 !important;
}

.hin-post .hin-p,
.hin-post p,
.hin-post li{
  font-size:20px !important;
  line-height:2.02 !important;
  font-weight:300 !important;
}

.hin-post strong,
.hin-post b,
.hin-post .hin-h2,
.hin-post .hin-h3,
.hin-post summary{
  font-weight:700 !important;
}

.hin-post .hin-p{
  margin:12px 0 !important;
}

.hin-post .hin-ul li{
  margin:7px 0 !important;
}

.hin-post .hin-ol li{
  margin:9px 0 !important;
}

/* =========================================================
   Content width & centering
========================================================= */

.hin-post .hin-wrap{
  max-width:1040px !important;
  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 card layout: hin-post
========================================================= */

.hin-post .hin-wrap > section[id^="sec"]{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:20px 18px;
  margin:16px 0;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.hin-post .hin-wrap > section[id^="sec"] .hin-h2{
  margin:0 0 12px !important;
  font-size:28px !important;
  line-height:1.45 !important;
}

.hin-post .hin-hr{
  display:none !important;
}

/* =========================================================
   TOC spacing: hin-post
========================================================= */

.hin-post section[aria-label="목차"] .hin-toc{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
}

.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;
}

.hin-post section[aria-label="목차"] .hin-tocItem{
  margin:0 !important;
  padding:14px 15px !important;
  min-height:76px !important;
  font-size:19px !important;
  line-height:1.65 !important;
}

@media (max-width:720px){
  .hin-post section[aria-label="목차"] .hin-toc{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
}

/* =========================================================
   Table: hin-post
========================================================= */

.hin-post .table-wrap{
  overflow-x:hidden !important;
  width:100% !important;
  max-width:100% !important;
  border-radius:14px !important;
}

.hin-post .table-wrap table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
  font-size:17px !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:12px 11px !important;
  line-height:1.75 !important;
}

.hin-post .table-wrap th{
  font-weight:700 !important;
}

@media (max-width:720px){
  .hin-post .table-wrap th,
  .hin-post .table-wrap td{
    font-size:15px !important;
    padding:9px 8px !important;
    line-height:1.65 !important;
  }
}

/* =========================================================
   Next reading cards: hin-post
========================================================= */

.hin-post .hin-next{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

.hin-post .hin-next a{
  display:block !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  padding:12px 14px !important;
  text-decoration:none !important;
  color:inherit !important;
  background:#ffffff !important;
}

.hin-post .hin-next a strong{
  display:block !important;
  font-size:19px !important;
  margin:0 0 5px !important;
  line-height:1.4 !important;
  font-weight:700 !important;
}

.hin-post .hin-next a span{
  display:block !important;
  font-size:16px !important;
  color:#64748b !important;
  line-height:1.6 !important;
  margin:0 !important;
  font-weight:300 !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 single post centering
========================================================= */

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;
}

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 section[aria-label="참고자료"]{
  margin-top:18px !important;
  clear:both !important;
}

/* =========================================================
   clean-article base readability
========================================================= */

#postTop.clean-article{
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:20px !important;
  line-height:2.02 !important;
  letter-spacing:-0.15px !important;
  font-weight:300 !important;
}

#postTop.clean-article p,
#postTop.clean-article li{
  font-size:20px !important;
  line-height:2.02 !important;
  font-weight:300 !important;
}

#postTop.clean-article strong,
#postTop.clean-article b,
#postTop.clean-article h2,
#postTop.clean-article h3,
#postTop.clean-article summary,
#postTop.clean-article .summary-title,
#postTop.clean-article .toc-title,
#postTop.clean-article .toc-text,
#postTop.clean-article .sec-head,
#postTop.clean-article .badge{
  font-weight:700 !important;
}

/* 작은 설명문 보정 */
#postTop.clean-article .note,
#postTop.clean-article small,
#postTop.clean-article figcaption{
  font-size:16px !important;
  line-height:1.8 !important;
  font-weight:300 !important;
  color:#64748b !important;
}

/* =========================================================
   clean-article section/card layout
========================================================= */

#postTop.clean-article .card,
#postTop.clean-article .sec{
  border:1px solid #e2e8f0 !important;
  border-radius:20px !important;
  background:#ffffff !important;
  margin:20px 0 !important;
  overflow:hidden !important;
  box-shadow:0 8px 22px rgba(15,23,42,.04) !important;
}

#postTop.clean-article .card{
  padding:22px !important;
}

#postTop.clean-article .sec-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:17px 19px !important;
  background:linear-gradient(135deg,#111827,#374151) !important;
  color:#ffffff !important;
  font-size:20px !important;
}

#postTop.clean-article .badge{
  display:inline-flex !important;
  width:35px !important;
  height:35px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-size:18px !important;
  flex:0 0 auto !important;
}

#postTop.clean-article .sec-body{
  padding:24px !important;
}

/* =========================================================
   clean-article headings
========================================================= */

#postTop.clean-article h2{
  font-size:30px !important;
  line-height:1.45 !important;
  margin:0 0 17px !important;
  letter-spacing:-0.35px !important;
}

#postTop.clean-article h3{
  font-size:23px !important;
  line-height:1.55 !important;
  margin-top:28px !important;
  margin-bottom:11px !important;
  letter-spacing:-0.25px !important;
}

/* =========================================================
   clean-article TOC
========================================================= */

#postTop.clean-article .toc{
  border:1px solid #e2e8f0 !important;
  border-radius:20px !important;
  padding:21px !important;
  margin:20px 0 !important;
  background:#f8fafc !important;
  box-shadow:0 8px 22px rgba(15,23,42,.04) !important;
}

#postTop.clean-article .toc-head{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  align-items:center !important;
  margin-bottom:14px !important;
}

#postTop.clean-article .toc-title{
  font-size:24px !important;
  line-height:1.45 !important;
  margin:0 !important;
}

#postTop.clean-article .toc-head small{
  font-size:16px !important;
}

#postTop.clean-article .toc-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

#postTop.clean-article .toc-list li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

#postTop.clean-article .toc a,
#postTop.clean-article .toc-item{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  padding:15px 16px !important;
  min-height:76px !important;
  text-decoration:none !important;
  background:#ffffff !important;
  color:#111827 !important;
}

#postTop.clean-article .toc-num{
  display:inline-flex !important;
  width:35px !important;
  height:35px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  background:#111827 !important;
  color:#ffffff !important;
  font-size:18px !important;
  flex:0 0 auto !important;
}

#postTop.clean-article .toc-text{
  font-size:19px !important;
  line-height:1.55 !important;
}

@media (max-width:720px){
  #postTop.clean-article .toc-list{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
}

/* =========================================================
   clean-article checklist
========================================================= */

#postTop.clean-article .check-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:11px !important;
  margin-top:14px !important;
}

#postTop.clean-article .check-item{
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  padding:17px 18px !important;
  background:#f8fafc !important;
  font-size:19px !important;
  line-height:1.85 !important;
}

@media (max-width:720px){
  #postTop.clean-article .check-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   clean-article boxes
========================================================= */

#postTop.clean-article .info,
#postTop.clean-article .warning,
#postTop.clean-article .good,
#postTop.clean-article .keyline{
  font-size:19px !important;
  line-height:1.9 !important;
  padding:17px 19px !important;
  border-radius:16px !important;
  margin:17px 0 !important;
}

#postTop.clean-article .info{
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
}

#postTop.clean-article .warning{
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
}

#postTop.clean-article .good{
  background:#f0fdf4 !important;
  border:1px solid #bbf7d0 !important;
}

#postTop.clean-article .keyline{
  border-left:5px solid #111827 !important;
  background:#f8fafc !important;
}

/* =========================================================
   clean-article image
========================================================= */

#postTop.clean-article .hero{
  margin:22px 0 !important;
  text-align:center !important;
}

#postTop.clean-article .hero img{
  display:block !important;
  width:100% !important;
  max-width:820px !important;
  height:auto !important;
  margin:0 auto !important;
  border:1px solid #e2e8f0 !important;
  border-radius:20px !important;
  background:#ffffff !important;
}

#postTop.clean-article .hero figcaption{
  margin-top:9px !important;
  font-size:16px !important;
  line-height:1.75 !important;
  color:#64748b !important;
}

/* =========================================================
   clean-article table
========================================================= */

#postTop.clean-article .table-wrap{
  overflow-x:hidden !important;
  width:100% !important;
  max-width:100% !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  margin:17px 0 !important;
  background:#ffffff !important;
}

#postTop.clean-article .table-wrap table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  font-size:17px !important;
  word-break:keep-all !important;
}

#postTop.clean-article .table-wrap th,
#postTop.clean-article .table-wrap td{
  border:1px solid #e2e8f0 !important;
  padding:13px 12px !important;
  vertical-align:top !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.75 !important;
  font-size:17px !important;
}

#postTop.clean-article .table-wrap th{
  background:#f8fafc !important;
  text-align:left !important;
  font-weight:700 !important;
}

#postTop.clean-article .table-wrap tr:nth-child(even) td{
  background:#fcfcfd !important;
}

@media (max-width:720px){
  #postTop.clean-article .table-wrap th,
  #postTop.clean-article .table-wrap td{
    font-size:15px !important;
    padding:9px !important;
    line-height:1.65 !important;
  }
}

/* =========================================================
   clean-article FAQ
========================================================= */

#postTop.clean-article details{
  border:1px solid #e2e8f0 !important;
  border-radius:17px !important;
  padding:18px 19px !important;
  margin:12px 0 !important;
  background:#ffffff !important;
}

#postTop.clean-article summary{
  cursor:pointer !important;
  font-size:20px !important;
  line-height:1.6 !important;
  font-weight:700 !important;
}

#postTop.clean-article details p{
  margin:13px 0 0 !important;
  font-size:19px !important;
  line-height:1.95 !important;
}

/* =========================================================
   clean-article next reading
========================================================= */

#postTop.clean-article .next{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:11px !important;
}

#postTop.clean-article .next a{
  display:block !important;
  border:1px solid #e2e8f0 !important;
  border-radius:17px !important;
  padding:15px 16px !important;
  text-decoration:none !important;
  background:#ffffff !important;
  color:#111827 !important;
}

#postTop.clean-article .next a:hover{
  background:#f8fafc !important;
}

#postTop.clean-article .next a b,
#postTop.clean-article .next a strong{
  display:block !important;
  font-size:19px !important;
  line-height:1.5 !important;
  margin:0 0 5px !important;
  font-weight:700 !important;
}

#postTop.clean-article .next a span,
#postTop.clean-article .next a .note{
  display:block !important;
  font-size:16px !important;
  line-height:1.7 !important;
  color:#64748b !important;
  margin:0 !important;
}

@media (max-width:720px){
  #postTop.clean-article .next{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   Mobile readability
========================================================= */

@media (max-width:720px){
  #postTop.clean-article,
  #postTop.clean-article p,
  #postTop.clean-article li,
  .hin-post,
  .hin-post .hin-p,
  .hin-post p,
  .hin-post li{
    font-size:19px !important;
    line-height:1.98 !important;
  }

  #postTop.clean-article .card{
    padding:18px !important;
  }

  #postTop.clean-article .sec-body{
    padding:20px !important;
  }

  #postTop.clean-article h2{
    font-size:26px !important;
  }

  #postTop.clean-article h3{
    font-size:22px !important;
  }

  #postTop.clean-article .toc-title{
    font-size:22px !important;
  }

  #postTop.clean-article .toc-text,
  #postTop.clean-article .check-item,
  #postTop.clean-article summary{
    font-size:18.5px !important;
  }

  #postTop.clean-article .note,
  #postTop.clean-article small,
  #postTop.clean-article figcaption,
  #postTop.clean-article .next a span,
  #postTop.clean-article .next a .note{
    font-size:15.5px !important;
  }
}