/* 납텍 테마 — 기반 스타일.
 *
 * 여기에는 토큰·리셋·타이포·공용 부품·화면 크기 표준만 둔다.
 * 블록별 스타일은 blocks/{블록}/{블록}.css 에 있고,
 * 그 블록이 실제로 그려질 때만 로드된다.
 *
 * 그래서 이 파일은 작게 유지한다.
 *
 * ═════════════════════════════════════════════════════════════
 *  규칙 — 새 값을 발명하지 않는다
 *
 *  치수는 아래 토큰에서만 고른다. 블록 CSS 에 14px · .875rem 같은
 *  날값을 적지 않는다. 한 번 적으면 그 값은 사이트에 영원히 남고,
 *  옆 블록은 그것을 모른 채 13px 을 적는다 — 그렇게 글자 크기가
 *  24종이 되었다.
 *
 *    간격 · 여백   --nb-s1 … --nb-s8       (4px 배수 8단)
 *    글자          --nb-t-xs … --nb-t-3xl  (8단)
 *    컨트롤 높이   --nb-ctl-sm · --nb-ctl · --nb-ctl-lg
 *    둥글기        --nb-r-sm · --nb-r · --nb-r-lg · --nb-r-pill
 *    칸 격자       --nb-col · --nb-gutter
 * ═════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
 * 화면 크기 표준
 *
 * 티어는 셋뿐이다. 이 세 이름과 두 숫자 밖으로 나가지 않는다.
 *
 *   mobile    ~ 639px      세로 잡은 휴대폰
 *   tablet    640 ~ 1023px 태블릿 · 좁은 창
 *   desktop   1024px ~     노트북 이상
 *
 * 예전에 820px · 760px · 520px · 340px 같은 숫자가 블록마다 따로
 * 박혀 있었다. 그러면 어떤 블록은 800px 에서 2열, 옆 블록은 3열로 어긋난다.
 *
 * 무엇을 어디에 쓰는가 —
 *
 *   @container nb-block (min-width: …)   블록 내부 배치
 *       블록은 자기가 놓인 자리의 폭에 반응한다. 본문 한가운데든
 *       좁은 사이드바든 같은 파일로 옳게 그려진다.
 *       위젯 갤러리에서 액자 폭만 줄여도 실제와 같이 접힌다.
 *
 *   @media (min-width: …)                페이지 골격 · 기기 한정
 *       헤더·푸터·바깥 여백처럼 화면 전체가 기준인 것,
 *       그리고 "PC 전용 / 모바일 전용" 판정.
 *
 * 모바일 우선으로 쓴다. 기본값이 모바일이고 넓어질 때만 덧쓴다.
 * 컨테이너 쿼리를 모르는 낡은 브라우저는 @container 를 통째로 무시하므로
 * 자동으로 모바일 배치가 남는다 — 깨지지 않고 좁아질 뿐이다.
 * ───────────────────────────────────────────────────────── */

:root {
  /* 이 사이트는 밝은 화면 하나로 간다. 손님의 OS 가 어두운 테마여도 흰 바탕이다 —
     카탈로그는 사진과 도면을 보는 곳이고, 인쇄물(데이터시트)과 같은 바탕이어야 한다.
     color-scheme 을 못 박아야 입력칸 · 스크롤바 · 드롭다운까지 밝게 나온다. */
  color-scheme: light;

  /* 미디어 쿼리 안에서는 var() 를 못 쓴다. 이 값들은 문서·JS 용 사본이고
     실제 분기에는 640px · 1024px 리터럴을 그대로 적는다. */
  --nb-bp-tablet:  640px;
  --nb-bp-desktop: 1024px;

  /* ── 칸 격자 ──────────────────────────────────────────────
   * 데스크톱 글이 서는 폭 1176px = 칸 76px × 12 + 틈 24px × 11.
   * 세 숫자가 전부 정수이고 4의 배수다. 우연이 아니라 그렇게 고른 값이다.
   * --nb-wrap 은 좌우 여백까지 포함한 바깥 폭이라 1176 + 32×2 = 1240 이다
   * (box-sizing: border-box 이므로 max-width 에서 padding 이 빠진다).
   *
   *   mobile    4칸 · 틈 12px
   *   tablet    8칸 · 틈 16px
   *   desktop  12칸 · 틈 24px
   *
   * 12 · 8 · 4 를 고른 이유 — 각 티어의 칸 수가 아래 티어의 배수라
   * 화면이 접힐 때 세로선이 사라지기만 하고 새로 생기지 않는다.
   *
   * ★ 중요한 성질 —
   *   N 이 그 티어의 칸 수를 나누면, repeat(N, 1fr) 격자는 틈만 같으면
   *   12칸 격자의 선 위에 저절로 올라간다. (3열 = span 4 와 수학적으로 같다.)
   *   그래서 카드 격자는 repeat(N, 1fr) 그대로 두고 틈만 --nb-gutter 로 맞춘다.
   *   데스크톱에서 쓸 수 있는 N 은 2 · 3 · 4 · 6, 태블릿은 2 · 4, 모바일은 2.
   *
   *   칸이 나뉘지 않는 비율(7:5, 5:7, 8:4)이 필요한 블록만 .nb-cols 를 쓴다.
   * ─────────────────────────────────────────────────────── */
  --nb-wrap:   1240px;
  --nb-col:    4;
  --nb-gutter: 12px;
  --nb-pad-page: 16px;

  /* ── 간격 · 여백 — 4px 배수 8단 ────────────────────────────
   * 이 여덟 개 밖의 값은 쓰지 않는다. 5 · 6 · 10 · 14 · 18px 이
   * 섞여 있던 자리를 전부 여기로 모았다.
   * ─────────────────────────────────────────────────────── */
  --nb-s1:  4px;
  --nb-s2:  8px;
  --nb-s3: 12px;
  --nb-s4: 16px;
  --nb-s5: 24px;
  --nb-s6: 32px;
  --nb-s7: 48px;
  --nb-s8: 64px;

  /* ── 글자 — 8단 ───────────────────────────────────────────
   * 작은 쪽 넷은 고정이다. 11px 과 12px 을 따로 둘 이유가 없고,
   * 표와 메타는 화면이 넓어져도 커질 이유가 없다.
   * 제목 넷만 티어마다 값을 갈아 끼운다 — clamp() 로 화면 폭에
   * 비례시키면 10.8px · 38.4px 같은 값이 나와 격자를 벗어난다.
   * 단계로 바꾸면 어느 화면에서도 정수로 떨어진다.
   * ─────────────────────────────────────────────────────── */
  --nb-t-xs:   12px;   /* 라벨 · 캡션 · 메타 · 개수 */
  --nb-t-sm:   13px;   /* 표 · 카드 부제 · 조밀한 데이터 */
  --nb-t-md:   14px;   /* 컨트롤(버튼 · 칩) · 보조 본문 */
  --nb-t-base: 16px;   /* 본문 */
  --nb-t-lg:   18px;   /* h3 · 작은 제목 */
  --nb-t-xl:   22px;   /* h2 · 섹션 제목 */
  --nb-t-2xl:  28px;   /* h1 */
  --nb-t-3xl:  32px;   /* 히어로 제목 */

  /* ── 컨트롤 높이 — 3단 ────────────────────────────────────
   * 36 · 40 · 44 · 48 · 52px 이 섞여 있었다. 버튼과 그 옆 입력칸의
   * 높이가 4px 씩 어긋나면 줄이 맞지 않는다.
   * ─────────────────────────────────────────────────────── */
  --nb-ctl-sm: 36px;   /* 조밀한 줄 안의 작은 컨트롤 — 칩 · 보조 링크 */
  --nb-ctl:    44px;   /* 기본. 손가락 최소치(WCAG 2.5.8 실사용 권장)와 같은 값 */
  --nb-ctl-lg: 52px;   /* 첫 화면 검색처럼 그 화면의 주인공 */

  /* ── 둥글기 — 전부 0 ──────────────────────────────────────
   * Windows 95 에는 둥근 모서리가 없다. 하나도.
   * 네 단을 남겨 두는 것은 뜻(얼마나 큰 물건인가)이 아직 쓸모 있어서다 —
   * 스킨을 벗기면 4 · 8 · 16px 로 돌아온다.
   * ─────────────────────────────────────────────────────── */
  --nb-r-sm:   0;
  --nb-r:      0;
  --nb-r-lg:   0;
  --nb-r-pill: 0;

  --nb-bw:   1px;      /* 테두리 — 가르는 선 */
  --nb-bw-2: 2px;      /* 테두리 — 받는 칸 · 고른 상태 */

  /* ── 색 — 원색 견본 ──────────────────────────────────────
   * 이름만 붙인 색이다. 부품은 이 이름을 직접 부르지 않고, 아래 "판" 의 역할 토큰(--nb-ink · --nb-accent …)을 부른다.
   * 원색을 바로 부르는 곳은 판이 뒤집혀도 바뀌지 않는 색뿐이다 — 판 자체의 바탕(배너의 검정 · 제목 표시줄)과 95 베벨.
   *
   *   흑백        글 · 선 · 창틀 · 배너. 95 의 회색 넷에 글자용 둘.
   *   남색 · 파랑 98 제목 표시줄의 두 끝. 남색은 밝은 판의 강조, 하늘은 파랑(204°)을 밝힌 어두운 판의 강조.
   *   납이        얼굴 보라와 풍선 도움말. 사이트의 다른 곳에는 쓰지 않는다.
   *
   * 이 블록 밖의 CSS 에는 HEX · rgba 를 적지 않는다.
   * 팔레트 개정안 2판(2026-09-14) — demo/palette-proposal.html
   * ─────────────────────────────────────────────────────── */
  --c-black:   #000000;
  --c-gray-20: #333333;
  --c-gray-30: #4d4d4d;   /* 은색 창 면 위에서도 4.5:1 을 넘는 가장 옅은 회색 */
  --c-gray-50: #808080;
  --c-gray-75: #c0c0c0;
  --c-gray-87: #dfdfdf;
  --c-white:   #ffffff;

  --c-navy:       #000080;   /* 흰 바탕 16:1 · 은색 8.8:1 */
  --c-navy-hover: #1a1a9e;
  --c-navy-soft:  #d9d9ec;   /* 남색 15% */
  --c-blue:       #0f7bc2;   /* 제목 표시줄 오른쪽 끝 — 흰 글자 4.5:1 */
  --c-sky:        #5cb0e8;   /* 검정 위 8.8:1 · 검정 글자를 올리면 8.8:1 */
  --c-sky-hover:  #8cc8f0;
  --c-sky-soft:   rgba(92, 176, 232, .25);

  --c-nabi:     #cfb7ce;   /* 3D 얼굴 COL.head 의 sRGB (js/nabi-3d.js) */
  --c-nabi-ink: #624161;   /* 얼굴과 같은 색상 · 채도에서 밝기만 32% */
  --c-tip:      #ffffe1;   /* 95 풍선 도움말의 연노랑 */

  --c-good: #006400;
  --c-warn: #806000;
  --c-crit: #800000;

  /* 투명 단 — 어두운 판의 흐린 글 · 선 · 면은 흰색으로, 그림자 · 막은 검정으로 */
  --c-white-85: rgba(255, 255, 255, .85);
  --c-white-60: rgba(255, 255, 255, .6);
  --c-white-30: rgba(255, 255, 255, .3);
  --c-white-15: rgba(255, 255, 255, .15);
  --c-white-08: rgba(255, 255, 255, .08);
  --c-black-70: rgba(0, 0, 0, .7);
  --c-black-35: rgba(0, 0, 0, .35);
  --c-black-15: rgba(0, 0, 0, .15);

  /* 판이 뒤집혀도 같은 것 — 역할 토큰은 아래 "판" 에 있다 */
  --nb-ground:  var(--c-white);      /* 페이지 바탕 */
  --nb-good:    var(--c-good);       /* 상태 — 알림과 필수 표시에만, 밝은 판에서만 */
  --nb-warn:    var(--c-warn);
  --nb-crit:    var(--c-crit);
  --nb-shade:   var(--c-black-15);
  --nb-shade-2: var(--c-black-35);
  --nb-scrim:   var(--c-black-70);   /* 사진 · 영상 위 막 */
  --nabi-face:  var(--c-nabi);
  --nabi-ink:   var(--c-nabi-ink);

  /* ── Windows 95 표면 ──────────────────────────────────────
   * 95 를 95 로 보이게 하는 것은 회색이 아니라 베벨이다.
   * 모든 면은 튀어나왔거나(--w-out) 눌려 있다(--w-in).
   * 2픽셀 테두리 바깥 두 색 + 안쪽 그림자 두 색, 합쳐서 네 단계다.
   *
   *   흰색   #ffffff  ─ 빛이 오는 쪽(왼쪽 위)의 맨 바깥
   *   밝은회 #dfdfdf  ─ 그 안쪽
   *   어둔회 #808080  ─ 그늘 쪽(오른쪽 아래)의 안쪽
   *   검정   #000000  ─ 맨 바깥
   * ─────────────────────────────────────────────────────── */
  --w-face:    var(--c-gray-75);   /* 창 면 · 도구모음 — 은색 */
  --w-face-2:  var(--c-gray-87);
  --w-shadow:  var(--c-gray-50);
  --w-dark:    var(--c-black);
  --w-light:   var(--c-white);
  --w-title:   var(--c-navy);      /* 제목 표시줄 왼쪽 */
  --w-title-2: var(--c-blue);      /* 제목 표시줄 오른쪽 — 98 의 그라데이션 */
  --w-tip:     var(--c-tip);       /* 풍선 도움말 */
  --w-frame:   3px;       /* 창틀 두께. 제목 표시줄이 이만큼 밖으로 나간다. */

  /* 제목 표시줄이 창틀 끝까지 펴지도록, 안쪽 여백을 가진 상자가 이 값을 넘겨준다.
     사용자 정의 속성은 상속되므로 .nb-u-h2 는 "가장 가까운 여백 가진 조상" 의
     값을 자동으로 집는다 — 블록 루트든 안쪽 패널이든 똑같이 맞는다. */
  --w-pad: 0px;

  /* 본문 한 줄의 길이 — 한글 38자쯤.
     ch 로 재면 안 된다. ch 는 라틴 "0" 글자의 폭이라 한글 글자의 절반쯤이고,
     44ch 로 잡은 문단이 실제로는 한글 24자에서 잘려 어색하게 좁아 보였다.
     em 은 글자 크기 그 자체라 한글 한 글자와 거의 같다 — 38em 은 그냥 "한글 38자"다.
     글자가 작아지면 줄도 함께 짧아진다(글자 수는 그대로). 문단 폭은 모두 이 토큰에서 고른다. */
  --nb-measure: 38em;

  --nb-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* 쌓임 리듬 — 티어마다 갈린다. 블록끼리의 세로 간격(--nb-gap-lg)과
     블록 안 덩어리끼리의 간격(--nb-gap)이다. 격자의 틈(--nb-gutter)과는 다른 것 —
     이쪽은 세로, 저쪽은 가로다. */
  --nb-gap:    var(--nb-s3);
  --nb-gap-lg: var(--nb-s5);

  /* 예전 이름 — 아직 부르는 데가 있을 수 있어 남겨 둔다. 새로 쓰지 말 것. */
  --nb-radius: var(--nb-r);
  --nb-tap:    var(--nb-ctl);
}

