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

/* ============================================================
   DBI Exam Note — DB손해보험 「시험 직전 초압축 합격노트」 전용 (ct_id 100101)
   컨셉: 저자극 학습지면 · 세이지 틸 악센트 · 훑어서 찾는 압축 노트
   루트 래퍼: .dbi_examnote
   설계 원칙
     1) 눈 편안함 — 순백(#FFF)·순검정(#000) 배제. 저채도 팔레트로 눈부심/대비 피로 최소화
     2) 가독성 — 본문 18px / 행간 1.85 / 1줄 길이 760px / keep-all 로 어절 안 깨짐
     3) 스캔성 — 번호 소단원·핵심/함정/암기 박스가 색으로 구분되어 눈으로 바로 찾힘
     4) 원본 방어 — AI 변환 전 ChatGPT 붙여넣기 원본(h2/p/ul/table/blockquote/hr)만으로도 정상
   ============================================================ */

/* --- 루트 래퍼 + 팔레트 (읽기 지면) --- */
.dbi_examnote { --paper: #F5F4F1; --card: #FCFCFA; --ink: #2C3238; --ink-soft: #5C6570; --ink-mute: #8A929C; --accent: #3D7068; --accent-deep: #2C544E; --accent-soft: #C9DED9; --accent-tint: #EBF3F1; --warn: #B5604F; --warn-soft: #EBC7C0; --warn-tint: #FAEEEB; --num: #A8761F; --num-tint: #FBF2DE; --marker: #FBEFC9; --border: #E4E2DC; --line: #EDEBE5; --shadow: rgba(60, 70, 66, 0.07); background-color: var(--paper); color: var(--ink); font-family: 'Pretendard', -apple-system, sans-serif; font-size: 18px; line-height: 1.85; letter-spacing: -0.003em; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; max-width: 760px; 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_examnote > *:first-child { margin-top: 0; }
.dbi_examnote > *:last-child { margin-bottom: 0; }

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

/* h1 = 대단원 (예: "보험의 기본개념") */
.dbi_examnote h1 { font-size: 26px; line-height: 1.4; color: var(--accent-deep); text-align: center; margin: 52px 0 28px; padding: 20px 18px; background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: 14px; }
.dbi_examnote h1:first-child { margin-top: 0; }

/* h2 = 번호 소단원 (예: "3. 수지상등의 원칙") — 왼쪽 악센트 바로 눈에 걸리게 */
.dbi_examnote h2 { font-size: 21px; line-height: 1.45; margin: 40px 0 16px; padding: 2px 0 10px 14px; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--line); }

/* h3 / h4 = 세부 항목 */
.dbi_examnote h3 { font-size: 18.5px; margin: 26px 0 10px; color: var(--accent-deep); }
.dbi_examnote h4 { font-size: 17px; margin: 20px 0 8px; color: var(--ink-soft); }
.dbi_examnote p { margin: 0 0 16px; color: var(--ink-soft); }
.dbi_examnote strong { color: var(--ink); font-weight: 700; }
.dbi_examnote em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.dbi_examnote a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --- 강조 인라인 (변환 시 사용) --- */
/* highlight-text: 형광펜 — 시험에 그대로 나오는 문구 */
.dbi_examnote .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); }
/* text-point: 핵심 용어 */
.dbi_examnote .text-point { color: var(--accent-deep); font-weight: 700; }
/* num-point: 암기해야 하는 숫자·기간·한도 */
.dbi_examnote .num-point { color: var(--num); font-weight: 800; font-variant-numeric: tabular-nums; background: var(--num-tint); padding: 1px 7px; border-radius: 5px; }

