/* home-hero — 메인 히어로.

   바탕에 모눈종이 격자를 옅게 깐다. 계측기의 세계 — 데이터시트의 그래프,
   오실로스코프의 눈금 — 에서 가져온 무늬다. 장식이지만 이 사이트에만 어울리는 장식.
   모눈의 칸(24px)은 간격 척도(--nb-s5)와 같은 값이다.
   모바일 우선.

   칸 나누기 — 모바일 4칸 전부, 태블릿 글 6칸, PC 글 7칸. 나머지 칸은 비워 배너 무늬가 보이게 둔다.
   (예전에는 그 자리에 납이와 말풍선이 섰다. 납이는 이제 모든 페이지 오른쪽 아래에 떠 있다.) */

.nb-block--home-hero { margin-bottom: var(--nb-gap-lg); }
/* 어두운 띠와 바탕화면 띠는 붙인다 — 사이에 흰 줄이 끼면 두 띠가 따로 논다(사용자 2026-09-21).
   배너 명판에는 이미 있던 규칙이고(main.css "페이지 머리"), 첫 화면만 빠져 있었다. */
.nb-block--home-hero:has(+ .nb-desk) { margin-bottom: 0; }

/* ── 배너 판 ────────────────────────────────────────────────
 * 예전 광고 배너(banner.gif — 검은 바탕에 흰 등고선이 물결치는 애니메이션)를
 * 첫 화면 바탕으로 깐다. 사이트 바탕은 흰색이고, 이 한 판만 검다 —
 * 흑백이 이 사이트의 본질이고 검정을 쓰는 곳은 여기 하나다.
 * 화면 폭을 꽉 채우되 글은 본문 폭에 맞춰 선다.
 * 동영상은 스크립트가 조건을 보고 붙인다 — 그전까지는 첫 프레임 그림만 보인다.
 * ───────────────────────────────────────────────────────── */
.nb-hh.nb-hh--banner {
  /* 본문 폭(1176) 바깥까지 펴고, 안쪽 여백으로 글을 제자리에 둔다.
     588 = 1176 / 2 — 본문 폭의 절반이다.
     폭은 vw 가 아니라 --nb-vw 로 잰다. vw 에는 세로 스크롤막대가 들어 있어서,
     50vw 로 펴면 배너가 화면보다 15px 넓어지고 쪽 전체에 가로 스크롤이 8px 생긴다.
     --nb-vw 는 막대를 뺀 실제 폭이다(js/nabi.js 가 넣는다 — nabi.css 에 같은 기록이 있다).
     스크립트가 없을 때를 위해 100vw 를 예비로 두고, 그때 삐져나오는 몫은 body 가 잘라 낸다(main.css). */
  --nb-hh-vw: var(--nb-vw, 100vw);
  margin-inline: calc(50% - var(--nb-hh-vw) / 2);
  padding-inline: max(var(--nb-pad-page), calc(var(--nb-hh-vw) / 2 - 588px));
  padding-block: var(--nb-s6) var(--nb-s5);
  border: 0; border-radius: 0;
  background: var(--c-black);   /* 판의 바탕. 어두운 판 선언은 main.css 의 "판" 에 있다 */
  color: var(--nb-ink);
  isolation: isolate;
}
.nb-hh__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; background: var(--c-black); }
/* 배너가 페이지의 첫 블록이면 머리 줄에 바로 붙인다 — 본문의 위 여백이 그 사이에 흰 띠로 끼어 있었다.
   화면 폭을 채우는 판이라 머리 줄과 한 덩어리로 읽혀야 한다. */
.site-main:has(> .nb-block--home-hero:first-child) { padding-top: 0; }
/* 격자의 자리 배정에서 뺀다. 판(.nb-hh)은 격자이고 아래의 ".nb-hh > * { grid-column: 1 / -1 }" 이
   이 층에도 걸린다. 절대 위치 자식에 격자 자리가 적혀 있으면 그 격자 칸이 기준 상자가 되는데,
   격자 칸은 안쪽 여백 안에만 있어서 무늬가 본문 폭(1176px)에서 끊기고 양옆에 검은 띠가 남았다.
   자리를 auto 로 두면 판의 안쪽 여백까지 포함한 상자가 기준이 되어 화면 끝까지 깔린다. */
