/* Minimal + warm, designed for Bootstrap 5 layout */
:root{
  --bg0:#fbfbff;
  --bg1:#fff7f3;
  /* 弥散渐变收边：避免用纯 transparent（等价透明黑）产生灰边与拼合感 */
  --mesh0: rgba(251, 251, 255, 0);
  --mesh1: rgba(255, 247, 243, 0);
  --ink:#1f2937;
  --muted:#6b7280;
  --card:#ffffffcc;
  --cardBorder:#ffffffb3;
  --shadow: 0 18px 45px rgba(31,41,55,.10);
  --shadowSm: 0 10px 25px rgba(31,41,55,.10);
  --radius: 18px;
  --radiusSm: 14px;
  --primary:#2f6fed;
  --primary2:#22c55e;
  --accent:#f59e0b;
  --heroTitleInk:#2e2a42;
  --heroTitleInk2:#3d4a6e;
  --heroSubtitleInk:#58536a;
  /* 与首页 / About 装饰小花花瓣色一致 */
  --flower-petal-blue:#8FA6F0;
  --flower-petal-green:#B4E06A;
  --flower-petal-yellow:#FFE566;
  --font-hero-display: "Playfair Display", Georgia, "Times New Roman", "Noto Serif SC", "Source Han Serif SC", serif;
  /* 首页英文主标题：Fraunces（Web 显示衬线，气质接近装饰标题体；回退 Cormorant） */
  --font-hero-title: "Fraunces", "Cormorant Garamond", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-hero-subtitle: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
}

html{
  min-height:100%;
  background:linear-gradient(168deg, var(--bg0) 0%, var(--bg1) 48%, #fffdfb 100%);
}
/* 整页一张弥散底：固定 + 模糊 + 放大，无平铺、无明显色块边线 */
html::before{
  content:"";
  position:fixed;
  inset:-12vmin;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 12% 8%, rgba(47,111,237,.26) 0%, var(--mesh0) 58%),
    radial-gradient(ellipse 90% 82% at 92% 4%, rgba(34,197,94,.18) 0%, var(--mesh1) 54%),
    radial-gradient(ellipse 88% 78% at 88% 92%, rgba(245,158,11,.16) 0%, var(--mesh1) 56%),
    radial-gradient(ellipse 70% 65% at 6% 88%, rgba(47,111,237,.12) 0%, var(--mesh0) 62%),
    radial-gradient(ellipse 55% 50% at 48% 42%, rgba(186,172,214,.14) 0%, var(--mesh0) 68%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(34,197,94,.08) 0%, var(--mesh1) 45%);
  filter:blur(56px);
  opacity:.92;
  transform:translateZ(0);
}
@media (prefers-reduced-motion: reduce){
  html::before{
    filter:blur(28px);
    opacity:.96;
  }
}

html,body{ min-height:100%; }
body{
  position:relative;
  z-index:1;
  color:var(--ink);
  background:transparent;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 游客 / 求职 浏览模式：About 双卡同格叠放 + 切换时渐隐交叉淡入淡出 */
.about-grid.about-flip-stage{
  display:grid;
}
.about-grid.about-flip-stage > .about-flip-face{
  grid-area:1 / 1;
  min-width:0;
}
.about-flip-face.about-guest-placeholder{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:clamp(260px,36vw,420px);
  text-align:center;
}
html[data-view-mode="guest"]:not([data-about-anim]) .about-flip-face--recruit{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:none;
}
html[data-view-mode="guest"]:not([data-about-anim]) .about-flip-face--guest{
  z-index:2;
}
html[data-view-mode="recruit"]:not([data-about-anim]) .about-flip-face--guest{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:none;
}
html[data-view-mode="recruit"]:not([data-about-anim]) .about-flip-face--recruit{
  z-index:2;
}
html[data-about-anim] .about-flip-face--guest,
html[data-about-anim] .about-flip-face--recruit{
  visibility:visible !important;
  pointer-events:none;
}

.view-mode-pill-wrap.is-locked{
  pointer-events:none;
  opacity:.62;
}
.about-guest-placeholder__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:38rem;
  margin:0 auto;
  padding:clamp(2.15rem,5.5vw,3.35rem) clamp(1.85rem,5vw,3.1rem);
  box-sizing:border-box;
}
.about-guest-placeholder__lead{
  margin:0 0 clamp(1.1rem,2.8vw,1.45rem);
  font-weight:600;
  font-size:clamp(0.98rem,1.35vw,1.08rem);
  line-height:1.92;
  letter-spacing:0.02em;
  color:var(--heroSubtitleInk);
  text-wrap:balance;
}
.about-guest-placeholder__lead strong{
  font-weight:700;
  color:var(--heroTitleInk2);
}
.about-guest-placeholder__hint{
  margin:0;
  font-size:clamp(0.86rem,1.2vw,0.95rem);
  line-height:1.88;
  letter-spacing:0.03em;
  color:var(--muted);
  text-wrap:balance;
}

.view-mode-pill-wrap{
  width:100%;
  padding-top:.5rem;
  margin-top:.35rem;
  border-top:1px solid rgba(186,172,214,.22);
}
@media (min-width: 992px){
  .view-mode-pill-wrap{
    width:auto;
    padding-top:0;
    margin-top:0;
    margin-left:.65rem;
    padding-left:.85rem;
    border-top:none;
    border-left:1px solid rgba(186,172,214,.28);
  }
}
.view-mode-pill{
  display:inline-flex;
  align-items:center;
  padding:3px;
  border-radius:999px;
  background:rgba(244,241,250,.78);
  border:1px solid rgba(186,172,214,.38);
  box-shadow:0 4px 16px rgba(91,77,114,.06);
  gap:2px;
}
.view-mode-pill__btn{
  border:none;
  background:transparent;
  color:#6f687c;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.04em;
  padding:.32rem .78rem;
  border-radius:999px;
  line-height:1.25;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.view-mode-pill__btn:hover{
  color:#4f475c;
  background:rgba(255,255,255,.5);
}
.view-mode-pill__btn.is-active{
  color:#3f364f;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(47,111,237,.09);
}
.view-mode-pill__btn:focus-visible{
  outline:2px solid rgba(47,111,237,.38);
  outline-offset:2px;
}

.guest-hint-toast{
  position:fixed;
  bottom:1.25rem;
  left:50%;
  transform:translateX(-50%) translateY(130%);
  max-width:min(22rem,calc(100vw - 2rem));
  padding:.8rem 1.05rem;
  border-radius:var(--radiusSm);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(186,172,214,.42);
  box-shadow:var(--shadowSm);
  font-size:.875rem;
  color:var(--muted);
  z-index:1090;
  opacity:0;
  pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .32s ease;
  text-align:center;
}
.guest-hint-toast.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}

html[data-view-mode="guest"] #footerContactBtn{
  opacity:.58;
  cursor:not-allowed;
}

