/* 에이파트 새 글 템플릿 — article(똑생식) / case(대륜식) */
/* 팔레트: 네이비 #1a2744, 오렌지 #f7941d, 본문 #2b3240, 보조 #7b8494, 면 #f7f8fa */

.ap-article, .ap-case {
  max-width: 780px;
  margin: 0 auto;
  padding: 72px 20px 40px;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #2b3240;
  line-height: 1.6;
  font-size: 17px;
  word-break: keep-all;
}
/* 본문 문단: 양쪽 정렬 + 글자 단위 줄바꿈(신문식) — keep-all로 오른쪽이 들쭉날쭉하던 것.
   글자 단위로 꽉 채우므로 어절 사이가 늘어나는 부작용 없음. 영문 단어·URL은 안 끊김.
   (작성자가 가운데 정렬 등을 직접 지정한 문단은 인라인 스타일이 우선이라 그대로) */
.ap-article__body p, .ap-case__body p,
.ap-article__body li, .ap-case__body li {
  text-align: justify;
  word-break: normal;
  overflow-wrap: break-word;
}
/* 본문 줄간격 — 새 에디터로 쓴 글에서 쓰던 '넓게'(1.9)를 전체 기본값으로 통일.
   컨테이너(.ap-article)의 1.6은 목차·CTA·관련글 같은 주변 UI에만 남는다. */
.ap-article__body, .ap-case__body { line-height: 1.9; }
/* 형사 헤더: 스크롤 전에도 항상 배경 표시 — 원본은 스크롤해야 .scrolled가 붙어 남색이 생겨
   페이지 맨 위에선 헤더가 안 보였다. (도산 헤더는 원래 흰 배경이라 해당 없음) */