@media (min-width: 640px) {
  :root {
    --nb-col: 8;  --nb-gutter: var(--nb-s4);  --nb-pad-page: 24px;
    --nb-t-lg:  20px;
    --nb-t-xl:  24px;
    --nb-t-2xl: 32px;
    --nb-t-3xl: 40px;
    --nb-gap: var(--nb-s4); --nb-gap-lg: var(--nb-s6);
  }
}
@media (min-width: 1024px) {
  :root {
    /* 여백은 화면이 넓어지면 넓어진다. 예전에는 24 → 20px 로 줄어들어
       1024~1224px 구간에서 좌우가 오히려 좁아졌다. */
    --nb-col: 12; --nb-gutter: var(--nb-s5);  --nb-pad-page: 32px;
    --nb-t-xl:  26px;
    --nb-t-2xl: 36px;
    --nb-t-3xl: 48px;
  }
}


/* ── 리셋 ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nb-ground);
  color: var(--nb-ink);
  font-family: "Pretendard", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  font-size: var(--nb-t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 한국어는 낱말 가운데서 줄을 바꾸지 않는다("갑니/다" 가 되지 않게).
     칸보다 긴 낱말(모델번호 등)은 아래 overflow-wrap 이 끊는다. */
  word-break: keep-all;
  /* 가로 스크롤은 표 안에서만 일어나야 한다. 페이지 몸통이 밀리면 버그다. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* <small> 의 브라우저 기본값은 smaller — 부모 크기에 비례하는 키워드라
   부모가 12 · 13 · 14px 이면 10 · 10.8 · 11.7px 이 나온다. 척도 밖의 값이고
   소수점이라 어느 격자에도 앉지 않는다. 캡션 단으로 못 박는다. */
small { font-size: var(--nb-t-xs); }

/* 링크의 기본 색. :where() 라 순위가 0 — 블록이 정한 링크 색이 그대로 이긴다.
   이 줄이 없을 때는 블록이 색을 주지 않은 링크(견적 폼 옆 "문자 보내기" · 이메일)가 브라우저 기본 파랑으로 나왔다. */
:where(a) { color: var(--nb-accent); }


/* ── 판 — 밝은 판 · 어두운 판 ─────────────────────────────
 * 색은 그 색이 놓인 바탕에 따라 달라야 한다. 남색은 흰 바탕에서 16:1 이지만 검정 위에서는 1.3:1 로 사라진다.
 * 그래서 역할 토큰은 판마다 값이 다르다. 부품은 역할만 부르고, 실제 색은 부품이 놓인 판이 정한다.
 *
 *   밝은 판   흰 바탕 · 은색 창 · 입력칸 · 풍선 — 강조는 남색, 강조 면 위 글은 흰색
 *   어두운 판 검은 배너 · 사진 위 막       — 강조는 하늘, 강조 면 위 글은 검정
 *
 * 면을 칠하는 부품이 자기 판을 선언하고, 그 안의 부품은 가장 가까운 판을 따른다.
 * 새 어두운 면이 생기면 아래 두 목록에 더한다. 마크업에서는 .nb-dark 로 바로 선언할 수 있다.
 * 제목 표시줄은 skin-95.css 가 따로 선언한다 — 오른쪽 끝 파랑 때문에 글자 역할이 모두 흰색이다.
 * 주 버튼 · 고른 칩 · 고른 줄은 판이 아니라 강조 면이다 — 면은 --nb-accent, 그 위 글은 --nb-on-accent.
 * ─────────────────────────────────────────────────────── */

/* 밝은 판 — 기본값. 어두운 판 안의 입력칸 · 95 단추는 흰 칸 · 은색 면이라 다시 밝은 판이다. */
:root,
:where(.nb-dark, .nb-hh--banner) :where(input, select, textarea, .nb-btn:not(.nb-btn--primary), .site-find__pop, .nb-mega) {
  --nb-surface:      var(--c-white);
  --nb-surface-2:    var(--c-white);
  --nb-ink:          var(--c-black);      /* 글 */
  --nb-ink-2:        var(--c-gray-20);    /* 설명 */
  --nb-ink-3:        var(--c-gray-30);    /* 메타 */
  --nb-line:         var(--c-gray-87);    /* 가르는 선 */
  --nb-line-2:       var(--c-gray-75);    /* 칩 테두리 · 점선 가르개 */
  --nb-field:        var(--c-gray-50);    /* 입력칸 테두리 · 가르는 기호 — 3:1 (WCAG 1.4.11) */
  --nb-accent:       var(--c-navy);       /* 링크 · 머리글 · 주 버튼 · 고른 칩 · 고른 줄 */
  --nb-accent-hover: var(--c-navy-hover);
  --nb-accent-soft:  var(--c-navy-soft);  /* 초점 테 · 옅게 고른 바탕 */
  --nb-on-accent:    var(--c-white);      /* 강조 면 위 글 */
  --nb-on-accent-2:  var(--c-white-85);   /* 강조 면 위 흐린 글 — 남색 위 11.5:1 */
  --nb-focus:        var(--c-black);      /* 키보드 초점 점선 */
}

/* 어두운 판 */
.nb-dark,
.nb-hh--banner,
.nb-gal__count {
  --nb-surface:      var(--c-white-08);
  --nb-surface-2:    var(--c-white-08);
  --nb-ink:          var(--c-white);
  --nb-ink-2:        var(--c-white-85);   /* 검정 위 14.9:1 */
  --nb-ink-3:        var(--c-white-60);   /* 검정 위 7.4:1 */
  --nb-line:         var(--c-white-15);
  --nb-line-2:       var(--c-white-30);
  --nb-field:        var(--c-white);
  --nb-accent:       var(--c-sky);
  --nb-accent-hover: var(--c-sky-hover);
  --nb-accent-soft:  var(--c-sky-soft);
  --nb-on-accent:    var(--c-black);
  --nb-on-accent-2:  var(--c-black-70);   /* 하늘 위 5.4:1 */
  --nb-focus:        var(--c-white);
  color: var(--nb-ink);
}

/* 모델번호·URL 처럼 긴 낱말이 좁은 화면을 밀어내지 않게 한다. */
:where(p, li, dd, summary, figcaption) { overflow-wrap: anywhere; }
/* 표 칸은 anywhere 를 쓰면 안 된다. anywhere 는 칸의 최소 폭 계산을 줄여서
   자동 표 배치가 긴 문장 열을 47px 까지 눌러 버린다 — 행 하나가 900px 가 되고
   상세 페이지가 17,000px 로 늘어났던 원인이다 (UI·UX 패치 기획 P0-1).
   break-word 는 넘칠 때만 끊고 최소 폭은 건드리지 않는다. */
:where(td, th) { overflow-wrap: break-word; }


/* ── 페이지 골격 ───────────────────────────────────────────
 * 머리 · 몸통 · 발이 같은 폭과 같은 좌우 여백을 쓴다.
 * 그래서 로고 왼쪽 모서리와 첫 블록의 왼쪽 모서리가 한 줄로 선다.
 * ───────────────────────────────────────────────────────── */
.site-header__inner,
.site-footer__inner,
.site-main,
.nb-page {
  max-width: var(--nb-wrap);
  margin: 0 auto;
  padding: 0 var(--nb-pad-page);
}

.site-main { padding-block: var(--nb-s4) var(--nb-s7); }
@media (min-width: 640px)  { .site-main { padding-block: var(--nb-s5) var(--nb-s8); } }

/* 블록은 세로로 쌓이고 간격은 여기서 한 번에 준다.
   블록 파일이 각자 margin 을 붙이면 서로 상쇄돼 어긋난다. */
.nb-block { margin: 0 0 var(--nb-gap-lg); }
.nb-block:last-child { margin-bottom: 0; }

/* 앵커로 내려갈 때 제목이 붙박이 머리 밑에 숨지 않게 한다 (모바일 머리는 두 줄이라 더 높다). */
.nb-block[id], [id^="nb-quote"], [id^="nb-shot-"] { scroll-margin-top: 112px; }
@media (min-width: 1024px) { .nb-block[id], [id^="nb-quote"] { scroll-margin-top: 80px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 블록을 컨테이너로 선언한다. 블록 CSS 의 @container 가 이것을 기준 삼는다.
   inline-size 는 가로 폭만 격리하므로 높이는 평소처럼 늘어난다. */
.nb-block { container-type: inline-size; container-name: nb-block; }


/* ── 칸 격자 ───────────────────────────────────────────────
 * 칸이 고르게 나뉘지 않는 비율이 필요한 블록이 쓴다.
 *
 *   <div class="nb-cols">
 *     <div class="nb-span-7">…</div>   ← 데스크톱에서 7칸
 *     <div class="nb-span-5">…</div>   ← 5칸
 *   </div>
 *
 * 좁아지면 저절로 한 줄 전체(1 / -1)가 된다. 칸 수가 12 → 8 → 4 로
 * 줄어드는데 span 7 을 그대로 두면 칸을 넘치기 때문이다.
 * 중간(태블릿) 비율이 필요하면 .nb-span-t{n} 을 덧붙인다.
 * ───────────────────────────────────────────────────────── */
.nb-cols {
  display: grid;
  grid-template-columns: repeat(var(--nb-col), minmax(0, 1fr));
  gap: var(--nb-gutter);
}
.nb-cols > * { grid-column: 1 / -1; }

@container nb-block (min-width: 640px) {
  .nb-span-t2 { grid-column: span 2; }
  .nb-span-t4 { grid-column: span 4; }
  .nb-span-t6 { grid-column: span 6; }
}
@container nb-block (min-width: 1024px) {
  .nb-span-3 { grid-column: span 3; }
  .nb-span-4 { grid-column: span 4; }
  .nb-span-5 { grid-column: span 5; }
  .nb-span-6 { grid-column: span 6; }
  .nb-span-7 { grid-column: span 7; }
  .nb-span-8 { grid-column: span 8; }
  .nb-span-9 { grid-column: span 9; }
}


/* ── 기기 한정 ─────────────────────────────────────────────
 * 서버에서 빼지 않고 CSS 로만 숨긴다.
 *
 * 구글은 모바일 크롤러 하나로 색인한다(mobile-first indexing).
 * 모바일 응답에서 서버가 내용을 빼버리면 그 내용은 색인 자체가 안 된다.
 * CSS 로 숨기면 문서에는 남으므로 색인은 되고 화면만 정리된다.
 *
 * 그래서 규칙은 —
 *   글을 가진 블록은 절대 기기로 한정하지 않는다. 표현을 바꿔서 담는다.
 *   기기 한정은 색인 가치가 없는 무거운 것(내장 PDF 뷰어 등)에만 쓴다.
 *   무거운 리소스는 숨기는 것으로 끝내지 말고 아예 늦게 붙인다.
 * ───────────────────────────────────────────────────────── */
.nb-u-only-mobile,
.nb-u-only-tablet,
.nb-u-only-desktop,
.nb-u-from-tablet,
.nb-u-from-desktop { display: none; }

@media (max-width: 639px)  { .nb-u-only-mobile  { display: revert; } }
@media (min-width: 640px)  { .nb-u-from-tablet  { display: revert; } }
@media (min-width: 640px) and (max-width: 1023px) { .nb-u-only-tablet { display: revert; } }
@media (min-width: 1024px) { .nb-u-only-desktop, .nb-u-from-desktop { display: revert; } }
@media (max-width: 1023px) { .nb-u-upto-tablet  { display: revert; } }

/* 블록 단위 한정. inc/render.php 가 구성 데이터를 읽어 이 클래스를 붙인다. */
.nb-block--dev-desktop,
.nb-block--dev-tablet,
.nb-block--dev-mobile,
.nb-block--dev-mobile-tablet,
.nb-block--dev-tablet-desktop { display: none; }

@media (max-width: 639px) {
  .nb-block--dev-mobile,
  .nb-block--dev-mobile-tablet { display: block; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .nb-block--dev-tablet,
  .nb-block--dev-mobile-tablet,
  .nb-block--dev-tablet-desktop { display: block; }
}
@media (min-width: 1024px) {
  .nb-block--dev-desktop,
  .nb-block--dev-tablet-desktop { display: block; }
}


/* ── 타이포 ────────────────────────────────────────────────
 * 제목 셋과 본문 하나. 크기는 토큰이 정하고 여기서는 역할만 정한다.
 * ───────────────────────────────────────────────────────── */
.nb-u-h1 {
  font-size: var(--nb-t-2xl); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 var(--nb-s4); text-wrap: balance;
}
.nb-u-h2 {
  font-size: var(--nb-t-xl); line-height: 1.3; letter-spacing: -.01em;
  margin: 0 0 var(--nb-s3); text-wrap: balance;
}
.nb-u-h3 { font-size: var(--nb-t-lg); line-height: 1.4; margin: var(--nb-s5) 0 var(--nb-s2); }

.nb-u-prose { max-width: var(--nb-measure); color: var(--nb-ink-2); }
.nb-u-prose p { margin: 0 0 var(--nb-s4); }

/* 컨트롤은 글자를 물려받는다 — 단추 · 입력칸에 크기를 안 적으면 브라우저 기본(13.333px)이 나와
   척도(12 · 13 · 14 · 16px) 밖으로 샌다. 크기를 정하는 곳은 각 부품이고, 여기서는 기본만 막는다. */
:where(button, input, select, textarea, optgroup) { font: inherit; }

.nb-u-label { font-size: var(--nb-t-xs); letter-spacing: .06em; text-transform: uppercase;
            color: var(--nb-ink-3); }
.nb-u-count { font-size: var(--nb-t-sm); font-weight: 400; color: var(--nb-ink-3);
            font-variant-numeric: tabular-nums; }
.nb-u-sep   { color: var(--nb-field); }
.nb-u-more  { font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
/* 글 끝의 "더 보기" 줄. nb-u- 로 시작하는 이름은 공용이므로 정의도 공용 자리에 둔다
   (professor 블록 파일 안에 있어서 그 블록에서만 여백이 붙고 있었다). */
.nb-u-more-link { margin-top: var(--nb-s4); }

/* 섹션 머리 — 제목 한 줄과 설명 한 줄. 블록마다 따로 만들지 않는다. */
.nb-sec { margin: 0 0 var(--nb-s4); }
.nb-sec__lead { margin: 0; color: var(--nb-ink-2); font-size: var(--nb-t-md);
              max-width: var(--nb-measure); }

/* 모델번호는 이 사이트의 고유명사다. 항상 고정폭으로 조판한다. */
.nb-model {
  font-family: var(--nb-mono);
  font-size: .8125em;
  background: var(--nb-surface-2);
  border: var(--nb-bw) solid var(--nb-line);
  border-radius: var(--nb-r-sm);
  padding: 0 var(--nb-s1);
  white-space: nowrap;
}


/* ═══ 공용 부품 ═══════════════════════════════════════════════
 * 여기 있는 것은 사이트 어디에 나와도 같은 모양이어야 한다.
 * 블록이 자기 버튼 · 자기 입력칸을 새로 그리기 시작하면 통일감이 깨진다.
 * 모양을 바꿔야 하면 블록이 아니라 여기를 고친다.
 * ═════════════════════════════════════════════════════════ */

/* ── 버튼 ─────────────────────────────────────────────────
 *   .nb-btn              기본 — 테두리만
 *   .nb-btn--primary     주 행동 — 프러시안 블루
 *   .nb-btn--sm / --lg   높이만 바꾼다
 * 높이 · 좌우 여백 · 글자 크기는 입력칸과 같은 토큰을 쓴다.
 * 그래야 나란히 놓았을 때 윗줄 아랫줄이 맞는다.
 * ─────────────────────────────────────────────────────── */
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-s2);
  min-height: var(--nb-ctl);
  padding: var(--nb-s2) var(--nb-s4);
  border: var(--nb-bw) solid var(--nb-line-2);
  border-radius: var(--nb-r);
  background: var(--nb-surface);
  color: var(--nb-ink);
  text-decoration: none;
  font-size: var(--nb-t-md);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.nb-btn:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-btn--primary { background: var(--nb-accent); border-color: var(--nb-accent); color: var(--nb-on-accent); }
.nb-btn--primary:hover { background: var(--nb-accent-hover); border-color: var(--nb-accent-hover); color: var(--nb-on-accent); }
.nb-btn--sm { min-height: var(--nb-ctl-sm); padding-inline: var(--nb-s3); font-size: var(--nb-t-sm); }
.nb-btn--lg { min-height: var(--nb-ctl-lg); padding-inline: var(--nb-s5); font-size: var(--nb-t-base); }

/* 모바일에서는 주 행동 버튼을 폭 전체로 편다. 한 손으로 누르는 자리다. */
@container nb-block (max-width: 479px) {
  .nb-btn--primary { width: 100%; }
}

/* ── 받는 칸 — 입력 · 고르기 · 여러 줄 ──────────────────────
 * 폼이 있는 곳마다 테두리 두께와 높이가 달랐다.
 * 이제 한 규칙이고, 버튼과 높이가 같다.
 *
 *   .nb-field   라벨과 칸 한 벌을 감싸는 것 (대개 <label>)
 *   .nb-input   받는 칸 그 자체
 *
 * 폼 요소에 .nb-form 을 달면 안의 input · select · textarea 가
 * 클래스 없이도 .nb-input 과 같은 치수를 받는다.
 * ─────────────────────────────────────────────────────── */
.nb-field {
  display: grid; gap: var(--nb-s1); min-width: 0;
  font-size: var(--nb-t-sm); font-weight: 600; color: var(--nb-ink-2);
}
.nb-field > span { min-width: 0; }
.nb-field small { font-weight: 400; color: var(--nb-ink-3); }

.nb-input,
.nb-form input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"], [type="url"]),
.nb-form select,
.nb-form textarea {
  min-width: 0;
  width: 100%;
  min-height: var(--nb-ctl);
  padding: var(--nb-s2) var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-field);
  border-radius: var(--nb-r);
  background: var(--nb-surface);
  color: var(--nb-ink);
  /* 16px 미만이면 iOS 사파리가 칸을 누를 때 화면을 확대한다. 토큰으로 고정. */
  font: inherit;
  font-size: var(--nb-t-base);
  line-height: 1.4;
}
/* 예시 글(placeholder)은 어느 입력칸이든 한 규칙 — 칸 종류별로 나열하면 빠진 칸(검색칸 셋)만 색이 달랐다 */
::placeholder { color: var(--nb-ink-3); opacity: 1; }
.nb-input:focus,
.nb-form :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--nb-accent);
  box-shadow: 0 0 0 3px var(--nb-accent-soft);
}
.nb-input--lg { min-height: var(--nb-ctl-lg); border-width: var(--nb-bw-2); }
.nb-form textarea { min-height: calc(var(--nb-ctl) * 2); resize: vertical; }
/* 체크박스 · 라디오는 폭 100% 규칙에서 빼 둔다 */
.nb-form input:where([type="checkbox"], [type="radio"]) { width: auto; min-height: 0; }

