/**
 * 건강백과 상세 (증상·질환·성분) — 디자인 시안 13 · 3) 건강백과 1-2 · 2-2 · 3-2 PDP
 * 백과 상세 화면에서만 로드된다(inc/magazine-theme.php). 공통 컴포넌트(.mag-sec · .mag-row · .mag-artbox · .mag-tbadge
 * · .inko-carousel--magprod · .mag-artcta)는 mag.css 것을 그대로 쓴다. 수정 시 INKO_MAG_ASSET_VER 를 올릴 것.
 */
:root{
  --mag-rose:#fdf0f1;      /* 성분 색 띠 · 빨간 안내 박스 바탕 */
  --mag-enc-narrow:860px;  /* PC 본문 폭 (매거진 글 상세와 동일) */
  --mag-amber:#d97706;     /* 핵심 정보 '임부 금기: 주의' */
  --mag-amber-soft:#fef3e2;
}

.mag-encpage{padding-top:18px;}
.mag-encpage__narrow{max-width:var(--mag-enc-narrow);margin:0 auto;padding:0 16px;}
.mag-encpage .mag-crumb{margin-bottom:12px;}

/* 색 띠 — 증상=보라 · 질환=민트 · 성분=로즈 (화면 폭 끝까지) */
.mag-enchero{background:var(--mag-accent-soft);padding:16px 0 18px;}
.mag-encpage--dis .mag-enchero{background:var(--mag-mint);}
.mag-encpage--ing .mag-enchero{background:var(--mag-rose);}
.mag-enchero .mag-tbadge{margin:0 0 6px;vertical-align:0;}
.mag-enchero__title{font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.4px;margin:0 0 6px;}
.mag-enchero__title span{font-weight:700;}
.mag-enchero__sum{font-size:15px;line-height:1.6;color:var(--mag-sub);margin:0;white-space:pre-line;}
/* 약사 검수 표기 (검수 약사 · 최종 검수일) */
.mag-enchero__rv{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--mag-sub);}
.mag-enchero__rv .mag-ic{color:var(--mag-accent);flex:none;}
.mag-enchero__rv b{color:var(--mag-text);font-weight:700;}
.mag-enchero__rv a{color:inherit;text-decoration:none;}
.mag-enchero__rv a:hover b{text-decoration:underline;}

/* 본문 항목 */
.mag-enc{padding-top:34px;}
.mag-enc__sec{margin:0 0 38px;}
/* 대표 이미지 (권장 1200×630) */
.mag-enc__cover{margin:0 0 30px;border-radius:12px;overflow:hidden;aspect-ratio:1200/630;background:var(--mag-bg);}
.mag-enc__cover img{width:100%;height:100%;object-fit:cover;display:block;}
.mag-enc__h{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.4;margin:0 0 12px;}
/* 성분 핵심 정보 표 (계열 · 구분 · 대표 제품 · 제형 · 임부 금기) */
.mag-keyinfo__tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--mag-text);font-size:14px;line-height:1.55;}
.mag-keyinfo__tbl th,.mag-keyinfo__tbl td{border-bottom:1px solid var(--mag-line);padding:11px 12px;text-align:left;vertical-align:top;}
.mag-keyinfo__tbl th{width:34%;background:var(--mag-bg);color:var(--mag-sub);font-weight:700;word-break:keep-all;}
.mag-keyinfo__tbl td{color:var(--mag-text);word-break:keep-all;overflow-wrap:anywhere;}
.mag-keyinfo__flag{display:inline-block;font-size:13px;font-weight:700;line-height:1.3;border-radius:6px;padding:2px 8px;}
.mag-keyinfo__flag--no{color:var(--mag-red);background:var(--mag-rose);}
.mag-keyinfo__flag--warn{color:var(--mag-amber);background:var(--mag-amber-soft);}
.mag-enc__blk{margin:0 0 14px;}
.mag-enc__blk:last-child{margin-bottom:0;}
.mag-enc__sub{font-size:14px;font-weight:700;color:var(--mag-text);line-height:1.5;margin:0 0 4px;}
.mag-enc__blk p{font-size:13px;line-height:1.75;color:var(--mag-gray);margin:0;}
.mag-enc__dots{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.75;color:var(--mag-gray);}
.mag-enc__dots li{position:relative;padding-left:12px;}
.mag-enc__dots li::before{content:"·";position:absolute;left:1px;font-weight:800;}

