/* 색: 참조 인포그래픽('Elements of a Website')의 슬레이트·회색 팔레트 (DESIGN.md).
   층마다 --bg(바탕) --fg(글자·선) --rule(옅은 선) --box(칸 바탕)를 바꿔 끼운다. 글꼴은 --f-* 세 개만 바꾸면 된다 */
:root{--slate:#1d262d;--slate2:#404d55;--slate3:#2a353d;--gray:#d2d3d5;--ink:#1d262d;--sub:#525355;--w:#fff;
--bg:var(--slate);--fg:var(--w);--rule:rgba(255,255,255,.28);--box:var(--slate3);
/* 참조 이미지처럼: 제목은 좁고 굵은 고딕(Oswald·도현), 본문은 가는 기하 고딕(Montserrat·Noto Sans KR), 표기는 대문자 자간 넓게 */
--f-body:'Montserrat','Noto Sans KR',sans-serif;--f-head:'Oswald','Do Hyeon',sans-serif;--f-num:'Montserrat','Noto Sans KR',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--slate);color:var(--w);font-family:var(--f-body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}

/* 상단 메뉴: 첫 화면 위에 흰 글자로 겹친다 */
.top{position:absolute;left:0;right:0;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 48px;color:var(--w)}
.logo{display:flex;align-items:baseline;gap:12px}.logo b{font-family:var(--f-head);font-size:28px;font-weight:700}.logo span{font-size:11px;font-weight:600;letter-spacing:.22em}
nav a{margin-left:32px;font-size:13px;font-weight:600;letter-spacing:.08em}nav a:hover{text-decoration:underline;text-underline-offset:6px}
.menu-btn{display:none;background:none;border:1px solid var(--w);color:inherit;padding:6px 12px;font:inherit;font-size:13px}

/* 레벨 표시(▽ FL) */
.mark{font-family:var(--f-num);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.mark .tri{font-size:14px}.mark b{white-space:nowrap;font-size:15px;letter-spacing:.04em}

/* FL ±0: 첫 화면 — 참조 이미지처럼 위는 짙고 아래로 갈수록 슬레이트 */
.hero{position:relative;background:linear-gradient(var(--slate),var(--slate2));color:var(--w);height:min(100vh,960px);min-height:600px;overflow:hidden}
.hero .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;opacity:0;transition:opacity 1.2s}
.hero .slide.on{opacity:1}
/* 글자 쪽(왼쪽)을 어둡게 덮어 그림 위 글자가 읽히게 */
.hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(29,38,45,.88) 0,rgba(29,38,45,.55) 50%,rgba(29,38,45,0) 80%)}
.hero-in,.sys-ui,.credit{z-index:2}
/* 시스템 이름 캡션과 점: 첫 화면 오른쪽 아래 */
.sys-ui{position:absolute;right:48px;bottom:200px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:400px;text-align:right;background:rgba(29,38,45,.8);padding:14px 16px}
.sys-cap b{display:block;font-family:var(--f-head);font-weight:500;font-size:20px}.sys-cap span{font-size:13px}
.sys-ui .dots{display:flex;gap:8px}.sys-ui .dots button{width:28px;height:3px;border:0;background:rgba(255,255,255,.35);cursor:pointer}
.sys-ui .dots button.on{background:var(--w)}
.hero-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
.hero .mark{border-bottom:1px solid var(--w);padding-bottom:10px;margin:4px 0 24px}
.fl{font-family:var(--f-head);font-size:clamp(120px,22vw,320px);font-weight:700;line-height:.9;letter-spacing:-.01em;margin:12px 0 8px}
.headline{font-family:var(--f-head);font-size:clamp(26px,3.2vw,44px);line-height:1.25;max-width:20em;margin-bottom:12px}
.hero-sub{max-width:38em;font-size:16px;margin-bottom:32px}
.hero-in .btn{align-self:flex-start}
.credit{position:absolute;right:48px;top:84px;font-size:11px;letter-spacing:.04em}

