/* 전문가 톤 버전에 적용된 CSS 스타일 */
:root {
--primary-color: #007bff; /* 주소킹의 주요 색상 추정 (파란색 계열) */
--secondary-color: #6c757d; /* 보조 색상 */
--light-gray: #f8f9fa; /* 밝은 배경색 */
--border-color: #e9ecef; /* 테두리 색상 */
--text-color: #343a40; /* 기본 텍스트 색상 */
--link-color: var(--primary-color);
--success-color: #198754; /* 녹색 계열 */
--warning-color: #ff7f0e; /* 주황색 계열 */
--danger-color: #dc3545;  /* 빨간색 계열 */
--info-color: #0d6efd;   /* 파란색 계열 */
}

body.content-body {
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
line-height: 1.8;
color: var(--text-color);
background-color: #fff;
padding: 25px; /* 콘텐츠 영역 여백 */
word-break: keep-all;
max-width: 900px; /* Added for readability */
margin: 0 auto; /* Center align */
}

.content-body h2 {
font-size: 28px; /* H2 크기 */
color: #333; /* 제목 색상 */
font-weight: 800;
margin-top: 10px;
margin-bottom: 35px;
text-align: center;
border-bottom: 3px solid var(--primary-color); /* 파란색 하단선 */
padding-bottom: 15px;
}

.content-body h3 {
font-size: 22px; /* H3 크기 */
color: var(--text-color); /* 기본 텍스트 색상과 통일 */
margin-top: 50px;
margin-bottom: 25px;
font-weight: 700;
position: relative;
border-left: 6px solid var(--primary-color); /* 파란색 왼쪽 테두리 */
padding: 10px 18px;
background-color: #eaf2fa; /* H3 배경색 */
}
/* H3 앞 아이콘 공간 확보 (아이콘은 span으로 추가) */
.content-body h3 span {
    font-size: 1.2em;
    vertical-align: -2px;
    margin-right: 8px;
}


.content-body p {
margin-bottom: 18px; /* 문단 간격 */
font-size: 16px; /* 기본 폰트 크기 */
    color: #495057; /* 본문 색상 */
}

.content-body ul {
list-style: none; /* 기본 점 제거 */
padding-left: 20px; /* 들여쓰기 */
margin-bottom: 20px;
}

.content-body ul li {
position: relative;
padding-left: 15px; /* 아이콘/점 들어갈 공간 */
margin-bottom: 10px; /* 목록 간격 */
font-size: 15px;
    color: #5a6268;
}

/* 목록 앞 아이콘/점 스타일 */
.content-body ul:not(.tip-list):not(.reference-section ul) li::before { /* tip-list, reference-list 아닌 일반 목록 */
content: '•'; /* 글머리 기호 */
position: absolute;
left: 0;
top: 0;
color: var(--primary-color); /* 글머리 기호 색상 */
font-weight: bold;
}

/* 특정 목록 스타일 (예: Tip List) */
.content-body .tip-list {
    padding-left: 0;
}
.content-body .tip-list li {
background-color: #f0f8ff; /* 팁 배경색 예시 (AliceBlue) */
padding: 10px 15px 10px 30px; /* 내부 여백 조절 */
border-left: 4px solid var(--primary-color); /* 왼쪽 강조선 */
margin-bottom: 12px;
border-radius: 4px;
list-style: none; /* 기본 리스트 스타일 제거 */
    position: relative;
    color: #495057;
}
.content-body .tip-list li::before {
    content: '💡'; /* 팁 아이콘 예시 */
    position: absolute;
    left: 10px;
    top: 10px;
    color: initial; /* 아이콘 기본 색상 사용 */
    font-weight: normal;
}
.content-body .tip-list strong { /* 팁 리스트 안의 strong 태그 */
    color: var(--primary-color);
    font-weight: 600;
    display: block; /* 제목처럼 보이도록 */
    margin-bottom: 5px;
}


.content-body strong {
font-weight: 600;
}

.content-body a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease; /* Smooth transition */
    font-weight: bold; /* 링크 강조 */
}

.content-body a:hover {
filter: brightness(90%); /* 호버 시 약간 어둡게 하는 효과 */
text-decoration: underline;
}

/* 정보 박스 스타일 (이전 전문가 톤 버전 참고) */
.content-body .info-box {
background-color: var(--light-gray);
border: 1px solid var(--border-color);
padding: 20px 25px;
margin-top: 20px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.content-body .info-box h3 { /* 정보 박스 안의 H3 스타일 조정 */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: none; /* 왼쪽 테두리 제거 */
    background-color: transparent; /* 배경색 제거 */
    padding-left: 0; /* 패딩 제거 */
    border-bottom: 1px dashed var(--border-color); /* 구분선 */
    padding-bottom: 10px;
    color: #555; /* 약간 연한 색 */
}
.content-body .info-box h3::before { content: none; } /* H3 앞 장식 제거 */

.content-body .info-box ul {
    margin-bottom: 5px;
}
.content-body .info-box p {
    font-size: 0.95em;
}
.content-body .info-box em { /* 참고 정보 스타일 */
    display: block;
    text-align: right;
    font-size: 0.9em;
    color: var(--secondary-color);
    font-style: normal;
}


.content-body hr {
border: 0;
height: 1px;
background-color: var(--border-color);
margin: 40px 0;
}

/* 참고 정보 섹션 */
.content-body .reference-section {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--light-gray);
    border-radius: 5px;
}
.content-body .reference-section p {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #555;
}
.content-body .reference-section ul {
    padding-left: 0;
    list-style: none;
}
.content-body .reference-section li {
    padding-left: 25px; /* 아이콘 공간 확보 */
    margin-bottom: 8px;
    position: relative;
    color: #5a6268;
}
.content-body .reference-section li::before {
content: '🔗'; /* 링크 아이콘 */
    position: absolute;
    left: 0;
    top: 0;
    color: initial;
    font-weight: normal;
}


/* 반응형 고려 (예시: 768px 이하) */
@media (max-width: 768px) {
    .content-body {
        padding: 15px;
    }
    .content-body h2 {
        font-size: 1.6em;
    }
    .content-body h3 {
        font-size: 1.3em;
    }
    .content-body p, .content-body ul li {
    font-size: 0.95em;
    }
    .content-body .info-box {
        padding: 15px 20px;
    }
    .content-body .tip-list li {
        padding: 8px 12px 8px 25px;
    }
    .content-body .tip-list li::before {
        left: 8px;
        top: 8px;
    }
}
