@charset "utf-8";

.btn_confirm {
	padding: 3em 0;
	text-align: center;
}

/* Character sheet title (aligned with Trpg_sheet.skin.Light) */
.board-sub-tit {
    margin: 0px 0 10px;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.board-viewer-section {margin:24px 0;}
.board-viewer-section-content {padding-top:8px;}

/* border line right above .sheet-wrap (no margin/padding) */
.sheet-top-border {display:block; height:0; margin:0; padding:0; border-top:1px solid rgb(144,16,16);}

.btn_confirm {padding:3em 0; text-align:center; background:transparent; z-index:1;}

/* 검색 영역도 투명하게 처리 */
#bo_sch {background:transparent; z-index:1;}



/***********************************************
	List
***********************************************/

.log-board-wrap {display:block; position:relative;}
.log-board-wrap .empty-list {text-align:center; padding:100px 0; opacity:.5; border:1px solid var(--point_color); border-left-width:0; border-right-width:0;}

.campaign-list-slider {display:block; position:relative;}
.campaign-list-slider + .campaign-list-slider {margin-top:50px;}
.campaign-list-slider .category-title {display:block; position:relative; font-size:25px; margin:20px 0;}
.campaign-list-slider .swiper-button-prev,
.campaign-list-slider .swiper-button-next {display:block; position:absolute; top:0; bottom:0; width:100px; height:100%; text-indent:-999px; overflow:hidden; margin:0; opacity:0;}
.campaign-list-slider .swiper-button-prev:hover,
.campaign-list-slider .swiper-button-next:hover {opacity:1;}
.campaign-list-slider .swiper-button-prev {left:0; background:linear-gradient(90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-next {right:0; background:linear-gradient(-90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-prev.swiper-button-disabled,
.campaign-list-slider .swiper-button-next.swiper-button-disabled {opacity:0;}
.campaign-list-slider .slider {display:block;  position:relative;}
.campaign-list-slider .slider .swiper-slide {width:auto; max-width:80%;}

.campaign-list {overflow:hidden;}
.campaign-list > .list {margin:0 -10px; text-align:center;}
.campaign-list > .list > li {display:inline-block; width:auto; max-width:50%; box-sizing:border-box;}

.campaign-slider-item {max-width:100%; padding:10px;}
.campaign-slider-item .frame {display:block; position:relative; border-radius:20px; overflow:hidden;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.campaign-slider-item .frame .pad {display:block; position:relative;}
.campaign-slider-item .frame .pic,
.campaign-slider-item .frame .pic > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.campaign-slider-item .frame .pic > em {background:no-repeat 50% 50%; background-size:cover;}
.campaign-slider-item .frame .has-img + .cover {top:70%; background:linear-gradient(0, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-slider-item .frame .has-img + .cover * {color:var(--font_color);}
.campaign-slider-item .frame:hover .has-img + .cover {top:0;}

.campaign-slider-item .frame .pic .cover > * {display:table; width:100%; height:100%; table-layout:fixed;}
.campaign-slider-item .frame .pic .cover > * > * {display:table-cell; text-align:center; vertical-align:middle;}

.campaign-slider-item .frame {border:1px solid var(--point_color); background:var(--bg_color);}
.campaign-slider-item.img-frame .frame {border-width:0;}
.campaign-slider-item .frame .subject {display:block; padding:1em; font-size:16px; word-break:break-all; text-align:center;}



@media all and (max-width:1024px) {
	.campaign-list-slider .category-title {font-size:20px; margin:15px 0;}
	.campaign-slider-item .frame .subject {font-size:15px;}
}
@media all and (max-width:640px) {
	.campaign-list-slider .category-title {font-size:18px;}
	.campaign-slider-item .frame .subject {font-size:14px;}
}
@media all and (max-width:420px) {
	.campaign-list > .list > li {max-width:100%;}
}



/***********************************************
	Viewer
***********************************************/

.campaignViewer {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 80vh;
	line-height: 1.8;
	border-radius: 3em;
	overflow: hidden;
	background: var(--bg_color);
	z-index: 0;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.campaignViewer .visual-box {
	display: block;
	position: relative;
	padding-top: 350px;
	padding-bottom: 40px;
}

.campaignViewer .visual-box.no-visual {
	padding-top: 100px;
}

.campaignViewer .visual-box .bak {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0)) 100%;
	z-index: -1;
}

.campaignViewer .visual-box .bak img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.campaignViewer .camp-default-info {
	display: block;
	position: relative;
	padding: 20px 40px;
	text-shadow: 0px 0px 10px var(--shadow_color);
	word-break: keep-all;
}

.campaignViewer .camp-default-info .subj {
	display: block;
	position: relative;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: .3em;
}

.campaignViewer .camp-default-info .sub-text {
	display: block;
	position: relative;
	font-size: 18px;
	margin-bottom: 10px;
	opacity: .6;
}

.campaignViewer .camp-default-info .txt {
	font-size: 14px;
}

.campaignViewer .action-box {
	padding: 15px 0;
}

.campaignViewer .tab-log-content {
	display: block;
	position: relative;
	padding: 0 40px 50px;
}

@media all and (max-width:820px) {
	.campaignViewer {
		margin: -80px -20px 0;
		border-radius: 0;
	}

	.campaignViewer .visual-box {
		padding-top: 200px;
		padding-bottom: 20px;
	}

	.campaignViewer .camp-default-info {
		padding: 20px;
	}

	.campaignViewer .tab-log-content {
		padding: 0 20px 50px;
	}
}

@media all and (max-width:640px) {
	.campaignViewer .camp-default-info .subj {
		font-size: 30px;
	}

	.campaignViewer .camp-default-info .sub-text {
		font-size: 15px;
	}

	.campaignViewer .camp-default-info .txt {
		font-size: 1em;
	}
}

@media all and (max-width:520px) {
	.campaignViewer {
		margin: -80px -10px 0;
	}

	.campaignViewer .camp-default-info {
		padding: 10px;
	}

	.campaignViewer .tab-log-content {
		padding: 0 10px 30px;
	}
}

.campaignViewer .tab-log-content .tabs {
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 0;
	margin-bottom: 20px;
}

.campaignViewer .tab-log-content .tabs:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	z-index: -1;
	background: var(--default_color);
	opacity: .2;
}

.campaignViewer .tab-log-content .tabs li {
	display: block;
	position: relative;
	float: left;
}

.campaignViewer .tab-log-content .tabs a {
	display: block;
	position: relative;
	font-size: 16px;
	padding: .8em 1em;
	opacity: .6;
}

.campaignViewer .tab-log-content .tabs a:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0px;
	background: var(--point_color);
}

.campaignViewer .tab-log-content .tabs li+li {
	margin-left: 1.5em;
}

.campaignViewer .tab-log-content .tab-content .tab-con {
	display: none;
	min-height: 300px;
}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"],
.campaignViewer .tab-log-content[data-tabs="T"] .tabs a[data-tabs="T"],
.campaignViewer .tab-log-content[data-tabs="S"] .tabs a[data-tabs="S"] {opacity:1;}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"]:after,
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"]:after,
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"]:after,
.campaignViewer .tab-log-content[data-tabs="T"] .tabs a[data-tabs="T"]:after,
.campaignViewer .tab-log-content[data-tabs="S"] .tabs a[data-tabs="S"]:after {height:3px;}
.campaignViewer .tab-log-content[data-tabs="E"] .tab-content .tab-con[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tab-content .tab-con[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tab-content .tab-con[data-tabs="R"],
.campaignViewer .tab-log-content[data-tabs="T"] .tab-content .tab-con[data-tabs="T"],
.campaignViewer .tab-log-content[data-tabs="S"] .tab-content .tab-con[data-tabs="S"] {display:block;}

@media all and (max-width:640px) {
	.campaignViewer .tab-log-content .tabs a {font-size:15px;}
}
@media all and (max-width:520px) {
	.campaignViewer .tab-log-content .tabs a {font-size:14px;}
}

.campaignViewer .tab-con .no-data {display:block; position:relative;}
.campaignViewer .tab-con .no-data:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer .tab-con .no-data > * {display:block; padding:5em 0 6em; text-align:center; opacity:.6; font-size:14px;}

.campaignViewer .comment-data-box .modify {display:none; border-left:3px solid var(--default_color); padding-left:10px;}
.campaignViewer .comment-data-box.mod .modify {display:block;}

/* 답글 폼 토글: 부모 .comment-data-box에 reply 클래스가 있을 때만 노출 */
.replyTaraeWrap {display:none;}
.comment-data-box.reply .replyTaraeWrap {display:block;}

.addEpisodeWrap,
.addCharacterWrap,
.addSheetWrap,
.addReviewWrap,
.addTaraeWrap {display:none !important;}
.addEpisodeWrap.open,
.addCharacterWrap.open,
.addSheetWrap.open,
.addReviewWrap.open,
.addTaraeWrap.open {display:block !important;}

.campaign-write-form {display:block; position:relative; padding:20px 0; margin-top:20px; z-index:0;}
.campaign-write-form dl {display:table; width:100%; table-layout:fixed; margin:0;}
.campaign-write-form dl > * {display:table-cell; vertical-align:middle; padding:5px 10px;}
.campaign-write-form dl dt {width:65px;}
.campaign-write-form .control {text-align:center; padding-top:20px;}
.campaign-write-form .control .ui-btn {min-width:200px;}

/* replyTaraeWrap는 클릭 시에만 활성화되도록 강제 숨김/표시 */
.campaign-write-form.replyTaraeWrap {display:none !important;}
.comment-data-box.reply .campaign-write-form.replyTaraeWrap {display:block !important;}


.campaignViewer .roll20-log .log {padding:60px; margin-top:30px; border-radius:1em;}
.campaignViewer .roll20-log .log #textchat {color:var(--font_color);}
.campaignViewer .roll20-log .textchatcontainer .message .spacer {background:var(--default_color); opacity:.05; padding-left:30px; padding-right:30px;}

/**********************************************
	Sheet Viewer
**********************************************/

.sheetViewer {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 80vh;
	line-height: 1.8;
	border-radius: 3em;
	overflow: hidden;
	background: var(--bg_color);
	z-index: 0;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.sheetViewer .visual-box {
	display: block;
	position: relative;
	padding-top: 350px;
	padding-bottom: 40px;
}

.sheetViewer .visual-box.no-visual {
	padding-top: 100px;
}

.sheetViewer .visual-box .bak {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0)) 100%;
	z-index: -1;
}

.sheetViewer .visual-box .bak img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.sheetViewer .sheet-default-info {
	display: block;
	position: relative;
	padding: 20px 40px;
	text-shadow: 0px 0px 10px var(--shadow_color);
	word-break: keep-all;
}

.sheetViewer .sheet-default-info .subj {
	display: block;
	position: relative;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: .3em;
}

.sheetViewer .sheet-default-info .sub-text {
	display: block;
	position: relative;
	font-size: 18px;
	margin-bottom: 10px;
	opacity: .6;
}

.sheetViewer .sheet-default-info .txt {
	font-size: 14px;
}

.sheetViewer .action-box {
	padding: 15px 0;
}

.sheetViewer .character-sheet .log {
	padding: 60px;
	margin-top: 30px;
	border-radius: 1em;
}

.sheetViewer .character-sheet .log #textchat {
	color: var(--font_color);
}

.sheetViewer .character-sheet .textchatcontainer .message .spacer {
	background: var(--default_color);
	opacity: .05;
	padding-left: 30px;
	padding-right: 30px;
}

.sheetViewer .comment-data-box .modify {display:none; border-left:3px solid var(--default_color); padding-left:10px;}
.sheetViewer .comment-data-box.mod .modify {display:block;}

@media all and (max-width:820px) {
	.sheetViewer {
		margin: -80px -20px 0;
		border-radius: 0;
	}

	.sheetViewer .visual-box {
		padding-top: 200px;
		padding-bottom: 20px;
	}

	.sheetViewer .sheet-default-info {
		padding: 20px;
	}
}

@media all and (max-width:640px) {
	.sheetViewer .sheet-default-info .subj {
		font-size: 30px;
	}

	.sheetViewer .sheet-default-info .sub-text {
		font-size: 15px;
	}

	.sheetViewer .sheet-default-info .txt {
		font-size: 1em;
	}
}

@media all and (max-width:520px) {
	.sheetViewer {
		margin: -80px -10px 0;
	}

	.sheetViewer .sheet-default-info {
		padding: 10px;
	}
}


/**********************************************
	Episode
**********************************************/

.item-episode {display:block; position:relative; padding:20px 0;}
.item-episode + .item-episode:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.episode-list {display:table; width:100%; table-layout:fixed;}
.episode-list > * {display:table-cell; position:relative; vertical-align:middle;}
.episode-list .thumb {width:220px;}
.episode-list .thumb a {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:60%;}
.episode-list .thumb a img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.episode-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.episode-list .desc .txt {display:block; opacity:.6; line-height:1.4em;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.episode-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.episode-list .control {display:inline-flex; align-items:center; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.episode-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.episode-list .control a + a {margin-left:5px;}

.episode-list .thumb ~ .desc {padding-left:20px;}
.episode-list .thumb ~ .desc .txt {height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal;}


@media all and (max-width:520px) {
	.episode-list .thumb, .sheet-list .thumb {width:150px;}
	.episode-list .desc .subj, .sheet-list .desc .subj {margin-bottom:10px;}
}


/**********************************************
	Character
**********************************************/

.item-character {display:block; position:relative; padding:5em 0 6em; font-size:14px;}
.item-character + .item-character:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.item-character.is-reply + .item-character:before {display:none;}
.item-character.is-reply {padding:10px 0;}
.character-list {display:table; width:100%; table-layout:fixed;}
.character-list > * {display:table-cell; position:relative; vertical-align:middle;}
.character-list .thumb {width:80px; vertical-align:top;}
.character-list .thumb > * {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:100%; border-radius:100%; border:1px solid var(--default_color);}
.character-list .thumb > * img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.character-list .thumb ~ .desc {padding-left:20px;}
.character-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.character-list .desc .txt {display:block; line-height:1.4em;}
.character-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.character-list .control {display:inline-flex; align-items:center; vertical-align:middle; margin-left:.5em; line-height:1;}
.character-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.character-list .control a + a {margin-left:5px;}

/* reply 하단 컨트롤 버튼 정렬 */
.character-list .control.bottom {display:flex; align-items:center; justify-content:flex-end; margin:.5em 0 0;}


/**********************************************
	Review
**********************************************/

.item-review {display:block; position:relative; padding:20px 0;}
.item-review + .item-review:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.review-list {display:table; width:100%; table-layout:fixed;}
.review-list > * {display:table-cell; position:relative; vertical-align:middle;}
.review-list .name {width:80px; vertical-align:top;}
.review-list .name ~ .desc {padding-left:20px;}
.review-list .desc .txt {display:block; opacity:.6; line-height:1.4em;}
.review-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.review-list .control {display:inline-flex; align-items:center; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.review-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.review-list .control a + a {margin-left:5px;}


/**********************************************
	Sheet
**********************************************/

.item-sheet {display:block; position:relative; padding:20px 0; margin-bottom: 20px;}
.item-sheet + .item-sheet:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:rgb(224, 147, 28); opacity:.3;}

.sheet-list {display:table; width:100%; table-layout:fixed;}
.sheet-list > * {display:table-cell; position:relative; vertical-align:middle;}
.sheet-list .thumb {width:220px;}
.sheet-list .thumb a {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:60%;}
.sheet-list .thumb a img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.sheet-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sheet-list .desc .txt {display:block; opacity:.6; line-height:1.4em;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sheet-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.sheet-list .control {display:inline-flex; align-items:center; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.sheet-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.sheet-list .control a + a {margin-left:5px;}

.sheet-list .thumb ~ .desc {padding-left:20px;}
.sheet-list .thumb ~ .desc .txt {height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal;}



/**********************************************
	Tarae
**********************************************/
.item-tarae {
	display: block;
	position: relative;
	padding: 20px 0;
}

.item-tarae+.item-tarae:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	z-index: -1;
	background: var(--default_color);;
}

.item-tarae.is-reply+.item-tarae:before {
	display: none;
}

.item-tarae.is-reply {
    padding: 10px 0;
    display: none; /* 기본은 접힘(숨김) 상태 */
}

.tarae-list {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.tarae-list>* {
	display: table-cell;
	position: relative;
	vertical-align: middle;
}

.tarae-list .thumb {
	width: 80px;
	vertical-align: top;
}

.tarae-list .thumb>* {
	display: block;
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	padding-top: 100%;
	border-radius: 100%;
	border: 1px solid var(--default_color);
}

.tarae-list .thumb>* img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tarae-list .thumb~.desc {
	padding-left: 20px;
}

.tarae-list .desc .subj {
	display: block;
	position: relative;
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tarae-list .desc .txt {
	display: block;
	line-height: 1.4em;
}
.tarae-list .desc .toggle-btn {display:inline-block; margin:1em 0 0 0em; font-size:15px;}

.tarae-list .desc .date {
	display: inline-block;
	vertical-align: middle;
	margin-top: .5em;
}

.tarae-list .control {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: .5em;
	line-height: 1;
}

.tarae-list .control a {
	line-height: 20px !important;
	height: 20px !important;
	font-size: 11px !important;
}

.tarae-list .control a+a {
	margin-left: 5px;
}

/* reply 하단 컨트롤 버튼 정렬 */
.tarae-list .control.bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: .5em 0 0;
}

/* reply 인라인 레이아웃: 본문 좌측, 버튼 우측 */
.reply-inline {display:flex; align-items:center; gap:.5em;}
.reply-inline .txt {flex:1;}

/**********************************************
	파일 업로드 스타일
**********************************************/

.post-upload {
    margin: 10px 0;
}

.wr-upload {border:2px dashed #ddd; border-radius:8px; padding:20px; text-align:center; background:#f9f9f9; transition:all .3s ease;}

.wr-upload:hover {
    border-color: #007cba;
    background: #f0f8ff;
}

.post-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.title-text {
    font-weight: bold;
    color: #333;
}

.info-text {
    font-size: 12px;
    color: #666;
}

.dropzone {min-height:100px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;}

.dropzone.drag-over {
    border-color: #007cba;
    background: #e6f3ff;
}

.preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn:hover {
    background: rgba(255, 0, 0, 1);
}