/* yong-viewer-dom.css — DOM & CSS3D 版スタイル */
.yong-viewer {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    box-shadow: var(--shadow, 0 6px 18px rgba(10, 10, 10, 0.06));
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* canvas-like wrapper: 3D perspective */
.viewer-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 72vh;
    background: linear-gradient(180deg, #fafafa, #f4f4f4);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* scene wrapper: provides perspective and scale */
.scene-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    --scene-translateZ: -420px;
    --scene-offsetY: 80px; /* 下シフトの初期値 */
    --scene-rotateX: -30deg;
    --scene-rotateY: 45deg;
    transform: translateY(var(--scene-offsetY))
        translateZ(var(--scene-translateZ)) rotateX(var(--scene-rotateX))
        rotateY(var(--scene-rotateY));
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* each cube container */
.cube {
    --u: 48px; /* unit side length (JS will set) */
    --half: calc(var(--u) / 2);
    position: absolute;
    width: var(--u);
    height: var(--u);
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: auto;
    user-select: none;
}

/* faces */
.cube .face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backface-visibility: hidden;
}

/* position faces by transforms */
.cube .face.front {
    transform: translateZ(var(--half));
}
.cube .face.back {
    transform: rotateY(180deg) translateZ(var(--half));
}
.cube .face.right {
    transform: rotateY(90deg) translateZ(var(--half));
}
.cube .face.left {
    transform: rotateY(-90deg) translateZ(var(--half));
}
.cube .face.top {
    transform: rotateX(90deg) translateZ(var(--half));
}
.cube .face.bottom {
    transform: rotateX(-90deg) translateZ(var(--half));
}

/* face shading tweaks for depth perception */
.cube .face.front {
    filter: brightness(0.98);
}
.cube .face.back {
    filter: brightness(0.85);
}
.cube .face.right {
    filter: brightness(0.92);
}
.cube .face.left {
    filter: brightness(0.9);
}
.cube .face.top {
    filter: brightness(1.05);
}
.cube .face.bottom {
    filter: brightness(0.8);
}

/* legend overlay */
.viewer-overlay {
    position: absolute;
    right: 12px;
    top: 12px;
    pointer-events: none;
}
.viewer-overlay .legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted, rgba(0, 0, 0, 0.55));
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* small screens */
@media (max-width: 799px) {
    .scene {
        transition: none;
    }
    .viewer-canvas-wrap {
        aspect-ratio: 4 / 3;
    }
    .cube {
        --u: 36px;
    }
}