/* --- [ 게시글 상세 보기 CSS ] --- */
#magazine-wrap .mz-top-nav { margin: 40px 0 48px 0;  border-bottom: 1px solid #DADADA; }
.mz-top-nav .btn-back {
    display: inline-flex;
    align-items: center; /* 아이콘과 텍스트 수직 중앙 정렬 */
    text-decoration: none;
    color: #333; /* 이미지와 유사한 어두운 회색 */
    font-size: 17px; /* 필요에 따라 폰트 크기 조절 */
    font-weight: 400;
}
.mz-top-nav .btn-back::before {
    content: "";
    display: inline-block;
    width: 26px; 
    height: 26px; 
    background-image: url('chevron-ico.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg); 
}
#magazine-wrap .btn-back:hover { color: var(--text-main); }
#magazine-wrap .article-header { letter-spacing: 0.2px; margin-bottom: 35px; }
#magazine-wrap .article-header .category-tag { display: inline-block; border: 1px solid #ba4b6d; color: #ba4b6d; padding: 4px 12px; font-size: 13px; font-weight: 700; margin-bottom: 16px; }
#magazine-wrap .article-header .article-title { font-size: 36px; font-weight: 800; color: #111; margin: 0 0 20px 0; line-height: 1.3; letter-spacing: -1px; word-break: keep-all; }
#magazine-wrap .article-header .article-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #777; flex-wrap: wrap; }
#magazine-wrap .article-meta .divider { color: #ddd; padding: 0 8px; }
#magazine-wrap .article-meta .views { display: inline-flex; align-items: center; gap: 5px;}
#magazine-wrap .article-meta .views .num { font-weight: 700; }

/* 공유하기 버튼 및 팝업 */
#magazine-wrap .share-wrap { position: relative; letter-spacing: 0.2px;}
#magazine-wrap .btn-share { background: none; border: none; color: #777; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 0; }
#magazine-wrap .share-popup { display: none; position: absolute; top: 30px; background: #fff; border: 1px solid #eee; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-radius: 8px; padding: 24px; width: 398px; z-index: 100; left: 50%; transform: translateX(-50%); }
#magazine-wrap .share-popup .popup-title { text-align: center; font-weight: 700; margin-bottom: 16px; color: #333; font-size: 20px; line-height: 30px;}
#magazine-wrap .share-popup .sns-icons { display: flex;
    align-items: center;
    gap: 12px; /* 아이콘 사이 간격 (필요에 따라 조절) */
    justify-content: center;}
#magazine-wrap .share-popup .icon-sns { width: 36px; height: 36px; background-color: #eee; border-radius: 50%; display: inline-block; cursor: pointer; }
#magazine-wrap .share-popup.show { display: block;}

/* 본문 및 커버 이미지 */
#magazine-wrap .article-cover { width: 100%; margin-bottom: 60px; }
#magazine-wrap .article-cover img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; display: block; }
#magazine-wrap .article-body { margin: 0 auto; font-size: 17px; line-height: 1.8; color: #333; padding-bottom: 80px; }
#magazine-wrap .article-body p { margin-bottom: 24px; word-break: keep-all; }
#magazine-wrap .article-body .greeting { font-size: 19px; font-weight: 700; margin-bottom: 40px; color: #111; }
#magazine-wrap .article-body blockquote { margin: 48px 0; padding: 10px 0 10px 24px; border-left: 4px solid #ba4b6d; font-size: 18px; font-weight: 700; color: #111; line-height: 1.6; background: transparent; }
#magazine-wrap .article-body .signature { text-align: right; color: #777; margin-top: 80px; font-size: 15px; }

/* 양쪽 끝 배치 컨테이너 (버튼들) */
#magazine-wrap .mz-bottom-actions { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; margin-top: 40px; }
#magazine-wrap .btn-list { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background-color: #f8f8f8; border: 1px solid #e0e0e0; color: #555; font-size: 14px; font-weight: 500; border-radius: 4px; text-decoration: none; transition: all 0.2s; }
#magazine-wrap .btn-list:hover { background-color: #eee; color: #333; }
#magazine-wrap .btn-top { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background-color: #5a5a5a; border: 1px solid #5a5a5a; color: #ffffff; font-size: 14px; font-weight: 500; border-radius: 4px; text-decoration: none; transition: all 0.2s; }
#magazine-wrap .btn-top:hover { background-color: #333; border-color: #333; color: #ffffff; }



/* =========================================
   [상세 페이지] 댓글 영역 UI
========================================= */
#magazine-wrap .mz-comment-wrap {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #808080; 
}

