/* 납텍 테마 — Windows 95 스킨.
 *
 * main.css 의 디자인 체계(칸 격자 · 간격 척도 · 타입 스케일 · 부품)는 그대로 두고
 * 표면 처리만 덮어쓴다. 이 파일을 빼면 원래 모습으로 돌아온다 —
 * functions.php 의 enqueue 한 줄이 전부다.
 *
 * 왜 별도 파일인가
 *   블록 CSS 는 main.css 에 의존하도록 등록되어 main.css 보다 뒤에 실린다.
 *   스킨이 main.css 안에 있으면 블록이 정한 색·테두리를 같은 순위에서 이기지 못한다.
 *   스킨은 맨 마지막에 와야 스킨이다.
 */
/* ═════════════════════════════════════════════════════════════
 *  Windows 95 스킨
 *
 *  위의 디자인 체계(칸 격자 · 간격 척도 · 타입 스케일 · 부품)는 그대로 두고
 *  표면 처리만 덮어쓴다. 이 구역을 통째로 지우면 원래 모습으로 돌아온다.
 *
 *  95 의 문법은 둘뿐이다 —
 *    튀어나온 것   누를 수 있는 것. 버튼 · 패널 · 카드 · 도구모음.
 *    눌린 것       값이 들어가거나 내용이 놓이는 곳. 입력칸 · 목록 · 표.
 *
 *  그래서 화면 어디를 봐도 "이건 누르는 것, 이건 보는 것" 이 즉시 읽힌다.
 *  요즘 UI 가 그림자와 색으로 하는 일을 95 는 2픽셀 베벨 하나로 했다.
 * ═════════════════════════════════════════════════════════════ */

/* ── 두 가지 면 ─────────────────────────────────────────── */
.nb-out,
.nb-btn,
.nb-panel,
.nb-card a,
.nb-chips a,
.nb-pager .page-numbers,
.nb-empty__way,
.nb-quote,
.nb-qq__main,
.nb-qq__contact,
.nb-facets,
.nb-te__col,
.nb-trust__item,
.nb-ch__card,
.nb-gal__thumbs a {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face);
  border-radius: 0;
}

.nb-in,
.nb-input,
.nb-form input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"], [type="url"]),
.nb-form select,
.nb-form textarea,
.site-search input,
.nb-searchbar input[type="search"],
.nb-hh__input,
.nb-hb__input,
.nb-u-tablewrap,
.nb-heading__logo,
.nb-bp__logo,
.nb-bm__logo,
.nb-drawer__logo,
.nb-cf__frame,
.nb-ps__frame,
.nb-di__thumb,
.nb-about__logo,
.nb-ps,
.nb-legal,
.nb-ba,
.nb-ba__frame,
.nb-card__thumb,
.nb-lm__thumb,
.nb-gal__stage,
.nb-gal--none,
.nb-sr__hints,
.nb-empty,
.nb-docs,
.nb-ts__logo,
.nb-spec-common {
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light);
  border-radius: 0;
}

/* ── 창 ───────────────────────────────────────────────────
 * 제목(h2)을 가진 블록은 창이 된다. 제목이 없는 블록 — 이동 경로,
 * 페이지 머리, 히어로 — 은 창틀 없이 바탕에 그대로 놓인다.
 * 창이 아닌 것까지 창으로 만들면 화면이 창으로 도배된다.
 *
 * 제목이 블록 바로 아래(깊이 0)이거나 한 겹 안(깊이 1)일 때만 블록이 창이 된다.
 * 두 겹 넘게 들어간 제목은 이미 제 판을 가진 안쪽 패널의 것이다 —
 * 견적 폼 · 거르기 상자 · 비교 허브가 그렇다. 거기에 바깥 창틀까지 두르면
 * 창 안에 창이 되고, 판이 짧은 쪽 옆으로 은색 빈 땅이 남는다.
 * ───────────────────────────────────────────────────────── */
.nb-block:has(> .nb-u-h2),
.nb-block:has(> * > .nb-u-h2) {
  --w-pad: var(--w-frame);
  padding: var(--w-pad);
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face);
}

