@charset "utf-8";

/* ==================================================
   1. 기본 설정 (Base)
================================================== */
.oc_board_wrap { 
    font-size: 12px; 
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; 
    letter-spacing: -0.05em; 
}
.oc_board_wrap a { text-decoration: none; color: inherit; }
.oc_board_wrap * { box-sizing: border-box; }


/* ==================================================
   2. 목록(List) 페이지 스타일
================================================== */
.oc_section { 
    display: block;
    width: 100%;
    margin-bottom: 20px; 
    position: relative;
    clear: both;
}

.oc_header_bar {
    position: relative;
    background: #607663;
    border-radius: 15px;
    height: 30px;
    line-height: 30px;
    color: #FEF9F5;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}
.oc_header_bar .cat_title { font-size: 14px; }

.oc_list_ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
}
.oc_list_ul:after {
    content: "";
    display: block;
    clear: both;
}

.oc_list_item {
    float: left;
    width: 19%;
    margin-right: 1.2%;
    margin-bottom: 40px;
    box-sizing: border-box;
    text-align: left;
}

.oc_list_item:nth-child(5n) { margin-right: 0; }
.oc_list_item:nth-child(5n+1) { clear: both; margin-left: 0; }

@media (max-width: 1200px) {
    .oc_list_item { width: 23%; margin-right: 2.6%; }
    .oc_list_item:nth-child(5n) { margin-right: 2.6%; } 
    .oc_list_item:nth-child(5n+1) { clear: none; }
    .oc_list_item:nth-child(4n) { margin-right: 0; }
    .oc_list_item:nth-child(4n+1) { clear: both; }
}

@media (max-width: 768px) {
    .oc_list_item { width: 48%; margin-right: 4%; }
    .oc_list_item:nth-child(4n) { margin-right: 4%; } 
    .oc_list_item:nth-child(4n+1) { clear: none; }
    .oc_list_item:nth-child(2n) { margin-right: 0; }
    .oc_list_item:nth-child(2n+1) { clear: both; }
}


