/* ==========================================================================
   nb-polish.css — NB 25사이트 공용 (2026-10-19 개편)
   모든 사이트에 같은 파일이 들어간다. 원본: E:\NB_WORKSPACE_2026-07-15\_shared\nb-polish.css
   (사이트별 styles.css / nb-readability.css 는 팔레트가 달라 그대로 두고, 이 파일을 마지막에 덧붙인다)

   2026-10-19 전수 측정(375/768/1366, E:\YN_AUTO\site_audit_2026-10-19) 근거:
   1. 모바일 상단 메뉴(.nav 7개)가 가로 스크롤로 40% 가려지고 스크롤 표시가 없어 "잘린" 것처럼 보임
   2. 도구 카드·블로그·채널 줄도 같은 가로 스크롤 → 모바일에서 감싸는 그리드로
   3. 도구 페이지 계산식(pre.tool-formula)이 375 에서 57% 잘림 → 줄바꿈
   4. A형(nb·nb1~4) 슬라이더 화살표가 카드 아래로 떨어짐 → nb-readability.css 의
      768 이하 position:relative 가 absolute 를 덮어쓴 것. absolute 로 되돌린다(히트영역 ::after 는 그대로 동작)
   ========================================================================== */

/* ---- 4. 슬라이더 화살표 위치 복구 ---- */
.promo-arrow,
.rec-arrow {
  position: absolute;
}

/* ---- 3. 계산식 박스 줄바꿈 ---- */
/* 도구 페이지 HTML 에 인라인 style="white-space:pre" 가 있어 !important 로 이긴다(재측정에서 확인) */
pre.tool-formula,
.tool-formula {
  max-width: 100%;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all;
}

/* 도구 검색칸 안내문이 말줄임 없이 잘리던 문제(nb·nb4 #toolSearch) */
#toolSearch,
.tool-search {
  text-overflow: ellipsis;
}

#toolSearch::placeholder,
.tool-search::placeholder {
  font-size: 13px;
}

/* ---- 공통 다듬기: 글자 잘림 방지 ---- */
.tool-card,
.blog-mini,
.channel-item {
  min-width: 0;
}

