/* 首页 — 各版块 + hero + 共享组件。值取自 analysis/02-home.md(dozo addition.css)。 */

/* ===== 共享按钮 ===== */
.button-common {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 213px; height: 39px;
  font-weight: 500; color: var(--color-white); background: var(--color-ink-soft); border-radius: 20px;
  transition: background var(--transition-duration);
}
/* hover 收进 token:底色改 ink-soft 后,原来写死的 rgba(42,29,21,.75) 比常态还深,方向反了。
   现在 hover = 沉到更深的 --color-ink,白字对比只增不减。 */
.button-common:hover { background: var(--color-ink); }
.button-common--white { color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-ink); }

/* ===== 面包屑(全站共享)===== */
/* 线上 .add-breadcrumb:全宽 37px 0 40px,inner 0 65px,≤768 隐藏;行盒实测 27.9px(13px×2.15) */
.breadcrumb { width: 100%; padding: 37px 0 40px; }
@media (max-width: 768px) { .breadcrumb { display: none; } }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 65px; font-size: 13px; line-height: 2.15; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--color-muted); }
.breadcrumb li:first-child a { font-family: var(--font-en); }
.breadcrumb a:hover { opacity: .7; }
.breadcrumb li:last-child span { color: var(--color-muted-2); }
@media (max-width: 768px) { .breadcrumb { display: none; } } /* dozo 全站移动端隐藏面包屑 */

/* ===== 首页 header:tall 透明大 logo → 滚过 hero 变紧凑绿条 ===== */
body.page-home main { padding-top: 98px; }
@media (max-width: 768px) { body.page-home main { padding-top: 61px; } }

.site-header__tagline { display: none; font-size: var(--text-lg); font-weight: 500; letter-spacing: .045em; }
.site-header--home:not(.is-fixed) { position: absolute; top: 0; }
.site-header--home:not(.is-fixed) .site-header__row { height: 98px; }
.site-header--home:not(.is-fixed) .site-header__logo {
  position: absolute; inset: 33px 0 auto 0; width: 206px; margin: auto; z-index: 10;
}
.site-header--home:not(.is-fixed) .site-header__logo img { width: 100%; }
.site-header--home:not(.is-fixed) .site-header__tagline { display: block; }
.site-header--home.is-fixed { position: fixed; animation: headerSlideDown var(--transition-duration) ease; }
@keyframes headerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (min-width: 769px) and (max-width: 1234px) {
  .site-header--home:not(.is-fixed) .site-header__logo { width: 160px; }
}
@media (min-width: 769px) and (max-width: 1054px) {
  .site-header--home:not(.is-fixed) .site-header__logo { position: static; width: 121px; margin: 0; inset: auto; }
}
@media (max-width: 768px) {
  .site-header--home:not(.is-fixed) .site-header__row { height: 61px; }
  .site-header--home:not(.is-fixed) .site-header__logo { position: static; width: 153px; margin: 0; inset: auto; }
  .site-header--home:not(.is-fixed) .site-header__tagline { display: none; }
  .site-header--home:not(.is-fixed) .site-header__inner { justify-content: flex-end; gap: 16px; }
}

/* ===== 版块骨架 + 三段标题 ===== */
.section { padding: 66px 0 100px; }
@media (max-width: 768px) { .section { padding: 44px 0 72px; } }
/* 2026-08-08 Joel:首页 section 间隔再大一点。骑线标题会吃掉上一段 ~55-65px 的
   底部留白(标题上半悬在上一段底色里),100px 兜不住,只在首页作用域加大。 */
.page-home .section { padding-bottom: 170px; }
@media (max-width: 768px) { .page-home .section { padding-bottom: 110px; } }
.section__inner { width: 100%; max-width: var(--inner-max); padding-inline: 24px; margin-inline: auto; }

.section-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 56px; text-align: center; }
@media (max-width: 768px) { .section-title { margin-bottom: 40px; } }
.section-title__eyebrow img { width: auto; } /* 原生 122.6×15.6,线上无缩放 */
.section-title__eyebrow--text {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-muted);
}
/* 2026-08-15:段落大标题从 Fraunces 换成品牌字 KG HAPPY Solid(对齐现役 dumbdumb.studio,
   线上 "Take a Closer Look" 就是这支 400)。单字重,别写 500 免得浏览器合成假粗。 */
