/* Obf 납품 사이트 공통 — 헤더 · 타이포 · 섹션 규격 */
:root {
  --red:#F50000; --ink:#0a0a0a; --paper:#fff;
  --line:#e6e6e6; --mut:#8a8a8a; --mut2:#b8b8b8; --sub:#5a5a5a;
  --nav-h:58px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 18px); }
body {
  background:var(--paper); color:var(--ink);
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,"Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
a { color:inherit; }

/* 상단 내비 */
.nav {
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in {
  max-width:1200px; margin:0 auto; height:100%;
  padding:0 clamp(16px,4vw,28px);
  display:flex; align-items:center; gap:clamp(14px,3vw,30px);
}
.nav .brand {
  position:relative; font-size:17px; font-weight:700; letter-spacing:-0.02em;
  text-decoration:none; flex:none;
}
.nav .brand .d {
  position:absolute; width:4.6px; height:4.6px; border-radius:50%;
  background:var(--red); right:-6px; top:1px;
}
.nav .links { display:flex; gap:clamp(10px,2.2vw,22px); margin-left:auto; align-items:center; }
.nav .links a {
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut); text-decoration:none; white-space:nowrap; padding:4px 0;
  border-bottom:1px solid transparent;
}
.nav .links a:hover { color:var(--ink); }
.nav .links a.on { color:var(--ink); border-bottom-color:var(--red); }

/* 레이아웃 */
.wrap { max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,28px); }
.hero { padding:clamp(52px,9vw,96px) 0 clamp(26px,5vw,40px); }
.hero h1 { font-size:clamp(28px,6vw,46px); font-weight:700; letter-spacing:-0.022em; line-height:1.08; }
.hero h1 .d { color:var(--red); }
.hero .lede {
  margin-top:14px; max-width:660px; font-size:clamp(13px,2.4vw,15px);
  line-height:1.8; color:var(--sub);
}
.hero .meta { margin-top:18px; font-size:11.5px; color:var(--mut2); letter-spacing:.02em; }

section { padding:clamp(30px,5vw,44px) 0 8px; }
.shead {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:18px; margin-bottom:8px;
}
.shead h2 { font-size:15px; font-weight:700; letter-spacing:-0.012em; }
.shead .n { font-size:10px; letter-spacing:.14em; color:var(--mut2); }
.shead .spec { font-size:10px; letter-spacing:.08em; color:var(--mut2); text-transform:uppercase; margin-left:auto; }
.sdesc { max-width:720px; font-size:12.5px; line-height:1.85; color:var(--sub); margin-bottom:20px; }
.sdesc b { font-weight:600; color:var(--ink); }

footer {
  margin-top:56px; padding:34px 0 calc(64px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-size:11px; color:var(--mut2); line-height:2;
}
footer a { color:var(--mut); text-decoration:none; border-bottom:1px solid var(--line); }
footer .fnote { margin-bottom:16px; }
footer .fbar {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--line);
}
footer .cr { color:var(--sub); }
footer .cr a { color:var(--ink); border-bottom-color:var(--mut2); }
footer .cl { color:var(--mut2); }
@media (max-width:560px){ footer .fbar { flex-direction:column; gap:8px; } }

@media (max-width:560px){
  .nav .links a { font-size:10.5px; letter-spacing:.05em; }
  .nav .brand { font-size:15.5px; }
}