/* Variables & Base */
#magazine-wrap { --bg-beige: #fbf9f6; --bg-white: #ffffff; --text-main: #333; --text-sub: #777; --point-color: #9d1c3a; --border-color: #eaeaea; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: var(--text-main); line-height: 1.5; }

/* Section Wrappers for Full Width Backgrounds */
#magazine-wrap .section-wrapper { width: 100%; padding: 80px 0; }
#magazine-wrap .bg-beige { background-color: var(--bg-beige); }
#magazine-wrap .bg-white { background-color: var(--bg-white); }

/* Inner Container: 이름 충돌 방지를 위해 mz-container로 변경 */
#magazine-wrap .mz-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* Common Elements */
#magazine-wrap img { max-width: 100%; display: block; object-fit: cover; }
#magazine-wrap a { text-decoration: none; color: inherit; }
#magazine-wrap .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
#magazine-wrap .section-title-wrap { display: flex; align-items: center; gap: 12px; }
#magazine-wrap .section-title { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
#magazine-wrap .section-subtitle { font-size: 14px; color: var(--text-sub); }
#magazine-wrap .btn-more { font-size: 13px; font-weight: 700; color: #535353; border: 1px solid #535353; padding: 6px 14px; border-radius: 4px; background-color: #fff; }

/* --- [ Hero Section (오늘의 에디터 레터) ] --- */
#magazine-wrap .heroSwiper { height: 315px !important; }
#magazine-wrap .heroSwiper .swiper-slide { height: 315px !important; box-sizing: border-box; }
#magazine-wrap .heroSwiper .hero { height: 100%; display: flex; gap: 40px; align-items: stretch; }
#magazine-wrap .heroSwiper .hero-img { flex: 1; border-radius: 12px; overflow: hidden;  aspect-ratio: 16 / 9; align-self: flex-start;  }
#magazine-wrap .heroSwiper .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#magazine-wrap .heroSwiper .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; height: 100%; }
#magazine-wrap .heroSwiper .hero-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
#magazine-wrap .heroSwiper .hero-tag { display: inline-flex; width: max-content !important; color: var(--point-color); border: 1px solid var(--point-color); padding: 6px 14px; font-size: 14px; font-weight: 700; }
#magazine-wrap .heroSwiper .hero-meta { font-size: 14px; color: #333; line-height: 19px; }
#magazine-wrap .heroSwiper .hero-meta .divider { margin: 0 10px; color: #333; }
#magazine-wrap .heroSwiper .hero-meta.mo { display: none !important; }
#magazine-wrap .heroSwiper .hero-title { font-size: 34px; font-weight: 800; margin: 0 0 16px 0; line-height: 1.35; word-break: keep-all; color: #222; }
#magazine-wrap .heroSwiper .hero-desc { font-size: 16px; color: #666; line-height: 1.6; margin: 0; }
#magazine-wrap .heroSwiper .hero-btn { display: inline-flex !important; align-items: center; width: max-content !important; background-color: var(--point-color); color: #fff; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 700; }
#magazine-wrap .heroSwiper .hero-bottom { display: flex; justify-content: flex-start; }
#magazine-wrap .heroSwiper .mobile-overlay-link { display: none; }

/* Rank Numbers */
#magazine-wrap .rank-number { font-size: 48px; color: var(--point-color); font-weight: 500; margin-bottom: 16px; line-height: 1; letter-spacing: -1px; }
#magazine-wrap .rank-number.secondary { color: #888; }

/* Overlay Card (이미지 위에 텍스트) */
#magazine-wrap .card-overlay { position: relative; border-radius: 16px; overflow: hidden; background-color: #000; letter-spacing: 0.2px; }
#magazine-wrap .card-overlay .card-img-wrapper { position: relative; width: 100%;}
#magazine-wrap .card-overlay .card-img-wrapper img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
#magazine-wrap .card-overlay .card-info { position: absolute; bottom: 0; left: 0; width: 100%; padding:  60px 24px 24px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); box-sizing: border-box; }
#magazine-wrap .card-overlay .card-title { font-size: 20px; font-weight: 600; margin: 8px 0; color: #ffffff; line-height: 1.4; word-break: keep-all; }
#magazine-wrap .card-overlay .card-desc { color: #ffffff; font-size: 13px; margin-bottom: 8px; font-weight: 400;}


/* 하단 날짜, 작성자, 조회수 영역 가로 정렬 */
.card-overlay .card-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #ffffff;

}
.card-overlay .meta-left {  display: flex;
    gap: 16px;
    align-items: center; } 
.card-overlay .meta-right {
    display: flex;
    gap: 32px;
    align-items: center;
}
/* .card-overlay .card-meta-bottom .stat img {
    filter: brightness(0) invert(1);
    vertical-align: middle;
    margin-right: 4px;
} */
.card-overlay .card-meta-bottom .stat {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    gap: 8px; /* 아이콘과 숫자 사이의 간격 */
}