.app-navbar{
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.brand-dot{
  display:inline-block;
  width:.55rem;height:.55rem;
  border-radius:999px;
  background: linear-gradient(135deg, var(--primary), var(--primary2), var(--accent));
  box-shadow: 0 6px 18px rgba(47,111,237,.25);
  margin-left:.45rem;
  transform: translateY(-1px);
}

/* Header 背景内装饰层：裁剪在 hero 内，低于标题层（标题区 z-index 更高，避免渐变字被叠在下面） */
.hero-flowers{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-flowers .page-flower{
  z-index: 0;
}
.page-flower{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--flower-size, 120px);
  height: var(--flower-size, 120px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.58s cubic-bezier(0.33, 0.9, 0.32, 1), height 0.58s cubic-bezier(0.33, 0.9, 0.32, 1);
  will-change: transform;
}
.page-flower:focus-visible{
  outline: 2px solid rgba(47, 111, 237, 0.45);
  outline-offset: 4px;
}
.page-flower-inner{
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page-flower-svg{
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 12px rgba(31, 41, 55, 0.07));
}

.hero{
  position: relative;
  z-index: 10;
  overflow: hidden;
  min-height: clamp(400px, 68vh, 800px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* 底部略加高，避免主标题降部被 hero 的 overflow 裁掉 */
  padding: 5rem 0 clamp(3.25rem, 5.5vh, 4.75rem);
}
.hero-content{
  position: relative;
  z-index: 20;
  pointer-events: none;
}
main.container{
  position: relative;
  z-index: 10;
}

.hero-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
  pointer-events: auto;
}

/* 首页主标题：Fraunces；整体略右移；合并行 to my 与 world 同字号；渐变字色；叠层在装饰花之上 */
.hero-title{
  font-family: var(--font-hero-title);
  /* 基准 u：首行 5u；合并行 to my 与 world 同为 3u */
  --hero-fs-u: clamp(0.57rem, 1.84vw, 1.42rem);
  font-weight: 600;
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: 0.03em;
  line-height: 1.02;
  margin: 0 auto 1rem;
  /* 整块英文标题略向右，视觉中心更贴近版面中线 */
  padding: 0.12em 0 0.28em;
  width: 100%;
  max-width: min(100%, 52rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  row-gap: 0;
  text-wrap: balance;
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  transform: translateX(clamp(0.55rem, 3.2vw, 2.15rem));
}
.hero-title-line{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.22em 0.35em;
  width: 100%;
  overflow: visible;
}
.hero-title-line--welcome{
  justify-content: flex-start;
  line-height: 1;
  margin-bottom: 0;
}
.hero-title-line--welcome .hero-title-word{
  font-size: calc(5 * var(--hero-fs-u));
  font-weight: 600;
  font-style: italic;
}
.hero-title-line--sub{
  justify-content: center;
  align-items: baseline;
  gap: 0.12em 0.26em;
  /* 留足行盒高度，避免「my」降部、「world」笔画下端被裁切 */
  line-height: 1.18;
  padding-bottom: 0.14em;
  /* 相对第一行再向右；父级已整体右移，此处略收一点避免过偏 */
  transform: translateX(clamp(1.1rem, 9vw, 5.5rem));
  margin-top: 0;
  overflow: visible;
}
.hero-title-word{
  display: inline-block;
  letter-spacing: 0.04em;
  color: var(--heroTitleInk);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 24px rgba(47, 111, 237, 0.06),
    0 8px 40px rgba(91, 77, 114, 0.06);
}
.hero-title-line--sub .hero-title-word--soft{
  font-size: calc(3 * var(--hero-fs-u));
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #5c5472;
  line-height: 1.15;
  padding-bottom: 0.04em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 16px rgba(143, 166, 240, 0.1);
}
.hero-title-line--sub .hero-title-word--world{
  font-size: calc(3 * var(--hero-fs-u));
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1.12;
  padding-bottom: 0.05em;
}
.hero-title-tilde{
  display: inline-block;
  font-family: var(--font-hero-title);
  font-size: calc(2.4 * var(--hero-fs-u));
  font-weight: 600;
  font-style: normal;
  color: #8b7aa8;
  margin-left: 0.02em;
  line-height: 1;
  transform: translateY(-0.2em);
  vertical-align: baseline;
  text-shadow: 0 2px 12px rgba(139, 122, 168, 0.12);
}
@supports (background-clip: text) and ((-webkit-background-clip: text) or (background-clip: text)){
  .hero-title-line--welcome .hero-title-word,
  .hero-title-word--world{
    background: linear-gradient(
      118deg,
      var(--heroTitleInk) 0%,
      var(--heroTitleInk2) 32%,
      #5c4d72 52%,
      #6b5d7a 68%,
      var(--heroTitleInk2) 88%,
      var(--heroTitleInk) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(47, 111, 237, 0.08)) drop-shadow(0 10px 32px rgba(91, 77, 114, 0.07));
  }
  .hero-title-line--sub .hero-title-word--soft{
    background: linear-gradient(
      108deg,
      #4f4a63 0%,
      #5c5472 28%,
      #6d6490 55%,
      #7a7199 78%,
      #5c5472 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 12px rgba(143, 166, 240, 0.12));
  }
  .hero-title-tilde{
    background: linear-gradient(
      125deg,
      #7a6b96 0%,
      #9b8ab8 40%,
      #b8a8d4 70%,
      #8b7aa8 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 10px rgba(139, 122, 168, 0.18));
  }
}
.hero-subtitle{
  font-family: var(--font-hero-subtitle);
  font-weight: 400;
  font-style: normal;
  margin: 0.35rem auto 1.35rem;
  color: var(--heroSubtitleInk);
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
  line-height: 1.75;
  letter-spacing: 0.1em;
  max-width: 46rem;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Hero CTA：与背景协调的淡紫（无强烈对比） */
.btn-hero-lilac{
  --bs-btn-color: #574a68;
  --bs-btn-bg: rgba(233, 228, 246, 0.88);
  --bs-btn-border-color: rgba(186, 172, 214, 0.42);
  --bs-btn-hover-color: #3f364f;
  --bs-btn-hover-bg: rgba(220, 212, 240, 0.95);
  --bs-btn-hover-border-color: rgba(160, 140, 200, 0.5);
  --bs-btn-focus-shadow-rgb: 160, 140, 200;
  --bs-btn-active-color: #3f364f;
  --bs-btn-active-bg: rgba(208, 198, 232, 0.98);
  --bs-btn-active-border-color: rgba(140, 120, 190, 0.55);
  border-radius: 999px;
  font-weight: 600;
}
.btn-hero-lilac--ghost{
  --bs-btn-bg: rgba(244, 241, 250, 0.55);
  --bs-btn-border-color: rgba(186, 172, 214, 0.38);
  --bs-btn-hover-bg: rgba(233, 228, 246, 0.82);
  --bs-btn-hover-border-color: rgba(160, 140, 200, 0.45);
  --bs-btn-active-bg: rgba(220, 212, 240, 0.9);
}

.section-title{
  font-weight: 720;
  letter-spacing: -0.01em;
}
.section-kicker{
  color: var(--muted);
  margin-top: .25rem;
}

.glass-card{
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadowSm);
}

/* About：右上浮动头像（随视口缩放）+ 宽松阅读间距 */
.about-grid{
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.section-about .section-kicker{
  margin-top: 0.1rem;
}

/* About 卡片：与入场 hero 同形、同色的装饰小花（数量 9，边长比 5∶3∶1；花纹层占卡片宽高各 50% 并居中） */
#about{
  position: relative;
  --about-flower-unit: clamp(9px, 1.85vw, 15px);
  --about-flower-sm: var(--about-flower-unit);
  --about-flower-md: calc(var(--about-flower-unit) * 3);
  --about-flower-lg: calc(var(--about-flower-unit) * 5);
}
.about-flower-sprite{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
.about-card.about-guest-placeholder,
.about-card.about-reveal{
  position: relative;
  overflow: hidden;
}
.about-card-flowers{
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0.5;
}
.about-card-flower{
  position: absolute;
  width: var(--about-flower-sm);
  height: var(--about-flower-sm);
  transform: translate(-50%, -50%) rotate(var(--about-flower-rot, 0deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 5px rgba(31, 41, 55, 0.05));
}
.about-card-flower--md{
  width: var(--about-flower-md);
  height: var(--about-flower-md);
  opacity: 0.88;
}
.about-card-flower--lg{
  width: var(--about-flower-lg);
  height: var(--about-flower-lg);
  opacity: 1;
}
.about-card-flower--sm{
  opacity: 0.78;
}
.about-card-flower__svg{
  display: block;
  width: 100%;
  height: 100%;
}

/* 求职模式：去掉 About 内各信息块的半透明衬底，便于看清卡片底纹小花 */
html[data-view-mode="recruit"] #about .about-reveal.glass-card{
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow: 0 14px 42px rgba(31, 41, 55, 0.08);
}
html[data-view-mode="recruit"] #about .meta-item,
html[data-view-mode="recruit"] #about .meta-item.about-self-eval{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-view-mode="recruit"] #about .meta-label,
html[data-view-mode="recruit"] #about .meta-value,
html[data-view-mode="recruit"] #about .meta-lines{
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 3px rgba(255, 255, 255, 0.78);
}
html[data-view-mode="recruit"] #about .about-name,
html[data-view-mode="recruit"] #about .about-birth,
html[data-view-mode="recruit"] #about .about-self-eval-text{
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 3px rgba(255, 255, 255, 0.72);
}
html[data-view-mode="recruit"] #about .about-portrait-frame{
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 6px 22px rgba(31, 41, 55, 0.07);
}
/* 求职模式：花纹层铺满整张卡片，避免花朵挤在视觉中心（游客卡仍用默认 50% 居中盒） */
html[data-view-mode="recruit"] #about .about-reveal .about-card-flowers{
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.58;
}

/* About 模式切换：上下叠层感 + 渐隐 / 渐显（轻微纵向位移交叉淡化） */
@keyframes aboutCrossGuestOut{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to{
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
  }
}
@keyframes aboutCrossRecruitIn{
  from{
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes aboutCrossRecruitOut{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to{
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
  }
}
@keyframes aboutCrossGuestIn{
  from{
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.about-flip-stage--to-recruit .about-flip-face--guest{
  z-index: 3;
  animation: aboutCrossGuestOut 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.about-flip-stage--to-recruit .about-flip-face--recruit{
  z-index: 2;
  opacity: 0;
  animation: aboutCrossRecruitIn 0.52s cubic-bezier(0.33, 1, 0.34, 1) 0.06s forwards;
}
.about-flip-stage--to-guest .about-flip-face--recruit{
  z-index: 3;
  animation: aboutCrossRecruitOut 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.about-flip-stage--to-guest .about-flip-face--guest{
  z-index: 2;
  opacity: 0;
  animation: aboutCrossGuestIn 0.52s cubic-bezier(0.33, 1, 0.34, 1) 0.06s forwards;
}

.about-card{
  border-radius: var(--radius);
  box-shadow: var(--shadowSm);
}

/* 小屏：flow-root + 头像 float:right，正文块在左侧及下方环绕，避免头像独占一行 */
.about-card-inner{
  position: relative;
  z-index: 1;
  display: flow-root;
  padding: clamp(1.15rem, 2.8vw, 1.9rem) clamp(1.1rem, 3vw, 2.05rem) clamp(1.2rem, 2.9vw, 1.95rem);
}

.about-aside-top-right{
  float: right;
  clear: right;
  width: clamp(92px, 30vw, 178px);
  max-width: min(44%, 178px);
  margin: 0 0 clamp(0.45rem, 1.5vw, 0.65rem) clamp(0.65rem, 2vw, 0.95rem);
  text-align: center;
}

.about-main-cols{
  display: block;
  min-width: 0;
}

.about-col--mid{
  margin-top: 0.65rem;
}

@media (min-width: 640px){
  .about-card-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(84px, 22vw, 200px);
    grid-template-rows: auto;
    column-gap: clamp(1rem, 2.6vw, 1.55rem);
    row-gap: 0;
    align-items: start;
  }
  .about-aside-top-right{
    float: none;
    clear: none;
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: none;
  }
  .about-main-cols{
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.75rem, 2vw, 1rem) clamp(0.9rem, 2.5vw, 1.45rem);
  }
  .about-col--mid{
    margin-top: 0;
  }
}

.about-col{
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.5vw, 0.72rem);
  min-width: 0;
}

.about-portrait-frame{
  margin: 0;
  padding: 0;
  line-height: 0;
  border-radius: calc(var(--radiusSm) + 2px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 22px rgba(31, 41, 55, 0.07);
}

.about-portrait{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 52% 48%;
}

.about-identity{
  margin-top: clamp(0.45rem, 1.5vw, 0.65rem);
  padding: 0 0.2rem;
}

.about-name{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 720;
  font-size: clamp(0.88rem, 1.9vw, 0.98rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.about-name-bar{
  display: inline-block;
  width: clamp(1.5rem, 4vw, 1.85rem);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e8d00a, #f5e82a);
  flex-shrink: 0;
}

.about-birth{
  margin-top: 0.28rem;
  font-size: clamp(0.78rem, 1.6vw, 0.86rem);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.04em;
}

#about .meta-item{
  padding: clamp(0.65rem, 1.8vw, 0.88rem) clamp(0.72rem, 2vw, 0.95rem);
  border-radius: var(--radiusSm);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.88);
}

#about .meta-label{
  color: var(--muted);
  font-size: clamp(0.78rem, 1.5vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: clamp(0.22rem, 0.8vw, 0.34rem);
}

#about .meta-value{
  font-weight: 650;
  line-height: 1.52;
  font-size: clamp(0.88rem, 1.7vw, 0.95rem);
}

#about .meta-lines{
  font-weight: 650;
  line-height: 1.55;
  font-size: clamp(0.88rem, 1.7vw, 0.95rem);
}

#about .meta-lines li + li{
  margin-top: 0.16rem;
}

.about-self-eval{
  background: rgba(255, 255, 255, 0.62);
}

.about-self-eval-text{
  color: var(--muted);
  font-weight: 500;
  line-height: 1.62;
  font-size: clamp(0.86rem, 1.65vw, 0.93rem);
}

/* 其它区域仍可用两列 meta-list（若页面复用） */
.meta-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 768px){
  .meta-list{
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
  }
}
.meta-item{
  padding: 1rem 1.1rem;
  border-radius: var(--radiusSm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.72);
}
@media (min-width: 768px){
  .meta-item--full{
    grid-column: 1 / -1;
  }
  .meta-item--contact{
    grid-column: 1 / -1;
  }
}
.meta-label{
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
.meta-value{
  font-weight: 650;
  line-height: 1.5;
}
.meta-lines{
  font-weight: 650;
  line-height: 1.55;
}
.meta-lines li + li{
  margin-top: 0.2rem;
}

.category-card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--shadowSm);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (max-width: 767.98px){
  .category-card:hover{
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 14px 36px rgba(31, 41, 55, 0.11);
    border-color: rgba(47, 111, 237, 0.18);
  }
}

/* 最小屏：7 张卡片交错瀑布流两列 */
@media (max-width: 767.98px){
  #categories{
    column-count: 2;
    column-gap: clamp(0.5rem, 2.5vw, 0.75rem);
  }
  #categories > *:first-child{
    column-span: all;
  }
  #categories .category-mosaic{
    display: contents !important;
  }
  #categories .category-mosaic > .category-mosaic-cell{
    display: inline-block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 clamp(0.5rem, 2.5vw, 0.75rem);
    break-inside: avoid;
  }
  #categories .category-mosaic .category-body{
    padding: 0.5rem 0.55rem 0.55rem;
  }
  #categories .category-mosaic .category-title{
    font-size: clamp(0.72rem, 2.8vw, 0.88rem);
    line-height: 1.3;
  }
  #categories .category-mosaic .category-title__en{
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
  }
  #categories .category-mosaic .category-desc{
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
    margin-top: 0.15rem;
  }
}