/* 제목 표시줄. 가장 가까운 여백 가진 조상의 끝까지 편다(--w-pad 상속). */
.nb-u-h2 {
  display: flex; align-items: center; gap: var(--nb-s2);
  margin: calc(var(--w-pad) * -1) calc(var(--w-pad) * -1) var(--nb-s3);
  padding: 3px var(--nb-s2);
  background: linear-gradient(90deg, var(--w-title), var(--w-title-2));
  /* 어두운 판 — 단, 오른쪽 끝 파랑(#0f7bc2)이 흰 글자와 4.5:1 이 한계라 글자 역할을 모두 흰색으로 둔다 */
  --nb-ink: var(--c-white); --nb-ink-2: var(--c-white); --nb-ink-3: var(--c-white); --nb-accent: var(--c-white);
  color: var(--nb-ink);
  font-size: var(--nb-t-md); font-weight: 700; letter-spacing: 0;
  line-height: 1.5;
}
.nb-u-h2 a { color: inherit; }
/* 제목 옆의 개수 — 표시줄의 글자 역할은 모두 흰색이다 */
.nb-u-h2 .nb-u-count { color: var(--nb-ink); }

/* 안쪽 패널이 제 제목 표시줄을 가질 때, 그 패널이 여백을 넘겨준다 */
.nb-panel, .nb-quote, .nb-qq__main, .nb-qq__contact, .nb-facets, .nb-te__col { --w-pad: var(--nb-s4); }
@container nb-block (min-width: 640px) {
  .nb-panel, .nb-quote, .nb-qq__main, .nb-qq__contact, .nb-te__col { --w-pad: var(--nb-s5); }
}

/* ── 버튼 ─────────────────────────────────────────────────
 * 누르면 진짜로 눌린다 — 베벨이 뒤집히고 글자가 1px 내려간다.
 * 95 의 버튼이 기계적으로 느껴졌던 이유가 이 1픽셀이다.
 * ───────────────────────────────────────────────────────── */
.nb-btn { color: var(--nb-ink); font-weight: 400; }
.nb-btn:hover { border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light); color: var(--nb-ink); }
.nb-btn:active,
.nb-chips a:active,
.nb-pager a.page-numbers:active {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  padding-top: calc(var(--nb-s2) + 1px); padding-bottom: calc(var(--nb-s2) - 1px);
}
/* 주 행동 — 95 의 "기본 단추" 는 바깥에 검은 테를 하나 더 둘렀다.
   이 사이트는 견적이 전환 지점이라 거기에 남색 면을 더한다. */
.nb-btn--primary {
  background: var(--nb-accent); color: var(--nb-on-accent); font-weight: 700;
  outline: 1px solid var(--w-dark); outline-offset: 0;
}
.nb-btn--primary:hover { background: var(--nb-accent-hover); color: var(--nb-on-accent); }

/* 머리 줄 견적 문의 — 가끔 스스로 "딸깍딸깍" 눌린다.
   견적이 이 사이트의 전환 지점이라, 누르는 곳이 여기라고 손가락을 한 번 부른다(넛지).
   7초에 한 번, 95 단추가 눌리는 모양(테 뒤집힘 · 글자 1px 내려감)을 두 번 짧게. 3초 뒤부터 시작한다.
   올리거나 초점이 가면 멈춘다 — 진짜 눌림과 섞이지 않게. 움직임 줄이기 설정이면 움직이지 않는다. */
@keyframes nb-click {
  0%, 84%, 90%, 94%, 100% {
    border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
    box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
    padding-top: var(--nb-s2); padding-bottom: var(--nb-s2);
  }
  86%, 88%, 96%, 98% {
    border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
    box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
    padding-top: calc(var(--nb-s2) + 1px); padding-bottom: calc(var(--nb-s2) - 1px);
  }
}
.site-quote { animation: nb-click 7s steps(1, end) 3s infinite; }
.site-quote:is(:hover, :focus-visible, :active) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .site-quote { animation: none; }
}

/* ── 받는 칸 ──────────────────────────────────────────────
 * 눌린 면 + 흰 바탕. 초점은 파란 테가 아니라 점선 사각형이다.
 * ───────────────────────────────────────────────────────── */
.nb-input:focus,
.nb-form :where(input, select, textarea):focus,
.site-search input:focus,
.nb-searchbar input[type="search"]:focus-visible,
.nb-hh__input:focus,
.nb-hb__input:focus-visible {
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  outline: 1px dotted var(--w-dark); outline-offset: -4px;
}
/* 체크상자 · 라디오 — 95 는 네모난 눌린 칸이다 */
.nb-form input:where([type="checkbox"], [type="radio"]) {
  appearance: none; width: 13px; height: 13px; flex: none;
  border: 2px solid; border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light); border-radius: 0; cursor: pointer;
}
.nb-form input[type="radio"] { border-radius: 50%; }
.nb-form input[type="checkbox"]:checked {
  background-image: linear-gradient(to bottom right, transparent 44%, var(--w-dark) 44% 56%, transparent 56%),
                    linear-gradient(to bottom left,  transparent 44%, var(--w-dark) 44% 56%, transparent 56%);
  background-size: 100% 100%;
}
.nb-form input[type="radio"]:checked { background: var(--w-light) radial-gradient(circle, var(--w-dark) 0 2px, transparent 2px); }