/* Joel 反馈「太粗」:这支字没有更细的一档(KG Happy 家族是 本体/Shadows/Solid 三个叠印
   图层款,不是字重轴),减重只能靠 ①字号整体降一档 ②字距放开(圆头字挤在一起最显重)。
   50→40 / lead 72→56 / minor 30→26,移动端 38→32。 */
.section-title__en {
  margin-top: 16px; font-family: var(--font-brand); font-size: 40px; font-weight: 400;
  line-height: 1; letter-spacing: .02em;
}
@media (max-width: 768px) { .section-title__en { font-size: 32px; } }

/* 主次分级(2026-08-02 视觉返修):原本全站每段同一号字、同一间距,
   翻八屏毫无起伏。lead = 主打段,minor = Scene/Category 这类工具段。 */
.section-title--lead { margin-bottom: 72px; }
/* 用 clamp 跟着视口收:letters 过滤器把空格转成   且字符 span 之间没有空白,
   所以大标题永远不会换行——固定字号时长标题(如 "the city committee")在 390px
   视口下会撑到 389px、左右零边距。9.5vw 保证最长标题也留得下边距。 */
.section-title--lead .section-title__en { font-size: clamp(26px, 7.6vw, 56px); letter-spacing: .015em; }
.section-title--minor { margin-bottom: 34px; }
.section-title--minor .section-title__en { margin-top: 10px; font-size: 26px; }
.section-title--minor .section-title__jp { font-size: 13px; }
@media (max-width: 768px) {
  .section-title--lead { margin-bottom: 48px; }
  /* 这里不再写死字号,交给上面的 clamp(否则会把 9.5vw 盖掉,长标题又贴边) */
  .section-title--minor .section-title__en { font-size: 26px; }
}
.section-title__en span { display: inline-block; opacity: 0; transform: scale(1, .8); transform-origin: bottom; white-space: pre; }
.section-title.is-active .section-title__en span {
  animation: showLetter .3s var(--ease-pop) calc(var(--index, 0) * .06s) forwards;
}
@keyframes showLetter {
  0% { opacity: 0; transform: scale(1, .8) translateY(0); }
  30% { opacity: 1; }
  60% { opacity: 1; transform: scale(1, 1.2) translateY(-30%); }
  100% { opacity: 1; transform: scale(1, 1) translateY(0); }
}
/* 手绘 logo 题字(dōzo mag 297×50 / 公式アプリ 304×93):线上原样 inline SVG,path 按 --index 弹入 */
.section-title__en--logo { display: block; }
.section-title__en--logo svg { display: block; overflow: visible; transform-box: fill-box; }
.section-title__en--logo svg path { opacity: 0; transform: scale(1, .8) translate(0, 0); transform-origin: bottom; }
.section-title.is-active .section-title__en--logo svg path {
  animation: showLetter .3s var(--ease-pop) calc(var(--index, 0) * .1s) forwards;
}
@media (max-width: 768px) {
  .section-title__en--logo svg { width: auto; max-width: 100%; height: 37px; }
  .section-title__en--logo-app svg { max-width: 265px; height: auto; }
}
.section-title__jp { margin-top: 20px; font-size: 22px; font-weight: 700; line-height: 1.15; }
@media (max-width: 768px) { .section-title__jp { font-size: 15px; } }

/* 通用页标题段(线上 .add-sectionGeneral.narrow:30px 顶 + inner 85px 顶 + 标题 -114px 拉升;
   illustrators / M6 信息页等复用;magazine 保留其页内同款定义) */
.section--page-heading { padding: 30px 0 0; }
.section--page-heading .section__inner { padding: 85px 0 0; }
.section--page-heading .section-title { margin-top: -114px; margin-bottom: 60px; }
@media (max-width: 768px) {
  .section--page-heading { padding: 60px 0 0; }
  .section--page-heading .section-title { margin-top: -86px; margin-bottom: 20px; }
}

/* AOS fade-up 复用(base.css 已定义 [data-aos=fade-up]) */

