/* 넥소닉 서브페이지 공통 — 메인(index.html) 확정 디자인 시스템 상속
   스케일: --u = 뷰포트/1920 (최소 1024). 1920 디자인 기준 수치 × var(--u) */
:root {
  --u: calc(max(100vw, 1024px) / 1920);
  --navy: #0A1B2E; --deep: #061B4C; --ink: #101F32;
  --teal: #00B9C6; --gray: #697583; --bluegray: #CBD5DE;
  --pale: #AFBDC9; --divider: #D8E0E7; --cardbg: #F5F8FA; --band: #E6EDF3;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:#fff; color:var(--ink);
  font-family:'Pretendard', sans-serif; -webkit-font-smoothing:antialiased;
  min-width:1024px; font-size:calc(var(--u)*18);
  display:flex; flex-direction:column; min-height:100vh;
}
main { flex:1; }
::selection { background:var(--teal); color:#0A1B2E; }
:focus-visible { outline:calc(var(--u)*2) solid var(--teal); outline-offset:calc(var(--u)*3); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:calc(var(--u)*1400); margin-inline:auto; }

/* ===== header ===== */
/* 메인 GNB와 동일 규격: 투명 헤더가 네이비 밴드 위에 얹힘 (비스티키) */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:50; background:transparent;
  display:flex; align-items:center; justify-content:space-between;
  height:calc(var(--u)*100); padding-left:calc(var(--u)*253); padding-right:calc(var(--u)*262);
  transition:background-color .25s ease-out;
}
.site-header.scrolled { background:var(--navy); }
.site-header .logo img { width:calc(var(--u)*280); height:auto; }
.gnb { display:flex; gap:calc(var(--u)*40); }
.gnb a {
  font-size:calc(var(--u)*24); font-weight:500; letter-spacing:-0.02em; color:#fff;
  line-height:calc(var(--u)*29); text-decoration:none;
}
.gnb-item { position:relative; }
.gnb-sub {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:calc(var(--u)*210); padding:calc(var(--u)*10) 0;
  background:#fff; border-top:calc(var(--u)*3) solid #00B9C6;
  box-shadow:0 calc(var(--u)*14) calc(var(--u)*30) rgba(10,27,46,.16);
  opacity:0; visibility:hidden; transition:opacity .18s ease-out, visibility .18s;
}
.gnb-item:hover .gnb-sub, .gnb-item:focus-within .gnb-sub { opacity:1; visibility:visible; }
.gnb-sub a {
  display:block; padding:calc(var(--u)*9) calc(var(--u)*20);
  font-size:calc(var(--u)*15.5); font-weight:500; color:#101F32;
  line-height:calc(var(--u)*24); white-space:nowrap; letter-spacing:0;
  transition:color .15s ease-out, background-color .15s ease-out;
}
.gnb-sub a:hover { color:#00B9C6; background:#F5F8FA; }

/* ===== page band ===== */
.page-band { background:var(--navy); padding:calc(var(--u)*238) 0 calc(var(--u)*84); }
.eyebrow { font-size:calc(var(--u)*17); font-weight:700; color:var(--teal); letter-spacing:.02em; }
.page-band h1 {
  font-size:calc(var(--u)*56); line-height:calc(var(--u)*70); font-weight:700;
  letter-spacing:-0.02em; color:#fff; margin-top:calc(var(--u)*18);
}
.page-band p {
  margin-top:calc(var(--u)*24); font-size:calc(var(--u)*21); line-height:calc(var(--u)*34);
  color:var(--bluegray); max-width:calc(var(--u)*820);
}

/* ===== tabs ===== */
.tabs { position:sticky; top:calc(var(--u)*100); z-index:40; background:#fff; border-bottom:1px solid var(--divider); }
.tabs .row { display:flex; gap:calc(var(--u)*8); overflow-x:auto; }
.tabs button {
  appearance:none; border:0; background:none; cursor:pointer; white-space:nowrap;
  font-family:inherit; font-size:calc(var(--u)*19); font-weight:700; color:var(--gray);
  padding:calc(var(--u)*24) calc(var(--u)*22); position:relative; transition:color .2s ease-out;
}
.tabs button:hover { color:var(--ink); }
.tabs button[aria-selected="true"] { color:var(--ink); }
.tabs button[aria-selected="true"]::after {
  content:''; position:absolute; left:calc(var(--u)*22); right:calc(var(--u)*22); bottom:0;
  height:calc(var(--u)*3); background:var(--teal);
}

/* ===== sections ===== */
.section { padding:calc(var(--u)*110) 0 calc(var(--u)*110); }
.section.alt { background:var(--cardbg); }
.section .eyebrow { font-size:calc(var(--u)*18); }
.section h2 {
  font-size:calc(var(--u)*46); line-height:calc(var(--u)*62); font-weight:700;
  letter-spacing:-0.02em; color:var(--ink); margin-top:calc(var(--u)*14);
}
.section .lead {
  margin-top:calc(var(--u)*20); font-size:calc(var(--u)*21); line-height:calc(var(--u)*36); color:var(--gray);
}
.body-text { font-size:calc(var(--u)*19); line-height:calc(var(--u)*34); color:#3c4a58; }

/* ===== pillars (회사개요 4대 역량) ===== */
.pillars { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u)*24); margin-top:calc(var(--u)*56); }
.pillar { border-top:calc(var(--u)*3) solid var(--teal); background:#fff; padding:calc(var(--u)*30) calc(var(--u)*28) calc(var(--u)*34); }
.pillar h3 { font-size:calc(var(--u)*23); font-weight:700; color:var(--ink); }
.pillar .en { font-size:calc(var(--u)*14); font-weight:700; color:var(--teal); letter-spacing:.08em; display:block; margin-bottom:calc(var(--u)*10); }
.pillar ul { list-style:none; margin-top:calc(var(--u)*18); }
.pillar li { font-size:calc(var(--u)*17); line-height:calc(var(--u)*27); color:var(--gray); padding:calc(var(--u)*6) 0; }

/* ===== fact strip ===== */
.facts { display:grid; grid-template-columns:repeat(4, 1fr); background:var(--navy); margin-top:calc(var(--u)*56); }
.facts div { padding:calc(var(--u)*36) calc(var(--u)*30); border-left:1px solid rgba(255,255,255,.12); }
.facts div:first-child { border-left:0; }
.facts b { display:block; font-size:calc(var(--u)*34); font-weight:700; color:#fff; }
.facts span { display:block; margin-top:calc(var(--u)*8); font-size:calc(var(--u)*16); color:var(--pale); }

/* ===== timeline ===== */
.timeline { margin-top:calc(var(--u)*56); position:relative; }
.timeline::before { content:''; position:absolute; left:calc(var(--u)*92); top:calc(var(--u)*8); bottom:calc(var(--u)*8); width:calc(var(--u)*2); background:var(--divider); }
.t-row { display:flex; gap:calc(var(--u)*40); padding:calc(var(--u)*22) 0; }
.t-year { flex:0 0 calc(var(--u)*64); text-align:right; font-size:calc(var(--u)*24); font-weight:700; color:var(--teal); letter-spacing:-0.01em; }
.t-dot { flex:0 0 calc(var(--u)*20); position:relative; }
.t-dot::before {
  content:''; position:absolute; left:calc(var(--u)*83); top:calc(var(--u)*9);
  width:calc(var(--u)*14); height:calc(var(--u)*14); border-radius:50%;
  background:#fff; border:calc(var(--u)*3) solid var(--teal);
}
.t-items { flex:1; }
.t-items li { list-style:none; font-size:calc(var(--u)*19); line-height:calc(var(--u)*32); color:#3c4a58; padding-left:calc(var(--u)*18); position:relative; }
.t-items li::before { content:''; position:absolute; left:0; top:calc(var(--u)*14); width:calc(var(--u)*6); height:calc(var(--u)*6); background:var(--teal); }

/* ===== data table ===== */
.dtable { width:100%; border-collapse:collapse; margin-top:calc(var(--u)*48); }
.dtable th { background:var(--navy); color:#fff; font-size:calc(var(--u)*17); font-weight:700; text-align:left; padding:calc(var(--u)*18) calc(var(--u)*24); }
.dtable td { font-size:calc(var(--u)*17); line-height:calc(var(--u)*26); color:#3c4a58; padding:calc(var(--u)*18) calc(var(--u)*24); border-bottom:1px solid var(--divider); }
.dtable tr:nth-child(even) td { background:var(--cardbg); }
.dtable .num { font-variant-numeric:tabular-nums; }
.chip { display:inline-block; font-size:calc(var(--u)*14); font-weight:700; padding:calc(var(--u)*4) calc(var(--u)*12); border-radius:calc(var(--u)*999); }
.chip.ok { background:var(--teal); color:var(--navy); }
.chip.ing { background:var(--band); color:var(--ink); }

/* ===== project records ===== */
.records { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*24); margin-top:calc(var(--u)*56); }
.record { background:#fff; border:1px solid var(--divider); padding:calc(var(--u)*32); transition:border-color .2s ease-out, transform .2s ease-out; }
.record:hover { border-color:var(--teal); transform:translateY(calc(var(--u)*-4)); }
.record .meta { display:flex; gap:calc(var(--u)*14); align-items:baseline; }
.record .year { font-size:calc(var(--u)*16); font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; }
.record .client { font-size:calc(var(--u)*16); font-weight:700; color:var(--gray); }
.record h3 { font-size:calc(var(--u)*23); line-height:calc(var(--u)*32); font-weight:700; color:var(--ink); margin-top:calc(var(--u)*10); }
.record p { margin-top:calc(var(--u)*12); font-size:calc(var(--u)*16.5); line-height:calc(var(--u)*27); color:var(--gray); }
.tags { display:flex; flex-wrap:wrap; gap:calc(var(--u)*8); margin-top:calc(var(--u)*18); }
.tags span { font-size:calc(var(--u)*13.5); font-weight:600; color:var(--gray); background:var(--band); padding:calc(var(--u)*5) calc(var(--u)*12); border-radius:calc(var(--u)*4); }

/* ===== spec grid (버드스트라이크 스펙) ===== */
.specs { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u)*24); margin-top:calc(var(--u)*48); }
.spec { background:var(--cardbg); padding:calc(var(--u)*30) calc(var(--u)*28); }
.spec b { display:block; font-size:calc(var(--u)*28); font-weight:700; color:var(--ink); }
.spec span { display:block; margin-top:calc(var(--u)*8); font-size:calc(var(--u)*15.5); color:var(--gray); }
.process { counter-reset:step; display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u)*24); margin-top:calc(var(--u)*48); }
.p-step { background:var(--navy); padding:calc(var(--u)*30) calc(var(--u)*28); position:relative; }
.p-step::before {
  counter-increment:step; content:"0" counter(step);
  font-size:calc(var(--u)*15); font-weight:700; color:var(--teal); letter-spacing:.06em;
}
.p-step h3 { margin-top:calc(var(--u)*12); font-size:calc(var(--u)*21); font-weight:700; color:#fff; }
.p-step p { margin-top:calc(var(--u)*10); font-size:calc(var(--u)*16); line-height:calc(var(--u)*26); color:var(--bluegray); }

/* ===== section sub-title ===== */
.section .sub-title { font-size:calc(var(--u)*30); line-height:calc(var(--u)*42); margin-top:calc(var(--u)*72); }
.section .records.tight { margin-top:calc(var(--u)*32); }

/* ===== empty state ===== */
.empty { background:var(--cardbg); padding:calc(var(--u)*90) calc(var(--u)*40); text-align:center; margin-top:calc(var(--u)*56); }
.empty h3 { font-size:calc(var(--u)*26); font-weight:700; color:var(--ink); }
.empty p { margin-top:calc(var(--u)*14); font-size:calc(var(--u)*18); line-height:calc(var(--u)*30); color:var(--gray); }
.empty a { color:var(--teal); font-weight:700; }
.empty a:hover { text-decoration:underline; text-underline-offset:calc(var(--u)*4); }

/* ===== contact ===== */
.c-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(var(--u)*24); margin-top:calc(var(--u)*56); }
.c-block { border-top:calc(var(--u)*3) solid var(--teal); background:#fff; padding:calc(var(--u)*30) calc(var(--u)*28); }
.c-block .lb { font-size:calc(var(--u)*15); font-weight:700; color:var(--teal); letter-spacing:.06em; }
.c-block b { display:block; margin-top:calc(var(--u)*12); font-size:calc(var(--u)*24); font-weight:700; color:var(--ink); line-height:calc(var(--u)*34); }
.c-block span { display:block; margin-top:calc(var(--u)*10); font-size:calc(var(--u)*16); line-height:calc(var(--u)*26); color:var(--gray); }
.form { margin-top:calc(var(--u)*56); background:var(--cardbg); padding:calc(var(--u)*48); }
.form h3 { font-size:calc(var(--u)*25); font-weight:700; color:var(--ink); }
.form p { margin-top:calc(var(--u)*10); font-size:calc(var(--u)*17); color:var(--gray); }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*20); margin-top:calc(var(--u)*24); }
.f-row.single { grid-template-columns:1fr; }
.form input, .form textarea {
  width:100%; font-family:inherit; font-size:calc(var(--u)*17); color:var(--ink);
  background:#fff; border:1px solid var(--divider); padding:calc(var(--u)*16) calc(var(--u)*18);
  transition:border-color .2s ease-out;
}
.form input:focus, .form textarea:focus { border-color:var(--teal); outline:none; }
.form textarea { min-height:calc(var(--u)*180); resize:vertical; }
.btn-teal {
  display:inline-flex; align-items:center; gap:calc(var(--u)*10); cursor:pointer;
  background:var(--teal); color:var(--navy); border:0; font-family:inherit;
  font-size:calc(var(--u)*20); font-weight:700; padding:calc(var(--u)*18) calc(var(--u)*32);
  margin-top:calc(var(--u)*24); transition:filter .2s ease-out;
}
.btn-teal:hover { filter:brightness(1.06); }

/* ===== footer ===== */
.site-footer { background:var(--navy); padding:calc(var(--u)*90) 0; margin-top:calc(var(--u)*40); }
.site-footer .cols { display:flex; justify-content:space-between; align-items:flex-start; gap:calc(var(--u)*60); }
.site-footer .cols > img { flex:0 0 calc(var(--u)*240); height:auto; }
.site-footer .cols > div { flex:1; min-width:0; }
.site-footer .info { font-size:calc(var(--u)*17); line-height:calc(var(--u)*30); color:var(--pale); white-space:normal; }
.site-footer .copy { margin-top:calc(var(--u)*28); font-size:calc(var(--u)*15); color:var(--pale); opacity:.85; }
.sns { display:flex; gap:calc(var(--u)*26); align-items:flex-start; flex:0 0 auto; }
.sns a { display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*6); font-size:calc(var(--u)*14); color:var(--pale); white-space:nowrap; }
.sns a:hover { color:#fff; }
.sns img { width:calc(var(--u)*30); height:calc(var(--u)*30); }

/* ===== 모바일 내비게이션 (기본 숨김 — ≤1023에서 표시) ===== */
.m-menu-btn, .m-drawer { display:none; }

/* ===== 모바일/태블릿 (≤1023px): 단일 컬럼 재배치, 360px까지 대응 ===== */
@media (max-width:1023px) {
  :root { --u: 0.5333px; } /* 잔여 calc(var(--u)) 값 고정 (모바일에선 px 값으로 재정의된 컴포넌트가 우세) */
  body { min-width:0; font-size:15px; }
  .wrap { width:auto; padding-inline:20px; }

  /* 헤더: 로고 + 햄버거 (모바일은 메인과 동일한 스티키 바) */
  .site-header { position:fixed; top:0; left:0; right:0; height:60px; padding:0 20px; background:transparent; align-items:center; transition:background-color .25s ease-out; }
  .site-header.scrolled { background:var(--navy); }
  .site-header .logo img { width:120px; }
  .gnb { display:none; }
  .m-menu-btn { display:flex;
    appearance:none; border:0; background:none; cursor:pointer;
    width:44px; height:44px; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; padding:0;
  }
  .m-menu-btn span { display:block; width:24px; height:2px; background:#fff; transition:transform .2s ease-out, opacity .2s ease-out; }
  .m-menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .m-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .m-menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

  /* 드로어 */
  .m-drawer {
    position:fixed; inset:0; z-index:100; background:var(--navy);
    padding:60px 24px 40px; overflow-y:auto;
  }
  .m-drawer[hidden] { display:none; }
  .m-drawer:not([hidden]) { display:block; }
  .m-drawer .m-close {
    position:absolute; top:8px; right:8px; width:44px; height:44px;
    background:none; border:0; cursor:pointer;
  }
  .m-drawer .m-close::before, .m-drawer .m-close::after {
    content:''; position:absolute; left:10px; top:21px; width:24px; height:2px; background:#fff;
  }
  .m-drawer .m-close::before { transform:rotate(45deg); }
  .m-drawer .m-close::after { transform:rotate(-45deg); }
  .m-drawer nav { display:flex; flex-direction:column; margin-top:16px; }
  .m-drawer nav a {
    font-size:20px; font-weight:700; color:#fff; padding:16px 4px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .m-drawer nav a[aria-current="page"] { color:var(--teal); }

  /* 페이지 밴드 · 탭 */
  .page-band { padding:112px 0 52px; }
  .page-band h1 { font-size:30px; line-height:40px; margin-top:12px; }
  .page-band p { margin-top:14px; font-size:15px; line-height:24px; max-width:none; }
  .eyebrow { font-size:13px; }
  .tabs { top:60px; }
  .tabs button { font-size:15px; padding:14px 16px; }
  .tabs button[aria-selected="true"]::after { left:16px; right:16px; }

  /* 섹션 공통 */
  .section { padding:56px 0 64px; }
  .section .eyebrow { font-size:13px; }
  .section h2 { font-size:26px; line-height:36px; margin-top:10px; }
  .section .lead { margin-top:14px; font-size:15px; line-height:26px; }
  .section .sub-title { font-size:20px; line-height:30px; margin-top:48px; }
  .body-text { font-size:15px; line-height:26px; }

  /* 컴포넌트 단일 컬럼 */
  .pillars { grid-template-columns:1fr !important; gap:14px; margin-top:32px; }
  .pillar { padding:20px; }
  .pillar h3 { font-size:18px; }
  .pillar .en { font-size:12px; margin-bottom:6px; }
  .pillar li { font-size:14px; line-height:23px; padding:4px 0; }
  .facts { grid-template-columns:repeat(2,1fr); margin-top:32px; }
  .facts div { padding:20px 18px; }
  .facts b { font-size:22px; }
  .facts span { font-size:12.5px; margin-top:4px; }
  .records { grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .record { padding:20px; }
  .record h3 { font-size:18px; line-height:26px; margin-top:8px; }
  .record p { font-size:14px; line-height:22px; margin-top:8px; }
  .tags { gap:6px; margin-top:12px; }
  .tags span { font-size:12px; padding:4px 10px; }
  .specs { grid-template-columns:repeat(2,1fr); gap:14px; margin-top:32px; }
  .spec { padding:20px 18px; }
  .spec b { font-size:19px; }
  .spec span { font-size:13px; }
  .process { grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .p-step { padding:20px 18px; }
  .p-step::before { font-size:13px; }
  .p-step h3 { font-size:17px; margin-top:8px; }
  .p-step p { font-size:14px; line-height:22px; margin-top:6px; }
  .c-grid { grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .c-block { padding:20px 18px; }
  .c-block b { font-size:18px; line-height:27px; margin-top:8px; }
  .c-block span { font-size:13.5px; line-height:22px; margin-top:8px; }

  /* 표: 가로 스크롤 */
  .dtable { display:block; overflow-x:auto; margin-top:32px; -webkit-overflow-scrolling:touch; }
  .dtable th { font-size:13px; padding:12px 14px; white-space:nowrap; }
  .dtable td { font-size:13.5px; line-height:21px; padding:12px 14px; }
  .chip { font-size:12px; padding:3px 10px; }

  /* 타임라인 */
  .timeline { margin-top:32px; }
  .timeline::before { left:47px; }
  .t-row { gap:16px; padding:14px 0; }
  .t-year { flex-basis:44px; font-size:16px; }
  .t-dot { flex-basis:16px; }
  .t-dot::before { left:40px; top:7px; width:12px; height:12px; border-width:2px; }
  .t-items li { font-size:14.5px; line-height:25px; padding-left:14px; }

  /* 폼 · 버튼 · 빈 상태 */
  .form { padding:20px; margin-top:32px; }
  .form h3 { font-size:19px; }
  .form p { font-size:13.5px; margin-top:6px; }
  .f-row { grid-template-columns:1fr; gap:12px; margin-top:12px; }
  .form input, .form textarea { font-size:16px; padding:13px 14px; }
  .form textarea { min-height:140px; }
  .btn-teal { width:100%; justify-content:center; font-size:16px; padding:16px 24px; margin-top:16px; min-height:48px; }
  .empty { padding:48px 20px; margin-top:32px; }
  .empty h3 { font-size:20px; }
  .empty p { font-size:14px; line-height:24px; margin-top:10px; }

  /* 푸터 */
  .site-footer { padding:48px 0 56px; margin-top:32px; }
  .site-footer .cols { flex-direction:column; gap:28px; }
  .site-footer .cols { flex-direction:column; gap:28px; }
  .site-footer .cols > img { width:150px; }
  .site-footer .info { font-size:13.5px; line-height:23px; }
  .site-footer .copy { margin-top:18px; font-size:12.5px; }
  .sns { gap:18px; }
  .sns img { width:26px; height:26px; }
  .sns a { font-size:12.5px; }
}

@media (max-width:1280px) {
  .pillars, .specs, .process, .facts { grid-template-columns:repeat(2, 1fr); }
  .records { grid-template-columns:1fr; }
  .c-grid { grid-template-columns:1fr; }
  .site-footer .cols > img { flex:0 0 auto; width:calc(var(--u)*240); height:auto; }
}