@charset "UTF-8";

		/*-- 追加css --*/

		/* === はみ出し防止の設定 === */
		.input-section, .output-section, .input-group {
			min-width: 0;
		}

		select.text-input {
			width: 100%;
			max-width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			cursor: pointer;
		}

		/* -----------------------------------------------------------------
		   サイズ選択オプション（縦長・横長一覧UI）
		   ----------------------------------------------------------------- */
		.options-area {
			background: #fcfcfc;
			min-height: 100px;
			padding: 1rem;
			border-radius: 8px;
			border: 1px solid var(--tab_color);
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		.orientation-title {
			font-size: 0.9rem;
			font-weight: bold;
			color: var(--head_color);
			margin-bottom: 0.5rem;
			border-left: 3px solid var(--icon_blue_color);
			padding-left: 0.5rem;
		}

		.size-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
			gap: 0.8rem;
		}

		.size-option-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.8rem 0.5rem;
			background-color: #fff;
			border: 2px solid var(--tab_color);
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.2s;
			color: var(--font_dark_color);
			font-size: 0.85rem;
			font-weight: bold;
			text-align: center;
			user-select: none;
		}

		.size-option-btn:hover {
			border-color: var(--icon_blue_color);
			background-color: rgba(71, 172, 210, 0.05);
		}

		/* 選択状態のデザイン */
		.size-option-btn.selected {
			background-color: var(--icon_blue_color);
			border-color: var(--icon_blue_color);
			color: #fff;
			box-shadow: 0 4px 10px rgba(71, 172, 210, 0.3);
		}

		/* 実際のチェックボックスは隠す */
		.size-option-btn input[type="checkbox"] {
			display: none;
		}

		/* プレビューグリッドの幅調整 */
		.preview-grid {
			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		}

		/* スマホ向けのレイアウト・余白調整 */
		@media (max-width: 600px) {
			.main-container { padding: 1rem; }
			.tool-wrapper { padding: 1.5rem 1rem; }
		}