html{
	scroll-behavior:smooth;
}

body{
	font-size:16px;
	font-family: "Arial", sans-serif;
}

/*.liked{
	background-color: #eee;
	color: #000;
}

*/

h1.thread-title{
	font-size:20px;
	color:#666;
}

h2.thread-keyword{
	font-size:18px;
	color:#999;
}


.thumb{
	display:inline-block;
	margin:10px;
	text-align:center;
}

.thumb img{
	width:120px;
}

.comment .no{
	color: #999;
}

.comment .uid{
	color: #008800;
}

.comment.mine{
	background: #fff8dc;
}

.reply{
	color: blue;
	cursor: pointer;
}

.popup{
	background: #ffffcc;
	border: 1px solid #333;
	padding: 5px;
	max-width: 300px;
	position: absolute;
	z-index: 1000;
}

#drop-zone{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	max-width: 100%;
	height: 200px;
	padding: 1em;
	border: 1px solid #cccccc;
	border-radius: 4px;
	color: slategray;
	cursor: pointer;
}

#drop-zone.dragover{
	background: #eef;
}

/*textarea.comment{
	display:block;
	width:300px;
	height:100px;
	resize: none;
	display: block;
}
*/

#file-input{
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

#preview{
	width: 500px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	list-style: none;
	padding: 0;
}

#preview li{
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	width: 100%;
	height: 100px;
}

#preview img{
	width: 100px;
	height: 100px;
	object-fit: cover;
}

#clear-btn{

	background-color:#eee;
	cursor: pointer;
	display:block;
	width:60px;
	height:25px;
	text-align:center;

}

#clear-btn:hover{

	background-color:#fee;
	cursor: pointer;

}

a#login, a#logout, #new_up{

	color:inherit;

}

.date{
	color: #888;
	font-size: 12px;
	margin-left: 10px;
}

.comment{
	padding: 5px;
	border-bottom: 1px solid #ddd;
	width: 100%;
	max-width: 500px;
	box-sizing: border-box;
}

.comment-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.comment-header .left{
	display: flex;
	gap: 5px;
	flex: 1;
}

.comment-header .right{
	flex-shrink: 0;
	white-space: nowrap;
}

.comment.mine .comment-header{
	font-weight: nomal;
}

.reply{
	color:#007bff;
	cursor:pointer;
}

.popup{
	position:absolute;
	background:#ffc;
	color:#666;
	border:1px solid #ccc;
	padding:8px;
	max-width:300px;
	z-index:9999;
	white-space:pre-wrap;
	pointer-events:none;
	font-size: 14px;
	box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.comment p a{
	color:#0066cc;
	text-decoration:underline;
	cursor:pointer;
	pointer-events:auto;
}

.left{
	display:flex;
	align-items:center;
	gap:4px;
}

.no.reply-link{
	cursor:pointer;
	color:#999;
	font-size:11px;
	display:inline-flex;
	align-items:center;
}

.ip_address{
	color:red;
	font-size:11px;
}

.uid{
	color:#008800;
	font-size:11px;
}

span.no{
	font-size:12px;
	color:#66f;
}

/* span.uid{
	font-size:12px;
	color:#000080;
}*/

div.right{
	font-size:11px;
	color:#800000;
}

.comment.new-comment{
	animation: flash 2s;
}

@keyframes flash{

	0%{
		background:#cfffcc;
	}

	100%{
		background:transparent;
	}

}

#scroll-buttons{

	position: fixed;

	right: 20px;
	bottom: 20px;

	display: none;

	flex-direction: column;

	gap: 10px;

	z-index: 9999;

}

#scroll-buttons button{

	width: 50px;
	height: 50px;

	border: none;
	border-radius: 50%;

	background: #333;
	color: #fff;

	font-size: 20px;

	cursor: pointer;

	box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}

#scroll-buttons button:hover{

	background: #555;

}

#new-comment-btn{

	position: fixed;

	left: 50%;
	transform: translateX(-50%);

	bottom: 100px;

	padding: 10px 20px;

	border: none;
	border-radius: 20px;

	background: #007bff;
	color: #fff;

	cursor: pointer;

	display: none;

	z-index: 9999;

	box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}

#new-comment-btn:hover{

	background: #0056b3;

}

.jump-highlight{

	background: #fffa9c !important;
	transition: background 0.5s;

}

.meta{
	font-size:12px;
	color:#555;
	margin-top:3px;
}

div.sort{
	margin-top:10px;
	margin-bottom:0px;
}

.no{
	color:#999;
}

.no small{
	color:#666;
	font-size:11px;
}

span.resCounts{
	color:#00f;
}

.like-area{
	margin:15px 0;
}