/* 필수 표시 */
.nb-req { color: var(--nb-crit); font-weight: 700; margin-left: var(--nb-s1); }
.nb-quote__req { margin: 0; font-size: var(--nb-t-xs); color: var(--nb-ink-3); }

/* ── 판 — 테두리 있는 상자 ──────────────────────────────────
 * 구매 상자 · 견적 폼 · 결과 없음 · 힌트 상자가 같은 판을 쓴다.
 * ─────────────────────────────────────────────────────── */
.nb-panel {
  padding: var(--nb-s4);
  border: var(--nb-bw) solid var(--nb-line);
  border-radius: var(--nb-r);
  background: var(--nb-surface);
}
@container nb-block (min-width: 640px) { .nb-panel { padding: var(--nb-s5); } }

/* ── 배지 · 칩 ────────────────────────────────────────────
 *   .nb-badge   상태를 말하는 딱지 — 누르는 것이 아니다
 *   .nb-chips   거르기 칩 — 링크다. 누르면 주소가 바뀐다.
 * ─────────────────────────────────────────────────────── */
.nb-badge {
  display: inline-flex; align-items: center;
  font-size: var(--nb-t-xs);
  padding: 0 var(--nb-s2);
  min-height: var(--nb-s5);
  border: var(--nb-bw) solid var(--nb-accent);
  border-radius: var(--nb-r-pill);
  color: var(--nb-accent);
}

.nb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nb-s2); }
.nb-chips a {
  display: inline-flex; align-items: center; gap: var(--nb-s1);
  min-height: var(--nb-ctl-sm); padding: 0 var(--nb-s3);
  font-size: var(--nb-t-md); font-weight: 600; color: var(--nb-ink); text-decoration: none;
  border: var(--nb-bw) solid var(--nb-line-2); border-radius: var(--nb-r-pill);
  background: var(--nb-surface);
}
.nb-chips a span { font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-chips a:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-chips a[aria-current="true"] { background: var(--nb-accent); border-color: var(--nb-accent); color: var(--nb-on-accent); }
.nb-chips a[aria-current="true"] span { color: var(--nb-on-accent-2); }


/* ── 카드 · 격자 ───────────────────────────────────────────
 * inc/partials.php 의 nabtek_card() 가 내는 마크업이다.
 * series_grid · collection_grid · related_series · brand_showcase 가 함께 쓴다.
 *
 * 예전에는 series-grid.css 안에 있었다. 그런데 블록 CSS 는 그 블록이
 * 그려질 때만 실린다 — 브랜드 페이지는 collection_grid 만,
 * 문서 페이지는 related_series 만 있는 구성이라 격자가 통째로 풀렸다.
 * 공용 조각의 스타일은 공용 자리에 둔다.
 *
 * 열 수는 블록이 style="--nb-cols:N" 으로 넣는다. N 은 그 티어 칸 수의
 * 약수여야 12칸 격자 위에 선다 — 데스크톱 2 · 3 · 4 · 6, 태블릿 2 · 4.
 * ───────────────────────────────────────────────────────── */
.nb-grid, .nb-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-gutter);
  list-style: none; margin: 0; padding: 0;
}
/* 아주 좁을 때만 한 줄에 하나. 카드 한 장이 160px 아래로 내려가면
   썸네일도 제목도 읽을 것이 없어진다. */
@container nb-block (max-width: 339px) {
  .nb-grid, .nb-cards { grid-template-columns: 1fr; }
}
@container nb-block (min-width: 640px) {
  .nb-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container nb-block (min-width: 1024px) {
  /* --nb-cols 는 블록이 인라인으로 넣는다. 데스크톱에서만 존중한다 —
     좁은 자리에서 3열을 강요하면 카드가 글자 폭보다 좁아진다. */
  .nb-grid  { grid-template-columns: repeat(var(--nb-cols, 3), minmax(0, 1fr)); }
  .nb-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.nb-card a {
  display: grid; gap: var(--nb-s1); align-content: start;
  text-decoration: none; color: var(--nb-ink);
  border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r);
  padding: var(--nb-s3); height: 100%;
  background: var(--nb-surface);
}
.nb-card a:hover { border-color: var(--nb-accent); }
.nb-card a:hover .nb-card__title { color: var(--nb-accent); }

/* 사진 칸 — 흰 바탕 1:1. 원본이 흰 배경 제품 사진이라 칸도 흰색으로 둔다. */
.nb-card__thumb {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; margin-bottom: var(--nb-s2);
  background: var(--w-light); border-radius: var(--nb-r-sm);
  overflow: hidden;
}
/* 사진 · 그림은 원본보다 크게 늘리지 않는다(scale-down) — 작은 원본을 액자에 맞춰 키우면 흐려진다(기조 8장, 2026-09-17) */
.nb-card__img { width: 100%; height: 100%; object-fit: scale-down; display: block; }
/* 사진이 없는 카드 — 사진 칸과 같은 정사각, 가운데 브랜드 로고(사용자 결정 2026-09-16 — 모양이 카드마다 같아야 한다) */
.nb-card__logo { max-width: 55%; max-height: 55%; object-fit: contain; }
.nb-card__ph { display: block; width: 100%; height: 100%; border: var(--nb-bw) dashed var(--nb-line); }

.nb-card__brand { font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nb-ink-3); }
.nb-card__title { font-size: var(--nb-t-base); font-weight: 700; line-height: 1.3; }
.nb-card__type  { font-size: var(--nb-t-sm); color: var(--nb-ink-2); }
.nb-card__models { font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
.nb-card__match { display: flex; flex-wrap: wrap; gap: var(--nb-s1); align-items: center;
  margin-top: var(--nb-s1); font-size: var(--nb-t-xs); color: var(--nb-ink-2); }


/* ── 표 ───────────────────────────────────────────────────
 * 계측기 사양표는 축이 열 개를 넘는다. 좁은 화면에서 이것을 줄이려 들면
 * 반드시 값이 잘린다. 그래서 줄이지 않고 표 안에서만 가로로 민다.
 * 페이지 몸통은 그대로 두고, 밀 수 있다는 것을 그림자로 알린다.
 * ───────────────────────────────────────────────────────── */
.nb-u-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: var(--nb-bw) solid var(--nb-line);
  border-radius: var(--nb-r);
  background:
    linear-gradient(to right, var(--nb-surface) 30%, transparent) left / var(--nb-s6) 100% no-repeat,
    linear-gradient(to left,  var(--nb-surface) 30%, transparent) right / var(--nb-s6) 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--nb-shade), transparent) left / var(--nb-s3) 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, var(--nb-shade), transparent) right / var(--nb-s3) 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* 표를 옆으로 밀 수 있다는 안내.
   기본 규칙은 폭이다 — 넓으면 대개 안 넘치므로 감춘다.
   assets/js/tables.js 가 실제 넘침을 재고 나면 그 판정이 이긴다. */
.nb-u-scrollhint {
  margin: var(--nb-s1) 0 0;
  font-size: var(--nb-t-xs);
  color: var(--nb-ink-3);
}
@container nb-block (min-width: 1024px) {
  .nb-u-scrollhint { display: none; }
}
.nb-block[data-scroll="no"]  .nb-u-scrollhint { display: none; }
.nb-block[data-scroll="yes"] .nb-u-scrollhint { display: block; }

/* 사양표 기본형. instrument_spec · pivot_table · compare_table 이 함께 쓴다. */
.nb-spec { width: 100%; border-collapse: collapse; font-size: var(--nb-t-sm); }
.nb-spec th, .nb-spec td {
  padding: var(--nb-s2) var(--nb-s3);
  border-bottom: var(--nb-bw) solid var(--nb-line);
  text-align: left; vertical-align: top;
}
.nb-spec td { font-variant-numeric: tabular-nums; }
.nb-spec thead th {
  background: var(--nb-surface);
  border-bottom: var(--nb-bw-2) solid var(--nb-ink);
  /* 대문자로 바꾸지 않는다 — 영문 항목명("Center of measurement range")이 소리치듯 보였다 */
  font-size: var(--nb-t-xs); font-weight: 600;
  color: var(--nb-ink-2); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.nb-spec tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--nb-surface);
  white-space: nowrap;
  box-shadow: 1px 0 0 var(--nb-line);
}
.nb-spec thead th:first-child { position: sticky; left: 0; z-index: 3; }


/* ── 문서 목록 ─────────────────────────────────────────────
 * technical_data · document_siblings · document_index 가 함께 쓴다.
 * 모바일은 이름 한 줄 · 형식과 용량 아래 줄.
 * 한 줄에 밀어 넣으면 "CD22 데이터…" 로 잘려 무슨 문서인지 못 읽는다.
 * ───────────────────────────────────────────────────────── */
