/* v16: 히어로 재구성 · 서류 패키지 · 데이터 삭제 · 현장 슬라이더 · IDC · CI/BI · 품목 전체 · 견적창(밝은 화면) */

/* 헤더: 블로그 버튼 · 매입 품목 드롭다운 */
.hd-act .bl{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#d2d2d7;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.hd-act .bl svg{width:16px;height:16px}
.hd-act .bl:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.dd{position:relative}
.ddm{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);width:640px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;background:rgba(14,15,17,.97);border:1px solid #23262b;border-radius:18px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dd:hover .ddm,.dd:focus-within .ddm{opacity:1;visibility:visible;transform:translate(-50%,14px)}
.ddm a{display:grid;gap:6px;padding:8px;border-radius:12px;color:#f5f5f7;font-size:14px;font-weight:700}
.ddm a:hover{background:#1a1c20}
.ddm img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000}
.ms-bl{background:#fff;color:#111}
.ms-act a svg{width:18px;height:18px}
@media (max-width:1180px){.hd-act .bl{display:none}}

/* 메인 히어로: 버튼 없이 글자만 크게 + WATCH */
.hero2 .copy{padding-bottom:clamp(56px,10vh,110px)}
.hero2::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%),linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0) 62%)}
.eyebrow2{font-size:clamp(14px,1.2vw,16px);font-weight:700;letter-spacing:.32em;color:#c7c7cc;margin-bottom:16px}
.hero2 h1{font-size:clamp(46px,7.6vw,132px)}
.hero2 .ln{width:min(520px,62vw);margin:26px 0 24px}
.tagline{font-size:clamp(28px,3.6vw,54px);font-weight:800;line-height:1.16;letter-spacing:-.05em;color:#fff}
.watch{display:inline-flex;align-items:center;gap:14px;margin-top:36px;background:none;border:0;color:#fff;padding:0;text-align:left}
.watch i{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;font-style:normal;transition:transform .3s,background .3s;position:relative}
.watch i::before{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.watch i::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.25);animation:ring 2.4s infinite}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
.watch:hover i{background:rgba(255,255,255,.12);transform:scale(1.05)}
.watch span{display:grid;font-size:13.5px;color:#c7c7cc;font-weight:600}
.watch span b{font-family:var(--en);font-stretch:125%;font-size:20px;letter-spacing:.14em;color:#fff;font-weight:800}
.watch.sm{margin-top:6px}

/* 품목 타일: 6개 모두 회전 영상 */
.tiles .t-sto,.tiles .t-srv,.tiles .t-net{grid-column:span 2;min-height:440px}
.tile .media.turn{top:36%;bottom:0;height:auto}
.t-mem .media.turn{top:30%}

/* 서류 패키지 흐름 */
.docflow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:d;position:relative}
.df{background:#fff;border-radius:20px;padding:24px 20px;display:grid;gap:8px;align-content:start;position:relative}
.df .n{font-family:var(--en);font-stretch:125%;font-weight:800;font-size:14px;color:#0071e3;letter-spacing:.06em}
.df b{font-size:19px;letter-spacing:-.035em}
.df p{color:var(--ink2);font-size:14.5px;line-height:1.55}
.df:not(:last-child)::after{content:"›";position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--paper);color:#86868b;display:grid;place-items:center;font-size:18px;z-index:2}
@media (max-width:1000px){.docflow{grid-template-columns:1fr 1fr}.df:not(:last-child)::after{display:none}}
@media (max-width:560px){.docflow{grid-template-columns:1fr}}

/* 실제 사례 카드 */
.case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#fff;border-radius:26px;overflow:hidden;margin-top:28px}
.case .im{position:relative;min-height:320px}
.case .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .im em,.slide .im em,.gi figcaption em{font-style:normal;font-size:12px;font-weight:700;color:#000;background:#ffcf5a;border-radius:999px;padding:3px 10px}
.case .im em{position:absolute;left:16px;top:16px}
.case .bd{padding:clamp(26px,4vw,48px);display:grid;gap:14px;align-content:center}
.tag2{justify-self:start;font-size:12.5px;font-weight:800;color:#0071e3;background:#e8f2fd;border-radius:999px;padding:4px 12px}
.case h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1.22}
.case p{color:var(--ink2);font-size:16px}
.case .q{color:var(--ink);font-weight:700;border-left:3px solid #0071e3;padding-left:14px}
.case.dk{background:#101114;margin-bottom:22px}.case.dk p{color:#a1a1a6}.case.dk h3{color:#fff}.case.dk .tag2{background:rgba(41,151,255,.14);color:#2997ff}
@media (max-width:860px){.case{grid-template-columns:1fr}.case .im{min-height:240px}}

/* 데이터 삭제 3카드 */
.wipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wc{background:#101114;border:1px solid #1d1f23;border-radius:22px;overflow:hidden;display:grid;align-content:start}
.wc .im{aspect-ratio:4/3;overflow:hidden}
.wc .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wc:hover .im img{transform:scale(1.05)}
.wc b{font-size:20px;letter-spacing:-.035em;padding:20px 22px 0}
.wc p{color:#a1a1a6;font-size:15px;padding:6px 22px 24px}
.lightw .wc{background:#fff;border-color:#e6e6ea}.lightw .wc p{color:var(--ink2)}
@media (max-width:860px){.wipe{grid-template-columns:1fr}}

/* 매입확인서 */
.certrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;margin-top:clamp(40px,6vw,70px)}
.cert{background:#fff;color:#1d1d1f;border-radius:8px;padding:28px 26px 30px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:rotate(-1.2deg);display:grid;gap:10px;max-width:520px}
.light2 .cert{box-shadow:0 30px 60px -34px rgba(0,0,0,.35)}
.cert .ex{justify-self:start;font-size:11px;color:#b25000;border:1px solid #f0c08a;border-radius:4px;padding:1px 7px}
.cert .ct{font-size:20px;font-weight:800;letter-spacing:.3em;text-align:center;padding-bottom:10px;border-bottom:2px solid #1d1d1f}
.cert .cr{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:14px;padding:8px 2px;border-bottom:1px solid #ececef}
.cert .cr span:first-child{color:#6e6e73}
.cert .cr.hl{background:#eaf6ef;border-radius:6px;padding-inline:8px;border-bottom-color:transparent}
.cert .cr.hl span:last-child{font-weight:700;color:#0a7d4f}
.cert .seal{position:absolute;right:22px;bottom:18px;width:56px;height:56px;border-radius:50%;border:2.5px solid #d33;color:#d33;font-size:10px;font-weight:800;display:grid;place-items:center;text-align:center;line-height:1.1;transform:rotate(-12deg);opacity:.85}
.certtxt h3{font-size:clamp(24px,2.8vw,36px);font-weight:800;letter-spacing:-.045em;line-height:1.2}
.certtxt ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.certtxt li{display:flex;gap:10px;font-size:16.5px;color:#c7c7cc}
.light2 .certtxt li{color:var(--ink2)}
.certtxt li::before{content:"✓";color:var(--gpu);font-weight:800}
.certtxt li b{color:#fff}.light2 .certtxt li b{color:var(--ink)}
@media (max-width:860px){.certrow{grid-template-columns:1fr}}

/* 매입 현장 슬라이더 */
.dark2{background:#0b0c0e}
.slhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.slnav{display:flex;gap:8px}
.slnav button{width:48px;height:48px;border-radius:50%;border:1px solid #2a2d33;background:#16181b;color:#fff;font-size:24px;line-height:1}
.slnav button:hover{background:#23262b}
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,31%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#2a2d33 transparent}
.slide{scroll-snap-align:start;background:#141518;border:1px solid #1f2125;border-radius:22px;overflow:hidden}
.slide .im{aspect-ratio:4/3;position:relative;overflow:hidden}
.slide .im img{width:100%;height:100%;object-fit:cover}
.slide .im em{position:absolute;left:12px;top:12px}
.slide .bd{padding:18px 20px 22px;display:grid;gap:4px}
.slide h3{font-size:19px;font-weight:800;letter-spacing:-.035em}
.slide .s1{color:#d2d2d7;font-size:15px}
.slide .s2{color:#86868b;font-size:13.5px}
@media (max-width:760px){.slider{grid-auto-columns:84%}.slnav{display:none}}

/* IDC */
.idc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center}
.idc .big{display:flex;align-items:baseline;gap:8px}
.idc .big small{font-size:.32em;-webkit-text-fill-color:#c7c7cc;font-family:var(--kr);font-weight:800}
.idc-txt{color:#a1a1a6;font-size:16px;margin:18px 0 14px;max-width:34em}
.idc .more{color:#2997ff}
.idc-ph{position:relative;aspect-ratio:5/4}
.idc-ph img{position:absolute;border-radius:20px;object-fit:cover;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.idc-ph .a{left:0;top:0;width:78%;height:74%}
.idc-ph .b{right:0;bottom:0;width:52%;height:56%;border:6px solid #000}
@media (max-width:900px){.idc{grid-template-columns:1fr}}

/* 브랜드 이야기 · CI */
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sv{background:#fff;border-radius:24px;padding:30px 28px;display:grid;gap:10px;align-content:start}
.sv .w{font-family:var(--en);font-stretch:125%;font-weight:250;font-size:clamp(30px,3vw,42px);letter-spacing:.04em;color:#1d1d1f}
.sv:nth-child(2) .w{font-weight:800}
.sv .w.g{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv b{font-size:19px}
.sv p{color:var(--ink2);font-size:15px}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.ci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,70px);align-items:center}
.ci-logo{background:#0d0e10;border:1px solid #1d1f23;border-radius:26px;aspect-ratio:4/3;display:grid;place-content:center;justify-items:center;gap:14px;padding:30px}
.ci-logo .sym{width:110px;height:100px}
.ci-logo .wm{font-family:var(--en);font-stretch:100%;font-size:clamp(26px,3vw,38px);letter-spacing:.14em;font-weight:300}
.ci-logo .wm strong{font-weight:700}
.ci-logo .wk{font-size:14px;letter-spacing:.5em;color:#86868b}
.ci-desc{display:grid;gap:22px}
.ci-desc b{font-size:19px}
.ci-desc p{color:#a1a1a6;font-size:15px;margin-top:4px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 2px;vertical-align:0}
@media (max-width:900px){.ci{grid-template-columns:1fr}}

/* 매입 품목 전체 */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bi{background:#000;border:1px solid #1d1f23;border-radius:24px;overflow:hidden;display:grid;transition:border-color .3s}
.bi:hover{border-color:#3a3d44}
.bim{aspect-ratio:16/10}
.bim video{width:100%;height:100%;object-fit:contain}
.bbd{padding:6px 24px 24px;display:grid;gap:4px}
.en3{font-family:var(--en);font-stretch:125%;font-weight:800;font-size:26px}
.bbd b{font-size:16px;color:#d2d2d7}
.go2{color:#2997ff;font-size:15px;font-weight:600;margin-top:6px}
@media (max-width:900px){.bgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bgrid{grid-template-columns:1fr}}

/* 매입 절차 상세 */
.psteps{display:grid;gap:14px}
.pstep{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#101114;border:1px solid #1d1f23;border-radius:24px;overflow:hidden}
.pstep:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.pstep:nth-child(even) .im{order:2}
.pstep .im{min-height:280px;position:relative}
.pstep .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pstep .bd{padding:clamp(26px,4vw,50px);display:grid;gap:10px;align-content:center}
.pstep .no{font-family:var(--en);font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--fog)}
.pstep h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.045em}
.pstep p{color:#a1a1a6;font-size:16px}
@media (max-width:760px){.pstep,.pstep:nth-child(even){grid-template-columns:1fr}.pstep:nth-child(even) .im{order:0}.pstep .im{min-height:220px}}

/* 현장 갤러리 */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gi{margin:0;border-radius:16px;overflow:hidden;background:#101114;position:relative}
.gi img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gi figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.gal{grid-template-columns:1fr 1fr}}

/* FAQ 답변 정리 */
.faq .a p{margin:0}
.faq .a b{color:var(--ink)}

/* ─────────── 견적 받기: 밝은 화면, 한 줄로 내려가는 3단계 ─────────── */
.pg-quote{background:#f5f5f7}
.qv2{background:#f5f5f7;color:#1d1d1f;padding-bottom:110px}
.q2w{max-width:820px}
.q2hero{padding:calc(56px + 64px) 0 26px}
.q2hero .crumb{color:#6e6e73}.q2hero .crumb a:hover{color:#000}
.q2hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1.12}
.q2hero>.wrap>p{color:#6e6e73;font-size:clamp(16px,1.6vw,19px);margin-top:12px}
.q2steps{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.q2steps li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#86868b;background:#fff;border:1px solid #e3e3e8;border-radius:999px;padding:8px 16px 8px 8px}
.q2steps li b{width:24px;height:24px;border-radius:50%;background:#e3e3e8;color:#6e6e73;display:grid;place-items:center;font-size:13px}
.q2steps li.on{color:#1d1d1f;border-color:#1d1d1f}
.q2steps li.on b{background:#1d1d1f;color:#fff}
.q2card{background:#fff;border-radius:26px;padding:clamp(22px,3.4vw,36px);margin-top:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);display:grid;gap:16px}
.q2card h2{font-size:22px;font-weight:800;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}
.q2card h2>span{width:30px;height:30px;border-radius:50%;background:#1d1d1f;color:#fff;display:grid;place-items:center;font-size:15px}
.q2card h2 small{font-size:14px;color:#86868b;font-weight:600}
.q2ta{width:100%;min-height:220px;resize:vertical;border:2px solid #d2d2d7;border-radius:18px;padding:18px 20px;font:inherit;font-size:18px;line-height:1.65;color:#1d1d1f;background:#fbfbfd}
.q2ta:focus{outline:none;border-color:#0071e3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.q2ta::placeholder{color:#a1a1a6}
.q2row{display:flex;gap:10px;flex-wrap:wrap}
.q2btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:16px 22px;font-size:17px;font-weight:700;border:0;cursor:pointer}
.q2btn.pri{background:#0071e3;color:#fff;flex:1 1 220px}
.q2btn.pri:hover{background:#0077ed}
.q2btn.file{background:#1d1d1f;color:#fff}
.q2btn.ghost{background:#f0f0f3;color:#1d1d1f}
.q2hint{color:#6e6e73;font-size:14.5px}
.q2pick{border-top:1px solid #ececef;padding-top:14px}
.q2pick summary{cursor:pointer;font-size:16px;color:#1d1d1f;list-style:none}
.q2pick summary::-webkit-details-marker{display:none}
.q2pick summary b{color:#0071e3}
.q2pick .wz{margin-top:16px}
.qv2 .wz .wst>span{color:#6e6e73}
.qv2 .chipset button{background:#f5f5f7;border:1px solid #e3e3e8;color:#1d1d1f;font-size:16px;padding:11px 16px}
.qv2 .chipset button.on{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.qv2 .stepper{border-color:#d2d2d7}
.qv2 .stepper button{background:#f5f5f7;color:#1d1d1f}
.qv2 .stepper input{background:#fff;color:#1d1d1f}
.qv2 .qbtn{background:#1d1d1f;color:#fff;border-radius:12px}
.qv2 .demo{justify-self:start;font-size:12.5px;font-weight:700;color:#b25000;background:#fff4e5;border:1px solid #f6cf9a;border-radius:999px;padding:4px 12px}
.qv2 .lines{max-height:none;gap:10px}
.qv2 .line{background:#f5f5f7;border:0;border-radius:16px;padding:14px 14px 14px 18px}
.qv2 .line b{color:#1d1d1f;font-size:16.5px}
.qv2 .line .why{color:#6e6e73;font-size:13.5px}
.qv2 .line .amt{color:#1d1d1f;font-size:16px}
.qv2 .line .amt.chk2{color:#b25000;font-size:14px}
.qv2 .line .q button{background:#fff;border-color:#d2d2d7;color:#1d1d1f;width:32px;height:32px}
.qv2 .line .q span{color:#1d1d1f;font-size:15.5px;font-weight:700}
.qv2 .line .x{color:#a1a1a6;font-size:22px}
.qv2 .empty{color:#86868b;border-color:#d2d2d7;background:#fbfbfd}
.qv2 .total{border-top-color:#e3e3e8}
.qv2 .total .lbl{color:#6e6e73}
.qv2 .total .v{color:#1d1d1f;font-size:clamp(30px,4vw,42px)}
.q2form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q2form label{display:grid;gap:6px;font-size:14.5px;color:#1d1d1f;font-weight:700}
.q2form label em{font-style:normal;color:#e30000;font-size:12px;margin-left:4px}
.q2form input,.q2form textarea{border:2px solid #d2d2d7;border-radius:14px;padding:15px 16px;font:inherit;font-size:17px;color:#1d1d1f;background:#fbfbfd}
.q2form input:focus,.q2form textarea:focus{outline:none;border-color:#0071e3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.q2form .full{grid-column:1/-1}
.q2form .agree{display:flex;gap:10px;align-items:center;font-weight:500;font-size:15px}
.q2form .agree input{width:22px;height:22px;padding:0}
.q2submit{background:#0071e3;color:#fff;border:0;border-radius:16px;padding:19px;font-size:19px;font-weight:800;cursor:pointer}
.q2submit:disabled{background:#c7c7cc;cursor:not-allowed}
.q2alt{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.q2alt a{background:#fff;border-radius:20px;padding:20px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;color:#1d1d1f}
.q2alt a svg{grid-row:1/3}
.q2alt a:first-child svg{color:#191919;background:#fee500;border-radius:50%;padding:7px;width:38px;height:38px}
.q2alt a:last-child svg{color:#fff;background:#1d1d1f;border-radius:50%;padding:9px;width:38px;height:38px}
.q2alt b{font-size:16.5px}.q2alt span{color:#6e6e73;font-size:14px}
.qv2 .done h3{color:#1d1d1f}.qv2 .done p{color:#6e6e73}
.pg-quote .ft{background:#0b0c0e}
@media (max-width:560px){.q2form{grid-template-columns:1fr}.q2alt{grid-template-columns:1fr}.q2hero{padding-top:calc(56px + 36px)}.q2ta{font-size:17px;min-height:200px}.q2btn{width:100%}}

/* 모바일 */
@media (max-width:760px){
  .hero2 .copy{margin-top:-18vw}
  .hero2 h1{font-size:15.4vw}
  .tagline{font-size:30px}
  .watch{margin-top:24px}
  .watch i{width:52px;height:52px}
  .tiles .t-sto,.tiles .t-srv,.tiles .t-net{min-height:0}
  .tile .media.turn{top:auto}
  .idc-ph{aspect-ratio:1/1}
}

.qv2{color-scheme:light}
.qv2 input[type=checkbox]{accent-color:#0071e3}

@media (max-width:900px){.tiles .t-sto,.tiles .t-srv,.tiles .t-net{grid-column:span 6}}
.q2form label{min-width:0}
.q2form input,.q2form textarea{width:100%;min-width:0}