/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root {
    --davinci-bg: #121212;
    --davinci-surface: #1e1e1e;
    --davinci-accent: #ffb74d;
    --davinci-text: #e0e0e0;
    --davinci-block-hover: #2d2d2d;
    --davinci-danger: #ff4444;
}

/* =========================================
   Container & Layout
   ========================================= */
.davinci-studio-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: var(--davinci-bg) !important;
    /* [FIX] Force dark theme */
    color: var(--davinci-text);
    overflow: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    /* [FIX] Inherit main app font */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: background-color 0.5s ease;
}

/* Atmosphere Styles */
.davinci-studio-container[data-atmosphere="rainy"] {
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
}

.davinci-studio-container[data-atmosphere="warm"] {
    background: linear-gradient(to bottom, #1f1c18, #3e2b26);
}

.davinci-studio-container[data-atmosphere="dark"] {
    background: #000;
}

/* =========================================
   Sidebar (Toolbox)
   ========================================= */
.davinci-toolbox {
    width: 260px;
    background-color: var(--davinci-surface);
    border-right: 1px solid #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
    position: relative;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.davinci-tool-header {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--davinci-accent);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.davinci-block-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    color: #ddd;
    position: relative;
}

.davinci-block-btn:hover {
    background: var(--davinci-block-hover);
    border-color: var(--davinci-accent);
    transform: translateX(4px);
}

.davinci-block-btn i,
.davinci-block-btn span.material-symbols-outlined {
    color: var(--davinci-accent);
}

.davinci-block-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(1);
}

/* =========================================
   Canvas Area
   ========================================= */
.davinci-canvas-area {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    display: flex;
    justify-content: center;
    background-image: radial-gradient(#222 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background 0.5s ease;
    position: relative;
    z-index: 1;
}

.davinci-paper {
    width: 100%;
    max-width: 720px;
    min-height: 80vh;
    background-color: #1a1a1a;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    padding: 60px;
    border-radius: 4px;
    position: relative;
    transition: all 0.5s ease;
    z-index: 2;
}

/* =========================================
   Blocks
   ========================================= */
.davinci-block {
    position: relative;
    margin-bottom: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: box-shadow 0.2s;
    /* overflow: visible is critical for floating delete buttons */
    overflow: visible !important;
}

.davinci-block:hover {
    box-shadow: 0 0 0 1px rgba(255, 183, 77, 0.3);
}

/* Floating Toolbar */
.davinci-floating-toolbar {
    position: absolute;
    z-index: 20000;
    /* [FIX] Must be higher than Studio (9999) */
    background-color: #1f2937;
    /* Gray 800 */
}

.davinci-block .handle {
    position: absolute;
    left: -30px;
    top: 12px;
    color: #555;
    cursor: grab;
    opacity: 0;
    padding: 4px;
    z-index: 5;
}

.davinci-block:hover .handle {
    opacity: 1;
}

.davinci-block .btn-delete-block {
    position: absolute;
    right: -60px;
    /* Adjusted closer */
    top: 50%;
    transform: translateY(-50%);
    background: #222;
    border: 1px solid #444;
    color: var(--davinci-danger);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.davinci-block:hover .btn-delete-block {
    opacity: 1;
    right: -50px;
}

.davinci-block .btn-delete-block:hover {
    background: var(--davinci-danger);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

/* Text Block */
.dv-text-block {
    width: 100%;
    background: transparent;
    border: none;
    color: #eee;
    font-size: 1.15rem;
    line-height: 1.8;
    resize: none;
    outline: none;
    font-family: 'Nanum Myeongjo', serif;
    min-height: 1.8em;
    /* [FIX] Allow expansion */
    height: auto;
    overflow: visible !important;
    /* Let it grow freely */
    /* Hide scrollbar, let it grow */
    padding: 8px;
    border: 1px dashed #333;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.dv-text-block:hover,
.dv-text-block:focus {
    border-color: #555;
    background: rgba(255, 255, 255, 0.02);
}

.dv-text-block::placeholder {
    color: #444;
    font-style: italic;
}

/* Image Block */
.dv-image-block {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #000;
    min-height: 100px;
}

.dv-image-block img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.dv-image-placeholder {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #777;
    border: 1px dashed #444;
    border-radius: 4px;
    cursor: pointer;
    gap: 10px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.dv-image-placeholder:hover {
    border-color: var(--davinci-accent);
    color: var(--davinci-accent);
    background: rgba(255, 183, 77, 0.05);
}

/* =========================================
   Settings Modal (Static)
   ========================================= */
.davinci-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    /* Controlled by JS toggle class 'open' or inline style */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.davinci-modal-overlay.open {
    display: flex;
    animation: dv-fadeIn 0.2s;
}

.davinci-modal {
    background: #1e1e1e;
    width: 500px;
    max-width: 90%;
    border-radius: 12px;
    border: 1px solid #333;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.davinci-modal h2 {
    margin: 0 0 20px 0;
    color: var(--davinci-accent);
    font-size: 1.5rem;
}

.dv-form-group {
    margin-bottom: 20px;
}

/* =========================================
   Preview Popup Animation
   ========================================= */
/* Animation Removed by User Request */

.dv-form-label {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 8px;
}

.dv-form-input {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    color: #eee;
    padding: 10px;
    border-radius: 6px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.dv-form-input:focus {
    border-color: var(--davinci-accent);
    outline: none;
}

.dv-thumbnail-preview {
    width: 100%;
    height: 150px;
    background: #111;
    border: 1px dashed #444;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.2s;
}

.dv-thumbnail-preview:hover {
    border-color: var(--davinci-accent);
}

/* Checkbox Style */
.dv-checkbox-group {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.dv-checkbox-group input {
    display: none;
}

.dv-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #555;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dv-checkbox-group input:checked+.dv-checkbox-box {
    background: var(--davinci-accent);
    border-color: var(--davinci-accent);
    color: #000;
}

@keyframes dv-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dv-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 183, 77, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 183, 77, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 183, 77, 0);
    }
}

/* =========================================
   Da Vinci Viewer Styles (Merged from src/lab/davinci/styles/viewer.css)
   ========================================= */

/* Root Scoping to prevent leaks */
.davinci-viewer-root {
    width: 100%;
    min-height: 100vh;
    background-color: var(--davinci-bg);
    /* Use shared var */
    color: var(--davinci-text);
    /* Use shared var */
    font-family: 'Nanum Myeongjo', serif;
    position: relative;
    overflow-x: hidden;
    /* Prevent horizontal scroll from effects */
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   Layers
   ========================================= */
.dv-layer-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: background-color 2s ease, opacity 2s ease;
    /* Ambient Light Source */
    background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0) 0%, var(--davinci-bg) 80%);
}

.dv-layer-content {
    position: relative;
    z-index: 10;
    /* [FIX] Removed max-width: 768px restriction from container to allow full-width images */
    width: 100%;
    padding: 0 0 200px 0;
    /* Footer Space */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center all children */
}

/* =========================================
   Typography & Blocks
   ========================================= */
.dv-block {
    width: 100%;
    /* Ensure blocks take full width of container */
    margin-bottom: 2rem;
    opacity: 0;
    /* Default invisible */
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
    display: flex;
    justify-content: center;
    /* Center content within block */
}

.dv-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.dv-text-container {
    /* [FIX] Apply width restriction ONLY to text */
    width: 100%;
    max-width: 768px;
    padding: 0 1.5rem;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--davinci-text) !important;
    /* [FIX] Force color specificity */
    text-align: justify;
    word-break: keep-all;
    white-space: pre-wrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dv-paragraph {
    margin-bottom: 0.8rem;
    /* Paragraph spacing */
    min-height: 1rem;
}

.dv-paragraph.type-dialogue {
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--davinci-accent);
    /* Changed to Accent Color */
    color: var(--davinci-text) !important;
    font-weight: 700;
}