input::placeholder,
textarea::placeholder {
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  /* ---- 1. 상단 메뉴: 가로 스크롤 대신 4칸 그리드로 전부 보이게 ---- */
  .site-header .nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px !important;
    overflow: visible !important;
    padding: 6px !important;
    white-space: normal !important;
  }

  .site-header .nav > a,
  .site-header .nav > button,
  .site-header .nav > div,
  .site-header .nav > span {
    min-width: 0 !important;
    justify-content: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header .nav svg {
    flex: none;
  }

  /* 둘째 줄: 언어 선택은 2칸, 테마·로그인은 1칸씩 → 글자가 잘리지 않게 */
  .site-header .nav > select {
    grid-column: span 2;
    width: 100% !important;
  }

  /* ---- 2. 도구 카드: 가로 스크롤(6개 중 1개만 보임) → 2열 컴팩트 그리드(아이콘+이름)
     2026-09-30 의 '작업 패널을 첫 스크롤에' 의도는 유지: 카드에서 설명을 숨겨 3줄(약 190px)로 끝낸다 ---- */
  .tools-section .tool-grid,
  .tool-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    grid-template-rows: none !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .tool-grid > .tool-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 56px !important;
    padding: 10px !important;
    align-items: center !important;
  }

  .tool-grid > .tool-card p,
  .tool-grid > .tool-card small,
  .tool-grid > .tool-card .t-desc {
    display: none !important;
  }

  .tool-grid > .tool-card {
    position: relative;
    gap: 8px !important;
    padding-right: 26px !important;
  }

  .tool-grid > .tool-card .t-ico {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }

  .tool-grid > .tool-card .t-ico svg {
    width: 18px !important;
    height: 18px !important;
  }

  .tool-grid > .tool-card .tool-star {
    position: absolute !important;
    top: 4px;
    right: 4px;
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  .tool-grid > .tool-card strong,
  .tool-grid > .tool-card .t-name {
    display: block;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* 메뉴가 2줄이 되므로 모바일에서는 헤더가 화면을 계속 차지하지 않게 스크롤과 함께 올라간다 */
  .site-header {
    position: relative !important;
    top: auto !important;
  }

  /* ---- 2. 블로그 줄: 세로 목록 ---- */
  .blog-strip {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .blog-strip > .blog-mini {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* ---- 2. 채널 줄: 3열 그리드 ---- */
  .channel-strip {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .channel-strip > .channel-item {
    width: auto !important;
    min-width: 0 !important;
  }

  /* nb3·nb4: styles.css 의 .social-hub .channel-thumb{min-height:104px} 가 16:9 와 겹쳐 썸네일이 185px 로
     넓어지며 3열에서 겹치던 문제(재측정에서 발견) */
  .channel-strip > .channel-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 6px !important;
  }

  .channel-strip .channel-thumb {
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: 64px !important;
    aspect-ratio: auto !important;
  }

  /* ---- A형(nb·nb1~4): 상단 메뉴 #mainNav 가로 스크롤 → 줄바꿈 ---- */
  #mainNav {
    flex-wrap: wrap !important;
    justify-content: center;
    overflow: visible !important;
  }

  /* ---- A형 블로그 줄(.lp-strip) 가로 스크롤 → 세로 목록(최대 6개) ---- */
  .lp-strip {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .lp-strip > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .lp-strip > :nth-child(n + 7) {
    display: none !important;
  }

  .channel-strip > .channel-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ==========================================================================
   2026-10-20 디자인 개편 — 깨짐이 아니라 "품질" 자체를 올린다
   - 사이트별 액센트(--brand/--accent, A형 --brand-grad/--brand-rgb-*)는 그대로 쓴다. 색을 새로 정하지 않는다
   - 모션은 transform/opacity 만, blur·backdrop-filter 애니메이션 없음. 무한 장식은 히어로가 화면 밖이면
     nb-polish.js 가 .hero.nbp-off 로 멈춘다. prefers-reduced-motion·html.perf-lite 면 끈다(맨 아래)
   - 공장형(20곳)은 body:has(.site-header) 또는 공장형 전용 클래스(.hero-grid .hero-art .workspace-panel .blog-thumb),
     A형(5곳)은 .hero-title .hero-visual 로 범위를 나눈다(.tool-card 같은 이름이 두 계열에 다 있어서)
   - 광고 슬롯(.ad-slot, ins.adsbygoogle)·자동광고·앵커는 건드리지 않는다
   ========================================================================== */

/* ---- 공통 1. 키네틱 제목 (nb-polish.js 가 단어를 .nbk-w 로 감싼다) ---- */
.nbk .nbk-w {
  display: inline-block;
  transform-origin: 50% 85%;
  animation: nbkRise 0.56s cubic-bezier(0.2, 1.3, 0.35, 1) both;
  animation-delay: calc(min(var(--i, 0), 7) * 42ms);
}
@keyframes nbkRise {
  0% { opacity: 0; transform: translate3d(0, 0.45em, 0) rotate(4deg); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* 제목 아래를 쓸고 지나가는 액센트 막대 */
.nbk::after {
  content: "";
  display: block;
  width: clamp(56px, 8vw, 112px);
  height: 5px;
  margin-top: 0.34em;
  border-radius: 999px;
  background: var(--brand-grad);
  transform-origin: 0 50%;
  animation: nbkBar 0.7s 0.42s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}
.nbk.nbk-center::after { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; }
@keyframes nbkBar { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* 공장형 h1 은 h1 전체에 background-clip:text 그라데이션 → 자식이 transform 되면 글자가 사라진다.
   h1 그라데이션을 풀고 강조 단어(.nbk-hl)에만 액센트 그라데이션을 준다 */
html .hero-grid h1.nbk {
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.035em;
}
.hero-grid h1.nbk .nbk-hl {
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand), #fff 46%), color-mix(in srgb, var(--accent), #fff 24%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
html[data-theme="light"] .hero-grid h1.nbk .nbk-hl {
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand), #000 28%));
  -webkit-background-clip: text;
  background-clip: text;
}
/* A형: 흰 배경이라 진한 쪽 액센트(--brand-rgb-b)를 주인공으로 */
.hero-title.nbk .nbk-hl {
  background: linear-gradient(100deg, rgb(var(--brand-rgb-b, 124, 58, 237)), color-mix(in srgb, rgb(var(--brand-rgb-b, 124, 58, 237)), rgb(var(--brand-rgb-a, 167, 139, 250)) 38%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}

/* ---- 공장형 2. 히어로 아트: 빈 상자 → 그 사이트 도구로 만든 작업 미리보기 ---- */
.hero-art .art-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none; /* 과거 렉 원인(backdrop-filter) 제거 — 불투명 패널로 대체 */
  background: color-mix(in srgb, var(--dark, #070b12), #fff 7%);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .hero-art .art-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 28, 50, 0.1); }

/* fx.js 가 뿌리는 장식 점(.nb-dot)이 카드 글자 위에 겹치지 않게 */
.nbp-art .art-card { z-index: 1; }

.nbp-art .art-card.one {
  inset: 30px 30px 116px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
  overflow: hidden;
}
.nbp-win { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nbp-win > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.nbp-win > i:nth-child(2) { background: #febc2e; }
.nbp-win > i:nth-child(3) { background: #28c840; }
.nbp-win b {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 10px;
  font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 30%; /* 오른쪽 위 마스코트와 겹치지 않게 */
}
.nbp-wico { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--brand-grad); color: var(--brand-ink, #fff); }
.nbp-wico svg { width: 14px; height: 14px; }
.nbp-rows { display: grid; gap: 9px; }
.nbp-rows span { display: block; width: var(--w); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.nbp-rows span:first-child { background: color-mix(in srgb, var(--brand), transparent 62%); }
html[data-theme="light"] .nbp-rows span { background: rgba(15, 28, 50, 0.08); }
html[data-theme="light"] .nbp-rows span:first-child { background: color-mix(in srgb, var(--brand), transparent 70%); }
.nbp-bars { flex: 1; min-height: 56px; display: flex; align-items: flex-end; gap: 8px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.nbp-bars span {
  flex: 1; height: var(--h); min-height: 8px; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand), #fff 18%), color-mix(in srgb, var(--brand), transparent 70%));
  opacity: 0.55; transform-origin: 50% 100%;
  animation: nbpGrow 0.8s cubic-bezier(0.2, 1.3, 0.3, 1) both;
  animation-delay: calc(0.45s + var(--i) * 60ms);
}
.nbp-bars span:nth-child(4) { opacity: 1; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand), transparent 55%); }
@keyframes nbpGrow { from { transform: scaleY(0.05); } to { transform: none; } }

.nbp-art .art-card.two {
  inset: auto 30px 30px auto;
  width: auto; height: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
.nbp-chip {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--brand-grad); color: var(--brand-ink, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px color-mix(in srgb, var(--brand), transparent 62%);
  animation: nbpPop 0.55s cubic-bezier(0.2, 1.5, 0.35, 1) both;
  animation-delay: calc(0.7s + var(--i) * 80ms);
}
.nbp-chip:nth-child(even) { background: color-mix(in srgb, var(--brand), transparent 78%); color: color-mix(in srgb, var(--brand), #fff 55%); box-shadow: none; }
html[data-theme="light"] .nbp-chip:nth-child(even) { color: var(--brand); }
.nbp-chip svg { width: 21px; height: 21px; }
@keyframes nbpPop { from { opacity: 0; transform: scale(0.4) translateY(10px); } to { opacity: 1; transform: none; } }

.nbp-art .art-card.three {
  inset: auto auto 30px 30px;
  width: min(46%, 260px); height: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
}
.nbp-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--brand), transparent 76%); color: color-mix(in srgb, var(--brand), #fff 50%); }
html[data-theme="light"] .nbp-ico { color: var(--brand); }
.nbp-ico svg { width: 20px; height: 20px; }
.nbp-t { display: grid; gap: 2px; min-width: 0; }
.nbp-t b { font-size: 13.5px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbp-t small { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 공장형 3. 섹션 리듬·타이포 위계 ---- */
body:has(.site-header) :is(.latest-posts, .channel-hub, .tools-section, .affiliate-deals) {
  margin-top: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 34px);
  border-radius: 24px;
}
body:has(.site-header) .tools-head > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 900; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--brand), #fff 40%);
  background: color-mix(in srgb, var(--brand), transparent 84%);
  border: 1px solid color-mix(in srgb, var(--brand), transparent 66%);
}
html[data-theme="light"] body:has(.site-header) .tools-head > span { color: var(--brand); }
body:has(.site-header) .tools-head > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body:has(.site-header) .tools-head h2,
body:has(.site-header) .channel-hub > h2 { font-size: clamp(26px, 3.4vw, 40px) !important; letter-spacing: -0.035em !important; line-height: 1.18; }
body:has(.site-header) .latest-posts > .section-head > span { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: var(--text); }

/* ---- 공장형 4. 도구 카드 ---- */
body:has(.site-header) .tool-grid > .tool-card {
  border-radius: 18px;
  transition: transform 0.28s var(--ease-out, ease), border-color 0.2s ease, box-shadow 0.28s ease, background 0.2s ease;
}
body:has(.site-header) .tool-grid > .tool-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand), transparent 55%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}
body:has(.site-header) .tool-grid > .tool-card.is-active {
  border-color: color-mix(in srgb, var(--brand), transparent 30%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand), transparent 45%) inset, 0 18px 40px color-mix(in srgb, var(--brand), transparent 80%);
}
html[data-theme="light"] body:has(.site-header) .tool-grid > .tool-card:hover { box-shadow: 0 16px 36px rgba(25, 40, 70, 0.12); }
body:has(.site-header) .tool-grid > .tool-card strong { font-weight: 800; }

/* ---- 공장형 5. 작업 패널(입력폼·결과 카드) ---- */
.workspace-panel {
  position: relative;
  padding: clamp(16px, 2.2vw, 24px) !important;
  border-radius: 22px !important;
  gap: clamp(14px, 2vw, 22px) !important;
}
.workspace-panel::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.8; pointer-events: none;
}
.workspace-panel .ws-head h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.025em; }
.workspace-panel .field input,
.workspace-panel .field select,
.workspace-panel .field textarea {
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.workspace-panel .field input:focus,
.workspace-panel .field select:focus,
.workspace-panel .field textarea:focus {
  border-color: color-mix(in srgb, var(--brand), transparent 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 80%);
  outline: none;
}
.ws-result-head > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: 0.04em; }
.ws-result-head > span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 78%);
}
/* 결과 칸: 비어 있어도 '캔버스'처럼 보이게 점 격자 */
.ws-result #resultBox {
  border-radius: 16px;
  min-height: 180px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text), transparent 90%) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

/* ---- 공장형 6. 블로그 카드: 커버 디자인 + 번호 ---- */
.blog-strip { counter-reset: nbpost; }
.blog-strip > .blog-mini { counter-increment: nbpost; }
.blog-mini:has(> .blog-thumb) {
  padding: 10px 10px 14px;
  border-radius: 20px;
  transition: transform 0.28s var(--ease-out, ease), border-color 0.2s ease, box-shadow 0.28s ease;
}
.blog-mini:has(> .blog-thumb):hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand), transparent 55%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.blog-mini > .blog-thumb {
  place-items: end start;
  align-content: end;
  min-height: 132px;
  padding: 16px;
  text-align: left;
  border-radius: 14px;
  background:
    radial-gradient(120px 90px at 88% 12%, rgba(255, 255, 255, 0.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 16px),
    linear-gradient(145deg, color-mix(in srgb, var(--brand), #000 8%), color-mix(in srgb, var(--accent), #000 55%));
}
.blog-mini > .blog-thumb::before {
  content: counter(nbpost, decimal-leading-zero);
  position: absolute; top: 12px; left: 16px;
  font-size: 12px; font-weight: 900; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.75);
}
.blog-mini > .blog-thumb strong { font-size: 15.5px; font-weight: 900; letter-spacing: -0.02em; color: #fff; -webkit-line-clamp: 3; }
.blog-mini > .blog-thumb small { position: absolute; top: 12px; right: 14px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.6); font-weight: 700; }
/* 같은 제목이 커버와 본문에 두 번 나오던 것 → PC 는 커버 제목만 남긴다 */
.blog-mini:has(> .blog-thumb) > b { display: none; }
.blog-mini:has(> .blog-thumb) > .blog-meta { color: color-mix(in srgb, var(--brand), #fff 35%); font-weight: 800; font-size: 12px; padding: 0 4px; }
html[data-theme="light"] .blog-mini:has(> .blog-thumb) > .blog-meta { color: var(--brand); }
.blog-mini:has(> .blog-thumb) > time { padding: 0 4px; }

/* ---- 7. 공장형 'site-blueprint' 카드: 다크 테마에서 흰 바탕 + 흰 글씨로 안 보이던 것 ---- */
html:not([data-theme="light"]) body:has(.site-header) .site-blueprint {
  --surface: color-mix(in srgb, var(--dark, #070b12), #fff 6%);
  --surface-soft: color-mix(in srgb, var(--dark, #070b12), #fff 10%);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f6f8fc;
  --muted: #b4bdd0;
  --primary: color-mix(in srgb, var(--brand), #fff 35%);
  border-radius: 24px;
}

/* ---- 8. 푸터 ---- */
body:has(.site-header) .footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand), transparent 93%), transparent 70%);
}
body:has(.site-header) .footer .ft-col a { transition: color 0.15s ease; }
body:has(.site-header) .footer .ft-col a:hover { color: color-mix(in srgb, var(--brand), #fff 30%); }
body:has(.site-header) .footer .ft-col > b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---- 9. 공장형 도구 상세 페이지(/tools/*.html) ---- */
main.latest-posts > article > h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 900;
  word-break: keep-all;
}
main.latest-posts > article > section { margin-top: clamp(26px, 3.4vw, 40px); }
main.latest-posts > article > section > h2 { letter-spacing: -0.025em; }
main.latest-posts > article > section > ol { counter-reset: nbstep; list-style: none; padding-left: 0; display: grid; gap: 8px; }
main.latest-posts > article > section > ol > li {
  counter-increment: nbstep;
  position: relative; padding: 12px 14px 12px 50px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel, rgba(255, 255, 255, 0.04));
}
main.latest-posts > article > section > ol > li::before {
  content: counter(nbstep);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  font-size: 13px; font-weight: 900; background: var(--brand-grad); color: var(--brand-ink, #fff);
}
main.latest-posts > article pre.tool-formula {
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: 14px !important;
}
main.latest-posts > article .faq-item { border-radius: 14px; }

@media (max-width: 900px) {
  .nbp-art .art-card.one { inset: 24px 24px 104px 24px; }
}

@media (max-width: 640px) {
  /* 모바일도 PC 와 같은 미리보기 구성을 축소해서 보여준다(대칭) */
  .hero-art.nbp-art { min-height: 300px !important; }
  .nbp-art .art-card.one { inset: 18px 18px 92px 18px; padding: 13px 14px 14px; gap: 11px; }
  /* 375 폭에서는 작은 카드에 도구 이름이 다 안 들어가 칩 줄만 남기고 가로로 넓힌다 */
  .nbp-art .art-card.two { left: 18px; right: 18px; bottom: 18px; justify-content: space-between; padding: 9px 12px; gap: 7px; }
  .nbp-art .art-card.three { display: none; }
  .nbp-chip { width: 36px; height: 36px; border-radius: 12px; }
  .nbp-chip svg { width: 18px; height: 18px; }
  .nbp-ico { width: 34px; height: 34px; border-radius: 10px; }
  .nbp-ico svg { width: 17px; height: 17px; }
  .nbp-t b { font-size: 12.5px; }
  .hero-art.nbp-art .nb-mascot { width: 96px !important; top: 10px !important; right: 10px !important; }

  /* 모바일 블로그: 커버(번호) 왼쪽 + 제목 오른쪽 가로 카드(세로로 4장 쌓이며 화면을 다 먹던 것) */
  .blog-strip > .blog-mini:has(> .blog-thumb) {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 12px; row-gap: 4px;
    align-items: center; align-content: center; min-height: 0 !important;
    padding: 10px !important;
  }
  .blog-strip > .blog-mini > .blog-thumb {
    grid-row: 1 / span 3; min-height: 84px !important; height: 84px; padding: 10px; place-items: center; align-content: center;
  }
  .blog-strip > .blog-mini > .blog-thumb::before { position: static; font-size: 20px; letter-spacing: 0.04em; color: #fff; }
  .blog-strip > .blog-mini > .blog-thumb strong,
  .blog-strip > .blog-mini > .blog-thumb small { display: none !important; }
  .blog-strip > .blog-mini:has(> .blog-thumb) > b {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14.5px; line-height: 1.4; padding: 0 4px; word-break: keep-all;
  }

  /* 채널 3열: 항목 min-height 140px 때문에 줄 사이가 크게 벌어지던 것 */
  .channel-strip > .channel-item { min-height: 0 !important; }

  main.latest-posts > article > section > ol > li { padding-left: 46px; }

  /* A형 nb(PDF): 문서 3장이 375 폭에서 오른쪽 끝에 잘리던 것 — 스택을 더 줄여 상자 안에 넣는다 */
  .hero-pdf-visual .doc-stack { transform: scale(0.66); }
}

/* ---- 모션 끄기·멈추기 ---- */
.hero.nbp-off *,
.hero.nbp-off *::before,
.hero.nbp-off *::after { animation-play-state: paused !important; }
html.perf-lite .nbk .nbk-w,
html.perf-lite .nbk::after,
html.perf-lite .nbp-art .art-card,
html.perf-lite .nbp-bars span,
html.perf-lite .nbp-chip { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .nbk .nbk-w,
  .nbk::after,
  .nbp-art .art-card,
  .nbp-bars span,
  .nbp-chip { animation: none !important; }
  .tool-card, .blog-mini { transition: none !important; }
}