/* 캠페인 화면 공용 꾸밈 (campaigns.html · campaign.html) — 2026-10-30 */

/* ---- mvc-css ---- */

:root{--o:#FF623E;--o2:#E8472A;--o3:#FF8A6B;--os:#FFF1EC;--ink:#1D2026;--ink2:#14161B;--sub:#5B616B;--mute:#9AA0A8;--line:#ECEEF1;--bg:#F5F6F8;--ok:#1F9D6B;--oks:#E8F6F0;--blue:#3B6FE0;--sh:0 1px 2px #0000000a,0 10px 30px -16px #00000022}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);font-size:15px;line-height:1.55;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.ex{display:inline-block;font-size:10.5px;font-weight:700;color:var(--o2);background:var(--os);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle;line-height:1.5}

/* 시안 띠 */
.demo{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:95;background:#14161Bf0;backdrop-filter:blur(10px);color:#fff;font-size:13px;display:flex;gap:4px;align-items:center;padding:6px 6px 6px 14px;border-radius:999px;box-shadow:0 10px 30px #00000040;white-space:nowrap}
.demo b{color:#FFB39E;margin-right:6px}
.demo button{border-radius:999px;padding:6px 13px;color:#ffffffc0;font-weight:600}
.demo button.on{background:var(--o);color:#fff}

/* 틀 */
.top{position:sticky;top:0;z-index:50;height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:18px}
.top img{height:26px}
.top .sp{flex:1}
.cashc{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:999px;padding:5px 5px 5px 14px;font-size:13px;color:var(--sub)}
.cashc b{color:var(--ink)}
.cashc a{background:var(--ink);color:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:12px}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--o3),var(--o2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.shell{display:flex;max-width:1360px;margin:0 auto}
.side{width:232px;flex:none;padding:22px 14px;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}
.newc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--o);color:#fff;font-weight:800;border-radius:14px;padding:13px;box-shadow:0 8px 18px -8px #FF623Eb0;margin-bottom:18px}
.newc:hover{background:var(--o2)}
.side h6{font-size:11.5px;color:var(--mute);font-weight:700;margin:16px 12px 6px;letter-spacing:.02em}
.side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--sub);font-weight:600}
.side a:hover{background:#fff}
.side a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000000d}
.side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.side a.on svg{stroke:var(--o)}
.side a .cnt{margin-left:auto;font-size:11px;background:var(--os);color:var(--o2);border-radius:999px;padding:1px 7px;font-weight:800}
.side .help{margin:20px 4px 0;background:#fff;border-radius:16px;padding:14px;font-size:13px;color:var(--sub)}
.side .help b{display:block;color:var(--ink);margin-bottom:2px}
.side .help a{display:block;margin-top:10px;background:#FEE500;color:#191919;text-align:center;font-weight:800;padding:8px;border-radius:10px}
main{flex:1;min-width:0;padding:28px 30px 110px}
.scr{display:none}.scr.on{display:block;animation:fi .35s ease}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.ph h1{font-size:26px;font-weight:800;letter-spacing:-.025em}
.ph p{color:var(--sub);margin-top:2px;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:11px 18px;font-weight:700;font-size:14px;transition:.15s;white-space:nowrap}
.btn.o{background:var(--o);color:#fff}.btn.o:hover{background:var(--o2)}
.btn.k{background:var(--ink);color:#fff}
.btn.w{background:#fff;border:1px solid var(--line)}
.btn.l{background:var(--bg)}
.btn[disabled]{background:#E3E5E8!important;color:var(--mute)!important;cursor:not-allowed;box-shadow:none}
.card{background:#fff;border-radius:20px;box-shadow:var(--sh)}

/* ===== 목록 ===== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--sh)}
.kpi p{font-size:13px;color:var(--sub);font-weight:600;display:flex;justify-content:space-between}
.kpi b{display:block;font-size:28px;font-weight:800;letter-spacing:-.025em;margin-top:4px}
.kpi b small{font-size:14px;margin-left:2px}
.kpi.hl{background:var(--ink2);color:#fff}.kpi.hl p{color:#ffffffa0}
.kpi .tg{font-size:11px;font-weight:800;color:var(--o2)}
.lhd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ftab{display:flex;gap:4px;background:var(--bg);border-radius:12px;padding:4px}
.ftab button{padding:7px 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--sub)}
.ftab button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #00000014}
.ftab button i{font-style:normal;color:var(--mute);margin-left:4px;font-weight:600}
.lhd .srch{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px;color:var(--mute);min-width:200px}
.ct{width:100%;border-collapse:collapse}
.ct th{font-size:12px;color:var(--mute);font-weight:600;text-align:left;padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.ct td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
.ct tr:last-child td{border:0}
.ct tbody tr{cursor:pointer;transition:.12s}
.ct tbody tr:hover{background:#FCFCFD}
.cn{display:flex;gap:12px;align-items:center}
.gi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--os)}
.gi.b{background:#EEF3FD}.gi.d{background:#FFF4E5}
.cn b{display:block;font-size:14.5px}
.cn small{color:var(--mute);font-size:12.5px}
.sd{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.sd:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.sd.run{background:var(--os);color:var(--o2)}
.sd.run:before{animation:pl 1.6s infinite}
@keyframes pl{50%{opacity:.25}}
.sd.end{background:#F1F2F4;color:var(--sub)}
.sd.soon{background:#FFF4E5;color:#C46A00}
.sd.chk{background:#EEF3FD;color:var(--blue)}
.pg{min-width:150px}
.pg .t{display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}
.pg .t b{color:var(--ink);font-weight:700}
.pg i{display:block;height:5px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.pg i u{display:block;height:100%;background:var(--o);border-radius:3px}
.res{display:flex;align-items:center;gap:10px}
.res svg{width:64px;height:26px;flex:none}
.res b{font-weight:800;white-space:nowrap}
.res b em{font-style:normal;color:var(--o2)}
.res .na{color:var(--mute);font-size:13px}
.act{display:flex;gap:6px;justify-content:flex-end}
.mini{font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:#fff;white-space:nowrap}
.mini.o{border-color:#FFC9B8;color:var(--o2);background:#FFF8F5}
.lnote{font-size:12.5px;color:var(--mute);padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}

/* ===== 만들기 ===== */
.wz{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.steps{display:flex;gap:6px;margin-bottom:18px}
.stp{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh);font-size:13.5px;font-weight:700;color:var(--mute);text-align:left}
.stp i{font-style:normal;width:24px;height:24px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:12px;flex:none}
.stp.on{color:var(--ink);box-shadow:0 0 0 2px var(--o),var(--sh)}
.stp.on i{background:var(--o);color:#fff}
.stp.dn{color:var(--sub)}
.stp.dn i{background:var(--ink);color:#fff}
.pane{display:none;padding:28px}
.pane.on{display:block;animation:fi .3s ease}
.pane h2{font-size:21px;font-weight:800;letter-spacing:-.02em}
.pane .d{color:var(--sub);font-size:14px;margin-top:4px}
.goals{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.goal{text-align:left;border:1.5px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:14px;transition:.15s;position:relative}
.goal:hover{border-color:#FFC9B8}
.goal .gi{width:48px;height:48px;font-size:22px;border-radius:14px}
.goal b{display:block;font-size:16px}
.goal small{display:block;color:var(--sub);font-size:13px;margin-top:2px}
.goal em{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-top:8px}
.goal.on{border-color:var(--o);background:#FFF9F6;box-shadow:0 0 0 4px #FF623E14}
.goal .rk{position:absolute;top:-9px;right:14px;background:var(--o);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px}
.fld{margin-top:24px}
.fld>label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:10px}
.fld>label small{font-weight:500;color:var(--mute);font-size:12.5px}
.stores{display:flex;gap:8px;flex-wrap:wrap}
.so{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;text-align:left}
.so i{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--sub);font-size:14px}
.so b{display:block;font-size:14px}
.so small{font-size:12px;color:var(--mute)}
.so.on{border-color:var(--o);background:#FFF9F6}
.so.on i{background:var(--o);color:#fff}
.so.add{border-style:dashed;color:var(--sub);font-weight:600}
.kws{display:grid;gap:8px}
.kw{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;text-align:left}
.kw .rd{width:20px;height:20px;border-radius:50%;border:1.5px solid #CFD3D9}
.kw.on{border-color:var(--o);background:#FFF9F6}
.kw.on .rd{border:6px solid var(--o)}
.kw b{font-size:14.5px}
.kw .tg{font-size:11px;font-weight:800;color:var(--o2);background:var(--os);border-radius:6px;padding:1px 6px;margin-left:6px}
.kw .now{font-size:13px;color:var(--sub);text-align:right}
.kw .now b{color:var(--ink);font-size:15px}
.kwin{display:flex;gap:8px;margin-top:8px}
.kwin input{flex:1;border:1.5px dashed var(--line);border-radius:14px;padding:12px 16px;background:#fff}
.kwin input:focus{outline:none;border-color:var(--o);border-style:solid}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ti{border:1.5px solid var(--line);border-radius:16px;padding:14px;text-align:left}
.ti b{font-size:14px;display:block}
.ti .lv{display:flex;gap:3px;margin:8px 0}
.ti .lv i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.ti .lv i.f{background:var(--o)}
.ti small{font-size:12px;color:var(--sub);display:block;line-height:1.45}
.ti em{font-style:normal;display:block;margin-top:8px;font-weight:800}
.ti em small{display:inline;color:var(--mute);font-weight:500}
.ti.on{border-color:var(--o);background:#FFF9F6;box-shadow:0 0 0 4px #FF623E14}
.mode{display:inline-flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px}
.mode button{padding:8px 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--sub)}
.mode button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #00000014}
.bud{margin-top:14px;background:var(--bg);border-radius:18px;padding:20px}
.bud .big{display:flex;align-items:baseline;gap:8px}
.bud .big b{font-size:36px;font-weight:800;letter-spacing:-.03em}
.bud .big span{color:var(--sub);font-size:14px}
.bud .eq{margin-left:auto;font-size:14px;color:var(--sub);text-align:right}
.bud .eq b{display:block;color:var(--o2);font-size:18px}
.rng{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--o) var(--p,0%),#DDE0E4 var(--p,0%));margin-top:16px;outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--o);box-shadow:0 2px 8px #E8472A50;cursor:pointer}
.rng::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--o)}
.ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-top:6px}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.days button{border:1.5px solid var(--line);border-radius:14px;padding:12px 0;font-weight:800;text-align:center}
.days button small{display:block;font-weight:500;color:var(--mute);font-size:11.5px}
.days button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.days button.on small{color:#ffffffa0}
.when{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:14px;padding:12px 16px;font-size:14px;margin-top:10px}
.when b{font-weight:800}
.when small{margin-left:auto;color:var(--mute);font-size:12px}
.rv{border:1px solid var(--line);border-radius:18px;margin-top:20px;overflow:hidden}
.rv .r{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px}
.rv .r:last-child{border:0}
.rv .r span{color:var(--sub)}
.rv .r b{text-align:right}
.rv .r a{font-size:12px;color:var(--o2);font-weight:700;margin-left:8px}
.warn{display:flex;gap:12px;background:#FFF8F5;border:1.5px solid #FFD0C2;border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13.5px;color:var(--sub)}
.warn i{font-style:normal;width:24px;height:24px;border-radius:8px;background:var(--o);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:13px}
.warn b{color:var(--o2)}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;font-weight:600}
.agree input{width:18px;height:18px;accent-color:var(--o);margin-top:2px;flex:none}
.nav2{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-top:1px solid var(--line)}
.nav2 .btn{padding:12px 22px}
.nav2 small{color:var(--mute);font-size:12.5px}

.pv{position:sticky;top:88px;overflow:hidden}
.pv .hd{background:var(--ink2);color:#fff;padding:18px 20px;position:relative;overflow:hidden}
.pv .hd:after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(#FF623E55,transparent 70%);right:-60px;top:-90px}
.pv .hd small{color:#ffffff90;font-size:12px;font-weight:600}
.pv .hd b{display:block;font-size:17px;margin-top:2px;position:relative;z-index:1}
.pv .hd .sd{margin-top:8px;background:#ffffff1a;color:#fff}
.pv .bd{padding:6px 20px 4px}
.pv .r{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.pv .r span{color:var(--sub);flex:none}
.pv .r b{text-align:right;font-weight:700}
.pv .r b.e{color:#C9CDD3;font-weight:500}
.pv .tt{padding:16px 20px;background:var(--bg);display:flex;justify-content:space-between;align-items:baseline}
.pv .tt span{font-weight:700;font-size:14px}
.pv .tt b{font-size:26px;font-weight:800;color:var(--o2);letter-spacing:-.025em}
.pv .cs{padding:14px 20px 18px;font-size:13px;color:var(--sub)}
.pv .cs .r2{display:flex;justify-content:space-between;padding:2px 0}
.pv .cs .r2 b{color:var(--ink)}
.short{margin-top:8px;border-radius:12px;padding:10px 12px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--os);color:var(--o2);font-weight:600}
.short a{background:var(--o);color:#fff;border-radius:8px;padding:5px 10px;font-weight:800;white-space:nowrap}
.short.ok{background:var(--oks);color:var(--ok)}

/* ===== 결과 ===== */
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);font-weight:600;margin-bottom:12px}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.dh h1{font-size:26px;font-weight:800;letter-spacing:-.025em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dh p{color:var(--sub);font-size:14px;margin-top:4px}
.dh .bts{display:flex;gap:8px;flex:none}
.dk4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dk{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--sh)}
.dk p{font-size:13px;color:var(--sub);font-weight:600}
.dk b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.dk b small{font-size:15px;margin-left:2px}
.dk em{font-style:normal;font-size:12.5px;color:var(--mute)}
.dk.hl{background:linear-gradient(140deg,#FF7A55,#E8472A);color:#fff}
.dk.hl p,.dk.hl em{color:#ffffffd0}
.dg2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:18px}
.chc{padding:22px}
.chc .h{display:flex;justify-content:space-between;align-items:center}
.chc .h b{font-size:16px}
.lg{display:flex;gap:14px;font-size:12px;color:var(--sub)}
.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.chart{position:relative;margin-top:14px}
.chart svg{width:100%;height:260px;display:block}
.yl{position:absolute;left:0;top:0;bottom:22px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--mute)}
.xl{position:relative;height:18px;font-size:11px;color:var(--mute);margin-top:4px}.xl span{position:absolute;transform:translateX(-50%);white-space:nowrap}.xl span.hl{color:var(--o2);font-weight:700}
.tip{position:absolute;pointer-events:none;background:var(--ink2);color:#fff;border-radius:10px;padding:7px 10px;font-size:12px;transform:translate(-50%,-120%);white-space:nowrap;opacity:0;transition:opacity .12s}
.tip b{font-size:14px}
.set{padding:22px}
.set h3{font-size:16px;font-weight:800;margin-bottom:8px}
.set .r{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.set .r:last-of-type{border:0}
.set .r span{color:var(--sub)}
.set .r b{font-weight:700}
.info{display:flex;gap:10px;background:var(--bg);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--sub);margin-top:12px}
.info i{font-style:normal;font-weight:800;color:var(--blue)}
.dtb{margin-top:18px}
.dtb .hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.dtb .hd b{font-size:16px}
.dtb table{width:100%;border-collapse:collapse}
.dtb th{font-size:12px;color:var(--mute);font-weight:600;text-align:left;padding:10px 22px;border-bottom:1px solid var(--line)}
.dtb td{padding:12px 22px;border-bottom:1px solid var(--line);font-size:14px}
.dtb tr:last-child td{border:0}
.chg{font-size:12px;font-weight:800}
.chg.u{color:var(--o2)}.chg.d{color:var(--blue)}.chg.z{color:var(--mute)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--o);margin-right:6px}
.dot.off{background:#D5D8DD}

.toast{position:fixed;top:80px;left:50%;transform:translate(-50%,-20px);background:var(--ink2);color:#fff;border-radius:14px;padding:12px 18px;font-weight:700;font-size:14px;z-index:99;opacity:0;transition:.3s;pointer-events:none;display:flex;gap:10px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center;font-size:12px}
.mbar,.tabbar{display:none}

@media (max-width:1100px){
 .side{display:none}
 .wz{grid-template-columns:1fr}
 .pv{position:static}
 .dg2{grid-template-columns:1fr}
}
@media (max-width:760px){
 .top{padding:0 16px;height:58px}
 .top img{height:22px}
 .cashc span{display:none}
 main{padding:18px 14px 150px}
 .ph h1,.dh h1{font-size:21px}
 .ph .btn{display:none}
 .kpis,.dk4{grid-template-columns:1fr 1fr;gap:10px}
 .kpi,.dk{padding:14px}
 .kpi b,.dk b{font-size:22px}
 .lhd{flex-wrap:wrap;padding:12px}
 .ftab{overflow-x:auto;max-width:100%}
 .ftab button{white-space:nowrap;padding:7px 10px}
 .lhd .srch{display:none}
 .ct thead{display:none}
 .ct tr{display:grid;grid-template-columns:1fr auto;gap:10px 8px;padding:14px;border-bottom:1px solid var(--line)}
 .ct td{padding:0;border:0}
 .ct td.c1{grid-column:1/-1}
 .ct td.c2{grid-column:1/-1;order:-1}
 .ct td.c4{display:none}
 .ct td.c6{grid-column:1/-1}
 .act{justify-content:stretch}.act .mini{flex:1;text-align:center;padding:9px}
 .steps{gap:4px}
 .stp{padding:10px 8px;font-size:12px;flex-direction:column;gap:4px}
 .stp span{display:none}
 .stp.on span{display:block}
 .pane{padding:20px 16px}
 .goals{grid-template-columns:1fr}
 .tiers{grid-template-columns:1fr}
 .ti{display:grid;grid-template-columns:1fr auto;gap:0 10px}
 .ti .lv{grid-column:1;width:90px}
 .ti em{grid-row:1/4;grid-column:2;align-self:center;margin:0}
 .bud{padding:16px}
 .bud .big b{font-size:28px}
 .nav2{display:none}
 .mbar{display:none;position:fixed;left:0;right:0;bottom:62px;z-index:60;background:#fff;border-top:1px solid var(--line);padding:10px 14px;gap:10px;align-items:center;box-shadow:0 -6px 20px -10px #0000002a}
 .mbar .t{flex:1;font-size:12px;color:var(--sub)}
 .mbar .t b{display:block;font-size:18px;color:var(--o2);font-weight:800}
 .mbar .btn{padding:12px 18px}
 .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:61;background:#fff;border-top:1px solid var(--line);height:62px}
 .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--mute);gap:3px;font-weight:700}
 .tabbar a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
 .tabbar a.on{color:var(--ink)}.tabbar a.on svg{stroke:var(--o)}
 .tabbar a.plus span{width:40px;height:40px;border-radius:14px;background:var(--o);display:grid;place-items:center;margin-top:-18px;box-shadow:0 8px 16px -6px #FF623Eb0}
 .tabbar a.plus svg{stroke:#fff}
 .dh{flex-direction:column}
 .dh .bts{width:100%}.dh .bts .btn{flex:1}
 .chart svg{height:200px}
 .dtb th:nth-child(3),.dtb td:nth-child(3){display:none}
 .dtb th,.dtb td{padding-left:14px;padding-right:14px}
 .demo{bottom:132px;font-size:12px}
 .demo b{display:none}
}



/* ---- mvc2-css ---- */

.bellw{position:relative}
.bell{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;position:relative}
.bell:hover{background:var(--bg)}
.bell svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9}
.bell i{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--o);border:2px solid #fff}
.noti{position:absolute;right:0;top:46px;width:340px;background:#fff;border-radius:18px;box-shadow:0 20px 50px -16px #00000040;border:1px solid var(--line);display:none;overflow:hidden;z-index:70}
.noti.on{display:block;animation:fi .2s ease}
.noti h5{font-size:14px;padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.noti h5 a{font-size:12px;color:var(--mute);font-weight:600}
.noti .it{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.noti .it:hover{background:#FCFCFD}
.noti .it:last-child{border:0}
.noti .it .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:15px;background:var(--os)}
.noti .it b{display:block;font-size:13.5px}
.noti .it small{color:var(--mute);font-size:12px}
.noti .it.new b:after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--o);margin-left:6px;vertical-align:middle}
.demo .lg{border-left:1px solid #ffffff26;margin-left:4px;padding-left:10px;font-size:12px;color:#ffffffa0;display:flex;align-items:center;gap:6px;cursor:pointer}
.demo .lg u{text-decoration:none;background:#ffffff1a;border-radius:999px;padding:4px 10px;color:#fff;font-weight:700}
.demo .lg u.off{background:#3B6FE0}
.from{display:none;align-items:center;gap:14px;background:linear-gradient(90deg,#14161B,#2A2E36);color:#fff;border-radius:18px;padding:14px 18px;margin-bottom:16px;position:relative;overflow:hidden}
.from.on{display:flex;animation:fi .4s ease}
.from:after{content:'';position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(#FF623E66,transparent 70%)}
.from .lo{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none}
.from .lo img{height:16px}
.from p{font-size:13.5px;color:#ffffffb0}
.from b{color:#fff}
.from a{margin-left:auto;font-size:12.5px;font-weight:700;color:#FFB39E;white-space:nowrap;position:relative;z-index:1}
.sd.pay{background:#EEF3FD;color:var(--blue)}
.mdl{position:fixed;inset:0;z-index:120;background:#14161B80;backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.mdl.on{display:flex;animation:fi .2s ease}
.sheet{background:#fff;border-radius:24px;width:100%;max-width:440px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px #00000060}
.sheet .hd{padding:22px 24px 6px;display:flex;justify-content:space-between;align-items:flex-start}
.sheet .hd h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.sheet .hd p{font-size:13.5px;color:var(--sub);margin-top:4px}
.sheet .x{width:32px;height:32px;border-radius:10px;background:var(--bg);font-size:18px;color:var(--sub);flex:none}
.sheet .bd{padding:14px 24px 24px}
.lgb{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:14px;padding:14px;font-weight:800;margin-top:8px;font-size:15px}
.lgb.k{background:#FEE500;color:#191919}
.lgb.g{background:#fff;border:1.5px solid var(--line)}
.lgb.p{background:var(--ink);color:#fff}
.keep{display:flex;gap:10px;background:var(--os);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--o2);font-weight:600;margin-bottom:6px}
.payamt{background:var(--bg);border-radius:18px;padding:18px;text-align:center}
.payamt small{font-size:13px;color:var(--sub)}
.payamt b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--o2)}
.chips2{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.chips2 button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}
.chips2 button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.acct{border:1px solid var(--line);border-radius:16px;margin-top:14px}
.acct .r{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.acct .r:last-child{border:0}
.acct .r span{color:var(--sub)}
.acct input{border:1.5px solid var(--line);border-radius:10px;padding:7px 10px;width:150px;text-align:right}
.acct input:focus{outline:none;border-color:var(--o)}
.steps3{list-style:none;margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--sub)}
.steps3 li{display:flex;gap:10px}
.steps3 li b{width:20px;height:20px;border-radius:50%;background:var(--os);color:var(--o2);font-size:11px;display:grid;place-items:center;flex:none}
.sinp{display:flex;align-items:center;gap:10px;border:1.5px solid var(--o);border-radius:14px;padding:12px 14px;box-shadow:0 0 0 4px #FF623E14}
.sinp input{flex:1;border:0;font-size:15px}
.sinp input:focus{outline:none}
.slist{margin-top:10px}
.slist button{display:flex;width:100%;text-align:left;gap:12px;align-items:center;padding:12px 10px;border-radius:12px}
.slist button:hover{background:var(--bg)}
.slist i{width:38px;height:38px;border-radius:11px;background:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--sub);flex:none}
.slist b{display:block;font-size:14.5px}
.slist small{color:var(--mute);font-size:12.5px}
.slist em{font-style:normal;margin-left:auto;font-size:12px;font-weight:700;color:var(--o2)}
.kw .now .ld{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #E3E5E8;border-top-color:var(--o);animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
/* 블로그 결과 */
.track{padding:26px}
.track .bar{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:10px}
.track .bar:before{content:'';position:absolute;left:10%;right:10%;top:19px;height:3px;background:var(--line);border-radius:2px}
.track .bar:after{content:'';position:absolute;left:10%;top:19px;height:3px;background:var(--o);border-radius:2px;width:var(--w,20%)}
.track .s{text-align:center;position:relative;z-index:1}
.track .s i{font-style:normal;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;margin:0 auto;font-weight:800;color:var(--mute);font-size:14px}
.track .s.d i{background:var(--o);border-color:var(--o);color:#fff}
.track .s.n i{border-color:var(--o);color:var(--o2);box-shadow:0 0 0 6px #FF623E1f}
.track .s b{display:block;margin-top:10px;font-size:14px}
.track .s small{display:block;font-size:12px;color:var(--mute)}
.track .s.n b{color:var(--o2)}
.bls{width:100%;border-collapse:collapse}
.bls th{font-size:12px;color:var(--mute);font-weight:600;text-align:left;padding:10px 22px;border-bottom:1px solid var(--line)}
.bls td{padding:14px 22px;border-bottom:1px solid var(--line);font-size:14px}
.bls tr:last-child td{border:0}
.bav{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg);font-size:12px;font-weight:800;color:var(--sub);margin-right:10px;vertical-align:middle}
@media (max-width:760px){
 .noti{position:fixed;left:12px;right:12px;width:auto;top:64px}
 .mdl{align-items:flex-end;padding:0}
 .sheet{border-radius:24px 24px 0 0;max-width:none}
 .from a{display:none}
 .track{padding:18px 12px}
 .track .s b{font-size:12px}.track .s small{display:none}
 .track .s i{width:32px;height:32px;font-size:12px}
 .track .bar:before,.track .bar:after{top:15px}
 .bls th:nth-child(3),.bls td:nth-child(3){display:none}
 .bls th,.bls td{padding-left:14px;padding-right:14px}
 .demo .lg span{display:none}
}



/* ---- mvc3-css ---- */

/* ===== v3 고급 마감: 색 체계 유지, 틀·아이콘·선·여백만 ===== */
:root{--ink2:#121418;--bg:#F6F6F7;--line:#E9EAEE;--sub:#636975;--mute:#9EA3AC;
 --bd:0 0 0 1px #E6E7EB;--sh:0 0 0 1px #E6E7EB,0 1px 2px #1018280a,0 8px 24px -18px #10182833}
body{font-size:14.5px;letter-spacing:-.006em;background:var(--bg)}
.ic2{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
/* 위쪽 바 */
.top{background:var(--ink2);border-bottom:1px solid #ffffff10;height:60px;padding:0 20px}
.top .sp{flex:1}
.cashc{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff14;color:#ffffff99}
.cashc b{color:#fff}
.cashc a{background:var(--o);color:#fff}
.bell:hover{background:#ffffff10}
.bell svg{stroke:#ffffffcc}
.bell i{border-color:var(--ink2)}
.av{width:32px;height:32px;font-size:12px;box-shadow:0 0 0 2px var(--ink2),0 0 0 3px #ffffff30}
/* 틀 */
.shell{max-width:none}
.side{background:var(--ink2);top:60px;height:calc(100vh - 60px);padding:18px 14px;width:236px;border-right:1px solid #ffffff0a}
.newc{border-radius:12px;padding:12px;font-size:14px;background:linear-gradient(180deg,#FF7454,#F2532D);box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -8px #FF623Ea0}
.side h6{color:#ffffff52;font-size:11px;letter-spacing:.06em;margin:20px 12px 6px}
.side a{color:#ffffffa6;font-weight:500;border-radius:10px;padding:9px 12px;position:relative}
.side a:hover{background:#ffffff0a;color:#fff}
.side a.on{background:#ffffff12;color:#fff;box-shadow:none;font-weight:700}
.side a.on:before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--o)}
.side a svg{stroke-width:1.7}
.side a .cnt{background:#FF623E2e;color:#FFB39E}
.side .help{background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff12;color:#ffffff80}
.side .help b{color:#fff}
.side .help a{background:#FEE500;color:#191919;padding:8px;border-radius:10px;font-weight:800}
.side .help a:before{display:none}
main{padding:32px 40px 120px}
main>section{max-width:1180px;margin:0 auto}
.ph{margin-bottom:24px}
.ph h1,.dh h1{font-size:28px;font-weight:750;letter-spacing:-.035em}
.ph p,.dh p{color:var(--sub);font-size:14px;margin-top:4px}
/* 단추 */
.btn{border-radius:11px;font-weight:700;letter-spacing:-.01em}
.btn.o{background:linear-gradient(180deg,#FF7454,#F2532D);box-shadow:inset 0 1px 0 #ffffff40,0 1px 2px #E8472A40,0 8px 18px -10px #E8472Ab0}
.btn.o:hover{background:linear-gradient(180deg,#FF6A47,#E8472A)}
.btn.w{background:#fff;border:0;box-shadow:var(--bd),0 1px 2px #1018280d}
.btn.w:hover{box-shadow:0 0 0 1px #D5D7DD,0 1px 2px #1018280d}
/* 카드 */
.card{border-radius:18px;box-shadow:var(--sh)}
.kpi,.dk{border-radius:16px;box-shadow:var(--sh);padding:20px 22px}
.kpi p,.dk p{font-size:12.5px;font-weight:600;color:var(--sub)}
.kpi b,.dk b{font-size:30px;font-weight:750;letter-spacing:-.04em;margin-top:8px}
.kpi b small,.dk b small{font-size:14px;font-weight:600;color:var(--mute);margin-left:3px}
.kpi.hl{background:radial-gradient(120% 140% at 100% 0%,#FF623E33,transparent 55%),var(--ink2);box-shadow:none}
.kpi.hl b small{color:#ffffff70}
.dk.hl{background:radial-gradient(120% 140% at 100% 0%,#ffffff2e,transparent 55%),linear-gradient(140deg,#FF7A55,#E8472A);box-shadow:0 10px 24px -14px #E8472A}
.dk.hl b small{color:#ffffffb0}
.dk em{font-size:12px}
/* 상태 표시 */
.sd{font-size:12px;font-weight:650;padding:3px 9px 3px 8px;box-shadow:inset 0 0 0 1px currentColor;background:transparent!important}
.sd.run{color:#E8472A;box-shadow:inset 0 0 0 1px #FFCFC0;background:#FFF6F3!important}
.sd.soon{color:#B86400;box-shadow:inset 0 0 0 1px #F6DDB6;background:#FFF9EF!important}
.sd.chk,.sd.pay{color:#3460C8;box-shadow:inset 0 0 0 1px #D5E1F8;background:#F5F8FE!important}
.sd.end{color:var(--sub);box-shadow:inset 0 0 0 1px #E3E5E9;background:#F8F8F9!important}
.pv .hd .sd{color:#fff;box-shadow:inset 0 0 0 1px #ffffff30;background:#ffffff10!important}
/* 아이콘 칸 */
.gi{width:40px;height:40px;border-radius:12px;background:#FFF4F0;color:var(--o2);box-shadow:inset 0 0 0 1px #FFE0D6}
.gi.b{background:#F3F6FE;color:#3460C8;box-shadow:inset 0 0 0 1px #DCE5FA}
.gi.d{background:#FFF8EE;color:#C46A00;box-shadow:inset 0 0 0 1px #F7E2C2}
.goal .gi{width:46px;height:46px;border-radius:13px}
.goal .gi .ic2{width:22px;height:22px}
/* 목록 표 */
.lhd{padding:14px 18px}
.ftab{background:#F2F3F5;border-radius:11px}
.ftab button{border-radius:8px;font-weight:650}
.ftab button.on{box-shadow:0 0 0 1px #E3E5E9,0 1px 2px #1018280f}
.lhd .srch{border:0;box-shadow:var(--bd);border-radius:10px;gap:8px}
.lhd .srch .ic2{width:16px;height:16px}
.ct th{font-size:11.5px;letter-spacing:.03em;color:var(--mute);background:#FAFAFB;padding:11px 20px}
.ct td{padding:18px 20px}
.ct tbody tr:hover{background:#FBFBFC}
.cn b{font-weight:700;letter-spacing:-.02em}
.pg i{height:4px;background:#EEEFF2}
.pg i u{background:linear-gradient(90deg,#FF8A6B,#E8472A)}
.mini{border:0;box-shadow:var(--bd);border-radius:9px;font-weight:650}
.mini:hover{box-shadow:0 0 0 1px #D5D7DD}
.mini.o{box-shadow:inset 0 0 0 1px #FFCFC0;background:#FFF6F3}
.lnote{background:#FAFAFB;border-radius:0 0 18px 18px}
/* 만들기 */
.stp{box-shadow:var(--bd);border-radius:12px;font-weight:650}
.stp.on{box-shadow:0 0 0 1.5px var(--o),0 6px 16px -10px #E8472A80}
.stp.on i{background:linear-gradient(180deg,#FF7454,#F2532D)}
.pane{padding:32px}
.pane h2{font-size:22px;font-weight:750;letter-spacing:-.03em}
.goal,.so,.kw,.ti,.days button{border:0;box-shadow:inset 0 0 0 1px #E3E5E9;transition:box-shadow .15s,background .15s}
.goal:hover,.so:hover,.kw:hover,.ti:hover{box-shadow:inset 0 0 0 1px #FFC4B3}
.goal.on,.so.on,.kw.on,.ti.on{box-shadow:inset 0 0 0 1.5px var(--o),0 0 0 4px #FF623E12;background:#FFFAF8}
.days button.on{box-shadow:none;background:var(--ink2)}
.so.add{box-shadow:inset 0 0 0 1px #D9DBE0;border:0;background:repeating-linear-gradient(135deg,#fff 0 6px,#FAFAFB 6px 12px)}
.kwin input{border:0;box-shadow:inset 0 0 0 1px #E3E5E9}
.bud{background:linear-gradient(180deg,#FAFAFB,#F4F5F7);box-shadow:inset 0 0 0 1px #ECEDF0}
.bud .big b{font-weight:750;letter-spacing:-.04em}
.when{background:#FAFAFB;box-shadow:inset 0 0 0 1px #ECEDF0}
.when .ic2{width:18px;height:18px;color:var(--o2)}
.rv{border:0;box-shadow:inset 0 0 0 1px #E6E7EB}
.warn{border:0;box-shadow:inset 0 0 0 1px #FFD6C9}
.nav2{background:#FAFAFB;border-radius:0 0 18px 18px}
/* 미리보기 */
.pv{border-radius:18px}
.pv .hd{background:radial-gradient(90% 120% at 100% 0%,#FF623E40,transparent 60%),var(--ink2);padding:20px 22px}
.pv .hd:after{display:none}
.pv .hd b{font-size:18px;font-weight:750;letter-spacing:-.02em}
.pv .tt{background:#FAFAFB;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv .tt b{font-weight:800;letter-spacing:-.035em}
/* 결과 */
.chc,.set{padding:24px}
.info{background:#F5F8FE;box-shadow:inset 0 0 0 1px #DCE5FA}
.dtb .hd,.lhd{border-color:var(--line)}
.dtb th{font-size:11.5px;letter-spacing:.03em;background:#FAFAFB}
.track .s.d i{background:linear-gradient(180deg,#FF7454,#F2532D)}
.track .bar:after{background:linear-gradient(90deg,#FF8A6B,#E8472A)}
/* 알림·창 */
.noti{border:0;box-shadow:0 0 0 1px #E6E7EB,0 24px 60px -20px #10182850;border-radius:16px;top:48px}
.noti .it .ic{background:#FFF4F0;color:var(--o2);box-shadow:inset 0 0 0 1px #FFE0D6}
.noti .it .ic.b{background:#F3F6FE;color:#3460C8;box-shadow:inset 0 0 0 1px #DCE5FA}
.noti .it .ic.ok{background:#EFF8F4;color:var(--ok);box-shadow:inset 0 0 0 1px #CDEBDD}
.noti .it .ic .ic2{width:18px;height:18px}
.sheet{border-radius:22px;box-shadow:0 0 0 1px #ffffff20,0 40px 100px -30px #00000070}
.sinp .ic2{width:18px;height:18px;color:var(--o2)}
.from{background:radial-gradient(80% 160% at 100% 0%,#FF623E40,transparent 60%),var(--ink2)}
.from:after{display:none}
@media (max-width:1100px){main{padding:24px 20px 120px}}
@media (max-width:760px){
 .top{height:56px;padding:0 14px}
 main{padding:18px 14px 150px}
 .ph h1,.dh h1{font-size:22px}
 .kpi b,.dk b{font-size:23px}
 .kpi,.dk{padding:15px}
 .pane{padding:22px 16px}
 .ct td{padding:0}.ct tr{padding:16px 14px}
 .tabbar{border-top:0;box-shadow:0 -1px 0 #E6E7EB}
 .tabbar a.plus span{background:linear-gradient(180deg,#FF7454,#F2532D)}
 .noti{top:60px}
 .demo{max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none}
}



/* ---- mvc3l-css ---- */

/* 밝은 왼쪽 메뉴판: 위쪽 바만 먹색 */
.side{background:#fff;border-right:1px solid #E9EAEE}
.side h6{color:var(--mute)}
.side a{color:var(--sub);font-weight:550}
.side a:hover{background:#F6F6F7;color:var(--ink)}
.side a.on{background:#FFF4F0;color:var(--ink);font-weight:700}
.side a.on svg{stroke:var(--o2)}
.side a .cnt{background:#FFE6DD;color:var(--o2)}
.side .help{background:#FAFAFB;box-shadow:inset 0 0 0 1px #ECEDF0;color:var(--sub)}
.side .help b{color:var(--ink)}



/* ---- mvB-css ---- */

.ct{display:none}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.cc{position:relative;background:#fff;border-radius:16px;box-shadow:0 0 0 1px #E6E7EB;padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:box-shadow .15s,transform .15s}
.cc:hover{box-shadow:0 0 0 1px #FFC9B8,0 14px 30px -20px #E8472A80;transform:translateY(-2px)}
.cc .h{display:flex;align-items:center;gap:10px}
.cc .h .sd{margin-left:auto}
.cc .nm{font-size:16px;font-weight:750;letter-spacing:-.02em;line-height:1.35}
.cc .nm small{display:block;font-size:12.5px;color:var(--mute);font-weight:500;letter-spacing:0;margin-top:2px}
.cc .big{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;background:#FAFAFB;box-shadow:inset 0 0 0 1px #EFF0F2;border-radius:12px;padding:12px 14px;min-height:70px}
.cc .big .v{font-size:12px;color:var(--sub)}
.cc .big .v b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:2px}
.cc .big .v b em{font-style:normal;color:var(--o2)}
.cc .big .v b i{font-style:normal;font-size:12px;color:var(--o2);background:#FFF1EC;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:4px}
.cc .big .v b.t{font-size:15px;font-weight:700}
.cc .big svg{width:92px;height:38px;flex:none}
.cc .pgx{display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}
.cc .pgx b{color:var(--ink)}
.cc .bar{height:4px;border-radius:2px;background:#EEEFF2;overflow:hidden;margin-top:-6px}
.cc .bar u{display:block;height:100%;background:linear-gradient(90deg,#FF8A6B,#E8472A);border-radius:2px}
.cc .act{display:flex;gap:6px;margin-top:auto}
.cc .act .mini{flex:1;text-align:center;padding:8px}
.cc.nw{box-shadow:none;border:1.5px dashed #D9DBE0;align-items:center;justify-content:center;text-align:center;color:var(--sub);min-height:250px;background:repeating-linear-gradient(135deg,#fff 0 8px,#FCFCFD 8px 16px)}
.cc.nw:hover{border-color:var(--o);color:var(--o2);box-shadow:none}
.cc.nw .pl{width:44px;height:44px;border-radius:14px;background:#FFF4F0;color:var(--o2);display:grid;place-items:center;font-size:24px;font-weight:600;margin:0 auto 10px;box-shadow:inset 0 0 0 1px #FFE0D6}
.cc.nw b{display:block;color:var(--ink);font-size:15px}
.grp{padding:18px 18px 4px}
.grp+.grp{border-top:1px solid var(--line)}
.grp h3{font-size:14px;font-weight:750;display:flex;align-items:center;gap:8px}
.grp h3 span{font-size:12px;font-weight:700;color:var(--sub);background:#F2F3F5;border-radius:999px;padding:1px 8px}
.grp h3 small{font-weight:500;color:var(--mute);font-size:12.5px}
.grp .cards{padding:12px 0 14px}
.grp.hot h3{color:var(--o2)}
.grp.hot h3 span{background:#FFF1EC;color:var(--o2)}
.grp.hot .cc{box-shadow:0 0 0 1px #FFD6C9;background:linear-gradient(180deg,#FFFBFA,#fff)}
.cmp2 .cc{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
.cmp2 .cc .nm{flex:1;font-size:14.5px}
.cmp2 .cards{grid-template-columns:1fr;gap:8px}
.cmp2 .cc .big{min-height:0;padding:6px 12px;background:none;box-shadow:none}
.cmp2 .cc .big .v{display:none}
.cmp2 .cc .act{margin:0;flex:none}
.cmp2 .cc .act .mini{flex:none}
.cmp2 .cc .rs{font-weight:800;white-space:nowrap}.cmp2 .cc .rs em{font-style:normal;color:var(--o2)}
@media (max-width:1100px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){main{padding:18px 14px 150px!important}.cards{grid-template-columns:1fr;padding:12px}.grp{padding:14px 12px 2px}.grp .cards{padding:10px 0 12px}.cmp2 .cc .big{display:none}.cmp2 .cc{flex-wrap:wrap}}

.side{width:88px;padding:16px 10px;display:flex;flex-direction:column;align-items:stretch}
.side h6,.side .help{display:none}
.newc{width:52px;height:52px;padding:0;border-radius:16px;font-size:0;gap:0;margin:0 auto 16px}
.newc svg{width:22px;height:22px}
.side a{flex-direction:column;gap:5px;font-size:11px;padding:10px 2px;text-align:center;justify-content:center;border-radius:12px;margin-bottom:2px;line-height:1.25}
.side a svg{width:21px;height:21px}
.side a .cnt{position:absolute;top:5px;right:12px;font-size:10px;padding:0 5px}
.side a .lki{position:absolute;top:6px;right:10px;margin:0}
.side a.on:before{left:-10px}
.ftab button[data-f="all"]{}
main{padding:30px 40px 120px}
.hello{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;box-shadow:var(--sh);padding:16px 20px;margin-bottom:16px}
.hello .ic{width:40px;height:40px;border-radius:12px;background:#FFF4F0;color:var(--o2);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px #FFE0D6}
.hello p{font-size:14px;color:var(--sub)}
.hello p b{color:var(--ink)}
.hello .btn{margin-left:auto}
@media (max-width:1100px){.side{display:none}}
@media (max-width:760px){.hello .btn{display:none}}



/* ---- mvcp-fix ---- */
.side a.newc{width:52px;height:52px;padding:0;color:#fff;background:linear-gradient(180deg,#FF7454,#F2532D);font-size:0;flex-direction:row;margin:0 auto 16px;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -8px #FF623Ea0}.side a.newc:hover{background:linear-gradient(180deg,#FF6A47,#E8472A);color:#fff}.side a.newc svg{width:22px;height:22px;stroke:#fff}


/* ---- mvcp-css ---- */

/* 실제 캠페인 화면 전용 (2026-10-30) */
.top a.lgo{display:flex;align-items:center}
.side a.on{pointer-events:none}
.load{padding:60px 0;text-align:center;color:var(--mute)}
.load i{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid #E3E5E8;border-top-color:var(--o);animation:sp .8s linear infinite;margin-bottom:10px}
@keyframes sp{to{transform:rotate(360deg)}}
.need{max-width:460px;margin:60px auto;text-align:center;padding:40px 30px}
.need b{display:block;font-size:20px;font-weight:750;letter-spacing:-.02em}
.need p{color:var(--sub);margin:8px 0 22px}
.empty{padding:40px 20px;text-align:center;color:var(--sub)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.cc .big .v b.wr em,.cmp2 .cc .rs.wr em{color:var(--sub)}
.cc .kwx{font-size:12px;color:var(--sub);background:#F4F5F7;border-radius:6px;padding:1px 7px;margin-left:4px}
.hello.none{display:none}
@media (max-width:760px){main{padding:18px 14px 110px!important}.demo{display:none}}


/* ---- 대시보드: 내 매장 오늘 순위 (2026-10-30) ---- */
.sth{font-size:15px;font-weight:750;letter-spacing:-.02em;margin:4px 0 10px;display:flex;align-items:center;gap:8px}
.sth small{font-size:12.5px;font-weight:500;color:var(--mute)}
.sth a{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--sub)}
.stores2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:22px}
.stc{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:16px 18px;display:block;transition:box-shadow .15s}
.stc:hover{box-shadow:0 0 0 1px #FFC9B8,0 12px 26px -18px #E8472A70}
.stc .h{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.stc .h b{font-size:15px;font-weight:750;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stc .ad{font-size:11px;font-weight:700;color:var(--o2);background:#FFF1EC;border-radius:6px;padding:1px 7px;flex:none}
.stc .h .go{margin-left:auto;color:var(--mute);font-size:13px}
.kr{display:grid;grid-template-columns:1fr 64px auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.stc .kr:nth-child(2){border-top:0}
.kr .k{color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr svg{width:64px;height:24px;display:block}
.kr .v{font-weight:800;font-size:16px;text-align:right;white-space:nowrap;min-width:78px}
.kr .v em{font-style:normal;font-size:11.5px;font-weight:700;margin-left:5px}
.kr .v em.u{color:var(--o2)}.kr .v em.d{color:#3460C8}.kr .v em.z{color:var(--mute)}
.kr .v .out{font-size:13px;color:var(--mute);font-weight:600}
.stc .nod{font-size:13px;color:var(--mute);padding:8px 0}

/* ---- 비회원 첫 화면 (mvg-css, 2026-10-30) ---- */

/* ===== 비회원 첫 화면 ===== */
.gst{display:flex;align-items:center;gap:8px}
.gst .tlg{color:#ffffffc8;font-weight:650;font-size:14px;padding:8px 12px;border-radius:10px}
.gst .tlg:hover{background:#ffffff10}
.gst .btn{padding:9px 16px;font-size:13.5px}
body:not(.guest) .gst{display:none}
body.guest .cashc,body.guest .bellw,body.guest .av,body.guest .side .cnt{display:none}
.side a.lk .lki{display:none;margin-left:auto;color:var(--mute)}
.side a.lk .lki .ic2{width:15px;height:15px}
body.guest .side a.lk .lki{display:block}
body.guest .side a.lk{color:#9EA3AC}
.gh{display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden}
.gh .l{padding:40px 40px 36px}
.gh .eb{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--o2);background:#FFF4F0;box-shadow:inset 0 0 0 1px #FFE0D6;border-radius:999px;padding:4px 12px 4px 6px}
.gh .eb b{background:linear-gradient(180deg,#FF7454,#F2532D);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px}
.gh h1{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.28;margin-top:16px}
.gh h1 em{font-style:normal;color:var(--o2)}
.gh p.d{color:var(--sub);margin-top:10px;font-size:15px}
.dgi{display:flex;gap:8px;margin-top:24px;background:#fff;border-radius:16px;padding:7px;box-shadow:inset 0 0 0 1.5px var(--o),0 0 0 5px #FF623E12,0 14px 30px -18px #E8472A90}
.dgi .ic2{width:20px;height:20px;color:var(--mute);margin:0 4px 0 10px;align-self:center}
.dgi input{flex:1;border:0;font-size:15.5px;min-width:0;background:none}
.dgi input:focus{outline:none}
.dgi .btn{padding:12px 18px}
.dgn{display:flex;gap:14px;margin-top:12px;font-size:12.5px;color:var(--mute)}
.dgn span:before{content:'✓ ';color:var(--o2);font-weight:800}
.gh .r{background:radial-gradient(90% 90% at 100% 0%,#FF623E2a,transparent 60%),linear-gradient(160deg,#FAFAFB,#F3F4F6);border-left:1px solid var(--line);padding:30px;display:flex;align-items:center;justify-content:center;position:relative}
.rc{background:#fff;border-radius:18px;padding:20px;width:100%;max-width:340px;box-shadow:0 0 0 1px #E6E7EB,0 24px 50px -24px #10182850}
.rc .h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--sub)}
.rc .nm{font-size:17px;font-weight:750;margin-top:6px;letter-spacing:-.02em}
.rc .rk{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.rc .rk b{font-size:40px;font-weight:800;letter-spacing:-.04em}
.rc .rk span{font-size:13px;color:var(--sub)}
.bars2{display:grid;gap:9px;margin-top:12px}
.bars2 div{font-size:12.5px}
.bars2 .t{display:flex;justify-content:space-between;color:var(--sub)}
.bars2 .t b{color:var(--ok);font-weight:700}
.bars2 .lo .t b{color:var(--o2)}
.bars2 i{display:block;height:6px;border-radius:3px;background:#EEEFF2;margin-top:5px;overflow:hidden}
.bars2 i u{display:block;height:100%;border-radius:3px;background:#34B37E}
.bars2 .lo i u{background:linear-gradient(90deg,#FF8A6B,#E8472A)}
.rc .rx{margin-top:14px;border-radius:12px;background:#FFF6F3;box-shadow:inset 0 0 0 1px #FFE0D6;padding:10px 12px;font-size:13px;color:var(--sub)}
.rc .rx b{color:var(--o2)}
.rc .go{display:flex;gap:6px;margin-top:12px}
.rc .go .btn{flex:1;padding:11px 8px;font-size:13px}
.ld2{display:grid;gap:10px;font-size:13.5px;color:var(--sub)}
.ld2 div{display:flex;gap:10px;align-items:center;opacity:.35;transition:.3s}
.ld2 div.on{opacity:1;color:var(--ink);font-weight:600}
.ld2 div i{width:18px;height:18px;border-radius:50%;border:2px solid #E3E5E8;flex:none}
.ld2 div.on i{border-color:var(--o);border-top-color:transparent;animation:sp .8s linear infinite}
.ld2 div.dn i{background:var(--o);border-color:var(--o);animation:none;position:relative}
.ld2 div.dn i:after{content:'✓';position:absolute;inset:0;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:800}
.gsec{margin-top:34px}
.gsec h2{font-size:20px;font-weight:750;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.gsec h2 small{font-size:13px;color:var(--mute);font-weight:500}
.gsec>p{color:var(--sub);font-size:14px;margin-top:4px}
.gsec .goals{grid-template-columns:repeat(4,1fr);margin-top:16px}
.gsec .goal{flex-direction:column;gap:12px;background:#fff;padding:20px}
.gsec .goal .ar{position:absolute;right:16px;top:20px;color:var(--mute);transition:.15s}
.gsec .goal:hover .ar{color:var(--o2);transform:translateX(3px)}
.exw{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-top:16px}
.exc{padding:20px}
.exc .row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.exc .row:last-child{border:0}
.exc .row b{display:block;font-size:14px}
.exc .row small{color:var(--mute);font-size:12px}
.exc .row .rs{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}
.exc .row .rs em{font-style:normal;color:var(--o2)}
.exg{padding:20px}
.exg .h{display:flex;justify-content:space-between;font-size:13px;color:var(--sub)}
.exg .h b{color:var(--ink);font-size:15px}
.exg svg{width:100%;height:150px;display:block;margin-top:10px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.trust div{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:18px;box-shadow:var(--sh)}
.trust i{font-style:normal;width:36px;height:36px;border-radius:11px;background:#FFF4F0;color:var(--o2);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px #FFE0D6;font-weight:800}
.trust b{display:block;font-size:14.5px}
.trust small{color:var(--sub);font-size:13px}
.lockv{background:#FAFAFB;border-radius:14px;box-shadow:inset 0 0 0 1px #ECEDF0;padding:12px 14px;margin-bottom:8px;position:relative}
.lockv .r{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:var(--sub)}
.lockv .r b{color:var(--ink)}
.lockv .r b em{font-style:normal;color:var(--o2);font-size:11.5px;margin-left:4px}
@media (max-width:1100px){.gh{grid-template-columns:1fr}.gh .r{border-left:0;border-top:1px solid var(--line)}.gsec .goals{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
 .gst .tlg{display:none}
 .gh .l{padding:26px 20px}
 .gh h1{font-size:25px}
 .dgi{flex-wrap:wrap}.dgi input{height:44px;flex-basis:calc(100% - 50px)}.dgi .btn{width:100%}
 .gh .r{padding:20px}
 .gsec .goals{grid-template-columns:1fr 1fr;gap:10px}
 .gsec .goal{padding:16px}
 .gsec .goal small{display:none}
 .exw,.trust{grid-template-columns:1fr}
}

.gst .btn{text-decoration:none}

/* ---- UI 다듬기 (2026-10-30): + 상자 단추 · 새 캠페인 글자 · 간격 ---- */
/* 왼쪽 맨 위: + 와 '새 캠페인' 글자를 함께 */
.side a.newc{width:66px;height:66px;flex-direction:column!important;gap:4px;font-size:11px!important;font-weight:750;letter-spacing:-.02em;line-height:1.1;padding:0!important;border-radius:18px}
.side a.newc svg{width:20px;height:20px}
.side a{font-size:11.5px}
.side a.on:not(.newc){background:#FFF4F0;color:var(--ink)}
/* 점선 + 상자 단추 */
.so.addb,.kw.addk{border:1.5px dashed #CBCFD6!important;box-shadow:none!important;background:#FAFAFB!important;color:var(--sub);cursor:pointer;transition:border-color .15s,background .15s}
.so.addb:hover,.kw.addk:hover{border-color:var(--o)!important;background:#FFF8F5!important;color:var(--ink)}
.so.addb .pl,.kw.addk .pl{width:36px;height:36px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px #E3E5E9;display:grid;place-items:center;flex:none;color:var(--o2)}
.so.addb:hover .pl,.kw.addk:hover .pl{background:var(--o);color:#fff;box-shadow:none}
.so.addb .pl svg,.kw.addk .pl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.so.addb b,.kw.addk b{color:var(--ink);font-size:14px}
.so.addb small,.kw.addk small{display:block;font-size:12px;color:var(--mute)}
.kw.addk{grid-template-columns:36px 1fr!important;gap:12px;padding:10px 14px!important}
.kw.addk small{margin-left:0}
/* 펼쳐지는 추가 칸 */
.addpanel{margin-top:10px;background:#FAFAFB;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--o);padding:14px 16px;animation:fi .2s ease}
.addpanel .aph{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.addpanel .aph b{font-size:14px}
.addpanel .apx{font-size:12.5px;color:var(--sub);padding:4px 8px;border-radius:8px}
.addpanel .apx:hover{background:#EEF0F2}
.addpanel .sfind{margin-top:0}
.addpanel .kwadd .btn{padding:10px 18px}
.addpanel .hintx{margin-top:8px}
/* 매장 칸 정렬 */
.stores{gap:8px}
.so{min-height:60px;padding:10px 14px}
/* 단계 표시: 휴대폰에서도 글자 */
@media (max-width:760px){
 .stp span{display:block!important;font-size:11px}
 .stp{padding:9px 4px}
 .so{flex:1 1 calc(50% - 4px)}
 .kwadd{flex-wrap:wrap}.kwadd input{flex-basis:100%}.kwadd .btn{flex:1}
}
/* 대시보드 매장 칸 높이 맞춤 + 카드 단추 */
.stores2{align-items:stretch}
.stc{display:flex;flex-direction:column}
.cc .act .mini{border-radius:10px;font-size:13px;padding:9px}
.grp h3{margin-bottom:2px}
.kpi p,.dk p{letter-spacing:-.01em}
.stc.addt{border:1.5px dashed #CBCFD6;box-shadow:none;background:#FAFAFB;align-items:center;justify-content:center;text-align:center;min-height:130px;color:var(--sub);font-size:12.5px;gap:4px}
.stc.addt:hover{border-color:var(--o);background:#FFF8F5;box-shadow:none}
.stc.addt .pl{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #E3E5E9;display:grid;place-items:center;color:var(--o2);margin-bottom:4px}
.stc.addt:hover .pl{background:var(--o);color:#fff;box-shadow:none}
.stc.addt .pl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.stc.addt b{color:var(--ink);font-size:14px}

/* ---- 공용 메뉴 (mv-camp-nav.js, 2026-10-30) ---- */
.side{overflow-y:auto;scrollbar-width:none;padding-bottom:30px}
.side::-webkit-scrollbar{display:none}
.side .sep{display:block;height:1px;background:var(--line);margin:6px 16px}
.side a{position:relative}
.side a span{display:block}
.side a .lk{position:absolute;top:6px;right:12px;color:#B8BCC3}
.side a .lk svg{width:11px;height:11px}
.mvmenu{display:none}
.mvsheet{position:fixed;inset:0;z-index:2147483000;background:#14161B70;display:flex;justify-content:flex-end;animation:fi .2s ease}
.mvsheet[hidden]{display:none}
.mvs-in{width:min(320px,86vw);height:100%;background:#fff;overflow:auto;padding:16px 14px 40px;box-shadow:-20px 0 50px #0003}
.mvs-h{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px}
.mvs-h b{font-size:17px}
.mvs-x{width:34px;height:34px;border-radius:10px;background:#F4F5F7;font-size:15px;color:var(--sub)}
.mvs-new{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--o);color:#fff;font-weight:750;border-radius:12px;padding:13px;margin:4px 4px 10px}
.mvsheet h6{font-size:11.5px;color:var(--mute);font-weight:700;margin:14px 10px 4px}
.mvsheet .sep{display:block;height:1px;background:var(--line);margin:10px 8px}
.mvs-g a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);position:relative}
.mvs-g a.on{background:#FFF4F0;color:var(--o2)}
.mvs-g a .lk{margin-left:auto;color:#B8BCC3}
.mvsheet svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mvs-g a .lk svg{width:14px;height:14px}
@media (max-width:1100px){
 .mvmenu{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;margin-left:4px;flex:none}
 .mvmenu svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
 .mvmenu:hover{background:#ffffff14}
}

/* ---- 사업자 정보 꼬리말 (2026-10-30) ---- */
.cfoot{max-width:1180px;margin:48px auto 0;padding:22px 0 8px;border-top:1px solid var(--line);font-size:12px;color:var(--mute);line-height:1.9}
.cfoot b{color:var(--sub)}
.cfoot a{color:var(--sub);text-decoration:underline;text-underline-offset:2px}
.cfoot .fl{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.cfoot .fl a{text-decoration:none}
.cfoot .fl span{margin-left:auto}
.side a{flex:none}
.side a.newc{height:66px!important;width:66px!important}

/* ---- 새 캠페인: 모든 상품 (2026-10-30) ---- */
.goal.off{opacity:.45;cursor:default}
.prods,.opts{display:grid;gap:8px}
.pc2{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;text-align:left;border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px #E3E5E9;background:#fff;transition:box-shadow .15s}
.pc2:hover{box-shadow:inset 0 0 0 1px #FFC4B3}
.pc2 .rd{width:20px;height:20px;border-radius:50%;border:1.5px solid #CFD3D9}
.pc2.on{box-shadow:inset 0 0 0 1.5px var(--o),0 0 0 4px #FF623E12;background:#FFFAF8}
.pc2.on .rd{border:6px solid var(--o)}
.pc2 b{display:block;font-size:14.5px}
.pc2 small{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}
.pc2 em{font-style:normal;font-weight:800;font-size:14px;white-space:nowrap}
.infobox{background:#FAFAFB;box-shadow:inset 0 0 0 1px #ECEDF0;border-radius:14px;padding:14px 16px;font-size:14px;color:var(--sub);line-height:1.7;margin-top:18px}
.infobox b{color:var(--ink)}
.infobox span{font-size:12.5px;color:var(--mute)}
.qnote{font-size:13px;color:var(--sub);background:#F5F8FE;box-shadow:inset 0 0 0 1px #DCE5FA;border-radius:12px;padding:10px 14px;margin-top:18px}
.inp2{width:100%;border:0;box-shadow:inset 0 0 0 1px #E3E5E9;border-radius:12px;padding:12px 14px;font:inherit;background:#fff;resize:vertical}
.inp2:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--o)}
select.inp2{appearance:auto}
.chips3{display:flex;gap:8px;flex-wrap:wrap}
.chips3 button{border-radius:12px;padding:10px 16px;box-shadow:inset 0 0 0 1px #E3E5E9;background:#fff;font-weight:700;font-size:14px;text-align:center}
.chips3 button small{display:block;font-weight:500;font-size:11.5px;color:var(--mute)}
.chips3 button.on{background:var(--ink);color:#fff;box-shadow:none}
.chips3 button.on small{color:#ffffffa0}
#cQuick{margin-top:10px}
.cntbox{display:flex;align-items:center;gap:12px;background:#FAFAFB;box-shadow:inset 0 0 0 1px #ECEDF0;border-radius:18px;padding:14px}
.cntbox .cb{width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #E3E5E9;font-size:24px;color:var(--sub);flex:none}
.cntbox .cb:hover{box-shadow:inset 0 0 0 1px var(--o);color:var(--o2)}
.cntbox .cv{flex:1;text-align:center}
.cntbox .cv b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em}
.cntbox .cv small{font-size:12.5px;color:var(--mute)}

/* ---- 실제 캠페인 성과 LIVE (2026-10-30) ---- */
.live{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:26px 26px 20px;margin-top:34px}
.live .lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live .lh .lvb{font-size:12px;font-weight:800;color:#E5484D;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.live .lh .lvb:before{content:'';width:8px;height:8px;border-radius:50%;background:#E5484D;animation:pl 1.6s infinite}
.live .lh b{font-size:19px;font-weight:800;letter-spacing:-.03em}
.live .lh small{color:var(--mute);font-size:13px}
.live .lt{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.live .lti{border-radius:16px;box-shadow:0 0 0 1px #ECEDF0;padding:18px 20px}
.live .lti p{font-size:13px;color:var(--sub);font-weight:600}
.live .lti p small{color:var(--mute);font-weight:500;font-size:11.5px}
.live .lti b{display:block;font-size:30px;font-weight:800;letter-spacing:-.035em;margin-top:6px}
.live .lti b small{font-size:14px;font-weight:600;color:var(--mute);margin-left:3px}
.live .lti.hl{background:linear-gradient(160deg,#FFF6F2,#fff);box-shadow:0 0 0 1px #FFE0D6}
.live .lti.hl b{color:var(--o2)}
.live .ltk{margin-top:16px;background:var(--ink2);border-radius:14px;overflow:hidden;padding:13px 0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.live .ltr{display:flex;gap:44px;width:max-content;animation:mq 34s linear infinite}
.live .ltr span{color:#ffffffe0;font-size:14.5px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px}
.live .ltr em{font-style:normal;color:#ffffff90;font-size:13.5px}
.live .ltr u{text-decoration:none;color:#FF8A6B;font-weight:800}
@keyframes mq{to{transform:translateX(-50%)}}
.live .bl{display:inline-block;width:46px;height:16px;border-radius:6px;background:linear-gradient(90deg,#D9DBE0,#ECEDF0);filter:blur(2px);vertical-align:-3px;margin-right:6px}
.live .ltr .bl{background:linear-gradient(90deg,#ffffff40,#ffffff20)}
.live .lsub{font-size:14px;font-weight:750;color:var(--sub);margin:22px 0 10px}
.live .lcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.live .lc{border-radius:16px;box-shadow:0 0 0 1px #ECEDF0;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.live .lk{font-size:15px;font-weight:750;display:flex;align-items:center}
.live .ls{font-size:13px;color:var(--sub);letter-spacing:.04em}
.live .lr{display:flex;align-items:baseline;gap:6px;margin-top:4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.live .lr span{font-size:14px;color:var(--sub)}
.live .lr i{font-style:normal;color:var(--mute)}
.live .lr b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.live .lr u{text-decoration:none;margin-left:auto;font-size:13px;font-weight:800;color:var(--o2);background:#FFF1EC;border-radius:999px;padding:3px 10px}
.live .lm em{display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;color:#3460C8;background:#EEF3FD;border-radius:7px;padding:2px 8px}
.live .lm p{font-size:13.5px;font-weight:700;margin-top:6px;line-height:1.6}
.live .lm p i{font-style:normal;color:var(--mute);font-weight:500}
.live .ld{font-size:12.5px;color:var(--sub)}
.live .ld b{color:var(--o2)}
.live .dgi{font-size:12px;font-weight:800;color:#C46A00;background:#FFF4E5;border-radius:7px;padding:2px 8px}
.live .lnote2{font-size:12px;color:var(--mute);margin-top:16px}
@media (max-width:900px){.live .lt{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.live{padding:18px 14px}.live .lti{padding:14px}.live .lti b{font-size:22px}.live .lcs{grid-template-columns:1fr 1fr}.live .lr b{font-size:20px}}
@media (max-width:420px){.live .lcs{grid-template-columns:1fr}}

/* ---- 당근 · 한 달 하면 이렇게 돼요 (2026-10-30) ---- */
.live .dgbox{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.live .dgh b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.live .dgh small{color:var(--mute);font-size:12.5px}
.live .dgsum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.live .dgsum>div{border-radius:16px;background:#FFF9EF;box-shadow:inset 0 0 0 1px #F7E2C2;padding:16px 18px}
.live .dgsum small{font-size:12.5px;color:#9A6A1E;font-weight:700}
.live .dgsum b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.live .dgsum b i,.live .dgv b i{font-style:normal;font-size:14px;color:var(--mute);margin-left:3px;font-weight:600}
.live .dgsum p{font-size:12px;color:var(--sub);margin-top:2px}
.live .dgcost{margin-top:12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--ink2);color:#fff;border-radius:16px;padding:16px 20px}
.live .dgcost .dgct b{display:block;font-size:15px}
.live .dgcost .dgct small{font-size:12px;color:#ffffff90}
.live .dgcost .cv{display:flex;gap:26px;margin-left:auto}
.live .dgcost .cv small{display:block;font-size:12px;color:#ffffffa0}
.live .dgcost .cv b{font-size:22px;font-weight:800;color:#FFB39E}
.live .dgf{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.live .dgf button{border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px #E3E5E9;background:#fff;color:var(--sub)}
.live .dgf button.on{background:var(--ink);color:#fff;box-shadow:none}
.live .dgcs{margin-top:12px}
.live .dg2 .dgv{margin-top:4px}
.live .dg2 .dgv small{font-size:12px;color:var(--mute)}
.live .dg2 .dgv b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.live .wk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:64px;align-items:end;margin:6px 0 4px}
.live .wk div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.live .wk span{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#FFB65C,#F08A1C)}
.live .wk small{font-size:10.5px;color:var(--mute);white-space:nowrap}
.live .dgr{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:6px 0;border-top:1px dashed var(--line)}
.live .dgr span{color:var(--sub)}
.live .dgr b{font-weight:700;text-align:right}
.live .dgr u{text-decoration:none;color:var(--o2);margin-left:4px}
.live .dgr em{font-style:normal;color:var(--mute);margin-left:4px}
.live .dgcta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;background:#FFF6F3;box-shadow:inset 0 0 0 1px #FFE0D6;border-radius:16px;padding:14px 18px}
.live .dgcta p{font-weight:700;font-size:14.5px}
.live .dgcta .btn{text-decoration:none}
@media (max-width:760px){.live .dgsum{grid-template-columns:1fr}.live .dgcost .cv{margin-left:0;gap:18px}.live .dgcta .btn{width:100%}}

.live .dgfoot{font-size:12px;color:var(--mute);margin-top:8px}

.live .dgh small em{font-style:normal;color:var(--o2);font-weight:700}

.live .lsub small{font-size:12px;font-weight:500;color:var(--mute);margin-left:6px}
.live .lsub small em{font-style:normal;color:var(--o2);font-weight:700}
.live .lp{font-size:11.5px;color:var(--mute)}

@media (min-width:900px){.live .lcs.pl3{grid-template-columns:repeat(3,1fr)}}

.live .lk .rp{font-size:11px;font-weight:700;color:var(--mute);margin-left:4px}
@media (min-width:900px){.live .dgcs{grid-template-columns:repeat(3,1fr)}}

/* ---- 새 캠페인: 목표별 실제 성과 (2026-10-31) ---- */
.proof{margin-top:18px;border-radius:16px;background:linear-gradient(180deg,#FFFAF7,#fff);box-shadow:inset 0 0 0 1px #FFE0D6;padding:16px 18px}
.proof .ph2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proof .ph2 b{font-size:14.5px;font-weight:750}
.proof .lv,.proof.sm .lv{font-size:11px;font-weight:800;color:#E5484D;background:#FDECEC;border-radius:6px;padding:2px 7px;letter-spacing:.02em}
.proof .pm{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--o2);text-decoration:none}
.proof .pr3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.proof .pr3>div{background:#fff;border-radius:12px;box-shadow:0 0 0 1px #F0E6E1;padding:12px 14px}
.proof .pr3 p{font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.proof .pr3 p small{font-weight:500;color:var(--mute);font-size:12px;letter-spacing:.04em}
.proof .pr3 b{display:flex;align-items:baseline;gap:4px;font-size:15px;margin-top:4px;color:var(--sub);font-weight:600}
.proof .pr3 b em{font-style:normal;font-size:20px;font-weight:800;color:var(--ink)}
.proof .pr3 b i{font-style:normal;color:var(--mute)}
.proof .pr3 b u{text-decoration:none;margin-left:auto;font-size:12px;font-weight:800;color:var(--o2);background:#FFF1EC;border-radius:999px;padding:2px 8px}
.proof .pr3>div>small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.proof .pr3.dg b{font-size:22px;font-weight:800;color:var(--ink)}
.proof .pr3.dg b i{font-size:13px;font-weight:600;margin-left:2px}
.proof .pr3.dg p{color:#9A6A1E;font-size:12.5px}
.proof .pn{font-size:12px;color:var(--mute);margin-top:10px}
.proof .pn b{color:var(--o2)}
.proof .bl{display:inline-block;width:34px;height:13px;border-radius:5px;background:linear-gradient(90deg,#D9DBE0,#ECEDF0);filter:blur(1.5px);vertical-align:-2px;margin-right:4px}
.proof.sm{margin-top:14px;padding:12px 14px;font-size:13.5px;color:var(--sub);line-height:1.7}
.proof.sm b{color:var(--ink)}
@media (max-width:760px){.proof .pr3{grid-template-columns:1fr}}

/* ---- 마커벨리 성과 기록 (2026-10-31, 우리만의 모양) ---- */
.live .mh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live .mh b{font-size:20px;font-weight:800;letter-spacing:-.03em}
.live .mh .auto{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#1F9D6B;background:#EAF7F1;border-radius:999px;padding:3px 10px}
.live .mh .auto i{width:7px;height:7px;border-radius:50%;background:#1F9D6B;animation:pl 1.8s infinite}
.live .mh small{color:var(--mute);font-size:12.5px}
.live .feat{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:18px}
.live .fc{border-radius:20px;background:linear-gradient(160deg,#FFF8F4,#fff 60%);box-shadow:0 0 0 1px #FFE3D8;padding:20px 22px 14px}
.live .ft{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.live .ft .tag{font-size:11.5px;font-weight:800;color:#fff;background:var(--o);border-radius:7px;padding:2px 8px}
.live .ft b{font-size:16px;font-weight:800}
.live .ft small{font-size:12.5px;color:var(--mute);letter-spacing:.02em}
.live .fr{display:flex;align-items:baseline;gap:10px;margin-top:10px;flex-wrap:wrap}
.live .fr span{font-size:14px;color:var(--sub)}
.live .fr span b{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-left:2px}
.live .fr .to b{font-size:40px;color:var(--o2)}
.live .fr i{font-style:normal;color:var(--mute);font-size:18px}
.live .fr em{font-style:normal;margin-left:auto;font-size:12.5px;font-weight:800;color:#1F9D6B;background:#EAF7F1;border-radius:999px;padding:4px 11px}
.live .fg{margin-top:8px}
.live .fg svg.big{width:100%;height:190px;display:block}
.live .fg .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.2,.7,.2,1)}
.live.drawn .fg .ln{stroke-dashoffset:0}
.live .fg .ax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-top:4px}
.live .kq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.live .kq>div{border-radius:18px;box-shadow:0 0 0 1px #ECEDF0;padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.live .kq small{font-size:12.5px;color:var(--sub);font-weight:600}
.live .kq b{font-size:30px;font-weight:800;letter-spacing:-.035em;margin-top:4px}
.live .kq b i{font-style:normal;font-size:14px;color:var(--mute);margin-left:3px;font-weight:600}
.live .kq>div:first-child{background:var(--ink2);box-shadow:none}
.live .kq>div:first-child small{color:#ffffffa0}
.live .kq>div:first-child b{color:#FF8A6B}
.live .belt{margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:4px 0}
.live .bt{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite}
.live .belt:hover .bt{animation-play-state:paused}
.live .cp{width:196px;flex:none;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #ECEDF0,0 6px 16px -12px #0000002a;padding:12px 14px}
.live .cp .ch{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.live .cp .ch b{font-size:14px;font-weight:800}
.live .cp .ch small{font-size:11.5px;color:var(--mute);letter-spacing:.03em}
.live .cp .pl{font-size:10.5px;font-weight:800;color:var(--o2);background:#FFF1EC;border-radius:6px;padding:1px 6px}
.live .cp .dgt{font-size:10.5px;font-weight:800;color:#C46A00;background:#FFF4E5;border-radius:6px;padding:1px 6px}
.live .cp svg.sm{width:100%;height:46px;display:block;margin:6px 0 2px}
.live .cp .mb{display:flex;gap:5px;align-items:flex-end;height:46px;margin:6px 0 2px}
.live .cp .mb i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#FFB65C,#F08A1C)}
.live .cp .cr{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--sub)}
.live .cp .cr b{color:var(--ink);font-size:14px}
.live .cp .cr u{text-decoration:none;font-weight:800;color:var(--o2);font-size:12px}
@media (max-width:900px){.live .feat{grid-template-columns:1fr}}
@media (max-width:760px){.live .fr .to b{font-size:32px}.live .fg svg.big{height:150px}.live .kq b{font-size:23px}.live .kq>div{padding:13px 14px}}

/* ---- 성과: A 검색 결과 상승형 + C 전광판 (2026-10-31) ---- */
.live .mz{display:inline-block;vertical-align:-3px;height:1.05em;border-radius:4px;background:conic-gradient(from 90deg at 50% 50%,#C9CDD3 25%,#DADDE2 0 50%,#BFC4CB 0 75%,#E3E5E9 0) 0 0/8px 8px,#D5D8DD;opacity:.95}
.live .gc2 .mz{background:conic-gradient(from 90deg at 50% 50%,#ffffff30 25%,#ffffff18 0 50%,#ffffff40 0 75%,#ffffff22 0) 0 0/8px 8px,#ffffff20}
.live .nm{letter-spacing:.02em}
.live .ga2{display:grid;grid-template-columns:360px 1fr;gap:34px;align-items:center;margin-top:20px}
.live .phone{width:100%;max-width:360px;border-radius:32px;background:var(--ink2);padding:11px;box-shadow:0 30px 60px -30px #0007}
.live .screen{background:#fff;border-radius:23px;overflow:hidden;height:520px;position:relative}
.live .sbar{display:flex;align-items:center;gap:8px;margin:13px 13px 8px;background:#F4F5F7;border-radius:12px;padding:10px 13px;font-size:14px;font-weight:700}
.live .sbar svg{width:17px;height:17px;stroke:var(--sub);fill:none;stroke-width:2}
.live .list{position:relative;margin:0 13px;height:440px}
.live .row{position:absolute;left:0;right:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:12px;transition:top 1.1s cubic-bezier(.2,.7,.2,1),opacity .4s}
.live .row .rk{width:26px;font-weight:800;color:var(--mute);font-size:14px;text-align:center}
.live .row .th2{width:34px;height:34px;border-radius:9px;background:conic-gradient(from 90deg,#E2E4E8 25%,#ECEDF0 0 50%,#D9DCE1 0 75%,#F0F1F3 0) 0 0/9px 9px;flex:none}
.live .row .tx{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.live .row .tx i{display:block;height:8px;border-radius:4px;background:conic-gradient(from 90deg,#DADDE2 25%,#E6E8EB 0 50%,#D2D5DA 0 75%,#ECEEF0 0) 0 0/7px 7px}
.live .row.me{background:#FFF6F3;box-shadow:0 0 0 1.5px var(--o),0 10px 24px -14px #E8472A90;z-index:3}
.live .row.me .rk{color:var(--o2);font-size:16px}
.live .row.me .th2{background:linear-gradient(135deg,#FF8A6B,#E8472A)}
.live .row.me .tx b{font-size:14px;white-space:nowrap}
.live .row.me .tx small{font-size:11.5px;color:var(--sub)}
.live .row.me .badge{font-size:11px;font-weight:800;color:#fff;background:var(--o);border-radius:999px;padding:3px 9px;white-space:nowrap}
.live .out{position:absolute;left:14px;right:14px;bottom:12px;text-align:center;font-size:12px;color:var(--mute)}
.live .ga2 .gside .tag{font-size:11.5px;font-weight:800;color:#fff;background:var(--o);border-radius:7px;padding:3px 9px}
.live .ga2 .gside h3{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.3;margin-top:12px}
.live .ga2 .gside h3 em{font-style:normal;color:var(--o2)}
.live .ga2 .gside p{color:var(--sub);margin-top:10px;font-size:14.5px}
.live .ga2 .stat{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.live .ga2 .stat div{border-radius:14px;box-shadow:0 0 0 1px var(--line);padding:11px 16px}
.live .ga2 .stat small{display:block;font-size:12px;color:var(--sub)}
.live .ga2 .stat b{font-size:23px;font-weight:800}
.live .ga2 .pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.live .ga2 .pick button{border-radius:11px;padding:8px 12px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;background:#fff}
.live .ga2 .pick button.on{box-shadow:inset 0 0 0 1.5px var(--o);background:#FFF6F3;color:var(--o2)}
.live .ga2 .replay{margin-top:12px;font-size:13px;font-weight:700;color:var(--sub);text-decoration:underline}
.live .mznote{font-size:12px;color:var(--mute);margin-top:10px}
.live .gc2{margin-top:22px;background:var(--ink2);border-radius:22px;padding:20px 22px;color:#fff}
.live .gch{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.live .gch b{font-size:16px;font-weight:800}
.live .gch small{font-size:12px;color:#ffffff80}
.live .board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.live .bd{border-radius:16px;background:#1C1F25;box-shadow:inset 0 0 0 1px #ffffff12;padding:14px 16px}
.live .bd .hd{display:flex;align-items:center;gap:6px;font-size:13px;color:#ffffffb0}
.live .bd .hd b{color:#fff}
.live .bd .hd small{margin-left:auto;font-size:11.5px;color:#ffffff70}
.live .flap{display:flex;align-items:center;gap:8px;margin-top:12px}
.live .fl{display:flex;gap:4px}
.live .fl span{width:38px;height:52px;border-radius:8px;background:linear-gradient(180deg,#2A2E36 50%,#23262D 50%);display:grid;place-items:center;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;position:relative;box-shadow:0 2px 0 #0006;color:#fff}
.live .fl span:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#0008}
.live .fl.to span{color:#FF8A6B}
.live .flap .ar{color:#ffffff60;font-size:20px}
.live .flap .u{font-size:12px;color:#ffffff80;align-self:flex-end;margin-bottom:6px}
.live .bt2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:#ffffff90}
.live .bt2 u{text-decoration:none;font-weight:800;color:#0F1013;background:#FF8A6B;border-radius:999px;padding:3px 10px}
.live .gc2 .sum{display:flex;gap:28px;margin-top:16px;padding-top:14px;border-top:1px solid #ffffff14;flex-wrap:wrap}
.live .gc2 .sum small{display:block;font-size:12px;color:#ffffff80}
.live .gc2 .sum b{font-size:24px;font-weight:800;color:#fff}
.live .gc2 .sum b i{font-style:normal;font-size:13px;color:#ffffff80;margin-left:3px}
@media (max-width:900px){.live .ga2{grid-template-columns:1fr;justify-items:center}.live .ga2 .gside{width:100%}.live .board{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.live .board{grid-template-columns:1fr}.live .ga2 .gside h3{font-size:24px}.live .screen{height:500px}.live .list{height:430px}}

/* ---- 성과 기록 · 실시간 구성 (2026-10-31) ---- */
.live .mh .livep{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#E5484D;background:#FDECEC;border-radius:999px;padding:3px 10px}
.live .mh .livep i{width:7px;height:7px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 #E5484D80;animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #E5484D80}70%{box-shadow:0 0 0 7px #E5484D00}100%{box-shadow:0 0 0 0 #E5484D00}}
.live .mh .clk{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--ink);background:#F4F5F7;border-radius:8px;padding:2px 8px}
.live .lv2{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;margin-top:18px;align-items:stretch}
.live .sr{display:flex;gap:18px;align-items:center;border-radius:20px;background:linear-gradient(160deg,#FFF8F4,#fff 60%);box-shadow:0 0 0 1px #FFE3D8;padding:16px}
.live .sr .phone{max-width:260px;flex:none;width:260px;padding:9px;border-radius:28px}
.live .sr .screen{height:430px;border-radius:20px}
.live .sr .list{height:360px}
.live .sr .row{height:42px;gap:8px;padding:0 8px}
.live .sr .row .th2{width:28px;height:28px}
.live .sr .row .badge{display:none}
.live .sbar .rec{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:#E5484D}
.live .sbar .rec i{width:6px;height:6px;border-radius:50%;background:#E5484D;animation:pl 1s infinite}
.live .cap .tag{font-size:11px;font-weight:800;color:#fff;background:var(--o);border-radius:7px;padding:2px 8px}
.live .cap .ct{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:10px;line-height:1.35}
.live .cap .ct em{font-style:normal;color:var(--o2)}
.live .cap .ct u{text-decoration:none;font-size:13px;color:var(--o2);background:#FFF1EC;border-radius:999px;padding:2px 9px;vertical-align:4px}
.live .cap .cs{display:block;font-size:12.5px;color:var(--sub);margin-top:6px}
.live .cap .dots{display:flex;gap:5px;margin-top:14px}
.live .cap .dots i{width:7px;height:7px;border-radius:50%;background:#E3E5E9;transition:.3s}
.live .cap .dots i.on{width:20px;border-radius:4px;background:var(--o)}
.live .fd{border-radius:20px;background:var(--ink2);color:#fff;padding:16px 16px 12px;display:flex;flex-direction:column;overflow:hidden}
.live .fd .fh{display:flex;align-items:baseline;gap:8px}
.live .fd .fh b{font-size:15px}
.live .fd .fh small{font-size:12px;color:#ffffff70}
.live .fl2{flex:1;margin-top:10px;display:flex;flex-direction:column;gap:7px;min-height:300px}
.live .fr2{display:grid;grid-template-columns:42px 54px 1fr auto;gap:8px;align-items:center;background:#1C1F25;border-radius:12px;padding:10px 12px;font-size:13px;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s,background 1.2s}
.live .fr2.nw{transform:translateY(-14px);opacity:0;background:#3A2A24}
.live .fr2 time{font-variant-numeric:tabular-nums;color:#ffffff70;font-size:12px}
.live .fr2 .ty{font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 6px;text-align:center}
.live .fr2 .ty.pl{color:#FF8A6B;background:#FF623E22}
.live .fr2 .ty.dg{color:#FFB65C;background:#F08A1C22}
.live .fr2 .w{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .fr2 .w small{color:#ffffff80;margin-left:4px}
.live .fr2 .v{font-weight:800;white-space:nowrap}
.live .fr2 .v u{text-decoration:none;color:#FF8A6B;margin-left:4px;font-size:12px}
.live .fr2 .v em{font-style:normal;color:#ffffff70;font-weight:600;font-size:12px;margin-left:4px}
.live .fd .mz{background:conic-gradient(from 90deg at 50% 50%,#ffffff30 25%,#ffffff18 0 50%,#ffffff40 0 75%,#ffffff22 0) 0 0/8px 8px,#ffffff20}
.live .fd .fn{font-size:11px;color:#ffffff60;margin-top:8px}
@media (max-width:1000px){.live .lv2{grid-template-columns:1fr}}
@media (max-width:560px){
 .live .sr{flex-direction:column;align-items:stretch}
 .live .sr .phone{width:100%;max-width:none}
 .live .sr .screen{height:400px}.live .sr .list{height:330px}
 .live .cap .ct{font-size:21px}
 .live .fr2{grid-template-columns:38px 50px 1fr;}
 .live .fr2 .v{grid-column:2/-1}
 .live .fl2{min-height:0}
}

/* ---- 성과 기록 · 화이트 톤 고급 (2026-10-31) ---- */
.live{background:#fff;box-shadow:0 0 0 1px #ECEDF0,0 30px 60px -40px #1018282e;border-radius:28px;padding:32px 32px 24px}
.live .mh b{font-size:22px;letter-spacing:-.04em}
.live .mh .livep{background:#fff;box-shadow:inset 0 0 0 1px #F6D2D2;color:#D9474C}
.live .mh .clk{background:#fff;box-shadow:inset 0 0 0 1px #ECEDF0;font-weight:700;color:var(--sub)}
/* 왼쪽 사례 */
.live .sr{background:linear-gradient(180deg,#FCFCFD,#fff);box-shadow:0 0 0 1px #EEEFF2;border-radius:24px;padding:20px}
.live .sr .phone{background:linear-gradient(160deg,#F4F5F7,#E7E9ED);padding:8px;box-shadow:0 0 0 1px #E1E3E8,0 24px 44px -26px #1018284d}
.live .sr .screen{box-shadow:inset 0 0 0 1px #EEEFF2}
.live .sbar{background:#F7F7F9;box-shadow:inset 0 0 0 1px #EEEFF2}
.live .row.me{background:#fff;box-shadow:0 0 0 1.5px var(--o),0 12px 26px -14px #E8472A70}
.live .cap .tag{background:#fff;color:var(--o2);box-shadow:inset 0 0 0 1px #FFD6C9}
.live .cap .ct{font-size:26px;letter-spacing:-.04em}
/* 실시간 기록 */
.live .fd{background:#fff;color:var(--ink);box-shadow:0 0 0 1px #EEEFF2;border-radius:24px;padding:20px 20px 14px}
.live .fd .fh b{font-size:15.5px}
.live .fd .fh small{color:var(--mute)}
.live .fr2{background:#FAFAFB;box-shadow:inset 0 0 0 1px #F0F1F3;border-radius:14px}
.live .fr2.nw{background:#FFF4EF}
.live .fr2 time{color:var(--mute)}
.live .fr2 .ty.pl{color:var(--o2);background:#FFF1EC}
.live .fr2 .ty.dg{color:#B86400;background:#FFF5E6}
.live .fr2 .w small{color:var(--mute)}
.live .fr2 .v{color:var(--ink)}
.live .fr2 .v u{color:var(--o2)}
.live .fr2 .v em{color:var(--mute)}
.live .fd .mz{background:conic-gradient(from 90deg at 50% 50%,#C9CDD3 25%,#DADDE2 0 50%,#BFC4CB 0 75%,#E3E5E9 0) 0 0/8px 8px,#D5D8DD}
.live .fd .fn{color:var(--mute)}
/* 순위 전광판 */
.live .gc2{background:linear-gradient(180deg,#FCFCFD,#fff);color:var(--ink);box-shadow:0 0 0 1px #EEEFF2;border-radius:24px;padding:22px 24px}
.live .gch b{font-size:16px}
.live .gch small{color:var(--mute)}
.live .gc2 .mz{background:conic-gradient(from 90deg at 50% 50%,#C9CDD3 25%,#DADDE2 0 50%,#BFC4CB 0 75%,#E3E5E9 0) 0 0/8px 8px,#D5D8DD}
.live .bd{background:#fff;box-shadow:0 0 0 1px #EEEFF2,0 10px 24px -20px #1018283a;border-radius:18px}
.live .bd .hd{color:var(--sub)}
.live .bd .hd b{color:var(--ink)}
.live .bd .hd small{color:var(--mute)}
.live .fl span{background:linear-gradient(180deg,#FBFBFC 50%,#F3F4F6 50%);color:var(--ink);box-shadow:inset 0 0 0 1px #E6E7EB,0 1px 0 #fff;font-weight:750}
.live .fl span:after{background:#E3E5E9}
.live .fl.to span{color:var(--o2);background:linear-gradient(180deg,#FFF8F5 50%,#FFF0EA 50%);box-shadow:inset 0 0 0 1px #FFD6C9}
.live .flap .ar,.live .flap .u{color:var(--mute)}
.live .bt2{color:var(--sub)}
.live .bt2 u{background:#FFF1EC;color:var(--o2)}
.live .gc2 .sum{border-top:1px solid #EEEFF2}
.live .gc2 .sum small{color:var(--sub)}
.live .gc2 .sum b{color:var(--ink)}
.live .gc2 .sum b i{color:var(--mute)}
.live .gc2 .sum>div:first-child b{color:var(--o2)}
/* 당근 칸 */
.live .dgbox{border-top:1px solid #EEEFF2;margin-top:30px;padding-top:26px}
.live .dgsum>div{background:#fff;box-shadow:0 0 0 1px #F3E6D2}
.live .dgcost{background:#fff;color:var(--ink);box-shadow:0 0 0 1px #EEEFF2;background:linear-gradient(90deg,#FFF9F5,#fff)}
.live .dgcost .dgct small{color:var(--mute)}
.live .dgcost .cv small{color:var(--sub)}
.live .dgcost .cv b{color:var(--o2)}
.live .lc{background:#fff;box-shadow:0 0 0 1px #EEEFF2,0 10px 24px -22px #1018283a}
@media (max-width:760px){.live{padding:20px 14px;border-radius:22px}.live .sr,.live .fd,.live .gc2{padding:14px}}

/* ---- 맨 위 성과 띠 (2026-10-31): 작게, 플레이스/당근 탭 ---- */
.lband{background:#fff;border-radius:20px;box-shadow:0 0 0 1px #ECEDF0,0 18px 40px -32px #1018283a;padding:14px 18px 12px;margin-bottom:18px}
.lband .bh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lband .tb2{display:flex;background:#F4F5F7;border-radius:11px;padding:3px}
.lband .tb2 button{border-radius:8px;padding:6px 13px;font-size:13px;font-weight:700;color:var(--sub)}
.lband .tb2 button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #1018281f}
.lband .livep{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#D9474C}
.lband .livep i{width:7px;height:7px;border-radius:50%;background:#E5484D;animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #E5484D80}70%{box-shadow:0 0 0 7px #E5484D00}100%{box-shadow:0 0 0 0 #E5484D00}}
.lband .clk{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--sub);box-shadow:inset 0 0 0 1px #ECEDF0;border-radius:7px;padding:1px 7px}
.lband .bn{margin-left:auto;font-size:11.5px;color:var(--mute)}
.lband .bp{display:none;margin-top:10px;animation:fi .35s ease}
.lband .bp.on{display:block}
.lband .bts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lband .bt{border-radius:12px;box-shadow:inset 0 0 0 1px #F0F1F3;background:#FCFCFD;padding:9px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lband .bt small{font-size:12px;color:var(--sub);font-weight:600}
.lband .bt b{font-size:21px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.lband .bt b.o{color:var(--o2)}
.lband .bt b i{font-style:normal;font-size:12px;color:var(--mute);margin-left:2px;font-weight:600}
.lband .bb{margin-top:8px;background:var(--ink2);border-radius:11px;overflow:hidden;padding:9px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lband .br{display:flex;gap:36px;width:max-content;animation:mq 46s linear infinite}
.lband .bb:hover .br{animation-play-state:paused}
.lband .br span{color:#ffffffe0;font-size:13.5px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:6px}
.lband .br em{font-style:normal;color:#ffffffa0}
.lband .br u{text-decoration:none;color:#FF8A6B;font-weight:800}
.lband .br span.nw{color:#ffffffb8}
.lband .br .dt{width:6px;height:6px;border-radius:50%;background:#FF8A6B;display:inline-block}
.lband .mz{display:inline-block;vertical-align:-2px;height:1em;border-radius:3px;background:conic-gradient(from 90deg at 50% 50%,#ffffff30 25%,#ffffff18 0 50%,#ffffff40 0 75%,#ffffff22 0) 0 0/7px 7px,#ffffff20}
.lband .bf{font-size:11.5px;color:var(--mute);margin-top:7px;display:flex;gap:10px;flex-wrap:wrap}
.lband .bf a{margin-left:auto;color:var(--o2);font-weight:700;text-decoration:none}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:760px){.lband{padding:12px;border-radius:16px}.lband .bn{display:none}.lband .bts{grid-template-columns:1fr 1fr 1fr;gap:6px}.lband .bt{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px}.lband .bt small{font-size:11px}.lband .bt b{font-size:17px}.lband .bf a{margin-left:0}}

.lband .bt small .bx{font-style:normal;font-size:10.5px;font-weight:800;color:var(--o2);background:#FFF1EC;border-radius:5px;padding:1px 5px;margin-left:3px}
.sdrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sdrow .sdin{width:auto;min-width:170px;padding:10px 12px}
.sdrow .chips3 button{padding:8px 14px}

.lband .bts{grid-template-columns:repeat(4,1fr)}
.lband .bt.hl{background:linear-gradient(160deg,#FFF6F2,#fff);box-shadow:inset 0 0 0 1px #FFE0D6}
.lband .bt.hl b{color:var(--o2)}
@media (max-width:760px){.lband .bts{grid-template-columns:1fr 1fr}}