복사
<section class="dc-hero">
<div class="dc-hero__body">
<p class="dc-hero__eyebrow">한국에서 일하는 사람을 위해</p>
<h1 class="dc-hero__title">내 비자로 일할 수 있는 자리만 보여 줍니다</h1>
<p class="dc-hero__lead">E-9, H-2, F-4 — 비자를 고르면 지원할 수 없는 공고는 목록에서 사라집니다. 가입하지 않고 먼저 둘러보세요.</p>
<div class="dc-hero__actions">
<button type="button" class="dc-hero__btn">일자리 찾기</button>
<button type="button" class="dc-hero__btn dc-hero__btn--ghost">회사로 가입하기</button>
</div>
<p class="dc-hero__note">6개 언어로 볼 수 있습니다 · 구직자 수수료 없음</p>
</div>
</section>
복사
.dc-hero { padding:var(--dc-8) var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:linear-gradient(180deg, var(--dc-brand-soft), var(--dc-surface)); font-family:var(--dc-font); }
.dc-hero__body { max-width:640px; margin-inline:auto; text-align:center; }
.dc-hero__eyebrow { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-brand-text); }
.dc-hero__title { margin:0; font-size:34px; font-weight:800; line-height:1.22; letter-spacing:-.01em; color:var(--dc-text); }
.dc-hero__lead { margin:var(--dc-4) 0 0; font-size:16px; line-height:1.65; color:var(--dc-text-sub); }
.dc-hero__actions { display:flex; flex-wrap:wrap; gap:var(--dc-3); justify-content:center; margin-top:var(--dc-6); }
.dc-hero__btn { min-height:48px; padding:0 var(--dc-6); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:16px; font-weight:700; transition:background var(--dc-fast); }
.dc-hero__btn:hover { background:var(--dc-brand-hi); }
.dc-hero__btn--ghost { background:var(--dc-surface); border-color:var(--dc-line-field); color:var(--dc-text); }
.dc-hero__btn--ghost:hover { background:var(--dc-sunken); }
.dc-hero__note { margin:var(--dc-4) 0 0; font-size:13px; color:var(--dc-text-mute); }
.dc-hero__art { display:flex; align-items:center; justify-content:center; min-height:210px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); }
.dc-hero__artmark { font-size:13px; color:var(--dc-text-mute); }
.dc-hero--media { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--dc-7); align-items:center; }
.dc-hero--media .dc-hero__body { max-width:none; margin-inline:0; text-align:left; }
.dc-hero--media .dc-hero__actions { justify-content:flex-start; }
.dc-hero--compact { padding:var(--dc-6); }
.dc-hero--compact .dc-hero__title { font-size:22px; }
@media (max-width:760px) {
.dc-hero { padding:var(--dc-7) var(--dc-4); }
.dc-hero--compact { padding:var(--dc-5) var(--dc-4); }
.dc-hero__title { font-size:26px; }
.dc-hero--media { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
.dc-hero__btn { width:100%; }
}