/* =====================================================================
   modal.css — 제품 상세 모달(윈도우) — 갤러리 · 요약 · 탭/섹션 · 사양표 등
   ---------------------------------------------------------------------
   ● base.css의 전역 변수(:root)에 의존합니다. base.css를 먼저 불러온 뒤 이 파일을 불러오세요.
   ● 로드 순서: base → layout → home → company → products → modal → login → responsive
   ===================================================================== */

/* ══════════ 제품 상세 모달 ══════════ */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,15,23,.55);backdrop-filter:blur(2px)}
.modal-box{position:relative;z-index:1;width:min(980px,100%);max-height:90vh;background:var(--paper-2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(4,12,20,.5);animation:modalpop .25s ease}
@keyframes modalpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:16px;right:18px;z-index:6;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s;backdrop-filter:blur(4px)}
.modal-x:hover{background:#fff;border-color:var(--steel-2)}
.modal-scroll{overflow-y:auto;overscroll-behavior:contain}
.modal-head{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:36px 34px 26px}
.gallery-main{aspect-ratio:4/3;background:#F7F8F9;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-in}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{width:58px;height:58px;border:1px solid var(--line);border-radius:8px;background:#F7F8F9;padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s}
.thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb.on,.thumb:hover{border-color:var(--ink)}
.sum-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:18px}
.sum-top .badge{font-size:13px;color:var(--slate);white-space:nowrap}
.sum-cert{padding:18px 0;border-bottom:1px solid var(--line)}
.sum-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.certs{display:flex;gap:10px;margin-top:12px}
.cert{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:6px;font-weight:700;font-size:13px;color:#33414D}
.wish-bar{margin-top:20px;width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:15px 16px;background:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);font-family:var(--font-body);transition:border-color .18s}
.wish-bar:hover{border-color:var(--steel-2)}
.wish-bar svg{stroke:var(--slate);fill:none;transition:fill .15s,stroke .15s}
.wish-bar.on svg{fill:#E4573B;stroke:#E4573B}
.modal-tabs{position:sticky;top:0;z-index:4;display:flex;background:var(--ink)}
.modal-tabs a{flex:1;text-align:center;color:#C6D2DC;font-weight:600;font-size:15px;padding:16px 8px;cursor:pointer;position:relative;transition:color .18s}
.modal-tabs a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:15px;width:1px;background:rgba(255,255,255,.18)}
.modal-tabs a:hover,.modal-tabs a.on{color:#fff}
.modal-tabs a.on::after{content:"";position:absolute;left:24%;right:24%;bottom:9px;height:2px;background:var(--signal)}
.modal-section{padding:34px;border-top:1px solid var(--line);scroll-margin-top:54px}
.modal-section h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:22px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.feat{display:flex;gap:14px}
.feat .fi{width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--steel-2)}
.feat h4{font-size:16px;font-weight:700;margin-bottom:4px}
.feat p{font-size:14px;color:var(--slate)}
.mspec{border-top:1px solid var(--line)}
.mspec .row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line);align-items:start}
.mspec dt{font-family:var(--font-mono);font-size:13px;color:var(--slate);padding:15px 0}
.mspec dd{padding:15px 0;font-size:15px;font-weight:500;white-space:pre-line;line-height:1.6}

/* 弹窗内容为空时的提示文字（下载 / 特点 / 规格） */
.mdl-empty{grid-column:1/-1;padding:34px;text-align:center;color:var(--slate);font-size:14px;
  border:1.5px dashed var(--line);border-radius:12px;background:var(--paper-2)}
.mspec .mdl-empty{border-top:0}
/* 规格为空时，去掉规格表的上边框，避免与提示框重叠 */
.mspec:has(.mdl-empty){border-top:0}

/* ══════════ 认证图标（产品名与产品简介之间）══════════ */
.summary .sum-cert + .sum-cert{margin-top:18px}
.cert-icons{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px}
.cert-ico{height:34px;width:auto;display:block;object-fit:contain}

/* ══════════ 管理员操作（弹窗内 · 临时按钮）══════════ */
.admin-actions{display:flex;gap:10px;margin-top:12px}
.admin-actions .admin-edit,.admin-actions .admin-del{flex:1;display:flex;align-items:center;justify-content:center;
  gap:7px;height:46px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);transition:border-color .18s,background .18s,color .18s}
.admin-actions .admin-edit{background:var(--ink);color:#fff;border-color:var(--ink)}
.admin-actions .admin-edit::before{content:"✎";font-size:14px}
.admin-actions .admin-edit:hover{background:var(--steel-2);border-color:var(--steel-2)}
.admin-actions .admin-del{background:none;color:#C4372A;border-color:#E4B4AE}
.admin-actions .admin-del::before{content:"🗑";font-size:13px}
.admin-actions .admin-del:hover{background:#FBEEEC;border-color:#C4372A}

/* 弹窗内开发者提示：居中显示 */
.admin-actions + .dev-hint{display:flex;justify-content:center;margin-top:8px}