.header:has(.logo[href*="/crimelaw/"]) { background-color: #172959; }

/* 레거시 본문의 인라인 line-height(주로 2.0) 무력화 — 줄바꿈 간격이 벌어져 보이던 원인.
   에디터의 줄간격 기능(data-line-height 스팬)은 인라인 스타일이 아니라 영향 없음 */
.ap-article__body [style*="line-height"], .ap-case__body [style*="line-height"] { line-height: inherit !important; }

/* ── 공통: 헤더/메타/칩 ── */
.ap-article__head h1, .ap-case__headline h1 {
  font-size: 34px;
  line-height: 1.35;
  font-weight: 800;
  color: #1a2744;
  margin: 14px 0 18px;
  letter-spacing: -0.5px;
  /* 제목도 본문처럼 양쪽 정렬 — 오른쪽이 뜨는 것 방지 (마지막 줄은 자연히 왼쪽) */
  text-align: justify;
  word-break: normal;
}
.ap-meta { display: flex; align-items: center; gap: 10px; color: #7b8494; font-size: 14px; }
.ap-meta__author { font-weight: 600; color: #4a5468; }
.ap-meta__sep { width: 3px; height: 3px; border-radius: 50%; background: #cdd3dd; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip {
  font-size: 13px; font-weight: 600; color: #b06a00;
  background: #fff4e3; border-radius: 999px; padding: 4px 12px;
}
.ap-article__head { padding-bottom: 28px; border-bottom: 1px solid #e8ebf0; margin-bottom: 28px; }

/* ── 목차 ── */
.ap-toc {
  background: #f7f8fa; border: 1px solid #e8ebf0; border-radius: 14px;
  padding: 20px 24px; margin: 0 0 40px;
}
.ap-toc__title { font-size: 14px; font-weight: 700; color: #7b8494; margin-bottom: 10px; letter-spacing: 1px; }
.ap-toc ol { list-style: none; margin: 0; padding: 0; }
.ap-toc li { margin: 5px 0; font-size: 15px; }
/* H3는 소속 H2 안에 중첩된다(buildToc) — 들여쓰기는 중첩 <ol>이 담당 */
.ap-toc__sub { padding-left: 14px !important; margin: 4px 0 8px !important; }
.ap-toc__l2 { font-weight: 600; }
.ap-toc__l3 { font-size: 14px; }
.ap-toc__l3 a { color: #6b7480; }
.ap-toc a {
  display: block; color: #3d4556; text-decoration: none;
  padding: 6px 10px; border-radius: 8px; line-height: 1.45;
  transition: background .15s, color .15s;
}
.ap-toc a:hover { color: #f7941d; }
/* 지금 보고 있는 섹션 — 배경 + 글자색으로 표시 */
.ap-toc a.on { background: #fff4e3; color: #b06a00; font-weight: 700; }

/* ── 데스크탑: 목차를 본문 오른쪽 칸으로 ──
   본문 780px + 목차 220px 2단 그리드. position:fixed가 아니라 sticky라서
   목차가 화면 꼭대기가 아니라 '본문이 시작하는 높이'에서 시작하고,
   스크롤을 내리면 그때부터 따라붙는다.
   기준은 1400px — 형사·회생 모두 오른쪽에 고정 퀵메뉴(상담신청·전화상담)가 떠 있어서
   그보다 좁으면 목차 레일과 겹친다(1240·1320px에서 겹침 확인).
   좁은 화면에서는 아래 '목차' 버튼+패널 방식으로 넘어간다. */
@media (min-width: 1400px) {
  .ap-article {
    max-width: 1064px;                          /* 780 + 24(간격) + 220 + 좌우 여백 */
    display: grid;
    grid-template-columns: minmax(0, 780px) 220px;
    column-gap: 24px;
    align-items: start;
  }
  .ap-article > * { grid-column: 1; }           /* 본문·CTA·관련글은 왼쪽 칸 */
  .ap-article > .ap-toc {
    grid-column: 2;
    grid-row: 1 / span 20;                      /* 글 제목 높이에서 시작해 글 끝까지 걸치는 칸 */
    align-self: start;
    position: sticky; top: 30vh; /* 화면 위 30% — 읽는 시선 높이 (헤더 108px 붙임 → 중앙 근처로) */
    width: auto; max-height: calc(100vh - 150px); overflow-y: auto;
    margin: 0; padding: 0;
    background: none; border: none; border-radius: 0;
    scrollbar-width: thin;
  }
  /* 레일이 화면보다 길어지면 그 안에서 따로 스크롤이 생기고, 휠이 목차에 붙잡혀
     본문이 안 내려가는 것처럼 느껴진다. 촘촘하게 잡아 웬만한 글은 스크롤 없이 들어가게 한다. */
  .ap-toc__title { margin-bottom: 4px; padding-left: 9px; font-size: 13px; }
  .ap-toc li { font-size: 13px; margin: 0; line-height: 1.4; }
  .ap-toc a { padding: 4px 9px; border-radius: 7px; }
  .ap-toc__l3 { font-size: 12.5px; }
  .ap-toc__sub { padding-left: 11px !important; margin: 2px 0 4px !important; }
}

/* ── 좁은 화면: 오른쪽 가장자리 '목차' 버튼 → 누르면 패널 ──
   버튼·패널은 apart-article.js가 만든다. 본문 위 목차는 숨긴다.
   (모양은 여기서 잡고, 표시 여부만 위·아래 조건에서 켠다) */
.ap-toc-fab, .ap-toc-sheet { display: none; }
@media (max-width: 1399.98px) {
  .ap-toc { display: none; }
  .ap-toc-fab, .ap-toc-sheet { display: block; }
}
.ap-toc-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  /* 고정 헤더(z-index 500)·하단 배너(100)보다 위에 와야 가리지 않는다 */
  z-index: 520; cursor: pointer;
  background: #fff; color: #222; border: 1px solid #d7dce5; border-right: none;
  border-radius: 10px 0 0 10px; padding: 14px 7px;
  font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 1px;
  writing-mode: vertical-rl;
  box-shadow: -2px 2px 10px rgba(15,23,42,.10);
}
.ap-toc-sheet { position: fixed; inset: 0; z-index: 900; visibility: hidden; }
.ap-toc-sheet.on { visibility: visible; }
.ap-toc-sheet__bg {
  position: absolute; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; transition: opacity .2s;
}
.ap-toc-sheet.on .ap-toc-sheet__bg { opacity: 1; }
.ap-toc-sheet__panel {
  position: absolute; right: 0; top: 0; height: 100%;
  width: min(80vw, 320px); box-sizing: border-box; background: #fff;
  padding: 22px 18px; overflow-y: auto;
  box-shadow: -8px 0 24px rgba(15,23,42,.18);
  transform: translateX(100%); transition: transform .25s ease;
}
.ap-toc-sheet.on .ap-toc-sheet__panel { transform: translateX(0); }
/* 패널 안에서는 목차를 다시 보이게 (레일을 접는 규칙을 무력화) */
.ap-toc-sheet .ap-toc {
  display: block; background: none; border: none; padding: 0; margin: 0;
  position: static; width: auto; max-height: none;
}
.ap-toc-sheet .ap-toc li { font-size: 15px; }
.ap-toc-sheet__close {
  display: block; margin-left: auto; margin-bottom: 6px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: #7b8494; cursor: pointer; padding: 2px 4px;
}
body.ap-noscroll { overflow: hidden; }
/* 회생파산센터는 목차의 현재 항목 강조를 본문 제목 색과 맞춘다 (버튼 자체는 두 센터 공통) */
body:has(.logo[href*="/dosan/"]) .ap-toc a.on { background: #fdf0e0; color: #994c00; }

/* ── 형사전담센터: 정보성 포인트를 브랜드 남색-블루로 ──
   기본 주황(#f7941d)은 회생의 크림·옐로 무드에서 온 것 — 남색 헤더의 형사에선 겉돈다.
   전환용 CTA 버튼(.ap-btn--primary)만은 주황 유지: 남색 박스 안에서 눈에 걸려야 하는 요소. */
body:has(.logo[href*="/crimelaw/"]) .ap-chip { color: #1b4c99; background: #e9f0fc; }
body:has(.logo[href*="/crimelaw/"]) .ap-toc a:hover { color: #2f6fdd; }
body:has(.logo[href*="/crimelaw/"]) .ap-toc a.on { background: #e9f0fc; color: #1b4c99; }
body:has(.logo[href*="/crimelaw/"]) .ap-summary { background: #f2f7ff; border-color: #d9e5f8; }
body:has(.logo[href*="/crimelaw/"]) .ap-summary__title { color: #1b4c99; }
body:has(.logo[href*="/crimelaw/"]) .ap-summary li:before { color: #2f6fdd; }
body:has(.logo[href*="/crimelaw/"]) .ap-faq__item summary:before { color: #2f6fdd; }
body:has(.logo[href*="/crimelaw/"]) .ap-faq__item summary:hover { color: #2f6fdd; }
body:has(.logo[href*="/crimelaw/"]) .ap-related li a:hover .ap-related__t { color: #2f6fdd; }

/* ── 본문 타이포 ── */
/* h2 자동 분할선 제거 — 필요한 곳엔 에디터의 구분선 블록(hr) 사용 */
/* H2 = 장(章). 왼쪽 바로 구분 — 예전엔 작성자가 본문에 '|'를 직접 타자로 넣었다. */
.ap-article__body h2, .ap-case__body h2, .ap-case__body .inner_content_head h3 {
  font-size: 25px; font-weight: 800; color: #1a2744;
  /* #sec-N 링크로 바로 들어왔을 때(브라우저 기본 이동) 고정 헤더에 가리지 않도록 */
  scroll-margin-top: 124px;
  margin: 56px 0 18px;
  line-height: 1.4; letter-spacing: -0.3px;
  /* 내어쓰기 — 제목이 두 줄이 되면 둘째 줄이 바 밑이 아니라 첫 줄 '글자' 시작에 맞도록.
     15px = 바 너비 4px + 바와 글자 사이 11px (아래 ::before와 짝) */
  padding-left: 15px; text-indent: -15px;
}
/* border-left가 아니라 ::before 막대 — 테두리로 하면 두 줄짜리 제목에서 세로로 길게 늘어나
   둘째 줄까지 바가 따라붙는다. 인라인 블록이라 첫 줄 글자 높이만큼만 그려진다.
   색은 currentColor = 제목 글자색. */
.ap-article__body h2::before,
.ap-case__body h2::before,
.ap-case__body .inner_content_head h3::before {
  content: ""; display: inline-block; vertical-align: -0.06em;
  width: 4px; height: 0.9em; margin-right: 11px;
  background: currentColor; border-radius: 1px;
}
/* 제목 글자에 색을 입히면 그 색은 안쪽 span에 붙어서, 바깥 h2의 currentColor는 그대로다.
   그래서 h2 자신의 색도 같이 맞춰 준다(보이는 글자색은 어차피 span이 정한다).
   에디터가 쓰는 두 가지 표기를 모두 받는다 — LEGACY_BODY_STYLE의 색 표와 같은 값. */
h2:has([data-text-color="gray"]), h2:has([data-value="gray"]) { color: #9b9a97; }
h2:has([data-text-color="brown"]), h2:has([data-value="brown"]) { color: #64473a; }
h2:has([data-text-color="red"]), h2:has([data-value="red"]) { color: #e03e3e; }
h2:has([data-text-color="orange"]), h2:has([data-value="orange"]) { color: #d9730d; }
h2:has([data-text-color="yellow"]), h2:has([data-value="yellow"]) { color: #dfab01; }
h2:has([data-text-color="green"]), h2:has([data-value="green"]) { color: #4d6461; }
h2:has([data-text-color="blue"]), h2:has([data-value="blue"]) { color: #0b6e99; }
h2:has([data-text-color="purple"]), h2:has([data-value="purple"]) { color: #6940a5; }
h2:has([data-text-color="pink"]), h2:has([data-value="pink"]) { color: #ad1a72; }
.ap-article__body hr, .ap-case__body hr {
  border: none; border-top: 2px solid #1a2744; margin: 40px 0;
}
/* H3 = 절(節). 바 없이 본문(17px)보다 한 단계만 큰 문단 제목 — 장과 확실히 구분되도록 */
.ap-article__body h3, .ap-case__body h3 {
  font-size: 18px; font-weight: 700; color: #1a2744; margin: 28px 0 8px;
  scroll-margin-top: 124px;
}
.ap-article__body p, .ap-case__body p { margin: 0 0 14px; }
/* 이미지 — 레거시 인라인 width/height(element.style)를 이겨야 해서 !important
   (모바일에서 판결문 이미지가 찌그러지거나 넘치는 현상 방지) */
/* 본문 이미지: 컬럼 가로 꽉 채움 (똑생 스타일) — 에디터에서 줄여둔 폭·레거시 인라인 크기 무시 */
.ap-article__body img, .ap-case__body img { width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: 12px; margin: 10px 0; }
.ap-article__body a, .ap-case__body a { color: #d97706; text-decoration: underline; text-underline-offset: 3px; }
.ap-article__body ul, .ap-article__body ol { padding-left: 22px; margin: 0 0 16px; }
.ap-article__body li { margin: 6px 0; }

/* ── 에디터가 내보낸 글머리 목록·번호 목록 ──
   BlockNote는 목록을 ul/li가 아니라 div[data-content-type="…ListItem"]으로 내보내고,
   글머리 기호·번호는 자기 CSS(::before)가 그린다. 공개 페이지엔 그 CSS가 없어서
   기호가 통째로 안 보였다(데스크탑·모바일 모두). 여기서 직접 그린다.
   (관리자 글쓰기 화면은 이 파일을 안 쓰므로 기호가 두 번 그려질 일은 없다) */
.ap-article__body [data-content-type="bulletListItem"],
.ap-article__body [data-content-type="numberedListItem"],
.ap-case__body [data-content-type="bulletListItem"],
.ap-case__body [data-content-type="numberedListItem"] {
  position: relative;
  padding-left: 26px;
}
.ap-article__body [data-content-type="bulletListItem"]::before,
.ap-case__body [data-content-type="bulletListItem"]::before {
  content: "•";
  position: absolute; left: 8px; top: 0;
  color: #4a5468; font-weight: 700;
}
/* 번호는 CSS 카운터로 센다 — 내보낸 HTML에 번호 값이 들어 있지 않다.
   목록이 아닌 블록을 만나면 카운터를 리셋해서, 새 목록은 다시 1번부터 시작한다.
   주의: 본문 전체(.ap-article__body)에 counter-reset을 걸면 안 된다. 조상에 카운터가
   먼저 생기면 형제 요소의 리셋이 뒤 항목에 반영되지 않아 번호가 계속 이어진다(확인함). */
.ap-article__body .bn-block-outer:not(:has(> .bn-block > [data-content-type="numberedListItem"])),
.ap-case__body .bn-block-outer:not(:has(> .bn-block > [data-content-type="numberedListItem"])) {
  counter-reset: ap-num;
}
.ap-article__body [data-content-type="numberedListItem"],
.ap-case__body [data-content-type="numberedListItem"] { counter-increment: ap-num; }
.ap-article__body [data-content-type="numberedListItem"]::before,
.ap-case__body [data-content-type="numberedListItem"]::before {
  content: counter(ap-num) ".";
  position: absolute; left: 2px; top: 0;
  color: #4a5468; font-weight: 600;
}
/* 목록 항목 안의 문단은 본문 문단보다 촘촘하게 */
.ap-article__body [data-content-type$="ListItem"] > p,
.ap-case__body [data-content-type$="ListItem"] > p { margin: 0 0 6px; }
/* 들여쓴 하위 목록 */
.ap-article__body .bn-block-group .bn-block-group,
.ap-case__body .bn-block-group .bn-block-group { margin-left: 24px; }
/* 체크 목록: 기본 체크박스가 글자와 나란히 놓이도록 */
.ap-article__body [data-content-type="checkListItem"] > div,
.ap-case__body [data-content-type="checkListItem"] > div { display: flex; align-items: flex-start; gap: 8px; }
.ap-article__body blockquote {
  margin: 24px 0; padding: 18px 22px; background: #fff8ee;
  border-left: 4px solid #f7941d; border-radius: 0 12px 12px 0; color: #5a4632;
}
.ap-article__body table, .ap-case__body table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px;
}
.ap-article__body th, .ap-case__body th {
  background: #1a2744; color: #fff; padding: 10px 12px; font-weight: 600; text-align: left;
}
.ap-article__body td, .ap-case__body td { border: 1px solid #e8ebf0; padding: 10px 12px; }

/* 레거시 본문의 잡스타일 정돈 — 에디터 글자크기(.ap-fs)는 예외 */
.ap-article__body [style*="font-family"], .ap-case__body [style*="font-family"] { font-family: inherit !important; }
.ap-article__body span[style*="font-size"]:not(.ap-fs),
.ap-case__body span[style*="font-size"]:not(.ap-fs) { font-size: inherit !important; }

/* ── CTA ── */
.ap-cta {
  margin: 56px 0 8px; padding: 34px 30px; text-align: center;
  background: linear-gradient(135deg, #1a2744 0%, #243352 100%);
  border-radius: 18px; color: #fff;
}
.ap-cta__title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.ap-cta__desc { font-size: 15px; color: #c3ccdd; margin-bottom: 20px; }
.ap-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ap-btn {
  display: inline-block; padding: 13px 30px; border-radius: 10px;
  font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .15s;
}
.ap-btn:hover { transform: translateY(-2px); }
.ap-btn--primary { background: #f7941d; color: #fff; }
.ap-btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* ── 세 줄 요약 (SEO·GEO 보강 — case_fields.summary) ── */
.ap-summary {
  background: #fff8ee; border: 1px solid #f3e2c6; border-radius: 14px;
  padding: 20px 24px; margin: 0 0 28px;
}
.ap-summary__title {
  font-size: 14px; font-weight: 800; color: #b06a00; letter-spacing: 1px; margin: 0 0 10px;
}
.ap-summary ul { list-style: none; margin: 0; padding: 0; }
.ap-summary li {
  position: relative; padding-left: 22px; margin: 7px 0;
  font-size: 16px; line-height: 1.6; color: #3d4556; font-weight: 500;
}
.ap-summary li:before { content: "✓"; position: absolute; left: 2px; color: #f7941d; font-weight: 800; }

/* ── 자주 묻는 질문 (case_fields.faqs — details 아코디언) ── */
.ap-faq { margin-top: 48px; border-top: 1px solid #e8ebf0; padding-top: 28px; }
.ap-faq__title { font-size: 19px; font-weight: 800; color: #1a2744; margin-bottom: 8px; border: none; padding: 0; }
.ap-faq__item { border-bottom: 1px solid #f0f2f5; }
.ap-faq__item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 15px 34px 15px 30px; font-size: 16px; font-weight: 600; color: #2b3240; line-height: 1.5;
}
.ap-faq__item summary::-webkit-details-marker { display: none; }
.ap-faq__item summary:before { content: "Q"; position: absolute; left: 2px; color: #f7941d; font-weight: 800; }
.ap-faq__item summary:after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid #a3abb8; border-bottom: 2px solid #a3abb8;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.ap-faq__item[open] summary:after { transform: translateY(-30%) rotate(225deg); }
.ap-faq__item summary:hover { color: #f7941d; }
.ap-faq__item p { margin: 0; padding: 2px 8px 18px 30px; font-size: 15.5px; line-height: 1.75; color: #4a5468; }

/* ── 관련 글 ── */
.ap-related { margin-top: 48px; border-top: 1px solid #e8ebf0; padding-top: 28px; }
.ap-related__title { font-size: 19px; font-weight: 800; color: #1a2744; margin-bottom: 14px; border: none; padding: 0; }
.ap-related ul { list-style: none; margin: 0; padding: 0; }
.ap-related li a {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 4px; border-bottom: 1px solid #f0f2f5; text-decoration: none;
}
.ap-related__t { color: #2b3240; font-size: 16px; }
.ap-related li a:hover .ap-related__t { color: #f7941d; }
.ap-related__d { color: #a3abb8; font-size: 13px; white-space: nowrap; }

/* ── 대륜식 성공사례 전용 ── */
.ap-case__head {
  display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  padding-bottom: 26px; border-bottom: 1px solid #e8ebf0; margin-bottom: 26px; flex-wrap: wrap;
}
.ap-badge {
  display: inline-block; background: #1a2744; color: #fff; font-size: 13px;
  font-weight: 700; padding: 5px 14px; border-radius: 6px; letter-spacing: .5px;
}
.ap-case__headline h1 { font-size: 30px; margin: 12px 0 14px; }
.ap-lawyers { text-align: center; flex-shrink: 0; }
.ap-lawyers__label { font-size: 13px; font-weight: 700; color: #7b8494; margin-bottom: 10px; }
.ap-lawyers__row { display: flex; gap: 14px; }
.ap-lawyer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-lawyer__img {
  width: 64px; height: 64px; border-radius: 50%; background-size: cover;
  background-position: top center; border: 2px solid #e8ebf0; display: block;
}
.ap-lawyer__name { font-size: 13px; font-weight: 600; color: #3d4556; max-width: 90px; }
.ap-case__info {
  list-style: none; margin: 0 0 36px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.ap-case__info li {
  background: #f7f8fa; border: 1px solid #e8ebf0; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.ap-case__k { font-size: 12px; font-weight: 700; color: #98a1af; letter-spacing: .5px; }
.ap-case__v { font-size: 16px; font-weight: 700; color: #1a2744; }

/* 레거시 성공사례 본문(inner_content_head 등) 정돈 — 어떤 태그든 섹션 제목처럼 */
.ap-case__body .inner_content_head,
.ap-case__body .inner_content_head * {
  font-size: 24px !important; font-weight: 800 !important; color: #1a2744 !important;
  line-height: 1.4;
}
.ap-case__body .inner_content_head {
  margin: 52px 0 16px; padding-top: 20px; border-top: 2px solid #1a2744;
}
.ap-case__body .keyword_bx, .ap-case__body .laywer_bx { display: none; }

@media (max-width: 640px) {
  /* 좌우 여백은 바깥 .container(20px)가 이미 갖고 있어 여기선 0 — 2중 padding 제거.
     상단: 고정 헤더(60px)에 제목이 깔리지 않을 만큼만 확보 (기존엔 .detail-wrap 80px과 겹쳐 과했음) */
  .ap-article, .ap-case { font-size: 15.5px; padding: 62px 0 40px; }
  .section-detail .detail-wrap { margin-top: 0; }
  /* 형사 테마의 .main 기본 마진(7.5rem)이 본문 패딩과 겹쳐 헤더~제목이 크게 비었음 → 제거.
     (본문 패딩 62px만으로 고정 헤더 60px를 클리어) 도산은 이 마진이 없어 해당 없음 */
  body:has(.logo[href*="/crimelaw/"]) .main { margin-top: 0; }
  /* 회생파산은 바깥 래퍼가 이미 상단 40px을 주고 main도 헤더 아래에서 시작한다.
     거기에 62px을 더하면 헤더와 제목 사이가 과하게 벌어졌다(측정: 116px). */
  body:not(:has(.logo[href*="/crimelaw/"])) .ap-article,
  body:not(:has(.logo[href*="/crimelaw/"])) .ap-case { padding-top: 16px; }
  .ap-article__head h1 { font-size: 26px; }
  .ap-article__body h2, .ap-article__body h3,
  .ap-case__body h2, .ap-case__body h3 { text-align: justify; word-break: normal; }
  /* 모바일 헤더는 60px이라 데스크탑 기준(124px)은 과하다 */
  .ap-article__body h2, .ap-article__body h3,
  .ap-case__body h2, .ap-case__body h3,
  .ap-case__body .inner_content_head h3 { scroll-margin-top: 84px; }
  .ap-case__headline h1 { font-size: 24px; }
  .ap-article__body h2, .ap-case__body h2 { font-size: 21px; margin-top: 42px; }
  .ap-lawyers { width: 100%; text-align: left; }
  /* 목차와 첫 내용 사이가 너무 벌어져 보여 좁힌다 */
  .ap-toc { padding: 16px 18px; margin-bottom: 20px; }
  /* 목차 다음 첫 요소가 소제목이면 위 여백도 줄인다 (h2 기본 margin-top 42px) */
  .ap-article__body > :is(h2, h3):first-child,
  .ap-case__body > :is(h2, h3):first-child,
  .ap-article__body .bn-block-outer:first-child :is(h2, h3),
  .ap-case__body .bn-block-outer:first-child :is(h2, h3) { margin-top: 6px; }
  /* 함께 읽으면 좋은 글: 날짜 숨기고 제목만 (반반 나뉘어 어색하던 것) */
  .ap-related__d { display: none; }
  .ap-related__t { flex: 1; min-width: 0; }
  /* 에디터에서 지정한 글자 크기(px)는 PC 기준 — 모바일에선 같은 비율(15.5/17)로 축소.
     지정 안 한 글자만 줄고 지정 글자는 18px 그대로 커 보이던 문제. 17px 미만(일부러 작게)은 유지 */
  .ap-fs[data-value="17"] { font-size: 15.5px !important; }
  .ap-fs[data-value="18"] { font-size: 16.5px !important; }
  .ap-fs[data-value="19"] { font-size: 17.5px !important; }
  .ap-fs[data-value="20"] { font-size: 18px !important; }
  .ap-fs[data-value="21"] { font-size: 19px !important; }
  .ap-fs[data-value="22"] { font-size: 20px !important; }
  .ap-fs[data-value="23"] { font-size: 21px !important; }
  .ap-fs[data-value="24"] { font-size: 22px !important; }
  .ap-fs[data-value="25"] { font-size: 22.5px !important; }
  .ap-fs[data-value="26"] { font-size: 23.5px !important; }
  .ap-fs[data-value="28"] { font-size: 25.5px !important; }
  .ap-fs[data-value="30"] { font-size: 27px !important; }
  .ap-fs[data-value="32"] { font-size: 29px !important; }
  /* 이전글·다음글: 날짜 숨기고 제목이 남은 폭 전체 사용 (…처리) */
  .border-list-type .inner { width: 100%; min-width: 0; }
  .border-list-type .inner .date { display: none; }
  .border-list-type .inner .w-con {
    float: none; width: 100%; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 하단 상담바(형사): 남색 통짜 바 → 똑생식 플로팅 알약 버튼 두 개.
     배경을 없애고 버튼만 남기되, 투명해진 바가 본문 클릭을 막지 않게 pointer-events 처리 */
  /* 반투명 흰 배경 바(똑생식) + 스크롤 160px 이후 아래에서 슬라이드 등장 (apart-article.js) */
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #eef0f4;
    transform: translateY(110%);
    transition: transform 0.3s;
  }
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry.ap-shown { transform: translateY(0); }
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry .inner { padding: 9px 0 max(9px, env(safe-area-inset-bottom)); justify-content: center; gap: 8px; }
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry .inner .position-btn { display: none !important; }
  /* 두 버튼을 같은 비율로 — 전화연결이 좁아 글자가 깨지고 상담신청은 과하게 넓던 것 */
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry .inner .tit {
    flex: 1 1 0; max-width: 170px; min-width: 0;
    height: 44px; line-height: 44px; padding: 0 10px;
    justify-content: center; white-space: nowrap;
    border-radius: 999px; border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22);
  }
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry .inner .tit p {
    font-size: 14.5px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
  }
  body:has(.logo[href*="/crimelaw/"]) .quick-inquiry .inner .btn-type-01.m-inquiry-btn {
    flex: 1 1 0; max-width: 185px; min-width: 0;
    height: 44px; line-height: 44px; padding: 0 10px;
    white-space: nowrap; text-align: center;
    border-radius: 999px; font-size: 14.5px;
    box-shadow: 0 4px 16px rgba(23, 41, 89, 0.35);
  }
  /* 우측 하단 플로팅(메인센터·카카오): 62px 원이 본문을 가려 축소.
     채널톡 '빠른 문의' 버튼(외부 위젯, ~bottom 100~160px 영역)과 겹치지 않게 그 위로 배치 */
  .mo_kakao_btn { width: 46px; height: 46px; bottom: 170px; right: 14px; }
  .mo_kakao_btn .link img { width: 46px; }
  .mo_site_btn { bottom: 224px; right: 14px; }
  .mo_site_btn a { width: 46px; height: 46px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18); }
  .mo_site_btn a svg { width: 15px; height: 15px; }
  .mo_site_btn a p { font-size: 9.5px; }
  /* 채널톡 기본 런처 가림 — hideChannelButton API가 씹히는 경우 대비 CSS 이중 차단.
     (커스텀 버튼 클릭 시 JS가 이 클래스를 풀어 채팅창은 정상 표시) */
  body.ap-hide-ch #ch-plugin,
  body.ap-hide-ch [id^="ch-plugin"] { display: none !important; }
  /* 채널톡 대체 커스텀 버튼 (apart-article.js가 기본 버튼을 숨기고 이걸 붙인다) — 같은 46px 규격 */
  .ap-chat-btn {
    position: fixed; right: 14px; bottom: 116px; z-index: 1000;
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: none; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  }
  .ap-chat-btn svg { width: 15px; height: 15px; }
  .ap-chat-btn p { margin: 0; font-size: 9.5px; font-weight: 500; color: #172959; letter-spacing: -0.5px; }
}

/* ── 에디터(BlockNote) 글자색·배경색 렌더링 ──
   에디터는 data-text-color/data-background-color 속성으로 저장하는데
   공개 페이지엔 에디터 CSS가 없어 색이 안 보이던 문제 대응 (팔레트는 에디터와 동일) */
.ap-article__body [data-text-color="gray"],   .ap-case__body [data-text-color="gray"]   { color: #9b9a97; }
.ap-article__body [data-text-color="brown"],  .ap-case__body [data-text-color="brown"]  { color: #64473a; }
.ap-article__body [data-text-color="red"],    .ap-case__body [data-text-color="red"]    { color: #e03e3e; }
.ap-article__body [data-text-color="orange"], .ap-case__body [data-text-color="orange"] { color: #d9730d; }
.ap-article__body [data-text-color="yellow"], .ap-case__body [data-text-color="yellow"] { color: #dfab01; }
.ap-article__body [data-text-color="green"],  .ap-case__body [data-text-color="green"]  { color: #4d6461; }
.ap-article__body [data-text-color="blue"],   .ap-case__body [data-text-color="blue"]   { color: #0b6e99; }
.ap-article__body [data-text-color="purple"], .ap-case__body [data-text-color="purple"] { color: #6940a5; }
.ap-article__body [data-text-color="pink"],   .ap-case__body [data-text-color="pink"]   { color: #ad1a72; }
.ap-article__body [data-background-color="gray"],   .ap-case__body [data-background-color="gray"]   { background-color: #ebeced; }
.ap-article__body [data-background-color="brown"],  .ap-case__body [data-background-color="brown"]  { background-color: #e9e5e3; }
.ap-article__body [data-background-color="red"],    .ap-case__body [data-background-color="red"]    { background-color: #fbe4e4; }
.ap-article__body [data-background-color="orange"], .ap-case__body [data-background-color="orange"] { background-color: #f6e9d9; }
.ap-article__body [data-background-color="yellow"], .ap-case__body [data-background-color="yellow"] { background-color: #fbf3db; }
.ap-article__body [data-background-color="green"],  .ap-case__body [data-background-color="green"]  { background-color: #ddedea; }
.ap-article__body [data-background-color="blue"],   .ap-case__body [data-background-color="blue"]   { background-color: #ddebf1; }
.ap-article__body [data-background-color="purple"], .ap-case__body [data-background-color="purple"] { background-color: #eae4f2; }
.ap-article__body [data-background-color="pink"],   .ap-case__body [data-background-color="pink"]   { background-color: #f4dfeb; }

/* ── 에디터 글자 크기(px, span.ap-fs 인라인)·줄간격 렌더링 ──
   글자 크기는 span.ap-fs의 inline font-size가 그대로 적용된다 (위 정돈 규칙에서 예외 처리).
   줄간격은 문단 단위 — 문단 안에 해당 스타일 텍스트가 있으면 문단 전체에 적용 */
.ap-article__body :is(p, li):has(span[data-line-height="tight"]),
.ap-case__body :is(p, li):has(span[data-line-height="tight"]) { line-height: 1.4; }
.ap-article__body :is(p, li):has(span[data-line-height="loose"]),
.ap-case__body :is(p, li):has(span[data-line-height="loose"]) { line-height: 1.9; }
@media (max-width: 640px) {
  .ap-article__body :is(p, li):has(span[data-line-height="loose"]),
  .ap-case__body :is(p, li):has(span[data-line-height="loose"]) { line-height: 1.75; }
}
/* 빈 문단 연속 구간을 렌더 시점에 접은 자리 — 문단 사이 간격 역할만 (board.ts collapseEmptyParagraphs) */
.ap-article__body .ap-blank, .ap-case__body .ap-blank { height: 8px; margin: 0; padding: 0; }

/* 인라인(드래그 선택) 글자색·배경색 — 에디터는 data-style-type/data-value 형태로 내보낸다 */
.ap-article__body [data-style-type="textColor"][data-value="gray"],   .ap-case__body [data-style-type="textColor"][data-value="gray"]   { color: #9b9a97; }
.ap-article__body [data-style-type="textColor"][data-value="brown"],  .ap-case__body [data-style-type="textColor"][data-value="brown"]  { color: #64473a; }
.ap-article__body [data-style-type="textColor"][data-value="red"],    .ap-case__body [data-style-type="textColor"][data-value="red"]    { color: #e03e3e; }
.ap-article__body [data-style-type="textColor"][data-value="orange"], .ap-case__body [data-style-type="textColor"][data-value="orange"] { color: #d9730d; }
.ap-article__body [data-style-type="textColor"][data-value="yellow"], .ap-case__body [data-style-type="textColor"][data-value="yellow"] { color: #dfab01; }
.ap-article__body [data-style-type="textColor"][data-value="green"],  .ap-case__body [data-style-type="textColor"][data-value="green"]  { color: #4d6461; }
.ap-article__body [data-style-type="textColor"][data-value="blue"],   .ap-case__body [data-style-type="textColor"][data-value="blue"]   { color: #0b6e99; }
.ap-article__body [data-style-type="textColor"][data-value="purple"], .ap-case__body [data-style-type="textColor"][data-value="purple"] { color: #6940a5; }
.ap-article__body [data-style-type="textColor"][data-value="pink"],   .ap-case__body [data-style-type="textColor"][data-value="pink"]   { color: #ad1a72; }
.ap-article__body [data-style-type="backgroundColor"][data-value="gray"],   .ap-case__body [data-style-type="backgroundColor"][data-value="gray"]   { background-color: #ebeced; }
.ap-article__body [data-style-type="backgroundColor"][data-value="brown"],  .ap-case__body [data-style-type="backgroundColor"][data-value="brown"]  { background-color: #e9e5e3; }
.ap-article__body [data-style-type="backgroundColor"][data-value="red"],    .ap-case__body [data-style-type="backgroundColor"][data-value="red"]    { background-color: #fbe4e4; }
.ap-article__body [data-style-type="backgroundColor"][data-value="orange"], .ap-case__body [data-style-type="backgroundColor"][data-value="orange"] { background-color: #f6e9d9; }
.ap-article__body [data-style-type="backgroundColor"][data-value="yellow"], .ap-case__body [data-style-type="backgroundColor"][data-value="yellow"] { background-color: #fbf3db; }
.ap-article__body [data-style-type="backgroundColor"][data-value="green"],  .ap-case__body [data-style-type="backgroundColor"][data-value="green"]  { background-color: #ddedea; }
.ap-article__body [data-style-type="backgroundColor"][data-value="blue"],   .ap-case__body [data-style-type="backgroundColor"][data-value="blue"]   { background-color: #ddebf1; }
.ap-article__body [data-style-type="backgroundColor"][data-value="purple"], .ap-case__body [data-style-type="backgroundColor"][data-value="purple"] { background-color: #eae4f2; }
.ap-article__body [data-style-type="backgroundColor"][data-value="pink"],   .ap-case__body [data-style-type="backgroundColor"][data-value="pink"]   { background-color: #f4dfeb; }

/* ── 에디터(BlockNote)가 내보낸 고정 픽셀 폭 정리 — 모바일 대응 ──
   에디터는 이미지 래퍼에 style="width:604px" 같은 고정 폭을 그대로 내보낸다.
   좁은 화면에선 이 폭이 화면 밖으로 넘쳐(가로 오버플로) 모바일 브라우저가
   페이지 전체를 축소해버려 글씨가 아주 작게 보였다.
   → 래퍼만 화면 폭으로 제한한다 (이미지 자체 폭은 max-width로 이미 제한됨). */
.ap-article__body .bn-file-block-content-wrapper,
.ap-case__body .bn-file-block-content-wrapper { width: 100% !important; max-width: 100%; }
.ap-article__body .bn-visual-media-wrapper, .ap-case__body .bn-visual-media-wrapper { width: 100%; }
/* 표는 넘칠 때 표 안에서만 가로 스크롤 */
.ap-article__body .tableWrapper, .ap-case__body .tableWrapper { max-width: 100%; overflow-x: auto; }
/* 에디터 전용 잔여물(리사이즈 손잡이) 숨김 */
.ap-article__body .bn-resize-handle, .ap-case__body .bn-resize-handle { display: none !important; }
/* 긴 URL·영문 단어가 줄바꿈 없이 넘치는 것 방지 */
.ap-article__body, .ap-case__body { overflow-wrap: break-word; }