그라데이션 히어로

<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-hero"><div class="dont-hero-t">우리 아기 이유식,<br>완벽 가이드</div><div class="dont-hero-s">지금 바로 시작해 보세요</div><span class="dont-hero-b">시작하기</span></div><div class="dont-note">두 색이 번지는 배경 + 가운데 큰 글씨 + 둥근 버튼. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS HomeHero editorial — 단색 바탕, 왼쪽 정렬</p><div class="dont-real"><section class="hh hh--editorial" data-astro-cid-3z3o4mti> <div class="container hh__inner" data-astro-cid-3z3o4mti>  <p class="hh__eyebrow num" data-astro-cid-3z3o4mti>글 16편</p> <h1 class="hh__title" data-astro-cid-3z3o4mti>첫 숟가락부터 돌 이후 밥까지, 단계별로 차근차근</h1> <p class="hh__lead" data-astro-cid-3z3o4mti>이유식 시작 시기와 단계별 횟수·질감, 재료 도입 순서, 철분, 알레르기, 보관법을 질병관리청·WHO·NHS·CDC 자료와 하나하나 대조해 정리한 초보 부모용 이유식 가이드예요.</p> <p class="hh__trust" data-astro-cid-3z3o4mti>  질병관리청·영국 NHS·미국 CDC 같은 공신력 있는 기관 자료를 출처로 밝혀요 · <a href="/about/" data-astro-cid-3z3o4mti>편집 원칙</a> </p>  <div class="hh__start" data-astro-cid-3z3o4mti> <p class="hh__label" data-astro-cid-3z3o4mti>처음이라면 여기부터</p> <h2 class="hh__start-title" data-astro-cid-3z3o4mti> <a href="/baby-food-stages-guide/" data-astro-cid-3z3o4mti>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h2> <p class="hh__start-desc" data-astro-cid-3z3o4mti>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="hh__meta num" data-astro-cid-3z3o4mti> <span data-astro-cid-3z3o4mti>단계별 이유식 · </span> <time datetime="2026-10-13" data-astro-cid-3z3o4mti>2026.10.13</time> · 약 6분
</p> </div>   </div> </section></div></section></main>

.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}

.dont-hero{border-radius:12px;padding:44px 20px;text-align:center;background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff}
.dont-hero-t{font-size:26px;font-weight:800;line-height:1.3}
.dont-hero-s{margin-top:10px;opacity:.92}
.dont-hero-b{display:inline-block;margin-top:18px;padding:10px 24px;border-radius:999px;background:#fff;color:#7c3aed;font-weight:700}