/* 헤더 부분 */
#magazine-wrap .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
#magazine-wrap .comment-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
#magazine-wrap .comment-header .count-text {
    font-size: 15px;
    color: #333;
}
#magazine-wrap .comment-header .count-text strong {
    font-weight: 700;
}
#magazine-wrap .comment-header .sort-select {
    border: none;
    color: #777;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    background: transparent;
}


/* 댓글 입력창 */
#magazine-wrap .comment-input-wrap {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-bottom: 40px;
    background-color: #fff;
}
#magazine-wrap .comment-input-wrap textarea {
    flex: 1;
    border: none;
    resize: none;
    height: 60px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    outline: none;
}
#magazine-wrap .comment-input-wrap textarea::placeholder {
    color: #aaa;
}
#magazine-wrap .btn-submit {
    flex: 0 0 80px;
    background-color: #f8f0f2; /* 시안의 연한 핑크/그레이 색상 */
    color: #888;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
#magazine-wrap .btn-submit:hover {
    background-color: #e5d8dc;
    color: #555;
}

/* 댓글 리스트 */
/* #magazine-wrap .comment-list {
    border-top: 1px solid #eaeaea;
} */
#magazine-wrap .comment-item {
    padding: 24px 0;
    border-bottom: 1px solid #eaeaea;
}
#magazine-wrap .comment-item.is-reply {
    display: block !important; 
    padding-left: 40px !important; 
    background-color: transparent !important; 
    border-top: none !important; 
}
#magazine-wrap .reply-mark {
    color: #333 !important;
    font-weight: 400 !important;
    margin-right: 6px !important;
    font-size: 14px !important;
}
#magazine-wrap .reply-content {
    flex: 1;
}

/* 댓글 공통 텍스트 */
#magazine-wrap .comment-info {
    margin-bottom: 8px;
}
#magazine-wrap .comment-info .author {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.2px !important;
}
#magazine-wrap .comment-info .date {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.5px !important;
}
#magazine-wrap .comment-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 16px;
}
#magazine-wrap .comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
#magazine-wrap .btn-reply {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
#magazine-wrap .btn-reply:hover {
    text-decoration: underline;
}

/* 페이징 */
#magazine-wrap .comment-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    font-size: 14px;
    color: #777;
}
#magazine-wrap .comment-pagination a {
    color: #555;
    text-decoration: none;
}
#magazine-wrap .comment-pagination .current {
    color: var(--point-color);
    font-weight: 700;
}
#magazine-wrap .comment-pagination a.disabled {
        color: #ccc !important;
        cursor: default !important;
    }