/* ── 초점 — 점선 사각형 ───────────────────────────────────
 * 95 의 초점 표시는 테두리 바깥의 색 테가 아니라 안쪽의 1px 점선이었다.
 * ───────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 1px dotted var(--nb-focus);
  outline-offset: -4px;
}
.nb-btn--primary:focus-visible { outline-color: var(--nb-on-accent); }

/* ── 카드 — 아이콘 단추처럼 ───────────────────────────────── */
.nb-card a { padding: var(--nb-s2); gap: 2px; }
.nb-card a:hover { border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light); }
.nb-card a:hover .nb-card__title { color: var(--nb-accent); text-decoration: underline; }
.nb-card__thumb { margin-bottom: var(--nb-s2); }
.nb-card__ph { border: 0; }

/* ── 칩 · 배지 ────────────────────────────────────────────── */
.nb-chips a { font-weight: 400; }
.nb-chips a[aria-current="true"] {
  /* 고른 것은 눌린 채로 머문다 — 95 의 토글 단추 */
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--nb-accent); color: var(--nb-on-accent);
}
.nb-badge {
  border: 2px solid; border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  color: var(--nb-ink); background: var(--w-face); padding: 0 var(--nb-s1);
}
.nb-model { background: var(--w-face); border: 1px solid var(--w-shadow); }

/* ── 표 — 눌린 흰 목록 ────────────────────────────────────
 * 95 의 목록(Explorer 자세히 보기)은 흰 바탕에 줄 선이 거의 없고,
 * 열 머리만 튀어나온 단추였다.
 * ───────────────────────────────────────────────────────── */
.nb-u-tablewrap { background-image: none; }
.nb-spec thead th {
  background: var(--w-face);
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  color: var(--nb-ink); font-weight: 700;
}
.nb-spec th, .nb-spec td { border-bottom: 1px solid var(--nb-line); }
.nb-spec tbody th { background: var(--w-light); box-shadow: 1px 0 0 var(--nb-line); }
.nb-spec tbody tr:hover > * { background: var(--nb-accent); color: var(--nb-on-accent); }

/* ── 목록 — 탐색기의 목록 상자 ─────────────────────────────
 * 눌린 흰 칸 안에 줄이 평평하게 눕는다. 줄마다 테두리를 두르면
 * 도구모음처럼 보여서 "고를 수 있는 목록" 이라는 뜻이 사라진다.
 * 고른 줄 · 지나는 줄은 남색으로 통째로 칠한다 — 95 의 선택 표시다.
 * ───────────────────────────────────────────────────────── */
.nb-docs { padding: var(--nb-s1); gap: 0; }
.nb-docs a { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.nb-docs a:hover { background: var(--nb-accent); color: var(--nb-on-accent); }
.nb-docs a:hover .nb-doc__meta { color: var(--nb-on-accent-2); }

/* 제품 유형 탐색기 — 대항목 판은 눌린 흰 액자, 카테고리 카드는 튀어나온 은색 단추(누르면 눌린 면) */
.nb-tg__domain {
  border: 2px solid; border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2); background: var(--w-light);
}
.nb-tg__card {
  border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow); background: var(--w-face);
}
.nb-tg__card:active {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}


/* 브랜드 타일 — 눌린 흰 액자에 로고가 걸린다.
   타일 높이는 컨트롤 칸(44px)에 못 박혀 있고 로고 그림이 36px 다.
   2px 베벨이 위아래로 4px 을 먹으므로 안쪽 여백을 더 주면 그림이 잘린다. */
.nb-ts__logo { padding: 0; }

/* 모델 목록 — 격자다(model-selector.css). 칸은 튀어나온 면, 고른 칸은 눌린 면.
   예전에는 세로 목록이라 고른 줄을 남색으로 통째로 칠했다. 그 규칙을 그대로 두면
   기본으로 골라져 있는 "모델 미정" 칸의 글자가 흰색이 되어 사라진다. */
.nb-model-opt:hover { border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light); background: var(--nb-accent-soft); }
.nb-model-opt:has(input:checked) .nb-model { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-model-opt:has(input:checked) .nb-model-go {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  background: var(--nb-accent); color: var(--nb-on-accent);
}

/* 구매 상자 — 대화상자의 판. 여기가 이 페이지의 행동 자리다. */
.nb-pd__box {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face);
}

