@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ============================================================
   DBI Theory — DB손해보험 「손해보험 핵심 이론」 전용 (ct_id 100100 · 15편)
   컨셉: 정독용 이론서 · 저채도 인디고슬레이트 악센트 · 긴 호흡으로 읽는 지면
   루트 래퍼: .dbi_theory

   ── DB손해보험 CSS 3종 체계 (같은 저채도 원칙, 악센트로 역할 구분) ──
     dbi_style.css    웜 캐러멜   → 온보딩 (100102)
     dbi_examnote.css 세이지 틸   → 시험 직전 초압축 합격노트 (100101 · 스캔용)
     dbi_theory.css   인디고 슬레이트 → 핵심 이론 (100100 · 정독용)  ← 이 파일

   ── 실측 기반 설계 (100100 마크업 전수 분석) ──
     h1 223개 : 대부분 '대단원 라벨'(위험의 이해·보험약관)이며 문서 중간에 반복 등장 → 섹션 밴드로 처리
     h2 619개 : '1. 위험이란 무엇인가요?' 번호 챕터
     h3 383개 : 반복 라벨 (예시 계열 53회 · 확인 계열 13회 · 정리/핵심 18회) → 가볍고 잦아서 저부하로
     blockquote 81개 : ⚠️100101과 정반대 의미 — 여기선 '공식'이 아니라 '핵심 요약문' → 요약 콜아웃으로
     table 69개 : 2열 43 / 3열 24 / 4열 2 (정의·비교표 위주)
     KaTeX 분수 : 609491(연금수령한도)·609494 — 아래 수식 섹션 주석 참고
   ============================================================ */

/* --- 루트 래퍼 + 팔레트 (읽기 지면) --- */
.dbi_theory { --paper: #F5F5F2; --card: #FCFCFB; --ink: #2B3038; --ink-soft: #59626E; --ink-mute: #8A919C; --accent: #4A6382; --accent-deep: #354A63; --accent-soft: #C7D4E2; --accent-tint: #EDF1F6; --warn: #A9603F; --warn-soft: #E5C7B6; --warn-tint: #FAF0EA; --ok: #4B7355; --ok-tint: #EDF4EE; --marker: #FBEECB; --border: #E3E3DE; --line: #ECECE7; --shadow: rgba(58, 66, 80, 0.07); background-color: var(--paper); color: var(--ink); font-family: 'Pretendard', -apple-system, sans-serif; font-size: 18px; line-height: 1.88; letter-spacing: -0.003em; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; max-width: 780px; margin: 0 auto; padding: 48px 40px; box-sizing: border-box; min-width: 0; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 40px var(--shadow); }
.dbi_theory > *:first-child { margin-top: 0; }
.dbi_theory > *:last-child { margin-bottom: 0; }

/* --- 타이포그래피 --- */
.dbi_theory h1, .dbi_theory h2, .dbi_theory h3, .dbi_theory h4 { color: var(--ink); font-weight: 700; margin-top: 0; }

/* h1 = 대단원 밴드. 문서 중간에 반복 등장하므로 '새 단원 시작' 신호로 크게 끊어줌 */
/* (첫 h1은 도입 질문 "손해보험은 왜 필요한가요?" — 같은 밴드로 열어도 자연스러움) */
.dbi_theory h1 { font-size: 25px; line-height: 1.45; color: var(--accent-deep); text-align: center; margin: 60px 0 30px; padding: 22px 20px; background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: 14px; }
.dbi_theory h1:first-child { margin-top: 0; }

/* h2 = 번호 챕터 */
.dbi_theory h2 { font-size: 21px; line-height: 1.45; margin: 42px 0 16px; padding: 2px 0 10px 14px; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--line); }

