/* ============================================================
   baokao-jiaocheng.css —— 网上报名教程 · 原型 L6 斜纹+旋转
   repeating-linear-gradient 斜纹装饰，模块轻微 rotate 错位
   ============================================================ */

/* ---------- Hero L6 斜纹 + 色块 ---------- */
.hero{
  position:relative; padding:calc(var(--header-h) + 60px) 0 90px; overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(176,141,102,.08) 0 2px,transparent 2px 22px),
    linear-gradient(160deg,var(--cream-50),var(--cream-100));
}
.hero__block{
  position:absolute; right:-60px; top:-40px; width:380px; height:380px;
  background:var(--green-800); opacity:.1; transform:rotate(25deg); border-radius:30px;
}
.hero__inner{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center;
  position:relative;
}
.hero__text .breadcrumb{ margin-bottom:22px; }
.hero__eyebrow{ color:var(--brown-600); letter-spacing:.34em; font-size:13px; margin-bottom:16px; }
.hero h1{ font-size:clamp(40px,5.8vw,66px); line-height:1.14; margin-bottom:20px; }
.hero__lead{ font-size:16.5px; max-width:480px; margin-bottom:28px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__pic img{
  border-radius:24px; box-shadow:var(--shadow-lg); transform:rotate(1.5deg);
  border:6px solid var(--cream-50);
}

/* ---------- 小节头 ---------- */
.sec-head{ margin-bottom:34px; max-width:720px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .eyebrow{ display:block; margin-bottom:12px; }
.sec-head h2{ margin-bottom:10px; }
.sec-head .sub{ color:var(--muted); font-size:15px; }

/* ---------- 报名前准备（斜纹卡片） ---------- */
.prep{
  background:
    repeating-linear-gradient(135deg,rgba(44,74,58,.05) 0 2px,transparent 2px 20px),
    var(--cream-50);
}
.prep__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prep__lead{ max-width:760px; margin:-12px 0 28px; font-size:15.5px; }
.prep-card a{ color:var(--green-700); font-weight:600; }
.prep-card{
  background:var(--cream-50); border:1px solid var(--line); border-radius:18px; padding:26px 22px;
  box-shadow:var(--shadow-sm); transform:rotate(-.5deg);
}
.prep-card:nth-child(even){ transform:rotate(.7deg); }
.prep-card b{ display:block; font-family:var(--font-serif); color:var(--green-800); font-size:19px; margin-bottom:10px; }
.prep-card p{ font-size:14px; }

/* ---------- 分步操作（编号步骤卡） ---------- */
.steps__list{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.step{
  background:var(--cream-50); border-radius:20px; padding:28px 26px; position:relative;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.step:nth-child(odd){ transform:rotate(-.6deg); }
.step:nth-child(even){ transform:rotate(.6deg); }
.step__no{
  display:inline-flex; width:48px; height:48px; border-radius:14px; align-items:center; justify-content:center;
  background:var(--brown-600); color:var(--cream-50); font-family:var(--font-serif); font-size:20px; margin-bottom:14px;
}
.step h3{ font-size:20px; margin-bottom:8px; }
.step p{ font-size:14.5px; }

/* ---------- 常见问题图文错位 ---------- */
.trouble__split{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; }
.trouble__text .eyebrow{ display:block; margin-bottom:12px; }
.trouble__text h2{ margin-bottom:20px; }
.trouble-item{ padding:16px 0; border-bottom:1px dashed var(--line); }
.trouble-item h3{ font-size:18px; margin-bottom:6px; color:var(--green-800); }
.trouble-item p{ font-size:14.5px; }
.trouble-item a{ color:var(--green-700); font-weight:600; }
.trouble__pic img{ border-radius:22px; box-shadow:var(--shadow-md); transform:rotate(-1deg); }

/* ---------- 确认/修改（深色两列） ---------- */
.confirm__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); }
.confirm-col h3{ color:var(--cream-100); font-size:21px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(251,248,241,.14); }
.confirm-col p{ color:rgba(251,248,241,.75); font-size:15px; }

/* ---------- 代办盒子（斜纹背景） ---------- */
.proxy__box{
  background:
    repeating-linear-gradient(135deg,rgba(176,141,102,.12) 0 2px,transparent 2px 20px),
    var(--green-800);
  border-radius:26px; padding:clamp(34px,5vw,56px); transform:rotate(-.4deg);
}
.proxy__text h2{ color:var(--cream-100); margin:10px 0 14px; }
.proxy__text p{ color:rgba(251,248,241,.82); max-width:560px; margin-bottom:24px; }

/* ---------- FAQ ---------- */
.faq__list{ max-width:800px; margin-inline:auto; }
.faq-item{
  background:var(--cream-100); border-radius:16px; margin-bottom:13px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 24px; font-weight:600; color:var(--green-900); font-family:var(--font-serif); font-size:17px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{
  flex:none; width:24px; height:24px; border-radius:8px; background:rgba(44,74,58,.1); position:relative;
}
.faq-item summary span::before,.faq-item summary span::after{
  content:""; position:absolute; background:var(--brown-600); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-item summary span::before{ width:10px; height:1.6px; }
.faq-item summary span::after{ width:1.6px; height:10px; transition:opacity .3s; }
.faq-item[open] summary span::after{ opacity:0; }
.faq-item p{ padding:0 24px 20px; font-size:15px; }

/* ---------- 预约 ---------- */
.booking__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center;
  background:var(--cream-100); border-radius:26px; padding:clamp(30px,5vw,56px);
}
.booking__text h2{ margin:10px 0 14px; }
.booking__phone{ margin-top:20px; }
.booking__phone a{ color:var(--green-700); font-weight:700; font-size:20px; }
.booking__form{ display:grid; gap:15px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .prep__grid{ grid-template-columns:1fr 1fr; }
  .steps__list,.trouble__split,.confirm__cols,.booking__inner{ grid-template-columns:1fr; }
  .step:nth-child(odd),.step:nth-child(even),.prep-card{ transform:none; }
}
@media (max-width:640px){
  .prep__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   新增区块（只追加，不动上方既有样式）
   ============================================================ */

/* ---------- 新增：填报常见错误清单 ---------- */
.jc-err__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.jc-er{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 22px;
  border-left:4px solid var(--brown-600);
}
.jc-er b{ display:block; font-family:var(--font-serif); font-size:16.5px; color:var(--brown-700); margin-bottom:7px; }
.jc-er p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }

/* ---------- 新增：报名后待办清单 ---------- */
.jc-todo__list{ max-width:780px; margin-inline:auto; list-style:none; display:grid; gap:0; }
.jc-todo__list li{
  position:relative; padding:16px 0 16px 44px; border-bottom:1px solid var(--line);
}
.jc-todo__list li::before{
  content:""; position:absolute; left:6px; top:20px; width:18px; height:18px; border-radius:4px;
  background:var(--green-900);
}
.jc-todo__list li::after{
  content:""; position:absolute; left:11px; top:24px; width:8px; height:5px;
  border-left:2px solid var(--cream-50); border-bottom:2px solid var(--cream-50);
  transform:rotate(-45deg);
}
.jc-todo__list b{ display:block; font-size:16px; color:var(--green-900); margin-bottom:4px; }
.jc-todo__list p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.jc-todo__list p a{ color:var(--green-700); font-weight:600; }
.jc-todo__note{ max-width:780px; margin:22px auto 0; padding:16px 20px; background:var(--white); border-left:3px solid var(--brown-500); font-size:14px; color:var(--ink-soft); line-height:1.9; }

@media (max-width:640px){
  .jc-err__grid{ grid-template-columns:1fr; }
}