/* =========================================================
   Sheridan ONE APP — scc.css  (Hierarchy-first, Sectioned)
   全局中文：Source Han Serif CN
   英文：Cormorant Upright SemiBold（仅 :lang(en)/.en）
   字号仅由 h1~h4, p 控制；组件不单独设字号
   ========================================================= */

/* ---------------- Font Faces ---------------- */
@font-face{
  font-family: "Cormorant Upright";
  src: url("../font/CormorantUpright-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-ExtraLight-3.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-Light-5.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-Regular-1.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-Medium-6.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-SemiBold-7.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-Bold-2.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Source Han Serif CN";
  src: url("../font/SourceHanSerifCN-Heavy-4.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------------- Global Vars ---------------- */
:root{
  --font-cn: "Source Han Serif CN","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-en: "Cormorant Upright", serif;

  --page-bg:#d7e1f1;
  --text-main:#0f172a;
  --text-sub:#1f2937;

  --maxw:1200px;

  /* 统一字号：只按标签层级生效 */
  --fs-h1: clamp(56px, 11vw, 120px);
  --fs-h2: clamp(36px, 8vw, 92px);
  --fs-h3: clamp(22px, 4.5vw, 40px);
  --fs-h4: clamp(16px, 2.6vw, 22px);
  --fs-body: clamp(14px, 2.1vw, 16px);

  /* 统一 header 细线 */
  --rule-color: rgba(15,23,42,.45);
  --rule: 1px solid var(--rule-color);
  --header-pad-bottom: clamp(8px, 1.6vw, 12px);
  --header-gap-bottom: clamp(18px, 3vw, 28px);

  /* 大图高度（容器缩小、图片不缩放） */
  --hero-lg: 640px;
  --hero-md: 480px;
  --hero-sm: 360px;
  --hero-xs: 240px;

  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
}

/* =========================================================
   Reset & Typography
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ display:block; max-width:100%; height:auto; }
ul,ol{ margin:0; padding-left:1.2em; }

body{
  background:var(--page-bg);
  color:var(--text-main);
  font-family: var(--font-cn);
}

h1,h2,h3,h4{
  margin:0 0 .45em;
  color:var(--text-main);
  line-height:1.08;
  letter-spacing:.01em;
  font-weight:700;
  font-family: var(--font-cn);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

p{
  margin:0 0 .9em;
  color:var(--text-sub);
  font-size:var(--fs-body);
  line-height:1.85;
  font-family: var(--font-cn);
}

/* 英文专用（元素或其子树明确标记 :lang(en) 或 .en） */
:lang(en), [lang="en"], .en{
  font-family: var(--font-en), var(--font-cn);
  font-weight:600; /* SemiBold */
  font-feature-settings:"liga","kern";
}

/* 可访问性隐藏 */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* =========================================================
   Header 统一为底部分隔线（长度随容器）
   ========================================================= */
.problem__head::before,
.problem-survey__head::before{ display:none !important; }

.section-problem .problem__head,
.problem-survey__head,
.section-ideate .ideate__head,
.section-idea-map .idea-map__head,
.section-prototype .proto__head,
.section-test .test__head,
.section-impl .impl__head,
.section-reflect .reflect__head{
  border-bottom: var(--rule);
  padding-bottom: var(--header-pad-bottom);
  margin-bottom: var(--header-gap-bottom);
}

/* =========================================================
   Section 01 · 封面
   ========================================================= */
.section-intro{
  margin:100px 0;
  padding: clamp(24px,5vw,48px) clamp(16px,4vw,48px) 0;
}
.intro__container{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,40px); align-items:center;
}
@media (max-width: var(--bp-md)){
  .intro__container{ grid-template-columns:1fr; }
}
.intro__image{
  width:min(520px,100%); filter: drop-shadow(0 8px 22px rgba(0,0,0,.15));
}
@media (max-width:480px){
  .intro__image{ width:78vw; max-width:360px; margin-top:6px; }
}

/* 封面下四列信息 */
.intro-meta{
  max-width:var(--maxw);
  margin: clamp(16px,3vw,28px) auto 0;
  padding: clamp(16px,3vw,24px) 0 clamp(28px,4vw,40px);
  border-top:1px solid rgba(15,23,42,.25);
}
.meta__grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(16px,3vw,28px);
}
@media (max-width:1024px){ .meta__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .meta__grid{ grid-template-columns: 1fr; } }
.meta__list{ list-style:none; padding:0; margin:0; }
.meta__list li{ line-height:1.85; }

/* =========================================================
   Section 02 · 理解问题
   ========================================================= */
.section-problem{ margin: clamp(20px,5vw,56px) auto; padding: 0 clamp(16px,4vw,48px); }
.problem__container{ max-width:var(--maxw); margin:0 auto; }

/* eyebrow 标签不遮线 */
.problem__eyebrow{
  position:absolute; left:0; top:0; transform: translateY(-60%);
  padding:0 .6em; background: var(--page-bg);
}

/* 顶部引言九宫 */
.problem__quotes{
  position:relative; display:grid; grid-template-columns:repeat(12,1fr);
  gap: clamp(8px,1.6vw,14px); margin-top: clamp(18px,4vw,28px);
  min-height: clamp(220px,40vw,420px);
}
.problem-quote{ opacity:0; transform: translateY(6px); transition: opacity .9s, transform .9s; max-width:36ch; }
.problem-quote.is-on{ opacity:1; transform: translateY(0); }
.q--1{ grid-column:2/span 4; } .q--2{ grid-column:6/span 3; } .q--3{ grid-column:10/span 3; }
.q--4{ grid-column:4/span 4; } .q--5{ grid-column:9/span 4; }
.q--6{ grid-column:2/span 5; } .q--7{ grid-column:8/span 4; }
.q--8{ grid-column:9/span 4; } .q--9{ grid-column:5/span 4; }

@media (max-width:640px){
  .problem__quotes{ grid-template-columns:1fr; min-height:auto; }
  .q--1,.q--2,.q--3,.q--4,.q--5,.q--6,.q--7,.q--8,.q--9{ grid-column:auto; }
}

/* 调研卡片 */
.problem-research{
  --right-offset: clamp(16px,2vw,32px);
  max-width: var(--maxw);
  margin: clamp(24px,5vw,48px) auto 0;
  padding: 0 clamp(16px,4vw,48px);
  display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: auto 1fr;
  column-gap: clamp(16px,3vw,28px); row-gap: clamp(12px,2vw,18px);
}
.problem-research > .pr-block{ display:contents; }
.problem-research .pr-grid{ display:contents; }
.problem-research > .pr-block:nth-of-type(1) .pr-heading{ grid-column:1 / span 2; grid-row:1; }
.problem-research > .pr-block:nth-of-type(2) .pr-heading{ grid-column:3; grid-row:1; margin-left:var(--right-offset); }
.problem-research > .pr-block:nth-of-type(1) .pr-card:nth-of-type(1){ grid-column:1; grid-row:2; }
.problem-research > .pr-block:nth-of-type(1) .pr-card:nth-of-type(2){ grid-column:2; grid-row:2; }
.problem-research > .pr-block:nth-of-type(2) .pr-card:nth-of-type(1){ grid-column:3; grid-row:2; margin-left:var(--right-offset); }

.pr-card{
  height:100%; min-height:360px; display:flex; flex-direction:column;
  background: rgba(255,255,255,0.18); border:1px solid rgba(15,23,42,0.14);
  border-radius:20px; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: clamp(16px,2.6vw,22px);
}
.pr-card__avatar{
  width:84px; height:84px; border-radius:50%; margin:4px auto 10px;
  background: rgba(255,255,255,.55); border:1px solid rgba(15,23,42,.15);
  overflow:hidden; display:grid; place-items:center;
}
.pr-card__avatar img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:960px){
  .problem-research{ grid-template-columns:1fr; grid-template-rows:none; }
  .problem-research > .pr-block:nth-of-type(1) .pr-heading,
  .problem-research > .pr-block:nth-of-type(2) .pr-heading{ grid-column:1; grid-row:auto !important; margin-left:0; }
  .problem-research > .pr-block:nth-of-type(2) .pr-heading{ margin-top: clamp(16px,5vw,24px); }
  .problem-research > .pr-block:nth-of-type(1) .pr-card:nth-of-type(1),
  .problem-research > .pr-block:nth-of-type(1) .pr-card:nth-of-type(2),
  .problem-research > .pr-block:nth-of-type(2) .pr-card:nth-of-type(1){ grid-column:1; grid-row:auto !important; margin-left:0; }
  .pr-card{ min-height:auto; height:auto; }
}

