/* NONGWON HITEC — factory brochure
   navy #0B1F3A / line #333 #D5DCE3 / radius 0 / no shadow */
:root{
  --ink:#0B1F3A;
  --ink2:#12283f;
  --ink3:#071422;
  --fg:#222;
  --dim:#5c6570;
  --bd:#D5DCE3;
  --bd2:#333;
  --paper:#F4F5F6;
  --white:#fff;
  --mark:#2F5C3A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;
  font-size:14px;line-height:1.62;color:var(--fg);
  background:var(--white);letter-spacing:-.01em;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
table{width:100%;border-collapse:collapse}
ul,ol{list-style:none}

.w{width:min(1180px,calc(100% - 36px));margin:0 auto}

/* util 30 + gnb 58 */
.ub{
  height:30px;line-height:30px;
  background:var(--ink3);color:#b8c2cc;
  font-size:12px;border-bottom:1px solid #132033;
}
.ub .w{display:flex;justify-content:space-between}
.ub span+span::before{content:"|";margin:0 9px;color:#3d5166}
.ub a{color:#b8c2cc}
.ub a:hover{color:#fff}

.hd{
  background:var(--ink);height:58px;
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid #1a334d;
}
.hd .w{height:58px;display:flex;align-items:center;gap:18px}
.logo{display:block;height:36px;flex-shrink:0}
.logo img{height:36px;width:auto;display:block}

.nv{display:flex;align-items:stretch;height:58px;margin-left:auto}
.nv a{
  color:#d4dde6;font-size:13px;font-weight:650;
  padding:0 13px;display:flex;align-items:center;height:58px;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.nv a:hover{color:#fff;background:#14304c}
.nv a.on{color:#fff;border-bottom-color:var(--mark)}
.hd-side{display:flex;align-items:center;gap:8px;margin-left:8px}
.lang{
  color:#9aafc2;font-size:11px;font-weight:700;
  border:1px solid #2a4560;padding:3px 7px;
}
.mbtn{
  display:none;width:34px;height:34px;background:transparent;
  border:1px solid #2a4560;cursor:pointer;position:relative;
}
.mbtn i,.mbtn::before,.mbtn::after{
  content:"";position:absolute;left:7px;right:7px;height:1px;background:#fff;
}
.mbtn i{top:16px}
.mbtn::before{top:10px}
.mbtn::after{bottom:10px}

/* hero — one line */
.hero{
  position:relative;height:380px;min-height:300px;
  background:#081320 center/cover no-repeat;
  display:flex;align-items:flex-end;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:rgba(7,16,28,.42);
}
.hero .w{position:relative;z-index:1;padding:0 0 28px;color:#fff}
.hero h1{font-size:26px;font-weight:750;letter-spacing:-.02em}

.ph{
  position:relative;height:200px;min-height:180px;
  background:#081320 center/cover no-repeat;
  display:flex;align-items:flex-end;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background:rgba(7,16,28,.55);
}
.ph .w{position:relative;z-index:1;padding:0 0 22px;color:#fff}
.ph .cr{font-size:12px;color:#c3ced8;margin-bottom:6px}
.ph .cr em{font-style:normal;color:#fff}
.ph h1{font-size:24px;font-weight:750}

/* buttons — square 1px, no pill */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;
  font-size:13px;font-weight:700;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);
  cursor:pointer;
}
.btn:hover{background:var(--ink);color:#fff}
.btn-inv{background:transparent;border-color:#fff;color:#fff}
.btn-inv:hover{background:#fff;color:var(--ink)}
.btn-navy{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-navy:hover{background:var(--ink2)}

/* sections */
.blk{padding:48px 0}
.blk-g{background:var(--paper)}
.sh{margin-bottom:18px}
.sh h2{font-size:20px;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.sh p{margin-top:6px;color:var(--dim);max-width:680px}

.ln{
  background:#fff;border-bottom:1px solid var(--bd);
}
.ln .w{display:flex;flex-wrap:wrap}
.ln a{
  height:40px;display:flex;align-items:center;
  padding:0 14px;font-size:13px;font-weight:650;color:var(--dim);
  border-right:1px solid var(--bd);
}
.ln a:hover,.ln a.on{color:var(--ink);border-bottom:2px solid var(--ink);margin-bottom:-1px}

/* 3 box widgets */
.wg{background:#eceff2;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:16px 0}
.wg-g{display:grid;grid-template-columns:1.3fr .9fr 1.15fr;gap:8px}
.bx{background:#fff;border:1px solid #333;padding:12px 14px}
.bx h3{
  font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:6px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;
}
.bx h3 a{font-size:12px;font-weight:600;color:var(--dim)}
.bd-list li{border-bottom:1px dotted var(--bd)}
.bd-list a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px}
.bd-list a:hover{font-weight:700}
.bd-list span{color:#888;flex-shrink:0}
.tel-lg{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:6px 0}
.bx p{font-size:13px;line-height:1.55}
.mini{border:1px solid var(--bd)}
.mini th{background:var(--ink);color:#fff;text-align:left;padding:5px 7px;font-size:11px;width:40%;font-weight:700}
.mini td{border:1px solid var(--bd);padding:5px 7px;font-size:12px}

/* grids / product tiles radius 0 no shadow */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pc{
  background:#fff;border:1px solid var(--bd);
}
.pc img{width:100%;height:168px;object-fit:cover}
.pc .bd{padding:12px 14px 14px}
.pc h3{font-size:15px;font-weight:750;color:var(--ink);margin-bottom:4px}
.pc p{font-size:13px;color:var(--dim)}
.pc .more{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink)}

.cut{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.cut img{width:100%;height:280px;object-fit:cover;border:1px solid var(--bd)}
.cut h3{font-size:18px;font-weight:750;color:var(--ink);margin-bottom:10px}

/* tables */
.tbl{background:#fff;border:1px solid var(--bd)}
.tbl th,.tbl td{
  border-bottom:1px solid #E6EBF0;
  padding:9px 12px;font-size:13px;text-align:left;vertical-align:top;
}
.tbl thead th{background:var(--ink);color:#fff;font-weight:700;border-bottom:0}
.tbl tbody th{background:#f6f8fa;color:var(--ink);font-weight:700;width:26%}
.tbl a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink)}

/* news rows */
.nlist{border-top:2px solid var(--ink)}
.nrow{
  display:grid;grid-template-columns:100px 72px 1fr;
  gap:12px;align-items:center;
  padding:14px 2px;border-bottom:1px solid var(--bd);
}
.nrow .dt{font-size:13px;color:var(--dim);font-weight:600}
.nrow .ct{
  font-size:11px;font-weight:750;color:var(--ink);
  border:1px solid var(--ink);text-align:center;padding:2px 0;
}
.nrow h3{font-size:15px;font-weight:700;color:var(--ink)}
.nrow p{font-size:13px;color:var(--dim);margin-top:3px}
a.nrow:hover h3{text-decoration:underline}

/* form */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg .full{grid-column:1/-1}
.fl label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.fl input,.fl select,.fl textarea{
  width:100%;border:1px solid var(--bd);background:#fff;
  padding:8px 10px;
}
.fl textarea{min-height:130px;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--ink)}
.note{margin-top:8px;font-size:12px;color:var(--dim)}
.okbox{margin-bottom:12px;padding:10px 12px;border:1px solid var(--ink);background:#eef3ea;color:var(--ink);font-size:13px}

.ibox{background:var(--paper);border:1px solid var(--bd);padding:16px}
.ibox h4{font-size:14px;font-weight:750;color:var(--ink);margin-bottom:8px}
.ibox li{font-size:13px;padding:3px 0}
.ibox li span{display:inline-block;width:64px;color:var(--dim)}

.ibar{
  background:var(--ink);color:#fff;padding:28px 0;
}
.ibar .w{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ibar h2{font-size:18px;font-weight:750}
.ibar p{color:#c3ced8;margin-top:4px;font-size:13px}

.prose p{margin:0 0 10px}
.meta{font-size:13px;color:var(--dim);margin-bottom:12px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.rel{border-top:1px solid var(--bd);margin-top:22px;padding-top:12px}
.rel a{display:block;padding:7px 0;border-bottom:1px solid #E6EBF0;font-size:13px;font-weight:700;color:var(--ink)}
.rel a span{font-weight:600;color:var(--dim);margin-right:8px}

.ft{background:#070e18;color:#93a0ae;font-size:13px}
.ft-top{border-bottom:1px solid #162233;padding:32px 0 26px}
.ft-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px}
.ft h4{color:#fff;font-size:13px;margin-bottom:10px;font-weight:750}
.ft a{color:#93a0ae}
.ft a:hover{color:#fff}
.ft li{margin:5px 0}
.ft-name{color:#fff;font-size:15px;font-weight:750;margin-bottom:8px}
.ft-bot{padding:12px 0;display:flex;justify-content:space-between;gap:12px;color:#748290;font-size:12px}
.ft select{background:#0e1826;border:1px solid #243246;color:#c5ced8;height:30px;padding:0 8px;min-width:170px}

@media (max-width:960px){
  .wg-g,.g2,.g3,.g6,.cut,.ft-g,.fg,.ibar .w,.nrow{grid-template-columns:1fr}
  .nv{display:none;position:absolute;left:0;right:0;top:88px;background:var(--ink);flex-direction:column;height:auto;border-bottom:1px solid #1a334d}
  .nv.open{display:flex}
  .nv a{height:42px;border-bottom:1px solid #1a334d}
  .mbtn{display:block}
  .hero{height:240px}
  .cut img{height:200px}
  .ft-bot{flex-direction:column}
}