/* --- 소단원 헤더 (chapter-header = chapter-num + chapter-title) --- */
/* 변환기가 title을 <span>(인라인)으로도, <h2>(블록)로도 뽑는다 → flex로 두 경우를 동일하게 정렬 */
/* align-items:baseline = 번호칩 글자와 제목 글자가 같은 기준선에 앉음 (제목이 2줄로 넘어가도 칩은 첫 줄에 고정) */
.dbi_examnote .chapter-header { display: flex; align-items: baseline; gap: 10px; margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
/* min-width = "1."·"39." 칩 너비를 통일 → 아래로 훑을 때 제목 시작 x좌표가 한 열로 맞음 */
.dbi_examnote .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_examnote .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_examnote .chapter-header h2, .dbi_examnote .chapter-header h3 { margin: 0; padding: 0; border: none; }

/* --- 핵심 정리 박스 (key-message): 이것만은 외운다 --- */
.dbi_examnote .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_examnote .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_examnote .key-message p { color: var(--ink); font-size: 17px; margin: 0; }
.dbi_examnote .key-message p + p { margin-top: 8px; }
.dbi_examnote .key-message > *:last-child { margin-bottom: 0; }

/* --- 함정 박스 (trap-box): 헷갈리는 것 · 자주 틀리는 것 --- */
.dbi_examnote .trap-box { background: var(--warn-tint); border: 1px solid var(--warn-soft); border-radius: 12px; padding: 20px 22px 18px; margin: 26px 0; position: relative; }
.dbi_examnote .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_examnote .trap-box p { color: var(--ink); font-size: 17px; }
.dbi_examnote .trap-box strong { color: var(--warn); }
.dbi_examnote .trap-box > *:last-child { margin-bottom: 0; }

/* --- 암기 팁 박스 (tip-box): 두문자·연상법 --- */
.dbi_examnote .tip-box { background: var(--card); border: 2px dashed var(--accent-soft); border-radius: 12px; padding: 20px 22px 18px; margin: 26px 0; position: relative; }
.dbi_examnote .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_examnote .tip-box p { color: var(--ink-soft); }
.dbi_examnote .tip-box > *:last-child { margin-bottom: 0; }

/* --- 공식·법조문 인용 (blockquote): 원본에 그대로 있음 (49회) --- */
.dbi_examnote blockquote { margin: 20px 0; padding: 16px 20px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent-soft); border-radius: 0 10px 10px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.dbi_examnote blockquote p { margin: 0; color: var(--ink); font-size: 17px; }
.dbi_examnote blockquote p + p { margin-top: 8px; }
.dbi_examnote blockquote > *:last-child { margin-bottom: 0; }

/* --- 기본 리스트 (원본 ul/ol 그대로 · 특수 리스트 제외) --- */
.dbi_examnote ul:not(.guide-list):not(.check-list):not(.num-list) { list-style: none; padding-left: 2px; margin: 14px 0 20px; }
.dbi_examnote 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.75; color: var(--ink-soft); }
.dbi_examnote 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_examnote ol:not(.num-list) { padding-left: 20px; margin: 14px 0 20px; }
.dbi_examnote ol:not(.num-list) > li { font-size: 17px; line-height: 1.75; margin-bottom: 7px; padding-left: 5px; color: var(--ink-soft); }
.dbi_examnote li > ul, .dbi_examnote li > ol { margin: 7px 0 0; }
.dbi_examnote li strong { color: var(--ink); }

/* --- 강조 리스트 (guide-list): 원리·요건 나열 --- */
.dbi_examnote .guide-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.dbi_examnote .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_examnote .guide-list li::before { content: ''; position: absolute; left: 14px; top: 18px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.dbi_examnote .guide-list li strong { color: var(--accent-deep); }
.dbi_examnote .guide-list li:has(> strong:first-child) > strong:first-child { display: block; margin-bottom: 3px; color: var(--ink); }

/* --- 체크 리스트 (check-list): 시험장 체크·요건 확인 --- */
.dbi_examnote .check-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.dbi_examnote .check-list li, .dbi_examnote .check-item { position: relative; padding: 9px 16px 9px 40px; margin-bottom: 6px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.dbi_examnote .check-list li::before, .dbi_examnote .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): 푸는 순서 (609498 「시험장에서 푸는 순서」) --- */
.dbi_examnote .num-list { counter-reset: dbe-num; list-style: none; padding: 0; margin: 18px 0 24px; }
.dbi_examnote .num-list li, .dbi_examnote .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_examnote .num-list li::before, .dbi_examnote .num-item::before { counter-increment: dbe-num; content: counter(dbe-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; }

/* --- 표 (609499 「최종 숫자 암기표」 등) --- */
/* table-wrapper/table-container = 변환 후 · TyagGW_* = ChatGPT 원본 래퍼 (원본 그대로도 카드로 보이게) */
.dbi_examnote .table-wrapper, .dbi_examnote .table-container, .dbi_examnote .TyagGW_tableContainer, .dbi_examnote .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; }
/* ChatGPT 원본에 박혀오는 Tailwind 잔여 클래스 무력화 (flex-col-reverse = 표 뒤집힘 방지) */
.dbi_examnote .TyagGW_tableContainer, .dbi_examnote .TyagGW_tableWrapper, .dbi_examnote .w-fit, .dbi_examnote .flex, .dbi_examnote .flex-col-reverse { flex-direction: unset; }
.dbi_examnote table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; margin: 22px 0; background: var(--card); }
.dbi_examnote .table-wrapper table, .dbi_examnote .table-container table, .dbi_examnote .TyagGW_tableContainer table, .dbi_examnote .TyagGW_tableWrapper table { margin: 0; border: none; }
.dbi_examnote 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_examnote td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); line-height: 1.7; }
.dbi_examnote tbody tr:nth-child(even) td { background: rgba(61, 112, 104, 0.035); }
.dbi_examnote tbody tr:last-child td { border-bottom: none; }
.dbi_examnote td:first-child { font-weight: 700; color: var(--ink); }
.dbi_examnote td strong { color: var(--accent-deep); }

