Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Light: Light: /* [기본 레이아웃] */ .product-item { max-width: 500px; margin: 40px auto; font-family: 'Helvetica', Arial, sans-serif; } /* [이미지 영역] */ .image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1.2; overflow: hidden; margin-bottom: 15px; background-color: #f5f5f5; transition: background-color 0.6s ease; } .image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease-in-out; } .photo-off { z-index: 1; opacity: 1; } .photo-on { z-index: 2; opacity: 0; } /* 조명 ON 상태: 이미지 전환 */ .product-item.is-on .image-wrapper { background-color: #ffffff; } .product-item.is-on .photo-on { opacity: 1; } /* [버튼 정렬] */ .controls-wrapper { width: 100%; display: flex; justify-content: flex-end; } .controls-container { display: flex; align-items: center; gap: 10px; cursor: pointer; } /* 텍스트 스타일: 볼드 처리 제거 */ .label-text { font-size: 16px; color: #333; font-weight: 400; /* 항상 일반 굵기 유지 */ transition: color 0.3s ease; } /* [스위치 트랙] */ .switch-track { position: relative; width: 50px; height: 26px; border: 1.5px solid #333; border-radius: 20px; background-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } /* [스위치 원] */ .switch-circle { position: absolute; top: 4px; left: 5px; width: 16px; height: 16px; background-color: #333; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; } /* ---------------------------------------------------- 조명 ON(is-on) 상태 스타일 (텍스트 굵기 변경 제외) ---------------------------------------------------- */ /* 1. 트랙 배경 검은색 반전 */ .product-item.is-on .switch-track { background-color: #333; } /* 2. 내부 원 흰색 반전 및 이동 */ .product-item.is-on .switch-circle { transform: translateX(22px); background-color: #ffffff; } /* 3. 조명 켜졌을 때도 텍스트 굵기는 그대로 유지 */ .product-item.is-on .label-text { font-weight: 400; /* 굵게 변하지 않도록 고정 */ }