/* 아이콘에 걸려있을 수 있는 불필요한 여백/줄바꿈 강제 제거 */
.card-overlay .card-meta-bottom .stat img {
    display: block; 
    margin: 0 !important; 
    filter: brightness(0) invert(1); /* 하얗게 반전 (기존 유지) */
}
/* Common Card Styles */
#magazine-wrap .card { position: relative; border-radius: 12px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s ease; }
#magazine-wrap .card:hover { transform: translateY(-4px); }
#magazine-wrap .card-img-wrapper { position: relative; width: 100%; }

/* Standard Card */
#magazine-wrap .card-standard { display: block; background-color: transparent; box-shadow: none; border-radius: 0; transition: transform 0.2s ease; }
#magazine-wrap .card-standard:hover { transform: translateY(-4px); }
#magazine-wrap .card-standard .card-img-wrapper { border-radius: 16px; overflow: hidden; background-color: #f5f5f5; margin-bottom: 16px; }
#magazine-wrap .card-standard .card-img-wrapper img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
#magazine-wrap .card-standard .card-info { padding: 0 4px; }
#magazine-wrap .card-standard .card-title { font-size: 22px; font-weight: 700; margin: 0 0 20px 0; color: #222; line-height: 1.4; letter-spacing: -0.5px; word-break: keep-all; }
#magazine-wrap .card-standard .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #888; }
#magazine-wrap .card-standard .meta-left span { margin-right: 12px; gap: 16px; letter-spacing: 0.2px; }
#magazine-wrap .card-standard .meta-right { display: flex; gap: 32px; }
#magazine-wrap .card-standard .meta-right .stat { display: flex; align-items: center; gap: 8px; }
#magazine-wrap .card-standard .meta-right .stat img { display: block; width: 16px; height: auto; flex-shrink: 0; margin: 0; }
/* Grid 4 Cards */
#magazine-wrap .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
#magazine-wrap .grid-4 .card-img-wrapper img { height: auto; }
#magazine-wrap .grid-4 .card-standard .card-title { font-size: 18px; margin-bottom: 12px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 텍스트를 제한할 줄 수 (2줄) */
    -webkit-box-orient: vertical;
    overflow: hidden;              /* 영역을 벗어난 텍스트 숨김 */
    text-overflow: ellipsis;       /* 넘치는 텍스트를 '...'으로 표시 */
    line-height: 1.4;}
#magazine-wrap .grid-4 .card-standard .card-meta { flex-direction: column; align-items: flex-start; gap: 10px;  letter-spacing: 0.2px;}
#magazine-wrap .grid-4 .card-standard .meta-right { justify-content: flex-start; gap: 32px;}
#magazine-wrap .grid-4 .card-standard .meta-right .stat { display: flex; align-items: center; gap: 8px; }
#magazine-wrap .grid-4 .card-standard .meta-right .stat img { width: 14px; height: auto; vertical-align: middle; flex-shrink: 0;margin: 0;}

/* Horizontal Small Card */
#magazine-wrap .card-horizontal { display: flex; background: transparent; box-shadow: none; border-radius: 0; height: 100%; transition: transform 0.2s ease; gap: 40px; align-items: center; }

/* #magazine-wrap .card-horizontal:hover { transform: translateY(-4px); }
#magazine-wrap .card-horizontal img { flex: 1; aspect-ratio: 135 / 76; object-fit: cover; border-radius: 16px; }
#magazine-wrap .card-horizontal .card-info { display: flex; flex-direction: column; justify-content: center; flex: 1; box-sizing: border-box; padding: 0; }
#magazine-wrap .card-horizontal .card-date { font-size: 13px; font-weight: 600; color: #555; margin: 0 0 8px 0; }
#magazine-wrap .card-horizontal .card-title { font-size: 18px; font-weight: 700; margin: 0 0 12px 0; line-height: 1.4; letter-spacing: -0.5px; word-break: keep-all; }
#magazine-wrap .card-horizontal .card-desc { font-size: 13px; color: #999; margin: 0; } */

/* Grid Layouts & Featured */
#magazine-wrap .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
#magazine-wrap .grid-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#magazine-wrap .card-stacked { display: flex; flex-direction: column; gap: 40px; }

/* --- [ 생활치유 일지 (Featured Grid) 전용 CSS ] --- */
#magazine-wrap .card-large .card-img-wrapper { margin-bottom: 24px; }
#magazine-wrap .card-large .card-img-wrapper img { height: 380px; }
#magazine-wrap .card-large .card-title { font-size: 26px; margin-bottom: 20px; }
#magazine-wrap .card-large .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #888; }
#magazine-wrap .card-large .meta-left span { margin-right: 16px; letter-spacing: 0.2px;}
#magazine-wrap .card-large .meta-right { display: flex; gap: 32px; }
#magazine-wrap .card-large .meta-right .stat { display: flex; align-items: center; gap: 8px; color: #333; }