/* 위층: 짙은 슬레이트(기본)와 밝은 회색(.lt)을 번갈아 */
.lv{background:var(--bg);color:var(--fg);padding:28px 0 96px}
.lv.lt{--bg:var(--gray);--fg:var(--ink);--rule:rgba(29,38,45,.25);--box:var(--w);color:var(--fg)}
.lv.lt p,.lv.lt .meta{color:var(--sub)}
.lv .mark{border-bottom:1.5px solid var(--fg);padding-bottom:10px;margin-bottom:56px}
.lead{margin-top:24px;max-width:38em;font-size:18px}
.more{display:inline-block;margin-top:32px;font-size:14px;border-bottom:1px solid currentColor}

/* 물량 산출표 */
.table{margin-top:40px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--rule)}
thead th{font-size:12px;letter-spacing:.1em;font-weight:600;border-bottom:2px solid var(--fg)}
.n{text-align:right;font-family:var(--f-num)}
tfoot td{font-weight:800;font-size:18px;border-top:2px solid var(--fg);border-bottom:none}

.btn{display:inline-block;border:1px solid var(--fg,var(--w));padding:16px 30px;font-size:15px;font-weight:600;letter-spacing:.08em}
.btn:hover,.btn.solid{background:var(--fg,var(--w));color:var(--bg,var(--slate))}
.btn.solid:hover{background:transparent;color:var(--fg,var(--w))}
footer{background:#141b20;color:var(--w);padding:32px 0;font-size:13px}
.foot{display:flex;justify-content:space-between;gap:24px}

/* 오른쪽 아래 레벨 게이지: 내려갈수록 FL 은 올라가고 누계 물량은 쌓인다 */
.gauge{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--f-num);
color:var(--w);font-size:12px;letter-spacing:.06em;pointer-events:none;border-right:1.5px solid var(--w);padding:6px 10px;background:rgba(29,38,45,.85)}
.g-fl{font-size:14px;font-weight:700}.g-bar{display:none}

/* 7요소 블록: 칸은 참조 이미지처럼 바탕과 다른 판(--box) 위에 올린다 */
.h2{font-family:var(--f-head);font-size:34px;line-height:1.25;font-weight:500;margin-bottom:24px}.h2.big{font-size:52px}
.note{font-size:12px;font-weight:600;letter-spacing:.12em;margin-bottom:28px}
.benefits{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefits li{background:var(--box);padding:28px}
.benefits .big{display:block;font-family:var(--f-head);font-size:72px;line-height:1;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:20px}
.benefits h3{font-family:var(--f-head);font-weight:500;font-size:24px;margin-bottom:8px}.benefits p{font-size:15px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats div{padding:28px 0}.stats b{display:block;font-family:var(--f-head);font-size:64px;font-weight:700;line-height:1}
.stats span{font-size:12px;font-weight:600;letter-spacing:.12em}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.quote{background:var(--box);padding:32px 32px 24px}
.quote blockquote{font-size:19px;line-height:1.6}.quote blockquote::before{content:'“';font-family:var(--f-head);font-size:64px;line-height:0;vertical-align:-24px;margin-right:6px}
.quote figcaption{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.08em}
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.story img{width:100%;aspect-ratio:4/3;object-fit:cover}
.step{border-top:1px solid var(--rule);padding:16px 0;display:grid;grid-template-columns:72px 1fr;gap:12px}
.step b{font-size:12px;font-weight:600;letter-spacing:.12em;padding-top:3px}.step p{font-size:16px}
.promises{list-style:none;display:grid;gap:10px;max-width:820px}
.promises li{display:grid;grid-template-columns:160px 1fr;gap:16px;background:var(--box);padding:20px 24px;font-size:16px}
.promises b{font-weight:600;letter-spacing:.06em}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.opt{background:var(--box);padding:32px 28px;display:flex;flex-direction:column;gap:10px;border:2px solid transparent}
.opt h3{font-family:var(--f-head);font-weight:500;font-size:26px}.opt p{font-size:15px;flex:1}.opt .btn{align-self:flex-start}
.opt.main{border-color:var(--fg)}

/* BIM·IFC 흐름도: 칸을 화살표로 잇는다 */
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin:40px 0}
.flow li{background:var(--box);padding:18px 16px;position:relative;display:flex;flex-direction:column;gap:6px}
.flow li b{font-family:var(--f-head);font-weight:500;font-size:20px}.flow li span{font-size:13px}
.flow li:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:50%;transform:translateY(-50%);font-size:18px}
.ifc{max-width:560px}.props{min-width:0}.props th{width:40%;font-size:12px;letter-spacing:.1em;font-weight:600;border-bottom:1px solid var(--rule)}
.props td{font-family:var(--f-num)}