/* ===== HERO ===== */
.hero { padding: 0 66px 24px; background: var(--color-bg); }
@media (max-width: 768px) { .hero { padding: 0 0 24px; overflow: hidden; } }
.hero__container { position: relative; }
@media (max-width: 768px) { .hero__container { padding-right: 43px; } }
.hero__credit {
  position: absolute; inset: 0 auto 0 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 66px; translate: -100% 0;
}
.hero__credit p { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-lr; scale: -1; }
@media (max-width: 768px) { .hero__credit { display: none; } }
/* 「刀切」:新的一张纸斜着盖过来,旧的一动不动。转场整个画在 .hero__gl 这块 canvas 上,
   下面那叠 .hero__slide 只是贴图源 + 兜底。比例从 img 移到容器上——slide 是绝对定位,
   撑不起父高。2026-08-09 起 16 张全是四季合成主视觉(2560×1400 原生同比),不需要逐张裁位。 */
.hero__slides {
  position: relative; background: var(--color-white);
  aspect-ratio: 2573 / 1402; overflow: hidden;
}
@media (max-width: 768px) { .hero__slides { background: transparent; aspect-ratio: 692 / 1163; } }
/* canvas 只在 JS 确认 WebGL 可用后才由 .is-gl 点亮;点亮后 DOM 那叠图全程不可见
   (它们还在,是贴图源)。没点亮就是 display:none,兜底路径完全不受影响。 */
