/* ==========================================================================
   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. 계산식 박스 줄바꿈 ---- */
pre.tool-formula,
.tool-formula {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* ---- 공통 다듬기: 글자 잘림 방지 ---- */
.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;
  }

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