.image-figure {
margin: 0;
}
.image-wrapper {
position: relative;
display: inline-block;
max-width: 100%;
overflow: auto;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #f5f5f5;
}
.artifact-image {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.2s ease;
transform-origin: top left;
}
.image-controls {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
gap: 4px;
background: rgba(255,255,255,0.9);
padding: 4px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.control-btn {
width: 28px;
height: 28px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:hover {
background: #f0f0f0;
}
.image-caption {
margin-top: 8px;
color: #666;
font-size: 13px;
font-style: italic;
text-align: center;
}