/* h3 = 반복 라벨(예시예요·확인할 내용이에요·핵심 포인트). 383개로 잦아 시각부하를 낮게 */
.dbi_theory h3 { font-size: 16px; font-weight: 700; color: var(--accent); margin: 24px 0 8px; letter-spacing: 0.2px; }
.dbi_theory h4 { font-size: 17px; color: var(--ink-soft); margin: 20px 0 8px; }
.dbi_theory p { margin: 0 0 16px; color: var(--ink-soft); }
.dbi_theory strong { color: var(--ink); font-weight: 700; }
.dbi_theory em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.dbi_theory a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --- 강조 인라인 --- */
.dbi_theory .highlight-text { background: linear-gradient(120deg, var(--marker) 0%, var(--marker) 100%) no-repeat; background-size: 100% 0.45em; background-position: 0 88%; font-weight: 700; color: var(--ink); }
.dbi_theory .text-point { color: var(--accent-deep); font-weight: 700; }
.dbi_theory .num-point { color: var(--warn); font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- 소단원 헤더 (chapter-header) --- */
/* 변환기가 title을 <span>·<h2> 어느 쪽으로 뽑아도 flex가 동일 정렬 (100101에서 겪은 어긋남 방지) */
/* 609463처럼 chapter-num 없이 <h2>만 든 형태도 그대로 성립 */
.dbi_theory .chapter-header { display: flex; align-items: baseline; gap: 10px; margin: 42px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dbi_theory .chapter-header .chapter-num { flex: none; min-width: 38px; box-sizing: border-box; text-align: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); letter-spacing: 0.5px; padding: 4px 9px; border-radius: 20px; margin: 0; font-variant-numeric: tabular-nums; }
.dbi_theory .chapter-header .chapter-title { flex: 1; min-width: 0; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.45; margin: 0; padding: 0; border: none; }
.dbi_theory .chapter-header h2, .dbi_theory .chapter-header h3 { flex: 1; min-width: 0; font-size: 21px; margin: 0; padding: 0; border: none; }

/* --- 핵심 요약 (blockquote): 100100 원본에서 blockquote = 핵심 요약문 (81회) --- */
/* ⚠️ 100101에서는 blockquote가 '공식'이었지만 여기선 의미가 다르다 → 인용카드가 아니라 요약 콜아웃 */
.dbi_theory blockquote { background: var(--accent-tint); border-left: 5px solid var(--accent); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 24px 0; color: var(--ink); }
.dbi_theory blockquote p { margin: 0; color: var(--ink); font-size: 17px; font-weight: 500; }
.dbi_theory blockquote p + p { margin-top: 8px; }
.dbi_theory blockquote > *:last-child { margin-bottom: 0; }

/* --- 핵심 정리 박스 (key-message): "핵심 포인트"·"정리해요" 계열 --- */
.dbi_theory .key-message { background: var(--accent-tint); border-left: 5px solid var(--accent); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 26px 0; }
.dbi_theory .key-message::before { content: "핵심"; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff; background: var(--accent); padding: 3px 11px; border-radius: 20px; margin-bottom: 9px; }
.dbi_theory .key-message p { color: var(--ink); font-size: 17px; margin: 0; }
.dbi_theory .key-message p + p { margin-top: 8px; }
.dbi_theory .key-message > *:last-child { margin-bottom: 0; }

/* --- 예시 박스 (example-box): 원본 최다 라벨 — "예시예요"24·"예시로 이해해요"15·"예시"5 등 53회 --- */
.dbi_theory .example-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px 18px; margin: 24px 0; position: relative; }
.dbi_theory .example-box::before { content: "예시"; position: absolute; top: -10px; left: 20px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 2px 11px; border-radius: 20px; }
.dbi_theory .example-box p { color: var(--ink-soft); }
.dbi_theory .example-box > *:last-child { margin-bottom: 0; }

/* --- 주의 박스 (trap-box): "주의할 점이에요"·"금지되는 행동이에요" 계열 --- */
.dbi_theory .trap-box { background: var(--warn-tint); border: 1px solid var(--warn-soft); border-radius: 12px; padding: 20px 22px 18px; margin: 24px 0; position: relative; }
.dbi_theory .trap-box::before { content: "주의"; position: absolute; top: -10px; left: 20px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 2px 11px; border-radius: 20px; }
.dbi_theory .trap-box p { color: var(--ink); }
.dbi_theory .trap-box strong { color: var(--warn); }
.dbi_theory .trap-box > *:last-child { margin-bottom: 0; }

