@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
/* SIR 지운아빠 */


#lightbox {
position:absolute;
top:0; 
left:0; 
min-width:100%; 
text-align:center;

z-index:999999;
}
#lightbox p {
color:#fff; 
margin-right:20px; 
font-size:12px; 
}
#lightbox img {
padding:15px;
margin-top:25px;
background:url(img/overlay.png) repeat;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 
max-width:100%;
}


.error				{ position:relative; text-align: center; line-height: 1.8em; padding-top: 70px; }
.error:before		{ /*content:"\ea0e"; display:block; position: absolute; font-family: 'icon'; font-size: 50px; line-height: 50px; top: 0;left:0; right: 0; text-align: center; */}
.error .btn-group	{ padding: 20px 0 0; }

.ui-mmb-list-category		{ text-align: center; }
.ui-mmb-list-category a		{ display: inline-block; position: relative; padding: 6px 10px; font-weight: bold; border-radius: 3px; }
.ui-mmb-list-category a.on:before	{/* content: "\ea10"; font-family: 'icon'; padding-right: 5px; */}

.ui-mmb-button		{ text-align: center; padding-top: 10px; }

.help.ui-btn		{ width: 100%; padding: 2px; line-height: 1.2em; border-radius: 3px; margin-bottom:5px;}
.ui-paging			{ margin-bottom:0; padding-bottom:0;}

.ui-btn.small		{height:22px !important; line-height:20px !important; font-size:12px !important; }

/***************************************
	List Page
****************************************/

.connect-wiget	{ min-height: 40px; text-align: center; line-height: 40px; }


/** Notice Box **/
.board-notice	{ width: 200px; padding-bottom: 5px; margin: 0 auto; text-align: center; box-sizing: border-box; border-radius:10px;}


/** Category List **/
#navi_category	{ text-align: center; padding: 20px 0;  }
#navi_category li	{ display: inline-block; padding: 0 20px; }


#log_list						{ position: relative; margin-top: 10px; }

#log_list .empty_list			{ text-align: center; line-height: 100px;  }

#log_list .item					{ clear: both; margin: 0 0 35px 0; padding-bottom: 10px; }
#log_list .item:after			{ content: ""; display: block; clear: both; }
#log_list .item .ui-pic,
#log_list .item .ui-comment		{ float: left; box-sizing: border-box; }
#log_list .item	.ui-comment		{ padding: 30px 0px 0px; margin-left: 10px; overflow: hidden; }
#log_list .item-comment-box		{ overflow: hidden; }

#log_list .item.ui-wrap .ui-pic,
#log_list .item.ui-wrap .ui-comment,
#log_list .item.both .ui-pic,
#log_list .item.both .ui-comment			{ float: none; clear: both; width:100% !important; }
#log_list .item.ui-wrap .ui-pic				{ max-width:100% !important;}
#log_list .item.ui-wrap	.ui-comment,
#log_list .item.both .ui-comment	{ margin-left: 0px; padding-top: 20px; width: 100% !important; box-sizing: border-box; }


/** Picture */
#log_list .item	.ui-pic								{ position: relative; min-width: 300px; }
#log_list .item	.ui-pic .pic-header					{ position: relative; line-height: 30px; padding: 0 10px; }

/* 로그 넘버 기본 스타일 - 아래 하단 커스텀 영역에서 absolute로 재정의됨 */
#log_list .item	.ui-pic .pic-header .no				{ display: inline-block; vertical-align: middle; font-weight: bold; font-size: 15px; font-family: 'TtangsBudaeJjigae', sans-serif; font-weight: 700; }

#log_list .item	.ui-pic .pic-header	span.date		{font-weight:normal;font-size:12px;opacity:0.7;padding:0 5px;}
#log_list .item	.ui-pic .pic-header .del			{ display: inline-block; float: right; vertical-align: middle; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item	.ui-pic .pic-header .del:before		{ content: 'X'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 11px; font-weight: bold;}
#log_list .item	.ui-pic .pic-header .mod			{ display: inline-block; float: right; vertical-align: middle; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item	.ui-pic .pic-header .mod:before		{ content: 'M'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 11px; font-weight: bold;}  
#log_list .item	.ui-pic .pic-header .new			{ display: inline-block; float: right; vertical-align: middle; position: relative; width: 14px; height: 30px; line-height: 30px; overflow: hidden; text-indent: -999px; padding-left: 10px; }
#log_list .item	.ui-pic .pic-header .new:before		{ content: 'N'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 30px; text-indent: 0; text-align: center; font-size: 11px; font-weight: bold;}

