/**
 * PCB / PCBA 中心页 · 段3 说明条（共享基础层）
 *
 * 两个页面的说明条是同一套设计语言，标记也共用 `pcb-note__*`：
 *   引号装饰 111×90 / #B8D8BC / opacity .23
 *   标题 #008C11 24px Outfit Bold / 行高 27
 *   正文 16px Outfit Regular / 行高 27
 *   右侧「按钮」：平铺文字 16px Outfit Bold #14363F + 32px 绿色圆 + 387×1 分隔线
 *
 * 设计稿两页整段**都没有卡片**，故这里不设底色与圆角。
 * 历史上这一段曾被一张"有底色、无上下内边距"的卡片包住 —— 那是因为本文件
 * 早期版本给 `.pcb-note__inner` 写了 `background` + `border-radius`，而
 * 本页标记已经换成上面这套结构，卡片只是残留的漏出样式。已删除。
 *
 * 两页的差异（正文宽度、右栏宽度与纵向偏移）分别写在
 *   assets/css/pcb-center/03-route-note.css   （PCB 页）
 *   assets/css/pcba-center/03-route-note.css  （PCBA 页）
 */

.pcb-note {
  background: #ffffff;
}

.pcb-note__inner {
  display: grid;
  gap: 60px;
  align-items: start;
  max-width: 1718px /* = 设计稿内容宽 1638 + 左右各 40 padding */;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── 左栏 ───────────────────────────────────────────── */

.pcb-note__left {
  position: relative;
  padding-top: 49px; /* 设计稿：段顶 → 标题顶 49 */
}

/* 引号装饰：压在标题左侧，几乎隐入背景 */
.pcb-note__mark {
  position: absolute;
  top: 0;
  left: -5px;
  width: 111px;
  height: 90px;
  opacity: 0.23;
  pointer-events: none;
}

.pcb-note__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pcb-note__title {
  position: relative;
  margin: 0 0 25px; /* 标题底 76 → 正文顶 101 */
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  color: #008c11;
}

.pcb-note__body {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 27px;
  color: #97a29c;
}

/* ── 右栏：整块可点（文案 + 圆形箭头 + 分隔线）───────── */

.pcb-note__right {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 文案 1fr + 圆 32；圆与文案垂直居中，右边缘距分隔线右端 4px（设计稿实测） */
.pcb-note__right-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 20px;
  align-items: center;
  width: 387px;
  max-width: 100%;
  padding-right: 4px;
}

.pcb-note__right-text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #14363f;
  transition: color 0.24s ease;
}

.pcb-note__right-label,
.pcb-note__right-value {
  display: block;
}

.pcb-note__right-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
  transition: transform 0.24s ease, background 0.24s ease;
}

.pcb-note__right-dot svg { width: 14px; height: 14px; }

.pcb-note__right-line {
  display: block;
  width: 387px;
  max-width: 100%;
  height: 1px;
  background: #b8d8bc;
  transition: background 0.24s ease;
}

.pcb-note__right:hover .pcb-note__right-text { color: #008c11; }
.pcb-note__right:hover .pcb-note__right-dot { background: #016b0d; transform: translateX(2px); }
.pcb-note__right:hover .pcb-note__right-line { background: #008c11; }

.pcb-note__right:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: 6px;
  border-radius: 4px;
}

/* ── 响应式（设计稿只有 1920，以下为降级）───────────── */

@media (max-width: 1280px) {
  .pcb-note__inner { gap: 40px; }
  .pcb-note__left { padding-top: 40px; }
  .pcb-note__mark { width: 92px; height: 75px; }
}

@media (max-width: 1080px) {
  .pcb-note__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .pcb-note__right {
    width: auto;
    padding-top: 24px;
  }
}

@media (max-width: 720px) {
  .pcb-note__left { padding-top: 32px; }
  .pcb-note__title { font-size: 20px; line-height: 26px; margin-bottom: 16px; }
  .pcb-note__body { font-size: 15px; line-height: 24px; }
  .pcb-note__mark { width: 72px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcb-note__right-text,
  .pcb-note__right-dot,
  .pcb-note__right-line { transition: none; }

  .pcb-note__right:hover .pcb-note__right-dot { transform: none; }
}