/* 공개 화면의 틀 — 왼쪽 목록 + 본문 위 머리띠 (2026-09-25).

   사장님 "헤더가 있지않고 왼쪽의 목록으로 잡기로하고" · 시안 2+3안 확정.
   위쪽 메뉴를 걷고 `/start` 가 쓰던 왼쪽 목록을 다섯 화면에 함께 씌운다.

   머리띠가 하는 일은 화면 종류로 갈린다.

     목록(설비·생산라인·인사이트)  위치 + 건수 → 내려가면 검색창이 붙어 따라온다
     상세(설비·모듈·글)            빵부스러기 — 깊이 들어간 곳이라 길을 알려 준다
     회사소개                      띠 없음 — 랜딩이라 히어로가 바로 시작한다

   사이드바는 `/start` 와 같은 어두운 판이다(start.css 의 값 그대로). 본문은
   화면마다 제 색을 유지한다 — 설비 목록은 아이보리, 설비 상세는 먹, 나머지는 흰색. */

:root{
  --ps-w: 232px;                    /* 사이드바 너비 — start.css 와 같은 값 */
  /* 왼쪽 여백 — 2026-09-26. 사장님 "120으로 모든페이지 왼쪽여백 맞추자.
     대표공급장비와 대표구축생산라인 최신콘텐츠는 200으로 띄워줘."
     화면마다 제각각이던 값(허브 0 · 나머지 40)을 여기 하나로 모은다.
     앞자리 세 칸(대표 공급 설비 · 대표 구축 생산라인 · 최신 콘텐츠)만
     더 들여, 제목과 카드가 함께 200 에서 시작한다. */
  --ps-gut: 120px;
  --ps-gut-flag: 200px;
  /* 2026-09-25 — 먹 판으로 시작했다가 밝게 바꿨다(사장님 "왼쪽으로 탭을
     놓으니 답답해보이네"). 본문이 흰색·아이보리인데 왼쪽만 먹이면 벽처럼
     선다. 밝게 두고 가는 선으로만 가르면 숨이 트인다. */
  --ps-bg: #fbfaf7;
  --ps-line: rgba(15,22,28,.10);
  --ps-fg: #1a2128;
  --ps-muted: #6b7681;
  --ps-soft: rgba(15,22,28,.055);
  --ps-go: #4DB6AC;          /* 상징색 — 문의 버튼 */
  --ps-strip: 48px;                 /* 머리띠 — 제목·건수만. 검색은 띠 위에 뜬다 */
}

/* ── 왼쪽 목록 ─────────────────────────────────────────────── */
.ps-side, .ps-side *{box-sizing: border-box}
.ps-side{
  box-shadow: 1px 0 0 rgba(15,22,28,.04);
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--ps-w); z-index: 60;
  background: var(--ps-bg); border-right: 1px solid var(--ps-line);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 22px;
  transition: width .18s cubic-bezier(.16,1,.3,1), padding .18s;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}