/* 말풍선 등 아이콘 찌그러짐 방지 */
#magazine-wrap .card-large .meta-right .stat img {
    display: block;
    width: 16px; 
    height: auto;
    flex-shrink: 0; 
    margin: 0;}
/* 가로형 카드 상세 레이아웃 */
#magazine-wrap .card-horizontal { display: flex !important; flex-direction: row !important; gap: 40px !important; align-items: stretch !important; padding-bottom: 40px; border-bottom: 1px solid #e5e5e5; background: transparent; box-shadow: none; }
#magazine-wrap .card-horizontal:last-child { border-bottom: none; padding-bottom: 0; }
#magazine-wrap .card-horizontal .card-img-wrapper { flex: 1; border-radius: 12px; overflow: hidden; margin-bottom: 0 !important; }
#magazine-wrap .card-horizontal .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
#magazine-wrap .card-horizontal .card-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
#magazine-wrap .card-horizontal .card-title { font-size: 20px; margin-top: 8px; }
#magazine-wrap .card-horizontal .top-meta { display: flex; justify-content: flex-end; gap: 12px; color: #888; font-size: 13px; margin-bottom: 8px; letter-spacing: 0.2px;}
#magazine-wrap .card-horizontal .bottom-meta { font-size: 12px; display: flex !important; justify-content: flex-end !important; width: 100%; margin-top: auto; }
#magazine-wrap .card-horizontal .bottom-meta .meta-right { display: flex !important; flex-direction: row !important; align-items: center; gap: 32px !important; }
#magazine-wrap .card-horizontal .bottom-meta .stat { display: flex; align-items: center; gap: 8px; color: #333; }
#magazine-wrap .card-horizontal .bottom-meta .stat img { display: block; width: 16px; height: auto; flex-shrink: 0; margin: 0;}

/* Editor Profile Section */
#magazine-wrap .editors-wrap { display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding: 40px 20px 20px 20px; 
    width: 100%; 
    box-sizing: border-box;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none; }
#magazine-wrap .editors-wrap::-webkit-scrollbar { display: none; }
#magazine-wrap .editors-wrap:active { cursor: grabbing; }
#magazine-wrap .editor-item { flex: 0 0 auto; width: 140px; text-align: center; }
#magazine-wrap .editor-img { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px auto; object-fit: cover; }
#magazine-wrap .editor-name { color: #333; font-size: 15px; font-style: normal; font-weight: 700; line-height: 26px; }
#magazine-wrap .editor-role { color: #808080; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; letter-spacing: -0.2px; }
/* 에디터 영역은 오른쪽 영역을 사용 */
@media (min-width: 1200px) {
    #magazine-wrap .editors-wrap {
        padding-left: calc((100% - 1200px) / 2) !important;
        padding-right: calc((100% - 1200px) / 2) !important; 
    }
}

/* 서브페이지 상단 탭 메뉴 및 유틸 바 */
#magazine-wrap .mz-tabs { display: flex; gap: 30px; margin-top: 48px; margin-bottom: 32px; }
#magazine-wrap .mz-tabs a { padding: 15px 0; font-size: 16px; color: #777; font-weight: 500; position: relative; }
#magazine-wrap .mz-tabs a.active { color: var(--point-color); font-weight: 700; }
#magazine-wrap .mz-tabs a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--point-color); }
#magazine-wrap .mz-util-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; }
#magazine-wrap .mz-util-bar .total-count { color: #555; }
#magazine-wrap .mz-util-bar .total-count strong { color: var(--point-color); font-weight: 700; }
#magazine-wrap .mz-util-bar .sort-select { border: none; color: #555; font-size: 14px; outline: none; cursor: pointer; background: transparent; }

/* 페이징 (페이지 번호) */
#magazine-wrap .mz-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 60px; font-size: 16px; }
#magazine-wrap .mz-pagination a { color: #555; text-decoration: none; transition: color 0.2s; }
#magazine-wrap .mz-pagination a:hover { color: #111; }
#magazine-wrap .mz-pagination a.active { color: var(--point-color); font-weight: 700; cursor: default; }
#magazine-wrap .mz-pagination .divider { width: 1px; height: 12px; background-color: #ddd; margin: 0 4px; }


/* --- [ 게시글 상세 보기 CSS ] --- */
#magazine-wrap .mz-top-nav { padding: 20px 0; margin-bottom: 20px; }
#magazine-wrap .btn-back { font-size: 15px; color: #555; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
#magazine-wrap .btn-back:hover { color: var(--text-main); }
#magazine-wrap .article-header { margin-bottom: 30px; }
#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: 20px; }
#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; }

