html{
	scroll-behavior:smooth;
}

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

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

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

.thumb img{
	width:120px;
}

.comment{
	padding: 5px;
	border-bottom: 1px solid #ddd;
}

.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 {
	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-header {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.comment-header .left {
	flex: 1;
}

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

*/

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

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

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

.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);
}

.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-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{
	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:10px;
	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{
	max-width:500px;
	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;
}

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

	}
	100%{
		background:transparent;
	}
}

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

.sp-only{
	display: none;
}

.site-header{
	display:flex;
	width:100%;
	background:navy;
	color:#fff;
	margin-bottom:15px;
}

.header-left{
	width:30%;
	padding:10px;
	text-align:left;
	border-right:1px solid rgba(255,255,255,0.25);
}

.header-right{
	width:70%;
	padding:10px;
	text-align:right;
}

.header-link{
	color:#fff;
}

.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;
}