/**
 * Help Modal Frame Styles [v1.0]
 * Premium Layer (Glassmorphism)
 */

:root {
    --modal-bg: rgba(255, 255, 255, 0.85);
    --modal-border: rgba(255, 255, 255, 0.2);
    --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --header-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

/* --- Modal Overlay (Dimmer) --- */
.help-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: none; /* JS toggles this */
    opacity: 0; transition: opacity 0.3s ease;
}
.help-modal-overlay.active { display: block; opacity: 1; }

/* --- Modal Container --- */
.help-modal-container {
    position: fixed; top: 50%; left: 50%;
    width: 90%; max-width: 1000px; height: 85%; max-height: 800px;
    background: var(--modal-bg);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid var(--modal-border);
    box-shadow: var(--modal-shadow);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0.9) translateY(20px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-modal-overlay.active .help-modal-container { transform: translate(-50%, -50%) scale(1) translateY(0); }

/* --- Dragging State (Optional) --- */
.help-modal-container.is-dragging { 
    opacity: 0.95; 
    transition: none !important; /* 드래그 중 지연 방지 */
}
.help-modal-container.is-dragging .help-modal-body {
    pointer-events: none; /* 드래그 중 Iframe 간섭 차단 */
}

/* --- Modal Header (Draggable) --- */
.help-modal-header {
    height: 60px; padding: 0 24px;
    background: var(--header-grad);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    cursor: move; flex-shrink: 0;
    user-select: none;
}
.help-modal-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; }
.help-modal-close {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.1); border: none;
    color: #fff; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: 0.2s;
}
.help-modal-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.help-modal-close i { font-size: 1.5rem; }

/* --- Iframe Content --- */
.help-modal-body { flex: 1; position: relative; background: #fff; }
.help-modal-iframe { width: 100%; height: 100%; border: none; }

/* --- Resize Handle (SE) --- */
.help-modal-resizer {
    position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
    cursor: nwse-resize; z-index: 10;
}
.help-modal-resizer::after {
    content: ''; position: absolute; right: 4px; bottom: 4px;
    width: 8px; height: 8px; border-right: 2px solid rgba(0,0,0,0.2); border-bottom: 2px solid rgba(0,0,0,0.2);
}

/* --- Mobile Snap --- */
@media (max-width: 768px) {
    .help-modal-container { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .help-modal-header { height: 50px; cursor: default; }
    .help-modal-resizer { display: none; }
}