@charset "UTF-8";
/*
    설정 > 시스템배포 (/config/deploy)

    운영 중인 시스템을 통째로 바꾸는 자리라, 다른 설정 화면보다 경고를 세게 둔다.
    '눌렀더니 뭔가 됐다' 가 아니라 '이게 무슨 일인지 알고 누른다' 가 되게.
*/

.dp-page{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

/* ── 맨 위 경고 ─────────────────────────────────────────── */

.dp-warn{
    margin:0 0 14px; padding:12px 14px;
    border:1px solid #f0c8cc; border-left-width:4px; border-radius:6px;
    background:#fdf4f5; color:#8a2b33; font-size:13px; line-height:1.75;
}
.dp-warn b{ color:#c9313d; }

/* ── 도구줄 ─────────────────────────────────────────────── */

.dp-tool{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.dp-tool__right{ display:flex; align-items:center; gap:8px; }
.dp-total{ font-size:13px; color:#41506a; }
.dp-total b{ color:#0a529d; font-weight:700; }

/* ── 이력 표 ────────────────────────────────────────────── */

.dp-scroll{ max-height:calc(100vh - 360px); }

/* 사유는 여러 줄이라 이 표만 말줄임을 푼다 */
.dp-table td{ white-space:normal; vertical-align:top; }
.dp-table .dp-dt,
.dp-table .dp-took{ white-space:nowrap; }

.dp-reason{ color:#1b2b46; line-height:1.6; }
/* 실패 사유는 사유 아래에 작게 붙인다 */
.dp-msg{
    display:block; margin-top:4px;
    font-style:normal; font-size:12px; color:#8a94a6; line-height:1.55;
}
.dp-war{ font-size:12.5px; color:#41506a; }
.dp-war i{ display:block; font-style:normal; font-size:11px; color:#8a94a6; }
.dp-took{ text-align:right; color:#6b7688; }

.cfg-st.dp-st{
    color:#fff; font-weight:700; padding:2px 9px; border-radius:10px; white-space:nowrap;
}
.dp-st.is-run { background:#a3670a; }   /* 아직 도는 중 */
.dp-st.is-done{ background:#1f7a45; }
.dp-st.is-fail{ background:#c9313d; }
.dp-st.is-back{ background:#5c6b80; }

/* ── 모달 ───────────────────────────────────────────────── */

.dp-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.dp-modal .modal__box{
    position:relative; width:min(660px, calc(100% - 32px)); max-height:92vh;
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}
.dp-modal .modal__body{ overflow-y:auto; }

.dp-ta{ height:110px; padding:10px 12px; resize:vertical; line-height:1.7; }

/* 무슨 일이 벌어지는지 미리 적어 둔다 */
.dp-check{
    margin-top:14px; padding:12px 14px;
    border:1px solid #e3ecf7; border-radius:8px; background:#f6f9fd;
    font-size:12.5px; color:#41506a;
}
.dp-check p{ margin:0 0 6px; }
.dp-check ol{ margin:0; padding-left:20px; line-height:1.85; }
.dp-check b{ color:#1b2b46; }

/* ── 기다리는 화면 ──────────────────────────────────────── */

.dp-wait{ padding:26px 10px; text-align:center; }
.dp-wait h4{ margin:16px 0 8px; font-size:16px; font-weight:700; color:#1b2b46; }
.dp-wait p{ margin:0 0 6px; font-size:13.5px; color:#41506a; line-height:1.7; }
.dp-wait__sub{ font-size:12.5px !important; color:#8a94a6 !important; }
.dp-wait code{
    display:inline-block; margin-top:4px; padding:3px 8px; border-radius:4px;
    background:#f1f4f8; color:#41506a;
    font-family:Consolas, 'Courier New', monospace; font-size:11.5px;
}

.dp-spin{
    width:34px; height:34px; margin:0 auto;
    border:3px solid #e3e8f0; border-top-color:#0a529d; border-radius:50%;
    animation:dp-turn .9s linear infinite;
}
@keyframes dp-turn{ to{ transform:rotate(360deg); } }

/* 움직임을 싫어하는 사람도 있다 */
@media (prefers-reduced-motion: reduce){
    .dp-spin{ animation:none; border-top-color:#0a529d; }
}

/* ── 어디까지 갔나 (빌드 → 전송 → 운영 적용) ───────────
   몇 분이 걸리는 일이라 '도는 중' 만 보여 주면 멈춘 것처럼 느껴진다. */

.dp-steps{
    display:flex; justify-content:center; gap:10px;
    list-style:none; margin:20px 0 0; padding:0;
}
.dp-steps li{
    display:flex; align-items:center; gap:6px;
    padding:6px 14px; border:1px solid #e3e8f0; border-radius:16px;
    background:#fff; font-size:12.5px; color:#a9b2c1;
}
.dp-steps li i{
    width:8px; height:8px; border-radius:50%; background:#dfe5ee;
}
/* 지나온 단계 */
.dp-steps li.is-done{ border-color:#cfe6d8; background:#f3faf5; color:#1f7a45; }
.dp-steps li.is-done i{ background:#1f7a45; }
/* 지금 도는 단계 */
.dp-steps li.is-now{
    border-color:#9dc0ee; background:#eef4fc; color:#0a529d; font-weight:700;
}
.dp-steps li.is-now i{ background:#0a529d; animation:dp-blink 1s ease-in-out infinite; }

@keyframes dp-blink{ 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){
    .dp-steps li.is-now i{ animation:none; }
}

@media (max-width: 1024px){
    .dp-steps{ flex-wrap:wrap; }
    .dp-scroll{ max-height:none; }
    .dp-modal .modal__box{ height:100%; }
}