/* 공통 사양 — 항목 | 값 두 칸짜리 목록. 머리만 은색 띠. */
.nb-spec-common { padding: 0; }
.nb-spec-common__cap {
  background: var(--w-face);
  border-bottom: 1px solid var(--w-shadow);
  box-shadow: 0 1px 0 var(--w-light);
  color: var(--nb-ink);
}
.nb-spec-common__row { border-bottom: 1px solid var(--nb-line); }
.nb-spec-common__row:hover { background: var(--nb-accent); color: var(--nb-on-accent); }
.nb-spec-common__row:hover dt { color: var(--nb-on-accent-2); }

/* ── 머리 · 발 — 도구모음과 상태 표시줄 ────────────────────── */
.site-header {
  background: var(--w-face);
  backdrop-filter: none;
  border-bottom: 2px solid var(--w-shadow);
  box-shadow: 0 1px 0 var(--w-light), inset 0 1px 0 var(--w-light);
}
.site-nav__list > li > a,
.site-pop > summary { border-bottom: 0; font-weight: 400; }
/* 메뉴 줄 — 95 메뉴 줄 문법으로 역할을 나눈다.
   예전에는 열린 메뉴 · 올린 메뉴 · 지금 페이지가 모두 같은 남색 칠이라, 나란히 칠해지면
   "제품 기술자료" 가 한 덩어리 단추처럼 붙어 보였다(사용자 제보).
     열린 메뉴     남색 칠 — 지금 펼쳐 둔 것은 하나뿐이다
     올린 메뉴     튀어나온 테
     지금 페이지   눌린 면 + 굵은 글
   항목 사이 2px 틈 — 테끼리도 붙지 않게. */
.site-nav__list { gap: 2px; }
.site-nav__list > li > a,
.site-pop > summary { border: 1px solid transparent; }
.site-nav__list > li > a:hover,
.site-pop:not([open]) > summary:hover {
  background: var(--w-face); color: var(--nb-ink);
  border-color: var(--w-light) var(--w-shadow) var(--w-shadow) var(--w-light);
}
.site-nav [aria-current="page"] {
  background: var(--w-face); color: var(--nb-ink); font-weight: 700;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
}
.site-pop[open] > summary,
.site-pop[open] > summary:hover {
  background: var(--nb-accent); color: var(--nb-on-accent); border-color: var(--nb-accent);
}
.site-pop__panel {
  background: var(--w-face);
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
}
.site-pop__panel--brands a { border-bottom: 0; }
.site-pop__panel--brands a:hover { background: var(--nb-accent); color: var(--nb-on-accent); }
.site-tel { background: transparent; }

/* ── 대화상자 — 95 의 창 ───────────────────────────────────
 * 창틀과 제목 표시줄은 블록 창과 같다. 오른쪽 위의 × 는 95 제목 표시줄의 닫기 단추,
 * 창 밖의 딱딱한 그림자는 풍선 도움말과 같은 것이다.
 * ───────────────────────────────────────────────────────── */
.nb-dialog__win {
  --w-pad: var(--w-frame);
  padding: var(--w-pad);
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow), 4px 4px 0 var(--nb-shade-2);
  background: var(--w-face);
}
.nb-dialog__title { margin-bottom: 0; padding-right: 32px; }
.nb-dialog__body { padding: var(--nb-s3); }
.nb-dialog__x {
  top: calc(var(--w-pad) + 3px); right: calc(var(--w-pad) + 3px);
  width: 20px; height: 18px;
  font-size: var(--nb-t-sm); font-weight: 700;
  color: var(--w-dark); background: var(--w-face);
  border: 1px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset -1px -1px 0 var(--w-shadow);
}
.nb-dialog__x:active { border-color: var(--w-dark) var(--w-light) var(--w-light) var(--w-dark); box-shadow: inset 1px 1px 0 var(--w-shadow); }
.nb-dialog__x:focus-visible { outline-offset: -3px; }

/* ── 제품 메뉴 · 찾기 창 — 95 ─────────────────────────────
 * 받는 칸(찾기 막대 · 찾기 입력칸 · 결과 목록 · 로고 액자)은 눌린 흰 칸,
 * 누르는 것(브랜드 카드 · 칩 · 미리 보기 판)은 튀어나온 면. 고른 줄은 남색 띠.
 * 찾기 창 아래는 95 의 상태 표시줄 — 눌린 작은 칸들.
 * ───────────────────────────────────────────────────────── */
