/* ==================== 三档方案：阶梯名帖 ====================
   qiming.html 使用纯 v2 栈，这里只保留名帖本身的排版与配色。
   字号/颜色全部走 styles.css 的设计令牌。 */
.qr-plans{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:26px;
  align-items:stretch;
}

/* 一枚名帖：竖向四段（序号价格 / 名目 / 规格 / 说明），左侧一条挡位色边 */
.qr-plans>.qr-plan{
  position:relative;overflow:hidden;
  display:grid;gap:0;
  grid-template-rows:auto auto auto 1fr;
  padding:20px 22px 22px;
  text-align:left;border-radius:8px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  color:var(--moxuan);
  transform:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease-out);
}

/* 顶行：朱印序号 + 价格右对齐，中间「推荐」小签。
   line-height:1 是必需的：默认 normal 会撑出约 42px 行盒、盖过 32px 序号印，
   使顶行高度由价格字号决定，三枚的价格文案长短不一就会错行。 */
.qp-top{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.qp-ord{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:4px;
  background:rgba(183,62,62,.08);
  border:1px solid rgba(183,62,62,.22);
  color:var(--zhuyin);
  font:700 19px/1 var(--font-serif);font-style:normal;
}
.qp-flag{
  flex:none;padding:2px 9px;border-radius:3px;
  background:var(--gutongjin);color:var(--paper);
  font:500 16px/1.5 var(--font-sans);font-style:normal;letter-spacing:.08em;
}
.qp-price{
  margin-left:auto;flex:none;
  font:19px/1 var(--font-sans);color:var(--ink-muted);white-space:nowrap;
}
.qp-price em{
  font-style:normal;font-family:var(--font-serif);
  font-size:30px;line-height:1;font-weight:700;color:var(--zhuyin);
  letter-spacing:.02em;
}
/* 「免费」是词不是数：套 30px 数字字号会压过名目，降一档并收字距 */
.qp-free .qp-price em{font-size:23px;letter-spacing:.06em}

/* 名目 / 规格 / 说明：字号递降，说明行压在底部对齐三枚 */
.qp-name{
  font:700 27px/1.35 var(--font-serif);
  letter-spacing:.06em;color:var(--moxuan);
}
.qp-spec{
  margin-top:5px;
  font:19px/1.6 var(--font-sans);color:var(--zhuyin);letter-spacing:.02em;
}
.qp-desc{
  margin-top:10px;padding-top:11px;
  border-top:1px dashed var(--line);
  font:18px/1.7 var(--font-sans);color:var(--ink-muted);
  /* 两行说明交给浏览器均分，避免「可换字」这类尾巴掉成 2 字孤行 */
  text-wrap:balance;
}

.qr-plans>.qr-plan:not(.is-active):hover{
  transform:translateY(-2px);
  border-color:var(--gutongjin);
  box-shadow:var(--shadow-sm);
}

/* 选中：描朱边 + 左侧色边转朱，底纹加一层极淡横线（不位移，三枚不错高） */
.qr-plans>.qr-plan.is-active{
  transform:none;
  border:1px solid var(--zhuyin);
  border-left:3px solid var(--zhuyin);
  background:
    repeating-linear-gradient(0deg,transparent 0 30px,rgba(183,62,62,.022) 30px 32px),
    var(--paper);
  box-shadow:var(--shadow-sm);
}
.qr-plans>.qr-plan.is-active .qp-ord{
  background:var(--zhuyin);border-color:var(--zhuyin);color:var(--paper);
}

/* 第三枚「传世·定名」：整枚朱底，作视觉终点 */
.qr-plans>.qr-plan.qp-master{
  background:linear-gradient(135deg,var(--zhuyin-light),var(--zhuyin));
  border-color:transparent;border-left-color:rgba(246,241,231,.5);
  color:var(--xuanbai);
}
.qr-plans>.qr-plan.qp-master .qp-name{color:var(--xuanbai)}
.qr-plans>.qr-plan.qp-master .qp-spec{color:rgba(246,241,231,.92)}
.qr-plans>.qr-plan.qp-master .qp-desc{
  color:rgba(246,241,231,.76);border-top-color:rgba(246,241,231,.3);
}
.qr-plans>.qr-plan.qp-master .qp-price{color:rgba(246,241,231,.82)}
.qr-plans>.qr-plan.qp-master .qp-price em{color:var(--xuanbai)}
.qr-plans>.qr-plan.qp-master .qp-ord{
  background:rgba(246,241,231,.16);
  border-color:rgba(246,241,231,.42);
  color:var(--xuanbai);
}
.qr-plans>.qr-plan.qp-master:not(.is-active):hover{
  border-color:transparent;box-shadow:var(--shadow-md);
}

/* ---------- 响应式 ---------- */
/* 本文件在 qiming-v2.css 之后加载：此处必须自行接管断点，
   否则 v2 的 700px 单栏与 1000px 相关规则会和这套三栏布局打架。 */
@media(max-width:1040px){
  .qr-plans{grid-template-columns:1fr 1fr}
  .qr-plans>.qr-plan.qp-master{grid-column:1/-1}
}
@media(max-width:700px){
  .qr-plans{grid-template-columns:1fr}
  .qr-plans>.qr-plan{padding:16px 18px 15px}
  .qr-plans>.qr-plan .qp-name{font-size:25px}
  .qr-plans>.qr-plan .qp-spec{font-size:18px}
  .qr-plans>.qr-plan .qp-desc{margin-top:9px;padding-top:9px;font-size:17px}
  .qr-plans>.qr-plan .qp-price{font-size:17px}
  .qr-plans>.qr-plan .qp-price em{font-size:25px}
}