/* --- 참고 팁 박스 (tip-box) --- */
.dbi_theory .tip-box { background: var(--card); border: 2px dashed var(--accent-soft); border-radius: 12px; padding: 20px 22px 18px; margin: 24px 0; position: relative; }
.dbi_theory .tip-box::before { content: "참고"; position: absolute; top: -10px; left: 20px; background: var(--accent-deep); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 2px 11px; border-radius: 20px; }
.dbi_theory .tip-box p { color: var(--ink-soft); }
.dbi_theory .tip-box > *:last-child { margin-bottom: 0; }

/* --- 기본 리스트 --- */
.dbi_theory ul:not(.guide-list):not(.check-list):not(.num-list) { list-style: none; padding-left: 2px; margin: 14px 0 20px; }
.dbi_theory ul:not(.guide-list):not(.check-list):not(.num-list) > li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: 17px; line-height: 1.78; color: var(--ink-soft); }
.dbi_theory ul:not(.guide-list):not(.check-list):not(.num-list) > li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 6px; height: 6px; background: var(--accent-soft); border-radius: 50%; }
.dbi_theory ol:not(.num-list) { padding-left: 20px; margin: 14px 0 20px; }
.dbi_theory ol:not(.num-list) > li { font-size: 17px; line-height: 1.78; margin-bottom: 7px; padding-left: 5px; color: var(--ink-soft); }
.dbi_theory li > ul, .dbi_theory li > ol { margin: 7px 0 0; }
.dbi_theory li strong { color: var(--ink); }