.hero__gl { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.hero__slides.is-gl .hero__gl { display: block; }
.hero__slides.is-gl .hero__slide { visibility: hidden; }
.hero__slide { position: absolute; inset: 0; visibility: hidden; }
.hero__slide.is-current { visibility: visible; }
/* ⚠ picture 必须给确定高度:它才是 img 的包含块,而它自身 height:auto(内容撑)时,
   img 的 height:100% 无从解析、静静退回 auto——桌面端容器比例(1.835)和图片自然比例
   (1.829)几乎一样所以看不出来,移动端竖构图容器立刻露馅(图变成横的,底下一片空)。
   加 !important 没用,这不是优先级问题。 */
.hero__slide picture { display: block; height: 100%; }
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__next {
  position: absolute; inset: 0 0 0 auto; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  width: 66px; translate: 100% 0;
}
/* autoplay 进度线:细竖线,4 秒填满。hover Next 时暂停。 */
.hero__progress { display: block; width: 1px; height: 62px; background: rgba(42, 29, 21, .16); }
.hero__progress i { display: block; width: 100%; height: 100%; background: var(--color-ink); transform-origin: top; scale: 1 0; }
@media (max-width: 768px) { .hero__next { display: none; } }
.hero__next-button { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.hero__next-button > span:first-child { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-lr; scale: -1; }
.hero__next-arrow {
  width: 30px; height: 27px;
  background: url(/assets/home/nav-arrow.svg) center/contain no-repeat;
  transition: background-image var(--transition-duration);
}
.hero__next-button:hover .hero__next-arrow { background-image: url(/assets/home/nav-arrow-black.svg); }
.hero__sp-text { display: none; }
@media (max-width: 768px) {
  .hero__sp-text {
    position: absolute; inset: 0 0 0 auto; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 43px;
  }
  .hero__sp-text img { width: 100%; }
}
.hero__sp-title {
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink);
}
.hero__button { margin-top: 24px; text-align: center; }

/* ===== ARTICLE ITEM(what's new + magazine)===== */
.article-list { margin: 0 -50px; }
@media (max-width: 768px) { .article-list { margin: 0; } }
/* 桌面端也要能滚:5 张卡 × flex 25% = 125%,第 5 张整张(327px)藏在 section 的
   overflow:hidden 后面,原来任何输入方式都够不着。原站那一排本来有滑动控件,
   Phase 1 只复刻了静态版式,2026-08-08 又把不工作的 pager 删了 → 就此彻底失联。 */
.article-row { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.article-row::-webkit-scrollbar { display: none; }
.article-row > * { scroll-snap-align: start; }
/* 控件:跟 hero 进度线同一个「细线填充」语汇,全站只保留这一套进度语言。
   home.js 只在真的溢出时才 unhide,不溢出就不出现。 */
.row-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.row-nav[hidden] { display: none; }
.row-nav__arrow {
  width: 34px; height: 31px; background: url(/assets/common/nav-arrow.svg) center/contain no-repeat;
  transition: background-image var(--transition-duration), opacity .3s ease;
}
.row-nav__arrow:hover { background-image: url(/assets/common/nav-arrow-black.svg); }
.row-nav__arrow--prev { scale: -1 1; }
.row-nav__arrow:disabled { opacity: .26; pointer-events: none; }
.row-nav__track { position: relative; width: 96px; height: 1px; background: rgba(42, 29, 21, .16); }
.row-nav__track i {
  position: absolute; inset: 0 auto 0 0; display: block; width: 100%; height: 100%;
  background: var(--color-ink); transform-origin: left; scale: 0 1;
}
@media (prefers-reduced-motion: reduce) { .row-nav__arrow { transition: none; } }
.article-row > * { flex: 1 0 25%; min-width: 0; border-left: 1px solid var(--color-ink); }
.article-row > *:first-child { border-left: none; }
@media (max-width: 768px) { .article-row > * { flex: 0 0 300px; } }
.article-item {
  display: grid; grid-template-areas: "side thumb" "title title"; grid-template-rows: auto 1fr;
  grid-template-columns: 37px 1fr; height: 100%; padding: 0 50px; color: inherit;
}
@media (max-width: 768px) { .article-item { padding: 0 30px; } }
.article-item__side {
  grid-area: side; display: flex; flex-direction: column; gap: 20px; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 768px) { .article-item__side { font-size: 11px; gap: 18px; } }
.article-item__side > * { writing-mode: vertical-lr; scale: -1; }
.article-item__side hr { width: 12px; height: 1px; border: none; border-top: 1px solid var(--color-muted-2); translate: 3px 0; }
.article-item__thumb { grid-area: thumb; display: flex; align-items: center; overflow: hidden; transition: rotate var(--transition-duration); }
.article-item__thumb img { width: 100%; height: auto; border: 1px solid var(--color-ink); }
.article-item:hover .article-item__thumb { rotate: -6deg; }
.article-item__title {
  grid-area: title; margin-top: 34px; font-size: 15px; font-weight: 700; line-height: 1.8; letter-spacing: .045em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ===== GOODS ITEM(pickup + ranking)===== */
.goods-row { display: flex; gap: 50px; }
@media (max-width: 768px) { .goods-row { gap: 30px; overflow-x: auto; scrollbar-width: none; } .goods-row::-webkit-scrollbar { display: none; } }
.goods-row > * { flex: 1 0 0; min-width: 0; }
@media (max-width: 768px) { .goods-row > * { flex: 0 0 300px; } }
.goods-item {
  position: relative; display: flex; flex-direction: column; height: 100%;
  font-weight: 700; font-size: 18px; line-height: 1.444; letter-spacing: .045em; color: inherit;
}
.goods-item__number { font-family: var(--font-en); line-height: 1; margin-bottom: 8px; }
.goods-item__number span:first-child { font-size: 26px; }
.goods-item__number span:last-child { font-size: 48px; }
/* 单图卡(2026-08-02 视觉返修):原本是四图拼贴 + hover 整卡歪 -6deg。
   改成一张方图落在暖白底板上、发丝级细边;hover 只让图微微推近,不再歪。
   白底 tote 抠图和满幅暖调实拍色温不同,靠统一底板 + 统一比例收齐。 */
/* 商品图有两种拍法混排:tote 是白底棚拍(图里自带白边),戒指是实拍 lifestyle(满幅)。
   同一排里一个留白一个出血,视觉体量差一大截。给框统一 4% 内边距 + contain,
   让实拍也退进白框里,两种图至少落在同一套画框规则上。 */
.goods-item__thumb {
  overflow: hidden; background: var(--color-white);
  aspect-ratio: 1; padding: 4%;
  border: 1px solid var(--color-border);
}
.goods-item__image {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: scale var(--transition-duration) ease;
}
.goods-item:hover .goods-item__image { scale: 1.03; }
@media (prefers-reduced-motion: reduce) {
  .goods-item__image { transition: none; }
  .goods-item:hover .goods-item__image { scale: 1; }
}
.goods-item__title { min-height: 52px; margin-top: 14px; font-size: 18px; } /* h3 默认 1.17em 会放大到 21px,线上 18px */
@media (max-width: 768px) { .goods-item__title { min-height: auto; } }
/* min-height = .term-badge 的 34px:没有徽章的卡(如 #02)这一行只有价格文字,
   行高比有徽章的矮 11px,后面的摘要和按钮跟着整体上移,一排四张卡基线错开。
   给这行定死徽章的高度,有没有徽章都占同样一行。 */
.goods-item__data { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; min-height: 34px; }
.goods-item__price { margin-left: auto; text-align: right; }
.goods-item__excerpt {
  margin-top: 5px; margin-bottom: 20px; font-weight: 400; font-size: 13px; line-height: 1.538;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.goods-item__button-wrap { margin-top: auto; }
.goods-item__button-wrap .button-common { max-width: 162px; font-size: 13px; }

/* .multi-thumb 四图拼贴已于 2026-08-02 视觉返修移除(macros.njk + themes.njk 都改单图),
   规则一并删掉,免得日后误以为还在用。 */

/* category-bg.svg 是 200×200 的方形手绘色块。原来配 `center/contain` 放在 110×34 的盒子里,
   contain 只能缩到 34×34 的小圆点居中,文字整条压在色块外面(整块撞色底时不明显,中性底上很扎眼)。
   修法:盒子宽度跟着文字走,色块拉满整个盒子。2026-08-02 视觉返修。 */
.term-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px; height: 34px; padding: 0 16px;
  font-size: 11px; text-align: center; white-space: nowrap;
  background: url(/assets/common/category-bg.svg) center/100% 100% no-repeat;
}

/* ===== RECOMMEND(ticket 卡)===== */
.recommend-row { display: flex; gap: 50px; }
@media (max-width: 768px) { .recommend-row { gap: 10px; overflow-x: auto; scrollbar-width: none; } .recommend-row::-webkit-scrollbar { display: none; } }
.recommend-row > * { flex: 1 0 0; min-width: 0; }
@media (max-width: 768px) { .recommend-row > * { flex: 0 0 84vw; } }
.recommend-item { position: relative; display: block; padding: 26px; color: inherit; }
@media (max-width: 768px) { .recommend-item { padding: 5px; } }
.recommend-item__inner {
  --x: 60px; padding: 40px 67px; background: var(--color-surface); border: 1px solid var(--color-ink);
  clip-path: polygon(var(--x) 0, 100% 0, 100% calc(100% - var(--x)), calc(100% - var(--x)) 100%, 0 100%, 0 var(--x));
}
@media (max-width: 1024px) { .recommend-item__inner { padding: 40px 30px; } }
@media (max-width: 768px) { .recommend-item__inner { --x: 28px; padding: 30px 25px; } }
.recommend-item__staff { display: flex; gap: 13px; align-items: center; justify-content: center; margin-bottom: 23px; }
.recommend-item__staff img { width: 53px; aspect-ratio: 1; border: 1px solid var(--color-ink); border-radius: 50%; }
.baloon {
  display: flex; align-items: center; justify-content: center; width: 238px; height: 57px;
  background: url(/assets/common/staff-baloon-bg.svg) center/contain no-repeat;
}
@media (max-width: 768px) { .baloon { width: 204px; } }
.baloon__inner { font-family: var(--font-hand); font-size: 17px; font-weight: 700; translate: 0 -4px; }
.recommend-item__header { display: grid; grid-template-columns: 35% 1fr; gap: 17px; align-items: center; }
.recommend-item__image img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--color-ink); }
.recommend-item__title { font-weight: 700; font-size: 18px; line-height: 1.444; }
@media (max-width: 768px) { .recommend-item__title { font-size: 13px; } }
.recommend-item__excerpt { margin-top: 22px; font-weight: 400; font-size: 13px; line-height: 1.462; }
.recommend-item__link { display: flex; flex-direction: column; gap: 20px; margin-top: 23px; }
.recommend-item__gift { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 14px; letter-spacing: .045em; }
.recommend-item__link .button-common { max-width: 162px; font-size: 13px; }

/* ===== HOW TO USE ===== */
.howto-lead { margin: 60px 0 40px; font-size: 17px; font-weight: 700; line-height: 1.882; text-align: center; }
@media (max-width: 768px) { .howto-lead { font-size: 13px; } }
.comic-row { display: flex; gap: 50px; }
@media (max-width: 768px) { .comic-row { gap: 30px; overflow-x: auto; scrollbar-width: none; } .comic-row::-webkit-scrollbar { display: none; } }
.comic-row > * { flex: 1 0 0; min-width: 0; }
@media (max-width: 768px) { .comic-row > * { flex: 0 0 300px; } }
.comic-row button { display: block; width: 100%; }
.comic-row img { width: 100%; border: 1px solid var(--color-ink); }
.howto-button { margin-top: 40px; text-align: center; }

/* ===== SCENE(tag pills)===== */
/* 六个 occasion 标签走 3×2 等宽网格。原来是 flex-wrap 居中,标签宽度随字数变化,
   2026-08-06 去掉 emoji 后整体变窄,换行点从 4+2 变成 5+1、最后一个孤零零挂在第二行。
   等宽网格让换行位置不再受文案长度摆布,也更像一套系统而不是一堆气泡。 */
.tag-list { max-width: 760px; margin: 0 auto; }
.tag-list ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.tag-list .tag-item { width: 100%; }
@media (max-width: 768px) { .tag-list ul { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
.tag-item {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; font-size: 15px; font-weight: 700; text-align: center; letter-spacing: .045em;
  background: var(--color-white); border: 1px solid var(--color-ink); border-left: 8px solid; transition: rotate var(--transition-duration);
}
@media (max-width: 768px) { .tag-item { min-width: 147px; padding: 11px 16px 13px; font-size: 13px; } }
.tag-item:hover { rotate: -3deg; }

/* ===== CATEGORY(round icon grid)===== */
.category-list { max-width: 840px; margin: 0 auto; }
/* 4 列而不是 5:dozo 线上有 5 个 category,我们只有 4 个,沿用 repeat(5) 会空出
   最右一列、整排视觉上左偏约 60px(2026-08-06 实测)。 */
.category-list ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 42px; }
@media (max-width: 768px) { .category-list ul { grid-template-columns: repeat(3, 1fr); gap: 28px 14px; } }
.category-item { display: grid; gap: 20px; justify-items: center; color: inherit; }
@media (max-width: 768px) { .category-item { gap: 7px; } }
/* 方形商品图铺满圆框时,左右两侧会被圆弧切掉(tote 的袋身边缘首当其冲)。
   12% 内边距是算出来的甜点:图的左右中点落在半径 0.38 处(圆内,tote 不被裁),
   四个角落在 0.537 处(圆外,被圆弧切掉)——所以实拍图不会露出生硬的方形边。
   ≥15% 时四角也进圆内,戒指那张白纱实拍就会变成"圆里贴了张方图"。 */
/* ⚠ padding 用 px 不用 %:百分比 padding 按「包含块宽度」算,不是元素自己的宽度。
   桌面这里 max-width 把圆压到 133px、但网格单元有 ~178px,写 12% 会算成 21px(≈16%),
   四角又落回圆内。16px 才是 133 的 12%。移动端圆本身撑满单元,百分比正好等价。 */
.category-item__icon {
  width: 100%; max-width: 133px; aspect-ratio: 1; overflow: hidden;
  padding: 16px; background: var(--color-white);
  border: 1px solid var(--color-ink); border-radius: 50%;
}
@media (max-width: 768px) { .category-item__icon { max-width: 100%; padding: 12%; } }
.category-item__icon img { width: 100%; height: 100%; object-fit: contain; transition: scale var(--transition-duration); }
.category-item:hover .category-item__icon img { scale: 1.1; }
.category-item span { font-size: 13px; font-weight: 700; line-height: 1.462; text-align: center; letter-spacing: .045em; }
@media (max-width: 768px) { .category-item span { font-size: 11px; } }

/* ===== MAGAZINE(3-col grid)=====
   线上 .add-magazineList:--item-padding 46px(768–1400:25px,≤768:0),
   网格负 margin 让卡片 padding 悬出内容列(ul margin 0 -46px 实测)。 */
.magazine-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  --item-padding: 46px; margin: 0 calc(-1 * var(--item-padding));
}
@media (min-width: 769px) and (max-width: 1400px) { .magazine-grid { --item-padding: 25px; } }
@media (max-width: 768px) { .magazine-grid { grid-template-columns: 1fr; --item-padding: 0px; margin: 0; } }
.magazine-grid > * { border-left: 1px solid var(--color-ink); }
.magazine-grid > *:first-child { border-left: none; }
@media (max-width: 768px) { .magazine-grid > * { border-left: none; border-top: 1px solid var(--color-ink); } .magazine-grid > *:first-child { border-top: none; } }
.article-item--magazine { padding: 0 var(--item-padding, 46px); }
@media (max-width: 768px) { .article-item--magazine { padding: 30px var(--item-padding, 0px); } }
.article-item--magazine .article-item__title { margin-top: 24px; line-height: 1.4; letter-spacing: 0; }
.magazine-button { margin-top: 40px; text-align: center; }

/* ===== OFFICIAL APP ===== */
.app-cards { display: flex; gap: 6px; max-width: 980px; width: 98%; margin: 0 auto; }
@media (max-width: 768px) { .app-cards { flex-wrap: wrap; } }
.app-card { flex: 1; min-width: 0; padding: 27px 23px; min-height: 230px; background: var(--color-white); border: 1px solid var(--color-ink); border-radius: .6rem; text-align: center; }
@media (max-width: 768px) { .app-card { flex: 1 1 100%; } }
.app-card__icon img { margin: 0 auto; height: 64px; width: auto; }
.app-card__text { margin: 1rem auto 0; line-height: 1.6; }
.app-card__text span { display: block; }
.marker-line { display: inline; padding: 0 2px 3px; background: linear-gradient(transparent 60%, var(--color-accent-yellow) 60%); }
.app-lead { margin: 30px 0 20px; font-weight: 700; line-height: 2; text-align: center; }
.app-lead .p18 { font-size: 18px; }
.app-banners { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.app-banners__qr { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 10px; }
.app-banners__qr img { width: 57px; height: 57px; }
.app-banners__qr p { font-size: 18px; font-weight: 700; line-height: 1.4; }
.app-banners .button-common { min-width: 260px; height: 44px; font-size: 16px; border-radius: 30px; box-shadow: var(--shadow-hard); }

/* ===== 通用 slider nav(箭头 + 01 — 02 计数)===== */
.slider-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 426px; margin: 40px auto 0; }
@media (max-width: 768px) { .slider-nav { max-width: 312px; margin-top: 30px; } }
.slider-nav__arrow { width: 40px; height: 37px; background: url(/assets/common/nav-arrow.svg) center/contain no-repeat; transition: background-image var(--transition-duration); }
.slider-nav__arrow:hover { background-image: url(/assets/common/nav-arrow-black.svg); }
.slider-nav__arrow--prev { scale: -1 1; }
.slider-nav__nums { display: flex; gap: 15px; align-items: center; font-size: 19px; letter-spacing: .045em; }
.slider-nav__nums span[data-border] { display: block; width: 60px; height: 1px; background: var(--color-ink); }
@media (max-width: 768px) { .slider-nav__nums { font-size: 14px; } .slider-nav__nums span[data-border] { width: 44px; } }

/* ===== FLOATING BADGE ===== */
.fixed-badge {
  position: fixed; right: 10px; bottom: 10px; z-index: 1000;
  display: inline-block; width: 169px; aspect-ratio: 1;
  transition: visibility .3s, opacity .3s, translate .3s;
}
@media (max-width: 768px) { .fixed-badge { width: 113px; top: 100px; bottom: auto; } }
.fixed-badge:hover { translate: 0 -5px; }
.fixed-badge:hover .fixed-badge__spin { animation-play-state: paused; }
.fixed-badge.is-hidden { visibility: hidden; opacity: 0; }
.fixed-badge__inner { position: relative; display: block; }
.fixed-badge__spin { position: relative; z-index: 0; animation: badgeSpin 40s infinite linear; }
.fixed-badge__inner img:not(.fixed-badge__spin) { position: absolute; inset: 0; z-index: 1; }
@keyframes badgeSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ===== COMIC MODAL ===== */
.comic-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.comic-modal.is-active { display: block; }
.comic-modal__layer { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.comic-modal__area { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.comic-modal__img { max-width: min(90vw, 600px); max-height: 90vh; }
.comic-modal__img img { width: 100%; height: auto; }
.comic-modal__close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; }
.comic-modal__close::before, .comic-modal__close::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--color-white); }
.comic-modal__close::before { transform: rotate(45deg); }
.comic-modal__close::after { transform: rotate(-45deg); }
.comic-modal__arrow { position: absolute; top: 50%; width: 44px; height: 40px; background: url(/assets/common/nav-arrow-white.svg) center/contain no-repeat; }
.comic-modal__arrow--prev { left: 16px; scale: -1 1; }
.comic-modal__arrow--next { right: 16px; }