/* 强调语 h2 */
.problem-hero-quote{ max-width: var(--maxw); margin: clamp(48px,8vw,96px) auto; padding: 0 clamp(16px,4vw,48px); text-align:right; }
.phq-text{ margin:0; color: rgba(15,23,42,.45); line-height:1.05; opacity:0; transform: translateY(12px); transition: .8s; }
.phq-text.is-in{ opacity:1; transform:translateY(0); }

/* 用户调查 */
.problem-survey{ max-width: var(--maxw); margin: clamp(40px,6vw,64px) auto 0; padding: 0 clamp(16px,4vw,48px); }
.problem-survey__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(16px,3vw,40px); }
@media (max-width:960px){ .problem-survey__grid{ grid-template-columns:1fr; } }

/* 查看数据 */
.problem-datasets{
  max-width: var(--maxw); margin: clamp(32px,6vw,72px) auto;
  padding: 0 clamp(16px,4vw,48px);
  display:grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: clamp(16px,3vw,40px); align-items:start;
}
.problem-datasets__media{
  margin:0; background: rgba(255,255,255,.5);
  border:1px solid rgba(15,23,42,0.12); border-radius:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: clamp(8px,1.8vw,14px);
}
.problem-datasets__media img{ width:100%; border-radius:12px; }
.problem-datasets__actions{ display:flex; gap: clamp(10px,2vw,16px); flex-wrap:wrap; }
.pd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:999px; text-decoration:none; font-weight:700;
  background: rgba(15,23,42,0.18); border:1px solid rgba(15,23,42,0.14); color:var(--text-main);
}
.pd-btn:hover{ background: rgba(15,23,42,0.24); transform: translateY(-1px); }
@media (max-width:960px){ .problem-datasets{ grid-template-columns:1fr; } }

/* =========================================================
   Section · 定义（Ideate）
   ========================================================= */
.section-ideate{ margin: clamp(44px,8vw,96px) auto; padding: 0 clamp(16px,4vw,48px); }
.section-ideate .ideate__container{ max-width: var(--maxw); margin:0 auto; }
.ideate__head{ position: relative; border-bottom: var(--rule); padding-bottom: var(--header-pad-bottom); margin-bottom: var(--header-gap-bottom); }

.ideate__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,3vw,40px); }
.ideate__item{ aspect-ratio:16/11; min-height:240px; display:flex; min-width:0; }
.ideate__box{ flex-direction:column; padding: clamp(6px,1.2vw,12px); }
.ideate__bullets{ margin:0; }

