/* ============================================================
   封装技术详情页 (pkg-smd / pkg-power / pkg-axial)
   作用域：.pkg-page —— 完全复刻 Coze packaging/[id]/page.tsx
   配色与布局取自源码，不影响其他页面
   ============================================================ */
.pkg-page { min-height: 100vh; background: #ffffff; color: #1f2937; font-family: 'Inter', 'Microsoft YaHei', system-ui, sans-serif; }

/* ---- 面包屑 ---- */
.pkg-breadcrumb { max-width: 1280px; margin: 0 auto; padding: 1rem 1rem 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280; flex-wrap: wrap; }
.pkg-breadcrumb a { color: #6b7280; display: inline-flex; align-items: center; gap: 0.25rem; transition: color .15s; }
.pkg-breadcrumb a:hover { color: #2563EB; }
.pkg-breadcrumb svg { width: 1rem; height: 1rem; flex-shrink: 0; color: #9ca3af; }
.pkg-breadcrumb .pkg-crumb-cur { color: #1f2937; font-weight: 500; }

/* ---- Hero 横幅 ---- */
.pkg-hero { position: relative; height: 300px; overflow: hidden; background: linear-gradient(135deg, #1f2937, #4b5563); }
@media (min-width: 768px) { .pkg-hero { height: 400px; } }
.pkg-hero img.pkg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-hero .pkg-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.45) 60%, rgba(0,0,0,.15)); }
.pkg-hero .pkg-hero-inner { position: absolute; inset: 0; display: flex; align-items: center; }
.pkg-hero .pkg-hero-inner > div { max-width: 1280px; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 768px) { .pkg-hero .pkg-hero-inner > div { padding: 0 2rem; } }
.pkg-hero .pkg-hero-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.pkg-hero .pkg-hero-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: #2563EB; color: #fff; display: flex; align-items: center; justify-content: center; }
.pkg-hero .pkg-hero-icon svg { width: 1.25rem; height: 1.25rem; }
.pkg-hero .pkg-hero-en { color: #93c5fd; font-size: 0.875rem; font-weight: 500; }
.pkg-hero h1 { color: #fff; font-size: 1.875rem; font-weight: 700; margin: 0.25rem 0 0.75rem; line-height: 1.15; }
.pkg-hero .pkg-hero-tag { color: rgba(255,255,255,.85); font-size: 1rem; max-width: 42rem; margin: 0; }
@media (min-width: 768px) { .pkg-hero h1 { font-size: 3rem; } .pkg-hero .pkg-hero-tag { font-size: 1.125rem; } }

/* ---- 区块通用 ---- */
.pkg-section { max-width: 1280px; margin: 0 auto; padding: 3rem 1rem; }
@media (min-width: 768px) { .pkg-section { padding: 4rem 2rem; } }

/* ---- 概述卡片 ---- */
.pkg-overview { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
@media (min-width: 768px) { .pkg-overview { padding: 2rem; } }
.pkg-overview h2 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin: 0 0 1rem; }
@media (min-width: 768px) { .pkg-overview h2 { font-size: 1.5rem; } }
.pkg-overview p.pkg-desc { color: #4b5563; line-height: 1.7; font-size: 0.9375rem; margin: 0; }

.pkg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .pkg-stats { grid-template-columns: repeat(4, 1fr); } }
.pkg-stat { background: #f9fafb; border-radius: 0.5rem; padding: 1rem; text-align: center; }
.pkg-stat .pkg-stat-ico { width: 1.5rem; height: 1.5rem; color: #2563EB; margin: 0 auto 0.5rem; }
.pkg-stat .pkg-stat-ico svg { width: 100%; height: 100%; }
.pkg-stat .pkg-stat-num { font-size: 1.125rem; font-weight: 700; color: #1f2937; line-height: 1.2; }
.pkg-stat.is-blue .pkg-stat-num { color: #2563EB; }
.pkg-stat .pkg-stat-lbl { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }

.pkg-pills-block { margin-top: 1.5rem; }
.pkg-pills-label { font-size: 0.75rem; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.pkg-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.pkg-pill { font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.pkg-pill-blue { background: #eff6ff; color: #1d4ed8; }
.pkg-pill-green { background: #f0fdf4; color: #15803d; }

/* ---- 分组标题条 (深色 #1E3A5F) ---- */
.pkg-groupbar { background: #1E3A5F; padding: 1rem 0; }
@media (min-width: 768px) { .pkg-groupbar { padding: 1.25rem 0; } }
.pkg-groupbar .pkg-gb-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .pkg-groupbar .pkg-gb-inner { padding: 0 2rem; } }
.pkg-groupbar h2 { color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; margin: 0; }
@media (min-width: 768px) { .pkg-groupbar h2 { font-size: 1.5rem; } }
.pkg-groupbar h2 .pkg-gb-unit { font-weight: 400; color: rgba(255,255,255,.7); font-size: 1rem; }

/* ---- 规格网格 (Groups 布局) ---- */
.pkg-grid-wrap { max-width: 1280px; margin: 0 auto; padding: 2rem 1rem; }
@media (min-width: 768px) { .pkg-grid-wrap { padding: 2.5rem 2rem; } }
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pkg-grid { grid-template-columns: repeat(4, 1fr); } }

.pkg-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .2s, border-color .2s; }
.pkg-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #bfdbfe; }
.pkg-card .pkg-card-img { width: 100%; height: 5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.pkg-card .pkg-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pkg-card .pkg-card-noimg { color: #d1d5db; display: flex; align-items: center; justify-content: center; }
.pkg-card .pkg-card-noimg svg { width: 3rem; height: 3rem; }
/* 卡片图片加载失败：onerror 给 .pkg-card-img 加 .pkg-empty，隐藏裂图并显示占位（与模态框 pkg-noimg 对齐） */
.pkg-card .pkg-card-img .pkg-noimg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #9ca3af;
  font-size: 0.875rem;
  background: #f1f4f8;
  border-radius: 0.375rem;
}
.pkg-card .pkg-card-img.pkg-empty img { display: none; }
.pkg-card .pkg-card-img.pkg-empty .pkg-noimg { display: flex; }
.pkg-card h3 { font-size: 0.875rem; font-weight: 700; color: #1f2937; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 0.25rem; }
.pkg-card .pkg-card-size { font-size: 0.75rem; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 0.75rem; }
.pkg-card .pkg-view { width: 100%; background: #E8EDF2; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; gap: 0.375rem; cursor: pointer; border: none; transition: background .15s; margin-top: auto; }
.pkg-card .pkg-view:hover { background: #D1D9E2; }
.pkg-card .pkg-view svg { width: 0.75rem; height: 0.75rem; }

/* ---- Axial 布局 ---- */
.pkg-axialbar { background: #1E3A5F; padding: 1rem 0; }
@media (min-width: 768px) { .pkg-axialbar { padding: 1.25rem 0; } }
.pkg-axialbar .pkg-ab-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .pkg-axialbar .pkg-ab-inner { padding: 0 2rem; } }
.pkg-axialbar h2 { color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; margin: 0; }
@media (min-width: 768px) { .pkg-axialbar h2 { font-size: 1.5rem; } }
.pkg-axialbar h2 .pkg-ab-unit { font-weight: 400; color: rgba(255,255,255,.7); font-size: 1rem; }

.pkg-axial-grid-wrap { max-width: 1280px; margin: 0 auto; padding: 2rem 1rem; }
@media (min-width: 768px) { .pkg-axial-grid-wrap { padding: 2.5rem 2rem; } }
.pkg-axial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .pkg-axial-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pkg-axial-grid { grid-template-columns: repeat(6, 1fr); } }
.pkg-axial-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .2s, border-color .2s; }
.pkg-axial-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #bfdbfe; }
.pkg-axial-card .pkg-axial-svg { width: 100%; height: 3.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.pkg-axial-card .pkg-axial-svg svg { width: 100%; height: 100%; }
.pkg-axial-card h3 { font-size: 0.875rem; font-weight: 700; color: #1f2937; font-family: ui-monospace, monospace; margin: 0 0 0.25rem; }
.pkg-axial-card .pkg-axial-size { font-size: 0.75rem; color: #6b7280; font-family: ui-monospace, monospace; margin: 0 0 0.75rem; }
.pkg-axial-card .pkg-view { width: 100%; background: #E8EDF2; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; gap: 0.375rem; cursor: pointer; border: none; transition: background .15s; }
.pkg-axial-card .pkg-view:hover { background: #D1D9E2; }
.pkg-axial-card .pkg-view svg { width: 0.75rem; height: 0.75rem; }

.pkg-axial-row2 { background: #F7F8FA; padding: 2rem 0; }
@media (min-width: 768px) { .pkg-axial-row2 { padding: 2.5rem 0; } }
.pkg-axial-row2 .pkg-ar2-inner { max-width: 768px; margin: 0 auto; padding: 0 1rem; }
.pkg-axial-row2-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .pkg-axial-row2-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.pkg-axial-card-lg { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .2s, border-color .2s; }
.pkg-axial-card-lg:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #bfdbfe; }
.pkg-axial-card-lg .pkg-axial-svg { height: 4rem; margin-bottom: 1rem; }
.pkg-axial-card-lg h3 { font-size: 1rem; }
.pkg-axial-card-lg .pkg-axial-size { font-size: 0.875rem; }

/* ---- 其他封装体系 ---- */
.pkg-other { max-width: 1280px; margin: 0 auto; padding: 3rem 1rem; }
@media (min-width: 768px) { .pkg-other { padding: 4rem 2rem; } }
.pkg-other h2 { font-size: 1.25rem; font-weight: 700; color: #1f2937; text-align: center; margin: 0 0 1.5rem; }
@media (min-width: 768px) { .pkg-other h2 { font-size: 1.5rem; } }
.pkg-other-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .pkg-other-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg-other-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; transition: box-shadow .2s, border-color .2s; display: block; color: inherit; text-decoration: none; }
.pkg-other-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.08); border-color: #bfdbfe; }
.pkg-other-card .pkg-oc-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.pkg-other-card .pkg-oc-ico { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: #eff6ff; color: #2563EB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pkg-other-card .pkg-oc-ico svg { width: 1.25rem; height: 1.25rem; }
.pkg-other-card h3 { font-weight: 700; color: #1f2937; margin: 0; }
.pkg-other-card .pkg-oc-en { font-size: 0.75rem; color: #9ca3af; }
.pkg-other-card p { font-size: 0.875rem; color: #6b7280; margin: 0; line-height: 1.5; }
.pkg-other-card .pkg-oc-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.pkg-other-card .pkg-oc-pills span { background: #f3f4f6; color: #4b5563; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-family: ui-monospace, monospace; }

/* ---- 3D 查看模态框 ---- */
.pkg-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.pkg-modal.pkg-open { display: flex; }
.pkg-modal .pkg-modal-box { background: #fff; border-radius: 0.75rem; box-shadow: 0 25px 50px rgba(0,0,0,.25); width: 90vw; max-width: 48rem; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.pkg-modal .pkg-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; background: linear-gradient(90deg, #1E3A5F, #2563EB); }
.pkg-modal .pkg-modal-head h3 { color: #fff; font-size: 1.125rem; font-weight: 700; margin: 0; }
.pkg-modal .pkg-modal-head .pkg-modal-sub { color: rgba(255,255,255,.7); font-size: 0.875rem; }
.pkg-modal .pkg-modal-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.pkg-modal .pkg-modal-close svg { width: 1rem; height: 1rem; }
.pkg-modal .pkg-modal-close:hover { background: rgba(255,255,255,.3); }
.pkg-modal .pkg-modal-body { padding: 1.5rem; }
.pkg-modal .pkg-modal-video { aspect-ratio: 16 / 9; background: #111827; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pkg-modal .pkg-modal-video .pkg-novideo { text-align: center; color: rgba(255,255,255,.6); }
.pkg-modal .pkg-modal-video .pkg-novideo svg { width: 5rem; height: 5rem; color: rgba(255,255,255,.3); margin: 0 auto 1rem; }
.pkg-modal .pkg-modal-video .pkg-novideo .pkg-nv-title { color: rgba(255,255,255,.6); font-size: 1.125rem; font-weight: 500; }
.pkg-modal .pkg-modal-video .pkg-novideo .pkg-nv-name { color: rgba(255,255,255,.4); font-size: 0.875rem; margin-top: 0.5rem; }
.pkg-modal .pkg-modal-video .pkg-novideo .pkg-nv-hint { color: rgba(255,255,255,.3); font-size: 0.75rem; margin-top: 1rem; }
.pkg-modal .pkg-modal-info { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.875rem; color: #6b7280; }
.pkg-modal .pkg-modal-info .pkg-mi-name { color: #374151; font-weight: 500; }

/* 弹出层图片区（新增：对齐扣子 3D View Modal 的图片/视频） */
.pkg-modal .pkg-modal-img { aspect-ratio: 16 / 9; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 1rem; position: relative; }
.pkg-modal .pkg-modal-img img { width: 100%; height: 100%; object-fit: contain; display: none; }
.pkg-modal .pkg-modal-img img[src] { display: block; }
.pkg-modal .pkg-modal-img .pkg-noimg { color: #9ca3af; font-size: 0.875rem; display: none; }
.pkg-modal .pkg-modal-img.pkg-empty .pkg-noimg { display: block; }
.pkg-modal .pkg-video-slot { position: absolute; inset: 0; display: none; }
.pkg-modal .pkg-video-el { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pkg-modal .pkg-img-main { width: 100%; height: 100%; object-fit: contain; background: #111827; border-radius: 0.5rem; }