<div class="dc-lo-screen">
<header class="dc-lo-screen__bar">
<span class="dc-lo-screen__title">신청서 제출</span>
</header>
<div class="dc-lo-screen__body" aria-hidden="true">
<span class="dc-lo-skel"></span>
<span class="dc-lo-skel dc-lo-skel--short"></span>
<span class="dc-lo-skel"></span>
<span class="dc-lo-skel dc-lo-skel--short"></span>
</div>
<div class="dc-lo" role="status" aria-live="assertive">
<div class="dc-lo__box">
<span class="dc-lo__spin" aria-hidden="true"></span>
<p class="dc-lo__msg">제출하는 중이에요<br>창을 닫지 말아 주세요</p>
</div>
</div>
</div>
.dc-lo-screen {
position: relative; overflow: hidden;
min-height: 300px;
background: var(--dc-bg);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
font-family: var(--dc-font);
}
.dc-lo-screen__bar {
position: relative;
display: flex; align-items: center;
min-height: 52px;
padding: var(--dc-3) var(--dc-4);
padding-top: calc(var(--dc-safe-top) + var(--dc-3));
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
}
.dc-lo-screen__title { font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-lo-screen__body {
display: flex; flex-direction: column; gap: var(--dc-4);
padding: var(--dc-5) var(--dc-4);
}
.dc-lo-skel {
display: block; height: 14px;
border-radius: var(--dc-r-xs);
background: var(--dc-sunken);
}
.dc-lo-skel--short { width: 58%; }
.dc-lo {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: var(--dc-6);
padding-bottom: calc(var(--dc-safe-bottom) + var(--dc-6));
background: var(--dc-overlay);
}
.dc-lo__box {
display: flex; flex-direction: column; align-items: center; gap: var(--dc-3);
min-width: 180px; max-width: 260px;
padding: var(--dc-5) var(--dc-5) var(--dc-4);
background: var(--dc-surface);
border-radius: var(--dc-r-lg);
box-shadow: var(--dc-sh-3);
text-align: center;
}
.dc-lo__spin {
width: 32px; height: 32px;
border: 3px solid var(--dc-line);
border-top-color: var(--dc-brand);
border-radius: var(--dc-r-full);
animation: dc-lo-spin .8s linear infinite;
}
@keyframes dc-lo-spin { to { transform: rotate(360deg); } }
.dc-lo__msg { font-size: 14px; line-height: 1.6; color: var(--dc-text); }
.dc-lo__cancel {
min-width: 44px; min-height: 44px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-field);
border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: inherit; font-size: 14px; font-weight: 700;
transition: background var(--dc-fast);
}
.dc-lo__cancel:active { background: var(--dc-sunken); }
.dc-lo-top {
position: absolute; left: 0; right: 0; bottom: -1px;
overflow: hidden;
height: 3px;
background: var(--dc-brand-soft);
}
.dc-lo-top__fill {
display: block; width: 40%; height: 100%;
background: var(--dc-brand);
animation: dc-lo-slide 1.2s ease-in-out infinite;
}
@keyframes dc-lo-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(250%); }
}