/* 견적 문의 화면 (11/1 대표님 「더 고급스럽게 · 효과」) — 밝은 바탕 · 넉넉한 여백 · 움직임은 들어올 때와 마우스를 올렸을 때만 */
.qx{position:relative;overflow:hidden;padding:170px 0 120px;background:#fff}
.qx-glow{position:absolute;right:-12%;top:-18%;width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,107,26,.13),rgba(255,107,26,0));pointer-events:none}
.qx-w{position:relative;display:grid;grid-template-columns:1fr 560px;gap:80px;align-items:start}

/* 들어올 때: 아래에서 흐림 없이 또렷하게 올라옴 */
.qx-in{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .8s;transition-delay:calc(var(--d,0) * 90ms + 120ms)}
.qx.go .qx-in{opacity:1;transform:none;filter:none}

/* 왼쪽 */
.qx-eye{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#1D1D1F}
.qx-eye i{width:8px;height:8px;border-radius:50%;background:#FF6B1A;box-shadow:0 0 0 4px rgba(255,107,26,.16)}
.qx-h{margin-top:18px;font-size:68px;line-height:1.1;font-weight:800;letter-spacing:-.045em;color:#1D1D1F}
.qx-ln{display:block}
.qx-h em{font-style:normal;color:#FF6B1A}
/* 제목 돌리기 (메인과 같은 움직임) */
.qx-h{min-height:2.2em}
.qx-c{display:inline-block;opacity:0;transform:translateY(.55em) rotate(7deg) scale(.9);filter:blur(8px);animation:qxcin .5s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:var(--t)}
.qx-h em.qx-x{display:inline-block;animation:qxslam .52s cubic-bezier(.2,1.2,.35,1) both;animation-delay:var(--sd)}
.qx-l2{animation:qxhit .32s linear;animation-delay:var(--hit)}
.qx-h.qx-out .qx-c{animation:qxcout .34s cubic-bezier(.5,0,.75,0) forwards;animation-delay:var(--o)}
.qx-h.qx-out em.qx-x{animation:qxcout .3s cubic-bezier(.5,0,.75,0) forwards;animation-delay:.1s}
@keyframes qxcin{70%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes qxslam{0%{opacity:0;transform:scale(2.6) rotate(-8deg);filter:blur(10px)}55%{opacity:1;transform:scale(.92) rotate(1.5deg);filter:blur(0)}78%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes qxhit{0%,100%{transform:none}20%{transform:translate(-3px,2px)}45%{transform:translate(3px,-1px)}70%{transform:translate(-1px,1px)}}
@keyframes qxcout{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-.45em) scale(.96);filter:blur(8px)}}
.qx-h em.qx-x{transform-origin:20% 70%}
.qx-sub{margin-top:22px;font-size:18px;line-height:1.7;color:#6E6E73}

.qx-flow{list-style:none;display:flex;gap:10px;margin-top:34px}
.qx-flow li{display:flex;align-items:center;gap:8px;padding:10px 16px 10px 10px;border-radius:99px;background:#F5F5F7;font-size:14px;font-weight:700;color:#1D1D1F}
.qx-flow b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;font-size:11px;font-weight:800;color:#FF6B1A;font-variant-numeric:tabular-nums}

.qx-call{position:relative;display:block;width:max-content;margin-top:44px;padding-right:56px;color:#1D1D1F}
.qx-call small{display:block;font-size:14px;font-weight:700;color:#86868B}
.qx-call b{display:block;margin-top:6px;font-size:46px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.qx-call b:after{content:"";display:block;height:3px;margin-top:4px;border-radius:2px;background:#FF6B1A;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.qx-call i{position:absolute;right:0;bottom:12px;width:40px;height:40px;border-radius:50%;background:#1D1D1F;color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.qx-call:hover b:after{transform:scaleX(1);transform-origin:left}
.qx-call:hover i{background:#FF6B1A;transform:translateX(6px)}

.qx-ch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.qx-ch a{position:relative;display:block;padding:20px 20px 22px;border-radius:20px;background:#F5F5F7;color:#1D1D1F;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .35s}
.qx-ch span{font-size:13px;font-weight:700;color:#86868B}
.qx-ch b{display:block;margin-top:6px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.qx-ch b em{font-style:normal;font-variant-numeric:tabular-nums}
.qx-ch i{position:absolute;right:16px;top:16px;font-style:normal;font-size:14px;color:#86868B;transition:color .25s,transform .3s}
.qx-ch a:hover{transform:translateY(-4px);background:#fff;box-shadow:0 0 0 1px #E8E8ED,0 20px 34px -24px rgba(29,29,31,.3)}
.qx-ch a:hover i{color:#FF6B1A;transform:translate(2px,-2px)}

/* 오른쪽 카드: 마우스를 따라 테두리에 주황 빛 (PC) */
.qx-card{position:relative;border-radius:32px;background:#fff;padding:2px;box-shadow:0 40px 80px -40px rgba(29,29,31,.28),0 0 0 1px #E8E8ED}
.qx-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,107,26,.55),rgba(255,107,26,0) 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}
.qx-card:hover .qx-shine{opacity:1}
.qx-f,.qx-done{position:relative;border-radius:30px;background:#fff;padding:36px 38px 38px}
.qx-top{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.qx-top>div{display:flex;align-items:baseline;justify-content:space-between}
.qx-top b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#1D1D1F}
.qx-top span{font-size:14px;font-weight:700;color:#86868B;font-variant-numeric:tabular-nums}
.qx-top span em{font-style:normal;color:#FF6B1A}
.qx-bar{display:block;height:4px;border-radius:2px;background:#F0F0F3;overflow:hidden}
.qx-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#FF8A3D,#FF6B1A);transition:width .55s cubic-bezier(.2,.8,.2,1)}

.qx-sel{margin-bottom:18px}
.qx-sel>div{display:flex;gap:14px;align-items:center;padding:12px;border-radius:18px;background:#F5F5F7}
.qx-sel img{width:60px;height:60px;object-fit:contain;mix-blend-mode:multiply}
.qx-sel small{display:block;font-size:12px;font-weight:700;color:#FF6B1A}
.qx-sel b{display:block;font-size:15px;font-weight:800;color:#1D1D1F}

.qx-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
/* 떠오르는 이름표 입력칸 */
.qx-fl{position:relative;display:block}
.qx-fl input,.qx-fl textarea{width:100%;height:62px;padding:24px 18px 8px;border:0;border-radius:16px;background:#F5F5F7;font:inherit;font-size:16px;font-weight:600;color:#1D1D1F;outline:0;transition:background .25s,box-shadow .25s}
.qx-fl textarea{height:112px;padding-top:30px;resize:none;line-height:1.5}
.qx-fl span{position:absolute;left:18px;top:21px;font-size:16px;font-weight:600;color:#86868B;pointer-events:none;transform-origin:left top;transition:transform .25s cubic-bezier(.2,.8,.2,1),color .25s}
.qx-fl input:focus+span,.qx-fl input:not(:placeholder-shown)+span,.qx-fl textarea:focus+span,.qx-fl textarea:not(:placeholder-shown)+span{transform:translateY(-11px) scale(.78);color:#6E6E73}
.qx-fl input:focus+span,.qx-fl textarea:focus+span{color:#FF6B1A}
.qx-fl input:focus,.qx-fl textarea:focus,.qx-sl select:focus{background:#fff;box-shadow:0 0 0 2px #FF6B1A,0 8px 22px -12px rgba(255,107,26,.5)}
.qx-fl.ok:after{content:"";position:absolute;right:18px;top:24px;width:12px;height:7px;border-left:2.5px solid #FF6B1A;border-bottom:2.5px solid #FF6B1A;transform:rotate(-45deg);animation:qxok .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes qxok{from{opacity:0;transform:rotate(-45deg) scale(.3)}}
.qx-ta{margin-bottom:16px}

.qx-g{margin:6px 0 16px}
.qx-lb{font-size:14px;font-weight:700;color:#1D1D1F;margin-bottom:8px}
/* 고르기 단추: 흰 알약이 미끄러짐 */
.qx-seg{position:relative;display:flex;padding:5px;border-radius:16px;background:#F5F5F7}
.qx-seg button{position:relative;z-index:1;flex:1;height:46px;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:#86868B;cursor:pointer;transition:color .25s;white-space:nowrap}
.qx-seg button.on{color:#1D1D1F}
.qx-pill{position:absolute;top:5px;bottom:5px;left:0;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(29,29,31,.09);transition:transform .45s cubic-bezier(.3,1.25,.5,1),width .45s cubic-bezier(.3,1.25,.5,1)}

.qx-sl{position:relative;display:block}
.qx-sl span{position:absolute;left:18px;top:9px;font-size:12px;font-weight:600;color:#6E6E73;pointer-events:none}
.qx-sl select{width:100%;height:62px;padding:22px 40px 6px 18px;border:0;border-radius:16px;background:#F5F5F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;font:inherit;font-size:16px;font-weight:600;color:#1D1D1F;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .25s,box-shadow .25s}

.qx-agr{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#4E5968;cursor:pointer;margin-bottom:22px}
.qx-agr input{position:absolute;opacity:0;width:1px;height:1px}
.qx-agr i{flex:none;width:24px;height:24px;border-radius:8px;background:#F0F0F3;box-shadow:inset 0 0 0 1.5px #D2D2D7;display:flex;align-items:center;justify-content:center;transition:background .25s,box-shadow .25s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.qx-agr i:after{content:"";width:10px;height:5px;margin-top:-3px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.qx-agr input:checked+i{background:#FF6B1A;box-shadow:none;transform:scale(1.06)}
.qx-agr input:checked+i:after{transform:rotate(-45deg) scale(1)}
.qx-agr input:focus-visible+i{box-shadow:0 0 0 3px rgba(255,107,26,.35)}
.qx-agr a{margin-left:2px;color:#86868B;text-decoration:underline;text-underline-offset:3px}
.qx-agr.need i{animation:qxshake .4s}
@keyframes qxshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 접수 단추 (11/1 「더 이펙트」)
   - 필수 세 칸을 다 채우면 검정 → 주황으로 톡 튀며 빛이 한 번 지나감
   - 마우스: 글자가 살짝 따라오고 빛이 지나감 · 누른 자리에서 물결
   - 접수: 동그라미로 줄며 돌다가 체크 → 조각이 터지고 완료 화면 */
.qx-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:64px;margin:0 auto;border:0;border-radius:18px;background:#1D1D1F;color:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer;transition:background .35s,width .5s cubic-bezier(.65,0,.35,1),border-radius .5s cubic-bezier(.65,0,.35,1),box-shadow .35s,transform .2s}
.qx-go:before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none}
.qx-go:hover{background:#FF6B1A}
.qx-go.ready{background:#FF6B1A;box-shadow:0 16px 30px -14px rgba(255,107,26,.75);animation:qxpop .5s cubic-bezier(.3,1.6,.5,1)}
.qx-go.ready:hover{background:#F25C0C}
.qx-go:active{transform:scale(.985)}
.qx-gt{position:relative;display:inline-flex;align-items:center;gap:10px;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.qx-gt i{font-style:normal;transition:transform .3s}
.qx-go:hover .qx-gt i,.qx-go.ready .qx-gt i{transform:translateX(5px)}
@keyframes qxpop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
.qx-go.nope{animation:qxshake .4s}
.qx-rp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:qxrp .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes qxrp{to{transform:scale(60);opacity:0}}
/* 접수 중: 동그라미로 줄며 테두리가 돎 */
.qx-go.busy{width:64px;border-radius:32px;background:#FF6B1A;box-shadow:0 14px 30px -12px rgba(255,107,26,.8);cursor:default}
.qx-go.busy .qx-gt{opacity:0;transform:none!important}
.qx-go:after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;transition:opacity .2s}
.qx-go.busy:after{opacity:1;animation:qxspin .7s linear infinite;transition-delay:.35s}
.qx-go.ok:after{opacity:0;transition-delay:0s}
@keyframes qxspin{to{transform:rotate(360deg)}}
.qx-gk{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;opacity:0}
.qx-go.ok .qx-gk{opacity:1;animation:qxdraw .35s cubic-bezier(.6,0,.3,1) forwards}
.qx-go.ok{animation:qxpop .45s cubic-bezier(.3,1.6,.5,1)}
/* 터지는 조각 */
.qx-pt{position:absolute;z-index:5;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:2px;pointer-events:none;animation:qxpt 1.1s cubic-bezier(.15,.7,.3,1) forwards}
.qx-pt2{width:6px;height:6px;border-radius:50%}
@keyframes qxpt{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 70px)) rotate(var(--r)) scale(1);opacity:0}}
/* 완료 화면 글자가 차례로 */
.qx-done>*:not(svg){animation:qxup .6s cubic-bezier(.2,.8,.2,1) both}
.qx-done>b{animation-delay:.45s}.qx-done>span{animation-delay:.55s}.qx-done>small{animation-delay:.65s}.qx-done>button{animation-delay:.75s}
@keyframes qxup{from{opacity:0;transform:translateY(14px);filter:blur(4px)}}
.qx-fl.need input{box-shadow:0 0 0 2px #FF6B1A;background:#FFF6F0}

/* 접수 뒤: 체크 표시가 그려짐 */
.qx-done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 38px}
.qx-done[hidden]{display:none}
.qx-done svg{width:76px;height:76px;fill:none;stroke:#FF6B1A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qx-done circle{stroke-dasharray:151;stroke-dashoffset:151;animation:qxdraw .7s cubic-bezier(.6,0,.3,1) forwards}
.qx-done path{stroke-dasharray:36;stroke-dashoffset:36;animation:qxdraw .45s .55s cubic-bezier(.6,0,.3,1) forwards}
@keyframes qxdraw{to{stroke-dashoffset:0}}
.qx-done b{margin-top:22px;font-size:26px;font-weight:800;letter-spacing:-.03em;color:#1D1D1F}
.qx-done span{margin-top:8px;font-size:16px;color:#6E6E73}
.qx-done small{margin-top:18px;font-size:13px;color:#86868B}
.qx-done button{margin-top:26px;height:46px;padding:0 22px;border:0;border-radius:99px;background:#F5F5F7;font:inherit;font-size:15px;font-weight:700;color:#1D1D1F;cursor:pointer}

@media (max-width:1100px){.qx-w{grid-template-columns:1fr 500px;gap:48px}.qx-h{font-size:56px}.qx-call b{font-size:40px}}
@media (max-width:900px){
  .qx{padding:104px 0 72px}
  .qx-glow{width:420px;height:420px;right:-40%;top:-6%}
  .qx-w{grid-template-columns:1fr;gap:34px}
  .qx-h{font-size:40px;margin-top:14px}
  .qx-sub{font-size:15.5px;margin-top:16px}
  .qx-flow{flex-wrap:wrap;gap:8px;margin-top:22px}
  .qx-flow li{font-size:13px;padding:7px 12px 7px 7px}
  .qx-flow b{width:22px;height:22px;font-size:10px}
  .qx-call,.qx-ch{display:none}
  .qx-card{border-radius:26px}
  .qx-f,.qx-done{border-radius:24px;padding:24px 18px 22px}
  .qx-row{grid-template-columns:1fr;gap:10px;margin-bottom:10px}
  .qx-seg button{font-size:14px;height:42px}
}
@media (prefers-reduced-motion:reduce){.qx-in,.qx-c,.qx-h em.qx-x,.qx-l2{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}}

/* 접수 단추 기본 효과 (11/1 대표님 「마우스 올렸을 때 말고 기본으로」) — 빛이 저절로 지나감 · 둘레로 은은한 물결 · 화살표가 앞으로 톡톡 */
.qx-go{animation:qxwave 2.6s ease-out infinite}
.qx-go:before{animation:qxsweep 3.2s cubic-bezier(.4,0,.2,1) infinite}
.qx-gt i{animation:qxnudge 1.6s ease-in-out infinite}
.qx-go.ready{animation:qxpop .5s cubic-bezier(.3,1.6,.5,1),qxwave2 2s ease-out .5s infinite}
.qx-go.ready:before{animation-duration:2.2s}
.qx-go.busy{animation:none}.qx-go.busy:before{animation:none;opacity:0}
.qx-go.ok{animation:qxpop .45s cubic-bezier(.3,1.6,.5,1)}
.qx-go.nope{animation:qxshake .4s}
@keyframes qxsweep{0%{left:-40%}45%,100%{left:130%}}
@keyframes qxnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes qxwave{0%{box-shadow:0 0 0 0 rgba(29,29,31,.28)}70%,100%{box-shadow:0 0 0 12px rgba(29,29,31,0)}}
@keyframes qxwave2{0%{box-shadow:0 16px 30px -14px rgba(255,107,26,.75),0 0 0 0 rgba(255,107,26,.5)}70%,100%{box-shadow:0 16px 30px -14px rgba(255,107,26,.75),0 0 0 14px rgba(255,107,26,0)}}
@media (prefers-reduced-motion:reduce){.qx-go,.qx-go:before,.qx-gt i{animation:none!important}}
.qx-so{display:block;font-style:normal;font-size:13px;font-weight:600;color:#6E6E73;margin-top:3px;word-break:keep-all}
/* 제목 큰 따옴표 (11/2) — 메인 첫 화면과 같은 연한 배경 따옴표 · 고정 */
.qx-hw{position:relative}
.qx-hw .qx-h{position:relative;z-index:1}
.qx-q{position:absolute;z-index:0;font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;color:#FF6B1A;opacity:0;pointer-events:none;user-select:none;font-size:150px;animation:qxQ 1s cubic-bezier(.2,.7,.2,1) .2s forwards}
.qx-q1{left:-.2em;top:-.12em}
.qx-q2{left:calc(var(--qw,0px) - .2em);bottom:-.62em}
@keyframes qxQ{from{opacity:0;transform:translateY(.12em) scale(.92)}to{opacity:.13;transform:none}}
@media (max-width:860px){.qx-q{font-size:104px}.qx-q1{left:-.14em;top:-.1em}.qx-q2{bottom:-.55em}}
@media (prefers-reduced-motion:reduce){.qx-q{animation:none;opacity:.13}}

.qx-done[hidden],.qx-f[hidden]{display:none!important}