/* PlutWeb 주문 · 결제 페이지 — teamplut.com/design 디자인 코드(site.tpl.css 실측값)를 그대로 옮김 */
:root{--blue:#1557F3;--sky:#1289F3;--navy:#0D225D;--foot:#071438;--ink:#111;--ink2:#282828;--g1:#404040;--g2:#525252;--g3:#636363;--line:#E5E5E5;--sans:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;--en:"Satoshi","Pretendard Variable",Pretendard,sans-serif;--gut:max(20px,4.167vw);--hh:max(64px,6.944vw)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{font-family:var(--sans);background:#fff;color:var(--ink);word-break:keep-all;overflow-x:clip;max-width:100vw;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}button{font-family:inherit;color:inherit}
p,li,.hint{text-wrap:pretty}
/* 머리말 */
.hdr{position:fixed;inset:0 0 auto;z-index:80;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);background:#fff;transition:background .3s}
.logo{font-weight:800;font-size:max(20px,1.875vw);letter-spacing:-.045em;color:var(--ink);display:inline-flex;align-items:baseline;gap:.45em;white-space:nowrap}
.logo u{display:inline-block;width:.24em;height:.24em;background:var(--blue);margin:0 .04em;text-decoration:none}
.logo small{font-family:var(--en);font-size:.46em;font-weight:700;letter-spacing:.16em;opacity:.55}
.hdr-r{display:flex;align-items:center;gap:max(10px,1.944vw)}
.btn-q{border:1.5px solid var(--ink);border-radius:100px;padding:0 max(14px,1.528vw);height:max(36px,3.056vw);display:inline-flex;align-items:center;font-size:max(13px,1.250vw);font-weight:500;transition:.25s}.btn-q:hover{background:var(--ink);color:#fff}
/* 히어로 — /design 홈의 .hero/.hcopy/.pf 실측값 */
.hero{position:relative;height:100svh;min-height:600px;background:var(--blue);color:#fff;overflow:hidden;z-index:0;display:flex;flex-direction:column;justify-content:flex-end}
.hero .doty{position:absolute;left:57.9%;top:max(10px,3.5vw);z-index:1;width:max(18px,2.639vw);aspect-ratio:1;border-radius:50%;background:#FFE83A;animation:fl 5s ease-in-out infinite}
.pf{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.45em;border-radius:999px;font-family:var(--sans);font-weight:700;letter-spacing:-.015em;white-space:nowrap;height:2.34em;padding:0 1.06em;overflow:hidden;animation:fl 7s ease-in-out infinite;transition:box-shadow .35s}
.pf span{position:relative;z-index:1}.pf.n{background:#2F4CAB;color:#fff}.pf.c{background:#CFF7FF;color:#0D225D;height:2.8em;padding:0 1.5em}.pf.b{background:#0A49F3;color:#fff}.pf.v{background:#ECECF7;color:#1B2340}
.pf.b:before{content:"";flex:0 0 auto;width:1.2em;height:1.2em;border-radius:50%;background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hcopy{position:relative;margin:0 var(--gut) max(96px,9.5vw);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;z-index:3;opacity:0;transform:translateY(24px);transition:opacity 1s .2s,transform 1s .2s cubic-bezier(.2,.85,.25,1)}
.hero.in .hcopy{opacity:1;transform:none}
.hcopy .ey{font-size:max(18px,2.500vw);font-weight:500;letter-spacing:-.027em;line-height:1.3}.hcopy .ey em{font-style:normal;color:#FFE83A;font-size:1.5em;line-height:0}
.hcopy h1{margin-top:max(10px,1.319vw);font-size:max(34px,5.208vw);font-weight:700;letter-spacing:-.027em;line-height:1.2}
.hcopy .sub{flex:0 0 auto;border-left:1px solid rgba(255,255,255,.5);padding:0 0 max(10px,1.806vw) max(16px,2.778vw);font-size:max(14px,1.458vw);font-weight:500;line-height:1.5;letter-spacing:-.027em;min-height:13.194vw;display:flex;align-items:flex-end}
.hdr.on-dark{background:transparent}.hdr.on-dark .logo,.hdr.on-dark .btn-q{color:#fff}.hdr.on-dark .logo u{background:#fff}.hdr.on-dark .btn-q{border-color:rgba(255,255,255,.7)}.hdr.on-dark .btn-q:hover{background:#fff;color:var(--blue)}
/* 질문지 틀 */
.cf{display:grid;grid-template-columns:38.750vw 1fr;padding:max(50px,10.417vw) var(--gut) 0;align-items:start}
.steps{position:sticky;top:30vh;padding-left:3.333vw;font-family:var(--en);font-size:max(30px,5.278vw);font-weight:500;line-height:1.6}
.steps a{display:flex;align-items:center;color:#C4C4C4;transition:color .35s}
.steps a:before{content:"";width:.2em;height:.2em;border-radius:50%;background:#2B7FF2;margin-left:-.58em;margin-right:.38em;opacity:0;transform:scale(0);transition:.35s}
.steps a.on{color:var(--ink2)}.steps a.on:before{opacity:1;transform:none}
.steps a small{font-family:var(--sans);font-size:.36em;font-weight:500;margin-left:.6em;color:#9A9A9A;letter-spacing:-.02em}
.fs{padding-bottom:max(70px,13.889vw);scroll-margin-top:18vh;position:relative}
.fs .no{font-size:16px;font-weight:500;color:var(--ink2)}.fs .no b{font-family:var(--en);font-weight:500;margin-right:.5em}.fs .no i{font-style:normal;color:#2B7FF2;margin-left:4px}
.fs h3{margin-top:max(6px,0.556vw);font-size:max(20px,2.222vw);font-weight:700;line-height:1.6;color:var(--ink);letter-spacing:-.02em}
.fs .hint{margin-top:max(4px,0.556vw);font-size:max(14px,1.250vw);color:var(--g1)}
.chips{display:flex;flex-wrap:wrap;gap:max(8px,0.833vw);margin-top:max(20px,3.333vw)}
.chips label{position:relative}.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;border:1px solid #D4D4D4;border-radius:999px;height:max(42px,4.028vw);padding:0 max(16px,1.736vw);font-size:16px;color:var(--ink);transition:.25s;cursor:pointer}
.chips label:hover span{border-color:var(--ink)}.chips input:checked+span{background:#2B7FF2;border-color:#2B7FF2;color:#fff}.chips input:focus-visible+span{outline:2px solid #2B7FF2;outline-offset:2px}
.fld{margin-top:max(20px,3.333vw);display:grid;grid-template-columns:1fr 1fr;gap:max(18px,2.500vw) max(16px,1.667vw)}.fld .full{grid-column:1/-1}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-bottom:1px solid #D4D4D4;background:none;font:inherit;font-size:18px;height:max(54px,5.000vw);padding:0 max(6px,1.111vw);color:var(--ink);border-radius:0;outline:0;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.fld ::placeholder{color:#777}
.fld textarea{border:1px solid #D4D4D4;height:max(150px,16vw);padding:max(14px,1.667vw);resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#2B7FF2}
.tip{margin-top:max(11px,0.972vw);padding-left:max(10px,0.903vw);border-left:2px solid #E3EBFA;font-size:max(12.5px,0.903vw);line-height:1.75;color:var(--g2);letter-spacing:-.02em}
/* 요금제 카드 — /design 홈 .scard(그라데이션 카드) 문법 */
.plans{margin-top:max(20px,3.333vw);display:grid;grid-template-columns:repeat(3,1fr);gap:max(10px,1.111vw)}
.plan{position:relative;display:block;cursor:pointer}.plan input{position:absolute;opacity:0;pointer-events:none}
.plan>div{position:relative;border-radius:max(16px,1.667vw);padding:max(20px,2.222vw) max(18px,1.944vw) max(18px,1.806vw);min-height:max(250px,22vw);display:flex;flex-direction:column;color:#fff;overflow:hidden;transition:transform .45s cubic-bezier(.2,.85,.25,1),box-shadow .45s;box-shadow:0 0 0 0 rgba(0,0,0,0)}
.plan.p20>div{background:linear-gradient(120deg,#1E90FF,#0F7BFF)}.plan.p40>div{background:linear-gradient(120deg,#12D07A,#08BD68)}.plan.p80>div{background:linear-gradient(120deg,#7B5CFF,#5A3BE6)}
.plan:hover>div{transform:translateY(-4px)}
.plan input:checked+div{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink);transform:translateY(-4px)}
.plan input:checked+div:after{content:"선택됨";position:absolute;right:max(14px,1.389vw);top:max(14px,1.389vw);background:#fff;color:var(--ink);font-size:max(11px,0.9vw);font-weight:800;padding:.35em .8em;border-radius:999px}
.plan .pk{font-family:var(--en);font-size:max(12px,0.972vw);font-weight:700;letter-spacing:.12em;opacity:.85}
.plan h4{margin-top:max(6px,0.556vw);font-size:max(20px,2vw);font-weight:700;letter-spacing:-.027em;line-height:1.3}
.plan .pr{margin-top:max(10px,1.111vw);font-size:max(15px,1.25vw);font-weight:600}.plan .pr b{font-family:var(--en);font-size:max(32px,3.6vw);font-weight:700;letter-spacing:-.04em;line-height:1;margin-right:2px}
.plan ul{margin-top:max(12px,1.25vw);padding-left:0;list-style:none;font-size:max(13px,1.042vw);line-height:1.75;flex:1;opacity:.95}.plan li:before{content:"·";margin-right:6px}
.plan .pd{margin-top:max(14px,1.25vw);display:inline-flex;align-items:center;height:max(38px,3.2vw);padding:0 max(14px,1.5vw);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;font-size:max(12.5px,1.05vw);font-weight:700;align-self:flex-start}
.plan .pick{position:absolute;top:max(14px,1.389vw);right:max(14px,1.389vw);background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.plan input:checked+div .pick{display:none}
/* 결제 요약 */
.sum{margin-top:max(20px,3.333vw);border:1px solid var(--line);border-radius:max(14px,1.389vw);background:#F7F9FD;padding:max(20px,2.083vw)}
.sum .sr{display:flex;justify-content:space-between;gap:16px;padding:max(9px,0.833vw) 0;border-bottom:1px solid #E6EAF2;font-size:max(14px,1.111vw);color:var(--g2)}.sum .sr b{color:var(--ink);font-weight:600}
.sum .sr.tot{border:0;padding-top:max(14px,1.25vw);font-size:max(16px,1.389vw);color:var(--ink);font-weight:700}.sum .sr.tot b{font-family:var(--en);font-size:max(26px,2.5vw);letter-spacing:-.03em}
.sum .sn{margin-top:max(10px,0.972vw);font-size:max(12.5px,0.938vw);color:var(--g2);line-height:1.75}
.agree{margin-top:max(18px,1.806vw);display:flex;gap:10px;align-items:flex-start;font-size:max(13.5px,1.042vw);color:var(--g1);line-height:1.6}.agree input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{margin-top:max(14px,1.25vw);font-size:max(13.5px,1.042vw);font-weight:600;color:#D33A3A;min-height:1.6em}.msg.ok{color:var(--blue)}
.sendw{display:grid;place-items:center;padding:max(20px,2.778vw) 0 max(100px,18.056vw)}
.send{width:max(260px,29.167vw);aspect-ratio:1;border-radius:50%;border:0;background:#F5F5F5;display:grid;place-content:center;text-align:center;transition:background .5s,color .5s,transform .6s cubic-bezier(.2,.9,.3,1);color:#BFBFBF;cursor:pointer}
.send b{display:block;font-size:max(36px,4.167vw);font-weight:400;line-height:1.2}.send b+b{font-family:var(--en);font-weight:700}.send span{display:block;margin-top:max(12px,1.806vw);font-size:max(14px,1.389vw);font-weight:500}
.send:hover,.send.ok{background:#2B7FF2;color:#fff;transform:scale(1.05)}.send[disabled]{opacity:.6;pointer-events:none}
/* 푸터 */
.foot{position:relative;z-index:6;background:var(--foot);color:#fff;padding:max(40px,5.5vw) var(--gut) max(30px,3.750vw)}
.foot .fbig{display:block;font-size:max(24px,3.2vw);font-weight:500;letter-spacing:-.027em;line-height:1.2}.foot .fbig b{font-weight:700}
.foot .fb{margin-top:max(30px,4vw);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:500;line-height:1.9;color:#909EAE}.foot .fb .cp2{color:#647180;font-family:var(--en)}
/* 작업현황 · 관리 */
.sx{padding:calc(var(--hh) + max(40px,5vw)) var(--gut) max(80px,8vw);max-width:820px;margin:0 auto}
.sx-top{font-family:var(--en);font-size:max(13px,1vw);font-weight:700;letter-spacing:.12em;color:var(--blue)}
.sx-h{margin-top:12px;font-size:max(26px,2.8vw);font-weight:800;letter-spacing:-.04em;line-height:1.3}
.sx-meta{margin-top:10px;font-size:max(14px,1.05vw);color:var(--g2);line-height:1.75}
.sx-bar{margin-top:22px;height:8px;border-radius:99px;background:#EEF1F6;overflow:hidden}.sx-bar i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .8s}
.sx-pay{margin-top:22px;border:1px solid #D9E4FB;background:#F2F6FF;border-radius:14px;padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.sx-pay p{font-size:15px;line-height:1.7;color:var(--ink2)}
.btn.bl{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;border:0;cursor:pointer}
.sx-list{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.sx-li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);color:#9A9A9A}.sx-li.done{color:var(--ink2)}.sx-li.now{color:var(--ink)}
.sx-dot{width:30px;height:30px;border-radius:50%;border:1.5px solid #D4D4D4;display:grid;place-items:center;font-size:13px;font-weight:700}.sx-li.done .sx-dot{background:var(--ink);border-color:var(--ink);color:#fff}.sx-li.now .sx-dot{border-color:var(--blue);color:var(--blue)}
.sx-li h4{font-size:16px;font-weight:700;display:flex;gap:10px;align-items:baseline}.sx-at{font-size:12px;font-weight:500;color:#9A9A9A}.sx-li p{margin-top:4px;font-size:14px;color:var(--g2);line-height:1.7}
.sx-box{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:18px 20px}.sx-box h3{font-size:15px;font-weight:800;letter-spacing:-.03em}
.sx-log{list-style:none;margin-top:8px}.sx-log li{font-size:14px;line-height:1.7;color:var(--ink2);padding:6px 0;border-top:1px solid #F0F0F0}.sx-log time{display:block;font-size:12px;color:#9A9A9A}
.sx-err{padding:30px;border:1px solid #F3C9C9;background:#FFF5F5;border-radius:14px;font-size:15px;line-height:1.8;color:#8A2626}
.ad-key{display:flex;gap:8px;margin-top:16px}.ad-key input{flex:1;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font:inherit}.ad-key button{height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}
.ad-tbl{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.ad-row{border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.7;color:var(--ink2)}
.ad-row h4{font-size:16px;font-weight:800;letter-spacing:-.03em;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ad-row .st{font-size:12px;font-weight:700;color:#fff;background:var(--blue);padding:2px 10px;border-radius:999px}.ad-row .st.n{background:#9A9A9A}.ad-row .st.p{background:#1a7f37}
.ad-row details{margin-top:6px}.ad-row summary{cursor:pointer;font-weight:600;color:var(--blue)}.ad-row pre{white-space:pre-wrap;font:inherit;font-size:13px;background:#F7F9FD;border-radius:10px;padding:12px;margin-top:8px}
.ad-ctl{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.ad-ctl select,.ad-ctl input{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;width:100%}.ad-ctl textarea{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;min-height:70px}
.ad-ctl label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g2)}.ad-ctl .ad-go{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}.ad-ctl button{height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}.ad-ctl button.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media(max-width:860px){.cf{grid-template-columns:1fr}.steps{position:static;display:flex;gap:18px;margin-bottom:40px;flex-wrap:wrap}.steps a:before{margin-left:0}.steps a small{display:none}.fld{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.plan>div{min-height:0}.ad-ctl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pt h1 .l>span{transform:none}.pt .sub{opacity:1;transform:none}}

/* 스크롤 안내 — /design 홈 히어로 아래 */
.hero .scr{position:absolute;left:var(--gut);bottom:max(26px,2.6vw);z-index:3;display:inline-flex;align-items:center;gap:12px;font-family:var(--en);font-size:max(12px,0.9vw);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);opacity:0;transition:opacity 1s 1.1s}
.hero.in .scr{opacity:1}
.hero .scr i{position:relative;width:max(22px,1.8vw);height:max(34px,2.8vw);border:1.5px solid rgba(255,255,255,.7);border-radius:999px}
.hero .scr i:after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#FFE83A;animation:scr 1.8s ease-in-out infinite}
@keyframes scr{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media(max-width:860px){.hero{min-height:560px}.hcopy{margin-bottom:max(84px,20vw)}}
@media(max-width:860px){.hcopy{flex-direction:column;align-items:flex-start;gap:18px}.hcopy .sub{min-height:0;border-left:0;padding:0}.pf.v{left:auto!important;right:6%}.pf.b{left:40%!important}}
.gostart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:inline-flex;align-items:center;gap:14px;height:max(56px,5.2vw);padding:0 max(26px,2.6vw) 0 max(30px,3vw);border-radius:999px;background:#fff;color:var(--blue);font-size:max(16px,1.55vw);font-weight:800;letter-spacing:-.03em;box-shadow:0 20px 50px rgba(4,20,70,.28);transition:transform .5s cubic-bezier(.2,.9,.3,1),box-shadow .4s}
.gostart:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 28px 60px rgba(4,20,70,.36)}.gostart i{font-style:normal;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--blue);color:#fff;font-size:.9em;transform:rotate(90deg)}
.hdr-r .btn-q+.btn-q{margin-left:0}
@media(max-width:860px){.gostart{top:46%;font-size:15px;height:50px}.hdr-r .btn-q:first-child{display:none}}