/* --- 기본 스타일 --- */
.PMcontent { font-family: Pretendard, -apple-system, sans-serif; color: var(--text-dark-color); font-size: var(--font-size-md); line-height: 1.7; padding: var(--space-lg); /* Color */ --primary-color: #0d6efd; --primary-light-color: #e7f1ff; --highlight-bg-color: #fff3cd; --highlight-text-color: #664d03; --text-dark-color: #212529; --text-medium-color: #495057; --text-light-color: #adb5bd; --border-color: #dee2e6; --bg-light-color: #f8f9fa; --bg-white-color: #ffffff; /* Spacing */ --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Font Size */ --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; /* Border Radius & Shadow */ --border-radius-md: 8px; --border-radius-lg: 12px; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); }

/* --- 메인 타이틀 & 키워드 --- */
.PMcontent .main-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-md); line-height: 1.4; }
.PMcontent .keyword-box { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.PMcontent .keyword { background-color: var(--primary-light-color); color: var(--primary-color); padding: 6px 12px; border-radius: 20px; font-size: var(--font-size-sm); font-weight: 600; }

/* --- 섹션 카드 디자인 (중첩 구조 해결) --- */
.PMcontent .section { /* 카드 기본 디자인 */ background-color: var(--bg-white-color); /* 흰색 배경 */ border-radius: var(--border-radius-lg); /* 둥근 모서리 (12px) */ box-shadow: var(--shadow-sm); /* 은은한 그림자 효과 */ margin-bottom: var(--space-lg); /* 카드 간의 하단 간격 (24px) */ overflow: hidden; /* 내부 요소가 모서리를 벗어나지 않도록 */ border: 1px solid var(--border-color); /* 얇은 테두리로 경계선 명확화 */ }

/* 카드 내부 제목 스타일 */
.PMcontent .section .section-title { padding: var(--space-md) var(--space-lg); /* 안쪽 여백 (16px 24px) */ border-bottom: 1px solid var(--border-color); /* 제목과 내용 구분선 */ font-size: var(--font-size-md); /* 폰트 크기 (18px) */ font-weight: 600; /* 폰트 굵기 */ margin: 0; /* 기본 마진 제거 */ }

/* 카드 내부 콘텐츠 스타일 */
.PMcontent .section .sub-section { padding: var(--space-lg); /* 안쪽 여백 (24px) */ margin: 0; /* 기본 마진 제거 */ }

/* --- 학습 목표 (object) --- */
.PMcontent .object { background-color: var(--primary-light-color); padding: var(--space-lg); border-radius: var(--border-radius-lg); margin-bottom: var(--space-xl); border: 1px solid var(--primary-color); }
.PMcontent .object .object-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-dark-color); margin: 0 0 10px 0; padding: 0; }
.PMcontent .object .object-item:last-child { margin-bottom: 0; }
.PMcontent .object .object-item::before { content: ''; display: inline-block; width: 20px; height: 20px; background-color: var(--primary-color); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center; }

/* ✅ [수정됨] .sub-section 스타일 통합 */
.PMcontent .sub-section { padding: var(--space-lg); margin: 0; color: var(--text-medium-color); }

/* ✅ [추가됨] STAR 기법을 위한 특별 스타일 */
/* .star-method 클래스가 있는 .sub-section에만 적용 */
.PMcontent .sub-section.star-method { background-color: var(--bg-light-color); border-left: 4px solid var(--primary-color); border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); }
.PMcontent .sub-section .object-item { align-items: flex-start; gap: var(--space-sm); margin: 0 0 var(--space-md) 0; padding: 0; }
.PMcontent .sub-section .object-item:last-child { margin-bottom: 0; }

/* --- 텍스트 하이라이트 --- */
/* ✅ [수정됨] .highlight-text 규칙 통합 */
.PMcontent .highlight-text { background-color: var(--highlight-bg-color); color: var(--highlight-text-color); border-radius: 4px; padding: 2px 6px; font-weight: 600; }

/* ✅ [수정됨] STAR 기법의 라벨 스타일 */
.PMcontent .sub-section.star-method > .highlight-text { display: inline-block; background-color: var(--primary-light-color); color: var(--primary-color); padding: 4px 10px; margin-right: var(--space-sm); border-radius: 4px; font-weight: 700; line-height: 1.5; }

/* --- 테이블 스타일 --- */
/* 테이블 컨테이너 (반응형 스크롤) */
.PMcontent .table-basic { margin: var(--space-xl) 0; /* 위아래로 충분한 간격 */ overflow-x: auto; /* 화면이 좁아지면 가로 스크롤 생성 */ border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); }
.PMcontent .table-basic table { width: 100%; /* 컨테이너 너비에 맞춤 */ min-width: 600px; /* 내용이 너무 좁아지는 것을 방지 */ border-collapse: collapse; /* 셀 사이의 이중선 제거 */ font-size: var(--font-size-sm); /* 테이블 내 폰트 크기 조정 */ }

/* 테이블 헤더(th) 및 셀(td) 공통 스타일 */
.PMcontent .table-basic th, .PMcontent .table-basic td { padding: var(--space-md); /* 셀 안쪽 여백 */ text-align: left; /* 텍스트 왼쪽 정렬 */ vertical-align: top; /* 내용이 길어질 경우 위쪽으로 정렬 */ border-bottom: 1px solid var(--border-color); /* 행 구분선 */ }

/* 테이블 헤더 스타일 */
.PMcontent .table-basic th { background-color: var(--bg-light-color); /* 연한 배경색 */ font-weight: 600; /* 굵은 글씨 */ color: var(--text-dark-color); }

/* 짝수 행에 배경색 적용 (가독성 향상) */
.PMcontent .table-basic tr:nth-child(even) { background-color: var(--bg-light-color); }

/* 마지막 행의 하단 테두리 제거 */
.PMcontent .table-basic tr:last-child th, .PMcontent .table-basic tr:last-child td { border-bottom: none; }

/* --- 목록 아이템 스타일 (object-item, check-item) --- */
.PMcontent .object, .PMcontent .sub-section { /* 내부에 있는 object-item, check-item에 동일한 스타일 적용 가능 */ }
.PMcontent .object-item, .PMcontent .check-item { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: 10px; padding: 0; }
.PMcontent .object-item:last-child, .PMcontent .check-item:last-child { margin-bottom: 0; }

/* ✅ [수정] 아이콘 SVG 통일 및 적용 */
.PMcontent .object-item::before, .PMcontent .check-item::before { content: ''; display: inline-block; width: 20px; height: 20px; background-color: var(--primary-color); flex-shrink: 0; /* 아이콘이 찌그러지지 않도록 */ -webkit-mask-size: contain; mask-size: contain; }

/* object-item은 기존 아이콘 유지 */
.PMcontent .object-item::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }

/* ✅ [추가] check-item은 다른 아이콘 적용 */
.PMcontent .check-item::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }

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

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

/* --- 반응형 디자인 --- */

@media screen and (max-width: 768px) {
  .PMcontent { padding: var(--space-md); }
  .PMcontent .main-title { font-size: 20px; }
  .PMcontent .section { border-radius: 0; /* 모바일에서는 radius 제거로 꽉찬 느낌 */ }
}