/* ==========================================================================
   OSEHO THEME
   ========================================================================== */

html,body{width:100%!important;margin:0;padding:0;overflow-x:hidden;background:#fff;font-family:'Noto Sans KR',sans-serif;-webkit-text-size-adjust:none}
.main_visual_sec { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 80px; border-bottom: 1px solid #e5e7eb; width: 100%; margin: 0 auto; box-sizing: border-box; }
.visual_cover { max-width: 340px; width: 100%; margin: 0 auto 40px auto; display: flex; justify-content: center; }
.visual_cover img { width: 100%; height: auto; box-shadow: 0 30px 60px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; display: block; }
.visual_info { max-width: 780px; margin: 0 auto; width: 100%; }
.info_edition { display: block; font-size: 15px; color: #c2410c; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.5px; }
.info_title { font-family: 'Noto Serif KR', serif; font-size: 42px; color: #111; margin: 0 0 25px 0; font-weight: 700; letter-spacing: -1px; } /* 창비 고유의 깊이감 있는 서체 스타일 */
.info_desc { font-size: 17px; color: #475569; line-height: 1.85; margin: 0 0 40px 0; word-break: keep-all; font-weight: 300; letter-spacing: -0.3px; }
.info_btn { display: inline-block; padding: 14px 45px; background: #111; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; letter-spacing: 0.5px; }
.info_btn:hover { background: #c2410c; }

/* ==========================================================================
   숨김영역
   ========================================================================== */

#tnb,#hd_admin,.hd_sch_wr,#hd_sch,
#ol_be2,.daon_outlogin,#side_login,.side_login_box,
#ol_after,#ol_before,.outlogin_rect,.side_box,
.header_action,.hd_login_info,.util_menu,.top_util,
#hd .search_btn,#hd .member_btn{
display:none!important;
visibility:hidden!important;
}

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

.main_container{ max-width:1200px; margin:0 auto; padding:10px 0px 60px 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;}
.issue_title{ font-size:23px; font-weight:700; margin:0 0 20px; color:#16a34a; }
.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%; } 
.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:#2563eb; 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;}


/* ==========================================================================
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:#2563eb; 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; justify-content: flex-end;}
.link_text_style { text-decoration: none; color: #2563eb; 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;}
}