.nb-hh.nb-hh--banner > .nb-hh__bg { grid-column: auto; grid-row: auto; }
/* 살짝만 흐리게 — 원본은 2px 굵기의 흰 등고선이 촘촘한 무늬라 흐림에 약하다.
   18px 로 흐렸을 때는 선이 전부 뭉개져 회색 안개만 남았고, 배너가 있는 줄도 몰랐다.
   3 · 4 · 5px 을 실제 화면에서 차례로 올려 보고 4px 로 정했다 — 3px 은 선이 글과 조금 다투고,
   5px 은 선이 녹아 물결만 남는다. 4px 은 선의 흐름이 살아 있으면서 글이 앞으로 나온다.
   흐림이 작으면 가장자리 번짐도 작아서 조금만 키운다(scale). */
.nb-hh__poster,
.nb-hh__vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(var(--nb-hh-blur, 4px));
  transform: scale(1.05);
}
.nb-hh__vid { opacity: 0; transition: opacity .6s ease; }
.nb-hh__bg.is-playing .nb-hh__vid { opacity: 1; }
/* 글이 읽히도록 무늬를 검게 눌러 둔다 — 글이 서는 왼쪽은 진하게, 무늬가 보이는 오른쪽은 옅게 */
.nb-hh__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--w-dark) 72%, transparent) 0%, color-mix(in srgb, var(--w-dark) 48%, transparent) 46%, color-mix(in srgb, var(--w-dark) 20%, transparent) 100%);
}

/* ── 검은 판 위의 글 · 컨트롤 ────────────────────────────────
 * 이 판은 어두운 판이다(main.css 의 "판"). 글 · 링크 · 칩 · 찾기 버튼은 아래 기본 규칙이 부르는
 * 역할 토큰을 그대로 쓰고, 판이 값을 뒤집는다 — 글은 흰색, 강조는 하늘, 찾기 버튼은 하늘 면에 검정 글.
 * 예전에는 여기서 검정 위라고 색을 14줄 덮어썼다. 남은 것은 색이 아닌 것 하나다.
 * ───────────────────────────────────────────────────────── */
.nb-hh--banner .nb-hh__type { backdrop-filter: blur(6px); }

@container nb-block (min-width: 640px) {
  .nb-hh.nb-hh--banner { padding-block: var(--nb-s7) var(--nb-s6); }
}
@container nb-block (min-width: 1024px) {
  .nb-hh.nb-hh--banner { padding-block: var(--nb-s8) var(--nb-s7); }
}


/* ── 판 · 칸 나누기 ────────────────────────────────────────── */
.nb-hh {
  --nb-hh-grid: color-mix(in srgb, var(--nb-accent) 7%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--nb-col), minmax(0, 1fr));
  gap: var(--nb-s4) var(--nb-gutter);
  padding: var(--nb-s5) var(--nb-s4);
  border: var(--nb-bw) solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  background-color: var(--nb-surface-2);
  background-image:
    linear-gradient(var(--nb-hh-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-hh-grid) 1px, transparent 1px);
  background-size: var(--nb-s5) var(--nb-s5);
  background-position: -1px -1px;
  overflow: hidden;
}
.nb-hh > * { grid-column: 1 / -1; }

/* 세 줄의 비율 — 부제 : 제목 : 본문.
   예전 12 : 48 : 16 은 제목만 커서 부제는 점처럼, 본문은 캡션처럼 보였다(제목이 부제의 4배 · 본문의 3배).
   척도 안에서 14 : 48 : 20(PC) · 14 : 32 : 18(휴대폰)으로 골라 제목이 본문의 2.4배 안팎에 서게 한다.
   간격도 글자에 비례시킨다 — 부제 아래 12 · 제목 아래 16 · 본문 아래 24. 제목 줄 높이는 큰 글씨라 1.15 로 조인다. */
.nb-hh__eyebrow {
  margin: 0 0 var(--nb-s3);
  font-size: var(--nb-t-md); letter-spacing: .06em; color: var(--nb-accent); font-weight: 700;
}
.nb-hh__title {
  margin: 0 0 var(--nb-s4);
  font-size: var(--nb-t-3xl);
  line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
  text-wrap: balance; word-break: keep-all;
}
.nb-hh__lead { margin: 0 0 var(--nb-s5); color: var(--nb-ink-2); max-width: var(--nb-measure);
  font-size: var(--nb-t-lg); line-height: 1.6;
  word-break: keep-all; text-wrap: pretty; }