.nb-docs { list-style: none; margin: 0 0 var(--nb-s5); padding: 0; display: grid; gap: var(--nb-s2); }
.nb-docs a {
  display: grid; gap: 0;
  padding: var(--nb-s2) var(--nb-s3);
  min-height: var(--nb-ctl); align-content: center;
  border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r);
  text-decoration: none; color: var(--nb-ink);
}
.nb-docs a:hover { border-color: var(--nb-accent); background: var(--nb-surface-2); }
.nb-doc__name { font-weight: 500; min-width: 0; }
.nb-doc__meta {
  font-size: var(--nb-t-xs); color: var(--nb-ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@container nb-block (min-width: 640px) {
  .nb-docs a { display: flex; align-items: baseline; gap: var(--nb-s3); }
  .nb-doc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nb-doc__meta { margin-left: auto; }
}


/* ── 헤더 ─────────────────────────────────────────────────
 * 모든 폭에서 한 줄이다. 머리 줄의 누르는 것은 모두 44px(--nb-ctl) 이상.
 *   모바일(~639)     로고 · ☎ · 🔍 · 견적 문의 · ☰       🔍 를 누르면 아래 줄에 찾기칸이 펼쳐진다
 *   태블릿(640~1023) 로고 · 찾기칸 · 전화번호 · 견적 문의 · ☰ 메뉴
 *   PC(1024~)        로고 · 제품▾ 브랜드▾ 기술자료 · 납이 명함 · 찾기칸 · 견적 문의
 * 태블릿 · 모바일의 메뉴는 서랍이다(아래 "서랍 메뉴"). 국내 B2B 는 전화가 첫 연락 수단이라 전화는 어느 폭에서나 보인다.
 * ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--nb-ground) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--nb-bw) solid var(--nb-line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "brand act" "find find";
  align-items: center;
  gap: 0 var(--nb-s1);
  padding-block: var(--nb-s1);
}
.site-brand { grid-area: brand; display: inline-flex; align-items: center; min-height: var(--nb-ctl); }
/* 휴대폰 — 로고는 화면 폭을 따라 줄어든다. 104px 고정일 때 390px 에서 단추 넷(☎ · 검색 · 견적 문의 · ☰)에 밀려
   "NABTE" 로 잘렸다(2026-09-17 감사). 360px 폭에서도 단추 넷과 한 줄에 서는 값 */
.site-brand__logo { width: clamp(68px, 20vw, 104px); height: auto; display: block; }

.site-header__act { grid-area: act; display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.site-tel,
.site-find-toggle,
.site-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-s1);
  min-width: var(--nb-ctl); min-height: var(--nb-ctl); padding: 0;
  border: var(--nb-bw) solid var(--nb-line-2); border-radius: var(--nb-r);
  background: var(--nb-surface); color: var(--nb-ink);
  font: inherit; font-size: var(--nb-t-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.site-tel__n, .site-tel__sms, .site-menu-btn__label { display: none; }
.site-quote { min-height: var(--nb-ctl); padding-inline: var(--nb-s2); white-space: nowrap; }
@media (min-width: 640px) { .site-quote { padding-inline: var(--nb-s3); } }

/* 찾기칸 — 모바일은 돋보기를 눌러야 아래 줄에 펼쳐진다 */
.site-header__find { grid-area: find; display: none; min-width: 0; padding-block: var(--nb-s1); }
.site-header.is-finding .site-header__find { display: block; }

/* 제품 · 브랜드 · 기술자료 — PC 에서만. 태블릿 · 모바일은 서랍 */
.site-nav { grid-area: nav; display: none; }
.site-nav__list { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-nav__list > li { position: relative; }
.site-nav__list > li > a,
.site-pop > summary {
  display: inline-flex; align-items: center; gap: var(--nb-s1);
  min-height: var(--nb-ctl); padding: 0 var(--nb-s3);
  color: var(--nb-ink); text-decoration: none; font-size: var(--nb-t-base); font-weight: 600;
  border-bottom: var(--nb-bw-2) solid transparent; cursor: pointer; list-style: none;
}
.site-pop > summary::-webkit-details-marker { display: none; }
.site-pop > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.site-pop[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.site-nav a:hover, .site-pop > summary:hover { color: var(--nb-accent); }
.site-nav [aria-current="page"] { border-bottom-color: var(--nb-accent); color: var(--nb-accent); }

/* 펼침 — 항목 아래 (제품 메뉴는 아래 "제품 메뉴" 절이 머리 줄 폭으로 넓힌다) */
.site-pop__panel {
  position: absolute; left: 0; right: auto; top: calc(100% + var(--nb-s1)); min-width: 22rem;
  margin: 0; padding: var(--nb-s3) var(--nb-s4);
  background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r);
  box-shadow: 0 10px 24px -12px var(--nb-shade-2);
  list-style: none;
}
.site-pop__panel--brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--nb-s3); }
.site-pop__panel--brands a {
  display: flex; justify-content: space-between; align-items: baseline;
  min-height: var(--nb-ctl-sm); padding: var(--nb-s2) 0; border-bottom: var(--nb-bw) solid var(--nb-line);
  color: var(--nb-ink); text-decoration: none; font-weight: 600;
}
.site-pop__panel--brands span { font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.site-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-s2); }
.site-search input {
  min-width: 0; min-height: var(--nb-ctl); padding: var(--nb-s2) var(--nb-s3);
  border: var(--nb-bw-2) solid var(--nb-ink-3); border-radius: var(--nb-r);
  font: inherit; font-size: var(--nb-t-base); background: var(--nb-surface); color: var(--nb-ink);
}
.site-search .nb-btn--primary { width: auto; }

@media (min-width: 640px) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand find act"; gap: 0 var(--nb-s3); }
  .site-brand__logo { width: 120px; }
  .site-header__act { gap: var(--nb-s1); }
  .site-header__find { display: block; padding: 0; }
  .site-find-toggle { display: none; }
  .site-tel { border: 0; padding: 0 var(--nb-s1); background: none; }
  .site-tel__n { display: inline; font-weight: 700; font-variant-numeric: tabular-nums; }
  .site-menu-btn { padding: 0 var(--nb-s3); }
  .site-menu-btn__label { display: inline; }
}
@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand nav card find act";
    gap: 0 var(--nb-s4);
  }
  .site-brand__logo { width: 128px; }
  .site-nav { display: block; }
  .site-menu-btn { display: none; }
  .site-header__find { width: min(20rem, 22vw); }
  .site-tel__sms { display: inline; font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
  .site-tel__icon { color: var(--nb-accent); }
}

/* ── 납이 명함 ──────────────────────────────────────────────
 * PC 머리 줄의 전화 자리. 3초마다 한 번 뒤집힌다 — 앞은 "납이 대리 1533-6918", 뒤는 "문자 가능 1533-6918".
 * 예전 사이트의 명함 위젯(_nabi/namecard — 160×100 그림 두 장을 rotateY 로 돌렸다)을 옮겼다.
 * 이번에는 그림 대신 글자로 짰다 — 작게 줄여도 번호가 선명하고, 사진은 지금의 납이 얼굴이다.
 * 크기는 명함 비율(91 : 55 ≈ 1.75)에 맞춘 120 × 68. 머리 줄이 그만큼 높아진다.
 * 모바일 · 태블릿은 전화 아이콘(.site-tel)만 둔다. 돌리는 것은 js/site.js.
 * ─────────────────────────────────────────────────────── */
.nb-namecard { display: none; }
.nb-namecard__card {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--nb-flip, 0deg));
  transition: transform .6s ease;
}
.nb-namecard__face {
  position: absolute; inset: 0; overflow: hidden;
  display: grid;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--nb-surface); color: var(--nb-ink);
  border: var(--nb-bw) solid var(--nb-line-2);
  box-shadow: 2px 2px 0 var(--nb-shade-2);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.nb-namecard__face > :not(.nb-namecard__mark) { position: relative; }
.nb-namecard__face--front {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 0 var(--nb-s1); padding: var(--nb-s1);
}
.nb-namecard__face--back { transform: rotateY(180deg); place-content: center; justify-items: center; gap: 2px; }
/* 증명사진 칸 */
.nb-namecard__photo { grid-row: 1 / -1; overflow: hidden; background: var(--nb-line); }
/* 명함 전용 렌더(tools/nabi/card.py) — 사진 칸과 같은 42 : 58 로 찍어 얼굴이 증명사진 자리에 선다. 3배 크기로 넣었다. */
.nb-namecard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-namecard__who { display: grid; justify-items: end; align-content: start; }
.nb-namecard__who b { font-size: var(--nb-t-lg); font-weight: 800; letter-spacing: -.02em; }
.nb-namecard__who small { font-size: var(--nb-t-xs); color: var(--nb-ink-2); }
.nb-namecard__tel { justify-self: end; font-size: var(--nb-t-sm); font-weight: 800; letter-spacing: -.02em; }
.nb-namecard__face--back .nb-namecard__tel { justify-self: center; font-size: var(--nb-t-lg); }
.nb-namecard__sms { font-size: var(--nb-t-sm); font-weight: 800; }
/* 납텍 로고의 고리만 옅게 — 로고 그림의 왼쪽을 정사각형으로 잘라 쓴다 */
.nb-namecard__mark {
  position: absolute; right: var(--nb-s1); top: var(--nb-s1);
  width: 52px; height: 52px; object-fit: cover; object-position: 0 50%;
  opacity: .1; pointer-events: none;
}
.nb-namecard__face--back .nb-namecard__mark { inset: 0; margin: auto; }
.nb-namecard:hover .nb-namecard__face { border-color: var(--nb-accent); }
@media (prefers-reduced-motion: reduce) {
  .nb-namecard__card { transition: none; }
  .nb-namecard:hover .nb-namecard__card,
  .nb-namecard:focus-visible .nb-namecard__card { --nb-flip: 180deg; }
}
@media (min-width: 1024px) {
  .site-tel { display: none; }
  .nb-namecard { grid-area: card; display: block; width: 120px; height: 68px; perspective: 600px; text-decoration: none; }
}


/* ── 대화상자 ──────────────────────────────────────────────
 * 페이지를 떠나지 않고 띄우는 창 — 지금은 견적 문의 하나. 브라우저의 <dialog> 를 쓴다:
 * 열리면 뒤의 페이지는 누를 수 없고(모달), Esc 로 닫히고, 초점이 창 안에 머문다. 여는 것은 js/site.js.
 * 제목 줄은 고정하고 내용만 스크롤한다. 모바일에서는 화면을 꽉 채운다.
 * ─────────────────────────────────────────────────────── */
.nb-dialog {
  /* 폼 하나를 끝내는 창이라 지면처럼 넓히지 않는다 — 두 칸 나란히가 편한 너비(56rem)까지만 */
  width: min(56rem, calc(100% - 2 * var(--nb-pad-page)));
  max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--nb-ink);
}
.nb-dialog::backdrop { background: var(--nb-shade-2); }
.nb-dialog__win {
  position: relative;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 2 * var(--nb-s5));
  padding: var(--nb-s4);
  background: var(--nb-surface);
  border: var(--nb-bw) solid var(--nb-line-2);
  box-shadow: 0 16px 40px -16px var(--nb-shade-2);
}
.nb-dialog__title { flex: none; padding-right: var(--nb-ctl); }
.nb-dialog__body { flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain; }
.nb-dialog__x {
  position: absolute; top: var(--nb-s2); right: var(--nb-s2);
  display: grid; place-items: center;
  width: var(--nb-ctl-sm); height: var(--nb-ctl-sm); padding: 0;
  border: 0; background: none; color: var(--nb-ink);
  font: inherit; font-size: var(--nb-t-xl); line-height: 1; cursor: pointer;
}
html:has(.nb-dialog[open]) { overflow: hidden; }
@media (max-width: 639px) {
  .nb-dialog { width: 100%; height: 100dvh; margin: 0; }
  .nb-dialog__win { height: 100%; max-height: none; }
}


/* ── 제품 메뉴 — 대항목 → 카테고리 → 브랜드 ─────────────────────
 * 머리 줄 "제품" 을 열면 세 칸이 순서대로 선다 — 대항목 | 카테고리 | 브랜드 카드.
 * 카테고리 칸 안의 묶음 제목(검출 · 측정 · 판별)은 누르는 칸이 아니라 제목이다. 누르는 횟수는 늘지 않는다.
 * 브랜드 카드를 누르면 브랜드-카테고리 페이지로 간다. 시리즈 칩은 곧바로 시리즈로.
 * 마크업은 inc/finder.php, 고르기는 js/finder.js.
 * 모바일 · 태블릿 — 세 칸이 위에서 아래로: 대항목 단추 줄 → 카테고리 칩(묶음별 줄) → 브랜드.
 * PC — 대항목 13rem | 카테고리 17rem | 브랜드 나머지.
 * ─────────────────────────────────────────────────────── */
html:not(.nb-show-hidden) [data-nb-hidden] { display: none !important; }   /* 숨긴 브랜드 — 데모의 ?all 에서만 보인다 */

.site-pop__panel.nb-mega {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 0;
  max-height: calc(100dvh - 120px); overflow: auto;
}
.nb-mega__col {
  display: grid; align-content: start; gap: var(--nb-s1); min-width: 0;
  padding: var(--nb-s2) var(--nb-pad-page); border-bottom: var(--nb-bw) solid var(--nb-line);
}
/* 칸 제목은 스크롤에 딸려 올라가지 않는다 — 목록을 내려도 "지금 무엇을 고르는 중인지" 가 늘 보인다 */
.nb-mega__label {
  position: sticky; top: 0; z-index: 2; margin: 0;
  background: var(--nb-surface);
  font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .02em; color: var(--nb-ink-3);
}
.nb-mega__row { display: flex; flex-wrap: wrap; gap: var(--nb-s1); }
.nb-mega__list { display: grid; gap: var(--nb-s2); }
.nb-mega__list[hidden] { display: none; }
.nb-mega__family { display: grid; gap: var(--nb-s1); }
.nb-mega__family + .nb-mega__family { margin-top: var(--nb-s2); padding-top: var(--nb-s2); border-top: var(--nb-bw) solid var(--nb-line); }
.nb-mega__fname { margin: 0; font-size: var(--nb-t-xs); font-weight: 700; color: var(--nb-ink-2); }
/* 묶음의 물음("있는지 잡는다")은 제목 옆이 아니라 아랫줄로 — 좁은 칸에서 제목과 엉키지 않는다 */
.nb-mega__fname small { display: block; margin-top: 1px; font-size: inherit; font-weight: 400; color: var(--nb-ink-3); }
.nb-mega__dom,
.nb-mega__type {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-s2);
  min-height: var(--nb-ctl-sm); padding: 0 var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-line-2); background: var(--nb-surface); color: var(--nb-ink);
  font: inherit; font-size: var(--nb-t-sm); font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer;
}
/* 개수는 오른쪽 끝에 자릿수를 맞춰 세운다 — 줄마다 숫자가 같은 자리에 선다 */
.nb-mega__dom small,
.nb-mega__type small { flex: none; min-width: 3ch; text-align: right; font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-mega__dom:hover,
.nb-mega__type:hover { background: var(--nb-accent-soft); }
.nb-mega__dom[aria-current="true"],
.nb-mega__type[aria-current="true"] { background: var(--nb-accent); border-color: var(--nb-accent); color: var(--nb-on-accent); }
.nb-mega__dom[aria-current="true"] small,
.nb-mega__type[aria-current="true"] small { color: var(--nb-on-accent-2); }
.nb-mega__every { display: none; }
/* 손가락 화면 — 대항목 · 카테고리 단추도 44px (첫 화면의 세 칸이 모바일에서 이 모양이다) */
@media (max-width: 1023px) {
  .nb-mega__dom,
  .nb-mega__type { min-height: var(--nb-ctl); }
  .nb-mega__all, .nb-mega__go { display: inline-flex; align-items: center; min-height: var(--nb-ctl); }
}

.nb-mega__pane { display: grid; gap: var(--nb-s3); align-content: start; padding: var(--nb-s4) var(--nb-pad-page); }
.nb-mega__pane[hidden] { display: none; }
/* 칸 머리 + 고른 카테고리 — 한 상자다.
   "3 브랜드" 와 그 아래 "온도센서 · 설명" 이 따로 떠 있으면 어느 머리에 딸린 설명인지 눈이 한 번 더 묻는다.
   머리 줄은 상자의 제목 띠다 — 안쪽 여백을 거슬러 올라가 상자 끝까지 펴고 아래에 금을 긋는다. */
.nb-mega__intro { display: grid; gap: var(--nb-s2); padding: var(--nb-s3); border: var(--nb-bw) solid var(--nb-line); background: var(--nb-surface); }
.nb-mega__intro > .nb-mega__label {
  position: static; margin: calc(var(--nb-s3) * -1) calc(var(--nb-s3) * -1) 0;
  padding: var(--nb-s2) var(--nb-s3); border-bottom: var(--nb-bw) solid var(--nb-line);
  background: var(--nb-surface-2);
}
.nb-mega__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nb-s1) var(--nb-s4); }
.nb-mega__title { margin: 0; font-size: var(--nb-t-lg); font-weight: 700; letter-spacing: -.01em; }
.nb-mega__all, .nb-mega__go { font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-accent); text-underline-offset: 3px; }
.nb-mega__all::after, .nb-mega__go::after { content: " \2192"; }
.nb-mega__sum { margin: 0; max-width: var(--nb-measure); font-size: var(--nb-t-sm); color: var(--nb-ink-2); }
.nb-mega__step { margin: var(--nb-s1) 0 0; font-size: var(--nb-t-xs); font-weight: 700; color: var(--nb-ink-3); }
.nb-mega__brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-gutter); }
/* 열을 minmax(0, 1fr) 로 못 박는다 — 기본(auto)이면 줄바꿈 없는 칩 줄의 길이만큼 열이 늘어나,
   카드 테두리는 그대로인데 로고 · 이름 · 칩이 카드 밖으로 삐져나갔다 */
