@charset "utf-8";

/* 전체 레이아웃 */
.HPinfo { font-family: 'Pretendard', sans-serif; line-height: 1.7; color: #333; background: #ffffff; background: #f8f9fa; padding: 24px; border-radius: 16px; font-size: 20px; }

/* 대제목 스타일 */
.HPinfo .main-title { font-size: 20px; font-weight: 700; background: #fff; padding: 24px; border-radius: 12px; margin-bottom: 24px; border-left: 4px solid #2097FF; }
.HPinfo .keyword { background: #e6f3ff; color: #2097FF; padding: 6px 12px; border-radius: 100px; font-size: 14px; font-weight: 600; width: fit-content; display: inline-block; }

/* 섹션 스타일 */
.HPinfo .section { font-size: 16px; font-weight: 600; background: #f8f9fa; margin: 10px 0 20px; border-radius: 8px; }
.HPinfo .section-title { font-size: 18px; font-weight: 600; background: #fff; padding: 16px 20px; margin: 10px 0 20px; border-radius: 8px; border-left: 3px solid #2097FF; }
.HPinfo .sub-section { background: #fff; padding: 24px; border-radius: 12px; margin: 24px 0; border: 1px solid #e5e7eb; }
.HPinfo .sub-section-title { font-size: 10px; font-weight: 600; background: #fff; padding: 16px 20px; margin: 10px 0 20px; border-radius: 8px; }
.HPinfo .content-text { font-size: 16px; font-weight: 400; background: #fff; padding: 16px 20px; margin: 10px 0 20px; border-radius: 8px; }
.HPinfo .bull-item { font-size: 16px; margin-bottom: 16px; padding-left: 8px; }
.HPinfo .table-basic { width: 100%; border-collapse: collapse; margin: 24px 0; }
.HPinfo .table-cell { padding: 16px; border: 1px solid #e5e7eb; }
.HPinfo .table-header th { background: #f8f9fa; font-weight: 600; text-align: left; padding: 16px; border: 1px solid #e5e7eb; }
.HPinfo .highlight-text { background:#ffece6; border-radius: 4px; width: fit-content; margin-bottom: 16px; }
.HPinfo .fade-in { animation: fadeIn 0.5s ease-in; padding: 16px; background: #f8f9fa; border-radius: 8px; margin-top: 24px; }

/* ── Images ── */
.HPinfo img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
.HPinfo img.full-width { width: 100%; border-radius: 8px; }
.HPinfo .image-caption { text-align: center; font-size: 0.85em; color: #888; margin-top: 4px; }

/* ── Table Container (scroll wrapper) ── */
.HPinfo .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
.HPinfo .table-container table { width: 100%; min-width: 500px; }

/* ── Keyframes ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Responsive - Tablet ── */
@media screen and (max-width: 768px) {
  .HPinfo { padding: 0px; margin: 0px; }
  .HPinfo .title-main { font-size: 20px; padding: 20px; }
  .HPinfo .case-study, .HPinfo .self-test { padding: 20px; }
}

/* ── Responsive - Mobile ── */
@media screen and (max-width: 480px) {
  #wrap #theory .theory .lt-item .text .HPinfo span { line-height: 1.6 !important; font-size: 16px !important; }
  .HPinfo .section { margin: 20px 0; padding: 12px 4px; background: #f8f9fa; border-radius: 12px; }
  .HPinfo .section-text { background: #fff; padding: 20px 4px; border-radius: 12px; position: relative; margin-top: 20px; }
  .HPinfo .sub-section { background: #fff; padding: 30px 4px; border-radius: 12px; margin: 24px 0; border: 1px solid #e5e7eb; }
  .HPinfo .section-text > div:not(.subsection-title) { position: relative; padding-left: 20px; padding-right: 10px; margin-bottom: 8px; }
}