#log_list .item	.ui-pic	.ch-tags					{padding:5px 10px;}
#log_list .item	.ui-pic	.ch-tags a					{display:inline-block;margin-left:2px;} 
#log_list .item	.ui-pic	.ch-tags .ui-btn.small		{height:20px;line-height:20px;font-size:11px;font-family:'dotum', sans-serif;padding:0 8px;opacity:0.8;}		
#log_list .item	.ui-pic	.ch-tags > span				{margin-left:2px;cursor:default;}

/* 카테고리 */
#log_list .item	.ui-pic .ico-category	{ font-size: 11px; font-family: 'dotum'; font-weight: 400; }

#log_list .item .ui-pic .pic-data							{ text-align: center; margin:0 auto; }
#log_list .item .ui-pic .pic-data.ui-blind					{ overflow: hidden; height: 250px; }





#log_list .item .ui-pic .pic-data .ui-remove-blind			{ display: block; position: absolute; top: 30px; left: 0; right: 0; bottom: 0; background: #000; overflow: hidden; text-align: center; }
#log_list .item .ui-pic .pic-data .ui-remove-blind:before	{ content: ""; display: inline-block; width: 0px; height: 100%; vertical-align: middle; }
#log_list .item .ui-pic .pic-data .ui-remove-blind span		{ display: inline-block; font-size: 14px; line-height: 1.5em; vertical-align: middle; color: #999; }

