@charset "utf-8";

/********** Illust View **********/
.IllustItemList {
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
	transition: all 500ms 0s ease;

	&.ov {
		max-width: 100%;
		.IllustItem {
			padding: 0px;
		}
	}

	.IllustItem {
		display: block;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		overflow: hidden;
		padding: 16px 16px 0 16px;
		transition: all 300ms 0s ease;

		@media (min-width: 600px) {
			margin: 40px auto;
		}

		.IllustItemUser {
			display: flex;
			flex-flow: row nowrap;
			width: 100%;
			box-sizing: border-box;
			position: relative;
			text-align: center;
			margin: 0 0 12px 0;

			.IllustItemUserThumb {
				display: block;
				flex: 0 0 34px;
				width: 34px;
				height: 34px;
				overflow: hidden;
				border-radius: 9999px;
				background-color: #fff;
				background-size: cover;
				background-position: 50% 50%;
				background-repeat: no-repeat;
			}

			.IllustItemUserName {
				display: flex;
				align-items: center;
				padding: 0;
				margin: 0 0 0 10px;
				text-align: left;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
			}

			.IllustItemUserTwitter {
				display: flex;
				align-items: center;
				font-size: 13px;
				color: #536471;
				margin: 0 0 0 5px;
				overflow: hidden;
			}

			.IllustItemUserCmd {
				display: flex;
				justify-content: end;
				align-items: center;
				flex-grow: 1;

				.IllustItemUserCmdBtn {
					width: 32px;
					height: 32px;
					background: url('/img/cmd_trash.svg') 50% 50% no-repeat;
					background-size: 18px;

					&.Twitter {
						background-image: url(/img/cmd_twitter.svg);
					}
				}
			}
		}

		.IllustItemThumb {
			display: block;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			min-height: 60px;
			margin: 0 0 5px 0;
			position: relative;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-webkit-touch-callout: none;

			& img {
				display: block;
				width: 100%;
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-touch-callout: none;
			}

			&.poen_id_1,
			&.open_id_2 {
				cursor: pointer;
			}

			.IllustItemThumbImg {
				display: block;
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-touch-callout: none;
			}

			&.open_id_2,
			&.open_id_3,
			&.open_id_4 {
				.IllustItemThumbImg {
					width: 30%;
					padding: 0% 35%;
				}
			}

			.IllustItemThumbFg,
			.IllustItemThumbBg {
				position: absolute;
				background-color: rgba(0, 0, 0, 0);
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-touch-callout: none;

				& img {
					display: block;
					width: 100%;
					user-select: none;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					-webkit-touch-callout: none;
				}
			}

			.IllustItemThumbBg {
				& img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		.IllustItemDlg {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			width: 100%;

			.IllustItemDlgMsg {
				margin: 0 0 8px 0;
			}

			.IllustItemDlgFrame {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-flow: row;

				.IllustItemDlgBtn {
					min-width: 70px;
					margin: 0 10px;
					padding: 0 8px;
				}

				.IllustItemDlgPassword {
					height: 32px;
					width: 200px;
					line-height: 32px;
					padding: 0 5px 0 32px;
					border: none;
					border-bottom: dashed 1px var(--color-border);
					font-size: 14px;
					background: url(/img/icon_key.svg) 0% 50% no-repeat;
					background-size: 24px;
				}
			}
		}

		.IllustItemInfo {
			display: flex;
			flex-flow: column;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			padding: 2px 0;

			.IllustItemInfoDescription {
				margin: 12px 0 0 0;
				font-size: 14px;
			}

			.IllustItemInfoDate {
				margin: 14px 0 0 0;
				color: var(--color-gray);
				font-size: 12px;
			}
		}

		.IllustItemData {
			margin: 12px 0 0 0;
		}
	}
}


/**********IllustView InfoForm **********/
.InfoForm {
	display: block;
	float: left;
	width: 100%;
	box-sizing: border-box;
	margin: 30px 0 0 0;
	font-size: 11px;
	text-align: right;
}