@media(max-width:860px){
.wrap{padding:0 16px}.top{padding:16px}
.menu-btn{display:block}nav{display:none}
body.open nav{display:flex;flex-direction:column;position:absolute;top:60px;right:16px;background:var(--slate);padding:12px 20px;border:1px solid var(--w)}
body.open nav a{margin:8px 0}
.credit{left:16px;right:16px;top:72px}.sys-ui{top:116px;left:16px;right:16px;bottom:auto;align-items:flex-start;text-align:left;max-width:none}.hero-in{padding-bottom:56px}
.lead{font-size:16px}.lv{padding:24px 0 64px}.lv .mark{margin-bottom:36px}
table{min-width:0;font-size:14px}th,td{padding:12px 6px}.sys{display:none}tfoot td{font-size:16px}.foot{flex-direction:column}
.gauge{bottom:10px;right:10px;flex-direction:row;align-items:center;gap:8px;padding:3px 8px;font-size:10px;background:rgba(29,38,45,.78)}
.gauge .g-fl{font-size:11px}
body{padding-bottom:44px}  /* 휴대폰: 떠 있는 게이지가 마지막 글자를 가리지 않게 (2026-11-08) */
.benefits,.quotes,.story,.opts,.flow{grid-template-columns:1fr}.flow{gap:24px}
.flow li:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-22px;transform:translateX(-50%)}
.stats div{padding:18px 0}.stats b{font-size:34px}.stats span{font-size:10px;letter-spacing:.06em}
.h2.big{font-size:34px}.promises li{grid-template-columns:1fr;gap:4px}}