.nb-mega__brand { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: var(--nb-s2); min-width: 0; padding: var(--nb-s3); border: var(--nb-bw) solid var(--nb-line); background: var(--nb-surface); }
.nb-mega__logo { display: grid; place-items: center; height: var(--nb-ctl); background: var(--nb-surface); }
.nb-mega__logo img { display: block; width: 140px; height: 36px; object-fit: contain; }
.nb-mega__bname { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--nb-s2); }
.nb-mega__bname a { font-weight: 750; color: var(--nb-ink); text-decoration: none; }
.nb-mega__bname a:hover { color: var(--nb-accent); text-decoration: underline; }
.nb-mega__bname small { font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-mega__series { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: start; gap: var(--nb-s1); }
/* 이름이 길면(RYMASKON(R) 1000 Controller) 칩 하나가 줄을 통째로 먹어, 카드가 칸 밖으로 자란다.
   폭을 잘라 두면 한 줄에 둘씩 서고, 칸이 스크롤 없이 끝난다. 전체 이름은 title 로 남는다. */
.nb-mega__series a {
  display: inline-flex; align-items: center; min-height: 28px; max-width: 14rem; padding: 0 var(--nb-s2);
  border: var(--nb-bw) solid var(--nb-line-2); background: var(--nb-surface); color: var(--nb-ink);
  font-family: var(--nb-mono); font-size: var(--nb-t-xs); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-mega__series a:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-mega__go { justify-self: start; }

@media (min-width: 640px) {
  .nb-mega__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* 펼침을 "제품" 항목이 아니라 머리 줄 본문 폭에 맞춘다 — 넓은 판이라 항목 아래에 두면 화면 밖으로 나간다 */
  .site-header__inner { position: relative; }
  .site-nav__list > li.site-nav__products { position: static; }
  .site-pop__panel.nb-mega {
    left: var(--nb-pad-page); right: var(--nb-pad-page); top: calc(100% + 1px); min-width: 0;
    grid-template-columns: 13rem 17rem minmax(0, 1fr);
    max-height: min(36rem, calc(100dvh - 120px)); overflow: hidden; padding: 0;
  }
  /* 두 목록 칸 — 위아래로 줄이 서는 목록 상자. 칸마다 따로 스크롤한다 */
  .nb-mega__col { display: block; overflow: auto; padding: var(--nb-s2); border-bottom: 0; border-right: var(--nb-bw) solid var(--nb-line); }
  .nb-mega__label { margin: var(--nb-s1) var(--nb-s2) var(--nb-s2); }
  .nb-mega__row { display: block; }
  .nb-mega__dom,
  .nb-mega__type { width: 100%; border-color: transparent; }
  .nb-mega__family + .nb-mega__family { margin-top: var(--nb-s2); padding-top: var(--nb-s2); border-top: 1px solid var(--nb-line); }
  .nb-mega__fname { margin: 0 var(--nb-s2) var(--nb-s1); }
  .nb-mega__every { display: block; margin: var(--nb-s3) var(--nb-s2) var(--nb-s1); font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-accent); }
  .nb-mega__pane { overflow: auto; padding: var(--nb-s4) var(--nb-s5); }
  /* 브랜드 칸이 두 목록만큼 좁아졌다 — 카드 폭을 지키고 들어가는 만큼 세운다 */
  .nb-mega__brands { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}


/* ── 찾기칸 — 머리 줄 · 첫 화면 ────────────────────────────
 * 창을 띄우지 않는다. 치면 칸 바로 아래에 목록이 선다 — 품번 · 시리즈 · 제품 종류 · 브랜드 무리.
 * Enter 는 고른 것으로, 고른 것이 없으면 검색 결과 페이지로(보통 폼). 여닫기는 js/finder.js.
 * 목록은 칸의 폭을 따르되 PC 머리 줄에서는 30rem 까지 넓힌다(오른쪽 끝에 맞춰 왼쪽으로 편다).
 * ─────────────────────────────────────────────────────── */
.site-find { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.site-find__input {
  min-width: 0; min-height: var(--nb-ctl); padding: 0 var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-field); border-right: 0; border-radius: var(--nb-r) 0 0 var(--nb-r);
  background: var(--nb-surface); color: var(--nb-ink);
  font: inherit; font-size: max(16px, var(--nb-t-sm));   /* 16px 미만이면 iOS 가 칸을 누를 때 화면을 확대한다 */
}
.site-find__go {
  display: grid; place-items: center; min-width: var(--nb-ctl); min-height: var(--nb-ctl); padding: 0;
  border: var(--nb-bw) solid var(--nb-field); border-radius: 0 var(--nb-r) var(--nb-r) 0;
  background: var(--nb-surface); color: var(--nb-ink-2); cursor: pointer;
}
.site-find__pop {
  position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0;
  max-height: min(30rem, 70dvh); overflow: auto; overscroll-behavior: contain;
  background: var(--nb-surface); color: var(--nb-ink);
  border: var(--nb-bw) solid var(--nb-line-2); box-shadow: 0 12px 28px -12px var(--nb-shade-2);
}
.site-find__pop[hidden] { display: none; }
.site-find__list { list-style: none; margin: 0; padding: var(--nb-s1) 0; }
.site-find__group { padding: var(--nb-s2) var(--nb-s3) var(--nb-s1); font-size: var(--nb-t-xs); font-weight: 700; color: var(--nb-ink-3); }
.site-find__opt a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 var(--nb-s3);
  min-height: var(--nb-ctl); padding: var(--nb-s1) var(--nb-s3);
  color: var(--nb-ink); text-decoration: none;
}
.site-find__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.site-find__opt--model .site-find__name,
.site-find__opt--series .site-find__name { font-family: var(--nb-mono); }
.site-find__kind { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--nb-t-xs); color: var(--nb-ink-3); white-space: nowrap; }
.site-find__meta { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
.site-find__opt mark { background: var(--w-tip); color: inherit; }
.site-find__opt[aria-selected="true"] a { background: var(--nb-accent); color: var(--nb-on-accent); }
.site-find__opt[aria-selected="true"] :is(.site-find__meta, .site-find__kind) { color: var(--nb-on-accent-2); }
.site-find__opt[aria-selected="true"] mark { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.site-find__foot {
  display: flex; justify-content: space-between; gap: var(--nb-s3); margin: 0; padding: var(--nb-s2) var(--nb-s3);
  border-top: var(--nb-bw) solid var(--nb-line); font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums;
}
.site-find__foot:empty { display: none; }
.site-find__hint { display: none; }
@media (pointer: fine) { .site-find__hint { display: inline; } }
@media (min-width: 1024px) {
  .site-header .site-find__pop { left: auto; width: max(100%, 30rem); }
}


/* ── 서랍 메뉴 — 태블릿 · 모바일 ────────────────────────────
 * 머리 줄 ☰ 로 연다. 층을 한 화면씩 들어간다 — 메뉴 → 대항목 → 카테고리 → 브랜드.
 * 한 화면에 한 층만 있어서, 지금 무엇을 고르는 중인지가 제목 줄에 늘 보인다. ‹ 뒤로 로 한 층 올라간다.
 * 줄 높이는 48px — 손가락으로 고르는 자리다. 여닫기 · 층 이동은 js/site.js.
 * PC(1024~)에서는 쓰지 않는다 — 머리 줄의 세 칸 메뉴가 같은 일을 한다.
 * ─────────────────────────────────────────────────────── */
.nb-drawer { position: fixed; inset: 0; z-index: 70; }
.nb-drawer[hidden] { display: none; }
.nb-drawer__scrim { position: absolute; inset: 0; background: var(--nb-shade-2); }
.nb-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 100%);
  display: flex; flex-direction: column;
  background: var(--nb-surface); color: var(--nb-ink);
  box-shadow: -12px 0 32px -16px var(--nb-shade-2);
}
.nb-drawer__bar {
  flex: none; display: grid; grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) minmax(5rem, auto); align-items: center; gap: var(--nb-s2);
  min-height: 56px; padding: 0 var(--nb-s2); border-bottom: var(--nb-bw) solid var(--nb-line);
}
.nb-drawer__title { grid-column: 2; margin: 0; text-align: center; font-size: var(--nb-t-lg); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-drawer__back,
.nb-drawer__x {
  min-width: var(--nb-ctl); min-height: var(--nb-ctl); padding: 0 var(--nb-s2);
  border: 0; background: none; color: var(--nb-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.nb-drawer__back { grid-column: 1; justify-self: start; }
.nb-drawer__back[hidden] { display: block; visibility: hidden; }   /* 자리를 지켜 제목이 옆으로 흔들리지 않게 */
.nb-drawer__x { grid-column: 3; justify-self: end; font-size: var(--nb-t-xl); line-height: 1; }
.nb-drawer__views { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.nb-drawer__view { display: grid; gap: var(--nb-s2); align-content: start; padding: var(--nb-s3) var(--nb-s3) var(--nb-s6); }
.nb-drawer__view[hidden] { display: none; }
.nb-drawer__label { margin: var(--nb-s2) 0 0; font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .02em; color: var(--nb-ink-3); }
.nb-drawer__fname { margin: var(--nb-s3) 0 0; font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-ink-2); }
.nb-drawer__fname small { margin-left: var(--nb-s1); font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); }
.nb-drawer__list { list-style: none; margin: 0; padding: 0; border-top: var(--nb-bw) solid var(--nb-line); }
.nb-drawer__row {
  display: flex; align-items: center; gap: var(--nb-s2); width: 100%; min-height: 48px; padding: 0 var(--nb-s2);
  border: 0; border-bottom: var(--nb-bw) solid var(--nb-line); background: none; color: var(--nb-ink);
  font: inherit; font-size: var(--nb-t-md); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.nb-drawer__row > span { flex: 1 1 auto; min-width: 0; }
.nb-drawer__row small { font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
button.nb-drawer__row::after { content: "\203A"; font-size: var(--nb-t-lg); color: var(--nb-ink-3); }   /* › 한 층 더 들어간다 */
.nb-drawer__row:hover,
.nb-drawer__row:focus-visible { background: var(--nb-accent-soft); }
.nb-drawer__brands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nb-s2); }
.nb-drawer__brand {
  display: flex; align-items: center; gap: var(--nb-s3); min-height: 64px; padding: var(--nb-s2);
  border: var(--nb-bw) solid var(--nb-line-2); background: var(--nb-surface); color: var(--nb-ink); text-decoration: none;
}
.nb-drawer__brand::after { content: "\203A"; margin-left: auto; font-size: var(--nb-t-lg); color: var(--nb-ink-3); }
.nb-drawer__logo { flex: none; display: grid; place-items: center; width: 96px; height: 40px; background: var(--w-light); font-weight: 700; }
.nb-drawer__logo img { width: 100%; height: 100%; object-fit: contain; }
.nb-drawer__bn { display: grid; min-width: 0; }
.nb-drawer__bn small { font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-drawer__all { justify-self: start; display: inline-flex; align-items: center; min-height: var(--nb-ctl); font-size: var(--nb-t-sm); font-weight: 700; }
.nb-drawer__contact { display: grid; gap: var(--nb-s2); margin-top: var(--nb-s4); }
.nb-drawer__contact .nb-btn { min-height: 48px; }
html.nb-drawer-open { overflow: hidden; }
@media (min-width: 1024px) { .nb-drawer { display: none !important; } }


/* ── 견적 줄 — 제품 페이지 · 태블릿 · 모바일 ────────────────
 * 제품 헤드의 구매 상자가 화면 밖으로 나가면 화면 아래에 붙는다. 고른 모델이 따라온다(js/site.js).
 * 떠 있는 납이는 태블릿 · 모바일에 서지 않는다 — 이 줄이 그 자리의 할 일(견적으로 가기)을 맡는다.
 * ─────────────────────────────────────────────────────── */
.nb-buybar { display: none; }
@media (max-width: 1023px) {
  .nb-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: var(--nb-s3);
    padding: var(--nb-s2) var(--nb-pad-page) calc(var(--nb-s2) + env(safe-area-inset-bottom));
    background: var(--nb-surface); border-top: var(--nb-bw) solid var(--nb-line-2);
    transform: translateY(110%); transition: transform .2s ease;
  }
  .nb-buybar.is-away { transform: none; }
  .nb-buybar__what { min-width: 0; margin: 0; display: grid; font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
  .nb-buybar__what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--nb-mono); font-size: var(--nb-t-md); color: var(--nb-ink); }
  .nb-buybar .nb-btn { flex: none; min-height: var(--nb-ctl); }
  body:has(.nb-buybar) .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .nb-buybar { transition: none; } }


/* ── 푸터 ─────────────────────────────────────────────────
 * 위: 사이트 지도(유형 · 브랜드) — 모든 페이지에서 유형 허브로 링크가 흐른다.
 * 아래: 사업자 정보 · 거래처 등록 서류.
 * 지도는 4열이다 — 12칸의 약수라 본문 격자 선 위에 선다.
 * ───────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--nb-s7); padding: var(--nb-s6) 0 var(--nb-s7);
  border-top: var(--nb-bw) solid var(--nb-line); background: var(--nb-surface-2);
  color: var(--nb-ink-2); font-size: var(--nb-t-sm);
}
.site-footer__inner { display: grid; gap: var(--nb-s6); }
.site-footer__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-s5) var(--nb-gutter); }
.site-footer__h { margin: 0 0 var(--nb-s2); font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .04em; color: var(--nb-ink); }
.site-footer__col ul { list-style: none; margin: 0 0 var(--nb-s4); padding: 0; display: grid; gap: 0; }
.site-footer__col a { display: inline-block; padding: var(--nb-s1) 0; color: var(--nb-ink-2); text-decoration: none; }
.site-footer__col a:hover { color: var(--nb-accent); text-decoration: underline; }
.site-footer__co { display: grid; gap: var(--nb-s1); padding-top: var(--nb-s5); border-top: var(--nb-bw) solid var(--nb-line); }
.site-footer__co p { margin: 0; }
.site-footer__co a { color: inherit; }
.site-footer__logo { width: 96px; height: auto; margin-bottom: var(--nb-s2); opacity: .85; }
.site-footer__docs a { margin-left: var(--nb-s2); font-weight: 600; color: var(--nb-accent); }
.site-footer__copy { margin-top: var(--nb-s2) !important; color: var(--nb-ink-3); }

@media (min-width: 640px) {
  .site-footer__map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ── 접근성 ────────────────────────────────────────────── */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--nb-s3); top: var(--nb-s3); z-index: 100;
  background: var(--nb-surface); padding: var(--nb-s2) var(--nb-s3); border: var(--nb-bw-2) solid var(--nb-accent);
  width: auto; height: auto; clip: auto; clip-path: none;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--nb-bw-2) solid var(--nb-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── 결과 없음 ─────────────────────────────────────────────
 * 검색 · 목록이 비었을 때. 빈 화면 대신 다음 길을 보여 준다 (P0-6).
 * 길은 2열이다 — 모든 티어 칸 수의 약수.
 * ───────────────────────────────────────────────────────── */
.nb-empty {
  margin: var(--nb-s4) 0 var(--nb-s6);
  padding: var(--nb-s5);
  border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r); background: var(--nb-surface-2);
}
/* 납이 얼굴 — 렌더가 투명 원이라 테두리 · 배경이 필요 없다. 글 옆에 붙는 작은 그림이라 줄어들지 않게 */
.nb-nabi-img { flex: none; }
.nb-empty__head { display: flex; gap: var(--nb-s3); align-items: center; margin-bottom: var(--nb-s3); }
.nb-empty__head .nb-u-h2 { margin: 0; }
.nb-empty__why { margin: 0 0 var(--nb-s4); color: var(--nb-ink-2); font-size: var(--nb-t-md); max-width: var(--nb-measure); }
.nb-empty__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nb-s2); }
.nb-empty__way {
  display: flex; align-items: center; gap: var(--nb-s2); min-height: var(--nb-ctl); padding: var(--nb-s2) var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r); background: var(--nb-surface);
  color: var(--nb-ink); text-decoration: none; font-weight: 600;
}
.nb-empty__way:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
/* 견적 문의는 공용 단추 그대로 — 칸을 채우고 글자는 다른 길들과 같은 왼쪽에서 시작한다 */
.nb-empty__quote { width: 100%; min-height: var(--nb-ctl); justify-content: flex-start; padding-inline: var(--nb-s3); }
@container nb-block (min-width: 640px) {
  .nb-empty__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .nb-empty__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nb-empty__similar { margin: 0 0 var(--nb-s4); display: flex; flex-wrap: wrap; gap: var(--nb-s2); align-items: center; font-size: var(--nb-t-md); color: var(--nb-ink-2); }
.nb-empty__similar a { display: inline-flex; align-items: center; min-height: var(--nb-ctl-sm); text-decoration: none; }
.nb-empty__similar a .nb-model { font-size: var(--nb-t-md); padding: var(--nb-s1) var(--nb-s2); color: var(--nb-accent); border-color: var(--nb-line-2); }
.nb-empty__similar a:hover .nb-model { border-color: var(--nb-accent); }


/* ── 페이지 번호 ───────────────────────────────────────────
 * 9×21px 로 손가락에 너무 작았다 (검토자 E) → 컨트롤 높이 칸.
 * ───────────────────────────────────────────────────────── */
.nb-pager .nav-links { display: flex; flex-wrap: wrap; gap: var(--nb-s2); margin-top: var(--nb-s5); }
.nb-pager .page-numbers {
  display: inline-grid; place-items: center; min-width: var(--nb-ctl); min-height: var(--nb-ctl); padding: 0 var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-line-2); border-radius: var(--nb-r);
  color: var(--nb-ink); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nb-pager a.page-numbers:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-pager .page-numbers.current { background: var(--nb-accent); border-color: var(--nb-accent); color: var(--nb-on-accent); }
.nb-pager .page-numbers.dots { border-color: transparent; }


/* ── 검색칸 — 기술자료 허브 · 검색 결과가 같은 모양 ──────────── */
.nb-searchbar { display: flex; gap: var(--nb-s2); margin: 0 0 var(--nb-s4); max-width: 40rem; }
.nb-searchbar input[type="search"] {
  flex: 1; min-width: 0; min-height: var(--nb-ctl-lg); padding: var(--nb-s2) var(--nb-s3);
  font: inherit; font-size: var(--nb-t-base); color: var(--nb-ink); background: var(--nb-surface);
  border: var(--nb-bw-2) solid var(--nb-ink-3); border-radius: var(--nb-r);
}
.nb-searchbar input[type="search"]:focus-visible { border-color: var(--nb-accent); outline: 0; }
.nb-searchbar .nb-btn { width: auto; min-height: var(--nb-ctl-lg); padding-inline: var(--nb-s5); }


/* ── 기술자료 허브 머리 (P1-4) ─────────────────────────────── */
.nb-dh { margin: 0 0 var(--nb-s5); }
.nb-dh__lead { margin: 0 0 var(--nb-s4); color: var(--nb-ink-2); max-width: var(--nb-measure); }
.nb-dh__facets { display: grid; gap: var(--nb-s3); padding: var(--nb-s4) 0; border-block: var(--nb-bw) solid var(--nb-line); }
.nb-dh__row { display: grid; gap: var(--nb-s2); }
.nb-dh__label { font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .04em; color: var(--nb-ink-3); }
.nb-dh__status { margin: var(--nb-s4) 0 0; font-size: var(--nb-t-md); color: var(--nb-ink-2); }
.nb-dh__status a { margin-left: var(--nb-s2); color: var(--nb-accent); font-weight: 600; }
@media (min-width: 640px) {
  .nb-dh__row { grid-template-columns: var(--nb-s8) minmax(0, 1fr); align-items: baseline; }
}


/* ── 검색 결과 (P1-3) ──────────────────────────────────────── */
.nb-sr { margin: 0 0 var(--nb-s5); }
.nb-sr__hints { display: grid; gap: var(--nb-s2); margin: 0 0 var(--nb-s5); padding: var(--nb-s4);
  border: var(--nb-bw) solid var(--nb-line); border-radius: var(--nb-r); background: var(--nb-surface-2); }
.nb-sr__hint { display: grid; gap: var(--nb-s2); }
.nb-sr__hint > span { font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .04em; color: var(--nb-ink-3); }
@media (min-width: 640px) { .nb-sr__hint { grid-template-columns: var(--nb-s8) minmax(0, 1fr); align-items: baseline; } }
.nb-sr__docs { margin: var(--nb-s5) 0 0; }


/* ─────────────────────────────────────────────────────────
 *  머리 줄 제품 메뉴 — 브랜드 | 카테고리 (2026-09-16)
 *
 *  첫 화면이 "대항목 → 카테고리 → 브랜드" 세 칸을 편다. 머리 줄은 겹치지 않게
 *  **브랜드로 들어가는 길** 하나만 맡는다. 왼쪽 브랜드, 오른쪽 그 브랜드의 카테고리.
 *  카테고리를 누르면 브랜드-카테고리 페이지 — 시리즈는 그 페이지 안에서 고른다.
 *  마크업 inc/finder.php · 고르기 js/finder.js.
 * ───────────────────────────────────────────────────────── */
.site-pop__panel.nb-bm {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 0;
  max-height: calc(100dvh - 120px); overflow: auto;
}
.nb-bm__col {
  display: grid; align-content: start; gap: var(--nb-s1); min-width: 0;
  padding: var(--nb-s2) var(--nb-pad-page); border-bottom: var(--nb-bw) solid var(--nb-line);
}
.nb-bm__label { margin: 0; font-size: var(--nb-t-xs); font-weight: 700; letter-spacing: .02em; color: var(--nb-ink-3); }
.nb-bm__row { display: flex; flex-wrap: wrap; gap: var(--nb-s1); }
.nb-bm__brand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-s2);
  min-height: var(--nb-ctl); padding: 0 var(--nb-s3); width: 100%;
  border: var(--nb-bw) solid transparent; background: none; color: var(--nb-ink);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.nb-bm__brand small { font-weight: 400; font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-bm__brand:hover { border-color: var(--nb-line-2); color: var(--nb-accent); }
.nb-bm__brand[aria-current="true"] { background: var(--nb-accent); color: var(--nb-on-accent); }
.nb-bm__brand[aria-current="true"] small { color: var(--nb-on-accent-2); }
.nb-bm__every { justify-self: start; min-height: var(--nb-ctl-sm); display: inline-flex; align-items: center; font-size: var(--nb-t-sm); font-weight: 600; }

.nb-bm__pane { display: grid; align-content: start; gap: var(--nb-s3); min-width: 0; padding: var(--nb-s4) var(--nb-pad-page); }
.nb-bm__pane[hidden] { display: none; }
.nb-bm__head { display: grid; gap: var(--nb-s2); align-items: center; }
.nb-bm__logo { display: grid; place-items: center; width: 140px; height: 44px; background: var(--w-light, var(--nb-surface)); cursor: pointer; }
.nb-bm__logo img { max-width: 120px; max-height: 36px; object-fit: contain; }
.nb-bm__title { margin: 0; font-size: var(--nb-t-lg); font-weight: 700; }
.nb-bm__title small { margin-left: var(--nb-s2); font-size: var(--nb-t-xs); font-weight: 400; color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-bm__page { font-size: var(--nb-t-sm); font-weight: 600; }
.nb-bm__dom { margin: 0; font-size: var(--nb-t-xs); font-weight: 700; color: var(--nb-ink-2); }
.nb-bm__types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-s1); }
.nb-bm__types a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-s2);
  min-height: var(--nb-ctl); padding: 0 var(--nb-s3);
  border: var(--nb-bw) solid var(--nb-line-2); background: var(--nb-surface);
  color: var(--nb-ink); font-size: var(--nb-t-sm); font-weight: 600; text-decoration: none;
}
.nb-bm__types a:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-bm__types small { font-weight: 400; font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .site-pop__panel.nb-bm {
    left: var(--nb-pad-page); right: var(--nb-pad-page); top: calc(100% + 1px); min-width: 0;
    grid-template-columns: 15rem minmax(0, 1fr);
    max-height: min(32rem, calc(100dvh - 120px)); overflow: hidden; padding: 0;
  }
  .nb-bm__col { display: block; overflow: auto; padding: var(--nb-s2); border-bottom: 0; border-right: var(--nb-bw) solid var(--nb-line); }
  .nb-bm__label { margin: var(--nb-s1) var(--nb-s2) var(--nb-s2); }
  .nb-bm__pane { overflow: auto; padding: var(--nb-s4) var(--nb-s5); }
  .nb-bm__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nb-bm__types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ─────────────────────────────────────────────────────────
 *  누르는 자리의 최소 크기 (2026-09-16 점검)
 *
 *  글 속에 섞인 링크는 그대로 둔다(문장 안에서 커지면 줄 간격이 흔들린다).
 *  홀로 서는 링크 — 이동 경로 · "전체 보기" · 카드 제목 · 근거 링크 — 는 24px 을 채운다.
 *  라디오는 상자 자체를 24px 로 — 목록에서 손가락으로 고르는 자리다.
 * ───────────────────────────────────────────────────────── */
/* 홀로 서는 링크 — 클래스가 링크 자신에 붙기도 하고 감싼 칸에 붙기도 해서 둘 다 받는다 */
:where(.nb-crumbs, .nb-pd__guide, .nb-pd__kicker, .nb-oc__foot, .nb-td__all, .nb-am__gloss,
       .nb-yt__title, .nb-lm__name, .nb-bn__ask, .nb-pdf, .site-footer__co, .nb-spec,
       .nb-bs__go, .nb-yt__channel, .nb-pd__brand, .nb-bn__src, .nb-mega__every,
       .nb-mega__all, .nb-mega__go, .nb-sd__src, .nb-bm__page) a,
a:where(.nb-bs__go, .nb-yt__title, .nb-yt__channel, .nb-pd__brand, .nb-bn__src, .nb-bn__ask,
        .nb-mega__every, .nb-mega__all, .nb-mega__go, .nb-sd__src, .nb-bm__page, .nb-pdf, .nb-lm__name) {
  display: inline-flex; align-items: center; min-height: 24px; min-width: 24px;
}

/* 본문 글 안의 링크 — 줄 안에 흐르므로 inline-flex 로 키우면 글줄이 어긋난다.
   위아래 안쪽 여백만 주어 손가락이 닿는 높이(24px)를 만든다. 글자 위치는 그대로다. */
.nb-u-prose a { padding-block: 2px; }

/* ── 시리즈 칩 (부품) ────────────────────────────────────────
 * 용도 색인 · 고르기 마법사 · 구매 점검표가 같은 헬퍼(nabtek_series_chips)로 그린다. 모양도 여기 한 곳이다.
 *   높이 고정 32px — 이름이 길어도 줄을 바꾸지 않고 말줄임으로 자른다(전체 이름은 title).
 *   줄은 위로 붙는다(align-items: flex-start) — 기본 stretch 면 긴 칩 하나에 줄 전체가 늘어났다.
 *   앞말(→ · 관련 시리즈)은 칩과 같은 높이 상자라 가운데 선이 첫 칩과 맞는다.
 * ───────────────────────────────────────────────────────── */
.nb-chiprow { margin: 0; display: flex; align-items: flex-start; gap: var(--nb-s1) var(--nb-s2); min-width: 0; }
.nb-chiprow__chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nb-s1); }
.nb-chip__lead {
  flex: none; display: inline-flex; align-items: center; height: 32px;
  font-size: var(--nb-t-xs); font-weight: 700; color: var(--nb-ink-3);
}
.nb-chip__lead[aria-hidden="true"] { font-size: var(--nb-t-sm); color: var(--nb-accent); }
.nb-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; height: 32px; max-width: 100%; min-width: 0;
  padding: 0 var(--nb-s2); border: var(--nb-bw) solid var(--nb-line-2); background: var(--nb-surface);
  font-family: var(--nb-mono); font-size: var(--nb-t-xs); font-weight: 700; line-height: 1; color: var(--nb-ink);
  text-decoration: none; white-space: nowrap;
}
.nb-chip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.nb-chip:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-chips__more { border-style: dashed; color: var(--nb-ink-2); cursor: pointer; }
.nb-chips__more:hover { border-style: solid; border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-chips__more:focus-visible { outline: 1px dotted var(--nb-ink); outline-offset: 2px; }
.nb-chips__more { font-family: inherit; }
[data-nb-chips] [hidden] { display: none; }

/* 창 첫 줄 — 창 제목이 이름(사양표 · 자료실)이 되면서, 그 창이 무엇을 하는지는 이 한 줄이 말한다.
   블록마다 따로 만들던 머리말(.nb-sd__lead · .nb-sc__lead)과 같은 값이다. */
.nb-u-lead { margin: 0 0 var(--nb-s3); max-width: var(--nb-measure); font-size: var(--nb-t-sm); color: var(--nb-ink-3); }

/* ── 흐르는 이름 (잘린 칩) ───────────────────────────────────
 * 칩 폭에 잘린 이름은 말줄임(…)으로 둔다. 마우스를 올리거나 키보드로 고르면 그때만 옆으로 흘러
 * 나머지를 보여 주고, 떼면 제자리로 돌아온다. 늘 흐르게 두면 칩 여럿이 한꺼번에 움직여 산만하고,
 * 멈출 수 없는 움직임은 접근성 기준(WCAG 2.2.2)에도 걸린다.
 * 흐를 거리(--nb-run)는 site.js 가 올린 순간에 잰다 — 숨은 판 안에서는 폭이 0 이라 미리 잴 수 없다.
 * ───────────────────────────────────────────────────────── */
.nb-run { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-run__t { display: inline; }
.nb-run.is-long:is(:hover, :focus-visible) { text-overflow: clip; }
.nb-run.is-long:is(:hover, :focus-visible) .nb-run__t {
  display: inline-block; transform: translateX(var(--nb-run, 0));
  transition: transform var(--nb-run-t, 2s) linear .35s;
}
/* 칩(a)에 올렸거나 칩이 초점을 받았을 때 — 흐르는 글자 상자가 칩 안쪽 한 겹 아래에 있는 경우 */
:is(a, button):is(:hover, :focus-visible) > .nb-run.is-long { text-overflow: clip; }
:is(a, button):is(:hover, :focus-visible) > .nb-run.is-long .nb-run__t {
  display: inline-block; transform: translateX(var(--nb-run, 0));
  transition: transform var(--nb-run-t, 2s) linear .35s;
}
@media (prefers-reduced-motion: reduce) {
  .nb-run .nb-run__t { transform: none !important; transition: none !important; }
}

/* ── 바탕화면 (스크립트가 붙었을 때만 · site.js "바탕화면") ─────────────
 * 제품 전체 · 유형 · 브랜드-카테고리 페이지의 창들을 바탕화면 위 프로그램으로 둔다.
 *   바탕   남색 면 + 메인 배너의 물결 무늬를 흐리게. 화면 폭 끝까지 편다(메인 배너와 같은 --nb-vw 셈).
 *   아이콘 PC · 태블릿은 왼쪽 세로줄(스크롤해도 따라온다), 휴대폰은 창 위 가로줄.
 *   창     한 번에 하나. 바탕 위에 그림자를 떨어뜨려 "떠 있는 창" 으로 읽힌다.
 * 색은 95 토큰만 쓴다 — 새 HEX 없음.
 * ───────────────────────────────────────────────────────── */
.nb-desk {
  --nb-desk-vw: var(--nb-vw, 100vw);
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: calc(50% - var(--nb-desk-vw) / 2);
  padding: var(--nb-s4) max(var(--nb-pad-page), calc(var(--nb-desk-vw) / 2 - 588px)) var(--nb-s6);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-s3);
  /* 바탕 색 — 밝은 무채색(사용자 결정 2026-09-16).
     처음 남색 원색은 눈이 아팠고, 남회색으로 낮춘 뒤에도 브랜드 배너(RKC 빨강 · S+S 청록 · OPTEX 빨강)와 색끼리 부딪혔다.
     색을 빼면 배너가 색을 맡고 바탕은 물러난다. 창(은색 판)과 구분되도록 은색보다 한 단 밝게 — 흰 빛과 은색을 섞는다. */
  --nb-desk-ground: color-mix(in srgb, var(--w-light) 62%, var(--w-face));
  background: var(--nb-desk-ground); color: var(--nb-ink);
}
/* 무늬 층 — 흐림은 이 층에만. 가장자리 번짐이 보이지 않게 조금 키운다 */
.nb-desk::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/banner-poster.webp") center / cover no-repeat;
  filter: blur(3px) grayscale(1); transform: scale(1.04); opacity: .22;
}
/* 바탕 색으로 눌러 둔다 — 무늬는 비치되 창 글자와 다투지 않게 */
.nb-desk::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--nb-desk-ground) 60%, transparent) 0%,
    color-mix(in srgb, var(--nb-desk-ground) 78%, transparent) 60%,
    color-mix(in srgb, var(--nb-desk-ground) 86%, transparent) 100%);
}