/* ==================================================
   3. 공통 요소 (Common)
================================================== */
.btn_add_post {
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    line-height: 28px;
    transition: color 0.3s;
}
.btn_add_post:hover { color: #eee; }

.item_top_info {
    display: block;
    overflow: hidden;
    color: #888;
    font-size: 11px;
    margin-bottom: 2px;
}
.info_year { float: left; }
.info_comm { float: right; }

.item_img_box {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    margin-bottom: 8px;
    position: relative;
    background: #f8f8f8;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
	/* [수정] 글자 영역보다 위에 오도록 설정 */
    z-index: 3 !important;
}
.item_img_box_inner {
    width: 100%;
    padding-top: 133.33%;
    position: relative;
}
.item_img_box img {
    position: absolute;
    top: 0; left: 0;
	width: 100% !important;  /* 가로 꽉 채우기 */
    height: 100% !important; /* 세로 꽉 채우기 */
    
    /* [핵심] 비율 유지하며 빈틈없이 채우기 (작으면 확대됨) */
    object-fit: cover !important; 
    
    /* 인물 사진일 경우 얼굴 위주로 보이도록 상단 기준 정렬 */
    object-position: center top !important; 
    
    transition: transform 0.3s ease;
}
.item_img_box:hover img { transform: scale(1.08); }

.item_bottom_info { line-height: 1.4; text-align: left; }
.community_name {
    font-weight: 800;
    color: #222;
    font-size: 13px;
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char_name {
    color: #444;
    font-size: 12px;
    display: block;
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.relation_name {
    color: #666;
    font-size: 11px;
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.heart_icon { color: #cc0000; font-size: 10px; margin-right: 2px; vertical-align: middle; }
.circle_icon { color: #888; font-size: 10px; margin-right: 2px; vertical-align: middle; }

.empty_list { 
    clear: both;
    text-align: center; 
    padding: 50px 0; 
    color: #999; 
    background: #fafafa;
    border-radius: 10px;
    font-size: 13px;
    width: 100%;
    float: none;
}


/* ==================================================
   4. 상세(View) 페이지 레이아웃
================================================== */

.oc_view_wrap {
    width: 100% !important;
    max-width: 1250px !important;
    margin: 0 auto;             /* 수정: 상하 마진 제거 */
    margin-top: 0 !important;    /* 수정: 3vh에서 0으로 변경하여 바짝 올림 */
    margin-bottom: 0 !important;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
    height: 95vh;               /* 수정: 여백이 줄어든 만큼 높이 확보 */
    display: flex;
    justify-content: center;
}

.view_flex_container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 !important; /* 겹치기 위해 간격을 0으로 조정 */
    position: relative;
    padding-top: 10px; 
}

/* [왼쪽] 이미지 영역 */
.left_img_area {
    width: 670px;
    flex-shrink: 0 !important;
    position: relative;
    margin-top: -20px !important;
    /* [핵심] 오른쪽으로 100px만큼 밀어서 겹치게 함 */
    margin-right: -100px; 
    
    /* 정보 카드보다 뒤로 가게 설정 */
    z-index: 1; 
    
    transition: all 0.3s ease-in-out;
}

.img_slide_wrap {
    width: 670px;
    height: 800px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.img_item {
    width: 100%;
    height: 100%;
    display: none;
    align-items: flex-start;
    justify-content: center;
	transition: opacity 0.3s ease-in-out !important; /* 0.3초 동안 투명도 변화 */
    opacity: 0; /* 기본적으로 투명하게 시작 (active일 때 1이 됨) */
}
.img_item.active { 
	display: flex; 
	opacity: 1 !important;
}

.responsive_img {
    width: 100%;
    height: auto; /* 세로가 짧을 경우 자기 크기 유지 */
	max-height: 100%;
    object-fit: contain;
	/* 상단 밀착을 위해 추가 */
	object-position: top center;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
    cursor: zoom-in;
}
.responsive_img:hover { transform: scale(1.03); }

/* [오른쪽] 정보 영역 */
.right_info_area {
    width: 450px !important;
    flex-shrink: 0 !important;
    position: relative;
    
    /* 이미지보다 위에 오도록 설정 */
    z-index: 2; 
}

.nav_top_right {
    position: absolute;
    top: -30px;                 /* 수정: 전체 여백이 줄어든 것에 맞춰 위치 조정 */
    right: 0;
    z-index: 10;
}

.btn_back_list img {
    width: 12px !important;
    height: 20px !important;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.btn_back_list:hover img { opacity: 1; }

.info_card {
    background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(4px); /* 배경 흐림 효과 추가 (선택사항) */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    height: 720px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px !important; /* 수정: 20px에서 5px로 대폭 축소 */
}

.card_header {
    background: #e0e0e0;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
}

.card_body {
    padding: 0 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ch_year, .ch_source { font-size: 11px; color: #555; }
.ch_comm {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    color: #333;
    width: 50%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title_section { 
    text-align: center; 
    margin-top: 30px !important; 
    margin-bottom: 10px !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* 한글과 영어 이름 사이 간격 확보 */
}

.char_name_kr { 
    font-size: 28px !important; 
    font-weight: 800 !important; 
    color: #000 !important; 
    line-height: 1.2 !important; /* 겹침 방지 */
    margin: 0 !important; 
}

.char_name_en { 
    font-size: 13px !important; 
    color: #444 !important; 
    line-height: 1.2 !important; 
    margin: 0 !important; 
}

.relation_info { 
	text-align: right; 
	font-size: 11px; 
	color: #666; 
	font-weight: bold; 
	margin-top: 0px; 
	margin-right: 10px; 
	line-height: 1.2;
}

.card_hr { border: 0; height: 1px; background: #ccc; margin: 0 0 20px 0; }

.memo_content {
    font-size: 12px; line-height: 1.7; color: #333; text-align: justify;
    overflow-y: auto; flex-grow: 1; padding: 0 10px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.memo_content::-webkit-scrollbar { display: none; }

.card_footer { text-align: right; padding: 5px 10px; }
.btn_txt_action { font-size: 11px; color: #607663; margin-left: 8px; }


/* ==================================================
   5. 이미지 탭 스타일 (Scale 확대 방식 복구)
================================================== */

.img_tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; 
    justify-content: flex-start !important;
    padding: 0 5px !important;
    margin-top: 0 !important; /* 카드와 붙이기 위해 0으로 설정 */
}

.oc_view_wrap .tab_btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important; 
    border: 1px solid #ddd !important;
    overflow: hidden !important; /* [중요] 확대해서 삐져나가는 부분 자르기 */
    cursor: pointer !important;
    background: #fff !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important; /* flex 자식으로서 가로배치 유지 */
}

.tab_btn.active { 
    /* 테두리 색상을 요청하신 #607663으로 변경 */
    border: 2px solid #607663 !important; 
    
    /* 선택된 느낌을 더 강조하고 싶다면 그림자 색상도 살짝 맞추면 예뻐요 (선택사항) */
    box-shadow: 0 0 5px rgba(96, 118, 99, 0.3);
}

.oc_view_wrap .tab_thumb {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

/* 저번에 성공했던 핵심 코드 적용 */
div.oc_view_wrap div.tab_btn div.tab_thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    max-width: none !important;
    
    /* [핵심] 이미지를 강제로 확대해서 중앙 캐릭터만 보이게 함 */
    transform: scale(3.5) !important; 
    transform-origin: 50% 30% !important;
    
    /* 비율 유지 */
    object-fit: contain !important; 
}

/* ==================================================
   6. 반응형 및 특수 효과 (여백 감소에 따른 배율 조정)
================================================== */
@media (max-height: 900px) { 
    .oc_view_wrap { 
        transform: scale(0.9);  /* 수정: 0.85에서 0.9로 (상단 여백이 줄어 여유 생김) */
        margin-top: 0 !important; 
    } 
}
@media (max-height: 768px) { 
    .oc_view_wrap { 
        transform: scale(0.8);  /* 수정: 0.75에서 0.8로 */
        margin-top: 0 !important; 
    } 
}


.oc_view_wrap .tab_thumb { 
    width: 100% !important; 
    height: 100% !important; 
    display: block !important; 
}

/* ==================================================
   목록 가독성 향상 (밝은 그라데이션 버전)
================================================== */

/* 1. 글자 영역에 밝은 아이보리 그라데이션 추가 */
.item_bottom_info {
    line-height: 1.4;
    text-align: left;
    padding: 15px 10px 10px 10px; /* 위쪽 패딩을 더 주어 그라데이션 공간 확보 */
    
    /* 위는 투명하고 아래로 갈수록 요청하신 #FEF9F5 색상이 진해짐 */
    background: linear-gradient(
        to bottom, 
        rgba(254, 249, 245, 0) 0%, 
        rgba(254, 249, 245, 0.3) 20%, 
        rgba(254, 249, 245, 0.65) 100%
    );
    border-radius: 0 0 10px 10px;
	backdrop-filter: blur(2px); /* 배경 흐림 효과 추가 (선택사항) */
    margin-top: -20px; /* 이미지와 자연스럽게 겹치도록 조정 */
    position: relative;
	    /* 정보 카드보다 뒤로 가게 설정 */
		position: relative;
    z-index: 2; 
}

/* 2. 어두운 계열의 글자색 복구 및 가독성 설정 */
.community_name {
    font-weight: 800;
    color: #222 !important; /* 다시 어두운 색으로 */
    font-size: 13px;
    display: block;
}

.char_name {
    color: #222 !important; /* 다시 어두운 색으로 */
    font-size: 12px;
    margin-bottom: 3px;
    display: block;
}

.relation_name {
    color: #444 !important; /* 다시 어두운 색으로 */
    font-size: 11px;
    display: block;
}

/* 3. 아이콘 색상 복구 */
.heart_icon { color: #cc0000 !important; }
.circle_icon { color: #666 !important; }

/* ==================================================
   본문내 스포일러 체크
================================================== */

/* 본문 내 스포일러 스타일 */
.spoiler_box {
    margin: 10px 0;
    border: 1px dashed #607663;
    border-radius: 8px;
    background: rgba(96, 118, 99, 0.05);
    overflow: hidden;
}

.spoiler_box summary {
    padding: 8px 15px;
    background: #607663;
    color: #FEF9F5;
    cursor: pointer;
    font-weight: bold;
    list-style: none; /* 기본 삼각형 숨기기 */
    outline: none;
    transition: background 0.3s;
}

.spoiler_box summary:hover {
    background: #4a5d4c;
}

/* 열렸을 때 내용 박스 */
.spoiler_content {
    padding: 15px;
    font-size: 12px;
    line-height: 1.6;
    color: #444;
    border-top: 1px dashed #607663;
}

/* 삼각형 아이콘 대신 문구 추가 (선택사항) */
.spoiler_box summary::-webkit-details-marker { display: none; }
.spoiler_box summary::before {
    content: "▼ ";
    font-size: 10px;
    margin-right: 5px;
}
.spoiler_box[open] summary::before {
    content: "▲ ";
}

/* 체크박스 스포일러 컨테이너 */
.check_spoiler_wrap {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    border-radius: 5px;
}
/* 체크박스 스포일러 수정 */
.check_content {
    display: block !important; /* 에디터가 inline으로 바꿀 경우 대비 */
    filter: blur(10px) !important;
    opacity: 0.1; /* 아예 투명하게 가깝게 조절 */
    pointer-events: none;
    transition: all 0.4s ease;
    margin-top: 10px;
    color: transparent !important; 
    text-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}

/* 체크됐을 때 확실하게 보이게 수정 */
.spoiler_chk:checked ~ .check_content,
.spoiler_chk:checked + label + .check_content {
    filter: blur(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #444 !important;
    text-shadow: none !important;
}
.spoiler_chk { cursor: pointer; }
.spoiler_label { cursor: pointer; font-weight: bold; color: #607663; }

/* 블러 스포일러 스타일 */
.blur_spoiler {
    filter: blur(6px) !important; /* 블러 강도를 조금 높임 */
    transition: filter 0.3s ease;
    cursor: help;
    background: rgba(0,0,0,0.05); /* 살짝 배경을 깔아 영역 표시 */
    border-radius: 4px;
    color: transparent !important; /* 글자를 투명하게 해서 블러 효과 극대화 */
    text-shadow: 0 0 8px rgba(0,0,0,0.5) !important;
}

.blur_spoiler:hover {
    filter: blur(0) !important;
    color: inherit !important; /* 마우스 올리면 원래 글자색 복구 */
    text-shadow: none !important;
}