@import url("/static/dgst/css/pages/safety_information.css");
@import url("/static/dgst/css/modules/tab.css");
@import url("/static/dgst/css/modules/table.css");
@import url("/static/dgst/css/modules/card.css");

/* 기본적으로 모바일 환경에서 이미지가 원본 크기로 스크롤되게 설정 */
.ghsClassificationTableImageWrapper {
	position: relative; /* 이미지 배치를 위한 기준 */
	width: 100%;
	height: auto; /* 필요 시 컨텐츠에 따라 자동으로 높이 설정 */
	white-space: nowrap; /* 이미지가 한 줄로 나타나도록 설정 */
	overflow-x: auto; /* 가로 스크롤 허용 */
}

.ghsClassificationTableImage {
	width: auto;
	height: auto;
	transform-origin: top left; /* 축소 시 기준점을 왼쪽 상단으로 */
	transform: scale(1); /* 80%로 축소 */
	white-space: nowrap; /* 이미지가 한 줄에 유지되도록 설정 */
}

/* 데스크탑 환경에서 이미지의 너비를 100%로 설정 */
@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
	.tab-trigger-container.inner.sixth .tab-trigger {
		flex-basis: calc(100% / 6 - 0.25rem);
		flex-grow: 0;
		flex-shrink: 0;
	}
	.ghsClassificationTableImageWrapper {
		position: relative; /* 상대적 배치로 복원 */
		overflow-x: hidden; /* 데스크탑에서는 가로 스크롤 제거 */
	}

	.ghsClassificationTableImage {
		position: relative; /* 데스크탑에서는 절대 위치 해제 */
		transform: none; /* 스케일링 제거 */
		max-width: 100%;
		width: 100%; /* 데스크탑에서 100% 너비로 표시 */
		height: auto;
	}
}