.category-cover{
  aspect-ratio: 16/10;
  /* 与全站同色系、单层柔和过渡，避免多块卡片「同一图案拼贴」感 */
  background:linear-gradient(
    148deg,
    rgba(255,255,255,.88) 0%,
    rgba(233,236,252,.55) 38%,
    rgba(236,252,240,.45) 72%,
    rgba(255,250,235,.62) 100%
  );
}
.category-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* 保留底层渐变，lazy 解码前仍有色块而非死白 */
.category-cover:has(img){
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(233, 236, 252, 0.55) 38%,
    rgba(236, 252, 240, 0.45) 72%,
    rgba(255, 250, 235, 0.62) 100%
  );
}
.category-body{
  padding: 1rem 1rem 1.05rem;
}
.category-title{
  font-weight: 720;
  margin: 0;
}
.category-desc{
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}
.category-overlay{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .22s ease;
  background: linear-gradient(180deg, transparent 40%, rgba(31,41,55,.10) 100%);
  pointer-events:none;
}
.category-card:hover .category-overlay{ opacity:1; }

/* 首页第二行分类（4 列）：封面略高于首行 16:10，约 +5% 高度 */
#categories .category-mosaic--4 .category-cover{
  aspect-ratio: 16 / 10.5;
}
/* 海报封面：梅花主体居中略偏上，底部黑字裁在画幅外 */
#categories .category-mosaic--4 .category-cover--poster-home img{
  object-position: center 40%;
}
@media (min-width: 768px){
  #categories .category-mosaic--4 .category-cover--poster-home img{
    object-position: center 38%;
  }
}
/* 标志设计封面：完整显示 Logo，不裁切（留白由底层渐变填充） */
#categories .category-mosaic--4 .category-cover--logo-home img{
  object-fit: contain;
  object-position: center center;
  padding: clamp(0.25rem, 1.2vw, 0.55rem);
  box-sizing: border-box;
}
/* AI 辅助设计封面：铺满卡片；略偏上对齐，避免顶部帽子被裁 */
#categories .category-mosaic--4 .category-cover--ai-home img{
  object-fit: cover;
  object-position: center 28%;
  padding: 0;
}
@media (min-width: 768px){
  #categories .category-mosaic--4 .category-cover--ai-home img{
    object-position: center 39%;
  }
}
#categories .category-mosaic--4 .category-cover--brand-dual-ip{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.75vw, 0.32rem);
  padding: 0.35rem clamp(0.2rem, 1.2vw, 0.45rem);
  box-sizing: border-box;
  /* 淡绿底，与全站分类卡蓝绿暖色渐变协调 */
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(236, 252, 244, 0.62) 32%,
    rgba(220, 242, 230, 0.5) 58%,
    rgba(233, 242, 252, 0.42) 100%
  );
}
/* 两 IP 同高、水平居中，避免一高一低 */
#categories .category-mosaic--4 .category-cover--brand-dual-ip .category-cover__split-img{
  flex: 0 1 48%;
  width: auto;
  min-width: 0;
  max-width: 48%;
  height: 76%;
  max-height: 76%;
  object-fit: contain;
  object-position: center center;
  align-self: center;
}
#categories .category-mosaic--4 .category-cover--brand-dual-ip:has(.category-cover__split-img){
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(236, 252, 244, 0.62) 32%,
    rgba(220, 242, 230, 0.5) 58%,
    rgba(233, 242, 252, 0.42) 100%
  );
}

