/* ============================================================
   jnc-dialog —— 全站统一弹窗，替代浏览器原生 alert / confirm / prompt。
   视觉取自 AlbumMaker.html 的 .modal 一族（圆角 14px、24px 内边距、
   #c0392b 主按钮），让编辑器与前后台是同一套视觉语言。

   两处与 AlbumMaker 原样式的**有意差异**：
     · 宽度 min(400px, 100vw-32px) —— 原样式是 min-width:360px，在
       窄屏（iPhone SE 375px 以下）会顶破视口；前台是移动端为主。
     · 带 :root[data-theme="dark"] 覆盖 —— 前台有暗色模式
       （chrome-dark.css，由 index_global_def.html 的 boot 脚本按
       ?_dark / _dark cookie 打在 <html> 上）。缺这段会在暗色页面上
       炸出一个纯白弹窗。后台无 data-theme，恒走亮色分支。
   ============================================================ */

.jncdlg-mask{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  /* 高于 Bootstrap3 modal(1050) 与 colorbox(9999x)：本组件常被它们内部的按钮调起，
     压在下面会表现为"点了没反应"。 */
  z-index:100000}
.jncdlg-mask.open{display:flex}
.jncdlg-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}

.jncdlg-box{position:relative;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06);
  width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 64px);
  display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}

.jncdlg-hdr{padding:22px 24px 16px;flex:none}
.jncdlg-hdr h3{font-size:17px;font-weight:600;color:#1a1a1a;margin:0;line-height:1.4}

/* 右上角 × —— 只有 custom() 会长出来（jnc-dialog.js 的 closeBtn）。
   标题必须同时让位：翻翻看的标题是作品名（自由长度），不留位会压到 × 底下。 */
.jncdlg-has-close .jncdlg-hdr{padding-right:60px}
.jncdlg-close{position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:9px;background:transparent;color:#8a8a8a;
  font-size:24px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s}
.jncdlg-close:hover{background:#f2f2f2;color:#1a1a1a}
.jncdlg-close:focus-visible{outline:2px solid #c0392b;outline-offset:2px}

.jncdlg-body{padding:4px 24px 20px;overflow-y:auto;flex:1 1 auto}
/* pre-wrap 保住原生 alert 的 \n 换行语义；break-word 防止长 URL/订单号撑破盒子 */
.jncdlg-body p{font-size:14px;color:#555;line-height:1.6;margin:0;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}

.jncdlg-input{display:block;width:100%;margin-top:14px;padding:9px 12px;
  border:1px solid #dcdcdc;border-radius:7px;font-size:14px;color:#1a1a1a;
  background:#fff;box-sizing:border-box;outline:none;transition:border-color .15s}
.jncdlg-input:focus{border-color:#c0392b}

.jncdlg-ftr{padding:16px 24px;border-top:1px solid #f0f0f0;flex:none;
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.jncdlg-btn{padding:9px 22px;border:none;border-radius:7px;cursor:pointer;
  font-size:13px;font-weight:500;transition:all .15s;line-height:1.5;font-family:inherit}
.jncdlg-btn:focus-visible{outline:2px solid #c0392b;outline-offset:2px}
.jncdlg-btn-primary{background:#c0392b;color:#fff}
.jncdlg-btn-primary:hover{background:#a93226}
.jncdlg-btn-secondary{background:#f2f2f2;color:#555;border:1px solid #e0e0e0}
.jncdlg-btn-secondary:hover{background:#e8e8e8}
.jncdlg-btn-danger{background:#e44;color:#fff}
.jncdlg-btn-danger:hover{background:#c0392b}

/* ── custom()：自定义内容（表单 / iframe 预览），承接原 artDialog 的 $.dialog ──
   padding 收为 0：搬过来的内容自带 `.dialogForm > .content{padding:0 20px 20px}`，
   再叠一层就左右各多出 24px。overflow:auto 是为了让超宽内容在盒子里横向滚动，
   而不是把页面撑破（`.dialogForm{min-width:450px}` 在窄屏上确实会超出）。 */
.jncdlg-body-custom{padding:0;overflow:auto}
/* 翻翻看的 iframe 写死 width="750"：这一行只保证【盒子】不溢出视口；iframe 内部
   仍按 750 布局，窄屏要横向滚 —— 与 artDialog 时代一致，这里不假装解决它。 */
.jncdlg-body-custom iframe{max-width:100%;display:block}

/* ── 暗色（仅前台，由 <html data-theme="dark"> 驱动）───────── */
:root[data-theme="dark"] .jncdlg-box{background:#161616;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.10)}
:root[data-theme="dark"] .jncdlg-hdr h3{color:#ededed}
:root[data-theme="dark"] .jncdlg-body p{color:#a1a1a1}
:root[data-theme="dark"] .jncdlg-ftr{border-top-color:#2e2e2e}
:root[data-theme="dark"] .jncdlg-input{background:#0a0a0a;border-color:#2e2e2e;color:#ededed}
:root[data-theme="dark"] .jncdlg-btn-secondary{background:#2e2e2e;color:#a1a1a1;border-color:#3a3a3a}
:root[data-theme="dark"] .jncdlg-btn-secondary:hover{background:#3a3a3a}
:root[data-theme="dark"] .jncdlg-close:hover{background:#2e2e2e;color:#ededed}