@charset "UTF-8";

		/* プレビューエリアのグリッドレイアウト */
		.preview-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
			gap: 1rem;
			width: 100%;
			margin-top: 1rem;
			max-height: 400px;
			overflow-y: auto;
			padding: 10px;
			background-color: rgba(255,255,255,0.1);
			border-radius: 8px;
		}

		.preview-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			padding: 0.5rem;
			border-radius: 4px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		}

		.preview-item img {
			max-width: 100%;
			height: auto;
			display: block;
			margin-bottom: 0.5rem;
			background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
			background-size: 10px 10px;
			background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
		}

		.preview-info {
			font-size: 0.7rem;
			color: #666;
			text-align: center;
			word-break: break-all;
		}

		/* オプション選択エリア */
		.options-area {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			margin-bottom: 1.5rem;
			padding: 1rem;
			background-color: rgba(255,255,255,0.1);
			border-radius: 8px;
			border: 1px solid var(--tab_color);
		}

		.checkbox-label {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			cursor: pointer;
			color: var(--tab_color);
			font-weight: bold;
		}

		.checkbox-label input[type="checkbox"] {
			width: 18px;
			height: 18px;
			accent-color: var(--icon_blue_color);
		}

		/* アップロードエリアの調整 */
		.upload-area {
			text-align: center;
			border: 2px dashed var(--tab_color);
			padding: 2rem;
			border-radius: 8px;
			background-color: #fcfcfc;
			transition: all 0.3s;
			cursor: pointer;
		}
		.upload-area:hover {
			border-color: var(--pop_color);
			background-color: #fff;
		}
		.file-input {
			display: none;
		}

		/* プログレスバー */
		.progress-container {
			width: 100%;
			background-color: #e0e0e0;
			border-radius: 4px;
			margin-top: 10px;
			display: none;
		}
		.progress-bar {
			width: 0%;
			height: 10px;
			background-color: var(--btn_perple_color);
			border-radius: 4px;
			transition: width 0.3s;
		}