body { margin: 0; background: #121212; color: #eee; font-family: sans-serif; }
.app-container { display: flex; flex-direction: column; height: 100vh; }
header { padding: 20px; border-bottom: 1px solid #333; background: #1e1e1e; }

.drop-zone {
    border: 2px dashed #555; padding: 20px; text-align: center; cursor: pointer;
    transition: background 0.3s; margin-bottom: 15px;
}
.drop-zone.active { background: #333; border-color: #aaa; }

.control-panel { display: flex; gap: 10px; justify-content: center; }
button { 
    padding: 10px 15px; cursor: pointer; background: #007bff; color: white; 
    border: none; border-radius: 4px; transition: 0.2s;
}
button:hover { background: #0056b3; }
button:disabled { background: #444; cursor: not-allowed; }

/* 레이아웃 고정: 좌우 50:50 유지 및 넘침 방지 */
.viewer { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 180px); }
.panel { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    border: 1px solid #333; 
    min-width: 0; /* 콘텐츠 크기가 커져도 패널 크기 고정 */
}
.panel h3 { text-align: center; padding: 10px; margin: 0; background: #222; }

.canvas-wrapper, .render-container { 
    flex: 1; 
    overflow: auto; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
}

/* 로딩 오버레이 스타일 */
.render-container { position: relative; background: #000; width: 100%; height: 100%; }
.spinner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.spinner {
    width: 40px; height: 40px;
    border: 4px solid #333;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#original-preview { max-width: 100%; height: auto; }
.render-output { width: 100%; height: 100%; }