/**
 * 인사이트 콘텐츠 CSS - 전문가용 심플 디자인
 * AI HTML 생성용 클래스 시스템
 * 
 * 접두사: .ic- (insight-content)
 * 버전: 2.0.0
 * 업데이트: 2026-02-05
 */

/* ================================================
   1. 기본 래퍼
   ================================================ */
.ic-wrapper {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.8;
    color: #1a1a1a;
    font-size: 18px;
    letter-spacing: -0.02em;
}

/* ================================================
   2. 제목
   ================================================ */
.ic-title {
    margin: 0 0 12px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f0f0f;
    letter-spacing: -0.03em;
}

.ic-subtitle {
    margin: 0 0 32px 0;
    color: #525252;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
}

.ic-section-title {
    margin: 40px 0 16px 0;
    font-size: 22px;
    font-weight: 600;
    color: #0f0f0f;
    padding-bottom: 8px;
    border-bottom: 2px solid #0f0f0f;
}

/* ================================================
   3. 본문
   ================================================ */
.ic-text {
    margin: 0 0 16px 0;
    line-height: 1.85;
    color: #333;
}

.ic-lead {
    font-size: 20px;
    color: #404040;
    margin-bottom: 24px;
    font-weight: 400;
}

/* ================================================
   4. 강조
   ================================================ */
.ic-strong {
    font-weight: 600;
    color: #0f0f0f;
}

.ic-highlight {
    color: #0066cc;
    font-weight: 600;
}

.ic-keyword {
    background: linear-gradient(transparent 60%, #e8f4fd 60%);
    font-weight: 500;
}

/* ================================================
   5. 인용 & 알림 박스
   ================================================ */
.ic-quote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 3px solid #0f0f0f;
    background: #fafafa;
    color: #404040;
    font-style: normal;
}

.ic-callout {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #495057;
}

.ic-callout-info {
    background: #f0f7ff;
    border-color: #cce5ff;
    color: #004085;
}

.ic-callout-warning {
    background: #fff8e6;
    border-color: #ffe89a;
    color: #856404;
}

/* ================================================
   6. 전문가 박스 (Clinical / Deep)
   ================================================ */
.ic-deep-box {
    margin: 24px 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 0;
}

.ic-deep-box::before {
    content: "Deep Insight";
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.ic-clinical {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f8f9fa;
    border-left: 3px solid #495057;
}

.ic-clinical::before {
    content: "Clinical Point";
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.ic-evidence {
    margin: 24px 0;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #dee2e6;
}

.ic-evidence::before {
    content: "Evidence-Based";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

/* ================================================
   7. 리스트
   ================================================ */
.ic-list {
    margin: 16px 0;
    padding-left: 20px;
}

.ic-list li {
    margin-bottom: 10px;
    line-height: 1.75;
}

.ic-list li strong {
    color: #0f0f0f;
}

/* 넘버링 리스트 */
.ic-list-num {
    list-style: none;
    counter-reset: item;
    padding-left: 0;
}

.ic-list-num li {
    counter-increment: item;
    position: relative;
    padding-left: 32px;
}

.ic-list-num li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background: #0f0f0f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================
   8. 테이블
   ================================================ */
.ic-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
    /* 스크롤바 숨기기 */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.ic-table-wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.ic-table {
    width: 100%;
    min-width: 600px; /* 표가 너무 좁아지지 않도록 최소 너비 설정 */
    border-collapse: collapse;
    font-size: 16px;
}

.ic-table th {
    text-align: left;
    padding: 14px 16px;
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.ic-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e9ecef;
    color: #333;
}

.ic-table tr:hover td {
    background: #f8f9fa;
}

/* ================================================
   9. 학습자료용 (팁, 암기, 시험)
   ================================================ */
.ic-tip-box {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.ic-tip-box::before {
    content: "Tip";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.ic-exam-point {
    margin: 24px 0;
    padding: 20px 24px;
    background: #fff5f5;
    border-left: 3px solid #c92a2a;
}

.ic-exam-point::before {
    content: "Exam Point";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #c92a2a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.ic-mnemonic {
    margin: 24px 0;
    padding: 20px 24px;
    background: #fff;
    border: 2px dashed #adb5bd;
    text-align: center;
}

.ic-mnemonic::before {
    content: "Mnemonic";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

/* ================================================
   10. Q&A
   ================================================ */
.ic-qa {
    margin: 20px 0;
    padding: 20px 24px;
    background: #f8f9fa;
}

.ic-question {
    font-weight: 600;
    color: #0f0f0f;
    margin-bottom: 10px;
}

.ic-question::before {
    content: "Q. ";
    color: #0066cc;
}

.ic-answer {
    color: #495057;
    padding-left: 24px;
}

.ic-answer::before {
    content: "A. ";
    font-weight: 600;
    color: #495057;
}

/* ================================================
   11. 체크리스트
   ================================================ */
.ic-checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.ic-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.ic-checklist li::before {
    content: "□";
    color: #0f0f0f;
    font-size: 16px;
    flex-shrink: 0;
}

/* ================================================
   12. 태그
   ================================================ */
.ic-tags {
    margin-bottom: 20px;
}

.ic-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    color: #525252;
    margin-right: 6px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid #d4d4d4;
}

/* ================================================
   13. 구분선 & 푸터
   ================================================ */
.ic-divider {
    border: 0;
    border-top: 1px solid #e9ecef;
    margin: 32px 0;
}

.ic-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
    color: #868e96;
    font-size: 13px;
}

.ic-source {
    font-size: 12px;
    color: #adb5bd;
    margin-top: 8px;
}

.ic-source a {
    color: #0066cc;
    text-decoration: none;
}

/* ================================================
   14. 참고문헌 스타일
   ================================================ */
.ic-reference {
    margin-top: 32px;
    padding: 20px 24px;
    background: #f8f9fa;
    font-size: 15px;
}

.ic-reference::before {
    content: "Reference";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.ic-reference ol {
    margin: 0;
    padding-left: 20px;
}

.ic-reference li {
    margin-bottom: 6px;
    color: #6c757d;
}

/* ================================================
   15. 모바일
   ================================================ */
@media screen and (max-width: 768px) {
    .ic-wrapper {
        font-size: 15px;
    }
    
    .ic-title {
        font-size: 22px;
    }
    
    .ic-section-title {
        font-size: 17px;
        margin: 32px 0 12px 0;
    }
    
    .ic-quote,
    .ic-callout,
    .ic-deep-box,
    .ic-clinical,
    .ic-evidence,
    .ic-tip-box,
    .ic-exam-point,
    .ic-qa {
        padding: 16px 20px;
    }
    
    .ic-table th,
    .ic-table td {
        padding: 10px 12px;
    }
}

@media screen and (max-width: 480px) {
    .ic-wrapper {
        font-size: 14px;
    }
    
    .ic-title {
        font-size: 20px;
    }
    
    .ic-subtitle {
        font-size: 14px;
    }
}