/* 공유하기 버튼 및 팝업 */
#magazine-wrap .share-wrap { position: relative; }
#magazine-wrap .btn-share { display: inline-flex;
    align-items: center; /* 텍스트와 아이콘 수직 중앙 정렬 */
    background: transparent; /* 배경색 제거 (필요시 수정) */
    border: none; /* 기본 테두리 제거 (필요시 수정) */
    cursor: pointer; /* 마우스 오버 시 포인터 모양 */
    font-size: 16px; /* 폰트 크기 */
    color: #333; /* 텍스트 색상 */
    padding: 0;
} 
.btn-share::after {
    content: "";
    display: inline-block;
    width: 16px; /* 아이콘 너비 (필요에 따라 조절) */
    height: 16px; /* 아이콘 높이 (필요에 따라 조절) */
    margin-left: 6px; /* 텍스트와 아이콘 사이 간격 */
    
    /* SVG 파일 경로를 환경에 맞게 수정해 주세요 */
    background-image: url('share_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#magazine-wrap .share-popup { display: none; position: absolute; top: 30px; left: 0; background: #fff; border: 1px solid #eee; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-radius: 8px; padding: 20px; width: 240px; z-index: 100; }
#magazine-wrap .share-popup .popup-title { text-align: center; font-weight: 700; margin-bottom: 16px; color: #333; font-size: 15px; }
#magazine-wrap .share-popup .sns-icons { display: flex; justify-content: space-between; }
#magazine-wrap .share-popup .icon-sns { width: 36px; height: 36px; background-color: #eee; border-radius: 50%; display: inline-block; cursor: pointer; }

/* 본문 및 커버 이미지 */
#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; }

#magazine-wrap .mz-btn-more-wrap { display: none; }

/* --- [ 모바일 반응형 (최대 너비 768px 기준) 강제 적용 버전 ] --- */
@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 15px !important; /* 모바일 화면에 맞게 좌우 여백 축소 */
        overflow-x: hidden !important; /* 요소가 삐져나가서 가로로 스크롤되는 현상 방지 */
    }
    /* 1. 최상단 히어로 배너 (세로 배치) */
    #magazine-wrap .heroSwiper { width: 100% !important; height: auto !important; }
    #magazine-wrap .heroSwiper .swiper-slide { height: auto !important; }
    #magazine-wrap .heroSwiper .hero { flex-direction: column !important; gap: 8px !important; }
    #magazine-wrap .heroSwiper .hero-img { 
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 16 / 9 !important;
        display: block !important; 
        }
    #magazine-wrap .heroSwiper .hero-img img {
        width: 100% !important;
        height: 100% !important;    /* 부모가 계산한 16:9 높이를 그대로 꽉 채움 */
        object-fit: cover !important; /* 비율이 남거나 모자라면 예쁘게 크롭 */
        display: block !important;
    }
    #magazine-wrap .heroSwiper .hero-top { 
        flex-direction: column !important; /* 가로 정렬을 세로 정렬로 변경 */
        align-items: flex-start !important; 
        margin-bottom: 20px !important;
    }
    #magazine-wrap .heroSwiper .hero-content { 
        padding-top: 20px !important; 
        justify-content: flex-start !important; /* 양끝으로 찢어지는 현상 취소 */
        gap: 8px !important; /* 작성자와 제목 사이의 적당한 간격 지정 */
    }
    #magazine-wrap .heroSwiper .hero-tag { font-size: 12px !important; padding: 4px 10px !important; margin-bottom: 10px !important; }
    #magazine-wrap .heroSwiper .hero-title { font-size: 22px !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
    #magazine-wrap .heroSwiper .hero-desc { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 8px !important; }
    #magazine-wrap .heroSwiper .hero-bottom { display: none !important; } /* 시안에 맞춰 버튼 숨김 */
    #magazine-wrap .heroSwiper .mobile-overlay-link {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999; /* 다른 모든 요소를 덮도록 극단적으로 상향 */
    background-color: rgba(255, 255, 255, 0);
        /* 배경색 없이 투명하므로 눈에 보이지 않지만 클릭은 됨 */
    }
    /* 히어로 하단 메타(조회수 등) 시안처럼 폰트 축소 */
    #magazine-wrap .heroSwiper .hero-meta:not(.mo) {
        display: none !important; 
    }
    
    /* 2. 모바일용 통계 정보 보여줌 */
    #magazine-wrap .heroSwiper .hero-meta.mo {
        display: flex !important;
        align-items: center;
        justify-content: flex-end; /* 시안처럼 우측으로 밀기 */
        gap: 32px; /* 조회수, 댓글, 좋아요 사이 간격 */
        margin-top: 0; /* 상위가 flex column일 경우 아래로 밀어냄 */
    }

    /* 개별 통계 항목(조회, 댓글, 좋아요) 가로 정렬 */
    #magazine-wrap .heroSwiper .hero-meta.mo .stat {
        display: inline-flex;
        align-items: center;
        gap: 8px; /* 아이콘과 숫자 사이 간격 */
        font-size: 12px; /* 시안에 맞는 폰트 크기 */
        color: #535353;
    }

    /* 아이콘 크기 고정 (비율 깨짐 방지) */
    #magazine-wrap .heroSwiper .hero-meta.mo .stat img {
        width: 16px; 
        height: auto;
        display: block;
    }
    
    #magazine-wrap .card-overlay {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
    }

    #magazine-wrap .card-overlay .card-img-wrapper {
        border-radius: 12px !important; 
        overflow: hidden;
    }

    #magazine-wrap .card-overlay .card-info {
        position: static !important; 
        background: transparent !important; 
        padding: 12px 0 0 0 !important; 
    }

    #magazine-wrap .card-overlay .card-desc,
    #magazine-wrap .card-overlay .card-meta-bottom {
        display: none !important; 
    }
    
    #magazine-wrap .card-overlay .card-title {
        font-size: 18px !important;
        color: #222 !important;
        margin: 0 !important;
        line-height: 1.4;
        word-break: keep-all;
    }
    
    #magazine-wrap .mz-tabs {
        flex-wrap: wrap !important; /* 가로 공간 모자라면 다음 줄로 넘김 */
        gap: 10px 6px !important; /* 위아래 10px, 좌우 6px 여백 */
        margin-top: 16px !important;
        margin-bottom: 24px !important;
    }
    #magazine-wrap .mz-tabs a {
        padding: 6px 14px !important;
        font-size: 13px !important;
        border: 1px solid #ddd !important;
        border-radius: 20px !important; /* 알약 모양 */
        color: #555 !important;
    }
    #magazine-wrap .mz-tabs a.active {
        background-color: var(--point-color) !important;
        border-color: var(--point-color) !important;
        color: #fff !important;
    }
    #magazine-wrap .mz-tabs a.active::after {
        display: none !important; /* 기존 PC버전의 밑줄 제거 */
    }

    /* 3. 유틸 바 (총 00건 / 최신순) */
    #magazine-wrap .mz-util-bar { font-size: 13px !important; margin-bottom: 16px !important; }
    #magazine-wrap .mz-util-bar .sort-select { font-size: 13px !important; }

    #magazine-wrap .bg-white .grid-4 {
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 12px !important; 
    }

    /* =========================================
       2. 하단 조합원 이야기 (bg-beige 안의 grid-4) & 상단 인기레터(grid-2)
       -> 모바일에서만 가로 스와이프 슬라이더로 변경
    ========================================= */
    #magazine-wrap .grid-2,
    #magazine-wrap .bg-beige .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-2::-webkit-scrollbar,
    #magazine-wrap .bg-beige .grid-4::-webkit-scrollbar {
        display: none !important; 
    }
    
    #magazine-wrap .grid-2 > *,
    #magazine-wrap .bg-beige .grid-4 > * {
        flex: 0 0 85% !important; 
        max-width: 85% !important;
        scroll-snap-align: start !important;
    }

    #magazine-wrap .card-standard .card-img-wrapper img {
        height: auto !important;
        border-radius: 8px !important;
    }
    
    /* 제목 2줄 넘어가면 말줄임표 처리 */
    #magazine-wrap .card-standard .card-title {
        font-size: 18px !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 5. 카드 메타 정보 (날짜, 에디터, 아이콘) */
    #magazine-wrap .card-standard .card-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    #magazine-wrap .card-standard .meta-left {
        display: flex !important;
        flex-direction: column !important; /* 날짜 아래에 에디터 이름 배치 */
        gap: 2px !important;
    }
    #magazine-wrap .card-standard .meta-left .date,
    #magazine-wrap .card-standard .meta-left .editor {
        font-size: 11px !important;
        color: #999 !important;
    }
    #magazine-wrap .card-standard .meta-right {
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    #magazine-wrap .card-standard .meta-right .stat {
        font-size: 11px !important;
        color: #aaa !important;
    }
    #magazine-wrap .card-standard .meta-right .stat img {
        width: 11px !important;
        height: 11px !important;
        margin-right: 2px !important;
    }
    #magazine-wrap .mz-pagination { display: none !important; }
    
    #magazine-wrap .mz-btn-more-wrap { 
        display: block !important; 
        text-align: center; 
        margin-top: 32px; 
    }

    #magazine-wrap .btn-load-more {
        width: 100%; 
        max-width: 320px; 
        padding: 12px; 
        background: #fff; 
        border: 1px solid #ddd; 
        border-radius: 4px; 
        font-size: 14px; 
        color: #555; 
        cursor: pointer;
    }

    /* =========================================
       [메인페이지] 섹션 헤더 (제목 깨짐 방지 및 더보기 버튼 숨김)
    ========================================= */
    #magazine-wrap .section-header {
        display: block !important; /* 기존 PC의 양끝 정렬(flex)을 해제하여 제목이 넓게 공간을 쓰도록 함 */
        margin-bottom: 24px !important;
    }

    #magazine-wrap .section-title-wrap {
        display: flex !important;
        flex-direction: column !important; /* 제목과 부제목을 위아래로 나란히 배치 */
        align-items: flex-start !important;
        gap: 6px !important;
    }

    #magazine-wrap .section-title {
        font-size: 20px !important; /* 모바일에 맞는 적절한 크기 */
        line-height: 1.35 !important;
        word-break: keep-all !important; /* 🚨 단어 중간에 글자가 찢어지며 줄바꿈되는 현상 완벽 방어 */
    }

    #magazine-wrap .section-subtitle {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-break: keep-all !important;
    }
    #magazine-wrap .section-wrapper > .mz-container {
        display: flex !important;
        flex-direction: column !important; /* 전체를 세로로 나열 */
    }
    
    #magazine-wrap .section-wrapper .section-header {
        display: contents !important; /* 🚨 핵심: 헤더 박스를 투명하게 만들어 자식들을 밖으로 꺼냄 */
    }
    
    #magazine-wrap .section-title-wrap {
        order: 1 !important; /* 제목을 제일 위(1번)로 배치 */
        margin-bottom: 20px !important;
    }
    
    /* 각 섹션의 본문 콘텐츠(그리드)를 2번째로 배치 */
    #magazine-wrap .grid-2, 
    #magazine-wrap .grid-featured, 
    #magazine-wrap .grid-4,
    #magazine-wrap .editors-wrap {
        order: 2 !important; 
    }
    /* 숨겨질 뻔했던 버튼을 살려서 3번째(맨 아래) 큼직하게 배치 */
    #magazine-wrap .section-header .btn-more {
        display: block !important; 
        order: 3 !important; /* 맨 밑바닥으로 순간이동! */
        width: 100% !important;
        margin-top: 24px !important;
        padding: 12px 0 !important;
        text-align: center !important;
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    #magazine-wrap .grid-featured {
        display: flex !important;
        flex-direction: column !important; /* 세로로 나열 */
        gap: 32px !important;
    }
    
    /* 1. 상단 큰 카드 (.card-large) */
    /* #magazine-wrap .card-large .card-img-wrapper { margin-bottom: 12px !important; }
    #magazine-wrap .card-large .card-img-wrapper img { aspect-ratio: 16 / 9 !important; height: auto !important; }
    #magazine-wrap .card-large .meta-left { width: 100% !important; justify-content: flex-end !important; } 
    #magazine-wrap .card-large .card-title { font-size: 20px !important; margin: 12px 0 !important; }
    #magazine-wrap .card-large .meta-right { width: 100% !important; justify-content: center !important; gap: 16px !important; margin-top: 12px !important; } */
    #magazine-wrap .card-large .card-info { 
    display: flex !important; 
    flex-direction: column !important; 
}