#like-btn{
	padding:5px 10px;
	cursor:pointer;
	border:1px solid #aaa;
}

/*#like-btn.liked{
	color:#00f;
	background-color:#ddf;
	border:1px solid #00f;
	font-weight:bold;
}*/

textarea name#comment{
	margin-top:5px;
	margin-bottom:15px;
	margin-left:5px;
	margin-right:5px;
}

/*
.liked{
	color:#00f;
	background-color:#ddf;
	border:1px solid #00f;
}


#copy-message{

	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	margin-top: 8px;
	color: blue;

}

#copy-message.show{

	opacity: 1;
	transform: translateY(0);

}
*/

.like-btn{

	background:none;
	border:none;
	cursor:pointer;

	font-size:24px;
	color:#999;

	padding:0;
	margin:0 4px 0 0;

	transition:0.2s;

}

.like-btn:hover{

	transform:scale(1.15);

}

@keyframes likePop{

	0%{
		transform:scale(1);
	}

	40%{
		transform:scale(1.45);
	}

	60%{
		transform:scale(0.9);
	}

	100%{
		transform:scale(1);
	}

}

.like-btn.pop{

	animation:likePop 0.35s ease;

}

.like-btn.liked{

	color:#ff3366;
	text-shadow:0 0 8px rgba(255,51,102,0.5);

}

.copy-area{
	margin:15px 0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
}

.copy-area button{
	min-width:72px;
}

.action-btn{
	padding:8px 12px;
	border-radius:6px;
	font-size:15px;
}

.copy-btn{
	border:1px solid #ccc;
	background:#f7f7f7;
	padding:7px 12px;
	border-radius:18px;
	cursor:pointer;
	font-size:13px;
	transition:0.2s;
}

.copy-btn:hover{
	background:#eef4ff;
	border-color:#7aa7ff;
}

.copy-btn.copied{
	background:#2ecc71;
	color:#fff;
	border-color:#2ecc71;
	transform:scale(1.05);
}

#copy-message{
	opacity:0;
	transform:translateY(5px);
	transition:opacity 0.3s ease, transform 0.3s ease;
	color:#2e7d32;
	font-size:13px;
	margin-left:5px;
}

#copy-message.show{
	opacity:1;
	transform:translateY(0);
}

.ng-user-btn{
	border:1px solid #ccc;
	background:#f5f5f5;
	color:#555;
	font-size:11px;
	padding:2px 6px;
	border-radius:10px;
	cursor:pointer;
}

.ng-user-btn:hover{
	background:#ffe5e5;
	color:#c00;
}

.comment.ng-hidden{
	display:none;
}

#clear-ng-btn{

	border:1px solid #000;
/*	background:#fff;

	padding:5px 10px;

/*	border-radius:15px;*/

	cursor:pointer;

/*	font-size:12px;

	margin-bottom:10px;
*/

}

#clear-ng-btn:hover{

	background:#ffecec;
	color:#c00;
	cursor:pointer;

}

.next-thread-notice{
	width:100%;
	max-width:500px;
	margin:15px 0;
	padding:12px 15px;
	background:#fff8dc;
	border:1px solid #e0c36a;
	border-radius:8px;
	color:#6b4e00;
	line-height:1.7;
}

.report-button{

	border:1px solid #ccc;
	background:#f5f5f5;
	color:#000;
	font-size:13px;
	padding:2px 2px;
	border-radius:5px;
	cursor:pointer;

}

.report-button:hover{
	background:#ffe5e5;
	color:#c00;
}

div.report{

	text-align:right;

}
div.comment p{

	font-size:15px;
	font-weight:normal;
	color:#000;

}

/*prev-thread-link*/

.prev-notice{
	width:100%;
	max-width:500px;
	box-sizing:border-box;
	margin:15px 0;
	padding:12px 15px;
	background:#eef;
	border:1px solid #99f;
	border-radius:8px;
	color:#00f;
	line-height:1.7;
}

.search-result-list{
	margin-top:20px;
}

.search-item{
	padding:15px;
	border-bottom:1px solid #ccc;
}

.search-item h2{
	margin:0 0 8px 0;
	font-size:20px;
}

.search-item a{
	color:#0066cc;
	text-decoration:none;
}

.search-item a:hover{
	text-decoration:underline;
}

.keyword{
	color:#666;
	margin-bottom:5px;
}

.score{
	color:#999;
	font-size:12px;
}

.comment:target{
	animation: targetFlash 3s ease;
/*	outline:3px solid #ccf !important;
	background:#eef;*/
}

.reported-label{
	display:inline-block;
	color:#666;
	font-size:13px;
	line-height:1.6;
	background:transparent;
	border:none;
	padding:0;
}