/* 좋아요  */
.btn-like {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-like:hover { background: #f0f0f0; }

/* 좋아요 누른 상태 (active) */
.btn-like.active {
    border-color: #A01749; /* 활성화 시 테두리 색상 */
    color: #A01749;
    font-weight: 600;
}
.btn-like.active img {
    filter: invert(16%) sepia(85%) saturate(3361%) hue-rotate(320deg) brightness(85%) contrast(98%);
}

/* --- [ 모바일 반응형 ] --- */
@media (max-width: 768px) {
    #magazine-wrap .section-wrapper { padding: 28px 0 !important; }
    #mz-mobile-wrap {
        width: 100% !important;
        max-width: 100vw !important; /* 부모가 1200px이어도 기기 화면 너비까지만 커지도록 억제 */
        box-sizing: border-box !important;
    }
    #magazine-wrap .mz-container { 
        max-width: 100% !important; 
        padding: 0 20px !important; /* 모바일 화면에 맞게 좌우 여백 축소 */
        overflow-x: hidden !important; /* 요소가 삐져나가서 가로로 스크롤되는 현상 방지 */
    }
    #magazine-wrap .mz-top-nav { 
        display: none !important; 
    }
    /* 1. 상단 여백 축소 */
    #magazine-wrap .mz-top-nav { padding: 10px 0 !important; margin-bottom: 10px !important; }

    /* 2. 헤더 기준점 설정 (공유하기 버튼이 도망가지 못하게 꽉 잡기) */
    #magazine-wrap .article-header { 
        margin: 24px 0 !important; 
        position: relative !important; 
    }
    
    /* 3. 카테고리 태그 및 공유하기 버튼 */
    #magazine-wrap .article-header .category-tag { 
        font-size: 12px !important; 
        padding: 3px 10px !important; 
        margin-bottom: 16px !important; 
    }
    
    /* 공유하기 버튼을 우측 상단으로 띄우고, 퀵메뉴보다 앞으로 나오게 */
    #magazine-wrap .share-wrap { 
        position: absolute !important; 
        top: 0 !important; 
        right: 0 !important; 
        margin-top: 0 !important;
        z-index: 9999 !important; /* 퀵메뉴 위에 표시 */
    }
    #magazine-wrap .btn-share { 
        font-size: 13px !important; 
        padding: 4px 8px !important;
        background-color: #ffffff !important; /* 뒤에 겹치는 글씨 안보이게 흰 배경 */
        border: 1px solid #eee !important;
        border-radius: 4px !important;
    }
    
    /* 조회수 뒤에 덩그러니 남은 파이프(|) 기호 가리기 */
    #magazine-wrap .article-meta .divider:nth-last-child(2) { display: none !important; }

    /* 4. 폰트 크기 모바일 시안에 맞게 강제 축소 */
    #magazine-wrap .article-header .article-title { 
        font-size: 24px !important; /* 빨간 글씨 테스트 해제 */
        color: #111 !important; 
        line-height: 1.3 !important;
        margin-bottom: 16px !important; 
        word-break: keep-all !important;
        padding-right: 20px !important; /* 제목 우측 여백 */
    }
    #magazine-wrap .article-header .article-meta { 
        font-size: 13px !important; 
        gap: 6px !important; 
    }

    /* 5. 커버 이미지 최적화 */
    #magazine-wrap .article-cover {
        width: 100% !important;
        margin-bottom: 24px !important;
    }
    #magazine-wrap .article-cover img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }

    /* 2. 본문(.article-body) 안의 모든 이미지 줄이기 */
    #magazine-wrap .article-body img {
        max-width: 100% !important; /* 화면 밖으로 안 삐져나가게 방어 */
        height: auto !important;    /* 찌그러지지 않게 세로 비율 자동 맞춤 */
        display: block !important;
        margin: 10px auto !important; /* 이미지 위아래 여백 살짝 주고 가운데 정렬 */
    }

    /* 3. 본문 안의 동영상(유튜브 iframe, 일반 video 태그) 줄이기 */
    #magazine-wrap .article-body iframe,
    #magazine-wrap .article-body video {
        max-width: 100% !important; /* 억지로 키우지 않고, 화면보다 클 때만 줄임 */
        height: auto !important;    /* html에 적힌 가로세로 비율(420x420)을 자동 유지 */
    }
    /* 6. 본문 폰트 및 여백 최적화 */
    #magazine-wrap .article-body { font-size: 15px !important; padding-bottom: 40px !important; word-break: break-all !important; }
    #magazine-wrap .article-body .greeting { font-size: 17px !important; margin-bottom: 30px !important; }
    #magazine-wrap .article-body p { margin-bottom: 20px !important; }
    #magazine-wrap .article-body blockquote { margin: 32px 0 !important; padding: 8px 0 8px 16px !important; font-size: 16px !important; }
    #magazine-wrap .article-body .signature { margin-top: 50px !important; font-size: 14px !important; }

    /* 7. 버튼 및 하단 리스트 */
    #magazine-wrap .mz-bottom-actions { padding: 20px 0 !important; margin-top: 30px !important; }
    #magazine-wrap .btn-list, #magazine-wrap .btn-top { font-size: 13px !important; padding: 8px 16px !important; }
    
    /* 하단 조합원 이야기 리스트 - 가로 스와이프 슬라이더로 변경 */
    #magazine-wrap .grid-4 { 
        display: flex !important; /* 그리드를 풀고 가로 정렬 */
        flex-wrap: nowrap !important; /* 밑으로 안 떨어지게 한 줄로 고정 */
        overflow-x: auto !important; /* 가로 스크롤(스와이프) 활성화 */
        overflow-y: hidden !important;
        gap: 16px !important; 
        padding-bottom: 20px !important; /* 스크롤바 여백 */
        
        /* 터치 스크롤 부드럽게 & 자석처럼 딱딱 붙게 */
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        
        /* 기본 스크롤바 숨기기 (모바일 앱처럼 깔끔하게) */
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important; 
    }
    #magazine-wrap .grid-4::-webkit-scrollbar {
        display: none !important; 
    }

    /* 개별 카드 사이즈 설정 (하나 보여주고 다음 거 쬐끔 보이게) */
    #magazine-wrap .grid-4 > * {
        /* 카드의 가로 너비를 화면의 80%로 고정 (나머지 20% 공간으로 다음 카드가 보임) */
        flex: 0 0 80% !important; 
        max-width: 80% !important;
        scroll-snap-align: center !important; /* 스와이프 시 화면 중앙에 자석처럼 멈춤 */
    }
    .btn-like {
        padding: 4px 12px !important;
    }
    .article-actions-bottom { padding : 16px 0 !important;}
    .mz-comment-wrap { margin : 0 !important; }
}

/* 아주 작은 폰 화면에서는 1열로 꽉 차게 */
@media (max-width: 480px) {
    #magazine-wrap .grid-4 { grid-template-columns: 1fr !important; }
}