.job-preview-modal[hidden] { display: none !important; }
.job-preview-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 24, 48, .72); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.job-preview-modal.is-open { opacity: 1; visibility: visible; }
.job-preview-dialog { position: relative; width: min(900px, 100%); max-height: min(92vh, 960px); overflow: auto; border-radius: 22px; background: #f7f9fc; box-shadow: 0 24px 80px rgba(0,0,0,.3); outline: none; overscroll-behavior: contain; }
.job-preview-close { position: sticky; top: 14px; float: right; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; margin: 14px 14px -56px 0; border: 1px solid rgba(18,62,119,.12); border-radius: 50%; color: #123e77; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(7,24,48,.16); font-size: 28px; line-height: 1; cursor: pointer; }
.job-preview-close:hover { background: #fff2bd; }
.job-preview-content { min-height: 180px; }
.job-preview-content .preview-loading, .preview-error { padding: 72px 24px; text-align: center; color: #53647b; }
.modal-detail-card { margin: 0; overflow: hidden; border: 0; border-radius: 22px; box-shadow: none; }
.modal-detail-card .detail-photo { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.modal-detail-card .detail-content { padding: 30px; }
body.modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .job-preview-modal { align-items: flex-start; padding: 10px; }
  .job-preview-dialog { max-height: calc(100vh - 20px); border-radius: 16px; }
  .modal-detail-card { border-radius: 16px; }
  .modal-detail-card .detail-photo { height: 210px; }
  .modal-detail-card .detail-content { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .job-preview-modal { transition: none; } }