@charset "utf-8";

/* =============================================
   ANcontents — 콘텐츠 UI 디자인 시스템
   컬러: Primary #2097FF / Text #1a2133
   ============================================= */

/* ── 베이스 ── */
.ANcontents { font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.8; color: #1a2133; background: #fff; word-break: keep-all; -webkit-font-smoothing: antialiased; }

/* ════════════════════════════
   챕터 타이틀
════════════════════════════ */
.ANcontents .chapter-title { font-size: 24px; font-weight: 800; color: #1a2133; margin: 0 0 24px; padding: 20px 20px 20px 24px; background: linear-gradient(135deg, #e8f3ff 0%, #f0f7ff 100%); border-radius: 14px; border-left: 5px solid #2097FF; letter-spacing: -0.4px; line-height: 1.4; }

/* ════════════════════════════
   섹션
════════════════════════════ */
.ANcontents .section { margin: 20px 0; padding: 18px 16px; background: #f7f9fc; border-radius: 16px; border: 1px solid #e8edf5; overflow: visible; }
.ANcontents .section-title { font-size: 18px; font-weight: 700; color: #2097FF; margin: 0 0 14px; padding: 10px 14px; background: #fff; border-radius: 10px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.3px; box-shadow: 0 1px 4px rgba(32, 151, 255, 0.1); }
.ANcontents .section-title::before { content: ''; display: inline-block; width: 6px; height: 18px; background: #2097FF; border-radius: 3px; flex-shrink: 0; }

/* 섹션 본문 */
.ANcontents .section-text { background: #fff; padding: 18px 20px; border-radius: 10px; font-size: 15.5px; margin-top: 12px; border: 1px solid #e8edf5; overflow: visible; }
.ANcontents .section-text > div:not(.subsection-title) { position: relative; padding-left: 16px; margin-bottom: 9px; line-height: 1.8; color: #2d3748; }
.ANcontents .section-text > div:not(.subsection-title)::before { content: '•'; position: absolute; left: 0; top: 0; color: #2097FF; font-weight: 700; }

/* ════════════════════════════
   하위 섹션
════════════════════════════ */
.ANcontents .subsection { background: #fff; padding: 18px 20px; border-radius: 12px; border: 1px solid #dbeafe; margin: 12px 0; position: relative; overflow: visible; }
.ANcontents .subsection-title { font-size: 16px; font-weight: 700; color: #1a2133; margin: 0 0 12px; padding: 0 0 10px 14px; border-left: 3px solid #2097FF; line-height: 1.5; }

/* ════════════════════════════
   강조 / 키포인트 / 팁
════════════════════════════ */

/* 인라인 하이라이트 */
.ANcontents .important { background: linear-gradient(120deg, transparent 0%, #fff3cd 0%); background-size: 100% 0.45em; background-repeat: no-repeat; background-position: 0 90%; padding: 0 2px; color: #1a2133; font-weight: 700; }

/* 키포인트 박스 */
.ANcontents .key-point { background: #eff6ff; border-left: 4px solid #2097FF; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 14px 0; font-size: 15px; line-height: 1.75; color: #1e3a5f; }

/* 경고/팁 박스 */
.ANcontents .tip-box { background: #fffbeb; border: 1.5px dashed #f59e0b; border-radius: 12px; padding: 16px 20px; margin: 14px 0; font-size: 15px; line-height: 1.75; color: #78350f; }

/* 성공/확인 박스 */
.ANcontents .success-box { background: #f0fdf4; border-left: 4px solid #22c55e; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 14px 0; font-size: 15px; color: #14532d; }

/* 위험/주의 박스 */
.ANcontents .danger-box { background: #fff1f2; border-left: 4px solid #f43f5e; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 14px 0; font-size: 15px; color: #881337; }

/* ════════════════════════════
   표 (info-table)
════════════════════════════ */
.ANcontents .info-table { width: 100%; margin: 16px 0; border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.ANcontents .info-table table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; border: none; }
.ANcontents .info-table thead, .ANcontents .info-table tbody { display: table; width: 100%; min-width: 460px; }
.ANcontents .info-table th { background: #2097FF; color: #fff; padding: 13px 16px; font-size: 14.5px; font-weight: 700; text-align: left; white-space: nowrap; border-bottom: none; letter-spacing: -0.2px; }
.ANcontents .info-table th:first-child { border-radius: 12px 0 0 0; }
.ANcontents .info-table th:last-child { border-radius: 0 12px 0 0; }
.ANcontents .info-table td { padding: 11px 16px; font-size: 14.5px; border-bottom: 1px solid #edf0f6; background: #fff; line-height: 1.7; vertical-align: top; word-break: keep-all; color: #2d3748; }
.ANcontents .info-table tr:nth-child(even) td { background: #f9fbff; }
.ANcontents .info-table tr:last-child td { border-bottom: none; }
.ANcontents .info-table tr:last-child td:first-child { border-radius: 0 0 0 12px; }
.ANcontents .info-table tr:last-child td:last-child { border-radius: 0 0 12px 0; }
.ANcontents .info-table tr:hover td { background: #eff6ff; }

/* 표 컨테이너 (table-container 클래스) */
.ANcontents .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.ANcontents .table-container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; border: none; }
.ANcontents .table-container thead, .ANcontents .table-container tbody { display: table; width: 100%; min-width: 460px; }
.ANcontents .table-container th { background: #2097FF; color: #fff; padding: 13px 16px; font-size: 14.5px; font-weight: 700; text-align: left; white-space: nowrap; }
.ANcontents .table-container td { padding: 11px 16px; font-size: 14.5px; border-bottom: 1px solid #edf0f6; background: #fff; word-break: keep-all; line-height: 1.7; color: #2d3748; }
.ANcontents .table-container tr:nth-child(even) td { background: #f9fbff; }
.ANcontents .table-container tr:last-child td { border-bottom: none; }
.ANcontents .table-container tr:hover td { background: #eff6ff; }

/* ════════════════════════════
   목록 스타일
════════════════════════════ */
.ANcontents .list { list-style: none; padding: 0; margin: 14px 0; }
.ANcontents .list li { position: relative; padding: 10px 14px 10px 34px; margin-bottom: 8px; font-size: 15px; line-height: 1.75; color: #2d3748; background: #f7f9fc; border-radius: 10px; }
.ANcontents .list li::before { content: '•'; position: absolute; left: 14px; top: 10px; color: #2097FF; font-weight: 900; font-size: 17px; }

.ANcontents .check-list { list-style: none; padding: 0; margin: 14px 0; }
.ANcontents .check-list li { position: relative; padding: 10px 14px 10px 36px; margin-bottom: 8px; font-size: 15px; line-height: 1.75; color: #2d3748; }
.ANcontents .check-list li::before { content: '✓'; position: absolute; left: 12px; top: 10px; color: #22c55e; font-weight: 900; font-size: 15px; }

/* ════════════════════════════
   이미지
════════════════════════════ */
.ANcontents img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; display: block; }
.ANcontents img.full-width { width: 100%; border-radius: 12px; }
.ANcontents .image-caption { text-align: center; font-size: 13px; color: #8a95a3; margin-top: 6px; line-height: 1.5; }

/* ════════════════════════════
   아이콘 (SVG 인라인)
════════════════════════════ */
.ANcontents .icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-size: contain; margin-right: 2px; }
.star { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='%23f59e0b' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1 L12 7 L18 7 L13 11 L15 17 L10 14 L5 17 L7 11 L2 7 L8 7 Z'%3E%3C/path%3E%3C/svg%3E"); }
.check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E"); }
.warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }

/* ════════════════════════════
   구분선
════════════════════════════ */
.ANcontents .divider { border: none; border-top: 1.5px dashed #dde3ee; margin: 24px 0; }

/* ════════════════════════════
   모바일 (481px ~ 767px)
════════════════════════════ */
@media screen and (max-width: 767px) and (min-width: 481px) {
  .ANcontents .chapter-title { font-size: 21px; padding: 16px 16px 16px 20px; }
  .ANcontents .section-title { font-size: 17px; }
  .ANcontents .section-text { font-size: 15px; }
  .ANcontents .subsection-title { font-size: 15.5px; }
  .ANcontents .info-table th, .ANcontents .info-table td { padding: 11px 14px; font-size: 14px; }
  .ANcontents .table-container th, .ANcontents .table-container td { padding: 11px 14px; font-size: 14px; }
}

/* ════════════════════════════
   모바일 (480px 이하)
════════════════════════════ */
@media screen and (max-width: 480px) {
  #wrap #theory .theory .lt-item .text .ANcontent span { line-height: 1.65 !important; font-size: 15px !important; }
  .ANcontents { font-size: 15px; }
  .ANcontents .chapter-title { font-size: 19px; padding: 14px 14px 14px 18px; margin-bottom: 18px; border-radius: 12px; }
  .ANcontents .section { margin: 16px 0; padding: 12px 10px; border-radius: 12px; }
  .ANcontents .section-title { font-size: 16px; padding: 9px 12px; border-radius: 8px; }
  .ANcontents .section-text { padding: 14px 12px; font-size: 14.5px; border-radius: 8px; }
  .ANcontents .section-text > div:not(.subsection-title) { padding-left: 14px; margin-bottom: 8px; }
  .ANcontents .subsection { padding: 14px 12px; border-radius: 10px; }
  .ANcontents .subsection-title { font-size: 14.5px; padding-left: 12px; }
  .ANcontents .key-point { padding: 12px 14px; font-size: 14px; }
  .ANcontents .tip-box { padding: 12px 14px; font-size: 14px; }
  .ANcontents .success-box, .ANcontents .danger-box { padding: 12px 14px; font-size: 14px; }
  .ANcontents .list li { font-size: 14px; padding: 8px 10px 8px 30px; }
  .ANcontents .check-list li { font-size: 14px; padding: 8px 10px 8px 32px; }
  .ANcontents .info-table th, .ANcontents .info-table td { padding: 9px 12px; font-size: 13.5px; }
  .ANcontents .table-container th, .ANcontents .table-container td { padding: 9px 12px; font-size: 13.5px; }
  .ANcontents img { border-radius: 8px; }
}