/* live HTML mockups replacing AI raster illustrations (11/4 12:10) */
.mk-x{--n:#0d2a55;--b:#174e86;--b2:#2f6fb5;--l:#e8eef6;--g:#d5dde8;position:relative;width:100%;container-type:inline-size;font-family:P,'Pretendard',sans-serif;line-height:1.25;word-break:keep-all;user-select:none}
.mk-x *{box-sizing:border-box}
.mk-x .x-fr{position:absolute;background:#fff;border:1px solid #d6dfeb;border-radius:1.4cqw;box-shadow:0 2.2cqw 4.5cqw -1.8cqw rgba(13,42,85,.35);overflow:hidden}
.mk-x .x-tb{height:7%;min-height:0;display:flex;align-items:center;gap:.7cqw;padding:0 2cqw;border-bottom:1px solid #edf1f6;background:#f7f9fc}
.mk-x .x-tb i{width:1cqw;height:1cqw;border-radius:50%;background:#c3ccd8}
.mk-x .x-nv{display:flex;align-items:center;gap:2.6cqw;padding:2.2cqw 3cqw;font-size:1.35cqw;font-weight:600;color:#3b4250}
.mk-x .x-nv .x-lg{font-weight:800;color:var(--n);font-size:1.6cqw;margin-right:auto;letter-spacing:.02em}
.mk-x .x-nv .x-cta{background:var(--n);color:#fff;border-radius:.6cqw;padding:.6cqw 1.4cqw}
.mk-x .x-blk{background:var(--l);border-radius:.8cqw}
/* bld */
.mk-bld{aspect-ratio:1120/661}
.mk-bld .x-f1{left:0;top:6%;width:74%;height:86%}
.mk-bld .x-f2{right:1%;top:13%;width:22%;height:76%;border-radius:2cqw}
.mk-bld .x-hz{position:absolute;left:0;right:0;top:20%;bottom:0;background:linear-gradient(115deg,#f4f7fb 0 42%,transparent 42%),linear-gradient(160deg,#c9d8ea,#8fb0d6 55%,#3d6ea8)}
.mk-bld .x-tw{position:absolute;right:6%;bottom:0;width:30%;height:76%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 12%),repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 7%),linear-gradient(100deg,#2a5d97,#6f99c9 60%,#a9c3e2);clip-path:polygon(18% 0,100% 8%,100% 100%,0 100%)}
.mk-bld .x-tw2{right:30%;width:16%;height:62%;opacity:.8;clip-path:polygon(0 10%,100% 0,100% 100%,0 100%)}
.mk-bld .x-tx{position:absolute;left:5%;top:30%;width:52%;color:#141a26}
.mk-bld .x-tx b{display:block;font-size:3.5cqw;font-weight:800;line-height:1.3}
.mk-bld .x-tx span{display:block;font-size:1.5cqw;color:#4a5568;margin-top:1.6cqw}
.mk-bld .x-tx em{display:inline-block;font-style:normal;font-size:1.4cqw;font-weight:700;border:1.5px solid var(--n);color:var(--n);border-radius:3cqw;padding:.7cqw 1.8cqw;margin-top:2.4cqw}
.mk-bld .x-f2 .x-nv{padding:1.6cqw;font-size:1.2cqw}.mk-bld .x-f2 .x-nv .x-lg{font-size:1.3cqw}
.mk-bld .x-f2 .x-ph{height:38%;margin:0 1.4cqw;border-radius:1cqw;background:linear-gradient(160deg,#c9d8ea,#6f99c9 60%,#2a5d97)}
.mk-bld .x-f2 .x-blk{height:4%;margin:1.4cqw 1.4cqw 0}.mk-bld .x-f2 .x-blk.x-s{width:55%}
/* ba */
.mk-ba{aspect-ratio:1120/303}
.mk-ba .x-col{position:absolute;top:0;bottom:0;width:43%}.mk-ba .x-c1{left:0}.mk-ba .x-c2{right:0}
.mk-ba .x-pl{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-size:1.7cqw;font-weight:800;letter-spacing:.04em;color:#fff;background:#8a93a0;border-radius:3cqw;padding:.9cqw 2.6cqw}
.mk-ba .x-pl small{font-weight:600;opacity:.85;margin-left:1cqw;font-size:1.5cqw}
.mk-ba .x-c2 .x-pl{background:var(--n)}
.mk-ba .x-fr{left:0;right:0;top:22%;bottom:4%}
.mk-ba .x-tb{height:16%}
.mk-ba .x-nv{padding:1.6cqw 2.4cqw;gap:3cqw;font-size:1.45cqw}
.mk-ba .x-c1 .x-nv .x-lg{width:8cqw;height:1.2cqw;background:#dfe4ea;border-radius:1cqw}
.mk-ba .x-c2 .x-nv .x-lg{font-size:1.45cqw}
.mk-ba .x-bd{position:absolute;left:2.4cqw;right:2.4cqw;top:46%;bottom:6%;border-radius:.8cqw}
.mk-ba .x-c1 .x-bd{background:linear-gradient(to top right,transparent calc(50% - 1px),#d5dbe3 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),#d5dbe3 50%,transparent calc(50% + 1px)),#eef1f5}
.mk-ba .x-c2 .x-bd{background:linear-gradient(160deg,#eaf1fa,#d3e1f2)}
.mk-ba .x-c2 .x-bd em{position:absolute;left:2cqw;bottom:2cqw;font-style:normal;font-size:1.4cqw;font-weight:700;background:var(--n);color:#fff;border-radius:.6cqw;padding:.8cqw 1.6cqw}
.mk-ba .x-ar{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);font-size:3cqw;color:var(--n);font-weight:700}
/* dev */
.mk-dev{aspect-ratio:1120/538}
.mk-dev .x-lap{position:absolute;left:8%;top:3%;width:62%;height:84%;background:#1b2433;border-radius:1.6cqw 1.6cqw 0 0;padding:1.2cqw}
.mk-dev .x-lap .x-fr{position:relative;width:100%;height:100%;border-radius:.6cqw;box-shadow:none;border:0}
.mk-dev .x-base{position:absolute;left:2%;width:74%;top:87%;height:3.2%;background:linear-gradient(#cfd6df,#9aa5b3);border-radius:0 0 2cqw 2cqw}
.mk-dev .x-phn{position:absolute;left:61%;top:22%;width:17%;height:74%;background:#1b2433;border-radius:2.6cqw;padding:.9cqw}
.mk-dev .x-phn .x-fr{position:relative;width:100%;height:100%;border-radius:2cqw;box-shadow:none;border:0}
.mk-dev .x-hx{padding:3cqw;font-size:3cqw;font-weight:800;color:#141a26;line-height:1.35}
.mk-dev .x-phn .x-hx{padding:2cqw 1.6cqw;font-size:1.7cqw}
.mk-dev .x-hz{position:absolute;right:0;top:22%;width:46%;bottom:0;background:linear-gradient(160deg,#c9d8ea,#6f99c9 60%,#2a5d97);clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}
.mk-dev .x-phn .x-nv{padding:1.4cqw;font-size:1.1cqw}
.mk-dev .x-phn .x-blk{height:5%;margin:1cqw 1.4cqw 0}
.mk-dev .x-lb{position:absolute;font-size:1.35cqw;font-weight:800;color:#fff;background:var(--b);border-radius:3cqw;padding:.6cqw 1.6cqw;letter-spacing:.06em}
.mk-dev .x-lb.x-l1{left:2%;top:36%}.mk-dev .x-lb.x-l2{left:73%;top:58%}
figure:has(>.mk-x){background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}

@media(max-width:767px){
.mk-ba{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;padding-top:4px}
.mk-ba .x-col{position:relative;width:100%;height:auto;padding-top:22px}
.mk-ba .x-pl{font-size:13px;padding:6px 16px}.mk-ba .x-pl small{font-size:12px}
.mk-ba .x-fr{position:relative;inset:auto;height:150px;border-radius:10px;margin-top:6px}
.mk-ba .x-tb{height:18px;gap:4px;padding:0 10px}.mk-ba .x-tb i{width:6px;height:6px}
.mk-ba .x-nv{font-size:12px;gap:12px;padding:10px 12px}.mk-ba .x-nv .x-lg{width:44px;height:8px}.mk-ba .x-nv .x-cta{padding:3px 8px;border-radius:4px}
.mk-ba .x-bd{left:12px;right:12px;top:62px;bottom:12px;border-radius:6px}
.mk-ba .x-bd em{font-size:12px;left:10px;bottom:10px;padding:6px 10px;border-radius:5px}
.mk-ba .x-ar{position:static;display:block;transform:rotate(90deg);text-align:center;font-size:20px;margin:-4px auto}
}
/* ps PROCESS: full-width track so last card reaches viewport (coder 11/4) */
section.ps .w{max-width:100%}
section.ps .p4{width:max-content;padding-right:20px}
@media(min-width:768px){section.ps .p4{padding-right:116px}}
.mk-ba .x-c1 .x-pl{background:#4b5563}