/* ===== 版块背景色 =====
   2026-08-08 Joel 拍板:回归 dozo 式分段通底——每段一块浅色底、标题骑在换色分界线上
   (取代 2026-08-02「统一奶油米+细线」的 C 版决定)。通底全部取自已调成 dumbdumb
   暖皮的 base-* token;绿色原值太饱和,通底处用白洗 38%;magazine 用主 rose 洗 30%。
   分界线本身就是分段信号,banded 段不再要 border-top。
   2026-08-09 中度柔化(00e §4):通铺改吃 --band-*(tokens.css),色块从「撞色」降到「换纸」;
   base-* 原值仍留给小面积点缀。分段通底与骑线标题的节奏一个不动。 */
.section--whatsnew { background: var(--color-white); overflow: hidden; }
.section--pickup { background: var(--band-blue); }
.section--howtouse { background: transparent; }
.section--recommend { background: var(--band-green); }
.section--ranking { background: var(--color-bg); }
.section--scene { background: var(--band-sand); }
.section--category { background: var(--color-white); }
.section--magazine { background: var(--band-rose); }
.section--app { background: var(--color-bg); border-top: 1px solid var(--color-border); }

/* 骑线标题(dozo 签名式,机制同 guide.css Space 变体的负 margin 拉升):
   banded 段 padding-top 归零,标题块负 margin 上提,让换色分界线切在大标题字高中点。
   lift ≈ eyebrow 行高(~13px)+ 16px 间距 + 大字一半(默认 50 / lead 72 / minor 无 eyebrow 只有 10+30)。 */
