/* ============================================================
   똑순이 지역 SEO — 게시글 상세 본문 중앙정렬 CSS
   ddoksun_seo_article.css
   역할: board 스킨의 read 뷰에서 본문을 가운데 900~980px 폭으로 정렬
   ============================================================ */

/* ── 게시글 상세 전체 래퍼 ── */
.ddsf-board,
.board,
.board_read {
    box-sizing: border-box;
}

/* ── 본문 폭 제한 · 가운데 ── */
.ddsf-board .read_body,
.ddsf-board .rd_body,
.ddsf-board .xe_content,
.ddsf-board .rhymix_content,
.ddsf-board article,
.board .read_body,
.board .rd_body,
.board .xe_content,
.board .rhymix_content {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* ── 제목·메타 영역도 동일 폭 ── */
.ddsf-board .read_header,
.ddsf-board .rd_hd,
.ddsf-board .titleArea,
.board .read_header,
.board .rd_hd,
.board .titleArea {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 이미지 넘침 방지 ── */
.board .xe_content img,
.board .rhymix_content img,
.board .read_body img,
.board .rd_body img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 본문 가독성 ── */
.board .xe_content,
.board .rhymix_content,
.board .read_body,
.board .rd_body {
    font-size: 18px !important;
    line-height: 1.9 !important;
    letter-spacing: -0.03em;
    color: #111;
    word-break: keep-all;
}

/* ── 제목 ── */
.board .read_header h1,
.board .rd_hd h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.35;
    margin-bottom: 16px;
}

/* ── 메타(날짜·조회수) ── */
.board .read_header .meta,
.board .rd_hd .meta {
    font-size: 14px;
    color: #888;
}

/* ── 푸터 버튼 영역 ── */
.board .btnArea,
.board .read_footer .btnArea {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 0;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.board .btnArea .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.board .btnArea .btn:hover { background: #f5f5f5; border-color: #bbb; }

/* ── 파일 첨부 ── */
.board .fileList {
    max-width: 960px !important;
    margin: 16px auto !important;
}

/* ── 태그 ── */
.board .tns {
    max-width: 960px !important;
    margin: 12px auto !important;
}
.board .tns .tag {
    display: inline-block;
    padding: 3px 10px;
    background: #f4f4f4;
    border-radius: 999px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    margin: 2px 2px;
}
.board .tns .tag:hover { background: #e8e8e8; }

/* ── 댓글 영역 ── */
.board .comment_list,
.board .comment_form_wrap {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 모바일 ── */
@media (max-width:768px){

    .ddsf-board .read_body,
    .ddsf-board .rd_body,
    .ddsf-board .xe_content,
    .ddsf-board .rhymix_content,
    .board .read_body,
    .board .rd_body,
    .board .xe_content,
    .board .rhymix_content,
    .board .read_header,
    .board .rd_hd,
    .board .titleArea,
    .board .btnArea,
    .board .fileList,
    .board .tns{
        max-width:100% !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .board .xe_content,
    .board .rhymix_content,
    .board .read_body,
    .board .rd_body{
        font-size:16px !important;
        line-height:1.8 !important;
    }

    .board .read_header h1,
    .board .rd_hd h1{
        font-size:22px;
    }

    /* seo guide */
    .dd-seo-guide,
    .dd-seo-guide--landing{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .dd-seo-guide-inner{
        width:100% !important;
        max-width:100% !important;
        padding:0 8px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .dd-seo-details{
        width:100% !important;
        margin:0 !important;
        border-radius:14px !important;
    }

    .dd-seo-toggle{
        padding:14px 12px !important;
        font-size:14px !important;
        line-height:1.45 !important;
    }

    .dd-seo-body{
        padding:14px 12px !important;
    }
}
@media (max-width:768px){

    .body.fixed-width.sub.right,
    .body.fixed-width.sub.right .content,
    #content{
        width:100% !important;
        max-width:100% !important;
        padding-left:8px !important;
        padding-right:8px !important;
        box-sizing:border-box !important;
    }
}
/* 모바일 전체 폭 확장 */
@media (max-width:768px){

    .container{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .body.fixed-width.sub.right{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .content{
        width:100% !important;
        max-width:100% !important;
        padding:0 10px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .dd-seo-guide,
    .dd-seo-guide--landing,
    .dd-seo-guide-inner,
    .dd-seo-details{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }
@media (max-width:768px){

    .container,
    .body.fixed-width,
    .body.fixed-width.sub,
    .body.fixed-width.sub.right,
    .body.sub,
    .body.sub.right,
    .content,
    #content{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        padding-left:6px !important;
        padding-right:6px !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }

    .dd-seo-guide,
    .dd-seo-guide--landing,
    .dd-seo-guide-inner,
    .dd-seo-details{
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }

    .dd-seo-toggle{
        padding:14px 10px !important;
    }
}
}




/* DDOKSUN: 랜딩 아코디언 상단 노출 요약문 */
.dd-seo-visible-summary {
    margin: 0 0 12px 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}

/* DDOKSUN: landing quick guide + scroll SEO body */
.dd-seo-quick-guide {
    margin: 0 0 12px 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    word-break: keep-all;
}

.dd-seo-quick-guide h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.45;
    color: #111827;
    font-weight: 800;
}

.dd-seo-quick-guide p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}

.dd-seo-scroll-body {
    max-height: 34px;
    overflow-y: auto;
    padding: 0 2px 0 0;
    scroll-behavior: smooth;
}

.dd-seo-scroll-body::-webkit-scrollbar {
    width: 8px;
}

.dd-seo-scroll-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.dd-seo-scroll-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .dd-seo-scroll-body {
        max-height: 32px;
    }
}

/* DDOKSUN: SEO scroll body almost invisible scrollbar */
.dd-seo-scroll-body {
    max-height: 28px !important;
    overflow-y: auto !important;
    padding: 0 2px 0 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #ffffff #ffffff;
    background: #ffffff;
}

.dd-seo-scroll-body::-webkit-scrollbar {
    width: 4px;
}

.dd-seo-scroll-body::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 999px;
}

.dd-seo-scroll-body::-webkit-scrollbar-track {
    background: #ffffff;
}

@media (max-width: 768px) {
    .dd-seo-scroll-body {
        max-height: 24px !important;
    }
}

/* DDOKSUN: latest cards first, SEO body small */
.dd-seo-guide--top {
    margin-bottom: 12px;
}

.dd-seo-guide--bottom {
    margin-top: 12px;
}

.dd-seo-guide--bottom .dd-seo-scroll-body {
    max-height: 28px !important;
    overflow-y: auto !important;
    padding: 0 2px 0 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #ffffff #ffffff;
    background: #ffffff;
}

.dd-seo-guide--bottom .dd-seo-scroll-body::-webkit-scrollbar {
    width: 4px;
}

.dd-seo-guide--bottom .dd-seo-scroll-body::-webkit-scrollbar-thumb {
    background: #ffffff;
}

.dd-seo-guide--bottom .dd-seo-scroll-body::-webkit-scrollbar-track {
    background: #ffffff;
}

@media (max-width: 768px) {
    .dd-seo-guide--bottom .dd-seo-scroll-body {
        max-height: 24px !important;
    }
}