메가 푸터

<div class="foot">
  <div class="cols">
    <div class="col"><b class="logo"></b><span class="ln"></span><span class="ln s"></span></div>
    <div class="col"><b class="h"></b><a></a><a></a><a></a><a></a></div>
    <div class="col"><b class="h"></b><a></a><a></a><a></a></div>
    <div class="col"><b class="h"></b><a></a><a></a><a></a><a></a></div>
  </div>
  <div class="bottom"><span>&copy; 2026 Example Inc.</span><div class="social"><i></i><i></i><i></i></div></div>
</div>

.foot{width:min(94%,860px);display:flex;flex-direction:column;gap:clamp(8px,2vmin,14px)}
.cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(8px,2vmin,16px)}
.col{display:flex;flex-direction:column;gap:clamp(5px,1.2vmin,9px)}
.logo{width:34%;height:clamp(8px,1.8vmin,13px);border-radius:3px;background:var(--accent)}
.col .ln{display:block;height:clamp(4px,.9vmin,6px);border-radius:2px;background:var(--line);width:80%}
.col .ln.s{width:55%}
.col .h{height:clamp(5px,1.1vmin,8px);width:50%;border-radius:2px;background:var(--fg);opacity:.6;margin-bottom:2%}
.col a{display:block;height:clamp(4px,.9vmin,6px);border-radius:2px;background:var(--line);width:70%}
.bottom{display:flex;justify-content:space-between;align-items:center;padding-top:clamp(6px,1.6vmin,12px);
  border-top:1px solid var(--line);font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted)}
.social{display:flex;gap:6px}
.social i{width:clamp(9px,1.9vmin,14px);height:clamp(9px,1.9vmin,14px);border-radius:50%;background:var(--line)}