/* 作品分类：英文副标题与说明区同色（muted） */
#categories .category-mosaic--3 .category-title__en,
#categories .category-mosaic--4 .category-title__en{
  font-weight: 620;
  font-size: 0.84em;
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* 第一行：中文与英文同一行 */
#categories .category-mosaic--3 .category-title{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.3;
}
/* 第二行：中文一行、英文一行 */
#categories .category-mosaic--4 .category-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.3;
}
#categories .category-mosaic--4 .category-title__zh,
#categories .category-mosaic--4 .category-title__en{
  display: block;
}

/* 首页作品分类：≥md 时同行内悬停卡片放大，其余收窄并略缩小，突出当前项 */
#categories .category-mosaic-cell > a{
  display: block;
  height: 100%;
}
@media (min-width: 768px){
  #categories .category-mosaic .category-overlay{
    transition: opacity 0.5s ease;
  }
  #categories .category-mosaic{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  #categories .category-mosaic > .category-mosaic-cell{
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    width: auto;
    transition:
      flex-grow 0.58s cubic-bezier(0.33, 1, 0.32, 1),
      flex-shrink 0.58s cubic-bezier(0.33, 1, 0.32, 1);
  }
  #categories .category-mosaic--3 > .category-mosaic-cell.col-md-4,
  #categories .category-mosaic--4 > .category-mosaic-cell.col-md-3{
    flex-basis: 0;
  }
  #categories .category-mosaic--3:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover),
  #categories .category-mosaic--4:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover){
    flex-grow: 0.78;
    flex-shrink: 1.06;
  }
  #categories .category-mosaic--3 > .category-mosaic-cell:hover,
  #categories .category-mosaic--4 > .category-mosaic-cell:hover{
    flex-grow: 1.22;
    flex-shrink: 0.94;
    z-index: 2;
    position: relative;
  }
  /* 第二排：以底边为轴缩放，悬停时向上放大、底部不位移 */
  #categories .category-mosaic--4 .category-card{
    transform-origin: center bottom;
  }
  #categories .category-mosaic .category-card{
    transition:
      transform 0.58s cubic-bezier(0.33, 1, 0.32, 1),
      box-shadow 0.58s cubic-bezier(0.33, 1, 0.32, 1),
      border-color 0.45s ease;
  }
  #categories .category-mosaic--3:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-card,
  #categories .category-mosaic--4:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-card{
    transform: scale(0.985);
    box-shadow: var(--shadowSm);
    border-color: rgba(255, 255, 255, 0.58);
  }
  #categories .category-mosaic--3 > .category-mosaic-cell:hover .category-card,
  #categories .category-mosaic--4 > .category-mosaic-cell:hover .category-card{
    transform: scale(1.028);
    box-shadow: 0 14px 38px rgba(31, 41, 55, 0.1);
    border-color: rgba(47, 111, 237, 0.16);
  }
  #categories .category-mosaic--3:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-overlay,
  #categories .category-mosaic--4:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-overlay{
    opacity: 0;
  }
  /* 悬停第二排时：第一排以底边为轴略缩小，与第二排向上放大衔接 */
  #categories:has(.category-mosaic--4 .category-mosaic-cell:hover) .category-mosaic--3 .category-card{
    transform: scale(0.985);
    transform-origin: center bottom;
    box-shadow: var(--shadowSm);
    border-color: rgba(255, 255, 255, 0.58);
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce){
  #categories .category-mosaic > .category-mosaic-cell{
    transition: none;
  }
  #categories .category-mosaic .category-card{
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  #categories .category-mosaic--3:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover),
  #categories .category-mosaic--4:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover){
    flex-grow: 1;
    flex-shrink: 1;
  }
  #categories .category-mosaic--3 > .category-mosaic-cell:hover,
  #categories .category-mosaic--4 > .category-mosaic-cell:hover{
    flex-grow: 1;
    flex-shrink: 1;
  }
  #categories .category-mosaic--3:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-card,
  #categories .category-mosaic--4:has(.category-mosaic-cell:hover) > .category-mosaic-cell:not(:hover) .category-card,
  #categories .category-mosaic--3 > .category-mosaic-cell:hover .category-card,
  #categories .category-mosaic--4 > .category-mosaic-cell:hover .category-card,
  #categories:has(.category-mosaic--4 .category-mosaic-cell:hover) .category-mosaic--3 .category-card{
    transform: none;
  }
}

/* Gallery placeholders */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem;
}
@media (min-width: 768px){
  .gallery-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.gallery-item{
  border-radius: var(--radiusSm);
  overflow:hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--shadowSm);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-item:hover{
  transform: scale(1.015);
  box-shadow: 0 18px 40px rgba(31,41,55,.14);
}
.gallery-thumb{
  aspect-ratio: 4/3;
  background:linear-gradient(
    152deg,
    rgba(255,255,255,.82) 0%,
    rgba(238,242,255,.5) 45%,
    rgba(240,252,244,.48) 100%
  );
}
.gallery-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering: auto;
  image-rendering: high-quality;
}
.gallery-thumb:has(img){
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(238, 242, 255, 0.5) 45%,
    rgba(240, 252, 244, 0.48) 100%
  );
}
.gallery-caption{
  padding: .75rem .8rem;
  font-size: .95rem;
  color: var(--muted);
}

