/* 영단어 그물망 치기 (수능 트랙) — 쉬운 단계부터 그물 치며 계단 오르기 */
.net-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.net-copy .sec-desc b { color: var(--navy); }

.net-steps { margin-top: 34px; display: grid; gap: 18px; list-style: none; padding: 0; }
.net-steps li { display: flex; gap: 14px; align-items: flex-start; }
.net-steps li > span {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ice); color: var(--blue); font-size: 16px; font-weight: 900;
}
.net-steps b { display: block; font-size: 18px; font-weight: 900; color: var(--navy); }
.net-steps p { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--muted); }

.net-card { padding: 28px; border-radius: var(--r); background: var(--navy); box-shadow: 0 30px 70px rgba(8, 24, 53, .25); }
.net-cap { font-size: 15px; font-weight: 800; color: var(--sky); }

/* 계단: 왼쪽(쉬움)에서 오른쪽(수능)으로 높아짐 */
.net-climb { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 250px; }
.st { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st em {
  font-style: normal; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(143, 184, 255, .16); color: var(--sky); font-size: 13px; font-weight: 800;
}
.st i { display: block; width: 100%; border-radius: 12px 12px 4px 4px; background: rgba(255, 255, 255, .12); }
.st b { margin-top: 10px; font-size: 16px; font-weight: 900; color: var(--white); }
.st small { min-height: 18px; margin-top: 2px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.st.s1 i { height: 40px; background: rgba(18, 183, 106, .45); }
.st.s2 i { height: 80px; background: rgba(18, 183, 106, .45); }
.st.s3 i { height: 120px; background: var(--blue); }
.st.s4 i { height: 160px; }
.st.s3 b::after { content: " ← 지금"; font-size: 12px; color: var(--sky); }

.net-catch {
  margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.net-catch span { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.net-catch b { font-size: 22px; font-weight: 900; color: var(--sky); white-space: nowrap; }
.net-foot { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.net-foot b { color: #6CE9A6; }

@media (max-width: 1024px) {
  .net-grid { grid-template-columns: 1fr; gap: 40px; }
  .net-card { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .net-copy .sec-desc br { display: none; }
  .net-card { padding: 20px; }
  .net-climb { gap: 6px; height: 220px; }
  .st em { padding: 4px 6px; font-size: 12px; }
  .st.s3 b::after { content: ""; }
}

/* 복습 두더지 게임 그림 (6단계 복습 칸 아래) */
.mole-game { margin: 56px auto 0; max-width: 980px; }
.mole-game img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 30px 70px rgba(8, 24, 53, .25); }
.mole-game figcaption { margin-top: 18px; text-align: center; font-size: 16px; font-weight: 600; color: var(--muted); }
.mole-game figcaption b { color: var(--navy); }
@media (max-width: 760px) { .mole-game { margin-top: 40px; } .mole-game img { border-radius: 18px; } }

/* 토익·토플 그물망: 층이 올라갈수록 카드가 위로 (계단) */
.net-ladder { align-items: start; }
.net-ladder .rung:nth-child(1) { margin-top: 84px; }
.net-ladder .rung:nth-child(2) { margin-top: 56px; }
.net-ladder .rung:nth-child(3) { margin-top: 28px; }
.rung .catch { display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: 999px; background: var(--ice); color: var(--blue); font-size: 13px; font-weight: 900; white-space: nowrap; }
.rung.core .catch { background: rgba(255, 255, 255, .14); color: var(--sky); }
#path .sec-desc b { color: var(--navy); }
@media (max-width: 1024px) { .net-ladder .rung:nth-child(n) { margin-top: 0; } }