.site-find__input,
.site-find__pop,
.nb-drawer__list,
.nb-mega__logo {
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light);
  border-radius: 0;
}
.site-find__pop { box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2), 3px 3px 0 var(--nb-shade-2); }
.site-find__input:focus { outline: 1px dotted var(--nb-focus); outline-offset: -5px; }
.site-find__group { background: var(--w-face-2); border-block: 1px solid var(--nb-line); }

/* 누르는 것 — 튀어나온 면: 찾기 단추 · 머리 줄 단추 · 브랜드 카드 */
.site-find__go,
.site-find-toggle,
.site-menu-btn,
.nb-mega__brand,
.nb-drawer__brand,
.nb-mega__series a {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face);
  border-radius: 0;
}
.nb-mega__series a { box-shadow: none; border-width: 1px; }
.site-find__go:active,
.site-find-toggle:active,
.site-find-toggle[aria-expanded="true"],
.site-menu-btn:active,
.site-menu-btn[aria-expanded="true"] {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}
@media (max-width: 639px) {
  .site-tel {
    border: 2px solid; border-radius: 0;
    border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
    box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
    background: var(--w-face);
  }
}
.nb-mega__logo { height: calc(var(--nb-ctl) + 4px); }

/* 모바일 · 태블릿 — 대항목 · 카테고리는 토글 단추 줄. 고른 것은 눌린 채 남색 */
.nb-mega__dom,
.nb-mega__type {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  background: var(--w-face);
}
.nb-mega__dom[aria-current="true"],
.nb-mega__type[aria-current="true"] { border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow); background: var(--nb-accent); }
@media (min-width: 1024px) {
  /* PC — 대항목 · 카테고리는 탐색기의 두 목록 상자: 눌린 흰 칸 안의 평평한 줄.
     탐색기의 "폴더 | 파일" 처럼 왼쪽에서 고른 줄이 오른쪽 목록을 정한다 */
  .nb-mega__col {
    margin: var(--nb-s2) 0 var(--nb-s2) var(--nb-s2);
    border: 2px solid;
    border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
    box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
    background: var(--w-light);
  }
  .nb-mega__dom,
  .nb-mega__type { border: 0; background: transparent; }
  .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); }
  /* 고른 대항목은 카테고리를 보는 동안에도 남색 대신 눌린 회색으로 남는다 — 초점이 옆 칸에 있다는 표시 (95 목록 상자의 "초점 잃은 선택") */
  .nb-mega__col--dom:not(:focus-within):has(~ .nb-mega__col--type :focus) .nb-mega__dom[aria-current="true"] { background: var(--w-face); color: var(--nb-ink); }
  .nb-mega__col--dom:not(:focus-within):has(~ .nb-mega__col--type :focus) .nb-mega__dom[aria-current="true"] small { color: var(--nb-ink-3); }
}

/* 서랍 — 95 의 창을 오른쪽에 세운 모양. 목록은 눌린 흰 목록 상자, 고른 줄은 남색 띠 */
.nb-drawer__panel {
  background: var(--w-face);
  border-left: 2px solid var(--w-light);
  box-shadow: -1px 0 0 var(--w-dark), -4px 0 0 var(--nb-shade-2);
}
.nb-drawer__bar { border-bottom: 2px solid var(--w-shadow); box-shadow: 0 1px 0 var(--w-light); }
.nb-drawer__row { border-bottom-color: var(--nb-line); }
.nb-drawer__row:hover,
.nb-drawer__row:focus-visible { background: var(--nb-accent); color: var(--nb-on-accent); }
.nb-drawer__row:hover small,
.nb-drawer__row:focus-visible small,
button.nb-drawer__row:hover::after,
button.nb-drawer__row:focus-visible::after { color: var(--nb-on-accent-2); }
.nb-drawer__brand:active {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}

/* 견적 줄 — 95 의 작업 표시줄 */
.nb-buybar { background: var(--w-face); border-top: 2px solid var(--w-light); box-shadow: 0 -1px 0 var(--w-shadow); }

/* 발 — 창 아래 상태 표시줄. 사업자 정보가 눌린 칸에 들어간다. */
.site-footer {
  background: var(--w-face);
  border-top: 2px solid var(--w-light);
  box-shadow: 0 -1px 0 var(--w-shadow);
}
.site-footer__co {
  border-top: 0;
  padding: var(--nb-s3);
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}

/* ── 스크롤막대 ───────────────────────────────────────────── */
* { scrollbar-color: var(--w-face) var(--w-face-2); }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--w-face-2) 0 25%, var(--w-light) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb {
  background: var(--w-face);
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
}
::-webkit-scrollbar-corner { background: var(--w-face); }

