/* ==========================================================================
issue_detail.php
========================================================================== */

.main_container{ max-width:1200px; margin:0 auto; padding:180px 0px 0px 0px; box-sizing:border-box; background:#fff; }
.main_cover_showcase{ display:flex; gap:40px; align-items:flex-start; margin-bottom:40px; padding-bottom:5px; border-bottom:1px solid #f1f5f9;}
.cover_img_box{ width:320px; flex-shrink:0; }
.cover_img_box img{ width:100%; display:block; border-radius:3px; box-shadow:0 10px 20px rgba(0,0,0,.1); border: 1px solid #ccc; transition:.3s;}
.book_info_spec_box{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:18px 24px; max-width:100%; margin-top:20px;}
.book_info_spec_box ul{ margin:0; padding:0; list-style:none;}
.book_info_spec_box li{ display:flex; font-size:15px; margin-bottom:8px;}

/* 우측 정보 영역 스타일 */
.cover_info_right { flex: 1; min-width: 0; padding-left: 20px; width: 100%; } 
.issue_title{ font-size:23px; font-weight:700; margin:0 0 20px; color:#15803d; }
.brief_intro_box{ padding:18px 24px; margin: 20px 0 50px 0; color: #444; line-height: 2.0rem; font-size: 15px; text-align: justify; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px;}

.content_row{margin-bottom:25px;}
.sec_title{font-size:18px; font-weight:800; margin:0 0 0px; padding-bottom:8px; border-bottom:3px solid #111; color:#111;}
.latest_item_row{ display:flex; justify-content:space-between;  align-items: flex-start; padding:2px 0; border-bottom:1px solid #f1f5f9;}
.item_title_link{ font-size:15px; font-weight:700; color:#111; text-decoration:none; border: 0px solid red;}
.item_title_wrapper {width: 250px; flex-shrink: 0; padding-top: 2px; }
.item_content_wrapper { flex: 1;  display: flex; justify-content: space-between; align-items: center; padding-left: 0px;}
.item_title_area_link { display: flex !important; flex-direction: row !important; align-items: center !important; white-space: nowrap !important;  overflow: hidden !important;} 
.item_sub_only_link{ font-size:15px; font-weight:500;text-decoration:none; border: 0px solid green; white-space: nowrap !important; flex-shrink: 0;}
.item_right{ display:flex; align-items:center; gap:15px; padding-left:20px; border: 0px solid gold; flex-shrink: 0;}
.item_author{font-size:14px; color:#334155;}
.badge_free{ display:inline-block; padding:0px 6px; border-radius:2px; background:#c13584; color:#fff; font-size:13px;font-weight:600;}
.hide-title {display: none !important;}
.item_title_link {display: block;}
.item_sub_desc_box { border: 0px solid blue; color: #555 !important; font-size: 13px !important;  display: inline-block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-left: 10px !important; vertical-align: middle !important;
}

/* 모달창*/
.cover_modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.modal_content_box { position: relative; background: #fff; padding: 0 !important; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: inline-block;  width: auto;  height: auto;  max-width: 30%; max-height: 100vh;}
.modalSwiper {width: 100%; height: 100%; border-radius: 10px; overflow: hidden;}
.modalSwiper img { width: 100%; height: auto; display: block;}
.modal_close_btn { position: absolute; top: -40px; right: 0; background: none; border: none; font-size: 30px; font-weight: 800; cursor: pointer; color: #fff; z-index: 10005; }
.swiper-button-next, .swiper-button-prev { color: orange !important; width: 50px; height: 50px; z-index: 10002;}

.bookclub_join_wrap{ margin-top:15px; display:flex; gap:10px; align-items:center;}
.bookclub_join_btn{ display:inline-block; padding:8px 16px; background:#16a34a; color:#fff; text-decoration:none; border-radius:4px; font-size:14px; font-weight:700;}
.bookclub_info_btn{ display:inline-block; padding:8px 16px; background:#fff; color:#16a34a; border:1px solid #16a34a; text-decoration:none; border-radius:4px; font-size:14px; font-weight:700;}
.bookclub_join_btn:hover{ background:#15803d;}
.bookclub_info_btn:hover{ background:#f0fdf4;}
.book_buy_btn{ display:inline-block; padding:8px 16px; background:#fff; color:#c13584;  border:1px solid #c13584; text-decoration:none; border-radius:4px; font-size:14px; font-weight:700;}


/* ==========================================================================
sc_archive.php
========================================================================== */

#main_toc_trigger_zone{ display:flex; justify-content:space-between; align-items:center; padding:25px 0; margin-top:40px; border-top:1px solid #111; border-bottom:1px solid #f1f5f9; }
.toc_read_issue{ text-decoration:none; color:#395796; font-weight:600;}
/* 통합 토글 박스 디자인 */
.toc_control_box { display: flex; justify-content: space-between; align-items: center; border: 0px solid #e2e8f0; padding: 12px 0px; margin-top: 40px; }
/* 왼쪽 토글 버튼 */
.btn_toggle_all { background: none; border: none; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; padding: 0;}
/* 상단/하단 버튼 박스 통합 정렬 */
.toc_control_box { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin-top: 40px; border-top: 1px solid #eee; /* 하단에도 라인 추가 시 보기 좋음 */}
/* 닫기 버튼 스타일 보정 */
.btn_close_all { background: none; border: none; font-size: 14px; font-weight: 600; cursor: pointer; color: #111; }
/* 오른쪽 링크 그룹 */
.toc_right_links { display: flex; gap: 20px;}
.link_text_style { text-decoration: none; color: #395796; font-weight: 600;  font-size: 14px;}

/* 지난호 대략보기 디자인 */
.archive_container { max-width: 1200px; margin: 0 auto; padding: 10px 0px  60px 0px; }
.archive_main_title { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 50px; }
.archive_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.archive_item { position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 2번 이미지 같은 음영 */ border-radius: 8px; overflow: hidden;  transition: all 0.3s ease; }
.archive_item:hover { box-shadow: 0 20px 30px rgba(0,0,0,0.2);  transform: translateY(-5px);}
/* 2. 이미지 겹침 처리 */
.archive_item a { position: relative; display: block; }
.img_main { display: block; width: 100%; transition: opacity 0.4s ease; }
.img_hover {  position: absolute; top: 0; left: 0; width: 100%;  opacity: 0; transition: opacity 0.4s ease;}
/* 3. 마우스 오버 시 교체 */
.archive_item:hover .img_main { opacity: 0; }
.archive_item:hover .img_hover { opacity: 1; }
.archive_item img { width: 100%; border: 1px solid #e2e8f0; border-radius: 4px; display: block; }
.archive_info { margin-top: 15px; padding: 0px 10px 15px 10px;  text-align: left; /* 글자를 왼쪽 정렬 유지 */}
.archive_subject { font-size: 16px; font-weight: 600; color: #111; margin: 0; line-height: 1.4; }
.archive_date { font-size: 13px; color: #64748b; margin-top: 5px; }

@media(max-width:992px) { .archive_grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
 MOBILE
   ========================================================================== */

@media(max-width:768px){
.main_container{ padding:20px 15px;}
.main_cover_showcase{ flex-direction:column; }
.cover_info_right { padding-left: 0px;} 
.cover_img_box{width:100%;}
.latest_item_row { flex-wrap: nowrap !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 2px 0 !important; width: 100% !important; }
.item_right { gap: 1px; padding-left: 2px;  flex-shrink: 0;}
.badge_free{ padding:1px 8px; font-size:11px; font-weight:600;}
#main_toc_trigger_zone{flex-direction:column; gap:12px; }
.item_title_link{ border: 0px solid red; padding: 5px 0px;}
.item_title_wrapper { width: 100% !important; margin-bottom: 5px !important; }
.item_content_wrapper { width: 100% !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; }
.item_sub_only_link { white-space: normal !important; word-break: break-all !important;  border: 0px solid red; }
.item_title_area_link {display: block !important; white-space: normal !important; }
.item_sub_desc_box { border: 0px solid blue; display: block !important; white-space: normal !important; word-break: keep-all !important; margin-top: 5px !important;margin-left: 0 !important; padding-left: 0 !important; }
.item_right { width: auto !important; flex-shrink: 0 !important; padding-left: 20px !important; gap:20px;}
}