/* 항목 칸에 관리자가 넣은 서식(표·굵게·링크·이미지) — 편집기로 저장한 HTML 그대로 (2026-09-28) */
.mag-enc__rich{font-size:13px;line-height:1.75;color:var(--mag-gray);}
.mag-enc__rich > :first-child{margin-top:0;}
.mag-enc__rich > :last-child{margin-bottom:0;}
.mag-enc__rich p{margin:0 0 12px;}
.mag-enc__rich h2,.mag-enc__rich h3,.mag-enc__rich h4{font-size:14px;font-weight:700;color:var(--mag-text);line-height:1.5;margin:18px 0 4px;}
.mag-enc__rich strong,.mag-enc__rich b{color:var(--mag-text);font-weight:700;}
.mag-enc__rich a{color:var(--mag-accent);text-decoration:underline;text-underline-offset:3px;}
.mag-enc__rich ul,.mag-enc__rich ol{margin:0 0 12px;padding-left:18px;}
.mag-enc__rich ul{list-style:disc;} /* 몰 style.css 의 ul reset(list-style:none) 복원 */
.mag-enc__rich ol{list-style:decimal;}
.mag-enc__rich li{margin-bottom:4px;}
.mag-enc__rich img{max-width:100%;height:auto;border-radius:8px;margin:4px 0 12px;}
.mag-enc__rich figure{margin:4px 0 12px;}
.mag-enc__rich figcaption{font-size:12px;color:var(--mag-faint);text-align:center;margin-top:6px;}
.mag-enc__rich blockquote{border-left:3px solid var(--mag-accent);background:var(--mag-accent-soft);padding:12px 14px;border-radius:0 10px 10px 0;margin:0 0 12px;}
.mag-enc__rich iframe{max-width:100%;}
/* 표 — 폭이 넘치면 가로 스크롤 (모바일). 본문 영역(mag-enc__free)의 표도 같은 규칙.
   셀은 overflow-wrap:normal — body 의 anywhere 를 물려받으면 최소 폭이 글자 하나로 잡혀 표가 화면 폭에 눌리고
   '0.5m / L'처럼 단어 중간에서 끊긴다(QA #21) */
.mag-enc__rich table,.mag-enc__free table{border-collapse:collapse;width:100%;font-size:13px;margin:0 0 14px;display:block;overflow-x:auto;white-space:normal;}
.mag-enc__rich th,.mag-enc__rich td,.mag-enc__free th,.mag-enc__free td{border:1px solid var(--mag-line);padding:8px 10px;text-align:left;vertical-align:top;min-width:88px;overflow-wrap:normal;}
.mag-enc__rich th,.mag-enc__free th{background:var(--mag-bg);color:var(--mag-text);font-weight:700;}
.mag-enc__warn .mag-enc__rich{color:var(--mag-sub);}
.mag-enc__warn .mag-enc__rich th{background:rgba(255,255,255,.6);}

/* 한눈에 보기 — 한 줄 4장 */
.mag-enc__gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px;margin-bottom:4px;}
.mag-enc__gal figure{margin:0;text-align:center;}
.mag-enc__gal figure > span{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--mag-bg);}
.mag-enc__gal img{width:100%;height:100%;object-fit:cover;display:block;}
.mag-enc__gal figcaption{font-size:12px;line-height:1.4;color:var(--mag-gray);margin-top:5px;}
.mag-enc__gal + .mag-enc__blk{margin-top:14px;}

/* 원인(빨강 경고) · 관리 방법(초록 체크) — 항목 | 설명 */
.mag-enc__pairs{margin:0;display:flex;flex-direction:column;gap:12px;}
.mag-enc__pair{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:start;} /* 시안: 설명이 142px 지점에서 시작 */
.mag-enc__pair dt{display:flex;align-items:flex-start;gap:6px;font-size:13px;letter-spacing:-.3px;font-weight:700;color:var(--mag-text);line-height:1.5;min-width:0;}
.mag-enc__pair dt svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:var(--mag-red);}
.mag-enc__pairs--ok dt svg{color:var(--mag-green);}
.mag-enc__pair dd{margin:0;font-size:13px;line-height:1.7;color:var(--mag-gray);padding-top:1px;}