/* 绘本页：去掉缩略卡片框，整图按比例完整展示（仍可点击放大） */
.picturebook-page .gallery-item{
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.picturebook-page .gallery-item:hover{
  transform: none;
  box-shadow: none;
}
.picturebook-page .gallery-thumb{
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border-radius: var(--radiusSm);
  overflow: hidden;
}
.picturebook-page .gallery-thumb:has(img){
  background: transparent;
}
.picturebook-page .gallery-thumb img{
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.picturebook-page .gallery-caption{
  padding: 0.55rem 0 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.picturebook-page .gallery-thumb:not(:has(img)){
  aspect-ratio: 4 / 3;
  min-height: 7.5rem;
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(238, 242, 255, 0.5) 45%,
    rgba(240, 252, 244, 0.48) 100%
  );
  border: 1px dashed rgba(15, 23, 42, 0.12);
}

/* 绘本页 · 周边衍生：半列满宽 + 4:3，画幅略大于实体书区（三列 contain） */
.picturebook-page .picturebook-merch .gallery-thumb{
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  position: relative;
  overflow: hidden;
}
.picturebook-page .picturebook-merch .gallery-caption{
  padding: 0.5rem 0 0;
}
.picturebook-page .picturebook-merch .gallery-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Masonry via columns (photography) */
.masonry{
  column-count: 2;
  column-gap: .9rem;
}
@media (min-width: 768px){
  .masonry{ column-count: 3; }
}
@media (min-width: 1200px){
  .masonry{ column-count: 4; }
}
.masonry > .masonry-item{
  break-inside: avoid;
  margin: 0 0 .9rem;
}
.masonry .gallery-thumb{ aspect-ratio: auto; height: 220px; }
@media (min-width: 768px){
  .masonry .gallery-thumb{ height: 240px; }
}
@media (min-width: 1200px){
  .masonry .gallery-thumb{ height: 260px; }
}

/* 摄影页：列宽内按原图比例缩放，完整显示不裁剪 */
.masonry.masonry--native-ratio .gallery-thumb{
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
}
.masonry.masonry--native-ratio .gallery-thumb img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 摄影页：按列宽自动分列（避免固定 4 列时单张竖图撑高整列留白），错落纵向间距 */
.masonry.masonry--photo-flow{
  column-count: auto;
  column-width: clamp(220px, 30vw, 300px);
  column-gap: clamp(0.7rem, 2.4vw, 1.35rem);
  column-fill: balance;
}
.masonry.masonry--photo-flow > .masonry-item{
  margin-bottom: clamp(0.55rem, 1.6vw, 0.95rem);
}
.masonry.masonry--photo-flow > .masonry-item:nth-child(5n + 1){
  margin-bottom: clamp(0.85rem, 2.2vw, 1.4rem);
}
.masonry.masonry--photo-flow > .masonry-item:nth-child(5n + 2){
  margin-bottom: clamp(0.5rem, 1.3vw, 0.8rem);
}
.masonry.masonry--photo-flow > .masonry-item:nth-child(5n + 4){
  margin-bottom: clamp(1rem, 2.6vw, 1.5rem);
}
.masonry.masonry--photo-flow .gallery-item:has(.gallery-thumb:only-child){
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.09);
}
.masonry.masonry--photo-flow .gallery-item:has(.gallery-thumb:only-child):hover{
  box-shadow: 0 16px 38px rgba(31, 41, 55, 0.13);
}
@supports (grid-template-rows: masonry){
  .masonry.masonry--photo-flow{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    grid-template-rows: masonry;
    gap: clamp(0.65rem, 2vw, 1.2rem);
    column-count: unset;
    column-width: unset;
    column-gap: unset;
  }
  .masonry.masonry--photo-flow > .masonry-item{
    margin-bottom: 0;
    break-inside: auto;
  }
}

/* 仅首页：恢复滚动前隐藏正文，避免先显示顶部再瞬间下跳（与 index.html 内联脚本配合） */
html.portfolio-scroll-restore-pending,
html.portfolio-scroll-restore-pending * {
  scroll-behavior: auto !important;
}
html.portfolio-scroll-restore-pending body {
  opacity: 0;
  transition: none !important;
}

.page-header{
  padding: 5.25rem 0 1.25rem;
}
.breadcrumb-lite{
  color: var(--muted);
  font-size: .95rem;
}
.footer{
  color: var(--muted);
  padding: 2.5rem 0 3.5rem;
}

.footer .btn-link.link-secondary:focus{
  box-shadow: none;
}

/* 社交平台弹窗：小屏全屏更省边距；略收紧竖向留白 */
@media (max-width: 575.98px){
  #socialModal .modal-body{
    padding-left: clamp(0.65rem, 3vw, 1rem);
    padding-right: clamp(0.65rem, 3vw, 1rem);
  }
}

.social-qr-cell{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: calc(var(--radiusSm) + 2px);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.social-qr-cell:hover{
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.1);
}
.social-qr-cell:focus-visible{
  outline: 2px solid rgba(47, 111, 237, 0.45);
  outline-offset: 3px;
}
.social-qr-cell .social-qr-img{
  pointer-events: none;
}

.social-qr-img{
  aspect-ratio: 1;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.94);
  vertical-align: middle;
}

/* 大图预览：完整画幅 contain（与 16:9 cover 区分）；弹窗宽度见 #zoomModal .modal-xl */
.zoom-modal-frame--contain{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1rem);
  /*
   * 透明 PNG 的「黑底」常见原因：衬底过透 + 弹窗背后深色 backdrop 叠上来，透明区域合成后发灰发黑。
   * 使用不透明白系衬底，保证 alpha 通道背后是浅色而非 modal-backdrop。
   */
  background: #fbfbff;
}
.zoom-modal-frame--contain img{
  max-width: min(100%, calc(100vw - 2.5rem));
  max-height: min(88vh, calc(100dvh - 120px));
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  /* 图片像素若带透明，再垫一层白，避免画布/视口未着色时的杂色 */
  background-color: #fff;
}

#zoomModal .modal-dialog.modal-xl{
  max-width: min(98vw, 1400px);
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* 作品预览：无淡入、无尺寸过渡，避免打开瞬间「等一等」或框体跳变 */
#zoomModal.modal{
  transition: none !important;
}
#zoomModal.modal .modal-dialog,
#zoomModal.modal .modal-content{
  transition: none !important;
}
/* 预览弹窗内容区略加不透明度，减轻背后深色 backdrop 透过毛玻璃让透明 PNG 发灰、发黑 */
#zoomModal .modal-content.glass-card{
  background: rgba(255, 255, 255, 0.97);
}

