/* PLAN DESIGN — 개인 점주용 사이트 · 1-A 결 (가운데 큰 글씨 + 아래 썸네일) · 2026-10-03 */
:root{--ink:#0b0b0b;--ink2:#161616;--hot:#ff4d17;--cream:#fff6e8;--kakao:#fee500;--line:rgba(255,255,255,.14);--g:32px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
.sr,.th span.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important}
body{background:var(--ink);color:#fff;font-family:'Pretendard Variable',Pretendard,sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.en{font-family:'Archivo Black',sans-serif;letter-spacing:-.02em}
.wrap{padding:0 var(--g)}

/* ── 머리 ── */
header{position:absolute;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:20px var(--g)}
header.solid{position:sticky;top:0;background:rgba(11,11,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mark{font-family:'Archivo Black';font-size:22px;letter-spacing:-.01em}.mark sup{font-size:.5em}
nav{display:flex;gap:26px;align-items:center;font-family:'Archivo Black';font-size:14px}
nav a{position:relative}nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--hot);transition:right .3s}nav a:hover::after{right:0}
nav .tel{background:var(--hot);color:var(--ink);padding:9px 16px;border-radius:999px;font-family:'Pretendard Variable';font-weight:900}
nav .tel::after{display:none}

/* ── 첫 화면 ── */
.hero{position:relative;height:100vh;height:100svh;min-height:660px;overflow:hidden;background:#000}
.sl{position:absolute;inset:0;opacity:0;transition:opacity 1.1s}.sl.on{opacity:1}
.sl img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 6.5s linear}.sl.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.36),rgba(0,0,0,.76));pointer-events:none}
.ct{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;z-index:3;pointer-events:none}
.ct h1{filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));font-family:'Archivo Black';font-size:clamp(70px,13vw,230px);line-height:.8;letter-spacing:-.04em;font-weight:400}
.ct h1 .o{color:transparent;-webkit-text-stroke:3px #fff}
.ct .k{display:inline-block;margin-top:18px;background:var(--hot);font-weight:900;font-size:clamp(22px,2.6vw,40px);padding:6px 22px;rotate:-2deg}
.stk{position:absolute;z-index:4;font-weight:900;border-radius:999px;padding:10px 20px;color:var(--ink);background:var(--cream);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--hot);animation:wob 3s ease-in-out infinite;white-space:nowrap}
.s1{left:12%;top:22%;rotate:-9deg}.s2{right:11%;top:58%;rotate:7deg;animation-delay:-1.4s}
@keyframes wob{50%{translate:0 -8px}}
.badge{position:absolute;right:6%;top:16%;z-index:4;width:140px;animation:rot 12s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}
.rail{position:absolute;left:var(--g);right:var(--g);bottom:26px;z-index:5;display:flex;gap:12px;align-items:flex-end}
.th{flex:0 0 150px;cursor:pointer;opacity:.55;transition:.3s;background:none;border:0;text-align:left}.th.on{opacity:1;transform:translateY(-8px)}
.th img{width:100%;aspect-ratio:16/10;object-fit:cover;border:2px solid #fff}
.th span{display:block;font-weight:800;font-size:12px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th.on img{border-color:var(--hot)}
.th .bar{display:block;height:3px;background:rgba(255,255,255,.25);margin-top:5px;overflow:hidden}
.th .bar i{display:block;height:100%;width:0;background:var(--hot)}
.th.on .bar i{animation:fill 5s linear forwards}@keyframes fill{to{width:100%}}


/* ── 해시태그 띠 ── */
.mq{background:var(--hot);color:var(--ink);overflow:hidden;white-space:nowrap}
.mq div{display:inline-block;font-weight:900;font-size:30px;padding:12px 0;animation:mq 26s linear infinite}.mq span{margin:0 20px}
.mq.rev{background:var(--ink);color:var(--hot);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.mq.rev div{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 공통 머리글 ── */
.sec{padding:110px var(--g)}
.h2{font-family:'Archivo Black';font-size:clamp(56px,8vw,128px);line-height:.85;letter-spacing:-.03em;font-weight:400}
.h2 span{color:var(--hot)}
.sub{margin-top:18px;font-size:clamp(17px,1.5vw,22px);font-weight:700;opacity:.82;line-height:1.55}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}

/* ── 사례 ── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 30px}
.chip{border:2px solid #fff;border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;background:none;cursor:pointer;transition:.2s}
.chip.on,.chip:hover{background:#fff;color:var(--ink)}
.chip b{color:var(--hot);margin-left:4px}.chip.on b{color:#b8320a}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.c{position:relative;aspect-ratio:4/5;overflow:hidden;background:#222}
.c img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s,transform .9s}
.c:hover img,.c.lit img{filter:none;transform:scale(1.06)}
.c .lb{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.c .lb b{font-weight:900;font-size:22px;display:block;line-height:1.25}.c .lb span{font-size:14px;opacity:.85;font-weight:600}
.c .tag{position:absolute;top:14px;right:14px;background:var(--hot);color:var(--ink);font-weight:900;font-size:13px;padding:6px 12px;border-radius:999px;rotate:6deg}
.c .go{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:20px;transform:scale(0) rotate(-90deg);transition:.35s}
.c:hover .go{transform:none}
.c.hide{display:none}
.list .c.dn{margin-top:60px}
.c.cta{background:var(--hot);color:var(--ink);display:flex;align-items:flex-end;aspect-ratio:auto;min-height:220px;border:3px solid var(--hot);transition:background .3s}
.c.cta:hover{background:var(--cream)}
.ctab{padding:28px;display:block}.ctab b{display:block;font-weight:900;font-size:clamp(26px,2.6vw,40px);line-height:1.15}.ctab span{display:inline-block;margin-top:16px;font-weight:900;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px}
.more{margin-top:40px;text-align:center}

/* ── 왜 ── */
.why{background:var(--cream);color:var(--ink)}
.why .h2 span{color:var(--hot)}
.whys{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink)}
.wy{padding:34px 28px 40px 0;border-right:3px solid var(--ink);margin-right:28px}.wy:last-child{border-right:0;margin-right:0}
.wy .n{font-family:'Archivo Black';font-size:72px;color:var(--hot);line-height:1}
.wy h3{font-size:clamp(24px,2.3vw,34px);font-weight:900;margin:16px 0 12px;line-height:1.25}
.wy p{font-size:17px;line-height:1.65;font-weight:600;opacity:.8}

/* ── 값 ── */
.price{background:var(--ink2)}
.pgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:50px;align-items:stretch}
.pbig{border:3px solid #fff;padding:40px;position:relative}
.pbig .lab{font-weight:900;font-size:20px}
.pbig .num{font-family:'Archivo Black';font-size:clamp(70px,9vw,150px);line-height:.9;margin:14px 0 6px;color:var(--hot)}
.pbig .num small{font-family:'Pretendard Variable';font-weight:900;font-size:.32em;color:#fff;margin-left:8px}
.tbd{font-family:'Pretendard Variable',sans-serif!important;font-weight:900;letter-spacing:.02em}
.pbig .vat{font-weight:800;opacity:.75}
.pbig .stk{position:absolute;right:-16px;top:-22px;animation-duration:3.4s}
.calc{background:var(--cream);color:var(--ink);padding:36px}
.calc h3{font-weight:900;font-size:24px}
.calc input[type=range]{width:100%;margin:26px 0 8px;accent-color:var(--hot);height:28px}
.calc .row{display:flex;justify-content:space-between;font-weight:800}
.calc .out{font-family:'Archivo Black';font-size:clamp(40px,4.4vw,64px);margin-top:18px;line-height:1}
.calc .out small{font-family:'Pretendard Variable';font-weight:900;font-size:.36em;margin-left:6px}
.calc .note{margin-top:14px;font-size:14px;font-weight:600;opacity:.7;line-height:1.6}
.extra{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.extra div{border:2px dashed rgba(255,255,255,.4);padding:20px;font-weight:800;font-size:17px}
.extra div small{display:block;font-weight:600;opacity:.65;margin-top:6px;font-size:14px}
.pnote{margin-top:22px;font-weight:700;opacity:.75;line-height:1.6}

/* ── 진행 순서 ── */
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:38px;height:3px;background:var(--line)}
.steps .line{position:absolute;left:0;top:38px;height:3px;background:var(--hot);width:0;transition:width 2.4s ease-out}
.steps.in .line{width:100%}
.st{position:relative;padding-right:22px}
.st .dot{width:78px;height:78px;border-radius:50%;background:var(--ink);border:3px solid #fff;display:grid;place-items:center;font-family:'Archivo Black';font-size:26px;position:relative;z-index:1;transition:background .4s,border-color .4s}
.steps.in .st .dot{background:var(--hot);border-color:var(--hot)}
.steps.in .st:nth-child(3) .dot{transition-delay:.5s}.steps.in .st:nth-child(4) .dot{transition-delay:1s}.steps.in .st:nth-child(5) .dot{transition-delay:1.5s}.steps.in .st:nth-child(6) .dot{transition-delay:2s}
.st h3{font-size:24px;font-weight:900;margin:22px 0 10px}
.st p{font-size:16px;line-height:1.65;font-weight:600;opacity:.78}

/* ── 문의 ── */
.contact{background:var(--hot);color:var(--ink);position:relative;overflow:hidden}
.contact .h2 span{color:#fff}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;margin-top:46px}
.quick a{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:26px 28px;margin-bottom:14px;font-weight:900;font-size:clamp(22px,2.2vw,30px);border:3px solid var(--ink);box-shadow:6px 6px 0 #fff;transition:transform .2s,box-shadow .2s}
.quick a:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #fff}
.quick a.k{background:var(--kakao);color:#111}
.quick a small{display:block;font-size:15px;font-weight:700;opacity:.75;margin-top:4px}
.quick .addr{margin-top:22px;font-weight:700;line-height:1.7}
form.f{background:var(--cream);padding:34px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.f label{display:block;font-weight:900;font-size:15px;margin:18px 0 8px}.f label:first-of-type{margin-top:0}
.f input,.f select,.f textarea{width:100%;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:14px 14px;font-size:16px;font-weight:600;border-radius:0}
.f textarea{min-height:120px;resize:vertical}
.f .src{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-top:18px}.f .src legend{font-weight:900;font-size:15px;margin-bottom:8px;padding:0}.f .src legend small{font-weight:700;opacity:.6}
.f .src label{margin:0;font-size:14px;font-weight:800;border:2px solid var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;background:#fff}
.f .src input{position:absolute;opacity:0;width:1px;height:1px}.f .src label:has(input:focus-visible){outline:3px solid var(--hot);outline-offset:2px}.f .src label{position:relative}.f .src label:has(input:checked){background:var(--ink);color:#fff}
.f .agree{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;font-weight:700;line-height:1.5}
.f .agree input{width:20px;height:20px;flex:0 0 20px;margin-top:1px}
.f .agtxt{font-size:13px;font-weight:600;margin-top:8px;line-height:1.65;opacity:.85}.f .agtxt a{text-decoration:underline;font-weight:800}
.f button{margin-top:22px;width:100%;background:var(--ink);color:#fff;border:0;padding:20px;font-weight:900;font-size:20px;cursor:pointer}
.f .ok{display:none;text-align:center;padding:40px 10px}.f.sent .ok{display:block}.f.sent .body{display:none}
.f .ok b{font-size:28px;font-weight:900;display:block;margin-bottom:10px}
.f .err{color:#c0260a;font-weight:800;font-size:14px;margin-top:8px;min-height:1em}

/* ── 바닥 ── */
footer{padding:90px var(--g) 130px;border-top:1px solid var(--line)}
footer .big{font-family:'Archivo Black';font-size:clamp(48px,10vw,170px);line-height:.85;letter-spacing:-.04em}
footer .big span{color:transparent;-webkit-text-stroke:2px #fff}
footer .info{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:14px;line-height:1.8;opacity:.7;font-weight:600}

/* ── 고정 단추 ── */
.fl{position:fixed;right:20px;bottom:20px;display:flex;gap:10px;z-index:50;transition:transform .35s}
.fl a{background:var(--hot);color:var(--ink);font-weight:900;padding:16px 22px;border-radius:999px;border:3px solid var(--ink);box-shadow:4px 4px 0 #fff}.fl .k{background:var(--kakao);color:#111}
.fl.away{transform:translateY(140%)}

/* ── 사례 상세 ── */
.chero{position:relative;height:88vh;min-height:560px;overflow:hidden}
.chero img{width:100%;height:100%;object-fit:cover;animation:kb 14s ease-out forwards}@keyframes kb{from{transform:scale(1.18)}to{transform:scale(1)}}
.chero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.35) 100%)}
.chero .t{position:absolute;left:var(--g);right:var(--g);bottom:56px;z-index:2}
.chero .t .cat{display:inline-block;background:var(--hot);color:var(--ink);font-weight:900;padding:6px 16px;rotate:-2deg;font-size:18px}
.chero h1{font-weight:900;font-size:clamp(46px,8vw,128px);line-height:.95;letter-spacing:-.03em;margin-top:16px}
.chero .stk{right:8%;top:22%;rotate:8deg}
.back{position:absolute;top:84px;left:var(--g);z-index:5;font-weight:800;background:rgba(0,0,0,.5);padding:8px 16px;border-radius:999px;border:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-bottom:1px solid var(--line)}
.facts div{padding:28px var(--g);border-right:1px solid var(--line)}.facts div:last-child{border-right:0}
.facts small{display:block;font-family:'Archivo Black';font-size:12px;letter-spacing:.12em;opacity:.6;margin-bottom:8px}
.facts b{font-size:clamp(22px,2.2vw,32px);font-weight:900}
.looks{padding:80px var(--g) 40px;max-width:1100px}
.looks p{font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.6}
.looks .tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.looks .tags span{background:var(--ink2);border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-weight:800;font-size:14px}
.gal{padding:30px var(--g) 90px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gal a{position:relative;overflow:hidden;background:#1a1a1a;grid-column:span 2;aspect-ratio:4/3;cursor:zoom-in}
.gal a.rW{grid-column:span 6;aspect-ratio:21/9}.gal a.rD{grid-column:span 3;aspect-ratio:3/2}.gal a.rT{grid-column:span 2;aspect-ratio:4/3}.gal a.tall{aspect-ratio:4/5}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.gal a:hover img{transform:scale(1.04)}
.gal .cnt{position:absolute;right:12px;bottom:10px;font-family:'Archivo Black';font-size:12px;background:rgba(0,0,0,.55);padding:4px 9px;border-radius:999px}
.ctaband{margin:0 var(--g) 90px;background:var(--hot);color:var(--ink);padding:48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctaband h2{font-weight:900;font-size:clamp(28px,3.4vw,52px);line-height:1.15}
.ctaband a{background:var(--ink);color:#fff;font-weight:900;font-size:20px;padding:20px 30px;border-radius:999px;box-shadow:5px 5px 0 #fff;white-space:nowrap}
.nextc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.nextc a{position:relative;height:340px;overflow:hidden}
.nextc img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);transition:filter .5s,transform .8s}
.nextc a:hover img{filter:brightness(.6);transform:scale(1.05)}
.nextc span{position:absolute;left:var(--g);bottom:30px;z-index:1}
.nextc small{display:block;font-family:'Archivo Black';font-size:13px;letter-spacing:.14em;color:var(--hot);margin-bottom:6px}
.nextc b{font-weight:900;font-size:clamp(24px,2.6vw,38px)}
.nextc a:last-child span{left:auto;right:var(--g);text-align:right}

/* ── 크게 보기 ── */
.lbx{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.lbx.on{display:flex}
.lbx img{max-width:92vw;max-height:84vh;object-fit:contain;user-select:none}
.lbx button{position:absolute;background:none;border:0;color:#fff;font-size:44px;cursor:pointer;padding:16px;font-family:'Archivo Black'}
.lbx .x{top:10px;right:16px;font-size:36px}.lbx .pv{left:10px}.lbx .nx{right:10px}
.lbx .ix{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:'Archivo Black';font-size:14px;opacity:.8}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ── 태블릿 ── */
@media(max-width:1100px){.list{grid-template-columns:1fr 1fr}.list .c.dn{margin-top:50px}
.rail{overflow-x:auto;overflow-y:visible;padding-top:10px;bottom:96px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.steps{grid-template-columns:1fr;gap:34px}.steps::before,.steps .line{display:none}.st{display:grid;grid-template-columns:78px 1fr;gap:0 22px;padding:0}.st h3{margin:8px 0 6px}.st .dot{grid-row:span 2}
.extra{grid-template-columns:1fr 1fr}}

/* ── 폰 ── */
@media(max-width:760px){:root{--g:16px}
nav{gap:8px}nav a:not(.tel):not(.pr){display:none}nav .pr{border:2px solid #fff;border-radius:999px;padding:7px 12px;font-size:13px;font-family:'Pretendard Variable';font-weight:900}nav .pr::after{display:none}nav .tel{padding:9px 12px;font-size:13px}header{padding:14px var(--g)}.mark{font-size:18px}
.ct{top:38%}.ct h1{font-size:66px}.ct h1 .o{-webkit-text-stroke:2px #fff}.s1{left:4%;top:16%;font-size:13px;padding:8px 14px}.s2{right:4%;top:60%;font-size:13px;padding:8px 14px}.badge{width:78px;right:4%;top:auto;bottom:258px;left:auto}.s2{top:auto;bottom:216px;right:auto;left:6%}
.rail{left:var(--g);right:var(--g);bottom:96px}.th{flex-basis:110px}
.mq div{font-size:22px}
.sec{padding:72px var(--g)}
.list{grid-template-columns:1fr 1fr;gap:10px}.list .c.dn{margin-top:26px}.ctab{padding:16px}.c.cta{min-height:160px}.ctab span{font-size:13px;padding:10px 14px}.c .lb{padding:12px}.c .lb b{font-size:15px}.c .lb span{font-size:12px}.c .tag{font-size:11px;padding:4px 9px;top:10px;right:10px}.c .go{display:none}
.chip{padding:9px 14px;font-size:14px;min-height:40px}
.whys{grid-template-columns:1fr}.wy{border-right:0;margin-right:0;border-bottom:3px solid var(--ink);padding:26px 0 28px}.wy:last-child{border-bottom:0}.wy .n{font-size:54px}
.pgrid,.cgrid{grid-template-columns:1fr;gap:26px}.pbig{padding:28px 22px}.pbig .stk{right:6px;top:-20px;font-size:13px}.calc{padding:26px 22px}
.extra{grid-template-columns:1fr 1fr;gap:10px}.extra div{padding:14px;font-size:15px}
.quick a{padding:20px 20px}
form.f{padding:24px 18px}
footer{padding:60px var(--g) 120px}
.fl{left:12px;right:12px;bottom:12px}.fl a{flex:1;text-align:center;padding:15px 10px}
.chero{height:78vh;height:78svh}.chero .t{bottom:34px}.back{top:66px;font-size:14px}.chero .stk{right:5%;top:20%;font-size:13px;padding:8px 14px}
.facts{grid-template-columns:1fr 1fr}.facts div{padding:18px var(--g)}.facts div:nth-child(2n){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}.facts div:nth-child(-n+2):nth-last-child(-n+2){border-bottom:0}.facts div:nth-child(3):last-child{grid-column:span 2}.facts div:only-child{grid-column:span 2}
.looks{padding:50px var(--g) 20px}
.gal{grid-template-columns:1fr 1fr;gap:8px;padding:20px var(--g) 60px}.gal a,.gal a.rD,.gal a.rT{grid-column:span 1;aspect-ratio:1}.gal a.rW,.gal a.t3{grid-column:span 2;aspect-ratio:16/10}.gal a.tall{aspect-ratio:4/5}
.ctaband{margin:0 var(--g) 60px;padding:30px 22px}.ctaband a{width:100%;text-align:center}
.nextc{grid-template-columns:1fr}.nextc a{height:200px}.nextc a:last-child span{left:var(--g);right:auto;text-align:left}
.lbx .pv,.lbx .nx{top:auto;bottom:6px;font-size:34px}.lbx .ix{bottom:24px}}

/* ── 공사 전·후 (온앤온 노래타운 사이트에서 가져온 결) ── */
.ba{background:var(--ink)}
.bagrid{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:28px;margin-top:44px;align-items:start}
.cmp{position:relative;aspect-ratio:1;overflow:hidden;border:3px solid #fff;user-select:none;touch-action:pan-y}
.cmp>img,.cmp-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-l{position:absolute;top:18px;font-family:'Archivo Black';font-size:15px;padding:6px 14px;border-radius:999px;z-index:2}
.cmp-l.b{left:18px;background:#fff;color:var(--ink)}.cmp-l.a{right:18px;background:var(--hot)}
.cmp-h{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-50%);z-index:2;pointer-events:none}
.cmp-h i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--hot);border:3px solid #fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:22px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0}
.cmp.hint .cmp-b{transition:clip-path .9s ease-in-out}.cmp.hint .cmp-h{transition:left .9s ease-in-out}
.pairs{display:grid;grid-template-columns:1fr;gap:14px}
.pair{margin:0}.pair>div{position:relative;display:inline-block;width:50%;aspect-ratio:16/10;overflow:hidden;vertical-align:top}
.pair img{width:100%;height:100%;object-fit:cover}
.pair span{position:absolute;left:8px;top:8px;font-family:'Archivo Black';font-size:11px;background:#fff;color:var(--ink);padding:3px 8px;border-radius:999px}.pair span.a{background:var(--hot);color:#fff}
.pair figcaption{font-weight:800;font-size:15px;margin-top:8px}
/* ── 비교표 (카공스페이스 「직접 비교해 보십시오」 결) ── */
.vs-t{margin-top:70px;font-weight:900;font-size:clamp(26px,2.6vw,38px)}
.vs{margin-top:20px;border:3px solid var(--ink)}
.vs-r{display:grid;grid-template-columns:120px 1fr 1fr;border-top:2px solid var(--ink)}.vs-r:first-child{border-top:0}
.vs-r span{padding:18px 20px;font-weight:700;font-size:17px;line-height:1.5}
.vs-r span:first-child{font-weight:900}
.vs-r span:last-child{background:var(--ink);color:#fff}.vs-r span:last-child b{color:#fff}
.vs-h span{font-weight:900;font-size:15px;padding:14px 20px;opacity:.85}.vs-h span:last-child{background:var(--hot);opacity:1}
/* ── 평수 빨리 고르기 ── */
.qpy{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.qpy button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:8px 14px;font-weight:900;font-size:15px;cursor:pointer;min-height:44px}
.qpy button.on{background:var(--ink);color:#fff}
/* ── 자주 묻는 것 ── */
.faq{background:var(--ink2)}
.qa{margin-top:40px;border-top:2px solid #fff;max-width:1100px}
.qa details{border-bottom:2px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;font-weight:900;font-size:clamp(19px,1.7vw,24px);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:'Archivo Black';font-size:30px;color:var(--hot);transition:transform .3s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa p{padding:0 0 26px;font-size:17px;line-height:1.7;font-weight:600;opacity:.82;max-width:880px}
.qa a{color:var(--hot);text-decoration:underline;font-weight:800}
@media(max-width:1100px){.bagrid{grid-template-columns:1fr}.cmp{max-width:640px}.pairs{grid-template-columns:repeat(3,1fr)}.pair>div{aspect-ratio:1}}
@media(max-width:760px){.bagrid{margin-top:30px}.cmp{aspect-ratio:1}.cmp-h i{width:46px;height:46px;font-size:18px}.cmp-l{font-size:12px;top:12px}.cmp-l.b{left:12px}.cmp-l.a{right:12px}
.pairs{grid-template-columns:1fr;gap:18px}.pair>div{aspect-ratio:16/10}
.vs-r{grid-template-columns:64px 1fr 1fr}.vs-r span{padding:12px 10px;font-size:14px}.vs-h span{font-size:13px;padding:10px}
.qa summary{font-size:18px;padding:20px 40px 20px 0}.qa p{font-size:16px}}

/* ── 바로 가기 줄 (검토 10-03 — 처음 온 사장님이 3초 안에 「얼마·어떻게 연락」을 찾게) ── */
.qbar{display:grid;grid-template-columns:repeat(3,1fr);background:var(--cream);color:var(--ink)}
.qbar a{padding:22px var(--g);border-right:2px solid var(--ink);display:flex;flex-direction:column;gap:4px;transition:background .2s}
.qbar a:last-child{border-right:0;background:var(--ink);color:#fff}
.qbar a:hover{background:#ffe7c7}.qbar a:last-child:hover{background:#222}
.qbar small{font-family:'Archivo Black';font-size:12px;letter-spacing:.14em;opacity:.6}
.qbar b{font-weight:900;font-size:clamp(18px,1.7vw,24px)}
.qbar i{font-style:normal;font-weight:700;font-size:13px;opacity:.7}
/* ── 개인정보처리방침 ── */
.policy{padding-top:130px;max-width:960px}
.policy h2{font-weight:900;font-size:21px;margin:34px 0 10px}
.policy p{font-size:16px;line-height:1.75;font-weight:600;opacity:.85}
@media(max-width:760px){.qbar{grid-template-columns:1fr}.qbar a{border-right:0;border-bottom:2px solid var(--ink);padding:16px var(--g);flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}.qbar a:last-child{border-bottom:0}.qbar b{font-size:18px}.policy{padding-top:100px}}

/* 문의 칸 봇 거르기 — 사람 눈에는 안 보인다 (10-03) */
.f .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ── 3D 설계안 (10-04) — 실제 시공 사진과 섞이지 않게 칸을 나누고 그림마다 표시한다 ── */
.dlist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.c.d3 .tag{background:#fff;color:#0b0b0b;rotate:0deg}
.d3m{position:absolute;left:12px;top:10px;z-index:2;background:#fff;color:#0b0b0b;font-weight:900;font-size:12px;padding:4px 10px;border-radius:999px;pointer-events:none}
.chero .d3m{left:auto;right:16px;top:auto;bottom:16px;font-size:14px;padding:7px 14px}
@media(max-width:1100px){.dlist{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.dlist{gap:10px}.d3m{font-size:11px;padding:3px 8px;left:8px;top:8px}.chero .d3m{right:10px;bottom:10px;font-size:12px}}