/* ── 그 밖 ────────────────────────────────────────────────── */
.nb-pager .page-numbers.current {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}
.nb-pager .page-numbers.dots { border: 0; box-shadow: none; background: transparent; }
/* 가르는 선은 95 의 홈(etched) — 어두운 1px 아래 흰 1px */
.nb-dh__facets { border-block: 1px solid var(--w-shadow); box-shadow: 0 1px 0 var(--w-light), inset 0 1px 0 var(--w-light); }


/* ── 떠 있는 납이 — 95 의 풍선 도움말 ────────────────────────
 * 윈도의 풍선 도움말은 연노랑 바탕(#ffffe1)에 검은 1px 테두리였다. 둥근 모서리는 없다.
 * ───────────────────────────────────────────────────────── */
.nb-nabi-float__bubble {
  background: var(--w-tip);
  color: var(--w-dark);
  border: 1px solid var(--w-dark);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--nb-shade-2);
}
.nb-nabi-float__bubble::after { border-color: var(--w-dark); }

/* ── PDF 프로필 블록 (구축 기획 2단계) ───────────────────────
 * 보는 칸(사양 칸 · 규칙 · 자리 · 확인 칸)은 눌린 면, 누르는 칩(시리즈 링크)은 튀어나온 면.
 * 형명 결과 줄은 단추를 품은 판이라 튀어나온 판으로 둔다.
 * ───────────────────────────────────────────────────────── */
.nb-sd__item,
.nb-ps__life,
.nb-oc__seg,
.nb-mp__seg,
.nb-sg__rule,
.nb-bn__col,
.nb-ov__life {
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light);
  border-radius: 0;
}
.nb-oc__out,
.nb-mp__out,
a.nb-chip,
b.nb-chip {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face);
  border-radius: 0;
}
a.nb-chip:active {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}
/* 자리 제목은 은색 면 위에 앉는다 — 밝은 판의 바탕색이라야 테두리가 제목 뒤로 비치지 않는다 */
.nb-oc__seg legend { background: var(--w-face); }
/* 모델 선택 — 코드 칩은 튀어나온 단추, 고른 칩은 제목 표시줄 남색으로 눌린다 */
.nb-mp__seg legend { background: var(--w-face); }
.nb-mp__chip { border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow); background: var(--w-face); border-radius: 0; }
.nb-mp__chip[aria-pressed="true"] { border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow); box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2); background: var(--w-title); color: var(--c-white); }
/* 해당 모델 칸 — 보는 칸(눌린 면). 칸 안에서 스크롤한다 */
.nb-mp__codes:not(.nb-mp__codes--desc) { border: 2px solid; border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow); box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2); background: var(--w-light); }
.nb-mp__no { background: var(--w-title); color: var(--c-white); }
.nb-mp__code { border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light); box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow); background: var(--w-face); border-radius: 0; }
.nb-mp__code[aria-pressed="true"] { border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow); box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2); background: var(--w-title); color: var(--c-white); }
.nb-mp__sum { border: 2px solid var(--w-title); background: var(--w-light); }
.nb-oc__opts label:has(input:checked) { background: var(--w-title); color: var(--c-white); }
.nb-oc__opts label:has(input:checked) :is(code, span) { color: var(--c-white); }
.nb-oc__no { background: var(--w-title); color: var(--c-white); }

/* ── 세부군 탭 (목록 구조 패치) ──────────────────────────────
 * 탭은 누르는 것이라 튀어나온 면, 고른 탭은 눌러 둔 면 — 95 의 탭이 그랬다.
 * 찾기 칸은 값이 들어가는 곳이라 눌린 면.
 * ───────────────────────────────────────────────────────── */
.nb-lm__tab {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face); border-radius: 0;
}
.nb-lm__tab[aria-selected="true"] {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light); color: var(--nb-ink);
}
.nb-lm__tab[aria-selected="true"] small { color: var(--nb-ink-3); }

/* ── 머리 줄 제품 메뉴 (브랜드 | 카테고리) ──────────────────
 * 브랜드 줄과 카테고리 줄은 누르는 것이라 튀어나온 면, 고른 브랜드는 눌러 둔 면.
 * ───────────────────────────────────────────────────────── */
.nb-bm__types a,
.nb-bm__logo {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face); border-radius: 0;
}
.nb-bm__brand[aria-current="true"] {
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light); color: var(--nb-ink);
}
.nb-bm__brand[aria-current="true"] small { color: var(--nb-ink-3); }

