/* ==========================================================================
   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;
  }
}