/* 에디터 콘텐츠 블록 — 체크 박스 / 더보기·관련기사 카드
   아티클형·성공사례형(apart-post.css와 함께)과 기본 템플릿(LEGACY_BODY_STYLE),
   그리고 관리자 글쓰기 화면에서 같은 파일을 불러온다. 그래서 스코프 없이 클래스로만 쓴다.
   팔레트는 apart-post.css와 동일: 네이비 #1a2744, 오렌지 #f7941d, 본문 #2b3240

   주의: 여백 지정에는 태그를 함께 붙여 우선순위를 올린다(예: `> p.ap-…`).
   apart-post.css의 `.ap-article__body p / ul / li` 가 클래스 하나짜리 규칙을 이기기 때문에,
   그냥 `.ap-linkcard__label { margin: 0 }` 로 두면 문단 기본 여백이 그대로 살아난다. */

/* 편집 화면에서만 쓰는 안내 문구 — 저장 HTML에 섞여 나와도 공개 페이지엔 보이지 않게 */
[data-ap-edit] { display: none !important; }

/* 데스크탑에서 카드가 글자 길이만큼만 줄어들던 것 —
   에디터가 블록 내용을 flex로 감싸 안쪽 요소가 내용 폭에 맞춰졌다. 폭을 명시해 채운다.
   (공개 페이지에도 같은 래퍼가 그대로 저장되므로 두 화면 모두에 적용된다) */
.bn-block-content[data-content-type="checklist"],
.bn-block-content[data-content-type="linkcard"],
[data-content-type="checklist"], [data-content-type="linkcard"] { width: 100%; }

/* ── 체크 박스 ── */
.ap-box-wrap { margin: 24px 0; width: 100%; box-sizing: border-box; }
.ap-box-wrap > p.ap-box-wrap__title {
  font-size: 17px; font-weight: 700; color: #1a2744;
  border-left: 3px solid #c9ced8; padding-left: 10px;
  margin: 0 0 10px;
}
.ap-box {
  border: 1px solid #e3e7ee; border-radius: 12px;
  padding: 18px 20px; background: #fff;
  width: 100%; box-sizing: border-box;
}
.ap-box > ul.ap-box__list { list-style: none; margin: 0; padding: 0; }
.ap-box__list > li {
  position: relative; padding-left: 14px;
  margin: 10px 0; line-height: 1.6; color: #2b3240;
  text-align: left;
}
.ap-box__list > li:first-child { margin-top: 0; }
.ap-box__list > li:last-child { margin-bottom: 0; }
.ap-box__list > li::before {
  content: "·"; position: absolute; left: 2px; color: #7b8494; font-weight: 700;
}

/* ── 더보기·관련기사 카드 ──
   라벨이 카드 위에 탭처럼 맞물리고, 그 아래 테두리 카드에 링크가 줄줄이. */
/* flex 세로 배치 — 라벨을 inline-block으로 두면 글자 baseline 아래 여백(4~5px)이 생겨
   탭과 카드가 떨어져 보인다. 폭은 라벨 글자만큼만, 카드는 꽉 차게. */
.ap-linkcard {
  margin: 28px 0; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ap-linkcard > p.ap-linkcard__label {
  display: block;
  margin: 0 0 -1px 0;              /* -1px: 카드 위 테두리와 겹쳐 한 덩어리로 보이게 */
  padding: 7px 18px;
  font-size: 13px; font-weight: 700; color: #4a5468; letter-spacing: -0.2px;
  background: #f2f4f7;
  border: 1px solid #e3e7ee; border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: relative; z-index: 1;
}
.ap-linkcard > ul.ap-linkcard__list {
  list-style: none; margin: 0; padding: 2px 6px;
  border: 1px solid #e3e7ee; border-radius: 12px; background: #fff;
  width: 100%; box-sizing: border-box; align-self: stretch;
}
/* 라벨 탭이 맞물리는 왼쪽 위 모서리만 각지게 (라벨을 비우면 그냥 둥근 카드) */
.ap-linkcard__label + ul.ap-linkcard__list { border-top-left-radius: 0; }
.ap-linkcard__list > li { margin: 0; }
.ap-linkcard__list > li + li { border-top: 1px solid #f0f2f6; }
/* flex가 아니라 block + 절대배치 아이콘 —
   flex로 두면 제목 글자가 좁은 화면에서 줄바꿈되지 않고 카드가 화면 밖으로 넘친다. */
.ap-linkcard__list a {
  display: block; position: relative;
  padding: 13px 32px 13px 27px;    /* 좌: › 자리, 우: ↗ 자리 */
  color: #1a2744; font-size: 15.5px; font-weight: 600;
  text-decoration: none; line-height: 1.5;
  word-break: keep-all; overflow-wrap: break-word; text-align: left;
  transition: color .15s;
}
.ap-linkcard__list a::before {
  content: "›"; position: absolute; left: 12px; top: 11px;
  color: #9aa3b1; font-size: 19px; font-weight: 700; line-height: 1.5;
}
/* 오른쪽 끝 외부링크 표시 */
.ap-linkcard__list a::after {
  content: "↗"; position: absolute; right: 12px; top: 14px;
  color: #aeb6c2; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.ap-linkcard__list a:hover { color: #f7941d; }
.ap-linkcard__list a:hover::before,
.ap-linkcard__list a:hover::after { color: #f7941d; }

@media (max-width: 640px) {
  .ap-box { padding: 15px 16px; }
  .ap-linkcard__list a { font-size: 14.5px; padding: 12px 28px 12px 24px; }
  .ap-linkcard > p.ap-linkcard__label { padding: 6px 14px; font-size: 12.5px; }
}

/* 에디터에서 아직 비어 있는 블록 안내 (공개 페이지에선 위 [data-ap-edit] 규칙이 숨긴다) */
.ap-box__empty { color: #9aa3b1; font-size: 14px; margin: 0; }