/* 붙어 있는 칸 제목 — 목록 상자(눌린 흰 칸) 안이라 바탕도 그 색이어야 글자가 비쳐 보이지 않는다 */
.nb-mega__label { background: var(--w-light); }
.nb-mega--hero .nb-mega__intro {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face); border-radius: 0;
}

/* 늘 보이는 스크롤 막대 — 95 의 은색 판에 맞춘 얇은 막대 */
.nb-mega--hero .nb-mega__col,
.nb-mega--hero .nb-mega__pane { scrollbar-width: thin; scrollbar-color: var(--w-face-2) var(--w-light); }

/* 머리 줄은 눌린 상자 안의 제목 띠 — 은색 면에 아래로 금 하나 */
.nb-mega--hero .nb-mega__intro > .nb-mega__label {
  background: var(--w-face); border-bottom-color: var(--w-face-2);
  box-shadow: inset 0 -1px 0 var(--w-light);
}

/* 셋째 칸(브랜드 판)도 목록 상자와 같은 높이에서 시작한다 — 세 칸 머리가 한 줄로 선다.
   머리가 소개 상자 안으로 들어갔으므로, 상자째로 칸 위에 붙어 있게 한다. */
@media (min-width: 1024px) {
  .nb-mega--hero .nb-mega__pane { margin-block: var(--nb-s2); }
  .nb-mega--hero .nb-mega__intro { position: sticky; top: 0; z-index: 2; }
}

/* ── 모델 선택기 (격자) ──────────────────────────────────────
 * 칸은 누르는 것이라 튀어나온 면, 고른 칸은 눌린 면. 찾기 칸은 값이 들어가니 눌린 면.
 * ───────────────────────────────────────────────────────── */
.nb-model-opt,
.nb-model-go {
  border: 2px solid;
  border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow);
  background: var(--w-face); border-radius: 0;
}
.nb-model-opt:has(input:checked) {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light);
}
.nb-model-opt--none { background: var(--w-light); }
.nb-models__find input {
  border: 2px solid;
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
  background: var(--w-light); border-radius: 0;
}

/* ── 제품 정보 탭 ────────────────────────────────────────────
 * 단추가 아니라 탭이다 — 95 속성 창의 탭처럼.
 *   탭 줄 아래에 판의 윗선이 가로로 지나간다.
 *   고른 탭은 한 단 높고, 아랫변이 없어 그 선을 덮으며 아래 판과 이어진다.
 *   나머지 탭은 2px 낮게 앉고 윗선 위에 선다.
 * 폭은 모두 같다(가장 긴 이름 기준 10rem) — 이름 길이에 따라 들쭉날쭉하지 않게.
 * ───────────────────────────────────────────────────────── */
.nb-pd__nav.nb-ptabs { border-block: 0; }
.nb-ptabs__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 10rem; justify-content: start; align-items: end;
  gap: 0; padding: var(--nb-s2) 0 0; overflow: visible;
  border-bottom: 2px solid var(--w-shadow); box-shadow: inset 0 -1px 0 var(--w-dark);
}
.nb-ptabs__tab {
  position: relative; top: 2px; justify-content: center;
  min-height: 36px; margin: 0 0 0 -2px; padding: 0 var(--nb-s2);
  /* 흰 바탕 위라 95 의 흰 빛 테는 보이지 않는다 — 바깥 테는 회색 · 검정, 흰 빛은 안쪽 한 줄로 */
  border: 2px solid; border-bottom: 0; border-color: var(--w-shadow) var(--w-dark) transparent var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-light), inset -1px 0 0 var(--w-face-2);
  background: var(--w-face); color: var(--nb-ink-2); font-weight: 600; border-radius: 0;
}
.nb-ptabs__list > :first-child { margin-left: 0; padding-left: var(--nb-s2); }
.nb-ptabs__tab:hover { color: var(--nb-ink); border-bottom-color: transparent; }
.nb-ptabs__tab[aria-selected="true"] {
  top: 3px; z-index: 1; min-height: 42px; margin-inline: -2px -2px;
  background: var(--w-face); color: var(--nb-ink); font-weight: 700;
  border-color: var(--w-shadow) var(--w-dark) transparent var(--w-shadow);
}
.nb-ptabs__tab[aria-selected="true"] small { color: var(--nb-ink-3); }
.nb-ptabs__tab:focus-visible { outline: 1px dotted var(--nb-ink); outline-offset: -5px; }
/* 휴대폰 — 네 탭이 줄을 똑같이 나눈다 */
@container nb-block (max-width: 479px) {
  .nb-ptabs__list { grid-auto-columns: minmax(0, 1fr); justify-content: stretch; }
}