/* 아이콘 줄 — 휴대폰: 가로 */
.nb-desk__icons { display: flex; align-items: flex-start; gap: var(--nb-s1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nb-desk__icons::-webkit-scrollbar { display: none; }
.nb-desk__tabs { display: contents; }
/* 휴대폰 — 아이콘 다섯이 한 줄에 똑같이 나눠 선다(넘치면 옆으로 민다) */
.nb-desk__icon {
  display: grid; justify-items: center; align-content: start; gap: var(--nb-s1);
  flex: 1 0 3.5rem; width: auto; max-width: 5.5rem; padding: var(--nb-s1) 2px; border: 0; background: none;
  color: var(--nb-ink); font: inherit; font-size: var(--nb-t-xs); line-height: 1.3; text-align: center;
  text-decoration: none; cursor: pointer; word-break: keep-all;
}
.nb-desk__glyph { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.nb-desk__glyph .g-face  { fill: var(--w-face); }
.nb-desk__glyph .g-light { fill: var(--w-light); }
.nb-desk__glyph .g-dark  { fill: var(--w-dark); }
.nb-desk__glyph .g-title { fill: var(--w-title); }
.nb-desk__label { padding: 1px 3px; }
/* 95 에서 고른 아이콘 — 이름 칸이 남색으로 뒤집힌다 */
.nb-desk__icon[aria-selected="true"] .nb-desk__label { background: var(--w-title); color: var(--c-white); font-weight: 700; }
.nb-desk__icon[aria-selected="true"] .nb-desk__glyph { opacity: .8; }
.nb-desk__icon:hover .nb-desk__label { text-decoration: underline; text-underline-offset: 2px; }
.nb-desk__icon:focus-visible { outline: 1px dotted var(--nb-ink); outline-offset: 1px; }

/* 창 자리 — 창 안 글자색은 바탕의 흰 글자를 물려받지 않는다 */
.nb-desk__stage { min-width: 0; display: grid; color: var(--nb-ink); }
.nb-desk__win[hidden] { display: none; }
.nb-desk__win { box-shadow: 6px 6px 0 color-mix(in srgb, var(--w-dark) 45%, transparent); }

/* PC · 태블릿 — 왼쪽 세로 아이콘 줄. 긴 창을 내려도 아이콘이 따라온다 */
@media (min-width: 640px) {
  .nb-desk { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--nb-s4); padding-top: var(--nb-s5); }
  .nb-desk__icons {
    flex-direction: column; align-items: center; gap: var(--nb-s3); overflow: visible;
    position: sticky; top: calc(76px + var(--nb-s4)); align-self: start;
  }
  .nb-desk__icon { flex: none; width: 5.5rem; }
}

/* ── 페이지 머리 — 배너 띠 + 명판 (inc/partials.php nabtek_page_band) ──
 * 화면 폭 끝까지 편 배너 위에 명판 하나 — 로고 · 영문 윗줄 · 제목 · 개수 · 한 줄 소개. 모든 페이지(제품 페이지 포함)가 같은 틀.
 * 배너는 브랜드마다 사진 · 추상 무늬라 그 위에 글을 바로 얹으면 읽히지 않는다. 글은 늘 명판(은색 판) 안에 둔다.
 * 높이는 화면 폭 단계마다 하나다(사용자 2026-09-17 "HEIGHT 가 페이지별로 바뀌지 않게"):
 *   명판 너비 고정 · 글 상자 높이 고정(윗줄 + 제목 최대 줄 + 소개 최대 줄) → 글 길이 · 소개 유무가 높이를 바꾸지 못한다.
 *   칸마다 최대 줄 수만 정하고 글은 위에서부터 채운다 — 남는 자리는 명판 아래쪽에 모인다(제목과 소개 사이가 벌어지지 않는다).
 *   휴대폰(<640)      로고 위(개수는 로고 줄 오른쪽) · 글 아래 / 윗줄 1 · 제목 2 · 소개 3 줄
 *   태블릿(640~1023)  로고 왼쪽 · 글 오른쪽(개수는 명판 오른쪽 위) / 윗줄 1 · 제목 2 · 소개 3 줄
 *   바탕화면(≥1024)   로고 왼쪽 · 글 오른쪽(개수는 제목 옆) / 윗줄 1 · 제목 1 · 소개 2 줄, 명판 920px
 * 칸을 넘는 글은 잘리므로(넘침 방지 선) 글 쪽을 칸에 맞춘다 — 감사 규칙 plate-overflow.
 * 폭 계산은 바탕화면과 같다(--nb-vw — 스크롤막대를 뺀 폭). 아래 바탕화면 띠와 이어져 한 화면으로 읽힌다.
 * ───────────────────────────────────────────────────────── */
.nb-heading--banner {
  --nb-hb-vw: var(--nb-vw, 100vw);
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: calc(50% - var(--nb-hb-vw) / 2);
  padding: var(--nb-s5) max(var(--nb-pad-page), calc(var(--nb-hb-vw) / 2 - 588px));
  background: var(--w-dark);
}
.nb-heading__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nb-heading__plate {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-s3); align-items: start;
  width: 100%; padding: var(--nb-s3) var(--nb-s4);
  background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line);
}
.nb-heading__logo {
  display: grid; place-items: center; width: 132px; height: 44px;
  padding: var(--nb-s1); background: var(--c-white);
}
.nb-heading__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.nb-heading__text {
  min-width: 0; overflow: hidden;
  height: calc(var(--nb-t-sm) * 1.5 + 2px + var(--nb-t-2xl) * 1.15 * 2 + var(--nb-s1) + var(--nb-t-sm) * 1.6 * 3);
}
.nb-heading__sub {
  margin: 0; height: 1lh; overflow: hidden; white-space: nowrap;
  font-size: var(--nb-t-sm); line-height: 1.5; color: var(--nb-ink-3); letter-spacing: .02em;
}
/* 제목 줄 — 제목과 개수가 한 흐름(개수는 h1 밖). 줄 높이는 제목 글자 기준 */
.nb-heading__row {
  margin: 2px 0 0; max-height: 2lh; overflow: hidden;
  font-size: var(--nb-t-2xl); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
/* 제품 페이지의 명판 제목은 p(h1 은 제품 헤드) — 요소가 달라도 글자는 같게 */
.nb-heading__title { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: 700; }
/* 좁은 화면 — 개수는 로고 줄 오른쪽. 제목 두 줄을 제목만 쓴다(긴 브랜드-카테고리 이름 + 개수가 세 줄로 넘쳤다) */
.nb-heading__row .nb-u-count {
  position: absolute; top: calc(var(--nb-s3) + 22px); right: var(--nb-s4); transform: translateY(-50%);
  letter-spacing: 0; line-height: 1.5; white-space: nowrap;
}
.nb-heading__note {
  margin: var(--nb-s1) 0 0; max-height: 3lh; overflow: hidden;
  font-size: var(--nb-t-sm); line-height: 1.6; color: var(--nb-ink-2); text-wrap: pretty;
}
/* 배너 띠와 아래 바탕화면 띠는 붙인다 — 사이에 흰 줄이 끼면 두 띠가 따로 논다 */
[data-block="page_heading"]:has(.nb-heading--banner),
[data-block="brand_banner"]:has(.nb-heading--banner) { margin-bottom: 0; }
/* 템플릿 페이지(자료실 · 검색 · 404 · 안내) — 빵부스러기 아래 여백과 띠 아래 여백을 블록 페이지와 맞춘다 */
.site-main > .nb-heading--banner { margin-bottom: 0; }
/* 제품 페이지 — 아래가 바탕화면이 아니라 제품 헤드(흰 바탕)라 블록 간격을 둔다 */
[data-block="brand_banner"]:has(.nb-heading--banner):has(+ [data-block="product_hero"]) { margin-bottom: var(--nb-gap-lg); }
@media (min-width: 640px) {
  .nb-heading--banner { padding-block: var(--nb-s6); }
  .nb-heading__plate {
    grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--nb-s5); align-items: start;   /* 위 맞춤 — 로고 윗변 = 윗줄 윗변(정렬은 곧 가독성) */
    padding: var(--nb-s4) var(--nb-s5);
  }
  .nb-heading__logo { width: 180px; height: 60px; }
  /* 개수는 윗줄 높이에 맞춰 명판 오른쪽 위 — 윗줄 글은 그 자리를 비켜 선다 */
  .nb-heading__row .nb-u-count { top: calc(var(--nb-s4) + var(--nb-t-sm) * .75); right: var(--nb-s5); }
  .nb-heading__sub { padding-right: 6em; }
}
@media (min-width: 1024px) {
  .nb-heading--banner { padding-block: var(--nb-s7); }
  .nb-heading__plate { width: min(100%, 920px); }
  .nb-heading__sub { padding-right: 0; }
  .nb-heading__text { height: calc(var(--nb-t-sm) * 1.5 + 2px + var(--nb-t-2xl) * 1.15 + var(--nb-s1) + var(--nb-t-sm) * 1.6 * 2); }
  .nb-heading__row { max-height: 1lh; }
  .nb-heading__row .nb-u-count { position: static; transform: none; margin-left: var(--nb-s2); }
  .nb-heading__note { max-height: 2lh; }
}