/* [수정] TEXT 타입 박스: 스크롤 제거 및 유동적 높이 */
#log_list .item .ui-pic .pic-data .theme-box {
    text-align: left !important;
    overflow: visible !important; /* 내용 전체 노출 */
    border: none !important;     
    background: transparent;
    padding: 10px 10px !important; 
    box-sizing: border-box;
}
#log_list .item .ui-pic .pic-data .theme-box div { 
    padding: 0; /* 트위터 임베드 정렬을 위해 여백 조정 */
    border: none !important; 
}
/* [추가] 트위터 임베드가 잘리지 않도록 함 */
.twitter-tweet {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


#log_list .item .ui-pic img {cursor:pointer;}
#log_list .item .ui-pic .img-data {position:relative;}
#log_list .item .ui-pic .img-data * {max-width:100%;}

/** Comment */
 
#log_list .item-comment						{ position: relative;}

#log_list .item-comment .co-header			{ position: relative; line-height: 16px; padding: 10px 15px 0; font-family:'dotum'}
#log_list .item .item-inner .item-comment.item-reply .co-header{line-height: px;} 

/* [수정] 대댓글 화살표 제거 */
#log_list .item .item-inner .item-comment.item-reply .co-header:before {content:""; display:none;}
#log_list .item-comment .co-header:after	{ content: ""; display: block; clear: both; }
#log_list .item-comment .co-header p		{ float: left; }
#log_list .item-comment .co-header .link	{ float: right; padding-right: 5px; }
#log_list .item-comment .co-header i		{ display: inline-block; height: 25px; }
#log_list .item-comment .co-header i img	{ max-height: 100%; }

#log_list .item-comment .co-content							{ padding: 3px 15px 10px 15px; font-family: 'Nanum Gothic'; }
#log_list .item .item-inner .item-comment.item-reply .co-content {padding: 5px 15px;}
#log_list .item-comment .co-content	.original_comment_area { word-break:break-all; }

#log_list .item-comment .co-content .log_link_tag:before	{ /*content: "\e936"; font-family: 'icon'; padding-right: 5px; */}
#log_list .item-comment .co-content .member_call			{ padding: 0 5px; }
#log_list .item-comment .co-content .member_call:before		{ /*content: "\e951"; font-family: 'icon'; padding-right: 3px; */ }
#log_list .item-comment .co-content .other-site-link		{ font-weight: bold; }
#log_list .item-comment .co-content .other-site-link:before	{ /*content: "\e9cb"; font-family: 'icon'; padding-right: 2px;*/ }
#log_list .item-comment .co-content	.re_more{display:none;}
#log_list .item-comment .co-content	.co-more:after{content:"▼";}
#log_list .item-comment .co-content	.co-more.on:after{content:"▲";}
#log_list .item-comment .dice			{ display: block; padding-bottom: 10px; }
#log_list .item-comment .dice img		{  border-radius: 3px; overflow: hidden; }

#log_list .item-comment .link-box		{ display: block; padding-bottom: 10px; }

#log_list .item-comment .co-footer				{ /*line-height: 20px;*/ padding: 0 5px; }
#log_list .item-comment .co-footer:after		{ content: ""; display: block; clear: both; }
#log_list .item-comment .co-footer .date		{ float:right; margin-left: 3px; margin-right:3px; }

#log_list .item-comment .co-footer .del			{ float:right; display: inline-block; vertical-align: middle; position: relative; width: 7px; height: 15px;  text-indent: -999px; padding-left: 3px; }
#log_list .item-comment .co-footer .del:before	{ content: 'X'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;  text-indent: 0; text-align: center; font-size: 10px; }
#log_list .item-comment .co-footer .mod			{ float:right; display: inline-block;  vertical-align: middle; position: relative; width: 7px; height: 15px;; text-indent: -999px; padding-left: 3px; }
#log_list .item-comment .co-footer .mod:before	{ content: 'M'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;  text-indent: 0; text-align: center; font-size: 10px; }
#log_list .item-comment .co-footer .re			{ float:right; display: inline-block;  vertical-align: middle; position: relative; width: 7px; height: 15px; text-indent: -999px; padding-left: 3px; }
#log_list .item-comment .co-footer .re:before	{ content: 'R'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;  text-indent: 0; text-align: center; font-size: 10px; }

#log_list .item-comment-form-box					{ padding: 10px 0 0;  }
#log_list .bo_vc_w									{ position: relative; }
#log_list .bo_vc_w	> h4							{ display:none;padding:5px; opacity:0.7; font-weight:normal;}
#log_list .bo_vc_w	> h4:before						{content:"";}
#log_list .bo_vc_w .input-comment					{ position: relative; margin-bottom: 5px; }
#log_list .bo_vc_w .input-comment .file_box			{display:none;}
#log_list .bo_vc_w .input-comment .memo_box			{position:relative;padding-right:30px;}
#log_list .bo_vc_w .input-comment .memo_box a		{position:absolute;width:30px;height:100%;right:0;top:0;bottom:0;padding:0 5px;font-size:12px;}
#log_list .bo_vc_w .input-comment .memo_box a span	{display:inline-block;transform:scale(0.8);}

/* [수정] Textarea 스타일: 회색 테두리 제거 및 배경색 추가 (서식 적용) */
#log_list .bo_vc_w .input-comment textarea			{ 
    display: block; 
    width: 100%; 
    height: 80px; 
    box-sizing: border-box; 
    margin: 0;  
    font-family: 'Nanum Gothic'; 
    border: none;         /* 테두리 제거 */
    background-color: #f9f9f9; /* 연한 회색 배경 */
    border-radius: 8px;   /* 둥근 모서리 */
    padding: 10px;        /* 안쪽 여백 */
}
/* [수정] Input 스타일: 테두리 제거 */
#log_list .bo_vc_w .input-comment .form-input		{height:auto;min-height:28px; padding-top:3px; padding-right: 70px;position:relative;}
#log_list .bo_vc_w .input-comment .form-input span	{display:inline-block;padding-right:8px;}		 
#log_list .bo_vc_w .input-comment input.frm_input   {
    border: none;
    background: transparent;
}


#log_list .bo_vc_w .btn_confirm						{ display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 70px; padding:0px; }
#log_list .bo_vc_w .btn_confirm .ui-comment-submit	{ display: block; width: 100%; height: 100%; }

#log_list .modify_area			{ display: none; position: relative; }
#log_list .modify_area textarea	{ display: block; width: 100%; min-height: 100px; padding: 10px; }
#log_list .modify_area button	{ width: 60px; }


.log-item-box	{
	position: relative;
	padding-left: 70px;
	min-height: 60px;
	margin-bottom: 10px;

}
.log-item-box em	{
	display: block;
	position: absolute;
	width: 60px;
	height: 60px;
	overflow: hidden;
	top: 0;
	left: 0;
}
.log-item-box p			{ padding: 10px 0; }
.log-item-box p span	{ display: block; }



/* 1. 외부 프레임 설정 */
.item-inner {
    position: relative; /* 넘버 배치를 위한 기준점 */
    background-color: #f0f0f0; 
    border: 1px solid #dddddd; 
    border-radius: 25px; 
    padding: 5px 30px 30px 30px; /* 상단 여백 최소화 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: visible; /* 넘버 탭이 밖으로 보이도록 설정 */
    margin-top: 25px; 
}