/* ★ 2. 핵심: 중간 껍데기 역할을 하는 .card-meta를 투명 인간(contents) 처리합니다.
   이렇게 하면 .meta-left와 .meta-right가 .card-title과 같은 형제 요소(Sibling)처럼 취급됩니다. */
#magazine-wrap .card-large .card-meta { 
    display: contents !important; 
}

/* 3. order 속성으로 원하는 배치 순서를 강제로 지정합니다. */
#magazine-wrap .card-large .meta-left { 
    order: 1 !important; 
    width: 100% !important; 
    
    /* 여기서부터 추가/수정된 부분 */
    display: flex !important;           /* 내부 자식들을 가로로 묶어줌 */
    flex-direction: row !important;     /* 강제로 가로 방향 정렬 */
    justify-content: flex-end !important; /* 우측 끝으로 밀기 */
    align-items: center !important;     /* 세로 중앙 높이 맞춤 */
    gap: 12px !important;               /* 날짜와 에디터 사이 간격 (시안에 맞게 숫자 조절) */
    white-space: nowrap !important;     /* 글자가 많아도 절대 줄바꿈 하지 않음 */
    
}

#magazine-wrap .card-large .card-title { 
    order: 2 !important; /* 날짜/에디터 밑으로 이동! */
    margin: 16px 0 !important;
    text-align: left !important; 
    font-size: 20px;
}