/* --- KaTeX 수식 방어 (609500·609501) --- */
/* KaTeX 본 CSS 미로드 상태 — mathml을 숨기지 않으면 수식이 두 번 겹쳐 출력됨 */
.dbi_examnote .katex-mathml { display: none; }
.dbi_examnote .katex { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbi_examnote .katex-display { display: block; text-align: center; margin: 18px 0; }
.dbi_examnote .katex .strut, .dbi_examnote .katex .pstrut { display: none; }
.dbi_examnote .katex .mspace { display: inline-block; width: 0.28em; }
.dbi_examnote .katex .mbin, .dbi_examnote .katex .mrel { padding: 0 0.18em; }

/* --- ChatGPT 붙여넣기 잔여물 정리 --- */
/* 제목 안 선택앵커 span — 숨기지 않으면 헤딩에 빈칸이 생김 */
.dbi_examnote .PDq2pG_selectionAnchor, .dbi_examnote span[aria-hidden="true"]:empty { display: none; }

/* --- 구분선 (원본 hr 452개 · 매 소단원마다 들어옴) --- */
/* h2가 이미 여백을 갖고 있어, hr 뒤 h2는 위 여백을 줄여 이중 여백 방지 */
.dbi_examnote hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
.dbi_examnote hr + h1, .dbi_examnote hr + h2 { margin-top: 22px; }
.dbi_examnote .divider { border: none; text-align: center; margin: 36px 0; color: var(--accent-soft); }
.dbi_examnote .divider::after { content: "· · ·"; letter-spacing: 6px; font-size: 20px; }

/* --- 이미지 --- */
.dbi_examnote img { max-width: 100%; height: auto; border-radius: 10px; margin: 14px 0; }
.dbi_examnote .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로 색을 양옆까지 흘리는 방법은 잘려서 불가.
     → 모바일은 지면색을 걷어내고(transparent) 페이지 배경 위에 본문만 흐르게 한다. 경계 원천 제거.
     눈 편안함은 부드러운 잉크색(#2C3238)·행간 1.85·저채도 악센트가 그대로 담당한다. */
  .dbi_examnote { font-size: 17px; background: transparent; padding: 24px 0; margin: 0; width: 100%; max-width: 100%; border: none; border-radius: 0; box-shadow: none; }
  .dbi_examnote h1 { font-size: 22px; padding: 16px 14px; }
  .dbi_examnote h2 { font-size: 19px; margin-top: 32px; }
  .dbi_examnote h3 { font-size: 17.5px; }
  .dbi_examnote .chapter-header .chapter-title { font-size: 19px; }
  .dbi_examnote p, .dbi_examnote li, .dbi_examnote .guide-list li, .dbi_examnote .check-list li, .dbi_examnote .num-list li, .dbi_examnote blockquote p, .dbi_examnote .key-message p, .dbi_examnote .trap-box p { font-size: 16px; }
  .dbi_examnote table { font-size: 15px; }
  .dbi_examnote th, .dbi_examnote td { padding: 10px 12px; }
}