/* 아티클 상세 페이지 - 단순화된 스타일 */

#article-container {
    padding: 30px 20px; /* 패딩 조정 */
}

#article-title {
    font-size: 32px; /* 폰트 크기 살짝 줄임 */
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.5;
    border-bottom: 1px solid #e0e0e0; /* 테두리를 얇고 은은하게 변경 */
    padding-bottom: 25px;
}

#article-content {
    font-size: 16px; /* 본문 폰트 크기 조정 */
    line-height: 1.9; /* 줄 간격 넓혀서 가독성 확보 */
    color: #333;
}

/* 헤더(h2, h3, h4)에서 과한 왼쪽 테두리 제거 */
#article-content h2, 
#article-content h3, 
#article-content h4 {
    margin-top: 50px; /* 위쪽 여백 늘림 */
    margin-bottom: 20px;
    font-weight: 600;
    padding-left: 0; /* 테두리 관련 패딩 제거 */
    border-left: none; /* 테두리 제거 */
}

#article-content h2 {
    font-size: 26px;
    border-bottom: 1px solid #eee; /* 소제목 구분을 위한 얇은 밑줄 */
    padding-bottom: 10px;
}

#article-content h3 {
    font-size: 22px;
}

#article-content p {
    margin-bottom: 20px;
}

/* 링크 스타일 단순화 */
#article-content a {
    color: var(--primary-color);
    text-decoration: underline; /* 밑줄로 링크임을 표시 */
    border-bottom: none; /* 기존 테두리 제거 */
}

/* 링크 호버 시 배경색 변경 효과 제거 */
#article-content a:hover {
    text-decoration: none; /* 호버 시 밑줄 제거 */
}

#article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 곡률 살짝 줄임 */
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* 그림자 연하게 */
}

#article-content blockquote {
    margin: 30px 0;
    padding: 15px 20px;
    border-left: 3px solid #e0e0e0; /* 테두리 얇게 */
    background-color: transparent; /* 배경색 제거 */
    font-style: normal; /* 이탤릭체 제거 */
    color: #555;
}

#article-content ul, 
#article-content ol {
    padding-left: 25px;
    margin-bottom: 20px;
}

#article-content li {
    margin-bottom: 10px;
}

#article-content pre {
    background-color: #f8f9fa; /* 밝은 코드 블록 배경 */
    color: #333;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #eee;
}

#article-content code {
    font-family: 'Courier New', Courier, monospace;
}