/* 검색 — 이 페이지에서 가장 중요한 컨트롤. 그래서 컨트롤 척도의 맨 위 단을 쓴다. */
  position: relative;          /* 찾은 것 목록(.site-find__pop)이 칸 바로 아래에 선다 */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-s2);
  max-width: 34rem;
}
/* 목록이 배너 밖(아래 블록 위)으로 내려와도 가려지지 않게 — 배너의 무늬 층은 따로 자르므로 판은 자르지 않는다 */
.nb-block--home-hero { position: relative; z-index: 2; }
.nb-hh.nb-hh--banner { overflow: visible; }

/* ── 층위 고르기 — 첫 화면의 주인공 ─────────────────────────
 * 이 사이트의 핵심 개념(대항목 → 카테고리 → 브랜드)을 설명 대신 눈으로 보인다.
 * 머리 줄 "제품" 메뉴와 같은 세 칸(main.css "제품 메뉴" · skin-95.css)을 펼친 채로 둔다 — 여기서는 판 모양만 정한다.
 * 1 · 2 · 3 은 실제 고르는 순서다. 판은 밝은 판(은색 창) — 검은 배너 위에 창 하나가 선다(main.css "판" 목록).
 *   모바일 · 태블릿  세 칸이 위에서 아래로 — 대항목 단추 줄 → 묶음별 카테고리 칩 → 브랜드 카드
 *   PC              16rem | 16rem | 나머지, 높이 28rem 고정 · 칸마다 스크롤. 칸 제목은 스크롤에 붙어 있다
 * ───────────────────────────────────────────────────────── */
.nb-hh__main { min-width: 0; }
.nb-mega--hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: var(--nb-s4) 0 0;
  background: var(--nb-surface); color: var(--nb-ink);
}
.nb-mega--hero .nb-mega__col { padding-inline: var(--nb-s3); }
.nb-mega--hero .nb-mega__pane { padding: var(--nb-s3); }
.nb-mega--hero .nb-mega__label,
.nb-mega--hero .nb-mega__step { display: flex; align-items: center; gap: var(--nb-s2); font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-ink); }
.nb-mega__no {
  flex: none; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em;
  background: var(--nb-accent); color: var(--nb-on-accent);
  font-size: var(--nb-t-xs); font-weight: 800; font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .nb-hh.nb-hh--banner .nb-hh__main { grid-column: 1 / -1; }
  /* 두 목록 칸은 같은 폭 — 1 · 2 번 칸이 같은 자리에서 시작하고 끝난다 */
  .nb-mega--hero { grid-template-columns: 16rem 16rem minmax(0, 1fr); height: 28rem; }
  /* 스크롤 막대는 늘 보인다 — 내용이 짧아도 자리를 비워 두고, 길면 더 있다는 것을 바로 알린다.
     auto 로 두면 칸마다 막대가 생겼다 없어져 칸 폭과 줄 끝이 흔들렸다. */
  .nb-mega--hero .nb-mega__col { padding: 0 var(--nb-s2) var(--nb-s3); overflow-y: scroll; scrollbar-gutter: stable; }
  .nb-mega--hero .nb-mega__pane { padding: 0 var(--nb-s5) var(--nb-s4); overflow-y: scroll; scrollbar-gutter: stable; }

  /* 칸 제목 — 칸 폭을 꽉 채워 붙어 있는 머리 줄. 목록이 그 아래로 지나간다 */
  .nb-mega--hero .nb-mega__label {
    margin: 0 calc(var(--nb-s2) * -1) var(--nb-s2);
    padding: var(--nb-s3) var(--nb-s3) var(--nb-s2);
    border-bottom: var(--nb-bw) solid var(--nb-line);
  }
  .nb-mega--hero .nb-mega__list > .nb-mega__label { margin-top: 0; }
  /* 셋째 칸의 머리(3 브랜드)는 소개 상자의 제목 띠다. 상자의 안쪽 여백을 거슬러 올라가
     상자 끝까지 펴고, 위 여백은 1 · 2 번 칸의 머리와 같은 값으로 맞춘다 —
     그래야 세 칸의 머리가 한 줄에 선다(같은 특정도면 나중 파일이 이기므로 여기서 정한다). */
  .nb-mega--hero .nb-mega__intro > .nb-mega__label {
    margin: calc(var(--nb-s3) * -1) calc(var(--nb-s3) * -1) 0;
    padding: var(--nb-s3) var(--nb-s3) var(--nb-s2);
  }
  /* 고른 카테고리의 제목 · 설명은 머리 아래에 — 브랜드 카드 바로 위에 붙는다 */
  .nb-mega--hero .nb-mega__head { margin: 0; }
  /* 칸 하나에 다 들어가게 — 설명은 두 줄까지. 그 아래 브랜드 카드가 스크롤 없이 서야 한다 */
  .nb-mega--hero .nb-mega__sum {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  /* 브랜드 카드는 몇 장이든 같은 폭이다(사용자 결정 2026-09-16 — 크기 일관성이 우선, 한 장이면 오른쪽 칸은 비워 둔다).
     그래서 칸을 넘기지 않는 일은 카드 폭이 아니라 칩이 맡는다 — 카드 안에서 칩이 한 줄에 둘씩 선다. */
  /* 퍼센트는 줄 항목(li) 기준이어야 한다 — a 에 주면 제 부모 li 의 폭을 재서 아무것도 잘리지 않는다 */
  .nb-mega--hero .nb-mega__series > li { min-width: 0; max-width: calc(50% - var(--nb-s1) / 2); }
  /* 말줄임(…)은 글자를 직접 품은 블록 상자에서만 그려진다 — inline-flex 칩은 글자를 그냥 잘라 냈다 */
  .nb-mega--hero .nb-mega__series a { display: block; max-width: 100%; line-height: 26px; }
  /* 줄 높이를 맞춘다 — 대항목 · 카테고리 · 머리 줄 메뉴가 모두 40px */
  .nb-mega--hero .nb-mega__dom,
  .nb-mega--hero .nb-mega__type { min-height: 40px; }
}

/* 품번 찾기 한 줄 — 층위 고르기 아래 */
  min-width: 0; min-height: var(--nb-ctl-lg);
  padding: var(--nb-s3) var(--nb-s4);
  border: var(--nb-bw-2) solid var(--nb-ink-3); border-radius: var(--nb-r);
  background: var(--nb-surface); color: var(--nb-ink);
  font: inherit; font-size: var(--nb-t-lg);       /* 16px 이상 — iOS 확대 방지 */
  font-family: var(--nb-mono);
}

