/* DEMADE — 기존 v3 스타일 (index.html 에서 그대로) */
:root{
--bg:#0A0A0A; --bg-2:#121212; --ink:#FFFFFF; --ink-soft:#CBC6BC; --line:#2e2a27; --rail:96px; --accent:#30448A; --accent-hi:#7b8fe0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard',-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-weight:400;line-height:1.65;letter-spacing:-0.01em;overflow-x:hidden;word-break:keep-all;text-wrap:pretty}
.ab-lead,.ab-big,.hero-desc,.ab-txt p,.sec-head h2,.sec-head .sub,.cta h3{text-wrap:balance}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 56px}
section{position:relative}
/* ===== 프리로더 ===== */
.loader{position:fixed;inset:0;z-index:400;background:#080808;display:flex;align-items:center;justify-content:center;transition:opacity .7s ease,visibility .7s}
.loader.off{opacity:0;visibility:hidden}
.loader img{width:150px;opacity:0;animation:ldIn 1s ease forwards .1s}
@keyframes ldIn{to{opacity:1}}
/* ===== 좌측 세로 레일 ===== */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:80;border-right:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 0;background:rgba(10,10,10,0.4);backdrop-filter:blur(6px)}
.rail .rlogo img{width:40px;height:auto}
.rail .rmid{writing-mode:vertical-rl;display:flex;gap:42px}
.rail .rmid a{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:16px;font-weight:600;letter-spacing:0.12em;transition:opacity .2s}
.rail .rmid a small{font-size:10px;font-weight:400;letter-spacing:0.18em;color:var(--ink-soft)}
.rail .rmid a:hover{opacity:.55}
.rail .rbtm{writing-mode:vertical-rl;font-size:10px;letter-spacing:0.3em;color:var(--ink-soft)}
main{margin-left:var(--rail)}
/* ===== 상단 미니 헤더 ===== */
.topbar{position:fixed;left:var(--rail);right:0;top:0;height:74px;z-index:70;display:flex;align-items:center;justify-content:space-between;
padding:0 56px;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topbar.on{background:rgba(10,10,10,0.82);backdrop-filter:blur(8px);border-color:var(--line)}
.topbar .brand{font-size:13px;letter-spacing:0.3em;font-weight:400;display:flex;align-items:center}
.topbar .brand img{height:17px;width:auto;display:block}
.topbar nav{display:flex;gap:40px;font-size:13.5px;font-weight:500;letter-spacing:0.18em;color:var(--ink-soft)}
.topbar nav a{transition:color .2s}.topbar nav a:hover,.topbar nav a.active{color:var(--ink)}
.tb-right{display:flex;align-items:center;gap:34px}
.menu-btn{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:28px;height:28px;background:none;border:0;cursor:pointer;padding:0}
.menu-btn span{width:4px;height:4px;border-radius:50%;background:var(--ink-soft);justify-self:center;align-self:center;transition:background .3s,transform .3s}
.menu-btn:hover span{background:var(--ink);transform:scale(1.25)}
/* ===== 풀스크린 메가메뉴 ===== */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.975);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;display:flex;align-items:center}
.overlay.open{opacity:1;visibility:visible}
.ov-close{position:absolute;top:24px;right:34px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;transition:background .3s,transform .4s}
.ov-close:hover{background:rgba(255,255,255,.06);transform:rotate(90deg)}
.ov-grid{width:100%;max-width:1280px;margin:0 auto;padding:0 7%;display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:center}
.ov-nav{display:flex;flex-direction:column;gap:2px}
.ov-nav a{font-size:clamp(38px,6vw,90px);font-weight:800;line-height:1.06;letter-spacing:-0.03em;color:var(--ink-soft);text-transform:uppercase;width:fit-content;transition:color .35s ease,transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s;transform:translateY(22px);opacity:0}
.overlay.open .ov-nav a{transform:none;opacity:1}
.overlay.open .ov-nav a:nth-child(1){transition-delay:.10s}
.overlay.open .ov-nav a:nth-child(2){transition-delay:.16s}
.overlay.open .ov-nav a:nth-child(3){transition-delay:.22s}
.overlay.open .ov-nav a:nth-child(4){transition-delay:.28s}
.overlay.open .ov-nav a:nth-child(5){transition-delay:.34s}
.ov-nav a:hover{color:var(--ink)}
.ov-nav a .idx{font-size:.2em;vertical-align:super;color:var(--ink-soft);margin-right:.5em;font-weight:500;letter-spacing:.1em}
.ov-side{border-left:1px solid var(--line);padding-left:52px;opacity:0;transition:opacity .6s ease .35s}
.overlay.open .ov-side{opacity:1}
.ov-desc{font-size:clamp(18px,1.7vw,26px);font-weight:300;line-height:1.55;color:var(--ink);min-height:88px}
.ov-info{margin-top:44px;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);line-height:2}
.ov-info b{display:block;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:12px;text-transform:uppercase;font-weight:500}
@media (max-width:980px){
.overlay{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ov-grid{grid-template-columns:1fr;gap:24px;padding:96px 9% 56px}
.ov-close{top:14px;right:18px;width:42px;height:42px}
.ov-side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px}
.ov-nav a{font-size:34px}
.ov-desc{min-height:0}
}
/* ===== HERO ===== */
.hero{height:100vh;min-height:700px;position:relative;overflow:hidden;background:#080808;display:block}
.hslides{position:absolute;inset:0;z-index:1;overflow:hidden}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform;animation:heroKB 42s ease-in-out infinite}
.hslide:nth-child(1){animation-delay:0s}.hslide:nth-child(2){animation-delay:6s}.hslide:nth-child(3){animation-delay:12s}.hslide:nth-child(4){animation-delay:18s}.hslide:nth-child(5){animation-delay:24s}.hslide:nth-child(6){animation-delay:30s}.hslide:nth-child(7){animation-delay:36s}
@keyframes heroKB{0%{opacity:0;transform:scale(1.05)}2.4%{opacity:1}14%{opacity:1}16.5%{opacity:0}100%{opacity:0;transform:scale(1.12)}}
.hero-ov{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(8,8,8,.55),rgba(8,8,8,.32) 42%,rgba(8,8,8,.14)),linear-gradient(0deg,rgba(8,8,8,.5),rgba(8,8,8,.08) 55%)}
.hero-c{position:absolute;left:56px;top:14%;z-index:3;max-width:72%}
.hero-kw{font-size:clamp(21px,2.4vw,38px);font-weight:800;line-height:1.3;letter-spacing:0.005em;text-transform:uppercase;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero-kw .kwline{display:block;overflow:hidden}
.hero-kw .kwline i{display:block;font-style:normal;will-change:transform}
.hero-uline{width:280px;max-width:50%;height:2px;background:var(--accent-hi);margin-top:24px;opacity:.9;transform-origin:0 50%}
.hero-big{font-size:clamp(66px,14vw,212px);font-weight:900;line-height:.92;letter-spacing:-0.045em;text-transform:uppercase;margin-top:26px;color:var(--ink);perspective:1000px}
.hero-big img{display:block;height:clamp(46px,8vw,128px);width:auto;max-width:90vw;margin-top:6px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.hero-side{position:absolute;right:7%;top:49%;z-index:3;max-width:380px;text-align:right}
.hero-desc{font-size:17.5px;font-weight:500;color:#fff;line-height:1.85;margin-top:24px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-stat{position:absolute;right:7%;bottom:9%;z-index:3;text-align:right}
.hero-stat .hn{font-size:clamp(34px,3.6vw,54px);font-weight:200;letter-spacing:-0.02em;line-height:1;color:var(--ink)}
.hero-stat .hn i{font-style:normal;color:var(--ink-soft);font-size:.5em;margin-left:2px}
.hero-stat .hl{font-size:14.5px;letter-spacing:0.08em;color:#fff;margin-top:8px;font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pill{display:inline-flex;align-items:center;gap:12px;padding:17px 38px;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;font-size:15px;font-weight:600;letter-spacing:0.12em;background:rgba(8,8,8,.35);backdrop-filter:blur(4px);transition:all .3s}
.pill:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* 그레이스케일형 거대 스크롤 화살표 */
.hero-arrow{position:absolute;left:56px;bottom:44px;z-index:3;width:clamp(60px,7vw,110px);height:auto;opacity:.5;animation:arrowFloat 2.6s ease-in-out infinite}
.hero-arrow svg{width:100%;height:auto;display:block;stroke:var(--ink-soft);fill:none;stroke-width:2.4}
@keyframes arrowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
@media (max-width:980px){.hero-c{left:20px;top:12%;max-width:92%}.hero-big{font-size:clamp(40px,13vw,82px)}.hero-side{right:20px;left:20px;top:auto;bottom:150px;text-align:left;max-width:none}.hero-desc{font-size:15.5px;line-height:1.7;margin-top:16px}.hero-stat{right:20px;bottom:48px}.hero-arrow{display:none}}
/* ===== 롤링 마퀴 (스크롤 속도 반응) ===== */
.roll{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:30px 0;background:var(--bg-2)}
.roll-track{display:flex;white-space:nowrap;width:max-content;will-change:transform}
.roll-track span{font-size:clamp(22px,2.6vw,38px);font-weight:200;letter-spacing:0.02em;color:var(--ink);padding-right:0}
.roll-track span i{color:var(--ink-soft);font-style:normal;margin:0 48px}
/* ===== SECTION 공통 ===== */
.sec{padding-top:150px;padding-bottom:150px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:24px;margin-bottom:72px;position:relative}
.sec-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%}
.sec-head.lined::after{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.sec-head h2{font-size:14.5px;font-weight:600;letter-spacing:0.4em}
.sec-head .sub{font-size:13px;letter-spacing:0.2em;color:var(--ink-soft)}
/* ===== ABOUT — 큰 헤드라인 + 떠 있는 두 이미지(패럴랙스) + 원형 버튼 ===== */
.ab-big{font-size:clamp(34px,5vw,76px);font-weight:300;line-height:1.08;letter-spacing:-0.03em;margin:0 0 24px}
.ab-big b{font-weight:700}
.ab-lead{font-size:18.5px;color:rgba(255,255,255,.96);max-width:560px;margin:0;line-height:1.8}
.ab-stage{position:relative;min-height:780px;margin-top:80px}
.ab-img{position:absolute;overflow:hidden;border-radius:2px;background:#1a1814}
.ab-img img{position:absolute;left:0;right:0;top:-16%;width:100%;height:132%;object-fit:cover;filter:contrast(1.02);will-change:transform}
.ab-img.l{width:38%;height:520px;left:0;top:130px}
.ab-img.r{width:30%;height:440px;right:2%;top:0}
.ab-txt{position:absolute;left:40%;right:35%;top:310px;max-width:340px}
.ab-txt p{font-size:16.5px;color:rgba(255,255,255,.94);line-height:1.9;margin-bottom:22px}
.ab-circle{position:absolute;left:39%;bottom:10px;width:196px;height:196px;border:1px solid var(--line);border-radius:50%;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;font-size:14px;letter-spacing:0.06em;color:var(--ink);transition:background .4s,color .4s,border-color .4s,transform .4s}
.ab-circle:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.04)}
.ab-circle i{font-style:normal;color:var(--ink-soft);transition:color .4s}
.ab-circle:hover i{color:#fff}
.ab-sq{position:absolute}
.ab-sq.d{width:62px;height:62px;background:var(--accent);border:1px solid var(--accent);right:8%;bottom:64px}
.ab-sq.w{width:62px;height:62px;background:var(--ink);right:4%;bottom:22px}
@media (max-width:980px){
.ab-big{font-size:clamp(28px,7vw,42px)}
.ab-stage{min-height:0!important;margin-top:40px;display:block!important;position:static!important;overflow:hidden}
.ab-img{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;display:block;margin:0 0 20px!important}
.ab-img img{position:static!important;width:100%!important;height:100%!important;top:auto!important}
.ab-img.l{height:240px}
.ab-img.r{height:340px}
.ab-txt{position:static!important;max-width:100%!important;margin:0 0 24px!important}
.ab-circle{position:static!important;width:150px!important;height:150px!important;margin:0 0 8px!important}
.ab-sq{display:none!important}
}
/* ===== 신뢰/면허 ===== */
.trust{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-in{max-width:920px;margin:0 auto;text-align:center}
.trust-in p{font-size:clamp(22px,2.3vw,33px);font-weight:400;line-height:1.7;letter-spacing:-0.01em;color:rgba(255,255,255,.95)}
.trust-in p b{color:#fff;font-weight:700}
/* ===== 카테고리 쇼케이스 (01~05 리스트 + 이미지 스테이지) ===== */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cat-stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#1a1814}
.cat-stage .cimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:contrast(1.01);transition:opacity .7s ease,transform 6s ease}
.cat-stage .cimg.on{opacity:1;transform:scale(1.06)}
.cat-list{display:flex;flex-direction:column}
.cat-row{display:flex;align-items:baseline;gap:24px;padding:30px 6px;position:relative;cursor:pointer;transition:padding-left .3s}
.cat-row::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.cat-row:last-child::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.7,0,.2,1) .15s}
.cat-row.lined::before,.cat-row.lined::after{transform:scaleX(1)}
.cat-row .num{font-size:13.5px;letter-spacing:0.2em;color:var(--ink-soft);width:34px}
.cat-row .nm{font-size:clamp(23px,2.3vw,36px);font-weight:400;color:rgba(255,255,255,.88);transition:color .3s}
.cat-row .en{margin-left:auto;font-size:12.5px;letter-spacing:0.2em;color:var(--ink-soft);opacity:0;transition:opacity .3s}
.cat-row.on{padding-left:18px}
.cat-row.on .nm{color:var(--accent-hi);font-weight:500}
.cat-row.on .en{opacity:1;color:var(--ink)}
/* ===== A TO Z 핀 고정 가로 스크롤 프로세스 ===== */
.hproc{overflow:hidden;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hproc-head{padding:90px 56px 30px;max-width:1320px;margin:0 auto}
.hproc-head h2{font-size:14.5px;font-weight:600;letter-spacing:0.4em;color:var(--ink-soft)}
.hproc-head p{font-size:clamp(26px,3.2vw,46px);font-weight:200;letter-spacing:-0.02em;margin-top:14px}
.hproc-head p b{font-weight:600}
.hproc-view{position:relative}
.hproc-track{display:flex;width:max-content;padding:50px 56px 110px;gap:34px;will-change:transform}
.hstep{width:min(560px,72vw);flex:0 0 auto;border:1px solid var(--line);border-radius:4px;background:var(--bg);padding:46px 44px;position:relative;overflow:hidden}
.hstep .hnum{font-size:clamp(64px,7vw,110px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(240,237,232,.22)}
.hstep h3{font-size:clamp(22px,2vw,30px);font-weight:600;margin:22px 0 6px}
.hstep .hen{font-size:12.5px;font-weight:600;letter-spacing:.24em;color:var(--accent-hi);text-transform:uppercase}
.hstep p{font-size:16.5px;color:rgba(255,255,255,.94);line-height:1.85;margin-top:20px}
.hstep .him{margin-top:26px;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#1a1814}
.hstep .him div{width:100%;height:100%;background-size:cover;background-position:center}
@media (max-width:980px){
.hproc-head{padding:64px 24px 8px}
.hproc-track{flex-direction:column;width:auto;padding:24px 24px 64px;gap:18px}
.hstep{width:100%;padding:30px 24px}
}
/* ===== 실적 카운터 (원형) ===== */
.count-head{text-align:center;margin-bottom:70px}
.count-head h3{font-size:clamp(26px,3.4vw,50px);font-weight:200;letter-spacing:-0.02em;will-change:transform}
.count-head h3 b{font-weight:600;font-style:italic}
.circles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1180px;margin:0 auto}
.circle{aspect-ratio:1/1;border:1px solid var(--line);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;transition:border-color .4s,background .4s}
.circle:hover{border-color:var(--accent-hi);background:rgba(48,68,138,.08)}
.circle .n{font-size:clamp(38px,4.4vw,64px);font-weight:200;letter-spacing:-0.03em;line-height:1}
.circle .n i{font-size:.5em;font-style:normal;color:var(--ink-soft);margin-left:2px}
.circle .l{font-size:14px;font-weight:600;letter-spacing:0.12em;color:rgba(255,255,255,.9)}
@media (max-width:980px){.circles{grid-template-columns:1fr 1fr;gap:14px}.count-head{margin-bottom:40px}}
/* ===== PROJECT 쇼케이스 — 뒤 거대 글자 + 누웠다 일어서는 카드 ===== */
.proj{position:relative;overflow:hidden;padding:130px 0}
.proj-wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;perspective:1200px}
.proj-word{position:absolute;top:50%;left:-10%;right:-10%;text-align:center;font-size:clamp(90px,20vw,320px);font-weight:800;color:var(--ink);line-height:.8;letter-spacing:-0.05em;z-index:0;pointer-events:none;white-space:nowrap;transform:translateY(-50%);will-change:transform}
.proj-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;column-gap:34px;row-gap:50px;perspective:1400px}
.pitem{position:relative;overflow:hidden;aspect-ratio:4/3;background:#1a1814;border-radius:2px;cursor:pointer;will-change:transform;transform-style:preserve-3d}
.pitem:nth-child(even){margin-top:130px}
.pitem .pi{position:absolute;left:0;right:0;top:-9%;height:118%;background-size:cover;background-position:center;filter:contrast(1.02);will-change:transform}
.pitem::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,8,8,.88));opacity:0;transition:opacity .4s;z-index:1}
.pitem:hover::after{opacity:1}
.pcap{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;transform:translateY(8px);opacity:0;transition:transform .4s,opacity .4s}
.pitem:hover .pcap{transform:none;opacity:1}
.pcap h4{font-size:clamp(18px,1.6vw,25px);font-weight:700;margin:0}
.pcap span{font-size:12.5px;letter-spacing:0.16em;color:#fff;text-transform:uppercase}
@media (max-width:980px){
.proj{padding:80px 0}
.proj-word{position:relative;top:auto;left:0;right:0;font-size:64px;margin-bottom:8px;transform:none}
.proj-grid{grid-template-columns:1fr;row-gap:16px}
.pitem:nth-child(even){margin-top:0}
}
/* ===== 풀블리드 스테이트먼트 ===== */
.fullbleed{position:relative;height:88vh;min-height:540px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.fb-bg{position:absolute;inset:-12%;background-size:cover;background-position:center;will-change:transform}
.fb-bg::after{content:'';position:absolute;inset:0;background:rgba(8,8,8,.62)}
.fb-in{position:relative;z-index:2;padding:0 24px}
.fb-in .small{font-size:13.5px;font-weight:600;letter-spacing:.34em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-bottom:22px}
.fb-in h3{font-size:clamp(30px,4.6vw,68px);font-weight:200;line-height:1.18;letter-spacing:-0.02em}
.fb-in h3 b{font-weight:500}
/* ===== 클라이언트 로고월 ===== */
.logos{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:118px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-size:17.5px;font-weight:600;letter-spacing:0.02em;color:rgba(255,255,255,.85);transition:color .25s,background .25s}
.logos div:hover{color:#fff;background:rgba(240,237,232,.05)}
/* ===== CTA + 상담 폼 ===== */
.cta{padding:140px 0;text-align:center;border-top:1px solid var(--line);background:var(--bg-2)}
.cta .small{font-size:13.5px;font-weight:600;letter-spacing:0.3em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:24px}
.cta h3{font-size:clamp(28px,3.4vw,48px);font-weight:200;letter-spacing:-0.02em;margin-bottom:42px}
.cta h3 b{font-weight:500}
.cform{max-width:560px;margin:46px auto 0;text-align:left}
.cform .frow{margin-bottom:18px}
.cform input,.cform select,.cform textarea{width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:16.5px;font-weight:400;outline:none;transition:border-color .2s}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(240,237,232,.45)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-bottom-color:var(--accent-hi)}
.cform select{appearance:none;cursor:pointer}
.cform select option{background:#141414;color:var(--ink)}
.cform textarea{resize:vertical;min-height:92px}
.fagree{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-soft);margin:10px 0 26px;cursor:pointer}
.fagree input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.fsubmit{width:100%;padding:16px;background:var(--accent);color:#fff;border-radius:999px;font-size:14px;letter-spacing:0.1em;font-weight:500;transition:opacity .2s}
.fsubmit:hover{opacity:.85}
.fmsg{margin-top:16px;font-size:15px;text-align:center;min-height:20px;color:var(--ink-soft)}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);padding:46px 0}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;font-size:13.5px;color:var(--ink-soft);line-height:1.9}
.foot strong{color:var(--ink);font-weight:600;letter-spacing:0.06em;margin-right:14px}
.foot span{margin-right:14px}
@media(max-width:980px){.foot{flex-direction:column;gap:18px}.foot>div{display:flex;flex-direction:column;gap:6px}.foot strong,.foot span{margin-right:0}}
/* ===== 공지 팝업 ===== */
.npop{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.npop.on{display:flex}
.npop-box{width:min(420px,100%);max-height:92vh;overflow:auto;background:#111010;border:1px solid var(--line);border-radius:14px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:npopIn .35s cubic-bezier(.2,.9,.3,1)}
@keyframes npopIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.npop-x{position:absolute;right:10px;top:8px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;border:none}
.npop-img{position:relative;height:250px;overflow:hidden;border-radius:14px 14px 0 0;background:#0a0a0a}
.npop-slides{position:absolute;inset:0}
.npop-s{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.npop-s.on{opacity:1}
.npop-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85)}
.npop-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);pointer-events:none}
.npop-cap{position:absolute;left:16px;bottom:14px;z-index:2;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.92);font-weight:500;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.npop-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.42);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.npop-nav:hover{background:rgba(48,68,138,.9)}
.npop-nav.prev{left:10px}.npop-nav.next{right:10px}
.npop-dots{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:5px}
.npop-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.38);transition:background .3s,width .3s}
.npop-dots i.on{background:#fff;width:16px;border-radius:3px}
.npop-badge{position:absolute;left:16px;top:14px;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.16em;font-weight:700;padding:6px 12px;border-radius:999px}
.npop-body{padding:24px 24px 20px}
.npop-body h3{font-size:19px;font-weight:600;line-height:1.45;margin-bottom:12px;color:var(--ink)}
.npop-body p{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.82);margin-bottom:12px}
.npop-body p b{color:#fff;font-weight:600}
.npop-tip{padding:12px 14px;background:rgba(48,68,138,.16);border-left:2px solid var(--accent-hi);border-radius:4px;margin-bottom:16px!important}
.npop-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;background:#FEE500;color:#3A1D1D;font-size:15px;font-weight:700;border-radius:10px;transition:opacity .2s}
.npop-cta:hover{opacity:.9}
.npop-cta.tel{margin-top:9px;background:transparent;border:1px solid var(--accent-hi);color:var(--ink);font-size:14.5px}
.npop-cta.tel:hover{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}
.npop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:13px;color:var(--ink-soft)}
.npop-foot label{display:flex;align-items:center;gap:7px;cursor:pointer}
.npop-foot input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.npop-foot button{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;padding:4px 2px}
.npop-foot button:hover{color:var(--ink)}
@media(max-width:980px){.npop-img{height:150px}.npop-body{padding:20px 18px 16px}.npop-body h3{font-size:17.5px}}
/* ===== 플로팅 상담 독 ===== */
.cdock{position:fixed;right:20px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px}
.cdb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:62px;height:62px;border-radius:16px;font-size:10.5px;letter-spacing:0.01em;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.42);transition:transform .2s}
.cdb:hover{transform:translateY(-3px)}
.cdb svg{width:22px;height:22px}
.cdb.kakao{background:#FEE500;color:#3A1D1D}
.cdb.call{background:#161412;color:var(--ink);border:1px solid var(--line)}
.cdb.quote{background:var(--accent);color:#fff}
@media(max-width:980px){
.cdock{right:0;left:0;bottom:0;flex-direction:row;gap:8px;padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.cdb{flex:1;height:48px;flex-direction:row;gap:8px;border-radius:12px;font-size:13px;box-shadow:none}
.cdb svg{width:20px;height:20px}
footer{padding-bottom:84px}
}
/* ===== 리빌 초기 상태 (JS 활성 시에만 숨김) ===== */
html.js-anim [data-anim]{opacity:0}
/* ===== 커스텀 커서 ===== */
#cur,#cur-dot{display:none}
@media (hover:hover) and (pointer:fine){
body{cursor:none}a,button,.pitem,.cat-row,.pill,.logos div{cursor:none}
#cur{display:block;position:fixed;left:0;top:0;width:30px;height:30px;border:1.5px solid rgba(240,237,232,.5);border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:width .25s,height .25s,background-color .25s,border-color .25s,opacity .25s}
#cur.hv{width:56px;height:56px;background:rgba(240,237,232,.07);border-color:#fff}
#cur-dot{display:block;position:fixed;left:0;top:0;width:6px;height:6px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:10000;opacity:0}
}
/* ===== 모달 ===== */
.modal{position:fixed;inset:0;background:rgba(10,8,6,0.88);z-index:200;display:none;align-items:center;justify-content:center;padding:40px}
.modal.open{display:flex}
.modal-card{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;max-width:960px;width:100%;max-height:90vh;overflow:auto;position:relative}
.mslider{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a}
.mslide{position:absolute;inset:0;opacity:0;transition:opacity .6s;background-size:cover;background-position:center}
.mslide.on{opacity:1}
.marrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;z-index:5;display:flex;align-items:center;justify-content:center}
.marrow.l{left:18px}.marrow.r{right:18px}
.mdots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.mdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}.mdot.on{background:#fff}
.mbody{padding:40px 48px 48px}
.mbody h3{font-size:24px;font-weight:500;margin-bottom:10px}
.mbody .ms{font-size:13px;letter-spacing:0.14em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:26px}
.minfo{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line);padding-top:24px}
.minfo .k{font-size:11px;letter-spacing:0.18em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:6px}
.mclose{position:absolute;top:16px;right:20px;font-size:26px;color:#fff;z-index:6}
@media (max-width:980px){
:root{--rail:0px}
.rail{display:none}
.topbar{left:0;padding:0 20px;height:60px}.topbar nav{display:none}
.wrap{padding-left:24px;padding-right:24px}.sec{padding-top:88px;padding-bottom:88px}
.cta{padding:88px 24px}.trust{padding-left:24px;padding-right:24px}
.sec-head{margin-bottom:40px;padding-bottom:18px}
.sec-head h2{letter-spacing:0.15em}.sec-head .sub{letter-spacing:0.1em}
.hero{min-height:100svh}
.cats{grid-template-columns:1fr;gap:36px}
.logos{grid-template-columns:repeat(3,1fr)}
.roll-track span{font-size:22px}
}
/* ===== GEO v1 (2026-09-29) — FAQ · 모바일 보정 ===== */
#faq .fq-list{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:64px;padding:18px 0}
.fq summary::-webkit-details-marker{display:none}
.fq-n{font-size:12px;letter-spacing:0.2em;color:var(--accent-hi);width:48px;flex:none}
.fq summary h3{flex:1;font-size:clamp(16px,1.5vw,20px);font-weight:500;letter-spacing:-0.01em;line-height:1.5;padding-right:16px}
.fq summary i{position:relative;width:14px;height:14px;flex:none}
.fq summary i:before,.fq summary i:after{content:'';position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--ink-soft);transition:transform .3s}
.fq summary i:after{transform:rotate(90deg)}
.fq[open] summary i:after{transform:rotate(0)}
.fq p{padding:0 30px 26px 48px;color:var(--ink-soft);font-size:15.5px;line-height:1.85;max-width:880px}
.fq-more{margin-top:26px;color:var(--ink-soft);font-size:14.5px}
.fq-more a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 0}
@media (max-width:980px){
.menu-btn{width:44px;height:44px;padding:8px;margin-right:-8px}
.topbar .brand{min-height:44px}
.fq-n{width:36px}.fq p{padding:0 4px 22px 36px;font-size:15px}
}
@media (max-width:420px){
.logos{grid-template-columns:repeat(3,minmax(0,1fr))}
.logos div{padding:12px 6px;font-size:14px;min-height:96px;word-break:keep-all}
}
/* ===================================================================
메뉴화판 추가 (2026-09-30 · claude-demade-1727)
규칙: flex gap 대신 margin (카톡 웹뷰 P25) · dvh 금지 · 터치 44px · 본문 굵기 400↑
=================================================================== */
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:#fff;color:#000;padding:12px 16px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
/* 상단 메뉴 — 한글 8개 */
.topbar nav{letter-spacing:.02em;font-size:14.5px}
.topbar nav{gap:0}
.topbar nav a{margin-left:26px;padding:12px 0;position:relative}
.topbar nav a[aria-current="page"]{color:var(--ink)}
.topbar nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--accent-hi)}
.tb-right{gap:0}.tb-right .menu-btn{margin-left:30px}
.menu-btn{width:44px;height:44px;padding:8px}
.topbar .brand{min-height:44px;padding-right:12px}
@media (max-width:1240px){.topbar nav{display:none}}
.ov-nav a{font-size:clamp(30px,4.6vw,66px);letter-spacing:-0.02em}
.overlay.open .ov-nav a:nth-child(6){transition-delay:.40s}
.overlay.open .ov-nav a:nth-child(7){transition-delay:.46s}
.overlay.open .ov-nav a:nth-child(8){transition-delay:.52s}
.ov-nav a[aria-current="page"]{color:var(--ink)}
.rail .rmid{gap:0}.rail .rmid a{margin:21px 0;gap:0}.rail .rmid a small{margin-left:10px}
/* ---------- 홈 히어로 — 달빛이 열리는 공간 ---------- */
.hero-moon{height:100vh;min-height:640px;background:#050505}
.hm-stage{position:absolute;inset:0;z-index:1;overflow:hidden}
.hm-f{position:absolute;inset:0;display:block;will-change:transform,opacity}
.hm-f img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.hm-f+.hm-f{opacity:0}
.hm-glow{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;opacity:0;
background:radial-gradient(circle,rgba(255,246,226,.42) 0%,rgba(255,240,210,.16) 32%,rgba(255,240,210,0) 62%);mix-blend-mode:screen}
.hero-moon .hero-ov{background:linear-gradient(90deg,rgba(5,5,5,.72),rgba(5,5,5,.38) 46%,rgba(5,5,5,.12)),linear-gradient(0deg,rgba(5,5,5,.66),rgba(5,5,5,0) 50%);opacity:0;transition:opacity 1.6s ease}
.hero-moon.hm-open .hero-ov,.no-js .hero-moon .hero-ov{opacity:1}
.hero-moon .hero-c{top:auto;bottom:17%;left:56px;max-width:760px}
.hero-logo{height:clamp(34px,4.2vw,62px);width:auto;display:block;margin-bottom:26px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.hero-h1{font-size:clamp(38px,5.2vw,80px);font-weight:700;line-height:1.12;letter-spacing:-0.035em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero-h1 span{display:block}
.hero-h1{font-weight:800}
.hero-h1 .l2{font-weight:600;color:rgba(255,255,255,.9)}
.hero-moon .hero-stat .hn{font-weight:600}
.hero-region{margin-top:22px;font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:.06em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-region b{color:var(--accent-hi);font-weight:700}
.hero-moon .hero-side{top:auto;bottom:17%;right:120px;max-width:330px}
.hero-moon .hero-stat{bottom:auto;top:15%;right:120px}
.hero-credit{position:absolute;left:56px;bottom:40px;z-index:3;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.86);display:inline-block;padding:12px 0}
.hero-credit b{font-weight:600;color:#fff}
.hero-credit:hover{color:#fff}
@media (max-width:980px){
.hero-moon{height:100vh;min-height:600px}
.hero-moon .hero-c{left:20px;right:20px;bottom:auto;top:auto;max-width:none}
.hero-moon .hero-c{bottom:250px}
.hero-logo{margin-bottom:16px}
.hero-h1{font-size:clamp(30px,8.4vw,44px)}
.hero-region{font-size:14.5px;margin-top:14px;letter-spacing:.02em}
.hero-moon .hero-side{left:20px;right:20px;bottom:104px;text-align:left;max-width:none}
.hero-moon .hero-side .hero-desc{display:none}
.hero-moon .hero-stat{top:78px;right:20px}
.hero-moon .hero-stat .hn{font-size:30px}
.hero-moon .hero-stat .hl{font-size:12px;letter-spacing:.02em}
.hero-credit{left:20px;bottom:64px;font-size:12.5px}
.hero-moon .hero-ov{background:linear-gradient(0deg,rgba(5,5,5,.86),rgba(5,5,5,.5) 45%,rgba(5,5,5,.1) 75%),linear-gradient(180deg,rgba(5,5,5,.45),rgba(5,5,5,0) 22%)}
}
@media (max-width:980px) and (max-height:700px){.hero-moon .hero-c{bottom:210px}.hero-moon .hero-side{bottom:84px}.hero-credit{bottom:44px}}
/* ---------- 페이지 머리 (분야·소개·과정) ---------- */
.phero{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden;background:#070707;padding:150px 0 72px}
.phero .kb,.phero .ph-img{position:absolute;inset:0;z-index:0}
.kb-f,.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.kb-f{opacity:0;will-change:transform,opacity}
.kb-f:first-child{opacity:1}
.phero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(7,7,7,.92),rgba(7,7,7,.45) 50%,rgba(7,7,7,.2)),linear-gradient(90deg,rgba(7,7,7,.55),rgba(7,7,7,0) 60%)}
.phero .wrap{position:relative;z-index:2;width:100%}
.phero h1{font-size:clamp(40px,6vw,92px);font-weight:700;letter-spacing:-0.035em;line-height:1.05;margin:10px 0 18px}
.phero .ph-en{font-size:13px;font-weight:600;letter-spacing:.34em;color:var(--accent-hi);text-transform:uppercase}
.phero .ph-sub{font-size:clamp(16px,1.5vw,20px);line-height:1.75;color:#fff;max-width:720px;font-weight:500}
.ph-stats{margin-top:28px;display:flex;flex-wrap:wrap}
.ph-stats span{display:inline-block;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:9px 18px;margin:0 10px 10px 0;font-size:14px;font-weight:600;letter-spacing:.02em;background:rgba(7,7,7,.35)}
.phero.sm{min-height:0;padding:170px 0 64px;background:var(--bg)}
.phero.sm::after{display:none}
.ph-cap{position:absolute;right:56px;bottom:26px;z-index:2;font-size:12.5px;color:rgba(255,255,255,.78);letter-spacing:.03em}
@media (max-width:980px){
.phero{min-height:0;display:block;padding:92px 0 0}
.phero .kb,.phero .ph-img{position:relative;inset:auto;height:auto;aspect-ratio:16/10;margin-top:28px}
.phero .kb.tall{aspect-ratio:4/5}
.phero::after{display:none}
.phero h1{font-size:clamp(34px,10vw,52px)}
.phero .ph-sub{font-size:16px}
.ph-cap{position:static;display:block;padding:10px 24px 0}
.phero.sm{padding:110px 0 36px}
}
/* ---------- 이동 경로 ---------- */
.crumb{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:6px}
.crumb a{display:inline-block;padding:12px 0;color:var(--ink-soft)}
.crumb a:hover{color:#fff}
.crumb i{font-style:normal;margin:0 10px;opacity:.6}
.crumb [aria-current]{color:#fff}
/* ---------- 본문 공통 ---------- */
.lead-big{font-size:clamp(22px,2.4vw,34px);font-weight:300;line-height:1.6;letter-spacing:-0.015em;max-width:980px}
.lead-big b{font-weight:600}
.prose{max-width:780px}
.prose p{font-size:17px;line-height:1.95;color:rgba(255,255,255,.92);margin-bottom:18px}
.btn-row{margin-top:36px;display:flex;flex-wrap:wrap}
.btn-row .pill{margin:0 12px 12px 0}
.pill.ghost{background:transparent}
.pill.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.pill{min-height:48px}
.sec.tight{padding-top:100px;padding-bottom:100px}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* ---------- 홈 서비스 카드 ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:22px}
.svc-card{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:#161412}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);max-width:none}
.svc-card:hover img{transform:scale(1.06)}
.svc-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,8,.9),rgba(8,8,8,.15) 60%)}
.svc-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 30px 32px}
.svc-in .n{font-size:12.5px;letter-spacing:.24em;color:var(--accent-hi);font-weight:700}
.svc-in h3{font-size:clamp(24px,2.2vw,34px);font-weight:700;margin:10px 0 8px;letter-spacing:-0.02em}
.svc-in p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.9)}
.svc-in .go{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px}
.svc-more{margin-top:26px;font-size:15px;color:var(--ink-soft)}
.svc-more a{color:#fff;display:inline-block;padding:12px 0;border-bottom:1px solid var(--line)}
.region-band{margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.region-band h3{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-0.01em}
.region-band p{font-size:15.5px;color:var(--ink-soft);max-width:640px;line-height:1.8}
@media (max-width:980px){.svc{grid-template-columns:1fr;grid-gap:16px}.svc-card{aspect-ratio:4/3}.svc-in{padding:22px}.region-band{display:block}.region-band p{margin-top:10px}}
/* ---------- 사례 카드 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:30px 22px}
.card{display:block;position:relative}
.card .ci{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:#161412}
.card .ci img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1);max-width:none}
.card:hover .ci img{transform:scale(1.05)}
.card h3{font-size:18px;font-weight:600;margin:14px 0 4px;letter-spacing:-0.01em}
.card .cm{font-size:13.5px;color:var(--ink-soft);letter-spacing:.02em;line-height:1.6}
.card .cm b{color:var(--accent-hi);font-weight:600;letter-spacing:.08em;font-size:12px;margin-right:8px}
.badge{position:absolute;left:12px;top:12px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:rgba(8,8,8,.72);border:1px solid rgba(255,255,255,.3)}
.badge.sb{background:var(--accent);border-color:var(--accent)}
.grp{margin-top:84px}
.grp:first-child{margin-top:0}
.grp-h{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:30px}
.grp-h h2,.grp-h h3{font-size:clamp(22px,2.1vw,30px);font-weight:600;letter-spacing:-0.015em}
.grp-h span{font-size:14px;color:var(--ink-soft)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr);grid-gap:22px 14px}.card h3{font-size:15.5px;margin-top:10px}.card .cm{font-size:12.5px}.card .cm b{display:block;margin:0 0 2px}.grp{margin-top:60px}}
/* ---------- 스토리 카드 (시공 이야기) ---------- */
.stories{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:26px}
.story{display:grid;grid-template-columns:44% 1fr;background:var(--bg-2);border:1px solid var(--line);border-radius:3px;overflow:hidden;min-height:250px}
.story .si{position:relative;overflow:hidden}
.story .si img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .9s}
.story:hover .si img{transform:scale(1.05)}
.story .st{padding:26px 26px 24px}
.story .st .k{font-size:12px;letter-spacing:.2em;color:var(--accent-hi);font-weight:700}
.story .st h3{font-size:21px;font-weight:600;margin:8px 0 10px}
.story .st p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.88)}
.story .st .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.4)}
@media (max-width:980px){.stories{grid-template-columns:1fr;grid-gap:16px}.story{grid-template-columns:1fr}.story .si{aspect-ratio:16/10}}
/* ---------- 필터 ---------- */
.chips{display:flex;flex-wrap:wrap;margin-bottom:38px}
.chip,.chips button{min-height:44px;padding:0 20px;margin:0 10px 10px 0;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);background:transparent;transition:all .25s}
.chips button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.chips button.on{background:#fff;color:#0a0a0a;border-color:#fff;font-weight:700}
.chips button small{font-size:12px;margin-left:6px;opacity:.75}
.works-note{font-size:14px;color:var(--ink-soft);margin:-18px 0 30px}
/* ---------- 사례 상세 ---------- */
.case-top{padding-top:150px;padding-bottom:40px}
.case-top h1{font-size:clamp(34px,5vw,72px);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin:8px 0 14px}
.case-top .sub{font-size:clamp(16px,1.5vw,20px);color:rgba(255,255,255,.9);max-width:820px;line-height:1.75}
.case-top .kick{font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--accent-hi);text-transform:uppercase}
.gal{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px}
.gal a{display:block;position:relative;overflow:hidden;background:#161412;border-radius:2px;aspect-ratio:3/2}
.gal a:first-child{grid-column:1/-1;aspect-ratio:16/9}
.gal img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .9s}
.gal a:hover img{transform:scale(1.03)}
.gal .gcap{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(8,8,8,.72)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin:44px 0 0}
.facts div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px}
.facts dt{font-size:12px;letter-spacing:.2em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:8px}
.facts dd{font-size:16px;font-weight:500;line-height:1.6}
.art{max-width:800px;margin:0 auto}
.art .sl{font-size:12.5px;font-weight:700;letter-spacing:.24em;color:var(--accent-hi);margin:72px 0 10px;text-transform:uppercase}
.art h2{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-0.02em;line-height:1.35;margin:0 0 20px}
.art h2.plain{margin-top:72px}
.art h3{font-size:19px;font-weight:600;margin:28px 0 10px}
.art p{font-size:17px;line-height:1.95;color:rgba(255,255,255,.92);margin-bottom:18px}
.art p b{color:#fff;font-weight:700}
.art .key{font-size:18px;font-weight:600;color:#fff;border-left:2px solid var(--accent-hi);padding:4px 0 4px 16px;margin:6px 0 20px}
.art .pull{font-size:clamp(19px,1.8vw,24px);font-weight:300;line-height:1.7;color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:30px 0}
.art ul{margin:0 0 20px 20px}.art li{font-size:16.5px;line-height:1.85;color:rgba(255,255,255,.9)}
.art table{width:100%;border-collapse:collapse;margin:10px 0 26px;font-size:15.5px}
.art th,.art td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.art th{font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);font-weight:600}
.src-note{font-size:13.5px;color:var(--ink-soft);margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.src-note a{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 0}
@media (max-width:980px){.case-top{padding-top:96px;padding-bottom:24px}.gal{grid-template-columns:1fr;grid-gap:10px}.facts{grid-template-columns:repeat(2,1fr)}.facts div{padding:16px}.art p{font-size:16px}}
/* ---------- 진행 과정 — 설계 → 시공 중 → 완성 ---------- */
.pw{position:relative;height:88vh;min-height:620px;overflow:hidden;background:#070707}
.pw-stage{position:absolute;inset:0}
.pw-f{position:absolute;inset:0;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1),-webkit-clip-path 1.25s cubic-bezier(.77,0,.18,1)}
.pw-f.on,.pw-f.past{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
.pw-f.on{z-index:2}.pw-f.past{z-index:1}
.pw-f picture,.pw-f img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.pw-f img{transform:scale(1.06);transition:transform 4.5s ease-out}
.pw-f.on img{transform:scale(1)}
.pw::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(7,7,7,.9),rgba(7,7,7,.25) 55%,rgba(7,7,7,.35))}
.pw .wrap{position:absolute;left:0;right:0;bottom:64px;z-index:4}
.pw h1{font-size:clamp(40px,6vw,92px);font-weight:700;letter-spacing:-0.035em;line-height:1.05;margin:8px 0 16px}
.pw .ph-sub{font-size:clamp(16px,1.5vw,20px);max-width:680px;line-height:1.75;font-weight:500}
.pw-lab{list-style:none;display:flex;flex-wrap:wrap;margin-top:28px}
.pw-lab li{margin:0 10px 10px 0}
.pw-lab button{min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.34);border-radius:999px;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);background:rgba(7,7,7,.4);transition:all .3s}
.pw-lab li.on button{background:#fff;color:#0a0a0a;border-color:#fff}
.pw-bar{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;height:3px}
.pw-bar i{flex:1;background:rgba(255,255,255,.14);margin-right:2px;transition:background .6s}
.pw-bar i.on{background:var(--accent-hi)}
.pw-cap{font-size:13px;color:rgba(255,255,255,.8);margin-top:8px}
.steps{counter-reset:s;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:120px 1fr 42%;grid-gap:0 40px;padding:56px 0;border-bottom:1px solid var(--line);align-items:start}
.step .sn{font-size:64px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(240,237,232,.3)}
.step h2{font-size:clamp(24px,2.2vw,32px);font-weight:600;margin-bottom:6px}
.step .en{font-size:12.5px;font-weight:700;letter-spacing:.24em;color:var(--accent-hi);text-transform:uppercase;margin-bottom:18px}
.step p{font-size:17px;line-height:1.9;color:rgba(255,255,255,.92)}
.step .sim{aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:#161412}
.step .sim img{width:100%;height:100%;object-fit:cover;max-width:none}
.checklist{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.checklist div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 22px}
.checklist b{display:block;font-size:12px;letter-spacing:.2em;color:var(--accent-hi);margin-bottom:10px}
.checklist span{font-size:17px;font-weight:600}
@media (max-width:980px){
.pw{height:88vh;min-height:560px}
.pw .wrap{bottom:40px}
.pw h1{font-size:clamp(34px,10vw,52px)}
.step{grid-template-columns:1fr;grid-gap:0;padding:40px 0}
.step .sn{font-size:44px;margin-bottom:12px}
.step .sim{margin-top:22px}
.checklist{grid-template-columns:repeat(2,1fr)}
}
/* ---------- 회사 정보 표 ---------- */
.co{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.co div{display:flex;border-bottom:1px solid var(--line);padding:18px 0}
.co dt{width:150px;flex:none;font-size:13px;letter-spacing:.1em;color:var(--ink-soft);padding-top:2px}
.co dd{font-size:16px;line-height:1.7}
.co dd a{text-decoration:underline;text-underline-offset:3px}
.disamb{font-size:13.5px;color:var(--ink-soft);margin-top:22px;line-height:1.8}
@media (max-width:980px){.co{grid-template-columns:1fr}.co dt{width:110px}}
/* ---------- 상담 ---------- */
.ct-grid{display:grid;grid-template-columns:1fr 1.1fr;grid-gap:80px;align-items:start}
.ct-ch a,.ct-ch div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:22px 0;min-height:64px}
.ct-ch a:first-child,.ct-ch div:first-child{border-top:1px solid var(--line)}
.ct-ch b{font-size:12.5px;letter-spacing:.2em;color:var(--ink-soft);font-weight:600;width:110px;flex:none}
.ct-ch span{font-size:18px;font-weight:600;flex:1}
.ct-ch i{font-style:normal;color:var(--ink-soft)}
.ct-ch a:hover span{color:var(--accent-hi)}
.cta .cform,.ct-grid .cform{margin-top:0}
.ct-prep{margin-top:40px;font-size:15px;color:var(--ink-soft);line-height:1.9}
.ct-prep b{color:#fff}
@media (max-width:980px){.ct-grid{grid-template-columns:1fr;grid-gap:48px}.ct-ch span{font-size:16px}.ct-ch b{width:88px}}
/* ---------- CTA 띠 ---------- */
.cta-band{padding:120px 0;text-align:center;border-top:1px solid var(--line);background:var(--bg-2)}
.cta-band .small{font-size:13.5px;font-weight:600;letter-spacing:.3em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:20px}
.cta-band h2{font-size:clamp(28px,3.4vw,48px);font-weight:200;letter-spacing:-0.02em;line-height:1.3}
.cta-band h2 b{font-weight:600}
.cta-band .btn-row{justify-content:center}
.cta-band .btn-row .pill{margin:0 6px 12px}
@media (max-width:980px){.cta-band{padding:80px 24px}}
/* ---------- FAQ 묶음 ---------- */
.fq-grp{margin-top:72px}
.fq-grp:first-of-type{margin-top:0}
.fq-grp>h2{font-size:clamp(20px,1.9vw,26px);font-weight:600;margin-bottom:18px;display:flex;align-items:baseline;justify-content:space-between}
.fq-grp>h2 a{font-size:14px;font-weight:500;color:var(--ink-soft);padding:12px 0}
.fq-list{border-top:1px solid var(--line)}
.guides{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:0 40px;border-top:1px solid var(--line)}
.guides a{display:block;border-bottom:1px solid var(--line);padding:22px 0}
.guides a b{display:block;font-size:18px;font-weight:600;margin-bottom:4px}
.guides a span{font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.guides a:hover b{color:var(--accent-hi)}
@media (max-width:980px){.guides{grid-template-columns:1fr}}
/* ---------- 푸터 확장 ---------- */
.foot2{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line);margin-bottom:28px}
.foot2 h4{font-size:12px;letter-spacing:.22em;color:var(--ink-soft);font-weight:600;margin-bottom:12px;text-transform:uppercase}
.foot2 p{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.88)}
.foot2 ul{list-style:none}
.foot2 li a{display:inline-block;padding:9px 0;font-size:14.5px;color:rgba(255,255,255,.88)}
.foot2 li a:hover{color:#fff}
.foot2 .fl{height:18px;width:auto;margin-bottom:16px}
@media (max-width:980px){.foot2{grid-template-columns:1fr 1fr;grid-gap:28px 20px}.foot2>div:first-child{grid-column:1/-1}}
/* ---------- 크게 보기 ---------- */
.lb{position:fixed;inset:0;z-index:600;background:rgba(5,5,5,.96);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain}
.lb-x{position:absolute;top:14px;right:16px;width:48px;height:48px;font-size:30px;color:#fff}
.lb-n{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);font-size:28px;color:#fff}
.lb-n.prev{left:14px}.lb-n.next{right:14px}
.lb-c{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13.5px;color:var(--ink-soft);padding:0 20px}
/* ---------- 404 ---------- */
.nf{min-height:80vh;display:flex;align-items:center}
.nf h1{font-size:clamp(40px,6vw,80px);font-weight:700}
/* ---------- 보정 (1차 확인 후) ---------- */
footer{margin-left:var(--rail)}
.foot2 li a{padding:12px 0;min-height:44px}
footer a[href^="tel:"],.ov-info a{display:inline-block;padding:12px 0;margin:-12px 0}
main p a,.ph-cap a,.pw-cap a,.fq p a{display:inline-block;padding:12px 0;margin:-12px 0}
.topbar nav a{min-width:44px;text-align:center}
.rail .rlogo{display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.rail .rmid a{padding:0 9px}
.checklist.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.checklist.c4{grid-template-columns:repeat(2,1fr)}.checklist div{padding:20px 16px}}
main p a,.ph-cap a,.pw-cap a,.fq p a,.crumb a,.fq-grp>h2 a,.foot2 li a{min-width:44px;text-align:center}
.co dd a{display:inline-block;padding:12px 0;margin:-12px 0}
.src-note a{padding:12px 0}
/* ---------- 블로그 ---------- */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px}
.bcard{display:flex;flex-direction:column;min-height:230px;padding:26px 26px 22px;border:1px solid var(--line);border-radius:3px;background:var(--bg-2);transition:border-color .3s,background .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
.bcard:hover{border-color:rgba(123,143,224,.6);background:#161618;transform:translateY(-3px)}
.bcard .bk{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent-hi)}
.bcard h3{font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-0.01em;margin:12px 0 10px}
.bcard p{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.82);flex:1}
.bcard .go{font-size:14px;font-weight:600;margin-top:16px;padding:12px 0 0;border-top:1px solid var(--line)}
.chips a.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;margin:0 10px 10px 0;border:1px solid var(--line);border-radius:999px;font-size:14.5px;color:var(--ink-soft)}
.chips a.chip.on{background:#fff;color:#0a0a0a;border-color:#fff;font-weight:700}
.chips a.chip:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.chips a.chip.on:hover{color:#0a0a0a}
.ov-quick{margin-top:30px}
.ov-quick a{display:inline-block;padding:12px 0;margin-right:18px;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.ov-quick a:hover{color:#fff}
@media (max-width:980px){.bcards{grid-template-columns:1fr;grid-gap:12px}.bcard{min-height:0;padding:22px 20px 18px}.bcard h3{font-size:18px}}
@media (min-width:600px) and (max-width:980px){.bcards{grid-template-columns:repeat(2,1fr)}}