/* 1. 숫자 앞에 "No." 텍스트 강제 삽입 */
#log_list .item .ui-pic .pic-header .no::before {
    content: "No. ";    /* 삽입할 문구 */
}
/* [추가] 공지글(NOTICE)일 때는 앞에 'No.' 글자를 없앰 */
#log_list .item .ui-pic .pic-header .no.is-notice::before {
    content: none !important;
    display: none;
}

/* 로그 넘버 스타일 (프레임 안쪽으로 복귀) */
#log_list .item .ui-pic .pic-header .no {
    position: relative; /* absolute 해제 */
    top: 0 !important;   /* 위치 초기화 */
    left: 0 !important;
    z-index: 1;
    
    display: inline-block;
    background-color: transparent; /* 기존 배지 색상 유지 */
    color: #97c3d1;
    
    /* 작고 귀여운 라벨 스타일 */
    padding: 2px 8px !important; 
    font-size: 11px !important;  /* 크기를 작게 조절 */
    font-weight: bold;
    line-height: 16px !important;
    border-radius: 4px !important; /* 사방을 둥글게 */
    
    vertical-align: middle;
    box-shadow: none !important;  /* 그림자 제거 */
    margin-right: 5px;            /* 버튼들과의 간격 */
    
    /* [폰트] 기존 설정 유지 (땅스부대찌개 폰트) */
    font-family: 'TtangsBudaeJjigae', sans-serif;
    font-weight: 700;
}

/* 메뉴 버튼 영역(헤더) 높이 다시 확보 */
#log_list .item .ui-pic .pic-header {
    height: 25px !important;      /* 버튼과 숫자가 들어갈 정도의 높이 */
    margin-bottom: 8px !important; /* 이미지와의 간격 */
    padding: 0 !important;
}

/* 3. 이미지 설정 (좌우 꽉 차게 확장 및 세로 350px 제한) */

/* [중요] 레이아웃 겹침 방지: 이미지가 리플란을 제대로 밀어내도록 설정 */
#log_list .item .ui-pic {
    width: 100% !important;
    max-width: none !important;
    float: none !important; 
    display: block !important; /* 블록 요소로 설정하여 높이를 차지하게 함 */
    clear: both; /* 주변 요소와의 겹침 방지 */
}



/* [수정] 이미지 강제 확대 및 중앙 정렬 설정 */
.ui-pic img, 
.pic-data img {
    width: 100% !important;       /* 가로 너비 무조건 꽉 채움 */
    display: block;
}
/* [수정] 3. 이미지 풀 사이즈 출력 */
.pic-data video {
    height: auto !important; 
    object-fit: contain !important;
}

/* [수정] 약 285라인 근처 - 동영상 비율 설정에서 트위터 제외 */
.pic-data embed, 
.pic-data object,
.pic-data iframe:not([id^="twitter-widget-"]) { /* 트위터 위젯이 아닌 iframe만 비율 유지 */
    display: block;
    width: 100% !important;       
    max-width: none !important;   
    height: auto !important;      
    aspect-ratio: 16 / 9;         /* 유튜브 등 일반 동영상만 16:9 */
    border: none;
    margin: 0 auto;
}

/* 1. 트위터 임베드 전용: 모든 높이 및 비율 제약 해제 */
iframe[id^="twitter-widget-"] {
    aspect-ratio: auto !important; /* 16:9 비율 강제 해제 */
    height: 500px; /* 로딩 전 임시 높이 (선택 사항) */
    min-height: 200px !important;
    max-height: none !important;
    width: 100% !important;
    border: none !important;
    /* 트위터 스크립트가 주입하는 인라인 스타일을 방해하지 않도록 함 */
}


/* 4. 리플 영역 (기존 유지) */
#log_list .item .ui-comment {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 15px 0 0 0;
    width: 100%;
}

/* 개별 리플 박스 (기존 유지) */
.item-comment {
    background-color: #f0f0f0; 
    border: none;
    margin-bottom: 5px; 
}

/* 리플 작성란 (기존 유지) */
/* [수정] 회색 테두리(border) 제거 */
.item-comment-form-box {
    background-color: #ffffff;
    border: none; /* 회색 선 제거 */
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
}

