/* ==========================================================================
   CASEME —— 定制指南页 guide.html
   依赖 style.css；只写这一页独有的版式，通用类一律复用。
   1. 页面级    2. 本章速览    3. 通用小节件    4. ①选型号
   5. ②AI 描述  6. ③上传图片   7. ④调整位置     8. ⑤印刷说明
   9. ⑥注意事项 10. 结尾 / 响应式
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 页面级 */
/* 吸顶导航会遮住锚点，给每个小节留出导航高度 */
#main section[id]{ scroll-margin-top: calc(var(--nav-h) + 28px); }

.g-prose{ max-width:66ch; }
.g-intro{ margin-top:20px; max-width:60ch; }
.g-gap{ gap:var(--sp-5); }
.g-align{ align-items:center; }

/* 小节内的说明性小标题（与 .sec-head 区分开） */
.sub{
  font-size:1.02rem; letter-spacing:.01em;
  margin:var(--sp-7) 0 var(--sp-2); padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

/* 提示条：鼠尾草绿 / 雾粉两种 */
.tip{
  display:flex; align-items:flex-start; gap:10px;
  padding:14px 18px; border-radius:var(--r-md);
  background:var(--sage-soft); color:var(--sage-ink);
  font-size:.88rem; line-height:1.75;
}
.tip--rose{ background:var(--rose-soft); color:var(--rose-ink); }
.tip__ico{ width:18px; height:18px; flex:none; margin-top:4px; }

/* ------------------------------------------------------------- 2. 本章速览 */
.toc{ margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.toc__label{
  display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:var(--sp-3);
}
.toc__list{ display:flex; flex-wrap:wrap; gap:8px; }
.toc__n{ color:var(--rose-ink); font-weight:700; }

/* ----------------------------------------------------------- 3. 通用小节件 */
/* 真实流程的编号步骤：这里用数字，因为顺序真的重要 */
.steps{ display:flex; flex-direction:column; gap:var(--sp-5); }
.step{ display:grid; grid-template-columns:44px 1fr; gap:var(--sp-4); align-items:start; }
.step__num{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--cocoa);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-xs);
}
.step__title{ font-size:1.02rem; margin-bottom:4px; }
.step__text{ font-size:.92rem; color:var(--ink-2); }

/* ------------------------------------------------------------- 4. ①选型号 */
.mock{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.mock__frame{
  width:min(272px,100%); padding:10px;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); transform:rotate(-1.3deg);
}
.mock__frame svg{ width:100%; height:auto; display:block; border-radius:var(--r-md); }
.mock__cap{ font-size:.82rem; line-height:1.7; color:var(--ink-3); text-align:center; max-width:34ch; }

.finder{
  margin-top:var(--sp-8); padding:var(--sp-6);
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.finder__head{ margin-bottom:var(--sp-5); }
.finder__head p{ margin-top:6px; }
.finder__ctrl{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-4); }
.finder__select{ width:min(280px,100%); }
.finder__hint{ font-size:.82rem; color:var(--ink-3); margin-bottom:14px; }
.finder__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:10px; margin-top:var(--sp-5);
}
.modelcard{ min-height:78px; }
.finder__msg{ margin-top:var(--sp-4); font-size:.9rem; line-height:1.7; color:var(--ink-2); min-height:1.7em; }
.finder__msg.is-picked{ color:var(--sage-ink); font-weight:600; }

/* ------------------------------------------------------------ 5. ②AI 描述 */
.compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-5); align-items:start; }

.compare__side{ display:flex; flex-direction:column; gap:var(--sp-4); }
.compare__label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; color:var(--ink-3);
}
.compare__label .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; }
.compare__side--strong .compare__label{ color:var(--cocoa); }
.compare__side--strong .compare__label .dot{ background:var(--rose); }

.compare__quote{
  font-family:var(--font-display); font-size:1.22rem; line-height:1.65;
  font-weight:400; margin:0;
}
/* 普通一侧：虚线 + 褪色，像随手写下的草稿 */
.compare__side--weak .compare__quote{
  padding:var(--sp-5); border:1px dashed var(--line); border-radius:var(--r-lg);
  background:rgba(43,38,34,.022); color:var(--ink-3);
}
.compare__why{ font-size:.85rem; line-height:1.8; color:var(--ink-3); }
.compare__why--strong{ color:var(--ink-2); }

/* 更好一侧：纸胶带贴住的强调卡 */
.compare__sticker{ padding:26px 22px 28px; }
.compare__quote--strong{ color:var(--ink); font-size:1.1rem; }

.compare__vs{ color:var(--cocoa); opacity:.7; align-self:center; }
.compare__vs svg{ width:56px; height:24px; }