/* Image Wrapper: Full Width capable */
.dv-image-wrapper {
    position: relative;
    width: 100%;
    /* Allow full width */
    max-width: 100%;
    /* Ensure it doesn't overflow viewport */
    margin: 3rem 0;
    overflow: hidden;
    line-height: 0;
    display: flex;
    justify-content: center;
    background-color: #000;
}

/* Image: Aspect Ratio Preserved */
.dv-image {
    width: 100%;
    /* [FIX] Force full width as requested */
    max-width: 100%;
    /* Limit to container width */
    height: auto;
    display: block;
    transform: scale(1.05);
    /* Slight Zoom for Ken Burns */
    transition: transform 3s ease-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    /* Horizontal Center */
}

/* [FIX] For small images, we might want to prevent them from looking too small if that's the issue.
   But user said "Image size is small... no, aspect ratio...". 
   If we want small images to be at least somewhat large, we can set min-width.
   But usually 'width: auto; max-width: 100%' works best for aspect ratio.
   If the user wants "Full Screen" for *all* images, we would use 'width: 100%; object-fit: contain;'.
   Given "Aspect Ratio" request, 'width: auto; max-width: 100%' is safest. 
*/

.dv-block.visible .dv-image {
    transform: scale(1);
}

/* Mobile Bleed */
@media (max-width: 768px) {
    .dv-image-wrapper {
        margin: 2rem 0;
        box-shadow: none;
    }
}

/* =========================================
   Security
   ========================================= */
.dv-secure-guard {
    position: absolute;
    inset: 0;
    z-index: 50;
    /* Transparent overlay to block Right Click/Save As on Image */
}

/* =========================================
   UI Components
   ========================================= */
.dv-copyright {
    text-align: center;
    padding: 40px 20px;
    font-family: sans-serif;
    font-size: 0.75rem;
    color: #555;
    border-bottom: 1px solid #222;
    background: linear-gradient(to bottom, #1a1a1a, var(--davinci-bg));
    margin-bottom: 60px;
    width: 100%;
}

.dv-copyright strong {
    color: #e53935;
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

/* Navigation Footer */
.dv-nav-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 1px solid #222;
    width: 100%;
    max-width: 768px;
    /* Footer stays constrained */
}

.dv-nav-btn {
    flex: 1;
    padding: 16px;
    border-radius: 12px;
    background: #1f1f1f;
    border: 1px solid #333;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: sans-serif;
}

.dv-nav-btn:hover:not(:disabled) {
    background: #333;
    color: white;
    border-color: #555;
}

.dv-nav-btn.primary {
    background: var(--davinci-accent);
    color: #000;
    border-color: transparent;
}

.dv-nav-btn.primary:hover {
    filter: brightness(1.1);
}

.dv-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Animation Utilities */
.fade-up {
    animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}