/* ==========================================================================
   I Musicer · ThinkPad 主题层 · 结构段（2026-09-27 昼夜切换重构）
   --------------------------------------------------------------------------
   来源：imusicer-vinyl-bg-thinkpad.html 配色定稿
     黑机身 #08080a / 灰字 #e8e6e3·#8e8e93 / 一点红 #ea4d45（全站唯一彩色）

   ★ 本文件只保留段 A「外观结构」——与配色无关，白天黑夜都生效：
        唱片机组件的固有色（黑盘 / 黑标签 / TrackPoint 红中轴）、Hero 构图、
        各断点的唱片尺寸与位置、Ishopper 容器约束。
        依据：用户裁定「唱片机保留黑唱片 + 浅背景」——唱片是物体，不是页面配色，
              两套主题下必须长得一模一样；构图更不必说，改了就是两套版式。

   ★ 页面配色已不在本文件（2026-09-27 昼夜手动切换重构）：
        · 深色层（原段 B）→ css/theme-dark.css（id=cssDark，可被手动开关）
        · 浅色修补层      → css/theme-day.css（id=cssDay）
        · 深浅由「系统偏好 + 手动切换按钮」决定，机制见 theme-dark.css 头注释；
          style.css :root 是一整套浅色变量，深色层被关掉时浅色自动浮出。

   ★ 为什么深色层要独立成文件：手动切换需要「单独开关整层」。原来段 B 里的
     !important 反压（.hero-desc 灰字、header 玻璃底、封面 filter…）是为压深底
     而写的，浅底上会把页面强行拖回深色——只有整层关掉才干净，逐条撤 !important
     是做不完的。

   加载顺序（各页 <head>）：style.css → 本文件 → theme-dark.css → [home-vinyl.css] → theme-day.css
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   段 A · 外观结构（全模式生效）
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- A1 唱片机：尺寸与位置（构图，三档断点） ---------- */
/* 说明：!important 必需（2026-09-20 修复）—— home-vinyl.css 在本文件【之后】加载，
   同样是 body.home-vinyl 特异性，其同名变量会反向覆盖本行。此前 v2 定稿的 72vh
   就因此从未生效（实际一直跑着 74vh）。
   尺寸沿革：72vh → 60vh（用户反馈唱片偏大、抢文案视觉权重）；
   右移 54% → 60%（收窄右半屏留白）。
   ★ 右移上限的几何约束：唱臂支点在盘外右侧（--vinyl-pivot-x: 1.10，即盘右缘外 0.10S），
     是整个组件的最右点。其视口 x = left%·W + 0.60·S，必须 < W 才不被裁：
       · S 取 60vw 时 → 0.36W < 0.4W ✓
       · S 取 60vh 时 → 需 H/W < 1.11，常见桌面比例（16:9=0.56 / 16:10=0.63）均满足 ✓
     60% 已接近上限，再往右要在竖屏窗口（H/W 大）下实测唱臂是否被切。 */
body.home-vinyl { --vinyl-S: min(60vh, 60vw) !important; }
body.home-vinyl .vinyl-stage { left: 60%; }

/* 中屏（参照 v2 @1100px）：盘面略收、唱机回中一点留右侧呼吸位 */
@media (max-width: 1100px) {
  body.home-vinyl { --vinyl-S: min(55vh, 55vw) !important; }
  body.home-vinyl .vinyl-stage { left: 52%; }
}

/* 小屏构图（阶段2 重做 2026-09-20；v3 定稿 2026-09-20）
   原问题：唱片居中压在文案背后互相干扰；且 min(52vh,52vw) 在窄屏被 vw 卡死
   ——390 宽手机上只有 203px，唱片小得看不清密纹，质感白费。
   改为「文案在上、唱片在下」：参考稿 002.jpg 实测唱片中心 y≈66%、直径≈67vw、x≈52%。
   几何校验：唱臂支点 x = 52%·W + 0.6·(67vw) ≈ 92%·W < W，不出屏。 */
@media (max-width: 720px) {
  body.home-vinyl { --vinyl-S: min(67vw, 40vh) !important; --vinyl-label: 38%; }
  body.home-vinyl .vinyl-stage { left: 52%; top: 66%; }
  /* 文案区顶部对齐：center 会把内容压到 40% 起、叠在盘面上；
     start 后 eyebrow 从约 27% 开始，整块文案落在唱片上方的纯色区 */
  body.home-vinyl .hero-inner { align-items: start; }
}

/* ---------- A2 唱片机：固有色（两套主题一致） ---------- */
/* 中心标签：黑底 + 一圈暗红细边（ThinkPad 的克制感，替代整面系统红） */
body.home-vinyl .vinyl-platter::before {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .09) 0 10%, #0e0e11 52%) !important;
  box-shadow: inset 0 0 0 2px rgba(234, 77, 69, .38) !important;
}
/* 标签字反白 */
body.home-vinyl .vinyl-brand text {
  fill: #f2f2f4 !important;
}
/* 中心孔黑色底座环 */
body.home-vinyl .vinyl-platter::after {
  background: #050506 !important;
}
/* 中轴 = TrackPoint 红点（全站唯一彩色焦点，替代白色中轴） */
body.home-vinyl .vinyl-spindle {
  background: radial-gradient(circle at 36% 32%, #ff7a70 0 18%, #ea4d45 55%, #bd170f 100%) !important;
  box-shadow: 0 0 18px 4px rgba(234, 77, 69, .55), inset 0 -1px 2px rgba(0, 0, 0, .45) !important;
}
/* 唱针光点红晕随新红 */
body.home-vinyl .vinyl-stylus::after {
  box-shadow: 0 0 26px 8px rgba(234, 77, 69, .45) !important;
}

/* ---------- A3 Hero 构图（2026-09-18 用户确认） ----------
   唱片机背景即视觉主体，Hero 不要封面图；同时把两列网格收成单列，
   避免留空列挤压文字。⚠ 这三条是构图不是配色——曾因整段随深色层一起停加载，
   浅色下封面图复活、网格撑回两列（2026-09-25 教训），故固定在本段。 */
.home-vinyl .hero-cover { display: none !important; }
.home-vinyl .hero-inner { grid-template-columns: 1fr; }
.home-vinyl .hero-text { max-width: 640px; }

/* ---------- A4 Ishopper 小节容器约束（2026-09-18 用户反馈） ----------
   shopper.html 内联的 .shop-section 抄了 .about-section 的网格，但漏掉
   max-width / margin:0 auto / 左右 padding，导致 section 撑满整屏、标签贴死左边缘
   （实测 label left=0，about 是 204px）。这里补齐容器约束，对齐 about 视觉。
   注：用 min() 保证小屏不溢出，比 about 的双 padding 写法更稳。
   ⚠ 同样是布局修复，两套主题都必须生效。 */
.shop-section {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
@media (max-width: 720px) {
  .shop-section { padding-left: 18px; padding-right: 18px; }
}