/* ── 두 갈래 — 품번을 알면 · 모르면 ───────────────────────────
 * 이 사이트의 손님은 현장 엔지니어다. 품번을 알면 곧바로 찾고, 모르면 제품 종류 → 브랜드 순서로 좁힌다.
 * 첫 화면은 그 두 길만 보인다. 예시 칩 · "측정할 것으로 / 브랜드로 / 데이터시트에서" 줄은 뺐다 —
 * 예시는 찾기 창에, 기술자료는 머리 줄에 있다.
 *   알면   검색칸. 누르면 찾기 창이 열리고 친 글자가 그대로 넘어간다(js/finder.js).
 *   모르면 제품 종류 칩. 누르면 머리 줄 "제품" 메뉴가 그 종류로 열려 브랜드를 고르게 한다.
 *          칩 목록은 build_catalog.py 가 마스터 DB 로 찍는다(보이는 브랜드가 있는 종류만).
 * ───────────────────────────────────────────────────────── */
.nb-hh__paths { display: grid; gap: var(--nb-s4); }
.nb-hh__path { display: grid; gap: var(--nb-s2); align-content: start; }
.nb-hh__path--browse { padding-top: var(--nb-s4); border-top: var(--nb-bw) dashed var(--nb-line-2); }

.nb-hh__types { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nb-s2); }
.nb-hh__type {
  display: inline-flex; align-items: center; gap: var(--nb-s2);
  min-height: var(--nb-ctl-sm); padding: 0 var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-line-2); border-radius: var(--nb-r-sm);
  background: var(--nb-surface); color: var(--nb-ink);
  font-size: var(--nb-t-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nb-hh__type small { font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-hh__type::after { content: "\203A"; color: var(--nb-ink-3); }   /* › — 다음 단계(브랜드)가 열린다 */
.nb-hh__type:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-hh__type:hover::after { color: var(--nb-accent); }

@container nb-block (min-width: 640px) {
  .nb-hh { align-items: end; padding: var(--nb-s6) var(--nb-s6) var(--nb-s5); }
  .nb-hh__main { grid-column: span 6; }
}
@container nb-block (min-width: 1024px) {
  .nb-hh { padding: var(--nb-s7) var(--nb-s7) var(--nb-s5); }
  .nb-hh__main { grid-column: span 7; }
}