.ps-brand{
  display: flex; align-items: center; gap: 10px; padding: 2px 8px;
  color: var(--ps-fg); text-decoration: none;
}
.ps-brand img{width: 26px; height: 26px; display: block; flex: none}
.ps-brand b{font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25}
.ps-brand b span{display: block; font-size: 11.5px; font-weight: 500; color: #8c979f}

.ps-nav{display: flex; flex-direction: column; gap: 2px}
.ps-nav a{
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.02em;
  color: var(--ps-muted); text-decoration: none; transition: .14s;
  white-space: nowrap;
}
.ps-nav a:hover{background: var(--ps-soft); color: var(--ps-fg)}
.ps-nav a:hover .ps-ic{color: var(--ps-fg)}
.ps-nav a.on .ps-ic{color: var(--ps-go)}
.ps-nav a.on{background: var(--ps-soft); color: var(--ps-fg); font-weight: 600}
.ps-nav a{display: flex; align-items: center; gap: 10px}
.ps-ic{display: block; flex: none; width: 19px; height: 19px; color: #9aa5ad; transition: color .14s}

/* 고르는 칸과 읽는 칸을 가른다 — 2026-09-26 에 가이드·인사이트 사이에
   그었다가, 2026-09-30 에 한 칸 올렸다. 가이드는 읽을거리인데 설비·생산라인
   쪽에 붙어 있어 4+3 으로 어긋나 보였다. 사장님 "2개 3개 정도 나누는건데
   또 타이틀을 표시하는건 의미없어. 순서만 잘 정리해줘" — 이름표는 안 붙인다.

       설비 구성 추천 · 설비 · 생산라인
       ──────────────
       설비 구매 가이드 · 공장 운영 인사이트 · 산업동향 · 회사소개

   칸 자체에 border-top 을 주면 눌렸을 때 알약이 저 혼자 길어지므로,
   선은 칸 밖에 따로 긋는다. */
.ps-nav a[href="/content"]{position: relative; margin-top: 9px}
.ps-nav a[href="/content"]::before{
  content: ""; position: absolute; left: 8px; right: 8px; top: -5px;
  height: 1px; background: var(--ps-line);
}
:root.ps-folded .ps-nav a[href="/content"]::before{left: 2px; right: 2px}

/* 줄 하나를 더 넣어 목록을 셋으로 나눈다 — 도구 / 읽을거리 / 회사
   (2026-10-01 "산업동향과 회사소개 중간에 라인 하나 넣어서"). */
.ps-nav a[href="/company"]{position: relative; margin-top: 9px}
.ps-nav a[href="/company"]::before{
  content: ""; position: absolute; left: 8px; right: 8px; top: -5px;
  height: 1px; background: var(--ps-line);
}
:root.ps-folded .ps-nav a[href="/company"]::before{left: 2px; right: 2px}
.ps-ic svg{width: 100%; height: 100%; display: block}

/* 햄버거 — 맨 위, 로고 옆. 사이드바 밖에 걸면 머리띠 제목과 겹친다. */
.ps-top{display: flex; align-items: center; justify-content: space-between; gap: 8px}
.ps-fold{
  flex: none; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  color: #9aa5ad; cursor: pointer;
  transition: color .14s, background .14s;
}
.ps-fold svg{width: 17px; height: 17px}
.ps-fold:hover{background: rgba(15,22,28,.06); color: var(--ps-fg)}

/* 유튜브 채널 바로가기 — 문의 버튼 위, 테두리만(주 버튼은 문의다). 2026-09-27 */
.ps-yt{
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ps-fg); border: 1px solid rgba(15,22,28,.16);
  padding: 10px 14px; border-radius: 999px;
}
.ps-yt:hover{background: rgba(15,22,28,.05)}
.ps-yt-ic{display: block; width: 20px; height: 20px; flex: none}
.ps-yt-ic svg{width: 100%; height: 100%}
.ps-yt + .ps-ask{margin-top: 8px}
.ps-ask{
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.02em;
  color: #06201c; background: var(--ps-go);
  padding: 12px 14px; border-radius: 999px;
}
.ps-ask:hover{filter: brightness(1.07)}

/* ── 접힘 — 60px 띠로 줄고 아이콘만 남는다 ─────────────────── */
@media (min-width: 900px){
  :root.ps-folded{--ps-w: 60px}
  :root.ps-folded .ps-side{padding: 18px 10px; gap: 18px; align-items: center}
  :root.ps-folded .ps-top{flex-direction: column; gap: 10px; width: 100%}
  :root.ps-folded .ps-brand{padding: 2px; justify-content: center}
  :root.ps-folded .ps-brand b{display: none}
  :root.ps-folded .ps-tx{display: none}
  :root.ps-folded .ps-nav{width: 100%}
  :root.ps-folded .ps-nav a{justify-content: center; padding: 10px 0; gap: 0}
  :root.ps-folded .ps-yt{
    width: 40px; height: 40px; padding: 0; border-radius: 50%; margin-inline: auto;
  }
  :root.ps-folded .ps-ask{
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; margin-inline: auto; margin-top: 6px;
  }
  /* 2026-09-26 — 펼친 상태에서 글과 아이콘이 같이 떴다(사장님 "탭화면
     버튼이 이상해"). 규칙 두 줄이 서로 엇갈려 있었고 마지막 줄이 조건
     없이 아이콘을 켜 놓고 있었다. 펴면 글만, 접으면 아이콘만. */
  .ps-ask .ps-ic{display: none}
  :root.ps-folded .ps-ask .ps-ic{display: block}
  .ps-ask-ic{width: 18px; height: 18px}
}

/* ── 본문은 목록만큼 비켜 앉는다 ───────────────────────────── */
.ps-main{min-width: 0}
@media (min-width: 900px){
  .ps-main{margin-left: var(--ps-w); transition: margin-left .18s cubic-bezier(.16,1,.3,1)}
}

/* ── 머리띠 ────────────────────────────────────────────────── */
.ps-strip{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  height: var(--ps-strip); padding: 0 24px;
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(15,22,28,.09);
  font-family: "Noto Sans KR", -apple-system, sans-serif;
}
.ps-strip b{font-size: 14px; font-weight: 800; letter-spacing: -.03em; color: #0d1116; white-space: nowrap}
.ps-strip .ps-count{margin-left: auto; font-size: 12.5px; font-weight: 600; color: #8c979f; white-space: nowrap}

/* 먹 화면(설비 상세·생산라인 상세)에서는 띠도 어둡게 */
.ps-strip.is-dark{
  background: rgba(16,18,21,.78); border-bottom-color: rgba(255,255,255,.10);
}
.ps-strip.is-dark b{color: #f2f4f6}
.ps-strip.is-dark .ps-count{color: #98a2ac}
.ps-strip.is-dark .ps-crumb{color: #98a2ac}
.ps-strip.is-dark .ps-crumb i{color: #59636d}
.ps-strip.is-dark .ps-crumb b{color: #f2f4f6}

/* 빵부스러기 — 상세 화면 */
.ps-crumb{
  display: flex; align-items: center; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: #8c979f; letter-spacing: -.02em;
}
.ps-crumb a{color: inherit; text-decoration: none}
.ps-crumb a:hover{color: #1558c0}
.ps-crumb i{font-style: normal; color: #c3cbd2; margin: 0 7px; flex: none}
.ps-crumb b{
  font-size: 13px; color: #0d1116; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 따라오는 검색 — 2026-09-26.

   띠 안에 넣었다가 뺀다(사장님 "왜 검색창이 띠안에 있어야하지? 없어도
   되잔아"). 띠에 넣으면 자리도 폭도 띠에 묶인다. 화면에 띄우고 자리는
   마음대로 잡는다.

   폭은 700px 로 되돌린다 — 띠 폭을 통째로 쓰게 했더니 너무 넓었다
   (사장님 "700px가 괜찬았는데").

   떠 있으니 그 아래 내용을 조금 가린다. 왼쪽에 붙이고 700px 로 두어
   가리는 자리를 줄인다 — 오른쪽 카드는 그대로 보인다. */
.ps-find{
    box-sizing: border-box;
    position: fixed;
    top: 172px;                    /* 머리띠(48px) 한참 아래 */
    /* 기준은 머리띠다(그 backdrop-filter 가 fixed 의 기준점을 바꾼다).
       띠는 이미 사이드바 다음에서 시작하므로 사이드바 폭을 더하지 않는다. */
    left: var(--ps-gut);           /* 제목·카드와 같은 시작점 */
    z-index: 55;
    display: flex; align-items: center; gap: 14px;
    width: min(700px, calc(100% - 80px)); height: 66px;
    padding: 0 9px 0 24px;
    background: #14171b;
    border: 1.5px solid #4DB6AC;
    border-radius: 20px;
    font-size: 21px; font-weight: 500; color: #ededed; letter-spacing: -.03em;
    cursor: text; text-align: left;
    box-shadow: 0 4px 12px rgba(15,22,28,.18), 0 20px 44px rgba(15,22,28,.24),
                0 0 0 4px rgba(77,182,172,.12);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .2s, transform .2s cubic-bezier(.16,1,.3,1),
                border-color .16s, box-shadow .16s;
}
.ps-find svg{width: 24px; height: 24px; flex: none; color: #4DB6AC}
.ps-find-in{
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: none;
    font: inherit; color: #ededed;
    -webkit-appearance: none; appearance: none;
}
.ps-find-in::placeholder{color: #8b949e; font-weight: 400}
.ps-find-in::-webkit-search-cancel-button{-webkit-appearance: none}
.ps-find i{
    flex: none; width: 46px; height: 46px; border-radius: 14px;
    background: #4DB6AC; color: #06201c;
    display: grid; place-items: center; font-style: normal;
}
/* 치우는 단추 — 2026-09-26. 작게, 화살표 오른쪽에. 있는 줄 알아볼 만큼만
   또렷하고 누를 것을 찾는 눈을 뺏지는 않는다. */
.ps-find-x{
  flex: none; width: 26px; height: 26px; margin-left: 4px; margin-right: 2px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: rgba(255,255,255,.45); font-size: 19px; line-height: 1; cursor: pointer;
  transition: color .14s, background .14s;
}
.ps-find-x:hover{background: rgba(255,255,255,.12); color: #fff}
.ps-find i svg{width: 19px; height: 19px; color: inherit}
.ps-strip.is-stuck .ps-find{opacity: 1; transform: none; pointer-events: auto}
.ps-find:hover, .ps-find:focus-within{border-color: #6fded2;
    box-shadow: 0 4px 12px rgba(15,22,28,.18), 0 24px 52px rgba(15,22,28,.28),
                0 0 0 5px rgba(77,182,172,.20)}

/* 오른쪽 여백은 **글에만** 준다.

   여기서 두 번 틀렸다.
     1) `.ps-main` 에 주니 머리띠·히어로 배경까지 밀려 오른쪽이 잘려 보였다
     2) 가로로 넘겨 보는 카드 띠에 주니 끝에 빈 자리가 생겼다
        (사장님 "가로스크롤 문제야. 이건 기존에도 계속 했던 실수야")

   **넘겨 보는 띠는 화면 끝까지 간다.** 다음 카드가 걸쳐 보여야 더 있다는
   것이 읽힌다. 원본 CSS 의 padding-right: 100px 도 같이 지운다. */
.ps-main .lib-wrap,
.ps-main .hub-inner{padding-right: 40px}

/* 글 허브(구매 가이드·공장 운영) — 2026-09-26. 사장님 "이미지를 키우고
   넓게 하자. 너무 빡빡해. 왼쪽에 너무 붙어있어."

   왼쪽 여백이 0 이었다. 다른 화면은 다 40px 인데 여기만 사이드바에
   그대로 붙어 있었다. 카드도 300px 로 좁아 사진이 작았다.

   띠 폭도 고친다. 원본 계산식은 `.hub-inner` 가 1160px 로 가운데 정렬일
   때를 전제로 (100vw-1160px)/2 를 더했는데, 껍데기에서 max-width 를
   풀어 버려 그 값이 그대로 밖으로 삐져나갔다 — 1440px 화면에서 띠가
   1504px 이 되어 **페이지에 가로 스크롤이 났다.** 오른쪽 여백만큼만
   넘겨 화면 끝에 닿게 한다(다음 카드가 걸쳐 보이는 것은 그대로다). */
.ps-main .lib-wrap,
.ps-main .hub-inner,
.ps-main .eqd-wrap,
.ps-main .pld-wrap,
.ps-main .md-wrap{padding-left: var(--ps-gut) !important}
/* 2026-09-26(2차) — 띠 상자가 200 에서 시작해 카드가 거기서 잘려
   사라졌다(사장님 "최신콘텐츠도 가로스크롤에 문제가 있어"). 다른 띠는
   전부 화면 왼쪽 끝까지 빠져나가 있어 카드가 가장자리로 흘러 나간다.
   여기도 같게 한다 — 상자는 왼쪽 끝까지, 첫 카드는 padding 으로 200. */
.ps-main .hub-latest-scroll{
  width: calc(100% + var(--ps-gut-flag) + 40px) !important;
  margin-left: calc(var(--ps-gut-flag) * -1) !important;
  padding-left: var(--ps-gut-flag) !important;
  /* scroll-snap-align:start 는 상자 끝(스크롤포트)에 맞추므로, 그냥 두면
     브라우저가 첫 카드를 왼쪽 끝에 붙이려고 스스로 200px 을 밀어 버린다
     (scrollLeft 이 0 이 아니라 200 으로 시작했다). 스냅 기준을 여백 뒤로
     옮겨야 왼쪽 들여쓰기가 살아 있는다. */
  scroll-padding-left: var(--ps-gut-flag) !important;
  gap: 2rem;
  padding-right: 40px;
}
.ps-main .hub-latest-item{flex: 0 0 420px}
.ps-main .hub-list{max-width: 1040px}
/* 카테고리 타일 — 2026-09-26. 사장님 "웨 3개를 세로로 3줄을 띄우는지
   모르겠어." 주제 셋이 세로로 쌓여 칸이 쓸데없이 길고 빈 자리가 컸다.
   한 줄에 눕혀 작은 알약으로 읽히게 한다 — 「무엇을 다루는 칸인지」를
   훑는 용도이지 목록이 아니다. */
.ps-main .hub-category-topics{
  flex-direction: row !important; flex-wrap: wrap; gap: .4rem .45rem !important;
}
.ps-main .hub-category-topics li{
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(15,22,28,.05); font-size: .84rem; line-height: 1.5;
}
.ps-main .hub-category-tile{padding: 1.5rem 1.4rem !important; gap: .8rem !important}

/* ── 넘겨 보는 띠에는 스크롤바를 두지 않는다 ────────────────────
   2026-09-26. 사장님 "밑에 스크롤바 없애줘. 다른것들도 가로스크롤에
   스크롤바는 없는거로". 띠마다 제각각이던 것을 한 곳에서 없앤다 —
   손으로 밀거나 트랙패드로 넘기면 된다. */
.ps-main .sft-loop-track,
.ps-main .elementor-loop-container,
.ps-main .e-loop-container,
.ps-main .hub-category-grid,
.ps-main .hub-latest-scroll,
.ps-main .eqd-loop-scroll,
.ps-main .pld-loop-scroll,
.ps-main .shift-related-scroll{scrollbar-width: none; -ms-overflow-style: none}
.ps-main .sft-loop-track::-webkit-scrollbar,
.ps-main .elementor-loop-container::-webkit-scrollbar,
.ps-main .e-loop-container::-webkit-scrollbar,
.ps-main .hub-category-grid::-webkit-scrollbar,
.ps-main .hub-latest-scroll::-webkit-scrollbar,
.ps-main .eqd-loop-scroll::-webkit-scrollbar,
.ps-main .pld-loop-scroll::-webkit-scrollbar,
.ps-main .shift-related-scroll::-webkit-scrollbar{display: none; height: 0; width: 0}

/* 건수를 이름 옆 괄호로 — 2026-09-26, 사장님 "숫자는 카테고리명 옆에
   () 형식으로". 종전에는 제목 아래 제 줄을 차지했다. */
.ps-main .hub-category-head{display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap}
.ps-main .hub-category-title{display: inline}
.ps-main .hub-category-count{
  display: inline; margin-left: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .86em; color: #8c979f; font-weight: 500;
}

/* 카드에 「자세히 보기」 — 누르면 설명 모달이 뜬다는 것을 알려 준다
   (사장님 "모달을 볼 유도버튼이나 텍스트도 달아줘"). */
.ps-main .hub-category-more{
  margin-top: auto; padding-top: 14px;
  font-size: 13.5px; font-weight: 700; color: #0f8a7e;
}
.ps-main .hub-category-tile:hover .hub-category-more{text-decoration: underline; text-underline-offset: 3px}

/* ── 카테고리를 한 줄 띠로 ──────────────────────────────────────
   2026-09-26. 사장님 "바꾸지말고 기존 그대로 유지하자. 가로스크롤만
   넣어줘. 이모콘을 키우고 강하게". 카드 생김새·모달은 그대로 두고
   격자만 띠로 바꾼다. 화면에 세 장 반이 서고 나머지는 넘겨 본다. */
.ps-main .hub-category-grid{
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  overflow-x: auto; scroll-snap-type: x proximity;
  width: calc(100% + var(--ps-gut) + 40px);
  margin-left: calc(var(--ps-gut) * -1);
  padding-left: var(--ps-gut);
  scroll-padding-left: var(--ps-gut);
  padding-right: 0; padding-bottom: 14px;
}
/* 세 장 반 — flex-basis 의 100% 는 띠의 안쪽 폭(왼쪽 여백을 이미 뺀 값)이라
   여백을 또 빼면 안 된다. 사이 간격 셋(48px)만 뺀다. */
.ps-main .hub-category-tile{
  flex: 0 0 calc((100% - 48px) / 3.5) !important;
  min-width: 300px; scroll-snap-align: start;
}
/* 아이콘을 키우고 강하게 */
.ps-main .hub-category-icon{
  width: 68px !important; height: 68px !important;
  font-size: 2.1rem !important;
  box-shadow: 0 6px 18px rgba(16,20,24,.22);
}
@media (max-width: 899.98px){
  .ps-main .hub-category-grid{
    width: calc(100% + var(--ps-gut) + 16px);
    padding-right: 0; gap: 12px !important;
  }
  .ps-main .hub-category-tile{flex: 0 0 82% !important; min-width: 0}
  .ps-main .hub-category-icon{width: 58px !important; height: 58px !important; font-size: 1.8rem !important}
}

/* ── 글 한 편(포스트) 아래의 넘겨 보는 띠 ─────────────────────────
   2026-09-26. 원본은 100vw + left:50% + margin-left:-50vw 로 뷰포트 전체를
   쓰고 padding-left 계산식으로 시작점을 되돌리는 방식이었다. 그 계산식이
   `.shift-single-inner` 가 1160px 로 **화면 한가운데** 있을 때를 전제로 해서,
   왼쪽에 사이드바가 생긴 지금은 양쪽으로 다 삐져나갔다 — 1440px 화면에서
   띠가 30..1470 이 되어 문서 폭이 2248px, 페이지에 가로 스크롤이 났다.

   본문 상자 안으로 되돌린다. 글은 읽는 화면이라 본문과 띠가 같은 선에서
   시작하는 편이 낫고, 넘침도 사라진다. */
.ps-main .shift-related-scroll{
  width: 100% !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  scroll-padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 1.6rem !important;
}

/* ── 카테고리 설명 모달 ────────────────────────────────────────
   2026-09-26. 카드를 누르면 바로 걸러진 목록으로 가던 것을, 한 번
   설명하고 보낸다(사장님 "모달로 카테고리에 어떤내용이 있는지
   설명해야해"). 카드는 눌리는 것이라는 표시만 더 준다. */
.hub-category-tile{cursor: pointer}
.pc-modal-back{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,22,28,.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pc-modal-back[hidden]{display: none}
.pc-modal{
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border-radius: 20px; padding: 30px 28px 26px;
  box-shadow: 0 30px 80px rgba(15,22,28,.28);
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  color: #1a2128;
}
.pc-modal-x{
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; color: #9aa5ad; cursor: pointer;
}
.pc-modal-x:hover{background: rgba(15,22,28,.06); color: #1a2128}
.pc-modal-ic{
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #14171b; font-size: 22px; margin-bottom: 14px;
}
.pc-modal-head{display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap}
.pc-modal h3{margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em}
.pc-modal-count{
  margin: 0; font-size: 15px; color: #8c979f;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.pc-modal-blurb{margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: #3d4852}
.pc-modal-blurb[hidden]{display: none}
.pc-modal-topics{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px}
.pc-modal-topics span{
  padding: 5px 11px; border-radius: 999px;
  background: rgba(15,22,28,.05); font-size: 13.5px; color: #4a555f;
}
/* 대표 글 — 칸마다 최대 셋. 발행 2편 이상인 칸만 실려 온다. */
.pc-modal-feat{margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(15,22,28,.08)}
.pc-modal-feat[hidden]{display: none}
.pc-modal-feat-h{margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #8c979f}
.pc-modal-feat-item{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; margin: 0 -8px; border-radius: 10px;
  color: #1a2128; text-decoration: none; font-size: 14px; line-height: 1.5;
}
.pc-modal-feat-item:hover{background: rgba(15,22,28,.05)}
.pc-modal-feat-item img{
  flex: none; width: 46px; height: 34px; border-radius: 6px;
  object-fit: cover; background: rgba(15,22,28,.06);
}
.pc-modal-go{
  display: block; margin-top: 22px; padding: 13px 16px; border-radius: 999px;
  background: var(--ps-go); color: #06201c; text-align: center;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.pc-modal-go:hover{filter: brightness(1.07)}
@media (max-width: 560px){
  .pc-modal{padding: 26px 20px 22px; border-radius: 18px}
  .pc-modal h3{font-size: 19px}
}
.ps-main .hub-row-thumb{flex: 0 0 300px}
@media (max-width: 899.98px){
  .ps-main .hub-inner{padding-left: 16px}
  .ps-main .hub-latest-scroll{
    width: calc(100% + var(--ps-gut-flag) + 16px) !important;
    margin-left: calc(var(--ps-gut-flag) * -1) !important;
    padding-left: var(--ps-gut-flag) !important;
    scroll-padding-left: var(--ps-gut-flag) !important;
    padding-right: 16px; gap: 1.2rem;
  }
  .ps-main .hub-latest-item{flex: 0 0 76%}
  .ps-main .hub-row-thumb{flex: 0 0 140px}
}
/* 가로 띠가 화면 폭을 통째로 쓰게 한다 (사장님 "둘다 잡아서 전체폭을 쓰게해").

   **잘라내는 것은 띠가 아니라 그 부모다.** 띠를 감싼 줄(.eq-machine-group-row
   등)에 `overflow-x: hidden` 이 걸려 있어(엘리멘터에 갇히는 걸 막으려고
   원본이 넣었다), 띠를 아무리 넓혀도 부모가 좌우 40px 씩 잘랐다
   (사장님 "새창에 띄워도 왼쪽 오른쪽 가로스크롤이 짤려").

   그래서 **부모 줄을** 여백 밖으로 빼낸다. 띠는 그 안을 채우고, 왼쪽
   padding 40px 으로 첫 카드가 제목과 줄을 맞춘다. */
.ps-main .eq-machine-group-row,
.ps-main .eq-hero-lines,
.ps-main .pl-industry-row,
.ps-main .pl-top10-lines{
    /* 원본이 `width: 100%` 를 박아 둬서 음수 margin 이 넓히지 못하고
       왼쪽으로 밀기만 했다(오른쪽이 80px 모자랐다). 너비를 풀어 준다. */
    width: auto !important;
    margin-left: calc(var(--ps-gut) * -1) !important;
    margin-right: -40px !important;
}
.ps-main .eq-machine-group-row .sft-loop-track,
.ps-main .eq-machine-group-row .elementor-loop-container,
.ps-main .eq-machine-group-row .e-loop-container,
.ps-main .eq-hero-lines .sft-loop-track,
.ps-main .eq-hero-lines .elementor-loop-container,
.ps-main .eq-hero-lines .e-loop-container,
.ps-main .pl-industry-row .sft-loop-track,
.ps-main .pl-top10-lines .sft-loop-track,
.ps-main .sft-loop-track,
.ps-main .elementor-loop-container,
.ps-main .e-loop-container{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--ps-gut) !important;
    scroll-padding-left: var(--ps-gut) !important;
    padding-right: 0 !important;
}
/* 줄이 밖으로 나갔으니 그 안의 제목은 도로 들여 제자리에 둔다 */
.ps-main .eq-hero-lines > h2,
.ps-main .eq-hero-lines > .eq-lib-eyebrow,
.ps-main .eq-hero-lines > .eq-process-group-title,
.ps-main .pl-top10-lines > h2,
.ps-main .pl-top10-lines > .pl-lib-eyebrow,
.ps-main .pl-top10-lines > .pl-lib-title,
.ps-main .pl-industry-row > .pl-industry-title{margin-left: var(--ps-gut) !important}

/* 앞자리 세 칸만 더 들인다 — 제목과 카드가 함께 움직여야 시작점이 맞는다.

   2026-09-26(2차) — 여기 쓰던 `.pl-top10-lines` 를 `.pl-lib-hero` 로 잘못
   적어 두고 있었다. 그런 클래스는 어느 템플릿에도 없다. 그래서 「대표 구축
   생산라인」만 빠져나가지 못하고 .lib-wrap 여백(120) 안에서 제 여백(120)을
   또 먹어 카드가 240 에서 시작했다 — 제목은 120 인데 카드만 밀려
   왼쪽이 끊겨 보였다(사장님 "대표구축생산라인이 가로스크롤이 왼쪽이 끈겨..
   다른가로스크롤은 이상없어"). 이름을 바로잡으니 설비 쪽과 같아진다. */
.ps-main .eq-hero-lines .sft-loop-track,
.ps-main .eq-hero-lines .elementor-loop-container,
.ps-main .eq-hero-lines .e-loop-container,
.ps-main .pl-top10-lines .sft-loop-track{
  padding-left: var(--ps-gut-flag) !important;
  scroll-padding-left: var(--ps-gut-flag) !important;
}
.ps-main .eq-hero-lines > h2,
.ps-main .eq-hero-lines > .eq-lib-eyebrow,
.ps-main .eq-hero-lines > .eq-process-group-title,
.ps-main .pl-top10-lines > h2,
.ps-main .pl-top10-lines > .pl-lib-eyebrow,
.ps-main .pl-top10-lines > .pl-lib-title{margin-left: var(--ps-gut-flag) !important}
/* 최신 콘텐츠는 빠져나간 줄이 아니라 .hub-inner 안에 있다 — 칸째로 민다. */
.ps-main .hub-section:has(.hub-latest-scroll){padding-left: var(--ps-gut-flag) !important}

/* ── 좁은 화면 — 목록을 위로 눕힌다 ────────────────────────── */
@media (max-width: 899.98px){
  .ps-find{top: 150px; left: 16px; width: calc(100vw - 32px)}
  .ps-find{font-size: 17px; padding: 0 7px 0 18px; border-radius: 17px; height: 56px}
  .ps-find svg{width: 21px; height: 21px}
  .ps-find i{width: 40px; height: 40px; border-radius: 12px}
  .ps-fold{display: none}          /* 가로로 누운 상태라 접을 것이 없다 */
  .ps-side{
    position: sticky; top: 0; left: auto; bottom: auto; width: auto;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 0 16px; height: 54px; border-right: 0;
    border-bottom: 1px solid var(--ps-line);
  }
  .ps-brand b span{display: none}
  .ps-brand b{font-size: 13px}
  .ps-nav{
    flex-direction: row; gap: 4px; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .ps-nav::-webkit-scrollbar{display: none}
  .ps-nav a{padding: 6px 9px; font-size: 13px}
  .ps-yt{margin-top: 0; margin-left: auto; flex: none; padding: 7px 10px; font-size: 12.5px}
  .ps-yt .ps-tx{display: none}
  .ps-yt + .ps-ask{margin-top: 0; margin-left: 6px}
  .ps-ask{
    margin-top: 0; margin-left: auto; flex: none;
    padding: 8px 13px; font-size: 12.5px;
  }
  .ps-strip{padding: 0 16px; height: 44px; top: 54px}
  .ps-strip b{font-size: 13px}
  .ps-find{max-width: none}
}
@media (max-width: 560px){
  .ps-ask{display: none}          /* 좁으면 이름 다섯이 먼저다 */
  .ps-yt{display: none}
  .ps-brand b{display: none}
}

/* ── /start 만 먹 ────────────────────────────────────────────
   그 화면은 본문 자체가 먹(대화)이라 밝은 판을 두면 부딪힌다.
   틀은 같이 쓰고 색만 되돌린다. body.start-dark 로 표시한다. */
body.start-dark{
  --ps-bg: #111111;
  --ps-line: #2c2c2c;
  --ps-fg: #ededed;
  --ps-muted: #a8a8a8;
  --ps-soft: #1b1b1b;
  --ps-go: #4DB6AC;
}

/* 먹 화면에서는 왼쪽 목록도 먹이다 — 2026-09-26, 사장님 "다크톤은 왼쪽 탭이
   다크로가야해". 밝은 판을 붙여 두니 본문과 부딪혔다. 화면마다 바탕이 조금씩
   달라(설비 #14171b · 생산라인 #0a0b0c) 값은 각자 쓰고, 나머지 규칙은
   /start 와 함께 쓴다. 모듈 상세(md-body)는 흰 화면이라 여기 없다. */
body.eqd-body{
  --ps-bg: #14171b;
  --ps-line: #2a2e35;
  --ps-fg: #eef1f3;
  --ps-muted: #9aa3ad;
  --ps-soft: #22262c;
  --ps-go: #4DB6AC;
}
body.pld-body{
  --ps-bg: #0a0b0c;
  --ps-line: #1e2124;
  --ps-fg: #f0f2f4;
  --ps-muted: #98a0a8;
  --ps-soft: #15181b;
  --ps-go: #4DB6AC;
}
body.start-dark .ps-side,
body.eqd-body .ps-side,
body.pld-body .ps-side{box-shadow: none}
body.start-dark .ps-yt,
body.eqd-body .ps-yt,
body.pld-body .ps-yt{border-color: rgba(255,255,255,.18)}
body.start-dark .ps-yt:hover,
body.eqd-body .ps-yt:hover,
body.pld-body .ps-yt:hover{background: rgba(255,255,255,.06)}
body.start-dark .ps-ask,
body.eqd-body .ps-ask,
body.pld-body .ps-ask{color: #06201c}
body.start-dark .ps-brand b span,
body.eqd-body .ps-brand b span,
body.pld-body .ps-brand b span{color: var(--ps-muted)}
body.start-dark .ps-fold,
body.eqd-body .ps-fold,
body.pld-body .ps-fold{color: #6e7681}
body.start-dark .ps-fold:hover,
body.eqd-body .ps-fold:hover,
body.pld-body .ps-fold:hover{background: var(--ps-soft); color: var(--ps-fg)}

/* ── 왼쪽 들여쓰기 되돌리기 (2026-09-25) ──────────────────────
   원본 CSS 는 사이드바가 없던 시절 것이라 제목·탭·카드 띠에 왼쪽
   200~300px 을 직접 물려 뒀다("타이틀은 왼쪽에 너무 붙어있어" 2026-08-28).
   이제 사이드바가 그 자리를 대신하는데 들여쓰기가 남아 이중으로 밀리고,
   탭 줄이 오른쪽으로 넘쳐 잘렸다(사장님 "페이지가 오른쪽이 짤리고 있어.
   전체폭을다쓰게해"). 틀 안에서는 그 값을 걷는다. */
.ps-main .eq-lib-eyebrow,
.ps-main .eq-lib-title,
.ps-main .sft-library-search,
.ps-main .eq-category-tabs-wrap,
.ps-main .eq-process-group-title,
.ps-main .eq-machine-group-title,
.ps-main .pl-lib-eyebrow,
.ps-main .pl-lib-title,
.ps-main .pl-industry-title{padding-left: 0 !important}

/* 카드 띠 앞의 빈 칸(순위 숫자 자리)을 없앤다 — 제목과 시작점을 맞춘다.
   (사장님 "타이틀 헤더가 왼쪽으로 붙었음.. 시작점 맞추고")
   `.eq-machine-group-row …::before` 가 152px 로 더 세게 걸려 있어
   같은 무게로 덮는다. */
.ps-main .sft-loop-track::before,
.ps-main .elementor-loop-container::before,
.ps-main .e-loop-container::before,
.ps-main .eq-machine-group-row .sft-loop-track::before,
.ps-main .eq-machine-group-row .elementor-loop-container::before,
.ps-main .eq-machine-group-row .e-loop-container::before,
.ps-main .eq-hero-lines .sft-loop-track::before,
.ps-main .pl-industry-row .sft-loop-track::before{
    display: none !important;
}
.ps-main .pl-industry-row{padding-left: 0 !important}

/* 제목 뒤에 깔리던 가로선 — 전부 지운다
   (사장님 "타이틀헤더의 가로선 다 지워줘"). */
.ps-main .eq-process-group-title::after,
.ps-main .eq-machine-group-title::after,
.ps-main .pl-lib-title::after,
.ps-main .pl-industry-title::after{display: none !important}

/* 탭이 넘칠 때 — 생산라인은 산업이 열넷이라 한 줄에 안 들어간다.
   옆으로 밀 수 있다는 것을 오른쪽 그늘로 알린다(잘린 것처럼 보이지 않게). */
.ps-main .eq-category-tabs-wrap{
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
    scrollbar-width: none;
}
.ps-main .eq-category-tabs-wrap::-webkit-scrollbar{display: none}

/* 넓은 화면에서 본문이 가운데로 모이던 것 (2026-09-25)
   사장님 "다시 왼쪽 여백 생겼어".

   `.lib-wrap` 등에 max-width 1400px 이 걸려 있어, 사이드바를 뺀 자리가
   그보다 넓으면 좌우가 똑같이 비었다(1900px 화면에서 94px 씩). 제목과
   카드는 서로 맞는데 통째로 오른쪽으로 밀려 보인다.

   사이드바가 이미 왼쪽을 잡아 주므로 안에서는 폭을 풀어 준다 —
   §"전체폭을 다 쓰게해". */
.ps-main .lib-wrap,
.ps-main .hub-inner,
.ps-main .eqd-wrap,
.ps-main .pld-wrap,
.ps-main .md-wrap{max-width: none !important}

/* 띠가 커지면 그만큼 제목이 가린다 — 제목이 띠 아래에서 멈추게 한다
   (2026-09-25 사장님 화면에서 「필로우포장기」가 띠에 잘렸다).
   칩·탭으로 내려올 때도 같은 값을 쓴다. */
.ps-main .eq-process-group-title,
.ps-main .eq-machine-group-title,
.ps-main .pl-industry-title,
.ps-main .eq-category-tabs-wrap,
.ps-main [id]{scroll-margin-top: 70px}

@media (max-width: 899.98px){
  /* 좁은 화면에서는 값만 되돌린다 — 위 규칙이 전부 변수를 보고 있어
     여기서 한 번 낮추면 여백·띠·제목이 같이 따라온다. */
  :root{--ps-gut: 16px; --ps-gut-flag: 16px}
  .ps-main .lib-wrap,
  .ps-main .hub-inner{padding-right: 16px}
  .ps-main .eq-machine-group-row,
  .ps-main .eq-hero-lines,
  .ps-main .pl-industry-row,
  .ps-main .pl-top10-lines{margin-left: -16px !important; margin-right: -16px !important}
  .ps-main .sft-loop-track,
  .ps-main .elementor-loop-container,
  .ps-main .e-loop-container{
      margin-left: 0 !important; margin-right: 0 !important;
      padding-left: 16px !important; padding-right: 0 !important;
  }
  .ps-main .eq-machine-group-row,
  .ps-main .eq-hero-lines,
  .ps-main .pl-industry-row,
  .ps-main .pl-top10-lines{width: auto !important}
  .ps-main .eq-hero-lines > h2,
  .ps-main .eq-hero-lines > .eq-process-group-title,
  .ps-main .pl-top10-lines > h2{margin-left: 16px !important}
}


/* ── 휴대폰 머리 — cn 과 같은 방식(2026-10-01 사장님 「모바일에서 페이지 헤더를 중국과 같은 방식으로 …
   햄버거 누르면 옆에 메뉴가 나오는방식」). 위로 눕혀 이름을 늘어놓던 것을 걷고, 막대에는 로고 · 햄버거만.
   햄버거를 누르면(html.ps-mopen) 목록이 왼쪽에서 나오는 판이 되고 뒤는 어둡게 덮는다. PC 의 접기는 그대로. ── */
@media (max-width: 899.98px){
  .ps-side{justify-content: space-between}
  .ps-top{width: 100%}
  .ps-fold{display: flex !important; width: 40px; height: 40px; color: var(--ps-fg, #0d1116)}
  .ps-fold svg{width: 22px; height: 22px}
  .ps-brand b{display: inline !important}
  .ps-nav, .ps-yt, .ps-ask{display: none !important}
  html.ps-mopen{overflow: hidden}
  html.ps-mopen body{padding-top: 54px}
  html.ps-mopen body::before{content: ""; position: fixed; inset: 0; background: rgba(13,17,22,.42); z-index: 89}
  html.ps-mopen .ps-side{
    position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(82vw, 300px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px;
    padding: 14px 14px 22px; border-bottom: 0; border-right: 1px solid var(--ps-line);
    background: #fff; z-index: 90; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.18);
    animation: psIn .22s cubic-bezier(.16,1,.3,1)
  }
  html.ps-mopen .ps-nav{display: flex !important; flex-direction: column; gap: 2px; overflow: visible}
  html.ps-mopen .ps-nav a{padding: 12px 12px; font-size: 15.5px; justify-content: flex-start; gap: 12px}
  html.ps-mopen .ps-nav .ps-tx{display: inline !important}
  html.ps-mopen .ps-yt, html.ps-mopen .ps-ask{display: flex !important; margin: 0}
  html.ps-mopen .ps-yt .ps-tx{display: inline !important}
  html.ps-mopen .ps-yt{margin-top: auto}
}
@keyframes psIn{from{transform: translateX(-100%)}}