@charset "utf-8";

#mainArea,
.pc #mainArea,
#mainLeft,
.timeline_wrap {background: #e9ebee;}
.wrap-timeline {
	width: 100%;
	max-width: 550px;
    margin: auto;
    padding-bottom: 100px;
}
.mm .vcm.vcm {font-size: 14px;}
.mm #mainRight {background: #e9ebee;}
#tl-t-write {
	margin-bottom: 40px;
}
.wrap-timeline .modal {max-width: 90%;}

.wrap-timeline .btns input[type=submit] {margin:0;}
.tl-subject {
    padding-bottom: .3em;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}
.viewTable.tl-content {
	position: relative;
	margin: 15px 0;
	padding: 10px;
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
}
.tl-content input[type='checkbox'] {
	position: absolute;
	top: 0;
	left: -15px;
}
.tl-content .tl-menu.tl-menu {
	left: auto;
	top: 10px;
	right: 10px;
}
.wrap-timeline .btn {background: #FFF;}
.wrap-timeline .btns a {
    min-width: 80px;
    margin: 0;
	color: #FFF !important;
	background: #4267b2;
	border: 1px solid #4267b2;
	text-shadow: none;
	text-align: center;
	line-height: 2;
}
.dark3 .wrap-timeline .btns a {filter: invert(1) hue-rotate(180deg);}
@media (prefers-color-scheme: dark){
    .dark1 .wrap-timeline .btns a {filter: invert(1) hue-rotate(180deg);}
}

.tl-foot {
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
}


.tl-content .voyarea,
.tl-content .iam-cmt {display: none !important;}
.cmtfold {
    display: block;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.tl-content.is-empty .voyarea,
.cmtfold:checked + .tl-content .voyarea {
    display: table !important;
    padding: 10px;
}
.cmtfold:checked + .tl-content .iam-cmt {display: block !important;}
.cmtfold:checked + .tl-content .cmtWriteTable {margin-bottom: 10px;}
.tl-content.secret .tl-subject::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 13px;
    background: url(/a_skin/bbsd/secret_head.gif) no-repeat;
}

.is-portrait {
	position: relative;
	height: 300px;
	background: #F2F2F2;
}
img.is-portrait { height: auto; }
.is-portrait img {
	display: block;
	width: auto;
	height: 100%;
	margin: auto;
}
.admin_only a.btn {
    color: #FFF !important;
}
.is-longlong {display: none;}
.show-more {background: none !important;cursor: pointer;}
.more-marker {
	color: #222;
	font-size: 0.9em;
    display: flex;
    width: 100%;
    background: repeating-linear-gradient(90deg, #ddd 0px, #ddd 5px, transparent 5px, transparent 20px);
    margin: 10px 0;
    height: 3px;
    align-items: center;
    justify-content: center;
    line-height: 1;
	font-weight: bold;
}
.limit-timeline {
    padding: 10px 20px;
    font-size: 12px;
    text-align: center;
    background: #F8F8F8;
    border: 1px solid #CCC;
}
.tl-section {
	background: #FFF;
	border-radius: 3px;
}
.tl-middle {
	position: relative;
	border-bottom: 1px solid #dddfe2;
}
.tl-middle:before {
	content: '';
	position: absolute;
	top: 0;
	left: 12px;
	width: calc(100% - 24px);
	border-top: 1px solid #dddfe2;
}
.wrap-timeline .voyarea2 {
    margin: 0 0 7px;
    height: 60px;
    padding: 12px;
}
.tl-main {
	position: relative;
	z-index: 10;
}
.tl-bg {
	-webkit-transition: all .5s;
	transition: all .5s;
}
.tl-top {
	position: relative;
	z-index: 10;
	height: 36px;
	overflow: hidden;
}

/* 타임라인 타이틀 스타일링 */
.bbsTitleBox {
	max-width: 550px;
    margin: auto;
}