.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 40, 28, 0.55); backdrop-filter: blur(8px);
    z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.hidden { display: none; }
.modal-card {
    background: var(--color-white); width: 100%; max-width: 700px; border-radius: var(--radius-lg);
    padding: 32px; position: relative; box-shadow: var(--shadow-hover);
    max-height: 90vh; overflow-y: auto;
}
.modal-close {
    position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.05); border: none;
    width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; cursor: pointer;
    transition: var(--transition-smooth);
}
.modal-close:hover { background: rgba(0,0,0,0.1); }
.modal-content-grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.modal-cover-wrapper img { width: 100%; border-radius: 12px; box-shadow: var(--shadow-soft); }
.modal-info h2 { font-family: 'Playfair Display', serif; color: var(--color-primary); margin: 8px 0 4px 0; }
.modal-author { color: var(--color-text-light); margin-bottom: 16px; }
.stock-badge-large { margin-bottom: 16px; }
.modal-desc h4 { font-size: 0.9rem; color: var(--color-primary); margin-bottom: 6px; }
.modal-desc p { color: var(--color-text-light); font-size: 0.9rem; line-height: 1.6; }
.modal-notice-box {
    background: rgba(224, 120, 86, 0.1); border-left: 4px solid var(--color-coral);
    padding: 12px; border-radius: 8px; margin-top: 20px; display: flex; gap: 12px; font-size: 0.85rem;
}

@media (max-width: 768px) {
    .modal-content-grid { grid-template-columns: 1fr; }
    .modal-cover-wrapper { max-width: 180px; margin: 0 auto; }
}