/* --- 강조 리스트 (guide-list): "대표적인 보장이에요" 계열 나열 --- */
.dbi_theory .guide-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.dbi_theory .guide-list li { position: relative; display: block; padding: 10px 16px 10px 32px; margin-bottom: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.dbi_theory .guide-list li::before { content: ''; position: absolute; left: 14px; top: 18px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.dbi_theory .guide-list li strong { color: var(--accent-deep); }
.dbi_theory .guide-list li:has(> strong:first-child) > strong:first-child { display: block; margin-bottom: 3px; color: var(--ink); }

/* --- 체크 리스트 (check-list): "확인할 내용이에요"·"판단할 때 확인해요" 계열 13회 --- */
.dbi_theory .check-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.dbi_theory .check-list li, .dbi_theory .check-item { position: relative; padding: 9px 16px 9px 40px; margin-bottom: 6px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.dbi_theory .check-list li::before, .dbi_theory .check-item::before { content: '✓'; position: absolute; left: 12px; top: 11px; width: 21px; height: 21px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }

/* --- 번호 스텝 리스트 (num-list): "기본 흐름이에요" 같은 절차 --- */
.dbi_theory .num-list { counter-reset: dbt-num; list-style: none; padding: 0; margin: 18px 0 24px; }
.dbi_theory .num-list li, .dbi_theory .num-item { position: relative; padding: 14px 18px 14px 54px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.dbi_theory .num-list li::before, .dbi_theory .num-item::before { counter-increment: dbt-num; content: counter(dbt-num); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* --- 표 (69개 · 2열 정의표가 다수) --- */
/* TyagGW_* = ChatGPT 붙여넣기 원본 래퍼 → 변환 전에도 카드로 보이게 하고 flex-col-reverse(표 뒤집힘) 무력화 */
.dbi_theory .table-wrapper, .dbi_theory .table-container, .dbi_theory .TyagGW_tableContainer, .dbi_theory .TyagGW_tableWrapper { display: block; width: 100%; max-width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dbi_theory .TyagGW_tableContainer, .dbi_theory .TyagGW_tableWrapper, .dbi_theory .w-fit, .dbi_theory .flex, .dbi_theory .flex-col-reverse { flex-direction: unset; }
.dbi_theory table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; margin: 22px 0; background: var(--card); }
.dbi_theory .table-wrapper table, .dbi_theory .table-container table, .dbi_theory .TyagGW_tableContainer table, .dbi_theory .TyagGW_tableWrapper table { margin: 0; border: none; }
.dbi_theory th { background: var(--accent-tint); color: var(--accent-deep); font-weight: 700; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--accent-soft); white-space: nowrap; }
.dbi_theory td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); line-height: 1.7; }
.dbi_theory tbody tr:nth-child(even) td { background: rgba(74, 99, 130, 0.035); }
.dbi_theory tbody tr:last-child td { border-bottom: none; }
.dbi_theory td:first-child { font-weight: 700; color: var(--ink); }
.dbi_theory td strong { color: var(--accent-deep); }

/* --- KaTeX 수식 (609491 연금수령한도 = 분수, 609494) --- */
/* KaTeX 본 CSS는 로드하지 않는다 (23KB+폰트를 전 contents 페이지가 떠안게 되므로).
   대신 브라우저 네이티브 MathML로 렌더한다:
     .katex-html  = KaTeX가 자체 폰트/vlist로 그리는 시각 레이어 → 본 CSS 없으면 분수 분자·분모가 붙어버림 → 숨김
     .katex-mathml= 원래 스크린리더용 <math> → 크롬109+/사파리/파폭이 네이티브 렌더 → 이걸 보여준다
   MathML 미지원 브라우저에서는 텍스트로 흐르며, LaTeX 원문(annotation)은 아래에서 별도 차단한다. */
.dbi_theory .katex-html { display: none; }
.dbi_theory .katex-mathml { display: inline; }
.dbi_theory .katex-display .katex-mathml { display: block; text-align: center; margin: 18px 0; }
.dbi_theory .katex math { font-size: 1.05em; }
.dbi_theory annotation { display: none; }

/* --- ChatGPT 붙여넣기 잔여물 정리 --- */
.dbi_theory .PDq2pG_selectionAnchor, .dbi_theory span[aria-hidden="true"]:empty { display: none; }

/* --- 구분선 (원본 hr 618개) --- */
.dbi_theory hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
.dbi_theory hr + h1 { margin-top: 34px; }
.dbi_theory hr + h2 { margin-top: 22px; }
.dbi_theory .divider { border: none; text-align: center; margin: 36px 0; color: var(--accent-soft); }
.dbi_theory .divider::after { content: "· · ·"; letter-spacing: 6px; font-size: 20px; }

/* --- 이미지 --- */
.dbi_theory img { max-width: 100%; height: auto; border-radius: 10px; margin: 14px 0; }
.dbi_theory .image-caption { text-align: center; font-size: 14px; color: var(--ink-mute); margin-top: 5px; }

/* --- 반응형 --- */
@media (max-width: 768px) {
  /* 부모 #theory .theory 의 좌우 20px 패딩 때문에 지면색을 쓰면 흰 페이지 위에 색블록 '경계'가 생긴다.
     부모 .text 에 overflow:hidden 이 있어 음수마진 full-bleed 로 색을 흘리는 우회도 잘려서 불가.
     → 모바일은 지면색을 걷어내고 본문만 흐르게 한다 (100101에서 확인된 결론과 동일).
     눈 편안함은 부드러운 잉크(#2B3038)·행간 1.88·저채도 악센트가 담당한다. */
  .dbi_theory { font-size: 17px; background: transparent; padding: 24px 0; margin: 0; width: 100%; max-width: 100%; border: none; border-radius: 0; box-shadow: none; }
  .dbi_theory h1 { font-size: 21px; padding: 18px 16px; margin: 44px 0 24px; }
  .dbi_theory h2 { font-size: 19px; margin-top: 34px; }
  .dbi_theory h3 { font-size: 15px; }
  .dbi_theory .chapter-header .chapter-title, .dbi_theory .chapter-header h2 { font-size: 19px; }
  .dbi_theory p, .dbi_theory li, .dbi_theory .guide-list li, .dbi_theory .check-list li, .dbi_theory .num-list li, .dbi_theory blockquote p, .dbi_theory .key-message p { font-size: 16px; }
  .dbi_theory table { font-size: 15px; }
  .dbi_theory th, .dbi_theory td { padding: 10px 12px; }
}