@charset "UTF-8";

/* 1. サイト全体の干渉を防ぐため、専用クラス内でのみ変数を定義 */
.product-viewer-unit {
    --viewer-accent: #007AFF;
    
    width: 100%;
    user-select: none;
    touch-action: pan-y;
}

/* 2. カードスタイルの適用 */
.product-viewer-unit .viewer-card {
    background: var(--viewer-bg);
    padding: clamp(15px, 5%, 30px); /* 画面幅に合わせて余白を調整 */
    box-shadow: var(--viewer-shadow);
    text-align: center;
}

/* 3. 画像コンテナ（ドラッグ操作エリア） */
.product-viewer-unit .image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    cursor: grab;
    overflow: hidden; /* 画像のはみ出し防止 */
}

.product-viewer-unit .image-container:active {
    cursor: grabbing;
}

/* 4. 画像要素の制御 */
.product-viewer-unit .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    pointer-events: none; /* ドラッグ操作を画像が邪魔しないように */
}

.product-viewer-unit .product-image.active {
    display: block;
}

/* 5. スライダーコントロール */
.product-viewer-unit .controls {
    width: 100%;
}

.product-viewer-unit .spin-slider {
    width: 100%;
    accent-color: var(--viewer-accent);
    cursor: pointer;
    margin: 10px 0;
}

/* 6. 説明文など */
.product-viewer-unit .viewer-help-text {
    color: #666;
    font-size: 0.85rem;
    margin-top: 15px;
    line-height: 1.4;
}