/* 매거진 본문(article) 전용 스타일 — content.php 상세에서만 싣는다.
   style.css 의 .ct-body 는 글자 14px · 줄간격 1.4 로만 잡혀 있다. 두어 문단짜리
   짧은 글에는 맞지만, 2,000자 안팎의 정보성 글을 그 값으로 깔면 벽처럼 읽힌다.
   여기서는 '읽는 글' 에 필요한 것만 더한다 — 줄간격, 소제목, 표, 체크리스트, 문답.
   목록 화면(.ct-grid/.ct-card)은 건드리지 않는다. */

.ct-view .ct-body{font-size:15.5px;line-height:1.78;color:var(--txt);word-break:keep-all}
.ct-view h1{font-size:21px;font-weight:800;line-height:1.34;letter-spacing:-.02em;margin:10px 0 8px}

/* 도입부 — 검색해서 들어온 사람이 첫 화면에서 답을 보게 하는 자리 */
.ct-body .lead{font-size:15.5px;line-height:1.72;font-weight:600;color:var(--txt);
  background:var(--pri-light);border-radius:var(--r-md);padding:14px 15px;margin:0 0 18px}

.ct-body h2{font-size:17.5px;font-weight:800;line-height:1.4;letter-spacing:-.02em;
  color:var(--txt);margin:30px 0 10px;padding-left:11px;border-left:4px solid var(--pri)}
.ct-body h3{font-size:15.5px;font-weight:800;line-height:1.45;color:var(--txt);margin:20px 0 7px}
.ct-body p{margin:0 0 13px}
.ct-body b,.ct-body strong{font-weight:800;color:var(--pri-d)}
.ct-body a{color:var(--pri-d);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ct-body ul,.ct-body ol{margin:0 0 14px;padding-left:20px}
.ct-body li{margin:0 0 6px}

/* 체크리스트 — 문서 권장(글마다 표 또는 체크리스트 1개 이상).
   목록 기본 점 대신 네모칸을 그려, 화면에서 하나씩 짚어 보게 만든다. */
.ct-body ul.chk{list-style:none;padding:0;margin:0 0 16px}
.ct-body ul.chk li{position:relative;padding:9px 12px 9px 38px;margin:0 0 7px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);line-height:1.6}
.ct-body ul.chk li::before{content:"";position:absolute;left:13px;top:14px;width:14px;height:14px;
  border:2px solid var(--pri);border-radius:4px}

/* 표 — 좁은 화면에서 넘칠 수 있으므로 표만 따로 가로 스크롤시킨다(본문은 안 흔들린다) */
.ct-body .tb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
.ct-body table{border-collapse:collapse;width:100%;min-width:340px;font-size:14px;line-height:1.55}
.ct-body th,.ct-body td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.ct-body thead th{background:var(--pri-light);color:var(--pri-d);font-weight:800;white-space:nowrap}
.ct-body tbody th{background:var(--cream);font-weight:700;white-space:nowrap}

/* 짚고 넘어가는 상자 — 본문 흐름에서 한 번 멈춰 세우는 자리 */
.ct-body .note{background:var(--sage-light);border-radius:var(--r-md);padding:13px 15px;margin:0 0 16px;
  font-size:14.5px;line-height:1.7;color:var(--txt)}
.ct-body .note b{color:var(--sage-d)}

/* 자주 묻는 질문 — 이 마크업 모양 그대로 lib/content_faq.php 가 읽어
   FAQPage 구조화 데이터를 만든다. 클래스명을 바꾸면 그쪽도 함께 고쳐야 한다. */
.ct-body .mg-faq{margin:30px 0 0}
.ct-body .mg-faq .fq{border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin:0 0 9px;background:var(--card)}
.ct-body .mg-faq .fq h3{margin:0 0 6px;font-size:15px;color:var(--pri-d)}
.ct-body .mg-faq .fq h3::before{content:"Q. ";font-weight:800}
.ct-body .mg-faq .fq p{margin:0;font-size:14.5px;line-height:1.7;color:var(--txt)}

/* 함께 읽으면 좋은 글 — 매거진끼리 이어 주는 내부링크 */
.ct-rel{margin:26px 0 0;border-top:8px solid var(--bg);padding-top:18px}
.ct-rel h3{font-size:14px;font-weight:800;margin:0 0 9px;color:var(--txt)}
.ct-rel a{display:flex;align-items:center;gap:8px;padding:12px 14px;margin:0 0 8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);color:var(--txt);font-size:14.5px;
  font-weight:700;line-height:1.45;text-decoration:none}
.ct-rel a i{color:var(--pri);flex:none}

/* 병원 방문 권고 — 모든 건강 글 하단에 같은 모양으로 고정 배치한다(수의사법).
   문구는 lib/content_faq.php 의 content_vet_notice() 한 곳에서만 만든다. */
.ct-vet{margin:22px 0 0;display:flex;gap:10px;align-items:flex-start;
  background:#fff6f8;border:1px solid var(--pri-tint);border-radius:var(--r-md);padding:13px 15px}
.ct-vet i{color:var(--pri-d);font-size:17px;line-height:1.5;flex:none}
.ct-vet p{margin:0;font-size:13.5px;line-height:1.68;color:var(--sub)}
.ct-vet b{color:var(--pri-d);font-weight:800}