អនបូឌីង ៣ ទំព័រ
អេក្រង់ដំបូងពេលបើកកម្មវិធី — ប្រើពេលអ្នកប្រើត្រូវដឹងក្នុងបីទំព័រថាកម្មវិធីនេះធ្វើអ្វីឱ្យគេ។
មើលជាមុនផ្ទាល់
ប្រភព
<script>document.body.className="dc-bleed"</script>
<div class="dc-ob">
<header class="dc-ob__top">
<p class="dc-ob__brand"><span class="dc-ob__mark" aria-hidden="true">단</span> 단비근로</p>
<button class="dc-ob__skip" type="button">건너뛰기</button>
</header>
<div class="dc-ob__track" tabindex="0" role="group" aria-label="서비스 소개 3장 — 옆으로 넘기세요">
<section class="dc-ob__slide" aria-label="3장 중 1장">
<div class="dc-ob__art dc-ob__art--pay">
<p class="dc-ob__art-label">2026년 8월 급여명세서</p>
<p class="dc-ob__art-sum">2,099,400원</p>
<ul class="dc-ob__art-list">
<li class="dc-ob__art-row"><span>기본급 209시간</span><span class="dc-ob__art-num">2,156,880원</span></li>
<li class="dc-ob__art-row"><span>연장근로 12시간</span><span class="dc-ob__art-num">185,760원</span></li>
<li class="dc-ob__art-row"><span>4대보험 · 소득세</span><span class="dc-ob__art-num">-243,240원</span></li>
</ul>
<p class="dc-ob__art-tag">네팔어로 함께 보기</p>
</div>
<h2 class="dc-ob__title">급여명세서를<br>내 언어로 받습니다</h2>
<p class="dc-ob__body">기본급·연장근로·공제가 한 줄씩 나옵니다. 이번 달 숫자가 왜 이렇게 나왔는지 직접 확인하세요.</p>
</section>
<section class="dc-ob__slide" aria-label="3장 중 2장">
<div class="dc-ob__art dc-ob__art--sign">
<p class="dc-ob__art-label">표준 근로계약서 · 미소식품</p>
<ul class="dc-ob__art-list">
<li class="dc-ob__art-row"><span>근무지</span><span class="dc-ob__art-num">인천 남동구</span></li>
<li class="dc-ob__art-row"><span>시급</span><span class="dc-ob__art-num">10,320원</span></li>
<li class="dc-ob__art-row"><span>계약 기간</span><span class="dc-ob__art-num">26.09.15 ~ 27.09.14</span></li>
</ul>
<p class="dc-ob__art-sign" aria-hidden="true">Bishal K.</p>
<p class="dc-ob__art-tag dc-ob__art-tag--ok">서명 완료 · 사본 보관됨</p>
</div>
<h2 class="dc-ob__title">계약서는 휴대폰으로<br>읽고 서명합니다</h2>
<p class="dc-ob__body">서명한 계약서는 앱에 남습니다. 시급과 근무 시간이 말로 한 것과 다르면 바로 알 수 있습니다.</p>
</section>
<section class="dc-ob__slide" aria-label="3장 중 3장">
<div class="dc-ob__art dc-ob__art--time">
<p class="dc-ob__art-label">이번 주 근무 기록 · 46시간</p>
<ul class="dc-ob__bars">
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill" style="height:80%"></span></span><span class="dc-ob__bar-day">월</span><span class="dc-sr">8시간</span></li>
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill" style="height:90%"></span></span><span class="dc-ob__bar-day">화</span><span class="dc-sr">9시간</span></li>
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill" style="height:80%"></span></span><span class="dc-ob__bar-day">수</span><span class="dc-sr">8시간</span></li>
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill dc-ob__bar-fill--gap" style="height:100%"></span></span><span class="dc-ob__bar-day">목</span><span class="dc-sr">10시간, 연장 2시간 미지급</span></li>
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill" style="height:80%"></span></span><span class="dc-ob__bar-day">금</span><span class="dc-sr">8시간</span></li>
<li class="dc-ob__bar"><span class="dc-ob__bar-track"><span class="dc-ob__bar-fill" style="height:30%"></span></span><span class="dc-ob__bar-day">토</span><span class="dc-sr">3시간</span></li>
</ul>
<p class="dc-ob__art-tag dc-ob__art-tag--warn">목요일 연장 2시간 · 미지급</p>
</div>
<h2 class="dc-ob__title">일한 시간과 받은 돈이<br>다르면 바로 신고합니다</h2>
<p class="dc-ob__body">출퇴근 기록을 앱이 모아 둡니다. 어긋난 날만 골라 상담사에게 보낼 수 있습니다.</p>
</section>
</div>
<footer class="dc-ob__foot">
<p class="dc-ob__step">3장 중 1장</p>
<ol class="dc-ob__dots" aria-hidden="true">
<li class="dc-ob__dot dc-ob__dot--on"></li>
<li class="dc-ob__dot"></li>
<li class="dc-ob__dot"></li>
</ol>
<button class="dc-ob__next" type="button">다음</button>
<p class="dc-ob__alt">이미 계정이 있어요 <a class="dc-ob__link" href="#">로그인</a></p>
</footer>
</div>.dc-ob { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); }
.dc-ob__top { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--dc-2); padding:calc(var(--dc-safe-top) + var(--dc-3)) var(--dc-2) var(--dc-3) var(--dc-4); }
.dc-ob__brand { display:flex; align-items:center; gap:var(--dc-2); font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-ob__mark { display:grid; place-items:center; width:26px; height:26px; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:800; }
.dc-ob__skip { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-text-sub); font-size:14px; font-weight:700; }
.dc-ob__skip:active { background:var(--dc-sunken); }
.dc-ob__track { flex:1 1 auto; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.dc-ob__track::-webkit-scrollbar { display:none; }
.dc-ob__slide { flex:0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column; justify-content:center; gap:var(--dc-5); padding:var(--dc-2) var(--dc-5) var(--dc-4); }
.dc-ob__art { display:flex; flex-direction:column; gap:var(--dc-2); padding:var(--dc-5); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-2); }
.dc-ob__art--pay { border-color:color-mix(in srgb, var(--dc-brand) 32%, var(--dc-line)); }
.dc-ob__art--sign { background:var(--dc-surface); }
.dc-ob__art--time { gap:var(--dc-3); }
.dc-ob__art-label { font-size:12px; font-weight:700; color:var(--dc-text-mute); }
.dc-ob__art-sum { font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--dc-text); }
.dc-ob__art-list { display:flex; flex-direction:column; gap:var(--dc-1); padding-top:var(--dc-2); border-top:1px solid var(--dc-line); }
.dc-ob__art-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); font-size:13px; color:var(--dc-text-sub); }
.dc-ob__art-num { font-family:var(--dc-mono); font-size:13px; font-weight:700; color:var(--dc-text); white-space:nowrap; }
.dc-ob__art-sign { margin-top:var(--dc-2); padding-bottom:var(--dc-1); border-bottom:1px dashed var(--dc-line-bold); font-size:22px; font-style:italic; color:var(--dc-text-sub); }
.dc-ob__art-tag { align-self:flex-start; padding:var(--dc-1) var(--dc-3); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:12px; font-weight:700; }
.dc-ob__art-tag--ok { background:var(--dc-ok-soft); color:var(--dc-ok); }
.dc-ob__art-tag--warn { background:var(--dc-warn-soft); color:var(--dc-warn); }
.dc-ob__bars { display:flex; align-items:flex-end; gap:var(--dc-2); height:96px; }
.dc-ob__bar { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:var(--dc-1); height:100%; }
/* 막대 높이(%)는 이 칸을 기준으로 한다. 요일 글자와 한 칸에 두면
%가 칸 전체를 가리켜 제일 높은 막대가 눌려 버린다. */
.dc-ob__bar-track { flex:1 1 auto; display:flex; align-items:flex-end; width:100%; }
.dc-ob__bar-fill { display:block; width:100%; min-height:8px; border-radius:var(--dc-r-xs); background:color-mix(in srgb, var(--dc-brand) 24%, var(--dc-surface)); border:1px solid color-mix(in srgb, var(--dc-brand) 45%, var(--dc-surface)); }
.dc-ob__bar-fill--gap { background:var(--dc-warn-soft); border-color:var(--dc-warn); }
.dc-ob__bar-day { font-size:11px; font-weight:700; color:var(--dc-text-mute); }
.dc-ob__title { font-size:25px; font-weight:800; line-height:1.32; letter-spacing:-.03em; color:var(--dc-text); }
.dc-ob__body { font-size:15px; line-height:1.6; color:var(--dc-text-sub); }
.dc-ob__foot { flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:var(--dc-3); padding:var(--dc-4) var(--dc-5) calc(var(--dc-safe-bottom) + var(--dc-4)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-ob__step { text-align:center; font-size:12px; font-weight:700; color:var(--dc-text-mute); }
.dc-ob__dots { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); }
.dc-ob__dot { width:8px; height:8px; border-radius:var(--dc-r-full); background:var(--dc-line-bold); transition:width var(--dc-fast), background var(--dc-fast); }
.dc-ob__dot--on { width:22px; background:var(--dc-brand); }
.dc-ob__next { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:800; }
.dc-ob__next:active { background:var(--dc-brand-hi); }
.dc-ob__alt { text-align:center; font-size:13px; color:var(--dc-text-sub); }
.dc-ob__link { display:inline-block; padding:var(--dc-1) var(--dc-1); color:var(--dc-brand-text); font-weight:700; }របៀបប្រើ
- ឈប់នៅបីទំព័រ; ទំព័រទីបួនគួរទៅនៅផ្នែកជំនួយ
- មួយទំព័រមួយគំនិត ហើយចំណងជើងសរសេរជាអ្វីដែលអ្នកប្រើទទួលបាន មិនមែនឈ្មោះមុខងារ
- បង្ហាញប៊ូតុង «រំលង» ពីទំព័រទីមួយ — បង្ខំឱ្យមើលទាំងអស់ធ្វើឱ្យគេលុបកម្មវិធី
- នៅកន្លែងរូបភាព ដាក់បំណែកពិតរបស់កម្មវិធី
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- ចំណុចតូចៗជាការតុបតែង — ដាក់ aria-hidden ហើយប្រាប់ជាអក្សរផង «១ ក្នុង ៣»
- ដាក់ tabindex លើផ្ទាំងរំកិល ដើម្បីឱ្យក្តារចុចក៏ផ្លាស់ទំព័របាន
- ផ្នែកខាងក្រោមត្រូវដាក់ --dc-safe-bottom បើមិនដូច្នោះរបារ home បាំងប៊ូតុង