/*
 * callouts.css — 온톨로지 교육자료 공통 콜아웃/강조 박스 스타일
 *
 * 설계 원칙:
 *  - "좌측 3px 색막대" 완전 제거 → "라벨 칩 + 평면 카드" 디자인
 *  - CSS ::before 로 라벨 칩 자동 삽입 — HTML 마크업 변경 없음
 *  - 색은 각 페이지 :root 에 이미 정의된 var(--xxx) 만 참조
 *  - 이 파일에서 새 CSS 변수 선언 금지
 *  - 콜아웃 무관 규칙(body, nav, typography, code, 표 등) 절대 포함 금지
 */

/* ============================================================
   1. 공통 카드 기반 — border-left 제거, 균일 radius, 옅은 테두리
   ============================================================ */

/* .cmp-question — 질문/함정 박스 */
.cmp-question {
  background: var(--accent-soft);
  padding: 14px 18px 14px 18px;
  border-radius: 8px;
  border: 1px solid rgba(14, 138, 130, 0.25);
  /* border-left 3px 색막대 제거 */
  margin-bottom: 16px;
  font-size: 0.98rem;
  color: var(--text);
}
/* 라벨 칩: ⚠ 함정 */
.cmp-question::before {
  content: "⚠ 함정";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-bottom: 8px;
}
.cmp-question strong { color: var(--accent); }

/* .cmp-takeaway — 핵심 정리 */
.cmp-takeaway {
  background: var(--bg-card-2);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.94rem;
  /* border-left 3px 색막대 제거 */
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  line-height: 1.65;
}
/* 라벨 칩: ◆ 핵심 */
.cmp-takeaway::before {
  content: "◆ 핵심";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-2);
  color: #fff;
  margin-bottom: 8px;
}
.cmp-takeaway strong { color: var(--text); }

/* .keypoint — 키포인트 박스 */
.keypoint {
  background: var(--accent-soft);
  /* border-left 3px 색막대 제거 */
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid rgba(14, 138, 130, 0.25);
  margin: 20px 0;
  font-size: 0.95rem;
}
/* 라벨 칩: ◆ 핵심 */
.keypoint::before {
  content: "◆ 핵심";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-bottom: 8px;
}
/* .keypoint-label — 기존 인라인 라벨(HTML에 남아있으면 숨김 처리로 칩과 중복 방지) */
.keypoint-label {
  display: none;
}

/* ============================================================
   2. .callout 계열
   ============================================================ */

/* .callout 기본 */
.callout {
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.94rem;
  /* border-left 색막대 제거 */
  border: 1px solid var(--border-soft);
  background: var(--bg-card-2);
}
/* .callout-title — 기존 HTML 안에 남아있는 인라인 제목 태그 */
.callout-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

/* .callout.warn */
.callout.warn {
  background: var(--warn-soft);
  border: 1px solid rgba(180, 107, 0, 0.25);
  /* border-left 3px 색막대 제거 */
}
/* 라벨 칩: ⚠ 주의
   단, .callout-title 이 HTML에 이미 있는 경우 칩이 중복되므로
   .callout-title 이 없는 .warn 에만 적용 — :not 으로 구분이 어려우므로
   칩을 표시하되 .callout-title 이 있으면 칩은 숨겨지도록 CSS로 처리 */
.callout.warn::before {
  content: "⚠ 주의";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--warn);
  color: #fff;
  margin-bottom: 8px;
}
/* HTML에 .callout-title 이 있으면 ::before 칩 숨김 (중복 방지) */
.callout.warn:has(.callout-title)::before {
  display: none;
}
.callout.warn .callout-title { color: var(--warn); }

/* .callout.info */
.callout.info {
  background: var(--accent-soft);
  border: 1px solid rgba(14, 138, 130, 0.25);
  /* border-left 3px 색막대 제거 */
}
/* 라벨 칩: ℹ 참고 */
.callout.info::before {
  content: "ℹ 참고";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-bottom: 8px;
}
/* HTML에 .callout-title 이 있으면 ::before 칩 숨김 */
.callout.info:has(.callout-title)::before {
  display: none;
}
.callout.info .callout-title { color: var(--accent); }