/* 빨간 안내 박스 — 꼭 알아두세요 / 복용 전 반드시 읽어주세요 */
.mag-enc__warn{background:var(--mag-rose);border-radius:12px;padding:16px 16px 18px;margin:0 0 38px;}
.mag-enc__warnh{font-size:20px;font-weight:800;color:var(--mag-red);letter-spacing:-.3px;line-height:1.35;margin:0 0 8px;}
.mag-enc__warn .mag-enc__dots,.mag-enc__warn .mag-enc__blk p{color:var(--mag-sub);}
.mag-enc__warn .mag-enc__sub{margin-top:2px;}

.mag-enc__sec--src .mag-artbox{font-size:13px;}
.mag-enc__free{margin:0 0 38px;}
.mag-enc > .inko-mag-ctawrap{margin:0 0 38px;} /* 메타박스 CTA(본문 상단/하단) — 섹션 간격과 맞춤 */

/* 하단 공통 영역 */
.mag-encpage__rel{padding-top:40px;} /* 공유 버튼 줄과 '함께 보면 좋은 FAQ' 제목 사이 — 글 상세(.mag-artpage > .mag-sec)와 같은 간격(QA #46) */
.mag-encpage__rel .mag-sec{margin:0 0 56px;}
.mag-encpage__rel .mag-rows{padding:0 8px;}
.mag-encpage__shop .mag-sec{margin:0 0 44px;}
.mag-encpage .mag-rows{display:flex;flex-direction:column;} /* 한 단 본문 폭 — 목록은 PC에서도 1열 */

@media (min-width:768px){
  .mag-encpage{padding-top:30px;}
  .mag-encpage__narrow{padding:0 20px;}
  .mag-enchero{padding:26px 0 28px;}
  .mag-enchero__title{font-size:28px;}
  .mag-enchero__sum{font-size:16px;}
  .mag-enc{padding-top:44px;}
  .mag-enc__sec,.mag-enc__warn,.mag-enc__free{margin-bottom:48px;}
  .mag-enc__h{font-size:21px;margin-bottom:14px;}
  .mag-enc__sub{font-size:16px;}
  .mag-enc__blk p,.mag-enc__dots,.mag-enc__pair dd{font-size:15px;}
  .mag-enc__rich{font-size:15px;}
  .mag-enc__rich h2,.mag-enc__rich h3,.mag-enc__rich h4{font-size:16px;}
  .mag-enc__rich table,.mag-enc__free table{font-size:14px;display:table;}
  .mag-keyinfo__tbl{font-size:15px;}
  .mag-keyinfo__tbl th{width:200px;padding:12px 16px;}
  .mag-keyinfo__tbl td{padding:12px 16px;}
  .mag-enc__gal{gap:16px;}
  .mag-enc__gal figure > span{border-radius:10px;}
  .mag-enc__gal figcaption{font-size:14px;margin-top:8px;}
  .mag-enc__pair{grid-template-columns:190px minmax(0,1fr);gap:12px;}
  .mag-enc__pair dt{font-size:16px;gap:8px;letter-spacing:0;}
  .mag-enc__pair dt svg{width:22px;height:22px;}
  .mag-enc__warn{padding:24px 26px 26px;border-radius:14px;}
  .mag-enc__warnh{font-size:23px;}
  .mag-enc__sec--src .mag-artbox{font-size:15px;}
}
@media (min-width:1024px){
  .mag-encpage{padding-top:36px;}
  .mag-enchero__title{font-size:32px;}
  .mag-enc__h{font-size:24px;}
  .mag-encpage__rel{padding-top:64px;}
  .mag-encpage__rel .mag-sec{margin-bottom:64px;}
  .mag-encpage__shop .mag-sec{margin-bottom:56px;}
}