/* flow-root:标题负 margin 会穿透 __inner 塌到 section 本体(整块色底跟着上移,骑线失效);
   BFC 挡住塌陷,溢出的标题上半仍正常画在上一段底色上(flow-root 不裁 overflow)。 */
.section--band { padding-top: 0; display: flow-root; }
.section--band .section-title { margin-top: -54px; }
.section--band .section-title--lead { margin-top: -65px; }
.section--band .section-title--minor { margin-top: -25px; }
@media (max-width: 768px) {
  .section--band .section-title { margin-top: -48px; }
  .section--band .section-title--lead { margin-top: calc(-29px - 4.75vw); }
  .section--band .section-title--minor { margin-top: -22px; }
}

/* Most Gifted 榜单化(2026-08-08 C 类:原与 This Month 同构四卡排,节奏全平):
   桌面端 no.01 整卡占左列,02–04 收成右列横条(图+名次+题+价),excerpt/按钮只留头名。
   移动端维持四卡横滚不变。 */
@media (min-width: 769px) {
  .section--ranking .goods-row {
    display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr));
    column-gap: 64px; row-gap: 0;
  }
  .section--ranking .goods-row > :first-child { grid-area: 1 / 1 / 4 / 2; }
  .section--ranking .goods-row > :not(:first-child) { border-top: 1px solid var(--color-border); }
  .section--ranking .goods-row > :nth-child(2) { border-top: none; }
  .section--ranking .goods-row > :not(:first-child) .goods-item {
    display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "thumb number" "thumb title" "thumb data";
    column-gap: 20px; align-content: center; height: 100%; padding: 16px 0;
  }
  .section--ranking .goods-row > :not(:first-child) .goods-item__thumb { grid-area: thumb; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__number { grid-area: number; margin-bottom: 4px; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__number span:first-child { font-size: 14px; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__number span:last-child { font-size: 24px; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__title { grid-area: title; min-height: 0; margin-top: 4px; font-size: 16px; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__data { grid-area: data; min-height: 0; margin-top: 6px; }
  .section--ranking .goods-row > :not(:first-child) .goods-item__excerpt,
  .section--ranking .goods-row > :not(:first-child) .goods-item__button-wrap { display: none; }
}