/* 인사이트 본문 — 글마다 모양이 다른 본문(body_html)을 시안 값으로 칠한다(2026-09-29).
   ⚠️ 값은 insight-article.css(시안)에서 그대로 옮겼다. 소제목 = .h2, 문단 = .p, 표 = 시안 줄표, 인용 = 시안 회색 상자.
   ⚠️ 폭 분기는 시안과 같은 768px 하나다(spec/responsive.md).
   ⚠️ 2026-09-30 시안 개편(40-04 v1.1)으로 클래스 번호가 바뀌었다 — 여기 적힌 il · ia 번호는 그날 뽑은 CSS 와 짝이다.
      휴대폰 본문 줄간격 1.85 · 소제목 위 56px 는 시안 값을 따랐다. */
.ib > :first-child { margin-top: 40px; }
.ib h2, .h2 { margin: 56px 0 0; font-family: 'Nanum Myeongjo', serif; font-size: 30px; font-weight: 800; line-height: 1.5; letter-spacing: -0.02em; color: #16181F; scroll-margin-top: 24px; }
.ib h3 { margin: 36px 0 0; font-size: 21px; font-weight: 700; line-height: 1.6; color: #16181F; }
.ib p, .p { font-size: 18px; line-height: 1.9; color: #3A3F4C; margin: 22px 0 0; }
.ib b, .ib strong { color: #16181F; font-weight: 700; }
.ib a { color: #B8430F; }
.ib ul, .ib ol { margin: 22px 0 0; padding-left: 1.3em; font-size: 18px; line-height: 1.9; color: #3A3F4C; }
.ib li + li { margin-top: 6px; }
.ib figure { margin: 32px 0 0; }
.ib figure img { display: block; width: 100%; height: auto; border-radius: 10px; background: #F2EEE5; }
.ib figcaption { margin-top: 10px; font-size: 14px; line-height: 1.7; color: #6F747F; text-align: center; }
.ib blockquote { margin: 26px 0 0; padding: 20px 24px; background: #F2EEE5; border-radius: 10px; font-size: 18px; line-height: 1.9; color: #16181F; }
.ib blockquote p { margin: 0; font-size: 18px; line-height: 1.9; color: #16181F; }
.ib hr { margin: 44px 0 0; border: 0; border-top: 1px solid #E4DFD4; }
/* 표 — 시안의 줄표(.th · .td 와 표 상자) 값 */
.ib table { margin-top: 26px; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #E4DFD4; border-radius: 10px; overflow: hidden; }
.ib th { padding: 13px 18px; background: #F2EEE5; font-size: 14px; font-weight: 700; color: #16181F; text-align: left; vertical-align: top; }
.ib td { padding: 14px 18px; background: #FFFFFF; font-size: 16px; line-height: 1.75; color: #3A3F4C; vertical-align: top; border-top: 1px solid #E4DFD4; }
.ib th + th, .ib td + td { border-left: 1px solid #E4DFD4; }
/* 다른 글로 가는 링크 카드 */
.ib .link-card { margin-top: 26px; padding: 18px 22px; background: #FFFFFF; border: 1px solid #E4DFD4; border-radius: 10px; font-size: 16px; }
.ib .link-card a { font-weight: 700; text-decoration: none; }

/* 목차 — 화면에는 안 보이고 봇 · 화면 읽기 프로그램은 읽는다(2026-09-29 사용자 지정).
   ⚠️ display:none 이 아니다 — 그건 검색엔진도 없는 내용으로 친다 */
.ib-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* 목록 카드 — 시안 insight-list.css 의 .card 는 **줄로 나눈 목록**이다(위아래 28px · 옆 0 · 위쪽 줄).
   2026-09-30 시안 개편: 목록 칸이 .il44 로 바뀌었고 끝 카드 아래 줄은 없어졌다(바로 아래 회색 안내 상자 il45).
   ⚠️ 공통 design-tokens.css 의 .card(흰 바탕 · 테두리 · 둥근 상자)가 겹쳐 「옆 여백 0 인 상자」가 되어 글자가 테두리에
      붙었다(2026-09-29 사용자 지적: 「다음 글 상자 안에 깨지는데」). 이 목록 안에서만 공통 상자를 끈다. */
.il44 > .card { background: transparent; border: 0; border-top: 1px solid #E4DFD4; border-radius: 0; padding: 28px 0; }
.ib-card { color: inherit; }
/* 글 화면 오른쪽 칸 — 목록 사이드(.il55 · .il51 · .il54)의 시안 값 그대로(2026-09-30 개편 값). 스크롤해도 따라온다.
   폭 260px 는 글 칸 700px + 사이 64px 옆에 들어가는 값(ia195 안쪽 1040px) */
.ib-side { width: 260px; flex-shrink: 0; position: sticky; top: 28px; margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.ib-previewing .ib-side { top: 72px; }
.ib-cta { padding: 24px; background: #FFFFFF; border: 1px solid #E4DFD4; border-radius: 12px; }
.ib-rule { padding: 20px 24px; background: #F2EEE5; border-radius: 12px; }
.ib-side .t { font-size: 17px; font-weight: 700; line-height: 1.5; color: #16181F; }
.ib-rule .t { font-size: 15px; }
.ib-cta .d { margin-top: 12px; font-size: 15px; line-height: 1.85; color: #5C6170; }
.ib-rule .d { margin-top: 10px; font-size: 14px; line-height: 1.9; color: #5C6170; }
.ib-cta .go { margin-top: 16px; display: flex; align-items: center; justify-content: center; height: 50px; background: #D9541E; color: #FFFFFF; font-size: 15px; font-weight: 700; border-radius: 8px; text-decoration: none; }
.ib-cta .n { margin-top: 10px; font-size: 13px; line-height: 1.7; color: #6F747F; text-align: center; }
.ib-empty { color: #5C6170; }
/* 관리자 미리보기 띠 */
.ib-preview { position: sticky; top: 0; z-index: 50; padding: 10px 16px; background: #1E2B55; color: #FAF8F3; font-size: 14px; font-weight: 700; text-align: center; }

@media (max-width: 768px) {
  /* 휴대폰 좌우 여백 16px(2026-09-29 사용자 지적: 「모바일 패딩도 너무 큼」)은 2026-09-30 시안이 직접 16px 로 고쳐서
     (ia28 · ia195 · il57) 여기서 덧대던 여백은 뺐다 */
  .ib > :first-child { margin-top: 28px; }
  .ib h2, .h2 { font-size: 23px; }
  .ib p, .p, .ib ul, .ib ol { font-size: 16px; line-height: 1.85; }
  .ib blockquote { padding: 18px 16px; }
  .ib blockquote p { font-size: 16px; }
  /* ⚠️ 표는 카드로 푼다(40-04 6.2) — 머리 줄을 숨기고 줄마다 한 덩어리 */
  .ib table, .ib tbody, .ib tr, .ib td { display: block; width: auto; }
  .ib thead { display: none; }
  .ib tr { padding: 15px 16px; background: #FFFFFF; border-top: 1px solid #E4DFD4; }
  .ib tr:first-child { border-top: 0; }
  .ib td { padding: 2px 0; border: 0; font-size: 15px; background: transparent; }
  .ib td + td { border-left: 0; }
  .ib td:first-child { font-weight: 700; color: #16181F; }
}