/* .callout.callout-teal — 심화/부연 박스 (+ 한 단계 더) */
.callout.callout-teal {
  background: rgba(14, 138, 130, 0.06);
  border: 1px solid rgba(14, 138, 130, 0.22);
  /* border-left 색막대 없음 */
}
/* 라벨 칩: + 한 단계 더 */
.callout.callout-teal::before {
  content: "+ 한 단계 더";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-bottom: 8px;
}

/* ============================================================
   3. .matrix-side-note 계열 — 칩 없음, 카드 형태만 변경
   ============================================================ */

.matrix-side-note > p {
  margin: 0 0 8px 0;
  padding: 8px 12px;
  /* border-left 3px 색막대 제거 */
  border: 1px solid var(--border-soft);
  background: var(--bg-card-2);
  border-radius: 6px;
  line-height: 1.55;
}
.matrix-side-note > p:last-child { margin-bottom: 0; }
.matrix-side-note > p > strong:first-child {
  color: var(--text);
  margin-right: 4px;
}
/* rdf-side / lpg-side 변형 — 테두리 색만 구분 (좌측 막대 없이) */
.matrix-side.rdf-side .matrix-side-note > p {
  border-color: rgba(200, 56, 56, 0.35);
}
.matrix-side.lpg-side .matrix-side-note > p {
  border-color: rgba(14, 138, 130, 0.35);
}

/* .matrix-row-takeaway — 비교표 행 정리 */
.matrix-row-takeaway {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-dim);
  background: var(--bg);
  /* border-left 3px 색막대 제거 */
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 14px;
  line-height: 1.6;
}
/* 라벨 칩: ◆ 핵심 */
.matrix-row-takeaway::before {
  content: "◆ 핵심";
  display: block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-2);
  color: #fff;
  margin-bottom: 6px;
}
.matrix-row-takeaway strong { color: var(--text); }

/* ============================================================
   4. #s05 .cmp-case-study — Vector RAG vs GraphRAG 케이스 박스
   ============================================================ */

/* cmp-vec / cmp-graph — s05 컨텍스트에서만 border-left 제거
   border-top (색 구분) 은 유지하여 두 패널 구분 */
#s05 .cmp-case-study .cmp-vec {
  border-left: none;
  border-top: 3px solid var(--danger);
}
#s05 .cmp-case-study .cmp-graph {
  border-left: none;
  border-top: 3px solid var(--accent);
}

/* ============================================================
   5. .d11 .callout — 다크 테마 섹션 내 콜아웃
      (d11 전용 변수: --bg-1, --line, --teal, --purple, --amber, --text-1)
      이 규칙들은 파일 끝에 배치하여 일반 .callout 규칙보다 후행 적용되도록 함
   ============================================================ */

/* .d11 안에서 .callout 계열의 일반 라벨 칩(::before)을 dot 방식으로 재정의
   — 기존 인라인 스타일에서 .d11 .callout { position: relative } 가 정의돼 있음 */
.d11 .callout::before {
  content: '';
  display: block;    /* 라벨 칩의 block 재정의 */
  width: 6px;
  height: 6px;
  margin: 0;
  padding: 0;
  font-size: inherit; /* 칩의 font-size 0.72em 재정의 */
  font-weight: inherit;
  letter-spacing: normal;
  border-radius: 50%;
  /* dot 위치: 우상단 절대 배치 */
  position: absolute;
  top: 18px;
  right: 22px;
  background: var(--amber); /* 기본 amber dot */
}

/* .d11 .callout-teal — teal dot */
.d11 .callout-teal {
  background: var(--bg-1);
}
.d11 .callout.callout-teal::before {
  background: var(--teal);
}

/* .d11 .callout-purple — purple dot */
.d11 .callout-purple {
  background: var(--bg-1);
}
.d11 .callout.callout-purple::before {
  background: var(--purple);
}

.d11 .callout strong { color: var(--text-1); }