/* 逐条拆解：发丝线分隔，不是卡片 */
.breakdown{ margin-top:var(--sp-4); }
.breakdown__item{
  display:grid; grid-template-columns:132px 1fr; gap:var(--sp-5);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line-soft);
}
.breakdown__key{ font-size:.9rem; font-weight:700; color:var(--cocoa); }
.breakdown__text{ font-size:.92rem; line-height:1.8; color:var(--ink-2); }

/* 两组补充对照：上下堆叠，和大对照的左右版式区分开 */
.pairs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-top:var(--sp-4); }
.pair{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5); background:var(--white);
  border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.pair__row{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; line-height:1.78; }
.pair__row .tag{ flex:none; margin-top:3px; }
.pair__row--weak{ color:var(--ink-3); }
.pair__row--good{ color:var(--ink); }

/* 描述公式卡：左上角贴一小段纸胶带 */
.formula{
  position:relative; margin-top:var(--sp-8);
  padding:calc(var(--sp-6) + 6px) var(--sp-6) var(--sp-5);
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.formula .washi{ position:absolute; top:-14px; left:22px; }
.formula__intro{ font-size:.92rem; line-height:1.8; color:var(--ink-2); max-width:58ch; }
.formula__parts{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:var(--sp-5) 0; }
.formula__part{
  display:inline-flex; align-items:center; height:40px; padding:0 18px;
  border-radius:var(--r-pill); background:var(--paper-2);
  font-size:.9rem; font-weight:600; color:var(--ink);
}
.formula__plus{ color:var(--ink-3); font-weight:700; }
.formula__demo{ font-size:.94rem; line-height:1.9; color:var(--ink-2); }
.formula__demo b{ color:var(--cocoa); }
.formula__demo + .tiny{ margin-top:var(--sp-3); }

/* ----------------------------------------------------------- 6. ③上传图片 */
/* 三条规格：顶线 + 大字，像杂志的规格条，不做成卡片 */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.fact{ padding-top:var(--sp-4); border-top:2px solid var(--ink); }
.fact__k{ font-size:.7rem; letter-spacing:.2em; color:var(--ink-3); font-weight:600; }
.fact__v{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; margin:8px 0 6px; }
.fact__d{ font-size:.85rem; line-height:1.75; color:var(--ink-2); }

.sharp{
  margin-top:var(--sp-8); padding:var(--sp-6);
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.sharp__head p{ margin-top:6px; }
.sharp__ctrl{ margin:var(--sp-6) 0 var(--sp-5); }

.sharp__range{
  -webkit-appearance:none; appearance:none; width:100%; height:34px;
  background:transparent; cursor:pointer; margin-top:8px;
}
.sharp__range::-webkit-slider-runnable-track{ height:6px; border-radius:var(--r-pill); background:var(--paper-3); }
.sharp__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:var(--ink); border:3px solid var(--paper); box-shadow:var(--shadow-sm);
}
.sharp__range::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:var(--paper-3); }
.sharp__range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--ink);
  border:3px solid var(--paper); box-shadow:var(--shadow-sm);
}
.sharp__range:focus-visible{ outline:2px solid var(--cocoa); outline-offset:6px; border-radius:var(--r-pill); }

.sharp__ticks{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); }

.sharp__panels{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.sharp__panel{ margin:0; }
.sharp__frame{
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
}
.sharp__frame svg{ width:100%; height:100%; display:block; }
.sharp__cap{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:.76rem; color:var(--ink-3); }
.sharp__cap b{ color:var(--ink); font-weight:600; }

.sharp__verdict{
  display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap;
  margin-top:var(--sp-5); padding:14px 18px; border-radius:var(--r-md);
  font-size:.9rem; line-height:1.7;
}
.sharp__verdict b{ flex:none; }
.sharp__verdict.is-soft{ background:var(--rose-soft); color:var(--rose-ink); }
.sharp__verdict.is-ok{ background:var(--sand); color:var(--ink); }
.sharp__verdict.is-good{ background:var(--sage-soft); color:var(--sage-ink); }

/* 去背景 */
.rmbg{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); margin-top:var(--sp-7); }
.rmbg__item{ display:grid; grid-template-columns:46px 1fr; gap:var(--sp-4); align-items:start; }
.rmbg__ico{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--cocoa);
}
.rmbg__ico svg{ width:22px; height:22px; }
.rmbg__title{ font-size:1rem; margin-bottom:5px; }
.rmbg__text{ font-size:.88rem; line-height:1.8; color:var(--ink-2); }

/* ----------------------------------------------------------- 7. ④调整位置 */
.stage{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.stage__frame{
  width:min(292px,100%); padding:14px;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); transform:rotate(1.1deg);
}
.stage__frame svg{ width:100%; height:auto; display:block; }
.stage__cap{ font-size:.82rem; line-height:1.7; color:var(--ink-3); text-align:center; max-width:38ch; }

