/* ZENFIX 내진 DMC 벽체 시스템 — shared styles for every page */
:root{
  --ink:#0B0C0E; --ink-2:#131518; --ink-3:#1C1F23; --ink-line:rgba(255,255,255,.09);
  --g900:#191F28; --g800:#333D4B; --g700:#4E5968; --g600:#6B7684; --g500:#8B95A1;
  --g400:#B0B8C1; --g300:#D1D6DB; --g200:#E5E8EB; --g100:#F2F4F6; --g50:#F9FAFB;
  --red:#E5392F; --red-2:#FF5A4F; --red-soft:#FFF1F0;
  --max:1160px; --gut:clamp(20px,5vw,48px);
  --sec:clamp(120px,14vw,200px);
  --r-lg:32px; --r-md:22px; --r-sm:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--g900);background:#fff;font-size:17px;line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
/* even line lengths: headings/leads balanced, other paragraphs never end on a lone word */
h1,h2,h3,.lead,.psub,.hero-sub,.hero-lead,.cta-sub,.ptitle,.display{text-wrap:balance}
p,li,dd,small{text-wrap:pretty;text-wrap:balance}
.ilink{color:var(--g800);font-weight:600;border-bottom:1px solid var(--g300);transition:border-color .2s}
.ilink:hover{border-color:var(--g900)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--g900);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.sec.tight-top{padding-top:0}
.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--red);margin-bottom:22px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dark .eyebrow,.on-dark .eyebrow{color:var(--red-2)}
.h2{font-size:clamp(34px,4.9vw,64px);line-height:1.2;font-weight:700;letter-spacing:-.045em;color:var(--g900)}
.h3{font-size:clamp(26px,3vw,40px);line-height:1.28;font-weight:700;letter-spacing:-.045em}
.lead{margin-top:28px;font-size:clamp(17px,1.45vw,20px);line-height:1.75;color:var(--g600);font-weight:500;max-width:640px}
.center .lead{margin-left:auto;margin-right:auto}
.lead.wide{max-width:760px}
@media(max-width:900px){.br-d{display:none}}
.dark{background:var(--ink);color:#fff}
.dark .h2{color:#fff}
.dark .lead{color:rgba(255,255,255,.62)}
.gray{background:var(--g50)}
.num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-size:16px;font-weight:600;color:var(--g800);padding:12px 0;border-bottom:1.5px solid var(--g300);transition:gap .25s var(--ease),border-color .25s}
.more:hover{gap:12px;border-color:var(--g900)}
.more svg{width:18px;height:18px}
.dark .more{color:#fff;border-color:rgba(255,255,255,.3)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sec-head .more{margin-top:0;flex-shrink:0}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;font-size:17px;font-weight:600;letter-spacing:-.02em;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{background:var(--g100)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.08)}.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-ink{background:var(--g900);color:#fff}.btn-ink:hover{background:var(--g800)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#D32F25}
.btn-soft{background:var(--g100);color:var(--g800)}.btn-soft:hover{background:var(--g200)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:68px;display:flex;align-items:center;color:#fff;transition:background .35s,box-shadow .35s,color .35s}
.nav .wrap{width:100%;max-width:1280px;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo svg{height:15px;width:auto;fill:currentColor;display:block}
.logo-sub{font-size:13px;font-weight:600;opacity:.6;padding-left:14px;border-left:1px solid currentColor;line-height:1}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:500}
.nav-links a{position:relative;opacity:.72;transition:opacity .2s;padding:6px 0}
.nav-links a:hover,.nav-links a.on{opacity:1}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:currentColor}
.nav-act{display:flex;gap:8px;align-items:center}
.nav-tel{display:inline-flex;align-items:center;gap:7px;margin-right:10px;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.nav-tel svg{width:16px;height:16px;opacity:.8}
@media(max-width:1180px){.nav-tel{display:none}}
.nav .btn{height:40px;padding:0 18px;font-size:15px}
.nav .nav-doc{background:rgba(255,255,255,.1);color:inherit}
.nav .nav-cta{background:#fff;color:var(--ink)}
.nav.solid{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06);color:var(--g900)}
.nav.solid .nav-doc{background:var(--g100)}
.nav.solid .nav-cta{background:var(--g900);color:#fff}
.nav.solid.ondark{background:rgba(16,17,20,.74);box-shadow:0 1px 0 rgba(255,255,255,.07);color:#fff}
.nav.solid.ondark .nav-doc{background:rgba(255,255,255,.1)}
.nav.solid.ondark .nav-cta{background:#fff;color:var(--ink)}
.burger{display:none;width:44px;height:44px;margin-left:auto;margin-right:-10px;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}
.sheet{position:fixed;inset:0;z-index:70;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:18px var(--gut) calc(28px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.sheet.open{opacity:1;visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:32px}
.sheet nav{margin-top:44px;display:flex;flex-direction:column}
.sheet nav a{font-size:28px;font-weight:700;letter-spacing:-.04em;padding:12px 0;border-bottom:1px solid var(--ink-line);display:flex;justify-content:space-between;align-items:center}
.sheet nav a.on{color:var(--red-2)}
.sheet-foot{margin-top:auto;display:grid;gap:10px}
.sheet-foot .btn{width:100%}
@media(max-width:1180px){.logo-sub{display:none}.nav-links{gap:24px}}
@media(max-width:1020px){.nav-links,.nav-act{display:none}.burger{display:flex}}

/* ---------- HOME HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);color:#fff;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.wall-bg{position:absolute;top:-16%;bottom:-16%;left:30%;right:-18%;perspective:1100px;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%)}
.wall-shake{position:absolute;inset:0}
.wall-plane{position:absolute;inset:0;transform:rotateY(-34deg) translateZ(0);transform-origin:0% 50%;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;align-content:center;padding:4px}
/* panels are 600×600: the plane is turned 34°, which narrows each tile to cos(34°)≈0.829 of its width on screen,
   so the tile is drawn 1/0.829 wide in the plane to read as a true square */
.wall-plane i{aspect-ratio:1.206;border-radius:3px;background:linear-gradient(158deg,#2A2E34 0%,#1C1F23 55%,#17191C 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.35)}
.wall-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,40%),rgba(255,255,255,.11),transparent 62%);mix-blend-mode:screen}
.hero::after,.phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,transparent 22%,transparent 62%,rgba(11,12,14,.92) 100%)}
.hero-main{flex:1;display:flex;align-items:center;padding:clamp(96px,13vh,150px) 0 clamp(28px,4vh,72px)}
.hero-copy{position:relative;max-width:860px}
.kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.72);margin-bottom:clamp(22px,3.4vh,34px)}
.kicker b{color:var(--red-2);font-weight:700}
.kicker i{width:44px;height:1px;background:var(--red-2)}
.display{font-size:clamp(52px,min(8.6vw,13vh),144px);line-height:1.02;font-weight:800;letter-spacing:-.055em}
.display .r,.ptitle .r{color:var(--red-2)}
.hero-sub{margin-top:clamp(20px,3vh,42px);font-size:clamp(19px,1.75vw,26px);line-height:1.45;font-weight:700;letter-spacing:-.035em}
.hero-lead{margin-top:14px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.8;color:rgba(255,255,255,.58);font-weight:500}
.hero-cta{margin-top:clamp(24px,4vh,48px);display:flex;gap:12px;flex-wrap:wrap}
.hero-tel{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.6);font-weight:500;transition:color .2s}
.hero-tel b{color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em}
.hero-tel svg{width:16px;height:16px}
.hero-tel:hover{color:#fff}
.phero .hero-tel{margin-top:28px}
.hero-cta{align-items:center}
.hero-cta .hero-tel{margin:0 0 0 14px}
@media(max-width:560px){.hero-cta .hero-tel{margin:10px 0 0 4px}}

.hero-feats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.6vw,36px);padding-bottom:clamp(28px,5vh,68px)}
.hf{position:relative;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.hf::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--red-2);transition:width 1s var(--ease)}
.settled .hf::before{width:28px}
.settled .hf:nth-child(3)::before{transition-delay:.12s}.settled .hf:nth-child(4)::before{transition-delay:.24s}.settled .hf:nth-child(5)::before{transition-delay:.36s}
.hf .n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red-2)}
.hf b{display:block;margin-top:8px;font-size:clamp(18px,1.55vw,22px);font-weight:700;letter-spacing:-.03em}
.hf em{display:block;margin-top:3px;font-style:normal;font-size:14px;color:rgba(255,255,255,.55)}
.seis{position:absolute;left:0;right:0;top:-40px;height:80px;pointer-events:none;z-index:1}
.seis svg{width:100%;height:100%;overflow:visible}
.seis .trace{fill:none;stroke:var(--red-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
@keyframes quake{
  0%{transform:translate3d(0,0,0)}6%{transform:translate3d(-11px,2px,0)}12%{transform:translate3d(10px,-2px,0)}
  18%{transform:translate3d(-12px,1px,0)}24%{transform:translate3d(9px,-1px,0)}30%{transform:translate3d(-8px,2px,0)}
  36%{transform:translate3d(7px,-1px,0)}44%{transform:translate3d(-5px,1px,0)}52%{transform:translate3d(4px,0,0)}
  62%{transform:translate3d(-3px,0,0)}74%{transform:translate3d(2px,0,0)}86%{transform:translate3d(-1px,0,0)}100%{transform:translate3d(0,0,0)}}
.quaking{animation:quake 1.9s cubic-bezier(.3,.6,.4,1) both}
@media(max-width:900px){
  .wall-bg{left:-10%;right:-40%;opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%)}
  .hero-main{align-items:flex-start;padding-top:120px}
  .display{font-size:clamp(46px,13vw,64px)}
  .hero-feats{grid-template-columns:1fr 1fr;row-gap:26px}
  .br-d{display:none}
}

/* ---------- PAGE HERO (sub pages) ---------- */
.phero{position:relative;min-height:clamp(480px,66vh,700px);background:var(--ink);color:#fff;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.phero .wrap{width:100%;padding-top:140px;padding-bottom:clamp(64px,10vh,110px)}
.phero-photo{position:absolute;inset:0;z-index:-2}
.phero-photo img{width:100%;height:100%;object-fit:cover;opacity:.42}
.crumb{display:flex;gap:12px;align-items:center;font-size:14px;color:rgba(255,255,255,.62);margin-bottom:26px;font-weight:600}
.crumb b{color:var(--red-2);font-weight:700;letter-spacing:.08em;font-size:12.5px}
.crumb a:hover{color:#fff}
.crumb svg{width:14px;height:14px;opacity:.6}
.ptitle{font-size:clamp(42px,6.4vw,92px);line-height:1.08;font-weight:800;letter-spacing:-.055em}
.psub{margin-top:28px;font-size:clamp(17px,1.5vw,21px);line-height:1.75;color:rgba(255,255,255,.64);font-weight:500;max-width:680px}
.ptabs{margin-top:44px;display:flex;gap:8px;flex-wrap:wrap}
.ptabs a{height:40px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background .2s}
.ptabs a:hover{background:rgba(255,255,255,.16)}

/* ---------- sticky section tabs (scroll-spy) ---------- */
.subnav{position:sticky;top:68px;z-index:40;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(25,31,40,.06);transition:background .35s,border-color .35s}
.subnav .wrap{max-width:1280px}
.sn-row{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.sn-row::-webkit-scrollbar{display:none}
.sn-row a{flex:0 0 auto;height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--g600);white-space:nowrap;transition:background .3s,color .3s}
.sn-row a:hover{color:var(--g900)}
.sn-row a.on{background:var(--g900);color:#fff}
.subnav.ondark{background:rgba(16,17,20,.76);border-color:rgba(255,255,255,.07)}
.subnav.ondark .sn-row a{color:rgba(255,255,255,.58)}
.subnav.ondark .sn-row a:hover{color:#fff}
.subnav.ondark .sn-row a.on{background:#fff;color:var(--ink)}
html.has-sn{scroll-padding-top:132px}
@media(max-width:720px){.subnav .wrap{padding:0}.sn-row{padding:9px var(--gut)}.sn-row a{height:34px;padding:0 14px;font-size:14px}}

/* ---------- INTRO / EXPAND ---------- */
.intro{padding-top:var(--sec)}
.xpand{position:relative;height:230vh;margin-top:clamp(64px,8vw,120px)}
.xpand-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.xpand-media{position:absolute;inset:0;--q:1;
  clip-path:inset(calc(var(--q)*15%) calc(var(--q)*var(--xi,21%)) calc(var(--q)*15%) calc(var(--q)*var(--xi,21%)) round calc(var(--q)*36px))}
.xpand-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--q)*.14))}
.xpand-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.72) 100%);opacity:calc(1 - var(--q)*1.6)}
.xpand-cap{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(32px,6vh,64px);max-width:var(--max);margin:0 auto;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;opacity:calc(1 - var(--q)*3);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.xpand-cap p{font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.xpand-cap span{font-size:14px;opacity:.75;font-weight:500;white-space:nowrap}
@media(max-width:720px){.xpand-media{--xi:7%}.xpand{height:190vh}.xpand-cap{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- RISK (why seismic) ---------- */
.risks{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.risk{padding-top:24px;border-top:1px solid var(--g300)}
.risk .n{font-size:13px;font-weight:700;color:var(--red);letter-spacing:.06em}
.risk h3{margin-top:10px;font-size:21px;font-weight:700;letter-spacing:-.035em}
.risk p{margin-top:8px;color:var(--g600);font-size:16px;line-height:1.7}
.spaces{margin-top:clamp(56px,6vw,80px);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spaces span{height:42px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;background:var(--g100);color:var(--g800)}
.spaces em{font-style:normal;font-size:15px;color:var(--g500);margin-right:6px}
@media(max-width:820px){.risks{grid-template-columns:1fr}}

/* ---------- STRUCTURE ---------- */
.struct-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:center}
.parts{margin-top:52px;display:grid;gap:30px}
.part{display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start}
.part .k{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--g100);color:var(--g700)}
.part.b .k{background:var(--red-soft);color:var(--red)}
.part h3{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.part p{margin-top:4px;color:var(--g600);font-size:16px;line-height:1.65}
.diagram{position:relative}
.diagram svg{width:100%;height:auto;overflow:visible}
.diagram .ly{transition:transform 1.4s var(--ease)}
.diagram .ly-b{opacity:0;transition:transform 1.4s var(--ease),opacity .6s var(--ease)}
.diagram.open .ly-b{opacity:1;transition:transform 1.4s var(--ease),opacity .5s var(--ease) .35s}
.diagram .lab{transition:opacity .8s var(--ease) .5s;opacity:0}
.diagram.open .lab{opacity:1}
.diagram.open .ly-a{transform:translate(78px,-46px)}
.diagram.open .ly-c{transform:translate(-78px,46px)}
.diagram-btn{position:absolute;right:0;bottom:-8px;height:40px;padding:0 16px;font-size:14px}
@media(max-width:900px){.struct-grid{grid-template-columns:1fr}.diagram{order:-1;margin:0 -8px}}

/* ---------- PROOFS ---------- */
.proofs{margin-top:clamp(72px,9vw,128px);border-top:1px solid var(--g200)}
.proof{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(48px,6vw,80px) 0;border-bottom:1px solid var(--g200)}
.proof-k{font-size:15px;font-weight:600;color:var(--g500);align-self:start;padding-top:18px}
.proof-k b{display:block;color:var(--g900);font-size:17px;margin-top:4px}
.proof-num{font-size:clamp(72px,10vw,148px);font-weight:700;letter-spacing:-.06em;line-height:.95;color:var(--g900)}
.proof-num small{font-size:.36em;letter-spacing:-.03em;margin-left:6px;color:var(--red);font-weight:700}
.proof-body h3{font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:-.035em;line-height:1.4}
.proof-body p{margin-top:10px;color:var(--g600);font-size:16px;line-height:1.7}
.proof-meta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--g600);background:#fff;border:1px solid var(--g200);border-radius:999px;padding:7px 14px}
.proof-meta svg{width:14px;height:14px;color:var(--red);flex-shrink:0}
@media(max-width:900px){.proof{grid-template-columns:1fr;gap:18px}.proof-k{padding-top:0}.proof-k b{display:inline;margin-left:6px}}

/* ---------- DOCUMENT CARDS (certificates) ---------- */
.docs-grid{margin-top:clamp(56px,6vw,88px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px)}
.docs-grid.four{grid-template-columns:repeat(4,1fr)}
.dcard{text-align:left}
.dcard .paper{display:block;width:100%;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--g200);transition:transform .35s var(--ease),box-shadow .35s}
.dcard img{width:100%;aspect-ratio:280/364;object-fit:cover;object-position:top}
.dcard img{-webkit-user-drag:none;-webkit-touch-callout:none}
.dcard b{display:block;margin-top:14px;font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.dcard span{display:block;margin-top:2px;font-size:13.5px;color:var(--g500)}
@media(max-width:900px){.docs-grid,.docs-grid.four{grid-template-columns:repeat(2,1fr);row-gap:28px}}

/* ---------- QUAKE SIM ---------- */

/* real test block */
.realtest{margin:clamp(96px,11vw,150px) auto 0;max-width:1000px;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.realtest .ph{border-radius:var(--r-md);overflow:hidden;background:#222}
.realtest .ph img{width:100%;aspect-ratio:996/633;object-fit:cover}
.realtest h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.045em;line-height:1.3}
.realtest p{margin-top:16px;color:rgba(255,255,255,.62);font-size:16.5px;line-height:1.75}
.kv-dark{margin-top:26px;display:grid;grid-template-columns:auto 1fr;font-size:14.5px}
.kv-dark dt,.kv-dark dd{padding:11px 0;border-bottom:1px solid var(--ink-line)}
.kv-dark dt{color:rgba(255,255,255,.5);padding-right:24px}
.kv-dark dd{color:#fff;font-weight:600;text-align:right;font-feature-settings:"tnum"}
@media(max-width:820px){.realtest{grid-template-columns:1fr}}

/* ---------- FIRE BAND ---------- */
.fire{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.fire-bg{position:absolute;inset:0;z-index:-2}
.fire-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.fire::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.55) 45%,rgba(8,9,11,.1) 100%),linear-gradient(0deg,rgba(8,9,11,.7) 0%,transparent 45%)}
.fire .wrap{width:100%;padding-bottom:clamp(72px,11vh,140px)}
.fire .h2{color:#fff}
.fire .lead{color:rgba(255,255,255,.72)}
.chips{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
.chip{height:40px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}
.fire-cap{position:absolute;right:var(--gut);bottom:clamp(72px,11vh,140px);font-size:13px;color:rgba(255,255,255,.6)}
@media(max-width:720px){.fire::before{background:linear-gradient(0deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.6) 55%,rgba(8,9,11,.2) 100%)}.fire-cap{display:none}}

/* ---------- BEFORE / AFTER ---------- */
.ba{position:relative;margin:clamp(64px,7vw,100px) auto 0;max-width:1080px;aspect-ratio:1288/784;border-radius:var(--r-lg);overflow:hidden;background:var(--g100);--x:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba{--xc:clamp(30px,var(--x),calc(100% - 30px))}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--xc)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--xc);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--xc);width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);display:grid;place-items:center;pointer-events:none;color:var(--g900)}
.ba-knob svg{width:26px;height:26px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:22px;height:34px;padding:0 14px;display:flex;align-items:center;border-radius:999px;font-size:14px;font-weight:600;background:rgba(0,0,0,.55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.ba-tag.l{left:22px}.ba-tag.r{right:22px;background:rgba(255,255,255,.88);color:var(--g900)}
.ba-hint{text-align:center;margin-top:22px;font-size:14px;color:var(--g500)}
.facts{margin:clamp(56px,6vw,88px) auto 0;max-width:1080px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.fact h3{font-size:19px;font-weight:700;letter-spacing:-.03em}
.fact p{margin-top:8px;color:var(--g600);font-size:16px;line-height:1.7}
@media(max-width:720px){.facts{grid-template-columns:1fr}.ba{border-radius:var(--r-md)}}

/* ---------- LINEUP (2 x 2 cards) ---------- */
.lineup{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.prod{background:#fff;border-radius:var(--r-lg);padding:14px 14px 34px;transition:transform .45s var(--ease),box-shadow .45s}
.prod:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(25,31,40,.09)}
.prod-img{aspect-ratio:16/10;border-radius:22px;background:radial-gradient(120% 90% at 50% 40%,#FFFFFF 0%,#F2F4F6 60%,#E9ECEF 100%);display:grid;place-items:center;overflow:hidden}
.prod-img img{width:66%;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05) rotate(-1deg)}
.prod-body{padding:28px 20px 0}
.prod-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.prod-name{display:flex;align-items:baseline;gap:10px;font-size:clamp(24px,2.3vw,30px);font-weight:700;letter-spacing:-.04em}
.prod-name span{font-size:11.5px;letter-spacing:.16em;color:var(--g500);font-weight:600}
.prod-desc{margin-top:10px;color:var(--g600);font-size:16px;line-height:1.7}
.prod-spec{margin-top:18px;display:flex;gap:18px;font-size:14.5px;color:var(--g700);font-weight:600}
.prod-spec span{display:inline-flex;align-items:center;gap:8px}
.prod-spec span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--g400)}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tag{height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:8px;font-size:12.5px;font-weight:600;background:var(--g100);color:var(--g700);white-space:nowrap}
.tag.red{background:var(--red-soft);color:var(--red)}
@media(max-width:760px){.lineup{grid-template-columns:1fr}.prod-body{padding:24px 10px 0}}

/* colors */
.colors{margin-top:clamp(120px,13vw,190px);display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(32px,6vw,90px);align-items:center}
.colors h3{font-size:clamp(28px,3.2vw,42px);font-weight:700;letter-spacing:-.045em;line-height:1.25}
.colors p{margin-top:20px;color:var(--g600);font-size:17px;line-height:1.75}
.seg{margin-top:36px;display:inline-flex;padding:5px;border-radius:999px;background:var(--g200);gap:2px}
.seg button{height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;color:var(--g600);transition:background .3s,color .3s,box-shadow .3s}
.seg button[aria-selected="true"]{background:#fff;color:var(--g900);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.swatch-list{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.swatch-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center}
.swatch-list i{width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.swatch-list b{display:block;font-size:15.5px;font-weight:700;line-height:1.2}
.swatch-list span{display:block;font-size:13px;color:var(--g500)}
.swatch-note{margin-top:18px;font-size:14px;color:var(--g500)}
.color-view{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--g200)}
.color-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.color-view img.on{opacity:1;transform:none}
.color-cap{position:absolute;left:20px;bottom:20px;height:34px;padding:0 14px;border-radius:999px;display:flex;align-items:center;font-size:13.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(max-width:1000px){.colors{grid-template-columns:1fr}}

/* ---------- GALLERY ---------- */
.gal-nav{display:flex;gap:10px;flex-shrink:0}
.gal-nav button{width:52px;height:52px;border-radius:50%;background:var(--g100);display:grid;place-items:center;color:var(--g800);transition:background .2s,opacity .2s}
.gal-nav button:hover{background:var(--g200)}
.gal-nav button:disabled{opacity:.35;cursor:default}
.gal-nav svg{width:22px;height:22px}
.gallery{margin-top:clamp(56px,6vw,88px);display:flex;gap:clamp(14px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));scroll-padding:0 max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.gallery::-webkit-scrollbar{display:none}
.gallery{cursor:grab;-webkit-user-select:none;user-select:none}
.gallery.dragging{scroll-snap-type:none;cursor:grabbing}
.gallery.dragging a,.gallery.dragging img{pointer-events:none}
.gallery img{-webkit-user-drag:none}
.gal-bar-wrap{margin-top:clamp(32px,4vw,48px)}
.gal-bar{position:relative;height:3px;border-radius:3px;background:var(--g200);cursor:pointer;touch-action:none}
.gal-bar::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.gal-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--g700);transition:background .2s}
.gal-bar:hover i,.gal-bar.active i{background:var(--g900)}
.gray .gal-bar{background:var(--g300)}
.g-item{flex:0 0 auto;width:clamp(280px,40vw,560px);scroll-snap-align:start}
.g-item .ph,.case .ph{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--g100)}
.g-item .ph img,.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.g-item:hover .ph img,.case:hover .ph img{transform:scale(1.04)}
.g-item h3,.case h3{margin-top:20px;font-size:18px;font-weight:700;letter-spacing:-.03em}
.g-item p,.case p{margin-top:4px;font-size:15px;color:var(--g500)}
.case{flex:0 0 auto;width:clamp(290px,44vw,640px);scroll-snap-align:start}
.case .ph .tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.9);color:var(--g800)}
.case-grid{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.case-grid .case{width:auto}
@media(max-width:720px){.gal-nav{display:none}.sec-head{display:block}.sec-head .more{margin-top:28px}.case-grid{grid-template-columns:1fr}}

/* ---------- COMPARE ---------- */
.cmp-wrap{margin-top:clamp(64px,7vw,100px);overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding:0 var(--gut)}
.cmp-wrap::-webkit-scrollbar{display:none}
.cmp{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:16px}
.cmp th,.cmp td{padding:22px 24px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--g200)}
.cmp thead th{font-size:15px;font-weight:600;color:var(--g500);padding-top:30px;padding-bottom:22px;border-bottom:1px solid var(--g300)}
.cmp tbody th{font-weight:600;color:var(--g600);width:16%;font-size:15px}
.cmp td{color:var(--g700);width:28%}
.cmp .hl{background:var(--ink);color:#fff;border-bottom-color:rgba(255,255,255,.08);font-weight:600;padding-left:32px}
.cmp thead .hl{color:#fff;font-size:17px;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom-color:rgba(255,255,255,.12)}
.cmp tbody tr:last-child .hl{border-radius:0 0 var(--r-md) var(--r-md);border-bottom:0}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .hl em{font-style:normal;color:var(--red-2)}
.cmp .mut{color:var(--g400)}
.cmp .price{font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--g900)}
.cmp .hl.price{color:#fff}
.cmp .price small{font-size:13px;font-weight:500;color:var(--g500);margin-left:4px}
.cmp .hl.price small{color:rgba(255,255,255,.55)}
.note{margin-top:24px;font-size:14px;color:var(--g500)}

/* ---------- PRICE (area unit prices) ---------- */
.price-card{margin:clamp(64px,7vw,100px) auto 0;max-width:1040px;background:#fff;border-radius:var(--r-lg);padding:clamp(24px,4vw,56px);box-shadow:0 1px 0 rgba(0,0,0,.02),0 30px 80px rgba(25,31,40,.06)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.pc-head h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.04em}
.pc-head p{margin-top:6px;color:var(--g600);font-size:15.5px}
.pc-unit{font-size:13.5px;color:var(--g500);font-weight:500}
.pt{width:100%;border-collapse:separate;border-spacing:0;font-size:16.5px}
.pt th,.pt td{padding:22px 20px;text-align:right;border-bottom:1px solid var(--g200);font-feature-settings:"tnum";white-space:nowrap}
.pt th:first-child,.pt td:first-child{text-align:left}
.pt thead th{font-size:14px;color:var(--g500);font-weight:600;padding-top:18px;padding-bottom:16px}
.pt tbody th{font-size:19px;font-weight:700;color:var(--g900)}
.pt td{color:var(--g700)}
.pt .sum{background:var(--ink);color:#fff;font-weight:700;font-size:21px;letter-spacing:-.02em;border-bottom-color:rgba(255,255,255,.08);padding-left:28px;padding-right:28px}
.pt thead .sum{color:rgba(255,255,255,.72);font-size:14px;font-weight:600;border-radius:18px 18px 0 0;border-bottom-color:rgba(255,255,255,.12)}
.pt tbody tr:last-child .sum{border-radius:0 0 18px 18px;border-bottom:0}
.pt tbody tr:last-child th,.pt tbody tr:last-child td{border-bottom:0}
.pt .sum small{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);margin-left:2px}
.pt .sum em{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--red-2);margin-top:2px;letter-spacing:0}
.pc-note{margin-top:clamp(24px,3vw,32px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border-radius:18px;background:var(--g50)}
.pc-note b{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.pc-note b svg{width:26px;height:26px;color:var(--red);flex-shrink:0}
.pc-note span{font-size:14px;color:var(--g600)}
.pc-foot{margin-top:18px;font-size:13.5px;color:var(--g500);line-height:1.7}
.tel-line{margin-top:clamp(40px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 30px;border-radius:var(--r-md);background:var(--g900);color:#fff;transition:background .25s}
.tel-line:hover{background:var(--ink)}
.tel-line span{font-size:16px;color:rgba(255,255,255,.7);font-weight:500}
.tel-line b{display:inline-flex;align-items:center;gap:10px;font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.03em}
.tel-line b svg{width:22px;height:22px}
.price-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.price-cta{margin-top:clamp(48px,5vw,72px);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;color:var(--g600);font-size:16.5px}
.price-mini{margin-top:clamp(56px,6vw,88px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pm{background:#fff;border-radius:var(--r-md);padding:28px 24px;border:1px solid var(--g200)}
.pm span{font-size:14px;color:var(--g500);font-weight:600}
.pm b{display:block;margin-top:10px;font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.04em}
.pm b small{font-size:14px;font-weight:600;color:var(--g500);margin-left:2px}
.pm em{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--red);font-weight:600}
@media(max-width:760px){
  .pt thead{display:none}
  .pt,.pt tbody{display:block}
  .pt tr{display:flex;flex-wrap:wrap;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--g200)}
  .pt tbody tr:last-child{border-bottom:0}
  .pt th,.pt td{border:0!important;padding:0;background:none!important;border-radius:0!important}
  .pt tbody th{flex:0 0 45%;order:0;font-size:18px}
  .pt .sum{flex:0 0 55%;order:1;text-align:right;color:var(--g900);font-size:20px;padding:0}
  .pt .sum small{color:var(--g500)}
  .pt td.c{order:2;margin-top:8px;margin-right:14px;font-size:13px;color:var(--g500)}
  .pt td.c::before{content:attr(data-l) " ";color:var(--g400)}
  .price-mini{grid-template-columns:1fr 1fr}
}

/* ---------- PROCESS ---------- */
.steps{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.step .ph{aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--g100)}
.step .ph img{width:100%;height:100%;object-fit:cover}
.step .n{margin-top:24px;font-size:14px;font-weight:700;color:var(--red);font-feature-settings:"tnum"}
.step h3{margin-top:6px;font-size:19px;font-weight:700;letter-spacing:-.03em}
.step p{margin-top:6px;font-size:15.5px;color:var(--g600);line-height:1.65}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);row-gap:48px}}

/* downloads */
.dl-head{margin-top:clamp(96px,10vw,140px)}
.downloads{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl{display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:var(--r-md);background:var(--g50);border:1px solid var(--g200);transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.dl:hover{background:#fff;box-shadow:0 16px 40px rgba(25,31,40,.08);transform:translateY(-2px)}
.dl .ic{width:52px;height:52px;border-radius:14px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0}
.dl .ic svg{width:24px;height:24px}
.dl b{display:block;font-size:18px;font-weight:700;letter-spacing:-.03em}
.dl span{display:block;margin-top:2px;font-size:14px;color:var(--g500)}
.dl .go{margin-left:auto;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--g200);display:grid;place-items:center;flex-shrink:0}
.dl .go svg{width:18px;height:18px}
.dl-note{margin-top:18px;font-size:14px;color:var(--g500)}
.dl-note a{color:var(--g800);font-weight:600;border-bottom:1px solid var(--g300)}
@media(max-width:760px){.downloads{grid-template-columns:1fr}}

/* spec accordion */
.spec{margin-top:clamp(56px,6vw,80px);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.spec summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:30px 0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.spec summary::-webkit-details-marker{display:none}
.spec summary span{font-size:15px;color:var(--g500);font-weight:500;margin-left:12px}
.spec summary .pm-ic{width:36px;height:36px;border-radius:50%;background:var(--g100);display:grid;place-items:center;transition:transform .4s var(--ease),background .2s;flex-shrink:0}
.spec summary:hover .pm-ic{background:var(--g200)}
.spec[open] summary .pm-ic{transform:rotate(45deg)}
.spec-body{padding:8px 0 56px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.spec h4{font-size:14px;font-weight:600;color:var(--g500);margin-bottom:14px}
.kv{display:grid;grid-template-columns:auto 1fr;font-size:15.5px}
.kv dt,.kv dd{padding:14px 0;border-bottom:1px solid var(--g100)}
.kv dt{color:var(--g700);padding-right:24px}
.kv dd{text-align:right;font-weight:600;font-feature-settings:"tnum"}
.method{display:grid;gap:18px;font-size:15.5px;color:var(--g700);line-height:1.65}
.method li{display:grid;grid-template-columns:32px 1fr}
.method li b{color:var(--red);font-weight:700;font-feature-settings:"tnum"}
@media(max-width:900px){.spec-body{grid-template-columns:1fr}}

/* ---------- REFERENCES ---------- */

/* ---------- COMPANY ---------- */
.slogan{font-size:clamp(48px,7.4vw,108px);line-height:1.08;font-weight:800;letter-spacing:-.055em;color:var(--g900)}
.slogan .r{color:var(--red)}
.co-stats{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.stat{padding-top:26px;border-top:1px solid var(--g300)}
.stat b{display:block;font-size:clamp(28px,2.9vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1.2}
.stat b small{font-size:.38em;letter-spacing:-.02em;margin-left:4px}
.stat>span{display:block;margin-top:14px;font-size:16px;color:var(--g600);line-height:1.6}
.brands{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.brand{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:var(--r-lg);background:var(--g50);border:1px solid var(--g200);transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.brand:hover{background:#fff;box-shadow:0 20px 50px rgba(25,31,40,.08);transform:translateY(-3px)}
.brand .k{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.brand h3{margin-top:12px;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.04em}
.brand p{margin-top:12px;color:var(--g600);font-size:16px;line-height:1.7}
.brand .go{margin-top:28px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--g800)}
.brand .go svg{width:16px;height:16px}
.offices{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.office{padding-top:24px;border-top:1px solid var(--g300)}
.office h3{font-size:19px;font-weight:700;letter-spacing:-.03em}
.office p{margin-top:8px;color:var(--g600);font-size:15.5px;line-height:1.7}
.dark .office{border-color:rgba(255,255,255,.18)}.dark .office h3{color:#fff}.dark .office p{color:rgba(255,255,255,.6)}
@media(max-width:820px){.co-stats,.offices{grid-template-columns:1fr}.brands{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{padding:clamp(150px,18vw,240px) 0;text-align:center}
.cta-k{font-size:15px;font-weight:600;color:rgba(255,255,255,.5)}
.tel{display:inline-block;margin-top:18px;font-size:clamp(56px,9vw,128px);font-weight:700;letter-spacing:-.06em;line-height:1;color:#fff;transition:color .3s}
.tel:hover{color:var(--red-2)}
.cta-sub{margin-top:26px;font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.55);font-weight:500}
.cta-actions{margin-top:48px;display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.cta-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:rgba(255,255,255,.72);transition:color .2s,gap .25s var(--ease)}
.cta-link:hover{color:#fff;gap:12px}
.cta-link svg{width:17px;height:17px}

/* estimate steps (light section) */
.steps4{margin-top:clamp(64px,7vw,100px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.st{padding-top:26px;border-top:1px solid var(--g300)}
.st .n{font-size:14px;font-weight:700;color:var(--red);font-feature-settings:"tnum"}
.st h3{margin-top:12px;font-size:20px;font-weight:700;letter-spacing:-.035em}
.st p{margin-top:8px;font-size:15.5px;color:var(--g600);line-height:1.7}
@media(max-width:820px){.steps4{grid-template-columns:1fr 1fr;row-gap:36px}}
@media(max-width:480px){.cta-actions{flex-direction:column;gap:22px}}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.5);font-size:14px;line-height:1.8;border-top:1px solid var(--ink-line);padding:72px 0 80px}
.foot-grid{display:grid;grid-template-columns:1.1fr 2fr;gap:48px}
.foot .logo{color:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.foot h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:8px}
.foot a:hover{color:#fff}
.foot-links{margin-top:48px;padding-top:28px;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px}
.foot-links a{color:rgba(255,255,255,.72)}
.foot-bottom{margin-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.35)}
@media(max-width:860px){.foot-grid,.foot-cols{grid-template-columns:1fr}.foot{padding-bottom:110px}}

/* mobile quick bar */
.mbar-old{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:none;gap:8px;padding:8px;border-radius:20px;background:rgba(16,17,20,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translateY(140%);transition:transform .45s var(--ease)}
.mbar.show{transform:none}
.mbar a{flex:1;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px}
.mbar svg{width:18px;height:18px}
.mbar .call{background:#fff;color:var(--ink)}.mbar .ask{background:var(--red);color:#fff}
/* ---------- remote (floating quick menu) ---------- */
.remote{position:fixed;right:18px;bottom:22px;z-index:60;width:64px;padding:5px;display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(25,31,40,.07);border-radius:19px;box-shadow:0 12px 30px rgba(25,31,40,.14);
  transition:transform .35s var(--ease),opacity .25s ease,visibility 0s}
/* while folding, visibility switches off only after the slide finishes — still clickable during the motion */
.remote.hide{transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;transition-delay:0s,0s,.35s}
.remote a,.remote button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 0 8px;border-radius:14px;
  font-size:10.5px;font-weight:600;color:var(--g700);letter-spacing:-.01em;transition:background .2s,color .2s}
.remote a:hover,.remote button:hover{background:var(--g100);color:var(--g900)}
.remote svg{width:17px;height:17px}
.remote .r-tel{background:var(--g900);color:#fff;padding:10px 0 9px}
.remote .r-tel:hover{background:var(--ink);color:#fff}
.remote .r-tel b{font-size:11.5px;font-weight:700;line-height:1.25;text-align:center;letter-spacing:0}
.remote .r-tel .m{display:none}
.remote .r-top{margin-top:3px;border-top:1px solid var(--g200);border-radius:0 0 14px 14px}
@media(max-width:720px){
  .remote{left:auto;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;padding:0;gap:10px;background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;align-items:center}
  .remote.hide{transform:translateX(calc(100% + 24px))}
  .remote a,.remote button{padding:0;border-radius:50%;box-shadow:0 8px 22px rgba(25,31,40,.22)}
  .remote .r-tel{width:52px;height:52px;background:var(--g900);color:#fff}
  .remote .r-tel svg{width:21px;height:21px}
  .remote .r-tel b,.remote .r-tel .m,.remote .r-top span,.remote .r-doc{display:none}
  .remote .r-top{width:42px;height:42px;margin:0 5px;border:1px solid var(--g200);background:rgba(255,255,255,.96);color:var(--g800)}
  .remote a:hover,.remote button:hover{background:inherit}
  .remote .r-tel:hover{background:var(--g900);color:#fff}
}
@media (prefers-reduced-motion:reduce){.remote{transition:opacity .2s ease,visibility 0s}.remote.hide{transform:none;transition-delay:0s,.2s}}

/* lightbox */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .quaking,.shaking{animation:none}
}

/* 면적별 일위대가 — 합계만 (2026-09-30) */
.pt-total th:first-child,.pt-total td:first-child{width:auto}
.pt-total th.sum,.pt-total td.sum{width:52%}
.co-stats.two{grid-template-columns:repeat(2,1fr);max-width:880px}

/* ---- 설치 참조도 (CAD 벡터 · 조립 순서 연출) 2026-09-30 ---- */
.rd{margin-top:clamp(80px,9vw,128px);background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);padding:clamp(20px,3.4vw,52px);box-shadow:0 40px 90px -50px rgba(25,31,40,.22)}
.rd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap}
.rd-k{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--red)}
.rd-t{margin-top:12px;font-size:clamp(22px,2.3vw,30px);line-height:1.38;font-weight:700;letter-spacing:-.04em;color:var(--g900)}
.rd-replay{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:var(--g100);color:var(--g800);font-size:14px;font-weight:600;transition:background .2s}
.rd-replay:hover{background:var(--g200)}
.rd-replay svg{flex-shrink:0}
.rd-body{margin-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,3.6vw,60px);align-items:start}
.rd-main,.rd-circ{position:relative;background-color:#FCFDFD;background-image:radial-gradient(circle,#DDE2E7 1px,transparent 1.3px);background-size:18px 18px}
.rd-main{aspect-ratio:606/758;border-radius:var(--r-md);border:1px solid var(--g200)}
.rd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rd-svg path,.rd-svg circle{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ly-line path{stroke:var(--g400);stroke-width:1.1}
.ly-stud path{stroke:var(--g800);stroke-width:1.35}
.ly-mold path{stroke:var(--g700);stroke-width:1.35}
.ly-panel path{stroke:var(--g600);stroke-width:1.05}
.ly-bar path{stroke:var(--red);stroke-width:1.8}
.ly-screw path{stroke:var(--red);stroke-width:2.8}
.rd-refc circle{stroke:var(--red);stroke-width:1.4;stroke-dasharray:5 5}
.rd-refc path{stroke:var(--red);stroke-width:1.1}
.ld{stroke:var(--g500);stroke-width:1.1}
.dt{fill:var(--g900)!important;stroke:none}
.rd-mk{position:absolute;z-index:2;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:1.6px solid var(--g900);color:var(--g900);font-size:12.5px;font-weight:700;display:grid;place-items:center;font-feature-settings:"tnum";line-height:1;box-shadow:0 4px 12px rgba(25,31,40,.10);transition:transform .45s var(--ease),opacity .45s var(--ease),background .2s,color .2s,border-color .2s}
.rd-ref{position:absolute;z-index:2;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.rd-side{display:grid;gap:clamp(24px,3vw,40px)}
.rd-legend{display:grid;border-top:1px solid var(--g200)}
.rd-legend li{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid var(--g200);cursor:default;outline:none;border-radius:10px;transition:opacity .45s var(--ease),background .2s}
.rd-legend li:focus-visible{box-shadow:0 0 0 2px var(--g900) inset}
.rd-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.6px solid var(--g900);display:grid;place-items:center;font-size:12.5px;font-weight:700;line-height:1;transition:background .2s,color .2s,border-color .2s}
.rd-legend li>div{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rd-legend b{font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--g900);white-space:nowrap}
.rd-legend li span.num{font-size:13.5px;color:var(--g500);white-space:nowrap}
.rd-zooms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.rd-zoom{margin:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.rd-circ{aspect-ratio:1;border-radius:50%;border:1px solid var(--g300);box-shadow:0 18px 40px -22px rgba(25,31,40,.28);overflow:hidden}
.rd-circ .rd-mk{width:24px;height:24px;font-size:12px}
.rd-zoom figcaption{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g700);text-align:center}
.rd-zl{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center}
/* 강조: 번호나 목록에 손을 대면 그 부재만 빨갛게, 나머지 선은 옅게 */
.rd .ly,.rd .ld,.rd .dt{transition:opacity .45s var(--ease),transform .9s var(--ease),stroke-dashoffset .7s var(--ease)}
.rd.has-hi .ly:not(.is-hi){opacity:.16}
.rd .ly.is-hi path{stroke:var(--red);stroke-width:2}
.rd .ld.is-hi{stroke:var(--red);stroke-width:1.8}
.rd .dt.is-hi{fill:var(--red)!important}
.rd-mk.is-hi,.rd-legend li.is-hi .rd-n{background:var(--red);border-color:var(--red);color:#fff}
.rd-mk.is-hi{transform:translate(-50%,-50%) scale(1.18)}
.rd-legend li.is-hi{background:var(--red-soft)}
/* 조립 연출: 화면에 들어오면 1 골조 → 2 내진 DMC BAR → 3 패널 → 4 몰딩 순서로 제자리에 */
.rd.pre [data-s]:not(.in){opacity:0}
.rd.pre .ly-line:not(.in),.rd.pre .ly-stud:not(.in),.rd.pre .ly-mold:not(.in){transform:translateY(-18px)}
.rd.pre .ly-bar:not(.in),.rd.pre .ly-screw:not(.in){transform:translateX(-34px)}
.rd.pre .ly-panel:not(.in){transform:translate(26px,-26px)}
.rd.pre .ld:not(.in){stroke-dasharray:1;stroke-dashoffset:1;opacity:1}
.rd.pre .ld{stroke-dasharray:1}
.rd.pre .rd-mk:not(.in),.rd.pre .rd-ref:not(.in){transform:translate(-50%,-50%) scale(.35)}
.rd.pre .rd-zoom:not(.in){transform:scale(.9)}
.rd.pre .rd-legend li[data-s]:not(.in){opacity:.3}
.rd.pre .rd-legend li.cur .rd-n{background:var(--red);border-color:var(--red);color:#fff}
.rd.pre .ly.cur path{stroke-width:2.4}
.rd.snap *{transition:none!important}
@media(max-width:960px){.rd-body{grid-template-columns:1fr}.rd-head{align-items:flex-start}}
@media(max-width:560px){.rd{padding:18px 16px 22px;border-radius:24px}.rd-mk,.rd-ref{width:22px;height:22px;font-size:11px}.rd-circ .rd-mk{width:20px;height:20px;font-size:10.5px}.rd-legend li{padding:11px 4px;gap:12px}.rd-legend b{font-size:14.5px}.rd-legend li span.num{font-size:12.5px}.rd-replay{height:38px;padding:0 14px;font-size:13px}.rd-zoom figcaption{font-size:12.5px;gap:6px}}