@media screen and (max-width: 768px){

	*{
		box-sizing:border-box;
	}

	html{
		scroll-behavior:smooth;
	}

	body{
		margin:0;
		padding:8px;
		font-family:"Arial", sans-serif;
		font-size:14px;
		line-height:1.6;
		overflow-x:hidden;
		color:#000;
		background:#fff;
	}

	img{
		max-width:100%;
		height:auto;
	}

	a{
		word-break:break-all;
	}

	.pc-only{
		display:none !important;
	}

	.sp-only{
		display:block !important;
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	textarea,
	select{
		width:100%;
		max-width:100%;
		font-size:16px;
		box-sizing:border-box;
	}

	textarea{
		min-height:100px;
	}

	button,
	input[type="submit"],
	input[type="button"]{
		max-width:100%;
		cursor:pointer;
	}

	header,
	.header,
	.page-header{
		display:block;
		width:100%;
		margin-bottom:10px;
	}

	.header-left,
	.header-right,
	.page-header-left,
	.page-header-right{
		display:block;
		width:100%;
		text-align:left;
		margin-bottom:8px;
		word-break:break-all;
	}

	.container,
	.main,
	.content,
	.wrapper{
		width:100%;
		max-width:100%;
		padding:0;
		margin:0;
	}

	.thumb{
		display:inline-block;
		width:46%;
		margin:6px 1%;
		text-align:center;
		vertical-align:top;
	}

	.thumb img{
		width:100%;
		max-width:120px;
		height:auto;
	}

	.thread-box,
	.file-box,
	.post-box{
		width:100%;
		max-width:100%;
		margin:10px 0;
	}

	#drop-zone{
		width:100%;
		max-width:100%;
		height:160px;
		padding:1em;
	}

	#preview{
		width:100%;
		max-width:100%;
	}

	#preview li{
		width:100%;
		height:auto;
		align-items:flex-start;
	}

	#preview img{
		width:80px;
		height:80px;
	}

	#clear-btn{
		width:70px;
		height:28px;
	}

	form{
		max-width:100%;
	}

	form input,
	form textarea,
	form select{
		margin-bottom:6px;
	}

	#main-image,
	.main-image{
		max-width:100%;
		height:auto;
	}

	.comment{
		width:100%;
		max-width:100%;
		box-sizing:border-box;
		padding:6px 0;
		margin:0;
		border-bottom:1px solid #ddd;
		background:#fff;
		overflow-wrap:break-word;
		word-break:break-word;
	}

	.comment.mine{
		background:#fff8dc;
	}

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

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

	.comment-header .right{
		display:block;
		width:100%;
		margin-top:2px;
		text-align:left;
		white-space:normal;
		font-size:11px;
		color:#800000;
	}

	.left{
		display:block;
		width:100%;
	}

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

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

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

	.ip_address,
	.comment .ip_address{
		color:red;
		font-size:11px;
		word-break:break-all;
	}

	.uid,
	.comment .uid{
		color:#008800;
		font-size:11px;
		word-break:break-all;
		overflow-wrap:anywhere;
	}

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

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

	div.comment p{
		font-size:15px;
		font-weight:normal;
		color:#000;
		margin:6px 0;
	}

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

	.popup{
		position:absolute;
		background:#ffc;
		color:#666;
		border:1px solid #ccc;
		padding:8px;
		max-width:90vw;
		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.new-comment{
		animation:flash 2s;
	}

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

	#clear-ng-btn{
		border:1px solid #000;
		cursor:pointer;
	}

	#clear-ng-btn:hover{
		background:#ffecec;
		color:#c00;
		cursor:pointer;
	}

	div.report,
	.report{
		width:100%;
		text-align:left;
		margin-top:4px;
	}

	.report-button{
		border:1px solid #ccc;
		background:#f5f5f5;
		color:#000;
		font-size:11px;
		padding:2px 6px;
		border-radius:5px;
		cursor:pointer;
	}

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

	#report_form{
		text-align:left;
	}

	#comment-form{
		width:100%;
		max-width:100%;
	}

	#comment{
		width:100%;
		max-width:100%;
	}

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

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

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

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

	#new-comment-btn{
		position:fixed;
		left:50%;
		transform:translateX(-50%);
		bottom:90px;
		width:auto;
		max-width:90%;
		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;
	}

	#scroll-buttons{
		position:fixed;
		right:8px;
		bottom:8px;
		display:none;
		flex-direction:column;
		gap:8px;
		z-index:9999;
	}

	#scroll-buttons button{
		width:42px;
		height:42px;
		border:none;
		border-radius:50%;
		background:#333;
		color:#fff;
		font-size:18px;
		cursor:pointer;
		box-shadow:0 2px 6px rgba(0,0,0,0.3);
	}

	#scroll-buttons button:hover{
		background:#555;
	}

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

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

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

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

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

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

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

	table{
		width:100%;
		display:block;
		overflow-x:auto;
		white-space:nowrap;
	}

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

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

	.jump-highlight{
		background:#fffa9c !important;
		transition:background 0.5s;
	}

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

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

	.comment .no,
	.comment .ip_address,
	.comment .uid{
		font-size:11px;
	}

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

	div.comment p{
		font-size:15px;
	}

	.ng-user-btn{
		font-size:11px;
		padding:2px 6px;
	}

	body.login{
		padding:12px;
		background:#f5f5f5;
	}

	body.login .login-box{
		width:100%;
		max-width:360px;
		margin:40px auto;
		padding:20px;
		background:#fff;
		border-radius:8px;
	}

	body.login .login-box input{
		width:100%;
		padding:10px;
		margin:10px 0;
		font-size:16px;
	}

	body.login .login-box button{
		width:100%;
		padding:10px;
		font-size:16px;
		background:#2196F3;
		color:#fff;
		border:none;
	}

	body.login .login-box p{
		text-align:center;
	}

	body.login .error{
		color:red;
	}

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

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

	.header-right{
		width:100%;
		padding:8px 10px;
		text-align:left;
		line-height:1.8;
	}

	.header-link{
		color:#fff;
	}

	.login-label,
	.login-email{
		display:block;
	}

	.header-separator{
		display:none;
	}

	body.register{
			padding:12px;
			background:#f5f5f5;
		}

		body.register .box{
			width:100%;
			max-width:360px;
			margin:40px auto;
			padding:20px;
			background:#fff;
			border-radius:8px;
		}

		body.register .box input,
		body.register .box button{
			width:100%;
			box-sizing:border-box;
			font-size:16px;
		}

		body.forgot{
			padding:12px;
			background:#f5f5f5;
		}

		body.forgot .box{
			width:100%;
			max-width:360px;
			margin:40px auto;
			padding:20px;
			background:#fff;
			border-radius:8px;
		}

		body.forgot .box input,
		body.forgot .box button{
			width:100%;
			box-sizing:border-box;
			font-size:16px;
		}

		body.reset{
			padding:12px;
			background:#f5f5f5;
		}

		body.reset .box{
			width:100%;
			max-width:360px;
			margin:40px auto;
			padding:20px;
			background:#fff;
			border-radius:8px;
		}

		body.reset .box input,
		body.reset .box button{
			width:100%;
			box-sizing:border-box;
			font-size:16px;
		}

	body.verify{
		padding:12px;
		background:#f5f5f5;
	}

	body.verify .box{
		width:100%;
		max-width:360px;
		margin:40px auto;
		padding:20px;
		background:#fff;
		border-radius:8px;
	}

	body.forgot p.error{
		color:red !important;
		font-weight:bold;
	}

	body.forgot p.success{
		color:#2e7d32 !important;
		font-weight:bold;
	}

	body.upload{
		padding:8px;
	}

	body.upload #upload_form{
		width:100%;
		max-width:100%;
	}

	body.upload #drop-zone{
		width:100%;
		height:180px;
		padding:18px;
		text-align:left;
		line-height:1.7;
	}

	body.upload #clear-btn{
		display:inline-block;
		margin:10px 0;
	}

	body.upload .upload-table,
	body.upload .upload-table tbody,
	body.upload .upload-table tr,
	body.upload .upload-table th,
	body.upload .upload-table td{
		display:block;
		width:100%;
	}

	body.upload .upload-table th{
		padding:10px 0 2px;
		font-weight:bold;
	}

	body.upload .upload-table td{
		padding:0 0 6px;
	}

	body.upload input[type="text"],
	body.upload input[type="email"],
	body.upload input[type="password"],
	body.upload textarea{
		width:100%;
		max-width:100%;
		box-sizing:border-box;
		font-size:16px;
	}

	body.upload textarea{
		min-height:120px;
	}

	body.upload #submit_button{
		width:100%;
		padding:10px;
		margin-top:10px;
		font-size:16px;
	}

	body.admin-mail-log{
		padding:8px;
	}

	body.admin-mail-log .mail-log-box{
		width:360px;
/*		max-width:100%; */
		max-width:360px;
		padding:10px;
		margin:10px 0;
	}

	body.admin-mail-log .mail-body{
		font-size:13px;
		word-break:break-all;
		overflow-wrap:anywhere;
	}

	body.admin-mail-log .meta{
		font-size:12px;
		line-height:1.6;
	}

}