A {font-weight:bold;}

body {padding:20px;}

input, textarea {font-size:11px !important;}

html, body, div, table, td, textarea
{font-family:'malgun gothic','Apple Gothic', tahoma, helvecita;
 font-size:12px; color:#555; word-break:break-all; letter-spacing:-1px; line-height:1.4;}

input {font-family:'malgun gothic','Apple Gothic', tahoma, helvecita;
 color:#666; word-break:break-all; letter-spacing:-1px; line-height:1.4;}

textarea {background-color:#ffffff; border:1px solid #ccc;}

img {border:0px;}
 
hr{display:none;}

a { selector-dummy : expression(this.hideFocus=true);}

A {text-decoration:none;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;}
A:hover  {color:#555;text-decoration:none;}
/* 이 하이퍼링크 성질은 MMB를 위해 넣은 것 */


/* 해티가 추가해 놓습니다  MMB용  *********************************************************************************************************************/
ul.MMB {display:inline; padding: 0 0 0 0; margin: 0 0 0 0;}

li.menuMMB {display:inline; padding: 0px; margin: 0 0 0 0;
background:none; border:none; 
font-size:11px; font-family: tahoma;} 
li.menuMMBPage {display:inline; padding: 0px; margin: 0 0 0 0;
background:none; border:none; 
font-size:11px; font-family: tahoma;} 

.login{
opacity:0.1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); 
filter: Alpha(Opacity=10);
zoom:1}

#cellMMB {border-radius: 6px; -moz-border-radius:6px;  -webkit-border-radius:6px;
margin:0 auto;
min-height:60px;
height:auto !important;
height:60px;
padding:0 12px 0px 10px;}

.numMMB {width: 32px;
position:relative; top:10px; left:-38px; 
}

.numMMBspan {font-weight:bold;}

.maxW{width: 200px; height: auto; padding:0; margin:0;}
.maxWide{width: 300px; height: auto; padding:0; margin:0;}
.maxH{width: 250px; height: auto; padding:0; margin:0;}

a.foldImage:hover{
zoom:1;
opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 
filter: Alpha(Opacity=60);
}

.mouseOn {background:url(image/zoom_in.png) center center no-repeat; text-align:center;}

.buttonMMB {font-family:Tahoma; font-size:8pt; color:#777; background-color:#fff;border:none; border:1px solid #ddd;
border-radius: 4px; -moz-border-radius:4px;  -webkit-border-radius:4px;}

/* 해티가 추가해 놓습니다  이하 모바일대응용 스타일  *********************************************************************************************************************/

.wideLog {width:100%; margin:0 auto; text-align:center; } /* 넓은 로그 테이블 스타일 */

.picTd {padding:10px 0 0 0; margin: 0 auto; float:left; text-align:center; position:relative; top:-12px;}
.picTdText {width:100%; padding:10px 0 0 0; margin: 0 auto; float:left; text-align:center;}

.adminOnlyTd {width:130px; padding:15px 5px 5px 5px; margin:0 auto; position:relative; top:-12px;}

.commentTd {padding:0 0 0 12px; float:left;}
.commentTdWide {padding-top:10px; float:left;} /* 넓은 로그는 relative 줘서 끌어올릴 수밖에 없다 */
.commentTdText {padding:0px; float:left;}

.commentWrite {width:100% !important;}

/* 기본 설정: log-container를 flex 컨테이너로 설정 */
.log-container {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: space-around;
	align-items: flex-start; /* 상단 정렬로 맞추기 */
}

/* 각 .log 요소의 크기를 이미지에 맞춰 자동으로 조정되도록 설정 */
.log {
	display: inline-flex; /* 크기 자동 조정을 위해 inline-flex 사용 */
	flex-direction: column;
	box-sizing: border-box;
	margin: 5px;
}

/* 이미지 크기에 맞게 .log 요소 크기 설정 */
.log img {
	width: auto;
	height: auto;
	max-width: 100%; /* 이미지 크기 제한 */
}

/* 반응형 미디어 쿼리 설정 */
@media screen and (max-width: 768px) {
	.log {
		max-width: 100%; /* 한 줄에 3개씩 배치 */
	}
}

/*@media screen and (max-width: 500px) {*/
/*	.log {*/
/*		max-width: calc(50% - 20px); !* 한 줄에 2개씩 배치 *!*/
/*	}*/
/*}*/