/* 由 build_site.py 自动生成 — 全部坐标/字号取自设计稿原始数据 */
:root {
  --black: #000000;
  --cream: #FFFFC8;
  --yellow: #FFEC01;
  --font-zh: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", sans-serif;
  --font-en: Calibri, "Microsoft JhengHei", sans-serif;
  --u: min(calc(100vw / 2030), 1px);
  /* 轮播箭头（设计稿圆 65 × 66.5 设计像素）
     --car-gap 与图片的间隔取自 logoman-website-master 的比例：参考版 46px 圆 + 34px 间隔
     (34 / 46 ≈ 0.74)，换算成我们的直径 65 × 0.74 ≈ 48 设计像素 */
  --car-btn-w: calc(65 * var(--u));
  --car-btn-h: calc(66.5 * var(--u));
  --car-btn-fs: calc(26.6 * var(--u));
  --car-gap: calc(48 * var(--u));
  /* 章節大標題两侧细横线：线宽对文字的比例取自参考版（1px @44px 字 ≈ 0.023em，
     我们的标题是 64 设计像素 → 1.5）；细线在手机上不能消失，所以兜底 1px。 */
  --stitle-rule-h: max(1px, calc(1.5 * var(--u)));
  --stitle-gap: calc(44 * var(--u));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 常驻滚动条：避免长/短页之间切页时 clientWidth 变化引起横向抖动 */
html { scroll-behavior: smooth; overflow-y: scroll; }
body { background: var(--cream); font-family: var(--font-zh); }
body[data-lang="en"] { font-family: var(--font-en); }
img { display: block; border: 0; }
a { color: inherit; text-decoration: none; cursor: pointer; }
/* 链接的悬停反馈：设计稿是静态图、没有 hover 态，补一条下划线（不像变色那样干扰配色）。
   只给**页脚**那排文字链接：顶部導覽的 4 个链接本身已是黑底上的独立导航项，不加下划线。 */
.blk-foot a:hover, .blk-foot a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.canvas { position: relative; margin: 0 auto; overflow: hidden; }
.canvas.lang-en { display: none; }
body[data-lang="en"] .canvas.lang-zh { display: none; }
body[data-lang="en"] .canvas.lang-en { display: block; }

/* ---------- 区块结构 ----------
   .canvas 一层画布
     ├─ <header class="navbar">     固定导航（position:fixed，自己的坐标系）
     ├─ <section class="blk …">     版面区块：一行一个，绝对定位，宽度铺满画布
     └─ <footer class="blk blk-foot"> 页脚（黄底那一段）
   区块是**子元素的定位基准**：区块内的元素全部用「区块内局部坐标」写，
   所以每块 HTML 可以单独看、单独挪、单独隐藏，调试时不用面对整页绝对坐标。
   区块自身只给 top/height（inline，来自设计稿），不含任何呈现细节。 */
/* 区块 = 纯 DOM 分组：把一屏元素按标题切成互不干扰的几块，方便「一块一块」调试。
   用 display:contents —— 区块自身**不生成任何盒子**，子元素等同于直接挂在 .canvas 下，
   因此它既不承担版式，也不改变定位父、不改变光栅化路径。
   踩过的两个坑：
     1) 让区块承担定位（top + 子元素用区块内局部坐标）：u() 的 round(v,1) 会作用在
        差值上，实测引入最多 0.1 设计像素的错位（见 build_site.py 里 pos() 的说明）。
     2) 用 position:relative 空壳分组：几何虽然逐元素 0.00 全等，但区块成了新的
        定位父，图片的重采样路径随之改变 —— 实测有 8324 个像素出现 <=68 的亮度差；
        把区块从 DOM 里拍平后差异立刻归零，证明就是它引起的。
   调试：整块 display:none 即可隔离排查，不影响其他块（display:none 会覆盖 contents）。 */
.blk { position: static; }

/* 纯色块：设计稿里的单元格填充（卡片牌面、局部底色） */
.box { position: absolute; }
/* 图片：直接把坐标写在 <img> 上，或是带 overflow:hidden 的裁剪框 .pic */
.pic { position: absolute; }
/* 单元格文字：设计稿把文字放在合并单元格里，这里保留其行高与对齐方式 */
.txt {
  position: absolute; display: flex; line-height: 1.2;
  white-space: nowrap; overflow: visible;
}
.txt.wrap { white-space: pre-wrap; }
/* 居中的多行文本（活动页长描述）：单行时 flex 的 justify-content 已经居中，
   换行后 span 占满整行、各行退回左对齐 —— 补 text-align 让每一行都居中（用户指定）。 */
.txt.hc.wrap { text-align: center; }
.txt span { white-space: inherit; }
.hc { justify-content: center; }
.hright { justify-content: flex-end; }
.vc { align-items: center; } .vt { align-items: flex-start; }
/* 文本框（设计稿 drawing 内的 txBody） */
.tbox {
  position: absolute; display: flex; flex-direction: column;
  justify-content: flex-start; line-height: 1.35; overflow: visible;
  padding: calc(4.8 * var(--u)) calc(9.6 * var(--u));
}
.tbox.txc { justify-content: center; }
.tbox.txb { justify-content: flex-end; }
.tbox p { display: block; white-space: pre-wrap; }
.tbox p.c { text-align: center; } .tbox p.r { text-align: right; }
/* 章節大標題：置中文字 + 左右各一条細橫線（做法照参考版 logoman-website-master 的 .section-title）
     [——————————  精彩活動  ——————————]
   两条线都是 flex:1 1 0，一起吃满剩余宽度，所以标题永远居中、线长随 --u 等比缩放；
   min-width:0 保证窄屏（线被挤到 0）也不会把标题顶出容器。 */
.stitle {
  position: absolute; display: flex; align-items: center; justify-content: center;
  gap: var(--stitle-gap); line-height: 1.2; white-space: nowrap;
  /* <h2> 的浏览器默认样式会把标题渲染成粗体、字号 1.5em —— 这两条必须压掉，
     否则「精彩活動」会比设计稿粗一圈（设计稿里只有部分标题是粗体，由 inline 给）。 */
  font-weight: 400; font-size: 1rem;
}
.stitle-rule {
  flex: 1 1 0; min-width: 0; align-self: center;
  height: var(--stitle-rule-h); background: #333; opacity: .75;
}
.stitle-text { flex: 0 0 auto; }
/* 轮播：单张显示，箭头/自动播放切换。
   排版完全照 logoman-website-master —— 一整行 flex：
     [◀] --gap-- [图] --gap-- [▶]   justify-content:center + align-items:center
   于是箭头的【位置由当前这张图的实际尺寸决定】，换一张图就重新贴合：
   图宽则箭头外移、图窄则内收，且永远和图片垂直居中对齐。
   （旧版是设计稿固定坐标 + 图片绝对居中，换图后箭头会叠在图上或飘出老远。） */
.gallery {
  position: absolute; left: 0; width: calc(2030 * var(--u));
  display: flex; align-items: center; justify-content: center;
  gap: var(--car-gap);
}
.car { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden;
       display: flex; align-items: center; justify-content: center; }
.slide {
  display: none; width: auto; height: 100%;
  max-width: calc(2030 * var(--u)); object-fit: contain;
}
.slide.active { display: block; }
/* 箭头：尺寸按设计稿的圆（65 × 66.5）等比缩放；外观按参考版（透明底+灰边+黑箭头） */
.car-btn {
  position: relative; flex: 0 0 auto;
  width: var(--car-btn-w); height: var(--car-btn-h); font-size: var(--car-btn-fs);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; user-select: none; z-index: 5;
  line-height: 1; padding: 0; font-family: inherit;
  background: transparent; border: 1px solid #8a8a8a; color: #000;
  transition: background .25s, border-color .25s;
}
.car-btn:hover { background: #E8C988; border-color: #E8C988; }
/* 语言按钮：设计稿 Z2「EN」= horizontal:right、AA2「繁」= horizontal:left，
   两个单元格共用同一条列边界(1885)，纯贴合会糊成一团。
   1) 这里【不能】写 justify-content —— 它与 .hc/.hright 同权重却排在后面，
      会把设计稿的「EN 右对齐」覆盖成居中，EN 于是向左挤到地球仪上。
   2) 「繁」是左对齐，补一点左内边距还原设计稿里看到的间隔
      （地球仪→EN ≈ 19、EN→繁 ≈ 14，比例 ≈1.36，同参考图 18:13≈1.38）。 */
.lang-btn {
  position: absolute; display: flex; align-items: center;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: #fff; font-weight: 700; opacity: .55; transition: opacity .2s;
  padding: 0 0 0 calc(12 * var(--u));
}
.lang-btn.active, .lang-btn:hover { opacity: 1; }
/* 地球仪（image6.png）：点一下切到另一种语言。
   它和「EN」按钮的命中框是重叠的（地球仪 1807.5~1840，EN 按钮 1812.5~1885，
   但 EN 文字是右对齐、墨迹在 1858~1882），DOM 里按钮在后会盖住地球仪，
   所以这里用 z-index 把地球仪提到最上面；EN 文字所在区域仍可正常点击。 */
.lang-toggle {
  display: block; padding: 0; border: 0; background: none;
  cursor: pointer; line-height: 0; z-index: 6;
}
.lang-toggle img { width: 100%; height: 100%; }
.lang-toggle:focus-visible { outline: calc(2 * var(--u)) solid #E8C988; outline-offset: calc(2 * var(--u)); }
/* 顶部导航冻结：随滚动固定在视口顶部，与画布同宽居中
   高度 = 设计稿黑色导航区（第 1-9 行，0~162）。
   注意：设计稿第 10 行起是米色页面底色，若把 .navbar 做成 180 高，
   那条米色底带会被冻结在 hero 大图之上，形成一条很显眼的留白条。 */
.navbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(2030 * var(--u)); height: calc(162 * var(--u));
  background: var(--black); z-index: 50; overflow: hidden;
}
/* <nav class="nav-links"> 只是把導覽連結收成一组语义标签，自身必须保持静态定位，
   否则里面的绝对定位链接会改以它为基准、整体位移。 */
.nav-links { position: static; }
/* 導覽連結的反馈（照参考版 .main-nav a.nav-link）：
   hover / 当前页(.active) 都变金色 #E8C988，带 .25s 过渡；不加下划线（用户指定）。
   白色写在这里而不是行内 —— 行内样式压过样式表，hover 就变不了色。 */
.nav-links a { color: #FFFFFF; transition: color .25s; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { color: #E8C988; }
/* 单元格边框分隔线：设计稿用「单元格细底边框」画（门店页门店与门店之间）。
   颜色/粗细照参考版 .store-block 的分隔线：border-bottom: 1px solid #8a8a8a ——
   灰 #8a8a8a、实心、约 1 设计像素粗；缩小时保底 1px 免得整条消失。 */
.hline { height: max(1px, calc(1 * var(--u))); background: #8a8a8a; }
/* 页脚：<footer class="blk blk-foot"> 同时是「黄底那一段」和「页脚元素的定位基准」，
   背景色即设计稿里那 18 条 #FFEC01 全宽条带的合并结果。 */
.blk-foot .foot-bg { z-index: 0; }