.explain{ display:grid; grid-template-columns:44px 1fr; gap:var(--sp-4); align-items:start; }
.explain__ico{
  width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line); color:var(--cocoa);
}
.explain__ico svg{ width:22px; height:22px; }
.explain h3{ font-size:1rem; margin-bottom:4px; }
.explain p{ font-size:.9rem; line-height:1.8; color:var(--ink-2); }

/* ----------------------------------------------------------- 8. ⑤印刷说明 */
.print__grid{ display:grid; grid-template-columns:1.32fr .68fr; gap:var(--sp-7); align-items:start; }

.spec{ width:100%; border-collapse:collapse; }
.spec th,.spec td{
  text-align:left; vertical-align:top;
  padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem;
}
.spec th{
  width:108px; padding-right:var(--sp-5); white-space:nowrap;
  font-weight:700; color:var(--ink);
}
.spec td{ line-height:1.8; color:var(--ink-2); }
.spec td b{ color:var(--ink); }

.callout{
  position:relative; margin-top:16px; padding:calc(var(--sp-6) + 4px) var(--sp-5) var(--sp-5);
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
}
.callout .washi{ position:absolute; top:-14px; left:20px; }
.callout__title{ font-size:1.02rem; line-height:1.5; margin-bottom:10px; }
.callout p{ font-size:.87rem; line-height:1.85; color:var(--ink-2); }
.callout p + p{ margin-top:10px; }
.callout__swatches{ display:flex; gap:var(--sp-5); margin:var(--sp-4) 0; }
.callout__swatches figure{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.callout__swatches figcaption{ font-size:.72rem; color:var(--ink-3); text-align:center; }
.sw{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line);
  box-shadow:inset 0 -4px 8px rgba(43,38,34,.12), var(--shadow-xs);
}

/* --------------------------------------------------------- 9. ⑥注意事项 */
.notice__h3{ margin:var(--sp-6) 0 var(--sp-4); display:flex; align-items:center; }
.notice__h3:first-of-type{ margin-top:0; }
.notice{ border-top:1px solid var(--line); }
.notice__item{
  display:grid; grid-template-columns:30px 1fr; gap:var(--sp-4);
  padding:var(--sp-5) 0; border-bottom:1px solid var(--line-soft);
}
.notice__ico{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--sage-soft); color:var(--sage-ink); margin-top:2px;
}
.notice__ico svg{ width:15px; height:15px; }
.notice__item b{ display:block; font-size:.98rem; margin-bottom:4px; }
.notice__item p{ font-size:.89rem; line-height:1.85; color:var(--ink-2); }

/* --------------------------------------------------------------- 10. 结尾 */
.endcta{
  position:relative; text-align:center;
  padding:var(--sp-8) var(--sp-6) var(--sp-6);
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-xl); box-shadow:var(--shadow-md);
}
.endcta__eyebrow{ justify-content:center; }
.endcta h2{ margin-top:var(--sp-3); }
.endcta__lead{ margin:var(--sp-4) auto 0; max-width:46ch; }
.endcta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:var(--sp-6); }
.endcta__note{ margin-top:var(--sp-5); font-size:.78rem; color:var(--ink-3); }

/* ------------------------------------------------------------ 响应式 */
@media (max-width:900px){
  .print__grid{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
  .compare__vs{ justify-self:center; padding-block:10px; }
  .compare__vs svg{ transform:rotate(90deg); }
}

@media (max-width:760px){
  .facts{ grid-template-columns:1fr; gap:var(--sp-5); }
  .pairs{ grid-template-columns:1fr; }
  .rmbg{ grid-template-columns:1fr; gap:var(--sp-5); }
  .sharp__panels{ grid-template-columns:1fr; }
  .finder{ padding:var(--sp-5); }
  .breakdown__item{ grid-template-columns:1fr; gap:6px; }
  .spec th{ width:86px; padding-right:var(--sp-4); font-size:.86rem; }
  .spec th,.spec td{ font-size:.86rem; }
  .sharp, .formula, .endcta{ padding-left:var(--sp-5); padding-right:var(--sp-5); }
}

@media (max-width:520px){
  .step{ grid-template-columns:36px 1fr; gap:var(--sp-3); }
  .step__num{ width:36px; height:36px; font-size:1rem; }
  .finder__grid{ grid-template-columns:1fr; }
  .sharp__ticks{ font-size:.66rem; }
  .rmbg__item, .explain{ grid-template-columns:38px 1fr; gap:var(--sp-3); }
  .rmbg__ico, .explain__ico{ width:38px; height:38px; }
  .endcta__actions .btn{ width:100%; }
}

/* 尊重「减少动态效果」：本页只用到淡入与悬浮，这里再兜一层底 */
@media (prefers-reduced-motion:reduce){
  .mock__frame, .stage__frame, .compare__sticker{ transform:none; }
  .sharp__frame svg{ transition:none !important; }
}