/* 홈페이지 움직이는 간략 화면 (site/_mocks.html) · 떠 있는 상담 버튼 */
.mk{position:relative;font-size:13px;color:var(--ink)}
.mk .d1,.mk .d2,.mk .d3,.mk .d4,.mk .d5,.mk .d6{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.mk.on .d1,.mk.on .d2,.mk.on .d3,.mk.on .d4,.mk.on .d5,.mk.on .d6{opacity:1;transform:none}
.mk.on .d1{transition-delay:.15s}.mk.on .d2{transition-delay:.4s}.mk.on .d3{transition-delay:.65s}.mk.on .d4{transition-delay:.9s}.mk.on .d5{transition-delay:1.15s}.mk.on .d6{transition-delay:1.6s}
.mk-app{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -26px rgba(11,18,54,.3)}
.mk-top{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:#fafbfd;color:var(--sub)}
.mk-top i{width:9px;height:9px;border-radius:50%;background:#e3e6ee}
.mk-top b{margin-left:8px;color:var(--ink)}
.mk-top span{margin-left:6px}
.mk-body{padding:18px;background:#f6f7fb;min-height:300px;position:relative}
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mk-kpis.three{grid-template-columns:repeat(3,1fr)}
.mk-kpis div{background:#fff;border-radius:10px;padding:12px 14px;border:1px solid var(--line)}
.mk-kpis span{display:block;font-size:11px;color:var(--sub)}
.mk-kpis b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.mk-kpis b.bad{color:#e5484d}
.mk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk-cols.two{grid-template-columns:1fr 1fr}
.mk-card{background:#fff;border-radius:12px;border:1px solid var(--line);padding:14px}
.mk-card h5{display:flex;align-items:center;margin:0 0 10px;font-size:13px}
.mk-card h5 em{margin-left:auto;font-style:normal;font-size:11px;padding:1px 7px;border-radius:9px;background:#fdecec;color:#e5484d}
.mk-card h5 em.g{background:#e8f6ee;color:#16a34a}
.mk-li{display:flex;align-items:center;gap:8px;margin:0;padding:7px 0;border-bottom:1px solid #f2f4f8}
.mk-li i{width:6px;height:6px;border-radius:50%;background:#c3c9d8}
.mk-li i.r{background:#e5484d}
.mk-li b{margin-left:auto;font-size:15px}
/* 노트북 · 휴대폰 */
.mk-hero{position:relative;max-width:1060px;margin:0 auto;padding-right:90px;text-align:left}
.mk-laptop .mk-scr{padding:14px;border-radius:22px 22px 0 0;background:#0b1236}
.mk-laptop .mk-app{border-radius:10px;box-shadow:none}
.mk-laptop .mk-base{height:22px;margin:0 -50px;border-radius:0 0 22px 22px;background:linear-gradient(#dfe3ec,#c7ccd8)}
.mk-phone{position:absolute;right:0;bottom:-40px;width:220px;aspect-ratio:9/19.5;display:flex;flex-direction:column;overflow:hidden;padding:16px 12px 0;border-radius:36px;background:#fff;border:9px solid #0b1236;box-shadow:0 40px 70px -30px rgba(11,18,54,.55)}
.mk-notch{width:70px;height:16px;margin:-10px auto 10px;border-radius:0 0 10px 10px;background:#0b1236}
.mk-ph-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mk-ph-hd span{font-size:11px;color:var(--sub)}
.mk-push{padding:10px 12px;border-radius:12px;background:#0A1345;color:#fff;margin-bottom:8px;opacity:0;transform:translateY(-14px) scale(.96);transition:all .6s cubic-bezier(.2,.9,.2,1.2) .5s}
.mk.on .mk-push{opacity:1;transform:none}
.mk-push b{display:block;font-size:11px;color:var(--yel)}
.mk-push span{display:block;font-size:12px;margin:3px 0 6px}
.mk-push em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:8px;background:var(--yel);color:#0A1345;font-weight:700}
.mk-ph-card{padding:10px 12px;border-radius:12px;background:#f6f7fb;margin-bottom:8px}
.mk-ph-card span{font-size:11px;color:var(--sub)}
.mk-ph-card b{display:block;font-size:17px;margin:2px 0 6px}
.mk-ph-card i,.mk-bar i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#0A1345,#3d5af1);width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1) .8s}
.mk.on .mk-ph-card i,.mk.on .mk-bar i{width:var(--w)}
.mk-bar{margin-top:10px;height:6px;border-radius:3px;background:#eef1f7;overflow:hidden}
.mk-ph-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid #f2f4f8;font-size:12px}
.mk-ph-row em,.mk-row em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:8px;background:#fff4e0;color:#b26b00;font-weight:700}
.mk-ph-row em.ok{background:#e8f6ee;color:#16a34a}
/* 상담 목록 */
.mk-tabs{display:flex;gap:14px;align-items:center;margin-bottom:10px;color:var(--sub)}
.mk-tabs b{color:var(--ink)}
.mk-tabs em{font-style:normal;color:var(--blue)}
.mk-alert{margin-left:auto;padding:3px 10px;border-radius:12px;background:#fdecec;color:#e5484d;font-weight:700}
.mk-alert em{color:#e5484d}
.mk-rows{background:#fff;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.mk-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 90px;align-items:center;padding:11px 14px;border-bottom:1px solid #f2f4f8}
.mk-row:last-child{border-bottom:0}
.mk-row.slide{transform:translateX(-20px)}
.mk-row span{color:var(--sub)}
.mk-row em{justify-self:end;background:#eef1f7;color:var(--sub)}
.mk-row em.new{background:#e9edff;color:#3d5af1}
.mk-row em.warn{background:#fff4e0;color:#b26b00}
.mk-toast{position:absolute;right:18px;bottom:16px;padding:10px 16px;border-radius:10px;background:#0A1345;color:#fff;font-weight:700;box-shadow:0 14px 30px -12px rgba(11,18,54,.5)}
.mk-toast.red{background:#e5484d;opacity:0;transform:translateY(10px);transition:all .5s ease 2.2s}
.mk.on .mk-toast.red{opacity:1;transform:none}
/* 단계 · 체크 */
.mk-steps{display:flex;gap:6px;margin-bottom:12px}
.mk-steps .st{flex:1;text-align:center;padding:8px;border-radius:8px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--sub)}
.mk.on .mk-steps .st{background:#0A1345;color:#fff;border-color:#0A1345}
.mk-ck{display:flex;align-items:center;gap:8px;margin:0;padding:7px 0;border-bottom:1px solid #f2f4f8}
.mk-ck em{margin-left:auto;font-style:normal;font-size:11px;color:#16a34a;font-weight:700}
.mk-ck.ng em{color:#e5484d}
.mk-ck .x{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#e5484d;color:#fff;font-style:normal;font-size:10px;font-weight:800}
.mk-warn{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff4e0;border:1px solid #f7d79b}
.mk-warn b{display:block;color:#b26b00;font-size:12px}
.mk-warn span{font-size:12px}
/* 지도 */
.mk-map{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mk-map svg{display:block;width:100%;height:auto}
.mk-map .mk-zone{opacity:1;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1s cubic-bezier(.2,.9,.2,1.1)}
.mk.on .mk-map .mk-zone{transform:scale(1)}
.mk.on .mk-map .mk-zone.d2{transition-delay:.3s}.mk.on .mk-map .mk-zone.d3{transition-delay:.6s}
.mk-pin{transform:translateY(-120px);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.5,1) 1.4s,opacity .2s 1.4s}
.mk.on .mk-pin{transform:none;opacity:1}
.mk-ping{transform-box:fill-box;transform-origin:center;animation:mkping 1.6s ease-out 2.1s infinite;opacity:0}
@keyframes mkping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.mk-pin2{opacity:0;transition:opacity .4s 1.8s}
.mk.on .mk-pin2{opacity:1}
.mk-chips{position:absolute;left:12px;top:12px;display:flex;gap:6px}
.mk-chips span{padding:4px 10px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--sub)}
.mk-chips span.on{background:#0A1345;color:#fff;border-color:#0A1345}
/* 점검 */
.mk-score{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.mk-score span{color:var(--sub)}
.mk-score b{font-size:30px;font-weight:800;color:#0A1345}
.mk-score small{color:var(--sub)}
.mk-ring{position:relative;width:120px;margin:4px auto 10px}
.mk-ring svg{display:block}
.mk-ring b{position:absolute;left:0;right:0;top:40px;text-align:center;font-size:26px;font-weight:800}
.mk-ring small{position:absolute;left:0;right:0;top:72px;text-align:center;color:var(--sub)}
.mk-arc{stroke-dasharray:302;stroke-dashoffset:302;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .4s}
.mk.on .mk-arc{stroke-dashoffset:calc(302 * (1 - var(--p)))}
.mk-btn{width:100%;margin-top:10px;height:34px;border:0;border-radius:8px;background:#0A1345;color:#fff;font-weight:700;font-family:inherit}
/* 매출 */
.mk-line{width:100%;height:auto}
.mk-line .ln{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s}
.mk.on .mk-line .ln{stroke-dashoffset:0}
.mk-line .ar,.mk-line .dt{opacity:0;transition:opacity .8s 1.4s}
.mk.on .mk-line .ar,.mk.on .mk-line .dt{opacity:1}
.mk-roy{display:grid;grid-template-columns:1fr auto 58px;gap:10px;align-items:center;margin:0;padding:8px 0;border-bottom:1px solid #f2f4f8}
.mk-roy em{position:relative;height:20px;overflow:hidden;font-style:normal}
.mk-roy em i{display:block;height:20px;line-height:20px;text-align:center;border-radius:8px;font-size:11px;font-weight:700;font-style:normal;background:#eef1f7;color:var(--sub);transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.mk-roy em i+i{background:#e8f6ee;color:#16a34a}
.mk.on .mk-roy em i{transform:translateY(-20px)}
.mk.on .mk-roy.d1 em i{transition-delay:1.6s}.mk.on .mk-roy.d2 em i{transition-delay:2s}.mk.on .mk-roy.d3 em i{transition-delay:2.4s}
/* 메뉴 연결 */
.mk-merge{display:grid;grid-template-columns:1fr 120px 1fr;align-items:stretch;min-height:230px}
.mk-pos{display:grid;grid-template-rows:repeat(5,1fr)}
.mk-pos span{align-self:center;padding:8px 12px;border-radius:10px;background:#fff;border:1px dashed #c3c9d8;color:var(--sub);font-weight:600}
.mk-wires{width:120px;height:100%}
.mk .mk-wires .w{opacity:1;transform:none;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s ease}
.mk.on .mk-wires .w{stroke-dashoffset:0}
.mk.on .mk-wires .w.d2{transition-delay:.3s}.mk.on .mk-wires .w.d3{transition-delay:.6s}.mk.on .mk-wires .w.d4{transition-delay:.9s}.mk.on .mk-wires .w.d5{transition-delay:1.2s}
.mk-std{display:grid;grid-template-rows:repeat(3,auto);gap:12px;align-content:center}
.mk-std div{position:relative;padding:12px 14px;border-radius:12px;background:#0A1345;color:#fff}
.mk-std b{display:block;font-size:15px}
.mk-std span{font-size:11px;color:#c9cfee}
.mk-std em{position:absolute;right:12px;top:12px;font-style:normal;font-size:11px;padding:2px 8px;border-radius:8px;background:var(--yel);color:#0A1345;font-weight:800}
/* 사용자별 휴대폰 두 대 */
.mk-phones{display:flex;gap:28px;justify-content:center;align-items:flex-start;justify-self:center}
.roles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.mk-phone2{position:relative;flex:none;width:240px;aspect-ratio:9/19.5;display:flex;flex-direction:column;overflow:hidden;padding:16px 12px 0;border-radius:38px;background:#fff;border:9px solid #0b1236;box-shadow:0 40px 70px -30px rgba(11,18,54,.55)}
.mk-phone2.sv{margin-top:64px}
.mk-tabbar{display:flex;justify-content:space-around;margin:auto -12px 0;padding:10px 0 14px;border-top:1px solid #eef1f7;font-size:10px;color:#9aa3b8;background:#fff}
.mk-tabbar b{color:#0A1345}
.mk-phone2 .mk-score b{font-size:24px}
@media (max-width:960px){.mk-phones{flex-wrap:wrap}.mk-phone2.sv{margin-top:0}}
/* 떠 있는 상담 버튼 (카카오 채널 · 전화) */
.st-float{position:fixed;right:22px;bottom:22px;z-index:60;display:grid;gap:10px}
.st-float a{display:grid;place-items:center;gap:2px;width:64px;height:64px;border-radius:18px;text-decoration:none;font-size:11px;font-weight:800;box-shadow:0 12px 28px -10px rgba(11,18,54,.45);transition:transform .15s ease}
.st-float a:hover{transform:translateY(-2px)}
.st-float .kk{background:#FEE500;color:#191919}
.st-float .tel{background:#fff;color:var(--navy);border:1px solid var(--line)}
@media (max-width:960px){
  .mk-hero{padding-right:0}.mk-phone{display:none}.mk-laptop .mk-base{margin:0 -16px}
  .mk-kpis{grid-template-columns:1fr 1fr}.mk-cols,.mk-cols.two{grid-template-columns:1fr}
  .mk-row{grid-template-columns:1fr 1fr 80px}.mk-row span:nth-child(3){display:none}
  .st-float{right:14px;bottom:14px}.st-float a{width:56px;height:56px}
}