.ideate__image{
  align-items:center; justify-content:center;
  background: rgba(255,255,255,.6); border:1px solid rgba(15,23,42,.12);
  border-radius:14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); padding: clamp(8px,1.6vw,14px);
}
.ideate__image img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
  cursor:zoom-in; transition: transform .2s ease, filter .2s ease;
}
.ideate__image img:hover{ transform: scale(1.02); filter: saturate(1.05); }

/* 四栏说明 */
.ideate-fourcols{
  max-width: var(--maxw); margin: clamp(20px,4vw,28px) auto clamp(18px,3vw,26px);
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px,2.2vw,28px); padding: 0 clamp(8px,2vw,24px);
}
@media (max-width:960px){ .ideate-fourcols{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .ideate-fourcols{ grid-template-columns: 1fr; } }

/* 结构图轮播 */
.ideate-gallery{ max-width: var(--maxw); margin: clamp(8px,2vw,12px) auto clamp(36px,6vw,64px); padding: 0 clamp(8px,2vw,24px); }
.ig-stage{
  --ig-border: clamp(1px, .18vw, 2px);
  position:relative; aspect-ratio: 4033/2347; box-sizing:border-box;
  background: rgba(255,255,255,.6); border: var(--ig-border) solid rgba(15,23,42,.12);
  border-radius:16px; box-shadow: 0 8px 22px rgba(0,0,0,.08); overflow:hidden; cursor:pointer;
}
.ig-img{ position:absolute; inset:var(--ig-border); width:calc(100% - 2*var(--ig-border)); height:calc(100% - 2*var(--ig-border)); object-fit:cover; opacity:0; transition: opacity .55s ease; }
.ig-img.is-on{ opacity:1; }
.ig-dots{ display:flex; justify-content:center; gap:10px; padding: clamp(8px,1.8vw,14px) 4px 0; }
.ig-dot{ width:10px; height:10px; border-radius:999px; background: rgba(15,23,42,.28); border:none; cursor:pointer; }
.ig-dot.is-active{ background: rgba(15,23,42,.85); }

/* =========================================================
   Section · 构思图（全宽图）
   ========================================================= */
.section-idea-map{ margin: clamp(28px,6vw,72px) 0; padding:0; }
.idea-map__head{
  max-width: var(--maxw);
  margin: 0 auto var(--header-gap-bottom);
  padding: 0 clamp(16px,4vw,48px) var(--header-pad-bottom);
  border-bottom: var(--rule);
}
.idea-map__container{ width:100vw; margin-left:50%; transform: translateX(-50%); }
.idea-map__figure{ margin:0; }
.idea-map__img{ display:block; width:100%; height:auto; object-fit:contain; }

/* =========================================================
   Section · 原型（低保真 1 图 + 中保真 1 图，沿用实现段图样式）
   ========================================================= */
.section-prototype{
  background: var(--page-bg);
  padding: clamp(24px,5vw,48px) 0 clamp(36px,6vw,64px);
}
.section-prototype .proto__container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,48px);
}