/* 预览弹窗内：滚轮缩放 / 双指捏合 / 拖拽平移 */
[data-zoom-viewport]{
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  /* contain 预览：与 .zoom-modal-frame--contain 同色，避免透明区透出未定义底色 */
  background-color: #fbfbff;
}
[data-zoom-viewport].is-zoomed{
  cursor: grab;
}
[data-zoom-viewport].is-zoomed:active{
  cursor: grabbing;
}
[data-zoom-canvas]{
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.ratio > [data-zoom-viewport]{
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
.ratio [data-zoom-canvas]{
  width: 100%;
  height: 100%;
}
.zoom-modal-frame--contain > [data-zoom-viewport]{
  width: 100%;
  align-self: stretch;
  min-height: 0;
  max-height: min(92vh, calc(100dvh - 100px));
  box-sizing: border-box;
}
.zoom-modal-frame--contain [data-zoom-canvas]{
  display: inline-block;
  line-height: 0;
  background-color: #fff;
}

/* 预览弹窗：原图直链，由浏览器默认缩放即可（避免非标准 image-rendering 在各引擎表现不一） */
#zoomModal [data-zoom-image]{
  image-rendering: auto;
}

/* 左右箭头与图画并排，不叠在画面上；DOM 顺序为 prev、next、frame，用 order 排成 prev | 图 | next */
.zoom-modal-view{
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.35rem, 1.8vw, 0.75rem);
}
.zoom-modal-nav--prev{
  order: 1;
}
.zoom-modal-nav--next{
  order: 3;
}
.zoom-modal-view > div{
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
/* 毛玻璃衬底 + 花色箭头；悬停略放大 */
.zoom-modal-nav{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.38rem 0.32rem;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radiusSm);
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadowSm), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: var(--flower-petal-blue);
  cursor: pointer;
  transform: scale(1);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
    color 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.zoom-modal-nav--next{
  color: var(--flower-petal-green);
  border-color: color-mix(in srgb, var(--flower-petal-green) 22%, rgba(255, 255, 255, 0.75));
}
.zoom-modal-nav--prev{
  border-color: color-mix(in srgb, var(--flower-petal-blue) 22%, rgba(255, 255, 255, 0.75));
}
.zoom-modal-nav__icon{
  display: block;
  width: clamp(1.55rem, 4.6vw, 2.35rem);
  height: auto;
  aspect-ratio: 40 / 72;
}
.zoom-modal-nav:hover{
  color: var(--flower-petal-yellow);
  background: rgba(255, 255, 255, 0.52);
  border-color: color-mix(in srgb, var(--flower-petal-yellow) 35%, rgba(255, 255, 255, 0.8));
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transform: scale(1.14);
}
.zoom-modal-nav:active{
  transform: scale(1.06);
}
.zoom-modal-nav:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--flower-petal-blue) 55%, transparent);
  outline-offset: 3px;
}
.zoom-modal-nav--next:focus-visible{
  outline-color: color-mix(in srgb, var(--flower-petal-green) 55%, transparent);
}
@media (max-width: 575.98px){
  .zoom-modal-view{
    gap: 0.28rem;
  }
  .zoom-modal-nav{
    padding: 0.3rem 0.22rem;
    border-radius: calc(var(--radiusSm) - 2px);
  }
  .zoom-modal-nav__icon{
    width: clamp(1.35rem, 5.2vw, 2rem);
  }
  .zoom-modal-nav:hover{
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce){
  .zoom-modal-nav{
    transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .zoom-modal-nav:hover,
  .zoom-modal-nav:active{
    transform: none;
  }
}

/* —— 品牌设计页 brand.html —— */
.brand-inline-zoom{
  display: block;
  width: 100%;
  cursor: zoom-in;
  line-height: 0;
  border: none;
  /* 透明 PNG：与页面毛玻璃底合成时若背后偏暗会显脏；浅色衬底 + 内边距形成留白 */
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radiusSm);
  padding: clamp(0.65rem, 1.8vw, 1.1rem);
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.brand-inline-zoom:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--flower-petal-blue) 45%, transparent);
  outline-offset: 3px;
}
/* 物料缩略：覆盖默认大内边距，否则同类图之间会像被大块留白隔开 */
.brand-mat-tile__zoom.brand-inline-zoom{
  padding: 0.1rem 0.12rem;
  background: rgba(255, 255, 255, 0.9);
}
/* IP 立绘等透明 PNG：不铺白底，直接叠在卡片底色上 */
.brand-inline-zoom--transparent{
  background: transparent;
  padding: clamp(0.25rem, 0.8vw, 0.5rem);
}
.brand-figure-caption{
  text-align: center;
  max-width: 100%;
}
.brand-figure__img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
}
.brand-intro-visual-wrap{
  max-width: min(100%, 480px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px){
  .brand-intro-visual-wrap{
    margin-left: auto;
    margin-right: 0;
    max-width: min(100%, 460px);
  }
}
/* 略放大主视觉：定高画框 + cover 轻微裁边，主体居中；点击预览仍为完整 contain */
.brand-intro-visual-wrap .brand-inline-zoom{
  width: 100%;
  height: clamp(220px, min(36vw, 40vh), 336px);
  max-height: min(42vh, 360px);
  overflow: hidden;
  margin-inline: auto;
  padding: clamp(0.28rem, 0.85vw, 0.5rem);
  box-sizing: border-box;
}
.brand-intro-visual-wrap .brand-figure__img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  margin: 0;
}
.brand-logo-extend-stack .brand-inline-zoom{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin-inline: auto;
  max-width: min(100%, 232px);
}
@media (min-width: 768px){
  .brand-logo-extend-stack .brand-inline-zoom{
    max-width: min(100%, 264px);
  }
}
.brand-logo-extend-stack .brand-inline-zoom .brand-figure__img{
  width: auto;
  max-width: 100%;
  max-height: min(18vh, 164px);
  height: auto;
}
@media (min-width: 768px){
  .brand-logo-extend-stack .brand-inline-zoom .brand-figure__img{
    max-height: min(19.5vh, 180px);
  }
}
/* LOGO 延展：上排略小、下排略大（默认尺寸见上） */
.brand-logo-extend-stack .brand-logo-extend-row--upper .brand-inline-zoom{
  max-width: min(100%, 208px);
}
.brand-logo-extend-stack .brand-logo-extend-row--upper .brand-inline-zoom .brand-figure__img{
  max-height: min(16.2vh, 148px);
}
@media (min-width: 768px){
  .brand-logo-extend-stack .brand-logo-extend-row--upper .brand-inline-zoom{
    max-width: min(100%, 238px);
  }
  .brand-logo-extend-stack .brand-logo-extend-row--upper .brand-inline-zoom .brand-figure__img{
    max-height: min(17.5vh, 162px);
  }
}
.brand-logo-extend-stack .brand-logo-extend-row--lower .brand-inline-zoom{
  max-width: min(100%, 252px);
}
.brand-logo-extend-stack .brand-logo-extend-row--lower .brand-inline-zoom .brand-figure__img{
  max-height: min(20.5vh, 176px);
}
@media (min-width: 768px){
  .brand-logo-extend-stack .brand-logo-extend-row--lower .brand-inline-zoom{
    max-width: min(100%, 288px);
  }
  .brand-logo-extend-stack .brand-logo-extend-row--lower .brand-inline-zoom .brand-figure__img{
    max-height: min(22.2vh, 196px);
  }
}
.brand-ip-hero-wrap{
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px){
  .brand-ip-hero-wrap{
    max-width: min(100%, 198px);
  }
}
.brand-ip-hero-wrap .brand-figure__img{
  width: auto;
  max-width: 100%;
  max-height: min(30vh, 228px);
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.brand-ip-views-wrap{
  width: 100%;
  max-width: min(100%, 720px);
  margin-left: auto;
  margin-right: auto;
}
.brand-ip-views-wrap .brand-inline-zoom{
  max-height: none;
}
.brand-ip-views-wrap .brand-figure__img{
  width: auto;
  max-width: 100%;
  max-height: min(38vh, 292px);
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.brand-ip-views-wrap .brand-figure-caption{
  display: block;
}
/* IP 双栏：半宽内三视图略压缩高度，避免单卡过长 */
.brand-ip-dual-row .brand-ip-views-wrap{
  max-width: 100%;
}
/* 三视图单独一行双栏：左右顶对齐，统一画幅高度，避免盏言 / 盏熠视觉高低差 */
.brand-ip-views-dual-row .brand-ip-views-wrap--dual .brand-inline-zoom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-ip-views-dual-row .brand-ip-views-wrap--dual .brand-figure__img{
  max-height: min(29vh, 200px);
  width: auto;
  max-width: 100%;
}
/* 物料设计：每行最多四格；双栏同排；贴齐卡片内边距，左右与版心由 container + glass-card 保证 */
.brand-material-board{
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  padding-inline: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
.brand-material-band{
  margin-bottom: clamp(1.65rem, 3.2vw, 2.35rem);
}
.brand-material-band:last-child{
  margin-bottom: 0;
}
.brand-material-band--split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.05rem;
}
@media (min-width: 992px){
  .brand-material-band--split{
    gap: 1.05rem clamp(1rem, 2.8vw, 2.25rem);
  }
}
@media (min-width: 1400px){
  .brand-material-band--split{
    gap: 1.1rem clamp(1.1rem, 3vw, 2.5rem);
  }
}
@media (max-width: 767.98px){
  .brand-material-band--split{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.brand-material-band--lone-pair{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.brand-material-band--lone-pair .brand-material-cluster{
  flex: 0 1 auto;
  width: 100%;
  max-width: min(100%, 460px);
}
/* 便签下：工牌 / 名片 / 手环竖向成组；组间行距与参考展板相近，略小于条带间距 */
.brand-material-band--print-pack{
  display: flex;
  flex-direction: column;
  gap: clamp(1.05rem, 2.4vw, 1.85rem);
}
/* 物料区末尾：海报、签到处各占一整行 */
.brand-material-band--tail-row .brand-material-cluster--block{
  width: 100%;
}
.brand-material-cluster{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* 品类名在图组正下方居中（DOM 中标签在上方时用 order 调整） */
.brand-material-cluster > [class*="brand-material-cluster__grid"]{
  order: 1;
  width: 100%;
}
.brand-material-cat{
  order: 2;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.55rem;
  margin-bottom: 0;
  line-height: 1.35;
  text-align: center;
  align-self: center;
  width: 100%;
}
.brand-material-cluster__grid--2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.18rem;
  box-sizing: border-box;
  padding-inline: 0;
  justify-items: stretch;
  align-items: center;
}
.brand-material-cluster__grid--4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem;
  box-sizing: border-box;
  padding-inline: 0;
  justify-items: stretch;
  align-items: center;
}
@media (min-width: 992px){
  .brand-material-cluster__grid--2{
    gap: 0.14rem;
  }
  .brand-material-cluster__grid--4{
    gap: 0.12rem 0.16rem;
  }
}
@media (min-width: 1400px){
  .brand-material-cluster__grid--2{
    gap: 0.12rem;
  }
  .brand-material-cluster__grid--4{
    gap: 0.1rem 0.14rem;
  }
}
@media (max-width: 767.98px){
  .brand-material-cluster__grid--4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
  }
}
.brand-mat-tile{
  min-width: 0;
}
.brand-mat-tile__zoom{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  margin: 0;
}
.brand-mat-tile__img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  /* 避免滚动/合成层重绘时偶发闪隐（尤其曾配合懒加载与区块入场动画时） */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* 体量：除海报、签到处外同一视觉阶（略分名片/扁券/盒袋），二者单独放大一档 */
.brand-mat-tile__img--card{
  max-height: 78px;
}
@media (min-width: 576px){
  .brand-mat-tile__img--card{
    max-height: 86px;
  }
}
.brand-mat-tile__img--sm{
  max-height: min(26vh, 152px);
}
@media (min-width: 576px){
  .brand-mat-tile__img--sm{
    max-height: min(27vh, 164px);
  }
}
@media (min-width: 992px){
  .brand-mat-tile__img--sm{
    max-height: min(28vh, 172px);
  }
}
.brand-mat-tile__img--ticket{
  max-height: min(14.5vh, 102px);
}
@media (min-width: 992px){
  .brand-mat-tile__img--ticket{
    max-height: min(15.5vh, 112px);
  }
}
.brand-mat-tile__img--box{
  max-height: min(28vh, 176px);
}
@media (min-width: 992px){
  .brand-mat-tile__img--box{
    max-height: min(29vh, 188px);
  }
}
.brand-mat-tile__img--tote{
  max-height: min(30vh, 188px);
}
@media (min-width: 992px){
  .brand-mat-tile__img--tote{
    max-height: min(31vh, 200px);
  }
}
.brand-mat-tile__img--poster{
  max-height: min(58vh, 420px);
}
@media (min-width: 992px){
  .brand-mat-tile__img--poster{
    max-height: min(60vh, 448px);
  }
}
.brand-mat-tile__img--regdesk{
  max-height: min(36vh, 248px);
}
@media (min-width: 992px){
  .brand-mat-tile__img--regdesk{
    max-height: min(38vh, 272px);
  }
}
/* 品牌标准色：内联 background + 固定块尺寸；纵向对齐避免 flex-end 导致排版错乱 */
.brand-intro-palette-wrap{
  max-width: 100%;
}
/* 品牌介绍卡：主视觉+正文行略上移，不改动卡片 padding */
.brand-page .brand-intro-card .brand-intro-body-row{
  margin-top: 0.15rem;
}
@media (min-width: 992px){
  .brand-page .brand-intro-card .brand-intro-body-row{
    margin-top: 0.35rem;
  }
}
/* 「品牌标准色」：标题上移（勿与 Bootstrap mb-0 同用，会抵消下边距） */
.brand-page .brand-intro-palette-wrap .brand-palette__title--intro-block{
  margin-top: -0.55rem;
  margin-bottom: 1.4rem;
  line-height: 1.5;
}
@media (min-width: 768px){
  .brand-page .brand-intro-palette-wrap .brand-palette__title--intro-block{
    margin-top: -0.65rem;
    margin-bottom: 1.6rem;
  }
}
/* 介绍卡内色条与标题之间再留一档（与 title margin-bottom 叠加） */
.brand-page .brand-intro-palette-wrap .brand-palette--below{
  margin-top: 0.15rem;
}
.brand-palette__title{
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: left;
}
.brand-palette--below{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.45rem 0.75rem;
  max-width: 100%;
}
@media (min-width: 1200px){
  .brand-palette--below{
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.45rem 0.85rem;
  }
}
/* 最小屏：五色 2+2+1 三行，各行在区域内居中，末行单色整行居中 */
@media (max-width: 767.98px){
  .brand-page .brand-intro-palette-wrap .brand-palette--below{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    column-gap: clamp(0.65rem, 3.5vw, 1.1rem);
    row-gap: 0.5rem;
    max-width: min(19.5rem, 100%);
    margin-inline: auto;
  }
  .brand-page .brand-intro-palette-wrap .brand-palette--below .brand-palette__item:nth-child(5){
    grid-column: 1 / -1;
    justify-self: center;
  }
}
.brand-palette__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.28rem;
  flex: 0 0 auto;
  min-width: 6.25rem;
  max-width: 9.25rem;
}
@media (min-width: 1200px){
  .brand-palette__item{
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}
.brand-palette__chip{
  width: 8.35rem;
  height: 3.2rem;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.brand-palette__chip--tea{
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.brand-palette__hex{
  display: block;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.brand-palette__label{
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.brand-palette__note{
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1200px){
  .brand-palette__note{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
}
.brand-logo-extend-card{
  min-height: 0;
}

/* 品牌页：各玻璃卡统一内边距；顶距与「LOGO 设计」卡一致，左侧略大使文案整体右移且彼此左对齐 */
.brand-page main > section > .glass-card{
  box-sizing: border-box;
  padding: 1rem 1.05rem 1rem 1.5rem;
}
@media (min-width: 768px){
  .brand-page main > section > .glass-card{
    padding: 1.5rem 1.25rem 1.45rem 1.95rem;
  }
}
@media (min-width: 992px){
  .brand-page main > section > .glass-card{
    padding: 1.5rem 1.35rem 1.5rem 2.1rem;
  }
}

/* LOGO 区：副标题下留白收紧，双行图上移；左栏正文与右侧双行图块纵轴居中对齐 */
.brand-page .brand-logo-extend-card > h3.brand-card-kicker{
  margin-bottom: 0.48rem;
}
.brand-logo-extend-stack{
  margin-top: -0.3rem;
}
/* 无副标时，主标题到正文栅格的空隙与品牌介绍区视觉接近 */
.brand-page .brand-logo-extend-card .brand-logo-extend-body-row{
  margin-top: clamp(0.45rem, 1.2vw, 0.75rem);
}
@media (min-width: 992px){
  .brand-page .brand-logo-extend-card .brand-logo-extend-body-row{
    margin-top: clamp(0.55rem, 1.3vw, 0.85rem);
  }
}

/* —— 品牌页 brand.html：卡片区标题 / 小标题与正文间距；LOGO 左栏行高与右侧图块垂直居中 —— */
/* 除页面顶栏大标题外，各卡片区主标题 / 副标题与「品牌介绍」左缘对齐 */
.brand-page .glass-card > h2.h4,
.brand-page .glass-card > h2.brand-page-card-title{
  text-align: left;
  width: 100%;
}
.brand-page .glass-card > h3.brand-card-kicker,
.brand-page .brand-logo-extend-card > h2,
.brand-page .brand-logo-extend-card > h3{
  text-align: left;
  width: 100%;
}
.brand-page .brand-ip-card > h3.h4{
  text-align: left;
  margin-bottom: 0.55rem;
}
/* 物料 / 应用场景：标题略上移，与下方图区间距加大（不改子级 mt 与图） */
.brand-page .glass-card.brand-multi-panel > h2.brand-multi-panel__title{
  margin-top: -0.4rem;
  margin-bottom: 0.65rem;
}
@media (min-width: 768px){
  .brand-page .glass-card.brand-multi-panel > h2.brand-multi-panel__title{
    margin-bottom: 1.15rem;
  }
}
/* 品类名在对应图组正下方水平居中（与 .brand-material-cluster 的 order 配合） */
.brand-page .brand-multi-panel .brand-material-cat{
  text-align: center;
  align-self: center;
  width: 100%;
  letter-spacing: 0.08em;
  margin-top: 0.42rem;
}
.brand-page .brand-page-card-title{
  margin-bottom: 0.35rem;
}
.brand-page .glass-card > h2.brand-page-card-title + .row.brand-ip-dual-row,
.brand-page .glass-card > h2.brand-page-card-title + .brand-ip-card{
  margin-top: 0.75rem;
}
.brand-page .brand-card-kicker{
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.brand-page .brand-logo-extend-card > h2 + .brand-card-kicker,
.brand-page .brand-intro-card > h2 + .brand-card-kicker{
  margin-top: 0.15rem;
}
.brand-page .brand-card-kicker--after-block{
  margin-top: 0.45rem;
  margin-bottom: 1rem;
}
/* 表情包延展标题：相对上方 IP 双栏再下移一点 */
.brand-page .glass-card h3.brand-card-kicker--after-block{
  margin-top: clamp(0.85rem, 2.2vw, 1.35rem);
}
/* 品牌介绍：副标与正文栅格衔接；五色条在图文下方 */
.brand-page .brand-card-kicker--intro{
  margin-bottom: 0.22rem;
  line-height: 1.38;
}
/* 品牌介绍：正文行距与段距再收紧（卡片外边距/ padding 不变） */
.brand-page .brand-intro-copy p{
  line-height: 1.4;
  margin-bottom: 0.18rem;
}
.brand-page .brand-intro-copy p:last-child{
  margin-bottom: 0;
}
/* LOGO 延展：两段拉开、行距略大于品牌介绍（覆盖同区的 .brand-intro-copy） */
.brand-page .brand-logo-extend-card .brand-intro-copy p{
  line-height: 1.62;
  margin-bottom: 1.05rem;
}
.brand-page .brand-logo-extend-card .brand-intro-copy p:last-child{
  margin-bottom: 0;
}
.brand-page .brand-card-lead{
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.62;
}
.brand-ip-card{
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  border-width: 2px;
  border-style: solid;
  box-shadow: none;
}
.brand-ip-card--yan{
  border-color: color-mix(in srgb, var(--flower-petal-green) 50%, rgba(255, 255, 255, 0.85));
}
.brand-ip-card--yan::before,
.brand-ip-card--yi::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
  border-top: 3px solid;
  border-right: 3px solid;
  border-radius: 0 var(--radius) 0 0;
  opacity: 0.85;
}
.brand-ip-card--yan::before{
  border-color: #e8913a;
}
.brand-ip-card--yi{
  border-color: color-mix(in srgb, #e8913a 55%, rgba(255, 255, 255, 0.85));
}
.brand-ip-card--yi::before{
  border-color: var(--flower-petal-green);
}
/* 盏熠介绍：中文换行优化（双栏布局下仍适用） */
.brand-ip-card--yi .brand-ip-facts{
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
.brand-ip-card--yi .brand-ip-facts li{
  text-wrap: pretty;
}
@supports not (text-wrap: pretty){
  .brand-ip-card--yi .brand-ip-facts li{
    text-wrap: wrap;
  }
}
.brand-ip-card--yan::after,
.brand-ip-card--yi::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
  border-bottom: 3px solid;
  border-left: 3px solid;
  border-radius: 0 0 0 var(--radius);
  opacity: 0.85;
}
.brand-ip-card--yan::after{
  border-color: var(--flower-petal-green);
}
.brand-ip-card--yi::after{
  border-color: #e8913a;
}
.brand-ip-pinyin{
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8913a;
  margin-left: 0.35rem;
}
.brand-ip-facts{
  list-style: none;
  padding: 0;
  margin: 0;
}
.brand-ip-facts li{
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}
/* IP 形象卡内列表：与 LOGO 延展正文同档行距与条间距；图片区未改 */
.brand-page .brand-ip-facts li{
  margin-bottom: 1.05rem;
  line-height: 1.62;
}
.brand-page .brand-ip-facts li:last-child{
  margin-bottom: 0;
}
.brand-ip-facts li:last-child{
  margin-bottom: 0;
}
.brand-ip-facts li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
}
.brand-ip-facts--yan li::before{
  background: var(--flower-petal-green);
}
.brand-ip-facts--yi li::before{
  background: #e8913a;
}
.brand-ip-facts strong{
  color: var(--bs-body-color, #212529);
  font-weight: 650;
}
/* 表情包延展：等大方形容器 + contain，顶对齐，视觉大小一致（覆盖 .brand-inline-zoom 默认 padding/圆角） */
.brand-emoji-grid{
  padding-bottom: clamp(0.55rem, 1.8vw, 1.15rem);
}
.brand-emoji-grid > .row{
  align-items: flex-start;
  justify-content: center;
}
.brand-emoji-grid [class*="col-"]{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.brand-emoji-grid .brand-inline-zoom.brand-emoji-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 8.65rem);
  aspect-ratio: 1;
  min-height: 0;
  margin: 0;
  padding: clamp(0.3rem, 1vw, 0.55rem);
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  line-height: 0;
}
@media (min-width: 576px){
  .brand-emoji-grid .brand-inline-zoom.brand-emoji-cell{
    max-width: min(100%, 9.25rem);
  }
}
@media (min-width: 992px){
  .brand-emoji-grid .brand-inline-zoom.brand-emoji-cell{
    max-width: min(100%, 9.85rem);
  }
}
.brand-emoji-grid__img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0;
}
.brand-multi-panel .gallery-thumb{
  aspect-ratio: 4/3;
  height: auto;
  min-height: 0;
}
.brand-multi-panel .gallery-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 品牌页应用场景瀑布流：沿用摄影页原比例 contain，不受上方 cover 规则影响 */
.brand-page .brand-multi-panel .masonry.masonry--native-ratio .gallery-thumb{
  aspect-ratio: auto;
  height: auto;
  min-height: clamp(120px, 28vw, 220px);
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(238, 242, 255, 0.5) 45%,
    rgba(240, 252, 244, 0.48) 100%
  );
}
.brand-page .brand-multi-panel .masonry.masonry--native-ratio .gallery-thumb img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* —— 海报页 poster.html · 星次系列：原比例横排，无缩略卡片框 —— */
.poster-page-star__title-row .section-kicker,
.poster-page-song__title-row .section-kicker{
  margin-top: 0;
  color: var(--bs-heading-color, var(--bs-body-color, #212529));
}
.poster-page-star__lead,
.poster-page-song__lead{
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.65;
}
.poster-star-grid{
  --poster-star-gap: clamp(0.65rem, 2.2vw, 1.15rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--poster-star-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.poster-star-grid__item{
  flex: 1 1 140px;
  max-width: min(200px, 42vw);
  min-width: min(108px, 30vw);
}
@media (min-width: 992px){
  .poster-star-grid__item{
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}
.poster-star-zoom{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radiusSm);
  cursor: zoom-in;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.poster-star-zoom:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--flower-petal-blue) 45%, transparent);
  outline-offset: 3px;
}
.poster-star-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.poster-star-caption{
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* 宋时意蕴：略大于星次区单列（约 ×1.22）；间距单独加宽，不影响星次区 */
.poster-song-grid{
  --poster-song-gap: clamp(0.9rem, 2.75vw, 1.45rem);
  gap: var(--poster-song-gap);
  padding-inline: 0;
  max-width: none;
}
.poster-song-grid .poster-star-grid__item{
  flex: 1 1 155px;
  max-width: min(244px, 48vw);
  min-width: min(120px, 34vw);
}
@media (min-width: 992px){
  .poster-song-grid .poster-star-grid__item{
    flex: 0 0 calc((100% - 4 * var(--poster-star-gap)) / 5 * 1.22);
    max-width: calc((100% - 4 * var(--poster-star-gap)) / 5 * 1.22);
    min-width: 0;
  }
}

/* Logo 设计页：三套方案横排 + 表情包 6 列（lg） */
.logo-page .logo-showcase-grid{
  --logo-showcase-gap: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--logo-showcase-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-page .logo-showcase-grid__item{
  flex: 0 1 auto;
  width: min(248px, 48vw);
  max-width: min(248px, 90vw);
  min-width: 0;
}
@media (min-width: 768px){
  .logo-page .logo-showcase-grid__item{
    width: min(264px, 32vw);
    max-width: min(264px, 34%);
  }
}
@media (min-width: 1200px){
  .logo-page .logo-showcase-grid__item{
    width: min(252px, 24vw);
    max-width: 252px;
  }
}
.logo-page .logo-showcase-grid__item .poster-star-zoom{
  width: 100%;
}
.logo-page .logo-showcase-grid__item .poster-star-img{
  max-height: clamp(10rem, 28vw, 15rem);
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 标志表情包延展：单张合集图 */
.logo-page .logo-board-single{
  max-width: min(72rem, 100%);
  margin-inline: auto;
}
.logo-page .logo-board-single__zoom{
  cursor: zoom-in;
  max-width: 100%;
}
.logo-page .logo-board-single__img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radiusSm, 0.5rem);
  object-fit: contain;
}

/* AI 辅助设计页：展板双列；左右留白大、两图间距小；图幅偏大；灯箱仍可看全图 */
.ai-page .ai-board-grid.row{
  max-width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.75rem, 6vw, 3.5rem);
  --bs-gutter-x: clamp(0.2rem, 0.9vw, 0.45rem);
  --bs-gutter-y: clamp(0.5rem, 1.8vw, 0.85rem);
}
.ai-page .ai-board-grid .ai-board-figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ai-page .ai-board-zoom{
  cursor: zoom-in;
  flex: 1;
  display: block;
  min-height: 0;
}
.ai-page .ai-board-grid .ai-board-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(16rem, 48vw, 38rem);
  margin-inline: auto;
  border-radius: var(--radiusSm, 0.5rem);
  object-fit: contain;
}
@media (min-width: 768px){
  .ai-page .ai-board-grid.row{
    --bs-gutter-x: clamp(0.15rem, 0.75vw, 0.35rem);
  }
  .ai-page .ai-board-grid .ai-board-img{
    max-height: clamp(18rem, 44vw, 34rem);
  }
}
@media (min-width: 1200px){
  .ai-page .ai-board-grid .ai-board-img{
    max-height: clamp(20rem, 38vw, 32rem);
  }
}