@keyframes targetFlash{
	0%{
		outline:3px solid #ccf !important;
		/*background:#eef;*/

	}
	100%{
		outline:none;
		/*background:transparent;*/
	}
}

.notification{
	background:#fff3cd;
	border:1px solid #ffeeba;
	color:#856404;
	padding:5px;
	margin-bottom:10px;
}

.sp-only{
	display: none;
}

/* # # # # # # # # # # # # # # # # # #*/

.site-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	background:navy;
	color:#fff;
	padding:8px 12px;
	box-sizing:border-box;
}

.header-left,
.header-right{
	display:flex;
	align-items:center;
}

.header-right{
	margin-left:auto;
	gap:6px;
	white-space:nowrap;
}

.site-header a,
.header-link{
	color:#fff;
}

.login-info,
.login-email,
.header-separator{
	color:#fff;
}

.login-email{
	font-weight:normal;
}

#post-submit{
	font-weight:bold;
}

/* # # # # # # # # # # # # # # # # # #*/

.header-link{
	text-align:right;
	margin-left:8px;
}

.header-menu{
	white-space:nowrap;
}

.header-menu a{

	color:#fff;

}

/*
.header-menu a + a::before{

	content:"｜";
	margin:0 6px;
	color:#fff;

}
*/

/* # # # # # # # # # # # # # # # # # #*/

.header-link{
	color:#fff;
}

.top-header{

	display:flex;
	width:100%;
	margin-bottom:3px;
}
.top-left{
	width:50%;
	padding:0px;
	text-align:left;
/*	border-right:0px;*/
/*	border:1px solid blue;	*/
	background:#fff;
/	
/*	border-right:1px solid rgba(255,255,255,0.25);*/
}

.top-right{
	width:50%;
	padding:0px;
	text-align:right;
/*	border-left:0px; */
/*	border:1px solid red;	*/
	background:#fff;
	display: table-cell;
}

.login-email{
	word-break:break-all;
}

.mail-log-box{
	border:1px solid #ccc;
	padding:15px;
	margin:15px 0;
	background:#fff;
}

.meta{
	font-size:12px;
	color:#666;
	word-break:break-all;
}

.mail-body{
	white-space:pre-wrap;
	background:#f7f7f7;
	border:1px solid #ddd;
	padding:10px;
	margin-top:10px;
	word-break:break-all;
	overflow-wrap:anywhere;
}
.site-footer{

	margin-top:30px;
	padding:20px;
	text-align:center;
	border-top:1px solid #ddd;
	font-size:14px;
	color:#666;

}

.ban-badge{
	display:inline-block;
	margin-left:8px;
	padding:2px 8px;
	background:#900;
	color:#fff;
	border-radius:12px;
	font-size:12px;
	font-weight:bold;
}

.welcome-box{

	background:#fffff0;
	border:1px solid #ddd;
	padding:15px;
	margin:15px 0;
	border-radius:6px;
	line-height:1.8;
	text-align:center;

}

.welcome-box p{

	margin:8px 0;

}

.welcome-box strong{

	font-size:18px;

}

.about{
	width:500px;
	margin:8px 0;
	text-align:left;
	margin:10px auto;
}

ol.number{

	text-align:left;

}

ul.square{

	text-align:left;
	list-style-type: square;

}

hr.about{

	border-top:none;
	border-bottom:1px solid #ccc;
	margin-top:20px;
}

td.url{

	width:49%;
	text-align:center;
	border-bottom:1px solid #ccc;
	border-left:0px;
	border-right:0px;

}

.comment-textarea{
	width:300px;
	height:50px;
	margin:15px 0 8px 0;
	display:block;
}

.view-count{
	font-size:12px;
	margin-bottom:5px;
	color:#666;
}

.related-threads{
	margin:15px 0;
	padding:10px;
	border:1px solid #ddd;
}

.related-title{
	font-size:16px;
	margin-top:0;
}

.related-score{
	color:#999;
	font-size:12px;
}

div.account_box, div.account_delete_box{
	border:1px solid #ccc;
	padding:15px;
	margin:15px 0;
	max-width:670px;
	background:#fff;
}

.username{
	font-weight:normal;
	color:#336699;
	margin:0 8px 0 4px;
}

.comment-header{
	display:block;
	width:100%;
}

.comment-header .left{
	display:flex;
	flex-wrap:wrap;
	gap:4px 6px;
	width:100%;
}

.comment-header .right{
	display:block;
	width:100%;
	margin-top:4px;
	text-align:left;
	white-space:normal;
}

.username,
.ip_address,
.uid{
	overflow-wrap:anywhere;
	word-break:break-all;
}

div.terms{

	margin-top:20px;
	width:700px;

}

.login-info{
	white-space:nowrap;
}