/* ── 바탕화면 — 쌓기 · 묶음 ────────────────────────────────
 * 쌓기(메인 · 자료실 · 검색 · 404 · 안내): 아이콘 줄 없이 창이 위아래로 선다.
 * 창 모양이 아닌 조각(찾기 칸 · 칩 줄 · 쪽 넘김)은 은색 판에 담아 바탕 위에 띄운다.
 * 묶음(제품 페이지의 제품 알아보기 등): 창 여럿이 한 아이콘에 — 창 사이는 블록 간격 그대로.
 * 스크립트가 바탕화면을 깔면 제품 머리의 앵커 줄은 필요 없다(아이콘이 맡는다).
 * ───────────────────────────────────────────────────────── */
.nb-desk--stack { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .nb-desk--stack { grid-template-columns: minmax(0, 1fr); } }
.nb-desk__stage { gap: var(--nb-gap-lg); align-content: start; }
.nb-desk__stage > .nb-block { margin-bottom: 0; }
.nb-desk--stack .nb-desk__stage > :not(.nb-block):not(.nb-heading):not(script) {
  padding: var(--nb-s4); background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line);
}
.nb-desk__group { display: grid; gap: var(--nb-gap-lg); align-content: start; box-shadow: none; }
.nb-desk__group[hidden] { display: none; }
.nb-desk__group > .nb-block { margin-bottom: 0; }
.has-desk .nb-pd__nav { display: none; }
/* 바탕화면 띠는 앞의 머리 띠 · 사진 칸과 붙인다 — 블록 아래 여백이 흰 줄로 끼지 않게 */
.nb-desk { margin-top: 0; }
/* 아래도 붙인다 — 바탕화면이 몸의 끝이면 발까지 흰 줄(몸 아래 여백 64 + 발 위 여백 48)이 끼어
   모든 페이지가 "바탕화면 · 흰 띠 · 발" 세 층으로 끊겨 보였다(2026-09-17 감사) */