#magazine-wrap .card-large .meta-right { 
    order: 3 !important; /* 타이틀 밑으로 이동! */
    width: 100% !important; 
    justify-content: flex-end !important; 
    gap: 32px !important;
     padding-bottom: 40px !important; /* ★수정: 아이콘 공간을 위해 기존 20px에서 50px 정도로 넉넉히 늘림 */
border-bottom: 1px solid #eee !important; 
    
}
#magazine-wrap .stat {
    color : #333 !important; 
    display: inline-flex !important;
    align-items: center !important; /* 아이콘과 숫자의 세로 중앙을 완벽하게 맞춤 */
    gap: 8px !important; /* 아이콘과 숫자 사이의 간격 */
}

/* 2. SVG 아이콘 깨짐 및 찌그러짐 방지 */
#magazine-wrap .stat img {
    width: 16px !important; /* 시안에 맞게 아이콘 크기 고정 (예: 14px~18px) */
    height: auto !important; /* 가로세로 동일하게 부여 */
    flex-shrink: 0 !important; /* ★핵심: 화면이 좁아져도 절대 찌그러지지 않도록 방어 */
    object-fit: contain !important; /* 이미지가 박스 안에서 잘리지 않도록 보호 */
    vertical-align: middle !important; 
}
    /* 2. 하단 작은 가로 카드 (.card-horizontal) */
