/* 사이트 공통 머리글 (2026-10-09)
   ------------------------------------------------------------------------
   모든 페이지가 이 파일 하나를 <head> 에서 먼저 읽습니다 (그리기 전에 적용).
   페이지마다 머리글 규칙이 조금씩 달라서, 페이지를 옮길 때 메뉴가 들썩였습니다.
   여기서 크기·색·위치를 한 벌로 고정해 어느 페이지든 머리글이 픽셀까지 같게 합니다.
   html body 를 붙여 페이지 쪽 규칙보다 우선합니다. */

html body :is(header.header,.nxp-hd){position:sticky;top:0;z-index:60;background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #e8edf3;box-shadow:none}
html body :is(header.header,.nxp-hd) .hin{max-width:1240px;margin:0 auto;box-sizing:border-box;display:flex;align-items:center;
  padding:0 clamp(16px,4vw,32px);gap:24px;min-height:70px;height:70px}
html body :is(header.header,.nxp-hd) :is(.nav a,.hcta,.langs a,.langs button,.brand){white-space:nowrap}

/* 로고 */
html body :is(header.header,.nxp-hd) .brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;
  letter-spacing:-.03em;line-height:1.25;color:#191f28;text-decoration:none;flex-shrink:0;margin:0}
html body :is(header.header,.nxp-hd) .brand small{display:block;font-size:12px;font-weight:500;color:#8b95a1;margin-top:2px;letter-spacing:-.01em}
html body :is(header.header,.nxp-hd) .brand-mark,html body :is(header.header,.nxp-hd) .brand-mark svg{width:26px;height:26px;flex:none;display:block}
html body :is(header.header,.nxp-hd) .brand-mark{color:#3182f6}
html body :is(header.header,.nxp-hd) .brand-mark svg{fill:currentColor}

/* 메뉴 */
html body :is(header.header,.nxp-hd) .nav{display:flex;align-items:stretch;align-self:stretch;gap:22px;margin:0 0 0 auto;padding:0;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;flex-shrink:0;order:0;width:auto;flex-basis:auto}
html body :is(header.header,.nxp-hd) .nav a{position:relative;display:flex;align-items:center;padding:0;color:#6b7684;text-decoration:none;word-break:keep-all}
html body :is(header.header,.nxp-hd) .nav a:hover{color:#191f28}
html body :is(header.header,.nxp-hd) .nav a.on,html body :is(header.header,.nxp-hd) .nav a[aria-current="page"]{color:#191f28}
html body :is(header.header,.nxp-hd) .nav a.on::after,html body :is(header.header,.nxp-hd) .nav a[aria-current="page"]::after{content:"";position:absolute;
  left:0;right:0;bottom:16px;height:3px;background:#3182f6;border-radius:3px}

/* 오른쪽 단추들: 로그인 · 제작 문의 · 언어 */
html body :is(header.header,.nxp-hd) .hact{display:flex;align-items:center;gap:10px;margin:0 0 0 4px;flex-shrink:0}
html body :is(header.header,.nxp-hd) .hcta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;
  padding:0 16px;border:0;border-radius:11px;background:#3182f6;color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;
  line-height:1;letter-spacing:-.02em;text-decoration:none;cursor:pointer;flex-shrink:0;min-height:0;min-width:0;margin:0}
html body :is(header.header,.nxp-hd) .hcta:hover{background:#1b64da}
html body :is(header.header,.nxp-hd) .langs{display:flex;gap:0;background:#f7f9fc;border-radius:10px;padding:3px;flex-shrink:0;margin:0}
html body :is(header.header,.nxp-hd) .langs :is(a,button){box-sizing:border-box;height:34px;min-width:0;min-height:0;margin:0;display:grid;place-items:center;
  border:0;background:transparent;padding:0 10px;font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;color:#8b95a1;
  border-radius:8px;cursor:pointer;text-decoration:none}
html body :is(header.header,.nxp-hd) .langs :is(.on,[aria-pressed="true"]){background:#fff;color:#191f28;box-shadow:0 1px 3px rgba(15,20,28,.1)}

/* 로그인 단추 — 처음부터 머리글에 그려 두고, 로그인 여부는 <html class="nxa-in"> 로만 바꿉니다 */
.nxa-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.nxa-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;height:40px;padding:0 14px;margin:0;
  border:1px solid #e5e8eb;border-radius:12px;background:#fff;color:#333d4b;font-family:inherit;font-size:14.5px;font-weight:700;
  line-height:1;white-space:nowrap;cursor:pointer;min-height:0}
.nxa-btn:hover{background:#f7f9fc}
.nxa-btn svg{width:18px;height:18px;flex-shrink:0}
.nxa-av{display:none}
.nxa-av::before{content:var(--nxa-l,"")}
html.nxa-in .nxa-btn{width:40px;padding:0;border:0;border-radius:50%;background:transparent}
html.nxa-in .nxa-btn :is(svg,.nxa-t){display:none}
html.nxa-in .nxa-av{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:#3182f6;color:#fff;font-size:16px;font-weight:800}
html.nxa-in .nxa-btn:hover .nxa-av{background:#1b64da}

/* 넓은 화면 (메뉴가 한 줄) — 로그인은 동그라미 아이콘만 */
@media (min-width:1181px){
  html body :is(header.header,.nxp-hd) .nxa-btn{width:40px;padding:0}
  html body :is(header.header,.nxp-hd) .nxa-t{display:none}
}
@media (min-width:1181px) and (max-width:1359px){
  html body :is(header.header,.nxp-hd) .brand small{display:none}
  html body :is(header.header,.nxp-hd) .nav{gap:20px;font-size:15px}
}

/* 두 줄 머리글 (메뉴가 아래 줄로) */
@media (max-width:1180px){
  html body :is(header.header,.nxp-hd) .hin{flex-wrap:wrap;row-gap:0;height:auto;min-height:0;padding:10px clamp(16px,4vw,32px) 0;gap:0 12px}
  html body :is(header.header,.nxp-hd) .brand{height:44px}
  html body :is(header.header,.nxp-hd) .hact{height:44px}
  html body :is(header.header,.nxp-hd) .brand small{display:none}
  html body :is(header.header,.nxp-hd) .hact{margin-left:auto}
  html body :is(header.header,.nxp-hd) .nav{display:flex;order:3;flex:1 0 100%;width:100%;margin:6px 0 0;gap:clamp(18px,5vw,26px);
    font-size:15.5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-self:auto}
  html body :is(header.header,.nxp-hd) .nav::-webkit-scrollbar{display:none}
  html body :is(header.header,.nxp-hd) .nav a{flex-shrink:0;padding:0;height:46px;line-height:1}
  html body :is(header.header,.nxp-hd) .nav a.on::after,html body :is(header.header,.nxp-hd) .nav a[aria-current="page"]::after{bottom:0;border-radius:3px 3px 0 0}
  /* 오른쪽에 메뉴가 더 있다는 표시 */
  html body :is(header.header,.nxp-hd) .nav.more{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
}
@media (max-width:720px){
  html body :is(header.header,.nxp-hd) .nxa-btn{width:40px;padding:0}
  html body :is(header.header,.nxp-hd) .nxa-t{display:none}
}
@media (max-width:560px){
  html body :is(header.header,.nxp-hd) .hin{padding:10px 16px 0;gap:0 8px}
  html body :is(header.header,.nxp-hd) .brand{font-size:16.5px}
  html body :is(header.header,.nxp-hd) .brand-mark,html body :is(header.header,.nxp-hd) .brand-mark svg{width:23px;height:23px}
  html body :is(header.header,.nxp-hd) .hact{gap:8px}
  html body :is(header.header,.nxp-hd) .hcta{height:38px;padding:0 13px;font-size:14px}
  html body :is(header.header,.nxp-hd) .langs :is(a,button){height:32px;padding:0 9px;font-size:13px}
}
/* 폰: 한 줄이 넘치지 않게 로그인은 문의 창·샘플 요청서 안에서 */
@media (max-width:480px){
  html body :is(header.header,.nxp-hd) .nxa-wrap{display:none}
}
@media (max-width:370px){
  html body :is(header.header,.nxp-hd) .brand{font-size:15.5px;gap:8px}
  html body :is(header.header,.nxp-hd) .hcta{padding:0 10px;font-size:13.5px}
  html body :is(header.header,.nxp-hd) .langs :is(a,button){padding:0 7px}
}

/* 페이지를 옮길 때: 머리글은 그대로, 아래 내용만 은은하게 바뀝니다 (뷰 전환) */
@view-transition{navigation:auto}
header.header,.nxp-hd{view-transition-name:nxp-hd}
::view-transition-group(nxp-hd),::view-transition-old(nxp-hd),::view-transition-new(nxp-hd){animation:none}
::view-transition-old(root){animation:nxp-vt-out .16s ease-out both}
::view-transition-new(root){animation:nxp-vt-in .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes nxp-vt-out{to{opacity:0}}
@keyframes nxp-vt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* 영어로 보던 사람: 페이지 스크립트가 글자를 바꾸기 전에도 머리글은 처음부터 영어로 (머리 쪽 스크립트가 html.nxp-en 표시) */
html.nxp-en :is(header.header,.nxp-hd) :is(.nav a,.hcta,.brand small,.nxa-t)[data-en]{font-size:0 !important}
html.nxp-en :is(header.header,.nxp-hd) :is(.nav a,.hcta,.brand small,.nxa-t)[data-en]::before{content:attr(data-en)}
html.nxp-en :is(header.header,.nxp-hd) .nav a[data-en]::before{font-size:15.5px}
html.nxp-en :is(header.header,.nxp-hd) .hcta[data-en]::before{font-size:14.5px;letter-spacing:-.02em}
html.nxp-en :is(header.header,.nxp-hd) .brand small[data-en]::before{font-size:12px}
html.nxp-en :is(header.header,.nxp-hd) .nxa-t[data-en]::before{font-size:14.5px}
@media (min-width:1181px) and (max-width:1359px){html.nxp-en :is(header.header,.nxp-hd) .nav a[data-en]::before{font-size:15px}}
@media (max-width:560px){html.nxp-en :is(header.header,.nxp-hd) .hcta[data-en]::before{font-size:14px}}
@media (max-width:370px){html.nxp-en :is(header.header,.nxp-hd) .hcta[data-en]::before{font-size:13.5px}}
/* 영어로 보던 사람: 언어 단추도 처음부터 EN 이 눌린 모양 */
html.nxp-en :is(header.header,.nxp-hd) .langs button:first-child{background:transparent;color:#8b95a1;box-shadow:none}
html.nxp-en :is(header.header,.nxp-hd) .langs button:last-child{background:#fff;color:#191f28;box-shadow:0 1px 3px rgba(15,20,28,.1)}