/* DDOKD 제작과정 모션 · 범위가 격리된 스타일. 운영 전역 토큰을 변경하지 않음. */
.ddokd-process {
  --dp-ink:#161a1c; --dp-muted:#6f747b; --dp-line:#ebedf3; --dp-yellow:#ffc300;
  --dp-soft:#fff7e1; --dp-surface:#f1f2f6; --dp-success:#16813b;
  color:var(--dp-ink); background:#fff; border:1px solid var(--dp-line); border-radius:14px;
  font-family:var(--sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans CJK KR","Segoe UI",sans-serif);
  width:100%; max-width:600px; position:relative; overflow:hidden; isolation:isolate;
  box-sizing:border-box; text-align:left; -webkit-font-smoothing:antialiased;
}
.ddokd-process *, .ddokd-process *::before, .ddokd-process *::after { box-sizing:border-box; }
.ddokd-process button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ddokd-process button:focus-visible { outline:2px solid #161a1c; outline-offset:-3px; }
.dp-top {display:flex; align-items:center; gap:9px; padding:19px 20px 13px;}
.dp-mark {width:23px;height:23px; display:grid;place-items:center; background:var(--dp-yellow);border-radius:7px; flex:0 0 auto;}
.dp-mark svg {width:14px;height:14px;}
.dp-top-title {font-size:13px;font-weight:750;letter-spacing:-.25px;}
.dp-demo {margin-left:auto;color:#818496;background:#f7f8fa;border:1px solid var(--dp-line);border-radius:5px;padding:3px 6px;font-size:10px;line-height:1.3;letter-spacing:.5px;}
.dp-steps {display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 16px 12px;}
.dp-step {border:0;background:transparent;color:#818496;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 0;border-radius:7px;min-height:37px;font-size:11px!important; font-weight:650!important;white-space:nowrap;transition:background .15s,color .15s;}
.dp-step .dp-num {font-size:10px;font-weight:700;color:#9b9fa5;}
.dp-step[aria-current="step"] {background:var(--dp-soft);color:var(--dp-ink);}
.dp-step[aria-current="step"] .dp-num {color:#927000;}
.dp-step[data-complete="true"] .dp-num {color:var(--dp-success);}
.dp-stage {position:relative;width:100%;aspect-ratio:560/370;overflow:hidden;background:linear-gradient(160deg,#f7f8fb 0%,#f3f4f7 70%,#f9f8f3 100%); border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line);}
.dp-artboard {width:560px;height:370px;position:absolute;top:0;left:0;transform-origin:0 0;overflow:hidden;}
.dp-grid {position:absolute;inset:0;background-image:radial-gradient(#c9cdd2 .7px,transparent .7px);background-size:18px 18px;opacity:.24;mask-image:linear-gradient(to bottom,transparent,#000 50%,transparent);}
.dp-app {position:absolute;left:24px;top:25px;width:512px;height:306px;border:1px solid #e3e6ec;border-radius:11px;background:#fff;box-shadow:0 9px 24px -15px #15191c30;overflow:hidden;}
.dp-app-head {height:43px;border-bottom:1px solid var(--dp-line);display:flex;align-items:center;padding:0 14px;gap:9px;}
.dp-app-head svg {height:15px;width:15px;color:#818496;}
.dp-app-head strong {font-size:12px;font-weight:750;letter-spacing:-.2px;}
.dp-app-head small {font-size:10px;color:#818496;}
.dp-app-status {margin-left:auto;border:1px solid var(--dp-line);border-radius:5px;padding:4px 7px;font-size:10px;color:#6f747b;display:flex;align-items:center;gap:4px;}
.dp-dot {width:5px;height:5px;background:#ffc300;border-radius:50%;}
.dp-sidebar {position:absolute;top:43px;bottom:0;left:0;width:50px;border-right:1px solid var(--dp-line);padding:13px 8px;display:flex;flex-direction:column;gap:11px;align-items:center;background:#fdfdfe;}
.dp-side {display:grid;place-items:center;width:30px;height:30px;border-radius:7px;color:#a9aeb5;}
.dp-side svg {width:16px;height:16px;}
.dp-side.is-active {background:#fff7e1;color:#161a1c;}
.dp-sidebar .dp-side:last-child {margin-top:auto;}
.dp-upload {position:absolute;left:69px;right:19px;top:59px;height:226px;}
.dp-view-title {font-size:14px;font-weight:750;letter-spacing:-.35px;margin:0 0 5px;}
.dp-view-sub {font-size:11px;line-height:1.5;color:#818496;margin:0;}
.dp-drop {height:126px;margin-top:13px;border:1px dashed #c9cdd2;border-radius:8px;background:#fcfcfd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.dp-drop svg {width:25px;height:25px;color:#a9aeb5;}
.dp-drop strong {font-size:12px;font-weight:650;}
.dp-drop small {font-size:10px;color:#818496;}
.dp-upload-foot {display:flex;justify-content:space-between;margin-top:12px;color:#818496;font-size:10px;}
.dp-files {position:absolute;left:18px;right:18px;top:70px;opacity:0;visibility:hidden;}
.dp-file-row {height:39px;border-bottom:1px solid var(--dp-line);display:flex;align-items:center;gap:9px;font-size:11px;}
.dp-file-row:last-child {border:0;}
.dp-file-type {width:24px;height:27px;border:1px solid #ebedf3;border-radius:4px;background:#fff;display:grid;place-items:center;font-size:8px;font-weight:750;}
.dp-file-row strong {font-size:11px;font-weight:650;}
.dp-file-row small {font-size:9px;color:#9b9fa5; margin-left:auto;}
.dp-file-check {color:var(--dp-success);opacity:0;font-size:14px;}
.dp-upload-progress {height:3px;background:#f1f2f6;border-radius:4px;position:absolute;left:18px;right:18px;top:201px;overflow:hidden;opacity:0;}
.dp-upload-progress i {display:block;height:100%;width:100%;background:var(--dp-yellow);transform-origin:left;transform:scaleX(0);}
.dp-drag {position:absolute;left:337px;top:219px;width:154px;height:64px;background:#fff;border:1px solid #e2e5eb;border-radius:9px;box-shadow:0 9px 25px -11px #161a1c3b;padding:11px;display:flex;gap:10px;align-items:center;transform:rotate(-7deg);}
.dp-drag-icon {width:29px;height:33px;background:#fff7e1;border:1px solid #f0d777;border-radius:5px;display:grid;place-items:center;}
.dp-drag-icon svg {width:17px;height:17px;}
.dp-drag strong {font-size:11px;display:block;margin-bottom:4px;}
.dp-drag small {font-size:9px;color:#818496;}
.dp-upload-toast {position:absolute;top:274px;left:148px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #dcebdc;border-radius:7px;box-shadow:0 6px 20px -12px #16813b30;padding:10px 13px;font-size:11px;font-weight:650;opacity:0;visibility:hidden;}
.dp-upload-toast svg {width:15px;height:15px;color:#16813b;}
.dp-design {position:absolute;left:68px;right:18px;top:57px;height:234px;opacity:0;visibility:hidden;}
.dp-design-head {display:flex;align-items:center;justify-content:space-between; margin-bottom:9px;}
.dp-version {font-size:9px;letter-spacing:.4px;color:#818496;border:1px solid var(--dp-line);padding:3px 5px;border-radius:4px;}
.dp-site {height:189px;position:relative;border:1px solid #e2e5eb;border-radius:6px;overflow:hidden;background:#f9fafb;}
.dp-site-nav {height:28px;background:#fff;border-bottom:1px solid #ebedf3;display:flex;align-items:center;justify-content:space-between;padding:0 13px;}
.dp-site-nav strong {font-size:8px;letter-spacing:.4px;}
.dp-site-nav span {font-size:6px;color:#818496;word-spacing:7px;}
.dp-site-body {position:relative;padding:24px 15px;}
.dp-site-eyebrow {font-size:6px;letter-spacing:1.1px;color:#818496;margin-bottom:8px;font-weight:700;}
.dp-site-heading {font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.8px;position:relative;z-index:1;}
.dp-site-desc {font-size:7px;color:#818496;margin-top:9px;}
.dp-site-cta {display:flex;align-items:center;gap:10px;width:105px;height:24px;margin-top:13px;background:#e8eaee;border:1px solid #d7dbe0;border-radius:4px;padding:0 8px;color:#818496;font-size:7px;position:relative;z-index:2;}
.dp-site-cta svg {width:10px;height:10px;margin-left:auto;}
.dp-site-art {position:absolute;width:133px;height:118px;right:13px;top:12px;}
.dp-art-back {position:absolute;background:#eceff2;width:102px;height:90px;left:11px;top:18px;border-radius:9px;transform:rotate(-10deg);}
.dp-art-middle {position:absolute;background:#fff;width:98px;height:89px;left:20px;top:12px;border:1px solid #e3e6ec;border-radius:8px;transform:rotate(7deg);padding:11px;}
.dp-art-line {height:5px;background:#dce0e5;width:40px;border-radius:2px;margin-bottom:5px;}
.dp-art-line.short {width:25px;}
.dp-art-main {width:74px;height:29px;background:#f1f2f6;border-radius:5px;margin-top:9px;}
.dp-art-front {position:absolute;left:6px;top:77px;width:80px;height:37px;background:#161a1c;border-radius:6px;box-shadow:0 5px 11px #161a1c12;display:flex;align-items:center;padding:9px;gap:7px;transform:rotate(-4deg);}
.dp-art-front i {display:block;width:18px;height:18px;border-radius:50%;background:#ffc300;}
.dp-art-front span {width:30px;height:4px;background:#fff;opacity:.8;}
.dp-pin {position:absolute;width:25px;height:25px;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);background:#ffc300;box-shadow:0 2px 10px #161a1c20;left:192px;top:250px;display:grid;place-items:center;opacity:0;visibility:hidden;z-index:4;}
.dp-pin span {transform:rotate(45deg);font-size:11px;font-weight:800;}
.dp-comment {position:absolute;left:270px;top:145px;width:249px;border:1px solid #e4e6eb;border-radius:9px;background:#fff;box-shadow:0 12px 30px -12px #161a1c36;padding:12px 13px;z-index:5;opacity:0;visibility:hidden;}
.dp-comment-person {display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.dp-avatar {height:21px;width:21px;display:grid;place-items:center;background:#f1f2f6;color:#5f6368;border-radius:50%;font-size:9px;font-weight:700;}
.dp-comment-person strong {font-size:11px;}
.dp-comment-person small {font-size:8px;color:#818496;margin-left:auto;}
.dp-comment-text {font-size:12px;line-height:1.6;letter-spacing:-.25px;min-height:38px;}
.dp-comment-tag {margin-top:10px;font-size:9px;color:#6f747b;display:flex;justify-content:space-between;align-items:center;}
.dp-comment-send {background:#ffc300;padding:5px 8px;border-radius:4px;color:#161a1c;font-weight:650;}
.dp-reply {position:absolute;left:216px;top:270px;border:1px solid #e5e7eb;border-radius:7px;background:#fff;box-shadow:0 7px 20px -12px #161a1c30;padding:9px 11px;display:flex;align-items:center;gap:7px;opacity:0;visibility:hidden;z-index:6;font-size:11px;}
.dp-reply b {font-size:10px;background:#fff7e1;padding:4px 5px;border-radius:4px;}
.dp-update-badge {position:absolute;right:32px;top:82px;font-size:10px;font-weight:650;color:#16813b;border:1px solid #d4e9da;background:#fff;border-radius:5px;padding:6px 8px;opacity:0;visibility:hidden;z-index:3;}
.dp-highlight {position:absolute;left:108px;top:268px;width:107px;height:26px;border:1px solid #e4ae00;border-radius:5px;opacity:0;visibility:hidden;}
.dp-approval {position:absolute;left:112px;top:81px;width:337px;padding:19px 21px;background:#fff;border:1px solid #e1e6e3;border-radius:11px;box-shadow:0 12px 40px -17px #161a1c3b;opacity:0;visibility:hidden;z-index:7;}
.dp-approval-icon {height:34px;width:34px;display:grid;place-items:center;border-radius:10px;background:#fff7e1;color:#917000;margin-bottom:13px;}
.dp-approval-icon svg {width:19px;height:19px;}
.dp-approval h3 {font-size:18px;line-height:1.35;letter-spacing:-.6px;margin:0 0 7px;font-weight:800;}
.dp-approval p {font-size:11px;line-height:1.6;color:#818496;margin:0;}
.dp-approval-checks {display:flex;gap:13px;font-size:9px;color:#6f747b;margin:15px 0;}
.dp-approval-checks span {display:flex;align-items:center;gap:3px;}
.dp-approval-checks svg {height:11px;width:11px;color:#16813b;}
.dp-approval-button {height:34px;width:100%;border-radius:5px;background:#ffc300;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:750;gap:7px;}
.dp-approval-button svg {height:13px;width:13px;}
.dp-cursor {position:absolute;left:0;top:0;z-index:10;pointer-events:none; filter:drop-shadow(0 2px 2px #161a1c1c);}
.dp-cursor svg {width:23px;height:28px;display:block;}
.dp-cursor-label {position:absolute;top:23px;left:18px;background:#161a1c;color:#fff;font-size:9px;padding:4px 8px;border-radius:4px;white-space:nowrap;}
.dp-click {height:31px;width:31px;border:1.5px solid #ffc300;position:absolute;left:-9px;top:-7px;border-radius:50%;opacity:0;}
.dp-under-app {position:absolute;top:343px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:#9297a1;}
.dp-under-app svg {height:11px;width:11px;}
.dp-bottom {display:flex;align-items:center;gap:8px;padding:15px 17px 14px;}
.dp-caption {font-size:12px;letter-spacing:-.2px;font-weight:650;flex:1;line-height:1.5;}
.dp-count {font-size:10px;color:#9297a1;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dp-controls {display:flex;gap:2px;}
.dp-control {height:30px;min-width:30px;border:0;border-radius:5px;background:transparent;display:grid;place-items:center;padding:6px;color:#818496;}
.dp-control:hover {background:#f1f2f6;color:#161a1c;}
.dp-control svg {width:14px;height:14px;}
.dp-progress {height:2px;background:#f1f2f6;}
.dp-progress span {display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#ffc300;}
.dp-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:600px) {
 .dp-top{padding:15px 15px 11px}.dp-top-title{font-size:12px}.dp-steps{padding:0 9px 10px;gap:2px}
 .dp-step{min-height:44px;gap:4px;font-size:10px!important}.dp-step .dp-num{font-size:9px}
 .dp-bottom{padding:8px 12px}.dp-caption{font-size:11px}.dp-control{height:44px;min-width:38px}.dp-count{display:none}
}
@media (prefers-reduced-motion:reduce) { .ddokd-process * {transition:none!important;scroll-behavior:auto!important;} }