/* ===== 하위 페이지(회사 소개·서비스·실적·실적 상세·문의): 홈과 같은 FL 층 규칙 ===== */
nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.phead{background:linear-gradient(var(--slate),var(--slate2));color:var(--w);padding:150px 0 56px}
.phead .kicker{font-size:12px;font-weight:600;letter-spacing:.16em;margin-bottom:16px}
.phead .kicker a{border-bottom:1px solid currentColor}
.kicker em,.badge{font-style:normal;display:inline-block;border:1px solid currentColor;padding:2px 10px;font-size:11px;font-weight:600;letter-spacing:.12em;margin-left:8px;vertical-align:1px}
.badge{margin:20px 0 0}
.ptitle{font-family:var(--f-head);font-weight:700;font-size:clamp(48px,7vw,104px);line-height:1.05;max-width:16em;overflow-wrap:anywhere}
.phead .lead{margin-top:16px}.pmeta{margin-top:14px;font-size:15px;font-weight:600;letter-spacing:.06em}
.phead .mark{border-bottom:1px solid var(--w);padding-bottom:10px;margin-top:48px}
.toc{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:28px}
.toc a{border:1px solid var(--rule);padding:8px 14px;font-size:13px;font-weight:600;letter-spacing:.04em}.toc a:hover{border-color:var(--w)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lv.lt .btn{border-color:var(--ink)}

/* 회사 소개 */
.clients{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.clients li{background:var(--box);padding:28px}.clients b{font-family:var(--f-head);font-weight:500;font-size:28px}
.fl-name{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.fl-name>b{font-family:var(--f-head);font-size:clamp(96px,14vw,200px);line-height:.9}
.fl-name p{max-width:36em;font-size:17px}

/* 서비스 */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:48px;scroll-margin-top:24px}
.svc .big,.hl .big{display:block;font-family:var(--f-head);font-size:72px;line-height:1;margin-bottom:16px}
.svc .lead{margin-top:0}
.items{list-style:none;border-top:1px solid var(--rule)}.items li{border-bottom:1px solid var(--rule);padding:12px 0 12px 22px;position:relative;font-size:16px}
.items li::before{content:'▽';position:absolute;left:0;top:13px;font-size:11px}
.deliv{display:grid;grid-template-columns:72px 1fr;gap:12px;background:var(--box);padding:18px 20px;margin-top:24px;font-size:15px}
.deliv b{font-size:12px;font-weight:600;letter-spacing:.12em;padding-top:2px}
.rel{margin-top:24px}.rel .note{margin-bottom:8px}.rel ul{list-style:none}
.rel a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.rel a span{font-size:12px;white-space:nowrap}.rel a:hover{text-decoration:underline}

/* 실적 목록 카드 */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--box);display:flex;flex-direction:column;padding-bottom:24px}
.card img,.card .noimg{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--slate);margin-bottom:20px}
.card .meta,.card h3,.card>p,.card .go{padding:0 24px}
.card .meta{font-size:12px;font-weight:600;letter-spacing:.1em}
.card h3{font-family:var(--f-head);font-weight:500;font-size:26px;margin:6px 0}
.card>p{font-size:15px}.card .go{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;letter-spacing:.08em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.tags span{border:1px solid var(--rule);padding:2px 8px;font-size:11px;font-weight:600}
.card:hover h3{text-decoration:underline;text-underline-offset:5px}
td a{border-bottom:1px solid var(--rule)}td a:hover{border-color:currentColor}

/* 실적 상세 */
.overview{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.pimg img{width:100%;aspect-ratio:4/3;object-fit:cover}
figcaption{font-size:11px;letter-spacing:.06em;margin-top:8px}
.spec{display:grid;grid-template-columns:96px 1fr;border-top:1.5px solid var(--fg)}
.spec dt,.spec dd{border-bottom:1px solid var(--rule);padding:12px 0;font-size:15px}
.spec dt{font-size:12px;font-weight:600;letter-spacing:.1em;padding-top:14px}
.svc-links{display:flex;flex-wrap:wrap;gap:6px}.svc-links a{border:1px solid var(--rule);padding:1px 8px;font-size:13px}
.hl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.hl li{background:var(--box);padding:28px}.hl .big{font-size:56px;border-bottom:1px solid var(--rule);padding-bottom:12px;overflow-wrap:anywhere}
.hl p{font-size:15px}
.pvideo{margin-bottom:32px}.pvideo video{display:block;width:100%;max-height:72vh;background:#000}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.gi:hover img{opacity:.85}
.deliverables{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;border-top:1.5px solid var(--fg)}
.deliverables li{border-bottom:1px solid var(--rule);padding:14px 0;font-size:16px;display:flex;gap:16px}
.deliverables span{font-family:var(--f-head);font-size:14px;min-width:24px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:56px}
.pager a{background:var(--box);padding:20px 24px;font-family:var(--f-head);font-size:20px}.pager a:last-child{text-align:right}
.pager small{display:block;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.1em;margin-bottom:4px}
.pager a:hover{text-decoration:underline}

/* 문의 */
.mailbox{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.mailbox>div:first-child{background:var(--box);padding:32px}
.mailbox .badge{margin:0 0 0 8px}
.addr{font-family:var(--f-head);font-size:clamp(24px,3.4vw,40px);margin-bottom:12px;overflow-wrap:anywhere}
.addr a{border-bottom:1.5px solid currentColor}
.mailbox p{margin-bottom:20px}.mailbox .small{font-size:12px;margin:16px 0 0}
.mailbox h3{font-family:var(--f-head);font-weight:500;font-size:24px;margin-bottom:12px}

@media(max-width:860px){
.phead{padding:120px 0 40px}.ptitle{font-size:44px}
.clients,.fl-name,.svc,.cards,.overview,.gallery,.deliverables,.pager,.mailbox{grid-template-columns:1fr}
.fl-name,.svc,.overview,.mailbox{gap:28px}
.svc .big{font-size:52px}.hl .big{font-size:44px}
.spec{grid-template-columns:84px 1fr}
.pager a:last-child{text-align:left}
.mailbox>div:first-child{padding:24px 20px}}
.hl .big.long{font-size:40px}@media(max-width:860px){.hl .big.long{font-size:32px}}
.toc a,.pager a{margin-left:0}
.ptitle,.h2,.lead,.card h3,.pager a{word-break:keep-all}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr;gap:10px}}

/* 실적 상세의 3D 화면(iframe) */
.demo{margin:0 0 24px}
.demo iframe{display:block;width:100%;height:min(72vh,720px);border:1px solid currentColor;background:#f2efe7}
.demo figcaption{margin-top:8px;font-size:13px;opacity:.75}
@media (max-width:860px){.demo iframe{height:78vh}}