/* v153 · Services: 무늬 없이, 깊은 검정 패널 + 얇은 선 + 큰 여백 — 고급스럽게 */
#app .svx-list{display:flex;gap:12px}
#app .svx-list li{flex:1 1 0;min-width:0;transition:flex-grow .8s cubic-bezier(.22,1,.36,1)}
#app .svx-list:hover li{flex-grow:.9}
#app .svx-list li:hover,#app .svx-list li:focus-within{flex-grow:1.35}
#app .svx-row{position:relative;min-height:clamp(400px,32vw,470px);padding:34px 30px 28px !important;border-radius:14px;isolation:isolate;overflow:hidden;
 background:#0d0d0f !important;border:1px solid rgba(255,255,255,.09) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -50px rgba(0,0,0,.95);transform:none !important;
 transition:border-color .5s,background .5s}
/* one hairline of key colour along the top — grows on hover */
#app .svx-row::before{content:'';position:absolute;left:30px;top:0;width:28px;height:2px;background:#fd4533;transition:width .7s cubic-bezier(.22,1,.36,1)}
#app .svx-row:hover::before,#app .svx-row:focus-visible::before,
#app .svx-row.is-hot::before{width:calc(100% - 60px)}
/* soft warm light from above, only on hover */
#app .svx-row .svx-fill{display:block !important;position:absolute;inset:0;z-index:-1;transform:none !important;background:radial-gradient(90% 55% at 50% 0%,rgba(253,69,51,.13),rgba(253,69,51,0) 70%);opacity:0;transition:opacity .7s}
#app .svx-row:hover .svx-fill,#app .svx-row:focus-visible .svx-fill,
#app .svx-row.is-hot .svx-fill{opacity:1}
#app .svx-row:hover,#app .svx-row:focus-visible,
#app .svx-row.is-hot{border-color:rgba(255,255,255,.18) !important;background:#111113 !important}
#app .svx-no{font:500 13px/1 var(--en) !important;color:rgba(255,255,255,.45) !important;letter-spacing:.14em}
#app .svx-row:hover .svx-no,
#app .svx-row.is-hot .svx-no{color:#fd4533 !important}
#app .svx-name{margin-top:auto !important;font:600 clamp(30px,2.6vw,42px)/1 var(--en) !important;letter-spacing:-.04em;color:#fff;white-space:nowrap}
#app .svx-mid{margin-top:16px !important;min-height:64px;gap:8px !important}
#app .svx-mid b{font:600 15.5px/1.3 var(--kr) !important;color:rgba(255,255,255,.92)}
#app .svx-mid span{font:400 14.5px/1.6 var(--kr) !important;color:rgba(255,255,255,.58) !important}
#app .svx-price{margin-top:26px !important;padding-top:18px;font:500 13.5px/1.4 var(--kr) !important;color:rgba(255,255,255,.75) !important;border-top:1px solid rgba(255,255,255,.1) !important}
#app .svx-ar{top:28px !important;right:26px !important;border-color:rgba(255,255,255,.16) !important;color:rgba(255,255,255,.7)}
#app .svx-row:hover .svx-ar,#app .svx-row:focus-visible .svx-ar,
#app .svx-row.is-hot .svx-ar{background:#fd4533 !important;border-color:#fd4533 !important;color:#fff !important}
/* AX ONE: the white panel */
#app .svx-row.is-one{background:#fff !important;border-color:#fff !important}
#app .svx-row.is-one .svx-no{color:#fd4533 !important}
#app .svx-row.is-one .svx-name{color:#0b0b0d}
#app .svx-row.is-one .svx-mid b{color:#0b0b0d}
#app .svx-row.is-one .svx-mid span{color:rgba(11,11,13,.6) !important}
#app .svx-row.is-one .svx-price{color:#0b0b0d !important;border-top-color:rgba(11,11,13,.12) !important}
#app .svx-row.is-one .svx-ar{border-color:rgba(11,11,13,.2) !important;color:#0b0b0d}
#app .svx-row.is-one .svx-fill{background:radial-gradient(90% 55% at 50% 0%,rgba(253,69,51,.08),rgba(253,69,51,0) 70%)}
#app .svx-row.is-one:hover,
#app .svx-row.is-one.is-hot{background:#fff !important}
@media (max-width:1100px){#app .svx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#app .svx-list li,#app .svx-list:hover li{flex-grow:1}}
@media (max-width:640px){#app .svx-list{grid-template-columns:1fr}#app .svx-row{min-height:280px}#app .svx-name{font-size:32px !important}}
@media (prefers-reduced-motion:reduce){#app .svx-list li,#app .svx-row::before{transition:none}}

/* ── 가격 탭: 라운딩 유지 · 카드(유리)와 다른 문법 = 단단한 검정 알약 + 키컬러 알약 ── */
#app #estimate .ptabs{background:#0b0b0d !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:999px !important;padding:6px !important;gap:2px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;margin-bottom:clamp(36px,4vw,52px)}
#app #estimate .ptabs::before,#app #estimate .ptabs::after{display:none !important}
#app #estimate .ptabs button{padding:15px 28px !important;border-radius:999px !important;font:700 15px/1 var(--en) !important;letter-spacing:.01em;color:rgba(255,255,255,.5) !important;background:none !important}
#app #estimate .ptabs button:hover:not(.on){color:#fff !important}
#app #estimate .ptabs button.on{color:#fff !important}
#app #estimate .ptabs .ind,#app #estimate .ptabs[data-k] .ind{top:6px !important;bottom:6px !important;border:0 !important;border-radius:999px !important;background:#fd4533 !important;box-shadow:0 6px 22px -6px rgba(253,69,51,.7),inset 0 1px 0 rgba(255,255,255,.25) !important}
#app #estimate .ptabs button.is-one sup{color:#fd4533 !important;border-color:rgba(253,69,51,.6) !important}
#app #estimate .ptabs button.is-one.on sup{color:#fff !important;border-color:rgba(255,255,255,.7) !important}

/* ── Step 1 카드에만 있던 주황 테두리 제거: 모든 단계 같은 기본값 ── */
#app #estimate .tier.has-bd{border-color:var(--line) !important;box-shadow:none !important}

/* v155 · 서비스: 위 선은 카드 윗변에 딱 붙게(떠 보이지 않게) · 번호 가독성 · 이름 크게 */
#app .svx-row::before{left:0 !important;right:auto;top:0 !important;width:0 !important;height:3px !important;transition:width .7s cubic-bezier(.22,1,.36,1) !important}
#app .svx-row:hover::before,#app .svx-row:focus-visible::before,
#app .svx-row.is-hot::before{width:100% !important}
#app .svx-no{font:700 15px/1 var(--en) !important;letter-spacing:.08em !important;color:rgba(255,255,255,.82) !important}
#app .svx-row:hover .svx-no,
#app .svx-row.is-hot .svx-no{color:#fd4533 !important}
#app .svx-row.is-one .svx-no{color:#fd4533 !important}
#app .svx-name{font:800 clamp(32px,2.9vw,46px)/1 var(--en) !important;letter-spacing:-.045em !important}
@media (max-width:640px){#app .svx-name{font-size:36px !important}}

/* v164 · 테두리를 안쪽 그림자 선으로 바꿔, 위 키컬러 선이 카드 맨 위 가장자리에 딱 붙게 (1px 틈 제거) */
#app .svx-row{border:0 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 40px 80px -50px rgba(0,0,0,.95) !important}
#app .svx-row:hover,#app .svx-row:focus-visible,
#app .svx-row.is-hot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 40px 80px -50px rgba(0,0,0,.95) !important}
#app .svx-row.is-one{box-shadow:0 40px 80px -50px rgba(0,0,0,.95) !important}
#app .svx-row::before{z-index:3}
/* v165 · 첫 화면 하단 서비스명: 더 굵고 크게 */
#app .hsx-name{font:800 clamp(20px,1.7vw,28px)/1 var(--en) !important;letter-spacing:.06em !important}
#app .hsx-item:hover .hsx-name,#app .hsx-item:focus-visible .hsx-name{letter-spacing:.09em !important}
#app .hsx-item.is-one .hsx-name{letter-spacing:.06em !important}
#app .hsx-no{font:700 12px/1 var(--en) !important}
#app .hsx-role{font-size:14px !important}
@media (max-width:820px){#app .hsx-name{font-size:18px !important}}
/* v166 · 서비스 카드 안에 유리 X-ray 오브젝트를 옅게 (카드 안에 잘려 들어오게) */
#app .svx-art{position:absolute;z-index:-1;top:-4%;right:-14%;width:88%;height:auto;pointer-events:none;opacity:.26;mix-blend-mode:screen;
 -webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.55) 55%,transparent 78%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.55) 55%,transparent 78%);
 transform:translate3d(0,0,0) scale(1);transition:opacity .7s,transform 1.1s cubic-bezier(.22,1,.36,1)}
#app .svx-row:hover .svx-art,#app .svx-row:focus-visible .svx-art,
#app .svx-row.is-hot .svx-art{opacity:.42;transform:translate3d(-2%,-2%,0) scale(1.04)}
#app .svx-row.is-one .svx-art{filter:invert(1);mix-blend-mode:multiply;opacity:.16}
#app .svx-row.is-one:hover .svx-art,
#app .svx-row.is-one.is-hot .svx-art{opacity:.26}
#app .svx-row>*:not(.svx-art):not(.svx-fill){position:relative;z-index:1}
#app .svx-row .svx-ar{position:absolute !important}
@media (max-width:640px){#app .svx-art{width:62%;right:-6%;top:-8%}}
/* v167 · 서비스 아이콘 = 크롬 메탈 오브젝트, 작게 · 선명하게 (위 v166의 옅은 X-ray 대체) */
#app .svx-art{top:clamp(64px,6vw,84px) !important;right:clamp(18px,2vw,30px) !important;left:auto !important;width:clamp(96px,8.6vw,130px) !important;height:auto;opacity:.95 !important;mix-blend-mode:normal !important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) !important;
 -webkit-mask-image:none !important;mask-image:none !important;transform:translate3d(0,0,0) rotate(0deg);transition:transform 1s cubic-bezier(.22,1,.36,1),filter .6s !important}
#app .svx-row:hover .svx-art,#app .svx-row:focus-visible .svx-art,
#app .svx-row.is-hot .svx-art{opacity:1 !important;transform:translate3d(0,-6px,0) rotate(-6deg) scale(1.06) !important;filter:drop-shadow(0 22px 26px rgba(0,0,0,.6)) !important}
#app .svx-row.is-one .svx-art{filter:drop-shadow(0 14px 20px rgba(0,0,0,.18)) !important;opacity:1 !important}
#app .svx-row.is-one:hover .svx-art,
#app .svx-row.is-one.is-hot .svx-art{filter:drop-shadow(0 20px 24px rgba(0,0,0,.22)) !important}
@media (max-width:640px){#app .svx-art{width:96px !important;top:60px !important}}
/* v168 · 서비스 카드 = 유리 카드 + 움직이는 아이콘 (레퍼런스 결: 번호 / 분류 · 가운데 아이콘 · 아래 이름) */
#app .svx-art{display:none !important}
#app .svx-row:not(.is-one){background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 80px -50px rgba(0,0,0,.95) !important;border-radius:12px !important}
#app .svx-row:not(.is-one):hover,#app .svx-row:not(.is-one):focus-visible,
#app .svx-row:not(.is-one).is-hot{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04)) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 40px 80px -50px rgba(0,0,0,.95) !important}
#app .svx-row.is-one{border-radius:12px !important}
#app .svx-tag{position:absolute;top:36px;left:76px;font:600 11.5px/1 var(--en);letter-spacing:.14em;color:rgba(255,255,255,.6);white-space:nowrap}
#app .svx-row.is-one .svx-tag{color:rgba(11,11,13,.55)}
#app .svx-row.is-one::after{display:none !important}
#app .svx-ico{display:block;width:100%;height:clamp(120px,10vw,150px);margin:clamp(34px,3vw,48px) 0 auto;pointer-events:none}
#app .svx-name{margin-top:clamp(18px,2vw,28px) !important}
@media (max-width:640px){#app .svx-ico{height:120px;margin-top:30px}}
#app .svx-no{order:-2}
#app .svx-tag{position:absolute !important;top:34px !important;left:auto !important;right:auto;margin-left:46px;order:-1;z-index:2}
#app .svx-row .svx-tag{transform:translateY(0)}

/* v169 · 무료 진단 = 왼쪽 '0원 제안' 유리 패널(고정) + 오른쪽 세 조직 진단 카드(서비스 카드와 같은 움직이는 아이콘) */
#app .dg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,1.6vw,24px);margin-top:clamp(40px,4.5vw,64px);align-items:start}
#app .dg-offer{position:sticky;top:110px;padding:clamp(30px,3vw,44px);border-radius:12px;overflow:hidden;isolation:isolate;
 background:radial-gradient(90% 60% at 0% 0%,rgba(253,69,51,.22),rgba(253,69,51,0) 60%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 80px -50px rgba(0,0,0,.95)}
#app .dg-eye{margin:0;font:600 11.5px/1 var(--en);letter-spacing:.16em;color:rgba(255,255,255,.6)}
#app .dg-zero{margin:18px 0 0;font:800 clamp(96px,10vw,150px)/.82 var(--en);letter-spacing:-.06em;color:#fd4533}
#app .dg-zero small{font:700 .3em/1 var(--kr);letter-spacing:-.02em;margin-left:6px}
#app .dg-offer h3{margin:clamp(26px,2.6vw,36px) 0 0;font:700 clamp(26px,2.3vw,34px)/1.3 var(--kr);letter-spacing:-.04em;color:#fff}
#app .dg-sub{margin:14px 0 0;font:400 15.5px/1.65 var(--kr);color:rgba(255,255,255,.66)}
#app .dg-terms{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px}
#app .dg-terms li{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 13.5px/1 var(--kr);color:rgba(255,255,255,.85)}
#app .dg-cta{all:unset;cursor:pointer;margin-top:28px;display:flex;justify-content:center;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:19px 24px;border-radius:999px;background:#fd4533;color:#fff;font:600 16px/1 var(--kr);box-shadow:0 14px 34px -14px rgba(253,69,51,.8);transition:transform .3s,box-shadow .3s}
#app .dg-cta span{transition:transform .3s}
#app .dg-cta:hover,#app .dg-cta:focus-visible{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(253,69,51,.95)}
#app .dg-cta:hover span{transform:translateX(4px)}
#app .dg-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
#app .dg-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.2vw,16px)}
#app .dg-item{display:grid;grid-template-columns:clamp(130px,12vw,170px) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:center;padding:clamp(24px,2.4vw,32px);border-radius:12px;
 background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .4s,background .4s}
#app .dg-item:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035))}
#app .svx-ico.dg-ico{width:100%;height:clamp(104px,9.6vw,136px);margin:0}
#app .dg-head{margin:0;display:flex;gap:14px;font:600 11.5px/1 var(--en);letter-spacing:.14em;color:rgba(255,255,255,.55)}
#app .dg-head em{font-style:normal;font-weight:700;color:#fd4533}
#app .dg-item h4{margin:12px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:800 clamp(24px,2vw,30px)/1 var(--en);letter-spacing:-.04em;color:#fff}
#app .dg-item h4 small{font:500 14px/1 var(--kr);letter-spacing:0;color:rgba(255,255,255,.55)}
#app .dg-how{margin:16px 0 0;font:500 15.5px/1.55 var(--kr);color:rgba(255,255,255,.9)}
#app .dg-how b{display:inline-block;margin-right:10px;font:600 12px/1 var(--kr);color:rgba(255,255,255,.5)}
#app .dg-get{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#app .dg-get li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:rgba(253,69,51,.1);box-shadow:inset 0 0 0 1px rgba(253,69,51,.28);font:500 13.5px/1.3 var(--kr);color:#fff}
#app .dg-get li::before{content:'';width:9px;height:5px;border-left:1.6px solid #fd4533;border-bottom:1.6px solid #fd4533;transform:rotate(-45deg) translateY(-2px)}
@media (max-width:1000px){#app .dg{grid-template-columns:1fr}#app .dg-offer{position:relative;top:0}}
@media (max-width:600px){#app .dg-item{grid-template-columns:1fr}#app .svx-ico.dg-ico{height:110px}}
/* v170 · 카드 위 주황 바 제거 */
#app .svx-row::before{display:none !important}
/* v171 · 무료 진단 정돈: 아이콘 · 칩 · 개별 상자 걷어내고, 두 패널을 같은 높이의 한 쌍으로 */
#app .dg{align-items:stretch}
#app .dg-offer{position:relative;top:0;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important}
#app .dg-zero{font-size:clamp(84px,8vw,124px)}
#app .dg-offer h3{font-size:clamp(24px,2vw,30px)}
#app .dg-terms{margin-top:auto;padding-top:22px;gap:6px 18px}
#app .dg-terms li{padding:0;background:none;box-shadow:none;display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.72)}
#app .dg-terms li::before{content:'';width:4px;height:4px;border-radius:50%;background:#fd4533}
#app .dg-sub{margin-bottom:28px}
#app .dg-cta{margin-top:24px}
/* right: one panel, three rows split by hairlines */
#app .dg-list{gap:0;border-radius:12px;padding:0 clamp(26px,2.6vw,40px);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
#app .dg-item{display:block;padding:clamp(26px,2.4vw,34px) 0;border-radius:0;background:none !important;box-shadow:none !important;backdrop-filter:none;-webkit-backdrop-filter:none}
#app .dg-item+.dg-item{border-top:1px solid rgba(255,255,255,.1)}
#app .dg-body{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.6fr);column-gap:clamp(20px,2.4vw,40px);row-gap:10px;align-items:baseline}
#app .dg-head{grid-column:1;grid-row:1;font-size:11px}
#app .dg-item h4{grid-column:1;grid-row:2;margin:0;flex-direction:column;align-items:flex-start;gap:8px;font-size:clamp(22px,1.8vw,26px)}
#app .dg-item h4 small{font-size:13px}
#app .dg-how{grid-column:2;grid-row:1/span 2;margin:0;align-self:start;font-size:15.5px}
#app .dg-how b{display:block;margin:0 0 8px;font-size:11.5px;letter-spacing:.02em}
#app .dg-get{grid-column:2;margin:4px 0 0;gap:4px 20px}
#app .dg-get li{padding:0;background:none;box-shadow:none;border-radius:0;font-size:14.5px;color:rgba(255,255,255,.78)}
@media (max-width:1000px){#app .dg-offer{position:relative}}
@media (max-width:600px){#app .dg-body{grid-template-columns:1fr}#app .dg-how,#app .dg-get,#app .dg-head,#app .dg-item h4{grid-column:1;grid-row:auto}}
@media (min-width:601px){#app .dg-how{grid-row:1}#app .dg-get{grid-row:2;align-self:start;margin-top:2px}}
/* v172 · 0원 제안 패널 = 흰 바탕 (서비스의 AX ONE 흰 카드와 같은 결) */
#app .dg-offer{background:#fff !important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 40px 80px -50px rgba(0,0,0,.95) !important}
#app .dg-eye{color:rgba(11,11,13,.5)}
#app .dg-offer h3{color:#0b0b0d}
#app .dg-sub{color:rgba(11,11,13,.62)}
#app .dg-terms{border-top-color:rgba(11,11,13,.1)}
#app .dg-terms li{color:rgba(11,11,13,.75)}
/* cover: three numbered steps in one row instead of the bullet list */
#app .dg-terms.dg-steps{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;gap:0 10px;max-width:340px}
#app .dg-steps li{gap:7px;font-weight:600;color:rgba(11,11,13,.86);white-space:nowrap}
#app .dg-steps li::before{content:none}
#app .dg-steps em{font:700 12px/1 var(--en);font-style:normal;letter-spacing:.06em;color:#fd4533}
@media (max-width:380px),(min-width:1001px) and (max-width:1140px){#app .dg-steps li{flex-direction:column;align-items:flex-start;gap:6px}}
#app .dg-cta{box-shadow:0 14px 30px -16px rgba(253,69,51,.7)}
#app .dg-cta:focus-visible{outline-color:#0b0b0d}
/* v173 · 상담 카드 위 'BRIXON®' 글자 → 검정 로고 */
#app .ct-brand{margin:0 0 14px;line-height:0}
#app .ct-brand img{display:block;height:26px;width:auto}
/* v174 · 오른쪽 아래 플로팅 독: 맨 위에 떠 있는 입체 레이어 (겹 그림자 · 윗면 빛 · 버튼 볼록) */
.fdock{z-index:90 !important;background:linear-gradient(180deg,rgba(58,58,64,.82),rgba(22,22,26,.88)) !important;backdrop-filter:blur(18px) saturate(140%) !important;-webkit-backdrop-filter:blur(18px) saturate(140%) !important;border:0 !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.35),0 12px 24px -6px rgba(0,0,0,.55),0 32px 60px -18px rgba(0,0,0,.75) !important;
 transform:translateZ(0);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.fdock:hover{transform:translateY(-3px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1),0 3px 6px rgba(0,0,0,.35),0 18px 30px -8px rgba(0,0,0,.6),0 44px 70px -20px rgba(0,0,0,.8) !important}
.fdock .fd-ai{background:radial-gradient(120% 90% at 50% 15%,#ff7a68 0%,#fd4533 45%,#d9301f 100%) !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(120,10,0,.35),0 6px 14px -4px rgba(253,69,51,.65),0 2px 3px rgba(0,0,0,.35) !important;transition:transform .3s,box-shadow .3s !important}
.fdock .fd-ai:hover,.fdock .fd-ai:focus-visible{transform:translateY(-1px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(120,10,0,.35),0 10px 20px -4px rgba(253,69,51,.75),0 2px 3px rgba(0,0,0,.35) !important}
.fdock .fd-btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;transition:background .3s,box-shadow .3s,transform .3s !important}
.fdock .fd-btn:hover,.fdock .fd-btn:focus-visible{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -4px rgba(0,0,0,.6) !important;transform:translateY(-1px)}
/* v176 · 섹션 영문 슬로건(Open Pricing, Three Steps Each. 등)을 더 굵게 */
#app .hl h2{font-weight:700 !important;letter-spacing:-.055em !important}
#app .hl h2 .mask span{font-weight:inherit}
/* v177 · 무료 진단 = 한 장의 리플릿(4면 접지): 흰 표지 + 세 면, 접힌 자국과 면마다 다른 빛으로 접힌 종이처럼 */
#app .dg{display:flex;gap:0;align-items:stretch;border-radius:12px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
#app .dg-offer{flex:1.25 1 0;border-radius:0 !important;box-shadow:none !important;position:relative;z-index:1}
#app .dg-list{flex:3 1 0;display:flex;padding:0;border-radius:0;background:#17171a;box-shadow:none}
#app .dg-item{flex:1 1 0;position:relative;display:flex;padding:clamp(30px,2.8vw,42px) clamp(22px,2.2vw,32px) !important;border:0 !important}
#app .dg-item+.dg-item{border-top:0 !important}
#app .dg-body{display:flex !important;flex-direction:column;gap:0}
#app .dg-head{order:0}
#app .dg-item h4{order:1;margin:14px 0 0 !important;flex-direction:column;gap:8px}
#app .dg-how{order:2;margin:28px 0 0 !important;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
#app .dg-get{order:3;flex-direction:column;gap:8px;margin-top:16px !important}
/* folded paper: each panel catches the light a little differently, with a crease where they meet */
#app .dg-item::before{content:'';position:absolute;inset:0;pointer-events:none;transition:opacity .8s cubic-bezier(.22,1,.36,1)}
#app .dg-item:nth-child(odd)::before{background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.06) 55%,rgba(255,255,255,.03))}
#app .dg-item:nth-child(even)::before{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 45%,rgba(0,0,0,.22))}
#app .dg-item::after{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.14) 50%,rgba(255,255,255,.04));box-shadow:-6px 0 14px rgba(0,0,0,.35)}
#app .dg-item>*{position:relative;z-index:1}
#app .dg-offer::after{content:'';position:absolute;right:0;top:0;bottom:0;width:22px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.08));pointer-events:none}
/* hover: the leaflet opens flat */
#app .dg:hover .dg-item::before{opacity:.35}
@media (max-width:1000px){
 #app .dg{flex-direction:column}
 #app .dg-list{flex-direction:column}
 #app .dg-item:nth-child(odd)::before{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.04) 60%)}
 #app .dg-item:nth-child(even)::before{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18))}
 #app .dg-item::after{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;box-shadow:0 -6px 14px rgba(0,0,0,.35)}
 #app .dg-offer::after{display:none}
}
/* v178 · 리플릿: 각 면 내용은 위에서부터 같은 높이로 시작, 모바일에서 표지 접힘 수정 */
#app .dg-item{align-items:flex-start !important}
#app .dg-body{width:100%}
#app .dg-head{margin-top:clamp(8px,1vw,14px) !important}
@media (max-width:1000px){#app .dg-offer,#app .dg-list,#app .dg-item{flex:none !important}}
/* v180 · 상담 구간 배경의 구름(흐린 돌 질감)을 다시 보이게 — v136에서 너무 어둡게 눌러 사라져 보였음 */
#app .ct-v78 .ct-bg{filter:blur(16px) grayscale(1) brightness(.62) contrast(1.12) !important;opacity:1 !important}
/* v182 · MISSION / VISION 라벨에 Brick+'On'과 같은 빛 (흰 글자 + 은은히 숨쉬는 붉은 글로우) */
#app .mvx-k span{color:#fff !important;animation:onGlow 3.2s ease-in-out infinite !important}
#app .mvx-r .mvx-k span{animation-delay:-1.6s !important}
@media (prefers-reduced-motion:reduce){#app .mvx-k span{animation:none !important;text-shadow:0 0 6px rgba(255,236,226,.5),0 0 18px rgba(253,69,51,.4),0 0 40px rgba(253,69,51,.24) !important}}
/* v183 · AS IS → TO BE 비교: 긴 스크롤 고정(320svh) 없이 한 화면, 자동으로 차례 전환 */
#app .transform-pin{height:auto !important}
#app .transform-stage{height:auto !important;position:relative !important;min-height:0 !important;padding:clamp(40px,5vw,72px) 2px clamp(30px,4vw,56px) !important}
/* v184 · 서비스 카드 화살표 버튼: 채워진 빨간 원 대신 — 가는 링이 키컬러로 그려지고 화살표가 빠져나가며 새 화살표가 들어오는 절제된 동작 */
#app .svx-row .svx-ar{overflow:hidden;color:transparent !important;font-size:0 !important;background:transparent !important;border:0 !important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;transform:none !important;transition:box-shadow .5s cubic-bezier(.22,1,.36,1),background .5s !important}
#app .svx-row .svx-ar::before,#app .svx-row .svx-ar::after{content:'↗';position:absolute;inset:0;display:grid;place-items:center;font:500 15px/1 var(--en);color:rgba(255,255,255,.85);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s}
#app .svx-row .svx-ar::after{transform:translate(-120%,120%);opacity:0;color:#fd4533}
#app .svx-row:hover .svx-ar,#app .svx-row:focus-visible .svx-ar,
#app .svx-row.is-hot .svx-ar{background:rgba(255,255,255,.04) !important;box-shadow:inset 0 0 0 1px rgba(253,69,51,.9),0 0 18px -4px rgba(253,69,51,.45) !important}
#app .svx-row:hover .svx-ar::before,#app .svx-row:focus-visible .svx-ar::before,
#app .svx-row.is-hot .svx-ar::before{transform:translate(120%,-120%);opacity:0}
#app .svx-row:hover .svx-ar::after,#app .svx-row:focus-visible .svx-ar::after,
#app .svx-row.is-hot .svx-ar::after{transform:none;opacity:1}
/* white card (AX ONE) */
#app .svx-row.is-one .svx-ar{box-shadow:inset 0 0 0 1px rgba(11,11,13,.18) !important}
#app .svx-row.is-one .svx-ar::before{color:#0b0b0d}
#app .svx-row.is-one:hover .svx-ar,
#app .svx-row.is-one.is-hot .svx-ar{background:rgba(253,69,51,.05) !important;box-shadow:inset 0 0 0 1px rgba(253,69,51,.9) !important}
@media (prefers-reduced-motion:reduce){#app .svx-row .svx-ar::before,#app .svx-row .svx-ar::after{transition:none}}
#app .svx-row .svx-ar::before,#app .svx-row .svx-ar::after{font:600 16px/1 var(--en)}
#app .svx-row .svx-ar::after{color:#ff5a45;text-shadow:0 0 10px rgba(253,69,51,.55)}
/* v186 · 하단 3D 석판 심볼: 조금 더 왼쪽(회사 정보 쪽)으로, 더 크게 */
@media (min-width:821px){#app .ct-brick{right:clamp(40px,5vw,80px) !important;width:min(48%,410px) !important;top:47% !important}}
@media (min-width:821px){#app .ct-brick{right:clamp(0px,1vw,16px) !important}}
/* v188 · 서비스 상세 페이지 하단 '지금 보는 서비스' 카드 글자가 검정으로 남던 문제 → 흰색 */
#app .roles a.cur,#app .roles a.cur .en,#app .roles a.cur h4{color:#fff !important}
#app .roles a.cur .en{color:rgba(255,255,255,.72) !important}
/* v191 · 메뉴로 먼 구간 이동 시: 짧게 어두워졌다가 도착 지점에서 밝아짐 (중간 장면을 다 거치며 버벅이지 않게) */
#app{transition:opacity .26s ease}
html.is-jumping #app{opacity:0;transition:opacity .17s ease}
/* v194 · 미션 · 비전 문장: 글자 그림자 삭제, '기획' 배경색은 #fd4533 100% */
#app .mvx-col h3,#app .mvx-col h3 mark,#app .mvx-sub{text-shadow:none !important}
#app .mvx-col h3 mark.key-mark{background:#fd4533 !important;color:#fff !important;opacity:1 !important;mix-blend-mode:normal !important;filter:none !important;position:relative;z-index:1;isolation:isolate}
#app .mvx-col h3 mark.key-mark::before{background:#fd4533 !important;opacity:1 !important;filter:none !important;mix-blend-mode:normal !important}
/* v195 · 기준과 약속: 점선 위치 정렬 — 약속 칸을 항상 2줄 높이로 고정해 네 칸의 점선이 같은 높이에 */
#app .vp-pr{min-height:calc(2 * 1.6em);box-sizing:content-box}
/* v197 · 블록 쌓기(물리) 구간 뒤에 키비주얼과 같은 벽 텍스처를 은은하게 깔기 */
#app #blocks{position:relative;isolation:isolate}
#app #blocks::before{content:'';display:block !important;position:absolute;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;width:auto !important;height:auto !important;z-index:-1;pointer-events:none;background:url(img/gen/wall-bg.jpg) center/760px auto repeat;filter:grayscale(1) brightness(.6) contrast(1.1);opacity:.17;
 -webkit-mask-image:radial-gradient(90% 75% at 50% 55%,#000 30%,transparent 88%);mask-image:radial-gradient(90% 75% at 50% 55%,#000 30%,transparent 88%)}
/* v198 · 하단 석판 심볼 가독성: 뒤에 어두운 둥근 그늘을 깔아 구름 배경과 분리 */
#app .ct-brick::before{content:'';position:absolute;inset:-6% -10%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(8,8,10,.78),rgba(8,8,10,.45) 55%,rgba(8,8,10,0));display:block !important}
/* v201 · '나의 상황' 카드 덱: 스크롤 고정 해제 + 뒤 카드 어둡게 하는 필터를 가벼운 방식으로 (스크롤 렉 제거) */
#app #start.is-scrub{min-height:0 !important}
#app #start.is-scrub>.wrap{position:relative !important;top:auto !important}
.situation-card{will-change:transform,opacity;contain:layout paint}
.situation-card:not(.is-front){filter:none !important;box-shadow:inset 0 0 0 3000px rgba(0,0,0,.4) !important}
.situation-card{transition:transform .95s cubic-bezier(.22,1,.36,1),opacity .6s ease,box-shadow .6s ease !important}
/* v202 · 4단 접지: 진짜로 접힌 면(3D) + 면마다 빛을 받는 정도가 달라 접힌 종이처럼 */
@media (min-width:1001px){
 #app .dg.is-fold{overflow:visible !important;perspective:2600px;perspective-origin:50% 40%;transform-style:preserve-3d;box-shadow:none !important;border-radius:0 !important}
 #app .dg.is-fold .dg-list{display:contents !important}
 #app .dg.is-fold .dg-offer,#app .dg.is-fold .dg-item{backface-visibility:hidden;will-change:transform;box-shadow:0 50px 70px -45px rgba(0,0,0,.9) !important}
 #app .dg.is-fold .dg-item{background:#17171a !important}
 #app .dg.is-fold .dg-offer{border-radius:12px 0 0 12px !important}
 #app .dg.is-fold .dg-item:last-child{border-radius:0 12px 12px 0 !important}
 #app .dg.is-fold .dg-item::before{opacity:1 !important;background:linear-gradient(90deg,rgba(0,0,0,calc(.08 + max(var(--fold,0),0) * .45)),rgba(255,255,255,calc(max(calc(var(--fold,0) * -1),0) * .06)) 60%,rgba(0,0,0,calc(max(calc(var(--fold,0) * -1),0) * .35))) !important;transition:none !important}
 #app .dg.is-fold .dg-offer::after{width:100% !important;right:0;background:linear-gradient(90deg,rgba(0,0,0,0) 55%,rgba(0,0,0,calc(.04 + max(var(--fold,0),0) * .22))) !important}
 #app .dg.is-fold .dg-item::after{box-shadow:none !important;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.16) 50%,rgba(255,255,255,.03)) !important}
}
/* v203 · 블록 쌓기 배경 = 세워진 벽돌 벽 + 바닥 (키워드 벽돌이 벽 앞 바닥에 쌓이는 구도). 이미지 자체가 위·좌우로 서서히 사라져 위아래 구간과 띠 없이 이어짐 */
#app #blocks::before{background:url(img/gen/wall-stand.webp) center bottom/cover no-repeat !important;filter:none !important;opacity:.62 !important;-webkit-mask-image:none !important;mask-image:none !important}
/* v204 · 상담 폼: 이름 · 직함 두 칸, 회사명, 필수 표시 · 누락 강조 */
.fx2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx2>label{min-width:0}
input.hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none}
#app .ct-form textarea.err,.f textarea.err,.f input.err{border-color:#fd4533 !important;background:#fff4f2 !important}
.f textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:84px;font:inherit;border-radius:12px;padding:14px 16px;border:1px solid var(--line,rgba(255,255,255,.15));background:rgba(255,255,255,.04);color:inherit}
.f textarea.err{background:rgba(253,69,51,.08) !important;color:inherit}
.f-err{color:#fd4533 !important;font-weight:600}
.send-button[disabled]{opacity:.7;cursor:progress}
@media (max-width:520px){.fx2{grid-template-columns:1fr}}
/* v205 · 접지가 접혀 있다는 게 잘 보이게: 면마다 밝기 차이를 크게, 접는 선(산 접기 = 밝은 선, 골 접기 = 어두운 그늘)을 또렷하게 */
@media (min-width:1001px){
 #app .dg.is-fold .dg-item::before{background:linear-gradient(90deg,rgba(0,0,0,calc(.1 + max(var(--fold,0),0) * .9)),rgba(0,0,0,calc(max(var(--fold,0),0) * .35)) 70%,rgba(255,255,255,calc(max(calc(var(--fold,0) * -1),0) * .05))),linear-gradient(90deg,rgba(255,255,255,calc(max(calc(var(--fold,0) * -1),0) * .12)),rgba(255,255,255,0) 55%,rgba(0,0,0,calc(max(calc(var(--fold,0) * -1),0) * .55))) !important}
 #app .dg.is-fold .dg-item::after{width:2px !important;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.32) 50%,rgba(255,255,255,.04)) !important;box-shadow:-10px 0 22px rgba(0,0,0,.45) !important}
 #app .dg.is-fold .dg-offer::after{background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,calc(.06 + max(var(--fold,0),0) * .32))) !important}
 #app .dg.is-fold .dg-item:nth-child(odd) h4,#app .dg.is-fold .dg-item:nth-child(odd) .dg-how,#app .dg.is-fold .dg-item:nth-child(odd) .dg-get li{opacity:.95}
}
/* v247 · leaflet faces: the main content of each face is the list of things the service can make real (category + titles); the diagnosis lines sit small at the foot */
#app .dg-body{align-self:stretch}
/* faces are taller than one raster tile now; inside a preserve-3d context Chromium without GPU stops painting below it. The panels never intersect, so a flat context draws the same fold */
@media (min-width:1001px){#app .dg.is-fold{transform-style:flat}}
#app .dg-ideas{order:1;align-self:stretch;margin:clamp(22px,2vw,28px) 0 clamp(24px,2.2vw,30px);padding-top:clamp(20px,1.7vw,24px);border-top:1px solid rgba(255,255,255,.1)}
#app .dg-ideas-h{margin:0;font:700 clamp(14.5px,1.08vw,16px)/1.4 var(--kr);letter-spacing:-.02em;color:#fff}
#app .dg-grp{margin-top:clamp(18px,1.6vw,22px)}
#app .dg-cat{margin:0 0 10px;font:700 14px/1.35 var(--kr);letter-spacing:-.01em;color:#fd4533}
#app .dg-grp ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
#app .dg-grp li{position:relative;padding-left:15px;font:500 clamp(15px,1.1vw,16.5px)/1.42 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.94);overflow-wrap:anywhere}
#app .dg-grp li{text-wrap:pretty}
/* a run that reads as one phrase moves to the next line whole (three-face desktop and one-column phone; the cramped widths in between keep the plain wrap) */
@media (min-width:1200px),(max-width:639px){#app .dg-nb{display:inline-block}}
#app .dg-grp li::before{content:'';position:absolute;left:0;top:.66em;width:6px;height:1px;background:rgba(255,255,255,.45)}
/* glossary tips on list terms (MCP · CRM · 에이전트) open across the item's own width, so a narrow face never cuts them off */
#app .dg-grp .gl{position:static}
#app .dg-grp .gl::after{left:0;right:0;width:auto;max-width:none;bottom:calc(100% + 6px);transform:translateY(4px)}
#app .dg-grp .gl:hover::after,#app .dg-grp .gl:focus::after{transform:none}
/* diagnosis lines: pinned to the foot of each face so the three line up, one size down */
#app .dg-how{align-self:stretch;margin-top:auto !important;padding-top:18px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86)}
#app .dg-how b{margin-bottom:6px;font-size:11.5px}
#app .dg-get{margin-top:10px !important;gap:6px}
#app .dg-get li{font-size:14px;color:rgba(255,255,255,.72)}
/* the white cover is as tall as the faces: number on top, message and button together at the foot */
#app .dg-terms{margin-top:0}
/* one note for the whole block: these are examples, not packaged products */
#app .dg-note{margin:clamp(30px,3vw,46px) 0 0;font:400 clamp(14px,1.05vw,15px)/1.65 var(--kr);letter-spacing:-.01em;color:rgba(255,255,255,.62);text-align:center}
#app .dg-note span{display:inline-block;text-wrap:balance}
@media (min-width:640px) and (max-width:1000px){
 #app .dg-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
 #app .dg-ideas-h{grid-column:1/-1}
}
@media (max-width:1000px){#app .dg-note{text-align:left}}
/* v208 · '나의 상황' 카드: 롤링 — 앞 카드는 아래로 내려가며 덱 맨 뒤로 들어가고, 바로 뒤 카드가 앞으로 올라와 자리 잡음 */
.situation-card.is-leaving{animation:cardRollBack .95s cubic-bezier(.55,0,.25,1) both;transition:none !important;pointer-events:none}
@keyframes cardRollBack{
 0%{transform:translateX(var(--drag,0px)) translateY(0) scale(1) rotate(0deg);opacity:1;z-index:40}
 42%{transform:translateX(-1.5%) translateY(22%) scale(.97) rotate(-2.6deg);opacity:1;z-index:40}
 43%{z-index:0}
 100%{transform:translateX(38px) translateY(-30px) scale(.91) rotate(3.6deg);opacity:0;z-index:0}}
/* the card coming forward rises a touch before settling (feels like it is lifted off the stack) */
.situation-card.is-front{transition:transform .9s cubic-bezier(.2,1.25,.35,1),opacity .5s ease,box-shadow .6s ease !important}
.situation-card.is-leaving-back{animation:cardRollFront .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes cardRollFront{0%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.situation-card.is-leaving{animation:none;opacity:0}}
/* v209 · 블록 쌓기 배경 = 예전 콘크리트 질감의 벽 + 원근이 있는 바닥 (키워드 벽돌이 바닥 위에 쌓임) */
#app #blocks::before{background:url(img/gen/wall-floor.webp) center bottom/cover no-repeat !important;opacity:.9 !important}
/* v210 · 첫 화면 하단 서비스 4개 = 얇은 유리 독(한 줄 바) 안의 네 칸. 위 선 대신 칸 안 아래쪽에 벽이 쌓이는 만큼 차오르는 키컬러 선, 켜진 칸엔 작은 빛점 */
#app .hsx{gap:0 !important;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(22,22,26,.55),rgba(12,12,14,.62));backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.85)}
#app .hsx-item{position:relative;padding:22px clamp(18px,2vw,30px) 22px !important;gap:8px !important;transition:background .5s ease}
#app .hsx-item+.hsx-item{box-shadow:inset 1px 0 0 rgba(255,255,255,.08)}
#app .hsx-item .hsx-track{position:absolute !important;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);bottom:0;top:auto !important;height:2px !important;background:rgba(255,255,255,.06) !important;border-radius:2px;overflow:hidden}
#app .hsx-item .hsx-track i{background:#fd4533 !important;box-shadow:0 0 12px rgba(253,69,51,.7)}
#app .hsx-item .hsx-track::after{display:none !important}
#app .hsx-no{position:relative;padding-left:14px}
#app .hsx-no::before{content:'';position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .5s,box-shadow .5s}
#app .hsx-item.is-set .hsx-no::before{background:#fd4533;box-shadow:0 0 0 3px rgba(253,69,51,.18),0 0 10px rgba(253,69,51,.8)}
#app .hsx-item:hover,#app .hsx-item:focus-visible{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
#app .hsx-item.is-one{background:linear-gradient(180deg,rgba(253,69,51,.10),rgba(253,69,51,.02))}
#app .hsx-item.is-one .hsx-top::after{position:absolute;right:clamp(18px,2vw,30px);top:24px}
@media (max-width:820px){#app .hsx{border-radius:12px}#app .hsx-item:nth-child(3){box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}#app .hsx-item:nth-child(4){box-shadow:inset 1px 0 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.08)}#app .hsx-item{padding:16px 14px !important}}
/* v212 · 블록 쌓기 구간: 구간 안 상담 버튼 숨김(네비 버튼과 중복) + 네비 버튼이 한 번 반짝 */
#app #blocks .ph-actions .mc-btn{display:none !important}
.hd-cta{position:relative;overflow:hidden;isolation:isolate}
.hd-cta.is-flash{animation:ctaFlash 1.6s cubic-bezier(.22,1,.36,1) 1}
.hd-cta.is-flash::after{content:'';position:absolute;inset:-20% auto -20% -40%;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);animation:ctaSheen 1.1s cubic-bezier(.4,0,.2,1) .15s 1 both}
@keyframes ctaFlash{0%{box-shadow:0 0 0 0 rgba(253,69,51,0)}22%{transform:scale(1.07);box-shadow:0 0 0 6px rgba(253,69,51,.28),0 0 32px 6px rgba(253,69,51,.6)}55%{transform:scale(1);box-shadow:0 0 0 12px rgba(253,69,51,0),0 0 22px 2px rgba(253,69,51,.35)}100%{transform:none;box-shadow:0 0 0 0 rgba(253,69,51,0)}}
@keyframes ctaSheen{from{left:-45%}to{left:120%}}
@media (prefers-reduced-motion:reduce){.hd-cta.is-flash,.hd-cta.is-flash::after{animation:none}}
/* v213 · 블록 쌓기 무대: 콘크리트 벽 + 매끈한 바닥(무늬 없음) + 위에서 떨어지는 조명 + 바닥 접지 그림자 · 착지 먼지 */
#app #blocks::before{background:none !important}
#app #blocks .physics-world{position:relative;overflow:visible !important}
#app #blocks .physics-world::before{content:'' !important;display:block !important;position:absolute;z-index:0;pointer-events:none;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-640px;bottom:34px;
 background:radial-gradient(48% 70% at 50% 100%,rgba(255,240,226,.10),rgba(255,240,226,0) 70%),url(img/gen/wall-only.webp?v=2) center bottom/cover no-repeat;opacity:1}
#app #blocks .physics-world::after{content:'';position:absolute;z-index:0;pointer-events:none;left:calc(50% - 50vw);right:calc(50% - 50vw);top:calc(100% - 34px);height:230px;
 background:radial-gradient(42% 60% at 50% 0%,rgba(255,236,220,.10),rgba(255,236,220,0) 75%),linear-gradient(180deg,#232226 0%,#1b1a1d 22%,#131215 60%,rgba(13,12,14,0) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 14px 18px -10px rgba(0,0,0,.55)}
#app #blocks .physics-shadow{position:absolute;left:0;top:0;width:100%;height:calc(100% + 90px);z-index:1;pointer-events:none}
#app #blocks .physics-tag{z-index:2}
/* light from above: each tag gets a lit top edge and a slightly darker foot */
#app #blocks .physics-tag.t-white{background:linear-gradient(180deg,#fff 0%,#f1f1f3 100%) !important;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.08),0 2px 0 #c9c9cf,0 14px 22px -14px rgba(0,0,0,.9) !important}
#app #blocks .physics-tag.t-key{background:linear-gradient(180deg,#ff5a46 0%,#e83d2b 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.14),0 2px 0 #a8291c,0 14px 22px -14px rgba(0,0,0,.9) !important}
#app #blocks .physics-tag.t-line{background:linear-gradient(180deg,#1c1c20,#0e0e10) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 #000,0 14px 22px -14px rgba(0,0,0,.9) !important}
#app #blocks .physics-block{overflow:visible !important}
#app #blocks{overflow-x:clip}
#app #blocks .physics-world::before{height:auto !important;top:-640px !important;bottom:34px !important;width:auto !important;inset:auto;left:calc(50% - 50vw) !important;right:calc(50% - 50vw) !important;transform:none !important;filter:none !important;mask:none !important;-webkit-mask:none !important}
#app #blocks .physics-heading{position:relative;z-index:3}
#app #blocks .physics-world::before{opacity:.5 !important}
/* v214 · 첫 화면 하단 서비스: 선 · 상자 전부 없애고 '큰 타이포'만. 벽이 쌓이는 만큼 외곽선 글자가 왼쪽부터 흰색(ONE은 키컬러)으로 차오름 */
#app .hsx{background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;overflow:visible !important;gap:0 clamp(20px,3vw,56px) !important}
#app .hsx-item,#app .hsx-item+.hsx-item,#app .hsx-item.is-one,#app .hsx-item:hover{background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important}
#app .hsx-item .hsx-track,#app .hsx-item .hsx-track i{display:none !important}
#app .hsx-no::before{display:none !important}
#app .hsx-no{padding:0 !important;align-self:flex-start;margin-top:.15em;font:700 12px/1 var(--en) !important;color:#fd4533 !important;letter-spacing:.08em !important}
#app .hsx-top{align-items:flex-start !important;gap:10px !important}
#app .hsx-name{font:800 clamp(28px,3vw,50px)/1 var(--en) !important;letter-spacing:-.035em !important;white-space:nowrap;
 -webkit-text-stroke:1px rgba(255,255,255,.38);-webkit-text-fill-color:transparent !important;color:transparent !important;
 background:linear-gradient(90deg,#fff 0,#fff calc(var(--p,0)*100%),rgba(255,255,255,0) calc(var(--p,0)*100% + .5%)) !important;-webkit-background-clip:text !important;background-clip:text !important;transition:letter-spacing .6s cubic-bezier(.22,1,.36,1) !important}
#app .hsx-item.is-one .hsx-name{-webkit-text-stroke-color:rgba(253,69,51,.55);background:linear-gradient(90deg,#fd4533 0,#fd4533 calc(var(--p,0)*100%),rgba(253,69,51,0) calc(var(--p,0)*100% + .5%)) !important}
#app .hsx-item.is-set .hsx-name{-webkit-text-stroke-color:transparent}
#app .hsx-item:hover .hsx-name{letter-spacing:-.01em !important}
#app .hsx-item.is-one .hsx-top::after{position:static !important;align-self:flex-start;margin-top:.2em}
#app .hsx-role{margin-top:12px;font-size:14px !important;color:rgba(255,255,255,.55) !important}
#app .hsx-q{color:rgba(255,255,255,.75) !important}
@media (max-width:820px){#app .hsx{gap:22px 18px !important}#app .hsx-name{font-size:24px !important}}
#app .hsx-item.is-one .hsx-name{-webkit-background-clip:text !important;background-clip:text !important}
#app .hsx-name::before,#app .hsx-name::after{display:none !important}
#app .hsx-item.is-one .hsx-top::after{white-space:nowrap;font-size:9px !important;letter-spacing:.16em !important}
/* v215 · 숫자 구간: 선 없이, 위 서비스 타이포와 같은 언어(외곽선 → 차오르는 굵은 숫자) */
#app #heroIntro .intro-heading{border:0 !important;padding:0 !important;margin:0 0 clamp(48px,6vw,90px) !important}
#app #heroIntro .intro-heading>div{font:700 clamp(30px,3.4vw,54px)/1.22 var(--kr) !important;letter-spacing:-.05em !important;color:#fff}
#app #heroIntro .intro-heading em{font-style:normal;color:#fd4533}
#app #heroIntro .intro-heading span{display:block;margin-top:18px;font:400 clamp(15px,1.15vw,17px)/1.6 var(--kr) !important;letter-spacing:-.01em;color:rgba(255,255,255,.55) !important}
#app #heroIntro .hero-proof{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,56px) !important;border:0 !important;padding:0 !important;margin:0 !important}
#app #heroIntro .hero-proof>div{border:0 !important;padding:0 !important;box-shadow:none !important;background:none !important}
#app #heroIntro .hero-proof>div::before,#app #heroIntro .hero-proof>div::after,#app #heroIntro .hero-proof::before,#app #heroIntro .hero-proof::after{display:none !important}
#app #heroIntro .hero-proof b{display:flex;align-items:flex-start;gap:6px;font:800 clamp(56px,6.6vw,110px)/.9 var(--en) !important;letter-spacing:-.05em !important}
#app #heroIntro .hero-proof b>span{-webkit-text-stroke:1px rgba(255,255,255,.35);-webkit-text-fill-color:transparent;color:transparent;
 background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,0) 50.5%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-position 1.4s cubic-bezier(.22,1,.36,1)}
#app #heroIntro .hero-proof.is-in b>span{background-position:0 0}
#app #heroIntro .hero-proof>div:nth-child(2) b>span{transition-delay:.15s}
#app #heroIntro .hero-proof>div:nth-child(3) b>span{transition-delay:.3s}
#app #heroIntro .hero-proof>div:nth-child(4) b>span{transition-delay:.45s}
#app #heroIntro .hero-proof b small{margin-top:.12em;font:700 clamp(14px,1.2vw,20px)/1 var(--kr) !important;color:#fd4533 !important;letter-spacing:0 !important}
#app #heroIntro .hero-proof>div>span{display:block;margin-top:16px;font:500 14.5px/1.4 var(--kr) !important;color:rgba(255,255,255,.62) !important}
@media (max-width:820px){#app #heroIntro .hero-proof{grid-template-columns:1fr 1fr;row-gap:36px !important}}
#app .wall-hero-foot{bottom:clamp(44px,7vh,72px) !important}
#app .hsx-item{overflow:visible !important}
#app .hsx-flip{overflow:visible !important;height:auto !important}
/* v216 · 네비 상담 버튼: 커지고 번쩍이는 대신, 이 구간에 있는 동안 은은하게 숨 쉬듯 발광 */
.hd-cta.is-flash,.hd-cta.is-flash::after{animation:none !important}
.hd-cta::after{display:none !important}
.hd-cta{transition:box-shadow 1.2s ease,filter 1.2s ease}
.hd-cta.is-glow{animation:ctaGlow 2.8s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 14px 1px rgba(253,69,51,.32),0 0 36px 4px rgba(253,69,51,.14)}50%{box-shadow:0 0 22px 3px rgba(253,69,51,.5),0 0 56px 10px rgba(253,69,51,.22)}}
@media (prefers-reduced-motion:reduce){.hd-cta.is-glow{animation:none;box-shadow:0 0 20px 2px rgba(253,69,51,.4)}}
/* v217 · 구간 이음새 점검
   1) 블록 쌓기 바닥 → 상담: 바닥이 어두운 색으로 끝나 생기던 띠 → 바닥 아래쪽을 투명으로 서서히 사라지게
   2) 첫 화면(벽) → 숫자 구간: 벽 끝의 어둠이 숫자 구간 위쪽에서 부드럽게 풀리도록 */
#app #blocks .physics-world::after{background:radial-gradient(42% 60% at 50% 0%,rgba(255,236,220,.10),rgba(255,236,220,0) 75%),linear-gradient(180deg,#232226 0%,#1d1c20 30%,#1d1c20 100%) !important;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%)}
#app #heroIntro{position:relative;isolation:isolate}
#app #heroIntro::before{content:'';position:absolute;left:0;right:0;top:0;height:260px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.85),rgba(12,12,14,0))}
#app #heroIntro::before{z-index:1 !important;height:380px !important;background:linear-gradient(180deg,rgb(20,19,21) 0%,rgba(20,19,21,.75) 30%,rgba(20,19,21,0) 100%) !important}
#app #heroIntro>.wrap{position:relative;z-index:2}
#app .wall-hero .wall-in::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,19,21,0),rgb(20,19,21))}
#app .wall-hero .wall-copy,#app .wall-hero .wall-hero-foot{z-index:3}
/* v218 · 숫자 단위(y+ · + · ea · h): 영문으로, 숫자 윗선에 정확히 맞춰 */
#app #heroIntro .hero-proof b{align-items:flex-start !important;gap:.06em !important;line-height:1 !important;font-size:clamp(60px,6.8vw,116px) !important}
#app #heroIntro .hero-proof b>span{line-height:.74;display:inline-block;padding-top:.02em}
#app #heroIntro .hero-proof b small{margin-top:0 !important;font:700 .3em/1 var(--en) !important;letter-spacing:-.01em !important;color:#fd4533 !important;transform:translateY(.02em)}
#app #heroIntro .hero-proof>div>span{margin-top:22px !important;font:500 15px/1.4 var(--kr) !important;color:rgba(255,255,255,.6) !important}
#app #heroIntro .hero-proof b small{text-transform:none !important;margin-left:-.02em !important;transform:translateY(-.06em) !important}
#app #heroIntro .hero-proof b>span{padding-right:.05em;margin-right:-.05em}
/* v219 · 키워드 블록: 3D 두께 · 윗면 빛 빼고 예전처럼 플랫한 박스 */
#app #blocks .physics-tag.t-white{background:#fff !important;box-shadow:0 12px 24px -14px rgba(0,0,0,.7) !important}
#app #blocks .physics-tag.t-key{background:#fd4533 !important;box-shadow:0 12px 24px -14px rgba(0,0,0,.7) !important}
#app #blocks .physics-tag.t-line{background:#0f0f11 !important;border:1px solid rgba(255,255,255,.28) !important;box-shadow:0 12px 24px -14px rgba(0,0,0,.7) !important}
/* 바닥 → 상담: 어두운 바닥판을 없애고, 벽 밑 선과 은은한 빛만 남겨 아래로 그대로 풀리게 */
#app #blocks .physics-world::after{height:160px !important;background:radial-gradient(46% 70% at 50% 0%,rgba(255,236,220,.06),rgba(255,236,220,0) 80%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)) !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;-webkit-mask-image:none !important;mask-image:none !important}
#app #blocks{padding-bottom:clamp(20px,3vw,48px) !important}
#app #contact{padding-top:clamp(70px,8vw,120px) !important}
/* 숫자 단위 소문자 고정 */
#app #heroIntro .hero-proof b small,#app #heroIntro .hero-proof b small::first-letter{text-transform:none !important;font-variant:normal !important}
/* v220 · 하단 회사 정보: 네비 삭제(상단 메뉴가 떠 있으므로) + 정렬 정돈 */
#app .ct-nav{display:none !important}
#app .ct-co{position:relative;padding-top:clamp(28px,3vw,40px) !important;border-top:0 !important}
#app .ct-co .ct-logo{margin:0 0 22px !important;line-height:0}
#app .ct-co .ct-co-name{margin:0 0 18px !important;font:700 16px/1.3 var(--kr) !important;color:#fff}
#app .ct-co dl{margin:0 !important;display:grid;gap:10px}
#app .ct-co dl>div{display:grid;grid-template-columns:112px 1fr;align-items:baseline;gap:0;border:0 !important;padding:0 !important}
#app .ct-co dt{font:500 13px/1.5 var(--kr) !important;color:rgba(255,255,255,.45) !important}
#app .ct-co dd{margin:0;font:500 14.5px/1.5 var(--kr) !important;color:rgba(255,255,255,.88) !important}
#app .ct-co dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
#app .ct-co .ct-copy{margin:36px 0 0 !important;padding:0 !important;border:0 !important;font:500 12.5px/1 var(--en) !important;letter-spacing:.02em;color:rgba(255,255,255,.4) !important}
#app .ct-co::before,#app .ct-co::after{border:0 !important}
@media (min-width:821px){#app .ct-brick{top:50% !important;transform:translateY(-50%) !important}}
@media (min-width:1001px){#app .ct-grid{align-items:stretch !important}#app .ct-side{display:flex !important;flex-direction:column}#app .ct-co{margin-top:auto !important}#app .ct-co .ct-copy{margin-bottom:-.15em !important}}
/* v222 · 숫자 채움: 글자 상자 밖으로 삐져나온 끝부분이 비던 문제 → 글자색을 흰색으로 두고, 왼쪽부터 드러나는 방식으로 */
#app #heroIntro .hero-proof b>span{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#fff !important;-webkit-text-fill-color:#fff !important;-webkit-text-stroke:0 !important;
 padding:0 .08em 0 0 !important;margin-right:-.08em !important;clip-path:inset(-10% 100% -10% -2%);transition:clip-path 1.3s cubic-bezier(.22,1,.36,1) !important}
#app #heroIntro .hero-proof.is-in b>span{clip-path:inset(-10% -12% -10% -2%)}
@media (prefers-reduced-motion:reduce){#app #heroIntro .hero-proof b>span{clip-path:none;transition:none !important}}
/* v223 · 첫 화면 → 두 번째 구간 사이 여백 넓히기 */
#app #heroIntro{padding-top:clamp(140px,14vw,220px) !important}
/* v224 · 숫자 단위: 굵은 글꼴 대신 가는 기본 글꼴로 */
#app #heroIntro .hero-proof b small{font:400 .26em/1 var(--en) !important;letter-spacing:.01em !important;transform:translateY(.1em) !important;margin-left:.04em !important}
/* v227 · 카드 롤링: 앞 카드가 위로 들려 덱 맨 뒤 자리로 넘어가고(뒤로 들어갈 때 다른 카드 뒤로), 바로 뒷장이 같은 박자로 앞으로 나옴 */
.situation-card.is-leaving{animation:cardToBack 1s cubic-bezier(.65,0,.35,1) both !important;transition:none !important;pointer-events:none}
@keyframes cardToBack{
 0%{transform:translateX(0) translateY(0) scale(1) rotate(0);opacity:1;z-index:40}
 45%{transform:translateX(2%) translateY(-34%) scale(.95) rotate(1.5deg);opacity:1;z-index:40}
 46%{z-index:0}
 80%{transform:translateX(40px) translateY(-34px) scale(.9) rotate(3.6deg);opacity:1;z-index:0}
 100%{transform:translateX(40px) translateY(-34px) scale(.9) rotate(3.6deg);opacity:0;z-index:0}}
.situation-card.is-leaving-back{animation:cardFromBack .9s cubic-bezier(.65,0,.35,1) both !important;transition:none !important}
@keyframes cardFromBack{0%{transform:translateX(40px) translateY(-34px) scale(.9) rotate(3.6deg);opacity:0;z-index:0}20%{opacity:1}50%{transform:translateX(2%) translateY(-34%) scale(.95) rotate(1.5deg);z-index:0}51%{z-index:40}100%{transform:none;opacity:1;z-index:40}}
.situation-card{transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .6s ease,box-shadow .6s ease !important}
.situation-card.is-front{transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .4s ease,box-shadow .6s ease !important}
/* v228 · 첫 화면 끝 이음새(근본 해결): 덮개 그라데이션을 지우고, 벽 그림 자체가 아래로 투명해져 페이지 배경이 그대로 이어지게 */
#app .wall-hero .wall-in::after,#app #heroIntro::before{display:none !important}
#app .wall-hero #wallc,#app .wall-hero #wallglow,#app .wall-hero .wall-shade{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%)}
/* 머무는 구간을 짧게: 벽 높이 360 → 290svh */
.wall.wall-hero{height:290svh !important}
/* v229 · 카드 롤링을 더 부드럽고 탄력 있게: 나가는 카드는 짧고 가볍게 위로 들렸다 뒤로, 들어오는 카드는 스프링처럼 살짝 지나쳤다 제자리 */
.situation-card{transition:transform .9s cubic-bezier(.34,1.32,.64,1),opacity .45s ease,box-shadow .6s ease !important}
.situation-card.is-front{transition:transform .95s cubic-bezier(.34,1.42,.64,1) .08s,opacity .3s ease,box-shadow .6s ease !important}
.situation-card.is-leaving{animation:cardToBack2 .85s cubic-bezier(.45,.05,.2,1) both !important}
@keyframes cardToBack2{
 0%{transform:translateY(0) scale(1) rotate(0);opacity:1;z-index:40}
 38%{transform:translateX(1.5%) translateY(-28%) scale(.965) rotate(1.2deg);opacity:1;z-index:40}
 39%{z-index:0}
 78%{transform:translateX(40px) translateY(-36px) scale(.9) rotate(3.6deg);opacity:1;z-index:0}
 100%{transform:translateX(40px) translateY(-34px) scale(.9) rotate(3.6deg);opacity:0;z-index:0}}
.situation-deck:hover .situation-card.is-front{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.situation-card,.situation-card.is-front{transition:opacity .3s ease !important}}
/* v230 · Synergy: 다른 구간과 같은 제목 줄 + 가운데 벤다이어그램, 각 설명은 해당 겹침 쪽에 */
#services .syn.syn2{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:clamp(24px,3vw,56px);row-gap:clamp(10px,1.4vw,20px);align-items:center;margin-top:clamp(40px,5vw,80px)}
#services .syn2 .syn-fig{grid-column:2;grid-row:2;max-width:none;justify-self:center;width:100%}
#services .syn2 .si-ab{grid-column:2;grid-row:1;text-align:center;justify-self:center;max-width:340px}
#services .syn2 .si-ac{grid-column:1;grid-row:2;text-align:right;justify-self:end;align-self:end;margin-bottom:22%;max-width:300px}
#services .syn2 .si-bc{grid-column:3;grid-row:2;text-align:left;justify-self:start;align-self:end;margin-bottom:22%;max-width:300px}
#services .syn2 .syn-go{grid-column:1/-1;grid-row:3;justify-self:center;margin-top:clamp(20px,2.4vw,36px)}
#services .syn-info{cursor:default;opacity:.55;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
#services .syn-info span{display:block;font:700 11.5px/1 var(--en);letter-spacing:.14em;color:#fd4533}
#services .syn-info b{display:block;margin-top:10px;font:700 clamp(19px,1.6vw,24px)/1.25 var(--kr);letter-spacing:-.04em;color:#fff}
#services .syn-info p{margin:8px 0 0;font:400 14.5px/1.6 var(--kr);color:rgba(255,255,255,.62)}
#services .syn2[data-hl="ab"] .si-ab,#services .syn2[data-hl="ac"] .si-ac,#services .syn2[data-hl="bc"] .si-bc{opacity:1}
#services .syn2[data-hl="ac"] .si-ac{transform:translateX(-6px)}
#services .syn2[data-hl="bc"] .si-bc{transform:translateX(6px)}
#services .syn2[data-hl="ab"] .si-ab{transform:translateY(-4px)}
/* the lit overlap glows a little; the core breathes */
#services .syn2 .sy-l{transition:fill .7s ease,opacity .6s ease .9s !important}
#services .syn2[data-hl="ab"] .sy-l[data-l="ab"],#services .syn2[data-hl="ac"] .sy-l[data-l="ac"],#services .syn2[data-hl="bc"] .sy-l[data-l="bc"]{fill:rgba(253,69,51,.5)}
#services .syn2 .sy-core{animation:synCore 3.2s ease-in-out infinite}
@keyframes synCore{0%,100%{opacity:.92}50%{opacity:1}}
#services .syn2 .sy-c{transition:stroke .5s}
@media (max-width:900px){#services .syn.syn2{grid-template-columns:1fr;grid-template-rows:none}#services .syn2>*{grid-column:1 !important;grid-row:auto !important;justify-self:stretch !important;text-align:left !important;margin:0 !important;max-width:none !important}#services .syn2 .syn-fig{order:-1;max-width:460px;justify-self:center !important}#services .syn-info{opacity:1}}
/* v231 · 스텝 카드 디졸브 */
#app .ps-card{opacity:0;filter:blur(10px);translate:0 28px;transition:opacity 1s ease,filter 1.1s ease,translate 1.1s cubic-bezier(.22,1,.36,1) !important}
#app .ps-card.dz-in{opacity:1;filter:blur(0);translate:0 0}
@media (prefers-reduced-motion:reduce){#app .ps-card{opacity:1;filter:none;translate:none}}

/* v232 — 영역 간 간격 통일 (기준: 10vw, 최대 144px) */
#app{--secgap:clamp(88px,10vw,144px)}
#app #services .teams + .hl{margin-top:var(--secgap) !important}
#app #process.psteps{padding-top:var(--secgap) !important}
#app #history{padding-top:var(--secgap) !important}

/* v233 — Process 카드: 디졸브 대신 스텝별 '쌓아 올림' 등장 */
#app .ps-card,#app .ps-card.dz-in{opacity:1 !important;filter:none !important}
#app .ps-field .ps-card{clip-path:inset(100% 0 0 0);transition:clip-path .7s cubic-bezier(.83,0,.17,1),border-color .3s,background .3s,transform .3s !important}
#app .ps-field .ps-card.st-in{clip-path:inset(0 0 0 0);animation:stLand 1.4s ease .55s both}
@keyframes stLand{0%{border-color:rgba(253,69,51,.75)}100%{border-color:rgba(255,255,255,.12)}}
#app .ps-field .ps-card>*{opacity:0;transform:translateY(26px);transition:opacity .15s,transform 0s .15s}
#app .ps-field .ps-card.st-in>*{opacity:1;transform:none;transition:opacity .45s ease var(--d,.3s),transform .7s cubic-bezier(.16,1,.3,1) var(--d,.3s)}
#app .ps-field .ps-card.st-in>.ps-no{--d:.32s}
#app .ps-field .ps-card.st-in>h3{--d:.42s}
#app .ps-field .ps-card.st-in>.ps-lead{--d:.52s}
#app .ps-field .ps-card.st-in>.ps-dl{--d:.62s}
#app .ps-field .ps-card .ps-dl>div{opacity:0;transform:translateY(12px)}
#app .ps-field .ps-card.st-in .ps-dl>div{opacity:1;transform:none;transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(1){transition-delay:.7s}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(2){transition-delay:.8s}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(3){transition-delay:.9s}
#app .ps-field .ps-card.st-in:hover{animation:none}
@media (prefers-reduced-motion:reduce){#app .ps-field .ps-card,#app .ps-field .ps-card>*,#app .ps-field .ps-card .ps-dl>div{clip-path:none !important;opacity:1 !important;transform:none !important;animation:none !important}}

/* v234 — Process 카드: 아래→위 열림 제거. 은은하게 떠오르며 살짝 탄력 있게 자리 잡음(스텝 순서 유지) */
#app .ps-field .ps-card{clip-path:none !important;opacity:0 !important;scale:.94;transition:opacity 1.1s cubic-bezier(.25,.1,.25,1),scale 1.3s cubic-bezier(.34,1.3,.64,1),border-color .3s,background .3s,transform .3s !important}
#app .ps-field .ps-card.st-in{opacity:1 !important;scale:1;animation:none !important}
#app .ps-field .ps-card>*{opacity:0;transform:translateY(10px);transition:opacity .3s,transform 0s .3s}
#app .ps-field .ps-card.st-in>*{opacity:1;transform:none;transition:opacity .9s ease var(--d,.3s),transform 1.1s cubic-bezier(.34,1.35,.64,1) var(--d,.3s)}
#app .ps-field .ps-card.st-in>.ps-no{--d:.25s}
#app .ps-field .ps-card.st-in>h3{--d:.35s}
#app .ps-field .ps-card.st-in>.ps-lead{--d:.45s}
#app .ps-field .ps-card.st-in>.ps-dl{--d:.55s}
#app .ps-field .ps-card .ps-dl>div{transform:translateY(8px)}
#app .ps-field .ps-card.st-in .ps-dl>div{transition:opacity .8s ease,transform 1s cubic-bezier(.34,1.35,.64,1)}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(1){transition-delay:.6s}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(2){transition-delay:.7s}
#app .ps-field .ps-card.st-in .ps-dl>div:nth-child(3){transition-delay:.8s}
@media (prefers-reduced-motion:reduce){#app .ps-field .ps-card{opacity:1 !important;scale:1}}

/* v235 — 가격 카드: 스쳐 지나가는 빛 제거 → 커서를 따라 은은하게 머무는 빛 + 테두리만 살짝 밝아짐 */
#app #estimate .glass>.sheen::before{animation:none !important;display:none !important}
#app #estimate .tier>.tier-spot{background:radial-gradient(620px circle at var(--tx,50%) var(--ty,0),rgba(255,238,230,.055),rgba(253,69,51,.035) 35%,transparent 62%) !important;transition:opacity .9s cubic-bezier(.22,1,.36,1) !important}
#app #estimate .tier>.tier-rim{padding:1px;background:radial-gradient(300px circle at var(--tx,50%) var(--ty,0),rgba(255,255,255,.38),rgba(253,69,51,.16) 40%,transparent 72%) !important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity .9s cubic-bezier(.22,1,.36,1) !important}
#app #estimate .tier::after{display:none !important}

/* v237 — 벽 캔버스의 CSS 마스크 제거(매 프레임 마스크 합성으로 스크롤 렉) → 캔버스 안에서 같은 66%→100% 페이드를 그림 */
#app .wall-hero #wallc,#app .wall-hero #wallglow,#wallc,#wallglow{-webkit-mask-image:none !important;mask-image:none !important}
#app .wall-hero .wall-shade{display:none !important}

/* fix: the folded leaflet container took the clicks meant for the buttons inside it (desktop) */
#app .dg.is-fold{pointer-events:none}
#app .dg.is-fold>*{pointer-events:auto}