/* TEXT 타입 관련 스타일 (기존 유지) */
.img-data.theme-box div {
    color: #333;
    line-height: 1.5;
    word-break: break-all;
    font-family: 'Ridibatang';
}

/* [추가] 공지글 스타일 */
.notice-badge {
    /* [수정] NOTICE 뱃지에도 넘버와 같은 폰트 적용 */
    font-family: 'TtangsBudaeJjigae', sans-serif;
    font-weight: 700;
    color: #97c3d1; /* 포인트 컬러와 동일하게 설정 */
    margin-right: 5px;
    font-size: 12px;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 4px;
}

/* ============================================================
   [최종 수정] 원본 디자인 복구 + 모바일 회색박스 제거
   ============================================================ */

/* 1. 이미지/텍스트 공통 컨테이너 확장 (음수 마진) */
#log_list .item .ui-pic .pic-data {
    margin-left: -30px !important;
    margin-right: -30px !important;
    width: calc(100% + 60px) !important;
    max-width: none !important;
    position: relative;
}

/* 2. 트위터(Twitter) 전용 설정 */
#log_list .item .ui-pic .pic-data .theme-box:has(.twitter-tweet) {
    padding: 10px 10px !important; 
    text-align: center !important;
    background: transparent !important;
}
.twitter-tweet {
    display: inline-block !important; 
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 500px !important; 
}

/* 3. 일반 텍스트(TEXT) 로그 설정 */
#log_list .item .ui-pic .pic-data .theme-box {
    padding: 10px 10px;
    box-sizing: border-box;
    text-align: left; 
    line-height: 1.6;
}

/* 4. [복구됨] 부드러운 애니메이션 (원본 설정) */
#log_list .item .ui-pic .pic-data.ui-slide {
    overflow: hidden !important;
    /* 원본의 고급스러운 1.2초 큐빅 베지어 곡선 복구 */
    transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important; 
}

/* [접힌 상태] 높이 고정 */
#log_list .item .ui-pic .pic-data.ui-slide:not(.is-open) {
    height: var(--fold-height, 350px) !important;
    max-height: var(--fold-height, 350px) !important;
    display: block !important;
    position: relative;
}

/* [접힌 상태] 이미지 크롭 */
#log_list .item .ui-pic .pic-data.ui-slide:not(.is-open) .img-data,
#log_list .item .ui-pic .pic-data.ui-slide:not(.is-open) img {
    height: 100% !important; 
    width: 100% !important;
    object-fit: cover !important; 
    object-position: top center !important;
    display: block !important;
}

/* [펼쳐진 상태] */
#log_list .item .ui-pic .pic-data.ui-slide.is-open {
    max-height: 9999px !important;
    height: auto !important;
    padding-bottom: 30px !important; /* 버튼 공간 살짝 확보 */
}
#log_list .item .ui-pic .pic-data.ui-slide.is-open img {
    height: auto !important;
    object-fit: contain !important;
}

/* 5. [복구됨] 버튼 디자인 (오른쪽 구석 작은 화살표) 
   'html body'를 붙여서 모바일 회색 박스는 막되, 디자인은 원본처럼 심플하게 
*/
html body #log_list .item .ui-pic .pic-data.ui-slide .ui-open-log.ui-btn {
    position: absolute;
    /* 원본 위치 복구 */
    bottom: 5px !important;
    right: 15px !important;
    left: auto !important;
    
    /* 크기 및 스타일 초기화 (원본처럼 작게) */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    
    /* 모바일 회색 박스 제거용 필수 설정 */
    margin: 0 !important;
    padding: 5px !important; /* 터치 잘 되게 약간의 패딩 */
    border: 0 none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important; /* 배경 완전 투명 */
    
    font-size: 0 !important; 
    color: transparent !important;
    cursor: pointer;
    z-index: 100;
}

/* 버튼 아이콘 (▼) */
html body #log_list .item .ui-pic .pic-data.ui-slide .ui-open-log.ui-btn::before {
    content: "▼"; 
    display: inline-block;
    
    /* 원본 아이콘 스타일 복구 */
    font-size: 14px !important;
    color: #666 !important; 
    text-shadow: none !important; /* 그림자 제거 (깔끔하게) */
    
    position: static !important; /* 강제 위치 잡기 해제 */
    width: auto !important;
}

/* 펼쳐졌을 때 아이콘 (▲) */
html body #log_list .item .ui-pic .pic-data.ui-slide.is-open .ui-open-log.ui-btn::before {
    content: "▲"; 
}