/* ================================================================
 * article.css — 게시글 상세 (commonArticleDetailCSS)
 * (원본: src/common-layout.ts 의 CSS export 를 정적 파일로 분리)
 * 주의: 내용/선언 순서/우선순위를 원본 그대로 보존합니다.
 * ================================================================ */

/* ---- commonArticleDetailCSS ---- */
    .container {
        max-width: 1280px;
        width: 100%;
        margin: 0px auto 170px;        
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .article-header {
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
        background: white;
        padding: 35px 0px 35px;
        border-radius: 10px 10px 0 0;
        /*box-shadow: 0 2px 10px rgba(0,0,0,0.08);*/
    }
    
    .article-header h1 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 700;
        font-size: 28px;
        text-align: center;
        color: var(--text-dark);
        margin-bottom: 15px;
    }
    
    .article-meta {
        color: var(--text-light);
        font-size: 14px;
        text-align: right;
    }
    
    .article-image {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }
    
    .article-content {
        background: white;
        padding: 0px 0px 0px;
        border-radius: 0 0 10px 10px;
        /*box-shadow: 0 2px 10px rgba(0,0,0,0.08);*/
        /*margin-top: -1px;*/
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        max-width: min(100%,1280px);        
        margin: 0 auto;
    }
    
    .article-content p {
        /*line-height: 2;*/
        margin-bottom: 20px;
    }
    
    .article-content h2 {
        font-family: 'Noto Sans KR', sans-serif;
        /*font-size: 24px;*/
        /*color: var(--primary-color);*/
        margin: 40px 0 20px;
    }
    
    .article-content h3 {
        /*font-size: 20px;*/
        /*font-weight: 600;*/
        margin: 30px 0 15px;
    }
    
    .article-content ul, .article-content ol {
        margin: 20px 0 20px 30px;
    }
    
    .article-content li {
        margin-bottom: 10px;
    }
    
    .article-content img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block;
        margin: 20px auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .btn-back {
        display: inline-block;
        margin-top: 40px;
        padding: 12px 30px;
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s;
    }
    
    .btn-back:hover {
        background: var(--secondary-color);
    }
    
    @media (max-width: 768px) {
        .container {
            margin: 0px 0px 80px;        
            padding: 0px 2px 60px;
        }
        
        .article-header {
            padding: 25px 0px;
        }
        
        .article-header h1 {
            font-size: 24px;
        }
        
        .article-content {
            padding: 0px 0px;
        }
        
        .article-content img {
            margin: 15px auto;
        }
    }