<div class="dc-skip-demo">
<a class="dc-skip" href="#dc-skip-main">본문으로 건너뛰기</a>
<div class="dc-skip-demo__top">
<span class="dc-skip-demo__logo">이음</span>
<nav class="dc-skip-demo__nav" aria-label="주 메뉴">
<a class="dc-skip-demo__navlink" href="#">일자리</a>
<a class="dc-skip-demo__navlink" href="#">생활 안내</a>
<a class="dc-skip-demo__navlink" href="#">상담</a>
<a class="dc-skip-demo__navlink" href="#">내 신청</a>
</nav>
</div>
<main class="dc-skip-demo__main" id="dc-skip-main" tabindex="-1">
<h1 class="dc-skip-demo__h1">오늘 올라온 일자리 12곳</h1>
<p class="dc-skip-demo__p">건너뛰기 링크가 닿는 자리다. 메뉴를 지나 여기서부터 읽기가 시작된다.</p>
</main>
</div>
.dc-skip-demo { position:relative; max-width:560px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-skip { display:inline-block; margin:var(--dc-3) 0 0 var(--dc-3); padding:var(--dc-2) var(--dc-4); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:13px; font-weight:700; text-decoration:underline; }
.dc-skip:hover { background:var(--dc-brand-hi); }
.dc-skip:focus-visible { outline:2px solid var(--dc-text); outline-offset:2px; }
.dc-skip--reveal { position:absolute; left:var(--dc-3); top:var(--dc-3); z-index:5; margin:0; box-shadow:var(--dc-sh-2); transform:translateY(-340%); transition:transform var(--dc-fast); }
.dc-skip--reveal:focus { transform:translateY(0); }
.dc-skip-row { display:flex; flex-wrap:wrap; gap:var(--dc-2); padding:var(--dc-3) var(--dc-3) 0; }
.dc-skip-row .dc-skip { margin:0; }
.dc-skip-demo__top { display:flex; align-items:center; flex-wrap:wrap; gap:var(--dc-3) var(--dc-4); margin-top:var(--dc-3); padding:var(--dc-3) var(--dc-4); border-top:1px solid var(--dc-line); border-bottom:1px solid var(--dc-line); background:var(--dc-sunken); }
.dc-skip-demo__logo { font-size:15px; font-weight:800; color:var(--dc-text); }
.dc-skip-demo__nav { display:flex; flex-wrap:wrap; gap:var(--dc-4); }
.dc-skip-demo__navlink { font-size:13px; color:var(--dc-text-sub); text-decoration:none; }
.dc-skip-demo__navlink:hover { color:var(--dc-brand-text); text-decoration:underline; }
.dc-skip-demo__main { padding:var(--dc-4); }
.dc-skip-demo__main:focus { outline:2px dashed var(--dc-brand); outline-offset:-4px; }
.dc-skip-demo__h1 { margin:0 0 var(--dc-2); font-size:17px; font-weight:700; color:var(--dc-text); }
.dc-skip-demo__p { margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-skip-demo__hint { margin:0; padding:var(--dc-3) var(--dc-4) 0; font-size:12px; color:var(--dc-text-mute); }