/* 바탕화면 띠 바로 위에 붙는 발 — 흰 테두리를 지운다.
   발의 위쪽 흰 선은 은색 판이 "튀어나와" 보이게 하는 95 문법인데, 회색 바탕화면 띠 아래에서는
   두 띠 사이에 흰 줄이 낀 것처럼 보인다(사용자 2026-09-21 "미묘하게 떨어져 있네"). */
.site-main:has(> .nb-desk:last-child) + .site-footer,
.site-main:has(> .nb-block--home-hero + .nb-desk:last-child) + .site-footer {
  border-top-color: var(--w-face-2);
}

/* 브랜드 로고 칸 — 어디에 놓이든 흰 칸 + 눌린 테두리(사용자 2026-09-18 "로고도 희고 바탕도 희다").
   로고 그림 자체가 흰 배경을 품고 있어, 칸이 흰 종이 위에 그냥 얹히면 경계가 사라지고
   은색 판 위에 얹히면 흰 네모가 뜬다. 칸은 흰색으로 고정하고 경계는 눌린 테두리가 만든다. */
.nb-heading__logo, .nb-about__logo, .nb-mega__logo, .nb-bm__logo, .nb-drawer__logo, .nb-bp__logo { background: var(--c-white); }

/* 브랜드 배너 명판 — 튀어나온 은색 창 */
.nb-heading__plate {
  border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow), 4px 4px 0 color-mix(in srgb, var(--w-dark) 45%, transparent);
  background: var(--w-face);
}

/* 쌓기 바탕화면의 창 아닌 조각 — 튀어나온 은색 판 */
.nb-desk--stack .nb-desk__stage > :not(.nb-block):not(.nb-heading):not(script) {
  border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow), 6px 6px 0 color-mix(in srgb, var(--w-dark) 45%, transparent);
  background: var(--w-face);
}
/* 형광펜 — 95 선택 영역의 남색 */
.nb-hl { background: var(--w-title); color: var(--c-white); }
/* 머리 줄 제품 메뉴의 브랜드 로고 — 누르면 브랜드 페이지. 눌린 순간은 눌린 면 */
.nb-bm__logo:active {
  border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow);
  box-shadow: inset 1px 1px 0 var(--w-dark), inset -1px -1px 0 var(--w-face-2);
}

/* 도해 뷰어 — 그림 카드는 은색 면, 그림 액자는 눌린 흰 면(위 목록), 종류 칩은 제목 표시줄 남색 */
.nb-cf__fig { border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow); background: var(--w-face); }
.nb-cf__kind { background: var(--w-title); color: var(--c-white); }
/* 제품 알아보기(잡지형) — 도해 카드는 누르는 것이 아니라 보는 것이라 베벨 없이 평평한 은색 판(액자만 눌린 흰 면, 위 목록).
   종류 칩은 제목 표시줄 남색. 적용 분야 칩은 보는 칩(은색). */
.nb-ps__card { border: 1px solid var(--w-shadow); background: color-mix(in srgb, var(--w-face) 40%, var(--w-light)); }
.nb-ps__kind { background: var(--w-title); color: var(--c-white); }
.nb-ps__apps li { border-color: var(--w-shadow); background: color-mix(in srgb, var(--w-face) 40%, var(--w-light)); border-radius: 0; }

/* 입력칸의 예시 글(placeholder)은 실제 입력값과 헷갈리지 않게 흐리게 · 보통 굵기로 (사용자 2026-09-17: "예시는 좀 더 흐리게") */
/* 어느 입력칸이든 한 규칙(2026-09-17 — 검색칸 셋이 목록에서 빠져 기본 회색으로 남았다) */
::placeholder { color: var(--c-gray-50); font-weight: 400; opacity: 1; }

/* 알림 — 95 프로그램 창(사용자 2026-09-17 "적어도 GUI 창 — 프로그램 디자인"): 튀어나온 은색 창 · 그림자 ·
   제목 표시줄은 다른 창과 같은 남색 → 파랑(사용자 "다른 창과 같은 색으로 원상복귀") · 닫기 단추 · 아이콘 없음 */
.nb-alert {
  border: 2px solid; border-color: var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow: inset 1px 1px 0 var(--w-face-2), inset -1px -1px 0 var(--w-shadow), 4px 4px 0 color-mix(in srgb, var(--w-dark) 45%, transparent);
  background: var(--w-face); padding: 2px; border-radius: 0;
}
.nb-alert__bar { background: linear-gradient(90deg, var(--w-title), var(--w-title-2)); color: var(--c-white); }