.site-main:has(> .nb-desk:last-child) { padding-bottom: 0; }
.site-main:has(> .nb-desk:last-child) + .site-footer { margin-top: 0; }

/* ── 아이콘 (pixelarticons · inc/partials.php nabtek_icon) ───────────────
 * 픽셀 아이콘은 반픽셀에 걸리면 흐려진다 — 정수 크기 · 모서리 선명하게. 글자색을 따른다. */
.nb-ico { display: inline-block; flex: none; vertical-align: middle; shape-rendering: crispEdges; }
.nb-ico--12 { width: 12px; height: 12px; }
.nb-ico--24 { width: 24px; height: 24px; }
.nb-ico--36 { width: 36px; height: 36px; }

/* ── 줄바꿈 (사이트 전체) ────────────────────────────────────
 * 창 폭이 화면마다 달라 줄을 손으로 나눌 수는 없다. 대신 브라우저에 끊는 방법을 알려 준다.
 *   낱말은 가운데서 끊지 않는다      body 의 word-break: keep-all (위)
 *   문장은 끝줄에 낱말 하나만 남기지 않는다   text-wrap: pretty
 *   짧은 덩어리(제목 · 이름 · 값 · 단추)는 줄 길이를 고르게   text-wrap: balance — 두 줄이 "긴 줄 + 한 낱말" 이 되지 않는다
 * 점검은 줄마다 글자 상자를 재는 스크립트로 했다(끝줄이 글자 3개 폭보다 짧으면 고아 줄). 2026-09-16 기준 PC 41 · 휴대폰 27 곳.
 * :where 로 특정도를 0 으로 둔다 — 블록이 따로 정하면 그쪽이 이긴다.
 * ───────────────────────────────────────────────────────── */
:where(p, li, dd, td, figcaption, blockquote, .nb-u-lead) { text-wrap: pretty; }
:where(h1, h2, h3, h4, dt, th, .nb-btn, .nb-chip, .nb-lm__name, .nb-lm__sum, .nb-bs__title, .nb-mega__title,
       .nb-sg__if, .nb-am__name, .nb-sd__val, .nb-sd__label, .nb-ov__group, .nb-heading__note) { text-wrap: balance; }

/* ── 형광펜 (inc/profile.php nabtek_mark) ─────────────────────
 * 문단의 핵심 구절 — 윈도우 95 에서 글자를 끌어 선택한 모양(남색 바탕 · 흰 글자).
 * 정렬은 곧 가독성이다(사용자): 세로 여백 0 · 줄 높이 그대로라 줄 간격도 기준선도 흔들지 않는다.
 * 좌우 1px 만 — 글자가 칠 가장자리에 붙지 않게. 줄이 바뀌어도 칠이 양쪽 끝에서 제대로 닫힌다(clone).
 * ───────────────────────────────────────────────────────── */
.nb-hl {
  padding: 0 1px; margin: 0; line-height: inherit;
  background: var(--nb-accent); color: var(--nb-on-accent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── 잘린 글 더보기 (site.js "잘린 글 더보기") ─────────────────
 * 줄 접기로 잘린 글 바로 아래에 작은 글자 단추. 펼치면 접기 제한을 푼다. 줄 높이 · 칸 폭은 그대로. */
.nb-clamp__more {
  justify-self: start; display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--nb-accent); font: inherit; font-size: var(--nb-t-xs); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.nb-clamp__more[hidden] { display: none; }
[data-nb-clamp].is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ── 공용 부품 — 견적 문의 단추 · 납이 상담 상자 (inc/partials.php) ─────────────
 * 견적 문의 단추: 어디서나 같은 글자 · 봉투 아이콘 · 남색. 아이콘은 글자 앞, 줄 높이에 묶인다.
 * 글 링크 변형(.nb-quote-link): 모델 목록처럼 줄마다 하나씩 설 때 — 남색 단추 대신 남색 글자.
 * 봉투는 달지 않는다(inc/partials.php) — 같은 줄에 선 다른 글 링크와 같은 꼴이어야 한다. */
.nb-btn .nb-ico { flex: none; }
.nb-quote-link { display: inline-flex; align-items: center; gap: var(--nb-s1); min-height: 24px; color: var(--nb-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.nb-quote-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* 납이 상담 상자 — 흰 상자 · 왼쪽 남색 띠 · 스마일 · 제목 · 한 줄 · 단추. 좁으면 단추가 아래 줄로. */
.nb-ask {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--nb-s2) var(--nb-s3);
  margin: 0; padding: var(--nb-s3) var(--nb-s4);
  background: var(--c-white); border: var(--nb-bw) solid var(--nb-line); border-left: 6px solid var(--nb-accent);
}
.nb-ask__ico { color: var(--nb-accent); display: grid; }
.nb-ask__h { margin: 0; font-size: var(--nb-t-lg); font-weight: 700; color: var(--nb-ink); text-wrap: balance; }
.nb-ask__p { margin: 2px 0 0; font-size: var(--nb-t-sm); color: var(--nb-ink-2); max-width: var(--nb-measure); }
.nb-ask__go { grid-column: 1 / -1; justify-self: start; padding-inline: var(--nb-s5); }
@container nb-block (min-width: 640px) {
  .nb-ask { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nb-ask__go { grid-column: auto; }
}

/* ── 회사소개 (page-about.php) ─────────────────────────────
 * 쌓기 바탕화면의 창 넷 — 회사 개요 · 취급 브랜드 · 고객센터 · 사업자 정보.
 * 부품은 사전의 것만: 괘선 정의 목록 · 숫자 줄 · 카드(로고 액자) · 견적 문의 단추.
 * ───────────────────────────────────────────────────────── */
.nb-about__intro { max-width: var(--nb-measure); }
.nb-about__intro p { margin: 0 0 var(--nb-s3); text-wrap: pretty; }
.nb-about__stats { margin: var(--nb-s4) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-s2); }
.nb-about__stats div { display: grid; gap: 2px; padding: var(--nb-s3); background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line); }
.nb-about__stats dt { font-size: var(--nb-t-xs); color: var(--nb-ink-3); }
.nb-about__stats dd { margin: 0; font-size: var(--nb-t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.nb-about__h { margin: var(--nb-s5) 0 var(--nb-s2); font-size: var(--nb-t-lg); }
.nb-about__defs { margin: 0; display: grid; border-top: var(--nb-bw-2, 2px) solid var(--nb-ink); }
.nb-about__defs div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--nb-s3) 0; border-bottom: var(--nb-bw) solid var(--nb-line); }
.nb-about__defs dt { font-size: var(--nb-t-sm); font-weight: 700; }
.nb-about__defs dd { margin: 0; color: var(--nb-ink-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.nb-about__defs dd a { font-weight: 600; }
.nb-about__tel { font-size: var(--nb-t-lg); font-weight: 700; white-space: nowrap; }
.nb-about__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-s3); margin-top: var(--nb-s4); }
.nb-about__foot p { margin: 0; font-size: var(--nb-t-sm); color: var(--nb-ink-3); }

.nb-about__brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-gutter); }
.nb-about__brand { display: grid; align-content: start; gap: var(--nb-s1); padding: var(--nb-s3); background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line); }
.nb-about__logo { display: grid; place-items: center; height: 72px; margin-bottom: var(--nb-s2); padding: var(--nb-s2); background: var(--c-white); }
.nb-about__logo img { max-width: 160px; max-height: 48px; object-fit: contain; }
.nb-about__bname { margin: 0; font-size: var(--nb-t-lg); }
.nb-about__bname a { color: var(--nb-ink); text-decoration: none; }
.nb-about__bname a:hover { color: var(--nb-accent); text-decoration: underline; }
.nb-about__bmeta { margin: 0; font-size: var(--nb-t-xs); color: var(--nb-ink-3); font-variant-numeric: tabular-nums; }
.nb-about__babout { margin: 0; font-size: var(--nb-t-sm); color: var(--nb-ink-2); }

@container nb-block (min-width: 640px) {
  .nb-about__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-about__defs div { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--nb-s4); }
  .nb-about__brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 개인정보 동의 (inc/quote.php nabtek_privacy_consent) ──────────
 * 개인정보를 받는 모든 폼의 공용 부품. 법정 고지 네 가지 — 항목 · 목적 · 기간(굵게) · 거부 권리와 불이익 — 를
 * 이름표 | 값 표 한 장으로, 아래에 동의 칸. 좁은 창에서도 두 열이 무너지지 않게 이름표 열은 고정폭.
 * ───────────────────────────────────────────────────────── */
.nb-consent { display: grid; gap: var(--nb-s1); min-width: 0; margin: 0; padding: var(--nb-s2); border: var(--nb-bw) solid var(--nb-line); background: var(--nb-surface); color: var(--nb-ink-2); font-size: var(--nb-t-sm); }
/* 제목은 fieldset 테두리에 걸치지 않고 상자 안 첫 줄에 — float 을 주면 legend 가 보통 칸이 된다 */
.nb-consent__h { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-ink); }
.nb-consent__need { font-weight: 400; color: var(--nb-ink-3); }
.nb-consent__t { width: 100%; border-collapse: collapse; font-size: var(--nb-t-xs); line-height: 1.6; }
.nb-consent__t th, .nb-consent__t td { padding: var(--nb-s1) var(--nb-s2); border: var(--nb-bw) solid var(--nb-line); text-align: left; vertical-align: top; }
.nb-consent__t th { width: 7.5rem; font-weight: 700; color: var(--nb-ink); background: var(--nb-surface-2); white-space: nowrap; }
.nb-consent__t b { color: var(--nb-ink); }
.nb-consent__note { margin: 0; font-size: var(--nb-t-xs); line-height: 1.6; color: var(--nb-ink-3); }
.nb-consent__note a { color: var(--nb-accent); font-weight: 700; }
.nb-consent__ok { display: flex; gap: var(--nb-s2); align-items: flex-start; min-height: var(--nb-ctl-sm); font-weight: 700; color: var(--nb-ink); cursor: pointer; }
/* 체크 칸 모양 · 크기는 95 스킨(13px 눌린 칸)을 따른다 — 누르는 자리는 줄 전체(36px) */
.nb-consent__ok input { margin: 4px 0 0; flex: none; }

/* 발의 개인정보처리방침 — 다른 글자와 구분되게 굵게 */
.site-footer__legal { margin-top: var(--nb-s1) !important; }
.site-footer__legal a { color: var(--nb-ink); text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

/* ── 법정 문서 (page-privacy.php) ─────────────────────────────
 * 창 안의 흰 종이 — 지면(제품 알아보기)과 같은 문법: 조 제목 · 문단 · 괘선 표. 읽는 폭은 --nb-measure.
 * ───────────────────────────────────────────────────────── */
.nb-legal { padding: var(--nb-s4); background: var(--c-white); color: var(--nb-ink-2); font-size: var(--nb-t-sm); line-height: 1.75; }
.nb-legal > p, .nb-legal > ul, .nb-legal__toc { max-width: var(--nb-measure); }
.nb-legal p { margin: 0 0 var(--nb-s3); }
.nb-legal h3 { margin: var(--nb-s6) 0 var(--nb-s2); padding-top: var(--nb-s3); border-top: var(--nb-bw-2) solid var(--nb-ink); font-size: var(--nb-t-md); color: var(--nb-ink); scroll-margin-top: 96px; }
.nb-legal ul { margin: 0 0 var(--nb-s3); padding-left: var(--nb-s4); }
.nb-legal li { margin: 0 0 var(--nb-s1); }
.nb-legal a { color: var(--nb-accent); }
.nb-legal__toc { margin: var(--nb-s4) 0; padding: var(--nb-s3) var(--nb-s4); background: var(--nb-surface-2); border: var(--nb-bw) solid var(--nb-line); }
.nb-legal__toc ol { margin: 0; padding-left: var(--nb-s5); display: grid; gap: 2px; }
.nb-legal__t { width: 100%; max-width: 48rem; margin: 0 0 var(--nb-s3); border-collapse: collapse; font-size: var(--nb-t-xs); }
.nb-legal__t th, .nb-legal__t td { padding: var(--nb-s2); border: var(--nb-bw) solid var(--nb-line); text-align: left; vertical-align: top; }
.nb-legal__t th { background: var(--nb-surface-2); color: var(--nb-ink); font-weight: 700; }
.nb-legal__t b { color: var(--nb-ink); }
.nb-legal__dl { margin: 0 0 var(--nb-s3); max-width: 32rem; display: grid; border-top: var(--nb-bw) solid var(--nb-line); }
.nb-legal__dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--nb-s3); padding: var(--nb-s2) 0; border-bottom: var(--nb-bw) solid var(--nb-line); }
.nb-legal__dl dt { font-weight: 700; color: var(--nb-ink); }
.nb-legal__dl dd { margin: 0; }
@container nb-block (min-width: 640px) {
  .nb-legal { padding: var(--nb-s5) var(--nb-s6); }
  .nb-legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nb-s6); }
}

/* ── 알림 (blocks/ask-band · inc/partials.php nabtek_ask_alert) ─────
 * 창 위에 서는 알림 — 95 풍선 도움말의 문법: 연노랑 바탕 · 얇은 검정 테두리 · 굵은 머리줄 "알림" · 스마일 · 제목 · 한 줄 · 견적 문의.
 * 색 막대 제목 표시줄은 쓰지 않는다(사용자 2026-09-17 "색이 안 어울려 — 노랑 같은 평범한 윈도95 문법").
 * 창보다 좁게(44rem) 왼쪽에 — 바탕화면 위에 뜬 알림으로 읽힌다. 좁은 화면은 칸 폭 전체, 단추는 아래 줄.
 * ───────────────────────────────────────────────────────── */
.nb-block--ask-band[hidden] { display: none; }
.nb-alert { max-width: 44rem; background: var(--nb-surface); border: var(--nb-bw) solid var(--nb-line); color: var(--nb-ink); }
.nb-alert__bar { display: flex; align-items: center; gap: var(--nb-s1); min-height: 24px; padding: 2px var(--nb-s2); background: linear-gradient(90deg, var(--w-title), var(--w-title-2)); color: var(--c-white); }
.nb-alert__name { font-size: var(--nb-t-sm); font-weight: 700; letter-spacing: 0; }
.nb-alert__body { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--nb-s2) var(--nb-s3); padding: var(--nb-s3); }
.nb-alert__face { display: grid; place-items: center; width: 40px; height: 40px; color: var(--nb-accent); }
.nb-alert__text { display: grid; gap: 2px; min-width: 0; }
.nb-alert__h { margin: 0; font-size: var(--nb-t-md); font-weight: 700; line-height: 1.45; color: var(--nb-ink); text-wrap: balance; }
.nb-alert__p { margin: 0; font-size: var(--nb-t-sm); line-height: 1.55; color: var(--nb-ink-2); text-wrap: pretty; }
.nb-alert__go { grid-column: 1 / -1; justify-self: end; }
@media (min-width: 640px) {
  .nb-alert__body { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .nb-alert__go { grid-column: auto; }
}