#magazine-wrap .card-horizontal { 
        position: relative !important; /* ★추가: absolute의 기준점이 됨 */
        display: flex !important;
        gap: 16px !important; 
        align-items: flex-start !important;
        padding-bottom: 70px !important; /* ★수정: 아이콘 공간을 위해 기존 20px에서 50px 정도로 넉넉히 늘림 */
        border-bottom: 1px solid #eee !important; 
    }
    
    #magazine-wrap .card-horizontal:last-child { 
        border-bottom: none !important; 
        padding-bottom:70px !important; /* 마지막 요소도 아이콘 공간 확보 */
    }
    
    /* 2. 나머지 이미지와 인포 영역은 그대로 유지 */
    #magazine-wrap .card-horizontal .card-img-wrapper { 
        width: 100% !important; /* ★추가 */
        height: 100% !important; /* ★추가 */
        object-fit: cover !important; /* ★추가: 찌그러짐 완벽 방지 (영역에 맞게 잘라줌) */
        aspect-ratio: 16 / 9 !important; 
        border-radius: 8px !important; 
        display: block !important; /* ★추가: 이미지 하단 미세 여백 제거 */
    }
    #magazine-wrap .card-horizontal .card-img-wrapper img { aspect-ratio: 16 / 9 !important; border-radius: 8px !important; }
    #magazine-wrap .card-horizontal .card-info { flex: 1 !important; display: flex !important; flex-direction: column !important; }
    
    #magazine-wrap .card-horizontal .top-meta { justify-content: flex-end !important; } 
    #magazine-wrap .card-horizontal .card-title { font-size: 15px !important; margin: 6px 0 !important; line-height: 1.4 !important; }

    /* ★ 3. 핵심: 아이콘 뭉치를 우측 하단으로 강제 고정 */
    #magazine-wrap .card-horizontal .bottom-meta { 
        position: absolute !important; /* 텍스트 박스에서 탈출! */
        bottom: 20px !important; /* 카드 맨 아래 선(border)에서 살짝 위로 띄움 */
        right: 0 !important; /* 오른쪽 끝으로 딱 붙임 */
        width: 100% !important; /* 왼쪽 이미지 영역 아래까지 가로 전체를 쓰도록 확장 */
        justify-content: flex-end !important; /* 내부 아이콘들은 우측 정렬 */
    }

   /* =========================================
       [메인 페이지 전용] "오늘의 치유식탁" 리스트 
       -> 순수 CSS로 1개 크게, 2개 작게 분리하기
    ========================================= */
    .page-main #magazine-wrap .bg-white .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* 🎯 1번째 카드 (크게 보여주기) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) {
        display: block !important;
        border-bottom: 1px solid #DADADA !important; 
        padding-bottom: 24px !important;
    }
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-img-wrapper {
        margin-bottom: 12px !important;
        max-width: 100% !important;
    }
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-img-wrapper img {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-title {
        font-size: 20px !important;
        margin: 12px 0 !important;
    }
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-meta {
        flex-direction: row !important; /* 가로 배치 */
        justify-content: space-between !important;
    }
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .meta-left,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .meta-right {
        width: auto !important;
        justify-content: flex-start !important;
    }

/* 🎯 1번째 카드 (크게 보여주기) - 컨텐츠 묶음 세로 정렬 */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ★ 껍데기 무효화: 내부 요소들을 형제 레벨로 풀어줌 */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-meta {
        display: contents !important; 
    }

    /* 1. 날짜/에디터 (순서 1번, 상단 우측 정렬) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .meta-left {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;     /* 무조건 가로(기차놀이) 방향으로 세움 */
        flex-wrap: nowrap !important;       /* 공간이 좁아도 밑으로 떨어지지 않게 막음 */
        align-items: right !important;     /* 글자들의 세로 높낮이 중앙 정렬 */
        width: 100% !important;
        justify-content: flex-end !important; 
        gap: 12px !important;
        margin-top: 12px !important;
        white-space: nowrap !important;
    }
/* 2. 타이틀 (순서 2번, 중앙 정렬 및 폰트 크기 업) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .card-title {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important; 
        font-size: 24px !important; /* 시안처럼 폰트 큼직하게 */
        font-weight: bold !important;
        margin: 16px 0 !important;
        word-break: keep-all;
    }

    /* 3. 아이콘 뭉치 (순서 3번, 하단 중앙 정렬) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(1) .meta-right {
        order: 3 !important;
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important; /* 아이콘들 가운데 정렬 */
        gap: 20px !important;
    }