/* —— 使用实现段相同的容器与高度规则 —— */
.section-prototype .impl__media-wrapper{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.section-prototype .impl__media-scroll{
  display: flex;
  justify-content: center;
  min-width: 100%;
}
.section-prototype .impl__img{
  display: block;
  height: var(--hero-lg) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  scroll-snap-align: center;
  background: transparent;
}
@media (max-width: 1024px){ .section-prototype .impl__img{ height: var(--hero-md) !important; } }
@media (max-width: 768px){  .section-prototype .impl__img{ height: var(--hero-sm) !important; } }
@media (max-width: 480px){  .section-prototype .impl__img{ height: var(--hero-xs) !important; } }

/* 线框三列说明（标题左右线差异） */
.midfi__container{
  max-width: var(--maxw);
  margin: clamp(16px,3vw,28px) auto clamp(8px,2vw,12px);
  padding: 0 clamp(16px,4vw,48px);
  display:grid; grid-template-columns: 1fr 1fr minmax(220px,.85fr);
  column-gap: clamp(20px,3.4vw,40px); align-items:start;
}
.midfi__aside{
  border-left: var(--rule);
  padding-left: clamp(16px,2vw,24px);
  display:flex; align-items:center; min-height:100%;
}
.midfi__aside--rightline{
  border-left:none; padding-left:0;
  border-right: var(--rule);
  padding-right: clamp(16px,2vw,24px);
}
@media (max-width: var(--bp-md)){
  .midfi__container{ grid-template-columns:1fr; row-gap: clamp(10px,2vw,16px); }
  .midfi__aside,
  .midfi__aside--rightline{
    border-left:none; border-right:none; padding-left:0; padding-right:0;
  }
}

/* =========================================================
   Section · 测试
   ========================================================= */
.section-test{ background: var(--page-bg); margin: clamp(44px, 8vw, 96px) auto; padding: 0 clamp(16px, 4vw, 48px); }
.section-test .test__container{ max-width: var(--maxw); margin: 0 auto; }
.section-test .test__grid{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(16px, 3vw, 40px); margin-top: clamp(12px, 2vw, 16px);
}
@media (max-width: 960px){ .section-test .test__grid{ grid-template-columns: 1fr; } }
.section-test .test__media{
  margin: clamp(20px, 4vw, 44px) 0 0;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: clamp(8px, 1.8vw, 14px);
  display:grid; place-items:center;
}
.section-test .test__img{ display:block; width:100%; border-radius:10px; cursor:zoom-in; transition: transform .18s, filter .18s; }
.section-test .test__img:hover{ transform: translateY(-1px); filter: saturate(1.03); }

/* =========================================================
   Section · 实现（Implementation）
   ========================================================= */
.section-impl{ background: var(--page-bg); margin: clamp(44px, 8vw, 96px) 0; }
.section-impl .impl__container{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* 图片横向翻页（竖屏不缩图） */
.section-impl .impl__media-wrapper{
  width:100vw; margin-left:50%; transform: translateX(-50%);
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  margin-top:100px; margin-bottom:100px;
}
.section-impl .impl__media-scroll{ display:flex; justify-content:center; min-width:100%; }
.section-impl .impl__img{
  display:block; height:var(--hero-lg); width:auto; max-width:none;
  object-fit:contain; scroll-snap-align:center;
}
@media (max-width: 1024px){ .section-impl .impl__img{ height: var(--hero-md); } }
@media (max-width: 768px){ .section-impl .impl__img{ height: var(--hero-sm); } }
@media (max-width: 480px){ .section-impl .impl__img{ height: var(--hero-xs); } }

/* =========================================================
   Section · 反思
   ========================================================= */
.section-reflect{ background: var(--page-bg); margin: clamp(44px, 8vw, 96px) 0; padding: 0 clamp(16px, 4vw, 48px); }
.section-reflect .reflect__container{ max-width: var(--maxw); margin: 0 auto; }

.section-reflect .reflect__grid{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(20px, 4vw, 48px); align-items:start;
  margin-top: clamp(20px, 4vw, 36px);
}
.section-reflect .reflect__textblock{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 40px);
}
.section-reflect .reflect__media{ display:flex; justify-content:center; align-items:start; }
.section-reflect .reflect__img{ max-width: 280px; width:100%; }

@media (max-width: 960px){
  .section-reflect .reflect__grid{ grid-template-columns:1fr; }
  .section-reflect .reflect__textblock{ grid-template-columns:1fr; }
  .section-reflect .reflect__media{ margin-top:20px; }
}

/* =========================================================
   移动端兜底：确保“所有内容竖向排列”
   （画廊/大图除外，仍水平滑动）
   ========================================================= */
@media (max-width: 768px){
  .intro__container{ grid-template-columns:1fr !important; }
  .meta__grid{ grid-template-columns:1fr !important; }
  .problem-research{ grid-template-columns:1fr !important; }
  .problem-survey__grid{ grid-template-columns:1fr !important; }
  .problem-datasets{ grid-template-columns:1fr !important; }

  .ideate__grid{ grid-template-columns:1fr !important; }
  .ideate-fourcols{ grid-template-columns:1fr !important; }

  .iap{ grid-template-columns:1fr !important; }
  .midfi__container{ grid-template-columns:1fr !important; }
  .section-test .test__grid{ grid-template-columns:1fr !important; }

  .section-reflect .reflect__grid{ grid-template-columns:1fr !important; }
  .section-reflect .reflect__textblock{ grid-template-columns:1fr !important; }
}

/* =========================
   PATCH · 信息架构 / 设计原则 (.iap)
   修复：容器贴边、两列失效、标题无下划线等
   ========================= */

.iap{
  max-width: var(--maxw) !important;
  margin: clamp(40px,8vw,96px) auto !important;
  padding: 0 clamp(16px,4vw,48px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: clamp(20px,4.5vw,64px) !important;
}

.iap__col{ min-width: 0; }

.iap__title{
  margin: 0 0 .8em !important;
  padding-bottom: .6em !important;
  border-bottom: var(--rule) !important;  /* 统一底部分隔线 */
}

/* 右侧“设计原则”卡片栅格 */
.iap-principles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: clamp(22px,4vw,56px) !important;
  row-gap: clamp(10px,2vw,18px) !important;
}

.iap-item{ min-width: 0; }
.iap-item__title{
  margin: 0 0 .4em !important;
  font-weight: 700 !important; /* h4 层级外观强化 */
}

/* 段落恢复正文风格（按层级走全局变量） */
.iap__content p,
.iap-item p{
  margin: 0 0 .9em !important;
  font-size: var(--fs-body) !important;
  line-height: 1.85 !important;
  color: var(--text-sub) !important;
  font-family: var(--font-cn) !important;
}

/* 移动端兜底：竖向单列 */
@media (max-width: 768px){
  .iap{
    grid-template-columns: 1fr !important;
    gap: clamp(18px,4vw,28px) !important;
    padding-left: clamp(16px,4vw,24px) !important;
    padding-right: clamp(16px,4vw,24px) !important;
  }
  .iap-principles{
    grid-template-columns: 1fr !important;
    row-gap: clamp(12px,3vw,20px) !important;
  }
}
/* =========================================================
   PATCH · 构思——从挑战到解决方案（信息结构图）
   需求：桌面端保持高度不变；移动端缩容器，左右滑动查看
   说明：
   - 不改变图片本身尺寸（width:auto; max-width:none）
   - 容器 100vw 居中、横向滚动，scroll-snap 体验更顺滑
   - 若需要微调桌面端高度，只改 --idea-map-h-lg 变量即可
   ========================================================= */

/* 高度变量（桌面端高度保持为 lg；可按你现在页面的实际高度改值） */
:root{
  --idea-map-h-lg: 520px;  /* ← 如需与当前页面完全一致，改成你实际看到的高度 */
  --idea-map-h-md: 520px;  /* 移动端也保持同高，确保“只缩容器，不缩图片” */
  --idea-map-h-sm: 520px;
  --idea-map-h-xs: 520px;
}

/* 头部保持统一：底部分隔线与其它 section 等宽 */
.section-idea-map .idea-map__head{
  max-width: var(--maxw);
  margin: 0 auto clamp(18px,3vw,28px);
  padding: 0 clamp(16px,4vw,48px) clamp(8px,1.6vw,12px);
  border-bottom: 1px solid var(--header-rule-color);
}

/* 舞台容器：占满视口宽度、居中；仅改变容器尺寸，不改图像尺寸 */
.section-idea-map .idea-map__container{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;           /* 横向滚动 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* 让内部内容宽度随图片原始宽度延展，避免被 100vw 压缩 */
.section-idea-map .idea-map__figure{
  margin: 0;
  display: inline-block;      /* 使其宽度等于内容宽度 */
  min-width: max-content;     /* 根据图片天然宽度撑开 */
  scroll-snap-align: center;  /* 滑动时尽量居中停靠 */
}

/* 图片不缩放：保持固定显示高度，宽度自适应；不受容器宽度影响 */
.section-idea-map .idea-map__img{
  display: block;
  height: var(--idea-map-h-lg);
  width: auto;
  max-width: none;
  object-fit: contain;
  background: transparent;
}

/* 这里按你的要求，“不改变桌面端高度”，所以移动端高度也维持一致。
   如果你仍想在极小屏上稍微降低高度，可解除下面注释改为不同值。 */
/*
@media (max-width: 1024px){ .section-idea-map .idea-map__img{ height: var(--idea-map-h-md); } }
@media (max-width: 768px){  .section-idea-map .idea-map__img{ height: var(--idea-map-h-sm); } }
@media (max-width: 480px){  .section-idea-map .idea-map__img{ height: var(--idea-map-h-xs); } }
*/

/* img{
  margin-top: 100px;
  margin-bottom: 100px;
} */

/* ===========================
   PATCH · 构思——从挑战到解决方案
   - 桌面端：图片居中且宽度 100vw，高度自适应
   - 移动端：图片不缩放，固定显示高度；容器可横向滚动
   =========================== */

/* 统一高度变量（移动端用得到；桌面端改为宽度 100vw 高度自适应） */
:root{
  --idea-map-h-lg: 520px;  /* 若你要严格对齐现有视觉，可改为当前实际高度 */
}

/* 舞台容器：居中，移动端可横向滚动 */
.section-idea-map .idea-map__container{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;   /* 居中承载 */
  overflow-x: auto;          /* 移动端横向滚动 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* figure 跟随内容尺寸 */
.section-idea-map .idea-map__figure{
  margin: 0;
  flex: 0 0 auto;            /* 与图片同宽，不被压缩 */
}

/* 基础（移动端优先）：不缩小图片，只控制显示高度，允许横向滑动查看 */
.section-idea-map .idea-map__img{
  display: block;
  height: var(--idea-map-h-lg);
  width: auto;
  max-width: none;
  object-fit: contain;
  background: transparent;
}

/* ≥1024px：桌面端要求图片居中且占据屏幕宽度 100%（高度随比例自适应） */
@media (min-width: 1024px){
  .section-idea-map .idea-map__container{
    overflow-x: hidden;      /* 桌面端不需要滑动 */
  }
  .section-idea-map .idea-map__figure{
    width: 100vw;            /* 让 figure 与视口同宽，便于精确居中 */
  }
  .section-idea-map .idea-map__img{
    width: 100vw;            /* 关键：桌面端按宽度填满屏幕 */
    height: auto;            /* 高度自适应，保持比例 */
    max-width: 100vw;
  }
}

/* ================================
   PATCH 01 · 统一横向大图容器（全局可复用）
   - 桌面端：图宽 = 100vw、居中
   - 移动端：容器可横向滚动，图不缩放、不被裁切
   - 增加上下间距，避免挤在一起
   ================================= */
.fullbleed-x {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* 让两侧留一点“安全内边距”，避免左边看不全 */
  padding-inline: clamp(8px, 4vw, 32px);
}
.fullbleed-x__inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  gap: 0;
}
.fullbleed-x img,
.fullbleed-x .bleed-img {
  display: block;
  width: 100vw;    /* 桌面端占满屏宽 */
  height: auto;    /* 不改原有高度的视觉比例 */
  max-width: none; /* 允许超出容器宽度，由外层滚动 */
  object-fit: contain;
  scroll-snap-align: center;
  /* 上下留白，避免挤在一起 */
  margin-block: clamp(14px, 3.5vw, 24px);
}

/* ================================
   PATCH 02 · 应用于“构思——从挑战到解决方案”
   原来的 .idea-map__container / .idea-map__figure / .idea-map__img
   直接升级为 fullbleed-x 行为
   ================================= */
.section-idea-map .idea-map__container{
  /* 变成全屏横向可滚动容器 */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-inline: clamp(8px, 4vw, 32px); /* 防止移动端左侧被切 */
}
.section-idea-map .idea-map__figure{
  margin: 0;
  min-width: 100%;
  display: inline-flex;
  justify-content: center;
}
.section-idea-map .idea-map__img{
  width: 100vw;       /* 桌面端 100% 屏宽 */
  max-width: none;
  height: auto;       /* 不改桌面端的视觉高度，只调容器 */
  object-fit: contain;
  scroll-snap-align: center;
  margin-block: clamp(14px, 3.5vw, 24px);
}

/* ================================
   PATCH 03 · 实现(Implementation) 图文在移动端先图后文
   - 不改 HTML；小屏把容器设成 grid，根据相对顺序重排
   - 同时给图片适当上下间距
   ================================= */
@media (max-width: 768px){
  .section-impl .impl__container{
    display: grid;
    grid-auto-flow: row;
    row-gap: clamp(12px, 3vw, 20px);
  }
  /* 默认把所有图片块排在文字之前 */
  .section-impl .impl__media-wrapper{ order: -1; }
  .section-impl .impl__content{ order: 0; }

  /* 图片上下再留白，阅读更舒适 */
  .section-impl .impl__media-wrapper{
    margin-block: clamp(12px, 3vw, 18px);
  }
}

/* ================================
   PATCH 04 · 原型段与实现段的大图保持一致行为
   - 桌面端高度不变
   - 移动端容器横向滑动
   - 居中 + 上下间距
   ================================= */
.section-prototype .impl__media-wrapper,
.section-prototype .proto__scroller{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-inline: clamp(8px, 4vw, 32px);
}
.section-prototype .impl__media-scroll,
.section-prototype .proto__rail{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
}
.section-prototype .impl__img,
.section-prototype .proto__img{
  scroll-snap-align: center;
  margin-block: clamp(14px, 3.5vw, 24px);
}

/* ================================
   PATCH 05 · 统一 header 底部细线长度与间距（再次兜底）
   ================================= */
.section-prototype .proto__head,
.section-test .test__head,
.section-impl .impl__head,
.section-reflect .reflect__head,
.section-idea-map .idea-map__head,
.section-ideate .ideate__head,
.section-problem .problem__head,
.problem-survey__head{
  border-bottom: 1px solid rgba(15,23,42,.45);
  padding-bottom: clamp(8px, 1.6vw, 12px);
  margin-bottom: clamp(18px, 3vw, 28px);
}
.section-prototype .proto__rule,
.section-test .test__rule,
.section-impl .impl__rule,
.section-reflect .reflect__rule,
.section-idea-map .idea-map__head::before,
.section-ideate .ideate__head::before,
.section-problem .problem__head::before,
.problem-survey__head::before{
  display: none !important;
}

/* ============================
   6-Grid（桌面：3x2）/ 移动：单列
   - 限宽 + 内边距，避免左右溢出
   - 移动端把第二排第3格（g6）排到第二排第1格（g4）之前
   ============================ */
.midfi-6grid{
  max-width: var(--maxw);
  margin: clamp(16px,3vw,28px) auto;
  padding: 0 clamp(16px,4vw,48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 列 */
  grid-auto-rows: auto;
  gap: clamp(16px,3vw,32px);
  overflow: hidden;                 /* 防止内部绝对定位溢出 */
  contain: layout paint style;      /* 降低溢出 & 提升性能 */
}

.midfi-6grid .g{ min-width: 0; }    /* 防长词/英文造成撑爆 */
.midfi-6grid p{ margin: 0; }
.midfi-6grid__title{
  margin: 0;
  padding-bottom: clamp(6px,1.2vw,10px);
  border-bottom: 1px solid rgba(15,23,42,.45);
}

/* 列表样式统一 */
.midfi-6grid__bullets{
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.85;
}
.midfi-6grid__bullets li{
  margin: .25em 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ====== Mobile：单列 + 重排 ======
   顺序说明（原：g1 g2 g3 | g4 g5 g6）
   要求：第二排第三个（g6）在第二排第一个（g4）之前
   单列顺序设定：g1, g2, g3, g6, g4, g5
*/
@media (max-width: 768px){
  .midfi-6grid{
    grid-template-columns: 1fr;     /* 纵向单列 */
    gap: clamp(12px,3vw,20px);
  }
  .midfi-6grid .g1{ order: 1; }
  .midfi-6grid .g2{ order: 2; }
  .midfi-6grid .g3{ order: 3; }
  .midfi-6grid .g6{ order: 4; }     /* 提前到 g4 前面 */
  .midfi-6grid .g4{ order: 5; }
  .midfi-6grid .g5{ order: 6; }

  /* 移动端标题与正文之间留白更紧凑 */
  .midfi-6grid__title{
    padding-bottom: clamp(4px,1vw,8px);
  }
}

/* ===== Test · 两轮测试自定义布局 ===== */
.section-test .test__stage{
  display: grid;
  grid-template-columns: 1fr 1fr;               /* 桌面两列 */
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(16px, 3vw, 24px);
  align-items: start;
}

.testcase{
  display: grid;
  grid-template-rows: auto auto;                /* 上文字/图或上图/文字 */
  row-gap: clamp(12px, 2vw, 18px);
}

/* 文案 */
.testcase__text p{ margin: 0 0 .8em; }

/* 图片容器与图片：居中、等比、不溢出 */
.testcase__media{
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.6vw, 12px) 0;           /* 上下留白，避免挤在一起 */
}
.testcase__img{
  display: block;
  height: 320px;                                /* 桌面高度（与页面整体风格协调） */
  width: auto;
  max-width: 100%;                              /* 容器变窄时缩放，避免溢出 */
  object-fit: contain;
}

/* 更大屏可稍增图片高度 */
@media (min-width: 1280px){
  .testcase__img{ height: 360px; }
}

/* 平板与移动：改为单列纵向排布，并相应降低图片高度 */
@media (max-width: 960px){
  .section-test .test__stage{
    grid-template-columns: 1fr;                 /* 纵向 */
  }
  .testcase__img{ height: 280px; }
}
@media (max-width: 640px){
  .testcase__img{ height: 240px; }
}

/* =========================
   Section · 测试（修复溢出 & 间距）
   ========================= */

/* 收口：所有测试内容在 max-width 内，避免 100vw 引起的溢出 */
.section-test .test__container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);  /* 与全站保持一致的左右内边距 */
}

/* 统一 header 与主体之间的竖向节奏 */
.section-test .test__head{
  padding-bottom: var(--header-rule-pad-bottom);
  margin-bottom: var(--header-rule-margin-bottom);
  border-bottom: var(--header-rule-thickness) solid var(--header-rule-color);
}

/* 舞台：两列网格 + 统一的行距、列距；舞台本身也收口到 maxw */
.section-test .test__stage{
  max-width: var(--maxw);
  margin: clamp(20px, 4vw, 36px) auto clamp(24px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;                 /* 桌面两列 */
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(28px, 4vw, 56px);                /* 行距（两轮之间的垂直距离） */
  align-items: start;
}

/* 每一轮的内部是“块级”布局，上下各一块（文字/图片） */
.testcase{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: clamp(12px, 2vw, 18px);                /* 同一轮内上下间距 */
}

/* 文案段落：用全局 p 的字号与行高；取消额外 margin 叠加 */
.testcase__text p{
  margin: 0 0 .85em;
}

/* 图片容器：始终在列内水平居中，留出上下呼吸 */
.testcase__media{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(8px, 1.6vw, 12px) 0;             /* 上下边距，避免贴得过紧 */
}

/* 三机合成图：宽度随容器缩放，不再横向溢出；始终居中 */
.testcase__img{
  display: block;
  width: min(720px, 100%);                        /* 桌面最大 720px，容器变窄则跟随缩小 */
  height: auto;                                   /* 按比例缩放，避免变形 & 溢出 */
  max-width: 100%;
  object-fit: contain;
}

/* 大屏可以微增图片上限 */
@media (min-width: 1440px){
  .testcase__img{ width: min(780px, 100%); }
}

/* 移动端：改为纵向一列；图片高度自动（跟随宽度），保持比例 */
@media (max-width: 960px){
  .section-test .test__stage{
    grid-template-columns: 1fr;                   /* 纵向 */
  }
  .testcase__img{
    width: min(600px, 100%);
  }
}

@media (max-width: 640px){
  .testcase__img{
    width: min(520px, 100%);
  }
}

/* ===== 测试区块：加大与上一段的竖向间距 ===== */
.section-test{
  /* 原来是 clamp(44px, 8vw, 96px) */
  margin: clamp(72px, 10vw, 140px) auto;  /* 顶部更松，底部保持自适应 */
}

/* ===== 测试区块内部：header 与内容舞台的间距再加一些 ===== */
.section-test .test__stage{
  /* 原来是 clamp(20px, 4vw, 36px) 的上边距 */
  margin-top: clamp(36px, 6vw, 72px);
  /* 其余保持不变： */
  margin-bottom: clamp(24px, 5vw, 48px);
}
/* ================================
   测试 Section：限制宽度，防溢出
   ================================ */

/* 1) 整个舞台始终收敛到 var(--maxw)，居中，并与上下拉开距离 */
.section-test .test__stage{
  /* 收敛宽度到与你全站一致的正文宽度 */
  max-width: var(--maxw);
  margin: clamp(36px, 6vw, 72px) auto clamp(28px, 5vw, 48px);
  padding: 0 clamp(16px, 4vw, 48px);

  /* 双列：左（文字+三机图A），右（三机图B+文字） */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}

/* 2) 三机图片（其实是一张图）永远不超过容器 —— 不再使用视口宽度 */
.section-test .test__phones,
.section-test .test__phones-a,
.section-test .test__phones-b{
  width: 100%;
  display: grid;
  place-items: center;
}

.section-test .test__img{
  display: block;
  max-width: 100%;   /* 关键：宽度跟随容器，不再把外层撑开 */
  height: auto;      /* 等比缩放 */
}

/* 3) 左右两侧的说明文字，行宽控制一下，视觉更像原型 */
.section-test .test__text{
  max-width: 46ch;          /* 控制行宽 */
  line-height: 1.85;
}

/* 4) 移动端：改为纵向单列，顺序：文字 -> 图 -> 文字 -> 图 */
@media (max-width: 768px){
  .section-test .test__stage{
    grid-template-columns: 1fr;
  }
  .section-test .test__text{ max-width: none; }
}

/* 5) 与上一段拉开距离，再次加大（避免压到下面的黑线） */
.section-test{
  margin: clamp(72px, 10vw, 140px) auto;
}

/* ===== 测试区 · Figma 按钮容器（与正文同宽，靠右） ===== */
.section-test .test__cta{
  max-width: var(--maxw);
  margin: 0 auto clamp(16px, 2.8vw, 28px);
  padding: 0 clamp(16px, 4vw, 48px);
  display: flex;
  justify-content: flex-end;
}

/* ===== 按钮基类 ===== */
.btn{
  --btn-bg: rgba(15,23,42,.08);
  --btn-bg-hover: rgba(15,23,42,.12);
  --btn-text: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  line-height: 1.1;
}
.btn:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{
  outline: 2px solid rgba(15,23,42,.45);
  outline-offset: 2px;
}

/* ===== Figma 变体 ===== */
.btn--figma .btn__icon{
  width: 18px;
  height: 27px;
  display: inline-block;
}
.btn--figma .btn__label{
  font-size: var(--fs-body);        /* 走你统一的正文字号体系 */
  font-family: var(--font-cn);      /* 全局中文字体体系 */
  letter-spacing: .02em;
}

/* 移动端：按钮占满一行，点击更友好 */
@media (max-width: 768px){
  .section-test .test__cta{ padding-right: clamp(16px, 4vw, 48px); }
  .section-test .test__cta .btn{ width: 100%; justify-content: center; }
}

/* 顶部工具条：4等分网格；h3 占 3 格，按钮占 1 格 */
.impl__bar{
  max-width: var(--maxw);
  margin: clamp(16px, 3vw, 28px) auto clamp(12px, 2vw, 20px);
  padding: 0 clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(12px, 2vw, 24px);
  align-items: center;
}
.impl__bar .impl__subtitle{
  grid-column: 1 / span 3;
  margin: 0; /* 与工具条统一对齐 */
}
.impl__bar .test__cta{
  grid-column: 4 / span 1;
  /* 覆盖 test__cta 默认的外边距/内边距，使其融入网格 */
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* 移动端：纵向堆叠，各占一行；按钮满宽居中 */
@media (max-width: 768px){
  .impl__bar{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .impl__bar .impl__subtitle{ grid-column: auto; }
  .impl__bar .test__cta{
    grid-column: auto;
    justify-content: stretch;
  }
  .impl__bar .test__cta .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ===== 修复 Implementation 段在竖屏的排列与间距 ===== */

/* 保险：父级不要被误设为 flex/grid 造成重排 */
.section-impl{ display:block !important; }
.section-impl .impl__container{ display:block !important; }

/* 每个图片块与文字块都独占一行，遵循 DOM 顺序 */
.section-impl .impl__media-wrapper,
.section-impl .impl__content{
  display:block;
  clear: both;           /* 防止被任何 float 影响 */
  order: initial;        /* 如果上层被设为 flex，强制使用 DOM 顺序 */
  width: 100%;
}

/* 统一上下间距（桌面与移动都适用） */
.section-impl .impl__media-wrapper{
  margin-block: clamp(28px, 6vw, 60px);
}
.section-impl .impl__content{
  margin-block: clamp(12px, 4vw, 28px);
  max-width: var(--maxw);
  padding: 0 clamp(16px, 4vw, 48px);
}

/* 竖屏下：严格一列纵向排列，图片→文字→图片→文字 */
@media (max-width: 768px){
  .section-impl{
    /* 如果父级被其它样式设为了 flex/grid，这里强制覆盖为普通文流 */
    display:block !important;
  }
  .section-impl .impl__media-wrapper,
  .section-impl .impl__content{
    display:block !important;
    float:none !important;
    width:100% !important;
  }

  /* 图片保持实现段既有高度规则（你已有变量控制） */
  .section-impl .impl__img{
    height: var(--impl-img-h-sm);
  }

  /* 移动端额外增大图片上下留白，避免“挤在一起” */
  .section-impl .impl__media-wrapper{
    margin-block: clamp(24px, 7vw, 36px);
  }
  .section-impl .impl__content{
    margin-block: clamp(14px, 6vw, 24px);
  }
}

/* 极小屏进一步收紧高度，顺带保持顺序 */
@media (max-width: 480px){
  .section-impl .impl__img{
    height: var(--impl-img-h-xs);
  }
}

/* 保险：横向全宽滚动舞台仍保留，但不影响纵向顺序 */
.section-impl .impl__media-wrapper{
  width:100vw;                 /* 你之前的全宽横向舞台 */
  margin-left:50%;
  transform: translateX(-50%);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.section-impl .impl__media-scroll{ display:flex; justify-content:center; min-width:100%; }
.section-impl .impl__img{ display:block; width:auto; max-width:none; object-fit:contain; scroll-snap-align:center; }
/* 实现段：横向舞台从最左开始显示，避免左侧被遮 */
.section-impl .impl__media-scroll{
  display:flex;
  justify-content:flex-start;     /* 关键：不要居中 */
  align-items:center;
  min-width: max-content;         /* 让轨道按内容自适应，便于滚到最左 */
  gap: 0;
}

/* 保险：舞台允许惯性滚动，且不被父级滚动抢焦点 */
.section-impl .impl__media-wrapper{
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 如果你的“构思——从挑战到解决方案”那张超宽图也有同样问题 */
.section-idea-map .idea-map__container{
  overflow-x:auto;                /* 允许横向滚动 */
  overscroll-behavior-x: contain;
}
.section-idea-map .idea-map__figure{
  display:flex;
  justify-content:flex-start;     /* 关键：从最左显示 */
}
/* ---------- 强力移动端高度约束：实现 / 原型 / 构思大图 ---------- */
/* 说明：
   - 72svh 优先，兼容 72dvh / 72vh 作为回退；
   - 加了 !important 以覆盖你之前的 !important；
   - 保留宽度自适应（width:auto; max-width:none），横向可滑；
   - 同时稍微拉开与上方内容的距离。
*/
@media (max-width: 600px){
  .section-impl .impl__img,
  .section-prototype .impl__img,
  .section-idea-map .idea-map__img{
    height: 72svh !important;    /* 优先：支持小视口单位（避免地址栏影响） */
    height: 72dvh !important;    /* 其次：动态视口 */
    height: 72vh  !important;    /* 兜底 */
    max-height: 72svh !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    object-position: center top; /* 视觉更自然 */
  }

  /* 舞台与上方内容拉开距离，避免“挤在一起”的观感 */
  .section-impl .impl__media-wrapper,
  .section-prototype .impl__media-wrapper,
  .section-idea-map .idea-map__container{
    margin-top: clamp(16px, 4vw, 24px) !important;
    margin-bottom: clamp(16px, 4vw, 24px) !important;
  }

  /* 轨道从最左开始，避免左侧被遮；惯性滚动更顺滑 */
  .section-impl .impl__media-scroll{
    justify-content: flex-start !important;
    min-width: max-content;
  }
}