/* 🎯 2번째, 3번째 카드 (작은 가로형으로 보여주기) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2),
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) {
        position: relative !important; /* ★ 기준점 추가 (아이콘을 가두기 위해 필수) */
        display: flex !important; 
        flex-direction: row !important; 
        gap: 16px !important;
        align-items: flex-start !important; /* ★ 상단 정렬 (이미지 늘어남 방지 및 하단 여백 확보) */
        border-bottom: 1px solid #eee !important;
        padding-bottom: 50px !important; /* ★ 아이콘이 들어갈 바닥 공간 넉넉히 확보 */
    }
    
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) {
        border-bottom: none !important; 
        /* padding-bottom: 0 !important; 삭제 (마지막 카드도 아이콘 공간이 필요하므로 삭제해야 함) */
    }

    /* 2, 3번째 카드의 상세 레이아웃 (이미지 40%) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .card-img-wrapper,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .card-img-wrapper {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        margin-bottom: 0 !important;
    }
    
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .card-img-wrapper img,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .card-img-wrapper img {
 width: 100% !important;
        height: auto !important; /* ★ 핵심: 100%에서 auto로 변경! (옆에 글자 길이에 영향 안 받음) */
        object-fit: cover !important; 
        aspect-ratio: 16 / 9 !important; /* 이제 16:9 비율이 정상 작동함 */
        border-radius: 8px !important;
        display: block !important;
    }
    
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .card-info,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .card-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    /* HTML 순서(날짜 -> 타이틀 -> 아이콘) 강제 변경을 위해 card-meta 껍데기 해제 */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .card-meta,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .card-meta {
        display: contents !important; 
    }

    /* 1. 날짜 / 에디터 (우측 정렬) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .meta-left,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .meta-left {
order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;     /* 강제로 가로 방향 세움 */
        flex-wrap: nowrap !important;       /* 영역이 좁아도 다음 줄로 안 넘김 */
        justify-content: flex-end !important;
        align-items: center !important;     /* 세로 높낮이 중앙 맞춤 */
        gap: 8px !important;                /* 작은 카드이므로 간격을 살짝 좁힘 (필요시 조절) */
        white-space: nowrap !important;
    }

    /* 2. 타이틀 */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .card-title,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .card-title {
        order: 2 !important;
        font-size: 15px !important;
        margin: 6px 0 !important;
        line-height: 1.4 !important;
    }

    /* ★ 3. 핵심: 아이콘 영역을 우측 하단 바닥으로 고정 */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(2) .meta-right,
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(3) .meta-right {
        position: absolute !important; /* 박스 탈출! */
        bottom: 16px !important; /* 카드 맨 아래 바닥에서 살짝 위로 */
        right: 0 !important; /* 오른쪽 끝으로 부착 */
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important; /* 내부 아이콘들 우측 정렬 */
        gap: 16px !important;
    }

    /* 🎯 4번째 이후 카드 (모바일에서는 숨김 처리) */
    .page-main #magazine-wrap .bg-white .grid-4 > a:nth-child(n+4) {
        display: none !important;
    }
    /* =========================================
       [메인 페이지] 에디터 소개 섹션 모바일 최적화
    ========================================= */
    #magazine-wrap .editors-wrap {
        gap: 16px !important; /* 에디터 사이 간격 축소 */
        padding: 20px 0 20px 0 !important; /* 좁은 화면에 맞게 패딩 조절 */
    }
    
    #magazine-wrap .editor-item {
        width: 90px !important; /* 아이템 전체 너비 축소 */
    }
    
    #magazine-wrap .editor-img {
        width: 76px !important; /* 프로필 이미지 크기 축소 */
        height: 76px !important;
        margin-bottom: 10px !important;
    }
    
    #magazine-wrap .editor-name {
        font-size: 14px !important; /* 이름 폰트 축소 */
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
    }
    
    #magazine-wrap .editor-role {
        font-size: 11px !important; /* 소속/직책 폰트 축소 */
        line-height: 1.3 !important;
        color: #888 !important;
        letter-spacing: -0.5px !important;
        word-break: keep-all !important; /* 텍스트가 예쁘게 두 줄로 떨어지도록 설정 */
    }
    #magazine-wrap .editors-wrap {
        /* 모바일에서는 30px 간격이 너무 넓어 20px로 살짝 줄이는 것을 추천합니다 */
        gap: 20px !important; 
    }

    #magazine-wrap .editor-item {
        /* ★ 핵심 계산식: (화면전체너비(100vw) - 왼쪽패딩(20px) - 간격 2개(20px*2=40px)) / 2.5개 */
        flex: 0 0 calc((100vw - 60px) / 2.5) !important;
        width: calc((100vw - 60px) / 2.5) !important;
    }

    #magazine-wrap .editor-img {
        /* 고정 120px을 풀고 유동적으로 반응하게 만듦 */
        width: 100% !important; 
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* 완벽한 원형 비율 유지 */
        max-width: 120px !important; /* 너무 커지는 것 방지 */
    }
    
    /* 필요시 모바일 폰트 크기 미세 조정 */
    #magazine-wrap .editor-name {
        font-size: 14px !important;
    }
    #magazine-wrap .editor-role {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}